:root {
  color-scheme: dark;
  --bg: #11131a;
  --card: #20232c;
  --field: #10131b;
  --text: #f4f6fb;
  --muted: #9aa1b2;
  --line: #424856;
  --line-soft: #333947;
  --accent: #98a7ff;
  --accent-soft: rgba(152, 167, 255, .12);
  --accent-border: rgba(152, 167, 255, .34);
  --danger: #ff8a8a;
  --danger-soft: rgba(255, 138, 138, .12);
  --warning: #e7b55f;
  --success: #77e0a3;
  --success-soft: rgba(119, 224, 163, .15);
  --success-border: rgba(119, 224, 163, .58);
  --radius-card: 16px;
  --radius-field: 10px;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5fa;
  --card: #ffffff;
  --field: #ffffff;
  --text: #161923;
  --muted: #697286;
  --line: #cfd5e2;
  --line-soft: #e1e5ee;
  --accent: #405be8;
  --accent-soft: rgba(64, 91, 232, .10);
  --accent-border: rgba(64, 91, 232, .24);
  --danger: #b73333;
  --danger-soft: rgba(183, 51, 51, .1);
  --warning: #9f6a00;
  --success: #087443;
  --success-soft: rgba(8, 116, 67, .12);
  --success-border: rgba(8, 116, 67, .45);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
}
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }

.app {
  width: min(860px, 100%);
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 8px max(24px, env(safe-area-inset-bottom));
}

.calc-card, .bottom-panel {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  background: var(--card);
}

.calc-card { padding: 16px 18px 12px; }
.bottom-panel { margin-top: 10px; overflow: hidden; }

.top-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.title-wrap { min-width: 0; display: grid; gap: 4px; }
h1 {
  margin: 0;
  font-size: clamp(24px, 5vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.lead-line {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.icon-button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.entry-block {
  position: relative;
  margin-top: 16px;
}

.amount-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 68px;
  gap: 10px;
  padding: 8px 46px 8px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--field);
}

.amount-box:focus-within {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.amount-label {
  color: var(--muted);
  font-size: 14px;
  font-weight: 760;
}

.amount-box input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: clamp(28px, 9vw, 42px);
  font-weight: 820;
  letter-spacing: -.04em;
  text-align: right;
}

.amount-suffix {
  color: var(--muted);
  font-size: 20px;
  font-weight: 760;
}

.clear-input {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
}

.input-hint {
  margin: 8px 2px 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.numpad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 10px 0 12px;
}

.numpad[hidden] { display: none !important; }

.numpad button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--field);
  color: var(--text);
  font-size: 18px;
  font-weight: 820;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.numpad button:active,
.numpad button.is-pressed {
  transform: scale(.98);
  border-color: var(--accent-border);
  background: color-mix(in srgb, var(--field) 82%, var(--accent) 18%);
}

.numpad .numpad-action {
  color: var(--muted);
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

html.use-custom-numpad .amount-box input { caret-color: transparent; }
html.use-custom-numpad .amount-box { cursor: default; }

.category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.category-button {
  min-height: 64px;
  display: grid;
  gap: 4px;
  align-content: center;
  padding: 10px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--field);
  color: var(--text);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.category-button:active,
.category-button.is-pressed {
  transform: scale(.985);
  border-color: var(--accent-border);
  background: color-mix(in srgb, var(--field) 82%, var(--accent) 18%);
}
.category-button.is-flash {
  border-color: var(--success-border);
  box-shadow: 0 0 0 3px var(--success-soft);
  background: color-mix(in srgb, var(--field) 86%, var(--success) 14%);
}

.category-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 820;
  letter-spacing: -.02em;
}

.category-total {
  color: var(--muted);
  font-size: 14px;
  font-weight: 720;
}

.summary-line {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--accent-border);
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 800;
  text-align: center;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.edit-actions { margin-top: 8px; }
.edit-actions .text-button { flex: 1 1 0; }
.primary-actions { margin-top: 8px; }
.primary-actions .copy-action { flex: 1 1 0; }
.secondary-actions { margin-top: 8px; display: grid; }

.text-button,
.reset-wide-button {
  min-height: 42px;
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 780;
}

.text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 13px;
}

.reset-wide-button { width: 100%; padding: 0 14px; }
.muted-button {
  border-color: var(--line-soft);
  background: transparent;
  color: var(--muted);
}

