/* SOP Academy — light, professional, phone-first. */
:root{
  --ink:#1c2420; --sub:#5c6b62; --line:#e4eae6; --card:#f7faf8;
  --green:#1e7d43; --green-dark:#166334; --green-soft:#e7f4ec;
  --amber:#b7791f; --amber-soft:#faf3e4; --red:#b3372e; --red-soft:#fbecea;
  --shadow:0 10px 30px rgba(28,36,32,.08);
  --mono:"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:#fff;color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.hidden{display:none!important}
.muted{color:var(--sub)}
button{font:inherit;cursor:pointer;border:0;border-radius:10px}
.primary{background:var(--green);color:#fff;padding:12px 22px;font-weight:700}
.primary:active{background:var(--green-dark)}
.ghost{background:transparent;color:var(--sub);padding:10px 14px;font-weight:600}
.ghost:hover{color:var(--ink)}
.chip{background:var(--green-soft);color:var(--green);padding:9px 16px;font-weight:700;border-radius:99px}
.err{color:var(--red);font-weight:600;min-height:1.2em;margin:10px 0 0}

/* top bar */
#topbar{display:flex;justify-content:space-between;align-items:center;
  padding:12px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(8px);z-index:5;box-shadow:inset 0 3px 0 var(--green)}
.brand{font-weight:800;letter-spacing:-.01em;display:flex;align-items:center}
.brand-logo{height:34px;width:auto;margin-right:10px}
.login-brand{height:72px;width:auto}
.brand-mark{background:var(--green);color:#fff;border-radius:8px;padding:2px 8px;margin-right:6px}
.brand-co{color:var(--sub);font-weight:600;font-size:13px;margin-left:6px}
.top-right{display:flex;align-items:center;gap:8px}
#who{width:32px;height:32px;border-radius:50%;background:var(--green-soft);color:var(--green);
  font-size:12px;font-weight:800;display:grid;place-items:center;flex:none;cursor:default}
#btn-admin{border:1px solid var(--line);border-radius:99px;padding:7px 16px;color:var(--ink);font-weight:700}
#btn-admin:hover{border-color:var(--green);color:var(--green)}
@media (max-width:600px){.brand-co{display:none}}

main{max-width:860px;margin:0 auto;padding:24px 18px 90px}

/* login */
#view-login{display:flex;justify-content:center;padding-top:7vh}
.login-card{width:min(400px,100%);border:1px solid var(--line);border-radius:18px;
  padding:34px 30px;box-shadow:var(--shadow);text-align:center;background:#fff}
.login-logo{font-size:44px}
.login-card h1{margin:6px 0 6px;font-size:26px}
.login-card form{text-align:left;margin-top:18px}
.login-card label{display:block;font-weight:700;font-size:13.5px;margin:14px 0 4px;color:var(--sub)}
.login-card input{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;font:inherit}
.login-card input:focus{outline:2px solid var(--green);border-color:var(--green)}
.login-card .primary{width:100%;margin-top:20px}

/* ── home: hero + stats ─────────────────────────────────────────────── */
.eyebrow{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);
  font-weight:800;margin:0 0 6px}
.hero{padding:26px 0 6px}
.hero h2{font-size:clamp(26px,4.5vw,34px);margin:0 0 6px;letter-spacing:-.02em;line-height:1.12}
.hero .muted{margin:0;font-size:15.5px;max-width:56ch}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0 6px}
.stat{border:1px solid var(--line);border-radius:14px;background:#fff;padding:12px 20px;
  box-shadow:0 2px 8px rgba(28,36,32,.04)}
.stat b{display:block;font-size:26px;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.15}
.stat.zero b{color:var(--sub)}
.stat.done b{color:var(--green)}
@media (max-width:480px){.stats{gap:8px}.stat{padding:10px 12px}.stat b{font-size:21px}.stat span{font-size:10px}}
.stat b i{font-style:normal;font-size:15px;color:var(--sub);font-weight:700}
.stat span{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--sub)}
.section-label{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);
  font-weight:800;margin:34px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}

