:root {
  --sky-top: #73b8f2;
  --sky-bottom: #a6e0fa;
  --grass: #6bb861;
  --grass-dark: #52944d;
  --path: #c7ad85;
  --water: #59a6e6;
  --panel-bg: #1c1c1e;
  --panel-bg-elevated: #2c2c2e;
  --panel-border: #3a3a3c;
  --text-primary: #ffffff;
  --text-secondary: #8e8e93;
  --income-green: #30d158;
  --expense-red: #ff453a;
  --ios-blue: #0a84ff;
  --shadow: rgba(0, 0, 0, 0.4);
  --font-pixel: 'Press Start 2P', monospace;
  --font-ios: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  /* Реальный inset; на десктоп-превью ниже задаём 34px под «чёлку»/home */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tab-bar-h: 49px;
  --balance-h: 64px;
  --screen-header-h: 72px;
  --screen-toolbar-h: 48px;
  --phone-w: 393px;
  --phone-h: 852px;
  --phone-radius: 55px;
  --screen-radius: 47px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  font-family: var(--font-ios);
  background: #0d0d0f;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

/* ===== Сцена с iPhone ===== */
.preview-stage {
  width: 100%;
  width: 100vw;
  height: 100%;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(60, 60, 80, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(40, 50, 70, 0.3) 0%, transparent 50%),
    linear-gradient(160deg, #1a1a22 0%, #0d0d12 50%, #121218 100%);
}

.iphone {
  transform-origin: center center;
}

.iphone-frame {
  position: relative;
  width: var(--phone-w);
  height: var(--phone-h);
  background: linear-gradient(145deg, #3a3a3e 0%, #1a1a1c 30%, #2a2a2e 70%, #1c1c1e 100%);
  border-radius: var(--phone-radius);
  padding: 12px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 0 0 3px #111,
    0 30px 80px rgba(0,0,0,0.7),
    inset 0 0 0 1px rgba(255,255,255,0.05);
}

/* Кнопки iPhone */
.iphone-btn {
  position: absolute;
  background: linear-gradient(90deg, #2a2a2e, #1a1a1c);
  border-radius: 2px;
  z-index: 10;
}
.iphone-btn-silent { left: -3px; top: 120px; width: 3px; height: 28px; }
.iphone-btn-vol-up { left: -3px; top: 170px; width: 3px; height: 50px; }
.iphone-btn-vol-down { left: -3px; top: 230px; width: 3px; height: 50px; }
.iphone-btn-power { right: -3px; top: 180px; width: 3px; height: 72px; }

.iphone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--panel-bg);
  border-radius: var(--screen-radius);
  overflow: hidden;
  isolation: isolate;
}

/* Dynamic Island */
.dynamic-island {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 126px;
  height: 37px;
  background: #000;
  border-radius: 20px;
  z-index: 200;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04);
}

/* Status Bar */
.status-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--safe-top);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 28px 8px;
  z-index: 150;
  pointer-events: none;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.3px;
  transition: color 0.8s ease;
}

.status-bar-light { color: #1c1c1e; }
.status-bar-dark { color: #ffffff; }

.status-bar-light .status-icon,
.status-bar-dark .status-icon { transition: fill 0.8s ease; }

.status-icons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-icon {
  width: 18px;
  height: 12px;
}
.status-battery { width: 27px; height: 13px; }

/* Home Indicator */
.home-indicator {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 134px;
  height: 5px;
  background: rgba(255,255,255,0.35);
  border-radius: 3px;
  z-index: 150;
  pointer-events: none;
}

/* ===== Приложение ===== */
#app {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
}

.app-content {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: var(--safe-top);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
}

.screen.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

/* Navigation — фиксированная высота на всех вкладках */
.nav-header {
  height: var(--screen-header-h);
  padding: 4px 20px 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 8px;
}

.nav-header-map {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}

.nav-header-standard {
  justify-content: flex-end;
}

.nav-header-with-action {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}

.ios-fab-small {
  width: 32px;
  height: 32px;
  box-shadow: 0 2px 6px rgba(48, 209, 88, 0.3);
}

.nav-subtitle-placeholder {
  visibility: hidden;
}

.screen-toolbar {
  height: var(--screen-toolbar-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 16px;
}

.screen-toolbar-empty {
  pointer-events: none;
}

.screen-toolbar .segmented-control {
  margin: 0;
  width: 100%;
}

.map-style-picker {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  width: 100%;
  padding: 2px 0;
  scrollbar-width: none;
}

.map-style-picker::-webkit-scrollbar {
  display: none;
}

.map-style-btn {
  flex-shrink: 0;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  background: var(--surface-secondary, rgba(120, 120, 128, 0.16));
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.map-style-btn.active {
  background: var(--accent, #007aff);
  color: #fff;
}

.map-style-btn:active {
  transform: scale(0.96);
}

.map-night .map-style-btn {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}

.map-night .map-style-btn.active {
  background: rgba(100, 180, 255, 0.85);
  color: #fff;
}

.screen-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.large-title {
  font-family: var(--font-pixel);
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.5px;
  text-transform: uppercase;
}

.nav-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
  font-weight: 400;
}

.ios-fab {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--income-green);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(48, 209, 88, 0.35);
  transition: transform 0.15s, opacity 0.15s;
}
.ios-fab:active { transform: scale(0.92); opacity: 0.85; }

/* Map screen — карта на весь экран, только кнопка «+» */
#screen-map.screen {
  padding-top: 0;
}

#screen-map .map-screen-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#screen-map .map-container {
  flex: 1;
  border-radius: 0;
}

.map-fab {
  position: absolute;
  top: max(10px, env(safe-area-inset-top, 0px));
  right: max(14px, env(safe-area-inset-right, 0px));
  z-index: 25;
}

.session-user-chip {
  position: absolute;
  left: max(10px, env(safe-area-inset-left, 0px));
  top: max(10px, env(safe-area-inset-top, 0px));
  z-index: 25;
  max-width: 68%;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(10, 14, 22, 0.72);
  color: #d7e6ff;
  font-size: 10px;
  line-height: 1.2;
  pointer-events: none;
  backdrop-filter: blur(6px);
}

/* Map */
.map-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
  border-radius: 12px 12px 0 0;
}

.map-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  background-color: #c4a574;
  background-image: url('../assets/map/map-viewport-tile.png?v=2');
  background-repeat: repeat;
  background-size: 96px 96px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.map-viewport:active {
  cursor: grabbing;
}

/* Время суток — мягкий ambient поверх карты (не ломает тайлы) */
.map-tod-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.2;
  transition: background 1.2s ease, opacity 1.2s ease;
}

.map-period-night .map-tod-overlay,
.map-period-dusk .map-tod-overlay {
  mix-blend-mode: soft-light;
}

.map-tod-chip {
  position: absolute;
  left: 50%;
  top: max(10px, env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
  z-index: 24;
  max-width: min(70vw, 260px);
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(10, 14, 22, 0.72);
  color: #e8eef8;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: background 0.6s ease, color 0.6s ease;
}

.map-period-dawn .map-tod-chip,
.map-period-evening .map-tod-chip {
  background: rgba(40, 22, 12, 0.78);
  color: #ffe8d0;
}

.map-period-night .map-tod-chip,
.map-period-dusk .map-tod-chip {
  background: rgba(8, 12, 28, 0.82);
  color: #d4e0ff;
}

.map-period-night .map-viewport {
  filter: saturate(0.85) brightness(0.92);
}

.map-period-dawn .map-viewport,
.map-period-evening .map-viewport {
  filter: saturate(1.08) contrast(1.02);
}

.map-world {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

#map-canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  image-rendering: auto;
}

#buildings-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* Персонажи всегда поверх зданий */
#pedestrians-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

#carts-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

#construction-workers-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.construction-worker {
  position: absolute;
  pointer-events: none;
  will-change: left, top, transform;
  transform-origin: center bottom;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.42));
}

.map-character-sprite {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background-color: transparent;
}

.pedestrian .map-character-sprite,
.construction-worker .map-character-sprite {
  display: block;
}

.pedestrian-bag,
.worker-cargo {
  position: absolute;
  top: -2px;
  right: -6px;
  display: none;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

.construction-worker.is-carrying .worker-cargo-log {
  top: -4px;
  right: -8px;
}

.construction-worker.is-carrying .worker-cargo-coin {
  top: 0;
  right: -4px;
  filter: drop-shadow(0 0 3px rgba(242, 201, 76, 0.55));
}

.pedestrian,
.p_1-walker {
  position: absolute;
  pointer-events: none;
  will-change: left, top, transform;
  transform-origin: center bottom;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4));
}

.p_2-walker,
.cart-walker {
  position: absolute;
  pointer-events: none;
  will-change: left, top, transform;
  transform-origin: center bottom;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

.p_2-sprite,
.cart-walker-sprite {
  display: block;
  image-rendering: auto;
}

.pedestrian-carrying .pedestrian-bag {
  display: block;
  filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.45));
}

.map-zoom-controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10;
}

.map-zoom-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  font-size: 20px;
  font-weight: 600;
  color: #1c1c1e;
  cursor: pointer;
  line-height: 1;
}

.map-night .map-zoom-btn {
  background: rgba(44, 44, 46, 0.92);
  color: #fff;
}

.map-zoom-btn:active {
  transform: scale(0.92);
}

.building-wrapper.slot-construction {
  opacity: 0.95;
  cursor: pointer;
}

.building-wrapper.slot-construction .building-visual {
  filter: grayscale(0.1) drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.25));
}

.building-wrapper.slot-construction .building-visual-anchor > .building-visual.is-construction {
  animation: construction-bounce 1.1s ease-in-out infinite;
}

.building-wrapper.slot-construction .building-visual-anchor > .building-visual.is-construction::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 20%;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 160, 80, 0.35) 0%, transparent 70%);
  animation: construction-dust 1.4s ease-out infinite;
  pointer-events: none;
}

.building-wrapper.slot-construction .construction-svg {
  animation: construction-sway 2.2s ease-in-out infinite;
  transform-origin: center bottom;
}

.building-wrapper.slot-income .building-visual {
  filter: drop-shadow(0 0 6px rgba(48, 209, 88, 0.25)) drop-shadow(2px 6px 6px rgba(0, 0, 0, 0.35));
}

@keyframes construction-bounce {
  0%, 100% { transform: translateX(-50%) scale(var(--depth, 1)); }
  50% { transform: translateX(-50%) scale(var(--depth, 1)) translateY(-3px); }
}

@keyframes construction-sway {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-1.2deg); }
  75% { transform: rotate(1.2deg); }
}

@keyframes construction-dust {
  0% { opacity: 0.7; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1.4); }
}