.copy-icon { font-size: 16px; line-height: 1; }

.action-hint {
  display: block;
  margin-top: 9px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.action-hint.is-error { color: var(--danger); }
.action-hint.is-success { color: var(--success); }

.panel-button {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-weight: 820;
}

.panel-hint {
  color: var(--muted);
  font-size: 13px;
  font-weight: 720;
  white-space: nowrap;
}

.panel-content {
  padding: 0 16px 14px;
  border-top: 1px solid var(--line-soft);
}

.panel-text,
.about-content p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.42;
}

.totals-list {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.total-row,
.history-row,
.category-setting-row {
  display: grid;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--field) 75%, transparent);
}

@supports not (color: color-mix(in srgb, white, black)) {
  .total-row, .history-row, .category-setting-row, .action-log-row { background: var(--field); }
}

.total-row {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 40px;
  padding: 8px 10px;
}

.total-name,
.history-category {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 740;
}

.total-value,
.history-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 830;
  white-space: nowrap;
}

.empty-state {
  margin-top: 12px;
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  text-align: center;
}

.history-list { display: grid; gap: 6px; margin-top: 12px; }

.history-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  min-height: 44px;
  padding: 7px 7px 7px 10px;
}

.history-meta {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.history-time {
  color: var(--muted);
  font-size: 12px;
  font-weight: 680;
}

.delete-op,
.edit-op,
.delete-category,
.move-category {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
}

.delete-op,
.delete-category { color: var(--danger); }

.edit-op { color: var(--muted); }

.history-row-actions {
  display: flex;
  gap: 5px;
  align-items: center;
}


.category-settings {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.category-setting-row {
  grid-template-columns: 32px 32px minmax(0, 1fr) 32px;
  min-height: 48px;
  padding: 7px;
}

.category-setting-row input,
.add-category-form input {
  width: 100%;
  min-width: 0;
  height: 36px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--field);
  color: var(--text);
  outline: none;
  padding: 0 10px;
}

.category-setting-row input:focus,
.add-category-form input:focus {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.add-category-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 12px;
}

.settings-content .reset-wide-button { margin-top: 8px; }

.settings-save-note {
  margin-top: 8px;
  color: var(--success);
  font-size: 12px;
  font-weight: 720;
  min-height: 16px;
}

.settings-save-note[hidden] { display: none !important; }

.settings-save-note.is-active {
  text-shadow: 0 0 18px var(--success-soft);
}

.action-log-list {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.action-log-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--field) 75%, transparent);
}

.action-log-badge {
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
  white-space: nowrap;
}

.action-log-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 720;
}

.action-log-row.is-redo .action-log-badge { color: var(--success); }

.status-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  color: var(--muted);
  font-size: 13px;
}

.confirm-panel,
.copy-dialog,
.category-detail-dialog,
.excel-review-dialog,
.onboarding-dialog,
.edit-operation-dialog {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, .45);
}

.confirm-panel[hidden],
.copy-dialog[hidden],
.category-detail-dialog[hidden],
.excel-review-dialog[hidden],
.onboarding-dialog[hidden],
.edit-operation-dialog[hidden] { display: none !important; }

.confirm-panel__box,
.copy-dialog__box,
.category-detail__box,
.excel-review__box,
.onboarding__box,
.edit-operation__box {
  width: min(440px, 100%);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 18px 60px rgba(0,0,0,.3);
}

.confirm-panel__box { padding: 16px; }
.confirm-panel__title { font-size: 18px; font-weight: 850; }
.confirm-panel__text { margin-top: 5px; color: var(--muted); line-height: 1.35; }
.confirm-panel__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

.copy-dialog__box { padding: 16px; }
.copy-dialog h2 { margin: 0 0 8px; font-size: 20px; }
.copy-dialog p { margin: 0 0 12px; color: var(--muted); line-height: 1.35; }
.copy-dialog textarea {
  width: 100%;
  height: 210px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--field);
  color: var(--text);
  padding: 10px;
  outline: none;
}
.copy-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

@media (min-width: 620px) {
  .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .primary-actions { justify-content: space-between; }
  .text-button { min-width: 0; }
}

