:root {
  --bg: #e8e8ed;
  --screen: #fbfbfd;
  --screen-line: #d9d9e0;
  --text: #1c1c1e;
  --muted: #8a8a93;
  --key: #d6d7de;
  --key-text: #1c1c1e;
  --key-num: #ffffff;
  --key-down: #b9bac4;
  --acc: #f2b300;
  --acc-text: #1c1c1e;
  --eq: #2f6fed;
  --eq-text: #fff;
  --shift: #b06d00;
  --alpha: #c8264f;
  --cursor: #2f6fed;
  --slot: #9b9ba5;
  --err: #c8264f;
  --menu: #ffffff;
  --shadow: 0 1px 0 rgba(0, 0, 0, .18);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0e10;
    --screen: #1b1b1f;
    --screen-line: #2c2c32;
    --text: #f2f2f7;
    --muted: #8d8d96;
    --key: #2a2a2f;
    --key-text: #ececf1;
    --key-num: #3b3b42;
    --key-down: #55555e;
    --acc: #e0a400;
    --acc-text: #1a1a1a;
    --eq: #3a7bff;
    --eq-text: #fff;
    --shift: #f2b44a;
    --alpha: #ff6f8f;
    --cursor: #5b93ff;
    --slot: #6c6c75;
    --err: #ff6f8f;
    --menu: #232328;
    --shadow: 0 1px 0 rgba(0, 0, 0, .5);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--text); overscroll-behavior: none;
}
/* fest am Bildschirm: nichts scrollt, iOS legt oben keine Unschärfe über die Seite */
body { position: fixed; inset: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
#app {
  position: fixed; inset: 0;
  max-width: 520px; margin: 0 auto;
  display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top) + 4px) 10px max(8px, calc(env(safe-area-inset-bottom) - 14px));
  gap: 8px;
}

/* ---------------------------------------------------------- Display */
#screen {
  position: relative;
  flex: 1 1 auto; min-height: 150px;
  background: var(--screen);
  border-radius: 18px;
  display: flex; flex-direction: column;
  padding: 6px 14px 10px;
  overflow: hidden;
  touch-action: none;
}
.grab {
  position: absolute; left: 50%; top: 5px; transform: translateX(-50%);
  width: 34px; height: 4px; border-radius: 2px; background: var(--screen-line);
}
#status {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--muted); min-height: 22px;
}
#status .ind { display: flex; gap: 6px; }
#status .ind b { font-weight: 600; color: var(--text); }
#status .i-s { color: var(--shift) !important; }
#status .i-a { color: var(--alpha) !important; }
#status .flash { flex: 1; text-align: center; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#angle {
  font: inherit; font-weight: 600; color: var(--text);
  background: var(--screen-line); border: 0; border-radius: 6px; padding: 2px 7px;
}
#status .fix { font-size: 11px; }


#cur {
  flex: 1 1 auto; min-height: 0; padding-top: 4px;
  display: flex; flex-direction: column; justify-content: space-between;
}
#expr { overflow: hidden; }
#expr {
  font-size: 28px; line-height: 1.5; min-height: 40px;
  word-break: break-all;
}
#res { text-align: right; min-height: 46px; }
.rv { font-size: 40px; font-weight: 500; white-space: nowrap; overflow: hidden; line-height: 1.4; }
.mline { font-size: 26px; white-space: nowrap; }
.mline .ml { color: var(--muted); margin-right: 6px; }
.err { font-size: 26px; color: var(--err); font-weight: 600; }
.ehint, .phint { font-size: 13px; color: var(--muted); }
.pmain { font-size: 16px; color: var(--muted); }
.plabel { color: var(--muted); margin-right: 4px; }

/* ---------------------------------------------------------- Mathe-Satz */
.a { display: inline; }
.g { margin-left: .2em; }
.o { margin: 0 .08em; }
.v { font-style: italic; font-family: "Times New Roman", "New York", serif; font-size: 1.08em; }
.v.pi { font-style: normal; }
.f { }
.pc { font-weight: 700; }
.neg { font-size: .85em; }
.conv { font-size: .7em; padding: 0 .15em; color: var(--muted); }
sup { font-size: .62em; line-height: 0; }

.frac {
  display: inline-flex; flex-direction: column; align-items: center;
  vertical-align: middle; margin: 0 .12em;
  font-size: .9em; line-height: 1.15;
}
.frac > .nu { border-bottom: .07em solid currentColor; padding: 0 .12em .04em; text-align: center; }
.frac > .de { padding: .04em .12em 0; text-align: center; }
.mixed { display: inline-flex; align-items: center; vertical-align: middle; }

.sqrt { display: inline-flex; align-items: stretch; vertical-align: baseline; }
.sqrt .rs { font-size: 1.05em; margin-right: -.04em; align-self: flex-end; }
.sqrt .rad { border-top: .07em solid currentColor; padding: .02em .1em 0 .05em; }
.sqrt .idx { font-size: .55em; align-self: flex-start; margin-right: -.45em; margin-top: .1em; }

.pw, .sci .pw { display: inline-block; font-size: .64em; vertical-align: .85em; line-height: 1; }
.sci .x10 { margin-left: .06em; }
.logab .lb { display: inline-block; font-size: .64em; vertical-align: -.35em; line-height: 1; }
.absv .bar { margin: 0 .05em; }

.bigop { display: inline-flex; align-items: center; vertical-align: middle; }
.bigop .lim { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05; margin-right: .05em; }
.bigop .hi, .bigop .lo { font-size: .55em; }
.bigop .sym { font-size: 1.35em; line-height: 1; }
.bigop.int .sym { font-style: italic; }
.dx { margin-left: .15em; }
.der { display: inline-flex; align-items: center; vertical-align: middle; }
.ddx { font-size: .75em; }
.evalbar { border-left: .07em solid currentColor; align-self: stretch; display: inline-flex; align-items: flex-end; margin-left: .08em; padding-left: .05em; }
.evalbar .lo { font-size: .55em; }

.slot {
  display: inline-block; position: relative;
  width: .55em; height: .75em; margin: 0 .05em;
  border: .06em dashed var(--slot); border-radius: .08em;
  vertical-align: -.05em;
}
.slot.on { border-color: var(--cursor); }
.slot .cur { position: absolute; left: .08em; top: .05em; height: .6em; }
.cur {
  display: inline-block; width: 0; height: 1.05em;
  border-left: 2px solid var(--cursor);
  margin-right: -2px; vertical-align: -.2em;
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------------------------------------------------------- Menü */
#overlay {
  position: absolute; inset: 0;
  background: var(--menu);
  display: flex; flex-direction: column;
  z-index: 5;
}
#overlay[hidden] { display: none; }
.mh {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-bottom: 1px solid var(--screen-line);
  font-weight: 600;
}
.mh button { font: inherit; font-size: 20px; background: none; border: 0; color: var(--text); width: 36px; height: 30px; }
.ml { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.ml li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--screen-line);
  font-size: 17px;
}
.ml li:active { background: var(--screen-line); }
.mn { color: var(--muted); font-size: 13px; min-width: 18px; }
.mlab { flex: 1; }
.mname { color: var(--muted); font-size: 14px; }
.msub { color: var(--muted); font-size: 14px; text-align: right; }

/* ---------------------------------------------------------- Tasten */
#keys { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; }
.grid { display: grid; column-gap: 7px; row-gap: 1px; }
.grid.top { grid-template-columns: repeat(6, 1fr); }
.grid.bottom { grid-template-columns: repeat(5, 1fr); column-gap: 9px; }
.cell { display: flex; flex-direction: column; min-width: 0; }
.lbl {
  height: 16px; display: flex; justify-content: center; align-items: flex-end; gap: .55em;
  font-size: 10.5px; font-weight: 600; line-height: 1; padding-bottom: 3px;
  white-space: nowrap; overflow: visible; letter-spacing: -.01em;
}
.lbl .ls { color: var(--shift); }
.lbl .la { color: var(--alpha); }
.lbl sup { font-size: .75em; line-height: 0; vertical-align: .5em; }
.lbl sub { font-size: .75em; line-height: 0; }
.lbl .bx { width: .55em; height: .65em; }
body.shift-on .lbl .ls, body.alpha-on .lbl .la { filter: brightness(1.25); text-shadow: 0 0 6px currentColor; }
body.shift-on .lbl .la, body.alpha-on .lbl .ls { opacity: .35; }

