:root{--content-bg: #16161e;--sidebar-bg: rgba(22, 22, 30, .4);--card-bg: rgba(30, 30, 42, .65);--card-hover-bg: rgba(36, 36, 50, .85);--border-color: rgba(255, 255, 255, .08);--border-hover: rgba(255, 255, 255, .15);--text-main: #ffffff;--text-secondary: #a0a0ab;--text-muted: #646470;--accent-blue: #0a84ff;--accent-blue-rgb: 10, 132, 255;--accent-green: #30d158;--accent-green-glow: rgba(48, 209, 88, .15);--accent-red: #ff453a;--accent-red-glow: rgba(255, 69, 58, .15);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .15);--shadow-md: 0 8px 24px rgba(0, 0, 0, .3);--shadow-lg: 0 16px 40px rgba(0, 0, 0, .4);--font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--sidebar-width: 240px;--titlebar-height: 38px}[data-theme=light]{--content-bg: #f5f5f7;--sidebar-bg: rgba(235, 235, 237, .6);--card-bg: rgba(255, 255, 255, .75);--card-hover-bg: rgba(255, 255, 255, .95);--border-color: rgba(0, 0, 0, .08);--border-hover: rgba(0, 0, 0, .15);--text-main: #1d1d1f;--text-secondary: #515154;--text-muted: #86868b;--accent-blue: #007aff;--accent-blue-rgb: 0, 122, 255;--accent-green: #34c759;--accent-green-glow: rgba(52, 199, 89, .12);--accent-red: #ff3b30;--accent-red-glow: rgba(255, 59, 48, .12);--shadow-sm: 0 2px 6px rgba(0, 0, 0, .05);--shadow-md: 0 6px 18px rgba(0, 0, 0, .08);--shadow-lg: 0 12px 30px rgba(0, 0, 0, .12)}*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none}body{font-family:var(--font-stack);background-color:var(--content-bg);color:var(--text-main);overflow:hidden;height:100vh;width:100vw;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{display:flex;height:100vh;width:100vw;overflow:hidden}.app-container{display:flex;width:100vw;height:100vh;overflow:hidden}.sidebar{width:var(--sidebar-width);background-color:var(--sidebar-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-right:1px solid var(--border-color);display:flex;flex-direction:column;height:100%;padding-top:var(--titlebar-height);-webkit-app-region:drag;flex-shrink:0;transition:width .2s cubic-bezier(.4,0,.2,1)}.sidebar.collapsed{width:64px}.sidebar-toggle-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:6px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .15s ease;-webkit-app-region:no-drag}.sidebar-toggle-btn:hover{background-color:#ffffff0f;color:var(--text-main)}[data-theme=light] .sidebar-toggle-btn:hover{background-color:#0000000a}.sidebar-content{display:flex;flex-direction:column;height:100%;padding:16px 12px 24px;-webkit-app-region:no-drag}.sidebar-title{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px;padding-left:12px}.nav-list{list-style:none;display:flex;flex-direction:column;gap:4px;flex:1}.nav-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease}.nav-item:hover{background-color:#ffffff0d;color:var(--text-main)}[data-theme=light] .nav-item:hover{background-color:#0000000a}.nav-item.active{background-color:var(--accent-blue);color:#fff!important}.nav-icon{width:16px;height:16px}.sidebar-footer{margin-top:auto;padding:12px;border-radius:8px;background-color:#ffffff05;border:1px solid var(--border-color)}[data-theme=light] .sidebar-footer{background-color:#00000003}.sidebar-status{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px}.status-dot{width:8px;height:8px;border-radius:50%;background-color:var(--text-muted);position:relative}.status-dot.active{background-color:var(--accent-green);box-shadow:0 0 8px var(--accent-green)}.status-dot.active:after{content:"";position:absolute;top:-2px;left:-2px;width:12px;height:12px;border-radius:50%;border:1px solid var(--accent-green);opacity:.8;animation:pulse-ring 1.8s infinite}@keyframes pulse-ring{0%{transform:scale(.6);opacity:1}to{transform:scale(1.6);opacity:0}}.sidebar-status-text{font-size:13px;font-weight:600;color:var(--text-main);margin-top:4px}.main-content{flex:1;display:flex;flex-direction:column;height:100%;overflow-y:auto;padding:40px 48px;position:relative;-webkit-app-region:no-drag}.view-header{margin-bottom:28px;display:flex;justify-content:space-between;align-items:center}.view-title-group h1{font-size:28px;font-weight:700;letter-spacing:-.5px;color:var(--text-main)}.view-title-group p{font-size:13px;color:var(--text-secondary);margin-top:4px}.card{background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;padding:24px;box-shadow:var(--shadow-md);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease}.card:hover{background-color:var(--card-hover-bg);border-color:var(--border-hover)}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:24px}.kpi-card{display:flex;flex-direction:column;padding:20px}.kpi-label{font-size:11px;font-weight:600;text-transform:uppercase;color:var(--text-secondary);letter-spacing:.5px;margin-bottom:8px}.kpi-value{font-size:28px;font-weight:700;color:var(--text-main);letter-spacing:-.5px}.kpi-subtext{font-size:12px;color:var(--text-muted);margin-top:4px}.timer-container{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;max-width:600px;margin:0 auto;width:100%;gap:32px}.clock-display{font-size:64px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-1.5px;margin:20px 0;color:var(--text-main);text-shadow:0 4px 20px rgba(0,0,0,.15)}.clock-button{width:160px;height:160px;border-radius:50%;border:none;font-size:18px;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;transition:all .3s cubic-bezier(.16,1,.3,1);box-shadow:0 10px 30px #00000040;position:relative;overflow:hidden}.clock-button.clocked-out{background:linear-gradient(135deg,#2ecc71,#10b981);box-shadow:0 8px 24px #2ecc714d}.clock-button.clocked-out:hover{transform:scale(1.04);box-shadow:0 12px 32px #2ecc7173}.clock-button.clocked-in{background:linear-gradient(135deg,#ff453a,#ff3b30);box-shadow:0 8px 24px #ff453a59;animation:pulse-button 2.5s infinite alternate}.clock-button.clocked-in:hover{transform:scale(1.04);box-shadow:0 12px 32px #ff453a80}@keyframes pulse-button{0%{box-shadow:0 8px 24px #ff453a4d}to{box-shadow:0 12px 36px #ff453a99}}.clock-button-sub{font-size:11px;font-weight:500;opacity:.8;margin-top:4px;text-transform:uppercase}.note-container{width:100%;max-width:450px;display:flex;flex-direction:column;gap:8px}.input-label{font-size:11px;font-weight:600;text-transform:uppercase;color:var(--text-secondary);letter-spacing:.5px}.text-input{background-color:#ffffff08;border:1px solid var(--border-color);border-radius:8px;padding:12px 14px;color:var(--text-main);font-size:14px;outline:none;font-family:inherit;transition:all .15s ease}[data-theme=light] .text-input{background-color:#00000005}.text-input:focus{border-color:var(--accent-blue);background-color:#ffffff0d;box-shadow:0 0 0 3px rgba(var(--accent-blue-rgb),.15)}[data-theme=light] .text-input:focus{background-color:#fff}.chart-container{margin-top:12px;height:200px;display:flex;align-items:flex-end;justify-content:space-between;padding:10px 10px 0;position:relative}.chart-bar-wrapper{display:flex;flex-direction:column;align-items:center;flex:1;height:100%;justify-content:flex-end;gap:8px}.chart-bar-hover-val{font-size:11px;font-weight:600;opacity:0;transform:translateY(4px);transition:all .15s ease;color:var(--text-main)}.chart-bar-wrapper:hover .chart-bar-hover-val{opacity:1;transform:translateY(0)}.chart-bar{width:65%;max-width:32px;background:linear-gradient(to top,rgba(var(--accent-blue-rgb),.7),var(--accent-blue));border-radius:4px 4px 0 0;transition:height .6s cubic-bezier(.16,1,.3,1),opacity .15s ease;min-height:2px}.chart-bar-wrapper:hover .chart-bar{opacity:.85;filter:brightness(1.1);box-shadow:0 4px 12px rgba(var(--accent-blue-rgb),.3)}.chart-label{font-size:11px;color:var(--text-secondary);font-weight:500}.chart-empty-state{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:13px;color:var(--text-muted)}.table-container{overflow-x:auto;margin-top:16px}.data-table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}.data-table th{padding:12px 16px;font-weight:600;color:var(--text-secondary);border-bottom:1px solid var(--border-color);font-size:11px;text-transform:uppercase;letter-spacing:.5px}.data-table td{padding:14px 16px;border-bottom:1px solid var(--border-color);color:var(--text-main);vertical-align:middle}.data-table tbody tr{transition:background-color .1s ease}.data-table tbody tr:hover{background-color:#ffffff05}[data-theme=light] .data-table tbody tr:hover{background-color:#00000003}.filter-bar{display:flex;gap:12px;margin-bottom:20px;align-items:center;flex-wrap:wrap}.select-input{background-color:#ffffff0a;border:1px solid var(--border-color);color:var(--text-main);padding:8px 12px;border-radius:6px;font-size:13px;outline:none;cursor:pointer;transition:all .15s ease}[data-theme=light] .select-input{background-color:#fff}.select-input:focus{border-color:var(--accent-blue);box-shadow:0 0 0 2px rgba(var(--accent-blue-rgb),.15)}.button-action{background-color:#ffffff0d;border:1px solid var(--border-color);color:var(--text-main);padding:8px 16px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .15s ease}[data-theme=light] .button-action{background-color:#fff}.button-action:hover{background-color:#ffffff14;border-color:var(--border-hover)}[data-theme=light] .button-action:hover{background-color:#00000008}.button-action.primary{background-color:var(--accent-blue);color:#fff;border:none}.button-action.primary:hover{background-color:#0076e5}.button-action.danger{color:var(--accent-red)}.button-action.danger:hover{background-color:var(--accent-red-glow)}.settings-section{margin-bottom:32px}.settings-section-title{font-size:16px;font-weight:600;margin-bottom:16px;color:var(--text-main);border-bottom:1px solid var(--border-color);padding-bottom:8px}.settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.setting-item{display:flex;flex-direction:column;gap:8px}.setting-hint{font-size:12px;color:var(--text-muted);margin-top:-2px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}[data-theme=light] ::-webkit-scrollbar-thumb{background:#0000001f}::-webkit-scrollbar-thumb:hover{background:#ffffff2e}[data-theme=light] ::-webkit-scrollbar-thumb:hover{background:#0003}@media print{body{background:#fff!important;color:#000!important}.sidebar,.filter-bar,.button-action,::-webkit-scrollbar{display:none!important}.main-content{padding:0!important;overflow:visible!important;height:auto!important}.card{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;margin-bottom:24px;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}.data-table th{border-bottom:2px solid #000000!important;color:#000!important}.data-table td{border-bottom:1px solid #dddddd!important;color:#000!important}}.mobile-topbar{display:none;align-items:center;justify-content:space-between;padding:16px 20px;background-color:var(--sidebar-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-color);-webkit-app-region:drag}@media (max-width: 768px){.app-container{flex-direction:column}.mobile-topbar{display:flex}.sidebar{position:fixed;z-index:1000;top:0;left:-100%;height:100vh;width:280px!important;padding-top:20px}.sidebar.mobile-open{left:0}.mobile-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:999;display:none}.mobile-overlay.open{display:block}.main-content{padding:20px 16px;height:auto;flex:1}.stats-grid{grid-template-columns:1fr;gap:16px}.settings-grid{grid-template-columns:1fr}.clock-display{font-size:48px}.clock-button{width:140px;height:140px}.filter-bar{flex-direction:column;align-items:stretch}.view-header{flex-direction:column;align-items:flex-start;gap:16px}.sidebar-toggle-btn{display:none}}@keyframes pulse{0%{opacity:.6}50%{opacity:.3}to{opacity:.6}}.skeleton{animation:pulse 1.5s infinite ease-in-out;background-color:#ffffff14;border-radius:4px;display:inline-block}