:root {
  color-scheme: dark;
  --bg: #050712;
  --surface: rgba(14, 19, 39, .92);
  --surface-2: #111831;
  --surface-3: #18203d;
  --cyan: #21e6ff;
  --cyan-soft: rgba(33, 230, 255, .13);
  --purple: #9b6cff;
  --purple-soft: rgba(155, 108, 255, .14);
  --lime: #b8ff59;
  --danger: #ff557a;
  --warning: #ffbe4c;
  --text: #f3f7ff;
  --muted: #8d98b8;
  --line: rgba(163, 187, 255, .14);
  --shadow: 0 22px 60px rgba(0, 0, 0, .36);
  --radius: 22px;
  font-family: Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }

body {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 15% -5%, rgba(31, 221, 255, .15), transparent 30%),
    radial-gradient(circle at 100% 15%, rgba(145, 74, 255, .14), transparent 34%),
    linear-gradient(180deg, #070a18 0%, #050712 65%);
  overflow-x: hidden;
}

body[data-theme="dota2"] {
  --bg: #07090d;
  --surface: rgba(15, 16, 20, .94);
  --surface-2: #17191d;
  --surface-3: #25272b;
  --cyan: #34d8d2;
  --cyan-soft: rgba(52, 216, 210, .13);
  --purple: #d94c3d;
  --purple-soft: rgba(217, 76, 61, .14);
  --lime: #f0c36a;
  --danger: #ff5a51;
  --warning: #ff9d45;
  --muted: #a2a9b1;
  --line: rgba(226, 202, 174, .16);
  background: linear-gradient(180deg, rgba(2, 5, 8, .45), rgba(2, 5, 8, .88)), url('./themes/dota2-heroes.webp') center top / cover fixed no-repeat;
}

body[data-theme="dota2-radiant"] {
  --bg: #07100d;
  --surface: rgba(12, 24, 20, .94);
  --surface-2: #10241d;
  --surface-3: #183a2c;
  --cyan: #70e6bd;
  --cyan-soft: rgba(112, 230, 189, .14);
  --purple: #d8b85c;
  --purple-soft: rgba(216, 184, 92, .15);
  --lime: #baf56e;
  --danger: #ff6b62;
  --warning: #ffd36a;
  --muted: #a6bbb0;
  --line: rgba(178, 230, 201, .17);
  background: linear-gradient(150deg, rgba(4, 18, 12, .32), rgba(3, 10, 8, .9)), url('./themes/dota2-radiant-heroes.webp') center top / cover fixed no-repeat;
}

body[data-theme="dota2-dire"] {
  --bg: #100607;
  --surface: rgba(28, 12, 13, .95);
  --surface-2: #291113;
  --surface-3: #42191a;
  --cyan: #ff7468;
  --cyan-soft: rgba(255, 116, 104, .14);
  --purple: #d43d31;
  --purple-soft: rgba(212, 61, 49, .16);
  --lime: #ffc35f;
  --danger: #ff4949;
  --warning: #ff9a43;
  --muted: #b9a0a0;
  --line: rgba(255, 160, 139, .16);
  background: linear-gradient(155deg, rgba(28, 3, 3, .34), rgba(10, 2, 3, .91)), url('./themes/dota2-dire-heroes.webp') center top / cover fixed no-repeat;
}

body[data-theme="cs2"] {
  --bg: #070a0c;
  --surface: rgba(13, 18, 21, .94);
  --surface-2: #121a1f;
  --surface-3: #1d2a31;
  --cyan: #59c6e8;
  --cyan-soft: rgba(89, 198, 232, .13);
  --purple: #f29a45;
  --purple-soft: rgba(242, 154, 69, .14);
  --lime: #f5ad52;
  --danger: #ff675d;
  --warning: #ff9d3d;
  --muted: #9eabb3;
  --line: rgba(180, 211, 225, .15);
  background: linear-gradient(180deg, rgba(3, 8, 12, .42), rgba(3, 8, 12, .88)), url('./themes/cs2-operators.webp') center top / cover fixed no-repeat;
}

body[data-theme="cs2-dust2"] {
  --bg: #100d08;
  --surface: rgba(28, 24, 18, .94);
  --surface-2: #282118;
  --surface-3: #3d3224;
  --cyan: #e8c781;
  --cyan-soft: rgba(232, 199, 129, .14);
  --purple: #d78a3e;
  --purple-soft: rgba(215, 138, 62, .15);
  --lime: #f4d97c;
  --danger: #ff6657;
  --warning: #ffb451;
  --muted: #baaE9c;
  --line: rgba(239, 210, 163, .17);
  background: linear-gradient(180deg, rgba(24, 16, 7, .34), rgba(10, 8, 5, .9)), url('./themes/cs2-dust2-operators.webp') center top / cover fixed no-repeat;
}

body[data-theme="cs2-mirage"] {
  --bg: #071014;
  --surface: rgba(11, 25, 31, .94);
  --surface-2: #102630;
  --surface-3: #193a47;
  --cyan: #67d9f2;
  --cyan-soft: rgba(103, 217, 242, .14);
  --purple: #d5ad72;
  --purple-soft: rgba(213, 173, 114, .15);
  --lime: #9ee6c3;
  --danger: #ff7168;
  --warning: #f2bc65;
  --muted: #a5b9bf;
  --line: rgba(158, 215, 228, .16);
  background: linear-gradient(175deg, rgba(4, 20, 28, .32), rgba(3, 10, 14, .9)), url('./themes/cs2-mirage-operators.webp') center top / cover fixed no-repeat;
}

body[data-theme="cs2-inferno"] {
  --bg: #100806;
  --surface: rgba(27, 16, 13, .95);
  --surface-2: #281813;
  --surface-3: #42261b;
  --cyan: #ff9b54;
  --cyan-soft: rgba(255, 155, 84, .14);
  --purple: #cf4836;
  --purple-soft: rgba(207, 72, 54, .16);
  --lime: #ffd16a;
  --danger: #ff574d;
  --warning: #ffad45;
  --muted: #b9aaa3;
  --line: rgba(239, 175, 146, .16);
  background: linear-gradient(165deg, rgba(33, 8, 3, .32), rgba(10, 5, 4, .9)), url('./themes/cs2-inferno-operators.webp') center top / cover fixed no-repeat;
}

body[data-theme^="dota2"]::before,
body[data-theme^="cs2"]::before {
  opacity: .08;
  mask-image: linear-gradient(to bottom, black, transparent 45%);
}

