/*
 * 生活号 BrandKit — fixed dark product shell
 *
 * This file is intentionally loaded after app.css, guide.css and page-level
 * styles. It themes the cloned product UI only. Brand-manual screenshots and
 * palette swatches keep their source colors.
 *
 * The shell colors below are provisional product-interface values. They are
 * not published as brand-manual color tokens.
 */

:root {
  color-scheme: dark;

  /* shadcn/ui dark zinc：中性黑产品界面，不把品牌蓝铺进外壳。 */
  --shell-canvas: #09090b;
  --shell-sidebar: #09090b;
  --shell-surface: #0c0c0f;
  --shell-raised: #18181b;
  --shell-soft: #27272a;
  --shell-border: #27272a;
  --shell-border-strong: #3f3f46;
  --shell-text: #fafafa;
  --shell-text-muted: #a1a1aa;
  --shell-text-subtle: #71717a;
  --shell-primary: #fafafa;
  --shell-primary-foreground: #18181b;
  --shell-primary-soft: rgba(250, 250, 250, .08);
  --shell-focus: #d4d4d8;
  --shell-sweep-glow: rgba(250, 250, 250, .28);
  --shell-orange: #f59e0b;
  --shell-orange-soft: rgba(245, 158, 11, .12);

  --bg: var(--shell-canvas);
  --side: var(--shell-sidebar);
  --line: var(--shell-border);
  --line2: var(--shell-border);
  --ink: var(--shell-text);
  --ink2: var(--shell-text-muted);
  --ink3: var(--shell-text-subtle);
  --ink4: var(--shell-text-subtle);
  --pri: var(--shell-primary);
  --s-background: var(--shell-surface);
  --s-foreground: var(--shell-text);
  --s-card: var(--shell-surface);
  --s-card-foreground: var(--shell-text);
  --s-popover: var(--shell-raised);
  --s-popover-foreground: var(--shell-text);
  --s-primary: var(--shell-primary);
  --s-primary-foreground: var(--shell-primary-foreground);
  --s-secondary: var(--shell-raised);
  --s-secondary-foreground: var(--shell-text);
  --s-muted: var(--shell-soft);
  --s-muted-foreground: var(--shell-text-muted);
  --s-accent: var(--shell-soft);
  --s-accent-foreground: var(--shell-text);
  --s-destructive: #ff6b6b;
  --s-destructive-foreground: #fff;
  --s-border: var(--shell-border);
  --s-input: var(--shell-border);
  --s-ring: var(--shell-focus);
  --s-success: #48c98a;
  --s-warning: #f0bc52;
  --s-shadow-s: 0 1px 2px rgba(0, 0, 0, .24);
  --s-shadow-m: 0 10px 28px rgba(0, 0, 0, .28);
  --s-shadow-l: 0 22px 58px rgba(0, 0, 0, .38);
}

html,
body {
  background: var(--shell-canvas);
}

body {
  color: var(--shell-text);
}

::selection {
  background: rgba(250, 250, 250, .18);
  color: #fff;
}

/* Standalone index fallback before its redirect completes. */
body > p {
  margin: 0;
  padding: 32px;
  color: var(--shell-text-muted);
}

body > p a {
  color: var(--shell-text);
}

.skip-link {
  background: var(--shell-primary);
  color: var(--shell-primary-foreground);
}

/* Product frame */
.app {
  background: var(--shell-canvas);
}

.side {
  background: var(--shell-sidebar);
  border-right: 1px solid rgba(63, 63, 70, .72);
}

.main {
  background: var(--shell-surface);
  border-color: var(--shell-border);
  box-shadow: 0 20px 54px rgba(0, 0, 0, .24);
}

.body {
  background: var(--shell-surface);
  scrollbar-color: var(--shell-border) transparent;
}

.topbar {
  background: rgba(12, 12, 15, .96);
  border-bottom: 1px solid rgba(63, 63, 70, .58);
}

.side-top,
.side-sec,
.side-empty,
.side-ver,
.side-foot,
.topbar-r {
  color: var(--shell-text-subtle);
}

.side-foot {
  border-top-color: var(--shell-border);
}

.side-foot .ava {
  background: var(--shell-text);
}

