:root {
  color-scheme: dark;
  --bg: #07111f;
  --panel: #0e1b2f;
  --panel-2: #13233c;
  --line: #243752;
  --text: #f3f7ff;
  --muted: #9fb0c9;
  --accent: #7c8cff;
  --accent-2: #52d3b4;
  --warning: #ffbf59;
  --danger: #ff6b7a;
  --success: #55d98b;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { min-width: 320px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
a { color: inherit; }

.app-shell { min-height: 100vh; background: radial-gradient(circle at top right, rgba(124,140,255,.13), transparent 35%), var(--bg); }
.topbar { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: rgba(7,17,31,.93); backdrop-filter: blur(14px); }
.topbar-inner { max-width: 1440px; margin: 0 auto; min-height: 72px; padding: 10px 22px; display: flex; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 255px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(135deg, var(--accent), #5f63d9); box-shadow: 0 8px 28px rgba(124,140,255,.3); font-weight: 900; }
.brand-title { font-size: 1rem; font-weight: 800; line-height: 1.15; }
.brand-subtitle { color: var(--muted); font-size: .76rem; margin-top: 3px; }
.nav-tabs { display: flex; flex: 1; gap: 7px; overflow-x: auto; }
.nav-btn { border: 1px solid transparent; color: var(--muted); background: transparent; border-radius: 11px; padding: 10px 13px; white-space: nowrap; }
.nav-btn:hover { color: var(--text); background: var(--panel); }
.nav-btn.active { color: white; background: var(--panel-2); border-color: var(--line); }
.top-actions { display: flex; gap: 8px; align-items: center; }
.count-pill { min-width: 35px; text-align: center; padding: 6px 9px; border-radius: 999px; background: var(--panel-2); color: var(--accent-2); font-weight: 800; }
.count-pill.danger { color: var(--danger); }

.main { width: min(1440px, 100%); margin: 0 auto; padding: 24px 22px 48px; }
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card { background: linear-gradient(180deg, rgba(19,35,60,.97), rgba(14,27,47,.97)); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.card-title { margin: 0; font-size: 1.05rem; }
.card-subtitle { margin: 4px 0 0; color: var(--muted); font-size: .82rem; }
.card-body { padding: 20px; }

.btn { border: 1px solid var(--line); color: var(--text); background: var(--panel-2); padding: 10px 14px; border-radius: 11px; font-weight: 750; transition: .15s ease; }
.btn:hover { transform: translateY(-1px); border-color: #456084; }
.btn-primary { border-color: transparent; background: linear-gradient(135deg, var(--accent), #6368de); color: white; }
.btn-success { border-color: transparent; background: #167653; color: white; }
.btn-warning { border-color: transparent; background: #7a5414; color: white; }
.btn-danger { border-color: transparent; background: #7f2632; color: white; }
.btn-ghost { background: transparent; }
.btn-small { padding: 7px 10px; border-radius: 9px; font-size: .82rem; }
.btn-row { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

.field { display: grid; gap: 7px; }
.field label { color: var(--muted); font-size: .8rem; font-weight: 700; }
.input, .select { width: 100%; border: 1px solid var(--line); border-radius: 11px; background: #071523; color: var(--text); padding: 11px 12px; outline: none; }
.input:focus, .select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,140,255,.15); }
.form-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-6 { grid-column: span 6; }

.scanner-panel { margin-bottom: 20px; }
.scan-row { display: grid; grid-template-columns: minmax(240px, 1fr) 170px auto auto; gap: 11px; align-items: end; }
.scan-input { font-size: 1.25rem; font-weight: 800; letter-spacing: .03em; padding: 15px 16px; }
.scan-hint { margin-top: 10px; color: var(--muted); font-size: .8rem; }
.result-banner { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 14px; padding: 14px 16px; border-radius: 13px; border: 1px solid var(--line); }
.result-success { background: rgba(39,150,101,.16); border-color: rgba(85,217,139,.35); }
.result-danger { background: rgba(190,58,75,.14); border-color: rgba(255,107,122,.35); }
.result-title { font-weight: 850; }
.result-meta { color: var(--muted); font-size: .82rem; margin-top: 3px; }

.section-head { display: flex; justify-content: space-between; gap: 15px; align-items: end; margin: 24px 0 14px; }
.section-head h2 { margin: 0; font-size: 1.2rem; }
.section-head p { margin: 5px 0 0; color: var(--muted); font-size: .84rem; }

.session-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; }
.session-card { position: relative; overflow: hidden; padding: 18px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0,0,0,.22); }
.session-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--success); }
.session-card.warning::before { background: var(--warning); }
.session-card.overdue::before { background: var(--danger); }
.session-top { display: flex; justify-content: space-between; gap: 14px; }
.student-name { font-weight: 900; font-size: 1.12rem; }
.student-meta { color: var(--muted); font-size: .82rem; margin-top: 5px; }
.desk-badge { height: fit-content; padding: 7px 10px; border-radius: 10px; background: var(--panel-2); color: var(--accent-2); font-weight: 900; }
.timer { margin: 22px 0 17px; font-variant-numeric: tabular-nums; font-size: 2.45rem; letter-spacing: .02em; font-weight: 950; }
.timer.warning { color: var(--warning); }
.timer.overdue { color: var(--danger); }
.session-footer { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.status-label { color: var(--muted); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.empty-state { padding: 46px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 18px; background: rgba(14,27,47,.65); }
.empty-icon { font-size: 2.1rem; margin-bottom: 10px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 13px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; }
td { font-size: .9rem; }
.actions-cell { display: flex; flex-wrap: wrap; gap: 7px; }
.tag { display: inline-flex; padding: 5px 8px; border-radius: 999px; background: var(--panel-2); color: var(--muted); font-size: .75rem; font-weight: 750; }
.tag.danger { color: var(--danger); }

.settings-list { display: grid; gap: 14px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.setting-row:last-child { border-bottom: 0; }
.setting-copy strong { display: block; margin-bottom: 4px; }
.setting-copy span { color: var(--muted); font-size: .82rem; }
.toggle { width: 49px; height: 27px; border: 0; border-radius: 999px; background: #33435c; padding: 3px; }
.toggle::after { content: ""; display: block; width: 21px; height: 21px; border-radius: 50%; background: white; transition: transform .15s ease; }
.toggle.on { background: var(--accent); }
.toggle.on::after { transform: translateX(22px); }

.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.76); backdrop-filter: blur(8px); }
.modal { width: min(650px, 100%); max-height: 92vh; overflow: auto; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 30px 90px rgba(0,0,0,.5); }
.modal-head { display: flex; justify-content: space-between; gap: 15px; align-items: center; padding: 17px 19px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; }
.modal-body { padding: 20px; }
.close-btn { border: 1px solid var(--line); background: var(--panel-2); color: white; width: 36px; height: 36px; border-radius: 10px; }
.camera-frame { width: 100%; aspect-ratio: 16/9; background: black; border-radius: 14px; object-fit: cover; }
.camera-status { color: var(--muted); font-size: .84rem; margin-top: 10px; }

.badge-preview { display: grid; place-items: center; text-align: center; background: white; color: #0b1626; border-radius: 16px; padding: 22px; }
.badge-preview canvas { width: 220px; height: 220px; image-rendering: pixelated; }
.badge-name { font-size: 1.35rem; font-weight: 900; margin-top: 12px; }
.badge-id { font-family: ui-monospace, monospace; margin-top: 5px; font-weight: 800; color: #384861; }

.toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: grid; gap: 9px; }
.toast { min-width: 260px; max-width: 380px; padding: 12px 14px; border-radius: 12px; background: #172b3a; color: #fff; border: 1px solid #355064; box-shadow: 0 12px 32px rgba(0,0,0,.28); font-size: .86rem; line-height: 1.4; overflow-wrap: anywhere; }
.toast.success { background: #0f5132; color: #fff; border-color: #52b788; }
.toast.error { background: #842029; color: #fff; border-color: #e27c85; }

.tv-shell { min-height: 100vh; padding: 26px; background: radial-gradient(circle at top right, rgba(124,140,255,.15), transparent 38%), var(--bg); }
.tv-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; }
.tv-title { font-size: clamp(1.45rem, 2.8vw, 2.8rem); font-weight: 950; }
.tv-subtitle { color: var(--muted); margin-top: 6px; font-size: clamp(.8rem, 1.3vw, 1.15rem); }
.tv-clock { text-align: right; font-size: clamp(1.6rem, 3vw, 3rem); font-variant-numeric: tabular-nums; font-weight: 900; }
.tv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.tv-card { min-height: 210px; padding: 22px; border-radius: 20px; background: rgba(14,27,47,.96); border: 1px solid var(--line); position: relative; overflow: hidden; }
.tv-card::after { content: ""; position: absolute; inset: auto 0 0 0; height: 7px; background: var(--success); }
.tv-card.warning::after { background: var(--warning); }
.tv-card.overdue::after { background: var(--danger); }
.tv-card .student-name { font-size: clamp(1.2rem, 2vw, 2rem); }
.tv-timer { margin-top: 28px; font-size: clamp(2.6rem, 5.2vw, 5.3rem); font-variant-numeric: tabular-nums; font-weight: 950; }
.tv-timer.warning { color: var(--warning); }
.tv-timer.overdue { color: var(--danger); }
.tv-actions { position: fixed; right: 15px; bottom: 15px; opacity: .28; transition: opacity .15s ease; }
.tv-actions:hover { opacity: 1; }

.footer { color: var(--muted); text-align: center; font-size: .75rem; padding: 22px; }
.help-note { background: rgba(124,140,255,.1); border: 1px solid rgba(124,140,255,.25); padding: 13px 14px; border-radius: 12px; color: #cbd3ff; font-size: .83rem; }
.hidden { display: none !important; }

@media (max-width: 960px) {
  .topbar-inner { flex-wrap: wrap; }
  .brand { min-width: 0; }
  .nav-tabs { order: 3; width: 100%; }
  .scan-row { grid-template-columns: 1fr 150px; }
  .scan-row .btn { width: 100%; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-2, .span-3, .span-6 { grid-column: span 2; }
}

@media (max-width: 640px) {
  .main { padding: 16px 12px 35px; }
  .topbar-inner { padding: 9px 12px; }
  .brand-subtitle { display: none; }
  .top-actions .btn-label { display: none; }
  .scan-row { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2, .span-3, .span-6 { grid-column: span 1; }
  .session-grid { grid-template-columns: 1fr; }
  .setting-row { align-items: flex-start; }
  .tv-shell { padding: 14px; }
  .tv-grid { grid-template-columns: 1fr; }
  .toast-stack { left: 12px; right: 12px; bottom: 12px; }
  .toast { min-width: 0; max-width: none; }
}

@media print {
  body { background: white; color: black; }
  .app-shell, .modal-backdrop, .toast-stack { display: none !important; }
}

/* v7.2 approved interface: light workspace, fixed navigation, focused front desk */
:root{color-scheme:light;--bg:#f5f8fb;--panel:#fff;--panel-2:#eef4f9;--line:#dce4ec;--text:#14263d;--muted:#64748b;--accent:#1976d2;--accent-2:#087f5b;--warning:#a15c00;--danger:#b42318;--success:#087f5b;--shadow:0 12px 36px rgba(20,38,61,.09)}
html,body{background:var(--bg);color:var(--text)}
.modern-shell{min-height:100vh;display:grid;grid-template-columns:270px minmax(0,1fr);background:var(--bg)}
.app-sidebar{position:sticky;top:0;height:100vh;background:#14263d;color:#fff;padding:24px 16px;display:flex;flex-direction:column;gap:24px;z-index:30}
.sidebar-brand{min-width:0;padding:0 7px}.sidebar-brand>div{min-width:0}.sidebar-brand .brand-title{font-size:1.05rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-brand .brand-subtitle{color:#b8c5d3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-logo-image{width:44px;height:44px;object-fit:contain;border-radius:10px;flex:0 0 auto}
.app-sidebar .nav-tabs{display:grid;flex:0;gap:7px;overflow:visible}.app-sidebar .nav-btn{width:100%;text-align:left;border:0;color:#cad6e2;background:transparent;padding:12px 13px;border-radius:10px;font-weight:750}.app-sidebar .nav-btn:hover,.app-sidebar .nav-btn.active{background:#263d59;color:#fff}
.sidebar-bottom{margin-top:auto;border-top:1px solid #35506e;padding:16px 8px 0;display:grid;gap:4px}.sidebar-bottom small,.sidebar-bottom span{color:#9fb0c2;font-size:.74rem}.sidebar-bottom strong{color:#fff;font-size:.82rem}
.app-workspace{min-width:0}.topbar{background:rgba(255,255,255,.96);border-color:var(--line);box-shadow:0 1px 0 rgba(20,38,61,.02)}.topbar-inner{max-width:none;min-height:72px;padding:0 28px;justify-content:space-between}.mobile-brand{display:grid}.mobile-brand small{color:var(--muted)}.top-actions{margin-left:auto}.scanner-ready{display:flex;align-items:center;gap:8px;color:#334155;font-weight:750;font-size:.84rem}.scanner-ready i{width:9px;height:9px;border-radius:50%;background:#20b486;box-shadow:0 0 0 5px #d9f7ec}
.main{width:min(1480px,100%);padding:28px}.card{background:#fff;border-color:var(--line);border-radius:14px;box-shadow:var(--shadow)}.card-header{border-color:var(--line)}.card-title{font-size:1.05rem}.card-subtitle,.scan-hint,.section-head p,.student-meta,.result-meta,.setting-copy span{color:var(--muted)}
.btn{background:#fff;color:var(--text);border-color:var(--line);border-radius:9px;box-shadow:none}.btn:hover{border-color:#9fb3c8;transform:translateY(-1px)}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-primary:hover{background:#0d5cad}.btn-danger{background:#fff;color:var(--danger);border-color:#e5b9b5}.btn-success{background:#087f5b;color:#fff}.btn-warning{background:#a15c00;color:#fff}
.input,.select,.textarea{background:#fff;color:var(--text);border-color:var(--line)}.input:focus,.select:focus,.textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(25,118,210,.13)}
.front-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:20px}.front-heading h1{font-size:2rem;letter-spacing:-.035em;margin:3px 0 4px}.front-heading p{color:var(--muted);margin:0}.eyebrow{font-size:.72rem;letter-spacing:.12em;color:#0d5cad;font-weight:900}
.front-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0 18px}.front-stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:0 5px 18px rgba(20,38,61,.04)}.front-stat span{color:var(--muted);font-size:.82rem}.front-stat strong{display:block;font-size:1.7rem;margin-top:3px}.front-stat.module-locked{filter:grayscale(1);opacity:.55}
.front-stats-two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}.scanner-focus-card{margin-bottom:18px}.scanner-focus-card .scan-row-modern{grid-template-columns:minmax(280px,1fr) auto}.scanner-focus-body{min-height:320px}
.scan-symbol svg{width:58px;height:58px;fill:currentColor}
.attendance-tabs{display:flex;gap:6px;padding:0 20px;border-bottom:1px solid var(--line)}.attendance-tabs .nav-btn{border-radius:0;padding:14px 12px;border-bottom:3px solid transparent}.attendance-tabs .nav-btn.active{background:transparent;color:var(--accent);border-color:var(--accent)}
.front-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:18px}.scanner-focus-card{margin:0;overflow:visible}.scanner-focus-body{min-height:350px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(145deg,#fff,#eef6ff);border-radius:14px}.scanner-focus-body h2{font-size:1.5rem;margin:16px 0 4px}.scanner-focus-body>p{color:var(--muted);margin:0 0 18px}.scan-symbol{width:92px;height:92px;border:3px solid var(--accent);border-radius:24px;display:grid;place-items:center;font-size:3.2rem;line-height:1;color:var(--accent);box-shadow:0 0 0 10px rgba(25,118,210,.09)}
.scan-row-modern{width:min(720px,100%);grid-template-columns:minmax(280px,1fr) 160px auto;align-items:end}.scan-main-field{position:relative;text-align:left}.scan-input{font-size:1rem;font-weight:650;letter-spacing:0;padding:14px}.front-lookup-results{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:0 18px 45px rgba(20,38,61,.18);overflow:hidden}.front-lookup-results.active{display:block}.front-lookup-result{width:100%;display:flex;align-items:center;gap:10px;padding:11px;border:0;border-bottom:1px solid #edf1f5;background:#fff;text-align:left;color:var(--text)}.front-lookup-result:hover{background:#eef6ff}.front-lookup-result:last-child{border-bottom:0}.lookup-copy{flex:1}.lookup-copy strong,.lookup-copy small{display:block}.lookup-copy small{color:var(--muted)}.lookup-avatar,.here-avatar{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:#e9f2fc;color:#0d5cad;font-weight:900}.lookup-empty{padding:13px;color:var(--muted);text-align:left}
.current-here{overflow:hidden}.here-person{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:11px;align-items:center;padding:12px 0;border-bottom:1px solid #edf1f5}.here-person:last-child{border:0}.here-person span:nth-child(2) strong,.here-person span:nth-child(2) small{display:block}.here-person small{color:var(--muted)}.here-person b{font-variant-numeric:tabular-nums;color:#087f5b}.empty-mini{padding:30px 10px;text-align:center;color:var(--muted)}
.session-card,.empty-state{background:#fff;border-color:var(--line);box-shadow:var(--shadow)}.desk-badge,.tag,.count-pill{background:var(--panel-2)}.help-note{background:#eef6ff;border-color:#c6ddf2;color:#334e68}.modal{background:#fff;border-color:var(--line)}.modal-backdrop{background:rgba(20,38,61,.64)}.close-btn{background:#fff;color:var(--text);border-color:var(--line)}.table-wrap table{background:#fff}.toast{color:#fff}
.settings-grid,.grid-2,.grid-3{align-items:start}.advanced-details{background:#fbfcfe;border-color:var(--line)}
@media(max-width:1000px){.modern-shell{grid-template-columns:1fr}.app-sidebar{position:fixed;left:0;right:0;top:auto;bottom:0;width:auto;height:auto;padding:0;display:block}.sidebar-brand,.sidebar-bottom{display:none}.app-sidebar .nav-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:0}.app-sidebar .nav-btn{text-align:center;border-radius:0;padding:13px 4px;font-size:.72rem}.app-workspace{padding-bottom:62px}.front-grid{grid-template-columns:1fr}.front-heading{align-items:flex-start;flex-direction:column}.topbar-inner{padding:0 16px}.top-actions .count-pill,.top-actions>.tag,.staff-unlock-status{display:none}}
@media(max-width:680px){.main{padding:18px 14px}.front-stats{grid-template-columns:repeat(3,1fr)}.scan-row-modern{grid-template-columns:1fr}.front-heading h1{font-size:1.65rem}.scanner-ready{display:none}.top-actions .btn-label{display:inline}.mobile-brand{max-width:45%}.top-actions{flex-wrap:nowrap}.front-stat{padding:12px}.front-stat strong{font-size:1.35rem}}

/* Chromebook student-form reliability patch */
.student-save-btn { pointer-events: auto !important; position: relative; z-index: 2; min-width: 140px; }
#student-form-help { grid-column: span 6; }
@media (max-width: 960px) { #student-form-help { grid-column: span 2; } }
@media (max-width: 640px) { #student-form-help { grid-column: span 1; } }

/* Audio diagnostics and status controls */
.textarea { width: 100%; resize: vertical; min-height: 82px; border: 1px solid var(--line); border-radius: 11px; background: #081524; color: var(--text); padding: 11px 12px; outline: none; }
.textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,140,255,.14); }
.notification-options { display: grid; align-content: start; gap: 9px; padding-top: 23px; }
.notification-options label { color: var(--muted); font-size: .84rem; }
.tag.success { color: var(--success); border-color: rgba(85,217,139,.35); background: rgba(85,217,139,.08); }
.message-cell { min-width: 280px; max-width: 520px; white-space: normal; line-height: 1.4; }
.error-copy { display: inline-block; max-width: 270px; color: var(--danger); font-size: .72rem; line-height: 1.25; margin-top: 5px; }

/* Compliance-focused v4 controls */
.compliance-banner { max-width: 1280px; margin: 14px auto 0; padding: 12px 18px; border-radius: 13px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; font-size: .86rem; }
.compliance-banner.warning { border: 1px solid rgba(255,190,92,.42); background: rgba(255,190,92,.10); color: #ffe1ad; }
.metric { border: 1px solid var(--line); background: rgba(7,21,35,.72); border-radius: 13px; padding: 14px; display: grid; gap: 7px; }
.metric span { color: var(--muted); font-size: .77rem; }
.metric strong { font-size: 1.05rem; }
.requirements-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 16px; }
.requirement-card { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: start; gap: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: rgba(8,21,36,.72); }
.requirement-card.met { border-color: rgba(85,217,139,.30); }
.requirement-card.attention { border-color: rgba(255,107,122,.34); }
.requirement-card p { color: var(--muted); margin: 5px 0 0; font-size: .79rem; line-height: 1.4; }
.requirement-number { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(124,140,255,.18); color: #d9ddff; font-weight: 900; }
.small-copy { color: var(--muted); font-size: .73rem; line-height: 1.3; }
.modal.compact { max-width: 480px; }
.tag.warning { color: var(--warning); border-color: rgba(255,190,92,.35); background: rgba(255,190,92,.08); }
button:disabled, input:disabled { opacity: .56; cursor: not-allowed; }

@media (max-width: 820px) {
  .requirements-grid { grid-template-columns: 1fr; }
  .requirement-card { grid-template-columns: 36px minmax(0,1fr); }
  .requirement-card > .tag { grid-column: 2; justify-self: start; }
}

/* Keep every administrative tab reachable on typical 1366px Chromebooks. */
@media (max-width: 1500px) {
  .topbar-inner { flex-wrap: wrap; }
  .top-actions { margin-left: auto; }
  .nav-tabs { order: 3; flex-basis: 100%; width: 100%; padding-bottom: 2px; }
}


/* Commercial license activation */
.license-shell{min-height:100vh;display:grid;place-items:center;padding:28px;background:radial-gradient(circle at top,#142a48 0,#07111f 55%,#030812 100%);color:#edf5ff}
.license-card{width:min(760px,100%);background:rgba(10,24,42,.96);border:1px solid #2a4466;border-radius:28px;padding:30px;box-shadow:0 30px 90px rgba(0,0,0,.45);display:grid;gap:18px}
.license-logo{width:70px;height:70px;border-radius:20px;display:grid;place-items:center;background:#315fd3;color:#fff;font-weight:900;font-size:22px;letter-spacing:.04em}
.license-card h1{font-size:32px;margin:0}.license-subtitle{margin:4px 0 0;color:#9db0c8}.license-loading{padding:22px;border-radius:14px;background:#11243d;color:#d8e8ff}
.license-error{padding:16px;border:1px solid #a4414f;border-radius:14px;background:#391821;color:#ffd9de;display:grid;gap:5px}
.license-device{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:15px;border-radius:14px;background:#0c1b30;border:1px solid #263f60}.license-device span{color:#9db0c8}.license-device strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;overflow-wrap:anywhere}
.license-key-input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;min-height:145px}.license-note{font-size:12px;color:#93a7c0;margin:0}
.license-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.license-grid>div{display:grid;gap:5px;padding:13px;border:1px solid var(--border,#26364e);border-radius:12px;background:rgba(7,17,31,.35)}.license-grid span{font-size:12px;color:#8da0b7}.license-grid strong{overflow-wrap:anywhere}
@media(max-width:720px){.license-grid{grid-template-columns:1fr}.license-device{grid-template-columns:1fr}.license-card{padding:20px}.license-card h1{font-size:26px}}


/* CenterClock brand system */
.brand-mark.centerclock-logo,
.license-logo.centerclock-logo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #3567e8 0%, #6366f1 58%, #20b8c7 130%);
  box-shadow: 0 10px 30px rgba(64, 92, 230, .30);
}
.cc-clock-face {
  position: relative;
  width: 66%;
  height: 66%;
  border: 2.5px solid rgba(255,255,255,.96);
  border-radius: 50%;
  display: block;
  box-sizing: border-box;
}
.cc-clock-face::before,
.cc-clock-face::after {
  content: "";
  position: absolute;
  background: rgba(255,255,255,.82);
  border-radius: 99px;
}
.cc-clock-face::before { width: 2px; height: 5px; left: calc(50% - 1px); top: 2px; }
.cc-clock-face::after { width: 5px; height: 2px; right: 2px; top: calc(50% - 1px); }
.cc-hand { position: absolute; left: 50%; top: 50%; transform-origin: 1px 1px; background: #fff; border-radius: 99px; }
.cc-hour { width: 2px; height: 24%; transform: translate(-1px,-1px) rotate(210deg); }
.cc-minute { width: 31%; height: 2px; transform: translate(-1px,-1px) rotate(-48deg); }
.cc-dot { position: absolute; width: 5px; height: 5px; background: #fff; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.brand-subtitle strong { color: #dbe7ff; font-weight: 800; letter-spacing: .01em; }


/* CenterClockIO v6.7 additions */
.brand-logo-image{width:122px;height:52px;object-fit:contain;object-position:left center;display:block;border-radius:8px;background:#aebbc4;padding:2px 5px}
.log-filter-bar{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto;gap:14px;align-items:end;margin-bottom:18px}
.log-filter-actions{padding-bottom:1px;white-space:nowrap}
.metric small{display:block;margin-top:6px;color:var(--muted);font-size:12px;font-weight:500}
@media(max-width:800px){.log-filter-bar{grid-template-columns:1fr}.brand-logo-image{width:105px;height:45px}.log-filter-actions{padding-bottom:0}}

.license-logo-image{display:block;max-width:270px;width:72%;height:auto;margin:0 auto 8px;border-radius:12px;background:#aebbc4;padding:8px 12px}

/* CenterClockIO commercial UI */
:root{
  color-scheme:light;
  --bg:#f4f6f8;
  --panel:#ffffff;
  --panel-2:#f7f9fb;
  --line:#dde3e8;
  --text:#17212b;
  --muted:#65727e;
  --accent:#087f8c;
  --accent-strong:#066a75;
  --accent-soft:#e8f5f6;
  --orange:#e9802a;
  --warning:#b86a19;
  --danger:#b42318;
  --success:#137a55;
  --shadow:0 8px 28px rgba(20,33,43,.08);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
html,body{background:var(--bg);color:var(--text);font-size:15px;line-height:1.45}
body{letter-spacing:-.006em}
.app-shell{background:var(--bg)}
.topbar{background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(20,33,43,.02);backdrop-filter:blur(18px)}
.topbar-inner{max-width:1500px;min-height:76px;padding:10px 24px;gap:18px}
.brand{min-width:310px;gap:14px}.brand-logo-image{width:112px;height:46px;border-radius:10px;background:#eef1f3;padding:4px 7px}.brand-title{font-size:1rem;font-weight:750;color:var(--text)}.brand-subtitle{font-size:.77rem;color:var(--muted)}.brand-subtitle strong{color:var(--accent-strong)}
.nav-tabs{gap:4px}.nav-btn{color:#596775;border-radius:10px;padding:10px 12px;font-size:.88rem;font-weight:650}.nav-btn:hover{background:#f0f4f6;color:var(--text)}.nav-btn.active{color:var(--accent-strong);background:var(--accent-soft);border-color:#cde7ea;box-shadow:none}
.top-actions{gap:7px}.count-pill{background:#eef3f5;color:var(--accent-strong);padding:6px 10px}.count-pill.danger{color:var(--danger);background:#fff0ef}
.main{width:min(1460px,100%);padding:28px 24px 54px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.card-header{padding:18px 20px;border-bottom:1px solid #e7ecef}.card-title{font-size:1.08rem;font-weight:760;letter-spacing:-.015em}.card-subtitle{font-size:.84rem;color:var(--muted)}.card-body{padding:20px}
.btn{border:1px solid #d6dee3;background:#fff;color:#26343f;border-radius:10px;padding:10px 14px;font-weight:700;box-shadow:0 1px 2px rgba(20,33,43,.04);transition:transform .12s ease,border-color .12s ease,background .12s ease}.btn:hover{transform:translateY(-1px);border-color:#aebbc4;background:#fafcfd}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 5px 14px rgba(8,127,140,.16)}.btn-primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}.btn-soft{background:#f3f7f8}.btn-secondary-action{background:#fff;border-color:#b8dfe3;color:var(--accent-strong);min-width:160px}.btn-large{padding:12px 18px;min-height:46px}.btn-danger{background:#fff1f0;border-color:#f1c2bd;color:var(--danger)}.btn-small{font-size:.8rem;padding:7px 10px}
.input,.select,.textarea{background:#fff;color:var(--text);border:1px solid #cfd8de;border-radius:10px;padding:11px 12px;box-shadow:inset 0 1px 1px rgba(20,33,43,.02)}.input:focus,.select:focus,.textarea:focus{border-color:#62b7bf;box-shadow:0 0 0 3px rgba(8,127,140,.12)}.field label{color:#43515c;font-size:.78rem;font-weight:720}.field small{color:var(--muted);font-size:.75rem}
.scan-row-modern{grid-template-columns:minmax(350px,1.6fr) 180px auto auto;gap:12px}.scan-input{font-size:1.12rem;font-weight:700;letter-spacing:0;padding:14px 15px}.forgot-student-card{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:16px;padding:15px 16px;background:#f4fafb;border:1px solid #d2e8ea;border-radius:13px}.forgot-student-card>div{display:grid;gap:2px}.forgot-student-card strong{font-size:.9rem}.forgot-student-card span{font-size:.79rem;color:var(--muted)}.scan-hint{color:#78858f;margin-top:12px}
.section-head{margin:28px 0 14px}.section-head h2{font-size:1.22rem}.session-card{background:#fff;border:1px solid var(--line);box-shadow:0 6px 20px rgba(20,33,43,.06);border-radius:16px}.session-card::before{width:4px}.student-name{color:var(--text)}.student-meta{color:var(--muted)}.desk-badge{background:#eef6f7;color:var(--accent-strong)}.timer{color:#17212b}.status-label{color:#6e7b86}.empty-state{background:#fff;border:1px dashed #cbd5dc;color:var(--muted)}
table{background:#fff}th{color:#70808d;background:#fafbfc;font-size:.72rem}th,td{border-bottom:1px solid #e7ecef}.actions-cell .btn{box-shadow:none}.tag{background:#eef2f4;color:#586672;border:1px solid #e1e7eb}.tag.success{color:var(--success);background:#edf9f4;border-color:#cceadd}.tag.warning{color:#975513;background:#fff7e8;border-color:#f1d6a8}.tag.danger{color:var(--danger);background:#fff0ef;border-color:#f1c2bd}
.metric{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 3px 12px rgba(20,33,43,.04)}.metric span{color:var(--muted)}.metric strong{font-size:1.12rem;color:var(--text)}.metric small{color:#7a8790}.metric-grid{margin-bottom:18px}
.setting-row{border-bottom:1px solid #edf0f2}.setting-copy span{color:var(--muted)}.toggle{background:#cbd4da}.toggle.on{background:var(--accent)}
.help-note{background:#f0f8f9;border:1px solid #d2e8ea;color:#365b60;border-radius:12px}.compliance-banner.warning{background:#fff7e8;border-color:#efcf9a;color:#784311}.compliance-banner{box-shadow:0 3px 12px rgba(20,33,43,.04)}
.requirement-card{background:#fff;border-color:var(--line)}.requirement-number{background:#e8f5f6;color:var(--accent-strong)}.requirement-card p{color:var(--muted)}
.modal-backdrop{background:rgba(29,39,47,.48);backdrop-filter:blur(6px)}.modal{background:#fff;border:1px solid #dbe2e7;border-radius:18px;box-shadow:0 28px 80px rgba(20,33,43,.22)}.modal-head{border-bottom:1px solid #e6ebee;padding:18px 20px}.modal-head h3{color:var(--text);font-size:1.08rem}.modal-head span{display:block;color:var(--muted);font-size:.76rem;margin-top:2px}.close-btn{background:#f5f7f8;color:#43515c;border-color:#dbe2e7}.modal-body{color:var(--text)}
.lookup-modal{width:min(620px,100%)}.lookup-input-wrap{position:relative}.lookup-input{padding-left:40px;font-size:1rem}.lookup-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:1.25rem;color:#81909b}.lookup-results{display:grid;gap:7px;max-height:330px;overflow:auto;margin-top:-4px}.lookup-result{width:100%;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:11px;text-align:left;border:1px solid #dfe6ea;background:#fff;border-radius:12px;padding:10px 11px;color:var(--text)}.lookup-result:hover,.lookup-result.selected{border-color:#7ec2c8;background:#f2fafb}.lookup-avatar{width:36px;height:36px;border-radius:10px;background:#e5f4f5;color:var(--accent-strong);display:grid;place-items:center;font-weight:800}.lookup-copy{display:grid;gap:2px}.lookup-copy strong{font-size:.9rem}.lookup-copy small{color:var(--muted);font-size:.75rem}.lookup-empty{padding:18px;border:1px dashed #d4dde2;border-radius:12px;text-align:center;color:var(--muted);font-size:.82rem;background:#fafbfc}
.link-button{border:0;background:transparent;color:var(--accent-strong);padding:6px 0;text-align:left;font-weight:650;font-size:.8rem}.link-button:hover{text-decoration:underline}.success-panel{display:grid;gap:3px;padding:12px 13px;border-radius:11px;background:#edf9f4;border:1px solid #cceadd;color:#26654e}.success-panel span{font-size:.78rem}
.page-hero{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:0 0 20px;padding:4px 2px}.page-hero h1{margin:3px 0 5px;font-size:1.75rem;letter-spacing:-.035em}.page-hero p{margin:0;color:var(--muted)}.eyebrow{font-size:.7rem;letter-spacing:.12em;font-weight:800;color:var(--accent-strong)}.hero-status{min-width:220px;padding:12px 14px;border-radius:12px;display:grid;gap:3px;text-align:right}.hero-status span{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.hero-status strong{font-size:.85rem}.hero-status.success{background:#edf9f4;color:#26654e}.hero-status.warning{background:#fff7e8;color:#784311}
.backup-folder-preview{display:grid;gap:4px;padding:14px 16px;border:1px solid #dce4e8;border-radius:12px;background:#fafcfd}.backup-folder-preview strong{font-family:"SFMono-Regular",Consolas,monospace;font-size:.86rem;color:#24464a}.backup-folder-preview span{font-size:.76rem;color:var(--muted)}.drive-setup{display:grid;gap:8px;padding:15px 16px;border:1px solid #dbe2e7;border-radius:12px;background:#fafbfc}.drive-setup.active{border-color:#bcdfe2;background:#f1f9fa}.drive-setup ol{margin:0;padding-left:21px;color:#52616d;font-size:.8rem}.drive-setup>span{font-size:.74rem;color:#7a8790}.advanced-details{border:1px solid #e0e6ea;border-radius:12px;background:#fafbfc}.advanced-details summary{cursor:pointer;padding:13px 15px;font-weight:720;color:#43515c}.advanced-content{padding:0 15px 15px}.advanced-content p{color:var(--muted);font-size:.8rem}.security-status{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 14px;background:#fafbfc;border:1px solid #e0e6ea;border-radius:12px}.security-status span{color:var(--muted);font-size:.78rem}.security-status strong{font-size:.82rem}.staff-unlock-status{white-space:nowrap}
.footer{color:#8a969f}
.license-shell{background:#f4f6f8;color:var(--text)}.license-card{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 20px 70px rgba(20,33,43,.14);color:var(--text)}.license-card h1{color:var(--text)}.license-subtitle,.license-note{color:var(--muted)}.license-loading{background:#f0f8f9;color:#365b60}.license-device{background:#fafbfc;border-color:#dce4e8}.license-device span{color:var(--muted)}.license-device strong{color:#26343f}.license-grid>div{background:#fafbfc;border-color:#e0e6ea}.license-grid span{color:var(--muted)}.license-error{background:#fff0ef;color:#84281f;border-color:#efc0bc}
.license-logo-image{background:#eef1f3;border-radius:13px;padding:8px 12px}
.tv-shell{background:#08191b;color:#f5fbfc}.tv-header{padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.10)}.tv-title{color:#fff}.tv-subtitle{color:#9fb7ba}.tv-clock{color:#fff}.tv-card{background:#10262a;border:1px solid #24454a;box-shadow:0 10px 34px rgba(0,0,0,.24)}.tv-card .student-name{color:#fff}.tv-card .student-meta{color:#a8bdc0}.tv-card .desk-badge{background:#19363b;color:#92e0e7}.tv-timer{color:#fff}.tv-empty{grid-column:1/-1;min-height:55vh;display:grid;place-items:center;align-content:center;gap:10px;text-align:center;border:1px dashed #315057;border-radius:20px;background:#0d2226;color:#a8bdc0}.tv-empty img{width:min(260px,55vw);height:auto;background:#d6dde1;border-radius:14px;padding:8px 12px;margin-bottom:10px}.tv-empty strong{font-size:clamp(1.3rem,2.3vw,2rem);color:#fff}
@media(max-width:1050px){.scan-row-modern{grid-template-columns:1fr 170px}.brand{min-width:0}.page-hero{align-items:flex-start;flex-direction:column}.hero-status{text-align:left;min-width:0}.forgot-student-card{align-items:flex-start}}
@media(max-width:680px){.scan-row-modern{grid-template-columns:1fr}.forgot-student-card{flex-direction:column}.forgot-student-card .btn{width:100%}.lookup-result{grid-template-columns:36px 1fr}.lookup-result>.tag{grid-column:2;justify-self:start}.topbar-inner{padding:9px 12px}.main{padding:20px 12px 40px}.brand-logo-image{width:92px;height:40px}}

/* Initial roster import */
.roster-import-modal{width:min(980px,calc(100vw - 28px))}.import-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}.import-summary>div{display:grid;gap:3px;padding:14px 16px;border:1px solid #cfe3e5;border-radius:12px;background:#f2f9fa}.import-summary strong{font-size:1.45rem;color:var(--accent-strong)}.import-summary span{font-size:.8rem;color:var(--muted)}.import-summary .has-errors{border-color:#f0c9c9;background:#fff5f5}.import-summary .has-errors strong{color:var(--danger)}.import-preview-table{max-height:360px;border:1px solid var(--line);border-radius:12px}.import-errors{margin:14px 0;padding:13px 15px;border:1px solid #f0c9c9;border-radius:12px;background:#fff7f7;color:#7b3030}.import-errors ul{margin:8px 0 0;padding-left:20px;font-size:.82rem}.import-errors span{display:block;margin-top:7px;font-size:.78rem}@media(max-width:680px){.import-summary{grid-template-columns:1fr}.roster-import-modal{width:calc(100vw - 18px)}}

/* CenterClockIO staff attendance and split TV board */
.module-locked{opacity:.48!important;filter:grayscale(1);cursor:not-allowed!important}.tv-split.student-only{grid-template-columns:1fr}
.staff-count-pill{background:#eef1ff;color:#4f46a5}.staff-editor{margin-top:20px}.tv-split{display:grid;grid-template-columns:minmax(0,2fr) minmax(270px,1fr);gap:18px;align-items:start}.tv-student-column,.tv-staff-column{min-width:0}.tv-section-title{margin:0 0 12px;color:#a8bdc0;font-size:.78rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.tv-staff-column{border-left:1px solid rgba(255,255,255,.12);padding-left:18px}.tv-staff-list{display:grid;gap:10px}.tv-staff-card{display:flex;justify-content:space-between;gap:12px;padding:14px;border-radius:14px;background:#10262a;border:1px solid #24454a;color:#fff}.tv-staff-card>div{display:grid;gap:3px}.tv-staff-card>div:last-child{text-align:right}.tv-staff-card span,.tv-staff-empty{color:#a8bdc0;font-size:.78rem}.tv-staff-empty{padding:20px;border:1px dashed #315057;border-radius:14px;text-align:center}.tv-student-column .tv-empty{min-height:48vh}.staff-badge{border-color:#4f46a5}
@media(max-width:900px){.tv-split{grid-template-columns:1fr}.tv-staff-column{border-left:0;border-top:1px solid rgba(255,255,255,.12);padding:18px 0 0}.tv-staff-list{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}

/* v7.2 approved sidebar — deliberately last so legacy commercial-brand rules cannot override it. */
.modern-shell .app-sidebar{background:#14263d;color:#fff;padding:24px 16px;gap:22px}
.modern-shell .app-sidebar .sidebar-brand{display:flex;align-items:center;gap:12px;min-width:0;padding:0 8px}
.modern-shell .app-sidebar .sidebar-brand-copy{min-width:0}
.modern-shell .app-sidebar .sidebar-brand-mark{width:38px;height:38px;flex:0 0 38px;border:2px solid #ffcf55;border-radius:10px;display:grid;place-items:center;color:#ffcf55;font-weight:900;font-size:.9rem}
.modern-shell .app-sidebar .brand-title{display:block;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-size:18px;font-weight:800;line-height:1.2}
.modern-shell .app-sidebar .brand-subtitle{display:block;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#b8c5d3;font-size:.8rem;margin-top:3px}
.modern-shell .app-sidebar .nav-tabs{display:grid;gap:7px;flex:0;overflow:visible}
.modern-shell .app-sidebar .nav-btn{display:flex;align-items:center;gap:9px;width:100%;border:0;background:transparent;color:#cad6e2;text-align:left;padding:12px 13px;border-radius:10px;font-size:.95rem;font-weight:700;box-shadow:none}
.modern-shell .app-sidebar .nav-btn:hover,.modern-shell .app-sidebar .nav-btn.active{background:#263d59;color:#fff;transform:none}
.modern-shell .app-sidebar .nav-icon{width:13px;flex:0 0 13px;text-align:center;font-size:.82rem;color:inherit}
.modern-shell .app-sidebar .sidebar-bottom{margin-top:auto;border-top:1px solid #35506e;padding:16px 8px 0;display:grid;gap:4px}
.modern-shell .app-sidebar .sidebar-bottom small{display:block;color:#9fb0c2;font-size:.78rem}
.modern-shell .app-sidebar .sidebar-bottom strong{display:block;color:#fff;font-size:.9rem}
@media(max-width:1000px){.modern-shell .app-sidebar{padding:0;gap:0}.modern-shell .app-sidebar .sidebar-brand,.modern-shell .app-sidebar .sidebar-bottom{display:none}.modern-shell .app-sidebar .nav-tabs{grid-template-columns:repeat(5,1fr);gap:0}.modern-shell .app-sidebar .nav-btn{justify-content:center;gap:4px;border-radius:0;padding:13px 4px;font-size:.72rem}.modern-shell .app-sidebar .nav-icon{width:auto;flex:0 0 auto}}

/* CenterClockIO v7.3 approved production interface. Keep last in the cascade. */
.modern-shell .app-sidebar{overflow:hidden}
.modern-shell .app-sidebar .sidebar-brand{display:grid;gap:7px;padding:0 5px 18px;min-width:0}
.modern-shell .app-sidebar .sidebar-logo-image{display:block;width:100%;max-width:230px;height:auto;object-fit:contain;object-position:left center}
.modern-shell .app-sidebar .brand-subtitle{display:block;max-width:230px;padding-left:3px;color:#b8c5d3;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modern-shell .app-sidebar .nav-tabs{margin-top:0}
.modern-shell .app-sidebar .nav-tabs{order:0!important;flex-basis:auto!important;width:auto!important;padding-bottom:0!important}
.modern-shell .app-sidebar .sidebar-bottom{order:2!important}
.modern-shell .app-sidebar .sidebar-bottom span{display:block;color:#b8c5d3;font-size:.72rem;margin-top:4px;line-height:1.35}
.topbar .section-title{font-size:1.55rem;font-weight:850;letter-spacing:-.03em;color:var(--text);white-space:nowrap}
.scanner-focus-card{margin-bottom:20px}
.scanner-focus-card .scanner-compact{display:grid;grid-template-columns:68px minmax(320px,1fr) auto;gap:18px;align-items:center;padding:22px 26px;text-align:left}
.scanner-focus-card .scan-symbol{width:64px;height:64px;margin:0;border-width:2px;border-radius:17px;box-shadow:0 0 0 7px rgba(8,127,140,.08)}
.scanner-focus-card .scan-symbol svg{width:35px;height:35px}
.scanner-focus-card .scan-main-field{width:100%}
.scanner-focus-card .scan-input{font-size:1rem}
.presence-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.presence-column{display:grid;gap:12px;min-width:0}
.presence-column .front-stat{margin:0;text-align:center;min-height:92px;display:grid;place-items:center;align-content:center}
.presence-column .front-stat strong{font-size:1.75rem}
.presence-card{min-height:260px}
.presence-list{display:grid;padding-top:8px;padding-bottom:8px}
.presence-row{display:flex;align-items:center;gap:11px;padding:13px 0;border-bottom:1px solid #edf1f5;min-width:0}
.presence-row:last-child{border-bottom:0}
.presence-avatar{width:40px;height:40px;flex:0 0 40px;border-radius:10px;display:grid;place-items:center;background:#e9f2fc;color:#0d5cad;font-weight:850}
.presence-avatar.staff{background:#eeeefe;color:#4f46a5}
.presence-copy{flex:1;min-width:0}.presence-copy strong,.presence-copy small,.presence-time strong,.presence-time small{display:block}.presence-copy small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.presence-time{text-align:right;white-space:nowrap}.presence-time small{color:var(--muted);font-size:.75rem}.presence-time strong{font-size:.9rem}.presence-empty{padding:32px 12px;text-align:center;color:var(--muted)}
.staff-roster-toolbar{align-items:flex-end}.staff-roster-toolbar>.btn-row{justify-content:flex-end}.roster-search{width:230px}
.roster-hero{margin-bottom:16px}.roster-workspace{overflow:hidden}.roster-workspace>.card-body{padding-top:16px}.roster-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.roster-toolbar>.btn-row{justify-content:flex-end}.roster-editor{margin-top:18px}.attendance-workspace{overflow:hidden}
@media(max-width:1100px){.presence-grid{grid-template-columns:1fr}.scanner-focus-card .scanner-compact{grid-template-columns:58px minmax(260px,1fr) auto}.scanner-focus-card .scan-symbol{width:54px;height:54px}}
@media(max-width:1000px){.modern-shell .app-sidebar .sidebar-brand{display:none}.topbar .section-title{font-size:1.25rem}.staff-roster-toolbar{align-items:flex-start;flex-direction:column}.staff-roster-toolbar>.btn-row{justify-content:flex-start}.roster-toolbar{align-items:flex-start;flex-direction:column}.roster-toolbar>.btn-row{justify-content:flex-start}}
@media(max-width:680px){.scanner-focus-card .scanner-compact{grid-template-columns:1fr;text-align:center}.scanner-focus-card .scan-symbol{margin:auto}.scanner-focus-card .btn{width:100%}.topbar .section-title{font-size:1.05rem}.roster-search{width:100%}}

/* v7.3.2 approved production page alignment and action styling. */
.modern-shell{--accent:#087f8c;--accent-strong:#066a75}
.modern-shell .app-workspace{min-width:0;overflow-x:hidden}
.modern-shell .main{width:100%;max-width:1460px;min-width:0;margin:0 auto;padding:28px 24px 54px}
.modern-shell .main>*{min-width:0}
.modern-shell .btn-primary{background:#087f8c;border-color:#087f8c;color:#fff}
.modern-shell .btn-primary:hover{background:#066a75;border-color:#066a75}
.modern-shell .card,.modern-shell .grid>*{min-width:0}
.modern-shell .table-wrap{width:100%;max-width:100%;overflow-x:auto}
.backup-page-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.backup-recovery-card,.backup-page-error{grid-column:1/-1}
.production-status{display:grid;gap:4px;padding:13px 15px;border:1px solid #cceadd;background:#edf9f4;color:#26654e;border-radius:10px}
.production-status.warning{border-color:#f0d7aa;background:#fff7e8;color:#784311}
.production-status span{font-size:.78rem;overflow-wrap:anywhere}
.recovery-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.compact-tool{min-width:0;padding:15px;border:1px solid var(--line);border-radius:11px;background:#fafcfd}
.compact-tool strong{display:block;margin-bottom:5px}.compact-tool p{margin:0 0 12px;color:var(--muted);font-size:.82rem}
.drive-guide{display:grid;gap:9px}.drive-guide ol{margin:0;padding-left:21px;color:#52616d;font-size:.8rem}.drive-guide p{margin:0}
.attendance-workspace,.settings-page-grid{width:100%;min-width:0}
@media(max-width:900px){.backup-page-grid,.recovery-tools{grid-template-columns:1fr}.backup-recovery-card,.backup-page-error{grid-column:auto}}