.building-wrapper.slot-building-reveal .building-visual-anchor > .building-visual.is-reveal-rise {
  animation: building-reveal-rise 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.building-wrapper.slot-building-reveal .building-label-slot .building-label {
  animation: building-label-reveal 0.8s ease-out 0.35s both;
}

@keyframes building-reveal-rise {
  0% {
    transform: translateX(-50%) scale(calc(var(--depth, 1) * 0.2));
    opacity: 0.25;
    filter: brightness(1.35) drop-shadow(0 0 10px rgba(255, 220, 120, 0.45));
  }
  55% {
    opacity: 1;
    filter: brightness(1.12) drop-shadow(0 0 14px rgba(255, 220, 120, 0.35));
  }
  100% {
    transform: translateX(-50%) scale(var(--depth, 1));
    opacity: 1;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.34));
  }
}

@keyframes building-label-reveal {
  0% { opacity: 0; transform: scale(var(--label-boost, 1)) translateY(6px); }
  100% { opacity: 1; transform: scale(var(--label-boost, 1)) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .building-wrapper.slot-construction .building-visual-anchor > .building-visual.is-construction,
  .building-wrapper.slot-construction .construction-svg,
  .building-wrapper.slot-construction .building-visual-anchor > .building-visual.is-construction::before {
    animation: none;
  }

  .building-wrapper.slot-building-reveal .building-visual-anchor > .building-visual.is-reveal-rise,
  .building-wrapper.slot-building-reveal .building-label-slot .building-label {
    animation: none;
  }
}

/* Нострадамус: шторм с прозрачным фоном (карта видна сквозь пустоты) */
.nostradamus-composite.nostradamus-storm {
  position: relative;
  line-height: 0;
  overflow: visible;
}

.nostra-storm-plate {
  display: block;
  position: relative;
  z-index: 0;
  overflow: visible;
  image-rendering: auto;
  background-repeat: no-repeat;
  background-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(40, 10, 60, 0.45));
}

.nostra-storm-plate.nostra-storm-anim-host,
.nostra-storm-plate.nostra-storm-video-host {
  overflow: visible;
  background: transparent;
}

.nostra-storm-anim {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  background: transparent;
}

.nostra-storm-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  background: transparent;
}

.nostra-storm-plate.nostra-storm-stack {
  overflow: hidden;
}

.nostra-storm-frame {
  position: absolute;
  left: 0;
  top: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background-repeat: no-repeat;
  background-color: transparent;
  pointer-events: none;
  will-change: opacity;
}

.nostradamus-storm .nostradamus-summit.nostra-storm-construction {
  position: absolute;
  left: 50%;
  bottom: 42%;
  transform: translateX(-50%);
  z-index: 2;
  line-height: 0;
}

@media (prefers-reduced-motion: reduce) {
  .nostra-storm-frame {
    animation: none !important;
  }
  .nostra-storm-anim,
  .nostra-storm-video {
    display: none;
  }
}

/* Legacy FX-слой (если где-то остался) */
.building-fx-host {
  position: relative;
  line-height: 0;
  overflow: visible;
}

.building-fx-host > svg:first-child {
  position: relative;
  z-index: 0;
}

.building-fx-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

.building-fx-layer .fx-sprite {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  will-change: transform, opacity, background-position;
}

.nostradamus-composite {
  position: relative;
  line-height: 0;
  overflow: visible;
}

.nostradamus-composite .nostradamus-mountain-svg {
  display: block;
  position: relative;
  z-index: 0;
}

.nostradamus-composite .nostradamus-summit {
  position: absolute;
  left: 50%;
  bottom: var(--nostra-summit, 48px);
  transform: translateX(-50%);
  z-index: 1;
  line-height: 0;
  overflow: visible;
}

.nostradamus-composite .nostradamus-figure-svg > svg:first-child {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28));
}

/* Голубиная почта: статичное здание + 3 голубя по орбите */
.pigeonmail-building-wrap {
  position: relative;
}

.pigeonmail-building-static {
  position: relative;
  z-index: 1;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  background-color: transparent;
}

.pigeonmail-building-wrap .pigeon-orbit {
  position: absolute;
  left: var(--pigeonmail-origin-x, 32px);
  top: var(--pigeonmail-origin-y, 40px);
  width: 0;
  height: 0;
  z-index: 2;
  pointer-events: none;
}

.pigeonmail-building-wrap .pigeon-arm {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.pigeonmail-building-wrap .pigeon-sprite {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  overflow: hidden;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: 0 0;
}

@keyframes pigeon-orbit-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .pigeonmail-building-wrap .pigeon-sprite {
    background-position: 0 0;
  }
}

/* Legacy SVG-голуби (tier SVG в слотах) */
.style-pigeonmail svg .pigeon-orbit {
  transform-origin: 40px 52px;
}

.style-pigeonmail svg .pigeon-orbit-a {
  animation: pigeon-orbit-spin 5s linear infinite;
}

.style-pigeonmail svg .pigeon-orbit-b {
  animation: pigeon-orbit-spin 6.5s linear infinite reverse;
}

.style-pigeonmail svg .pigeon-orbit-c {
  animation: pigeon-orbit-spin 4.2s linear infinite;
  animation-delay: -1.4s;
}

.style-pigeonmail svg .pigeon-bird {
  transform: translate(22px, -18px);
}

.style-pigeonmail svg .pigeon-orbit-b .pigeon-bird {
  transform: translate(26px, -24px);
}

.style-pigeonmail svg .pigeon-orbit-c .pigeon-bird {
  transform: translate(18px, -14px);
}

@keyframes pigeon-orbit-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .style-pigeonmail svg .pigeon-orbit-a,
  .style-pigeonmail svg .pigeon-orbit-b,
  .style-pigeonmail svg .pigeon-orbit-c {
    animation: none;
  }
}

/* Катапульта: отчётливый выстрел камня */
.style-catapult.building-fx-host > svg:first-child {
  transform-origin: 50% 85%;
  animation: fx-catapult-recoil 4.8s ease-in-out infinite;
}

.style-catapult .fx-catapult-boulder {
  transform-origin: center center;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
  animation: fx-boulder-flight 4.8s cubic-bezier(0.2, 0.7, 0.25, 1) infinite;
}

.style-catapult .fx-catapult-dust {
  opacity: 0;
  animation:
    fx-dust-puff 4.8s ease-out infinite,
    fx-strip-4-burst 4.8s steps(3, end) infinite;
}

.style-catapult .fx-catapult-flash {
  opacity: 0;
  animation:
    fx-shot-flash 4.8s ease-out infinite,
    fx-strip-4-burst 4.8s steps(3, end) infinite;
  filter: drop-shadow(0 0 4px rgba(255, 220, 100, 0.9));
}

.style-catapult .fx-catapult-trail {
  animation: fx-shot-trail 4.8s ease-out infinite;
}

@keyframes fx-catapult-recoil {
  0%, 38%, 52%, 100% { transform: translate(0, 0) rotate(0deg); }
  42% { transform: translate(1.5px, 1px) rotate(1.2deg); }
  46% { transform: translate(-1px, 0.5px) rotate(-0.8deg); }
}

@keyframes fx-boulder-flight {
  0%, 38% {
    transform: translate(0, 0) scale(0.85) rotate(0deg);
    opacity: 0;
  }
  40% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  52% {
    transform: translate(10px, -18px) scale(1.05) rotate(40deg);
    opacity: 1;
  }
  68% {
    transform: translate(22px, -42px) scale(0.95) rotate(110deg);
    opacity: 1;
  }
  84% {
    transform: translate(30px, -68px) scale(0.7) rotate(180deg);
    opacity: 0.35;
  }
  92%, 100% {
    transform: translate(34px, -80px) scale(0.5) rotate(220deg);
    opacity: 0;
  }
}

@keyframes fx-dust-puff {
  0%, 38%, 100% { opacity: 0; transform: translate(0, 0) scale(0.8); }
  42% { opacity: 1; transform: translate(0, 0) scale(1); }
  58% { opacity: 0.5; transform: translate(2px, -4px) scale(1.25); }
  72% { opacity: 0; transform: translate(4px, -8px) scale(1.4); }
}

@keyframes fx-shot-flash {
  0%, 38%, 48%, 100% { opacity: 0; transform: scale(0.6); }
  40% { opacity: 1; transform: scale(1.35); }
  44% { opacity: 0.85; transform: scale(1); }
}

@keyframes fx-shot-trail {
  0%, 40%, 100% { opacity: 0; transform: translate(0, 0) scale(0.5); }
  44% { opacity: 0.9; transform: translate(4px, -6px) scale(1); }
  58% { opacity: 0.45; transform: translate(12px, -20px) scale(0.7); }
  70% { opacity: 0; transform: translate(18px, -32px) scale(0.3); }
}

@keyframes fx-strip-4-burst {
  0%, 38% { background-position: 0 0; }
  40%, 70% { background-position: -300% 0; }
  100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .style-catapult.building-fx-host > svg:first-child,
  .style-catapult .fx-catapult-boulder,
  .style-catapult .fx-catapult-dust,
  .style-catapult .fx-catapult-flash,
  .style-catapult .fx-catapult-trail {
    animation: none;
  }
}

/* Спутниковая тарелка: вечно разваливается от ветхости */
.style-satdish .sat-dish-rig {
  transform-origin: 40px 72px;
  animation: sat-dish-wobble 2.8s ease-in-out infinite;
}

.style-satdish .sat-rope-a {
  transform-origin: 40px 58px;
  animation: sat-rope-sway-a 2.8s ease-in-out infinite;
}

.style-satdish .sat-rope-b {
  transform-origin: 40px 58px;
  animation: sat-rope-sway-b 2.8s ease-in-out infinite;
}

.style-satdish .sat-rope-c {
  transform-origin: 40px 56px;
  animation: sat-rope-sway-c 2.2s ease-in-out infinite;
}

.style-satdish .sat-plank-fall-a {
  animation: sat-plank-drop-a 4.4s ease-in infinite;
}

.style-satdish .sat-plank-fall-b {
  animation: sat-plank-drop-b 5s ease-in infinite;
  animation-delay: -1.8s;
}

.style-satdish .sat-debris-a {
  animation: sat-debris-drop-a 3.6s ease-in infinite;
}

.style-satdish .sat-debris-b {
  animation: sat-debris-drop-b 4s ease-in infinite;
  animation-delay: -1.4s;
}

.style-satdish .sat-spark-a {
  transform: translate(38px, 42px);
  animation: sat-spark-flicker-a 1.9s ease-in-out infinite;
}

.style-satdish .sat-spark-b {
  transform: translate(46px, 44px);
  animation: sat-spark-flicker-b 2.3s ease-in-out infinite;
  animation-delay: -0.6s;
}