/* Primary and secondary navigation */
.lv1 {
  background: var(--shell-raised);
  box-shadow: none;
}

.lv1 a {
  color: var(--shell-text-muted);
}

.lv1 a:hover,
.lv1 a.on {
  color: var(--shell-text);
}

.lv1:not(.has-indicator) a.on,
.lv1-indicator {
  background: var(--shell-soft);
  border-color: transparent;
  box-shadow: none;
}

.lv2 a,
.lv2 span.na {
  color: var(--shell-text-muted);
}

.lv2:not(.guide-tree) > a,
.lv2:not(.guide-tree) > span.na {
  box-sizing: border-box;
  height: 32px;
  padding: 7px 8px;
  border: 0;
  border-radius: 11px;
  box-shadow: none;
  font-size: 13.5px;
  line-height: 18px;
  transition: background-color .12s ease, color .12s ease;
}

.lv2:not(.guide-tree) > a svg,
.lv2:not(.guide-tree) > span.na svg {
  width: 16px;
  height: 16px;
  opacity: .68;
  transition: opacity .12s ease;
}

.lv2 a:hover {
  background: #262626;
  color: var(--shell-text);
  box-shadow: none;
}

.lv2 a.on,
.lv2 a[aria-current="page"] {
  background: #141414;
  color: var(--shell-text);
  font-weight: 500;
  box-shadow: none;
}

.lv2 a.on:hover,
.lv2 a[aria-current="page"]:hover {
  background: #141414;
}

.lv2 a:focus-visible {
  outline: 2px solid var(--shell-text-muted);
  outline-offset: -2px;
}

.lv2.guide-tree {
  scrollbar-color: var(--shell-border-strong) transparent;
}

.guide-nav-group {
  border-top-color: var(--shell-border);
}

.guide-tree .guide-nav-heading,
.guide-nav-group.is-current .guide-nav-heading {
  color: var(--shell-text);
}

.guide-tree .guide-nav-heading,
.guide-tree .guide-nav-item {
  border: 0;
  box-shadow: none;
}

.guide-tree .guide-nav-item:hover {
  background: #262626;
  color: var(--shell-text);
  box-shadow: none;
}

.guide-tree .guide-nav-item.on,
.guide-tree .guide-nav-item[aria-current="page"] {
  background: #141414;
  color: var(--shell-text);
  font-weight: 500;
  box-shadow: none;
}

.guide-tree .guide-nav-item.on:hover,
.guide-tree [aria-current="page"]:hover {
  background: #141414;
}

.guide-tree .guide-nav-item:focus-visible {
  outline: 2px solid var(--shell-text-muted);
  outline-offset: -2px;
}

.guide-tree .guide-nav-icon {
  color: var(--shell-text);
}

.lv2 span.na {
  color: var(--shell-text-subtle);
}

.side-task {
  color: var(--shell-text-muted);
  border: 0;
  box-shadow: none;
  transition: background-color .12s ease, color .12s ease;
}

.side-task:hover {
  background: #262626;
  color: var(--shell-text);
}

.side-task.on,
.side-task[aria-current="page"] {
  background: #141414;
  color: var(--shell-text);
}

.side-task.on:hover,
.side-task[aria-current="page"]:hover {
  background: #141414;
}

.side-task:focus-visible {
  outline: 2px solid var(--shell-text-muted);
  outline-offset: -2px;
}

.side-task span {
  color: var(--shell-text-subtle);
}

/* Header controls, popovers and identity switcher */
.notice,
.mcp {
  background: var(--shell-raised);
  border-color: var(--shell-border);
  color: var(--shell-text-muted);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}

.notice .go {
  background: var(--shell-primary);
  color: var(--shell-primary-foreground);
}

.notice .x {
  color: var(--shell-text-subtle);
}

.mcp:hover {
  background: var(--shell-soft);
  color: var(--shell-text);
}

.mcp s {
  background: #48c98a;
  box-shadow: 0 0 0 3px rgba(72, 201, 138, .12);
}

.chip {
  background: var(--shell-raised);
  color: var(--shell-text-muted);
  border: 1px solid var(--shell-border);
}

.role-switcher-trigger {
  color: var(--shell-text-muted);
}

.role-switcher-trigger:hover,
.role-switcher-trigger[aria-expanded="true"] {
  background: var(--shell-raised);
  color: var(--shell-text);
}

.role-switcher-trigger:focus-visible,
.role-option:focus-visible {
  outline-color: var(--shell-focus);
  box-shadow: inset 0 0 0 1px var(--shell-border-strong);
}

.role-menu {
  background: var(--shell-raised);
  border-color: var(--shell-border);
  box-shadow: 0 22px 58px rgba(0, 0, 0, .46);
}

.role-menu-title,
.role-current-label,
.role-option-copy .role-identity-tag {
  color: var(--shell-text-subtle);
}

.role-current-label,
.role-option-copy .role-identity-tag {
  border-color: var(--shell-border);
  background: var(--shell-surface);
}

.role-option {
  color: var(--shell-text);
}

.role-option:hover,
.role-option:focus-visible,
.role-option.is-current {
  background: var(--shell-soft);
}

.role-option-check {
  color: var(--shell-text);
}

/* Shared actions and content components */
.pill {
  background: var(--shell-soft);
  color: var(--shell-text-muted);
}

.btn,
.ui-btn {
  background: var(--shell-primary);
  color: var(--shell-primary-foreground);
}

.btn:hover,
.ui-btn:hover {
  background: #e4e4e7;
}

.btn.ghost,
.ui-btn.ghost,
.ui-btn.outline,
.ui-btn.secondary {
  background: var(--shell-raised);
  border-color: var(--shell-border);
  color: var(--shell-text);
}

.btn.ghost:hover,
.ui-btn.ghost:hover,
.ui-btn.outline:hover,
.ui-btn.secondary:hover {
  background: var(--shell-soft);
  border-color: var(--shell-border-strong);
}

.ui-btn.destructive {
  background: var(--s-destructive);
}

.ui-card,
.panel,
.ui-alert {
  background: var(--shell-surface);
  border-color: var(--shell-border);
  color: var(--shell-text);
}

.panel,
.ui-card {
  box-shadow: inset 0 1px rgba(255, 255, 255, .018);
}

.panel-title,
.page-title,
.section-title,
.sec-h,
.ui-label,
.ui-alert .alert-title {
  color: var(--shell-text);
}

.panel-description,
.page-description,
.sec-p,
.meta-row,
.muted,
.ui-help,
.ui-alert .alert-description {
  color: var(--shell-text-muted);
}

.ui-alert.soft {
  background: var(--shell-raised);
}

.ui-badge,
.ui-badge.secondary {
  background: var(--shell-soft);
  color: var(--shell-text);
  border-color: var(--shell-border);
}

.ui-badge.outline {
  color: var(--shell-text-muted);
  border-color: var(--shell-border);
}

.ui-tabs {
  background: var(--shell-raised);
}

.ui-tabs .t {
  color: var(--shell-text-muted);
}

.ui-tabs .t.on {
  background: var(--shell-soft);
  color: var(--shell-text);
  box-shadow: var(--s-shadow-s);
}

.ui-select,
.ui-input,
.ui-control {
  background: var(--shell-raised);
  border-color: var(--shell-border);
  color: var(--shell-text);
  box-shadow: none;
}

.ui-control::placeholder,
.ui-input .ph,
.ui-select .ph {
  color: var(--shell-text-subtle);
}

.ui-control:focus,
.ui-input:focus-within,
.ui-select:focus-visible {
  border-color: var(--shell-focus);
  outline-color: var(--shell-focus);
}

.task-type {
  background: var(--shell-raised);
  border-color: var(--shell-border);
  color: var(--shell-text);
}

.task-type:hover,
.task-type.on,
.task-type:has(input:checked) {
  background: var(--shell-soft);
  border-color: var(--shell-border-strong);
}

.task-type .type-icon,
.rule-icon,
.route-box > div {
  background: var(--shell-soft);
  color: var(--shell-text);
}

.task-type span,
.rule-list span,
.rule-list a,
.route-box span {
  color: var(--shell-text-muted);
}

.rule-list li {
  border-bottom-color: var(--shell-border);
}

.rule-list a:hover {
  color: var(--shell-text);
}

.result-preview {
  background: var(--shell-canvas);
  border-color: var(--shell-border);
}

.result-preview img {
  box-shadow: 0 22px 52px rgba(0, 0, 0, .42);
}

.result-preview.is-long-image {
  align-items: start;
  min-height: 720px;
  overflow: auto;
  background: radial-gradient(circle at 50% 0, #1a1a20, #0c0c10 52%, #09090c 100%);
  scrollbar-color: #3d3d44 transparent;
  scrollbar-width: thin;
}

.result-long-shell {
  position: relative;
  flex: none;
  margin: 4px auto 20px;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .52);
}

.result-long-shell .poster-document {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.result-long-shell .poster-module::after,
.result-long-shell .poster-module-delete,
.result-long-shell .poster-resize-handle {
  display: none !important;
}

.check-list li {
  color: var(--shell-text);
}

.check-list svg {
  color: #48c98a;
}

.code-block {
  background: var(--shell-canvas);
  color: #dce8ff;
  border: 1px solid var(--shell-border);
}

.tool-item {
  background: var(--shell-raised);
  border-color: var(--shell-border);
}

.tool-item code {
  color: #8dc5ff;
}

.tool-item p {
  color: var(--shell-text-muted);
}

/* Constraint/Skill preview dialog */
.skill-dialog-backdrop {
  background: rgba(2, 4, 12, .72);
}

.skill-dialog {
  background: var(--shell-raised);
  border-color: var(--shell-border);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .62);
}

.skill-file-icon {
  background: var(--shell-soft);
  color: #9acbff;
}

.skill-file-icon::after {
  background: var(--shell-raised);
}

.skill-dialog-title h2,
.skill-markdown,
.skill-markdown p {
  color: var(--shell-text);
}

.skill-dialog-title p,
.skill-dialog-state {
  color: var(--shell-text-muted);
}

.skill-dialog-close {
  color: var(--shell-text-muted);
}

.skill-dialog-close:hover {
  background: var(--shell-soft);
  color: var(--shell-text);
}

.skill-dialog-body {
  background: var(--shell-surface);
  border-color: var(--shell-border);
  scrollbar-color: var(--shell-border) transparent;
}

.skill-dialog-spinner {
  border-color: var(--shell-border);
  border-top-color: var(--shell-text);
}

.skill-markdown h2 {
  border-top-color: var(--shell-border);
}

.skill-markdown blockquote {
  background: var(--shell-primary-soft);
  border-left-color: var(--shell-focus);
  color: var(--shell-text-muted);
}

.skill-markdown code {
  background: var(--shell-soft);
  color: #cfe6ff;
}

.skill-markdown pre {
  background: var(--shell-canvas);
  color: #dce8ff;
  border: 1px solid var(--shell-border);
}

/* Template library / Make */
.search-control input {
  color: var(--shell-text);
}

.search-control input::placeholder {
  color: var(--shell-text-subtle);
}

.market-tag {
  background: var(--shell-raised);
  border-color: var(--shell-border);
  color: var(--shell-text-muted);
}

.market-tag:hover,
.market-tag.on {
  background: var(--shell-soft);
  border-color: var(--shell-border-strong);
  color: var(--shell-text);
}

.market-section-head,
.market-section-head .cnt {
  color: var(--shell-text-subtle);
}

.market-card {
  border-bottom-color: var(--shell-border);
}

.market-card:hover {
  background: var(--shell-raised);
}

.market-thumb {
  background: var(--shell-soft);
  border-color: var(--shell-border);
  box-shadow: 0 5px 16px rgba(0, 0, 0, .22);
}

.market-copy b {
  color: var(--shell-text);
}

.market-copy small {
  color: var(--shell-text-muted);
}

.market-card:hover .market-use {
  background: var(--shell-soft);
}

.template-empty {
  border-color: var(--shell-border);
  color: var(--shell-text-subtle);
}

/* Make / new task prompt and animated pipeline */
.agent-type-title {
  color: var(--shell-text);
}

.agent-type-cursor {
  color: var(--shell-text);
}

.agent-prompt.messageInputContainer {
  background: var(--shell-canvas);
}

.chat-input-v2-editor-part {
  background: var(--shell-raised);
  border-color: var(--shell-border);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .025);
}

