/* R83 semantic theme layer. Theme blocks define tokens only; component rules are shared. */
html[data-theme="classic"],
.jingsu-theme-scope[data-theme="classic"] {
  --bg-page: #070d18;
  --bg-surface: #0d1727;
  --bg-surface-2: #132238;
  --bg-elevated: #182b45;
  --text-primary: #f7f9fc;
  --text-secondary: #cbd6e4;
  --text-muted: #91a1b5;
  --text-inverse: #07111d;
  --border-default: #263a55;
  --border-strong: #4a607b;
  --brand-primary: #d5b46a;
  --brand-primary-hover: #edcf8a;
  --brand-accent: #71a7e6;
  --button-primary-bg: #d5b46a;
  --button-primary-text: #10161f;
  --button-secondary-bg: #192b43;
  --button-secondary-text: #f4f7fb;
  --input-bg: #0d1828;
  --input-border: #38516f;
  --input-text: #f6f8fb;
  --input-placeholder: #91a1b5;
  --chat-bg: #08111e;
  --chat-message-bg: #101c2e;
  --chat-self-bg: #17385a;
  --panel-header-bg: #111e31;
  --success: #46c98e;
  --warning: #e5b85a;
  --danger: #ef6b72;
  --info: #69aaf0;
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, .2);
  --shadow-md: 0 14px 36px rgba(0, 0, 0, .28);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, .38);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --focus-ring: #f0d38d;
  --selection-bg: #d5b46a;
  --selection-text: #07111d;
  --scrollbar-thumb: #4a607b;
  --player-shell: #05080d;
  --on-player: #f7f9fc;
  color-scheme: dark;
}

html[data-theme="ocean_gold"],
.jingsu-theme-scope[data-theme="ocean_gold"] {
  --bg-page: #061525;
  --bg-surface: #0b2034;
  --bg-surface-2: #102b45;
  --bg-elevated: #173957;
  --text-primary: #f3f7fb;
  --text-secondary: #c5d4e3;
  --text-muted: #8fa6bd;
  --text-inverse: #07131f;
  --border-default: #284865;
  --border-strong: #54728e;
  --brand-primary: #d7b260;
  --brand-primary-hover: #efd185;
  --brand-accent: #50a8d8;
  --button-primary-bg: #d7b260;
  --button-primary-text: #0b1823;
  --button-secondary-bg: #14324d;
  --button-secondary-text: #f3f7fb;
  --input-bg: #0a1b2c;
  --input-border: #3f6685;
  --input-text: #f3f7fb;
  --input-placeholder: #91a8bd;
  --chat-bg: #071827;
  --chat-message-bg: #0e263d;
  --chat-self-bg: #164466;
  --panel-header-bg: #0d2942;
  --success: #49cc9a;
  --warning: #e8b859;
  --danger: #f27779;
  --info: #5cb6e7;
  --shadow-sm: 0 4px 14px rgba(0, 8, 18, .24);
  --shadow-md: 0 14px 38px rgba(0, 8, 18, .34);
  --shadow-lg: 0 26px 70px rgba(0, 8, 18, .44);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --focus-ring: #efd185;
  --selection-bg: #d7b260;
  --selection-text: #07131f;
  --scrollbar-thumb: #54728e;
  --player-shell: #030a11;
  --on-player: #f7f9fc;
  color-scheme: dark;
}

html[data-theme="graphite_gold"],
.jingsu-theme-scope[data-theme="graphite_gold"] {
  --bg-page: #151515;
  --bg-surface: #1c1d1f;
  --bg-surface-2: #25272a;
  --bg-elevated: #2d3034;
  --text-primary: #f5f2eb;
  --text-secondary: #d4d0c7;
  --text-muted: #9e9a91;
  --text-inverse: #161616;
  --border-default: #3d4044;
  --border-strong: #66635c;
  --brand-primary: #c9a85f;
  --brand-primary-hover: #e4c77f;
  --brand-accent: #8eb1ce;
  --button-primary-bg: #c9a85f;
  --button-primary-text: #171717;
  --button-secondary-bg: #2c2e31;
  --button-secondary-text: #f5f2eb;
  --input-bg: #191a1c;
  --input-border: #55575a;
  --input-text: #f5f2eb;
  --input-placeholder: #9e9a91;
  --chat-bg: #171819;
  --chat-message-bg: #222326;
  --chat-self-bg: #34302a;
  --panel-header-bg: #202124;
  --success: #67c99a;
  --warning: #d9ad5a;
  --danger: #ec7777;
  --info: #86b6dc;
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, .26);
  --shadow-md: 0 14px 38px rgba(0, 0, 0, .38);
  --shadow-lg: 0 26px 70px rgba(0, 0, 0, .5);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --focus-ring: #e4c77f;
  --selection-bg: #c9a85f;
  --selection-text: #161616;
  --scrollbar-thumb: #66635c;
  --player-shell: #080808;
  --on-player: #f8f6f1;
  color-scheme: dark;
}

