/* assets/css/app.css — cybersecurityexams.net (dark operator/terminal) */
:root{
  --ink:#0b0f14; --ink-2:#0e141b; --panel:#111820; --panel-2:#151d26;
  --line:#1e2a34; --line-2:#26333f;
  --text:#d7e0ea; --muted:#8da0b0;
  --cyan:#22d3ee; --cyan-dim:#155e6b;
  --green:#34d399; --green-dim:#1c6b52;
  --red:#f87171; --red-dim:#7f2d2d;
  --amber:#fbbf24;
  --mono:Consolas,Menlo,"SF Mono",monospace;
  --radius:12px; --radius-sm:8px;
  --wrap:1040px;
}
*{box-sizing:border-box}
/* The HTML `hidden` attribute must always win over component display rules
   (.modal/.pill/.practice-toggles set display, which would otherwise override it). */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--ink); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--cyan); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2{line-height:1.2; margin:0 0 .4em}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.ta-r{text-align:right}
.ta-c{text-align:center}
.wt{color:var(--cyan)}

.wrap{max-width:var(--wrap); margin:0 auto; padding:24px 20px}

/* header */
.site-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--line); position:sticky; top:0;
  background:rgba(11,15,20,.9); backdrop-filter:blur(6px); z-index:5;
}
.brand{font-weight:700; color:var(--text); font-size:1.05rem; display:inline-flex; align-items:center; gap:9px}
.brand:hover{text-decoration:none}
.brand-mark{color:var(--cyan); margin-right:2px}
.brand-logo{height:30px; width:auto; display:block}
.brand-thin{color:var(--muted); font-weight:400}
.site-head nav a{margin-left:16px; color:var(--muted); font-size:.9rem}

/* hero */
.hero{border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--ink-2),var(--ink))}
.hero-inner{max-width:var(--wrap); margin:0 auto; padding:56px 20px}
.kicker{font-family:var(--mono); color:var(--cyan); letter-spacing:.14em; text-transform:uppercase; font-size:.75rem; margin-bottom:10px}
.hero h1{font-size:2.1rem}
.lede{color:var(--muted); max-width:62ch; font-size:1.05rem}
.hero .btn{margin-top:18px}

/* buttons */
.btn{
  display:inline-block; cursor:pointer; border:1px solid var(--line-2);
  background:var(--panel-2); color:var(--text); border-radius:var(--radius-sm);
  padding:12px 20px; font-size:.95rem; font-weight:600; transition:.12s ease; text-align:center;
}
.btn:hover{border-color:var(--cyan); text-decoration:none}
.btn-primary{background:var(--cyan); color:#04121a; border-color:var(--cyan)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-primary:disabled{background:var(--line-2); color:var(--muted); border-color:var(--line-2); cursor:not-allowed}
.btn-block{display:block; width:100%}
.btn-sm{padding:8px 14px; font-size:.88rem}

/* generic panel + grid */
.section-h{font-size:1.3rem; margin:8px 0 16px; padding-bottom:8px; border-bottom:1px solid var(--line)}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:20px}
.panel-title{font-family:var(--mono); color:var(--cyan); text-transform:uppercase; letter-spacing:.08em; font-size:.75rem; margin-bottom:14px}

/* landing cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; display:block; color:var(--text)}
.card-top:hover{border-color:var(--cyan); text-decoration:none; transform:translateY(-2px)}
.card-soon{opacity:.6}
.cert-code{font-family:var(--mono); color:var(--cyan); font-size:1.4rem; font-weight:700; letter-spacing:.04em}
.card-title{font-weight:600; margin:6px 0 10px}
.card-price{color:var(--green); font-family:var(--mono); margin-bottom:10px}
.badge{display:inline-block; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; border:1px solid var(--line-2); color:var(--muted); border-radius:999px; padding:3px 10px}
.badge-live{color:var(--green); border-color:var(--green-dim)}
.steps{margin-top:36px}
.step-n{color:var(--cyan); font-size:1.1rem; margin-bottom:6px}

/* faq */
details{border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 16px; margin-bottom:10px; background:var(--panel)}
summary{cursor:pointer; font-weight:600}
details[open] summary{margin-bottom:8px; color:var(--cyan)}

