.toggle-thumb { position:absolute;height:16px;width:16px;left:3px;bottom:3px;background:#888;border-radius:50%;transition:transform 0.2s,background 0.2s; }
    .toggle input:checked ~ .toggle-thumb { transform:translateX(18px);background:#000; }
    .toggle-label { font-size:0.82rem;color:#888; }
    /* Delete zone */
    .danger-btn { width:100%;background:none;border:1px solid #3a1a1a;color:#ef4444;padding:0.65rem;border-radius:8px;cursor:pointer;font-size:0.85rem;font-family:inherit;transition:all 0.15s; }
    .danger-btn:hover { background:#1a0000;border-color:#ef4444; }
    .delete-confirm-wrap { display:none;margin-top:1rem; }
    .delete-confirm-wrap.show { display:block; }
    .delete-confirm-input { background:#1a1a1a;border:1px solid #3a1a1a;color:#f5f5f5;padding:0.55rem 0.7rem;border-radius:6px;width:100%;box-sizing:border-box;font-size:0.82rem;outline:none;font-family:inherit;margin:0.5rem 0 0.75rem; }
    .delete-confirm-input:focus { border-color:#ef4444; }
    .delete-final-btn { width:100%;background:#ef4444;color:#fff;border:none;padding:0.65rem;border-radius:8px;cursor:pointer;font-size:0.85rem;font-weight:700;font-family:inherit;opacity:0.4;transition:opacity 0.15s; }
    .delete-final-btn.ready { opacity:1; }
  
/* Mobile nav */
.nav-burger { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; color: #FFD700; font-size: 1.4rem; line-height: 1; }
.nav-mobile { display: none; flex-direction: column; gap: 0; border-bottom: 1px solid #1f1f1f; background: #0d0d0d; max-width: 1280px; margin: 0 auto; }
.nav-mobile.open { display: flex; }
.nav-mobile a { padding: 0.85rem 2rem; color: #888; text-decoration: none; font-size: 0.9rem; border-top: 1px solid #1f1f1f; }
.nav-mobile a:hover { color: #fff; background: #161616; }
@media (max-width: 767px) {
  .nav { padding: 0.85rem 1rem; }
  .nav-logo { font-size: 0.7rem; }
  .nav-links > a, .nav-links > div { display: none !important; }
  .nav-burger { display: block; }
  html, body { overflow-x: hidden; }
  #screen-dashboard { padding: 1rem 0.75rem !important; }
  #screen-login { padding: 0 0.75rem !important; }
  .dash-tab { padding: 0.55rem 0.75rem; font-size: 0.78rem; }
  .card { padding: 1rem !important; }
}

/* =========================================================
 * D4-INT UI-SHELL-INTEGRATE-01 — 2026-04-19
 * pickedby.ai Design System 기준 Shell 레이아웃 (Phase A: 공존)
 * 참조: docs/designs/Dashboard Shell (3-panel)/Dashboard Shell.html
 * 매핑표: docs/outputs/ui_shell_dom_mapping_20260419.md
 * ========================================================= */
:root {
  --pba-bg:          #0a0a0a;
  --pba-bg-0:        #000000;
  --pba-bg-1:        #0d0d0d;
  --pba-bg-2:        #141414;
  --pba-bg-3:        #161616;
  --pba-bg-4:        #1a1a1a;
  --pba-border:      #2a2a2a;
  --pba-border-soft: #222222;
  --pba-border-faint:#1f1f1f;
  --pba-border-dim:  #181818;
  --pba-fg:          #f5f5f5;
  --pba-fg-bold:     #ffffff;
  --pba-fg-1:        #cccccc;
  --pba-fg-2:        #aaaaaa;
  --pba-fg-3:        #888888;
  --pba-fg-4:        #666666;
  --pba-fg-5:        #555555;
  --pba-fg-6:        #444444;
  --pba-gold:        #FFD700;
  --pba-gold-dim:    #b39700;
  --pba-gold-soft:   #FFE55C;
  --pba-gold-bg:     #0a0800;
  --pba-gold-border: #3a2800;
  --pba-green:         #4ade80;
  --pba-green-perfect: #3DDC84;
  --pba-green-light:   #86efac;
  --pba-green-deep:    #00E676;
  --pba-font-body:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pba-font-pixel:  'Press Start 2P', monospace;
  --pba-font-mono:   'JetBrains Mono', 'Courier New', monospace;
}

/* Shell visibility — only shown when logged in (see showDashboard/showLogin) */
.shell-sidebar, .shell-topbar, .shell-scrim { display: none; }
body.shell-on .shell-sidebar,
body.shell-on .shell-topbar { display: flex; }

/* Legacy nav hide when Shell is active */
body.shell-on > nav.nav,
body.shell-on > .nav-mobile { display: none !important; }

/* Push legacy #screen-dashboard to account for sidebar + topbar */
body.shell-on #screen-dashboard {
  margin-left: 240px !important;
  padding-top: 80px !important;
  max-width: none !important;
}
@media (max-width: 820px) {
  body.shell-on #screen-dashboard {
    margin-left: 0 !important;
    padding-top: 72px !important;
  }
}

/* ========= SIDEBAR ========= */
.shell-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 240px;
  background: var(--pba-bg);
  border-right: 1px solid var(--pba-border);
  flex-direction: column;
  z-index: 40;
}
.shell-sb-brand {
  display: flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 18px;
  border-bottom: 1px solid var(--pba-border);
  text-decoration: none; flex: none;
}
.shell-sb-brand svg { width: 22px; height: 22px; flex: none; }
.shell-sb-brand-word {
  font-family: var(--pba-font-pixel);
  font-size: 12px; letter-spacing: 0.05em;
  color: var(--pba-gold); white-space: nowrap;
}
.shell-sb-brand-word i { color: #fff; font-style: normal; }
.shell-sb-menu {
  flex: 1; padding: 24px 10px 14px;
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
}
.shell-sb-label {
  font-family: var(--pba-font-pixel);
  font-size: 6.5px; color: var(--pba-fg-6);
  letter-spacing: 0.2em; padding: 0 10px 8px;
}
.shell-sb-item {
  position: relative; background: transparent; border: none;
  color: var(--pba-fg-3); text-align: left;
  padding: 10px 12px; border-radius: 6px;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--pba-font-body); font-size: 13.5px;
  cursor: pointer; transition: background .15s, color .15s;
  width: 100%;
}
.shell-sb-item:hover { background: var(--pba-bg-2); color: #fff; }
.shell-sb-item.on { background: var(--pba-gold-bg); color: var(--pba-gold); }
.shell-sb-item.on::before {
  content: ''; position: absolute; left: -10px; top: 6px; bottom: 6px;
  width: 3px; background: var(--pba-gold); border-radius: 0 2px 2px 0;
}
.shell-sb-ico {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  color: var(--pba-fg-4); flex: none;
}
.shell-sb-item:hover .shell-sb-ico { color: var(--pba-fg-1); }
.shell-sb-item.on .shell-sb-ico { color: var(--pba-gold); }
.shell-sb-divider {
  margin: 8px 10px 2px;
  border-top: 1px solid var(--pba-border-faint);
}

/* ========= TOPBAR ========= */
.shell-topbar {
  position: fixed; top: 0; left: 240px; right: 0;
  height: 56px;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--pba-border);
  align-items: center; justify-content: space-between;
  padding: 0 24px; z-index: 30;
}
.shell-menu-btn {
  display: none; background: transparent; border: none;
  color: var(--pba-fg-1);
  width: 36px; height: 36px; border-radius: 6px; cursor: pointer;
  align-items: center; justify-content: center; margin-right: 4px;
}
.shell-menu-btn:hover { background: var(--pba-bg-2); }
.shell-crumbs {