/* Telegram surfaces and community artwork; navigation and forms keep their behavior. */
.brand-mark { width: 48px; height: 48px; border-radius: 16px; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; transform: none; }
.brand small { display: block; margin-top: 3px; font-size: 10px; font-weight: 500; color: var(--hint); letter-spacing: 0; }
.mini-brand { display: flex; align-items: center; gap: 10px; }
.mini-brand > img { border-radius: 13px; object-fit: contain; }
.mini-brand > span { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.mini-brand small { display: block; margin: 0; font-size: 9px; line-height: 1.2; }
.telegram-home { position: relative; min-height: 580px; padding: 54px; gap: 35px; overflow: hidden; isolation: isolate; border: 1px solid rgba(118,216,234,.16); border-radius: 38px; background: radial-gradient(ellipse at 95% 15%, #176573 0, transparent 52%), linear-gradient(125deg,#082d40,#093d49); color: #fff; box-shadow: 0 24px 64px rgba(6,53,68,.13); }
.telegram-home::before { position: absolute; content: ""; width: 530px; height: 530px; border-radius: 50%; border: 1px solid rgba(126,225,234,.1); right: -110px; top: -240px; pointer-events: none; z-index: -1; }
.telegram-home .home-copy { position: relative; z-index: 2; }
.home-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 5px 12px 5px 6px; border: 1px solid rgba(141,220,233,.2); background: rgba(124,227,238,.08); border-radius: 99px; font-size: 10px; font-weight: 750; letter-spacing: .09em; color: #b7edf5; }
.kicker-emoji { width: 30px; height: 30px; }
.telegram-home h1 { font-size: clamp(37px,4.5vw,65px); line-height: 1.08; margin: 26px 0 22px; letter-spacing: -.055em; }
.telegram-home h1 em { font-style: normal; color: #74dcef; }
.telegram-home .home-copy > p { color: #bbd4df; font-size: 16px; line-height: 1.7; }
.telegram-home .home-actions { gap: 10px; }
.telegram-home .home-actions .tg-button { padding: 0 16px; gap: 9px; border-radius: 17px; font-size: 13px; }
.telegram-home .home-actions .quiet { color: #e7f7fc; background: rgba(153,216,233,.12); border: 1px solid rgba(153,216,233,.2); }
.button-emoji { width: 28px; height: 28px; }
.telegram-home .home-links a { color: #a0dfed; font-size: 13px; }
.telegram-open { display: inline-flex; gap: 8px; align-items: center; }
.telegram-open svg { width: 19px; height: 19px; }
.home-art { position: relative; padding: 22px; width: 100%; max-width: 460px; justify-self: center; }
.community-logo { position: relative; width: 100%; height: auto; border-radius: 28px; border: 1px solid rgba(255,216,110,.35); box-shadow: 0 20px 55px rgba(0,0,0,.35); }
.logo-halo { position: absolute; inset: -8%; border-radius: 50%; background: radial-gradient(circle,rgba(57,191,222,.23),transparent 67%); pointer-events: none; }
.art-sticker { position: absolute; display: grid; place-items: center; width: 66px; height: 66px; border-radius: 22px; background: #e6f5fa; border: 3px solid rgba(255,255,255,.8); box-shadow: 0 10px 25px rgba(0,0,0,.17); }
.sticker-duck { top: 5px; right: -1px; }
.sticker-chat { left: -3px; bottom: 44px; }
.hero-sticker { width: 48px; height: 48px; }
.community-caption { position: absolute; bottom: 2px; right: 20px; display: flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 14px; background: #eefaff; color: #20566d; font-size: 11px; font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.caption-emoji { width: 23px; height: 23px; }
.home-art.pond-art { padding: 0; }
.interactive-pond { display: grid; place-items: center; position: relative; isolation: isolate; width: 100%; aspect-ratio: 1; padding: 0; border: 1px solid rgba(137,231,239,.2); border-radius: 50%; background: radial-gradient(ellipse at 50% 40%,#186d77,#063647 72%); cursor: pointer; touch-action: manipulation; overflow: hidden; -webkit-user-select: none; user-select: none; box-shadow: 0 18px 50px rgba(0,0,0,.2),inset 0 0 40px rgba(119,229,210,.08); }
.interactive-pond:focus-visible { outline: 3px solid #8be9f2; outline-offset: 5px; }
.pond-shore { position: absolute; inset: 9%; border: 14px solid rgba(106,187,130,.19); border-radius: 50%; box-shadow: 0 0 0 1px rgba(153,230,170,.12),inset 0 0 30px rgba(29,209,221,.18); }
.pond-water { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(ellipse at 45% 25%,rgba(44,183,213,.65),rgba(9,77,108,.5) 72%); }
.water-ring { position: absolute; width: 75%; height: 48%; top: 32%; border: 1px solid rgba(100,218,239,.45); border-radius: 50%; pointer-events: none; animation: pond-water-breathe 4s ease-in-out infinite; }
.ring-middle { width: 59%; height: 35%; top: 38%; animation-delay: -1.3s; }
.ring-inner { width: 42%; height: 23%; top: 44%; animation-delay: -2.6s; }
.duck-reflection { position: absolute; width: 30%; height: 10%; top: 66%; border-radius: 50%; background: rgba(255,212,45,.23); filter: blur(12px); }
.pond-duck { position: relative; width: 65%; height: auto; z-index: 2; pointer-events: none; filter: drop-shadow(0 15px 14px rgba(0,24,38,.2)); }
.pond-touch-hint { position: absolute; bottom: 9%; display: flex; align-items: center; gap: 6px; color: #caf4f5; font-size: 12px; font-weight: 650; pointer-events: none; }
.interactive-pond .ripple-click { border-color: #b2f7ff; box-shadow: 0 0 12px rgba(93,230,241,.5); }
@keyframes pond-water-breathe { 0%,100% { transform: scale(.95); opacity: .35; } 50% { transform: scale(1.04); opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .water-ring { animation: none; } }
.home-shortcuts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin: 24px 0 0; }
.home-shortcuts > a { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 20px 24px; border-radius: 24px; color: var(--text); text-decoration: none; background: var(--surface); border: 1px solid var(--separator); box-shadow: var(--shadow-soft); }
.shortcut-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 18px; flex: 0 0 auto; }
.home-shortcuts strong { display: block; font-size: 15px; }
.home-shortcuts small { display: block; color: var(--hint); font-size: 12px; margin-top: 5px; }
.home-shortcuts .chevron { margin-left: auto; flex: 0 0 auto; }
.page-title-emoji { width: 55px; height: 55px; vertical-align: middle; }
.account-home { background: var(--surface-soft); border: 1px solid var(--separator); border-radius: 30px; padding: 22px; }
.personal-badges, .action-list { box-shadow: var(--shadow-soft); }
.standalone-directory .pond-search { border: 1px solid var(--separator); box-shadow: var(--shadow-soft); }
.recovery-page { padding: 25px 40px 35px; border-radius: 32px; background: var(--surface); box-shadow: var(--shadow-soft); }
.tg-dock .dock-inner { border: 1px solid color-mix(in srgb,var(--surface) 85%,var(--cyan)); box-shadow: 0 10px 32px rgba(17,73,103,.14); }
.dock-item.active { background: color-mix(in srgb,var(--button) 12%,var(--surface)); border-radius: 20px; }
@media (max-width: 1050px) and (min-width: 761px) {
  .telegram-home { padding: 34px; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: 15px; }
}
@media (max-width: 760px) {
  .telegram-home { display: grid; grid-template-columns: minmax(0,1fr); padding: 24px 20px; gap: 18px; border-radius: 28px; min-height: 0; }
  .telegram-home .home-copy { order: 2; }
  .home-art { order: 1; width: 220px; max-width: 100%; padding: 12px; }
  .home-art.pond-art { width: 250px; }
  .pond-touch-hint { font-size: 10px; }
  .community-logo { border-radius: 22px; }
  .art-sticker { width: 44px; height: 44px; border-radius: 15px; border-width: 2px; }
  .hero-sticker { width: 33px; height: 33px; }
  .sticker-chat { bottom: 32px; }
  .community-caption { font-size: 9px; padding: 5px 9px; bottom: -2px; right: 6px; }
  .caption-emoji { width: 19px; height: 19px; }
  .telegram-home h1 { font-size: clamp(33px,9vw,46px); margin: 17px 0 14px; }
  .telegram-home .home-copy > p { font-size: 13px; margin-bottom: 0; }
  .home-kicker { font-size: 9px; }
  .kicker-emoji { width: 25px; height: 25px; }
  .telegram-home .home-actions { margin-top: 20px; }
  .telegram-home .home-actions .tg-button { min-height: 50px; }
  .telegram-home .home-links { margin-top: 18px; }
  .home-shortcuts { grid-template-columns: minmax(0,1fr); gap: 10px; margin-top: 14px; }
  .home-shortcuts > a { padding: 16px; gap: 13px; border-radius: 20px; }
  .home-shortcuts strong { font-size: 14px; }
  .shortcut-icon { width: 44px; height: 44px; border-radius: 15px; }
  .shortcut-icon .tg-emoji { width: 32px; height: 32px; }
  .account-home { padding: 8px; border-radius: 24px; }
  .recovery-page { padding: 20px 18px 28px; }
  .page-title-emoji { width: 39px; height: 39px; }
}

/* Duck-native panels: Telegram-like illustrated controls without decorative orbits. */
:root {
  --radius-xl: 34px;
  --radius-lg: 26px;
  --shadow-soft: 0 10px 28px rgba(15, 65, 86, .08);
  --shadow-float: 0 14px 36px rgba(11, 54, 72, .13);
}
.telegram-home {
  background: #083d4b;
  box-shadow: 0 16px 42px rgba(6, 53, 68, .14);
}
.telegram-home::before,
.logo-halo,
.pond-shore,
.pond-water,
.water-ring,
.duck-reflection,
.story-card::after,
.pond-card::before,
.preview-phone::before,
.preview-phone::after,
.auth-visual::before,
.liquid-hero::before,
.live-orbit::before {
  display: none;
}
.home-art {
  width: 100%;
  max-width: 430px;
  padding: 0;
}
.duck-device-card {
  width: 100%;
  padding: 16px;
  border: 1px solid rgba(184, 231, 240, .5);
  border-radius: 32px;
  background: #dff3f7;
  box-shadow: 0 18px 40px rgba(0, 24, 36, .24);
}
.duck-device-visual {
  min-height: 305px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 23px;
  background: #82c9da;
  contain: paint;
}
.home-scene-emoji { width: 285px; height: 285px; }
.duck-device-panel {
  min-height: 82px;
  margin-top: 12px;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(28, 94, 117, .1);
  border-radius: 19px;
  color: #123b4d;
  background: #fff;
}
.device-avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 14px;
  background: #e7f4f8;
  contain: paint;
}
.device-avatar-emoji { width: 45px; height: 45px; }
.device-copy { min-width: 0; flex: 1; display: grid; }
.device-copy strong { font-size: 13px; }
.device-copy small { margin-top: 3px; color: #63808c; font-size: 10px; }
.device-toggle {
  width: 48px;
  height: 28px;
  padding: 3px;
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
  border-radius: 15px;
  background: #42a8d8;
}
.device-toggle i {
  width: 22px;
  height: 22px;
  display: block;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 7px rgba(9, 57, 78, .22);
}
.home-shortcuts > a,
.story-card,
.pond-card,
.management-panel,
.builder-sheet,
.console-panel,
.command-card {
  box-shadow: var(--shadow-soft);
}
.story-card:hover,
.pond-card:hover { transform: none; }
.story-icon,
.action-icon,
.step-icon,
.admin-cell-icon,
.verified-orbit,
.stats-emoji,
.recovery-icon {
  border-radius: 17px;
}
.verified-orbit { background: color-mix(in srgb, var(--mint) 12%, var(--surface)); }
.preview-phone { background: #5ca8c1; }
.recovery-callout { background: #063544; }
.callout-orbit > span,
.live-orbit .sonar-ring,
.admin-orbit > span,
.error-orbit > span,
.auth-visual .sonar-ring { display: none; }
.auth-visual {
  padding: 46px;
  background: #dff3f7;
}
.login-scene-emoji { width: min(390px, 88%); height: min(390px, 88%); }
.auth-status {
  right: 34px;
  bottom: 34px;
  left: 34px;
  min-height: 64px;
  padding: 12px 15px;
  justify-content: space-between;
  border-color: rgba(25, 82, 103, .12);
  border-radius: 18px;
  color: #204c5c;
  background: #fff;
  backdrop-filter: none;
}
.auth-status strong { color: #168ebd; font-size: 10px; letter-spacing: .08em; }
.admin-orbit {
  height: 320px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 28px;
  background: #e4f4f7;
  contain: paint;
}
.admin-hero-emoji { width: 295px; height: 295px; }
.error-orbit {
  background: #dff3f7;
  border: 1px solid var(--separator);
}
.error-scene-emoji { width: 330px; height: 330px; }
.profile-scene-emoji { width: 135px; height: 135px; flex: 0 0 auto; }
.recovery-mascot { margin: 0 auto 16px; }
.loader-orbit {
  border-radius: 24px;
  background: color-mix(in srgb, var(--cyan) 10%, var(--surface));
  animation: none;
}
.home-mascot { border-radius: 24px; background: transparent; }

@media (max-width: 760px) {
  .telegram-home { padding: 18px; }
  .telegram-home .home-copy { order: 2; }
  .home-art { order: 1; width: min(100%, 310px); }
  .duck-device-card { padding: 11px; border-radius: 26px; }
  .duck-device-visual { min-height: 215px; border-radius: 19px; }
  .home-scene-emoji { width: 205px; height: 205px; }
  .duck-device-panel { min-height: 70px; margin-top: 9px; padding: 8px 10px; border-radius: 16px; }
  .device-avatar { width: 42px; height: 42px; border-radius: 12px; }
  .device-avatar-emoji { width: 39px; height: 39px; }
  .device-toggle { width: 43px; height: 25px; }
  .device-toggle i { width: 19px; height: 19px; }
  .auth-visual { min-height: 305px; padding: 22px; }
  .login-scene-emoji { width: 235px; height: 235px; }
  .auth-status { right: 14px; bottom: 14px; left: 14px; min-height: 54px; }
  .admin-orbit { right: 12px; bottom: 12px; width: 185px; height: 185px; border-radius: 22px; }
  .admin-hero-emoji { width: 180px; height: 180px; }
  .error-scene-emoji { width: 245px; height: 245px; }
  .profile-scene-emoji { width: 88px; height: 88px; }
}