/* ============================================================
   QVORA ADMIN — Design System
   Base tokens inherited from DESIGN.md, adapted per PRD §6 for
   a dense, fast internal work tool (not the public landing page).
   ============================================================ */

:root{
  /* --- brand tokens (kept from DESIGN.md) --- */
  --navy:        #0A1A2E;
  --navy-2:      #0F2340;
  --navy-3:      #16304F;
  --cobalt:      #0047AB;
  --cobalt-2:    #2F6FE0;
  --gold:        #C9A227;
  --gold-soft:   #F3E6BE;

  /* --- admin-specific neutrals (cool, quiet — this is a work tool) --- */
  --canvas:      #F3F4F7;
  --surface:     #FFFFFF;
  --surface-2:   #F8F9FB;
  --ink:         #101826;
  --ink-soft:    #56617A;
  --ink-faint:   #8791A4;
  --line:        #E4E7EE;
  --line-soft:   #EEF0F4;

  /* --- status --- */
  --success:     #1B8A5A;
  --success-bg:  #E7F5EE;
  --danger:      #C4332F;
  --danger-bg:   #FBEAE9;
  --warn:        #9A7413;
  --warn-bg:     #FBF3DC;
  --info:        #0047AB;
  --info-bg:     #E9EFFA;
  --neutral-bg:  #EEF0F4;

  /* --- geometry (dialed down from the marketing site) --- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-pill: 100px;

  /* --- shadow: quiet, never heavy --- */
  --shadow-sm: 0 1px 2px rgba(16,24,38,.06);
  --shadow-md: 0 6px 20px rgba(16,24,38,.08);
  --shadow-pop: 0 16px 40px rgba(10,26,46,.18);

  --sidebar-w: 248px;
  --topbar-h: 64px;

  --font-display: 'Fraunces', serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--canvas);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  font-size:14px;
  line-height:1.5;
}
h1,h2,h3,h4{ margin:0; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }

::selection{ background:var(--gold-soft); color:var(--navy); }

:focus-visible{
  outline:2px solid var(--cobalt-2);
  outline-offset:2px;
  border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ============================================================
   APP SHELL — sidebar + topbar + content
   ============================================================ */
.app-shell{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height:100vh;
}

/* ---------- Sidebar ---------- */
.sidebar{
  background:linear-gradient(180deg,var(--navy) 0%, var(--navy-2) 100%);
  color:#fff;
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  padding:20px 14px;
  overflow-y:auto;
}
.sidebar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 10px 22px;
}
.sidebar-brand .mark{
  width:32px;height:32px;border-radius:9px;
  background:linear-gradient(135deg,var(--cobalt) 0%, var(--gold) 130%);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-weight:600;font-style:italic;
  color:#fff;font-size:16px;
  flex:none;
}
.sidebar-brand .name{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:600;
  letter-spacing:.2px;
}
.sidebar-brand .tag{
  display:block;
  font-family:var(--font-body);
  font-size:10.5px;
  color:rgba(255,255,255,.45);
  letter-spacing:.6px;
  text-transform:uppercase;
  margin-top:1px;
}

.nav-group-label{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:rgba(255,255,255,.38);
  padding:16px 12px 6px;
  font-weight:600;
}
.nav-list{ display:flex; flex-direction:column; gap:2px; }
.nav-item{
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 12px;
  border-radius:var(--r-sm);
  color:rgba(255,255,255,.68);
  font-size:13.5px;
  font-weight:500;
  cursor:pointer;
  position:relative;
  transition:background .15s ease, color .15s ease;
}
.nav-item .ico{
  width:17px;height:17px;flex:none;
  display:flex;align-items:center;justify-content:center;
  opacity:.9;
}
.nav-item svg{ width:17px;height:17px; stroke:currentColor; }
.nav-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-item.active{
  background:rgba(47,111,224,.18);
  color:#fff;
}
.nav-item.active::before{
  content:"";
  position:absolute;
  left:-14px; top:6px; bottom:6px;
  width:3px;
  border-radius:0 4px 4px 0;
  background:linear-gradient(180deg,var(--gold),var(--cobalt-2));
}
.nav-item .badge-count{
  margin-left:auto;
  font-size:10.5px;
  background:rgba(255,255,255,.12);
  color:rgba(255,255,255,.75);
  padding:1px 7px;
  border-radius:var(--r-pill);
}

