/* Shared tokens load after each page's styles so both surfaces use one theme. */
:root {
  color-scheme: light;
  --bg: #f5f5f7;
  --text: #1d1d1f;
  --accent: #0071e3;
  --border: #d2d2d7;
  --surface: #fff;
  --surface-soft: #f6f6f8;
  --surface-muted: rgba(0, 0, 0, 0.04);
  --line: rgba(0, 0, 0, 0.08);
  --text-secondary: #6e6e73;
  --secondary: var(--text-secondary);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141416;
  --surface: #222225;
  --surface-soft: #2b2b2f;
  --surface-muted: rgba(255, 255, 255, 0.07);
  --card-bg: rgba(34, 34, 37, 0.94);
  --card-shadow: 0 2px 24px rgba(0, 0, 0, 0.18);
  --text: #f2f2f7;
  --text-secondary: #b1b1ba;
  --secondary: var(--text-secondary);
  --accent: #70b4ff;
  --border: #51515b;
  --line: rgba(255, 255, 255, 0.14);
  --success-bg: #183222;
  --error: #ff8278;
}

html, body { background-color: var(--bg); color: var(--text); }
.theme-control, .lang-switch { position: relative; display: inline-flex; align-items: center; gap: 2px; padding: 1px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); isolation: isolate; }
.theme-control::before, .lang-switch::before { content: ''; position: absolute; top: 1px; left: 1px; width: 32px; height: 28px; border-radius: 6px; background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 0 0 1px var(--line); transform: translateX(calc(var(--segment-index, 0) * 34px)); pointer-events: none; z-index: -1; }
.theme-control[data-slider-ready="true"]::before, .lang-switch[data-slider-ready="true"]::before { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
/* Dark mode raises the selected segment like the other tab sliders instead of recessing it. */
:root[data-theme="dark"] .theme-control::before,
:root[data-theme="dark"] .lang-switch::before { background: #3c3c43; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 0 0 1px var(--line); }
:root[data-theme-preference="light"] .theme-control { --segment-index: 1; }
:root[data-theme-preference="dark"] .theme-control { --segment-index: 2; }
:root[lang^="en"] .lang-switch { --segment-index: 1; }
:root[lang^="ja"] .lang-switch { --segment-index: 2; }
.theme-btn, .lang-switch .lang-btn { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 28px; padding: 0; border: 0; border-radius: 6px; font: inherit; font-size: 12px; font-weight: 500; line-height: 1; color: var(--text-secondary); background: transparent; cursor: pointer; transition: color 0.15s ease; }
.theme-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.theme-btn:hover, .lang-switch .lang-btn:hover { color: var(--text); background: var(--surface-muted); }
.theme-btn[aria-pressed="true"], .lang-switch .lang-btn.active { color: var(--accent); background: transparent; box-shadow: none; }
.header > .theme-control { position: absolute; top: 0; left: 0; }
.header > .lang-switch { position: absolute; top: 0; right: 0; }
.expired-page .lang-switch { position: absolute; top: 16px; right: 16px; }
.theme-btn:focus-visible, .lang-switch .lang-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .history-card,
:root[data-theme="dark"] .stats-bar,
:root[data-theme="dark"] .limits-item,
:root[data-theme="dark"] .skill-guide,
:root[data-theme="dark"] .api-guide,
:root[data-theme="dark"] .curl-section,
:root[data-theme="dark"] .quota-notice,
:root[data-theme="dark"] .long-expiry-panel,
:root[data-theme="dark"] .result-dialog,
:root[data-theme="dark"] .upload-details-dialog { background: var(--surface); border-color: var(--line); }
:root[data-theme="dark"] .code-textarea,
:root[data-theme="dark"] .result-url,
:root[data-theme="dark"] .history-controls select,
:root[data-theme="dark"] .refresh-control select { background: var(--surface-soft); color: var(--text); border-color: var(--border); }
:root[data-theme="dark"] .code-textarea::placeholder { color: #a3a3ad; }
:root[data-theme="dark"] .api-guide-body,
:root[data-theme="dark"] .curl-code,
:root[data-theme="dark"] .curl-step-desc { color: var(--text); }
:root[data-theme="dark"] .curl-code { background: var(--surface-soft); border-color: var(--line); }
:root[data-theme="dark"] .mode-tabs,
:root[data-theme="dark"] .option-tabs,
:root[data-theme="dark"] .curl-tabs,
:root[data-theme="dark"] .long-expiry summary,
:root[data-theme="dark"] .file-remove,
:root[data-theme="dark"] .upload-details-close,
:root[data-theme="dark"] .history-count,
:root[data-theme="dark"] .history-item,
:root[data-theme="dark"] .meter,
:root[data-theme="dark"] .progress-bar-wrap,
:root[data-theme="dark"] .api-guide-copy,
:root[data-theme="dark"] .skill-guide-copy,
:root[data-theme="dark"] .curl-copy { background: var(--surface-muted); }
:root[data-theme="dark"] .tab-slider,
:root[data-theme="dark"] .curl-tab.active { background: #3c3c43; }
:root[data-theme="dark"] .long-expiry-panel .option-tab.active,
:root[data-theme="dark"] .quota-selected,
:root[data-theme="dark"] .file-info,
:root[data-theme="dark"] .history-qr-btn,
:root[data-theme="dark"] .icon { background: rgba(112, 180, 255, 0.12); }
:root[data-theme="dark"] .header-actions a,
:root[data-theme="dark"] .header-actions button { background: var(--surface); border-color: var(--line); color: var(--accent); }
:root[data-theme="dark"] .header-actions a:hover,
:root[data-theme="dark"] .header-actions button:hover,
:root[data-theme="dark"] .long-expiry summary:hover { background: #323238; }
:root[data-theme="dark"] .drop-zone-icon { background: linear-gradient(135deg, #203d5a, #2b4e76); }
:root[data-theme="dark"] .drop-zone:hover,
:root[data-theme="dark"] .drop-zone.drag-over,
:root[data-theme="dark"] .history-item:hover,
:root[data-theme="dark"] .skill-guide-cases { background: rgba(112, 180, 255, 0.07); }
:root[data-theme="dark"] .limits-table th,
:root[data-theme="dark"] .limits-table td,
:root[data-theme="dark"] .limits-card-header,
:root[data-theme="dark"] .limits-footnote,
:root[data-theme="dark"] .stats-bar .stat-item,
:root[data-theme="dark"] .curl-syntax-table td { border-color: var(--line); }
:root[data-theme="dark"] .limits-table thead { background: var(--surface-soft); }
:root[data-theme="dark"] .quota-notice.limited,
:root[data-theme="dark"] .archive-hint { background: rgba(255, 188, 90, 0.08); }
:root[data-theme="dark"] .archive-hint,
:root[data-theme="dark"] .quota-notice.limited .quota-selected,
:root[data-theme="dark"] .history-state[data-state="error"],
:root[data-theme="dark"] .noscript { color: #ffc37a; }
:root[data-theme="dark"] .error-msg { color: var(--error); background: #3a2324; border-color: #76413f; }
:root[data-theme="dark"] .curl-response { color: #a7e4b6; background: #1b3324; border-color: #386645; }
:root[data-theme="dark"] .stat-divider { background: var(--line); }
:root[data-theme="dark"] .chart-grid { stroke: #41414a; }
:root[data-theme="dark"] .chart-axis { fill: var(--text-secondary); }
:root[data-theme="dark"] .chart-cursor { stroke: #a2a2ae; }
:root[data-theme="dark"] .result-dialog::backdrop,
:root[data-theme="dark"] .upload-details-dialog::backdrop { background: rgba(0, 0, 0, 0.65); }
:root[data-theme="dark"] .browse-btn,
:root[data-theme="dark"] .deploy-btn,
:root[data-theme="dark"] .copy-btn,
:root[data-theme="dark"] .skill-guide-download { background: #1269c5; color: #fff; }
/* QR assets keep their encoded white quiet zone in either theme. */
.share-qr img { background: #fff; border-radius: 4px; }
.expired-page p, .expired-page .code, .expired-page .lang-btn,
.expired-page .footer, .expired-page .footer a { color: var(--text-secondary); }
.expired-page .lang-btn.active, .expired-page .footer a:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; }
}