:root{
  --navy:#1B2A4A; --gold:#C5962C; --ablue:#2E5090; --ink:#23303F;
  --mute:#707B86; --line:#D9DEE7; --lgray:#F3F4F6; --ice:#CADCFC;
  --gold-tint:#FAF3E0; --navy-tint:#EAEEF5;
  --head:Georgia,'Times New Roman',serif;
  --body:Calibri,Carlito,'Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--body);color:var(--ink);background:var(--navy)}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--mute)}
.view{min-height:100vh}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px}

/* gate */
#view-gate,#view-loading{background:radial-gradient(1200px 600px at 50% -10%,#24365c,var(--navy))}
.seal{width:150px;height:150px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.4))}
.seal-sm{width:46px;height:46px}
/* prominent brand medallion on the login page */
.medallion{width:256px;height:256px;border-radius:50%;background:#fff;display:flex;
  align-items:center;justify-content:center;margin:0 auto 10px;
  box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 0 7px rgba(197,150,44,.22),0 0 0 9px rgba(197,150,44,.42),0 0 46px rgba(197,150,44,.18)}
.medallion .seal{width:210px;height:210px;filter:none}
.wordmark{font-family:var(--head);color:#fff;font-size:38px;margin:18px 0 2px}
.tagline{color:var(--gold);font-size:15px;letter-spacing:.5px;margin:0 0 26px}
#gate-form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
#passphrase{font-family:var(--body);font-size:16px;padding:12px 16px;border-radius:8px;border:1px solid #3a4d78;background:#0f1c36;color:#fff;width:280px;outline:none}
#passphrase:focus{border-color:var(--gold)}
#gate-submit{font-family:var(--body);font-size:16px;font-weight:bold;padding:12px 26px;border-radius:8px;border:0;background:var(--gold);color:var(--navy);cursor:pointer}
#gate-submit:disabled{opacity:.5;cursor:default}
.gate-msg{min-height:20px;color:#ffd2d2;font-size:13.5px;margin:14px 0 0}
.fineprint{color:var(--ice);opacity:.8;font-size:11.5px;line-height:1.5;margin-top:24px;max-width:460px;text-align:center}

/* library */
#view-library{background:#fff}
.lib-header{display:flex;align-items:center;gap:14px;padding:18px 24px;background:var(--navy);color:#fff;position:sticky;top:0;z-index:5}
.lib-header h1{font-family:var(--head);font-size:22px;margin:0;color:#fff}
.lib-header .muted{color:var(--ice);font-size:12.5px;margin:2px 0 0}
.lib-header>div{flex:1}
.ghost{margin-left:auto;background:transparent;border:1px solid #41527a;color:var(--ice);padding:8px 14px;border-radius:7px;font-family:var(--body);font-size:13px;cursor:pointer}
.ghost:hover{border-color:var(--gold);color:#fff}
#phases{max-width:980px;margin:0 auto;padding:24px}
.phase{margin-bottom:34px}
.phase-bar{border-left:5px solid var(--gold);padding:2px 0 2px 12px;margin-bottom:6px}
.phase-bar h2{font-family:var(--head);color:var(--navy);font-size:20px;margin:0}
.phase-bar p{color:var(--mute);font-size:13px;margin:3px 0 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:14px}
.card{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--lgray)}
.card h3{font-family:var(--head);color:var(--navy);font-size:15.5px;margin:0 0 10px}
.formats{display:flex;gap:8px;flex-wrap:wrap}
.fmt{font-family:var(--body);font-size:12.5px;font-weight:bold;text-decoration:none;border:1px solid var(--ablue);color:var(--ablue);background:#fff;padding:6px 12px;border-radius:6px;cursor:pointer}
.fmt:hover{background:var(--ablue);color:#fff}
.fmt[disabled]{opacity:.5;cursor:wait}
.lib-footer{max-width:980px;margin:0 auto;padding:18px 24px 40px;color:var(--mute);font-size:12px;border-top:1px solid var(--line)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:10px 18px;border-radius:8px;font-size:13.5px;box-shadow:0 6px 20px rgba(0,0,0,.25);opacity:0;transition:opacity .2s;z-index:20}
.toast.show{opacity:1}