/* Shared visual tokens. Feature styles continue to own layout and behavior. */
@font-face {
  font-family: 'TextSist Manrope';
  src: url('manrope-variable.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
:root, :root[data-theme='light'] {
  color-scheme: light;
  --ui-bg: #f4f7f8;
  --ui-panel: #ffffff;
  --ui-soft: #f3f7f8;
  --ui-tint: #eef8f8;
  --ui-ink: #23343f;
  --ui-muted: #5f737c;
  --ui-line: #dbe7ea;
  --ui-accent: #147b83;
  --ui-hover: #0b666e;
  --ui-button-ink: #ffffff;
  --ui-info: #496fad;
  --ui-info-soft: #edf3fc;
  --ui-rose: #a95667;
  --ui-rose-soft: #fcf0f3;
  --ui-warning: #86601e;
  --ui-warning-soft: #fff6e4;
  --ui-danger: #ac4053;
  --ui-shadow: 0 8px 28px #23343f08;
  --ui-dialog-shadow: 0 20px 70px #23343f20;
  --ui-backdrop: #18272e70;
  --bg: var(--ui-bg);
  --panel: var(--ui-panel);
  --panel-2: var(--ui-soft);
  --text: var(--ui-ink);
  --muted: var(--ui-muted);
  --line: var(--ui-line);
  --border: var(--ui-line);
  --accent: var(--ui-accent);
  --accent-text: var(--ui-button-ink);
  --red: var(--ui-danger);
  --dialog-bg: var(--ui-panel);
  --dialog-ink: var(--ui-ink);
  --dialog-muted: var(--ui-muted);
  --dialog-line: var(--ui-line);
  --dialog-soft: var(--ui-soft);
  --radius: 16px;
  --control-radius: 8px;
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --ui-bg: #14191b;
  --ui-panel: #192227;
  --ui-soft: #222d33;
  --ui-tint: #1b3035;
  --ui-ink: #eaf3f5;
  --ui-muted: #a7bbc4;
  --ui-line: #35474f;
  --ui-accent: #74d9d5;
  --ui-hover: #95e7e4;
  --ui-button-ink: #122c30;
  --ui-info: #a3c0f1;
  --ui-info-soft: #263346;
  --ui-rose: #efaabc;
  --ui-rose-soft: #392d39;
  --ui-warning: #e4bc78;
  --ui-warning-soft: #342d21;
  --ui-danger: #f0a3b2;
  --ui-shadow: none;
  --ui-dialog-shadow: 0 20px 70px #0005;
  --ui-backdrop: #080f14a8;
}
body { font-family: 'TextSist Manrope', 'Segoe UI', sans-serif; background: var(--ui-bg); color: var(--ui-ink); }
body *, body { letter-spacing: 0 !important; }
button, input, select, textarea, dialog { font-family: inherit; }
input[type='checkbox'], input[type='radio'], input[type='range'] { accent-color: var(--ui-accent); }
::selection { background: color-mix(in srgb, var(--ui-accent) 22%, transparent); }
body :focus-visible { outline-color: var(--ui-accent); }

/* The two refreshed surfaces use the same tokens as the rest of the workspace. */
#recordingTools, :root[data-theme] #recordingTools {
  --work-accent: var(--ui-accent); --work-hover: var(--ui-hover);
  --work-button-ink: var(--ui-button-ink); --work-tint: var(--ui-tint);
  --work-soft: var(--ui-soft); --work-line: var(--ui-line);
  --work-ink: var(--ui-ink); --work-muted: var(--ui-muted); --work-panel: var(--ui-panel);
}
#accessCard, :root[data-theme] #accessCard {
  --cabinet-accent: var(--ui-accent); --cabinet-hover: var(--ui-hover);
  --cabinet-button-ink: var(--ui-button-ink); --cabinet-ink: var(--ui-ink);
  --cabinet-muted: var(--ui-muted); --cabinet-panel: var(--ui-panel);
  --cabinet-soft: var(--ui-soft); --cabinet-tint: var(--ui-tint); --cabinet-line: var(--ui-line);
  --cabinet-calendar: var(--ui-info); --cabinet-calendar-bg: var(--ui-info-soft);
  --cabinet-records: var(--ui-rose); --cabinet-records-bg: var(--ui-rose-soft);
}
body .btn, body .plans-try, body .auth-provider {
  border-radius: 8px;
  font-weight: 650;
  transition: background-color .18s, border-color .18s, color .18s, box-shadow .18s;
}
body .btn-primary, #authModal .btn.btn-primary, .plan-dialog .btn-primary,
#planner .plan-header-actions .btn-primary,
#infoModal .tour-actions .btn-primary, #resultBox .result-header-actions .btn-primary {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  color: var(--ui-button-ink);
  box-shadow: none;
  background-image: none;
}
body .btn-primary:hover:not(:disabled), #authModal .btn.btn-primary:hover:not(:disabled),
.plan-dialog .btn-primary:hover:not(:disabled), #infoModal .tour-actions .btn-primary:hover:not(:disabled),
#planner .plan-header-actions .btn-primary:hover:not(:disabled),
#resultBox .result-header-actions .btn-primary:hover:not(:disabled) {
  background: var(--ui-hover);
  border-color: var(--ui-hover);
  color: var(--ui-button-ink);
  opacity: 1;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--ui-accent) 15%, transparent);
}
body .btn-secondary { background: var(--ui-soft); border-color: var(--ui-line); color: var(--ui-ink); }
body .btn-secondary:hover:not(:disabled) { background: var(--ui-tint); border-color: var(--ui-accent); }
#nav .logo, nav .logo { font-weight: 800; }
#nav .nav-links .current { color: var(--ui-accent); }
#nav .logo, nav .logo { flex-shrink: 0; }
#howOpenBtn svg { display: none; }
@media(max-width:360px) {
  #nav .nav-inner { gap:8px; }
  #nav .nav-links { gap:6px; flex-shrink:0; }
  #howOpenBtn { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; }
  #howOpenBtn span { display:none; }
  #howOpenBtn svg { display:block; width:21px; height:21px; }
}
.hero-compact h1 { font-size: 30px; line-height: 1.3; font-weight: 750; }
.hero-compact p, .service-lead, .legal-lead { color: var(--ui-muted); }
.upload-card:has(#recordingTools), .upload-card:has(#recordingTools):focus-within {
  background: var(--ui-panel); border-color: var(--ui-line); box-shadow: var(--ui-shadow);
}
.dropzone { background: var(--ui-soft); border-color: var(--ui-line); border-radius: 8px; }
.dropzone:hover, .dropzone:focus-visible { background: var(--ui-tint); border-color: var(--ui-accent); }
.dropzone-icon { background: var(--ui-tint); color: var(--ui-accent); border-radius: 8px; }
.site-footer, .footer-inner { color: var(--ui-muted); }
.site-footer { align-items: center; }
.site-footer a, .site-footer .metrics-settings {
  box-sizing: border-box; display: inline-flex; align-items: center;
  min-height: 44px; max-width: 100%; padding: 8px 0;
  font: inherit; line-height: 1.5; text-align: left; overflow-wrap: anywhere;
  color: var(--ui-muted);
}
.site-footer a:hover, .service-links a:hover { color: var(--ui-accent); }

