/* Shared five-style skin. Layout, routing and status meanings stay page-owned. */
@font-face {
  font-family: "Sansita Swashed";
  src: url("./sansita-swashed-regular-v1.ttf") format("truetype");
  font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Sansita Swashed";
  src: url("./sansita-swashed-bold-v1.ttf") format("truetype");
  font-style: normal; font-weight: 700; font-display: swap;
}
html:root[data-li-style-surface] {
  --li-ui-bg: #f5eee2;
  --li-ui-surface: #fffaf2;
  --li-ui-soft: #ebe0cf;
  --li-ui-input: #faf4e9;
  --li-ui-ink: #2a241d;
  --li-ui-muted: #736351;
  --li-ui-line: #d6cbbb;
  --li-ui-line-strong: #9a8771;
  --li-ui-accent: #485d47;
  --li-ui-button: #55402f;
  --li-ui-button-ink: #fffaf2;
  --li-ui-danger: #a13029;
  --li-ui-success: #356449;
  --li-ui-warning: #835711;
  --li-ui-warn-bg: #f7e9c9;
  --li-ui-radius: 3px;
  --li-ui-button-radius: 999px;
  --li-ui-shadow: 0 12px 36px #4b3a2410;
  --li-ui-font: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --li-ui-display: Georgia, "Songti SC", serif;
  --li-ui-scheme: light;
}
html:root[data-li-style-surface][data-style="swiss"] {
  --li-ui-bg: #f3f7fc; --li-ui-surface: #fff; --li-ui-soft: #e8eef6;
  --li-ui-input: #f8fafc; --li-ui-ink: #14273c; --li-ui-muted: #52667d;
  --li-ui-line: #ccd9e7; --li-ui-line-strong: #7991ad; --li-ui-accent: #136fc4;
  --li-ui-button: #176dc0; --li-ui-button-ink: #fff;
  --li-ui-radius: 2px; --li-ui-button-radius: 2px; --li-ui-shadow: none;
  --li-ui-font: "Helvetica Neue", "Segoe UI", "Microsoft YaHei", sans-serif;
  --li-ui-display: "Helvetica Neue", "Segoe UI", "Microsoft YaHei", sans-serif;
}
html:root[data-li-style-surface][data-style="archive"] {
  --li-ui-bg: #f0f0e6; --li-ui-surface: #fffef5; --li-ui-soft: #e3e7d8;
  --li-ui-input: #f6f5eb; --li-ui-ink: #203a2b; --li-ui-muted: #586754;
  --li-ui-line: #a6b19c; --li-ui-line-strong: #73836b; --li-ui-accent: #375f40;
  --li-ui-button: #2c4e37; --li-ui-button-ink: #f4f4e6;
  --li-ui-radius: 0px; --li-ui-button-radius: 0px; --li-ui-shadow: 6px 6px 0 #314c3522;
  --li-ui-font: "Courier New", "Songti SC", "Microsoft YaHei", serif;
}
html:root[data-li-style-surface][data-style="night"] {
  --li-ui-bg: #0d1330; --li-ui-surface: #151d3c; --li-ui-soft: #202b4b;
  --li-ui-input: #10182f; --li-ui-ink: #edf0fc; --li-ui-muted: #abb5d0;
  --li-ui-line: #354367; --li-ui-line-strong: #7080aa; --li-ui-accent: #e7c879;
  --li-ui-button: #e7c879; --li-ui-button-ink: #151d34;
  --li-ui-danger: #ffaaa5; --li-ui-success: #99d6b2; --li-ui-warning: #efd097;
  --li-ui-warn-bg: #393128; --li-ui-radius: 12px; --li-ui-button-radius: 999px;
  --li-ui-shadow: 0 20px 56px #03061666; --li-ui-scheme: dark;
}
html:root[data-li-style-surface][data-style="studio"] {
  --li-ui-bg: #fff; --li-ui-surface: #fff; --li-ui-soft: #f0f2f5;
  --li-ui-input: #f6f7f9; --li-ui-ink: #24272c; --li-ui-muted: #626871;
  --li-ui-line: #e2e5ea; --li-ui-line-strong: #9198a3; --li-ui-accent: #2877c1;
  --li-ui-button: #25292e; --li-ui-button-ink: #fff;
  --li-ui-radius: 18px; --li-ui-button-radius: 999px; --li-ui-shadow: 0 18px 50px #182c4310;
  --li-ui-display: "Helvetica Neue", "Segoe UI", "Microsoft YaHei", sans-serif;
}

/* Reuse the existing console skin's semantic hooks instead of styling every div. */
html:root[data-li-style-surface="console"][data-style] {
  --li-garden-paper: var(--li-ui-bg) !important;
  --li-garden-surface: var(--li-ui-surface) !important;
  --li-garden-surface-soft: var(--li-ui-soft) !important;
  --li-garden-ink: var(--li-ui-ink) !important;
  --li-garden-wood: var(--li-ui-button) !important;
  --li-garden-wood-dark: var(--li-ui-button) !important;
  --li-garden-moss: var(--li-ui-accent) !important;
  --li-garden-muted: var(--li-ui-muted) !important;
  --li-garden-line: var(--li-ui-line) !important;
  --li-garden-line-strong: var(--li-ui-line-strong) !important;
  --li-garden-gold: var(--li-ui-accent) !important;
}
html:root[data-li-style-surface="console"][data-li-api-app-shell="1"][data-style] {
  color-scheme: var(--li-ui-scheme) !important;
  background: var(--li-ui-bg) !important;
}
html:root[data-li-style-surface="console"][data-li-api-app-shell="1"][data-style] body {
  background: var(--li-ui-bg) !important;
  color: var(--li-ui-ink) !important;
  font-family: var(--li-ui-font) !important;
}
html:root[data-li-style-surface="console"][data-li-api-app-shell="1"][data-style] body::before { background: none !important; }
html:root[data-li-style-surface="console"][data-li-api-app-shell="1"][data-style] :is(header, nav, aside, [role="navigation"], [role="banner"], [data-li-api-garden-nav="1"]) {
  color: var(--li-ui-ink) !important;
  background: var(--li-ui-surface) !important;
  border-color: var(--li-ui-line) !important;
}
html:root[data-li-style-surface="console"][data-li-api-app-shell="1"][data-style] :is([data-li-api-garden-card="1"], [data-slot="card"], [role="dialog"]) {
  color: var(--li-ui-ink) !important;
  background: var(--li-ui-surface) !important;
  border-color: var(--li-ui-line) !important;
  border-radius: var(--li-ui-radius) !important;
  box-shadow: var(--li-ui-shadow) !important;
}
html:root[data-li-style-surface="console"][data-li-api-app-shell="1"][data-style] :is(h1, h2, h3) { font-family: var(--li-ui-display) !important; }
html:root[data-li-style-surface="console"][data-li-api-app-shell="1"][data-style] :is(input, textarea, select) {
  color: var(--li-ui-ink) !important;
  background: var(--li-ui-input) !important;
  border-color: var(--li-ui-line-strong) !important;
  border-radius: var(--li-ui-radius) !important;
  box-shadow: none !important;
}
html:root[data-li-style-surface="console"][data-li-api-app-shell="1"][data-style] :is(button[type="submit"], input[type="submit"], button[data-variant="primary"], button.bg-primary, .li-api-wordmark, .li-api-index-link) {
  color: var(--li-ui-button-ink) !important;
  background: var(--li-ui-button) !important;
  border-color: var(--li-ui-button) !important;
  border-radius: var(--li-ui-button-radius) !important;
  box-shadow: none !important;
}
html:root[data-li-style-surface="console"][data-li-api-app-shell="1"][data-style] table tr:hover { background: var(--li-ui-soft) !important; }


