/* AIQ - AI Competency LMS (POC) : design tokens, light + dark, BN/EN typography */
:root{
  --brand:#0E8F6F; --brand-d:#0a6e55; --brand-l:#e6f5f0;
  --accent:#F2711C; --accent-l:#fff2e6;
  --bg:#f6f8fa; --card:#ffffff; --ink:#132029; --muted:#5b6b78; --line:#e3e9ee;
  --ok:#0E8F6F; --warn:#c2410c; --bad:#b91c1c;
  --radius:14px; --shadow:0 2px 14px rgba(16,40,60,.07);
  --max:1120px;
}
[data-theme="dark"]{
  --brand:#2bbd95; --brand-d:#1c8e6e; --brand-l:#10241f;
  --accent:#ff9245; --accent-l:#2a1a0e;
  --bg:#0e1418; --card:#151d23; --ink:#e7eef3; --muted:#9db0bd; --line:#24313a;
  --shadow:0 2px 16px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font-size:16px; line-height:1.65;
  font-family:'Hind Siliguri','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
html[lang="en"] body{font-family:'Inter','Hind Siliguri',system-ui,sans-serif}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 18px}
.sec{padding:52px 0}
h1,h2,h3,h4{line-height:1.3;margin:0 0 .5em}
h1{font-size:2.1rem;font-weight:700} h2{font-size:1.5rem} h3{font-size:1.15rem}
.muted{color:var(--muted)} .sm{font-size:.88rem} .center{text-align:center}
.mt{margin-top:18px}.mt2{margin-top:32px}.mb{margin-bottom:18px}

/* header */
header.site{position:sticky;top:0;z-index:50;background:var(--card);border-bottom:1px solid var(--line)}
.navbar{display:flex;align-items:center;gap:14px;height:64px}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:1.2rem;color:var(--ink)}
.logo .dot{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--brand),var(--accent));
  display:grid;place-items:center;color:#fff;font-size:.85rem;font-weight:700}
.navlinks{display:flex;gap:18px;margin-inline-start:auto;align-items:center;flex-wrap:wrap}
.navlinks a{color:var(--ink);font-size:.95rem}
.iconbtn{background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:9px;
  padding:5px 10px;cursor:pointer;font-size:.85rem;font-family:inherit}
.iconbtn:hover{border-color:var(--brand);color:var(--brand)}
.menu-toggle{display:none}

/* buttons */
.btn{display:inline-block;border:0;border-radius:11px;padding:11px 20px;font-weight:600;font-size:.98rem;
  cursor:pointer;font-family:inherit;background:var(--brand);color:#fff;text-align:center}
.btn:hover{background:var(--brand-d);text-decoration:none;color:#fff}
.btn.lg{padding:15px 30px;font-size:1.05rem}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand);background:transparent}
.btn.accent{background:var(--accent)} .btn.accent:hover{background:#d95f0f}
.btn.block{display:block;width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}

/* cards + grid */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.g5{grid-template-columns:repeat(5,1fr)} .g-side{grid-template-columns:2fr 1fr}
@media(max-width:900px){.g2,.g3,.g5,.g-side{grid-template-columns:1fr}
  .navlinks{display:none} .navlinks.open{display:flex;position:absolute;top:64px;left:0;right:0;background:var(--card);
    flex-direction:column;align-items:flex-start;padding:14px 18px;border-bottom:1px solid var(--line)}
  .menu-toggle{display:inline-block;margin-inline-start:auto}
  h1{font-size:1.6rem}}

/* hero */
.hero{background:linear-gradient(160deg,var(--brand-l),transparent 60%);border-bottom:1px solid var(--line)}
.hero .wrap{padding-top:56px;padding-bottom:56px}
.pill{display:inline-block;background:var(--accent-l);color:var(--accent);border:1px solid var(--accent);
  border-radius:999px;padding:4px 14px;font-size:.82rem;font-weight:600;margin-bottom:14px}

/* level cards */
.level{border-inline-start:5px solid var(--lvl,var(--brand))}
.level .num{font-size:.8rem;font-weight:700;color:var(--lvl,var(--brand));letter-spacing:.06em}
.badge{display:inline-block;border:1px solid;border-radius:999px;padding:3px 12px;font-size:.82rem;font-weight:600}
.fee{font-weight:700}
.star{color:#d8dee3;font-size:1.3rem} .star.on{color:var(--accent)}

/* forms */
label{display:block;font-size:.9rem;font-weight:600;margin:12px 0 5px}
input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--card);
  color:var(--ink);font-family:inherit;font-size:1rem}
