/* DeepCalc · complete responsive stylesheet
   Rebuilt as one coherent system. No appended version overrides. */

:root {
  color-scheme: light;
  --surface: #fbfaff;
  --surface-raised: #ffffff;
  --surface-soft: #f3f0fa;
  --surface-variant: #e9e5f1;
  --input-bg: #f2eff8;
  --on-surface: #201b2b;
  --on-surface-variant: #716b7d;
  --outline: #aaa2b7;
  --primary: #7251b5;
  --primary-strong: #60409f;
  --primary-container: #eee5ff;
  --on-primary-container: #39245f;
  --secondary-container: #e9e1f7;
  --on-secondary-container: #392b55;
  --key-accent: #ded0ff;
  --key-accent-text: #38245f;
  --error: #b3261e;
  --error-container: #ffdad6;
  --on-error-container: #410002;
  --note-accent: #a18acb;
  --brand-accent: #7251b5;
  --focus-ring: color-mix(in srgb, var(--primary) 28%, transparent);
  --menu-shadow: 0 14px 38px #21153220, 0 2px 8px #21153212;
  --dialog-shadow: 0 24px 70px #17102035;
  --keyboard-shadow: 0 -8px 28px #25183a0b;
  --radius-sm: 9px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --motion: 160ms ease;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #14121a;
  --surface-raised: #1c1924;
  --surface-soft: #211d2a;
  --surface-variant: #302b3a;
  --input-bg: #211e29;
  --on-surface: #f0ebf7;
  --on-surface-variant: #c1b8ce;
  --outline: #81788e;
  --primary: #c4a7ff;
  --primary-strong: #d4c0ff;
  --primary-container: #302447;
  --on-primary-container: #eadfff;
  --secondary-container: #332a45;
  --on-secondary-container: #e9ddff;
  --key-accent: #4a3868;
  --key-accent-text: #f1e8ff;
  --error: #ffb4ab;
  --error-container: #641c19;
  --on-error-container: #ffdad6;
  --note-accent: #b19bd8;
  --brand-accent: #c4a7ff;
  --menu-shadow: 0 16px 42px #0008;
  --dialog-shadow: 0 24px 70px #0009;
  --keyboard-shadow: 0 -8px 28px #0003;
}

:root[data-theme="amoled"] {
  color-scheme: dark;
  --surface: #000000;
  --surface-raised: #080808;
  --surface-soft: #101010;
  --surface-variant: #1b1b1b;
  --input-bg: #101010;
  --on-surface: #f4f0f8;
  --on-surface-variant: #b9b2c2;
  --outline: #68616f;
  --primary: #d0b5ff;
  --primary-strong: #e0ceff;
  --primary-container: #211632;
  --on-primary-container: #f0e5ff;
  --secondary-container: #211a2b;
  --on-secondary-container: #eee3ff;
  --key-accent: #3b2a56;
  --key-accent-text: #f5edff;
  --error: #ffb4ab;
  --error-container: #641c19;
  --on-error-container: #ffdad6;
  --note-accent: #a992d2;
  --brand-accent: #d0b5ff;
  --menu-shadow: 0 16px 42px #000;
  --dialog-shadow: 0 24px 70px #000;
  --keyboard-shadow: 0 -8px 28px #000;
}

