/* ============================================================
SmartMarking โ shared component theme
A small, framework-free stylesheet matching the CS Revise
family (indigo brand, Inter + Fraunces, flat / no-gradient).
No Bootstrap, no build step, no jQuery. ~ one file, ~7KB.
Load order on a page:
Class names mirror index.html (the landing) so every
page looks identical to the approved landing.
Copyright 2026 Mr Rashid - CS Revise.
============================================================ */
/* ---- 1. Design tokens ------------------------------------ */
:root{
--sm-brand:#4f46e5; /* indigo โ the CS Revise family colour */
--sm-brand-dark:#4338ca;
--sm-brand-soft:#eef2ff;
--sm-accent:#f59e0b; /* amber โ CTA only */
--sm-accent-dark:#d97706;
--sm-ink:#1c2333; /* primary text */
--sm-muted:#64748b; /* secondary text */
--sm-bg:#fbfaf8; /* flat warm off-white page */
--sm-card:#ffffff;
--sm-border:#e9e7e2;
--sm-line:#ece9e4;
--sm-dark:#15182a; /* dark contrast band / sidebar */
--sm-success:#10b981;
--sm-warning:#f59e0b;
--sm-danger:#ef4444;
--sm-radius:.8rem;
--sm-radius-sm:.55rem;
}
/* ---- 2. Reset + base ------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
body.sm{font-family:Inter,system-ui,sans-serif;color:var(--sm-ink);line-height:1.6;background:var(--sm-bg);-webkit-font-smoothing:antialiased}
.sm a{text-decoration:none;color:inherit}
.sm-wrap{max-width:1180px;margin:0 auto;padding:0 1.5rem}
.sm-serif{font-family:'Fraunces',Georgia,serif;letter-spacing:-.015em;font-weight:700}
.sm-bg-soft{background:#f5f3ee}
.sm-muted{color:var(--sm-muted)}
/* ---- 3. Buttons ------------------------------------------ */
.sm-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
border:none;border-radius:var(--sm-radius-sm);padding:.85rem 1.5rem;
font-family:inherit;font-weight:700;font-size:.95rem;cursor:pointer;min-height:50px;
transition:transform .15s,background .15s,border-color .15s,color .15s;text-align:center}
.sm-btn svg{width:18px;height:18px}
.sm-btn-accent{background:var(--sm-accent);color:#3a2a06}
.sm-btn-accent:hover{background:var(--sm-accent-dark);color:#fff;transform:translateY(-1px)}
.sm-btn-brand{background:var(--sm-brand);color:#fff}
.sm-btn-brand:hover{background:var(--sm-brand-dark)}
.sm-btn-line{background:transparent;color:var(--sm-ink);border:1.5px solid var(--sm-ink)}
.sm-btn-line:hover{background:var(--sm-ink);color:#fff}
.sm-btn-ghost{background:var(--sm-card);color:var(--sm-brand);border:1px solid var(--sm-border)}
.sm-btn-ghost:hover{border-color:var(--sm-brand)}
.sm-btn-sm{min-height:40px;padding:.5rem 1rem;font-size:.85rem}
.sm-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
/* ---- 4. Icons (Lucide-style inline SVG) ------------------ */
svg.sm-i{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* ---- 5. Section headings --------------------------------- */
.sm-eyebrow{color:var(--sm-brand);font-weight:700;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase}
.sm-h2{font-family:'Fraunces',Georgia,serif;letter-spacing:-.015em;font-weight:700;font-size:2rem;color:var(--sm-ink);margin:.5rem 0 .6rem;max-width:640px}
.sm-lead{color:var(--sm-muted);max-width:560px;margin-bottom:2.2rem}
.sm-section{padding:4rem 0}
/* ---- 6. Cards -------------------------------------------- */
.sm-card{background:var(--sm-card);border:1px solid var(--sm-border);border-radius:var(--sm-radius);
box-shadow:0 1px 2px rgba(20,24,42,.04)}
.sm-card-pad{padding:1.5rem 1.4rem}
.sm-card-h{padding:.9rem 1.1rem;border-bottom:1px solid var(--sm-line);display:flex;justify-content:space-between;align-items:center}
.sm-card-h h3{font-size:1.05rem}
.sm-card-h a{color:var(--sm-brand);font-weight:600;font-size:.82rem}
.sm-card-b{padding:1.1rem}
/* feature card */
.sm-fcard{background:var(--sm-card);border:1px solid var(--sm-border);border-radius:var(--sm-radius);padding:1.6rem 1.4rem}
.sm-fcard .sm-fic{width:42px;height:42px;border-radius:10px;background:var(--sm-brand-soft);color:var(--sm-brand);
display:flex;align-items:center;justify-content:center;margin-bottom:.9rem}
.sm-fcard h3{font-size:1.08rem;margin-bottom:.4rem}
.sm-fcard p{font-size:.9rem;color:var(--sm-muted)}
/* ---- 7. Stat tiles --------------------------------------- */
.sm-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
@media(min-width:760px){.sm-stats{grid-template-columns:repeat(4,1fr)}}
.sm-stat{background:var(--sm-card);border:1px solid var(--sm-border);border-radius:var(--sm-radius);
padding:1.1rem;border-left:4px solid #cbd5e1}
.sm-stat.amber{border-left-color:var(--sm-warning)}
.sm-stat.indigo{border-left-color:var(--sm-brand)}
.sm-stat.green{border-left-color:var(--sm-success)}
.sm-stat.cyan{border-left-color:#0ea5e9}
.sm-stat .v{font-family:'Fraunces',serif;font-size:1.8rem;font-weight:700;line-height:1}
.sm-stat .l{color:var(--sm-muted);font-size:.8rem;margin-top:.3rem;font-weight:600}
/* ---- 8. Chips, tags, badges, pills ----------------------- */
.sm-chip{background:var(--sm-card);border:1px solid var(--sm-border);border-radius:2rem;
padding:.55rem 1.15rem;font-weight:600;font-size:.92rem;display:inline-block}
.sm-chip.soon{color:var(--sm-muted)}
.sm-chip.soon::after{content:" ยท soon";color:#b8b2a6;font-weight:500}
.sm-tag{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--sm-muted);background:#f3f1ec;border-radius:2rem;padding:.22rem .6rem}
.sm-tag.brand{background:var(--sm-brand-soft);color:var(--sm-brand-dark)}
.sm-badge{display:inline-block;font-size:.72rem;font-weight:700;border-radius:.4rem;padding:.18rem .5rem}
.sm-badge.grey{background:#f3f1ec;color:#5b5444}
.sm-badge.amber{background:#fef3c7;color:#92400e}
.sm-badge.green{background:#dcfce7;color:#166534}
.sm-badge.red{background:#fee2e2;color:#991b1b}
/* confidence pills */
.sm-pill{font-size:.66rem;font-weight:700;padding:.12rem .5rem;border-radius:2rem}
.sm-pill.low{background:#fee2e2;color:#991b1b}
.sm-pill.high{background:#dcfce7;color:#166534}
.sm-pill.mid{background:#fef3c7;color:#92400e}
/* ---- 9. Marking stepper mock ----------------------------- */
.sm-mock{display:flex;flex-direction:column;gap:0}
.sm-mcard{background:var(--sm-card);border:1px solid var(--sm-border);border-radius:.9rem;
padding:1.1rem 1.15rem;box-shadow:0 1px 2px rgba(20,24,42,.04)}
.sm-mcard.live{border-color:#c7d2fe;box-shadow:0 8px 30px -14px rgba(79,70,229,.35)}
.sm-mhead{display:flex;align-items:center;gap:.7rem}
.sm-mava{width:38px;height:38px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}
.sm-mava.b{background:var(--sm-brand);color:#fff}
.sm-mava.a{background:#fef3c7;color:#92400e}
.sm-mava.g{background:#dcfce7;color:#166534}
.sm-mhead b{display:block;font-size:.98rem}
.sm-mhead span{font-size:.8rem;color:var(--sm-muted)}
.sm-connlabel{text-align:center;font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--sm-muted);padding:.45rem 0}
.sm-qrow{display:flex;align-items:center;gap:.55rem;font-size:.85rem;padding:.5rem .6rem;
border:1px solid var(--sm-border);border-radius:var(--sm-radius-sm);margin-top:.55rem}
.sm-qrow.flag{border-color:#fcd34d;background:#fffbeb}
.sm-qrow .qn{font-weight:700}
.sm-qrow .sm-pill{margin-left:auto}
.sm-qrow svg{width:15px;height:15px;stroke:#d97706}
.sm-mfoot{display:flex;align-items:center;justify-content:space-between;margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--sm-line)}
.sm-mfoot .tot{font-family:'Fraunces',serif;font-weight:700;font-size:1.25rem}
.sm-mfoot .note{font-size:.74rem;color:var(--sm-muted)}
.sm-chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.7rem}
.sm-chips .c{font-size:.72rem;font-weight:600;background:#f3f1ec;border-radius:.4rem;padding:.18rem .5rem;color:#5b5444}
/* ---- 10. Trust badges ------------------------------------ */
.sm-trust{display:flex;gap:1.4rem;flex-wrap:wrap;font-size:.86rem;color:var(--sm-muted);font-weight:500}
.sm-trust span{display:inline-flex;align-items:center;gap:.45rem}
.sm-trust svg{width:17px;height:17px;stroke:var(--sm-brand)}
/* ---- 11. Forms ------------------------------------------- */
.sm-field{margin-bottom:1.1rem}
.sm-field label{display:block;font-weight:600;font-size:.88rem;margin-bottom:.4rem}
.sm-input,.sm-select,.sm-textarea{width:100%;font-family:inherit;font-size:.95rem;color:var(--sm-ink);
background:var(--sm-card);border:1px solid var(--sm-border);border-radius:var(--sm-radius-sm);padding:.7rem .85rem;min-height:46px}
.sm-textarea{min-height:110px;resize:vertical;line-height:1.5}
.sm-input:focus,.sm-select:focus,.sm-textarea:focus{outline:none;border-color:var(--sm-brand);box-shadow:0 0 0 3px var(--sm-brand-soft)}
.sm-hint{font-size:.78rem;color:var(--sm-muted);margin-top:.35rem}
/* upload drop box */
.sm-upload{border:1.5px dashed #cdd4e0;border-radius:var(--sm-radius);padding:1.6rem 1rem;text-align:center;
background:#fafbff;cursor:pointer;transition:border-color .15s,background .15s}
.sm-upload:hover{border-color:var(--sm-brand);background:var(--sm-brand-soft)}
.sm-upload svg{width:30px;height:30px;stroke:var(--sm-brand);margin-bottom:.5rem}
.sm-upload b{display:block;font-size:.95rem}
.sm-upload span{font-size:.82rem;color:var(--sm-muted)}
/* ---- 12. Tables ------------------------------------------ */
.sm-table{width:100%;border-collapse:collapse;font-size:.9rem}
.sm-table th{text-align:left;font-weight:700;font-size:.78rem;letter-spacing:.03em;text-transform:uppercase;
color:var(--sm-muted);padding:.7rem .85rem;border-bottom:2px solid var(--sm-line)}
.sm-table td{padding:.75rem .85rem;border-bottom:1px solid var(--sm-line)}
.sm-table tr:hover td{background:#faf9f6}
@media(max-width:600px){.sm-table{display:block;overflow-x:auto;white-space:nowrap}}
/* ---- 13. Modal ------------------------------------------- */
.sm-modal{position:fixed;inset:0;background:rgba(15,18,34,.5);display:none;align-items:flex-start;justify-content:center;
padding:1.5rem;z-index:200;overflow-y:auto}
.sm-modal.open{display:flex}
.sm-modal-card{background:var(--sm-card);border-radius:var(--sm-radius);max-width:560px;width:100%;margin-top:3rem;overflow:hidden;box-shadow:0 30px 60px -20px rgba(15,23,42,.5)}
.sm-modal-h{padding:1.1rem 1.3rem;border-bottom:1px solid var(--sm-line);display:flex;justify-content:space-between;align-items:center}
.sm-modal-h h3{font-size:1.15rem}
.sm-modal-close{background:none;border:none;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--sm-muted)}
.sm-modal-b{padding:1.3rem}
.sm-modal-f{padding:1rem 1.3rem;border-top:1px solid var(--sm-line);display:flex;gap:.7rem;justify-content:flex-end}
/* ---- 14. App shell (sidebar + main) ---------------------- */
.sm-app{display:flex;min-height:100vh}
.sm-side{width:230px;background:var(--sm-dark);color:#c7d2fe;flex-shrink:0;padding:1.1rem .8rem;
position:sticky;top:0;height:100vh;display:none}
@media(min-width:900px){.sm-side{display:block}}
.sm-side .logo{font-weight:800;font-size:1.05rem;color:#fff;display:flex;align-items:center;gap:.5rem;padding:.3rem .5rem 1.2rem}
.sm-side .logo .mark{background:var(--sm-brand);width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center}
.sm-side a.nav{display:flex;align-items:center;gap:.65rem;padding:.65rem .7rem;border-radius:var(--sm-radius-sm);
font-weight:600;font-size:.9rem;color:#aeb6d4;margin-bottom:.2rem}
.sm-side a.nav svg{width:18px;height:18px}
.sm-side a.nav:hover{background:rgba(255,255,255,.08);color:#fff}
.sm-side a.nav.active{background:rgba(255,255,255,.14);color:#fff}
.sm-side .credits{margin-top:1.5rem;background:rgba(255,255,255,.08);border-radius:.6rem;padding:.8rem;font-size:.82rem}
.sm-side .credits b{color:#fff;font-size:1.2rem;display:block;font-family:'Fraunces',serif}
.sm-main{flex:1;min-width:0}
.sm-topbar{background:var(--sm-card);border-bottom:1px solid var(--sm-border);padding:.8rem 1.25rem;
display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10}
.sm-topbar .mlogo{font-weight:800;display:flex;align-items:center;gap:.45rem}
.sm-topbar .mlogo .mark{background:var(--sm-brand);color:#fff;width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center}
@media(min-width:900px){.sm-topbar .mlogo{display:none}}
.sm-avatar{width:38px;height:38px;border-radius:50%;background:var(--sm-brand);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.sm-content{padding:1.5rem 1.25rem 3rem;max-width:980px}
/* ---- 15. Public nav -------------------------------------- */
.sm-nav{background:var(--sm-bg);position:sticky;top:0;z-index:40;border-bottom:1px solid var(--sm-line)}
.sm-nav .sm-wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.sm-logo{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.15rem}
.sm-logo .mark{width:34px;height:34px;border-radius:9px;background:var(--sm-brand);color:#fff;display:flex;align-items:center;justify-content:center}
.sm-logo .mark svg{width:19px;height:19px}
.sm-logo small{display:block;font-weight:600;font-size:.62rem;color:var(--sm-muted);letter-spacing:.06em;text-transform:uppercase;margin-top:-2px}
.sm-navlinks{display:none;gap:1.6rem;font-weight:600;font-size:.92rem;color:var(--sm-muted)}
.sm-navlinks a:hover{color:var(--sm-ink)}
.sm-navactions{display:flex;align-items:center;gap:1rem}
.sm-navactions .signin{display:none;font-weight:600;font-size:.92rem}
@media(min-width:900px){.sm-navlinks{display:flex}.sm-navactions .signin{display:inline}}
/* ---- 16. Grids: steps / features / subjects -------------- */
.sm-steps{display:grid;grid-template-columns:1fr;gap:1.1rem}
@media(min-width:760px){.sm-steps{grid-template-columns:repeat(4,1fr)}}
.sm-step{background:var(--sm-card);border:1px solid var(--sm-border);border-radius:var(--sm-radius);padding:1.5rem 1.3rem}
.sm-step .n{width:38px;height:38px;border-radius:9px;background:var(--sm-brand-soft);color:var(--sm-brand-dark);
font-family:'Fraunces',serif;font-weight:700;font-size:1.05rem;display:flex;align-items:center;justify-content:center;margin-bottom:.9rem}
.sm-step h3{font-size:1.05rem;margin-bottom:.35rem}
.sm-step p{font-size:.9rem;color:var(--sm-muted)}
.sm-feat{display:grid;grid-template-columns:1fr;gap:1.1rem}
@media(min-width:760px){.sm-feat{grid-template-columns:repeat(3,1fr)}}
.sm-subjects{display:flex;flex-wrap:wrap;gap:.6rem}
/* ---- 17. Dark contrast band + CTA + footer --------------- */
.sm-protect{background:var(--sm-dark);color:#e2e8f0}
.sm-protect .sm-eyebrow{color:#a5b4fc}
.sm-protect .sm-h2{color:#fff}
.sm-protect .sm-lead{color:#94a3b8}
.sm-protect .sm-fcard{background:#1f2338;border-color:#2c3150}
.sm-protect .sm-fcard h3{color:#fff}
.sm-protect .sm-fcard p{color:#a8b1c7}
.sm-protect .sm-fcard .sm-fic{background:#2a2f4d;color:#a5b4fc}
.sm-cta-band{background:var(--sm-brand);color:#fff;border-radius:1.1rem;padding:3.2rem 1.5rem;text-align:center;margin:1.5rem 0}
.sm-cta-band h2{font-family:'Fraunces',serif;font-size:2rem;margin-bottom:.6rem;color:#fff}
.sm-cta-band p{opacity:.9;margin-bottom:1.6rem;max-width:460px;margin-inline:auto}
.sm-footer{background:var(--sm-dark);color:#94a3b8;padding:2.5rem 0;font-size:.85rem}
.sm-footer .sm-wrap{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}
.sm-footer a{color:#cbd5e1}
.sm-footer a:hover{color:#fff}
/* ---- 18. Utilities --------------------------------------- */
.sm-demo-pill{position:fixed;top:10px;right:10px;background:var(--sm-ink);color:#fff;font-size:.68rem;
font-weight:700;padding:.28rem .7rem;border-radius:2rem;z-index:99;letter-spacing:.03em}
.sm-toast{position:fixed;bottom:1.25rem;left:50%;transform:translateX(-50%);background:var(--sm-ink);color:#fff;
padding:.8rem 1.3rem;border-radius:var(--sm-radius-sm);font-weight:600;font-size:.9rem;z-index:300;
box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}
.sm-row{display:flex;align-items:center;gap:.75rem}
.sm-spread{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.sm-mt{margin-top:1rem}.sm-mb{margin-bottom:1rem}