/* Shared appearance tokens keep account screens and every workspace on one palette. */
:root,
html[data-theme="day"] {
  color-scheme: light;
  --ink: #14283e;
  --muted: #596e83;
  --subtle: #687e91;
  --line: #dbe5ed;
  --soft: #f0f5f9;
  --sidebar: #edf3f8;
  --page: #f7fafc;
  --surface: #ffffff;
  --surface-glass: #ffffffdc;
  --raised: #f6f9fc;
  --field: #ffffff;
  --field-border: #cbd8e3;
  --hover: #e6eef6;
  --accent: #185cbb;
  --accent-bright: #107994;
  --accent-soft: #e8f1ff;
  --accent-line: #a3c5f1;
  --primary: #175ac2;
  --primary-hover: #104da8;
  --on-primary: #ffffff;
  --focus: #2375dc;
  --ring: #347de41c;
  --danger: #b3323e;
  --danger-bg: #fff2f3;
  --danger-line: #f1cbd1;
  --success: #27644d;
  --success-bg: #edf7f0;
  --success-line: #c3dfcf;
  --warning: #80591e;
  --warning-bg: #fff8e8;
  --warning-line: #ecd8a8;
  --info: #285f8e;
  --info-bg: #edf5fc;
  --info-line: #c6deef;
  --shadow: 0 18px 60px #1f4c7610;
  --scene-glow: #3f9ff322;
  --scene-glow-alt: #32c9ce1f;
  --auth-grid: #6a95b514;
}

html[data-theme="night"] {
  color-scheme: dark;
  --ink: #e5edf7;
  --muted: #9eb0c6;
  --subtle: #90a3bd;
  --line: #26364c;
  --soft: #152239;
  --sidebar: #0d1728;
  --page: #0a1220;
  --surface: #111d30;
  --surface-glass: #111e33e8;
  --raised: #16243a;
  --field: #0d192c;
  --field-border: #32435d;
  --hover: #1d304c;
  --accent: #8cbbff;
  --accent-bright: #7bd6e4;
  --accent-soft: #1b3353;
  --accent-line: #365f8e;
  --primary: #8ab8ff;
  --primary-hover: #a6c9ff;
  --on-primary: #0c2345;
  --focus: #89bcff;
  --ring: #75aaff22;
  --danger: #ffb0b8;
  --danger-bg: #351e2a;
  --danger-line: #65404a;
  --success: #9bd9b9;
  --success-bg: #162d29;
  --success-line: #315848;
  --warning: #ebce8d;
  --warning-bg: #332c20;
  --warning-line: #605033;
  --info: #a2c9ef;
  --info-bg: #182d44;
  --info-line: #36506b;
  --shadow: 0 24px 70px #0000003d;
  --scene-glow: #267dff25;
  --scene-glow-alt: #10bacb1d;
  --auth-grid: #7398cc0e;
}

html[data-theme="fresh"] {
  color-scheme: light;
  --ink: #203b35;
  --muted: #566e65;
  --subtle: #617c70;
  --line: #d5e4db;
  --soft: #ebf3ec;
  --sidebar: #edf4eb;
  --page: #f6f9f2;
  --surface: #fdfffa;
  --surface-glass: #fdfff9e6;
  --raised: #f1f6ee;
  --field: #ffffff;
  --field-border: #c5d8cd;
  --hover: #e2eee0;
  --accent: #22684e;
  --accent-bright: #2b7d79;
  --accent-soft: #e2f1e7;
  --accent-line: #9ccbb1;
  --primary: #28684e;
  --primary-hover: #1c533d;
  --on-primary: #ffffff;
  --focus: #368261;
  --ring: #4b997523;
  --danger: #ad3640;
  --danger-bg: #fff1f1;
  --danger-line: #eecbd0;
  --success: #27644d;
  --success-bg: #eaf6eb;
  --success-line: #badcc3;
  --warning: #795721;
  --warning-bg: #fff8e7;
  --warning-line: #e7d5ab;
  --info: #386775;
  --info-bg: #edf6f7;
  --info-line: #c3dbde;
  --shadow: 0 18px 60px #395f4210;
  --scene-glow: #48b78f21;
  --scene-glow-alt: #b9d97125;
  --auth-grid: #6c9a7d13;
}