.agent-prompt:focus-within .chat-input-v2-editor-part {
  border-color: var(--shell-border-strong);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .36), 0 0 0 3px rgba(250, 250, 250, .07);
}

.agent-prompt textarea.chat-input-v2-input-box-editable {
  color: var(--shell-text);
}

.agent-prompt textarea.chat-input-v2-input-box-editable::placeholder {
  color: var(--shell-text-subtle);
}

.core-model-select-trigger,
.messageInputToolbarIconBtn,
.agent-speed,
.inputBarButton-l_13bv {
  color: var(--shell-text-muted);
}

.core-model-select-trigger svg,
.inputBarButtonArrow-LWv76z {
  color: var(--shell-text-subtle);
}

.core-model-select-trigger:hover,
.core-model-select-trigger:focus-visible,
.messageInputToolbarIconBtn:hover,
.messageInputToolbarIconBtn:focus-visible,
.agent-speed:hover,
.agent-speed:focus-visible,
.inputBarButton-l_13bv:hover,
.inputBarButton-l_13bv:focus-visible {
  background: var(--shell-soft);
  color: var(--shell-text);
}

.chat-input-v2-send-button,
.chat-input-v2-send-button:disabled,
.chat-input-v2-send-button.disabled {
  background: var(--shell-primary);
  color: var(--shell-primary-foreground);
}

.chat-input-v2-send-button:not(:disabled):hover {
  background: #e4e4e7;
}

.agent-morph-summary {
  background: var(--shell-raised);
  color: var(--shell-text);
}

.agent-morph-summary span,
.agent-request-meta {
  color: var(--shell-text-subtle);
}

.agent-morph-summary span::before,
.agent-request-meta i {
  background: var(--shell-text-muted);
}

.agent-canvas::before {
  background: var(--shell-border);
}

.agent-canvas::after {
  background: linear-gradient(90deg, var(--shell-text), var(--shell-text-subtle));
}

.agent-stage-chip {
  background: transparent;
  border: 0;
  color: var(--shell-text-muted);
  box-shadow: none;
}

.agent-stage-chip__inner {
  background: var(--shell-raised);
  border-color: var(--shell-border);
  box-shadow: none;
}

.agent-stage-chip svg,
.agent-stage.is-active .agent-stage-chip {
  color: var(--shell-text);
}

.agent-stage.is-active .agent-stage-chip {
  box-shadow: none;
}

.agent-stage.is-active .agent-stage-chip__inner {
  border-color: var(--shell-border-strong);
}

.agent-request-card {
  background: var(--shell-raised);
  border: 0;
  box-shadow: none;
}

.agent-request-card p {
  color: var(--shell-text);
}

.agent-step {
  background: rgba(24, 24, 27, .82);
  border: 0;
  color: var(--shell-text-subtle);
}

.agent-step::before,
.agent-check::before {
  border-color: #415173;
}

.agent-step.is-current,
.agent-step.is-settling,
.agent-step.is-done {
  background: var(--shell-raised);
  border: 0;
  color: var(--shell-text);
}

.agent-step.is-current::before,
.agent-check.is-current::before {
  border-color: var(--shell-text);
  border-top-color: transparent;
}

.agent-step.is-settling::before,
.agent-check.is-settling::before {
  border-color: var(--shell-text-muted);
}

.agent-step.is-done::before,
.agent-check.is-passed::before {
  border-color: var(--shell-text);
  background: var(--shell-text);
  color: var(--shell-primary-foreground);
}

.agent-sweep-label.is-sweeping,
.agent-check-head b {
  color: var(--shell-text);
}

.agent-check-status {
  color: var(--shell-text-subtle);
}

.agent-check-head,
.agent-check {
  color: var(--shell-text-subtle);
}

.agent-check {
  border-bottom-color: var(--shell-border);
}

.agent-check.is-current,
.agent-check.is-settling,
.agent-check.is-passed {
  color: var(--shell-text-muted);
}

.agent-output,
.agent-output-visual {
  background: var(--shell-canvas);
}

/* Audit board */
.audit-stage-fade {
  background: linear-gradient(90deg, rgba(12, 12, 15, 0), rgba(12, 12, 15, .78) 50%, var(--shell-surface) 100%);
}

.audit-card {
  background: var(--shell-raised);
  border-color: var(--shell-border);
  color: var(--shell-text);
}

