:root{
      --navy:#071029; --cyan:#00b4d8; --muted:#6b7280;
      --card:#ffffff;
    }
    body{font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;margin:0;background:#f6f8fb;color:var(--navy)}
    .container{max-width:920px;margin:40px auto;padding:20px}
    header{background:linear-gradient(90deg,var(--navy),#0b2140);color:#fff;padding:24px;border-radius:8px}
    header h1{margin:0;font-size:1.5rem}
    header p{margin:.4rem 0 0;color:#cfe8f6}
    .card{background:var(--card);padding:22px;border-radius:10px;box-shadow:0 6px 20px rgba(7,16,41,0.06);margin-top:20px}
    form .row{display:flex;gap:16px;flex-wrap:wrap}
    .form-group{flex:1 1 220px;min-width:180px}
    label{display:block;font-size:.9rem;color:var(--muted);margin-bottom:6px}
    input, select{width:100%;padding:10px;border-radius:8px;border:1px solid #e6eef8;background:#fbfdff}
    .hint{font-size:.85rem;color:var(--muted);margin-top:6px}
    .btn-row{display:flex;gap:12px;margin-top:16px}
    .btn-primary{background:var(--cyan);color:#071029;padding:10px 16px;border-radius:8px;border:none;cursor:pointer;font-weight:700}
    .outline{background:transparent;border:1px solid #d1eaf6;padding:10px 14px;border-radius:8px;cursor:pointer}
    .result{margin-top:18px;padding:14px;border-radius:8px;background:#f0fbff;border:1px solid rgba(0,180,216,0.12)}
    .result.good{background:#ecfff7;border-color:rgba(0,200,150,0.12)}
    .result.warn{background:#fff7e9;border-color:rgba(255,180,0,0.12)}
    .result.bad{background:#fff0f2;border-color:rgba(255,80,100,0.12)}
    .small{font-size:.9rem;color:var(--muted)}
    footer{margin-top:28px;text-align:center;color:var(--muted);font-size:.85rem}
    @media(max-width:520px){.row{flex-direction:column}}