/* ── Responsive tokens ── */
:root {
  --profile-balance-pt: 56px;
  --profile-balance-gap: 30px;
  --carousel-height: 141px;
  --sheet-radius: 60px;
  --sheet-header-height: 85px;
  --balance-font-size: 40px;
  --balance-amount-height: 48px;
  --action-btn-height: 52px;
  --sheet-content-pb: 120px;

  --page-header-title-size: 34px;
  --page-header-pb: 10px;

  --story-ring-size: 64px;
  --story-img-size: 59px;
  --stories-row-pt: 12px;
  --stories-row-pb: 4px;

  --category-bar-height: 67px;
  --category-tab-height: 67px;
  --category-icon-size: 30px;

  --empty-state-pt: 64px;
  --empty-state-pb: 120px;
  --empty-state-icon-w: 182px;
  --empty-state-icon-h: 120px;

  --events-padding-v: 20px;
}

@media (max-height: 700px) {
  :root {
    --profile-balance-pt: 24px;
    --profile-balance-gap: 14px;
    --carousel-height: 96px;
    --sheet-radius: 40px;
    --sheet-header-height: 65px;
    --balance-font-size: 32px;
    --balance-amount-height: 38px;
    --action-btn-height: 44px;
    --sheet-content-pb: 100px;

    --page-header-title-size: 28px;
    --page-header-pb: 4px;

    --story-ring-size: 48px;
    --story-img-size: 44px;
    --stories-row-pt: 6px;
    --stories-row-pb: 2px;

    --category-bar-height: 52px;
    --category-tab-height: 52px;
    --category-icon-size: 22px;

    --empty-state-pt: 12px;
    --empty-state-pb: 0px;
    --empty-state-icon-w: 136px;
    --empty-state-icon-h: 90px;

    --events-padding-v: 8px;
  }
}

/* ── Reset & Base ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', 'Inter', system-ui, sans-serif;
  background: #030303;
  color: #F8F6F4;
  height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Form elements don't inherit font-family by default — force them to use the
   project font instead of the browser's UA default (often Arial/Helvetica). */
button, input, select, textarea, optgroup {
  font-family: inherit;
}

/* ── App Shell ── */
.app-shell {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

.app-shell__content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-bottom: 160px;
}

.app-content {
  min-height: 100%;
}

.app-content__sticky-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #030303;
  touch-action: pan-x;
}

/* ── Loading ── */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  color: #A8A8A8;
  font-size: 1rem;
}

/* ── Page Transition ── */
@keyframes slide-in-from-right {
  from { transform: translateX(30px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes slide-in-from-left {
  from { transform: translateX(-30px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

.page-transition {
  min-height: 100%;
}

.page--enter-right > * {
  animation: slide-in-from-right 220ms ease-out;
}

.page--enter-left > * {
  animation: slide-in-from-left 220ms ease-out;
}

/* ── Skeleton shimmer ── */
@keyframes shimmer {
  0%   { background-position: -400% 0; }
  100% { background-position:  400% 0; }
}

/* ── Keyframes (shared by toggle tabs & bottom nav modules) ── */
@keyframes toggle-stretch-a {
  0%   { transform: scaleX(1);    }
  30%  { transform: scaleX(1.12); }
  100% { transform: scaleX(1);    }
}

@keyframes toggle-stretch-b {
  0%   { transform: scaleX(1);    }
  30%  { transform: scaleX(1.12); }
  100% { transform: scaleX(1);    }
}

@keyframes nav-stretch-a {
  0%   { transform: scaleX(1);    }
  30%  { transform: scaleX(1.08); }
  100% { transform: scaleX(1);    }
}

@keyframes nav-stretch-b {
  0%   { transform: scaleX(1);    }
  30%  { transform: scaleX(1.08); }
  100% { transform: scaleX(1);    }
}

/* Copy-icon animation (papers → check → papers), triggered by .is-active */
.save-ico { display: block; }
.save-ico__papers,
.save-ico__check {
  transform-box: view-box;
  transform-origin: center;
  will-change: transform, opacity;
}
.save-ico__check { opacity: 0; transform: scale(0); }
.is-active .save-ico__papers {
  animation: saveIcoPapers 1.2s linear both;
}
.is-active .save-ico__check {
  animation: saveIcoCheck 1.2s linear both;
}
@keyframes saveIcoPapers {
  0%   { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }
  20%  { opacity: 0; transform: scale(0); animation-timing-function: linear; }
  86%  { opacity: 0; transform: scale(0); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes saveIcoCheck {
  0%   { opacity: 0; transform: scale(0); animation-timing-function: linear; }
  22%  { opacity: 0; transform: scale(0); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
  42%  { opacity: 1; transform: scale(1); animation-timing-function: linear; }
  78%  { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  86%  { opacity: 0; transform: scale(0); animation-timing-function: linear; }
  100% { opacity: 0; transform: scale(0); }
}

/* Chip bump animation */
@keyframes chipBump {
  0%   { transform: scale(0.94); }
  55%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}