/* Chitrashila Attendance — shared styles (kiosk, admin, setup) */
:root {
  --ink: #363334; --ink-2: #4b4648; --muted: #6b6466; --line: #f0e2cf; --line-2: #e6d6c1;
  --cream: #fff7e6; --cream-2: #faf4ea; --peach: #fcd4a5; --orange: #f08436; --orange-ink: #b65a14; --brown: #5f2716;
  --red: #b63322; --red-ink: #8c2618; --red-bg: #fbe3df; --green: #2e7d4f; --green-ink: #1f5e3a; --green-bg: #e3f2e7;
  --purple-ink: #4a2f77; --purple-bg: #ece7f3; --grey: #eeeeed; --grey-ink: #8a8486; --dark: #1f1d1e; --dark-2: #2c2a2b;
  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --head: 'Nunito', 'Montserrat', system-ui, sans-serif;
  --r: 14px; --r-lg: 20px;
}
* { box-sizing: border-box; } [hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--cream); font-size: 15px; line-height: 1.45; }
a { color: var(--orange-ink); }
h1, h2, h3 { font-family: var(--head); font-weight: 800; margin: 0; line-height: 1.2; }
h1 { font-size: 28px; } h2 { font-size: 18px; margin: 18px 0 10px; } h3 { font-size: 16px; }
.muted { color: var(--muted); } .small { font-size: 12.5px; } .tiny { font-size: 11.5px; } .b { font-weight: 600; }
.ok-ink { color: var(--green-ink); } .bad-ink { color: var(--red-ink); } .warn-ink { color: var(--orange-ink); }
.logo-md { width: 54px; height: 64px; object-fit: contain; } .logo-sm { width: 34px; height: 40px; object-fit: contain; }
code { background: var(--cream-2); padding: 1px 6px; border-radius: 6px; font-size: 13px; }
.nowrap { white-space: nowrap; } .right { text-align: right; } .center { text-align: center; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .row-between { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

/* ---------- buttons, pills, alerts, forms ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); font: 600 14px var(--font); cursor: pointer; text-decoration: none; }
.btn:hover { border-color: var(--ink); } .btn.primary { background: var(--ink); color: var(--cream); border-color: var(--ink); } .btn.accent { background: var(--orange); color: var(--ink); border-color: var(--orange); }
.btn.danger { color: var(--red-ink); border-color: var(--red-bg); background: var(--red-bg); } .btn.big { min-height: 52px; font-size: 16px; padding: 0 24px; } .btn.sm { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 9px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; } .linkbtn { background: none; border: 0; color: var(--orange-ink); font: 600 13px var(--font); cursor: pointer; padding: 0; }
.pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill.ok { background: var(--green-bg); color: var(--green-ink); } .pill.bad { background: var(--red-bg); color: var(--red-ink); } .pill.warn { background: #fff1e3; color: #8a4210; }
.pill.half { background: var(--purple-bg); color: var(--purple-ink); } .pill.off { background: var(--grey); color: var(--grey-ink); } .pill.dark { background: var(--ink); color: var(--cream); } .pill.peach { background: var(--peach); color: var(--brown); }
.alert { padding: 12px 14px; border-radius: 12px; margin: 10px 0; font-size: 14px; } .alert.ok { background: var(--green-bg); color: var(--green-ink); } .alert.bad { background: var(--red-bg); color: var(--red-ink); } .alert.warn { background: #fff1e3; color: #8a4210; } .alert.info { background: var(--cream-2); color: var(--ink-2); }
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
input, select, textarea { font: 15px var(--font); color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: 12px; min-height: 46px; padding: 8px 12px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--peach); border-color: var(--orange); } textarea { min-height: 80px; }
input[type=checkbox] { width: 22px; height: 22px; min-height: 0; accent-color: var(--ink); margin: 0; } .check { flex-direction: row; align-items: center; gap: 10px; font-weight: 500; }
input.hl { border: 2px solid var(--orange); background: var(--cream); }
.tbl { width: 100%; border-collapse: collapse; } .tbl th, .tbl td { padding: 10px 12px; text-align: left; border-top: 1px solid #f3e8d8; vertical-align: middle; }
.tbl th { background: var(--cream-2); font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); border-top: 0; } .tbl.small td, .tbl.small th { padding: 7px 10px; font-size: 13px; }
.tbl tfoot td { background: var(--cream-2); font-weight: 600; border-top: 2px solid var(--ink); } .tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } .scroll-x > table { min-width: 720px; }
.avatar { width: 36px; height: 36px; border-radius: 11px; background: var(--peach); color: var(--brown); display: inline-flex; align-items: center; justify-content: center; font: 800 13px var(--head); flex-shrink: 0; } .avatar.lg { width: 56px; height: 56px; border-radius: 16px; font-size: 19px; }
.who { display: flex; align-items: center; gap: 10px; min-width: 0; } .who .n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .who .s { font-size: 12px; color: var(--muted); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--grey-ink); display: inline-block; flex-shrink: 0; } .dot.ok { background: #6fcf86; } .dot.warn { background: var(--orange); } .dot.bad { background: var(--red); }

/* ---------- admin layout ---------- */
.admin-body { background: var(--cream); }
.topbar { background: var(--ink); color: var(--cream); } .topbar-in { max-width: 1240px; margin: 0 auto; padding: 10px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--cream); text-decoration: none; } .brand img { width: 36px; height: 42px; object-fit: contain; background: #fff; border-radius: 8px; padding: 2px; } .brand b { font: 800 17px var(--head); }
.nav { display: flex; flex-wrap: wrap; gap: 4px; } .nav a { color: var(--cream); padding: 9px 13px; border-radius: 10px; text-decoration: none; font-weight: 500; font-size: 13.5px; } .nav a.active { background: var(--orange); color: var(--ink); font-weight: 600; } .nav a:hover { background: var(--dark-2); } .nav a.active:hover { background: var(--orange); }
.userbox { font-size: 12.5px; color: #d8d2cc; display: flex; align-items: center; gap: 10px; } .userbox a { color: var(--peach); }
.navtoggle { display: none; background: none; border: 1px solid #5a5658; color: var(--cream); border-radius: 10px; min-height: 40px; padding: 0 12px; font: 600 13px var(--font); }
@media (max-width: 860px) { .navtoggle { display: inline-flex; } .nav { display: none; width: 100%; flex-direction: column; } .nav.open { display: flex; } .nav a { padding: 12px 14px; } .userbox { width: 100%; justify-content: space-between; } }
.page { max-width: 1240px; margin: 0 auto; padding: 22px 20px 48px; display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 640px) { .page { padding: 14px 14px 40px; gap: 14px; } h1 { font-size: 23px; } }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; } .card.tight { padding: 0; overflow: hidden; } .card.dark { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.card-head { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; } .card-head h3 { font-size: 17px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .kpi { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; } .kpi .l { font-size: 12.5px; color: var(--muted); } .kpi .v { font: 800 28px var(--head); margin-top: 2px; } .kpi.dark { background: var(--ink); color: var(--cream); border-color: var(--ink); } .kpi.dark .l { color: #d8d2cc; } .kpi.dark .v { color: var(--peach); }
@media (max-width: 640px) { .kpi .v { font-size: 22px; } .cal { gap: 3px; } .cal a, .cal .c { min-height: 52px; padding: 4px; font-size: 9.5px; border-radius: 8px; } .cal .v { font-size: 11px; } }
.tabs { display: inline-flex; gap: 4px; background: var(--cream-2); border-radius: 12px; padding: 4px; flex-wrap: wrap; } .tabs a, .tabs button { min-height: 38px; padding: 0 14px; border-radius: 9px; display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); font: 500 14px var(--font); border: 0; background: transparent; cursor: pointer; } .tabs .active { background: var(--ink); color: var(--cream); font-weight: 600; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 10px; }
.toolbar form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .toolbar input, .toolbar select { min-height: 40px; width: auto; }
.cols { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; } .cols > .main { flex: 999 1 560px; min-width: 0; } .cols > .side { flex: 1 1 300px; min-width: 0; }
.split { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; } .split > * { flex: 1 1 420px; min-width: 0; }
.evlist { display: flex; flex-direction: column; } .ev { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #f3e8d8; } .ev:first-child { border-top: 0; }
.ev img { width: 56px; height: 70px; object-fit: cover; border-radius: 10px; background: var(--peach); flex-shrink: 0; } .ev .ph { width: 56px; height: 70px; border-radius: 10px; background: var(--grey); flex-shrink: 0; }
.ev .t { font: 800 16px var(--head); width: 86px; flex-shrink: 0; } .ev .d { flex: 1; min-width: 0; }
.photo-thumb { width: 44px; height: 54px; object-fit: cover; border-radius: 9px; background: var(--peach); }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } .cal .h { text-align: center; font-size: 11.5px; font-weight: 600; color: var(--muted); } .cal .h.sun { color: var(--red); }
.cal a, .cal .c { min-height: 66px; border-radius: 12px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; font-size: 11.5px; } .cal .c.empty { background: transparent; }
.cal .d { font-weight: 600; } .cal .v { font: 800 14px var(--head); }
.st-present { background: var(--green-bg); color: var(--green-ink); } .st-half { background: var(--purple-bg); color: var(--purple-ink); } .st-absent { background: var(--red-bg); color: var(--red-ink); } .st-off { background: var(--grey); color: var(--grey-ink); }
.st-incomplete { background: #fff1e3; color: #8a4210; box-shadow: inset 0 0 0 2px var(--orange); } .st-working, .st-on_break { background: #fff1e3; color: #8a4210; } .st-not_yet { background: var(--cream-2); color: var(--muted); }
.st-sun { box-shadow: inset 0 0 0 2px var(--orange); }
.reg-cell { display: inline-flex; width: 30px; height: 30px; border-radius: 7px; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; text-decoration: none; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--ink-2); } .legend span { display: inline-flex; align-items: center; gap: 6px; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; } .bars .b { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; height: 100%; font-size: 10px; color: var(--muted); } .bars .b i { display: block; width: 100%; border-radius: 5px 5px 0 0; background: var(--ink); } .bars .b.cur i { background: var(--orange); }
.flash { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--ink); color: var(--cream); padding: 12px 18px; border-radius: 12px; font-weight: 600; z-index: 50; }
.login-wrap, .setup-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } .login-card { width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.setup-card { width: 100%; max-width: 760px; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 28px; } .setup-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; } .steps li { margin: 6px 0; }
.perm-grid td:not(:first-child) { text-align: center; }
.face-wrap { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; } .face-cam { position: relative; width: 300px; max-width: 100%; aspect-ratio: 3/4; background: var(--dark-2); border-radius: 16px; overflow: hidden; } .face-cam video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.face-shots { display: grid; grid-template-columns: repeat(3, 90px); gap: 8px; } .face-shots div { aspect-ratio: 3/4; border-radius: 12px; background: var(--peach); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--brown); font-weight: 600; overflow: hidden; border: 2px dashed var(--orange); } .face-shots div.done { border-style: solid; border-color: var(--green); } .face-shots img { width: 100%; height: 100%; object-fit: cover; }
.hist { font-size: 13px; } .hist div { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid #f3e8d8; }
.sticky-actions { position: sticky; bottom: 0; background: var(--cream); padding: 10px 0; }
@media print { .topbar, .toolbar, .btn, .nav, .noprint { display: none !important; } body { background: #fff; } .card { border: 0; } .page { padding: 0; } }

/* ---------- kiosk ---------- */
body.kiosk { background: var(--dark); color: var(--cream); overflow: hidden; height: 100vh; height: 100dvh; }
body.kiosk #app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; }
.k-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 8px; } .k-brand { display: flex; align-items: center; gap: 10px; } .k-logo { width: 40px; height: 46px; object-fit: contain; background: #fff; border-radius: 10px; padding: 3px; }
.k-title { font: 800 17px var(--head); } .k-sub { font-size: 12px; color: #c9c3bd; }
.k-net { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(159,211,168,.12); color: #9fd3a8; } .k-net .dot { width: 8px; height: 8px; background: #6fcf86; } .k-net.off { background: rgba(182,51,34,.18); color: #f3b3aa; } .k-net.off .dot { background: var(--red); }
.k-screen { display: none; flex: 1; min-height: 0; flex-direction: column; } .k-screen.active { display: flex; }
#s-scan { gap: 0; } .k-clock { padding: 4px 18px 0; } .k-time { font: 800 42px/1.05 var(--head); letter-spacing: -.5px; } .k-date { font-size: 15px; color: #c9c3bd; }
.k-cam { flex: 1; min-height: 0; margin: 14px 18px; border-radius: 26px; background: var(--dark-2); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.k-cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); } .k-cam canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.k-ring { position: relative; width: 58%; max-width: 230px; aspect-ratio: 230/290; border: 4px dashed var(--orange); border-radius: 50%; opacity: .95; transition: border-color .2s; } .k-ring.ok { border-color: #6fcf86; border-style: solid; } .k-ring.bad { border-color: var(--red); } .k-ring.warn { border-color: var(--peach); }
.k-cam-msg { position: absolute; left: 14px; right: 14px; bottom: 14px; background: rgba(31,29,30,.82); border-radius: 14px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; font-size: 14px; } .k-cam-msg .dot { background: var(--orange); } .k-cam-msg .dot.ok { background: #6fcf86; } .k-cam-msg .dot.bad { background: var(--red); } .k-cam-msg .dot.warn { background: var(--peach); }
.k-foot { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 8px; } .k-hint { font: 800 21px var(--head); text-align: center; } .k-hint-sub { font-size: 12.5px; color: #c9c3bd; text-align: center; }
.k-stats { display: flex; gap: 10px; margin-top: 4px; } .k-stat { flex: 1; background: var(--dark-2); border-radius: 14px; padding: 10px 12px; } .k-stat .l { font-size: 11.5px; color: #c9c3bd; } .k-stat .v { font: 800 20px var(--head); } .k-stat .v.small { font-size: 14px; } .k-stat .muted { color: #c9c3bd; font-size: 13px; font-weight: 600; }
#s-action, #s-summary, #s-toast, #s-blocked { background: var(--cream); color: var(--ink); padding: 16px 18px; gap: 12px; overflow-y: auto; }
.k-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 14px 16px; } .k-card-title { font: 800 15px var(--head); margin-bottom: 8px; } .k-card.k-center { text-align: center; margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 20px; }
.k-who { display: flex; align-items: center; gap: 14px; } .k-photo { width: 70px; height: 86px; border-radius: 16px; object-fit: cover; background: var(--peach); flex-shrink: 0; transform: none; } .k-who-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.k-matched { font-size: 12px; color: var(--green); font-weight: 600; display: flex; align-items: center; gap: 6px; } .k-matched .dot { width: 8px; height: 8px; background: var(--green); } .k-name { font: 800 23px/1.1 var(--head); } .k-status { font-size: 13px; color: var(--muted); } .k-status strong { color: var(--ink); }
.k-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.k-btn { position: relative; min-height: 118px; border: 0; border-radius: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font: 800 19px var(--head); background: var(--grey); color: var(--grey-ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.k-btn svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.k-btn .lock { display: none; position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8486' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='11' width='14' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>"); }
.k-btn.locked .lock { display: block; } .k-btn.on { box-shadow: 0 0 0 4px var(--peach); } .k-btn.on.in { background: var(--green); color: #fff; } .k-btn.on.out { background: var(--ink); color: var(--cream); } .k-btn.on.brk { background: var(--orange); color: var(--ink); }
.k-btn:active.on { transform: scale(.98); }
.k-note { min-height: 44px; border-radius: 14px; padding: 10px 14px; display: flex; align-items: center; font-size: 14px; font-weight: 600; background: #f6efe4; color: var(--ink-2); } .k-note.bad { background: var(--red-bg); color: var(--red-ink); }
.k-today { flex: 1; min-height: 90px; } .k-events { display: flex; flex-direction: column; gap: 8px; font-size: 14px; } .k-ev { display: flex; align-items: center; gap: 12px; } .k-ev .t { width: 76px; font-weight: 600; } .k-live { margin-top: 8px; font-size: 13px; color: var(--muted); }
.k-row-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.k-done { display: flex; align-items: center; gap: 12px; } .k-done.big { flex-direction: column; text-align: center; margin: auto; gap: 14px; } .k-done-icon { width: 54px; height: 54px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .k-done.big .k-done-icon { width: 96px; height: 96px; }
.k-done-icon svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .k-done.big .k-done-icon svg { width: 52px; height: 52px; } .k-done-title { font: 800 22px/1.2 var(--head); } .k-done.big .k-done-title { font-size: 30px; } .k-toast-sub { font-size: 15px; color: var(--muted); }
.k-brk { padding: 8px 0; border-top: 1px solid #f3e8d8; } .k-brk:first-child { border-top: 0; } .k-brk-h { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; } .k-brk-r { display: flex; justify-content: space-between; font-size: 14px; margin-top: 2px; } .k-brk-r em { font-style: normal; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; margin-left: 6px; } .k-brk-r em.cut { background: var(--red-bg); color: var(--red-ink); } .k-brk-r em.ok { background: var(--green-bg); color: var(--green-ink); }
.k-calc { display: flex; justify-content: space-between; font-size: 14px; padding: 5px 0; } .k-calc strong.cut { color: var(--red); } .k-calc strong.ok { color: var(--green); }
.k-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; } .k-total span { font: 800 17px var(--head); } .k-total strong { font: 800 32px var(--head); color: var(--red); }
.k-progress { margin-top: auto; display: flex; flex-direction: column; gap: 8px; align-items: center; } .k-progress .bar { width: 100%; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; } .k-progress .bar div { height: 6px; background: var(--orange); width: 0; transition: width 1s linear; }