/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --primary: #6C5CE7;
  --primary-light: #a29bfe;
  --bg: #0f0f1a;
  --surface: #1a1a2e;
  --surface-2: #222240;
  --text: #f0f0f5;
  --text-muted: #8888aa;
  --green: #00cec9;
  --red: #ff6b6b;
  --radius: 12px;
  --nav-height: 64px;
}
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 480px;
  margin: 0 auto;
}

/* === Header === */
header {
  text-align: center;
  padding: 16px 0 8px;
}
header h1 {
  font-size: 1.4rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* === Pages === */
.page {
  display: none;
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 16px;
}
.page.active { display: flex; flex-direction: column; }
.page-placeholder {
  color: var(--text-muted);
  text-align: center;
  margin-top: 60px;
  font-size: 1rem;
}
.page h2 {
  font-size: 1.1rem;
  text-align: center;
  margin: 16px 0;
  color: var(--text-muted);
}

/* === Mode Tabs === */
.mode-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 0 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mode-tabs::-webkit-scrollbar { display: none; }
.mode-tab {
  flex-shrink: 0;
  padding: 8px 14px;
  border: none;
  border-radius: 20px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.mode-tab.active {
  background: var(--primary);
  color: #fff;
}

/* === Calc Panels === */
.calc-panel { display: none; flex-direction: column; gap: 20px; }
.calc-panel.active { display: flex; }

.input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 8px 0;
}
.input-row .label {
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 500;
}
.input-row input {
  width: 100px;
  padding: 14px 12px;
  border: 2px solid var(--surface-2);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 1.3rem;
  font-weight: 600;
  text-align: center;
  outline: none;
  transition: border-color 0.15s;
  -moz-appearance: textfield;
}
.input-row input::-webkit-inner-spin-button,
.input-row input::-webkit-outer-spin-button { -webkit-appearance: none; }
.input-row input:focus {
  border-color: var(--primary);
}

/* === Result Box === */
.result-box {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 28px 16px;
  text-align: center;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--surface-2);
  transition: border-color 0.2s;
}
.result-box.has-result {
  border-color: var(--primary);
}
.result-value {
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: -1px;
  transition: color 0.2s;
  word-break: break-all;
}
.result-value.increase { color: var(--green); }
.result-value.decrease { color: var(--red); }
.result-direction {
  font-size: 0.95rem;
  color: var(--text-muted);
  font-weight: 500;
}
.result-detail {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* === Bottom Nav === */
.bottom-nav {
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--surface-2);
  height: var(--nav-height);
  flex-shrink: 0;
}
.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s;
  font-size: 0.7rem;
}
.nav-btn.active { color: var(--primary-light); }
.nav-icon { font-size: 1.4rem; }
.nav-label { font-weight: 600; }

/* === Convert Tabs === */
.convert-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 0 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.convert-tabs::-webkit-scrollbar { display: none; }
.convert-tab {
  flex-shrink: 0;
  padding: 8px 14px;
  border: none;
  border-radius: 20px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.convert-tab.active {
  background: var(--primary);
  color: #fff;
}

/* === Convert Panels === */
.convert-panel { display: none; flex-direction: column; gap: 16px; }
.convert-panel.active { display: flex; }
.panel-desc {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  line-height: 1.4;
}

/* === Fraction/Decimal/% Converter === */
.convert-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.convert-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.convert-field label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.convert-field input {
  padding: 14px 12px;
  border: 2px solid var(--surface-2);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 1.3rem;
  font-weight: 600;
  text-align: center;
  outline: none;
  transition: border-color 0.15s;
  -moz-appearance: textfield;
  width: 100%;
}
.convert-field input::-webkit-inner-spin-button,
.convert-field input::-webkit-outer-spin-button { -webkit-appearance: none; }
.convert-field input:focus { border-color: var(--primary); }
.frac-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}
.frac-inputs input { flex: 1; }
.frac-slash {
  font-size: 1.8rem;
  color: var(--text-muted);
  font-weight: 300;
}
.pct-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pct-input-wrap input { flex: 1; }
.pct-symbol {
  font-size: 1.4rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* === Margin vs Markup === */
.margin-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.margin-card {
  background: var(--surface);
  border: 1px solid var(--surface-2);
  border-radius: var(--radius);
  padding: 16px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.margin-card.full-width { grid-column: 1 / -1; }
.margin-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.margin-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text);
}
.margin-explain {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* === Compound Percentage === */
.compound-inputs { display: flex; flex-direction: column; gap: 10px; }
.compound-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}
.compound-step select {
  padding: 10px 8px;
  border: 2px solid var(--surface-2);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
}
.compound-step select:focus { border-color: var(--primary); }
.compound-step input {
  width: 70px;
  padding: 10px 8px;
  border: 2px solid var(--surface-2);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
}
.compound-step input::-webkit-inner-spin-button,
.compound-step input::-webkit-outer-spin-button { -webkit-appearance: none; }
.compound-step input:focus { border-color: var(--primary); }
.compound-step-result {
  font-size: 0.85rem;
  color: var(--primary-light);
  font-weight: 500;
  margin-left: auto;
  white-space: nowrap;
}
.add-step-btn {
  padding: 10px;
  border: 2px dashed var(--surface-2);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.add-step-btn:hover { border-color: var(--primary); color: var(--primary-light); }

/* === Split Percentage === */
.split-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
.split-row .split-name {
  flex: 1;
  padding: 10px 8px;
  border: 2px solid var(--surface-2);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
  outline: none;
}
.split-row .split-name:focus { border-color: var(--primary); }
.split-row .split-pct {
  width: 60px;
  padding: 10px 8px;
  border: 2px solid var(--surface-2);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
}
.split-row .split-pct::-webkit-inner-spin-button,
.split-row .split-pct::-webkit-outer-spin-button { -webkit-appearance: none; }
.split-row .split-pct:focus { border-color: var(--primary); }
.split-amount {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary-light);
  min-width: 70px;
  text-align: right;
}
.split-summary {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--surface-2);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.split-summary .over { color: var(--red); }
.split-summary .under { color: var(--green); }
.split-summary .exact { color: var(--green); font-weight: 600; }

