:root{--bg:#f6f7fb;--panel:#fff;--ink:#1b1740;--muted:#77738e;--line:#e9e7f1;--brand:#2d176f;--brand2:#6d3be7;--good:#137b55;--warn:#a66a00;--bad:#b63c44;--shadow:0 12px 35px rgba(34,20,90,.08);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}button,input,select,textarea{font:inherit}.hidden{display:none!important}.muted{color:var(--muted)}.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 15% 20%,#5d34cc 0,#281267 36%,#120a34 100%)}.login-card{width:min(560px,100%);background:#fff;border-radius:28px;padding:34px;box-shadow:0 25px 75px rgba(0,0,0,.28)}.brand-mark{width:72px;height:72px;border-radius:22px;background:linear-gradient(135deg,var(--brand2),#efb63d);display:grid;place-items:center;color:#fff;font-weight:900;letter-spacing:.5px}.brand-mark.small{width:42px;height:42px;border-radius:13px;font-size:12px}.login-card h1{margin:18px 0 4px;font-size:30px}.login-card>p{margin:0 0 24px;color:var(--muted)}.stack{display:grid;gap:14px}.stack label,.form-grid label{display:grid;gap:7px;font-size:13px;font-weight:700}.stack input,.form-grid input,.form-grid select,.form-grid textarea,.toolbar input,.toolbar select{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 12px;background:#fff;color:var(--ink);outline:none}.stack input:focus,.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.toolbar input:focus,.toolbar select:focus{border-color:#8b6be6;box-shadow:0 0 0 3px rgba(109,59,231,.09)}.sample-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}.sample-account{border:1px solid var(--line);background:#faf9ff;padding:10px;border-radius:12px;text-align:left;cursor:pointer}.sample-account strong,.sample-account span{display:block}.sample-account span{font-size:12px;color:var(--muted);margin-top:2px}.btn{border:0;border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer}.btn.primary{background:linear-gradient(135deg,var(--brand2),var(--brand));color:#fff}.btn.secondary{background:#eee9ff;color:var(--brand)}.btn.ghost{background:#f5f4f9;color:var(--ink)}.btn.danger{background:#fff0f1;color:var(--bad)}.icon-btn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 10px;cursor:pointer}.app{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:250px;background:linear-gradient(180deg,#25115e,#160b3e);color:#fff;padding:18px;display:flex;flex-direction:column;z-index:20}.sidebar-brand{display:flex;align-items:center;gap:10px;padding:4px 4px 20px}.sidebar-brand strong,.sidebar-brand span{display:block}.sidebar-brand span{font-size:12px;color:#cfc4ef}.nav-menu{display:grid;gap:5px;overflow:auto}.nav-item{display:flex;align-items:center;gap:10px;border:0;background:transparent;color:#d9d2ef;padding:10px 12px;border-radius:12px;text-align:left;cursor:pointer;font-weight:700}.nav-item:hover,.nav-item.active{background:rgba(255,255,255,.12);color:#fff}.nav-icon{width:20px;text-align:center}.sidebar-footer{margin-top:auto;display:grid;gap:7px}.sidebar-footer a{font-size:12px;color:#d5cef0;text-decoration:none}.main{margin-left:250px;min-height:100vh}.topbar{height:78px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:10}.topbar h2{margin:0 0 3px;font-size:21px}.crumb{font-size:12px;color:var(--muted)}.topbar-actions{display:flex;align-items:center;gap:10px}.admin-chip{display:flex;align-items:center;gap:8px}.admin-chip strong,.admin-chip span{display:block}.admin-chip span{font-size:11px;color:var(--muted)}.avatar{width:36px;height:36px;border-radius:50%;background:#eee9ff;color:var(--brand);display:grid;place-items:center;font-weight:900}.content{padding:24px;max-width:1500px;margin:auto}.hero{background:linear-gradient(135deg,#2c176e,#6b3adc);border-radius:24px;padding:28px;color:#fff;display:flex;justify-content:space-between;gap:24px;align-items:center;box-shadow:var(--shadow)}.hero h1{margin:5px 0 8px;font-size:30px}.hero p{margin:0;color:#ddd4fa}.eyebrow{font-size:11px;letter-spacing:1.5px;font-weight:900;color:#f3d275}.hero-badge{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);border-radius:18px;padding:16px 20px;min-width:200px}.hero-badge span,.hero-badge small{display:block;color:#ddd4fa}.hero-badge strong{font-size:34px;display:block;margin:4px 0}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}.stat-card,.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.stat-card{padding:18px}.stat-top{display:flex;justify-content:space-between;align-items:center}.stat-card .label{font-size:12px;color:var(--muted);font-weight:800}.stat-icon{font-size:20px}.stat-card .value{font-size:28px;font-weight:900;margin:7px 0}.trend{font-size:12px;color:var(--muted)}.panel{padding:18px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.panel-head h3{margin:0 0 3px;font-size:17px}.panel-head p{margin:0;color:var(--muted);font-size:12px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.spacer-top{margin-top:14px}.toolbar{display:flex;gap:10px;margin-bottom:12px}.toolbar .search{max-width:360px}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;min-width:720px}.data-table th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding:10px;border-bottom:1px solid var(--line)}.data-table td{padding:11px 10px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}.data-table small{color:var(--muted)}.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#f0eef7;font-size:11px;font-weight:800}.badge.active,.badge.published,.badge.completed,.badge.approved{background:#eaf8f1;color:var(--good)}.badge.pending,.badge.draft{background:#fff5dc;color:var(--warn)}.badge.rejected,.badge.inactive{background:#ffeded;color:var(--bad)}.row-actions{display:flex;gap:6px;justify-content:flex-end}.mini-btn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 8px;cursor:pointer;font-size:12px}.danger-text{color:var(--bad)}.empty{text-align:center;color:var(--muted);padding:28px!important}.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.kpi{background:#faf9ff;border:1px solid var(--line);padding:13px;border-radius:13px}.kpi strong,.kpi span{display:block}.kpi strong{font-size:22px}.kpi span{font-size:11px;color:var(--muted);margin-top:3px}.activity{display:grid}.activity-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.activity-dot{width:34px;height:34px;border-radius:10px;background:#f4f1ff;display:grid;place-items:center}.activity-item strong{font-size:13px}.activity-item p{margin:3px 0 0;color:var(--muted);font-size:11px}.progress{height:8px;border-radius:99px;background:#eee;overflow:hidden;min-width:100px}.progress>span{display:block;height:100%;background:linear-gradient(90deg,#6c3de0,#efb63d)}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.content-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}.content-card h4{margin:8px 0 5px}.content-card p{font-size:12px;color:var(--muted);margin:0 0 12px}.content-card .meta{display:flex;gap:6px;flex-wrap:wrap}.game-card{position:relative;overflow:hidden}.game-cover{height:130px;border-radius:12px;background:linear-gradient(135deg,#4b27ad,#efb63d);display:grid;place-items:center;font-size:46px}.game-actions{display:flex;gap:8px;margin-top:12px}.notice{border-radius:14px;padding:13px 14px;background:#fff8e7;border:1px solid #f1dfab;font-size:13px}.modal{position:fixed;inset:0;background:rgba(17,10,42,.58);display:grid;place-items:center;padding:20px;z-index:50}.modal-card{width:min(800px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:20px;padding:18px;box-shadow:0 30px 100px rgba(0,0,0,.3)}.modal-card.wide{width:min(1100px,100%)}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.modal-head h3{margin:0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid label.full,.form-actions{grid-column:1/-1}.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.switch{display:flex!important;align-items:center;gap:8px}.switch input{width:auto!important}.game-frame-host{min-height:520px;background:#111;border-radius:14px;overflow:hidden}.game-frame-host iframe{width:100%;height:70vh;border:0;background:#fff}.game-frame-fallback{display:grid;place-items:center;min-height:420px;color:#fff;text-align:center;padding:30px}.portal-welcome{display:flex;gap:14px;align-items:center}.portal-avatar{width:68px;height:68px;border-radius:22px;background:#fff1bc;display:grid;place-items:center;font-size:34px}.certificate{border:3px double #c89d32;padding:18px;border-radius:14px;text-align:center;background:#fffdf5}.certificate h4{font-family:Georgia,serif;font-size:23px;margin:5px}.quiz-choice{display:block;width:100%;text-align:left;margin:7px 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}.quiz-choice:hover{background:#f7f4ff}.quiz-choice:disabled{cursor:not-allowed;opacity:.62;background:#f7f7fa}.mobile-only{display:none}@media(max-width:1100px){.stats,.kpi-row{grid-template-columns:repeat(2,1fr)}.card-grid,.grid-3{grid-template-columns:repeat(2,1fr)}}@media(max-width:820px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:translateX(0)}.main{margin-left:0}.mobile-only{display:inline-block}.topbar{padding:0 12px}.admin-chip{display:none}.content{padding:14px}.grid-2,.grid-3,.card-grid{grid-template-columns:1fr}.hero{align-items:flex-start;flex-direction:column}.hero-badge{width:100%}.sample-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid label.full,.form-actions{grid-column:1}.topbar-actions .secondary{display:none}}@media(max-width:520px){.stats,.kpi-row{grid-template-columns:1fr}.login-card{padding:22px}.hero h1{font-size:24px}}
.toast{position:fixed;right:20px;bottom:20px;background:#1c153d;color:#fff;padding:12px 16px;border-radius:12px;box-shadow:0 12px 35px rgba(0,0,0,.2);opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s;z-index:100}.toast.show{opacity:1;transform:translateY(0)}

.network-badge{display:inline-flex;align-items:center;gap:5px;padding:7px 10px;border-radius:999px;font-size:11px;font-weight:900;background:#f0eef7;color:var(--muted);white-space:nowrap}.network-badge.online{background:#eaf8f1;color:var(--good)}.network-badge.offline{background:#fff5dc;color:var(--warn)}.health-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.health-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:17px;box-shadow:var(--shadow)}.health-card h3{margin:9px 0 5px}.health-card p{margin:0;color:var(--muted);font-size:12px}.health-status{font-size:11px;font-weight:900}.health-status.good{color:var(--good)}.health-status.warn{color:var(--warn)}.health-status.bad{color:var(--bad)}.checklist{display:grid;grid-template-columns:1fr 1fr;gap:10px}.checklist>div{background:#faf9ff;border:1px solid var(--line);border-radius:11px;padding:11px;font-size:13px}.checklist code{background:#eee9ff;padding:2px 5px;border-radius:5px}@media(max-width:900px){.health-grid{grid-template-columns:1fr 1fr}.network-badge{display:none}}@media(max-width:600px){.health-grid,.checklist{grid-template-columns:1fr}}

.video-summary{font-size:13px;color:var(--muted);margin:-4px 0 12px}.video-summary strong{color:var(--ink);font-size:15px}.video-summary span{padding:0 5px}.video-toolbar{flex-wrap:wrap;align-items:center}.video-toolbar .search{min-width:260px;flex:1}.video-toolbar select{width:auto;min-width:130px}.pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.pagination>div{display:flex;gap:8px;align-items:center}.pagination select{border:1px solid var(--line);border-radius:8px;padding:6px;background:#fff}.page-count{font-weight:800;color:var(--ink)}@media(max-width:700px){.pagination{align-items:flex-start;flex-direction:column}.pagination>div{flex-wrap:wrap}.video-toolbar>*{width:100%!important}.video-toolbar .search{min-width:0}}

/* Option 1 — Royal Blue + Gold PABS branding */
:root{--bg:#f7f8fc;--panel:#fff;--ink:#10244f;--muted:#6d7893;--line:#e4e8f2;--brand:#082b73;--brand2:#145fc1;--gold:#e7ab20;--gold2:#ffd86b;--shadow:0 14px 40px rgba(8,43,115,.10)}
.login-shell{min-height:100vh;padding:0;background:linear-gradient(135deg,#061d4f 0%,#0c3e92 58%,#e1aa2b 160%);display:block;overflow:auto}
.login-layout{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(430px,.92fr);max-width:1600px;margin:auto}
.login-hero{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:54px 58px;color:#fff;overflow:hidden}
.login-hero:before{content:"";position:absolute;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(255,216,107,.20),rgba(255,255,255,0) 68%);top:-170px;left:-170px;pointer-events:none}
.logo-frame{position:relative;width:min(530px,82%);aspect-ratio:1;border-radius:34px;padding:8px;background:linear-gradient(145deg,#ffe287,#b87800);box-shadow:0 26px 70px rgba(0,0,0,.28);z-index:1}
.logo-frame img{width:100%;height:100%;display:block;object-fit:cover;border-radius:27px}
.hero-copy{position:relative;text-align:center;max-width:650px;margin-top:30px;z-index:1}
.login-eyebrow{font-size:12px;font-weight:900;letter-spacing:2px;color:#ffdd75}
.hero-copy h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(32px,4vw,54px);margin:9px 0 8px;color:#fff}
.hero-copy p{font-size:17px;line-height:1.6;margin:0 auto;color:#dce8ff;max-width:560px}
.login-feature-pills{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}
.login-feature-pills span{padding:9px 13px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.09);border-radius:999px;font-size:12px;font-weight:800;backdrop-filter:blur(5px)}
.login-panel{display:flex;align-items:center;justify-content:center;padding:44px;background:linear-gradient(180deg,#fffaf0,#fff)}
.login-card{width:min(520px,100%);border:1px solid #ead8a8;background:rgba(255,255,255,.97);border-radius:28px;padding:38px;box-shadow:0 28px 80px rgba(5,30,81,.20)}
.login-brand-row{display:flex;align-items:center;gap:12px;margin-bottom:34px}.login-brand-row img{width:60px;height:60px;border-radius:16px;object-fit:cover;border:2px solid #e4b53a}.login-brand-row strong,.login-brand-row span{display:block}.login-brand-row strong{font-size:24px;color:var(--brand);letter-spacing:.5px}.login-brand-row span{font-size:12px;color:var(--muted);margin-top:2px}
.welcome-kicker{font-size:11px;font-weight:900;letter-spacing:2px;color:#b47a00}.login-card h2{font-size:32px;line-height:1.12;margin:8px 0;color:var(--brand)}.login-subtitle{margin:0 0 28px!important;color:var(--muted)!important;line-height:1.5}
.stack{gap:18px}.stack label{color:#25375f}.stack input{padding:14px 15px;border-radius:13px;border:1px solid #d9deea;background:#fbfcff}.stack input:focus{border-color:#d3a22a;box-shadow:0 0 0 4px rgba(231,171,32,.14)}
.btn.primary{background:linear-gradient(135deg,#0b3b8e,#1467ce);box-shadow:0 9px 22px rgba(20,95,193,.22)}.login-submit{padding:14px 18px;font-size:15px;border:1px solid #315da7}.login-submit:hover{filter:brightness(1.06)}
.login-help{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-top:20px;padding-top:18px;border-top:1px solid #ece7d8;font-size:11px;color:var(--muted)}.login-help a{color:var(--brand2);font-weight:800;text-decoration:none}
.sidebar{background:linear-gradient(180deg,#061d4f,#082b73 55%,#041533)}.sidebar-logo{width:44px;height:44px;object-fit:cover;border-radius:12px;border:2px solid #d7a62e;box-shadow:0 5px 14px rgba(0,0,0,.22)}.sidebar-brand span{color:#d4e2ff}.nav-item{color:#dbe7ff}.nav-item:hover,.nav-item.active{background:linear-gradient(90deg,rgba(231,171,32,.20),rgba(255,255,255,.08));color:#fff}.sidebar-footer a{color:#d9e6ff}
.hero{background:linear-gradient(135deg,#082b73,#155fc0);box-shadow:var(--shadow)}.eyebrow{color:#ffd86b}.hero-badge{border-color:rgba(255,216,107,.28)}.hero-badge span,.hero-badge small{color:#d9e6ff}.progress>span{background:linear-gradient(90deg,#0e57ba,#e7ab20)}.brand-mark{background:linear-gradient(135deg,#0d4da2,#e7ab20)}.btn.secondary{background:#fff3cf;color:#7d5600}.avatar{background:#fff1c7;color:#8b6000}.kpi{background:#fbfcff}.activity-dot{background:#edf4ff}.game-cover{background:linear-gradient(135deg,#0b3b8e,#e7ab20)}
@media(max-width:980px){.login-layout{grid-template-columns:1fr}.login-hero{padding:38px 24px 30px}.logo-frame{width:min(390px,78%)}.hero-copy{margin-top:22px}.hero-copy h1{font-size:34px}.login-panel{padding:24px 18px 42px}.login-card{padding:28px}}
@media(max-width:560px){.login-hero{padding-top:28px}.logo-frame{width:min(330px,88%);border-radius:24px}.logo-frame img{border-radius:18px}.login-feature-pills span{font-size:11px}.login-card{border-radius:22px;padding:24px 20px}.login-card h2{font-size:27px}.login-help{align-items:flex-start;flex-direction:column}.login-brand-row{margin-bottom:25px}.login-brand-row img{width:52px;height:52px}}

/* PABS logo placement throughout the application */
.sidebar-brand{padding:2px 2px 18px;border-bottom:1px solid rgba(255,216,107,.16);margin-bottom:10px}
.sidebar-logo{width:56px;height:56px;border-radius:15px;flex:0 0 56px}
.sidebar-brand strong{font-size:15px;line-height:1.2}
.topbar-brand-logo{width:38px;height:38px;object-fit:cover;border-radius:10px;border:1px solid #d7a62e;margin-right:10px;vertical-align:middle}
.topbar-title-wrap{display:flex;align-items:center}
@media(max-width:520px){.topbar-brand-logo{width:32px;height:32px}.sidebar-logo{width:50px;height:50px;flex-basis:50px}}

.standalone-hint{margin:0!important;text-align:center;font-size:11px;color:var(--muted)!important;line-height:1.5}

.user-chip-logo{width:38px;height:38px;border-radius:10px;object-fit:cover;border:1px solid #d7a62e;box-shadow:0 3px 10px rgba(8,43,115,.12)}
.logout-btn{background:#082b73!important;color:#fff!important;border:2px solid #e7ab20!important;font-weight:950!important;letter-spacing:.55px;padding:10px 15px!important;box-shadow:0 5px 14px rgba(8,43,115,.16)}
.logout-btn:hover{background:#0d4da2!important;transform:translateY(-1px)}
.quick-add-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.quick-add-card{border:1px solid var(--line);background:#fff;border-radius:14px;padding:18px 12px;cursor:pointer;color:var(--ink);display:grid;gap:8px;place-items:center;font-weight:800}
.quick-add-card:hover{border-color:#d7a62e;background:#fffaf0;transform:translateY(-1px)}
.quick-add-card span{font-size:27px}.quick-add-card strong{font-size:12px}
@media(max-width:720px){.quick-add-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.logout-btn{padding:8px 10px!important;font-size:11px}}