/* Five-style contract: the selected style is the only palette. The upstream
   light/dark class is deliberately ignored so headers, body, cards and edges
   cannot split into black/white surfaces. */
html:root[data-li-style-surface][data-style] {
  color-scheme: var(--li-ui-scheme, light) !important;
  background: var(--li-ui-bg) !important;
}
html:root[data-li-style-surface][data-style] body,
html:root[data-li-style-surface][data-style] #root {
  background: var(--li-ui-bg) !important;
  color: var(--li-ui-ink) !important;
}
html:root[data-li-style-surface="console"][data-style] :is(header, nav, aside, main, section, article, [role="navigation"], [role="banner"], [role="dialog"]) {
  border-color: var(--li-ui-line) !important;
}
html:root[data-li-style-surface][data-style] [data-li-native-theme="1"] {
  display: none !important;
}

/* Local documents, BYOK, pool and workspace keep their own layout and forms. */
html:root[data-li-style-surface="document"][data-style] {
  --bg: var(--li-ui-bg); --paper: var(--li-ui-bg);
  --fg: var(--li-ui-ink); --ink: var(--li-ui-ink); --text: var(--li-ui-ink);
  --text-strong: var(--li-ui-ink); --text-sub: var(--li-ui-muted); --text-muted: var(--li-ui-muted);
  --sub: var(--li-ui-muted); --mut: var(--li-ui-muted); --muted: var(--li-ui-muted); --dim: var(--li-ui-muted);
  --panel: var(--li-ui-surface); --panel-deep: var(--li-ui-input);
  --surface: var(--li-ui-surface); --surface-2: var(--li-ui-soft);
  --box: var(--li-ui-soft); --soft: var(--li-ui-soft); --code: var(--li-ui-input);
  --line: var(--li-ui-line); --line-list: var(--li-ui-line); --line-strong: var(--li-ui-line-strong);
  --btn-border: var(--li-ui-line-strong); --brand: var(--li-ui-accent); --green: var(--li-ui-accent);
  --link: var(--li-ui-accent); --link-hover: var(--li-ui-accent); --link-action: var(--li-ui-accent);
  --lime: var(--li-ui-accent); --blue: var(--li-ui-accent); --cyan: var(--li-ui-success);
  --red: var(--li-ui-danger); --orange: var(--li-ui-warning);
  --warn: var(--li-ui-warn-bg); --warn-line: var(--li-ui-warning);
  --sans: var(--li-ui-font);
  color-scheme: var(--li-ui-scheme) !important;
  color: var(--li-ui-ink) !important;
  background: var(--li-ui-bg) !important;
}
html:root[data-li-style-surface="document"][data-style] body {
  background: var(--li-ui-bg) !important;
  color: var(--li-ui-ink) !important;
  font-family: var(--li-ui-font) !important;
  padding-bottom: max(80px, env(safe-area-inset-bottom)) !important;
}
html:root[data-li-style-surface="document"][data-style] :is(h1, h2, h3, h4, .g-logo) {
  color: var(--li-ui-ink);
  font-family: var(--li-ui-display);
}
html:root[data-li-style-surface="document"][data-style] :is(a, a:link, a:visited) { color: var(--li-ui-accent); }
html:root[data-li-style-surface="document"][data-style] p { color: var(--li-ui-ink); }
/* Inline API paths wrap on small screens; preformatted examples keep their scroll. */
html:root[data-li-style-surface="document"][data-style] :not(pre) > code { overflow-wrap: anywhere; word-break: break-word; }
html:root[data-li-style-surface="document"][data-style] :is(.g-header-box, .g-body, .g-nei-left, .card, .auth-panel, .panel, .g-button) {
  background: var(--li-ui-surface) !important;
  color: var(--li-ui-ink);
  border-color: var(--li-ui-line);
}
html:root[data-li-style-surface="document"][data-style] :is(.card, .auth-panel, .panel) { border-radius: var(--li-ui-radius); }
html:root[data-li-style-surface="document"][data-style] header { background: var(--li-ui-bg); border-color: var(--li-ui-line); }
html:root[data-li-style-surface="document"][data-style] :is(.meta, .note, .g-note, .ui, .panel .messages) {
  color: var(--li-ui-ink);
  background: var(--li-ui-soft);
  border-color: var(--li-ui-line-strong);
}
html:root[data-li-style-surface="document"][data-style] :is(.muted, .sub, .lead, .intro, .description, .number, .eyebrow, .bottom p, .foot, footer, small) { color: var(--li-ui-muted); }
html:root[data-li-style-surface="document"][data-style] .panel :is(p, .message strong) { color: var(--li-ui-muted); }
html:root[data-li-style-surface="document"][data-style] :is(th, td) { border-color: var(--li-ui-line); }
html:root[data-li-style-surface="document"][data-style] th { color: var(--li-ui-ink); background: var(--li-ui-soft); }
html:root[data-li-style-surface="document"][data-style] :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
  color: var(--li-ui-ink) !important;
  background: var(--li-ui-input) !important;
  border-color: var(--li-ui-line-strong) !important;
}
html:root[data-li-style-surface="document"][data-style] :is(input, textarea)::placeholder { color: var(--li-ui-muted); }
html:root[data-li-style-surface="document"][data-style] button {
  color: var(--li-ui-ink);
  background: var(--li-ui-surface);
  border-color: var(--li-ui-line-strong);
  border-radius: var(--li-ui-button-radius);
}
html:root[data-li-style-surface="document"][data-style] :is(.primary, .btn, button[type="submit"], nav .active) {
  color: var(--li-ui-button-ink) !important;
  background: var(--li-ui-button) !important;
  border-color: var(--li-ui-button) !important;
}
html:root[data-li-style-surface="document"][data-style] :is(button.gray, .btn.gray, .secondary, .g-button) {
  color: var(--li-ui-accent) !important;
  background: var(--li-ui-surface) !important;
  border-color: var(--li-ui-line-strong) !important;
}
html:root[data-li-style-surface="document"][data-style] :is(.danger, .err, .message[data-tone="error"]) { color: var(--li-ui-danger) !important; }
html:root[data-li-style-surface="document"][data-style] :is(.ok, .message[data-tone="success"]) { color: var(--li-ui-success) !important; }
html:root[data-li-style-surface="document"][data-style] .g-banner { background: var(--li-ui-button); }
html:root[data-li-style-surface="document"][data-style] :is(.g-banner-title, .g-banner-sub) { color: var(--li-ui-button-ink); }
html:root[data-li-style-surface="document"][data-style] ol.steps > li::before { color: var(--li-ui-button-ink); background: var(--li-ui-button); }
html:root[data-li-style-surface="document"][data-style] :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--li-ui-accent) !important;
  outline-offset: 3px;
}

