/* SpaceCiv — dark-space UI. Self-hosted fonts keep the strict CSP intact
   (style-src/default-src 'self'; no Google Fonts call, no inline styles). */

/* ---- self-hosted fonts (latin subset, extracted from the design bundles) ---- */
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/chakrapetch-400.woff2") format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;
  src:url("/assets/fonts/chakrapetch-600.woff2") format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/fonts/chakrapetch-700.woff2") format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/spacemono-400.woff2") format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/fonts/spacemono-700.woff2") format('woff2')}

:root{
  --bg:#05060d; --panel:#060a12; --raised:#091120; --edge:#1b2c40; --edge2:#284b66;
  --text:#cfe8ee; --muted:#7da0ad; --accent:#5fd6e6; --accent2:#34e0e0;
  --good:#5fe08a; --bad:#ff5a52;
  --mono:'Space Mono',ui-monospace,"Cascadia Code","Consolas",monospace;
  --sans:'Chakra Petch',system-ui,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans)}
body{min-height:100vh;display:flex;flex-direction:column}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent2)}
::selection{background:rgba(52,224,224,.3)}

/* ---------- shared site chrome (register / forgot / reset / dashboard / error) ---------- */
.topbar{display:flex;justify-content:space-between;align-items:center;
  padding:18px 28px;border-bottom:1px solid var(--edge)}
