:root{--blue:#2968EE;--blue-d:#1B4FC4;--navy:#102044;--soft:#F3F7FF;--line:#DFE7F5;--text:#182033;--muted:#5B677A;--green:#27A86C;--amber:#E8940C;--red:#E4573D;--bg:#f7f9fd;}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--text);background:var(--bg)}
#shell{display:flex;min-height:100vh}
.sidebar{width:280px;background:#fff;border-right:1px solid var(--line);padding:22px;position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.brand span{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.logo{width:44px;height:44px;border-radius:13px;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:800;box-shadow:0 10px 25px #2968ee33}
.whoami{background:var(--soft);border-radius:12px;padding:10px 12px;font-size:13px;margin-bottom:12px}
.whoami strong{color:var(--navy);display:block}.whoami span{color:var(--muted);font-size:11px}
label{display:block;color:var(--muted);font-size:11px;font-weight:800;margin-bottom:7px;text-transform:uppercase;letter-spacing:.06em}
select,input,textarea{width:100%;border:1px solid var(--line);border-radius:11px;padding:10px;background:#fff;color:var(--text);font-family:inherit;font-size:14px}
textarea{min-height:80px;resize:vertical}
nav{display:grid;gap:5px;margin-top:4px}
.nav-group{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin:12px 6px 2px;cursor:pointer;user-select:none}
.nav-group .chev{transition:transform .2s}.nav-group.collapsed .chev{transform:rotate(-90deg)}
.nav-section{display:grid;gap:5px;overflow:hidden;transition:max-height .25s ease}.nav-section.collapsed{max-height:0!important}
nav button{border:0;background:transparent;text-align:left;padding:11px 13px;border-radius:11px;font-weight:700;color:var(--navy);cursor:pointer;font-size:14px;display:flex;justify-content:space-between;align-items:center;width:100%}
nav button.active,nav button:hover{background:var(--soft);color:var(--blue)}
.side-foot{margin-top:auto;color:var(--muted);font-size:11px;padding-top:18px}
.badge{background:var(--red);color:#fff;border-radius:999px;font-size:11px;font-weight:800;padding:1px 7px;min-width:18px;text-align:center}.badge:empty{display:none}
main{flex:1;padding:26px 32px;min-width:0}
header{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:22px}
.header-right{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.eyebrow{margin:0 0 4px;color:var(--blue);font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.1em}
h1{margin:0;color:var(--navy);font-size:30px}h2{color:var(--navy);margin:0 0 14px;font-size:22px}h3{margin:6px 0}
.search{min-width:220px}
.grid{display:grid;gap:16px}.stats{grid-template-columns:repeat(6,minmax(0,1fr))}.cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.two-col{grid-template-columns:1.5fr 1fr;align-items:start}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 8px 20px #1020440a}.spacer{height:18px}
.stat .ico{font-size:18px}.stat strong{font-size:27px;color:var(--navy);display:block;line-height:1.15}.stat span,.muted{color:var(--muted)}
.stat.click{cursor:pointer;transition:transform .12s,box-shadow .12s}.stat.click:hover{transform:translateY(-2px);box-shadow:0 12px 28px #2968ee22;border-color:#c3d4fb}
.pill{display:inline-block;padding:4px 9px;border-radius:999px;background:var(--soft);color:var(--blue);font-size:11px;font-weight:800}
.pill.required{background:#fff3d6;color:#875800}.pill.draft{background:#eee;color:#555}.pill.green{background:#e3f6ec;color:#1c7a4f}.pill.amber{background:#fdf0dc;color:#9a6209}.pill.red{background:#fde8e4;color:#a3341f}.pill.grey{background:#eef1f6;color:#5b677a}
.course{display:flex;flex-direction:column}
.thumb{font-size:32px;background:var(--soft);border-radius:13px;height:64px;width:64px;display:grid;place-items:center;margin-bottom:9px}
.progress{height:8px;background:#e9eef8;border-radius:999px;overflow:hidden;margin:11px 0}.bar{height:100%;background:linear-gradient(90deg,var(--blue),#75A2FF)}
.row{display:flex;justify-content:space-between;gap:10px;align-items:center}.wrap{flex-wrap:wrap}
.btn{border:0;border-radius:11px;background:var(--blue);color:#fff;font-weight:800;padding:10px 14px;cursor:pointer;font-size:14px}
.btn:hover{background:var(--blue-d)}.btn.secondary{background:var(--soft);color:var(--blue)}.btn.ghost{background:transparent;color:var(--navy);position:relative}
.btn.danger{background:#fde8e4;color:#a3341f}.btn.ok{background:#e3f6ec;color:#1c7a4f}.btn.sm{padding:7px 11px;font-size:13px}.btn:disabled{opacity:.5;cursor:not-allowed}
.lesson{display:flex;justify-content:space-between;gap:12px;padding:14px;border:1px solid var(--line);border-radius:13px;margin-top:10px;align-items:flex-start}.lesson .body{flex:1;min-width:0}
.complete{color:var(--green);font-weight:800;white-space:nowrap}
.ltype{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
/* ===== widescreen video ===== */
.videowrap{position:relative;margin-top:12px;width:100%;max-width:1100px;margin-left:auto;margin-right:auto}
.vid16{position:relative;width:100%;padding-top:56.25%;border-radius:14px;overflow:hidden;background:#000}
.vid16 iframe,.vid16 video{position:absolute;inset:0;width:100%;height:100%;border:0}
.seek-note{font-size:12px;color:var(--amber);margin-top:6px;font-weight:700}
.doc-frame{width:100%;height:72vh;min-height:520px;border:1px solid var(--line);border-radius:12px;margin-top:10px}
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:15px;overflow:hidden;border:1px solid var(--line)}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}
th{background:var(--soft);color:var(--navy);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
th.sortable{cursor:pointer;user-select:none}th.sortable:hover{color:var(--blue)}
tr:last-child td{border-bottom:0}tr.clickrow{cursor:pointer}tr.clickrow:hover td{background:#f5f8ff}
.q{border:1px solid var(--line);border-radius:13px;padding:15px;margin-top:11px}
.opt{display:flex;gap:10px;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:10px;margin-top:8px;cursor:pointer}.opt:hover{border-color:var(--blue)}.opt input{width:auto}
.field{margin-bottom:12px}.field label{margin-bottom:5px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:end}.filters .field{margin:0}.filters input,.filters select{width:auto;min-width:150px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.check{display:flex;gap:9px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:13px;cursor:pointer}.check input{width:auto}
.pick-list{max-height:280px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;padding:6px}
.pick-list .check{border:0;border-bottom:1px solid var(--line);border-radius:0}
.cert{background:linear-gradient(135deg,#fff,#f2f6ff);border:3px solid var(--blue);border-radius:18px;padding:40px;text-align:center;max-width:700px;margin:auto}
.cert .seal{width:66px;height:66px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;margin:0 auto 12px;font-weight:800;font-size:20px}
.cert .name{font-size:32px;font-weight:800;color:var(--blue);margin:12px 0}.cert .serial{color:var(--muted);font-size:12px;margin-top:16px}
.org ul{list-style:none;margin:0;padding-left:26px;border-left:2px solid var(--line)}.org>ul{padding-left:0;border-left:0}.org li{margin:8px 0}
.node{display:inline-flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 13px;box-shadow:0 4px 12px #1020440a;min-width:230px}.node strong{color:var(--navy)}.node small{color:var(--muted)}
.modal-backdrop{position:fixed;inset:0;background:#10204488;display:none;align-items:center;justify-content:center;z-index:60;padding:20px}
.modal-backdrop.show{display:flex}
.modal{background:#fff;border-radius:18px;padding:24px;max-width:720px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #10204455}
#confirm{z-index:70}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(30px);background:var(--navy);color:#fff;padding:12px 20px;border-radius:12px;font-weight:700;opacity:0;transition:.25s;pointer-events:none;z-index:100}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eaf0ff,#f7f9fd);padding:20px}
.auth-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;max-width:400px;width:100%;box-shadow:0 20px 60px #10204422}
.auth-card .btn{width:100%;margin-top:6px}
.auth-card input[readonly]{background:var(--soft);color:var(--navy);cursor:default}
.auth-link,
#rlms-root button.auth-link{
  appearance:none;-webkit-appearance:none;
  background:transparent!important;border:0!important;box-shadow:none!important;
  color:var(--blue)!important;font-weight:700!important;cursor:pointer;font-size:13px;
  padding:8px 0;width:auto!important;display:inline-block;margin:8px 0 0
}
.auth-link:hover{text-decoration:underline;background:transparent!important}
.pw-checks{list-style:none;padding:0;margin:4px 0 12px;text-align:left}
.pw-checks li{font-size:12px;color:var(--muted);margin:5px 0;padding-left:18px;position:relative;font-weight:600}
.pw-checks li:before{content:"○";position:absolute;left:0}
.pw-checks li.ok{color:var(--green)}
.pw-checks li.ok:before{content:"✓"}
.pw-checks li.bad{color:var(--red)}
.pw-checks li.bad:before{content:"✕"}
.email-preview{width:100%;height:480px;border:1px solid var(--line);border-radius:12px;background:#fff;margin-top:8px}
.err{color:var(--red);font-size:13px;font-weight:700;margin:6px 0}
.imp-bar{background:#fff3d6;color:#875800;border-radius:10px;padding:6px 11px;font-size:12px;font-weight:800;display:flex;gap:8px;align-items:center}
.result{max-width:560px;margin:40px auto;text-align:center;border-radius:22px;padding:48px 36px;color:#fff}
.result.pass{background:linear-gradient(135deg,#27A86C,#1c7a4f)}.result.fail{background:linear-gradient(135deg,#8a94a6,#5B677A)}

/* ===== WordPress theme isolation ===== */
/* Width/overflow is fixed at runtime by app.js (walks up the DOM and clears
   theme container constraints directly — more reliable than CSS alone when
   an ancestor has overflow:hidden). This just re-asserts our own font
   against theme styles that target headings/body text. */
#rlms-root{width:100%;box-sizing:border-box}
#rlms-root *{box-sizing:border-box}
#rlms-root,
#rlms-root h1,#rlms-root h2,#rlms-root h3,
#rlms-root button,#rlms-root input,#rlms-root select,#rlms-root textarea{
  font-family:Inter,"Segoe UI",Arial,sans-serif !important;
}
#rlms-root #shell{min-height:100vh}
.result .big{font-size:64px;line-height:1;margin-bottom:12px}.result h1{color:#fff;font-size:32px;margin:0 0 8px}.result p{opacity:.95;font-size:16px;margin:0 0 22px}.result .btn{background:#fff;color:var(--navy)}
.folder{border:1px solid var(--line);border-radius:16px;margin-bottom:14px;overflow:hidden;background:#fff}.folder.sub{margin-left:20px;border-left:3px solid var(--soft)}
.folder-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;cursor:pointer;user-select:none;background:var(--soft)}.folder-head strong{color:var(--navy);font-size:16px}.folder-head .chev{transition:transform .2s}
.folder.collapsed .chev{transform:rotate(-90deg)}.folder-body{padding:16px}.folder.collapsed .folder-body{display:none}
.viewer{display:grid;grid-template-columns:280px 1fr;gap:18px;align-items:start}
.toc{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;position:sticky;top:20px}
.toc-head{padding:14px 16px;border-bottom:1px solid var(--line)}.toc-head h3{margin:0;color:var(--navy)}
.toc-item{display:flex;gap:10px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line);cursor:pointer;font-size:14px}.toc-item:last-child{border-bottom:0}.toc-item:hover{background:var(--soft)}
.toc-item.active{background:var(--soft);box-shadow:inset 3px 0 0 var(--blue)}.toc-item.locked{opacity:.5;cursor:not-allowed}
.toc-num{width:24px;height:24px;border-radius:50%;background:#e9eef8;color:var(--navy);display:grid;place-items:center;font-size:12px;font-weight:800;flex:none}.toc-item.done .toc-num{background:var(--green);color:#fff}
.toc-item .tt{flex:1;min-width:0}.toc-item .tt small{color:var(--muted);text-transform:uppercase;font-size:10px;font-weight:800;letter-spacing:.04em}
.stage{border:1px solid var(--line);border-radius:16px;background:#fff;padding:26px;min-height:460px}
.stage-foot{display:flex;justify-content:space-between;align-items:center;margin-top:20px;gap:12px}
.pdf-opts{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0 16px}.pdf-opts label{display:flex;gap:7px;align-items:center;color:var(--text);text-transform:none;font-weight:600;font-size:13px;letter-spacing:0}.pdf-opts input{width:auto}
.tab-row{display:flex;gap:8px;border-bottom:1px solid var(--line);margin-bottom:16px}.tab-row button{border:0;background:none;padding:10px 14px;font-weight:800;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent}.tab-row button.on{color:var(--blue);border-bottom-color:var(--blue)}
.policy-doc{border:1px solid var(--line);border-radius:14px;padding:22px;background:#fff;max-height:340px;overflow-y:auto;line-height:1.7}
.sig-pad{border:2px dashed var(--line);border-radius:12px;padding:14px;text-align:center}
.sig-input{font-family:'Segoe Script','Brush Script MT',cursive;font-size:26px;text-align:center;border:0;border-bottom:2px solid var(--navy);border-radius:0;max-width:320px;margin:6px auto 0}
.slide-view [contenteditable]{outline:2px dashed transparent;border-radius:6px;transition:outline .15s;cursor:text}.slide-view [contenteditable]:hover{outline-color:#ffffff66}.slide-view [contenteditable]:focus{outline-color:#ffffffcc;background:#ffffff14}
.edit-hint{font-size:12px;color:var(--muted);margin:8px 0 0}
.studio{display:grid;grid-template-columns:230px 1fr;gap:16px;align-items:start}
.slide-strip{display:flex;flex-direction:column;gap:8px;max-height:70vh;overflow-y:auto}
.slide-chip{border:2px solid var(--line);border-radius:12px;padding:10px;background:#fff;cursor:pointer;font-size:12px}.slide-chip.active{border-color:var(--blue);background:var(--soft)}
.slide-chip strong{display:block;color:var(--navy);font-size:13px;margin-bottom:2px}.slide-chip .mini{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slide-canvas{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.slide-view{aspect-ratio:16/9;padding:44px;display:flex;flex-direction:column;justify-content:center;color:#fff;position:relative}
.slide-view h2{color:#fff;font-size:34px;margin:0 0 16px;line-height:1.15}.slide-view ul{margin:0;padding-left:22px;font-size:19px;line-height:1.7}
.slide-view.image_left{flex-direction:row;gap:28px;align-items:center}.slide-view.image_left img{max-width:42%;border-radius:12px;max-height:80%}
.slide-view.quote h2{font-size:28px;font-style:italic;text-align:center}.slide-view img.hero{max-height:44%;border-radius:12px;margin-bottom:16px;object-fit:contain}
/* image_full = exact uploaded slide */
.slide-view.image_full{padding:0;background:#000!important}.slide-view.image_full img.full{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.audio-tag{position:absolute;top:14px;right:16px;background:#ffffff22;border:1px solid #ffffff55;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:800;z-index:2}
.kc-badge{position:absolute;top:14px;left:16px;background:#ffffff22;border:1px solid #ffffff55;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:800;z-index:2}
.dots{display:flex;gap:6px;flex-wrap:wrap;max-width:60%}.dot{width:9px;height:9px;border-radius:50%;background:#cfd8ea}.dot.on{background:var(--blue)}
.rec-dot{width:9px;height:9px;border-radius:50%;background:var(--red);display:inline-block;margin-right:6px;animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.3}}
@media(max-width:1000px){#shell{display:block}.sidebar{width:auto;height:auto;position:relative}.stats{grid-template-columns:repeat(2,1fr)}.two-col,.studio,.viewer{grid-template-columns:1fr}.toc{position:relative;top:0}header{display:block}.header-right{margin-top:12px}.search{min-width:0}.form-grid,.checks{grid-template-columns:1fr}}
@media print{.sidebar,header,.print-hide,.toc{display:none!important}main{padding:0}.tx-noprint{display:none!important}}

/* ===== Branding: login hero ===== */
.auth-screen.has-hero{background-repeat:no-repeat}
.auth-screen.has-hero .auth-card{background:#fffffff2;backdrop-filter:blur(3px);box-shadow:0 24px 70px #06122e66}
.auth-hero-overlay{position:absolute;inset:0;pointer-events:none}

/* ===== Branding: dashboard hero ===== */
.dash-hero{border-radius:18px;padding:26px 28px;margin-bottom:18px;background:linear-gradient(120deg,var(--blue),#75A2FF);color:#fff;box-shadow:0 12px 30px #2968ee2e}
.dash-hero.has-img{color:#fff}
.dash-hero-inner h2{color:#fff;margin:0 0 6px;font-size:26px}
.dash-hero-inner p{margin:0;opacity:.95;font-size:15px;max-width:70ch}

/* ===== Branding: scrolling announcement banner ===== */
.ticker{position:relative;overflow:hidden;background:var(--soft);border:1px solid var(--line);border-radius:12px;margin-bottom:16px;padding:9px 0}
.ticker-track{display:inline-flex;white-space:nowrap;will-change:transform;animation-name:rlms-ticker;animation-timing-function:linear;animation-iteration-count:infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-item{padding:0 34px;font-weight:700;color:var(--navy);font-size:14px;position:relative}
.ticker-item::after{content:"•";position:absolute;right:0;color:var(--blue);opacity:.5}
@keyframes rlms-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ===== Appearance panel: image pickers ===== */
.brand-img{border:1px dashed var(--line);border-radius:12px;background:var(--soft);min-height:110px;display:grid;place-items:center;overflow:hidden;margin-bottom:8px}
.brand-img img{width:100%;max-height:220px;object-fit:contain;display:block}
.brand-img-empty{color:var(--muted);font-size:13px;font-weight:700;padding:24px}

/* ===== Archived users ===== */
tr.row-archived td{background:#fbfaf5}
tr.row-archived td:first-child{box-shadow:inset 3px 0 0 var(--amber)}

/* ===== Fix: dashboard hero never collapses into a thin sliver ===== */
.dash-hero{min-height:120px;display:flex;align-items:center;background-size:cover!important;background-position:center!important}
.dash-hero.has-img{min-height:200px}
.dash-hero-inner{width:100%}

/* ===== Rich dashboard banners (Banner Builder) ===== */
.dash-banner{border-radius:16px;overflow:hidden;margin-bottom:16px;box-shadow:0 8px 22px #10204414}
.dash-banner .banner-text{padding:22px 26px}
.dash-banner h2{margin:0 0 6px;font-size:22px}
.dash-banner p{margin:0;font-size:15px;opacity:.96;line-height:1.5}
.dash-banner .banner-btns{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.banner-btn{display:inline-block;padding:9px 16px;border-radius:10px;font-weight:800;font-size:14px;text-decoration:none;background:#fff;color:#12244b;border:2px solid #fff;transition:transform .1s}
.banner-btn:hover{transform:translateY(-1px)}
.banner-btn.secondary{background:#ffffff2b;color:#fff;border-color:#ffffff88}
.banner-btn.ghost{background:transparent;color:#fff;border-color:#ffffffcc}
.dash-banner.text-only{color:#fff}
.dash-banner.split{display:grid;grid-template-columns:220px 1fr;align-items:stretch;color:#fff}
.dash-banner.split .banner-media{background-size:cover;background-position:center;min-height:150px}
.dash-banner.img-only{position:relative;min-height:200px;background-size:cover;background-position:center;display:flex;align-items:flex-end}
.dash-banner.img-only .banner-scrim{width:100%;background:linear-gradient(0deg,#0a1730d9,#0a173000);}
@media(max-width:800px){.dash-banner.split{grid-template-columns:1fr}.dash-banner.split .banner-media{min-height:120px}}

/* ===== Header search typeahead dropdown ===== */
.search{position:relative}
.search-drop{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;min-width:280px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 46px #10204426;z-index:80;max-height:60vh;overflow-y:auto;padding:6px}
.sd-group{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:8px 10px 4px}
.sd-item{display:flex;gap:9px;align-items:center;padding:9px 11px;border-radius:9px;cursor:pointer;font-size:14px;color:var(--navy);font-weight:600}
.sd-item:hover{background:var(--soft);color:var(--blue)}
.sd-item span{width:20px;text-align:center}
.sd-empty{padding:14px;color:var(--muted);font-size:13px}

/* ===== Bigger appearance image previews ===== */
.brand-img{min-height:150px}
.brand-img img{max-height:280px}

/* ===== Nested nav sub-groups (Courses / Site & Access under Admin) ===== */
.nav-subgroup{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:8px 6px 2px 14px;cursor:pointer;user-select:none;opacity:.85}
.nav-subgroup .chev{transition:transform .2s}.nav-subgroup.collapsed .chev{transform:rotate(-90deg)}
.nav-subsection{display:grid;gap:4px;overflow:hidden;transition:max-height .25s ease;margin-left:10px;border-left:2px solid var(--line);padding-left:6px}
.nav-subsection.collapsed{max-height:0!important}
.nav-subsection button{font-size:13px;padding:9px 11px}

/* ===== Big banner hero carousel ===== */
.hero-carousel{position:relative;border-radius:18px;overflow:hidden;margin-bottom:18px;min-height:200px}
.hero-carousel .hero-slide{display:none}
.hero-carousel .hero-slide.on{display:block;animation:heroFade .5s ease}
@keyframes heroFade{from{opacity:.3}to{opacity:1}}
.hero-carousel .dash-hero{margin-bottom:0;border-radius:18px}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);background:#ffffffcc;border:0;width:40px;height:40px;border-radius:50%;font-size:24px;line-height:1;cursor:pointer;color:var(--navy);z-index:3;box-shadow:0 4px 12px #10204433}
.hero-arrow:hover{background:#fff}.hero-arrow.left{left:12px}.hero-arrow.right{right:12px}
.hero-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:3}
.hero-dot{width:10px;height:10px;border-radius:50%;background:#ffffff88;cursor:pointer;border:1px solid #ffffffcc}.hero-dot.on{background:#fff}

/* ===== Quiz builder ===== */
.qb-card{border-left:4px solid var(--blue)}
.hs-wrap{position:relative;display:inline-block;max-width:100%;margin-top:8px;border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:crosshair}
.hs-wrap img{display:block;max-width:100%;max-height:360px}
.hs-spot{position:absolute;transform:translate(-50%,-50%);border:3px solid #27A86C;background:#27a86c33;border-radius:50%;pointer-events:none}

/* ===== Quiz player ===== */
.q-img{max-width:100%;max-height:280px;border-radius:10px;margin:8px 0;display:block}
.rating{display:flex;gap:6px;font-size:30px;margin-top:6px}
.rate-item{cursor:pointer;color:#cfd8ea;user-select:none;transition:transform .1s;min-width:34px;text-align:center;border:1px solid transparent;border-radius:8px}
.rate-item:hover{transform:scale(1.15)}.rate-item.on{color:var(--amber)}
.rank-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.rank-row{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:#fff}
.likert{width:100%;border-collapse:collapse;margin-top:8px}
.likert th,.likert td{text-align:center;padding:8px;border:1px solid var(--line);font-size:13px}
.likert th:first-child,.likert td:first-child{text-align:left}
.drag-tray{display:flex;flex-wrap:wrap;gap:8px;min-height:52px;border:2px dashed var(--line);border-radius:12px;padding:10px;margin:8px 0;background:var(--soft)}
.drag-chip{background:#fff;border:1px solid var(--blue);color:var(--navy);border-radius:9px;padding:8px 12px;font-weight:700;font-size:14px;cursor:grab;box-shadow:0 2px 6px #10204414}
.drag-chip:active{cursor:grabbing}
.drop-zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.drop-zone{border:2px solid var(--line);border-radius:12px;padding:10px;min-height:90px;background:#fff}
.drop-zone .dz-label{font-weight:800;color:var(--navy);font-size:13px;margin-bottom:8px;text-align:center}
.drop-zone .dz-items{display:flex;flex-wrap:wrap;gap:6px;min-height:40px}
.hs-wrap.play{cursor:crosshair}
.hs-marker{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border:3px solid var(--red);border-radius:50%;background:#e4573d33;pointer-events:none}
.match-list{margin-top:8px}
.fill-text{line-height:2.4;font-size:16px;margin-top:8px}
.blank-input{display:inline-block;width:130px;margin:0 4px;padding:4px 8px;border:0;border-bottom:2px solid var(--blue);border-radius:0;background:var(--soft)}

/* ===== Quiz builder: drag & drop card editor (bigger, readable inputs) ===== */
.drag-edit-item{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px;background:#fff}
.drag-edit-input{width:100%;font-size:15px;padding:11px}

/* ===== Image-based certificate (uploaded template with printed overlay) ===== */
.cert-img-wrap{position:relative;max-width:900px;margin:auto}
.cert-bg{width:100%;display:block;border-radius:8px}
.cert-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6%}
.cert-name{font-size:min(5vw,42px);font-weight:800;color:var(--navy);font-family:'Segoe Script','Brush Script MT',cursive}
.cert-course{font-size:min(3.2vw,24px);font-weight:700;color:var(--blue);margin-top:2%}
.cert-meta{font-size:min(1.8vw,13px);color:var(--muted);margin-top:2%}
@media print{.cert-overlay .cert-name{color:#102044}}

/* ===== "Howdy, [name]" greeting + user photo ===== */
.howdy{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.howdy-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:800;font-size:22px;flex:none;box-shadow:0 8px 20px #2968ee33}
.howdy-initials{background:linear-gradient(135deg,var(--blue),#75A2FF)}
.howdy-photo-wrap{position:relative;cursor:pointer;display:inline-grid}
.howdy-cam{position:absolute;right:-2px;bottom:-2px;background:#fff;border:1px solid var(--line);border-radius:50%;width:24px;height:24px;display:grid;place-items:center;font-size:12px;box-shadow:0 2px 6px #10204426}
.howdy-hi{font-size:24px;font-weight:800;color:var(--navy)}
/* sidebar whoami avatar */
.wa-row{display:flex;align-items:center;gap:10px}
.wa-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;background:linear-gradient(135deg,var(--blue),#75A2FF);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px}
.whoami .wa-row strong{display:block}

/* ===== Quiz already-taken screen ===== */
.quiz-taken{text-align:center;padding:40px 20px;border:1px dashed var(--line);border-radius:16px;background:var(--soft);margin-top:8px}
.quiz-taken .qt-emoji{font-size:52px;line-height:1;margin-bottom:10px}
.quiz-taken h3{color:var(--navy);margin:0 0 6px;font-size:22px}