/* ============================================================
   PME Analytics OS — design tokens
   ============================================================ */

:root{
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Palette du site PME Analytics (new site/index.html) */
  --bg: #f9f7f3;
  --bg-elevated: #ffffff;
  --bg-sidebar: #f9f7f3;
  --bg-hover: #f2efe9;
  --bg-active: #e8f0ec;
  --bg-input: #ffffff;
  --bg-code: #f2efe9;

  --border: #e2ded8;
  --border-strong: #cfc9be;

  --text-primary: #0f1117;
  --text-secondary: #6b7280;
  --text-tertiary: #96938a;
  --text-on-accent: #ffffff;

  --accent: #2a6049;
  --accent-hover: #4a8a6a;
  --accent-soft: #e8f0ec;
  --accent-soft-border: #cfe3d7;

  --warm: #c9622a;
  --warm-soft: #fdf1ea;
  --green: #4a8a6a;
  --green-soft: #e8f0ec;
  --red: #b3543f;
  --red-soft: #f8ece7;
  --amber: #c9622a;
  --amber-soft: #fdf1ea;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(15,17,23,0.04);
  --shadow-md: 0 4px 16px rgba(15,17,23,0.07);
  --shadow-lg: 0 12px 40px rgba(15,17,23,0.14);

  --sidebar-w: 260px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 56px;

  color-scheme: light;
}

html[data-theme="dark"]{
  --bg: #0f1117;
  --bg-elevated: #171a21;
  --bg-sidebar: #0f1117;
  --bg-hover: #1d212a;
  --bg-active: #1a2b24;
  --bg-input: #171a21;
  --bg-code: #1a1d24;

  --border: #262b35;
  --border-strong: #383f4d;

  --text-primary: #f5f4f1;
  --text-secondary: #a8a79f;
  --text-tertiary: #74736c;
  --text-on-accent: #0f1117;

  --accent: #93c5a8;
  --accent-hover: #a8d4bb;
  --accent-soft: #1d2b24;
  --accent-soft-border: #33473d;

  --warm: #e08a5c;
  --warm-soft: #3a2a20;
  --green: #7fbf9c;
  --green-soft: #16261e;
  --red: #d4776a;
  --red-soft: #331f1c;
  --amber: #e08a5c;
  --amber-soft: #3a2a20;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.55);

  color-scheme: dark;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text-primary);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background .15s ease, color .15s ease;
}
h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
ul,ol{ padding-left:1.15em; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
::selection{ background:var(--accent-soft-border); }

/* scrollbars */
*{ scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:8px; }
*::-webkit-scrollbar-track{ background:transparent; }

/* ============================================================
   Shell layout
   ============================================================ */

#shell{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height:100vh;
  transition:grid-template-columns .18s ease;
}
#shell.collapsed{ grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

#sidebar{
  background:var(--bg-sidebar);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  height:100vh;
  position:sticky;
  top:0;
  overflow:hidden;
}

.sidebar-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 14px 10px;
  gap:8px;
}
.brand{ display:flex; align-items:center; gap:9px; min-width:0; }
.brand-mark{
  flex:none;
  width:28px; height:28px;
  border-radius:8px;
  background:linear-gradient(135deg, var(--accent), var(--accent-hover));
  color:var(--text-on-accent);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:11.5px; letter-spacing:.02em;
}
.brand-name{
  font-weight:700; font-size:14.5px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.brand-name em{ color:var(--accent); font-style:normal; font-weight:800; }

.icon-btn{
  border:none; background:transparent; color:var(--text-secondary);
  width:28px; height:28px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex:none;
  transition:background .12s ease, color .12s ease;
}
.icon-btn:hover{ background:var(--bg-hover); color:var(--text-primary); }
#shell.collapsed #collapseBtn svg{ transform:rotate(180deg); }

.search-trigger{
  margin:6px 12px 10px;
  display:flex; align-items:center; gap:8px;
  padding:8px 10px;
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-tertiary);
  font-size:12.5px;
  cursor:pointer;
  transition:border-color .12s ease, background .12s ease;
}
.search-trigger:hover{ border-color:var(--border-strong); background:var(--bg-hover); }
.search-trigger span{ flex:1; text-align:left; white-space:nowrap; overflow:hidden; }
.search-trigger kbd{
  font-family:inherit; font-size:10.5px; color:var(--text-tertiary);
  background:var(--bg-code); border:1px solid var(--border);
  border-radius:4px; padding:1px 5px;
}
#shell.collapsed .search-trigger span,
#shell.collapsed .search-trigger kbd{ display:none; }
#shell.collapsed .search-trigger{ justify-content:center; }

