/* IoT.SensorGrid learning platform, account and administration.
   Builds on the style.css design tokens (--brand, --text, --border, --surface-muted...) and its header, brand and .btn components. */
:root{
  --panel-radius:14px;
  --header-h:82px;
}

/* ---------- Shell ---------- */
.app-body{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.app-body>main{flex:1 0 auto}
.app-page{width:min(1200px,92vw);margin-inline:auto;padding-block:36px 64px}
.app-page.narrow-page{width:min(760px,92vw)}
.app-header .main-nav a[aria-current="page"]::after{transform:scaleX(1)}
.password-control{display:flex;align-items:stretch;gap:8px;min-width:0}
.password-control input{flex:1;min-width:0}
.password-toggle{flex:0 0 auto;max-width:45%;border:1px solid var(--border);border-radius:8px;padding:8px 10px;background:var(--surface);color:var(--text);font:inherit;font-size:12px;cursor:pointer}
.password-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.app-header .header-actions .btn-quiet{border:1px solid var(--border);border-radius:var(--control-radius);padding:8px 12px;font-size:13px;font-weight:var(--control-weight);background:var(--surface)}
.app-header .header-actions .btn-quiet:hover{border-color:var(--border-strong)}
.app-footer{border-top:1px solid var(--border);background:var(--surface-muted);padding:18px 0;font-size:13px;color:var(--text-muted)}
.app-footer .container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
.app-footer-legal{display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:100%}
.app-footer-legal bdi{font-variant-numeric:tabular-nums;letter-spacing:.03em}
.app-footer nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.app-footer a:hover{color:var(--brand-text-strong);text-decoration:underline;text-underline-offset:4px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon.sm{width:16px;height:16px}
.icon.lg{width:28px;height:28px}
html[dir="rtl"] .icon.flip{transform:scaleX(-1)}

/* ---------- Page heading ---------- */
.app-heading{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px;padding-bottom:24px;margin-bottom:28px;border-bottom:1px solid var(--border-strong)}
.app-heading>div{min-width:0;max-width:760px}
.app-heading h1{font-size:clamp(28px,3.4vw,42px);line-height:1.2;letter-spacing:-.03em;margin:0}
html[dir="rtl"] .app-heading h1{letter-spacing:0;line-height:1.4}
.app-heading p.lead{font-size:16px;margin-top:10px}
.app-heading .eyebrow{margin-bottom:8px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--text-muted);margin:0 0 14px}
.crumbs a{color:var(--brand-text-strong);font-weight:700}
.crumbs a:hover{text-decoration:underline}
.section-label{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px;margin:40px 0 16px}
.section-label h2{flex:none;font-size:22px;line-height:1.35;margin:0}
.section-label p{margin:0;color:var(--text-muted);font-size:14px}

/* ---------- Generic building blocks ---------- */
.panel{border:1px solid var(--border);border-radius:var(--panel-radius);background:var(--surface);padding:24px;min-width:0}
.panel h2,.panel h3{margin-top:0}
.panel-title{font-size:18px;line-height:1.4;margin:0 0 14px}
.stack{display:grid;gap:16px}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.spacer{flex:1}
.text-muted{color:var(--text-muted)}
.small{font-size:13px}
.prose{white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mono,.id-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;direction:ltr;unicode-bidi:isolate;overflow-wrap:anywhere}
.btn.small{min-height:36px;padding:6px 12px;font-size:13px}
.btn.block{width:100%}
.btn.danger{background:var(--danger);border-color:var(--danger);color:var(--on-danger)}
.btn.danger:hover{background:var(--danger-hover)}
.btn.quiet{border-color:var(--border)}
.btn.quiet:hover{border-color:var(--border-strong)}
.btn[aria-disabled="true"]{opacity:.55;pointer-events:none}
.btn:focus-visible,.link-btn:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.link-btn{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--brand-text-strong);background:none;border:0;padding:0;cursor:pointer}
.link-btn:hover{text-decoration:underline;text-underline-offset:4px}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:2px 10px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:var(--badge-font-size);font-weight:var(--control-weight);line-height:1.5;white-space:nowrap;color:var(--text)}
.badge.success{background:var(--success-soft);border-color:var(--brand-border);color:var(--success)}
.badge.progress{background:var(--surface);border-color:var(--brand);color:var(--brand-text-strong)}
.badge.warn{background:var(--warning-soft);border-color:var(--warning-border);color:var(--warning)}
.badge.danger{background:var(--danger-soft);border-color:var(--danger-border);color:var(--danger)}
.badge.dark{background:var(--panel-dark);border-color:var(--panel-dark);color:var(--on-dark)}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:0;font-size:13px;color:var(--text-muted)}
.meta>span{display:inline-flex;align-items:center;gap:6px}

/* Notices */
.notice{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--border);border-inline-start:3px solid var(--brand);border-radius:10px;background:var(--info-soft);margin:0 0 20px;overflow-wrap:anywhere}
.notice .icon{margin-top:3px;color:var(--brand-text-strong)}
.notice p{margin:0}
.notice strong{display:block}
.notice.success{background:var(--success-soft);border-color:var(--brand-border);border-inline-start-color:var(--brand)}
.notice.error{background:var(--danger-soft);border-color:var(--danger-border);border-inline-start-color:var(--danger)}
.notice.error .icon{color:var(--danger)}
.notice.warn{background:var(--warning-soft);border-color:var(--warning-border);border-inline-start-color:var(--warning)}
.notice.warn .icon{color:var(--warning)}

/* Progress: native <progress> keeps it accessible and CSP-safe (no inline widths). */
progress.bar{-webkit-appearance:none;appearance:none;display:block;width:100%;height:8px;border:0;border-radius:999px;background:var(--track);overflow:hidden;color:var(--brand-text)}
progress.bar::-webkit-progress-bar{background:var(--track);border-radius:999px}
progress.bar::-webkit-progress-value{background:var(--progress-fill);border-radius:999px}
progress.bar::-moz-progress-bar{background:var(--progress-fill);border-radius:999px}
progress.bar.thin{height:6px}
.progress-line{display:grid;gap:8px}
.progress-line .row{justify-content:space-between;font-size:13px}
.progress-line strong{font-size:14px}
.ring{width:96px;height:96px;flex:none;transform:rotate(-90deg)}
html[dir="rtl"] .ring{transform:rotate(-90deg) scaleY(-1)}
.ring circle{fill:none;stroke-width:9}
.ring .ring-track{stroke:var(--track)}
.ring .ring-value{stroke:var(--progress-fill);stroke-linecap:round}
.ring-wrap{position:relative;width:96px;height:96px;flex:none}
.ring-wrap strong{position:absolute;inset:0;display:grid;place-items:center;font-size:18px;font-weight:800;direction:ltr}

/* Empty / error states */
.empty-state{border:1px solid var(--border-subtle);border-radius:var(--panel-radius);padding:clamp(32px,4vw,48px) 24px;text-align:center;background:var(--surface);min-width:0}
.empty-state .empty-icon{width:48px;height:48px;margin:0 auto 20px;border:1px solid var(--border-subtle);border-radius:12px;background:var(--surface-muted);color:var(--brand-text-strong);display:grid;place-items:center}
.empty-state h2{font-size:22px;font-weight:700;line-height:1.35;margin:0 0 12px;text-wrap:balance}
.empty-state p{color:var(--text-muted);font-size:15px;line-height:1.75;max-width:52ch;margin:0 auto}
.empty-state .actions{justify-content:center;margin-top:24px}

/* Stat tiles */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:28px}
.stat{border:1px solid var(--border);border-radius:12px;padding:16px 18px;background:var(--surface);min-width:0}
.stat strong{display:block;font-size:28px;line-height:1.1;color:var(--brand-text-strong);direction:ltr;text-align:start}
.stat span{display:block;margin-top:6px;font-size:13px;color:var(--text-muted)}
a.stat:hover{border-color:var(--brand)}

/* ---------- Forms ---------- */
.form{display:grid;gap:18px}
.form-field{display:grid;gap:7px;min-width:0}
.form-field>span,.form-field>label{font-size:14px;font-weight:700}
.form-field small{color:var(--text-muted);font-size:12.5px;line-height:1.6}
.form input:not([type="checkbox"]):not([type="radio"]),.form select,.form textarea,.filter-bar input,.filter-bar select{
  width:100%;min-width:0;min-height:var(--control-height);padding:11px 13px;border:1px solid var(--input-border);border-radius:var(--control-radius);background:var(--input-bg);color:var(--text);font-size:16px;line-height:1.5;outline:0}
