:root { --fg:#1a1a1a; --muted:#6a7280; --bg:#f9fafb; --line:#e4e7ec;
        --soft:#f3f5f8; --accent:#2a6dc2; --accent-dark:#1e528f;
        --card:#fff; --shadow-sm:0 1px 2px rgba(15,23,42,.04);
        --shadow-md:0 2px 8px rgba(15,23,42,.06);
        --radius:8px; --radius-sm:5px; }
* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
       color:var(--fg); margin:0; line-height:1.5; font-size:14px; background:var(--bg);
       -webkit-font-smoothing:antialiased; }
.layout { display:grid; grid-template-columns: 240px 1fr; min-height:100vh; }
nav.sidebar { position:sticky; top:0; height:100vh; overflow-y:auto;
              background:var(--card); border-right:1px solid var(--line); padding:18px 14px; }
nav.sidebar a { display:block; padding:7px 10px; text-decoration:none; color:var(--fg);
                border-radius:var(--radius-sm); font-size:13px; transition:background .12s, color .12s; }
nav.sidebar a:hover { background:#eaf1fa; color:var(--accent); }
nav.sidebar a.brand { font-weight:700; font-size:16px; margin-bottom:6px; }
.version { display:flex; flex-direction:column; gap:1px; padding:4px 8px 10px;
           font-size:12px; line-height:1.3; }
.version-label { font-size:10px; font-weight:600; letter-spacing:0.06em;
                 color:var(--muted); }
.version code { padding:0; background:transparent; font-size:11.5px; }
nav.sidebar h2 { font-size:12px; text-transform:uppercase; letter-spacing:0.05em;
                 color:var(--muted); margin:16px 0 6px; }
main { padding: 26px 32px 80px; max-width:1300px; }
main.wide { max-width:none; }

/* Links — keep the same blue whether visited or not. */
a, a:visited { color:var(--accent); }
a:hover, a:visited:hover { color:var(--accent-dark); }
h1 { font-size:24px; margin: 0 0 6px; font-weight:600; letter-spacing:-0.01em; }
h2 { font-size:15px; margin: 28px 0 10px; padding:0 0 6px 0;
     border-bottom:1px solid var(--line);
     font-weight:600; color:#222; letter-spacing:-0.005em;
     display:flex; align-items:center; gap:8px; }
h2::before { content:""; width:3px; height:14px; background:var(--accent);
             border-radius:2px; flex:none; }
.subtle { color:var(--muted); font-size:12.5px; }

/* Tables — softer borders, breathing room, hover state */
table { border-collapse: separate; border-spacing:0; width:100%; margin:10px 0 16px;
        font-size:13px; background:var(--card); border:1px solid var(--line);
        border-radius:var(--radius); overflow:hidden; }
th, td { border-bottom:1px solid var(--line); padding:8px 12px;
         text-align:left; vertical-align:middle; }
th:not(:last-child), td:not(:last-child) { border-right:1px solid var(--line); }
tbody tr:last-child td { border-bottom:0; }
th { background:var(--soft); font-weight:600; font-size:12.5px;
     color:#454c56; letter-spacing:0.01em; }
tbody tr { transition:background .12s; }
tbody tr:hover { background:#fafbfd; }
th.sortable { cursor:pointer; user-select:none; }
th.sortable:hover { background:#e7eef8; color:var(--accent); }
th[data-sort-dir] { color:var(--accent); }
.sort-arrow { font-size:10px; opacity:0.7; }
td.num { text-align:right; font-variant-numeric: tabular-nums; }
code { font-family:"SF Mono", Menlo, Consolas, monospace; font-size:12px; background:#f1f3f5;
       padding:1.5px 5px; border-radius:3px; color:#2c3a4a; }

/* Generic card panel for standalone editorial forms / sections */
.panel { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
         padding:14px 18px; margin:8px 0 18px; box-shadow:var(--shadow-sm); }
.panel > *:first-child { margin-top:0; }
.panel > *:last-child  { margin-bottom:0; }
.bar { position:relative; background:#eee; border-radius:3px; height:16px; min-width:90px; }
.bar .fill { background:var(--accent); height:100%; border-radius:3px; }
.bar-label { position:absolute; top:0; left:6px; font-size:11px; line-height:16px;
             color:#fff; font-weight:600;
             text-shadow: 0 0 2px rgba(0,0,0,0.85), 0 1px 1px rgba(0,0,0,0.6); }
.filters { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:12px 0 18px;
           padding:12px 16px; background:var(--card); border:1px solid var(--line);
           border-radius:var(--radius); font-size:13px; box-shadow:var(--shadow-sm); }
.filters select, .filters input { padding:6px 9px; border:1px solid var(--line);
                                   border-radius:var(--radius-sm); font-size:13px;
                                   background:#fff; transition:border-color .12s, box-shadow .12s; }
.filters select:focus, .filters input:focus, form input:focus, form select:focus,
form textarea:focus {
  border-color:var(--accent); outline:none;
  box-shadow:0 0 0 3px rgba(42,109,194,0.14);
}
.filters button, button.btn { padding:6px 14px; background:var(--accent); color:#fff;
                              border:0; border-radius:var(--radius-sm); cursor:pointer;
                              font-size:13px; font-weight:500; transition:background .12s; }
.filters button:hover, button.btn:hover, form button:hover { background:var(--accent-dark); }
.callout { padding:10px 16px; border-radius:var(--radius-sm); margin:12px 0; }
.callout.warn { background:#fff8d8; border:1px solid #e0d590; color:#5a4a00; }
.pill { display:inline-block; padding:2px 9px; background:#eef; color:#225;
        border-radius:10px; font-size:11px; margin-left:4px; font-weight:500; }
.group-pill { display:inline-block; padding:2px 9px; border-radius:10px; font-size:11px;
              font-weight:500; margin:1px 2px; line-height:1.5; }
.group-Shop       { background:#dff2e0; color:#1c5022; }
.group-Enterprise { background:#ffe2d4; color:#8a3a08; }
.group-Telesales  { background:#e6dcfb; color:#3b258a; }
.group-Portal     { background:#d6ecfd; color:#0a4575; }
.group-Admin      { background:#fce7f3; color:#9d174d; }
.group-Anonymous  { background:#eee; color:#444; }
.status-pill { display:inline-block; padding:2px 9px; border-radius:10px;
                font-size:11px; font-weight:500; line-height:1.5; }
.status-ok   { background:#dff2e0; color:#1c5022; }
.status-warn { background:#fff1d4; color:#8a4a08; }
.status-info { background:#d6ecfd; color:#0a4575; }
.status-subtle { background:#eee; color:#444; }
.class-pill { display:inline-block; padding:2px 9px; border-radius:10px;
              font-size:11px; font-weight:500; line-height:1.5; }
.class-hybrid   { background:#ede9fe; color:#5b21b6; }
.class-print    { background:#fde7d7; color:#a04500; }
.class-shipping { background:#d6ecfd; color:#0a4575; }

/* Named-tone pills, used for tenant personas (no industry mapping) */
.tone-slate     { background:#eef0f4; color:#3b4350; }
.tone-blue      { background:#dbeafe; color:#1e40af; }
.tone-indigo    { background:#e0e7ff; color:#3730a3; }
.tone-purple    { background:#ede9fe; color:#5b21b6; }
.tone-teal      { background:#ccfbf1; color:#0f766e; }
.tone-green     { background:#dcfce7; color:#166534; }
.tone-amber     { background:#fef3c7; color:#92400e; }
.tone-orange    { background:#fed7aa; color:#9a3412; }
.tone-rose      { background:#ffe4e6; color:#9f1239; }
.chart-row { display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin:6px 0 12px; }
.chart-row .pie { flex:none; }
.chart-row .legend { display:flex; flex-direction:column; gap:3px; font-size:13px; }
.chart-row .legend-item { display:flex; align-items:center; gap:5px; }
.chart-row .legend-item .swatch {
  display:inline-block; width:11px; height:11px; border-radius:2px; border:1px solid rgba(0,0,0,0.15);
}
.chart-wrap { background:#fff; border:1px solid var(--line); border-radius:6px;
              padding:6px 8px; margin:6px 0 14px; max-width:640px; }
svg.line-chart { display:block; width:100%; height:auto; }
.kv { display:grid; grid-template-columns:170px 1fr; gap:10px 18px; font-size:13px; margin:14px 0 18px;
      background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
      padding:12px 16px; box-shadow:var(--shadow-sm); }
.kv dt { color:var(--muted); font-weight:500; align-self:start; padding-top:1px; }
.kv dd { margin:0; }
form input:not([type=checkbox]):not([type=radio]),
form select, form textarea {
  font-size:13px; padding:6px 9px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:#fff;
  transition:border-color .12s, box-shadow .12s;
}
form label { display:inline-block; margin-right:14px; line-height:1.7; }
form button { padding:6px 14px; background:var(--accent); color:#fff; border:0;
              border-radius:var(--radius-sm); cursor:pointer; font-size:13px;
              font-weight:500; transition:background .12s; }
ul { padding-left: 18px; }
.feature-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
                   gap:10px; margin:16px 0 14px; }
.feature-summary .stat { border:1px solid var(--line); border-radius:var(--radius);
                         padding:12px 14px; background:var(--card);
                         box-shadow:var(--shadow-sm);
                         transition:box-shadow .12s, transform .12s; }
.feature-summary .stat:hover { box-shadow:var(--shadow-md); }
.feature-summary .stat .v { font-size:22px; font-weight:600; line-height:1.1;
                            font-variant-numeric:tabular-nums; }
.feature-summary .stat .l { color:var(--muted); font-size:10.5px; text-transform:uppercase;
                            letter-spacing:0.05em; margin-top:5px; }
.summary-table { width:auto; min-width:50%; }
.mermaid-wrap { background:#fff; border:1px solid var(--line); border-radius:6px;
                padding:0; margin:10px 0; overflow:hidden; }
.mermaid { font-size:12px; }
.mermaid svg { display:block; }
.mermaid-legend { display:flex; flex-wrap:wrap; gap:14px; padding:8px 12px; margin:4px 0;
                  background:#fafbfc; border:1px solid var(--line); border-radius:5px;
                  font-size:12px; align-items:center; }
.legend-item { display:inline-flex; align-items:center; gap:4px; }
.legend-item .dot { display:inline-block; width:12px; height:12px; border-radius:3px;
                    border:1px solid var(--line); }
.dot-root     { background:#d6ecfd; border-color:#0a4575; }
.dot-internal { background:#f5f7fa; border-color:#a0a8b0; }
.dot-alive    { background:#dff2e0; border-color:#1c5022; }
.dot-dead     { background:#fdecea; border-color:#c34d3a; }

/* Proposal page */
.finding-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
                gap:10px; margin:14px 0 22px; }
.finding { background:#fff; border:1px solid var(--line); border-radius:6px;
           padding:14px 16px; }
.finding .big { font-size:26px; font-weight:700; color:var(--accent); line-height:1; }
.finding .lab { color:var(--muted); font-size:12px; margin:5px 0 8px; }
.mock-side-by-side { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:12px 0; }
.mock { background:#fff; border:1px solid var(--line); border-radius:6px; padding:14px 18px; }
.mock-h { font-weight:600; padding-bottom:6px; border-bottom:1px solid var(--line);
          margin-bottom:8px; font-size:13px; color:var(--muted); text-transform:uppercase;
          letter-spacing:0.05em; }
.mock ul { list-style:none; padding-left:0; margin:0; }
.mock ul li { padding:3px 0; font-size:13px; }
.mock.current ul li { color:#666; }
.mock.proposed li.primary { font-weight:600; font-size:14.5px; color:#222; padding:5px 0; }
.mock.proposed ul.secondary { margin-top:12px; border-top:1px dashed var(--line); padding-top:8px; }
.mock.proposed ul.secondary li { color:#888; font-size:13px; }
.kbd { display:inline-block; padding:0 5px; border:1px solid var(--line); border-bottom-width:2px;
       border-radius:3px; font-family:"SF Mono",monospace; font-size:11px;
       color:var(--muted); margin-left:6px; background:#fafbfc; }
.today-mock { background:#fafbfc; border:1px solid var(--line); border-radius:8px;
              padding:18px 20px; margin:14px 0; }
.today-header { display:flex; justify-content:space-between; align-items:center; gap:16px;
                margin-bottom:14px; flex-wrap:wrap; }
.today-header .title { font-size:18px; font-weight:600; }
.today-header .search-bar { flex:1; min-width:300px; padding:9px 14px;
                            background:#fff; border:1px solid var(--line); border-radius:18px;
                            color:var(--muted); }
.today-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
               gap:10px; }
.today-cards .card { background:#fff; border:1px solid var(--line); border-radius:6px;
                     padding:12px 14px; min-height:90px; }
.today-cards .card.big { grid-column:span 2; border-left:3px solid #c34d3a; }
.today-cards .card-h { font-weight:600; font-size:13.5px; margin-bottom:6px; }
.today-cards .card ul { padding-left:18px; margin:0; font-size:13px; }
@media (max-width: 800px) {
  .mock-side-by-side { grid-template-columns:1fr; }
  .today-cards .card.big { grid-column:span 1; }
}

/* Quick Create dropdown in Today header mock */
.quick-create { position:relative; }
.qc-btn { background:var(--accent); color:#fff; padding:9px 18px; border-radius:18px;
          font-weight:600; font-size:14px; cursor:pointer; }
.qc-btn .kbd { background:rgba(255,255,255,0.18); border-color:rgba(255,255,255,0.35);
               color:#fff; }
.qc-menu { position:absolute; right:0; top:calc(100% + 6px); background:#fff;
           border:1px solid var(--line); border-radius:8px; padding:8px 0;
           min-width:220px; box-shadow:0 6px 18px rgba(0,0,0,0.08); z-index:10;
           font-size:13px; }
.qc-menu .qc-section { padding:6px 14px 2px; font-size:11px; font-weight:600;
                       text-transform:uppercase; letter-spacing:0.05em;
                       color:var(--muted); }
.qc-menu ul { list-style:none; margin:0 0 6px; padding:0; }
.qc-menu ul li { padding:6px 14px; display:flex; justify-content:space-between;
                 align-items:center; cursor:pointer; }
.qc-menu ul li:hover { background:#f0f5fc; color:var(--accent); }

/* App-frame mock (sidebar layout illustration) */
.app-frame { display:grid; grid-template-columns:220px 28px 1fr; gap:0;
             border:1px solid var(--line); border-radius:8px; overflow:hidden;
             background:#fff; margin:10px 0; min-height:340px; }
.app-frame .app-side { background:#f5f7fa; border-right:1px solid var(--line); padding:14px 12px; }
.app-frame .brand { font-weight:700; font-size:15px; margin-bottom:14px; color:#0a4575; }
.app-frame .nav-section { font-size:10px; font-weight:600; text-transform:uppercase;
                          color:var(--muted); letter-spacing:0.06em; margin:12px 4px 4px; }
.app-frame .nav-item { padding:7px 10px; border-radius:5px; font-size:13.5px; color:#222;
                       margin:1px 0; cursor:pointer; }
.app-frame .nav-item:hover { background:#e7eef8; color:var(--accent); }
.app-frame .nav-item.active { background:#d6ecfd; color:#0a4575; font-weight:600; }
.app-frame .nav-section.utility { color:#999; font-weight:normal; text-transform:none;
                                  letter-spacing:0; padding:8px 10px; border-top:1px solid var(--line);
                                  margin-top:14px; font-size:12px; }
.app-frame .app-side-arrow { display:flex; align-items:center; justify-content:center;
                             color:var(--accent); font-size:18px; background:#fafbfc; }
.app-frame .app-stage { padding:36px 28px; font-size:13px; }

/* Hub-page mock */
.hub-mock { background:#fff; border:1px solid var(--line); border-radius:8px;
            padding:18px 22px; margin:10px 0; }
.hub-h { display:flex; justify-content:space-between; align-items:center; gap:14px;
         flex-wrap:wrap; margin-bottom:10px; }
.hub-title { font-size:18px; font-weight:600; }
.hub-actions { display:flex; gap:8px; }
.qc-btn.small { padding:5px 12px; font-size:12.5px; border-radius:14px; }
.qc-btn.ghost { background:#fff; color:var(--accent); border:1px solid var(--accent); }
.hub-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:6px 0 14px;
            overflow-x:auto; flex-wrap:wrap; }
.hub-tab { padding:7px 14px; border-bottom:2px solid transparent; cursor:pointer;
           font-size:13px; color:var(--muted); white-space:nowrap; }
.hub-tab:hover { color:var(--accent); }
.hub-tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
.hub-tab .pill { font-size:10px; padding:0 6px; }
.hub-body { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
            gap:10px; }
.hub-card { background:var(--soft); border:1px solid var(--line); border-radius:6px;
            padding:12px 14px; }
.persona-compare { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:10px 0; }
.persona { border:1px solid var(--line); border-radius:6px; padding:14px 18px; background:#fff; }
.persona-h { font-weight:600; font-size:15px; margin-bottom:8px; padding-bottom:6px;
             border-bottom:1px solid var(--line); }
.persona ul { font-size:13px; padding-left:18px; }
table.compact td, table.compact th { padding:4px 8px; font-size:12.5px; }
@media (max-width: 800px) {
  .persona-compare { grid-template-columns:1fr; }
}
.snapshot-controls { display:flex; align-items:center; gap:12px; padding:12px 14px;
                     background:var(--soft); border:1px solid var(--line); border-radius:6px;
                     margin:10px 0 14px; }
.snapshot-controls form { display:inline; }
pre.log { background:#1e2127; color:#e0e3e8; padding:10px 14px; border-radius:5px;
          font-family:"SF Mono", Menlo, monospace; font-size:12px; max-height:280px;
          overflow:auto; white-space:pre-wrap; }
a.toggle-deleted { color:var(--accent); text-decoration:none; padding:2px 7px;
                   border:1px solid var(--line); border-radius:4px; font-size:12px; }
a.toggle-deleted:hover { background:#e7eef8; }
tr.deleted-user { background:#fff5f5; }
tr.deleted-user td { color:#a04500; }
tr.deleted-user td:first-child::before { content:"✕ "; color:#c34d3a; }
.diff-panel { border:1px solid var(--line); border-radius:6px; padding:12px 14px;
              margin:12px 0; background:#fafbfc; }
.diff-panel h3 { margin:0 0 8px; font-size:14px; }
.diff-rows { display:flex; flex-wrap:wrap; gap:18px; margin:6px 0 10px; font-size:14px; }
.diff-list { font-size:13px; margin:6px 0; padding-left:18px; }
.delta { display:inline-block; padding:1px 8px; border-radius:9px;
         font-size:11px; font-weight:600; margin-left:4px; }
.delta-up    { background:#dff2e0; color:#1c5022; }
.delta-down  { background:#fdecea; color:#a04500; }
.delta-zero  { background:#eee; color:#666; }

/* Sidebar session / logout box */
.session-box { margin-top:18px; padding:10px; border-top:1px solid var(--line);
               font-size:12px; }
.session-box .role-pill { display:inline-block; padding:1px 7px; border-radius:9px;
               font-size:10px; font-weight:600; text-transform:uppercase;
               background:#eaf1fa; color:var(--accent); margin-left:2px; }
.session-box form { margin-top:8px; }
.session-box button { font-size:12px; padding:5px 10px; cursor:pointer;
               color:var(--fg); background:var(--soft); border:1px solid var(--line);
               border-radius:var(--radius-sm); }
.session-box button:hover { background:#eaf1fa; color:var(--accent); }