:root {
  --ink: #001840;
  --gold: #b07818;
  --paper: #f3f1ec;
  --line: #e1e6ef;
  --muted: #5c6b80;
  --late: #9f2d2d;
  --late-bg: #f8d6d2;
  --ok: #1b6b43;
  --ok-bg: #d8f3e3;
  --leave: #8a5a12;
  --leave-bg: #fde7c2;
  --soft: #e7eef8;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif; }
a { color: inherit; }
h1, h2 { margin: 0; font-weight: 600; letter-spacing: -0.03em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.15rem; }
button, input, select { font: inherit; }
button, a, select, label { cursor: pointer; }
svg { width: 1.05rem; height: 1.05rem; display: inline-block; vertical-align: middle; flex: none; }

.side { position: fixed; top: 0; left: 0; bottom: 0; width: 256px; max-width: 256px; overflow: auto; background: var(--ink); color: #fff; display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.1); z-index: 30; }
.brand-wrap { padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.logo-card { background: #fff; border-radius: 6px; padding: 10px 12px; overflow: hidden; }
.logo-card img { display: block; height: 36px; width: auto; max-width: 100%; }
.role { margin: 12px 0 0; color: var(--gold); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.side nav { padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; }
.side a { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: rgba(255,255,255,.65); text-decoration: none; border-radius: 8px; padding: 8px 12px; font-size: 14px; font-weight: 500; }
.side a span { display: inline-flex; flex-direction: row; align-items: center; gap: 10px; white-space: nowrap; }
.side a svg { width: 16px; height: 16px; }
.side a.on { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 2px 0 0 var(--gold); }
.side a:hover { background: rgba(255,255,255,.05); color: #fff; }
.side em, .count { background: var(--gold); color: var(--ink); border-radius: 99px; font-style: normal; font-size: 12px; min-width: 1.25rem; text-align: center; padding: 0 6px; }
.count { background: var(--late); color: #fff; margin-left: 6px; }
.wait-note { margin: auto 12px 12px; color: rgba(255,255,255,.55); font-size: 12px; line-height: 1.5; padding: 0 12px; }
.side-user { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid rgba(255,255,255,.1); padding: 12px 16px 12px 20px; }
.side-user strong { display: block; font-size: 14px; font-weight: 500; }
.side-user span { color: rgba(255,255,255,.45); font-size: 11px; }
.side-user button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--gold); font-size: 12px; font-weight: 500; }
.main { margin-left: 256px; min-width: 0; min-height: 100vh; background: var(--paper); }
.top { position: sticky; top: 0; z-index: 40; display: flex; justify-content: flex-end; background: rgba(247,246,243,.95); border-bottom: 1px solid var(--line); padding: 10px 32px; backdrop-filter: blur(8px); }
.top-mobile, .mobile-nav { display: none; }
.bell { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; color: var(--ink); text-decoration: none; }
.bell svg { width: 24px; height: 24px; }
.bell i { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 16px; border-radius: 99px; background: #e10600; color: #fff; font-style: normal; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; }
.content { padding: 32px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; }
.kicker, .eyebrow { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.kicker { color: var(--gold); }
.eyebrow, .hint, .muted, small { color: var(--muted); }
.hint { margin: 6px 0 0; font-size: 14px; max-width: 40rem; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 1px 2px rgba(0,24,64,.04); margin-top: 16px; }
.pad { padding: 16px; }
.clip { overflow: hidden; }
.pad-head { padding: 16px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.stats, .actions, .doc-grid, .holiday-grid, .minis { display: grid; gap: 12px; }
.stats, .actions, .doc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.holiday-grid, .minis { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
.stat, .action, .doc-link { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 16px; text-decoration: none; box-shadow: 0 1px 2px rgba(0,24,64,.04); }
.stat:hover, .action:hover, .doc-link:hover { border-color: rgba(0,24,64,.2); }
.stat-copy { min-width: 0; flex: 1; }
.stat-copy span, .stat-copy small, .action small { display: block; color: var(--muted); font-size: 14px; }
.stat strong { display: block; margin-top: 2px; font-size: 1.5rem; letter-spacing: -0.03em; }
.stat strong.bad, .bad { color: var(--late); }
.stat strong.leave { color: var(--leave); }
.stat svg:last-child, .action svg:last-child, .doc-link svg:last-child { color: var(--muted); flex: none; }
.bubble { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; flex: none; }
.bubble.sq { border-radius: 12px; }
.bubble.ok, .pill.ok { background: var(--ok-bg); color: var(--ok); }
.bubble.bad { background: var(--late-bg); color: var(--late); }
.bubble.gold, .date-block { background: #f8efd8; color: var(--gold); }
.bubble.teal, .pill.teal { background: var(--soft); color: var(--ink); }
.bubble.leave, .pill.leave { background: var(--leave-bg); color: var(--leave); }
.bubble.purple, .bubble.photo { background: #efe7fb; color: #5b4dff; }
.bubble.blue { background: #e7eefc; color: #3b5ccc; }
.bubble.identity { background: var(--soft); color: var(--ink); }
.bubble.bank { background: #fde8e4; color: var(--late); }
.section { margin: 22px 0 12px; }
.featured, .holiday-card { display: flex; align-items: center; gap: 16px; background: #fffaf3; border: 1px solid #ead7b0; border-radius: 8px; padding: 16px; }
.holiday-card { background: #fff; }
.holiday-card.passed { background: rgba(255,255,255,.7); color: var(--muted); }
.date-block { width: 64px; height: 64px; border-radius: 12px; display: grid; place-items: center; text-align: center; color: var(--ink); flex: none; }
.date-block b { display: block; font-size: 20px; }
.date-block small { display: block; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); }
.featured em { display: block; color: var(--gold); font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.featured strong, .holiday-card strong { display: block; margin-top: 4px; }
.away { margin-left: auto; color: var(--gold); }
.doc-link em { display: block; margin-top: 2px; font-style: normal; font-size: 12px; font-weight: 600; }
.doc-link em.ok { color: var(--ok); }
.doc-link em.bad { color: var(--late); }
.doc-link em.leave { color: var(--leave); }
.doc-link em.muted { color: var(--muted); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 16px; align-items: start; margin-top: 16px; }
.stack-lg { display: grid; gap: 16px; }
.stack-lg .card { margin-top: 0; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
th { background: var(--paper); color: var(--muted); font-weight: 500; font-size: 12px; }
th, td { padding: 12px 16px; border-top: 1px solid var(--line); vertical-align: middle; }
.who { display: flex; align-items: center; gap: 12px; }
.who small, .who strong { display: block; }
.av { width: 32px; height: 32px; border-radius: 99px; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 600; background: var(--soft); }
.av.b { background: var(--paper); }
.av.c { background: #f4efe6; }
.more { color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.pill { display: inline-flex; border-radius: 99px; padding: 2px 8px; font-size: 12px; font-weight: 600; background: var(--leave-bg); color: var(--leave); }
.pill.approved, .pill.accepted { background: var(--ok-bg); color: var(--ok); }
.pill.rejected { background: var(--late-bg); color: var(--late); }
.request { border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-top: 12px; }
.request p { margin: 6px 0; font-size: 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; border: 0; border-radius: 6px; background: var(--ink); color: #fff; padding: 0 14px; font-size: 14px; font-weight: 500; text-decoration: none; }
.btn:hover { background: #16305f; }
.btn.danger { background: var(--late); }
.field, select { height: 36px; width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 0 12px; background: #fff; font-size: 14px; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.25 8 10.25 12 6.25' stroke='%23001840' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 1rem; padding-right: 2.25rem; }
.tiny { width: 8rem; }
.label { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.stack { display: grid; gap: 12px; margin-top: 16px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.chip { text-decoration: none; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 14px; }
.chip.on { background: var(--ink); color: #fff; }
.table-wrap { overflow-x: auto; }
.inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.files { display: flex; gap: 8px; flex-wrap: wrap; }
.file { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; text-decoration: none; background: #fff; }
.doc { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.line { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.note { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); text-decoration: none; }
.note.unread strong { font-weight: 700; }
.flash { padding: 10px 12px; border-radius: 6px; background: var(--ok-bg); margin-bottom: 12px; }
.flash.bad { background: var(--late-bg); color: var(--late); }
.gold { color: var(--gold); font-weight: 600; }
.sub td { color: var(--muted); font-size: 12px; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; font-weight: 500; }
.choices label { display: flex; gap: 6px; align-items: center; }
.slip .net { font-size: 20px; }
.money { list-style: none; padding: 0; }
.money li { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding: 8px 0; }
.pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.pairs dt { color: var(--muted); font-size: 12px; }
.pairs dd { margin: 0; }
.filters { margin-top: 8px; max-width: 16rem; }

.login-split { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; background: #fff; }
.login-hero { background: var(--ink); color: #fff; padding: 40px 48px; display: flex; flex-direction: column; justify-content: space-between; }
.login-hero .logo-card { width: fit-content; padding: 10px 12px; }
.login-hero .logo-card img { height: 56px; }
.login-hero h1 { color: #fff; font-size: 2.25rem; line-height: 1.15; margin: 12px 0 0; max-width: 16ch; }
.login-hero p { color: rgba(255,255,255,.7); max-width: 28rem; margin: 16px 0 0; font-size: 14px; line-height: 1.6; }
.kicker.light { color: var(--gold); }
.fine { color: rgba(255,255,255,.5) !important; font-size: 12px; margin: 0 !important; }
.login-form { display: grid; place-items: center; padding: 48px 24px; background: var(--paper); }
.login-form > div { width: 100%; max-width: 24rem; }
.login-form h1 { font-size: 1.875rem; margin-top: 4px; }
.login-form .hint { margin: 4px 0 0; }
.login-stack { gap: 16px; margin-top: 24px; }
.btn.wide { width: 100%; }
.logo-mobile { display: none; height: 56px; width: auto; margin-bottom: 24px; }
.field:focus { outline: none; border-color: rgba(0,24,64,.4); box-shadow: 0 0 0 3px rgba(0,24,64,.12); }

@media (max-width: 1100px) {
  .stats, .actions, .doc-grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .side, .top { display: none; }
  .main { margin-left: 0; }
  .top-mobile { display: flex; align-items: center; justify-content: space-between; background: var(--ink); padding: 12px 16px; }
  .top-mobile .logo-card img { height: 28px; }
  .bell.light { color: #fff; }
  .mobile-nav { display: flex; gap: 6px; overflow: auto; background: var(--ink); padding: 0 12px 12px; }
  .mobile-nav a { color: rgba(255,255,255,.7); text-decoration: none; white-space: nowrap; padding: 6px 8px; border-radius: 6px; font-size: 14px; }
  .mobile-nav a.on { background: rgba(255,255,255,.1); color: #fff; }
  .content { padding: 16px; }
  .login-split { grid-template-columns: 1fr; }
  .login-hero { display: none; }
  .logo-mobile { display: block; }
  .stats, .actions, .doc-grid, .pairs { grid-template-columns: 1fr; }
  .cal-wrap { grid-template-columns: 1fr; }
}

.month-row { display: grid; gap: 12px; margin-bottom: 20px; }
.month-row .year { width: auto; min-width: 8rem; }
.chips.square .chip { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 6px; }
.chip.on { border-color: var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.legend span { border-radius: 99px; padding: 4px 8px; font-size: 12px; font-weight: 600; }
.legend .ok { background: var(--ok-bg); color: var(--ok); }
.legend .bad { background: var(--late-bg); color: var(--late); }
.legend .leave { background: var(--leave-bg); color: var(--leave); }
.legend .solid-ok { background: var(--ok); color: #fff; }
.legend .solid-bad { background: var(--late); color: #fff; }
.legend .holiday { background: #ffd8c2; color: #9a3412; }
.legend .weekend { background: #ece6dc; color: var(--muted); }
.sheet { max-height: calc(100vh - 16rem); overflow: auto; margin-top: 0; padding: 0; }
.sheet table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; }
.sheet th, .sheet td { padding: 0; background: transparent; border-top: 1px solid var(--line); vertical-align: top; }
.sheet thead th { position: sticky; top: 0; z-index: 20; background: var(--ink); color: #fff; border-top: 0; border-left: 1px solid rgba(255,255,255,.1); min-width: 7.5rem; padding: 12px 8px; text-align: center; font-size: 14px; font-weight: 600; }
.sheet thead th.sticky-date, .sheet tbody th.sticky-date { position: sticky; left: 0; min-width: 7.5rem; text-align: left; }
.sheet thead th.sticky-date { z-index: 30; padding: 12px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; box-shadow: 4px 0 8px rgba(0,24,64,.12); }
.sheet tbody th.sticky-date { z-index: 10; background: #fff; padding: 8px 12px; font-size: 14px; font-weight: 600; box-shadow: 4px 0 8px rgba(0,24,64,.06); }
.sheet tbody th.sticky-date span, .sheet tbody th.sticky-date small { display: block; white-space: nowrap; }
.sheet tbody th.sticky-date small { font-size: 12px; font-weight: 500; opacity: .7; }
.sheet tbody th.holiday { background: #ffd8c2; color: #9a3412; }
.sheet tbody th.weekend { background: #ece6dc; color: var(--muted); }
.sheet tbody th.future { color: var(--muted); }
.sheet tbody th.today { box-shadow: inset 0 0 0 2px rgba(0,24,64,.5), 4px 0 8px rgba(0,24,64,.06); }
.sheet td { border-left: 1px solid var(--line); padding: 4px; min-width: 7.5rem; }
.mark { display: flex; min-height: 48px; flex-direction: column; border-radius: 8px; background: #fff; color: var(--muted); text-align: center; font-size: 12px; font-weight: 600; }
.mark.ok { background: var(--ok-bg); color: var(--ok); }
.mark.bad { background: var(--late-bg); color: var(--late); }
.mark.leave { background: var(--leave-bg); color: var(--leave); }
.mark.holiday { background: #ffd8c2; color: #9a3412; }
.mark.weekend { background: #ece6dc; color: var(--muted); }
.mark a, .mark > span { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 48px; padding: 4px; overflow: hidden; text-decoration: none; }
.paid-row { display: flex; margin-top: 4px; overflow: hidden; border: 1px solid rgba(0,24,64,.2); border-radius: 6px; }
.paid-row button { flex: 1; border: 0; background: #fff; color: var(--ink); padding: 4px 2px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.paid-row button.on { background: var(--ok); color: #fff; }
.paid-row button.off { background: var(--late); color: #fff; }
.salary-row th, .salary-row td { background: var(--gold) !important; border-color: rgba(176,120,24,.45) !important; color: var(--ink); }
.salary-row th.sticky-date { padding: 12px !important; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.pay-link { display: block; padding: 4px; color: var(--ink); text-align: center; text-decoration: none; }
.pay-link b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.pay-link small { display: block; margin-top: 4px; color: rgba(0,24,64,.7); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pay-edit .field { height: 32px; text-align: center; }
.salary-row details { margin-top: 4px; text-align: left; }
.salary-row summary { display: flex; align-items: center; justify-content: center; gap: 4px; color: rgba(0,24,64,.7); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; list-style: none; cursor: pointer; }
.salary-row summary::-webkit-details-marker { display: none; }
.salary-row summary svg { width: 12px; height: 12px; }
.salary-row details[open] summary svg { transform: rotate(90deg); }
.salary-row dl { margin: 6px 0 0; padding: 8px; border-radius: 8px; background: #fff; color: var(--ink); }
.salary-row dl div { margin-top: 4px; padding: 6px 8px; border-radius: 6px; }
.salary-row dt { font-size: 10px; font-weight: 500; }
.salary-row dd, .salary-row dd p { margin: 0; }
.salary-row dd { font-size: 14px; font-weight: 600; }
.salary-row small { display: block; color: var(--muted); font-size: 10px; font-weight: 500; }
.calc-present { background: var(--soft); }
.calc-paid { background: var(--ok-bg); color: var(--ok); }
.calc-unpaid { background: #f6f5f2; }
.calc-unpaid.on { background: var(--late-bg); color: var(--late); }
.calc-pay { background: #f8efd8; }
.calc-pay dd { font-size: 11px; font-weight: 500; line-height: 1.35; }
.calc-pay span { display: block; margin-top: 2px; font-weight: 600; }
.calc-pay .deduct { color: var(--late); }
.calc-pay .total { margin-top: 4px; padding-top: 4px; border-top: 1px solid #ead7b0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(0,24,64,.4); }
.dialog { width: min(24rem, 100%); padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 24px 60px rgba(0,24,64,.2); }
.dialog .field { height: 44px; margin-top: 6px; border-radius: 12px; }
.dialog .btn.wide { width: 100%; height: 44px; margin-top: 12px; border-radius: 12px; }
.dialog .label { margin-top: 20px; }
.mark-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mark-grid button { height: 40px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 14px; font-weight: 500; }
.mark-grid button:hover { background: #faf8f4; }
.close { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: 18px; text-decoration: none; }
.dialog .clear { width: 100%; margin-top: 16px; border: 0; background: transparent; color: var(--muted); font-size: 14px; }
.dialog .clear:hover { color: var(--late); }
.cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 16px; align-items: stretch; }
.cal, .summary { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(0,24,64,.04); }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-content: start; }
.cal-head { padding: 4px 0; color: var(--muted); font-size: 12px; font-weight: 600; text-align: center; }
.day { display: flex; min-height: 76px; flex-direction: column; padding: 6px; border-radius: 12px; background: #f6f5f2; color: var(--muted); }
.day-top { display: flex; align-items: flex-start; justify-content: space-between; }
.day b { font-size: 12px; }
.day svg { width: 14px; height: 14px; opacity: .8; }
.day .dot { width: 6px; height: 6px; margin-top: 4px; border-radius: 99px; background: var(--ok); }
.day span, .day small { display: block; overflow: hidden; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.day span { margin-top: auto; }
.day small { font-weight: 400; }
.day.ok { background: var(--ok-bg); color: var(--ok); }
.day.bad { background: var(--late-bg); color: var(--late); }
.day.leave { background: #fbf6ea; color: var(--leave); }
.day.purple { background: #f4eefe; color: #6d28d9; }
.day.is-today { box-shadow: inset 0 0 0 2px var(--gold); }
.summary h2 { font-size: 16px; }
.sum-box { display: flex; min-height: 180px; flex: 1; flex-direction: column; margin-top: 12px; padding: 12px; border-radius: 12px; }
.sum-box p { margin: 0; font-size: 14px; font-weight: 600; }
.sum-box.teal { border: 1px solid #c9d7ee; background: var(--soft); color: var(--ink); }
.sum-box.purple { border: 1px solid #e3d4f6; background: #f7f2fc; color: #6d28d9; }
.sum-box > strong { display: block; margin-top: 4px; font-size: 30px; letter-spacing: -.03em; }
.sum-box > span { display: block; margin-top: 4px; font-size: 14px; opacity: .8; }
.pair, .quotas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 12px; }
.pair > div, .quotas > div { padding: 8px 12px; border-radius: 8px; }
.pair em, .quotas em { display: block; font-size: 12px; font-style: normal; font-weight: 600; }
.pair b { display: block; font-size: 18px; }
.pair small { display: block; font-size: 12px; font-weight: 500; }
.office { border: 1px solid #b7e4cb; background: var(--ok-bg); color: var(--ok); }
.home, .q-casual { border: 1px solid #f0dfc0; background: #fbf6ea; color: var(--leave); }
.q-medical { border: 1px solid #f3c2bc; background: var(--late-bg); color: var(--late); }
.q-half { border: 1px solid #c9d7ee; background: var(--soft); color: var(--ink); }
.q-short { border: 1px solid #ddc8f3; background: #f4eefe; color: #6d28d9; }
.quotas b { display: block; font-size: 14px; }
.quotas b span { font-weight: 400; opacity: .7; }
@media (max-width: 1100px) {
  .cal-wrap, .roster-wrap { grid-template-columns: 1fr; }
}
.btn.secondary { background: var(--gold); color: #fff; }
.btn.secondary:hover { background: #8d6114; }
.pills .chip { border-radius: 999px; }
.activity { list-style: none; margin: 12px 0 0; padding: 0; }
.activity li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14px; }
.activity i.dot, .day .dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 99px; display: inline-block; }
.activity i.ok { background: var(--ok); }
.activity i.bad { background: var(--late); }
.activity i.teal { background: var(--ink); }
.activity i.gold { background: var(--gold); }
.activity span { display: flex; gap: 8px; }
.activity time { color: var(--muted); white-space: nowrap; }
.pill.holiday { background: #ffd8c2; color: #9a3412; }
.pill.solid-gold { background: var(--gold); color: #fff; }
.counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; }
.counts div { border-top: 1px solid rgba(0,24,64,.15); padding-top: 8px; }
.counts dt { color: var(--gold); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.counts dd { margin: 4px 0 0; font-size: 1.5rem; font-weight: 600; }
.toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin: 12px 0; }
.toolbar .grow { flex: 1; min-width: 12rem; }
.search { position: relative; flex: 1; min-width: 14rem; }
.search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search .field { padding-left: 36px; }
.icon-btn { display: inline-grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; }
.icon-btn.solid { background: var(--ink); color: #fff; border-color: var(--ink); }
.icon-btn.ink { background: var(--ink); color: #fff; }
.roster-wrap { display: grid; grid-template-columns: 22rem minmax(0, 1fr); gap: 16px; align-items: start; }
.roster ul { list-style: none; margin: 0; padding: 0; max-height: 70vh; overflow: auto; }
.roster li a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); text-decoration: none; }
.roster li a.on { background: var(--soft); }
.roster small, .roster b { display: block; }
.roster small.ok { color: var(--ok); }
.roster small.leave { color: var(--leave); }
.kind-list { display: grid; gap: 12px; margin-top: 16px; }
.kind { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; border: 1px solid var(--line); }
.kind.identity { background: var(--soft); border-color: #c5d4ee; }
.kind.pan { background: #fdf3df; border-color: #f0d7a4; }
.kind.photo { background: #e5f6ec; border-color: #b7e4cb; }
.kind.bank { background: #fdecea; border-color: #f3c2bc; }
.wait-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px; border-top: 1px solid var(--line); }
.warm-head { background: #fff8ec; border-bottom: 1px solid #ead7b0; padding: 12px 16px; }
.cool-head { background: #f4f6f8; border-bottom: 1px solid var(--line); padding: 12px 16px; }
.empty { margin: 0; padding: 16px; color: var(--muted); }
.guide { border: 1px solid #d9e4f5; background: #f4f7fc; border-radius: 16px; padding: 16px; }
.guide ul { margin: 8px 0 0; color: var(--muted); }
.stat.picked { box-shadow: inset 0 0 0 2px var(--ink); }
.salary-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.salary-stats article strong { display: block; margin-top: 8px; font-size: 1.5rem; }
.salary-stats article span { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }
.pay-cell { display: block; min-width: 6.5rem; padding: 8px; border-radius: 8px; text-align: center; text-decoration: none; }
.pay-cell b, .pay-cell small { display: block; }
.pay-cell.ok { background: var(--soft); color: var(--ink); }
.pay-cell.leave { background: #f8efd8; color: var(--gold); }
.pay-cell.bad { background: var(--late-bg); color: var(--late); }
.pay-cell.empty { color: var(--muted); }
.total-cell { background: var(--soft); color: var(--ink); text-align: right; padding: 12px !important; }
.total-cell b, .total-cell small { display: block; }
.year-total { background: var(--ink) !important; color: #fff; font-weight: 600; text-align: right; padding: 12px !important; }
.board-total th, .board-total td { background: var(--paper); font-weight: 600; text-align: center; padding: 12px !important; }
.pay-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.pay-cards article { border-radius: 16px; padding: 12px 16px; }
.pay-cards strong { display: block; margin-top: 4px; font-size: 1.8rem; }
.pay-cal { margin-top: 16px; }
.slip-note { display: flex; gap: 12px; margin-top: 16px; padding: 14px 16px; border: 1px solid #f0e2c4; border-radius: 16px; background: #fbf6ea; }
.slip-note span { display: block; color: var(--muted); }
.slip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.slip-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.slip-card.ready { border-color: #d7efe3; background: #f4fbf7; }
.slip-card h2 { font-size: 16px; }
.slip-card > strong { font-size: 1.7rem; }
.slip-card .btn { margin-top: auto; }
.club-list { list-style: none; margin: 16px 0 0; padding: 0; }
.club-list li { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.club-list li > div span { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }
.club-list form { margin: 0; flex: none; }
.toolbar .btn { flex: none; white-space: nowrap; }
.legend { margin: 16px 0 12px; }
.month-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.inbox { max-width: 48rem; }
.notices { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.notices a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); text-decoration: none; }
.notices li:first-child a { border-top: 0; }
.notices time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.text-btn { border: 0; background: transparent; color: var(--ink); font-weight: 600; font-size: 12px; }
@media (max-width: 1100px) {
  .salary-stats, .pay-cards, .slip-grid, .month-cards, .counts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .salary-stats, .pay-cards, .slip-grid, .month-cards, .counts { grid-template-columns: 1fr; }
}
.card, .stat, .action, .doc-link { border-radius: 12px; }
.bell-wrap { position: relative; }
.bell-toggle { border: 0; background: transparent; color: var(--ink); }
.bell-toggle:hover { background: var(--soft); }
.bell-toggle.light { color: #fff; }
.bell-toggle.light:hover { background: rgba(255,255,255,.1); color: #fff; }
.bell-panel { position: absolute; top: 48px; right: 0; z-index: 60; width: min(28rem, calc(100vw - 1.5rem)); }
.bell-panel[hidden] { display: none; }
.bell-arrow { position: absolute; top: -6px; right: 16px; width: 12px; height: 12px; background: #fff; border-top: 1px solid var(--line); border-left: 1px solid var(--line); transform: rotate(45deg); }
.bell-card { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 16px 40px rgba(0,24,64,.14); }
.bell-card ul { list-style: none; margin: 0; padding: 0; max-height: 26rem; overflow: auto; }
.bell-card li + li { border-top: 1px solid var(--line); }
.bell-card form { margin: 0; }
.bell-card button { display: flex; width: 100%; align-items: center; gap: 12px; padding: 12px 16px; border: 0; background: #fff; color: var(--ink); text-align: left; }
.bell-card button:hover { background: #f7f8fb; }
.bell-card .bubble { width: 40px; height: 40px; }
.bell-copy { min-width: 0; flex: 1; }
.bell-copy strong { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; }
.bell-copy strong span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bell-copy .pill { flex: none; }
.bell-copy small { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bell-card time { flex: none; color: var(--muted); font-size: 12px; }
.bell-card .chevron, .bell-card button > svg:last-child { flex: none; color: var(--muted); }
.bell-all { display: flex; align-items: center; justify-content: center; gap: 4px; border-top: 1px solid var(--line); padding: 12px 16px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--ink); }
.bell-all:hover { background: #f7f8fb; }
.bell-empty { margin: 0; padding: 32px 16px; text-align: center; color: var(--muted); font-size: 14px; }
.mobile-tools { display: flex; align-items: center; gap: 8px; }
.mobile-out { border: 0; background: transparent; color: var(--gold); font-size: 14px; font-weight: 600; }