/* AIRE — playful "Duolingo-style" design: bold colours, chunky 3D buttons, rounded cards. */
:root {
  --bg: #ffffff;
  --panel: #ffffff;
  --soft: #f7f7f7;
  --line: #e5e5e5;
  --line-2: #d6d6d6;
  --text: #3c3c3c;
  --muted: #777777;
  --faint: #afafaf;

  --green: #58cc02;  --green-d: #58a700;  --green-s: #d7ffb8;
  --blue: #1cb0f6;   --blue-d: #1899d6;   --blue-s: #ddf4ff;
  --purple: #ce82ff; --purple-d: #a568cc; --purple-s: #f4e5ff;
  --orange: #ff9600; --orange-d: #e08400; --orange-s: #fff0d9;
  --red: #ff4b4b;    --red-d: #ea2b2b;    --red-s: #ffdfe0;
  --yellow: #ffc800; --yellow-d: #e5b400; --yellow-s: #fff5d3;

  --radius: 16px;
  --font: 'Nunito', 'Vazirmatn', system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131f24; --panel: #131f24; --soft: #1a2b32; --line: #37464f; --line-2: #4b5c66;
    --text: #f1f7fb; --muted: #a7b6bf; --faint: #6b7d87;
    --green-s: #1f3a14; --blue-s: #13374a; --purple-s: #35244a; --orange-s: #3f2a0e; --red-s: #461f22; --yellow-s: #3e3510;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #131f24; --panel: #131f24; --soft: #1a2b32; --line: #37464f; --line-2: #4b5c66;
  --text: #f1f7fb; --muted: #a7b6bf; --faint: #6b7d87;
  --green-s: #1f3a14; --blue-s: #13374a; --purple-s: #35244a; --orange-s: #3f2a0e; --red-s: #461f22; --yellow-s: #3e3510;
  color-scheme: dark;
}
html[dir="rtl"] { --font: 'Vazirmatn', 'Nunito', system-ui, sans-serif; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-weight: 600; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.airo { width: auto; height: auto; stroke: none; }
h1, h2, h3 { font-weight: 900; line-height: 1.2; margin: 0; }

/* ---------- Layout ---------- */
.shell { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; border-inline-end: 2px solid var(--line); padding: 20px 16px; display: flex; flex-direction: column; gap: 6px; }
.logo { display: flex; align-items: center; gap: 10px; padding: 4px 12px 20px; }
.logo b { font-size: 30px; font-weight: 900; color: var(--green); letter-spacing: -.5px; line-height: 1; }
.logo small { display: block; font-size: 11px; color: var(--muted); font-weight: 700; line-height: 1.2; }
.nav-item { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 14px; border: 2px solid transparent; color: var(--muted); font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .6px; }
html[dir="rtl"] .nav-item { text-transform: none; letter-spacing: 0; font-size: 16px; }
.nav-item svg { font-size: 26px; }
.nav-item:hover { background: var(--soft); }
.nav-item.on { color: var(--blue); background: var(--blue-s); border-color: #84d8ff; }
.i-home { color: var(--green); } .i-cal { color: var(--orange); } .i-star { color: var(--yellow); } .i-up { color: var(--purple); } .i-shield { color: var(--red); }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.side-foot .row2 { display: flex; gap: 8px; }
.side-foot .row2 .selectbox { flex: 1; }

.main { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 2px solid var(--line); }
.topbar-in { max-width: 1040px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 12px; }
.topbar .mlogo { display: none; font-size: 26px; font-weight: 900; color: var(--green); }
.searchbox { flex: 1; min-width: 0; max-width: 460px; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 2px solid var(--line); border-radius: 14px; background: var(--soft); color: var(--faint); }
.searchbox svg { font-size: 20px; }
.searchbox:focus-within { border-color: var(--blue); background: var(--bg); }
.searchbox input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-weight: 700; }
.top-tools { margin-inline-start: auto; display: none; gap: 8px; align-items: center; }
.content { max-width: 1040px; margin: 0 auto; padding: 24px 24px 60px; }
.tabbar { display: none; }

/* ---------- Buttons ---------- */
.btn { --c: var(--blue); --d: var(--blue-d); display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 14px; border: 0; background: var(--c); color: #fff; font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; box-shadow: 0 4px 0 var(--d); transition: filter .1s, transform .05s, box-shadow .05s; white-space: nowrap; user-select: none; }
html[dir="rtl"] .btn { text-transform: none; letter-spacing: 0; font-size: 15px; }
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--d); }
.btn svg { font-size: 18px; stroke-width: 2.8; }
.btn.green { --c: var(--green); --d: var(--green-d); }
.btn.orange { --c: var(--orange); --d: var(--orange-d); }
.btn.purple { --c: var(--purple); --d: var(--purple-d); }
.btn.red { --c: var(--red); --d: var(--red-d); }
.btn.yellow { --c: var(--yellow); --d: var(--yellow-d); color: #4b3b00; }
.btn.ghost { background: var(--bg); color: var(--blue); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); }
.btn.ghost:active { box-shadow: 0 0 0 var(--line); }
.btn.sm { height: 36px; padding: 0 12px; font-size: 12px; border-radius: 12px; }
html[dir="rtl"] .btn.sm { font-size: 13px; }
.btn.icon { width: 44px; padding: 0; }
.btn.sm.icon { width: 36px; }
.btn[disabled] { opacity: .55; pointer-events: none; }
.btn.block { width: 100%; }

