@font-face {
  font-family: "Vazirmatn";
  src: url("/static/fonts/vazirmatn-variable.woff2?v=75") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #f2f7ff;
  --card: #ffffff;
  --text: #102247;
  --muted: #65779b;
  --line: #dfe9f8;
  --primary: #0667ff;
  --primary-dark: #0058dc;
  --primary-soft: #d9e8ff;
  --success: #137a52;
  --success-soft: #eaf8f1;
  --warning: #946200;
  --warning-soft: #fff4d2;
  --danger: #b42318;
  --danger-soft: #fff0ee;
  --shadow: 0 14px 38px rgba(17, 51, 108, .08);
  --radius: 22px;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, button, input, select, textarea { font-family: "Vazirmatn", Tahoma, Arial, sans-serif; }

body {
  margin: 0;
  min-width: 320px;
  background: radial-gradient(circle at 10% 0%, rgba(6, 103, 255, .09), transparent 32rem), var(--bg);
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
}

button, input, select, textarea { font-size: 14px; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .52; }

input, select, textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 1px solid #d5e1f4;
  border-radius: 14px;
  padding: 10px 13px;
  background: #fff;
  color: var(--text);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(6, 103, 255, .11); }
label { display: grid; min-width: 0; gap: 7px; color: #40577f; font-size: 12px; font-weight: 700; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1, h2, h3, strong, b { font-weight: 800; }
svg { display: block; }
[hidden] { display: none !important; }

.muted { color: var(--muted); }
.tiny { font-size: 11px; }
.wide { width: 100%; }
.compact { min-height: 38px; padding: 7px 12px; font-size: 12px; }
.mobile-only { display: none; }

button {
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  padding: 9px 15px;
  color: var(--text);
  font-weight: 800;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

button:active { transform: translateY(1px); }
.primary { background: var(--primary); color: #fff; box-shadow: 0 10px 24px rgba(6, 103, 255, .24); }
.primary:hover { background: var(--primary-dark); }
.secondary { border: 1px solid var(--primary); background: rgba(6, 103, 255, .12); color: var(--primary); box-shadow: 0 8px 18px rgba(6, 103, 255, .10); }
.secondary:hover { background: rgba(6, 103, 255, .18); }
.ghost { border: 1px solid rgba(6, 103, 255, .24); background: rgba(6, 103, 255, .06); color: var(--primary); }
.reject { border-color: #ffd3ce; background: var(--danger-soft); color: var(--danger); }

.card, .clock-card {
  min-width: 0;
  border: 1px solid rgba(215, 228, 248, .95);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow);
}

.top {
  position: sticky;
  z-index: 40;
  top: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 8px max(18px, calc((100vw - 1160px) / 2));
  border-bottom: 1px solid rgba(209, 225, 247, .9);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(14px);
}

.top-brand { display: flex; min-width: 0; flex: 0 0 auto; align-items: center; justify-content: flex-end; position: relative; }
.top-brand-logo { display: block; width: auto; height: 42px; max-width: 100%; object-fit: contain; }
.top-brand-logo-dark { display: none; }
.top-center { min-width: 0; align-self: center; justify-self: center; display: grid; gap: 1px; text-align: center; }
.top-company-title { display: block; max-width: 100%; color: #112653; font-size: 15px; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-company-subtitle { display: block; color: var(--muted); font-size: 10px; line-height: 1.2; }
.top-actions { display: flex; align-items: center; flex: 0 0 auto; gap: 7px; justify-self: start; }
.top-actions form { margin: 0; }
.top-actions .ghost, .top-install { min-height: 40px; padding: 7px 11px; }
.icon-btn { position: relative; display: grid; width: 40px; min-width: 40px; height: 40px; min-height: 40px; place-items: center; padding: 0; border: 1px solid #dbe6f6; background: #fff; color: #38527d; }
.icon-svg, .icon-svg svg, .icon-btn svg { width: 21px; height: 21px; }
.notif-mini-badge { position: absolute; top: -5px; right: -5px; display: grid; min-width: 19px; height: 19px; place-items: center; border: 2px solid #fff; border-radius: 99px; background: var(--danger); color: #fff; font-size: 9px; line-height: 1; }

.employee-page, .admin-page { width: min(100%, 1160px); margin: 22px auto 54px; padding: 0 16px; display: grid; gap: 16px; }
.employee-page { width: min(100%, 1000px); }
.dashboard-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.dashboard-head h1 { margin: 1px 0 0; color: #112653; font-size: 27px; line-height: 1.45; }
.dashboard-head p { margin: 0; }
.eyebrow { color: var(--primary); font-size: 11px; font-weight: 800; }
.dashboard-date { padding: 9px 13px; border: 1px solid var(--line); border-radius: 13px; background: #fff; color: #40577f; font-size: 12px; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.metric { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(17, 51, 108, .045); }
.metric.attention { background: #fffaf0; }
.metric span { display: block; color: var(--muted); font-size: 11px; }
.metric strong { display: block; margin-top: 5px; color: #112653; font-size: 25px; line-height: 1.45; }

.smart-card { margin-top: 12px; padding: 16px 18px; }
.smart-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.smart-card h2 { margin: 0; color: #17315f; font-size: 16px; }
.smart-card p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.smart-toggle { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 9px; cursor: pointer; }
.smart-toggle input { position: absolute; width: 1px; height: 1px; min-height: 1px; opacity: 0; pointer-events: none; }
.smart-toggle-track { position: relative; width: 50px; height: 28px; border-radius: 999px; background: #cbd7e9; box-shadow: inset 0 1px 3px rgba(17, 49, 99, .16); transition: background .18s ease; }
.smart-toggle-track::after { content: ""; position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(20, 45, 90, .24); transition: transform .18s ease; }
.smart-toggle input:checked + .smart-toggle-track { background: var(--primary); }
.smart-toggle input:checked + .smart-toggle-track::after { transform: translateX(-22px); }
.smart-toggle input:focus-visible + .smart-toggle-track { outline: 3px solid rgba(6, 103, 255, .2); outline-offset: 2px; }
.smart-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); color: #4f6487; font-size: 10px; }
.smart-status { min-height: 20px; text-align: left; }

.employee-main-grid { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(360px, 1.1fr); gap: 16px; }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.admin-grid > .card, .admin-grid > .mobile-section > .card, .employee-page > .card, .employee-page > .mobile-section > .card { padding: 20px; }
.full { grid-column: 1 / -1; }
.module-shell { min-width: 0; }
.module-shell [data-module-panel] > .card { width: 100%; max-width: 100%; padding: 20px; }
.module-tabs { display: flex; max-width: 100%; gap: 7px; margin-bottom: 12px; padding: 6px; overflow-x: auto; border: 1px solid #d8e5f7; border-radius: 17px; background: rgba(255,255,255,.78); scrollbar-width: none; }
.module-tabs::-webkit-scrollbar { display: none; }
.module-tab { min-height: 40px; flex: 1 0 auto; padding: 7px 14px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: #5b7093; box-shadow: none; font-size: 11px; white-space: nowrap; }
.module-tab.active { border-color: #c7dcfb; background: #fff; color: var(--primary); box-shadow: 0 7px 17px rgba(20,56,112,.08); }
.compact-tabs { width: fit-content; max-width: 100%; }
[data-module-panel] { width: 100%; min-width: 0; max-width: 100%; }
.report-metric-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
.report-chart-card { padding: 20px; }
.report-filter-card, .report-results-card { padding: 20px; }
.report-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 15px; }

.clock-card { padding: 28px 20px; text-align: center; }
.bigtime { color: #102a5d; font-size: clamp(42px, 6vw, 54px); font-weight: 800; letter-spacing: -.04em; line-height: 1.2; }
.state { min-height: 28px; margin: 14px 0; color: #29457a; font-weight: 800; }
.clock-btn { width: 184px; height: 184px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #2f8cff, #0667ff 58%, #004bc2); color: #fff; font-size: 23px; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 18px 34px rgba(6, 103, 255, .25); }
.clock-btn.out { background: radial-gradient(circle at 32% 28%, #ef756c, #c5362c 58%, #922219); }
.hint { margin-top: 14px; color: var(--muted); font-size: 11px; }
.result-box { min-height: 44px; margin-top: 13px; padding: 10px 12px; border-radius: 13px; background: #f5f8fd; font-size: 11px; }

.section-title, .row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-title h2, .card h2 { margin: 0; color: #17315f; font-size: 17px; line-height: 1.5; }
.section-title p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.no-top { margin-top: 0 !important; }
.grid2, .manual-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.full-field, .mobile-span-2 { grid-column: 1 / -1; }
.manual-form.organized-form { align-items: start; }
.manual-panel { min-width: 0; border: 1px solid var(--line); border-radius: 18px; background: #f9fbff; overflow: hidden; }
.manual-panel.date-panel, .manual-panel.note-panel { grid-column: 1 / -1; }
.panel-head { padding: 13px 14px 10px; border-bottom: 1px solid var(--line); }
.panel-head h3 { margin: 0; color: #29457a; font-size: 13px; }
.panel-head p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.panel-body { padding: 13px 14px 14px; }
.manual-date-preview { grid-column: 1 / -1; min-height: 18px; }

.picker-display { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #d5e1f4; background: #fff; color: #17315f; text-align: right; }
.picker-label { color: var(--muted); font-size: 11px; }
.jalali-calendar { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.calendar-head { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 8px; margin-bottom: 10px; text-align: center; }
.calendar-nav { display: grid; width: 38px; height: 38px; min-height: 38px; place-items: center; padding: 0; background: var(--primary-soft); color: var(--primary); }
.calendar-nav svg { width: 18px; height: 18px; }
.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; text-align: center; }
.calendar-weekdays { margin-bottom: 6px; color: var(--muted); font-size: 10px; }
.calendar-day { min-width: 0; min-height: 36px; padding: 4px 0; border-radius: 10px; background: #f5f8fd; color: #29457a; font-size: 11px; }
.calendar-day.today { box-shadow: inset 0 0 0 1px var(--primary); }
.calendar-day.active { background: var(--primary); color: #fff; }

.check { display: flex; align-items: center; gap: 9px; padding-top: 24px; }
.check input, .remember-row input, .workday-grid input { width: 18px; min-width: 18px; height: 18px; min-height: 18px; margin: 0; accent-color: var(--primary); }
.workday-field { display: grid; gap: 8px; }
.field-label { color: #40577f; font-size: 12px; font-weight: 800; }
.workday-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.workday-grid label { display: flex; min-width: 0; align-items: center; gap: 7px; padding: 9px; border: 1px solid var(--line); border-radius: 12px; background: #f8fbff; font-size: 11px; }
.actions { display: flex; align-items: center; gap: 9px; margin-top: 16px; flex-wrap: wrap; }
.form-actions { justify-content: flex-end; }
.single-action > button { min-width: 160px; }
.password-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 12px; margin-top: 16px; }
.password-form > button { min-height: 48px; }
.password-status { grid-column: 1 / -1; min-height: 24px; margin: 0; font-size: 11px; font-weight: 700; }
.password-status.success { color: var(--success); }
.password-status.error { color: var(--danger); }

.list { margin-top: 14px; border-top: 1px solid var(--line); }
.list-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.list-item > div:first-child { min-width: 0; }
.list-item small { display: block; margin-top: 1px; color: var(--muted); }
.list-item-actions { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.pill { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border-radius: 999px; background: #eef2f7; color: #51617d; font-size: 9px; font-weight: 800; white-space: nowrap; }
.pill.ok { background: var(--success-soft); color: var(--success); }
.pill.warn { background: var(--warning-soft); color: var(--warning); }
.pill.bad { background: var(--danger-soft); color: var(--danger); }

.table-wrap { max-width: 100%; overflow: auto; }
table { width: 100%; min-width: 700px; border-collapse: collapse; }
th, td { padding: 11px 9px; border-bottom: 1px solid var(--line); text-align: right; font-size: 11px; }
th { color: var(--muted); font-weight: 700; }
.history-list, .approval-list { display: grid; margin-top: 10px; }
.history-item, .approval-item { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-top: 1px solid var(--line); }
.history-item:first-child, .approval-item:first-child { border-top: 0; }
.event-icon { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border-radius: 13px; background: var(--success-soft); color: var(--success); font-weight: 800; }
.event-icon.out { background: var(--danger-soft); color: var(--danger); }
.history-body { min-width: 0; flex: 1; }
.history-title, .approval-title { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.history-meta { display: flex; gap: 9px; margin-top: 3px; color: var(--muted); font-size: 10px; flex-wrap: wrap; }
.history-body p, .approval-item p { margin: 5px 0 0; color: #51617d; font-size: 11px; }
.approval-item { justify-content: space-between; }
.approval-actions { display: flex; flex: 0 0 auto; gap: 7px; }
.empty { padding: 22px 8px; color: var(--muted); text-align: center; font-size: 12px; }

.week-bars { display: grid; height: 150px; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; gap: 8px; margin-top: 13px; }
.bar-col { display: grid; height: 100%; grid-template-rows: 18px 1fr 22px; gap: 4px; text-align: center; }
.bar-value, .bar-col small { color: var(--muted); font-size: 9px; }
.bar-track { position: relative; height: 100%; overflow: hidden; border-radius: 8px; background: #edf3fb; }
.bar-track i { position: absolute; right: 0; bottom: 0; left: 0; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #4a96ff, var(--primary)); }

.barcode-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.barcode-card-head > div { min-width: 0; }
.barcode-card-head p { max-width: 670px; margin: 3px 0 0; }
.barcode-card-head > button { flex: 0 0 auto; }
.admin-barcode-box { margin-top: 16px; padding: 16px; border: 1px dashed #bfd5f5; border-radius: 18px; background: #f8fbff; text-align: center; }
.admin-barcode-box img { display: block; width: min(100%, 340px); height: auto; margin: auto; border-radius: 10px; }
.barcode-download-actions { display: flex; justify-content: center; gap: 9px; margin-top: 14px; flex-wrap: wrap; }
.barcode-download-actions button { min-width: 160px; }
.barcode-scanner { position: relative; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 18px; background: #06132b; }
.barcode-scanner video { display: block; width: 100%; height: 100%; object-fit: cover; }
.barcode-scan-frame { position: absolute; top: 50%; left: 50%; width: min(74%, 280px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 3px solid rgba(255,255,255,.92); border-radius: 20px; box-shadow: 0 0 0 999px rgba(0,0,0,.24); }
.barcode-result { min-height: 44px; margin-top: 12px; color: var(--muted); text-align: center; font-size: 12px; }

.att-mobile-list { display: grid; gap: 10px; margin-top: 12px; }
.att-mobile-card { padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: #f9fbff; }
.att-mobile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.att-mobile-head small { display: block; color: var(--muted); }
.att-mobile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.att-mobile-grid div { min-width: 0; padding: 8px; border-radius: 11px; background: #fff; }
.att-mobile-grid span, .att-mobile-grid strong { display: block; }
.att-mobile-grid span { color: var(--muted); font-size: 9px; }
.att-mobile-grid strong { margin-top: 2px; font-size: 10px; overflow-wrap: anywhere; }

.notification-drawer { position: fixed; z-index: 90; inset: 0; padding: 76px 16px 16px; background: rgba(9, 26, 57, .32); backdrop-filter: blur(6px); }
.notification-drawer-card { width: min(100%, 480px); max-height: min(720px, calc(100dvh - 92px)); margin-right: auto; overflow: auto; padding: 18px; border: 1px solid rgba(255,255,255,.8); border-radius: 22px; background: #fff; box-shadow: 0 24px 70px rgba(5, 25, 65, .22); }
.notification-drawer-head, .notification-title-row, .notification-actions, .notification-item, .notification-item-head { display: flex; align-items: center; gap: 10px; }
.notification-drawer-head { align-items: flex-start; justify-content: space-between; }
.notification-drawer-head h2 { margin: 0; font-size: 19px; }
.notification-drawer-head p { margin: 2px 0 0; }
.notification-actions { margin: 14px 0; flex-wrap: wrap; }
.notification-list { display: grid; }
.notification-item { align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
.notification-item.unread { border-radius: 14px; background: #f7faff; }
.notification-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 12px; background: var(--primary-soft); color: var(--primary); }
.notification-symbol svg { width: 20px; height: 20px; }
.notification-symbol.success { color: var(--success); }
.notification-symbol.danger { color: var(--danger); }
.notification-symbol.warn { color: var(--warning); }
.notification-body { min-width: 0; flex: 1; }
.notification-item-head { justify-content: space-between; align-items: flex-start; }
.notification-item-head time { color: var(--muted); font-size: 9px; white-space: nowrap; }
.notification-body p { margin: 3px 0 0; color: #526581; font-size: 11px; }
body.drawer-open { overflow: hidden; }

.install-banner { position: fixed; z-index: 100; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); left: 16px; display: flex; width: min(calc(100% - 32px), 680px); margin: auto; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 14px; border: 1px solid #cfe0fb; border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 20px 55px rgba(8, 36, 93, .2); }
.install-brand { min-width: 0; }
.install-brand strong, .install-brand span { display: block; }
.install-brand strong { color: #17315f; }
.install-brand span { color: var(--muted); font-size: 11px; }
.install-actions { display: flex; flex: 0 0 auto; gap: 7px; }
.install-modal { position: fixed; z-index: 110; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(8, 27, 61, .44); backdrop-filter: blur(7px); }
.install-modal-card { position: relative; width: min(100%, 420px); padding: 26px 22px 22px; border-radius: 24px; background: #fff; box-shadow: 0 26px 80px rgba(8, 36, 93, .27); text-align: center; }
.install-modal-card h2 { margin: 0; color: #17315f; font-size: 20px; }
.install-modal-card p { margin: 10px 0 18px; color: var(--muted); font-size: 12px; }
.install-modal-close { position: absolute; top: 10px; left: 10px; display: grid; width: 36px; height: 36px; min-height: 36px; place-items: center; padding: 0; background: #f2f6fc; color: #526581; font-size: 22px; }

.center { display: grid; min-height: 100dvh; place-items: center; padding: 22px 16px; }
.login-page::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 12%, rgba(6,103,255,.15), transparent 30rem); }
.auth { width: min(100%, 440px); padding: 28px; }
.auth-brand { text-align: center; }
.auth-brand-logo-wrap { display: grid; justify-items: center; gap: 8px; margin-bottom: 6px; }
.auth-brand-logo { display: block; width: min(100%, 320px); height: auto; }
.auth-brand-caption { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.auth form { display: grid; gap: 15px; margin-top: 22px; }
.remember-row { display: flex; align-items: center; gap: 9px; }
.login-submit { min-height: 52px; margin-top: 2px; font-size: 15px; }
.login-note { margin: 14px 0 0; text-align: center; font-size: 10px; }
.auth-switch { margin: 15px 0 0; padding-top: 14px; border-top: 1px solid var(--line); text-align: center; font-size: 12px; }
.auth-switch a { color: var(--primary); font-weight: 800; text-decoration: none; }
.alert { margin-top: 15px; padding: 11px 12px; border-radius: 13px; font-size: 12px; }
.alert.danger { background: var(--danger-soft); color: var(--danger); }
.alert.success { background: var(--success-soft); color: var(--success); }
.form-help { margin: -4px 0 0; color: var(--muted); font-size: 10px; }
.mobile-bottom-nav { display: none; }

@media (max-width: 820px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employee-main-grid, .admin-grid { grid-template-columns: 1fr; }
  .full { grid-column: auto; }
  .dashboard-head { align-items: flex-start; }
  .grid2, .manual-form { grid-template-columns: 1fr; }
  .full-field, .mobile-span-2, .manual-panel.date-panel, .manual-panel.note-panel { grid-column: 1 / -1; }
  .check { padding-top: 4px; }
  .report-metric-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .report-filter-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 759px) {
  body { font-size: 13px; line-height: 1.7; }
  .desktop-only { display: none !important; }
  .mobile-only { display: block; }
  .top { min-height: 64px; gap: 8px; padding: 7px 10px; }
  .top-brand-logo { height: 34px; }
  .top-company-title { font-size: 13px; }
  .top-company-subtitle { font-size: 9px; }
  .top-actions { gap: 5px; }
  .top-actions .ghost, .top-install { min-height: 38px; padding: 6px 9px; font-size: 10px; }
  .icon-btn { width: 38px; min-width: 38px; height: 38px; min-height: 38px; }
  .employee-page, .admin-page { width: 100%; margin: 10px auto 24px; padding: 0 11px calc(94px + env(safe-area-inset-bottom)); gap: 11px; }
  .dashboard-head { gap: 10px; }
  .dashboard-head h1 { font-size: 22px; }
  .dashboard-head p { font-size: 10px; }
  .dashboard-head > button { min-height: 40px; padding: 7px 10px; font-size: 10px; }
  .dashboard-date { display: none; }
  .metric-grid { gap: 8px; }
  .metric { min-height: 91px; padding: 12px; border-radius: 16px; }
  .metric span { min-height: 33px; font-size: 9px; line-height: 1.65; }
  .metric strong { margin-top: 2px; font-size: 20px; }
  .smart-card { margin-top: 9px; padding: 14px; border-radius: 18px; }
  .smart-card-head { align-items: flex-start; }
  .smart-card h2 { font-size: 14px; }
  .smart-card p { font-size: 9px; }
  .smart-meta { align-items: flex-start; flex-direction: column; }
  .smart-status { text-align: right; }
  .employee-main-grid, .admin-grid { gap: 11px; }
  .admin-grid > .card, .admin-grid > .mobile-section > .card, .employee-page > .card, .employee-page > .mobile-section > .card, .manual-card, .clock-card { padding: 15px; border-radius: 19px; }
  .module-shell [data-module-panel] > .card { padding: 15px; border-radius: 19px; }
  .bigtime { font-size: 40px; }
  .state { margin: 11px 0; }
  .clock-btn { width: 156px; height: 156px; font-size: 20px; }
  .section-title { align-items: flex-start; }
  .section-title h2, .card h2 { font-size: 15px; }
  .grid2, .manual-form { gap: 10px; margin-top: 13px; }
  .manual-panel { border-radius: 15px; }
  .panel-head { padding: 11px 12px 8px; }
  .panel-body { padding: 11px 12px 12px; }
  input, select, textarea { min-height: 46px; }
  .workday-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .check.full-field { align-items: flex-start; padding-top: 18px; overflow-wrap: anywhere; }
  .check.full-field input { flex: 0 0 18px; margin-top: 3px; }
  .module-tabs { position: sticky; z-index: 15; top: 70px; margin-bottom: 10px; border-radius: 15px; background: rgba(244,248,255,.96); backdrop-filter: blur(12px); }
  .module-tab { min-height: 38px; padding: 6px 12px; font-size: 10px; }
  .barcode-card-head { flex-direction: column; gap: 10px; }
  .barcode-card-head > button { width: 100%; }
  .admin-barcode-box { margin-top: 12px; padding: 12px; border-radius: 16px; }
  .barcode-download-actions { display: grid; width: 100%; grid-template-columns: 1fr; }
  .barcode-download-actions button { width: 100%; min-width: 0; }
  .report-metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .report-filter-grid { grid-template-columns: 1fr; gap: 9px; }
  .report-filter-card, .report-results-card, .report-chart-card { padding: 15px; border-radius: 19px; }
  .form-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .single-action { grid-template-columns: 1fr; }
  .form-actions button, .single-action > button { width: 100%; min-width: 0; }
  .password-form { grid-template-columns: 1fr; gap: 10px; margin-top: 13px; }
  .password-form > button { width: 100%; }
  .list-item { align-items: flex-start; flex-direction: column; }
  .list-item-actions { width: 100%; justify-content: space-between; }
  .approval-item { align-items: flex-start; flex-direction: column; }
  .approval-actions { width: 100%; }
  .approval-actions button { flex: 1; }
  .mobile-tabs-ready .mobile-section { display: none; }
  .mobile-tabs-ready .mobile-section.mobile-section-active { display: block; }
  .mobile-bottom-nav { position: fixed; z-index: 70; right: 9px; bottom: max(9px, env(safe-area-inset-bottom)); left: 9px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 5px; padding: 7px; border: 1px solid rgba(205, 222, 247, .95); border-radius: 23px; background: rgba(255, 255, 255, .94); box-shadow: 0 18px 50px rgba(8, 36, 93, .19); backdrop-filter: blur(15px); }
  .mobile-nav-item { display: grid; min-width: 0; height: 58px; min-height: 58px; place-items: center; align-content: center; gap: 3px; padding: 5px 2px; border-radius: 17px; background: transparent; color: #64789c; font-size: 9px; line-height: 1.2; }
  .mobile-nav-item svg { width: 21px; height: 21px; }
  .mobile-nav-item.active { background: var(--primary-soft); color: var(--primary); }
  .scan-card { padding: 12px !important; }
  .barcode-scanner { max-height: calc(100dvh - 220px); min-height: 360px; }
  .notification-drawer { padding: 72px 10px 10px; }
  .notification-drawer-card { max-height: calc(100dvh - 82px); padding: 15px; border-radius: 20px; }
  .install-banner { bottom: calc(88px + env(safe-area-inset-bottom)); align-items: flex-start; }
  .install-brand span { font-size: 9px; }
}

@media (max-width: 430px) {
  .top-brand-logo { height: 30px; }
  .top-company-title { font-size: 12px; }
  .top-install { display: none; }
  .auth { padding: 22px 18px; border-radius: 20px; }
  .auth-brand-logo { width: min(100%, 280px); }
  .auth-brand-caption { font-size: 11px; }
  .clock-btn { width: 146px; height: 146px; }
  .bigtime { font-size: 37px; }
  .att-mobile-grid { grid-template-columns: 1fr 1fr; }
  .install-banner { flex-direction: column; }
  .install-actions { width: 100%; }
  .install-actions button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* v31: full-width review tabs, appearance switch, account recovery */
.review-tabs { width: 100%; }
.review-tabs .module-tab { flex: 1 1 0; min-width: 0; text-align: center; }
.theme-toggle { border-radius: 13px; }
.theme-icon, .theme-icon svg { width: 20px; height: 20px; }
.theme-icon-sun { display: none; }
.theme-icon-moon { display: block; }
html[data-theme="dark"] .theme-icon-sun { display: block; }
html[data-theme="dark"] .theme-icon-moon { display: none; }
.auth-toolbar { display: flex; justify-content: flex-end; min-height: 40px; margin: -8px -7px 8px 0; }
.forgot-link { margin: 12px 0 0; text-align: center; font-size: 12px; }
.forgot-link a { color: var(--primary); font-weight: 800; text-decoration: none; }
.forgot-tabs { width: 100%; margin-top: 18px; }
.forgot-tabs .module-tab { flex: 1 1 0; }
.account-section + .account-section { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.recovery-key-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.recovery-key { direction: ltr; display: inline-flex; min-height: 44px; align-items: center; padding: 8px 12px; border: 1px dashed #bdd2f1; border-radius: 12px; background: #f7faff; color: #17315f; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 15px; font-weight: 800; letter-spacing: .08em; }
.recovery-regenerate-form { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: end; gap: 10px; margin-top: 12px; }
.recovery-regenerate-form .password-status { grid-column: 1 / -1; }
.reset-request-list { margin-top: 12px; }
.app-modal { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(8, 27, 61, .48); backdrop-filter: blur(8px); }
.app-modal-card { width: min(100%, 460px); padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 28px 90px rgba(5, 25, 65, .26); }
.app-modal-card h2 { margin: 0; color: #17315f; font-size: 18px; }
.app-modal-card p { margin: 3px 0 0; }
.modal-form { display: grid; gap: 12px; margin-top: 17px; }

/* Dark theme */
html[data-theme="dark"] {
  --bg: #0b1220;
  --card: #121c2e;
  --text: #e8eefb;
  --muted: #98a9c6;
  --line: #273750;
  --primary: #4a96ff;
  --primary-dark: #2c7fe9;
  --primary-soft: #152a4d;
  --success: #58c995;
  --success-soft: #15382c;
  --warning: #e1b85e;
  --warning-soft: #3a2d14;
  --danger: #ff8278;
  --danger-soft: #40201f;
  --shadow: 0 16px 42px rgba(0,0,0,.24);
}
html[data-theme="dark"] body { background: radial-gradient(circle at 10% 0%, rgba(74,150,255,.12), transparent 32rem), var(--bg); color: var(--text); }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { border-color: #32445f; background: #0e1828; color: var(--text); color-scheme: dark; }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #7184a4; }
html[data-theme="dark"] label { color: #b5c2d8; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .clock-card { border-color: var(--line); background: rgba(18,28,46,.96); }
html[data-theme="dark"] .top { border-color: #24344d; background: rgba(12,20,34,.92); }
html[data-theme="dark"] .top-company-title { color: #eef4ff; }
html[data-theme="dark"] .top-company-subtitle { color: #9eb0cf; }
html[data-theme="dark"] .top-brand-logo-light { display: none; }
html[data-theme="dark"] .top-brand-logo-dark { display: block; }
html[data-theme="dark"] .dashboard-head h1,
html[data-theme="dark"] .metric strong,
html[data-theme="dark"] .section-title h2,
html[data-theme="dark"] .card h2,
html[data-theme="dark"] .smart-card h2,
html[data-theme="dark"] .auth-brand h1,
html[data-theme="dark"] .app-modal-card h2 { color: #eef4ff; }
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .ghost { border-color: #32445f; background: #121f33; color: #c5d2e7; }
html[data-theme="dark"] .secondary { border-color: #31507b; background: #152a4d; color: #9fc5ff; }
html[data-theme="dark"] .secondary:hover { background: #1a355f; }
html[data-theme="dark"] .metric { border-color: var(--line); background: #121c2e; }
html[data-theme="dark"] .metric.attention { background: #292314; }
html[data-theme="dark"] .dashboard-date { border-color: var(--line); background: #121c2e; color: #b4c1d7; }
html[data-theme="dark"] .module-tabs { border-color: #2d405d; background: rgba(15,25,42,.88); }
html[data-theme="dark"] .module-tab { color: #93a7c7; }
html[data-theme="dark"] .module-tab.active { border-color: #3b5f91; background: #182844; color: #74afff; box-shadow: 0 7px 17px rgba(0,0,0,.16); }
html[data-theme="dark"] .manual-panel,
html[data-theme="dark"] .admin-barcode-box,
html[data-theme="dark"] .result-box,
html[data-theme="dark"] .recovery-key { border-color: #31435f; background: #0f192a; color: #dce7f8; }
html[data-theme="dark"] .picker-display,
html[data-theme="dark"] .calendar-nav { border-color: #32445f; background: #121f33; color: #c5d2e7; }
html[data-theme="dark"] .calendar-day { color: #c8d5e9; }
html[data-theme="dark"] .calendar-day.muted { color: #5f7190; }
html[data-theme="dark"] .pill { background: #202d42; color: #b4c1d6; }
html[data-theme="dark"] .history-body p,
html[data-theme="dark"] .approval-item p { color: #a8b6cd; }
html[data-theme="dark"] .notification-drawer { background: rgba(3,8,16,.62); }
html[data-theme="dark"] .notification-drawer-card { border-color: #2b3c55; background: #111b2c; box-shadow: 0 24px 70px rgba(0,0,0,.42); }
html[data-theme="dark"] .notification-item { border-color: var(--line); }
html[data-theme="dark"] .install-banner,
html[data-theme="dark"] .install-modal-card { border-color: #2b3c55; background: #111b2c; }
html[data-theme="dark"] .install-brand strong,
html[data-theme="dark"] .install-modal-card h2 { color: #eef4ff; }
html[data-theme="dark"] .install-modal-close { background: #18263b; color: #c4d2e7; }
html[data-theme="dark"] .login-page::before { background: radial-gradient(circle at 50% 12%, rgba(74,150,255,.16), transparent 30rem); }
html[data-theme="dark"] .mobile-bottom-nav { border-color: rgba(43,60,85,.96); background: rgba(14,23,38,.95); box-shadow: 0 18px 50px rgba(0,0,0,.34); }
html[data-theme="dark"] .mobile-nav-item { color: #8fa3c3; }
html[data-theme="dark"] .mobile-nav-item.active { background: #172d50; color: #77b0ff; }
html[data-theme="dark"] .notif-mini-badge { border-color: #111b2c; }
html[data-theme="dark"] .smart-toggle-track { background: #42516a; }
html[data-theme="dark"] .smart-meta { color: #a3b3cc; }
html[data-theme="dark"] .bigtime { color: #eaf2ff; }
html[data-theme="dark"] .state { color: #bad0f3; }
html[data-theme="dark"] .auth-switch { border-color: var(--line); }
html[data-theme="dark"] .app-modal { background: rgba(1,5,12,.7); }
html[data-theme="dark"] .app-modal-card { border-color: #2b3c55; background: #111b2c; box-shadow: 0 28px 90px rgba(0,0,0,.46); }

@media (max-width: 759px) {
  .review-tabs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); overflow: visible; }
  .review-tabs .module-tab { width: 100%; padding-inline: 6px; }
  .recovery-regenerate-form { grid-template-columns: 1fr; }
  .recovery-regenerate-form > button { width: 100%; }
  .recovery-key-row { display: grid; grid-template-columns: 1fr; }
  .recovery-key-row > * { width: 100%; }
  .recovery-key { justify-content: center; overflow-wrap: anywhere; }
  .app-modal-card { padding: 17px; border-radius: 19px; }
  html[data-theme="dark"] .module-tabs { background: rgba(15,25,42,.96); }
}
html[data-theme="dark"] .jalali-calendar,
html[data-theme="dark"] .workday-grid label,
html[data-theme="dark"] .att-mobile-card,
html[data-theme="dark"] .att-mobile-grid div,
html[data-theme="dark"] .notification-item.unread { border-color: var(--line); background: #0f192a; }
html[data-theme="dark"] .calendar-day { background: #17243a; color: #c8d5e9; }
html[data-theme="dark"] .calendar-day.active { background: var(--primary); color: #fff; }
html[data-theme="dark"] .panel-head h3,
html[data-theme="dark"] .field-label { color: #bfd0e9; }
html[data-theme="dark"] .bar-track { background: #1b293d; }
html[data-theme="dark"] .notification-body p { color: #adbad0; }

@media (max-width: 759px) {
  .forgot-tabs { position: static !important; }
  .list-item-actions { flex-wrap: wrap; }
  .list-item-actions button { flex: 1 1 105px; min-width: 0; }
}

/* v32: iOS-inspired glass interface */
:root {
  --bg: #eaf0fb;
  --card: rgba(255, 255, 255, .68);
  --text: #15213b;
  --muted: #64728c;
  --line: rgba(88, 112, 154, .16);
  --primary: #3478f6;
  --primary-dark: #1f5fd0;
  --primary-soft: rgba(52, 120, 246, .13);
  --success: #1c8b62;
  --success-soft: rgba(45, 179, 124, .14);
  --warning: #9b6810;
  --warning-soft: rgba(231, 171, 54, .16);
  --danger: #c83f47;
  --danger-soft: rgba(232, 74, 84, .14);
  --glass-top: rgba(255, 255, 255, .82);
  --glass-bottom: rgba(237, 244, 255, .58);
  --glass-border: rgba(255, 255, 255, .82);
  --glass-highlight: rgba(255, 255, 255, .95);
  --shadow: 0 22px 55px rgba(47, 68, 108, .14), inset 0 1px 0 var(--glass-highlight);
  --radius: 25px;
}

html { background: var(--bg); }
body {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 7% -5%, rgba(103, 103, 255, .28), transparent 29rem),
    radial-gradient(circle at 96% 14%, rgba(61, 157, 255, .20), transparent 26rem),
    radial-gradient(circle at 45% 110%, rgba(126, 83, 255, .13), transparent 34rem),
    var(--bg);
  background-attachment: fixed;
}

.card, .clock-card, .metric, .manual-panel, .att-mobile-card,
.notification-drawer-card, .install-banner, .install-modal-card, .app-modal-card {
  border-color: var(--glass-border);
  background: linear-gradient(145deg, var(--glass-top), var(--glass-bottom));
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
}

.top {
  border-color: rgba(255, 255, 255, .55);
  background: rgba(244, 248, 255, .63);
  box-shadow: 0 10px 35px rgba(38, 58, 96, .10), inset 0 -1px 0 rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(28px) saturate(165%);
  backdrop-filter: blur(28px) saturate(165%);
}

input, select, textarea {
  border-color: rgba(91, 111, 151, .20);
  border-radius: 16px;
  background: rgba(255,255,255,.64);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 7px 18px rgba(48,68,105,.05);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(52,120,246,.72);
  box-shadow: 0 0 0 4px rgba(52,120,246,.14), inset 0 1px 0 rgba(255,255,255,.8);
}

button { border-radius: 16px; }
.primary {
  background: #0667FF;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px rgba(6,103,255,.28);
}
.primary:hover { background: #0058dc; }
.secondary, .ghost, .icon-btn {
  border-color: rgba(6,103,255,.18);
  background: rgba(6,103,255,.08);
  color: #0667FF;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 7px 18px rgba(42,61,97,.07);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}
.secondary:hover, .ghost:hover { background: rgba(255,255,255,.72); }
.icon-btn { border-radius: 15px; }

.module-tabs {
  border-color: rgba(255,255,255,.60);
  border-radius: 19px;
  background: rgba(237,243,253,.57);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 10px 26px rgba(41,61,100,.08);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}
.module-tab { border-radius: 14px; }
.module-tab.active {
  border-color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.76);
  color: var(--primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 20px rgba(48,72,116,.12);
}

.metric { border-radius: 21px; }
.metric.attention { background: linear-gradient(145deg, rgba(255,251,238,.83), rgba(255,244,215,.58)); }
.dashboard-date, .result-box, .picker-display, .jalali-calendar,
.workday-grid label, .att-mobile-grid div, .admin-barcode-box, .recovery-key {
  border-color: rgba(101,123,164,.18);
  background: rgba(255,255,255,.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.70);
}
.smart-toggle-track { background: rgba(104,119,149,.34); }
.smart-toggle input:checked + .smart-toggle-track { background: linear-gradient(90deg, #34c759, #29a94d); }
.clock-btn {
  border: 1px solid rgba(255,255,255,.30);
  background: radial-gradient(circle at 30% 20%, #71c1ff, #3478f6 48%, #635be6 100%);
  box-shadow: inset 0 2px 1px rgba(255,255,255,.42), inset 0 -14px 28px rgba(25,45,125,.22), 0 20px 44px rgba(52,120,246,.30);
}
.clock-btn.out { background: radial-gradient(circle at 30% 20%, #ff9b91, #e95758 50%, #af334d 100%); }
.barcode-scanner { border: 1px solid rgba(137,160,220,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 18px 42px rgba(6,15,39,.22); }
.barcode-scan-frame { border-color: rgba(210,225,255,.94); box-shadow: 0 0 0 999px rgba(2,7,20,.35), 0 0 28px rgba(96,137,255,.65); }
.bar-track { background: rgba(104,128,173,.15); }
.bar-track i { background: linear-gradient(180deg, #70c4ff, #3478f6 55%, #665eea); }

.mobile-bottom-nav {
  border-color: rgba(255,255,255,.72);
  background: rgba(243,247,255,.68);
  box-shadow: 0 20px 55px rgba(21,39,78,.18), inset 0 1px 0 rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(28px) saturate(165%);
  backdrop-filter: blur(28px) saturate(165%);
}
.mobile-nav-item { border-radius: 18px; }
.mobile-nav-item.active {
  background: linear-gradient(145deg, rgba(75,146,255,.20), rgba(104,91,236,.15));
  color: #3478f6;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.52);
}
.notification-drawer, .install-modal, .app-modal { background: rgba(12,20,40,.34); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.notification-item.unread { background: rgba(255,255,255,.34); }
.auth { border-radius: 30px; }
.login-page::before { background: radial-gradient(circle at 50% 8%, rgba(88,101,255,.30), transparent 28rem); }

html[data-theme="dark"] {
  --bg: #060a17;
  --card: rgba(19, 30, 59, .64);
  --text: #f4f7ff;
  --muted: #99a9c8;
  --line: rgba(151, 174, 226, .16);
  --primary: #6f96ff;
  --primary-dark: #4d73dc;
  --primary-soft: rgba(82, 126, 255, .18);
  --success: #62d99e;
  --success-soft: rgba(54, 197, 132, .16);
  --warning: #f0c46e;
  --warning-soft: rgba(217, 159, 49, .17);
  --danger: #ff8e91;
  --danger-soft: rgba(232, 83, 91, .17);
  --glass-top: rgba(32, 48, 88, .70);
  --glass-bottom: rgba(10, 20, 43, .60);
  --glass-border: rgba(145, 168, 224, .22);
  --glass-highlight: rgba(174, 190, 255, .28);
  --shadow: 0 24px 60px rgba(0,0,0,.35), inset 0 1px 0 var(--glass-highlight);
}
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 12% -7%, rgba(100, 86, 255, .42), transparent 28rem),
    radial-gradient(circle at 98% 13%, rgba(33, 129, 255, .27), transparent 28rem),
    radial-gradient(circle at 48% 112%, rgba(53, 68, 162, .22), transparent 36rem),
    linear-gradient(160deg, #050814 0%, #081020 48%, #050914 100%);
  background-attachment: fixed;
  color: var(--text);
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .clock-card,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .manual-panel,
html[data-theme="dark"] .att-mobile-card,
html[data-theme="dark"] .notification-drawer-card,
html[data-theme="dark"] .install-banner,
html[data-theme="dark"] .install-modal-card,
html[data-theme="dark"] .app-modal-card {
  border-color: var(--glass-border);
  background: linear-gradient(145deg, var(--glass-top), var(--glass-bottom));
  box-shadow: var(--shadow);
}
html[data-theme="dark"] .top {
  border-color: rgba(139,161,216,.18);
  background: rgba(9,18,39,.62);
  box-shadow: 0 12px 38px rgba(0,0,0,.26), inset 0 -1px 0 rgba(153,174,229,.12);
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  border-color: rgba(147,169,220,.20);
  background: rgba(4,11,27,.48);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(185,199,255,.08), 0 8px 22px rgba(0,0,0,.12);
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  border-color: rgba(111,150,255,.72);
  box-shadow: 0 0 0 4px rgba(84,126,255,.16), 0 0 26px rgba(75,99,255,.14), inset 0 1px 0 rgba(205,215,255,.12);
}
html[data-theme="dark"] .primary {
  background: #0667FF;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 24px rgba(6,103,255,.30);
}
html[data-theme="dark"] .primary:hover { background: #0058dc; }
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .ghost,
html[data-theme="dark"] .secondary {
  border-color: rgba(91,151,255,.28);
  background: rgba(6,103,255,.18);
  color: #d9e8ff;
  box-shadow: inset 0 1px 0 rgba(188,201,255,.10), 0 9px 24px rgba(0,0,0,.16);
}
html[data-theme="dark"] .secondary { color: #d9e8ff; }
html[data-theme="dark"] .secondary:hover,
html[data-theme="dark"] .ghost:hover { background: rgba(6,103,255,.26); }
html[data-theme="dark"] .module-tabs {
  border-color: rgba(143,165,217,.19);
  background: linear-gradient(145deg, rgba(35,50,88,.55), rgba(10,20,43,.52));
  box-shadow: inset 0 1px 0 rgba(184,197,255,.18), 0 12px 32px rgba(0,0,0,.20);
}
html[data-theme="dark"] .module-tab { color: #9aabc9; }
html[data-theme="dark"] .module-tab.active {
  border-color: rgba(144,165,232,.28);
  background: linear-gradient(145deg, rgba(83,113,190,.42), rgba(43,58,111,.38));
  color: #eaf0ff;
  box-shadow: inset 0 1px 0 rgba(201,211,255,.20), 0 8px 22px rgba(0,0,0,.18), 0 0 22px rgba(85,91,255,.10);
}
html[data-theme="dark"] .metric.attention { background: linear-gradient(145deg, rgba(94,70,28,.55), rgba(41,31,17,.52)); }
html[data-theme="dark"] .dashboard-date,
html[data-theme="dark"] .result-box,
html[data-theme="dark"] .picker-display,
html[data-theme="dark"] .jalali-calendar,
html[data-theme="dark"] .workday-grid label,
html[data-theme="dark"] .att-mobile-grid div,
html[data-theme="dark"] .admin-barcode-box,
html[data-theme="dark"] .recovery-key,
html[data-theme="dark"] .notification-item.unread {
  border-color: rgba(145,168,222,.17);
  background: rgba(6,15,34,.40);
  color: #dce6fb;
  box-shadow: inset 0 1px 0 rgba(188,201,255,.08);
}
html[data-theme="dark"] .mobile-bottom-nav {
  border-color: rgba(151,174,226,.24);
  background: linear-gradient(145deg, rgba(31,45,81,.74), rgba(8,17,37,.72));
  box-shadow: 0 22px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(184,198,255,.24), 0 0 30px rgba(84,78,255,.10);
}
html[data-theme="dark"] .mobile-nav-item { color: #91a3c3; }
html[data-theme="dark"] .mobile-nav-item.active {
  background: linear-gradient(145deg, rgba(84,126,255,.32), rgba(103,81,238,.24));
  color: #d8e4ff;
  box-shadow: inset 0 1px 0 rgba(198,207,255,.17), 0 8px 20px rgba(0,0,0,.15);
}
html[data-theme="dark"] .login-page::before { background: radial-gradient(circle at 50% 7%, rgba(102,84,255,.38), transparent 27rem); }
html[data-theme="dark"] .notification-drawer,
html[data-theme="dark"] .install-modal,
html[data-theme="dark"] .app-modal { background: rgba(1,5,15,.55); }

@media (max-width: 759px) {
  .top { border-radius: 0 0 22px 22px; }
  .module-tabs { border-radius: 19px; }
  .mobile-bottom-nav { border-radius: 28px; }
  .card, .clock-card { border-radius: 23px; }
}

/* v33: Jalali report filters + clearer spacing between report cards */
.report-results-card { margin-top: 16px; }
.report-date-button {
  min-height: 48px;
  justify-content: flex-start;
  padding: 10px 13px;
  border-radius: 14px;
  font-weight: 700;
}
.report-date-button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-jalali-calendar { width: 100%; margin-top: 14px; }

@media (max-width: 759px) {
  .report-results-card { margin-top: 14px; }
  .report-date-button { min-height: 46px; }
  .report-jalali-calendar { margin-top: 11px; padding: 11px; border-radius: 16px; }
}


/* v39: desktop-only cleanup for tab layout (mobile intentionally untouched) */
@media (min-width: 760px) {
  .module-shell { display: grid; gap: 14px; }
  .module-tabs {
    position: static;
    top: auto;
    overflow: visible;
    gap: 10px;
    padding: 8px;
    border: 1px solid #d9e4f5;
    border-radius: 18px;
    background: #f7faff;
    box-shadow: 0 10px 24px rgba(18, 49, 104, .07);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .module-tabs[data-module-tabs="admin-manage"] { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .module-tabs[data-module-tabs="admin-reports"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module-tabs.review-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .forgot-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module-tab {
    min-width: 0;
    min-height: 44px;
    justify-content: center;
    padding: 9px 14px;
    text-align: center;
    font-size: 12px;
    line-height: 1.45;
    border-radius: 13px;
    border: 1px solid transparent;
    background: transparent;
    color: #5b7093;
    box-shadow: none;
  }
  .module-tab:hover { background: rgba(6,103,255,.06); color: #35517e; }
  .module-tab.active {
    border-color: #cfe0fb;
    background: #ffffff;
    color: #0667ff;
    box-shadow: 0 8px 18px rgba(6,103,255,.10);
  }
  html[data-theme="dark"] .module-tabs {
    border-color: #2d405d;
    background: rgba(14, 23, 39, .92);
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
  }
  html[data-theme="dark"] .module-tab { color: #9db0cf; }
  html[data-theme="dark"] .module-tab:hover { background: rgba(84,126,255,.12); color: #dbe7ff; }
  html[data-theme="dark"] .module-tab.active {
    border-color: rgba(116,175,255,.32);
    background: rgba(18, 40, 68, .96);
    color: #74afff;
    box-shadow: 0 8px 20px rgba(0,0,0,.20);
  }
}


/* v44: password visibility control */
.password-input-wrap {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}
.password-input-wrap > input {
  padding-inline-end: 48px;
}
.password-eye-btn {
  position: absolute;
  z-index: 2;
  inset-inline-end: 7px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #6b7f9f;
  box-shadow: none;
}
.password-eye-btn:hover {
  background: rgba(6,103,255,.08);
  color: #0667ff;
}
.password-eye-btn:active { transform: translateY(-50%); }
.password-eye-btn svg { width: 20px; height: 20px; }
html[data-theme="dark"] .password-eye-btn { color: #9eb0cf; }
html[data-theme="dark"] .password-eye-btn:hover { background: rgba(6,103,255,.16); color: #dce8ff; }

/* v46: owner-only monitoring */
.owner-monitor-card { display: grid; gap: 14px; margin-top: 16px; padding: 18px; }
.owner-monitor-card h2, .owner-monitor-card h3 { margin: 0; }
.owner-monitor-grid { margin-top: 0; }
.owner-monitor-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 14px; background: rgba(6,103,255,.05); color: var(--muted); font-size: 11px; }
.owner-monitor-meta b { color: var(--text); }
.owner-recent-wrap { display: grid; gap: 8px; }
.owner-recent-wrap h3 { font-size: 13px; }
html[data-theme="dark"] .owner-monitor-meta { background: rgba(6,103,255,.10); }

@media (max-width: 759px) {
  .owner-monitor-card { padding: 15px; border-radius: 19px; }
  .owner-monitor-meta { gap: 7px 12px; }
}


/* v50: safe public guest preview */
.guest-preview { user-select: none; }
.guest-login-direct { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 7px 18px; text-decoration: none; border-radius: 14px; }
.guest-auth-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 18px; background: rgba(5, 13, 29, .48); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.guest-auth-modal[hidden] { display: none !important; }
.guest-auth-card { width: min(100%, 390px); padding: 24px; border: 1px solid rgba(211, 225, 246, .95); border-radius: 24px; background: rgba(255,255,255,.98); box-shadow: 0 24px 70px rgba(18,49,104,.24); text-align: center; }
.guest-auth-icon { display: grid; width: 54px; height: 54px; margin: 0 auto 12px; place-items: center; border-radius: 18px; background: rgba(6,103,255,.10); color: #0667FF; }
.guest-auth-icon svg { width: 28px; height: 28px; }
.guest-auth-card h2 { margin: 0 0 7px; color: #112653; font-size: 19px; }
.guest-auth-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.9; }
.guest-auth-actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 9px; margin-top: 20px; }
.guest-auth-actions a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 9px 14px; border-radius: 14px; text-decoration: none; }
body.guest-auth-open { overflow: hidden; }
html[data-theme="dark"] .guest-auth-card { border-color: #2d405d; background: rgba(15,25,42,.98); box-shadow: 0 24px 70px rgba(0,0,0,.44); }
html[data-theme="dark"] .guest-auth-card h2 { color: #eef4ff; }
@media (max-width: 759px) {
  .guest-auth-card { width: min(100%, 350px); padding: 20px; border-radius: 22px; }
  .guest-auth-actions { grid-template-columns: 1fr 1.2fr; }
  .guest-login-direct { min-height: 38px; padding: 6px 14px; font-size: 11px; }
}


/* v50: contextual help + first-login onboarding tour */
.has-context-help { display: inline-flex !important; align-items: center; gap: 12px; }
.context-help-btn {
  display: inline-grid; width: 22px; min-width: 22px; height: 22px; min-height: 22px; place-items: center;
  padding: 0; border: 1px solid rgba(6,103,255,.26); border-radius: 999px;
  background: rgba(6,103,255,.08); color: #0667FF; box-shadow: none; vertical-align: middle;
}
.context-help-btn:hover { background: rgba(6,103,255,.15); }
.has-context-help > .context-help-btn { margin-inline-start: 2px; flex: 0 0 auto; }
.context-help-host { position: relative; }
.context-help-floating { position: absolute; z-index: 6; top: 9px; left: 10px; right: auto; }
.context-help-btn svg { width: 14px; height: 14px; }
.guide-modal { position: fixed; inset: 0; z-index: 1400; display: grid; place-items: center; padding: 18px; background: rgba(5,13,29,.50); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.guide-modal[hidden] { display: none !important; }
.guide-modal-card { width: min(100%, 430px); padding: 21px; border: 1px solid #d9e5f6; border-radius: 22px; background: rgba(255,255,255,.99); box-shadow: 0 24px 70px rgba(18,49,104,.22); text-align: right; }
.guide-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.guide-modal-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 12px; background: rgba(6,103,255,.09); color: #0667FF; }
.guide-modal-icon svg { width: 21px; height: 21px; }
.guide-close { display: grid; width: 34px; min-width: 34px; height: 34px; min-height: 34px; place-items: center; padding: 0; border: 1px solid #dce6f5; border-radius: 11px; background: #fff; color: #567096; font-size: 20px; }
.guide-title { margin: 0 0 7px; color: #112653; font-size: 18px; }
.guide-text { margin: 0 0 18px; color: var(--muted); font-size: 12px; line-height: 2; }
body.guide-open, body.tour-open { overflow: hidden; }

.tour-layer { position: fixed; inset: 0; z-index: 1500; direction: rtl; }
.tour-dim { position: absolute; inset: 0; background: rgba(4,11,25,.64); }
.tour-spotlight { position: fixed; z-index: 1; border: 2px solid rgba(126,180,255,.98); border-radius: 18px; box-shadow: 0 0 0 9999px rgba(4,11,25,.18), 0 0 0 5px rgba(6,103,255,.13), 0 12px 40px rgba(0,0,0,.18); pointer-events: none; transition: top .22s ease,left .22s ease,width .22s ease,height .22s ease; }
.tour-card { position: fixed; z-index: 2; width: min(390px, calc(100vw - 28px)); padding: 19px; border: 1px solid rgba(209,225,247,.95); border-radius: 22px; background: rgba(255,255,255,.99); box-shadow: 0 24px 70px rgba(0,0,0,.30); text-align: right; }
.tour-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.tour-step-count { color: #6e83a6; font-size: 10px; font-weight: 700; }
.tour-skip { min-height: 30px; padding: 4px 9px; border: 0; background: transparent; color: #6c7f9e; box-shadow: none; font-size: 11px; }
.tour-title { margin: 0 0 7px; color: #112653; font-size: 18px; line-height: 1.55; }
.tour-text { margin: 0; color: #607493; font-size: 12px; line-height: 1.95; }
.tour-actions { display: grid; grid-template-columns: .8fr 1.25fr; gap: 9px; margin-top: 17px; }
.tour-actions button { min-height: 42px; }
html[data-theme="dark"] .guide-modal-card, html[data-theme="dark"] .tour-card { border-color: #2d405d; background: rgba(15,25,42,.99); }
html[data-theme="dark"] .guide-title, html[data-theme="dark"] .tour-title { color: #eef4ff; }
html[data-theme="dark"] .guide-close { border-color: #344863; background: #18273d; color: #c9d7ed; }
html[data-theme="dark"] .context-help-btn { border-color: rgba(116,175,255,.30); background: rgba(6,103,255,.16); color: #8ebdff; }
html[data-theme="dark"] .tour-text { color: #aabbd3; }
@media (max-width: 759px) {
  .context-help-btn { width: 21px; min-width: 21px; height: 21px; min-height: 21px; }
  .has-context-help { gap: 10px; }
  .context-help-floating { top: 8px; left: 9px; }
  .guide-modal-card { padding: 18px; border-radius: 20px; }
  .guide-title, .tour-title { font-size: 16px; }
  .guide-text, .tour-text { font-size: 11px; }
  .tour-card { padding: 17px; border-radius: 20px; }
}

.guide-kicker { display:block; margin-bottom:4px; color:#0667FF; font-size:10px; font-weight:800; }

/* v59: complete step-by-step, field-by-field guided tour */
.guide-action, .tour-action { margin-top: 12px; padding: 10px 12px; border: 1px solid rgba(6,103,255,.13); border-radius: 13px; background: rgba(6,103,255,.055); color: #4f668a; font-size: 11px; line-height: 1.85; }
.guide-action strong, .tour-action strong { display: block; margin-bottom: 2px; color: #264d88; font-size: 10px; }
.guide-ok { margin-top: 14px; }
.tour-top > div { display: grid; gap: 2px; }
.tour-phase { color: #0667ff; font-size: 10px; font-weight: 800; }
.tour-card { max-height: calc(100vh - 28px); overflow: auto; overscroll-behavior: contain; }
.tour-launch svg { width: 20px; height: 20px; }
html[data-theme="dark"] .guide-action, html[data-theme="dark"] .tour-action { border-color: rgba(116,175,255,.22); background: rgba(6,103,255,.10); color: #aec1dc; }
html[data-theme="dark"] .guide-action strong, html[data-theme="dark"] .tour-action strong { color: #8ebdff; }
@media (max-width: 759px) {
  .guide-action, .tour-action { padding: 9px 10px; font-size: 10px; }
  .guide-ok { margin-top: 16px; }
  .tour-phase { font-size: 9px; }
}


/* v59: clean contextual-help placement + centered mobile scanner */
.context-help-label-row {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  line-height: 1.5;
}
.context-help-label-caption { min-width: 0; }
.context-help-label-row .context-help-btn { flex: 0 0 auto; }
.context-help-panel-head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.context-help-panel-head > .context-help-btn { flex: 0 0 auto; margin: 0; }
.has-context-help { gap: 16px !important; }
.context-help-floating {
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  margin: 0 !important;
}
@media (max-width: 759px) {
  .scan-card { display: grid; justify-items: center; }
  .scan-card .barcode-scanner {
    width: min(100%, 430px);
    margin-inline: auto;
  }
  .scan-card .barcode-result {
    width: min(100%, 430px);
    margin-inline: auto;
  }
  .context-help-btn {
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
  }
  .context-help-btn svg { width: 15px; height: 15px; }
  .context-help-label-row, .context-help-panel-head { gap: 16px; }
  .context-help-floating { top: 10px !important; left: 10px !important; right: auto !important; }
}


/* v59: report placeholder, QR guide placement, smart attendance order */
.week-bars > .guest-report-empty {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: stretch;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 18px;
  text-align: center;
  line-height: 1.8;
}
.week-bars > .guest-report-empty strong {
  color: #17315f;
  font-size: 14px;
}
.week-bars > .guest-report-empty span {
  color: var(--muted);
  font-size: 11px;
}
.scan-guide-head {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10px;
}
.scan-guide-title {
  margin: 0;
  color: #17315f;
  font-size: 14px;
  line-height: 1.5;
}
.scan-guide-title.has-context-help {
  display: flex !important;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px !important;
}
.scan-guide-title.has-context-help > .context-help-btn {
  position: static !important;
  flex: 0 0 auto;
  margin: 0 !important;
}
html[data-theme="dark"] .week-bars > .guest-report-empty strong,
html[data-theme="dark"] .scan-guide-title { color: #eef4ff; }
@media (max-width: 759px) {
  .week-bars > .guest-report-empty {
    min-height: 118px;
    padding: 16px 12px;
  }
  .week-bars > .guest-report-empty strong { font-size: 13px; }
  .week-bars > .guest-report-empty span { font-size: 10px; }
  .scan-guide-head { margin-bottom: 9px; }
  .scan-guide-title { font-size: 13px; }
  .scan-card .barcode-scanner { margin-top: 0; }
  .smart-card { margin-top: 10px; }
}

/* v59: keep admin contextual-help icons beside headings, never over controls */
.workday-field > .field-label.has-context-help,
.barcode-card-head h2.has-context-help {
  display: inline-flex !important;
  width: auto !important;
  align-items: center;
  justify-content: flex-start;
  gap: 10px !important;
}
.workday-field > .field-label.has-context-help > .context-help-btn,
.barcode-card-head h2.has-context-help > .context-help-btn {
  position: static !important;
  margin: 0 !important;
  flex: 0 0 auto;
}
@media (max-width: 759px) {
  .workday-field > .field-label.has-context-help,
  .barcode-card-head h2.has-context-help { gap: 8px !important; }
}

/* v71+: desktop uses the exact mobile responsive cascade inside a centered phone-width surface. */
@media (min-width: 760px) {
  /* mirrored from max-width: 820px */

  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employee-main-grid, .admin-grid { grid-template-columns: 1fr; }
  .full { grid-column: auto; }
  .dashboard-head { align-items: flex-start; }
  .grid2, .manual-form { grid-template-columns: 1fr; }
  .full-field, .mobile-span-2, .manual-panel.date-panel, .manual-panel.note-panel { grid-column: 1 / -1; }
  .check { padding-top: 4px; }
  .report-metric-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .report-filter-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }

  /* mirrored from max-width: 759px */

  body { font-size: 13px; line-height: 1.7; }
  .desktop-only { display: none !important; }
  .mobile-only { display: block; }
  .top { min-height: 64px; gap: 8px; padding: 7px 10px; }
  .top-brand-logo { height: 34px; }
  .top-company-title { font-size: 13px; }
  .top-company-subtitle { font-size: 9px; }
  .top-actions { gap: 5px; }
  .top-actions .ghost, .top-install { min-height: 38px; padding: 6px 9px; font-size: 10px; }
  .icon-btn { width: 38px; min-width: 38px; height: 38px; min-height: 38px; }
  .employee-page, .admin-page { width: 100%; margin: 10px auto 24px; padding: 0 11px calc(94px + env(safe-area-inset-bottom)); gap: 11px; }
  .dashboard-head { gap: 10px; }
  .dashboard-head h1 { font-size: 22px; }
  .dashboard-head p { font-size: 10px; }
  .dashboard-head > button { min-height: 40px; padding: 7px 10px; font-size: 10px; }
  .dashboard-date { display: none; }
  .metric-grid { gap: 8px; }
  .metric { min-height: 91px; padding: 12px; border-radius: 16px; }
  .metric span { min-height: 33px; font-size: 9px; line-height: 1.65; }
  .metric strong { margin-top: 2px; font-size: 20px; }
  .smart-card { margin-top: 9px; padding: 14px; border-radius: 18px; }
  .smart-card-head { align-items: flex-start; }
  .smart-card h2 { font-size: 14px; }
  .smart-card p { font-size: 9px; }
  .smart-meta { align-items: flex-start; flex-direction: column; }
  .smart-status { text-align: right; }
  .employee-main-grid, .admin-grid { gap: 11px; }
  .admin-grid > .card, .admin-grid > .mobile-section > .card, .employee-page > .card, .employee-page > .mobile-section > .card, .manual-card, .clock-card { padding: 15px; border-radius: 19px; }
  .module-shell [data-module-panel] > .card { padding: 15px; border-radius: 19px; }
  .bigtime { font-size: 40px; }
  .state { margin: 11px 0; }
  .clock-btn { width: 156px; height: 156px; font-size: 20px; }
  .section-title { align-items: flex-start; }
  .section-title h2, .card h2 { font-size: 15px; }
  .grid2, .manual-form { gap: 10px; margin-top: 13px; }
  .manual-panel { border-radius: 15px; }
  .panel-head { padding: 11px 12px 8px; }
  .panel-body { padding: 11px 12px 12px; }
  input, select, textarea { min-height: 46px; }
  .workday-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .check.full-field { align-items: flex-start; padding-top: 18px; overflow-wrap: anywhere; }
  .check.full-field input { flex: 0 0 18px; margin-top: 3px; }
  .module-tabs { position: sticky; z-index: 15; top: 70px; margin-bottom: 10px; border-radius: 15px; background: rgba(244,248,255,.96); backdrop-filter: blur(12px); }
  .module-tab { min-height: 38px; padding: 6px 12px; font-size: 10px; }
  .barcode-card-head { flex-direction: column; gap: 10px; }
  .barcode-card-head > button { width: 100%; }
  .admin-barcode-box { margin-top: 12px; padding: 12px; border-radius: 16px; }
  .barcode-download-actions { display: grid; width: 100%; grid-template-columns: 1fr; }
  .barcode-download-actions button { width: 100%; min-width: 0; }
  .report-metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .report-filter-grid { grid-template-columns: 1fr; gap: 9px; }
  .report-filter-card, .report-results-card, .report-chart-card { padding: 15px; border-radius: 19px; }
  .form-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .single-action { grid-template-columns: 1fr; }
  .form-actions button, .single-action > button { width: 100%; min-width: 0; }
  .password-form { grid-template-columns: 1fr; gap: 10px; margin-top: 13px; }
  .password-form > button { width: 100%; }
  .list-item { align-items: flex-start; flex-direction: column; }
  .list-item-actions { width: 100%; justify-content: space-between; }
  .approval-item { align-items: flex-start; flex-direction: column; }
  .approval-actions { width: 100%; }
  .approval-actions button { flex: 1; }
  .mobile-tabs-ready .mobile-section { display: none; }
  .mobile-tabs-ready .mobile-section.mobile-section-active { display: block; }
  .mobile-bottom-nav { position: fixed; z-index: 70; right: 9px; bottom: max(9px, env(safe-area-inset-bottom)); left: 9px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 5px; padding: 7px; border: 1px solid rgba(205, 222, 247, .95); border-radius: 23px; background: rgba(255, 255, 255, .94); box-shadow: 0 18px 50px rgba(8, 36, 93, .19); backdrop-filter: blur(15px); }
  .mobile-nav-item { display: grid; min-width: 0; height: 58px; min-height: 58px; place-items: center; align-content: center; gap: 3px; padding: 5px 2px; border-radius: 17px; background: transparent; color: #64789c; font-size: 9px; line-height: 1.2; }
  .mobile-nav-item svg { width: 21px; height: 21px; }
  .mobile-nav-item.active { background: var(--primary-soft); color: var(--primary); }
  .scan-card { padding: 12px !important; }
  .barcode-scanner { max-height: calc(100dvh - 220px); min-height: 360px; }
  .notification-drawer { padding: 72px 10px 10px; }
  .notification-drawer-card { max-height: calc(100dvh - 82px); padding: 15px; border-radius: 20px; }
  .install-banner { bottom: calc(88px + env(safe-area-inset-bottom)); align-items: flex-start; }
  .install-brand span { font-size: 9px; }

  /* mirrored from max-width: 430px */

  .top-brand-logo { height: 30px; }
  .top-company-title { font-size: 12px; }
  .top-install { display: none; }
  .auth { padding: 22px 18px; border-radius: 20px; }
  .auth-brand-logo { width: min(100%, 280px); }
  .auth-brand-caption { font-size: 11px; }
  .clock-btn { width: 146px; height: 146px; }
  .bigtime { font-size: 37px; }
  .att-mobile-grid { grid-template-columns: 1fr 1fr; }
  .install-banner { flex-direction: column; }
  .install-actions { width: 100%; }
  .install-actions button { flex: 1; }

  /* mirrored from max-width: 759px */

  .review-tabs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); overflow: visible; }
  .review-tabs .module-tab { width: 100%; padding-inline: 6px; }
  .recovery-regenerate-form { grid-template-columns: 1fr; }
  .recovery-regenerate-form > button { width: 100%; }
  .recovery-key-row { display: grid; grid-template-columns: 1fr; }
  .recovery-key-row > * { width: 100%; }
  .recovery-key { justify-content: center; overflow-wrap: anywhere; }
  .app-modal-card { padding: 17px; border-radius: 19px; }
  html[data-theme="dark"] .module-tabs { background: rgba(15,25,42,.96); }

  /* mirrored from max-width: 759px */

  .forgot-tabs { position: static !important; }
  .list-item-actions { flex-wrap: wrap; }
  .list-item-actions button { flex: 1 1 105px; min-width: 0; }

  /* mirrored from max-width: 759px */

  .top { border-radius: 0 0 22px 22px; }
  .module-tabs { border-radius: 19px; }
  .mobile-bottom-nav { border-radius: 28px; }
  .card, .clock-card { border-radius: 23px; }

  /* mirrored from max-width: 759px */

  .report-results-card { margin-top: 14px; }
  .report-date-button { min-height: 46px; }
  .report-jalali-calendar { margin-top: 11px; padding: 11px; border-radius: 16px; }

  /* mirrored from max-width: 759px */

  .owner-monitor-card { padding: 15px; border-radius: 19px; }
  .owner-monitor-meta { gap: 7px 12px; }

  /* mirrored from max-width: 759px */

  .guest-auth-card { width: min(100%, 350px); padding: 20px; border-radius: 22px; }
  .guest-auth-actions { grid-template-columns: 1fr 1.2fr; }
  .guest-login-direct { min-height: 38px; padding: 6px 14px; font-size: 11px; }

  /* mirrored from max-width: 759px */

  .context-help-btn { width: 21px; min-width: 21px; height: 21px; min-height: 21px; }
  .has-context-help { gap: 10px; }
  .context-help-floating { top: 8px; left: 9px; }
  .guide-modal-card { padding: 18px; border-radius: 20px; }
  .guide-title, .tour-title { font-size: 16px; }
  .guide-text, .tour-text { font-size: 11px; }
  .tour-card { padding: 17px; border-radius: 20px; }

  /* mirrored from max-width: 759px */

  .guide-action, .tour-action { padding: 9px 10px; font-size: 10px; }
  .guide-ok { margin-top: 16px; }
  .tour-phase { font-size: 9px; }

  /* mirrored from max-width: 759px */

  .scan-card { display: grid; justify-items: center; }
  .scan-card .barcode-scanner {
    width: min(100%, 430px);
    margin-inline: auto;
  }
  .scan-card .barcode-result {
    width: min(100%, 430px);
    margin-inline: auto;
  }
  .context-help-btn {
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
  }
  .context-help-btn svg { width: 15px; height: 15px; }
  .context-help-label-row, .context-help-panel-head { gap: 16px; }
  .context-help-floating { top: 10px !important; left: 10px !important; right: auto !important; }

  /* mirrored from max-width: 759px */

  .week-bars > .guest-report-empty {
    min-height: 118px;
    padding: 16px 12px;
  }
  .week-bars > .guest-report-empty strong { font-size: 13px; }
  .week-bars > .guest-report-empty span { font-size: 10px; }
  .scan-guide-head { margin-bottom: 9px; }
  .scan-guide-title { font-size: 13px; }
  .scan-card .barcode-scanner { margin-top: 0; }
  .smart-card { margin-top: 10px; }

  /* mirrored from max-width: 759px */

  .workday-field > .field-label.has-context-help,
  .barcode-card-head h2.has-context-help { gap: 8px !important; }


  /* Undo the old desktop-only tab treatment so desktop matches the real mobile cascade. */
  .module-shell { display: block; }
  .module-tabs {
    display: flex;
    max-width: 100%;
    gap: 7px;
    padding: 6px;
    overflow-x: auto;
    border: 1px solid #d8e5f7;
    box-shadow: none;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .module-tabs[data-module-tabs="admin-manage"],
  .module-tabs[data-module-tabs="admin-reports"],
  .forgot-tabs {
    display: flex;
    grid-template-columns: none;
  }
  .module-tab {
    min-width: auto;
    min-height: 38px;
    flex: 1 0 auto;
    padding: 6px 12px;
    text-align: initial;
    font-size: 10px;
    line-height: normal;
    border-radius: 12px;
  }
  .module-tab.active {
    border-color: #c7dcfb;
    background: #fff;
    color: var(--primary);
    box-shadow: 0 7px 17px rgba(20,56,112,.08);
  }

  html { background: var(--bg); }
  body {
    width: 430px;
    max-width: 430px;
    min-height: 100dvh;
    margin-inline: auto;
    overflow-x: hidden;
    box-shadow: 0 0 0 1px rgba(209,225,247,.35), 0 28px 90px rgba(4,18,50,.16);
  }
  .top { width: 430px; max-width: 430px; margin-inline: auto; }
  .employee-page, .admin-page { width: 100%; max-width: 430px; margin-inline: auto; }
  .mobile-bottom-nav {
    right: auto;
    left: 50%;
    width: 412px;
    max-width: 412px;
    transform: translateX(-50%);
  }
  .notification-drawer-card { width: min(100%, 430px); margin-inline: auto; }
  .install-banner { width: min(calc(100% - 32px), 398px); }
}

.danger-button {
  border: 1px solid rgba(220,53,69,.32);
  background: rgba(220,53,69,.09);
  color: var(--danger);
  box-shadow: none;
}
.danger-button:hover { background: rgba(220,53,69,.15); }
.employee-password-hint { margin: 8px 0 0; }
html[data-theme="dark"] .danger-button {
  border-color: rgba(255,110,125,.30);
  background: rgba(255,84,104,.10);
  color: #ff9aa7;
}

/* v72: global first-paint + smoothness optimization (mobile and desktop). */
html[data-theme="dark"] body { background-attachment: scroll; }
.top,
.module-tabs,
.mobile-bottom-nav {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.top { background: rgba(255,255,255,.98); }
.mobile-bottom-nav { background: rgba(255,255,255,.98); }
.module-tabs { background: rgba(244,248,255,.99); }
html[data-theme="dark"] .top { background: rgba(9,18,39,.97); }
html[data-theme="dark"] .mobile-bottom-nav { background: linear-gradient(145deg, rgba(31,45,81,.96), rgba(8,17,37,.96)); }
html[data-theme="dark"] .module-tabs { background: linear-gradient(145deg, rgba(35,50,88,.94), rgba(10,20,43,.94)); }