.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
}

:root {
  --bgShell: #eaf0f7;
  --bgSidebar: #f2f6fc;
  --bgPanel: #fbfdff;
  --bgCard: #ffffff;
  --ink: #1f2c3f;
  --muted: #5d6c82;
  --line: #d5deea;
  --accent: #2c6cff;
  --accentSoft: #dfeaff;
  --signal: #ff7a1f;
  --toolInk: #d9e5ff;
  --bgPage: #f8faff;
  --bgSubtle: #f7faff;
  --bgMuted: #eef3fb;
  --bgHover: #f4f8ff;
  --bgSelected: #dfeaff;
  --bgInset: #f3f6fb;
  --bgInput: #f8fafd;
  --bgInputFocus: #f8fbff;
  --bgNeutral: #f4f4f4;
  --bgNeutralAlt: #fafafa;
  --bgAccentTint: #f2f7ff;
  --bgAccentTintHover: #eaf2ff;
  --bgSuggestionHover: #f1f6ff;
  --bgAccentBadge: #eef4ff;
  --bgAccentSoft: #e8f0fb;
  --bgSidebarHover: #eef2f8;
  --bgTableStripe: #f4f6fa;
  --bgTableHead: #e5edf8;
  --bgTableHover: #eef2f7;
  --bgCode: #eef3fb;
  --bgCodeBlock: #f6f9fd;
  --bgPre: #edf2f8;
  --bgChatEmpty: #fafcff;
  --bgWarningSoft: #fffaf0;
  --bgDangerSoft: #fff0f0;
  --bgDangerHover: #ffecec;
  --bgDangerLight: #fdecec;
  --bgWarning: #fff8ef;
  --bgDanger: #fff5f5;
  --bgSuccess: #f3fbf5;
  --bgLogout: #fbebeb;
  --bgToggle: #c7d3e5;
  --bgToggleKnob: #f7f9fc;
  --bgDark: #1f2733;
  --bgDarkElevated: #2a3442;
  --bgLandingGlow: #f5f8ff;
  --bgLandingEnd: #e6edf6;
  --bgSkeleton: #d5deea;
  --bgShimmerStart: #e8eef6;
  --bgShimmerMid: #f5f8fc;
  --bgGradientPageStart: #f7faff;
  --bgGradientPageEnd: #f9fbff;
  --bgOverlay: rgba(234, 240, 247, 0.72);
  --bgOverlayCard: rgba(255, 255, 255, 0.96);
  --bgGlass: rgba(255, 255, 255, 0.55);
  --bgGlassMedium: rgba(255, 255, 255, 0.72);
  --bgGlassStrong: rgba(255, 255, 255, 0.82);
  --bgGlassLight: rgba(255, 255, 255, 0.45);
  --bgGlassFaint: rgba(255, 255, 255, 0.56);
  --bgGlassNav: rgba(255, 255, 255, 0.7);
  --bgQuote: rgba(156, 183, 229, 0.13);
  --bgQuoteStrong: rgba(156, 183, 229, 0.18);
  --bgCodeInline: rgba(34, 49, 70, 0.09);
  --onAccent: #ffffff;
  --textSecondary: #314155;
  --textBody: #223146;
  --textHeading: #1d2c43;
  --textStrong: #1a2a41;
  --textEm: #32465f;
  --textFaint: #8a9bb4;
  --textPlaceholder: #8a97ab;
  --textSubtle: #7b8798;
  --textHint: #74849b;
  --textDisabled: #b0bdd0;
  --textLabel: #556a88;
  --textMeta: #607692;
  --textNav: #4b5b72;
  --textInput: #2e3c51;
  --textSelectOption: #203047;
  --textTab: #2a3a52;
  --textTabMuted: #586b88;
  --textCard: #344863;
  --textCardAlt: #314863;
  --textPanel: #233247;
  --textChip: #506984;
  --textChipStrong: #40556f;
  --textTableHead: #21334d;
  --textTableCell: #4b5f7b;
  --textToolName: #4f7fcf;
  --textTool: #6a88b4;
  --textToolMuted: #6a7d97;
  --textQuote: #3f5672;
  --textQuoteAlt: #4a5f78;
  --textMarkdown: #5f6f84;
  --textLink: #1f63d1;
  --textLinkStrong: #204fbd;
  --textLinkHover: #173f9b;
  --textLinkActive: #1f4f9a;
  --textAccentLabel: #244374;
  --textAccentMuted: #2e4d7f;
  --textBadge: #173762;
  --textProse: #3f536d;
  --textFeature: #4a6ea8;
  --textBadgeMuted: #71839b;
  --textIndigo: #5e6d82;
  --textOnDark: #f4f7fb;
  --textFallback: #667085;
  --border: #c8d4e6;
  --borderStrong: #bfd0f2;
  --borderFocus: #97b3df;
  --borderFocusAlt: #adc0de;
  --borderHover: #9db6df;
  --borderLight: #d4deec;
  --borderSoft: #d7dfeb;
  --borderMuted: #d7e0eb;
  --borderCode: #cfdaea;
  --borderCard: #e4ebf5;
  --borderSection: #e6ecf4;
  --borderDivider: #e8eef6;
  --borderSubtle: #edf2f8;
  --borderFaint: #eeeeee;
  --borderPanel: #e3eaf4;
  --borderInput: #cfd9e8;
  --borderGhost: #cfd5de;
  --borderTable: #f0f0f0;
  --borderQuote: #9cb7e5;
  --borderAccent: #8eace0;
  --borderAccentSoft: #bed0f0;
  --borderAccentChip: #ecd9a8;
  --borderWarning: #f0dfc4;
  --borderDanger: #f0c4c4;
  --borderDangerAlt: #efc2c2;
  --borderSuccess: #bfe3c9;
  --borderDark: #2a3340;
  --borderLanding: rgba(213, 222, 234, 0.8);
  --borderSettings: #d5deeade;
  --accentDark: #245fd9;
  --accentDarker: #2057cb;
  --accentDeep: #2563eb;
  --accentGradientStart: #2e78ff;
  --accentGradientEnd: #2367df;
  --accentGradientSoftEnd: #e8f0ff;
  --accentLinkBorder: rgba(31, 99, 209, 0.45);
  --accentLinkBorderHover: rgba(31, 99, 209, 0.8);
  --accentShadow: rgba(38, 106, 236, 0.24);
  --accentFocusRing: rgba(44, 108, 255, 0.07);
  --accentSpinnerTrack: rgba(44, 108, 255, 0.2);
  --onAccentSpinnerBorder: rgba(255, 255, 255, 0.35);
  --danger: #b42318;
  --dangerText: #8b3030;
  --dangerTextAlt: #9b3030;
  --dangerTextStrong: #c03939;
  --dangerTextDark: #c44848;
  --dangerIcon: #d26a6a;
  --dangerRaw: red;
  --successText: #256b3a;
  --warningText: #6b4f1d;
  --warningTextAlt: #7a5b14;
  --warningIcon: #d98200;
  --infoIcon: #204fbd;
  --shadowSoft: rgba(31, 44, 63, 0.12);
  --shadowMd: rgba(29, 51, 86, 0.16);
  --shadowLg: rgba(29, 51, 86, 0.1);
  --shadowLanding: rgba(29, 51, 86, 0.08);
  --shadowDark: rgba(15, 23, 42, 0.28);
  --indigo: #3f51b5;
  --demoRed: #ff7a7a;
  --demoYellow: #ffd166;
  --demoGreen: #86d993;
  --outlineDark: #8eace0;
  --inkCaret: #314155;
  --scrollbarTrack: transparent;
  --scrollbarThumb: #c8d4e6;
  --scrollbarThumbHover: #9aa8bc;
  --font-ui: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --font-data: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* Perplexity-style neutral dark palette */
  --bgShell: #0a0a0a;
  --bgSidebar: #161616;
  --bgPanel: #0a0a0a;
  --bgCard: #1a1a1a;
  --ink: #ffffff;
  --muted: #9e9e9e;
  --line: #262626;
  --accent: #4d8bff;
  --accentSoft: #1a2438;
  --signal: #ff9a4d;
  --toolInk: #1a1a1a;
  --bgPage: #0a0a0a;
  --bgSubtle: #111111;
  --bgMuted: #141414;
  --bgHover: #1e1e1e;
  --bgSelected: #222222;
  --bgInset: #111111;
  --bgInput: #1a1a1a;
  --bgInputFocus: #1e1e1e;
  --bgNeutral: #141414;
  --bgNeutralAlt: #111111;
  --bgAccentTint: #141820;
  --bgAccentTintHover: #1a2030;
  --bgSuggestionHover: #1e1e1e;
  --bgAccentBadge: #1a2030;
  --bgAccentSoft: #141820;
  --bgSidebarHover: #1e1e1e;
  --bgTableStripe: #111111;
  --bgTableHead: #161616;
  --bgTableHover: #1e1e1e;
  --bgCode: #141414;
  --bgCodeBlock: #111111;
  --bgPre: #111111;
  --bgChatEmpty: #0a0a0a;
  --bgWarningSoft: #1a1810;
  --bgDangerSoft: #1a1010;
  --bgDangerHover: #221414;
  --bgDangerLight: #1e1212;
  --bgWarning: #1a1810;
  --bgDanger: #1a1010;
  --bgSuccess: #101a12;
  --bgLogout: #1a1010;
  --bgToggle: #404040;
  --bgToggleKnob: #ffffff;
  --bgDark: #222222;
  --bgDarkElevated: #2a2a2a;
  --bgLandingGlow: #111111;
  --bgLandingEnd: #0a0a0a;
  --bgSkeleton: #262626;
  --bgShimmerStart: #141414;
  --bgShimmerMid: #1a1a1a;
  --bgGradientPageStart: #111111;
  --bgGradientPageEnd: #0a0a0a;
  --bgOverlay: rgba(10, 10, 10, 0.82);
  --bgOverlayCard: rgba(26, 26, 26, 0.96);
  --bgGlass: rgba(22, 22, 22, 0.72);
  --bgGlassMedium: rgba(22, 22, 22, 0.85);
  --bgGlassStrong: rgba(22, 22, 22, 0.92);
  --bgGlassLight: rgba(22, 22, 22, 0.55);
  --bgGlassFaint: rgba(22, 22, 22, 0.65);
  --bgGlassNav: rgba(22, 22, 22, 0.88);
  --bgQuote: rgba(255, 255, 255, 0.04);
  --bgQuoteStrong: rgba(255, 255, 255, 0.06);
  --bgCodeInline: rgba(255, 255, 255, 0.08);
  --onAccent: #ffffff;
  --textSecondary: #d4d4d4;
  --textBody: #e8e8e8;
  --textHeading: #ffffff;
  --textStrong: #ffffff;
  --textEm: #b0b0b0;
  --textFaint: #808080;
  --textPlaceholder: #707070;
  --textSubtle: #8e8e8e;
  --textHint: #9e9e9e;
  --textDisabled: #5c5c5c;
  --textLabel: #9e9e9e;
  --textMeta: #808080;
  --textNav: #b0b0b0;
  --textInput: #ffffff;
  --textSelectOption: #e8e8e8;
  --textTab: #ffffff;
  --textTabMuted: #808080;
  --textCard: #d4d4d4;
  --textCardAlt: #d4d4d4;
  --textPanel: #ffffff;
  --textChip: #9e9e9e;
  --textChipStrong: #b0b0b0;
  --textTableHead: #d4d4d4;
  --textTableCell: #b0b0b0;
  --textToolName: #9e9e9e;
  --textTool: #808080;
  --textToolMuted: #707070;
  --textQuote: #9e9e9e;
  --textQuoteAlt: #808080;
  --textMarkdown: #b0b0b0;
  --textLink: #6a9fff;
  --textLinkStrong: #8ab4ff;
  --textLinkHover: #a8c8ff;
  --textLinkActive: #6a9fff;
  --textAccentLabel: #b0b0b0;
  --textAccentMuted: #9e9e9e;
  --textBadge: #d4d4d4;
  --textProse: #b0b0b0;
  --textFeature: #9e9e9e;
  --textBadgeMuted: #808080;
  --textIndigo: #9e9e9e;
  --textOnDark: #ffffff;
  --textFallback: #808080;
  --border: #262626;
  --borderStrong: #333333;
  --borderFocus: #404040;
  --borderFocusAlt: #383838;
  --borderHover: #333333;
  --borderLight: #262626;
  --borderSoft: #262626;
  --borderMuted: #222222;
  --borderCode: #262626;
  --borderCard: #262626;
  --borderSection: #262626;
  --borderDivider: #262626;
  --borderSubtle: #222222;
  --borderFaint: #1e1e1e;
  --borderPanel: #262626;
  --borderInput: #262626;
  --borderGhost: #333333;
  --borderTable: #262626;
  --borderQuote: #333333;
  --borderAccent: #404040;
  --borderAccentSoft: #333333;
  --borderAccentChip: #333328;
  --borderWarning: #333328;
  --borderDanger: #3a2828;
  --borderDangerAlt: #3a2828;
  --borderSuccess: #283a30;
  --borderDark: #333333;
  --borderLanding: rgba(38, 38, 38, 0.9);
  --borderSettings: #262626;
  --accentDark: #3a7ae8;
  --accentDarker: #3068cc;
  --accentDeep: #4d8bff;
  --accentGradientStart: #4d8bff;
  --accentGradientEnd: #3068cc;
  --accentGradientSoftEnd: #141820;
  --accentLinkBorder: rgba(106, 159, 255, 0.35);
  --accentLinkBorderHover: rgba(106, 159, 255, 0.65);
  --accentShadow: rgba(0, 0, 0, 0.4);
  --accentFocusRing: rgba(255, 255, 255, 0.08);
  --accentSpinnerTrack: rgba(255, 255, 255, 0.12);
  --onAccentSpinnerBorder: rgba(255, 255, 255, 0.35);
  --danger: #f07070;
  --dangerText: #e88888;
  --dangerTextAlt: #e88888;
  --dangerTextStrong: #ff9090;
  --dangerTextDark: #ffa0a0;
  --dangerIcon: #e08080;
  --dangerRaw: #ff7070;
  --successText: #70c890;
  --warningText: #c8b070;
  --warningTextAlt: #b8a060;
  --warningIcon: #d0a040;
  --infoIcon: #9e9e9e;
  --shadowSoft: rgba(0, 0, 0, 0.45);
  --shadowMd: rgba(0, 0, 0, 0.55);
  --shadowLg: rgba(0, 0, 0, 0.5);
  --shadowLanding: rgba(0, 0, 0, 0.45);
  --shadowDark: rgba(0, 0, 0, 0.65);
  --indigo: #707070;
  --demoRed: #c06060;
  --demoYellow: #c0a040;
  --demoGreen: #60a070;
  --outlineDark: #404040;
  --inkCaret: #d4d4d4;
  --scrollbarTrack: transparent;
  --scrollbarThumb: #3a3a3a;
  --scrollbarThumbHover: #505050;
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbarThumb) var(--scrollbarTrack);
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: var(--scrollbarTrack);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbarThumb);
  border: 2px solid var(--scrollbarTrack);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbarThumbHover);
}

