/* Chemliora theme (design branch, phase 1: the drawing screen).
   Loaded after style.css and site.css. It redefines the colour tokens that style.css reads and restyles the
   header, menus, tool panels, status bar and the modal shell. Brand colours come from the logo (navy blue, warm orange).
   Light is the default; dark follows the system setting and can be switched by hand (html[data-theme], js/theme-preference.js).
   The drawing canvas stays light in both themes so that figures look the same on screen and in exports. */

:root {
  color-scheme: light;
  --bg-main: #f3f5f9;
  --bg-panel: #ffffff;
  --bg-panel-hover: #f1f4fa;
  --bg-canvas: #ffffff;
  --bg-subtle: #f6f8fc;
  --bg-primary: #ffffff;
  --border-color: #dfe4ec;
  --border-color-active: rgba(47, 74, 160, 0.5);
  --text-primary: #17203a;
  --text-secondary: #4b5870;
  --text-dark: #17203a;
  --text-muted: #66728b;
  --color-accent: #2f4aa0;
  --color-accent-hover: #263d85;
  --accent-color: #2f4aa0;
  --primary-color: #2f4aa0;
  --accent-fill: #2f4aa0;
  --accent-fill-hover: #263d85;
  --on-accent: #ffffff;
  --accent-soft: #e8edfa;
  --accent-soft-strong: #d7e0f6;
  --accent-ink: #182456;
  --warm: #f59e0b;
  --warm-soft: #fff4dc;
  --hover-wash: #eef1f7;
  --canvas-accent: #2f4aa0;
  --el-o: #dc2626; --el-n: #2563eb; --el-s: #d97706; --el-p: #9333ea; --el-hal: #059669; --el-br: #ea580c; --el-i: #7c3aed;
  --notice-bg: #eef2fb;
  --notice-text: #31405f;
  --canvas-dot: #d6dce8;
  --color-danger: #dc2626;
  --color-success: #0f9f6e;
  --shadow-lg: 0 1px 2px rgba(23, 32, 58, 0.06), 0 10px 28px rgba(23, 32, 58, 0.10);
  --shadow-menu: 0 2px 4px rgba(23, 32, 58, 0.06), 0 14px 36px rgba(23, 32, 58, 0.16);
  --radius-md: 9px;
  --radius-lg: 14px;
  --font-sans: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-main: #0d1424;
    --bg-panel: #161f33;
    --bg-panel-hover: #1d2840;
    --bg-subtle: #121a2c;
    --bg-primary: #161f33;
    --bg-canvas: #ffffff;
    --border-color: #2a3856;
    --border-color-active: rgba(143, 168, 255, 0.55);
    --text-primary: #e7ecf8;
    --text-secondary: #b7c2da;
    --text-dark: #e7ecf8;
    --text-muted: #8f9db9;
    --color-accent: #9bb2ff;
    --color-accent-hover: #b8c8ff;
    --accent-color: #9bb2ff;
    --primary-color: #9bb2ff;
    --accent-fill: #4a68d8;
    --accent-fill-hover: #5b79e8;
    --accent-soft: #1f2d52;
    --accent-soft-strong: #2a3d6e;
    --accent-ink: #dbe4ff;
    --warm: #fbbf24;
    --warm-soft: #3a2f12;
    --hover-wash: #1d2840;
    --canvas-accent: #8fa8ff;
    --el-o: #f87171; --el-n: #60a5fa; --el-s: #fbbf24; --el-p: #c084fc; --el-hal: #34d399; --el-br: #fb923c; --el-i: #a78bfa;
    --notice-bg: #111a2e;
    --notice-text: #b7c2da;
    --canvas-dot: #26324d;
    --color-danger: #f87171;
    --color-success: #34d399;
    --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px rgba(0, 0, 0, 0.4);
    --shadow-menu: 0 2px 4px rgba(0, 0, 0, 0.35), 0 14px 36px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas-accent: #8fa8ff;
  --el-o: #f87171; --el-n: #60a5fa; --el-s: #fbbf24; --el-p: #c084fc; --el-hal: #34d399; --el-br: #fb923c; --el-i: #a78bfa;
  --bg-main: #0d1424;
  --bg-panel: #161f33;
  --bg-panel-hover: #1d2840;
  --bg-subtle: #121a2c;
  --bg-primary: #161f33;
  --bg-canvas: #ffffff;
  --border-color: #2a3856;
  --border-color-active: rgba(143, 168, 255, 0.55);
  --text-primary: #e7ecf8;
  --text-secondary: #b7c2da;
  --text-dark: #e7ecf8;
  --text-muted: #8f9db9;
  --color-accent: #9bb2ff;
  --color-accent-hover: #b8c8ff;
  --accent-color: #9bb2ff;
  --primary-color: #9bb2ff;
  --accent-fill: #4a68d8;
  --accent-fill-hover: #5b79e8;
  --accent-soft: #1f2d52;
  --accent-soft-strong: #2a3d6e;
  --accent-ink: #dbe4ff;
  --warm: #fbbf24;
  --warm-soft: #3a2f12;
  --hover-wash: #1d2840;
  --notice-bg: #111a2e;
  --notice-text: #b7c2da;
  --canvas-dot: #26324d;
  --color-danger: #f87171;
  --color-success: #34d399;
  --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px rgba(0, 0, 0, 0.4);
  --shadow-menu: 0 2px 4px rgba(0, 0, 0, 0.35), 0 14px 36px rgba(0, 0, 0, 0.5);
}

body { font-family: var(--font-sans); }

/* ---- Header ---------------------------------------------------------------------------------------------- */
header {
  min-height: 58px;
  background: var(--bg-panel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 1px 0 rgba(23, 32, 58, 0.03);
  padding: 0 20px;
}
/* Logos: every logo has a light and a dark version (class logo-light / logo-dark); the dark one is shown in the dark theme (images/*-dark.*).
   !important is needed because site.css gives the images a display of its own. */
.logo-dark { display: none !important; }
:root[data-theme="dark"] .logo-light { display: none !important; }
:root[data-theme="dark"] .logo-dark { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none !important; }
  :root:not([data-theme="light"]) .logo-dark { display: block !important; }
}
@media (min-width: 701px) { .chemliora-brand img { width: 176px; } }
.actions-area { gap: 4px; justify-content: flex-start; }
.action-divider { height: 22px; margin: 0 6px; background: var(--border-color); }

