:root { --ink:#f6f2eb; --muted:#b9ad9c; --gold:#e1bd78; --bg:#0d0f14; --line:rgba(225,189,120,.28); --red:#d27867; --blue:#7aa7ce; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; color:var(--ink); background:var(--bg); font-family:'Segoe UI','Trebuchet MS',sans-serif; background-image:linear-gradient(108deg,transparent 0 49.8%,rgba(201,161,93,.07) 50%,transparent 50.2%),linear-gradient(28deg,transparent 0 64%,rgba(255,255,255,.035) 64.1%,transparent 64.2%); background-size:420px 420px,560px 560px; } button { font:inherit; } button:focus-visible,a:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.studio-nav { height:76px; display:flex; align-items:center; background:#0a0c10; border-bottom:1px solid rgba(225,189,120,.42); }.studio-nav-inner { width:min(1400px,calc(100% - 48px)); margin:auto; display:flex; align-items:center; justify-content:space-between; }.brand-wordmark { display:inline-flex; align-items:center; gap:11px; color:#fffaf0; font-family:Georgia,serif; text-decoration:none; line-height:1; }.brand-monogram { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid rgba(232,197,132,.88); color:#f0ce91; font-size:.85rem; letter-spacing:.06em; }.brand-copy { display:flex; flex-direction:column; gap:4px; color:#fffaf0; font-size:.84rem; font-weight:600; letter-spacing:.13em; }.brand-copy small { font-family:'Segoe UI',sans-serif; font-size:.52rem; font-weight:500; letter-spacing:.19em; opacity:.76; }.studio-nav-links { display:flex; align-items:center; gap:4px; }.studio-nav-links a { padding:12px 10px; color:rgba(247,241,232,.78); font-size:12px; letter-spacing:.02em; text-decoration:none; border-bottom:1px solid transparent; }.studio-nav-links a:hover,.studio-nav-links a.active { color:#fffaf0; border-bottom-color:var(--gold); }.studio-nav-links .book-link { color:#211e18; background:linear-gradient(135deg,#f0d79f,#bd9252); border-radius:3px; }.studio-nav-toggle { display:none; border:1px solid rgba(225,189,120,.55); border-radius:4px; padding:8px 10px; color:#ead9bb; background:transparent; }
.management-shell { width:min(1400px,calc(100% - 48px)); margin:34px auto 56px; }.page-intro { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:24px; }.eyebrow,.section-kicker { display:block; margin:0 0 8px; color:var(--gold); font-size:11px; font-weight:700; letter-spacing:2.3px; }.page-intro h1 { margin:0; color:#fffaf2; font:500 clamp(32px,4vw,52px)/1.15 Georgia,serif; }.intro-copy { margin:10px 0 0; color:rgba(247,241,232,.66); }.intro-actions { display:flex; align-items:center; gap:18px; }.sync-status { color:var(--muted); font-size:12px; }.sync-status i { margin-right:6px; color:#7cae86; font-size:8px; }.gold-button { border:0; padding:12px 17px; color:#211f1a; background:linear-gradient(110deg,#f1d89e,#b98b4c 56%,#e9c982); border-radius:5px; font-weight:700; cursor:pointer; box-shadow:0 8px 20px rgba(201,161,93,.2); }.gold-button i { margin-right:7px; }
.project-bar,.metric-card,.workspace-panel,.hidden-panel { border:1px solid var(--line); background:linear-gradient(145deg,rgba(49,48,46,.94),rgba(24,25,30,.96)); box-shadow:0 14px 38px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.04); }.project-bar { display:flex; align-items:center; gap:26px; padding:18px 22px; }.project-identity { display:flex; align-items:center; gap:13px; min-width:290px; }.project-mark { display:grid; place-items:center; width:39px; height:39px; color:#211e18; background:var(--gold); font:700 19px Georgia,serif; }.project-identity strong { display:block; color:#fffaf1; font:19px Georgia,serif; }.project-meta { display:flex; flex-wrap:wrap; gap:22px; margin-left:auto; color:var(--muted); font-size:12px; }.project-meta b { margin-left:5px; color:#eee3d3; font-weight:500; }.icon-button { margin-left:4px; border:0; color:var(--muted); background:transparent; cursor:pointer; font-size:17px; }
.metrics-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:14px 0 20px; }.metric-card { position:relative; display:flex; align-items:start; gap:12px; min-height:132px; padding:18px; }.metric-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:#1b2028; }.metric-icon.blue { background:var(--blue); }.metric-icon.gold { background:var(--gold); }.metric-icon.red { background:var(--red); }.metric-icon.green { background:#82ae87; }.metric-card span:not(.metric-icon) { display:block; color:var(--muted); font-size:12px; }.metric-card strong { display:block; margin:5px 0; color:#fff8ee; font:600 28px Georgia,serif; }.metric-card strong small { margin-left:3px; color:var(--muted); font:12px 'Segoe UI',sans-serif; }.metric-card em { color:#99a795; font-size:11px; font-style:normal; }.metric-card .positive { color:#8bb794; }.metric-card .warning { color:#dd9886; }.mini-progress { position:absolute; right:18px; bottom:18px; left:18px; height:3px; background:rgba(255,255,255,.1); }.mini-progress i { display:block; height:100%; background:var(--blue); }.mini-progress.amber i { background:var(--gold); }.mini-progress.danger i { background:var(--red); }.mini-progress.green-bar i { background:#82ae87; }
.workspace-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); }.workspace-tabs button { border:0; border-bottom:2px solid transparent; padding:13px 16px; color:var(--muted); background:transparent; cursor:pointer; font-size:12px; }.workspace-tabs button.active,.workspace-tabs button:hover { color:#fff8ed; border-bottom-color:var(--gold); }.workspace-tabs i { margin-right:7px; color:var(--gold); }.workspace-tabs b { display:inline-grid; place-items:center; min-width:18px; height:18px; margin-left:5px; padding:0 4px; border-radius:9px; color:#211e18; background:var(--gold); font-size:10px; }
.workspace-panel { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(310px,.8fr); border-top:0; }.panel-main,.panel-side { padding:24px; }.panel-side { border-left:1px solid rgba(225,189,120,.2); background:rgba(13,15,20,.2); }.panel-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:20px; }.panel-heading h2,.hidden-panel h2 { margin:0; color:#fffaf0; font:500 24px Georgia,serif; }.compact { align-items:center; margin-bottom:14px; }.compact .section-kicker { margin-bottom:5px; }.compact h2 { font-size:19px; }.filter-group { display:flex; gap:3px; }.filter-group button { border:1px solid rgba(225,189,120,.25); padding:6px 9px; color:var(--muted); background:transparent; cursor:pointer; font-size:11px; }.filter-group button.active { color:#211e18; background:var(--gold); }.order-table { border-top:1px solid rgba(255,255,255,.1); }.table-head,.order-row { display:grid; grid-template-columns:1.45fr 1.25fr 1.05fr .65fr; align-items:center; gap:12px; }.table-head { padding:10px 12px; color:#898174; font-size:10px; letter-spacing:.08em; text-transform:uppercase; }.order-row { min-height:76px; padding:12px; border-top:1px solid rgba(255,255,255,.07); color:#d8cdbd; font-size:11px; }.order-name { display:flex; align-items:center; gap:9px; }.order-avatar { display:grid; flex:0 0 31px; place-items:center; width:31px; height:31px; color:#261f15; background:var(--gold); font-size:10px; }.avatar-blue { color:#1d2a37; background:var(--blue); }.avatar-green { color:#1c2b20; background:#82ae87; }.avatar-purple { color:#eee5f4; background:#88729c; }.order-name p { margin:0; }.order-name strong { display:block; color:#f5ecdf; font-size:12px; }.order-name small,.order-row>span small { display:block; margin-top:4px; color:#898276; font-size:10px; }.status { display:inline-block; padding:4px 7px; font-size:10px; font-weight:500; }.status.making { color:#f0d391; background:rgba(225,189,120,.13); }.status.designing { color:#b6d8ef; background:rgba(122,167,206,.13); }.status.installing { color:#b8d2ba; background:rgba(130,174,135,.13); }.date-ok { color:#8db493!important; }.date-warn { color:#db9a85!important; }.outline-button { margin-top:18px; border:1px solid rgba(225,189,120,.5); padding:9px 13px; color:#dfd3c3; background:transparent; cursor:pointer; font-size:11px; }.outline-button:hover,.text-button:hover { color:#211e18; background:var(--gold); }.outline-button i { margin-left:8px; }.focus-item { display:flex; align-items:start; gap:10px; padding:12px 0; border-top:1px solid rgba(255,255,255,.07); }.focus-check { display:grid; flex:0 0 16px; place-items:center; width:16px; height:16px; border:1px solid rgba(225,189,120,.55); color:#1c261f; cursor:pointer; font-size:10px; }.focus-check.checked { border-color:#82ae87; background:#82ae87; }.focus-item p { margin:0; color:#d8cdbd; font-size:12px; }.focus-item strong { display:block; color:#f3e9dc; font-weight:500; }.focus-item small { display:block; margin-top:3px; color:#90887c; font-size:10px; }.focus-item .completed { color:#858c86; text-decoration:line-through; }.text-button { border:0; color:var(--gold); background:none; cursor:pointer; font-size:11px; }.issue-count { color:#dd9886; font-size:11px; }.stock-alert { display:flex; align-items:center; gap:9px; padding:13px 0; border-top:1px solid rgba(255,255,255,.07); }.stock-alert>i { color:var(--red); font-size:7px; }.stock-alert.normal>i { color:#82ae87; }.stock-alert p { flex:1; margin:0; }.stock-alert strong { display:block; color:#eee4d7; font-size:12px; font-weight:500; }.stock-alert small { display:block; margin-top:3px; color:#8e887d; font-size:10px; }.stock-alert b { color:#dd9886; font-size:10px; font-weight:500; }.stock-alert.normal b { color:#8db493; }.hidden-panel { display:none; min-height:360px; padding:80px 24px; text-align:center; border-top:0; }.hidden-panel.is-visible { display:block; }.hidden-panel>i { color:var(--gold); font-size:30px; }.hidden-panel p { color:var(--muted); }.workspace-panel:not(.is-visible) { display:none; }.toast { position:fixed; right:24px; bottom:24px; padding:12px 17px; color:#211e18; background:var(--gold); box-shadow:0 8px 24px rgba(0,0,0,.25); opacity:0; transform:translateY(10px); transition:.2s ease; pointer-events:none; font-size:12px; }.toast.show { opacity:1; transform:translateY(0); }
+@media (max-width:900px) { .studio-nav-toggle { display:block; }.studio-nav-links { position:absolute; z-index:4; top:76px; left:0; right:0; display:none; flex-direction:column; align-items:stretch; padding:8px 24px 15px; background:#0a0c10; }.studio-nav-links.open { display:flex; }.management-shell,.studio-nav-inner { width:calc(100% - 28px); }.page-intro { align-items:start; flex-direction:column; }.intro-actions { width:100%; justify-content:space-between; }.metrics-grid { grid-template-columns:repeat(2,1fr); }.project-bar { align-items:start; flex-wrap:wrap; }.project-meta { margin-left:0; }.workspace-panel { display:block; }.panel-side { border-top:1px solid rgba(225,189,120,.2); border-left:0; }.table-head { display:none; }.order-row { grid-template-columns:1.4fr 1fr; gap:10px; padding:15px 10px; }.order-row>span:nth-child(2) { grid-column:2; grid-row:1; text-align:right; }.order-row>span:nth-child(3) { grid-column:1; }.order-row>span:nth-child(4) { grid-column:2; text-align:right; } }
+@media (max-width:560px) { .studio-nav { height:62px; }.studio-nav-links { top:62px; }.brand-copy { font-size:.72rem; }.management-shell { margin-top:24px; }.page-intro h1 { font-size:32px; }.project-bar { padding:16px; }.project-identity { min-width:0; }.project-meta { gap:9px 15px; }.metrics-grid { gap:8px; }.metric-card { min-height:122px; padding:13px; gap:8px; }.metric-card strong { font-size:23px; }.metric-icon { width:30px; height:30px; }.workspace-tabs { overflow-x:auto; }.workspace-tabs button { flex:0 0 auto; padding:12px 10px; }.panel-main,.panel-side { padding:17px 14px; }.panel-heading { align-items:start; flex-direction:column; }.filter-group { width:100%; overflow-x:auto; }.filter-group button { flex:1; white-space:nowrap; }.order-row { font-size:10px; }.toast { right:14px; bottom:14px; } }