:root{
      --bg1:#07111f;
      --bg2:#0f172a;
      --card:rgba(255,255,255,.08);
      --card-border:rgba(255,255,255,.14);
      --text:#e5e7eb;
      --muted:#94a3b8;
      --accent1:#8b5cf6;
      --accent2:#06b6d4;
      --accent3:#22c55e;
      --shadow:0 20px 70px rgba(0,0,0,.35);
      --radius:28px;
    }

    *{
      box-sizing:border-box;
      margin:0;
      padding:0;
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    }

    body{
      min-height:100vh;
      color:var(--text);
      background:
        radial-gradient(circle at top left, rgba(139,92,246,.25), transparent 32%),
        radial-gradient(circle at top right, rgba(6,182,212,.22), transparent 30%),
        radial-gradient(circle at bottom center, rgba(34,197,94,.16), transparent 28%),
        linear-gradient(160deg, var(--bg1), var(--bg2));
      display:flex;
      align-items:center;
      justify-content:center;
      padding:20px;
      overflow-x:hidden;
    }

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

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

    .hero{
      padding:30px;
    }

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

    .pulse{
      width:10px;
      height:10px;
      border-radius:50%;
      background:linear-gradient(135deg,var(--accent2),var(--accent1));
      box-shadow:0 0 20px rgba(139,92,246,.7);
    }

    h1{
      font-size:clamp(2rem,4vw,3.7rem);
      line-height:1.02;
      letter-spacing:-.05em;
      margin-bottom:14px;
    }

    .lead{
      color:var(--muted);
      font-size:15px;
      line-height:1.8;
      max-width:54ch;
      margin-bottom:26px;
    }

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

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

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

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

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

    .topline{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      margin-bottom:2px;
    }

    .title{
      font-size:18px;
      font-weight:800;
    }

    .sub{
      color:var(--muted);
      font-size:13px;
    }

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

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

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

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

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

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

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

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

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

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

    button{
      border:none;
      border-radius:16px;
      padding:14px 12px;
      font-weight:700;
      font-size:14px;
      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-gen{
      background:linear-gradient(135deg,var(--accent1),#2563eb);
    }

    .btn-copy{
      background:linear-gradient(135deg,var(--accent2),#0f766e);
    }

    .btn-clear{
      background:linear-gradient(135deg,#334155,#475569);
    }

    .btn-download{
      background:linear-gradient(135deg,var(--accent3),#16a34a);
    }

    .footer-note{
      color:var(--muted);
      font-size:12px;
      line-height:1.6;
    }

    .toast{
      position:fixed;
      left:50%;
      bottom:18px;
      transform:translateX(-50%) translateY(18px);
      background:rgba(15,23,42,.95);
      border:1px solid rgba(255,255,255,.14);
      color:white;
      padding:12px 16px;
      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: 900px){
      .wrap{
        grid-template-columns:1fr;
      }
    }

    @media (max-width: 560px){
      body{
        padding:14px;
      }

      .hero,
      .panel{
        border-radius:22px;
      }

      .stats{
        grid-template-columns:1fr;
      }

      .grid{
        grid-template-columns:1fr;
      }

      .buttons{
        grid-template-columns:1fr 1fr;
      }

      h1{
        font-size:2rem;
      }

      textarea{
        min-height:220px;
      }
    }