.btn {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  font-weight: 500;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { background: var(--hover-wash); border-color: var(--border-color-active); }
.btn:active { transform: translateY(0.5px); }
.btn-primary {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--on-accent);
  box-shadow: 0 1px 2px rgba(23, 32, 58, 0.18);
}
.btn-primary:hover { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); color: var(--on-accent); }

header .actions-area > .btn,
header .action-menu > summary.btn {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
  font-weight: 600;
  padding: 8px 12px;
}
header .actions-area > .btn:hover,
header .action-menu > summary.btn:hover { background: var(--hover-wash); color: var(--text-primary); border-color: transparent; }
header .action-menu[open] > summary.btn {
  background: var(--accent-soft-strong);
  border-color: transparent;
  color: var(--color-accent);
  box-shadow: none;
}
header .actions-area > .btn-primary,
header .action-menu > summary.btn-primary {
  background: var(--accent-fill);
  color: var(--on-accent);
  border-color: var(--accent-fill);
  padding: 8px 16px;
}
header .actions-area > .btn-primary:hover,
header .action-menu > summary.btn-primary:hover { background: var(--accent-fill-hover); color: var(--on-accent); }
header .action-menu[open] > summary.btn-primary { background: var(--accent-fill-hover); color: var(--on-accent); }
header .header-history-btn { color: var(--text-secondary); }
header .header-theme-btn { margin-left: 4px; min-width: 36px; padding: 8px; font-size: 1rem; }

.action-menu-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-menu);
  padding: 6px;
  gap: 2px;
}
.action-menu-panel .btn { color: var(--text-primary); border-radius: 8px; padding: 9px 12px; font-weight: 500; }
.action-menu-panel .btn:hover,
.action-menu-panel .btn:focus-visible { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
.action-menu-panel .btn.active { background: var(--accent-soft); color: var(--color-accent); border-color: transparent; }
.action-menu-panel .menu-setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px 6px 12px; border-radius: 8px; color: var(--text-primary); font-weight: 500; font-size: 0.9rem; }
.action-menu-panel .menu-setting select { min-height: 34px; padding: 4px 8px; border: 1px solid var(--border-color); border-radius: 7px; background: var(--bg-panel); color: var(--text-primary); font: inherit; font-weight: 400; }
.action-menu-panel .menu-setting select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.action-menu-panel .btn-danger { color: var(--color-danger); }
.action-menu-panel .btn-danger:hover { background: rgba(220, 38, 38, 0.1); color: var(--color-danger); }
.menu-separator { margin: 4px 6px; background: var(--border-color); }
.shortcut-hint { color: var(--text-muted); }

/* ---- Notice strip ---------------------------------------------------------------------------------------- */
.site-notice {
  background: var(--notice-bg);
  color: var(--notice-text);
  font-size: 13px;
  padding: 5px 16px;
  border-bottom: 1px solid var(--border-color);
}
.site-notice a { color: var(--color-accent); text-decoration-color: color-mix(in srgb, var(--color-accent) 45%, transparent); text-underline-offset: 2px; }

/* ---- Canvas ---------------------------------------------------------------------------------------------- */
.canvas-wrapper {
  background-color: var(--bg-canvas);
  background-image: radial-gradient(var(--canvas-dot) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ---- Floating panels ------------------------------------------------------------------------------------ */
.floating-toolbar,
.floating-sidebar,
.viewport-controls,
.layout-controls,
.property-panel {
  background: var(--bg-panel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
}
.layout-controls { border-radius: 14px; gap: 10px; padding: 7px 10px; }
.layout-controls button,
.layout-controls select,
.layout-controls input { background: var(--bg-panel); color: var(--text-primary); border-color: var(--border-color); }
.layout-controls button:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--accent-soft); }
.layout-control-primary { background: var(--accent-fill) !important; color: var(--on-accent) !important; border-color: var(--accent-fill) !important; }
.layout-control-primary:hover { background: var(--accent-fill-hover) !important; }
.layout-control-help { color: var(--text-muted); }

.tool-btn { border-radius: 10px; color: var(--text-secondary); transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
.tool-btn:hover { background: var(--hover-wash); color: var(--text-primary); }
.tool-btn.active {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--border-color-active);
}
.tool-category > summary { color: var(--text-muted); letter-spacing: 0.06em; border-radius: 8px; }
.tool-category > summary:hover,
.tool-category > summary:focus-visible { background: var(--hover-wash); color: var(--color-accent); }
.tool-category + .tool-category { border-top-color: var(--border-color); }
.tool-group-label { color: var(--text-muted); letter-spacing: 0.04em; }
.sidebar-title { color: var(--text-muted); border-bottom-color: var(--border-color); }
.sidebar-section { border-top-color: var(--border-color); }
.sidebar-section > summary { color: var(--text-secondary); }
.sidebar-section[open] > summary { color: var(--text-primary); }

.element-btn {
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 9px;
  font-weight: 700;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.element-btn:hover { background: var(--hover-wash); border-color: var(--border-color-active); }
.element-btn[data-element="O"] { color: var(--el-o); }
.element-btn[data-element="N"] { color: var(--el-n); }
.element-btn[data-element="S"] { color: var(--el-s); }
.element-btn[data-element="P"] { color: var(--el-p); }
.element-btn[data-element="F"],
.element-btn[data-element="Cl"] { color: var(--el-hal); }
.element-btn[data-element="Br"] { color: var(--el-br); }
.element-btn[data-element="I"] { color: var(--el-i); }
.element-btn.active,
.element-btn[data-element].active {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--on-accent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-fill) 40%, transparent);
}
.abbreviation-btn { background: var(--bg-subtle); border-color: var(--border-color); color: var(--text-primary); }
.abbreviation-btn:hover { background: var(--hover-wash); border-color: var(--border-color-active); }
.abbreviation-btn.active { background: var(--accent-soft); color: var(--color-accent); border-color: var(--border-color-active); }
.custom-element-area { border-top-color: var(--border-color); }

