@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";*,:before,:after{box-sizing:border-box}html,body,#root{height:100%}body{margin:0}:root{--bg:#0c0c0e;--bg-panel:#111115;--bg-raised:#18181e;--bg-hover:#1e1e26;--bg-active:#6366f112;--border:#ffffff12;--border-strong:#ffffff1c;--border-focus:#6366f18c;--border-accent:#6366f159;--text-1:#f1f1f5;--text-2:#9595aa;--text-3:#4a4a60;--accent:#6366f1;--accent-light:#818cf8;--accent-glow:#6366f124;--accent-shadow:#6366f140;--danger:#e54545;--danger-light:#f87171;--danger-glow:#e545451f;--radius-lg:12px;--radius:8px;--radius-sm:5px;--radius-xs:4px;--font:"Inter", system-ui, -apple-system, sans-serif;--shadow-panel:0 1px 3px #00000080, 0 0 0 1px #ffffff0a;--shadow-raised:0 4px 16px #00000080}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text-1);font-family:var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;font-size:14px;line-height:1.5}.app{flex-direction:column;min-height:100vh;display:flex}.app-header{z-index:100;-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);background:#0c0c0ed9;position:sticky;top:0}.app-header-inner{justify-content:space-between;align-items:center;gap:16px;max-width:960px;height:52px;margin:0 auto;padding:0 28px;display:flex}.logo{-webkit-user-select:none;user-select:none;flex-shrink:0;align-items:baseline;text-decoration:none;display:flex}.logo-c{color:var(--accent-light);letter-spacing:-.5px;font-size:17px;font-style:italic;font-weight:700}.logo-lock{color:var(--text-1);letter-spacing:-.5px;font-size:17px;font-weight:700}.logo-in{color:var(--text-3);letter-spacing:-.5px;margin-left:3px;font-size:17px;font-weight:400}.app-nav{align-items:center;gap:2px;display:flex}.nav-link{color:var(--text-3);border-radius:var(--radius-sm);padding:5px 12px;font-size:13px;font-weight:500;text-decoration:none;transition:color .15s,background .15s}.nav-link:hover{color:var(--text-2);background:var(--bg-hover)}.nav-link--active{color:var(--text-1);background:var(--bg-raised)}.home{flex:1;justify-content:center;align-items:center;display:flex}.btn-clock-in{background:var(--accent);color:#fff;font-family:var(--font);letter-spacing:-.01em;cursor:pointer;box-shadow:0 0 48px var(--accent-shadow);border:none;border-radius:999px;padding:18px 56px;font-size:18px;font-weight:600;transition:background .15s,transform .15s,box-shadow .15s}.btn-clock-in:hover{background:var(--accent-light);box-shadow:0 0 72px var(--accent-shadow);transform:scale(1.03)}.btn-clock-in:active{transform:scale(.98)}.picker-overlay{z-index:150;-webkit-backdrop-filter:blur(6px);background:#0000008c;justify-content:center;align-items:center;animation:.15s fadeIn;display:flex;position:fixed;inset:0}.picker{background:var(--bg-panel);border:1px solid var(--border-strong);border-radius:var(--radius-lg);flex-direction:column;gap:14px;width:360px;max-width:calc(100vw - 32px);padding:20px;animation:.2s cubic-bezier(.16,1,.3,1) pickerEnter;display:flex;box-shadow:0 24px 64px #0009}.picker-header{justify-content:space-between;align-items:center;display:flex}.picker-title{color:var(--text-1);font-size:14px;font-weight:600}.picker-list{flex-direction:column;gap:4px;max-height:260px;list-style:none;display:flex;overflow-y:auto}.picker-item{border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-raised);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;padding:10px 12px;transition:background .12s,border-color .12s;display:flex}.picker-item:hover{background:var(--bg-hover);border-color:var(--border-strong)}.picker-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.picker-name{color:var(--text-1);font-size:13px;font-weight:500}.picker-separator{color:var(--text-3);letter-spacing:.02em;align-items:center;gap:10px;font-size:11px;font-weight:500;display:flex}.picker-separator:before,.picker-separator:after{content:"";background:var(--border);flex:1;height:1px}.picker-new{gap:8px;display:flex}.focus-mode{z-index:200;background:#000;flex-direction:column;justify-content:center;align-items:center;animation:.35s cubic-bezier(.16,1,.3,1) focusEnter;display:flex;position:fixed;inset:0}.focus-content{flex-direction:column;align-items:center;gap:16px;display:flex}.focus-timer{font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:#fff;font-size:clamp(64px,14vw,112px);font-weight:200;line-height:1}.focus-project-name{letter-spacing:.1em;text-transform:uppercase;opacity:.45;font-size:13px;font-weight:500}.focus-clock-out{color:#ffffff4d;font-family:var(--font);letter-spacing:.02em;cursor:pointer;background:0 0;border:1px solid #ffffff1a;border-radius:999px;padding:11px 36px;font-size:13px;font-weight:500;transition:color .2s,border-color .2s,background .2s;position:absolute;bottom:52px}.focus-clock-out:hover{color:#ffffffb3;background:#ffffff0d;border-color:#ffffff40}.stats-page{flex-direction:column;gap:20px;width:100%;max-width:960px;margin:0 auto;padding:28px;display:flex}.stats-cards{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.stat-value--sm{white-space:nowrap;text-overflow:ellipsis;font-size:16px;overflow:hidden}.panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-panel);flex-direction:column;gap:16px;padding:20px;display:flex}.panel-header{justify-content:space-between;align-items:center;gap:8px;display:flex}.panel-title{color:var(--text-1);letter-spacing:-.01em;font-size:13px;font-weight:600}.panel-badge{color:var(--text-3);background:var(--bg-raised);border:1px solid var(--border);border-radius:20px;padding:1px 8px;font-size:11px;font-weight:600;line-height:1.6}.btn{border-radius:var(--radius-sm);font-family:var(--font);cursor:pointer;white-space:nowrap;border:1px solid #0000;justify-content:center;align-items:center;gap:5px;padding:7px 14px;font-size:13px;font-weight:600;line-height:1;transition:background .15s,color .15s,border-color .15s,box-shadow .15s,transform .12s,opacity .15s;display:inline-flex}.btn:disabled{opacity:.3;cursor:not-allowed;box-shadow:none!important;transform:none!important}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-light);box-shadow:0 4px 14px var(--accent-shadow);transform:translateY(-1px)}.btn-primary:active:not(:disabled){box-shadow:none;transform:translateY(0)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover:not(:disabled){background:var(--danger-light);box-shadow:0 4px 12px var(--danger-glow);transform:translateY(-1px)}.btn-danger-outline{color:var(--danger-light);background:0 0;border-color:#e545454d}.btn-danger-outline:hover:not(:disabled){background:var(--danger-glow);border-color:var(--danger)}.btn-ghost{color:var(--text-3);border-color:var(--border);background:0 0}.btn-ghost:hover:not(:disabled){background:var(--bg-hover);color:var(--text-2);border-color:var(--border-strong)}.btn-sm{padding:5px 10px;font-size:12px}.btn-icon{border-radius:var(--radius-xs);padding:5px 7px}.input{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-1);font-family:var(--font);outline:none;flex:1;min-width:0;padding:8px 12px;font-size:13px;transition:border-color .15s,box-shadow .15s}.input:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-glow)}.input::placeholder{color:var(--text-3)}.stat-card{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:4px;padding:16px;display:flex}.stat-label{color:var(--text-3);letter-spacing:.04em;text-transform:uppercase;font-size:11px;font-weight:500}.stat-value{letter-spacing:-.5px;color:var(--text-1);font-variant-numeric:tabular-nums;font-size:22px;font-weight:700;line-height:1.2}.dashboard-list{flex-direction:column;gap:14px;list-style:none;display:flex}.dashboard-item{flex-direction:column;gap:5px;display:flex}.dashboard-item-header{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.dashboard-project-name{letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:600;overflow:hidden}.dashboard-project-time{color:var(--text-2);font-variant-numeric:tabular-nums;flex-shrink:0;font-size:12px;font-weight:600}.progress-track{background:var(--bg-hover);border-radius:99px;height:3px;overflow:hidden}.progress-fill{opacity:.8;border-radius:99px;height:100%;transition:width .5s cubic-bezier(.16,1,.3,1)}.dashboard-meta{justify-content:space-between;align-items:center;display:flex}.dashboard-session-count{color:var(--text-3);font-size:11px}.dashboard-pct{color:var(--text-3);font-variant-numeric:tabular-nums;font-size:11px}.log-table-wrapper{border-radius:var(--radius);border:1px solid var(--border);overflow-x:auto}.log-table{border-collapse:collapse;width:100%;font-size:13px}.log-table thead{z-index:1;position:sticky;top:0}.log-table th{background:var(--bg-raised);color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;text-align:left;white-space:nowrap;border-bottom:1px solid var(--border);padding:10px 16px;font-size:11px;font-weight:600}.log-table th:first-child{border-radius:var(--radius) 0 0 0}.log-table th:last-child{border-radius:0 var(--radius) 0 0}.log-table td{color:var(--text-2);border-bottom:1px solid var(--border);vertical-align:middle;padding:11px 16px;transition:background .1s}.log-table tbody tr:last-child td{border-bottom:none}.log-table tbody tr:hover td{background:var(--bg-hover)}.log-date{color:var(--text-1);white-space:nowrap;font-weight:500}.log-time{white-space:nowrap;font-variant-numeric:tabular-nums;font-size:12px}.log-duration{color:var(--text-1);font-variant-numeric:tabular-nums;font-weight:600}.log-project-badge{border-radius:var(--radius-xs);white-space:nowrap;background:#ffffff0a;border:1px solid;align-items:center;gap:5px;padding:2px 8px;font-size:11px;font-weight:600;display:inline-flex}.log-project-badge-dot{background:currentColor;border-radius:50%;flex-shrink:0;width:5px;height:5px}.btn-delete{opacity:0;transition:opacity .15s,background .15s,color .15s,border-color .15s}tr:hover .btn-delete{opacity:1}.chart-wrap{margin:0 -4px}.chart-wrap .recharts-wrapper{outline:none}.chart-wrap .recharts-surface{overflow:visible}.chart-tooltip{background:var(--bg-raised);border:1px solid var(--border-strong);border-radius:var(--radius);pointer-events:none;flex-direction:column;gap:5px;min-width:160px;padding:10px 12px;display:flex;box-shadow:0 8px 24px #00000080}.chart-tooltip-date{color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px;font-size:11px;font-weight:600}.chart-tooltip-row{align-items:center;gap:7px;display:flex}.chart-tooltip-dot{border-radius:50%;flex-shrink:0;width:6px;height:6px}.chart-tooltip-name{color:var(--text-2);white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:12px;overflow:hidden}.chart-tooltip-time{color:var(--text-1);font-variant-numeric:tabular-nums;flex-shrink:0;font-size:12px;font-weight:600}.chart-tooltip-total{border-top:1px solid var(--border);color:var(--text-2);justify-content:space-between;gap:12px;margin-top:2px;padding-top:5px;font-size:12px;font-weight:600;display:flex}.empty-state{color:var(--text-3);text-align:center;flex-direction:column;align-items:center;gap:6px;padding:28px 0 12px;display:flex}.empty-state-icon{opacity:.4;margin-bottom:2px;font-size:22px;line-height:1}.empty-state-text{color:var(--text-3);font-size:13px;font-weight:500}@keyframes focusEnter{0%{opacity:0}to{opacity:1}}@keyframes pickerEnter{0%{opacity:0;transform:scale(.97)translateY(4px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (width<=640px){.app-header-inner{padding:0 16px}.stats-page{gap:14px;padding:16px}.stats-cards{grid-template-columns:1fr 1fr}.stats-cards .stat-card:last-child{grid-column:1/-1}.panel{padding:16px}}