body[data-theme^="dota2"] .stat-card,
body[data-theme^="dota2"] .panel,
body[data-theme^="cs2"] .stat-card,
body[data-theme^="cs2"] .panel {
  background: linear-gradient(145deg, rgba(18, 23, 27, .92), rgba(5, 9, 12, .94));
  backdrop-filter: blur(14px);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .13;
  background-image:
    linear-gradient(rgba(47, 225, 255, .2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 225, 255, .2) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; }

.app-shell { max-width: 1180px; margin: 0 auto; min-height: 100dvh; padding: 0 22px 104px; position: relative; }

.boot-fallback { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; }
.boot-fallback .brand-mark { width: 68px; height: 68px; font-size: 37px; margin-bottom: 5px; }
.boot-fallback strong { direction: ltr; font: 900 24px/1 Arial, sans-serif; letter-spacing: 4px; }
.boot-fallback span { color: var(--muted); font-size: 11px; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 92px;
  padding: max(18px, env(safe-area-inset-top)) 0 12px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  color: #071019;
  font: 900 25px/1 Arial, sans-serif;
  background: linear-gradient(145deg, var(--cyan), var(--lime));
  clip-path: polygon(15% 0, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%);
  box-shadow: 0 0 24px rgba(33, 230, 255, .35);
}
.brand-name { font: 900 18px/1.05 Arial, sans-serif; letter-spacing: 2.4px; }
.brand-sub { color: var(--muted); font-size: 11px; margin-top: 5px; }
.creator-line { color: #73809f; direction: ltr; font: 700 8px/1.4 Arial, sans-serif; letter-spacing: .55px; margin-top: 4px; text-transform: lowercase; }
.creator-line span, .creator-line strong { color: var(--cyan); text-shadow: 0 0 12px rgba(33, 230, 255, .45); }

.user-chip { display: flex; align-items: center; gap: 10px; background: rgba(17, 24, 49, .72); border: 1px solid var(--line); border-radius: 15px; padding: 7px 8px 7px 12px; }
.avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--purple-soft); border: 1px solid rgba(155, 108, 255, .28); color: #cbb7ff; font-weight: 900; }
.user-meta { line-height: 1.25; }
.user-meta strong { display: block; font-size: 13px; }
.user-meta span { color: var(--muted); font-size: 10px; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.appearance-toggle { min-height: 42px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; color: var(--text); border: 1px solid var(--line); border-radius: 13px; background: var(--surface-2); cursor: pointer; }
.appearance-toggle span { color: var(--warning); font-size: 18px; }
.appearance-toggle b { font-size: 9px; white-space: nowrap; }

.page-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 18px 0 24px; }
.eyebrow { color: var(--cyan); font: 800 10px/1 Arial, sans-serif; letter-spacing: 2px; margin-bottom: 8px; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(25px, 5vw, 38px); letter-spacing: -.8px; margin-bottom: 8px; }
h2 { font-size: 19px; margin-bottom: 4px; }
h3 { font-size: 15px; margin-bottom: 4px; }
.subtitle { color: var(--muted); margin: 0; font-size: 13px; line-height: 1.8; }

.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  min-height: 46px;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  background: var(--surface-2);
  transition: transform .18s ease, border-color .18s ease, filter .18s ease;
}
.btn:active { transform: scale(.97); }
.btn:hover { border-color: rgba(33, 230, 255, .45); }
.btn-primary { background: linear-gradient(135deg, var(--cyan), #71f6dc); border: 0; color: #041017; font-weight: 900; box-shadow: 0 10px 30px rgba(33, 230, 255, .17); }
.btn-purple { background: linear-gradient(135deg, var(--purple), #c078ff); border: 0; font-weight: 800; }
.btn-warning { color: #241403; border-color: transparent; background: linear-gradient(135deg, #ffb13b, #ff8b2c); font-weight: 900; }
.btn-danger { color: #ff8ba5; border-color: rgba(255, 85, 122, .28); background: rgba(255, 85, 122, .08); }
.btn-ghost { background: transparent; }
.btn-small { min-height: 36px; padding: 0 12px; font-size: 11px; border-radius: 11px; }
.btn-icon { width: 40px; min-height: 40px; padding: 0; font-size: 18px; }
.btn:disabled { cursor: not-allowed; opacity: .42; filter: grayscale(.45); transform: none; }
.wide { width: 100%; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat-card, .panel {
  position: relative;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(18, 25, 51, .94), rgba(9, 13, 30, .94));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.stat-card { padding: 19px; min-height: 128px; }
.stat-card::after { content: ''; position: absolute; width: 72px; height: 72px; left: -30px; top: -30px; border: 1px solid currentColor; transform: rotate(45deg); opacity: .15; }
.stat-top { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 11px; }
.stat-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--cyan-soft); color: var(--cyan); font-size: 17px; }
.stat-value { font: 900 24px/1.2 Tahoma, sans-serif; margin-top: 20px; }
.stat-foot { color: var(--muted); font-size: 10px; margin-top: 6px; }
.accent-purple .stat-icon { background: var(--purple-soft); color: #c5a9ff; }
.accent-lime .stat-icon { background: rgba(184, 255, 89, .1); color: var(--lime); }
.accent-warning .stat-icon { background: rgba(255, 190, 76, .1); color: var(--warning); }

.dashboard-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; }
.dashboard-main { display: grid; gap: 16px; }
.panel { padding: 20px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.panel-head p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }

.daily-fact { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; margin-top: 16px; padding: 18px 20px; background: linear-gradient(120deg, var(--cyan-soft), rgba(9, 13, 30, .94) 42%, var(--purple-soft)); }
.daily-fact::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.035), transparent); transform: translateX(-100%); animation: fact-scan 8s ease-in-out infinite; }
.fact-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: #061016; background: linear-gradient(145deg, var(--cyan), var(--lime)); box-shadow: 0 10px 28px var(--cyan-soft); font-size: 24px; font-weight: 900; }
.fact-copy { min-width: 0; }
.fact-copy .eyebrow { margin-bottom: 6px; }
.fact-copy h2 { margin-bottom: 5px; }
.fact-copy p { margin: 0; color: var(--text); font-size: 12px; line-height: 1.95; }
.fact-date { align-self: start; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 6px 9px; font-size: 9px; white-space: nowrap; }
@keyframes fact-scan { 0%, 65%, 100% { transform: translateX(-100%); } 82% { transform: translateX(100%); } }

.clock-panel { min-height: 318px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 20px; }
.live-time { font: 900 clamp(35px, 6vw, 58px)/1 Arial, sans-serif; letter-spacing: 1px; direction: ltr; }
.live-date { color: var(--muted); font-size: 12px; margin-top: 10px; }
.shift-target { display: grid; gap: 7px; margin-top: 18px; text-align: right; }
.shift-target label { color: var(--muted); font-size: 9px; }
.clock-state { margin-top: 24px; display: inline-flex; gap: 8px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 11px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.pulse.active { background: var(--lime); box-shadow: 0 0 0 6px rgba(184, 255, 89, .1); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 11px rgba(184, 255, 89, 0); } }

.punch-wrap { display: grid; place-items: center; }
.punch-button {
  width: 176px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(33, 230, 255, .48);
  color: var(--text);
  cursor: pointer;
  background: radial-gradient(circle, rgba(33, 230, 255, .15), rgba(9, 18, 34, .96) 66%);
  box-shadow: inset 0 0 30px rgba(33, 230, 255, .12), 0 0 0 10px rgba(33, 230, 255, .04), 0 0 46px rgba(33, 230, 255, .15);
  transition: .22s ease;
}
.punch-button:hover { transform: scale(1.025); }
.punch-button:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.punch-button.active { border-color: rgba(255, 85, 122, .55); background: radial-gradient(circle, rgba(255, 85, 122, .15), rgba(24, 9, 23, .96) 66%); box-shadow: inset 0 0 30px rgba(255, 85, 122, .12), 0 0 0 10px rgba(255, 85, 122, .04), 0 0 46px rgba(255, 85, 122, .13); }
.punch-button strong { display: block; font-size: 20px; }
.punch-button span { display: block; color: var(--muted); font-size: 10px; margin-top: 7px; }

.work-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.work-summary-card {
  position: relative;
  min-height: 162px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(18, 25, 51, .96), rgba(9, 13, 30, .96));
  box-shadow: var(--shadow);
}
.work-summary-card::after { content: ''; position: absolute; width: 96px; height: 96px; left: -46px; top: -46px; border: 1px solid currentColor; opacity: .12; transform: rotate(45deg); }
.work-summary-icon { width: 43px; height: 43px; display: grid; place-items: center; margin-bottom: 15px; border-radius: 14px; color: var(--cyan); background: var(--cyan-soft); font-size: 21px; font-weight: 900; }
.work-summary-card > span, .work-summary-card > small { display: block; color: var(--muted); font-size: 10px; }
.work-summary-card > strong { display: block; margin: 8px 0; font-size: clamp(18px, 3vw, 25px); line-height: 1.55; color: var(--text); }
.work-summary-card.accent-month .work-summary-icon { color: #c5a9ff; background: var(--purple-soft); }
.work-summary-card.accent-year .work-summary-icon { color: var(--warning); background: rgba(255, 190, 76, .1); }
.work-summary-card.accent-income .work-summary-icon { color: var(--lime); background: rgba(184, 255, 89, .1); }
.work-summary-card.accent-income > strong { color: var(--lime); }
.work-summary-card.accent-days .work-summary-icon { color: #ff8ba5; background: rgba(255, 85, 122, .1); }

.dashboard-history { padding-top: 14px; }
.dashboard-period-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 20px; padding: 5px; border: 1px solid var(--line); border-radius: 16px; background: rgba(6, 10, 24, .56); }
.dashboard-period-tab { min-height: 43px; border: 0; border-radius: 12px; color: var(--muted); background: transparent; cursor: pointer; font: 800 11px Tahoma, sans-serif; transition: .2s ease; }
.dashboard-period-tab.active { color: #041017; background: linear-gradient(135deg, var(--cyan), var(--lime)); box-shadow: 0 8px 24px rgba(33, 230, 255, .15); }
.dashboard-archive-link { margin-top: 12px; }

.record-list { display: grid; gap: 10px; }
.record-row { display: grid; grid-template-columns: minmax(130px, 1.2fr) 1fr 1fr auto; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: rgba(6, 10, 24, .45); }
.record-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.record-person .avatar { width: 34px; height: 34px; flex: 0 0 auto; }
.record-person strong { font-size: 12px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-person span, .record-cell span { color: var(--muted); font-size: 9px; display: block; margin-top: 4px; }
.record-cell strong { font-size: 11px; direction: ltr; display: inline-block; }
.record-actions, .table-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.record-actions { justify-content: flex-end; }
.amount { color: var(--lime); }

.empty { text-align: center; padding: 42px 18px; color: var(--muted); }
.empty-icon { font-size: 38px; opacity: .65; margin-bottom: 12px; }
.empty strong { display: block; color: var(--text); margin-bottom: 7px; }

.bottom-nav {
  position: fixed;
  z-index: 30;
  bottom: max(14px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: min(650px, calc(100% - 26px));
  display: flex;
  justify-content: space-around;
  padding: 8px;
  border: 1px solid rgba(163, 187, 255, .18);
  border-radius: 22px;
  background: rgba(9, 13, 29, .9);
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
}
.nav-item { min-width: 64px; border: 0; background: transparent; color: var(--muted); padding: 8px 10px; border-radius: 15px; cursor: pointer; font-size: 9px; }
.nav-item .nav-icon { display: block; font-size: 19px; margin-bottom: 5px; filter: grayscale(1); }
.nav-item.active { background: var(--cyan-soft); color: var(--cyan); }
.nav-item.active .nav-icon { filter: none; }

.filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 15px; margin-bottom: 16px; background: rgba(15, 21, 43, .72); border: 1px solid var(--line); border-radius: 18px; }
.range-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin: -4px 0 14px; }
.range-button { border: 1px solid var(--line); border-radius: 999px; min-height: 38px; padding: 0 15px; color: var(--muted); background: rgba(10, 15, 33, .75); cursor: pointer; font-size: 10px; }
.range-button.active { color: #051018; border-color: transparent; background: linear-gradient(135deg, var(--cyan), var(--lime)); font-weight: 900; box-shadow: 0 0 22px rgba(33, 230, 255, .14); }
.period-switch { display: flex; gap: 8px; flex-wrap: wrap; margin: -8px 0 14px; }
.period-switch button { border: 1px solid var(--line); border-radius: 999px; min-height: 35px; padding: 0 14px; color: var(--muted); background: rgba(10, 15, 33, .75); cursor: pointer; font-size: 10px; }
.period-switch button.active { color: #051018; border-color: transparent; background: linear-gradient(135deg, var(--cyan), var(--lime)); font-weight: 900; box-shadow: 0 0 22px rgba(33, 230, 255, .14); }
.field { display: grid; gap: 7px; }
.field label { color: var(--muted); font-size: 10px; }
.input, select.input, textarea.input { width: 100%; border: 1px solid var(--line); border-radius: 13px; min-height: 46px; color: var(--text); padding: 0 13px; outline: none; background: #0b1023; }
textarea.input { padding-top: 12px; min-height: 82px; resize: vertical; }
.input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(33, 230, 255, .08); }
.input::placeholder { color: #59627d; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: 12px 20px, 7px 20px; background-size: 5px 5px; background-repeat: no-repeat; }
.readonly-field { display: flex; align-items: center; color: var(--text); background: rgba(255, 255, 255, .025); }
[hidden] { display: none !important; }

.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.employee-card { padding: 18px; }
.employee-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.employee-card .avatar { width: 46px; height: 46px; font-size: 17px; }
.employee-role { color: var(--cyan); font-size: 9px; }
.employee-details { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0; }
.detail-box { background: rgba(6, 10, 24, .52); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.detail-box span { color: var(--muted); font-size: 9px; display: block; margin-bottom: 6px; }
.detail-box strong { font-size: 11px; }
.employee-actions { display: flex; gap: 8px; }

.archive-filter-panel { margin-bottom: 16px; }
.archive-filters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.archive-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.archive-summary-grid article { position: relative; overflow: hidden; min-height: 126px; padding: 19px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(135deg, var(--cyan-soft), rgba(10, 15, 32, .94) 58%, var(--purple-soft)); box-shadow: var(--shadow); }
.archive-summary-grid article::after { content: ''; position: absolute; width: 88px; height: 88px; left: -42px; top: -42px; border: 1px solid var(--cyan); opacity: .12; transform: rotate(45deg); }
.archive-summary-grid span, .archive-summary-grid small { display: block; color: var(--muted); font-size: 10px; }
.archive-summary-grid strong { display: block; margin: 15px 0 7px; font-size: clamp(18px, 4vw, 27px); }
.archive-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.archive-actions .btn { min-width: 0; }
.archive-records { padding: 0; }
.archive-records > .panel-head { padding: 20px 20px 0; }
.archive-table-wrap { overflow-x: auto; overscroll-behavior-inline: contain; }
.archive-table { width: 100%; min-width: 890px; border-collapse: collapse; direction: rtl; }
.archive-table th { padding: 13px 12px; color: #061219; background: linear-gradient(135deg, var(--lime), var(--cyan)); font-size: 10px; font-weight: 900; text-align: right; white-space: nowrap; }
.archive-table td { padding: 13px 12px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 10px; vertical-align: middle; }
.archive-table tbody tr { background: rgba(6, 10, 24, .25); transition: background .16s ease; }
.archive-table tbody tr:hover { background: var(--cyan-soft); }
.archive-table td strong, .archive-table td small { display: block; }
.archive-table td small { margin-top: 5px; color: var(--muted); font-size: 8px; direction: ltr; }
.archive-table .time-cell { direction: ltr; text-align: right; font-weight: 800; }
.archive-table .check-column { width: 44px; text-align: center; }
.archive-table input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--cyan); }
.table-actions { min-width: 128px; }
.danger-text { color: #ff829e !important; direction: rtl !important; }
.archive-pagination { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px 20px; color: var(--muted); font-size: 9px; }
.archive-pagination > div { display: flex; align-items: center; gap: 9px; }

.payroll-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 16px; }
.payroll-total { padding: 26px; min-height: 270px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(145deg, rgba(28, 23, 67, .95), rgba(9, 15, 34, .95)); }
.hero-amount { font: 900 clamp(26px, 5vw, 42px)/1.2 Tahoma, sans-serif; color: var(--lime); margin: 12px 0; }
.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mini { padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(3, 7, 17, .3); }
.mini span { display: block; color: var(--muted); font-size: 8px; margin-bottom: 5px; }
.mini strong { font-size: 10px; }
.bar-list { display: grid; gap: 16px; }
.bar-head { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 8px; }
.bar-track { height: 8px; border-radius: 999px; background: #080c1b; overflow: hidden; }
.bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--purple), var(--cyan)); box-shadow: 0 0 15px rgba(33, 230, 255, .25); }

.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.setting-list { display: grid; gap: 12px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: rgba(5, 9, 22, .4); }
.setting-row p { color: var(--muted); font-size: 10px; margin: 5px 0 0; }
.setting-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.calendar-switch { display: flex; border: 1px solid var(--line); background: #080c1b; border-radius: 12px; padding: 3px; }
.calendar-switch button { border: 0; color: var(--muted); background: transparent; padding: 8px 10px; border-radius: 9px; font-size: 10px; cursor: pointer; }
.calendar-switch button.active { color: var(--text); background: var(--surface-3); }

.theme-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.theme-option { position: relative; min-width: 0; overflow: hidden; padding: 0 0 10px; color: var(--text); text-align: right; border: 1px solid var(--line); border-radius: 14px; background: rgba(5, 9, 20, .6); cursor: pointer; }
.theme-option.active { border-color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan-soft); }
.theme-preview { display: block; height: 74px; margin-bottom: 9px; background: radial-gradient(circle at 20% 20%, #21e6ff, transparent 36%), radial-gradient(circle at 80% 20%, #9b6cff, transparent 34%), #060915; background-size: cover; background-position: center; }
.theme-dota2 .theme-preview { background-image: linear-gradient(rgba(3, 5, 7, .1), rgba(3, 5, 7, .5)), url('./themes/dota2-heroes.webp'); }
.theme-dota2-radiant .theme-preview { background-image: linear-gradient(rgba(2, 29, 20, .04), rgba(2, 29, 20, .5)), url('./themes/dota2-radiant-heroes.webp'); }
.theme-dota2-dire .theme-preview { background-image: linear-gradient(rgba(35, 2, 2, .04), rgba(35, 2, 2, .5)), url('./themes/dota2-dire-heroes.webp'); }
.theme-cs2 .theme-preview { background-image: linear-gradient(rgba(3, 5, 7, .08), rgba(3, 5, 7, .48)), url('./themes/cs2-operators.webp'); }
.theme-cs2-dust2 .theme-preview { background-image: linear-gradient(rgba(42, 28, 10, .04), rgba(42, 28, 10, .5)), url('./themes/cs2-dust2-operators.webp'); }
.theme-cs2-mirage .theme-preview { background-image: linear-gradient(rgba(2, 25, 35, .04), rgba(2, 25, 35, .5)), url('./themes/cs2-mirage-operators.webp'); }
.theme-cs2-inferno .theme-preview { background-image: linear-gradient(rgba(40, 8, 2, .04), rgba(40, 8, 2, .5)), url('./themes/cs2-inferno-operators.webp'); }
.theme-option strong, .theme-option small { display: block; padding: 0 10px; }
.theme-option strong { font-size: 11px; }
.theme-option small { color: var(--muted); font-size: 8px; line-height: 1.6; margin-top: 3px; }
.theme-option i { position: absolute; top: 7px; left: 7px; padding: 4px 6px; border-radius: 999px; color: #071019; background: var(--cyan); font: normal 800 8px/1 Tahoma, sans-serif; }

.settings-span { grid-column: 1 / -1; }
.total-payout { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; margin-bottom: 18px; background: linear-gradient(145deg, rgba(28, 23, 67, .95), rgba(9, 15, 34, .95)); }
.total-payout > div:first-child > strong { display: block; color: var(--lime); font: 900 clamp(27px, 6vw, 44px)/1.3 Tahoma, sans-serif; margin: 15px 0 8px; }
.total-payout p { color: var(--muted); font-size: 11px; margin: 0; }
.payout-breakdown { display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); gap: 8px; }
.payout-breakdown span { display: grid; gap: 6px; padding: 11px; color: var(--muted); font-size: 9px; border: 1px solid var(--line); border-radius: 12px; background: rgba(3, 7, 17, .3); }
.payout-breakdown strong { color: var(--text); font-size: 10px; }
.section-title { margin: 26px 0 14px; }
.section-title p { color: var(--muted); font-size: 11px; }
.payout-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.payout-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.payout-card > div:last-child { text-align: left; }
.payout-card > div:last-child > span { display: block; color: var(--muted); font-size: 9px; margin-bottom: 7px; }
.payout-amount { color: var(--lime); font-size: 18px; }
.active-range-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -2px 0 16px; padding: 12px 15px; color: var(--muted); font-size: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--cyan-soft); }
.active-range-note strong { color: var(--text); }
.outside-range-note { flex: 1 0 100%; padding: 10px 12px; color: var(--warning); text-align: right; border: 1px solid rgba(255,190,76,.24); border-radius: 12px; background: rgba(255,190,76,.07); cursor: pointer; font-size: 9px; line-height: 1.8; }
.open-shift { border-color: rgba(255, 190, 76, .25); }
.empty.compact { min-height: 70px; }
.monthly-summary { margin-bottom: 16px; }
.monthly-employee-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.monthly-employee-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: rgba(7, 11, 26, .52); }
.monthly-employee-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, var(--cyan-soft), transparent 58%, var(--purple-soft)); }
.month-work-list { display: grid; }
.month-work-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12px; padding: 13px 15px; border-bottom: 1px solid rgba(163, 187, 255, .1); }
.month-work-row:last-child { border-bottom: 0; }
.month-work-row > div { display: grid; gap: 5px; }
.month-work-row > div:last-child { text-align: left; }
.month-work-row strong { font-size: 11px; }
.month-work-row span { color: var(--muted); font-size: 9px; }
.month-work-row > div:last-child strong { color: var(--lime); font-size: 13px; }
.about-contact { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0; padding: 13px; border: 1px solid var(--line); border-radius: 13px; }
.about-panel { background: linear-gradient(145deg, rgba(17, 28, 52, .96), rgba(8, 12, 26, .96)); }
.about-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.about-brand .brand-mark { flex: 0 0 auto; }
.about-brand strong, .about-brand span { display: block; }
.about-brand strong { direction: ltr; text-align: right; font: 900 14px/1.5 Arial, sans-serif; letter-spacing: .5px; }
.about-brand span { color: var(--muted); font-size: 9px; margin-top: 4px; }
.about-contact { margin-top: 2px; }
.contact-email { direction: ltr; text-align: right; word-break: break-all; color: var(--cyan) !important; font-family: Arial, sans-serif; letter-spacing: .2px; }
.about-note { margin: 14px 0 0; color: var(--muted); font-size: 10px; line-height: 1.8; }
.appearance-setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 10px; }
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.contact-link { appearance: none; width: 100%; display: grid; gap: 7px; min-height: 76px; padding: 13px; color: var(--text); text-align: right; text-decoration: none; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); cursor: pointer; transition: transform .18s ease, border-color .18s ease; }
.contact-link:hover { transform: translateY(-2px); border-color: var(--cyan); }
.contact-link span { color: var(--muted); font-size: 9px; }
.contact-link strong { color: var(--cyan); font-size: 11px; overflow-wrap: anywhere; }
.contact-link small { color: var(--muted); font-size: 8px; }

