.account-bar { display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:22px; color:#4b5563; font-size:.9rem; }
.account-bar a,.account-bar button { min-height:42px; display:inline-flex; align-items:center; padding:8px 13px; border:1px solid #d1d5db; border-radius:9px; background:#fff; color:#4f46a5; font:inherit; font-weight:700; text-decoration:none; cursor:pointer; }
.account-bar form { display:inline; }.account-bar .account-primary { color:#fff; background:#667eea; border-color:#667eea; }
.guest-badge { margin-right:auto; padding:8px 11px; border-radius:999px; background:#eef2ff; color:#4338ca; }
.alert-account-bar { width:min(900px,100%); color:#fff; margin:0 auto 8px; }.alert-account-bar a { background:rgba(255,255,255,.96); }
.secondary-link { margin-left:8px; background:#fff; color:#5b5fc7; border:2px solid #667eea; }
.auth-page,.statistics-page { min-height:100vh; padding:24px; background:linear-gradient(135deg,#667eea,#764ba2); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#1f2937; }
.auth-card,.statistics-shell { width:min(100%,980px); margin:5vh auto; padding:28px; border-radius:18px; background:#fff; box-shadow:0 18px 50px rgba(0,0,0,.25); }.auth-card { max-width:460px; }
.auth-card h1,.statistics-shell h1 { margin-bottom:8px; }.auth-card label { display:grid; gap:7px; margin:18px 0; font-weight:700; }.auth-card input { width:100%; min-height:48px; padding:10px 12px; border:1px solid #cbd5e1; border-radius:9px; font:inherit; }
.auth-submit { width:100%; min-height:48px; border:0; border-radius:9px; background:#667eea; color:#fff; font:inherit; font-weight:800; cursor:pointer; }.auth-error { padding:12px; margin:16px 0; border-left:4px solid #dc2626; background:#fef2f2; color:#991b1b; }.auth-note { margin-top:16px; color:#64748b; line-height:1.5; }
.statistics-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:22px 0; }.metric { padding:18px; border-radius:12px; background:#f8fafc; border-left:4px solid #667eea; }.metric strong { display:block; margin-top:6px; font-size:1.7rem; }.trend-list { display:grid; gap:10px; }.trend-row { display:grid; grid-template-columns:100px 1fr 70px; gap:12px; align-items:center; }.trend-bar { height:18px; display:flex; overflow:hidden; border-radius:999px; background:#e5e7eb; }.trend-bar span { min-width:0; }.trend-good { background:#22c55e; }.trend-wasted { background:#ef4444; }.trend-missed { background:#9ca3af; }
@media (max-width:700px) { .account-bar { justify-content:flex-start; }.guest-badge { width:100%; margin:0; }.statistics-grid { grid-template-columns:1fr 1fr; }.trend-row { grid-template-columns:74px 1fr; }.trend-row output { grid-column:2; }.secondary-link { margin:10px 0 0; display:block; } }
.site-header { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; margin-bottom:28px; padding:10px 0 16px; border-bottom:1px solid #e5e7eb; }
.site-brand { display:inline-flex; align-items:center; gap:9px; color:#312e81; font-size:1.05rem; font-weight:850; text-decoration:none; white-space:nowrap; }.site-brand-logo { width:32px; height:32px; flex:0 0 auto; filter:drop-shadow(0 4px 7px rgba(79,70,229,.2)); }.site-menu,.site-account { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }.site-menu a,.site-account a,.site-account button { min-height:42px; display:inline-flex; align-items:center; padding:8px 11px; border:0; border-radius:8px; background:transparent; color:#4b5563; font:inherit; font-weight:700; text-decoration:none; cursor:pointer; }.site-menu a[aria-current="page"] { background:#eef2ff; color:#4338ca; }.site-account form { display:inline; }.site-account .site-signup { background:#667eea; color:#fff; }.site-account span { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.82rem; color:#6b7280; }
.dashboard-interval-form { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; }.dashboard-interval-form select,.dashboard-interval-form input { min-height:42px; padding:8px 10px; border:1px solid #d1d5db; border-radius:8px; font:inherit; }.dashboard-interval-form input { width:110px; }.dashboard-interval-form .hidden { display:none; }.dashboard-interval-form button { min-height:42px; padding:8px 12px; border:0; border-radius:8px; background:#667eea; color:#fff; font:inherit; font-weight:700; }
.settings-page { min-height:100vh; padding:24px; background:linear-gradient(135deg,#667eea,#764ba2); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#1f2937; }.settings-shell { width:min(100%,850px); margin:3vh auto; padding:28px; border-radius:18px; background:#fff; box-shadow:0 18px 50px rgba(0,0,0,.25); }.settings-card { margin-top:22px; padding:20px; border:1px solid #e5e7eb; border-radius:12px; background:#f8fafc; }.settings-card h2 { margin-bottom:12px; }.settings-form,.settings-volume { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }.settings-form input { width:90px; min-height:44px; padding:8px; border:1px solid #cbd5e1; border-radius:8px; font:inherit; }.settings-form button,.settings-primary { min-height:44px; padding:9px 14px; border:0; border-radius:8px; background:#667eea; color:#fff; font:inherit; font-weight:750; cursor:pointer; }.settings-volume input { flex:1; min-width:160px; }.settings-notice { margin:14px 0; font-weight:650; }.settings-help { margin-top:13px; color:#64748b; line-height:1.5; }
.settings-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; }.settings-secondary { min-height:44px; padding:9px 14px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; color:#475569; font:inherit; font-weight:750; cursor:pointer; }.settings-notice.error { color:#b91c1c; }
.alarm-master-control { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:14px 0; padding:13px 15px; border:1px solid #c7d2fe; border-radius:12px; background:#eef2ff; cursor:pointer; }.alarm-master-copy { display:grid; gap:3px; color:#3730a3; }.alarm-master-copy small { color:#5b6475; font-weight:500; }.toggle-switch { position:relative; width:54px; height:30px; flex:0 0 auto; }.toggle-switch input { position:absolute; width:1px; height:1px; opacity:0; }.toggle-switch span { position:absolute; inset:0; border-radius:999px; background:#94a3b8; transition:background-color .18s ease; }.toggle-switch span::after { content:""; position:absolute; top:4px; left:4px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(15,23,42,.3); transition:transform .18s ease; }.toggle-switch input:checked + span { background:#4f46e5; }.toggle-switch input:checked + span::after { transform:translateX(24px); }.toggle-switch input:focus-visible + span { outline:3px solid #f59e0b; outline-offset:3px; }.alert-alarm-master { width:min(100%,520px); color:#1f2937; text-align:left; }
@media (max-width:760px) { .site-header { grid-template-columns:1fr; gap:9px; }.site-menu { display:grid; grid-template-columns:repeat(4,1fr); width:100%; }.site-menu a { justify-content:center; padding:7px 4px; font-size:.82rem; }.site-account { justify-content:flex-start; }.settings-page { padding:10px; }.settings-shell { padding:18px; }.dashboard-interval-form { align-items:stretch; flex-direction:column; }.dashboard-interval-form input,.dashboard-interval-form select,.dashboard-interval-form button { width:100%; } }
.auth-card.auth-card-wide { max-width:900px; }.auth-form-panel { max-width:460px; margin:0 auto; }.waiting-screen > .site-header { width:min(900px,100%); flex:0 0 auto; padding:10px 16px; border-radius:12px; background:rgba(255,255,255,.96); }
.alarm-navigation { position:fixed; top:12px; left:50%; z-index:9000; width:min(940px,calc(100% - 24px)); transform:translateX(-50%); }.alarm-navigation .site-header { width:100%; margin:0; padding:10px 16px; border:1px solid rgba(255,255,255,.7); border-radius:14px; background:#fff; box-shadow:0 8px 28px rgba(31,41,55,.24); }.waiting-screen.alarm-has-nav { padding-top:125px; }
@media (max-width:760px) { .alarm-navigation { top:8px; width:calc(100% - 16px); }.alarm-navigation .site-header { padding:9px 11px; }.waiting-screen.alarm-has-nav { padding-top:205px; } }

/* Consistent interactive feedback across every page. */
button,
.alert-button,
.account-bar a,
.site-menu a,
.site-account a {
    --button-glow: rgba(102, 126, 234, 0.34);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.response-button.deep-work,
.dashboard-response-button.deep-work { --button-glow: rgba(34, 197, 94, 0.42); }
.response-button.shallow-work,
.dashboard-response-button.shallow-work { --button-glow: rgba(234, 179, 8, 0.42); }
.response-button.time-wasted,
.dashboard-response-button.time-wasted,
button.delete { --button-glow: rgba(239, 68, 68, 0.36); }

@media (hover: hover) {
    button:not(:disabled):hover,
    .alert-button:hover,
    .account-bar a:hover,
    .site-menu a:hover,
    .site-account a:hover {
        filter: brightness(1.06);
        transform: translateY(-2px);
        box-shadow: 0 8px 22px var(--button-glow);
    }
}

button:not(:disabled):focus-visible,
.alert-button:focus-visible,
.account-bar a:focus-visible,
.site-menu a:focus-visible,
.site-account a:focus-visible {
    outline: 3px solid #f59e0b;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px var(--button-glow);
}

button:not(:disabled):active,
.alert-button:active,
.account-bar a:active,
.site-menu a:active,
.site-account a:active {
    filter: brightness(0.98);
    transform: translateY(0) scale(0.98);
}

button:disabled {
    filter: none;
    transform: none;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    button,
    .alert-button,
    .account-bar a,
    .site-menu a,
    .site-account a {
        transition: none;
    }
}