.nav{
  flex:1; overflow-y:auto; padding:4px 10px 10px;
}
.nav-group{ margin-bottom:2px; }
.nav-group-header{
  display:flex; align-items:center; gap:9px;
  width:100%; border:none; background:transparent; cursor:pointer;
  padding:7px 8px; border-radius:7px;
  color:var(--text-secondary);
  font-size:12.5px; font-weight:600; letter-spacing:.01em;
  text-transform:uppercase;
  transition:background .12s ease, color .12s ease;
}
.nav-group-header:hover{ background:var(--bg-hover); color:var(--text-primary); }
.nav-group-header .chev{ margin-left:auto; transition:transform .15s ease; opacity:.6; }
.nav-group.open .nav-group-header .chev{ transform:rotate(90deg); }
.nav-group-icon{
  flex:none; width:18px; height:18px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-tertiary);
}
.nav-group-icon svg{ display:block; width:16px; height:16px; }
.nav-group-header:hover .nav-group-icon, .nav-top-link:hover .nav-group-icon{ color:var(--text-primary); }
.nav-top-link.active .nav-group-icon{ color:var(--accent); }

.nav-items{
  overflow:hidden;
  max-height:0;
  transition:max-height .18s ease;
}
.nav-group.open .nav-items{ max-height:600px; }

.nav-link{
  position:relative;
  display:flex; align-items:center; gap:8px;
  padding:6.5px 10px 6.5px 30px;
  border-radius:7px;
  color:var(--text-secondary);
  font-size:13px;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background .12s ease, color .12s ease;
}
.nav-link:hover{ background:var(--bg-hover); color:var(--text-primary); }
.nav-link.active{ background:var(--bg-active); color:var(--accent); font-weight:600; }
.nav-link.active::before{
  content:''; position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:3px; height:14px; border-radius:2px; background:var(--accent);
}

.nav-top-link{
  position:relative;
  display:flex; align-items:center; gap:9px;
  padding:7px 8px; border-radius:7px;
  color:var(--text-secondary); font-size:13.5px; font-weight:500;
  cursor:pointer; margin-bottom:2px;
}
.nav-top-link:hover{ background:var(--bg-hover); color:var(--text-primary); }
.nav-top-link.active{ background:var(--bg-active); color:var(--accent); font-weight:600; }
.nav-top-link .nav-group-icon{ flex:none; }

#shell.collapsed .nav-group-header span:not(.chev):not(.nav-group-icon),
#shell.collapsed .nav-group-header .chev,
#shell.collapsed .nav-items,
#shell.collapsed .nav-top-link span:not(.nav-group-icon){ display:none; }
#shell.collapsed .nav-top-link, #shell.collapsed .nav-group-header{ justify-content:center; }
#shell.collapsed .nav-group-icon{ width:auto; height:auto; }

.sidebar-bottom{
  border-top:1px solid var(--border);
  padding:10px 12px 14px;
}
.theme-toggle{ width:100%; justify-content:flex-start; gap:8px; padding:7px 8px; }
.theme-toggle .icon-moon{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-moon{ display:block; }
.theme-label{ font-size:12.5px; color:var(--text-secondary); }
.consultant{ margin-top:8px; font-size:11px; color:var(--text-tertiary); padding:0 8px; }
.sign-out-link{
  display:block; border:none; background:transparent; cursor:pointer;
  font-size:11px; color:var(--text-tertiary); padding:4px 8px 0; text-align:left;
  font-family:inherit;
}
.sign-out-link:hover{ color:var(--red); text-decoration:underline; }
#shell.collapsed .theme-label, #shell.collapsed .consultant, #shell.collapsed .sign-out-link{ display:none; }
#shell.collapsed .theme-toggle{ justify-content:center; }

/* ============================================================
   Main / topbar
   ============================================================ */

#main{ min-width:0; display:flex; flex-direction:column; }
#topbar{
  height:var(--topbar-h);
  display:flex; align-items:center; gap:10px;
  padding:0 22px;
  border-bottom:1px solid var(--border);
  background:var(--bg-elevated);
  position:sticky; top:0; z-index:5;
}
.breadcrumb{ font-size:12.5px; color:var(--text-tertiary); }
.breadcrumb b{ color:var(--text-primary); font-weight:600; }
.mobile-only{ display:none; }
.topbar-search-btn{ margin-left:auto; }

.view{ padding:28px 32px 64px; max-width:1080px; width:100%; margin:0 auto; }

#mobileOverlay{
  display:none; position:fixed; inset:0; z-index:50;
  background:rgba(10,10,14,.35);
}

/* ============================================================
   Typography blocks
   ============================================================ */

.page-eyebrow{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.page-title{ font-size:32px; font-weight:800; letter-spacing:-.015em; margin-bottom:8px; color:var(--text-primary); }
.page-subtitle{ font-size:15px; color:var(--text-secondary); max-width:640px; margin-bottom:28px; }
.section-title{ font-size:22px; font-weight:700; margin:36px 0 14px; letter-spacing:-.005em; color:var(--text-primary); }
.section-title:first-of-type{ margin-top:0; }
.subsection-title{ font-size:13px; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.04em; margin:0 0 8px; }

/* ============================================================
   Cards / grids
   ============================================================ */

.card{
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:18px 20px;
  box-shadow:var(--shadow-sm);
}
.card + .card{ margin-top:12px; }
.card-title{ font-size:14.5px; font-weight:700; margin-bottom:4px; display:flex; align-items:center; gap:8px; color:var(--text-primary); }
.card-meta{ font-size:12px; color:var(--text-tertiary); }
.card-icon{
  flex:none; width:26px; height:26px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent);
}
.card-icon svg{ width:15px; height:15px; display:block; }
.card.accent-green .card-icon{ background:var(--green-soft); color:var(--green); }
.card.accent-warm .card-icon{ background:var(--warm-soft); color:var(--warm); }
.card.accent-blue, .card.accent-green, .card.accent-warm{ border-top:2.5px solid var(--accent); }
.card.accent-green{ border-top-color:var(--green); }
.card.accent-warm{ border-top-color:var(--warm); }

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

.kpi-card{
  position:relative; overflow:hidden;
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:16px 18px;
  box-shadow:var(--shadow-sm);
  transition:border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.kpi-card::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--accent); opacity:.55;
}
.kpi-card:hover{ border-color:var(--border-strong); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.kpi-card:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.kpi-label{ font-size:12px; color:var(--text-tertiary); font-weight:600; text-transform:uppercase; letter-spacing:.03em; margin-bottom:8px; }
.kpi-value-row{ display:flex; align-items:baseline; gap:6px; }
.kpi-value{ font-size:24px; font-weight:800; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.kpi-unit{ font-size:12.5px; color:var(--text-tertiary); }
.kpi-input{
  width:100%; border:none; background:transparent; color:var(--text-primary);
  font-size:24px; font-weight:800; font-family:inherit; letter-spacing:-.01em;
  padding:0; outline:none; font-variant-numeric:tabular-nums;
}
.kpi-input:focus{ color:var(--accent); }
.kpi-card .kpi-edit-hint{ font-size:10.5px; color:var(--text-tertiary); margin-top:6px; }
.kpi-progress{ height:4px; border-radius:999px; background:var(--bg-code); margin-top:10px; overflow:hidden; }
.kpi-progress-fill{ height:100%; border-radius:999px; background:var(--accent); transition:width .3s ease; }
.kpi-progress-label{ font-size:10.5px; color:var(--text-tertiary); margin-top:5px; }

.link-card{
  display:block;
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:16px 18px;
  cursor:pointer;
  text-decoration:none;
  transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.link-card:hover{ border-color:var(--accent-soft-border); box-shadow:var(--shadow-md); transform:translateY(-1px); }
.link-card-title{ font-size:14.5px; font-weight:700; margin-bottom:4px; display:flex; align-items:center; gap:9px; color:var(--text-primary);}
.link-card-desc{ font-size:12.5px; color:var(--text-secondary); }
.link-card-icon{
  flex:none; width:26px; height:26px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent);
}
.link-card-icon svg{ width:15px; height:15px; display:block; }

/* ============================================================
   Badges / tags / pills
   ============================================================ */

.badge{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600; padding:2.5px 8px;
  border-radius:999px; white-space:nowrap;
  background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-soft-border);
}
.badge.green{ background:var(--green-soft); color:var(--green); border-color:transparent; }
.badge.warm{ background:var(--warm-soft); color:var(--warm); border-color:transparent; }
.badge.red{ background:var(--red-soft); color:var(--red); border-color:transparent; }
.badge.amber{ background:var(--amber-soft); color:var(--amber); border-color:transparent; }
.badge.neutral{ background:var(--bg-code); color:var(--text-secondary); border-color:var(--border); }

.tag-row{ display:flex; flex-wrap:wrap; gap:6px; }

.pill-list{ list-style:none; padding:0; display:flex; flex-direction:column; gap:6px; }
.pill-list li{
  padding:8px 12px; background:var(--bg-code); border-radius:var(--radius-sm);
  font-size:13px;
}

.callout{
  display:flex; gap:10px;
  padding:13px 15px;
  border-radius:var(--radius-md);
  border:1px solid var(--accent-soft-border);
  background:var(--accent-soft);
  font-size:13px; color:var(--text-primary);
  margin:14px 0;
}
.callout.warn{ background:var(--amber-soft); border-color:transparent; }
.callout.warn strong{ color:var(--amber); }
.callout-icon{ flex:none; font-size:15px; line-height:1.3; }

/* ============================================================
   Tables
   ============================================================ */

.table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-elevated); }
table{ width:100%; border-collapse:collapse; font-size:13px; min-width:480px; }
th{
  text-align:left; padding:10px 14px; font-weight:600; font-size:12px;
  color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.03em;
  border-bottom:1px solid var(--border); background:var(--bg-code);
  white-space:nowrap;
}
td{ padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:top; }
tr:last-child td{ border-bottom:none; }
tr:hover td{ background:var(--bg-hover); }

/* ============================================================
   Diagrams
   ============================================================ */

.diagram-figure{
  margin:18px 0 30px;
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:18px 14px 12px;
}
.diagram-figure svg{
  width:100%; height:auto; display:block;
  color:var(--text-tertiary);
  font-family:var(--font);
}
.diagram-figure figcaption{
  font-size:12px; color:var(--text-tertiary); text-align:center; margin-top:6px;
}