.audit-card:hover {
  background: var(--shell-soft);
  border-color: var(--shell-border-strong);
}

.audit-owner,
.audit-card time {
  color: var(--shell-text-muted);
}

.audit-avatar {
  background: var(--shell-soft);
}

.audit-column.todo .audit-column-head {
  background: rgba(250, 204, 21, .1);
  color: #fde047;
}

.audit-column.auditing .audit-column-head {
  background: var(--shell-primary-soft);
  color: var(--shell-text);
}

.audit-column.blocked .audit-column-head {
  background: var(--shell-orange-soft);
  color: #fbbf24;
}

.audit-column.done .audit-column-head {
  background: rgba(72, 201, 138, .12);
  color: #7de1ad;
}

/* Existing Guide containers; visual artifacts inside images/swatches are untouched. */
.ghead h1,
.ghead h2,
.ent h3,
.ent h4,
.asset-name,
.asset-font-note b,
.specimen-copy h3,
.type-label b,
.sb .v {
  color: var(--shell-text);
}

.ghead .guide-page-title strong {
  color: #fff;
}

.ghead .guide-page-title span {
  color: #797d86;
}

.ghead p,
.ent .txt,
.ent .li,
.sb .k,
.tset .t .mt span,
.specimen-copy .txt,
.specimen-family,
.type-label,
.motion-caption p,
.motion-toolbar,
.mood-toolbar,
.asset-facts,
.asset-group-head p,
.assets-intro p,
.asset-font-note span,
.ip-library-head span {
  color: var(--shell-text-muted);
}

.ent,
.sb,
.assets-intro,
.asset-list,
.asset-row,
.asset-font-note,
.ip-library-head,
.specimen-section,
.specimen-row,
.motion-tokens,
.motion-token,
.mood-tags span,
.tset .t {
  border-color: var(--shell-border);
}

.figbox,
.figbox.pad,
.figbox.basic-canvas,
.stage,
.cell,
.guide-panel,
.vessa-paper,
.motion-stage,
.mood-cloud,
.asset-preview,
.ip-tile,
.tset .t .mt {
  background: var(--shell-raised);
  border-color: var(--shell-border);
}

.cell .cap {
  background: rgba(24, 24, 27, .94);
  border-top-color: var(--shell-border);
  color: var(--shell-text-muted);
}

.cell.bad {
  border-color: rgba(245, 158, 11, .38);
}

.cell.bad .cap {
  background: rgba(245, 158, 11, .09);
  border-top-color: rgba(245, 158, 11, .24);
  color: #fbbf24;
}

.cell.ok .cap {
  background: rgba(72, 201, 138, .1);
  border-top-color: rgba(72, 201, 138, .24);
  color: #7de1ad;
}

.vessa-frame {
  background-color: var(--shell-canvas);
}

.vessa-paper {
  color: var(--shell-text);
}

.vessa-paper-head,
.specimen-family,
.specimen-section,
.specimen-row,
.motion-tokens,
.motion-token,
.asset-row,
.asset-font-note {
  border-color: var(--shell-border);
}

.vessa-paper-head p,
.vessa-kicker,
.specimen-copy .txt,
.specimen-family,
.type-label,
.motion-caption p,
.motion-token span {
  color: var(--shell-text-muted) !important;
}

.vessa-link,
.type-sample,
.type-label b,
.motion-token b {
  color: var(--shell-text);
}

.vessa-link:hover,
.asset-action:hover,
.dl:hover {
  color: var(--shell-text);
  text-decoration-color: var(--shell-text-muted);
}

.motion-replay,
.mood-switch,
.mood-shuffle,
.ip-library-more {
  background: var(--shell-raised);
  border-color: var(--shell-border);
  color: var(--shell-text-muted);
}

.motion-replay:hover,
.mood-shuffle:hover,
.ip-library-more:hover {
  background: var(--shell-soft);
  border-color: var(--shell-border-strong);
  color: var(--shell-text);
}

.mood-switch button {
  color: var(--shell-text-muted);
}

.mood-switch button.on {
  background: var(--shell-primary);
  color: var(--shell-primary-foreground);
}

.mood-tags span {
  color: var(--shell-text-muted);
}