*::-webkit-scrollbar-corner {
  background: var(--scrollbarTrack);
}

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--bgPage);
}

.brand {
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  min-width: 170px;
}

a {
  text-decoration: none;  
}

a.brand {
  text-decoration: none;
  color: inherit;
}

.brand-logo {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

.site-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 36px;
  padding: 0 14px;
  border-radius: 7px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 14px;  
  cursor: pointer;
  text-decoration: none;
  font-weight: normal;
}

.site-btn--primary {
  color: var(--onAccent);
  background: var(--accent);
  border-color: var(--accentDark);
}

.site-btn--ghost {
  color: var(--ink);
  background: var(--bgCard);
  border-color: var(--border);
}

.site-btn--ghost[formaction="/logout"] {
  color: var(--dangerRaw);
  border: 0;
  background: var(--bgLogout);
  font-weight: normal;
}

.theme-toggle {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  font: inherit;
  line-height: inherit;
}

.theme-toggle:hover {
  color: var(--ink);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.site-alert {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 7px;
  font-size: 13px;
  line-height: 1.4;
}

.site-alert--error {
  border: 1px solid var(--borderDanger);
  background: var(--bgDanger);
  color: var(--dangerText);
}

.site-alert--success {
  border: 1px solid var(--borderSuccess);
  background: var(--bgSuccess);
  color: var(--successText);
}

@keyframes preloaderSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes preloaderShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.page-preloader {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bgOverlay);
  backdrop-filter: blur(2px);
}