/* ── course cards ───────────────────────────────────────────────────── */
.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.mod-card{border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 2px 10px rgba(28,36,32,.05);
  transition:box-shadow .25s ease,transform .25s ease}
.mod-card:hover{box-shadow:0 14px 34px rgba(28,36,32,.12);transform:translateY(-2px)}
.cover{height:128px;position:relative;flex:none}
.shotcover img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;display:block;
  filter:saturate(.85) contrast(.95)}
.shotcover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,36,32,0) 55%,rgba(28,36,32,.28))}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;
  border-radius:50%;background:rgba(255,255,255,.94);color:var(--green);display:grid;place-items:center;
  font-size:17px;padding-left:4px;box-shadow:0 6px 18px rgba(28,36,32,.3);z-index:2}
.cover-tag{position:absolute;left:10px;bottom:8px;z-index:2;font-size:10.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(28,36,32,.55);
  padding:3px 9px;border-radius:99px}
.cover.tint{display:grid;place-items:center;background:
  radial-gradient(circle at 82% 18%,rgba(30,125,67,.16),transparent 55%),var(--green-soft)}
.cover.tint .play{left:auto;right:12px;top:auto;bottom:10px;transform:none;width:36px;height:36px;font-size:13px}
.cover-emoji{font-size:46px;filter:drop-shadow(0 4px 8px rgba(28,36,32,.15))}
.tint-warehouse{background:radial-gradient(circle at 82% 18%,rgba(183,121,31,.18),transparent 55%),#faf3e4}
.tint-accounts{background:radial-gradient(circle at 82% 18%,rgba(92,107,98,.16),transparent 55%),#eef1ef}
.tint-admin{background:radial-gradient(circle at 82% 18%,rgba(30,125,67,.1),transparent 55%),#f2f6f3}
.mod-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.mod-name{font-weight:800;font-size:17px;letter-spacing:-.01em;line-height:1.25}
.mod-meta{color:var(--sub);font-size:13px}
.mod-badges{display:flex;gap:6px;flex-wrap:wrap}
.badge{font-size:11px;font-weight:800;padding:3px 10px;border-radius:99px;letter-spacing:.02em}
.b-green{background:var(--green-soft);color:var(--green)}
.b-amber{background:var(--amber-soft);color:var(--amber)}
.b-grey{background:#eef1ef;color:#6b7570}
.b-red{background:var(--red-soft);color:var(--red)}
.mod-track{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:2px}
.mod-fill{height:100%;background:linear-gradient(90deg,var(--green),#2a9c58);border-radius:99px}
.mod-pct{font-size:12px;font-weight:700;color:var(--sub)}
.mod-actions{display:flex;gap:8px;margin-top:auto;padding-top:6px}
.mod-actions .primary{padding:10px 18px;font-size:14px;border-radius:11px;flex:1}
.mod-actions .chip{font-size:13px}
/* featured — the person's own course, full width */
.mod-card.featured{flex-direction:row;min-height:180px}
.mod-card.featured .cover{width:42%;max-width:390px;height:auto}
.mod-card.featured .mod-body{justify-content:center}
.mod-card.featured .mod-name{font-size:21px}
.mod-card.featured .mod-actions{margin-top:10px}
.mod-card.featured .mod-actions .primary{flex:0 1 auto;padding:11px 26px}
.mod-card.featured .cover-emoji{font-size:76px}
.mod-card{cursor:pointer}
@media (max-width:640px){.mod-card.featured{flex-direction:column}.mod-card.featured .cover{width:100%;height:150px;max-width:none}}
.site-foot{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);color:#8a948e;
  font-size:12px;text-align:center}
/* the admin's team summary */
.team-card{border:1px solid var(--line);border-left:5px solid var(--green);border-radius:16px;
  background:#fff;box-shadow:0 2px 10px rgba(28,36,32,.05);padding:18px 22px;margin:6px 0 10px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.team-line b{font-size:17px}
.team-nums{color:var(--sub);font-size:14px;margin-top:2px}
.team-card .primary{padding:10px 20px;font-size:14px}
/* other departments — a quiet list for workers */
.dept-list{border:1px solid var(--line);border-radius:14px;background:#fff;margin-top:26px;overflow:hidden}
.dept-list summary{cursor:pointer;list-style:none;padding:14px 18px;font-weight:800;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--sub)}
.dept-list summary::-webkit-details-marker{display:none}
.dept-list summary:after{content:"▾";float:right;color:var(--sub)}
.dept-list[open] summary:after{content:"▴"}
.dept-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;
  border:0;border-top:1px solid var(--line);padding:13px 18px;font:inherit;border-radius:0}
.dept-row:hover{background:var(--card)}
.dept-ico{font-size:20px;flex:none}
.dept-name{font-weight:700;flex:1}
.dept-mins{color:var(--sub);font-size:12.5px;flex:none}
/* quiet passed state + demoted secondary action */
.mod-actions .chip{background:#fff;border:1px solid var(--line);color:var(--sub)}
.mod-actions .chip.quiet{color:var(--green);border-color:var(--green-soft);background:var(--green-soft);flex:1}

/* lesson */
.lesson-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.lesson-title{font-weight:800;font-size:17px;text-align:center}
.lesson-count{color:var(--sub);font-size:13.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.progress-track{height:6px;background:var(--line);border-radius:99px;overflow:hidden;margin-bottom:16px}
.progress-fill{height:100%;width:0;background:var(--green);border-radius:99px;transition:width .4s ease}

.stage{border:1px solid var(--line);border-radius:18px;background:var(--card);
  min-height:340px;display:flex;align-items:center;justify-content:center;
  padding:22px;overflow:hidden;position:relative}
.narration{border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-top:14px;background:#fff}
.narr-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.narr-head>span:first-child{font-weight:800}
.narr-actions{display:flex;gap:6px;align-items:center;flex:none}
.narr-actions .ghost.mini{border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-weight:800}
#step-script{margin:10px 0 0;color:var(--sub);border-top:1px dashed var(--line);padding-top:10px}
#step-script{margin:8px 0 0;color:var(--ink)}
.lesson-controls{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px}

/* ══ scenes ══ */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(30,125,67,.45)}50%{box-shadow:0 0 0 12px rgba(30,125,67,0)}}
@keyframes tapdot{0%{transform:scale(.3);opacity:0}30%{opacity:.9}100%{transform:scale(1.8);opacity:0}}
@keyframes drive{to{offset-distance:100%}}
@keyframes dashmove{to{stroke-dashoffset:0}}
@keyframes typein{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes tick{0%{transform:scale(0) rotate(-20deg)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes ringbell{0%,100%{transform:rotate(0)}20%{transform:rotate(18deg)}40%{transform:rotate(-14deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-4deg)}}
@keyframes stamp{0%{transform:scale(2.6) rotate(-18deg);opacity:0}60%{transform:scale(1) rotate(-12deg);opacity:1}75%{transform:scale(1.12) rotate(-12deg)}100%{transform:scale(1) rotate(-12deg)}}
@keyframes shutter{0%,100%{height:0}45%,55%{height:50%}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes slidecard{0%{transform:translate(0,0)}25%{transform:translate(0,-8px)}75%{transform:translate(var(--dx),-8px)}100%{transform:translate(var(--dx),0)}}
@keyframes zoomfocus{from{transform:scale(1)}to{transform:scale(1.22)}}

.scene{animation:fadeUp .5s ease both;width:100%;display:flex;justify-content:center}
.scene-caption{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:var(--sub);font-size:13px;font-weight:600}

/* phone frame */
.phone{width:250px;border:10px solid #1c2420;border-radius:34px;background:#fff;overflow:hidden;
  box-shadow:var(--shadow);position:relative}
.phone .notch{height:20px;background:#1c2420;border-radius:0 0 12px 12px;width:110px;margin:0 auto}
.phone .p-head{background:var(--green);color:#fff;font-weight:800;font-size:13px;padding:9px 12px}
.phone .p-body{padding:8px;min-height:250px}
.p-row{border:1px solid var(--line);border-radius:9px;padding:8px 10px;margin:6px 0;font-size:12.5px;
  animation:typein .4s ease both}
.p-row .sub{color:var(--sub);font-size:11px}
.p-row.hl{border:2px solid var(--green);animation:pulse 1.6s infinite;position:relative;font-weight:700}
.p-btn{background:var(--green);color:#fff;border-radius:9px;text-align:center;font-weight:800;padding:10px;margin:8px 0;font-size:13px}
.p-btn.hl{animation:pulse 1.6s infinite;position:relative}
.tap{position:absolute;right:14px;top:50%;width:26px;height:26px;border-radius:50%;
  background:rgba(30,125,67,.5);transform:translateY(-50%);pointer-events:none}
.tap:after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--green);animation:tapdot 1.4s infinite}
.zooming .p-body{animation:zoomfocus 2.6s ease 1.2s both;transform-origin:50% 55%}

/* van route */
.route-wrap{width:min(480px,100%)}
.route-svg{width:100%;height:auto}
.stop-label{font-size:10px;font-weight:700;fill:#1c2420}
.stop-dot{fill:#fff;stroke:var(--green);stroke-width:2.5}
.route-line{stroke:var(--green);stroke-width:3;fill:none;stroke-dasharray:640;stroke-dashoffset:640;
  animation:dashmove 3.5s ease forwards;stroke-linecap:round}
.van{offset-rotate:0deg;animation:drive 6s ease-in-out 1s forwards}

/* chat */
.chat{width:min(380px,100%);display:flex;flex-direction:column;gap:8px}
.bubble{max-width:82%;padding:10px 14px;border-radius:16px;font-size:14px;animation:typein .5s ease both}
.bubble .from{display:block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;opacity:.7;margin-bottom:2px}
.bubble.agent{background:var(--green);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.bubble.supplier,.bubble.customer{background:#fff;border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}

/* kanban */
.kb{display:flex;gap:10px;width:min(520px,100%)}
.kb-col{flex:1;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;min-height:180px}
.kb-col h4{margin:2px 4px 8px;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--sub)}
.kb-card{border:1px solid var(--line);border-left:4px solid var(--green);border-radius:8px;
  padding:7px 9px;font-size:12px;margin:6px 0;background:#fff;font-weight:600}
.kb-card.moving{--dx:0px;animation:slidecard 2.6s ease 1s both;border-left-color:var(--amber);position:relative;z-index:2}

/* misc scenes */
.bell-scene{text-align:center}
.bell{font-size:64px;display:inline-block;animation:ringbell 1.4s ease 1s 2;transform-origin:top center}
.toast{margin-top:14px;background:#1c2420;color:#fff;border-radius:12px;padding:12px 18px;font-size:14px;
  font-weight:600;animation:typein .5s ease 1.8s both;max-width:360px}
.check-scene{width:min(360px,100%)}
.chk{display:flex;gap:10px;align-items:center;border:1px solid var(--line);background:#fff;border-radius:10px;
  padding:10px 14px;margin:8px 0;font-weight:600;font-size:14px;animation:typein .45s ease both}
.chk .mark{width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;display:grid;
  place-items:center;font-size:13px;animation:tick .5s ease both}
.doc{width:min(340px,100%);background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;position:relative;box-shadow:var(--shadow)}
.doc h4{margin:0 0 8px}
.doc p{margin:3px 0;font-size:13px;color:var(--sub)}
.doc .stamp{position:absolute;right:16px;top:14px;border:3px solid var(--green);color:var(--green);
  font-weight:900;font-size:20px;padding:4px 12px;border-radius:8px;animation:stamp .7s ease 1.2s both;letter-spacing:.08em}
.doc .stamp.DRAFT{border-color:var(--amber);color:var(--amber)}
.photo-scene{position:relative;width:250px}
.cam{width:250px;height:180px;background:#20302a;border-radius:14px;position:relative;overflow:hidden;display:grid;place-items:center}
.cam .veg{font-size:56px}
.cam .blind-t,.cam .blind-b{position:absolute;left:0;right:0;background:#000;height:0;animation:shutter 1.6s ease 1s}
.cam .blind-t{top:0}.cam .blind-b{bottom:0}
.sig{background:#fff;border:1px solid var(--line);border-radius:12px;margin-top:10px;padding:6px}
.sig svg{width:100%;height:64px}
.sig path{stroke:#1c2420;stroke-width:2.4;fill:none;stroke-linecap:round;
  stroke-dasharray:320;stroke-dashoffset:320;animation:draw 2s ease 2.4s forwards}

/* real-Odoo screenshot scenes (the "video") */
.shot-scene{flex-direction:column;align-items:center}
.shot-frame{width:100%;max-width:760px;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow);background:#fff}
.shot-inner{position:relative}
.shot-img{display:block;width:100%;height:auto}
/* the whole screen shows first, then the zoom slides the click point to the CENTRE
   of the frame — the target can never be cut off */
.shot-inner.zoom{animation:shotzoom 2.8s cubic-bezier(.3,.6,.2,1) 1.1s both}
@keyframes shotzoom{from{transform:none}to{transform:scale(var(--zs,1.5)) translate(var(--tx,0%),var(--ty,0%))}}
/* the red mouse pointer with a click pulse at its tip */
.shot-cursor{position:absolute;width:26px;height:26px;margin:-3px 0 0 -3px;pointer-events:none;z-index:2}
.shot-cursor svg{width:100%;height:100%;overflow:visible}
.shot-cursor svg path{fill:#d2402f;stroke:#fff;stroke-width:1.6;stroke-linejoin:round;
  filter:drop-shadow(0 2px 4px rgba(28,36,32,.4))}
.shot-cursor:before{content:"";position:absolute;left:2px;top:1px;width:14px;height:14px;
  border-radius:50%;border:2.5px solid #d2402f;transform:translate(-50%,-50%);
  animation:tapdot 1.4s ease-out infinite}
.shot-cursor svg{animation:cursorpress 1.4s ease-in-out infinite}
@keyframes cursorpress{0%,100%{transform:translate(0,0)}12%{transform:translate(1.5px,1.5px)}24%{transform:translate(0,0)}}

/* quiz */
.q-card{border:1px solid var(--line);border-radius:16px;padding:22px;background:#fff;animation:fadeUp .4s ease both}
.q-card h3{margin:0 0 14px;font-size:18px}
.q-opt{display:block;width:100%;text-align:left;border:1.5px solid var(--line);background:#fff;
  border-radius:12px;padding:13px 16px;margin:8px 0;font-weight:600}
.q-opt:hover{border-color:var(--green)}
.q-opt.sel{border-color:var(--green);background:var(--green-soft)}
.quiz-nav{display:flex;justify-content:space-between;margin-top:16px}
.result-card{text-align:center;border:1px solid var(--line);border-radius:18px;padding:36px 22px;background:#fff;animation:fadeUp .5s ease both}
.result-big{font-size:56px;font-weight:900;color:var(--green)}
.result-big.fail{color:var(--red)}

/* admin */
.tabs{display:flex;gap:8px;margin:6px 0 16px}
.tab{background:#eef1ef;color:var(--sub);padding:9px 18px;border-radius:99px;font-weight:700}
.tab.active{background:var(--green);color:#fff}
.admin-pane table{border-collapse:collapse;width:100%;font-size:13.5px}
.admin-pane th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);
  text-align:left;padding:0 10px 8px 0;border-bottom:1px solid var(--line)}
.admin-pane td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.admin-pane .table-wrap{overflow-x:auto}
.mini{font-size:12px;padding:6px 12px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:12px 0;
  border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--card)}
.form-grid label{font-size:12px;font-weight:700;color:var(--sub)}
.form-grid input,.form-grid select{width:100%;padding:9px 10px;border:1.5px solid var(--line);border-radius:9px;font:inherit;background:#fff}
.score-pill{font-weight:800;font-variant-numeric:tabular-nums}

@media (max-width:600px){
  .lesson-controls{flex-wrap:wrap}
  .lesson-controls .primary{flex:1 1 100%;order:-1}
  .stage{min-height:300px}
}