:root{
  --bg:#f6f8fc;
  --surface:#ffffff;
  --surface-soft:#f8fafc;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;
  --accent:#102447;
  --accent-2:#1f3b73;
  --accent-soft:#e8eefb;
  --danger:#dc2626;
  --danger-soft:#fee2e2;
  --warn:#ea580c;
  --warn-soft:#ffedd5;
  --ok:#16a34a;
  --ok-soft:#dcfce7;
  --shadow:0 18px 40px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:Inter,Arial,sans-serif;background:linear-gradient(180deg,#f2f6fb 0%,#fbfcfe 100%);color:var(--text)}
a{text-decoration:none;color:inherit}
button,.button-link,.icon-button{display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;border:0;border-radius:14px;padding:11px 14px;font:600 14px/1 Inter,Arial,sans-serif;cursor:pointer}
.icon-button{padding:10px 12px;background:#eef3fb;color:var(--accent)}
input,select{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:#fff;color:var(--text);font:500 14px/1.35 Inter,Arial,sans-serif}
table{width:100%;border-collapse:collapse}
th,td{padding:12px 10px;border-bottom:1px solid #edf2f7;text-align:left;vertical-align:middle}
th{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
h1,h2,p{margin:0}
.auth-body{background:radial-gradient(circle at top,#1f3b73 0%,#0f1d38 42%,#f6f8fc 42.1%,#f6f8fc 100%)}
.auth-screen{min-height:100vh;display:grid;align-content:start;padding:28px 18px 22px;gap:18px}
.auth-hero{padding:26px 12px 24px;color:#fff;text-align:center}
.auth-badge{width:72px;height:72px;border-radius:22px;margin:0 auto 18px;background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:24px;font-weight:800;letter-spacing:.08em;border:1px solid rgba(255,255,255,.18)}
.auth-hero h1{font-size:34px;line-height:1.05;margin-bottom:10px}
.auth-hero p{color:#dbe7ff;font-size:16px;line-height:1.45}
.auth-card{background:#fff;border-radius:34px;box-shadow:0 24px 44px rgba(15,23,42,.15);padding:22px 18px 18px}
.pin-form{display:grid;gap:18px}
.auth-actions{display:grid;gap:12px}
.auth-passkey{width:100%;background:#edf3ff;color:var(--accent)}
.pin-head{text-align:center}
.pin-head strong{display:block;font-size:28px;margin-bottom:8px}
.pin-head span{color:var(--muted)}
.pin-hidden{position:absolute;opacity:0;pointer-events:none}
.pin-dots{display:flex;justify-content:center;gap:16px;padding:4px 0 8px}
.pin-dots span{width:15px;height:15px;border-radius:999px;border:2px solid #b6c3d9;background:#fff}
.pin-dots span.filled{background:var(--accent);border-color:var(--accent)}
.auth-error{text-align:center;color:var(--danger);font-weight:700}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pin-key{aspect-ratio:1;border-radius:999px;background:#f8fbff;color:var(--accent);font-size:32px;font-weight:500;border:1px solid #e4ebf5;box-shadow:none}
.app-shell{min-height:100vh;padding-bottom:84px}
.sidebar{display:none}
.content{padding:18px 16px 104px}
.mobile-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.mobile-topbar strong{display:block;font-size:18px}
.mobile-topbar span{display:block;color:var(--muted);font-size:13px;margin-top:4px}
.page-hero,.page-header,.stats,.dashboard-grid,.form-grid,.inline-form,.calendar{display:grid;gap:14px}
.page-hero,.page-header{margin-bottom:16px}
.page-hero h1,.page-header h1{font-size:34px;line-height:1.02;letter-spacing:-.03em}
.hero-copy,.section-copy{color:var(--muted);font-size:14px;line-height:1.55}
.hero-status,.stat-card,.panel,.bottom-nav{background:rgba(255,255,255,.96);border:1px solid rgba(226,232,240,.9);border-radius:24px;box-shadow:var(--shadow)}
.hero-status{padding:20px;display:grid;gap:8px}
.hero-status span,.stat-card span{display:block;font-size:13px;color:var(--muted);font-weight:600}
.hero-status strong,.stat-card strong{display:block;font-size:20px;line-height:1.2;overflow-wrap:anywhere}
.hero-status small{color:var(--muted)}
.hero-status.is-overdue{background:linear-gradient(180deg,#fff 0%,#fff5f5 100%)}
.hero-status.is-soon{background:linear-gradient(180deg,#fff 0%,#fff7ed 100%)}
.hero-status.is-normal{background:linear-gradient(180deg,#fff 0%,#eff6ff 100%)}
.stats{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:16px}
.stat-card{padding:16px}
.stat-card.stat-accent{background:linear-gradient(135deg,#102447 0%,#1d3768 100%);color:#fff}
.stat-card.stat-accent span{color:#d6e3ff}
.dashboard-grid{grid-template-columns:1fr}
.panel{padding:16px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.panel-head h2{font-size:19px}
.panel-head span{font-size:12px;font-weight:700;color:var(--muted)}
.task-list,.history-list{display:grid}
.setting-stack{display:grid;gap:14px}
.summary-pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.summary-pair{padding:12px 0;border-bottom:1px solid #edf2f7}
.summary-pair:nth-last-child(-n+2){border-bottom:0}
.summary-pair span{display:block;font-size:12px;color:var(--muted);font-weight:600}
.summary-pair strong{display:block;margin-top:6px;font-size:16px;line-height:1.25}
.task-row,.history-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:12px 0;border-bottom:1px solid #edf2f7}
.task-row:last-child,.history-row:last-child{border-bottom:0}
.task-row strong,.history-row strong{display:block;font-size:15px;line-height:1.35}
.task-row span,.history-row span,.history-row small{display:block;color:var(--muted);font-size:13px;margin-top:4px;line-height:1.4}
.task-meta{text-align:right}
.task-row-overdue strong,.task-row-overdue span:first-child{color:var(--danger)}
.badge{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700}
.badge-normal{background:var(--accent-soft);color:var(--accent)}
.badge-soon{background:var(--warn-soft);color:var(--warn)}
.badge-overdue{background:var(--danger-soft);color:var(--danger)}
.badge-done{background:var(--ok-soft);color:var(--ok)}
.empty-state{padding:10px 0;color:var(--muted);font-size:14px}
.done{opacity:.58}
.form-grid{grid-template-columns:1fr}
.inline-form{grid-template-columns:1fr auto}
.calendar{grid-template-columns:repeat(2,minmax(0,1fr))}
.calendar-day{min-height:116px;border:1px solid #edf2f7;border-radius:18px;padding:10px;background:var(--surface-soft)}
.calendar-day.non-work{background:#f1f5f9}
.calendar-day.today{border-color:#4a67a4;box-shadow:inset 0 0 0 1px #4a67a4}
.calendar-task{display:block;margin-top:8px;padding:6px 8px;border-radius:10px;font-size:12px;line-height:1.35;background:#fff}
.calendar-task.soon{background:var(--warn-soft);color:var(--warn)}
.calendar-task.overdue{background:var(--danger-soft);color:var(--danger)}
.calendar-task.done{background:var(--ok-soft);color:var(--ok);opacity:1}
.mini-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.mini-day{min-height:54px;padding:8px 6px;border-radius:16px;border:1px solid #edf2f7;background:var(--surface-soft);display:grid;align-content:space-between;justify-items:start}
.mini-day strong{font-size:13px;line-height:1}
.mini-day span{display:inline-flex;min-width:18px;height:18px;padding:0 6px;align-items:center;justify-content:center;border-radius:999px;background:#fff;color:var(--muted);font-size:11px;font-weight:700}
.mini-day.today{border-color:#4a67a4;box-shadow:inset 0 0 0 1px #4a67a4}
.mini-day.non-work{background:#f1f5f9}
.mini-day.has-overdue span{background:var(--danger-soft);color:var(--danger)}
.mini-day.has-soon span{background:var(--warn-soft);color:var(--warn)}
.mini-day.has-done span{background:var(--ok-soft);color:var(--ok)}
.holiday-list{display:flex;gap:8px;flex-wrap:wrap}
.holiday-list span{padding:7px 10px;border-radius:999px;background:#eef3fb;color:var(--accent-2);font-size:12px;font-weight:600}
.payroll-cards{display:grid;gap:12px}
.payroll-card{padding:16px;border:1px solid #edf2f7;border-radius:22px;background:var(--surface-soft);display:grid;gap:12px}
.payroll-card.is-paid{background:#f8fafc;opacity:.7}
.payroll-card-top{display:flex;justify-content:flex-end}
.payroll-date{font-size:30px;line-height:1.02;font-weight:800;letter-spacing:-.03em}
.payroll-amount{font-size:18px;color:var(--muted);font-weight:600}
.bottom-nav{position:fixed;left:12px;right:12px;bottom:10px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:10px 6px;z-index:30;background:rgba(255,255,255,.98);backdrop-filter:blur(12px)}
.bottom-nav a{display:grid;justify-items:center;gap:6px;padding:8px 4px;border-radius:16px;color:var(--muted);font-size:11px;font-weight:700}
.bottom-nav a.active{background:#edf3ff;color:var(--accent)}
.bottom-nav a::before{content:"";width:8px;height:8px;border-radius:999px;background:currentColor;opacity:.35}
@media (min-width:920px){
  .auth-screen{max-width:420px;margin:0 auto}
  .app-shell{display:grid;grid-template-columns:268px minmax(0,1fr);padding-bottom:0}
  .sidebar{display:flex;flex-direction:column;gap:26px;padding:28px 20px;background:linear-gradient(180deg,#0f172a 0%,#17284d 100%);color:#fff;border-right:1px solid rgba(255,255,255,.08)}
  .brand{display:flex;align-items:center;gap:14px}
  .brand-mark{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,#e0e7ff 0%,#b7c6ea 100%);color:#102447;display:grid;place-items:center;font-weight:800;letter-spacing:.08em}
  .brand strong{display:block;font-size:18px}
  .brand span,.sidebar-note span{display:block;color:#9eb0d0;font-size:13px;line-height:1.4}
  .nav{display:grid;gap:8px}
  .nav a{padding:12px 14px;border-radius:14px;color:#d9e4f9;font-weight:600}
  .nav a.active,.nav a:hover{background:rgba(159,178,216,.16);color:#fff}
  .sidebar-note{margin-top:auto;padding:16px;border-radius:18px;background:rgba(255,255,255,.06);display:grid;gap:6px}
  .content{padding:28px}
  .mobile-topbar{display:none}
  .page-hero{grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);align-items:stretch;margin-bottom:22px}
  .page-header{grid-template-columns:minmax(0,1fr) auto;align-items:end}
  .page-hero h1,.page-header h1{font-size:48px}
  .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dashboard-grid{grid-template-columns:1.35fr .9fr}
  .dashboard-grid-tight{grid-template-columns:1fr 1fr}
  .calendar{grid-template-columns:repeat(7,minmax(0,1fr))}
  .bottom-nav{display:none}
}
@media (max-width:760px){
  table,thead,tbody,tr,td,th{display:block}
  thead{display:none}
  tr{padding:10px 0;border-bottom:1px solid #edf2f7}
  td{border:0;padding:5px 0}
}
@media (max-width:420px){
  .stats{grid-template-columns:1fr}
  .summary-pairs{grid-template-columns:1fr}
  .summary-pair:nth-last-child(-n+2){border-bottom:1px solid #edf2f7}
  .summary-pair:last-child{border-bottom:0}
}