:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #070a0f;
  --body: #11161f;
  --panel: #1a2230;
  --key: #263141;
  --key-top: #344256;
  --ink: #edf5fb;
  --muted: #91a0b3;
  --cyan: #42d3ff;
  --yellow: #ffd94a;
  --green: #78e08f;
  --screen: #c8e0d4;
  --screen-ink: #0a2520;
  --danger: #ff6373;
}
.high-contrast { --screen: #e8fff2; --screen-ink: #001a12; --key: #192332; --key-top: #42516a; --muted: #c1cfdd; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); overscroll-behavior: none; }
body { display: grid; place-items: center; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.calculator-fullscreen { background: var(--bg); }
.calculator-fullscreen body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.calculator-fullscreen .calculator { max-width: none; max-height: none; margin: auto; }
button, input, textarea, select { font: inherit; }
button { touch-action: manipulation; }
.calculator { width: min(100vw, 560px); height: 100dvh; max-height: 100%; display: grid; grid-template-rows: 42px minmax(180px, 34vh) 34px 1fr; background: linear-gradient(155deg, #18202d, #0e131b 65%); color: var(--ink); border-inline: 1px solid #253143; overflow: hidden; }
.topbar { display: flex; align-items: center; gap: 10px; padding: 6px 10px; min-height: 0; }
.brand { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .14em; color: #b6c3d2; }
.brand-mark { width: 31px; height: 27px; display: grid; place-items: center; background: var(--cyan); color: #061019; font-size: 16px; letter-spacing: -.08em; clip-path: polygon(10% 0,100% 0,90% 100%,0 100%); }
.brand-mark sup { font-size: 8px; }
.status { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; color: var(--muted); font: 10px ui-monospace, monospace; }
.icon-button { width: 31px; height: 30px; border: 0; border-radius: 5px; background: #263141; color: var(--ink); font-size: 17px; }
.screen-shell { margin: 0 10px 8px; min-height: 0; border: 7px solid #232d3a; border-radius: 8px 8px 4px 4px; background: var(--screen); box-shadow: inset 0 0 22px #1f4a3630, 0 5px 12px #0008; display: grid; grid-template-rows: 20px 1fr auto; overflow: hidden; }
.screen-status { display: flex; justify-content: space-between; align-items: center; padding: 2px 6px; border-bottom: 1px solid #718f82; color: #19372f; font: 700 10px ui-monospace, monospace; }
#battery-indicator { color: #287545; letter-spacing: -1px; }
.screen { position: relative; min-height: 0; overflow: auto; color: var(--screen-ink); background: linear-gradient(#cfe4d9, #bdd8ca); font: 16px/1.32 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; scrollbar-width: thin; scrollbar-color: #6a8f80 transparent; outline: none; }
.softkeys { min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 1px solid #79998b; background: #adcbbd; }
.softkey { min-width: 0; height: 25px; padding: 2px 4px; border: 0; border-right: 1px solid #789488; background: transparent; color: #17382f; font: 700 10px ui-monospace, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.softkey:active { background: #17382f; color: #d6eee2; }
.home-screen { min-height: 100%; display: flex; flex-direction: column; padding: 8px; }
.history { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.history-row { display: grid; gap: 1px; }
.history-expression { overflow-wrap: anywhere; }
.history-result { text-align: right; font-weight: 700; overflow-wrap: anywhere; }
.entry-line { display: grid; grid-template-columns: auto 1fr auto; align-items: start; margin-top: 5px; border-top: 1px dotted #698b7b; padding-top: 5px; }
.prompt { padding-right: 4px; font-weight: 800; }
.entry-input { min-height: 22px; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; caret-color: #071b16; }
.cursor { display: inline-block; width: 9px; height: 18px; background: #143d31; vertical-align: -3px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.keypad { min-height: 0; display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: minmax(32px, 1fr); gap: clamp(3px, .8vh, 7px) 6px; padding: 5px 10px max(8px, env(safe-area-inset-bottom)); overflow: hidden; }
.nav-pad { display: grid; grid-template-columns: repeat(5,1fr); gap: 5px; padding: 1px 10px 3px; }
.nav-key { min-width: 0; border: 0; border-bottom: 2px solid #080c12; border-radius: 4px; background: #303d50; color: #dce9f4; font-weight: 800; }
.nav-key.pressed { transform: translateY(1px); border-bottom-width: 1px; filter: brightness(1.25); }
.nav-enter { color: var(--cyan); }
.key { position: relative; min-width: 0; min-height: 0; border: 0; border-radius: 5px; padding: 11px 3px 3px; color: var(--ink); background: linear-gradient(var(--key-top), var(--key)); border-bottom: 3px solid #0a0e14; box-shadow: 0 1px 0 #526078 inset, 0 2px 3px #0009; font-weight: 700; font-size: clamp(12px, 3.6vw, 17px); line-height: 1; overflow: visible; user-select: none; }
.key::before { content: attr(data-second); position: absolute; top: 2px; left: 4px; color: var(--cyan); font-size: clamp(6px, 1.8vw, 9px); line-height: 1; }
.key::after { content: attr(data-alpha); position: absolute; top: 2px; right: 4px; color: var(--green); font-size: clamp(6px, 1.8vw, 9px); line-height: 1; }
.key:active, .key.pressed { transform: translateY(2px); border-bottom-width: 1px; filter: brightness(1.25); }
.key.function { background: linear-gradient(#dbe3e8, #aeb9c1); color: #111922; box-shadow: 0 1px 0 #fff inset, 0 2px 3px #0009; }
.key.second { background: linear-gradient(#59dfff, #1a9dc8); color: #07131a; }
.key.alpha { background: linear-gradient(#89e99c, #3ca85b); color: #07130b; }
.key.action { background: linear-gradient(#677488, #424d5f); }
.key.danger { background: linear-gradient(#ff8793, #bd3546); }
.key.wide-label { font-size: 11px; }
.keypad.shift-second .key::before { color: #001218; background: var(--cyan); padding: 1px 2px; }
.keypad.shift-alpha .key::after { color: #061309; background: var(--green); padding: 1px 2px; }
.menu-screen, .data-screen, .settings-screen, .editor-screen { min-height: 100%; padding: 7px; }
.screen-title { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-bottom: 4px; margin-bottom: 5px; border-bottom: 2px solid #476d5d; font-weight: 800; }
.menu-list { display: grid; gap: 2px; }
.menu-item { display: grid; grid-template-columns: 24px 1fr auto; gap: 4px; padding: 4px; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; }
.menu-item.active, .menu-item:focus { background: #245b49; color: #e3f4eb; outline: none; }
.screen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.screen-card { min-width: 0; padding: 6px; border: 1px solid #648878; background: #c2dbcf; color: inherit; text-align: left; }
.screen-card strong { display: block; margin-bottom: 2px; }
.screen-card small { display: block; color: #365c4d; }
.field-row { display: grid; grid-template-columns: minmax(70px, auto) 1fr; align-items: center; gap: 6px; margin: 4px 0; }
.screen input, .screen textarea, .screen select { width: 100%; min-width: 0; border: 1px solid #678b7b; border-radius: 0; background: #e3f0e9; color: #09271f; font: inherit; padding: 3px 4px; }
.screen textarea { resize: none; }
.screen button { cursor: pointer; }
.mini-button { border: 1px solid #456b5a; background: #dcece4; color: #10392e; padding: 3px 7px; font: 700 12px ui-monospace, monospace; }
.mini-button.primary { background: #205846; color: #e4f3ec; }
.mini-button.danger { border-color: #8d3941; color: #7a1e28; }
.function-controls { display: grid; grid-template-columns: 1fr 26px; gap: 3px; }
.style-toggle { border: 1px solid #456b5a; background: #dcece4; color: #10392e; padding: 2px; }
.graph-wrap { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; background: #f1f6f3; }
.graph-canvas { width: 100%; height: 100%; min-height: 0; touch-action: none; }
.graph-legend { display: flex; gap: 8px; min-height: 20px; padding: 2px 5px; overflow-x: auto; background: #c2dbcf; font-size: 10px; }
.graph-legend span { white-space: nowrap; }
.split-graph { grid-template-columns: 1fr minmax(110px, .75fr); grid-template-rows: 1fr auto; }
.split-graph .graph-canvas { grid-column: 1; }
.graph-split-table { grid-column: 2; overflow: auto; border-left: 1px solid #789789; background: #d2e5db; }
.split-graph .graph-legend { grid-column: 1 / -1; }
.graph-prompt, .graph-result { position: absolute; left: 5px; top: 5px; z-index: 2; max-width: calc(100% - 10px); padding: 3px 6px; background: #102d25e8; color: #e6f4ee; font: 700 10px ui-monospace,monospace; }
.graph-result { top: 27px; display: flex; flex-wrap: wrap; gap: 7px; }
.table-wrap { overflow: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th, .data-table td { border: 1px solid #789789; padding: 3px; text-align: right; }
.data-table th { position: sticky; top: 0; background: #9dc3b1; }
.data-table tr.active td, .data-table tr.active th { background: #245b49; color: #e3f4eb; }
.table-ask { position: sticky; top: 0; z-index: 2; display: flex; gap: 5px; padding: 5px; background: #b9d4c7; }
.table-ask label { display: flex; align-items: center; gap: 4px; }
.mode-options { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 7px; border: 1px solid #789789; }
.data-table input { width: 62px; text-align: right; border: 0; background: transparent; padding: 1px; }
.tabs { display: flex; gap: 1px; overflow-x: auto; margin-bottom: 5px; }
.tab { flex: 1; min-width: max-content; border: 0; background: #a8c8ba; color: #173b31; padding: 4px; font: 700 11px ui-monospace, monospace; }
.tab.active { background: #245b49; color: white; }
.editor-screen { display: grid; grid-template-rows: auto 1fr auto; }
.code-editor { height: 100%; white-space: pre; tab-size: 2; line-height: 1.35; }
.program-output { min-height: 75px; max-height: 45%; overflow: auto; margin-top: 5px; padding: 5px; background: #092820; color: #dbf2e8; white-space: pre-wrap; }
.program-graphics { width: 100%; max-height: 48%; object-fit: contain; border: 1px solid #789789; background: #f3f8f5; image-rendering: pixelated; }
.modal-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 18px; background: #000a; }
.modal { width: min(500px, 100%); max-height: 88dvh; overflow: auto; padding: 14px; background: #17212d; color: var(--ink); border: 1px solid #46576c; box-shadow: 0 18px 50px #000; }
.modal h2 { margin: 0 0 8px; font-size: 18px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 12px; }
.modal button { border: 1px solid #52657d; background: #29374a; color: white; padding: 7px 12px; }
.toast { position: fixed; z-index: 30; left: 50%; bottom: max(15px, env(safe-area-inset-bottom)); transform: translate(-50%, 20px); padding: 8px 13px; background: #eff8f3; color: #122c24; box-shadow: 0 8px 25px #0009; opacity: 0; pointer-events: none; transition: .18s ease; font-size: 13px; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.empty { display: grid; place-items: center; min-height: 130px; padding: 18px; text-align: center; color: #426757; }
.error { color: #7d1620; }
.pill { display: inline-block; padding: 1px 5px; background: #7da996; color: #0a2d23; font-size: 10px; font-weight: 800; }
.plot-config { display: grid; grid-template-columns: auto repeat(3,minmax(0,1fr)) 34px; align-items: center; gap: 4px; margin: 5px 0; padding: 4px; border: 1px solid #789789; }
.plot-config legend { font-weight: 800; }
.plot-config input[type="color"] { height: 25px; padding: 0; }
.inference-graph { width: 100%; height: 100px; margin-top: 6px; border: 1px solid #789789; background: #e2efe8; }
.sheet input { min-width: 72px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (orientation: landscape) and (max-height: 620px) {
  .calculator { width: 100vw; grid-template-columns: minmax(270px, .85fr) 1.15fr; grid-template-rows: 38px 32px 1fr; }
  .topbar { grid-column: 1 / -1; }
  .screen-shell { grid-column: 1; grid-row: 2 / 4; margin: 0 5px 5px 9px; }
  .nav-pad { grid-column: 2; grid-row: 2; padding: 0 9px 3px 5px; }
  .keypad { grid-column: 2; grid-row: 3; padding: 0 9px 5px 5px; gap: 3px 5px; }
  .key { padding-top: 9px; font-size: clamp(10px, 2.5vh, 14px); }
}

@media (min-width: 720px) and (min-height: 800px) {
  body { padding: 16px; }
  .calculator { height: min(920px, calc(100dvh - 32px)); border: 1px solid #334155; box-shadow: 0 26px 80px #000; border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }