/* Extracted from admin.html (L18 pass-5) */
html[data-fp-gating="1"] body { visibility: hidden; }
    .admin-shell { max-width: 1400px; margin: 0 auto; padding: 24px 20px 64px; }
    .admin-h { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:8px; flex-wrap:wrap; }
    .admin-h h1 { margin:0; font-size:1.6rem; }
    .admin-tabs { display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--c-border); margin:16px 0 24px; }
    .admin-tab { padding:10px 16px; background:none; border:none; cursor:pointer; font-size:.92rem; color:var(--c-muted); border-bottom:2px solid transparent; margin-bottom:-1px; }
    .admin-tab[aria-selected="true"] { color:var(--c-text); border-bottom-color:var(--c-accent); font-weight:600; }
    .admin-tab:hover { color:var(--c-text); }
    .admin-section { display:none; }
    .admin-section.active { display:block; }
    .stat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; margin-bottom:24px; }
    .stat-card { background:var(--c-bg); border:1px solid var(--c-border); border-radius:8px; padding:14px 16px; border-left:4px solid var(--c-border); }
    .stat-card .label { font-size:.74rem; color:var(--c-muted); text-transform:uppercase; letter-spacing:.06em; }
    .stat-card .value { font-size:1.5rem; font-weight:700; margin-top:4px; }
    .stat-card .sub   { font-size:.78rem; color:var(--c-muted); margin-top:2px; }
    /* Category accents — subtle left border keeps the cards visually
       grouped (revenue, engagement, deliverability, etc.) without
       feeling like a dashboard from 2008. (#1 — 2026-05-07) */
    .stat-card--rev      { border-left-color:#16a34a; }
    .stat-card--users    { border-left-color:#3b82f6; }
    .stat-card--signup   { border-left-color:#8b5cf6; }
    .stat-card--engage   { border-left-color:#f59e0b; }
    .stat-card--deliver  { border-left-color:#ef4444; }
    .stat-card--consent  { border-left-color:#06b6d4; }
    .stat-card--churn    { border-left-color:#ef4444; }
    .stat-card--trial    { border-left-color:#fbbf24; }
    .filter-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
    /* Compact inputs + selects matching the rest of the site. Each
       cell is fixed-width (no flex-grow) so the whole bar fits one
       row at typical desktop widths and the dropdowns don't balloon
       when there's space (#2 — 2026-05-07).
       !important is unfortunate but necessary because the global
       style.css's `select` element rule has higher specificity than
       a class selector and was overriding the compact size. */
    .admin-shell .filter-bar input,
    .admin-shell .filter-bar select {
      padding: 5px 9px !important;
      border: 1px solid var(--c-border) !important;
      border-radius: 6px !important;
      background: var(--c-bg) !important;
      color: var(--c-text) !important;
      font-size: .82rem !important;
      height: 30px !important;
      line-height: 1.2 !important;
      box-sizing: border-box !important;
      flex: 0 0 auto !important;
      margin: 0 !important;
    }
    .admin-shell .filter-bar input {
      width: 220px !important;
    }
    .admin-shell .filter-bar select {
      appearance: none !important;
      -webkit-appearance: none !important;
      -moz-appearance: none !important;
      padding-right: 24px !important;
      cursor: pointer;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>") !important;
      background-repeat: no-repeat !important;
      background-position: right 8px center !important;
      width: auto !important;
      min-width: 0 !important;
    }
    .admin-shell .filter-bar select:hover,
    .admin-shell .filter-bar input:hover { border-color: var(--c-accent) !important; }
    .admin-shell .filter-bar select:focus,
    .admin-shell .filter-bar input:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; }
    .admin-table-wrap { overflow-x:auto; border:1px solid var(--c-border); border-radius:8px; background:var(--c-bg); }
    table.admin-table { width:100%; border-collapse:collapse; font-size:.84rem; min-width:1100px; }
    table.admin-table th, table.admin-table td { padding:9px 12px; border-bottom:1px solid var(--c-border); text-align:left; vertical-align:top; }
    /* Once the JS switches the table to table-layout:fixed (so col
       widths actually take effect for resize), cells whose content
       exceeds their column width need to truncate cleanly rather
       than spilling sideways. ellipsis on the cell, with a title
       attribute set client-side so the full content is hover-
       readable. */
    table.admin-table td {
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      max-width:0; /* required so text-overflow ellipsis kicks in inside td */
    }
    /* TH uses position:relative (not sticky) so the absolute-positioned
       resize handle has a reliable containing block. Sticky requires
       a positioned-containing-block ancestor that not every browser
       counts sticky as, which left the resize handle floating to the
       table or body and made the drag-to-resize unusable (#1 —
       2026-05-07). Vertical right-border distinguishes columns and
       hints at the drag region. */
    table.admin-table th {
      background:var(--c-bg-alt);
      font-weight:600;
      cursor:pointer;
      user-select:none;
      white-space:nowrap;
      position:relative;
      border-right:1px solid var(--c-border);
    }
    table.admin-table th:last-child { border-right:none; }
    /* The resize handle is positioned relative to the TH but TH has
       position:sticky which establishes a containing block, so absolute
       positioning works without needing position:relative. */
    /* Column resize handle — appended by admin.js on render. Sits at
       the right edge of each TH and overhangs the border slightly
       so it's an easy 8px grab target. Visible by default (subtle
       grey strip) so the user can find it without hovering blindly.
       (#1 — 2026-05-07). */
    table.admin-table th .col-resize {
      position:absolute;
      top:0;
      right:-4px;
      width:8px;
      height:100%;
      cursor:col-resize;
      user-select:none;
      z-index:2;
      background:transparent;
    }
    table.admin-table th .col-resize::before {
      content:'';
      position:absolute;
      top:25%;
      left:3px;
      width:2px;
      height:50%;
      background:var(--c-border);
      border-radius:1px;
      transition:background .12s ease;
    }
    table.admin-table th .col-resize:hover::before,
    table.admin-table th .col-resize.dragging::before {
      background:var(--c-accent);
      width:4px;
      left:2px;
    }
    table.admin-table th.sort-active::after { content:' ↓'; }
    table.admin-table th.sort-active.asc::after { content:' ↑'; }
    table.admin-table tbody tr:hover { background:var(--c-bg-alt); cursor:pointer; }
    .badge { display:inline-block; padding:2px 9px; font-size:.72rem; line-height:1.4; border-radius:99px; font-weight:600; border:1px solid var(--c-border); background:var(--c-bg-alt); color:var(--c-muted); white-space:nowrap; vertical-align:middle; }
    .b-active     { background:#dcfce7; color:#166534; border-color:#bbf7d0; }
    .b-trialing   { background:#dbeafe; color:#1e40af; border-color:#bfdbfe; }
    .b-cancelling { background:#fef3c7; color:#92400e; border-color:#fde68a; }
    .b-cancelled  { background:#fee2e2; color:#991b1b; border-color:#fecaca; }
    .b-pastdue    { background:#fef3c7; color:#92400e; border-color:#fde68a; }
    .b-free       { background:var(--c-bg-alt); color:var(--c-muted); }
    .b-tester     { background:#f3e8ff; color:#6b21a8; border-color:#e9d5ff; }
    .b-yes        { background:#dcfce7; color:#166534; border-color:#bbf7d0; }
    .b-no         { background:var(--c-bg-alt); color:var(--c-muted); }
    .b-trial-yes  { background:#fef3c7; color:#92400e; border-color:#fde68a; }
    .pager { display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top:12px; font-size:.86rem; color:var(--c-muted); }
    .pager button { padding:5px 10px; border:1px solid var(--c-border); border-radius:6px; background:var(--c-bg); cursor:pointer; }
    .pager button:disabled { opacity:.4; cursor:not-allowed; }
    /* Drawer */
    .drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:200; display:none; }
    .drawer-overlay.open { display:block; }
    .drawer { position:fixed; right:0; top:0; bottom:0; width:min(880px, 100%); background:var(--c-bg); box-shadow:-4px 0 24px rgba(0,0,0,.18); z-index:210; transform:translateX(100%); transition:transform .2s ease; overflow-y:auto; }
    .drawer.open { transform:translateX(0); }
    .drawer-h { padding:18px 22px; border-bottom:1px solid var(--c-border); display:flex; justify-content:space-between; align-items:center; gap:12px; position:sticky; top:0; background:var(--c-bg); z-index:1; }
    .drawer-h h2 { margin:0; font-size:1.2rem; }
    .drawer-close { background:none; border:none; cursor:pointer; font-size:1.4rem; color:var(--c-muted); }
    .drawer-body { padding:18px 22px; }
    .drawer-section { margin-bottom:24px; }
    .drawer-section h3 { font-size:.78rem; text-transform:uppercase; color:var(--c-muted); letter-spacing:.06em; margin:0 0 8px; }
    .kv { display:grid; grid-template-columns:160px 1fr; gap:6px 14px; font-size:.86rem; }
    .kv dt { color:var(--c-muted); }
    .kv dd { margin:0; word-break:break-word; }
    .drawer-list { font-size:.84rem; }
    .drawer-list li { padding:6px 0; border-bottom:1px solid var(--c-border); list-style:none; }
    .drawer-list { padding:0; margin:0; }
    .funnel-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--c-border); }
    .funnel-row:last-child { border-bottom:none; }
    .funnel-row__label { width:240px; flex-shrink:0; }
    .funnel-row__count { width:180px; flex-shrink:0; text-align:right; }
    .funnel-bar { flex:1; height:18px; background:var(--c-bg-alt); border-radius:99px; overflow:hidden; }
    /* Funnel + reasons bars use --fp-bar-w as the dynamic width carrier
       (set inline by admin.js for each row). Static colour stays in CSS
       so the JS doesn't need to know about theme tokens. Green accent
       covers light mode; in dark mode --c-accent is the same green-blue
       and stays visible against the bg-alt background (#7 — 2026-05-07). */
    /* Widths are set via JS (el.style.width = 'N%') to keep CSP happy.
       Saturated green fill that contrasts against bg-alt in both
       light and dark modes (#7 — 2026-05-07). */
    .funnel-bar > span {
      display:block;
      height:100%;
      background:#16a34a;
      transition:width .25s ease;
      min-width:1px;
    }
    @media (prefers-color-scheme: dark) {
      .funnel-bar > span { background:#22c55e; }
    }
    .cohort-table { font-size:.78rem; }
    .cohort-table td, .cohort-table th { padding:6px 8px; border:1px solid var(--c-border); text-align:center; min-width:48px; }
    .cohort-table .cohort-label { text-align:left; font-weight:600; }
    /* Heat scale. Light steps need explicit dark text so values stay
       readable on light blue backgrounds in dark mode (the body's text
       inherits white in dark mode, which was washing out the heat-1 / -2
       cells — admin portal #8, 2026-05-07). */
    .heat-0 { background:transparent; }
    .heat-1 { background:#dbeafe; color:#0c1f3d; }
    .heat-2 { background:#bfdbfe; color:#0c1f3d; }
    .heat-3 { background:#93c5fd; color:#0c1f3d; }
    .heat-4 { background:#60a5fa; color:#fff; }
    .heat-5 { background:#3b82f6; color:#fff; }
    .muted-row td { color:var(--c-muted); font-style:italic; }
    /* CSV download button. Uses --c-green-vivid (the same brand-green
       used by .btn--primary) so it's visible in both light and dark
       modes regardless of how --c-accent resolves. !important
       overrides the global `button` rule from style.css that sets
       font-size + family but no colour, so without these the button
       renders as a transparent native button with no visible green
       in light mode (#5a — 2026-05-07). */
    .csv-link {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 8px 18px !important;
      height: 36px !important;
      border: none !important;
      background: var(--c-green-vivid) !important;
      color: #fff !important;
      border-radius: 6px !important;
      text-decoration: none !important;
      font-size: .86rem !important;
      font-weight: 600 !important;
      cursor: pointer !important;
      line-height: 1 !important;
    }
    .csv-link:hover { background: var(--c-green) !important; }
    .csv-link:disabled { opacity: .45 !important; cursor: not-allowed !important; }
    .csv-row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:16px; }
    .empty { padding:32px; text-align:center; color:var(--c-muted); font-size:.92rem; }
    /* Sidebar reveal rule — these admin entries default to display:none
       via this attribute selector; admin probe in dashboard.js flips
       them to display:'' (inline) which wins specificity. Without this
       rule a non-admin user would see the sidebar link permanently
       (data-fp-style is a no-op marker). */
    [data-fp-admin-only="1"] { display:none !important; }
    [data-fp-admin-only="1"][data-fp-admin-show="1"] { display:revert !important; }