.sidebar-foot{
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
}
.role-pill{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.05);
  font-size:12px; color:rgba(255,255,255,.6);
}
.role-pill .dot{ width:6px;height:6px;border-radius:50%; background:var(--gold); flex:none; }

/* ---------- Topbar ---------- */
.topbar{
  height:var(--topbar-h);
  background:var(--surface);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 26px;
  position:sticky; top:0; z-index:20;
}
.topbar .page-crumb{
  font-size:12.5px; color:var(--ink-faint);
}
.topbar .page-crumb b{ color:var(--ink); font-weight:600; }
.search-box{
  display:flex; align-items:center; gap:8px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:8px 14px;
  width:320px;
  color:var(--ink-faint);
  font-size:13px;
  margin-left:auto;
}
.search-box svg{ width:15px;height:15px; stroke:var(--ink-faint); flex:none; }
.search-box input{
  border:none; background:none; outline:none; flex:1;
  font-family:inherit; font-size:13px; color:var(--ink);
}
.topbar-icon-btn{
  width:36px;height:36px; border-radius:50%;
  border:1px solid var(--line);
  background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative; flex:none;
}
.topbar-icon-btn svg{ width:16px; height:16px; stroke:var(--ink-soft); }
.topbar-icon-btn .ping{
  position:absolute; top:6px; right:7px;
  width:7px;height:7px;border-radius:50%;
  background:var(--gold); border:1.5px solid var(--surface);
}
.avatar-chip{
  display:flex; align-items:center; gap:9px;
  padding:5px 10px 5px 5px;
  border-radius:var(--r-pill);
  border:1px solid var(--line);
  cursor:pointer;
}
.avatar-chip .av{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--cobalt),var(--navy-3));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:700;
}
.avatar-chip .meta{ line-height:1.25; }
.avatar-chip .meta .n{ font-size:12.5px; font-weight:600; }
.avatar-chip .meta .r{ font-size:10.5px; color:var(--ink-faint); }

