/* styles.css (REPLACE ENTIRE FILE) */
:root{
    --bg1:#0b1220;
    --bg2:#0a0f1c;
    --card: rgba(255,255,255,0.06);
    --card2: rgba(255,255,255,0.08);
    --border: rgba(255,255,255,0.10);
    --text:#eaf0ff;
    --muted: rgba(234,240,255,0.72);
    --muted2: rgba(234,240,255,0.55);
    --brand:#60a5fa;
    --brand2:#a78bfa;
    --good:#22c55e;
    --warn:#facc15;
    --mid:#fb923c;
    --bad:#ef4444;
  }
  
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    color:var(--text);
    background: radial-gradient(900px 520px at 15% 10%, rgba(96,165,250,0.22), transparent 60%),
                radial-gradient(900px 520px at 85% 25%, rgba(167,139,250,0.20), transparent 60%),
                linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
    min-height:100vh;
  }
  
  a{color:inherit}
  .page{min-height:100vh;}
  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:18px 18px 28px;
  }
  
  /* Topbar */
  .topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:16px;
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(8px);
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
  }
  .logo{
    width:40px;height:40px;
    border-radius:12px;
    background: rgba(255,255,255,0.10);
    border:1px solid var(--border);
    object-fit:cover;
  }
  .brandName{
    display:flex;
    flex-direction:column;
    line-height:1.2;
    min-width:0;
  }
  .brandName b{font-size:14px;letter-spacing:0.2px}
  .brandName span{font-size:12px;color:var(--muted2)}
  .pills{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
  .pill{
    font-size:12px;
    padding:8px 10px;
    border-radius:999px;
    border:1px solid var(--border);
    background: rgba(255,255,255,0.04);
    color: var(--muted);
  }
  
  /* Layout */
  .grid{
    margin-top:14px;
    display:grid;
    grid-template-columns: 1.6fr 1fr;
    gap:14px;
  }
  @media (max-width: 980px){
    .grid{grid-template-columns:1fr}
  }
  
  /* Cards */
  .card{
    border:1px solid var(--border);
    background: rgba(255,255,255,0.05);
    border-radius:18px;
    padding:16px;
    backdrop-filter: blur(8px);
  }
  .cardStrong{
    background: linear-gradient(135deg, rgba(96,165,250,0.16), rgba(167,139,250,0.10));
  }
  .h1{
    margin:0;
    font-size:28px;
    letter-spacing:-0.3px;
  }
  .sub{
    margin-top:10px;
    color: var(--muted);
    font-size:14px;
    line-height:1.55;
  }
  
  /* Buttons */
  .row{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:14px}
  .btn{
    border:1px solid var(--border);
    background: rgba(255,255,255,0.04);
    color: var(--text);
    padding:10px 12px;
    border-radius:14px;
    font-weight:800;
    cursor:pointer;
  }
  .btnPrimary{
    border:none;
    background: linear-gradient(90deg, var(--brand), var(--brand2));
    color:#0b1220;
    padding:11px 14px;
    border-radius:14px;
    font-weight:900;
    cursor:pointer;
  }
  .btnPrimary:hover{filter:brightness(1.05)}
  .btn:disabled,.btnPrimary:disabled{opacity:.55;cursor:not-allowed}
  
  /* Feature tiles */
  .tiles{
    margin-top:14px;
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:10px;
  }
  @media (max-width: 560px){
    .tiles{grid-template-columns:1fr}
  }
  .tile{
    border:1px solid var(--border);
    background: rgba(255,255,255,0.04);
    border-radius:16px;
    padding:12px;
    display:flex;
    gap:10px;
    align-items:flex-start;
  }
  .ico{
    width:34px;height:34px;
    border-radius:12px;
    display:grid;
    place-items:center;
    border:1px solid var(--border);
    background: rgba(255,255,255,0.05);
    font-weight:900;
  }
  .tile b{font-size:13px}
  .tile p{margin:4px 0 0; color:var(--muted); font-size:12px; line-height:1.45}
  
  /* Stepper */
  .steps{
    margin-top:12px;
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap:10px;
  }
  @media (max-width: 780px){
    .steps{grid-template-columns:1fr 1fr}
  }
  @media (max-width: 520px){
    .steps{grid-template-columns:1fr}
  }
  .step{
    border:1px solid var(--border);
    background: rgba(255,255,255,0.04);
    border-radius:16px;
    padding:12px;
  }
  .stepTop{
    display:flex; align-items:center; gap:8px; margin-bottom:6px;
  }
  .num{
    width:26px;height:26px;border-radius:10px;
    display:grid;place-items:center;
    background: rgba(96,165,250,0.20);
    border:1px solid rgba(96,165,250,0.35);
    font-weight:900;
  }
  .step b{font-size:13px}
  .step span{display:block; margin-top:4px; color:var(--muted); font-size:12px; line-height:1.45}
  
  /* Right panel */
  .panelTitle{
    font-size:14px;
    font-weight:900;
    margin:0 0 10px;
  }
  .legend{
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
  }
  .legendRow{
    display:flex;
    justify-content:space-between;
    padding:10px 12px;
    font-size:13px;
    border-top:1px solid var(--border);
    background: rgba(255,255,255,0.03);
  }
  .legendRow:first-child{border-top:none}
  .dot{
    width:10px;height:10px;border-radius:999px; display:inline-block; margin-right:10px;
  }
  .small{
    color:var(--muted);
    font-size:12px;
    line-height:1.5;
  }
  
  /* Login form */
  .form{display:grid; gap:10px; margin-top:12px}
  .input{
    width:100%;
    padding:12px 12px;
    border-radius:14px;
    border:1px solid var(--border);
    background: rgba(255,255,255,0.03);
    color: var(--text);
    outline:none;
    font-size:14px;
  }
  .input:focus{
    border-color: rgba(96,165,250,0.55);
    box-shadow: 0 0 0 4px rgba(96,165,250,0.12);
  }
  .err{color:#fecaca; font-weight:800; font-size:12px}
  
  /* Footer */
  .footer{
    margin-top:14px;
    text-align:center;
    font-size:12px;
    color:var(--muted2);
  }