.form input:focus,.form select:focus,.form textarea:focus,.filter-bar input:focus,.filter-bar select:focus{border-color:var(--brand);outline:2px solid var(--focus-ring);outline-offset:2px;box-shadow:none}
.form input[readonly]{background:var(--surface-muted)}
.auth-card .form select[name="preferredLanguage"]{height:var(--control-height);padding-block:10px}
.auth-card .form input.otp-code{font-size:20px;line-height:24px;letter-spacing:.25em;text-align:center;font-variant-numeric:tabular-nums}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.form-grid .full{grid-column:1/-1}
.check{display:flex;align-items:flex-start;gap:12px;cursor:pointer;line-height:1.6}
.check input{width:20px;height:20px;margin:3px 0 0;flex:none;accent-color:var(--brand)}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}

/* ---------- Auth / account ---------- */
.auth-wrap{width:min(1080px,92vw);margin-inline:auto;padding-block:40px 56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(24px,3.5vw,48px);align-items:stretch;align-content:center}
.auth-aside{background:var(--brand);color:var(--on-brand);border-radius:18px;padding:clamp(26px,3vw,40px);position:relative;overflow:hidden;min-height:0;display:flex;flex-direction:column}
.auth-aside::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,transparent,black 30%,black 80%,transparent)}
.auth-aside>*{position:relative}
.auth-aside img{width:48px;height:50px;object-fit:contain;margin-bottom:32px}
.auth-aside h2{font-size:clamp(24px,2.4vw,32px);line-height:1.3;margin:auto 0 12px}
.auth-aside p{margin:0;color:var(--on-brand-muted)}
.auth-aside ul{list-style:none;padding:0;margin:22px 0 0;border-top:1px solid rgba(255,255,255,.4)}
.auth-aside li{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.22);font-weight:700;font-size:14px}
.auth-card{border:1px solid var(--border);border-radius:18px;padding:clamp(24px,3vw,40px);background:var(--surface);min-width:0;display:flex;flex-direction:column;justify-content:center;box-shadow:0 18px 44px rgba(20,35,27,.07)}
.auth-card h1{font-size:clamp(26px,3vw,34px);line-height:1.3;margin:0 0 8px}
.auth-card>p.text-muted{margin:0 0 22px}
.auth-card>.form+.form{margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}
.auth-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;padding-top:18px;border-top:1px solid var(--border);font-size:14px}
.auth-links a{color:var(--brand-text-strong);font-weight:700}
.auth-links a:hover{text-decoration:underline}
/* Leave the floating contact button its own column beside auth recovery links on phones. */
@media(max-width:560px){.app-body:has(.auth-wrap) .auth-links{padding-inline-end:62px}}
.account-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:24px;align-items:start}
.tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:28px}
.tile-grid .panel>.row:first-child{flex-wrap:nowrap;align-items:baseline}
.tile{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--border);border-radius:12px;padding:18px;background:var(--surface);transition:border-color .2s}
.tile:hover{border-color:var(--brand)}
.tile .tile-icon{width:40px;height:40px;border-radius:10px;background:var(--brand-soft);color:var(--brand-text-strong);display:grid;place-items:center;flex:none}
.tile strong{display:block;font-size:15px}
.tile span{display:block;font-size:13px;color:var(--text-muted);line-height:1.6}
.kv{display:grid;gap:14px;margin:0}
.kv div{display:grid;gap:2px;min-width:0}
.kv dt{font-size:12.5px;color:var(--text-muted);font-weight:700}
.kv dd{margin:0;overflow-wrap:anywhere;font-weight:600}

/* ---------- My Learning ---------- */
.resume{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px;align-items:center;border:1px solid var(--border-strong);border-radius:var(--panel-radius);padding:20px 24px;margin-bottom:32px;background:var(--surface)}
.resume h2{font-size:20px;line-height:1.4;margin:2px 0 4px}
.resume .eyebrow{margin:0}
.resume p{margin:0}
.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.course-card{border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden;display:flex;flex-direction:column;min-width:0;transition:border-color .2s}
.course-card:hover{border-color:var(--border-on-dark)}
.course-media{position:relative;aspect-ratio:16/9;background:var(--surface-muted);overflow:hidden;border-bottom:1px solid var(--border)}
.course-media img{width:100%;height:100%;object-fit:cover}
.course-media .badge{position:absolute;top:12px;inset-inline-start:12px}
.course-placeholder{width:100%;height:100%;background:var(--brand);display:grid;place-items:center;position:relative}
.course-placeholder::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:28px 28px}
.course-placeholder img{position:relative;width:52px;height:54px;object-fit:contain}
.course-body{padding:20px;display:flex;flex-direction:column;gap:12px;flex:1}
.course-body h2{font-size:19px;line-height:1.4;margin:0;overflow-wrap:anywhere}
.course-body h2 a:hover{color:var(--brand-text-strong)}
.course-body p.desc{margin:0;color:var(--text-muted);font-size:14px}
.course-body .next{font-size:13px;color:var(--text-muted);margin:0}
.course-body .next strong{color:var(--text);font-weight:700}
.course-foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px;padding-top:6px}
.course-foot .btn{flex:1 1 auto}

/* My Learning: compact heading and one row per enrolled course. */
.app-heading.compact{align-items:center;padding-bottom:16px;margin-bottom:24px;border-bottom-color:var(--border)}
.app-heading.compact p{margin:4px 0 0}
.learning-home{width:min(1040px,92vw)}
.learning-home .resume{margin-bottom:24px}
.course-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.course-row{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:20px;align-items:center;border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:14px;min-width:0;transition:border-color .2s}
.course-row:hover{border-color:var(--border-on-dark)}
.course-thumb{display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--surface-muted)}
.course-thumb img{width:100%;height:100%;object-fit:cover}
.course-row .course-body{padding:0;gap:10px}
.course-title-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.course-row h2{font-size:18px;line-height:1.4;margin:0;overflow-wrap:anywhere}
.course-row h2 a:hover{color:var(--brand-text-strong)}
.course-row .progress-line{max-width:520px}
.course-row.is-featured{border-color:var(--border-strong)}
.course-row .eyebrow{margin:0}
.course-row .course-foot{margin:0;padding:0;flex-direction:column;align-items:stretch;min-width:170px}
.auth-back{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 18px;font-size:13.5px;font-weight:700}
.auth-back a{display:inline-flex;align-items:center;gap:6px;color:var(--brand-text-strong)}
.auth-back a:hover{text-decoration:underline;text-underline-offset:4px}

/* My Orders: type label under each title and the (source-driven) filter tabs. */
.orders-table .order-title{display:block}
.orders-table .order-type{display:block;margin-top:2px;font-size:12px;font-weight:600;color:var(--text-muted)}
.order-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.order-tabs a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px;border:1px solid var(--border);border-radius:999px;font-size:14px;font-weight:700;background:var(--surface)}
.order-tabs a:hover{border-color:var(--brand)}
.order-tabs a[aria-current="page"]{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-text-strong)}
.order-tabs .count{font-size:12px;color:var(--text-muted)}

/* ---------- Course overview ---------- */
.overview-hero{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start;margin-bottom:36px}
.overview-hero h1{font-size:clamp(30px,3.6vw,46px);line-height:1.2;letter-spacing:-.03em;margin:0 0 12px;overflow-wrap:anywhere}
html[dir="rtl"] .overview-hero h1{letter-spacing:0;line-height:1.4}
.overview-hero .lead{margin:0 0 18px;font-size:17px}
.progress-card{border:1px solid var(--border-strong);border-radius:var(--panel-radius);padding:22px;background:var(--surface);display:grid;gap:18px;position:sticky;top:calc(var(--header-h) + 16px)}
.progress-card .row.head{flex-wrap:nowrap;gap:18px}
.progress-card h2{font-size:16px;margin:0}
.progress-card .counts{margin:4px 0 0;font-size:14px;color:var(--text-muted)}
.progress-card>p{margin:0}
.complete-card{border-color:var(--brand);background:var(--success-soft)}
.curriculum{display:grid;gap:12px}
.module{border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden}
.module>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:16px 20px;background:var(--surface-muted)}
.module>summary::-webkit-details-marker{display:none}
.module>summary h3{font-size:16.5px;line-height:1.45;margin:0;display:flex;gap:10px;align-items:center;overflow-wrap:anywhere}
.module>summary h3::before{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(-45deg);transition:transform .2s}
html[dir="rtl"] .module>summary h3::before{transform:rotate(135deg)}
.module[open]>summary h3::before,html[dir="rtl"] .module[open]>summary h3::before{transform:rotate(45deg)}
.module>summary .meta{grid-column:1/-1;padding-inline-start:18px}
.module-desc{padding:14px 20px 0;margin:0;color:var(--text-muted);font-size:14px}
.lesson-list{list-style:none;margin:0;padding:6px 0}
.lesson-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 20px;border-top:1px solid var(--border-subtle)}
.lesson-list li:first-child .lesson-row{border-top:0}
.lesson-row:hover{background:var(--surface-muted)}
.lesson-row .title{font-weight:600;overflow-wrap:anywhere}
.lesson-row .sub{display:block;font-size:12.5px;color:var(--text-muted);margin-top:2px}
.lesson-row .aside{font-size:12.5px;color:var(--text-muted);white-space:nowrap}
.lesson-row.is-next{background:var(--brand-soft)}
.state{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--border);color:var(--on-brand);flex:none}
.state.done{background:var(--brand);border-color:var(--brand)}
.state.started{border-color:var(--brand);background:conic-gradient(var(--brand) 0 50%,transparent 50% 100%)}
html[dir="rtl"] .state.started{background:conic-gradient(transparent 0 50%,var(--brand) 50% 100%)}
.state .icon{width:14px;height:14px;stroke-width:3}
.quiz-list{display:grid;gap:10px}
.quiz-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:14px;align-items:center;border:1px solid var(--border);border-radius:12px;padding:14px 18px;background:var(--surface)}
.quiz-row:hover{border-color:var(--brand)}
.quiz-row .qi{width:40px;height:40px;border-radius:10px;background:var(--brand-soft);color:var(--brand-text-strong);display:grid;place-items:center}