.viewport-btn { color: var(--text-secondary); }
.viewport-btn:hover { background: var(--accent-soft); color: var(--color-accent); }
.zoom-level { color: var(--text-secondary); }

.property-panel { background: var(--bg-panel); }
.property-field input,
.property-field select { background: var(--bg-panel); color: var(--text-primary); border-color: var(--border-color); }

.tool-btn[data-tooltip]::after { background: #1b2540; color: #eef2fb; border-radius: 6px; }

/* ---- Status bar ------------------------------------------------------------------------------------------ */
.status-bar {
  height: 30px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
}
.status-message { border-left-width: 2px; border-radius: 6px; }
.status-message[data-tone="info"] { background: var(--accent-soft); color: var(--accent-ink); border-left-color: var(--color-accent); }
.save-status { color: var(--color-success); }
.save-status.is-unsaved { color: #b45309; }
:root[data-theme="dark"] .save-status.is-unsaved { color: #fbbf24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .save-status.is-unsaved { color: #fbbf24; } }

/* ---- Modal shell ---------------------------------------------------------------------------------------- */
.modal-overlay { background: rgba(13, 20, 36, 0.55); backdrop-filter: blur(4px); }
.modal-container {
  background: var(--bg-panel);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-menu);
}
.modal-header { color: var(--text-primary); font-weight: 600; }
.modal-close:hover { color: var(--text-primary); }

/* ---- Small screens ---------------------------------------------------------------------------------------- */
@media (max-width: 700px) {
  header { padding: 4px 8px; }
  header .actions-area > .btn,
  header .action-menu > summary.btn { padding: 7px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .tool-btn, .element-btn { transition: none; }
}

/* ---- Focus, scrollbars ------------------------------------------------------------------------------------ */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
a:focus-visible,
[tabindex]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.draw-canvas:focus-visible { outline: 2px solid var(--canvas-accent); outline-offset: -2px; }
.floating-toolbar, .floating-sidebar { scrollbar-color: var(--border-color) transparent; }
.floating-toolbar::-webkit-scrollbar-thumb, .floating-sidebar::-webkit-scrollbar-thumb { background: var(--border-color); }

/* ---- Drawing overlays keep a colour that reads on the light canvas in both themes ---------------------- */
.temp-bond { stroke: var(--canvas-accent); }
.temp-snap-halo { stroke: var(--canvas-accent); }
.temp-snap-dot, .temp-guide-dot { fill: var(--canvas-accent); }
.selection-box { stroke: var(--canvas-accent); fill: rgba(47, 74, 160, 0.06); }

/* ---- Dark theme: the workspace is dark, the documents stay on paper ---------------------------------------
   The drawing canvas and every dialog (prediction screens, templates, information) keep the light tokens, so that
   spectra, tables and figures look the same as in print and exports. The tokens are put back inside .modal-overlay. */
:root[data-theme="dark"] .modal-overlay {
  color-scheme: light;
  --bg-panel: #ffffff; --bg-panel-hover: #f1f4fa; --bg-subtle: #f6f8fc; --bg-primary: #ffffff; --border-color: #dfe4ec; --border-color-active: rgba(47, 74, 160, 0.5);
  --text-primary: #17203a; --text-secondary: #4b5870; --text-dark: #17203a; --text-muted: #66728b;
  --color-accent: #2f4aa0; --color-accent-hover: #263d85; --accent-color: #2f4aa0; --primary-color: #2f4aa0; --accent-fill: #2f4aa0; --accent-fill-hover: #263d85;
  --accent-soft: #e8edfa; --accent-ink: #182456; --hover-wash: #eef1f7; --color-danger: #dc2626; --color-success: #0f9f6e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .modal-overlay {
    color-scheme: light;
    --bg-panel: #ffffff; --bg-panel-hover: #f1f4fa; --bg-subtle: #f6f8fc; --bg-primary: #ffffff; --border-color: #dfe4ec; --border-color-active: rgba(47, 74, 160, 0.5);
    --text-primary: #17203a; --text-secondary: #4b5870; --text-dark: #17203a; --text-muted: #66728b;
    --color-accent: #2f4aa0; --color-accent-hover: #263d85; --accent-color: #2f4aa0; --primary-color: #2f4aa0; --accent-fill: #2f4aa0; --accent-fill-hover: #263d85;
    --accent-soft: #e8edfa; --accent-ink: #182456; --hover-wash: #eef1f7; --color-danger: #dc2626; --color-success: #0f9f6e;
  }
}
/* status messages: tinted for the dark bar */
:root[data-theme="dark"] .status-message[data-tone="success"] { background: #0f2e27; color: #6ee7b7; }
:root[data-theme="dark"] .status-message[data-tone="warning"] { background: #33260c; color: #fcd34d; }
:root[data-theme="dark"] .status-message[data-tone="error"] { background: #3a1517; color: #fca5a5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .status-message[data-tone="success"] { background: #0f2e27; color: #6ee7b7; }
  :root:not([data-theme="light"]) .status-message[data-tone="warning"] { background: #33260c; color: #fcd34d; }
  :root:not([data-theme="light"]) .status-message[data-tone="error"] { background: #3a1517; color: #fca5a5; }
}

/* ---- Start card on an empty canvas (js/canvas-welcome.js) ---------------------------------------------- */
.canvas-welcome { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 76px 130px 60px; pointer-events: none; }
.canvas-welcome[hidden] { display: none; }
.canvas-welcome-card {
  width: min(430px, 100%);
  padding: 22px 26px 18px;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--bg-panel);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  text-align: center;
}
.canvas-welcome-mark { width: 52px; height: 52px; margin-bottom: 6px; }
.canvas-welcome-card h2 { font-size: 1.12rem; font-weight: 700; letter-spacing: 0.01em; margin-bottom: 6px; color: var(--accent-ink); }
.canvas-welcome-card p { color: var(--text-secondary); font-size: 0.86rem; line-height: 1.65; margin-bottom: 14px; }
.canvas-welcome-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; pointer-events: auto; }
.canvas-welcome-btn {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-subtle);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.canvas-welcome-btn:hover { background: var(--hover-wash); border-color: var(--border-color-active); }
.canvas-welcome-btn.is-primary { grid-column: 1 / -1; background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.canvas-welcome-btn.is-primary:hover { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); }
.canvas-welcome-help { display: inline-block; margin-top: 12px; color: var(--color-accent); font-size: 0.8rem; pointer-events: auto; }
@media (max-width: 900px) { .canvas-welcome { padding: 76px 24px 60px; } }
@media (max-width: 700px), (max-height: 520px) { .canvas-welcome { display: none; } }

/* ---- Start-up screen --------------------------------------------------------------------------------------- */
/* The logo mark is built from its six atoms (they fly in from the sides and fade in one after the other), the bonds are drawn between them, and the bonds then pulse in turn until the
   app is ready; then the screen fades out. Nothing is shown during the first 150 ms (a fast start never flashes the screen). site.css still has the old spinner rules, which are now unused. */
.startup-screen { --st-blue: var(--color-accent); --st-orange: #e08a14; background: var(--bg-main); color: var(--accent-ink); transition: opacity .3s ease; }
:root[data-theme="dark"] .startup-screen { --st-orange: #f5a63a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .startup-screen { --st-orange: #f5a63a; } }
.startup-screen-content { flex-direction: column; gap: 14px; opacity: 0; animation: startup-show .25s ease .15s forwards; transition: transform .3s ease-in; }
.startup-screen.startup-leaving { opacity: 0; pointer-events: none; }
.startup-screen.startup-leaving .startup-screen-content { transform: scale(1.08); }
.startup-mark { display: block; overflow: visible; }
.startup-bond { stroke: var(--st-blue); stroke-width: 3; stroke-linecap: round; fill: none; stroke-dasharray: 1; animation: startup-bond .35s ease-out both, startup-pulse 1.8s ease-in-out infinite; }
.startup-atom { fill: var(--st-blue); transform-box: fill-box; transform-origin: center; animation: startup-fly 1.1s cubic-bezier(.2, .9, .3, 1) var(--sd) both, startup-fade 1s ease-in-out var(--sd) both; }
.startup-orange { fill: var(--st-orange); }
.sa1 { --dx: -26px; --dy: -30px; --sd: 0s; }
.sa2 { --dx: 38px; --dy: -20px; --sd: .12s; }
.sa3 { --dx: 34px; --dy: 30px; --sd: .24s; }
.sa4 { --dx: 10px; --dy: 40px; --sd: .36s; }
.sa5 { --dx: -38px; --dy: 24px; --sd: .48s; }
.sa6 { --dx: -30px; --dy: -26px; --sd: .6s; }
.sb1 { animation-delay: .9s, 2s; }
.sb2 { animation-delay: 1s, 2.2s; }
.sb3 { animation-delay: 1.1s, 2.4s; }
.sb4 { animation-delay: 1.2s, 2.6s; }
.sb5 { animation-delay: 1.3s, 2.8s; }
.sb6 { animation-delay: 1.4s, 3s; }
#startup-message { animation: startup-show .6s ease 1.2s both; }
.startup-failed .startup-bond, .startup-failed .startup-atom, .startup-failed #startup-message { animation: none; stroke-dashoffset: 0; transform: none; opacity: 1; }
@keyframes startup-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes startup-fly { from { transform: translate(var(--dx), var(--dy)) scale(.3); } to { transform: translate(0, 0) scale(1); } }
@keyframes startup-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes startup-bond { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes startup-pulse { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .startup-screen, .startup-screen-content { transition: none; }
  .startup-screen-content, .startup-bond, .startup-atom, #startup-message { animation: none; }
  .startup-screen-content, #startup-message { opacity: 1; }
  .startup-bond { stroke-dashoffset: 0; }
}

/* ---- Information strip under the layout controls ------------------------------------------------------ */
.layout-controls + .formula-hint,
.canvas-hint { color: var(--text-secondary); }

/* ---- Formula and mass bar -------------------------------------------------------------------------------------
   Above 1024 px the bar sat in the same place as the layout controls and was hidden behind them. It now sits below them, and the note under it below that. */
@media (min-width: 701px) {
  .chemical-info-panel { top: 70px; border-radius: 12px; padding: 6px 16px; }
  .chemical-warning { top: 114px; }
}
.chemical-info-panel { background: var(--bg-panel); border-color: var(--border-color); backdrop-filter: none; -webkit-backdrop-filter: none; }
.chemical-info-panel:hover { border-color: var(--border-color-active); box-shadow: var(--shadow-lg); }
.info-value { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.info-value.formula-text { color: var(--color-accent); }
.info-label { text-transform: none; letter-spacing: 0; }
.chemical-warning { background: #fffaf0; border-color: #f3d9a4; color: #7a4a00; box-shadow: 0 2px 8px rgba(23, 32, 58, 0.06); }
.chemical-warning.is-estimate { background: #f1f4fb; border-color: #d3dcf0; color: #31405f; }

/* =====================================================================================================================
   Dialogs and prediction screens (phase 2). They keep the light "paper" look in both themes; only the finish changes:
   a clearer title bar, controls of one height, a card for the chart, soft tables with pills for the kind of value.
   ===================================================================================================================== */
.modal-overlay { background: rgba(18, 28, 56, 0.50); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.modal-container { box-shadow: 0 2px 6px rgba(18, 28, 56, 0.10), 0 24px 60px rgba(18, 28, 56, 0.28); }
.modal-header {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--accent-ink);
}
.modal-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 1.3rem; line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.modal-close:hover { background: var(--hover-wash); color: var(--text-primary); }
.modal-footer { padding-top: 12px; border-top: 1px solid var(--border-color); }
.modal-body { color: var(--text-primary); }

/* controls inside dialogs: one height, one radius */
.modal-container select,
.modal-container input[type="text"],
.modal-container input[type="number"],
.modal-container textarea {
  min-height: 38px;
  border: 1px solid #cdd5e2;
  border-radius: 9px;
  background-color: #fff;
  color: var(--text-primary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.modal-container select:hover,
.modal-container input[type="text"]:hover,
.modal-container input[type="number"]:hover { border-color: #aab6cc; }
.modal-container select:focus,
.modal-container input[type="text"]:focus,
.modal-container input[type="number"]:focus,
.modal-container textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(47, 74, 160, 0.16); outline: none; }
.modal-container .btn { min-height: 38px; justify-content: center; font-size: 0.9rem; }
.modal-container .btn:disabled { opacity: 0.5; }
.ir-controls label, .h1-nmr-controls > span { color: var(--accent-ink); }
.h1-nmr-controls > span { font-weight: 700; }
.h1-nmr-checkbox { color: var(--text-secondary); }

/* window size switch (standard / large / full) */
.spectrum-size-group { border-color: #cdd5e2; border-radius: 10px; background: var(--bg-subtle); padding: 2px; gap: 2px; }
.spectrum-size-button { min-height: 30px; padding: 3px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); font-weight: 600; }
.spectrum-size-button:hover { background: #fff; color: var(--text-primary); }
.spectrum-size-button[aria-pressed="true"] { background: var(--accent-fill); color: var(--on-accent); box-shadow: 0 1px 2px rgba(18, 28, 56, 0.2); }

/* chart cards and chart colours */
.ir-chart-wrap { border-color: #dde3ee; border-radius: 12px; box-shadow: 0 1px 2px rgba(18, 28, 56, 0.05); }
.ir-modal-body > .ir-chart-wrap { box-shadow: 0 6px 12px -8px rgba(18, 28, 56, 0.35); }
.ir-spectrum-path { stroke: #2f4aa0; stroke-width: 2.1; }
.ir-peak-marker { stroke: #2f4aa0; }
.h1-nmr-trace { stroke: #2f4aa0; }
.ir-grid, .h1-nmr-grid { stroke: #edf0f6; }
.ir-axis-label, .ir-axis-title, .h1-nmr-tick, .h1-nmr-axis-title { fill: #44516a; }
.h1-nmr-axis { stroke: #7d8aa3; }
.h1-nmr-marker { stroke: #e08a0b; }

/* notices */
.h1-nmr-summary { padding: 10px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); border-left: 3px solid var(--accent-fill); }
.ir-support { border-radius: 10px; background: #f6f8fc; border: 1px solid #dde3ee; }
.ir-warnings { background: #fffaf0; border: 1px solid #f3d9a4; border-radius: 10px; }
.ir-notes { border-color: #dde3ee; border-radius: 10px; background: #f9fafd; }
.ir-notes > summary { color: var(--color-accent); }
.ir-chart-help { color: var(--text-muted); }
.ei-ms-support { border-radius: 10px; }
.h1-nmr-selection-panel { border-color: #dde3ee; border-radius: 12px; background: #f9fafd; }
.h1-nmr-selection-detail { border-color: #cfdaf2; background: #f1f5fd; }
.h1-nmr-selection-detail strong { color: var(--accent-ink); }

/* tables */
.ir-table-wrap { border-color: #dde3ee; border-radius: 12px; }
.ir-table { font-size: 0.86rem; }
.ir-table th { background: #f1f4fa; color: var(--accent-ink); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.02em; border-bottom: 1px solid #dde3ee; }
.ir-table th, .ir-table td { padding: 9px 12px; border-bottom: 1px solid #ebeff6; }
.ir-table tbody tr:hover, .ir-table tbody tr:focus { background: var(--accent-soft); }
.ir-table tbody tr.selected { background: var(--accent-soft-strong); }
.ir-confidence { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; line-height: 1.6; }
.ir-confidence-high { background: #e2f6ec; color: #11613c; }
.ir-confidence-medium { background: #fff1d6; color: #7a4a00; }
.ir-confidence-low { background: #fde6e6; color: #9b1c1c; }
.properties-kind { white-space: nowrap; font-weight: 700; font-size: 0.82rem; }
td.properties-kind::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: currentColor; vertical-align: 0.05em; }
.properties-kind.is-exact { color: #0f5132; }
.properties-kind.is-estimate { color: #8a5200; }
.properties-kind.is-rule { color: #5b2a86; }

/* information dialog, template library */
.molecular-info-grid > div,
.molecular-info-wide { border-color: #dde3ee; border-radius: 12px; background: #f9fafd; }
.template-tab { border-radius: 999px; }
.template-card { border-color: #dde3ee; border-radius: 12px; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.template-card:hover, .template-card:focus-visible { border-color: var(--color-accent); box-shadow: 0 6px 16px rgba(47, 74, 160, 0.14); transform: translateY(-1px); }
.template-section h3 { color: var(--accent-ink); }
@media (prefers-reduced-motion: reduce) { .template-card, .modal-close { transition: none; } .template-card:hover, .template-card:focus-visible { transform: none; } }

/* =====================================================================================================================
   Dark dialogs (phase 3). The dialog is built in its light tokens above; in the dark theme the painted content is turned with
   invert(.9) + hue-rotate(180deg): the accent blue becomes a light periwinkle, dark text becomes light, white becomes a dark grey.
   The container itself is dark and not filtered (its shadow and border stay as drawn). Images, canvases (3D, orbitals) and frames carry their own
   colours and are turned back with the inverse of that filter (hue-rotate, invert, contrast 1.25).
   ===================================================================================================================== */
:root[data-theme="dark"] .modal-container { background: #161f33; border-color: #2a3856; color-scheme: dark; }
:root[data-theme="dark"] .modal-container > * { filter: invert(0.9) hue-rotate(180deg); }
:root[data-theme="dark"] .modal-container canvas,
:root[data-theme="dark"] .modal-container img,
:root[data-theme="dark"] .modal-container video,
:root[data-theme="dark"] .modal-container iframe,
:root[data-theme="dark"] .modal-container .keep-colors { filter: hue-rotate(180deg) invert(1) contrast(1.25); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .modal-container { background: #161f33; border-color: #2a3856; color-scheme: dark; }
  :root:not([data-theme="light"]) .modal-container > * { filter: invert(0.9) hue-rotate(180deg); }
  :root:not([data-theme="light"]) .modal-container canvas,
  :root:not([data-theme="light"]) .modal-container img,
  :root:not([data-theme="light"]) .modal-container video,
  :root:not([data-theme="light"]) .modal-container iframe,
  :root:not([data-theme="light"]) .modal-container .keep-colors { filter: hue-rotate(180deg) invert(1) contrast(1.25); }
}

/* =====================================================================================================================
   Icons and tool names (phase 4)
   ===================================================================================================================== */
.ui-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: 0 0 auto; line-height: 0; }
.ui-icon-svg { display: block; }
.action-menu-panel .btn .ui-icon { color: var(--text-muted); transition: color 0.15s ease; }
.action-menu-panel .btn:hover .ui-icon,
.action-menu-panel .btn:focus-visible .ui-icon { color: var(--color-accent); }
.action-menu-panel .btn:disabled .ui-icon { opacity: 0.5; }
.layout-controls button .ui-icon { width: 16px; height: 16px; margin-right: 5px; vertical-align: -3px; }
.layout-controls button .ui-icon-svg { width: 16px; height: 16px; }
.layout-controls button:has(> .ui-icon) { display: inline-flex; align-items: center; }
header .header-history-btn .ui-icon,
header .header-theme-btn .ui-icon { width: 18px; height: 18px; }
.viewport-btn .ui-icon-svg { width: 16px; height: 16px; }

.toolbar-labels-toggle {
  grid-column: 1 / -1;
  min-height: 28px;
  padding: 3px 8px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.toolbar-labels-toggle:hover { background: var(--hover-wash); color: var(--text-primary); border-color: var(--border-color-active); }
.toolbar-labels-toggle[aria-pressed="true"] { background: var(--accent-soft); color: var(--color-accent); border-color: var(--border-color-active); }
.tool-btn-label-auto { display: none; }
.floating-toolbar.show-labels { grid-template-columns: 1fr; width: 188px; }
.floating-toolbar.show-labels .tool-category-content { grid-template-columns: 1fr; gap: 4px; }
.floating-toolbar.show-labels .tool-btn:not(.tool-btn-labeled) { width: 100%; height: 38px; justify-content: flex-start; gap: 10px; padding: 0 10px; }
.floating-toolbar.show-labels .tool-btn-label-auto { display: inline; font-size: 0.78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.floating-toolbar.show-labels .tool-btn.active .tool-btn-label-auto { color: var(--color-accent); }
@media (max-width: 700px) { .toolbar-labels-toggle { display: none; } .floating-toolbar.show-labels { width: auto; } }

.menu-chevron, .tool-category-chevron { display: inline-flex; align-items: center; line-height: 0; }
.menu-chevron .ui-icon, .tool-category-chevron .ui-icon { width: 14px; height: 14px; }
.menu-chevron .ui-icon-svg, .tool-category-chevron .ui-icon-svg { width: 14px; height: 14px; }
.floating-toolbar.show-labels { width: 204px; }
.floating-toolbar.show-labels .tool-btn-labeled { justify-content: flex-start; padding: 0 10px; gap: 10px; }
.floating-toolbar.show-labels .tool-btn-labeled .tool-btn-label { font-size: 0.78rem; }

/* =====================================================================================================================
   Narrow screens (phase 5)
   ===================================================================================================================== */
.layout-history { display: none; }
.layout-history-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--border-color); border-radius: 10px;
  background: var(--bg-panel); color: var(--text-secondary); cursor: pointer;
}
.layout-history-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.layout-history-btn .ui-icon-svg { width: 18px; height: 18px; }
@media (max-width: 700px) {
  /* undo and redo, which the header hides on a phone, sit at the end of the layout bar */
  .layout-history { display: inline-flex; gap: 6px; margin-left: auto; padding-left: 6px; }
  /* formula and masses: three short columns instead of one line that is cut off */
  .chemical-info-panel { gap: 12px; padding: 6px 10px; justify-content: flex-start; align-items: center; width: calc(100% - 16px); max-width: none; overflow-x: hidden; }
  .chemical-info-panel .info-divider { display: none; }
  .chemical-info-panel .info-item { flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; flex: 0 1 auto; }
  .chemical-info-panel .info-copy-btn { margin-left: auto; }
  .chemical-info-panel .info-label { font-size: 0.68rem; }
  .chemical-info-panel .info-value { font-size: 0.82rem; }
  .chemical-info-panel .info-value.formula-text { font-size: 0.9rem; }
  .chemical-info-panel .info-copy-btn { flex: 0 0 auto; align-self: center; }
  /* the note under it: one line */
  #chem-warning-text { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chemical-warning { align-items: center; }
  /* touch targets */
  .viewport-btn { width: 36px; height: 36px; }
  .tool-btn, .element-btn { min-width: 44px; min-height: 44px; }
  .modal-close { width: 40px; height: 40px; }
  .site-notice { font-size: 12px; }
}
@media (max-width: 700px) {
  /* the elements pill sat on top of the zoom and fit buttons; the zoom bar goes above it, and the pill follows the theme */
  .viewport-controls { bottom: 126px; }
  .mobile-elements-toggle { background: var(--bg-panel); color: var(--text-primary); border-color: var(--border-color-active); }
}
@media (max-width: 700px) {
  .chemical-warning { top: 122px; }
  header .actions-area > .btn,
  header .action-menu > summary.btn { padding: 7px 5px; }
  header > .actions-area { gap: 1px; }
}
:root[data-theme="dark"] .chemical-warning { background: #1a2440; border-color: #2a3856; color: #c3cde4; box-shadow: none; }
:root[data-theme="dark"] .chemical-warning.is-estimate { background: #18233f; border-color: #2a3856; color: #b7c2da; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chemical-warning { background: #1a2440; border-color: #2a3856; color: #c3cde4; box-shadow: none; }
  :root:not([data-theme="light"]) .chemical-warning.is-estimate { background: #18233f; border-color: #2a3856; color: #b7c2da; }
}

/* Keep the shared site wordmark legible on the dark header. */
:root[data-theme="dark"] .site-home-link { background: #fff; border-radius: 10px; padding: 6px 10px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-home-link { background: #fff; border-radius: 10px; padding: 6px 10px; } }
/* =====================================================================================================================
   Dark drawing canvas (phase 6). In the dark theme the structure is drawn on a dark canvas: bonds and labels light, the element colours lifted.
   An export (SVG, PNG) must keep the print colours, so image-export-standalone.js sets data-exporting on the root while it copies the computed styles;
   every rule below stands aside then, and the transitions are switched off so that the computed values are the final ones.
   !important is needed for the drawing variables because app.js sets them on the root element as an inline style.
   ===================================================================================================================== */
:root[data-exporting] *, :root[data-exporting] *::before, :root[data-exporting] *::after { transition: none !important; }
:root[data-theme="dark"]:not([data-exporting]) {
  --bg-canvas: #0f1729;
  --drawing-bond-color: #e6ecf7 !important;
  --drawing-label-color: #e6ecf7 !important;
  --drawing-label-h: #c3cde4 !important;
  --drawing-label-o: #ff7b7b !important;
  --drawing-label-n: #6aa6ff !important;
  --drawing-label-s: #ffb454 !important;
  --drawing-label-p: #c792ff !important;
  --drawing-label-halogen: #4fd6a0 !important;
  --drawing-label-br: #ff9a5c !important;
  --drawing-label-i: #b79bff !important;
  --canvas-ink: #e6ecf7;
}
:root[data-theme="dark"]:not([data-exporting]) .draw-canvas { background-image: radial-gradient(rgba(160, 180, 220, 0.14) 1px, transparent 1px); }
:root[data-theme="dark"]:not([data-exporting]) :is(.polymer-bracket-line, .reaction-arrow-line) { stroke: var(--canvas-ink); }
:root[data-theme="dark"]:not([data-exporting]) :is(.polymer-label, .atom-radical-dot, .atom-isotope-text, .reaction-plus-text, .reaction-condition-text) { fill: var(--canvas-ink); }
:root[data-theme="dark"]:not([data-exporting]) .bond-geometry-label { fill: #a9b8ff; stroke: #0f1729; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-exporting]) {
    --bg-canvas: #0f1729;
    --drawing-bond-color: #e6ecf7 !important;
    --drawing-label-color: #e6ecf7 !important;
    --drawing-label-h: #c3cde4 !important;
    --drawing-label-o: #ff7b7b !important;
    --drawing-label-n: #6aa6ff !important;
    --drawing-label-s: #ffb454 !important;
    --drawing-label-p: #c792ff !important;
    --drawing-label-halogen: #4fd6a0 !important;
    --drawing-label-br: #ff9a5c !important;
    --drawing-label-i: #b79bff !important;
    --canvas-ink: #e6ecf7;
  }
  :root:not([data-theme="light"]):not([data-exporting]) .draw-canvas { background-image: radial-gradient(rgba(160, 180, 220, 0.14) 1px, transparent 1px); }
  :root:not([data-theme="light"]):not([data-exporting]) :is(.polymer-bracket-line, .reaction-arrow-line) { stroke: var(--canvas-ink); }
  :root:not([data-theme="light"]):not([data-exporting]) :is(.polymer-label, .atom-radical-dot, .atom-isotope-text, .reaction-plus-text, .reaction-condition-text) { fill: var(--canvas-ink); }
  :root:not([data-theme="light"]):not([data-exporting]) .bond-geometry-label { fill: #a9b8ff; stroke: #0f1729; }
}

/* =====================================================================================================================
   History column (js/structure-history-panel.js): the structures drawn in this browser, newest first.
   Wide screens: a column at the left of the drawing area, the tool palette moves right by its width.
   Narrower than 1101 px: a drawer over the drawing area, opened with the 履歴 button in the header.
   ===================================================================================================================== */
.history-panel {
  --history-width: 276px;
  flex: 0 0 var(--history-width);
  width: var(--history-width);
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border-right: 1px solid var(--border-color);
  color: var(--text-primary);
  z-index: 9;
}
.history-panel[hidden] { display: none; }
.canvas-wrapper { min-width: 0; }
.history-panel:not([hidden]) ~ .floating-toolbar { left: calc(var(--history-width, 276px) + 20px); }
.history-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 6px 16px; font-size: 0.95rem; }
.history-head strong { letter-spacing: 0.02em; }
.history-search-row { position: relative; margin: 4px 12px 8px; color: var(--text-muted); }
.history-search-row .ui-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; display: inline-flex; }
.history-search {
  width: 100%;
  padding: 8px 10px 8px 32px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-subtle);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.84rem;
}
.history-search:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; background: var(--bg-panel); }
.history-list { flex: 1; overflow-y: auto; padding: 0 8px 8px; }
.history-group { padding: 12px 8px 4px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: var(--text-muted); }
.history-item { position: relative; display: flex; align-items: stretch; border-radius: 12px; }
.history-item:hover, .history-item:focus-within { background: var(--hover-wash); }
.history-item.is-current { background: var(--accent-soft); }
.history-open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.history-open:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.history-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-canvas);
  color: #1e1e2e;
  overflow: hidden;
}
.history-thumb svg { width: 100%; height: 100%; }
.history-thumb .h-o { fill: #dc2626; } .history-thumb .h-n { fill: #2563eb; } .history-thumb .h-s { fill: #d97706; } .history-thumb .h-p { fill: #9333ea; }
.history-thumb .h-x { fill: #059669; } .history-thumb .h-br { fill: #ea580c; } .history-thumb .h-i { fill: #7c3aed; }
:root[data-theme="dark"] .history-thumb { background: #0f1729; color: #e6ecf7; }
:root[data-theme="dark"] .history-thumb .h-o { fill: #ff7b7b; } :root[data-theme="dark"] .history-thumb .h-n { fill: #6aa6ff; } :root[data-theme="dark"] .history-thumb .h-s { fill: #ffb454; }
:root[data-theme="dark"] .history-thumb .h-p { fill: #c792ff; } :root[data-theme="dark"] .history-thumb .h-x { fill: #4fd6a0; } :root[data-theme="dark"] .history-thumb .h-br { fill: #ff9a5c; } :root[data-theme="dark"] .history-thumb .h-i { fill: #b79bff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .history-thumb { background: #0f1729; color: #e6ecf7; }
  :root:not([data-theme="light"]) .history-thumb .h-o { fill: #ff7b7b; } :root:not([data-theme="light"]) .history-thumb .h-n { fill: #6aa6ff; } :root:not([data-theme="light"]) .history-thumb .h-s { fill: #ffb454; }
  :root:not([data-theme="light"]) .history-thumb .h-p { fill: #c792ff; } :root:not([data-theme="light"]) .history-thumb .h-x { fill: #4fd6a0; } :root:not([data-theme="light"]) .history-thumb .h-br { fill: #ff9a5c; } :root:not([data-theme="light"]) .history-thumb .h-i { fill: #b79bff; }
}
.history-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.history-title { font-size: 0.86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-time { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }
.history-rename { width: 100%; padding: 3px 6px; border: 1px solid var(--border-color-active); border-radius: 6px; background: var(--bg-panel); color: var(--text-primary); font: inherit; font-size: 0.84rem; }
.history-actions { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: none; gap: 2px; padding: 2px; border-radius: 8px; background: var(--hover-wash); }
.history-item.is-current .history-actions { background: var(--accent-soft-strong); }
.history-item:hover .history-actions, .history-item:focus-within .history-actions { display: flex; }
.history-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--text-secondary); cursor: pointer; }
.history-icon-btn:hover { background: var(--bg-panel); color: var(--text-primary); }
.history-icon-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.history-pin.is-on { color: var(--warm); }
.history-pin.is-on .ui-icon-svg { fill: currentColor; }
.history-remove.is-armed { background: var(--color-danger); color: #fff; }
.history-empty { margin: 18px 12px; font-size: 0.82rem; line-height: 1.7; color: var(--text-muted); }
.history-notice { margin: 0; padding: 8px 16px 6px; border-top: 1px solid var(--border-color); font-size: 0.72rem; line-height: 1.6; color: var(--text-muted); }
.history-foot { display: flex; gap: 4px; padding: 4px 10px 12px; }
.history-foot-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 7px 4px; border: 1px solid var(--border-color); border-radius: 9px; background: var(--bg-subtle); color: var(--text-secondary); font: inherit; font-size: 0.74rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.history-foot-btn:hover { background: var(--hover-wash); color: var(--text-primary); }
.history-foot-danger:hover, .history-foot-danger[data-armed="1"] { color: var(--color-danger); border-color: var(--color-danger); }
header .header-history-toggle[aria-pressed="true"] { background: var(--accent-soft-strong); color: var(--color-accent); }
header .header-history-toggle .ui-icon { margin-right: 6px; }
@media (max-width: 1100px) {
  .history-panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(320px, 88vw); flex: none; z-index: 30; box-shadow: var(--shadow-lg); }
  .history-panel:not([hidden]) ~ .floating-toolbar { left: 20px; }
  .history-actions { display: flex; }
}
@media (max-width: 700px) {
  header .actions-area > .header-history-toggle { min-width: 34px; padding: 8px 7px; position: sticky; left: 0; z-index: 2; background: var(--bg-panel); }
  header .header-history-toggle .menu-label { display: none; }
  header .header-history-toggle .ui-icon { margin-right: 0; }
}

/* Language switch (js/i18n.js): EN / 日本語 in the header; on narrow screens the same switch is in the help menu */
header .header-lang-btn { margin-left: 4px; min-width: 40px; padding: 8px 9px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; }
header .actions-area > .header-lang-btn[aria-pressed="true"] { color: var(--color-accent); background: var(--accent-soft); }
#btn-lang-menu[aria-pressed="true"] { color: var(--color-accent); }
@media (max-width: 700px) { header .header-lang-btn { display: none; } }

/* ---- Logos in the dark theme (the start card mark, the link to the home page of the site, the logo of the site in the notice bar) ------------------------- */
:root[data-theme="dark"] .canvas-welcome-mark { background: none; padding: 0; border-radius: 0; }
:root[data-theme="dark"] .canvas-welcome-mark .mark-outer { stroke: #b9c7ff; }
:root[data-theme="dark"] .canvas-welcome-mark .mark-inner { stroke: #7a95f3; }
:root[data-theme="dark"] .site-home-link { background: var(--bg-subtle); border-color: var(--border-color); color: var(--color-accent); }
:root[data-theme="dark"] .site-home-link:hover, :root[data-theme="dark"] .site-home-link:focus-visible { background: var(--hover-wash); border-color: var(--border-color-active); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .canvas-welcome-mark { background: none; padding: 0; border-radius: 0; }
  :root:not([data-theme="light"]) .canvas-welcome-mark .mark-outer { stroke: #b9c7ff; }
  :root:not([data-theme="light"]) .canvas-welcome-mark .mark-inner { stroke: #7a95f3; }
  :root:not([data-theme="light"]) .site-home-link { background: var(--bg-subtle); border-color: var(--border-color); color: var(--color-accent); }
  :root:not([data-theme="light"]) .site-home-link:hover, :root:not([data-theme="light"]) .site-home-link:focus-visible { background: var(--hover-wash); border-color: var(--border-color-active); }
}