html[data-theme="glacier"],
.jingsu-theme-scope[data-theme="glacier"] {
  --bg-page: #f3f7fb;
  --bg-surface: #ffffff;
  --bg-surface-2: #eaf1f8;
  --bg-elevated: #ffffff;
  --text-primary: #13243a;
  --text-secondary: #43566d;
  --text-muted: #607086;
  --text-inverse: #ffffff;
  --border-default: #cbd8e5;
  --border-strong: #91a8bf;
  --brand-primary: #1565b8;
  --brand-primary-hover: #0f4f92;
  --brand-accent: #0e7490;
  --button-primary-bg: #1565b8;
  --button-primary-text: #ffffff;
  --button-secondary-bg: #e5eef7;
  --button-secondary-text: #17324f;
  --input-bg: #ffffff;
  --input-border: #8fa5bb;
  --input-text: #13243a;
  --input-placeholder: #65758a;
  --chat-bg: #edf3f8;
  --chat-message-bg: #ffffff;
  --chat-self-bg: #dcecfb;
  --panel-header-bg: #e7f0f8;
  --success: #16794d;
  --warning: #8a5b0b;
  --danger: #b4232f;
  --info: #1261a0;
  --shadow-sm: 0 4px 14px rgba(25, 55, 85, .08);
  --shadow-md: 0 14px 36px rgba(25, 55, 85, .12);
  --shadow-lg: 0 24px 64px rgba(25, 55, 85, .18);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --focus-ring: #0f4f92;
  --selection-bg: #b8daf5;
  --selection-text: #10283f;
  --scrollbar-thumb: #91a8bf;
  --player-shell: #07121d;
  --on-player: #f7f9fc;
  color-scheme: light;
}

html[data-theme="warm_red"],
.jingsu-theme-scope[data-theme="warm_red"] {
  --bg-page: #f5f1ec;
  --bg-surface: #fffdf9;
  --bg-surface-2: #ece5de;
  --bg-elevated: #ffffff;
  --text-primary: #2d2926;
  --text-secondary: #5e5550;
  --text-muted: #71655f;
  --text-inverse: #ffffff;
  --border-default: #d4c8be;
  --border-strong: #a99587;
  --brand-primary: #a23b36;
  --brand-primary-hover: #822e2a;
  --brand-accent: #7c513d;
  --button-primary-bg: #a23b36;
  --button-primary-text: #ffffff;
  --button-secondary-bg: #e9dfd7;
  --button-secondary-text: #382f2a;
  --input-bg: #fffdf9;
  --input-border: #aa9789;
  --input-text: #2d2926;
  --input-placeholder: #756860;
  --chat-bg: #f0eae4;
  --chat-message-bg: #fffdf9;
  --chat-self-bg: #f4ddd9;
  --panel-header-bg: #eee4dc;
  --success: #317557;
  --warning: #8a5a12;
  --danger: #a92f36;
  --info: #346b91;
  --shadow-sm: 0 4px 14px rgba(70, 43, 30, .08);
  --shadow-md: 0 14px 36px rgba(70, 43, 30, .13);
  --shadow-lg: 0 24px 64px rgba(70, 43, 30, .19);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --focus-ring: #822e2a;
  --selection-bg: #ecc5bf;
  --selection-text: #3b2220;
  --scrollbar-thumb: #a99587;
  --player-shell: #17110f;
  --on-player: #fffaf7;
  color-scheme: light;
}