/* Keep authentication states and input semantics; unify their surfaces. */
#authModal .auth-modal-card, #accountDialog { border-radius: 16px; box-shadow: var(--ui-dialog-shadow); }
#authModal .auth-modal-card h2 { font-size: 26px; line-height: 1.3; font-weight: 750; }
#authModal .auth-symbol, #accountDialog .account-profile-avatar { background: var(--ui-tint); color: var(--ui-accent); border-radius: 8px; }
#authModal .auth-provider, #authModal .btn.btn-primary { border-radius: 8px; font-weight: 650; }
#authModal input:not([type='checkbox']) { border-radius: 8px; background: var(--ui-soft); border-color: var(--ui-line); }
#authModal input:not([type='checkbox']):focus {
  background: var(--ui-panel); border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 12%, transparent);
}
#authModal #emailCode, #authModal #loginCode { letter-spacing: 0; padding-inline: 15px; }
#authModal #emailCodeBtn.auth-resend { background: transparent; color: var(--ui-muted); border: 0; box-shadow: none; }
#authModal #emailCodeBtn.auth-resend:hover { background: transparent; color: var(--ui-accent); }
#authModal .auth-close, #accountDialog .account-icon-button { border-radius: 8px; background: var(--ui-soft); }
#authModal #emailStatus { color: var(--ui-danger); background: color-mix(in srgb, var(--ui-danger) 8%, var(--ui-panel)); border-color: color-mix(in srgb, var(--ui-danger) 25%, var(--ui-line)); }
:root[data-theme='dark'] #authModal #emailStatus { color: var(--ui-danger); }
#authModal :focus-visible, #accountDialog :focus-visible { outline-color: var(--ui-accent); }
#accountDialog h2 { font-size: 25px; font-weight: 750; }
#accountDialog .account-quota { border: 0; border-radius: 0; background: var(--ui-tint); margin-inline: -30px; padding-inline: 30px; }
#accountDialog #accountQuotaValue { color: var(--ui-accent); font-weight: 750; }
#accountDialog .account-meter span { background: var(--ui-accent); }
#accountDialog .account-menu-row, #accountDialog .account-confirm { border-radius: 8px; }
#accountDialog .account-menu-row b { font-weight: 650; }
#accountDialog .account-menu-icon { border: 0; background: var(--ui-soft); color: var(--ui-accent); border-radius: 8px; }
#accountDialog #accountSessionApply { background: var(--ui-accent); color: var(--ui-button-ink); border-color: var(--ui-accent); }

