:root{ --p:#6366f1; --s:#ec4899; --p-color:#6366f1; --s-color:#ec4899; --bg:#050507; --surface:rgba(255,255,255,.04); --border:rgba(255,255,255,.08); --text-main:#ffffff; --text-soft:#a7afc3; }
    html[data-theme="light"]{ --bg:#eef2ff; --surface:rgba(255,255,255,.88); --border:rgba(99,102,241,.12); --text-main:#101828; --text-soft:#5b6474; }
    html,body{height:100%; overflow-x:hidden; scroll-behavior:smooth;}
    body{
      font-family:'Aldrich',system-ui,-apple-system,Segoe UI,Roboto,Arial;
      background: var(--bg);
      color:var(--text-main);
      margin:0;
      overflow-x:hidden;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
      display:block;
      padding: 0;
    }
    .bgfx{
      position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0;
      background:
        radial-gradient(900px 420px at 15% 0%, rgba(99,102,241,.20), transparent 62%),
        radial-gradient(900px 420px at 85% 0%, rgba(236,72,153,.16), transparent 62%),
        radial-gradient(900px 600px at 50% 90%, rgba(99,102,241,.10), transparent 65%),
        linear-gradient(180deg, rgba(255,255,255,.04), transparent 35%),
        var(--bg);
    }
    .scanline{
      position:absolute; left:-30%; top:-40%;
      width:160%; height:220%;
      background: repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 1px, transparent 9px);
      animation: drift 10s linear infinite;
      opacity:.22;
    }
    @keyframes drift { 0%{transform:translateY(0) rotate(8deg)} 100%{transform:translateY(90px) rotate(8deg)} }

    .glass{
      position:relative; z-index:1;
      width: min(520px, 100%);
      margin: 0 auto;
      min-width:0;
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 1.8rem;
      padding: 22px;
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow: 0 45px 100px rgba(0,0,0,0.50);
      overflow:hidden;
    }
    .glass::before{
      content:"";
      position:absolute;
      inset:-120px -60px auto -60px;
      height: 240px;
      background: radial-gradient(circle at top, rgba(99,102,241,0.16), transparent 60%);
      z-index:0;
    }
    .glass > *{ position:relative; z-index:1; }

    .gradient-text{
      background: linear-gradient(90deg, var(--p), var(--s));
      -webkit-background-clip:text; background-clip:text;
      color:transparent;
    }
    .brand{
      display:flex; align-items:center; justify-content:center; gap:12px;
      margin-bottom: 14px;
    }
    .badge-bolt{
      width:44px; height:44px; border-radius:16px;
      display:flex; align-items:center; justify-content:center;
      background: rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.12);
      box-shadow: 0 18px 40px rgba(0,0,0,.35);
      font-size: 20px;
    }

    .form-control{
      width:100%; max-width:100%;
      background: rgba(0,0,0,0.22) !important;
      border: 1px solid rgba(255,255,255,0.10) !important;
      color: #fff !important;
      border-radius: 14px !important;
      padding: 12px 14px !important;
    }
    .form-control::placeholder{ color: rgba(255,255,255,0.45); }
    .btn-vibe{
      background: linear-gradient(90deg, var(--p), var(--s));
      border: none;
      color: #fff;
      border-radius: 999px;
      padding: 12px 16px;
      font-weight: 700;
      font-size: 0.8rem;
      letter-spacing: 0.35px;
      transition: 0.25s;
      box-shadow: 0 12px 30px rgba(99,102,241,0.15);
      touch-action: manipulation;
      max-width:100%;
      min-width:0;
      white-space:normal;
      overflow-wrap:anywhere;
      word-break:break-word;
    }
    .btn-vibe:hover{ transform: translateY(-1px) scale(1.01); opacity:.95; }

    .muted{ color: rgba(255,255,255,0.55); font-size:.85rem; }
    .flag-btn{text-decoration:none; 
      cursor:pointer; user-select:none;
      min-height:40px; padding:0 12px; border-radius:999px;
      display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.20);
      color:var(--text-main);
      transition:.2s ease;
      font:inherit; font-size:.78rem;
      touch-action: manipulation;
    }
    .flag-btn:hover{ transform: translateY(-1px); border-color: rgba(236,72,153,.40); }
    .flag-btn.active{ border-color: rgba(236,72,153,.65); box-shadow: 0 0 0 3px rgba(236,72,153,.12); }
    .theme-btn{cursor:pointer; user-select:none; min-height:40px; padding:0 12px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; gap:.45rem; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.20); color:#fff; transition:.2s ease; font:inherit; font-size:.78rem; text-decoration:none; max-width:100%; min-width:0; white-space:normal; overflow-wrap:anywhere; word-break:break-word}
    .theme-btn:hover{ transform: translateY(-1px); border-color: rgba(99,102,241,.40); }

    .alertx{
      overflow-wrap:anywhere;
      word-break:break-word;
      border-radius: 14px;
      border: 1px solid rgba(255,68,68,0.18);
      background: rgba(255,68,68,0.05);
      padding: 10px 12px;
      color: rgba(255,255,255,0.88);
      font-size: .85rem;
    }
    
    .container-main{padding:1.25rem 1rem 2rem}
    .page-shell{max-width:980px; margin:0 auto}
    [data-theme="light"] .glass{background:rgba(255,255,255,.9); border-color:rgba(99,102,241,.12); box-shadow:0 18px 40px rgba(15,23,42,.08)}
    [data-theme="light"] .muted,[data-theme="light"] .brand-sub{color:#5b6474 !important}
    [data-theme="light"] .form-control,[data-theme="light"] .nav-chip,[data-theme="light"] .theme-toggle{background:rgba(255,255,255,.94); color:#111827; border-color:rgba(99,102,241,.12)}
    @media (max-width: 520px){
      body{overflow:auto; align-items:flex-start; padding:12px}
      .glass{padding:18px; border-radius:1.4rem}
      .brand{flex-wrap:wrap; text-align:center}
      .d-flex.gap-2{flex-wrap:wrap; justify-content:flex-end}
      .flag-btn{padding:0 10px}
    }