:root{
  --ink:#161b28; --ink-2:#1f2638; --ink-3:#2a3348;
  --line: rgba(255,255,255,0.09);
  --parchment:#f6efdc;
  --gold:#c9a227; --gold-bright:#e6c34d;
  --teal:#3f8a76; --rose:#b5495a;
  --text:#eef1f6; --text-dim:#a9b1c4;
  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'SFMono-Regular', 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; font-family:var(--sans); color:var(--text);
  background:
    radial-gradient(1200px 800px at 15% -10%, rgba(201,162,39,0.10), transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, rgba(63,138,118,0.10), transparent 55%),
    var(--ink);
  min-height:100vh; padding:28px 16px;
}
.center-wrap{ display:flex; align-items:center; justify-content:center; min-height:80vh; }
.app{ width:100%; max-width:720px; margin:0 auto; }
.app.wide{ max-width:980px; }

.eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-bright); margin:0 0 10px; }
h1{ font-family:var(--serif); font-weight:600; font-size:clamp(24px,4vw,32px); margin:0 0 8px; }
h2{ font-family:var(--serif); font-size:19px; margin:0; font-weight:600; }
p.lead{ color:var(--text-dim); margin:0 0 24px; line-height:1.55; font-size:15px; }

.card{ background:linear-gradient(180deg, var(--ink-2), var(--ink-3)); border:1px solid var(--line); border-radius:14px; padding:26px; box-shadow:0 20px 50px -20px rgba(0,0,0,0.6); }
.card + .card{ margin-top:16px; }

label{ display:block; font-size:12.5px; color:var(--text-dim); margin:0 0 6px; }
input[type=text], input[type=password], input[type=number], textarea, select{
  width:100%; background:rgba(0,0,0,0.25); border:1px solid var(--line); border-radius:9px;
  padding:11px 13px; color:var(--text); font-size:14.5px; font-family:var(--sans); outline:none;
}
textarea{ resize:vertical; min-height:60px; }
input:focus, textarea:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,39,0.18); }
.field{ margin-bottom:16px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }

.btn{ appearance:none; border:none; cursor:pointer; font-family:var(--sans); font-weight:600; font-size:14px; padding:11px 20px; border-radius:9px; }
.btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn-primary{ background:linear-gradient(180deg, var(--gold-bright), var(--gold)); color:#241c04; }
.btn-ghost{ background:transparent; color:var(--text-dim); border:1px solid var(--line); }
.btn-ghost:hover{ color:var(--text); border-color:rgba(255,255,255,0.25); }
.btn-danger{ background:transparent; color:var(--rose); border:1px solid rgba(181,73,90,0.4); }
.mini-btn{ font-size:12px; padding:6px 11px; border-radius:7px; }
.btn-row{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.link-btn{ background:none; border:none; color:var(--text-dim); font-size:12.5px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:0; }
.link-btn:hover{ color:var(--gold-bright); }

.error-msg{ color:var(--rose); font-size:13px; margin-top:8px; min-height:16px; }
.hint{ color:var(--text-dim); font-size:12px; margin-top:6px; }
.footer-note{ text-align:center; color:var(--text-dim); font-size:12px; margin-top:18px; }
.top-bar{ display:flex; justify-content:flex-end; max-width:980px; margin:0 auto 8px; }

/* Quiz */
.exam-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:16px; }
.progress-label{ font-family:var(--mono); font-size:11px; color:var(--text-dim); margin-bottom:6px; }
.dots{ display:flex; gap:6px; flex-wrap:wrap; }
.dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.15); }
.dot.answered{ background:var(--teal); }
.dot.current{ background:var(--gold-bright); transform:scale(1.3); }
.timer{ font-family:var(--mono); font-size:22px; font-weight:600; padding:8px 14px; border-radius:9px; background:rgba(0,0,0,0.28); border:1px solid var(--line); min-width:88px; text-align:center; }
.timer.warn{ color:var(--rose); border-color:rgba(181,73,90,0.5); animation:pulse 1s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.55;} }
.q-eyebrow{ font-family:var(--mono); font-size:11.5px; color:var(--gold-bright); letter-spacing:.1em; text-transform:uppercase; margin-bottom:10px;}
.q-text{ font-family:var(--serif); font-size:20px; line-height:1.4; margin:0 0 22px; }
.options{ display:flex; flex-direction:column; gap:10px; }
.option{ display:block; padding:0; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,0.02); cursor:pointer; }
.option label{ display:flex; align-items:center; gap:12px; padding:13px 15px; font-size:14.5px; color:var(--text); cursor:pointer; margin:0;}
.option input{ width:18px; height:18px; flex:none; }
.option.selected{ border-color:var(--gold); background:rgba(201,162,39,0.10); }

