/* Mimo Atelier adapter for the existing Telegram Mini App architecture. */
:root {
  --bg: var(--mimo-ink);
  --bg2: var(--mimo-night);
  --card: var(--mimo-ivory-08);
  --card2: var(--mimo-ivory-12);
  --line: var(--mimo-ivory-12);
  --cream: var(--mimo-ivory);
  --muted: var(--mimo-ivory-72);
  --dim: var(--mimo-ivory-48);
  --gold: var(--mimo-terracotta);
  --gold2: var(--mimo-clay);
  --blue: var(--mimo-clay);
  --green: var(--mimo-moss);
  --red: var(--mimo-danger);
  --terracotta: var(--mimo-terracotta);
  --terracotta2: var(--mimo-clay);
  --display: var(--mimo-font-ui);
  --body: var(--mimo-font-ui);
  --shadow: var(--mimo-shadow-float);
}

html { background: var(--mimo-ink); scroll-behavior: smooth; }
body {
  color: var(--mimo-ivory);
  font-family: var(--mimo-font-ui);
  background:
    radial-gradient(70vw 54vw at 92% -8%, rgba(200,111,77,.22), transparent 68%),
    radial-gradient(54vw 46vw at -8% 32%, rgba(224,154,125,.08), transparent 72%),
    linear-gradient(180deg, var(--mimo-ink), var(--mimo-night) 60%, #0b0908);
}

body::before {
  opacity: .42;
  background:
    linear-gradient(112deg, transparent 24%, rgba(244,238,231,.035) 48%, transparent 70%),
    radial-gradient(circle at 50% -10%, rgba(244,238,231,.045), transparent 36%);
  mix-blend-mode: screen;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

.app { width: min(100%, 520px); padding: calc(12px + env(safe-area-inset-top)) 14px calc(112px + env(safe-area-inset-bottom)); }

.topbar {
  top: calc(8px + env(safe-area-inset-top));
  grid-template-columns: minmax(0,1fr) auto auto;
  gap: 6px;
  margin-bottom: var(--mimo-space-4);
  padding: 7px;
  border: 1px solid var(--mimo-ivory-12);
  border-radius: 24px;
  background: rgba(18,16,15,.72);
  box-shadow: inset 0 1px 0 var(--mimo-ivory-12), 0 18px 54px rgba(0,0,0,.32);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
}

.brand { gap: 10px; }
.mark {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  color: var(--mimo-ivory);
  background: linear-gradient(145deg, var(--mimo-clay), var(--mimo-copper));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 26px var(--mimo-terracotta-18);
}
.brand h2 { font: 650 22px/.9 var(--mimo-font-ui); letter-spacing: -.055em; }
.brand h2 i { color: var(--mimo-clay); }
.brand span { margin-top: 4px; color: var(--mimo-ivory-48); font: 500 9px/1 var(--mimo-font-data); letter-spacing: .1em; }
.icon,.lang { min-width: 42px; min-height: 42px; border-color: var(--mimo-ivory-12); border-radius: 15px; color: var(--mimo-ivory); background: var(--mimo-ivory-04); }
.lang { color: var(--mimo-clay); }

.dropdown {
  top: 58px;
  padding: 7px;
  border-color: var(--mimo-ivory-12);
  border-radius: 20px;
  background: rgba(18,16,15,.90);
  box-shadow: var(--mimo-shadow-float), inset 0 1px 0 var(--mimo-ivory-12);
  -webkit-backdrop-filter: blur(36px) saturate(160%);
  backdrop-filter: blur(36px) saturate(160%);
  transform-origin: top right;
  transition: opacity var(--mimo-fast), transform 360ms var(--mimo-ease-spring);
}
.dropdown.open { animation: mimo-sheet-in var(--mimo-medium) var(--mimo-ease-out) both; }
.drop-item { min-height: 46px; border-radius: 14px; color: var(--mimo-ivory-72); font-weight: 550; }
.drop-item:hover,.drop-item.active { color: var(--mimo-ivory); background: var(--mimo-terracotta-10); }
.drop-item.logout { color: var(--mimo-danger); }

.section { animation: none; }
.section.active { animation: mimo-screen-in var(--mimo-slow) var(--mimo-ease-out) both; }
.section.active .bento-grid > * { opacity: 0; animation: mimo-waterfall 440ms var(--mimo-ease-out) both; }
.section.active .bento-grid > :nth-child(1) { animation-delay: 70ms; }
.section.active .bento-grid > :nth-child(2) { animation-delay: 115ms; }
.section.active .bento-grid > :nth-child(3) { animation-delay: 160ms; }
.section.active .bento-grid > :nth-child(4) { animation-delay: 205ms; }
.section.active .bento-grid > :nth-child(n+5) { animation-delay: 250ms; }

.home-layout { display: grid; gap: 12px; }
.hero {
  min-height: 398px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  border: 1px solid rgba(224,154,125,.24);
  border-radius: var(--mimo-radius-hero);
  background:
    radial-gradient(circle at 86% 8%, var(--mimo-terracotta-28), transparent 42%),
    radial-gradient(circle at 10% 100%, rgba(224,154,125,.12), transparent 48%),
    linear-gradient(145deg, var(--mimo-ivory-08), var(--mimo-ivory-04)),
    var(--mimo-ink-64);
  box-shadow: inset 0 1px 0 var(--mimo-ivory-12), var(--mimo-shadow-card);
  -webkit-backdrop-filter: blur(28px) saturate(155%);
  backdrop-filter: blur(28px) saturate(155%);
}
.hero::before {
  inset: 0;
  z-index: -1;
  opacity: 1;
  background: radial-gradient(300px circle at var(--glass-x,82%) var(--glass-y,4%), rgba(244,238,231,.14), transparent 60%);
  animation: none;
}
.hero::after { inset: 1px; border-radius: 35px; background: linear-gradient(180deg, transparent, rgba(9,8,7,.58)); }
.hero-copy { position: relative; z-index: 2; max-width: 78%; }
.eyebrow { margin-bottom: 14px; color: var(--mimo-clay); font: 600 10px/1 var(--mimo-font-data); letter-spacing: .16em; }
.eyebrow::after { background: linear-gradient(90deg,var(--mimo-terracotta),transparent); }
h1,.hero h1 { font: 650 clamp(44px, 13vw, 66px)/.9 var(--mimo-font-ui); letter-spacing: -.072em; text-transform: none; }
.lead { margin-top: 15px; color: var(--mimo-ivory-72); font-size: 17px; line-height: 1.28; font-weight: 500; letter-spacing: -.025em; }
.accent { color: var(--mimo-clay); }
.hero-character { width: 126px; right: 0; top: 122px; filter: drop-shadow(0 28px 35px rgba(0,0,0,.5)); }
.route-map { opacity: .34; filter: sepia(1) saturate(.6) hue-rotate(330deg); }
.hero-metrics { position: relative; z-index: 3; gap: 8px; }
.hero-metric { padding: 13px 14px; border: 1px solid var(--mimo-ivory-12); border-radius: 18px; background: rgba(9,8,7,.38); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.hero-metric small { color: var(--mimo-ivory-48); font-family: var(--mimo-font-data); font-size: 9px; }
.hero-metric b { color: var(--mimo-ivory); font-size: 22px; font-weight: 600; letter-spacing: -.04em; }

.bento-grid { gap: 10px; }
.card,.bento-card {
  margin-top: 10px;
  padding: 18px;
  border: 1px solid var(--mimo-ivory-12);
  border-radius: var(--mimo-radius-card);
  background: linear-gradient(145deg, var(--mimo-ivory-08), var(--mimo-ivory-04)), var(--mimo-ink-64);
  box-shadow: inset 0 1px 0 var(--mimo-ivory-12), 0 18px 54px rgba(0,0,0,.25);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
}
.card::before,.bento-card::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(240px circle at var(--glass-x,88%) var(--glass-y,0%),rgba(244,238,231,.12),transparent 58%); }
.card.strong,.bento-card.strong { border-color: var(--mimo-terracotta-28); background: radial-gradient(circle at 94% 0,var(--mimo-terracotta-18),transparent 42%),linear-gradient(145deg,var(--mimo-ivory-08),var(--mimo-ivory-04)),var(--mimo-ink-64); }
.card.blue,.bento-card.blue { border-color: var(--mimo-ivory-12); background: radial-gradient(circle at 94% 0,rgba(224,154,125,.10),transparent 44%),linear-gradient(145deg,var(--mimo-ivory-08),var(--mimo-ivory-04)),var(--mimo-ink-64); }
.card h3,.bento-card h3,.bento-card h2 { color: var(--mimo-ivory); font-family: var(--mimo-font-ui); font-weight: 600; letter-spacing: -.045em; }
.card h3,.bento-card h3 { font-size: 24px; line-height: 1.05; }
.bento-card h2 { font-size: 30px; line-height: 1.02; }
.card p,.bento-card p,.tariff-note { color: var(--mimo-ivory-72); font-size: 13px; line-height: 1.5; font-weight: 450; }
.section-title h2 { margin: 20px 4px 14px; color: var(--mimo-ivory); font: 600 34px/.94 var(--mimo-font-ui); letter-spacing: -.06em; text-transform: none; }

.station-card { min-height: 236px; display: flex; flex-direction: column; justify-content: center; }
.station-card .btn { margin-top: 10px; }
.station-strip { opacity: .52; }
.route,.rail-line { background: var(--mimo-ivory-08); box-shadow: inset 0 0 0 1px var(--mimo-ivory-08); }
.route i,.route span,.rail-fill { background: linear-gradient(90deg,var(--mimo-copper),var(--mimo-terracotta),var(--mimo-clay)); box-shadow: 0 0 28px var(--mimo-terracotta-28); }
.rail-fill::after { background: linear-gradient(90deg,transparent,rgba(244,238,231,.28),transparent); }
.train-head { filter: sepia(.5) saturate(.8) drop-shadow(0 8px 14px rgba(0,0,0,.5)); }

.big-num,.mini-stat .big-num,.mini-stat h3.stat-num,.countdown b,.balance-cell b,.ref-rule strong,.stat-line b { color: var(--mimo-ivory); font-family: var(--mimo-font-data); font-weight: 500; letter-spacing: -.06em; }
.price,.partner-earned { color: var(--mimo-clay); font-family: var(--mimo-font-data); }
.meta,.plan-row,.device-row,.operation-row,.rail-meta { color: var(--mimo-ivory-72); font-weight: 500; }
.plan-row,.device-row,.operation-row,.op-row,.legal-row,.location-pill { margin-top: 8px; }
.plan-row.majority { box-shadow: 0 10px 30px var(--mimo-terracotta-10); }
.plan-badge { color: var(--mimo-ink); background: var(--mimo-clay); }

.choices { gap: 8px; }
.device { min-height: 88px; padding: 13px; border-color: var(--mimo-ivory-12); border-radius: 20px; color: var(--mimo-ivory); background: var(--mimo-ivory-04); transition: transform 340ms var(--mimo-ease-spring),border-color var(--mimo-fast),background var(--mimo-fast); }
.device strong { font-family: var(--mimo-font-ui); font-size: 16px; font-weight: 550; }
.device.active { border-color: var(--mimo-terracotta-28); background: var(--mimo-terracotta-10); transform: scale(.98); }

.dashboard-row,.balance-duo,.ref-rule-card,.subscription-status-grid { gap: 8px; }
.countdown { gap: 6px; }
.countdown div,.balance-cell,.ref-rule,.subscription-status-cell { border-color: var(--mimo-ivory-08); border-radius: 17px; background: var(--mimo-ivory-04); }
.countdown b { color: var(--mimo-clay); font-size: 24px; }
.pass-status { color: var(--mimo-ink); background: var(--mimo-moss); }
.pass-link-pill,.config-link,.snippet-copy { border-color: var(--mimo-terracotta-28); color: var(--mimo-clay); background: var(--mimo-terracotta-10); }
.auto-renew-card,.ping-panel,.topup-select-field { border-color: var(--mimo-ivory-08); border-radius: 20px; background: var(--mimo-ivory-04); }
.ping-dot { background: var(--mimo-moss); box-shadow: 0 0 14px rgba(131,170,147,.46); }

.dock-wrap { bottom: calc(10px + env(safe-area-inset-bottom)); }
.dock {
  position: relative;
  gap: 3px;
  padding: 6px;
  border: 1px solid var(--mimo-ivory-12);
  border-radius: 24px;
  background: rgba(18,16,15,.76);
  box-shadow: inset 0 1px 0 var(--mimo-ivory-12), var(--mimo-shadow-float);
  -webkit-backdrop-filter: blur(32px) saturate(165%);
  backdrop-filter: blur(32px) saturate(165%);
}
.dock::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 6px;
  left: 6px;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: linear-gradient(145deg,var(--mimo-clay),var(--mimo-terracotta));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3),0 10px 24px var(--mimo-terracotta-18);
  transition: transform 480ms var(--mimo-ease-spring),width var(--mimo-medium) var(--mimo-ease-out);
}
body.screen-home .dock::before { transform: translateX(0); }
body.screen-subscription .dock::before { transform: translateX(55px); }
body.screen-balance .dock::before { transform: translateX(110px); }
body.screen-invite .dock::before { transform: translateX(165px); }
body.screen-support .dock::before { transform: translateX(220px); }
body.screen-admin .dock::before,body.screen-info .dock::before { opacity: 0; }
.dock-btn { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 18px; color: var(--mimo-stone); background: transparent; transition: color var(--mimo-fast),transform 360ms var(--mimo-ease-spring); }
.dock-btn.active { color: var(--mimo-ink); background: transparent; }
.dock-btn:active { transform: scale(.84); transition-duration: 80ms; }
.dock svg { width: 22px; height: 22px; }

