/* stylelint-disable -- Migrated parity CSS: keep cascade, selector order, and declarations visually identical. */
  /* ---------- Layout ---------- */
  .shell { display:grid; grid-template-columns:264px 1fr; min-height:100vh; transition:grid-template-columns .2s ease; }
  .shell.sidebar-collapsed { grid-template-columns:86px 1fr; }
  .shell > main { min-width:0; }   /* let the 1fr track shrink instead of overflowing */

  .sidebar {
    display:flex; flex-direction:column;
    position:sticky; top:20px; align-self:start; height:100vh; overflow-y:auto;
    margin:14px 0 14px 14px; padding:var(--s-5) var(--s-4); border-radius:var(--r-lg);
    background:var(--glass-bg); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-brd);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), var(--shadow-pop);
    z-index:40; transition:transform .35s cubic-bezier(.4,0,.2,1), padding .2s ease;
  }
  .sidebar.collapsed { padding:var(--s-5) 12px; overflow-x:hidden; }
  .brandmark { display:flex; align-items:center; gap:10px; margin-bottom:var(--s-5); position:relative; }
  .brandmark .glyph,
  .topbar .glyph {
    width:50px; height:50px; border-radius:10px; flex:none;
    background:linear-gradient(150deg,var(--brand),#7b90f4);
    display:grid; place-items:center; color:#fff; box-shadow:0 4px 14px rgba(56,88,233,.4);
    overflow:hidden;
    animation:floaty 5s ease-in-out infinite;
  }
  .brandmark .glyph picture,
  .topbar .glyph picture,
  .brandmark .glyph img,
  .topbar .glyph img { display:block; width:100%; height:100%; }
  .brandmark .glyph img,
  .topbar .glyph img { object-fit:cover; }
  @keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
  .brandmark .name { font-weight:700; color:var(--ink); font-size:15px; line-height:1.1; }
  .brandmark .sub  { font-size:11px; color:var(--text-faint); letter-spacing:.04em; text-transform:uppercase; }
  .sidebar-toggle { margin-left:auto; width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--hairline); border-radius:var(--r-sm); color:var(--text-muted); background:rgba(255,255,255,.62); cursor:pointer; transition:background .15s, color .15s, transform .15s; }
  .sidebar-toggle:hover { background:var(--brand-soft); color:var(--brand-press); transform:translateY(-1px); }
  .sidebar.collapsed .brandmark { justify-content:center; }
  .sidebar.collapsed .brandmark .glyph,
  .sidebar.collapsed .brandmark .name,
  .sidebar.collapsed .brandmark .sub { display:none; }
  .sidebar.collapsed .brandmark > div:not(.glyph) { display:none; }
  .sidebar.collapsed .sidebar-toggle { margin-left:0; }

  .nav-group { margin-bottom:var(--s-4); }
  .scds-sidebar-bottom { margin-top:auto; }
  .nav-group h5 { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); margin:0 0 var(--s-2) 8px; font-weight:600; }
  .nav-item {
    display:flex; width:100%; align-items:center; gap:8px; text-align:left;
    padding:6px 8px; border-radius:var(--r-sm); color:var(--text-muted);
    font-size:13.5px; font-weight:500; font-family:var(--font); background:transparent;
    border:0; cursor:pointer; transition:background .15s, color .15s;
  }
  .nav-icon { flex:none; color:currentColor; }
  .nav-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .nav-item:hover { background:var(--surface-alt); color:var(--text); }
  .nav-item.active { background:var(--brand-soft); color:var(--brand-press); }
  .sidebar.collapsed .nav-group h5,
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .scds-sidebar-bottom { display:none; }
  .sidebar.collapsed .nav-item { justify-content:center; padding:9px 8px; }

  .content { max-width:1000px; margin:0 auto; padding:var(--s-6) var(--s-6) var(--s-8); width:100%; }

  /* ---------- Mobile topbar ---------- */
  .topbar { display:none; }

  /* ---------- Views (SPA) ---------- */
  .view { display:none; }
  .view.active { display:block; }
  .view:focus { outline:none; }

  .hero {
    position:relative; overflow:hidden;
    background:linear-gradient(135deg, rgba(56,88,233,.10), rgba(167,232,210,.14));
    border:1px solid var(--glass-brd);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    border-radius:var(--r-lg); padding:var(--s-7) var(--s-6); margin-bottom:var(--s-6);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), var(--shadow-pop);
  }
  .hero .eyebrow { display:inline-block; font-size:12px; font-weight:600; color:var(--brand-press); background:rgba(255,255,255,.7); padding:4px 12px; border-radius:var(--r-pill); margin-bottom:var(--s-4); }
  .hero h1 { font-size:34px; letter-spacing:-.02em; margin-bottom:var(--s-3); }
  .hero p { font-size:17px; color:var(--text-muted); max-width:60ch; }
  .hero .shine { position:absolute; top:-40%; left:-20%; width:60%; height:180%; transform:rotate(18deg);
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation:sweep 7s ease-in-out infinite; }
  @keyframes sweep { 0%{left:-30%} 55%,100%{left:130%} }

  .sec-head { margin-bottom:0; display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-4); }
  .sec-head-main { min-width:0; }
  .sec-head-action { flex:none; display:flex; align-items:center; justify-content:flex-end; padding-top:2px; }
  .sec-head .kicker { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); margin-bottom:6px; }
  .sec-head h2 { font-size:26px; letter-spacing:-.01em; }
  .sec-head p { color:var(--text-muted); margin-top:8px; max-width:68ch; }

  .card { background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--shadow-card); }
  .card.glassy { background:var(--glass-bg); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border-color:var(--glass-brd); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), var(--shadow-pop); }
  .pad { padding:var(--s-5); }
  .subhead { font-size:13px; font-weight:600; color:var(--ink); text-transform:uppercase; letter-spacing:.04em; margin-bottom:var(--s-3); }
  .subhead-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--s-3); margin-bottom:var(--s-3); }
  .subhead-row .subhead { margin-bottom:0; }
  .rt th.action-col,
  .rt td.action-col { text-align:right; width:1%; white-space:nowrap; }
  .scds-workflow-card .subhead-row { align-items:flex-start; margin-bottom:var(--s-4); }
  .scds-settings-policy { color:var(--text-muted); font-size:13px; line-height:1.55; margin:6px 0 0; max-width:56ch; }
  .scds-settings-form { display:grid; gap:var(--s-4); }
  .scds-workflow-choice {
    align-items:flex-start; background:var(--surface-alt); border:1px solid var(--hairline);
    border-radius:var(--r-md); display:flex; gap:10px; padding:12px 14px;
  }
  .scds-workflow-choice input { flex:none; margin-top:2px; }
  .scds-workflow-choice span { color:var(--ink); font-size:13.5px; font-weight:600; line-height:1.4; }
  .scds-button-row { display:flex; justify-content:flex-end; }
  .scds-button {
    align-items:center; border:1px solid var(--hairline-strong); border-radius:var(--r-sm);
    cursor:pointer; display:inline-flex; font-family:var(--font); font-size:12px; font-weight:600;
    justify-content:center; line-height:1.2; min-height:32px; padding:7px 12px;
  }
  .scds-button--primary { background:var(--brand); border-color:var(--brand); color:#fff; }
  .scds-button--primary:hover { background:var(--brand-press); border-color:var(--brand-press); }
  .scds-button:disabled { cursor:not-allowed; opacity:.55; }

  .grid { display:grid; gap:var(--s-4); }
  .g2 { grid-template-columns:repeat(2,1fr); }
  .g3 { grid-template-columns:repeat(3,1fr); }
  .g4 { grid-template-columns:repeat(4,1fr); }
