:root{--teal:#0e6b6c;--teal-dark:#0a4b4c;--turquoise:#32cab6;--mint:#d6f5f0;--ink:#0b2e30;--muted:#5a6e6f;--bg:#f4f8f8;--card:#fff;--border:#dce7e7;--good:#16875a;--warn:#b86e00;--bad:#c93a3a;--info:#1f6fd1;--leave:#6b4fd8;--radius:14px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--ink:#e6f0ef;--muted:#9bb2b1;--bg:#0c1514;--card:#14201f;--border:#2b3b3a;--mint:#1f3a38;--teal:#32cab6;--good:#4ec79a;--warn:#e0a030;--bad:#ff8a8a;--info:#6fa8ff;--leave:#a894ff;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--ink);margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:15px;line-height:1.45}h1{margin:0;font-size:24px}h2{margin:0;font-size:17px}a{color:var(--teal)}.muted{color:var(--muted)}.pad{padding:16px}.row{align-items:center;display:flex}.row.gap{flex-wrap:wrap;gap:10px}.row.center{justify-content:center}.spread{justify-content:space-between}.grow{flex:1}:focus-visible{outline:3px solid var(--turquoise);outline-offset:2px}.app{grid-template-columns:250px 1fr;min-height:100%;display:grid}.sidebar{background:var(--teal-dark);color:#fff;flex-direction:column;gap:4px;height:100vh;padding:18px 12px;display:flex;position:sticky;top:0;overflow-y:auto}.brand{align-items:center;gap:10px;padding:4px 10px 16px;display:flex}.brand img{background:#fff;border-radius:50%;width:38px;height:38px;padding:3px}.brand b{line-height:1.1;display:block}.brand small{opacity:.75}.nav a{color:#dff6f2;border-radius:10px;align-items:center;gap:10px;padding:10px 12px;font-weight:600;text-decoration:none;display:flex}.nav-group{color:#fff;width:100%;font:inherit;cursor:pointer;text-align:left;background:#ffffff14;border:0;border-radius:10px;align-items:center;gap:10px;padding:10px 12px;font-weight:700;display:flex}.nav-group .chev{margin-left:auto}.nav-group:hover{background:#ffffff24}.nav-sub-title{text-transform:uppercase;letter-spacing:.04em;opacity:.65;padding:8px 12px 2px 24px;font-size:12px}.nav a.sub{margin-left:12px;padding:8px 12px;font-size:14px;font-weight:500}.nav a:hover{background:#ffffff1a}.nav a.active{background:var(--turquoise);color:#06302e}.sidebar .user{background:#ffffff14;border-radius:12px;margin-top:auto;padding:12px;font-size:13px}.main{width:100%;max-width:1400px;padding:24px 28px 48px}.topbar{display:none}@media (width<=900px){.app{grid-template-columns:1fr}.sidebar{flex-flow:wrap;height:auto;position:static}.sidebar .user{margin-top:0}.main{padding:16px}}.page-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px;display:flex}.page-header p{margin:4px 0 0}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:18px;padding:18px}.card-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;display:flex}.grid{gap:14px;display:grid}.grid.stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:18px}.grid.two{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}.stat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);border-left:5px solid var(--border);padding:14px 16px}.stat.good{border-left-color:var(--good)}.stat.warn{border-left-color:var(--warn)}.stat.bad{border-left-color:var(--bad)}.stat.info{border-left-color:var(--info)}.stat-value{font-size:28px;font-weight:800}.stat-label{color:var(--muted);font-size:13px;font-weight:600}.stat-hint{color:var(--muted);font-size:12px}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%}th{text-align:left;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-bottom:1px solid var(--border);white-space:nowrap;padding:8px 10px;font-size:12px}td{border-bottom:1px solid var(--border);vertical-align:middle;padding:10px}tr.click{cursor:pointer}tr.click:hover td{background:color-mix(in srgb, var(--mint) 55%, transparent)}td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}.btn{font:inherit;border:1px solid var(--border);background:var(--card);color:var(--ink);cursor:pointer;border-radius:10px;padding:9px 14px;font-weight:700}.btn:hover:not(:disabled){border-color:var(--teal)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.primary{background:var(--teal);border-color:var(--teal);color:#fff}@media (prefers-color-scheme:dark){.btn.primary{color:#06302e}}.btn.danger{color:var(--bad);border-color:color-mix(in srgb, var(--bad) 45%, transparent)}.btn.small{padding:5px 10px;font-size:13px}.btn.ghost{background:0 0;border-color:#0000}input,select,textarea{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--border);border-radius:10px;width:100%;padding:9px 11px}textarea{resize:vertical;min-height:80px}input[type=checkbox],input[type=radio]{width:auto}.field{flex-direction:column;gap:4px;margin-bottom:12px;display:flex}.field-label{font-size:13px;font-weight:700}.field-hint{color:var(--muted);font-size:12px}.field-error{color:var(--bad);font-size:13px;font-weight:600}.form-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 14px;display:grid}.filters{flex-wrap:wrap;align-items:end;gap:10px;margin-bottom:14px;display:flex}.filters .field{min-width:150px;margin:0}.badge{border:1px solid var(--border);white-space:nowrap;border-radius:999px;align-items:center;gap:5px;padding:2px 9px;font-size:12px;font-weight:700;display:inline-flex}.tone-good,.st-present,.st-overtime{color:var(--good);background:color-mix(in srgb, var(--good) 13%, transparent);border-color:color-mix(in srgb, var(--good) 35%, transparent)}.st-overtime,.tone-info{color:var(--info);background:color-mix(in srgb, var(--info) 13%, transparent);border-color:color-mix(in srgb, var(--info) 35%, transparent)}.tone-warn,.st-late,.st-notCheckedIn{color:var(--warn);background:color-mix(in srgb, var(--warn) 13%, transparent);border-color:color-mix(in srgb, var(--warn) 35%, transparent)}.tone-bad,.st-absent{color:var(--bad);background:color-mix(in srgb, var(--bad) 13%, transparent);border-color:color-mix(in srgb, var(--bad) 35%, transparent)}.st-leave{color:var(--leave);background:color-mix(in srgb, var(--leave) 13%, transparent);border-color:color-mix(in srgb, var(--leave) 35%, transparent)}.st-holiday,.st-weeklyOff,.tone-neutral{color:var(--muted)}.alert{border:1px solid var(--border);border-radius:10px;margin-bottom:14px;padding:12px 14px}.alert.error{color:var(--bad);border-color:color-mix(in srgb, var(--bad) 45%, transparent);background:color-mix(in srgb, var(--bad) 8%, transparent)}.alert.warn{color:var(--warn);border-color:color-mix(in srgb, var(--warn) 45%, transparent);background:color-mix(in srgb, var(--warn) 8%, transparent)}.alert.ok{color:var(--good);border-color:color-mix(in srgb, var(--good) 45%, transparent);background:color-mix(in srgb, var(--good) 8%, transparent)}.modal-backdrop{z-index:50;background:#05191a8c;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal{background:var(--card);border:1px solid var(--border);border-radius:16px;width:min(560px,100%);max-height:92vh;overflow:auto}.modal.wide{width:min(860px,100%)}.modal-head{border-bottom:1px solid var(--border);background:var(--card);z-index:1;justify-content:space-between;align-items:center;padding:14px 18px;display:flex;position:sticky;top:0}.modal-body{padding:18px}.toast{background:var(--teal-dark);color:#fff;z-index:60;border-radius:12px;padding:12px 18px;position:fixed;bottom:20px;left:50%;transform:translate(-50%);box-shadow:0 6px 24px #00000040}.secret{background:var(--mint);word-break:break-all;-webkit-user-select:all;user-select:all;border-radius:10px;margin:12px 0;padding:14px;font:700 20px ui-monospace,Consolas,monospace}.bars{align-items:flex-end;gap:10px;height:160px;display:flex}.bar-col{flex-direction:column;flex:1;justify-content:flex-end;align-items:center;gap:4px;height:100%;display:flex}.bar-stack{border-radius:6px 6px 0 0;flex-direction:column-reverse;width:100%;max-width:46px;display:flex;overflow:hidden}.bar-stack i{display:block}.bar-present{background:var(--good)}.bar-late{background:var(--warn)}.bar-absent{background:var(--bad)}.hbar{background:var(--border);border-radius:6px;height:10px;overflow:hidden}.hbar>i{background:var(--turquoise);height:100%;display:block}.legend{color:var(--muted);gap:14px;margin-top:8px;font-size:12px;display:flex}.legend i{border-radius:3px;width:10px;height:10px;margin-right:5px;display:inline-block}.login-wrap{place-items:center;min-height:100%;padding:20px;display:grid}.login-card{background:var(--card);border:1px solid var(--border);border-radius:18px;width:min(420px,100%);padding:28px}.login-card img.logo{background:#fff;border-radius:10px;height:64px;margin:0 auto 18px;padding:4px 10px;display:block}.matrix td,.matrix th{text-align:center}.matrix td:first-child,.matrix th:first-child{text-align:left}.lvl{border-radius:6px;padding:2px 8px;font-size:12px;font-weight:700}.lvl-full{background:color-mix(in srgb, var(--good) 18%, transparent);color:var(--good)}.lvl-edit{background:color-mix(in srgb, var(--info) 18%, transparent);color:var(--info)}.lvl-view{background:var(--border);color:var(--muted)}.lvl-none{color:var(--bad)}.switch-row{border-bottom:1px solid var(--border);align-items:flex-start;gap:12px;padding:10px 0;display:flex}.switch-row input{width:20px;height:20px;margin-top:4px}.tabs{border-bottom:1px solid var(--border);flex-wrap:wrap;gap:6px;margin-bottom:14px;display:flex}.tabs button{font:inherit;cursor:pointer;color:var(--muted);background:0 0;border:none;border-bottom:3px solid #0000;padding:9px 14px;font-weight:700}.tabs button[aria-selected=true]{color:var(--teal);border-bottom-color:var(--turquoise)}body{font-size:16px}h1{letter-spacing:-.3px;font-size:28px}h2{font-size:18px}th{font-size:12.5px}td{padding:12px 10px}.btn{font-size:15px}.btn.primary{box-shadow:0 2px 8px color-mix(in srgb, var(--teal) 35%, transparent)}.card{padding:20px;box-shadow:0 1px 3px #0b2e300f}.app{grid-template-columns:290px 1fr}.sidebar{background:linear-gradient(#0b5758 0%,#083b3d 100%);gap:6px;padding:22px 14px;box-shadow:2px 0 14px #0000001f}.brand{border-bottom:1px solid #ffffff1f;gap:12px;margin-bottom:12px;padding:4px 8px 20px}.brand img{width:46px;height:46px}.brand b{font-size:18px}.brand small{font-size:13.5px}.nav{flex-direction:column;gap:4px;display:flex}.nav a{border-radius:12px;gap:12px;padding:12px 14px;font-size:16.5px;transition:background .15s}.nav a>span{text-align:center;width:22px;font-size:18px}.nav a.active{background:var(--turquoise);color:#052b29;box-shadow:0 3px 12px #32cab659}.nav-group{background:#ffffff12;border-radius:12px;gap:12px;padding:12px 14px;font-size:16.5px}.nav-group>span:first-child{text-align:center;width:22px;font-size:18px}.nav a.sub{border-left:2px solid #ffffff26;border-radius:0 12px 12px 0;margin-left:14px;padding:10px 14px;font-size:15.5px;font-weight:500}.nav a.sub.active{border-left-color:var(--turquoise);font-weight:700}.sidebar .user{border:1px solid #ffffff1a;padding:14px;font-size:14.5px}.sidebar .user .btn{font-size:14px}.main{padding:30px 36px 56px}@media (width<=900px){.app{grid-template-columns:1fr}.main{padding:16px}}.hero{color:#fff;background:linear-gradient(120deg,#0e6b6c 0%,#17998f 60%,#32cab6 100%);border-radius:18px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px;padding:24px 28px;display:flex;box-shadow:0 8px 24px #0e6b6c40}.hero h2{margin:0 0 4px;font-size:24px}.hero p{opacity:.95;margin:0;font-size:16px}.ring{--pct:0%;text-align:center;background:radial-gradient(closest-side, #0c6264 78%, transparent 80%), conic-gradient(#fff var(--pct), #ffffff40 0);border-radius:50%;place-content:center;width:112px;height:112px;display:grid}.ring b{font-size:26px;line-height:1}.ring small{opacity:.85;font-size:12px}.grid.stats{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}.stat{border-left-width:1px;border-top:4px solid var(--border);padding:18px 20px;transition:transform .15s,box-shadow .15s;position:relative;box-shadow:0 1px 3px #0b2e300f}.stat:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0b2e301a}.stat.good{border-top-color:var(--good)}.stat.warn{border-top-color:var(--warn)}.stat.bad{border-top-color:var(--bad)}.stat.info{border-top-color:var(--info)}.stat-icon{background:var(--mint);width:36px;height:36px;color:var(--teal);border-radius:10px;place-items:center;font-size:18px;display:grid;position:absolute;top:14px;right:16px}.stat.good .stat-icon{background:color-mix(in srgb, var(--good) 15%, transparent);color:var(--good)}.stat.warn .stat-icon{background:color-mix(in srgb, var(--warn) 15%, transparent);color:var(--warn)}.stat.bad .stat-icon{background:color-mix(in srgb, var(--bad) 15%, transparent);color:var(--bad)}.stat.info .stat-icon{background:color-mix(in srgb, var(--info) 15%, transparent);color:var(--info)}.stat-value{font-size:34px;line-height:1.1}.stat-label{margin-top:2px;font-size:14.5px}.bars{height:190px}.hbar{height:12px}.pw{position:relative}.pw input{padding-right:46px}.pw-eye{width:38px;height:38px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:8px;place-items:center;display:grid;position:absolute;top:50%;right:4px;transform:translateY(-50%)}.pw-eye:hover{color:var(--teal);background:var(--mint)}.install-btn{width:100%;font:inherit;color:#052b29;background:var(--turquoise);cursor:pointer;border:0;border-radius:12px;justify-content:center;align-items:center;gap:8px;margin-top:auto;padding:11px 14px;font-size:15px;font-weight:700;display:flex;box-shadow:0 3px 12px #32cab64d}.install-btn:hover{filter:brightness(1.07)}.install-btn+.user{margin-top:10px}@media (width<=900px){.install-btn{width:auto;margin-top:0}}.demo-banner{text-align:center;color:#3b2300;background:#ffc83d;border-bottom:2px solid #c98a00;padding:8px 16px;font-size:14.5px;font-weight:600}.portal{background:var(--bg);min-height:100%}.portal-head{color:#fff;background:linear-gradient(#0b5758,#083b3d);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:12px 24px;display:flex}.portal-head .brand{border:0;margin:0;padding:0}.portal-tabs{background:var(--card);border-bottom:1px solid var(--border);z-index:5;gap:6px;padding:10px 24px 0;display:flex;position:sticky;top:0;overflow-x:auto}.portal-tabs button{font:inherit;white-space:nowrap;cursor:pointer;color:var(--muted);background:0 0;border:0;border-bottom:3px solid #0000;padding:12px 16px;font-size:15.5px;font-weight:700;position:relative}.portal-tabs button.on{color:var(--teal);border-bottom-color:var(--turquoise)}.portal-tabs .dot{background:var(--bad);color:#fff;text-align:center;border-radius:9px;min-width:18px;padding:0 5px;font:700 11px/18px system-ui;position:absolute;top:4px;right:2px}.portal-main{max-width:960px;margin:0 auto;padding:24px 20px 56px}.clock-card{text-align:center;color:#fff;background:linear-gradient(120deg,#0e6b6c 0%,#17998f 60%,#32cab6 100%);border-radius:18px;margin-bottom:16px;padding:22px;box-shadow:0 8px 24px #0e6b6c40}.clock-card .muted{color:#ffffffe6}.clock{letter-spacing:2px;font:800 52px/1.1 ui-monospace,Consolas,monospace}.actions{flex-wrap:wrap;gap:12px;margin-bottom:18px;display:flex}.btn.big{border-radius:14px;flex:1;min-width:200px;padding:18px 20px;font-size:18px}.news-item{border-bottom:1px solid var(--border);padding:12px 0}.news-item:last-child{border-bottom:0}.news-item p{margin:6px 0}.news-item.unread{border-left:4px solid var(--turquoise);padding-left:12px}@media (width<=600px){.clock{font-size:38px}.portal-head,.portal-tabs{padding-left:12px;padding-right:12px}.portal-main{padding:16px 12px 48px}}.chips{flex-wrap:wrap;gap:8px;margin-bottom:14px;display:flex}.chip{font:inherit;border:1px solid var(--border);background:var(--card);color:var(--ink);cursor:pointer;border-radius:999px;padding:6px 12px;font-size:14px;font-weight:600}.chip:hover{border-color:var(--teal)}.chip.on{background:var(--teal);border-color:var(--teal);color:#fff}@media (prefers-color-scheme:dark){.chip.on{color:#06302e}}.place-results{border:1px solid var(--border);border-radius:10px;margin:0 0 12px;padding:0;list-style:none;overflow:hidden}.place-results li+li{border-top:1px solid var(--border)}.place-results button{text-align:left;width:100%;font:inherit;background:var(--card);color:var(--ink);cursor:pointer;border:0;padding:9px 12px;display:block}.place-results button:hover{background:var(--mint)}.place-results small{color:var(--muted)}