.page-preloader.is-visible {
  display: flex;
}

.page-preloader-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 220px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bgOverlayCard);
  box-shadow: 0 10px 28px var(--shadowSoft);
}

.page-preloader-label {
  font-size: 14px;
  line-height: 1.35;
  color: var(--muted);
  text-align: center;
}

.preloader-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: preloaderSpin 0.75s linear infinite;
  flex: 0 0 auto;
}

.preloader-spinner--lg {
  width: 28px;
  height: 28px;
  border-width: 3px;
}

.preloader-inline {
  vertical-align: middle;
}

.preloader-status-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.site-btn.is-loading,
.chat-action-btn.is-loading,
.public-chat-close-btn.is-loading,
.settings-token-delete-btn.is-loading,
.send-btn.is-loading {
  position: relative;
  pointer-events: none;
}

.site-btn.is-loading > .material-symbols-rounded,
.chat-action-btn.is-loading > .material-symbols-rounded,
.send-btn.is-loading > .material-symbols-rounded {
  visibility: hidden;
}

.site-btn.is-loading::after,
.chat-action-btn.is-loading::after,
.public-chat-close-btn.is-loading::after,
.settings-token-delete-btn.is-loading::after,
.send-btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid var(--onAccentSpinnerBorder);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: preloaderSpin 0.75s linear infinite;
}

.chat-action-btn.is-loading::after,
.public-chat-close-btn.is-loading::after,
.settings-token-delete-btn.is-loading::after {
  border-color: var(--accentSpinnerTrack);
  border-top-color: var(--accent);
}

.send-btn.is-loading::after {
  border-color: var(--onAccentSpinnerBorder);
  border-top-color: var(--onAccent);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}