:root {
  color-scheme: light;
  --bg: #f7f9fc;
  --surface: #ffffff;
  --surface-soft: #f0f4f8;
  --surface-blue: #edf6ff;
  --text: #172033;
  --muted: #62708a;
  --border: #d8e0ea;
  --border-strong: #b9c6d7;
  --primary: #1769e0;
  --primary-hover: #0f59c4;
  --primary-soft: #e8f1ff;
  --teal: #0f8f8a;
  --danger: #c23b3b;
  --danger-soft: #fff0f0;
  --shadow: 0 10px 30px rgba(29, 52, 84, 0.08);
  --shadow-soft: 0 3px 14px rgba(29, 52, 84, 0.06);
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --header-h: 70px;
  --nav-h: 74px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid rgba(23, 105, 224, 0.22);
  outline-offset: 2px;
}

.app-shell { min-height: 100vh; }
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, #ffffff, #eaf3ff);
  border: 1px solid #cfe0f6;
  box-shadow: var(--shadow-soft);
}
.brand-mark svg { width: 27px; height: 27px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.axis-path { stroke: #7f8ca1; }
.curve-path { stroke: var(--primary); }
.brand h1 { margin: 0; font-size: 18px; line-height: 1.1; letter-spacing: -0.02em; }
.brand p { margin: 3px 0 0; font-size: 12px; color: var(--muted); white-space: nowrap; }
.brand p span { color: #7b8798; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.mode-button, .icon-button, .secondary-button, .primary-button, .danger-button, .text-button, .memory-row button {
  border: 1px solid var(--border);
  border-radius: 10px;
  min-height: 42px;
  padding: 9px 14px;
  background: var(--surface);
  color: var(--text);
  font-weight: 650;
  transition: 120ms ease;
}
.mode-button:hover, .icon-button:hover, .secondary-button:hover, .memory-row button:hover { background: var(--surface-soft); border-color: var(--border-strong); }
.mode-button { min-width: 58px; color: var(--primary); background: var(--primary-soft); border-color: #bfd6f8; }
.primary-button { background: var(--primary); color: white; border-color: var(--primary); }
.primary-button:hover { background: var(--primary-hover); }
.danger-button { color: var(--danger); background: var(--danger-soft); border-color: #f0c5c5; }
.danger-button:hover { background: #ffe4e4; }
.text-button { min-height: auto; padding: 6px 8px; border: 0; background: transparent; color: var(--primary); }
.text-button:hover { text-decoration: underline; }
.is-hidden { display: none !important; }

.app-main {
  width: min(1500px, 100%);
  margin: 0 auto;
  padding: 24px 24px calc(var(--nav-h) + 30px);
}
.view { display: none; }
.view.active { display: block; }
.view-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.view-title h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.035em; }
.view-title p { margin: 6px 0 0; color: var(--muted); }

.calculator-layout {
  display: grid;
  grid-template-columns: minmax(0, 820px) minmax(280px, 1fr);
  align-items: start;
  gap: 22px;
}
.primary-card, .secondary-card, .tool-card, .graph-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.calculator-card { padding: clamp(14px, 2.2vw, 24px); }
.display-panel {
  padding: 18px;
  background: linear-gradient(160deg, #fbfdff, #edf5ff);
  border: 1px solid #cfe0f4;
  border-radius: 16px;
  margin-bottom: 14px;
}
.display-meta { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.memory-indicator { color: var(--teal); }
#expressionInput {
  display: block;
  width: 100%;
  min-height: 82px;
  resize: vertical;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: clamp(24px, 4vw, 38px);
  line-height: 1.35;
  padding: 14px 0 8px;
}
#expressionInput::placeholder { color: #9ba7b8; }
#expressionInput:focus { outline: 0; }
.result-row { min-height: 46px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border-top: 1px solid #d8e6f6; padding-top: 10px; }
.status-text { color: var(--muted); font-size: 13px; }
#resultOutput { font-family: "SFMono-Regular", Consolas, monospace; font-size: clamp(23px, 3.2vw, 34px); font-weight: 750; text-align: right; overflow-wrap: anywhere; }
#resultOutput.error { color: var(--danger); font-size: 16px; }

.memory-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 10px; }
.memory-row button { min-height: 40px; padding: 7px 8px; color: #40506a; background: #f7f9fc; }
.keypad { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(7px, 1.3vw, 11px); }
.key {
  min-height: clamp(48px, 6.5vw, 64px);
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #ffffff;
  color: var(--text);
  font-size: clamp(15px, 2vw, 19px);
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(29, 52, 84, 0.05);
  transition: transform 60ms ease, background 120ms ease, border-color 120ms ease;
}
.key:hover { background: #f5f8fc; border-color: var(--border-strong); }
.key:active { transform: translateY(1px); }
.key.function { background: #f3f7fb; color: #34445d; }
.key.operator { background: var(--surface-blue); color: var(--primary); border-color: #c7dbf7; font-size: 24px; }
.key.action { background: #f9f3ed; color: #8b4f18; border-color: #ead2ba; }
.key.equals { background: var(--primary); color: white; border-color: var(--primary); }
.key.equals:hover { background: var(--primary-hover); }

.history-card { padding: 20px; position: sticky; top: calc(var(--header-h) + 18px); max-height: calc(100vh - var(--header-h) - var(--nav-h) - 50px); overflow: auto; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.section-heading.compact { margin-bottom: 12px; }
.section-heading h2, .section-heading h3, .tool-card h3 { margin: 0; }
.section-heading h2 { font-size: 20px; }
.section-heading h3, .tool-card h3 { font-size: 16px; }
.section-heading p, .tool-card > p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.history-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.history-empty, .empty-state { color: var(--muted); padding: 24px 4px; text-align: center; }
.history-entry {
  display: grid;
  gap: 4px;
  width: 100%;
  text-align: left;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #fbfcfe;
}
.history-entry:hover { background: var(--primary-soft); border-color: #bfd6f8; }
.history-expression { color: #34445d; font-family: "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }
.history-result { color: var(--primary); font-family: "SFMono-Regular", Consolas, monospace; font-weight: 700; overflow-wrap: anywhere; }

.graph-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
.graph-sidebar { display: grid; gap: 16px; position: sticky; top: calc(var(--header-h) + 18px); max-height: calc(100vh - var(--header-h) - var(--nav-h) - 50px); overflow: auto; padding-right: 2px; }
.graph-workspace { display: grid; gap: 18px; min-width: 0; }
.tool-card, .graph-card { padding: 17px; }
.function-editor { display: grid; gap: 8px; }
.function-row { display: grid; grid-template-columns: 36px 42px minmax(0, 1fr) 34px; align-items: center; gap: 8px; }
.function-toggle { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 9px; background: #fff; display: grid; place-items: center; }
.function-toggle.off { opacity: 0.45; }
.function-label { font-family: "SFMono-Regular", Consolas, monospace; font-size: 13px; font-weight: 750; }
.function-input, .window-grid input, .inline-fields input, .analysis-grid input, .analysis-grid select, .graph-toolbar select, .plot-toolbar select, .list-grid textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 9px;
  min-height: 40px;
  padding: 8px 10px;
  background: #fff;
  color: var(--text);
}
.function-input { font-family: "SFMono-Regular", Consolas, monospace; }
.function-color { width: 30px; height: 30px; padding: 1px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.function-error { grid-column: 3 / -1; color: var(--danger); font-size: 11px; }
.window-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.window-grid label, .inline-fields label, .analysis-grid label, .plot-toolbar label, .list-grid label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.graph-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.graph-toolbar select { width: auto; min-width: 78px; }
.trace-output { margin-left: auto; color: var(--muted); font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; }
.canvas-wrap { position: relative; width: 100%; border: 1px solid var(--border); border-radius: 13px; overflow: hidden; background: #fff; }
canvas { display: block; width: 100%; height: auto; touch-action: none; }
.graph-lower-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr); gap: 18px; }
.inline-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 12px; }
.table-wrap { overflow: auto; max-height: 360px; border: 1px solid var(--border); border-radius: 10px; }
.data-table { width: 100%; border-collapse: collapse; font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; }
.data-table th, .data-table td { padding: 8px 10px; border-bottom: 1px solid #e7edf4; text-align: right; white-space: nowrap; }
.data-table th { position: sticky; top: 0; background: #f3f7fb; color: #42526a; }
.analysis-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
.analysis-output { display: block; min-height: 46px; padding: 12px; margin-top: 12px; border-radius: 10px; background: var(--surface-soft); color: #314159; font-family: "SFMono-Regular", Consolas, monospace; font-size: 13px; }
.analysis-output.error { color: var(--danger); background: var(--danger-soft); }

.stats-layout { display: grid; grid-template-columns: minmax(300px, 0.8fr) minmax(340px, 1fr); gap: 18px; align-items: start; }
.plot-card { grid-column: 1 / -1; }
.list-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 12px; }
.list-grid textarea { resize: vertical; min-height: 230px; font-family: "SFMono-Regular", Consolas, monospace; line-height: 1.5; }
.stats-results { display: grid; gap: 14px; }
.stats-group { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.stats-group h4 { margin: 0; padding: 10px 12px; background: #f3f7fb; font-size: 14px; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.stat-item { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-top: 1px solid #e8edf3; }
.stat-item:nth-child(odd) { border-right: 1px solid #e8edf3; }
.stat-item span:first-child { color: var(--muted); }
.stat-item strong { font-family: "SFMono-Regular", Consolas, monospace; text-align: right; }
.plot-toolbar { display: flex; align-items: end; gap: 10px; margin-bottom: 12px; }
.plot-toolbar label { min-width: 220px; }
.stats-canvas-wrap { min-height: 300px; }

.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.button-stack { display: grid; gap: 9px; margin-top: 16px; }
.file-button { display: flex; align-items: center; justify-content: center; }
.file-button input { display: none; }
.shortcut-list { margin: 14px 0 0; display: grid; gap: 10px; }
.shortcut-list div { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #edf0f5; padding-bottom: 9px; }
.shortcut-list dt { font-family: "SFMono-Regular", Consolas, monospace; color: var(--primary); font-weight: 700; }
.shortcut-list dd { margin: 0; color: var(--muted); }
.muted { color: var(--muted); }

.bottom-nav {
  position: fixed;
  z-index: 60;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(10px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(4, minmax(78px, 1fr));
  width: min(560px, calc(100% - 24px));
  min-height: 62px;
  padding: 7px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(29, 52, 84, 0.16);
  backdrop-filter: blur(16px);
}
.nav-item { border: 0; border-radius: 12px; background: transparent; color: var(--muted); min-height: 48px; display: grid; place-items: center; align-content: center; gap: 1px; font-size: 11px; font-weight: 700; }
.nav-item:hover { background: var(--surface-soft); }
.nav-item.active { background: var(--primary-soft); color: var(--primary); }
.nav-icon { font-size: 18px; line-height: 1; }
.toast {
  position: fixed;
  z-index: 100;
  right: 20px;
  bottom: calc(var(--nav-h) + 22px);
  max-width: 340px;
  padding: 12px 15px;
  background: #182337;
  color: white;
  border-radius: 11px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: 180ms ease;
}
.toast.show { opacity: 1; transform: translateY(0); }

@media (min-width: 1050px) {
  .app-main { padding-bottom: 36px; }
  .bottom-nav {
    top: 10px;
    bottom: auto;
    width: auto;
    min-height: 50px;
    grid-template-columns: repeat(4, 94px);
    box-shadow: var(--shadow-soft);
  }
  .nav-item { min-height: 38px; grid-auto-flow: column; gap: 7px; font-size: 12px; }
  .nav-icon { font-size: 15px; }
  .app-header { padding-right: 450px; }
  .toast { bottom: 22px; }
}

@media (max-width: 1100px) {
  .calculator-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .graph-layout { grid-template-columns: 300px minmax(0, 1fr); }
  .graph-lower-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .app-header { padding: 0 14px; }
  .brand p span { display: none; }
  .app-main { padding: 16px 14px calc(var(--nav-h) + 26px); }
  .calculator-layout, .graph-layout, .stats-layout, .more-grid { grid-template-columns: 1fr; }
  .history-card, .graph-sidebar { position: static; max-height: none; overflow: visible; }
  .graph-sidebar { order: 2; }
  .graph-workspace { order: 1; }
  .plot-card { grid-column: auto; }
  .view-title { align-items: stretch; flex-direction: column; }
}

@media (max-width: 600px) {
  :root { --header-h: 64px; }
  .brand-mark { width: 38px; height: 38px; }
  .brand h1 { font-size: 16px; }
  .brand p { font-size: 10px; }
  .header-actions { gap: 5px; }
  .mode-button, .icon-button { min-height: 38px; padding: 7px 10px; }
  .calculator-card, .history-card, .tool-card, .graph-card { padding: 12px; border-radius: 15px; }
  .display-panel { padding: 13px; }
  #expressionInput { min-height: 72px; font-size: 25px; }
  .memory-row { gap: 5px; }
  .memory-row button { min-height: 36px; font-size: 12px; }
  .keypad { gap: 6px; }
  .key { min-height: 48px; border-radius: 10px; font-size: 15px; }
  .key.operator { font-size: 20px; }
  .list-grid, .stats-grid, .analysis-grid, .window-grid { grid-template-columns: 1fr; }
  .inline-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .function-row { grid-template-columns: 34px 36px minmax(0, 1fr) 30px; gap: 5px; }
  .trace-output { width: 100%; margin-left: 0; }
  .bottom-nav { grid-template-columns: repeat(4, 1fr); width: calc(100% - 16px); bottom: max(6px, env(safe-area-inset-bottom)); }
  .toast { left: 12px; right: 12px; max-width: none; }
}

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

/* GraphCore 1.0 additions */
.compact-select, .view-actions select, .form-grid input, .form-grid select, .dynamic-fields input, .dynamic-fields select, .matrix-editor-grid textarea, .solver-grid input, .solver-grid textarea, .code-editor, .domain-editor input, .domain-editor select {
  min-height: 40px; border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; background: #fff; color: var(--text); width: 100%;
}
.compact-select { width: auto; min-width: 108px; }
#modeIndicators { flex: 1; text-align: center; color: var(--primary); }
.quick-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin-bottom: 8px; }
.quick-strip button, .zoom-grid button {
  min-height: 38px; padding: 7px 8px; border: 1px solid var(--border); border-radius: 9px; background: #f7f9fc; color: #40506a; font-weight: 700;
}
.quick-strip button:hover, .zoom-grid button:hover { background: var(--primary-soft); border-color: #bfd6f8; color: var(--primary); }
.memory-row { grid-template-columns: repeat(6, 1fr); }
.keypad-six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.keypad-six .wide { grid-column: span 2; }
.key.second-active { background: #fff4cc; border-color: #e9cb64; color: #725800; }
.calculator-drawer { margin-top: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 13px; background: #f9fbfd; }
.drawer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 7px; }
.drawer-grid button { min-height: 40px; border: 1px solid var(--border); border-radius: 9px; background: #fff; color: var(--text); font-family: "SFMono-Regular", Consolas, monospace; }
.drawer-grid button:hover { background: var(--primary-soft); color: var(--primary); }
.catalog-search { margin-bottom: 10px; width: 100%; min-height: 42px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.view-actions { display: flex; gap: 8px; align-items: center; }
.zoom-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-top: 12px; }
.domain-editor { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.domain-editor label, .form-grid label, .dynamic-fields label, .matrix-editor-grid label, .solver-grid label, .check-label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.parametric-row { display: grid; grid-template-columns: 36px 42px minmax(0, 1fr) minmax(0, 1fr) 34px; gap: 6px; align-items: center; }
.full-span { grid-column: 1 / -1; }
.expanded-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.list-editor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.list-editor-grid label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 750; }
.list-editor-grid textarea { min-height: 150px; resize: vertical; border: 1px solid var(--border); border-radius: 9px; padding: 9px; font-family: "SFMono-Regular", Consolas, monospace; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.dynamic-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; margin: 12px 0; }
.test-layout { display: grid; gap: 10px; }
.tools-grid { display: grid; gap: 14px; }
details.tool-card { padding: 0; overflow: hidden; }
details.tool-card > summary { list-style: none; cursor: pointer; padding: 16px 18px; font-size: 17px; font-weight: 750; background: #fbfcfe; border-bottom: 1px solid transparent; }
details.tool-card > summary::-webkit-details-marker { display: none; }
details.tool-card > summary::after { content: "+"; float: right; color: var(--primary); }
details.tool-card[open] > summary { border-bottom-color: var(--border); background: #f3f7fb; }
details.tool-card[open] > summary::after { content: "−"; }
.details-body { padding: 17px; }
.matrix-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.matrix-editor-grid textarea { font-family: "SFMono-Regular", Consolas, monospace; line-height: 1.5; resize: vertical; }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.solver-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.solver-grid section { min-width: 0; padding: 13px; border: 1px solid var(--border); border-radius: 12px; background: #fbfcfe; }
.solver-grid h4 { margin: 0 0 12px; }
.pre-output { white-space: pre-wrap; max-height: 250px; overflow: auto; }
.finance-grid { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
.check-label { align-content: end; grid-template-columns: auto 1fr; align-items: center; }
.check-label input { width: auto; min-height: auto; }
.code-editor { min-height: 280px; resize: vertical; font-family: "SFMono-Regular", Consolas, monospace; line-height: 1.5; }
.program-output { min-height: 90px; max-height: 260px; overflow: auto; padding: 12px; background: #172033; color: #e7edf8; border-radius: 10px; font-family: "SFMono-Regular", Consolas, monospace; white-space: pre-wrap; }
.modal-backdrop { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 18px; background: rgba(23,32,51,.45); backdrop-filter: blur(3px); }
.modal-panel { width: min(800px, 100%); max-height: min(760px, calc(100vh - 36px)); overflow: auto; background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 30px 80px rgba(23,32,51,.22); }
.modal-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--border); }
.modal-header h2 { margin: 0; font-size: 19px; }
#modalContent { padding: 18px; }
.catalog-section { margin-bottom: 18px; }
.catalog-section h3 { margin: 0 0 8px; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }

@media (max-width: 1000px) {
  .solver-grid { grid-template-columns: 1fr; }
  .finance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .expanded-stats { grid-template-columns: 1fr; }
  .full-span { grid-column: auto; }
  .list-editor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .matrix-editor-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .header-actions .compact-select { display: none; }
  .quick-strip { grid-template-columns: repeat(3, 1fr); }
  .keypad-six { gap: 5px; }
  .keypad-six .key { min-height: 45px; padding: 5px 2px; font-size: 13px; }
  .list-editor-grid { grid-template-columns: 1fr; }
  .finance-grid { grid-template-columns: 1fr 1fr; }
  .parametric-row { grid-template-columns: 32px 32px minmax(0,1fr); }
  .parametric-row .param-y { grid-column: 3; }
  .parametric-row .function-color { grid-column: 2; }
}
@media (min-width: 1050px) {
  .app-header { padding-right: 24px; }
}


/* GraphCore 1.1 SmartView workspace */
.workspace-toolbar {
  display: flex; align-items: end; justify-content: space-between; gap: 16px;
  padding: 14px 16px; margin-bottom: 16px; border-radius: 16px;
}
.workspace-identity { display: grid; grid-template-columns: minmax(150px,.7fr) minmax(220px,1.3fr); gap: 10px; flex: 1; }
.workspace-identity label, .assistant-mode-label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.workspace-identity input, .assistant-mode-label select { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: #fff; color: var(--text); text-transform: none; letter-spacing: normal; }
.workspace-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.record-button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 12px; border: 1px solid #f2b8b5; border-radius: 9px; background: #fff4f3; color: #9b2c2c; font-weight: 750; }
.record-button.paused { border-color: var(--border); background: #f7f9fc; color: var(--muted); }
.record-dot { width: 9px; height: 9px; border-radius: 50%; background: #e53e3e; box-shadow: 0 0 0 3px rgba(229,62,62,.12); flex: 0 0 auto; }
.paused .record-dot, .recording-status.paused .record-dot { background: #a0aec0; box-shadow: none; }
.smartview-layout { display: grid; grid-template-columns: minmax(210px,.72fr) minmax(520px,1.65fr) minmax(255px,.88fr); gap: 16px; align-items: start; }
.workspace-rail { display: grid; gap: 12px; position: sticky; top: calc(var(--header-h) + 14px); max-height: calc(100vh - var(--header-h) - 34px); overflow: auto; scrollbar-width: thin; padding: 1px; }
.smartview-calculator { min-width: 0; }
.calculator-topline { display: flex; justify-content: space-between; gap: 10px; margin: -2px 2px 10px; color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }
.bento-panel { overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-soft); }
.bento-panel > summary { list-style: none; cursor: pointer; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; background: #fbfcfe; user-select: none; }
.bento-panel > summary::-webkit-details-marker { display: none; }
.bento-panel > summary:hover { background: #f4f8fd; }
.bento-panel > summary span:first-child { display: grid; gap: 2px; min-width: 0; }
.bento-panel > summary strong { font-size: 13px; }
.bento-panel > summary small { color: var(--muted); font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bento-panel[open] > summary { border-bottom: 1px solid var(--border); background: #f6f9fd; }
.bento-panel .panel-body { padding: 12px; }
.panel-badge, .panel-symbol { display: inline-grid; place-items: center; min-width: 28px; min-height: 26px; padding: 3px 7px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 11px; font-weight: 800; }
.workspace-variable-list { display: grid; gap: 8px; }
.workspace-variable-group { display: grid; gap: 5px; }
.workspace-variable-group h4 { margin: 0; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.variable-chip-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.variable-chip { min-width: 0; display: flex; justify-content: space-between; gap: 7px; padding: 7px 8px; border: 1px solid var(--border); border-radius: 8px; background: #fbfcfe; font-family: "SFMono-Regular",Consolas,monospace; font-size: 11px; }
.variable-chip button { min-height: auto; padding: 0; border: 0; background: transparent; color: var(--primary); font: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-canvas-wrap { overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
#graphPreviewCanvas { width: 100%; min-height: 175px; }
.panel-button-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: 9px; }
.panel-button-row button, .full-width { min-height: 36px; padding: 6px 8px; font-size: 11px; }
.full-width { width: 100%; margin-top: 8px; }
.function-library-list { display: grid; gap: 6px; }
.function-library-entry { display: grid; grid-template-columns: 10px 30px minmax(0,1fr); gap: 7px; align-items: center; min-height: 34px; padding: 6px 7px; border: 1px solid var(--border); border-radius: 8px; background: #fbfcfe; }
.function-library-entry .swatch { width: 9px; height: 9px; border-radius: 50%; }
.function-library-entry strong { font-family: "SFMono-Regular",Consolas,monospace; font-size: 10px; }
.function-library-entry button { min-width: 0; min-height: auto; padding: 0; border: 0; background: transparent; text-align: left; font-family: "SFMono-Regular",Consolas,monospace; font-size: 11px; color: #34445d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recording-status { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 9px; background: #fff4f3; color: #9b2c2c; font-size: 11px; font-weight: 700; }
.work-timeline { list-style: none; display: grid; gap: 6px; max-height: 210px; overflow: auto; margin: 9px 0 0; padding: 0; }
.work-event { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 7px; align-items: start; padding: 7px; border: 1px solid var(--border); border-radius: 8px; background: #fbfcfe; }
.work-event-index { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: 9px; font-weight: 800; }
.work-event-content { min-width: 0; }
.work-event-content strong, .work-event-content span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-event-content strong { font-size: 10px; }
.work-event-content span { margin-top: 2px; color: var(--muted); font-family: "SFMono-Regular",Consolas,monospace; font-size: 9px; }
.assistant-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin: 9px 0; }
.assistant-actions button { min-height: 34px; padding: 5px; border: 1px solid #c7dbf7; border-radius: 8px; background: var(--primary-soft); color: var(--primary); font-size: 10px; font-weight: 750; }
.assistant-output { display: block; min-height: 90px; max-height: 220px; overflow: auto; padding: 10px; border-radius: 9px; background: #f8fbff; border: 1px solid #dbe8f8; color: #314159; font-size: 11px; line-height: 1.55; white-space: pre-wrap; }
.assistant-output.exam { background: #f7f9fc; border-color: var(--border); color: var(--muted); }
.assistant-privacy { margin: 8px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.session-list { display: grid; gap: 8px; }
.session-entry { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: #fbfcfe; }
.session-entry-main { min-width: 0; }
.session-entry-main strong, .session-entry-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-entry-main span { color: var(--muted); font-size: 11px; margin-top: 3px; }
.session-entry-actions { display: flex; gap: 5px; }
.session-entry-actions button { min-height: 32px; padding: 5px 8px; font-size: 10px; }
.replay-stage { display: grid; gap: 12px; }
.replay-card { padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: #f8fbff; }
.replay-card .replay-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.replay-card .replay-expression { margin-top: 8px; font-family: "SFMono-Regular",Consolas,monospace; font-size: 18px; overflow-wrap: anywhere; }
.replay-card .replay-result { margin-top: 8px; color: var(--primary); font-family: "SFMono-Regular",Consolas,monospace; font-size: 20px; font-weight: 750; overflow-wrap: anywhere; }
.replay-controls { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.workspace-focus .workspace-left, .workspace-focus .workspace-right { display: none; }
.workspace-focus .workspace-toolbar .workspace-identity, .workspace-focus .workspace-toolbar .workspace-actions > :not(#focusWorkspaceButton) { display: none; }
.workspace-focus .workspace-toolbar { justify-content: flex-end; }
.workspace-focus .smartview-layout { grid-template-columns: minmax(0,860px); justify-content: center; }
.workspace-focus .smartview-calculator { width: min(860px,100%); }

@media (max-width: 1220px) {
  .smartview-layout { grid-template-columns: minmax(190px,.62fr) minmax(500px,1.5fr); }
  .workspace-right { position: static; grid-column: 1 / -1; grid-template-columns: repeat(4,minmax(0,1fr)); max-height: none; overflow: visible; }
  .workspace-right .bento-panel { min-width: 0; }
}
@media (max-width: 900px) {
  .workspace-toolbar { align-items: stretch; flex-direction: column; }
  .workspace-actions { justify-content: flex-start; }
  .smartview-layout { grid-template-columns: 1fr; }
  .workspace-rail { position: static; grid-template-columns: repeat(2,minmax(0,1fr)); max-height: none; overflow: visible; }
  .workspace-left { order: 2; }
  .smartview-calculator { order: 1; }
  .workspace-right { order: 3; grid-column: auto; grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .workspace-identity { grid-template-columns: 1fr; }
  .workspace-actions { display: grid; grid-template-columns: repeat(2,1fr); }
  .workspace-actions button { width: 100%; }
  .workspace-rail, .workspace-right { grid-template-columns: 1fr; }
  .calculator-topline span:last-child { display: none; }
  .smartview-layout { gap: 10px; }
  .workspace-toolbar { padding: 11px; }
}

.key.keyboard-active { background: #dbeafe !important; border-color: #76aaf2 !important; box-shadow: inset 0 0 0 2px rgba(23,105,224,.18) !important; transform: translateY(1px); }
.stats-snapshot { display: grid; gap: 5px; }
.stats-snapshot-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 7px; border-bottom: 1px solid #edf1f6; font-size: 10px; }
.stats-snapshot-row span { color: var(--muted); }
.stats-snapshot-row strong { font-family: "SFMono-Regular",Consolas,monospace; text-align: right; }


/* GraphCore v1.1.1 visual color refresh */
:root {
  --accent-amber: #f59e0b;
  --accent-amber-soft: #fff5df;
  --accent-teal: #0f8f8a;
  --accent-teal-soft: #e8fbf8;
  --accent-violet: #7c5cff;
  --accent-violet-soft: #f1edff;
  --accent-rose: #ef476f;
  --accent-rose-soft: #fff0f4;
  --accent-green: #16a34a;
  --accent-green-soft: #edfdf3;
  --accent-cyan: #0891b2;
  --accent-cyan-soft: #ecfeff;
}

body {
  background:
    radial-gradient(circle at top left, rgba(23, 105, 224, 0.06), transparent 28%),
    radial-gradient(circle at top right, rgba(15, 143, 138, 0.06), transparent 24%),
    linear-gradient(180deg, #f8fbff 0%, #f7f9fc 100%);
}

.app-header {
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(249,252,255,.93));
  box-shadow: 0 4px 20px rgba(23, 32, 51, 0.05);
}

.brand-mark {
  background: linear-gradient(145deg, #ffffff, #eff7ff);
  box-shadow: 0 8px 18px rgba(23, 105, 224, 0.10);
}

.workspace-toolbar {
  background: linear-gradient(180deg, #ffffff, #f9fbff);
  border-color: #cfdbeb;
  box-shadow: 0 10px 24px rgba(29, 52, 84, 0.08);
}

.display-panel {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.92), rgba(232,241,255,0.94)),
    linear-gradient(90deg, rgba(23,105,224,0.08), rgba(15,143,138,0.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 10px 22px rgba(23,105,224,0.08);
}

.display-meta span:first-child,
.display-meta strong,
#modeIndicators { color: var(--primary); }

#resultOutput {
  color: #114fb6;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}

.mode-button, .primary-button, .secondary-button, .icon-button, .danger-button, .record-button,
.memory-row button, .panel-button-row button, .assistant-actions button, .view-actions button,
.drawer-grid button, .zoom-grid button, .quick-strip button {
  box-shadow: 0 4px 12px rgba(29, 52, 84, 0.05);
}

.secondary-button, .icon-button, .memory-row button {
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.primary-button {
  background: linear-gradient(180deg, #2477ee, #1769e0);
  box-shadow: 0 10px 20px rgba(23,105,224,.18);
}
.primary-button:hover { background: linear-gradient(180deg, #1d6de0, #0f59c4); }

.key {
  background: linear-gradient(180deg, #ffffff, #f9fbff);
}
.key:hover {
  background: linear-gradient(180deg, #ffffff, #f1f6fd);
  box-shadow: 0 6px 14px rgba(29, 52, 84, 0.09);
}
.key.function {
  background: linear-gradient(180deg, #f5f6ff, #eef3ff);
  border-color: #d6ddff;
  color: #4e52a7;
}
.key.operator {
  background: linear-gradient(180deg, #edf6ff, #dfeeff);
  border-color: #bfd6f8;
  color: #0f59c4;
}
.key.action {
  background: linear-gradient(180deg, #fff7ef, #ffe9d7);
  border-color: #edcfb1;
  color: #9a5b22;
}
.key.equals {
  background: linear-gradient(180deg, #15a36a, #0f8b59);
  border-color: #118659;
  box-shadow: 0 10px 20px rgba(15, 139, 89, 0.20);
}
.key.equals:hover { background: linear-gradient(180deg, #139562, #0b7a4e); }
.key.second-active {
  background: linear-gradient(180deg, #fff7d7, #ffefae);
  box-shadow: inset 0 0 0 1px rgba(233,203,100,.55), 0 6px 12px rgba(233,203,100,.18);
}
.key.keyboard-active {
  background: linear-gradient(180deg, #d9ebff, #c8defe) !important;
  border-color: #5e9cec !important;
}

.bento-panel {
  border-color: #d7e1ec;
  box-shadow: 0 10px 22px rgba(29, 52, 84, 0.07);
}
.bento-panel > summary {
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}
.bento-panel > summary:hover {
  background: linear-gradient(180deg, #ffffff, #f2f7ff);
}
.bento-panel[open] > summary {
  background: linear-gradient(180deg, #fbfdff, #f3f8ff);
}

#historyPanel { border-top: 4px solid var(--accent-amber); }
#variablesPanel { border-top: 4px solid var(--accent-teal); }
#graphPreviewPanel { border-top: 4px solid var(--primary); }
#functionLibraryPanel { border-top: 4px solid var(--accent-green); }
#statsPreviewPanel { border-top: 4px solid var(--accent-violet); }
#studentWorkPanel { border-top: 4px solid var(--accent-rose); }
#learningAssistantPanel { border-top: 4px solid var(--accent-cyan); }

#historyPanel .panel-badge, #historyPanel .panel-symbol { background: var(--accent-amber-soft); color: #9a6200; }
#variablesPanel .panel-badge, #variablesPanel .panel-symbol { background: var(--accent-teal-soft); color: #0f756f; }
#graphPreviewPanel .panel-badge, #graphPreviewPanel .panel-symbol { background: var(--primary-soft); color: var(--primary); }
#functionLibraryPanel .panel-badge, #functionLibraryPanel .panel-symbol { background: var(--accent-green-soft); color: #16753b; }
#statsPreviewPanel .panel-badge, #statsPreviewPanel .panel-symbol { background: var(--accent-violet-soft); color: #6949eb; }
#studentWorkPanel .panel-badge, #studentWorkPanel .panel-symbol { background: var(--accent-rose-soft); color: #cf315a; }
#learningAssistantPanel .panel-badge, #learningAssistantPanel .panel-symbol { background: var(--accent-cyan-soft); color: #0a7890; }

.history-entry,
.function-library-entry,
.variable-chip,
.session-entry,
.work-event,
.replay-card,
.recording-status,
.assistant-output,
.stats-snapshot-row,
.function-row,
.graph-card canvas,
.mini-canvas-wrap,
.solver-grid section {
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
}

.history-entry {
  border-left: 4px solid var(--accent-amber);
  background: linear-gradient(180deg, #fffdf7, #fffaf0);
}
.history-entry:hover { transform: translateY(-1px); }
.variable-chip {
  background: linear-gradient(180deg, #f8fffd, #effcf8);
  border-color: #cfece3;
}
.function-library-entry {
  background: linear-gradient(180deg, #f8fff9, #f1fff3);
  border-color: #d4edd8;
}
.function-library-entry:hover,
.variable-chip:hover,
.work-event:hover,
.session-entry:hover,
.stats-snapshot-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 14px rgba(29, 52, 84, 0.07);
}
.mini-canvas-wrap,
.graph-card canvas {
  box-shadow: inset 0 0 0 1px rgba(23,105,224,.04);
}
.stats-snapshot-row {
  background: linear-gradient(180deg, #faf8ff, #f7f3ff);
  border: 1px solid #e7defe;
  border-bottom: 1px solid #e7defe;
  border-radius: 8px;
}
.recording-status {
  background: linear-gradient(180deg, #fff5f6, #fff0f4);
  border: 1px solid #f5cad5;
}
.work-event {
  background: linear-gradient(180deg, #fff7fa, #fff1f5);
  border-left: 4px solid var(--accent-rose);
}
.work-event-index {
  background: linear-gradient(180deg, #ffe0ea, #ffd2df);
  color: #c72a57;
}
.assistant-output {
  background: linear-gradient(180deg, #f5fbff, #eef8ff);
  border-color: #d4e9fb;
}
.replay-card {
  background: linear-gradient(180deg, #f8fbff, #eef5ff);
  border-color: #d4e2f7;
}

.bottom-nav {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,255,.96));
}
.nav-item.active {
  background: linear-gradient(180deg, #eef5ff, #e2efff);
  box-shadow: inset 0 0 0 1px rgba(23,105,224,.08);
}

.toast {
  background: linear-gradient(180deg, #1c2a43, #162236);
  border: 1px solid rgba(255,255,255,.08);
}

/* GraphCore v1.2.0 appearance presets and workspace profiles */
:root {
  --theme-color: #f7f9fc;
  --canvas-bg: #ffffff;
  --canvas-grid: #e4eaf2;
  --canvas-axis: #718096;
  --canvas-label: #65738a;
}

html[data-theme="ocean"] {
  --theme-color: #eefbfc;
  --bg: #f2fbfc;
  --surface: #ffffff;
  --surface-soft: #eaf8f8;
  --surface-blue: #e5f6fb;
  --text: #12323b;
  --muted: #56727a;
  --border: #cfe5e8;
  --border-strong: #9fcbd1;
  --primary: #087f8c;
  --primary-hover: #066975;
  --primary-soft: #dff6f7;
  --teal: #0b7f72;
  --canvas-bg: #fbffff;
  --canvas-grid: #d8eef0;
  --canvas-axis: #52777d;
  --canvas-label: #55747b;
}

html[data-theme="sunrise"] {
  --theme-color: #fff8ef;
  --bg: #fff9f2;
  --surface: #ffffff;
  --surface-soft: #fff2e3;
  --surface-blue: #fff0dc;
  --text: #402918;
  --muted: #7f6755;
  --border: #ecd9c4;
  --border-strong: #d9b995;
  --primary: #d45d19;
  --primary-hover: #b84d12;
  --primary-soft: #fff0df;
  --teal: #14857b;
  --canvas-bg: #fffdfa;
  --canvas-grid: #f0e4d7;
  --canvas-axis: #806957;
  --canvas-label: #786454;
}

html[data-theme="violet"] {
  --theme-color: #f7f3ff;
  --bg: #f8f5ff;
  --surface: #ffffff;
  --surface-soft: #f1ecff;
  --surface-blue: #eee8ff;
  --text: #2f2550;
  --muted: #6c6289;
  --border: #ded6f2;
  --border-strong: #bfb0e4;
  --primary: #6d4ee8;
  --primary-hover: #583cc8;
  --primary-soft: #eee8ff;
  --teal: #168b84;
  --canvas-bg: #fefcff;
  --canvas-grid: #e9e2f5;
  --canvas-axis: #71658d;
  --canvas-label: #71678b;
}

html[data-theme="contrast"] {
  --theme-color: #ffffff;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f2f2f2;
  --surface-blue: #e8f1ff;
  --text: #050505;
  --muted: #353535;
  --border: #5a5a5a;
  --border-strong: #111111;
  --primary: #004ec2;
  --primary-hover: #00378a;
  --primary-soft: #dceaff;
  --teal: #006b65;
  --danger: #a40000;
  --canvas-bg: #ffffff;
  --canvas-grid: #c8c8c8;
  --canvas-axis: #111111;
  --canvas-label: #111111;
  --shadow: 0 0 0 2px rgba(0,0,0,.10);
  --shadow-soft: 0 0 0 1px rgba(0,0,0,.10);
}

.workspace-appearance {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 8px;
  min-width: 300px;
}
.workspace-appearance label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.workspace-appearance select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
}

html[data-workspace-mode="student"] .workspace-toolbar {
  border-top: 4px solid #ef476f;
}
html[data-workspace-mode="student"] .calculator-topline span:first-child::after {
  content: " · Student Workspace";
  color: #cf315a;
}
html[data-workspace-mode="student"] .bento-panel > summary strong {
  color: #243756;
}

html[data-workspace-mode="teacher"] .workspace-toolbar {
  border-top: 4px solid #0f8f8a;
}
html[data-workspace-mode="teacher"] .calculator-topline span:first-child::after {
  content: " · Teacher Review";
  color: #0f756f;
}
html[data-workspace-mode="teacher"] #studentWorkPanel,
html[data-workspace-mode="teacher"] #historyPanel {
  box-shadow: 0 12px 26px rgba(15,143,138,.11);
}
html[data-workspace-mode="teacher"] .work-event {
  background: linear-gradient(180deg, #f4fffc, #ebfaf6);
  border-left-color: #0f8f8a;
}
html[data-workspace-mode="teacher"] .work-event-index {
  background: #dff7f0;
  color: #0b756d;
}

html[data-workspace-mode="exam"] .workspace-toolbar {
  border-top: 4px solid #344054;
}
html[data-workspace-mode="exam"] .calculator-topline span:first-child::after {
  content: " · Exam View";
  color: #344054;
}
html[data-workspace-mode="exam"] #learningAssistantPanel {
  opacity: .60;
}
html[data-workspace-mode="exam"] .bento-panel {
  box-shadow: none;
}
html[data-workspace-mode="exam"] .bento-panel,
html[data-workspace-mode="exam"] .key,
html[data-workspace-mode="exam"] .primary-card,
html[data-workspace-mode="exam"] .secondary-card,
html[data-workspace-mode="exam"] .tool-card,
html[data-workspace-mode="exam"] .graph-card {
  border-color: var(--border-strong);
}

html[data-theme="contrast"] .key,
html[data-theme="contrast"] button,
html[data-theme="contrast"] input,
html[data-theme="contrast"] textarea,
html[data-theme="contrast"] select {
  border-width: 2px;
}
html[data-theme="contrast"] .key.equals {
  background: #064f2d;
}
html[data-theme="contrast"] .key.operator {
  background: #dbeaff;
  color: #003c96;
}

.graph-card canvas,
.mini-canvas-wrap {
  background: var(--canvas-bg);
}

@media (max-width: 1080px) {
  .workspace-toolbar { flex-wrap: wrap; }
  .workspace-appearance { order: 3; width: 100%; min-width: 0; }
}
@media (max-width: 620px) {
  .workspace-appearance { grid-template-columns: 1fr 1fr; }
}


html[data-theme] body { background: var(--bg); }

/* GraphCore v1.3.1 secured workspaces, MTBcustoms branding, and mobile keypad */
.brand p strong { color: var(--primary); font-weight: 850; }
.brand-footer {
  width: min(1500px, calc(100% - 48px));
  margin: 4px auto 96px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.brand-footer strong { color: var(--text); font-size: 14px; }
.brand-footer b { color: var(--primary); }
.brand-footer small { color: var(--muted); }

.workspace-appearance { align-items: end; }
.workspace-security-status {
  grid-column: 1 / -1;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.workspace-security-status[data-mode="teacher"] {
  background: var(--accent-teal-soft);
  border-color: #bce8df;
  color: #0f756f;
}
.workspace-security-status[data-mode="exam"] {
  background: #eef1f5;
  border-color: #aeb8c6;
  color: #27364d;
}

.mobile-cursor-controls {
  display: none;
  justify-content: flex-end;
  gap: 6px;
  margin-top: -4px;
  margin-bottom: 5px;
}
.mobile-cursor-controls button {
  width: 44px;
  min-height: 34px;
  border: 1px solid #c7dbf7;
  border-radius: 9px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 850;
  touch-action: manipulation;
}
.mobile-keypad-only .mobile-cursor-controls { display: flex; }
.mobile-keypad-only #expressionInput {
  cursor: default;
  caret-color: var(--primary);
  -webkit-user-select: text;
  user-select: text;
}

.pin-dialog { width: min(390px, 100%); margin: 0 auto; outline: 0; }
.pin-message { margin: 0 0 14px; color: var(--muted); line-height: 1.55; }
.pin-display {
  min-height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  border: 2px solid #bfd6f8;
  border-radius: 13px;
  background: linear-gradient(180deg, #f8fbff, #edf5ff);
  color: var(--primary);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 20px;
  font-weight: 850;
  letter-spacing: .22em;
}
.pin-error { min-height: 22px; color: var(--danger); font-size: 12px; text-align: center; }
.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin: 6px 0 14px;
}
.pin-pad button {
  min-height: 54px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f4f8fd);
  color: var(--text);
  font-size: 20px;
  font-weight: 800;
  touch-action: manipulation;
}
.pin-pad button:active { transform: translateY(1px); background: var(--primary-soft); }
.pin-pad .pin-key-action { font-size: 13px; color: var(--primary); }
.pin-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.disabled-control { opacity: .45; pointer-events: none; }

.exam-workspace-active #historyPanel,
.exam-workspace-active #studentWorkPanel,
.exam-workspace-active #learningAssistantPanel,
.exam-workspace-active #programTool { display: none !important; }
.exam-workspace-active .record-button { opacity: .72; }
.exam-workspace-active .workspace-toolbar::before {
  content: "EXAM MODE";
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: 8px 12px;
  border-radius: 10px;
  background: #27364d;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.key, .quick-strip button, .memory-row button, .bottom-nav button,
.workspace-actions button, .panel-button-row button { touch-action: manipulation; }

@media (max-width: 900px) {
  .brand-footer { width: calc(100% - 28px); margin-bottom: 92px; }
  .workspace-security-status { justify-content: flex-start; }
}

@media (max-width: 620px) {
  .app-header { gap: 8px; }
  .brand { gap: 8px; }
  .brand p { white-space: normal; line-height: 1.15; }
  .header-actions { flex: 0 0 auto; }
  #answerModeSelect { max-width: 100px; min-width: 88px; padding-left: 7px; padding-right: 7px; }
  .workspace-appearance { grid-template-columns: 1fr 1fr; }
  .workspace-security-status { grid-column: 1 / -1; justify-content: center; }
  .quick-strip, .memory-row { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .quick-strip button, .memory-row button { min-height: 42px; }
  .keypad-six { grid-template-columns: repeat(6, minmax(0,1fr)); gap: 5px; }
  .keypad-six .key { min-width: 0; min-height: 48px; padding: 5px 2px; font-size: 13px; }
  .keypad-six .key.operator { font-size: 19px; }
  .keypad-six .key.action { font-size: 12px; }
  #expressionInput { resize: none; }
  .brand-footer { padding: 10px 8px; gap: 5px 10px; }
  .brand-footer small { flex-basis: 100%; }
  .pin-pad button { min-height: 50px; }
}

@media (max-width: 430px) {
  .app-main { padding-left: 7px; padding-right: 7px; }
  .calculator-card, .history-card, .tool-card, .graph-card { padding: 9px; }
  .display-panel { padding: 11px; }
  .display-meta { gap: 7px; font-size: 10px; }
  #expressionInput { min-height: 68px; font-size: 23px; }
  .keypad-six { gap: 4px; }
  .keypad-six .key { min-height: 45px; border-radius: 9px; font-size: 12px; }
  .keypad-six .key.operator { font-size: 18px; }
  .workspace-toolbar { border-radius: 14px; }
  .workspace-actions { gap: 6px; }
  .bottom-nav { width: calc(100% - 10px); }
}
@media (min-width: 1050px) {
  .brand-footer { margin-bottom: 26px; }
}

/* GraphCore v1.4.0 mobile calculator shell */
.mobile-only-action,
.mobile-calculator-tabs { display: none; }

.mobile-workspace-menu { display: grid; gap: 14px; }
.mobile-workspace-summary {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(160deg, var(--surface), var(--primary-soft));
}
.mobile-workspace-summary strong { font-size: 17px; }
.mobile-workspace-summary span { color: var(--primary); font-weight: 750; }
.mobile-workspace-summary small { color: var(--muted); }
.mobile-workspace-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.mobile-workspace-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.mobile-workspace-controls select { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); }
.mobile-workspace-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.mobile-workspace-actions button { min-height: 44px; }
.mobile-workspace-note { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; text-align: center; }
.mobile-history-menu { display: grid; gap: 8px; }

@media (max-width: 900px) {
  body.mobile-calculator-shell {
    min-height: 100dvh;
    background: linear-gradient(180deg, #eef3f8 0%, #e4eaf2 100%);
  }
  body.mobile-calculator-shell .app-shell { min-height: 100dvh; }
  body.mobile-calculator-shell .app-header {
    position: sticky;
    height: 56px;
    padding: 0 10px;
    background: rgba(247,250,253,.97);
    border-bottom-color: #c7d1de;
    box-shadow: 0 3px 14px rgba(23,32,51,.08);
  }
  body.mobile-calculator-shell .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  body.mobile-calculator-shell .brand-mark svg { width: 23px; height: 23px; }
  body.mobile-calculator-shell .brand h1 { font-size: 15px; }
  body.mobile-calculator-shell .brand p { margin-top: 1px; font-size: 9px; }
  body.mobile-calculator-shell .brand .product-subtitle { display: none; }
  body.mobile-calculator-shell .brand-byline { display: inline; }
  body.mobile-calculator-shell .header-actions { gap: 5px; }
  body.mobile-calculator-shell .header-actions #answerModeSelect,
  body.mobile-calculator-shell .header-actions #installButton { display: none !important; }
  body.mobile-calculator-shell .mode-button,
  body.mobile-calculator-shell .mobile-only-action {
    min-width: 48px;
    min-height: 36px;
    padding: 6px 9px;
    border-radius: 9px;
    font-size: 11px;
  }
  body.mobile-calculator-shell .mobile-only-action { display: inline-flex; align-items: center; justify-content: center; }

  body.mobile-calculator-shell .app-main {
    width: 100%;
    padding: 6px 6px 8px;
  }
  body.mobile-calculator-shell[data-active-view="calculator"] .app-main { padding-bottom: 8px; }
  body.mobile-calculator-shell[data-active-view="calculator"] .workspace-toolbar,
  body.mobile-calculator-shell[data-active-view="calculator"] .workspace-left,
  body.mobile-calculator-shell[data-active-view="calculator"] .workspace-right,
  body.mobile-calculator-shell .brand-footer { display: none !important; }
  body.mobile-calculator-shell[data-active-view="calculator"] .bottom-nav { display: none; }
  body.mobile-calculator-shell[data-active-view="calculator"] .smartview-layout { display: block; }

  body.mobile-calculator-shell .smartview-calculator {
    width: 100%;
    min-height: calc(100dvh - 68px);
    margin: 0;
    padding: 9px;
    border: 1px solid #aeb9c8;
    border-radius: 22px;
    background:
      linear-gradient(145deg, rgba(255,255,255,.50), rgba(207,217,229,.60)),
      linear-gradient(180deg, #e7edf4, #d8e1eb);
    box-shadow:
      0 14px 30px rgba(23,32,51,.17),
      inset 0 1px 0 rgba(255,255,255,.85),
      inset 0 -1px 0 rgba(93,110,132,.16);
  }
  body.mobile-calculator-shell .mobile-calculator-tabs {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 5px;
    margin-bottom: 7px;
    padding: 4px;
    border: 1px solid #aeb9c8;
    border-radius: 11px;
    background: rgba(91,108,130,.12);
  }
  body.mobile-calculator-shell .mobile-mode-button {
    min-height: 30px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #506078;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
  }
  body.mobile-calculator-shell .mobile-mode-button.active {
    background: #ffffff;
    color: var(--primary);
    box-shadow: 0 3px 8px rgba(23,32,51,.12);
  }
  body.mobile-calculator-shell .calculator-topline {
    min-height: 18px;
    margin: 0 3px 5px;
    font-size: 9px;
    color: #53627a;
  }
  body.mobile-calculator-shell .calculator-topline span:first-child::after {
    content: " · MTBcustoms";
    color: var(--primary);
  }
  body.mobile-calculator-shell .display-panel {
    margin-bottom: 7px;
    padding: 10px 11px 8px;
    border: 2px solid #a7bad2;
    border-radius: 13px;
    background: linear-gradient(160deg, #fbfdff, #e9f2fd);
    box-shadow: inset 0 2px 7px rgba(39,65,96,.08), 0 4px 10px rgba(23,32,51,.08);
  }
  body.mobile-calculator-shell .display-meta { font-size: 9px; letter-spacing: .05em; }
  body.mobile-calculator-shell #expressionInput {
    min-height: 62px;
    max-height: 76px;
    padding: 8px 0 3px;
    font-size: 22px;
    line-height: 1.25;
  }
  body.mobile-calculator-shell .result-row {
    min-height: 34px;
    padding-top: 6px;
  }
  body.mobile-calculator-shell #resultOutput { font-size: 25px; }
  body.mobile-calculator-shell .status-text { font-size: 10px; }
  body.mobile-calculator-shell .mobile-cursor-controls {
    position: absolute;
    right: 20px;
    margin-top: -36px;
    margin-bottom: 0;
    gap: 4px;
  }
  body.mobile-calculator-shell .mobile-cursor-controls button {
    width: 32px;
    min-height: 28px;
    padding: 3px;
    border-radius: 7px;
    font-size: 10px;
    opacity: .86;
  }

  body.mobile-calculator-shell .quick-strip,
  body.mobile-calculator-shell .memory-row {
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 4px;
    margin-bottom: 5px;
  }
  body.mobile-calculator-shell .quick-strip button {
    min-height: 31px;
    padding: 3px 1px;
    border-radius: 7px;
    font-size: 8.5px;
    letter-spacing: -.01em;
  }
  body.mobile-calculator-shell .memory-row button {
    min-height: 30px;
    padding: 3px 1px;
    border-radius: 7px;
    background: linear-gradient(180deg,#f8fafc,#e7edf4);
    color: #46556c;
    font-size: 9px;
  }
  body.mobile-calculator-shell .keypad-six {
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 4px;
  }
  body.mobile-calculator-shell .keypad-six .key {
    min-height: clamp(41px,5.8dvh,47px);
    padding: 3px 1px;
    border-color: #b7c2d0;
    border-radius: 8px;
    font-size: 12px;
    box-shadow: 0 3px 0 rgba(105,120,140,.20), 0 4px 7px rgba(23,32,51,.07);
  }
  body.mobile-calculator-shell .keypad-six .key:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 rgba(105,120,140,.18);
  }
  body.mobile-calculator-shell .keypad-six .key.function {
    background: linear-gradient(180deg,#eef1fa,#dde4f2);
    color: #394b72;
  }
  body.mobile-calculator-shell .keypad-six .key.number {
    background: linear-gradient(180deg,#ffffff,#f4f7fa);
    color: #182337;
    font-size: 15px;
  }
  body.mobile-calculator-shell .keypad-six .key.operator {
    background: linear-gradient(180deg,#dcedff,#c9e1ff);
    color: #0d56b5;
    font-size: 18px;
  }
  body.mobile-calculator-shell .keypad-six .key.action {
    background: linear-gradient(180deg,#fff0df,#ffd9bc);
    color: #8b4b16;
  }
  body.mobile-calculator-shell .keypad-six .key.equals {
    background: linear-gradient(180deg,#2477ee,#1769e0);
    color: #fff;
    box-shadow: 0 3px 0 #0e4da9, 0 6px 10px rgba(23,105,224,.20);
  }
  body.mobile-calculator-shell #calculatorDrawer {
    max-height: 38dvh;
    overflow: auto;
    margin-top: 7px;
    background: #eef3f8;
  }

  body.mobile-calculator-shell:not([data-active-view="calculator"]) .bottom-nav {
    width: calc(100% - 12px);
    bottom: max(5px,env(safe-area-inset-bottom));
  }
  body.mobile-calculator-shell:not([data-active-view="calculator"]) .app-main {
    padding-bottom: 86px;
  }
  body.mobile-calculator-shell .modal-backdrop { padding: 8px; align-items: end; }
  body.mobile-calculator-shell .modal-panel {
    width: 100%;
    max-height: min(86dvh,760px);
    border-radius: 20px 20px 8px 8px;
  }
  body.mobile-calculator-shell .mobile-workspace-controls,
  body.mobile-calculator-shell .mobile-workspace-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 370px) {
  body.mobile-calculator-shell .smartview-calculator { padding: 7px; border-radius: 18px; }
  body.mobile-calculator-shell .quick-strip button { font-size: 7.8px; }
  body.mobile-calculator-shell .keypad-six .key { min-height: 39px; font-size: 11px; }
  body.mobile-calculator-shell .keypad-six .key.number { font-size: 14px; }
}

/* GraphCore v1.5.0 desktop calculator-first redesign */
.workspace-dock { min-width: 0; }
.workspace-dock-panels { display: grid; gap: 10px; }
.cursor-control-label { color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }

@media (min-width: 901px) {
  :root { --header-h: 64px; }
  .app-header { height: var(--header-h); padding: 0 18px; }
  .app-main {
    width: min(1260px, 100%);
    padding: 12px 14px 28px;
  }
  #calculatorView .smartview-layout {
    display: grid;
    grid-template-columns: minmax(650px, 880px) minmax(270px, 330px);
    gap: 14px;
    align-items: start;
    justify-content: center;
  }
  #calculatorView .smartview-calculator {
    grid-column: 1;
    width: 100%;
    min-width: 0;
    min-height: calc(100vh - var(--header-h) - 24px);
    padding: clamp(14px, 1.5vw, 20px);
    border: 1px solid #aeb9c8;
    border-radius: 28px;
    background:
      linear-gradient(145deg, rgba(255,255,255,.58), rgba(211,221,233,.62)),
      linear-gradient(180deg, #e9eef4, #dbe3ec);
    box-shadow:
      0 18px 42px rgba(23,32,51,.15),
      inset 0 1px 0 rgba(255,255,255,.92),
      inset 0 -1px 0 rgba(83,102,126,.14);
  }
  #calculatorView .workspace-dock {
    grid-column: 2;
    position: sticky;
    top: calc(var(--header-h) + 10px);
    display: grid;
    gap: 10px;
    max-height: calc(100vh - var(--header-h) - 20px);
    overflow: auto;
    padding: 1px 3px 8px 1px;
    scrollbar-width: thin;
  }
  #calculatorView .workspace-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 9px;
    margin: 0;
    padding: 11px;
    border-radius: 14px;
  }
  #calculatorView .workspace-identity {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
  }
  #calculatorView .workspace-identity input,
  #calculatorView .workspace-appearance select {
    min-height: 35px;
    padding: 6px 8px;
    font-size: 11px;
  }
  #calculatorView .workspace-identity label,
  #calculatorView .workspace-appearance label {
    gap: 3px;
    font-size: 9px;
  }
  #calculatorView .workspace-appearance {
    grid-template-columns: repeat(2, minmax(0,1fr));
    min-width: 0;
    gap: 6px;
  }
  #calculatorView .workspace-security-status {
    min-height: 25px;
    padding: 3px 7px;
    font-size: 8px;
  }
  #calculatorView .workspace-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 6px;
  }
  #calculatorView .workspace-actions button {
    width: 100%;
    min-height: 34px;
    padding: 6px 7px;
    font-size: 10px;
  }
  #calculatorView .workspace-rail {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    max-height: none;
    overflow: visible;
    padding: 0;
  }
  #calculatorView .workspace-left,
  #calculatorView .workspace-right { grid-template-columns: 1fr; }
  #calculatorView .bento-panel > summary {
    min-height: 46px;
    padding: 8px 10px;
  }
  #calculatorView .bento-panel > summary strong { font-size: 11px; }
  #calculatorView .bento-panel > summary small { font-size: 9px; }
  #calculatorView .bento-panel .panel-body { padding: 9px; }
  #calculatorView .panel-badge,
  #calculatorView .panel-symbol { min-width: 24px; min-height: 22px; font-size: 9px; }
  #calculatorView .work-timeline { max-height: 145px; }
  #calculatorView .assistant-output { min-height: 68px; max-height: 130px; }
  #calculatorView #graphPreviewCanvas { min-height: 130px; max-height: 150px; }

  #calculatorView .calculator-topline {
    margin: 0 4px 7px;
    font-size: 10px;
  }
  #calculatorView .display-panel {
    margin-bottom: 8px;
    padding: 13px 15px 10px;
    border: 2px solid #aec0d7;
    border-radius: 15px;
  }
  #calculatorView #expressionInput {
    min-height: 68px;
    max-height: 82px;
    resize: none;
    padding: 9px 0 4px;
    font-size: clamp(25px, 2.7vw, 34px);
  }
  #calculatorView .result-row { min-height: 39px; padding-top: 7px; }
  #calculatorView #resultOutput { font-size: clamp(24px, 2.5vw, 31px); }
  #calculatorView .quick-strip,
  #calculatorView .memory-row {
    grid-template-columns: repeat(6, minmax(0,1fr));
    gap: 6px;
    margin-bottom: 7px;
  }
  #calculatorView .quick-strip button,
  #calculatorView .memory-row button {
    min-height: 34px;
    padding: 5px 4px;
    font-size: 10px;
  }
  #calculatorView .keypad-six {
    grid-template-columns: repeat(6, minmax(0,1fr));
    gap: clamp(5px, .65vw, 8px);
  }
  #calculatorView .keypad-six .key {
    min-height: clamp(45px, 5.35vh, 56px);
    padding: 5px 3px;
    border-radius: 10px;
    font-size: clamp(13px, 1.2vw, 17px);
    box-shadow: 0 3px 0 rgba(105,120,140,.18), 0 5px 9px rgba(23,32,51,.06);
  }
  #calculatorView .keypad-six .key.number { font-size: clamp(16px, 1.45vw, 20px); }
  #calculatorView .keypad-six .key.operator { font-size: clamp(19px, 1.8vw, 24px); }
  #calculatorView .keypad-six .key:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 rgba(105,120,140,.15);
  }
  #calculatorView .mobile-cursor-controls { display: none !important; }
  #calculatorView .mobile-calculator-tabs { display: none !important; }
  .workspace-focus #calculatorView .workspace-dock { display: none; }
  .workspace-focus #calculatorView .smartview-layout {
    grid-template-columns: minmax(650px, 900px);
  }
}

@media (min-width: 901px) and (max-height: 760px) {
  #calculatorView .smartview-calculator { padding: 11px 14px; }
  #calculatorView .display-panel { padding: 9px 13px 7px; }
  #calculatorView #expressionInput { min-height: 54px; max-height: 64px; }
  #calculatorView .result-row { min-height: 33px; }
  #calculatorView .quick-strip button,
  #calculatorView .memory-row button { min-height: 29px; }
  #calculatorView .keypad-six .key { min-height: 39px; }
}

@media (max-width: 900px) {
  #calculatorView .workspace-dock { display: contents; }
  #calculatorView .workspace-toolbar { order: 0; }
  #calculatorView .workspace-left { order: 2; }
  #calculatorView .smartview-calculator { order: 1; }
  #calculatorView .workspace-right { order: 3; }
  .mobile-cursor-controls .cursor-control-label { display: inline-flex; align-items: center; margin-right: 2px; }
}

/* GraphCore v1.6.0 balanced SmartView composition */
@media (min-width: 901px) {
  :root { --header-h: 64px; }
  .app-main {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 6px 10px 22px;
  }
  #calculatorView { margin: 0; }
  #calculatorView .smartview-layout {
    display: grid;
    grid-template-columns: minmax(190px, 280px) minmax(570px, 760px) minmax(190px, 280px);
    gap: clamp(8px, 1vw, 14px);
    align-items: start;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
  }
  #calculatorView .workspace-side {
    position: sticky;
    top: calc(var(--header-h) + 6px);
    display: grid;
    align-content: start;
    gap: 9px;
    min-width: 0;
    max-height: calc(100vh - var(--header-h) - 12px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 2px 8px;
    scrollbar-width: thin;
  }
  #calculatorView .workspace-side-left { grid-column: 1; }
  #calculatorView .smartview-calculator {
    grid-column: 2;
    grid-row: 1;
    width: min(100%, 760px);
    margin: 0 auto;
    min-height: calc(100vh - var(--header-h) - 12px);
    padding: clamp(12px, 1.25vw, 18px);
    border-radius: 26px;
  }
  #calculatorView .workspace-side-right { grid-column: 3; }
  #calculatorView .workspace-toolbar,
  #calculatorView .workspace-rail {
    position: static;
    width: 100%;
    max-height: none;
    overflow: visible;
    margin: 0;
  }
  #calculatorView .workspace-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
    border-radius: 13px;
  }
  #calculatorView .workspace-identity { grid-template-columns: 1fr; gap: 6px; }
  #calculatorView .workspace-appearance { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  #calculatorView .workspace-actions { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  #calculatorView .workspace-actions button { width: 100%; }
  #calculatorView .workspace-left,
  #calculatorView .workspace-right {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 0;
  }
  #calculatorView .bento-panel > summary { min-height: 44px; padding: 8px 9px; }
  #calculatorView .bento-panel > summary strong { font-size: 11px; }
  #calculatorView .bento-panel > summary small { font-size: 8.5px; }
  #calculatorView .bento-panel .panel-body { padding: 9px; }
  #calculatorView #graphPreviewCanvas { min-height: 125px; max-height: 145px; }
  #calculatorView .work-timeline { max-height: 140px; }
  #calculatorView .assistant-output { min-height: 64px; max-height: 125px; }
  #calculatorView .mobile-cursor-controls,
  #calculatorView .mobile-calculator-tabs { display: none !important; }
  .workspace-focus #calculatorView .workspace-side { display: none; }
  .workspace-focus #calculatorView .smartview-layout { grid-template-columns: minmax(590px, 780px); }
  .workspace-focus #calculatorView .smartview-calculator { grid-column: 1; }
}

@media (min-width: 901px) and (max-width: 1120px) {
  #calculatorView .smartview-layout {
    grid-template-columns: minmax(170px, 210px) minmax(550px, 680px) minmax(170px, 210px);
    gap: 8px;
  }
  #calculatorView .workspace-side { font-size: 10px; }
  #calculatorView .workspace-toolbar { padding: 8px; }
  #calculatorView .workspace-actions button { min-height: 31px; padding: 5px; font-size: 9px; }
  #calculatorView .workspace-identity input,
  #calculatorView .workspace-appearance select { min-height: 32px; font-size: 10px; }
}

/* Mobile remains calculator-dominant; controls only appear through Work. */
@media (max-width: 900px) {
  body.mobile-calculator-shell[data-active-view="calculator"] .workspace-side,
  body.mobile-calculator-shell[data-active-view="calculator"] .workspace-toolbar,
  body.mobile-calculator-shell[data-active-view="calculator"] .workspace-left,
  body.mobile-calculator-shell[data-active-view="calculator"] .workspace-right {
    display: none !important;
  }
  body.mobile-calculator-shell[data-active-view="calculator"] .smartview-layout {
    display: block;
    width: 100%;
    margin: 0;
  }
  body.mobile-calculator-shell[data-active-view="calculator"] .smartview-calculator {
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: calc(100dvh - var(--header-h) - 6px);
  }
  body.mobile-calculator-shell[data-active-view="calculator"] .app-main {
    padding: 3px 4px 6px;
  }
  body.mobile-calculator-shell[data-active-view="calculator"] .calculator-topline {
    margin-top: 0;
  }
}

@media (max-width: 900px) {
  #calculatorView .workspace-side { display: none !important; }
  #calculatorView .smartview-calculator {
    position: relative;
    z-index: 1;
    box-shadow: 0 8px 24px rgba(23,32,51,.12);
  }
}

/* GraphCore v1.7.0: compact balanced layout, Alpha key labels, and quick tools */
#keypad .key[data-alpha] {
  position: relative;
  padding-top: 13px;
}
#keypad .key[data-alpha]::after {
  content: attr(data-alpha);
  position: absolute;
  top: 4px;
  right: 7px;
  color: var(--teal);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .03em;
  opacity: .82;
  pointer-events: none;
}
body.alpha-mode #keypad .key[data-alpha] {
  border-color: #42b7b0;
  box-shadow: inset 0 0 0 1px rgba(15,143,138,.18), 0 5px 12px rgba(15,143,138,.10);
}
body.alpha-mode #keypad .key[data-alpha]::after {
  color: #08736e;
  font-size: 11px;
  opacity: 1;
}
.quick-strip [data-action="alpha"] {
  color: var(--teal);
  background: var(--accent-teal-soft, #e8fbf8);
  border-color: #bfe7e3;
}
.quick-strip [data-action="alpha"].alpha-active {
  color: white;
  background: linear-gradient(180deg, #18a49e, #0f8f8a);
  border-color: #0f817c;
  box-shadow: 0 7px 15px rgba(15,143,138,.20);
}
.quick-strip [data-action="polynomial"] {
  color: #6845dc;
  background: #f2efff;
  border-color: #d9d0ff;
}
.quick-strip [data-action="conversion"] {
  color: #a35a00;
  background: #fff6e5;
  border-color: #f2d49d;
}
.work-summary {
  padding: 8px 9px;
  border: 1px solid #f2cad5;
  border-radius: 9px;
  background: linear-gradient(180deg, #fff8fa, #fff2f6);
  color: #7d3a51;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.4;
}
.quick-tool-modal { display: grid; gap: 13px; }
.quick-tool-label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 800; }
.quick-tool-label input,
.conversion-grid input,
.conversion-grid select {
  width: 100%;
  min-height: 43px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-family: "SFMono-Regular", Consolas, monospace;
}
.conversion-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.conversion-grid label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 800; }
.modal-number-pad {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 6px;
}
.modal-number-pad button {
  min-height: 39px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: linear-gradient(180deg,#fff,#f4f7fb);
  color: var(--text);
  font-weight: 800;
}
.modal-number-pad button:hover { background: var(--primary-soft); border-color: #bdd4f5; }
.modal-number-pad .modal-pad-clear { color: var(--danger); background: var(--danger-soft); }
.quick-tool-output { min-height: 68px; padding: 11px; border-radius: 10px; background: #f7faff; border: 1px solid #d9e5f5; white-space: pre-wrap; }
.quick-tool-output.error { color: var(--danger); background: var(--danger-soft); border-color: #efc6c6; }

@media (min-width: 901px) {
  .app-main { padding-top: 3px; }
  #calculatorView .smartview-layout { align-items: start; }
  #calculatorView .smartview-calculator {
    position: sticky;
    top: calc(var(--header-h) + 3px);
    min-height: 0 !important;
    height: auto;
    align-self: start;
    padding-bottom: 16px;
  }
  #calculatorView .workspace-side { top: calc(var(--header-h) + 3px); }
  #calculatorView .calculator-topline { margin-top: 0; }
  #calculatorView .keypad-six .key { min-height: clamp(44px, 5.1vh, 54px); }
  #calculatorView .work-timeline { max-height: 115px; }
  #calculatorView .history-list { max-height: 210px; overflow: auto; }
  #calculatorView #functionLibraryPanel:not([open]),
  #calculatorView #statsPreviewPanel:not([open]),
  #calculatorView #learningAssistantPanel:not([open]),
  #calculatorView #variablesPanel:not([open]) { box-shadow: 0 5px 13px rgba(29,52,84,.05); }
}

@media (max-width: 900px) {
  #keypad .key[data-alpha]::after { top: 3px; right: 5px; font-size: 8px; }
  body.alpha-mode #keypad .key[data-alpha]::after { font-size: 10px; }
  .conversion-grid { grid-template-columns: 1fr 1fr; }
  .modal-number-pad { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .quick-tool-modal .button-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .quick-tool-modal .button-row button { width: 100%; }
}


/* GraphCore 1.8 help, answer-flow, and scrollable tape */
.quick-strip { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.calculation-tape { max-height: 92px; overflow-y: auto; display: grid; gap: 4px; margin: 4px 0 8px; padding: 4px 2px 6px; border-bottom: 1px solid #d8e6f6; scrollbar-width: thin; }
.calculation-tape.is-empty { display: none; }
.tape-entry { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; width: 100%; padding: 5px 7px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); text-align: left; font-family: "SFMono-Regular",Consolas,monospace; font-size: 11px; }
.tape-entry:hover { background: rgba(23,105,224,.07); }
.tape-entry span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tape-entry strong { color: var(--primary); font-weight: 750; }
.help-menu { display: grid; gap: 14px; }
.help-intro { margin: 0; color: var(--muted); }
.help-topic-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.help-topic { display: grid; align-content: start; gap: 9px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(180deg,#fff,#f8fbff); }
.help-topic h3,.help-topic p { margin: 0; }
.help-topic h3 { font-size: 15px; }
.help-topic p { color: var(--muted); font-size: 12px; line-height: 1.5; }
.help-topic code { display: block; padding: 9px; border-radius: 8px; background: #eef5ff; color: #24466f; white-space: normal; font-size: 11px; line-height: 1.45; }
@media (max-width: 900px){ .quick-strip{grid-template-columns:repeat(4,minmax(0,1fr));}.help-topic-grid{grid-template-columns:1fr;} .calculation-tape{max-height:64px;} }


/* GraphCore 1.8.1 prioritized Tools workspace */
.tools-title { align-items: center; }
.tool-launcher-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.tool-launcher {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr);
  grid-template-rows: auto auto;
  gap: 8px 11px;
  align-items: start;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: linear-gradient(180deg,#fff,#f8fbff);
  box-shadow: var(--shadow-soft);
}
.tool-launcher > div { min-width: 0; }
.tool-launcher h3 { margin: 0; font-size: 15px; }
.tool-launcher p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.tool-launcher > button { grid-column: 1 / -1; width: 100%; min-height: 39px; }
.tool-launcher-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: var(--primary-soft);
  color: var(--primary);
  font-family: "SFMono-Regular",Consolas,monospace;
  font-weight: 850;
  font-size: 14px;
}
.solver-launcher { border-top: 4px solid #7c5cff; }
.solver-launcher .tool-launcher-icon { background: #f1edff; color: #6845dc; }
.system-launcher { border-top: 4px solid #1769e0; }
.conversion-launcher { border-top: 4px solid #f59e0b; }
.conversion-launcher .tool-launcher-icon { background: #fff5df; color: #9a6200; }
.matrix-launcher { border-top: 4px solid #0f8f8a; }
.matrix-launcher .tool-launcher-icon { background: #e8fbf8; color: #0f756f; }
.probability-launcher { border-top: 4px solid #16a34a; }
.probability-launcher .tool-launcher-icon { background: #edfdf3; color: #16753b; }
.help-launcher { border-top: 4px solid #0891b2; }
.help-launcher .tool-launcher-icon { background: #ecfeff; color: #0a7890; }
.prioritized-tools { gap: 11px; }
.prioritized-tools details.tool-card > summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  font-size: 15px;
}
.prioritized-tools details.tool-card > summary::after { margin-left: auto; }
.prioritized-tools .priority-tool { border-top: 4px solid #7c5cff; }
.prioritized-tools .priority-tool > summary { background: linear-gradient(180deg,#fbfaff,#f3efff); }
.prioritized-tools .details-body { padding: 15px; }
.tool-hint { margin: 8px 0 10px; color: var(--muted); font-size: 11px; line-height: 1.45; }
#settingsTool .shortcut-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
#settingsTool .shortcut-list div { min-width: 0; }

@media (max-width: 1050px) {
  .tool-launcher-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .tools-title { align-items: stretch; }
  .tools-title .secondary-button { width: 100%; }
  .tool-launcher-grid { grid-template-columns: 1fr; }
  .tool-launcher { grid-template-columns: 44px minmax(0,1fr); padding: 13px; }
  .tool-launcher-icon { width: 44px; height: 44px; }
  #settingsTool .shortcut-list { grid-template-columns: 1fr; }
}

/* GraphCore v1.9.0 focused tools and guided probability/statistics */
.quick-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.quick-strip button {
  white-space: nowrap;
}

.focused-tool-workspace {
  min-width: 0;
  min-height: min(790px, calc(100vh - var(--header-h) - 34px));
  overflow: hidden;
  border: 1px solid #cbd8e8;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  box-shadow: 0 24px 54px rgba(29, 52, 84, 0.14);
}
.focused-tool-header {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
}
.focused-tool-header h2 {
  margin: 3px 0 0;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -.03em;
}
.focused-tool-header p {
  max-width: 660px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.focused-tool-eyebrow {
  color: var(--primary);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.focused-tool-content {
  max-height: calc(100vh - var(--header-h) - 130px);
  overflow: auto;
  padding: 18px;
  scrollbar-width: thin;
}
.focused-tool-content > .focused-portal-content,
.focused-tool-content > .quick-tool-modal {
  width: 100%;
}
.focused-tool-content > section.focused-portal-content {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
}
.focused-tool-content > .details-body.focused-portal-content {
  padding: 0;
}
.focused-tool-content .stats-layout {
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.focused-tool-content .stats-layout .full-span {
  grid-column: 1 / -1;
}

.probability-section {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}
.probability-section:nth-of-type(1) { border-top: 4px solid #7c5cff; }
.probability-section:nth-of-type(2) { border-top: 4px solid #1769e0; }
.probability-section:nth-of-type(3) { border-top: 4px solid #0f8f8a; }
.probability-section:nth-of-type(4) { border-top: 4px solid #f59e0b; }
.choice-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 9px;
  margin: 10px 0;
}
.guided-output,
.analysis-output {
  white-space: pre-wrap;
  line-height: 1.55;
}

.system-equation-grid {
  display: grid;
  gap: 12px;
  margin: 12px 0;
}
.system-equation-row {
  display: grid;
  grid-template-columns: auto repeat(2, minmax(78px,1fr) auto) minmax(88px,1fr);
  align-items: end;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f8fbff;
}
.system-equation-row:has([data-system-col="2"]):has([data-system-col="3"]) {
  grid-template-columns: auto repeat(3, minmax(70px,1fr) auto) minmax(88px,1fr);
}
.system-equation-row > strong {
  align-self: center;
  color: var(--primary);
  font-size: 12px;
}
.system-equation-row label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}
.system-equation-row input {
  width: 100%;
  min-height: 42px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
  color: var(--text);
  text-align: center;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 15px;
}
.equation-symbol {
  align-self: end;
  padding-bottom: 10px;
  color: var(--primary);
  font-size: 18px;
  font-weight: 800;
}
.advanced-entry {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: 11px;
  background: #fbfcfe;
}
.advanced-entry summary {
  cursor: pointer;
  color: var(--primary);
  font-weight: 750;
}
.advanced-entry label {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.advanced-entry textarea {
  min-height: 100px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-family: "SFMono-Regular", Consolas, monospace;
}

@media (max-width: 1180px) {
  .focused-tool-content .stats-layout { grid-template-columns: 1fr; }
  .focused-tool-content .stats-layout .full-span { grid-column: auto; }
  .system-equation-row,
  .system-equation-row:has([data-system-col="2"]):has([data-system-col="3"]) {
    grid-template-columns: 1fr 1fr;
  }
  .system-equation-row > strong { grid-column: 1 / -1; }
  .equation-symbol { display: none; }
}

@media (max-width: 900px) {
  .focused-tool-workspace {
    min-height: calc(100dvh - var(--header-h) - 14px);
    border-radius: 16px;
  }
  .focused-tool-header {
    padding: 13px;
  }
  .focused-tool-header .secondary-button {
    min-width: 118px;
    padding-inline: 10px;
  }
  .focused-tool-content {
    max-height: calc(100dvh - var(--header-h) - 105px);
    padding: 12px;
  }
}

@media (max-width: 620px) {
  .quick-strip { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 5px; }
  .quick-strip button { min-height: 35px; padding: 5px 3px; font-size: 10px; }
  .focused-tool-header { align-items: stretch; flex-direction: column; gap: 10px; }
  .focused-tool-header .secondary-button { width: 100%; }
  .choice-actions { grid-template-columns: 1fr; }
  .probability-section { padding: 12px; }
  .system-equation-row,
  .system-equation-row:has([data-system-col="2"]):has([data-system-col="3"]) { grid-template-columns: 1fr; }
}

/* Keep the complete calculator visible on phone screens after adding focused tools. */
@media (max-width: 620px) {
  #calculatorView .calculator-card { padding: 8px; }
  #calculatorView .display-panel { padding: 10px; margin-bottom: 8px; }
  #calculatorView #expressionInput { min-height: 58px; font-size: 21px; line-height: 1.25; padding: 8px 0 4px; }
  #calculatorView .result-row { min-height: 34px; padding-top: 6px; }
  #calculatorView #resultOutput { font-size: 24px; }
  #calculatorView .quick-strip,
  #calculatorView .memory-row {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  #calculatorView .quick-strip::-webkit-scrollbar,
  #calculatorView .memory-row::-webkit-scrollbar { display: none; }
  #calculatorView .quick-strip button {
    flex: 0 0 67px;
    min-width: 67px;
    min-height: 34px;
    scroll-snap-align: start;
  }
  #calculatorView .memory-row button {
    flex: 0 0 54px;
    min-width: 54px;
    min-height: 34px;
    scroll-snap-align: start;
  }
  #calculatorView .keypad { gap: 4px; }
  #calculatorView .key { min-height: 42px; border-radius: 9px; font-size: 14px; }
  #calculatorView .key.operator { font-size: 18px; }
}
.focused-jump-bar {
  position: sticky;
  top: -18px;
  z-index: 7;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  margin: -18px -18px 16px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(247,250,255,.96);
  backdrop-filter: blur(12px);
  scrollbar-width: none;
}
.focused-jump-bar::-webkit-scrollbar { display: none; }
.focused-jump-bar button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid #cddbef;
  border-radius: 999px;
  background: #fff;
  color: #36506f;
  font-size: 11px;
  font-weight: 750;
}
.focused-jump-bar button:hover { background: var(--primary-soft); color: var(--primary); border-color: #b7d1f6; }
@media (max-width: 900px) {
  .focused-jump-bar { top: -12px; margin: -12px -12px 14px; padding: 8px 12px; }
}

/* GraphCore v1.9.1 compact tool hub and calculator-style nCr/nPr */
.tool-source-templates { display: none !important; }
.tool-hub {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 16px;
}
.tool-hub-group {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: var(--shadow-soft);
}
.tool-hub-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
}
.tool-hub-heading-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 11px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 900;
  font-family: "SFMono-Regular", Consolas, monospace;
}
.tool-hub-heading h3 { margin: 0; font-size: 15px; }
.tool-hub-heading p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.tool-bento-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.tool-bento-card {
  width: 100%;
  min-width: 0;
  min-height: 76px;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  text-align: left;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 13px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 4px 12px rgba(29,52,84,.04);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease;
}
.tool-bento-card:hover {
  transform: translateY(-1px);
  border-color: #b9cce6;
  background: #f8fbff;
  box-shadow: 0 10px 20px rgba(29,52,84,.09);
}
.tool-bento-card:active { transform: translateY(0); }
.tool-bento-card > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.tool-bento-card strong { font-size: 13px; line-height: 1.2; }
.tool-bento-card small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.tool-bento-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--primary-soft);
  color: var(--primary);
  font: 850 12px/1 "SFMono-Regular", Consolas, monospace;
}
.tool-bento-arrow { color: var(--muted); font-size: 24px; line-height: 1; }
.tool-bento-card.accent-violet { border-left-color: #7c5cff; }
.tool-bento-card.accent-violet .tool-bento-icon { background: #f1edff; color: #6845dc; }
.tool-bento-card.accent-cyan { border-left-color: #0891b2; }
.tool-bento-card.accent-cyan .tool-bento-icon { background: #ecfeff; color: #0a7890; }
.tool-bento-card.accent-teal { border-left-color: #0f8f8a; }
.tool-bento-card.accent-teal .tool-bento-icon { background: #e8fbf8; color: #0f756f; }
.tool-bento-card.accent-green { border-left-color: #16a34a; }
.tool-bento-card.accent-green .tool-bento-icon { background: #edfdf3; color: #16753b; }
.tool-bento-card.accent-rose { border-left-color: #ef476f; }
.tool-bento-card.accent-rose .tool-bento-icon { background: #fff0f4; color: #cf315a; }
.tool-bento-card.accent-amber { border-left-color: #f59e0b; }
.tool-bento-card.accent-amber .tool-bento-icon { background: #fff5df; color: #9a6200; }
.tool-bento-card.accent-blue { border-left-color: #1769e0; }

.counting-inline {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) minmax(150px, .9fr) minmax(92px, 1fr);
  gap: 12px;
  align-items: stretch;
  margin: 10px 0;
}
.counting-operand {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 7px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #f8fbff;
}
.counting-operand > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--primary-soft);
  color: var(--primary);
  font: 900 15px/1 "SFMono-Regular", Consolas, monospace;
}
.counting-operand input {
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  text-align: center;
  font: 800 25px/1 "SFMono-Regular", Consolas, monospace;
}
.counting-choice { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; }
.counting-choice button {
  min-height: 58px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  padding: 8px;
}
.counting-choice button strong { font: 850 18px/1 "SFMono-Regular", Consolas, monospace; }
.counting-choice button small { font-size: 9px; font-weight: 650; opacity: .82; }
.counting-sequence-hint { text-align: center; }

@media (max-width: 760px) {
  .tool-hub-group { padding: 11px; }
  .tool-bento-grid { grid-template-columns: 1fr; }
  .tool-bento-card { min-height: 68px; }
}
@media (max-width: 560px) {
  .counting-inline { grid-template-columns: minmax(0,1fr) minmax(112px,.8fr) minmax(0,1fr); gap: 7px; }
  .counting-operand { padding: 8px; }
  .counting-operand input { min-height: 48px; font-size: 21px; }
  .counting-choice button { min-height: 51px; }
  .counting-choice button small { display: none; }
}


/* GraphCore 1.9.2 search and landing content */
.seo-overview {
  width: min(1200px, calc(100% - 32px));
  margin: 34px auto 96px;
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid var(--border);
  border-radius: 24px;
  background: linear-gradient(145deg, #ffffff, #f4f8ff);
  box-shadow: var(--shadow);
}
.seo-overview-inner { max-width: 1050px; margin: 0 auto; }
.seo-kicker { margin: 0 0 8px; color: var(--primary); font-size: 12px; font-weight: 850; letter-spacing: .1em; }
.seo-overview h2 { margin: 0; max-width: 850px; font-size: clamp(25px, 4vw, 42px); line-height: 1.08; letter-spacing: -.04em; }
.seo-overview > div > p:not(.seo-kicker) { max-width: 900px; color: var(--muted); line-height: 1.7; }
.seo-tool-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.seo-tool-links a { display: grid; gap: 6px; min-height: 128px; padding: 17px; border: 1px solid #d5e1f0; border-radius: 15px; background: #fff; color: var(--text); text-decoration: none; box-shadow: var(--shadow-soft); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.seo-tool-links a:hover { transform: translateY(-2px); border-color: #9fc2f5; box-shadow: 0 12px 24px rgba(29,52,84,.10); }
.seo-tool-links strong { color: var(--primary); font-size: 15px; }
.seo-tool-links span { color: var(--muted); font-size: 12px; line-height: 1.55; }
.seo-faq { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); }
.seo-faq h3 { margin: 0 0 12px; }
.seo-faq details { border: 1px solid var(--border); border-radius: 12px; background: #fff; margin-bottom: 9px; }
.seo-faq summary { cursor: pointer; padding: 14px 16px; font-weight: 750; }
.seo-faq p { margin: 0; padding: 0 16px 16px; color: var(--muted); line-height: 1.65; }
@media (max-width: 960px) { .seo-tool-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .seo-overview { width: calc(100% - 20px); margin: 22px auto 88px; padding: 18px; border-radius: 18px; } .seo-tool-links { grid-template-columns: 1fr; } .seo-tool-links a { min-height: auto; } }