/* Legacy guide-color swatches intentionally retain inline backgrounds/colors. */
.cgrp {
  border: 1px solid var(--shell-border);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
}

/* Generated manual-backed Guide pages */
.guide-document .ghead,
.guide-document .guide-index-card,
.guide-document .ent,
.guide-document .font-playground,
.guide-document .guide-block {
  border-bottom-color: rgba(255, 255, 255, .075);
}

.guide-page-head,
.guide-hero,
.manual-section,
.guide-alerts,
.font-specimens,
.font-license-note,
.download-card,
.missing-list,
.guide-notes {
  color: var(--shell-text);
}

.guide-page-head {
  border-bottom-color: var(--shell-border);
}

.guide-kicker {
  color: var(--shell-text-muted);
}

.guide-status,
.guide-source {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--shell-border);
  background: var(--shell-raised);
  color: var(--shell-text-muted);
}

.guide-status[data-status="draft"],
.guide-status.is-draft {
  border-color: rgba(245, 158, 11, .34);
  background: var(--shell-orange-soft);
  color: #fbbf24;
}

.guide-status[data-status="confirmed"],
.guide-status.is-confirmed {
  border-color: var(--shell-border-strong);
  background: var(--shell-primary-soft);
  color: var(--shell-text);
}

.guide-source {
  color: var(--shell-text-subtle);
}

.guide-alerts,
.font-license-note,
.guide-notes {
  background: var(--shell-raised);
  border-color: var(--shell-border);
}

.guide-alerts a,
.guide-notes a {
  color: var(--shell-text);
}

.guide-hero,
.manual-section {
  border-color: var(--shell-border);
  background: var(--shell-surface);
}

.manual-copy,
.manual-copy p,
.manual-copy li,
.guide-bullets,
.guide-bullets li,
.font-license-note,
.download-card p,
.missing-list,
.guide-notes {
  color: var(--shell-text-muted);
}

.manual-copy h2,
.manual-copy h3,
.manual-copy h4,
.font-row b,
.download-card h3 {
  color: var(--shell-text);
}

.manual-media {
  background: var(--shell-canvas);
  border: 1px solid var(--shell-border);
  box-shadow: inset 0 1px rgba(255, 255, 255, .02);
}

.guide-breadcrumbs,
.guide-toc p,
.guide-index-card span {
  color: var(--shell-text-subtle);
}

.guide-breadcrumbs a {
  color: #62a8ff;
}

.guide-reference-note {
  border-color: var(--shell-border);
  background: var(--shell-raised);
  color: var(--shell-text);
}

.guide-reference-note p,
.guide-toc a,
.guide-index-card p {
  color: var(--shell-text-muted);
}

.guide-reference-note a,
.guide-toc a:hover,
.guide-index-card h2 {
  color: var(--shell-text);
}

.guide-related-links a {
  border-color: var(--shell-border);
  background: var(--shell-raised);
  color: var(--shell-text-muted);
}

.guide-related-links a:hover {
  border-color: var(--shell-border-strong);
  color: var(--shell-text);
}

.guide-index-list,
.guide-index-card {
  border-color: var(--shell-border);
}

/* Never filter or recolor the source manual. */
.manual-image,
.manual-media img {
  filter: none;
  mix-blend-mode: normal;
  color-scheme: normal;
}

.palette-grid,
.font-specimens,
.download-grid {
  border-color: var(--shell-border);
}

.palette-card,
.font-row,
.download-card {
  background: var(--shell-raised);
  border-color: var(--shell-border);
  color: var(--shell-text);
}

/* .palette-swatch owns its manual HEX background; do not override it here. */
.palette-card code,
.font-row code,
.download-card code {
  background: var(--shell-soft);
  color: #cfe6ff;
}

.download-card:hover {
  background: var(--shell-soft);
  border-color: var(--shell-border-strong);
}

.missing-list {
  border-color: rgba(245, 158, 11, .28);
  background: var(--shell-orange-soft);
}

@media (max-width: 860px) {
  .app {
    background: var(--shell-canvas);
  }

  .side {
    background: rgba(9, 9, 11, .96);
    border-color: var(--shell-border);
  }

  .main {
    background: var(--shell-surface);
  }
}