/* Prices, limits and the custom slider remain server-controlled. */
#plansDialog {
  --purchase: var(--ui-accent); --purchase-text: var(--ui-button-ink);
  --compare: var(--ui-info); --compare-bg: var(--ui-info-soft);
  border-color: var(--ui-line); box-shadow: var(--ui-dialog-shadow);
}
#plansDialog .plans-header h2 { font-weight: 750; font-size: 26px; }
#plansDialog .plans-custom input[type='number'] { background: var(--ui-soft); }
#plansDialog .plans-card { background: var(--ui-soft); }
#plansDialog .plans-featured { background: var(--ui-info-soft); }
#plansDialog .plans-price, #plansDialog .custom-total strong { font-weight: 750; }
#plansDialog .plans-card.plans-suggested { outline-color: var(--ui-accent); }
#plansDialog .custom-buy:hover:not(:disabled) { background: var(--ui-hover); border-color: var(--ui-hover); }
#plansDialog .plans-try { border-radius: 8px; }

/* Calendars and notifications retain their dense, responsive layout. */
#planner, .plan-dialog:not(.notification-center) { border-radius: 16px; box-shadow: var(--ui-dialog-shadow); }
#planner .plan-header h2 { font-size: 26px; font-weight: 750; }
#planner .plan-header-actions .btn { border-radius: 8px; }
#planner .plan-icon, .plan-dialog .plan-icon, #historyClose, .plans-close { border-radius: 8px; background: var(--ui-soft); color: var(--ui-muted); }
#planner .plan-icon:hover, .plan-dialog .plan-icon:hover, #historyClose:hover, .plans-close:hover { background: var(--ui-tint); color: var(--ui-accent); }
#planner .plan-filters [aria-pressed='true'] { color: var(--ui-accent); background: var(--ui-tint); }
#planner .plan-day[aria-pressed='true'] { color: var(--ui-button-ink); background: var(--ui-accent); }
#planner .plan-quick button { border-radius: 8px; }
#planner .plan-quick button:hover { background: var(--ui-tint); color: var(--ui-accent); }
.plan-dialog .btn-primary { border-radius: 8px; }
.plan-dialog input:not([type='checkbox']), .plan-dialog select, .plan-dialog textarea,
#planner .plan-search input, .plan-search input, .history-search { border-radius: 8px; background: var(--ui-soft); border-color: var(--ui-line); }
.plan-dialog :is(input, textarea, select):focus { border-color: var(--ui-accent); outline-color: var(--ui-accent); }
.plan-danger, .plan-dialog [role='alert'], #notificationError { color: var(--ui-danger); }
.plan-item.task .plan-item-content { border-color: var(--ui-accent); }
.plan-item.note .plan-item-content { border-color: var(--ui-rose); }
.notification-filters button[aria-pressed='true'] { color: var(--ui-accent); }
.notification-warning .notification-symbol { color: var(--ui-danger); background: color-mix(in srgb, var(--ui-danger) 10%, var(--ui-panel)); }
#historyPanel { background: var(--ui-panel); box-shadow: var(--ui-dialog-shadow); }
.history-state.done { color: var(--ui-accent); background: var(--ui-tint); }
.history-state.processing { color: var(--ui-info); background: var(--ui-info-soft); }
.history-state.error { color: var(--ui-danger); background: color-mix(in srgb, var(--ui-danger) 10%, var(--ui-panel)); }