@media (min-width: 820px) {
  .category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .app { padding-left: 8px; padding-right: 8px; }
  .calc-card { padding: 14px 12px 12px; }
  .bottom-panel { border-radius: 14px; }
  .numpad button { min-height: 40px; font-size: 17px; }
  .category-button { min-height: 61px; padding: 9px; }
  .category-name { font-size: 15px; }
  .category-total { font-size: 13px; }
  .text-button { flex: 1 1 auto; }
  .history-row { grid-template-columns: minmax(0, 1fr) auto 34px; }
}

/* v0.4: mobile bottom dock for the custom numpad */
.numpad-dock {
  position: fixed;
  left: 50%;
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 16;
  width: min(860px, calc(100% - 16px));
  transform: translateX(-50%);
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .34);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.numpad-dock[hidden] { display: none !important; }

@supports not (color: color-mix(in srgb, white, black)) {
  .numpad-dock { background: var(--card); }
}

html.use-custom-numpad:not(.numpad-collapsed) .app {
  padding-bottom: calc(274px + env(safe-area-inset-bottom));
}

html.use-custom-numpad.numpad-collapsed .app {
  padding-bottom: calc(82px + env(safe-area-inset-bottom));
}

.numpad-expanded {
  display: grid;
  gap: 8px;
}

