/* Клабс · Mini App — tokens & base */
:root {
  --bg: #000000;
  --card-dark: #1C1C1E;
  --card-dark-2: #2C2C2E;
  --card-light: #FFFFFF;
  --lime: #D4FF00;
  --lime-600: #B8E000;
  --yellow: #FFD600;
  --blue: #BEE8F7;
  --pale: #E8F570;
  --text: #FFFFFF;
  --text-2: #8E8E93;
  --text-3: #48484A;
  --ink: #000000;
  --stroke: rgba(255,255,255,0.08);
  --radius: 22px;
  --radius-sm: 14px;
  --radius-lg: 28px;
  --font: -apple-system, "SF Pro Display", "SF Pro Text", "Inter", system-ui, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }

.app {
  width: 100%; height: 100%;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  position: relative;
  overflow: hidden;
  font-family: var(--font);
  letter-spacing: -0.01em;
}
.scroll {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;
  padding-bottom: 24px;
}
.scroll::-webkit-scrollbar { display: none; }

/* Reset button */
.btn { background: none; border: none; cursor: pointer; color: inherit; font: inherit; padding: 0; }

/* Screen transition (slide) */
.screen-stack { position: absolute; inset: 0; }
.screen {
  position: absolute; inset: 0;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 200ms;
  will-change: transform;
}
.screen.enter-right { transform: translateX(100%); }
.screen.exit-left { transform: translateX(-30%); opacity: 0.4; }
.screen.enter-up { transform: translateY(100%); }
.screen.exit-down { transform: translateY(100%); }

/* Haptic ripple */
@keyframes ripple { 0% { transform: scale(0.85); opacity: 0.5; } 100% { transform: scale(1.4); opacity: 0; } }

@keyframes checkpop {
  0% { transform: scale(0); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fade-in { animation: fadein 320ms ease both; }

/* Pill tags */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.tag.lime { background: var(--lime); color: #0c0d00; }
.tag.pale { background: var(--pale); color: #3a4100; }
.tag.blue { background: var(--blue); color: #0d3a4a; }
.tag.ghost-dark { background: transparent; border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.75); }
.tag.ghost-light { background: transparent; border: 1px solid rgba(0,0,0,0.18); color: rgba(0,0,0,0.7); }
.tag.strike { text-decoration: line-through; color: var(--text-3); }

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