:root{
    --bg:#EEF1F6;
    --ink:#1B2130;
    --ink-soft:#4B5468;
    --glass:rgba(255,255,255,.55);
    --glass-border:rgba(27,33,48,.12);
    --glass-strong:rgba(255,255,255,.80);
    --shadow:0 8px 32px rgba(27,33,48,.10);

    --amber:#C98A1F;      /* primary action */
    --amber-glow:rgba(201,138,31,.30);
    --teal:#218F80;       /* fans / follows you */
    --coral:#C6453D;      /* not following back */
    --violet:#6B5FBD;     /* mutual */
    --sky:#3D7FC9;        /* informational accents */

    --blob-a:#E2A83D;
    --blob-b:#6B7FE0;
    --blob-c:#5FBDA8;

    --radius:20px;
    --radius-sm:12px;
    --font-display:'Space Grotesk', system-ui, sans-serif;
    --font-body:'Inter', system-ui, sans-serif;
    --font-mono:'JetBrains Mono', 'Courier New', monospace;
  }
  :root[data-theme="dark"]{
    --bg:#0E1420;
    --ink:#EDEFF4;
    --ink-soft:#9AA4B8;
    --glass:rgba(255,255,255,.06);
    --glass-border:rgba(255,255,255,.13);
    --glass-strong:rgba(255,255,255,.10);
    --shadow:0 8px 32px rgba(0,0,0,.45);

    --amber:#E2A83D;
    --amber-glow:rgba(226,168,61,.25);
    --teal:#4FC1B3;
    --coral:#E0625A;
    --violet:#9C90E0;
    --sky:#6FA8E8;

    --blob-a:#E2A83D;
    --blob-b:#3A4E8C;
    --blob-c:#2E6E62;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:var(--font-body);
    background:var(--bg);
    color:var(--ink);
    min-height:100vh;
    overflow-x:hidden;
    transition:background .4s ease, color .4s ease;
    -webkit-font-smoothing:antialiased;
  }
  .bg-blobs{position:fixed; inset:0; z-index:-1; overflow:hidden;}
  .blob{position:absolute; border-radius:50%; filter:blur(76px); opacity:.32;}
  .blob-1{width:520px;height:520px; background:var(--blob-a); top:-160px; left:-120px; animation:drift1 26s ease-in-out infinite;}
  .blob-2{width:460px;height:460px; background:var(--blob-b); bottom:-180px; right:-140px; animation:drift2 32s ease-in-out infinite;}
  .blob-3{width:360px;height:360px; background:var(--blob-c); top:40%; left:60%; animation:drift3 38s ease-in-out infinite; opacity:.22;}
  @keyframes drift1{0%,100%{transform:translate(0,0);}50%{transform:translate(60px,40px);}}
  @keyframes drift2{0%,100%{transform:translate(0,0);}50%{transform:translate(-50px,-30px);}}
  @keyframes drift3{0%,100%{transform:translate(0,0);}50%{transform:translate(-40px,50px);}}
  @media (prefers-reduced-motion:reduce){ .blob{animation:none;} .user-card{animation:none !important; opacity:1 !important;} }

  .wrap{max-width:980px; margin:0 auto; padding:0 24px 80px;}
  header{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:28px 0 8px; flex-wrap:wrap;}
  .brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:1.15rem;}
  .brand-mark{font-size:1.4rem;}
  .header-controls{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}

  .pill{
    display:inline-flex; align-items:center; gap:7px;
    background:var(--glass); border:1px solid var(--glass-border);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-radius:999px; padding:6px 14px; font-size:.8rem; color:var(--ink-soft);
    font-family:var(--font-mono);
  }
  .pill .dot{width:6px; height:6px; border-radius:50%; background:var(--teal); flex-shrink:0;}
  .pill.hidden{display:none;}
  .auth-pill{color:var(--ink); gap:8px;}
  .auth-pill .dot{background:var(--amber);}
  .auth-pill button{
    background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:1rem;
    line-height:1; padding:0 0 0 2px;
  }
  .auth-pill button:hover{color:var(--coral);}

  .theme-toggle{
    display:flex; align-items:center; gap:8px;
    background:var(--glass); border:1px solid var(--glass-border);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-radius:999px; padding:6px 14px; cursor:pointer;
    font-family:var(--font-body); font-size:.85rem; color:var(--ink);
  }
  .theme-toggle:focus-visible, button:focus-visible, input:focus-visible, a:focus-visible, [tabindex]:focus-visible{
    outline:2px solid var(--amber); outline-offset:2px;
  }

  .hero{text-align:center; padding:44px 0 12px;}
  .hero h1{
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(1.9rem, 4vw, 2.7rem); line-height:1.15; margin:0 0 14px;
    max-width:680px; margin-left:auto; margin-right:auto;
  }
  .hero p{color:var(--ink-soft); font-size:1.02rem; max-width:520px; margin:0 auto 36px; line-height:1.6;}

  .glass{
    background:var(--glass); border:1px solid var(--glass-border);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-radius:var(--radius); box-shadow:var(--shadow);
  }

  .search-card{padding:26px; max-width:520px; margin:0 auto;}
  .field{margin-bottom:14px; text-align:left;}
  .field label{display:block; font-size:.82rem; font-weight:500; color:var(--ink-soft); margin-bottom:6px;}
  .field input{
    width:100%; padding:12px 14px; border-radius:var(--radius-sm);
    border:1px solid var(--glass-border); background:var(--glass-strong);
    color:var(--ink); font-family:var(--font-mono); font-size:.95rem;
  }
  .field input::placeholder{color:var(--ink-soft); opacity:.7; font-family:var(--font-body);}
  .field input.invalid{border-color:var(--coral);}
  .field-error{font-size:.78rem; color:var(--coral); margin-top:6px; min-height:1em;}

  .btn{
    width:100%; padding:13px 18px; border:none; border-radius:var(--radius-sm);
    background:var(--amber); color:#1B2130; font-family:var(--font-body); font-weight:600;
    font-size:.98rem; cursor:pointer; transition:transform .12s ease, box-shadow .2s ease;
  }
  .btn:hover:not(:disabled){box-shadow:0 6px 20px var(--amber-glow); transform:translateY(-1px);}
  .btn:active:not(:disabled){transform:translateY(0);}
  .btn:disabled{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none;}
  .btn-secondary{
    background:transparent; border:1px solid var(--glass-border); color:var(--ink);
    font-weight:500;
  }
  .btn-secondary:hover:not(:disabled){box-shadow:none; background:var(--glass-strong);}
  .btn-icon{width:auto; padding:9px 14px; font-size:.82rem; display:inline-flex; align-items:center; gap:6px;}

  .status-line{min-height:20px; font-size:.85rem; color:var(--ink-soft); margin-top:12px; text-align:center;}
  .status-line.error{color:var(--coral);}
  .token-note{font-size:.78rem; color:var(--ink-soft); line-height:1.5; margin:10px 0 0; text-align:center;}
  .token-note a{color:var(--sky);}

  .token-prompt{max-width:520px; margin:20px auto 0; padding:26px; text-align:left; animation:fadeIn .3s ease;}
  .token-prompt h3{font-family:var(--font-display); margin:0 0 8px; font-size:1.1rem;}
  .token-prompt > p{color:var(--ink-soft); font-size:.88rem; line-height:1.5; margin:0 0 16px;}

  .gate{max-width:560px; margin:28px auto 0; padding:26px; text-align:center; display:none;}
  .gate.show{display:block; animation:fadeIn .3s ease;}
  .gate .star-icon{font-size:1.8rem; margin-bottom:8px; display:block;}
  .gate h3{font-family:var(--font-display); margin:0 0 8px; font-size:1.2rem;}
  .gate p{color:var(--ink-soft); font-size:.92rem; line-height:1.55; margin:0 0 20px;}
  .gate .gate-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
  .gate .gate-actions .btn, .gate .gate-actions .btn-secondary{width:auto; padding:11px 20px;}

  @keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

  .results{display:none; margin-top:40px;}
  .results.show{display:block;}
  .stat-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px;}
  .stat-card{padding:18px 14px; text-align:center; border-top:2px solid transparent;}
  .stat-card .num{font-family:var(--font-mono); font-size:1.5rem; font-weight:500; display:block;}
  .stat-card .label{font-size:.75rem; color:var(--ink-soft); margin-top:4px; display:block;}
  .stat-card.accent-coral{border-top-color:var(--coral);}
  .stat-card.accent-coral .num{color:var(--coral);}
  .stat-card.accent-teal{border-top-color:var(--teal);}
  .stat-card.accent-teal .num{color:var(--teal);}
  .stat-card.accent-violet{border-top-color:var(--violet);}
  .stat-card.accent-violet .num{color:var(--violet);}
  .stat-card.accent-sky{border-top-color:var(--sky);}
  .stat-card.accent-sky .num{color:var(--sky);}

  .toolbar{display:flex; gap:10px; align-items:center; margin-bottom:10px; flex-wrap:wrap;}
  .toolbar input[type="search"]{
    flex:1; min-width:180px; padding:10px 14px; border-radius:var(--radius-sm);
    border:1px solid var(--glass-border); background:var(--glass-strong); color:var(--ink);
    font-family:var(--font-body); font-size:.9rem;
  }
  .filter-chip{
    padding:8px 14px; border-radius:999px; border:1px solid var(--glass-border);
    background:var(--glass); color:var(--ink-soft); font-size:.82rem; cursor:pointer;
    font-family:var(--font-body); white-space:nowrap;
  }
  .filter-chip[aria-pressed="true"]{color:#fff; border-color:transparent; font-weight:600;}
  .filter-chip[data-filter="not-back"][aria-pressed="true"]{background:var(--coral);}
  .filter-chip[data-filter="fans"][aria-pressed="true"]{background:var(--teal);}
  .filter-chip[data-filter="mutual"][aria-pressed="true"]{background:var(--violet);}

  .toolbar-row2{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:10px;}
  .result-count{font-size:.8rem; color:var(--ink-soft);}
  .toolbar-actions{display:flex; gap:8px;}

  .truncation-note{
    font-size:.8rem; color:var(--ink-soft); background:var(--glass-strong); border:1px solid var(--glass-border);
    border-radius:var(--radius-sm); padding:10px 14px; margin-bottom:16px; text-align:center;
  }

  .btn-danger{background:var(--coral); color:#fff;}
  .btn-danger:hover:not(:disabled){box-shadow:0 6px 20px rgba(198,69,61,.35); transform:translateY(-1px);}

  .unfollow-banner{
    display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    padding:14px 18px; margin-bottom:16px; font-size:.9rem;
  }
  .unfollow-banner .btn-icon{padding:9px 16px;}

  .unfollow-panel{max-width:640px; margin:24px auto 0; padding:26px; text-align:left; animation:fadeIn .3s ease;}
  .unfollow-panel h3{font-family:var(--font-display); margin:0 0 10px; font-size:1.15rem;}
  .unfollow-warning{
    font-size:.85rem; color:var(--ink-soft); line-height:1.55; margin:0 0 18px;
    background:var(--glass-strong); border-radius:var(--radius-sm); padding:12px 14px;
  }
  .unfollow-controls{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; font-size:.85rem; color:var(--ink-soft);}
  .select-all-label{display:flex; align-items:center; gap:8px; cursor:pointer;}
  .unfollow-list{max-height:320px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; margin-bottom:18px; padding-right:4px;}
  .unfollow-row{
    display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius-sm);
    background:var(--glass-strong);
  }
  .unfollow-row img{width:32px; height:32px; border-radius:50%; flex-shrink:0;}
  .unfollow-row .uname{font-family:var(--font-mono); font-size:.85rem; word-break:break-all;}
  .unfollow-row.done{opacity:.5;}
  .unfollow-row.failed{outline:1px solid var(--coral);}

  .grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px;}
  .user-card{
    display:flex; align-items:center; gap:12px; padding:14px; text-decoration:none; color:var(--ink);
    opacity:0; animation:cardIn .4s ease forwards; border-left:3px solid transparent;
  }
  .user-card.coral{border-left-color:var(--coral);}
  .user-card.teal{border-left-color:var(--teal);}
  .user-card.violet{border-left-color:var(--violet);}
  @keyframes cardIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}
  .user-card img{width:44px; height:44px; border-radius:50%; border:1px solid var(--glass-border); flex-shrink:0;}
  .user-card .uname{font-family:var(--font-mono); font-size:.88rem; font-weight:500; word-break:break-all; display:block;}
  .user-card .utag{display:block; font-size:.72rem; margin-top:2px;}
  .user-card .utag.coral{color:var(--coral);}
  .user-card .utag.teal{color:var(--teal);}
  .user-card .utag.violet{color:var(--violet);}

  .empty-state{text-align:center; padding:40px 20px; color:var(--ink-soft); font-size:.9rem;}

  footer{margin-top:60px; text-align:center; font-size:.8rem; color:var(--ink-soft); line-height:1.8;}
  footer a{color:var(--ink-soft);}
  .security-note{
    max-width:560px; margin:44px auto 0; padding:16px 20px; font-size:.8rem; color:var(--ink-soft);
    line-height:1.6; text-align:left;
  }
  .security-note strong{color:var(--ink);}

  .spinner{
    width:16px; height:16px; border:2px solid var(--glass-border); border-top-color:var(--amber);
    border-radius:50%; display:inline-block; animation:spin .7s linear infinite; vertical-align:-3px; margin-right:8px;
  }
  @keyframes spin{to{transform:rotate(360deg);}}
  .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}

  @media (max-width:560px){
    .stat-strip{grid-template-columns:repeat(2,1fr);}
    .toolbar-row2{flex-direction:column; align-items:flex-start;}
  }