/* ---------- Course player ---------- */
.player-body{min-height:100vh;background:var(--bg)}
.player-bar{position:sticky;top:0;z-index:60;height:64px;background:var(--panel-dark);color:var(--on-dark);display:flex;align-items:center;gap:14px;padding-inline:clamp(12px,2vw,24px);border-bottom:1px solid var(--pure-black)}
.player-bar .brand-mark{display:flex;align-items:center;flex:none}
.player-bar .brand-mark img{width:28px;height:30px;object-fit:contain}
.player-bar .divider{width:1px;height:28px;background:rgba(255,255,255,.25);flex:none}
.player-bar .course-link{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.3}
.player-bar .course-link small{font-size:11.5px;color:rgba(255,255,255,.65);font-weight:600}
.player-bar .course-link strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-bar .course-link:hover strong{text-decoration:underline;text-underline-offset:4px}
.player-bar progress.bar{background:rgba(255,255,255,.2)}
.player-bar progress.bar::-webkit-progress-bar{background:rgba(255,255,255,.2)}
.player-bar progress.bar::-webkit-progress-value{background:var(--brand-on-dark)}
.player-bar progress.bar::-moz-progress-bar{background:var(--brand-on-dark)}
.player-bar .bar-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 12px;border:1px solid rgba(255,255,255,.3);border-radius:7px;color:var(--on-dark);background:transparent;font-weight:700;font-size:13px;cursor:pointer;flex:none}
.player-bar .bar-btn:hover{border-color:var(--on-dark)}
.player-bar .bar-btn:focus-visible,.player-bar a:focus-visible{outline:3px solid var(--brand-on-dark);outline-offset:2px}
.player-bar .contents-toggle{display:none}
.player-bar .bar-back{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 12px 8px 8px;border-radius:7px;background:rgba(255,255,255,.1);color:var(--on-dark);font-weight:700;font-size:13px;flex:none;white-space:nowrap}
html[dir="rtl"] .player-bar .bar-back{padding:8px 8px 8px 12px}
.player-bar .bar-back:hover{background:rgba(255,255,255,.18)}
.player-bar .course-link{padding-inline-start:4px}
.player-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;align-items:start}
.player-main{min-width:0}
.player-stage{background:var(--panel-dark-deep);display:flex;justify-content:center}
.player-stage .frame{width:100%;max-width:calc((100vh - 64px - 150px) * 16 / 9);min-width:min(100%,640px);aspect-ratio:16/9;position:relative}
.player-stage iframe,.player-stage video{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--panel-dark-deep)}
.stage-message{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;color:#d9dcda;padding:24px}
.stage-message .icon{width:40px;height:40px;color:var(--brand-on-dark)}
.stage-message strong{font-size:18px;color:var(--on-brand)}
.stage-message p{margin:0;max-width:440px;font-size:14px}
.stage-article{background:var(--surface-muted);border-bottom:1px solid var(--border)}
.stage-article .stage-message{position:static;color:var(--text);padding:16px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 12px;text-align:start}
.stage-article .stage-message strong{font-size:16px}
.stage-article .stage-message .icon{width:28px;height:28px}
.stage-article .stage-message strong{color:var(--text)}
.stage-article .stage-message .icon{color:var(--brand-text)}
.player-content{width:min(960px,100%);margin-inline:auto;padding:24px clamp(16px,3vw,40px) 64px}
.lesson-head{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-start;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid var(--border)}
.lesson-head>div:first-child{min-width:0;flex:1 1 380px}
.lesson-head .eyebrow{margin:0 0 6px}
.lesson-head h1{font-size:clamp(22px,2.4vw,30px);line-height:1.35;margin:0 0 10px;overflow-wrap:anywhere}
.lesson-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.lesson-actions form{margin:0;display:flex;flex-wrap:wrap;gap:10px}
.done-chip{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:10px 16px;border-radius:7px;background:var(--success-soft);color:var(--success);font-weight:800;border:1px solid var(--brand-border)}
.lesson-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}
.lesson-nav a{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface);min-width:0}
.lesson-nav a:hover{border-color:var(--brand)}
.lesson-nav a.next{justify-content:flex-end;text-align:end;grid-column:2}
.lesson-nav a span{min-width:0}
.lesson-nav small{display:block;font-size:12px;color:var(--text-muted);font-weight:700}
.lesson-nav strong{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lesson-section{padding:24px 0;border-bottom:1px solid var(--border)}
.lesson-section:last-child{border-bottom:0}
.lesson-section h2{font-size:18px;margin:0 0 12px}
.resource-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.resource{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:var(--surface)}
.resource .file-icon{width:44px;height:44px;border-radius:10px;background:var(--brand-soft);color:var(--brand-text-strong);display:grid;place-items:center;font-size:11px;font-weight:800}
.resource strong{display:block;overflow-wrap:anywhere;font-weight:700}
.resource small{color:var(--text-muted);font-size:12.5px}
.completion-banner{display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between;padding:16px 20px;margin-top:20px;border:1px solid var(--brand);border-radius:12px;background:var(--brand-soft)}
.completion-banner p{margin:0}
/* Sidebar */
.player-sidebar{position:sticky;top:64px;height:calc(100vh - 64px);border-inline-start:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;min-width:0}
.sidebar-head{padding:18px 20px;border-bottom:1px solid var(--border);display:grid;gap:10px}
.sidebar-head h2{font-size:16px;margin:0}
.sidebar-head .row{justify-content:space-between;flex-wrap:nowrap}
.sidebar-close{display:none}
.sidebar-scroll{overflow-y:auto;overscroll-behavior:contain;flex:1}
.side-module{border-bottom:1px solid var(--border)}
.side-module>summary{list-style:none;cursor:pointer;padding:14px 20px;background:var(--surface-muted);display:grid;gap:2px}
.side-module>summary::-webkit-details-marker{display:none}
.side-module>summary strong{font-size:14.5px;line-height:1.45;overflow-wrap:anywhere}
.side-module>summary small{font-size:12px;color:var(--text-muted)}
.side-lessons{list-style:none;margin:0;padding:0}
.sidebar-overview{justify-self:start;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--brand-text-strong)}
.sidebar-overview:hover{text-decoration:underline}
.side-lesson{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;padding:12px 20px;border-inline-start:3px solid transparent;align-items:start}
.side-lesson:hover{background:var(--surface-muted)}
.side-lesson .state{width:22px;height:22px;margin-top:1px}
.side-lesson .t{font-size:14px;line-height:1.5;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.side-lesson .m{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);margin-top:3px}
.side-lesson[aria-current="page"]{background:var(--brand-soft);border-inline-start-color:var(--brand)}
.side-lesson[aria-current="page"] .t{font-weight:700}
.side-quizzes{padding:6px 0 20px}
.side-quizzes h3{font-size:13px;margin:14px 20px 6px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}
html[dir="rtl"] .side-quizzes h3{letter-spacing:0}
.contents-backdrop{display:none}

/* ---------- Quiz ---------- */
.quiz-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.quiz-facts{display:grid;gap:12px;margin:0}
.quiz-facts div{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--border-subtle);font-size:14px}
.quiz-facts div:last-child{border-bottom:0;padding-bottom:0}
.quiz-facts dt{color:var(--text-muted)}
.quiz-facts dd{margin:0;font-weight:700}
.question{border:1px solid var(--border);border-radius:12px;padding:20px;margin:0;min-width:0;background:var(--surface)}
.question legend{float:inline-start;width:100%;padding:0;margin-bottom:6px;font-weight:700;font-size:16px;line-height:1.6;overflow-wrap:anywhere}
.question .hint{clear:both;display:block;font-size:12.5px;color:var(--text-muted);margin-bottom:12px}
.choice{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;cursor:pointer;margin-top:8px;line-height:1.6}
.choice:hover{border-color:var(--brand)}
.choice:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.choice input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--brand)}
.choice span{overflow-wrap:anywhere}
.result-card{display:flex;gap:20px;align-items:center;border:1px solid var(--border);border-radius:var(--panel-radius);padding:22px;margin-bottom:24px}
.result-card.pass{border-color:var(--brand);background:var(--success-soft)}
.result-card.fail{border-color:var(--danger-border);background:var(--danger-soft)}
.result-card .score{font-size:40px;font-weight:800;line-height:1;direction:ltr}
.result-card.pass .score{color:var(--success)}
.result-card.fail .score{color:var(--danger)}
.result-card h2{margin:0 0 4px;font-size:20px}
.result-card p{margin:0}