.numpad-topbar {
  min-height: 34px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.numpad-title {
  color: var(--muted);
  font-size: 13px;
  font-weight: 780;
  white-space: nowrap;
}

.numpad-current {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  color: var(--text);
  font-size: 18px;
  font-weight: 860;
  font-variant-numeric: tabular-nums;
}

.numpad-mini-button,
.numpad-tab {
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 800;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.numpad-mini-button {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 13px;
}

.numpad-dock .numpad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.numpad-tab {
  display: none;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 15px;
}

.numpad-tab span:last-child {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.numpad-dock.is-collapsed {
  width: min(430px, calc(100% - 24px));
  padding: 0;
  border-radius: 999px;
}

.numpad-dock.is-collapsed .numpad-expanded { display: none; }
.numpad-dock.is-collapsed .numpad-tab { display: flex; }

@media (max-width: 520px) {
  .numpad-dock { width: calc(100% - 16px); }
  .numpad-title { display: none; }
  .numpad-topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .numpad-current { text-align: left; padding-left: 6px; }
  .numpad-dock .numpad button { min-height: 44px; font-size: 18px; }
}

/* v0.5: compact header, safer category taps, lower docked numpad */
.calc-card {
  padding-top: 14px;
}

.title-wrap {
  gap: 0;
}

.entry-block {
  margin-top: 12px;
}

.amount-box {
  min-height: 58px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.amount-box input {
  font-size: clamp(28px, 8vw, 38px);
}

.input-hint {
  display: none !important;
}

.category-grid {
  margin-top: 12px;
}

.category-button {
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.category-grid.is-reordering .category-button {
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease, order .12s ease;
}

.category-button.is-dragging {
  border-color: var(--success-border);
  box-shadow: 0 0 0 3px var(--success-soft), 0 16px 34px rgba(0, 0, 0, .28);
  background: color-mix(in srgb, var(--field) 82%, var(--success) 18%);
  transform: scale(1.02);
  z-index: 2;
}

.quick-order-reset {
  width: 100%;
  min-height: 38px;
  margin-top: 8px;
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 780;
}

.quick-order-reset[hidden] {
  display: none !important;
}

.numpad-dock {
  bottom: max(0px, env(safe-area-inset-bottom));
  width: min(860px, 100%);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0;
}

html.use-custom-numpad:not(.numpad-collapsed) .app {
  padding-bottom: calc(206px + env(safe-area-inset-bottom));
}

html.use-custom-numpad.numpad-large:not(.numpad-collapsed) .app {
  padding-bottom: calc(254px + env(safe-area-inset-bottom));
}

html.use-custom-numpad.numpad-collapsed .app {
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

.numpad-expanded {
  display: block;
}

.numpad-dock .numpad {
  gap: 7px;
  margin: 0;
}

.numpad-dock .numpad button {
  min-height: 42px;
  font-size: 18px;
}

html.numpad-large .numpad-dock .numpad button {
  min-height: 54px;
  font-size: 21px;
}

.numpad-tab {
  display: none;
  width: 100%;
  min-height: auto;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

.numpad-tab-main,
.numpad-size-toggle {
  min-height: 44px;
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 800;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.numpad-tab-main {
  flex: 1 1 auto;
  border-radius: 999px;
  font-size: 15px;
}

.numpad-size-toggle {
  flex: 0 0 auto;
  min-width: 92px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--muted);
}

.numpad-dock.is-collapsed {
  width: min(430px, calc(100% - 24px));
  padding: 6px;
  bottom: max(6px, env(safe-area-inset-bottom));
  border-radius: 999px;
}

.numpad-dock.is-collapsed .numpad-expanded {
  display: none;
}

.numpad-dock.is-collapsed .numpad-tab {
  display: flex;
}

@media (max-width: 520px) {
  .calc-card { padding: 12px 12px 10px; }
  .entry-block { margin-top: 12px; }
  .amount-box { min-height: 56px; }
  .amount-label { font-size: 13px; }
  .amount-suffix { font-size: 18px; }
  .clear-input { width: 30px; height: 30px; }
  .numpad-dock { width: 100%; }
  .numpad-dock .numpad button { min-height: 42px; font-size: 18px; }
  html.numpad-large .numpad-dock .numpad button { min-height: 52px; font-size: 21px; }
}
.category-button {
  -webkit-touch-callout: none;
}

/* v0.6: arrow-only numpad controls and stronger touch drag feedback */
.numpad-arrow-key,
.numpad-arrow-open {
  font-size: 24px !important;
  line-height: 1;
}

.numpad-arrow-open {
  min-width: 72px;
  flex: 0 0 72px;
}

.numpad-dock .numpad .numpad-arrow-key {
  color: var(--text);
}

html.is-category-dragging,
html.is-category-dragging body {
  overscroll-behavior: contain;
}

html.is-category-dragging .category-button {
  touch-action: none;
}

.category-grid.is-reordering .category-button:not(.is-dragging) {
  border-color: color-mix(in srgb, var(--line) 75%, var(--success) 25%);
}

/* v0.7: clearer numpad arrows and smoother iPhone-style category drag */
.numpad-tab {
  justify-content: space-between;
}

.numpad-size-toggle {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
}

.numpad-tab-main {
  order: 2;
  flex: 0 0 72px;
  min-width: 72px;
}

.numpad-arrow-key,
.numpad-arrow-open {
  font-size: 32px !important;
  font-weight: 920;
  line-height: 1;
  color: var(--text) !important;
}

.numpad-dock .numpad .numpad-arrow-key {
  display: grid;
  place-items: center;
}

.category-button.is-drag-placeholder {
  opacity: .28;
  border-color: var(--success-border);
  border-style: dashed;
  background: color-mix(in srgb, var(--field) 82%, var(--success) 18%);
  box-shadow: inset 0 0 0 1px var(--success-soft);
  transform: none !important;
}

.category-drag-clone {
  position: fixed;
  z-index: 999;
  margin: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  opacity: .98;
  transform-origin: center;
  border-color: var(--success-border) !important;
  background: color-mix(in srgb, var(--field) 78%, var(--success) 22%) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .38), 0 0 0 4px var(--success-soft) !important;
  transition: none !important;
  will-change: transform;
}

.category-button.is-shifting {
  will-change: transform;
}

.category-button.is-drop-pop {
  animation: categoryDropPop .18s ease-out;
}

@keyframes categoryDropPop {
  0% { transform: scale(1.035); }
  100% { transform: scale(1); }
}

/* v0.8: drag insertion uses stable row/column hysteresis in app.js to reduce jitter on iPhone. */

/* v0.9: drag cleanup listens on document-level touch/pointer events so iPhone cannot leave a stuck pressed category. */


/* v0.10: real floating category clone and identical keyboard arrows. */

/* v0.12: category quick ordering uses swap instead of insertion. */
.numpad-chevron {
  display: block;
  line-height: 1;
  transform-origin: center;
}

.numpad-chevron-down {
  transform: rotate(180deg);
}

.numpad-arrow-key,
.numpad-arrow-open {
  display: grid !important;
  place-items: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.category-drag-clone {
  box-sizing: border-box;
}


/* v0.12: swap target is highlighted during drag; real exchange happens on release. */
.category-button.is-drop-target:not(.is-drag-placeholder) {
  border-color: var(--success-border);
  box-shadow: 0 0 0 3px var(--success-soft);
  background: color-mix(in srgb, var(--field) 84%, var(--success) 16%);
}

/* v0.13: drop-target highlight is cleared after drag/swap. */


/* v0.14: bottom settings gear, category column modes, keyboard size in settings. */
html.category-cols-2 .category-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html.category-cols-3 .category-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px;
}

html.category-cols-3 .category-button {
  min-height: 56px;
  padding: 8px 7px;
  border-radius: 12px;
}

html.category-cols-3 .category-name {
  font-size: 13px;
  letter-spacing: -.03em;
}

html.category-cols-3 .category-total {
  font-size: 11px;
}

.numpad-controls {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 8px;
  margin: 0 0 7px;
}

.numpad-gear {
  min-height: 44px;
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--text);
  font-size: 21px;
  font-weight: 860;
  display: grid;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.numpad-controls-spacer,
.numpad-tab-spacer {
  min-width: 0;
}

.numpad-tab {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.numpad-tab .numpad-gear {
  flex: 0 0 52px;
}

.numpad-tab-spacer {
  flex: 1 1 auto;
}

.numpad-tab-main {
  flex: 0 0 72px;
  min-width: 72px;
}

.settings-sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 12px 8px max(12px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .42);
}

.settings-sheet[hidden] {
  display: none !important;
}

.settings-sheet__box {
  width: min(860px, 100%);
  max-height: min(82dvh, 680px);
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .45);
  padding: 14px;
}

.settings-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.settings-sheet__header h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -.03em;
}

.settings-sheet__close {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
}

.settings-group {
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}

.settings-group:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.settings-group__title {
  margin-bottom: 8px;
  color: var(--text);
  font-weight: 840;
}

.settings-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.settings-option {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--field);
  color: var(--text);
  font-weight: 760;
}

.settings-option input {
  accent-color: var(--accent);
}

.settings-options--stacked {
  grid-template-columns: 1fr;
}

.settings-option--checkbox {
  justify-content: flex-start;
}

.settings-text-input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--field);
  color: var(--text);
  outline: none;
  padding: 0 12px;
  font-weight: 760;
}

.settings-text-input:focus {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.settings-sheet-actions {
  display: grid;
  gap: 8px;
}

.settings-sheet-actions .text-button {
  width: 100%;
}


.settings-option.is-disabled {
  opacity: .55;
}

.settings-option.is-disabled span {
  color: var(--muted);
}

.settings-sheet-note.is-warning {
  color: color-mix(in srgb, var(--muted) 70%, var(--warning, #f59e0b) 30%);
}

.settings-sheet-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.38;
}


/* v0.16: settings only in collapsed dock; collapse key is back inside the numpad. */
.numpad-controls,
#settingsGearExpanded,
#numpadClose {
  display: none !important;
}

.numpad-expanded {
  display: block !important;
}

.numpad-dock .numpad {
  margin: 0 !important;
}

.numpad-dock .numpad button,
.numpad-dock .numpad .numpad-arrow-key {
  border-radius: 12px !important;
}

.numpad-dock.is-collapsed {
  width: min(220px, calc(100% - 24px));
  padding: 6px;
  bottom: max(6px, env(safe-area-inset-bottom));
  border-radius: 18px;
}

.numpad-tab {
  min-height: 46px;
  gap: 8px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.numpad-tab .numpad-gear,
.numpad-tab-main {
  min-height: 46px;
  height: 46px;
  border-radius: 14px !important;
}

.numpad-tab .numpad-gear {
  flex: 0 0 52px;
  width: 52px;
  font-size: 20px;
}

.numpad-tab-spacer {
  flex: 1 1 auto;
}

.numpad-tab-main {
  flex: 0 0 68px;
  min-width: 68px;
  font-size: 32px !important;
}

.numpad-arrow-key,
.numpad-arrow-open {
  border-radius: 12px !important;
}

html.use-custom-numpad:not(.numpad-collapsed) .app {
  padding-bottom: calc(206px + env(safe-area-inset-bottom));
}

html.use-custom-numpad.numpad-large:not(.numpad-collapsed) .app {
  padding-bottom: calc(254px + env(safe-area-inset-bottom));
}

html.use-custom-numpad.numpad-collapsed .app {
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

@media (max-width: 520px) {
  .numpad-dock.is-collapsed {
    width: min(220px, calc(100% - 24px));
  }
}


/* v0.16: collapsed keyboard is only a small bar; expanded keypad is hidden with !important. */
.numpad-dock.is-collapsed .numpad-expanded {
  display: none !important;
}

.numpad-dock.is-collapsed .numpad-tab {
  display: flex !important;
}

.numpad-dock.is-collapsed {
  width: min(220px, calc(100% - 24px));
  padding: 6px;
  border-radius: 16px;
}

.numpad-dock.is-collapsed .numpad-tab .numpad-gear,
.numpad-dock.is-collapsed .numpad-tab-main {
  border-radius: 12px !important;
}

/* v0.17: collapsed dock spans the full keyboard width. */
.numpad-dock.is-collapsed {
  width: min(860px, 100%) !important;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  border-radius: 16px 16px 0 0;
  bottom: max(0px, env(safe-area-inset-bottom));
}

@media (max-width: 520px) {
  .numpad-dock.is-collapsed {
    width: 100% !important;
  }
}

/* v0.18: быстрый откат последнего действия и восстановление после очистки */
.last-action,
.restore-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--field) 82%, transparent);
}

.last-action[hidden],
.restore-panel[hidden] { display: none !important; }

.last-action.is-confirmed {
  border-color: var(--success-border);
  background: color-mix(in srgb, var(--field) 80%, var(--success) 20%);
  box-shadow: 0 0 0 3px var(--success-soft);
}


.last-action__text,
.restore-panel__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 13px;
  font-weight: 720;
}