.payment-modal,.news-gate { background: rgba(9,8,7,.72); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.payment-sheet,.news-card {
  border-color: var(--mimo-ivory-12);
  background: rgba(18,16,15,.9);
  box-shadow: var(--mimo-shadow-float),inset 0 1px 0 var(--mimo-ivory-18);
  -webkit-backdrop-filter: blur(40px) saturate(165%);
  backdrop-filter: blur(40px) saturate(165%);
}
.payment-modal.open .payment-sheet,.news-gate.open .news-card { animation: mimo-sheet-in 420ms var(--mimo-ease-out) both; }
.payment-method,.quick-amounts button { border-color: var(--mimo-ivory-12); color: var(--mimo-ivory); background: var(--mimo-ivory-04); }
.payment-method:not(.unavailable) { background: radial-gradient(circle at 90% 10%,var(--mimo-terracotta-18),transparent 38%),var(--mimo-ivory-04); }
.payment-method:not(.unavailable) .pm-icon { animation: none; }
.topup-card::before,.payment-sheet::before,.topup-submit.glow::before { animation: none; }

.toast { border-color: var(--mimo-ivory-12); border-radius: 18px; color: var(--mimo-ivory); background: rgba(18,16,15,.9); box-shadow: var(--mimo-shadow-float),inset 0 1px 0 var(--mimo-ivory-12); -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); }
.toast.show { animation: mimo-sheet-in var(--mimo-medium) var(--mimo-ease-out) both; }
.hint { color: var(--mimo-ivory-48); font-weight: 450; }
.hint::before { background: var(--mimo-moss); box-shadow: 0 0 16px rgba(131,170,147,.42); }
.inactive-sub-card { background: radial-gradient(circle at 90% 0,var(--mimo-terracotta-28),transparent 38%),linear-gradient(145deg,var(--mimo-ivory-08),var(--mimo-terracotta-10)); }
.partner-place,.stat-icon { color: var(--mimo-ink); background: linear-gradient(145deg,var(--mimo-clay),var(--mimo-terracotta)); }
.legal-content h3,.legal-content h4 { font-family: var(--mimo-font-ui); letter-spacing: -.035em; }
.legal-content p,.legal-content li { color: var(--mimo-ivory-72); font-weight: 450; }

