/* יומן סטודנט – בהיר, צבעוני וחי. לכל קורס צבע משלו. */
:root{
  --bg:#F4F6FF; --card:#FFFFFF; --ink:#1B1E3C; --muted:#6A6F92; --line:#E6E9F7;
  --brand:#4F46E5; --brand-2:#EC4899; --brand-3:#F59E0B; --brand-ink:#FFFFFF;
  --ok:#0E9F6E; --ok-bg:#E2F8EF; --warn:#B45309; --warn-bg:#FFF4DB; --bad:#E11D48; --bad-bg:#FFE4EA;
  --chip:#EEF0FB; --mark:#FFE97A;
  --display:"Fredoka","Assistant",system-ui,sans-serif; --body:"Assistant","Segoe UI",Arial,sans-serif;
  --r:18px; --shadow:0 1px 2px rgba(40,40,110,.06),0 8px 24px -12px rgba(60,50,160,.18);
  --cc:var(--brand);
}
/* course colours */
[data-course=AI]{--cc:#7C3AED}[data-course=INV]{--cc:#059669}[data-course=MEAS]{--cc:#EA580C}[data-course=CVM]{--cc:#DB2777}
[data-course=MGMT]{--cc:#0891B2}[data-course=TAX]{--cc:#DC2626}[data-course=GAME]{--cc:#65A30D}[data-course=ENG]{--cc:#4F46E5}

*{box-sizing:border-box}
html{direction:rtl;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.6;font-variant-numeric:tabular-nums;
  background:radial-gradient(1200px 600px at 100% -10%,#E9E5FF 0,transparent 60%),radial-gradient(900px 500px at -10% 10%,#FFE7F3 0,transparent 55%),var(--bg);background-attachment:fixed}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:3px solid #A5B4FC;outline-offset:2px;border-radius:8px}

/* ---------- top bar ---------- */
header.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:10px 22px;height:62px;
  background:rgba(255,255,255,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
header.top .brand{font-family:var(--display);font-weight:700;font-size:23px;white-space:nowrap;display:flex;align-items:center;gap:9px;color:var(--ink)}
header.top .brand:hover{text-decoration:none}
header.top .brand i{width:30px;height:30px;border-radius:10px;display:inline-block;background:conic-gradient(from 200deg,#4F46E5,#EC4899,#F59E0B,#10B981,#4F46E5);
  box-shadow:0 4px 12px -2px rgba(79,70,229,.45);animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
header.top .today{font-size:14px;color:var(--muted);white-space:nowrap}
header.top form{flex:1;max-width:440px;margin-right:auto}
header.top input[type=search]{width:100%;padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:var(--bg);font-size:15px}
.menu-btn{display:none;background:none;border:0;font-size:24px;color:var(--ink);cursor:pointer;padding:4px}
.who{display:flex;align-items:center;gap:8px;font-weight:600}
.who b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--display);background:linear-gradient(135deg,#4F46E5,#EC4899)}

/* ---------- side nav ---------- */
.layout{display:flex;min-height:calc(100vh - 62px)}
nav.side{width:236px;flex-shrink:0;padding:16px 12px 30px;position:sticky;top:62px;height:calc(100vh - 62px);overflow:auto}
nav.side a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;color:var(--ink);font-size:15.5px;font-weight:500;transition:background .15s,transform .15s}
nav.side a:hover{background:rgba(255,255,255,.8);text-decoration:none;transform:translateX(-3px)}
nav.side a.on{background:var(--card);box-shadow:var(--shadow);color:var(--brand);font-weight:700}
nav.side a[data-course]::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--cc);flex-shrink:0}
nav.side .sec{font-family:var(--display);font-size:13.5px;color:var(--muted);margin:18px 12px 6px;font-weight:600}

main{flex:1;padding:26px 34px 100px;max-width:1100px;min-width:0}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);color:var(--ink);line-height:1.2;font-weight:600}
h1{font-size:32px;margin:0 0 16px}
h2{font-size:22px;margin:32px 0 12px}
h3{font-size:17.5px;margin:16px 0 8px}
.muted{color:var(--muted)}.small{font-size:14px}
.lead{font-size:17.5px;margin:-6px 0 0;max-width:62ch}
mark{background:var(--mark);color:inherit;padding:0 3px;border-radius:4px}

/* ---------- hero (home) ---------- */
.hero{position:relative;overflow:hidden;border-radius:26px;padding:28px 30px;margin-bottom:22px;color:#fff;
  background:linear-gradient(120deg,#4F46E5 0%,#7C3AED 45%,#EC4899 100%);box-shadow:0 18px 40px -18px rgba(124,58,237,.6)}
.hero h1{color:#fff;font-size:34px;margin-bottom:8px}
.hero .lead{color:rgba(255,255,255,.92)}
.hero .lead b{color:#fff}
.hero .blob{position:absolute;border-radius:50%;filter:blur(8px);opacity:.28;pointer-events:none;animation:float 9s ease-in-out infinite}
.hero .blob.a{width:220px;height:220px;background:#F59E0B;left:-90px;top:-110px}
.hero>*:not(.blob){position:relative;z-index:1}
.hero .blob.b{width:160px;height:160px;background:#22D3EE;left:22%;bottom:-90px;animation-delay:-3s}
.hero .blob.c{width:90px;height:90px;background:#fff;left:40%;top:-30px;opacity:.18;animation-delay:-6s}
@keyframes float{50%{transform:translate(18px,14px) scale(1.06)}}
.stats{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;position:relative}
.stat{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);border-radius:16px;padding:10px 16px;min-width:120px;color:#fff}
.stat:hover{text-decoration:none;background:rgba(255,255,255,.24)}
.stat b{display:block;font-family:var(--display);font-size:30px;line-height:1.1}
.stat span{font-size:13.5px;opacity:.92}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px;align-items:start}
.grid>.card{margin-bottom:0}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.card.st-ok,.card.st-warn,.card.st-bad{border-color:transparent}

/* ---------- tables → colourful rows ---------- */
table{border-collapse:separate;border-spacing:0 8px;width:100%}
th{font-size:13px;color:var(--muted);font-weight:600;text-align:right;padding:0 12px}
td{padding:12px;text-align:right;vertical-align:top;background:var(--card)}
.card>table{margin:-8px 0}
.card:has(>table){background:transparent;border:0;box-shadow:none;padding:0}
tr[data-course] td,.card>table td{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.card>table tr td:first-child{border-right:5px solid var(--cc);border-radius:0 14px 14px 0}
.card>table tr td:last-child{border-left:1px solid var(--line);border-radius:14px 0 0 14px}
.card>table tr:has(td){box-shadow:var(--shadow);border-radius:14px;transition:transform .18s}
.card>table tr:has(td):hover{transform:translateY(-2px)}
td b:first-child{font-family:var(--display);font-weight:600}
td.small{white-space:nowrap}

/* ---------- chips ---------- */
.chip{white-space:nowrap;display:inline-block;background:var(--chip);border-radius:999px;padding:2px 11px;font-size:13px;margin:2px 0;line-height:1.6;color:var(--ink);font-weight:600}
.st-ok{background:var(--ok-bg);color:var(--ok)}
.st-warn{background:var(--warn-bg);color:var(--warn)}
.st-bad{background:var(--bad);color:#fff;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(225,29,72,.45)}50%{box-shadow:0 0 0 7px rgba(225,29,72,0)}}
.course-tag{display:inline-block;font-weight:700;color:var(--cc);font-size:14px}

/* ---------- buttons & forms ---------- */
.btn{display:inline-block;background:linear-gradient(135deg,#4F46E5,#7C3AED);color:#fff;border:0;border-radius:12px;padding:9px 18px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;line-height:1.4;
  box-shadow:0 6px 16px -8px rgba(79,70,229,.7);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(79,70,229,.8);text-decoration:none}
.btn:active{transform:translateY(0) scale(.97)}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px #A5B4FC}
.btn.sm{padding:5px 12px;font-size:13.5px;border-radius:10px}
input,select,textarea{font-family:inherit;font-size:15.5px;padding:9px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:#818CF8;box-shadow:0 0 0 4px #E0E7FF}
textarea{width:100%;min-height:90px}
td select{font-size:13.5px;padding:5px 8px;border-radius:999px;font-weight:600}
.flash{background:var(--warn-bg);color:var(--warn);padding:11px 16px;border-radius:14px;margin-bottom:14px;font-weight:600}

/* ---------- content ---------- */
.list>li{margin-bottom:6px}
.md{line-height:1.85}
.md h2{color:var(--brand)}
.md table{border-collapse:collapse;margin:12px 0}.md th{background:var(--chip);color:var(--ink);padding:8px}.md td,.md th{border:1px solid var(--line)}
.md pre{background:#F3F4FF;padding:12px;border-radius:12px;overflow:auto;direction:ltr;text-align:left}
.md blockquote{margin:12px 0;padding:10px 16px;border-right:5px solid var(--brand-3);background:#FFF8E6;border-radius:12px}
.formula{direction:ltr;text-align:center;background:linear-gradient(135deg,#EEF2FF,#FDF2F8);border-radius:14px;padding:12px;margin:8px 0;font-family:"Cambria Math",Cambria,serif;font-size:18px}
.chip.pdf{background:var(--bad-bg);color:var(--bad);margin-right:6px}
.chip.pdf:hover{text-decoration:none;filter:brightness(.96)}
.pdfview{margin:0 0 14px}.pdfview summary{color:var(--brand);font-weight:600;margin-bottom:8px;cursor:pointer}
.pdfview iframe{width:100%;height:80vh;border:1px solid var(--line);border-radius:14px;background:#fff}

/* quiz */
.q{margin-bottom:18px}
.q label{display:block;padding:11px 14px;border:1.5px solid var(--line);border-radius:14px;margin:7px 0;cursor:pointer;background:var(--card);transition:all .15s}
.q label:hover{border-color:#A5B4FC;transform:translateX(-3px)}
.q label:has(input:checked){border-color:var(--brand);background:#EEF2FF}
.res-ok{border-right:6px solid var(--ok)}.res-bad{border-right:6px solid var(--bad)}

/* flashcards */
.fc{min-height:250px;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--display);font-size:23px;cursor:pointer;padding:34px;white-space:pre-line;
  border-radius:20px;color:#fff;background:linear-gradient(135deg,#4F46E5,#7C3AED 55%,#DB2777);box-shadow:0 18px 36px -18px rgba(124,58,237,.7);margin:10px 0 14px}
.fc.back{background:linear-gradient(135deg,#059669,#0891B2)}
.fc.turn{animation:turn .32s ease-in-out}
@keyframes turn{50%{transform:perspective(800px) rotateY(90deg)}}

.progress{height:10px;background:var(--chip);border-radius:999px;overflow:hidden}
.progress>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#4F46E5,#EC4899,#F59E0B);transition:width .5s cubic-bezier(.2,.8,.2,1)}

/* calendar / agenda */
.day{margin-bottom:14px}.day h3{margin:0 0 10px;font-size:17px}
.ev{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:1px;padding:10px 12px;margin-bottom:8px;border-radius:14px;background:#F8F9FF;border-right:5px solid var(--cc);align-items:baseline}
.ev>*{grid-column:2;justify-self:start}
.ev>.t{grid-column:1;grid-row:1 / span 4;font-family:var(--display);font-weight:700;color:var(--cc);direction:ltr}
.ev b{font-weight:700}
.ev.due{background:#FFF1F4;border-right-color:var(--bad)}.ev.due>.t{color:var(--bad)}

.kpi{font-family:var(--display);font-size:46px;font-weight:700;line-height:1;background:linear-gradient(135deg,#4F46E5,#EC4899);-webkit-background-clip:text;background-clip:text;color:transparent;margin:6px 0}
details summary{cursor:pointer}

/* ---------- entrance animation (once per page) ---------- */
main>*{animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
main>*:nth-child(2){animation-delay:.05s}main>*:nth-child(3){animation-delay:.1s}main>*:nth-child(4){animation-delay:.15s}
main>*:nth-child(5){animation-delay:.2s}main>*:nth-child(6){animation-delay:.25s}main>*:nth-child(n+7){animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}

/* confetti canvas */
#confetti{position:fixed;inset:0;pointer-events:none;z-index:100}

/* ---------- mobile ---------- */
.tabbar{display:none}
@media (max-width:820px){
  header.top{padding:8px 14px;gap:10px;height:58px}
  header.top .today,.hide-m{display:none}
  header.top form{max-width:none}
  header.top .brand span{display:none}
  .menu-btn{display:block}
  nav.side{position:fixed;right:-270px;top:58px;height:calc(100vh - 58px);z-index:40;transition:right .25s;background:var(--card);box-shadow:-10px 0 30px rgba(40,40,110,.18);border-radius:22px 0 0 22px}
  nav.side.open{right:0}
  main{padding:16px 14px 100px}
  .hero{padding:22px 20px;border-radius:22px}.hero h1{font-size:28px}.hero .lead{font-size:16px}.hero .blob.a{left:-140px;top:-140px}
  .stat{min-width:0;flex:1}
  .grid{grid-template-columns:1fr}
  table,tbody,tr,td{display:block;width:100%}
  tr:first-child:has(th){display:none}
  .card>table tr:has(td){margin-bottom:10px;background:var(--card);border:1px solid var(--line);border-right:5px solid var(--cc);border-radius:16px;padding:12px 14px}
  .card>table tr td,.card>table tr td:first-child,.card>table tr td:last-child{border:0;border-radius:0;padding:2px 0;background:transparent}
  td:nth-child(n+3){display:inline-block;width:auto;vertical-align:middle;margin:8px 0 0 8px}
  td.small br{display:none}
  td.small{white-space:normal}td.small .chip{margin-right:6px}
  .tabbar{display:flex;position:fixed;bottom:10px;left:10px;right:10px;z-index:35;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:1px solid var(--line);border-radius:22px;padding:6px 4px calc(6px + env(safe-area-inset-bottom)/2);box-shadow:0 10px 30px -10px rgba(40,40,110,.35)}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11.5px;color:var(--muted);padding:5px 0;border-radius:16px;font-weight:600}
  .tabbar a svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .tabbar a.on{color:#fff;background:linear-gradient(135deg,#4F46E5,#7C3AED)}
  .tabbar a:hover{text-decoration:none}
}
@media (prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}}

/* ---------- progress ---------- */
.bars{display:flex;align-items:flex-end;gap:5px;height:130px;margin:8px 0 10px}
.bar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.bar i{display:block;width:100%;min-height:4px;border-radius:8px 8px 3px 3px;background:#DDE1F5;transition:height .6s cubic-bezier(.2,.8,.2,1)}
.bar i.hit{background:linear-gradient(180deg,#F59E0B,#EC4899)}
.bar span{font-size:11px;color:var(--muted)}
.board{list-style:none;margin:0;padding:0}
.board li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;margin-bottom:6px;background:#F8F9FF}
.board li.me{background:linear-gradient(90deg,#EEF2FF,#FDF2F8);box-shadow:inset 0 0 0 1.5px #C7D2FE}
.board .rank{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:700;background:var(--chip)}
.board li:nth-child(1) .rank{background:#FDE68A}.board li:nth-child(2) .rank{background:#E5E7EB}.board li:nth-child(3) .rank{background:#FED7AA}
.board .pts{margin-right:auto;font-family:var(--display);font-weight:700;font-size:20px;color:var(--brand)}
.xp-toast{display:inline-block;background:linear-gradient(135deg,#F59E0B,#EC4899);color:#fff;font-weight:700;border-radius:999px;padding:6px 16px;margin:-4px 0 14px;animation:pop .6s cubic-bezier(.2,1.6,.4,1) both .2s}
@keyframes pop{from{transform:scale(.4);opacity:0}}
/* ---------- lesson topics / "לא הבנתי" ---------- */
.topics{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.topic{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:#F8F9FF}
button.conf{border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:4px 12px;font:inherit;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap}
button.conf:hover{border-color:#FDA4AF;color:var(--bad)}
button.conf.on{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.card.mistake{border-right:6px solid var(--cc)}
/* ---------- focus ring ---------- */
.focus-card{text-align:center}
.ring{position:relative;width:220px;height:220px;margin:6px auto 10px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ring .bg{stroke:#E8EAFB}.ring .fg{stroke:url(#g);stroke:#7C3AED;transition:stroke-dashoffset .5s linear}
.ring .time{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:44px;font-weight:700;color:var(--ink)}
pre.log{direction:ltr;text-align:left;font-size:12px;white-space:pre-wrap;margin:0;max-height:280px;overflow:auto;background:#F8F9FF;padding:10px;border-radius:12px}

/* ---------- organized course page ---------- */
.course-head{border-right:6px solid var(--cc);padding-right:16px}
.card.syllabus{border-top:4px solid var(--cc)}
details.lesson{padding:0;overflow:hidden;border-right:5px solid var(--cc)}
details.lesson>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer}
details.lesson>summary::-webkit-details-marker{display:none}
details.lesson>summary .num{width:34px;height:34px;flex-shrink:0;border-radius:10px;display:grid;place-items:center;font-family:var(--display);font-weight:700;color:#fff;background:var(--cc)}
details.lesson>summary .ttl{flex:1;min-width:0}
details.lesson>summary .tags{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
details.lesson[open]>summary{border-bottom:1px solid var(--line)}
.lesson-body{padding:12px 16px 14px}
details.card>summary{cursor:pointer}
.file{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line)}
.file:last-child{border-bottom:0}
.file form{margin-right:auto}
.ext{flex-shrink:0;min-width:44px;text-align:center;font-size:11px;font-weight:800;border-radius:6px;padding:2px 6px;background:var(--chip);color:var(--muted);letter-spacing:.5px}
.ext.pdf{background:#FFE4EA;color:#BE123C}.ext.xlsx,.ext.xls,.ext.csv{background:#DCFCE7;color:#15803D}
.ext.pptx,.ext.ppt{background:#FFEDD5;color:#C2410C}.ext.docx,.ext.doc{background:#DBEAFE;color:#1D4ED8}
.subhead{font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--ink);margin:12px 0 4px;padding-top:6px}
.subhead:first-child{margin-top:0;padding-top:0}

/* ---------- notifications ---------- */
.bell{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:var(--ink)}
.bell:hover{background:var(--chip);text-decoration:none}
.bell svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.bell b{position:absolute;top:2px;left:2px;min-width:18px;height:18px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;display:grid;place-items:center;padding:0 4px;animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
.notif{display:flex;align-items:center;gap:12px;padding:10px 8px;border-bottom:1px solid var(--line);color:var(--ink);border-radius:10px}
.notif:hover{background:#F8F9FF;text-decoration:none}
.notif.unread{background:#EEF2FF}
.notif .ic{font-size:22px}.notif .tx{flex:1;display:flex;flex-direction:column;min-width:0}.notif .when{white-space:nowrap}
@media (max-width:820px){.bell{margin-right:auto}}

/* ---------- in-app file viewer ---------- */
.viewer-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.viewer-head .nm{flex:1;min-width:0;font-family:var(--display);font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdfpages{display:flex;flex-direction:column;gap:10px;align-items:center}
.pdfpages img{width:100%;max-width:960px;height:auto;background:#fff;border-radius:8px;box-shadow:0 2px 12px rgba(30,30,80,.14);min-height:200px}
/* ---------- back button & navigation ---------- */
.backbtn{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:var(--ink);flex-shrink:0;background:var(--chip)}
.backbtn:hover{text-decoration:none;filter:brightness(.96)}
.backbtn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.crumbs{font-size:13.5px;color:var(--muted);margin:-4px 0 10px}
.crumbs a{color:var(--muted)}
@media (max-width:820px){ header.top .brand i{display:none} }
/* submission vs practice */
.chip.kind-sub{background:#FEE2E2;color:#B91C1C;font-weight:700;animation:none}
.chip.kind-prac{background:#E0F2FE;color:#0369A1;font-weight:700;animation:none}
.rule{color:#B91C1C;margin-top:2px}
.rule.prac{color:#0369A1}
.prac-card{border-inline-start:4px solid #38BDF8}
.ev.prac{border-inline-start-color:#38BDF8}
/* assignment files on tasks */
.tfiles{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tfiles.compact{display:inline-flex;margin:4px 6px 0 0;vertical-align:middle}
.tfile{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:10px;background:var(--chip);color:var(--ink);font-size:13px;font-weight:600;max-width:100%;border:1px solid var(--line)}
.tfile:hover{text-decoration:none;filter:brightness(.96)}
.tfile .ext{font-size:10px;padding:1px 5px}
.tfile.moodle{background:#FFF7ED;color:#C2410C;border-color:#FED7AA}
.ev .tfiles.compact{flex-basis:100%}

/* ===================== UX pass (01.11) ===================== */
/* nothing may push the page wider than the screen */
.row>*{min-width:0}
input,select,textarea{max-width:100%}
select{text-overflow:ellipsis}
.md{overflow-wrap:break-word}
.md pre{max-width:100%;white-space:pre}
.md code{overflow-wrap:anywhere}
.md pre code{overflow-wrap:normal}
.md img{max-width:100%;height:auto}
/* lesson tables stay real tables and scroll sideways if needed (also on phones) */
.md table{display:block;overflow-x:auto;max-width:100%;width:auto;-webkit-overflow-scrolling:touch}
.md thead{display:table-header-group}.md tbody{display:table-row-group}
.md tr,.md tr:first-child{display:table-row;width:auto}
.md td,.md th,.md td:nth-child(n+3){display:table-cell;width:auto;margin:0;vertical-align:top;padding:7px 9px;background:var(--card);font-size:15px}
/* course page: file rows, lock button never squashed */
.file{flex-wrap:wrap}
.file>a,.file>span.muted{flex:1;min-width:0}
.file form button{white-space:nowrap}
/* obligation line: clear but not alarming */
.rule{color:#9F1239;font-weight:600;font-size:13.5px}
.rule.prac{color:#0369A1}
/* collapsible admin warning */
details.warnbox>summary{font-weight:700;list-style:none}
details.warnbox>summary::-webkit-details-marker{display:none}
details.warnbox .chip{white-space:normal}
/* name prompt */
.namebox{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.namebox input{flex:1;min-width:140px}
/* pdf pages keep their shape while loading */
.pdfpages img{min-height:0}
@media (max-width:820px){
  /* comfortable touch targets */
  .btn,.btn.sm{min-height:40px;display:inline-flex;align-items:center;justify-content:center}
  .btn.sm{padding:7px 14px}
  .tfile{min-height:38px;padding:7px 12px 7px 10px}
  td select,select[name=status]{min-height:38px}
  button.conf{min-height:34px}
  .file{padding:9px 0}
  nav.side a{padding:11px 12px}
  /* bottom bar respects the iPhone home indicator */
  .tabbar{bottom:calc(8px + env(safe-area-inset-bottom));padding:6px 4px}
  main{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
  h1{font-size:27px}
  .card{padding:16px}
  .viewer-head .nm{font-size:16px}
}
@media (max-width:380px){
  header.top{gap:6px;padding:8px 10px}
  .tabbar a{font-size:10.5px}
  .stat{padding:8px 10px}.stat b{font-size:26px}
}
/* inputs inside rows keep a usable width */
.row>input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.row>textarea{flex:1 1 180px}
.row>select{flex:0 1 auto}
@media (max-width:820px){.row>select{flex:1 1 160px}.row>.btn{flex:0 0 auto}}
.chip{max-width:100%;overflow-wrap:anywhere}
@media (max-width:820px){
  .file form{flex-basis:100%;margin:2px 0 0;padding-right:54px}
  details.lesson>summary{flex-wrap:wrap;row-gap:6px}
  details.lesson>summary .tags{order:3;flex-basis:100%;justify-content:flex-start;padding-right:46px}
}
.stack{display:flex;flex-direction:column;gap:10px}
.stack>input{width:100%}
.stack>.btn{width:100%;justify-content:center}
.btn .ic,.btn svg.ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-inline-end:6px;vertical-align:-3px}

/* ===================== home (02.11) ===================== */
.hero-home{padding:22px 24px}
.hero-home .hello{font-family:var(--display);font-size:30px;font-weight:700;line-height:1.15}
.hero-home .hero-date{opacity:.85;margin:2px 0 12px}
.focusline{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.95);color:var(--ink);border-radius:16px;padding:11px 14px;box-shadow:0 8px 20px -10px rgba(30,20,90,.5);font-weight:700}
.focusline:hover{text-decoration:none;transform:translateY(-1px)}
.focusline .fi{font-size:22px}.focusline .ft{flex:1;min-width:0;line-height:1.35}.focusline .fw{white-space:nowrap;color:var(--bad);font-size:14px}
.focusline.calm .ft{font-weight:600}
.hero-home .stats{margin-top:14px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;margin:26px 2px 10px}
.sec-h h2{margin:0}.sec-h a{font-size:14px;font-weight:600}
/* classes timeline */
.classes{display:flex;flex-direction:column;gap:8px}
.cls{display:flex;gap:12px;background:var(--card);border:1px solid var(--line);border-right:5px solid var(--cc);border-radius:16px;padding:11px 14px;box-shadow:var(--shadow)}
.cls .ct{display:flex;flex-direction:column;align-items:center;min-width:46px;font-family:var(--display);color:var(--cc)}
.cls .ct b{font-size:18px}.cls .ct span{font-size:12px;color:var(--muted)}
.cls .cb{flex:1;min-width:0}.cls .cn{font-weight:700;color:var(--ink);font-size:16.5px}
.cls.done{opacity:.5;box-shadow:none}
.cls.now{box-shadow:0 0 0 2px var(--cc),var(--shadow)}
.chip.live{background:var(--cc);color:#fff;animation:none;margin-top:4px}
.warn-t{color:var(--warn)}
.popbtn{display:inline-block;margin-top:8px;font-size:13.5px;font-weight:700;padding:6px 12px;border-radius:10px;background:#FEF3C7;color:#92400E}
.popbtn:hover{text-decoration:none;filter:brightness(.97)}
/* deadlines */
.dl-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.dl{background:var(--card);border:1px solid var(--line);border-right:5px solid var(--cc);border-radius:16px;padding:12px 14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:4px}
.dl.hot{border-color:#FDA4AF;border-right-color:var(--bad);background:linear-gradient(0deg,#fff,#FFF1F4)}
.dl-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.dl-t{font-family:var(--display);font-weight:600;font-size:16.5px;line-height:1.35}
.dl-act{margin-top:4px}
.dl.mine{border-right-color:var(--muted)}
.empty-ok{text-align:center;font-weight:700;color:var(--ok)}
.later-line{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin:10px 4px 0}
.later-line a{color:var(--ink);display:inline-flex;align-items:center;gap:5px}
.later-line .dot{width:8px;height:8px;border-radius:50%;background:var(--cc)}
/* study */
.study{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.st-card{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--cc);border-radius:16px;padding:12px 14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:3px;color:var(--ink)}
.st-card b{font-family:var(--display);font-weight:600;line-height:1.35}
.st-card.mist{border-top-color:var(--bad);background:linear-gradient(135deg,#FFF1F4,#fff)}
.st-card.mist:hover{text-decoration:none;transform:translateY(-2px)}
.st-card.prac{border-top-color:#38BDF8}
/* exams */
.exams{display:flex;gap:10px;flex-wrap:wrap}
.exam-chip{display:flex;flex-direction:column;align-items:center;min-width:96px;padding:10px 12px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--ink)}
.exam-chip b{font-family:var(--display);font-size:28px;color:var(--cc);line-height:1}.exam-chip span{font-size:12px;color:var(--muted)}
.exam-chip em{font-style:normal;font-size:12.5px;font-weight:700;text-align:center;margin-top:4px}
.exam-chip:hover{text-decoration:none}
@media (max-width:820px){.hero-home .hello{font-size:25px}.dl-list,.study{grid-template-columns:1fr}.sec-h{margin-top:22px}}

@media (max-width:820px){
  .focusline{display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:2px;align-items:start}
  .focusline .fi{grid-row:1 / span 2}
  .focusline .ft{font-size:15px}
  .focusline .fw{grid-column:2;font-size:13.5px}
}