/* ---------- Certificates ---------- */
.cert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.cert-card{border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.cert-top{position:relative;padding:22px;background:var(--surface-muted);border-bottom:1px solid var(--border);display:grid;gap:10px}
.cert-top::after{content:"";position:absolute;inset:10px;border:1px solid var(--cert-frame);border-radius:8px;pointer-events:none}
.cert-top .row{justify-content:space-between;position:relative;z-index:1}
.cert-top img{width:30px;height:32px;object-fit:contain}
.cert-top h2{font-size:19px;line-height:1.4;margin:6px 0 0;position:relative;z-index:1;overflow-wrap:anywhere}
.cert-top p{margin:0;position:relative;z-index:1;color:var(--text-muted);font-size:14px;overflow-wrap:anywhere}
.cert-body{padding:18px 22px 22px;display:grid;gap:16px;flex:1}
.cert-body .kv{grid-template-columns:1fr 1fr}
.cert-body .actions{margin-top:auto}
.verify-page{width:min(760px,92vw);margin-inline:auto;padding-block:48px 72px}
.verify-card{border:1px solid var(--border-strong);border-radius:18px;background:var(--surface);overflow:hidden}
.verify-status{display:flex;align-items:center;gap:16px;padding:22px 26px;border-bottom:1px solid var(--border)}
.verify-status.valid{background:var(--brand-soft);color:var(--brand-text-strong)}
.verify-status.revoked{background:var(--danger-soft);color:var(--danger)}
.verify-status .status-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:currentColor;flex:none}
.verify-status .status-icon .icon{color:var(--status-icon-fg);width:26px;height:26px;stroke-width:2.6}
.verify-status strong{display:block;font-size:22px;line-height:1.3}
.verify-status>div>span{font-size:14px;color:var(--text)}
.verify-body{padding:26px;display:grid;gap:18px}
.verify-body .kv{grid-template-columns:1fr 1fr}
.verify-body .kv .wide{grid-column:1/-1}
.verify-body .kv dd.big{font-size:22px;line-height:1.4}
.bi{display:block}
.bi+.bi{margin-top:2px}

