:root{
    --bg:#0b1220;
    --card:#101a2e;
    --muted:#9fb0cf;
    --text:#e8efff;
    --line:#243455;
    --ok:#6ee7b7;
    --bad:#fb7185;
    --btn:#2563eb;
    --btn2:#1d4ed8;
  }
  
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: radial-gradient(1200px 800px at 20% 0%, #16264a 0%, var(--bg) 55%);
    color: var(--text);
  }
  
  .wrap{max-width:980px;margin:28px auto;padding:0 16px}
  .header{margin-bottom:14px}
  .brand{display:flex;align-items:center;gap:14px}
  .logo{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#0f1a33}
  .title{font-weight:800;font-size:18px;letter-spacing:.2px}
  .subtitle{color:var(--muted);font-size:13px;margin-top:2px}
  .tagline{color:var(--muted);margin-top:10px;max-width:760px}
  
  .card{
    background: rgba(16,26,46,.92);
    border:1px solid var(--line);
    border-radius:18px;
    padding:18px 18px 10px;
    box-shadow: 0 20px 70px rgba(0,0,0,.35);
  }
  
  h1,h2{margin:0 0 8px}
  p{margin:8px 0 0}
  .muted{color:var(--muted)}
  .small{font-size:12px}
  .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
  .hide{display:none}
  
  label{display:block;margin:10px 0 6px;color:#cfe0ff;font-size:13px}
  input, select{
    width:100%;
    background:#0c162c;
    color:var(--text);
    border:1px solid var(--line);
    padding:12px 12px;
    border-radius:12px;
    outline:none;
  }
  input:focus, select:focus{border-color:#3b82f6}
  
  .grid{
    display:grid;
    grid-template-columns: 1.35fr .65fr;
    gap:14px;
    margin-top:12px;
  }
  .grid2{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
    margin-top:8px;
  }
  .span2{grid-column:1 / -1}
  
  .statusBox{
    background:#0c162c;
    border:1px solid var(--line);
    border-radius:14px;
    padding:12px;
  }
  
  .statusRow{
    display:flex;justify-content:space-between;gap:10px;
    padding:8px 0;border-bottom:1px dashed rgba(36,52,85,.6);
  }
  .statusRow:last-child{border-bottom:0}
  .pill{
    font-size:12px;
    color:#cfe0ff;
    border:1px solid rgba(36,52,85,.8);
    padding:3px 8px;
    border-radius:999px;
    background: rgba(37,99,235,.08);
  }
  
  .links{display:flex;gap:12px;margin-top:10px}
  a{color:#93c5fd;text-decoration:none}
  a:hover{text-decoration:underline}
  
  .row{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
  
  .btn{
    background: linear-gradient(180deg, var(--btn) 0%, var(--btn2) 100%);
    border:1px solid rgba(255,255,255,.12);
    color:white;
    padding:10px 12px;
    border-radius:12px;
    cursor:pointer;
    font-weight:700;
  }
  .btn:hover{filter:brightness(1.05)}
  .btn-ghost{
    background: transparent;
    border:1px solid rgba(255,255,255,.16);
  }
  .btn-strong{
    padding:12px 16px;
    font-size:14px;
  }
  
  .securityBanner{
    margin-top:10px;
    padding:10px 12px;
    border-radius:12px;
    background: rgba(34,197,94,.08);
    border:1px solid rgba(34,197,94,.35);
    color:#bbf7d0;
    font-size:13px;
  }
  
  .result{
    margin-top:12px;
    padding:12px;
    border-radius:12px;
    border:1px solid var(--line);
    background:#0c162c;
  }
  .result.ok{border-color: rgba(110,231,183,.5)}
  .result.bad{border-color: rgba(251,113,133,.55)}
  
  .error{margin-top:8px;color:var(--bad);font-size:13px}
  .sep{border:0;border-top:1px solid rgba(36,52,85,.7);margin:16px 0}
  
  .radioRow{display:flex;gap:16px;flex-wrap:wrap}
  .radio{display:flex;gap:8px;align-items:center;color:#cfe0ff}
  
  .footer{padding:12px 0 6px;margin-top:6px}
  
  /* Modal */
  .modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
  }
  .hidden{display:none;}
  .modalBox{
    background:#0b0f14;
    padding:28px;
    border-radius:18px;
    max-width:520px;
    width:92%;
    text-align:center;
    border:1px solid rgba(255,255,255,.08);
  }
  .modalLogo{width:64px;margin-bottom:12px;}
  .modalDetails{
    margin:16px 0;
    padding:12px;
    background:#111827;
    border-radius:12px;
    font-size:14px;
    text-align:left;
  }
  
  /* Address autocomplete */
  .addressWrap{position:relative;}
  .suggestions{
    position:absolute;
    left:0; right:0;
    top:calc(100% + 6px);
    background:#0c162c;
    border:1px solid rgba(255,255,255,.14);
    border-radius:12px;
    overflow:hidden;
    z-index:10;
    max-height:260px;
  }
  .sugItem{
    padding:10px 12px;
    text-align:left;
    cursor:pointer;
    border-bottom:1px solid rgba(255,255,255,.06);
    color:#dbe7ff;
  }
  .sugItem:last-child{border-bottom:none}
  .sugItem:hover{background:rgba(59,130,246,.12)}
  
  /* Timeline */
  .timeline{
    margin-top:12px;
    text-align:left;
    padding:12px;
    border-radius:12px;
    background:#0c162c;
    border:1px solid rgba(255,255,255,.10);
  }
  .tlTitle{font-weight:800;margin-bottom:10px}
  .tlItem{display:flex;gap:10px;align-items:flex-start;margin:10px 0;color:#dbe7ff;font-size:14px}
  .dot{
    width:10px;height:10px;border-radius:50%;
    background:rgba(110,231,183,.9);
    margin-top:5px;
    flex:0 0 auto;
  }
  
  @media (max-width: 860px){
    .grid{grid-template-columns:1fr}
    .grid2{grid-template-columns:1fr}
  }