/* ExamRank public site - no framework, single stylesheet.
   Visual refresh only: every class name and CSS variable below is referenced
   by existing PHP/JS (inline var(--brand) etc., .qrow/.opt for the answer
   grid, .mode-card:has(...) for the entry-mode picker) - values changed
   freely, nothing renamed or removed. */

:root{
  --bg:#eef1f8; --panel:#ffffff; --ink:#161c2d; --muted:#667085;
  --line:#e4e8f1; --brand:#3457e8; --brand-dark:#2743bf; --brand-light:#eef1fe;
  --ok:#0f8a4d; --ok-bg:#e7f7ee; --warn:#a9720b; --warn-bg:#fdf4e0;
  --err:#c0322b; --err-bg:#fdeeed; --info:#3457e8; --info-bg:#eef1fe;
  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(20,25,50,.04),0 10px 28px -8px rgba(20,25,50,.12);
  --shadow-sm:0 1px 2px rgba(20,25,50,.06);
  --shadow-lift:0 4px 10px -2px rgba(20,25,50,.1),0 16px 32px -12px rgba(20,25,50,.18);
}
*{box-sizing:border-box}
body{margin:0;background:
    radial-gradient(1100px 480px at 12% -10%, #e6ecff 0%, transparent 60%),
    radial-gradient(900px 420px at 100% 0%, #eef7f2 0%, transparent 55%),
    var(--bg);
  color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .5rem;line-height:1.25;letter-spacing:-.01em}

.pub-topbar{background:linear-gradient(180deg,#121a2e,#0c1120);color:#fff;
  padding:1rem 1.5rem;box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 8px 24px -12px rgba(0,0,0,.5)}
.pub-topbar .inner{max-width:960px;margin:0 auto;display:flex;align-items:center;gap:1rem}
.pub-brand-block{display:flex;flex-direction:column;gap:.05rem;line-height:1.2}
.pub-brand{font-weight:800;font-size:1.2rem;letter-spacing:-.01em;color:#fff}
.pub-brand span{color:#8bb0ff}
.pub-topbar .tagline{color:#9aa7c7;font-size:.78rem}
.pub-topbar .spacer{flex:1}
.pub-nav{display:flex;gap:.25rem;align-items:center}
.pub-nav a{display:inline-flex;align-items:center;gap:.4rem;color:#c8d4e6;font-size:.9rem;
  font-weight:600;padding:.35rem .7rem;border-radius:6px}
.pub-nav a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}

.pub-wrap{max-width:960px;margin:2rem auto;padding:0 1.25rem}
.pub-wrap.narrow{max-width:640px}

/* Home page hero + exam list (index.php) */
.home-hero{background:linear-gradient(135deg,#0f172a 0%,#1c2541 45%,#1e1b4b 100%);
  padding:3.5rem 0 4.5rem;text-align:center;position:relative;overflow:hidden}
.home-hero::before{content:'';position:absolute;top:-30%;left:-8%;width:420px;height:420px;
  background:radial-gradient(circle,rgba(139,92,246,.18) 0%,transparent 70%);border-radius:50%}
.home-hero::after{content:'';position:absolute;bottom:-25%;right:-6%;width:340px;height:340px;
  background:radial-gradient(circle,rgba(52,87,232,.22) 0%,transparent 70%);border-radius:50%}
.home-hero .pub-wrap{margin:0 auto;position:relative;z-index:2}
.home-hero h1{color:#fff;font-size:2.4rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.75rem}
.home-hero p{color:#aab3cf;font-size:1.05rem;max-width:560px;margin:0 auto}

.exam-search{position:relative;margin:2rem auto 0;max-width:560px}
.exam-search svg{position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);color:var(--muted);
  pointer-events:none}
.exam-search input{width:100%;box-sizing:border-box;padding:.95rem 1.1rem .95rem 3rem;
  border-radius:var(--radius);border:1px solid var(--line);background:var(--panel);
  font:inherit;font-size:1rem;color:var(--ink);box-shadow:var(--shadow);outline:none;
  transition:border-color .15s ease}
.exam-search input:focus{border-color:var(--brand)}

.exam-list{display:grid;gap:.85rem;margin-bottom:1.25rem}
.exam-row{display:flex;align-items:center;gap:1rem;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:1rem 1.25rem;box-shadow:var(--shadow-sm);color:inherit;
  transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}
.exam-row:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px);border-color:#c7d1fb;text-decoration:none}
.exam-row-icon{flex-shrink:0;width:2.75rem;height:2.75rem;border-radius:10px;background:var(--brand-light);
  color:var(--brand);display:flex;align-items:center;justify-content:center}
.exam-row-info{flex:1;min-width:0;display:flex;flex-direction:column}
.exam-row-title{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.05rem;color:var(--ink)}
.exam-row:hover .exam-row-title{color:var(--brand)}
.exam-row-sub{color:var(--muted);font-size:.85rem;margin-top:.2rem}
.exam-row-pills{display:flex;gap:.35rem;margin-top:.5rem;flex-wrap:wrap}
.badge-new{background:var(--ok);color:#fff;font-size:.62rem;font-weight:800;padding:.15rem .45rem;
  border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
.exam-row-right{display:flex;align-items:center;gap:1rem;flex-shrink:0}
.exam-row-marks{display:flex;gap:.75rem;font-size:.85rem;font-weight:700;padding-right:1rem;
  border-right:1px solid var(--line)}
.exam-row-marks .plus{color:var(--ok)}
.exam-row-marks .minus{color:var(--err)}
.exam-row-arrow{color:var(--muted);font-size:1.3rem;line-height:1}
.exam-row:hover .exam-row-arrow{color:var(--brand)}

@media (max-width:640px){
  .exam-row-marks{display:none}
  .home-hero h1{font-size:1.9rem}
  .home-hero{padding:2.75rem 0 3.5rem}
}

/* "How it works" / FAQ on the home page - deliberately NOT a white .card like
   the exam list above, so the exam list (the actual thing to click) stays the
   visually dominant content instead of blending into more white boxes. */
.home-section{padding:2rem 0;margin-top:.5rem}
.home-section h2{font-size:1.3rem}

.pub-hero{padding:3rem 0 1.75rem;text-align:center}
.pub-hero h1{font-size:2.3rem;font-weight:800}
.pub-hero p{color:var(--muted);font-size:1.08rem;max-width:560px;margin:.6rem auto 0}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1.5rem;margin-bottom:1.25rem;transition:box-shadow .2s ease}

.exam-empty{text-align:center;color:var(--muted);padding:2.75rem 1rem}

/* Home page: "How it works" steps + FAQ (index.php) */
.how-steps{list-style:none;margin:0;padding:0;display:grid;gap:1.3rem}
.how-steps li{display:flex;gap:1rem;align-items:flex-start}
.how-steps .num{flex-shrink:0;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--brand);
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem}
.how-steps h3{font-size:.98rem;margin:0 0 .25rem}
.how-steps p{margin:0;color:var(--muted);font-size:.88rem}

.faq-item{border-bottom:1px solid var(--line);padding:.9rem 0}
.faq-item:last-child{border-bottom:none}
.faq-item summary{cursor:pointer;font-weight:700;font-size:.95rem;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:1.3rem;color:var(--brand);flex-shrink:0;line-height:1}
.faq-item[open] summary::after{content:'\2212'}
.faq-item p{margin:.6rem 0 0;color:var(--muted);font-size:.88rem}

.btn{display:inline-block;border:1px solid transparent;border-radius:9px;
  padding:.68rem 1.35rem;font:inherit;font-weight:700;cursor:pointer;
  background:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(20,25,50,.06),0 6px 14px -6px rgba(52,87,232,.55);
  transition:background .15s ease,box-shadow .15s ease,transform .15s ease}
.btn:hover{background:var(--brand-dark);text-decoration:none;transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(20,25,50,.08),0 10px 20px -6px rgba(52,87,232,.6)}
.btn:active{transform:translateY(0)}
.btn.secondary{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:var(--shadow-sm)}
.btn.secondary:hover{background:#f7f9fd;border-color:#cfd6e8;box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.btn.block{display:block;width:100%;text-align:center}
.btn[disabled],.btn.disabled{opacity:.5;cursor:not-allowed;pointer-events:none;transform:none;box-shadow:none}

.pill{display:inline-block;padding:.22rem .65rem;border-radius:999px;font-size:.78rem;
  font-weight:700;border:1px solid transparent;letter-spacing:.01em}
.pill.green{background:var(--ok-bg);color:var(--ok);border-color:#bfe6d0}
.pill.blue{background:var(--info-bg);color:var(--info);border-color:#c7d1fb}
.pill.grey{background:#eef0f6;color:var(--muted);border-color:var(--line)}

.alert{border-radius:var(--radius-sm);padding:.8rem 1.05rem;margin-bottom:1.25rem;font-size:.94rem;
  border:1px solid transparent;box-shadow:var(--shadow-sm)}
.alert.success{background:var(--ok-bg);color:var(--ok);border-color:#bfe6d0}
.alert.error{background:var(--err-bg);color:var(--err);border-color:#f3c8c5}
.alert.warning{background:var(--warn-bg);color:var(--warn);border-color:#f0dcae}
.alert.info{background:var(--info-bg);color:var(--info);border-color:#c7d1fb}

.field{margin-bottom:1.15rem}
label{display:block;font-weight:700;font-size:.9rem;margin-bottom:.4rem;color:#2a3350}
.hint{color:var(--muted);font-size:.83rem;margin-top:.4rem}
input[type=text],input[type=tel],select{
  width:100%;padding:.68rem .8rem;border:1.5px solid #d8dcea;border-radius:var(--radius-sm);
  background:#fff;font:inherit;color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease}
input[type=text]:hover,input[type=tel]:hover,select:hover{border-color:#c2c9de}
input:focus,select:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(52,87,232,.13)}
.row{display:flex;gap:1rem;flex-wrap:wrap}
.row > .field{flex:1;min-width:200px}
.check{display:flex;align-items:center;gap:.55rem;font-weight:500;margin-bottom:.5rem}
.check input{width:auto}

.mode-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.mode-card{border:2px solid var(--line);border-radius:var(--radius);padding:1.15rem;
  cursor:pointer;position:relative;background:#fff;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.mode-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.mode-card:has(input:checked){border-color:var(--brand);background:var(--brand-light);box-shadow:0 0 0 4px rgba(52,87,232,.1)}
.mode-card input{position:absolute;top:1rem;right:1rem;width:auto;accent-color:var(--brand)}
.mode-card h4{margin:0 0 .3rem;font-size:1rem;font-weight:700}
.mode-card p{margin:0;color:var(--muted);font-size:.85rem}
.mode-card.locked{opacity:.55;cursor:not-allowed}
.mode-card.locked:hover{transform:none;box-shadow:none}

.section-list{list-style:none;padding:0;margin:.5rem 0 0;font-size:.88rem;color:var(--muted)}
.section-list li{padding:.3rem 0;border-bottom:1px dashed var(--line)}

.pub-footer{text-align:center;color:var(--muted);font-size:.82rem;padding:2.5rem 1rem 2rem}

/* Stat tiles - score/rank/cutoff numbers (result.php, submit.php, omr-upload.php). */
.grid{display:grid;gap:.9rem}
.grid.cols-4{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.stat{background:linear-gradient(180deg,#fff,#fbfbfe);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:.95rem 1.1rem;box-shadow:var(--shadow-sm)}
.stat .label{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.stat .value{font-size:1.85rem;font-weight:800;margin-top:.2rem;letter-spacing:-.01em}

/* Tables - sections/rank breakdown. */
.table-wrap{overflow-x:auto;border-radius:var(--radius-sm)}
table{width:100%;border-collapse:collapse;font-size:.92rem}
table thead th{font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  background:#f6f7fc;font-weight:700}
table td,table th{border-bottom:1px solid var(--line)}
table tbody tr:last-child td{border-bottom:none}
table tbody tr:hover{background:#fafbff}

/* Answer-tap grid - shared by submit.php (manual) and omr-upload.php (OMR confirm/edit). */
.qrow{display:flex;align-items:center;gap:.75rem;padding:.55rem .2rem;border-bottom:1px solid var(--line)}
.qrow:last-child{border-bottom:none}
.qrow.detected-multi{background:var(--warn-bg);border-radius:8px}
.qno{width:2.4em;flex-shrink:0;font-weight:700;color:var(--muted);font-size:.9rem}
.opts{display:flex;flex-wrap:wrap;gap:.4rem;flex:1}
.opt{border:1.5px solid #d8dcea;border-radius:8px;padding:.42rem .72rem;font-size:.85rem;
  font-weight:700;cursor:pointer;user-select:none;background:#fff;min-width:2.4em;text-align:center;
  transition:border-color .12s ease,background .12s ease,color .12s ease,transform .12s ease}
.opt:hover{border-color:var(--brand);transform:translateY(-1px)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt.picked{border-color:var(--brand);background:var(--brand);color:#fff;box-shadow:0 4px 10px -4px rgba(52,87,232,.55)}
.opt.clear{border-style:dashed;color:var(--muted);font-weight:400}

/* Blog listing + single post (blog.php, blog-post.php) */
.blog-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.blog-card{display:block;color:inherit}
.blog-card:hover{text-decoration:none}
.blog-card .thumb{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--brand-light);display:block}
.blog-card .thumb.placeholder{display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:.85rem;font-weight:700}
.blog-card h3{font-size:1.05rem;margin:.7rem 0 .3rem;color:var(--ink)}
.blog-card:hover h3{color:var(--brand)}
.blog-card p{color:var(--muted);font-size:.88rem;margin:0}
.blog-card .date{color:var(--muted);font-size:.78rem;margin-top:.4rem}

.blog-post-thumb{width:100%;max-height:380px;object-fit:cover;border-radius:var(--radius);
  border:1px solid var(--line);margin-bottom:1.25rem}
.blog-post-meta{color:var(--muted);font-size:.85rem;margin:-.3rem 0 1.25rem}
.blog-prose{font-size:1.02rem;line-height:1.75}
.blog-prose h2{font-size:1.3rem;margin:1.5rem 0 .6rem}
.blog-prose h3{font-size:1.1rem;margin:1.25rem 0 .5rem}
.blog-prose p{margin:0 0 1rem}
.blog-prose ul,.blog-prose ol{margin:0 0 1rem;padding-left:1.4rem}
.blog-prose li{margin-bottom:.35rem}
.blog-prose a{text-decoration:underline}
.blog-prose img{max-width:100%;border-radius:var(--radius-sm);margin:1rem 0}
.blog-prose blockquote{margin:1rem 0;padding:.5rem 1rem;border-left:3px solid var(--brand);color:var(--muted)}
.blog-prose code{background:var(--brand-light);padding:.1rem .35rem;border-radius:4px;font-size:.9em}
.blog-prose pre{background:#161c2d;color:#e7ebfa;padding:1rem;border-radius:var(--radius-sm);overflow-x:auto}

/* OMR-upload confirm/edit list only (omr-upload.php's #answerGridCard) -
   shows ~10 rows at a time with its own scrollbar, so reviewing 200 answers
   never needs scrolling the whole page; the Confirm button right below it
   always stays one scroll away instead of below 200 rows. */
.answer-grid-scroll{max-height:32rem;overflow-y:auto;-webkit-overflow-scrolling:touch}

/* OMR upload screen */
.omr-drop{border:2px dashed #ccd2e6;border-radius:var(--radius);padding:2.25rem 1rem;
  text-align:center;background:#fbfbfe;transition:border-color .15s ease,background .15s ease}
.omr-drop:hover{border-color:var(--brand);background:var(--brand-light)}
.omr-drop input[type=file]{margin:0 auto}
.omr-scan-status{font-size:.88rem;padding:.65rem .85rem;border-radius:var(--radius-sm);margin-top:1rem}
.omr-scan-status.busy{background:var(--info-bg);color:var(--info)}
.omr-scan-status.good{background:var(--ok-bg);color:var(--ok)}
.omr-scan-status.bad{background:var(--err-bg);color:var(--err)}
.omr-preview{max-width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);margin-top:1rem;display:none}