/* ══════════════════════════════════════════════════════
   KCCLOCK — Attendance App Styles
   Base: KC Lifts design system (glassmorphism + Inter)
   Dark / Light mode + Mobile-first + Admin desktop
   ══════════════════════════════════════════════════════ */

/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

/* ── Success Popup ───────────────────────────────────── */
.success-overlay {
  position:fixed; inset:0; z-index:600;
  background:rgba(0,0,0,0.65);
  backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  animation:fadeIn 0.25s ease;
}
.success-card {
  width:100%; max-width:380px;
  padding:36px 28px;
  text-align:center;
  animation:scaleIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.success-icon {
  width:72px; height:72px;
  background: var(--gradient-lime);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; font-weight:900; color:#1a2a00;
  margin:0 auto 20px;
  box-shadow:0 8px 30px rgba(198,241,53,0.35);
  animation:popIn 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.1s backwards;
}
[data-theme="light"] .success-icon { box-shadow:0 8px 30px rgba(101,163,13,0.3); }
@keyframes popIn{ from{transform:scale(0)} to{transform:scale(1)} }
.success-title {
  font-size:1.4rem; font-weight:900; letter-spacing:-0.4px;
  color:var(--text-primary); margin-bottom:8px;
}
.success-msg {
  font-size:0.9rem; color:var(--text-secondary);
  margin-bottom:24px; line-height:1.5;
}


/* ── Design Tokens: DARK (default) ─────────────────── */
:root {
  /* Colors */
  --bg-dark:          #0a0e1a;
  --glass-bg:         rgba(15,20,40,0.65);
  --glass-bg-2:       rgba(20,26,52,0.8);
  --glass-border:     rgba(255,255,255,0.08);
  --glass-hover:      rgba(255,255,255,0.04);
  --input-bg:         rgba(10,14,30,0.6);
  --input-border:     rgba(255,255,255,0.1);
  --input-focus:      rgba(79,172,254,0.3);
  --text-primary:     #f0f2f8;
  --text-secondary:   rgba(240,242,248,0.5);
  --text-label:       rgba(240,242,248,0.65);
  /* Accents */
  --accent-cyan:      #00f2fe;
  --accent-blue:      #4facfe;
  --accent-lime:      #c6f135;
  --gradient-btn:     linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --gradient-lime:    linear-gradient(135deg, #c6f135 0%, #a3e635 100%);
  /* Semantic */
  --danger:           #ff6b6b;
  --warning:          #ffb443;
  --success:          #2ecc71;
  /* Radii */
  --r-xl: 20px; --r-lg: 16px; --r-md: 12px; --r-sm: 8px; --r-xs: 6px;
  /* Shadows */
  --shadow-card:      0 4px 24px rgba(0,0,0,0.3);
  --shadow-btn:       0 6px 30px rgba(79,172,254,0.3);
  /* Sidebar */
  --sidebar-w:        240px;
  /* Nav height */
  --nav-h:            70px;
}

/* ── Design Tokens: LIGHT ────────────────────────────── */
[data-theme="light"] {
  --bg-dark:          #f0f4fc;
  --glass-bg:         rgba(255,255,255,0.7);
  --glass-bg-2:       rgba(240,244,252,0.9);
  --glass-border:     rgba(0,0,0,0.08);
  --glass-hover:      rgba(0,0,0,0.03);
  --input-bg:         rgba(255,255,255,0.8);
  --input-border:     rgba(0,0,0,0.12);
  --input-focus:      rgba(79,172,254,0.25);
  --text-primary:     #0d1124;
  --text-secondary:   rgba(13,17,36,0.5);
  --text-label:       rgba(13,17,36,0.6);
  --accent-cyan:      #007bc0;
  --accent-blue:      #2563eb;
  --accent-lime:      #65a30d;
  --gradient-btn:     linear-gradient(135deg, #2563eb 0%, #007bc0 100%);
  --gradient-lime:    linear-gradient(135deg, #84cc16 0%, #65a30d 100%);
  --danger:           #e53e3e;
  --warning:          #d97706;
  --success:          #16a34a;
  --shadow-card:      0 4px 24px rgba(0,0,0,0.08);
  --shadow-btn:       0 6px 20px rgba(37,99,235,0.25);
}

/* ── Base ─────────────────────────────────────────── */
html { scroll-behavior:smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-dark);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s, color 0.3s;
}

/* ── Background Orbs ───────────────────────────────── */
.bg-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(130px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
.bg-orb--1 {
  width:600px; height:600px;
  background: radial-gradient(circle, rgba(79,70,180,0.6) 0%, transparent 70%);
  top:-150px; left:-100px;
  animation: orbFloat1 20s ease-in-out infinite;
}
.bg-orb--2 {
  width:500px; height:500px;
  background: radial-gradient(circle, rgba(0,150,200,0.5) 0%, transparent 70%);
  bottom:-100px; right:-80px;
  animation: orbFloat2 25s ease-in-out infinite;
}
.bg-orb--3 {
  width:400px; height:400px;
  background: radial-gradient(circle, rgba(100,50,180,0.4) 0%, transparent 70%);
  top:40%; left:50%;
  animation: orbFloat3 18s ease-in-out infinite;
}
[data-theme="light"] .bg-orb { opacity:0.12; }
@keyframes orbFloat1{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(60px,40px)} }
@keyframes orbFloat2{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(-50px,-60px)} }
@keyframes orbFloat3{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(-40px,50px)} }

/* ── Screen System ─────────────────────────────────── */
.screen { display:none; position:relative; z-index:1; min-height:100vh; }
.screen--active { display:block; animation:screenIn 0.3s ease; }
@keyframes screenIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ── Glass Card ────────────────────────────────────── */
.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 24px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.3s;
}