input:focus,textarea:focus,select:focus{outline:2px solid var(--brand);outline-offset:1px}
textarea{min-height:120px;resize:vertical}
.note{background:var(--brand-l);border:1px solid var(--brand);border-radius:10px;padding:12px 14px;font-size:.92rem}
.alert{border-radius:10px;padding:12px 14px;margin-bottom:14px;font-size:.94rem}
.alert.ok{background:var(--brand-l);border:1px solid var(--brand)}
.alert.err{background:#fde8e8;border:1px solid var(--bad);color:#7f1d1d}
[data-theme="dark"] .alert.err{background:#2a1414;color:#fca5a5}

/* tabs (3 ways of learning) */
.tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:18px}
.tab{padding:10px 16px;border:1px solid var(--line);border-bottom:0;border-radius:11px 11px 0 0;background:transparent;
  cursor:pointer;font-family:inherit;font-size:.95rem;color:var(--muted)}
.tab.active{background:var(--card);color:var(--brand);font-weight:700;border-color:var(--brand)}
.pane{display:none} .pane.active{display:block}
.ratio{position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden;background:#000}
.ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* chat */
.chat{height:330px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--bg)}
.msg{margin-bottom:12px;display:flex;gap:9px}
.msg .who{width:30px;height:30px;border-radius:8px;flex:0 0 30px;display:grid;place-items:center;font-size:.75rem;font-weight:700;color:#fff}
.msg.ai .who{background:var(--brand)} .msg.me .who{background:var(--accent)}
.msg .txt{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 12px;white-space:pre-wrap}
.chatbar{display:flex;gap:8px;margin-top:10px}

/* exercise (w3schools style) */
.tryit{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tryit .head{background:var(--brand);color:#fff;padding:9px 14px;font-weight:600;font-size:.92rem}
.tryit .side{border-inline-end:1px solid var(--line)}
.tryit .body{padding:14px}
.tryit textarea{border:0;min-height:230px;border-radius:0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.95rem}
.tryit .out{min-height:230px;background:var(--bg);padding:14px;font-size:.95rem;white-space:pre-wrap}
@media(max-width:800px){.tryit{grid-template-columns:1fr}.tryit .side{border-inline-end:0;border-bottom:1px solid var(--line)}}

/* progress */
.bar{height:9px;background:var(--line);border-radius:99px;overflow:hidden}
.bar > i{display:block;height:100%;background:var(--brand);border-radius:99px}
.steps{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 0}
.chip{font-size:.78rem;border:1px solid var(--line);border-radius:99px;padding:2px 10px;color:var(--muted)}
.chip.done{border-color:var(--brand);color:var(--brand);background:var(--brand-l)}

/* table */
table{width:100%;border-collapse:collapse;font-size:.93rem}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
th{background:var(--bg);font-weight:700}

/* certificate */
.cert{background:#fff;color:#132029;border:14px solid var(--brand);border-radius:6px;padding:46px 40px;text-align:center;
  max-width:900px;margin:0 auto;position:relative}
.cert .inner{border:2px solid var(--accent);padding:34px 26px}
.cert h2{font-size:2rem;margin:.2em 0;color:var(--brand-d)}
.cert .name{font-size:1.9rem;font-weight:700;margin:14px 0;border-bottom:2px dotted #bbb;display:inline-block;padding:0 24px 6px}
.cert .meta{display:flex;justify-content:space-between;gap:18px;margin-top:34px;font-size:.85rem;text-align:start}
.print-only{display:none}
@media print{
  header.site,footer.site,.noprint{display:none!important}
  body{background:#fff} .print-only{display:block}
  .cert{border-color:#0E8F6F!important;box-shadow:none}
}
footer.site{border-top:1px solid var(--line);background:var(--card);padding:26px 0;margin-top:50px;font-size:.9rem}