@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{
  --brand:#16a34a;
  --brand-2:#22c55e;
  --brand-dark:#0f5132;
  --soft:#f5fbf6;
  --soft-2:#eef8f1;
  --card:#ffffff;
  --border:#dcecdf;
  --ink:#122018;
  --muted:#66756d;
  --blue:#2f56eb;
  --blue-dark:#1d3dc6;
  --warning:#f59e0b;
  --danger:#e53935;
  --shadow:0 18px 40px rgba(18,32,24,.07);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',Arial,Helvetica,sans-serif;
  background:
    radial-gradient(circle at top left, rgba(34,197,94,.10), transparent 24%),
    radial-gradient(circle at top right, rgba(47,86,235,.08), transparent 22%),
    linear-gradient(180deg,#f7faf7 0%,#eef4ef 100%);
  color:var(--ink);
  min-height:100vh;
}
a{text-decoration:none}
.site-header{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(220,236,223,.9);
  position:sticky;top:0;z-index:1000;
}
.brand-logo{display:flex;align-items:center;gap:12px;font-size:1.9rem;font-weight:800;color:#14813f}
.brand-icon{
  width:54px;height:54px;border-radius:16px;
  background:linear-gradient(135deg,#19b356,#11853c);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:1.45rem;box-shadow:0 14px 28px rgba(17,133,60,.25)
}
.nav-link{color:#173224!important;font-weight:700;padding:.85rem .9rem!important;border-radius:12px;transition:.2s}
.nav-link:hover{background:#eef8f1;color:#0f7a35!important}
.lang-badge{display:inline-flex;gap:10px;background:#f5f9f6;padding:7px;border-radius:999px;border:1px solid #dde8de;box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}
.lang-badge span{padding:.5rem .92rem;border-radius:999px;font-weight:700;color:#446358;transition:.2s}
.lang-badge .active{background:linear-gradient(135deg,var(--brand),#0ea54b);color:#fff;box-shadow:0 8px 20px rgba(22,163,74,.25)}
.layout{display:grid;grid-template-columns:280px 1fr 250px;gap:24px;align-items:start}
.sidebar-card,.toc-card,.content-card,.hero-card,.quiz-card,.stat-card{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(220,236,223,.95);
  border-radius:28px;
  box-shadow:var(--shadow);
}
.sidebar-card{padding:22px;position:sticky;top:96px;max-height:calc(100vh - 110px);overflow:auto}
.toc-card{padding:20px;position:sticky;top:96px}
.content-card,.hero-card{padding:30px}
.content-card{margin-bottom:24px;position:relative;overflow:hidden}
.content-card::before,.hero-card::before{
  content:"";position:absolute;inset:auto auto 0 -50px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle, rgba(34,197,94,.12), transparent 70%);pointer-events:none
}
.hero-card{margin-bottom:20px;position:relative;overflow:hidden}
.hero-badge{display:inline-flex;align-items:center;gap:10px;background:#fff3f3;border:1px solid #ffcaca;color:#df2b2b;padding:10px 16px;border-radius:999px;font-weight:700;box-shadow:0 8px 20px rgba(223,43,43,.08)}
.hero-title{font-size:3rem;font-weight:800;line-height:1.08;margin:.9rem 0 1.1rem;letter-spacing:-.03em}
.topic-list a{display:flex;align-items:center;gap:14px;padding:13px 10px;border-radius:16px;color:#22362a;font-weight:700;transition:.2s}
.topic-list a:hover,.topic-list a.active{background:linear-gradient(180deg,#eef8f1 0%,#e6f5ea 100%);color:#0b8b38;transform:translateX(2px)}
.topic-no{min-width:36px;height:36px;border-radius:12px;background:#ffe7ae;color:#8a5a00;display:flex;align-items:center;justify-content:center;font-weight:800;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.tutorial-img{width:100%;border-radius:24px;border:1px solid #dfecdf;background:#fbfdfb;margin-top:22px;box-shadow:0 12px 30px rgba(0,0,0,.05)}
.info-list li{margin-bottom:.7rem;line-height:1.7}
.table-wrapper{overflow:auto;border:1px solid #e7efe7;border-radius:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.custom-table{margin:0;background:#fff}
.custom-table th{background:linear-gradient(180deg,#f2fbf3,#e9f6eb);color:#17351f;white-space:nowrap;font-weight:800}
.custom-table td,.custom-table th{padding:15px;border-color:#e5ece5;vertical-align:top;line-height:1.6}
.note-box{background:linear-gradient(180deg,#f7fbf7,#f3fbf4);border:1px dashed #b7d8b8;padding:18px;border-radius:20px}
.right-links a{display:block;padding:.6rem 0;color:#335742;font-weight:700;transition:.2s}
.right-links a:hover{color:#0f8a39;transform:translateX(2px)}
.progress-box{background:#eff9ef;border:1px solid #d3ead3;border-radius:18px;padding:16px;margin-top:18px}
.progress{height:10px;border-radius:999px;background:#e5ece7}
.breadcrumb-bar{font-weight:700;color:#667; margin-bottom:14px}
.search-box{border:1px solid #dbe6db;border-radius:18px;padding:12px 14px;width:100%;margin:18px 0;background:#fff}
.search-box:focus{outline:none;border-color:#8bc99a;box-shadow:0 0 0 4px rgba(34,197,94,.12)}
.ad-box{min-height:220px;border:1px dashed #d5bf74;border-radius:22px;background:linear-gradient(180deg,#fffdf5,#fff8e3);display:flex;align-items:center;justify-content:center;color:#9a7722;font-weight:700;margin-top:18px}
.btn-premium,
.btn-brand,
.btn-warning2,
.btn-danger2,
.btn-soft{border:none;transition:.2s ease;}
.btn-premium{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,var(--brand),#0f8f42);color:#fff;font-weight:800;padding:16px 28px;border-radius:18px;box-shadow:0 14px 24px rgba(22,163,74,.22)}
.btn-premium:hover{transform:translateY(-1px);box-shadow:0 18px 30px rgba(22,163,74,.28);color:#fff}
.quiz-card{overflow:hidden}
.quiz-banner{
  background:linear-gradient(135deg,#122454 0%,#1f3cb8 55%,#2b65ea 100%);
  padding:32px 28px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:20px;position:relative
}
.quiz-banner::after{content:"";position:absolute;right:-80px;top:-80px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.08)}
.timer-pill{background:rgba(255,255,255,.97);color:#ec2f2f;border-radius:999px;padding:15px 24px;font-size:2rem;font-weight:800;min-width:170px;text-align:center;box-shadow:0 12px 24px rgba(0,0,0,.18)}
.quiz-body{padding:0;background:#fff;border-top:1px solid rgba(255,255,255,.08)}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:20px}
.stat-card{padding:18px;text-align:center;border-radius:22px;border:1px solid #e7efe8;background:linear-gradient(180deg,#fff 0%,#fcfefd 100%)}
.stat-card .big{font-size:2.1rem;font-weight:800;color:#122}
.quiz-main{display:grid;grid-template-columns:1fr 300px;gap:18px;padding:0 20px 24px}
.question-panel,.palette-panel{background:#fff;border:1px solid #e3ece3;border-radius:26px;padding:24px;box-shadow:0 12px 28px rgba(0,0,0,.03)}
.question-title{font-size:2rem;font-weight:800;line-height:1.35;margin:18px 0}
.option-card{border:2px solid #dfe8df;border-radius:18px;padding:16px 18px;margin-bottom:14px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:.2s;background:#fff}
.option-card:hover{border-color:#9fd3a8;background:#fbfffb;transform:translateY(-1px)}
.option-card.selected{border-color:#1f73ff;background:#eef5ff;box-shadow:0 8px 20px rgba(31,115,255,.08)}
.option-card.correct{border-color:#2ca24a;background:#eefaf1}
.option-card.wrong{border-color:#e33d3d;background:#fff0f0}
.option-card input{margin:0;transform:scale(1.2)}
.action-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.btn-soft{background:#eef2ef;color:#57655d;font-weight:700;padding:14px 20px;border-radius:16px}
.btn-soft:hover{background:#e0e7e2}
.btn-brand{background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff;font-weight:800;padding:14px 24px;border-radius:16px;box-shadow:0 12px 22px rgba(47,86,235,.2)}
.btn-brand:hover{transform:translateY(-1px);color:#fff}
.btn-warning2{background:linear-gradient(135deg,#f4b000,#de8f00);color:#111;font-weight:800;padding:14px 24px;border-radius:16px;box-shadow:0 12px 22px rgba(244,176,0,.22)}
.btn-warning2:hover{transform:translateY(-1px)}
.btn-danger2{background:linear-gradient(135deg,#ef4444,#d62828);color:#fff;font-weight:800;padding:14px 24px;border-radius:16px;box-shadow:0 12px 22px rgba(229,62,62,.22)}
.btn-danger2:hover{transform:translateY(-1px);color:#fff}
.palette-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.palette-btn{height:46px;border:2px solid #f0c9c9;background:#ffeaea;color:#b52929;border-radius:14px;font-weight:800;transition:.2s}
.palette-btn:hover{transform:translateY(-1px)}
.palette-btn.current{border-color:#2e66ef;background:#fff;color:#1c2e66;box-shadow:0 0 0 3px rgba(46,102,239,.13)}
.palette-btn.answered{background:#eaf8ed;border-color:#84d39a;color:#0c6e31}
.palette-btn.review{background:#fff5d7;border-color:#f0c14f;color:#915a00}
.result-box{background:#fbfffb;border:1px solid #dfe9df;border-radius:24px;padding:24px}
.review-item{border:1px solid #e6eee6;border-radius:18px;padding:18px;margin-bottom:16px;background:#fff}
.section-kicker{display:inline-block;padding:8px 14px;border-radius:999px;background:#eff8f1;color:#13833d;font-weight:700;font-size:.92rem}
.lead{line-height:1.8}
@media (max-width:1200px){.layout{grid-template-columns:250px 1fr}.toc-card{display:none}.quiz-main{grid-template-columns:1fr}}
@media (max-width:991px){.layout{grid-template-columns:1fr}.sidebar-card,.toc-card{position:static;max-height:none}.hero-title{font-size:2.3rem}.stats-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:576px){.stats-row{grid-template-columns:1fr 1fr}.question-title{font-size:1.4rem}.timer-pill{font-size:1.3rem;min-width:120px;padding:10px 16px}.palette-grid{grid-template-columns:repeat(4,1fr)}.hero-title{font-size:1.9rem}}


/* Premium result colours */
.result-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0}
.result-summary-card{border-radius:22px;padding:22px;text-align:center;border:1px solid transparent;box-shadow:0 14px 32px rgba(0,0,0,.06)}
.result-summary-card .result-number{font-size:2.35rem;font-weight:800;line-height:1}
.result-summary-card .result-label{margin-top:8px;font-weight:700}
.result-summary-card.correct-card{background:linear-gradient(180deg,#effcf3,#e2f8e8);border-color:#9fddb1;color:#146b31}
.result-summary-card.wrong-card{background:linear-gradient(180deg,#fff1f1,#ffe3e3);border-color:#f3a3a3;color:#a62020}
.result-summary-card.skipped-card{background:linear-gradient(180deg,#fff9ea,#fff1c9);border-color:#f0d17a;color:#8a5a00}
.result-summary-card.score-card{background:linear-gradient(180deg,#eef4ff,#e0e9ff);border-color:#9db7ff;color:#2043a8}
.review-item.correct-review{border-left:7px solid #22a447;background:linear-gradient(180deg,#f8fff9,#eefaf1)}
.review-item.wrong-review{border-left:7px solid #e33d3d;background:linear-gradient(180deg,#fffafa,#fff0f0)}
.review-item.skipped-review{border-left:7px solid #f0a500;background:linear-gradient(180deg,#fffdf6,#fff7dc)}
.answer-line{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px}
.answer-badge{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;font-weight:800;font-size:.92rem}
.answer-badge.correct{background:#dff7e6;color:#126b2f;border:1px solid #8fd5a2}
.answer-badge.wrong{background:#ffe3e3;color:#a51f1f;border:1px solid #f1a1a1}
.answer-badge.skipped{background:#fff3cf;color:#8b5b00;border:1px solid #e7c76e}
.answer-badge.correct-answer{background:#e8f8ed;color:#0f6f31;border:1px solid #9fd9ae}
.review-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.status-pill{padding:8px 12px;border-radius:999px;font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.status-pill.correct{background:#22a447;color:#fff}
.status-pill.wrong{background:#e33d3d;color:#fff}
.status-pill.skipped{background:#f0a500;color:#fff}
@media(max-width:768px){.result-summary-grid{grid-template-columns:repeat(2,1fr)}}

.student-motivation-card{
  background:
    radial-gradient(circle at top right, rgba(47,86,235,.10), transparent 28%),
    radial-gradient(circle at bottom left, rgba(34,197,94,.12), transparent 30%),
    linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
  border:1px solid #dce7f7;
}
.achievement-card{
  height:100%;
  background:rgba(255,255,255,.92);
  border:1px solid #e3ebf4;
  border-radius:22px;
  padding:22px;
  box-shadow:0 12px 28px rgba(21,44,84,.06);
  transition:.25s ease;
}
.achievement-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(21,44,84,.10)}
.achievement-icon{
  width:52px;height:52px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#16a34a,#2563eb);
  color:#fff;font-weight:800;font-size:1.35rem;
  margin-bottom:16px;
  box-shadow:0 12px 22px rgba(37,99,235,.18)
}
.motivation-quote{
  border-radius:24px;
  padding:24px;
  background:linear-gradient(135deg,#123d2b,#174f8f);
  color:#fff;
  box-shadow:0 18px 34px rgba(23,79,143,.18);
}