:root{
      --bg1:#0f172a;
      --bg2:#111827;
      --card:rgba(255,255,255,.08);
      --card2:rgba(255,255,255,.12);
      --text:#e5e7eb;
      --muted:#94a3b8;
      --accent:#7c3aed;
      --accent2:#22c55e;
      --border:rgba(255,255,255,.12);
      --shadow:0 18px 60px rgba(0,0,0,.35);
      --radius:24px;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--text);
      min-height:100vh;
      background:
        radial-gradient(circle at top left, rgba(124,58,237,.35), transparent 35%),
        radial-gradient(circle at top right, rgba(34,197,94,.25), transparent 30%),
        linear-gradient(160deg, var(--bg1), var(--bg2));
      display:flex;
      align-items:center;
      justify-content:center;
      padding:20px;
    }

    .app{
      width:100%;
      max-width:920px;
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap:20px;
    }

    .hero, .panel{
      background:var(--card);
      border:1px solid var(--border);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow:var(--shadow);
      border-radius:var(--radius);
      overflow:hidden;
    }

    .hero{
      padding:28px;
      position:relative;
    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid var(--border);
      color:#cbd5e1;
      font-size:13px;
      margin-bottom:18px;
    }

    .dot{
      width:10px;height:10px;border-radius:50%;
      background:linear-gradient(135deg, #60a5fa, #a855f7);
      box-shadow:0 0 20px rgba(168,85,247,.65);
    }

    h1{
      margin:0 0 12px;
      font-size:clamp(2rem, 4vw, 3.6rem);
      line-height:1.05;
      letter-spacing:-.04em;
    }

    .lead{
      margin:0 0 24px;
      color:var(--muted);
      font-size:15px;
      line-height:1.7;
      max-width:52ch;
    }

    .stats{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
      margin-top:22px;
    }

    .stat{
      background:rgba(255,255,255,.06);
      border:1px solid var(--border);
      border-radius:18px;
      padding:14px;
    }

    .stat .num{
      font-size:20px;
      font-weight:800;
      margin-bottom:4px;
    }

    .stat .lbl{
      color:var(--muted);
      font-size:12px;
    }

    .panel{
      padding:22px;
      display:flex;
      flex-direction:column;
      gap:16px;
    }

    .field{
      display:flex;
      flex-direction:column;
      gap:8px;
    }

    label{
      font-size:13px;
      color:#cbd5e1;
    }

    select, input[type="number"], .output{
      width:100%;
      border:1px solid var(--border);
      background:rgba(15,23,42,.55);
      color:var(--text);
      border-radius:16px;
      outline:none;
      font-size:15px;
    }

    select, input[type="number"]{
      padding:14px 14px;
    }

    .controls{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:12px;
    }

    .toggles{
      display:grid;
      gap:10px;
      padding:14px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.05);
      border-radius:18px;
    }

    .toggle{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      font-size:14px;
      color:#dbe4f0;
    }

    .toggle input{
      width:18px;
      height:18px;
      accent-color: var(--accent);
    }

    .output{
      min-height:108px;
      padding:16px;
      resize:none;
      line-height:1.7;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      word-break:break-all;
    }

    .buttons{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:10px;
    }

    button{
      border:none;
      border-radius:16px;
      padding:14px 16px;
      font-weight:700;
      cursor:pointer;
      color:white;
      transition:transform .15s ease, opacity .15s ease, box-shadow .15s ease;
      box-shadow:0 10px 24px rgba(0,0,0,.18);
    }

    button:hover{ transform:translateY(-1px); }
    button:active{ transform:translateY(0); opacity:.92; }

    .btn-primary{
      background:linear-gradient(135deg, #7c3aed, #2563eb);
    }

    .btn-secondary{
      background:linear-gradient(135deg, #0f766e, #22c55e);
    }

    .btn-ghost{
      background:rgba(255,255,255,.09);
      border:1px solid var(--border);
      color:#e2e8f0;
    }

    .hint{
      color:var(--muted);
      font-size:13px;
      line-height:1.6;
      margin-top:-4px;
    }

    .toast{
      position:fixed;
      left:50%;
      bottom:18px;
      transform:translateX(-50%) translateY(20px);
      background:rgba(15,23,42,.92);
      color:#fff;
      padding:12px 16px;
      border:1px solid var(--border);
      border-radius:999px;
      box-shadow:var(--shadow);
      opacity:0;
      pointer-events:none;
      transition:all .25s ease;
      font-size:14px;
    }

    .toast.show{
      opacity:1;
      transform:translateX(-50%) translateY(0);
    }

    @media (max-width: 860px){
      .app{ grid-template-columns:1fr; }
    }

    @media (max-width: 560px){
      body{ padding:14px; }
      .hero, .panel{ border-radius:20px; }
      .stats{ grid-template-columns:1fr; }
      .controls, .buttons{ grid-template-columns:1fr; }
      h1{ font-size:2rem; }
    }