:root{
    --bg-1: #0f1724;
    --bg-2: #071020;
    --accent: #6ee7b7;
    --accent-2: #7c5cff;
    --glass: rgba(255,255,255,0.06);
    --muted: #9aa4b2;
    --card-radius: 14px;
    --shadow-1: 0 10px 30px rgba(2,6,23,0.6);
    --glow: 0 8px 30px rgba(124,92,255,0.18);
  }

  html,body{
    height:100%;
    margin:0;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: radial-gradient(1200px 600px at 10% 10%, rgba(124,92,255,0.12), transparent 8%),
                radial-gradient(900px 400px at 90% 90%, rgba(110,231,183,0.06), transparent 8%),
                linear-gradient(180deg, var(--bg-1), var(--bg-2));
    color:#e6eef6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px;
    box-sizing:border-box;
  }

  .card{
    width:100%;
    max-width:820px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius:var(--card-radius);
    padding:22px;
    box-shadow: var(--shadow-1);
    border: 1px solid rgba(255,255,255,0.04);
    position:relative;
    overflow:hidden;
    backdrop-filter: blur(8px) saturate(120%);
  }

  .card::before{
    content:"";
    position:absolute;
    inset:-40%;
    background: radial-gradient(600px 200px at 10% 10%, rgba(124,92,255,0.08), transparent 20%),
                radial-gradient(500px 180px at 90% 90%, rgba(110,231,183,0.04), transparent 20%);
    transform: translateZ(0);
    pointer-events:none;
  }

  h2{
    margin:0 0 8px 0;
    font-size:20px;
    letter-spacing:-0.2px;
    color: #f8fbff;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:10px;
  }

  .hint{
    margin:0 0 18px 0;
    color:var(--muted);
    font-size:13px;
  }

  label{
    display:block;
    margin-top:12px;
    font-weight:600;
    font-size:13px;
    color:#dfe9ff;
  }

  input[type="text"], select{
    width:90%;
    padding:12px 14px;
    margin-top:8px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.06);
    background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
    color:#eaf6ff;
    outline:none;
    transition: box-shadow .18s ease, transform .12s ease, border-color .12s ease;
    box-shadow: inset 0 -6px 18px rgba(2,6,23,0.25);
    font-size:14px;
  }

  input[type="text"]::placeholder{ color: rgba(230,240,255,0.35); font-weight:500; }

  input[type="text"]:focus, select:focus{
    box-shadow: 0 6px 30px rgba(124,92,255,0.12);
    border-color: rgba(124,92,255,0.9);
    transform: translateY(-1px);
  }

  .row{display:flex;gap:12px;margin-top:12px}
  .row > *{flex:1}

  button{
    margin-top:18px;
    padding:12px 16px;
    border:0;
    border-radius:12px;
    background: linear-gradient(90deg, rgba(124,92,255,0.95), rgba(110,231,183,0.9));
    color:#07102a;
    font-weight:800;
    letter-spacing:0.4px;
    cursor:pointer;
    box-shadow: var(--glow), 0 6px 18px rgba(2,6,23,0.5);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
    display:inline-flex;
    align-items:center;
    gap:10px;
    max-width: 232px;
  }

  button:hover{
    transform: translateY(-3px);
    filter:brightness(1.03);
    box-shadow: 0 14px 40px rgba(124,92,255,0.18), 0 6px 18px rgba(2,6,23,0.6);
  }

  button:active{ transform: translateY(-1px); }

  .result{
    margin-top:14px;
    padding:12px;
    border-radius:10px;
    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
    border:1px solid rgba(255,255,255,0.03);
    color:#dff7ee;
    font-size:13px;
    word-break:break-all;
    display: none;
  }

  .example{font-size:13px;color:var(--muted);background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));padding:10px;border-radius:8px;margin-top:10px;border:1px solid rgba(255,255,255,0.02);}

  .title-icon{
    width:36px;height:36px;border-radius:10px;display:inline-grid;place-items:center;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    box-shadow: inset 0 -6px 18px rgba(2,6,23,0.25);
  }

  .link-button{
    margin-top:12px;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.04);
    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
    color:var(--accent-2);
    font-weight:700;
    cursor:pointer;
    display:inline-flex;
    gap:8px;
    align-items:center;
  }

  .link-button:hover{ box-shadow: 0 8px 30px rgba(124,92,255,0.06); transform:translateY(-2px); }

  /* Toggle switch */
  .toggle-row{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:12px;
  }
  .switch {
    position: relative;
    display: inline-block;
    width:46px;
    height:26px;
  }
  .switch input { display:none; }
  .slider {
    position:absolute;
    cursor:pointer;
    top:0; left:0; right:0; bottom:0;
    background: rgba(255,255,255,0.08);
    border-radius:26px;
    transition: background .18s ease;
    box-shadow: inset 0 -4px 10px rgba(2,6,23,0.25);
  }
  .slider:before{
    content:"";
    position:absolute;
    height:20px;
    width:20px;
    left:3px;
    top:3px;
    background:white;
    border-radius:50%;
    transition: transform .18s cubic-bezier(.2,.9,.3,1);
    box-shadow: 0 4px 10px rgba(2,6,23,0.35);
  }
  input:checked + .slider {
    background: linear-gradient(90deg, var(--accent-2), var(--accent));
  }
  input:checked + .slider:before {
    transform: translateX(20px);
  }

  .muted-note{ color:var(--muted); font-size:13px; margin-top:8px; }

  @media (max-width:720px){
    .card{padding:16px}
    .row{flex-direction:column}
    button{width:100%}
  }