.key {
  font: inherit; color: var(--key-text);
  background: var(--key);
  border: 0; border-radius: 9px;
  height: clamp(32px, 5.1dvh, 44px);
  font-size: 16px; font-weight: 500;
  box-shadow: var(--shadow);
  padding: 0; white-space: nowrap;
  display: flex; align-items: center; justify-content: center;
}
.key sup { font-size: .62em; line-height: 0; vertical-align: .6em; }
.key sub { font-size: .62em; line-height: 0; }
.key.pressed, .dk.pressed { background: var(--key-down) !important; transform: translateY(1px); }
.key.mod { font-size: 13px; font-weight: 600; height: clamp(28px, 4.2dvh, 36px); }
.key.kshift { color: var(--shift); }
.key.kalpha { color: var(--alpha); }
body.shift-on .key.kshift { background: var(--shift); color: var(--bg); }
body.alpha-on .key.kalpha { background: var(--alpha); color: var(--bg); }
.grid.bottom .key { height: clamp(40px, 6.4dvh, 56px); font-size: 23px; border-radius: 11px; }
.key.num { background: var(--key-num); }
.key.op { font-size: 26px; }
.key.acc { background: var(--acc); color: var(--acc-text); font-size: 18px; font-weight: 700; }
.key.eqk { background: var(--eq); color: var(--eq-text); }
.bx {
  display: inline-block; width: .6em; height: .7em;
  border: 1.5px solid currentColor; border-radius: 2px; opacity: .8;
  vertical-align: -.05em; font-style: normal;
}
.kf { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.kf .kfl { width: .9em; height: 1.5px; background: currentColor; }
.kf .bx { width: .55em; height: .5em; }
.kf.sm { transform: scale(.8); margin-left: 2px; }

/* D-Pad */
.dpad-cell { grid-column: 3 / span 2; grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; padding: 4px 0 0; }
.dpad {
  position: relative; width: 100%; max-width: 170px; height: 100%; min-height: 76px;
  border-radius: 999px; background: var(--key); box-shadow: var(--shadow);
  overflow: hidden;
}
.dk { position: absolute; border: 0; background: transparent; padding: 0; }
.dk::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 0; height: 0; border: 6px solid transparent;
}
.dk.up { left: 25%; right: 25%; top: 0; height: 40%; }
.dk.down { left: 25%; right: 25%; bottom: 0; height: 40%; }
.dk.left { left: 0; top: 0; bottom: 0; width: 30%; }
.dk.right { right: 0; top: 0; bottom: 0; width: 30%; }
.dk.up::after { border-bottom: 8px solid var(--key-text); transform: translate(-50%, -75%); }
.dk.down::after { border-top: 8px solid var(--key-text); transform: translate(-50%, -25%); }
.dk.left::after { border-right: 8px solid var(--key-text); transform: translate(-75%, -50%); }
.dk.right::after { border-left: 8px solid var(--key-text); transform: translate(-25%, -50%); }
.dcenter {
  position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--bg); opacity: .5; pointer-events: none;
}

@media (max-height: 700px) {
  #expr { font-size: 22px; }
  .rv { font-size: 30px; }
  .lbl { height: 13px; font-size: 9.5px; }
}

/* ---------------------------------------------------------- Verlauf (Wisch nach unten) */
#sheet { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#sheet .sh-back {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .4);
  opacity: 0; transition: opacity .25s;
}
#sheet .sh-panel {
  position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; max-width: 520px;
  height: 72%;
  background: var(--screen);
  border-radius: 0 0 22px 22px;
  padding-top: calc(env(safe-area-inset-top) + 4px);
  display: flex; flex-direction: column;
  transform: translateY(-102%); transition: transform .28s cubic-bezier(.2, .8, .2, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
#sheet.open { pointer-events: auto; }
#sheet.open .sh-back { opacity: 1; }
#sheet.open .sh-panel { transform: none; }
.sh-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 16px 8px; font-weight: 600; font-size: 17px;
  border-bottom: 1px solid var(--screen-line); touch-action: none;
}
.sh-head button {
  font: inherit; font-size: 14px; font-weight: 500; color: var(--err);
  background: none; border: 0; padding: 4px 0;
}
.sh-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 0 16px; }
.sh-empty { color: var(--muted); text-align: center; margin-top: 30px; }
.he { padding: 8px 0; border-bottom: 1px solid var(--screen-line); }
.he:active { background: var(--screen-line); }
.he .hx { font-size: 17px; color: var(--muted); overflow: hidden; }
.he .hr { text-align: right; font-size: 22px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.sh-grab { height: 26px; display: flex; align-items: center; justify-content: center; touch-action: none; flex: 0 0 auto; }
.sh-grab::after { content: ''; width: 40px; height: 5px; border-radius: 3px; background: var(--muted); opacity: .6; }