.item-studio-page {
    --item-panel: rgba(10, 18, 34, .88);
    --item-panel-soft: rgba(17, 28, 49, .72);
    --item-border: rgba(163, 187, 226, .14);
    --item-copy: #edf5ff;
    --item-muted: #94a6c3;
    display: grid;
    gap: 18px;
    padding-bottom: 32px;
}

.item-studio-hero {
    position: relative;
    min-height: 210px;
    padding: 36px 40px;
    overflow: hidden;
    border: 1px solid rgba(97, 202, 255, .22);
    border-radius: 24px;
    background:
        radial-gradient(circle at 83% 40%, rgba(109, 72, 255, .3), transparent 28%),
        radial-gradient(circle at 68% 120%, rgba(35, 210, 194, .24), transparent 38%),
        linear-gradient(128deg, rgba(12, 25, 48, .98), rgba(11, 15, 31, .97));
    box-shadow: 0 24px 75px rgba(0, 0, 0, .27), inset 0 1px rgba(255, 255, 255, .05);
}

.item-studio-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .2;
    background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(90deg, #000, transparent 76%);
}

.item-studio-hero-copy { position: relative; z-index: 2; max-width: 760px; }
.item-studio-hero h3 { margin: 9px 0 8px; color: #f4f8ff; font-weight: 780; letter-spacing: -.045em; }
.item-studio-subtitle { max-width: 700px; color: #afbdd3 !important; line-height: 1.65 !important; }
.item-studio-kicker { display: inline-flex; align-items: center; gap: 7px; color: #69d8ff; font-size: .7rem; font-weight: 800; letter-spacing: .16em; }
.item-studio-kicker .mud-icon-root { font-size: 1rem; }
.item-studio-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.item-studio-hero-chips span { padding: 8px 12px; border: 1px solid rgba(139, 183, 226, .18); border-radius: 10px; color: #a6b5cc; background: rgba(4, 11, 24, .4); font-size: .76rem; }
.item-studio-hero-chips b { margin-right: 4px; color: #fff; font-size: .9rem; }
.item-studio-hero-chips .is-dirty { color: #ffd285; border-color: rgba(255, 188, 75, .4); background: rgba(255, 166, 28, .1); }
.item-studio-hero-art { position: absolute; z-index: 1; right: 8%; top: 50%; width: 130px; height: 130px; display: grid; place-items: center; color: #dce7ff; transform: translateY(-50%); }
.item-studio-hero-art > .mud-icon-root { font-size: 54px; filter: drop-shadow(0 0 22px rgba(125, 103, 255, .7)); }
.item-studio-orbit { position: absolute; inset: 0; border: 1px solid rgba(135, 215, 255, .25); border-radius: 32px; transform: rotate(18deg); }
.item-studio-orbit.orbit-two { inset: 16px -18px; border-color: rgba(194, 126, 255, .28); transform: rotate(-24deg); }

.item-studio-toolbar {
    position: sticky;
    z-index: 8;
    top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 16px;
    border: 1px solid var(--item-border) !important;
    border-radius: 17px !important;
    background: rgba(8, 15, 29, .92) !important;
    backdrop-filter: blur(18px);
    box-shadow: 0 13px 38px rgba(0,0,0,.24) !important;
}

.item-toolbar-current { min-width: 0; display: flex; align-items: center; gap: 12px; }
.item-toolbar-current > span:last-child { min-width: 0; display: grid; }
.item-toolbar-current small { color: #6e89ae; font-size: .6rem; font-weight: 800; letter-spacing: .13em; }
.item-toolbar-current strong { overflow: hidden; color: #edf5ff; text-overflow: ellipsis; white-space: nowrap; }
.item-toolbar-current em { color: #7f91aa; font-size: .72rem; font-style: normal; }
.item-toolbar-icon { --item-accent: #69d8ff; position: relative; width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--item-accent), transparent 45%); border-radius: 12px; color: var(--item-accent); background: color-mix(in srgb, var(--item-accent), transparent 88%); }
.item-toolbar-icon img { position: absolute; z-index: 2; width: 29px; height: 29px; object-fit: contain; }
.item-toolbar-actions { display: flex; align-items: center; gap: 7px; }
.item-new-menu-dot { width: 8px; height: 8px; display: inline-block; margin-right: 9px; border-radius: 50%; box-shadow: 0 0 9px currentColor; }

.item-studio-layout { display: grid; grid-template-columns: minmax(280px, 330px) minmax(0, 1fr); align-items: start; gap: 18px; }
.item-catalog { position: sticky; top: 90px; height: calc(100vh - 118px); display: flex; flex-direction: column; padding: 17px; overflow: hidden; border: 1px solid var(--item-border) !important; border-radius: 20px !important; background: var(--item-panel) !important; }
.item-catalog-head, .item-asset-browser-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.item-catalog-head h2, .item-asset-browser-head h4 { margin: 2px 0 0; color: #eef5ff; font-size: 1.12rem; }
.item-type-filter { flex: 0 0 auto; display: grid; gap: 5px; padding: 12px 0 6px; }
.item-type-filter > label { padding-left: 2px; color: #71849e; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.item-type-select { position: relative; display: grid; grid-template-columns: 28px minmax(0,1fr) 24px; align-items: center; min-height: 42px; padding: 0 7px; border: 1px solid rgba(135,160,194,.2); border-radius: 10px; color: #7591b4; background: rgba(255,255,255,.025); }
.item-type-select:focus-within { border-color: rgba(105,216,255,.55); box-shadow: 0 0 0 2px rgba(105,216,255,.08); }
.item-type-select .mud-icon-root { font-size: 1.05rem; pointer-events: none; }
.item-type-select select { width: 100%; min-width: 0; height: 40px; border: 0; outline: 0; color: #dce8f8; background: transparent; font: inherit; font-size: .76rem; font-weight: 650; appearance: none; cursor: pointer; }
.item-type-select select option { color: #dce8f8; background: #101b2e; }
.item-catalog-results { flex: 0 0 auto; display: flex; justify-content: space-between; gap: 10px; padding: 9px 2px 10px; color: #71849e; font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; }
.item-catalog-results span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-catalog-list { flex: 1 1 auto; min-height: 0; display: block; overflow-y: auto; padding-right: 3px; }
.item-catalog-row { --item-accent: #69d8ff; width: 100%; min-height: 61px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 8px 9px; border: 1px solid transparent; border-radius: 12px; color: inherit; text-align: left; background: transparent; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.item-catalog-row:hover { border-color: rgba(143, 176, 218, .17); background: rgba(255,255,255,.035); transform: translateX(2px); }
.item-catalog-row.is-selected { border-color: color-mix(in srgb, var(--item-accent), transparent 46%); background: linear-gradient(90deg, color-mix(in srgb, var(--item-accent), transparent 84%), rgba(255,255,255,.018)); box-shadow: inset 3px 0 var(--item-accent); }
.item-catalog-icon { position: relative; width: 40px; height: 40px; display: grid; place-items: center; overflow: hidden; border-radius: 11px; color: #65809e; background: rgba(86, 113, 151, .12); }
.item-catalog-icon img { position: absolute; z-index: 2; width: 30px; height: 30px; object-fit: contain; }
.item-catalog-copy { min-width: 0; display: grid; gap: 3px; }
.item-catalog-copy strong { overflow: hidden; color: #e7f0fc; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.item-catalog-copy small { overflow: hidden; color: #70839e; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.item-catalog-signals { display: flex; gap: 3px; color: #6e829e; }
.item-catalog-signals i { display: inline-grid; place-items: center; font-style: normal; }
.item-catalog-signals .mud-icon-root { font-size: .85rem; }
.item-catalog-empty { min-height: 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; color: #7588a4; text-align: center; }
.item-catalog-empty .mud-icon-root { color: #5c769b; font-size: 2rem; }
.item-catalog-empty strong { color: #cbd7e8; }
.item-catalog-empty span { font-size: .76rem; }

.item-designer-workspace { min-width: 0; display: grid; gap: 14px; }
.item-profile-banner { --item-accent: #69d8ff; display: grid; grid-template-columns: 55px minmax(0,1fr) auto; align-items: center; gap: 16px; padding: 18px 21px; border: 1px solid color-mix(in srgb, var(--item-accent), transparent 75%); border-radius: 18px; background: linear-gradient(105deg, color-mix(in srgb, var(--item-accent), transparent 90%), rgba(12,20,37,.9) 35%, rgba(10,17,32,.95)); }
.item-profile-symbol { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--item-accent), transparent 50%); border-radius: 16px; color: var(--item-accent); background: color-mix(in srgb, var(--item-accent), transparent 88%); box-shadow: 0 0 25px color-mix(in srgb, var(--item-accent), transparent 84%); }
.item-profile-symbol .mud-icon-root { font-size: 1.7rem; }
.item-profile-banner h2 { margin: 1px 0; color: #f2f7ff; font-size: 1.4rem; }
.item-profile-banner p { margin: 0; color: #8396b1; font-size: .78rem; }
.item-profile-badges { display: flex; gap: 7px; }
.item-profile-badges span { padding: 7px 10px; border: 1px solid rgba(148,178,214,.15); border-radius: 9px; color: #9eb0c9; background: rgba(255,255,255,.025); font-size: .68rem; }
.item-designer-tabs { overflow: hidden; border: 1px solid var(--item-border); border-radius: 20px; background: rgba(8, 14, 27, .7); }
.item-designer-tabs > .mud-tabs-tabbar { padding: 7px 9px 0; background: rgba(8,15,29,.94); }
.item-designer-tab-panel { padding: 15px !important; }
.item-editor-stack { display: grid; gap: 15px; }

.item-editor-section { --item-accent: #69d8ff; padding: 22px; border: 1px solid var(--item-border) !important; border-radius: 18px !important; background: var(--item-panel-soft) !important; box-shadow: inset 0 1px rgba(255,255,255,.025) !important; }
.item-section-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 13px; margin-bottom: 20px; }
.item-section-head h3 { margin: 2px 0; color: #edf5ff; font-size: 1.05rem; }
.item-section-head p { margin: 0; color: #8193ac; font-size: .75rem; }
.item-section-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--item-accent), transparent 66%); border-radius: 12px; color: var(--item-accent); background: color-mix(in srgb, var(--item-accent), transparent 90%); }
.item-identity-grid { display: grid; grid-template-columns: 138px minmax(0,1fr); gap: 20px; }
.item-icon-preview { position: relative; min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; overflow: hidden; border: 1px dashed rgba(111, 161, 215, .25); border-radius: 17px; color: #607998; background: radial-gradient(circle at 50% 30%, rgba(84, 150, 217, .13), transparent 55%), rgba(4,10,21,.42); }
.item-icon-preview::after { content: ""; position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(45deg, #64748b 25%, transparent 25%), linear-gradient(-45deg, #64748b 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #64748b 75%), linear-gradient(-45deg, transparent 75%, #64748b 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; mask-image: linear-gradient(#000, transparent 88%); }
.item-icon-preview img { position: relative; z-index: 2; width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 7px 13px rgba(0,0,0,.38)); }
.item-icon-preview > .mud-icon-root { position: absolute; z-index: 1; font-size: 3.1rem; }
.item-icon-preview span { position: relative; z-index: 2; margin-top: 65px; color: #7186a2; font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; }
.item-icon-preview img + .mud-icon-root + span { margin-top: 0; }
.item-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.item-form-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.item-field-span, .item-field-wide { grid-column: 1 / -1; }
.item-behavior-callout, .item-behavior-empty { display: flex; align-items: center; gap: 13px; padding: 14px 16px; margin-bottom: 16px; border: 1px solid color-mix(in srgb, var(--item-accent), transparent 75%); border-radius: 13px; background: color-mix(in srgb, var(--item-accent), transparent 92%); }
.item-behavior-callout .mud-icon-root, .item-behavior-empty .mud-icon-root { color: var(--item-accent); }
.item-behavior-callout div, .item-behavior-empty div { display: grid; gap: 2px; }
.item-behavior-callout strong, .item-behavior-empty strong { color: #dfe9f7; font-size: .82rem; }
.item-behavior-callout span, .item-behavior-empty span { color: #8193ad; font-size: .72rem; }
.item-gate-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); align-items: center; gap: 16px; margin-top: 17px; }
.item-system-handoff { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid rgba(172,132,255,.27); border-radius: 13px; color: #bda9ff; text-decoration: none; background: rgba(126, 82, 216, .09); }
.item-system-handoff span { flex: 1; display: grid; }
.item-system-handoff small { color: #8c81a8; }
.item-system-handoff:hover { border-color: rgba(172,132,255,.55); color: #dacfff; }
.item-toggle-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.item-toggle-card { display: flex; align-items: center; gap: 5px; min-height: 72px; padding: 8px 12px 8px 5px; border: 1px solid rgba(134,160,194,.12); border-radius: 12px; background: rgba(255,255,255,.018); }
.item-toggle-card.is-on { border-color: rgba(62,210,158,.25); background: rgba(36,173,131,.055); }
.item-toggle-card.is-warning { border-color: rgba(255,177,72,.28); background: rgba(255,160,35,.055); }
.item-toggle-card span { display: grid; gap: 3px; }
.item-toggle-card strong { color: #d9e4f2; font-size: .78rem; }
.item-toggle-card small { color: #7589a4; font-size: .67rem; line-height: 1.3; }
.item-commerce-panel { margin-top: 17px; border: 1px solid rgba(134,160,194,.11); border-radius: 13px; overflow: hidden; }
.item-commerce-toggles { display: flex; flex-wrap: wrap; gap: 20px; }

.item-assets-section { padding-bottom: 20px; }
.item-asset-metrics { display: flex; gap: 6px; }
.item-asset-metrics span { padding: 6px 9px; border: 1px solid rgba(132,163,201,.14); border-radius: 8px; color: #8294ad; font-size: .66rem; }
.item-asset-metrics b { color: #dce7f6; }
.item-asset-family-tabs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; margin-bottom: 14px; }
.item-asset-family-tabs button { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid rgba(130,158,194,.13); border-radius: 12px; color: #7f92ac; text-align: left; background: rgba(255,255,255,.018); cursor: pointer; }
.item-asset-family-tabs button.is-active { border-color: rgba(91,204,255,.38); color: #71d8ff; background: rgba(55,166,222,.08); box-shadow: inset 0 -2px #4bc9ff; }
.item-asset-family-tabs button span { display: grid; color: #dbe7f5; font-size: .78rem; font-weight: 700; }
.item-asset-family-tabs button small { color: #71849f; font-size: .63rem; font-weight: 500; }
.item-asset-workspace { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(300px,.88fr); overflow: hidden; border: 1px solid rgba(133,160,194,.12); border-radius: 15px; background: rgba(4,10,21,.33); }
.item-asset-browser, .item-upload-panel { min-width: 0; padding: 17px; }
.item-upload-panel { display: flex; flex-direction: column; gap: 14px; border-left: 1px solid rgba(133,160,194,.12); }
.item-upload-panel h4 { margin: 2px 0; color: #ecf3fd; font-size: 1rem; }
.item-upload-panel p { margin: 0; color: #788ba7; font-size: .7rem; line-height: 1.5; }
.item-raw-preview { position: relative; height: 170px; display: grid; place-items: center; margin: 13px 0; overflow: hidden; border: 1px solid rgba(123,159,201,.14); border-radius: 12px; background-color: #0b1220; background-image: linear-gradient(45deg, rgba(255,255,255,.04) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.04) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,.04) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.04) 75%); background-size: 18px 18px; background-position: 0 0, 0 9px, 9px -9px, -9px 0; }
.item-raw-preview img { max-width: 94%; max-height: 150px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0,0,0,.45)); }
.item-raw-preview span { position: absolute; left: 8px; bottom: 7px; padding: 4px 7px; border-radius: 6px; color: #8ea2bd; background: rgba(2,7,16,.8); font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; }
.item-layer-list { max-height: 310px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.item-layer-list button { display: grid; grid-template-columns: 39px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 8px; border: 1px solid transparent; border-radius: 10px; color: #71849f; text-align: left; background: rgba(255,255,255,.012); cursor: pointer; }
.item-layer-list button.is-active { border-color: rgba(83,204,255,.3); background: rgba(60,174,225,.07); }
.item-layer-number { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 9px; color: #7ddcff; background: rgba(68,181,232,.11); font-size: .71rem; font-weight: 800; }
.item-layer-list button > span:nth-child(2) { min-width: 0; display: grid; }
.item-layer-list strong { color: #cdd9e8; font-size: .74rem; }
.item-layer-list small { color: #6e829e; font-size: .62rem; }
.item-file-drop { min-height: 126px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 15px; border: 1px dashed rgba(83,198,255,.35); border-radius: 13px; color: #6bd4ff; text-align: center; background: rgba(44,154,214,.05); cursor: pointer; transition: background .16s, border-color .16s; }
.item-file-drop:hover { border-color: rgba(83,198,255,.65); background: rgba(44,154,214,.1); }
.item-file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.item-file-drop .mud-icon-root { font-size: 1.8rem; }
.item-file-drop strong { color: #dceaf9; font-size: .8rem; }
.item-file-drop span { color: #7187a3; font-size: .65rem; }
.item-upload-file-sample { overflow: hidden; color: #8295af; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }

.frame-composer { background: linear-gradient(145deg, rgba(14,24,43,.88), rgba(6,12,24,.95)) !important; }
.frame-composer-grid { display: grid; grid-template-columns: minmax(400px,1.3fr) minmax(290px,.7fr); gap: 15px; }
.frame-stage-column, .frame-inspector { min-width: 0; border: 1px solid rgba(131,161,200,.13); border-radius: 15px; background: rgba(3,8,18,.38); }
.frame-stage-column { padding: 14px; }
.frame-stage-toolbar { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; margin-bottom: 12px; }
.frame-stage-shell { position: relative; max-width: 500px; margin: 0 auto; padding: 14px; border: 1px solid rgba(136,165,202,.12); border-radius: 18px; background: linear-gradient(145deg, rgba(25,38,59,.75), rgba(7,13,25,.9)); box-shadow: 0 24px 45px rgba(0,0,0,.26); }
.frame-stage { position: relative; max-height: 520px; display: grid; place-items: center; margin: auto; overflow: hidden; border-radius: 9px; background-color: #0d1422; background-image: linear-gradient(45deg, rgba(255,255,255,.045) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.045) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,.045) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.045) 75%); background-size: 22px 22px; background-position: 0 0, 0 11px, 11px -11px, -11px 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.frame-stage img { width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }
.frame-stage { container-type: inline-size; }
.frame-layout-guides { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.frame-name-guide { position: absolute; left: calc(var(--guide-x) / 300 * 100%); top: calc(var(--guide-y) / 400 * 100%); width: calc(var(--guide-width) / 300 * 100%); min-height: calc(var(--guide-height) / 400 * 100%); display: grid; place-items: center; padding: 1px 4px; border: 1px dashed rgba(98,218,255,.9); border-radius: 3px; color: #eafbff; background: rgba(29,148,196,.22); box-shadow: 0 0 12px rgba(49,194,244,.2); font-size: clamp(7px, calc(var(--guide-font) / 300 * 100cqw), 24px); font-weight: 800; line-height: 1; text-align: center; text-shadow: 0 1px 2px #000; transform: translate(-50%, -50%); white-space: nowrap; }
.frame-id-guide { position: absolute; left: calc(var(--guide-x) / 300 * 100%); top: calc(var(--guide-y) / 400 * 100%); border: 1px dashed rgba(255,183,98,.92); border-radius: 3px; color: #fff5df; box-shadow: 0 0 12px rgba(255,143,52,.18); font-size: clamp(7px, 2.4cqw, 13px); font-weight: 800; }
.frame-id-guide.is-long { width: calc(103 / 300 * 100%); height: calc(38 / 400 * 100%); }
.frame-id-guide.is-short { width: calc(59 / 300 * 100%); height: calc(38 / 400 * 100%); }
.frame-id-guide .frame-id-box-art { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.frame-id-guide .frame-id-variant-art, .frame-id-guide .frame-id-claim-art { position: absolute; z-index: 2; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.frame-id-guide.is-long .frame-id-variant-art { left: calc(71 / 103 * 100%); top: calc(6 / 38 * 100%); width: calc(25 / 103 * 100%); height: calc(25 / 38 * 100%); }
.frame-id-guide.is-short .frame-id-variant-art { left: calc(32 / 59 * 100%); top: calc(9 / 38 * 100%); width: calc(20 / 59 * 100%); height: calc(20 / 38 * 100%); }
.frame-id-guide.is-short .frame-id-claim-art { left: calc(5 / 59 * 100%); top: calc(5 / 38 * 100%); width: calc(29 / 59 * 100%); height: calc(29 / 38 * 100%); }
.frame-id-number { position: absolute; z-index: 2; left: calc(39 / 103 * 100%); top: calc(21 / 38 * 100%); min-width: calc(19 / 103 * 100%); color: #fff; font-size: clamp(6px, 3cqw, 14px); line-height: 1; text-align: center; text-shadow: -1px -1px #111, 1px -1px #111, -1px 1px #111, 1px 1px #111; transform: translate(-50%,-50%); }
.frame-id-guide.is-gid { width: 39%; min-height: 8.5%; display: flex; align-items: center; justify-content: space-between; padding: 2px 5px; border-color: rgba(170,132,255,.92); color: #eee6ff; background: rgba(105,70,189,.26); box-shadow: 0 0 12px rgba(145,92,255,.2); }
.frame-id-guide.is-gid em { padding: 2px 4px; border-radius: 3px; color: #d7c4ff; background: rgba(255,255,255,.1); font-size: 6px; font-style: normal; letter-spacing: .08em; }
.frame-stage-loading, .frame-stage-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; color: #8599b5; background: rgba(4,10,20,.68); backdrop-filter: blur(3px); font-size: .7rem; }
.frame-stage-empty .mud-icon-root { font-size: 2rem; }
.frame-stage-badge { display: flex; justify-content: space-between; margin-top: 9px; color: #6e819c; font-size: .61rem; text-transform: uppercase; letter-spacing: .08em; }
.frame-timeline { display: grid; grid-template-columns: auto auto minmax(120px,1fr) auto 75px; align-items: center; gap: 3px; margin: 14px 0 10px; }
.frame-timeline-slider { min-width: 0; }
.frame-layer-rail { display: flex; gap: 7px; padding: 5px 1px 2px; overflow-x: auto; }
.frame-layer-rail button { flex: 0 0 auto; min-width: 91px; display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 0 7px; padding: 7px; border: 1px solid rgba(131,158,193,.12); border-radius: 10px; color: #7387a3; text-align: left; background: rgba(255,255,255,.018); cursor: pointer; }
.frame-layer-rail button.is-active { border-color: rgba(95,207,255,.42); background: rgba(50,169,222,.09); }
.frame-layer-rail button > span { grid-row: 1 / 3; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--family-color); background: color-mix(in srgb, var(--family-color), transparent 87%); font-size: .64rem; font-weight: 800; }
.frame-layer-rail strong { color: #c8d5e5; font-size: .68rem; }
.frame-layer-rail small { font-size: .57rem; }
.frame-inspector { padding: 17px; }
.frame-inspector-head { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 13px; border-bottom: 1px solid rgba(131,160,195,.11); }
.frame-inspector-head h4 { margin: 2px 0; color: #edf4fd; font-size: 1rem; }
.frame-inspector-head p { margin: 0; color: #7186a2; font-size: .67rem; }
.frame-inspector-group { display: grid; gap: 10px; padding: 14px 0; border-bottom: 1px solid rgba(131,160,195,.09); }
.frame-inspector-group label { display: grid; gap: 2px; }
.frame-inspector-group label span { color: #cbd8e8; font-size: .73rem; font-weight: 700; }
.frame-inspector-group label small { color: #6f839f; font-size: .63rem; }
.frame-control-pair { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.frame-crop-panel { margin-top: 13px; border: 1px solid rgba(131,160,195,.1); border-radius: 11px; overflow: hidden; }
.frame-prop-readout { display: grid; gap: 5px; margin-top: 14px; }
.frame-prop-readout span { color: #6f839f; font-size: .6rem; text-transform: uppercase; letter-spacing: .09em; }
.frame-prop-readout code { padding: 8px; overflow-wrap: anywhere; border-radius: 8px; color: #8edfff; background: rgba(42,151,203,.08); font-size: .6rem; }
.frame-guide-toggle { display: flex; justify-content: center; margin: 3px 0 12px; padding: 5px 9px; border: 1px solid rgba(109,151,198,.1); border-radius: 10px; background: rgba(255,255,255,.015); }
.frame-layer-stack { overflow: hidden; border: 1px solid rgba(131,161,200,.13); border-radius: 14px; background: rgba(3,8,18,.34); }
.frame-layer-stack > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 13px; border-bottom: 1px solid rgba(131,161,200,.1); }
.frame-layer-stack > header h4 { margin: 1px 0 0; color: #e8f1fc; font-size: .84rem; }
.frame-layer-stack > header > span { color: #7187a5; font-size: .64rem; }
.frame-layer-stack-list { max-height: 238px; overflow-y: auto; padding: 6px; }
.frame-layer-stack-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; border: 1px solid transparent; border-radius: 10px; transition: .16s ease; }
.frame-layer-stack-row + .frame-layer-stack-row { margin-top: 3px; }
.frame-layer-stack-row:hover { border-color: rgba(137,168,204,.15); background: rgba(255,255,255,.025); }
.frame-layer-stack-row.is-active { border-color: color-mix(in srgb, var(--family-color), transparent 56%); background: color-mix(in srgb, var(--family-color), transparent 90%); box-shadow: inset 3px 0 var(--family-color); }
.frame-layer-stack-select { min-width: 0; display: grid; grid-template-columns: 22px 34px minmax(0,1fr); align-items: center; gap: 7px; padding: 7px 5px; border: 0; color: inherit; text-align: left; background: transparent; cursor: pointer; }
.frame-layer-grip { color: #526984; }
.frame-layer-grip .mud-icon-root { font-size: 1rem; }
.frame-layer-number { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; color: var(--family-color); background: color-mix(in srgb, var(--family-color), transparent 87%); font-size: .63rem; font-weight: 850; }
.frame-layer-copy { min-width: 0; display: grid; gap: 2px; }
.frame-layer-copy strong, .frame-layer-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame-layer-copy strong { color: #dbe6f4; font-size: .7rem; }
.frame-layer-copy small { color: #6f849f; font-size: .58rem; }
.frame-layer-actions { display: flex; padding-right: 3px; }
.frame-layer-actions .mud-icon-button { padding: 5px; }
.frame-layer-actions .mud-icon-root { font-size: .9rem; }
.frame-layer-stack > footer { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-top: 1px solid rgba(131,161,200,.09); color: #687d98; font-size: .59rem; }
.frame-layer-stack > footer .mud-icon-root { flex: 0 0 auto; font-size: .9rem; }
.frame-overlay-editor { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 15px; }
.frame-overlay-editor > header { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 3px 2px 1px; }
.frame-overlay-editor > header h4 { margin: 2px 0; color: #edf4fd; font-size: 1rem; }
.frame-overlay-editor > header p { margin: 0; color: #7186a2; font-size: .68rem; }
.frame-overlay-card { min-width: 0; padding: 14px; border: 1px solid rgba(131,161,200,.13); border-radius: 14px; background: rgba(3,8,18,.38); }
.frame-overlay-card-head { display: grid; grid-template-columns: 39px minmax(0,1fr) auto; align-items: center; gap: 9px; margin-bottom: 12px; }
.frame-overlay-card-head > div { min-width: 0; display: grid; gap: 2px; }
.frame-overlay-card-head strong { color: #dae6f5; font-size: .77rem; }
.frame-overlay-card-head small { overflow: hidden; color: #6e829e; font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }
.frame-overlay-symbol { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 10px; }
.frame-overlay-symbol.name { color: #63ddff; background: rgba(52,183,224,.1); }
.frame-overlay-symbol.id { color: #ffc46b; background: rgba(224,145,52,.1); }
.frame-overlay-symbol .mud-icon-root { font-size: 1.15rem; }
.frame-placement-presets { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 11px; }
.frame-placement-presets button { padding: 6px 8px; border: 1px solid rgba(126,157,194,.14); border-radius: 8px; color: #879ab4; background: rgba(255,255,255,.018); font-size: .61rem; cursor: pointer; }
.frame-placement-presets button:hover { color: #dceafa; border-color: rgba(91,206,249,.35); background: rgba(63,178,222,.07); }
.frame-nudge-row { display: grid; grid-template-columns: 1fr repeat(4,auto) auto; align-items: center; gap: 2px; margin-top: 8px; padding: 5px 6px 5px 10px; border: 1px solid rgba(127,157,193,.1); border-radius: 9px; color: #70849f; font-size: .62rem; }
.frame-nudge-row .mud-icon-button { padding: 4px; }
.frame-nudge-row .mud-icon-root { font-size: 1rem; }
.frame-nudge-row b { margin-left: 7px; color: #92dff8; font-size: .62rem; }
.frame-overlay-advanced { margin-top: 10px; overflow: hidden; border: 1px solid rgba(131,160,195,.1); border-radius: 10px; }
.frame-overlay-warning { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; padding: 8px 9px; border: 1px solid rgba(255,187,85,.23); border-radius: 9px; color: #d9ae6d; background: rgba(224,143,35,.06); font-size: .61rem; }
.frame-overlay-warning .mud-icon-root { flex: 0 0 auto; font-size: 1rem; }
.frame-id-mode-picker { display: grid; gap: 7px; margin-bottom: 11px; }
.frame-id-art-selectors { display: grid; grid-template-columns: minmax(0,1fr) minmax(120px,.55fr); gap: 7px; }
.frame-id-mode-facts { display: flex; flex-wrap: wrap; gap: 5px; }
.frame-id-mode-facts span { padding: 5px 7px; border: 1px solid rgba(128,159,195,.11); border-radius: 7px; color: #788da8; background: rgba(255,255,255,.015); font-size: .57rem; }
.frame-id-mode-facts b { margin-right: 3px; color: #bdcde0; }
.frame-id-mode-facts .is-draft { flex: 1 1 100%; border-color: rgba(171,129,255,.2); color: #ad97d7; background: rgba(111,74,190,.06); }

.item-renderer-handoff { min-height: 270px; display: flex; align-items: center; justify-content: center; gap: 25px; text-align: left; }
.item-renderer-handoff > .mud-icon-root { color: #a88cff; font-size: 4rem; filter: drop-shadow(0 0 24px rgba(145,105,255,.4)); }
.item-renderer-handoff > div { max-width: 560px; }
.item-renderer-handoff h3 { margin: 4px 0 8px; color: #edf4ff; }
.item-renderer-handoff p { color: #8699b4; line-height: 1.6; }
.item-renderer-handoff code { color: #86ddff; }
.item-runtime-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; }
.item-runtime-grid span { display: grid; gap: 4px; padding: 12px; border: 1px solid rgba(130,160,195,.11); border-radius: 10px; background: rgba(255,255,255,.018); }
.item-runtime-grid small { color: #6e839e; font-size: .61rem; text-transform: uppercase; letter-spacing: .08em; }
.item-runtime-grid strong { color: #dce7f5; font-size: .76rem; }
.item-props-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.item-props-list label { width: 100%; color: #7388a4; font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; }
.item-props-list > span { color: #6f829d; font-size: .72rem; }
.item-props-list code { padding: 6px 8px; border: 1px solid rgba(88,195,238,.17); border-radius: 7px; color: #82dfff; background: rgba(54,168,216,.06); font-size: .63rem; }
.item-compatibility-panel { margin-top: 17px; overflow: hidden; border: 1px solid rgba(129,159,195,.12); border-radius: 12px; }
.item-studio-welcome { min-height: 570px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 45px; border: 1px solid var(--item-border) !important; border-radius: 22px !important; text-align: center; background: radial-gradient(circle at 50% 35%, rgba(70,151,224,.12), transparent 35%), rgba(8,15,29,.8) !important; }
.item-welcome-mark { width: 90px; height: 90px; display: grid; place-items: center; margin-bottom: 21px; border: 1px solid rgba(103,205,255,.31); border-radius: 27px; color: #75d9ff; background: rgba(55,162,215,.09); transform: rotate(7deg); }
.item-welcome-mark .mud-icon-root { font-size: 2.8rem; transform: rotate(-7deg); }
.item-studio-welcome h2 { margin: 8px 0; color: #ecf4ff; }
.item-studio-welcome p { max-width: 570px; color: #8497b2; line-height: 1.6; }
.item-studio-welcome > div:last-child { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.item-studio-welcome > div:last-child span { padding: 7px 10px; border: 1px solid rgba(129,159,195,.14); border-radius: 8px; color: #8397b1; font-size: .67rem; }

@media (max-width: 1280px) {
    .item-studio-layout { grid-template-columns: 285px minmax(0,1fr); }
    .frame-composer-grid { grid-template-columns: 1fr; }
    .frame-inspector { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 18px; }
    .frame-inspector-head, .frame-crop-panel, .frame-prop-readout { grid-column: 1 / -1; }
    .item-asset-workspace { grid-template-columns: 1fr; }
    .item-upload-panel { border-top: 1px solid rgba(133,160,194,.12); border-left: 0; }
}

@media (max-width: 980px) {
    .item-studio-hero { padding: 29px; }
    .item-studio-hero-art { opacity: .38; right: 2%; }
    .item-studio-toolbar { position: static; align-items: flex-start; flex-direction: column; }
    .item-toolbar-actions { width: 100%; flex-wrap: wrap; }
    .item-studio-layout { grid-template-columns: 1fr; }
    .item-catalog { position: static; height: auto; max-height: 520px; }
    .item-profile-banner { grid-template-columns: 55px minmax(0,1fr); }
    .item-profile-badges { grid-column: 1 / -1; }
    .item-identity-grid { grid-template-columns: 1fr; }
    .item-icon-preview { min-height: 125px; }
    .item-icon-preview span { margin-top: 58px; }
    .item-icon-preview img + .mud-icon-root + span { margin-top: 0; }
}

@media (max-width: 680px) {
    .item-studio-hero { min-height: 240px; padding: 24px 20px; }
    .item-studio-hero-art { display: none; }
    .item-studio-toolbar, .item-editor-section { padding: 15px; }
    .item-toolbar-actions > * { flex: 1 1 auto; }
    .item-section-head { grid-template-columns: 40px minmax(0,1fr); }
    .item-section-head > :last-child:not(div) { grid-column: 1 / -1; justify-self: start; }
    .item-form-grid, .item-form-grid-three, .item-gate-grid, .item-toggle-grid, .item-asset-family-tabs, .frame-stage-toolbar, .item-runtime-grid { grid-template-columns: 1fr; }
    .frame-composer-grid { display: block; }
    .frame-inspector { display: block; margin-top: 12px; }
    .frame-stage-column { padding: 8px; }
    .frame-timeline { grid-template-columns: auto auto minmax(70px,1fr) auto; }
    .frame-timeline > :last-child { grid-column: 1 / -1; }
    .frame-control-pair { grid-template-columns: 1fr; }
    .frame-overlay-editor { grid-template-columns: 1fr; }
    .frame-id-art-selectors { grid-template-columns: 1fr; }
    .frame-nudge-row { grid-template-columns: 1fr repeat(4,auto); }
    .frame-nudge-row b { grid-column: 1 / -1; margin: 2px 0 0; }
    .item-designer-tab-panel { padding: 8px !important; }
    .item-profile-banner { padding: 15px; }
}