/* Layout bridge: original protected PHP screens, Vuexy light components. */
:root { --line:#e6e6e8; --text:#444050; --muted:#6d6b77; --blue:#7367f0; --cyan:#7367f0; --green:#28c76f; --red:#ff4c51; --shadow:0 4px 18px #2f2b3d0b; --radius:10px; }
html,body.admin-body,body.auth-body { background:#f8f7fa; color:#444050; font-family:"Public Sans","Segoe UI",Arial,sans-serif; font-size:16px; }
.admin-bg,.auth-ambient,.hero-admin:before,.hero-admin:after,.auth-card:before,.auth-card:after { display:none; }
.sidebar { width:264px; background:white; padding:20px 14px; border-color:var(--line); box-shadow:2px 0 12px #2f2b3d05; overflow-y:auto; }
.side-brand { padding:0 8px 22px; gap:10px; }
.side-brand img { width:80px; height:42px; object-fit:contain; background:transparent; border:0; border-radius:0; }
.side-brand strong { color:#444050; font-size:1.125rem; letter-spacing:.04em; }
.side-brand span { color:#6d6b77; font-size:.75rem; }
.sidebar nav { padding-top:20px; display:grid; gap:6px; }
.sidebar nav a { min-height:46px; padding:10px 12px; color:#595564; font-size:.9375rem; font-weight:500; border-radius:7px; border:0; gap:8px; }
.sidebar nav a i { color:inherit; font-size:1.25rem; font-style:normal; }
.sidebar nav a b { background:#eeecfd; color:#665ad8; font-size:.75rem; border-radius:5px; padding:2px 6px; }
.sidebar nav a:hover { background:#f4f3f6; color:#444050; }
.sidebar nav a.active { background:linear-gradient(100deg,#7367f0,#9389f4); color:#fff; box-shadow:0 3px 8px #7367f035; }
.sidebar nav a.active i,.sidebar nav a.active b { color:#fff; }
.sidebar nav a.active b { background:#ffffff30; }
.side-footer { border-color:var(--line); color:#6d6b77; font-size:.875rem; }
.side-footer a { color:#665ad8; }
.side-footer span,.side-footer small { color:#6d6b77; }
.admin-main { margin-left:264px; min-width:0; }
.topbar { height:72px; margin:20px 28px 0; padding:0 22px; top:14px; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); backdrop-filter:none; gap:16px; z-index:40; }
.breadcrumb { margin:0; align-items:center; color:#444050; font-size:.9375rem; gap:10px; }
.breadcrumb span,.breadcrumb b { color:#8a8792; }
.admin-chip { border:0; background:transparent; }
.admin-chip>span { background:#eeecfd; color:#7367f0; border-radius:50%; }
.admin-chip b { color:#444050; font-size:.875rem; }
.admin-chip small { color:#6d6b77; font-size:.75rem; }
.menu-btn,.logout-btn { color:#6d6b77; border:1px solid var(--line); border-radius:7px; background:#fff; padding:9px 12px; font-size:.875rem; min-height:40px; }
.top-actions { display:flex; gap:12px; align-items:center; }
.dashboard { padding:28px; max-width:1700px; margin:auto; }
.hero-admin { background:#eeecfd; border:1px solid #e0dcfb; border-radius:10px; padding:26px; min-height:166px; box-shadow:none; gap:20px; }
.hero-admin h1,.page-title h1 { color:#444050; font-size:1.875rem; line-height:1.25; letter-spacing:-.035em; margin:8px 0 10px; }
.hero-admin p,.page-title p { color:#6d6b77; font-size:1rem; max-width:650px; line-height:1.6; }
.eyebrow { color:#665ad8; font-size:.75rem; letter-spacing:.08em; }
.eyebrow i { width:6px; height:6px; box-shadow:none; background:#7367f0; }
.hero-status { min-width:160px; padding:15px; border-radius:8px; background:#fff; border:1px solid #e0dcfb; }
.hero-status span,.hero-status small { color:#6d6b77; font-size:.75rem; }
.hero-status strong { color:#16834b; font-size:1rem; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin:24px 0; }
.metric-grid article { min-height:128px; padding:22px; border:1px solid var(--line); background:white; border-radius:10px; box-shadow:var(--shadow); gap:16px; }
.metric-icon { background:#eeecfd; color:#7367f0; border:0; box-shadow:none; border-radius:9px; width:44px; height:44px; }
.metric-grid article:nth-child(2) .metric-icon { background:#def7ed; color:#198754; }
.metric-grid article:nth-child(3) .metric-icon { background:#dff7fa; color:#098899; }
.metric-grid article:nth-child(4) .metric-icon { background:#fff0df; color:#b86b13; }
.metric-grid article span { color:#6d6b77; font-size:.875rem; }
.metric-grid article strong { color:#444050; font-size:1.75rem; line-height:1.4; }
.metric-grid article small { color:#82808b; font-size:.75rem; }
.dashboard-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
.premium-panel { background:white; border:1px solid var(--line); border-radius:10px; padding:24px; box-shadow:var(--shadow); min-width:0; }
.panel-head { gap:16px; }
.panel-head span,.modal-head span { color:#7367f0; font-size:.75rem; letter-spacing:.06em; }
.panel-head h2,.modal-head h2 { color:#444050; font-size:1.125rem; margin-top:6px; line-height:1.4; }
.quick-actions { gap:14px; }
.quick-actions a { background:white; border:1px solid var(--line); border-radius:8px; padding:18px; color:#444050; }
.quick-actions a:hover { background:#faf9ff; border-color:#b5adf6; transform:none; }
.quick-actions i { color:#7367f0; background:#eeecfd; border-radius:7px; }
.quick-actions strong { color:#444050; font-size:.9375rem; font-weight:600; }
.quick-actions small { color:#6d6b77; font-size:.8125rem; margin-top:6px; }
.live-badge { color:#17864d!important; background:#e5f7ed; border:0; font-size:.75rem; }
.activity-row { gap:12px; padding:15px 0; border-color:var(--line); align-items:start; }
.activity-row>i { box-shadow:none; background:#7367f0; margin-top:6px; }
.activity-row strong { color:#444050; font-size:.875rem; }
.activity-row span,.activity-row time { color:#6d6b77; font-size:.75rem; overflow-wrap:anywhere; }
.table-panel { padding:0; }
.vuexy-pagination { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:18px 22px; border-top:1px solid #e6e6e8; }
.vuexy-pagination>span { margin-right:auto; font-size:.8125rem; color:#6d6b77; }
.vuexy-pagination button { min-height:38px; padding:8px 12px; border:0; border-radius:6px; color:#665ad8; background:#eeecfd; font-size:.875rem; }
.vuexy-pagination button:disabled { opacity:.45; cursor:default; }
@media(max-width:650px) { .vuexy-pagination { flex-wrap:wrap; padding:16px; } .vuexy-pagination>span { flex:1 0 100%; } }
.table-toolbar { padding:18px 22px; gap:16px; }
.table-toolbar>span { font-size:.875rem; color:#6d6b77; }
.search-box { height:44px; border:1px solid #d5d3d8; border-radius:7px; background:#fff; color:#6d6b77; }
.search-box input { color:#444050; font-size:.9375rem; }
.search-box:focus-within { border-color:#7367f0; box-shadow:0 0 0 3px #7367f019; }
.data-table { min-width:820px; }
.data-table th { background:#f5f4f7; color:#595564; font-size:.8125rem; letter-spacing:.03em; font-weight:600; white-space:nowrap; }
.data-table td,.data-table th { padding:16px 20px; border-color:var(--line); }
.data-table td { color:#6d6b77; font-size:.875rem; line-height:1.6; }
.data-table td strong { color:#444050; font-weight:600; }
.data-table td small { color:#6d6b77; font-size:.8125rem; }
.data-table tbody tr:hover { background:#faf9fc; }
.tag { color:#665ad8; background:#eeecfd; border:0; border-radius:5px; font-size:.75rem; }
.row-actions { justify-content:flex-start; }
.row-actions button { color:#665ad8!important; background:#eeecfd!important; border:1px solid transparent!important; font-size:.8125rem!important; font-weight:600!important; border-radius:6px!important; min-height:36px; }
.row-actions button.danger { color:#bd3039!important; background:#ffe9ea!important; }
.primary-btn,.admin-code-row .secondary-btn { color:#fff; background:#7367f0; box-shadow:0 3px 8px #7367f030; border-radius:7px; font-size:.9375rem; font-weight:600; padding:12px 18px; min-height:44px; }
.primary-btn:hover { background:#665ad8; }
.danger-btn { color:#bd3039; background:#ffe9ea; border-color:#ffd5d8; border-radius:7px; font-size:.875rem; }
.status-pill { font-size:.75rem; font-weight:600; border:0; border-radius:5px; }
.status-pill.ok { color:#198754; background:#def7ed; }
.status-pill.off { color:#bd3039; background:#ffe9ea; }
.modal-backdrop { z-index:1050; background:#2f2b3d66; backdrop-filter:none; }
.premium-modal { background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 20px 60px #2f2b3d33; padding:26px; color:#444050; }
.modal-head button { color:#6d6b77; background:#f1f0f3; border-radius:7px; }
.form-grid { gap:18px; }
.form-grid label span { color:#595564; font-size:.875rem; margin-bottom:6px; }
.form-grid input,.form-grid select,.form-grid textarea { background:white; border:1px solid #d5d3d8; color:#444050; border-radius:7px; padding:10px 12px; font-size:1rem; }
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus { border-color:#7367f0; box-shadow:0 0 0 3px #7367f019; }
.form-grid+.primary-btn { margin-top:22px; }
.admin-help,.public-link-note,.admin-verify-field small { color:#6d6b77; font-size:.8125rem; }
.admin-help strong { color:#444050; }
.empty-state { color:#6d6b77; font-size:.9375rem; }
.swal2-popup { background:#fff!important; color:#444050!important; border:1px solid #e6e6e8!important; border-radius:12px!important; }
.swal2-title { color:#444050!important; }
.swal2-html-container { color:#6d6b77!important; }
.swal2-confirm { background:#7367f0!important; border-radius:7px!important; }
.swal2-cancel { border-radius:7px!important; }
.calendar-tab { background:#fff; color:#444050; border-color:var(--line); border-radius:8px; }
.calendar-tab:hover,.calendar-tab.is-active { background:#eeecfd; border-color:#b4adf5; box-shadow:none; transform:none; }
.calendar-tab>span { background:#eeecfd; color:#665ad8; }
.calendar-tab small,.calendar-panel-head p { color:#6d6b77; font-size:.8125rem; }
.calendar-status.is-on { color:#198754; background:#def7ed; border:0; }
.calendar-status.is-off { color:#bd3039; background:#ffe9ea; border:0; }
.mini-btn { color:#665ad8; background:#eeecfd; border:0; border-radius:6px; font-size:.875rem; }
.calendar-panel-head { padding:22px; background:white; }
.exam-category-title h2,.exam-category-title strong { color:#444050; }
.exam-category-title p,.exam-category-title small,.exam-category-count { color:#6d6b77; }
.auth-shell { max-width:1140px; gap:64px; grid-template-columns:1fr 460px; }
.auth-brand-panel h1 { color:#444050; font-size:3rem; line-height:1.15; }
.auth-brand-panel h1 em { background:none; color:#7367f0; -webkit-text-fill-color:#7367f0; }
.auth-brand-panel>p { color:#6d6b77; font-size:1rem; }
.auth-kicker { color:#665ad8; font-size:.8125rem; }
.brand-orbit { width:200px; height:100px; margin-bottom:24px; }
.brand-orbit i { display:none; }
.brand-core { width:200px; height:100px; background:#eeecfd; border:0; border-radius:12px; box-shadow:none; }
.brand-core img { width:165px; }
.security-grid>div { border:1px solid var(--line); background:#fff; border-radius:8px; padding:14px; }
.security-grid span { color:#7367f0; font-size:.75rem; }
.security-grid strong { color:#444050; font-size:.875rem; }
.security-grid small { color:#6d6b77; font-size:.75rem; }
.auth-card { background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:28px; min-height:540px; }
.auth-card-top { color:#6d6b77; font-size:.75rem; border-color:var(--line); }
.auth-step { padding:30px 0; }
.auth-step h2 { color:#444050; font-size:1.5rem; }
.auth-step>p,.auth-note,.auth-note b,.auth-footer,.otp-meta,.otp-meta button { color:#6d6b77; font-size:.875rem; }
.auth-icon { color:#7367f0; background:#eeecfd; border:0; box-shadow:none; border-radius:9px; }
.field-label { font-size:.875rem; color:#595564; }
.premium-field { background:white; border:1px solid #d5d3d8; border-radius:7px; color:#6d6b77; }
.premium-field input,.otp-inputs input { background:#fff; color:#444050; }
.premium-field span { color:#6d6b77; border-color:var(--line); }
.otp-inputs input { border:1px solid #d5d3d8; border-radius:7px; }
.auth-card .primary-btn { width:100%; }
.auth-footer a { color:#665ad8; }
.menu-overlay { display:none; }
@media(max-width:1300px) { .metric-grid { gap:16px; } .metric-grid article { padding:18px; gap:12px; } .metric-icon { display:none; } }
@media(max-width:1050px) { .sidebar { z-index:1060; } .admin-main { margin-left:0; } .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .dashboard-grid { grid-template-columns:1fr; } .menu-overlay.open { display:block; position:fixed; inset:0; background:#2f2b3d55; z-index:1055; border:0; } .auth-shell { grid-template-columns:1fr; gap:24px; } .auth-brand-panel h1 { font-size:2rem; } .auth-card-wrap { width:min(460px,100%); } }
@media(max-width:650px) { .topbar { margin:12px 16px 0; top:8px; padding:0 14px; height:62px; } .dashboard { padding:20px 16px; } .hero-admin { padding:20px; min-height:0; gap:18px; } .hero-admin h1,.page-title h1 { font-size:1.5rem; } .hero-status { width:100%; } .metric-grid { gap:12px; margin:20px 0; } .metric-grid article { padding:16px; min-height:112px; } .metric-grid article strong { font-size:1.5rem; } .premium-panel { padding:20px; } .table-panel { padding:0; } .premium-modal { padding:20px; } .activity-row { grid-template-columns:8px minmax(0,1fr); } .activity-row time { grid-column:2; } .auth-card { padding:22px; } .auth-shell { padding:24px 0; } .calendar-panel-head { padding:18px; } .form-grid { grid-template-columns:1fr; } }
@media(max-width:900px) {
  html,body.auth-body { width:100%; max-width:100%; overflow-x:hidden; }
  .auth-shell { width:calc(100% - 24px); grid-template-columns:minmax(0,1fr); padding:22px 0 28px; }
  .auth-brand-panel,.auth-card-wrap,.auth-card,.auth-step { width:100%; max-width:100%; min-width:0; }
  .auth-brand-panel { padding:0 4px; }
  .auth-brand-panel h1 { max-width:100%; font-size:clamp(1.7rem,8vw,2rem); line-height:1.14; overflow-wrap:anywhere; }
  .auth-brand-panel>p { max-width:100%; font-size:.9rem; overflow-wrap:anywhere; }
  .brand-orbit { width:176px; height:88px; }
  .auth-card { padding:20px; }
  .auth-card-top { flex-wrap:wrap; row-gap:8px; }
  .premium-field input,.otp-inputs input { min-width:0; }
}