/* styles.css
 *
 * The shared design system for every LinkWise page — colors, fonts,
 * buttons, cards, modals, the sidebar, and every page's specific styling
 * all live here in one place rather than duplicated per page. Some rules
 * here are only used by one particular page today (e.g. the search-tool
 * result cards) — that's fine and deliberate; a single shared stylesheet
 * that every page can freely draw from is simpler and safer than trying
 * to split rules into precise per-page files, and unused CSS on a page
 * that doesn't have the matching elements is harmless.
 */

  :root{
    --paper: #F5F6F8; --paper-raised: #FFFFFF;
    --ink: #14181D; --ink-soft: #4A525C; --ink-faint: #8B93A0;
    --highlighter: #2461E8; --highlighter-soft: #6E9EFF;
    --coral: #E0774A; --coral-bg: rgba(224,119,74,0.1); --coral-border: rgba(224,119,74,0.35);
    --rust: #2461E8; --rust-dark: #1A4BBF; --teal: #2461E8;
    --line: #E2E4E8; --line-strong: #C7CBD1;
    --shadow: 0 1px 2px rgba(20,24,29,0.06), 0 8px 24px rgba(20,24,29,0.06);
    --page-bg: var(--paper);
    --font-display: 'Outfit', Arial, Helvetica, sans-serif;
    --font-body: 'Manrope', Arial, Helvetica, sans-serif;
    --font-mono: 'Space Grotesk', Arial, Helvetica, sans-serif;
    /* reserved for big, one-off headline moments only (the dashboard
       greeting, the auth panel headline) to match the marketing site's
       voice — NOT swapped in for --font-display everywhere, since Archivo
       Black's single ultra-bold cut would wreck legibility on small UI
       text (sidebar nav, table headers, tab labels all use --font-display
       at 11-15px) */
    --font-headline: 'Archivo Black', Arial, Helvetica, sans-serif;
    --max: 1600px;
  }
  :root[data-theme="dark"]{
    --paper: #000617; --paper-raised: #0B1220;
    --ink: #F5F7FA; --ink-soft: #B0B8C2; --ink-faint: #7A8290;
    --highlighter: #0366FC; --highlighter-soft: #4C8CFF;
    --coral: #FF9466; --coral-bg: rgba(255,148,102,0.14); --coral-border: rgba(255,148,102,0.4);
    --rust: #0366FC; --rust-dark: #024DC2; --teal: #0366FC;
    --line: #1B2333; --line-strong: #2A3446;
    --shadow: 0 1px 2px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.6);
    --page-bg: var(--paper);
  }
  *{box-sizing:border-box;}
  body{ margin:0; background:var(--page-bg); background-attachment:fixed; color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; }

  /* Same reveal pattern as the WordPress site (a "reveal" class + the
     IntersectionObserver in shared.js's initRevealAnimations): a calm
     one-time fade-up entrance, not a repeated scroll effect. */
  .reveal{ opacity:0; transform:translateY(24px); transition:opacity .5s ease, transform .5s ease; }
  .reveal.in{ opacity:1; transform:none; }
  .reveal-stagger > *{ opacity:0; transform:translateY(18px); transition:opacity .45s ease, transform .45s ease; }
  .reveal-stagger.in > *{ opacity:1; transform:none; }
  .reveal-stagger.in > *:nth-child(1){ transition-delay:.03s; }
  .reveal-stagger.in > *:nth-child(2){ transition-delay:.08s; }
  .reveal-stagger.in > *:nth-child(3){ transition-delay:.13s; }
  .reveal-stagger.in > *:nth-child(4){ transition-delay:.18s; }
  .reveal-stagger.in > *:nth-child(5){ transition-delay:.23s; }
  .reveal-stagger.in > *:nth-child(6){ transition-delay:.28s; }
  @media (prefers-reduced-motion: reduce){
    .reveal, .reveal-stagger > *{ opacity:1; transform:none; transition:none; }
  }
  a{ color:inherit; }
  .wrap{ max-width:var(--max); margin:0 auto; padding:0 28px; }
  h1,h2{ font-family:var(--font-display); font-weight:800; letter-spacing:-0.01em; line-height:1.12; margin:0; }
  h3{ font-family:var(--font-body); font-weight:600; line-height:1.15; margin:0; }
  /* Headings read as neutral ink now, not brand-blue — the accent is
     reserved for things you can actually act on (buttons, active nav,
     badges, links), not every section title on the page. */
  h2,h3{ color:var(--ink); }

  .app-shell{ display:flex; min-height:100vh; }
  /* Icon rail at rest, expanding on hover to a labeled drawer (like the
     mobile version below, but triggered by :hover instead of the toggle
     button) — overlays the page rather than pushing .app-main, so nothing
     else reflows while it's open. Poppins throughout (sidebar included —
     Space Grotesk was dropped sitewide in favor of one typeface). */
  .sidebar{ position:fixed; top:0; left:0; height:100vh; width:72px; min-width:72px; max-width:72px; background:var(--paper-raised); border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center; padding:24px 0; z-index:60; overflow:hidden; transition:width .18s ease; }
  .sidebar:hover{ width:232px; min-width:232px; max-width:232px; align-items:stretch; box-shadow:var(--shadow); }
  .app-main{ margin-left:72px; }
  .sidebar-label{ display:none; white-space:nowrap; }
  .sidebar-logo span.sidebar-label{ font-size:19px; }
  .sidebar-logo{ display:flex; align-items:center; justify-content:center; text-decoration:none; color:var(--ink); padding:0 0 26px; }
  .sidebar:hover .sidebar-logo{ justify-content:flex-start; gap:9px; padding:0 12px 22px; }
  .sidebar:hover .sidebar-label{ display:inline; }
  .sidebar-logo-icon{ width:26px; height:26px; flex:none; object-fit:contain; border-radius:6px; }
  .sidebar-nav{ display:flex; flex-direction:column; gap:6px; align-items:center; }
  .sidebar:hover .sidebar-nav{ align-items:stretch; padding:0 12px; }
  .sidebar-nav-item{ position:relative; display:flex; align-items:center; justify-content:center; width:44px; height:44px; text-align:left; background:none; border:none; border-radius:12px; padding:0; font-family:var(--font-body); font-size:14px; font-weight:500; color:var(--ink-faint); cursor:pointer; text-decoration:none; }
  .sidebar:hover .sidebar-nav-item{ width:100%; height:auto; justify-content:flex-start; gap:11px; padding:11px 12px 11px 9px; }
  .sidebar:hover .sidebar-nav-item.active::before{ left:-9px; border-radius:3px; }
  .nav-badge-dot{ position:absolute; top:4px; right:4px; width:8px; height:8px; border-radius:50%; background:#E0574C; border:2px solid var(--paper-raised); }
  .sidebar-nav-item svg{ width:19px; height:19px; flex:none; }
  .sidebar-nav-item:hover{ background:var(--paper-sunk, var(--paper)); color:var(--ink); }
  /* Solid ink pill instead of a blue tint + left bar — blue is reserved
     for things you can act on (links, buttons) and the one deliberate
     spot it carries real meaning (Anchor Text's "Branded" dot), not as
     a wash over every active nav state. */
  .sidebar-nav-item.active{ background:var(--ink); color:var(--paper-raised); font-weight:600; }
  .sidebar-nav-item.active::before{ display:none; }
  .sidebar-nav-item.active svg{ color:var(--paper-raised); }
  .sidebar-icon{ width:18px; height:18px; flex:none; display:inline-flex; align-items:center; justify-content:center; }
  .sidebar-icon svg{ width:17px; height:17px; }
  /* nav-dot removed — replaced by real per-item icons */

  /* Backlink Profile's submenu (Overview/New Links/Top Pages/Trends) — the
     parent button reuses .sidebar-nav-item as-is so the collapsed,
     icon-only rail needs no special-casing; the chevron and submenu list
     only ever appear once the sidebar itself is expanded (hover, or the
     mobile drawer below), matching every other label on the rail. */
  .sidebar-nav-parent{ width:100%; }
  .sidebar-chevron{ display:none; width:14px; height:14px; margin-left:auto; flex:none; }
  .sidebar:hover .sidebar-chevron{ display:block; }
  .sidebar-nav-group.open .sidebar-chevron{ transform:rotate(90deg); }
  .sidebar-submenu{ display:none; flex-direction:column; gap:1px; margin:2px 0 6px 33px; padding-left:10px; border-left:1.5px solid var(--line); }
  .sidebar:hover .sidebar-nav-group.open .sidebar-submenu{ display:flex; }
  .sidebar-submenu-item{ display:flex; align-items:center; gap:8px; padding:8px 9px; border-radius:7px; font-family:var(--font-body); font-size:13px; font-weight:500; color:var(--ink-faint); text-decoration:none; }
  .sidebar-submenu-item:hover{ background:var(--paper); color:var(--ink); }
  .sidebar-submenu-item.active{ color:var(--ink); background:var(--paper); font-weight:700; }
  .submenu-count{ font-family:var(--font-body); font-size:11px; font-weight:700; color:var(--green, #4CAF7D); }

  .sidebar-spacer{ flex:1; }
  .sidebar-bottom{ display:flex; flex-direction:column; align-items:center; gap:12px; }
  .sidebar-bottom .credits-badge{ align-self:stretch; }
  .sidebar:hover .sidebar-bottom{ align-items:stretch; padding:0 12px; }
  .sidebar:hover .credits-badge{ display:block !important; }
  .sidebar-toggle{ display:none; position:fixed; top:16px; left:16px; z-index:70; background:var(--paper-raised); border:1px solid var(--line-strong); color:var(--ink); width:40px; height:40px; border-radius:8px; cursor:pointer; align-items:center; justify-content:center; }
  .sidebar-toggle svg{ width:19px; height:19px; }
  .app-main{ flex:1; min-width:0; display:flex; flex-direction:column; overflow-x:hidden; }
  .auth-area{ font-size:14px; display:inline-flex; }
  .link-btn{ background:none; border:none; font: inherit; color:var(--ink-soft); cursor:pointer; padding:0; }
  .link-btn:hover{ color:var(--rust); }
  .auth-area button.link-btn:hover{ color:var(--ink); }

  /* Profile menu + Help — a small floating cluster in the top-right
     corner, independent of the sidebar. Moved here from inside the
     sidebar specifically because the sidebar is a fixed-height column
     with overflow:hidden — stacking the whole account nav inside it on
     top of the main tool list could exceed a shorter screen's height,
     silently clipping whatever was lowest (the theme toggle). */
  .topbar{ position:fixed; top:16px; right:20px; display:flex; align-items:center; gap:14px; z-index:65; }
  .topbar-icon-btn{ width:36px; height:36px; border-radius:50%; background:var(--paper-raised); border:1px solid var(--line); color:var(--ink-soft); display:flex; align-items:center; justify-content:center; text-decoration:none; transition:color .15s ease, border-color .15s ease; }
  .topbar-icon-btn:hover{ color:var(--ink); border-color:var(--line-strong); }
  .topbar-icon-btn svg{ width:19px; height:19px; }
  .topbar-profile{ position:relative; }
  .sidebar-avatar-chip{ border:none; cursor:pointer; padding:0; font:inherit; }
  .topbar-dropdown{ position:absolute; top:calc(100% + 10px); right:0; width:220px; background:var(--paper-raised); border:1px solid var(--line-strong); border-radius:12px; box-shadow:var(--shadow); padding:8px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .15s ease, transform .15s ease, visibility .15s; z-index:66; }
  .topbar-dropdown.show{ opacity:1; visibility:visible; transform:translateY(0); }
  .topbar-dropdown-email{ font-size:12px; color:var(--ink-faint); padding:6px 10px 10px; word-break:break-all; border-bottom:1px solid var(--line); margin-bottom:6px; }
  .topbar-dropdown-item{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none; border-radius:8px; padding:9px 10px; font-family:var(--font-body); font-size:13.5px; font-weight:500; color:var(--ink-soft); cursor:pointer; text-decoration:none; }
  .topbar-dropdown-item svg{ width:16px; height:16px; }
  .topbar-dropdown-item:hover{ background:var(--paper); color:var(--ink); }
  .topbar-dropdown-danger{ color:#E0574C; }
  .topbar-dropdown-danger:hover{ background:rgba(224,87,76,0.1); color:#E0574C; }
  .topbar-dropdown-sep{ height:1px; background:var(--line); margin:6px 4px; }
  @media (max-width:860px){
    .sidebar-toggle{ display:flex; }
    /* Mobile gets a full labeled drawer, not the icon rail — there's no
       persistent-sidebar real estate to protect on a phone, so this is
       the one place the old left-aligned, labeled nav item still applies. */
    .sidebar{ position:fixed; left:0; top:0; width:248px; min-width:248px; max-width:248px; align-items:stretch; padding:24px 12px; transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--shadow); }
    .sidebar.open{ transform:translateX(0); }
    .sidebar .sidebar-label{ display:inline; }
    .sidebar .sidebar-logo{ justify-content:flex-start; gap:9px; font-family:var(--font-display); font-weight:700; font-size:19px; padding:0 8px 22px; }
    .sidebar .sidebar-nav{ align-items:stretch; }
    .sidebar .sidebar-nav-item{ width:100%; height:auto; justify-content:flex-start; gap:11px; padding:11px 12px 11px 9px; border-radius:8px; }
    .sidebar .sidebar-nav-item.active::before{ left:-9px; border-radius:3px; }
    .sidebar .sidebar-chevron{ display:block; }
    .sidebar .sidebar-nav-group.open .sidebar-submenu{ display:flex; }
    .sidebar .sidebar-bottom{ align-items:stretch; padding:0 8px; }
    .sidebar.open .credits-badge{ display:block !important; }
    .app-main{ margin-left:0; }
    .topbar{ top:12px; right:12px; }
    .topbar-dropdown{ right:-4px; }
    /* Clears the fixed .sidebar-toggle button (top:16px, 40px tall) so
       page headings never render underneath it — most visible on
       .dash-hero, which has no top padding of its own. */
    .tool{ padding-top:72px; }
  }
  .account-chip{ display:flex; align-items:center; gap:10px; }
  .account-email{ color:var(--ink-soft); font-size:13.5px; }
  .credits-badge{ display:none !important; font-family:var(--font-body); font-size:13px; font-weight:500; color:var(--ink-faint); padding:2px 12px; transition:color .2s ease; white-space:nowrap; }
  .credits-badge.low{ color:#E0574C; }
  .credits-badge.pulse{ animation:creditsPulse .5s ease; }
  @keyframes creditsPulse{
    0%{ opacity:1; }
    30%{ opacity:0.4; color:var(--highlighter); }
    100%{ opacity:1; }
  }

  /* A single icon that swaps (moon when light is active, so you can see
     what clicking it switches TO — sun once dark is active) rather than
     a slider — matches every other control in the icon rail. */
  .theme-switch{ position:relative; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:none; border-radius:12px; background:none; color:var(--ink-faint); cursor:pointer; flex:none; }
  .theme-switch:hover{ background:var(--paper-sunk, var(--paper)); color:var(--ink); }
  .theme-icon{ position:absolute; width:19px; height:19px; transition:opacity .12s ease, transform .12s ease; }
  .theme-icon-sun{ opacity:0; transform:scale(.7) rotate(-20deg); }
  .theme-icon-moon{ opacity:1; transform:scale(1) rotate(0); }
  .theme-switch[data-active="dark"] .theme-icon-sun{ opacity:1; transform:scale(1) rotate(0); }
  .theme-switch[data-active="dark"] .theme-icon-moon{ opacity:0; transform:scale(.7) rotate(20deg); }

  /* Sidebar stays dark in both light and dark page mode - a deliberate
     identity choice (matches the dashboard mock on the marketing site),
     not a theme-dependent surface. Everything below overrides the
     theme-token colors the rules above use, scoped to .sidebar so the
     rest of the page is unaffected. */
  .sidebar{ background:#14181D; border-right-color:rgba(255,255,255,0.08); }
  .sidebar-logo{ color:#fff; }
  .sidebar-nav-item{ color:rgba(255,255,255,0.55); }
  .sidebar-nav-item:hover{ background:rgba(255,255,255,0.08); color:#fff; }
  .sidebar-nav-item.active{ background:var(--highlighter); color:#fff; }
  .sidebar-nav-item.active svg{ color:#fff; }
  .sidebar-submenu{ border-left-color:rgba(255,255,255,0.14); }
  .sidebar-submenu-item{ color:rgba(255,255,255,0.5); }
  .sidebar-submenu-item:hover{ background:rgba(255,255,255,0.08); color:#fff; }
  .sidebar-submenu-item.active{ background:rgba(255,255,255,0.08); color:#fff; }
  .sidebar .theme-switch{ color:rgba(255,255,255,0.55); }
  .sidebar .theme-switch:hover{ background:rgba(255,255,255,0.08); color:#fff; }
  .sidebar .credits-badge{ color:rgba(255,255,255,0.5); }
  @media (max-width:900px){ .sidebar{ box-shadow:0 0 0 1px rgba(255,255,255,0.08); } }

  .modal-backdrop{ display:none; position:fixed; inset:0; background:rgba(10,13,16,0.7); z-index:100; align-items:center; justify-content:center; padding:20px; }
  .modal-backdrop.show{ display:flex; }
  /* standalone auth page (auth.html): the "backdrop" IS the page, not a
     dimmed overlay over something else - transparent so the page's own
     dark gradient + swoosh (set on <body>, matching the marketing site's
     hero) show through behind the card, and no close button since there's
     nothing behind it to reveal. */
  .modal-backdrop[data-standalone="true"]{ background:transparent; }
  .modal-backdrop[data-standalone="true"] .modal-close{ display:none; }
  /* the auth-modal-left logo panel is hidden below 720px (see
     .auth-modal-left media query), so the fixed "back to site" mark in the
     top-left corner is the only branding left on mobile - push the card
     down so it doesn't sit underneath that mark instead of beside it. */
  @media (max-width:720px){
    .modal-backdrop[data-standalone="true"]{ padding-top:76px; align-items:flex-start; }
  }
  .modal{ background:var(--paper-raised); border:1px solid var(--line-strong); border-radius:14px; padding:32px; width:100%; max-width:380px; box-shadow:var(--shadow); position:relative; }
  /* Match detail modal — richer content than the narrow auth/subscribe
     modals (score breakdown, quote, pitch), so it gets a wider variant
     rather than squeezing into 380px. */
  .modal.modal-wide{ max-width:540px; max-height:84vh; overflow-y:auto; text-align:left; padding:0 32px 28px; }
  /* Tinted header band, bled to the modal's full width via negative margin
     (the modal's own padding is set to 0 above so this can reach the
     edges) — gives the modal a visible head/body split instead of the
     title sitting in the same flat surface as everything else. */
  .match-detail-head{ background:color-mix(in srgb, var(--highlighter) 6%, var(--paper-raised)); border-bottom:1px solid var(--line); margin:0 -32px 20px; padding:28px 32px 18px; border-radius:14px 14px 0 0; }
  .match-detail-head h3{ margin:0 0 4px; font-size:18px; padding-right:28px; }
  .match-detail-head #matchDetailDomain{ font-family:var(--font-mono); font-size:12.5px; color:var(--ink-faint); }
  .match-detail-actions{ display:flex; gap:10px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
  /* .tt-row's flex/space-between normally only applies inside .da-tooltip
     (a real bug caught in testing: without that ancestor these rows
     rendered with the label and value squashed together, no space
     between them). Scoped here instead, since the modal isn't a tooltip. */
  #matchDetailBody .tt-row{ display:flex; justify-content:space-between; gap:10px; padding:3px 0; font-size:13px; }
  #matchDetailBody .tt-row span:first-child{ color:var(--ink-soft); }
  #matchDetailBody .tt-row span:last-child{ font-weight:600; color:var(--ink); }
  #matchDetailBody .tt-row:last-of-type{ margin-bottom:4px; }

  /* standalone auth page only: two free-standing things side by side (plain
     branded copy, then a real card) instead of one fused two-tone widget -
     the left side carries no background/border/shadow of its own, so only
     the form itself reads as "the widget" with its own rounded corners. */
  .modal-backdrop[data-standalone="true"] .modal.auth-modal{
    background:none; border:none; box-shadow:none; overflow:visible; max-width:900px; gap:64px; align-items:center;
  }
  .modal-backdrop[data-standalone="true"] .auth-modal-left{
    background:none; box-shadow:none !important; padding:0; flex:0 0 360px; overflow:visible;
  }
  .modal-backdrop[data-standalone="true"] .auth-modal-right{
    background:var(--paper-raised); border-radius:24px; padding:44px 48px;
    box-shadow:0 0 36px 2px rgba(36,97,232,0.14), 0 40px 80px -20px rgba(10,14,23,0.5), 0 10px 26px rgba(20,24,29,0.12);
  }
  @media (max-width:720px){
    .modal-backdrop[data-standalone="true"] .modal.auth-modal{ max-width:440px; }
    .modal-backdrop[data-standalone="true"] .auth-modal-right{ padding:30px; border-radius:20px; }
  }

  /* inline auth gate: the real login/signup form embedded directly into a
     tool page's logged-out state (initInlineAuthGate() in shared.js moves
     the page's one modal instance in here, rather than popping it as an
     overlay) - the same dark gradient + swoosh + card treatment as the
     standalone auth.html page, not a light card dropped on the plain app
     background with a bold heading bolted on top. */
  /* Fills the entire content area edge-to-edge (full viewport, minus the
     sidebar column) instead of floating as a boxed card with visible light
     margins - the gate is the only thing shown while logged out (hero copy
     and results are hidden), so it can safely escape the document flow
     entirely via fixed positioning rather than trying to cancel however
     many layers of ancestor padding the different page layouts happen to
     nest it in. */
  #loggedOutGate{ position:fixed; top:0; left:72px; right:0; bottom:0; z-index:10; overflow:auto; }
  @media (max-width:900px){ #loggedOutGate{ left:0; } }

  .gate-dark-stage{
    position:relative; overflow:hidden;
    background:radial-gradient(900px 600px at 50% 0%, #141C2E 0%, #0A0E17 55%, #070A10 100%);
    padding:72px 24px; min-height:100%;
    display:flex; align-items:center; justify-content:center;
  }
  .gate-dark-swoosh{ position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; }
  .login-gate-wrap{ position:relative; z-index:1; max-width:440px; width:100%; margin:0 auto; }
  .modal-backdrop[data-inline="true"]{
    display:flex; position:static; inset:auto; background:none; padding:0; z-index:auto;
  }
  .modal-backdrop[data-inline="true"] .modal.auth-modal{
    background:none; border:none; box-shadow:none; overflow:visible; max-width:440px; width:100%; display:block;
  }
  .modal-backdrop[data-inline="true"] .auth-modal-left{ display:none; }
  .modal-backdrop[data-inline="true"] .modal-close{ display:none; }
  .modal-backdrop[data-inline="true"] .auth-trust-note{ display:none; }
  .modal-backdrop[data-inline="true"] .auth-modal-right{
    max-height:none; overflow:visible; padding:40px 44px;
    background:var(--paper-raised); border-radius:24px;
    box-shadow:0 0 36px 2px rgba(36,97,232,0.16), 0 40px 80px -20px rgba(10,14,23,0.5), 0 10px 26px rgba(20,24,29,0.12);
  }
  @media (max-width:480px){
    .gate-dark-stage{ padding:48px 16px; }
    .modal-backdrop[data-inline="true"] .auth-modal-right{ padding:28px 24px; border-radius:20px; }
  }

  /* Log in / sign up: a branded left panel (real product claims, not
     decoration for its own sake) next to the actual form, instead of a
     bare centered card — bigger, and reads as designed rather than a
     generic auth modal. padding:0 on the outer modal since each side now
     manages its own. */
  /* one clean, uniform radius for this card - the earlier asymmetric
     diagonal shape (shared with buttons elsewhere) read oddly at this size
     and like decoration for its own sake rather than a considered shape.
     A real elevated shadow stack instead carries the "designed" feeling. */
  .modal.auth-modal{ max-width:860px; padding:0; display:flex; overflow:hidden; text-align:left; border-radius:22px; box-shadow:0 0 100px 14px rgba(36,97,232,0.16), 0 50px 90px -24px rgba(10,14,23,0.45), 0 12px 32px rgba(20,24,29,0.12); }
  .auth-tagline{ margin:-8px 0 18px; font-size:13.5px; color:var(--ink-soft); }
  .auth-trust-note{ display:flex; align-items:center; justify-content:center; gap:6px; margin:16px 0 0; font-size:11.5px; color:var(--ink-faint); }
  /* same dark palette as the marketing site's hero - plain, not decorated,
     per feedback that the background graph read as clutter */
  .auth-modal-left{
    position:relative; overflow:hidden;
    flex:0 0 320px; background:radial-gradient(500px 500px at 30% 0%, #141C2E 0%, #0A0E17 60%, #070A10 100%);
    color:#fff; padding:44px 36px; display:flex; flex-direction:column; justify-content:center;
    box-shadow:inset -1px 0 0 rgba(255,255,255,0.06);
  }
  .auth-modal-logo{ position:relative; z-index:1; }
  .auth-modal-logo img{ width:52px; height:52px; border-radius:12px; margin-bottom:28px; display:block; }
  .auth-modal-headline{ position:relative; z-index:1; font-family:var(--font-headline); font-weight:400; font-size:32px; line-height:1.25; margin:0 0 28px; color:#fff; }
  .auth-modal-points{ position:relative; z-index:1; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
  .auth-modal-points li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.45; color:rgba(255,255,255,0.88); }
  .auth-modal-points svg{ flex:none; margin-top:2px; color:#fff; }
  .auth-modal-right{ flex:1; min-width:0; padding:40px 44px; max-height:86vh; overflow-y:auto; }
  .auth-modal-right .field-input{ padding:15px 20px; font-size:15.5px; }
  .auth-modal-right .auth-tabs{ margin-bottom:26px; }
  @media (max-width:720px){
    .modal.auth-modal{ flex-direction:column; max-width:440px; max-height:92vh; }
    .auth-modal-left{ display:none; }
    .auth-modal-right{ padding:30px; max-height:none; overflow-y:visible; }
  }
  .auth-progress{ display:flex; gap:6px; margin-bottom:20px; }
  .auth-progress-seg{ flex:1; height:4px; border-radius:99px; background:var(--line); overflow:hidden; }
  .auth-progress-seg .fill{ height:100%; width:0%; background:var(--highlighter); transition:width .25s ease; }
  .auth-progress-seg.done .fill, .auth-progress-seg.active .fill{ width:100%; }
  .auth-step-eyebrow{ font-size:12.5px; font-weight:600; color:var(--highlighter); margin:0 0 4px; }
  .auth-step-title{ font-family:var(--font-display); font-size:21px; font-weight:600; margin:0 0 6px; }
  .auth-step-sub{ font-size:13px; color:var(--ink-soft); margin:0 0 20px; line-height:1.5; }
  .pill-group{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
  .pill-choice{ font-family:var(--font-body); font-size:13.5px; font-weight:600; padding:10px 18px; border-radius:999px; border:1.5px solid var(--line-strong); background:var(--paper); color:var(--ink-soft); cursor:pointer; transition:all .15s ease; }
  .pill-choice:hover{ border-color:var(--highlighter); }
  .pill-choice.selected{ background:var(--highlighter); border-color:var(--highlighter); color:#fff; }
  .modal-close{ position:absolute; top:14px; right:14px; background:none; border:none; color:var(--ink-faint); cursor:pointer; width:28px; height:28px; border-radius:6px; display:flex; align-items:center; justify-content:center; }
  .modal-close svg{ width:15px; height:15px; }
  .modal-close:hover{ background:var(--paper); color:var(--ink); }
  .auth-tabs{ display:flex; gap:4px; background:var(--paper); border-radius:14px; padding:4px; margin-bottom:22px; }
  .auth-tab{ flex:1; background:none; border:none; padding:9px; border-radius:10px; font-family:var(--font-body); font-weight:600; font-size:13.5px; color:var(--ink-faint); cursor:pointer; }
  .auth-tab.active{ background:var(--paper-raised); color:var(--ink); }
  .auth-error{ color:#E0574C; font-size:13px; margin:10px 0 0; display:none; }
  .auth-error.show{ display:block; }
  .auth-success{ color:#4CAF7D; font-size:13px; margin:10px 0 0; display:none; }
  .auth-success.show{ display:block; }
  .consent-recipient{ font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft); margin:0 0 14px; }
  .consent-body{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin:0 0 18px; }
  .consent-footnote{ font-size:11.5px; color:var(--ink-faint); line-height:1.5; margin:12px 0 0; text-align:center; }
  .consent-footnote a{ color:var(--highlighter); }
  .consent-personal-warning{ font-size:12.5px; color:#B8862B; background:rgba(224,169,60,0.12); border:1px solid #E0A93C; border-radius:8px; padding:10px 12px; line-height:1.5; margin:0 0 14px; }
  .consent-checkbox-row{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--ink); cursor:pointer; }
  .consent-checkbox-row input{ margin-top:3px; flex:none; width:16px; height:16px; accent-color:var(--highlighter); }

  /* "Did you send that?" nudge — shown when focus returns to the tab after
     a draft was opened, so the saved row's status can be confirmed with
     one click instead of navigating back to it and changing a dropdown. */
  .sent-nudge{ position:fixed; right:20px; bottom:20px; max-width:340px; width:calc(100% - 40px); background:var(--paper-raised); border:1px solid var(--line-strong); border-radius:14px; box-shadow:var(--shadow); padding:18px 20px; z-index:90; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .18s ease, transform .18s ease, visibility .18s; }
  .sent-nudge.show{ opacity:1; visibility:visible; transform:translateY(0); }
  .sent-nudge-text{ font-size:14px; color:var(--ink); line-height:1.5; margin:0 0 4px; }
  .sent-nudge-text strong{ font-weight:600; }
  .sent-nudge-sub{ font-size:12.5px; color:var(--ink-faint); margin:0 0 14px; }
  .sent-nudge-actions{ display:flex; align-items:center; gap:16px; }
  .sent-nudge-actions .btn{ padding:10px 20px; font-size:14px; }
  @media (max-width:520px){ .sent-nudge{ left:20px; right:20px; width:auto; max-width:none; } }

  /* Shown once a subscriber's monthly credits hit zero. They're never
     gated while subscribed (a deliberate choice) — this just tells them
     when more arrive, and offers an upgrade if a higher tier exists. */
  .credits-nudge{ position:fixed; right:20px; bottom:20px; max-width:320px; width:calc(100% - 40px); background:var(--paper-raised); border:1px solid var(--line-strong); border-radius:14px; box-shadow:var(--shadow); padding:16px 18px; z-index:89; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .18s ease, transform .18s ease, visibility .18s; }
  .credits-nudge.show{ opacity:1; visibility:visible; transform:translateY(0); }
  .credits-nudge-text{ font-size:13.5px; color:var(--ink); line-height:1.5; margin:0 0 12px; }
  .credits-nudge-actions{ display:flex; align-items:center; gap:14px; }
  .credits-nudge-actions .btn-small{ flex:none; }
  @media (max-width:520px){ .credits-nudge{ left:20px; right:20px; width:auto; max-width:none; } }

  /* Brief confirmation after saving a result, so it's clear where it went —
     users were finding the saved row in Outreach Hub by accident, with no
     indication the save had actually landed anywhere. Bottom-left (not the
     other nudges' bottom-right) so a save made right after dismissing one
     of those doesn't collide with it mid-transition. */
  .save-toast{ position:fixed; left:20px; bottom:20px; max-width:300px; width:calc(100% - 40px); background:var(--paper-raised); border:1px solid var(--line-strong); border-radius:12px; box-shadow:var(--shadow); padding:13px 16px; z-index:91; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .18s ease, transform .18s ease, visibility .18s; display:flex; align-items:center; gap:10px; }
  .save-toast.show{ opacity:1; visibility:visible; transform:translateY(0); }
  .save-toast-icon{ flex:none; width:22px; height:22px; border-radius:50%; background:rgba(76,175,125,0.14); color:#2A8457; display:flex; align-items:center; justify-content:center; }
  .save-toast-icon svg{ width:12px; height:12px; }
  .save-toast-text{ font-size:13.5px; color:var(--ink); line-height:1.4; }
  .save-toast-text a{ color:var(--highlighter); font-weight:600; text-decoration:none; }
  .save-toast-text a:hover{ text-decoration:underline; }
  @media (max-width:520px){ .save-toast{ left:20px; right:20px; width:auto; max-width:none; } }

  /* First-visit click-through tour — same bottom-right slot as the other
     nudges, one short step-script per tool, shown once (localStorage) then
     never again unless a user clears site data. */
  .tutorial-tour{ position:fixed; right:20px; bottom:20px; max-width:320px; width:calc(100% - 40px); background:var(--paper-raised); border:1px solid var(--line-strong); border-radius:14px; box-shadow:var(--shadow); padding:16px 18px; z-index:88; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .18s ease, transform .18s ease, visibility .18s; }
  .tutorial-tour.show{ opacity:1; visibility:visible; transform:translateY(0); }
  .tutorial-tour-head{ display:flex; align-items:center; justify-content:space-between; margin:0 0 8px; }
  .tutorial-tour-step{ font-family:var(--font-body); font-size:11px; font-weight:600; color:var(--highlighter); letter-spacing:.02em; }
  .tutorial-tour-close{ background:none; border:none; padding:2px; margin:0; color:var(--ink-faint); cursor:pointer; display:flex; }
  .tutorial-tour-close svg{ width:14px; height:14px; }
  .tutorial-tour-title{ font-family:var(--font-display); font-size:16px; font-weight:600; color:var(--ink); margin:0 0 6px; }
  .tutorial-tour-text{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin:0 0 14px; }
  .tutorial-tour-actions{ display:flex; align-items:center; gap:14px; }
  .tutorial-tour-actions .btn-small{ margin-left:auto; flex:none; }
  @media (max-width:520px){ .tutorial-tour{ left:20px; right:20px; width:auto; max-width:none; } }

  .sidebar-avatar-chip{ width:28px; height:28px; border-radius:50%; background:var(--highlighter); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px; flex:none; }

  .eyebrow{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); display:inline-flex; align-items:center; gap:8px; }
  .eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--highlighter); }

  .intro{ padding:56px 56px 44px; position:relative; margin:0 -28px 36px; }
  .intro-content{ max-width:760px; margin:0 auto; }
  .intro h1{ font-size:clamp(28px,4vw,40px); margin:14px 0 14px; }
  .intro h2{ font-family:var(--font-display); font-size:clamp(26px,3.8vw,36px); font-weight:800; letter-spacing:-0.01em; margin:0 0 12px; color:var(--ink); }
  /* Backlink Profile, Competitor Analysis, Broken Links, Outreach — light
     mode only, per explicit request; dark mode keeps the default white title. */
  :root:not([data-theme="dark"]) #competitorGapSection h2,
  :root:not([data-theme="dark"]) #brokenLinksSection h2,
  #savedSection h2{ color:var(--ink); font-size:clamp(26px,3.6vw,34px); }
  .intro .section-sub{ margin:0; font-size:15.5px; }
  .intro p{ color:var(--ink-soft); font-size:16.5px; max-width:62ch; margin:0; }

  .tool{ padding:40px 44px; margin-bottom:28px; }
  fieldset{ border:none; padding:0; margin:0 0 22px; }
  legend{ font-family:var(--font-body); font-size:13.5px; font-weight:600; color:var(--ink-soft); padding:0 0 12px; }

  .mode-toggle{ display:flex; gap:8px; margin-bottom:14px; }
  .mode-toggle label{ flex:1; text-align:center; font-size:14px; font-weight:600; padding:10px 12px; border:1.5px solid var(--line-strong); border-radius:8px; cursor:pointer; color:var(--ink-soft); transition:border-color .15s ease, color .15s ease, background .15s ease; }
  .mode-toggle input{ position:absolute; opacity:0; pointer-events:none; }
  .mode-toggle input:checked + label{ border-color:var(--ink); color:var(--ink); background:var(--paper); }

  .segmented{ position:relative; display:flex; background:var(--paper); border:1px solid var(--line-strong); border-radius:10px; padding:4px; gap:4px; margin-bottom:20px; }
  .segmented input{ position:absolute; opacity:0; pointer-events:none; }
  .segmented label{ position:relative; z-index:1; flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:10px 14px; border-radius:7px; font-size:14px; font-weight:600; color:var(--ink-soft); cursor:pointer; transition:color .15s ease; }
  .segmented label svg{ width:16px; height:16px; flex:none; }
  .segmented input:checked + label{ color:#fff; }
  .segmented-thumb{ position:absolute; top:4px; left:4px; width:calc(50% - 4px); height:calc(100% - 8px); background:var(--highlighter); border-radius:7px; transition:transform .2s ease; z-index:0; }
  .segmented:has(#modeGuestpost:checked) .segmented-thumb{ transform:translateX(100%); }
  @media (max-width:480px){ .segmented label span.seg-label{ display:none; } }

  label.field-label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:7px; color:var(--ink); }
  .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .search-row{ display:flex; gap:10px; align-items:flex-start; max-width:720px; }
  .search-row .field-input{ flex:1; }
  .search-row .btn{ flex:none; white-space:nowrap; }
  .field-input{ width:100%; font-family:var(--font-body); font-size:15px; padding:13px 20px; border-radius:999px; border:1.5px solid var(--line-strong); background:var(--paper); color:var(--ink); transition:border-color .15s ease, box-shadow .15s ease; }
  select.field-input{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8290' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:15px; padding-right:36px; cursor:pointer; }
  select.field-input:focus{ outline:none; border-color:var(--highlighter); box-shadow:0 0 0 4px rgba(36,97,232,0.12); }
  input.field-input::placeholder{ color:var(--ink-faint); }
  input.field-input:focus{ outline:none; border-color:var(--highlighter); box-shadow:0 0 0 4px rgba(36,97,232,0.12); }
  .hint{ font-size:13px; color:var(--ink-faint); margin-top:16px; margin-bottom:4px; line-height:1.5; }

  /* A gentle inline "you've hit this period's limit" notice — replaces a
     native alert() popup for cap-reached messages, with a plain-language
     countdown to the next reset instead of just a hard stop. */
  .cap-reached-notice{ background:rgba(36,97,232,0.08); border:1px solid rgba(36,97,232,0.18); border-radius:12px; padding:14px 16px; margin-top:14px; }
  .cap-reached-text{ font-size:13.5px; color:var(--ink); line-height:1.5; margin:0 0 4px; font-weight:600; }
  .cap-reached-sub{ font-size:13px; color:var(--ink-soft); line-height:1.5; margin:0; }
  .cap-reached-sub strong{ color:var(--highlighter); font-weight:600; }

  .btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-body); font-weight:600; font-size:15.5px; padding:14px 28px; border-radius:30px 8px 30px 8px; border:none; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
  .btn-primary{ background:var(--rust); color:#fff; justify-content:center; }
  .btn-primary:hover:not(:disabled){ background:var(--rust-dark); transform:translateY(-1px); box-shadow:var(--shadow); }
  .btn-primary:disabled{ opacity:0.55; cursor:default; }
  .btn:focus-visible{ outline:2.5px solid var(--ink); outline-offset:3px; }


  .spinner{ width:16px; height:16px; border-radius:50%; border:2.5px solid rgba(255,255,255,0.4); border-top-color:#fff; animation:spin .7s linear infinite; display:none; }
  .loading .spinner{ display:inline-block; }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  #status{ font-size:13.5px; font-family:var(--font-body); color:var(--ink-faint); margin-top:12px; text-align:center; min-height:18px; }
  #status.err{ color:var(--rust); }
  .progress-bar{ display:none; height:6px; border-radius:99px; background:var(--line); overflow:hidden; margin-top:14px; }
  .progress-bar.show{ display:block; }
  .progress-bar-fill{ height:100%; width:40%; border-radius:99px; background:var(--highlighter); animation:progressSlide 1.4s ease-in-out infinite; }
  @keyframes progressSlide{
    0%{ transform:translateX(-100%); }
    100%{ transform:translateX(350%); }
  }

  /* results */
  #resultsSection{ display:none; }
  #resultsSection.show{ display:block; }
  .results-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
  .results-head h2{ font-size:21px; }
  .results-meta{ font-family:var(--font-mono); font-size:12.5px; color:var(--ink-faint); }

  .result-card{ background:var(--paper-raised); border-bottom:1px solid var(--line); padding:22px 22px 18px; transition:background .12s ease; }
  .result-card:hover{ background:var(--paper); }
  .result-card:last-child{ border-bottom:none; }
  #resultsList, #cgResultsList, #blResultsList{ background:var(--paper-raised); border:1px solid var(--line); border-radius:16px; margin-bottom:20px; }
  /* Back to full width per explicit instruction — the defined column
     borders (Match/Score/Actions) now carry the "this is a real grid, not
     empty space" read instead of a width cap. */
  #resultsList:empty, #cgResultsList:empty, #blResultsList:empty{ border:none; margin-bottom:0; }
  /* Corners are rounded on the end cards themselves rather than clipped via
     the container's overflow:hidden — clipping cut off the score tooltip
     (.da-tooltip) whenever it opened upward from a card near the top of
     the list. */
  #resultsList > *:first-child, #cgResultsList > *:first-child, #blResultsList > *:first-child{ border-top-left-radius:16px; border-top-right-radius:16px; }
  #resultsList > *:last-child, #cgResultsList > *:last-child, #blResultsList > *:last-child{ border-bottom-left-radius:16px; border-bottom-right-radius:16px; }
  /* .result-card pads itself (22px), but a bare hint/note sitting directly
     in one of these containers — "Sorted by domain rank...", "Last
     scanned...", trial-unlock copy, etc. — had no padding of its own and
     sat flush against the container's border. */
  #resultsList > .hint, #cgResultsList > .hint, #blResultsList > .hint,
  #resultsList > .trial-unlock-note, #cgResultsList > .trial-unlock-note, #blResultsList > .trial-unlock-note,
  #resultsList > .hub-stats, #cgResultsList > .hub-stats, #blResultsList > .hub-stats{ padding:0 22px; margin-left:0; margin-right:0; }
  #resultsList > .hint:first-child, #cgResultsList > .hint:first-child, #blResultsList > .hint:first-child,
  #resultsList > .hub-stats:first-child, #cgResultsList > .hub-stats:first-child, #blResultsList > .hub-stats:first-child{ padding-top:18px; }
  .trial-unlock-note{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink-soft); margin:26px 0 14px; }
  .locked-stack{ position:relative; }
  .section-sub{ font-size:14px; color:var(--ink-soft); margin:0 0 20px; }
  .card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:16px; padding:28px; margin-bottom:24px; }
  .competitor-row{ display:flex; gap:8px; align-items:center; margin-bottom:10px; }
  .competitor-row .field-input{ margin-bottom:0; }
  .remove-x{ width:32px; height:32px; flex:none; border-radius:8px; border:1.5px solid var(--line-strong); background:var(--paper); color:var(--ink-faint); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; }
  .add-competitor-btn{ font-family:var(--font-body); font-size:13.5px; font-weight:600; color:var(--rust); background:none; border:none; padding:6px 0; cursor:pointer; }
  .intersect-badge{ flex:none; display:flex; align-items:center; gap:6px; background:var(--coral-bg); border:1px solid var(--coral-border); color:var(--coral); font-size:12px; font-weight:700; padding:6px 11px; border-radius:20px; white-space:nowrap; }
  .intersect-badge.best{ background:rgba(76,175,125,0.1); border-color:rgba(76,175,125,0.4); color:#4CAF7D; }
  .locked-cards{ filter:blur(5px); opacity:0.55; pointer-events:none; user-select:none; background:var(--paper-raised); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
  .locked-overlay{ position:absolute; top:0; left:0; right:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; padding:36px 30px 0; }
  /* A lighter variant for spots where the blurred content already speaks
     for itself and a full title+subtitle panel would be overkill — just a
     single centered CTA over the blur. */
  .locked-overlay.locked-overlay-center{ bottom:0; justify-content:center; padding:0; }
  .locked-overlay-panel{ background:var(--paper-raised); border:1px solid var(--line); border-radius:16px; box-shadow:0 12px 32px rgba(20,24,29,0.14); padding:28px 30px; display:flex; flex-direction:column; align-items:center; max-width:360px; }
  /* Scoped to .locked-overlay-panel (present in every usage) rather than
     .locked-overlay (only present when this panel is absolutely
     positioned over a blurred .locked-cards sibling) — a few pages use
     this exact panel as a standalone "N more results, upgrade" message
     with no blurred cards to overlay, and it was skipping the wrapper
     entirely, so its icon/title/sub silently got no styling at all. */
  .locked-overlay-panel .lock-icon{ width:38px; height:38px; border-radius:50%; background:var(--highlighter); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
  .locked-overlay-panel .locked-title{ font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--ink); margin-bottom:6px; }
  .locked-overlay-panel .locked-sub{ font-size:14px; color:var(--ink-soft); max-width:340px; margin-bottom:18px; }
  .btn-subscribe{ font-family:var(--font-body); font-weight:600; font-size:15px; padding:13px 26px; border-radius:10px; border:none; background:var(--highlighter); color:#fff; cursor:pointer; }
  .result-top{ display:flex; justify-content:space-between; gap:16px; align-items:flex-start; flex-wrap:wrap; }
  .result-title-row{ display:flex; align-items:flex-start; gap:10px; min-width:0; }
  .result-title{ font-family:var(--font-display); font-weight:600; font-size:18px; margin-bottom:3px; }
  .result-link{ color:inherit; text-decoration:none; }
  .result-link:hover{ color:var(--highlighter); }
  .result-link:hover svg{ opacity:1; }
  .result-url{ font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); word-break:break-all; }
  .da-badge{ flex:none; text-align:center; background:var(--paper); border:1px solid var(--line-strong); border-radius:8px; padding:8px 12px; position:relative; cursor:default; }
  /* Right-anchored, not centered — the badge sits at the far right edge of
     a wide result card, so a tooltip centered under it ran off the right
     side of the screen and got cut off. Anchoring its right edge to the
     badge's right edge keeps it fully inside the card, growing left where
     there's room instead of overflowing right where there isn't. */
  .da-badge:hover .da-tooltip, .da-badge:focus-within .da-tooltip{ opacity:1; visibility:visible; transform:translateY(-4px); }
  .da-tooltip{ position:absolute; bottom:calc(100% + 8px); right:0; left:auto; transform:translateY(2px); width:220px; max-width:calc(100vw - 48px); background:var(--paper-raised); border:1px solid var(--line-strong); color:var(--ink); border-radius:8px; padding:12px 14px; text-align:left; font-size:12.5px; line-height:1.5; opacity:0; visibility:hidden; transition:opacity .12s ease, transform .12s ease; z-index:20; box-shadow:var(--shadow); pointer-events:none; }
  .da-tooltip::after{ content:""; position:absolute; top:100%; right:24px; left:auto; border:6px solid transparent; border-top-color:var(--paper-raised); }
  /* .result-top wraps when the title's too long to share a line with the
     badge — on a narrow card the badge then sits on its own line, left-
     aligned (not pinned right like the unwrapped desktop case above), so
     right-anchoring the tooltip there would push it off the left edge
     instead. Below the width where wrapping is the common case, anchor
     the tooltip to match. */
  @media (max-width:600px){
    .da-tooltip{ right:auto; left:0; }
    .da-tooltip::after{ right:auto; left:24px; }
  }
  .da-tooltip .tt-title{ font-family:var(--font-body); font-size:11px; font-weight:600; color:var(--highlighter); margin-bottom:6px; }
  .da-tooltip .tt-row{ display:flex; justify-content:space-between; gap:10px; padding:2px 0; }
  .da-tooltip .tt-row span:last-child{ color:var(--ink); font-weight:600; }
  .da-tooltip .tt-foot{ margin-top:8px; padding-top:8px; border-top:1px solid var(--line); color:var(--ink-faint); font-size:11px; font-style:italic; }
  .da-badge .da-num{ font-family:var(--font-display); font-size:20px; font-weight:600; line-height:1; }
  .da-badge .da-label{ font-family:var(--font-body); font-size:11px; color:var(--ink-faint); }

  /* Results table (trial: guest-posts.html) — a dense row per match instead
     of one spacious card, matching how Ahrefs/Semrush show a result list.
     A hover tooltip on the score was tried first and bug-reported: once it
     carried the full breakdown/quote/reason/pitch it got tall enough to
     visually bleed through OTHER rows' buttons (the tooltip is an overlay,
     but sibling rows' own positioned elements — the email-menu split
     button — painted over it). A click-to-open modal (showMatchDetails,
     reusing .modal-wide) has no equivalent stacking problem, so that
     replaced it rather than just repositioning the tooltip again. */
  .results-table{ width:100%; table-layout:fixed; border-collapse:collapse; }
  /* Title case, not uppercase — matches table.saved's real header convention
     (Prospect/Score/Contact) and real backlink-tool tables (Ahrefs: "Referring
     page", Semrush: "Source page title"), neither of which run column labels
     in all-caps. */
  /* A tinted band, not just text sitting on the same background as every
     data row — gave the header no visual weight of its own, which read as
     unstructured/spreadsheet-like rather than a defined table header. */
  .results-table thead th{ text-align:left; font-family:var(--font-body); font-size:11.5px; font-weight:600; color:var(--ink-faint); letter-spacing:.02em; padding:16px 16px 10px; background:var(--paper); }
  .results-table thead th:first-child{ border-top-left-radius:16px; }
  .results-table thead th:last-child{ border-top-right-radius:16px; }
  .results-table thead .rt-th-score{ text-align:center; white-space:nowrap; width:150px; border-left:1px solid var(--line); }
  .results-table thead .rt-th-actions{ width:376px; border-left:1px solid var(--line); }
  .results-table .rt-row td{ padding:14px 16px; border-top:1px solid var(--line); vertical-align:middle; }
  .results-table thead ~ tbody .rt-row:first-child td{ border-top:1px solid var(--line); }
  .rt-match{ width:auto; }
  .rt-match-row{ display:flex; align-items:center; gap:10px; }
  .rt-match-text{ min-width:0; }
  .rt-title{ font-family:var(--font-body); font-weight:600; font-size:15px; color:var(--ink); text-decoration:none; }
  .rt-title:hover{ color:var(--highlighter); }
  /* Details used to sit in the Score column, which read as "details about
     the score" rather than "details about this match". Moved next to the
     domain it actually describes, with a dot separator matching the one
     already used elsewhere in this app (e.g. the trial-unlock note). */
  .rt-match-meta{ display:flex; align-items:center; gap:6px; margin-top:2px; }
  .rt-domain{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); }
  .rt-meta-dot{ color:var(--ink-faint); font-size:11px; }
  /* Fixed width + its own left border, not just "whatever's left after the
     Match column" — on a wide screen that made this column read as an
     orphaned number floating in empty space with no visible boundary. */
  .results-table .rt-row td.rt-score{ width:150px; white-space:nowrap; text-align:center; border-left:1px solid var(--line); }
  /* --font-mono (Space Grotesk), not --font-display (Outfit) — Outfit's
     rounded, chunky weight is exactly the typeface that makes AI-template
     UIs recognizable, and it stood out badly against a dense data table.
     Space Grotesk is already what .rt-domain uses two lines up, so this
     also makes the row's own two "data" elements consistent with each
     other instead of using two different fonts for no reason. */
  /* Reuses .da-badge's real visual language (background/border/radius) —
     the bare number had no container of its own, which read as a loose
     spreadsheet value rather than a defined score element. */
  .rt-score-tile{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; background:var(--paper); border:1px solid var(--line-strong); border-radius:8px; padding:8px 12px; cursor:help; }
  .rt-score-num{ font-family:var(--font-mono); font-size:16px; font-weight:700; color:var(--ink); }
  .rt-details-btn{ font-family:var(--font-body); font-size:11.5px; font-weight:600; color:var(--highlighter); background:none; border:none; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
  /* A single shared tooltip, positioned via JS with position:fixed and
     shown/hidden on hover — not an absolutely-positioned child of each
     tile. The earlier per-row .da-tooltip version of this exact hover
     bled through sibling rows' own positioned elements (their email
     dropdown button) regardless of z-index, because it lived inside each
     row's own stacking context. A single fixed-position element outside
     every row's DOM subtree has no such sibling to lose to. */
  .rt-hover-tooltip{ position:fixed; z-index:500; width:260px; background:var(--paper-raised); border:1px solid var(--line-strong); border-radius:8px; padding:14px 16px; box-shadow:var(--shadow); font-size:12.5px; line-height:1.5; color:var(--ink); display:none; pointer-events:none; }
  .rt-hover-tooltip.show{ display:block; }
  .rt-hover-tooltip .tt-title{ font-family:var(--font-body); font-size:11px; font-weight:600; color:var(--highlighter); margin-bottom:6px; }
  .rt-hover-tooltip .tt-row{ display:flex; justify-content:space-between; gap:10px; padding:3px 0; }
  .rt-hover-tooltip .tt-row span:last-child{ font-weight:600; }
  .rt-hover-tooltip .tt-foot{ margin-top:8px; padding-top:8px; border-top:1px solid var(--line); font-size:11px; color:var(--ink-faint); }
  /* padding-right overridden past the row's default 16px, to match the
     score column's left side and keep the last column off the table's
     outer edge. border-left matches the Match/Score divider so all three
     columns read as a defined grid, not just the first boundary. */
  .results-table .rt-row td.rt-actions{ width:376px; white-space:nowrap; text-align:right; padding-right:24px; border-left:1px solid var(--line); }
  .rt-actions .btn-small + .btn-small, .rt-actions .email-menu + .btn-small{ margin-left:8px; }
  @media (max-width:900px){
    .results-table{ table-layout:auto; }
    .results-table thead .rt-th-score, .results-table thead .rt-th-actions{ width:auto; }
    .rt-score, .rt-actions{ width:auto; }
  }
  @media (max-width:700px){
    .results-table thead{ display:none; }
    .results-table, .results-table tbody, .results-table .rt-row, .results-table .rt-row td{ display:block; width:auto; }
    .rt-score{ border-left:none; margin-top:8px; }
    .rt-actions{ text-align:left; margin-top:8px; }
    .rt-actions .btn-small:first-child{ margin-left:0; }
  }
  .av-generated-badge{ display:inline-block; vertical-align:middle; font-family:var(--font-body); font-size:10.5px; font-weight:600; color:var(--ink-faint); border:1px solid var(--line-strong); border-radius:5px; padding:1px 6px; margin-left:6px; cursor:help; }
  .beta-badge{ display:inline-block; vertical-align:middle; font-family:var(--font-body); font-size:11px; font-weight:700; color:#fff; background:var(--highlighter); border-radius:999px; padding:2px 10px; margin-left:8px; }
  .cite-tooltip-wrap{ position:relative; display:inline-block; }
  .cite-tooltip-wrap:hover .cite-tooltip, .cite-tooltip-wrap:focus-within .cite-tooltip{ opacity:1; visibility:visible; transform:translate(0, -4px); }
  .cite-tooltip{ position:absolute; bottom:calc(100% + 8px); left:0; width:240px; background:var(--paper-raised); border:1px solid var(--line-strong); color:var(--ink-soft); border-radius:8px; padding:12px 14px; font-size:12.5px; line-height:1.5; font-style:italic; opacity:0; visibility:hidden; transition:opacity .12s ease, transform .12s ease; z-index:20; box-shadow:var(--shadow); pointer-events:none; }
  .cite-tooltip .tt-title{ display:block; font-family:var(--font-body); font-size:11px; font-weight:600; color:var(--highlighter); margin-bottom:6px; font-style:normal; }
  .result-quote{ margin:14px 0 10px; padding:12px 14px; background:var(--paper); font-style:italic; font-size:14px; color:var(--ink-soft); border-radius:8px; }
  .result-reason{ font-size:14.5px; color:var(--ink-soft); margin:0 0 8px; }
  /* Broken Links only — the dead URL itself is the pitch, so it gets a
     visual callout instead of sitting inside a sentence like every other
     tool's reason text. */
  .bl-dead-link{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin:10px 0; }
  .bl-dead-link-label{ font-family:var(--font-body); font-size:10.5px; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.03em; flex:none; }
  .bl-dead-link-url{ font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft); text-decoration:line-through; word-break:break-all; }
  .bl-404{ flex:none; font-family:var(--font-body); font-size:10px; font-weight:700; color:#E0574C; border:1px solid #E0574C; border-radius:5px; padding:1px 6px; }
  .type-badge{ display:inline-block; vertical-align:middle; font-family:var(--font-body); font-size:11.5px; font-weight:600; color:var(--highlighter); border:1px solid var(--highlighter); border-radius:5px; padding:2px 8px; margin-left:8px; }
  .type-badge.guestpost-badge{ color:#4CAF7D; border-color:#4CAF7D; }
  .type-badge.duplicate-badge{ color:#E0A93C; border-color:#E0A93C; }
  .type-badge.spam-badge{ color:#E0574C; border-color:#E0574C; }
  .type-badge.sentiment-positive-badge{ color:#4CAF7D; border-color:#4CAF7D; }
  .type-badge.sentiment-negative-badge{ color:#E0574C; border-color:#E0574C; }
  .type-badge.sentiment-neutral-badge{ color:var(--ink-faint); border-color:var(--line-strong); }
  .topic-angle{ background:rgba(110,158,255,0.08); border:1px solid var(--highlighter); border-radius:8px; padding:12px 14px; margin:14px 0 4px; font-size:14.5px; color:var(--ink); }
  .topic-angle-label{ display:block; font-family:var(--font-body); font-size:11.5px; font-weight:600; color:var(--highlighter); margin-bottom:4px; }
  .result-source{ font-size:12.5px; color:var(--ink-faint); font-family:var(--font-mono); margin-bottom:14px; }
  .result-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
  .btn-small{ font-size:13.5px; font-weight:600; padding:9px 18px; border-radius:16px 6px 16px 6px; border:1.5px solid var(--line-strong); background:var(--paper-raised); color:var(--ink); text-decoration:none; cursor:pointer; }
  .btn-small[disabled]{ opacity:0.4; cursor:not-allowed; pointer-events:none; background:var(--paper); border-color:var(--line); color:var(--ink-faint); }
  .btn-small.nudge{ border-color:var(--highlighter); color:var(--ink); }
  .btn-small:hover{ border-color:var(--ink); }
  .btn-small.primary{ background:var(--rust); color:#fff; border-color:var(--rust); }
  .btn-small.saved{ background:var(--teal); color:#fff; border-color:var(--teal); cursor:default; }
  .email-menu{ position:relative; display:inline-flex; }
  .email-menu .btn-caret{ padding:9px 8px; border-left:none; border-top-left-radius:0; border-bottom-left-radius:0; margin-left:-1.5px; }
  .email-menu .btn-small.primary.split{ border-top-right-radius:0; border-bottom-right-radius:0; }
  .email-dropdown{ position:absolute; top:calc(100% + 6px); left:0; min-width:200px; background:var(--paper-raised); border:1px solid var(--line-strong); border-radius:8px; box-shadow:var(--shadow); padding:6px; display:none; z-index:30; }
  .email-dropdown.open{ display:block; }
  .email-dropdown button{ width:100%; text-align:left; background:none; border:none; padding:9px 10px; border-radius:6px; font-size:13.5px; font-family:var(--font-body); color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .email-dropdown button:hover{ background:var(--paper); }
  .email-dropdown .tick{ color:var(--ink-faint); font-size:12px; }
  .no-email-note{ font-size:12px; color:var(--ink-faint); font-family:var(--font-mono); }
  .suppressed-note{ font-size:12px; color:#E0574C; font-family:var(--font-mono); }

  .empty-note{ text-align:center; padding:32px 20px; color:var(--ink-soft); font-size:15px; background:var(--paper-raised); border:1px solid var(--line); border-radius:12px; }

  /* saved / spreadsheet */
  #savedSection{ margin-top:40px; }
  table.saved td.status select{ appearance:none; -webkit-appearance:none; font-size:12.5px; font-family:var(--font-body); font-weight:600; padding:7px 28px 7px 14px; border-radius:999px; border:none; background-color:var(--paper); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237A8290' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; color:var(--ink); cursor:pointer; }
  .notes-input{ width:100%; min-width:140px; min-height:32px; font-size:13px; font-family:var(--font-body); line-height:1.4; padding:6px 8px; border-radius:6px; border:1.5px solid transparent; background:transparent; color:var(--ink); resize:none; overflow:hidden; }
  .notes-input:hover{ background:var(--paper); }
  .notes-input:focus{ outline:none; border-color:var(--highlighter); background:var(--paper-raised); }
  .notes-input::placeholder{ color:var(--ink-faint); }
  table.saved td.status select[data-status="Not contacted"]{ background-color:var(--paper); color:var(--ink-faint); }
  table.saved td.status select[data-status="Contacted"]{ color:var(--highlighter); background-color:rgba(110,158,255,0.14); }
  table.saved td.status select[data-status="Replied"]{ color:#E0A93C; background-color:rgba(224,169,60,0.14); }
  table.saved td.status select[data-status="Link added"]{ color:#4CAF7D; background-color:rgba(76,175,125,0.14); }
  table.saved td.status select[data-status="Opted out"]{ color:#E0574C; background-color:rgba(224,87,76,0.14); }
  .followup-badge{ display:block; font-size:11px; font-weight:600; margin-top:5px; }
  .followup-badge.followup-due{ color:#E0A93C; }
  .followup-badge.followup-stop{ color:var(--ink-faint); }
  .empty-saved-note{ text-align:center; color:var(--ink-faint); font-style:italic; padding:24px 0 !important; }
  .remove-saved-btn{ background:none; border:1.5px solid var(--line-strong); color:var(--ink-faint); width:26px; height:26px; border-radius:6px; cursor:pointer; line-height:1; display:flex; align-items:center; justify-content:center; }
  .remove-saved-btn svg{ width:13px; height:13px; }
  .remove-saved-btn:hover{ border-color:#E0574C; color:#E0574C; background:rgba(224,87,76,0.1); }
  .saved-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:10px; }

  .hub-overview{ display:grid; grid-template-columns:1.3fr 1fr; gap:16px; margin-bottom:16px; align-items:start; }
  .hub-stats{ display:flex; flex-wrap:wrap; gap:10px; }
  .hub-stats .hub-stat-card{ flex:1 1 160px; max-width:260px; }
  .hub-stat-card{ display:flex; flex-direction:column; gap:8px; background:var(--paper-raised); border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
  .hub-stat-card-clickable{ font-family:var(--font-body); cursor:pointer; text-align:left; transition:border-color .15s ease; }
  .hub-stat-card-clickable:hover{ border-color:var(--line-strong); }
  .hub-stat-num{ font-family:var(--font-display); font-size:26px; font-weight:700; color:var(--ink); line-height:1.15; }
  .hub-stat-card-clickable.has-due .hub-stat-num{ color:#B5641F; }
  :root[data-theme="dark"] .hub-stat-card-clickable.has-due .hub-stat-num{ color:#F5B971; }
  .hub-stat-label{ font-size:12px; color:var(--ink-faint); white-space:nowrap; }
  @media (max-width:900px){ .hub-overview{ grid-template-columns:1fr; } }

  /* Backlink Profile's own stat row: one hero stat (domain rank, the
     number people actually scan for first) carries the accent color and
     the size; the other three sit beside it as plain, equal-weight
     numbers. One accent used once, instead of a different hue per tile
     implying a meaning ("good"/"bad") that these counts don't actually
     have relative to each other. */
  .bp-stats{ display:flex; gap:14px; margin-bottom:20px; align-items:stretch; flex-wrap:wrap; }
  .bp-stat-hero{ flex:0 0 200px; background:var(--highlighter); border-radius:14px; padding:18px 20px; color:#fff; }
  .bp-stat-hero .n{ font-family:var(--font-display); font-size:32px; font-weight:700; line-height:1; }
  .bp-stat-hero .l{ font-size:12px; opacity:.85; margin-top:8px; }
  .bp-stat-row{ flex:1 1 240px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .bp-stat{ background:var(--paper-raised); border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
  .bp-stat .n{ font-family:var(--font-display); font-size:24px; font-weight:700; color:var(--ink); }
  .bp-stat .l{ font-size:12px; color:var(--ink-faint); margin-top:6px; }
  @media (max-width:560px){ .bp-stat-hero{ flex:1 1 100%; } .bp-stat-row{ grid-template-columns:1fr; } }

  /* Dofollow/nofollow as a real signal (color-coded dot) instead of plain
     text that reads identically either way at a glance. */
  .bp-link-type{ display:inline-flex; align-items:center; gap:6px; }
  .bp-link-type .dot{ width:7px; height:7px; border-radius:50%; display:inline-block; flex:none; }
  .bp-link-type.dofollow .dot{ background:#2A8457; }
  .bp-link-type.nofollow .dot{ background:var(--line-strong); }

  .hub-newlinks-banner{ background:rgba(76,175,125,0.08); border:1px solid rgba(76,175,125,0.25); border-radius:16px; padding:16px 20px; margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
  .hub-newlinks-left{ display:flex; align-items:center; gap:12px; }
  .hub-newlinks-icon{ width:36px; height:36px; border-radius:10px; background:#4CAF7D; color:#fff; display:flex; align-items:center; justify-content:center; flex:none; }
  .hub-newlinks-title{ font-weight:600; font-size:14.5px; color:var(--ink); }
  .hub-newlinks-sub{ font-size:12.5px; color:var(--ink-soft); }

  .hub-attention-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:16px; padding:20px 22px; margin-bottom:16px; }
  .av-top-panels{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:22px; }
  .av-top-panels .hub-attention-card{ margin-bottom:0; }
  @media (max-width:760px){ .av-top-panels{ grid-template-columns:1fr; } }
  .hub-attention-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; flex-wrap:wrap; gap:6px; }
  .hub-attention-head h2{ font-family:var(--font-display); font-size:18px; margin:0; color:var(--ink); }
  .hub-attention-sub{ font-size:12.5px; color:var(--ink-faint); }
  .hub-attn-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); gap:12px; flex-wrap:wrap; }
  .hub-attn-row:last-child{ border-bottom:none; }
  .hub-attn-left{ display:flex; align-items:center; gap:12px; min-width:0; }
  .hub-attn-dot{ width:8px; height:8px; border-radius:50%; background:#E0A93C; flex:none; }
  .hub-attn-domain{ font-weight:600; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .hub-attn-meta{ font-size:12px; color:var(--ink-faint); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .hub-attn-right{ display:flex; align-items:center; gap:10px; flex:none; }
  .hub-attn-days{ font-size:12px; font-weight:600; color:#E0A93C; background:rgba(224,169,60,0.12); padding:4px 10px; border-radius:999px; white-space:nowrap; }
  .hub-attn-dismiss{ width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line-strong); background:var(--paper-raised); color:var(--ink-faint); font-size:17px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; transition:color .15s ease, border-color .15s ease; }
  .hub-attn-dismiss:hover{ color:var(--ink); border-color:var(--ink); }

  .hub-progress-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:16px; padding:16px; height:100%; }
  .hub-progress-card h3{ margin:0 0 10px; font-size:14px; font-weight:700; color:var(--ink); }
  .hub-progress-row{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
  .hub-donut-wrap{ position:relative; flex:none; width:128px; height:128px; }
  .hub-donut{ width:128px; height:128px; }
  .hub-donut-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
  .hub-donut-total{ font-family:var(--font-display); font-size:30px; font-weight:600; color:var(--ink); line-height:1.1; }
  .hub-donut-total-label{ font-size:11px; color:var(--ink-faint); }
  .hub-legend{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; font-size:13px; min-width:150px; }
  .hub-legend li{ display:flex; align-items:center; justify-content:space-between; gap:9px; font-size:13.5px; color:var(--ink-soft); }
  .hub-legend .dot{ width:9px; height:9px; border-radius:50%; flex:none; }
  .hub-legend .count{ color:var(--ink); font-weight:700; margin-left:auto; display:flex; align-items:baseline; gap:6px; }
  .hub-legend .pct{ color:var(--ink-faint); font-weight:500; font-size:11.5px; width:34px; text-align:right; }
  .saved-tabs{ display:inline-flex; gap:4px; background:var(--paper); border-radius:10px; padding:4px; margin-bottom:16px; flex-wrap:wrap; }
  .saved-filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
  .saved-tab{ display:inline-flex; align-items:center; gap:7px; background:none; border:none; padding:9px 16px; border-radius:7px; font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--ink-faint); cursor:pointer; transition:background .15s ease, color .15s ease; }
  .saved-tab-icon{ display:flex; flex:none; width:15px; height:15px; }
  .saved-tab-icon svg{ width:100%; height:100%; }
  .saved-tab.active{ background:var(--paper-raised); color:var(--ink); box-shadow:0 1px 2px rgba(20,24,29,0.06); }
  .saved-tab.active .saved-tab-icon{ color:var(--highlighter); }
  .saved-tab:not(.active):hover{ color:var(--ink-soft); }
  .saved-head h2{ font-size:20px; }

  .view-toggle{ display:inline-flex; gap:2px; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:3px; }
  .view-toggle-btn{ background:none; border:none; padding:6px 14px; border-radius:999px; font-family:var(--font-body); font-weight:600; font-size:12.5px; color:var(--ink-faint); cursor:pointer; }
  .view-toggle-btn.active{ background:var(--paper-raised); color:var(--ink); box-shadow:0 1px 2px rgba(20,24,29,0.08); }

  .board-columns{ display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; align-items:flex-start; }
  .board-column{ flex:none; width:260px; background:var(--paper); border-radius:12px; padding:10px; }
  .board-column.drag-over{ background:rgba(36,97,232,0.08); outline:2px dashed var(--highlighter); outline-offset:-2px; }
  .board-column-head{ display:flex; align-items:center; justify-content:space-between; padding:6px 6px 10px; }
  .board-column-title{ font-family:var(--font-body); font-weight:600; font-size:13px; color:var(--ink-soft); }
  .board-column-count{ font-size:11.5px; color:var(--ink-faint); background:var(--paper-raised); border:1px solid var(--line); border-radius:999px; padding:1px 8px; }
  .board-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:10px; padding:11px 12px; margin-bottom:8px; cursor:grab; box-shadow:0 1px 2px rgba(20,24,29,0.04); }
  .board-card:active{ cursor:grabbing; }
  .board-card.dragging{ opacity:0.4; }
  .board-card-title{ font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .board-card-subtitle{ font-size:12px; color:var(--ink-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .board-card-notes{ font-size:12px; color:var(--ink-soft); margin-top:7px; padding-top:7px; border-top:1px solid var(--line); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .board-card-followup{ display:inline-block; margin-top:7px; }
  .board-empty-note{ font-size:12px; color:var(--ink-faint); text-align:center; padding:20px 8px; }

  .detail-panel-backdrop{ position:fixed; inset:0; background:rgba(20,24,29,0.35); z-index:80; opacity:0; pointer-events:none; transition:opacity .2s ease; }
  .detail-panel-backdrop.show{ opacity:1; pointer-events:auto; }
  .detail-panel{ position:fixed; top:0; right:0; height:100vh; width:400px; max-width:92vw; background:var(--paper-raised); z-index:81; box-shadow:-8px 0 28px rgba(20,24,29,0.14); transform:translateX(100%); transition:transform .22s ease; padding:26px 24px; overflow-y:auto; }
  .detail-panel.show{ transform:translateX(0); }
  .detail-panel-close{ position:absolute; top:18px; right:18px; background:var(--paper); border:1px solid var(--line); border-radius:8px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); cursor:pointer; }
  .detail-title{ font-family:var(--font-display); font-size:19px; font-weight:600; margin:0 34px 4px 0; }
  .detail-subtitle{ font-size:13px; color:var(--ink-faint); margin-bottom:18px; }
  .detail-meta-row{ display:flex; justify-content:space-between; font-size:12.5px; padding:9px 0; border-bottom:1px solid var(--line); }
  .detail-meta-label{ color:var(--ink-faint); }
  .detail-section-title{ font-size:12px; font-weight:600; color:var(--ink-soft); margin:22px 0 12px; }
  .timeline-item{ display:flex; gap:10px; margin-bottom:14px; }
  .timeline-dot{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--highlighter); margin-top:5px; }
  .timeline-content{ font-size:13px; }
  .timeline-date{ font-size:11.5px; color:var(--ink-faint); margin-top:2px; }

  table.saved{ width:100%; border-collapse:collapse; background:var(--paper-raised); border:1px solid var(--line); border-radius:16px; overflow:hidden; font-size:13px; table-layout:fixed; transition:box-shadow .15s ease, border-color .15s ease; }
  table.saved:hover{ box-shadow:var(--shadow); border-color:var(--line-strong); }
  table.saved th, table.saved td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
  table.saved th{ font-family:var(--font-display); font-size:11.5px; letter-spacing:0.02em; color:var(--ink-faint); font-weight:600; background:var(--paper); }
  table.saved th#overviewScoreHeader:hover{ color:var(--ink); }
  table.saved tbody tr{ position:relative; transition:background .12s ease; }
  table.saved tbody tr:hover{ background:rgba(36,97,232,0.035); box-shadow:inset 3px 0 0 var(--highlighter); }
  table.saved tbody tr:last-child td{ border-bottom:none; }
  table.saved td.status{ font-family:var(--font-body); font-size:11.5px; color:var(--teal); }
  .saved-wrap{ overflow-x:auto; }
  table.saved td, table.saved th{ white-space:normal; }
  table.saved th:nth-child(1), table.saved td:nth-child(1){ width:auto; }
  table.saved th:nth-child(2), table.saved td:nth-child(2){ width:60px; }
  table.saved th:nth-child(3), table.saved td:nth-child(3){ width:19%; word-break:break-all; }
  table.saved th:nth-child(4), table.saved td:nth-child(4){ width:150px; }
  table.saved th:nth-child(5), table.saved td:nth-child(5){ width:22%; }
  table.saved th:nth-child(6), table.saved td:nth-child(6){ width:130px; }
  table.saved a{ color:var(--rust); text-decoration:none; }
  table.av-table{ table-layout:auto; }
  table.av-table th, table.av-table td{ white-space:normal; word-break:normal; }
  table.av-table th:nth-child(2), table.av-table td:nth-child(2){ width:140px; }
  table.av-table th:nth-child(3), table.av-table td:nth-child(3){ width:190px; white-space:nowrap; }
  table.av-table th:nth-child(4), table.av-table td:nth-child(4){ width:26%; }

  /* Outreach's own tables (Prospect/Score/Contact/Status/Notes/Actions) —
     scoped separately from the generic table.saved nth-child widths above,
     since those are shared with Backlink Profile's differently-shaped
     table. At normal widths the generic rules left almost no room for
     "Prospect" (auto got whatever was left over after every other column's
     fixed/percent width), so the domain name overflowed into "Score". */
  table.outreach-table th:nth-child(1), table.outreach-table td:nth-child(1){ width:24%; }
  table.outreach-table th:nth-child(2), table.outreach-table td:nth-child(2){ width:50px; }
  table.outreach-table th:nth-child(3), table.outreach-table td:nth-child(3){ width:17%; word-break:break-all; }
  table.outreach-table th:nth-child(4), table.outreach-table td:nth-child(4){ width:130px; }
  table.outreach-table th:nth-child(5), table.outreach-table td:nth-child(5){ width:17%; }
  table.outreach-table th:nth-child(6), table.outreach-table td:nth-child(6){ width:120px; }
  .prospect-cell{ cursor:pointer; }
  .prospect-name-row{ display:flex; align-items:center; gap:10px; min-width:0; }
  .prospect-name-col{ min-width:0; flex:1; }
  .prospect-avatar{ flex:none; width:26px; height:26px; border-radius:7px; overflow:hidden; background:var(--paper); display:flex; align-items:center; justify-content:center; }
  .prospect-avatar img{ width:16px; height:16px; }
  .prospect-avatar-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:var(--highlighter-soft); color:#fff; font-family:var(--font-display); font-weight:600; font-size:12px; }
  .prospect-name{ font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .prospect-sub{ font-size:12px; color:var(--ink-faint); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .actions-cell{ display:flex; flex-direction:column; gap:6px; }
  .contact-cell{ display:inline-flex; align-items:center; gap:6px; max-width:100%; }
  .contact-cell .contact-email{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .copy-btn{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px; border:none; background:none; color:var(--ink-faint); cursor:pointer; }
  .copy-btn:hover{ background:var(--paper); color:var(--ink); }
  .copy-btn.copied{ color:#4CAF7D; }
  .actions-cell .btn-small{ width:100%; white-space:nowrap; padding:7px 8px; text-align:center; border-radius:7px; }

  .setup-note{ background:var(--paper-raised); border:1px dashed var(--line-strong); border-radius:10px; padding:18px 20px; font-size:13.5px; color:var(--ink-soft); margin-top:30px; }
  .setup-note strong{ color:var(--ink); }
  .setup-note code{ font-family:var(--font-mono); background:var(--paper); padding:2px 6px; border-radius:4px; font-size:12.5px; }
  .setup-note ul{ margin:10px 0 0; padding-left:20px; }

  footer{ padding:44px 0 60px; text-align:center; }
  footer .footer-fine{ font-size:12.5px; color:var(--ink-faint); }

  @media (max-width:560px){ .tool{ padding:24px; padding-top:72px; } table.saved{ font-size:11.5px; } .mode-toggle{ flex-wrap:wrap; } .mode-toggle label{ flex:1 1 100%; } }

  /* Mobile audit fixes (2026-09-30) — every page's hero H1 is set inline
     at a fixed 56px (matching the desktop design), which is wider than a
     phone viewport can fit for a word like "opportunities" and overflows
     rather than wrapping. Same for the search-row form (input+button
     squeezed onto one row) and the Outreach Hub's tab strip/table. Scoped
     to a mobile breakpoint only — desktop is untouched. */
  @media (max-width:640px){
    main h1[style*="font-size:56px"]{ font-size:34px !important; line-height:1.15 !important; }

    .search-row{ flex-direction:column; align-items:stretch; }
    .search-row .btn{ width:100%; justify-content:center; }

    .saved-tabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
    .saved-tabs::-webkit-scrollbar{ display:none; }
    .saved-tab{ flex:none; }

    /* position:sticky on td/th doesn't reliably stick with border-collapse:
       collapse (a long-standing browser quirk) — switching to separate
       with zero spacing keeps the same visual borders but lets the first
       column actually pin in place while the rest of the row scrolls.
       table.saved's own overflow:hidden (used for the rounded corners)
       also breaks sticky, since it becomes the nearest "scroll ancestor"
       for containing-block purposes instead of .saved-wrap, which is the
       element that actually scrolls — clearing it on mobile only. */
    /* Base rule forces the table to exactly 100% width. On a table with
       no per-column widths (e.g. the Backlink Profile list), once the
       other columns' specified widths already exceed the viewport, the
       auto-layout algorithm has nowhere left to put the unconstrained
       first column and collapses it to ~0 instead of letting the table
       grow — min-width:100% keeps short tables from looking too narrow
       while still allowing this overflow-driven growth.
       Also: nth-child(3)'s word-break:break-all (meant for a different
       table's long unbroken strings) fragments a short header like
       "Link type" into single characters once its column shrinks —
       nowrap plus overriding word-break back to normal stops that and
       lets every column take its natural width, overflowing into
       .saved-wrap's horizontal scroll instead of being crushed. */
    table.saved{ border-collapse:separate; border-spacing:0; overflow:visible; width:auto; min-width:100%; }
    table.saved th, table.saved td{ white-space:nowrap; word-break:normal; }
    table.saved th:first-child, table.saved td:first-child{
      position:sticky; left:0; z-index:1;
      background:var(--paper-raised);
      /* Auto-layout tables (the Overview tab) otherwise size this column
         to its longest title/subtitle — 350px+, wider than the phone
         screen itself, so it covers every other column once pinned.
         max-width (not table-layout:fixed, which fought the other
         columns' own inline/percentage widths and made headers overlap)
         caps it so the existing ellipsis rules on .prospect-name/
         .prospect-sub actually truncate the text. */
      max-width:150px; box-shadow:1px 0 0 var(--line);
    }
  }