/* ---------- Admin ---------- */
.admin-body{min-height:100vh;background:var(--surface-muted)}
.admin-topbar{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--border)}
.admin-topbar .bar{display:flex;align-items:center;gap:14px;min-height:64px;padding-inline:clamp(12px,2vw,24px)}
.admin-topbar .brand{font-size:18px}
.admin-topbar .brand img{width:28px;height:30px}
.admin-topbar .tag{font-size:11px;font-weight:800;letter-spacing:.08em;border:1px solid var(--border-strong);border-radius:999px;padding:2px 10px;text-transform:uppercase}
html[dir="rtl"] .admin-topbar .tag{letter-spacing:0}
.admin-topbar nav{margin-inline-start:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.admin-topbar nav a{font-size:13px;font-weight:700;padding:8px 10px;border-radius:7px}
.admin-topbar nav a:hover{background:var(--surface-muted)}
.admin-topbar nav a.lang-link{border:1px solid var(--border);border-radius:999px}
.admin-shell{display:grid;grid-template-columns:250px minmax(0,1fr);align-items:start;min-height:calc(100vh - 64px)}
/* The sidebar column paints its own full-height background, so it reaches the bottom of long pages while the sticky menu stays in view. */
.admin-shell::before{content:"";grid-column:1;grid-row:1;align-self:stretch;background:var(--surface);border-inline-end:1px solid var(--border)}
.admin-side{grid-column:1;grid-row:1;position:sticky;top:64px;height:calc(100vh - 64px);overflow-y:auto;background:var(--surface);border-inline-end:1px solid var(--border);padding:18px 12px 24px}
.admin-side h2{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin:18px 12px 6px}
html[dir="rtl"] .admin-side h2{letter-spacing:0}
.admin-side h2:first-child{margin-top:0}
.admin-side a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;font-size:14px;font-weight:600;border-inline-start:3px solid transparent}
.admin-side a:hover{background:var(--surface-muted)}
.admin-side a[aria-current="page"]{background:var(--brand-soft);color:var(--brand-text-strong);border-inline-start-color:var(--brand);font-weight:800}
.admin-side .icon{width:18px;height:18px}
.admin-main{grid-column:2;grid-row:1;padding:28px clamp(16px,3vw,40px) 64px;min-width:0}
.admin-main .app-heading{border-bottom-color:var(--border);padding-bottom:18px;margin-bottom:22px}
.admin-main .app-heading h1{font-size:clamp(24px,2.6vw,32px)}
.admin-main .panel{border-radius:12px}
.filter-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin-bottom:14px}
.filter-bar label{display:grid;gap:6px;font-size:13px;font-weight:700;min-width:0}
.filter-bar .grow{flex:1 1 260px}
.filter-bar .grow input{min-width:0}
.filter-bar select{min-width:140px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chips a{display:inline-flex;align-items:center;min-height:34px;padding:4px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-size:13px;font-weight:700}
.chips a:hover{border-color:var(--border-strong)}
.chips a[aria-current="true"]{background:var(--panel-dark);border-color:var(--panel-dark);color:var(--on-dark)}
.table-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.table-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;padding:12px 16px;border-bottom:1px solid var(--border);font-size:13px;color:var(--text-muted)}
.table-scroll{max-width:100%;overflow-x:auto}
.table-scroll:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px}
.table-scroll table{width:100%;border-collapse:collapse;min-width:760px;font-size:14px}
.table-scroll caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.table-scroll th{position:sticky;top:0;background:var(--table-head-bg);text-align:start;font-size:12px;font-weight:800;color:var(--text-muted);padding:10px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
.table-scroll td{padding:12px 14px;border-bottom:1px solid var(--border-subtle);vertical-align:top;text-align:start;overflow-wrap:break-word;max-width:320px}
.table-scroll tbody tr:last-child td{border-bottom:0}
.table-scroll tbody tr:hover td{background:var(--table-row-hover)}
.table-scroll td.num{white-space:nowrap;direction:ltr;text-align:end}
html[dir="rtl"] .table-scroll td.num{text-align:start}
.table-scroll td.mono-cell{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:var(--text-muted);min-width:90px}
.table-scroll td.strong-cell{font-weight:700;min-width:130px}
.table-scroll td[data-state]{white-space:nowrap;font-weight:700;font-size:13px}
.table-scroll td[data-state]::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-end:8px;vertical-align:1px;background:var(--state-neutral)}
.table-scroll td:is([data-state="ACTIVE"],[data-state="PUBLISHED"],[data-state="VALID"],[data-state="PASSED"],[data-state="PAID"]){color:var(--brand-text-strong)}
.table-scroll td:is([data-state="ACTIVE"],[data-state="PUBLISHED"],[data-state="VALID"],[data-state="PASSED"],[data-state="PAID"])::before{background:var(--brand)}
.table-scroll td:is([data-state="REVOKED"],[data-state="FAILED"],[data-state="DISABLED"],[data-state="SUSPENDED"],[data-state="REJECTED"]){color:var(--danger)}
.table-scroll td:is([data-state="REVOKED"],[data-state="FAILED"],[data-state="DISABLED"],[data-state="SUSPENDED"],[data-state="REJECTED"])::before{background:var(--danger)}
.table-scroll td:is([data-state="PENDING"],[data-state="DRAFT"],[data-state="SCHEDULED"],[data-state="OPEN"],[data-state="PENDING_PAYMENT"],[data-state="UNDER_REVIEW"]){color:var(--warning)}
.table-scroll td:is([data-state="PENDING"],[data-state="DRAFT"],[data-state="SCHEDULED"],[data-state="OPEN"],[data-state="PENDING_PAYMENT"],[data-state="UNDER_REVIEW"])::before{background:var(--state-pending)}
.table-scroll td.actions-cell{min-width:180px}
.table-scroll td.actions-cell .row{flex-wrap:wrap;gap:6px}
.table-scroll td.actions-cell .btn{white-space:nowrap}
.table-scroll td progress{width:90px;margin-top:6px}
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--border);font-size:13px}
.pager .row{gap:8px}
.danger-zone{border:1px solid var(--danger-border);border-radius:12px;background:var(--surface);overflow:hidden}
.danger-zone .dz-head{padding:16px 20px;background:var(--danger-soft);border-bottom:1px solid var(--danger-border);display:flex;gap:12px;align-items:flex-start}
.danger-zone .dz-head .icon{color:var(--danger);margin-top:3px}
.danger-zone .dz-head p{margin:2px 0 0}
.danger-zone .dz-body{padding:20px}
.record{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 24px;margin:0 0 20px}
.code-box{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:16px;border:1px dashed var(--border-strong);border-radius:10px;background:var(--surface-muted)}
.code-box code{flex:1 1 320px;font-size:18px;font-weight:700;letter-spacing:.02em;overflow-wrap:anywhere;direction:ltr;text-align:left}
.split{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;align-items:start}
.pick-list{list-style:none;margin:0;padding:6px;display:grid;gap:2px;max-height:70vh;overflow:auto}
.pick-list a{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;padding:9px 10px;border-radius:8px;font-size:14px;overflow-wrap:anywhere}
.pick-list a:hover{background:var(--surface-muted)}
.pick-list a[aria-current="true"]{background:var(--brand-soft);color:var(--brand-text-strong);font-weight:700}
.pick-list .n{color:var(--text-muted);font-size:12px;direction:ltr;padding-top:2px}
.item-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.item-list>li{border:1px solid var(--border);border-radius:10px;padding:12px 14px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.item-list details summary{cursor:pointer;font-weight:700;color:var(--danger);font-size:13px}
.item-list details[open]{flex-basis:100%}
.item-list details .form{margin-top:12px}
details.add-form{border:1px solid var(--border);border-radius:10px;margin-top:14px}
details.add-form>summary{cursor:pointer;padding:12px 16px;font-weight:800;color:var(--brand-text-strong)}
details.add-form>.form{padding:4px 16px 18px}
.curriculum-admin .module>summary{grid-template-columns:minmax(0,1fr) auto}
.admin-table-lite{width:100%;border-collapse:collapse;font-size:14px}
.admin-table-lite th,.admin-table-lite td{text-align:start;padding:10px 14px;border-top:1px solid var(--border-subtle);vertical-align:top;overflow-wrap:anywhere}
.admin-table-lite th{font-size:12px;color:var(--text-muted);font-weight:800;border-top:0;background:var(--table-head-bg)}

/* ---------- Responsive ---------- */
.admin-nav-toggle{display:none}
.admin-destinations{display:contents}
.admin-install{margin-block:16px;color:var(--text-muted)}
.admin-install>summary,.catalog-review>summary{cursor:pointer;font-weight:700;padding-block:10px}
.admin-install[open]>.stack{padding-block:12px}
.catalog-review:not([open]){padding-block:8px;background:var(--surface)}
.catalog-review[open]{border-inline-start:3px solid var(--brand)}
@media(max-width:1100px){
  .overview-hero{grid-template-columns:minmax(0,1fr)}
  .progress-card{position:static}
  .quiz-layout{grid-template-columns:minmax(0,1fr)}
  .admin-shell{grid-template-columns:minmax(0,1fr)}
  .admin-shell::before{display:none}
  .admin-side,.admin-main{grid-column:auto;grid-row:auto}
  .admin-side{position:static;height:auto;max-height:none;border-inline-end:0;border-bottom:1px solid var(--border);padding:10px 12px;display:block;white-space:normal}
  .js .admin-nav-toggle{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:8px;text-align:start;font:inherit;font-weight:700;cursor:pointer}
  .admin-nav-toggle .icon{margin-inline-start:auto;flex:none}
  .admin-destinations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:10px}
  .js .admin-side:not(.expanded) .admin-destinations{display:none}
  .admin-side h2{display:block;grid-column:1/-1;margin-block:14px 4px}
  .admin-side a{min-width:0;border-inline-start:0;border:1px solid var(--border);padding:9px 10px;white-space:normal}
  .admin-side a[aria-current="page"]{border-color:var(--brand)}
  .split{grid-template-columns:minmax(0,1fr)}
  .pick-list{max-height:260px}
}
@media(max-width:1023px){
  .player-layout{grid-template-columns:minmax(0,1fr)}
  .player-stage .frame{max-width:none;min-width:0}
  .player-bar .contents-toggle{display:inline-flex}
  .player-sidebar{position:static;height:auto;border-inline-start:0;border-top:1px solid var(--border)}
  /* With JS, the course content becomes an off-canvas drawer opened from the player bar. */
  .js .player-sidebar{position:fixed;top:0;bottom:0;inset-inline-end:0;z-index:80;width:min(420px,92vw);height:100%;border-top:0;box-shadow:0 0 40px rgba(0,0,0,.25);transform:translateX(105%);visibility:hidden;transition:transform .25s,visibility .25s}
  html.js[dir="rtl"] .player-sidebar{transform:translateX(-105%)}
  html.js .player-sidebar.open{transform:none;visibility:visible}
  .js .sidebar-close{display:inline-flex}
  .js .contents-backdrop.open{display:block;position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.45)}
  /* Compact course-content drawer: shorter rows, two-line titles, status and quiz label kept visible. */
  .sidebar-head{padding:14px 16px;gap:8px}
  .side-module>summary{padding:10px 16px}
  .side-lesson{grid-template-columns:22px minmax(0,1fr);gap:10px;padding:9px 16px}
  .side-lesson .state{width:20px;height:20px}
  .side-lesson .t{font-size:13.5px;line-height:1.45}
  .side-lesson .m{font-size:11.5px;margin-top:1px}
  .side-lesson .m .icon.sm{width:14px;height:14px}
  /* Status and quiz labels sit under the title so long (often mixed Arabic/English) titles keep their full width. */
  .side-lesson .m{margin-top:2px;flex-wrap:wrap}
}
@media(max-width:480px){
  /* The back button carries the context here; the truncated course title only crowded it. */
  .player-bar .course-link{visibility:hidden;padding:0}
  .player-bar .bar-back{min-width:0;flex-shrink:1}
  .player-bar .bar-back .label{overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:860px){
  .course-row{grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:start}
  .course-row .course-foot{grid-column:1/-1;flex-direction:row;min-width:0}
  .auth-wrap{grid-template-columns:minmax(0,1fr);padding-block:28px 48px}
  .auth-aside{min-height:0;order:2}
  .auth-aside h2{margin-top:18px}
  .auth-aside img{margin-bottom:0}
  .account-grid{grid-template-columns:minmax(0,1fr)}
  .resume{grid-template-columns:minmax(0,1fr)}
  .resume .ring-wrap{display:none}
  .form-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:680px){
  :root{--header-h:72px}
  /* Orders become one card per order so the status and action stay visible without sideways scrolling. */
  .table-scroll .orders-table{min-width:0}
  .orders-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .orders-table,.orders-table tbody,.orders-table td{display:block}
  .orders-table tr{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 16px;border-bottom:1px solid var(--border-subtle)}
  .orders-table tbody tr:last-child{border-bottom:0}
  .table-scroll .orders-table td{padding:0;border:0;max-width:none;min-width:0}
  .orders-table td.strong-cell{order:-1;font-size:15px}
  .orders-table td.mono-cell{text-align:start}
  /* The status keeps its coloured dot (its own ::before) instead of a text label. */
  .orders-table td[data-label]:not([data-state])::before{content:attr(data-label) ": ";color:var(--text-muted);font-size:12.5px;font-weight:400}
  .table-scroll .orders-table td[data-state]{white-space:normal;font-size:14px}
  .orders-table td.actions-cell{margin-top:8px}
  .orders-table td.actions-cell .btn{width:100%}
  .table-scroll .orders-table tbody tr:hover td{background:none}
  .app-page{padding-block:24px 48px}
  .app-heading{padding-bottom:18px;margin-bottom:20px}
  .course-grid,.cert-grid{grid-template-columns:minmax(0,1fr)}
  .course-row{grid-template-columns:88px minmax(0,1fr);padding:12px}
  .course-row h2{font-size:16.5px}
  .app-heading.compact{flex-wrap:nowrap;gap:12px}
  .player-bar{height:56px;gap:10px}
  .player-bar .divider{display:none}
  .player-bar .bar-btn span.label,.player-bar .course-link small{display:none}
  .player-bar .bar-back{padding-inline:8px 10px}
  .player-sidebar{top:56px}
  .player-stage .frame{aspect-ratio:16/9}
  .player-content{padding-top:18px}
  .lesson-head{flex-direction:column}
  .lesson-head>div:first-child{flex-basis:auto}
  .lesson-actions,.lesson-actions form,.lesson-actions .btn,.done-chip{width:100%}
  .lesson-nav{grid-template-columns:minmax(0,1fr)}
  .lesson-nav a.next{grid-column:auto}
  .resource{grid-template-columns:40px minmax(0,1fr)}
  .resource .btn{grid-column:1/-1}
  .lesson-row{padding-inline:14px}
  .module>summary{padding:14px}
  .cert-body .kv,.verify-body .kv{grid-template-columns:minmax(0,1fr)}
  .verify-page{padding-block:24px 48px}
  .result-card{flex-direction:column;align-items:flex-start}
  .quiz-row{grid-template-columns:36px minmax(0,1fr)}
  .quiz-row>.badge{grid-column:2;justify-self:start}
  .admin-topbar nav a:not(.lang-link){display:none}
  .filter-bar>*{flex:1 1 100%}
  .form-actions .btn{flex:1 1 100%}
}
/* Curriculum quizzes: quiz rows, locked items, answer review and the admin quiz editor. */
.state.failed{border-color:var(--danger)}
.state.locked{border-color:var(--border);background:var(--surface-muted);color:var(--text-muted)}
.state.locked .icon{stroke-width:2.2}
.lesson-row.locked,.side-lesson.locked{color:var(--text-muted);cursor:not-allowed}
.lesson-row.locked:hover,.side-lesson.locked:hover{background:none}
.lesson-row.quiz .aside .icon{color:var(--text-muted)}
.side-lesson.quiz:not(.locked) .t{font-weight:600}
/* Quizzes read as checkpoints between lessons: tinted row and a labelled quiz marker. */
.side-lesson.quiz{background:var(--quiz-bg);border-top:1px dashed var(--quiz-border);border-bottom:1px dashed var(--quiz-border)}
.side-lesson.quiz .m{color:var(--warning);font-weight:700}
.side-lesson.quiz[aria-current="page"]{background:var(--brand-soft)}
.lesson-row.quiz{background:var(--quiz-bg)}
.lesson-row.quiz.is-next{background:var(--brand-soft)}
.lesson-nav .next.locked{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-height:64px;padding:12px 16px;border:1px dashed var(--border);border-radius:12px;background:var(--surface-muted);color:var(--text-muted);text-align:end;grid-column:2;min-width:0}
.lesson-nav .next.locked span{min-width:0}
.lesson-nav .next.locked small{display:block;font-size:12px;font-weight:700}
.lesson-nav .next.locked strong{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quiz-content>.panel,.quiz-content>form,.quiz-content>section{margin-bottom:24px}
.review-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.review-item{border:1px solid var(--border);border-inline-start:3px solid var(--brand);border-radius:12px;padding:16px 18px;background:var(--surface);min-width:0}
.review-item.incorrect{border-inline-start-color:var(--danger)}
.review-q{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-start;justify-content:space-between;margin:0 0 10px;overflow-wrap:anywhere}
.review-choices{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.review-choices li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border-subtle);border-radius:8px;font-size:14px;overflow-wrap:anywhere}
.review-choices li.is-correct{border-color:var(--brand-border);background:var(--success-soft)}
.review-choices li.is-selected:not(.is-correct){border-color:var(--danger-border);background:var(--danger-soft)}
.review-choices li.is-correct .icon{color:var(--success)}
.review-choices li.is-selected:not(.is-correct) .icon{color:var(--danger)}
.review-choices small{margin-inline-start:auto;font-size:12px;font-weight:700;color:var(--text-muted)}
.review-explanation{margin:10px 0 0;font-size:14px;color:var(--text-muted);overflow-wrap:anywhere}
.module-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 20px 16px}
.admin-table-lite tr.quiz-item td{background:var(--quiz-item-bg)}
.question-admin-list{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:14px}
.question-admin-list .prose{margin:0;overflow-wrap:anywhere}
.choice-preview{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px}
.choice-preview li{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 10px;border:1px solid var(--border-subtle);border-radius:8px;overflow-wrap:anywhere}
.choice-preview li.correct{border-color:var(--brand-border);background:var(--brand-soft)}
.choice-editor{border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin:0;display:grid;gap:10px;min-width:0}
.choice-editor legend{font-size:14px;font-weight:700;padding:0 6px}
.choice-row{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:center}
.choice-row .check input{margin:0}
details.danger-zone>summary{color:var(--danger)}
.publish-problems{margin:0;padding-inline-start:20px;display:grid;gap:6px;color:var(--danger);overflow-wrap:anywhere}
.check input[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
@media(max-width:680px){
  .lesson-nav .next.locked{grid-column:auto}
  .choice-row{grid-template-columns:28px minmax(0,1fr)}
  .choice-row input[name="choiceEn"]{grid-column:2}
  .module-actions{padding-inline:14px}
}
@media(prefers-reduced-motion:reduce){.js .player-sidebar{transition:none}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html[dir="rtl"] [dir="auto"]:is(h1,h2,h3,p,dd,div,legend,strong){text-align:right}
html[dir="ltr"] [dir="auto"]:is(h1,h2,h3,p,dd,div,legend,strong){text-align:left}
html[dir="rtl"] .table-scroll td[dir="ltr"],html[dir="rtl"] .kv dd[dir="ltr"]{text-align:right}
.table-scroll td.actions-cell .btn{white-space:nowrap}
.table-scroll td[colspan]{max-width:none;padding:16px}.table-scroll td[colspan] .empty-state{border:0}
.topbar-signout{margin:0}.admin-topbar nav+form{margin-inline-start:4px}
.table-scroll td[dir="ltr"]{white-space:nowrap}
/* Bank-transfer orders */
.order-ref{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.02em}
.price{font-size:18px;font-weight:800;color:var(--brand-text-strong)}
.bank-details dd.mono{font-size:15px;letter-spacing:.03em}
ol.steps{margin:0;padding-inline-start:20px;display:grid;gap:8px}
.status-panel p{margin:0 0 12px}
.status-panel p strong{display:block}
.receipt-preview{margin:0 0 14px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface-muted);max-width:100%}
.receipt-preview img{display:block;max-width:100%;max-height:640px;height:auto;margin-inline:auto}
.price-row .panel-title{margin:0}
.orders-table td{white-space:normal}
/* Learner payment flow: pay → upload → done */
.pay-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.pay-step .panel-title{display:flex;align-items:center;gap:10px}
.step-no{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--brand);color:var(--on-brand);font-size:14px;font-weight:800;flex:none}
.copy-list{display:grid;gap:0;margin:0 0 12px}
.copy-list>div{display:grid;gap:4px;padding:12px 0;border-top:1px solid var(--border-subtle);min-width:0}
.copy-list>div:first-child{border-top:0;padding-top:0}
.copy-list dt{font-size:12.5px;color:var(--text-muted);font-weight:700}
.copy-list dd{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;font-weight:600;overflow-wrap:anywhere;min-width:0}
.copy-list dd .mono{font-size:15px;letter-spacing:.03em}
.optional-fields{margin:0 0 4px}
.optional-fields summary{cursor:pointer;font-weight:700;color:var(--brand-text-strong);font-size:14px;padding:4px 0}
.optional-fields[open] summary{margin-bottom:14px}
.pay-cancel{margin-top:16px}
.confirm-card{max-width:620px;display:grid;gap:14px;justify-items:start}
.confirm-card .kv{width:100%}
.confirm-icon{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--brand-soft);color:var(--brand-text-strong)}
.confirm-actions{flex-wrap:wrap;gap:10px}
@media(max-width:860px){.pay-grid{grid-template-columns:minmax(0,1fr)}}