/* ── Mobile App Container ──────────────────────────── */
.app-container {
  position: relative; z-index:1;
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 16px calc(var(--nav-h) + 20px);
}

/* ════════════════════════════════════════════════════
   AUTH SCREEN
════════════════════════════════════════════════════ */
.screen--auth.screen--active {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}
.auth-wrapper { width:100%; max-width:420px; }
.auth-card { padding:32px 28px; }

.auth-logo-wrap {
  text-align:center;
  margin-bottom: 28px;
}
.auth-logo-icon {
  display: inline-flex;
  align-items:center; justify-content:center;
  width:64px; height:64px;
  background: var(--gradient-btn);
  border-radius: var(--r-md);
  font-size:1.4rem; font-weight:900;
  color:#fff;
  box-shadow: var(--shadow-btn);
  margin-bottom:10px;
}
.auth-logo-text {
  font-size:1.5rem; font-weight:900;
  letter-spacing:-0.5px;
  color: var(--text-primary);
}
.auth-logo-sub {
  font-size:0.8rem;
  color: var(--text-secondary);
  margin-top:2px;
}

.auth-tabs {
  display:flex;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  padding: 4px;
  margin-bottom: 22px;
}
.auth-tab {
  flex:1; padding:9px;
  background:none; border:none;
  color: var(--text-secondary);
  font-family:inherit; font-size:0.9rem; font-weight:600;
  border-radius: 6px;
  cursor:pointer; transition: all 0.2s;
}
.auth-tab--active {
  background: var(--gradient-btn);
  color: #fff;
  box-shadow: 0 2px 10px rgba(79,172,254,0.3);
}

.auth-form { display:flex; flex-direction:column; gap:14px; }
.auth-error {
  color: var(--danger);
  font-size:0.82rem; font-weight:500;
  min-height:18px; text-align:center;
}

/* ── Inputs ─────────────────────────────── */
.field-group { display:flex; flex-direction:column; gap:6px; }
.field-label {
  font-size:0.68rem; font-weight:700;
  letter-spacing:1.2px; text-transform:uppercase;
  color: var(--text-label);
}
.field-input, .field-select {
  width:100%;
  padding: 12px 14px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-family:inherit; font-size:0.92rem;
  outline:none;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.field-input:focus, .field-select:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px var(--input-focus);
}
.field-input::placeholder { color: var(--text-secondary); }

.input-eye-wrap { position:relative; }
.input-eye-wrap .field-input { padding-right:44px; }
.eye-btn {
  position:absolute; right:12px; top:50%;
  transform:translateY(-50%);
  background:none; border:none;
  color: var(--text-secondary);
  cursor:pointer; padding:4px;
  transition:color 0.2s;
}
.eye-btn:hover { color: var(--accent-cyan); }

/* ── Buttons ──────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px;
  background: var(--gradient-btn);
  color:#fff;
  font-family:inherit; font-size:0.95rem; font-weight:700;
  border:none; border-radius: var(--r-md);
  cursor:pointer;
  box-shadow: var(--shadow-btn);
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
  white-space:nowrap;
}
.btn-primary:hover { transform:translateY(-2px); filter:brightness(1.08); }
.btn-primary:active { transform:translateY(0); }
.btn-primary:disabled { opacity:0.5; pointer-events:none; }
.btn-block { width:100%; }
.btn--sm { padding:8px 16px; font-size:0.85rem; }

/* ════════════════════════════════════════════════════
   MOBILE USER SCREENS
════════════════════════════════════════════════════ */
.screen--user { max-width:520px; margin:0 auto; }