@keyframes sat-dish-wobble {
  0%, 100% { transform: rotate(-3deg); }
  22% { transform: rotate(3.5deg); }
  38% { transform: rotate(-1.5deg); }
  55% { transform: rotate(2.8deg); }
  72% { transform: rotate(-2deg); }
  88% { transform: rotate(1.5deg); }
}

@keyframes sat-rope-sway-a {
  0%, 100% { transform: rotate(0deg); }
  35% { transform: rotate(3deg); }
  70% { transform: rotate(-2deg); }
}

@keyframes sat-rope-sway-b {
  0%, 100% { transform: rotate(0deg); }
  40% { transform: rotate(-2.5deg); }
  75% { transform: rotate(2deg); }
}

@keyframes sat-rope-sway-c {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(1.5deg); }
}

@keyframes sat-plank-drop-a {
  0%, 10% { opacity: 0; transform: translate(44px, 46px) rotate(12deg); }
  14% { opacity: 1; }
  48% { opacity: 1; transform: translate(32px, 82px) rotate(-38deg); }
  62%, 100% { opacity: 0; transform: translate(28px, 94px) rotate(-52deg); }
}

@keyframes sat-plank-drop-b {
  0%, 8% { opacity: 0; transform: translate(50px, 48px) rotate(-8deg); }
  12% { opacity: 1; }
  46% { opacity: 1; transform: translate(56px, 84px) rotate(28deg); }
  60%, 100% { opacity: 0; transform: translate(60px, 94px) rotate(42deg); }
}

@keyframes sat-debris-drop-a {
  0%, 6% { opacity: 0; transform: translate(36px, 50px) rotate(15deg); }
  10% { opacity: 0.95; }
  42% { opacity: 0.95; transform: translate(30px, 88px) rotate(-20deg); }
  55%, 100% { opacity: 0; transform: translate(26px, 96px) rotate(-35deg); }
}

@keyframes sat-debris-drop-b {
  0%, 12% { opacity: 0; transform: translate(42px, 52px) rotate(-10deg); }
  16% { opacity: 0.9; }
  48% { opacity: 0.9; transform: translate(48px, 90px) rotate(18deg); }
  62%, 100% { opacity: 0; transform: translate(52px, 96px) rotate(30deg); }
}

@keyframes sat-spark-flicker-a {
  0%, 38%, 100% { opacity: 0; }
  40%, 44% { opacity: 1; }
  42% { opacity: 0.15; }
  68%, 72% { opacity: 0.85; }
  70% { opacity: 0.2; }
}

@keyframes sat-spark-flicker-b {
  0%, 52%, 100% { opacity: 0; }
  54%, 58% { opacity: 1; }
  56% { opacity: 0.25; }
  78%, 82% { opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  .style-satdish .sat-dish-rig,
  .style-satdish .sat-rope-a,
  .style-satdish .sat-rope-b,
  .style-satdish .sat-rope-c,
  .style-satdish .sat-plank-fall-a,
  .style-satdish .sat-plank-fall-b,
  .style-satdish .sat-debris-a,
  .style-satdish .sat-debris-b,
  .style-satdish .sat-spark-a,
  .style-satdish .sat-spark-b {
    animation: none;
  }
}

/* Рынок: торговцы и навесы */
.style-market .market-awning-a,
.style-market .market-awning-c,
.style-market .market-awning-e {
  transform-origin: center bottom;
  animation: market-awning-sway 3.2s ease-in-out infinite;
}

.style-market .market-awning-b,
.style-market .market-awning-d {
  transform-origin: center bottom;
  animation: market-awning-sway 3.6s ease-in-out infinite reverse;
}

.style-market .market-vendor-a,
.style-market .market-vendor-c,
.style-market .market-vendor-e {
  animation: market-vendor-bob 2.4s ease-in-out infinite;
}

.style-market .market-vendor-b,
.style-market .market-vendor-d {
  animation: market-vendor-bob 2.8s ease-in-out infinite;
  animation-delay: -0.6s;
}

.style-market .market-goods-a,
.style-market .market-goods-c,
.style-market .market-goods-e {
  animation: market-goods-pulse 2.2s ease-in-out infinite;
}

.style-market .market-goods-b,
.style-market .market-goods-d {
  animation: market-goods-pulse 2.6s ease-in-out infinite;
  animation-delay: -0.4s;
}

@keyframes market-awning-sway {
  0%, 100% { transform: skewX(0deg); }
  50% { transform: skewX(2deg); }
}

@keyframes market-vendor-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}

@keyframes market-goods-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.92; }
}

@media (prefers-reduced-motion: reduce) {
  .style-market .market-awning-a,
  .style-market .market-awning-b,
  .style-market .market-awning-c,
  .style-market .market-awning-d,
  .style-market .market-awning-e,
  .style-market .market-vendor-a,
  .style-market .market-vendor-b,
  .style-market .market-vendor-c,
  .style-market .market-vendor-d,
  .style-market .market-vendor-e,
  .style-market .market-goods-a,
  .style-market .market-goods-b,
  .style-market .market-goods-c,
  .style-market .market-goods-d,
  .style-market .market-goods-e {
    animation: none;
  }
}

/* Средневековая таверна: выпинывание, костёр, вертел, дым */
.style-tavern .tavern-spit {
  transform-origin: 63px 78px;
  animation: tavern-spit-turn 8s linear infinite;
}

.style-tavern .tavern-fire {
  animation: tavern-fire-flicker 0.7s ease-in-out infinite alternate;
}

.style-tavern .tavern-eject {
  animation: tavern-eject-fly 5s ease-in-out infinite;
}

.style-tavern .tavern-smoke-a {
  animation: tavern-smoke-rise 3.2s ease-out infinite;
}

.style-tavern .tavern-smoke-b {
  animation: tavern-smoke-rise 3.8s ease-out infinite;
  animation-delay: -1.2s;
}

.style-tavern .tavern-smoke-c {
  animation: tavern-smoke-rise 4.2s ease-out infinite;
  animation-delay: -2.4s;
}

.style-tavern .tavern-smoke-chimney {
  animation: tavern-smoke-rise 4s ease-out infinite;
  animation-delay: -0.8s;
}

.style-tavern .tavern-smoke-chimney-b {
  animation: tavern-smoke-rise 4.5s ease-out infinite;
  animation-delay: -2s;
}

@keyframes tavern-spit-turn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes tavern-fire-flicker {
  0% { transform: scaleY(1) scaleX(1); opacity: 0.9; }
  100% { transform: scaleY(1.12) scaleX(0.92); opacity: 1; }
}

@keyframes tavern-eject-fly {
  0%, 18% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  22% { opacity: 1; }
  28% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  48% { transform: translate(24px, -6px) rotate(95deg); opacity: 1; }
  58%, 100% { transform: translate(30px, 4px) rotate(130deg); opacity: 0; }
}

@keyframes tavern-smoke-rise {
  0% { transform: translateY(0) scale(1); opacity: 0.55; }
  100% { transform: translateY(-20px) scale(1.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .style-tavern .tavern-spit,
  .style-tavern .tavern-fire,
  .style-tavern .tavern-eject,
  .style-tavern .tavern-smoke-a,
  .style-tavern .tavern-smoke-b,
  .style-tavern .tavern-smoke-c,
  .style-tavern .tavern-smoke-chimney,
  .style-tavern .tavern-smoke-chimney-b {
    animation: none;
  }
}

/* Каторжный рудник: дым, клеть, надсмотрщик со плеткой, искры */
.style-prisonmine .fx-smoke-a {
  animation:
    fx-smoke-rise 3.2s ease-out infinite,
    fx-strip-4 1.6s steps(3, end) infinite;
}

.style-prisonmine .fx-smoke-b {
  animation:
    fx-smoke-rise 4s ease-out infinite,
    fx-strip-4 1.9s steps(3, end) infinite;
  animation-delay: -1.4s, -0.5s;
}

.style-prisonmine .fx-crane-cage {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
  animation: fx-crane-bob 3.2s ease-in-out infinite;
}

.style-prisonmine .fx-mine-overseer {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
  animation: fx-strip-whip 1.5s steps(3, end) infinite;
}

.style-prisonmine .fx-mine-spark {
  opacity: 0;
  animation:
    fx-gold-spark 2.2s ease-in-out infinite,
    fx-strip-4-spark 2.2s steps(3, end) infinite;
}

.style-prisonmine .fx-mine-spark-b {
  animation-delay: -0.9s, -0.9s;
}

@keyframes fx-smoke-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: 0.85; }
  65% { transform: translate(1px, -10px); opacity: 0.4; }
  100% { transform: translate(2px, -18px); opacity: 0; }
}

@keyframes fx-crane-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}

@keyframes fx-strip-whip {
  from { background-position: 0 0; }
  to { background-position: -300% 0; }
}

@keyframes fx-strip-4-spark {
  0%, 50% { background-position: 0 0; }
  55%, 85% { background-position: -300% 0; }
  100% { background-position: 0 0; }
}

@keyframes fx-gold-spark {
  0%, 50%, 100% { opacity: 0; transform: translate(0, 0) scale(0.8); }
  55% { opacity: 1; transform: translate(0, -1px) scale(1.2); }
  70% { opacity: 0.7; transform: translate(1px, -3px) scale(1); }
  85% { opacity: 0; transform: translate(2px, -5px) scale(0.7); }
}

@media (prefers-reduced-motion: reduce) {
  .style-prisonmine .fx-smoke-a,
  .style-prisonmine .fx-smoke-b,
  .style-prisonmine .fx-crane-cage,
  .style-prisonmine .fx-mine-overseer,
  .style-prisonmine .fx-mine-spark {
    animation: none;
  }
}

.building-wrapper.developer-house {
  cursor: pointer;
  z-index: 3;
}

.building-wrapper.developer-house .building-visual {
  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.35)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.38));
}

.developer-house-label {
  border-color: rgba(212, 175, 55, 0.65);
  background: rgba(28, 22, 12, 0.9);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #d4af37;
  padding: 2px 8px;
  max-width: none;
  white-space: nowrap;
}

.building-wrapper.slot-forest {
  cursor: default;
  pointer-events: none;
}

.building-wrapper.slot-forest .building-label {
  opacity: 0.85;
}

.building-wrapper.slot-platform {
  cursor: default;
}