html[data-theme] {
  --by-ink: var(--bg-page);
  --by-navy: var(--bg-surface);
  --by-panel: var(--bg-surface);
  --by-panel-2: var(--bg-surface-2);
  --by-surface: var(--bg-elevated);
  --by-line: var(--border-default);
  --by-line-strong: var(--border-strong);
  --by-gold: var(--brand-primary);
  --by-gold-bright: var(--brand-primary-hover);
  --by-text: var(--text-primary);
  --by-muted: var(--text-secondary);
  --by-muted-2: var(--text-muted);
  --by-green: var(--success);
  --by-red: var(--danger);
  --by-blue: var(--info);
  --by-shadow: var(--shadow-md);
  --by-radius: var(--radius-md);
  background: var(--bg-page);
}

html[data-theme] ::selection,
.jingsu-theme-scope[data-theme] ::selection { background: var(--selection-bg); color: var(--selection-text); }
html[data-theme] :where(button, a, input, select, textarea):focus-visible,
.jingsu-theme-scope[data-theme] :where(button, a, input, select, textarea):focus-visible {
  outline-color: var(--focus-ring);
}
html[data-theme] * { scrollbar-color: var(--scrollbar-thumb) var(--bg-surface-2); }
html[data-theme] *::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme] *::-webkit-scrollbar-track { background: var(--bg-surface-2); }
html[data-theme] *::-webkit-scrollbar-thumb { border: 2px solid var(--bg-surface-2); border-radius: 999px; background: var(--scrollbar-thumb); }

html[data-theme] body.by-v9,
html[data-theme] body.by-seo-page {
  background-color: var(--bg-page);
  background-image: none;
  color: var(--text-primary);
}

html[data-theme] :where(.by-live-header, .by-broadcast, .by-service-rail, .by-workspace, .by-access-card, .by-member-card, .by-dialog, .by-auth-dialog),
html[data-theme] :where(.by-seo-hero, .by-live-aside) {
  border-color: var(--border-default);
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
}
html[data-theme] :where(.by-panel-head, .by-broadcast-head, .by-section-head, .by-support-staff-queue-head) { background-color: var(--panel-header-bg); }
html[data-theme] :where(.by-live-header, .by-seo-header, .by-seo-nav) { background: var(--bg-surface); color: var(--text-primary); }
html[data-theme] :where(.by-live-header, .by-seo-header) { border-color: var(--border-default); box-shadow: var(--shadow-sm); }
html[data-theme] :where(.by-live-header .by-header-control, .by-btn-quiet, .by-secondary-link) {
  border-color: var(--border-default);
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
}
html[data-theme] :where(.by-live-header .by-header-control, .by-btn-quiet, .by-secondary-link):hover {
  border-color: var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text-primary);
}
html[data-theme] :where(.by-btn-primary, .by-btn-gold, .by-primary-link, .by-seo-live-link.is-live, .by-live-aside > a, .by-send-button) {
  border-color: var(--button-primary-bg);
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
}
html[data-theme] :where(.by-btn-primary, .by-btn-gold, .by-primary-link, .by-live-aside > a, .by-send-button):hover {
  border-color: var(--brand-primary-hover);
  background: var(--brand-primary-hover);
  color: var(--button-primary-text);
}
html[data-theme] :where(input, select, textarea) {
  border-color: var(--input-border);
  background: var(--input-bg);
  color: var(--input-text);
}
html[data-theme] :where(input, textarea)::placeholder { color: var(--input-placeholder); opacity: 1; }
html[data-theme] :where(button, input, select, textarea):disabled { opacity: .58; }

html[data-theme] :where(.by-kicker, .by-card-index, .by-broadcast-title > span, .by-hero-kicker, .by-article-brand, .by-category-links a:hover, .by-text-link, .by-section-title > a) { color: var(--brand-primary); }
html[data-theme] :where(.by-page-head p, .by-article-row p, .by-article-meta, .by-topic-list span, .by-article-subtitle, .by-article-byline, .by-seo-footer, .by-panel-head em, .by-composer-note) { color: var(--text-muted); }
html[data-theme] :where(.by-live-header .by-brand strong, .by-broadcast-head h1, .by-panel-head h2, .by-section-head h2, .by-online b, .by-page-head h1, .by-article-page h1) { color: var(--text-primary); }