/* ── Top Bar ────────────────────────────── */
.top-bar {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px; gap:12px;
}
.top-bar__profile { cursor:pointer; }
.top-bar__center { flex:1; min-width:0; }
.top-bar__right { display:flex; align-items:center; gap:8px; }
.greeting { font-size:0.8rem; color: var(--text-secondary); font-weight:500; }
.user-name { font-size:1.05rem; font-weight:800; letter-spacing:-0.3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.screen-title { font-size:1.15rem; font-weight:800; flex:1; text-align:center; }

/* ── Icon Buttons ─────────────────── */
.icon-btn {
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  cursor:pointer;
  transition: all 0.2s;
  position:relative;
}
.icon-btn:hover {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}
.notif-btn .notif-badge {
  position:absolute; top:-6px; right:-6px;
  width:18px; height:18px;
  background: var(--danger);
  color:#fff; font-size:0.65rem; font-weight:700;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
/* Theme icon visibility */
.icon-moon { display:none; }
[data-theme="light"] .icon-sun { display:none; }
[data-theme="light"] .icon-moon { display:block; }

/* ── Avatar ────────────────────────── */
.avatar {
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; letter-spacing:0.03em;
  color:#fff; flex-shrink:0;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08), 0 4px 14px rgba(0,0,0,0.25);
  background: var(--gradient-btn);
}
.avatar--xs  { width:30px; height:30px; font-size:0.65rem; }
.avatar--sm  { width:42px; height:42px; font-size:0.9rem; }
.avatar--md  { width:56px; height:56px; font-size:1.1rem; }
.avatar--lg  { width:72px; height:72px; font-size:1.4rem; }

/* ── Back Button ─────────────────── */
.back-btn {
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  cursor:pointer;
  transition: all 0.2s;
  flex-shrink:0;
}
.back-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); }

/* ── Clock Card ─────────────────────────────────────── */
.clock-card {
  margin-bottom:20px;
  text-align:center;
  background: linear-gradient(135deg, rgba(79,70,180,0.35) 0%, rgba(0,150,200,0.25) 100%);
  border-color: rgba(79,172,254,0.18);
}
[data-theme="light"] .clock-card {
  background: linear-gradient(135deg, rgba(37,99,235,0.08) 0%, rgba(0,123,192,0.06) 100%);
}
.clock-card__time {
  font-size:3rem; font-weight:900;
  letter-spacing:-2px; line-height:1;
  margin-bottom:4px;
  background: var(--gradient-btn);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.clock-card__date {
  font-size:0.85rem; color: var(--text-secondary);
  margin-bottom:14px;
}
.clock-card__status {
  display:inline-flex; align-items:center; gap:7px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
  border-radius:20px; padding:5px 14px;
  font-size:0.8rem; font-weight:600;
  color: var(--text-secondary);
  margin-bottom:18px;
}
.status-dot {
  width:8px; height:8px; border-radius:50%;
  background: var(--text-secondary);
  transition: background 0.3s, box-shadow 0.3s;
}
.status-dot--active {
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
  animation: pulse 2s infinite;
}
.status-dot--out { background: var(--danger); }
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}

.clock-card__actions { display:flex; gap:12px; }
.action-btn {
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px;
  border:none; border-radius: var(--r-md);
  font-family:inherit; font-size:0.95rem; font-weight:800;
  cursor:pointer;
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}
.action-btn:hover { transform:translateY(-2px); filter:brightness(1.08); }
.action-btn:active { transform:translateY(0); }
.action-btn--checkin {
  background: var(--gradient-lime);
  color:#1a2a00;
  box-shadow: 0 6px 20px rgba(198,241,53,0.35);
}
.action-btn--checkout {
  background: var(--glass-bg-2);
  color: var(--text-primary);
  border: 1px solid var(--glass-border);
  box-shadow: none;
}
[data-theme="light"] .action-btn--checkout {
  background: rgba(0,0,0,0.04);
}

/* ── Summary Row ──────────────────── */
.summary-row {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  margin-bottom:22px;
}
.summary-chip {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding:12px 10px;
  text-align:center;
}
.summary-chip__icon {
  width:24px; height:24px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 6px;
}
.summary-chip__icon.ci { background:rgba(198,241,53,0.15); color:var(--accent-lime); }
.summary-chip__icon.co { background:rgba(255,107,107,0.15); color:var(--danger); }
.summary-chip__icon.hrs { background:rgba(79,172,254,0.15); color:var(--accent-blue); }
.summary-chip__label { font-size:0.65rem; color:var(--text-secondary); font-weight:600; text-transform:uppercase; letter-spacing:0.8px; margin-bottom:3px; }
.summary-chip__value { font-size:1rem; font-weight:800; color:var(--text-primary); }