.brand{font-weight:700;letter-spacing:2px;font-size:20px;color:#eaf7fb}
.brand span{color:var(--accent)}
nav{display:flex;align-items:center;gap:18px}
nav .cta{padding:8px 14px}

main{flex:1;display:flex;justify-content:center;align-items:flex-start;padding:56px 20px}
.panel{background:var(--panel);border:1px solid var(--edge);border-radius:12px;
  padding:32px;max-width:560px;width:100%}
.form-card{max-width:420px}
.hero{text-align:center}
h1{font-size:44px;letter-spacing:2px;margin:0 0 12px;color:#eaf7fb}
h2{margin:0 0 20px;color:#eaf7fb;letter-spacing:1px}
.lead{color:var(--muted);line-height:1.6;font-size:17px}
.muted{color:var(--muted);font-size:14px}
.hint{color:var(--muted);font-size:12px;margin:6px 0 18px;font-family:var(--mono)}

label{display:block;font-family:var(--mono);font-size:12px;letter-spacing:1px;
  text-transform:uppercase;color:var(--muted);margin:16px 0 6px}
input{width:100%;padding:11px 13px;background:#05060d;border:1px solid var(--edge);
  border-radius:7px;color:var(--text);font-size:15px;font-family:var(--mono)}
input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(95,214,230,.18)}

button{font-family:var(--sans);cursor:pointer}
.cta{display:inline-block;background:var(--accent);color:#05060d;border:none;border-radius:7px;
  padding:11px 20px;font-weight:600;letter-spacing:.5px}
.cta:hover{background:var(--accent2);color:#05060d}
.cta.full{width:100%;margin-top:22px;font-size:15px}
.ghost{display:inline-block;border:1px solid var(--edge2);border-radius:7px;padding:10px 20px;color:var(--accent)}
.link{background:none;border:none;color:var(--accent);font-size:15px;padding:0}
.link:hover{color:var(--accent2)}
.inline{display:inline}
.actions{display:flex;gap:14px;justify-content:center;margin-top:28px}

.alert{border-radius:7px;padding:11px 14px;font-size:14px;margin-bottom:8px}
.alert.error{border:1px solid rgba(255,90,82,.4);color:#ffb4b0;background:rgba(255,90,82,.08)}
.alert.notice{border:1px solid rgba(95,224,138,.4);color:#bff0cf;background:rgba(95,224,138,.08)}

.kv{display:grid;grid-template-columns:140px 1fr;gap:8px 16px;margin:22px 0;font-family:var(--mono);font-size:14px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;color:var(--text)}

.foot{text-align:center;color:#3a7d8c;font-style:italic;padding:24px;border-top:1px solid var(--edge)}

/* ============ standalone space pages (coming-soon, login) ============ */
@keyframes emPulse{0%,100%{filter:drop-shadow(0 0 18px rgba(95,214,230,.3))}
  50%{filter:drop-shadow(0 0 30px rgba(95,214,230,.5))}}
@keyframes emPulseFloat{0%,100%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 26px rgba(95,214,230,.35))}
  50%{transform:translateY(-8px) scale(1.025);filter:drop-shadow(0 0 40px rgba(95,214,230,.55))}}
@keyframes twinkle{0%,100%{opacity:.35}50%{opacity:.85}}
@media (prefers-reduced-motion:reduce){
  .sc-emblem,.sc-emblem--float,.sc-stars{animation:none}
}

.sc-space{position:relative;min-height:100vh;width:100%;overflow:hidden;
  background:radial-gradient(ellipse 76% 58% at 50% 36%,rgba(30,70,95,.27),transparent 70%),
             radial-gradient(circle at 80% 83%,rgba(120,90,200,.10),transparent 46%),var(--bg);
  font-family:var(--sans);display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:44px 24px}

.sc-stars{position:absolute;inset:0;pointer-events:none;opacity:.5;animation:twinkle 8s ease-in-out infinite;
  background-image:radial-gradient(1.4px 1.4px at 12% 18%,#cfe8ee,transparent),
    radial-gradient(1px 1px at 28% 62%,#9fc6d2,transparent),
    radial-gradient(1.4px 1.4px at 47% 12%,#fff,transparent),
    radial-gradient(1px 1px at 63% 78%,#b7d2dc,transparent),
    radial-gradient(1.2px 1.2px at 78% 34%,#fff,transparent),
    radial-gradient(1px 1px at 90% 60%,#9fc6d2,transparent),
    radial-gradient(1px 1px at 55% 46%,#cfe8ee,transparent),
    radial-gradient(1.3px 1.3px at 70% 22%,#fff,transparent),
    radial-gradient(1px 1px at 8% 84%,#9fc6d2,transparent),
    radial-gradient(1px 1px at 38% 90%,#cfe8ee,transparent);
  background-size:360px 360px,300px 300px,420px 420px,280px 280px,340px 340px,
    390px 390px,250px 250px,320px 320px,300px 300px,360px 360px}

.sc-emblem{animation:emPulse 5s ease-in-out infinite;line-height:0}
.sc-emblem--float{animation:emPulseFloat 6s ease-in-out infinite;line-height:0}

.sc-wordmark{display:flex;align-items:baseline;justify-content:center;font-weight:700;color:#eaf7fb;line-height:.9}
.sc-wordmark .accent{color:var(--accent2);text-shadow:0 0 30px rgba(52,224,224,.55)}

/* central content column */
.sc-content{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}

/* ---- coming-soon ---- */
.sc-horizon{position:absolute;left:0;right:0;top:50%;height:1px;transform:translateY(-130px);
  background:linear-gradient(90deg,transparent,rgba(95,214,230,.18) 30%,rgba(95,214,230,.18) 70%,transparent)}
.cs-content{max-width:640px}
.cs-emblem-wrap{margin-bottom:2px}
.cs-wordmark{margin-top:30px;font-size:clamp(46px,11vw,88px);letter-spacing:3px}
.cs-tagline{font-family:var(--mono);font-size:clamp(10px,2.6vw,13px);letter-spacing:6px;color:var(--muted);margin-top:18px}
.sc-pill{display:inline-flex;align-items:center;gap:9px;margin-top:40px;padding:8px 18px;
  background:rgba(8,17,27,.7);border:1px solid #1b3346;border-radius:999px}
.sc-pill-dot{width:8px;height:8px;border-radius:50%;background:var(--accent2);box-shadow:0 0 8px var(--accent2)}
.sc-pill span{font-family:var(--mono);font-size:12px;letter-spacing:2px;color:#add6e2}
.cs-headline{font-weight:600;font-size:clamp(20px,5vw,30px);letter-spacing:.5px;color:var(--text);
  margin:26px 0 0;line-height:1.3;max-width:520px}
.cs-sub{font-weight:400;font-size:clamp(14px,3.4vw,16px);color:#88a6b3;margin:14px 0 0;line-height:1.65;max-width:460px}
.cs-form{margin-top:34px;width:100%;max-width:440px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.cs-form .sc-input{flex:1;min-width:200px;margin:0}
.cs-submit-btn{width:auto;padding:14px 26px}
.cs-success{margin-top:34px}
.cs-fine{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:#4a6573;margin-top:18px}

/* ---- login card ---- */
.sc-brand{position:relative;display:flex;flex-direction:column;align-items:center;margin-bottom:26px}
.sc-brand .sc-wordmark{margin-top:16px;font-size:30px;letter-spacing:2px}
.sc-card{position:relative;width:100%;max-width:420px;background:rgba(9,15,24,.82);
  border:1px solid #17293c;border-radius:16px;padding:34px 32px 30px;backdrop-filter:blur(6px);
  box-shadow:0 24px 60px rgba(0,0,0,.5)}
.sc-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:3px;color:#3a7d8c;text-transform:uppercase}
.sc-card h1{font-weight:700;font-size:24px;letter-spacing:.5px;color:#eaf7fb;margin:8px 0 26px}
.sc-label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:1.5px;color:var(--muted);
  text-transform:none;margin:0 0 8px}
.sc-input{width:100%;font-family:var(--mono);font-size:14px;color:#eaf7fb;background:rgba(6,12,20,.9);
  border:1px solid var(--edge2);border-radius:10px;padding:13px 15px;outline:none;margin-bottom:18px}
.sc-input:focus{border-color:#39d6ea;box-shadow:0 0 0 3px rgba(57,214,234,.16)}
.sc-input::placeholder{color:#4d6976}
.sc-fieldrow{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sc-fieldrow .sc-label{margin:0}
.sc-forgot{font-family:var(--mono);font-size:11px;color:#39a7c4}
.sc-forgot:hover{color:#5fd6e6}
.sc-submit{width:100%;font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:1.5px;
  color:#05060d;background:var(--accent2);border:none;border-radius:10px;padding:14px;cursor:pointer}
.sc-submit:hover{background:#5fe8e8;box-shadow:0 0 24px rgba(52,224,224,.45)}
.sc-alt{text-align:center;margin-top:24px;font-size:13px;color:#7f9dab}
.sc-alt a{color:var(--accent2);font-weight:600}
.sc-alt a:hover{text-shadow:0 0 12px rgba(52,224,224,.5)}
.sc-resend{margin:0 0 18px;text-align:center}
.sc-resend button{font-family:var(--mono);font-size:12px;color:#39a7c4;background:none;border:none;padding:0}
.sc-resend button:hover{color:#5fd6e6}

/* shared: success + error + footer */
.sc-success{display:inline-flex;align-items:center;gap:12px;padding:16px 22px;
  background:rgba(10,32,28,.65);border:1px solid #2c6a4e;border-radius:12px}
.sc-success .tick{width:22px;height:22px;border-radius:50%;background:#6ce6a0;display:inline-flex;
  align-items:center;justify-content:center;color:#042621;font-size:14px;font-weight:700}
.sc-success span:last-child{font-size:15px;color:#aef0c2}
.sc-error{font-family:var(--mono);font-size:12px;color:#e89a7c;margin-bottom:16px}
.cs-form + .sc-error{margin-top:12px}
.sc-foot{position:relative;margin-top:26px;font-family:var(--mono);font-size:11px;letter-spacing:1px;color:#3f5a68}
.cs-foot{position:absolute;left:0;right:0;bottom:22px;display:flex;align-items:center;justify-content:center;gap:18px}
.cs-foot-dot{width:4px;height:4px;border-radius:50%;background:#2a3f4a}

/* form extras (feedback) */
select,textarea{width:100%;padding:11px 13px;background:#05060d;border:1px solid var(--edge);
  border-radius:7px;color:var(--text);font-size:15px;font-family:var(--mono)}
select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(95,214,230,.18)}
textarea{resize:vertical;line-height:1.5}

/* ==================== admin dashboard ==================== */
.adm{max-width:1180px;margin:0 auto;padding:22px 22px 80px}
.adm-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid var(--edge)}
.adm-top .brand{font-size:22px}
.adm-who{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.adm-nav{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:8px;padding:14px 0;
  margin-bottom:8px;background:linear-gradient(var(--bg),var(--bg) 70%,transparent)}
.adm-nav a{font-family:var(--mono);font-size:12px;letter-spacing:1px;color:var(--muted);
  border:1px solid var(--edge);border-radius:999px;padding:6px 13px}
.adm-nav a:hover{color:var(--accent2);border-color:var(--edge2)}

.adm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:6px 0 26px}
.adm-stat{background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:16px 18px}
.adm-stat .n{font-size:30px;font-weight:700;color:#eaf7fb;line-height:1}
.adm-stat .l{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;color:var(--muted);
  text-transform:uppercase;margin-top:8px}
.adm-stat.alert-n .n{color:var(--accent2)}

.adm-panel{background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:20px;margin-bottom:22px}
.adm-panel h3{margin:0 0 14px;color:#eaf7fb;letter-spacing:1px;font-size:17px;
  display:flex;align-items:center;gap:10px}
.adm-panel h3 .count{font-family:var(--mono);font-size:12px;color:var(--muted);font-weight:400}
.adm-panel .empty{color:var(--muted);font-family:var(--mono);font-size:13px;padding:8px 0}
.adm-actions{margin-left:auto;font-family:var(--mono);font-size:12px}

.adm-tablewrap{overflow-x:auto}
table.adm{border-collapse:collapse;width:100%;font-size:13px}
table.adm th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--muted);
  text-transform:uppercase;font-weight:400;padding:8px 12px;border-bottom:1px solid var(--edge)}
table.adm td{padding:9px 12px;border-bottom:1px solid rgba(27,44,64,.5);color:var(--text);vertical-align:top}
table.adm tr:hover td{background:rgba(9,17,32,.5)}
table.adm td.mono,table.adm td .mono{font-family:var(--mono);color:var(--muted)}

.badge{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;border:1px solid var(--edge2);color:var(--muted)}
.badge.good{color:#aef0c2;border-color:#2c6a4e}
.badge.warn{color:#e8c07c;border-color:#6a5a2c}
.badge.bad{color:#ffb4b0;border-color:rgba(255,90,82,.5)}
.badge.info{color:#add6e2;border-color:#1b3346}
.badge.role-superadmin{color:#34e0e0;border-color:#17293c}

.fb-item{border:1px solid var(--edge);border-radius:10px;padding:14px 16px;margin-bottom:12px}
.fb-item.resolved{opacity:.6}
.fb-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.fb-head .who{font-family:var(--mono);font-size:12px;color:var(--muted)}
.fb-head .when{margin-left:auto;font-family:var(--mono);font-size:11px;color:#3f5a68}
.fb-msg{color:var(--text);line-height:1.55;white-space:pre-wrap;word-break:break-word}
.fb-item form{display:inline;margin-top:10px}
.fb-item .link{font-size:13px}

pre.adm-log{background:#04050a;border:1px solid var(--edge);border-radius:8px;padding:14px;
  overflow:auto;max-height:420px;font-family:var(--mono);font-size:12px;color:#c7d6dd;
  line-height:1.5;white-space:pre-wrap;word-break:break-word;margin:0}

/* admin settings + 2FA */
.set-wrap{max-width:620px;margin:0 auto;padding:22px 22px 80px}
.set-wrap .adm-panel .cta.full{margin-top:8px}
.qr{background:#fff;display:inline-block;padding:12px;border-radius:10px;line-height:0}
.qr svg{display:block;width:220px;height:220px}
.secret-key{font-family:var(--mono);font-size:15px;letter-spacing:2px;color:#eaf7fb;background:#04050a;
  border:1px solid var(--edge);border-radius:8px;padding:10px 12px;display:inline-block;word-break:break-all;margin:6px 0 0}
.reccodes{list-style:none;margin:10px 0 0;padding:14px;background:#04050a;border:1px solid #2c6a4e;border-radius:8px;
  columns:2;font-family:var(--mono);font-size:14px;color:#aef0c2}
.reccodes li{padding:3px 0}
.set-status{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px}
.enroll-steps{color:var(--muted);font-size:14px;line-height:1.6;margin:0 0 14px;padding-left:18px}