/* Shared appearance; component layouts stay scoped to their own page. */
html:is(.chat-page, .login-page, .admin-console-page, .account-security-page) {
  --bg: #f7f8f6;
  --main-bg: #f7f8f6;
  --sidebar-bg: #eef1ec;
  --header-bg: #f7f8f6;
  --input-bg: #ffffff;
  --text: #252b29;
  --muted: #68716d;
  --accent: #315c50;
  --accent-foreground: #ffffff;
  --border: #dee4df;
  --row-border: #e4e8e3;
  --user-bg: #eaf0eb;
  --user-bubble-border: transparent;
  --hover-bg: #e5eae5;
  --hover-accent-bg: #e8efea;
  --active-session-bg: #dfe9e1;
  --input-shadow: 0 3px 12px rgb(37 43 41 / 4%);
  --toast-bg: #ffffff;
  --md-heading: var(--text);
  --md-strong: var(--text);
  --md-em: #4d5751;
  --md-link: #315c50;
  --md-blockquote-bg: #edf1ec;
  --md-blockquote-border: #8faaa0;
  --md-code-bg: #edf0eb;
  --md-code-border: var(--border);
  --md-pre-bg: #eef1ec;
  --md-pre-border: var(--border);
  --md-hr: var(--border);
  --md-th-bg: #edf1ec;
  --md-table-border: var(--border);
  --code-copy-bg: var(--input-bg);
  --stream-accent: var(--accent);
  --tag-bg: var(--hover-accent-bg);
  --tag-color: var(--accent);
  --tag-border: var(--border);
  --vision-card-bg: var(--input-bg);
  --vision-card-border: var(--border);
  --vision-title: var(--accent);
  --vision-summary: var(--text);
  --vision-kb: var(--accent);
  --vision-tag-bg: var(--hover-accent-bg);
  --vision-tag-border: var(--border);
  --scroll-thumb: #a9b4ac;
}
html:is(.chat-page, .login-page, .admin-console-page, .account-security-page)[data-theme="dark"] {
  --bg: #202522;
  --main-bg: #202522;
  --sidebar-bg: #252b27;
  --header-bg: #202522;
  --input-bg: #2b322d;
  --text: #e9ede7;
  --muted: #b2bcb3;
  --accent: #aed0b9;
  --accent-foreground: #202c24;
  --border: #465049;
  --row-border: #3a443d;
  --user-bg: #303e34;
  --hover-bg: #364138;
  --hover-accent-bg: #35473c;
  --active-session-bg: #37493d;
  --input-shadow: 0 3px 12px rgb(0 0 0 / 10%);
  --toast-bg: #2b322d;
  --md-em: #ccd5cc;
  --md-link: #aed0b9;
  --md-blockquote-bg: #29332c;
  --md-blockquote-border: #7a9d85;
  --md-code-bg: #303a32;
  --md-pre-bg: #252d27;
  --md-th-bg: #303a32;
  --scroll-thumb: #687c6c;
}
html:is(.chat-page, .login-page, .admin-console-page, .account-security-page) ::selection { background: var(--active-session-bg); color: var(--text); }
html:is(.chat-page, .login-page, .admin-console-page, .account-security-page) :is(input, textarea) { caret-color: var(--accent); }
html:is(.chat-page, .login-page, .admin-console-page, .account-security-page) :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
html:is(.chat-page, .login-page, .admin-console-page, .account-security-page) * { scrollbar-color: var(--scroll-thumb) transparent; scrollbar-width: thin; }

/* Shared controls: the security confirmation also appears from the chat page. */
html:is(.chat-page, .login-page, .admin-console-page, .account-security-page) :is(button, a, summary, select):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.account-password-dialog { width: min(420px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 28px; overflow-y: auto; border: 0; border-radius: 16px; background: var(--input-bg); color: var(--text); box-shadow: 0 16px 56px rgb(0 0 0 / 24%); }
.account-password-dialog::backdrop { background: rgb(12 18 14 / 52%); }
.account-password-dialog h2 { margin: 0 0 12px; font-size: 20px; line-height: 1.4; }
.account-password-dialog p { margin: 0 0 20px; color: var(--muted); line-height: 1.7; font-size: 14px; }
.account-password-dialog label { display: grid; gap: 8px; font-size: 14px; }
.account-password-dialog input { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--main-bg); font: inherit; font-size: 16px; }
.account-password-dialog input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.account-password-dialog form > div { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.account-password-dialog button { min-height: 44px; padding: 10px 18px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.account-password-dialog button:hover { background: var(--hover-bg); }
.account-password-dialog button[type="submit"] { border-color: var(--accent); background: var(--accent); color: var(--accent-foreground); }
.account-password-dialog button[type="submit"]:hover { filter: brightness(.94); }
@media (max-width: 580px) { .account-password-dialog { padding: 24px 20px; } }