/* Shared dialog treatment, including consent and download selection. */
#infoModal .info-modal-card, #downloadModal .download-modal-card, .agreement-dialog { box-shadow: var(--ui-dialog-shadow); border-color: var(--ui-line); }
#downloadModal .download-modal-card, .agreement-dialog { border-radius: 16px; }
#downloadModal .download-modal-card { background: var(--ui-panel); }
#downloadModal .download-modal-card h2 { font-size: 26px; line-height: 1.3; font-weight: 750; }
.download-option { border-radius: 8px; transition: background-color .18s, border-color .18s; }
.download-option:hover { border-color: var(--ui-accent); background: var(--ui-tint); }
.agreement-summary { border-radius: 0; border-inline: 0; background: transparent; }
.agreement-inner h2 { font-size: 25px; font-weight: 750; }
#infoModal .tour-progress button.active { color: var(--ui-accent); background: var(--ui-tint); }
#infoModal #tourTitle { font-weight: 750; }
.processing-core { background: var(--ui-panel); border-color: var(--ui-line); border-radius: 16px; box-shadow: var(--ui-shadow); }
.error-icon { color: var(--ui-danger); }
#authBackdrop, #infoBackdrop, #downloadBackdrop, #historyBackdrop { background: var(--ui-backdrop); }
#accountDialog::backdrop, #planner::backdrop, .plan-dialog::backdrop,
#plansDialog::backdrop, .agreement-dialog::backdrop { background: var(--ui-backdrop); }

/* Playback, text editing, speaker opt-in and the follow orb keep their geometry. */
.audio-player, :root[data-theme] .audio-player { --audio-cyan: var(--ui-accent); --audio-amber: var(--ui-warning); }
.audio-emblem, .audio-icon, .audio-trim-times input, .audio-speed select { border-radius: 8px; }
.audio-player .audio-play { background: var(--ui-accent); color: var(--ui-button-ink); }
.audio-player .audio-play:hover:not(:disabled) { background: var(--ui-hover); color: var(--ui-button-ink); }
#resultBox .transcript-editor, body.transcript-workspace, :root[data-theme] body.transcript-workspace {
  --te-accent: var(--ui-accent); --te-ink: var(--ui-ink); --te-muted: var(--ui-muted);
  --te-border: var(--ui-line); --te-surface: var(--ui-panel); --te-soft: var(--ui-soft);
  --te-tint: var(--ui-tint); --te-wave-rest: var(--ui-line); --te-shadow: var(--ui-shadow);
}
#resultBox .te-transport [data-action='play'], #resultBox .te-save-card [data-action='save'] {
  background: var(--ui-accent); color: var(--ui-button-ink); border-color: var(--ui-accent); box-shadow: none;
}
#resultBox .te-transport [data-action='play']:hover, #resultBox .te-save-card [data-action='save']:hover { background: var(--ui-hover); }
#resultBox .te-volume { accent-color: var(--ui-accent); }
#resultBox .te-volume::-webkit-slider-thumb { background: var(--ui-accent); }
#resultBox .te-volume::-moz-range-thumb { background: var(--ui-accent); }
#resultBox .te-text mark { color: var(--ui-ink); background: var(--ui-warning-soft); }
#resultBox .te-input:focus { border-color: var(--ui-accent); outline-color: var(--ui-accent); }
/* The editor owns its padding; inset only the shared result header. */
body.transcript-workspace #resultBox { --result-gutter: 24px; }
body.transcript-workspace #resultBox > .result-head { padding: 20px var(--result-gutter) 0; }
body.transcript-workspace #resultBox > .result-meta,
body.transcript-workspace #resultBox > .result-view-tabs { padding-inline: var(--result-gutter); }
#resultBox .result-head h3 { font-size: 25px; font-weight: 750; }
#resultBox .result-tabs button[aria-selected='true'] { color: var(--ui-accent); }

