:root { color-scheme: light; --bg:#f5f5f3; --surface:#fff; --text:#181818; --muted:#626262; --border:#d8d8d5; --accent:#181818; --on-accent:#fff; --danger:#a82222; --focus:#315ea8; }
:root[data-theme="dark"] { color-scheme:dark; --bg:#151515; --surface:#202020; --text:#f1f1ef; --muted:#b4b4af; --border:#454542; --accent:#f1f1ef; --on-accent:#181818; --danger:#ff9999; --focus:#9bbcf1; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) { color-scheme:dark; --bg:#151515; --surface:#202020; --text:#f1f1ef; --muted:#b4b4af; --border:#454542; --accent:#f1f1ef; --on-accent:#181818; --danger:#ff9999; --focus:#9bbcf1; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui,sans-serif; }
a { color:inherit; }
header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:20px clamp(16px,4vw,48px); border-bottom:1px solid var(--border); }
.brand { font-weight:800; letter-spacing:.05em; text-decoration:none; }
.brand span { display:block; font-weight:400; letter-spacing:0; color:var(--muted); }
main { max-width:1100px; margin:0 auto; padding:28px 16px 48px; }
h1 { font-size:clamp(28px,4vw,44px); letter-spacing:-.04em; line-height:1.15; }
h2 { font-size:22px; margin-top:0; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px; margin:16px 0; min-width:0; }
label { display:grid; gap:6px; color:var(--muted); font-size:14px; min-width:0; }
form { display:grid; gap:16px; margin-top:16px; }
input,select,textarea { width:100%; min-width:0; min-height:44px; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--text); padding:10px; font:inherit; }
button,.button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; max-width:100%; padding:10px 16px; border:1px solid var(--border); border-radius:6px; background:var(--accent); color:var(--on-accent); font:inherit; cursor:pointer; text-decoration:none; }
button:disabled { opacity:.5; cursor:not-allowed; }
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
nav { display:flex; flex-wrap:wrap; gap:8px; padding:12px 16px; border-bottom:1px solid var(--border); }
nav a { min-height:44px; padding:10px 12px; text-decoration:none; border-radius:6px; }
nav a[aria-current="page"] { background:var(--accent); color:var(--on-accent); }
[hidden] { display:none!important; }
footer { padding:24px 16px; text-align:center; color:var(--muted); font-size:13px; }
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.actions { display:flex; flex-wrap:wrap; gap:8px; }
.error { color:var(--danger); }
small,.muted { color:var(--muted); }
p,li { overflow-wrap:anywhere; }
ul { padding-left:22px; }
.signin { max-width:520px; }
.metric { font-size:48px; font-weight:700; margin:12px 0; }
.secondary { background:var(--surface); color:var(--text); }
.employment { margin:16px 0; padding:16px 0; border-top:1px solid var(--border); }
.employment p { margin:8px 0; }
.qr { display:block; width:240px; max-width:100%; height:auto; margin:16px 0; }
.secret,code { overflow-wrap:anywhere; }
.rule-config { white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; }
.leave-rules-warning { border-color:var(--danger); }
.leave-rule-row h3 { margin-top:0; overflow-wrap:anywhere; }
#leave-rule-form .grid { align-items:start; }
.leave-tabs { padding:0 0 12px; margin-bottom:16px; }
.leave-tabs a { font-size:14px; }
.leave-filters { margin:20px 0; }
.leave-filters > button { justify-self:start; }
fieldset { min-width:0; border:1px solid var(--border); border-radius:8px; padding:14px; }
legend { padding:0 6px; font-weight:600; }
.checkbox-label { display:flex; align-items:center; gap:10px; min-height:44px; color:var(--text); }
.checkbox-label input { width:20px; height:20px; min-height:20px; flex:0 0 20px; padding:0; }
.leave-override { display:grid; gap:12px; }
.weekday-checks { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:4px 12px; }
.table-scroll,.calendar-scroll { max-width:100%; overflow-x:auto; border:1px solid var(--border); border-radius:8px; background:var(--surface); margin:16px 0; }
.leave-balance-table { width:100%; min-width:620px; border-collapse:collapse; font-size:14px; }
.leave-balance-table caption { text-align:left; padding:14px; font-weight:600; }
.leave-balance-table th,.leave-balance-table td { padding:12px; text-align:left; vertical-align:top; border-top:1px solid var(--border); }
.leave-balance-table thead { background:var(--bg); }
.leave-balance-table td { font-variant-numeric:tabular-nums; }
.balance-caveat { display:block; font-size:12px; font-weight:400; margin-top:4px; }
.leave-request-card h3 { margin-top:0; }
.status-label,.owner-record-label { font-weight:600; }
.owner-record-label { border-left:3px solid var(--focus); padding:8px 12px; background:var(--bg); }
.leave-history { margin:12px 0; }
.leave-queue-card h2,.leave-profile-card h2 { overflow-wrap:anywhere; }
.leave-queue-card .leave-balance-table { min-width:520px; }
.leave-queue-card h3,.leave-profile-card h3 { margin-top:24px; }
.leave-decision-form { padding-top:16px; border-top:1px solid var(--border); }
.leave-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); min-width:700px; }
.calendar-weekday { font-size:13px; font-weight:700; text-align:center; background:var(--bg); padding:10px; }
.leave-calendar-day { min-width:0; min-height:140px; padding:10px; border-top:1px solid var(--border); border-right:1px solid var(--border); }
.leave-calendar-day:nth-child(7n) { border-right:0; }
.leave-calendar-day h3 { font-size:14px; margin:0 0 8px; }
.leave-calendar-day ul { list-style:none; padding:0; margin:0; }
.calendar-empty { background:var(--bg); }
.calendar-today h3 time { display:inline-block; padding:2px 6px; border-radius:4px; background:var(--accent); color:var(--on-accent); }
.calendar-holiday-name { margin:6px 0; font-size:12px; font-weight:600; color:var(--danger); }
.leave-entry { font-size:12px; margin:6px 0; padding:6px; border-radius:4px; background:var(--bg); overflow-wrap:anywhere; }
.leave-entry span { display:block; color:var(--muted); font-size:11px; }
.own-leave { border-left:3px solid var(--focus); }
.leave-profile-form,.leave-schedule-form { margin-bottom:20px; }
.leave-certificate-link { display:inline-flex; align-items:center; min-height:44px; padding:10px 4px; }
.calendar-mobile-date { display:none; }
@media (max-width:700px) {
  .table-scroll,.calendar-scroll { overflow:visible; }
  .leave-balance-table,.leave-queue-card .leave-balance-table { min-width:0; display:block; }
  .leave-balance-table caption { display:block; }
  .leave-balance-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .leave-balance-table tbody { display:block; }
  .leave-balance-table tr { display:block; padding:12px; border-top:1px solid var(--border); }
  .leave-balance-table th[scope="row"] { display:block; padding:0 0 10px; border:0; }
  .leave-balance-table td { display:flex; gap:12px; justify-content:space-between; padding:6px 0; }
  .leave-balance-table td::before { content:attr(data-label); color:var(--muted); }
  .leave-calendar-grid { min-width:0; grid-template-columns:1fr; }
  .calendar-weekday,.calendar-empty,.calendar-desktop-date { display:none; }
  .calendar-mobile-date { display:inline; }
  .leave-calendar-day { min-height:72px; border-right:0; }
  .leave-calendar-day ul { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:6px; }
  .leave-entry { margin:0; font-size:14px; }
}
summary { min-height:44px; padding:10px; cursor:pointer; }
.org-tree { list-style:none; padding-left:0; }
.org-tree ul { padding-left:16px; border-left:1px solid var(--border); list-style:none; }
.org-node { border:1px solid var(--border); border-radius:8px; margin:10px 0; }
.org-node summary span,.org-node summary small { display:block; }
.org-node p { padding:0 12px; color:var(--muted); }
.preview-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:12px; }
dl { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:8px; }
dt { color:var(--muted); } dd { margin:0; overflow-wrap:anywhere; }
@media (max-width:600px) { header { padding:16px; } .card { padding:16px; } nav { gap:4px; } nav a { padding:10px 8px; } }