body.app-dev-tools-route :where(.app-breadcrumb,.app-page-header,.app-workspace){width:100%;max-width:none}
body.app-dev-tools-route .app-workspace{padding-right:18px;padding-left:18px}
.dev-page{--dev-bg:#080d14;--dev-panel:#0d151f;--dev-panel-2:#111b27;--dev-line:#2a3948;--dev-muted:#8494a5;--dev-text:#e7edf4;--dev-cyan:#58e1e8;--dev-pink:#ed68c5;--dev-yellow:#f1d16f;--dev-green:#69dfa8;display:grid;gap:12px;min-width:0;color:var(--dev-text)}
.dev-page *{box-sizing:border-box}.dev-page :where(button,input,select,textarea){font:inherit}.dev-page button,.dev-file-button,.dev-context__actions label{cursor:pointer}
.dev-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:152px;padding:25px;overflow:hidden;border:1px solid var(--dev-line);border-radius:8px;background:radial-gradient(circle at 82% 15%,#58e1e81b,transparent 28%),radial-gradient(circle at 20% 0%,#ed68c519,transparent 32%),linear-gradient(125deg,#101a25,#0c121b 52%,#17101d);box-shadow:0 20px 52px #02050a4d}
.dev-hero:before{position:absolute;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(90deg,#000,transparent 75%);content:"";pointer-events:none}
.dev-hero>div,.dev-hero__status{position:relative;z-index:1}.dev-hero>div:first-child{display:grid;gap:7px}.dev-eyebrow{display:flex;align-items:center;gap:8px;color:#68e4e9;font-size:9px;font-weight:900}.dev-eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--dev-green);box-shadow:0 0 14px var(--dev-green)}
.dev-hero h2{max-width:790px;margin:0;color:#f5f8fb;font-size:28px;line-height:1.2}.dev-hero p{max-width:760px;margin:0;color:#9aa9b8;font-size:11px;line-height:1.65}
.dev-hero__status{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:3px 9px;min-width:190px;padding-left:22px;border-left:1px solid #354554}.dev-hero__status strong{color:var(--dev-yellow);font-size:38px;line-height:1}.dev-hero__status>span{padding-bottom:4px;color:#dce5ec;font-size:10px;font-weight:750;text-transform:uppercase}.dev-hero__status small{grid-column:1/-1;display:flex;align-items:center;gap:6px;color:#8899aa;font-size:8px}.dev-hero__status small i{width:6px;height:6px;border-radius:50%;background:var(--dev-green);box-shadow:0 0 9px var(--dev-green)}
.dev-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;overflow:hidden;border:1px solid #263541;border-radius:8px;background:#263541}.dev-metrics>div{display:grid;gap:4px;padding:11px 14px;background:#0e161f}.dev-metrics span{color:#718496;font-size:7px;font-weight:850;text-transform:uppercase}.dev-metrics strong{overflow:hidden;color:#dfe7ee;font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.dev-quick{display:flex;align-items:center;gap:6px;min-height:40px;padding:5px 8px;overflow-x:auto;border:1px solid #263541;border-radius:7px;background:#0b121a;scrollbar-width:thin}.dev-quick>span{padding:0 7px;color:#708294;font-size:7px;font-weight:900;text-transform:uppercase;white-space:nowrap}.dev-quick button{display:flex;align-items:center;gap:6px;min-height:28px;padding:0 9px;border:1px solid #2d3d4b;border-radius:4px;background:#101923;color:#93a3b2;font-size:8px;white-space:nowrap}.dev-quick button:hover{border-color:#59dfe866;color:#dce7ed}.dev-quick button i{color:#64e1e6;font-size:10px;font-style:normal}.dev-quick small{color:#6f8193;font-size:8px}
.dev-workbench{min-width:0;overflow:hidden;border:1px solid var(--dev-line);border-radius:8px;background:var(--dev-bg);box-shadow:0 26px 70px #02050a52}.dev-workbench:fullscreen{padding:12px;overflow:auto;background:#060b11}.dev-workbench:fullscreen .dev-context{top:0}
.dev-context{position:relative;z-index:3;display:grid;grid-template-columns:minmax(260px,1fr) minmax(220px,auto) auto;align-items:center;gap:18px;min-height:82px;padding:14px 16px;border-bottom:1px solid var(--dev-line);background:linear-gradient(90deg,#111b27,#0d151e 62%,#17111c)}
.dev-context__identity{display:flex;align-items:center;gap:11px;min-width:0}.dev-context__identity>span{display:grid;flex:0 0 44px;place-items:center;width:44px;height:44px;border:1px solid #56dce573;border-radius:7px;background:linear-gradient(145deg,#56dce518,#ed68c50c);color:#65e3e8;font-size:14px;font-weight:850}.dev-context__identity>div{display:grid;gap:2px;min-width:0}.dev-context__identity small{color:#61dbe1;font-size:7px;font-weight:900}.dev-context__identity h3{margin:0;color:#f0f5f8;font-size:17px}.dev-context__identity p{overflow:hidden;margin:0;color:#8494a4;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.dev-context__caps{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}.dev-context__caps span{padding:5px 7px;border:1px solid #344553;border-radius:4px;background:#091018;color:#91a1b1;font-size:7px;font-weight:750}
.dev-context__actions{display:flex;gap:5px}.dev-context__actions button,.dev-context__actions label{display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid #344553;border-radius:5px;background:#111b25;color:#8091a2;font-size:14px}.dev-context__actions button:hover,.dev-context__actions label:hover,.dev-context__actions button.is-active{border-color:#59dfe866;color:#65e4e8}.dev-context__actions button.is-active{color:var(--dev-yellow)}.dev-context__actions input,.dev-file-button input{position:absolute;width:1px;height:1px;opacity:0}
.dev-runtime{display:flex;align-items:center;gap:18px;min-height:34px;padding:0 16px;border-bottom:1px solid #222f3b;background:#0a1118;color:#748698;font-size:7px}.dev-runtime>span{display:flex;align-items:center;gap:5px;white-space:nowrap}.dev-runtime>span:first-child{color:var(--dev-green)}.dev-runtime i{width:6px;height:6px;border-radius:50%;background:var(--dev-green);box-shadow:0 0 9px var(--dev-green)}.dev-runtime b{color:#aab8c4}.dev-runtime [data-dev-status]{margin-left:auto}.dev-runtime [data-dev-status][data-state=error]{color:#ff8da1}.dev-runtime [data-dev-status][data-state=success]{color:#7ee7b1}.dev-runtime [data-dev-status][data-state=loading]{color:#f2d575}
.dev-work{display:grid;gap:0;min-width:0;min-height:600px;background:#080e15}.dev-controls{display:flex;align-items:end;flex-wrap:wrap;gap:7px;min-height:62px;padding:10px 13px;border-bottom:1px solid var(--dev-line);background:#101923}
.dev-field{display:grid;gap:4px;min-width:118px;color:#798b9d;font-size:7px}.dev-field>span{font-weight:750}.dev-field :where(input,select),.dev-pane>input,.dev-notes-layout input{width:100%;min-height:31px;padding:5px 8px;border:1px solid #334452;border-radius:5px;outline:0;background:#091018;color:#dce6ed;font-size:9px}.dev-field input[type=color]{width:45px;padding:2px}.dev-field input[type=range]{min-width:120px;padding:0;accent-color:var(--dev-cyan)}.dev-field :where(input,select):focus,.dev-pane textarea:focus,.dev-pane>input:focus{border-color:#59dfe86b;box-shadow:0 0 0 3px #59dfe80b}
.dev-check{display:flex;align-items:center;gap:6px;min-height:31px;padding:0 8px;border:1px solid #2f404e;border-radius:5px;background:#0c141c;color:#8c9dad;font-size:8px;white-space:nowrap}.dev-check input{accent-color:var(--dev-cyan)}
.dev-controls>button,.dev-actions button,.dev-file-button{display:grid;place-items:center;min-height:31px;padding:0 10px;border:1px solid #354654;border-radius:5px;background:#121d27;color:#a9b7c3;font-size:8px;font-weight:750;white-space:nowrap}.dev-controls>button:hover,.dev-actions button:hover,.dev-file-button:hover{border-color:#5ae1e86b;color:#67e5ea}.dev-controls button.is-primary,.dev-actions button.is-primary{border-color:#58dfe7;background:#58dfe7;color:#061115}.dev-actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.dev-editor-grid{display:grid;grid-template-columns:1fr 1fr;min-height:538px}.dev-editor-grid--three{grid-template-columns:1fr 1fr 1.15fr}.dev-pane{display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;border-right:1px solid var(--dev-line);background:#0a1118}.dev-pane:last-child{border-right:0}.dev-pane>header,.dev-chart-card>header{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:39px;padding:0 12px;border-bottom:1px solid #263541;background:#0e171f}.dev-pane header strong,.dev-chart-card header strong{font-size:9px}.dev-pane header small,.dev-chart-card header small{color:#708294;font-size:7px}.dev-pane textarea{width:100%;min-height:230px;padding:14px;border:0;outline:0;resize:none;background:#080e15;color:#dce6ee;font:11px/1.65 "Cascadia Code","SFMono-Regular",Consolas,monospace;tab-size:2}.dev-pane textarea+textarea{border-top:1px solid #263541}.dev-pane>input{margin:9px;width:calc(100% - 18px)}
.dev-pane pre{min-height:100%;margin:0;padding:14px;overflow:auto;background:#070c12;color:#82e8ed;font:10px/1.7 "Cascadia Code","SFMono-Regular",Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.dev-pane pre[data-empty=true]{color:#6f8192}.dev-pane--output [data-dev-preview]:empty{display:none}
.dev-json-tree{min-height:100%;padding:12px;overflow:auto;background:#070c12;color:#b7c4d0;font:9px/1.6 "Cascadia Code",Consolas,monospace}.dev-json-tree details{margin-left:12px}.dev-json-tree summary{color:#69e2e7;cursor:pointer}.dev-json-tree summary small{color:#728496}.dev-json-tree p{margin:2px 0 2px 20px}.dev-json-tree p b{color:#ed80cb}.dev-json-tree p span{color:#e6d77a}
.dev-color-preview{display:grid;align-content:center;gap:7px;min-height:230px;padding:28px}.dev-color-preview strong{font-size:20px}.dev-color-preview span{font-size:10px}.dev-palette{display:grid;grid-template-columns:repeat(5,1fr);min-height:160px}.dev-palette button{display:flex;align-items:flex-end;justify-content:center;padding:10px 3px;border:0;background:var(--color);color:#fff;text-shadow:0 1px 3px #000;cursor:pointer}.dev-palette span{font-size:7px;font-weight:800}
.dev-canvas-pane{place-items:stretch}.dev-canvas-pane canvas{align-self:center;justify-self:center;display:block;max-width:calc(100% - 28px);max-height:500px;margin:14px;border:1px solid #344553;background-color:#fff;background-image:linear-gradient(45deg,#e7ebef 25%,transparent 25%),linear-gradient(-45deg,#e7ebef 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e7ebef 75%),linear-gradient(-45deg,transparent 75%,#e7ebef 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;box-shadow:0 16px 45px #0008}.dev-image-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);min-height:560px}
.dev-notes-layout{display:grid;grid-template-columns:minmax(300px,.7fr) minmax(0,1.3fr);min-height:560px}.dev-note-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:8px;padding:12px;overflow:auto;background:#080e15}.dev-note{display:grid;align-content:start;gap:8px;min-height:150px;padding:11px;border:1px solid #2d3d4b;border-top:3px solid #5adfe6;border-radius:6px;background:#101923}.dev-note[data-priority=high]{border-top-color:var(--dev-yellow)}.dev-note[data-priority=urgent]{border-top-color:#f17087}.dev-note.is-done{opacity:.62}.dev-note.is-done p{text-decoration:line-through}.dev-note header{display:grid;grid-template-columns:1fr auto 25px 25px;align-items:center;gap:4px}.dev-note header span{color:#64e0e6;font-size:7px;font-weight:900}.dev-note time{color:#6d7f91;font-size:7px}.dev-note button{min-height:25px;padding:0 7px;border:1px solid #344554;border-radius:4px;background:#111b25;color:#8b9cac;font-size:8px}.dev-note p{margin:0;color:#dce5ec;font-size:10px;line-height:1.55;white-space:pre-wrap}.dev-note footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}.dev-note footer small{color:#718395;font-size:7px}.dev-empty{grid-column:1/-1;display:grid;place-items:center;align-content:center;min-height:360px;color:#76889a;text-align:center}.dev-empty strong{color:#d9e2e9;font-size:12px}.dev-empty p{margin:5px 0;font-size:9px}
.dev-system-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:#263541}.dev-system-grid article{display:grid;align-content:start;gap:5px;min-height:105px;padding:13px;background:#0d151e}.dev-system-grid span{color:#6ddfe4;font-size:7px;font-weight:850;text-transform:uppercase}.dev-system-grid strong{overflow-wrap:anywhere;color:#e0e7ed;font-size:11px}.dev-system-grid small{color:#718395;font-size:8px}.dev-chart-card{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:250px;border-top:1px solid var(--dev-line);background:#0a1118}.dev-chart-card canvas{width:100%;height:210px}
.dev-markdown-preview{min-height:100%;padding:18px;overflow:auto;background:#f7fafc;color:#182230;font:13px/1.7 "Be Vietnam Pro",sans-serif}.dev-markdown-preview :where(h1,h2,h3){margin:1em 0 .4em}.dev-markdown-preview h1{font-size:25px}.dev-markdown-preview h2{font-size:20px}.dev-markdown-preview h3{font-size:16px}.dev-markdown-preview pre{min-height:0;padding:12px;border-radius:5px;background:#111827;color:#d8e4ef}.dev-markdown-preview code{padding:2px 4px;border-radius:3px;background:#e8edf2}.dev-markdown-preview pre code{padding:0;background:transparent}.dev-markdown-preview blockquote{margin-left:0;padding-left:13px;border-left:3px solid #19a6b2;color:#5e6d7c}.dev-markdown-preview a{color:#087e9a}
.dev-toast{position:fixed;right:22px;bottom:22px;z-index:9500;max-width:min(370px,calc(100vw - 28px));padding:11px 14px;border:1px solid #58dfe766;border-radius:6px;background:#101b25ed;color:#9beff2;font-size:9px;font-weight:750;box-shadow:0 18px 48px #0009;backdrop-filter:blur(14px)}.dev-toast[data-state=error]{border-color:#ee708466;background:#241218ed;color:#ff9eae}.dev-toast[data-state=success]{border-color:#69dfa866;color:#92efbd}.dev-toast[hidden]{display:none}
@media(max-width:1220px){.dev-context{grid-template-columns:1fr auto}.dev-context__caps{grid-column:1/-1;grid-row:2;justify-content:flex-start}.dev-context__actions{grid-column:2;grid-row:1}.dev-system-grid{grid-template-columns:repeat(3,1fr)}.dev-editor-grid--three{grid-template-columns:1fr 1fr}.dev-editor-grid--three .dev-pane--output{grid-column:1/-1;min-height:320px;border-top:1px solid var(--dev-line)}}
@media(max-width:900px){.dev-hero{align-items:flex-start}.dev-hero__status{min-width:160px}.dev-metrics{grid-template-columns:repeat(2,1fr)}.dev-controls{align-items:stretch}.dev-field{flex:1 1 150px}.dev-editor-grid,.dev-image-layout,.dev-notes-layout{grid-template-columns:1fr}.dev-pane{min-height:360px;border-right:0;border-bottom:1px solid var(--dev-line)}.dev-note-list{min-height:420px}.dev-system-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){body.app-dev-tools-route .app-workspace{padding-right:12px;padding-left:12px}.dev-hero{display:grid;min-height:0;padding:18px}.dev-hero h2{font-size:22px}.dev-hero__status{grid-template-columns:auto 1fr;min-width:0;padding:12px 0 0;border-top:1px solid #354554;border-left:0}.dev-hero__status strong{font-size:29px}.dev-context{grid-template-columns:1fr auto;padding:12px}.dev-context__identity>span{flex-basis:38px;width:38px;height:38px}.dev-context__identity h3{font-size:15px}.dev-context__identity p{white-space:normal}.dev-context__caps span:nth-child(n+3){display:none}.dev-runtime{gap:9px;overflow-x:auto}.dev-runtime>span:nth-child(2),.dev-runtime>span:nth-child(3){display:none}.dev-controls{display:grid;grid-template-columns:1fr 1fr}.dev-field{min-width:0}.dev-actions{grid-column:1/-1}.dev-actions button{flex:1}.dev-check{white-space:normal}.dev-editor-grid--three{grid-template-columns:1fr}.dev-editor-grid--three .dev-pane--output{grid-column:auto}.dev-note-list{grid-template-columns:1fr}.dev-system-grid{grid-template-columns:1fr}.dev-palette{grid-template-columns:repeat(5,minmax(56px,1fr));overflow-x:auto}.dev-toast{right:14px;bottom:14px}}
@media(max-width:420px){.dev-metrics{grid-template-columns:1fr}.dev-controls{grid-template-columns:1fr}.dev-actions{grid-column:auto}.dev-context__caps{display:none}.dev-context{min-height:68px}.dev-context__actions button,.dev-context__actions label{width:29px;height:29px}.dev-pane textarea{font-size:10px}}
@media(prefers-reduced-motion:reduce){.dev-page *{scroll-behavior:auto!important;transition:none!important}}

/* DEV Toolbox v3: colorful local-first command workspace */
.dev-page{--dev-surface:#09111b;--dev-surface-2:#0c1723;--dev-grid:#ffffff08;--dev-glow:color-mix(in srgb,var(--dev-accent) 35%,transparent);position:relative;isolation:isolate;padding-bottom:22px}
.dev-page[data-dev-theme="cyber"]{--dev-bg:#080713;--dev-panel:#111020;--dev-panel-2:#17132a;--dev-line:#40335e;--dev-text:#f4eeff;--dev-muted:#a195b7}.dev-page[data-dev-theme="sunset"]{--dev-bg:#120a12;--dev-panel:#1b1018;--dev-panel-2:#23151c;--dev-line:#5a3544;--dev-text:#fff3ee;--dev-muted:#c7a2a2}.dev-page[data-dev-theme="terminal"]{--dev-bg:#06100d;--dev-panel:#091713;--dev-panel-2:#0d201a;--dev-line:#285342;--dev-text:#e7fff4;--dev-muted:#83aa9c;--dev-accent:#56e5a5!important}.dev-page .lucide{width:16px;height:16px;stroke-width:1.8}
.dev-hero{min-height:210px;padding:28px 30px;background:linear-gradient(118deg,#0b1722 0%,#151027 42%,#18101a 72%,#08232a 100%);border-color:color-mix(in srgb,var(--dev-accent) 40%,#263541);box-shadow:0 24px 70px #02050a8a,inset 0 1px #ffffff0f}.dev-page[data-dev-theme="cyber"] .dev-hero{background:linear-gradient(118deg,#10152c,#261335 48%,#0b2830)}.dev-page[data-dev-theme="sunset"] .dev-hero{background:linear-gradient(118deg,#261021,#3a171e 48%,#1f223b)}.dev-page[data-dev-theme="terminal"] .dev-hero{background:linear-gradient(118deg,#071a15,#0c251c 48%,#08231f)}
.dev-hero:before{background-image:linear-gradient(var(--dev-grid) 1px,transparent 1px),linear-gradient(90deg,var(--dev-grid) 1px,transparent 1px),linear-gradient(115deg,transparent 28%,color-mix(in srgb,var(--dev-accent) 10%,transparent) 28% 29%,transparent 29% 56%,#ed68c50d 56% 57%,transparent 57%);background-size:32px 32px,32px 32px,100% 100%;mask-image:none}.dev-hero:after{position:absolute;inset:auto -8% -55% 31%;height:72%;border-top:1px solid color-mix(in srgb,var(--dev-accent) 55%,transparent);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--dev-accent) 12%,transparent),#ed68c512,transparent);transform:skewY(-7deg);content:"";pointer-events:none}
.dev-hero__copy{position:relative;z-index:2;display:grid;gap:9px;max-width:780px}.dev-eyebrow{letter-spacing:0;color:var(--dev-accent);font-size:10px}.dev-hero h2{font-size:clamp(27px,3vw,42px);line-height:1.08;letter-spacing:0}.dev-hero p{font-size:12px;line-height:1.65}.dev-hero__commands{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}.dev-hero__commands button{display:flex;align-items:center;gap:7px;min-height:34px;padding:0 12px;border:1px solid #ffffff21;border-radius:6px;background:#050a10a6;color:#c8d3de;font-size:10px;font-weight:800}.dev-hero__commands button:hover{border-color:var(--dev-accent);background:color-mix(in srgb,var(--dev-accent) 13%,#071019);color:#fff;transform:translateY(-2px)}
.dev-hero__visual{position:relative;z-index:2;display:grid;grid-template-columns:58px auto;grid-template-rows:auto auto auto;align-items:center;gap:0 12px;min-width:230px;padding:18px;border:1px solid #ffffff20;border-radius:8px;background:#060b12b8;box-shadow:16px 18px 0 #05070c4d,0 0 38px var(--dev-glow)}.dev-hero__visual>span{display:grid;grid-row:1/3;place-items:center;width:58px;height:58px;border:1px solid var(--dev-accent);border-radius:8px;background:color-mix(in srgb,var(--dev-accent) 16%,#08111b);color:var(--dev-accent)}.dev-hero__visual>span .lucide{width:27px;height:27px}.dev-hero__visual strong{font-size:35px;line-height:1;color:#fff}.dev-hero__visual>b{color:var(--dev-accent);font-size:10px;text-transform:uppercase}.dev-hero__visual small{grid-column:1/-1;display:flex;align-items:center;gap:7px;margin-top:13px;padding-top:10px;border-top:1px solid #ffffff14;color:#94a3b3;font-size:9px}.dev-hero__visual small i{width:7px;height:7px;border-radius:50%;background:#65e2a2;box-shadow:0 0 11px #65e2a2}
.dev-categories{display:grid;grid-template-columns:repeat(8,minmax(100px,1fr));gap:6px}.dev-categories button{display:flex;align-items:center;gap:7px;min-width:0;min-height:42px;padding:0 10px;border:1px solid #253544;border-radius:6px;background:#0b131c;color:#8293a4;font-size:9px;font-weight:800}.dev-categories button .lucide{flex:0 0 auto;color:var(--category)}.dev-categories button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dev-categories button b{display:grid;flex:0 0 20px;place-items:center;width:20px;height:20px;margin-left:auto;border-radius:5px;background:#ffffff0b;color:#738699;font-size:8px}.dev-categories button:hover,.dev-categories button.is-active{border-color:color-mix(in srgb,var(--category) 70%,#263541);background:linear-gradient(110deg,color-mix(in srgb,var(--category) 15%,#0b131c),#0b131c 72%);color:#eef6fb;box-shadow:inset 3px 0 var(--category),0 8px 24px color-mix(in srgb,var(--category) 10%,transparent)}
.dev-metrics{grid-template-columns:repeat(6,minmax(0,1fr));border-color:#263848;background:#263848}.dev-metrics>div{position:relative;min-height:60px;padding:12px 14px;background:linear-gradient(150deg,#0e1822,#0a1119)}.dev-metrics>div:after{position:absolute;inset:auto 14px 0;height:2px;background:linear-gradient(90deg,var(--dev-accent),transparent);content:"";opacity:.45}.dev-metrics span{font-size:8px}.dev-metrics strong{font-size:11px}.dev-quick{min-height:46px;padding:6px 9px;background:linear-gradient(90deg,#09131c,#0d111b)}.dev-quick button{min-height:32px;padding:0 10px}.dev-quick button span{display:grid;place-items:center;color:var(--dev-accent)}
.dev-context{grid-template-columns:minmax(260px,1fr) auto auto;background:linear-gradient(100deg,#0f1a25,#0c141d 56%,color-mix(in srgb,var(--dev-accent) 8%,#15101a))}.dev-context__identity>span{border-color:color-mix(in srgb,var(--dev-accent) 60%,#30404d);background:color-mix(in srgb,var(--dev-accent) 13%,#0b131d);color:var(--dev-accent)}.dev-context__identity small{color:var(--dev-accent)}.dev-context__actions button,.dev-context__actions label{transition:border-color .18s,background .18s,color .18s,transform .18s}.dev-context__actions button:hover,.dev-context__actions label:hover{border-color:var(--dev-accent);background:color-mix(in srgb,var(--dev-accent) 15%,#101923);color:#fff;transform:translateY(-2px)}
.dev-runtime{background:linear-gradient(90deg,#071018,#0a131b)}.dev-runtime>span:first-child{color:#6be4aa}.dev-work{background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);background-size:24px 24px;background-position:-1px -1px}.dev-controls{position:relative;background:linear-gradient(100deg,#0d1721,#10131d);box-shadow:inset 3px 0 var(--dev-accent)}.dev-controls .is-primary{border-color:var(--dev-accent);background:linear-gradient(100deg,color-mix(in srgb,var(--dev-accent) 88%,white),color-mix(in srgb,var(--dev-accent) 55%,#a95de8));color:#061016}.dev-controls button,.dev-file-button{min-height:34px}.dev-actions button{display:flex;align-items:center;gap:6px}.dev-actions kbd{margin-left:4px;padding:2px 4px;border:1px solid #0002;border-radius:3px;background:#0002;font-size:7px}
.dev-pane{border-color:#2a3b49;background:linear-gradient(145deg,#0c151f,#09111a);box-shadow:inset 0 1px #ffffff08}.dev-pane:focus-within{border-color:color-mix(in srgb,var(--dev-accent) 65%,#30404d);box-shadow:0 0 0 1px color-mix(in srgb,var(--dev-accent) 25%,transparent),0 14px 36px #02050a42}.dev-pane header{background:linear-gradient(90deg,#101d28,#0c151e)}.dev-pane header strong{font-size:10px}.dev-pane header small{font-size:8px}.dev-pane textarea,.dev-pane pre{font-size:11px;line-height:1.65;tab-size:2}.dev-pane textarea{background-image:linear-gradient(transparent 27px,#ffffff06 28px);background-size:100% 28px}
.dev-statusbar{display:flex;align-items:center;gap:18px;min-height:34px;padding:0 13px;border-top:1px solid var(--dev-line);background:#080f17;color:#738598;font-size:8px}.dev-statusbar span{display:flex;align-items:center;gap:5px}.dev-statusbar span:first-child{color:#67daa3}.dev-statusbar b{margin-left:auto;color:var(--dev-accent);font-size:8px}.dev-regex-preview{display:grid;gap:12px;white-space:pre-wrap}.dev-regex-preview header{color:var(--dev-accent);font-weight:900}.dev-regex-preview p{margin:0;line-height:1.9}.dev-regex-preview mark{padding:2px 3px;border:1px solid #f2d96e66;border-radius:3px;background:#f2d96e24;color:#fff0a8;box-shadow:0 0 12px #f2d96e20}
.dev-drawer[hidden],.dev-drawer-backdrop[hidden]{display:none}.dev-drawer{position:fixed;z-index:1002;top:0;right:0;width:min(430px,94vw);height:100dvh;padding:0;border-left:1px solid color-mix(in srgb,var(--dev-accent) 55%,#344553);background:#081019f2;box-shadow:-28px 0 70px #000a;backdrop-filter:blur(22px);transform:translateX(102%);transition:transform .2s ease}.dev-page.is-drawer-open .dev-drawer{transform:translateX(0)}.dev-drawer>header{display:flex;align-items:center;justify-content:space-between;min-height:82px;padding:17px 20px;border-bottom:1px solid #263744;background:linear-gradient(110deg,color-mix(in srgb,var(--dev-accent) 14%,#0b141d),#0b1119)}.dev-drawer>header small{color:var(--dev-accent);font-size:8px;font-weight:900}.dev-drawer>header h3{margin:4px 0 0;font-size:19px}.dev-drawer>header button{display:grid;place-items:center;width:34px;height:34px;border:1px solid #354656;border-radius:6px;background:#101a24;color:#9aabba}.dev-drawer>[data-dev-drawer-body]{height:calc(100dvh - 82px);padding:14px;overflow:auto}.dev-drawer-backdrop{position:fixed;z-index:1001;inset:0;border:0;background:#010407a8;backdrop-filter:blur(3px)}
.dev-sample-list,.dev-drawer [data-dev-drawer-body]{display:grid;align-content:start;gap:8px}.dev-sample-list button,.dev-drawer [data-dev-drawer-body]>button{display:grid;grid-template-columns:38px minmax(0,1fr) 18px;align-items:center;gap:10px;width:100%;min-height:62px;padding:10px;border:1px solid #293a49;border-radius:7px;background:#0c151f;color:#d8e2eb;text-align:left}.dev-sample-list button:hover,.dev-drawer [data-dev-drawer-body]>button:hover{border-color:var(--dev-accent);background:color-mix(in srgb,var(--dev-accent) 10%,#0c151f);transform:translateX(-3px)}.dev-sample-list button>span,.dev-drawer [data-dev-drawer-body]>button>span{display:grid;place-items:center;width:36px;height:36px;border-radius:6px;background:color-mix(in srgb,var(--dev-accent) 13%,#121b25);color:var(--dev-accent)}.dev-sample-list button div,.dev-drawer [data-dev-drawer-body]>button div{display:grid;gap:3px;min-width:0}.dev-sample-list b,.dev-drawer [data-dev-drawer-body]>button b{overflow:hidden;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.dev-sample-list small,.dev-drawer [data-dev-drawer-body]>button small{color:#7f91a2;font-size:8px}.dev-help{display:grid;gap:12px;padding:6px}.dev-help>span{display:grid;place-items:center;width:56px;height:56px;border:1px solid var(--dev-accent);border-radius:8px;background:color-mix(in srgb,var(--dev-accent) 13%,#0b131d);color:var(--dev-accent)}.dev-help>span .lucide{width:26px;height:26px}.dev-help h4{margin:0;font-size:22px}.dev-help p,.dev-help li,.dev-help>small{color:#93a4b4;font-size:10px;line-height:1.65}.dev-help>div{display:flex;flex-wrap:wrap;gap:5px}.dev-help>div b{padding:5px 7px;border:1px solid #344554;border-radius:4px;color:#b9c7d2;font-size:8px}.dev-help ol{display:grid;gap:8px;margin:5px 0;padding-left:22px}.dev-help kbd{padding:2px 4px;border:1px solid #415363;border-radius:3px;background:#111c26}.dev-drawer-empty{padding:30px 12px;color:#8395a6;text-align:center}
.dev-theme-switch{position:fixed;z-index:990;right:18px;bottom:82px;display:flex;gap:5px;padding:6px;border:1px solid #334454;border-radius:8px;background:#071019e8;box-shadow:0 16px 40px #0008;backdrop-filter:blur(16px)}.dev-theme-switch button{display:grid;place-items:center;width:26px;height:26px;padding:0;border:1px solid transparent;border-radius:5px;background:transparent}.dev-theme-switch button i{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,#5fe3e8,#ec67c6)}.dev-theme-switch button:nth-child(2) i{background:linear-gradient(135deg,#8a7dff,#50e5f0)}.dev-theme-switch button:nth-child(3) i{background:linear-gradient(135deg,#ffce67,#ef668d)}.dev-theme-switch button:nth-child(4) i{background:linear-gradient(135deg,#66e5a4,#0c3328)}.dev-theme-switch button:hover,.dev-theme-switch button.is-active{border-color:var(--dev-accent);background:#ffffff0c;transform:translateY(-2px)}
.app-sidebar__studio[data-studio-kind="dev"]{position:relative;padding-bottom:9px}.app-sidebar__studio[data-studio-kind="dev"] section{--side-accent:#55e6f0;margin:5px 0 9px;padding-top:2px}.app-sidebar__studio[data-studio-kind="dev"] section[data-studio-category="1"]{--side-accent:#ff6ebf}.app-sidebar__studio[data-studio-kind="dev"] section[data-studio-category="2"]{--side-accent:#aa87ff}.app-sidebar__studio[data-studio-kind="dev"] section[data-studio-category="3"]{--side-accent:#ffd66b}.app-sidebar__studio[data-studio-kind="dev"] section[data-studio-category="4"]{--side-accent:#6be3a5}.app-sidebar__studio[data-studio-kind="dev"] section[data-studio-category="5"]{--side-accent:#64a6ff}.app-sidebar__studio[data-studio-kind="dev"] section[data-studio-category="6"]{--side-accent:#ff9867}.app-sidebar__studio[data-studio-kind="dev"] section[data-studio-category="7"]{--side-accent:#a5e7ff}.app-sidebar__studio[data-studio-kind="dev"] section>small{display:flex;align-items:center;justify-content:space-between;padding:0 7px;color:var(--side-accent);font-size:7px;font-weight:900}.app-sidebar__studio[data-studio-kind="dev"] section>small b{display:grid;place-items:center;min-width:18px;height:17px;padding:0 4px;border:1px solid color-mix(in srgb,var(--side-accent) 35%,transparent);border-radius:4px;background:color-mix(in srgb,var(--side-accent) 9%,transparent);font-size:7px}.app-sidebar__studio[data-studio-kind="dev"] .app-sidebar__studio-item{min-height:34px;border:1px solid transparent;border-radius:5px}.app-sidebar__studio[data-studio-kind="dev"] .app-sidebar__studio-item>span{display:grid;place-items:center;min-width:25px;height:24px;border:1px solid color-mix(in srgb,var(--side-accent) 38%,transparent);border-radius:5px;background:color-mix(in srgb,var(--side-accent) 7%,transparent);color:var(--side-accent);font-size:9px}.app-sidebar__studio[data-studio-kind="dev"] .app-sidebar__studio-item:hover,.app-sidebar__studio[data-studio-kind="dev"] .app-sidebar__studio-item.is-active{border-color:color-mix(in srgb,var(--side-accent) 42%,transparent);background:linear-gradient(90deg,color-mix(in srgb,var(--side-accent) 15%,transparent),transparent);color:#eaf5fb;box-shadow:inset 3px 0 var(--side-accent)}
@media(max-width:1180px){.dev-categories{grid-template-columns:repeat(4,1fr)}.dev-metrics{grid-template-columns:repeat(3,1fr)}.dev-hero__visual{min-width:190px}.dev-context{grid-template-columns:1fr auto}.dev-context__caps{display:none}}
@media(max-width:760px){.dev-page{gap:8px}.dev-hero{min-height:auto;padding:20px}.dev-hero__visual{display:none}.dev-hero h2{font-size:27px}.dev-categories{display:flex;padding-bottom:3px;overflow-x:auto}.dev-categories button{flex:0 0 138px}.dev-metrics{grid-template-columns:repeat(2,1fr)}.dev-context{grid-template-columns:1fr;padding:12px}.dev-context__actions{justify-content:flex-start}.dev-statusbar{gap:10px;overflow-x:auto}.dev-statusbar b{display:none}.dev-theme-switch{right:10px;bottom:72px}.dev-drawer{width:100vw}.dev-actions kbd{display:none}}