:root{--color-primary: #008ACB;--color-text: #333333;--color-bg: #FFFFFF;--color-success: #1BBD9B;--font-main: "Helvetica Neue", Helvetica, Arial, sans-serif}body{margin:0;font-family:var(--font-main);background-color:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased}#root{display:flex;flex-direction:column;height:100vh}.btn{border:none;border-radius:8px;padding:1.5rem;font-size:1.2rem;font-weight:700;cursor:pointer;transition:transform .1s,opacity .2s;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 6px #0000001a;text-transform:uppercase;letter-spacing:1px;position:relative;overflow:hidden}.btn:active:not(:disabled){transform:scale(.96);box-shadow:0 2px 3px #0000001a;filter:brightness(.9)}.btn:disabled{opacity:.4;cursor:not-allowed;background-color:#bdc3c7!important;box-shadow:none;transform:none;color:#7f8c8d}.btn-entry{background-color:var(--color-primary)}.btn-pause{background-color:#f39c12}.btn-exit{background-color:#e74c3c}.btn-report{background-color:var(--color-success)}.header{padding:1rem;background:#fff;border-bottom:2px solid var(--color-primary);display:flex;align-items:center;justify-content:center;gap:1rem;box-shadow:0 2px 4px #0000000d}.header img{height:50px;object-fit:contain}.header h1{font-size:1.2rem;color:var(--color-primary);margin:0;font-weight:500}.dashboard{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1.5rem;padding:1.5rem;max-width:600px;margin:0 auto;align-content:center;width:100%;box-sizing:border-box}.offline-banner{background:#e74c3c;color:#fff;text-align:center;padding:.5rem;font-size:.9rem;position:sticky;top:0;z-index:100}.status-message{text-align:center;padding:1rem;font-weight:700;color:var(--color-primary)}