/* ── APP SHELL — sidebar + main ─────────────────────────────── */
#app-shell {
  display:              grid;
  grid-template-columns: var(--sb-width) 1fr;
  height:               100vh;
  overflow:             hidden;
}

/* ── SIDEBAR ────────────────────────────────────────────────── */
#sidebar {
  background:     var(--sb-bg);
  display:        flex;
  flex-direction: column;
  height:         100vh;
  overflow:       hidden;
  border-right:   1px solid var(--cbd-gold-deep);
  position:       relative;
  z-index:        10;
}

#sb-brand {
  padding:         14px 14px 10px;
  border-bottom:   1px solid rgba(255,255,255,.06);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-shrink:     0;
}

#sb-brand-name {
  font-family:    var(--font-display, "Cinzel", Georgia, serif);
  font-size:      13px;
  font-weight:    700;
  color:          var(--cbd-gold);
  letter-spacing: .12em;
  line-height:    1.2;
  text-transform: uppercase;
}

#sb-logo {
  width:          130px;
  height:         auto;
  display:        block;
  margin-bottom:  3px;
}

.cw-lockup {
  display:     inline-flex;
  align-items: center;
  gap:         9px;
  text-decoration: none;
}

.cw-lockup-mark {
  width:       32px;
  height:      32px;
  flex-shrink: 0;
}

.cw-lockup-text {
  display:        flex;
  flex-direction: column;
  gap:            1px;
  line-height:    1.05;
}

.cw-lockup-name {
  font-family:    var(--font-display, "Cinzel", Georgia, serif);
  font-size:      15px;
  font-weight:    800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.cw-lockup-title {
  font-family:    var(--font-display, "Cinzel", Georgia, serif);
  font-size:      8.5px;
  font-weight:    600;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.cw-lockup.dark .cw-lockup-name { color: var(--cbd-bone); }
.cw-lockup.dark .cw-lockup-title { color: var(--cbd-gold-bright); }
.cw-lockup.light .cw-lockup-name { color: var(--cbd-navy); }
.cw-lockup.light .cw-lockup-title { color: var(--cbd-gold-deep); }

#sb-brand .cw-lockup-mark {
  width: 28px;
  height: 28px;
}

#sb-brand .cw-lockup-name {
  font-size: 13px;
}

#sb-brand .cw-lockup-title {
  font-size: 7.5px;
}

#sb-brand-sub {
  font-family:    var(--font-display, "Cinzel", Georgia, serif);
  font-size:      9px;
  color:          var(--cbd-bone-mute);
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-top:     2px;
}

#theme-toggle {
  width:           28px;
  height:          28px;
  border-radius:   var(--radius);
  background:      rgba(255,255,255,.06);
  border:          1px solid rgba(255,255,255,.08);
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       13px;
  flex-shrink:     0;
  transition:      background .15s;
  color:           var(--sb-text);
}
#theme-toggle:hover { background: rgba(255,255,255,.12); }

/* ── MACHINE PILLS (sidebar) ────────────────────────────────── */
#mrow {
  display:        flex;
  gap:            4px;
  padding:        8px 10px;
  border-bottom:  1px solid rgba(255,255,255,.06);
  flex-wrap:      wrap;
  flex-shrink:    0;
}

.mpill {
  font-size:     9px;
  padding:       3px 8px;
  border-radius: 20px;
  border:        1px solid rgba(255,255,255,.12);
  background:    transparent;
  color:         var(--sb-text-dim);
  cursor:        pointer;
  transition:    all .15s;
  white-space:   nowrap;
}

.mpill.on {
  background:   var(--gold-dim);
  color:        var(--gold);
  border-color: rgba(201,154,57,.4);
}

/* ── NAV (sidebar) ──────────────────────────────────────────── */
#nav {
  flex:       1;
  overflow-y: auto;
  padding:    6px 0 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
#nav::-webkit-scrollbar { width: 4px; }
#nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

.nav-group {
  margin-bottom: 2px;
}

/* Base label style — used in nav AND inside panels (betafeedback section headers) */
.nav-label {
  font-size:      8.5px;
  font-weight:    700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--sb-text-dim);
  padding:        10px 14px 4px;
  display:        block;
}