/* buy / redeem */
.buy-price{font-size:1.4rem; color:var(--green); font-family:var(--mono); margin-bottom:14px}
.ticklist{list-style:none; padding:0; margin:0 0 18px}
.ticklist li{padding-left:22px; position:relative; margin-bottom:8px; color:var(--muted)}
.ticklist li:before{content:"✓"; color:var(--green); position:absolute; left:0}
.fineprint{color:var(--muted); font-size:.82rem; margin-top:12px}
.code-input{
  width:100%; margin:8px 0 14px; padding:12px 14px; font-size:1rem; letter-spacing:.05em;
  background:var(--ink); border:1px solid var(--line-2); border-radius:var(--radius-sm); color:var(--text);
}
.code-input:focus{outline:none; border-color:var(--cyan)}

/* plans / pricing */
.plan-group-title{color:var(--cyan); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; margin:18px 0 10px}
.plan-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:8px}
.plan-card{
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:4px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 16px; color:var(--text); transition:.12s ease;
}
.plan-card:hover{border-color:var(--cyan); transform:translateY(-2px); text-decoration:none}
.plan-label{font-weight:700; font-size:1.02rem}
.plan-price{font-family:var(--mono); color:var(--green); font-size:1.5rem; margin:6px 0 2px}
.plan-cta{margin-top:auto; color:var(--cyan); font-weight:600; font-size:.9rem}
.ribbon{
  position:absolute; top:12px; right:-30px; transform:rotate(45deg);
  padding:3px 34px; font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#04121a; box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.ribbon-hot{background:linear-gradient(90deg,#fb7185,#f43f5e)}
.ribbon-value{background:linear-gradient(90deg,#34d399,#22d3ee)}

/* alerts */.alert{border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:14px; font-size:.9rem}
.alert-err{background:rgba(248,113,113,.1); border:1px solid var(--red-dim); color:#ffd7d7}
.alert-info{background:rgba(34,211,238,.08); border:1px solid var(--cyan-dim); color:#cdeef5}

/* domain table */
.domain-table{width:100%; border-collapse:collapse; font-size:.92rem}
.domain-table th{ text-align:left; color:var(--muted); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; padding:8px 10px; border-bottom:1px solid var(--line)}
.domain-table td{padding:9px 10px; border-bottom:1px solid var(--line)}

/* trainer */
.trainer-main{padding-top:28px; padding-bottom:48px}
.trainer-h1{font-size:1.6rem}
.mode-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.mode-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.mode-head{font-weight:600; margin-bottom:8px}
.mode-tag{display:inline-block; font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--cyan); border:1px solid var(--cyan-dim); border-radius:999px; padding:2px 9px; margin-right:8px}
.domain-pick{margin:12px 0; max-height:230px; overflow:auto; border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px}
.chk{display:block; padding:5px 0; font-size:.9rem}
.chk input{margin-right:8px; accent-color:var(--cyan)}
.count-row{margin:14px 0}
.count-row input[type=range]{width:100%; accent-color:var(--cyan)}

/* runner */
.runner-top{display:flex; align-items:center; gap:16px; margin-bottom:18px}
.progress{flex:1; height:8px; background:var(--panel-2); border-radius:999px; overflow:hidden; border:1px solid var(--line)}
.progress-bar{height:100%; width:0; background:linear-gradient(90deg,var(--cyan),var(--green)); transition:width .25s ease}
.runner-meta{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.pill{display:inline-flex; align-items:center; line-height:1.4; font-size:.72rem; border:1px solid var(--line-2); border-radius:999px; padding:3px 10px; color:var(--muted)}
/* Compact "Explain" pill with a click-to-open options menu (runner meta row) */
.pill-menu{position:relative; display:inline-flex}
.pill-pop{position:absolute; top:calc(100% + 6px); right:0; z-index:40; min-width:168px;
  background:var(--panel); border:1px solid var(--line-2); border-radius:var(--radius-sm);
  padding:4px; box-shadow:0 10px 28px rgba(0,0,0,.45)}
.pill-pop button{display:block; width:100%; text-align:left; background:transparent; border:0;
  color:var(--text); padding:9px 10px 9px 26px; border-radius:6px; cursor:pointer; font-size:.85rem; position:relative}
.pill-pop button:hover{background:var(--panel-2)}
.pill-pop button.is-active{color:var(--cyan); font-weight:700}
.pill-pop button.is-active::before{content:"\2713"; position:absolute; left:9px}

.qcard{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px; margin-bottom:16px}
.q-meta{color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px}
.q-stem{font-size:1.15rem; font-weight:600; line-height:1.5; margin:0 0 16px}
.q-img{max-width:100%; border:1px solid var(--line-2); border-radius:var(--radius-sm); margin:0 0 16px}
.q-opts{display:flex; flex-direction:column; gap:10px}
.q-opt{
  display:flex; align-items:flex-start; gap:12px; width:100%; text-align:left; cursor:pointer;
  background:var(--ink); border:1px solid var(--line-2); border-radius:var(--radius-sm);
  padding:14px 16px; color:var(--text); font-size:.98rem; transition:.12s ease;
}
.q-opt:hover:not(:disabled){border-color:var(--cyan); background:var(--panel-2)}
.q-opt:disabled{cursor:default}
.opt-key{
  flex:none; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line-2); border-radius:6px; font-size:.8rem; color:var(--muted); background:var(--panel);
}
.opt-text{flex:1 1 auto; min-width:0; line-height:1.45; padding-top:2px}
.q-opt.is-chosen{border-color:var(--cyan)}
.q-opt.is-correct{border-color:var(--green); background:rgba(52,211,153,.1)}
.q-opt.is-correct .opt-key{border-color:var(--green); color:var(--green)}
.q-opt.is-wrong{border-color:var(--red); background:rgba(248,113,113,.08)}
.q-opt.is-wrong .opt-key{border-color:var(--red); color:var(--red)}

.qfoot{min-height:8px}
.feedback{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-bottom:14px}
.fb-badge{display:block; width:max-content; font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; padding:3px 10px; border-radius:999px}
.fb-ok{color:var(--green); border:1px solid var(--green-dim)}
.fb-no{color:var(--red); border:1px solid var(--red-dim)}
.fb-exp{margin-top:12px; color:var(--text)}
.exp-label{display:block; font-weight:700; margin-bottom:5px; color:var(--text)}
.exp-body{display:block; color:var(--muted); line-height:1.55}
.q-opt.is-locked{opacity:1}
/* practice nav — top and bottom of the question */
.qnav{}
.qnav-row{display:flex; justify-content:space-between; gap:10px; align-items:center}
.qnav-row [data-nav="next"]{margin-left:auto}
#nav-top{margin-bottom:14px}
.loading{color:var(--muted); padding:20px 0}

/* results */
.result-hero{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  border:1px solid var(--line); border-radius:var(--radius); padding:28px;
  margin:8px 0 24px; background:linear-gradient(180deg,var(--panel),var(--ink-2));
}
.result-hero.is-pass{border-color:var(--green-dim); box-shadow:inset 0 0 0 1px rgba(52,211,153,.15)}
.result-hero.is-fail{border-color:var(--red-dim); box-shadow:inset 0 0 0 1px rgba(248,113,113,.12)}
.result-verdict{flex:1 1 auto; min-width:0}
.result-score{flex:0 0 auto}
.verdict-tag{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.verdict-word{font-size:2.6rem; margin:6px 0 8px; letter-spacing:.02em}
.result-hero.is-pass .verdict-word{color:var(--green)}
.result-hero.is-fail .verdict-word{color:var(--red)}
.score-ring{
  width:118px; height:118px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); border:2px solid var(--line-2);
}
.score-num{font-size:2rem; font-weight:700}
.score-num small{font-size:1rem; color:var(--muted)}
.b-well{border-color:var(--green)!important; color:var(--green)}
.b-above{border-color:var(--cyan)!important; color:var(--cyan)}
.b-near{border-color:var(--amber)!important; color:var(--amber)}
.b-below{border-color:var(--red)!important; color:var(--red)}

.masterbar{display:inline-block; width:90px; height:7px; background:var(--panel-2); border-radius:999px; overflow:hidden; margin-right:8px; vertical-align:middle; border:1px solid var(--line)}
.masterbar-fill{height:100%; display:block}
.masterbar-fill.b-well{background:var(--green)}
.masterbar-fill.b-above{background:var(--cyan)}
.masterbar-fill.b-near{background:var(--amber)}
.masterbar-fill.b-below{background:var(--red)}
.prof-label{font-size:.82rem; font-weight:600}
.result-actions{display:flex; gap:12px; flex-wrap:wrap; margin:8px 0 24px}

/* review */
.review .rev-item{border-top:1px solid var(--line); padding:18px 0}
.review .rev-item:first-of-type{border-top:none}
.rev-tag{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.rev-n{color:var(--muted)}
.rev-status{font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:2px 9px; border-radius:999px}
.rev-status.rev-ok{color:var(--green); border:1px solid var(--green-dim)}
.rev-status.rev-no{color:var(--red); border:1px solid var(--red-dim)}
.rev-stem{font-weight:600; margin-bottom:10px}
.rev-img{max-width:100%; border:1px solid var(--line-2); border-radius:var(--radius-sm); margin-bottom:10px}
.rev-opts{list-style:none; padding:0; margin:0}
.rev-opts li{padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:6px; color:var(--muted)}
.rev-opts li.rev-ok{border-color:var(--green-dim); color:var(--text); background:rgba(52,211,153,.07)}
.rev-opts li.rev-no{border-color:var(--red-dim); color:var(--text); background:rgba(248,113,113,.06)}
.rev-opts .opt-key{margin-right:8px}
.opt-flag{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; margin-left:8px; color:var(--muted)}
.rev-exp{margin-top:10px; color:var(--text); font-size:.92rem}

/* responsive */
@media (max-width:820px){
  .grid,.mode-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .plan-grid{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:1.6rem}
  .result-hero{flex-direction:column; text-align:center}
}
@media (max-width:520px){
  .plan-grid{grid-template-columns:1fr}
  .result-table th:nth-child(3),.result-table td:nth-child(3){display:none}
  /* Hide the progress bar on phones so the status pills get the full row. */
  .runner-top .progress{display:none}
}

/* ── nav dropdown ─────────────────────────────────────────────────────────── */
.site-nav{display:flex; align-items:center; gap:18px}
.site-nav > a{color:var(--muted); font-size:.9rem}
.nav-buy{position:relative}
.nav-buy > summary{list-style:none; cursor:pointer; color:var(--ink); background:var(--cyan); font-weight:600;
  padding:8px 14px; border-radius:var(--radius-sm); font-size:.9rem}
.nav-buy > summary::-webkit-details-marker{display:none}
.nav-buy[open] > summary{filter:brightness(1.05)}
.nav-menu{position:absolute; right:0; top:calc(100% + 8px); background:var(--panel); border:1px solid var(--line-2);
  border-radius:var(--radius); padding:8px; min-width:240px; z-index:20; box-shadow:0 12px 28px rgba(0,0,0,.4)}
.nav-buy-item{display:flex; flex-direction:column; padding:9px 12px; border-radius:var(--radius-sm); color:var(--text)}
.nav-buy-item:hover{background:var(--panel-2); text-decoration:none}
.nbi-label{font-weight:600}

/* ── gate (code / buy) ────────────────────────────────────────────────────── */
.gate-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.gate-card{display:flex; flex-direction:column}
.gate-buys{display:flex; flex-direction:column; gap:10px; margin:6px 0 4px}
.btn-buy{display:flex; justify-content:space-between; align-items:center; gap:12px; background:var(--panel-2); border:1px solid var(--line-2)}
.btn-buy:hover{border-color:var(--cyan)}

/* ── access bar ───────────────────────────────────────────────────────────── */
.access-bar{display:flex; justify-content:space-between; align-items:center; gap:16px; margin:6px 0 22px;
  padding:16px 20px; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--radius)}
.access-id{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.access-exam{font-size:1.5rem; font-weight:700; letter-spacing:.01em; color:var(--text)}
.plan-pill{display:inline-block; font-size:.78rem; font-weight:600; color:var(--cyan);
  border:1px solid var(--cyan-dim); background:rgba(34,211,238,.08); padding:3px 10px; border-radius:999px}
.access-expiry{text-align:right; display:flex; flex-direction:column; gap:3px}
.access-expiry-label{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.access-expiry-date{color:var(--green); font-size:1.05rem}

/* ── form fields ──────────────────────────────────────────────────────────── */
.field{margin:14px 0}
.field > label{display:block; margin-bottom:6px}
.select,.textarea{width:100%; background:var(--ink); color:var(--text); border:1px solid var(--line-2);
  border-radius:var(--radius-sm); padding:10px 12px; font-size:.95rem}
.select:focus,.textarea:focus{outline:none; border-color:var(--cyan)}
.textarea{resize:vertical; font-family:inherit}

/* ── runner timer + report pill ───────────────────────────────────────────── */
.pill-timer{color:var(--text); border-color:var(--line-2)}
.pill-timer.timer-low{color:var(--red); border-color:var(--red-dim); font-weight:700}
.pill-btn{cursor:pointer; background:transparent; color:var(--muted); border:1px solid var(--line-2)}
.pill-btn:hover{color:var(--amber); border-color:var(--amber)}
.practice-toggles{display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; margin:0 0 12px}
.pt-label{margin-right:2px}
.switch{font-size:.85rem; color:var(--muted); display:inline-flex; align-items:center; gap:6px; cursor:pointer}
.switch input{accent-color:var(--cyan)}

/* ── modal ────────────────────────────────────────────────────────────────── */
.modal{position:fixed; inset:0; background:rgba(4,10,16,.72); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px}
.modal-box{background:var(--panel); border:1px solid var(--line-2); border-radius:var(--radius); padding:26px 26px 22px; max-width:460px; width:100%; box-shadow:0 24px 60px rgba(0,0,0,.5)}
.modal-title{font-weight:700; font-size:1.15rem; margin:0}
.modal-sub{margin:6px 0 18px}
.modal-box .field{margin:0 0 16px}
.field-label{display:block; margin-bottom:8px; font-weight:600}
.modal-box .chk{display:flex; align-items:center; gap:9px; padding:4px 0}
.modal-box .chk input{accent-color:var(--cyan)}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:18px}
.report-msg{margin:0 0 4px; padding:11px 14px; border-radius:var(--radius-sm); font-size:.9rem; font-weight:600}
.report-msg.is-ok{color:var(--green); background:rgba(52,211,153,.1); border:1px solid var(--green-dim)}
.report-msg.is-err{color:var(--red); background:rgba(248,113,113,.1); border:1px solid var(--red-dim)}

@media (max-width:820px){
  .gate-grid{grid-template-columns:1fr}
  .access-bar{flex-direction:column; align-items:flex-start}
  .access-expiry{text-align:left}
}

/* ── exam history ─────────────────────────────────────────────────────────── */
.history{margin-top:22px}
.history-table{width:100%; border-collapse:collapse; font-size:.92rem}
.history-table th{ text-align:left; color:var(--muted); font-weight:600; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.04em; padding:8px 10px; border-bottom:1px solid var(--line-2)}
.history-table td{padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
.history-table tr:last-child td{border-bottom:none}
.res-badge{display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.03em;
  padding:2px 8px; border-radius:999px; border:1px solid transparent}
.res-pass{color:var(--green); border-color:var(--green); background:rgba(52,211,153,.08)}
.res-fail{color:var(--red);   border-color:var(--red-dim); background:rgba(248,113,113,.08)}
.res-open{color:var(--amber); border-color:var(--amber); background:rgba(251,191,36,.08)}
.btn-sm{padding:6px 12px; font-size:.85rem}

@media (max-width:720px){
  .history-table thead{display:none}
  .history-table, .history-table tbody, .history-table tr, .history-table td{display:block; width:100%}
  .history-table tr{border:1px solid var(--line-2); border-radius:var(--radius-sm); margin-bottom:10px; padding:6px 4px}
  .history-table td{border:none; padding:5px 12px}
  .history-table td.ta-r{text-align:left}
}

/* ── admin portal ─────────────────────────────────────────────────────────── */
.admin-tabs{display:flex; gap:8px; margin:6px 0 16px}
.admin-tabs .tab{background:var(--panel); border:1px solid var(--line-2); color:var(--muted);
  padding:8px 16px; border-radius:999px; cursor:pointer; font-size:.9rem; font-weight:600}
.admin-tabs .tab.is-active{color:var(--ink); background:var(--cyan); border-color:var(--cyan)}
.admin-searchbar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px}
.admin-searchbar #q{flex:1; min-width:220px}
.admin-searchbar .select{width:auto}
.admin-results{overflow-x:auto}
.admin-pager{display:flex; align-items:center; gap:14px; justify-content:center; margin-top:14px}
.modal-lg{max-width:640px; max-height:90vh; overflow-y:auto}
.admin-img{max-width:100%; max-height:180px; border:1px solid var(--line-2); border-radius:var(--radius-sm); display:block; margin-bottom:8px}

/* results per-domain: clean single-row aligned table */
.dm-wrap{overflow-x:auto}
.dm{width:100%; border-collapse:collapse; table-layout:fixed; min-width:640px}
.dm-c-domain{width:auto}
.dm-c-num{width:96px}
.dm-c-score{width:200px}
.dm-c-prof{width:190px}
.dm th{ text-align:center; color:var(--muted); font-weight:600; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.06em; padding:0 12px 10px; border-bottom:1px solid var(--line-2)}
.dm th.l{text-align:left}
.dm td{ text-align:center; padding:14px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
.dm tbody tr:last-child td{border-bottom:none}
.dm td.l{text-align:left; font-weight:600}
.dm td.l .mono{margin-right:6px}
.score-cell{display:inline-flex; align-items:center; gap:10px; justify-content:center}
.score-cell .masterbar{width:110px}
.score-pct{min-width:38px; text-align:right}
.prof-label{white-space:nowrap}

/* ── AI Study Coach ───────────────────────────────────────────────────────── */
.ai-panel{border:1px solid var(--cyan-dim); background:linear-gradient(180deg, rgba(34,211,238,.05), var(--panel))}
.ai-panel .panel-title{color:var(--cyan)}
.ai-sub{margin:-4px 0 14px}
.ai-feedback{color:var(--text); line-height:1.6}
.ai-feedback .ai-h{margin:16px 0 6px; font-size:1rem; color:var(--cyan); font-weight:700}
.ai-feedback .ai-h:first-child{margin-top:0}
.ai-feedback p{margin:0 0 10px}
.ai-feedback .ai-list{margin:0 0 12px; padding-left:22px}
.ai-feedback .ai-list li{margin:4px 0}
.ai-feedback strong{color:var(--text)}
.ai-loading{display:flex; align-items:center; gap:10px; color:var(--muted); padding:8px 0}
.ai-todo{padding:6px 0}
.ai-todo em{color:var(--muted)}
.ai-spinner{width:16px; height:16px; border-radius:50%; border:2px solid var(--line-2); border-top-color:var(--cyan); display:inline-block; animation:ai-spin .8s linear infinite}
@keyframes ai-spin{to{transform:rotate(360deg)}}

/* ── announcement / promo bar ─────────────────────────────────────────────── */
.promo-bar{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  background:linear-gradient(90deg,var(--cyan-dim),var(--green-dim)); color:#eafcff;
  padding:9px 44px 9px 16px; font-size:.9rem; position:relative; text-align:center}
.promo-text{font-weight:600}
.promo-code{cursor:pointer; background:rgba(0,0,0,.28); border:1px dashed rgba(255,255,255,.5);
  color:#fff; border-radius:999px; padding:3px 12px; font-size:.85rem}
.promo-code strong{letter-spacing:.06em}
.promo-x{position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none;
  color:#eafcff; font-size:1.3rem; line-height:1; cursor:pointer; opacity:.8}
.promo-x:hover{opacity:1}

/* ── buy page: plans + ribbons ────────────────────────────────────────────── */
.plan-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:8px 0 22px}
.plan-card{position:relative; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--radius);
  padding:24px 22px; display:flex; flex-direction:column; overflow:hidden}
.plan-card.is-featured{border-color:var(--green); box-shadow:0 0 0 1px var(--green-dim) inset}
.plan-ribbon{position:absolute; top:14px; right:-32px; transform:rotate(45deg); width:130px; text-align:center;
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 0; color:var(--ink)}
.ribbon-trial{background:var(--cyan)}
.ribbon-hot{background:var(--amber)}
.ribbon-bestvalue{background:var(--green)}
.plan-name{font-size:1.25rem; font-weight:700; margin-bottom:4px}
.plan-note{margin-bottom:14px}
.plan-feats{list-style:none; padding:0; margin:0 0 18px; display:flex; flex-direction:column; gap:7px}
.plan-feats li{padding-left:20px; position:relative; color:var(--text)}
.plan-feats li::before{content:"✓"; position:absolute; left:0; color:var(--green); font-weight:700}
.plan-card .btn{margin-top:auto}
.buy-foot{text-align:center; margin-top:8px; line-height:1.7}

/* ── resources ────────────────────────────────────────────────────────────── */
.res-group{margin-bottom:16px}
.res-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px}
.res-item{display:flex; flex-direction:column; gap:2px}
.res-link{font-weight:600}

/* ── admin report filters ─────────────────────────────────────────────────── */
.report-filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.report-filters .btn.is-active{background:var(--cyan); color:var(--ink); border-color:var(--cyan)}

@media (max-width:820px){
  .plan-grid{grid-template-columns:1fr}
  .dom-row-stats{gap:18px}
}

/* ── admin: wider editor modal + multi-column field rows ───────────────────── */
.modal-xl{max-width:820px; max-height:92vh; overflow-y:auto}
.field-row{display:flex; gap:14px; flex-wrap:wrap}
.field-row > .field{flex:1; min-width:180px; margin:14px 0 0}
.field-idnote{max-width:160px; flex:0 0 auto}
.id-badge{display:inline-block; font-weight:700; background:var(--panel-2); border:1px solid var(--line-2);
  border-radius:var(--radius-sm); padding:6px 12px}

/* ── buy page: pricing + promo ────────────────────────────────────────────── */
.plan-price{margin:2px 0 12px}
.price-now{font-size:1.7rem; font-weight:800; color:var(--text)}
.price-promo{display:block; font-size:.82rem; color:var(--green); margin-top:3px}
.promo-note{text-align:center; color:var(--amber); font-weight:600; margin:2px 0 22px}

/* ── why CISSP stats band ─────────────────────────────────────────────────── */
.why-cissp{background:var(--panel); border:1px solid var(--line-2); border-radius:var(--radius); padding:22px; margin:8px 0 20px}
.why-title{font-weight:700; font-size:1.15rem; margin-bottom:14px; text-align:center}
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.why-stat{text-align:center; padding:8px}
.why-num{display:block; font-size:1.5rem; font-weight:800; color:var(--cyan); margin-bottom:6px}
.why-label{display:block; color:var(--muted); font-size:.85rem; line-height:1.5}
.why-foot{text-align:center; margin-top:14px}

/* ── terms / sharing notices ──────────────────────────────────────────────── */
.tc-note{border:1px solid var(--amber); background:rgba(251,191,36,.06); border-radius:var(--radius-sm);
  padding:12px 16px; margin:6px 0 20px; font-size:.88rem; color:var(--text)}
.tc-mini{margin:0 0 16px}

@media (max-width:820px){
  .why-grid{grid-template-columns:1fr}
}

/* ── responsive nav (hamburger) ───────────────────────────────────────────── */
.nav-cb{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.nav-burger{display:none; flex-direction:column; justify-content:center; gap:4px;
  width:42px; height:36px; border:1px solid var(--line-2); border-radius:8px; background:var(--panel); cursor:pointer}
.nav-burger span{display:block; width:18px; height:2px; background:var(--text); margin:0 auto; border-radius:2px}

@media (max-width:760px){
  .nav-burger{display:flex}
  .site-nav{position:absolute; top:100%; right:12px; left:12px; display:none;
    flex-direction:column; align-items:stretch; gap:0; padding:8px;
    background:var(--panel); border:1px solid var(--line-2); border-radius:var(--radius);
    box-shadow:0 14px 30px rgba(0,0,0,.45); z-index:30}
  .nav-cb:checked ~ .site-nav{display:flex}
  .site-nav > a, .site-nav a{margin:0; padding:12px; font-size:.98rem; border-radius:var(--radius-sm)}
  .site-nav a:hover{background:var(--panel-2)}
  .admin-tabs{flex-wrap:wrap}
}

/* ── buy: strikethrough pricing ───────────────────────────────────────────── */
.price-now{font-size:1.9rem; font-weight:800; color:var(--text)}
.price-was{font-size:1.05rem; color:var(--muted); text-decoration:line-through; margin-left:8px}
.price-tag{display:block; font-size:.8rem; color:var(--green); margin-top:4px}

/* ── general mobile polish ────────────────────────────────────────────────── */
@media (max-width:620px){
  .wrap{padding:18px 16px}
  .hero-inner{padding:38px 16px}
  .hero h1{font-size:1.5rem}
  .trainer-main{padding-top:20px}
  .modal{padding:12px}
  .modal-box{padding:20px 16px}
  .access-exam{font-size:1.25rem}
  .result-hero{padding:20px}
}

/* ── Legal pages (Terms of Use) ─────────────────────────────────────────── */
.legal{max-width:820px}
.legal p{color:var(--text); line-height:1.7; margin:0 0 12px}
.legal-sec{margin:22px 0}
.legal-sec h2{font-size:1.08rem; margin:0 0 8px; padding-bottom:6px; border-bottom:1px solid var(--line)}
.legal ul{margin:0 0 12px; padding-left:20px; color:var(--text)}
.legal li{margin-bottom:6px; line-height:1.6}
.legal a{color:var(--cyan,#22d3ee)}

/* ── Ad slots (practice mode only; empty unless ads are enabled) ─────────── */
.ad-slot{margin:16px 0; padding:10px; border:1px dashed var(--line-2); border-radius:var(--radius-sm); background:var(--panel-2); text-align:center}
.ad-slot-label{display:block; text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px}
.ad-slot ins{min-height:90px}

/* ── Admin: danger button + access-code usage log ───────────────────────────── */
.btn-danger{background:#3a1720; border-color:#5a2230; color:#f87171}
.btn-danger:hover{background:#4a1d28; border-color:#6a2838}
.usage-tbl{width:100%; border-collapse:collapse; font-size:.82rem; margin-top:4px}
.usage-tbl th,.usage-tbl td{text-align:left; padding:4px 8px; border-bottom:1px solid var(--line); vertical-align:top}
.usage-tbl th{color:var(--muted); font-weight:600}
.usage-scroll{max-height:200px; overflow:auto; border:1px solid var(--line); border-radius:var(--radius-sm)}
.ip-warn{color:#fbbf24; font-weight:700}
.ip-ok{color:var(--muted)}

/* ── Per-domain mastery table: stack into cards on phones (no squeeze/overlap) ── */
@media (max-width:620px){
  .dm-wrap{overflow-x:visible}
  .dm{min-width:0; display:block; table-layout:auto}
  .dm colgroup, .dm thead{display:none}
  .dm tbody, .dm tr, .dm td{display:block; width:auto}
  .dm tr{background:var(--panel-2); border:1px solid var(--line-2); border-radius:var(--radius-sm);
         padding:12px 14px; margin-bottom:12px}
  .dm td{display:flex; justify-content:space-between; align-items:center; gap:12px;
         text-align:right; padding:7px 0; border-bottom:1px solid var(--line)}
  .dm td:last-child{border-bottom:none}
  .dm td::before{content:attr(data-label); color:var(--muted); font-weight:600;
                 font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; text-align:left}
  .dm td.dm-domain{display:block; text-align:left; font-size:1rem; font-weight:700;
                   padding:0 0 8px; margin-bottom:4px; border-bottom:1px solid var(--line-2)}
  .dm td.dm-domain::before{content:none}
  .score-cell{justify-content:flex-end}
  .score-cell .masterbar{width:90px}
}


/* ── Unavailable ("out of stock") purchase plans ────────────────────────────── */
.plan-card.is-soldout{opacity:.6; filter:grayscale(.4)}
.plan-card.is-soldout .price-now{color:var(--muted)}
.plan-ribbon.ribbon-soldout{background:var(--red); color:#fff}
.btn-soldout{background:var(--line-2); color:var(--muted); border:1px solid var(--line-2);
  cursor:not-allowed; text-align:center; pointer-events:none}