html[data-theme] :where(.by-session-card, .by-rail-insight, .by-trend-item, .by-activity-card, .by-resource-item, .by-support-thread, .by-support-callback, .by-support-fallback, .by-service-grid button, .by-tabs, .by-persona-console, .by-persona-recent-chip) {
  border-color: var(--border-default);
  background: var(--bg-surface-2);
  color: var(--text-primary);
}
html[data-theme] :where(.by-service-grid button, .by-session-card, .by-trend-item, .by-activity-card, .by-resource-item):hover { border-color: var(--border-strong); background: var(--bg-elevated); }

html[data-theme] .by-chat-feed { background: var(--chat-bg); }
html[data-theme] .by-message { border-color: var(--border-default); background: transparent; color: var(--text-primary); }
html[data-theme] .by-message[data-self="true"],
html[data-theme] .by-message.is-self { background: var(--chat-self-bg); }
html[data-theme] .by-message-avatar { background: var(--chat-message-bg); color: var(--text-secondary); }
html[data-theme] .by-message:not(.has-member-color) :where(.by-message-name, .by-message-body) { color: var(--text-primary); }
html[data-theme] .by-message time { color: var(--text-muted); }
html[data-theme] .by-message.is-role-moderator { border-color: var(--info); }
html[data-theme] .by-message[data-sender-only="true"] { opacity: 1; }
html[data-theme] :where(.by-chat-composer, .by-support-composer, .by-support-staff-composer) { border-color: var(--border-default); background: var(--bg-surface-2); }
html[data-theme] :where(.by-emoji-popover, .by-quickphrase-popover, .by-colorbar-popover, .by-presence-popover, .by-theme-menu) {
  border-color: var(--border-default);
  background: var(--bg-elevated);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
}

html[data-theme] :where(.by-support-message p, .by-support-staff-session, .by-support-staff-lead) {
  border-color: var(--border-default);
  background: var(--chat-message-bg);
  color: var(--text-primary);
}
html[data-theme] .by-support-message.is-member p { background: var(--chat-self-bg); }
html[data-theme] :where(.by-support-message time, .by-support-staff-session-body small, .by-support-staff-session-body em) { color: var(--text-muted); }