/* Native select supports keyboard/screen readers without a second menu protocol. */
html:root[data-li-style-surface] #li-style-picker {
  position: fixed !important;
  right: max(16px, env(safe-area-inset-right)) !important;
  bottom: max(16px, env(safe-area-inset-bottom)) !important;
  z-index: 10050;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: auto;
  max-width: calc(100vw - 32px);
  margin: 0 !important;
  padding: 8px 10px 8px 13px !important;
  color: var(--li-ui-ink) !important;
  background: var(--li-ui-surface) !important;
  border: 1px solid var(--li-ui-line-strong) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 18px #00000018;
  font: 13px/1.4 "Segoe UI", "Microsoft YaHei", sans-serif !important;
  letter-spacing: normal !important;
  color-scheme: var(--li-ui-scheme);
}
html:root[data-li-style-surface] #li-style-picker[hidden] { display: none !important; }
html:root[data-li-style-surface] #li-style-picker label {
  display: block;
  flex: 0 0 auto;
  margin: 0;
  color: var(--li-ui-muted) !important;
  font: inherit !important;
}
html:root[data-li-style-surface] #li-style-picker #li-style-select {
  display: block;
  box-sizing: border-box;
  width: auto !important;
  min-width: 90px;
  max-width: 160px;
  height: auto;
  min-height: 36px;
  margin: 0 !important;
  padding: 6px 24px 6px 10px !important;
  color: var(--li-ui-ink) !important;
  background: var(--li-ui-input) !important;
  border: 1px solid var(--li-ui-line) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font: inherit !important;
  cursor: pointer;
  appearance: auto !important;
}
html:root[data-li-style-surface] #li-style-picker #li-style-select:focus-visible {
  outline: 2px solid var(--li-ui-accent) !important;
  outline-offset: 2px;
}
@media (max-width: 480px) {
  html:root[data-li-style-surface] #li-style-picker { right: 10px !important; bottom: max(10px, env(safe-area-inset-bottom)) !important; max-width: calc(100vw - 20px); }
}
@media (forced-colors: active) {
  html:root[data-li-style-surface] #li-style-picker { border: 1px solid CanvasText !important; }
}