.building-wrapper {
  position: absolute;
  pointer-events: none;
  cursor: default;
  transform: translateX(-50%);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.building-wrapper .building-stack,
.building-wrapper .building-visual-anchor,
.building-wrapper .building-visual,
.building-wrapper .iso-building-svg {
  pointer-events: none;
}

.building-wrapper .iso-building-svg svg {
  pointer-events: painted;
  cursor: pointer;
}

/* Шторм — <img>, не SVG: иначе клики проходят сквозь здание на карту */
.building-wrapper .nostradamus-storm.iso-building-svg,
.building-wrapper .nostra-storm-plate,
.building-wrapper .nostra-storm-anim {
  pointer-events: auto;
  cursor: pointer;
}

.building-visual-anchor {
  position: relative;
  width: 0;
  height: 0;
  overflow: visible;
  flex-shrink: 0;
}

.building-visual-anchor > .building-visual {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) scale(var(--depth, 1));
  transform-origin: center bottom;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.34));
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;
}

.building-visual {
  line-height: 0;
}

.building-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  line-height: normal;
}

.building-label-slot {
  flex-shrink: 0;
  width: 80px;
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  position: relative;
  z-index: 6;
  margin-top: 10px;
  pointer-events: none;
  overflow: hidden;
}

.building-label-slot--compact {
  height: 24px;
  min-height: 24px;
  max-height: 24px;
}

.building-label-slot .building-label {
  transform: scale(var(--label-boost, 1));
  transform-origin: center top;
}

.building-label {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 3px 5px;
  border-radius: 4px;
  font-family: var(--font-ios);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-align: center;
  color: #fff8f0;
  background: rgba(18, 14, 10, 0.92);
  border: 1px solid color-mix(in srgb, var(--label-color, #c9a227) 55%, transparent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.building-label.income-label {
  border-color: color-mix(in srgb, var(--label-color, #30d158) 60%, transparent);
}

.building-label-name {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.building-label-amount {
  display: block;
  margin-top: 1px;
  font-size: 8px;
  font-weight: 600;
  line-height: 1.15;
}

.building-label-amount.is-empty {
  opacity: 0.35;
  font-size: 7px;
}

.building-label-amount.expense {
  color: #ff9b94;
}

.building-label-amount.income {
  color: #6ee78a;
}

.building-wrapper.slot-construction .building-label-slot .building-label {
  opacity: 0.82;
}

.quarter-income-label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 2px 8px;
  border-radius: 6px;
  font-family: var(--font-ios);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  color: #e8fff0;
  background: rgba(12, 28, 18, 0.9);
  border: 1px solid rgba(48, 209, 88, 0.45);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 2;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  transform: translateX(-50%) scale(calc(1 / var(--map-scale, 1)));
  transform-origin: center bottom;
}

.quarter-income-title {
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(232, 255, 240, 0.88);
}

.quarter-income-amount {
  font-size: 10px;
  font-weight: 700;
  color: var(--income-green);
}

.iso-building-svg {
  display: block;
  line-height: 0;
  overflow: visible;
}

.iso-building-svg.slot-svg {
  margin-top: 0;
}

.iso-building-svg svg,
.iso-building-svg img {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  object-fit: contain;
  object-position: bottom center;
  pointer-events: none;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}

/* Детальные превью в модалках — без отдельной кликабельной области */
.sheet-body .iso-building-svg svg,
.sheet-body .iso-building-svg img,
#modal-category .iso-building-svg svg {
  pointer-events: none;
}

.building-wrapper:active .building-visual-anchor > .building-visual,
.building-wrapper.selected .building-visual-anchor > .building-visual,
.building-wrapper.treasury-castle:active .building-visual-anchor > .building-visual,
.building-wrapper.treasury-castle.selected .building-visual-anchor > .building-visual {
  transform: translateX(-50%) scale(calc(var(--depth, 1) * 1.1));
}

.building-wrapper:active,
.building-wrapper.selected {
  z-index: 5;
}

.map-night .building-visual {
  filter: drop-shadow(0 0 6px rgba(255, 220, 120, 0.35)) drop-shadow(2px 6px 6px rgba(0, 0, 0, 0.5));
}

/* Pixel / motion polish */
.iso-building-svg,
.iso-building-svg svg,
.building-visual img,
.building-wrapper .pigeonmail-building-static {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.building-wrapper.slot-income .building-visual {
  filter: drop-shadow(0 0 5px rgba(48, 209, 88, 0.28)) drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.28));
}

.building-visual.is-construction {
  animation: construction-bob 1.4s ease-in-out infinite;
}

@keyframes construction-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .building-visual.is-construction {
    animation: none;
  }
  .map-tod-overlay {
    transition: none;
  }
}

#modal-treasury .ios-sheet-treasury {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 88%;
}

#modal-treasury .sheet-body-scroll {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

#modal-treasury #treasury-back.hidden {
  visibility: hidden;
}

.treasury-castle .building-visual {
  filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.34)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.38));
}

/* Фиксированные здания — клик по SVG (painted) или PNG-подложке */
.building-wrapper.map-pigeonmail .iso-building-svg {
  pointer-events: auto;
  cursor: pointer;
}

.building-wrapper.map-pigeonmail .pigeonmail-building-static {
  pointer-events: auto;
}

.building-wrapper.map-pigeonmail .pigeonmail-badge,
.building-wrapper.developer-house .pigeonmail-badge {
  position: absolute;
  top: 2px;
  right: -8px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #ff453a;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(255, 69, 58, 0.55), 0 0 0 2px rgba(255, 255, 255, 0.35);
  pointer-events: none;
  animation: map-badge-pulse 1.8s ease-in-out infinite;
}

.building-wrapper.map-pigeonmail .pigeonmail-badge.hidden,
.building-wrapper.developer-house .pigeonmail-badge.hidden {
  display: none;
  animation: none;
}

@keyframes map-badge-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(255, 69, 58, 0.55), 0 0 0 2px rgba(255, 255, 255, 0.35); }
  50% { transform: scale(1.08); box-shadow: 0 3px 12px rgba(255, 69, 58, 0.75), 0 0 0 3px rgba(255, 255, 255, 0.45); }
}

@media (prefers-reduced-motion: reduce) {
  .building-wrapper.map-pigeonmail .pigeonmail-badge,
  .building-wrapper.developer-house .pigeonmail-badge {
    animation: none;
  }
}

.dev-news-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.dev-news-item {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg-secondary, rgba(120, 120, 128, 0.12));
}

.dev-news-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}

.dev-news-body {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.35;
}

.building-label-slot--treasury {
  width: 84px;
  height: auto;
  min-height: 38px;
  max-height: none;
  margin-top: 12px;
}

.building-label-slot--treasury .building-label {
  height: auto;
  min-height: 38px;
  justify-content: flex-start;
  padding: 3px 4px;
}

.treasury-label {
  border-color: rgba(212, 175, 55, 0.65);
  background: rgba(28, 22, 12, 0.92);
}

.treasury-label .building-label-name {
  font-weight: 700;
  letter-spacing: 0.04em;
}

.treasury-label-forex {
  color: #9ed4ff !important;
  font-size: 7px;
  font-weight: 600;
}

.treasury-label-bank {
  color: #e8c547 !important;
  font-size: 7px;
  font-weight: 600;
}

.treasury-castle-preview {
  display: flex;
  justify-content: center;
  padding: 12px 0 8px;
  min-height: 100px;
}

.treasury-summary {
  background: rgba(118, 118, 128, 0.18);
  border-radius: 12px;
  padding: 4px 0;
  margin-bottom: 16px;
}

.treasury-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  font-size: 15px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
}

.treasury-summary-row:last-child {
  border-bottom: none;
}

.treasury-summary-row strong {
  font-variant-numeric: tabular-nums;
}

.treasury-category-list {
  margin-top: 12px;
}

.treasury-cat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  cursor: pointer;
  position: relative;
}

.treasury-cat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 62px;
  right: 0;
  height: 0.5px;
  background: rgba(255, 255, 255, 0.08);
}

.treasury-cat-item:active {
  background: rgba(255, 255, 255, 0.06);
}

.treasury-drilldown.hidden {
  display: none;
}

.treasury-vault {
  margin-bottom: 12px;
}

.treasury-vault-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.14), rgba(118, 118, 128, 0.12));
  color: inherit;
  font: inherit;
  text-align: left;
}

.vault-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vault-reserves-list--inset {
  margin: 0;
  border: none;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}

.vault-reserves-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
}

.vault-map-hint {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-secondary);
}

.vault-reserve-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.vault-reserve-item .vault-reserve-value {
  margin-left: auto;
}

.vault-reserve-toggle {
  flex-shrink: 0;
  margin-left: 4px;
}

.vault-reserve-item:last-child {
  border-bottom: none;
}

.vault-reserve-label {
  color: var(--text-secondary);
}

.vault-reserve-label--rub {
  font-size: 15px;
  font-weight: 600;
  color: #e8c547;
}

.vault-reserve-value {
  font-weight: 600;
  color: #e8c547;
}

.vault-reserve-empty {
  justify-content: center;
  color: var(--text-secondary);
  font-size: 13px;
}

.vault-reserve-divider {
  height: 1px;
  margin: 4px 12px;
  padding: 0;
  background: rgba(212, 175, 55, 0.25);
  border: none;
}

.vault-reserve-item--forex .vault-reserve-value {
  color: #9ed4ff;
}

.treasury-balance-link {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: rgba(118, 118, 128, 0.2);
  color: var(--accent, #0a84ff);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
}

.treasury-balance-link:active {
  opacity: 0.8;
}

.treasury-balance-hint {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.vault-coins {
  position: relative;
  width: 44px;
  height: 36px;
  flex-shrink: 0;
}

.coin {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #d4af37 55%, #9a7b28);
  border: 1px solid rgba(120, 90, 20, 0.55);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

.coin-1 { left: 0; top: 10px; }
.coin-2 { left: 10px; top: 4px; }
.coin-3 { left: 18px; top: 12px; }
.coin-4 { left: 8px; top: 16px; opacity: 0.9; }

.vault-info { flex: 1; min-width: 0; }

.vault-title {
  font-size: 17px;
  font-weight: 600;
}

.vault-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.vault-amount {
  font-size: 16px;
  font-weight: 700;
  color: #e8c547;
  flex-shrink: 0;
}

.vault-amount--negative {
  color: var(--expense-red);
}

.treasury-summary-sub {
  opacity: 0.85;
  font-size: 13px;
}

.treasury-summary-sub strong {
  font-size: 14px;
  font-weight: 600;
}

.treasury-rates-note {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--text-secondary);
}

.treasury-rates-hint {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.35;
}

.treasury-rates-hint a {
  color: var(--ios-blue);
  text-decoration: none;
}

.treasury-balance-form {
  margin-bottom: 16px;
}

.treasury-holdings-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  background: rgba(118, 118, 128, 0.18);
  border-radius: 12px;
  overflow: hidden;
}

.treasury-holding-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 10px 10px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
}

.treasury-holding-item:last-child { border-bottom: none; }