/* ---------- Content ---------- */
.content{ padding:28px 30px 60px;}
.page-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; margin-bottom:24px; flex-wrap:wrap;
}
.page-head h1{
  font-family:var(--font-display);
  font-size:30px;
  font-weight:600;
  color:var(--navy);
  letter-spacing:-.2px;
}
.page-head .sub{ color:var(--ink-soft); font-size:13.5px; margin-top:4px; max-width:560px; }
.page-head-actions{ display:flex; gap:10px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  font-size:13px; font-weight:600;
  padding:9px 18px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
  white-space:nowrap;
}
.btn svg{ width:14px;height:14px; }
.btn-primary{
  background:linear-gradient(135deg,var(--cobalt) 0%, var(--navy-3) 100%);
  color:#fff; box-shadow:var(--shadow-sm);
}
.btn-primary:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); }
.btn-gold{
  background:linear-gradient(135deg,var(--gold) 0%, #B08A1E 100%);
  color:#fff;
}
.btn-secondary{
  background:var(--surface); color:var(--ink); border-color:var(--line);
}
.btn-secondary:hover{ background:var(--surface-2); }
.btn-ghost{
  background:transparent; color:var(--ink-soft); border-color:transparent;
  padding:8px 12px;
}
.btn-ghost:hover{ background:var(--surface-2); color:var(--ink); }
.btn-danger{
  background:var(--danger-bg); color:var(--danger); border-color:transparent;
}
.btn-danger:hover{ background:#f6d9d7; }
.btn-sm{ padding:6px 13px; font-size:12px; }
.btn-icon{
  width:34px;height:34px; padding:0; border-radius:var(--r-sm);
  background:var(--surface); border:1px solid var(--line); color:var(--ink-soft);
}
.btn-icon:hover{ background:var(--surface-2); color:var(--ink); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

/* ============================================================
   CARDS / SURFACES
   ============================================================ */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
.card-pad{ padding:20px 22px; }
.card-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--line-soft);
}
.card-head h3{ font-size:14.5px; font-weight:700; }
.card-head .hint{ font-size:12px; color:var(--ink-faint); font-weight:500; }

.grid{ display:grid; gap:18px; }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-12{ grid-template-columns:repeat(12,1fr); }
@media(max-width:1200px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }

/* KPI stat card */
.stat-card{
  padding:18px 20px;
  display:flex; flex-direction:column; gap:10px;
  position:relative; overflow:hidden;
}
.stat-card .stat-top{ display:flex; align-items:center; justify-content:space-between; }
.stat-card .stat-icon{
  width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:var(--info-bg); color:var(--cobalt);
}
.stat-card .stat-icon svg{ width:17px;height:17px; }
.stat-card .stat-val{ font-family:var(--font-display); font-size:28px; font-weight:600; color:var(--navy); }
.stat-card .stat-label{ font-size:12.5px; color:var(--ink-soft); font-weight:600; }
.stat-card .stat-delta{ font-size:11.5px; font-weight:700; display:flex; align-items:center; gap:4px; }
.stat-delta.up{ color:var(--success); }
.stat-delta.down{ color:var(--danger); }

/* ============================================================
   BADGES / STATUS
   ============================================================ */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700;
  padding:3.5px 10px;
  border-radius:var(--r-pill);
  letter-spacing:.2px;
  white-space:nowrap;
}
.badge::before{ content:""; width:6px;height:6px;border-radius:50%; background:currentColor; }
.badge-success{ background:var(--success-bg); color:var(--success); }
.badge-danger{ background:var(--danger-bg); color:var(--danger); }
.badge-warn{ background:var(--warn-bg); color:var(--warn); }
.badge-info{ background:var(--info-bg); color:var(--cobalt); }
.badge-neutral{ background:var(--neutral-bg); color:var(--ink-soft); }
.badge-gold{ background:var(--gold-soft); color:#8A6A16; }
.badge-gold::before{ display:none; }

.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; color:var(--ink-soft);
  background:var(--surface-2); border:1px solid var(--line);
  padding:5px 11px; border-radius:var(--r-pill);
}

/* ============================================================
   TABLE
   ============================================================ */
