/* Wood Mini App — Telegram-styled theme tokens
   Both light and dark themes coexist; .wood-theme--dark / --light scopes pick. */

:root {
  --wood-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", "Roboto", "Segoe UI", system-ui, sans-serif;
  --wood-font-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  /* Accent — warm amber (wood/construction) */
  --wood-accent: #D97757;
  --wood-accent-hover: #C26645;
  --wood-accent-soft: rgba(217, 119, 87, 0.14);
  --wood-accent-on: #FFFFFF;

  --wood-pos: #2EA16F;          /* deposit / positive */
  --wood-pos-soft: rgba(46, 161, 111, 0.14);
  --wood-neg: #D14D4D;          /* delete / negative */
  --wood-neg-soft: rgba(209, 77, 77, 0.14);
  --wood-warn: #D99C33;         /* urgent confirm */
  --wood-warn-soft: rgba(217, 156, 51, 0.14);

  --wood-radius-sm: 8px;
  --wood-radius: 12px;
  --wood-radius-lg: 16px;
}

/* DARK — Telegram night theme */
.wood-theme--dark {
  --wood-bg: #17212B;
  --wood-bg-elev: #1D2733;
  --wood-card: #232E3C;
  --wood-card-elev: #2A3543;
  --wood-input: #1A2632;
  --wood-border: rgba(255, 255, 255, 0.07);
  --wood-border-strong: rgba(255, 255, 255, 0.12);
  --wood-text: #FFFFFF;
  --wood-text-sec: #91A0B3;
  --wood-text-ter: #6B7785;
  --wood-link: #6CB1F0;
  --wood-overlay: rgba(0, 0, 0, 0.55);
  --wood-skeleton: rgba(255, 255, 255, 0.05);
  --wood-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* LIGHT — Telegram day theme */
.wood-theme--light {
  --wood-bg: #FFFFFF;
  --wood-bg-elev: #F7F7F8;
  --wood-card: #FFFFFF;
  --wood-card-elev: #FFFFFF;
  --wood-input: #F1F2F4;
  --wood-border: rgba(15, 20, 25, 0.08);
  --wood-border-strong: rgba(15, 20, 25, 0.14);
  --wood-text: #0F1419;
  --wood-text-sec: #5C6773;
  --wood-text-ter: #8A95A2;
  --wood-link: #2A85D0;
  --wood-overlay: rgba(15, 20, 25, 0.35);
  --wood-skeleton: rgba(15, 20, 25, 0.04);
  --wood-shadow: 0 4px 16px rgba(15, 20, 25, 0.06), 0 0 0 1px rgba(15, 20, 25, 0.04);
}

/* App shell */
.wood {
  font-family: var(--wood-font);
  background: var(--wood-bg);
  color: var(--wood-text);
  height: 100%;
  width: 100%;
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}
.wood *, .wood *::before, .wood *::after { box-sizing: border-box; }
.wood .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Scroll containers */
.wood-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.wood-scroll::-webkit-scrollbar { display: none; }

/* Buttons */
.wood-btn {
  font-family: inherit;
  border: none;
  cursor: pointer;
  border-radius: var(--wood-radius);
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 590;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 120ms ease, transform 80ms ease, opacity 120ms ease;
  min-height: 44px;
}
.wood-btn:active { transform: scale(0.98); }
.wood-btn--primary { background: var(--wood-accent); color: var(--wood-accent-on); }
.wood-btn--primary:hover { background: var(--wood-accent-hover); }
.wood-btn--ghost { background: transparent; color: var(--wood-text); }
.wood-btn--ghost:hover { background: var(--wood-bg-elev); }
.wood-btn--soft { background: var(--wood-bg-elev); color: var(--wood-text); }
.wood-btn--soft:hover { background: var(--wood-card-elev); }
.wood-btn--danger { background: var(--wood-neg); color: #fff; }
.wood-btn--danger:hover { background: #B53E3E; }
.wood-btn--block { width: 100%; }

/* Icon button */
.wood-iconbtn {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: transparent;
  border: none;
  color: var(--wood-text-sec);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 120ms ease;
}
.wood-iconbtn:hover { background: var(--wood-bg-elev); color: var(--wood-text); }
.wood-iconbtn--lg { width: 44px; height: 44px; border-radius: 12px; }

/* Card */
.wood-card {
  background: var(--wood-card);
  border-radius: var(--wood-radius-lg);
  border: 1px solid var(--wood-border);
}

/* Input */
.wood-input {
  background: var(--wood-input);
  border: 1px solid transparent;
  border-radius: var(--wood-radius);
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--wood-text);
  width: 100%;
  letter-spacing: -0.01em;
  transition: border-color 120ms ease;
}
.wood-input:focus { outline: none; border-color: var(--wood-accent); }
.wood-input::placeholder { color: var(--wood-text-ter); }

/* Badge */
.wood-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  height: 20px;
  white-space: nowrap;
}
.wood-badge--soft { background: var(--wood-bg-elev); color: var(--wood-text-sec); }
.wood-badge--pos  { background: var(--wood-pos-soft); color: var(--wood-pos); }
.wood-badge--neg  { background: var(--wood-neg-soft); color: var(--wood-neg); }
.wood-badge--warn { background: var(--wood-warn-soft); color: var(--wood-warn); }
.wood-badge--accent { background: var(--wood-accent-soft); color: var(--wood-accent); }

/* Tab bar */
.wood-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--wood-bg-elev);
  border-radius: 12px;
}
.wood-tab {
  flex: 1;
  padding: 8px 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 590;
  color: var(--wood-text-sec);
  border-radius: 8px;
  cursor: pointer;
  transition: all 120ms ease;
  border: none;
  background: transparent;
  font-family: inherit;
  letter-spacing: -0.01em;
}
.wood-tab--active {
  background: var(--wood-card);
  color: var(--wood-text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Bottom tab bar */
.wood-tabbar {
  display: flex;
  background: var(--wood-card);
  border-top: 1px solid var(--wood-border);
  padding: 8px 8px 14px;
  gap: 4px;
}
.wood-tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 4px;
  color: var(--wood-text-ter);
  font-size: 10px;
  font-weight: 590;
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: inherit;
  letter-spacing: -0.01em;
  border-radius: 8px;
  transition: color 120ms ease, background 120ms ease;
}
.wood-tabbar__item--active { color: var(--wood-accent); }

/* Progress bar */
.wood-progress {
  width: 100%;
  height: 4px;
  background: var(--wood-bg-elev);
  border-radius: 99px;
  overflow: hidden;
}
.wood-progress__bar {
  height: 100%;
  background: var(--wood-accent);
  border-radius: 99px;
  transition: width 300ms ease;
}
.wood-progress__bar--pos { background: var(--wood-pos); }
.wood-progress__bar--neg { background: var(--wood-neg); }

/* List row separator */
.wood-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--wood-border);
  cursor: pointer;
  transition: background 120ms ease;
}
.wood-row:last-child { border-bottom: none; }
.wood-row:hover { background: var(--wood-bg-elev); }

