:root {
      --accent: #6366f1;
      --accent-dark: #4f46e5;
    }
    * {box-sizing:border-box; margin:0; padding:0; font-family:'Inter',sans-serif;}
    body {display:flex; flex-direction:column; min-height:100svh; background:#f8fafc; color:#1e293b;}
    header {padding:1.5rem 2rem; text-align:center; font-size:1.5rem; font-weight:600; color:var(--accent-dark);}    
    main {flex:1; display:flex; justify-content:center; align-items:center; padding:2rem;}
    a {text-decoration: none;}
    .card {background:#ffffff; padding:2.5rem 2rem; border-radius:1rem; box-shadow:0 6px 18px rgba(0,0,0,0.08); width:100%; max-width:28rem;}
    h1 {font-size:1.75rem; font-weight:600; text-align:center; margin-bottom:1.25rem; color:#0f172a;}
    form {display:flex; flex-direction:column; gap:1rem;}
    label {font-size:.9rem; font-weight:600;}
    input[type=url] {padding:.75rem 1rem; border:1px solid #cbd5e1; border-radius:.5rem; font-size:1rem;}
    .options-toggle {display:flex; align-items:center; gap:.5rem; font-size:.875rem; cursor:pointer; user-select:none;}
    .options-panel {display:none; flex-direction:column; gap:.75rem; margin-top:.5rem;}
    .options-panel.show {display:flex;}
    select, input[type=number], input[type=datetime-local] {padding:.5rem .75rem; border:1px solid #cbd5e1; border-radius:.5rem; font-size:.9rem;}
    button {background:var(--accent); color:#fff; padding:.8rem; font-size:1rem; font-weight:600; border:none; border-radius:.5rem; cursor:pointer; transition:background .2s ease;}
    button:hover {background:var(--accent-dark);}    
    .result {margin-top:1.5rem; text-align:center; display:none;}
    .result.show {display:block;}
    .qr {margin-top:1rem; display:flex; justify-content:center;}
    .footer {text-align:center; padding:1.5rem 0; font-size:.8rem; color:#64748b;}
    .footer a {color:var(--accent-dark); text-decoration:none;}