/* EireneEduCloud — main stylesheet | Eirene Technologies Limited */
:root{
  --primary:#0D5C6B; --primary-d:#0A4A57; --secondary:#D4A017; --secondary-d:#b8890f;
  --dark:#2C3E50; --light:#F8FAFB; --white:#fff; --success:#27AE60; --error:#E74C3C;
  --warning:#F39C12; --muted:#7F8C8D; --line:#e5eaed; --ink:#1f2d3d;
  --english:#3498DB;--kiswahili:#1ABC9C;--mathematics:#E74C3C;--science:#9B59B6;
  --agriculture:#27AE60;--creative:#E67E22;--cre:#2980B9;--ire:#16A085;--hre:#8E44AD;--social:#D35400;
  --r:14px; --shadow:0 6px 24px rgba(13,92,107,.10); --shadow-sm:0 2px 8px rgba(13,92,107,.08);
  --font:'Segoe UI',Inter,Roboto,Arial,Helvetica,sans-serif; --serif:Georgia,'Times New Roman',serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--light);line-height:1.6}
a{color:var(--primary);text-decoration:none}
img{max-width:100%}
.container{max-width:1180px;margin:0 auto;padding:0 20px}
.btn{display:inline-block;border:0;border-radius:10px;padding:.7rem 1.4rem;font-size:1rem;font-weight:600;cursor:pointer;transition:.15s;font-family:inherit}
.btn-gold{background:var(--secondary);color:#3a2c02}
.btn-gold:hover{background:var(--secondary-d)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-d)}
.btn-ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.site-header .container{display:flex;align-items:center;gap:18px;height:66px}
.brand{display:flex;align-items:center;gap:10px}
.brand svg{height:34px;width:auto}
.brand .sub{font-size:.72rem;color:var(--muted);font-weight:600}
.nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav a{padding:.5rem .8rem;border-radius:8px;color:var(--dark);font-weight:600;font-size:.95rem}
.nav a:hover,.nav a.active{background:#eef5f6;color:var(--primary)}
.partner-logos{display:flex;align-items:center;gap:12px;margin-left:8px}
.partner-logos img{height:34px;width:auto;opacity:.95}
.hamburger{display:none;background:none;border:0;font-size:1.5rem;cursor:pointer;color:var(--primary)}

/* Hero */
.hero{background:linear-gradient(135deg,var(--primary),var(--primary-d));color:#fff;padding:64px 0 72px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;background:rgba(212,160,23,.18)}
.hero h1{font-size:2.8rem;margin:0 0 .6rem;line-height:1.15}
.hero p.lead{font-size:1.25rem;color:#d6ecef;max-width:680px;margin:0 0 1.6rem}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .stats{margin-top:32px;display:flex;gap:34px;flex-wrap:wrap}
.hero .stats .s b{font-size:1.7rem;color:var(--secondary);display:block}
.hero .stats .s span{font-size:.9rem;color:#cfe6ea}

/* Sections */
.section{padding:56px 0}
.section h2{font-size:1.9rem;margin:0 0 6px;color:var(--dark)}
.section .muted{color:var(--muted);margin:0 0 30px}

/* Subject grid */
.subjects{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:20px}
.subject-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow-sm);transition:.18s;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.subject-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}
.subject-card .ic{width:52px;height:52px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;margin-bottom:14px}
.subject-card h3{margin:0 0 4px;font-size:1.12rem;color:var(--dark)}
.subject-card .meta{font-size:.85rem;color:var(--muted);margin-bottom:14px}
.subject-card .lot{font-size:.72rem;font-weight:700;color:var(--secondary-d);text-transform:uppercase;letter-spacing:.5px}
.progress{height:8px;background:#eef2f3;border-radius:6px;overflow:hidden;margin-top:auto}
.progress>span{display:block;height:100%;background:var(--success);width:0}
.subject-card .start{margin-top:12px;font-weight:700;color:var(--primary);font-size:.92rem}

/* Features strip */
.features{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.features .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.feature{display:flex;gap:14px;align-items:flex-start}
.feature .fi{width:46px;height:46px;flex:0 0 46px;border-radius:12px;background:#eef5f6;color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.feature h4{margin:0 0 3px;font-size:1rem}
.feature p{margin:0;color:var(--muted);font-size:.9rem}

/* Footer */
.site-footer{background:var(--dark);color:#cdd6df;padding:40px 0 28px;font-size:.92rem}
.site-footer a{color:#9fd0d8}
.site-footer .top{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:18px;margin-bottom:18px}
.site-footer .logos{display:flex;gap:16px;align-items:center}
.site-footer .logos img{height:36px;background:#fff;border-radius:6px;padding:3px}

/* Subject viewer */
.viewer{display:grid;grid-template-columns:300px 1fr;min-height:calc(100vh - 66px)}
.v-side{background:#fff;border-right:1px solid var(--line);padding:20px;position:sticky;top:66px;height:calc(100vh - 66px);overflow-y:auto}
.v-side .stitle{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.v-side .stitle .ic{width:40px;height:40px;border-radius:10px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.v-progress{font-size:.85rem;color:var(--muted);margin-bottom:14px}
.v-search{width:100%;padding:.55rem .7rem;border:1px solid var(--line);border-radius:9px;margin-bottom:14px;font-family:inherit}
.unit{margin-bottom:6px}
.unit>.uh{font-weight:700;padding:.55rem .5rem;cursor:pointer;border-radius:8px;display:flex;justify-content:space-between;align-items:center;color:var(--dark)}
.unit>.uh:hover{background:#f2f7f8}
.unit .lessons{display:none;padding-left:8px}
.unit.open .lessons{display:block}
.lesson-link{display:flex;gap:8px;align-items:center;padding:.45rem .5rem;border-radius:7px;cursor:pointer;color:var(--ink);font-size:.92rem}
.lesson-link:hover{background:#f2f7f8}
.lesson-link.active{background:#eef5f6;color:var(--primary);font-weight:600}
.lesson-link .dot{width:8px;height:8px;border-radius:50%;background:#cfd8dc;flex:0 0 8px}
.lesson-link.done .dot{background:var(--success)}
.v-main{padding:28px 36px;max-width:900px}
.breadcrumb{font-size:.85rem;color:var(--muted);margin-bottom:14px}
.breadcrumb a{color:var(--muted)}
.lesson-head h1{margin:.2rem 0;font-size:1.7rem;color:var(--dark)}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 18px}
.badge{font-size:.72rem;font-weight:700;padding:.25rem .6rem;border-radius:20px;background:#eef5f6;color:var(--primary)}
.badge.time{background:#fff7e6;color:var(--secondary-d)}
.video-wrap{position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden;background:#000;margin-bottom:8px}
.video-wrap iframe,.video-wrap video{position:absolute;inset:0;width:100%;height:100%;border:0}
.transcript{border:1px solid var(--line);border-radius:12px;margin:14px 0;overflow:hidden}
.transcript .th{background:#f7fafb;padding:.7rem 1rem;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.transcript .th input{flex:1;min-width:140px;padding:.4rem .6rem;border:1px solid var(--line);border-radius:8px}
.transcript .tb{padding:1rem;max-height:240px;overflow-y:auto;font-size:.93rem}
.tline{display:flex;gap:10px;padding:.2rem 0}
.tline .ts{color:var(--secondary-d);font-weight:700;flex:0 0 44px}
.tline mark{background:#fff2b8}
.dive{background:#f7fafb;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:14px 0}
.dive h4{margin:0 0 10px;font-size:.98rem}
.dive .dive-btn{margin:0 8px 8px 0;background:#fff;border:1.5px solid var(--primary);color:var(--primary);border-radius:20px;padding:.4rem .9rem;font-size:.86rem;cursor:pointer;font-family:inherit}
.dive .dive-btn:hover{background:var(--primary);color:#fff}
.dive .dive-out{margin-top:8px;font-size:.92rem;color:var(--dark);display:none}
.reading{font-family:var(--serif);font-size:1.05rem;line-height:1.8;margin:18px 0}
.reading h3{font-family:var(--font)}
.callout{background:#eef5f6;border-radius:10px;padding:14px 16px;margin:14px 0}
.interactive{background:#fff;border:1px dashed var(--primary);border-radius:12px;padding:18px;margin:16px 0}
.lesson-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:28px 0 10px;flex-wrap:wrap}

/* Quiz */
.quiz{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;margin:18px 0;box-shadow:var(--shadow-sm)}
.quiz .qh{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.quiz .qbar{height:7px;background:#eef2f3;border-radius:6px;overflow:hidden;margin-bottom:16px}
.quiz .qbar>span{display:block;height:100%;background:var(--secondary);transition:.3s}
.quiz .qtext{font-size:1.1rem;font-weight:600;margin-bottom:14px}
.quiz .opt{display:block;width:100%;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:.8rem 1rem;margin-bottom:10px;cursor:pointer;font-size:1rem;font-family:inherit;transition:.12s}
.quiz .opt:hover{border-color:var(--primary)}
.quiz .opt.correct{border-color:var(--success);background:#eafaf0}
.quiz .opt.wrong{border-color:var(--error);background:#fdeceb}
.quiz .opt.disabled{pointer-events:none;opacity:.85}
.quiz .explain{background:#f7fafb;border-radius:10px;padding:.8rem 1rem;margin-top:8px;font-size:.92rem;display:none}
.quiz .qresult{text-align:center;padding:10px}
.quiz .qresult .score{font-size:2.6rem;font-weight:800;color:var(--primary)}
.quiz .review .ri{padding:.5rem 0;border-bottom:1px solid var(--line);font-size:.92rem}

/* Help modal */
.help-btn{position:fixed;right:20px;bottom:20px;z-index:60;background:var(--secondary);color:#3a2c02;border:0;border-radius:30px;padding:.7rem 1.1rem;font-weight:700;cursor:pointer;box-shadow:var(--shadow)}
.modal{position:fixed;inset:0;z-index:70;background:rgba(20,30,40,.55);display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal .box{background:#fff;border-radius:16px;max-width:640px;width:100%;max-height:86vh;overflow-y:auto;padding:24px}
.modal h2{margin:0 0 14px;color:var(--primary)}
.modal section{margin-bottom:14px}
.modal h3{margin:0 0 4px;font-size:1.02rem}
.modal p,.modal li{color:var(--dark)}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--dark);color:#fff;padding:.7rem 1.2rem;border-radius:30px;font-size:.92rem;z-index:80;opacity:0;transition:.25s;pointer-events:none}
.toast.show{opacity:1}

/* ============================================================
   Component styles for data-driven markup (app.js / subject.js)
   ============================================================ */
/* accent palette mapping */
.accent-english{--accent:var(--english)} .accent-kiswahili{--accent:var(--kiswahili)}
.accent-mathematics{--accent:var(--mathematics)} .accent-science{--accent:var(--science)}
.accent-agriculture{--accent:var(--agriculture)} .accent-creative{--accent:var(--creative)}
.accent-cre{--accent:var(--cre)} .accent-ire{--accent:var(--ire)}
.accent-hre{--accent:var(--hre)} .accent-social{--accent:var(--social)}
:root{--accent:var(--primary)}

/* Homepage subject cards (inner) */
.subject-card{border-top:4px solid var(--accent)}
.sc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.sc-icon{width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:color-mix(in srgb,var(--accent) 16%,#fff)}
.sc-lot{font-size:.7rem;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:.6px;background:color-mix(in srgb,var(--accent) 12%,#fff);padding:.2rem .55rem;border-radius:20px}
.sc-blurb{color:var(--muted);font-size:.9rem;flex:1;margin:.2rem 0 14px}
.sc-meta{display:flex;gap:8px;font-size:.82rem;color:var(--muted);margin-bottom:10px}
.sc-bar{height:8px;background:#eef2f3;border-radius:6px;overflow:hidden}
.sc-bar i{display:block;height:100%;background:var(--accent);width:0;transition:.3s}
.sc-prog{font-size:.8rem;color:var(--muted);margin-top:6px;font-weight:600}

/* Subject banner */
.subject-banner{background:linear-gradient(135deg,var(--primary),var(--primary-d));color:#fff;padding:26px 0 22px}
.subject-banner .back{color:#bfe2e8;font-weight:600;font-size:.9rem}
.subject-banner h1{margin:.4rem 0 .2rem;font-size:2rem}
.subject-banner .muted{color:#cfe6ea;margin:0}
.sb-bar{height:7px;background:rgba(255,255,255,.25);border-radius:6px;margin-top:14px;max-width:520px;overflow:hidden}
.sb-bar i{display:block;height:100%;background:var(--secondary);width:0;transition:.3s}

/* Sidebar (new structure) */
.side-h{font-weight:800;color:var(--dark);text-transform:uppercase;letter-spacing:.5px;font-size:.78rem;margin-bottom:12px}
.v-side .unit ul{list-style:none;margin:0 0 4px;padding:0}
.unit-t{font-weight:700;color:var(--dark);padding:.5rem .4rem;font-size:.95rem}
.v-side .lesson-link{justify-content:flex-start}
.tick{width:18px;height:18px;flex:0 0 18px;border-radius:50%;border:1.5px solid #cfd8dc;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#fff}
.tick.on{background:var(--success);border-color:var(--success)}
.ll-title{flex:1}
.ll-score{font-size:.72rem;font-weight:800;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,#fff);padding:.1rem .4rem;border-radius:10px}
.lesson-link.active{background:color-mix(in srgb,var(--accent) 10%,#fff);color:var(--accent)}

/* Lesson head */
.lesson-head{margin-bottom:8px}
.crumbs{font-size:.82rem;color:var(--muted);margin-bottom:4px}
.lesson-head h2{margin:.1rem 0;font-size:1.7rem;color:var(--dark)}
.lesson-tags{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 16px}
.lesson-tags .tag,.lesson-tags .time{font-size:.72rem;font-weight:700;padding:.25rem .6rem;border-radius:20px;background:#eef5f6;color:var(--primary)}
.lesson-tags .time{background:#fff7e6;color:var(--secondary-d)}
.video-note{font-size:.82rem;margin:.3rem 0 0}

/* Transcript */
.transcript-box{border:1px solid var(--line);border-radius:12px;margin:14px 0;overflow:hidden}
.tr-bar{background:#f7fafb;padding:.6rem .8rem;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tr-search{flex:1;min-width:140px;padding:.4rem .6rem;border:1px solid var(--line);border-radius:8px;font-family:inherit}
.btn-sm{padding:.4rem .8rem;font-size:.86rem}
.transcript{padding:1rem;max-height:260px;overflow-y:auto;font-size:.93rem}
.tr-line{display:flex;gap:10px;padding:.25rem .3rem;margin:0;border-radius:6px}
.tr-line .t{color:var(--secondary-d);font-weight:700;flex:0 0 48px}
.tr-line.hl{background:#fff2b8}

/* Interactive */
.interactive h4{margin:0 0 8px;font-size:1rem;color:var(--primary)}
.expr{display:flex;gap:8px;flex-wrap:wrap;font-size:1.5rem;font-family:var(--serif);margin:10px 0}
.expr-part{border:1.5px solid var(--line);background:#fff;border-radius:8px;padding:.3rem .7rem;cursor:pointer;font-size:1.3rem;font-family:inherit}
.expr-part:hover{border-color:var(--primary)}
.expr-part.sel{background:var(--primary);color:#fff;border-color:var(--primary)}
.expr-out{margin-top:8px;color:var(--dark);font-size:.95rem}

/* Quiz (quiz-engine.js markup) */
.quiz-section{margin-top:8px}
.quiz-head h3{margin:0 0 2px;color:var(--dark)}
.quiz .q{font-size:1.08rem;font-weight:600;margin-bottom:12px}
.quiz .qnum{color:var(--accent,var(--primary));font-weight:800;margin-right:4px}
.opts{margin-bottom:8px}
.opt .bullet{display:inline-flex;width:24px;height:24px;border-radius:50%;background:#eef2f3;color:var(--dark);align-items:center;justify-content:center;font-weight:700;font-size:.82rem;margin-right:10px}
.opt.correct .bullet{background:var(--success);color:#fff}
.opt.wrong .bullet{background:var(--error);color:#fff}
.explain{display:none}
.explain.show{display:block}
.explain.ok{background:#eafaf0;color:#1c7a44}
.explain.no{background:#fdeceb;color:#b03a2e}
.qresult{display:none;align-items:center;gap:16px;background:#f7fafb;border:1px solid var(--line);border-radius:14px;padding:18px;margin-top:6px}
.qresult.show{display:flex;flex-wrap:wrap}
.score-ring{width:74px;height:74px;flex:0 0 74px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;color:#fff;background:conic-gradient(var(--success) calc(var(--p,0)*1%),#e4eaec 0);position:relative}
.score-ring::after{content:"";position:absolute;inset:8px;border-radius:50%;background:#f7fafb}
.score-ring{color:var(--dark)}
.score-ring>span,.score-ring{z-index:1}

.site-footer.slim{padding:22px 0}

@media(max-width:880px){
  .viewer{grid-template-columns:1fr}
  .v-side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  .nav{display:none}
  .nav.open{display:flex;position:absolute;top:66px;left:0;right:0;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);padding:10px 20px}
  .hamburger{display:block;margin-left:auto}
  .partner-logos{display:none}
  .hero h1{font-size:2.1rem}
  .v-main{padding:20px}
}