.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--soft); color: var(--muted); border: 2px solid var(--line); white-space: nowrap; }
.chip svg { font-size: 13px; }
.chip.new { background: var(--green); border-color: var(--green-d); color: #fff; text-transform: uppercase; letter-spacing: .5px; }
.chip.late { background: var(--red-s); border-color: var(--red); color: var(--red-d); }
.chip.soon { background: var(--orange-s); border-color: var(--orange); color: var(--orange-d); }
.chip.ok { background: var(--blue-s); border-color: #84d8ff; color: var(--blue-d); }

/* ---------- Cards ---------- */
.card { background: var(--panel); border: 2px solid var(--line); border-bottom-width: 4px; border-radius: var(--radius); }
.pad { padding: 18px; }
.sec-h { display: flex; align-items: center; gap: 10px; margin: 34px 0 14px; }
.sec-h h2 { font-size: 22px; }
.sec-h .more { margin-inline-start: auto; color: var(--blue); font-weight: 800; font-size: 14px; text-transform: uppercase; }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 28px 16px; color: var(--muted); font-weight: 700; }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; padding: 20px 24px; }
.bubble { position: relative; background: var(--panel); border: 2px solid var(--line); border-radius: 18px; padding: 14px 18px; }
.bubble::before { content: ''; position: absolute; top: 50%; inset-inline-start: -11px; width: 18px; height: 18px; background: var(--panel); border-inline-start: 2px solid var(--line); border-bottom: 2px solid var(--line); transform: translateY(-50%) rotate(45deg); }
html[dir="rtl"] .bubble::before { transform: translateY(-50%) rotate(-45deg); }
.bubble h1 { font-size: 26px; margin-bottom: 4px; }
.bubble p { margin: 0; color: var(--muted); font-size: 16px; font-weight: 700; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.stat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.stat .si { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; color: #fff; flex: none; }
.stat .si svg { stroke-width: 2.8; }
.stat b { display: block; font-size: 22px; font-weight: 900; line-height: 1; }
.stat span { font-size: 13px; color: var(--muted); font-weight: 700; }

.announce { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; margin-top: 18px; background: var(--yellow-s); border-color: var(--yellow); }
.announce .ai { width: 40px; height: 40px; border-radius: 12px; background: var(--yellow); color: #4b3b00; display: grid; place-items: center; font-size: 20px; flex: none; }
.announce p { margin: 0; white-space: pre-line; font-weight: 700; }
.announce small { color: var(--muted); font-weight: 700; }

/* ---------- Course cards ---------- */
.courses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.course { --c: var(--blue); --d: var(--blue-d); position: relative; overflow: hidden; display: flex; flex-direction: column; transition: transform .15s; }
.course:hover { transform: translateY(-3px); }
.course:active { transform: translateY(1px); }
.course .cover { background: var(--c); height: 104px; display: grid; place-items: center; position: relative; border-bottom: 4px solid var(--d); }
.course .cover::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 18% 22%, rgba(255,255,255,.28) 0 16%, transparent 17%), radial-gradient(circle at 88% 85%, rgba(255,255,255,.16) 0 22%, transparent 23%); }
.course .cico { font-size: 54px; color: #fff; stroke-width: 2.2; position: relative; z-index: 1; filter: drop-shadow(0 3px 0 rgba(0,0,0,.15)); }
.course .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.course h3 { font-size: 17px; }
.course .latest { font-size: 13px; color: var(--muted); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course .meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: auto; }
.course .newdot { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; }
.bar { height: 12px; border-radius: 99px; background: var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 99px; background: var(--c, var(--green)); position: relative; }
.bar > i::after { content: ''; position: absolute; top: 3px; left: 6px; right: 6px; height: 3px; border-radius: 9px; background: rgba(255,255,255,.35); }

/* ---------- Course page ---------- */
.banner { --c: var(--blue); --d: var(--blue-d); background: var(--c); border-radius: 18px; box-shadow: 0 4px 0 var(--d); color: #fff; padding: 20px 22px; display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.banner .cico { font-size: 58px; stroke-width: 2.2; flex: none; }
.banner small { opacity: .9; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; font-size: 13px; }
.banner h1 { font-size: 26px; }
.banner .bar { background: rgba(0,0,0,.18); margin-top: 10px; max-width: 320px; }
.banner .bar > i { background: #fff; }
.banner .actions { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.btn.white { --c: #fff; --d: rgba(0,0,0,.22); color: #3c3c3c; }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 800; margin-bottom: 14px; }
.back:hover { color: var(--blue); }
html[dir="rtl"] .back svg { transform: scaleX(-1); }

.unit { margin-bottom: 16px; overflow: hidden; }
.unit > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 14px 16px; user-select: none; }
.unit > summary::-webkit-details-marker { display: none; }
.unit > summary:hover { background: var(--soft); }
.unit .num { --c: var(--blue); --d: var(--blue-d); width: 48px; height: 48px; border-radius: 50%; background: var(--c); box-shadow: 0 4px 0 var(--d); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 18px; flex: none; }
.unit .num.done { --c: var(--yellow); --d: var(--yellow-d); }
.unit .num svg { font-size: 24px; stroke-width: 3.2; }
.unit .ut { flex: 1; min-width: 0; }
.unit .ut small { color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .5px; font-size: 12px; }
html[dir="rtl"] .unit .ut small { text-transform: none; letter-spacing: 0; }
.unit .ut h3 { font-size: 17px; }
.unit .chev { color: var(--faint); font-size: 22px; transition: transform .15s; }
html[dir="rtl"] .unit .chev { transform: scaleX(-1); }
.unit[open] .chev, html[dir="rtl"] .unit[open] .chev { transform: rotate(90deg); }
.unit[open] > summary { border-bottom: 2px solid var(--line); }
.unit .tools { display: flex; gap: 8px; padding: 12px 16px 2px; flex-wrap: wrap; }

.lecs { list-style: none; margin: 0; padding: 6px 8px 10px; }
.lec { display: flex; align-items: center; gap: 14px; padding: 10px 8px; }
.lec + .lec { border-top: 2px solid var(--line); }
.li { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; flex: none; background: var(--blue-s); color: var(--blue); }
.li.pdf { background: var(--red-s); color: var(--red); }
.li.ppt { background: var(--orange-s); color: var(--orange); }
.li.link { background: var(--purple-s); color: var(--purple); }
.li.folder { background: var(--yellow-s); color: var(--yellow-d); }
.li.done { background: var(--green); color: #fff; }
.li.done svg { stroke-width: 3.4; }
.lec .lm { flex: 1; min-width: 0; }
.lec .lt { font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lec .lt a:hover { color: var(--blue); }
.ls { color: var(--muted); font-size: 13px; font-weight: 700; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ls svg { font-size: 14px; vertical-align: -2px; }
.ls > span + span::before { content: '·'; margin-inline-end: 10px; }
.lec .la { display: flex; gap: 8px; align-items: center; flex: none; }
.star-btn, .read-btn { width: 36px; height: 36px; border-radius: 12px; border: 2px solid var(--line); background: var(--bg); color: var(--faint); cursor: pointer; display: grid; place-items: center; font-size: 18px; padding: 0; }
.star-btn.on { color: var(--yellow); border-color: var(--yellow); background: var(--yellow-s); }
.star-btn.on svg { fill: var(--yellow); }
.read-btn.on { color: #fff; border-color: var(--green-d); background: var(--green); }
.read-btn svg { stroke-width: 3.2; }

/* ---------- Lecture page ---------- */
.lec-page { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.viewer { overflow: hidden; }
.viewer iframe { display: block; width: 100%; height: 78vh; border: 0; background: #fff; border-radius: 14px; }
.lec-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.lec-head .li { width: 58px; height: 58px; font-size: 28px; border-radius: 16px; }
.lec-head h1 { font-size: 24px; }
.lec-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.files-list { display: grid; gap: 8px; padding: 12px; }
.fitem { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--soft); }
.fitem span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 14px; }

.thread h3 { padding: 14px 16px; border-bottom: 2px solid var(--line); display: flex; align-items: center; gap: 8px; font-size: 16px; }
.thread h3 svg { color: var(--blue); font-size: 20px; }
.msgs { padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; max-height: 50vh; overflow: auto; }
.msg { display: flex; gap: 10px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 15px; flex: none; }
.msg .mb { background: var(--soft); border-radius: 4px 14px 14px 14px; padding: 8px 12px; min-width: 0; }
html[dir="rtl"] .msg .mb { border-radius: 14px 4px 14px 14px; }
.msg .mb b { font-size: 13px; }
.msg .mb small { color: var(--faint); font-size: 11px; margin-inline-start: 6px; }
.msg .mb p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-weight: 600; }
.compose { border-top: 2px solid var(--line); padding: 12px 14px; display: grid; gap: 8px; }

/* ---------- Forms ---------- */
.field { display: grid; gap: 6px; }
.field > span { font-size: 13px; font-weight: 800; color: var(--muted); }
.input { width: 100%; min-height: 46px; border: 2px solid var(--line); border-radius: 14px; background: var(--soft); padding: 10px 14px; outline: 0; font-weight: 700; }
textarea.input { resize: vertical; min-height: 80px; }
.input:focus { border-color: var(--blue); background: var(--bg); }
.selectbox { height: 44px; border: 2px solid var(--line); border-radius: 14px; background: var(--bg); padding: 0 10px; font-weight: 800; cursor: pointer; }
.drop { display: block; border: 2px dashed var(--line-2); border-radius: 16px; padding: 24px; text-align: center; color: var(--muted); cursor: pointer; font-weight: 700; }
.drop:hover, .drop.over { border-color: var(--blue); background: var(--blue-s); color: var(--blue); }
.drop svg { font-size: 34px; display: block; margin: 0 auto 6px; }
.drop input { display: none; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.form { display: grid; gap: 14px; }
.check-row { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--muted); }
.check-row input { width: 18px; height: 18px; accent-color: var(--blue); }

/* ---------- Schedule ---------- */
.deadline { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.deadline + .deadline { border-top: 2px solid var(--line); }
.dd { width: 58px; flex: none; text-align: center; border-radius: 14px; overflow: hidden; border: 2px solid var(--line); }
.dd small { display: block; background: var(--red); color: #fff; font-size: 11px; font-weight: 900; text-transform: uppercase; padding: 2px 0; }
.dd b { display: block; font-size: 22px; font-weight: 900; padding: 2px 0 4px; }
.deadline .dm { flex: 1; min-width: 0; }
.deadline .dm b { display: block; font-size: 16px; font-weight: 800; }
.deadline .dm span { color: var(--muted); font-size: 13px; font-weight: 700; }
.deadline .dr { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; padding: 14px; }
.day { border: 2px solid var(--line); border-radius: 14px; padding: 8px; min-height: 110px; }
.day.today { border-color: var(--blue); background: var(--blue-s); }
.day h4 { margin: 0 0 6px; font-size: 13px; font-weight: 900; color: var(--muted); }
.day.today h4 { color: var(--blue); }
.slot { --c: var(--blue); border-radius: 10px; background: var(--c); color: #fff; padding: 6px 8px; font-size: 12px; font-weight: 800; margin-bottom: 6px; line-height: 1.25; }
.slot small { display: block; opacity: .92; font-weight: 700; }

/* ---------- Admin ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.chart { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding: 16px 16px 8px; }
.chart .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; justify-content: flex-end; }
.chart .col i { width: 100%; max-width: 26px; border-radius: 7px 7px 3px 3px; background: var(--blue); min-height: 3px; }
.chart .col i.dl { background: var(--green); }
.chart .col span { font-size: 10px; color: var(--faint); font-weight: 800; }
.legend { display: flex; gap: 14px; padding: 0 16px 14px; font-size: 13px; color: var(--muted); font-weight: 700; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--blue); margin-inline-end: 6px; }
.legend i.dl { background: var(--green); }
.rows > div { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 2px solid var(--line); font-weight: 700; font-size: 14px; }
.rows > div:first-child { border-top: 0; }
.rows .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Misc ---------- */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(30px); opacity: 0; background: var(--text); color: var(--bg); padding: 12px 18px; border-radius: 14px; font-weight: 800; z-index: 100; transition: .2s; pointer-events: none; max-width: calc(100% - 32px); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.loading { display: grid; place-items: center; min-height: 60vh; }
.loading .airo { animation: bob 1s ease-in-out infinite; }
.foot { color: var(--faint); font-size: 13px; font-weight: 700; text-align: center; padding: 30px 0 10px; }
.foot a { text-decoration: underline; }
.offline-bar { background: var(--orange); color: #fff; text-align: center; font-weight: 800; padding: 6px; font-size: 13px; }
.muted { color: var(--muted); font-weight: 700; }

@keyframes bob { 50% { transform: translateY(-8px); } }
@keyframes wave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-22deg); } }
@keyframes blink { 50% { opacity: .35; } }
.airo .arm-wave { transform-origin: 38px 92px; animation: wave 1.2s ease-in-out infinite; }
.airo .bulb { animation: blink 2.4s ease-in-out infinite; }
.airo .zzz { animation: bob 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .shell { grid-template-columns: 88px minmax(0, 1fr); }
  .side { padding: 20px 12px; }
  .side .logo-txt, .nav-item span, .side-foot { display: none; }
  .nav-item { justify-content: center; padding: 12px; }
  .top-tools { display: flex; }
  .lec-page { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .courses { grid-template-columns: repeat(2, 1fr); }
  .stats, .kpis { grid-template-columns: repeat(2, 1fr); }
  .week { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .shell { grid-template-columns: 1fr; }
  .side { display: none; }
  .topbar .mlogo { display: block; }
  .topbar-in, .content { padding-left: 16px; padding-right: 16px; }
  .content { padding-bottom: 100px; }
  .searchbox { height: 42px; }
  .tabbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; background: var(--bg); border-top: 2px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); justify-content: space-around; }
  .tabbar a { display: grid; place-items: center; width: 56px; height: 48px; border-radius: 14px; border: 2px solid transparent; font-size: 26px; }
  .tabbar a.on { background: var(--blue-s); border-color: #84d8ff; }
  .hero { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 16px; }
  .bubble::before { top: -11px; left: 50%; inset-inline-start: auto; transform: translateX(-50%) rotate(135deg); }
  html[dir="rtl"] .bubble::before { transform: translateX(-50%) rotate(135deg); }
  .courses, .grid2 { grid-template-columns: 1fr; }
  .banner { flex-wrap: wrap; }
  .banner .actions { margin-inline-start: 0; width: 100%; justify-content: flex-start; }
  .lec { flex-wrap: wrap; }
  .lec .la { width: 100%; padding-inline-start: 60px; }
  .deadline { flex-wrap: wrap; }
  .deadline .dr { width: 100%; justify-content: flex-start; padding-inline-start: 72px; }
  .viewer iframe { height: 65vh; }
  .topbar-in { gap: 8px; }
  .top-tools { gap: 6px; }
  .top-tools .selectbox { width: 62px; padding: 0 4px; }
  .top-tools .btn.icon { width: 40px; height: 40px; }
  .hero .bubble { width: 100%; }
  .stat { padding: 10px; }
}

/* ---------- Game: chips, leaderboard, badges, modal ---------- */
.i-trophy { color: var(--yellow-d); }
.gamechips { display: flex; gap: 6px; margin-inline-start: auto; }
.gamechips.pop { animation: pop .45s ease; }
.gchip { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border-radius: 12px; font-weight: 900; font-size: 16px; }
.gchip:hover { background: var(--soft); }
.gchip svg { font-size: 24px; }
.gchip.join { color: var(--yellow-d); border: 2px solid var(--line); font-size: 13px; }
.gchip.join svg { font-size: 18px; }
@keyframes pop { 40% { transform: scale(1.15); } }
.top-tools { margin-inline-start: 0; }

.profile { display: flex; align-items: center; gap: 18px; }
.profile .avatar { box-shadow: 0 4px 0 rgba(0,0,0,.15); }
.profile h2 { display: flex; align-items: center; gap: 8px; font-size: 24px; }
.pstats { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px; color: var(--muted); font-weight: 700; }
.pstats span { display: inline-flex; align-items: center; gap: 6px; }
.pstats svg { font-size: 22px; }
.pstats b { color: var(--text); font-size: 18px; font-weight: 900; }

.badges { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.bdg { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; text-align: center; filter: grayscale(1); opacity: .45; }
.bdg.on { filter: none; opacity: 1; border-color: var(--yellow); background: var(--yellow-s); }
.bdg span { font-size: 34px; line-height: 1; }
.bdg small { font-weight: 800; font-size: 12px; color: var(--muted); }

.seg { display: inline-flex; background: var(--soft); border: 2px solid var(--line); border-radius: 14px; padding: 3px; }
.seg button { border: 0; background: transparent; padding: 6px 14px; border-radius: 10px; font-weight: 800; color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--bg); color: var(--blue); box-shadow: 0 2px 0 var(--line); }

.board { list-style: none; margin: 0; padding: 6px 8px; }
.board li { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 14px; }
.board li + li { border-top: 2px solid var(--line); }
.board li.me { background: var(--blue-s); border-color: transparent; }
.board .pos { width: 32px; text-align: center; font-weight: 900; color: var(--muted); font-size: 16px; }
.board .pos.p1, .board .pos.p2, .board .pos.p3 { font-size: 26px; }
.board .bn { flex: 1; min-width: 0; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .bs { display: inline-flex; align-items: center; gap: 2px; font-weight: 900; color: var(--orange); }
.board .bs svg { font-size: 20px; }
.board .bx { font-weight: 900; color: var(--muted); min-width: 70px; text-align: end; }
.rules { margin: 8px 0 0; padding-inline-start: 18px; font-weight: 700; color: var(--muted); }
.rules li { margin: 6px 0; }
.card h3 { display: flex; align-items: center; gap: 8px; }
.code { background: var(--soft); border: 2px solid var(--line); border-radius: 12px; padding: 6px 12px; font-weight: 800; direction: ltr; }

.modal { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.45); display: grid; place-items: center; padding: 16px; animation: fade .15s; }
.modal-box { width: 100%; max-width: 420px; animation: rise .2s ease; }
.modal-box h2 { margin: 6px 0 4px; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatches input { display: none; }
.swatches i { display: block; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; box-shadow: 0 3px 0 rgba(0,0,0,.15); }
.swatches input:checked + i { border-color: var(--text); transform: scale(1.1); }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(20px); opacity: 0; } }

@media (max-width: 900px) { .badges { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) {
  .gchip { padding: 0 4px; font-size: 14px; }
  .gchip svg { font-size: 20px; }
  .gchip.join b { display: none; }
  .profile { flex-direction: column; text-align: center; }
  .pstats { justify-content: center; }
  .profile h2 { justify-content: center; }
  .board .bx { min-width: 0; }
}

@media (max-width: 700px) { .top-tools .theme { display: none; } .top-tools .selectbox { width: 58px; } }