/* Nav-only: collapsible toggle behaviour, scoped to avoid bleeding into panels */
#nav .nav-label {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding-right:   10px;
  cursor:          pointer;
  user-select:     none;
  width:           100%;
  border:          none;
  background:      transparent;
  font-family:     var(--font);
}
#nav .nav-label:hover { color: var(--sb-text); }
#nav .nav-label::after {
  content:        '›';
  font-size:      13px;
  font-weight:    400;
  letter-spacing: 0;
  text-transform: none;
  opacity:        0.4;
  transform:      rotate(90deg);
  transition:     transform .15s ease;
  display:        inline-block;
  flex-shrink:    0;
  line-height:    1;
}
.nav-group.collapsed .nav-label::after {
  transform: rotate(0deg);
}
.nav-group.collapsed .ntab {
  display: none;
}

.ntab {
  display:        flex;
  align-items:    center;
  width:          100%;
  padding:        6px 14px 6px 18px;
  border:         none;
  background:     transparent;
  color:          var(--sb-text);
  font-size:      12px;
  font-family:    var(--font);
  cursor:         pointer;
  text-align:     left;
  border-radius:  0;
  transition:     all .12s;
  position:       relative;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}
.ntab:hover { background: rgba(255,255,255,.05); color: #f0e8d6; }

.ntab.on {
  background: var(--gold-dim);
  color:      var(--gold);
  font-weight: 500;
}
.ntab.on::before {
  content:  '';
  position: absolute;
  left:     0; top: 0; bottom: 0;
  width:    3px;
  background: var(--gold);
  border-radius: 0 2px 2px 0;
}

.ntab.locked {
  opacity: 0.45;
}
.ntab.locked::after {
  content: ' ★';
  font-size: 8px;
  opacity: 0.5;
  color: var(--cbd-gold);
}
.ntab.locked:hover {
  opacity: 0.65;
}

/* ── SIDEBAR FOOTER ─────────────────────────────────────────── */
#sb-footer {
  padding:       8px 10px;
  border-top:    1px solid rgba(255,255,255,.06);
  flex-shrink:   0;
}

#sync-pill {
  display:       flex;
  align-items:   center;
  gap:           6px;
  padding:       5px 8px;
  border-radius: var(--radius);
  background:    rgba(255,255,255,.04);
  border:        1px solid rgba(255,255,255,.07);
  cursor:        pointer;
  font-family:   var(--font);
  font-size:     10px;
  color:         var(--sb-text-dim);
  width:         100%;
  transition:    background .15s;
}
#sync-pill:hover { background: rgba(255,255,255,.08); }

.sdot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--text3);
  flex-shrink:   0;
}
#sync-pill.syncing .sdot { background: var(--amber); animation: pulse 1s infinite; }
#sync-pill.synced  .sdot { background: var(--green); }
#sync-pill.error   .sdot { background: var(--red); }
#sync-pill.offline .sdot { background: #4a6080; }

@keyframes pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

#sb-platform-credit {
  display:        flex;
  align-items:    center;
  gap:            7px;
  padding:        10px 16px 14px;
  opacity:        0.28;
  pointer-events: none;
  user-select:    none;
}

#sb-platform-icon {
  width:       16px;
  height:      16px;
  flex-shrink: 0;
  filter:      var(--sb-icon-filter, none);
}

#sb-platform-name {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--gold);
  line-height:    1;
}

/* ── MAIN CONTENT AREA ──────────────────────────────────────── */
#main {
  display:        flex;
  flex-direction: column;
  height:         100vh;
  overflow:       hidden;
  position:       relative;
}

#main::before {
  content:             "";
  position:            fixed;
  top:                 50%;
  left:                calc(50% + var(--sb-width, 220px) / 2);
  transform:           translate(-50%, -50%);
  width:               320px;
  height:              320px;
  background-image:    url("/brand/arch-icon.svg");
  background-size:     contain;
  background-repeat:   no-repeat;
  background-position: center;
  opacity:             0.025;
  pointer-events:      none;
  z-index:             0;
}

/* ── TOP BAR ────────────────────────────────────────────────── */
#hdr {
  height:          var(--hdr-h);
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         0 16px;
  border-bottom:   1px solid var(--border);
  background:      var(--bg);
  flex-shrink:     0;
  box-shadow:      var(--shadow-sm);
}

#hdr-title {
  font-size:   13px;
  font-weight: 600;
  color:       var(--text);
  flex:        1;
}

#hdr-right {
  display:     flex;
  align-items: center;
  gap:         6px;
  margin-left: auto;
}

/* ── PANELS SCROLL AREA ─────────────────────────────────────── */
#panels {
  flex:       1;
  overflow-y: auto;
  padding:    16px 20px 24px;
}