/* --- SecureID Theme (lightweight, no build step) --- */
:root{
  --brand:#0F62FE;        /* IBM-ish blue */
  --brand-dark:#0043CE;
  --accent:#22C55E;       /* green accent */
  --ink:#0b1021;
  --muted:#4b5563;
  --bg:#ffffff;
  --bg-soft:#f7f8fc;
  --card:#ffffff;
  --ring: rgba(15,98,254,.25);
  --shadow: 0 6px 30px rgba(17,24,39,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;color:var(--ink);background:var(--bg-soft)}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{cursor:pointer}
input,textarea{font:inherit}

/* Utilities */
.min-h-screen{min-height:100vh}
.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.grid{display:grid}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-10{gap:2.5rem}
.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}
.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}
.rounded{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-2xl{border-radius:1rem}
.shadow{box-shadow:var(--shadow)}
.bg-white{background:#fff}.bg-brand{background:var(--brand)}.bg-soft{background:var(--bg-soft)}
.text-white{color:#fff}.text-muted{color:var(--muted)}
.text-sm{font-size:.875rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}.text-5xl{font-size:3rem}
.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}
.leading-tight{line-height:1.2}
.max-w-7xl{max-width:80rem}.max-w-6xl{max-width:72rem}.max-w-3xl{max-width:48rem}.max-w-2xl{max-width:42rem}
.mx-auto{margin-left:auto;margin-right:auto}
.border{border:1px solid #e5e7eb}
.sticky{position:sticky}.top-0{top:0}
.center{margin-left:auto;margin-right:auto}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.2rem;border-radius:999px;border:1px solid transparent;font-weight:600;transition:.2s;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark)}
.btn-outline{background:#fff;border-color:#e5e7eb}
.btn-outline:hover{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}

/* Cards */
.card{background:var(--card);border:1px solid #eef0f4;border-radius:1rem;box-shadow:var(--shadow);padding:1.25rem}

/* Header/Nav */
.header{background:#ffffffcc;backdrop-filter:saturate(180%) blur(10px);}

/* Hero */
.hero{background:linear-gradient(135deg, #ffffff 0%, #eef4ff 60%, #e8fbf1 100%);}

/* Form fields */
.input{width:100%;border:1px solid #e5e7eb;border-radius:.75rem;padding:.9rem;outline:none}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
.textarea{width:100%;min-height:140px;border:1px solid #e5e7eb;border-radius:.75rem;padding:.9rem;resize:vertical;outline:none}
.textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}

/* Badges */
.badge{display:inline-block;padding:.3rem .6rem;border-radius:.5rem;background:#eef4ff;color:#123; font-weight:600}
.badge.green{background:#e9f9ef;color:#065f46}