.diagram-node-box{ fill:var(--bg-code); stroke:var(--border-strong); stroke-width:1.3; }
.diagram-node-box.incomplete{ fill:var(--amber-soft); stroke:var(--amber); stroke-dasharray:4 3; }
.diagram-node-badge{ fill:var(--accent); }
.diagram-node-badge.large{ fill:var(--bg-elevated); stroke:var(--accent); stroke-width:2; }
.diagram-node-num{ fill:var(--text-on-accent); font-size:12px; font-weight:800; }
.diagram-node-badge.large + .diagram-node-num{ fill:var(--accent); }
.diagram-node-text{ fill:var(--text-primary); font-size:12.5px; font-weight:700; }
.diagram-stepper-label{ fill:var(--text-secondary); font-size:11px; font-weight:600; }
.diagram-arrow{ stroke:var(--border-strong); stroke-width:1.6; fill:none; color:var(--border-strong); }
.diagram-arrow-loop{ stroke:var(--accent); stroke-width:1.5; stroke-dasharray:4 3; fill:none; color:var(--accent); opacity:.85; }
.diagram-loop-label{ fill:var(--accent); font-size:11.5px; font-weight:700; }
.diagram-node-link{ cursor:pointer; }
.diagram-node-link .diagram-node-box{ transition:fill .12s ease, stroke .12s ease; }
.diagram-node-link:hover .diagram-node-box{ fill:var(--accent-soft); stroke:var(--accent); }
.diagram-node-link:hover .diagram-node-text{ fill:var(--accent); }

.diagram-funnel-bar{ fill:var(--accent-soft); stroke:var(--accent-soft-border); stroke-width:1.2; }
.diagram-funnel-bar.final{ fill:var(--accent); stroke:var(--accent); }
.diagram-funnel-text{ fill:var(--text-primary); font-size:12px; font-weight:600; }
.diagram-funnel-text.final{ fill:var(--text-on-accent); font-weight:700; }

/* ============================================================
   Definition blocks (offer / irritant / process detail)
   ============================================================ */

.detail-header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  margin-bottom:6px; flex-wrap:wrap;
}
.field-block{ margin-bottom:18px; }
.field-label{ font-size:11.5px; font-weight:700; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.field-value{ font-size:14px; color:var(--text-primary); }
.field-value ul{ margin:0; padding-left:1.2em; display:flex; flex-direction:column; gap:4px; }

.price-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.price-chip{
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:9px 14px; background:var(--bg-code); min-width:140px;
}
.price-chip .p-label{ font-size:11.5px; color:var(--text-tertiary); margin-bottom:2px; }
.price-chip .p-amount{ font-size:15px; font-weight:700; color:var(--green); }

.step-list{ display:flex; flex-direction:column; gap:0; }
.step-item{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--border); }
.step-item:last-child{ border-bottom:none; }
.step-num{
  flex:none; width:28px; height:28px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-soft-border);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px;
}
.step-body{ flex:1; }
.step-title{ font-weight:700; font-size:14px; margin-bottom:4px; }

.accordion-item{ border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:10px; overflow:hidden; background:var(--bg-elevated); }
.accordion-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; cursor:pointer; user-select:none;
}
.accordion-head:hover{ background:var(--bg-hover); }
.accordion-head .chev{ transition:transform .15s ease; opacity:.6; flex:none; }
.accordion-item.open .accordion-head .chev{ transform:rotate(90deg); }
.accordion-body{ max-height:0; overflow:hidden; transition:max-height .2s ease; }
.accordion-item.open .accordion-body{ max-height:2000px; }
.accordion-body-inner{ padding:2px 16px 18px; }

/* ============================================================
   Diagnostic assistant
   ============================================================ */

.input{
  width:100%; border:1px solid var(--border); border-radius:8px;
  padding:8px 10px; font-family:inherit; font-size:13px;
  background:var(--bg-input); color:var(--text-primary); outline:none;
}
.input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
textarea.input{ resize:vertical; }
.form-actions{ margin-top:4px; }

.diagnostic-input{
  width:100%; min-height:180px; resize:vertical;
  border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--bg-input); color:var(--text-primary);
  font-family:inherit; font-size:13.5px; padding:14px 16px; line-height:1.6;
  outline:none;
}
.diagnostic-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

.btn{
  display:inline-flex; align-items:center; gap:7px;
  border:none; border-radius:var(--radius-sm);
  background:var(--accent); color:var(--text-on-accent);
  font-size:13px; font-weight:600; font-family:inherit;
  padding:9px 16px; cursor:pointer;
  transition:background .12s ease, transform .1s ease;
}
.btn:hover{ background:var(--accent-hover); }
.btn:active{ transform:scale(.98); }
.btn.secondary{ background:var(--bg-code); color:var(--text-primary); border:1px solid var(--border); }
.btn.secondary:hover{ background:var(--bg-hover); }

.result-cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:22px; }
@media(max-width:760px){ .result-cols{ grid-template-columns:1fr; } }
.result-col-title{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text-secondary); margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.match-item{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:8px; font-size:13px; }
.match-item .match-score{ font-size:11px; color:var(--text-tertiary); }
.empty-state{ font-size:13px; color:var(--text-tertiary); padding:14px; background:var(--bg-code); border-radius:var(--radius-sm); }

/* ============================================================
   Search modal
   ============================================================ */

.search-modal{
  position:fixed; inset:0; z-index:100;
  background:rgba(10,10,14,0.4);
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:12vh;
  backdrop-filter:blur(2px);
}
.search-modal[hidden]{ display:none; }
.search-panel{
  width:min(600px, 92vw);
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  max-height:70vh;
  display:flex; flex-direction:column;
}
.search-input-row{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--border);
  color:var(--text-tertiary); flex:none;
}
.search-input-row input{
  flex:1; border:none; outline:none; background:transparent;
  font-family:inherit; font-size:15px; color:var(--text-primary);
}
.search-input-row kbd{
  font-size:11px; color:var(--text-tertiary); background:var(--bg-code);
  border:1px solid var(--border); border-radius:4px; padding:2px 6px;
}
.search-results{ overflow-y:auto; padding:8px; }
.search-group{ margin-bottom:6px; }
.search-group-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-tertiary); padding:8px 10px 4px; }
.search-result{
  display:flex; flex-direction:column; gap:2px;
  padding:9px 10px; border-radius:7px; cursor:pointer;
}
.search-result:hover, .search-result.active{ background:var(--bg-hover); }
.search-result-title{ font-size:13.5px; font-weight:600; }
.search-result-desc{ font-size:12px; color:var(--text-tertiary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search-empty{ padding:26px 14px; text-align:center; color:var(--text-tertiary); font-size:13px; }

/* ============================================================
   Misc / print / responsive
   ============================================================ */

.hr{ height:1px; background:var(--border); margin:22px 0; border:none; }

.printable .print-hide{ }
@media print{
  #sidebar, #topbar, .print-hide{ display:none !important; }
  #shell{ display:block; }
  .view{ max-width:none; padding:0; }
  body{ background:#fff; color:#000; }
}

.chip-list{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ padding:6px 12px; background:var(--bg-code); border-radius:999px; font-size:12.5px; border:1px solid var(--border); }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media(max-width:760px){ .two-col{ grid-template-columns:1fr; } }

.empty-collection{
  border:1.5px dashed var(--border-strong); border-radius:var(--radius-md);
  padding:36px 20px; text-align:center; color:var(--text-tertiary); font-size:13.5px;
}

@media(max-width:880px){
  #shell{ grid-template-columns:1fr; }
  #sidebar{
    position:fixed; left:0; top:0; bottom:0; z-index:60;
    width:var(--sidebar-w);
    transform:translateX(-100%);
    transition:transform .18s ease;
    box-shadow:var(--shadow-lg);
  }
  #shell.mobile-open #sidebar{ transform:translateX(0); }
  #shell.collapsed{ grid-template-columns:1fr; }
  #collapseBtn{ display:none; }
  .mobile-only{ display:flex; }
  #shell.mobile-open #mobileOverlay{ display:block; }
  .view{ padding:20px 16px 48px; }
}

.fade-in{ animation:fadeIn .18s ease; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:translateY(0);} }