/* The reference's expressive Latin face is for display copy, not data or controls.
   Missing Chinese glyphs fall through to each surface's existing Chinese font. */
html:root[data-li-style-surface][data-style] {
  --li-ui-display: "Sansita Swashed", "Songti SC", "Microsoft YaHei", serif;
}
html:root[data-li-api-auth-page="1"][data-style] .li-api-auth-visual-copy h1,
html:root[data-li-api-auth-page="1"][data-style] .li-api-auth-visual-copy h1 em {
  font-family: "Sansita Swashed", Georgia, serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: normal !important;
}
html:root[data-li-style-surface="landing"][data-style] :is(.hero-title, .h1, .h2, .h3) {
  font-family: "Sansita Swashed", var(--font-display) !important;
}
@media (max-width: 960px) {
  html:root[data-li-api-auth-page="1"] #li-style-picker {
    position: absolute !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    bottom: auto !important;
    right: 10px !important;
  }
}

/* 2026-10-03: styles moved into the console header (theme drawer section + theme menu items). */
.li-style-section { margin-bottom: 4px; }
.li-style-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.li-style-chip, .li-style-menu-item {
  font: inherit; font-size: 13px; line-height: 1.2; cursor: pointer;
  color: var(--li-ui-ink, var(--foreground, CanvasText)); background: transparent;
  border: 1px solid var(--li-ui-line-strong, var(--border, #d6d6d6)); border-radius: 8px; padding: 8px 4px;
  transition: border-color .15s ease, background-color .15s ease;
}
.li-style-chip:hover, .li-style-menu-item:hover { background: var(--li-ui-soft, var(--accent, rgba(127,127,127,.12))); }
.li-style-chip[aria-pressed="true"], .li-style-menu-item[aria-checked="true"] {
  border-color: var(--li-ui-accent, var(--primary, CanvasText)); box-shadow: inset 0 0 0 1px var(--li-ui-accent, var(--primary, CanvasText)); font-weight: 600;
}
.li-style-chip:focus-visible, .li-style-menu-item:focus-visible { outline: 2px solid var(--li-ui-accent, var(--ring, Highlight)); outline-offset: 2px; }
.li-style-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 6px 4px 4px; margin-top: 4px; border-top: 1px solid var(--li-ui-line, var(--border, #d6d6d6)); }
.li-style-menu-label { grid-column: 1 / -1; font-size: 12px; color: var(--li-ui-muted, var(--muted-foreground, GrayText)); padding: 0 4px 2px; }
.li-style-menu-item { padding: 5px 7px; font-size: 12px; border-radius: 6px; white-space: nowrap; }
.li-style-chip { white-space: nowrap; }

html:root[data-li-style-surface][data-style] { --li-ui-display: "Sansita Swashed", "Songti SC", "Microsoft YaHei", serif; }