/* The app's real screens rebuilt in HTML (17 Oct 2026 build): colours, sizes and copy taken from the Swift code
   (StiverColor, StiverFont, HomeView, ItemRow, ItemDetailView, SettingsView). Shared by every proposal. */
@font-face { font-family: "JB"; src: url("fonts/JetBrainsMono-Medium.ttf"); font-weight: 400 700; }
@font-face { font-family: "Inter"; src: url("fonts/InterVariable.ttf"); font-weight: 100 900; }

:root {
  --app-bg: #FAFBFC; --app-surface: #FFFFFF; --app-surface2: #F4F6F8; --app-ink: #0A0D12;
  --app-muted: #667085; --app-line: #EEF1F4; --app-accent: #2D4A7A; --app-accent-soft: #E5EBF3;
}
.phone {
  --s: 1; width: calc(393px * var(--s)); height: calc(852px * var(--s)); border-radius: calc(56px * var(--s));
  background: #0A0D12; padding: calc(11px * var(--s)); box-shadow: 0 40px 80px -30px rgba(10,13,18,.35), 0 0 0 1px rgba(10,13,18,.06);
  position: relative; flex: none;
}
.screen {
  width: 393px; height: 852px; transform: scale(calc((393 * var(--s) - 22 * var(--s)) / 393)); transform-origin: 0 0;
  border-radius: 46px; overflow: hidden; background: var(--app-bg); color: var(--app-ink); position: relative;
  font-family: "Inter", system-ui, sans-serif; font-size: 15px; -webkit-font-smoothing: antialiased;
}
.screen .island { position: absolute; left: 50%; top: 11px; width: 124px; height: 36px; margin-left: -62px; border-radius: 20px; background: #000; }
.screen .status { height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 6px 34px 0 46px; font-weight: 600; font-size: 16px; }
.screen .body { padding: 0 16px; }
.mono { font-family: "JB", ui-monospace, monospace; }
.a-head { display: flex; align-items: center; padding-top: 16px; }
.a-word { font-family: "JB"; font-size: 26px; letter-spacing: -.01em; }
.a-word i { display: inline-block; width: .22em; height: .22em; background: var(--app-accent); margin-left: .04em; font-style: normal; }
.a-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--app-surface2); display: grid; place-items: center; margin-left: 8px; }
.a-btn svg { width: 16px; height: 16px; stroke: var(--app-ink); fill: none; stroke-width: 1.8; }
.a-burn { margin-top: 16px; background: var(--app-surface2); border-radius: 12px; padding: 16px; }
.a-cap { font-family: "JB"; font-size: 11px; color: var(--app-muted); letter-spacing: .02em; }
.a-total { font-family: "JB"; font-size: 40px; letter-spacing: -.02em; margin-top: 8px; }
.a-total small { font-family: "Inter"; font-size: 15px; color: var(--app-muted); margin-left: 4px; letter-spacing: 0; }
.a-chips { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.a-chip { font-family: "JB"; font-size: 11px; color: var(--app-muted); background: var(--app-surface2); border-radius: 99px; padding: 8px 12px; }
.a-chip.on { background: var(--app-ink); color: var(--app-bg); }
.a-list { margin-top: 16px; background: var(--app-surface); border: 1px solid var(--app-line); border-radius: 16px; }
.a-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--app-line); }
.a-row:first-child { border-top: 0; }
.a-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--app-muted); flex: none; }
.a-dot.soon { background: var(--app-accent); }
.a-name { font-weight: 500; }
.a-sub { font-size: 13px; color: var(--app-muted); margin-top: 2px; }
.a-right { margin-left: auto; text-align: right; }
.a-price { font-weight: 500; font-size: 14px; font-variant-numeric: tabular-nums; }
.a-card { background: var(--app-surface); border: 1px solid var(--app-line); border-radius: 16px; padding: 16px; margin-top: 12px; }
.a-display { font-family: "JB"; font-size: 28px; }
.a-buttons { display: flex; gap: 8px; margin-top: 24px; }
.a-buttons span { flex: 1; text-align: center; padding: 12px; border-radius: 12px; background: var(--app-surface); border: 1px solid var(--app-line); font-weight: 500; }
.a-log { margin-top: 24px; }
.a-log .a-list { margin-top: 12px; }
.a-log .a-row { justify-content: space-between; }
.a-notice { margin-top: 16px; background: var(--app-accent-soft); border-radius: 12px; padding: 16px; display: flex; gap: 12px; }

/* an iOS notification banner */
.notif {
  display: flex; gap: 10px; align-items: flex-start; width: 360px; padding: 12px 14px; border-radius: 22px;
  background: rgba(245,246,248,.92); backdrop-filter: blur(20px); box-shadow: 0 18px 40px -18px rgba(10,13,18,.35);
  font-family: "Inter"; color: #0A0D12;
}
.notif .ico { width: 38px; height: 38px; border-radius: 9px; background: #fff; border: 1px solid #e6e8ec; display: grid; place-items: center;
  font-family: "JB"; font-size: 17px; flex: none; }
.notif .ico i { display: inline-block; width: 4px; height: 4px; background: var(--app-accent); margin-left: 1px; }
.notif b { font-weight: 600; font-size: 15px; }
.notif .when { margin-left: auto; font-size: 13px; color: #8a8f98; }
.notif p { margin: 1px 0 0; font-size: 15px; }