.last-action__undo,
.restore-panel__button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--accent-border);
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--text);
  font-size: 13px;
  font-weight: 820;
}

.restore-panel {
  border-color: var(--success-border);
  background: var(--success-soft);
}

.restore-panel__text { color: var(--text); }

.danger-button {
  border-color: color-mix(in srgb, var(--danger) 55%, transparent);
  background: var(--danger-soft);
}

@media (max-width: 420px) {
  .last-action,
  .restore-panel {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .last-action__text,
  .restore-panel__text { white-space: normal; }
  .last-action__undo,
  .restore-panel__button { width: 100%; }
}


/* v0.19: compact history and category detail view. */
.total-row-button {
  width: 100%;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.total-row-button:active {
  border-color: var(--accent-border);
  background: color-mix(in srgb, var(--field) 82%, var(--accent) 18%);
}

.history-compact-note {
  margin: 2px 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

.history-more-button {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 800;
}

.category-detail-dialog {
  align-items: end;
  justify-items: center;
  padding: 12px 8px max(12px, env(safe-area-inset-bottom));
}

.category-detail__box {
  width: min(860px, 100%);
  max-height: min(82dvh, 680px);
  overflow: auto;
  padding: 14px;
}

.category-detail__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.category-detail__header h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -.03em;
}

.category-detail__summary {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.category-detail__close {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
}

.category-detail__hint {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.category-detail-list {
  display: grid;
  gap: 6px;
}

.category-detail-list .history-row {
  background: color-mix(in srgb, var(--field) 75%, transparent);
}

.category-detail-dialog {
  z-index: 42;
}


.excel-review-dialog,
.onboarding-dialog {
  align-items: end;
  justify-items: center;
  padding: 12px 8px max(12px, env(safe-area-inset-bottom));
  z-index: 43;
}

.excel-review__box,
.onboarding__box {
  width: min(860px, 100%);
  max-height: min(86dvh, 720px);
  overflow: auto;
  padding: 14px;
}

.excel-review__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.excel-review__header h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -.03em;
}

.excel-review__summary,
.excel-review__hint {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.excel-review__summary { margin-top: 4px; font-weight: 760; }
.excel-review__hint { margin: 0 0 10px; }

.excel-review__close {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
}


.excel-control {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--field) 72%, transparent);
}

.excel-control__label {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.excel-control__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: center;
}

.excel-control__input {
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 17px;
  font-weight: 820;
  outline: none;
}

.excel-control__input:focus {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line-soft));
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.excel-control__clear {
  height: 42px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  font-weight: 760;
  line-height: 1;
}

.excel-control__result {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 720;
  line-height: 1.35;
}

.excel-control__result.is-ok {
  color: var(--success);
}

.excel-control__result.is-warn {
  color: var(--danger);
}

.excel-control__result.is-empty {
  color: var(--muted);
}

.excel-review__option {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--field) 72%, transparent);
  color: var(--text);
  font-size: 13px;
  font-weight: 720;
}

