:root {
  --bg: #fafafa;
  --card: #fff;
  --ink: #111;
  --muted: #666;
  --accent: #009688;
  --accent-dark: #26a69a;
  --danger: #c62828;
  --border: #e5e7eb;
  --tape-bg: #f6f6f6;
  --hover: rgba(0, 0, 0, .05);
  --row-h: 22px;
  --rows: 4;
  --display-bg: #f1f5f9;
  --intw: auto;
  /* integer column width is dynamic (auto) */
}

[data-theme="dark"] {
  --bg: #121212;
  --card: #1e1e1e;
  --ink: #eee;
  --muted: #aaa;
  --accent: var(--accent-dark);
  --danger: #ef5350;
  --border: #333;
  --tape-bg: #1a1a1a;
  --hover: rgba(255, 255, 255, .06);
  --display-bg: #0f172a;
}

* {
  box-sizing: border-box
}

html,
body {
  height: 100%
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif
}

.app {
  max-width: 480px;
  margin: 0 auto;
  padding: 12px 12px 72px
}

/* Top Bar */
.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px
}

.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: transform .2s, background .2s;
}

.btn:hover {
  background: var(--hover)
}

.btn.spin {
  animation: spin .45s ease
}

.btn.pulse {
  animation: pulse .4s ease
}

@keyframes spin {
  from {
    transform: rotate(0)
  }

  to {
    transform: rotate(180deg)
  }
}

@keyframes pulse {
  0% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.06)
  }

  100% {
    transform: scale(1)
  }
}

.title {
  font-weight: 650;
  font-size: 1.05rem
}

/* Header inline (left) with decimal-aligned total */
.label-bar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 2px 6px
}

.label-inline {
  display: flex;
  align-items: baseline;
  gap: 6px
}

.label-inline .colon {
  opacity: .7
}

.label-inline .num {
  display: grid;
  grid-template-columns: auto 1ch 3ch;
  align-items: baseline;
  padding-right: 10px;
  font-variant-numeric: tabular-nums;
}

.label-inline .num .int {
  justify-self: end
}

.label-inline .num .dot {
  justify-self: center
}

.label-inline .num .frac {
  justify-self: start
}

.label-inline .num.neg {
  color: var(--danger)
}

/* Tape */
.tape {
  background: var(--tape-bg);
  border: 1px dashed var(--border);
  border-radius: 12px;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-gutter: stable both-edges;
  height: calc(var(--row-h) * var(--rows) + 8px);
}

.tape-list {
  list-style: none;
  margin: 0;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px
}

/* 60px 60% 5% 25% */
.tape-row {
  display: grid;
  /*  grid-template-columns: 50px 50% 5% 25%; */
  /* grid-template-columns: minmax(35px, 40px) 1fr minmax(15px, 3%) minmax(120px, 25%); */
  grid-template-columns: 20px minmax(35px, 40px) 1fr minmax(15px, 3%) minmax(120px, 25%);
  align-items: center;
  gap: 4px;
  padding: 0 0 0 4px;
  border-radius: 6px;
  font-size: 10px;
  line-height: 1.2;
  height: var(--row-h)
}

.tape-row:hover {
  background: var(--hover)
}

.col-num {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Actions (left), bigger hit area */
.col-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  z-index: 2;
}

.icon-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  /* Larger, easy hit area */
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 6px;
}

.icon-btn:hover {
  color: var(--ink);
  background: var(--hover)
}

.icon-btn .material-icons {
  font-size: 18px;
  line-height: 1
}

/* Actions (left), bigger hit area 
.col-actions{
  display:flex; gap:4px; align-items:center; justify-content:flex-start;
}
.icon-btn{
  border:none; background:transparent; color:var(--muted); cursor:pointer;
  padding:4px; border-radius:6px; line-height:0; display:flex; align-items:center; justify-content:center;
}
.icon-btn:hover{color:var(--ink);background:var(--hover)}
.icon-btn .material-icons{font-size:16px} */

/* Expression column */
.col1 {
  text-align: right;
  font-variant-numeric: tabular-nums
}

/* Spacer */
.col2 {}

/* Totals column: decimal aligned, 10px right clearance */
.col3 {
  display: grid;
  grid-template-columns: auto 1ch 3ch;
  align-items: baseline;
  padding-right: 10px;
  font-variant-numeric: tabular-nums;
  justify-items: end;
}

.col3 .int {
  justify-self: end
}

.col3 .dot {
  justify-self: center
}

.col3 .frac {
  justify-self: start
}

.col3.neg {
  color: var(--danger)
}

/* Card / Display / Keypad */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-top: 10px
}

.display {
  padding: 8px 12px 0
}

.current-wrap {
  background: var(--display-bg);
  border: none;
  border-radius: 12px;
  padding: 10px 12px
}

.current {
  font-size: 1.6rem;
  margin: 2px 0;
  text-align: right;
  word-break: break-all
}

.current.err {
  color: #b91c1c
}

.pad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, auto);
  gap: 8px;
  padding: 12px
}

.key {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 0;
  background: var(--card);
  text-align: center;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: transform .06s ease, box-shadow .12s ease, background .12s ease;
}

.key:active,
.key.pressed {
  transform: scale(0.97);
  box-shadow: 0 0 0 6px var(--hover) inset
}

.key.op {
  color: var(--accent);
  font-weight: 600
}

.key.eq {
  background: var(--accent);
  color: #fff;
  font-weight: 700
}

.key.danger {
  color: var(--danger)
}

/* Drawer + Extras */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: 0;
  background: rgba(0, 0, 0, .25);
  visibility: hidden;
  transition: visibility .2s, background .2s;
  z-index: 50
}

.drawer.open {
  visibility: visible
}

.drawer-panel {
  position: absolute;
  right: -340px;
  top: 0;
  height: 100%;
  width: 320px;
  background: var(--card);
  color: var(--ink);
  border-left: 1px solid var(--border);
  box-shadow: -2px 0 12px rgba(0, 0, 0, .12);
  transition: right .25s
}

.drawer.open .drawer-panel {
  right: 0
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-weight: 600
}

.saves {
  list-style: none;
  margin: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.save-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px
}

.save-item .meta {
  font-size: .9rem;
  color: var(--muted)
}

.ad {
  margin: 12px;
  margin-top: 4px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--muted);
  text-align: center
}

.related {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 12px
}

.tile {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  padding: 14px;
  text-align: center;
  color: var(--ink)
}

details.help {
  margin: 12px;
  padding: 12px
}

details.help summary {
  cursor: pointer;
  font-weight: 600
}



/* Allow keys to host absolute-positioned elements */
.key {
  position: relative;
}

/* Small hint at the bottom-center of a key (used on AC) */
.key .subhint {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  line-height: 1;
  opacity: .6;
  pointer-events: none;
  /* ensure it doesn't block clicks */
}