@media (min-width: 720px) {
  .app { width: min(100%, 760px); }
  .hero { min-height: 430px; }
  .hero-character { width: 160px; top: 110px; right: 24px; }
}

@media (max-width: 520px) {
  .app { padding-inline: 12px; }
  .topbar { border-radius: 22px; }
  .hero { min-height: 382px; padding: 22px; border-radius: 32px; }
  .hero h1 { font-size: clamp(42px,12.6vw,56px); line-height: .91; letter-spacing: -.068em; }
  .hero .lead { max-width: 76%; font-size: 16px; }
  .hero-character { right: -6px !important; top: 150px !important; width: 106px !important; max-width: 30% !important; }
  .card,.bento-card { padding: 16px; border-radius: 24px; }
  .section-title h2 { font-size: 31px; }
  .dock { max-width: calc(100vw - 20px); gap: 2px; }
  .dock::before { width: 48px; height: 48px; }
  .dock-btn { width: 48px; min-width: 48px; height: 48px; }
  body.screen-subscription .dock::before { transform: translateX(50px); }
  body.screen-balance .dock::before { transform: translateX(100px); }
  body.screen-invite .dock::before { transform: translateX(150px); }
  body.screen-support .dock::before { transform: translateX(200px); }
}

@media (prefers-reduced-transparency: reduce) {
  .topbar,.dock,.card,.bento-card,.hero,.payment-sheet,.news-card { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: var(--mimo-night); }
}