:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", sans-serif;
  --bg: #050506;
  --panel: rgba(25, 25, 27, .96);
  --display: #101012;
  --key: #333336;
  --key-hover: #48484b;
  --science-key: #242427;
  --utility: #a5a5a8;
  --orange: #ff9f0a;
  --muted: #919197;
  --line: rgba(255, 255, 255, .1);
  --text: #f7f7f8;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 0%, rgba(73, 77, 88, .22), transparent 34rem),
    radial-gradient(circle at 88% 92%, rgba(255, 159, 10, .08), transparent 30rem),
    var(--bg);
  overscroll-behavior: none;
}
button, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app-shell { min-height: 100dvh; padding: 16px; display: grid; place-items: center; }
.calculator {
  width: min(1180px, calc(100vw - 32px));
  height: min(840px, calc(100dvh - 32px));
  min-height: 560px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .58), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(24px) saturate(130%);
}

.titlebar { height: 48px; padding: 0 15px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); background: rgba(35, 35, 37, .9); }
.traffic-lights { display: flex; gap: 8px; }
.traffic-lights span { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.traffic-lights span:nth-child(2) { background: #febc2e; }
.traffic-lights span:nth-child(3) { background: #28c840; }
.brand { display: flex; align-items: center; gap: 8px; color: #d7d7da; font-size: 13px; font-weight: 600; }
.python-mark { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; color: #161616; background: linear-gradient(145deg, #4c98d3 0 50%, #ffd24a 50%); font-size: 9px; font-weight: 800; }
.titlebar > .icon-button { justify-self: end; }
.icon-button { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 9px; color: #dadade; background: transparent; cursor: pointer; }
.icon-button:hover { background: rgba(255, 255, 255, .08); }
.icon-button svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.workspace { position: relative; height: calc(100% - 48px); }
.main-panel { height: 100%; min-height: 0; padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.display {
  flex: 1 1 180px;
  min-height: 112px;
  padding: 14px 17px 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 11px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .025), transparent 50%), var(--display);
  box-shadow: inset 0 1px 14px rgba(0, 0, 0, .28);
  transition: flex-basis .28s ease, min-height .28s ease;
}
.display-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 11px; }
.status { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: #30d158; box-shadow: 0 0 8px rgba(48, 209, 88, .55); }
.status.loading i { background: #ffd60a; animation: pulse 1s infinite alternate; }
.status.error i { background: #ff453a; }
@keyframes pulse { to { opacity: .35; } }
.expression-preview { min-height: 18px; margin-top: 7px; color: #9b9ba1; font: 12px ui-monospace, "SF Mono", Menlo, monospace; text-align: right; overflow-wrap: anywhere; }
.result { flex: 1; min-height: 0; margin: 3px 0 5px; display: block; overflow: auto; color: white; font: 300 clamp(30px, 4vw, 54px)/1.08 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: -.04em; text-align: right; white-space: pre-wrap; overflow-wrap: anywhere; scrollbar-width: thin; }
.result.long { font-size: clamp(17px, 2.5vw, 27px); letter-spacing: -.02em; }
.result.very-long { font-size: 14px; line-height: 1.32; letter-spacing: 0; text-align: left; }
.result.error-text { color: #ff6961; font-size: 17px; letter-spacing: 0; }
.display-actions { min-height: 22px; display: flex; justify-content: flex-end; gap: 8px; }
.display-actions button { padding: 4px 9px; border: 0; border-radius: 6px; color: #aaaab0; background: rgba(255, 255, 255, .055); font-size: 10px; cursor: pointer; }
.display-actions button:hover:not(:disabled) { color: white; background: rgba(255, 255, 255, .1); }
.display-actions button:disabled { opacity: .4; cursor: default; }
#cancel-calculation { color: #ff6961; }

.advanced { flex: 0 0 auto; min-height: 91px; padding: 9px 11px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, .16); transition: flex-grow .28s ease; }
.advanced-heading { margin-bottom: 6px; display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.advanced h1 { margin: 0; font-size: 12px; font-weight: 650; }
.advanced p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.advanced code { color: #c6c6ca; font-family: ui-monospace, monospace; }
.segmented { min-width: 48px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; color: #dedee2; background: #2a2a2d; font-size: 9px; font-weight: 700; cursor: pointer; }
.advanced-input-wrap { position: relative; flex: 1; min-height: 48px; }
#advanced-input { width: 100%; height: 100%; min-height: 48px; resize: none; padding: 10px 48px 9px 11px; border: 1px solid rgba(255, 255, 255, .11); border-radius: 8px; outline: none; color: white; background: #101012; font: 13px/1.4 ui-monospace, "SF Mono", Menlo, monospace; }
#advanced-input:focus { border-color: rgba(255, 159, 10, .7); box-shadow: 0 0 0 3px rgba(255, 159, 10, .11); }
.run-button { position: absolute; right: 7px; bottom: 7px; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 7px; color: white; background: var(--orange); cursor: pointer; }
.run-button:disabled { opacity: .35; cursor: default; }
.run-button svg { width: 17px; fill: currentColor; }

.panel-toggles { flex: 0 0 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.panel-toggle { width: 100%; padding: 4px 8px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 7px; color: #a5a5ab; background: rgba(255, 255, 255, .035); font-size: 10px; cursor: pointer; }
.panel-toggle:hover { color: white; background: rgba(255, 255, 255, .07); }
.panel-toggle svg { width: 13px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .22s ease; }
.panel-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.keyboards { flex: 0 1 clamp(224px, 45dvh, 354px); min-height: 0; display: grid; grid-template-columns: minmax(0, 6fr) minmax(276px, 4fr); gap: 9px; overflow: hidden; transition: flex-basis .28s ease, opacity .2s ease; }
.keypad, .symbols-keypad { width: 100%; height: 100%; min-width: 0; min-height: 0; display: grid; gap: 6px; overflow: hidden; opacity: 1; transition: max-height .26s ease, opacity .18s ease; }
.keypad { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); }
.symbols-keypad { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); }
.keypad.collapsed, .symbols-keypad.collapsed { display: none; opacity: 0; pointer-events: none; }
.calculator.keypad-hidden.symbols-hidden .keyboards { display: none; }
.calculator.keypad-hidden:not(.symbols-hidden) .keyboards, .calculator.symbols-hidden:not(.keypad-hidden) .keyboards { grid-template-columns: minmax(0, 1fr); }
.calculator.keypad-hidden:not(.symbols-hidden) .symbols-keypad { width: 100%; }
.calculator.symbols-hidden:not(.keypad-hidden) .keypad { width: 100%; }
.calculator.keypad-hidden.symbols-hidden .display { flex: 1 1 52%; min-height: 190px; }
.calculator.keypad-hidden.symbols-hidden .advanced { flex: 1 1 42%; }
.key, .science-key { min-width: 0; min-height: 0; border: 0; color: white; cursor: pointer; user-select: none; touch-action: manipulation; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); transition: transform .06s, background .12s, filter .12s; }
.key { border-radius: 9px; background: var(--key); font-size: clamp(17px, 2.4vh, 23px); }
.key:hover { background: var(--key-hover); }
.key:active, .key.pressed, .science-key:active { transform: scale(.97); filter: brightness(1.25); }
.key.utility { color: #111; background: var(--utility); }
.key.utility:hover { background: #bebec1; }
.key.operator { background: var(--orange); }
.key.operator:hover { background: #ffb340; }
.key.operator.equals { color: var(--orange); background: white; }
.key.compact { border-radius: 8px; font-size: 13px; }
.science-key { border-radius: 7px; color: #ececef; background: var(--science-key); font-size: clamp(10px, 1.55vh, 14px); }
.science-key:hover { background: #39393d; }
.science-key.constant { color: #ffd19a; background: #303033; }

.history-panel { position: absolute; z-index: 5; top: 0; right: 0; width: min(360px, 92%); height: 100%; padding: 18px; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: rgba(27, 27, 30, .97); box-shadow: -20px 0 60px rgba(0, 0, 0, .42); backdrop-filter: blur(20px); transform: translateX(105%); visibility: hidden; transition: transform .26s ease, visibility .26s; }
.history-panel.open { transform: translateX(0); visibility: visible; }
.history-header { display: flex; align-items: center; justify-content: space-between; }
.history-header h2 { margin: 0; font-size: 16px; }
.history-header .icon-button { font-size: 27px; font-weight: 200; }
.history-list { flex: 1; margin: 16px -5px; overflow-y: auto; }
.history-empty { margin-top: 32px; color: var(--muted); font-size: 13px; text-align: center; }
.history-item { width: 100%; padding: 12px; border: 0; border-bottom: 1px solid var(--line); color: inherit; background: transparent; text-align: right; cursor: pointer; }
.history-item:hover { border-radius: 10px; background: rgba(255, 255, 255, .045); }
.history-expression { display: block; overflow: hidden; color: var(--muted); font: 11px ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.history-result { display: block; margin-top: 6px; overflow: hidden; font: 16px ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.clear-history { padding: 10px; border: 0; border-radius: 10px; color: #ff6961; background: rgba(255, 69, 58, .08); cursor: pointer; }
.toast { position: fixed; z-index: 10; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); padding: 9px 14px; border-radius: 999px; color: #111; background: rgba(245, 245, 247, .94); font-size: 12px; font-weight: 600; opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 759px) {
  body { background: #000; }
  .app-shell { min-height: 100dvh; padding: 0; place-items: stretch; }
  .calculator { width: 100%; height: 100dvh; min-height: 530px; border: 0; border-radius: 0; background: #000; box-shadow: none; }
  .titlebar { height: max(47px, calc(34px + env(safe-area-inset-top))); padding-top: env(safe-area-inset-top); grid-template-columns: 1fr auto; background: #000; }
  .traffic-lights { display: none; }
  .brand { justify-self: start; }
  .workspace { height: calc(100% - max(47px, calc(34px + env(safe-area-inset-top)))); }
  .main-panel { padding: 7px 10px max(10px, env(safe-area-inset-bottom)); gap: 7px; }
  .display { flex-basis: 140px; min-height: 112px; padding: 8px 8px 6px; border: 0; border-radius: 0; background: #000; box-shadow: none; }
  .display-meta { font-size: 10px; }
  .expression-preview { margin-top: 5px; }
  .result { margin-block: 2px 4px; font-size: clamp(31px, 12vw, 52px); }
  .result.long { font-size: 22px; }
  .result.very-long { font-size: 13px; }
  .advanced { min-height: 94px; padding: 8px 10px; background: #101011; }
  .advanced p { display: none; }
  .advanced-heading { margin-bottom: 5px; }
  .panel-toggles { flex-basis: 27px; gap: 7px; }
  .keyboards { flex-basis: min(49dvh, 390px); display: block; }
  .keypad, .symbols-keypad { width: 100%; height: 100%; gap: min(2vw, 8px); }
  .keypad { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(6, 1fr); padding: 0 4px; }
  .symbols-keypad { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); padding: 0 2px; }
  .key { border-radius: 50%; font-size: clamp(19px, 6vw, 28px); }
  .key.compact { border-radius: 13px; font-size: 13px; }
  .science-key { border-radius: 9px; font-size: clamp(10px, 3vw, 13px); }
  .calculator.symbols-hidden:not(.keypad-hidden) .keypad { width: 100%; }
  .calculator.keypad-hidden.symbols-hidden .display { min-height: 150px; }
}

@media (max-width: 380px) {
  .main-panel { padding-inline: 8px; }
  .keyboards { flex-basis: 47dvh; }
}

@media (min-width: 760px) and (max-height: 650px) {
  .app-shell { padding: 8px; }
  .calculator { width: calc(100vw - 16px); height: calc(100dvh - 16px); min-height: 480px; }
  .display { flex-basis: 120px; }
  .advanced { min-height: 78px; padding-block: 7px; }
  .advanced-heading { margin-bottom: 4px; }
  .keyboards { flex-basis: 44dvh; }
}

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