/* Shared public design: landing page, website profile and Telegram Mini App.
   Loaded after each surface's layout stylesheet; never loaded by the admin panel. */
:root {
  --es-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --es-page: #05070a;
  --es-surface: #0c1118;
  --es-raised: #151a23;
  --es-glass: rgba(12, 17, 24, .9);
  --es-text: #f6f8fb;
  --es-muted: #a2abb7;
  --es-accent: #9b6cff;
  --es-accent-light: #c38bff;
  --es-primary: #8654db;
  --es-line: rgba(255, 255, 255, .13);
  --es-line-soft: rgba(255, 255, 255, .08);
  --es-line-accent: rgba(195, 139, 255, .32);
  --es-tint: rgba(155, 108, 255, .09);
  --es-shine: rgba(255, 255, 255, .04);
  --es-shadow: 0 16px 44px rgba(0, 0, 0, .24);
  --es-shadow-color: rgba(0, 0, 0, .24);
  --es-success: #7cdda7;
  --es-warning: #edc17e;
  --es-heat-0: #19202b;
  --es-heat-1: #302348;
  --es-heat-2: #573991;
  --es-heat-3: #8959db;
  --es-heat-4: #c38bff;
  --es-radius-card: 20px;
  --es-radius-hero: 28px;
  --es-radius-control: 12px;
  --es-radius-pill: 999px;
  --es-space-1: 8px;
  --es-space-2: 16px;
  --es-space-3: 24px;
  --es-space-4: 32px;
}

:root[data-theme="light"] {
  --es-page: #f4f5f8;
  --es-surface: #ffffff;
  --es-raised: #eef0f5;
  --es-glass: rgba(255, 255, 255, .92);
  --es-text: #202330;
  --es-muted: #626c7b;
  --es-accent: #7542cf;
  --es-accent-light: #8654db;
  --es-line: rgba(32, 35, 48, .14);
  --es-line-soft: rgba(32, 35, 48, .08);
  --es-line-accent: rgba(117, 66, 207, .3);
  --es-tint: rgba(117, 66, 207, .07);
  --es-shine: rgba(255, 255, 255, .6);
  --es-shadow: 0 12px 36px rgba(32, 35, 48, .06);
  --es-shadow-color: rgba(32, 35, 48, .06);
  --es-success: #217548;
  --es-warning: #8b5b12;
  --es-heat-0: #e9eaf0;
  --es-heat-1: #dac9f7;
  --es-heat-2: #b997ea;
  --es-heat-3: #9365d7;
  --es-heat-4: #7542cf;
}

:is(.landing-page, .account-page, .miniapp-page) {
  --page: var(--es-page);
  --bg: var(--es-page);
  --surface: var(--es-surface);
  --surface-strong: var(--es-raised);
  --surface-solid: var(--es-raised);
  --text: var(--es-text);
  --muted: var(--es-muted);
  --purple: var(--es-accent);
  --purple-light: var(--es-accent-light);
  --accent: var(--es-accent-light);
  --accent-light: var(--es-accent);
  --line: var(--es-line);
  --line-soft: var(--es-line-soft);
  --tint: var(--es-tint);
  --shine: var(--es-shine);
  --shadow: var(--es-shadow-color);
  --success: var(--es-success);
  --warning: var(--es-warning);
  --heat-0: var(--es-heat-0);
  --heat-1: var(--es-heat-1);
  --heat-2: var(--es-heat-2);
  --heat-3: var(--es-heat-3);
  --heat-4: var(--es-heat-4);
  background: var(--es-page);
  color: var(--es-text);
  font-family: var(--es-font);
  font-synthesis: none;
  line-height: 1.5;
}