.treasury-holding-item .holding-body {
  flex: 1;
  min-width: 0;
}

.treasury-holding-item.is-excluded .holding-body {
  opacity: 0.45;
}

.holding-main,
.holding-sub {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.holding-main {
  font-size: 15px;
  font-weight: 600;
}

.holding-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}

.holding-code { color: var(--text-primary); }

.holding-amount-input {
  width: 110px;
  max-width: 42%;
  margin: 0;
  padding: 4px 8px;
  border: none;
  border-radius: 8px;
  background: rgba(118, 118, 128, 0.24);
  color: var(--text-primary);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: right;
  -moz-appearance: textfield;
}

.holding-amount-input::-webkit-outer-spin-button,
.holding-amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.holding-amount-input:focus {
  outline: none;
  background: rgba(118, 118, 128, 0.36);
  box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.35);
}

.holding-remove {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.treasury-add-currency {
  margin-bottom: 10px;
  overflow: visible;
}

.currency-field {
  align-items: flex-start;
  overflow: visible;
}

.currency-picker-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.currency-picker-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  width: 100%;
  padding: 12px 0;
  border: none;
  background: none;
  color: var(--text-primary);
  font-size: 15px;
  font-family: var(--font-ios);
  cursor: pointer;
  text-align: right;
}

.currency-picker-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.currency-picker-chevron {
  font-size: 11px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.currency-picker-list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: -90px;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: rgba(28, 28, 30, 0.98);
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  z-index: 40;
  max-height: 220px;
  overflow-y: auto;
}

.currency-picker-list.hidden {
  display: none;
}

.currency-picker-option {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 6px 8px;
  align-items: center;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: none;
  color: var(--text-primary);
  font-family: var(--font-ios);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.currency-picker-option:hover,
.currency-picker-option.active {
  background: rgba(10, 132, 255, 0.18);
}

.option-code {
  font-weight: 700;
  font-size: 13px;
}

.option-label {
  color: var(--text-secondary);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.option-rate {
  font-size: 12px;
  color: #e8c547;
  white-space: nowrap;
}

.treasury-add-custom {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
}

#modal-treasury .ios-form-group {
  overflow: visible;
}

.ios-btn-secondary {
  width: 100%;
  margin-bottom: 8px;
  background: rgba(118, 118, 128, 0.28);
  color: var(--text-primary);
}

.balance-bar.hidden {
  display: none !important;
}

/* Balance bar */
.balance-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 12px 6px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--panel-bg-elevated);
  flex-shrink: 0;
  height: var(--balance-h);
  min-height: var(--balance-h);
  cursor: pointer;
}

.balance-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  display: block;
  margin-bottom: 2px;
}

.balance-value {
  font-family: var(--font-pixel);
  font-size: 13px;
  letter-spacing: -0.5px;
}

.balance-stats {
  display: flex;
  gap: 10px;
}

.balance-chip {
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 6px 10px;
  text-align: right;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.chip-arrow {
  display: block;
  font-size: 11px;
  margin-bottom: 1px;
}
.balance-chip.expense .chip-arrow { color: var(--expense-red); }
.balance-chip.income .chip-arrow { color: var(--income-green); }

/* Tab Bar iOS */
.tab-bar {
  position: relative;
  display: flex;
  height: calc(var(--tab-bar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  flex-shrink: 0;
  z-index: 50;
}

.tab-bar-bg {
  position: absolute;
  inset: 0;
  background: rgba(28, 28, 30, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid rgba(255,255,255,0.1);
  z-index: -1;
}

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding-top: 6px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 500;
  font-family: var(--font-ios);
  cursor: pointer;
  transition: color 0.2s;
  position: relative;
  z-index: 1;
  min-width: 0;
}

.tab span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  padding: 0 2px;
}

.tab-svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.tab.active { color: var(--income-green); }

/* Segmented Control iOS */
.segmented-control {
  display: flex;
  padding: 2px;
  background: rgba(118, 118, 128, 0.24);
  border-radius: 9px;
  flex-shrink: 0;
}

.segment {
  flex: 1;
  padding: 7px 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-ios);
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}

.segment.active {
  background: rgba(99, 99, 102, 0.6);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Transaction List iOS */
.ios-list {
  list-style: none;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  margin: 0 16px;
  border-radius: 12px;
  background: var(--panel-bg-elevated);
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  overflow-x: hidden;
}

.transaction-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}

.transaction-item:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 62px;
  right: 0;
  height: 0.5px;
  background: rgba(255,255,255,0.08);
}

.transaction-item:active {
  background: rgba(255,255,255,0.05);
}

.item-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border-radius: 10px;
  flex-shrink: 0;
}

.item-info { flex: 1; min-width: 0; }

.item-title {
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-meta {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 1px;
}

.item-amount {
  font-size: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.item-amount.expense { color: var(--expense-red); }
.item-amount.income { color: var(--income-green); }
.item-amount.bank-neutral,
.detail-amount.bank-neutral {
  color: var(--text-secondary);
}

/* Category management */
.category-manage-list {
  margin-bottom: 8px;
}

.category-manage-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  position: relative;
}

.category-manage-item:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 62px;
  right: 0;
  height: 0.5px;
  background: rgba(255,255,255,0.08);
}

.category-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: rgba(118, 118, 128, 0.2);
  color: var(--text-primary);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.icon-btn:active { background: rgba(118, 118, 128, 0.4); }

.delete-btn { color: var(--expense-red); }

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

.style-btn {
  padding: 10px 8px;
  min-height: 44px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  background: rgba(118, 118, 128, 0.18);
  color: var(--text-secondary);
  font-size: 13px;
  font-family: var(--font-ios);
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.style-btn:active {
  transform: none;
}

.style-btn.active {
  background: rgba(48, 209, 88, 0.2);
  color: var(--income-green);
  border-color: var(--income-green);
  box-shadow: none;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.icon-picker-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 10px;
  border: 1.5px solid transparent;
  background: rgba(118, 118, 128, 0.18);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.icon-picker-btn:active {
  transform: none;
}

.icon-picker-btn.active {
  background: rgba(10, 132, 255, 0.18);
  border-color: var(--ios-blue);
}

#modal-category .ios-sheet {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 88%;
}

#modal-category .sheet-grabber,
#modal-category .sheet-header {
  flex-shrink: 0;
}

#modal-category .sheet-body-scroll {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.category-preview-mount {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  width: 100%;
}

.emoji-input {
  text-align: right;
  font-size: 22px !important;
}

.color-input {
  width: 44px !important;
  height: 32px;
  padding: 0 !important;
  border: none !important;
  border-radius: 6px !important;
  background: none !important;
  cursor: pointer;
  margin-left: auto;
  -webkit-appearance: none;
  appearance: none;
}

.color-input::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: 6px;
}

.color-input::-webkit-color-swatch {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
}

.color-input::-moz-color-swatch {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.color-swatch {
  aspect-ratio: 2.2 / 1;
  width: 100%;
  min-height: 22px;
  max-height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-clip: padding-box;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

/* Белый свотч виден на тёмном фоне */
.color-swatch[data-color="#ffffff"],
.color-swatch[data-color="#FFFFFF"] {
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.color-swatch:active {
  transform: scale(0.96);
}

.color-swatch.active {
  border-color: #fff;
  box-shadow:
    0 0 0 1px var(--panel-bg-elevated),
    0 0 0 3px rgba(255, 255, 255, 0.9);
}

.sheet-btn-save {
  color: var(--ios-blue);
  text-align: right;
  padding: 0;
  font-weight: 600;
}

/* Stats */
.screen-body-stats {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.stats-scroll {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: 0 16px 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  overflow-x: hidden;
}

.account-panel {
  flex-shrink: 0;
  padding: 0 16px 12px;
}

.account-card {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.account-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.account-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: -6px -4px -6px 0;
}

.account-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
}

.account-settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  border: none;
  border-radius: 10px;
  background: var(--panel-bg);
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.account-settings-btn:active {
  background: var(--panel-bg-elevated);
  color: var(--text-primary);
}

.account-email {
  font-size: 13px;
  font-weight: 600;
  word-break: break-all;
}

.account-logout-btn {
  margin-top: 4px;
  width: 100%;
}

.account-delete-btn {
  margin-top: 8px;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

.account-legal {
  margin: 12px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
}

.account-legal a {
  color: var(--ios-blue);
  text-decoration: none;
}

#modal-building-settings .sheet-body-scroll {
  max-height: min(72vh, 640px);
}

.building-settings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.building-settings-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 14px;
  background: var(--panel-bg-elevated);
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.building-settings-item:active {
  filter: brightness(1.05);
}

.building-settings-item-preview {
  width: 48px;
  height: 52px;
  display: grid;
  place-items: end center;
  flex-shrink: 0;
  overflow: hidden;
}

.building-settings-item-preview img {
  width: 40px;
  height: auto;
  max-height: 52px;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
}

.building-settings-item-preview.is-storm img {
  image-rendering: auto;
}

.building-settings-model-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 220px;
  padding: 18px 12px 28px;
  margin: 8px 0 4px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(120, 150, 90, 0.18), rgba(90, 120, 70, 0.28)),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.04) 0 6px,
      rgba(0, 0, 0, 0.03) 6px 12px
    );
}

.building-settings-model-stage .nostradamus-composite {
  filter: drop-shadow(0 4px 10px rgba(20, 8, 40, 0.35));
}

.building-settings-model-img {
  max-width: 160px;
  max-height: 200px;
  object-fit: contain;
  image-rendering: pixelated;
}

.building-settings-item-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 20px;
  background: color-mix(in srgb, var(--cat-color, #888) 22%, var(--panel-bg));
}

.grade-sum-input.is-expense {
  color: #ff6b6b;
  font-variant-numeric: tabular-nums;
}

.building-settings-item-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.building-settings-item-name {
  font-size: 15px;
  font-weight: 600;
}

.building-settings-item-path {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.building-settings-item-chevron {
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1;
}

.building-settings-hint {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-secondary);
}

.grade-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.grade-card {
  padding: 12px;
  border-radius: 14px;
  background: var(--panel-bg-elevated);
}

.grade-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.grade-card-img {
  width: 56px;
  height: auto;
  image-rendering: pixelated;
  flex-shrink: 0;
}

.grade-card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
}

.grade-card-note {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--text-secondary);
}

.grade-card-fields {
  margin-top: 10px;
  margin-bottom: 0;
}

.stat-card {
  background: var(--panel-bg-elevated);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.stat-card h3 {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 6px;
}

.stat-card .big {
  font-family: var(--font-pixel);
  font-size: 13px;
}

.stat-row {
  display: flex;
  gap: 10px;
}
.stat-row .stat-card { flex: 1; }

.category-bar { margin-bottom: 14px; }

.category-bar-header {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 6px;
}

.stats-hint {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-secondary);
}

