:root { --navy:#14213d; --gold:#fca311; --light:#f7f7f7; --gray:#e5e5e5; --text:#1f2933; }
* { box-sizing:border-box; }
body { margin:0; font-family: Arial, Helvetica, sans-serif; color:var(--text); background:var(--light); }
header { background:var(--navy); color:white; padding:28px 20px; text-align:center; }
header h1 { margin:0 0 8px 0; }
header p { margin:0; opacity:.9; }
nav { display:flex; flex-wrap:wrap; gap:8px; padding:12px; background:white; border-bottom:1px solid var(--gray); justify-content:center; position:sticky; top:0; z-index:10; }
button { border:0; background:var(--navy); color:white; padding:10px 14px; border-radius:8px; cursor:pointer; font-weight:600; }
button:hover, button.active { background:var(--gold); color:#111; }
main { max-width:1050px; margin:auto; padding:22px; }
.tab { display:none; }
.tab.show { display:block; }
.buttonBar { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.card { background:white; min-height:315px; border-radius:22px; box-shadow:0 10px 26px rgba(0,0,0,.12); padding:28px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; cursor:pointer; border:3px solid transparent; }
.card:hover { border-color:var(--gold); }
.badge { background:var(--gray); padding:6px 12px; border-radius:99px; margin-bottom:12px; font-size:.9rem; }
.hint { color:#667; text-transform:uppercase; letter-spacing:1px; font-size:.85rem; }
.term { font-size:2rem; line-height:1.25; margin:18px 0; max-width:850px; }
.chapter { color:#666; font-size:.95rem; }
.controls { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:18px 0; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
figure { background:white; padding:12px; margin:0; border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.08); }
img { width:100%; height:210px; object-fit:cover; border-radius:10px; }
figcaption { font-size:.95rem; padding-top:8px; line-height:1.4; }
.callout, .quizBox { background:white; padding:18px; border-left:6px solid var(--gold); border-radius:12px; margin:22px 0; box-shadow:0 6px 18px rgba(0,0,0,.08); }
.choices { display:grid; gap:10px; margin:16px 0; }
.choices button { text-align:left; background:#27364f; }
.correct { color:#0f7b2f; font-weight:700; }
.wrong { color:#b00020; font-weight:700; }
.termRow { display:grid; gap:3px; background:white; border-radius:10px; padding:12px; margin:10px 0; border-left:5px solid var(--navy); }
.termRow strong { font-size:1.1rem; }
.termRow span { line-height:1.35; }
.termRow em { color:#666; font-size:.9rem; }
footer { text-align:center; color:#667; padding:25px; font-size:.9rem; }
@media (max-width:600px) { .term { font-size:1.45rem; } nav { position:static; } }

/* --- Login page --- */
body.login-page { display:flex !important; align-items:center; justify-content:center; min-height:100vh; background:var(--navy); }
.login-box { background:white; border-radius:18px; padding:44px 36px; max-width:400px; width:100%; box-shadow:0 16px 48px rgba(0,0,0,.35); text-align:center; }
.login-box h1 { margin:0 0 6px 0; color:var(--navy); font-size:1.8rem; }
.login-subtitle { margin:0 0 28px 0; color:#555; font-size:.95rem; }
.login-box form { display:flex; flex-direction:column; gap:10px; text-align:left; }
.login-box label { font-size:.85rem; font-weight:700; color:var(--text); }
.login-box input { border:1.5px solid var(--gray); border-radius:8px; padding:11px 13px; font-size:1rem; width:100%; outline:none; transition:border .2s; }
.login-box input:focus { border-color:var(--navy); }
.login-box button[type="submit"] { margin-top:8px; padding:13px; font-size:1rem; border-radius:8px; background:var(--navy); }
.login-box button[type="submit"]:hover { background:var(--gold); color:#111; }
.login-box button:disabled { opacity:.6; cursor:not-allowed; }
.error-msg { color:#b00020; font-size:.9rem; min-height:1.2em; text-align:center; }
.login-note { margin-top:22px; font-size:.82rem; color:#888; line-height:1.5; }

/* --- Header user bar --- */
.header-user { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:12px; }
.header-user span { font-size:.85rem; opacity:.75; }
.signout-btn { background:transparent; border:1.5px solid rgba(255,255,255,.45); color:white; padding:5px 14px; font-size:.82rem; font-weight:600; border-radius:20px; }
.signout-btn:hover { background:rgba(255,255,255,.15); color:white; }

/* --- Register page extras --- */
.register-box { max-width:480px; }
.register-box textarea { border:1.5px solid var(--gray); border-radius:8px; padding:11px 13px; font-size:1rem; width:100%; outline:none; resize:vertical; font-family:inherit; transition:border .2s; }
.register-box textarea:focus { border-color:var(--navy); }
.optional { font-weight:400; color:#888; font-size:.8rem; }
.required-tag { background:#ffeaea; color:#b00020; font-size:.75rem; font-weight:700; padding:2px 7px; border-radius:99px; vertical-align:middle; }
.field-note { font-size:.82rem; color:#888; margin:2px 0 6px 0; }
.file-drop { position:relative; border:2px dashed var(--gray); border-radius:8px; padding:18px; text-align:center; cursor:pointer; transition:border .2s; }
.file-drop:hover { border-color:var(--navy); }
.file-drop input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.file-drop span { font-size:.9rem; color:#667; pointer-events:none; }
.login-divider { border:none; border-top:1px solid var(--gray); margin:22px 0; }
.register-prompt { font-size:.9rem; color:#555; margin:0; }
.register-prompt a { color:var(--navy); font-weight:700; text-decoration:none; }
.register-prompt a:hover { text-decoration:underline; }
.success-icon { font-size:3rem; color:#0f7b2f; margin-bottom:12px; }
.btn-link { display:inline-block; margin-top:18px; padding:11px 24px; background:var(--navy); color:white; border-radius:8px; text-decoration:none; font-weight:700; font-size:.95rem; }
.btn-link:hover { background:var(--gold); color:#111; }

/* --- Admin page --- */
body.admin-page { background:#f0f2f5; display:block !important; }
.admin-header { background:var(--navy); color:white; padding:0; }
.admin-header-inner { max-width:1200px; margin:auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.admin-header h1 { margin:0; font-size:1.3rem; }
.admin-header h1 span { color:var(--gold); }
.admin-main { max-width:1200px; margin:28px auto; padding:0 20px; }
.admin-filters { display:flex; align-items:center; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.filter-btn { background:white; color:var(--navy); border:1.5px solid var(--gray); padding:8px 18px; border-radius:20px; font-weight:600; font-size:.9rem; cursor:pointer; }
.filter-btn.active, .filter-btn:hover { background:var(--navy); color:white; border-color:var(--navy); }
.record-count { margin-left:auto; font-size:.85rem; color:#667; }
.admin-loading, .admin-empty { text-align:center; padding:60px 20px; color:#667; font-size:1rem; }
.admin-table { width:100%; border-collapse:collapse; background:white; border-radius:12px; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,.08); }
.admin-table thead { background:var(--navy); color:white; }
.admin-table th { padding:13px 16px; text-align:left; font-size:.85rem; font-weight:600; }
.admin-table td { padding:13px 16px; font-size:.9rem; border-bottom:1px solid #f0f2f5; vertical-align:middle; }
.reg-row { cursor:pointer; transition:background .15s; }
.reg-row:hover { background:#f7f9ff; }
.status-badge { padding:4px 10px; border-radius:99px; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.status-pending  { background:#fff3cd; color:#856404; }
.status-approved { background:#d1f0d9; color:#0f5132; }
.status-denied   { background:#f8d7da; color:#842029; }
.btn-mini { background:var(--navy); color:white; padding:5px 12px; border-radius:6px; font-size:.8rem; cursor:pointer; border:none; }
.btn-mini:hover { background:var(--gold); color:#111; }

/* --- Detail panel --- */
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:100; }
.detail-panel { position:fixed; top:0; right:0; height:100%; width:420px; max-width:95vw; background:white; z-index:101; box-shadow:-8px 0 32px rgba(0,0,0,.15); overflow-y:auto; }
.detail-inner { padding:32px 28px; }
.detail-close { position:absolute; top:18px; right:20px; background:none; border:none; font-size:1.3rem; color:#667; cursor:pointer; padding:4px 8px; }
.detail-close:hover { color:var(--navy); background:none; }
.detail-panel h2 { margin:0 0 10px 0; font-size:1.4rem; color:var(--navy); padding-right:32px; }
.detail-meta { margin:4px 0; font-size:.92rem; color:#444; }
.detail-message { margin:16px 0; padding:14px; background:#f7f9ff; border-radius:8px; font-size:.9rem; line-height:1.5; }
.detail-msg-label { font-weight:700; font-size:.8rem; text-transform:uppercase; color:#667; margin:0 0 6px 0; }
.detail-actions { display:flex; flex-direction:column; gap:10px; margin-top:24px; }
.btn-letter  { display:block; text-align:center; padding:11px; border-radius:8px; background:#e8f0fe; color:#1a3c8f; font-weight:700; text-decoration:none; font-size:.9rem; }
.btn-letter:hover { background:#d0e2ff; }
.btn-approve { background:#0f7b2f; color:white; padding:11px; border-radius:8px; font-size:.95rem; font-weight:700; cursor:pointer; border:none; }
.btn-approve:hover { background:#0a5c23; }
.btn-deny    { background:white; color:#b00020; border:1.5px solid #b00020; padding:10px; border-radius:8px; font-size:.95rem; font-weight:700; cursor:pointer; }
.btn-deny:hover { background:#ffeaea; }
.detail-status-msg { margin-top:14px; font-size:.9rem; font-weight:600; text-align:center; min-height:1.2em; }
.status-ok  { color:#0f7b2f; }
.status-err { color:#b00020; }
@media (max-width:600px) { .detail-panel { width:100%; } .admin-table { font-size:.8rem; } .admin-table th, .admin-table td { padding:10px 10px; } }