:root {
  color-scheme: light;
  --page: #e8eef7; --surface: #f7f9fc; --surface-raised: #ffffff; --display: #eaf1fb;
  --text: #172033; --muted: #66738a; --border: #d8e0ed; --key: #ffffff; --key-hover: #edf2f8;
  --accent: #3267e3; --accent-strong: #2854bb; --accent-text: #ffffff; --operator: #e5edff;
  --danger: #c43d4d; --focus: #f0a126; --shadow: 0 24px 70px rgb(30 48 80 / 18%);
}
:root[data-appearance="dark"] {
  color-scheme: dark;
  --page: #080d17; --surface: #111827; --surface-raised: #192234; --display: #0d1525;
  --text: #f3f6fb; --muted: #a8b3c6; --border: #2a364b; --key: #202b3d; --key-hover: #2a374c;
  --accent: #6f97ff; --accent-strong: #8aa9ff; --accent-text: #071225; --operator: #25375f;
  --danger: #ff8290; --focus: #ffc45c; --shadow: 0 24px 70px rgb(0 0 0 / 45%);
}
* { box-sizing: border-box; }
html { height: 100%; min-height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--page); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
body { height: 100dvh; min-height: 100dvh; margin: 0; overflow: hidden; overscroll-behavior: none; color: var(--text); background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 40%), var(--page); }
button, select, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
:where(.app-shell, .panel) { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
:where(.app-shell, .panel) :where(input, select, textarea) { user-select: auto; -webkit-user-select: auto; -webkit-touch-callout: default; }
.app-shell { width: 100%; height: 100dvh; min-height: 0; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(8px, 1.5dvh, 12px); overflow: hidden; overscroll-behavior: none; background: var(--surface); }
.topbar, .brand, .panel-header, .result-row { display: flex; align-items: center; }
.topbar { justify-content: space-between; min-height: 48px; }
.topbar.is-editing-exit { cursor: pointer; }
.brand { gap: 10px; }
.brand h1 { font-size: 1.08rem; margin: 0; letter-spacing: -.01em; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 5px rgb(0 0 0 / 18%)); }
.icon-button { width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 14px; color: var(--text); background: var(--surface-raised); cursor: pointer; font-size: 1.25rem; }
.display { min-height: clamp(112px, 22dvh, 150px); padding: clamp(12px, 2.4dvh, 18px); border: 1px solid var(--border); border-radius: clamp(18px, 3dvh, 24px); background: var(--display); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.display-label { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.expression { display: block; width: 100%; min-height: clamp(42px, 9dvh, 58px); max-height: 28vh; margin: clamp(3px, 1.2dvh, 8px) 0 clamp(5px, 1.8dvh, 12px); padding: 4px 6px; resize: none; overflow: auto; overscroll-behavior: contain; border: 1px solid transparent; border-radius: 10px; outline: 0; color: var(--text); background: transparent; box-shadow: none; caret-color: var(--accent); text-align: right; font-size: clamp(1.25rem, 5.5vmin, 2rem); line-height: 1.25; scrollbar-width: thin; }
.expression[hidden] { display: none !important; }
.expression-view { cursor: default; white-space: pre-wrap; overflow-wrap: anywhere; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: pan-y; }
.expression-editor { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.expression.is-editing:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.expression.is-editing:focus { border-color: color-mix(in srgb, var(--accent) 34%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); outline: 0; }
.expression.is-editing:focus-visible { outline: 2px solid color-mix(in srgb, var(--focus) 65%, transparent); outline-offset: 1px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.result-row { justify-content: flex-end; gap: 8px; min-height: 48px; border-top: 1px solid var(--border); padding-top: 8px; }
.equals-sign { color: var(--muted); font-size: 1.15rem; }
.result-control { min-width: 0; max-width: 92%; padding: 3px 7px; border: 0; border-radius: 12px; color: var(--text); background: transparent; cursor: default; text-align: right; transition: background 120ms ease, transform 80ms ease; }
.result-control.has-result { cursor: pointer; }
.result-control.has-result:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.result-control.has-result:active { transform: scale(.98); }
.result { display: block; overflow-wrap: anywhere; font-size: clamp(1.8rem, 9vw, 2.8rem); font-weight: 760; letter-spacing: -.04em; }
.error-message { min-height: 24px; color: var(--danger); text-align: right; font-size: .9rem; font-weight: 650; }
.keypad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(5px, 1.2dvh, 9px); touch-action: manipulation; }
.key { min-height: clamp(46px, 9.2dvh, 72px); border: 1px solid var(--border); border-radius: clamp(14px, 2.5dvh, 18px); color: var(--text); background: var(--key); box-shadow: 0 3px 8px rgb(20 30 50 / 6%); cursor: pointer; font-size: clamp(1.05rem, 4.6vmin, 1.45rem); font-weight: 650; transition: transform 70ms ease, box-shadow 70ms ease, filter 70ms ease, background 100ms ease; }
.key[data-longpress] { touch-action: none; -webkit-touch-callout: none; }
.key:hover { background: var(--key-hover); }
.key:active, .key.is-pressed { transform: translateY(2px) scale(.97); box-shadow: 0 1px 2px rgb(20 30 50 / 8%), inset 0 2px 5px rgb(0 0 0 / 10%); filter: brightness(.96); }
.key.operator { color: var(--accent-strong); background: var(--operator); }
.key.utility { color: var(--muted); }
.key.danger { color: var(--danger); }
.hist-key { font-size: clamp(.76rem, 3.4vw, .92rem); letter-spacing: .04em; }
.percent-key { color: var(--accent-strong); }
.key.equals { grid-column: 1 / -1; min-height: clamp(46px, 8.5dvh, 54px); color: var(--accent-text); border-color: transparent; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); box-shadow: 0 9px 25px color-mix(in srgb, var(--accent) 28%, transparent); }
.key.equals:active, .key.equals.is-pressed { transform: translateY(2px) scale(.975); box-shadow: 0 2px 7px color-mix(in srgb, var(--accent) 20%, transparent), inset 0 2px 6px rgb(0 0 0 / 14%); filter: brightness(.94); }
.panel { width: min(100% - 24px, 440px); max-height: min(88dvh, 720px); margin: auto; padding: 0; color: var(--text); border: 1px solid var(--border); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.panel::backdrop { background: rgb(5 10 20 / 62%); backdrop-filter: blur(4px); }
.panel-header { position: sticky; top: 0; z-index: 1; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); background: var(--surface); }
.panel-header h2 { margin: 0; font-size: 1.2rem; }
.tablist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 8px 10px 0; border-bottom: 1px solid var(--border); }
.tablist [role="tab"] { min-height: 46px; padding: 8px 5px; border: 0; border-bottom: 3px solid transparent; color: var(--muted); background: transparent; cursor: pointer; font-size: clamp(.72rem, 3.2vw, .88rem); font-weight: 750; text-transform: uppercase; }
.tablist [role="tab"][aria-selected="true"] { color: var(--accent-strong); border-bottom-color: var(--accent); }
.tab-panels, .history-list { max-height: calc(min(88dvh, 720px) - 132px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.history-list { padding: 18px; }
.tab-panel { padding: 18px; }
.tab-panel[hidden] { display: none !important; }
.settings-content { display: grid; gap: 20px; }
.settings-content > label:not(.choice) { display: grid; gap: 8px; font-weight: 700; }
select, .secondary { min-height: 48px; padding: 0 14px; color: var(--text); border: 1px solid var(--border); border-radius: 13px; background: var(--surface-raised); }
fieldset { display: grid; gap: 10px; margin: 0; padding: 14px; border: 1px solid var(--border); border-radius: 15px; }
legend { padding: 0 6px; font-weight: 700; }
.choice { display: flex; align-items: flex-start; gap: 10px; min-height: 36px; }
.choice input { width: 20px; height: 20px; accent-color: var(--accent); flex: 0 0 auto; }
.secondary { cursor: pointer; font-weight: 650; }
.danger-text { color: var(--danger); }
.about { color: var(--muted); }
.about h3 { color: var(--text); }
.about .secondary { width: 100%; }
.help-section + .help-section { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
.help-section h3 { margin-top: 0; }
.help-section pre { margin: 12px 0; padding: 14px; overflow-x: auto; overscroll-behavior: contain; border: 1px solid var(--border); border-radius: 14px; color: var(--text); background: var(--surface-raised); font: 650 .95rem/1.7 ui-monospace, "SFMono-Regular", Consolas, monospace; user-select: text; -webkit-user-select: text; }
.install-section { margin: 22px 0; padding: 18px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.install-section h3 { margin: 0 0 12px; }
.install-button { width: 100%; min-height: 48px; padding: 10px 14px; border: 0; border-radius: 13px; color: var(--accent-text); background: linear-gradient(135deg, var(--accent), var(--accent-strong)); cursor: pointer; font-weight: 750; }
.install-button:disabled { cursor: default; opacity: .7; }
.install-button[hidden] { display: none !important; }
.install-status { min-height: 1.4em; margin: 10px 0 0; color: var(--muted); }
.history-list { display: grid; gap: 10px; min-height: 130px; }
.history-item { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-raised); }
.history-use { min-width: 0; border: 0; padding: 0; color: inherit; background: transparent; cursor: pointer; text-align: left; }
.history-expression { overflow-wrap: anywhere; color: var(--muted); }
.history-result { margin-top: 5px; font-size: 1.25rem; font-weight: 750; }
.history-date { margin-top: 7px; color: var(--muted); font-size: .75rem; }
.delete-item { align-self: center; width: 40px; height: 40px; border: 0; border-radius: 12px; color: var(--danger); background: transparent; cursor: pointer; }
.empty { margin: auto; color: var(--muted); text-align: center; }
.expression-menu { position: fixed; z-index: 15; display: grid; min-width: 150px; padding: 6px; border: 1px solid var(--border); border-radius: 14px; color: var(--text); background: var(--surface-raised); box-shadow: 0 14px 36px rgb(10 18 35 / 24%); }
.expression-menu, .expression-menu button, .toast { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.expression-menu[hidden] { display: none !important; }
.expression-menu button { min-height: 42px; padding: 8px 12px; border: 0; border-radius: 9px; color: inherit; background: transparent; cursor: pointer; text-align: left; touch-action: manipulation; }
.expression-menu button:hover, .expression-menu button:focus-visible { background: color-mix(in srgb, var(--accent) 11%, transparent); }
.toast { position: fixed; z-index: 20; left: 50%; top: max(70px, calc(env(safe-area-inset-top) + 58px)); max-width: calc(100% - 32px); padding: 11px 16px; border: 1px solid var(--border); border-radius: 14px; color: var(--text); background: var(--surface-raised); box-shadow: 0 12px 35px rgb(10 18 35 / 28%); opacity: 0; pointer-events: none; transform: translate(-50%, -12px); transition: opacity 150ms ease, transform 150ms ease; font-size: .9rem; font-weight: 700; text-align: center; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 520px) {
  body { padding: 24px 0; }
  .app-shell { height: min(850px, calc(100dvh - 48px)); width: min(100% - 32px, 430px); border: 1px solid var(--border); border-radius: 32px; box-shadow: var(--shadow); }
  .key { min-height: clamp(56px, 8dvh, 68px); }
}
@media (max-width: 519px) and (max-height: 600px) {
  .app-shell { padding: max(8px, env(safe-area-inset-top)) max(9px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(9px, env(safe-area-inset-left)); gap: 5px; }
  .topbar { min-height: 40px; }
  .brand-mark { width: 30px; height: 30px; flex-basis: 30px; }
  .icon-button { width: 40px; height: 40px; border-radius: 12px; }
  .display { min-height: 96px; padding: 8px 12px; border-radius: 18px; }
  .expression { min-height: 38px; margin: 2px 0 4px; font-size: clamp(1.2rem, 6vw, 1.55rem); }
  .result-row { min-height: 34px; padding-top: 4px; }
  .result { font-size: clamp(1.55rem, 8vw, 2rem); }
  .keypad { gap: 5px; }
  .key, .key.equals { min-height: clamp(42px, 8.1dvh, 48px); border-radius: 13px; }
  .toast { top: max(52px, calc(env(safe-area-inset-top) + 44px)); }
}
@media (min-width: 520px) and (max-height: 560px) {
  body { padding: clamp(6px, 2dvh, 12px) 0; }
  .app-shell { height: calc(100dvh - clamp(12px, 4dvh, 24px)); padding: clamp(6px, 1.5dvh, 10px) 12px; gap: clamp(4px, 1.2dvh, 7px); border-radius: clamp(18px, 5dvh, 26px); }
  .topbar { min-height: clamp(34px, 8dvh, 42px); }
  .brand { gap: 7px; }
  .brand h1 { font-size: clamp(.86rem, 2.8dvh, 1rem); }
  .brand-mark { width: clamp(27px, 7dvh, 32px); height: clamp(27px, 7dvh, 32px); flex-basis: clamp(27px, 7dvh, 32px); }
  .icon-button { width: clamp(34px, 8dvh, 40px); height: clamp(34px, 8dvh, 40px); border-radius: 11px; font-size: 1.05rem; }
  .display { min-height: 0; padding: clamp(6px, 1.8dvh, 10px) 13px; border-radius: clamp(14px, 4dvh, 20px); }
  .display-label { font-size: clamp(.58rem, 1.8dvh, .68rem); }
  .expression { min-height: clamp(28px, 8dvh, 42px); max-height: 18dvh; margin: 1px 0 3px; font-size: clamp(1.05rem, 4.8dvh, 1.45rem); line-height: 1.15; }
  .result-row { min-height: clamp(25px, 7dvh, 34px); padding-top: 2px; }
  .result { font-size: clamp(1.35rem, 6.5dvh, 2rem); }
  .error-message { min-height: 0; font-size: .72rem; }
  .keypad { gap: clamp(3px, 1dvh, 6px); }
  .key, .key.equals { min-height: clamp(34px, 8.5dvh, 44px); border-radius: clamp(9px, 3dvh, 14px); font-size: clamp(.88rem, 3.8dvh, 1.12rem); }
  .hist-key { font-size: clamp(.62rem, 2.6dvh, .8rem); }
  .panel-header { padding: 9px 13px; }
  .tablist [role="tab"] { min-height: 38px; }
  .tab-panels, .history-list { max-height: calc(88dvh - 96px); }
  .toast { top: max(46px, calc(env(safe-area-inset-top) + 40px)); padding: 8px 12px; }
}
@media (min-width: 520px) and (max-height: 430px) {
  .app-shell { padding-block: 5px; gap: 3px; border-radius: 16px; }
  .topbar { min-height: 30px; }
  .brand-mark { width: 25px; height: 25px; flex-basis: 25px; }
  .icon-button { width: 30px; height: 30px; }
  .display { padding-block: 4px; }
  .expression { min-height: 25px; max-height: 16dvh; }
  .keypad { gap: 3px; }
  .key, .key.equals { min-height: clamp(30px, 8dvh, 34px); border-radius: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .key { transition: none !important; }
  .toast { transform: translate(-50%, 0); }
}