.auth-page,.staff-page{margin:0;background:#f5f7fb;color:#243247;font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.auth-page{min-height:100dvh;display:grid;place-items:center;padding:24px;box-sizing:border-box}.login-card{width:min(100%,390px);background:#fff;border:1px solid #e4e9f1;border-radius:24px;padding:38px;box-shadow:0 16px 60px #2138580a}.auth-logo{display:block;width:56px;height:56px;object-fit:contain;margin-bottom:24px}.login-card h1,.staff-heading h1{font-size:27px;line-height:1.2;letter-spacing:-.6px;margin:0 0 12px}.auth-muted{color:#718097;font-size:14px}.auth-note{font-size:12px;color:#748297;line-height:1.6;margin-top:24px}.login-card form,.auth-dialog form{display:grid;gap:16px;margin-top:26px}.login-card label,.auth-dialog label{display:grid;gap:7px;font-size:13px;font-weight:600}.login-card input,.auth-dialog input:not(.ui-field),.auth-dialog select:not(.ui-field){box-sizing:border-box;min-width:0;width:100%;border:1px solid #d8e0eb;border-radius:10px;padding:11px 12px;background:#fff;color:#243247;font:inherit;outline-offset:3px}.login-card input:focus,.auth-dialog input:not(.ui-field):focus{outline:2px solid #a8c6ff}.auth-primary:not(.ui-button){background:#326cda!important;border:1px solid #326cda!important;color:#fff!important;font-weight:600;border-radius:10px;padding:11px 18px;cursor:pointer;font-size:14px}.auth-primary:not(.ui-button):disabled{opacity:.55;cursor:wait}.auth-error{color:#ad3346;font-size:13px;min-height:1em;margin:0}.auth-dialog{width:min(440px,calc(100vw - 56px));border:1px solid #e0e6ef;border-radius:20px;padding:28px;color:#243247;background:white;font:14px/1.5 var(--ui-font,system-ui);max-height:85dvh;overflow:auto}.auth-dialog::backdrop{background:#182b4655;backdrop-filter:blur(3px)}.auth-dialog h2{font-size:21px;margin:0}.auth-dialog form{margin:0}.auth-dialog small{font-weight:400;color:#718097;font-size:11px}.auth-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center;flex-wrap:wrap}.auth-actions button:not(.ui-button){padding:9px 13px;border:1px solid #dde4ee;background:white;color:#415673;border-radius:9px;cursor:pointer;font:inherit}.staff-header{padding:16px max(24px,calc((100vw - 1080px)/2));background:white;border-bottom:1px solid #e2e8f0}.staff-header>a{font-size:13px;text-decoration:none;color:#456b9c}.staff-main{max-width:1080px;margin:42px auto;padding:0 24px}.staff-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:28px}.staff-list{display:grid;gap:12px;margin-top:12px}.staff-card{background:white;border:1px solid #e1e7f0;border-radius:16px;padding:22px;display:flex;justify-content:space-between;gap:20px;align-items:center}.staff-card h2{font-size:17px;margin:0 0 5px}.staff-card p{font-size:12px;color:#718097;margin:0 0 9px}.staff-signature{display:inline-block;font-size:11px;background:#f0f5fc;border-radius:6px;padding:4px 8px;color:#567193}.staff-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.auth-dialog .auth-check{display:flex;align-items:center}.auth-check input{width:auto}.message-meta{display:flex;align-items:baseline;justify-content:flex-end;gap:12px;margin-top:7px}.message-bubble .message-meta time{margin-top:0}.message-author{font-size:11px;opacity:.75;margin-right:auto}[hidden]{display:none!important}@media(max-width:640px){.login-card{padding:26px;box-sizing:border-box}.staff-heading,.staff-card{align-items:stretch;flex-direction:column}.staff-main{margin-top:26px}.staff-fields{grid-template-columns:1fr}.staff-heading h1{font-size:23px}}
/* Account panel: a compact popover on desktop, a separate screen on mobile. */
.account-menu {
    position:fixed; z-index:80; left:calc(var(--workspace-rail) + 12px); bottom:18px;
    box-sizing:border-box; width:380px; max-width:calc(100vw - 28px); max-height:min(86dvh, 760px);
    overflow-y:auto; overscroll-behavior:contain; padding:20px; border:1px solid #e5e9f0;
    border-radius:24px; background:#f6f7fa; box-shadow:0 24px 80px #162b4829;
    color:#202b3c; font:13px/1.45 var(--ui-font,system-ui);
    scrollbar-width:thin;
}
.account-menu *, .account-menu *::before, .account-menu *::after { box-sizing:border-box; }
.account-menu svg { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.account-menu-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 18px; }
.account-menu-header h2 { margin:0; color:#1d2939; font-size:20px; font-weight:700; letter-spacing:-.6px; }
.account-close { display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:50%; color:#657185; background:#e9edf3; cursor:pointer; }
.account-close:hover { background:#dfe5ee; color:#26364c; }
.account-profile { display:flex; align-items:center; gap:14px; padding:20px; border-radius:20px; background:#fff; box-shadow:0 2px 5px #1e365003; }
.account-avatar { display:grid; place-items:center; flex:0 0 52px; width:52px; height:52px; border-radius:18px; background:#e9f0fc; color:#3d69b0; font-size:23px; font-weight:650; }
.account-identity { min-width:0; }
.account-identity strong { display:block; color:#202b3c; font-size:17px; font-weight:650; letter-spacing:-.35px; overflow-wrap:anywhere; }
.account-identity small { display:inline-block; margin-top:5px; padding:3px 8px; border-radius:6px; color:#64748b; background:#f3f5f8; font-size:10px; font-weight:500; }
.account-notifications,.pwa-controls { margin-top:20px; }
.account-notifications-header { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:10px; }
.account-notifications h2,.pwa-controls h2 { display:flex; align-items:center; gap:8px; margin:0; color:#5d6a7e; font-size:12px; font-weight:600; }
.account-notifications h2 svg,.pwa-controls h2 svg { width:17px; height:17px; color:#8390a3; }
.account-notification-summary { color:#8a95a6; font-size:10px; }
.account-notification-list { max-height:220px; overflow-y:auto; border-radius:16px; }
.account-notification-list a { display:block; padding:13px 14px; margin:0 0 6px; border:1px solid transparent; border-radius:14px; background:#fff; color:#334155; text-decoration:none; }
.account-notification-list a:hover { border-color:#c8d8ec; }
.account-notification-list a.unread { background:#eaf1fc; }
.account-notification-list strong,.account-notification-list small { display:block; overflow-wrap:anywhere; }
.account-notification-list strong { font-size:13px; font-weight:600; }
.account-notification-list small { margin-top:4px; color:#718097; font-size:11px; }
.account-empty { display:flex; align-items:center; gap:12px; padding:18px 16px; border-radius:16px; background:#fff; }
.account-empty-icon { display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; border-radius:50%; background:#eef7f2; color:#5a9278; }
.account-empty strong { display:block; color:#3b4a60; font-size:13px; font-weight:600; }
.account-empty small { display:block; margin-top:3px; color:#8a95a6; font-size:11px; line-height:1.5; }
.account-all-tasks { display:flex; align-items:center; justify-content:space-between; min-height:44px; margin-top:6px; padding:10px 15px; border-radius:14px; background:#eaf0fb; color:#456da6; font-size:12px; font-weight:600; text-decoration:none; }
.account-all-tasks svg { width:17px; height:17px; }
.account-all-tasks:hover { background:#dfe9fa; }
.account-actions { display:grid; gap:4px; margin-top:24px; padding-top:12px; border-top:1px solid #e5e9f0; }
.account-menu .account-action { display:flex; align-items:center; gap:12px; width:100%; min-height:46px; padding:12px; border:0; border-radius:12px; background:transparent; color:#526278; font:inherit; text-align:left; cursor:pointer; }
.account-menu .account-action:hover { background:#eaf0f7; }
.account-menu .account-action:disabled { opacity:.55; cursor:default; }
.account-menu .account-logout { color:#bd6262; }
.account-menu .account-logout:hover { color:#a64b4b; background:#fbeeee; }
.account-menu :is(button,a,summary,input):focus-visible { outline:2px solid #527fbe; outline-offset:3px; }
.pwa-controls { display:grid; gap:10px; }
.pwa-device-actions { overflow:hidden; border-radius:16px; background:#fff; }
.account-menu .pwa-device-actions .account-action { gap:12px; min-height:70px; padding:14px; border-radius:0; color:#334155; }
.account-menu .pwa-device-actions .account-action + .account-action { border-top:1px solid #f0f2f6; }
.account-menu .pwa-device-actions .account-action:hover { background:#fafbfe; }
.account-row-icon { display:grid; place-items:center; width:36px; height:36px; flex:0 0 36px; border-radius:11px; background:#f0edfc; color:#8a77bd; }
.pwa-push .account-row-icon { background:#eaf1fc; color:#6085bb; }
.account-row-copy { display:block; flex:1; min-width:0; }
.account-row-copy strong { display:block; color:#334155; font-size:12px; font-weight:600; }
.account-row-copy small { display:block; margin-top:3px; color:#8a95a6; font-size:10px; font-weight:400; }
.account-row-arrow { color:#a4afbf; font-size:23px; font-weight:400; }
.pwa-settings { border-radius:16px; background:#fff; }
.pwa-settings summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:12px 16px; color:#526278; font-size:12px; cursor:pointer; list-style:none; }
.pwa-settings summary::-webkit-details-marker { display:none; }
.pwa-settings summary svg { width:15px; height:15px; color:#9aa6b6; transform:rotate(90deg); transition:transform .18s; }
.pwa-settings[open] summary svg { transform:rotate(-90deg); }
.pwa-status { font-size:11px; color:#8490a2; line-height:1.55; margin:0; overflow-wrap:anywhere; }
.pwa-status:empty { display:none; }
.pwa-controls > .pwa-status { padding:0 4px; }
.pwa-settings .pwa-status { padding:8px 16px 16px; }
.pwa-preferences { display:grid; gap:0; border:0; padding:0 16px; margin:0; min-width:0; }
.pwa-preferences label { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:46px; font-size:12px; color:#526278; cursor:pointer; }
.pwa-preferences input { appearance:none; -webkit-appearance:none; position:relative; flex:0 0 36px; width:36px; height:22px; margin:0; border:0; border-radius:20px; background:#d9e0ea; cursor:pointer; transition:background .18s; }
.pwa-preferences input::before { content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:white; box-shadow:0 1px 3px #24324726; transition:transform .18s; }
.pwa-preferences input:checked { background:#6388c0; }
.pwa-preferences input:checked::before { transform:translateX(14px); }
.pwa-preferences:disabled { opacity:.55; }
#taskNotificationCount { display:inline-block; min-width:17px; margin-left:3px; padding:1px 4px; border-radius:9px; background:#c44545; color:#fff; font-size:10px; line-height:1.35; vertical-align:top; }
#taskNotificationCount[hidden] { display:none; }
@media(max-width:760px) {
    body.account-menu-open { overflow:hidden; }
    .account-menu { inset:0; width:100%; height:100dvh; max-width:none; max-height:none; padding:0 20px calc(24px + env(safe-area-inset-bottom,0px)); border:0; border-radius:0; box-shadow:none; animation:account-enter .2s ease-out; }
    .account-menu-header { position:sticky; top:0; z-index:1; margin:0 -20px 12px; padding:calc(16px + env(safe-area-inset-top,0px)) 20px 16px; background:#f6f7fa; }
    .account-menu-header h2 { font-size:25px; letter-spacing:-.8px; }
    .account-profile { padding:22px 18px; gap:16px; }
    .account-avatar { width:60px; height:60px; flex-basis:60px; border-radius:20px; font-size:26px; }
    .account-identity strong { font-size:20px; }
    .account-identity small { font-size:11px; }
    .account-notifications,.pwa-controls { margin-top:24px; }
    .account-notifications h2,.pwa-controls h2 { font-size:13px; }
    .account-notification-summary { font-size:11px; }
    .account-empty { min-height:98px; padding:20px 18px; }
    .account-empty strong { font-size:14px; }
    .account-empty small { font-size:12px; }
    .account-all-tasks { min-height:48px; font-size:13px; }
    .account-menu .pwa-device-actions .account-action { min-height:78px; padding:16px; }
    .account-row-copy strong { font-size:14px; }
    .account-row-copy small { font-size:11px; }
    .pwa-settings summary { min-height:52px; font-size:13px; }
    .pwa-preferences label { min-height:48px; font-size:13px; }
    .account-actions { margin-top:28px; }
    .account-menu .account-actions .account-action { min-height:50px; font-size:14px; }
}
@keyframes account-enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .account-menu,.account-menu * { animation:none!important; transition:none!important; } }