/* Receipt picker: with JS the native file control is an invisible layer over a localized button and file name. */
.file-pick .file-button,.file-pick .file-name{display:none}
.js .file-pick{position:relative;display:flex;align-items:center;gap:12px;min-height:50px;padding:6px;border:1px solid var(--border);border-radius:10px;background:var(--surface);min-width:0}
.js .file-pick input[type="file"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}
.js .file-pick .file-button{display:inline-flex;align-items:center;gap:8px;flex:none;padding:8px 14px;border:1px solid var(--border-strong);border-radius:8px;font-size:14px;font-weight:700;background:var(--surface)}
.js .file-pick .file-name{display:block;min-width:0;font-size:14px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}
.js .file-pick.has-file .file-name{color:var(--text);font-weight:600}
.js .file-pick:hover .file-button{background:var(--surface-muted)}
.js .file-pick:focus-within{outline:3px solid var(--focus-ring);outline-offset:2px}

/* Admin overview: the one thing waiting on an administrator comes first. */
.attention{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:16px 18px;margin:0 0 20px;border:1px solid var(--attention-border);border-inline-start:4px solid var(--state-pending);border-radius:12px;background:var(--attention-bg)}
.attention>.icon{color:var(--warning);flex:none}
.attention>div{flex:1 1 260px;min-width:0}
.attention strong{display:block;font-size:16px}
.attention p{margin:2px 0 0;font-size:13.5px;color:var(--text-muted)}
/* Admin top bar on phones: keep brand, language and sign-out on one line. */
.topbar-signout .btn{white-space:nowrap}
@media(max-width:600px){
  .admin-topbar .bar{gap:8px;min-height:56px}
  .admin-topbar .tag{display:none}
  .admin-topbar .brand{font-size:16px;gap:8px;min-width:0}
  .admin-topbar .brand img{width:24px;height:26px}
  .admin-topbar nav a.lang-link{padding:6px 10px}
  .admin-side{top:56px}
}
.quiz-content>.completion-banner{margin-bottom:24px}