:is(.landing-header, .account-header, .miniapp-page .app-header) {
  border: 1px solid var(--es-line);
  border-radius: var(--es-space-2);
  background: var(--es-glass);
  box-shadow: var(--es-shadow);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

:is(.landing-brand, .account-brand, .miniapp-page .wordmark) img {
  display: block;
  height: auto;
  filter: hue-rotate(-18deg) saturate(.55) brightness(1.9);
}
:root[data-theme="light"] .miniapp-page .wordmark img { filter: invert(1) hue-rotate(180deg); }

:is(.product-card, .account-hero, .miniapp-page .profile-card) {
  border: 1px solid var(--es-line-accent);
  border-radius: var(--es-radius-hero);
  background: var(--es-surface);
  box-shadow: var(--es-shadow), inset 0 1px var(--es-shine);
}
:is(.account-page .account-card, .miniapp-page .card) {
  border: 1px solid var(--es-line);
  border-radius: var(--es-radius-card);
  background: var(--es-surface);
  box-shadow: inset 0 1px var(--es-shine);
}
:is(.landing-page, .account-page, .miniapp-page) :is(h1, h2, h3) { font-family: var(--es-font); font-weight: 800; }
:is(.landing-page, .account-page, .miniapp-page) :is(button, input, select) { font-family: inherit; }
:is(.landing-page, .account-page, .miniapp-page) :is(a, button, summary):focus-visible { outline: 2px solid var(--es-accent-light); outline-offset: 4px; }
:is(.product-kicker, .account-kicker, .account-card header p, .miniapp-page .eyebrow) { color: var(--es-accent-light); font-size: 11px; font-weight: 700; letter-spacing: .4px; }

:is(.landing-page .primary-action, .landing-page .nav-action, .miniapp-page .primary, .account-page .panel-access-button) {
  border: 1px solid var(--es-primary);
  border-radius: var(--es-radius-pill);
  background: var(--es-primary);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 8px 24px var(--es-tint);
}
:is(.landing-page .secondary-action, .landing-page .tertiary-action, .miniapp-page .secondary) {
  border: 1px solid var(--es-line);
  border-radius: var(--es-radius-pill);
  background: var(--es-raised);
  color: var(--es-text);
  box-shadow: none;
}
@media (hover: hover) {
  :is(.landing-page .primary-action, .landing-page .nav-action, .miniapp-page .primary, .account-page .panel-access-button):hover { background: #7542cf; border-color: var(--es-accent-light); }
  :is(.miniapp-page .secondary, .miniapp-page .navigation-card, .account-page .account-card):hover { border-color: var(--es-line-accent); }
}

/* Website profile keeps its wider information grid and uses the same panels. */
.account-page .account-brand img { width: 132px; }
.account-page .account-hero { gap: var(--es-space-4); padding: var(--es-space-4); }
.account-page .account-avatar { border-radius: var(--es-radius-card); border-color: var(--es-line-accent); background: var(--es-tint); box-shadow: none; }
.account-page .account-identity h1 { color: var(--es-text); text-shadow: none; }
.account-page .account-metrics dd { color: var(--es-text); }
.account-page .account-card::before { display: none; }
.account-page .account-card:hover { transform: none; box-shadow: inset 0 1px var(--es-shine); }
.account-page .account-section-heading { padding-top: 48px; }
.account-page :is(.activity-layout, .achievement-list) { border-color: var(--es-line); border-radius: var(--es-radius-control); }
.account-page .activity-day.level-0 { background: var(--es-heat-0); }
.account-page :is(.activity-day, .activity-legend i).level-1 { background: var(--es-heat-1); }
.account-page :is(.activity-day, .activity-legend i).level-2 { background: var(--es-heat-2); }
.account-page :is(.activity-day, .activity-legend i).level-3 { background: var(--es-heat-3); }
.account-page :is(.activity-day, .activity-legend i).level-4 { background: var(--es-heat-4); }
.account-page .achievement-item { background: var(--es-surface); filter: none; }
.account-page .achievement-item.is-unlocked { background: var(--es-tint); }
.account-page .achievement-item::after { display: none; }
.account-page .achievement-item .achievement-badge { width: 64px; height: 72px; clip-path: none; border: 1px solid var(--es-line); border-radius: var(--es-radius-card); background: var(--es-raised); filter: none; }
.account-page .achievement-item.is-unlocked .achievement-badge { border-color: var(--es-line-accent); background: var(--es-tint); filter: none; }
.account-page .achievement-badge::before { display: none; }
.account-page .achievement-mark { border: 0; color: var(--es-muted); background: transparent; box-shadow: none; font-size: 17px; }
.account-page .achievement-item.is-unlocked .achievement-mark { color: var(--es-accent-light); }
.account-page .achievement-item .achievement-copy > span { color: var(--es-muted); }
.account-page .achievement-item.is-unlocked .achievement-copy > span { color: var(--es-accent-light); }

/* Compact Telegram layout: the same header, hero, panel and control hierarchy. */
.miniapp-page::before { display: none; }
.miniapp-page .app-shell { padding: calc(var(--es-space-2) + var(--safe-top)) var(--es-space-2) calc(104px + var(--safe-bottom)); }
.miniapp-page .app-header { min-height: 72px; gap: var(--es-space-2); margin-bottom: var(--es-space-3); padding: 10px 12px 10px 16px; }
.miniapp-page .wordmark > span { margin-top: 4px; color: var(--es-muted); font-size: 9px; letter-spacing: .4px; }
.miniapp-page .icon-button { width: 40px; height: 40px; border-color: var(--es-line); background: var(--es-raised); box-shadow: none; }
.miniapp-page :is(.profile-card, .card) { padding: var(--es-space-3); margin-bottom: var(--es-space-2); }
.miniapp-page .profile-card::after { width: 220px; height: 220px; right: -48px; bottom: -40px; border: 0; border-radius: 0; background: url('/static/landing-logo.webp') center / contain no-repeat; box-shadow: none; opacity: .06; }
:root[data-theme="light"] .miniapp-page .profile-card::after { display: none; }
.miniapp-page .avatar { border-radius: var(--es-radius-control); border-color: var(--es-line-accent); background: var(--es-tint); box-shadow: none; }
.miniapp-page .identity h1 { font-size: 28px; letter-spacing: -.6px; }
.miniapp-page .identity .eyebrow { color: var(--es-muted); font-size: 10px; letter-spacing: 0; }
.miniapp-page .balance-card { margin-top: var(--es-space-3); padding-top: var(--es-space-3); }
.miniapp-page .balance { font-size: clamp(48px, 13vw, 64px); letter-spacing: -2px; font-weight: 800; font-variant-numeric: tabular-nums; }
.miniapp-page .coin-orbit { width: 64px; height: 64px; border-color: var(--es-line-accent); background: var(--es-tint); box-shadow: none; transform: none; }
.miniapp-page .coin-mark { font-size: 32px; text-shadow: none; }
.miniapp-page .section-heading { gap: var(--es-space-2); margin-bottom: var(--es-space-2); }
.miniapp-page h2 { font-size: 18px; letter-spacing: -.2px; }
.miniapp-page .periods { border-color: var(--es-line); border-radius: var(--es-radius-control); background: var(--es-page); }
.miniapp-page .periods button[aria-pressed="true"] { border-color: var(--es-line-accent); color: var(--es-accent-light); background: var(--es-tint); box-shadow: none; }
.miniapp-page .metric-pair > div { padding: var(--es-space-2); border-color: var(--es-line-soft); border-radius: var(--es-radius-control); background: var(--es-raised); }
.miniapp-page .metric-pair strong { font-size: 34px; letter-spacing: -1px; font-weight: 800; font-variant-numeric: tabular-nums; }
.miniapp-page .bottom-nav { bottom: calc(12px + var(--safe-bottom)); border-radius: var(--es-radius-card); border-color: var(--es-line); background: var(--es-glass); box-shadow: var(--es-shadow); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.miniapp-page .nav-indicator { border-color: var(--es-line-accent); border-radius: var(--es-radius-control); background: var(--es-tint); box-shadow: none; }
.miniapp-page .bottom-nav button { min-height: 52px; border-radius: var(--es-radius-control); }
.miniapp-page :is(.achievement-icon, .collection-badge) { border-color: var(--es-line-accent); background: var(--es-tint); box-shadow: none; }
.miniapp-page .collection-badge[data-category] { width: 64px; height: 72px; border-radius: var(--es-radius-card); }
.miniapp-page .locked .collection-badge { color: var(--es-muted); border-color: var(--es-line); background: var(--es-raised); }
.miniapp-page progress::-webkit-progress-value { background: var(--es-accent); }
.miniapp-page progress::-moz-progress-bar { background: var(--es-accent); }
.miniapp-page .achievement-card { padding: var(--es-space-2); }
.miniapp-page .achievement-card h2 { font-size: 15px; }
.miniapp-page .tag-select { padding: 10px 8px; }
.miniapp-page .member-tag-card .section-heading { flex-wrap: wrap; }

@media (max-width: 760px) {
  .account-page .account-hero { padding: var(--es-space-3); }
  .account-page .account-header { flex-wrap: wrap; gap: var(--es-space-1); padding: 12px; }
  .account-page .account-actions { margin-left: auto; flex-wrap: wrap; gap: 4px; }
  .account-page .account-brand img { width: 112px; }
}
@media (max-width: 1024px) {
  .account-page .account-hero { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .miniapp-page .app-shell { padding-inline: 12px; }
  .miniapp-page :is(.profile-card, .card) { padding: var(--es-space-2); }
  .miniapp-page .achievement-card { padding: 12px; }
  .miniapp-page .identity h1 { font-size: 24px; }
}