@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700;900&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap");
:root { --blue:#2E7DBA; --dark:#1F5F8B; --light:#E3F1FB; --line:#B9D7EE; --text:#1A2B3A; --muted:#5C7084; --bg:#F5FAFE; --err:#C0392B; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif; }
a { color:var(--blue); }
.topbar { background:var(--blue); color:#fff; }
.topbar .in { max-width:960px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.topbar a { color:#fff; text-decoration:none; font-weight:700; }
.topbar nav a { font-weight:500; font-size:15px; opacity:.92; margin-left:16px; }
header.page { background:var(--blue); color:#fff; padding:6px 16px 18px; }
header.page .in { max-width:720px; margin:0 auto; }
header.page h1 { margin:0; font-size:22px; }
header.page p { margin:4px 0 0; font-size:14px; opacity:.9; }
footer { text-align:center; color:var(--muted); font-size:13px; padding:28px 16px; }

/* Home */
.hero { background:linear-gradient(180deg,var(--blue),#4A9BD6); color:#fff; padding:40px 16px 56px; }
.hero .in { max-width:960px; margin:0 auto; }
.hero h1 { font-size:30px; line-height:1.25; margin:0 0 10px; }
.hero p { font-size:17px; margin:0 0 22px; max-width:560px; opacity:.95; }
.cta { display:inline-block; background:#fff; color:var(--dark); padding:13px 22px; border-radius:10px; font-weight:700; text-decoration:none; }
.cards { max-width:960px; margin:-28px auto 0; padding:0 16px; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.tile { background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; text-decoration:none; color:inherit; display:block; }
.tile h3 { margin:6px 0 4px; color:var(--dark); font-size:18px; }
.tile p { margin:0; color:var(--muted); font-size:15px; }
.tile .ic { font-size:26px; }
.tile.soon { opacity:.65; pointer-events:none; }
.badge { display:inline-block; font-size:12px; font-weight:700; padding:2px 8px; border-radius:20px; background:var(--light); color:var(--dark); margin-top:10px; }
.how { max-width:960px; margin:32px auto 0; padding:0 16px; }
.how h2 { color:var(--dark); font-size:20px; }
.how ol { padding-left:20px; } .how li { margin:6px 0; }

/* Form */
.steps { display:flex; gap:6px; padding:12px 16px 0; max-width:720px; margin:0 auto; }
.steps span { flex:1; height:6px; border-radius:3px; background:var(--line); }
.steps span.on { background:var(--blue); }
main { max-width:720px; margin:0 auto; padding:12px 16px 40px; }
section.st { display:none; background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 16px; }
section.st.on { display:block; }
h2 { margin:0 0 4px; font-size:18px; color:var(--blue); }
.hint { color:var(--muted); font-size:14px; margin:0 0 14px; }
label { display:block; font-weight:600; font-size:14px; margin:14px 0 4px; }
label small { font-weight:400; color:var(--muted); }
input, select, textarea { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:8px; font:inherit; background:#fff; color:var(--text); }
input:focus, select:focus, textarea:focus { outline:2px solid var(--blue); border-color:var(--blue); }
textarea { min-height:96px; resize:vertical; }
.row { display:flex; gap:10px; } .row > div { flex:1; min-width:0; }
.card { border:1px solid var(--line); background:var(--light); border-radius:10px; padding:4px 12px 12px; margin:12px 0; position:relative; }
.card .del { position:absolute; top:8px; right:8px; background:none; border:none; color:var(--err); font-size:14px; padding:4px; cursor:pointer; }
.add { width:100%; padding:11px; border:2px dashed var(--blue); background:#fff; color:var(--blue); border-radius:8px; font:inherit; font-weight:600; cursor:pointer; }
.nav { display:flex; gap:10px; margin-top:20px; }
.btn { flex:1; padding:13px; border-radius:8px; border:none; font:inherit; font-weight:700; cursor:pointer; }
.primary { background:var(--blue); color:#fff; } .ghost { background:var(--light); color:var(--blue); }
.btn:disabled { opacity:.6; }
.photo { display:flex; gap:14px; align-items:center; }
.photo img { width:90px; height:120px; flex:none; object-fit:cover; border:1px solid var(--line); border-radius:6px; background:var(--light); }
.photo input { min-width:0; }
.check { display:flex; gap:8px; align-items:center; font-weight:400; }
.check input { width:auto; }
.err { color:var(--err); font-size:14px; margin-top:10px; min-height:1em; }
.done { text-align:center; padding:30px 10px; }
.done .id { font-size:28px; font-weight:800; color:var(--blue); letter-spacing:1px; margin:10px 0; }
.hp { position:absolute; left:-9999px; }
@media (max-width:480px) { .topbar nav a:not(.btn-top):not([data-logout]) { display:none; } .hero h1 { font-size:25px; } }

/* ---------- Accounts, profile, quiz, teacher ---------- */
.topbar nav a.btn-top { background:#fff; color:var(--dark); padding:6px 12px; border-radius:8px; opacity:1; }
.wrap { max-width:960px; margin:0 auto; padding:16px 16px 40px; }
.narrow { max-width:440px; }
.panel { background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 16px; margin-bottom:16px; }
.panel h2 { margin-bottom:10px; }
.hello { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.hello h1 { margin:0; font-size:22px; color:var(--dark); }
.muted { color:var(--muted); font-size:14px; }
.link-btn { background:none; border:none; color:var(--blue); font:inherit; font-weight:600; cursor:pointer; padding:0; }
.pill { display:inline-block; font-size:13px; font-weight:700; padding:3px 10px; border-radius:20px; background:var(--light); color:var(--dark); }
.pill.ok { background:#E3F6EA; color:#1E7B45; } .pill.warn { background:#FFF4DC; color:#8A5A00; } .pill.bad { background:#FDE8E6; color:#A33224; }
.qgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.qcard { border:1px solid var(--line); border-radius:12px; padding:14px; background:#fff; display:flex; flex-direction:column; gap:6px; }
.qcard h3 { margin:0; font-size:16px; color:var(--dark); }
.qcard .meta { font-size:13px; color:var(--muted); }
.qcard .btn { flex:none; margin-top:6px; text-decoration:none; text-align:center; }
.tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.tbl { border-collapse:collapse; width:100%; font-size:14px; }
table.tbl th, table.tbl td { border-bottom:1px solid var(--line); padding:9px 8px; text-align:left; white-space:nowrap; }
table.tbl th { background:var(--light); color:var(--dark); font-weight:700; position:sticky; top:0; }
table.tbl td.num, table.tbl th.num { text-align:right; }
table.tbl tr.click { cursor:pointer; } table.tbl tr.click:hover td { background:#F2F8FD; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px; }
.stat { background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px; }
.stat b { display:block; font-size:26px; color:var(--dark); }
.stat span { font-size:13px; color:var(--muted); }
.score { font-weight:700; } .score.ok { color:#1E7B45; } .score.bad { color:#A33224; }
.search { max-width:320px; }
/* quiz runner */
.qbar { position:sticky; top:0; z-index:5; background:var(--bg); padding:10px 0; display:flex; justify-content:space-between; align-items:center; gap:10px; border-bottom:1px solid var(--line); }
.timer { font-variant-numeric:tabular-nums; font-weight:800; color:var(--dark); background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px 10px; }
.timer.low { color:#A33224; border-color:#E8A49B; }
.question { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; margin:14px 0; }
.question .no { font-size:13px; color:var(--muted); font-weight:700; }
.question .text { font-size:18px; margin:6px 0 12px; }
.question img { max-width:100%; border-radius:8px; margin-bottom:10px; }
.opt { display:flex; gap:10px; align-items:center; border:1px solid var(--line); border-radius:10px; padding:12px; margin:8px 0; cursor:pointer; font-weight:500; }
.opt input { width:auto; margin:0; }
.opt.chosen { border-color:var(--blue); background:var(--light); }
.opt.right { border-color:#2E9B5A; background:#E3F6EA; } .opt.wrong { border-color:#D0584A; background:#FDE8E6; }
.explain { font-size:14px; background:var(--bg); border-radius:8px; padding:10px; margin-top:8px; }
.result-head { text-align:center; padding:20px 10px; }
.result-head .big { font-size:48px; font-weight:800; color:var(--dark); line-height:1.1; }
.detail { border-top:2px solid var(--line); margin-top:14px; padding-top:14px; }

/* ---------- v3: language switch, programs, material, feedback, chat ---------- */
.topbar nav { display:flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
select.lang { width:auto; padding:4px 6px; margin-left:12px; border-radius:6px; border:none; font-size:13px; background:#fff; color:var(--dark); }
.h1 { margin:0 0 4px; font-size:22px; color:var(--dark); }
.linkbtn { display:inline-block; text-decoration:none; text-align:center; padding:11px 16px; }
.linkbtn.disabled { opacity:.7; cursor:default; }
.actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.actions .btn { flex:none; }
.tile.done { opacity:.6; filter:grayscale(1); cursor:not-allowed; }
h3.grp { margin:16px 0 8px; font-size:15px; color:var(--muted); }
.qcard .linkbtn { margin-top:6px; }
.qcard.lockedc { background:#FAFCFE; }
.lockbox { margin-top:12px; padding:12px; border-radius:10px; background:#FFF4DC; color:#6B4700; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.mlist { padding-left:22px; margin:0; } .mlist li { margin:8px 0; }
.rich h3 { color:var(--dark); font-size:16px; margin:16px 0 6px; } .rich p { margin:8px 0; } .rich ul { padding-left:20px; }
.video { position:relative; padding-top:56.25%; margin:10px 0; } .video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:8px; }
details summary { cursor:pointer; }
.sectitle { font-weight:800; color:var(--dark); margin-top:12px; }
.audio { margin-bottom:10px; } .audio audio { width:100%; }
.feedback { border-top:1px solid var(--line); margin-top:12px; padding-top:6px; }
.feedback h3 { font-size:15px; color:var(--dark); margin:14px 0 6px; }
.secres { list-style:none; padding:0; } .secres li { padding:4px 0; } .secres li.ok { color:#1E7B45; } .secres li.bad { color:#A33224; }
.err.pad, .muted.pad, p.pad { padding:12px; }
/* chat */
.notice { background:#FFF4DC; color:#6B4700; font-size:13px; text-align:center; padding:6px 12px; }
.chatwrap { max-width:1000px; margin:0 auto; display:grid; grid-template-columns:300px 1fr; height:calc(100vh - 92px); min-height:420px; border-left:1px solid var(--line); border-right:1px solid var(--line); background:#fff; }
.clist { border-right:1px solid var(--line); overflow-y:auto; }
.cbtns { display:flex; gap:6px; padding:10px; } .cbtns .btn { padding:9px; font-size:14px; }
.citem { display:block; width:100%; text-align:left; background:none; border:none; border-bottom:1px solid var(--line); padding:10px 12px; font:inherit; cursor:pointer; }
.citem span, .citem small { display:block; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.citem.on, .citem:hover { background:var(--light); }
.picker { padding:0 10px 10px; border-bottom:1px solid var(--line); } .picker input { margin-bottom:6px; }
.people { max-height:240px; overflow-y:auto; }
.person { display:flex; gap:6px; align-items:center; width:100%; text-align:left; background:none; border:none; padding:7px 4px; font:inherit; font-weight:500; cursor:pointer; margin:0; }
.person:hover { background:var(--bg); } .person input { width:auto; }
.conv { display:flex; flex-direction:column; min-width:0; }
.chead { padding:10px 14px; border-bottom:1px solid var(--line); display:flex; gap:10px; align-items:center; min-height:54px; }
.backbtn { display:none; font-size:20px; }
.msgs { flex:1; overflow-y:auto; padding:12px; background:var(--bg); }
.msg { margin:8px 0; max-width:78%; } .msg.mine { margin-left:auto; text-align:right; }
.msg .who { font-size:12px; color:var(--muted); font-weight:700; }
.msg .bubble { display:inline-block; text-align:left; background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px 12px; white-space:pre-wrap; word-break:break-word; }
.msg.mine .bubble { background:var(--blue); color:#fff; border-color:var(--blue); }
.msg .when { font-size:11px; color:var(--muted); }
.composer { display:flex; gap:8px; padding:10px; border-top:1px solid var(--line); } .composer .btn { flex:none; padding:10px 16px; }
@media (max-width:720px) {
  .chatwrap { grid-template-columns:1fr; height:calc(100vh - 110px); }
  .chatwrap .conv { display:none; } .chatwrap.open .conv { display:flex; } .chatwrap.open .clist { display:none; }
  .backbtn { display:inline-block; }
}
.qcard > .pill { align-self:flex-start; }
.citem span.pill { display:inline-block; margin-left:4px; }

/* ---------- v4: lessons with audio & speaking, listening tests, teacher tabs ---------- */
.question .text { white-space:pre-line; }
.ex { display:flex; gap:10px; align-items:flex-start; padding:8px 10px; border:1px solid var(--line); border-radius:10px; margin:8px 0; background:#fff; }
.ex .jp, .say .jp, .jpcell, .rec-item .jp { font-size:18px; font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif; }
.ex .ro, .say .ro, .voc .ro { color:var(--muted); font-size:13px; } .ex .ar { font-size:14px; }
.play { flex:none; border:1px solid var(--line); background:var(--light); border-radius:50%; width:38px; height:38px; font-size:16px; cursor:pointer; }
.say .play { width:auto; height:auto; border-radius:8px; }
.voc { display:flex; gap:10px; align-items:center; padding:6px 4px; border-bottom:1px dashed var(--line); flex-wrap:wrap; }
.voc .jp { font-size:17px; min-width:70px; } .voc .ar { flex:1; min-width:120px; font-size:14px; }
.say { border:1px solid var(--blue); border-radius:12px; padding:10px 12px; margin:10px 0; background:#F7FBFE; }
.sayctl { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; } .sayctl .btn { flex:none; padding:9px 12px; font-size:14px; }
.sayres { margin-top:8px; font-size:14px; } .sayres audio { vertical-align:middle; max-width:100%; }
.ttswarn { background:#FFF4DC; color:#6B4700; padding:8px 10px; border-radius:8px; font-size:13px; }
.ttsbox { margin-bottom:10px; } .ttsbox .btn { flex:none; }
details.script { margin-top:8px; font-size:14px; } details.script .btn { margin-top:6px; padding:8px 12px; }
.tabs { display:flex; gap:6px; margin-bottom:12px; } .tab { border:1px solid var(--line); background:#fff; border-radius:8px; padding:9px 14px; font:inherit; font-weight:600; cursor:pointer; color:var(--dark); }
.tab.on { background:var(--blue); color:#fff; border-color:var(--blue); }
.rec-item { border-bottom:1px solid var(--line); padding:12px 0; } .rec-item audio { vertical-align:middle; }
/* v5: lesson check, speaking test items */
.check { border-top:2px solid var(--line); margin-top:20px; padding-top:8px; }
.check h3 { color:var(--dark); font-size:16px; margin:14px 0 6px; }
.lqi { border:1px solid var(--line); border-radius:10px; padding:10px; margin:10px 0; background:#fff; }
.lqi .play { vertical-align:middle; }
.saybox .text.jp { font-size:20px; margin:10px 0; }


/* ===== Bahasa Kita theme (Oren): cream ground, brown ink, tabby orange, paw prints ===== */
:root{
  --blue:#B4570F; --dark:#3B2410; --light:#FDE7CF; --line:#EBD9C3; --text:#3B2410; --muted:#7D6048; --bg:#FFF6EA; --err:#C2452D;
  --accent:#E8822A; --accent-ink:#2A1608; --stripe:#C9651C; --surface:#FFFFFF; --good:#2E8452; --good-soft:#E3F3E8; --bad:#C2452D; --bad-soft:#FBE4DD;
  --display:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans",system-ui,sans-serif;
  --body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
  color-scheme:light;
}
body{font-family:var(--body);line-height:1.7;-webkit-font-smoothing:antialiased;background-color:var(--bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='%23E8822A' fill-opacity='.07'%3E%3Cellipse cx='30' cy='40' rx='9' ry='7.5'/%3E%3Ccircle cx='20' cy='29' r='4'/%3E%3Ccircle cx='30' cy='24' r='4'/%3E%3Ccircle cx='40' cy='29' r='4'/%3E%3Cg transform='rotate(25 100 100)'%3E%3Cellipse cx='100' cy='106' rx='9' ry='7.5'/%3E%3Ccircle cx='90' cy='95' r='4'/%3E%3Ccircle cx='100' cy='90' r='4'/%3E%3Ccircle cx='110' cy='95' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
h1,h2,h3,.h1,.big,.stat b,.done .id,.result-head .big,.timer,.sectitle{font-family:var(--display)}
h1,h2,h3{text-wrap:balance}
a{color:var(--blue)}
::selection{background:var(--light)}
/* top bar: white, sticky, brand with Oren */
.topbar{background:var(--surface);color:var(--text);border-bottom:1px solid var(--line)}
.topbar .in{padding:10px 16px}
.topbar a{color:var(--text)}
.topbar a[data-org]{font-family:var(--display);font-weight:900;font-size:1.15rem;letter-spacing:.02em;display:inline-flex;align-items:center;gap:8px}
.topbar nav a{color:var(--muted);font-weight:500;opacity:1;border-radius:999px;padding:6px 10px;margin-left:4px;transition:background .15s,color .15s}
.topbar nav a:hover{background:var(--light);color:var(--text)}
.topbar nav a.btn-top{background:var(--text);color:var(--bg);padding:7px 14px;font-weight:700}
.topbar nav a.btn-top:hover{background:var(--blue);color:#fff}
select.lang{border:1px solid var(--line);border-radius:999px;padding:6px 10px;background:var(--surface);color:var(--text);font-weight:700;margin-left:8px;cursor:pointer}
/* page header band */
header.page{background:transparent;color:var(--text);padding:22px 16px 8px}
header.page h1{font-size:clamp(1.4rem,4vw,1.8rem)}
header.page p{color:var(--muted);opacity:1;font-size:15px}
.eyebrow,.h1+.muted{letter-spacing:.02em}
/* home hero: cream, big round title, Oren on the right */
.hero{background:transparent;color:var(--text);padding:44px 16px 64px}
.hero h1{font-size:clamp(1.8rem,5vw,2.5rem);line-height:1.3;font-weight:900}
.hero p{color:var(--muted);opacity:1;font-size:17px;line-height:1.9}
.cta{background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:14px 26px;box-shadow:0 4px 0 var(--stripe);transition:transform .12s,box-shadow .12s,filter .15s}
.cta:hover{filter:brightness(1.07)}
.cta:active{transform:translateY(3px);box-shadow:0 1px 0 var(--stripe)}
.cards{margin-top:0}
.tile{border-radius:20px;border:1.5px solid var(--line);border-top:3px solid var(--accent);box-shadow:0 4px 0 var(--light);transition:transform .15s,box-shadow .15s,border-color .15s}
a.tile:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 8px 0 var(--light);border-color:var(--accent)}
.tile h3{color:var(--text)}
.tile .ic{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--light);font-size:24px;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
a.tile:hover .ic{transform:rotate(-12deg) scale(1.12)}
.badge{background:var(--light);color:var(--blue);border-radius:999px;padding:3px 10px}
.how{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px 22px;margin-top:32px;max-width:928px}
.how h2{color:var(--text)}
.how ol{counter-reset:s;list-style:none;padding:0}
.how li{counter-increment:s;position:relative;padding-left:42px;margin:12px 0}
.how li::before{content:counter(s);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-family:var(--display);font-weight:900;display:grid;place-items:center}
footer{color:var(--muted)}
/* panels, cards */
.panel,section.st,.question,.qcard,.stat,.lqi,.ex,.chatwrap{border-radius:20px}
.panel,section.st,.question{border:1px solid var(--line);box-shadow:0 4px 0 var(--light)}
h2{color:var(--text)}
.panel h2::before,section.st h2::before{content:"";display:inline-block;width:.9em;height:.9em;margin-right:.4em;vertical-align:-.08em;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16' rx='5.5' ry='4.5'/%3E%3Ccircle cx='5.5' cy='10' r='2.4'/%3E%3Ccircle cx='9.5' cy='5.8' r='2.4'/%3E%3Ccircle cx='14.5' cy='5.8' r='2.4'/%3E%3Ccircle cx='18.5' cy='10' r='2.4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16' rx='5.5' ry='4.5'/%3E%3Ccircle cx='5.5' cy='10' r='2.4'/%3E%3Ccircle cx='9.5' cy='5.8' r='2.4'/%3E%3Ccircle cx='14.5' cy='5.8' r='2.4'/%3E%3Ccircle cx='18.5' cy='10' r='2.4'/%3E%3C/svg%3E") center/contain no-repeat}
.hello h1,.h1,.qcard h3,.tile h3,.rich h3,.check h3,.feedback h3,.sectitle,.stat b,.result-head .big,.done .id{color:var(--text)}
.card{background:var(--bg);border-radius:16px}
.qcard{border:1.5px solid var(--line);transition:transform .15s,border-color .15s,box-shadow .15s}
.qcard:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 4px 0 var(--light)}
.qcard.lockedc{background:#FFFBF5}
.stat{border:1.5px solid var(--line);border-top:3px solid var(--accent)}
/* buttons: round pills with a tabby shadow */
.btn{border-radius:999px;transition:transform .12s,box-shadow .12s,filter .15s,background .15s}
.btn:active:not(:disabled){transform:translateY(2px) scale(.98)}
.primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 3px 0 var(--stripe)}
.primary:hover:not(:disabled){filter:brightness(1.07)}
.primary:active:not(:disabled){box-shadow:0 1px 0 var(--stripe)}
.ghost{background:var(--surface);color:var(--text);border:1.5px solid var(--line)}
.ghost:hover:not(:disabled){border-color:var(--accent);background:var(--light)}
.add{border-color:var(--accent);color:var(--blue);border-radius:16px;background:var(--surface)}
.add:hover{background:var(--light)}
.link-btn{color:var(--blue)}
.pill{border-radius:999px;background:var(--light);color:var(--blue)}
.pill.ok{background:var(--good-soft);color:var(--good)} .pill.bad{background:var(--bad-soft);color:var(--bad)} .pill.warn{background:#FCEBD6;color:#8A4A0C}
.score.ok{color:var(--good)} .score.bad{color:var(--bad)}
/* forms */
input,select,textarea{border-radius:12px;background:var(--surface);border:1.5px solid var(--line);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--light)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.steps span{height:8px;border-radius:99px}
.steps span.on{background:repeating-linear-gradient(-45deg,var(--accent) 0 9px,var(--stripe) 9px 13px)}
.photo img{border-radius:12px}
/* tables */
table.tbl th{background:var(--light);color:var(--text)}
table.tbl tr.click:hover td{background:#FFF1E0}
/* quiz */
.qbar{background:rgba(255,246,234,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.timer{border-radius:999px;color:var(--text);border-color:var(--line)}
.opt{border-radius:14px;border-width:1.5px;transition:border-color .15s,background .15s,transform .12s;background:var(--surface)}
.opt:hover{border-color:var(--accent);background:#FFFBF5}
.opt:active{transform:scale(.99)}
.opt.chosen{border-color:var(--accent);background:var(--light)}
.opt input{accent-color:var(--accent);width:18px;height:18px}
.opt.right{border-color:var(--good);background:var(--good-soft)} .opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.explain{background:var(--bg);border-left:3px solid var(--accent);border-radius:0 12px 12px 0}
.result-head{background:var(--surface);border:2px solid var(--accent);border-radius:24px;box-shadow:0 5px 0 var(--light);background-image:radial-gradient(circle at 50% 0%,var(--light),transparent 70%)}
/* lessons */
.play{background:var(--light);border-color:var(--line);transition:transform .15s}
.play:hover{transform:scale(1.08);border-color:var(--accent)}
.say{border:1.5px solid var(--accent);background:#FFFBF5;border-radius:18px}
.ttswarn,.lockbox,.notice{background:#FCEBD6;color:#7A3E08}
.tab{border-radius:999px;color:var(--text)}
.tab.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.mlist li::marker{color:var(--accent)}
/* chat */
.chatwrap{border:1px solid var(--line);overflow:hidden;margin-top:8px}
.citem.on,.citem:hover{background:var(--light)}
.msg .bubble{border-radius:16px}
.msg.mine .bubble{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
/* entrance animation for blocks */
@keyframes bk-pop{from{opacity:0;transform:translateY(12px) scale(.97)}}
.bk-in{animation:bk-pop .45s cubic-bezier(.3,1.4,.5,1) both}
@media (prefers-reduced-motion:reduce){.bk-in,.tile,.qcard,.cta,.btn,.opt{animation:none!important;transition:none!important}}
.eyebrow{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:10px}
.eyebrow::before{content:"";display:inline-block;width:1em;height:1em;margin-right:.4em;vertical-align:-.12em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16' rx='5.5' ry='4.5'/%3E%3Ccircle cx='5.5' cy='10' r='2.4'/%3E%3Ccircle cx='9.5' cy='5.8' r='2.4'/%3E%3Ccircle cx='14.5' cy='5.8' r='2.4'/%3E%3Ccircle cx='18.5' cy='10' r='2.4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16' rx='5.5' ry='4.5'/%3E%3Ccircle cx='5.5' cy='10' r='2.4'/%3E%3Ccircle cx='9.5' cy='5.8' r='2.4'/%3E%3Ccircle cx='14.5' cy='5.8' r='2.4'/%3E%3Ccircle cx='18.5' cy='10' r='2.4'/%3E%3C/svg%3E") center/contain no-repeat}
/* ===== Halaman Saya: kartu Kepsek Oren (v8) ===== */
.ocards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
@media (max-width:760px){.ocards{grid-template-columns:1fr}}
.ocard{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 4px 0 var(--light);min-width:0}
.ocard.hot{border-color:var(--accent)}
.ocat{flex:none;width:84px;height:84px}
@media (max-width:480px){.ocat{width:60px;height:60px}.ocard{gap:12px;padding:14px}}
.obody{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.obody h2{margin:0;font-size:18px;color:var(--text)}
.obody p{margin:0}
.osmall{font-size:13px;color:var(--muted);line-height:1.5}
.big2{font-family:var(--display);font-weight:900;font-size:30px;line-height:1.1;color:var(--blue)}
.big2 small{font-size:15px;color:var(--muted);font-weight:700;margin-left:6px}
.week{display:flex;gap:6px;flex-wrap:wrap}
.wd{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--muted);min-width:30px}
.wd svg{width:26px;height:26px;color:var(--line)}
.wd.on svg{color:var(--accent)}
.wd.today span{font-weight:700;color:var(--text)}
.olist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.olist a{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1.5px solid var(--line);border-radius:14px;text-decoration:none;color:var(--text);background:#FFFBF5;transition:border-color .15s,background .15s,transform .12s}
.olist a:hover{border-color:var(--accent);background:var(--light)}
.olist a:active{transform:scale(.99)}
.olist .ic{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--light);font-size:18px}
.olist b{display:block;font-weight:700;line-height:1.3}
.olist small{color:var(--muted);font-size:12.5px}
.olist .go{margin-left:auto;color:var(--accent);font-weight:900}
.mbar{height:10px;border-radius:99px;background:var(--line);overflow:hidden}
.mbar i{display:block;height:100%;background:repeating-linear-gradient(-45deg,var(--accent) 0 9px,var(--stripe) 9px 13px);border-radius:99px}
.fcode{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fcode code{font-family:var(--display);font-weight:900;font-size:22px;letter-spacing:.08em;background:var(--light);color:var(--text);padding:4px 12px;border-radius:12px}
.fadd{display:flex;gap:8px}
.fadd input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.05em}
.btn.sm{flex:none;padding:8px 14px;font-size:14px}
.board{display:flex;flex-direction:column;gap:4px}
.fr{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px}
.fr.me{background:var(--light)}
.fr .rk{font-family:var(--display);font-weight:900;color:var(--muted);text-align:center}
.fr .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr .nm em{font-style:normal;font-size:11px;font-weight:700;color:var(--blue);background:#fff;border:1px solid var(--line);border-radius:99px;padding:1px 7px;margin-left:6px}
.fr .sub{font-size:12px;color:var(--muted)}
.fr .pts{text-align:right;font-family:var(--display);font-weight:900;color:var(--blue);white-space:nowrap}
.fr .pts small{display:block;font-family:var(--body);font-weight:500;font-size:11.5px;color:var(--muted)}
.fr .x{border:0;background:none;color:var(--muted);font:inherit;font-size:12px;cursor:pointer;padding:2px 4px;text-decoration:underline}
.tdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--good);margin-left:6px;vertical-align:1px}
.omsg{font-size:13px;min-height:1.2em;color:var(--muted)}
.omsg.err{color:var(--err)}
.fr .nm,.fr .sub{display:block}
.fadd input::placeholder{text-transform:none;letter-spacing:0}
/* v9: the lesson "Cek Pelajaran" section is a block, not the checkbox-label row (both use class "check") */
div.check{display:block}
/* v9: nothing may push the page wider than the phone */
html,body{max-width:100%;overflow-x:hidden}
img,video,iframe,table{max-width:100%}
.rich,.question .text,.ex,.say,.voc,.explain,.msg .bubble{overflow-wrap:anywhere}
/* v9: Oren smaller on phones and see-through while scrolling, so he never covers buttons */
@media (max-width:560px){.oren .oren-cat{width:56px;height:56px}.oren .oren-bub{font-size:13px;max-width:min(230px,calc(100vw - 80px))}}
.oren{transition:opacity .25s}
.oren.oren-scroll{opacity:.25}

/* tombol & kartu login staf TSK */
.topbar nav a.staff-top { font-size:14px; padding:6px 12px; border:1px solid rgba(59,36,16,.25); border-radius:999px; }
.staffbar { max-width:928px; margin:18px auto 0; display:flex; align-items:center; gap:14px; padding:14px 18px; background:#fff; border:1px solid #eadfce; border-left:5px solid #3F78B0;
  border-radius:16px; text-decoration:none; color:inherit; box-shadow:0 2px 10px rgba(59,36,16,.05); box-sizing:border-box; }
.staffbar .ic { font-size:26px; }
.staffbar .tx { flex:1; font-size:14px; line-height:1.5; color:#6b5440; }
.staffbar .tx b { color:#3B2410; font-size:15px; }
.staffbar .go { background:#3F78B0; color:#fff; font-weight:700; border-radius:999px; padding:9px 16px; white-space:nowrap; font-size:14px; }
.staffbar:hover .go { filter:brightness(1.08); }
@media (max-width:960px) { .staffbar { margin:18px 16px 0; } }
@media (max-width:560px) { .staffbar { margin:16px 16px 0; flex-wrap:wrap; } .staffbar .go { width:100%; text-align:center; } .topbar nav a.staff-top { padding:5px 9px; font-size:13px; margin-left:8px; } }