.excel-review__option input { width: 18px; height: 18px; accent-color: var(--accent); }

.excel-review-list {
  display: grid;
  gap: 6px;
}

.excel-review-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--field) 75%, transparent);
}

.excel-review-row.is-zero { opacity: .56; }

.excel-review-index {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.excel-review-name {
  min-width: 0;
  font-size: 15px;
  font-weight: 820;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.excel-review-value-wrap { text-align: right; }
.excel-review-value { font-size: 15px; font-weight: 860; }
.excel-review-count { margin-top: 2px; color: var(--muted); font-size: 12px; }

.excel-review__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.excel-review__actions .text-button { flex: 1 1 150px; }

/* v0.23: archive of saved calculations. */
.secondary-actions--split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.archive-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.archive-row {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--field) 75%, transparent);
}

.archive-row__main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.archive-row__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 840;
}

.archive-row__meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

.archive-row__actions,
.archive-row__copy {
  display: grid;
  gap: 8px;
}

.archive-row__actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.archive-row__copy {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.archive-row__actions .text-button,
.archive-row__copy .text-button {
  min-height: 38px;
  padding: 0 8px;
  font-size: 13px;
}

.save-archive-dialog {
  position: fixed;
  inset: 0;
  z-index: 44;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, .45);
}

.save-archive-dialog[hidden] { display: none !important; }