/* ── Section Label ────────────────── */
.section-label {
  font-size:0.7rem; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  color: var(--text-label);
  margin-bottom:12px;
}

/* ── Quick Grid ─────────────────────── */
.quick-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  margin-bottom:22px;
}
.quick-btn {
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:14px 8px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  font-family:inherit; font-size:0.75rem; font-weight:600;
  cursor:pointer;
  transition: all 0.25s;
}
.quick-btn:hover {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
  transform:translateY(-3px);
  box-shadow: 0 6px 20px rgba(79,172,254,0.1);
}
.quick-btn__icon {
  width:42px; height:42px;
  background: rgba(255,255,255,0.05);
  border-radius: var(--r-sm);
  display:flex; align-items:center; justify-content:center;
}

/* ── Recent / History List ─────────── */
.recent-list, .history-list {
  display:flex; flex-direction:column; gap:10px;
  padding-bottom:8px;
}
.history-item {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding:14px 16px;
  display:flex; align-items:center; gap:14px;
  animation: fadeInUp 0.35s ease forwards;
  opacity:0;
}
@keyframes fadeInUp{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.hist-date {
  min-width:44px;
  text-align:center;
  background: rgba(255,255,255,0.05);
  border-radius: var(--r-sm);
  padding:6px 8px;
}
.hist-date__num { font-size:1.1rem; font-weight:800; color:var(--text-primary); line-height:1; }
.hist-date__mon { font-size:0.65rem; color:var(--text-secondary); font-weight:600; text-transform:uppercase; }
.hist-times { flex:1; display:flex; gap:14px; flex-wrap:wrap; }
.hist-time { display:flex; flex-direction:column; }
.hist-time__val { font-size:0.9rem; font-weight:700; color:var(--text-primary); }
.hist-time__lbl { font-size:0.6rem; color:var(--text-secondary); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.hist-badge {
  font-size:0.65rem; font-weight:700; text-transform:uppercase;
  padding:4px 9px; border-radius:20px; white-space:nowrap;
}
.hist-badge--ontime { background:rgba(46,204,113,0.12); color:var(--success); }
.hist-badge--late   { background:rgba(255,180,50,0.12); color:var(--warning); }
.hist-badge--absent { background:rgba(255,107,107,0.12); color:var(--danger); }

.loading-state { color:var(--text-secondary); text-align:center; padding:24px; font-size:0.9rem; }
.empty-state { text-align:center; padding:40px 20px; color:var(--text-secondary); }

/* ── Today Sessions List ──────────────────── */
.sessions-list { display:flex; flex-direction:column; gap:8px; }
.session-item {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding:12px 14px;
  display:flex; align-items:center; gap:12px;
}
.session-item--open {
  border-color: rgba(198,241,53,0.3);
  background: rgba(198,241,53,0.04);
}
[data-theme="light"] .session-item--open { border-color:rgba(101,163,13,0.25); }
.session-num {
  width:26px; height:26px; border-radius:50%;
  background: rgba(79,172,254,0.12);
  border: 1px solid rgba(79,172,254,0.2);
  display:flex; align-items:center; justify-content:center;
  font-size:0.65rem; font-weight:800; color:var(--accent-blue);
  flex-shrink:0;
}
.session-times { flex:1; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.session-time  { display:flex; flex-direction:column; }
.session-time span:first-child { font-size:0.88rem; font-weight:700; color:var(--text-primary); }
.session-time span:last-child  { font-size:0.6rem; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.4px; }
.session-hrs { font-size:0.78rem; font-weight:700; color:var(--accent-blue); white-space:nowrap; }
.session-open-badge {
  font-size:0.65rem; font-weight:700; text-transform:uppercase;
  background:rgba(198,241,53,0.12); color:var(--accent-lime);
  padding:3px 8px; border-radius:10px;
}
.session-loc {
  font-size:0.65rem; color:var(--text-secondary);
  display:flex; align-items:center; gap:4px; flex-shrink:0;
}

/* ── GPS Status ───────────────────────────── */
.gps-status {
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
  border-radius:20px; padding:6px 14px;
  color:rgba(240,242,248,0.65); font-size:0.8rem; margin-bottom:16px;
}
.gps-status--ok   { color:#48bb78; border-color:rgba(72,187,120,0.3); }
.gps-status--fail { color:var(--warning); }
.action-btn:disabled { opacity:0.4; pointer-events:none; }


/* ── Filter Bar ─────────────────────── */
.filter-bar { display:flex; gap:8px; margin-bottom:16px; overflow-x:auto; padding-bottom:4px; }
.filter-chip {
  padding:7px 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius:20px;
  color: var(--text-secondary);
  font-family:inherit; font-size:0.82rem; font-weight:600;
  cursor:pointer; white-space:nowrap;
  transition: all 0.2s;
}
.filter-chip--active {
  background: var(--gradient-btn);
  border-color:transparent; color:#fff;
}

/* ── Bottom Nav ─────────────────────── */
.bottom-nav {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:520px;
  height:var(--nav-h);
  background: var(--glass-bg);
  border-top: 1px solid var(--glass-border);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  display:flex; align-items:center; justify-content:space-around;
  padding:0 8px;
  z-index:100;
}
.nav-btn {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  flex:1; padding:8px 4px;
  background:none; border:none;
  color: var(--text-secondary);
  font-family:inherit; font-size:0.65rem; font-weight:600;
  cursor:pointer; border-radius: var(--r-sm);
  transition: all 0.2s;
}
.nav-btn:hover { color:var(--accent-blue); }
.nav-btn--active { color:var(--accent-cyan) !important; }
[data-theme="light"] .nav-btn--active { color:var(--accent-blue) !important; }

/* ════════════════════════════════════════════════════
   FACE VERIFICATION
════════════════════════════════════════════════════ */
.screen--dark-force {
  background: #090c16 !important;
}
[data-theme="light"] .screen--dark-force {
  background: #0d1020 !important;
}
.verify-container {
  display:flex; flex-direction:column; align-items:center;
  min-height:100vh; padding:24px 20px;
  position:relative; z-index:1;
}
.verify-topbar {
  width:100%; max-width:480px;
  display:flex; align-items:center; gap:14px;
  margin-bottom:40px;
}
.verify-title { font-size:1.1rem; font-weight:700; color:#f0f2f8; }
.verify-topbar .back-btn { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.1); color:#f0f2f8; }
.face-outer { position:relative; margin-bottom:40px; }
.face-circle {
  width:260px; height:260px;
  border-radius:50%;
  background:#0d1020;
  overflow:hidden;
  position:relative;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.06), 0 8px 40px rgba(0,0,0,0.6);
}
.face-circle video {
  width:100%; height:100%;
  object-fit:cover; transform:scaleX(-1);
}
.face-ring {
  position:absolute; inset:0;
  border-radius:50%;
  border:4px solid var(--ring-color, #e53e3e);
  transition: border-color 0.4s, box-shadow 0.4s;
  pointer-events:none;
}
.face-ring--scanning { border-color: #e53e3e; box-shadow:0 0 30px rgba(229,62,62,0.5) inset; }
.face-ring--success  { border-color: #48bb78; box-shadow:0 0 30px rgba(72,187,120,0.5) inset; }
.verify-instructions { color:rgba(240,242,248,0.6); font-size:0.9rem; margin-bottom:20px; text-align:center; }
.verify-status-pill {
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:30px; padding:10px 24px;
  color:#f0f2f8; font-weight:600; font-size:0.9rem;
  position:relative; overflow:hidden; min-width:200px; text-align:center;
}
.verify-progress-bar {
  position:absolute; bottom:0; left:0; height:3px;
  background: var(--gradient-btn);
  width:0%; transition:width 0.1s linear;
  border-radius:0 0 30px 30px;
}

/* ════════════════════════════════════════════════════
   REPORT SCREEN
════════════════════════════════════════════════════ */
.report-section-label {
  font-size:0.72rem; font-weight:700;
  letter-spacing:1.2px; text-transform:uppercase;
  color:var(--text-label); margin-bottom:12px;
}
.month-tabs { display:flex; gap:6px; margin-bottom:20px; overflow-x:auto; padding-bottom:4px; }
.month-tab {
  padding:7px 14px;
  background: var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:20px; color:var(--text-secondary);
  font-family:inherit; font-size:0.82rem; font-weight:600;
  cursor:pointer; white-space:nowrap; transition:all 0.2s;
}
.month-tab--active { background:var(--gradient-btn); border-color:transparent; color:#fff; }

.timeline-pills { display:flex; gap:10px; margin-bottom:14px; }
.timeline-pill {
  flex:1; display:flex; flex-direction:column;
  padding:12px 14px; border-radius:var(--r-md);
  border:1px solid;
}
.timeline-pill--ci { background:rgba(198,241,53,0.08); border-color:rgba(198,241,53,0.2); }
.timeline-pill--co { background:rgba(79,172,254,0.08); border-color:rgba(79,172,254,0.2); }
[data-theme="light"] .timeline-pill--ci { background:rgba(101,163,13,0.07); border-color:rgba(101,163,13,0.2); }
[data-theme="light"] .timeline-pill--co { background:rgba(37,99,235,0.07); border-color:rgba(37,99,235,0.2); }
.pill-label { font-size:0.65rem; color:var(--text-secondary); font-weight:600; text-transform:uppercase; letter-spacing:0.6px; margin-bottom:4px; }
.pill-time { font-size:1.2rem; font-weight:900; letter-spacing:-0.5px; color:var(--text-primary); }

.chart-box {
  background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:var(--r-md); padding:16px;
}

.overall-row { display:flex; align-items:center; gap:24px; margin-bottom:20px; }
.donut-wrap { position:relative; flex-shrink:0; }
.donut-center-label {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; font-weight:900; color:var(--text-primary);
}
.donut-legend { display:flex; flex-direction:column; gap:10px; flex:1; }
.legend-item { display:flex; align-items:center; gap:8px; font-size:0.85rem; color:var(--text-secondary); }
.legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.legend-item strong { color:var(--text-primary); margin-left:auto; }

.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.stat-card {
  background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:var(--r-md); padding:14px 10px; text-align:center;
}
.stat-card--late   { border-color:rgba(255,180,50,0.2); }
.stat-card--absent { border-color:rgba(255,107,107,0.2); }
.stat-card--hours  { border-color:rgba(79,172,254,0.2); }
.stat-val { font-size:1.3rem; font-weight:900; color:var(--text-primary); }
.stat-lbl { font-size:0.65rem; color:var(--text-secondary); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-top:2px; }

/* ════════════════════════════════════════════════════
   SETTINGS SCREEN
════════════════════════════════════════════════════ */
.profile-card {
  display:flex; align-items:center; gap:16px;
  margin-bottom:20px;
}
.profile-card__name { font-size:1.05rem; font-weight:800; }
.profile-card__role { font-size:0.8rem; color:var(--text-secondary); margin-top:2px; }

.settings-section-label {
  font-size:0.65rem; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--text-label);
  margin:18px 0 8px;
}
.settings-list {
  background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:var(--r-md); overflow:hidden;
}
.settings-row {
  display:flex; align-items:center; gap:14px;
  width:100%; padding:15px 16px;
  background:none; border:none; border-bottom:1px solid var(--glass-border);
  color:var(--text-primary);
  font-family:inherit; font-size:0.9rem; font-weight:500;
  cursor:pointer; text-align:left;
  transition:background 0.2s;
}
.settings-row:last-child { border-bottom:none; }
.settings-row:hover:not(.settings-row--toggle) { background:var(--glass-hover); }
.settings-row--toggle { cursor:default; }
.settings-row__icon { color:var(--text-secondary); flex-shrink:0; }
.settings-row__label { flex:1; }
.settings-row__chevron { color:var(--text-secondary); flex-shrink:0; }
.settings-row--danger .settings-row__label,
.settings-row--danger .settings-row__icon { color:var(--danger); }

/* Toggle Switch */
.toggle-switch { position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider {
  position:absolute; inset:0;
  background:rgba(255,255,255,0.12);
  border-radius:12px;
  cursor:pointer;
  transition:background 0.3s;
}
.toggle-slider::before {
  content:'';
  position:absolute; bottom:3px; left:3px;
  width:18px; height:18px;
  background:#fff; border-radius:50%;
  transition:transform 0.3s;
}
.toggle-switch input:checked + .toggle-slider { background:var(--gradient-btn); }
.toggle-switch input:checked + .toggle-slider::before { transform:translateX(20px); }

.app-version { text-align:center; color:var(--text-secondary); font-size:0.75rem; margin-top:24px; }

/* ════════════════════════════════════════════════════
   MODALS
════════════════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation:fadeIn 0.2s ease;
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.modal { width:100%; max-width:440px; padding:24px; animation:scaleIn 0.25s ease; }
@keyframes scaleIn{ from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)} }
.modal__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.modal__title { font-size:1.1rem; font-weight:800; }
.modal__close {
  background:none; border:none; color:var(--text-secondary);
  cursor:pointer; padding:4px; border-radius:4px;
  transition:color 0.2s;
}
.modal__close:hover { color:var(--danger); }
.modal__body { display:flex; flex-direction:column; gap:14px; margin-bottom:20px; }
.modal__footer { display:flex; gap:10px; justify-content:flex-end; }
.modal-btn {
  padding:10px 22px; border-radius:var(--r-sm);
  font-family:inherit; font-size:0.9rem; font-weight:700;
  cursor:pointer; transition:all 0.2s;
}
.modal-btn--primary { background:var(--gradient-btn); color:#fff; border:none; box-shadow:var(--shadow-btn); }
.modal-btn--primary:hover { filter:brightness(1.08); }
.modal-btn--secondary { background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text-secondary); }
.modal-btn--secondary:hover { border-color:var(--accent-blue); color:var(--accent-blue); }

/* ── Toast ─────────────────────────── */
.toast {
  position:fixed; bottom:calc(var(--nav-h) + 16px); left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--glass-bg-2);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(20px);
  color:var(--text-primary);
  padding:12px 24px; border-radius:var(--r-md);
  font-size:0.88rem; font-weight:600;
  z-index:999; opacity:0;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  pointer-events:none; white-space:nowrap;
}
.toast--show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast--success { border-color:rgba(46,204,113,0.4); color:var(--success); }
.toast--error   { border-color:rgba(255,107,107,0.4); color:var(--danger); }
/* Admin toast should not be offset by nav */
.screen--admin ~ .toast { bottom:24px; }

/* ════════════════════════════════════════════════════
   ADMIN DASHBOARD (Desktop)
════════════════════════════════════════════════════ */
.screen--admin {
  display:none; /* shown by JS when admin user */
  min-height:100vh;
  flex-direction:row;
}
.screen--admin.screen--active { display:flex; }

/* Sidebar */
.admin-sidebar {
  width:var(--sidebar-w);
  min-height:100vh;
  background:var(--glass-bg);
  border-right:1px solid var(--glass-border);
  backdrop-filter:blur(24px);
  display:flex; flex-direction:column;
  flex-shrink:0;
  position:sticky; top:0; height:100vh;
}
.admin-logo {
  display:flex; align-items:center; gap:10px;
  padding:24px 20px 20px;
  border-bottom:1px solid var(--glass-border);
}
.admin-logo-icon {
  width:38px; height:38px;
  background:var(--gradient-btn); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:0.9rem; font-weight:900; color:#fff;
  box-shadow: var(--shadow-btn);
}
.admin-logo-txt { font-size:1rem; font-weight:900; letter-spacing:-0.3px; }

.admin-nav { flex:1; padding:16px 12px; display:flex; flex-direction:column; gap:4px; }
.admin-nav-item {
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:var(--r-sm);
  background:none; border:none;
  color:var(--text-secondary);
  font-family:inherit; font-size:0.9rem; font-weight:600;
  cursor:pointer; text-align:left;
  transition:all 0.2s; width:100%;
}
.admin-nav-item:hover { background:var(--glass-hover); color:var(--text-primary); }
.admin-nav-item--active {
  background:linear-gradient(90deg, rgba(79,172,254,0.15) 0%, transparent 100%);
  color:var(--accent-cyan);
  border-left:3px solid var(--accent-cyan);
}
[data-theme="light"] .admin-nav-item--active { color:var(--accent-blue); border-left-color:var(--accent-blue); }

.admin-sidebar-bottom {
  padding:16px 12px;
  border-top:1px solid var(--glass-border);
  display:flex; align-items:center; gap:8px;
}
.admin-user-chip { flex:1; min-width:0; display:flex; align-items:center; gap:8px; }
.admin-user-chip__name { font-size:0.82rem; font-weight:700; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#btn-admin-signout { background:none; border:none; color:var(--text-secondary); }
#btn-admin-signout:hover { color:var(--danger); }

/* Admin Main */
.admin-main {
  flex:1; min-height:100vh;
  overflow-y:auto; padding:32px;
  position:relative; z-index:1;
}
.admin-tab { display:none; }
.admin-tab--active { display:block; animation:screenIn 0.3s ease; }

.admin-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:28px; gap:16px; flex-wrap:wrap; align-items:center;
}
.admin-page-title { font-size:1.6rem; font-weight:900; letter-spacing:-0.5px; }
.admin-page-sub { font-size:0.85rem; color:var(--text-secondary); margin-top:2px; }

/* KPI Cards */
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.kpi-card {
  background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:var(--r-lg); padding:20px;
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform 0.2s, box-shadow 0.2s;
}
.kpi-card:hover { transform:translateY(-3px); box-shadow:0 8px 30px rgba(0,0,0,0.2); }
.kpi-card__label { font-size:0.72rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--text-secondary); margin-bottom:8px; }
.kpi-card__val { font-size:2.4rem; font-weight:900; letter-spacing:-1px; color:var(--text-primary); }
.kpi-card__icon {
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  opacity:0.15;
}
.kpi-card--present { border-left:3px solid var(--success); }
.kpi-card--late    { border-left:3px solid var(--warning); }
.kpi-card--absent  { border-left:3px solid var(--danger); }
.kpi-card--total   { border-left:3px solid var(--accent-blue); }
.kpi-card--present .kpi-card__val { color:var(--success); }
.kpi-card--late    .kpi-card__val { color:var(--warning); }
.kpi-card--absent  .kpi-card__val { color:var(--danger); }
.kpi-card--total   .kpi-card__val { color:var(--accent-blue); }

/* Admin Table Card */
.admin-card { margin-bottom:24px; padding:0; overflow:hidden; }
.admin-card__header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--glass-border);
  flex-wrap:wrap; gap:12px;
}
.admin-card__title { font-size:1rem; font-weight:800; }
.search-input { max-width:240px; padding:9px 12px; font-size:0.85rem; }

/* Table */
.table-wrap { overflow-x:auto; }
.att-table { width:100%; border-collapse:collapse; }
.att-table th {
  padding:12px 16px;
  font-size:0.68rem; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; color:var(--text-label);
  border-bottom:1px solid var(--glass-border);
  text-align:left; white-space:nowrap;
  background:rgba(255,255,255,0.02);
}
.att-table td {
  padding:13px 16px;
  font-size:0.88rem; color:var(--text-primary);
  border-bottom:1px solid var(--glass-border);
  white-space:nowrap;
}
.att-table tr:last-child td { border-bottom:none; }
.att-table tbody tr:hover { background:var(--glass-hover); }
.att-table .emp-cell { display:flex; align-items:center; gap:10px; }

.status-badge {
  display:inline-flex; align-items:center;
  padding:4px 10px; border-radius:20px;
  font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;
}
.status-badge--ontime  { background:rgba(46,204,113,0.12); color:var(--success); }
.status-badge--late    { background:rgba(255,180,50,0.12); color:var(--warning); }
.status-badge--absent  { background:rgba(255,107,107,0.12); color:var(--danger); }
.status-badge--pending { background:rgba(255,255,255,0.06); color:var(--text-secondary); }

.btn-icon-sm {
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px;
  background:rgba(79,172,254,0.08); border:1px solid rgba(79,172,254,0.2);
  border-radius:6px; color:var(--accent-blue);
  cursor:pointer; transition:all 0.2s;
}
.btn-icon-sm:hover { background:rgba(79,172,254,0.15); }
.btn-icon-sm--danger { background:rgba(255,107,107,0.08); border-color:rgba(255,107,107,0.2); color:var(--danger); }
.btn-icon-sm--danger:hover { background:rgba(255,107,107,0.15); }

.admin-month-picker { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.admin-month-picker .field-input { width:auto; }
.admin-detail-month-bar { display:flex; gap:8px; align-items:center; padding:0 0 16px; flex-wrap:wrap; }
.pct-bar { display:flex; align-items:center; gap:8px; }
.pct-bar__track { flex:1; height:6px; background:rgba(255,255,255,0.08); border-radius:3px; min-width:80px; }
.pct-bar__fill { height:100%; border-radius:3px; background:var(--gradient-btn); transition:width 0.5s; }
.admin-theme-btn { background:none !important; border:none !important; width:auto !important; height:auto !important; }

/* ════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════ */
@media (max-width:600px) {
  .quick-grid { grid-template-columns:repeat(4,1fr); gap:8px; }
  .quick-btn { padding:10px 4px; font-size:0.7rem; }
  .quick-btn__icon { width:36px; height:36px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .clock-card__time { font-size:2.4rem; }
  .summary-row { gap:8px; }
}

@media (max-width:900px) {
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
  .admin-sidebar { width:200px; }
  .admin-main { padding:20px; }
}

@media (max-width:700px) {
  /* Admin becomes stacked on small phones */
  .screen--admin { flex-direction:column; }
  .admin-sidebar { width:100%; height:auto; position:relative; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:12px; }
  .admin-logo { border-bottom:none; padding:0; }
  .admin-nav { flex-direction:row; padding:0; gap:2px; overflow-x:auto; }
  .admin-nav-item { padding:8px 10px; font-size:0.78rem; }
  .admin-nav-item--active { border-left:none; border-bottom:2px solid var(--accent-cyan); }
  .admin-sidebar-bottom { order:-1; padding:0; }
}