.category-bar--expense > .category-bar-toggle {
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.category-bar-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.category-bar-chevron {
  display: inline-block;
  font-size: 11px;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
}

.category-bar--expense.is-open > .category-bar-toggle .category-bar-chevron {
  transform: rotate(180deg);
}

.category-bar-sublist {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  background: rgba(118, 118, 128, 0.14);
  border-radius: 10px;
  overflow: hidden;
}

.category-bar-empty {
  margin: 8px 0 0;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

.category-bar-subitem {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
}

.category-bar-subgroup:last-child > .category-bar-subitem--group,
.category-bar-sublist > .category-bar-subitem:last-child {
  border-bottom: none;
}

.category-bar-subitem[data-id] {
  cursor: pointer;
}

.category-bar-subitem[data-id]:active {
  background: rgba(255, 255, 255, 0.06);
}

.category-bar-subitem--group {
  cursor: default;
  font-weight: 600;
}

.category-bar-subitem .subitem-name {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.category-bar-subitem .subitem-meta {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.category-bar-subitem .subitem-amount {
  flex-shrink: 0;
  color: var(--expense-red);
  font-variant-numeric: tabular-nums;
}

.category-bar-entries {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
}

.category-bar-subitem--entry {
  padding: 6px 12px 6px 24px;
  border-bottom: none;
}

.bar-track {
  height: 8px;
  background: rgba(118, 118, 128, 0.24);
  border-radius: 4px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.legend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.legend-color {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* iOS Sheets */
.sheet-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 300;
  align-items: flex-end;
  justify-content: center;
}

.sheet-overlay.open { display: flex; }

.ios-dialog-overlay {
  align-items: center;
  padding: 24px;
}

.ios-dialog {
  position: relative;
  z-index: 1;
  width: min(300px, 100%);
  background: var(--panel-bg, #1c1c1e);
  border-radius: 14px;
  padding: 20px 16px 12px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.ios-dialog-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary, #fff);
}

.ios-dialog-title.hidden {
  display: none;
}

.ios-dialog-message {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-secondary, #aeaeb2);
  white-space: pre-line;
}

.ios-dialog-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ios-dialog-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: rgba(118, 118, 128, 0.24);
  color: var(--text-primary, #fff);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.ios-dialog-btn-primary {
  background: var(--accent-blue, #0a84ff);
  color: #fff;
}

.ios-dialog-btn-destructive {
  background: var(--expense-red, #ff453a);
  color: #fff;
}

.ios-dialog-btn:active {
  opacity: 0.85;
}

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ios-sheet {
  position: relative;
  width: 100%;
  max-height: min(92dvh, 92%);
  background: var(--panel-bg-elevated);
  border-radius: 14px 14px 0 0;
  overflow-y: auto;
  animation: sheetUp 0.38s cubic-bezier(0.32, 0.72, 0, 1);
  /* Контентный отступ + реальный home-indicator, без лишних 34px «пустого» низа */
  padding-bottom: max(16px, var(--safe-bottom));
  margin-bottom: 0;
  -webkit-overflow-scrolling: touch;
}

.ios-sheet-medium { max-height: 55%; }

@keyframes sheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.sheet-grabber {
  width: 36px;
  height: 5px;
  background: rgba(255,255,255,0.25);
  border-radius: 3px;
  margin: 8px auto 4px;
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px 12px;
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
}

.sheet-title {
  font-size: 17px;
  font-weight: 600;
}

.sheet-btn {
  font-size: 17px;
  background: none;
  border: none;
  cursor: pointer;
  min-width: 70px;
}

.sheet-btn-cancel {
  color: var(--ios-blue);
  text-align: left;
  padding: 0;
}

.sheet-btn-placeholder { visibility: hidden; }

.sheet-body {
  padding: 16px;
  padding-bottom: 8px;
}

.sheet-section { margin-bottom: 16px; }

.section-label {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 8px;
  padding-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* iOS Form */
#modal-add .ios-form-group {
  overflow: visible;
}

.ios-form-group {
  background: rgba(118, 118, 128, 0.18);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
}

.ios-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  min-height: 48px;
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
}

.ios-field-last { border-bottom: none; }

.ios-field-with-check {
  gap: 10px;
}

.ios-field-with-check .field-label {
  width: auto;
  max-width: none;
  flex: 1;
  min-width: 0;
}

.ios-field-with-check.is-excluded .field-label,
.ios-field-with-check.is-excluded input {
  opacity: 0.45;
}

.ios-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ios-check-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.ios-check-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(142, 142, 147, 0.85);
  background: transparent;
  color: transparent;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ios-check-input:checked + .ios-check-box {
  border-color: var(--ios-blue);
  background: var(--ios-blue);
  color: #fff;
}

.ios-check-input:checked + .ios-check-box::before {
  content: '✓';
}

.treasury-cat-item.is-excluded .item-title,
.treasury-cat-item.is-excluded .item-amount,
.treasury-cat-item.is-excluded .item-meta {
  opacity: 0.45;
}

.treasury-cat-item .ios-check {
  margin-left: 2px;
}

.field-label {
  font-size: 15px;
  line-height: 1.25;
  flex: 0 1 auto;
  width: auto;
  max-width: 42%;
  min-width: 4.5rem;
  flex-shrink: 1;
  color: var(--text-primary);
  text-align: left;
  align-self: center;
}

.ios-field input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 16px;
  font-family: var(--font-ios);
  line-height: 1.25;
  padding: 2px 0;
  outline: none;
  text-align: right;
}

.ios-field input::placeholder { color: var(--text-secondary); }

.comment-field-wrap {
  align-items: center;
  position: relative;
}

.comment-input-wrap {
  flex: 1 1 auto;
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
}

.comment-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: -16px;
  right: -16px;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: rgba(28, 28, 30, 0.98);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  z-index: 30;
  max-height: 220px;
  overflow-y: auto;
}

.comment-suggestion-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
}

.comment-suggestion-item:active,
.comment-suggestion-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.suggestion-name {
  font-size: 15px;
  color: var(--text-primary);
  text-align: left;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suggestion-meta {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.type-picker { margin-bottom: 20px; }

.type-picker .segment {
  font-size: 12px;
  padding: 7px 4px;
}

.bank-preview {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.bank-balances {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(118, 118, 128, 0.16);
}

.bank-balance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 4px 0;
}

.bank-balance-row + .bank-balance-row {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.bank-hint {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.bank-withdraw-btn {
  margin-top: 10px;
}

.bank-history {
  margin-top: 22px;
}

.bank-history-empty {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.bank-history-list {
  margin-top: 8px;
}

.bank-history-item .expense-amount.bank-neutral {
  color: var(--text-secondary);
}

/* Нострадамус — планирование бюджета */
#modal-nostradamus {
  color-scheme: dark;
}

.ios-sheet-nostradamus {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 88%;
}

#modal-nostradamus .sheet-grabber,
#modal-nostradamus .sheet-header {
  flex-shrink: 0;
}

#modal-nostradamus .sheet-header {
  position: relative;
  z-index: 2;
  background: var(--panel-bg-elevated);
}

#modal-nostradamus .sheet-body-scroll {
  position: relative;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding-bottom: 24px;
  -webkit-overflow-scrolling: touch;
}

.nostra-drilldown.hidden {
  display: none !important;
  pointer-events: none !important;
}

.nostra-overview.hidden {
  display: none !important;
}

.nostra-preview {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  max-height: 110px;
  overflow: hidden;
}

.nostra-preview .nostradamus-composite {
  transform: scale(0.85);
  transform-origin: center bottom;
}

.nostra-hint {
  margin: 0 0 14px;
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.nostra-month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.nostra-month-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: rgba(139, 111, 194, 0.18);
  color: #c9b8e8;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.nostra-month-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #d4c4f0;
}

.nostra-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.nostra-summary-card {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(118, 118, 128, 0.16);
}

.nostra-summary-card--wide {
  grid-column: 1 / -1;
}

.nostra-summary-label {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.nostra-summary-value {
  font-size: 15px;
  font-weight: 700;
}

.nostra-summary-value.expense {
  color: var(--expense-red);
}

.nostra-summary-value.income {
  color: var(--income-green);
}

.nostra-summary-value.actual {
  color: var(--expense-red);
}

.nostra-summary-value.balance {
  color: var(--income-green);
}

.nostra-day-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.nostra-next-curtain {
  margin: 8px 0 4px;
  border: 1px solid rgba(184, 160, 232, 0.22);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(48, 36, 72, 0.55), rgba(28, 22, 42, 0.72));
  overflow: hidden;
}

.nostra-next-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: none;
  background: transparent;
  color: #e4daf8;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.nostra-next-toggle:active {
  background: rgba(139, 111, 194, 0.18);
}

.nostra-next-toggle-label {
  flex: 1;
}

.nostra-next-toggle-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #c4b0e0;
  font-size: 12px;
  transition: transform 0.22s ease;
}

.nostra-next-toggle.is-open .nostra-next-toggle-chevron,
.nostra-next-curtain.is-open .nostra-next-toggle-chevron {
  transform: rotate(180deg);
}

.nostra-next-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}

.nostra-next-curtain.is-open .nostra-next-panel {
  grid-template-rows: 1fr;
}

.nostra-next-inner {
  overflow: hidden;
  min-height: 0;
}

.nostra-next-summary {
  padding: 0 14px 8px;
}

.nostra-next-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 12px;
  color: var(--text-secondary);
}

.nostra-next-summary-row strong {
  font-weight: 700;
}

.nostra-day-list--next {
  padding: 0 10px 12px;
  margin-bottom: 0;
}

.nostra-day-cell {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(28, 24, 38, 0.72);
  color: #e8e0f5;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.nostra-day-cell:active {
  background: rgba(139, 111, 194, 0.22);
}

.nostra-day-cell.is-today {
  border-color: rgba(184, 160, 232, 0.55);
  box-shadow: inset 0 0 0 1px rgba(184, 160, 232, 0.2);
}

.nostra-day-cell.is-weekend .nostra-day-cell-weekday {
  color: #c4b0e0;
}

.nostra-day-cell.is-past {
  opacity: 0.88;
}

.nostra-day-cell.has-plan {
  background: rgba(139, 111, 194, 0.14);
}

.nostra-day-cell-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 36px;
}

.nostra-day-cell-num {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: #f0e8ff;
}

.nostra-day-cell-weekday {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: lowercase;
}