.save-archive__box {
  width: min(440px, 100%);
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .3);
}

.save-archive__title {
  font-size: 18px;
  font-weight: 850;
}

.save-archive__text {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.35;
}

.save-archive__input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--field);
  color: var(--text);
  outline: none;
  padding: 0 12px;
  font-weight: 760;
}

.save-archive__input:focus {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.save-archive__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 420px) {
  .secondary-actions--split { grid-template-columns: 1fr; }
  .archive-row__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-row__copy { grid-template-columns: 1fr; }
}



/* v0.27: operation edit dialog. */
.edit-operation-dialog {
  align-items: end;
  justify-items: center;
  padding: 12px 8px max(12px, env(safe-area-inset-bottom));
  z-index: 46;
}

.edit-operation__box {
  width: min(520px, 100%);
  display: grid;
  gap: 12px;
  padding: 16px;
}

.edit-operation__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.edit-operation__header h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -.03em;
}

.edit-operation__summary {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.edit-operation__close {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
}

.edit-operation__field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 780;
}

.edit-operation__field input,
.edit-operation__field select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--field);
  color: var(--text);
  outline: none;
  padding: 0 12px;
  font-size: 18px;
  font-weight: 820;
}

.edit-operation__field input:focus,
.edit-operation__field select:focus {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.edit-operation__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 420px) {
  .history-row { grid-template-columns: minmax(0, 1fr) auto; }
  .history-amount { grid-column: 1 / 2; }
  .history-row-actions { grid-column: 2 / 3; grid-row: 1 / 3; }
}

/* v0.26: первый запуск показывает быстрый старт; опытным пользователям он не выводится после закрытия. */
.onboarding__box {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.onboarding__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.onboarding__eyebrow {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.onboarding__header h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -.03em;
}

.onboarding__close {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
}

.onboarding__steps {
  display: grid;
  gap: 8px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.onboarding__steps li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--field) 82%, transparent);
}

.onboarding__steps span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 860;
}

.onboarding__steps p {
  margin: 3px 0 0;
  color: var(--text);
  line-height: 1.34;
}

.onboarding__note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.38;
}

.onboarding__actions {
  display: grid;
  gap: 8px;
}

.onboarding__actions .text-button {
  width: 100%;
}

/* v0.30: haptic support detection and stronger visual confirmation for iPhone/Safari. */

/* v0.34: rounding tolerance is disabled in Excel check when operation rounding is off. */


.screen-import-panel {
  padding: 12px;
  display: grid;
  gap: 8px;
}

.screen-import-button {
  min-height: 46px;
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 820;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
}

.screen-import-panel .panel-text {
  margin: 0;
}