/* ============================================================
   HiPer Studio — shared application shell
   Dark green left sidebar · white top bar · light-grey workspace ·
   white cards · green accents. Linked by every studio page so the
   layout language stays consistent. Expects the common design
   tokens (--bg, --border, --muted, --text, --primary, --accent,
   --ok-bg, --amber, --critical) to be defined by each page.
   ============================================================ */

:root {
  --nav:#0e2a1f; --nav-2:#16382a; --nav-line:#1f4a37;
  --nav-text:#aed4c1; --nav-active:#1c5540; --nav-accent:#5ad29a;
}

/* The old top stage-nav is replaced by the sidebar everywhere. */
#stageNav { display:none !important; }
/* Old per-page dark <header> is replaced by .topbar (kept for any stragglers). */
body.studio { background:var(--bg); }

.app-shell { display:flex; min-height:100vh; align-items:stretch; }

/* ── Sidebar ── */
.side-nav { width:248px; flex-shrink:0; background:var(--nav); color:var(--nav-text); display:flex; flex-direction:column; padding:0 0 14px; overflow-y:auto; }
.nav-brand { padding:18px 20px 14px; }
.nav-brand .b1 { font-size:18px; font-weight:800; color:#fff; line-height:1.1; }
.nav-brand .b2 { font-size:12px; color:var(--nav-text); margin-top:2px; }
.nav-list { margin-top:12px; display:flex; flex-direction:column; }
.nav-item { display:flex; align-items:center; gap:11px; padding:11px 20px; color:var(--nav-text); text-decoration:none; font-size:14px; font-weight:600; border-left:3px solid transparent; }
.nav-item:hover { background:var(--nav-2); color:#fff; }
.nav-item.active { background:var(--nav-active); color:#fff; border-left-color:var(--nav-accent); }
.nav-item.locked { opacity:.45; pointer-events:none; }
.nav-ico { width:18px; text-align:center; flex-shrink:0; }
.nav-status { margin:auto 14px 0; background:var(--nav-2); border:1px solid var(--nav-line); border-radius:10px; padding:13px 14px; }
.nav-status .l { font-size:10px; font-weight:800; letter-spacing:.6px; color:#6f9e88; text-transform:uppercase; }
.nav-status .s { font-size:15px; font-weight:800; color:var(--amber,#d97706); margin:3px 0 6px; }
.nav-status .d { font-size:11px; color:var(--nav-text); line-height:1.5; }
.nav-guide { display:block; text-align:center; margin:12px 14px 0; padding:9px; background:transparent; border:1px solid var(--nav-line); border-radius:9px; color:#fff; font-size:12px; font-weight:700; text-decoration:none; }
.nav-guide:hover { background:var(--nav-2); }

/* ── Column + white top bar ── */
.app-col { flex:1; min-width:0; display:flex; flex-direction:column; }
#appHeader.topbar { display:flex; align-items:center; gap:18px; background:#fff; border-bottom:1px solid var(--border); padding:0 22px; height:58px; flex-shrink:0; }
.tb-title { font-size:17px; font-weight:800; color:var(--text); white-space:nowrap; }
.tb-title span { color:var(--muted); font-weight:600; font-size:14px; }
.tb-center { flex:1; min-width:0; }
.tb-right { display:flex; align-items:center; gap:10px; }
.tb-btn { display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--border); color:var(--text); border-radius:8px; padding:7px 12px; font-size:13px; font-weight:700; cursor:pointer; text-decoration:none; }
.tb-btn:hover { background:var(--bg); border-color:var(--accent); }
.tb-user { font-size:12px; color:var(--muted); }
.tb-credits { font-size:12px; color:var(--muted); background:var(--bg); border:1px solid var(--border); border-radius:20px; padding:4px 12px; }
.tb-credits strong { color:var(--text); }
.tb-menu-wrap { position:relative; }
.tb-menu { position:absolute; right:0; top:calc(100% + 6px); background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.16); min-width:210px; padding:6px; z-index:50; display:none; }
.tb-menu.open { display:block; }
.tb-menu button, .tb-menu a { display:flex; width:100%; align-items:center; gap:8px; padding:9px 11px; background:none; border:none; text-align:left; font-size:13px; font-weight:600; color:var(--text); border-radius:7px; cursor:pointer; text-decoration:none; }
.tb-menu button:hover, .tb-menu a:hover { background:var(--bg); }

/* ── Workspace ── */
#appMain { padding:24px 28px 60px; overflow:auto; flex:1; }
.shell-page { max-width:1180px; margin:0 auto; }
.shell-page-narrow { max-width:720px; margin:0 auto; }
.page-h { font-size:22px; font-weight:800; color:var(--text); }
.page-sub { font-size:13px; color:var(--muted); margin-top:4px; margin-bottom:22px; }

@media (max-width:900px){
  .side-nav { width:64px; }
  .nav-brand .b1, .nav-brand .b2, .nav-item span:not(.nav-ico), .nav-status, .nav-guide { display:none; }
  .nav-item { justify-content:center; padding:13px 0; }
}