html[data-appearance="light"] { color-scheme: light; }
body[data-appearance="light"] {
  --bg: #f4f7ff;
  --surface: rgba(255, 255, 255, .94);
  --surface-2: #ffffff;
  --surface-3: #e9efff;
  --text: #152039;
  --muted: #68758f;
  --line: rgba(43, 69, 121, .15);
  --shadow: 0 20px 55px rgba(35, 57, 101, .13);
  background: radial-gradient(circle at 15% -5%, rgba(33, 230, 255, .2), transparent 30%), radial-gradient(circle at 100% 15%, rgba(155, 108, 255, .14), transparent 34%), linear-gradient(180deg, #f8fbff, #eef3ff);
}
body[data-appearance="light"][data-theme] { background: radial-gradient(circle at 15% -5%, rgba(33, 230, 255, .2), transparent 30%), radial-gradient(circle at 100% 15%, rgba(155, 108, 255, .14), transparent 34%), linear-gradient(180deg, #f8fbff, #eef3ff); }
body[data-appearance="light"][data-theme] .stat-card,
body[data-appearance="light"][data-theme] .panel { background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(242,246,255,.98)); }
body[data-appearance="light"] .user-chip,
body[data-appearance="light"] .filters,
body[data-appearance="light"] .range-button,
body[data-appearance="light"] .period-switch button,
body[data-appearance="light"] .record-row,
body[data-appearance="light"] .detail-box,
body[data-appearance="light"] .monthly-employee-card,
body[data-appearance="light"] .setting-row,
body[data-appearance="light"] .theme-option { background: rgba(255,255,255,.82); }
body[data-appearance="light"] .input,
body[data-appearance="light"] select.input,
body[data-appearance="light"] textarea.input,
body[data-appearance="light"] .account-option,
body[data-appearance="light"] .modal { background-color: #fff; }
body[data-appearance="light"] .modal-head { background: rgba(255,255,255,.96); }
body[data-appearance="light"] .bottom-nav { background: rgba(250,252,255,.94); box-shadow: 0 18px 44px rgba(35,57,101,.18); }
body[data-appearance="light"] .auth-card { background: rgba(255,255,255,.96); }
body[data-appearance="light"] .toast { background: #fff; }
body[data-appearance="light"] .payroll-total,
body[data-appearance="light"] .total-payout,
body[data-appearance="light"] .about-panel { background: linear-gradient(145deg, #fff, #edf3ff); }

.auth-shell { min-height: 100dvh; display: grid; place-items: center; padding: 24px; position: relative; }
.auth-shell::after { content: 'ASAGITI'; position: fixed; bottom: -18px; left: -12px; font: 900 clamp(64px, 22vw, 190px)/1 Arial, sans-serif; color: rgba(118, 171, 255, .025); letter-spacing: 6px; pointer-events: none; }
.auth-card { width: min(450px, 100%); position: relative; z-index: 2; border: 1px solid rgba(33, 230, 255, .2); border-radius: 28px; padding: 28px; background: rgba(9, 13, 30, .92); box-shadow: var(--shadow), 0 0 60px rgba(33, 230, 255, .07); overflow: hidden; }
.auth-card::before { content: ''; position: absolute; height: 3px; left: 15%; right: 15%; top: 0; background: linear-gradient(90deg, transparent, var(--cyan), transparent); }
.auth-logo { text-align: center; margin-bottom: 28px; }
.auth-logo .brand-mark { margin: 0 auto 15px; width: 66px; height: 66px; font-size: 36px; }
.auth-logo h1 { font: 900 25px/1 Arial, sans-serif; letter-spacing: 4px; margin-bottom: 8px; }
.auth-logo p { color: var(--muted); font-size: 11px; }
.auth-logo .creator-line { margin: -1px 0 13px; font-size: 9px; }
.auth-form { display: grid; gap: 14px; }
.account-list { display: grid; gap: 8px; max-height: 240px; overflow: auto; padding-left: 4px; margin-bottom: 16px; }
.account-option { display: flex; width: 100%; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 14px; background: #0b1023; color: var(--text); padding: 10px; cursor: pointer; text-align: right; }
.account-option.selected { border-color: var(--cyan); background: var(--cyan-soft); }
.account-option .meta { flex: 1; }
.account-option strong { display: block; font-size: 12px; }
.account-option span { color: var(--muted); font-size: 9px; }
.pin-input { text-align: center; direction: ltr; letter-spacing: 12px; font-size: 22px; font-weight: 900; padding-right: 24px; }
.auth-note { text-align: center; color: var(--muted); font-size: 9px; margin: 15px 0 0; line-height: 1.7; }

.modal-backdrop { position: fixed; z-index: 80; inset: 0; padding: 18px; display: grid; place-items: center; background: rgba(1, 3, 10, .78); backdrop-filter: blur(8px); }
.confirm-layer { z-index: 140; }
.confirm-dialog { width: min(430px, 100%); }
.confirm-message { color: var(--muted); line-height: 1.9; margin: 0; }
.modal { width: min(560px, 100%); max-height: calc(100dvh - 36px); overflow: auto; border: 1px solid rgba(163, 187, 255, .2); border-radius: 24px; background: #0b1022; box-shadow: 0 32px 90px rgba(0, 0, 0, .7); }
.modal-head { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); background: rgba(11, 16, 34, .95); backdrop-filter: blur(10px); }
.form-status { min-height: 20px; padding: 0 2px; color: #ff7d9c; font-size: 11px; }
.form-status.pending { color: var(--cyan); }
.record-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; border: 1px solid rgba(85, 255, 209, .2); border-radius: 14px; background: rgba(85, 255, 209, .06); }
.record-preview > div { display: grid; gap: 5px; }
.record-preview span { color: var(--muted); font-size: 9px; }
.record-preview strong { font-size: 11px; }
.record-preview small { grid-column: 1 / -1; color: var(--muted); font-size: 8px; line-height: 1.7; }
.modal-head h2 { margin: 0; }
.modal-body { padding: 20px; }
.confirm-box { display: grid; justify-items: center; gap: 18px; padding: 14px 4px 4px; text-align: center; }
.confirm-box p { max-width: 430px; margin: 0; color: var(--muted); line-height: 2; }
.confirm-icon { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid rgba(255, 81, 126, .45); border-radius: 50%; color: #ff6f98; background: rgba(255, 81, 126, .1); font-size: 25px; font-weight: 900; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.form-grid .full { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 10px; margin-top: 20px; }
.hint { color: var(--muted); font-size: 9px; line-height: 1.7; }
.modal .hint { margin: 4px 0 0; font-size: 13px; line-height: 1.8; }
.modal .field label { font-size: 12px; }
.payroll-month-row { gap: 12px; }
.payroll-month-row > div { min-width: 0; }
.payroll-month-row .btn { white-space: normal; }
.payroll-month-row span { font-size: 12px; line-height: 1.6; }
.payroll-detail { color: var(--muted); font-size: 12px; line-height: 1.8; }
.payout-card .payroll-actions, .payout-card .payroll-detail { width: 100%; }
.payroll-actions .btn { font-size: 12px; }
.payment-totals { padding: 12px; border: 1px solid var(--line); border-radius: 16px; margin: 14px 0; }
.payment-totals p { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 8px 0; font-size: 12px; }
.payment-history { display: grid; gap: 12px; }
.payment-entry { display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.payment-entry > div { display: grid; gap: 6px; }
.payment-entry span { color: var(--muted); font-size: 12px; }
.payment-entry.is-voided { opacity: .65; }
.payment-note { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.8; }
@media (max-width: 600px) {
  .payroll-month-row { grid-template-columns: 1fr; }
  .payroll-month-row > div:last-child { text-align: start; }
  .payroll-actions .btn { flex: 1 1 130px; }
}
.export-help > p { color: var(--muted); font-size: 10px; line-height: 1.8; }
.export-content { min-height: 220px !important; direction: ltr; text-align: left; font: 11px/1.7 monospace !important; }
.export-file-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--cyan-soft); direction: ltr; }
.export-file-card strong { overflow-wrap: anywhere; font-size: 10px; }
.export-file-card span { color: var(--muted); font-size: 9px; white-space: nowrap; }
.export-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.export-note { margin-top: 12px; }
.jalali-picker { display: grid; grid-template-columns: 1.05fr 1.35fr .8fr; gap: 7px; direction: rtl; }
.jalali-picker .input { min-width: 0; padding-inline: 8px; text-align: center; }
.jalali-filter { min-width: 0; }

.toast { position: fixed; z-index: 120; left: 50%; bottom: 98px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; min-width: 220px; max-width: calc(100% - 32px); text-align: center; padding: 13px 18px; border-radius: 13px; color: var(--text); background: #18213d; border: 1px solid var(--line); box-shadow: var(--shadow); transition: .25s ease; font-size: 11px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.success { border-color: rgba(184, 255, 89, .35); }
.toast.error { border-color: rgba(255, 85, 122, .38); }

.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 9px; font-size: 9px; background: var(--cyan-soft); color: var(--cyan); }
.badge.success { background: rgba(184, 255, 89, .1); color: var(--lime); }
.badge.danger { background: rgba(255, 85, 122, .1); color: #ff829e; }
.muted { color: var(--muted); }
.ltr { direction: ltr; }
.hidden { display: none !important; }

@media (max-width: 850px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-grid, .payroll-layout, .settings-grid { grid-template-columns: 1fr; }
  .work-summary-grid { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .payout-grid { grid-template-columns: 1fr; }
  .total-payout { grid-template-columns: 1fr; }
  .payout-breakdown { grid-template-columns: 1fr 1fr 1fr; }
  .archive-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .archive-actions { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .app-shell { padding: 0 14px 100px; }
  .topbar { min-height: 78px; }
  .brand-sub, .user-meta { display: none; }
  .appearance-toggle b { display: none; }
  .appearance-toggle { width: 42px; padding: 0; justify-content: center; }
  .brand .creator-line { margin-top: 3px; }
  .page-head { align-items: start; flex-direction: column; margin-top: 12px; }
  .actions { width: 100%; }
  .actions .btn { flex: 1; }
  .stats-grid { gap: 9px; }
  .stat-card { min-height: 112px; padding: 15px; }
  .stat-value { font-size: 18px; margin-top: 16px; }
  .clock-panel { grid-template-columns: 1fr; text-align: center; padding: 24px 16px; }
  .clock-state { margin-top: 17px; }
  .punch-button { width: 150px; }
  .work-summary-grid { grid-template-columns: 1fr; }
  .work-summary-grid { gap: 9px; }
  .work-summary-card { min-height: 145px; padding: 16px; }
  .work-summary-card > strong { font-size: 18px; }
  .work-summary-icon { width: 38px; height: 38px; margin-bottom: 12px; }
  .record-row { grid-template-columns: 1fr auto; }
  .record-cell:nth-of-type(2) { display: none; }
  .record-cell { text-align: left; }
  .record-actions { grid-column: 1 / -1; justify-content: stretch; }
  .record-actions .btn { flex: 1; }
  .filters { grid-template-columns: 1fr 1fr; }
  .filters .jalali-filter { grid-column: 1 / -1; }
  .archive-filters { grid-template-columns: 1fr 1fr; }
  .archive-summary-grid { grid-template-columns: 1fr; gap: 9px; }
  .archive-summary-grid article { min-height: 104px; }
  .archive-actions { grid-template-columns: 1fr; }
  .archive-pagination { align-items: stretch; flex-direction: column; }
  .archive-pagination > div { justify-content: space-between; }
  .team-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .record-preview { grid-template-columns: 1fr 1fr; }
  .record-preview small { grid-column: 1 / -1; }
  .theme-picker { grid-template-columns: 1fr; }
  .daily-fact { grid-template-columns: auto 1fr; align-items: start; padding: 16px; }
  .fact-date { grid-column: 2; }
  .about-contact { align-items: stretch; flex-direction: column; }
  .about-contact .btn { width: 100%; }
  .contact-grid { grid-template-columns: 1fr; }
  .appearance-setting { align-items: stretch; flex-direction: column; }
  .appearance-setting .appearance-toggle { width: 100%; }
  .appearance-setting .appearance-toggle b { display: inline; }
  .payout-breakdown { grid-template-columns: 1fr; }
  .payout-card { align-items: flex-start; flex-direction: column; }
  .payout-card > div:last-child { width: 100%; text-align: right; }
  .active-range-note { align-items: flex-start; flex-direction: column; }
  .monthly-employee-grid { grid-template-columns: 1fr; }
  .mini-grid { grid-template-columns: 1fr 1fr; }
  .bottom-nav { overflow-x: auto; justify-content: start; direction: rtl; }
  .nav-item { flex: 1 0 64px; }
}

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

/* Paradise 3.3: calm, iOS-inspired surfaces without using Apple's proprietary typeface. */
:root {
  font-family: "SF Arabic", "Noto Sans Arabic", "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 26px;
}
button, input, select, textarea { font: inherit; }
html[data-appearance="light"] { color-scheme: light; }
body[data-appearance="light"] {
  --bg: #f7f7f7;
  --surface: #fff;
  --surface-2: #f5f5f5;
  --surface-3: #ececec;
  --cyan: #ed6947;
  --cyan-soft: #fff0e9;
  --purple: #e89068;
  --purple-soft: #fff2ec;
  --lime: #c35c3c;
  --danger: #ca4860;
  --warning: #dc8d4d;
  --text: #25272b;
  --muted: #74777d;
  --line: #e8e8e9;
  --shadow: 0 15px 38px rgba(23, 27, 34, .055);
  background: linear-gradient(180deg, #faf9f8 0, #f6f6f6 430px);
}
body[data-appearance="light"][data-theme] { background: linear-gradient(180deg, #faf9f8 0, #f6f6f6 430px); }
body[data-appearance="dark"] {
  --bg: #17191e; --surface: #24272d; --surface-2: #2d3036; --surface-3: #393c43;
  --cyan: #f39a76; --cyan-soft: rgba(243,154,118,.13);
  --purple: #e88c6c; --purple-soft: rgba(232,140,108,.14);
  --lime: #f4b293; --text: #f5f3f2; --muted: #afb0b5;
  --line: #383b40; --shadow: 0 15px 38px rgba(0,0,0,.13);
  background: #17191e;
}
body[data-appearance="dark"][data-theme] { background: #17191e; }
body[data-appearance] :is(.panel, .stat-card, .work-summary-card, .auth-card, .modal) {
  color: var(--text); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
body[data-appearance="light"][data-theme] :is(.panel, .stat-card, .work-summary-card, .payroll-total, .total-payout, .about-panel) {
  background: var(--surface); border-color: var(--line);
}
body[data-appearance="light"] :is(.user-chip, .filters, .range-button, .period-switch button, .record-row, .detail-box, .monthly-employee-card, .setting-row, .theme-option, .account-option, .input, .modal, .auth-card) {
  background: var(--surface); border-color: var(--line);
}
body[data-appearance] :is(.stat-card, .work-summary-card)::after { display: none; }
body[data-appearance] :is(.user-chip, .filters, .range-button, .period-switch button, .record-row, .detail-box, .monthly-employee-card, .setting-row, .theme-option, .account-option, .input, select.input, textarea.input, .contact-link) {
  background: var(--surface); border-color: var(--line); color: var(--text);
}
body[data-appearance] :is(.record-row, .detail-box, .contact-link, .account-option, .input, .filters) { border-radius: 18px; }
body[data-appearance] .app-shell { max-width: 1110px; }
body[data-appearance] .topbar { min-height: 88px; }
body[data-appearance] .brand-mark { clip-path: none; border-radius: 15px; color: #fff; background: linear-gradient(135deg, #f3a67c, #e26948); box-shadow: none; }
body[data-appearance] .brand-name { color: var(--text); letter-spacing: 1.3px; }
body[data-appearance] .creator-line, body[data-appearance] .creator-line strong { color: var(--muted); text-shadow: none; }
body[data-appearance] :is(.eyebrow, .amount, .contact-link strong) { color: var(--cyan); }
body[data-appearance] :is(.btn, .appearance-toggle, .language-toggle) { border-radius: 999px; color: var(--text); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 3px 11px rgba(0,0,0,.025); }
body[data-appearance] .btn-primary { background: #25272b; color: #fff; border-color: #25272b; box-shadow: 0 10px 19px rgba(23,25,29,.13); }
body[data-appearance] .btn-danger { background: color-mix(in srgb, var(--danger) 8%, var(--surface)); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 18%, var(--surface)); box-shadow: none; }
body[data-appearance] .btn:hover { border-color: var(--cyan); }
body[data-appearance] .language-toggle { min-height: 42px; padding: 0 14px; cursor: pointer; font-size: 12px; font-weight: 700; white-space: nowrap; }
body[data-appearance] .appearance-toggle span { color: var(--cyan); }
body[data-appearance] .avatar { color: var(--cyan); background: var(--cyan-soft); border: 0; border-radius: 50%; }
body[data-appearance] .page-head h1 { font-weight: 800; letter-spacing: -.4px; }
body[data-appearance="light"] .page-head:has(+ .dashboard-main) {
  position: relative; align-items: center; min-height: 195px; padding: 28px 32px; border-radius: 30px;
  background: radial-gradient(circle at 80% 0, #ffdbca 0, transparent 35%), linear-gradient(115deg, #ef7854, #f7a279 50%, #f1d2bd 100%);
  overflow: hidden; color: #312b2b;
}
body[data-appearance="light"] .page-head:has(+ .dashboard-main)::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 55%, rgba(255,255,255,.2)); }
body[data-appearance="light"] .page-head:has(+ .dashboard-main) .eyebrow,
body[data-appearance="light"] .page-head:has(+ .dashboard-main) .subtitle { color: #553e3b; }
body[data-appearance] .clock-panel { min-height: 220px; padding: 28px 30px; }
body[data-appearance] .clock-panel .eyebrow { font-size: 10px; }
body[data-appearance] .live-time { color: var(--text); font-weight: 750; font-size: clamp(40px, 6vw, 64px); }
body[data-appearance] .punch-button, body[data-appearance] .punch-button.active {
  width: min(240px, 100%); min-height: 100px; aspect-ratio: auto; border-radius: 999px;
  color: #fff; border: 0; background: linear-gradient(130deg, #f6ae86, #ec6c4c 60%, #d55043);
  box-shadow: 0 18px 30px rgba(225, 102, 70, .22);
}
body[data-appearance] .punch-button.active { background: #282b31; box-shadow: 0 18px 30px rgba(25, 27, 31, .13); }
body[data-appearance] .punch-button span { color: rgba(255,255,255,.88); }
body[data-appearance] .clock-state { background: var(--surface-2); border: 0; }
body[data-appearance] .pulse.active { background: var(--cyan); box-shadow: none; }
body[data-appearance] .work-summary-card { min-height: 160px; }
body[data-appearance] .work-summary-icon, body[data-appearance] .work-summary-card.accent-month .work-summary-icon,
body[data-appearance] .work-summary-card.accent-year .work-summary-icon, body[data-appearance] .work-summary-card.accent-income .work-summary-icon,
body[data-appearance] .work-summary-card.accent-days .work-summary-icon { color: var(--cyan); background: var(--cyan-soft); border-radius: 15px; }
body[data-appearance] .work-summary-card.accent-income > strong { color: var(--text); }
body[data-appearance] .stat-icon { color: var(--cyan); background: var(--cyan-soft); }
body[data-appearance] .dashboard-period-tabs { background: var(--surface-2); border: 0; border-radius: 999px; }
body[data-appearance] .dashboard-period-tab { border-radius: 999px; color: var(--muted); }
body[data-appearance] .dashboard-period-tab.active { background: var(--surface); color: var(--text); box-shadow: 0 2px 9px rgba(0,0,0,.08); }
body[data-appearance] .range-button.active, body[data-appearance] .period-switch button.active { background: #25272b; color: #fff; border-color: #25272b; box-shadow: none; }
body[data-appearance] .archive-summary-grid article { background: var(--surface); border-radius: var(--radius); }
body[data-appearance] .archive-summary-grid article::after { display: none; }
body[data-appearance] .archive-table th { color: var(--text); background: var(--surface-2); border-bottom: 1px solid var(--line); }
body[data-appearance] .archive-table tbody tr { background: var(--surface); }
body[data-appearance] .archive-table tbody tr:hover { background: var(--cyan-soft); }
body[data-appearance] :is(.payout-breakdown span, .mini, .monthly-employee-card, .active-range-note) { background: var(--surface); border-color: var(--line); }
body[data-appearance] .monthly-employee-card > header { background: var(--surface-2); }
body[data-appearance] .total-payout > div:first-child > strong { color: var(--text); }
body[data-appearance] .payout-amount, body[data-appearance] .month-work-row > div:last-child strong { color: var(--cyan); }
body[data-appearance] .daily-fact { background: var(--surface); }
body[data-appearance] .daily-fact::after { display: none; }
body[data-appearance] .fact-icon { background: var(--cyan-soft); color: var(--cyan); box-shadow: none; }
body[data-appearance] .bottom-nav, body[data-appearance="light"] .bottom-nav {
  background: #26292d; border: 0; border-radius: 999px; box-shadow: 0 16px 35px rgba(26,28,32,.23);
  width: min(610px, calc(100% - 28px));
}
body[data-appearance] .nav-item { color: #c1c2c3; border-radius: 999px; }
body[data-appearance] .nav-item.active { color: #fff; background: #45484e; }
body[data-appearance] .nav-item.active .nav-icon { color: #fff; }
body[data-appearance] .auth-card::before { display: none; }
body[data-appearance] .auth-shell { background: radial-gradient(circle at 75% 22%, var(--cyan-soft), transparent 42%); }
body[data-appearance] .auth-controls { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 22px; }
body[data-appearance] .auth-logo h1 { font-family: inherit; }
body[data-appearance] .modal-head { background: var(--surface); }
body[data-appearance] .toast { background: var(--surface); color: var(--text); border-radius: 18px; }
body[data-appearance] .language-setting { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px; }
body[data-language="en"] :is(.record-cell, .shift-target, .contact-link) { text-align: left; }
body[data-language="en"] :is(.contact-email, .record-cell strong, .ltr) { direction: ltr; }
body[data-language="en"] .archive-table { direction: ltr; }
body[data-language="en"] :is(.archive-table th, .archive-table .time-cell, .account-option, .outside-range-note, .theme-option) { text-align: left; }
body[data-language="en"] .jalali-picker { direction: ltr; }
@media (max-width: 620px) {
  body[data-appearance] .app-shell { padding: 0 15px 112px; }
  body[data-appearance] .topbar { min-height: 75px; }
  body[data-appearance] .topbar-actions { gap: 5px; }
  body[data-appearance] .language-toggle { min-height: 39px; padding: 0 9px; font-size: 10px; }
  body[data-appearance="light"] .page-head:has(+ .dashboard-main) { min-height: 175px; padding: 22px; align-items: flex-start; }
  body[data-appearance="light"] .page-head:has(+ .dashboard-main) .actions { width: 100%; }
  body[data-appearance] .clock-panel { padding: 24px 18px; gap: 10px; }
  body[data-appearance] .punch-button { min-height: 78px; }
  body[data-appearance] .work-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  body[data-appearance] .work-summary-card { min-height: 140px; padding: 15px; }
  body[data-appearance] .work-summary-card > strong { font-size: clamp(15px, 3.8vw, 20px); }
  body[data-appearance] .bottom-nav { overflow-x: auto; justify-content: space-around; scrollbar-width: none; }
  body[data-appearance] .bottom-nav::-webkit-scrollbar { display: none; }
  body[data-appearance] .nav-item { min-width: 0; flex: 1 0 60px; padding: 9px 3px; font-size: 9px; }
  body[data-appearance] .appearance-setting { align-items: stretch; }
  body[data-language="en"] .record-cell { text-align: right; }
}

/* 3.4 floating navigation and assigned work */
body[data-appearance] .topbar { position: sticky; top: 0; z-index: 42; padding-inline: 9px; border-radius: 0 0 24px 24px; backdrop-filter: blur(20px); }
body[data-appearance="light"] .topbar { background: rgba(250,249,248,.89); box-shadow: 0 10px 25px rgba(32,33,36,.045); }
body[data-appearance="dark"] .topbar { background: rgba(23,25,30,.89); box-shadow: 0 10px 25px rgba(0,0,0,.1); }
body[data-appearance] .team-shortcut {
  display: grid; place-items: center; gap: 2px; flex: 0 0 auto;
  width: 62px; min-height: 54px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface); color: var(--text); box-shadow: 0 8px 21px rgba(20,24,27,.1);
  cursor: pointer; font-size: 20px; transition: transform .2s ease, box-shadow .2s ease;
}
body[data-appearance] .team-shortcut span { font-size: 9px; font-weight: 700; }
body[data-appearance] .team-shortcut.active { color: var(--cyan); background: var(--cyan-soft); }
body[data-appearance] :is(.btn, .nav-item, .segment, .team-shortcut, .language-toggle, .appearance-toggle, .contact-link) { transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
body[data-appearance] :is(.btn, .segment, .team-shortcut, .language-toggle, .appearance-toggle):hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(25,27,31,.13); }
body[data-appearance] :is(.btn, .segment, .team-shortcut, .language-toggle, .appearance-toggle):active { transform: translateY(0) scale(.97); }
body[data-appearance] .bottom-nav { box-shadow: 0 20px 45px rgba(18,20,24,.31); }
body[data-appearance] .floating-segments {
  width: fit-content; max-width: 100%; display: flex; gap: 6px; padding: 6px;
  margin: 20px 0 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); box-shadow: 0 11px 30px rgba(21,24,28,.095);
  overflow-x: auto; scrollbar-width: none;
}
body[data-appearance] .floating-segments::-webkit-scrollbar { display: none; }
body[data-appearance] .segment {
  min-height: 43px; padding: 0 19px; white-space: nowrap; border: 0;
  border-radius: 999px; color: var(--muted); background: transparent;
  cursor: pointer; font-size: 12px; font-weight: 700;
}
body[data-appearance] .segment.active { color: #fff; background: #282b31; box-shadow: 0 7px 18px rgba(25,27,31,.22); }
body[data-appearance] .segment span { opacity: .75; font-size: 10px; }
body[data-appearance] .work-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; }
body[data-appearance] .work-person-filter { min-width: min(240px,100%); }
body[data-appearance] .work-segments { margin: 0; }
body[data-appearance] .work-list { display: grid; gap: 14px; grid-template-columns: repeat(2,minmax(0,1fr)); }
body[data-appearance] .work-item { padding: 22px; overflow-wrap: anywhere; }
body[data-appearance] .work-item.is-done { opacity: .75; }
body[data-appearance] .work-item-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 19px; color: var(--muted); font-size: 11px; }
body[data-appearance] .work-item-kind { padding: 7px 11px; border-radius: 999px; background: var(--cyan-soft); color: var(--cyan); font-weight: 800; }
body[data-appearance] .work-item h2 { font-size: 18px; line-height: 1.6; margin-bottom: 8px; }
body[data-appearance] .work-description { color: var(--muted); font-size: 12px; line-height: 2; white-space: pre-wrap; }
body[data-appearance] .work-deadline { color: var(--warning); font-size: 11px; margin: 12px 0; }
body[data-appearance] .work-item-actions { display: flex; flex-wrap: wrap; gap: 9px; padding-top: 15px; border-top: 1px solid var(--line); }
body[data-appearance] .work-empty { grid-column: 1 / -1; text-align: center; padding: 46px 16px; color: var(--muted); }
@media (max-width: 720px) { body[data-appearance] .work-list { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  body[data-appearance] .team-shortcut { width: 45px; min-height: 43px; font-size: 16px; border-radius: 14px; }
  body[data-appearance] .team-shortcut span { font-size: 7px; }
  body[data-appearance] .topbar .brand { gap: 7px; }
  body[data-appearance] .floating-segments { width: 100%; }
  body[data-appearance] .segment { flex: 1; min-width: max-content; padding-inline: 10px; font-size: 10px; }
  body[data-appearance] .work-toolbar { display: grid; }
  body[data-appearance] .work-person-filter { width: 100%; }
}
@media (max-width: 385px) { body[data-appearance] .brand-name { display: none; } }

/* Paradise 3.5 — colorful clay surfaces and floating liquid-glass navigation. */
body[data-appearance="light"] {
  --bg:#f5f1ff; --surface:#fffafd; --surface-2:#f1eafe; --surface-3:#e6defb;
  --cyan:#6551cf; --cyan-soft:rgba(101,81,207,.12); --purple:#b65ed7; --purple-soft:rgba(182,94,215,.14);
  --lime:#147f6e; --warning:#a35d17; --danger:#c33d6b; --text:#282344; --muted:#625d7e;
  --line:rgba(94,76,158,.17); --shadow:9px 14px 26px rgba(94,71,157,.14),-7px -7px 20px rgba(255,255,255,.9);
  background:radial-gradient(circle at 5% 5%,#ffd8e9,transparent 34%),radial-gradient(circle at 94% 30%,#c8e6ff,transparent 40%),#f5f1ff;
}
body[data-appearance="light"][data-theme] { background:radial-gradient(circle at 5% 5%,#ffd8e9,transparent 34%),radial-gradient(circle at 94% 30%,#c8e6ff,transparent 40%),#f5f1ff; }
body[data-appearance="dark"] {
  --bg:#17162d; --surface:#28243f; --surface-2:#34304f; --surface-3:#403a5d;
  --cyan:#ad9dff; --cyan-soft:rgba(173,157,255,.16); --purple:#f2a5df; --purple-soft:rgba(242,165,223,.14);
  --lime:#8ae5cb; --warning:#ffcd84; --danger:#ff9db3; --text:#faf8ff; --muted:#c5bfda;
  --line:rgba(218,206,255,.19); --shadow:10px 15px 28px rgba(4,3,19,.38),-5px -5px 18px rgba(130,105,176,.1);
  background:radial-gradient(circle at 5% 4%,#442b55,transparent 37%),radial-gradient(circle at 96% 30%,#283f65,transparent 44%),#17162d;
}
body[data-appearance="dark"][data-theme] { background:radial-gradient(circle at 5% 4%,#442b55,transparent 37%),radial-gradient(circle at 96% 30%,#283f65,transparent 44%),#17162d; }
body[data-appearance] .app-shell { padding-bottom:calc(145px + env(safe-area-inset-bottom)); }
body[data-appearance] .topbar {
  top:8px;margin-top:8px;padding:10px 14px;min-height:76px;border-radius:24px;
  border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.67);
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 13px 30px rgba(79,55,139,.13),inset 0 2px 2px rgba(255,255,255,.9);
}
body[data-appearance="dark"] .topbar { background:rgba(44,40,72,.74);border-color:rgba(255,255,255,.19);box-shadow:0 14px 30px rgba(5,4,24,.34),inset 0 1px 1px rgba(255,255,255,.14); }
body[data-appearance] .team-shortcut { border:1px solid rgba(255,255,255,.75);border-radius:17px;color:#513ba7;background:linear-gradient(140deg,#eadcff,#cce2ff);box-shadow:5px 7px 14px rgba(91,73,160,.2),inset 2px 2px 3px #fff; }
body[data-appearance="dark"] .team-shortcut { color:#f1ddff;background:linear-gradient(140deg,#594670,#3c476a);border-color:var(--line); }
body[data-appearance] .team-shortcut.active { color:#fff;background:linear-gradient(140deg,#7763ea,#bd70d7); }
body[data-appearance] :is(.panel,.stat-card,.work-summary-card,.auth-card,.modal) {
  border:1px solid rgba(255,255,255,.9);border-radius:27px;
  background:linear-gradient(145deg,#fff,#f6f1ff);box-shadow:var(--shadow),inset 2px 2px 3px rgba(255,255,255,.96),inset -2px -3px 6px rgba(170,150,222,.11);
}
body[data-appearance="dark"] :is(.panel,.stat-card,.work-summary-card,.auth-card,.modal) { border-color:var(--line);background:linear-gradient(145deg,#322c50,#24223e);box-shadow:var(--shadow),inset 1px 2px 2px rgba(255,255,255,.1); }
body[data-appearance] :is(.stat-card,.work-summary-card):nth-child(4n+1) { background:linear-gradient(145deg,#e0f6ff,#e2e5ff); }
body[data-appearance] :is(.stat-card,.work-summary-card):nth-child(4n+2) { background:linear-gradient(145deg,#ffe4f3,#eee2ff); }
body[data-appearance] :is(.stat-card,.work-summary-card):nth-child(4n+3) { background:linear-gradient(145deg,#def9eb,#ddf5f7); }
body[data-appearance] :is(.stat-card,.work-summary-card):nth-child(4n) { background:linear-gradient(145deg,#fff0d8,#ffe1e9); }
body[data-appearance="dark"] :is(.stat-card,.work-summary-card):nth-child(4n+1) { background:linear-gradient(145deg,#344967,#30335a); }
body[data-appearance="dark"] :is(.stat-card,.work-summary-card):nth-child(4n+2) { background:linear-gradient(145deg,#593851,#3b3058); }
body[data-appearance="dark"] :is(.stat-card,.work-summary-card):nth-child(4n+3) { background:linear-gradient(145deg,#285451,#303f55); }
body[data-appearance="dark"] :is(.stat-card,.work-summary-card):nth-child(4n) { background:linear-gradient(145deg,#654249,#483651); }
body[data-appearance] :is(.stat-icon,.work-summary-icon) { color:#fff!important;background:linear-gradient(135deg,#7664e8,#af75e1)!important;box-shadow:4px 6px 12px rgba(94,70,164,.23),inset 1px 2px 2px rgba(255,255,255,.46); }
body[data-appearance] :is(.stat-card,.work-summary-card):nth-child(4n+1) :is(.stat-icon,.work-summary-icon) { background:linear-gradient(135deg,#379ee7,#7775e9)!important; }
body[data-appearance] :is(.stat-card,.work-summary-card):nth-child(4n+2) :is(.stat-icon,.work-summary-icon) { background:linear-gradient(135deg,#ea70ad,#a16fe1)!important; }
body[data-appearance] :is(.stat-card,.work-summary-card):nth-child(4n+3) :is(.stat-icon,.work-summary-icon) { background:linear-gradient(135deg,#27af95,#63bcca)!important; }
body[data-appearance] :is(.stat-card,.work-summary-card):nth-child(4n) :is(.stat-icon,.work-summary-icon) { background:linear-gradient(135deg,#ffac66,#e66a96)!important; }
body[data-appearance] .work-summary-card > strong { color:var(--text); }
body[data-appearance] .page-head:has(+ .dashboard-main) { border-radius:30px;padding:27px 31px;min-height:175px;color:#28234b;background:radial-gradient(circle at 86% 7%,rgba(255,255,255,.7),transparent 38%),linear-gradient(115deg,#d8c4ff,#ffc8dc 57%,#ffe5c3);box-shadow:11px 15px 27px rgba(125,89,171,.2),inset 2px 3px 3px rgba(255,255,255,.73); }
body[data-appearance="dark"] .page-head:has(+ .dashboard-main) { color:#fff;background:linear-gradient(115deg,#594494,#90588b 58%,#a17267); }
body[data-appearance] .page-head:has(+ .dashboard-main) :is(.eyebrow,.subtitle) { color:inherit;opacity:.83; }
body[data-appearance] :is(.btn,.appearance-toggle,.language-toggle,.segment,.range-button,.period-switch button) { border-radius:17px;border:1px solid rgba(255,255,255,.85);background:linear-gradient(145deg,#fff,#eee9ff);color:var(--text);box-shadow:4px 6px 12px rgba(102,78,162,.13),inset 1px 2px 2px rgba(255,255,255,.95); }
body[data-appearance="dark"] :is(.btn,.appearance-toggle,.language-toggle,.segment,.range-button,.period-switch button) { border-color:var(--line);background:linear-gradient(145deg,#494363,#322e4e);box-shadow:4px 6px 12px rgba(4,3,18,.24),inset 1px 1px 2px rgba(255,255,255,.12); }
body[data-appearance] :is(.btn-primary,.segment.active,.range-button.active,.period-switch button.active) { color:#fff;border-color:rgba(255,255,255,.68);background:linear-gradient(135deg,#6a5ce6,#a05ed9 62%,#d273b9);box-shadow:5px 9px 18px rgba(106,70,199,.3),inset 1px 2px 3px rgba(255,255,255,.42); }
body[data-appearance] .btn-danger { color:#a52b5a;background:linear-gradient(145deg,#fff0f5,#ffe1ea); }
body[data-appearance="dark"] .btn-danger { color:#ffc0d1;background:linear-gradient(145deg,#623c55,#4b324d); }
body[data-appearance] .bottom-nav,body[data-appearance="light"] .bottom-nav {
  bottom:max(18px,env(safe-area-inset-bottom));width:min(620px,calc(100% - 28px));min-height:79px;
  display:flex;gap:4px;padding:8px;overflow:visible;justify-content:space-around;
  border:1px solid rgba(255,255,255,.86);border-radius:27px;
  background:linear-gradient(135deg,rgba(255,255,255,.76),rgba(222,210,255,.62));
  -webkit-backdrop-filter:blur(25px) saturate(170%);backdrop-filter:blur(25px) saturate(170%);
  box-shadow:0 19px 42px rgba(89,63,155,.25),inset 0 2px 1px rgba(255,255,255,.95),inset 0 -2px 3px rgba(126,109,190,.12);
}
body[data-appearance="dark"] .bottom-nav { border-color:rgba(255,255,255,.23);background:linear-gradient(135deg,rgba(79,69,117,.77),rgba(49,46,83,.73));box-shadow:0 19px 40px rgba(5,4,20,.46),inset 0 2px 1px rgba(255,255,255,.16); }
body[data-appearance] .nav-item { display:grid;justify-items:center;align-content:center;gap:2px;flex:1 1 0;min-width:0;min-height:62px;padding:5px 3px;border:1px solid transparent;border-radius:20px;color:var(--text);background:transparent;font-size:10px;font-weight:800;white-space:nowrap; }
body[data-appearance] .nav-item .nav-icon { display:grid;place-items:center;width:30px;height:27px;margin:0;font-size:21px;line-height:1;color:#6a60aa;filter:none; }
body[data-appearance="dark"] .nav-item .nav-icon { color:#d1c3ff; }
body[data-appearance] .nav-item.active { color:#fff;border:1px solid rgba(255,255,255,.68);border-radius:20px;background:linear-gradient(145deg,#7465e9,#bc72db);transform:translateY(-13px);box-shadow:5px 12px 18px rgba(86,57,166,.35),inset 2px 2px 3px rgba(255,255,255,.43),inset -3px -4px 6px rgba(61,42,147,.22); }
body[data-appearance] .nav-item.active .nav-icon { color:#fff;filter:none; }
body[data-appearance] .nav-item:hover { transform:translateY(-5px); }
body[data-appearance] .nav-item.active:hover { transform:translateY(-15px); }
body[data-appearance] :is(.nav-item,.team-shortcut,.btn,.segment):focus-visible { outline:3px solid #f979b6;outline-offset:3px; }
@media (max-width:620px) { body[data-appearance] .app-shell { padding:0 13px calc(145px + env(safe-area-inset-bottom)); } body[data-appearance] .topbar { padding:9px;gap:5px; } body[data-appearance] .bottom-nav { overflow:visible; } body[data-appearance] .nav-item { flex:1 1 0;min-width:0;font-size:clamp(8px,2.3vw,10px); } body[data-appearance] .page-head:has(+ .dashboard-main) { padding:22px;min-height:165px; } }
@media (prefers-reduced-motion:reduce) { body[data-appearance] :is(.nav-item,.btn,.segment,.team-shortcut) { transition:none; } }
.pin-card { text-align:center;max-width:410px;margin:auto; }
.pin-input { text-align:center;letter-spacing:.8em;font-size:25px;font-weight:800;max-width:300px;margin:auto; }
.pin-password { margin-top:14px; }

/* Shift-specific pay controls */
.shift-choice { width:100%; padding:16px; border:1px solid var(--line); border-radius:18px; background:var(--surface); text-align:start; }
.shift-choice-label { display:flex; align-items:center; gap:12px; cursor:pointer; line-height:1.7; }
.shift-choice-label input { width:22px; height:22px; flex-shrink:0; accent-color:var(--purple); }
.shift-choice .hint { margin:10px 0; line-height:1.8; }
.shift-rate { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin:8px 0 0; }
.saved-shift-rate { display:block; font-size:12px; line-height:1.8; }
.punch-wrap .shift-choice { margin-bottom:18px; }

/* Offline queue and printable salary preview */
.offline-panel { margin:0 0 20px; border-color:var(--warning); }
.outbox-entry { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }
.outbox-entry span,.outbox-entry small { display:block; margin-top:6px; font-size:12px; line-height:1.8; }
.outbox-entry small { color:var(--warning); }
.outbox-data { direction:ltr; text-align:left; white-space:pre-wrap; word-break:break-word; font-size:12px; }
.payslip { margin-top:20px; }
.payslip header { text-align:center; padding-bottom:16px; border-bottom:1px solid var(--line); }
.payslip .report-summary { display:grid; gap:10px; margin:20px 0; }
.payslip .summary-line { display:flex; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--line); border-radius:10px; }
.payslip h3 { margin:24px 0 12px; }
.report-table-wrap { overflow:auto; }
.payslip table { width:100%; border-collapse:collapse; font-size:12px; }
.payslip td,.payslip th { white-space:nowrap; padding:10px; border:1px solid var(--line); text-align:start; }
.payslip footer { color:var(--muted); font-size:12px; line-height:1.9; margin-top:20px; }
.report-warning { padding:12px; border:1px solid var(--warning); border-radius:10px; line-height:1.8; }
.queue-details { margin:16px 0; }
.queue-details > div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding:12px 0; border-bottom:1px solid var(--line); }
.queue-details dt { color:var(--muted); }
.queue-details dd { margin:0; overflow-wrap:anywhere; }
.offline-panel .panel-head p { max-width:48rem; line-height:1.9; }
.outbox-entry > div { min-width:0; }
.outbox-entry .btn { flex-shrink:0; max-width:130px; }
.queue-details + .report-warning { overflow-wrap:anywhere; }
@media(max-width:620px) { .offline-panel .actions { display:grid; grid-template-columns:1fr; } .outbox-entry { align-items:flex-start; } }