/* === Quick Reference Table === */
.ref-table {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--surface-2);
}
.ref-header, .ref-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  padding: 12px 16px;
}
.ref-header {
  background: var(--surface-2);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ref-row {
  background: var(--surface);
  border-top: 1px solid var(--surface-2);
  font-size: 1rem;
}
.ref-row .ref-pct {
  color: var(--text-muted);
  font-weight: 500;
}
.ref-row .ref-result {
  font-weight: 700;
  color: var(--text);
}
.ref-row:nth-child(odd) { background: rgba(108, 92, 231, 0.04); }

/* === Result Action Buttons === */
.result-actions {
  display: none;
  gap: 8px;
  margin-top: 8px;
}
.result-box.has-result .result-actions {
  display: flex;
}
.action-btn {
  padding: 6px 14px;
  border: 1px solid var(--surface-2);
  border-radius: 20px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.action-btn:hover { border-color: var(--primary); color: var(--primary-light); }
.action-btn.copied {
  background: var(--green);
  color: #000;
  border-color: var(--green);
}

/* === History Page === */
.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 12px;
}
.history-toggle {
  display: flex;
  gap: 4px;
  background: var(--surface);
  border-radius: 20px;
  padding: 3px;
}
.htab {
  padding: 7px 16px;
  border: none;
  border-radius: 18px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.htab.active {
  background: var(--primary);
  color: #fff;
}
.clear-history-btn {
  padding: 7px 12px;
  border: 1px solid var(--surface-2);
  border-radius: 20px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s;
}
.clear-history-btn:hover { border-color: var(--red); color: var(--red); }

.history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  overflow-y: auto;
  padding-bottom: 8px;
}

.history-item {
  background: var(--surface);
  border: 1px solid var(--surface-2);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: border-color 0.15s;
  position: relative;
}
.history-item:hover { border-color: var(--primary); }
.history-item.favorite { border-color: rgba(255, 215, 0, 0.4); }

.history-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.history-mode {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--primary-light);
  background: rgba(108, 92, 231, 0.15);
  padding: 3px 8px;
  border-radius: 10px;
}
.history-time {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.history-expression {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.3;
}
.history-result {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
}

.history-item-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.history-action-btn {
  padding: 5px 10px;
  border: 1px solid var(--surface-2);
  border-radius: 16px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}
.history-action-btn:hover { border-color: var(--primary); color: var(--primary-light); }
.history-action-btn.fav-btn.is-fav { color: gold; border-color: rgba(255, 215, 0, 0.5); }

/* === Toast notification === */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--primary);
  color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s ease;
  z-index: 100;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* === Light Theme === */
body.light {
  --bg: #f5f5fa;
  --surface: #ffffff;
  --surface-2: #e8e8f0;
  --text: #1a1a2e;
  --text-muted: #6b6b8a;
  --primary: #6C5CE7;
  --primary-light: #7c6ef0;
}
body.light .mode-tab,
body.light .convert-tab {
  background: var(--surface-2);
}
body.light .mode-tab.active,
body.light .convert-tab.active {
  background: var(--primary);
  color: #fff;
}
body.light .result-box {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
body.light .input-row input,
body.light .convert-field input,
body.light .compound-step input,
body.light .compound-step select,
body.light .split-row .split-name,
body.light .split-row .split-pct {
  background: #fff;
  border-color: #ddd;
}
body.light .bottom-nav {
  background: #fff;
  border-top-color: #e0e0e0;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}
body.light header h1 {
  -webkit-text-fill-color: var(--primary);
}
body.light .keypad {
  background: #fff;
  border-top-color: #e0e0e0;
}
body.light .key {
  background: var(--surface-2);
  color: var(--text);
}
body.light .key:active {
  background: var(--primary);
  color: #fff;
}
body.light .key-action {
  background: #ddd;
}

/* === Settings Page === */
.settings-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}
.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--surface);
  border-radius: var(--radius);
}
.setting-item:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.setting-item:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.setting-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.setting-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}
.setting-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Toggle Switch */
.toggle {
  position: relative;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
}
.toggle input {
  display: none;
}
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--surface-2);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.toggle input:checked + .toggle-slider {
  background: var(--primary);
}
.toggle input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

/* === Calculator Keypad === */
.keypad {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 8px 4px;
  background: var(--surface);
  border-top: 1px solid var(--surface-2);
  flex-shrink: 0;
}
.keypad.visible {
  display: grid;
}
.key {
  padding: 16px 8px;
  border: none;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 1.3rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.1s;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.key:active {
  background: var(--primary);
  color: #fff;
  transform: scale(0.95);
}
.key-action {
  background: var(--surface);
  font-size: 1rem;
}
.key-primary {
  background: var(--primary);
  color: #fff;
}
.key-primary:active {
  background: var(--primary-light);
}
.key-wide {
  grid-column: span 2;
}

/* === Number Animation === */
@keyframes resultPop {
  0% { transform: scale(0.8); opacity: 0.5; }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}
.result-value.animate {
  animation: resultPop 0.25s ease-out;
}

/* === Color-coded results === */
.result-value.positive { color: var(--green); }
.result-value.negative { color: var(--red); }

/* === Utility === */
@media (min-width: 481px) {
  #app { border-left: 1px solid var(--surface-2); border-right: 1px solid var(--surface-2); }
}