html, body { color: var(--ink); background: var(--page); }
body { accent-color: var(--accent); }
::selection { color: var(--ink); background: var(--accent-line); }
.muted, .field-help, .detail-note { color: var(--muted); }
.brand small, .workspace-label, .workspace-picker, .sidebar-bottom p,
.time-label, .app-footer, .section-label > span:first-child,
.count-label, .quiet-note p, .stat-card small, td small,
.compact-row small, .employee-card small, .employee-group-control,
.chat-message small, .upload-box > span { color: var(--subtle); }
.card, .stat-card { color: var(--ink); background: var(--surface); border-color: var(--line); }
.sidebar { background: var(--sidebar); border-color: var(--line); }
.brand-mark { color: var(--on-primary); background: var(--primary); }
.nav-item, .service-state, #account-label, .logout-button, #page-label,
#company-label, .icon-button, .record-action, .text-button { color: var(--muted); }
.nav-item:hover, .icon-button:hover { color: var(--ink); background: var(--hover); }
.nav-item.active { color: var(--accent); background: var(--accent-soft); }
.account-block { border-color: var(--line); }
.account-avatar { background: var(--hover); color: var(--muted); }
.status-dot { background: var(--success); }
.logout-button:hover, .record-action:hover { color: var(--ink); }
.topbar { background: var(--surface); border-color: var(--line); }
.sidebar-backdrop { background: #030b1b85; }
.section-label, label, .radio-option, td, .mailbox-row strong { color: var(--muted); }
.section-label, td strong, .stat-card strong { color: var(--ink); }
.required { color: var(--subtle); }
input, select, textarea, .workspace-picker select {
  color: var(--ink); background: var(--field); border-color: var(--field-border);
}
input::placeholder, textarea::placeholder { color: var(--subtle); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--accent-line); }
input:focus, select:focus, textarea:focus {
  border-color: var(--focus); box-shadow: 0 0 0 3px var(--ring);
}
input:disabled, fieldset:disabled input, select:disabled, textarea:disabled {
  color: var(--subtle); background: var(--soft);
}
input[type="radio"], input[type="checkbox"] { accent-color: var(--accent); }
input::file-selector-button, .upload-box input::file-selector-button {
  color: var(--ink); background: var(--raised); border-color: var(--field-border);
}
.button.primary { color: var(--on-primary); background: var(--primary); border-color: var(--primary); }
.button.primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
.button.secondary { color: var(--muted); background: var(--surface); border-color: var(--field-border); }
.button.secondary:hover:not(:disabled) { color: var(--ink); background: var(--hover); border-color: var(--accent-line); }
.text-link { color: var(--accent); }
.tab { color: var(--muted); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.mini-label, .edition-badge { color: var(--muted); border-color: var(--line); }
.preview-envelope, .empty-state > span, .upload-box .upload-icon { background: var(--soft); color: var(--accent); }
.preview-body { color: var(--muted); }
.preview-footer { background: var(--raised); border-color: var(--line); color: var(--subtle); }
.preview-footer .status-dot { background: var(--accent); }
.quiet-note strong, .stat-card > span, .empty-state h3 { color: var(--muted); }
.empty-state p, .mailbox-row small { color: var(--subtle); }
.upload-box, .network-urls li { background: var(--raised); color: var(--muted); border-color: var(--field-border); }
.upload-box:hover { background: var(--soft); border-color: var(--accent-line); }
.upload-box input { background: transparent; }
th { color: var(--muted); background: var(--raised); border-color: var(--line); }
td { border-color: var(--line); }
.badge { color: var(--muted); background: var(--soft); }
.badge.queued, .badge.uncertain { color: var(--warning); background: var(--warning-bg); }
.badge.sending { color: var(--info); background: var(--info-bg); }
.badge.sent { color: var(--success); background: var(--success-bg); }
.badge.failed, .badge.expired { color: var(--danger); background: var(--danger-bg); }
.message { color: var(--success); background: var(--success-bg); border-color: var(--success-line); }
.message.error { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-line); }
.message.warning { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-line); }
.message.info { color: var(--info); background: var(--info-bg); border-color: var(--info-line); }
.toast { color: var(--on-primary); background: var(--primary); border-color: var(--primary); box-shadow: var(--shadow); }
.toast.error { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-line); }
.registration-choice legend, .enterprise-registration-fields legend { color: var(--muted); }
.registration-choice label { background: var(--field); border-color: var(--line); }
.registration-choice label:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }
.registration-choice strong { color: var(--ink); }
.registration-choice small { color: var(--muted); }
.personal-code { color: var(--accent); }
.contact-column, .shortcut-button, .compact-row.selected { background: var(--raised); }
.contact-column > h2, .contact-item { color: var(--muted); }
.contact-item:hover, .contact-item.active { background: var(--accent-soft); color: var(--accent); }
.chat-message p { background: var(--soft); color: var(--ink); }
.chat-message.own p { background: var(--accent-soft); color: var(--ink); }
.shortcut-button:hover { background: var(--hover); }
.shortcut-button strong { color: var(--ink); }
.shortcut-button small { color: var(--muted); }
.group-column { background: var(--raised); }
.group-column.drag-over { border-color: var(--accent); background: var(--accent-soft); }
.employee-card { color: var(--ink); background: var(--surface); border-color: var(--line); }
.meeting-media { background: var(--soft); }
.media-tile { background: var(--hover); }
.media-tile small { color: var(--muted); }
.meeting-controls [aria-pressed="true"] { color: var(--success); background: var(--success-bg); border-color: var(--success-line); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .shortcut-button:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 3px;
}