.table-scroll td.program-cell{min-width:180px}
.program-refs{display:flex;flex-wrap:wrap;gap:2px 10px;margin-top:4px;font-size:12px;font-weight:500;color:var(--text-muted)}
.program-refs .mono{font-size:11.5px}
/* Passed quiz: optional retake, collapsed. */
.retake-optional>summary{cursor:pointer;font-weight:800;color:var(--brand-text-strong)}
.retake-optional[open]>summary{margin-bottom:10px}
.quiz-content>details{margin-bottom:24px}

/* ===== Admin polish (v1 final) ===== */
/* Tables: the record ID sits under the first name cell (pseudo-element, full ID in the cell title). */
.table-scroll td[data-ref]::after{content:attr(data-ref);display:block;margin-top:3px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;font-weight:500;color:var(--text-muted);unicode-bidi:isolate;text-align:start;white-space:nowrap}
.table-scroll td.ref-cell{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:700;white-space:nowrap;direction:ltr}
html[dir="rtl"] .table-scroll td.ref-cell{text-align:right}
.table-scroll td.date-cell{white-space:nowrap}
/* Overview: one compact line per section. */
.status-summary{padding:6px 0 4px}
.status-summary .panel-title{padding:12px 18px 6px;margin:0}
.status-list{list-style:none;margin:0;padding:0}
.status-list>li{display:grid;grid-template-columns:minmax(150px,220px) 56px minmax(0,1fr);align-items:center;gap:6px 14px;padding:10px 18px;border-top:1px solid var(--border-subtle)}
.status-list .status-name{font-weight:700;font-size:14px}
.status-list .status-name:hover{color:var(--brand-text-strong);text-decoration:underline}
.status-list .status-total{font-size:18px;direction:ltr;text-align:end}
.status-links{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;min-width:0}
.status-links a{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface);white-space:nowrap}
.status-links a:hover{border-color:var(--border-strong)}
.status-links a b{direction:ltr}
.status-links a:is([data-state="UNDER_REVIEW"],[data-state="PENDING"],[data-state="PENDING_PAYMENT"]){border-color:var(--attention-border);background:var(--attention-bg)}
@media(max-width:600px){
  .status-list>li{grid-template-columns:minmax(0,1fr) auto;padding:12px 14px}
  .status-links{grid-column:1 / -1}
  .status-summary .panel-title{padding-inline:14px}
}
/* Payment review: reference, amount and proof together; approve is the one primary card. */
.verify-list .verify-value{font-size:18px;font-weight:800;letter-spacing:.02em}
.verify-list .amount.verify-value{color:var(--brand-text-strong)}
.proof-row{flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:10px}
.approve-card{border:2px solid var(--brand);box-shadow:var(--shadow-approve)}
.approve-card .btn.primary{width:100%;justify-content:center}
.approve-amount{margin:0;display:grid;gap:2px}
.approve-amount strong{font-size:22px;color:var(--brand-text-strong);text-align:start}
html[dir="rtl"] .approve-amount strong{text-align:right}
.other-actions>summary{cursor:pointer;font-weight:800;color:var(--text-muted);padding:2px 0}
.other-actions[open]>summary{margin-bottom:14px}
.other-actions>section+section{margin-top:20px;padding-top:18px;border-top:1px solid var(--border-subtle)}
.record>div{min-width:0}
.record dt{font-size:12.5px;font-weight:700;color:var(--text-muted)}
.record dd{margin:4px 0 0;overflow-wrap:anywhere}
/* Payment review on one column: verify the payment, then approve, then the order details. */
@media(max-width:860px){
  .admin-body .account-grid:has(.approve-card)>div.stack{display:contents}
  .admin-body .account-grid:has(.approve-card)>div.stack>*{order:3}
  .admin-body .account-grid:has(.approve-card)>div.stack>.verify-panel{order:1}
  .admin-body .account-grid:has(.approve-card)>aside{order:2}
}
/* ===== Learner polish (v1 final) ===== */
/* Lesson/quiz: prev/next is quiet secondary navigation at the bottom; the top action stays the one primary. */
.lesson-nav{margin:16px 0 8px;gap:8px 16px}
.lesson-nav a,.lesson-nav .next.locked{min-height:0;padding:6px 4px;border:0;border-radius:8px;background:none;gap:8px;color:var(--text-muted)}
.lesson-nav a:hover{background:var(--surface-muted);color:var(--text)}
.lesson-nav a:hover strong{text-decoration:underline}
.lesson-nav small,.lesson-nav .next.locked small{font-size:11.5px;font-weight:600}
.lesson-nav strong,.lesson-nav .next.locked strong{font-size:13.5px;font-weight:600;color:var(--text)}
.lesson-nav .next.locked strong{color:var(--text-muted)}
.lesson-nav .icon{width:16px;height:16px;flex:none}
/* No playable video: compact notices instead of an empty 16:9 stage or a full-width band. */
.lesson-notice{margin:20px 0 0;padding:10px 14px;font-size:14px}
.lesson-notice strong{display:inline}
.lesson-note{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:13.5px;color:var(--text-muted)}
.lesson-note .icon{color:var(--brand-text-strong);flex:none}
/* Quiz after a pass: result + next step first; review and history are disclosures. */
.result-card .result-actions{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px}
.quiz-content .completion-banner{margin:0 0 24px}
.review-details,.attempts-details{border-bottom:1px solid var(--border)}
.quiz-content>details.review-details,.quiz-content>details.attempts-details{margin-bottom:16px;padding:0 0 12px}
.review-details>summary,.attempts-details>summary{cursor:pointer;display:flex;align-items:center;gap:8px;padding:12px 0}
.review-details>summary h2,.attempts-details>summary h2{display:inline;font-size:17px;margin:0}
.review-details>summary .count,.attempts-details>summary .count{color:var(--text-muted);font-weight:600;font-size:14px}
.attempts-details .table-card{margin-top:4px}
.review-details>summary,.attempts-details>summary{list-style:none}
.review-details>summary::-webkit-details-marker,.attempts-details>summary::-webkit-details-marker{display:none}
.review-details>summary::before,.attempts-details>summary::before{content:"";flex:none;width:7px;height:7px;margin-inline-end:4px;border-right:2px solid var(--brand-text-strong);border-bottom:2px solid var(--brand-text-strong);transform:rotate(-45deg);transition:transform .2s}
html[dir="rtl"] .review-details>summary::before,html[dir="rtl"] .attempts-details>summary::before{transform:rotate(135deg)}
.review-details[open]>summary::before,.attempts-details[open]>summary::before,html[dir="rtl"] .review-details[open]>summary::before,html[dir="rtl"] .attempts-details[open]>summary::before{transform:rotate(45deg)}
/* Course player sidebar/drawer: module count beside its title, compact readable rows. */
.side-module>summary{grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:2px 10px}
.side-module>summary small{white-space:nowrap}
.side-lesson .m{flex-wrap:wrap;gap:2px 6px}
.side-lesson .m .icon{flex:none}
@media(max-width:1023px){
  .side-lesson{padding:8px 16px}
  .side-lesson .t{font-size:13.5px}
}
/* Certificates: fresh-issue notice and highlight. */
.cert-issued .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cert-issued p{margin:2px 0 0}
.cert-card.is-new{outline:2px solid var(--focus-ring-brand);outline-offset:2px}
/* Friendly "not available to buy online" state on checkout. */
.empty-state h1{font-size:clamp(20px,2.4vw,26px);line-height:1.35;margin:0 0 8px}
/* Compact page headings keep a single-line action (My orders: Browse courses). */
.app-page .app-heading.compact>.btn{white-space:nowrap;flex:none}
/* My orders: reference is secondary text under the title. */
.orders-table .order-ref{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:500}
/* Final review: status chips are labels, not buttons; passed quizzes read as done; readable nav titles on phones. */
.done-chip{min-height:32px;padding:4px 12px;border-radius:999px;font-size:14px;font-weight:700}
.side-lesson.quiz .state.done + span .m{color:var(--text-muted);font-weight:500}
.retake-optional>summary{list-style:none;display:flex;align-items:center;gap:8px}
.retake-optional>summary::-webkit-details-marker{display:none}
.retake-optional>summary::before{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
html[dir="rtl"] .retake-optional>summary::before{transform:rotate(135deg)}
.retake-optional[open]>summary::before{transform:rotate(45deg)}
@media(max-width:1023px){
  .lesson-actions .done-chip{width:auto;align-self:flex-start}
  .lesson-nav strong{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}
@media(max-width:560px){
  .app-heading{flex-wrap:wrap}
  .app-heading>div:first-child{flex-basis:100%}
  .app-heading.compact{flex-wrap:wrap}
  .app-heading.compact>.btn{align-self:flex-start}
}
/* Final review (admin): dates may wrap so lists fit at 1280px; curriculum type never breaks mid-word; separated quiz links. */
.table-scroll td.date-cell{white-space:normal;min-width:96px}
.table-scroll td.ref-cell a{font:inherit}
.curriculum-admin .admin-table-lite td:nth-child(3){white-space:nowrap}
.curriculum-admin .actions-cell .row{gap:4px 14px}
/* Course prices: what visitors see on the course page. */
.sale-status{margin:0;font-weight:700}
.sale-status.is-on-sale{color:var(--brand-text-strong)}
.sale-status.is-off-sale{color:var(--warning)}

/* ===== Product orders ===== */
.product-checkout .crumbs span[aria-hidden="true"]{color:var(--text-muted)}
.product-checkout .form select{max-width:100%}
.product-order .app-heading .badge{white-space:normal;max-width:100%;line-height:1.4}
/* My Orders: long friendly statuses (e.g. paid product orders) wrap instead of running into the Amount column. */
.table-scroll .orders-table td[data-state]{white-space:normal;min-width:160px}
.admin-main img.thumb{width:48px;height:48px;object-fit:cover;border-radius:8px;border:1px solid var(--border);flex:none}
/* Custom design/print request form: two options; fields follow the chosen option (the server enforces each option's rules). */
.form.custom-form [data-customization-fields] [aria-invalid="true"]{border-color:var(--danger)}
.custom-form [data-field-error]{color:var(--danger);font-weight:600}
.custom-form .kind-choice{border:0;margin:0;padding:0;display:grid;gap:10px}
.custom-form .kind-choice legend{padding:0;margin-bottom:6px}
.custom-form .kind-option{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface);cursor:pointer}
.custom-form .kind-option:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.custom-form .kind-option input{margin-top:4px;accent-color:var(--brand)}
.custom-form .kind-option span{display:grid;gap:2px}
.custom-form .kind-option small{color:var(--text-muted)}
.custom-form:has(input[name="kind"][value="STL"]:checked) [data-design-only],
.custom-form:has(input[name="kind"][value="DESIGN"]:checked) [data-stl-only]{display:none}
.admin-main .admin-table-lite td>.row{flex-wrap:nowrap;align-items:center}
/* Admin bootcamp registrations: names break only between words, phones never wrap, emails wrap only when they
   do not fit; up to 1100px (tablets and narrow laptops beside the admin sidebar) each registration is a stacked
   card with its status form on its own full-width row. */
.admin-table-lite.bootcamp-table td{overflow-wrap:normal}
.bootcamp-table .bootcamp-applicant strong{overflow-wrap:break-word}
.bootcamp-table .bootcamp-applicant a{overflow-wrap:anywhere} /* an email has no spaces: it wraps inside the name column */
.bootcamp-table .bootcamp-phone a,.bootcamp-table .bootcamp-time{white-space:nowrap}
@media(max-width:1100px){
  .bootcamp-table,.bootcamp-table tbody,.bootcamp-table tr,.bootcamp-table td{display:block;width:auto}
  .table-scroll .bootcamp-table{min-width:0}
  .table-scroll .bootcamp-table td{min-width:0;max-width:none}
  .bootcamp-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bootcamp-table tr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;padding:14px 16px;border-top:1px solid var(--border-subtle)}
  .bootcamp-table tr:first-child{border-top:0}
  .bootcamp-table td{border-top:0;padding:0;grid-column:2}
  .bootcamp-table td.bootcamp-position{grid-column:1;grid-row:1 / span 2;font-size:15px}
  .bootcamp-table td[data-label]::before{content:attr(data-label);display:block;font-size:12px;font-weight:800;color:var(--text-muted);margin-bottom:1px}
  .bootcamp-table td.bootcamp-applicant::before{display:none}
  .bootcamp-table td.bootcamp-actions{grid-column:1 / -1;padding-top:8px;border-top:1px dashed var(--border-subtle)}
  .admin-main .bootcamp-table td.bootcamp-actions>.row{flex-wrap:wrap;gap:8px}
  .bootcamp-table td.bootcamp-actions select{flex:1 1 160px;min-width:0}
  html[dir="rtl"] .bootcamp-table td{text-align:right} /* Latin-only values (city, "—") follow the card, not their own direction */
}
/* Bootcamp queue status: the select keeps its label visible instead of shrinking to the arrow. */
.bootcamp-status select{flex:none;min-width:140px;min-height:34px;padding:4px 8px;border:1px solid var(--input-border);border-radius:7px;background:var(--input-bg);color:var(--text)}
/* Custom request: paired fields keep their natural height (a hint under one field must not stretch the other), and the
   quantity number input drops the browser spinner so it matches the phone input exactly. */