/* Skeleton */
.wood-skel {
  background: linear-gradient(90deg, var(--wood-skeleton), rgba(255,255,255,0.02), var(--wood-skeleton));
  background-size: 200% 100%;
  animation: wood-skel 1.4s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes wood-skel { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

/* Bottom sheet */
.wood-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: var(--wood-overlay);
  backdrop-filter: blur(2px);
  z-index: 80;
  animation: wood-fade-in 180ms ease;
}
.wood-sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--wood-bg);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  max-height: 92%;
  display: flex;
  flex-direction: column;
  z-index: 81;
  animation: wood-sheet-in 240ms cubic-bezier(.2,.7,.3,1);
  box-shadow: 0 -12px 32px rgba(0,0,0,0.25);
}
.wood-sheet__grabber {
  width: 36px; height: 4px;
  background: var(--wood-border-strong);
  border-radius: 99px;
  margin: 8px auto 0;
  flex-shrink: 0;
}
@keyframes wood-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes wood-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Photo placeholder (receipt thumbnail) — subtle stripes */
.wood-photo {
  background:
    repeating-linear-gradient(135deg,
      rgba(217, 119, 87, 0.15) 0 6px,
      rgba(217, 119, 87, 0.07) 6px 12px),
    var(--wood-card-elev);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wood-text-ter);
  font-family: var(--wood-font-mono);
  font-size: 10px;
  flex-shrink: 0;
  overflow: hidden;
}

/* Toast */
.wood-toast {
  position: absolute;
  bottom: 86px;
  left: 16px; right: 16px;
  background: var(--wood-text);
  color: var(--wood-bg);
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  z-index: 90;
  animation: wood-toast-in 220ms cubic-bezier(.2,.7,.3,1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
@keyframes wood-toast-in { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Tap target */
.wood-tap { min-height: 44px; min-width: 44px; }

/* Audit JSON diff */
.wood-diff {
  font-family: var(--wood-font-mono);
  font-size: 11px;
  background: var(--wood-bg-elev);
  border-radius: 8px;
  padding: 10px;
  overflow-x: auto;
  white-space: pre;
  color: var(--wood-text-sec);
  line-height: 1.5;
}
.wood-diff__add { color: var(--wood-pos); background: var(--wood-pos-soft); display: block; padding: 0 4px; margin: 0 -4px; }
.wood-diff__del { color: var(--wood-neg); background: var(--wood-neg-soft); display: block; padding: 0 4px; margin: 0 -4px; text-decoration: line-through; opacity: 0.85; }