/* Palette accents */
html[data-accent="purple"] { --primary:#7251b5; --primary-strong:#60409f; --brand-accent:#7251b5; --note-accent:#a18acb; --primary-container:#eee5ff; --on-primary-container:#39245f; --key-accent:#ded0ff; --key-accent-text:#38245f; }
html[data-theme="dark"][data-accent="purple"],html[data-theme="amoled"][data-accent="purple"] { --primary:#c4a7ff; --primary-strong:#d4c0ff; --brand-accent:#c4a7ff; --note-accent:#b19bd8; --primary-container:#302447; --on-primary-container:#eadfff; --key-accent:#4a3868; --key-accent-text:#f1e8ff; }
html[data-accent="blue"] { --primary:#426da9; --primary-strong:#315b98; --brand-accent:#426da9; --note-accent:#829fc8; --primary-container:#e0ebff; --on-primary-container:#1c3558; --key-accent:#d5e4ff; --key-accent-text:#1e3b66; }
html[data-theme="dark"][data-accent="blue"],html[data-theme="amoled"][data-accent="blue"] { --primary:#a9c7ff; --primary-strong:#c3d7ff; --brand-accent:#a9c7ff; --note-accent:#91add8; --primary-container:#20334f; --on-primary-container:#e0ebff; --key-accent:#293f60; --key-accent-text:#e8f0ff; }
html[data-accent="emerald"] { --primary:#28775a; --primary-strong:#1c6449; --brand-accent:#28775a; --note-accent:#7aaa94; --primary-container:#d9f2e6; --on-primary-container:#174b38; --key-accent:#d2f0e1; --key-accent-text:#174b38; }
html[data-theme="dark"][data-accent="emerald"],html[data-theme="amoled"][data-accent="emerald"] { --primary:#91d5b4; --primary-strong:#b0e6cb; --brand-accent:#91d5b4; --note-accent:#8dbda4; --primary-container:#1d4032; --on-primary-container:#d8f7e7; --key-accent:#244b3a; --key-accent-text:#e0ffed; }
html[data-accent="rose"] { --primary:#a64e70; --primary-strong:#913d60; --brand-accent:#a64e70; --note-accent:#c58ba3; --primary-container:#ffe1eb; --on-primary-container:#64253e; --key-accent:#ffdfeb; --key-accent-text:#67263f; }
html[data-theme="dark"][data-accent="rose"],html[data-theme="amoled"][data-accent="rose"] { --primary:#f0a9c3; --primary-strong:#ffc2d5; --brand-accent:#f0a9c3; --note-accent:#cf9aaf; --primary-container:#4b2938; --on-primary-container:#ffe5ed; --key-accent:#583244; --key-accent-text:#ffe8ef; }
html[data-accent="amber"] { --primary:#916112; --primary-strong:#79500a; --brand-accent:#916112; --note-accent:#b89a68; --primary-container:#ffedc9; --on-primary-container:#5c3d08; --key-accent:#ffedc9; --key-accent-text:#65420c; }
html[data-theme="dark"][data-accent="amber"],html[data-theme="amoled"][data-accent="amber"] { --primary:#e9c078; --primary-strong:#f4d49b; --brand-accent:#e9c078; --note-accent:#c4a878; --primary-container:#49391f; --on-primary-container:#ffefcf; --key-accent:#59431f; --key-accent-text:#fff0cf; }

* { box-sizing:border-box; }
html,body { width:100%; height:100%; min-height:100%; margin:0; overflow:hidden; background:var(--surface); color:var(--on-surface); font-family:Roboto,"Segoe UI",system-ui,-apple-system,Arial,sans-serif; -webkit-tap-highlight-color:transparent; }
button,input,textarea { font:inherit; }
button { color:inherit; }
button:focus-visible,input:focus-visible,textarea:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
[hidden] { display:none!important; }

.app { width:100%; height:100vh; height:100dvh; min-height:0; display:flex; flex-direction:column; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); background:var(--surface); }
.topbar { position:relative; z-index:5; flex:0 0 62px; width:100%; max-width:960px; height:62px; margin:0 auto; padding:0 12px 0 20px; display:flex; align-items:center; background:var(--surface); }
.app-title { color:var(--brand-accent); font-size:22px; line-height:28px; font-weight:650; letter-spacing:-.55px; }
.top-actions { height:100%; margin-left:auto; display:flex; align-items:center; gap:5px; }
.icon-button { width:44px; height:44px; padding:0; border:0; border-radius:50%; display:grid; place-items:center; background:transparent; color:var(--on-surface-variant); cursor:pointer; transition:background var(--motion),color var(--motion),transform var(--motion); }
.icon-button:active { background:var(--surface-variant); transform:scale(.94); }
.icon-button svg { width:22px; height:22px; display:block; fill:currentColor; }

.content { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; background:var(--surface); }
.lines { flex:1 1 auto; min-height:0; width:100%; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; padding:8px 0 12px; scrollbar-width:thin; scrollbar-color:var(--surface-variant) transparent; }
.line-row { width:100%; max-width:960px; min-height:42px; margin:0 auto; padding:4px 12px; display:flex; align-items:stretch; gap:0; }
.line-number { flex:0 0 28px; padding:6px 7px 0 0; color:var(--on-surface-variant); opacity:.62; text-align:right; font-size:11px; line-height:20px; font-variant-numeric:tabular-nums; }
.input-box { position:relative; flex:7 1 0; min-width:0; min-height:36px; padding:6px 28px 6px 11px; display:flex; align-items:flex-start; border:1px solid transparent; border-radius:11px; background:var(--input-bg); transition:border-color var(--motion),background var(--motion),box-shadow var(--motion); }
.input-box:focus-within { border-color:color-mix(in srgb,var(--primary) 52%,transparent); box-shadow:0 0 0 3px var(--focus-ring); }
.expression { display:block; width:100%; min-width:0; min-height:22px; margin:0; padding:0; resize:none; overflow:hidden; border:0; outline:0; background:transparent; color:var(--on-surface); caret-color:var(--primary); font-family:ui-monospace,SFMono-Regular,Consolas,"Roboto Mono",monospace; font-size:15px; font-weight:450; line-height:23px; letter-spacing:0; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }
.expression:focus-visible { outline:0; }
.expression.comment { color:var(--on-surface-variant); font-family:inherit; font-style:italic; }
.line-copy-dot { position:absolute; top:50%; right:10px; width:7px; height:7px; min-width:7px; padding:0; transform:translateY(-50%); border:0; border-radius:50%; background:var(--on-surface-variant); opacity:.38; cursor:pointer; }
.line-copy-dot:active { transform:translateY(-50%) scale(.82); background:var(--primary); opacity:1; }
.result-box { flex:3 1 0; min-width:0; min-height:36px; margin-left:8px; padding:6px 10px; display:flex; align-items:flex-start; justify-content:flex-end; overflow:visible; border:1px solid transparent; border-radius:11px; background:color-mix(in srgb,var(--primary-container) 48%,var(--surface)); }
.result { display:block; max-width:100%; min-width:0; min-height:22px; margin:0; padding:0; border:0; background:transparent; color:var(--primary-strong); text-align:right; font-family:ui-monospace,SFMono-Regular,Consolas,"Roboto Mono",monospace; font-size:14px; font-weight:600; line-height:22px; letter-spacing:-.15px; white-space:normal; overflow:visible; overflow-wrap:anywhere; word-break:break-word; }
.result.error { color:var(--error); }
.result.empty { color:var(--on-surface-variant); font-weight:400; }

.note-row { width:100%; max-width:960px; min-height:25px; margin:0 auto; padding:0 12px 3px 40px; display:flex; align-items:flex-start; gap:3px; }
.note-toggle { flex:0 0 22px; width:22px; height:23px; margin:0; padding:0; border:0; border-radius:6px; background:transparent; color:var(--on-surface-variant); opacity:.55; font-size:12px; line-height:23px; cursor:pointer; }
.note-toggle[aria-expanded="true"] { color:var(--brand-accent); opacity:1; }
.note-toggle:active { background:var(--surface-variant); }
.note-content { flex:1 1 auto; min-width:0; min-height:21px; padding:1px 0 2px 9px; border-left:2px solid color-mix(in srgb,var(--note-accent) 60%,transparent); color:var(--on-surface-variant); font-size:12px; line-height:19px; white-space:pre-wrap; overflow-wrap:anywhere; }
.note-editor { display:block; width:100%; min-width:0; min-height:21px; max-height:100px; margin:0; padding:0 2px; resize:none; overflow-y:auto; border:0; outline:0; background:transparent; color:var(--on-surface); caret-color:var(--brand-accent); font:12px/19px Roboto,"Segoe UI",Arial,sans-serif; }
.note-editor:focus-visible { outline:0; }
.note-editor::placeholder { color:var(--on-surface-variant); opacity:.55; }

.keyboard-panel { flex:0 0 auto; width:100%; max-width:960px; margin:0 auto; padding:9px max(9px,env(safe-area-inset-right,0px)) calc(9px + env(safe-area-inset-bottom,0px)) max(9px,env(safe-area-inset-left,0px)); background:var(--surface-variant); border-top:1px solid color-mix(in srgb,var(--outline) 13%,transparent); box-shadow:var(--keyboard-shadow); }
.key-rows { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:repeat(5,clamp(43px,7.1vh,58px)); gap:6px; }
.key { min-width:0; height:auto; padding:0; border:1px solid color-mix(in srgb,var(--outline) 8%,transparent); border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--secondary-container); color:var(--on-secondary-container); font-size:20px; font-weight:600; line-height:1; cursor:pointer; touch-action:manipulation; user-select:none; -webkit-user-select:none; transition:filter var(--motion),transform var(--motion),background var(--motion); }
.key.digit { background:var(--surface-raised); color:var(--on-surface); }
.key.operator,.key.power,.key.special { background:var(--secondary-container); color:var(--on-secondary-container); }
.key.danger,.key.enter { background:var(--key-accent); color:var(--key-accent-text); }
.key.enter { grid-column:5; grid-row:4 / span 2; font-size:25px; }
.key.paste-key svg { width:21px; height:21px; fill:currentColor; }
.key:active { filter:brightness(.93); transform:scale(.96); }

.dropdown { position:absolute; top:53px; right:8px; z-index:10; width:min(246px,calc(100vw - 20px)); max-height:min(78dvh,620px); min-width:0; padding:7px 0; overflow-y:auto; display:none; border:1px solid color-mix(in srgb,var(--outline) 20%,transparent); border-radius:15px; background:var(--surface-raised); box-shadow:var(--menu-shadow); }
.dropdown.open { display:block; animation:menuIn 130ms ease both; }
.menu-group-label { padding:9px 15px 4px; color:var(--on-surface-variant); opacity:.7; font-size:9px; line-height:13px; font-weight:750; letter-spacing:1.25px; }
.menu-item { width:100%; min-height:42px; padding:0 15px; border:0; border-radius:0; display:flex; align-items:center; gap:12px; background:transparent; color:var(--on-surface); text-align:left; font-size:13px; cursor:pointer; }
.menu-item:active { background:var(--surface-variant); }
.menu-item svg { flex:0 0 19px; width:19px; height:19px; fill:currentColor; color:var(--on-surface-variant); opacity:.9; }
.menu-item .copy-icon { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.menu-divider { height:1px; margin:6px 12px; background:var(--surface-variant); }

.toast { position:fixed; left:50%; bottom:calc(300px + env(safe-area-inset-bottom,0px)); z-index:50; max-width:calc(100vw - 32px); padding:11px 16px; transform:translate(-50%,10px); border:1px solid #ffffff18; border-radius:12px; background:#292532; color:#fff; box-shadow:0 5px 20px #0003; opacity:0; pointer-events:none; font-size:13px; line-height:18px; text-align:center; white-space:normal; transition:opacity var(--motion),transform var(--motion); }
.toast.show { transform:translate(-50%,0); opacity:1; }

.dialog-scrim { position:fixed; inset:0; z-index:30; padding:22px; display:none; align-items:center; justify-content:center; background:#09060db3; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
.dialog-scrim.open { display:flex; animation:scrimIn 130ms ease both; }
.dialog { width:min(100%,430px); max-height:min(84dvh,700px); padding:24px; overflow:auto; border:1px solid color-mix(in srgb,var(--outline) 17%,transparent); border-radius:24px; background:var(--surface-raised); color:var(--on-surface); box-shadow:var(--dialog-shadow); animation:dialogIn 160ms ease both; }
.dialog-title { margin:0 0 17px; color:var(--on-surface); font-size:21px; line-height:28px; font-weight:650; letter-spacing:-.4px; }
.dialog-body { color:var(--on-surface); font-size:13px; line-height:20px; }
.dialog-body p { margin:0 0 13px; white-space:pre-line; }
.dialog-body .section-title { margin:15px 0 5px; color:var(--brand-accent); font-size:12px; line-height:18px; font-weight:750; letter-spacing:.25px; }
.dialog-body .section-title:first-child { margin-top:0; }
.dialog-actions { margin-top:20px; display:flex; justify-content:flex-end; align-items:center; gap:7px; }
.text-button { min-height:39px; padding:8px 13px; border:0; border-radius:10px; background:transparent; color:var(--brand-accent); font-size:13px; font-weight:700; cursor:pointer; }
.text-button:active { background:var(--surface-variant); }
.variable-list { margin-top:9px; display:flex; flex-wrap:wrap; gap:8px; }
.variable-chip { padding:8px 12px; border:1px solid color-mix(in srgb,var(--primary) 20%,transparent); border-radius:10px; background:var(--secondary-container); color:var(--on-secondary-container); font-size:13px; cursor:pointer; }
.about-link { color:var(--primary); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }

/* Settings */
.settings-dialog { width:min(100%,410px); padding:23px; overflow:visible; }
.settings-dialog .dialog-title { margin-bottom:20px; }
.settings-block { margin:0 0 20px; }
.settings-label { margin:0 0 9px; color:var(--on-surface-variant); font-size:12px; font-weight:750; letter-spacing:.35px; }
.theme-switch { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; padding:4px; border:1px solid color-mix(in srgb,var(--outline) 10%,transparent); border-radius:13px; background:var(--input-bg); }
.theme-choice { position:relative; min-width:0; cursor:pointer; }
.theme-choice input,.palette-choice input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.theme-choice span { min-height:39px; padding:0 3px; border:1px solid transparent; border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--on-surface-variant); font-size:12px; transition:background var(--motion),color var(--motion),border-color var(--motion); }
.theme-choice input:checked+span { border-color:color-mix(in srgb,var(--brand-accent) 35%,transparent); background:var(--surface-raised); color:var(--brand-accent); box-shadow:0 1px 4px #00000012; font-weight:700; }
.theme-choice input:focus-visible+span,.palette-choice input:focus-visible+.palette-swatch { outline:2px solid var(--primary); outline-offset:3px; }
.palette-options { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; }
.palette-choice { min-width:0; padding:8px 2px; border-radius:11px; display:flex; flex-direction:column; align-items:center; gap:7px; cursor:pointer; }
.palette-choice:has(input:checked) { background:color-mix(in srgb,var(--brand-accent) 8%,transparent); }
.palette-swatch { position:relative; width:30px; height:30px; border:2px solid color-mix(in srgb,var(--on-surface) 14%,transparent); border-radius:50%; display:block; }
.palette-swatch.purple { background:#9273d0; }.palette-swatch.blue { background:#668fcf; }.palette-swatch.emerald { background:#58a987; }.palette-swatch.rose { background:#c77f98; }.palette-swatch.amber { background:#d6a24e; }
.palette-choice input:checked+.palette-swatch { outline:2px solid var(--brand-accent); outline-offset:3px; }
.palette-choice input:checked+.palette-swatch::after { content:"✓"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:15px; font-weight:800; text-shadow:0 1px 3px #0009; }
.palette-name { color:var(--on-surface-variant); font-size:10px; }

/* Save sheet and history */
.compact-dialog { width:min(100%,390px); }
.field-label { display:block; margin:0 0 7px; color:var(--on-surface-variant); font-size:12px; font-weight:600; }
.dialog-input { width:100%; height:45px; padding:0 12px; border:1px solid color-mix(in srgb,var(--outline) 35%,transparent); border-radius:11px; outline:0; background:var(--input-bg); color:var(--on-surface); font-size:15px; }
.dialog-input:focus { border-color:var(--brand-accent); box-shadow:0 0 0 3px var(--focus-ring); }
.history-dialog { width:min(100%,500px); max-height:min(84dvh,720px); display:flex; flex-direction:column; }
.history-dialog .dialog-title { flex:0 0 auto; margin-bottom:12px; }
.history-dialog .dialog-body { min-height:0; overflow-y:auto; }
.history-list { display:flex; flex-direction:column; gap:0; }
.history-empty { padding:30px 10px; color:var(--on-surface-variant); text-align:center; font-size:13px; }
.history-item { padding:13px 2px; border-bottom:1px solid color-mix(in srgb,var(--outline) 18%,transparent); display:flex; flex-direction:column; align-items:stretch; gap:9px; background:transparent; }
.history-item:first-child { padding-top:4px; }
.history-item:last-child { border-bottom:0; }
.history-info { min-width:0; }
.history-item-title { color:var(--on-surface); font-size:14px; font-weight:700; overflow-wrap:anywhere; }
.history-item-meta { margin-top:4px; color:var(--on-surface-variant); opacity:.78; font-size:11px; line-height:16px; }
.history-item-preview { max-width:100%; margin-top:5px; overflow:hidden; color:var(--on-surface-variant); opacity:.75; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:11px; white-space:nowrap; text-overflow:ellipsis; }
.history-actions { display:flex; align-items:center; gap:5px; }
.history-action { min-height:34px; padding:6px 10px; border:0; border-radius:8px; background:var(--surface-soft); color:var(--brand-accent); font-size:12px; font-weight:650; cursor:pointer; }
.history-action.primary { background:var(--primary-container); color:var(--brand-accent); }
.history-action.delete { background:transparent; color:var(--on-surface-variant); }
.history-action:active { filter:brightness(.92); }

@keyframes menuIn { from { opacity:0; transform:translateY(-4px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes scrimIn { from { opacity:0; } to { opacity:1; } }
@keyframes dialogIn { from { opacity:0; transform:translateY(7px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }

@media (min-width:700px) {
  .topbar { padding-right:18px; padding-left:22px; }
  .line-row { padding-right:18px; padding-left:18px; }
  .note-row { padding-right:18px; padding-left:46px; }
  .keyboard-panel { padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px)); }
  .key-rows { grid-template-rows:repeat(5,58px); gap:7px; }
  .key { border-radius:13px; }
}
@media (max-width:420px) {
  .topbar { flex-basis:58px; height:58px; padding-right:8px; padding-left:15px; }
  .app-title { font-size:21px; }
  .icon-button { width:42px; height:42px; }
  .line-row { padding-right:7px; padding-left:5px; }
  .line-number { flex-basis:24px; padding-right:5px; font-size:10px; }
  .input-box { padding-left:9px; padding-right:24px; }
  .result-box { margin-left:6px; padding-right:7px; padding-left:6px; }
  .expression { font-size:14px; }
  .result { font-size:13px; }
  .note-row { padding-left:28px; padding-right:7px; }
  .keyboard-panel { padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px)); }
  .key-rows { gap:4px; grid-template-rows:repeat(5,clamp(42px,7.4vh,54px)); }
  .key { border-radius:10px; font-size:19px; }
  .dialog-scrim { padding:15px; }
  .dialog { padding:21px; border-radius:21px; }
  .settings-dialog { padding:20px; }
  .toast { bottom:calc(285px + env(safe-area-inset-bottom,0px)); }
}
@media (max-width:350px) {
  .theme-switch { gap:2px; }
  .theme-choice span { font-size:10px; }
  .palette-name { font-size:9px; }
  .key-rows { gap:3px; }
  .key { border-radius:8px; }
}
@media (max-height:700px) {
  .topbar { flex-basis:54px; height:54px; }
  .keyboard-panel { padding-top:5px; padding-bottom:calc(5px + env(safe-area-inset-bottom,0px)); }
  .key-rows { grid-template-rows:repeat(5,clamp(37px,6.7vh,49px)); gap:4px; }
  .key { border-radius:9px; }
  .toast { bottom:calc(265px + env(safe-area-inset-bottom,0px)); }
}
@media (max-height:560px) {
  .topbar { flex-basis:48px; height:48px; }
  .key-rows { grid-template-rows:repeat(5,minmax(34px,1fr)); }
  .keyboard-panel { padding-top:4px; padding-bottom:calc(4px + env(safe-area-inset-bottom,0px)); }
  .settings-dialog { max-height:88dvh; overflow-y:auto; }
  .settings-block { margin-bottom:12px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}