@font-face {
  font-family: 'Manrope';
  src: url('/static/fonts/manrope-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('/static/fonts/manrope-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('/static/fonts/manrope-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('/static/fonts/manrope-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Unbounded';
  src: url('/static/fonts/unbounded-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Unbounded';
  src: url('/static/fonts/unbounded-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Unbounded';
  src: url('/static/fonts/unbounded-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  --bg: #F4F0E8;
  --ink: #1D1A16;
  --green: #3C7A4B;
  --yellow: #D08A24;
  --red: #A8342A;
  --blue: #2F5579;
  --border: #E2DBCF;
  --card: #FFFFFF;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, .title {
  font-family: 'Unbounded', system-ui, sans-serif;
  font-weight: 700;
  margin: 0 0 8px 0;
}

button, .btn {
  font-family: inherit;
  font-size: 16px;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink);
  padding: 10px 16px;
  cursor: pointer;
}
button:active { transform: scale(0.98); }
button.primary { background: var(--green); color: #fff; border-color: var(--green); font-weight: 600; }
button.danger { background: var(--red); color: #fff; border-color: var(--red); }
button.ghost { background: transparent; }
button:disabled { opacity: .5; cursor: not-allowed; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
}

.pill {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 600;
}
.pill.green { background: #E4F0E6; color: var(--green); }
.pill.yellow { background: #FBEEDB; color: var(--yellow); }
.pill.red { background: #F5E1DE; color: var(--red); }
.pill.blue { background: #DEE8F0; color: var(--blue); }
.pill.gray { background: var(--border); color: #6b6558; }

.bar-track {
  height: 8px; border-radius: 4px; background: var(--border); overflow: hidden;
}
.bar-fill { height: 100%; border-radius: 4px; }
.bar-fill.green { background: var(--green); }
.bar-fill.yellow { background: var(--yellow); }
.bar-fill.red { background: var(--red); }

.tabs { display: flex; gap: 4px; background: var(--border); border-radius: 12px; padding: 4px; }
.tabs button { flex: 1; border: none; background: transparent; border-radius: 9px; }
.tabs button.active { background: var(--card); font-weight: 700; }

.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 280px; margin: 0 auto; }
.numpad button { font-size: 22px; height: 56px; }

.app-shell { max-width: 480px; margin: 0 auto; padding: 16px; min-height: 100vh; }
.app-shell.widget { min-height: unset; border: 1px solid var(--border); border-radius: 16px; }

.flag { color: var(--yellow); font-size: 13px; }
.muted { color: #7a7568; font-size: 13px; }

input[type=text], input[type=number] {
  font-family: inherit; font-size: 16px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); width: 100%;
}

.grid-taps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }