:root{
    color-scheme:dark;
    --bg:#0a0a0a;
    --surface:#141414;
    --surface-2:#1c1c1a;
    --border:#2a2a27;
    --fg:#f5f5f0;
    --muted:#8a8a82;
    --accent:#d4af37;
    --accent-dim:#8a7226;
    --accent-fg:#0a0a0a;
    --danger:#c65b4a;
    --good:#5a9b6a;
    --radius:10px;
    --row-h:640px;
    --gutter-w:52px;
    --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  }
  [data-theme="light"]{
    color-scheme:light;
    --bg:#faf9f6;
    --surface:#ffffff;
    --surface-2:#f2f1eb;
    --border:#e2e0d6;
    --fg:#0f0f0d;
    --muted:#6b6a62;
    --accent:#a3801a;
    --accent-dim:#c9a227;
    --accent-fg:#faf9f6;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
  button, input, select, textarea{font-family:inherit;}
  html,body{height:100%;}
  body{
    background:var(--bg);
    color:var(--fg);
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased;
    transition:background .25s ease, color .25s ease;
    min-height:100vh;
  }
  .app{max-width:1500px; margin:0 auto; padding:28px 24px 60px;}

  /* ---------- HEADER ---------- */
  header{
    display:flex; align-items:flex-start; justify-content:space-between;
    padding-bottom:22px; border-bottom:1px solid var(--border); margin-bottom:22px;
    gap:16px; flex-wrap:wrap;
  }
  .brand{display:flex; align-items:center; gap:14px;}
  .brand .mark{
    width:46px; height:46px; border-radius:10px;
    background:linear-gradient(155deg, var(--accent), var(--accent-dim));
    display:flex; align-items:center; justify-content:center;
    font-weight:900; font-size:20px; color:var(--accent-fg); letter-spacing:-1px;
    flex-shrink:0;
  }
  .brand h1{
    font-size:26px; font-weight:900; letter-spacing:-0.02em; line-height:1;
  }
  .brand .sub{
    color:var(--muted); font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin-top:5px;
  }
  .theme-toggle{
    display:flex; align-items:center; gap:8px; background:var(--surface);
    border:1px solid var(--border); border-radius:999px; padding:5px; height:40px;
  }
  .theme-toggle button{
    border:none; background:transparent; color:var(--muted); font-weight:700; font-size:12px;
    padding:7px 14px; border-radius:999px; cursor:pointer; font-family:var(--sans);
    letter-spacing:.03em; transition:all .15s ease;
  }
  .theme-toggle button.active{ background:var(--accent); color:var(--accent-fg); }

  /* ---------- MAIN ROW: INPUT | DASHBOARD | OUTPUT ---------- */
  .grid3{
    display:grid; grid-template-columns:minmax(0,1fr) 350px minmax(0,1fr); gap:16px;
    height:var(--row-h); margin-bottom:16px;
  }
  @media (max-width:1100px){ .grid3{grid-template-columns:minmax(0,1fr) 300px minmax(0,1fr);} }
  @media (max-width:900px){
    .grid3{grid-template-columns:1fr; height:auto;}
  }

  .panel{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    overflow:hidden; display:flex; flex-direction:column; min-width:0; min-height:0;
  }
  .panel-head{
    display:flex; align-items:center; justify-content:space-between; padding:0 14px; min-height:50px;
    border-bottom:1px solid var(--border); gap:10px; background:var(--surface-2); flex-shrink:0;
  }
  .panel-head h2{font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; white-space:nowrap;}
  .panel-head .hint{
    font-size:11px; color:var(--muted); font-weight:600; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .head-actions{display:flex; align-items:center; gap:8px; min-width:0;}
  .panel-body{padding:16px 18px;}
  .panel-foot{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:0 14px; min-height:34px; border-top:1px solid var(--border); background:var(--surface-2);
    font-family:var(--mono); font-size:11.5px; color:var(--muted); font-weight:600; flex-shrink:0;
  }
  .panel-foot span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

  /* ---------- TEXT BOXES (input + output) ---------- */
  .box{
    display:block; flex:1; min-height:0; width:100%; resize:none; border:none;
    background:var(--surface); color:var(--fg); font-family:var(--mono); font-size:13px; line-height:21px;
    padding:14px 16px; outline:none; white-space:pre-wrap; word-break:break-all; overflow:auto;
  }
  .box::placeholder{color:var(--muted);}

  /* ---------- BUTTONS ---------- */
  .btn{
    font-family:var(--sans); font-weight:700; font-size:12.5px; letter-spacing:.02em;
    border-radius:8px; border:1px solid var(--border); background:var(--surface-2); color:var(--fg);
    padding:8px 13px; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
    transition:all .12s ease; white-space:nowrap;
  }
  .panel-head .btn{background:var(--surface);}
  .btn:hover{border-color:var(--accent); color:var(--accent);}
  .btn:active{transform:scale(.97);}
  .btn.primary{background:var(--accent); color:var(--accent-fg); border-color:var(--accent);}
  .btn.primary:hover{filter:brightness(1.08); color:var(--accent-fg);}
  .btn.small{padding:6px 10px; font-size:11.5px;}
  .btn:disabled{opacity:.35; cursor:not-allowed; pointer-events:none;}
  .btn-row{display:flex; gap:8px; flex-wrap:wrap;}

  /* ---------- DASHBOARD (middle) ---------- */
  .dash-body{flex:1; min-height:0; display:flex; flex-direction:column; padding:14px; gap:14px;}
  .stats-mini{display:grid; grid-template-columns:1fr 1fr; gap:8px; flex-shrink:0;}
  .stat{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:10px 12px; min-width:0;
  }
  .stat .num{font-size:24px; font-weight:900; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; line-height:1.1;}
  .stat .lbl{color:var(--muted); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .stat.accent .num{color:var(--accent);}

  .lb-head{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-shrink:0;}
  .lb-head h3{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.09em;}
  .leader-controls{display:flex; gap:6px; align-items:center;}
  .leaderboard{
    flex:1; min-height:0; overflow-y:auto; border:1px solid var(--border); border-radius:8px; background:var(--surface);
  }
  .lb-row{
    display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--border);
    cursor:pointer; transition:background .1s ease;
  }
  .lb-row:hover{background:var(--surface-2);}
  .lb-row:last-child{border-bottom:none;}
  .lb-rank{
    width:22px; text-align:right; font-family:var(--mono); font-weight:800; font-size:13px; color:var(--muted); flex-shrink:0;
  }
  .lb-row.top .lb-rank{color:var(--accent); font-size:15px;}
  .lb-check{
    width:17px; height:17px; border-radius:5px; border:1.5px solid var(--border); flex-shrink:0;
    display:flex; align-items:center; justify-content:center; background:var(--surface-2);
  }
  .lb-check.checked{background:var(--accent); border-color:var(--accent); color:var(--accent-fg); font-weight:900; font-size:11px;}
  .lb-domain{flex:1; min-width:0; font-weight:700; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .lb-count{
    font-family:var(--mono); font-weight:800; font-size:12px; color:var(--muted);
    background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:2px 9px; flex-shrink:0;
  }
  .lb-row.top .lb-count{color:var(--accent); border-color:var(--accent-dim);}
  .empty-state{padding:40px 18px; text-align:center; color:var(--muted); font-size:13px; font-weight:600;}

  /* ---------- OUTPUT OPTIONS (horizontal bar) ---------- */
  .options-body{
    display:flex; flex-wrap:wrap; gap:16px 26px; align-items:flex-end; padding:14px 18px;
  }
  .opt-group{display:flex; flex-direction:column; gap:7px;}
  .opt-label{
    color:var(--muted); font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.12em;
  }
  .field{
    background:var(--surface-2); border:1px solid var(--border); border-radius:8px;
    padding:8px 12px; font-family:var(--sans); font-size:12.5px; color:var(--fg); outline:none;
    font-weight:600; width:170px;
  }
  .field:focus{border-color:var(--accent);}
  .field::placeholder{color:var(--muted);}

  /* separator dropdown */
  .select{
    -webkit-appearance:none; appearance:none; cursor:pointer; min-width:150px;
    background-color:var(--surface-2); color:var(--fg); border:1px solid var(--border); border-radius:8px;
    padding:8px 34px 8px 12px; font-family:var(--sans); font-size:12.5px; font-weight:700; outline:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%238a8a82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat; background-position:right 12px center;
  }
  .select:hover, .select:focus{border-color:var(--accent);}
  .select option{background:var(--surface); color:var(--fg);}

  /* copy / download always sits on the right */
  .opt-group.right{margin-left:auto; align-items:flex-end;}
  .opt-group.right .btn-row{justify-content:flex-end;}

  .toast{
    position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);
    background:var(--accent); color:var(--accent-fg); font-weight:800; font-size:12.5px;
    padding:11px 22px; border-radius:999px; opacity:0; transition:all .25s ease; pointer-events:none;
    letter-spacing:.02em; box-shadow:0 8px 24px rgba(0,0,0,.3); max-width:90vw; text-align:center;
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

  ::-webkit-scrollbar{width:9px; height:9px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{background:var(--border); border-radius:6px;}
  ::-webkit-scrollbar-thumb:hover{background:var(--accent-dim);}

  /* ---------- STACKED (tablet / mobile): input, dashboard, output ---------- */
  @media (max-width:900px){
    .box{height:340px; flex:none;}
    .leaderboard{flex:none; height:300px;}
    .dash-body{flex:none;}
  }

  /* ---------- MOBILE RESPONSIVE ---------- */
  @media (max-width:640px){
    .app{padding:18px 14px 40px;}
    header{padding-bottom:16px; margin-bottom:16px;}
    .brand h1{font-size:21px;}
    .brand .mark{width:38px; height:38px; font-size:17px;}
    .panel-head{padding:0 12px; min-height:46px;}
    .box{height:300px; font-size:12.5px;}
    .options-body{flex-direction:column; align-items:stretch; gap:16px; padding:14px;}
    .field{flex:1 1 140px; width:auto; min-width:0;}
    .btn{padding:8px 12px; font-size:12px;}
    .btn.small{padding:6px 10px; font-size:11.5px;}
    .select{width:100%;}
    .opt-group.right{align-self:flex-end; margin-left:auto;}
    .theme-toggle{height:36px;}
  }
  @media (max-width:400px){
    .brand h1{font-size:19px;}
  }

  /* ---------- NO TAP / DOUBLE-TAP ZOOM (font sizes untouched) ---------- */
  html{touch-action:manipulation;}
  button, .btn, .select, .field, .box, .lb-row, .theme-toggle button{touch-action:manipulation;}

  /* ---------- FIX MOBILE INPUT AUTO-ZOOM ON FOCUS ---------- */
  @media screen and (max-width: 768px) {

      input,
      textarea,
      select {
          font-size: 16px !important;
      }
  }

  /* Prevent double-tap zoom behavior entirely on interactive elements */
  input,
  textarea,
  select,
  button,
  .btn {
      touch-action: manipulation;
  }