:root{
  --bg:#EEF2F0; --surface:#FFFFFF; --surface-2:#F4F7F5; --ink:#13201D; --muted:#566762; --line:#D5DEDA;
  --accent:#0E5A4A; --accent-ink:#FFFFFF;
  --ok:#17693F; --ok-bg:#DAF0E3; --warn:#8F5200; --warn-bg:#FBE9C6; --info:#1F4F9A; --info-bg:#DBE7FA;
  --bad:#A62A24; --bad-bg:#F9DCD9; --muted-bg:#E5EBE8;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0D1513; --surface:#15201D; --surface-2:#1B2925; --ink:#E5EEEB; --muted:#93A59F; --line:#2A3A36;
    --accent:#4FC4A5; --accent-ink:#05201A;
    --ok:#74D6A0; --ok-bg:#173727; --warn:#F1B955; --warn-bg:#3A2D10; --info:#92B7F3; --info-bg:#1B2C49;
    --bad:#F59A93; --bad-bg:#41201D; --muted-bg:#22312D;
    color-scheme: dark;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;padding:0 16px 56px}
.wrap{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
h1,h2,h3{margin:0;line-height:1.2}
h2{font-size:1.2rem}
h3{font-size:1rem}
p{margin:0}
a{color:var(--accent)}
.muted{color:var(--muted)}
.note{font-size:.85rem;color:var(--muted)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;max-width:1040px;margin:0 auto;padding:18px 0 6px}
.brand{font-weight:700;font-size:1.3rem}
.brand small{display:block;font-weight:400;font-size:.8rem;color:var(--muted)}
.who{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.9rem}
.nav{max-width:1040px;margin:0 auto 14px;display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.nav a{padding:10px 14px;text-decoration:none;color:var(--muted);font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px}
.nav a.on{color:var(--ink);border-bottom-color:var(--accent)}
.badge{display:inline-block;min-width:20px;padding:0 6px;border-radius:999px;background:var(--warn-bg);color:var(--warn);font-size:.75rem;text-align:center;margin-left:6px}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:14px;min-width:0}
.head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:18px}
.scroll{overflow-x:auto}
.flash{padding:10px 14px;border-radius:8px;font-weight:500}
.flash.ok{background:var(--ok-bg);color:var(--ok)}
.flash.err{background:var(--bad-bg);color:var(--bad)}
.flash.warn{background:var(--warn-bg);color:var(--warn)}

.clock{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.clock .big{font-size:clamp(1.6rem,6vw,2.3rem);font-weight:600}
.clock .state{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.btn{border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:9px 16px;font-weight:600;cursor:pointer;min-height:40px;text-decoration:none;display:inline-block;text-align:center}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.big{padding:14px 26px;font-size:1.05rem;min-height:54px;min-width:200px}
.btn.sm{padding:4px 10px;min-height:32px;font-size:.85rem}
.btn.bad{color:var(--bad)}
.btn[disabled]{opacity:.55;cursor:not-allowed}

.pill{display:inline-block;border-radius:999px;padding:2px 10px;font-size:.78rem;font-weight:600;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.info{background:var(--info-bg);color:var(--info)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.muted{background:var(--muted-bg);color:var(--muted)}

table{border-collapse:collapse;width:100%;min-width:520px}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
.num{text-align:right}
tr.off td{color:var(--muted)}
.miss{color:var(--warn)}

.strip{display:flex;flex-wrap:wrap;gap:6px 22px}
.strip div{display:flex;align-items:baseline;gap:6px}
.strip b{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.2rem;font-weight:600}
.strip span{color:var(--muted);font-size:.85rem}
.monthnav{display:flex;align-items:center;gap:10px}
.monthnav b{min-width:9ch;text-align:center}

.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:12px}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field.wide{grid-column:1/-1}
.field label{font-size:.8rem;font-weight:600;color:var(--muted)}
input[type=text],input[type=password],input[type=date],input[type=time],input[type=number],select,textarea{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-height:40px;width:100%}
textarea{resize:vertical;min-height:64px}
.days{display:flex;flex-wrap:wrap;gap:8px 16px}
.days label{display:flex;align-items:center;gap:6px;color:var(--ink);font-size:.9rem}
.inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.inline input{width:auto;min-width:0;flex:1 1 140px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{border:1px solid var(--line);background:var(--surface-2);border-radius:999px;padding:5px 14px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.88rem}
.chips a.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.empty{border:1px dashed var(--line);border-radius:10px;padding:22px;color:var(--muted);text-align:center}
.item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.item .l{display:flex;flex-direction:column;gap:2px;min-width:0}
.item .r{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.login{max-width:380px;margin:12vh auto 0}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;font-size:.9rem}
.kv dt{color:var(--muted)}
.kv dd{margin:0;word-break:break-all}
form{margin:0}