/* ─── Toast ─── */
.toast{position:fixed;bottom:24px;left:50%;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:12px 20px;font-size:var(--text-md);z-index:999;transform:translateX(-50%) translateY(8px) scale(.98);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),visibility 0s linear var(--dur-fast);display:flex;align-items:center;gap:8px;box-shadow:var(--shadow-overlay);max-width:min(420px,calc(100vw - 32px))}
.toast.show{transform:translateX(-50%) translateY(0) scale(1);opacity:1;visibility:visible;transition-delay:0s}
.toast::before{flex-shrink:0}
.toast.success{border-color:var(--emerald)}
.toast.success::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--emerald)}
.toast.warning{border-color:var(--amber)}
.toast.warning::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--amber)}
.toast.error{border-color:var(--rose)}
.toast.error::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--rose)}

/* ─── Confirm dialog ─── */
.overlay{display:flex;position:fixed;inset:0;background:var(--overlay-bg);z-index:50;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-fast) var(--ease-out),visibility 0s linear var(--dur-fast)}
.overlay.show{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.dialog{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:24px;width:380px;box-shadow:var(--shadow-overlay);transform:scale(.97);opacity:0;transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);transform-origin:center}
.overlay.show .dialog{transform:scale(1);opacity:1}
.dialog h3{font-size:var(--text-lg);font-weight:var(--fw-semibold);margin-bottom:8px}
.dialog p{font-size:var(--text-md);color:var(--text2);margin-bottom:16px}
.dialog-actions{display:flex;gap:8px;justify-content:flex-end}
.dialog input{width:100%;margin-bottom:12px}

/* ─── Login ─── */
.login-screen{position:fixed;inset:0;background:var(--bg);z-index:100;display:flex;align-items:center;justify-content:center}
.login-screen.hidden{display:none}
/* `authed` on <html> is set by the head script and toggled by enterApp/doLogout.
   It is the single source of truth for which shell is on screen, so neither
   view can paint before the token has been read. */
html.authed .login-screen{display:none}
html:not(.authed) #app-main{display:none}
.login-box{width:360px;text-align:center}
.login-logo{width:56px;height:56px;background:var(--emerald);border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:var(--fw-bold);font-size:var(--text-2xl);color:var(--accent-contrast);margin:0 auto 20px}
.login-box h2{font-size:var(--text-lg);font-weight:var(--fw-semibold);margin-bottom:6px}
.login-box p{font-size:var(--text-md);color:var(--text3);margin-bottom:24px}
.login-input{width:100%;background:var(--bg2);border:1px solid var(--border);color:var(--text);height:var(--ctl-h-lg);padding:0 16px;border-radius:var(--radius);font-size:var(--ctl-fs-lg);font-family:var(--font-mono);outline:none;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);text-align:center;letter-spacing:1px}
.login-input:focus{border-color:var(--emerald);box-shadow:var(--focus-ring)}
.login-btn{width:100%;margin-top:12px;height:var(--ctl-h-lg);background:var(--emerald);border:none;border-radius:var(--radius);color:var(--accent-contrast);font-size:var(--ctl-fs-lg);font-weight:var(--fw-semibold);font-family:inherit;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-quick) var(--ease-out),opacity var(--dur-fast) var(--ease-out)}
.login-btn:hover{background:var(--emerald-hover)}
.login-btn:active{transform:scale(.98)}
.login-btn:disabled{opacity:var(--disabled-opacity);cursor:not-allowed;transform:none}
.login-error{color:var(--rose);font-size:var(--text-base);margin-top:10px;min-height:18px}

/* ─── Scrollbar ─── */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--border2)}