:root {
  --navy:#020817;
  --navy-soft:#101b30;
  --navy-line:#23304a;
  --orange:#fba900;
  --orange-deep:#fc2604;
  --cream:#fcfcfa;
  --sand:#d5c9ad;
  --ink:#172033;
  --muted:#778094;
  --line:#e8eaf0;
  --green:#216a43;
  --red:#bd3034;
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--navy); color:var(--cream); font:14px/1.5 'Poppins',Inter,Arial,Helvetica,sans-serif; }
button,input,select { font:inherit; }
button,a.button,summary { cursor:pointer; }
button { border:0; }
button:disabled { opacity:.55; cursor:wait; }
button,a.button { transition:transform .18s ease,background .18s ease,box-shadow .18s ease; }
button:not(:disabled):hover,a.button:hover { transform:translateY(-2px); }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:3px solid var(--orange); outline-offset:3px; }
input,select { width:100%; border:1px solid #dce0e7; background:#fff; padding:13px 14px; border-radius:12px; color:var(--ink); outline:none; }
input:focus,select:focus { border-color:var(--orange); box-shadow:0 0 0 3px #fba90035; }
input::placeholder { color:#a3a9b4; }
label { display:block; margin:18px 0 0; color:#394357; font-size:12px; font-weight:700; }
label input { display:block; margin-top:8px; font-weight:500; font-size:14px; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font-weight:700; letter-spacing:-.04em; line-height:1.16; }
h1 { font-size:clamp(37px,4.2vw,63px); }
h2 { font-size:27px; }
.muted { color:var(--muted); margin-top:8px; }
.eyebrow,.section-label { font-size:10px; letter-spacing:1.7px; font-weight:800; text-transform:uppercase; }
.brand { font-size:25px; font-weight:900; letter-spacing:.12em; line-height:1; white-space:nowrap; }
.brand span { display:block; margin-top:7px; font-size:8px; font-weight:600; letter-spacing:.27em; }
.primary { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:24px; padding:15px 18px; border-radius:12px; background:var(--orange); color:var(--navy); font-weight:800; box-shadow:0 10px 25px #fba90035; }
.primary:hover { background:#ffc033; box-shadow:0 12px 28px #fba90050; }
.primary span { font-size:21px; line-height:1; }
.subtle { background:transparent; color:inherit; padding:8px 4px; font-size:12px; font-weight:700; }
.button { display:inline-flex; align-items:center; text-decoration:none; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 13px; font-size:12px; font-weight:700; }
.button:hover { background:#fff6dd; }

/* Sign in */
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(380px,.9fr); background:var(--cream); }
.login-art { position:relative; min-height:100vh; overflow:hidden; padding:52px clamp(30px,5vw,80px); display:flex; flex-direction:column; justify-content:space-between; background:radial-gradient(circle at 75% 28%,#1a2846 0,var(--navy) 55%); color:var(--cream); }
.login-art::before { content:''; position:absolute; width:490px; height:300px; right:-70px; top:22%; border-radius:28px; transform:rotate(-17deg); background:linear-gradient(135deg,#ffc246,var(--orange) 58%,#ed7800); box-shadow:0 30px 70px #0008; }
.login-art::after { content:'AWAARA  /  2026'; position:absolute; right:32px; top:calc(22% + 190px); transform:rotate(-17deg); font-size:17px; font-weight:900; letter-spacing:.16em; color:#020817a8; }
.login-art .brand,.art-copy,.event-line { position:relative; z-index:1; }
.login-art .brand { color:var(--orange); }
.art-copy { max-width:540px; padding:45px 0; }
.art-copy .eyebrow { color:var(--orange); }
.art-copy h1 { margin:22px 0; font-size:clamp(50px,5.8vw,87px); }
.art-copy h1 i { color:var(--orange); font-style:normal; }
.art-copy p { color:#abb5c7; font-size:15px; }
.event-line { display:flex; justify-content:space-between; gap:20px; border-top:1px solid #ffffff30; padding-top:20px; color:#d6dbea; font-size:10px; letter-spacing:1.5px; }
.login-panel { display:flex; flex-direction:column; justify-content:center; padding:44px clamp(30px,8vw,110px); color:var(--ink); }
.login-card { width:100%; max-width:430px; margin:auto; }
.login-card .eyebrow { color:#b67200; }
.login-card h2 { font-size:clamp(36px,3.6vw,50px); margin-top:15px; }
.login-card form { margin-top:32px; }
.login-card .primary { margin-top:26px; }
.error { color:var(--red); margin-top:12px; min-height:20px; }
.private-note { margin-top:30px; color:var(--muted); font-size:11px; text-align:center; }
.powered { display:flex; justify-content:space-between; gap:20px; margin-top:50px; color:#8d94a3; font-size:9px; letter-spacing:1.8px; }

/* Desk shell */
header { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:17px clamp(20px,4vw,70px); border-bottom:1px solid var(--navy-line); background:#071124; }
header .brand { color:var(--orange); }
.header-actions { display:flex; align-items:center; gap:24px; font-size:12px; }
.live { display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:30px; background:#1a283c; color:#d9e1ec; font-size:9px; font-weight:800; letter-spacing:1.4px; }
.live b,.status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#44bf75; box-shadow:0 0 0 3px #44bf752a; }
header .subtle { color:#f4f5f7; }
main { max-width:1600px; margin:auto; padding:30px clamp(20px,4vw,70px) 24px; }
.page-heading { position:relative; isolation:isolate; overflow:hidden; display:flex; justify-content:space-between; align-items:flex-end; gap:30px; min-height:215px; padding:35px clamp(24px,3.5vw,52px); border-radius:25px; background:linear-gradient(115deg,#ffbd33 0%,var(--orange) 57%,#ef7f06 100%); color:var(--navy); box-shadow:0 20px 46px #0005; }
.page-heading::before { content:''; position:absolute; z-index:-1; width:420px; height:420px; right:-110px; top:-165px; border:1px solid #fff8; border-radius:50%; box-shadow:0 0 0 45px #ffffff1e,0 0 0 90px #ffffff14,0 0 0 135px #ffffff12; }
.page-heading::after { content:''; position:absolute; z-index:-1; width:220px; height:220px; right:20%; bottom:-185px; border-radius:50%; background:#fc260422; }
.page-heading .eyebrow { color:#423000; }
.page-heading h1 { margin-top:9px; }
.page-heading h1 span { color:var(--cream); }
.page-heading .muted { color:#493600; max-width:520px; }
.clock { min-width:125px; text-align:right; }
.clock strong { display:block; font-size:27px; font-weight:900; font-variant-numeric:tabular-nums; }
.clock span { display:block; margin-top:3px; font-size:9px; font-weight:800; letter-spacing:1.4px; }
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:22px 0 26px; }
.stats article { min-height:146px; padding:20px 23px; border:1px solid var(--navy-line); border-radius:20px; background:var(--navy-soft); box-shadow:0 10px 25px #0002; }
.stats article>span { color:#c2c9d6; font-size:12px; font-weight:600; }
.stats strong { display:block; margin:8px 0 2px; color:#fff; font-size:42px; font-weight:800; line-height:1.05; letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.stats strong span { font-size:23px; }
.stats small { color:#8793a8; font-size:10px; }
.stats .highlight { border-color:#fba900; background:var(--orange); }
.stats .highlight>span,.stats .highlight small,.stats .highlight strong { color:var(--navy); }
.stats .highlight .status-dot { background:#114d32; box-shadow:0 0 0 3px #114d3230; }
.progress { height:6px; overflow:hidden; margin-top:17px; border-radius:6px; background:#ffffff2b; }
.progress div { height:100%; width:0; border-radius:6px; background:var(--orange); transition:width .25s; }
.workspace { display:grid; grid-template-columns:minmax(320px,365px) minmax(0,1fr); gap:20px; align-items:start; }
.checkin-card,.roster-card { border-radius:22px; background:var(--cream); color:var(--ink); box-shadow:0 16px 36px #0003; }
.checkin-card { padding:28px; }
.section-label { display:flex; justify-content:space-between; color:#a06a08; }
.checkin-card h2 { margin-top:24px; }
.checkin-card .muted { font-size:12px; }
.checkin-card label { font-size:10px; letter-spacing:.4px; }
.required { color:var(--orange-deep); }
#studentId { padding:15px; border-width:2px; font-size:18px; font-weight:800; letter-spacing:1px; }
.person-hint { min-height:36px; margin:11px 0 21px; color:var(--muted); font-size:11px; line-height:1.5; }
.person-hint.found,.person-hint.missing { min-height:0; padding:11px 12px; border-left:4px solid; border-radius:9px; font-weight:800; }
.person-hint.found { border-color:#26a364; background:#e7f6ed; color:#17623b; }
.person-hint.missing { border-color:#dc4141; background:#ffeded; color:#a12626; }
details { border-top:1px solid var(--line); padding-top:16px; }
summary { display:flex; justify-content:space-between; list-style:none; color:#4d596f; font-size:11px; font-weight:700; }
summary::-webkit-details-marker { display:none; }
summary span { color:#9b6a16; }
details label { margin-top:12px; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.two input { min-width:0; }
#result { margin-top:17px; padding:13px; border-left:4px solid #26a364; border-radius:9px; background:#e7f6ed; color:#17623b; font-size:12px; font-weight:700; }
#result.bad { border-color:#dc4141; background:#ffeded; color:#a12626; }
.desk-note { display:flex; gap:12px; margin-top:25px; padding-top:21px; border-top:1px solid var(--line); color:#7c8799; font-size:11px; }
.desk-note>span { color:var(--orange); font-size:25px; line-height:1; }
.desk-note small { color:#9ca4b1; font-size:10px; }
.roster-card { overflow:hidden; }
.roster-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:23px 25px 0; }
.roster-heading .section-label { color:#a06a08; }
.tools { display:flex; gap:13px; align-items:center; }
.tools .subtle { color:#9b6200; }
.roster-title { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 25px; }
.roster-title h2 { font-size:27px; }
.roster-title h2 span { display:inline-block; vertical-align:middle; margin-left:9px; padding:4px 10px; border-radius:30px; background:#fff0c8; color:#925d00; font:800 11px 'Poppins',Arial,sans-serif; letter-spacing:0; }
.roster-title .subtle { color:#4c5b72; }
.filters { display:flex; gap:12px; padding:0 25px 20px; }
.filters input { font-size:12px; }
.filters select { flex:0 0 150px; font-size:11px; }
.table-scroll { min-height:280px; max-height:465px; overflow:auto; }
table { width:100%; border-collapse:collapse; text-align:left; white-space:nowrap; }
th { position:sticky; top:0; z-index:1; padding:13px 20px; background:#f1f3f7; color:#7d8798; font-size:9px; font-weight:800; letter-spacing:1px; }
td { padding:16px 20px; border-bottom:1px solid #e9ebef; font-size:11px; }
td strong { display:block; font-size:12px; font-weight:800; }
td small { display:block; margin-top:3px; color:#8e98a7; font-size:10px; }
.pill { display:inline-block; padding:5px 10px; border-radius:30px; background:#e7f6ed; color:#1b7847; font-size:9px; font-weight:800; }
.pill.pending { background:#fff1ce; color:#92651a; }
.row-action { background:none; color:#ad6d00; font-size:10px; font-weight:800; }
.empty { padding:45px 20px; text-align:center; color:#9099a8; }
.empty>span { color:var(--orange); font-size:35px; }
.empty h3 { margin:10px 0; color:var(--ink); font-size:23px; }
.empty p { font-size:12px; }
.table-footer { display:flex; justify-content:space-between; gap:10px; padding:14px 25px; border-top:1px solid var(--line); background:#f8f9fb; color:#8993a3; font-size:9px; }
footer { display:flex; justify-content:space-between; gap:20px; margin-top:31px; padding-top:20px; border-top:1px solid var(--navy-line); color:#69768b; font-size:9px; letter-spacing:1.5px; }
footer b { margin-left:6px; color:var(--orange); font-weight:700; }
#toast { position:fixed; bottom:24px; left:50%; z-index:10; max-width:min(90%,520px); padding:14px 22px; transform:translateX(-50%); border:1px solid #fba90077; border-radius:12px; background:#1a263b; color:#fff; box-shadow:0 15px 45px #0008; text-align:center; font-weight:700; }
@media (max-width:1050px) {
  .workspace { grid-template-columns:minmax(280px,330px) minmax(0,1fr); }
  .stats article { padding:18px; }
  .roster-heading { flex-direction:column; align-items:flex-start; }
  .page-heading h1 { font-size:42px; }
  td,th { padding:12px; }
}
@media (max-width:760px) {
  .login-shell { grid-template-columns:1fr; }
  .login-art { min-height:260px; padding:30px; }
  .login-art::before { width:240px; height:155px; top:38px; right:-55px; }
  .login-art::after { display:none; }
  .art-copy { padding:24px 0 8px; }
  .art-copy h1 { font-size:39px; margin:16px 0 0; }
  .art-copy h1 br,.art-copy p,.event-line { display:none; }
  .login-panel { min-height:calc(100vh - 260px); padding:34px 24px; }
  .login-card { max-width:470px; }
  .powered { margin-top:35px; }
  header { min-height:76px; padding:16px 20px; }
  .brand { font-size:23px; }
  .header-actions { gap:12px; }
  .live,#adminName { display:none; }
  main { padding:20px 16px; }
  .page-heading { min-height:190px; padding:26px; }
  .page-heading h1 { font-size:34px; }
  .page-heading .eyebrow { font-size:8px; }
  .page-heading .muted { font-size:12px; }
  .clock { display:none; }
  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:15px 0 20px; }
  .stats article { min-height:125px; padding:16px; border-radius:16px; }
  .stats strong { font-size:35px; }
  .workspace { grid-template-columns:1fr; }
  .checkin-card,.roster-card { border-radius:18px; }
  .roster-heading { flex-direction:row; align-items:center; padding:20px 17px 0; }
  .roster-heading .section-label { font-size:8px; letter-spacing:.6px; }
  .roster-title { padding:17px; }
  .filters { padding:0 17px 17px; }
  .table-footer { padding:12px 17px; }
  footer>span:last-child { display:none; }
}
@media (max-width:440px) {
  .roster-heading { flex-wrap:wrap; }
  .tools { width:100%; justify-content:space-between; }
  .filters { flex-direction:column; }
  .filters select { flex:auto; }
  .page-heading h1 { font-size:31px; }
}

/* Awaara poster palette blended with the rounded bank app layout. */
:root {
  --navy:#130b15;
  --navy-soft:#25131d;
  --navy-line:#51303b;
  --orange:#f2a624;
  --orange-deep:#bd2519;
  --cream:#fffaf1;
  --sand:#f1c975;
  --ink:#2b1a21;
  --muted:#846f75;
  --line:#ecdfd2;
  --green:#175c3b;
  --red:#bd2519;
}
body { background:radial-gradient(circle at 85% 0,#47131d 0,#24101b 35%,var(--navy) 75%); }
.brand { line-height:1; letter-spacing:normal; }
.brand img { display:block; width:190px; height:auto; max-width:100%; filter:drop-shadow(0 3px 6px #0005); }
.brand span { margin-top:2px; margin-left:7px; color:#f7d99b; }
.login-art { background:radial-gradient(circle at 70% 25%,#642014 0,#3b0b17 38%,#140914 78%); }
.login-art::before { border:1px solid #f5bc59; background:linear-gradient(130deg,#06462e 0,#55100f 60%,#b35416 100%); box-shadow:0 28px 70px #0008,inset 0 0 0 6px #eaaa2f2b; }
.login-art::after { display:none; }
.login-art .brand img { width:245px; }
.art-copy .eyebrow { color:#ffd17a; }
.art-copy h1 i { color:#ffcb64; }
.art-copy p { color:#e1c3bc; }
.event-line { color:#e9ccc2; border-color:#f2a62455; }
.login-card .eyebrow { color:#a45614; }
header { min-height:94px; background:#220b16; border-bottom-color:#b96d284a; }
header .brand img { width:172px; }
header .brand span { font-size:7px; }
.live { background:#3a1923; color:#ffecd2; }
.page-heading { min-height:226px; background:linear-gradient(110deg,#63100c 0,#3e0a14 50%,#170b17 100%); color:#fff8eb; border:1px solid #e7a63777; box-shadow:0 20px 46px #0005,inset 0 0 0 1px #ffca6d20; }
.page-heading::before { border-color:#f6c66e4d; box-shadow:0 0 0 45px #f6c66e0d,0 0 0 90px #f6c66e09,0 0 0 135px #f6c66e08; }
.page-heading::after { background:#e2442420; }
.page-heading .eyebrow { color:#ffce77; }
.page-heading h1 span { color:#ffc65e; }
.page-heading .muted { color:#f4d3bd; }
.page-heading>div:first-of-type { position:relative; z-index:1; max-width:calc(100% - 245px); }
.hero-logo { position:absolute; z-index:0; top:15px; right:22px; width:275px; max-width:38%; opacity:.95; filter:drop-shadow(0 12px 14px #0008); }
.clock { position:relative; z-index:1; color:#ffe7b2; }
.stats .highlight { background:linear-gradient(125deg,#ffd16d,var(--orange)); border-color:#ffc85b; }
.stats .highlight>span,.stats .highlight small,.stats .highlight strong { color:#3b1b0c; }
.progress { background:#fff2cf33; }
.progress div { background:#f6c45c; }
.primary { box-shadow:0 10px 25px #f2a62435; }
.primary:hover { background:#ffc452; box-shadow:0 12px 28px #f2a62450; }
.roster-heading .section-label,.section-label { color:#9f5519; }
.roster-title h2 span { background:#fff0cf; color:#8b4a10; }
.pill.pending { background:#fff0ce; color:#895a12; }
.row-action,.tools .subtle { color:#995115; }
#toast { background:#35141e; border-color:#e9ae54; }
footer { border-color:#a46a384d; color:#b39088; }
@media (max-width:760px) {
  .login-art .brand img { width:190px; }
  header { min-height:83px; }
  header .brand img { width:142px; }
  .hero-logo { display:none; }
  .page-heading>div:first-of-type { max-width:none; }
}

/* BuildTrack inspired dashboard structure, with Awaara's event colors. */
body { font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:230px minmax(0,1fr); background:#f6f4f3; color:#2b1a21; }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:23px 14px 17px; background:#22121d; color:#f7ece5; z-index:30; }
.side-brand { padding:0 8px 25px; border-bottom:1px solid #ffffff1c; }
.side-brand img { display:block; width:188px; max-width:100%; height:auto; }
.side-brand span { display:block; margin:3px 0 0 7px; color:#d6af8a; font-size:8px; font-weight:800; letter-spacing:.18em; }
.side-nav { display:flex; flex-direction:column; gap:3px; padding-top:9px; }
.nav-caption { margin:21px 12px 6px; color:#b595a5; font-size:9px; font-weight:800; letter-spacing:.16em; }
.side-nav a { display:flex; align-items:center; gap:12px; min-height:38px; padding:9px 12px; border-radius:7px; color:#e1d3dc; text-decoration:none; font-size:12px; font-weight:600; }
.side-nav a>span { display:grid; place-items:center; width:18px; color:#d6af8a; font-size:18px; line-height:1; }
.side-nav a:hover { background:#ffffff12; }
.side-nav a.active { background:linear-gradient(100deg,#ab361c,#d45d22); color:#fff; box-shadow:0 5px 15px #0003; }
.side-nav a.active>span { color:#fff; }
.side-bottom { display:flex; flex-direction:column; gap:4px; margin-top:auto; padding:17px 9px 3px; border-top:1px solid #ffffff1c; color:#d5b9b2; }
.side-event { font-size:10px; font-weight:800; letter-spacing:.09em; }
.side-event b { color:#f5ad45; }
.side-bottom small { color:#a28b99; font-size:10px; }
.sidebar-backdrop { display:none; }
.app-content { min-width:0; }
.topbar { position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center; min-height:73px; padding:13px 30px; border-bottom:1px solid #e6e1e1; background:#fff; box-shadow:none; color:#2b1a21; }
.topbar-title { display:flex; align-items:center; gap:12px; }
.topbar-title strong { display:block; font-size:14px; font-weight:800; }
.topbar-title small { display:block; margin-top:2px; color:#837585; font-size:11px; }
.topbar .header-actions { gap:14px; }
.topbar .live { background:#eaf4ed; color:#266847; }
.topbar #adminName { color:#584652; font-weight:700; }
.topbar .subtle { padding:8px 12px; border:1px solid #e2dbe0; border-radius:8px; color:#513847; background:#fff; }
.menu-toggle { display:none; width:34px; height:34px; border:1px solid #e5dfe4; border-radius:7px; background:#fff; color:#4c3240; font-size:17px; }
.app-shell main { max-width:1600px; margin:auto; padding:32px 34px 25px; }
.app-shell .page-heading { min-height:0; display:flex; align-items:flex-end; justify-content:space-between; gap:25px; padding:0; border:0; border-radius:0; background:none; color:#2b1a21; box-shadow:none; }
.app-shell .page-heading::before,.app-shell .page-heading::after { display:none; }
.app-shell .page-heading>div:first-of-type { max-width:none; }
.app-shell .page-heading .eyebrow { color:#8c5a66; font-size:9px; }
.app-shell .page-heading h1 { margin-top:8px; font-size:clamp(28px,2.3vw,37px); font-weight:800; }
.app-shell .page-heading h1 span { color:#c85421; }
.app-shell .page-heading .muted { margin-top:8px; color:#776c79; font-size:12px; }
.heading-date { display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex-shrink:0; color:#6e6270; }
.heading-date>span,.heading-date small { font-size:9px; font-weight:700; letter-spacing:.08em; }
.heading-date strong { font-size:24px; font-weight:800; color:#402635; font-variant-numeric:tabular-nums; }
.app-shell .stats { gap:14px; margin:27px 0 26px; }
.app-shell .stats article { min-height:132px; padding:18px 19px; border:1px solid #e7e1e2; border-radius:11px; background:#fff; box-shadow:none; }
.app-shell .stats article>span { display:flex; align-items:center; justify-content:space-between; color:#655666; font-size:11px; font-weight:700; }
.app-shell .stats article i { display:grid; place-items:center; width:26px; height:26px; border-radius:7px; background:#f8eee9; color:#a85028; font-style:normal; font-size:15px; }
.app-shell .stats strong { margin:10px 0 4px; color:#2c1c27; font-size:34px; font-weight:800; }
.app-shell .stats strong span { font-size:18px; }
.app-shell .stats small { color:#8c8290; font-size:10px; }
.app-shell .stats .highlight { border-color:#e7e1e2; background:#fff; }
.app-shell .stats .highlight>span,.app-shell .stats .highlight strong { color:#2c1c27; }
.app-shell .stats .highlight i { background:#e9f6ec; color:#278657; }
.app-shell .stats .highlight strong { color:#258055; }
.app-shell .progress { height:5px; margin-top:13px; background:#eee9e9; }
.app-shell .progress div { background:#c95724; }
.operations-grid { display:grid; grid-template-columns:minmax(300px,345px) minmax(0,1fr); gap:17px; align-items:stretch; }
.app-shell .checkin-card,.analytics-card,.app-shell .roster-card { border:1px solid #e7e1e2; border-radius:11px; background:#fff; box-shadow:none; }
.app-shell .checkin-card { padding:23px; }
.app-shell .checkin-card h2 { margin-top:14px; font-size:21px; }
.app-shell .checkin-card .muted { font-size:11px; }
.app-shell .section-label { color:#98606c; font-size:9px; }
.app-shell .primary { background:#bd4921; color:#fff; box-shadow:none; }
.app-shell .primary:hover { background:#a83d1b; box-shadow:0 5px 15px #bd49212c; }
.insights-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(240px,.85fr); gap:17px; min-width:0; }
.analytics-card { min-width:0; padding:22px; }
.panel-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.panel-heading .eyebrow { color:#a4737e; font-size:8px; }
.panel-heading h2 { margin-top:5px; color:#31212c; font-size:17px; font-weight:800; letter-spacing:-.025em; }
.panel-heading p { margin-top:5px; color:#887e8b; font-size:10px; }
.panel-icon { display:grid; place-items:center; width:27px; height:27px; flex:0 0 27px; border-radius:7px; background:#f8eee9; color:#ae542b; font-size:17px; }
.arrival-chart { display:flex; align-items:flex-end; gap:7px; min-height:202px; margin-top:22px; padding:12px 0 0; overflow-x:auto; border-bottom:1px solid #eee6e7; background:repeating-linear-gradient(to top,transparent 0,transparent 48px,#eee8e9 49px,#eee8e9 50px); }
.chart-slot { display:flex; flex:1 0 31px; flex-direction:column; align-items:center; justify-content:flex-end; height:189px; min-width:31px; }
.chart-count { height:18px; color:#654957; font-size:10px; font-weight:800; }
.chart-bar-wrap { display:flex; align-items:flex-end; justify-content:center; width:100%; height:142px; }
.chart-bar { display:block; width:min(100%,33px); min-height:2px; border-radius:5px 5px 0 0; background:linear-gradient(180deg,#f8ba5f,#c65727); }
.chart-bar.zero { background:#dfd9db; }
.chart-hour { height:28px; padding-top:8px; color:#908492; font-size:9px; white-space:nowrap; }
.chart-footer { display:flex; justify-content:space-between; gap:12px; margin-top:13px; color:#827686; font-size:10px; }
.legend-dot { display:inline-block; width:8px; height:8px; margin-right:5px; border-radius:2px; vertical-align:middle; }
.legend-dot.gold { background:#db7a32; }
.legend-dot.green { background:#309567; }
.legend-dot.sand { background:#e2d6d9; }
.legend-dot.orange { background:#cc6530; }
.ring-wrap { display:grid; place-items:center; min-height:200px; }
.attendance-ring { display:grid; place-items:center; width:158px; height:158px; border-radius:50%; background:conic-gradient(#d0642c var(--rate,0%),#eee8e8 0); }
.attendance-ring>div { display:flex; flex-direction:column; align-items:center; justify-content:center; width:130px; height:130px; border-radius:50%; background:#fff; }
.attendance-ring strong { color:#35212c; font-size:30px; font-weight:800; line-height:1; }
.attendance-ring span { margin-top:6px; color:#8c7e8d; font-size:9px; font-weight:800; letter-spacing:.1em; }
.ring-legend { display:grid; gap:10px; padding-top:14px; border-top:1px solid #eee7e8; }
.ring-legend>div { display:flex; justify-content:space-between; gap:10px; color:#746777; font-size:11px; }
.ring-legend strong { color:#35242d; font-size:12px; }
.secondary-grid { display:grid; grid-template-columns:1fr 1fr; gap:17px; margin:17px 0 22px; }
.source-card,.recent-card { min-height:234px; }
.source-row { margin-top:22px; }
.source-row>div:first-child { display:flex; align-items:center; justify-content:space-between; color:#706573; font-size:11px; }
.source-row strong { color:#34242d; font-size:14px; }
.source-track { height:9px; overflow:hidden; margin-top:10px; border-radius:8px; background:#f0ebeb; }
.source-track span { display:block; width:0; height:100%; border-radius:8px; background:#309567; transition:width .3s; }
.source-row:nth-of-type(3) .source-track span { background:#cc6530; }
.source-note { margin-top:17px; padding:11px 12px; border-radius:7px; background:#f9f5f3; color:#806e75; font-size:10px; }
.recent-list { margin-top:13px; }
.recent-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #f0eaeb; }
.recent-row:last-child { border-bottom:0; }
.recent-avatar { display:grid; place-items:center; flex:0 0 30px; width:30px; height:30px; border-radius:8px; background:#fae9d9; color:#9e512a; font-weight:800; }
.recent-person { flex:1; min-width:0; }
.recent-person strong { display:block; overflow:hidden; color:#392833; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.recent-person small { display:block; color:#8d808d; font-size:9px; }
.recent-time { color:#9c8d9a; font-size:10px; white-space:nowrap; }
.empty-inline { padding:25px 0; color:#958995; font-size:11px; }
.app-shell .roster-card { overflow:hidden; }
.app-shell .roster-heading { display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:14px; padding:23px 24px 18px; }
.roster-heading .eyebrow { color:#a4737e; font-size:8px; }
.app-shell .roster-heading h2 { margin-top:6px; font-size:20px; }
.app-shell .roster-heading h2 span { display:inline-block; vertical-align:middle; margin-left:8px; padding:4px 9px; border-radius:6px; background:#f7ebe6; color:#95502e; font-size:10px; }
.app-shell .tools { gap:10px; }
.app-shell .tools .subtle,.app-shell .button { padding:9px 12px; border:1px solid #e6dfe2; border-radius:7px; background:#fff; color:#533843; font-size:11px; font-weight:700; }
.app-shell .filters { align-items:center; padding:0 24px 20px; }
.app-shell .filters input,.app-shell .filters select { border-radius:7px; }
.app-shell .filters select { flex:0 0 165px; }
.app-shell .filters .subtle { white-space:nowrap; color:#684d5b; }
.app-shell th { background:#f8f6f7; color:#8b7e8a; }
.app-shell td { border-color:#f0ebed; }
.app-shell .table-footer { background:#faf9f9; }
.app-shell footer { margin-top:26px; border-color:#e5dee1; color:#8c7f8c; }
.app-shell footer b { color:#b95325; }
.app-shell #toast { background:#35202b; }
@media (max-width:1250px) {
  .operations-grid { grid-template-columns:1fr; }
  .insights-grid { grid-template-columns:minmax(0,1.5fr) minmax(240px,.8fr); }
}
@media (max-width:900px) {
  .app-shell { display:block; }
  .sidebar { position:fixed; left:0; top:0; width:230px; transform:translateX(-100%); transition:transform .2s ease; box-shadow:10px 0 35px #0003; }
  .app-shell.menu-open .sidebar { transform:translateX(0); }
  .app-shell.menu-open .sidebar-backdrop { display:block; position:fixed; inset:0; z-index:25; background:#130b1580; }
  .menu-toggle { display:grid; place-items:center; }
  .topbar { padding:12px 20px; }
  .app-shell main { padding:25px 20px; }
}
@media (max-width:700px) {
  .topbar { min-height:64px; }
  .topbar .live,.topbar #adminName { display:none; }
  .app-shell .page-heading { display:block; }
  .heading-date { align-items:flex-start; margin-top:15px; }
  .heading-date strong { font-size:18px; }
  .app-shell .stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .app-shell .stats article { min-height:117px; padding:14px; }
  .app-shell .stats strong { font-size:29px; }
  .insights-grid,.secondary-grid { grid-template-columns:1fr; }
  .app-shell .roster-heading { flex-wrap:wrap; }
  .app-shell .tools { width:100%; justify-content:flex-start; }
  .app-shell .filters { flex-wrap:wrap; }
  .app-shell .filters input { flex:1 0 100%; }
  .app-shell .filters select { flex:1; }
}
@media (max-width:440px) {
  .app-shell main { padding:20px 14px; }
  .topbar { padding:10px 14px; }
  .topbar-title strong { font-size:12px; }
  .topbar-title small { font-size:9px; }
  .topbar .subtle { padding:7px 8px; font-size:10px; }
  .app-shell .page-heading h1 { font-size:27px; }
  .app-shell .stats article>span { font-size:10px; }
  .app-shell .stats article i { width:22px; height:22px; }
  .app-shell .roster-heading,.app-shell .filters { padding-left:17px; padding-right:17px; }
}
#overview,#checkin,#insights,#register { scroll-margin-top:90px; }