.custom-form .form-grid>.form-field{align-content:start}
.custom-form input[type="number"]{appearance:textfield;-moz-appearance:textfield}
.custom-form input[type="number"]::-webkit-inner-spin-button,.custom-form input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* Store/request records become complete summaries on mobile only. */
@media(max-width:768px){
 .table-scroll:has(>.mobile-summary-table){overflow:visible}
 .table-scroll .mobile-summary-table{display:block;width:100%;min-width:0}
 .mobile-summary-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .mobile-summary-table tbody{display:block}
 .mobile-summary-table tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:16px;border-bottom:1px solid var(--border)}
 .table-scroll .mobile-summary-table td{display:flex;flex-direction:column;gap:4px;min-width:0;max-width:none;padding:0;border:0;white-space:normal;overflow-wrap:anywhere;text-align:start;direction:inherit}
 .table-scroll .mobile-summary-table td[data-label]::after{content:attr(data-label);order:-1;display:block;font-family:inherit;font-size:12px;font-weight:600;color:var(--text-muted);direction:inherit}
 .mobile-summary-table :is(.strong-cell,.ref-cell,.actions-cell,td[colspan]){grid-column:1/-1}
 .table-scroll .mobile-summary-table td.ref-cell a{direction:ltr;unicode-bidi:isolate}
 .table-scroll .mobile-summary-table td[data-state]::before{display:none}
 .table-scroll .mobile-summary-table .row{flex-wrap:wrap;min-width:0}
 .table-scroll .mobile-summary-table .row>div{min-width:0;flex:1}
 .mobile-summary-table .actions-cell{flex-direction:row!important;flex-wrap:wrap;align-items:center}
 .mobile-summary-table .actions-cell::after{flex-basis:100%}
 .mobile-summary-table .actions-cell .btn{min-height:var(--control-height-compact)}
 .mobile-summary-table .actions-cell>.row{width:100%}
}

/* Keep field feedback distinct from help text on account and admin forms. */
.form .form-field :is(input,select,textarea)[aria-invalid="true"]{border-color:var(--danger)}
.form .form-field :is(input,select,textarea)[aria-invalid="true"]:focus{border-color:var(--danger);outline:2px solid var(--danger);outline-offset:2px;box-shadow:none}
.form .form-field :is(input,select,textarea):disabled,.filter-bar :is(input,select):disabled{background:var(--surface-muted);color:var(--text-muted);cursor:not-allowed;opacity:1}

/* Quiet administrative information containers; protected action/state frames stay intact. */
.admin-main section.panel:not(.approve-card,.verify-panel,.danger-zone,.attention,.notice,.catalog-review,[role="alert"]){border-color:var(--border-subtle)}
.admin-main .panel>article.panel:not(.approve-card,.verify-panel,.danger-zone,.attention,.notice,[role="alert"]){border:0;border-block-start:1px solid var(--border-subtle);border-radius:0;padding:16px 0;background:transparent}
.admin-main .panel>article.panel:not(.approve-card,.verify-panel,.danger-zone,.attention,.notice,[role="alert"]) :is(p:last-child,dl:last-child){margin-bottom:0}
html[dir="rtl"] .empty-state h2{line-height:1.5}

/* Keep account security reachable from the compact admin navigation. */
.admin-destinations .admin-mobile-account{display:none}
@media(max-width:680px){
  .admin-destinations h2.admin-mobile-account{display:block}
  .admin-destinations a.admin-mobile-account{display:flex;grid-column:1/-1}
}
/* Empty admin results do not inherit the populated table's minimum width. */
.table-card>[data-admin-empty]{border:0;border-radius:0}
/* Reserve the floating contact control's corner beside narrow resource actions, in both directions. */
@media(max-width:480px){
  .player-body:has(>.wa-contact) .resource .btn{margin-inline-end:72px;justify-self:stretch}
  .player-body>.wa-contact .wa-contact-label{display:none}
}