:root{--bg:#0b0d14;--bg-2:#11141f;--card:#ffffff0b;--card-solid:#151926;--border:#ffffff14;--border-strong:#ffffff29;--text:#eef0f7;--muted:#8a90a6;--accent:#7c5cff;--accent-2:#22d3ee;--green:#34d399;--red:#f87171;--amber:#fbbf24;--pink:#f472b6;--shadow:0 20px 50px -20px #0009;--radius:20px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (prefers-color-scheme:light){:root{--bg:#f4f5fb;--bg-2:#eceef7;--card:#ffffffbf;--card-solid:#fff;--border:#14183214;--border-strong:#14183229;--text:#14172b;--muted:#666c85;--shadow:0 20px 50px -25px #1e1e5040;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}button{font:inherit;color:inherit;cursor:pointer}input{font:inherit;color:inherit}.app{max-width:1120px;min-height:100vh;margin:0 auto;padding:24px 20px 80px;position:relative}.bg-glow{background:radial-gradient(40% 50% at 20% 30%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%), radial-gradient(35% 45% at 80% 20%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 70%);filter:blur(40px);pointer-events:none;z-index:-1;height:70vh;position:fixed;inset:-20vh -10vw auto}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);-webkit-backdrop-filter:blur(18px);box-shadow:var(--shadow)}.topbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand h1{letter-spacing:-.02em;margin:0;font-size:22px;font-weight:800}.brand span{color:var(--muted);font-size:13px}.logo{background:linear-gradient(135deg, var(--accent), var(--accent-2));width:44px;height:44px;box-shadow:0 8px 24px -8px var(--accent);color:#fff;border-radius:14px;place-items:center;font-size:22px;display:grid}.top-actions{gap:8px;display:flex}.btn{border:1px solid var(--border);background:var(--card);border-radius:12px;padding:9px 14px;font-size:14px;font-weight:600;transition:transform .12s,background .2s,border-color .2s}.btn:hover{border-color:var(--border-strong)}.btn:active{transform:scale(.97)}.btn.sm{border-radius:10px;padding:6px 10px;font-size:13px}.btn.primary{background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--accent-2)));color:#fff;border-color:#0000}.btn.primary:disabled{opacity:.5;cursor:not-allowed}.icon-btn{border:1px solid var(--border);background:var(--card);border-radius:10px;place-items:center;width:36px;height:36px;font-size:18px;transition:background .2s,border-color .2s;display:inline-grid}.icon-btn:hover{border-color:var(--border-strong)}.icon-btn.danger:hover{border-color:var(--red);background:color-mix(in srgb, var(--red) 12%, transparent)}.link{color:var(--accent-2);background:0 0;border:none;padding:0;font-weight:600}.punch{grid-template-columns:1.15fr 1fr;gap:28px;margin-bottom:28px;padding:28px;display:grid}.punch-date{color:var(--muted);font-weight:500}.clock{letter-spacing:-.04em;margin:4px 0 12px;font-family:JetBrains Mono,ui-monospace,monospace;font-size:clamp(52px,8vw,76px);font-weight:700;line-height:1.05}.clock-sec{color:var(--muted);margin-left:2px;font-size:.5em}.status{border:1px solid var(--border);border-radius:999px;align-items:center;gap:8px;padding:6px 12px;font-size:13px;font-weight:600;display:inline-flex}.status .dot{background:var(--muted);border-radius:50%;width:8px;height:8px}.status-in{color:var(--green);background:color-mix(in srgb, var(--green) 10%, transparent)}.status-in .dot{background:var(--green);box-shadow:0 0 0 0 var(--green);animation:1.8s infinite pulse}.status-break{color:var(--amber);background:color-mix(in srgb, var(--amber) 10%, transparent)}.status-break .dot{background:var(--amber)}.status-since{color:var(--muted);font-weight:500}@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--green) 70%, transparent)}70%{box-shadow:0 0 0 8px #0000}to{box-shadow:0 0 #0000}}.punch-btn{text-align:left;color:#fff;border:none;border-radius:18px;align-items:center;gap:16px;width:100%;margin:22px 0 20px;padding:18px 20px;transition:transform .15s,box-shadow .25s,filter .2s;display:flex}.punch-btn strong{font-size:19px;display:block}.punch-btn small{opacity:.85;font-size:13px}.punch-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}.punch-btn:active{transform:scale(.98)}.punch-btn.is-in{background:linear-gradient(135deg,#10b981,#06b6d4);box-shadow:0 14px 34px -12px #10b981}.punch-btn.is-out{background:linear-gradient(135deg,#f97316,#ef4444);box-shadow:0 14px 34px -12px #ef4444}.punch-btn-icon{background:#fff3;border-radius:14px;flex:none;place-items:center;width:46px;height:46px;font-size:20px;display:grid}.punch-meta{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.punch-meta div{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px}.punch-meta span{color:var(--muted);margin-bottom:4px;font-size:12px;display:block}.punch-meta strong{font-variant-numeric:tabular-nums;font-size:17px}.punch-right{flex-direction:column;justify-content:center;align-items:center;gap:22px;display:flex}.ring{aspect-ratio:1;width:min(260px,100%);position:relative}.ring svg{width:100%;height:100%}.ring-track{fill:none;stroke:var(--border);stroke-width:14px}.ring-fill{fill:none;stroke:url(#ringGrad);stroke-width:14px;stroke-linecap:round;filter:drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 50%, transparent));transition:stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1)}.ring-center{text-align:center;place-content:center;display:grid;position:absolute;inset:0}.ring-value{letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-size:36px;font-weight:800}.ring-label{color:var(--muted);font-size:13px}.ring-ot{color:var(--pink);margin-top:6px;font-size:13px;font-weight:700}.timeline{width:100%}.timeline-track{background:var(--border);border-radius:999px;height:14px;position:relative;overflow:hidden}.timeline-seg{background:linear-gradient(90deg, var(--accent), var(--accent-2));border-radius:999px;position:absolute;top:0;bottom:0}.timeline-seg.open{background:repeating-linear-gradient(45deg, var(--green), var(--green) 6px, color-mix(in srgb, var(--green) 70%, white) 6px, color-mix(in srgb, var(--green) 70%, white) 12px);background-size:17px 17px;animation:1s linear infinite slide}@keyframes slide{to{background-position:17px 0}}.timeline-now{background:var(--text);opacity:.6;width:2px;position:absolute;top:-2px;bottom:-2px}.timeline-ticks{height:18px;margin-top:6px;position:relative}.timeline-ticks span{color:var(--muted);font-variant-numeric:tabular-nums;font-size:11px;position:absolute;transform:translate(-50%)}.month-nav{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px;display:flex}.month-nav h2{letter-spacing:-.02em;text-align:center;min-width:190px;margin:0 6px;font-size:24px;font-weight:800}.month-nav h2 span{color:var(--muted);font-weight:600}.hint{color:var(--muted);margin-left:auto;font-size:13px}.stats{grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;display:grid}.stat{flex-direction:column;gap:6px;padding:18px;display:flex;position:relative;overflow:hidden}.stat:before{content:"";background:linear-gradient(90deg, var(--accent), var(--accent-2));opacity:.8;height:3px;position:absolute;inset:0 0 auto}.stat-ot:before{background:linear-gradient(90deg, var(--pink), var(--accent))}.stat-pos:before{background:var(--green)}.stat-neg:before{background:var(--red)}.stat-label{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:13px;font-weight:600}.stat-value{letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-size:30px;font-weight:800}.stat-ot .stat-value{color:var(--pink)}.stat-pos .stat-value{color:var(--green)}.stat-neg .stat-value{color:var(--red)}.stat-sub{color:var(--muted);font-size:12.5px;line-height:1.4}.bar{background:var(--border);border-radius:999px;height:6px;margin:2px 0;overflow:hidden}.bar-fill{border-radius:inherit;background:linear-gradient(90deg, var(--accent), var(--accent-2));height:100%;transition:width .6s}.table-card{padding:8px}.table-head,.row{grid-template-columns:76px 1fr 100px 100px 32px;align-items:center;gap:12px;display:grid}.table-head{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding:10px 14px;font-size:12px;font-weight:700}.num{text-align:right;font-variant-numeric:tabular-nums}.rows{flex-direction:column;gap:2px;display:flex}.row{text-align:left;background:0 0;border:1px solid #0000;border-radius:14px;width:100%;padding:10px 14px;transition:background .15s,border-color .15s}.row:hover{background:var(--card);border-color:var(--border)}.row:hover .row-edit{opacity:1}.row.kind-weekend,.row.kind-holiday{background:color-mix(in srgb, var(--muted) 6%, transparent)}.row.is-future{opacity:.55}.row.is-today{border-color:color-mix(in srgb, var(--accent) 60%, transparent);background:color-mix(in srgb, var(--accent) 10%, transparent)}.row-day{align-items:baseline;gap:8px;display:flex}.row-num{font-variant-numeric:tabular-nums;width:24px;font-size:18px;font-weight:800}.row-dow{color:var(--muted);font-size:13px;font-weight:600}.row-sessions{flex-wrap:wrap;align-items:center;gap:6px;min-width:0;display:flex}.chip{background:color-mix(in srgb, var(--accent) 14%, transparent);border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);border-radius:8px;padding:4px 10px;font-family:JetBrains Mono,monospace;font-size:12.5px;font-weight:500}.chip-open{background:color-mix(in srgb, var(--green) 14%, transparent);border-color:color-mix(in srgb, var(--green) 40%, transparent);color:var(--green)}.tag{background:color-mix(in srgb, var(--muted) 18%, transparent);color:var(--muted);border-radius:999px;padding:3px 9px;font-size:12px;font-weight:700}.tag-holiday{background:color-mix(in srgb, var(--amber) 16%, transparent);color:var(--amber)}.tag-co{background:color-mix(in srgb, var(--accent-2) 16%, transparent);color:var(--accent-2)}.tag-cm{background:color-mix(in srgb, var(--red) 16%, transparent);color:var(--red)}.note{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;max-width:220px;font-size:12.5px;overflow:hidden}.muted{color:var(--muted);font-size:13px}.row-worked{flex-direction:column;align-items:flex-end;font-weight:700;display:flex}.row-worked .short{color:var(--red);font-size:11.5px;font-weight:600}.ot{color:var(--pink);font-weight:700}.row-edit{opacity:0;color:var(--muted);text-align:center;transition:opacity .15s}.settings-wrap{position:relative}.popover{z-index:30;background:var(--card-solid);flex-direction:column;gap:14px;width:300px;padding:16px;display:flex;position:absolute;top:calc(100% + 8px);right:0}.popover hr{border:none;border-top:1px solid var(--border);margin:0}.field{color:var(--muted);flex-direction:column;gap:6px;font-size:13px;font-weight:600;display:flex}.field input,.note-field input,.sess-row input{background:var(--bg-2);border:1px solid var(--border);border-radius:10px;outline:none;padding:9px 11px;transition:border-color .2s}.field input:focus,.note-field input:focus,.sess-row input:focus{border-color:var(--accent)}.dow-pick{gap:4px;display:flex}.dow-pick button{border:1px solid var(--border);background:0 0;border-radius:8px;flex:1;padding:7px 0;font-size:12px;font-weight:700}.dow-pick button.active{background:var(--accent);border-color:var(--accent);color:#fff}.toggle{align-items:center;gap:10px;font-size:13.5px;display:flex}.toggle input{accent-color:var(--accent);width:16px;height:16px}.pop-actions{flex-wrap:wrap;gap:8px;display:flex}.danger-text{color:var(--red)}.modal-backdrop{z-index:50;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#05060c8c;place-items:center;padding:16px;animation:.15s fade;display:grid;position:fixed;inset:0}.modal{background:var(--card-solid);width:min(560px,100%);max-height:calc(100vh - 32px);padding:22px;animation:.2s cubic-bezier(.2,.9,.3,1.2) pop;overflow:auto}@keyframes fade{0%{opacity:0}}@keyframes pop{0%{opacity:0;transform:scale(.95)translateY(8px)}}.modal-head{justify-content:space-between;align-items:flex-start;margin-bottom:16px;display:flex}.modal-head h2{margin:0 0 6px;font-size:20px}.seg{background:var(--bg-2);border-radius:12px;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:16px;padding:4px;display:grid}.seg button{color:var(--muted);background:0 0;border:none;border-radius:9px;padding:8px 4px;font-size:12.5px;font-weight:600}.seg button.active{background:var(--card-solid);color:var(--text);box-shadow:0 2px 8px #00000026}.sessions-edit{flex-direction:column;gap:8px;margin-bottom:16px;display:flex}.empty{border:1px dashed var(--border-strong);text-align:center;color:var(--muted);border-radius:14px;flex-direction:column;align-items:center;gap:8px;padding:18px;display:flex}.sess-row{background:var(--bg-2);border-radius:14px;grid-template-columns:26px 1fr 18px 1fr 68px 36px;align-items:end;gap:8px;padding:10px;display:grid}.sess-row label{color:var(--muted);flex-direction:column;gap:4px;font-size:11.5px;font-weight:600;display:flex}.sess-row input{background:var(--card-solid);text-align:center;width:100%;font-family:JetBrains Mono,monospace;font-size:15px}.sess-row input.invalid{border-color:var(--red);background:color-mix(in srgb, var(--red) 10%, var(--card-solid))}.sess-idx{background:color-mix(in srgb, var(--accent) 20%, transparent);width:26px;height:26px;color:var(--accent);border-radius:8px;align-self:center;place-items:center;font-size:12px;font-weight:800;display:grid}.arrow{color:var(--muted);text-align:center;padding-bottom:10px}.sess-dur{text-align:right;font-variant-numeric:tabular-nums;padding-bottom:10px;font-size:13px;font-weight:700}.btn.add{border-style:dashed}.note-field{color:var(--muted);flex-direction:column;gap:6px;margin-bottom:18px;font-size:13px;font-weight:600;display:flex}.modal-foot{justify-content:space-between;align-items:center;gap:12px;display:flex}.total{color:var(--muted)}.total strong{color:var(--text);font-size:18px}.foot-actions{gap:8px;display:flex}.toast{background:var(--card-solid);border:1px solid var(--border-strong);box-shadow:var(--shadow);z-index:60;border-radius:14px;padding:12px 20px;font-weight:600;animation:.25s ease-out toast;position:fixed;bottom:28px;left:50%;transform:translate(-50%)}@keyframes toast{0%{opacity:0;transform:translate(-50%,10px)}}@media (width<=900px){.stats{grid-template-columns:repeat(2,1fr)}.punch{grid-template-columns:1fr}.hint{display:none}}@media (width<=560px){.app{padding:16px 16px 60px}.punch{padding:20px}.stats{grid-template-columns:1fr 1fr;gap:10px}.stat-value{font-size:24px}.table-head{display:none}.row{grid-template-columns:50px 1fr 60px 56px;gap:8px;padding:10px 8px}.row-edit{display:none}.row-dow{font-size:11px}.row-day{flex-direction:column;gap:0}.chip{padding:3px 7px;font-size:11.5px}.punch-meta strong{font-size:15px}.sess-row{grid-template-columns:1fr 1fr 36px}.sess-idx,.arrow,.sess-dur{display:none}.month-nav h2{min-width:0;font-size:20px}.seg{grid-template-columns:repeat(2,1fr)}}.login-page{place-items:center;min-height:100vh;padding:20px;display:grid;position:relative}.login{text-align:center;flex-direction:column;align-items:center;gap:12px;width:min(400px,100%);padding:36px 28px;display:flex}.login h1{letter-spacing:-.03em;margin:6px 0 0;font-size:30px;font-weight:800}.login p{color:var(--muted);margin:0 0 12px;line-height:1.5}.logo-lg{border-radius:20px;width:68px;height:68px;font-size:34px}.google-btn{border:1px solid var(--border-strong);color:#1f1f1f;background:#fff;border-radius:14px;justify-content:center;align-items:center;gap:12px;width:100%;padding:14px 18px;font-size:15px;font-weight:600;transition:transform .12s,box-shadow .2s;display:flex}.google-btn:hover{box-shadow:0 8px 24px -10px #00000080}.google-btn:active{transform:scale(.98)}.google-btn:disabled{opacity:.7;cursor:wait}.remember{color:var(--muted);margin-top:4px}.login-error{width:100%;color:var(--red);background:color-mix(in srgb, var(--red) 12%, transparent);border-radius:12px;padding:10px 12px;font-size:13.5px}.splash{place-items:center;min-height:100vh;display:grid}.pulse{animation:1.4s ease-in-out infinite breathe}@keyframes breathe{50%{opacity:.7;transform:scale(.92)}}.account{align-items:center;gap:10px;display:flex}.account img,.avatar-fallback{background:var(--accent);color:#fff;border-radius:50%;flex:none;place-items:center;width:38px;height:38px;font-weight:700;display:grid}.account div{flex-direction:column;flex:1;min-width:0;display:flex}.account strong{font-size:14px}.account span{color:var(--muted);text-overflow:ellipsis;font-size:12px;overflow:hidden}.settings-btn{align-items:center;gap:8px;display:inline-flex}.avatar-sm{border-radius:50%;width:22px;height:22px;margin:-4px 0}.banner{background:color-mix(in srgb, var(--amber) 12%, transparent);border:1px solid color-mix(in srgb, var(--amber) 30%, transparent);border-radius:14px;margin-bottom:16px;padding:12px 16px;font-size:14px}.banner-action{background:color-mix(in srgb, var(--accent) 12%, transparent);border-color:color-mix(in srgb, var(--accent) 35%, transparent);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.banner-action div{gap:8px;display:flex}@media (width<=560px){.hide-sm{display:none}.topbar{flex-wrap:nowrap}.brand span{display:none}}@supports (padding:env(safe-area-inset-top)){.app{padding-top:max(24px, env(safe-area-inset-top));padding-bottom:max(80px, env(safe-area-inset-bottom))}}.splash-inner{text-align:center;flex-direction:column;align-items:center;gap:14px;padding:20px;display:flex}.account-box{background:var(--bg-2);text-align:left;border-radius:14px;width:100%;padding:12px}