:root{
    --bg:#000000; --fg:#FFFFFF; --muted:#F1f1f1; --accent:#ffbb00; --accent2:#ff6600;
    --card:#0a0a0a; --stroke:#1a1a1a; --ring:#ffbb00;
  }
  
  /* Page */
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    display: flex;
    justify-content: center;
    align-items: center;
    margin:0;
    background:
      radial-gradient(1200px 700px at 80% -10%, #111 10%, transparent 60%),
      linear-gradient(180deg, #050505, #000);
    color:var(--fg);
    font:500 16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial;
    display:flex; flex-direction:column; align-items:center; gap:32px; padding:24px;
  }
  
  /* Logo 
  .logo{ text-align:center; margin-top:32px; margin-bottom:0; }
  .logo img{ max-width:220px; height:auto }
  */
  
  /* Card */
  .wrap{ width:100%; max-width:820px; margin:0 auto }
  .card{
    background:linear-gradient(180deg, #0b0b0b, #070707);
    border:1px solid var(--stroke); border-radius:20px; padding:22px;
    box-shadow:0 10px 30px rgba(0,0,0,.45);
    position:relative;
    overflow:hidden;
  }
  .card:before{
    content:""; position:absolute; inset:-2px;
    background:conic-gradient(from 180deg at 50% 50%, transparent 0deg, rgba(255,187,0,.15) 120deg, rgba(255,102,0,.12) 220deg, transparent 360deg);
    filter:blur(18px); opacity:.5;
  }
  .card > *{ position:relative }
  
  h1{ margin:0 0 12px; font-size:28px; letter-spacing:.5px }
  p.sub{ margin:0 0 22px; color:#cfcfcf }
  
  form{ display:grid; gap:14px; grid-template-columns:repeat(12,1fr) }
  .field{ grid-column: span 6; display:flex; flex-direction:column; gap:6px }
  .field.full{ grid-column:1/-1 }
  label{ font-size:13px; color:#cccccc }
  
  input[type="text"], input[type="date"]{
    background:#0f0f0f; color:var(--fg); border:1px solid #1f1f1f;
    border-radius:12px; padding:12px 14px; outline:none;
    transition:border .2s, box-shadow .2s;
  }
  input[type="text"]:focus, input[type="date"]:focus{
    border-color:var(--accent); box-shadow:0 0 0 4px rgba(255,187,0,.1);
  }
  .hint{ font-size:12px; color:#bdbdbd }
  
  .row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap }
  .checkbox{ display:flex; align-items:center; gap:8px; color:#d8d8d8 }
  .checkbox input{ accent-color:var(--accent) }
  
  button{
    cursor:pointer; border:none; border-radius:14px; padding:12px 18px;
    font-weight:700; letter-spacing:.3px; color:#000;
    background:linear-gradient(90deg, var(--accent), var(--accent2));
    box-shadow:0 6px 18px rgba(255,153,0,.35), inset 0 0 0 1px rgba(0,0,0,.15);
    transition:transform .05s ease-in-out, filter .2s;
  }
  button:hover{ filter:brightness(1.08) }
  button:active{ transform:translateY(1px) }
  
  .pill{
    display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
    background:#0e0e0e; border:1px solid #1c1c1c; color:#e8e8e8; font-size:12px
  }
  .pill b{ color:var(--accent) }
  
  .footer{
    margin-top:14px; display:flex; justify-content:space-between; align-items:center;
    color:#bdbdbd; font-size:12px
  }
  .linklike{ color:var(--accent); text-decoration:none; border-bottom:1px dotted var(--accent) }
  
  @media (max-width:720px){
    .field{ grid-column:1/-1 }
  }
  
  /* ===== Autocomplete ===== */
  .ac-wrap{ position:relative }
  .ac-list{
    position:absolute; left:0; right:0; top:100%; z-index:40;
    background:#0f0f0f; border:1px solid #1f1f1f; border-radius:12px;
    box-shadow:0 16px 40px rgba(0,0,0,.5);
    margin-top:6px; padding:6px; max-height:260px; overflow:auto;
  }
  .ac-item{
    padding:10px 12px; border-radius:10px; cursor:pointer;
    display:flex; justify-content:space-between; align-items:center;
    color:#eaeaea; gap:12px;
  }
  .ac-item:hover, .ac-item.active{ background:#151515 }
  .ac-sym{ font-weight:700; color:#fff }
  .ac-name{ color:#c8c8c8; font-size:12px; opacity:.9 }
  .ac-type{ color:#ffbb00; font-size:11px; opacity:.9 }