/* ===== KCCM theme — edit these variables to match your exact brand colors ===== */
:root {
  --bg:#fff; --bg2:#fff; --card:rgba(255,255,255,.04); --border:rgba(255,255,255,.10);
  --fg:#eef1f8; --muted:#9aa4bd; --accent:#2f7bff; --accent2:#19d3c5;
}
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; display:flex; flex-direction:column; color:var(--fg);
       font-family:"Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
       background:
         radial-gradient(900px 500px at 85% -10%, rgba(47,123,255,.22), transparent 60%),
         radial-gradient(700px 400px at -10% 110%, rgba(25,211,197,.14), transparent 60%),
         linear-gradient(180deg, var(--bg), var(--bg2)); }
header { padding:22px 28px; display:flex; align-items:center; gap:12px; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--fg); }
.brand img { height:38px; width:auto; display:block; }
.brand span { font-weight:600; letter-spacing:.04em; font-size:.95rem; }
main { flex:1; display:grid; place-items:center; padding:24px; text-align:center; }
.box { max-width:560px; width:100%; }
.eyebrow { display:inline-block; font-size:.75rem; letter-spacing:.18em; text-transform:uppercase;
           color:var(--accent2); margin-bottom:14px; }
h1 { font-size:clamp(1.6rem, 4vw, 2.3rem); line-height:1.2; margin:0 0 .6rem; font-weight:700; }
h1 em { font-style:normal; background:linear-gradient(90deg, var(--accent), var(--accent2));
        -webkit-background-clip:text; background-clip:text; color:transparent; }
p.sub { margin:0 0 2rem; color:var(--muted); font-size:.95rem; line-height:1.6; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; }
.grid a { display:block; padding:16px; background:var(--card); border:1px solid var(--border);
          border-radius:12px; color:var(--fg); text-decoration:none; font-weight:600;
          backdrop-filter:blur(6px); transition:transform .15s, border-color .15s, box-shadow .15s; }
.grid a:hover, .grid a:focus-visible { transform:translateY(-2px); border-color:var(--accent);
          box-shadow:0 8px 28px rgba(47,123,255,.25); outline:none; }

#status { color:var(--muted); font-size:.9rem; min-height:1.2em; }
footer { padding:18px 24px; text-align:center; font-size:.78rem; color:var(--muted); }
footer a { color:var(--muted); }

/* Loader (gif from the main site, CSS spinner as fallback) */
.loader { display:flex; justify-content:center; margin:0 auto 14px; }
.loader img { width:372px; height:372px; object-fit:contain; }
.spinner { width:334px; height:334px; border-radius:50%; border:3px solid var(--border);
           border-top-color:var(--accent2); animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }