/* layout.css — extracted verbatim from the original single-file index.html.
   Source lines: 137-139, 147-151
   No rules were edited; only relocated. */
/* MAIN */
#main-content{min-height:100vh;display:flex;flex-direction:column;position:relative;z-index:1}
@media(min-width:768px){#main-content{margin-left:var(--sb)}}
/* STUDENT TOP BAR */
.top-bar{background:rgba(13,13,28,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.06);box-shadow:0 2px 12px rgba(0,0,0,.3);position:sticky;top:0;z-index:30;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
/* DASHBOARD */
.dashboard-layout{display:flex;flex:1;min-height:0}
.courses-col{flex:1;min-width:0;overflow-y:auto;padding:16px}
.lesson-panel-wrap{width:340px;flex-shrink:0;overflow-y:auto;padding:16px;border-left:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,0.02)}
@media(max-width:1023px){.dashboard-layout{flex-direction:column}.lesson-panel-wrap{width:100%;border-left:none;border-top:1px solid rgba(255,255,255,.06)}}

/* ══ STUDENT DASHBOARD (dsh-) & PROFILE (pf-) ══ */
.dsh-wrap{padding:28px 32px 80px;max-width:1880px;margin:0 auto;box-sizing:border-box;width:100%}
.dsh-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:18px;position:relative}
.dsh-h2{font-family:'Montserrat',sans-serif;font-weight:700;font-size:16px;color:#fff;margin:0}
.dsh-link{font-size:12px;font-weight:600;color:var(--g1);cursor:pointer;background:none;border:none;padding:0}
.dsh-link:hover{color:#fff}
.dsh-sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.dsh-mono{font-family:'JetBrains Mono',monospace}

.dsh-mission{display:flex;align-items:stretch;gap:24px;padding:24px;margin-bottom:20px;cursor:pointer;overflow:hidden;background:linear-gradient(120deg,rgba(237,31,81,.10),rgba(255,255,255,.03) 60%);border-color:rgba(237,31,81,.22);transition:border-color .2s,transform .2s}
.dsh-mission:hover{border-color:rgba(237,31,81,.4);transform:translateY(-2px)}
.dsh-mission-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.dsh-eyebrow{font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--g1);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.dsh-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--g1);animation:blink 1.5s ease-in-out infinite}
.dsh-mission-title{font-family:'Montserrat',sans-serif;font-weight:800;font-size:24px;color:#fff;margin:0 0 10px;line-height:1.2}
.dsh-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.dsh-meta span{font-size:12px;color:var(--muted2);padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}

.dsh-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}
.dsh-stat{padding:16px 18px}
.dsh-stat-top{display:flex;align-items:center;gap:8px;color:var(--muted2);font-size:12px;font-weight:600;margin-bottom:10px}
.dsh-stat-ico{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(237,31,81,.12);color:#fb7185;flex-shrink:0}
.dsh-stat-val{font-family:'Montserrat',sans-serif;font-weight:800;font-size:26px;color:#fff;line-height:1}
.dsh-stat-val small{font-size:14px;color:var(--muted);font-weight:600;margin-left:2px}
.dsh-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.dsh-bar>span{display:block;height:100%;border-radius:inherit;background:var(--gradh)}
.dsh-bar.ok>span{background:#22c55e}
.dsh-stat .dsh-bar{margin-top:12px;height:4px}

.dsh-journey{padding:20px 22px;margin-bottom:28px}
.dsh-journey .journey-dots{margin:-20px -14px -10px;padding:20px 14px 12px}
.dsh-journey .jd-line{flex:1;min-width:6px}

.dsh-phases{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:32px}
.dsh-phase{padding:16px;cursor:pointer;transition:border-color .2s,transform .2s}
.dsh-phase:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.18)}
.dsh-phase.active{background:rgba(237,31,81,.09);border-color:rgba(237,31,81,.35)}
.dsh-phase.done{border-color:rgba(34,197,94,.3)}
.dsh-phase-k{font-size:10px;font-weight:700;color:var(--muted);font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.dsh-phase-name{font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;color:#fff;margin:0 0 2px}
.dsh-phase-days{font-size:11px;color:var(--muted);margin:0 0 12px}
.dsh-phase .dsh-bar{height:4px}
.dsh-tag{font-size:9px;font-weight:700;padding:2px 7px;border-radius:99px;letter-spacing:.06em}
.dsh-tag.now{color:#fff;background:var(--grad)}
.dsh-tag.ok{color:#4ade80;background:rgba(34,197,94,.12)}

.dsh-wv-row{display:flex;gap:14px;overflow-x:auto;padding:28px 24px 14px;margin:-24px -24px 0}
.dsh-wv-row::-webkit-scrollbar{height:0}

/* Profile */
.pf-wrap{padding:28px 32px 80px;max-width:1120px;margin:0 auto;box-sizing:border-box;width:100%}
.pf-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:20px;align-items:start}
.pf-id{padding:24px;text-align:center;display:flex;flex-direction:column;align-items:center}
.pf-id .avatar-upload{margin-bottom:14px}
.pf-name{font-family:'Montserrat',sans-serif;font-weight:800;font-size:20px;color:#fff;margin:0;word-break:break-word}
.pf-email{font-size:13px;color:var(--muted2);margin:4px 0 12px;word-break:break-all}
.pf-role{display:inline-block;border-radius:99px;background:rgba(237,31,81,.12);border:1px solid rgba(237,31,81,.3);padding:3px 12px;font-size:11px;font-weight:700;color:#fb7185}
.pf-hint{font-size:11px;color:var(--muted);margin-top:10px}
.pf-status{width:100%;text-align:left;margin-top:20px;padding:14px;border-radius:14px;border:1px solid}
.pf-status.ok{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.25)}
.pf-status.warn{background:rgba(234,179,8,.08);border-color:rgba(234,179,8,.28)}
.pf-status.bad{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.3)}
.pf-status.muted{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.pf-status-t{font-size:13px;font-weight:700;margin:0}
.pf-status.ok .pf-status-t{color:#4ade80}.pf-status.warn .pf-status-t{color:#facc15}.pf-status.bad .pf-status-t{color:#fca5a5}.pf-status.muted .pf-status-t{color:#fff}
.pf-status-s{font-size:11px;color:rgba(255,255,255,.55);margin:4px 0 0;line-height:1.5}
.pf-signout{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;margin-top:14px;border:1px solid rgba(237,31,81,.3);border-radius:12px;background:rgba(237,31,81,.07);color:#fb7185;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s}
.pf-signout:hover{background:rgba(237,31,81,.15)}
.pf-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px}
.pf-sec{padding:20px 22px;margin-bottom:20px}
.pf-sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.pf-rows{margin:0}
.pf-row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid rgba(255,255,255,.06);font-size:14px}
.pf-row:first-child{border-top:none;padding-top:0}
.pf-row dt{color:var(--muted2);margin:0}
.pf-row dd{color:#fff;margin:0;text-align:right;word-break:break-all}
.pf-note{font-size:11px;color:var(--muted);margin:14px 0 0}
.pf-btn{padding:7px 14px;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.14)}
.pf-btn:hover{background:rgba(255,255,255,.11)}

@media(max-width:1100px){
  .dsh-phase{padding:14px}
}
@media(max-width:900px){
  .pf-grid{grid-template-columns:1fr}
  .dsh-phases{display:flex;overflow-x:auto;padding-bottom:4px}
  .dsh-phase{min-width:165px;flex-shrink:0}
}
@media(max-width:767px){
  .dsh-wrap,.pf-wrap{padding:18px 14px 90px}
  .dsh-mission{flex-direction:column-reverse;padding:18px;gap:16px}
  .dsh-mission-title{font-size:20px}
  .dsh-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .dsh-stat-val{font-size:22px}
  .dsh-phases{margin:0 -14px 28px;padding:0 14px 4px}
  .dsh-wv-row{margin:-20px -14px 0;padding:24px 14px 14px}
  .dsh-journey{padding:16px}
  .dsh-journey .jd-line{min-width:6px;flex:0 0 8px}
  .pf-stats{gap:8px}
}

/* ══ LESSON PAGE (ls-) ══ */
.ls-top{display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid var(--border);background:rgba(13,13,28,.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);position:sticky;top:0;z-index:50;flex-shrink:0}
.ls-back,.ls-nav{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:var(--muted2);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;flex-shrink:0}
.ls-back{padding:0 12px}
.ls-nav{width:34px;padding:0}
.ls-back:hover,.ls-nav:not(:disabled):hover{color:#fff;border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.09)}
.ls-nav:disabled{opacity:.3;cursor:default}
.ls-crumb{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;overflow:hidden}
.ls-crumb-k{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);white-space:nowrap;flex-shrink:0}
.ls-crumb-t{font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-actions{display:flex;gap:6px;align-items:center;flex-shrink:0}
.ls-body{padding:26px 32px;max-width:1040px}
.ls-eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--g1);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}
.ls-title{font-family:'Montserrat',sans-serif;font-weight:800;font-size:28px;color:#fff;margin:0 0 10px;line-height:1.2}
.ls-desc{font-size:15px;color:var(--muted2);line-height:1.7;margin:0 0 24px;max-width:760px}
.ls-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px}
.ls-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:20px}
.ls-card-h{font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;color:#fff;margin:0 0 14px}
.ls-challenge{background:linear-gradient(140deg,rgba(237,31,81,.09),rgba(255,255,255,.03) 70%);border-color:rgba(237,31,81,.2)}
.ls-pill{font-size:10px;font-family:'JetBrains Mono',monospace;background:rgba(240,88,37,.12);color:var(--g3);border-radius:6px;padding:3px 8px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.ls-obj{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ls-obj li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:rgba(255,255,255,.8);line-height:1.5}
.ls-obj li span{width:20px;height:20px;border-radius:6px;background:rgba(237,31,81,.12);color:#fb7185;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.ls-side{width:330px;flex-shrink:0;border-left:1px solid var(--border);background:rgba(13,13,28,.6);overflow-y:auto;backdrop-filter:blur(20px);display:flex;flex-direction:column}
.ls-side-h{position:sticky;top:0;z-index:2;padding:16px 16px 14px;background:rgba(13,13,28,.95);border-bottom:1px solid rgba(255,255,255,.06)}
.ls-side-k{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.ls-side-n{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted2)}
.ls-list{padding:8px}
.ls-row{display:flex!important;align-items:center;gap:12px;padding:8px;border-radius:12px;border:1px solid transparent;border-bottom:1px solid transparent!important;cursor:pointer;transition:background .15s,border-color .15s;position:relative}
.ls-row:hover{background:rgba(255,255,255,.05)}
.ls-row.cur{background:rgba(237,31,81,.1)!important;border-color:rgba(237,31,81,.3)}
.ls-row.locked{cursor:default;opacity:.55}
.ls-row.locked:hover{background:none}
.ls-thumb{width:96px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;flex-shrink:0;position:relative;background:rgba(255,255,255,.06)}
.ls-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ls-row.locked .ls-thumb img{filter:grayscale(1) brightness(.6)}
.ls-day{position:absolute;left:5px;bottom:4px;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:600;color:#fff;background:rgba(0,0,0,.6);padding:1px 5px;border-radius:4px}
.ls-txt{flex:1;min-width:0}
.ls-k{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.ls-row.cur .ls-k{color:#fb7185}
.ls-t{font-size:13px;font-weight:600;color:rgba(255,255,255,.88);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ls-row.done .ls-t{color:rgba(255,255,255,.6)}
.ls-st{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ls-st.done{background:rgba(34,197,94,.15);color:#4ade80}
.ls-st.cur{background:var(--grad);color:#fff}
.ls-st.locked{color:var(--muted)}
@media(max-width:1100px){.ls-grid{grid-template-columns:1fr}.ls-side{width:290px}}
@media(max-width:767px){
  .ls-top{padding:8px 10px;gap:8px}
  .ls-back span,.ls-crumb-k{display:none}
  .ls-crumb-t{font-size:13px}
  .ls-body{padding:18px 14px}
  .ls-title{font-size:22px}
  .ls-desc{font-size:14px}
}

/* Dashboard workshop cards */
.wvc{min-width:170px;max-width:170px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);flex-shrink:0;position:relative;cursor:pointer;transition:border-color .2s}
.wvc:hover{border-color:rgba(255,255,255,.2)}
.wvc.done{border-color:rgba(34,197,94,.35)}
.wvc.locked{cursor:default}
.wvc-img{height:96px;position:relative;background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;font-size:30px}
.wvc-img img{width:100%;height:100%;object-fit:cover;display:block}
.wvc.locked .wvc-img img{filter:grayscale(.85) brightness(.55)}
.wvc-lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.wvc-lock span{width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;color:#fff;backdrop-filter:blur(4px)}
.wvc-tick{position:absolute;top:8px;right:8px;background:rgba(34,197,94,.95);border-radius:50%;width:22px;height:22px;align-items:center;justify-content:center;color:#fff;z-index:2}
.wvc-body{padding:10px 12px 12px}
.wvc-cat{font-size:9px;color:var(--muted);font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.wvc-t{font-family:'Montserrat',sans-serif;font-weight:700;font-size:12.5px;color:#fff;line-height:1.3}
.wvc.locked .wvc-t{color:rgba(255,255,255,.7)}
.dsh-note{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted2);margin:-6px 0 12px}

/* Mission card: artwork bleeds in from the right */
.dsh-mission{min-height:230px;padding:30px 32px}
.dsh-mission-body{position:relative;z-index:1;max-width:560px}
.dsh-mission-art{position:absolute;top:0;right:0;bottom:0;width:58%;overflow:hidden;border-radius:0 18px 18px 0;pointer-events:none}
.dsh-mission-art img{width:100%;height:100%;object-fit:cover;display:block;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 45%);mask-image:linear-gradient(to right,transparent 0%,#000 45%);transition:transform .5s ease}
.dsh-mission:hover .dsh-mission-art img{transform:scale(1.03)}
.dsh-mission-art.empty{background:radial-gradient(circle at 70% 50%,rgba(237,31,81,.18),transparent 60%)}
.dsh-mission-art .dsh-play{position:absolute;right:18%;top:50%;transform:translateY(-50%);width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.45);pointer-events:auto;transition:transform .2s}
.dsh-mission:hover .dsh-play{transform:translateY(-50%) scale(1.08)}
@media(max-width:767px){
  .dsh-mission{min-height:0;padding:18px;flex-direction:column}
  .dsh-mission-art{position:relative;width:auto;height:180px;margin:-18px -18px 4px;border-radius:18px 18px 0 0;order:-1}
  .dsh-mission-art img{-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}
  .dsh-mission-art .dsh-play{right:50%;transform:translate(50%,-50%)}
  .dsh-mission:hover .dsh-play{transform:translate(50%,-50%) scale(1.08)}
}

/* Course page (cr-) */
.cr-phase{margin-bottom:34px;scroll-margin-top:90px}
.cr-phase-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.cr-phase-k{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px}
.cr-phase-name{font-family:'Montserrat',sans-serif;font-weight:800;font-size:22px;color:#fff;margin:0}
.cr-phase-name.ok{color:#4ade80}
.cr-phase-p{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted2);font-family:'JetBrains Mono',monospace}
.cr-list{display:flex;flex-direction:column;gap:14px;padding:6px 0}
.cr-row{display:flex;align-items:center;gap:18px;padding:12px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.cr-row:hover{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.055)}
.cr-row.next{background:linear-gradient(110deg,rgba(237,31,81,.12),rgba(255,255,255,.03) 60%);border-color:rgba(237,31,81,.4)}
.cr-row.done{border-color:rgba(34,197,94,.2)}
.cr-row.locked{cursor:default}
.cr-row.locked:hover{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.08)}
.cr-thumb{width:200px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;flex-shrink:0;position:relative;background:rgba(255,255,255,.06)}
.cr-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cr-row.locked .cr-thumb img{filter:grayscale(.9) brightness(.5)}
.cr-day{position:absolute;left:8px;bottom:8px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;color:#fff;background:rgba(0,0,0,.65);padding:2px 7px;border-radius:5px}
.cr-lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff}
.cr-main{flex:1;min-width:0}
.cr-tag{display:inline-block;font-size:9.5px;font-weight:700;color:#fff;background:var(--grad);padding:2px 8px;border-radius:99px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.cr-title{font-family:'Montserrat',sans-serif;font-weight:700;font-size:17px;color:#fff;margin:0 0 6px;line-height:1.3}
.cr-row.locked .cr-title{color:rgba(255,255,255,.55)}
.cr-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted2)}
.cr-meta .xp{color:var(--g3);font-weight:600}
.cr-row.locked .cr-meta .xp{color:var(--muted)}
.cr-act{flex-shrink:0;padding-right:6px}
.cr-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:10px;background:var(--grad);color:#fff;font-size:13px;font-weight:700;font-family:'Montserrat',sans-serif;border:1px solid transparent;box-shadow:0 4px 16px rgba(237,31,81,.3);white-space:nowrap;cursor:pointer}
.cr-btn.ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);box-shadow:none}
.cr-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;white-space:nowrap}
.cr-status.done{color:#4ade80}
.cr-status.locked{color:var(--muted)}
@media(max-width:767px){
  .cr-row{gap:12px;padding:10px;align-items:flex-start}
  .cr-thumb{width:120px}
  .cr-title{font-size:14px}
  .cr-meta{gap:8px;font-size:11px}
  .cr-act{display:none}
}

/* Workshop page grid (wvg-) */
.wvg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.wvc.wvg{min-width:0;max-width:none}
.wvc.wvg .wvc-img{height:auto;aspect-ratio:16/9;font-size:36px}
.wvc.wvg .wvc-body{padding:12px 14px 14px}
.wvc.wvg .wvc-t{font-size:14px;margin-bottom:8px}
.wvc.wvg:not(.locked):hover{transform:translateY(-2px)}
.wvc{transition:border-color .2s,transform .2s}
.wvg-meta{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--muted)}
.wvg-xp{color:var(--g3);font-weight:700}
.wvg-xp.done{color:#4ade80}
.wvc.locked .wvg-xp{color:var(--muted)}
.wvg-banner{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:18px;border-radius:14px;background:rgba(234,179,8,.07);border:1px solid rgba(234,179,8,.25);flex-wrap:wrap}
.wvg-banner strong{display:block;color:#fde68a;font-size:14px}
.wvg-banner p{margin:2px 0 0;font-size:12.5px;color:var(--muted2)}
.wvg-banner-ic{width:36px;height:36px;border-radius:10px;background:rgba(234,179,8,.15);color:#fbbf24;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wvg-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:20px}
.wv-chip{padding:7px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:var(--muted2);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .15s;flex-shrink:0}
.wv-chip:hover{color:#fff;border-color:rgba(255,255,255,.22)}
.wv-chip.active{color:#fff;background:rgba(237,31,81,.14);border-color:rgba(237,31,81,.45)}

/* Lesson pager (all sizes) */
.ls-pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.ls-pg{display:flex;flex-direction:column;gap:4px;text-align:left;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);color:#fff;cursor:pointer;min-width:0;transition:border-color .15s,background .15s}
.ls-pg.next{text-align:right}
.ls-pg:not(.locked):hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06)}
.ls-pg.locked{opacity:.5;cursor:default}
.ls-pg-k{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted2);text-transform:uppercase;letter-spacing:.06em}
.ls-pg-t{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-mstat{display:none}

/* Hide scrollbars on horizontal swipe rows (still scrollable) */
.dsh-phases,.dsh-wv-row,.wvg-chips,#jp-dots{scrollbar-width:none}
.dsh-phases::-webkit-scrollbar,.wvg-chips::-webkit-scrollbar,#jp-dots::-webkit-scrollbar{display:none}

/* Achievements: locked badges readable */
.ach-card.locked-ach{opacity:.55}
.ach-card.locked-ach .ach-emoji{filter:grayscale(1)}

/* ══ PHONE (≤767px) ══ */
@media(max-width:767px){
  /* Drawer above the bottom nav so its footer (Profile / Sign out) is reachable */
  #sidebar{z-index:300!important;padding-bottom:env(safe-area-inset-bottom)}
  #sidebar-overlay{z-index:290!important}
  #sidebar .sb-toggle{display:none}

  /* Dashboard */
  #dash-inner>div:first-child{align-items:stretch!important;margin-bottom:18px!important}
  #dash-inner>div:first-child h1{font-size:26px!important}
  #dash-inner>div:first-child>.dsh-card{width:100%;box-sizing:border-box}
  .dsh-mission .star-border-container{display:block!important}
  .dsh-mission #cm-btn{width:100%;justify-content:center}
  .dsh-stat{padding:14px}
  .dsh-stat-top{font-size:11.5px;gap:6px;white-space:nowrap}
  .dsh-stat-ico{display:none}
  .dsh-journey .dsh-sec-head{align-items:flex-start}
  .dsh-jcount{display:block;margin:4px 0 0!important}
  .dsh-link{white-space:nowrap}
  .dsh-sec-head .dsh-h2{font-size:15px}

  /* Course */
  .dsh-wrap>div:first-child>.dsh-card{width:100%;min-width:0!important;box-sizing:border-box}
  .cr-phase-name{font-size:19px}
  .cr-mstat{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;margin-top:6px}
  .cr-mstat.done{color:#4ade80}
  .cr-mstat.locked{color:var(--muted)}
  .cr-row.next .cr-title{font-size:15px}

  /* Workshop */
  .dsh-wrap h1{font-size:24px!important}
  .wvg-banner{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start}
  .wvg-banner .cr-btn{grid-column:1/-1;justify-content:center}
  .wvg-grid{grid-template-columns:1fr 1fr;gap:10px}
  .wvc.wvg .wvc-body{padding:10px}
  .wvc.wvg .wvc-t{font-size:12.5px}
  .wvg-meta{font-size:10.5px}

  /* Lesson */
  .ls-top .ls-nav{display:none}
  .ls-top #mark-complete-btn{padding:8px 11px!important;font-size:11.5px!important}
  .ls-pager{grid-template-columns:1fr;gap:8px}
  .ls-pg.next{text-align:left}
  .ls-card{padding:16px}
  .ls-obj li{font-size:13.5px}

  /* Profile */
  .pf-id{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:14px;row-gap:2px;text-align:left;align-items:center;padding:18px}
  .pf-id .avatar-upload{grid-row:1/4;margin-bottom:0}
  .pf-id #profile-avatar>*{width:64px!important;height:64px!important;font-size:22px!important}
  .pf-id .pf-name{grid-column:2;font-size:18px}
  .pf-id .pf-email{grid-column:2;margin:0;font-size:12px}
  .pf-id .pf-role{grid-column:2;justify-self:start;margin-top:4px}
  .pf-id .pf-hint{display:none}
  .pf-id .pf-status,.pf-id .pf-signout{grid-column:1/-1}
  .pf-id .pf-status{margin-top:16px}
  .pf-stats .dsh-stat-top{font-size:11px;white-space:nowrap}
  .pf-stats .dsh-stat-val{font-size:20px}
}