.nostra-day-cell-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.nostra-day-cell-net {
  display: inline-block;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

button.nostra-day-cell .nostra-day-cell-net.is-positive {
  color: var(--income-green);
  -webkit-text-fill-color: var(--income-green);
}

button.nostra-day-cell .nostra-day-cell-net.is-negative {
  color: var(--expense-red);
  -webkit-text-fill-color: var(--expense-red);
}

.nostra-day-cell-empty {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
}

.nostra-day-cell-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.nostra-day-cell-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.nostra-day-cell-chip-icon {
  font-size: 13px;
  line-height: 1;
}

button.nostra-day-cell .nostra-day-cell-chip.is-expense .nostra-day-cell-chip-amount {
  color: #ff8a84;
  font-weight: 700;
  -webkit-text-fill-color: #ff8a84;
}

button.nostra-day-cell .nostra-day-cell-chip.is-income .nostra-day-cell-chip-amount {
  color: #5ee87a;
  font-weight: 700;
  -webkit-text-fill-color: #5ee87a;
}

.nostra-day-cell-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.nostra-day-cell-fact {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.92;
}

button.nostra-day-cell .nostra-day-cell-fact.is-expense {
  color: #ff8a84;
}

button.nostra-day-cell .nostra-day-cell-fact.is-income {
  color: #5ee87a;
}

.nostra-day-cell.has-actual {
  border-color: rgba(48, 209, 88, 0.18);
}

.nostra-day-cell-remain {
  flex-shrink: 0;
  text-align: right;
}

.nostra-day-cell-remain .nostra-day-remain-label {
  display: block;
  font-size: 9px;
  color: var(--text-secondary);
  margin-bottom: 1px;
}

.nostra-day-cell-remain .nostra-day-remain-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--income-green);
}

.nostra-day-cell-remain.is-negative .nostra-day-remain-value {
  color: var(--expense-red);
}

.nostra-day-cell-chevron {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
  color: rgba(201, 184, 232, 0.55);
}

#modal-nostradamus #nostra-back.hidden {
  visibility: hidden;
}

.nostra-mail-entry {
  display: flex;
  justify-content: center;
  margin: 0 0 14px;
}

.nostra-mail-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(138, 122, 104, 0.45);
  border-radius: 12px;
  background: rgba(90, 74, 56, 0.35);
  color: #e8dcc8;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.nostra-mail-btn:active {
  transform: scale(0.98);
}

.nostra-mail-btn .mail-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #ff453a;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* Голубиная почта — модалка */
#modal-pigeonmail {
  color-scheme: dark;
}

.ios-sheet-pigeonmail {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 88%;
}

#modal-pigeonmail .sheet-grabber,
#modal-pigeonmail .sheet-header {
  flex-shrink: 0;
}

#modal-pigeonmail .sheet-header {
  position: relative;
  z-index: 2;
  background: var(--panel-bg-elevated);
}

#modal-pigeonmail .sheet-body-scroll {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding-bottom: 24px;
}

.mail-preview {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
  max-height: 100px;
  overflow: hidden;
}

.mail-preview .iso-building-svg {
  transform: scale(0.82);
  transform-origin: center bottom;
}

/* Долги — тот же sheet-паттерн, что банк / Нострадамус */
#modal-debts {
  color-scheme: dark;
}

.ios-sheet-debts {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 88%;
}

#modal-debts .sheet-grabber,
#modal-debts .sheet-header {
  flex-shrink: 0;
}

#modal-debts .sheet-header {
  position: relative;
  z-index: 2;
  background: var(--panel-bg-elevated);
}

#modal-debts .sheet-body-scroll {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding-bottom: 24px;
}

.debts-overview.hidden,
.debts-drilldown.hidden,
.debts-detail.hidden {
  display: none;
}

.debts-preview {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
  max-height: 110px;
  overflow: hidden;
}

.debts-preview .iso-building-svg {
  transform: scale(0.9);
  transform-origin: center bottom;
}

.debts-hint {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary);
  text-align: center;
}

.debts-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}

.debts-summary-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  min-height: 78px;
  border: 1px solid transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  width: 100%;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.debts-summary-card--owe {
  border-color: rgba(255, 69, 58, 0.28);
  background: rgba(255, 69, 58, 0.1);
}

.debts-summary-card--lend {
  border-color: rgba(48, 209, 88, 0.28);
  background: rgba(48, 209, 88, 0.1);
}

.debts-summary-card:hover,
.debts-summary-card:focus-visible {
  outline: none;
}

.debts-summary-card--owe:hover,
.debts-summary-card--owe:focus-visible {
  background: rgba(255, 69, 58, 0.16);
}

.debts-summary-card--lend:hover,
.debts-summary-card--lend:focus-visible {
  background: rgba(48, 209, 88, 0.16);
}

.debts-summary-card:active {
  transform: scale(0.98);
}

.debts-summary-card .nostra-summary-label {
  width: 100%;
  margin-bottom: 6px;
}

.debts-summary-card .nostra-summary-value {
  width: 100%;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.debts-summary-meta {
  width: 100%;
  margin-top: auto;
  padding-top: 4px;
  font-size: 11px;
  color: var(--text-secondary);
}

.debts-direction-seg {
  margin-bottom: 12px;
}

#debt-direction-seg .segment[data-debt-dir="owe"].active {
  color: var(--expense-red);
}

#debt-direction-seg .segment[data-debt-dir="lend"].active {
  color: var(--income-green);
}

.debts-form {
  margin-top: 4px;
}

.debts-form .section-label,
#debts-form-title.section-label {
  display: block;
  margin-bottom: 8px;
}

.debts-form .ios-form-group {
  margin-bottom: 14px;
}

#modal-debts .field-label {
  width: 96px;
}

#modal-debts .ios-field input {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.debts-schedule-hint {
  margin: -2px 0 10px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-secondary);
}

.debt-schedule {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.debt-schedule-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  gap: 8px;
  align-items: end;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(118, 118, 128, 0.18);
}

.debt-schedule-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.debt-schedule-label {
  font-size: 11px;
  color: var(--text-secondary);
}

.debt-schedule-field input {
  width: 100%;
  box-sizing: border-box;
  min-height: 36px;
  padding: 6px 8px;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  color: var(--text-primary);
  font-size: 15px;
  font-family: var(--font-ios);
  font-variant-numeric: tabular-nums;
  outline: none;
}

.debt-schedule-field input:focus {
  box-shadow: 0 0 0 1px rgba(10, 132, 255, 0.55);
}

.debt-schedule-remove {
  width: 36px;
  height: 36px;
  margin-bottom: 0;
  border: none;
  border-radius: 8px;
  background: rgba(255, 69, 58, 0.14);
  color: var(--expense-red);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.debt-schedule-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.debt-add-part {
  border: none;
  background: none;
  color: var(--ios-blue);
  font-size: 15px;
  font-family: var(--font-ios);
  padding: 0;
  cursor: pointer;
}

.debt-schedule-total {
  font-size: 14px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.debt-schedule-total .expense {
  color: var(--expense-red);
}

.debt-schedule-total .income {
  color: var(--income-green);
}

.debt-detail-form .ios-btn-destructive {
  margin-top: 12px;
  width: 100%;
}

.debts-form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.debts-form-actions .ios-btn {
  width: 100%;
  margin: 0;
}

.debts-list-total {
  margin-bottom: 14px;
}

.debts-list-total .bank-balance-row {
  min-height: 28px;
}

.debts-total-label {
  color: var(--text-secondary);
  font-size: 14px;
}

.debts-total-value {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.debts-total-value.expense {
  color: var(--expense-red);
}

.debts-total-value.income {
  color: var(--income-green);
}

.debts-list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: rgba(118, 118, 128, 0.18);
  border-radius: 12px;
  overflow: hidden;
}

.debts-list .debt-item {
  cursor: pointer;
  align-items: flex-start;
}

.debts-list .debt-item:active {
  background: transparent;
}

.debts-list .item-info {
  flex: 1;
  min-width: 0;
}

.debts-list .item-amount {
  min-width: 88px;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding-top: 1px;
}

.debts-sublist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.debts-sublist .debt-item {
  padding-left: 28px;
  background: rgba(0, 0, 0, 0.12);
}

.debt-person-group {
  list-style: none;
  margin: 0;
  padding: 0;
}

.debt-person-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 8px;
}

.debt-person-head .item-title {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}

.debt-person-head .item-amount {
  min-width: 88px;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.debt-item .item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.debt-item.is-paid {
  opacity: 0.55;
}

.debt-item .debt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.debt-btn {
  background: none;
  border: none;
  color: var(--ios-blue);
  font-size: 13px;
  padding: 0;
  cursor: pointer;
}

.debt-btn-danger {
  color: var(--expense-red);
}

.debt-paid-tag {
  font-size: 11px;
  color: var(--text-secondary);
}

.debt-section-label {
  list-style: none;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 16px 16px 8px;
}

.debt-empty {
  list-style: none;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
  padding: 12px 16px;
}

.mail-date-label {
  margin: 0 0 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

.mail-day-group {
  margin-bottom: 16px;
}

.mail-day-group--overdue .mail-day-heading {
  color: #ff9f0a;
}

.mail-day-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.mail-day-date {
  flex: 1;
}

.mail-day-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: 6px;
}

.mail-day-tag--today {
  background: rgba(48, 209, 88, 0.18);
  color: #30d158;
}

.mail-day-tag--overdue {
  background: rgba(255, 159, 10, 0.18);
  color: #ff9f0a;
}

.mail-day-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mail-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mail-item {
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
}

.mail-item--income {
  border-color: rgba(48, 209, 88, 0.25);
}

.mail-item--expense {
  border-color: rgba(255, 69, 58, 0.2);
}

.mail-item-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.mail-item-icon {
  font-size: 22px;
  line-height: 1;
}

.mail-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mail-item-title {
  font-size: 15px;
  font-weight: 600;
}

.mail-item-amount {
  font-size: 16px;
  font-weight: 700;
}

.mail-item--expense .mail-item-amount {
  color: #ff6961;
}

.mail-item--income .mail-item-amount {
  color: #30d158;
}

.mail-item-note {
  font-size: 13px;
  color: var(--text-secondary);
}

.mail-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mail-btn {
  flex: 1;
  min-width: 88px;
  padding: 8px 10px;
  border-radius: 10px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.mail-btn-accept {
  background: rgba(48, 209, 88, 0.18);
  color: #30d158;
}

.mail-btn-reject {
  background: rgba(255, 69, 58, 0.15);
  color: #ff6961;
}

.mail-btn-edit {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

.mail-btn:active {
  transform: scale(0.98);
}

.mail-btn-accept:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.mail-empty {
  margin: 24px 0;
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
}

.mail-edit-panel {
  margin-top: 16px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
}

.mail-edit-panel.hidden {
  display: none !important;
}

.mail-edit-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
}

.mail-edit-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mail-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mail-field-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.mail-field input,
.mail-field select {
  padding: 10px 12px;
  border-radius: 10px;
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-primary);
  font-size: 15px;
}

.mail-field select option {
  background: #1c1c1e;
  color: #fff;
}

.mail-edit-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.mail-edit-actions .ios-btn {
  flex: 1;
}

.nostra-day-detail {
  margin-top: 4px;
}

.nostra-day-plan-total {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #b8a0e8;
}

.nostra-plan-section {
  margin-bottom: 14px;
}

.nostra-plan-section-title {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #e8b8b8;
}

.nostra-plan-section-title--income {
  color: #9de8b0;
}

.nostra-plan-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}

.nostra-plan-item {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
}

.nostra-plan-item--income {
  border-color: rgba(125, 222, 160, 0.18);
  background: rgba(48, 209, 88, 0.06);
}

.nostra-plan-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.nostra-plan-item-label {
  font-size: 12px;
  font-weight: 700;
  color: #c9b8e8;
}

.nostra-plan-item--income .nostra-plan-item-label {
  color: #9de8b0;
}

.nostra-plan-remove {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 90, 90, 0.15);
  color: #ff8a8a;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.nostra-plan-remove:active {
  background: rgba(255, 90, 90, 0.3);
}

