/* ============================================================
   SentiQ design system — "Signal Desk"
   Editorial-meets-instrumentation: newsprint calm, monospace
   numbers, and a tricolor sentiment ribbon as the signature.
   Every page in the product inherits these tokens.
   ============================================================ */

   @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

   :root {
     /* palette */
     --paper: #F6F7F9;
     --surface: #FFFFFF;
     --ink: #101828;
     --ink-soft: #5B6472;
     --line: #E3E7EC;
     --brand: #0E5E63;          /* deep teal — monitoring, calm authority */
     --brand-tint: #E3F0F0;
     --pos: #1E7F4F;
     --neu: #8A8F98;
     --neg: #B4432F;
   
     /* type */
     --font-display: "Fraunces", Georgia, serif;
     --font-body: "Inter", system-ui, sans-serif;
     --font-data: "IBM Plex Mono", ui-monospace, monospace;
   
     /* rhythm */
     --radius: 10px;
     --shadow: 0 1px 2px rgba(16,24,40,.05), 0 8px 24px -12px rgba(16,24,40,.12);
     --gap: 24px;
   }
   
   * { box-sizing: border-box; }
   html { -webkit-font-smoothing: antialiased; }
   body {
     margin: 0;
     background: var(--paper);
     color: var(--ink);
     font-family: var(--font-body);
     font-size: 15px;
     line-height: 1.55;
   }
   
   h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 .4em; }
   h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.15; }
   h2 { font-size: 22px; }
   h3 { font-size: 17px; }
   p  { margin: 0 0 1em; color: var(--ink-soft); }
   a  { color: var(--brand); text-decoration: none; }
   a:hover { text-decoration: underline; }
   
   /* signature: sentiment ribbon — a thin tricolor bar whose segment
      widths encode positive/neutral/negative share. Reused on cards,
      page headers, and table rows across the product. */
   .ribbon { display: flex; height: 4px; border-radius: 2px; overflow: hidden; }
   .ribbon .r-pos { background: var(--pos); }
   .ribbon .r-neu { background: var(--neu); }
   .ribbon .r-neg { background: var(--neg); }
   
   /* layout shell */
   .shell { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
   
   .topbar {
     background: var(--surface);
     border-bottom: 1px solid var(--line);
   }
   .topbar .shell { display: flex; align-items: center; justify-content: space-between; height: 60px; }
   .logo { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink); }
   .logo em { color: var(--brand); font-style: normal; }
   .nav a { color: var(--ink-soft); margin-left: 20px; font-weight: 500; font-size: 14px; }
   .nav a:hover { color: var(--ink); text-decoration: none; }
   
   /* cards */
   .card {
     background: var(--surface);
     border: 1px solid var(--line);
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     padding: 20px;
   }
   .card + .card { margin-top: var(--gap); }
   .card-eyebrow {
     font-family: var(--font-data);
     font-size: 11px;
     text-transform: uppercase;
     letter-spacing: .08em;
     color: var(--ink-soft);
     margin-bottom: 6px;
   }
   
   /* data — numbers are always monospace */
   .metric { font-family: var(--font-data); font-size: 30px; font-weight: 500; }
   .metric.pos { color: var(--pos); }
   .metric.neg { color: var(--neg); }
   .badge {
     font-family: var(--font-data); font-size: 11px; padding: 2px 8px;
     border-radius: 999px; border: 1px solid var(--line);
   }
   .badge.pos { color: var(--pos); background: #EAF5EF; border-color: #CBE7D8; }
   .badge.neu { color: var(--ink-soft); background: #F1F2F4; }
   .badge.neg { color: var(--neg); background: #F9ECE9; border-color: #ECCFC7; }
   
   /* buttons & forms */
   .btn {
     display: inline-block; padding: 9px 18px; border-radius: 8px;
     font-weight: 600; font-size: 14px; cursor: pointer; border: 1px solid transparent;
   }
   .btn-primary { background: var(--brand); color: #fff; }
   .btn-primary:hover { background: #0B4D51; text-decoration: none; }
   .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
   .btn-ghost:hover { border-color: var(--ink-soft); text-decoration: none; }
   
   .field { margin-bottom: 16px; }
   .field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
   .lbl { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
   .field input, .field select {
     width: 100%; padding: 10px 12px; border: 1px solid var(--line);
     border-radius: 8px; font: inherit; background: var(--surface);
   }
   .field input:focus, .field select:focus, .btn:focus-visible, a:focus-visible {
     outline: 2px solid var(--brand); outline-offset: 2px;
   }
   
   /* tables */
   table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
   table.data th {
     text-align: left; font-family: var(--font-data); font-size: 11px;
     text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft);
     border-bottom: 1px solid var(--line); padding: 10px 12px;
   }
   table.data td { padding: 12px; border-bottom: 1px solid var(--line); }
   table.data tr:hover td { background: var(--brand-tint); }
   
   /* grid helpers */
   .grid { display: grid; gap: var(--gap); }
   .grid-3 { grid-template-columns: repeat(3, 1fr); }
   @media (max-width: 800px) { .grid-3 { grid-template-columns: 1fr; } }
   
   @media (prefers-reduced-motion: reduce) {
     * { animation: none !important; transition: none !important; }
   }
   
   /* ===== additions: auth layout, icon buttons, validation ===== */
   .auth-wrap { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; }
   .auth-brand {
     background: linear-gradient(160deg, #0B4D51, var(--brand) 55%, #147A80);
     color: #EAF4F4; padding: 56px; display: flex; flex-direction: column; justify-content: space-between;
   }
   .auth-brand .logo { color: #fff; font-size: 24px; }
   .auth-brand .logo em { color: #9FD8DB; }
   .auth-brand h1 { color: #fff; max-width: 420px; }
   .auth-brand p { color: #C7E3E4; max-width: 400px; }
   .auth-panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--paper); }
   .auth-card { width: 100%; max-width: 380px; }
   @media (max-width: 860px) { .auth-wrap { grid-template-columns: 1fr; } .auth-brand { display: none; } }
   
   .field .error-text { display: none; color: var(--neg); font-size: 12px; margin-top: 5px; }
   .field.invalid .error-text { display: block; }
   .field.invalid input, .field.invalid select { border-color: var(--neg); }
   .server-error { color: var(--neg); font-size: 12px; margin-top: 5px; }
   
   .toast { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px;
     background: #EAF5EF; color: var(--pos); border: 1px solid #CBE7D8; }
   .toast.error { background: #F9ECE9; color: var(--neg); border-color: #ECCFC7; }
   
   .icon-btn {
     display: inline-flex; align-items: center; justify-content: center;
     width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line);
     background: var(--surface); cursor: pointer; color: var(--ink-soft); vertical-align: middle;
   }
   .icon-btn:hover { color: var(--brand); border-color: var(--brand); text-decoration: none; }
   .icon-btn.danger:hover { color: var(--neg); border-color: var(--neg); }
   .icon-btn svg { width: 15px; height: 15px; }
   .row-actions { display: flex; gap: 8px; }
   
   .page-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
   .chip { display:inline-block; font-family: var(--font-data); font-size: 11px; background: var(--brand-tint); color: var(--brand); padding: 3px 9px; border-radius: 999px; margin: 2px 4px 2px 0; }
   .empty { text-align:center; padding: 40px 20px; color: var(--ink-soft); }
   
   /* ===== additions: sidebar shell + dark mode ===== */
   :root {
     --sidebar-bg: #0F2E30;
     --sidebar-ink: #C9DCDC;
     --sidebar-active: rgba(255,255,255,.09);
   }
   [data-theme="dark"] {
     --paper: #101418;
     --surface: #171C22;
     --ink: #E7EBF0;
     --ink-soft: #9AA4B0;
     --line: #262D36;
     --brand: #35A7AD;
     --brand-tint: #14343660;
     --pos: #4CC38A; --neu: #7A828C; --neg: #E5715A;
     --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.5);
     --sidebar-bg: #0C1214;
   }
   [data-theme="dark"] .badge.pos { background:#15291f; border-color:#1f4030; }
   [data-theme="dark"] .badge.neu { background:#1d2229; }
   [data-theme="dark"] .badge.neg { background:#2e1b16; border-color:#4a2a21; }
   [data-theme="dark"] .toast { background:#15291f; border-color:#1f4030; }
   [data-theme="dark"] .toast.error { background:#2e1b16; border-color:#4a2a21; }
   body { transition: background .2s ease, color .2s ease; }
   
   /* app shell with left sidebar */
   .app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
   .sidebar {
     background: var(--sidebar-bg); color: var(--sidebar-ink);
     display: flex; flex-direction: column; padding: 20px 14px;
     position: sticky; top: 0; height: 100vh;
     overflow: hidden;   /* the nav region scrolls, not the whole column */
   }
   /* The scrolling region: everything between the logo and the footer.
      min-height:0 is load-bearing — without it a flex child refuses to
      shrink below its content height and nothing scrolls at all.
      Scrolling this instead of .sidebar means the footer sits outside the
      scroll area entirely and can never overlap the last nav item. */
   .side-scroll {
     flex: 1 1 auto; min-height: 0; overflow-y: auto;
     overscroll-behavior: contain;   /* don't scroll the page at either end */
     margin: 0 -14px; padding: 0 14px;   /* bleed the scrollbar to the edge */
     scrollbar-width: thin;
     scrollbar-color: rgba(255,255,255,.22) transparent;
   }
   /* Slim, dark-friendly scrollbar. The browser default is a light track
      that reads as a rendering fault against the dark sidebar. */
   .side-scroll::-webkit-scrollbar { width: 8px; }
   .side-scroll::-webkit-scrollbar-track { background: transparent; }
   .side-scroll::-webkit-scrollbar-thumb {
     background: rgba(255,255,255,.18); border-radius: 999px;
     border: 2px solid transparent; background-clip: content-box;
   }
   .side-scroll::-webkit-scrollbar-thumb:hover {
     background: rgba(255,255,255,.34); background-clip: content-box;
   }
   .sidebar .logo { color: #fff; font-size: 20px; padding: 4px 10px 18px; display:block; }
   .sidebar .logo em { color: #7FD2D6; }
   .side-label {
     font-family: var(--font-data); font-size: 10px; letter-spacing: .1em;
     text-transform: uppercase; opacity: .55; padding: 14px 10px 6px;
   }
   .side-nav a {
     display: flex; align-items: center; gap: 10px;
     color: var(--sidebar-ink); padding: 9px 10px; border-radius: 8px;
     font-size: 14px; font-weight: 500; margin-bottom: 2px;
   }
   .side-nav a svg { width: 16px; height: 16px; opacity: .8; }
   .side-nav a:hover { background: var(--sidebar-active); color: #fff; text-decoration: none; }
   .side-nav a.active { background: var(--sidebar-active); color: #fff; }
   /* Outside the scroll area, so it is always visible and never covers the
      nav. flex-shrink:0 keeps it at full height when the nav is long. */
   .side-foot {
     flex: 0 0 auto; border-top: 1px solid rgba(255,255,255,.08); padding-top: 14px;
     background: var(--sidebar-bg);
   }
   .side-user { padding: 0 10px 12px; font-size: 12px; line-height: 1.4; }
   .side-user b { color: #fff; display: block; font-size: 13px; }
   .btn-logout {
     display: flex; align-items: center; gap: 10px; width: 100%;
     background: transparent; border: 1px solid rgba(255,255,255,.14); color: var(--sidebar-ink);
     padding: 9px 10px; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
   }
   .btn-logout:hover { background: var(--sidebar-active); color: #fff; }
   .btn-logout svg { width: 16px; height: 16px; }
   
   .main { padding: 32px 36px 64px; min-width: 0; }
   
   /* theme slide toggle */
   .theme-row { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 12px; font-size: 13px; }
   .switch { position: relative; width: 42px; height: 23px; flex-shrink: 0; }
   .switch input { opacity: 0; width: 0; height: 0; }
   .slider {
     position: absolute; inset: 0; border-radius: 999px; cursor: pointer;
     background: rgba(255,255,255,.18); transition: background .2s;
   }
   .slider::before {
     content: "☀"; display: grid; place-items: center; font-size: 11px;
     position: absolute; height: 17px; width: 17px; left: 3px; top: 3px;
     border-radius: 50%; background: #fff; color: #B8860B; transition: transform .2s;
   }
   .switch input:checked + .slider { background: var(--brand); }
   .switch input:checked + .slider::before { transform: translateX(19px); content: "☾"; color: #33415C; }
   .switch input:focus-visible + .slider { outline: 2px solid #fff; outline-offset: 2px; }
   
   @media (max-width: 860px) {
     .app { grid-template-columns: 1fr; }
     /* On mobile the sidebar stacks above the content and grows to fit, so
        it scrolls with the page — an inner scroll area would trap the nav
        in a short box instead. */
     .sidebar { position: static; height: auto; overflow: visible; }
     .side-scroll { overflow-y: visible; min-height: 0; margin: 0; padding: 0; }
     .main { padding: 20px 16px 48px; }
   }
   
   /* ============================================================
      v2 polish pass — enterprise finish: anchored page headers,
      motion, table toolbars, pagination.
      ============================================================ */
   
   /* motion primitives */
   @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
   .main > * { animation: rise .35s ease both; }
   .main > *:nth-child(2) { animation-delay: .05s; }
   .main > *:nth-child(3) { animation-delay: .1s; }
   .main > *:nth-child(4) { animation-delay: .15s; }
   
   .card { transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
   .card.lift:hover { transform: translateY(-2px); box-shadow: 0 4px 6px rgba(16,24,40,.05), 0 16px 32px -12px rgba(16,24,40,.18); }
   .btn { transition: background .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease; }
   .btn:active { transform: scale(.98); }
   .btn-primary:hover { box-shadow: 0 4px 12px -2px rgba(14,94,99,.4); }
   .icon-btn { transition: color .15s ease, border-color .15s ease, background .15s ease, transform .1s ease; }
   .icon-btn:hover { background: var(--brand-tint); }
   .icon-btn.danger:hover { background: #F9ECE9; }
   [data-theme="dark"] .icon-btn.danger:hover { background: #2e1b16; }
   .side-nav a { transition: background .15s ease, color .15s ease, padding-left .15s ease; }
   .side-nav a:hover { padding-left: 14px; }
   table.data td { transition: background .12s ease; }
   input, select { transition: border-color .15s ease, box-shadow .15s ease; }
   input[type="text"], input[type="email"], input[type="password"], input[type="search"],
   input[type="date"], input[type="url"], input[type="number"], input[type="tel"],
   select, textarea {
     width: 100%; padding: 10px 12px; border: 1px solid var(--line);
     border-radius: 8px; font: inherit; font-size: 14px; background: var(--surface); color: var(--ink);
   }
   input:focus, select:focus, textarea:focus {
     border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(14,94,99,.12);
   }
   .field input:focus, .field select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(14,94,99,.12); outline: none; }
   
   /* anchored page header — no more floating titles */
   .page-header {
     background: var(--surface);
     border-bottom: 1px solid var(--line);
     margin: -32px -36px 28px;             /* bleed to main edges */
     padding: 22px 36px 20px;
     position: sticky; top: 0; z-index: 20;
   }
   .page-header .crumbs {
     font-family: var(--font-data); font-size: 11px; letter-spacing: .06em;
     text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px;
   }
   .page-header .crumbs a { color: var(--ink-soft); }
   .page-header .crumbs a:hover { color: var(--brand); text-decoration: none; }
   .page-header .crumbs span::before { content: "/"; margin: 0 7px; opacity: .5; }
   .page-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
   .page-header h1 { margin: 0; font-size: clamp(22px, 3vw, 28px); }
   @media (max-width: 860px) { .page-header { margin: -20px -16px 20px; padding: 16px; } }
   
   /* table toolbar: search */
   .table-toolbar {
     display: flex; align-items: center; justify-content: space-between;
     gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
   }
   .search-box { position: relative; flex: 1; max-width: 320px; }
   .search-box svg {
     position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
     width: 15px; height: 15px; color: var(--ink-soft); pointer-events: none;
   }
   .search-box input {
     width: 100%; padding: 8px 12px 8px 34px; border: 1px solid var(--line);
     border-radius: 8px; font: inherit; font-size: 13px; background: var(--paper); color: var(--ink);
   }
   .search-box input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(14,94,99,.12); outline: none; }
   .table-count { font-family: var(--font-data); font-size: 12px; color: var(--ink-soft); }
   
   /* pagination */
   .pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
   .pagination-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
   .page-links { display: flex; gap: 6px; }
   .page-links a, .page-links span {
     min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
     padding: 0 8px; border: 1px solid var(--line); border-radius: 7px;
     font-family: var(--font-data); font-size: 12.5px; color: var(--ink-soft);
     transition: border-color .15s ease, color .15s ease, background .15s ease;
   }
   .page-links a:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
   .page-links .current { background: var(--brand); border-color: var(--brand); color: #fff; }
   .per-page-select { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-soft); }
   .per-page-select select {
     width: auto; padding: 4px 8px; font-size: 12px; height: 30px; border: 1px solid var(--line);
     border-radius: 6px; background: var(--paper); color: var(--ink);
   }
   .page-links .disabled { opacity: .4; pointer-events: none; }
   
   /* ajax tables */
   [data-ajax-table] { position: relative; }
   [data-ajax-table].ajax-loading { opacity: .55; pointer-events: none; transition: opacity .12s ease; }
   
   tr.hidden-row { display: none; }
   
   /* ===== searchable select + animated messages ===== */
   .lp-select { position: relative; margin-bottom: 4px; }
   .lp-control {
     display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
     min-height: 42px; padding: 5px 10px; cursor: text;
     border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
     transition: border-color .15s ease, box-shadow .15s ease;
   }
   .lp-select.open .lp-control { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(14,94,99,.12); }
   .lp-chips { display: contents; }
   .lp-chip {
     display: inline-flex; align-items: center; gap: 5px;
     background: var(--brand-tint); color: var(--brand);
     font-size: 13px; font-weight: 500; padding: 3px 6px 3px 10px; border-radius: 999px;
     animation: chipIn .18s ease;
   }
   @keyframes chipIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
   .lp-chip button {
     border: 0; background: transparent; color: inherit; cursor: pointer;
     font-size: 14px; line-height: 1; padding: 2px 4px; border-radius: 50%;
   }
   .lp-chip button:hover { background: rgba(0,0,0,.08); }
   .lp-search { border: 0; outline: 0; flex: 1; min-width: 90px; font: inherit; font-size: 14px; background: transparent; color: var(--ink); padding: 4px 2px; }
   .lp-menu {
     position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0;
     background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
     box-shadow: var(--shadow); max-height: 240px; overflow: auto; padding: 5px;
     animation: menuIn .16s ease;
   }
   @keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
   .lp-option { padding: 9px 11px; border-radius: 7px; font-size: 14px; cursor: pointer; transition: background .12s ease; }
   .lp-option:hover { background: var(--brand-tint); color: var(--brand); }
   .lp-empty { padding: 12px; font-size: 13px; color: var(--ink-soft); text-align: center; }
   
   /* animated toasts */
   .toast {
     display: flex; align-items: center; gap: 10px;
     animation: toastIn .35s cubic-bezier(.21,1.02,.55,1) both;
   }
   .toast.auto-hide { animation: toastIn .35s cubic-bezier(.21,1.02,.55,1) both, toastOut .4s ease 4.5s both; }
   @keyframes toastIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
   @keyframes toastOut { to { opacity: 0; transform: translateY(-8px); height: 0; margin: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; } }
   
   /* invalid field shake */
   .field.invalid input, .lp-select.invalid .lp-control { animation: shake .3s ease; }
   @keyframes shake {
     25% { transform: translateX(-4px); } 50% { transform: translateX(4px); }
     75% { transform: translateX(-3px); } 100% { transform: none; }
   }
   
   /* ===== searchable combobox ===== */
   .combo { position: relative; }
   .combo select { display: none; }
   .combo-input {
     width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
     font: inherit; background: var(--surface); color: var(--ink);
     transition: border-color .15s ease, box-shadow .15s ease;
   }
   .combo-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(14,94,99,.12); outline: none; }
   .combo-list {
     position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40;
     background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
     box-shadow: var(--shadow); max-height: 220px; overflow: auto;
     opacity: 0; transform: translateY(-4px); pointer-events: none;
     transition: opacity .15s ease, transform .15s ease;
   }
   .combo.open .combo-list { opacity: 1; transform: none; pointer-events: auto; }
   .combo-item { padding: 9px 12px; cursor: pointer; font-size: 14px; transition: background .1s ease; }
   .combo-item:hover { background: var(--brand-tint); }
   .combo-item.none { color: var(--ink-soft); cursor: default; }
   .combo-item.none:hover { background: transparent; }
   .combo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
   .combo-chips:not(:empty) { margin-bottom: 8px; }
   .combo-chip {
     display: inline-flex; align-items: center; gap: 6px;
     background: var(--brand-tint); color: var(--brand);
     font-size: 13px; font-weight: 500; padding: 4px 6px 4px 10px; border-radius: 999px;
     animation: rise .2s ease both;
   }
   .combo-chip button {
     border: 0; background: transparent; color: inherit; font-size: 15px;
     cursor: pointer; line-height: 1; padding: 0 4px; border-radius: 50%;
   }
   .combo-chip button:hover { background: rgba(0,0,0,.08); }
   
   /* ===== animated toast stack ===== */
   .toast-stack {
     position: fixed; top: 18px; right: 18px; z-index: 100;
     display: flex; flex-direction: column; gap: 10px; max-width: 360px;
   }
   .toast-stack .toast {
     position: relative; margin: 0; padding-right: 38px; overflow: hidden;
     box-shadow: var(--shadow);
     animation: toast-in .3s cubic-bezier(.21,1.02,.73,1) both;
   }
   .toast-stack .toast.leaving { animation: toast-out .25s ease both; }
   @keyframes toast-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
   @keyframes toast-out { to { opacity: 0; transform: translateX(40px); } }
   .toast-bar {
     position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
     background: currentColor; opacity: .35; transform-origin: left;
     animation: toast-life linear both;
   }
   @keyframes toast-life { from { transform: scaleX(1); } to { transform: scaleX(0); } }
   .toast-close {
     position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
     border: 0; background: transparent; color: inherit; font-size: 16px;
     cursor: pointer; border-radius: 6px; line-height: 1;
   }
   .toast-close:hover { background: rgba(0,0,0,.08); }
   
   /* ===== searchable combobox (single + multi) ===== */
   .combo { position: relative; }
   .combo-control {
     display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
     min-height: 42px; padding: 6px 10px; cursor: text;
     border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
     transition: border-color .15s ease, box-shadow .15s ease;
   }
   .combo.open .combo-control, .combo-control:focus-within {
     border-color: var(--brand); box-shadow: 0 0 0 3px rgba(14,94,99,.12);
   }
   .combo-control input {
     flex: 1; min-width: 120px; border: none; outline: none; background: transparent;
     font: inherit; font-size: 14px; color: var(--ink); padding: 4px 2px;
   }
   .combo-chip {
     display: inline-flex; align-items: center; gap: 6px;
     background: var(--brand-tint); color: var(--brand);
     font-size: 12.5px; font-weight: 600; padding: 3px 6px 3px 10px; border-radius: 999px;
     animation: chipIn .18s ease;
   }
   @keyframes chipIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
   .combo-chip button {
     border: none; background: transparent; color: inherit; cursor: pointer;
     font-size: 13px; line-height: 1; padding: 2px 4px; border-radius: 50%;
   }
   .combo-chip button:hover { background: rgba(14,94,99,.15); }
   .combo-menu {
     position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
     background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
     box-shadow: var(--shadow); max-height: 240px; overflow-y: auto; display: none;
     animation: rise .18s ease;
   }
   .combo.open .combo-menu { display: block; }
   .combo-option { padding: 9px 14px; cursor: pointer; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
   .combo-option:hover, .combo-option.hover { background: var(--brand-tint); }
   .combo-option.selected { color: var(--brand); font-weight: 600; }
   .combo-option.disabled { opacity: .45; cursor: not-allowed; }
   .combo-option .why { font-size: 11px; font-family: var(--font-data); color: var(--ink-soft); }
   .combo-empty { padding: 12px 14px; font-size: 13px; color: var(--ink-soft); }
   
   /* ===== animated toast stack ===== */
   .toast-stack {
     position: fixed; top: 18px; right: 18px; z-index: 100;
     display: flex; flex-direction: column; gap: 10px; max-width: 380px;
   }
   .toast-stack .toast {
     margin: 0; box-shadow: var(--shadow); display: flex; align-items: start; gap: 10px;
     animation: toastIn .3s cubic-bezier(.21,1.02,.73,1) both;
     position: relative; overflow: hidden; padding-bottom: 15px;
   }
   @keyframes toastIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
   .toast-stack .toast.leaving { animation: toastOut .25s ease both; }
   @keyframes toastOut { to { opacity: 0; transform: translateX(24px); } }
   .toast .close {
     border: none; background: transparent; cursor: pointer; color: inherit;
     font-size: 15px; line-height: 1; padding: 0 2px; margin-left: auto;
   }
   .toast .bar {
     position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
     background: currentColor; opacity: .35; transform-origin: left;
     animation: toastBar 4.5s linear forwards;
   }
   @keyframes toastBar { to { transform: scaleX(0); } }
   @media (max-width: 600px) { .toast-stack { left: 12px; right: 12px; max-width: none; } }
   
   /* ============================================================
      v3 — professional form language & refined surfaces
      ============================================================ */
   
   /* refined type scale */
   body { font-size: 14.5px; letter-spacing: .002em; }
   h1 { letter-spacing: -0.015em; }
   h3 { font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: -0.005em; }
   
   /* cards get breathing room + optional header strip */
   .card { padding: 24px; }
   .card-header {
     display: flex; align-items: center; justify-content: space-between; gap: 12px;
     margin: -24px -24px 20px; padding: 16px 24px;
     border-bottom: 1px solid var(--line);
   }
   .card-header h3 { margin: 0; }
   .card-header .hint { font-size: 12.5px; color: var(--ink-soft); }
   
   /* form language: quiet uppercase labels, tall calm inputs */
   .field label {
     font-family: var(--font-data); font-size: 11px; font-weight: 500;
     text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft);
     margin-bottom: 7px;
   }
   .field input, .field select, .field textarea {
     height: 44px; padding: 0 14px; font-size: 14.5px;
     background: var(--paper); border: 1px solid var(--line); border-radius: 9px;
   }
   .field textarea { height: auto; padding: 12px 14px; }
   .field input:hover, .field select:hover { border-color: #C9CFD7; }
   [data-theme="dark"] .field input:hover { border-color: #333B46; }
   .field input:focus, .field select:focus { background: var(--surface); }
   .combo-control { min-height: 44px; background: var(--paper); border-radius: 9px; }
   .combo.open .combo-control, .combo-control:focus-within { background: var(--surface); }
   .field .hint { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }
   
   /* two-column form grid + footer row */
   .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
   .form-grid .span-2 { grid-column: 1 / -1; }
   @media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
   .form-section {
     font-family: var(--font-data); font-size: 11px; letter-spacing: .09em;
     text-transform: uppercase; color: var(--brand);
     display: flex; align-items: center; gap: 12px; margin: 6px 0 14px;
   }
   .form-section::after { content: ""; flex: 1; height: 1px; background: var(--line); }
   .btn-row {
     display: flex; justify-content: flex-end; gap: 10px;
     margin: 20px -24px -24px; padding: 16px 24px;
     border-top: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 55%, var(--surface));
     border-radius: 0 0 var(--radius) var(--radius);
   }
   
   /* password affix (show/hide) */
   .affix { position: relative; }
   .affix input { padding-right: 44px; width: 100%; }
   .affix .eye {
     position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
     width: 34px; height: 34px; display: grid; place-items: center;
     border: none; background: transparent; cursor: pointer; color: var(--ink-soft); border-radius: 7px;
   }
   .affix .eye:hover { color: var(--brand); background: var(--brand-tint); }
   .affix .eye svg { width: 17px; height: 17px; }
   
   /* people table avatars */
   .avatar {
     width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center;
     background: var(--brand-tint); color: var(--brand);
     font-family: var(--font-data); font-size: 12px; font-weight: 600; flex-shrink: 0;
   }
   .cell-person { display: flex; align-items: center; gap: 11px; }
   .cell-person small { display: block; color: var(--ink-soft); font-size: 12px; }
   
   table.data th { padding: 11px 16px; }
   table.data td { padding: 13px 16px; }
   
   /* stat chips in page header */
   .head-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
   .head-meta .chip { margin: 0; }
   
   /* ============================================================
      v4 — status system, table refinement, sharper hierarchy
      ============================================================ */
   table.data thead th {
     background: color-mix(in srgb, var(--paper) 65%, var(--surface));
     border-bottom: 1px solid var(--line);
   }
   table.data tbody tr:last-child td { border-bottom: none; }
   
   /* status pill with dot */
   .pill {
     display: inline-flex; align-items: center; gap: 6px;
     font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
     border: 1px solid var(--line);
   }
   .pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
   .pill.on  { color: var(--pos); background: #EAF5EF; border-color: #CBE7D8; }
   .pill.on::before { background: var(--pos); box-shadow: 0 0 0 3px rgba(30,127,79,.15); }
   .pill.off { color: var(--ink-soft); background: var(--paper); }
   .pill.off::before { background: var(--neu); }
   [data-theme="dark"] .pill.on { background: #15291f; border-color: #1f4030; }
   [data-theme="dark"] .pill.off { background: #1d2229; }
   
   tr.row-muted td { opacity: .55; }
   tr.row-muted:hover td { opacity: .8; }
   
   .icon-btn.on { color: var(--pos); }
   .icon-btn.on:hover { border-color: var(--pos); background: #EAF5EF; }
   [data-theme="dark"] .icon-btn.on:hover { background: #15291f; }
   
   /* results-under-form section */
   .below-results { margin-top: 28px; }
   .below-results .card { padding: 0; }
   
   /* ===== modal confirm dialog ===== */
   .modal-overlay {
     position: fixed; inset: 0; z-index: 200;
     background: rgba(10,14,18,.45); backdrop-filter: blur(3px);
     display: grid; place-items: center; padding: 20px;
     animation: fadeIn .18s ease;
   }
   @keyframes fadeIn { from { opacity: 0; } }
   .modal {
     width: 100%; max-width: 420px;
     background: var(--surface); border: 1px solid var(--line);
     border-radius: 14px; box-shadow: 0 24px 64px -16px rgba(10,14,18,.4);
     animation: modalIn .22s cubic-bezier(.21,1.02,.73,1);
     overflow: hidden;
   }
   @keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
   .modal-body { padding: 24px; }
   .modal-icon {
     width: 42px; height: 42px; border-radius: 50%;
     display: grid; place-items: center; margin-bottom: 14px;
   }
   .modal-icon.danger { background: #F9ECE9; color: var(--neg); }
   .modal-icon.ok { background: #EAF5EF; color: var(--pos); }
   [data-theme="dark"] .modal-icon.danger { background: #2e1b16; }
   [data-theme="dark"] .modal-icon.ok { background: #15291f; }
   .modal-icon svg { width: 20px; height: 20px; }
   .modal h3 { margin: 0 0 6px; font-size: 16px; }
   .modal p { margin: 0; font-size: 14px; }
   .modal-actions {
     display: flex; justify-content: flex-end; gap: 10px;
     padding: 14px 24px; border-top: 1px solid var(--line);
     background: color-mix(in srgb, var(--paper) 55%, var(--surface));
   }
   .btn-danger { background: var(--neg); color: #fff; }
   .btn-danger:hover { background: #9C3826; box-shadow: 0 4px 12px -2px rgba(180,67,47,.4); }
   
   /* ===== dashboard v2 polish ===== */
   .chart-box { position: relative; height: 260px; }
   .chart-box.tall { height: 300px; }
   .kpi-card { position: relative; overflow: hidden; }
   .kpi-card::after {
     content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
     background: linear-gradient(90deg, var(--brand), transparent 70%);
     opacity: 0; transition: opacity .25s ease;
   }
   .kpi-card:hover::after { opacity: 1; }
   .kpi-delta { font-family: var(--font-data); font-size: 12px; margin-top: 4px; }
   .donut-wrap { position: relative; }
   .donut-center {
     position: absolute; inset: 0; display: grid; place-items: center;
     pointer-events: none; text-align: center; transform: translateY(-14px);
   }
   .donut-center .n { font-family: var(--font-data); font-size: 26px; font-weight: 500; }
   .donut-center .l { font-size: 11px; color: var(--ink-soft); font-family: var(--font-data); text-transform: uppercase; letter-spacing: .07em; }
   .legend-row { display: flex; justify-content: center; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--ink-soft); }
   .legend-row span::before { content: "●"; margin-right: 5px; }
   .legend-row .lp::before { color: var(--pos); } .legend-row .ln::before { color: var(--neu); } .legend-row .lg::before { color: var(--neg); }
   
   /* ===== dashboard v2 polish ===== */
   .kpi-card { position: relative; overflow: hidden; }
   .kpi-card::after {
     content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
     background: linear-gradient(90deg, var(--brand), transparent 70%);
     opacity: 0; transition: opacity .25s ease;
   }
   .kpi-card:hover::after { opacity: 1; }
   .kpi-delta { font-family: var(--font-data); font-size: 12px; margin-top: 6px; color: var(--ink-soft); }
   
   .chart-card { display: flex; flex-direction: column; }
   .chart-wrap { position: relative; flex: 1; min-height: 220px; }
   .chart-wrap canvas { position: absolute; inset: 0; }
   .chart-fallback {
     position: absolute; inset: 0; display: none; place-items: center;
     color: var(--ink-soft); font-size: 13px; text-align: center; padding: 20px;
   }
   .chart-wrap.failed .chart-fallback { display: grid; }
   .chart-wrap.failed canvas { display: none; }
   
   .donut-center {
     position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
   }
   .donut-center .big { font-family: var(--font-data); font-size: 26px; font-weight: 600; }
   .donut-center small { display: block; text-align: center; color: var(--ink-soft); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
   
   .legend-chips { display: flex; gap: 14px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
   .legend-chips span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); font-family: var(--font-data); }
   .legend-chips i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
   
   @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
   
   @media (max-width: 1000px) {
     .grid.kpis { grid-template-columns: repeat(2, 1fr) !important; }
     .grid.charts, .grid.split { grid-template-columns: 1fr !important; }
   }
   /* ============================================================
      ADD TO: static/css/app.css
      Sub-navigation for tracked competitors, nested under the
      Competitors sidebar item.
      ============================================================ */
      .side-sub {
       display: flex;
       flex-direction: column;
       margin: 2px 0 6px 0;
     }
     .side-sub-link {
       padding: 6px 12px 6px 44px;
       font-size: 12.5px;
       color: var(--ink-soft);
       border-radius: 8px;
       text-decoration: none;
       transition: background .12s ease, color .12s ease;
     }
     .side-sub-link:hover {
       background: var(--surface);
       color: var(--ink);
       text-decoration: none;
     }
     .side-sub-link.active {
       background: var(--brand-tint, rgba(15,118,110,.12));
       color: var(--brand);
       font-weight: 600;
     }