/* Public information pages use unframed sections; their wording is untouched. */
.service-page h1, .legal-page h1 { font-size: 32px; font-weight: 750; line-height: 1.35; }
.legal-page .legal-card { background: transparent; border: 0; border-top: 1px solid var(--ui-line); border-radius: 0; box-shadow: none; padding: 24px 0; }
.legal-page a, .service-page section a { color: var(--ui-accent); }
.legal-page a.btn-primary, .service-page section a.btn-primary { color:var(--ui-button-ink); }
.service-page h2, .legal-page h2 { font-weight: 700; }

/* The owner's statistics page has its own compact, table-based layout. */
body:has(#filters #exclude) { background: var(--ui-bg); color: var(--ui-ink); }
body:has(#filters #exclude) :is(.card, .panel) { background: var(--ui-panel); border-color: var(--ui-line); border-radius: 8px; }
body:has(#filters #exclude) :is(.muted, th) { color: var(--ui-muted); }
body:has(#filters #exclude) :is(a, .note) { color: var(--ui-accent); border-color: var(--ui-accent); }
body:has(#filters #exclude) :is(th, td, input) { border-color: var(--ui-line); }
body:has(#filters #exclude) input { background: var(--ui-panel); color: var(--ui-ink); }
body:has(#filters #exclude) button { background: var(--ui-accent); color: var(--ui-button-ink); border-color: var(--ui-accent); border-radius: 8px; }
body:has(> main > .brand > .symbol) { background: var(--ui-bg); color: var(--ui-ink); }
body:has(> main > .brand > .symbol) main { background: var(--ui-panel); border-color: var(--ui-line); border-radius: 16px; box-shadow: var(--ui-shadow); }
body:has(> main > .brand > .symbol) h1 { font-size: 36px; }
body:has(> main > .brand > .symbol) :is(p, footer) { color: var(--ui-muted); border-color: var(--ui-line); }
body:has(> main > .brand > .symbol) :is(button, .symbol) { background: var(--ui-accent); color: var(--ui-button-ink); border-radius: 8px; }
body:has(> main > .brand > .symbol) .status { color: var(--ui-warning); background: var(--ui-warning-soft); border-radius: 8px; }
body:has(> main > .brand > .symbol) .dot { background: var(--ui-warning); }
@media (max-width: 720px) {
  body.transcript-workspace #resultBox { --result-gutter: 16px; }
  body.transcript-workspace #resultBox > .result-head { padding-top: 16px; }
}
@media (max-width: 600px) {
  .hero-compact h1 { font-size: 24px; }
  .service-page h1, .legal-page h1 { font-size: 26px; }
  #authModal .auth-modal-card h2, #plansDialog .plans-header h2,
  #planner .plan-header h2, #downloadModal .download-modal-card h2 { font-size: 23px; }
  #resultBox .result-head h3 { font-size: 21px; }
  body:has(> main > .brand > .symbol) h1 { font-size: 30px; }
}
@media (max-width: 480px) {
  #accountDialog .account-quota { margin-inline: -20px; padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  body :is(.btn, .plans-try, .auth-provider, .download-option) { transition: none; }
}