.nostra-add-plan {
  width: 100%;
  margin-bottom: 4px;
  padding: 10px 14px;
  border: 1px dashed rgba(255, 140, 140, 0.28);
  border-radius: 12px;
  background: rgba(255, 90, 90, 0.06);
  color: #e8b8b8;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.nostra-add-plan--income {
  border-color: rgba(125, 222, 160, 0.35);
  background: rgba(48, 209, 88, 0.08);
  color: #9de8b0;
}

.nostra-add-plan:active {
  opacity: 0.85;
}

.nostra-day-row {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(28, 24, 38, 0.72);
}

.nostra-day-row.is-today {
  border-color: rgba(184, 160, 232, 0.55);
  box-shadow: inset 0 0 0 1px rgba(184, 160, 232, 0.2);
}

.nostra-day-row.is-weekend .nostra-day-date-meta {
  color: #c4b0e0;
}

.nostra-day-row.is-past {
  opacity: 0.88;
}

.nostra-day-row.has-plan {
  background: rgba(139, 111, 194, 0.14);
}

.nostra-day-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.nostra-day-date {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.nostra-day-date-num {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: #f0e8ff;
}

.nostra-day-date-meta {
  font-size: 13px;
  line-height: 1.3;
  color: var(--text-secondary);
}

.nostra-day-remain {
  flex-shrink: 0;
  text-align: right;
}

.nostra-day-remain-label {
  display: block;
  font-size: 10px;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.nostra-day-remain-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--income-green);
  white-space: nowrap;
}

.nostra-day-remain.is-negative .nostra-day-remain-value {
  color: var(--expense-red);
}

.nostra-day-row-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nostra-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nostra-field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.nostra-field input,
.nostra-field select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
  color: #f5f0ff;
  font-size: 14px;
  font-family: inherit;
}

.nostra-field input:focus,
.nostra-field select:focus {
  outline: none;
  border-color: rgba(184, 160, 232, 0.55);
}

.nostra-field select {
  appearance: none;
  color-scheme: dark;
  background-color: rgba(0, 0, 0, 0.22);
  background-image: linear-gradient(45deg, transparent 50%, #b8a0e8 50%), linear-gradient(135deg, #b8a0e8 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 12px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 28px;
}

.nostra-field select option {
  background-color: var(--panel-bg-elevated);
  color: #f5f0ff;
}

.nostra-day-fact {
  margin-top: 10px;
  font-size: 12px;
  color: var(--expense-red);
  opacity: 0.9;
}

.nostra-day-fact-income {
  margin-top: 6px;
  color: var(--income-green);
}

.nostra-day-plan-meta {
  margin-top: 8px;
  font-size: 12px;
  color: #b8a0e8;
  line-height: 1.35;
}

.nostra-day-row-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.nostra-day-save-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  border: none;
  border-radius: 10px;
  background: rgba(139, 111, 194, 0.35);
  color: #e8dcff;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.nostra-day-save-btn:active {
  background: rgba(139, 111, 194, 0.55);
}

.nostra-day-save-status {
  font-size: 12px;
  font-weight: 600;
  color: #7ddea0;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.nostra-day-save-status.is-visible {
  opacity: 1;
}

.nostra-day-row.is-saved.has-plan {
  border-color: rgba(125, 222, 160, 0.35);
}

.building-label.bank-label .building-label-amount.income {
  color: #6ab4e8;
}

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

.cat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: 12px;
  border: none;
  background: rgba(118, 118, 128, 0.18);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 10px;
  font-family: var(--font-ios);
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
}

.cat-btn .emoji { font-size: 22px; }

.cat-btn.active {
  color: var(--text-primary);
  background: rgba(255,255,255,0.12);
}

.preview-building {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: rgba(118, 118, 128, 0.12);
  border-radius: 14px;
  margin-bottom: 16px;
  min-height: 140px;
}
.hidden { display: none !important; }

.preview-building.hidden { display: none; }

.preview-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

/* iOS Buttons */
.ios-btn {
  width: 100%;
  padding: 15px;
  border-radius: 14px;
  border: none;
  font-size: 17px;
  font-weight: 600;
  font-family: var(--font-ios);
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}

.ios-btn:active { opacity: 0.75; transform: scale(0.98); }

.ios-btn-primary.expense { background: var(--expense-red); color: #fff; }
.ios-btn-primary.income { background: var(--income-green); color: #fff; }

.ios-btn-destructive {
  background: rgba(118, 118, 128, 0.18);
  color: var(--expense-red);
  margin: 0 16px 16px;
  width: calc(100% - 32px);
}

/* Detail sheet */
.sheet-detail { text-align: center; }

.detail-building {
  margin: 8px auto 16px;
  display: flex;
  justify-content: center;
  image-rendering: pixelated;
}

.detail-tier {
  font-size: 12px;
  color: var(--income-green);
  margin-bottom: 8px;
  font-weight: 600;
}

.detail-title {
  font-family: var(--font-pixel);
  font-size: 13px;
  margin-bottom: 8px;
}

.detail-amount {
  font-family: var(--font-pixel);
  font-size: 16px;
  margin-bottom: 20px;
}

.detail-rows {
  text-align: left;
  background: rgba(118, 118, 128, 0.18);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 8px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  padding: 12px 16px;
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
}
.detail-row:last-child { border-bottom: none; }
.detail-row .label { color: var(--text-secondary); }

.detail-section-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 16px 0 8px;
  text-align: left;
}

.category-expense-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  background: rgba(118, 118, 128, 0.18);
  border-radius: 12px;
  overflow: hidden;
}

.category-expense-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-size: 16px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.category-expense-item:last-child { border-bottom: none; }
.category-expense-item:active { background: rgba(255, 255, 255, 0.06); }
.category-expense-item .expense-name { text-align: left; flex: 1; min-width: 0; }
.category-expense-item .expense-datetime {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}
.category-expense-item .expense-amount { color: var(--expense-red); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.category-expense-item .expense-amount.income { color: var(--income-green); }

.category-expense-group {
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
}

.category-expense-group:last-child { border-bottom: none; }

.expense-group-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px 8px;
}

.expense-group-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.expense-group-title .expense-name {
  font-size: 16px;
  font-weight: 600;
  text-align: left;
}

.expense-group-count {
  font-size: 12px;
  color: var(--text-secondary);
}

.expense-group-entries {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
}

.expense-subitem {
  padding: 8px 16px 8px 28px;
  font-size: 14px;
  border-bottom: none;
}

.expense-subitem .expense-datetime {
  flex: 1;
  text-align: left;
}

.expense-subitem::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  margin-right: -8px;
  flex-shrink: 0;
}


.empty-expenses {
  margin: 0;
  padding: 16px;
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
}

/* Pixel buildings */
.pixel-building {
  display: flex;
  flex-direction: column;
  align-items: center;
  image-rendering: pixelated;
}

.building-roof { display: flex; }
.building-roof .tile { width: 16px; height: 12px; }

.building-body {
  position: relative;
  width: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}

.building-windows {
  position: absolute;
  top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.window-row { display: flex; gap: 4px; }

.window {
  width: 10px;
  height: 10px;
  background: #d9f2ff;
  border: 1px solid rgba(0,0,0,0.2);
}

.building-door {
  width: 12px;
  height: 16px;
  background: #594030;
  position: absolute;
  bottom: 0;
}

.building-base {
  width: 44px;
  height: 4px;
  opacity: 0.7;
}

/* ===== Реальный iPhone (без рамки) ===== */
@media (max-width: 500px), (hover: none) and (pointer: coarse) {
  .preview-stage {
    background: var(--panel-bg);
    padding: 0;
    align-items: stretch;
    width: 100%;
    height: 100%;
    height: 100dvh;
    min-height: 100dvh;
  }

  .iphone {
    transform: none !important;
    width: 100%;
    height: 100%;
    min-height: 100%;
    min-height: 100dvh;
  }

  .iphone-frame {
    width: 100%;
    width: 100vw;
    height: 100%;
    height: 100dvh;
    min-height: 100dvh;
    padding: 0;
    border-radius: 0;
    background: var(--panel-bg);
    box-shadow: none;
  }

  .iphone-btn,
  .dynamic-island,
  .home-indicator { display: none; }

  .iphone-screen {
    border-radius: 0;
    width: 100%;
    height: 100%;
    background: var(--panel-bg);
  }

  #app {
    background: var(--panel-bg);
  }

  .status-bar {
    color: #fff;
  }

  /* Шиты на всю ширину, без «чёрной полки» под ними */
  .sheet-overlay {
    align-items: flex-end;
  }

  .ios-sheet {
    max-height: min(94dvh, 100%);
    border-radius: 14px 14px 0 0;
    padding-bottom: max(20px, var(--safe-bottom));
  }

  .tab-bar {
    height: calc(var(--tab-bar-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
  }

  .field-label {
    max-width: 46%;
    font-size: 15px;
  }

  .ios-btn {
    margin-top: 4px;
  }
}

/* Масштабирование рамки под экран (десктоп-превью) */
@media (min-width: 501px) {
  :root {
    --safe-bottom: 34px;
  }

  .iphone {
    transform: scale(min(
      calc((100vw - 48px) / var(--phone-w)),
      calc((100dvh - 48px) / var(--phone-h))
    ));
  }
}

#debug-date-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  padding: 6px 12px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 159, 10, 0.92);
  pointer-events: none;
}