.table-wrap{ overflow-x:auto; }
table.dtable{ width:100%; border-collapse:collapse; font-size:13px; }
.dtable thead th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--ink-faint); font-weight:700;
  padding:12px 16px; border-bottom:1px solid var(--line);
  white-space:nowrap; user-select:none;
}
.dtable thead th.sortable{ cursor:pointer; }
.dtable thead th.sortable:hover{ color:var(--ink-soft); }
.dtable thead th .sort-ico{ opacity:.4; margin-left:3px; font-size:9px; }
.dtable tbody td{
  padding:13px 16px; border-bottom:1px solid var(--line-soft);
  color:var(--ink); vertical-align:middle;
}
.dtable tbody tr{ transition:background .1s ease; }
.dtable tbody tr:hover{ background:var(--surface-2); }
.dtable tbody tr.clickable{ cursor:pointer; }
.dtable td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.cell-primary{ font-weight:700; color:var(--ink); }
.cell-sub{ font-size:11.5px; color:var(--ink-faint); margin-top:1px; }
.cell-people{ display:flex; align-items:center; gap:9px; }
.mini-av{
  width:28px;height:28px;border-radius:50%; flex:none;
  background:linear-gradient(135deg,var(--gold),var(--cobalt));
  color:#fff; font-size:10.5px; font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.row-actions{ display:flex; gap:6px; justify-content:flex-end; }

.table-toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:16px 20px; border-bottom:1px solid var(--line-soft);
}
.table-toolbar .search-box{ width:240px; margin-left:0; }
.filter-select{
  border:1px solid var(--line); background:var(--surface);
  border-radius:var(--r-sm); padding:8px 12px; font-size:12.5px;
  color:var(--ink-soft); font-weight:600; font-family:inherit; cursor:pointer;
}
.table-toolbar .spacer{ margin-left:auto; }
.table-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; font-size:12px; color:var(--ink-faint);
}
.pager{ display:flex; gap:4px; }
.pager button{
  width:28px;height:28px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--surface); color:var(--ink-soft); font-size:12px; cursor:pointer; font-weight:700;
}
.pager button.active{ background:var(--navy); color:#fff; border-color:var(--navy); }
.pager button:hover:not(.active){ background:var(--surface-2); }

.empty-state{
  padding:60px 20px; text-align:center; color:var(--ink-faint);
}
.empty-state .ico{
  width:52px;height:52px;border-radius:16px;margin:0 auto 14px;
  background:var(--surface-2); display:flex;align-items:center;justify-content:center;
  color:var(--ink-faint);
}
.empty-state .ico svg{ width:24px;height:24px; }
.empty-state h4{ color:var(--ink); font-size:14px; margin-bottom:4px; }
.empty-state p{ font-size:12.5px; }

/* ============================================================
   TABS
   ============================================================ */
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); }
.tabs.pill-tabs{ border-bottom:none; background:var(--surface-2); padding:4px; border-radius:var(--r-pill); display:inline-flex; }
.tab-btn{
  padding:10px 16px; font-size:13px; font-weight:600; color:var(--ink-faint);
  border:none; background:none; cursor:pointer; border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.tab-btn:hover{ color:var(--ink); }
.tab-btn.active{ color:var(--cobalt); border-bottom-color:var(--cobalt); }
.pill-tabs .tab-btn{ border-bottom:none; border-radius:var(--r-pill); margin:0; padding:8px 16px; }
.pill-tabs .tab-btn.active{ background:var(--navy); color:#fff; }

.side-tabs{ display:flex; flex-direction:column; gap:2px; }
.side-tab{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:11px 14px; border-radius:var(--r-sm); cursor:pointer;
  font-size:13px; font-weight:600; color:var(--ink-soft);
  border-left:3px solid transparent;
}
.side-tab:hover{ background:var(--surface-2); }
.side-tab.active{ background:var(--info-bg); color:var(--cobalt); border-left-color:var(--cobalt); }
.side-tab .dot-status{ width:6px;height:6px;border-radius:50%; background:var(--ink-faint); flex:none; }
.side-tab .dot-status.edited{ background:var(--gold); }

/* ============================================================
   FORMS
   ============================================================ */
.field{ margin-bottom:16px; }
.field label{
  display:block; font-size:12.5px; font-weight:700; color:var(--ink);
  margin-bottom:6px;
}
.field .field-hint{ font-size:11.5px; color:var(--ink-faint); margin-top:5px; }
.field .field-hint.warn{ color:var(--warn); }
.input, .textarea, .select{
  width:100%; border:1px solid var(--line); border-radius:var(--r-sm);
  padding:10px 13px; font-family:inherit; font-size:13px; color:var(--ink);
  background:var(--surface); outline:none;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.input:focus, .textarea:focus, .select:focus{
  border-color:var(--cobalt-2); box-shadow:0 0 0 3px rgba(47,111,224,.14);
}
.textarea{ resize:vertical; min-height:90px; line-height:1.5; }
.input-row{ display:flex; gap:12px; }
.input-row > *{ flex:1; }
.field-with-count{ position:relative; }
.char-count{ position:absolute; right:0; top:0; font-size:11px; color:var(--ink-faint); }
.char-count.over{ color:var(--danger); font-weight:700; }

.switch{ position:relative; display:inline-block; width:38px; height:22px; flex:none; }
.switch input{ opacity:0; width:0; height:0; }
.switch .track{
  position:absolute; inset:0; background:var(--line); border-radius:var(--r-pill);
  transition:.15s; cursor:pointer;
}
.switch .track::before{
  content:""; position:absolute; width:16px;height:16px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:.15s; box-shadow:var(--shadow-sm);
}
.switch input:checked + .track{ background:var(--cobalt); }
.switch input:checked + .track::before{ transform:translateX(16px); }

.checkbox-row{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-soft); }
.checkbox-row input{ width:16px;height:16px; accent-color:var(--cobalt); }

/* ============================================================
   MODAL / DRAWER
   ============================================================ */
.overlay{
  position:fixed; inset:0; background:rgba(10,17,30,.5);
  backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center;
  z-index:200; opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.overlay.open{ opacity:1; pointer-events:auto; }
.modal{
  background:var(--surface); border-radius:var(--r-lg); width:480px; max-width:92vw;
  max-height:88vh; display:flex; flex-direction:column; box-shadow:var(--shadow-pop);
  transform:translateY(8px) scale(.98); transition:transform .18s ease;
}
.overlay.open .modal{ transform:translateY(0) scale(1); }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); }
.modal-head h3{ font-size:15.5px; font-weight:700; }
.modal-body{ padding:20px 22px; overflow-y:auto; }
.modal-foot{ display:flex; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid var(--line); }
.modal.modal-danger .modal-head{ color:var(--danger); }

.drawer-overlay{
  position:fixed; inset:0; background:rgba(10,17,30,.42);
  z-index:200; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.drawer-overlay.open{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; right:0; height:100vh; width:560px; max-width:94vw;
  background:var(--surface); box-shadow:var(--shadow-pop);
  transform:translateX(100%); transition:transform .22s cubic-bezier(.2,.8,.3,1);
  display:flex; flex-direction:column; z-index:201;
}
.drawer-overlay.open .drawer{ transform:translateX(0); }
.drawer-head{
  padding:20px 24px; border-bottom:1px solid var(--line);
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
}
.drawer-body{ padding:22px 24px; overflow-y:auto; flex:1; }
.drawer-foot{ padding:16px 24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:10px; }

/* ============================================================
   TOAST
   ============================================================ */
.toast-stack{ position:fixed; bottom:22px; right:22px; display:flex; flex-direction:column; gap:10px; z-index:400; }
.toast{
  display:flex; align-items:center; gap:10px;
  background:var(--navy); color:#fff; padding:13px 18px;
  border-radius:var(--r-md); box-shadow:var(--shadow-pop);
  font-size:13px; font-weight:600; min-width:260px;
  animation:toastIn .22s ease;
}
.toast .dot{ width:8px;height:8px;border-radius:50%; background:var(--success); flex:none; }
.toast.error .dot{ background:var(--danger); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

/* ============================================================
   MISC
   ============================================================ */
.divider{ height:1px; background:var(--line); margin:20px 0; }
.text-faint{ color:var(--ink-faint); }
.text-soft{ color:var(--ink-soft); }
.section-title{ font-size:14px; font-weight:700; margin-bottom:14px; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; }
.skeleton{ background:linear-gradient(90deg,var(--line-soft) 25%,var(--line) 37%,var(--line-soft) 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:6px; }
@keyframes sk{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }

.progress-track{ height:6px; border-radius:var(--r-pill); background:var(--line-soft); overflow:hidden; }
.progress-fill{ height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--cobalt),var(--gold)); }

.readonly-banner{
  display:flex; align-items:center; gap:10px;
  background:var(--warn-bg); color:var(--warn); border:1px solid #EAD98F;
  padding:11px 16px; border-radius:var(--r-sm); font-size:12.5px; font-weight:600;
  margin-bottom:18px;
}
.readonly-banner svg{ width:16px;height:16px; flex:none; }

/* scrollbar (subtle) */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:#C9CEDA; border-radius:5px; }
::-webkit-scrollbar-track{ background:transparent; }
.sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); }

@media(max-width:1000px){
  .app-shell{ grid-template-columns:1fr; }
  .sidebar{ display:none; }
}