/* TornCrew shared styles.
   Used by every page (index.html, companies.html, jobs.html).
   Moved verbatim out of index.html - rule order is unchanged. */
  :root{
    --bg: #13151a;
    --card: #1b1e26;
    --surface-2: #21242e;
    --border: #262a35;
    --text: #eef0f3;
    --text-muted: #8992a6;
    --accent: #2dd4bf;
    --accent-dim: #1a8f81;
    --accent-2: #a78bfa;
    --accent-3: #fbbf24;
    --danger: #fb7185;
    --radius: 10px;
    --mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  }
  *{ box-sizing:border-box; }

  #how, #pricing, #faq{ scroll-margin-top:90px; }
  @media (max-width:720px){ #how, #pricing, #faq{ scroll-margin-top:64px; } }

  input[type="checkbox"]{
    appearance:none; -webkit-appearance:none; margin:0;
    border:2px solid #4a5063; border-radius:4px;
    background:var(--surface-2); cursor:pointer; position:relative;
    transition:background 0.15s ease, border-color 0.15s ease;
  }
  input[type="checkbox"]:hover{ border-color:var(--accent-dim); }
  input[type="checkbox"]:checked{ background:var(--accent); border-color:var(--accent); }
  input[type="checkbox"]:checked::after{
    content:''; position:absolute; left:31%; top:14%; width:28%; height:52%;
    border:solid #0b1a18; border-width:0 2px 2px 0; transform:rotate(45deg);
  }
  a{ color:var(--accent-2); }
  a:hover{ color:#c3aefc; }
  a:visited{ color:var(--accent-2); }

  /* ---- Ambient background: two slow-drifting gradient blobs behind everything ---- */
  body::before, body::after{
    content:""; position:fixed; z-index:-1; border-radius:50%; filter:blur(90px); opacity:0.32; pointer-events:none;
  }
  body::before{ width:60vw; height:60vw; max-width:720px; max-height:720px; top:-20vw; left:-15vw; background:radial-gradient(circle, #2dd4bf, transparent 65%); animation:drift1 22s ease-in-out infinite alternate; }
  body::after{ width:55vw; height:55vw; max-width:680px; max-height:680px; bottom:-18vw; right:-15vw; background:radial-gradient(circle, #a78bfa, transparent 65%); animation:drift2 26s ease-in-out infinite alternate; }
  @keyframes drift1{ to{ transform:translate(12vw, 10vw) scale(1.12); } }
  @keyframes drift2{ to{ transform:translate(-10vw, -12vw) scale(1.08); } }
  @media (prefers-reduced-motion: reduce){ body::before, body::after{ animation:none; } }

  .card{ animation:cardIn 0.45s ease both; transition:transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
  .card:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,0.32); border-color:#2f3442; }
  .card.has-open-dropdown{ position:relative; z-index:40; transform:none !important; }
  @keyframes cardIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
  .card:nth-of-type(2){ animation-delay:0.06s; } .card:nth-of-type(3){ animation-delay:0.12s; } .card:nth-of-type(4){ animation-delay:0.18s; }

  .page-view{ animation:viewFadeIn 0.35s ease; }
  .page-kicker{ display:inline-block; font-size:0.7rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:3px 10px; border-radius:999px; margin-bottom:10px; }
  .page-kicker.company{ background:rgba(45,212,191,0.12); color:var(--accent); }
  .page-kicker.faction{ background:rgba(167,139,250,0.14); color:var(--accent-2); }

  .toast{
    position:fixed; bottom:max(24px, calc(env(safe-area-inset-bottom) + 16px)); left:50%; transform:translateX(-50%) translateY(14px);
    background:var(--card); border:1px solid var(--danger); color:var(--text);
    padding:12px 20px; border-radius:10px; font-size:0.86rem; font-weight:600;
    box-shadow:0 10px 28px rgba(0,0,0,0.45); z-index:300; opacity:0;
    transition:opacity 0.25s ease, transform 0.25s ease;
    max-width:90vw; text-align:center;
  }
  .toast-visible{ opacity:1; transform:translateX(-50%) translateY(0); }
  .toast-error{ border-color:var(--danger); }
  .toast-success{ border-color:var(--accent-dim); }
  .toast-info{ border-color:var(--border); }
  @media (max-width:720px){
    .toast{ font-size:0.76rem; padding:9px 12px; max-width:97vw; }
  }

  .review-footer{
    background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
    padding:14px 16px; margin:24px 0 0; font-size:0.85rem; color:var(--text-muted); line-height:1.5;
    text-align:center;
  }
  .review-footer strong{ color:var(--text); }

  .site-footer{
    margin-top:40px; background:var(--card); border-top:1px solid var(--border);
    width:calc(100vw - var(--sidebar-w, 0px)); margin-left:calc(50% - 50vw + var(--sidebar-w, 0px) / 2); margin-right:calc(50% - 50vw + var(--sidebar-w, 0px) / 2);
  }
  .site-footer-inner{
    max-width:1180px; margin:0 auto; padding:24px 20px 28px;
    display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center;
  }
  .site-footer .review-line{ font-size:0.85rem; color:var(--text-muted); line-height:1.5; max-width:70ch; }
  .site-footer .review-line strong{ color:var(--text); }
  .site-footer-links{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; font-size:0.78rem; }
  .site-footer-links a{ color:var(--text-muted); }
  .site-footer-links a:hover{ color:var(--accent-2); }
  .site-footer-copyright{ font-size:0.74rem; color:var(--text-muted); opacity:0.7; }

  .legal-page{ max-width:760px; margin:0 auto; padding:40px 20px 80px; }
  .legal-page h1{ font-size:1.5rem; margin:16px 0 4px; }
  .legal-page h2{ font-size:1.05rem; margin:26px 0 8px; color:var(--text); }
  .legal-page p{ font-size:0.9rem; color:var(--text-muted); line-height:1.65; margin:0 0 4px; }
  .legal-updated{ font-size:0.78rem; color:var(--text-muted); opacity:0.75; margin-bottom:18px; }
  .legal-back{ margin-bottom:8px; }
  .legal-disclaimer{ margin-top:30px; padding-top:16px; border-top:1px solid var(--border); font-size:0.78rem; opacity:0.8; }

  .scan-notice{ font-size:0.76rem; color:var(--text-muted); margin:6px 0 14px; }
  .sortable-th{ cursor:pointer; user-select:none; }
  .sortable-th:hover{ color:var(--text); }
  .sortable-th:hover .sort-arrow-indicator{ opacity:0.7; }
  .sortable-th .th-label{ display:inline; }
  .sortable-th .sort-arrow-indicator{
    display:inline-flex; vertical-align:middle; margin-left:4px; color:var(--text-muted);
    opacity:0.4; transition:opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
  }
  .sortable-th.sort-active{ color:var(--accent); }
  .sortable-th.sort-active .sort-arrow-indicator{ opacity:1; color:var(--accent); }
  .sortable-th.sort-active.sort-asc .sort-arrow-indicator{ transform:rotate(180deg); }

  .mobile-sort{ position:relative; display:none; margin:8px 0 12px; }
  .results-toolbar{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
  .results-toolbar .mobile-sort{ margin:0; }
  .mobile-sort-trigger{
    display:inline-flex; align-items:center; gap:6px;
    background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted);
    box-shadow:none; font-size:0.82rem; font-weight:600; padding:8px 14px; border-radius:999px;
  }
  .mobile-sort-trigger:hover{ box-shadow:none; color:var(--text); }
  .mobile-sort-trigger.sort-active{ color:var(--accent); border-color:var(--accent-dim); background:rgba(45,212,191,0.1); }
  .mobile-sort-menu{
    position:absolute; top:calc(100% + 6px); left:0; z-index:60;
    background:var(--card); border:1px solid var(--border); border-radius:10px;
    padding:6px; min-width:190px; max-height:320px; overflow-y:auto;
    box-shadow:0 12px 32px rgba(0,0,0,0.45);
  }
  .mobile-sort-option{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:10px 12px; border-radius:6px; color:var(--text-muted); font-size:0.85rem;
  }
  .mobile-sort-option:hover{ background:var(--surface-2); color:var(--text); }
  .mobile-sort-option.sort-active{ color:var(--accent); background:rgba(45,212,191,0.1); }
  .mobile-sort-option .sort-arrow-indicator{ margin-left:0; }

  .wip-banner{
    background:rgba(251,191,36,0.1); border:1px solid rgba(251,191,36,0.35); color:#fbbf24;
    border-radius:8px; padding:10px 12px; font-size:0.82rem; line-height:1.5; margin:10px 0 14px;
  }
  .page-switch{ display:flex; gap:6px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:5px; margin-bottom:16px; box-shadow:0 4px 16px rgba(0,0,0,0.18); }
  .switch-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; background:transparent; color:var(--text-muted); box-shadow:none; border-radius:8px; padding:11px; font-size:0.92rem; font-weight:600; }
  .switch-btn:hover{ box-shadow:none; color:var(--text); background:var(--surface-2); }
  .switch-btn.active{ color:#0b1a18; }
  .switch-btn.active[data-page="company"]{ background:linear-gradient(135deg, var(--accent), var(--accent-dim)); }
  .switch-btn.active[data-page="faction"]{ background:linear-gradient(135deg, var(--accent-2), #7c5cd6); }
  .switch-dot{ width:8px; height:8px; border-radius:50%; }
  .switch-dot.company{ background:var(--accent); }
  .switch-dot.faction{ background:var(--accent-2); }
  .switch-btn.active .switch-dot{ background:#0b1a18; }
  body{
    margin:0; padding:32px 24px 0;
    background:var(--bg); color:var(--text);
    font-family:'Inter', -apple-system, sans-serif; line-height:1.5;
    cursor:pointer;
  }
  .container{ max-width:1500px; margin:0 auto; }
  #appContainer{ padding-top:24px; }

  .landing-header{
    position:sticky; top:0; z-index:60; background:var(--bg);
    border-bottom:1px solid var(--border);
    box-shadow:0 8px 20px -8px rgba(0,0,0,0.4);
    width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); margin-top:-32px;
  }
  .landing-header-inner{
    max-width:1180px; margin:0 auto;
    display:flex; justify-content:space-between; align-items:center; gap:12px;
    padding:12px 20px;
  }
  .landing-nav{ display:flex; align-items:center; gap:14px; }
  .landing-nav a{ color:var(--text-muted); text-decoration:none; font-size:0.85rem; }
  .landing-nav a:hover{ color:var(--text); }
  .landing-nav button{ padding:8px 16px; font-size:0.85rem; }
  .pain-section{ margin:26px 0 32px; text-align:left; }
  .pain-headline{ text-align:center; font-size:1.4rem; margin:0 0 18px; }
  .pain-grid{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
  .pain-card{
    flex:1; min-width:220px; background:var(--card); border:1px solid var(--border);
    border-left:3px solid var(--danger); border-radius:8px; padding:14px 16px;
  }
  .pain-quote{ font-size:0.88rem; font-style:italic; color:var(--text); line-height:1.5; margin-bottom:8px; }
  .pain-label{ font-size:0.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; }
  .pain-solution{
    background:rgba(45,212,191,0.08); border:1px solid var(--accent-dim); border-radius:8px;
    padding:16px 18px; font-size:0.92rem; line-height:1.6; color:var(--text);
  }
  .pain-solution strong{ color:var(--accent); }
  .testimonial-section{ margin:22px 0 32px; }
  .resume-scan-banner{
    display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
    background:rgba(251,191,36,0.08); border:1px solid rgba(251,191,36,0.3); border-radius:10px;
    padding:14px 16px; margin-bottom:16px;
  }
  .resume-scan-text{ font-size:0.86rem; color:var(--text); }
  .resume-scan-text strong{ color:var(--accent-3); }
  .resume-scan-actions{ display:flex; gap:8px; flex-shrink:0; }
  @media (max-width:720px){
    .resume-scan-banner{ flex-direction:column; align-items:stretch; }
    .resume-scan-actions button{ flex:1; }
  }

  .testimonial-grid{ display:flex; gap:14px; flex-wrap:wrap; }
  .testimonial-card{
    flex:1; min-width:240px; text-align:center; padding:18px 20px;
    background:rgba(167,139,250,0.06); border:1px solid rgba(167,139,250,0.2); border-radius:12px;
  }
  .testimonial-quote{ font-size:0.94rem; font-style:italic; color:var(--text); line-height:1.6; margin:0 0 10px; }
  .testimonial-author{ font-size:0.78rem; color:var(--accent-2); font-weight:600; }
  @media (max-width:720px){
    .testimonial-grid{ flex-direction:column; }
    .pain-headline{ font-size:1.15rem; }
    .pain-grid{ flex-direction:column; }
  }

  .landing-section{ margin-top:18px; }
  .landing-section h2{ margin:0 0 10px; font-size:1.05rem; }
  .landing-section h3{ margin:0 0 6px; font-size:0.9rem; }
  .landing-section p.sub{ margin:0 0 12px; max-width:none; }
  .steps{ margin:0; padding-left:20px; color:var(--text-muted); font-size:0.88rem; line-height:1.55; }
  .steps li{ margin-bottom:8px; }
  .steps strong{ color:var(--text); }
  .compare{ display:flex; gap:14px; flex-wrap:wrap; }
  .compare > div{ flex:1; min-width:220px; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:12px 14px; }
  .compare ul, .trust-list{ margin:0; padding-left:18px; color:var(--text-muted); font-size:0.85rem; line-height:1.55; }
  .compare > div:last-child{ border-color:var(--accent-dim); }
  .trust-list strong{ color:var(--text); }
  .trust-list code{ font-family:var(--mono); font-size:0.8rem; color:var(--accent); }
  .faq-item{ border-bottom:1px solid var(--border); padding:8px 0; }
  .faq-item summary{ font-size:0.9rem; color:var(--text); font-weight:600; }
  .faq-item p{ margin:8px 0 2px; font-size:0.85rem; color:var(--text-muted); line-height:1.55; max-width:75ch; }
  .landing-wrap{ max-width:1180px; margin:0 auto; padding:40px 20px 80px; }
  .landing-hero{ text-align:center; margin-bottom:28px; }
  .landing-tagline{ font-size:1.25rem; font-weight:600; margin:18px 0 0; color:var(--text); }
  .landing-preview{ margin-bottom:0; overflow-x:auto; }
  .landing-preview table{ min-width:0; width:100%; }
  .landing-preview td, .landing-preview th{ font-size:0.82rem; padding:10px 8px; }
  .landing-preview .preview-label{ display:flex; align-items:center; }
  .preview-label{ font-size:0.78rem; color:var(--text-muted); margin-bottom:12px; font-weight:600; }

  .pricing-grid{ display:flex; gap:10px; flex-wrap:wrap; }
  .pricing-tier{ flex-basis:calc(25% - 8px); }
  .pricing-tier{
    flex:1; min-width:130px; text-align:center; padding:10px 10px;
    border:1px solid var(--border); border-radius:8px; background:var(--surface-2);
  }
  .pricing-tier-highlight{
    border-color:var(--accent-2);
    box-shadow:0 0 0 1px var(--accent-2), 0 6px 20px rgba(167,139,250,0.15);
  }
  .pricing-tier-free{ border-color:var(--accent-dim); }
  .pricing-free-badge{
    display:inline-block; font-size:0.62rem; font-weight:700; letter-spacing:0.02em;
    color:var(--accent); background:rgba(45,212,191,0.12); border:1px solid var(--accent-dim);
    border-radius:999px; padding:2px 8px; margin-bottom:6px; text-transform:uppercase;
  }
  .pricing-name{ font-size:0.82rem; color:var(--text-muted); font-weight:700; margin-bottom:6px; letter-spacing:0.02em; }
  .pricing-price{ font-size:1.7rem; font-weight:800; letter-spacing:-0.01em; }
  .pricing-unit{ font-size:0.95rem; color:var(--accent-2); font-weight:700; }
  .pricing-features{ list-style:none; margin:8px 0 0; padding:0; text-align:left; }
  .pricing-features li{
    display:flex; align-items:flex-start; gap:6px;
    font-size:0.8rem; color:var(--text-muted); line-height:1.4; margin-top:6px;
  }
  .pricing-features li svg{ color:var(--accent); flex-shrink:0; margin-top:3px; }
  .pricing-card .preview-label, #pricing .preview-label{ font-size:1.15rem; color:var(--text); font-weight:700; }
  .pricing-tier{ padding:18px 12px; }
  .pricing-tier-highlight{ transform:scale(1.04); }

  .modal-overlay{
    position:fixed; top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,0.6); z-index:200;
    display:flex; align-items:center; justify-content:center;
    padding:20px; overflow-y:auto;
  }
  .modal-content{ max-width:480px; width:100%; margin:0; }
  .review-popup{ text-align:center; }
  .review-popup-icon{ font-size:2.2rem; text-align:center; }
  .review-popup-actions{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
  .review-popup-actions button{ width:100%; }
  .ref-stat{ display:flex; justify-content:space-between; align-items:center; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:12px 14px; font-size:0.88rem; }
  .ref-stat strong{ font-size:1.5rem; color:var(--accent); }
  .ref-stats-grid{ margin-bottom:18px; }
  .ref-how h3{ font-size:0.95rem; margin:0 0 8px; }

  @media (max-width: 720px) {
    .pricing-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .pricing-tier{ min-width:0; padding:16px 10px; flex-basis:auto; }
    .pricing-tier-highlight{ transform:none; }
    .pricing-name{ font-size:0.74rem; }
    .pricing-price{ font-size:1.5rem; }
    .pricing-unit{ font-size:0.85rem; }
    .pricing-features li{ font-size:0.72rem; }
    .pricing-card .preview-label, #pricing .preview-label{ font-size:1.05rem; justify-content:center; }
  }
  .landing-login{ text-align:left; margin-bottom:20px; }
  .landing-login label{ font-size:0.85rem; color:var(--text-muted); }
  .key-info{ margin-top:12px; font-size:0.8rem; }
  .key-info p{ color:var(--text-muted); margin:8px 0 0; line-height:1.5; }
  .tos-table-wrap{ overflow-x:auto; margin-top:8px; }
  .tos-table{ width:100%; min-width:560px; font-size:0.74rem; border-collapse:collapse; }
  .tos-table th{ text-align:left; color:var(--text-muted); padding:6px 8px; border-bottom:1px solid var(--border); font-weight:600; white-space:nowrap; }
  .tos-table td{ padding:6px 8px; border-bottom:1px solid var(--border); color:var(--text); vertical-align:top; }
  .tos-table tr:last-child td{ border-bottom:none; }

  @media (max-width: 720px) {
    .tos-table{ display:block; min-width:0; }
    .tos-table thead{ display:none; }
    .tos-table tbody, .tos-table tr, .tos-table td{ display:block; width:100%; }
    .tos-table td{ padding:8px 0; border-bottom:1px solid var(--border); }
    .tos-table td::before{
      content: attr(data-label);
      display:block; font-size:0.66rem; color:var(--text-muted); font-weight:600; margin-bottom:2px;
    }
    .tos-table tr:last-child td:last-child{ border-bottom:none; }
  }

  .connected-state{ position:relative; }
  .profile-badge{
    display:flex; align-items:center; gap:8px; cursor:pointer;
    background:var(--surface-2); border:1px solid var(--border); border-radius:999px;
    padding:6px 14px 6px 6px; font-size:0.85rem; max-width:100%;
  }
  #connectedUsername{
    display:inline-block; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle;
  }
  .avatar-circle{
    position:relative;
    width:26px; height:26px; border-radius:50%;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    color:#0b1a18; display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:0.8rem; flex-shrink:0;
  }
  .status-dot{
    position:absolute; bottom:-1px; right:-1px;
    width:9px; height:9px; border-radius:50%;
    background:#22c55e; border:2px solid var(--surface-2);
  }
  .profile-menu{
    position:absolute; top:calc(100% + 8px); right:0; background:var(--card);
    border:1px solid var(--border); border-radius:12px; padding:12px; min-width:210px;
    z-index:80; box-shadow:0 12px 32px rgba(0,0,0,0.45);
    display:flex; flex-direction:column; gap:9px;
  }
  .profile-menu button{
    width:100%; text-align:left; background:var(--surface-2); border:1px solid var(--border); color:var(--text);
    padding:13px 14px; font-size:0.92rem; border-radius:8px; cursor:pointer; box-shadow:none;
    transition:background 0.15s ease, border-color 0.15s ease;
  }
  .profile-menu button:hover{ background:#282c38; border-color:#2f3442; box-shadow:none; }
  .menu-caption{ font-size:0.66rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); padding:4px 12px 2px; }
  .profile-menu button.menu-logout{ background:rgba(251,113,133,0.12); border-color:rgba(251,113,133,0.3); color:var(--danger); }
  .profile-menu button.menu-logout:hover{ background:rgba(251,113,133,0.2); border-color:var(--danger); }

  @media (max-width: 720px) {
    .landing-nav a{ display:none; }
    .landing-header{ margin-top:-20px; }
    .landing-header-inner{ padding:10px 14px; }
    .landing-wrap{ padding:22px 14px 50px; }
    .landing-hero{ margin-bottom:18px; }
    .landing-tagline{ font-size:1.05rem; }
    .landing-login{ margin-bottom:14px; }
    .landing-preview.card{ padding:14px; }

    .landing-preview table{ display:block; min-width:0; }
    .landing-preview thead{ display:none; }
    .landing-preview tbody, .landing-preview tr, .landing-preview td{ display:block; width:100%; }
    .landing-preview tr{
      border:1px solid var(--border); border-radius:8px;
      margin-bottom:8px; padding:7px 10px; background:var(--surface-2);
    }
    .landing-preview tr:last-child{ margin-bottom:0; }
    .landing-preview td{
      border-bottom:none; padding:2px 0;
      display:flex; justify-content:space-between; gap:10px; font-size:0.8rem;
    }
    .landing-preview td::before{
      content: attr(data-label);
      font-size:0.66rem; color:var(--text-muted); font-weight:600;
    }
  }

  .spinner{
    width:16px; height:16px; border-radius:50%;
    border:2px solid var(--border); border-top-color:var(--accent);
    animation:spin 0.7s linear infinite; flex-shrink:0;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  .count-pulse{
    display:inline-block; color:var(--accent); font-weight:700;
    animation: countPulse 0.35s ease;
  }
  @keyframes countPulse{
    0%{ transform:scale(1.25); }
    100%{ transform:scale(1); }
  }

  .view-fade-out{ animation: viewFadeOut 0.25s ease forwards; }
  .view-fade-in{ animation: viewFadeIn 0.35s ease; }
  @keyframes viewFadeOut{ to{ opacity:0; transform:translateY(-8px); } }
  @keyframes viewFadeIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }

  .login-status{ font-size:0.82rem; margin-top:10px; min-height:1.1em; }
  .login-status.error{ color:var(--danger); }
  .login-status.success{ color:var(--accent); }

  .scroll-reveal{
    opacity:0; transform:translateY(28px);
    transition:opacity 0.7s ease, transform 0.7s ease;
  }
  .scroll-reveal.revealed{ opacity:1; transform:translateY(0); }

  .export-csv-btn{
    display:none; align-items:center; gap:6px;
    background:var(--surface-2); border:1px solid var(--accent-dim); color:var(--accent);
    box-shadow:none; font-size:0.8rem; font-weight:600; padding:7px 13px; border-radius:8px;
    margin:8px 0 4px;
  }
  .export-csv-btn:hover{ box-shadow:none; background:rgba(45,212,191,0.1); }
  .export-csv-btn .export-lock-icon{ display:none; }
  .export-csv-btn.locked{
    color:var(--text-muted); border-color:var(--border); cursor:not-allowed;
  }
  .export-csv-btn.locked:hover{ background:var(--surface-2); }
  .export-csv-btn.locked .export-lock-icon{ display:inline; margin-left:2px; }
  @media (prefers-reduced-motion: reduce){
    .scroll-reveal{ opacity:1; transform:none; transition:none; }
  }

  .example-scans-zone{
    width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    background:linear-gradient(135deg, rgba(45,212,191,0.16), rgba(167,139,250,0.16));
    border-top:1px solid rgba(45,212,191,0.35); border-bottom:1px solid rgba(167,139,250,0.35);
    box-shadow:inset 0 1px 40px rgba(45,212,191,0.06);
    padding:36px 20px 40px; margin-top:28px; margin-bottom:28px;
  }
  .example-scans-heading{
    text-align:center; font-size:1.3rem; margin:0 0 20px; color:var(--text);
  }
  .example-scans-inner{
    max-width:1180px; margin:0 auto; display:flex; flex-direction:column; gap:16px;
  }
  @media (max-width:720px){
    .example-scans-zone{ padding:24px 14px 28px; margin-top:18px; margin-bottom:18px; }
    .example-scans-heading{ font-size:1.1rem; margin-bottom:14px; }
  }

  .stats-ticker{
    width:calc(100vw - var(--sidebar-w, 0px)); margin-left:calc(50% - 50vw + var(--sidebar-w, 0px) / 2); margin-right:calc(50% - 50vw + var(--sidebar-w, 0px) / 2);
    background:var(--surface-2); border-bottom:1px solid var(--border);
    overflow:hidden; position:relative; height:36px;
  }
  .stats-ticker-inner{
    max-width:1500px; margin:0 auto; padding:0 20px; height:100%; position:relative;
  }
  .stats-ticker-slide{
    position:absolute; left:20px; right:20px; top:0; height:100%;
    display:flex; align-items:center; justify-content:center;
    font-size:0.92rem; font-weight:600; color:var(--accent); letter-spacing:0.01em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    opacity:0; pointer-events:none;
    transition:opacity 0.4s ease, transform 0.4s ease;
  }
  .stats-ticker-slide.slide-waiting{ transform:translateY(-100%); }
  .stats-ticker-slide.slide-active{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .stats-ticker-slide.slide-exiting{ transform:translateY(100%); }
  @media (max-width:720px){ .stats-ticker{ height:30px; } .stats-ticker-slide{ font-size:0.76rem; left:14px; right:14px; } }

  .app-header{
    position:sticky; top:0; z-index:50;
    /* True full-bleed: break out of body's own padding to the real
       viewport edges on all sides, regardless of body's padding values. */
    width:calc(100vw - var(--sidebar-w, 0px)); margin-left:calc(50% - 50vw + var(--sidebar-w, 0px) / 2); margin-right:calc(50% - 50vw + var(--sidebar-w, 0px) / 2); margin-top:-32px;
    background:var(--bg); border-bottom:1px solid var(--border);
    box-shadow:0 8px 20px -8px rgba(0,0,0,0.4);
  }
  .app-header-inner{
    max-width:1500px; margin:0 auto;
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:16px; padding:14px 24px;
  }
  .brand{ display:flex; align-items:center; gap:10px; }
  h1{ margin:0; font-size:1.3rem; font-weight:700; letter-spacing:-0.01em; }
  .made-by{ font-size:0.68rem; color:var(--text-muted); font-weight:400; margin-top:1px; }
  .badge{
    font-size:0.7rem; font-weight:600; color:var(--text-muted);
    background:var(--surface-2); border:1px solid var(--border);
    padding:2px 8px; border-radius:999px;
  }
  .key-form{ display:flex; align-items:center; gap:6px; }
  .key-wrap{ position:relative; display:flex; align-items:center; }
  .key-wrap input{ width:190px; padding:8px 34px 8px 12px; }
  .key-toggle{
    position:absolute; right:6px; background:none; border:none;
    color:var(--text-muted); cursor:pointer; padding:4px;
    display:flex; align-items:center; justify-content:center;
  }
  .key-toggle:hover{ color:var(--text); }

  .card{
    background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius); padding:18px; margin-bottom:14px;
    box-shadow:0 4px 16px rgba(0,0,0,0.18);
  }
  .card h2{ margin:0 0 6px; font-size:1.05rem; font-weight:600; }
  .card .sub{ margin:0 0 18px; font-size:0.85rem; color:var(--text-muted); max-width:65ch; }

  label{ display:block; font-size:0.78rem; color:var(--text-muted); margin-bottom:5px; }
  input[type="text"], input[type="password"], input[type="number"], textarea, select{
    width:100%; background:var(--bg); border:1px solid var(--border);
    color:var(--text); border-radius:6px; padding:9px 11px;
    font-family:inherit; font-size:0.88rem;
  }
  textarea{ resize:vertical; }
  input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--accent-dim); }

  select{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    cursor:pointer; padding-right:34px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238992a6' stroke-width='2.5' 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;
  }
  select option{ background:var(--card); color:var(--text); }

  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
  input[type="number"]{ -moz-appearance:textfield; appearance:textfield; }

  input[type="range"]{
    -webkit-appearance:none; appearance:none; background:transparent;
    padding:8px 0; height:20px; width:100%;
    position:relative; z-index:3;
  }
  input[type="range"]::-webkit-slider-runnable-track{
    height:6px; background:transparent; border:none;
  }
  input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none; margin-top:-7px;
    width:18px; height:18px; border-radius:50%; background:var(--accent);
    border:2px solid var(--bg); cursor:pointer;
  }
  input[type="range"]::-moz-range-track{
    height:6px; background:transparent; border:none;
  }
  input[type="range"]::-moz-range-thumb{
    width:16px; height:16px; border-radius:50%; background:var(--accent);
    border:2px solid var(--bg); cursor:pointer;
  }

  .slider-wrap{ position:relative; }
  .slider-track-bg{
    position:absolute; top:50%; left:0; right:0; height:6px;
    transform:translateY(-50%); background:var(--surface-2); border:1px solid var(--border);
    border-radius:999px; z-index:1; pointer-events:none;
  }
  .slider-ticks{ position:absolute; top:0; left:0; right:0; height:20px; pointer-events:none; z-index:2; }
  .tick{
    position:absolute; top:50%; width:2px; height:6px; background:var(--border);
    transform:translate(-50%, -50%); border-radius:1px; pointer-events:none;
  }
  .tick.tick-mid{ width:2px; height:8px; background:var(--text-muted); }

  .row{ display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end; }
  .field{ flex:1; min-width:160px; }
  /* Desktop only: on wide screens the inputs stretched the full card
     width even though they hold a handful of characters. The card itself
     stays full width so it lines up with the results card below; only
     the controls inside it are capped. */
  @media (min-width:721px){
    .scan-form-card .row,
    .scan-form-card details,
    .scan-form-card .resume-scan-banner{ max-width:780px; }
    .scan-form-card #presetsPanel{ max-width:620px; }
    .scan-form-card #minStatsField{ flex:0 1 300px; }
  }
  .mode-toggle{ display:inline-flex; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:3px; margin-bottom:14px; }
  .mode-btn{
    background:transparent; color:var(--text-muted); box-shadow:none; border-radius:6px;
    padding:8px 14px; font-size:0.85rem; font-weight:600;
  }
  .mode-btn:hover{ box-shadow:none; color:var(--text); }
  .mode-btn.active{ background:linear-gradient(135deg, var(--accent), var(--accent-dim)); color:#0b1a18; }
  .field-hint{ font-size:0.76rem; color:var(--accent-3); margin-top:5px; min-height:1.1em; }
  .field-hint-error{ color:var(--danger); font-weight:600; animation:hintShake 0.4s ease; }
  @keyframes hintShake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); } }
  .checkbox-field{ display:flex; align-items:center; gap:8px; cursor:pointer; font-size:0.85rem; color:var(--text); }
  .checkbox-field input[type="checkbox"]{ width:17px; height:17px; flex-shrink:0; }

  button{
    background:linear-gradient(135deg, var(--accent), var(--accent-dim));
    color:#0b1a18; border:none;
    font-weight:600; font-size:0.9rem; padding:11px 20px;
    border-radius:6px; cursor:pointer;
    box-shadow:0 2px 10px rgba(45,212,191,0.18);
    transition:box-shadow 0.15s ease, transform 0.1s ease;
  }
  button:hover{ box-shadow:0 4px 16px rgba(45,212,191,0.28); }
  button:active{ transform:translateY(1px); }
  button:disabled{ opacity:0.45; cursor:not-allowed; box-shadow:none; }
  button.secondary{ background:var(--surface-2); color:var(--text); border:1px solid var(--border); font-size:0.82rem; padding:6px 12px; box-shadow:none; }
  button.secondary:hover{ background:#282c38; box-shadow:none; }
  button.small-copy{ background:var(--surface-2); color:var(--accent); border:1px solid var(--border); font-size:0.78rem; padding:5px 10px; }
  button.small-copy:hover{ background:#282c38; }

  .primary-row{ display:flex; align-items:center; gap:14px; margin-top:6px; }
  .status-text{ font-size:0.83rem; color:var(--text-muted); }

  details{ margin-top:16px; }
  summary{ cursor:pointer; font-size:0.83rem; color:var(--text-muted); user-select:none; }
  summary:hover{ color:var(--text); }
  .advanced-grid{ margin-top:14px; display:flex; flex-direction:column; gap:14px; }

  table{ width:100%; border-collapse:collapse; }
  .results-tbody tr{ transition:background-color 0.15s ease; }
  .results-tbody tr:hover{ background:var(--surface-2); }
  th{
    text-align:left; font-size:0.72rem; font-weight:600; color:var(--text-muted);
    padding:8px 4px; border-bottom:1px solid var(--border);
  }
  td{ padding:9px 4px; border-bottom:1px solid var(--border); font-size:0.82rem; vertical-align:top; }
  tr:last-child td{ border-bottom:none; }
  .player-name{ color:var(--accent); font-weight:600; text-decoration:none; }
  .player-name:hover{ text-decoration:underline; }
  .player-id{ font-family:var(--mono); font-size:0.78rem; color:var(--text-muted); }
  .msg-icon-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:24px; height:24px; padding:0; margin-left:6px; vertical-align:middle;
    background:var(--surface-2); border:1px solid var(--border); border-radius:6px;
    color:var(--text-muted); box-shadow:none;
  }
  .msg-icon-btn:hover{ box-shadow:none; color:var(--accent-2); border-color:var(--accent-2); }

  .contacted-checkbox{
    display:inline-flex; align-items:center; gap:6px; cursor:pointer;
    font-size:0.82rem; color:var(--text-muted); white-space:nowrap;
  }
  .contacted-checkbox input[type="checkbox"]{ width:16px; height:16px; flex-shrink:0; }
  .contacted-checkbox input[type="checkbox"]:checked ~ span{ color:var(--accent); font-weight:600; }
  /* The results table uses auto layout, so the width:N% hints on <th> are
     only suggestions - the browser sizes columns by content. That makes
     percentage widths on a note field useless (300% of a narrow Contacted
     cell is still narrow). Fixed pixel width, absolutely positioned with
     an explicit top so it stays in the right place, is the reliable way
     to get a consistently wide field here. Row height is reserved via
     padding-bottom on the cell, since an absolute element adds none. */
  .contacted-cell{ position:relative; padding-bottom:50px; }
  /* Must be input.note-input, not just .note-input: the global
     input[type="text"] rule sets width:100% at specificity (0,1,1), which
     beats a bare class (0,1,0) - that's why earlier width changes here
     silently did nothing at all. */
  input.note-input{
    display:block; box-sizing:border-box; width:420px; font-size:0.78rem; padding:4px 7px;
    position:absolute; top:44px; right:7px;
  }
  .note-lock-icon{
    display:flex; align-items:center; gap:4px; width:fit-content;
    font-size:0.76rem; color:var(--text-muted); cursor:pointer; opacity:0.75;
    position:absolute; top:48px; right:7px;
  }
  .note-lock-icon:hover{ color:var(--accent-3); opacity:1; }
  .sub-line{ display:block; }
  .work-stats-val{ font-family:var(--mono); font-weight:600; }
  .pill{ display:inline-block; font-size:0.75rem; font-weight:600; padding:2px 9px; border-radius:999px; }
  .pill-unemployed{ background:rgba(45,212,191,0.12); color:var(--accent); }
  .pill-city{ background:rgba(167,139,250,0.14); color:var(--accent-2); }
  .pill-employed{ background:var(--surface-2); color:var(--text-muted); }
  .new-candidate-badge{
    display:inline-block; font-size:0.65rem; font-weight:700; letter-spacing:0.03em;
    padding:1px 6px; border-radius:999px; margin-left:6px; vertical-align:middle;
    background:rgba(251,191,36,0.16); color:var(--accent-3);
  }

  .collapsible-header{
    display:flex; align-items:center; justify-content:space-between; cursor:pointer;
  }
  .collapsible-arrow{ transition:transform 0.2s ease; flex-shrink:0; color:var(--text-muted); }
  .collapsible-arrow.collapsed{ transform:rotate(-90deg); }

  .feature-lock-overlay{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(19,21,26,0.72); backdrop-filter:blur(3px); border-radius:inherit;
    z-index:2;
  }
  .feature-lock-message{
    display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
    color:var(--text-muted); font-size:0.85rem; padding:12px;
  }
  .feature-lock-message svg{ color:var(--accent-3); }
  .feature-lock-message button{ padding:6px 16px; font-size:0.82rem; }

  .msg-actions{ display:flex; gap:6px; }
  .msg-preview{
    width:100%; margin-top:8px; font-size:0.8rem;
    resize:none; overflow:hidden; display:none;
  }
  .empty-note{ text-align:center; color:var(--text-muted); padding:32px; font-size:0.88rem; }

  .history-header{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:6px; }

  .custom-select{ position:relative; min-width:120px; }
  .custom-select-trigger{
    width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text);
    border-radius:6px; padding:8px 11px; font-size:0.85rem; font-weight:500;
    display:flex; justify-content:space-between; align-items:center; gap:8px;
    cursor:pointer; text-align:left;
  }
  .custom-select-trigger:hover{ border-color:var(--accent-dim); }
  .custom-select-arrow{ color:var(--text-muted); flex-shrink:0; transition:transform 0.15s ease; }
  .custom-select.open .custom-select-trigger{ border-color:var(--accent-dim); }
  .custom-select.open .custom-select-arrow{ transform:rotate(180deg); }
  .custom-select-menu{
    display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:120;
    background:var(--card); border:1px solid var(--border); border-radius:8px;
    padding:6px; box-shadow:0 8px 24px rgba(0,0,0,0.35); max-height:240px; overflow-y:auto;
  }
  .custom-select.open{ position:relative; z-index:120; }
  .custom-select.open .custom-select-menu{ display:block; }
  .custom-select-option{
    padding:9px 10px; border-radius:6px; font-size:0.85rem; cursor:pointer; color:var(--text);
  }
  .custom-select-option:hover{ background:var(--surface-2); }
  .custom-select-option.selected{ background:var(--accent); color:#0b1a18; font-weight:600; }

  .history-pagination{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:16px; }
  .history-pagination .page-label{ font-size:0.82rem; color:var(--text-muted); }

  @media (max-width: 720px) {
    body{ padding:20px 14px 0; }
    .app-header{ margin-top:-20px; }
    #connectedUsername{ display:none; }
    .profile-badge{ padding:6px 8px; gap:4px; }
    .card{ padding:16px; }
    .key-form{ width:100%; justify-content:stretch; }
    .key-wrap{ flex:1; }
    .key-wrap input{ width:100%; }
    .row{ flex-direction:column; align-items:stretch; gap:12px; }
    .field{ min-width:0; }
    .row > div > label[style*="visibility:hidden"]{ display:none; }
    .row > div > .field-hint{ display:none; }
    #findBtn, #stopBtn{ width:100%; }
    .row > div:last-child{ width:100%; }

    table{ display:block; }
    thead{ display:none; }
    .mobile-sort{ display:inline-block; float:right; }
    .results-toolbar .mobile-sort{ float:none; margin-left:auto; }
    .mobile-sort-menu{ left:auto; right:0; }
    tbody, tr, td{ display:block; width:100%; }
    .results-tbody{ display:grid; grid-template-columns:1fr; gap:8px; }
    .results-tbody td.empty-note{ grid-column:1 / -1; }
    .results-tbody tr{
      border:1px solid var(--border); border-radius:10px;
      margin-bottom:0; padding:10px 11px; background:var(--surface-2);
      box-shadow:0 3px 10px rgba(0,0,0,0.22);
      display:flex; flex-direction:column; gap:0;
    }
    /* Player is the card header: name + id on one line, never wrapping */
    .results-tbody td[data-label="Player"]{
      display:flex; align-items:baseline; justify-content:flex-start; gap:6px;
      padding:0 0 7px; margin-bottom:6px; border-bottom:1px solid var(--border);
      overflow:hidden;
    }
    .results-tbody td[data-label="Player"]::before{ content:none; }
    .results-tbody .player-name{ font-size:0.9rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .results-tbody td[data-label="Player"] .sub-line{
      display:inline; margin:0; font-size:0.72rem; color:var(--text-muted); flex-shrink:0;
    }
    .results-tbody td[data-label="Player"] .msg-icon-btn{ flex-shrink:0; margin-left:auto; }
    /* Every other field: dim label left, value right, one tidy row */
    .results-tbody td{
      border-bottom:none; padding:2px 0;
      display:flex; justify-content:space-between; align-items:baseline; gap:10px;
      font-size:0.8rem; line-height:1.5; white-space:nowrap;
    }
    .results-tbody td::before{
      content: attr(data-label);
      font-size:0.7rem; color:var(--text-muted); font-weight:600; flex-shrink:0;
    }
    .results-tbody td > span, .results-tbody td .work-stats-val{ text-align:right; }
    .results-tbody .sub-line{ display:inline; margin-left:5px; }
    .results-tbody .pill{ font-size:0.7rem; padding:2px 8px; }
    .results-tbody td.msg-cell{
      display:flex; flex-direction:column; align-items:stretch; gap:6px;
      padding-top:8px; margin-top:6px; border-top:1px solid var(--border); white-space:normal;
    }
    .results-tbody td.msg-cell::before{ content:none; }
    .results-tbody td.contacted-cell::before{ content:none; }
    .results-tbody td.contacted-cell{
      flex-direction:column; align-items:flex-start; justify-content:flex-start; padding-bottom:2px;
    }
    .results-tbody input.note-input{ position:static; width:100%; margin-top:6px; }
    .results-tbody .note-lock-icon{ position:static; width:fit-content; margin-top:6px; }
    .results-tbody .msg-actions{ display:flex; gap:6px; }
    .results-tbody .small-copy{ flex:1; font-size:0.74rem; padding:6px 8px; text-align:center; }
    .results-tbody .msg-preview{ font-size:0.76rem; width:100%; }
    .results-tbody td.empty-note{ display:block; text-align:center; white-space:normal; }
    .results-tbody td.empty-note::before{ content:none; }
    .empty-note{ display:block; padding:20px; }
  }

  /* ---- Sidebar navigation (desktop) ------------------------------------
     Rendered by nav.js into <aside id="sideNav" class="side-nav">. Pages
     that use it wrap their app in .app-shell, which sets --sidebar-w.
     Everywhere else --sidebar-w is unset (0), so full-bleed elements keep
     their normal maths. Below 1024px there is no sidebar; each page keeps
     its own dropdown menu. */
  .side-nav{ display:none; }
  @media (min-width:1024px){
    .app-shell{ --sidebar-w:256px; padding-left:var(--sidebar-w); }
    .app-shell .app-header .brand{ display:none; }
    .app-shell .app-header-inner{ justify-content:flex-end; }
    .side-nav{
      display:flex; flex-direction:column; gap:2px;
      position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w); z-index:60;
      background:var(--card); border-right:1px solid var(--border);
      padding:0 12px 16px; overflow-y:auto; box-sizing:border-box;
    }
  }
  /* Exactly the app header's height (69px incl. its border), so the two
     dividers form one continuous line across the top of the page. */
  .side-nav-brand{
    display:flex; align-items:center; gap:10px; flex-shrink:0;
    height:69px; box-sizing:border-box; margin:0 -12px 6px; padding:0 20px;
    border-bottom:1px solid var(--border); text-decoration:none; color:var(--text);
  }
  .side-nav-title{ display:block; font-weight:700; font-size:1.05rem; line-height:1.2; }
  .side-nav-sub{ display:block; font-size:0.72rem; color:var(--text-muted); }
  .side-nav-section{
    font-size:0.68rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--text-muted); padding:14px 12px 6px; opacity:0.8;
  }
  .side-nav-link{
    display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px;
    color:var(--text-muted); font-weight:500; font-size:0.9rem; text-decoration:none;
    transition:background-color 0.15s ease, color 0.15s ease;
  }
  .side-nav-link:hover{ background:var(--surface-2); color:var(--text); }
  .side-nav-link.active{
    background:linear-gradient(135deg, rgba(45,212,191,0.18), rgba(45,212,191,0.06));
    color:var(--accent); box-shadow:inset 0 0 0 1px rgba(45,212,191,0.3); font-weight:600;
  }
  .side-nav-icon{ flex-shrink:0; }
  .side-nav-label{ flex:1; }
  /* A soft light sweep across the pill every few seconds. */
  .side-nav-badge{
    font-size:0.62rem; font-weight:700; letter-spacing:0.04em; padding:2px 7px; border-radius:999px;
    color:var(--accent-3);
    background:linear-gradient(110deg, rgba(251,191,36,0.16) 35%, rgba(251,191,36,0.5) 50%, rgba(251,191,36,0.16) 65%);
    background-size:250% 100%;
    animation:badge-shine 3.6s ease-in-out infinite;
  }
  @keyframes badge-shine{ 0%{ background-position:120% 0; } 55%, 100%{ background-position:-20% 0; } }
  .side-nav-footer{ margin-top:auto; padding:14px 12px 0; border-top:1px solid var(--border); font-size:0.75rem; }
  .side-nav-footer a{ color:var(--text-muted); text-decoration:none; }
  .side-nav-footer a:hover{ color:var(--accent); }

  /* ---- Job Seekers page (jobs.html) ---------------------------------- */
  a.brand{ color:inherit; text-decoration:none; }
  .seg{ display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; background:var(--bg); border:1px solid var(--border); border-radius:10px; }
  .seg button{
    background:transparent; border:none; box-shadow:none; color:var(--text-muted);
    padding:6px 12px; font-size:0.82rem; font-weight:600; border-radius:7px; cursor:pointer;
  }
  .seg button:hover{ color:var(--text); background:var(--surface-2); box-shadow:none; }
  .seg button.active{ background:rgba(45,212,191,0.16); color:var(--accent); box-shadow:inset 0 0 0 1px rgba(45,212,191,0.3); }
  .js-filter-grid{ display:grid; grid-template-columns:repeat(4, minmax(110px, 150px)) minmax(180px, 280px); gap:14px 16px; align-items:end; }
  .js-checks{ grid-column:1 / -1; }
  .js-checks{ display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; padding-bottom:9px; }
  .js-toolbar{ display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; margin-bottom:16px; }
  .js-toolbar-group{ display:flex; align-items:center; gap:10px; }
  .js-toolbar-label{ font-size:0.75rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.05em; }
  .sync-note{ font-size:0.78rem; color:var(--text-muted); }
  .stat-chips{ display:flex; flex-wrap:nowrap; gap:3px; margin-top:3px; }
  .stat-chip{ font-size:0.68rem; padding:1px 5px; border-radius:5px; background:var(--surface-2); color:var(--text-muted); font-family:var(--mono); white-space:nowrap; }
  .stat-total{ font-family:var(--mono); font-weight:700; color:var(--text); }
  .post-excerpt{ font-size:0.8rem; color:var(--text-muted); line-height:1.45; max-width:360px; white-space:normal; }
  .post-excerpt.clamped{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
  .post-actions{ display:flex; gap:10px; margin-top:4px; font-size:0.75rem; }
  .post-actions a, .post-actions button{ color:var(--accent); background:none; border:none; box-shadow:none; padding:0; font-size:0.75rem; font-weight:600; cursor:pointer; text-decoration:none; }
  .post-actions button:hover, .post-actions a:hover{ text-decoration:underline; box-shadow:none; background:none; }
  .pending-cell{ color:var(--text-muted); font-style:italic; font-size:0.78rem; }
  .post-excerpt{ overflow-wrap:anywhere; }
  @media (max-width:720px){
    .post-excerpt{ max-width:none; }
    .js-toolbar{ gap:12px; }
    .js-toolbar-group{ flex-direction:column; align-items:stretch; width:100%; gap:6px; }
    .js-filter-grid{ grid-template-columns:1fr 1fr; }
    .js-filter-grid .field-search{ grid-column:1 / -1; }
    .post-excerpt.clamped{ -webkit-line-clamp:3; }
    .js-checks{ flex-direction:column; align-items:flex-start; padding-bottom:0; }
    #jobsBody td[data-label="Post"]{ flex-direction:column; align-items:stretch; gap:4px; white-space:normal; }
    .js-toolbar-group .seg{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; }
    .js-toolbar-group .seg button{ padding:7px 4px; }
    /* A card can never be wider than the screen, whatever a post contains:
       a long unbroken word or link wraps, a long name is cut with an ellipsis. */
    #jobsBody{ grid-template-columns:minmax(0, 1fr); }
    #jobsBody tr, #jobsBody td{ min-width:0; }
    #jobsBody td[data-label="Player"] .player-name{ min-width:0; }
    #jobsBody td .sub-line{ min-width:0; white-space:normal; overflow-wrap:anywhere; text-align:right; }
    #jobsBody .stat-chips{ flex-wrap:wrap; justify-content:flex-end; }
    #jobsBody td[data-label="Stated stats"]{ align-items:flex-start; }
  }

  /* ---- Layout: footer always at the bottom ---------------------------
     The app shell fills the screen (minus the body's top padding) and its
     main content grows, so on short pages the footer still sits at the
     very bottom. The body has no bottom padding, so there's no gap under
     the footer either. Legal pages have no footer, so they keep their own
     bottom spacing. */
  .app-shell{ display:flex; flex-direction:column; min-height:calc(100vh - 32px); min-height:calc(100dvh - 32px); }
  .app-shell > .container{ width:100%; flex:1 0 auto; }
  @media (max-width:720px){
    .app-shell{ min-height:calc(100vh - 20px); min-height:calc(100dvh - 20px); }
  }

  /* ---- Desktop: the header's content lives in the sidebar ------------- */
  @media (min-width:1024px){
    .app-shell.header-in-sidebar .app-header{ display:none; }
    /* the header used to cancel the body's top padding; now the first element does */
    .app-shell.header-in-sidebar .stats-ticker{ margin-top:-32px; }
  }
  .side-nav-account{ margin-top:auto; padding-top:10px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:2px; }
  .side-nav-user{ display:flex; align-items:center; gap:10px; padding:8px 12px; min-width:0; }
  .side-nav-user .avatar-circle{ flex-shrink:0; }
  .side-nav-username{ font-weight:600; font-size:0.88rem; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  button.side-nav-link{ width:100%; background:none; border:none; box-shadow:none; cursor:pointer; text-align:left; font-family:inherit; }
  button.side-nav-link:hover{ box-shadow:none; }
  .side-nav-logout:hover{ color:var(--danger); }
  .side-nav-footer{ margin-top:6px; }

  /* ---- Mobile dropdown icons (same icons as the sidebar) --------------- */
  .profile-menu{ min-width:250px; }
  .profile-menu button{ display:flex; align-items:center; gap:10px; white-space:nowrap; }
  .profile-menu .menu-icon{ flex-shrink:0; color:var(--text-muted); }
  .profile-menu .side-nav-badge{ margin-left:auto; }

  /* ---- News banner extras ------------------------------------------------ */
  .stats-ticker-slide a{ color:inherit; text-decoration:underline; }
  .tk-emoji{ display:inline-block; margin-right:6px; }
  .tk-pulse{ animation:tk-pulse 1.8s ease-in-out infinite; transform-origin:50% 70%; }
  @keyframes tk-pulse{
    0%, 100%{ transform:scale(1) rotate(0deg); }
    50%{ transform:scale(1.22) rotate(-8deg); }
  }
  /* With Reduce Motion on, the shimmer stays (a colour sweep, not movement)
     and the pulse turns smaller and slower rather than stopping. */
  @keyframes tk-pulse-soft{
    0%, 100%{ transform:scale(1); }
    50%{ transform:scale(1.1); }
  }
  @media (prefers-reduced-motion: reduce){
    .tk-pulse{ animation:tk-pulse-soft 2.6s ease-in-out infinite; }
  }
  .tk-track{ display:inline-block; white-space:nowrap; will-change:transform; }
  .stats-ticker-slide.tk-overflow{ justify-content:flex-start; text-overflow:clip; }

  /* ---- Job Seekers extras ------------------------------------------------ */
  .ee-chip{ background:rgba(167,139,250,0.14); color:var(--accent-2); font-weight:600; }
  .card .sub.js-progress{ color:var(--accent); font-size:0.82rem; margin:-2px 0 12px; max-width:none; }
  .link-btn{ background:none; border:none; box-shadow:none; padding:0; color:var(--accent); font-size:0.78rem; font-weight:600; cursor:pointer; }
  .link-btn:hover{ text-decoration:underline; box-shadow:none; background:none; }
  .post-actions [hidden]{ display:none; }
  @media (max-width:720px){
    .connected-username{ display:none; }
  }

  /* ---- Loading and presets ------------------------------------------------ */
  .loading-inline{ display:inline-flex; align-items:center; gap:10px; }
  #presetsPanel{ cursor:pointer; }
  #presetsPanelBody{ cursor:auto; }

  /* ---- Job Seekers: listings -------------------------------------------- */
  .listing-cta{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin:4px 0 18px; }
  .listing-cta-note{ font-size:0.8rem; color:var(--text-muted); }
  .listing-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:14px; }
  #listingCard textarea{
    width:100%; box-sizing:border-box; resize:vertical; min-height:70px;
    background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:8px;
    padding:10px 12px; font:inherit; font-size:0.88rem;
  }
  #listingCard textarea:focus{ outline:none; border-color:var(--accent); }
  #listingCard .js-filter-grid{ grid-template-columns:repeat(4, minmax(100px, 150px)); }
  #listingCard .field-search{ grid-column:1 / -1; }
  .source-pill{
    display:inline-block; font-size:0.66rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
    padding:2px 7px; border-radius:999px; margin-bottom:4px;
    background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border);
  }
  .source-pill.listing-pill{ background:rgba(45,212,191,0.14); color:var(--accent); border-color:rgba(45,212,191,0.35); }
  @media (max-width:720px){
    #listingCard .js-filter-grid{ grid-template-columns:1fr 1fr; }
    #jobsBody td[data-label="Post"] .source-pill{ align-self:flex-start; }
  }

  /* ---- Back to top (phones and tablets) --------------------------------- */
  .back-to-top{
    position:fixed; right:16px; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); z-index:150;
    width:44px; height:44px; padding:0; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(27,30,38,0.7); color:var(--accent);
    border:1px solid rgba(45,212,191,0.35); box-shadow:0 6px 20px rgba(0,0,0,0.35);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    opacity:0; transform:translateY(12px) scale(0.9); pointer-events:none;
    transition:opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
  }
  .back-to-top.visible{ opacity:1; transform:none; pointer-events:auto; }
  .back-to-top:hover, .back-to-top:active{ background:rgba(27,30,38,0.9); transform:none; box-shadow:0 6px 20px rgba(0,0,0,0.35); }
  @media (min-width:1024px){ .back-to-top{ display:none; } }

  /* ---- Company Insights (companies.html) ------------------------------- */
  .card .sub.ci-meta{ max-width:none; color:var(--accent); font-size:0.82rem; margin:-2px 0 16px; }
  .ci-assumptions{ display:flex; flex-direction:column; gap:14px; }
  .ci-stars .seg button{ padding:6px 9px; }
  .ci-inputs{ display:grid; grid-template-columns:minmax(200px, 260px) repeat(2, minmax(150px, 190px)) auto; gap:14px 18px; align-items:end; }
  .ci-inputs .slider-wrap{ padding-bottom:6px; }
  .ci-inputs .checkbox-field{ padding-bottom:9px; }
  .ci-picks{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-bottom:16px; }
  .ci-pick{
    display:flex; flex-direction:column; gap:3px; text-align:left; cursor:pointer; margin:0;
    font:inherit; color:var(--text); box-shadow:none;
    background:linear-gradient(160deg, rgba(45,212,191,0.10), rgba(167,139,250,0.06)); border:1px solid rgba(45,212,191,0.28);
    transition:transform 0.15s ease, border-color 0.15s ease;
  }
  .ci-pick:hover{ transform:translateY(-2px); border-color:var(--accent); box-shadow:none; background:linear-gradient(160deg, rgba(45,212,191,0.14), rgba(167,139,250,0.08)); }
  .ci-pick-label{ font-size:0.7rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent); }
  .ci-pick-name{ font-size:1.05rem; font-weight:700; }
  .ci-pick-value{ font-size:1.25rem; font-weight:700; color:var(--accent-3); font-family:var(--mono); }
  .ci-pick-sub{ font-size:0.78rem; color:var(--text-muted); }
  .ci-row{ cursor:pointer; }
  .ci-row:hover td{ background:rgba(45,212,191,0.05); }
  .ci-row-active td{ background:rgba(45,212,191,0.09); }
  th.sorted{ color:var(--accent); }
  .ci-muted{ color:var(--text-muted); font-size:0.78rem; }
  .ci-neg{ color:var(--danger); }
  .ci-diff{ display:inline-block; font-size:0.7rem; font-weight:700; padding:2px 8px; border-radius:999px; }
  .ci-diff-easy{ background:rgba(74,222,128,0.14); color:#4ade80; }
  .ci-diff-medium{ background:rgba(251,191,36,0.14); color:var(--accent-3); }
  .ci-diff-hard{ background:rgba(248,113,113,0.14); color:var(--danger); }
  .card .sub.ci-footnote{ max-width:none; font-size:0.76rem; margin-top:12px; }
  .ci-h3{ font-size:0.95rem; margin:18px 0 10px; }
  .ci-chart{ width:100%; max-width:680px; height:auto; display:block; margin-bottom:8px; }
  .ci-bar-val{ fill:var(--text); font-size:10px; font-weight:600; font-family:var(--mono); }
  .ci-bar-lbl{ fill:var(--text-muted); font-size:11px; }
  .ci-two-col{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  .ci-specials{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
  .ci-specials li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; font-size:0.85rem; }
  .ci-star-pill{ font-size:0.7rem; font-weight:700; padding:1px 7px; border-radius:999px; background:rgba(251,191,36,0.14); color:var(--accent-3); }
  .ci-stars{ font-weight:700; color:var(--accent-3); }
  .ci-change{ display:inline-block; margin-left:6px; font-size:0.7rem; font-weight:700; padding:1px 6px; border-radius:999px; background:var(--surface-2); color:var(--text-muted); font-family:var(--mono); }
  .ci-up{ background:rgba(74,222,128,0.14); color:#4ade80; }
  .ci-down{ background:rgba(248,113,113,0.14); color:var(--danger); }
  .ci-hiring{ display:inline-block; margin-left:6px; font-size:0.62rem; font-weight:700; letter-spacing:0.04em; padding:1px 6px; border-radius:999px; background:rgba(45,212,191,0.14); color:var(--accent); text-transform:uppercase; }
  .ci-open{ color:var(--accent); font-size:0.75rem; }
  .ci-dir-filters{ display:grid; grid-template-columns:minmax(170px, 230px) repeat(2, minmax(90px, 110px)) minmax(180px, 280px); gap:14px 16px; align-items:end; margin-bottom:14px; }
  .ci-dir-filters .js-checks{ grid-column:1 / -1; }
  .ci-pager{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:16px; font-size:0.85rem; color:var(--text-muted); }
  @media (max-width:900px){
    .ci-picks{ grid-template-columns:1fr; }
    .ci-two-col{ grid-template-columns:1fr; gap:4px; }
    .ci-inputs{ grid-template-columns:1fr 1fr; }
    .ci-inputs .field:first-child{ grid-column:1 / -1; }
  }
  @media (max-width:720px){
    .ci-stars .seg{ display:grid; grid-template-columns:repeat(5, 1fr); grid-auto-flow:row; }
    .ci-dir-filters{ grid-template-columns:1fr 1fr; }
    .ci-dir-filters .field:first-child, .ci-dir-filters .field-search{ grid-column:1 / -1; }
  }

  /* Grid filter rows: fields must fit their column. The general .field rule
     has a 160px minimum, wider than narrow columns like Min/Max stars. */
  .ci-dir-filters .field, .ci-inputs .field, .js-filter-grid .field{ min-width:0; }
  .side-nav-label{ white-space:nowrap; }