/* Account entry: a quiet working surface beside the animated identity. */
.auth-view {
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  align-items: stretch; justify-content: flex-start; padding: 0 48px;
  background: var(--page); overflow: clip;
}
.auth-view::before {
  content: ""; position: absolute; z-index: -2; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at var(--cursor-x, 28%) var(--cursor-y, 45%), var(--scene-glow), transparent 53%),
    radial-gradient(ellipse at 72% 76%, var(--scene-glow-alt), transparent 48%);
}
.auth-view::after {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--auth-grid) 1px, transparent 1px), linear-gradient(90deg, var(--auth-grid) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(120deg, transparent 4%, #000 45%, transparent 90%);
}
.auth-header, .auth-layout, .auth-footer { width: 100%; max-width: 1216px; margin-inline: auto; }
.auth-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 100px; padding: 24px 0; }
.auth-header .brand { font-size: 17px; gap: 12px; }
.auth-header .brand-mark { width: 41px; height: 41px; border-radius: 13px; }
.auth-header .brand small { margin-top: 4px; font-size: 10px; letter-spacing: 1.2px; }
.appearance-trigger {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 30px;
  color: var(--muted); background: var(--surface-glass); font-size: 11px;
}
.appearance-trigger svg { width: 16px; height: 16px; }
.appearance-trigger:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.auth-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, 440px); gap: clamp(40px, 7vw, 110px); align-items: center; flex: 1; padding: 36px 0 46px; }
.auth-story { position: sticky; top: 45px; align-self: start; padding-top: 16px; min-width: 0; }
.story-kicker { display: flex; align-items: center; gap: 10px; color: var(--accent); font-size: 10px; font-weight: 600; letter-spacing: 3px; }
.story-kicker > span { width: 21px; height: 1px; background: var(--accent); }
.auth-story h1 { position: relative; z-index: 1; margin-top: 25px; font-size: clamp(38px, 4.1vw, 58px); line-height: 1.25; font-weight: 600; letter-spacing: -1.9px; }
.auth-story h1 > span { color: var(--accent); }
.story-description { position: relative; z-index: 1; margin-top: 22px; color: var(--muted); font-size: 13px; line-height: 2; }
.auth-visual { position: relative; height: clamp(240px, 25vw, 330px); margin: -8px -24px -7px; }
#auth-scene { position: relative; z-index: 1; display: block; width: 100%; height: 100%; pointer-events: none; }
.scene-halo { position: absolute; inset: 16% 12% 11%; border-radius: 50%; background: radial-gradient(ellipse, var(--scene-glow), transparent 68%); filter: blur(16px); pointer-events: none; }
.auth-capabilities { display: flex; align-items: center; gap: 26px; color: var(--muted); font-size: 11px; letter-spacing: .7px; }
.auth-capabilities span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 26px 3px 0; border-radius: 50%; background: var(--accent); }
.auth-card {
  position: relative; width: 100%; max-width: none; padding: 36px 35px 29px;
  border: 1px solid var(--line); border-radius: 23px; background: var(--surface-glass);
  box-shadow: var(--shadow); backdrop-filter: blur(18px);
}
.auth-card::before { content: ""; position: absolute; top: -1px; left: 28px; right: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-line), transparent); }
.auth-card .eyebrow { display: block; margin-bottom: 13px; color: var(--accent); font-size: 9px; font-weight: 600; letter-spacing: 2.3px; }
.auth-card h2 { margin-bottom: 11px; font-size: 28px; font-weight: 600; letter-spacing: -.8px; text-align: left; }
.auth-card > .muted { margin: 0 0 25px; font-size: 12px; line-height: 1.9; text-align: left; }
.auth-card label { font-size: 12px; margin-bottom: 18px; }
.auth-card input { min-height: 46px; border-radius: 9px; font-size: 13px; }
.auth-card .button { min-height: 45px; border-radius: 9px; }
.auth-switch { padding: 4px; margin-bottom: 24px; border: 1px solid var(--line); background: var(--soft); border-radius: 11px; }
.auth-switch button { color: var(--muted); padding: 9px; border-radius: 7px; }
.auth-switch button.active { color: var(--ink); background: var(--surface); box-shadow: 0 2px 6px #0a1c3110; }
.auth-links button { color: var(--muted); }
.auth-links button:hover { color: var(--accent); }
.auth-footnote { margin-top: 26px; padding-top: 20px; border-color: var(--line); color: var(--subtle); text-align: left; font-size: 10px; }
.auth-card .registration-choice label { margin: 0; padding: 12px 9px; }
.auth-card .registration-choice input { width: 14px; height: 14px; min-height: 0; border-radius: 50%; }
.auth-card .registration-choice small { font-size: 9px; }
.auth-footer { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0 23px; border-top: 1px solid var(--line); color: var(--subtle); font-size: 10px; letter-spacing: .5px; }

/* Theme chooser uses the native modal's focus containment and Escape behavior. */
.appearance-dialog {
  width: min(550px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 28px;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; box-shadow: 0 30px 100px #020b3059; overflow-y: auto;
}
.appearance-dialog::backdrop { background: #02091b85; backdrop-filter: blur(6px); }
.appearance-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin: 0; }
.appearance-dialog-header h2 { margin-top: 6px; font-size: 23px; letter-spacing: -.6px; }
.dialog-kicker { color: var(--accent); font-size: 9px; letter-spacing: 2px; }
.appearance-dialog > .field-help { margin-top: 13px; }
.theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-width: 0; margin: 24px 0; padding: 0; border: 0; }
.theme-choice { position: relative; min-width: 0; padding: 7px; margin: 0; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; }
.theme-choice:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--ring); }
.theme-choice:has(input:disabled) { cursor: default; }
.theme-choice input { position: absolute; bottom: 27px; right: 10px; width: 13px; height: 13px; min-height: 0; margin: 0; }
.theme-swatch { display: grid; grid-template-columns: 25% 1fr; grid-template-rows: 18% 1fr; gap: 6px; height: 77px; padding: 8px; border-radius: 6px; border: 1px solid #6c7e9420; }
.theme-swatch i { display: block; border-radius: 3px; }
.theme-swatch i:first-child { grid-row: 1 / 3; }
.swatch-day { background: #f3f8fc; }
.swatch-day i { background: #dce9f6; }
.swatch-day i:first-child { background: #c1d4eb; }
.swatch-day i:last-child { background: #ffffff; border: 1px solid #dbe4ed; }
.swatch-night { background: #0a1425; }
.swatch-night i { background: #29456b; }
.swatch-night i:first-child { background: #1b2c47; }
.swatch-night i:last-child { background: #14253e; border: 1px solid #314969; }
.swatch-fresh { background: #f0f6e9; }
.swatch-fresh i { background: #c2ddcc; }
.swatch-fresh i:first-child { background: #a6c8b2; }
.swatch-fresh i:last-child { background: #fcfff7; border: 1px solid #d5e2cf; }
.theme-choice-copy { display: block; padding: 9px 3px 2px; }
.theme-choice-copy strong { display: block; color: var(--ink); font-size: 12px; font-weight: 500; }
.theme-choice-copy small { color: var(--muted); font-size: 10px; }
.appearance-auto { display: flex; align-items: flex-start; gap: 11px; margin: 0; padding-top: 21px; border-top: 1px solid var(--line); }
.appearance-auto input { width: 16px; height: 16px; min-height: 0; margin: 3px 0 0; flex-shrink: 0; }
.appearance-auto strong { display: block; color: var(--ink); font-size: 12px; font-weight: 500; }
.appearance-auto small { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.9; font-weight: 400; }
.appearance-status { margin-top: 18px; padding: 11px 13px; color: var(--accent); background: var(--accent-soft); border-radius: 8px; font-size: 11px; overflow-wrap: anywhere; }
.appearance-note { margin-top: 17px; color: var(--subtle); font-size: 10px; line-height: 1.8; }

@media (min-width: 1600px) {
  .auth-layout { padding-top: 55px; padding-bottom: 60px; }
  .auth-visual { height: 360px; }
}
@media (max-width: 1050px) {
  .auth-view { padding-inline: 32px; }
  .auth-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: 32px; }
  .auth-card { padding: 31px 27px 25px; }
  .auth-story h1 { font-size: 40px; }
  .story-description { font-size: 12px; }
  .auth-capabilities { gap: 13px; font-size: 10px; letter-spacing: 0; }
  .auth-capabilities span + span::before { margin-right: 13px; }
}
@media (max-width: 800px) {
  .auth-view { padding: 0 24px; }
  .auth-header { min-height: 87px; padding-block: 22px; }
  .auth-layout { display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: 20px 0 34px; }
  .auth-story { position: relative; top: auto; align-self: stretch; max-width: 440px; width: 100%; margin: 0 auto; padding-top: 0; min-height: 98px; }
  .story-kicker { font-size: 8px; letter-spacing: 2px; }
  .auth-story h1 { font-size: 29px; line-height: 1.3; letter-spacing: -.9px; margin-top: 13px; }
  .auth-story h1 br { display: none; }
  .auth-story h1 span { display: block; }
  .story-description, .auth-capabilities { display: none; }
  .auth-visual { position: absolute; top: -20px; right: -14px; width: 48%; height: 158px; margin: 0; opacity: .75; }
  .auth-card { max-width: 440px; padding: 29px 28px 25px; border-radius: 18px; }
  .auth-footer { max-width: 440px; font-size: 9px; gap: 10px; }
  .auth-card:has(#register-form:not([hidden])) { margin-top: 0; }
  .auth-view:has(#register-form:not([hidden])) .auth-story { display: none; }
  .topbar-right { max-width: 58%; gap: 8px; }
  .appearance-workspace-trigger { width: 30px; height: 32px; padding: 6px; }
}
@media (max-width: 520px) {
  .auth-view { padding-inline: 18px; }
  .auth-header .brand { font-size: 15px; gap: 9px; }
  .auth-header .brand-mark { width: 36px; height: 36px; border-radius: 11px; }
  .auth-header .brand small { font-size: 9px; letter-spacing: .7px; }
  .appearance-trigger { min-height: 35px; padding: 8px 10px; font-size: 10px; gap: 6px; }
  .appearance-trigger svg { width: 14px; height: 14px; }
  .auth-layout { padding-top: 12px; gap: 23px; }
  .auth-card { padding: 25px 22px 22px; }
  .auth-card h2 { font-size: 25px; }
  .auth-card > .muted { font-size: 11px; }
  .auth-card label { font-size: 11px; }
  .auth-footer { padding-top: 16px; }
  .auth-footer span:last-child { display: none; }
  .appearance-dialog { padding: 22px 19px; }
  .appearance-dialog-header h2 { font-size: 21px; }
  .theme-options { gap: 8px; }
  .theme-choice { padding: 5px; }
  .theme-choice input { right: 7px; bottom: 26px; }
  .theme-swatch { height: 65px; padding: 6px; gap: 4px; }
  .theme-choice-copy { padding-left: 2px; }
  .topbar-right { max-width: 56%; gap: 6px; }
  #company-label { font-size: 10px; }
  .edition-badge { font-size: 9px; padding: 3px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-view::before { background-position: center; }
}