html[data-theme] :where(.by-player-stage, .by-player-poster, .by-player-gate) { background: var(--player-shell); color: var(--on-player); color-scheme: dark; }
html[data-theme] .by-player-fullscreen { border-color: #4f5966; background: rgba(5, 10, 18, .78); color: var(--on-player); }

html[data-theme] .by-seo-main :where(.by-instrument-grid, .by-topic-directory) { border-color: var(--border-default); background: var(--border-default); }
html[data-theme] .by-seo-main :where(.by-instrument-grid > a, .by-topic-directory > a, .by-inline-links a, .by-pagination a, .by-live-ribbon, .by-article-summary, .by-risk-note, .by-article-taxonomy a, .by-article-taxonomy span) {
  border-color: var(--border-default);
  background: var(--bg-surface);
  color: var(--text-primary);
}
html[data-theme] .by-seo-main :where(.by-instrument-grid > a, .by-topic-directory > a, .by-inline-links a, .by-pagination a):hover { border-color: var(--brand-primary); background: var(--bg-surface-2); }
html[data-theme] :where(.by-article-list, .by-article-row, .by-topic-list, .by-topic-list a, .by-page-head, .by-article-byline, .by-article-taxonomy, .by-related-list, .by-related-list a, .by-seo-footer, .by-live-ribbon) { border-color: var(--border-default); }
html[data-theme] .by-richtext :where(a, h2, h3) { color: var(--text-primary); }
html[data-theme] .by-richtext a { color: var(--brand-primary); }
html[data-theme] .by-richtext blockquote { border-color: var(--border-default); background: var(--bg-surface-2); color: var(--text-secondary); }
html[data-theme] .by-article-summary { color: var(--text-secondary); }
html[data-theme] .by-risk-note p { color: var(--text-secondary); }
html[data-theme] .by-seo-live-link { border-color: var(--brand-primary); color: var(--brand-primary); }
html[data-theme] .by-live-ribbon span,
html[data-theme] .by-live-ribbon a { color: var(--brand-primary); }

.by-theme-picker { position: relative; z-index: 60; flex: 0 0 auto; }
.by-theme-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; }
.by-theme-trigger svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.by-theme-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 80; width: min(300px, calc(100vw - 24px)); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px; }
.by-theme-menu[hidden] { display: none; }
.by-theme-menu > b { display: block; font-size: 14px; }
.by-theme-menu > p { margin: 4px 0 10px; color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.by-theme-menu > button { display: grid; width: 100%; grid-template-columns: 30px 1fr; align-items: center; gap: 10px; min-height: 50px; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 7px 9px; background: transparent; color: var(--text-primary); text-align: left; }
.by-theme-menu > button:hover,
.by-theme-menu > button.is-active { border-color: var(--border-strong); background: var(--bg-surface-2); }
.by-theme-menu i { width: 28px; height: 28px; border: 1px solid rgba(127, 127, 127, .35); border-radius: 50%; box-shadow: inset 0 0 0 7px var(--swatch-accent); background: var(--swatch-bg); }
.by-theme-menu i.is-classic { --swatch-bg: #070d18; --swatch-accent: #d5b46a; }
.by-theme-menu i.is-ocean_gold { --swatch-bg: #061525; --swatch-accent: #d7b260; }
.by-theme-menu i.is-graphite_gold { --swatch-bg: #1c1d1f; --swatch-accent: #c9a85f; }
.by-theme-menu i.is-glacier { --swatch-bg: #f3f7fb; --swatch-accent: #1565b8; }
.by-theme-menu i.is-warm_red { --swatch-bg: #f5f1ec; --swatch-accent: #a23b36; }
.by-theme-menu strong,
.by-theme-menu small { display: block; }
.by-theme-menu small { margin-top: 2px; color: var(--text-muted); font-size: 10px; }

.by-seo-theme-host { display: flex; align-items: center; }
.by-seo-theme-host .by-theme-trigger { border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 0 12px; background: var(--button-secondary-bg); color: var(--button-secondary-text); }

.jingsu-theme-scope[data-theme] { background: var(--bg-page); color: var(--text-primary); }
.by-theme-preview { overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.by-theme-preview-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--border-default); background: var(--panel-header-bg); }
.by-theme-preview-header strong { color: var(--text-primary); }
.by-theme-preview-header span { color: var(--brand-primary); font-size: 12px; font-weight: 700; }
.by-theme-preview-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr); gap: 1px; background: var(--border-default); }
.by-theme-preview-main,
.by-theme-preview-chat { padding: 18px; background: var(--bg-surface); }
.by-theme-preview-main h3 { margin: 0; color: var(--text-primary); font-size: 20px; }
.by-theme-preview-main p { margin: 8px 0 18px; color: var(--text-secondary); }
.by-theme-preview-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.by-theme-preview-actions button { min-height: 40px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 0 14px; background: var(--button-secondary-bg); color: var(--button-secondary-text); font-weight: 700; }
.by-theme-preview-actions button:first-child { border-color: var(--button-primary-bg); background: var(--button-primary-bg); color: var(--button-primary-text); }
.by-theme-preview-chat { background: var(--chat-bg); }
.by-theme-preview-message { margin: 0 0 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 10px 12px; background: var(--chat-message-bg); color: var(--text-primary); }
.by-theme-preview-message.self { background: var(--chat-self-bg); }
.by-theme-preview-message b { color: var(--brand-primary); }
.by-theme-preview-message small { display: block; margin-top: 4px; color: var(--text-muted); }

@media (max-width: 900px) {
  .by-seo-theme-host .by-theme-trigger span { display: none; }
  .by-seo-theme-host .by-theme-trigger { min-width: 42px; padding: 0; }
}
@media (max-width: 640px) {
  .by-theme-menu { position: fixed; top: auto; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); left: 12px; width: auto; max-height: min(70vh, 520px); overflow: auto; }
  .by-theme-menu > button { min-height: 54px; }
  .by-theme-preview-body { grid-template-columns: 1fr; }
  .by-theme-preview-main,
  .by-theme-preview-chat { padding: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] *,
  html[data-theme] *::before,
  html[data-theme] *::after { scroll-behavior: auto; transition-duration: .01ms; animation-duration: .01ms; animation-iteration-count: 1; }
}