/* Result */
.result-banner{ text-align:center; padding:28px 20px 20px; border-radius:12px; margin-bottom:20px; }
.result-banner.pass{ background:linear-gradient(180deg, rgba(63,138,118,0.18), rgba(63,138,118,0.03)); border:1px solid rgba(63,138,118,0.4); }
.result-banner.fail{ background:linear-gradient(180deg, rgba(181,73,90,0.16), rgba(181,73,90,0.03)); border:1px solid rgba(181,73,90,0.4); }
.result-score{ font-family:var(--serif); font-size:42px; margin:4px 0; }
.result-status{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.result-banner.pass .result-status{ color:var(--teal); }
.result-banner.fail .result-status{ color:var(--rose); }
.review-item{ padding:11px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.review-item:last-child{ border-bottom:none; }
.review-a.correct{ color:var(--teal); }
.review-a.wrong{ color:var(--rose); }

/* Certificate */
.cert-wrap{ display:flex; justify-content:center; margin-bottom:22px; }
.certificate{ width:100%; aspect-ratio:1.42/1; background:radial-gradient(700px 400px at 50% -10%, rgba(201,162,39,0.10), transparent 60%), var(--parchment); color:#2b2410; border-radius:6px; position:relative; padding:34px 38px; border:1px solid #d8c78f; box-shadow:0 25px 60px -25px rgba(0,0,0,0.7); display:flex; flex-direction:column; align-items:center; text-align:center; }
.certificate::before{ content:''; position:absolute; inset:10px; border:1.5px solid var(--gold); border-radius:3px; pointer-events:none; }
.certificate::after{ content:''; position:absolute; inset:15px; border:1px solid rgba(201,162,39,0.5); border-radius:2px; pointer-events:none; }
.cert-eyebrow{ font-family:var(--mono); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:#8a7326; margin-top:14px;}
.cert-title{ font-family:var(--serif); font-size:clamp(22px,3.4vw,30px); margin:10px 0 2px; }
.cert-sub{ font-size:12.5px; color:#5c5231; margin-bottom:18px; }
.cert-name{ font-family:var(--serif); font-size:clamp(24px,4vw,34px); border-bottom:1.5px solid var(--gold); padding:0 10px 8px; margin-bottom:14px; }
.cert-body{ font-size:13px; color:#4a4022; max-width:440px; line-height:1.6; margin-bottom:auto; }
.cert-footer{ width:100%; display:flex; justify-content:space-between; align-items:flex-end; margin-top:18px; padding-top:14px; }
.cert-meta{ text-align:left; font-size:11px; color:#6a5f36; font-family:var(--mono); line-height:1.6; }
.cert-actions{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }

/* Admin */
.admin-tabs{ display:flex; gap:6px; margin-bottom:20px; flex-wrap:wrap; }
.admin-tab{ padding:9px 15px; border-radius:8px; font-size:13px; cursor:pointer; border:1px solid var(--line); color:var(--text-dim); background:transparent; font-family:var(--sans); }
.admin-tab.active{ background:rgba(201,162,39,0.12); border-color:var(--gold); color:var(--text); }
.admin-panel{ display:none; }
.admin-panel.active{ display:block; }
.panel-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:10px; }

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:8px; }
.stat-card{ background:rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:10px; padding:16px; }
.stat-num{ font-family:var(--serif); font-size:28px; }
.stat-label{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin-top:4px;}

table{ width:100%; border-collapse:collapse; font-size:13px; }
th, td{ text-align:left; padding:9px 8px; border-bottom:1px solid var(--line); }
th{ color:var(--text-dim); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.table-wrap{ overflow-x:auto; }
.badge{ padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600; white-space:nowrap; }
.badge.pass{ background:rgba(63,138,118,0.18); color:var(--teal); }
.badge.fail{ background:rgba(181,73,90,0.18); color:var(--rose); }

.q-admin-item{ border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:10px; }
.q-admin-item .qa-text{ font-size:14px; margin-bottom:6px; }
.q-admin-item .qa-opts{ font-size:12.5px; color:var(--text-dim); margin-bottom:8px; }
.q-admin-item .qa-opts .correct-opt{ color:var(--teal); }
.qa-actions{ display:flex; gap:8px; }
.empty-state{ text-align:center; color:var(--text-dim); font-size:13.5px; padding:30px 10px; }
.code-row{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); gap:10px; flex-wrap:wrap; }
.code-row:last-child{ border-bottom:none; }
.code-tag{ font-family:var(--mono); background:rgba(201,162,39,0.12); color:var(--gold-bright); padding:4px 10px; border-radius:6px; font-size:13px; }

.warn-banner{ background:rgba(181,73,90,0.14); border:1px solid rgba(181,73,90,0.4); color:#f0c6cc; padding:12px 14px; border-radius:9px; font-size:13px; margin-bottom:14px; line-height:1.5; }
.success-banner{ background:rgba(63,138,118,0.14); border:1px solid rgba(63,138,118,0.4); color:#cdeee4; padding:12px 14px; border-radius:9px; font-size:13px; margin-bottom:14px; line-height:1.5; }
.import-export-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }

@media print{
  body *{ visibility:hidden; }
  .certificate, .certificate *{ visibility:visible; }
  .certificate{ position:fixed; inset:0; margin:auto; width:90vw; max-width:900px; box-shadow:none; }
  body{ background:white; padding:0; }
}