html,
body,
#graph {
  width: 100%;
  height: 100%;
  margin: 0;
  background: radial-gradient(120% 100% at 50% 45%, #12082a 0%, #05030f 42%, #020208 100%);
}
:root {
  --controls-safe-zone-width: 460px;
  /* Тосты: выше модалок (~2000), ниже лавки/оплаты (~4500) */
  --dr-toast-z-stack: 12090;
  --dr-toast-z-float: 12100;
  --dr-toast-z-action: 12100;
  --dr-toast-z-achiev: 12095;
  --dr-toast-z-wait: 12150;
}
body {
  overflow: hidden;
}
#graph {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  isolation: isolate;
  /* Browser must NOT treat 1- or 2-finger drags as page scroll / pull-to-refresh —
     OrbitControls handles all touch input itself. */
  touch-action: none;
}
#graph canvas { touch-action: none; }

#neurolimb-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  border: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Краткая «вспышка» при любом переключении фона (космос ↔ Neurolimb). */
#dreamroad-bg-flash {
  position: fixed;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    100% 85% at 50% 40%,
    rgba(255, 252, 255, 0.62) 0%,
    rgba(210, 230, 255, 0.28) 42%,
    transparent 70%
  );
  will-change: opacity, transform;
}
#dreamroad-bg-flash.dreamroad-bg-flash--animate {
  animation: dreamroad-bg-flash-pulse 0.5s cubic-bezier(0.22, 0.82, 0.35, 1) forwards;
}
@keyframes dreamroad-bg-flash-pulse {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  20% {
    opacity: 1;
    transform: scale(1.02);
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}
@media (prefers-reduced-motion: reduce) {
  #dreamroad-bg-flash.dreamroad-bg-flash--animate {
    animation: none;
  }
}

/* Mobile-only on-screen 3D nav controls (hidden on desktop via display: none). */
.graph-mobile-controls {
  position: fixed;
  right: calc(12px + env(safe-area-inset-right, 0px));
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  z-index: 22;
  display: none;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.graph-mobile-controls .graph-ctl-btn {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(155, 89, 182, 0.55);
  background: rgba(16, 14, 28, 0.9);
  color: #f5ebff;
  font-size: 18px;
  font-family: Arial, sans-serif;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.55),
    inset 0 0 12px rgba(155, 89, 182, 0.18);
  transition: background 0.18s ease, transform 0.18s ease, opacity 0.22s ease;
  -webkit-tap-highlight-color: transparent;
}
.graph-mobile-controls .graph-ctl-btn:active {
  background: rgba(155, 89, 182, 0.34);
  transform: scale(0.94);
}
.graph-mobile-controls .graph-ctl-btn--cosmic-pause[aria-pressed="true"] {
  color: #b8c9dc;
  border-color: rgba(255, 200, 120, 0.35);
  background: rgba(36, 28, 22, 0.75);
}
@media (hover: hover) and (pointer: fine) {
  .graph-mobile-controls .graph-ctl-btn:hover {
    background: rgba(155, 89, 182, 0.34);
    border-color: rgba(224, 170, 255, 0.85);
  }
}
/* Dim and disable the cluster while orbiting — avoids stray taps on ⟳ (was full page reload). */
body.graph-interacting .graph-mobile-controls,
body.graph-mobile-controls-cooldown .graph-mobile-controls {
  opacity: 0.32;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
@media (max-width: 768px) {
  .graph-mobile-controls { display: flex; }
  /* When the bottom-sheet menu is open we don't need extra clutter. */
  body:has(.controls.open) .graph-mobile-controls { display: none; }
}
.hint {
  position: fixed;
  bottom: 14px;
  left: 14px;
  z-index: 10;
  color: #eaf5ff;
  background: linear-gradient(135deg, rgba(20, 20, 30, 0.72), rgba(26, 32, 54, 0.6));
  backdrop-filter: blur(14px);
  border: 1px solid rgba(145, 195, 255, 0.2);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.38);
  padding: 8px 10px;
  border-radius: 12px;
  font-family: Arial, sans-serif;
  font-size: 11px;
  max-width: min(430px, calc(100vw - 28px));
}
.hint-items {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.hint-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(185, 215, 255, 0.2);
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(10, 16, 30, 0.34);
  white-space: nowrap;
}
.toast-architect-limit {
  background: linear-gradient(135deg, rgba(20, 10, 30, 0.95), rgba(40, 20, 60, 0.95)) !important;
  border-left: 4px solid #b39ddb !important;
  border-right: 1px solid rgba(179, 157, 219, 0.3) !important;
  border-top: 1px solid rgba(179, 157, 219, 0.3) !important;
  border-bottom: 1px solid rgba(179, 157, 219, 0.3) !important;
  box-shadow: 0 0 20px rgba(138, 43, 226, 0.4) !important;
  color: #e0d4f5 !important;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.toast-architect-limit.toast-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.toast-architect-title {
  color: #d1c4e9;
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toast-architect-text {
  font-size: 0.95em;
  line-height: 1.4;
  color: #b3e5fc;
}
.hint.toast-onboarding-cue {
  max-width: min(580px, calc(100vw - 36px));
  padding: 22px 26px;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 600;
  text-align: center;
  border: 1px solid rgba(0, 255, 230, 0.38);
  box-shadow:
    0 0 0 1px rgba(0, 220, 255, 0.12) inset,
    0 14px 40px rgba(0, 0, 0, 0.5);
}
.hint.dreamroad-floating-toast {
  position: fixed;
  bottom: auto;
  left: auto;
  z-index: var(--dr-toast-z-float);
  max-width: min(380px, calc(100vw - 32px));
  pointer-events: auto;
}
.dreamroad-floating-toast--dock-tr {
  top: max(14px, env(safe-area-inset-top, 0px));
  right: max(14px, env(safe-area-inset-right, 0px));
  left: auto;
  bottom: auto;
}
.dreamroad-floating-toast--dock-center {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
}
.dreamroad-floating-toast--dock-mobile {
  top: max(12px, env(safe-area-inset-top, 0px));
  left: max(12px, env(safe-area-inset-left, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: auto;
  max-width: none;
  width: auto;
  display: block;
  pointer-events: auto;
}
.soft-mod-toast {
  position: fixed;
  z-index: var(--dr-toast-z-action);
  max-width: min(420px, calc(100vw - 32px));
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(18, 14, 28, 0.95), rgba(34, 22, 50, 0.95));
  color: #f3e7ff;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(180, 130, 240, 0.18) inset;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.32s ease, transform 0.32s ease;
  font-size: 14px;
  line-height: 1.45;
}
.soft-mod-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Ежедневный вход на ПК: по центру экрана */
.soft-mod-toast.soft-mod-toast--center-desktop {
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, calc(-50% + 12px)) scale(0.98);
}
.soft-mod-toast.soft-mod-toast--center-desktop.is-visible {
  transform: translate(-50%, -50%) scale(1);
}
.soft-mod-toast--cooldown {
  border-left: 3px solid #f4b400;
}
.soft-mod-toast--duplicate {
  border-left: 3px solid #6ec3ff;
}
.soft-mod-toast--low_quality {
  border-left: 3px solid #ff8a8a;
}
.soft-mod-toast__title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
}
.soft-mod-toast__text {
  font-size: 13px;
  color: rgba(230, 220, 248, 0.92);
}
.soft-mod-toast__timer {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ffe599;
}
.soft-mod-toast__action {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}
.soft-mod-toast__btn {
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(110, 195, 255, 0.18);
  border: 1px solid rgba(110, 195, 255, 0.55);
  color: #d8efff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease;
}
.soft-mod-toast__btn:hover {
  background: rgba(110, 195, 255, 0.32);
}
.soft-mod-toast__btn--secondary {
  background: rgba(12, 18, 32, 0.55);
  border: 1px solid rgba(160, 195, 255, 0.38);
}
.soft-mod-toast__btn--secondary:hover {
  background: rgba(24, 32, 48, 0.75);
}
.soft-mod-toast__btn--primary {
  background: rgba(155, 89, 182, 0.35);
  border-color: rgba(200, 140, 255, 0.65);
}
.soft-mod-toast__btn--primary:hover {
  background: rgba(155, 89, 182, 0.5);
}
.soft-mod-toast__action-row {
  flex-wrap: wrap;
}
.soft-mod-toast__close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: 0;
  color: rgba(220, 215, 240, 0.55);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.soft-mod-toast__close:hover {
  color: #fff;
}
@media (min-width: 769px) {
  .toast-architect-limit {
    width: min(680px, calc(100vw - 80px));
    max-width: 680px;
    padding: 16px 18px;
    border-radius: 14px;
    font-size: 16px;
  }
  .toast-architect-title {
    font-size: 1.25em;
    margin-bottom: 8px;
  }
  .toast-architect-text {
    font-size: 1.02em;
    line-height: 1.5;
  }
}
.cosmic-pause-btn {
  position: fixed;
  top: 12px;
  left: 12px;
  bottom: auto;
  right: auto;
  z-index: 11;
  font-family: Arial, sans-serif;
  font-size: 13px;
  color: #e8f4ff;
  background: rgba(20, 20, 30, 0.72);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(130, 190, 255, 0.28);
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.cosmic-pause-btn:hover {
  background: rgba(34, 44, 64, 0.85);
  border-color: rgba(120, 205, 255, 0.45);
}
.cosmic-pause-btn[aria-pressed="true"] {
  color: #b8c9dc;
  border-color: rgba(255, 200, 120, 0.35);
  background: rgba(36, 28, 22, 0.75);
}

.drp-hud-cluster {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  display: none;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  transform: translateX(0);
  opacity: 1;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.drp-hud-cluster > * {
  pointer-events: auto;
}
.drp-hud-cluster.drp-panel-shift {
  transform: translateX(calc(-1 * (min(420px, 36vw) + 18px)));
}
.drp-hud-cluster.drp-panel-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(18px) scale(0.98);
}
#drp-counter-container {
  position: static;
  top: auto;
  right: auto;
  background: rgba(15, 20, 30, 0.8);
  border: 1px solid rgba(155, 89, 182, 0.5);
  padding: 8px 15px;
  border-radius: 20px;
  color: #fff;
  font-family: Arial, sans-serif;
  font-weight: bold;
  box-shadow: 0 0 10px rgba(155, 89, 182, 0.3);
  display: flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(5px);
  opacity: 1;
  transition: box-shadow 0.28s ease, border-color 0.28s ease;
  cursor: pointer;
  flex-shrink: 0;
}
#drp-counter-container:focus-visible {
  outline: 2px solid rgba(200, 170, 255, 0.85);
  outline-offset: 3px;
}
#drp-counter-container.drp-gain-flash {
  border-color: #00ffaa;
  box-shadow: 0 0 20px rgba(0, 255, 170, 0.65);
  animation: drpGainPulse 0.7s ease;
}
#dashboard-daily-chain {
  position: static;
  top: auto;
  right: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 165, 80, 0.45);
  background: rgba(20, 14, 8, 0.78);
  color: #ffe6c9;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 0 12px rgba(255, 140, 60, 0.18);
  backdrop-filter: blur(5px);
  cursor: pointer;
  transition: opacity 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
  flex-shrink: 0;
}
#dashboard-daily-chain[hidden] {
  display: none !important;
}
#dashboard-daily-chain:hover {
  box-shadow: 0 0 20px rgba(255, 160, 80, 0.4);
  border-color: rgba(255, 200, 130, 0.7);
}
#dashboard-daily-chain.is-claimed {
  border-color: rgba(120, 220, 150, 0.55);
  background: rgba(8, 22, 14, 0.78);
  color: #d8ffe2;
  box-shadow: 0 0 14px rgba(80, 220, 140, 0.22);
}
#dashboard-daily-chain .daily-chain-emoji {
  font-size: 16px;
  line-height: 1;
}
#dashboard-daily-chain .daily-chain-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.15;
}
#dashboard-daily-chain .daily-chain-line {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
#dashboard-daily-chain .daily-chain-sub {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.8;
}
@media (max-width: 768px) {
  .drp-hud-cluster {
    top: 12px;
    right: 12px;
    gap: 10px;
  }
  #dashboard-daily-chain {
    padding: 5px 10px;
  }
  #dashboard-daily-chain .daily-chain-line {
    font-size: 11px;
  }
  #dashboard-daily-chain .daily-chain-sub {
    font-size: 9px;
  }
}
@keyframes drpGainPulse {
  0% {
    transform: scale(1);
    background: rgba(15, 20, 30, 0.8);
  }
  40% {
    transform: scale(1.06);
    background: rgba(0, 255, 170, 0.22);
  }
  100% {
    transform: scale(1);
    background: rgba(15, 20, 30, 0.8);
  }
}
#drp-toast-stack {
  position: fixed;
  top: max(14px, env(safe-area-inset-top, 0px));
  right: max(14px, env(safe-area-inset-right, 0px));
  left: auto;
  bottom: auto;
  transform: none;
  width: min(380px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  max-height: min(420px, 52vh);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  z-index: var(--dr-toast-z-stack);
  pointer-events: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
}
#drp-toast-stack .drp-toast {
  pointer-events: auto;
  flex-shrink: 0;
  font-family: Arial, sans-serif;
  color: #eaf5ff;
  background: linear-gradient(135deg, rgba(22, 22, 34, 0.94), rgba(28, 26, 46, 0.92));
  border: 1px solid rgba(145, 195, 255, 0.28);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.26s ease, transform 0.26s ease;
}
#drp-toast-stack .drp-toast.drp-toast--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
#drp-toast-stack .drp-toast.drp-toast--hiding {
  opacity: 0;
  transform: translateY(8px) scale(0.97);
}
#drp-toast-stack .drp-toast-row {
  font-weight: bold;
  font-size: 17px;
  letter-spacing: 0.02em;
}
#drp-toast-stack .drp-toast--income .drp-toast-row {
  color: #8dffbc;
}
#drp-toast-stack .drp-toast--expense .drp-toast-row {
  color: #ff9f9f;
}
#drp-toast-stack .drp-toast--exp {
  border-color: rgba(155, 89, 182, 0.42);
  background: linear-gradient(135deg, rgba(36, 22, 52, 0.94), rgba(28, 26, 46, 0.92));
}
#drp-toast-stack .drp-toast--exp .drp-toast-row {
  color: #e0aaff;
}
#drp-toast-stack .drp-toast--nexus {
  border-color: rgba(110, 183, 255, 0.42);
  box-shadow: 0 10px 30px rgba(65, 120, 220, 0.28);
}
#drp-toast-stack .drp-toast--nexus .drp-toast-row {
  color: #a5dcff;
}
#drp-toast-stack .drp-toast-reason {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: #b8c8dc;
  overflow-wrap: anywhere;
  word-break: break-word;
}
#drp-toast-stack .drp-toast-reason--bonus {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.4;
  color: #9eb6cf;
}
#drp-toast-stack .drp-toast--notice {
  border-color: rgba(145, 195, 255, 0.35);
}
#drp-toast-stack .drp-toast--notice-success {
  border-color: rgba(95, 210, 140, 0.55);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(80, 200, 130, 0.2);
}
#drp-toast-stack .drp-toast-row--notice {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: #eaf5ff;
  overflow-wrap: anywhere;
  word-break: break-word;
}
#drp-toast-stack .drp-toast--notice-success .drp-toast-row--notice {
  color: #e4ffef;
}
@media (min-width: 769px) {
  #drp-toast-stack {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    align-items: center;
  }
}
.controls {
  position: fixed;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  z-index: 12;
  width: min(420px, calc(var(--controls-safe-zone-width) - 32px));
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: rgba(20, 20, 30, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  padding: 20px;
  box-sizing: border-box;
  color: #f8fbff;
  font-family: Arial, sans-serif;
}
.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 100% at 50% 45%, #12082a 0%, #05030f 42%, #020208 100%);
  font-family: Arial, sans-serif;
}
.auth-card {
  width: min(460px, calc(100vw - 32px));
  border-radius: 16px;
  padding: 24px;
  background: rgba(20, 20, 30, 0.75);
  border: 1px solid rgba(130, 190, 255, 0.28);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
  color: #eaf5ff;
  text-align: center;
}
.auth-card h2 {
  margin: 0 0 8px;
}
.auth-card p {
  margin: 0 0 14px;
  color: rgba(220, 234, 248, 0.85);
}
.auth-method-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 14px;
}
.auth-tab {
  flex: 1;
  max-width: 200px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid rgba(180, 220, 255, 0.22);
  background: rgba(10, 16, 28, 0.52);
  color: #eaf5ff;
  font-size: 13px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.auth-tab--active {
  border-color: rgba(155, 89, 182, 0.65);
  background: rgba(155, 89, 182, 0.22);
  color: #f8f0ff;
}
.auth-panel {
  margin-top: 4px;
}
.auth-local-lead {
  font-size: 13px !important;
  margin-bottom: 12px !important;
  color: rgba(220, 234, 248, 0.82) !important;
}
.auth-local-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  max-width: 320px;
  margin: 0 auto;
}
.auth-local-input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(180, 220, 255, 0.18);
  background: rgba(10, 16, 28, 0.52);
  color: #eff7ff;
  padding: 10px;
  box-sizing: border-box;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.auth-local-input:focus {
  border-color: rgba(130, 190, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(130, 190, 255, 0.2);
}
.auth-local-nick-status {
  min-height: 1.35em;
  margin: -2px 0 10px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(180, 210, 240, 0.62);
  text-align: left;
}
.auth-local-nick-status--ok {
  color: rgba(120, 235, 185, 0.88);
}
.auth-local-nick-status--taken {
  color: rgba(255, 195, 130, 0.9);
}
.auth-local-nick-status--warn {
  color: rgba(255, 190, 160, 0.88);
}
.auth-local-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}
.auth-local-actions button {
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  font-size: 13px;
  border: 1px solid rgba(46, 204, 113, 0.45);
  background: rgba(46, 204, 113, 0.22);
  color: #eafbf1;
}
.auth-local-actions #btn-local-register {
  border-color: rgba(155, 89, 182, 0.55);
  background: rgba(155, 89, 182, 0.22);
  color: #f5ebff;
}
.auth-local-hub-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.auth-local-hub-actions button {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  border: 1px solid rgba(46, 204, 113, 0.45);
  background: rgba(46, 204, 113, 0.22);
  color: #eafbf1;
}
#btn-show-local-register {
  border-color: rgba(155, 89, 182, 0.55);
  background: rgba(155, 89, 182, 0.22);
  color: #f5ebff;
}
.auth-local-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  border: none;
  background: none;
  color: rgba(180, 210, 255, 0.85);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}
.auth-local-back:hover {
  color: #eaf5ff;
}
.auth-local-subview-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: bold;
  color: #eaf5ff;
  text-align: left;
}
.auth-local-submit {
  width: 100%;
  margin-top: 4px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  border: 1px solid rgba(155, 89, 182, 0.55);
  background: rgba(155, 89, 182, 0.28);
  color: #f5ebff;
}
.auth-local-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
#register-smartcaptcha {
  min-height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-captcha-missing {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 190, 160, 0.88);
  text-align: center;
}
.auth-panel-message {
  min-height: 1.35em;
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #c8d8ec;
}
.auth-panel-message:empty {
  display: none;
}
.auth-panel-message.auth-panel-message--error {
  display: block;
  color: #ffb4b4;
}
.auth-panel-message.auth-panel-message--success {
  display: block;
  color: #8dffbc;
}
.auth-card .auth-telegram-vpn-hint {
  margin: 12px auto 14px;
  max-width: 340px;
  padding: 10px 16px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(196, 222, 252, 0.9);
  text-align: center;
  letter-spacing: 0.02em;
  border-radius: 12px;
  background: linear-gradient(
    145deg,
    rgba(14, 22, 42, 0.42) 0%,
    rgba(8, 12, 28, 0.38) 100%
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(130, 190, 255, 0.22);
  box-shadow:
    0 0 0 1px rgba(120, 220, 255, 0.07) inset,
    0 6px 24px rgba(0, 0, 0, 0.28);
}
.auth-widget-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.auth-telegram-deep-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 12px 20px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid rgba(0, 200, 255, 0.45);
  background: linear-gradient(135deg, rgba(0, 180, 220, 0.35), rgba(155, 89, 182, 0.35));
  color: #eaf5ff;
  font-size: 15px;
  font-weight: 600;
  font-family: Arial, sans-serif;
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.25);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.auth-telegram-deep-login:hover:not(:disabled) {
  border-color: rgba(180, 220, 255, 0.75);
  box-shadow: 0 0 26px rgba(155, 89, 182, 0.45);
}
.auth-telegram-deep-login:disabled {
  opacity: 0.55;
  cursor: wait;
}
.auth-telegram-deep-hint {
  margin: 0;
  max-width: 340px;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(200, 218, 240, 0.82);
  text-align: center;
}
.controls-toolbar--actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}
.controls-toolbar--triple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.controls-toolbar--single {
  grid-template-columns: 1fr;
}
.controls-toolbar__btn {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.controls-toolbar__btn--accent {
  border-color: #9b59b6;
  background: rgba(155, 89, 182, 0.22);
}
.controls-toolbar__btn--danger {
  border: 1px solid rgba(255, 95, 95, 0.72);
  background: linear-gradient(135deg, rgba(140, 26, 26, 0.88), rgba(95, 14, 14, 0.9));
  color: #ffe7e7;
  box-shadow: 0 0 0 rgba(255, 90, 90, 0);
}
@media (hover: hover) and (pointer: fine) {
  .controls-toolbar__btn--danger:hover {
    border-color: rgba(255, 120, 120, 0.95);
    background: linear-gradient(135deg, rgba(176, 35, 35, 0.92), rgba(117, 18, 18, 0.94)) !important;
    box-shadow: 0 0 18px rgba(255, 90, 90, 0.35);
  }
}
.btn-primary-action {
  background: linear-gradient(135deg, #9b59b6, #8e44ad) !important;
  color: white !important;
  font-weight: bold;
  border: 2px solid #e0aaff !important;
  box-shadow: 0 0 15px rgba(155, 89, 182, 0.6);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease,
    transform 0.3s ease;
}
.btn-primary-action:hover,
.btn-primary-action:active {
  box-shadow: 0 0 25px rgba(155, 89, 182, 0.9);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary-action:hover,
  .btn-primary-action:active {
    transform: scale(1.05);
  }
}
.controls-options {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(46, 204, 113, 0.2);
  background: rgba(8, 20, 22, 0.42);
  box-sizing: border-box;
}
.controls-options .switch {
  width: 100%;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.35;
  color: #a8e6cf;
  text-shadow: 0 0 8px rgba(46, 204, 113, 0.25);
}
.controls-options .switch input {
  margin-top: 2px;
  flex-shrink: 0;
}
.swipe-wrapper {
  display: block;
}
.menu-page {
  display: contents;
}
.menu-page-scroll {
  display: contents;
}
.swipe-indicators {
  display: none;
}
.controls h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
}
#mobile-menu-container {
  display: contents;
}
.android-lite .hint,
.android-lite .controls,
.android-lite .panel,
.android-lite .modal-card,
.android-lite .profile-shell,
.android-lite #drp-counter-container,
.android-lite #dream-visualize-input,
.android-lite #loc-visualize-input,
.android-lite #ea-visualize-input,
.android-lite #dream-visualize-container,
.android-lite #loc-visualize-container,
.android-lite #ea-visualize-container,
.android-lite #mobile-menu-container,
.perf-lite .hint,
.perf-lite .controls,
.perf-lite .panel,
.perf-lite .modal-card,
.perf-lite .profile-shell,
.perf-lite #drp-counter-container,
.perf-lite #dream-visualize-input,
.perf-lite #loc-visualize-input,
.perf-lite #ea-visualize-input,
.perf-lite #dream-visualize-container,
.perf-lite #loc-visualize-container,
.perf-lite #ea-visualize-container,
.perf-lite #mobile-menu-container {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.perf-lite .controls.open {
  background: rgb(14, 16, 26) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.perf-lite #mobile-menu-container {
  background: rgb(12, 14, 22) !important;
}
.perf-lite .soft-mod-toast {
  background: rgb(20, 16, 32) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.perf-lite .panel,
.perf-lite #dream-panel.panel,
.android-lite .panel,
.android-lite #dream-panel.panel {
  background: rgb(14, 16, 26) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.perf-lite #drp-toast-stack .drp-toast,
.perf-lite #drp-toast-stack .drp-toast--exp,
.perf-lite #drp-toast-stack .drp-toast--nexus,
.perf-lite #drp-toast-stack .drp-toast--income,
.perf-lite #drp-toast-stack .drp-toast--expense {
  background: rgb(24, 24, 36) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.perf-lite #drp-toast-stack .drp-toast--exp {
  background: rgb(34, 22, 48) !important;
}
.perf-lite #drp-toast-stack .drp-toast--nexus {
  background: rgb(20, 28, 44) !important;
}
.perf-lite .achiev-toast,
.perf-lite .dreamroad-floating-toast,
.perf-lite .toast-architect-limit {
  background: rgb(20, 20, 32) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.perf-lite .toast-architect-limit {
  background: rgb(28, 16, 42) !important;
}
#dreamroad-modal-scrim {
  position: fixed;
  inset: 0;
  background: rgb(10, 8, 18);
  pointer-events: auto;
}
#dreamroad-modal-scrim[hidden] {
  display: none !important;
}
.modal-stack-buried {
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Main-screen decor only — do not list selectors inside modal shells (lavka, profile, …). */
body.ui-anim-paused .dream-reward-cooldown-pill--ready {
  animation-play-state: paused !important;
}
.controls input[type="text"],
.controls input[type="date"],
.controls textarea,
.controls select#dreamAtmosphere {
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(180, 220, 255, 0.18);
  background: rgba(10, 16, 28, 0.52);
  color: #eff7ff;
  padding: 10px;
  box-sizing: border-box;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.controls textarea {
  min-height: 96px;
  resize: vertical;
}
.dream-input-wrap {
  position: relative;
}
#dream-input-desc {
  width: 100%;
  box-sizing: border-box;
}
.dream-input-meta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  margin-top: 6px;
  width: 100%;
}
.dream-input-hint {
  margin: 0;
  width: 100%;
  font-size: 12px;
  line-height: 1.45;
}
.dream-input-hint-pass-link {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 600;
  color: #c9a8ff;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  vertical-align: baseline;
}
.dream-input-hint-pass-link:hover,
.dream-input-hint-pass-link:focus-visible {
  color: #e8d4ff;
}
/*
 * Счётчик символов «плавает» в правом верхнем углу textarea,
 * чтобы оставаться видимым, когда Android/iOS клавиатура поднимается
 * и закрывает нижнюю часть формы. Полупрозрачная капсула не мешает
 * содержимому: при больших объёмах текст уходит под пилюлю, но
 * пользователь видит и ввод, и счётчик одновременно.
 */
.dream-input-count {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 4;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #cfdcec;
  background: rgba(8, 12, 28, 0.66);
  border: 1px solid rgba(120, 160, 220, 0.32);
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  white-space: nowrap;
  pointer-events: none;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.dream-input-count.dream-input-count--save {
  color: #ffe08a;
  border-color: rgba(255, 224, 138, 0.55);
  background: rgba(28, 22, 8, 0.72);
}
.dream-input-count.dream-input-count--reward {
  color: #8dffbc;
  border-color: rgba(141, 255, 188, 0.55);
  background: rgba(8, 24, 18, 0.7);
}
.dream-input-count--max {
  display: none;
  position: static;
  width: 100%;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255, 140, 140, 0.92);
  background: transparent;
  border: none;
  padding: 0;
  pointer-events: none;
}
.dream-input-count--max:not(:empty) {
  display: block;
}
/* На очень узких textarea счётчик уходит чуть выше, чтобы не наезжать на текст */
@media (max-width: 480px) {
  .dream-input-count {
    top: 4px;
    right: 6px;
    font-size: 10.5px;
  }
}
/*
 * «Pill» с обратным отсчётом до следующей наградной возможности.
 * Появляется под кнопкой «Добавить сон» после успешного сохранения
 * наградного сна. Glass-effect: тёмный полупрозрачный фон, мягкий
 * golden glow, без блокирующих оверлеев.
 */
.dream-reward-cooldown-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  margin: 8px auto 0;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(247, 215, 123, 0.92);
  background: linear-gradient(
    135deg,
    rgba(20, 14, 36, 0.72),
    rgba(40, 24, 64, 0.62)
  );
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 196, 86, 0.4);
  border-radius: 999px;
  box-shadow:
    0 0 14px rgba(255, 196, 86, 0.18),
    inset 0 0 8px rgba(255, 196, 86, 0.08);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.45s ease, transform 0.45s ease, filter 0.45s ease;
  max-width: 100%;
}
.dream-reward-cooldown-pill:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
}
.dream-reward-cooldown-pill .dream-reward-cooldown-pill__time {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #fff3c2;
}
.dream-reward-cooldown-pill--ready {
  color: rgba(141, 255, 188, 0.95);
  border-color: rgba(141, 255, 188, 0.5);
  box-shadow:
    0 0 16px rgba(141, 255, 188, 0.28),
    inset 0 0 10px rgba(141, 255, 188, 0.1);
  animation: dreamRewardCooldownReadyGlow 2.4s ease-in-out infinite;
}
.dream-reward-cooldown-pill--fading {
  opacity: 0;
  transform: translateY(-4px);
}
@keyframes dreamRewardCooldownReadyGlow {
  0%, 100% {
    box-shadow:
      0 0 14px rgba(141, 255, 188, 0.22),
      inset 0 0 8px rgba(141, 255, 188, 0.08);
  }
  50% {
    box-shadow:
      0 0 22px rgba(141, 255, 188, 0.38),
      inset 0 0 12px rgba(141, 255, 188, 0.16);
  }
}
.dream-length-meter {
  height: 5px;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.dream-length-meter-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(100, 160, 255, 0.55),
    rgba(155, 89, 182, 0.92)
  );
  transition: width 0.12s ease-out, background 0.22s ease;
}
.dream-length-meter.dream-length-meter--complete .dream-length-meter-fill {
  background: linear-gradient(90deg, rgba(46, 178, 120, 0.95), #8dffbc);
}
.controls #dream-input {
  padding-right: 54px;
}
.controls #record-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
  transition: color 0.2s ease, text-shadow 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .controls #record-btn:hover {
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  }
}
.controls #record-btn.recording {
  color: #fff !important;
  background: rgba(220, 53, 69, 0.7) !important;
  border-radius: 50%;
  animation: pulseRecord 1.5s infinite;
}
.controls #record-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}
@keyframes pulseRecord {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.45);
  }
  50% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
  }
}
.controls input[type="date"] {
  color-scheme: dark;
}
.dream-date-wrap {
  display: grid;
  align-items: stretch;
  position: relative;
  width: 100%;
  min-height: 42px;
  border-radius: 8px;
  border: 1px solid rgba(180, 220, 255, 0.18);
  background: rgba(10, 16, 28, 0.52);
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.dream-date-wrap:focus-within {
  border-color: rgba(100, 200, 255, 0.55);
  box-shadow: 0 0 0 2px rgba(100, 200, 255, 0.18);
}
.dream-date-wrap > .dream-date-display,
.dream-date-wrap > input[type="date"] {
  grid-area: 1 / 1;
  width: 100%;
  min-width: 0;
}
.dream-date-wrap input[type="date"] {
  display: block;
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.35;
  outline: none;
  color: transparent;
  caret-color: transparent;
  cursor: pointer;
  box-shadow: none;
  min-height: 42px;
  height: 42px;
}
.dream-date-wrap input[type="date"]:focus {
  border: none;
  box-shadow: none;
}
/* Touch: tap on the field opens the picker; hide the tiny native icon. */
@media (pointer: coarse) {
  .dream-date-wrap input[type="date"] {
    appearance: none;
    -webkit-appearance: none;
  }
}
.dream-date-wrap input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  appearance: none;
  -webkit-appearance: none;
}
.dream-date-wrap input[type="date"]::-moz-calendar-picker-indicator {
  display: none;
}
/* Desktop: stretch invisible picker hit-area; keep explicit input height (Windows). */
@media (pointer: fine) {
  .dream-date-wrap input[type="date"] {
    -webkit-appearance: auto;
    appearance: auto;
  }
  .dream-date-wrap input[type="date"]::-webkit-calendar-picker-indicator {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
  }
  .dream-date-wrap input[type="date"]::-moz-calendar-picker-indicator {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }
}
.dream-date-display {
  display: flex;
  align-items: center;
  align-self: center;
  z-index: 0;
  padding: 0 10px;
  box-sizing: border-box;
  color: rgba(239, 247, 255, 0.92);
  font-size: 13px;
  line-height: 1.35;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.25s ease;
}
.dream-date-display.dream-date-display--other {
  color: rgba(220, 234, 248, 0.82);
  font-style: normal;
}
.dream-input-ph {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 52px;
  z-index: 2;
  color: rgba(220, 234, 248, 0.7);
  font-size: inherit;
  line-height: 1.45;
  pointer-events: none;
  white-space: pre-wrap;
  opacity: 1;
  transition: opacity 0.45s ease;
}
.dream-input-ph.dream-input-ph--hidden,
.dream-input-wrap:focus-within .dream-input-ph {
  opacity: 0;
}
.dream-input-ph.dream-input-ph--fade-out {
  opacity: 0;
}
.controls input[type="text"]::placeholder,
.controls textarea::placeholder {
  color: rgba(220, 234, 248, 0.7);
}
.controls input[type="text"]:focus,
.controls input[type="date"]:focus,
.controls textarea:focus,
.controls select:focus {
  border-color: rgba(100, 200, 255, 0.55);
  box-shadow: 0 0 0 2px rgba(100, 200, 255, 0.18);
}
.controls .dream-date-wrap input[type="date"]:focus {
  border: none;
  border-color: transparent;
  box-shadow: none;
}
.controls select#dreamAtmosphere {
  margin-top: 0;
  padding: 10px 12px;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(180, 220, 255, 0.65) 50%),
    linear-gradient(135deg, rgba(180, 220, 255, 0.65) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 12px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  backdrop-filter: blur(12px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.controls select#dreamAtmosphere:disabled {
  opacity: 0.65;
  cursor: wait;
}
.controls .row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.controls button {
  border: 1px solid rgba(130, 190, 255, 0.3);
  background: rgba(22, 30, 48, 0.7);
  color: #ebf4ff;
  border-radius: 8px;
  padding: 9px 11px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.analyze-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(130, 190, 255, 0.24);
  background: rgba(10, 16, 28, 0.5);
}
.analyze-form #analyze-btn {
  border-radius: 8px;
}
.controls button:hover {
  background: rgba(34, 48, 73, 0.8);
  border-color: rgba(120, 205, 255, 0.65);
}
.controls .dream-input-hint-pass-link {
  display: inline;
  margin: 0;
  padding: 0;
  min-height: 0;
  height: auto;
  width: auto;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 11px;
  font-weight: 600;
  line-height: inherit;
  letter-spacing: 0;
  color: #c9a8ff;
  text-decoration: underline;
  text-underline-offset: 2px;
  vertical-align: baseline;
  white-space: nowrap;
}
.controls .dream-input-hint-pass-link:hover,
.controls .dream-input-hint-pass-link:focus-visible {
  background: none;
  border: none;
  color: #e8d4ff;
}
.controls button:disabled {
  opacity: 0.65;
  cursor: wait;
}
.switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #dce9f8;
}
.project-social-links-mount--auth {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(130, 190, 255, 0.15);
}
.project-social-links-mount--menu {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(155, 89, 182, 0.14);
}
.project-social-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.project-social-links__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: rgba(220, 234, 248, 0.52);
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.project-social-links__item:hover,
.project-social-links__item:focus-visible {
  color: rgba(235, 244, 255, 0.95);
  background: rgba(130, 190, 255, 0.1);
  transform: translateY(-1px);
  outline: none;
}
.project-social-links__item svg {
  display: block;
  width: 18px;
  height: 18px;
}
.settings-support-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(155, 89, 182, 0.18);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 8px;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(220, 234, 248, 0.7);
  text-align: center;
}
.settings-support-footer__title {
  flex-basis: 100%;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(220, 234, 248, 0.55);
}
.settings-support-footer__link {
  color: #9bffcf;
  text-decoration: none;
  word-break: break-all;
}
.settings-support-footer__link:hover,
.settings-support-footer__link:focus-visible {
  text-decoration: underline;
}
.settings-support-footer__sep {
  color: rgba(220, 234, 248, 0.35);
}
.profile-faq-support-link {
  color: #9bffcf;
  text-decoration: none;
  font-weight: 600;
  word-break: break-all;
}
.profile-faq-support-link:hover,
.profile-faq-support-link:focus-visible {
  text-decoration: underline;
}
.dream-text-original p {
  margin: 0;
  line-height: 1.55;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.dream-continuation-box {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(155, 89, 182, 0.45);
  background: rgba(155, 89, 182, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.dream-continuation-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #d8b8ff;
  margin-bottom: 8px;
  font-weight: 600;
}
.dream-continuation-body {
  color: #e0aaff;
  font-style: italic;
  line-height: 1.55;
  font-size: 13px;
}
.panel {
  position: fixed;
  right: 16px;
  top: 16px;
  width: min(420px, 36vw);
  height: calc(100% - 32px);
  overflow-y: auto;
  background: rgba(20, 20, 30, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  color: #f3f8ff;
  font-family: Arial, sans-serif;
  padding: 18px 16px;
  box-sizing: border-box;
  display: none;
  z-index: 11;
  opacity: 0;
  transform: translateX(26px);
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.panel.panel-open {
  opacity: 1;
  transform: translateX(0);
}
.mobile-fab,
.mobile-close-btn {
  display: none;
}
@media (max-width: 980px) {
  :root {
    --controls-safe-zone-width: 380px;
  }
}
@media (min-width: 769px) {
  .controls h3 {
    text-align: center;
  }
  .menu-page--create #dreamTitle {
    margin-top: 4px;
  }
  .menu-page--create .dream-date-wrap {
    margin-top: 8px;
    margin-bottom: 8px;
  }
  .menu-page--create #dream-location {
    margin-top: 2px;
    margin-bottom: 8px;
  }
  .menu-page--create #dreamAtmosphere {
    margin-top: 2px;
    margin-bottom: 10px;
  }
  .menu-page--create .dream-input-wrap {
    margin-top: 2px;
  }
  .controls-toolbar__btn {
    text-align: center;
  }
  .menu-primary-action-row {
    margin-top: 6px;
  }
  .menu-primary-action-row .controls-toolbar__btn {
    width: 100%;
  }
  .controls-options {
    margin-top: 14px;
  }
  .menu-page--network {
    gap: 12px;
  }
  .menu-page--network .controls-options {
    margin-top: 10px;
    margin-bottom: 2px;
  }
  .menu-page--network .controls-toolbar--actions {
    margin-top: 6px;
  }
  .menu-page--network .menu-page-network-spacer {
    flex: 1 1 auto;
    min-height: 0;
  }
  .menu-page--network .project-social-links-mount--menu {
    margin-top: 8px;
    padding-top: 6px;
  }
  .menu-page--network .settings-support-footer {
    margin-top: 8px;
  }
  .controls-options .switch {
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .controls-options .switch input {
    margin-top: 0;
  }
  .controls-options .warning-text {
    text-align: center;
  }
}
@media (max-width: 768px) {
  html {
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  /* --- ИСПРАВЛЕНИЕ ВЕРХНЕЙ ПАНЕЛИ --- */
  .hint {
    display: none;
  }
  .hint-items {
    gap: 4px;
  }
  .hint-item {
    padding: 2px 6px;
    font-size: 10px;
  }
  /* Пауза космоса — иконка в колонке справа у графа, не в левом верхнем углу */
  #cosmic-pause-btn {
    display: none !important;
  }
  #drp-counter-container {
    z-index: 31;
  }
  .drp-hud-cluster {
    transform: translateX(0) !important;
  }
  .drp-hud-cluster.drp-panel-hidden {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
  }
  /* Тосты: полная ширина между safe-area (без translate — иначе уезжают влево) */
  #drp-toast-stack {
    top: calc(52px + env(safe-area-inset-top, 0px));
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: auto;
    width: auto;
    max-width: none;
    transform: none;
    max-height: min(38vh, 300px);
    box-sizing: border-box;
  }
  .hint.dreamroad-floating-toast,
  .dreamroad-floating-toast {
    display: block !important;
  }
  .dreamroad-floating-toast--dock-mobile,
  .dreamroad-floating-toast--dock-center,
  .hint.toast-architect-limit,
  .hint.toast-onboarding-cue {
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    width: auto;
    max-width: none;
    box-sizing: border-box;
  }
  .dreamroad-floating-toast--dock-center,
  .hint.toast-architect-limit.toast-visible,
  .hint.toast-architect-limit {
    transform: none;
  }
  .soft-mod-toast {
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    top: max(12px, env(safe-area-inset-top, 0px));
    width: auto;
    max-width: none;
    box-sizing: border-box;
  }

  /* --- ЛОГИКА FAB КНОПКИ --- */
  .mobile-fab {
    display: flex;
    position: fixed;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: min(300px, calc(100% - 28px));
    max-width: calc(100vw - 28px);
    max-width: calc(100dvw - 28px);
    padding: 14px 20px;
    border-radius: 30px;
    background: rgba(22, 30, 48, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(130, 190, 255, 0.4);
    color: #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
    font-size: 15px;
    font-weight: bold;
    justify-content: center;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .mobile-fab.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 20px);
  }

  #mobile-menu-container {
    position: relative;
    width: 100%;
    /* По контенту: иначе swipe-wrapper тянет .menu-page на всю высоту → лишний скролл. */
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: rgb(12, 14, 22);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 12px;
    padding: 10px 8px 4px 8px;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* --- СКРЫВАЕМАЯ ШТОРКА CONTROLS --- */
  .controls {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(120%);
    width: 100%;
    /* iOS Safari: классический vh «выше» экрана; dvh следует за видимой областью */
    max-height: min(88vh, calc(100vh - env(safe-area-inset-top, 0px) - 24px));
    max-height: min(88dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 24px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 18px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    border-radius: 24px 24px 0 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.8);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .controls.open {
    transform: translateY(0);
    background: rgb(14, 16, 26);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* .spotlight-active задаёт position:relative — на шторке это ломает bottom sheet */
  #dream-form.controls.spotlight-active,
  #dream-form.controls.spotlight-active.onboarding-spotlight-host {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    transform: translateY(120%);
  }
  #dream-form.controls.open.spotlight-active,
  #dream-form.controls.open.spotlight-active.onboarding-spotlight-host {
    transform: translateY(0) !important;
  }
  body.onboarding-active #onboarding-field-hint.architect-dialog--dock:not([hidden]) {
    bottom: auto !important;
    top: calc(10px + env(safe-area-inset-top, 0px));
    transform: translateX(-50%);
    max-height: min(32vh, 260px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    z-index: 2110 !important;
  }
  /* Шаг 1 на mobile: подсказка по центру видимой области + «Продолжить» (не под клавиатурой) */
  body.onboarding-step1-mobile-hint-mode #onboarding-field-hint.architect-dialog--dock:not([hidden]) {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(340px, calc(100vw - 28px));
    max-height: min(44vh, 300px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 2125 !important;
    transform: translate(-50%, -50%) !important;
    box-shadow:
      0 0 0 1px rgba(0, 255, 255, 0.12) inset,
      0 20px 50px rgba(0, 0, 0, 0.65);
  }
  body.onboarding-step1-mobile-hint-mode.onboarding-step1-mobile-hint #onboarding-backdrop.onboarding-overlay--visible {
    opacity: 0.82;
    pointer-events: auto;
  }
  /* Шаг онбординга журнала на смартфоне: не перекрываем вкладки модалки сверху */
  body.onboarding-active.onboarding-diary-hints-front #onboarding-field-hint.architect-dialog--dock:not([hidden]) {
    top: 44%;
    bottom: auto !important;
    transform: translate(-50%, -50%);
    max-height: min(40vh, 320px);
  }
  .controls h3 {
    text-align: center;
    padding: 0 40px;
    box-sizing: border-box;
    flex: 0 0 auto;
  }
  .swipe-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    flex: 0 1 auto;
    align-items: flex-start;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    width: 100%;
    height: auto;
    /* pan-x ломал вертикальный скролл внутри .menu-page в Safari */
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    gap: 0;
  }
  .swipe-wrapper::-webkit-scrollbar {
    display: none;
  }
  .menu-page {
    min-width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 0;
    align-self: stretch;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 10px;
    padding: 2px 6px;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }
  /* Страница «Создать»: без вертикального скролла — высота по контенту, не stretch в swipe-row */
  .menu-page.menu-page--create {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 auto;
    align-self: flex-start;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: hidden;
  }
  .menu-page-scroll {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .menu-page--create .menu-page-scroll {
    flex: 0 0 auto;
    gap: 6px;
    overflow-x: hidden;
    overflow-y: hidden;
  }
  .menu-page--network {
    align-self: stretch;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  .menu-page--create .menu-page-scroll > :not(.dream-input-wrap):not(#dream-input-desc) {
    flex: 0 0 auto;
  }
  .menu-page--create #dream-input-desc,
  .menu-page--create .dream-input-meta,
  .menu-page--create .dream-input-hint {
    position: static;
    flex: 0 0 auto;
    flex-shrink: 0;
  }
  /*
   * iOS Safari: flex + absolute внутри wrap схлопывает высоту textarea (~2 строки),
   * из‑за чего счётчик и микрофон оказываются друг под другом в правом верхнем углу.
   * Grid: одна ячейка, textarea растягивается, оверлеи через align-self.
   */
  .menu-page--create .dream-input-wrap {
    position: relative;
    display: grid;
    grid-template-rows: 76px;
    grid-template-columns: 1fr;
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
  }
  .menu-page--create .dream-input-wrap > #dream-input,
  .menu-page--create .dream-input-wrap > .dream-input-count,
  .menu-page--create .dream-input-wrap > #record-btn {
    grid-row: 1;
    grid-column: 1;
  }
  .menu-page--create .menu-primary-action-row {
    flex: none;
    margin-top: 0;
    padding-top: 4px;
  }
  .menu-page--create .dream-input-wrap #dream-input {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 6px 44px 34px 8px;
    overflow-y: auto;
    resize: none;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
  }
  .menu-page--create .dream-input-wrap .dream-input-count {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    justify-self: end;
    align-self: start;
    margin: 6px 8px 0 0;
    z-index: 3;
  }
  .menu-page--create .dream-input-wrap #record-btn {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    justify-self: end;
    align-self: end;
    margin: 0 6px 6px 0;
    z-index: 4;
  }
  .menu-page--create .dream-input-meta {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-top: 2px;
  }
  .menu-page--create .dream-input-hint {
    font-size: 9.5px;
    line-height: 1.3;
    overflow: visible;
  }
  .menu-page--create .dream-length-meter {
    margin-top: 2px;
    height: 4px;
  }
  .menu-page--create .menu-primary-action-row .controls-toolbar__btn {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .menu-page--create #dreamAtmosphere {
    margin-top: 0;
    margin-bottom: 2px;
  }
  /* Клавиатура: сжатие через flex-цепочку, скролл только в textarea */
  @media (max-width: 768px) and (max-height: 520px) {
    #mobile-menu-container,
    .swipe-wrapper {
      flex: 1 1 auto;
      min-height: 0;
    }
    .swipe-wrapper {
      align-items: stretch;
    }
    .menu-page.menu-page--create {
      flex: 1 1 auto;
      align-self: stretch;
      min-height: 0;
      overflow: hidden;
    }
    .menu-page--create .menu-page-scroll {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
    }
    .menu-page--create .dream-input-wrap {
      flex: 0 1 auto;
      grid-template-rows: minmax(64px, 1fr);
    }
  }
  .menu-page--network {
    justify-content: flex-start;
  }
  .menu-page--network .menu-page-network-spacer {
    flex: 1 1 auto;
    min-height: 0;
  }
  .swipe-indicators {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    flex: 0 0 auto;
  }
  .dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: background 0.3s;
  }
  .dot.active {
    background: #9b59b6;
    transform: scale(1.2);
  }

  .controls-toolbar--actions {
    gap: 10px;
  }
  .controls input[type="text"],
  .controls input[type="date"],
  .controls textarea,
  .controls select#dreamAtmosphere {
    font-size: 16px;
  }
  .controls-toolbar__btn {
    font-size: 16px;
    padding: 12px 10px;
    white-space: normal;
    line-height: 1.2;
  }
  .controls-toolbar--triple {
    grid-template-columns: 1fr;
  }
  .controls-options {
    margin-top: 12px;
  }
  .controls-options .switch span {
    /* 13 reads better on 320–360px screens; previous 12 was too small */
    font-size: 13px;
    line-height: 1.35;
  }
  /* Микрофон: grid-оверлей в .dream-input-wrap (create) */
  .menu-page--create .dream-input-wrap #record-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    font-size: 20px;
    border: none;
    background: transparent;
    border-radius: 50%;
  }

  .mobile-close-btn {
    display: flex;
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 2;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    /* Apple HIG: 44×44 touch target */
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
  }

  /* Панель деталей сна/локации: перекрывающая нижняя шторка */
  .panel {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    max-height: 55vh; /* Чуть выше, чтобы удобно читать текст */
    background: rgb(14, 16, 26) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 24px 24px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.95);
    z-index: 30; /* Гарантированно поверх .controls */
    transform: translateY(28px);
  }
  .panel.panel-open {
    transform: translateY(0);
  }

  /* Панель сна/локации: выше шторка, чтобы длинный текст и кнопки помещались */
  #dream-panel.panel {
    max-height: min(90dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 18px));
    background: rgb(14, 16, 26) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Модалка карты (Leaflet): адаптация под узкий экран */
  #map-container {
    width: 95%;
    height: 80%;
  }
  .lavka-shop-layout {
    flex-direction: column;
  }
  .lavka-categories {
    flex: 0 0 auto;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-right: 0;
    padding-bottom: 12px;
  }
  .archive-actions {
    flex-direction: column;
  }
  #archive-search {
    width: 100%;
  }
}
.panel h2 {
  margin: 0 0 8px;
  font-size: 18px;
}
.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.panel-close-btn {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #f5fbff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.panel-close-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}
.panel p {
  margin: 8px 0;
  line-height: 1.4;
}
.panel ul {
  margin: 6px 0 0 18px;
  padding: 0;
}
.panel li {
  margin: 4px 0;
}
.muted {
  color: #9db4c9;
  font-size: 12px;
}
.panel-delete-btn {
  width: 100%;
  margin-top: 14px;
  border: 1px solid rgba(255, 100, 100, 0.5);
  border-radius: 10px;
  background: rgba(120, 25, 25, 0.45);
  color: #ffecec;
  padding: 10px;
  cursor: pointer;
  font-size: 13px;
}
.panel-delete-btn:hover {
  background: rgba(155, 30, 30, 0.55);
}
#profile-modal,
#friend-profile-modal,
#lavka-modal,
#dream-diary-modal,
#payment-success-modal,
#level-up-modal,
#daily-visit-info-modal,
#viz-limits-info-modal,
#avatar-preview-modal,
#admin-grant-modal,
#sync-network-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  padding:
    calc(12px + env(safe-area-inset-top, 0px))
    calc(12px + env(safe-area-inset-right, 0px))
    calc(12px + env(safe-area-inset-bottom, 0px))
    calc(12px + env(safe-area-inset-left, 0px));
  /* 0.88 was relying on backdrop-filter blur — but Android Chrome
     often skips the blur, so the modal looked translucent. 0.95
     keeps a hint of the graph behind without leaking content. */
  background: rgba(16, 14, 28, 0.95);
  border: none;
  box-shadow: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 0;
  color: #f3f8ff;
  font-family: Arial, sans-serif;
}
@media (min-width: 769px) {
  #profile-modal,
  #friend-profile-modal,
  #lavka-modal,
  #dream-diary-modal,
  #payment-success-modal,
  #level-up-modal,
  #daily-visit-info-modal,
#viz-limits-info-modal,
  #admin-grant-modal,
  #sync-network-modal {
    top: 5%;
    right: 5%;
    bottom: 5%;
    left: 5%;
    padding: 20px;
    border: 1px solid rgba(155, 89, 182, 0.35);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    border-radius: 16px;
  }
}
/* Browsers with no backdrop-filter (older Android Chrome) — bump opacity
   even higher so two modals can never bleed through each other. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #profile-modal,
  #friend-profile-modal,
  #lavka-modal,
  #dream-diary-modal,
  #payment-success-modal,
  #level-up-modal,
  #daily-visit-info-modal,
#viz-limits-info-modal,
  #admin-grant-modal,
  #sync-network-modal {
    background: rgba(16, 14, 28, 0.98);
  }
  #friend-profile-modal {
    background: rgba(10, 22, 32, 0.98);
  }
}
/* Mobile: blur is expensive on weaker GPUs and Android Chrome often
   renders it inconsistently. Drop it entirely and keep a near-opaque
   background so the underlying graph never bleeds into the modal. */
@media (max-width: 768px) {
  #profile-modal,
  #friend-profile-modal,
  #lavka-modal,
  #dream-diary-modal,
  #payment-success-modal,
  #level-up-modal,
  #daily-visit-info-modal,
#viz-limits-info-modal,
  #admin-grant-modal,
  #sync-network-modal,
  #map-modal.is-open {
    background: rgb(16, 14, 28);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  #friend-profile-modal,
  #friend-profile-modal.modal-stack-top {
    background: rgb(10, 22, 32) !important;
  }
  #mood-edit-modal.modal-show,
  #mood-edit-modal.modal-stack-top,
  #mood-edit-modal.modal-show.modal-visible {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    padding:
      calc(16px + env(safe-area-inset-top, 0px))
      calc(14px + env(safe-area-inset-right, 0px))
      calc(16px + env(safe-area-inset-bottom, 0px))
      calc(14px + env(safe-area-inset-left, 0px));
    background: rgb(16, 14, 28) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #achiev-modal.achiev-modal--open {
    align-items: stretch;
    justify-content: flex-start;
    padding:
      calc(16px + env(safe-area-inset-top, 0px))
      calc(12px + env(safe-area-inset-right, 0px))
      calc(16px + env(safe-area-inset-bottom, 0px))
      calc(12px + env(safe-area-inset-left, 0px));
  }
  #map-modal.is-open,
  #map-modal.is-open.modal-stack-top {
    background: rgb(8, 6, 14) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .modal-stack-top#profile-modal,
  .modal-stack-top#friend-profile-modal,
  .modal-stack-top#lavka-modal,
  .modal-stack-top#dream-diary-modal,
  .modal-stack-top#payment-success-modal,
  .modal-stack-top#level-up-modal,
  .modal-stack-top#daily-visit-info-modal,
  .modal-stack-top#viz-limits-info-modal,
  .modal-stack-top#avatar-preview-modal,
  .modal-stack-top#admin-grant-modal,
  .modal-stack-top#sync-network-modal {
    background: rgb(16, 14, 28) !important;
  }
  /* Меню сновидений / тосты: без blur — плотный фон, граф не просвечивает */
  .controls.open {
    background: rgb(14, 16, 26) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #mobile-menu-container {
    background: rgb(12, 14, 22) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .mobile-fab {
    background: rgb(22, 30, 48) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #drp-toast-stack .drp-toast,
  #drp-toast-stack .drp-toast--income,
  #drp-toast-stack .drp-toast--expense {
    background: rgb(24, 24, 36) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #drp-toast-stack .drp-toast--exp {
    background: rgb(34, 22, 48) !important;
    background-image: none !important;
  }
  #drp-toast-stack .drp-toast--nexus {
    background: rgb(20, 28, 44) !important;
    background-image: none !important;
  }
  .soft-mod-toast {
    background: rgb(20, 16, 32) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .achiev-toast {
    background: rgb(36, 22, 52) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .dr-ai-wait-toast {
    background: rgb(18, 22, 38) !important;
    background-image: none !important;
  }
  .dreamroad-floating-toast,
  .hint.dreamroad-floating-toast {
    display: block !important;
    background: rgb(20, 20, 32) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .hint.toast-architect-limit {
    background: rgb(28, 16, 42) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .hint.toast-onboarding-cue {
    background: rgb(14, 20, 32) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #achiev-modal.achiev-modal--open .achiev-modal__panel {
    max-width: none;
    width: 100%;
    min-height: min(100%, 100dvh);
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  #map-modal #map-container {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    border-radius: 0;
    border: none;
  }
}
#friend-profile-modal {
  background: rgba(10, 22, 32, 0.95);
  border: 1px solid rgba(0, 220, 170, 0.42);
  box-shadow: 0 22px 52px rgba(0, 40, 36, 0.55), 0 0 0 1px rgba(0, 255, 200, 0.06) inset;
}
#profile-modal.modal-show,
#friend-profile-modal.modal-show,
#lavka-modal.modal-show,
#dream-diary-modal.modal-show,
#payment-success-modal.modal-show,
#level-up-modal.modal-show,
#daily-visit-info-modal.modal-show,
#viz-limits-info-modal.modal-show,
#avatar-preview-modal.modal-show,
#admin-grant-modal.modal-show,
#sync-network-modal.modal-show {
  display: flex;
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 0.34s ease, transform 0.34s ease;
  pointer-events: none;
}
#profile-modal.modal-show.modal-visible,
#friend-profile-modal.modal-show.modal-visible,
#lavka-modal.modal-show.modal-visible,
#dream-diary-modal.modal-show.modal-visible,
#payment-success-modal.modal-show.modal-visible,
#level-up-modal.modal-show.modal-visible,
#daily-visit-info-modal.modal-show.modal-visible,
#viz-limits-info-modal.modal-show.modal-visible,
#avatar-preview-modal.modal-show.modal-visible,
#admin-grant-modal.modal-show.modal-visible,
#sync-network-modal.modal-show.modal-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* Смартфоны: inset:0 без width:100%+left% — иначе модалка уезжает вправо */
@media (max-width: 768px) {
  #profile-modal,
  #friend-profile-modal,
  #lavka-modal,
  #dream-diary-modal,
  #payment-success-modal,
  #level-up-modal,
  #daily-visit-info-modal,
#viz-limits-info-modal,
  #admin-grant-modal,
  #sync-network-modal,
  #profile-modal.modal-show,
  #friend-profile-modal.modal-show,
  #lavka-modal.modal-show,
  #dream-diary-modal.modal-show,
  #payment-success-modal.modal-show,
  #level-up-modal.modal-show,
  #daily-visit-info-modal.modal-show,
#viz-limits-info-modal.modal-show,
  #admin-grant-modal.modal-show,
  #sync-network-modal.modal-show,
  #profile-modal.modal-show.modal-visible,
  #friend-profile-modal.modal-show.modal-visible,
  #lavka-modal.modal-show.modal-visible,
  #dream-diary-modal.modal-show.modal-visible,
  #payment-success-modal.modal-show.modal-visible,
  #level-up-modal.modal-show.modal-visible,
  #daily-visit-info-modal.modal-show.modal-visible,
#viz-limits-info-modal.modal-show.modal-visible,
  #admin-grant-modal.modal-show.modal-visible,
  #sync-network-modal.modal-show.modal-visible {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    transform: none;
  }
  #profile-modal.modal-show,
  #friend-profile-modal.modal-show,
  #lavka-modal.modal-show,
  #dream-diary-modal.modal-show,
  #payment-success-modal.modal-show,
  #level-up-modal.modal-show,
  #daily-visit-info-modal.modal-show,
#viz-limits-info-modal.modal-show,
  #admin-grant-modal.modal-show,
  #sync-network-modal.modal-show {
    transform: translateY(12px);
  }
  #profile-modal.modal-show.modal-visible,
  #friend-profile-modal.modal-show.modal-visible,
  #lavka-modal.modal-show.modal-visible,
  #dream-diary-modal.modal-show.modal-visible,
  #payment-success-modal.modal-show.modal-visible,
  #level-up-modal.modal-show.modal-visible,
  #daily-visit-info-modal.modal-show.modal-visible,
#viz-limits-info-modal.modal-show.modal-visible,
  #admin-grant-modal.modal-show.modal-visible,
  #sync-network-modal.modal-show.modal-visible {
    transform: none !important;
  }
}
#lavka-modal {
  flex-direction: column;
}
#payment-success-modal,
#level-up-modal,
#daily-visit-info-modal,
#viz-limits-info-modal,
#avatar-preview-modal,
#admin-grant-modal {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 2100;
  border-color: rgba(190, 140, 255, 0.5);
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(140, 220, 255, 0.12) inset,
    0 0 80px rgba(120, 80, 180, 0.22);
}
@media (max-width: 768px) {
  #payment-success-modal,
  #level-up-modal,
  #daily-visit-info-modal,
#viz-limits-info-modal,
  #admin-grant-modal {
    box-shadow: none !important;
    border: none !important;
  }
}
.payment-success-modal__shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 440px;
  width: 100%;
}
.payment-success-modal__kicker {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(220, 235, 255, 0.78);
  text-shadow: 0 0 18px rgba(160, 210, 255, 0.45);
}
#success-package-img {
  width: min(240px, 52vw);
  height: min(240px, 52vw);
  object-fit: contain;
  border-radius: 18px;
  filter: drop-shadow(0 0 22px rgba(180, 140, 255, 0.55)) drop-shadow(0 0 48px rgba(100, 200, 255, 0.28));
}
#success-package-img.is-hidden {
  display: none !important;
}
#success-reward-text {
  margin: 4px 0 0;
  font-size: clamp(30px, 7vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.03em;
  color: #f7fbff;
  text-shadow:
    0 0 20px rgba(130, 235, 255, 0.85),
    0 0 40px rgba(200, 160, 255, 0.45),
    0 2px 10px rgba(0, 0, 0, 0.95);
}
.payment-success-modal__thanks {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(210, 228, 245, 0.92);
  max-width: 34em;
}
#level-up-modal .level-up-modal__rank {
  display: inline-block;
  margin: 0 1px;
  padding: 2px 10px 3px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #f4ecff;
  background: linear-gradient(
    135deg,
    rgba(140, 90, 200, 0.55) 0%,
    rgba(50, 110, 180, 0.42) 100%
  );
  border: 1px solid rgba(210, 170, 255, 0.45);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 22px rgba(160, 120, 255, 0.35);
}
.payment-success-modal__btn {
  margin-top: 8px;
  padding: 14px 36px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #0a1620;
  background: linear-gradient(
    165deg,
    rgba(190, 255, 230, 1) 0%,
    rgba(110, 235, 185, 1) 42%,
    rgba(55, 190, 145, 1) 100%
  );
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35) inset,
    0 6px 22px rgba(0, 70, 55, 0.45),
    0 0 36px rgba(100, 255, 200, 0.35);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.payment-success-modal__btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.45) inset,
    0 10px 28px rgba(0, 70, 55, 0.5),
    0 0 48px rgba(120, 255, 210, 0.42);
}
#sync-network-modal {
  flex-direction: column;
}
#sync-network-modal .sync-network-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-left: 4px;
  padding-right: 4px;
}
#sync-network-modal .sync-network-modal-body p {
  margin: 8px 0;
  line-height: 1.4;
}
/* Сеть / синхронизация: строки списка друзей и заявок */
#friends-list-container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  margin: 0 auto;
}
.sync-friends-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}
/* Выше по файлу у `.panel ul` задан margin-left: 18px — убираем смещение списка синхронизации */
.panel ul.sync-friends-list {
  margin: 10px 0 0;
}
.sync-peer-item {
  margin: 0 0 7px;
  border: 1px solid rgba(130, 190, 255, 0.22);
  background: rgba(22, 30, 48, 0.52);
  border-radius: 8px;
  padding: 5px 7px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.sync-peer-stack {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
/* На широком экране селект и «Удалить» визуально в одном ряду с кнопкой ника */
.sync-peer-controls-row {
  display: contents;
}
.sync-peer-profile-btn {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
  text-align: left;
  background: rgba(8, 52, 56, 0.45);
  border: 1px solid rgba(0, 255, 170, 0.28);
  border-radius: 8px;
  padding: 5px 8px;
  cursor: pointer;
  color: #e8f4ff;
  font-family: Arial, sans-serif;
  overflow: visible;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.sync-peer-profile-btn:hover {
  background: rgba(14, 72, 68, 0.72);
  border-color: rgba(0, 255, 200, 0.48);
  box-shadow: 0 0 0 1px rgba(0, 255, 200, 0.12), 0 4px 14px rgba(0, 40, 36, 0.35);
}
.sync-peer-profile-btn:focus-visible {
  outline: 2px solid rgba(0, 255, 200, 0.45);
  outline-offset: 2px;
}
.sync-peer-profile-btn strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  min-width: 0;
  overflow: visible;
}
.sync-peer-profile-btn .sync-peer-name-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sync-peer-profile-btn .sync-peer-sub {
  display: block;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 9px;
  line-height: 1.05;
  color: #9db4c9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sync-peer-select {
  flex: 0 0 auto;
  width: 9.25rem;
  min-width: 5rem;
  align-self: center;
  background: rgba(0, 0, 0, 0.58);
  color: #a8e6cf;
  border: 1px solid rgba(46, 204, 113, 0.38);
  border-radius: 6px;
  font-size: 11px;
  padding: 4px 5px;
  cursor: pointer;
  outline: none;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease,
    color 0.18s ease;
}
.sync-peer-select:hover {
  background: rgba(24, 42, 52, 0.92);
  border-color: rgba(46, 204, 113, 0.62);
  color: #c8f5df;
  box-shadow: 0 0 0 1px rgba(46, 204, 113, 0.18), 0 4px 14px rgba(0, 0, 0, 0.25);
}
.sync-peer-select:focus {
  border-color: rgba(120, 220, 170, 0.65);
}
.sync-peer-remove {
  flex: 0 0 auto;
  align-self: center;
  padding: 5px 8px;
  background: rgba(120, 28, 28, 0.45);
  border: 1px solid rgba(231, 76, 60, 0.62);
  color: #ffd5cf;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  font-family: Arial, sans-serif;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease,
    box-shadow 0.18s ease;
}
.sync-peer-remove:hover {
  background: rgba(160, 42, 42, 0.72);
  border-color: rgba(255, 130, 110, 0.78);
  color: #fff8f6;
  box-shadow: 0 0 0 1px rgba(255, 120, 100, 0.2), 0 4px 12px rgba(40, 0, 0, 0.35);
}
.sync-peer-remove:focus-visible {
  outline: 2px solid rgba(255, 140, 120, 0.65);
  outline-offset: 2px;
}
.sync-peer-item.friend-item-container {
  padding: 0;
  overflow: hidden;
}
.sync-peer-item.sync-peer-item--premium {
  border-color: rgba(186, 104, 255, 0.55);
  box-shadow:
    0 0 0 1px rgba(186, 104, 255, 0.2),
    0 6px 24px rgba(90, 50, 140, 0.35);
}
.sync-peer-item.sync-peer-item--premium .sync-peer-profile-btn {
  border-color: rgba(186, 104, 255, 0.45);
  background: rgba(40, 22, 62, 0.55);
  box-shadow: inset 0 0 20px rgba(124, 200, 255, 0.06);
}
.friend-main-row {
  cursor: pointer;
}
.friend-main-row .sync-peer-profile-btn {
  padding-top: 4px;
  padding-bottom: 4px;
}
.friend-actions-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid rgba(130, 190, 255, 0.16);
  border-radius: 0 0 8px 8px;
  transition: all 0.3s ease;
}
.friend-item-container.expanded .friend-actions-panel {
  max-height: 280px;
  opacity: 1;
}
.friend-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.friend-privacy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.friend-privacy-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: rgba(190, 214, 235, 0.74);
  text-transform: uppercase;
}
.friend-privacy-toggles {
  display: flex;
  align-items: center;
  gap: 8px;
}
.privacy-toggle-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(120, 180, 220, 0.3);
  background: rgba(12, 20, 36, 0.72);
  color: rgba(165, 183, 200, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.privacy-toggle-btn:hover:not(:disabled) {
  border-color: rgba(156, 220, 255, 0.55);
}
.privacy-toggle-btn.active {
  color: #c9f1ff;
  border-color: rgba(129, 229, 255, 0.75);
  box-shadow: 0 0 0 1px rgba(120, 220, 255, 0.22), 0 0 14px rgba(120, 225, 255, 0.35);
}
.privacy-toggle-btn:not(.active) {
  box-shadow: none;
  filter: saturate(0.52);
}
.privacy-toggle-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}
.action-btn {
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid rgba(120, 200, 255, 0.35);
  background: linear-gradient(180deg, rgba(34, 47, 82, 0.9), rgba(20, 28, 52, 0.92));
  color: #dff2ff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease,
    filter 0.16s ease;
}
.action-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(130, 220, 255, 0.62);
  box-shadow: 0 0 0 1px rgba(120, 220, 255, 0.16), 0 5px 12px rgba(0, 10, 30, 0.35);
  filter: brightness(1.05);
}
.action-btn:focus-visible {
  outline: 2px solid rgba(130, 220, 255, 0.56);
  outline-offset: 2px;
}
.action-btn.disabled,
.action-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.action-btn--danger {
  border-color: rgba(255, 122, 122, 0.45);
  background: linear-gradient(180deg, rgba(82, 34, 47, 0.9), rgba(52, 20, 28, 0.92));
  color: #ffd9d9;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.action-btn--danger:hover:not(:disabled) {
  border-color: rgba(255, 152, 152, 0.78);
  box-shadow: 0 0 0 1px rgba(255, 130, 130, 0.26), 0 5px 12px rgba(45, 8, 12, 0.42);
}
@media (max-width: 768px) {
  #friends-list-container {
    padding: 10px 12px;
  }
  .sync-peer-item {
    padding: 8px 10px;
  }
  .sync-peer-stack {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .sync-peer-controls-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: min(100%, 17.75rem);
    max-width: 100%;
    box-sizing: border-box;
  }
  .sync-peer-profile-btn {
    flex: none;
    width: min(100%, calc(17.75rem + 1.35rem));
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    align-self: center;
  }
  .sync-peer-profile-btn .sync-peer-sub {
    display: block;
    margin-top: 2px;
    font-size: 9px;
    line-height: 1.15;
  }
  .sync-peer-profile-btn .sync-peer-name-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sync-peer-controls-row .sync-peer-select {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
  }
  .sync-peer-controls-row .sync-peer-remove {
    flex: 0 0 auto;
  }
  .friend-actions-panel {
    justify-content: center;
  }
}
.sync-outgoing-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 7px;
  border-radius: 8px;
  border: 1px solid rgba(130, 190, 255, 0.2);
  background: rgba(22, 30, 48, 0.42);
  min-width: 0;
}
.sync-outgoing-row strong {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: #e8f4ff;
}
.sync-outgoing-row .muted {
  flex: 0 1 auto;
  max-width: min(46%, 11rem);
  min-width: 0;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}
.sync-incoming-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  margin-bottom: 7px;
  border-radius: 8px;
  border: 1px solid rgba(130, 190, 255, 0.26);
  background: rgba(22, 30, 48, 0.52);
  min-width: 0;
}
.sync-incoming-name {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: #e8f4ff;
}
.sync-incoming-actions {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 152px;
  align-items: stretch;
}
.sync-incoming-btn {
  margin: 0;
  padding: 6px 5px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  font-family: Arial, sans-serif;
  text-align: center;
  white-space: nowrap;
}
.sync-incoming-btn.btn-accept-sync-req {
  background: rgba(46, 204, 113, 0.32);
  border: 1px solid #2ecc71;
  color: #eafbf1;
}
.sync-incoming-btn.btn-reject-sync-req {
  background: rgba(231, 76, 60, 0.22);
  border: 1px solid rgba(231, 76, 60, 0.6);
  color: #ffb3aa;
}
@media (max-width: 420px) {
  .sync-incoming-actions {
    width: 138px;
    gap: 5px;
  }
  .sync-incoming-btn {
    padding: 6px 3px;
    font-size: 10px;
  }
}
/* === Мобильная модалка «Нейронная сеть»: повышенная читаемость и удобство тапов === */
@media (max-width: 768px) {
  #sync-network-modal {
    top: 4% !important;
    left: 2% !important;
    right: 2% !important;
    bottom: 4% !important;
    padding: 0 !important;
    border-radius: 18px;
    overflow: hidden;
  }
  #sync-network-modal .archive-header {
    flex: 0 0 auto;
    margin: 0;
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(155, 89, 182, 0.28);
    background: linear-gradient(
      180deg,
      rgba(28, 18, 56, 0.96) 0%,
      rgba(16, 14, 28, 0.92) 100%
    );
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.6);
  }
  #sync-network-modal #sync-network-modal-title {
    font-size: 17px;
    line-height: 1.2;
    margin: 0;
  }
  #sync-network-modal #btn-close-sync-network {
    width: 38px;
    height: 38px;
    font-size: 22px;
    border-radius: 10px;
    flex: 0 0 auto;
  }
  #sync-network-modal .sync-network-modal-body {
    padding: 14px 14px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    overflow-x: clip;
    min-width: 0;
  }
  #sync-network-modal .sync-network-modal-body::-webkit-scrollbar {
    width: 4px;
  }
  #sync-network-modal .sync-network-modal-body::-webkit-scrollbar-track {
    background: transparent;
  }
  #sync-network-modal .sync-network-modal-body::-webkit-scrollbar-thumb {
    background: rgba(155, 89, 182, 0.42);
    border-radius: 4px;
  }

  #sync-network-modal .sync-intro-desc {
    margin: 0 0 14px !important;
    padding: 2px 4px;
    font-size: 13.5px;
    line-height: 1.45;
    text-align: center;
    color: rgba(220, 232, 246, 0.86);
  }

  /* Карточки секций: единый стиль, перекрываем хаотичные inline-границы */
  #sync-network-modal .sync-section {
    margin: 0 0 12px !important;
    padding: 14px !important;
    border-radius: 14px;
    background: rgba(22, 18, 38, 0.55);
    border: 1px solid rgba(155, 89, 182, 0.18) !important;
    box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.55);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  #sync-network-modal .sync-section:last-child {
    margin-bottom: 0 !important;
  }

  /* Заголовок секции — компактная «бровка» с акцентной полосой */
  #sync-network-modal .sync-section-title {
    position: relative;
    margin: 0 0 10px !important;
    padding-left: 10px;
    font-size: 11.5px !important;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(220, 200, 255, 0.95);
  }
  #sync-network-modal .sync-section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: linear-gradient(180deg, #c597ff 0%, #6ed6ff 100%);
    box-shadow: 0 0 10px rgba(180, 130, 255, 0.55);
  }
  #sync-network-modal .sync-section-desc,
  #sync-network-modal .sync-section .muted {
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: rgba(220, 232, 246, 0.82);
  }
  #sync-network-modal .sync-section-desc {
    margin: 0 0 12px !important;
  }

  /* Кнопка «Получить реферальную ссылку» — крупный CTA */
  #sync-network-modal #btn-get-referral-link {
    min-height: 48px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 12px;
    letter-spacing: 0.01em;
  }

  /* Реферальная ссылка: на узких экранах кладём «Копия» под input */
  #sync-network-modal #referral-link-container {
    padding: 12px !important;
    border-radius: 12px !important;
    margin-bottom: 4px !important;
  }
  #sync-network-modal .sync-referral-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  #sync-network-modal #referral-link-input {
    flex: 1 1 auto !important;
    width: 100%;
    min-height: 42px;
    padding: 10px 12px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #f6f9ff !important;
  }
  #sync-network-modal #btn-copy-referral-link {
    width: 100%;
    min-height: 44px;
    padding: 0 14px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }
  #sync-network-modal #referral-link-hint {
    font-size: 12px !important;
    line-height: 1.45 !important;
    margin: 10px 2px 0 !important;
  }

  /* Связь по нику: input + кнопка занимают полную ширину */
  #sync-network-modal .sync-connect-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  #sync-network-modal #sync-nickname-input {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    min-height: 46px;
    padding: 10px 12px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    box-sizing: border-box;
  }
  #sync-network-modal #btn-send-sync-request {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 0 14px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    font-weight: 700;
    box-sizing: border-box;
  }

  /* Запросы: входящие/исходящие — побольше воздуха */
  #sync-network-modal .sync-outgoing-row,
  #sync-network-modal .sync-incoming-row {
    padding: 10px 12px;
    border-radius: 10px;
  }
  #sync-network-modal .sync-incoming-actions {
    width: auto;
    min-width: 152px;
    gap: 6px;
  }
  #sync-network-modal .sync-incoming-btn {
    min-height: 38px;
    padding: 8px 6px;
    font-size: 12px;
  }

  /* Список друзей: подсказка под именем читаемее, действия с крупными тапами */
  #sync-network-modal .sync-peer-profile-btn .sync-peer-sub {
    font-size: 11px;
    color: rgba(195, 215, 235, 0.82);
  }
  #sync-network-modal .friend-item-container.expanded .friend-actions-panel {
    max-height: 360px;
  }
  #sync-network-modal .friend-actions-panel {
    padding: 12px;
    gap: 12px;
  }
  #sync-network-modal .friend-actions {
    gap: 8px;
  }
  #sync-network-modal .action-btn {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 12px;
  }
  #sync-network-modal .action-btn--danger {
    font-size: 11px;
  }
  #sync-network-modal .privacy-toggle-btn {
    width: 42px;
    height: 42px;
    font-size: 17px;
  }
  #sync-network-modal .friend-privacy-label {
    font-size: 11px;
    letter-spacing: 0.1em;
  }
}
@media (max-width: 420px) {
  #sync-network-modal {
    top: 2% !important;
    left: 1% !important;
    right: 1% !important;
    bottom: 2% !important;
    border-radius: 14px;
  }
  #sync-network-modal .archive-header {
    padding: 12px 12px 10px;
  }
  #sync-network-modal #sync-network-modal-title {
    font-size: 16px;
  }
  #sync-network-modal .sync-network-modal-body {
    padding: 12px 10px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #sync-network-modal .sync-section {
    padding: 12px !important;
  }
  #sync-network-modal .sync-incoming-actions {
    min-width: 140px;
  }
}
@media (min-width: 769px) {
  #sync-network-modal,
  #sync-network-modal.modal-show,
  #sync-network-modal.modal-show.modal-visible {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
}
#lavka-modal .lavka-modal-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lavka-panel {
  display: none;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.lavka-panel.lavka-panel--active {
  display: flex;
}
.lavka-shop-layout {
  display: flex;
  gap: 16px;
  flex: 1;
  min-height: 0;
}
.lavka-categories {
  flex: 0 0 min(160px, 32%);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  padding-right: 14px;
}
.lavka-cat-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.lavka-cat-item {
  font-size: 13px;
  line-height: 1.4;
}
.lavka-shop-main {
  flex: 1;
  font-size: 14px;
  line-height: 1.45;
}
.lavka-shop-layout--catalog {
  align-items: flex-start;
  min-height: 0;
}
.lavka-cat-heading {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(245, 248, 255, 0.95);
}
.lavka-cat-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}
.lavka-shop-main--catalog {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 6px;
  color: rgba(230, 236, 248, 0.92);
}
.lavka-shop-cat-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.lavka-shop-cat-btn {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 12, 24, 0.45);
  color: rgba(230, 236, 248, 0.92);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.lavka-shop-cat-btn.is-active {
  border-color: rgba(130, 190, 255, 0.55);
  background: rgba(155, 89, 182, 0.32);
  box-shadow: 0 0 14px rgba(130, 190, 255, 0.18);
  color: #fff;
}
@media (hover: hover) and (pointer: fine) {
  .lavka-shop-cat-btn:hover:not(.is-active) {
    border-color: rgba(180, 220, 255, 0.35);
    background: rgba(255, 255, 255, 0.06);
  }
}
.lavka-shop-cat-hint {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(200, 220, 255, 0.72);
}
.lavka-bg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  width: 100%;
}
/* Витрина: компактные карточки, превью целиком (contain); скролл у .lavka-shop-main--catalog. */
#lavka-panel-shop .lavka-shop-catalog-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  align-content: start;
  gap: 12px;
  width: 100%;
}
@media (min-width: 960px) {
  #lavka-panel-shop .lavka-shop-catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
#lavka-panel-shop .lavka-shop-catalog-grid .lavka-bg-card {
  width: 100%;
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
/* Атрибут [hidden] иначе не скрывает: у .lavka-bg-card задан display:flex сильнее UA-стиля [hidden]. */
#lavka-panel-shop .lavka-shop-catalog-grid > .lavka-bg-card[hidden] {
  display: none !important;
}
#lavka-panel-shop .lavka-bg-card__media {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  max-height: min(132px, 26vh);
  min-height: 72px;
  padding: 8px 10px;
  box-sizing: border-box;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#lavka-panel-shop .lavka-bg-card__media img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
#lavka-panel-shop .lavka-bg-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  padding: 10px 12px 12px;
}
#lavka-panel-shop .lavka-bg-card__title {
  font-size: 14px;
  flex: 0 0 auto;
}
#lavka-panel-shop .lavka-bg-card__desc {
  flex: 1 1 auto;
  font-size: 12px;
  line-height: 1.4;
  min-height: 0;
}
#lavka-panel-shop .lavka-bg-card__footer {
  flex: 0 0 auto;
  margin-top: auto;
}
#lavka-panel-shop .lavka-bg-card__btn {
  min-height: 40px;
  padding: 10px 12px;
  font-size: 13px;
}
#lavka-panel-shop .lavka-bg-card__price {
  font-size: 13px;
}
.lavka-bg-card {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid rgba(155, 89, 182, 0.38);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  overflow: hidden;
  min-height: 0;
}
.lavka-bg-card__media {
  aspect-ratio: 16 / 9;
  background: rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.lavka-bg-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lavka-bg-card__body {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.lavka-bg-card__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #f3ecff;
  letter-spacing: 0.02em;
}
.lavka-bg-card__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(210, 220, 240, 0.88);
  flex: 1;
}
.lavka-bg-card__footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.lavka-bg-card__price {
  font-size: 14px;
  font-weight: 700;
  color: #9bffd9;
  letter-spacing: 0.04em;
}
.lavka-bg-card__btn {
  width: 100%;
  min-height: 44px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(130, 190, 255, 0.35);
  background: rgba(155, 89, 182, 0.22);
  color: #fff5ff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.lavka-bg-card__btn:active:not(:disabled) {
  transform: scale(0.98);
  background: rgba(155, 89, 182, 0.34);
}
@media (hover: hover) and (pointer: fine) {
  .lavka-bg-card__btn:hover:not(:disabled) {
    border-color: rgba(180, 220, 255, 0.55);
    box-shadow: 0 0 18px rgba(130, 190, 255, 0.22);
  }
}
.lavka-bg-card__btn:disabled {
  opacity: 0.72;
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(40, 44, 58, 0.55);
  color: rgba(230, 236, 248, 0.75);
  font-weight: 600;
}
.lavka-bg-card__status {
  width: 100%;
  margin: 0;
  min-height: 44px;
  padding: 12px 14px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(110, 220, 160, 0.4);
  background: rgba(46, 204, 113, 0.12);
  color: rgba(190, 255, 220, 0.95);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
@media (max-width: 768px) {
  .lavka-shop-layout--catalog {
    flex-direction: column;
  }
  .lavka-categories {
    flex: 0 0 auto;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0 0 12px;
    margin-bottom: 4px;
  }
  .lavka-shop-cat-list {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .lavka-shop-cat-btn {
    flex: 1 1 calc(33.333% - 6px);
    min-width: 92px;
    text-align: center;
    padding: 10px 8px;
    font-size: 12px;
  }
  .lavka-shop-cat-hint {
    display: none;
  }
  .lavka-bg-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
  }
  #lavka-panel-shop .lavka-shop-catalog-grid {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
  #lavka-panel-shop .lavka-shop-catalog-grid .lavka-bg-card {
    max-width: min(440px, 100%);
    margin-inline: auto;
    height: auto;
  }
  #lavka-panel-shop .lavka-bg-card__media {
    max-height: min(160px, 38vh);
    min-height: 64px;
    padding: 8px 10px;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #lavka-panel-shop .lavka-bg-card__media img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
  }
  /* Карточки фонов на телефонах: превью целиком (contain), без обрезки и без наслоения текста */
  .lavka-bg-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .lavka-bg-card__media {
    flex-shrink: 0;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    aspect-ratio: unset;
    min-height: unset;
    display: block;
    padding: 12px 14px;
    box-sizing: border-box;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .lavka-bg-card__media img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: min(58vw, 280px);
    object-fit: contain;
    object-position: center;
    display: block;
    margin: 0 auto;
  }
  .lavka-bg-card__body {
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
  }
  .lavka-bg-card__desc {
    flex: 0 1 auto;
  }
  .lavka-bg-card__btn {
    min-height: 48px;
    padding: 14px 16px;
    font-size: 15px;
  }
}

/* Лавка: подтверждение покупки */
.shop-purchase-dlg {
  position: fixed;
  inset: 0;
  z-index: 4500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(16px + env(safe-area-inset-bottom, 0px)) 16px;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.shop-purchase-dlg.shop-purchase-dlg--visible {
  opacity: 1;
}
.shop-purchase-dlg__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 22, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.shop-purchase-dlg__panel {
  position: relative;
  width: min(400px, 100%);
  border-radius: 16px;
  padding: 20px 20px 18px;
  border: 1px solid rgba(155, 89, 182, 0.45);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  color: #eef5ff;
  font-family: Arial, sans-serif;
}
.shop-purchase-dlg__title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
}
.shop-purchase-dlg__text {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(226, 232, 255, 0.88);
}
.shop-purchase-dlg__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.shop-purchase-dlg__btn {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(40, 44, 58, 0.65);
  color: #f0f4ff;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.shop-purchase-dlg__btn:active {
  transform: scale(0.97);
}
.shop-purchase-dlg__btn--primary {
  border-color: rgba(130, 220, 255, 0.45);
  background: rgba(155, 89, 182, 0.35);
}
@media (hover: hover) and (pointer: fine) {
  .shop-purchase-dlg__btn--ghost:hover {
    border-color: rgba(255, 255, 255, 0.38);
  }
  .shop-purchase-dlg__btn--primary:hover {
    border-color: rgba(160, 230, 255, 0.55);
    box-shadow: 0 0 16px rgba(130, 190, 255, 0.2);
  }
}

/* Лавка: тост успешной покупки */
.shop-purchase-success {
  position: fixed;
  z-index: 4600;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.98);
  width: min(380px, calc(100vw - 32px));
  padding: 22px 22px 18px;
  border-radius: 16px;
  border: 1px solid rgba(130, 220, 255, 0.35);
  background: rgba(18, 14, 32, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(130, 190, 255, 0.15);
  font-family: Arial, sans-serif;
  color: #eef5ff;
  opacity: 0;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.shop-purchase-success.shop-purchase-success--visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.shop-purchase-success__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.shop-purchase-success__img-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.shop-purchase-success__img {
  width: min(200px, 70vw);
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(155, 89, 182, 0.45);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.shop-purchase-success__lead {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: #fff;
}
.shop-purchase-success__hint {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  color: rgba(220, 230, 248, 0.9);
}
.shop-purchase-success__link {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: #7ee8ff;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.shop-purchase-success__link:active {
  color: #b8f6ff;
}
@media (max-width: 768px) {
  .shop-purchase-success {
    width: calc(100vw - 24px);
    padding: 20px 16px 16px;
  }
}
#lavka-panel-buy {
  overflow-y: visible;
  padding-right: 4px;
  align-items: stretch;
}
.lavka-buy-lead {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(226, 232, 255, 0.82);
}
.lavka-buy-disclaimer {
  margin: 12px auto 0;
  max-width: 600px;
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.6);
}
.lavka-buy-disclaimer a {
  color: #00ffcc;
  text-decoration: underline;
}
/* Сетка 2×2 по умолчанию; одна колонка только на очень узких экранах (иначе при ≤520px всё уезжало в столбик). */
.drp-package-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: min(600px, 100%, calc(90vh - 260px));
  max-width: 600px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  box-sizing: border-box;
}
@media (max-width: 380px) {
  #lavka-panel-buy {
    overflow-y: auto;
  }
  .drp-package-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto);
    width: min(100%, 100%);
    max-width: none;
    gap: 16px;
    aspect-ratio: unset;
  }
}
.drp-package-card {
  position: relative;
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 0;
  justify-self: stretch;
  align-self: stretch;
  border-radius: 18px;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(
    155deg,
    rgba(38, 28, 62, 0.95) 0%,
    rgba(14, 18, 36, 0.92) 100%
  );
  border: 1px solid rgba(175, 120, 220, 0.48);
  box-shadow:
    0 0 0 1px rgba(140, 220, 255, 0.12) inset,
    0 6px 0 rgba(0, 0, 0, 0.35),
    0 14px 32px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(140, 100, 200, 0.28),
    0 0 48px rgba(80, 160, 220, 0.12);
  transition:
    border-color 0.26s ease,
    box-shadow 0.26s ease,
    transform 0.26s cubic-bezier(0.34, 1.35, 0.64, 1),
    opacity 0.22s ease;
}
@media (max-width: 520px) {
  .drp-package-info {
    padding: 22px 12px 16px;
  }
  .drp-package-name {
    font-size: 12px;
    letter-spacing: 0.14em;
  }
  .drp-package-drp {
    font-size: 24px;
    margin-bottom: 8px;
  }
  .drp-package-price {
    font-size: 18px;
    padding: 9px 20px;
  }
  /* На узких экранах у "Золото" длинный лейбл 1700 DRP может ломать компоновку карточки. */
  .drp-package-card[data-package="gold"] .drp-package-drp {
    font-size: 21px;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
}
.drp-package-card:focus {
  outline: 2px solid rgba(140, 220, 255, 0.65);
  outline-offset: 3px;
}
.drp-package-card:focus:not(:focus-visible) {
  outline: none;
}
.drp-package-card:hover:not(.is-loading):not(.is-dimmed) {
  border-color: rgba(200, 170, 255, 0.72);
  box-shadow:
    0 0 0 1px rgba(180, 240, 255, 0.22) inset,
    0 10px 0 rgba(0, 0, 0, 0.28),
    0 22px 48px rgba(40, 20, 80, 0.55),
    0 0 36px rgba(160, 120, 255, 0.45),
    0 0 64px rgba(100, 200, 255, 0.28);
  transform: translateY(-8px) scale(1.04);
}
.drp-package-card:active:not(.is-loading):not(.is-dimmed) {
  transform: translateY(-3px) scale(1.01);
}
.drp-package-card img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
  pointer-events: none;
}
.drp-package-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  box-sizing: border-box;
  padding: 26px 14px 18px;
  font-family: Arial, sans-serif;
  text-align: center;
  background: linear-gradient(
    to top,
    rgba(4, 6, 14, 0.98) 0%,
    rgba(4, 6, 14, 0.85) 38%,
    rgba(4, 6, 14, 0.38) 72%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}
.drp-package-name {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgba(248, 250, 255, 0.99);
  text-shadow:
    0 0 10px rgba(190, 220, 255, 0.5),
    0 1px 2px rgba(0, 0, 0, 1),
    0 2px 10px rgba(0, 0, 0, 0.94);
}
.drp-package-drp {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: 0.02em;
  color: #f8fcff;
  text-shadow:
    0 0 16px rgba(130, 235, 255, 0.95),
    0 0 32px rgba(200, 160, 255, 0.5),
    0 1px 0 rgba(40, 90, 120, 0.4),
    0 2px 8px rgba(0, 0, 0, 1),
    0 4px 16px rgba(0, 0, 0, 0.88);
}
.drp-package-price {
  display: inline-block;
  margin: 0;
  padding: 10px 22px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #0a1f18;
  border-radius: 999px;
  background: linear-gradient(
    165deg,
    rgba(170, 255, 215, 1) 0%,
    rgba(95, 235, 175, 1) 45%,
    rgba(50, 190, 130, 1) 100%
  );
  border: 1px solid rgba(200, 255, 230, 0.85);
  box-shadow:
    0 0 0 1px rgba(0, 40, 30, 0.35) inset,
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 4px 14px rgba(0, 60, 45, 0.55),
    0 0 28px rgba(80, 255, 190, 0.45);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.drp-package-card.is-dimmed {
  opacity: 0.5;
  pointer-events: none;
  transform: none !important;
}
.drp-package-card.is-loading {
  pointer-events: none;
  animation: drp-package-card-pulse 1.15s ease-in-out infinite;
}
.drp-package-card.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: rgba(180, 235, 255, 0.95);
  animation: drp-package-spinner 0.75s linear infinite;
  box-sizing: border-box;
  pointer-events: none;
}
@keyframes drp-package-card-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(140, 220, 255, 0.14) inset,
      0 6px 0 rgba(0, 0, 0, 0.35),
      0 14px 32px rgba(0, 0, 0, 0.45),
      0 0 28px rgba(140, 100, 200, 0.35),
      0 0 52px rgba(80, 160, 220, 0.18);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(180, 240, 255, 0.28) inset,
      0 6px 0 rgba(0, 0, 0, 0.28),
      0 18px 42px rgba(40, 80, 120, 0.42),
      0 0 40px rgba(120, 200, 255, 0.48),
      0 0 72px rgba(160, 120, 255, 0.22);
  }
}
@keyframes drp-package-spinner {
  to {
    transform: rotate(360deg);
  }
}

/* ===== DreamRoad Pass (Premium) ===== */
.navigator-pass-section {
  position: relative;
  margin: 0;
  padding: 22px 22px 24px;
  border-radius: 22px;
  background:
    radial-gradient(
      120% 130% at 0% 0%,
      rgba(186, 104, 255, 0.14),
      rgba(8, 12, 28, 0.55) 65%
    ),
    linear-gradient(
      155deg,
      rgba(28, 14, 56, 0.45),
      rgba(10, 18, 40, 0.55)
    ),
    url('/images/lavka/dreamroad-pass-bg.png') center / cover no-repeat,
    #0a1228;
  border: 1px solid rgba(186, 104, 255, 0.35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(186, 104, 255, 0.18) inset, 0 0 60px rgba(186, 104, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  isolation: isolate;
  clip-path: inset(0 round 22px);
  -webkit-clip-path: inset(0 round 22px);
}
.navigator-pass-section::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1800px;
  height: 1800px;
  margin: -900px 0 0 -900px;
  background: conic-gradient(
    from 0deg,
    rgba(186, 104, 255, 0.0),
    rgba(20, 100, 255, 0.52),
    rgba(0, 220, 130, 0.48),
    rgba(255, 140, 30, 0.44),
    rgba(150, 40, 255, 0.52),
    rgba(186, 104, 255, 0.0)
  );
  mix-blend-mode: screen;
  animation: navigatorPassSpin 9s linear infinite;
  pointer-events: none;
  opacity: 0.42;
  z-index: 0;
}
@keyframes navigatorPassSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.navigator-pass-section::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1800px;
  height: 1800px;
  margin: -900px 0 0 -900px;
  background: conic-gradient(
    from 180deg,
    rgba(186, 104, 255, 0.0),
    rgba(255, 50, 160, 0.42),
    rgba(60, 200, 255, 0.38),
    rgba(140, 255, 70, 0.36),
    rgba(255, 90, 40, 0.42),
    rgba(186, 104, 255, 0.0)
  );
  mix-blend-mode: screen;
  animation: navigatorPassSpinReverse 13s linear infinite;
  pointer-events: none;
  opacity: 0.30;
  z-index: 0;
}
@keyframes navigatorPassSpinReverse {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
.navigator-pass-section > * {
  position: relative;
  z-index: 1;
}
.navigator-pass-section__header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.navigator-pass-section__title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.01em;
  background: linear-gradient(90deg, #d6b4ff, #9bffcf, #ffd57c, #d6b4ff);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: navigatorPassTitleShine 6s linear infinite;
}
@keyframes navigatorPassTitleShine {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: 200% 0%;
  }
}
.navigator-pass-section__badge {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #d6b4ff;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(186, 104, 255, 0.45);
  background: rgba(186, 104, 255, 0.08);
}
.navigator-pass-section__lead {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #c8c1e0;
}
.navigator-pass-perks {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 14px;
}
.navigator-pass-perks li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #e8e2ff;
  line-height: 1.4;
}
.navigator-pass-perks li::before {
  content: "✦";
  color: #ffd57c;
  flex-shrink: 0;
  line-height: 1.2;
}
.navigator-pass-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.navigator-pass-card {
  position: relative;
  padding: 16px 14px 18px;
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(34, 22, 70, 0.85), rgba(12, 16, 40, 0.85));
  border: 1px solid rgba(186, 104, 255, 0.25);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  text-align: center;
  outline: none;
}
.navigator-pass-card:hover:not(.is-loading):not(.is-dimmed),
.navigator-pass-card:focus-visible:not(.is-loading):not(.is-dimmed) {
  transform: translateY(-2px);
  border-color: rgba(186, 104, 255, 0.65);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 28px rgba(186, 104, 255, 0.3);
}
.navigator-pass-card.is-dimmed {
  opacity: 0.5;
  pointer-events: none;
}
.navigator-pass-card.is-loading {
  pointer-events: none;
}
.navigator-pass-card.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -14px 0 0 -14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: rgba(214, 180, 255, 0.95);
  animation: drp-package-spinner 0.75s linear infinite;
}
.navigator-pass-card[data-package="premium_3m"]::after,
.navigator-pass-card[data-package="premium_6m"]::after {
  content: attr(data-tag);
}
.navigator-pass-card[data-tag]:not(.is-loading)::after {
  content: attr(data-tag);
  position: absolute;
  top: -10px;
  right: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: linear-gradient(120deg, #ffd57c, #ff9bcf);
  color: #1a0a2e;
  box-shadow: 0 6px 14px rgba(255, 155, 207, 0.35);
}
.navigator-pass-card__duration {
  font-size: 18px;
  font-weight: 800;
  color: #f3e8ff;
  margin-bottom: 4px;
}
.navigator-pass-card__days {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #b9b3d4;
  margin-bottom: 10px;
}
.navigator-pass-card__price {
  font-size: 20px;
  font-weight: 900;
  color: #9bffcf;
  text-shadow: 0 0 14px rgba(155, 255, 207, 0.35);
}
.navigator-pass-card__per-month {
  margin-top: 4px;
  font-size: 11px;
  color: #a89fc7;
}

#lavka-panel-pass {
  overflow-y: auto;
  padding-right: 6px;
  align-items: stretch;
}
.lavka-pass-view {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 4px 2px 20px;
  box-sizing: border-box;
}
#lavka-panel-pass .navigator-pass-section {
  padding: 28px 28px 30px;
}
#lavka-panel-pass .navigator-pass-perks {
  margin-bottom: 22px;
}
#lavka-panel-pass .navigator-pass-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 26px;
  width: 100%;
  max-width: none;
}
@media (min-width: 940px) {
  #lavka-panel-pass .navigator-pass-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  #lavka-panel-pass .navigator-pass-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}
#lavka-panel-pass .navigator-pass-card {
  padding: 24px 20px 28px;
  min-height: 176px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(
    160deg,
    rgba(42, 28, 86, 0.52),
    rgba(14, 20, 48, 0.75)
  );
  border: 1px solid rgba(186, 104, 255, 0.42);
  box-shadow:
    0 0 0 1px rgba(140, 200, 255, 0.1) inset,
    0 14px 36px rgba(0, 0, 0, 0.42),
    0 0 28px rgba(140, 90, 200, 0.18);
}
#lavka-panel-pass .navigator-pass-card[data-package="premium_1m"],
#lavka-panel-pass .navigator-pass-card[data-package="premium_3m"],
#lavka-panel-pass .navigator-pass-card[data-package="premium_6m"],
#lavka-panel-pass .navigator-pass-card[data-package="premium_12m"] {
  background:
    radial-gradient(
      ellipse 95% 80% at center,
      rgba(8, 12, 28, 0.68) 0%,
      rgba(8, 12, 28, 0.50) 60%,
      rgba(8, 12, 28, 0.32) 100%
    ),
    var(--pass-card-art) center / cover no-repeat,
    #0a1228;
}
#lavka-panel-pass .navigator-pass-card[data-package="premium_1m"] {
  --pass-card-art: url('/images/lavka/pass-1m.png');
}
#lavka-panel-pass .navigator-pass-card[data-package="premium_3m"] {
  --pass-card-art: url('/images/lavka/pass-3m.png');
}
#lavka-panel-pass .navigator-pass-card[data-package="premium_6m"] {
  --pass-card-art: url('/images/lavka/pass-6m.png');
}
#lavka-panel-pass .navigator-pass-card[data-package="premium_12m"] {
  --pass-card-art: url('/images/lavka/pass-12m.png');
}
#lavka-panel-pass .navigator-pass-card:hover:not(.is-loading):not(.is-dimmed),
#lavka-panel-pass .navigator-pass-card:focus-visible:not(.is-loading):not(.is-dimmed) {
  transform: translateY(-3px);
  border-color: rgba(186, 104, 255, 0.75);
  box-shadow:
    0 0 0 1px rgba(180, 240, 255, 0.16) inset,
    0 18px 44px rgba(0, 0, 0, 0.48),
    0 0 36px rgba(186, 104, 255, 0.35),
    0 0 52px rgba(124, 200, 255, 0.2);
}
#lavka-panel-pass .navigator-pass-card__duration {
  font-size: 21px;
}
#lavka-panel-pass .navigator-pass-card__price {
  font-size: 23px;
}
#lavka-panel-pass .navigator-pass-card__days {
  color: #e6dff5;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
#lavka-panel-pass .navigator-pass-card__per-month {
  color: #d8d0ec;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Premium: анимированное кольцо вокруг аватара + заметный ник */
.is-premium-name {
  background: linear-gradient(92deg, #e9d5ff, #9bffcf, #fde68a, #fda4af, #c4b5fd, #e9d5ff);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: navigatorPassTitleShine 3.2s linear infinite, premiumNameGlow 2.2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(186, 104, 255, 0.75)) drop-shadow(0 0 14px rgba(34, 211, 238, 0.45));
}
@keyframes premiumNameGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 6px rgba(186, 104, 255, 0.7)) drop-shadow(0 0 12px rgba(34, 211, 238, 0.38));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(253, 224, 71, 0.58)) drop-shadow(0 0 20px rgba(186, 104, 255, 0.88))
      drop-shadow(0 0 16px rgba(34, 211, 238, 0.55));
  }
}
.profile-premium-badge {
  margin-top: 4px;
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    rgba(155, 89, 182, 0.32) 0%,
    rgba(74, 144, 226, 0.32) 100%
  );
  border: 1px solid rgba(190, 140, 255, 0.45);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #f3e0ff;
  text-shadow: 0 0 12px rgba(180, 130, 240, 0.6);
  box-shadow: 0 0 14px rgba(155, 89, 182, 0.18);
}
.profile-premium-badge[hidden] {
  display: none;
}

.lavka-journal-toolbar {
  flex-shrink: 0;
}
#archive-search,
#lavka-journal-search,
#lavka-drp-filter,
#lavka-ledger-kind {
  background: rgba(10, 16, 35, 0.72);
  border: 1px solid rgba(160, 176, 230, 0.34);
  color: #f4f7ff;
  padding: 9px 10px;
  border-radius: 10px;
  box-sizing: border-box;
  max-width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
#lavka-journal-search,
#archive-search {
  flex: 1;
  min-width: 0;
}
#archive-search {
  width: 60%;
}
#archive-search::placeholder,
#lavka-journal-search::placeholder {
  color: rgba(198, 208, 242, 0.66);
}
#archive-search:focus,
#lavka-journal-search:focus,
#lavka-drp-filter:focus,
#lavka-ledger-kind:focus {
  outline: none;
  border-color: rgba(174, 127, 255, 0.72);
  box-shadow:
    0 0 0 1px rgba(174, 127, 255, 0.24) inset,
    0 0 0 3px rgba(135, 212, 255, 0.14);
  background: rgba(14, 22, 46, 0.82);
}
#lavka-drp-filter:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
#lavka-journal-list {
  flex: 1;
  overflow-y: auto;
  margin-top: 12px;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Карточки операций — в едином стиле FAQ/earn */
#lavka-journal-list > .archive-group-title {
  margin: 0;
}
#lavka-journal-list > .archive-item {
  margin: 0;
  box-sizing: border-box;
}
/* ===== Лавка: вкладка «Где взять DRP» — карточки ===== */
.lavka-earn-panel {
  overflow-y: auto;
  padding-right: 6px;
}
.lavka-earn-scroll {
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 760px;
  margin: 0 auto;
  padding: 6px 2px 22px;
  box-sizing: border-box;
}
.lavka-earn-intro {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(226, 232, 255, 0.88);
}
.lavka-earn-intro strong {
  color: #9bffcf;
  font-weight: 700;
}
/* Daily progress dashboard (MSK calendar day) */
.lavka-daily-dashboard {
  margin: 0 0 8px;
}
.lavka-daily-dashboard__inner {
  border-radius: 20px;
  padding: 18px 18px 20px;
  background: linear-gradient(145deg, rgba(32, 20, 58, 0.55), rgba(10, 14, 36, 0.72));
  border: 1px solid rgba(140, 110, 200, 0.38);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 0 0 1px rgba(120, 200, 255, 0.06) inset,
    0 12px 36px rgba(0, 0, 0, 0.35),
    0 0 32px rgba(100, 70, 180, 0.12);
}
.lavka-daily-dashboard__title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: #f3e8ff;
  letter-spacing: 0.02em;
}
.lavka-daily-dashboard__sub {
  margin: 0 0 16px;
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(180, 190, 230, 0.78);
}
.lavka-daily-rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lavka-daily-row {
  position: relative;
}
.lavka-daily-row__label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.lavka-daily-row__label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(230, 232, 255, 0.92);
}
.lavka-daily-row__meta {
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #9bffcf;
  text-shadow: 0 0 10px rgba(155, 255, 207, 0.35);
}
.lavka-daily-track-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lavka-daily-track-wrap .lavka-daily-track {
  flex: 1;
  min-width: 0;
}
.lavka-daily-track {
  position: relative;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(120, 100, 180, 0.3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.lavka-daily-fill {
  height: 100%;
  width: 0%;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    #4c1d95 0%,
    #7c3aed 22%,
    #22d3ee 55%,
    #a5f3fc 85%,
    #c4b5fd 100%
  );
  background-size: 180% 100%;
  animation: lavkaDailyNebula 8s ease-in-out infinite;
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.45);
  transition: width 0.35s ease;
}
@keyframes lavkaDailyNebula {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
.lavka-daily-row--complete .lavka-daily-fill {
  animation:
    lavkaDailyNebula 8s ease-in-out infinite,
    lavkaDailyCompletePulse 1.8s ease-in-out infinite;
}
@keyframes lavkaDailyCompletePulse {
  0%,
  100% {
    filter: brightness(1);
    box-shadow: 0 0 14px rgba(34, 211, 238, 0.45);
  }
  50% {
    filter: brightness(1.12);
    box-shadow: 0 0 22px rgba(167, 139, 250, 0.65);
  }
}
.lavka-daily-status {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  position: relative;
}
.lavka-daily-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}
.lavka-daily-icon[hidden] {
  display: none !important;
}
.lavka-daily-icon--ok {
  color: #0f172a;
  background: linear-gradient(135deg, #9bffcf, #67e8f9);
  box-shadow: 0 0 14px rgba(155, 255, 207, 0.55);
}
.lavka-daily-icon--no {
  color: #fff;
  background: linear-gradient(145deg, #991b1b, #ef4444);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.42);
}
.lavka-daily-row--login .lavka-daily-track {
  height: 10px;
}
.lavka-daily-row__label-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.lavka-daily-info-btn {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(167, 139, 250, 0.5);
  background: rgba(110, 70, 160, 0.38);
  color: #efe8ff;
  font-size: 12px;
  font-weight: 800;
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.lavka-daily-info-btn:hover {
  background: rgba(130, 90, 190, 0.52);
}
.lavka-daily-info-btn:focus-visible {
  outline: 2px solid rgba(125, 211, 252, 0.75);
  outline-offset: 2px;
}
.lavka-daily-row--locked {
  opacity: 0.76;
}
.lavka-daily-row--locked .lavka-daily-fill {
  opacity: 0.42;
}
.daily-visit-info-modal__shell {
  max-width: 520px;
  align-items: stretch;
  text-align: left;
}
.daily-visit-info-modal__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  text-align: center;
  color: #f4f7ff;
}
.daily-visit-info-modal__body {
  max-height: min(52vh, 400px);
  overflow-y: auto;
  text-align: left;
  font-size: 13px;
  line-height: 1.48;
  color: rgba(226, 232, 255, 0.92);
}
.daily-visit-info-modal__body p {
  margin: 0 0 10px;
}
.daily-visit-info-modal__body .daily-visit-note-muted {
  color: rgba(180, 198, 235, 0.78);
  font-size: 12px;
}
.daily-visit-schedule-wrap {
  margin: 10px 0 0;
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid rgba(140, 180, 255, 0.22);
  background: rgba(8, 10, 22, 0.35);
}
table.daily-visit-schedule {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
table.daily-visit-schedule th,
table.daily-visit-schedule td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
table.daily-visit-schedule th {
  color: rgba(190, 210, 255, 0.82);
  font-weight: 700;
}
table.daily-visit-schedule tr:last-child td {
  border-bottom: none;
}
table.daily-visit-schedule tr.is-filled td {
  background: rgba(34, 197, 94, 0.14);
}
table.daily-visit-schedule tr.is-pending td {
  background: rgba(34, 197, 94, 0.08);
  box-shadow: inset 3px 0 0 0 rgba(34, 197, 94, 0.65);
}
#btn-daily-visit-info-close {
  align-self: center;
  margin-top: 4px;
}
.viz-limits-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 8px;
}
.viz-limits-hint {
  flex: 1;
  font-size: 11px !important;
  margin: 0 !important;
  line-height: 1.4;
}
.viz-limits-info-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(155, 89, 182, 0.55);
  background: rgba(155, 89, 182, 0.22);
  color: #f0e6ff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.viz-limits-info-btn:hover {
  background: rgba(155, 89, 182, 0.38);
}
/* Ежедневный визит — смартфон: читабельный текст, скролл по середине, безопасные зоны */
@media (max-width: 768px) {
  #daily-visit-info-modal {
    justify-content: flex-start;
    align-items: stretch;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(12px + env(safe-area-inset-left, 0px));
    padding-right: calc(12px + env(safe-area-inset-right, 0px));
  }
  #daily-visit-info-modal .daily-visit-info-modal__shell {
    flex: 1 1 auto;
    min-height: 0;
    max-width: none;
    width: 100%;
    gap: 16px;
    justify-content: flex-start;
  }
  #daily-visit-info-modal .payment-success-modal__kicker {
    letter-spacing: 0.14em;
    font-size: 12px;
    text-align: center;
    width: 100%;
  }
  .daily-visit-info-modal__title {
    font-size: clamp(1.15rem, 4.5vw, 1.35rem);
    line-height: 1.28;
    padding: 0 2px;
  }
  .daily-visit-info-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    font-size: 15px;
    line-height: 1.55;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding-right: 2px;
  }
  .daily-visit-info-modal__body p {
    margin-bottom: 12px;
  }
  .daily-visit-info-modal__body .daily-visit-note-muted {
    font-size: 13px;
    line-height: 1.5;
  }
  .daily-visit-schedule-wrap {
    margin-top: 12px;
    border-radius: 12px;
  }
  #daily-visit-info-modal table.daily-visit-schedule {
    font-size: 14px;
    font-variant-numeric: tabular-nums;
  }
  #daily-visit-info-modal table.daily-visit-schedule th,
  #daily-visit-info-modal table.daily-visit-schedule td {
    padding: 11px 12px;
  }
  #daily-visit-info-modal #btn-daily-visit-info-close {
    align-self: stretch;
    margin-top: 8px;
    padding-top: 15px;
    padding-bottom: 15px;
    flex-shrink: 0;
  }
}
.admin-grant-modal__shell {
  max-width: 460px;
  width: 100%;
}
.admin-grant-modal__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #f3e0ff;
  text-shadow: 0 0 22px rgba(180, 130, 240, 0.55);
}
.admin-grant-modal__link {
  color: #76ffe2;
  font-weight: 700;
}

.admin-grant-modal__hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(200, 200, 235, 0.72);
}
.admin-grant-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  text-align: left;
}
.admin-grant-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-grant-field label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(200, 195, 230, 0.78);
}
.admin-grant-field input {
  background: rgba(10, 14, 28, 0.7);
  border: 1px solid rgba(155, 89, 182, 0.45);
  border-radius: 10px;
  padding: 10px 12px;
  color: #f3f8ff;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.admin-grant-field input:focus {
  outline: none;
  border-color: rgba(190, 140, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(180, 130, 240, 0.3);
}
.admin-grant-status {
  margin: 0;
  min-height: 18px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(220, 235, 255, 0.85);
}
.admin-grant-status--ok {
  color: #b6f5cf;
}
.admin-grant-status--err {
  color: #ffb0b0;
}
.admin-grant-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.admin-grant-actions .payment-success-modal__btn {
  flex: 1 1 auto;
  min-width: 140px;
}
.admin-grant-secondary {
  background: transparent;
  border: 1px solid rgba(190, 140, 255, 0.4);
  color: rgba(220, 215, 255, 0.85);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.18s ease;
}
.admin-grant-secondary:hover {
  background: rgba(155, 89, 182, 0.18);
}
.lavka-daily-login-note {
  margin-top: 6px;
  font-size: 11px;
  color: rgba(170, 185, 230, 0.75);
}
.lavka-earn-section {
  margin: 0;
}
.lavka-earn-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(186, 180, 230, 0.82);
}
.lavka-earn-section-ico {
  font-size: 16px;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(155, 200, 255, 0.35));
}
.lavka-earn-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.lavka-earn-card {
  position: relative;
  border-radius: 18px;
  padding: 18px 18px 20px;
  background: linear-gradient(155deg, rgba(38, 26, 72, 0.52), rgba(12, 18, 42, 0.74));
  border: 1px solid rgba(140, 120, 210, 0.38);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 0 0 1px rgba(120, 200, 255, 0.06) inset,
    0 14px 36px rgba(0, 0, 0, 0.38),
    0 0 28px rgba(100, 80, 160, 0.1);
}
.lavka-earn-card--wide {
  grid-column: 1 / -1;
}
.lavka-earn-card--premium-focus {
  border-color: rgba(186, 104, 255, 0.5);
  box-shadow:
    0 0 0 1px rgba(186, 140, 255, 0.12) inset,
    0 16px 40px rgba(0, 0, 0, 0.42),
    0 0 32px rgba(186, 104, 255, 0.22),
    0 0 56px rgba(100, 200, 255, 0.1);
  animation: lavkaEarnPremiumPulse 3.4s ease-in-out infinite;
}
@keyframes lavkaEarnPremiumPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(186, 140, 255, 0.1) inset,
      0 14px 36px rgba(0, 0, 0, 0.4),
      0 0 28px rgba(186, 104, 255, 0.18),
      0 0 48px rgba(100, 200, 255, 0.08);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(155, 255, 207, 0.14) inset,
      0 18px 44px rgba(0, 0, 0, 0.38),
      0 0 40px rgba(186, 104, 255, 0.32),
      0 0 64px rgba(155, 255, 207, 0.12);
  }
}
.lavka-earn-card--referral-glow {
  border-color: rgba(255, 213, 124, 0.42);
  box-shadow:
    0 0 0 1px rgba(255, 213, 124, 0.1) inset,
    0 14px 36px rgba(0, 0, 0, 0.38),
    0 0 28px rgba(255, 200, 120, 0.2),
    0 0 48px rgba(255, 150, 180, 0.08);
  animation: lavkaEarnReferralPulse 2.9s ease-in-out infinite;
}
@keyframes lavkaEarnReferralPulse {
  0%,
  100% {
    border-color: rgba(255, 213, 124, 0.38);
  }
  50% {
    border-color: rgba(255, 230, 160, 0.65);
  }
}
.lavka-earn-card__head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.lavka-earn-card__icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}
.lavka-earn-card__title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: #f3e8ff;
  letter-spacing: 0.01em;
}
.lavka-earn-card__tag {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffd57c;
  text-shadow: 0 0 12px rgba(255, 213, 124, 0.45);
}
.lavka-earn-card__lead {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.52;
  color: rgba(210, 218, 255, 0.9);
}
.lavka-earn-card__lead--tight {
  margin-top: 4px;
}
.lavka-earn-card__lead strong {
  color: #9bffcf;
  font-weight: 700;
}
.lavka-earn-card__list {
  margin: 0;
  padding-left: 1.2em;
  font-size: 13.5px;
  line-height: 1.52;
  color: rgba(215, 222, 255, 0.9);
}
.lavka-earn-card__list li + li {
  margin-top: 8px;
}
.lavka-earn-actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.lavka-earn-btn {
  appearance: none;
  cursor: pointer;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  color: rgba(240, 242, 255, 0.95);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(160, 140, 220, 0.45);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}
.lavka-earn-btn:hover {
  border-color: rgba(180, 230, 255, 0.55);
  box-shadow: 0 0 18px rgba(140, 200, 255, 0.2);
  background: rgba(30, 40, 80, 0.45);
}
.lavka-earn-btn--primary {
  border-color: rgba(186, 104, 255, 0.55);
  background: linear-gradient(135deg, rgba(100, 50, 160, 0.45), rgba(40, 90, 140, 0.35));
  box-shadow: 0 0 22px rgba(186, 104, 255, 0.25);
}
.lavka-earn-btn--primary:hover {
  box-shadow: 0 0 28px rgba(186, 104, 255, 0.4);
}
.lavka-earn-btn--accent {
  border-color: rgba(255, 213, 124, 0.5);
  color: #fff8e8;
  background: linear-gradient(135deg, rgba(120, 70, 40, 0.35), rgba(60, 40, 90, 0.35));
  box-shadow: 0 0 20px rgba(255, 200, 120, 0.2);
}
.lavka-earn-btn--accent:hover {
  box-shadow: 0 0 26px rgba(255, 213, 124, 0.35);
}
#profile-panel-overview {
  flex: 1;
  overflow-x: clip;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#profile-modal > .archive-header,
#profile-modal > .archive-tabs {
  flex-shrink: 0;
}
#profile-panel-achievements {
  flex: 1;
  overflow: hidden;
  display: none;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}
.achievements-layout {
  display: flex;
  gap: 14px;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
.achievements-sidebar {
  flex: 0 0 168px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding-right: 4px;
  border-right: 1px solid rgba(155, 89, 182, 0.22);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.achievements-sidebar-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
  padding: 2px 4px 6px;
}
.achievements-category-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.achievements-category-btn {
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(155, 89, 182, 0.28);
  background: rgba(18, 14, 32, 0.75);
  color: #dce7f5;
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
  box-sizing: border-box;
}
.achievements-category-btn:hover {
  border-color: rgba(155, 89, 182, 0.55);
  background: rgba(155, 89, 182, 0.12);
}
.achievements-category-btn.is-active {
  border-color: rgba(155, 89, 182, 0.75);
  background: rgba(155, 89, 182, 0.22);
  font-weight: 700;
}
.achievements-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
}
.achiev-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 4px 0 2px;
  flex-shrink: 0;
}
.achiev-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #dce7f5;
  user-select: none;
}
.achiev-toolbar input[type="radio"] {
  accent-color: #9b59b6;
}
.achievements-mobile-category-row {
  display: none;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}
.achievements-mobile-category-label {
  flex: 0 0 auto;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(180, 198, 220, 0.85);
  white-space: nowrap;
}
#achievements-category-select {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  height: 30px;
  padding: 4px 28px 4px 8px;
  margin: 0;
  border-radius: 8px;
  border: 1px solid rgba(155, 89, 182, 0.35);
  background: rgba(14, 12, 26, 0.95);
  color: #e8f0fa;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
  box-sizing: border-box;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(200, 210, 230, 0.65) 50%),
    linear-gradient(135deg, rgba(200, 210, 230, 0.65) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) calc(50% - 3px),
    calc(100% - 9px) calc(50% - 3px);
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
#achievements-category-select:focus {
  outline: none;
  border-color: rgba(155, 89, 182, 0.75);
  box-shadow: 0 0 0 2px rgba(155, 89, 182, 0.2);
}
#achievements-category-select:disabled {
  opacity: 0.65;
  cursor: wait;
}
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  grid-auto-rows: 1fr;
  gap: 12px;
  padding-bottom: 16px;
  align-items: stretch;
}
.achiev-card {
  border-radius: 12px;
  border: 1px solid rgba(155, 89, 182, 0.35);
  background: rgba(22, 18, 38, 0.92);
  padding: 10px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 288px;
  height: 100%;
  box-sizing: border-box;
  transition:
    box-shadow 0.25s ease,
    transform 0.2s ease;
}
.achiev-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}
.achiev-card-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.28;
  color: #f0e8ff;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-height: 2.56em;
}
.achiev-card-condition {
  flex: 1;
  margin: 0;
  font-size: 11px;
  line-height: 1.38;
  letter-spacing: 0.01em;
  color: rgba(196, 206, 228, 0.82);
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: none;
  text-align: left;
}
.achiev-card-condition-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(155, 89, 182, 0.85);
  margin-bottom: 4px;
}
.achiev-card-condition-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 2px;
}
.achiev-card--clickable {
  cursor: pointer;
  border-color: rgba(155, 89, 182, 0.55);
}
.achiev-card--clickable:hover {
  box-shadow: 0 0 22px rgba(155, 89, 182, 0.35);
  transform: translateY(-2px);
}
.achiev-card.achiev-locked {
  filter: grayscale(1) opacity(0.5);
  pointer-events: none;
}
.achiev-card--hidden-locked {
  filter: none;
  opacity: 1;
  pointer-events: none;
}
.achiev-cover-wrap {
  width: 100%;
  aspect-ratio: 1;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.achiev-cover-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.achiev-cover--mystery {
  font-size: 42px;
  color: rgba(220, 220, 240, 0.35);
  font-weight: bold;
}
.achiev-meta {
  font-size: 11px;
  color: rgba(200, 210, 230, 0.65);
  margin: 0;
}
.achiev-progress-track {
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-top: auto;
  flex-shrink: 0;
}
.achiev-progress-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #9b59b6, #58d68d);
  transition: width 0.35s ease;
}
.achiev-progress-label {
  font-size: 11px;
  color: rgba(200, 210, 230, 0.75);
  flex-shrink: 0;
}
#achiev-toast-container {
  position: fixed;
  top: max(16px, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--dr-toast-z-achiev);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  pointer-events: none;
  max-width: min(420px, calc(100vw - 24px));
}
.achiev-toast {
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(40, 22, 62, 0.97), rgba(22, 32, 52, 0.98));
  border: 1px solid rgba(155, 89, 182, 0.55);
  box-shadow:
    0 0 28px rgba(155, 89, 182, 0.45),
    0 12px 40px rgba(0, 0, 0, 0.45);
  animation: achiev-toast-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes achiev-toast-in {
  from {
    opacity: 0;
    transform: translateY(-24px) scale(0.92);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
.achiev-toast__img {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.achiev-toast__body {
  flex: 1;
  text-align: left;
  min-width: 0;
}
.achiev-toast__kicker {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #ffd86b;
}
.achiev-toast__title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  overflow-wrap: break-word;
}
.achiev-toast__desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(230, 236, 248, 0.82);
  overflow-wrap: break-word;
}
.achiev-reward-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffe9b3;
  background: linear-gradient(
    90deg,
    rgba(255, 196, 86, 0.18),
    rgba(155, 89, 182, 0.22)
  );
  border: 1px solid rgba(255, 196, 86, 0.5);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(255, 196, 86, 0.18);
}
.achiev-reward-strip__label {
  opacity: 0.75;
  font-size: 10px;
}
.achiev-reward-strip__chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #fff;
}
.achiev-reward-strip__chip--drp {
  color: #ffd66e;
}
.achiev-reward-strip__chip--exp {
  color: #b388ff;
}
/* После базовых правил #achiev-toast-container — иначе мобильная вёрстка сбрасывается */
@media (max-width: 768px) {
  #achiev-toast-container {
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    width: auto;
    max-width: none;
    transform: none;
    align-items: stretch;
  }
  #achiev-toast-container .achiev-toast {
    width: 100%;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
  }
  #achiev-toast-container .achiev-toast__img {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    flex-shrink: 0;
  }
  #achiev-toast-container .achiev-toast__body {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
  }
  #achiev-toast-container .achiev-reward-strip {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    gap: 6px 8px;
    font-size: 10px;
    letter-spacing: 0.02em;
    padding: 5px 10px;
  }
}
.achiev-reward-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(255, 220, 150, 0.88);
  text-shadow: 0 0 4px rgba(255, 196, 86, 0.25);
}
.achiev-reward-badge--drp {
  color: rgba(255, 214, 110, 0.92);
}
.achiev-reward-badge--exp {
  color: rgba(179, 136, 255, 0.92);
}
.achiev-modal__reward {
  margin: 0 0 14px;
  padding: 10px 14px;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: #fef0c8;
  background: linear-gradient(
    90deg,
    rgba(255, 196, 86, 0.14),
    rgba(155, 89, 182, 0.18)
  );
  border: 1px solid rgba(255, 196, 86, 0.45);
  border-radius: 12px;
}
.achiev-modal__reward strong {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 196, 86, 0.95);
  margin-bottom: 6px;
}
.achiev-modal__reward-line {
  font-weight: 600;
  font-size: 14px;
  color: #fff;
}
#achiev-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  width: auto;
  height: auto;
  padding:
    calc(12px + env(safe-area-inset-top, 0px))
    calc(12px + env(safe-area-inset-right, 0px))
    calc(12px + env(safe-area-inset-bottom, 0px))
    calc(12px + env(safe-area-inset-left, 0px));
}
#achiev-modal.achiev-modal--open {
  display: flex;
}
.achiev-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 4, 14, 0.92);
  backdrop-filter: blur(6px);
}
@media (max-width: 768px) {
  .achiev-modal__backdrop {
    background: rgb(10, 8, 18);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.achiev-modal__panel {
  position: relative;
  max-width: 420px;
  width: 100%;
  border-radius: 18px;
  padding: 22px 20px 20px;
  background: linear-gradient(165deg, rgba(38, 26, 58, 0.98), rgba(18, 22, 42, 0.99));
  border: 1px solid rgba(155, 89, 182, 0.45);
  box-shadow:
    0 0 40px rgba(155, 89, 182, 0.35),
    0 24px 64px rgba(0, 0, 0, 0.55);
  text-align: center;
}
.achiev-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.achiev-modal__close:hover {
  color: #fff;
}
.achiev-modal__img {
  width: min(220px, 70vw);
  height: min(220px, 70vw);
  object-fit: cover;
  border-radius: 16px;
  margin: 8px auto 14px;
  display: block;
  border: 2px solid rgba(155, 89, 182, 0.4);
  box-shadow: 0 0 24px rgba(155, 89, 182, 0.25);
}
.achiev-modal__title {
  margin: 0 0 10px;
  font-size: 1.35em;
  color: #fef8ff;
}
.achiev-modal__desc {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(230, 236, 248, 0.88);
}
.achiev-modal__condition {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(155, 89, 182, 0.22);
  color: rgba(210, 218, 238, 0.92);
}
.achiev-modal__condition strong {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(155, 89, 182, 0.95);
  margin-bottom: 6px;
}
.achiev-modal__condition-body {
  margin: 0;
  font-weight: 400;
}
.achiev-modal__meta {
  margin: 0;
  font-size: 13px;
  color: rgba(180, 195, 220, 0.85);
}
@media (max-width: 768px) {
  .achievements-layout {
    flex-direction: row;
    gap: 0;
  }
  .achievements-sidebar {
    display: none !important;
  }
  .achievements-mobile-category-row {
    display: flex;
  }
  .achievements-main {
    gap: 8px;
  }
  .achiev-toolbar {
    padding-top: 2px;
    gap: 12px;
  }
  .achievements-grid {
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  }
}
/* Шапка профиля: туманность только в этой зоне (не вся модалка). */
.profile-hero-cosmos-host {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border-radius: 14px;
  box-sizing: border-box;
}
.profile-hero-cosmos-host > *:not(.profile-hero-cosmos) {
  position: relative;
  z-index: 1;
}
#profile-modal .profile-hero-cosmos-host {
  border: none;
  box-shadow: inset 0 0 0 1px rgba(155, 89, 182, 0.32);
  padding: 14px;
  margin-bottom: 2px;
  background: rgba(6, 4, 18, 0.55);
}
.profile-hero-cosmos {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.profile-hero-cosmos__nebula,
.profile-hero-cosmos__nebula::before,
.profile-hero-cosmos__nebula::after {
  position: absolute;
  inset: -18%;
  border-radius: inherit;
  pointer-events: none;
}
.profile-hero-cosmos__nebula {
  background:
    radial-gradient(ellipse 72% 58% at 18% 42%, rgba(120, 60, 200, 0.72), transparent 68%),
    radial-gradient(ellipse 64% 52% at 82% 28%, rgba(40, 120, 220, 0.55), transparent 65%),
    radial-gradient(ellipse 58% 48% at 55% 88%, rgba(180, 50, 140, 0.48), transparent 62%),
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(12, 8, 32, 0.92), rgba(4, 2, 14, 0.98));
  filter: saturate(1.15) brightness(1.05);
}
.profile-hero-cosmos__nebula::before {
  content: "";
  background: radial-gradient(ellipse 55% 45% at 70% 65%, rgba(0, 255, 200, 0.22), transparent 70%);
  opacity: 0.85;
}
.profile-hero-cosmos__nebula::after {
  content: "";
  background: radial-gradient(ellipse 48% 40% at 25% 72%, rgba(255, 120, 220, 0.28), transparent 68%);
  opacity: 0.75;
  mix-blend-mode: screen;
}
/* Анимация только когда модалка видима: на Android/WebKit иначе «замирает» при opacity:0 у .modal-show. */
#profile-modal.modal-show.modal-visible .profile-hero-cosmos__nebula,
#friend-profile-modal.modal-show.modal-visible .profile-hero-cosmos__nebula {
  will-change: transform;
  animation: profileHeroNebulaDrift 26s ease-in-out infinite alternate;
}
#profile-modal.modal-show.modal-visible .profile-hero-cosmos__nebula::before,
#friend-profile-modal.modal-show.modal-visible .profile-hero-cosmos__nebula::before {
  will-change: transform;
  animation: profileHeroNebulaDriftB 32s ease-in-out infinite alternate-reverse;
}
#profile-modal.modal-show.modal-visible .profile-hero-cosmos__nebula::after,
#friend-profile-modal.modal-show.modal-visible .profile-hero-cosmos__nebula::after {
  will-change: transform;
  animation: profileHeroNebulaDriftC 38s ease-in-out infinite alternate;
}
.profile-hero-cosmos--teal .profile-hero-cosmos__nebula {
  background:
    radial-gradient(ellipse 70% 56% at 22% 38%, rgba(0, 140, 120, 0.62), transparent 66%),
    radial-gradient(ellipse 62% 50% at 78% 32%, rgba(40, 90, 200, 0.5), transparent 64%),
    radial-gradient(ellipse 56% 46% at 52% 86%, rgba(0, 200, 160, 0.42), transparent 60%),
    radial-gradient(ellipse 88% 68% at 50% 50%, rgba(4, 22, 28, 0.94), rgba(2, 10, 18, 0.98));
}
.profile-hero-cosmos--teal .profile-hero-cosmos__nebula::before {
  background: radial-gradient(ellipse 52% 44% at 68% 62%, rgba(120, 255, 220, 0.26), transparent 68%);
}
.profile-hero-cosmos--teal .profile-hero-cosmos__nebula::after {
  background: radial-gradient(ellipse 46% 38% at 28% 70%, rgba(80, 200, 255, 0.24), transparent 66%);
}
.profile-hero-cosmos--premium .profile-hero-cosmos__nebula {
  filter: saturate(1.35) brightness(1.12);
}
.profile-hero-cosmos--premium .profile-hero-cosmos__nebula::before {
  opacity: 1;
}
.profile-hero-cosmos--premium .profile-hero-cosmos__nebula::after {
  opacity: 0.95;
}
#profile-modal.modal-show.modal-visible .profile-hero-cosmos--premium .profile-hero-cosmos__nebula,
#friend-profile-modal.modal-show.modal-visible .profile-hero-cosmos--premium .profile-hero-cosmos__nebula {
  animation: profileHeroNebulaDriftPremium 14s ease-in-out infinite alternate;
}
#profile-modal.modal-show.modal-visible .profile-hero-cosmos--premium .profile-hero-cosmos__nebula::before,
#friend-profile-modal.modal-show.modal-visible .profile-hero-cosmos--premium .profile-hero-cosmos__nebula::before {
  animation: profileHeroNebulaDriftPremiumB 18s ease-in-out infinite alternate-reverse;
}
#profile-modal.modal-show.modal-visible .profile-hero-cosmos--premium .profile-hero-cosmos__nebula::after,
#friend-profile-modal.modal-show.modal-visible .profile-hero-cosmos--premium .profile-hero-cosmos__nebula::after {
  animation: profileHeroNebulaDriftPremiumC 22s ease-in-out infinite alternate;
}
.profile-hero-cosmos::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    165deg,
    rgba(4, 2, 14, 0.2) 0%,
    rgba(4, 2, 14, 0.38) 55%,
    rgba(2, 6, 12, 0.62) 100%
  );
}
.profile-hero-cosmos--teal::after {
  background: linear-gradient(
    165deg,
    rgba(2, 12, 14, 0.22) 0%,
    rgba(2, 14, 18, 0.4) 55%,
    rgba(2, 10, 16, 0.64) 100%
  );
}
.profile-hero-cosmos__stars {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.profile-hero-cosmos--premium .profile-hero-cosmos__stars {
  opacity: 1;
}
.profile-hero-cosmos-host--premium::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 42px rgba(167, 139, 250, 0.12);
}
.profile-hero-cosmos-host--premium.profile-hero-cosmos-host[data-profile-hero-theme="teal"]::after {
  box-shadow: inset 0 0 42px rgba(0, 255, 170, 0.14);
}
@keyframes profileHeroNebulaDrift {
  0% {
    transform: translate3d(-2%, -1%, 0) scale(1.02);
  }
  100% {
    transform: translate3d(3%, 2%, 0) scale(1.06);
  }
}
@keyframes profileHeroNebulaDriftB {
  0% {
    transform: translate3d(2%, 3%, 0) scale(1.04);
  }
  100% {
    transform: translate3d(-3%, -2%, 0) scale(1.01);
  }
}
@keyframes profileHeroNebulaDriftC {
  0% {
    transform: translate3d(-1%, 2%, 0) rotate(-1deg);
  }
  100% {
    transform: translate3d(2%, -2%, 0) rotate(1deg);
  }
}
@keyframes profileHeroNebulaDriftPremium {
  0% {
    transform: translate3d(-4%, -2%, 0) scale(1.04);
  }
  100% {
    transform: translate3d(5%, 3%, 0) scale(1.1);
  }
}
@keyframes profileHeroNebulaDriftPremiumB {
  0% {
    transform: translate3d(4%, 4%, 0) scale(1.06);
  }
  100% {
    transform: translate3d(-5%, -3%, 0) scale(1.02);
  }
}
@keyframes profileHeroNebulaDriftPremiumC {
  0% {
    transform: translate3d(-2%, 3%, 0) rotate(-2deg);
  }
  100% {
    transform: translate3d(3%, -3%, 0) rotate(2deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .profile-hero-cosmos__nebula,
  .profile-hero-cosmos__nebula::before,
  .profile-hero-cosmos__nebula::after {
    animation: none !important;
  }
}
.profile-hero {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  overflow: visible;
  padding-block: 0;
  box-sizing: border-box;
}
#friend-profile-modal .friend-profile-hero-wrap .profile-hero {
  padding-block: 0;
}
.profile-avatar-wrap {
  position: relative;
  width: 112px;
  height: 112px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.profile-avatar-wrap--clickable {
  cursor: pointer;
}
.profile-avatar-wrap--clickable:focus-visible {
  outline: 2px solid rgba(200, 160, 255, 0.85);
  outline-offset: 3px;
  border-radius: 50%;
}
.profile-avatar-wrap .profile-avatar,
.profile-avatar-wrap .profile-avatar-placeholder {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
}
@keyframes profilePremiumRingSpin {
  to {
    transform: rotate(360deg);
  }
}
.profile-avatar-wrap.is-premium-avatar-ring::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 108px;
  height: 108px;
  margin-left: -54px;
  margin-top: -54px;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    #c4b5fd,
    #22d3ee,
    #9bffcf,
    #f472b6,
    #fcd34d,
    #a78bfa,
    #c4b5fd
  );
  animation: profilePremiumRingSpin 2.4s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  filter: drop-shadow(0 0 12px rgba(167, 139, 250, 0.9)) drop-shadow(0 0 8px rgba(34, 211, 238, 0.65));
}
.profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(155, 89, 182, 0.55);
  background: rgba(30, 24, 48, 0.9);
  flex-shrink: 0;
}
.profile-avatar-wrap.is-uploading {
  opacity: 0.65;
  pointer-events: none;
}
.avatar-preview-modal__shell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: min(92vw, 420px);
  max-height: min(88vh, 640px);
}
.avatar-preview-modal__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(52vh, 360px);
  max-height: min(62vh, 440px);
  border-radius: 14px;
  background: rgba(8, 10, 22, 0.55);
  border: 1px solid rgba(140, 180, 255, 0.2);
  overflow: hidden;
}
.avatar-preview-modal__img {
  display: block;
  max-width: 100%;
  max-height: min(62vh, 440px);
  width: auto;
  height: auto;
  object-fit: contain;
}
.avatar-preview-modal__placeholder {
  font-size: clamp(72px, 22vw, 120px);
  line-height: 1;
  user-select: none;
}
.avatar-preview-modal__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
/* display:flex выше ломает UA-стиль [hidden] — у друга светились «Изменить фото». */
.avatar-preview-modal__footer[hidden] {
  display: none !important;
}
.avatar-preview-modal__footer button {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid rgba(224, 170, 255, 0.45);
  background: rgba(155, 89, 182, 0.42);
  color: #f8f2ff;
  font-size: 14px;
  cursor: pointer;
}
.avatar-preview-modal__footer button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.avatar-preview-modal__footer button.avatar-preview-modal__btn--muted {
  background: rgba(60, 70, 100, 0.45);
  border-color: rgba(160, 175, 210, 0.35);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.profile-avatar-placeholder {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px solid rgba(155, 89, 182, 0.55);
  background: rgba(155, 89, 182, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  flex-shrink: 0;
}
.profile-meta-block {
  flex: 1;
  min-width: 160px;
}
.profile-meta-block .profile-display-name {
  font-size: 1.25em;
  font-weight: bold;
  margin: 0 0 4px;
}
.profile-meta-block .profile-rank {
  margin: 0;
  color: #d7c4f7;
  font-size: 0.95em;
}
.profile-rank-badge {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(155, 89, 182, 0.15);
  border: 1px solid rgba(155, 89, 182, 0.5);
  border-radius: 6px;
  font-size: 12px;
  color: #e0aaff;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: bold;
  box-shadow: 0 0 10px rgba(155, 89, 182, 0.2);
}
.profile-exp-container {
  width: 100%;
  max-width: 220px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  height: 12px;
  overflow: hidden;
  position: relative;
  cursor: help;
  box-sizing: border-box;
}
.profile-exp-bar {
  height: 100%;
  max-width: 100%;
  background: linear-gradient(90deg, #9b59b6, #00ffaa);
  width: 0%;
  box-sizing: border-box;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Мобильный профиль: строка «аватар | текст» сжимает бейдж и шкалу — колонка и полная ширина меты */
@media (max-width: 768px) {
  #profile-modal .profile-hero,
  #friend-profile-modal .profile-hero {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  #profile-modal .profile-avatar-wrap,
  #friend-profile-modal .profile-avatar-wrap {
    align-self: center;
  }
  #profile-modal .profile-avatar,
  #profile-modal .profile-avatar-placeholder,
  #friend-profile-modal .profile-avatar,
  #friend-profile-modal .profile-avatar-placeholder {
    align-self: center;
  }
  #profile-modal #profile-panel-overview,
  #friend-profile-modal #friend-profile-panel-overview {
    max-width: 100%;
  }
  #profile-modal .profile-meta-block,
  #friend-profile-modal .profile-meta-block {
    flex: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-right: 0;
    overflow: visible;
  }
  #profile-modal .profile-rank-badge,
  #friend-profile-modal .profile-rank-badge {
    display: block;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
    line-height: 1.35;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  #profile-modal .profile-exp-container,
  #friend-profile-modal .profile-exp-container {
    max-width: 100%;
    width: 100%;
    height: 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.profile-stat-card {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.profile-stat-card .label {
  font-size: 0.78em;
  color: #aaa;
  margin-bottom: 6px;
}
.profile-stat-card .value {
  font-size: 1.35em;
  font-weight: bold;
  color: #fff;
}
.profile-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile-field label {
  font-size: 0.85em;
  color: #c8d6e8;
}
#profile-nickname-input {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid #555;
  color: #fff;
  padding: 10px;
  border-radius: 8px;
  font-size: 14px;
}
#profile-save-nickname {
  align-self: flex-start;
  margin-top: 4px;
  background: #9b59b6;
  color: #fff;
  border: 1px solid #e0aaff;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}
#profile-save-nickname:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
#profile-streak-wrap,
#friend-profile-streak-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
.profile-streak-card {
  background: linear-gradient(135deg, rgba(230, 126, 34, 0.15), rgba(211, 84, 0, 0.25));
  border: 1px solid rgba(230, 126, 34, 0.5);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
}
#profile-modal .profile-streak-card.spotlight-active {
  border-radius: 12px;
}
.profile-streak-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.2em;
  font-weight: bold;
  color: #ffccaa;
}
.profile-streak-info {
  font-size: 0.85em;
  line-height: 1.4;
  color: #ffd8b8;
}
.profile-streak-info strong {
  color: #ffb870;
}
.streak-frozen-banner {
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(124, 200, 255, 0.12);
  border: 1px solid rgba(124, 200, 255, 0.35);
  color: #cfe7ff;
  font-size: 0.82em;
}
.profile-streak-pass-bonus {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #f7d77b;
  background: linear-gradient(90deg, rgba(255, 196, 86, 0.18), rgba(155, 89, 182, 0.18));
  border: 1px solid rgba(255, 196, 86, 0.45);
  border-radius: 999px;
  white-space: nowrap;
}
.profile-streak-pass-inactive {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.82em;
  line-height: 1.4;
  color: #f7d77b;
  background: linear-gradient(90deg, rgba(255, 196, 86, 0.1), rgba(155, 89, 182, 0.12));
  border: 1px solid rgba(255, 196, 86, 0.4);
}
.profile-streak-pass-inactive strong {
  color: #fff3c2;
}
.streak-freeze-block {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.streak-freeze-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.streak-freeze-pips {
  display: inline-flex;
  gap: 6px;
  font-size: 18px;
  line-height: 1;
}
.streak-freeze-pip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.35);
}
.streak-freeze-pip.is-active {
  background: rgba(124, 200, 255, 0.2);
  border-color: rgba(124, 200, 255, 0.6);
  color: #cfe7ff;
  box-shadow: 0 0 10px rgba(124, 200, 255, 0.3);
}
.streak-freeze-buy {
  background: linear-gradient(135deg, rgba(124, 200, 255, 0.18), rgba(186, 104, 255, 0.18));
  color: #e6f1ff;
  border: 1px solid rgba(124, 200, 255, 0.4);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.82em;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.streak-freeze-buy:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(124, 200, 255, 0.3);
}
.ai-trial-available {
  position: relative;
  border-color: rgba(76, 175, 80, 0.55) !important;
  background-image: linear-gradient(
    165deg,
    rgba(76, 175, 80, 0.18) 0%,
    rgba(76, 175, 80, 0.06) 100%
  ) !important;
  box-shadow: 0 0 14px rgba(76, 175, 80, 0.18);
}
.ai-trial-available::before {
  content: "🎁";
  position: absolute;
  top: -7px;
  right: -7px;
  font-size: 12px;
  background: #1c2e1f;
  border: 1px solid rgba(76, 175, 80, 0.6);
  border-radius: 999px;
  padding: 2px 6px;
  line-height: 1;
  color: #bff5c8;
}
.streak-freeze-buy:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.streak-freeze-hint {
  font-size: 0.78em;
  color: #b9cad8;
  line-height: 1.4;
}
#friend-profile-panel-overview {
  flex: 1;
  overflow-x: clip;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#friend-profile-modal #friend-profile-panel-overview .profile-avatar {
  border-color: rgba(0, 255, 170, 0.48);
}
#friend-profile-modal #friend-profile-panel-overview .profile-avatar-placeholder {
  border-color: rgba(0, 255, 170, 0.48);
  background: rgba(0, 72, 64, 0.38);
}
#friend-profile-modal .profile-meta-block .profile-rank {
  color: #9dffea;
}
#friend-profile-modal .profile-rank-badge {
  border-color: rgba(0, 255, 170, 0.45);
  background: rgba(0, 72, 64, 0.35);
  color: #9dffea;
  box-shadow: 0 0 12px rgba(0, 255, 170, 0.18);
}
#friend-profile-modal .profile-exp-container {
  border-color: rgba(0, 255, 170, 0.28);
}
.friend-profile-kicker {
  margin: 0 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(120, 255, 210, 0.78);
}
#friend-profile-modal .friend-profile-hero-wrap {
  border: none;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 170, 0.28);
  border-radius: 14px;
  padding: 14px;
  background: rgba(4, 18, 22, 0.5);
  box-sizing: border-box;
}
/* Ник на всю ширину карточки, перенос длинных строк (важно на мобильных). */
#friend-profile-modal .friend-profile-display-name {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 12px;
  padding: 0;
  box-sizing: border-box;
  font-size: clamp(1rem, 3.8vw, 1.35rem);
  font-weight: bold;
  line-height: 1.38;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
#friend-profile-modal .friend-profile-meta-after-avatar {
  min-width: 0;
}
#friend-profile-modal .friend-profile-premium-badge {
  display: flex;
  width: fit-content;
  margin: -4px auto 12px;
}
#friend-profile-modal .friend-profile-premium-badge[hidden] {
  display: none;
}
#friend-profile-modal .friend-profile-stat-highlight {
  border-color: rgba(0, 255, 170, 0.3);
  background: rgba(0, 55, 48, 0.24);
}
#friend-profile-modal .friend-profile-stat-highlight .label {
  color: #8cdccf;
}
.friend-profile-admin-panel {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 184, 107, 0.45);
  background: rgba(255, 140, 66, 0.08);
}
.friend-profile-admin-panel[hidden] {
  display: none !important;
}
.friend-profile-admin-kicker {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffb86b;
}
.friend-profile-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.friend-profile-admin-actions .action-btn {
  flex: 1 1 160px;
}
#friend-profile-modal .friend-profile-footer-note {
  margin: 0;
  font-size: 12px;
  color: rgba(170, 230, 215, 0.82);
  line-height: 1.45;
}
.controls-toolbar__profile-wrap {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
.profile-unread-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 2;
}
.profile-unread-badge[hidden] {
  display: none !important;
}
.profile-main-tab--notifications {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.profile-main-tab-notifications-text {
  line-height: 1.2;
}
.profile-tab-unread-badge {
  position: absolute;
  top: -3px;
  right: -2px;
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.profile-tab-unread-badge[hidden] {
  display: none !important;
}
#profile-panel-notifications {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: none;
  flex-direction: column;
  gap: 12px;
}
#profile-panel-faq {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: none;
  flex-direction: column;
  gap: 0;
}
#profile-panel-faq .lavka-earn-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 2px;
}
#profile-panel-faq .profile-faq-cta-row {
  margin: 4px 0 18px;
}
#profile-panel-faq .lavka-earn-section .lavka-earn-card + .lavka-earn-card {
  margin-top: 16px;
}
#profile-notifications-list.profile-notifications-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.profile-notification-item {
  text-align: left;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #eaf5ff;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  transition: border-color 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
}
.profile-notification-item:hover {
  border-color: rgba(155, 89, 182, 0.45);
  background: rgba(155, 89, 182, 0.12);
}
.profile-notification-item--unread {
  border-left: 3px solid rgba(0, 255, 170, 0.75);
  background: rgba(0, 60, 52, 0.22);
}
.profile-notification-item--premium {
  border-left: 3px solid rgba(186, 104, 255, 0.85);
  background: rgba(42, 24, 68, 0.32);
  box-shadow: 0 0 18px rgba(120, 70, 180, 0.18);
}
.profile-notif-premium-title {
  display: block;
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 6px;
  color: #f3e8ff;
  text-shadow: 0 0 14px rgba(186, 104, 255, 0.55);
}
.profile-notif-premium-body {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
}
.profile-notification-item__time {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: #9db4c9;
}
.profile-notifications-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 768px) {
  .profile-notifications-toolbar {
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: stretch;
  }
  .profile-notifications-toolbar button {
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 8px;
    font-size: 11px;
    white-space: normal;
    line-height: 1.25;
    text-align: center;
    hyphens: auto;
  }
}

#profile-inventory-tab.profile-panel-inventory {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
}
.profile-inventory-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.profile-inventory-toolbar #inventory-search {
  flex: 1 1 200px;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.35);
  color: rgba(232, 244, 255, 0.94);
  font-size: 13px;
  box-sizing: border-box;
}
.profile-inventory-toolbar #inventory-search::placeholder {
  color: rgba(160, 180, 200, 0.65);
}
.profile-inventory-toolbar #inventory-search:focus {
  outline: 2px solid rgba(130, 190, 255, 0.45);
  outline-offset: 2px;
}
.profile-inventory-toolbar #inventory-category-filter {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.35);
  color: rgba(232, 244, 255, 0.94);
  font-size: 13px;
  min-height: 38px;
  box-sizing: border-box;
}
/* Инвентарь: явная сетка (без наслоения карточек на телефонах и узких модалках). */
#profile-modal #inventory-grid.shop-grid {
  display: grid;
  /* Не растягиваем сетку на весь flex-остаток — иначе WebKit ломает высоты рядов. */
  flex: 0 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
  gap: 16px;
  align-content: start;
  align-items: stretch;
  justify-items: stretch;
  grid-auto-rows: auto;
}
#profile-modal #inventory-grid.shop-grid > .lavka-bg-card {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  align-self: stretch;
  height: auto;
}
/* Превью по размеру картинки (contain), без фиксированного 16:9 — меньше пустоты, иконка целиком. */
#profile-modal #inventory-grid .lavka-bg-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  min-height: 0;
  aspect-ratio: unset;
  overflow: visible;
  box-sizing: border-box;
}
#profile-modal #inventory-grid .lavka-bg-card__media img {
  width: auto;
  height: auto;
  max-width: min(100%, 340px);
  max-height: min(200px, 38vh);
  object-fit: contain;
  object-position: center;
  display: block;
}
#profile-modal #inventory-grid .lavka-bg-card__footer {
  justify-content: stretch;
}
#profile-modal #inventory-grid .lavka-bg-card__btn {
  width: 100%;
}
#profile-modal #inventory-grid .lavka-bg-card__status {
  width: 100%;
}

/* ──────────────────────────────────────────────────────────────
   Профиль / Профиль-друга — мобильная полировка
   P1: nickname input не зумит viewport на iOS Safari
   P2: 4 tabs → горизонтальный скролл вместо переноса в 2 строки
   P3: hover-эффекты не залипают на тач (категории, нотификации, ачивки)
   P4-P8: бо́льшие touch-target для кнопок и radio-меток
   (friend-profile-modal не имеет tabs, поэтому P2 пропускаем для него)
   ────────────────────────────────────────────────────────────── */
@media (hover: none) {
  #profile-modal .archive-tab:hover,
  #profile-modal .achievements-category-btn:hover,
  #profile-modal .achiev-card--clickable:hover,
  #profile-modal .profile-notification-item:hover,
  #profile-modal .streak-freeze-buy:hover,
  #profile-modal #btn-notifications-delete-read:hover,
  #profile-modal #btn-notifications-mark-all:hover,
  #profile-modal .lavka-earn-card:hover,
  #profile-modal .lavka-earn-btn:hover,
  #friend-profile-modal .streak-freeze-buy:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  /* Возвращаем базовые цвета бордеров, чтобы интерактивные элементы
     не "теряли вес" в обычном состоянии. */
  #profile-modal .achievements-category-btn:hover {
    border-color: rgba(155, 89, 182, 0.28);
    background: rgba(18, 14, 32, 0.75);
  }
  #profile-modal .profile-notification-item:hover {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
  }
}

@media (max-width: 768px) {
  /* P2: горизонтальный скролл tabs профиля (4 шт). */
  #profile-modal > .archive-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #profile-modal > .archive-tabs::-webkit-scrollbar { display: none; }
  #profile-modal .archive-tab.profile-main-tab {
    flex-shrink: 0;
    min-height: 40px;
    white-space: nowrap;
  }

  /* P1: nickname input не зумит viewport. */
  #profile-nickname-input {
    font-size: 16px;
    min-height: 44px;
    padding: 12px;
  }
  /* P4: «Сохранить ник» — нормальный touch-target. */
  #profile-save-nickname {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 14px;
  }

  /* P5: уведомления toolbar — выше высота кнопок. */
  .profile-notifications-toolbar button { min-height: 40px; }

  /* Инвентарь на телефоне: колонка flex (стабильнее grid+flex на iOS Safari). */
  #profile-modal #inventory-grid.shop-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
    flex: 0 1 auto;
    width: 100%;
    min-width: 0;
  }
  #profile-modal #inventory-grid.shop-grid > .lavka-bg-card {
    flex: 0 0 auto;
  }
  #profile-modal #inventory-grid .lavka-bg-card__media {
    padding: 6px 8px;
  }
  #profile-modal #inventory-grid .lavka-bg-card__media img {
    max-width: min(100%, calc(100vw - 36px));
    max-height: min(240px, 46vmin);
  }

  /* P6: радио-фильтр «Все / Полученные» — увеличенная зона тапа. */
  #profile-modal .achiev-toolbar label {
    min-height: 36px;
    padding: 6px 8px;
    border-radius: 8px;
  }

  /* P7: кнопка покупки streak-freeze. */
  #profile-modal .streak-freeze-buy,
  #friend-profile-modal .streak-freeze-buy {
    min-height: 38px;
    padding: 8px 14px;
    font-size: 12px;
  }

  /* P8: streak-card на всю ширину контейнера на узких экранах. */
  #profile-modal .profile-streak-card,
  #friend-profile-modal .profile-streak-card {
    width: 100%;
    max-width: 100%;
  }
}
#btn-notifications-delete-read {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(231, 76, 60, 0.55);
  background: rgba(75, 22, 22, 0.45);
  color: #ffd8d4;
  font-size: 12px;
  cursor: pointer;
}
#btn-notifications-delete-read:hover {
  background: rgba(95, 32, 32, 0.62);
  border-color: rgba(255, 120, 100, 0.55);
}
#btn-notifications-mark-all {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(130, 190, 255, 0.45);
  background: rgba(40, 55, 85, 0.55);
  color: #dff0ff;
  font-size: 12px;
  cursor: pointer;
}
#btn-notifications-mark-all:hover {
  background: rgba(55, 72, 105, 0.75);
}
.archive-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 15px;
}
.archive-tabs {
  display: flex;
  gap: 10px;
  margin: 15px 0;
  flex-wrap: wrap;
}
.archive-tab {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid #555;
  color: #fff;
  padding: 8px 15px;
  border-radius: 20px;
  cursor: pointer;
}
.archive-tab.active {
  background: #9b59b6;
  border-color: #e0aaff;
}
/* Вкладка DreamRoad Pass в лавке — заметная, не как стандартные серые табы */
#lavka-modal .lavka-main-tab--dreamroad-pass {
  position: relative;
  background: rgba(12, 8, 28, 0.82) !important;
  border: 1px solid rgba(186, 104, 255, 0.5) !important;
  color: #fff;
  box-shadow:
    0 0 14px rgba(155, 100, 255, 0.38),
    0 0 28px rgba(100, 200, 255, 0.14),
    inset 0 0 22px rgba(186, 104, 255, 0.09);
  animation: dreamroadPassTabGlow 2.8s ease-in-out infinite;
}
#lavka-modal .lavka-main-tab--dreamroad-pass .lavka-dreamroad-tab-text {
  font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(92deg, #e8d4ff, #9bffcf, #ffd57c, #ff9bcf, #c4a8ff, #e8d4ff);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: navigatorPassTitleShine 5s linear infinite;
}
#lavka-modal .lavka-main-tab--dreamroad-pass.active {
  background: linear-gradient(145deg, rgba(110, 55, 170, 0.65), rgba(35, 75, 120, 0.55)) !important;
  border-color: rgba(224, 170, 255, 0.9) !important;
  animation: dreamroadPassTabGlowActive 2.2s ease-in-out infinite;
}
#lavka-modal .lavka-main-tab--dreamroad-pass.active .lavka-dreamroad-tab-text {
  text-shadow: 0 0 18px rgba(200, 160, 255, 0.45);
}
@keyframes dreamroadPassTabGlow {
  0%,
  100% {
    box-shadow:
      0 0 12px rgba(155, 100, 255, 0.32),
      0 0 26px rgba(100, 200, 255, 0.12),
      inset 0 0 20px rgba(186, 104, 255, 0.07);
    border-color: rgba(186, 104, 255, 0.45);
  }
  50% {
    box-shadow:
      0 0 22px rgba(186, 104, 255, 0.58),
      0 0 40px rgba(155, 255, 207, 0.22),
      inset 0 0 28px rgba(186, 104, 255, 0.14);
    border-color: rgba(155, 240, 210, 0.65);
  }
}
@keyframes dreamroadPassTabGlowActive {
  0%,
  100% {
    box-shadow:
      0 0 16px rgba(200, 140, 255, 0.45),
      0 0 32px rgba(120, 200, 255, 0.2),
      inset 0 0 24px rgba(255, 255, 255, 0.06);
  }
  50% {
    box-shadow:
      0 0 26px rgba(220, 170, 255, 0.65),
      0 0 48px rgba(155, 255, 207, 0.28),
      inset 0 0 30px rgba(255, 255, 255, 0.1);
  }
}

/* ──────────────────────────────────────────────────────────────
   Лавка Архитектора — мобильная полировка
   (модал уже наследует общий sizing от #profile-modal на ≤768).
   L1: input/select font-size 16px → нет zoom-on-focus в iOS Safari
   L2: 5 tabs → горизонтальный скролл вместо переноса в 2-3 строки
   L3: hover-эффекты cards/btn отключены на тач, чтобы не залипали
   L4-L6: бо́льшие touch-target'ы кнопок и селектов
   L10: -webkit-overflow-scrolling: touch для inertial scroll
   ────────────────────────────────────────────────────────────── */
@media (hover: none) {
  #lavka-modal .archive-tab:hover,
  #lavka-modal .lavka-main-tab:hover,
  #lavka-modal .lavka-earn-card:hover,
  #lavka-modal .lavka-earn-btn:hover,
  #lavka-modal .drp-package-card:hover:not(.is-loading):not(.is-dimmed),
  #lavka-modal .navigator-pass-card:hover:not(.is-loading):not(.is-dimmed) {
    transform: none !important;
    box-shadow: none !important;
  }
  /* Сохраняем оригинальную базовую тень pass-card / package-card,
     чтобы они визуально не «теряли вес» в обычном состоянии. */
  #lavka-modal .drp-package-card:hover:not(.is-loading):not(.is-dimmed) {
    border-color: rgba(175, 120, 220, 0.48);
  }
  #lavka-modal .navigator-pass-card:hover:not(.is-loading):not(.is-dimmed) {
    border-color: rgba(186, 104, 255, 0.42);
  }
}

@media (max-width: 768px) {
  /* L2: горизонтальный скролл вкладок вместо 2-3 рядов */
  #lavka-modal .archive-tabs.lavka-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 12px 0;
    padding-bottom: 4px;
  }
  #lavka-modal .archive-tabs.lavka-tabs::-webkit-scrollbar { display: none; }
  #lavka-modal .archive-tab.lavka-main-tab {
    flex-shrink: 0;
    padding: 9px 14px;
    font-size: 13px;
    min-height: 40px;
    white-space: nowrap;
  }

  /* L1+L5: больше touch-target и отсутствие zoom-on-focus */
  #lavka-journal-search,
  #lavka-drp-filter,
  #lavka-ledger-kind {
    font-size: 16px;
    padding: 11px 12px;
    min-height: 44px;
  }

  /* L6: журнал toolbar — стек в колонку, элементы на всю ширину */
  #lavka-modal .lavka-journal-toolbar {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    min-width: 0;
  }
  #lavka-modal .lavka-journal-toolbar > * {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }
  /* L6+: панель журнала тоже не должна вылезать */
  #lavka-modal #lavka-panel-journal {
    min-width: 0;
    overflow-x: hidden;
  }

  /* L4: кнопки «Где взять DRP» */
  #lavka-modal .lavka-earn-btn {
    min-height: 40px;
    padding: 10px 18px;
    font-size: 13px;
  }

  /* L10: inertial scroll для скроллящихся панелей */
  #lavka-modal .lavka-earn-panel,
  #lavka-modal #lavka-journal-list {
    -webkit-overflow-scrolling: touch;
  }
}

.archive-actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  gap: 12px;
}
#btn-delete-selected {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  display: none;
}
#archive-list {
  flex-grow: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.archive-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(145deg, rgba(38, 22, 66, 0.38), rgba(10, 14, 34, 0.62));
  border: 1px solid rgba(160, 176, 230, 0.23);
  box-shadow:
    0 0 0 1px rgba(120, 200, 255, 0.05) inset,
    0 8px 24px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 12px 14px;
  border-radius: 12px;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.archive-item:hover {
  border-color: rgba(174, 127, 255, 0.45);
  background: linear-gradient(145deg, rgba(48, 28, 84, 0.42), rgba(14, 18, 42, 0.72));
  transform: translateY(-1px);
}
.archive-item-checkbox {
  margin-right: 2px;
  transform: scale(1.15);
  accent-color: #ad7dff;
}
.archive-item-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 3px;
}
.archive-item-title {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  color: #f3e8ff;
}
.archive-item-date {
  font-size: 11.5px;
  line-height: 1.3;
  color: rgba(188, 200, 235, 0.76);
}
.archive-item-actions {
  flex-shrink: 0;
}
.archive-item-actions button {
  background: rgba(20, 28, 50, 0.62);
  border: 1px solid rgba(160, 176, 230, 0.26);
  color: #cfa9ff;
  cursor: pointer;
  font-size: 15px;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.archive-item-actions button:hover {
  color: #f2deff;
  border-color: rgba(174, 127, 255, 0.56);
  background: rgba(44, 30, 74, 0.62);
}
.archive-item-delta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(160, 176, 230, 0.24);
  background: rgba(16, 24, 45, 0.52);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.archive-item-delta.income {
  border-color: rgba(141, 255, 188, 0.38);
  background: rgba(28, 72, 54, 0.36);
  box-shadow: 0 0 0 1px rgba(141, 255, 188, 0.08) inset;
  color: #8dffbc;
}
.archive-item-delta.expense {
  border-color: rgba(255, 159, 159, 0.34);
  background: rgba(70, 34, 46, 0.34);
  box-shadow: 0 0 0 1px rgba(255, 159, 159, 0.08) inset;
  color: #ff9f9f;
}
.archive-item-delta.exp-entry {
  border-color: rgba(215, 184, 255, 0.34);
  background: rgba(48, 30, 72, 0.38);
  box-shadow: 0 0 0 1px rgba(215, 184, 255, 0.08) inset;
  color: #d7b8ff;
}
.archive-group-title {
  margin: 10px 2px 2px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(189, 207, 255, 0.84);
}
@media (max-width: 768px) {
  .archive-actions {
    margin-bottom: 12px;
    gap: 8px;
  }
  .archive-item {
    padding: 11px 12px;
  }
  .archive-item-title {
    font-size: 13px;
  }
  .archive-item-date {
    font-size: 11px;
  }
  .archive-item-delta {
    min-width: 76px;
    padding: 4px 8px;
    font-size: 11px;
  }
}
@media (max-width: 520px) {
  .archive-actions {
    flex-wrap: wrap;
    align-items: stretch;
  }
  #archive-search {
    width: 100%;
    flex: 1 1 100%;
  }
  #btn-delete-selected {
    width: 100%;
    text-align: center;
  }
  .archive-item {
    gap: 9px;
  }
  .archive-item-checkbox {
    transform: scale(1.05);
  }
}
.loc-dream-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.loc-dream-list li {
  margin: 6px 0;
}
.loc-dream-link {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(130, 190, 255, 0.25);
  background: rgba(22, 30, 48, 0.55);
  color: #e8f4ff;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13px;
  font-family: Arial, sans-serif;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.loc-dream-link:hover {
  background: rgba(34, 48, 73, 0.85);
  border-color: rgba(120, 205, 255, 0.45);
}
.connected-dreams-section {
  margin-top: 14px;
}
.connected-dreams-section h4 {
  margin: 0 0 8px;
  font-size: 14px;
  color: #eaf5ff;
}
.connected-dreams-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.connected-dreams-list li {
  margin: 6px 0;
}
.connected-dream-link {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(130, 190, 255, 0.35);
  background: rgba(18, 36, 52, 0.65);
  color: #dff6ff;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13px;
  font-family: Arial, sans-serif;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.connected-dream-link:hover {
  background: rgba(40, 62, 88, 0.88);
  border-color: rgba(120, 205, 255, 0.55);
}
.connected-dreams-section--empty .muted {
  margin: 0;
}
#map-modal {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 2000;
  box-sizing: border-box;
  margin: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  padding:
    calc(8px + env(safe-area-inset-top, 0px))
    calc(8px + env(safe-area-inset-right, 0px))
    calc(8px + env(safe-area-inset-bottom, 0px))
    calc(8px + env(safe-area-inset-left, 0px));
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(5px);
  align-items: stretch;
  justify-content: stretch;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: none;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}
#map-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  flex-direction: column;
}
@media (max-width: 768px) {
  #map-modal,
  #map-modal.is-open {
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgb(8, 6, 14);
  }
}
#map-container {
  width: 80%;
  height: 70%;
  background: #111;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
}
#leaflet-map {
  flex: 1;
  min-height: 0;
  width: 100%;
  position: relative;
  z-index: 1;
}
#map-container .leaflet-container {
  height: 100%;
  width: 100%;
  z-index: 1;
}
.map-modal-header {
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: rgba(20, 20, 30, 0.95);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.map-modal-action-btn {
  border: 1px solid rgba(130, 190, 255, 0.3);
  background: rgba(22, 30, 48, 0.7);
  color: #ebf4ff;
  border-radius: 10px;
  padding: 9px 11px;
  cursor: pointer;
  font-size: 13px;
  font-family: Arial, sans-serif;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.map-modal-action-btn:hover {
  background: rgba(34, 48, 73, 0.8);
  border-color: rgba(120, 205, 255, 0.65);
}
.map-modal-action-btn.map-modal-action-btn--primary {
  background: #28a745;
  border-color: rgba(80, 200, 120, 0.5);
}
.map-modal-action-btn.map-modal-action-btn--primary:hover {
  background: #23963d;
  border-color: rgba(120, 230, 160, 0.65);
}
.mini-map {
  width: 100%;
  height: 150px;
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  position: relative;
  z-index: 0;
  isolation: isolate;
}
.mini-map .leaflet-container {
  height: 100%;
  width: 100%;
  z-index: 0;
}
.mandatory-nickname-gate {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 100% at 50% 45%, rgba(18, 8, 42, 0.97) 0%, rgba(5, 3, 15, 0.98) 100%);
  padding: 20px;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}
.mandatory-nickname-card {
  width: min(440px, calc(100vw - 32px));
  border-radius: 16px;
  padding: 24px;
  background: rgba(20, 20, 30, 0.92);
  border: 1px solid rgba(155, 89, 182, 0.45);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
  color: #eaf5ff;
  text-align: center;
}
.mandatory-nickname-card h2 {
  margin: 0 0 10px;
  font-size: 1.35rem;
}
.mandatory-nickname-lead {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(220, 234, 248, 0.88);
  text-align: left;
}
.mandatory-nickname-card .mandatory-nickname-field {
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(180, 220, 255, 0.22);
  background: rgba(10, 16, 28, 0.62);
  color: #eff7ff;
  padding: 12px;
  box-sizing: border-box;
  font-size: 15px;
  margin-bottom: 8px;
  outline: none;
}
.mandatory-nickname-card .mandatory-nickname-field:focus {
  border-color: rgba(155, 89, 182, 0.65);
}
.mandatory-nickname-error {
  color: #ff8a8a;
  font-size: 12px;
  margin: 0 0 10px;
  text-align: left;
  min-height: 1.2em;
}
#mandatory-nickname-submit {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  border: 1px solid rgba(155, 89, 182, 0.55);
  background: rgba(155, 89, 182, 0.35);
  color: #f8f0ff;
  margin-top: 4px;
}
#mandatory-nickname-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.mandatory-nickname-logout {
  margin: 16px 0 0;
  font-size: 12px;
}
#mandatory-nickname-logout {
  background: none;
  border: none;
  color: rgba(180, 210, 255, 0.65);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-size: 12px;
}

/*
 * Архитектор Снов — онбординг: шкала z-index (не опускать новые глобальные UI ниже без проверки).
 * ВАЖНО: слой онбординга должен быть НИЖЕ модалок (~2000), иначе журнал/профиль окажутся под затемнением и будет «чёрный экран».
 * Ориентиры:
 *   #graph / левая панель / .panel / #drp-counter-container — обычно ≤ ~1000–1900
 *   Слой онбординга — 1900–1960 (ниже модалок)
 *   Модалки (#dream-diary-modal, #profile-modal, …) — ~2000
 *   #dream-form.onboarding-spotlight-host — 1950 (панель поверх overlay онбординга, но ниже модалок)
 *   Шаг 1 на ПК: body.onboarding-field-hint-below-form — док #onboarding-field-hint 1940 (ниже формы 1950).
 *   Иначе док — 2105 (выше карточки сна 1972 и модалок ~2000).
 *   #graph.onboarding-graph-focus — 1960 (граф для клика по узлу на шаге 2; ниже модалок)
 *   Пока граф поднят, корень онбординга получает .onboarding-root--above-graph (~1988), иначе
 *   подсказки шага 2 оказываются ПОД canvas и пользователь «застревает» без текста.
 * При добавлении toast / контекстных меню — сверять с этими уровнями.
 */
#dream-form.onboarding-spotlight-host {
  z-index: 1950 !important;
}
.onboarding-root {
  position: fixed;
  inset: 0;
  z-index: 1900;
  pointer-events: none;
}
.onboarding-root.is-active.onboarding-root--above-graph {
  z-index: 1988;
}
.onboarding-root[hidden] {
  display: none !important;
}
.onboarding-root.is-active {
  pointer-events: none;
}
/* z-index 1901: затемнение (ниже модалок ~2000) */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1901;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.onboarding-overlay.onboarding-overlay--visible {
  opacity: 1;
}
.onboarding-overlay.onboarding-overlay--pass-through {
  pointer-events: none;
}
.onboarding-curtain {
  position: fixed;
  inset: 0;
  z-index: 1910;
  background: #000;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 2s ease;
}
.onboarding-curtain.onboarding-curtain--fade {
  opacity: 0;
  pointer-events: none;
}
/* Подсветка внутри поднятой панели (.onboarding-spotlight-host) */
.spotlight-active {
  position: relative;
  z-index: 3;
  box-shadow:
    0 0 22px rgba(0, 255, 255, 0.55),
    0 0 42px rgba(0, 180, 255, 0.35);
  border-radius: 16px;
}
.architect-dialog {
  position: fixed;
  z-index: 1925;
  max-width: min(420px, calc(100vw - 32px));
  padding: 18px 20px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(22, 26, 42, 0.72), rgba(14, 18, 32, 0.58));
  border: 1px solid rgba(130, 210, 255, 0.28);
  box-shadow:
    0 0 0 1px rgba(0, 255, 255, 0.08) inset,
    0 16px 44px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #eaf5ff;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  pointer-events: auto;
}
.architect-dialog--center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.architect-dialog--dock {
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
}
.architect-dialog__text {
  margin: 0 0 14px;
  min-height: 4.5em;
}
.onboarding-pulse-btn {
  margin-top: 4px;
  padding: 12px 22px;
  border-radius: 12px;
  border: 1px solid rgba(0, 255, 255, 0.45);
  background: rgba(0, 60, 90, 0.35);
  color: #cfffff;
  font-weight: bold;
  cursor: pointer;
  animation: onboardingNeonPulse 2.2s ease-in-out infinite;
}
.onboarding-pulse-btn:disabled {
  opacity: 0.45;
  cursor: wait;
  animation: none;
}
.onboarding-pulse-btn--ghost {
  animation: none;
  border-color: rgba(180, 200, 220, 0.35);
  background: rgba(20, 30, 50, 0.45);
  color: #b8cfe8;
  font-weight: 600;
}
.onboarding-pulse-btn--ghost:hover:not(:disabled) {
  border-color: rgba(0, 255, 255, 0.4);
  color: #d8ecff;
}
@keyframes onboardingNeonPulse {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.35);
  }
  50% {
    box-shadow:
      0 0 22px rgba(0, 255, 255, 0.65),
      0 0 38px rgba(120, 220, 255, 0.35);
  }
}
#dream-form.onboarding-controls-slide-off {
  transition:
    transform 0.65s ease,
    opacity 0.45s ease;
}
@media (max-width: 768px) {
  #dream-form.onboarding-controls-slide-off.open {
    transform: translateY(120%) !important;
  }
}
@media (min-width: 769px) {
  #dream-form.onboarding-controls-slide-off {
    transform: translate(-130%, -50%) !important;
  }
}
#graph.onboarding-graph-focus {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1960 !important;
}
.onboarding-step3-layer {
  position: fixed;
  inset: 0;
  z-index: 1935;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: min(12vh, 96px);
  gap: 14px;
}
.onboarding-ach-banner {
  pointer-events: none;
  padding: 12px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(40, 22, 62, 0.92), rgba(22, 30, 52, 0.88));
  border: 1px solid rgba(186, 104, 255, 0.4);
  color: #f3e8ff;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 15px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  animation: onboardingDropIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transform: translateY(-120%);
  opacity: 0;
}
.onboarding-drp-slot {
  pointer-events: none;
  font-family: Arial, sans-serif;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0.04em;
  color: #9bffcf;
  text-shadow: 0 0 18px rgba(0, 255, 200, 0.35);
}
.number-counter {
  font-variant-numeric: tabular-nums;
  animation: onboardingDigitGlow 0.2s ease alternate infinite;
}
@keyframes onboardingDigitGlow {
  from {
    opacity: 0.92;
  }
  to {
    opacity: 1;
  }
}
.onboarding-streak-row {
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #ffb86b;
  text-shadow: 0 0 12px rgba(255, 140, 66, 0.35);
}
.onboarding-step3-layer.onboarding-step3--hide-fake-drp .onboarding-drp-slot {
  display: none;
}
/* Награды первого сна — только в #drp-toast-stack; этот слой не показывает дубли */
#onboarding-step3-layer .onboarding-ach-banner,
#onboarding-step3-layer .onboarding-drp-slot,
#onboarding-step3-layer .onboarding-streak-row {
  display: none !important;
}
/* Карточка сна и счётчик DRP поверх затемнения онбординга, но ниже модалок (~2000) */
#dream-panel.panel.onboarding-panel-spotlight {
  z-index: 1972 !important;
}
#drp-counter-container.onboarding-drp-spotlight {
  z-index: 1978 !important;
}
/* Подсказки дока и toast поверх модалок журнала/профиля во время онбординга */
body.onboarding-active .hint.dreamroad-floating-toast,
body.onboarding-active .toast-architect-limit,
body.onboarding-active .soft-mod-toast {
  z-index: calc(var(--dr-toast-z-float) + 20) !important;
}
body.onboarding-active #drp-toast-stack {
  z-index: calc(var(--dr-toast-z-stack) + 20) !important;
}
body.onboarding-active #onboarding-field-hint,
body.onboarding-active #onboarding-cluster-hint,
body.onboarding-active #onboarding-final-card {
  z-index: 2105 !important;
}
@media (min-width: 769px) {
  /*
   * Только шаг 1: док ниже панели формы (1950).
   * Без класса — 2105 выше карточки сна (1972) и модалок журнала/профиля (~2000).
   */
  body.onboarding-active.onboarding-field-hint-below-form #onboarding-field-hint.architect-dialog--dock:not([hidden]) {
    z-index: 1940 !important;
  }
}
/* HUD с DRP и ежедневным визитом не показываем во время онбординга */
body.onboarding-active #drp-hud-cluster {
  display: none !important;
}
body.onboarding-active.onboarding-reward-tour-drp #drp-hud-cluster {
  display: flex !important;
}
body.onboarding-reward-tour-active #drp-toast-stack {
  z-index: calc(var(--dr-toast-z-stack) + 100) !important;
}
body.onboarding-reward-tour-active #achiev-toast-container {
  /* Выше #onboarding-reward-tour-root (3038), иначе тост оказывается под затемнением */
  z-index: 3060 !important;
}
.achiev-toast.achiev-toast--out {
  opacity: 0 !important;
  transform: none !important;
  transition: opacity 0.35s ease !important;
  animation: none !important;
}
#onboarding-reward-tour-root {
  position: fixed;
  inset: 0;
  z-index: 3038;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: env(safe-area-inset-top, 0px) 14px calc(18px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  pointer-events: none;
}
#onboarding-reward-tour-root:not([hidden]) {
  pointer-events: auto;
}
.onboarding-reward-tour-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 0;
}
.onboarding-reward-tour-panel {
  position: relative;
  z-index: 2;
  width: min(420px, 100%);
  max-height: min(46vh, 360px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(22, 26, 42, 0.94), rgba(14, 18, 32, 0.9));
  border: 1px solid rgba(130, 210, 255, 0.35);
  box-shadow:
    0 0 0 1px rgba(0, 255, 255, 0.06) inset,
    0 16px 48px rgba(0, 0, 0, 0.55);
  color: #eaf5ff;
  font-family: Arial, sans-serif;
  pointer-events: auto;
}
.onboarding-reward-tour-panel__text {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
}
.onboarding-reward-tour-panel .onboarding-pulse-btn {
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
}
#drp-counter-container.onboarding-drp-tour-highlight {
  outline: 2px solid rgba(0, 255, 200, 0.85);
  outline-offset: 3px;
  border-radius: 22px;
  box-shadow:
    0 0 0 4px rgba(0, 255, 200, 0.2),
    0 0 28px rgba(0, 255, 200, 0.45) !important;
  z-index: 3205 !important;
  animation: onboardingDrpCounterGlow 1.8s ease-in-out infinite;
}
#drp-counter-container.onboarding-drp-tour-highlight::after {
  content: "Лавка Архитектора";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #0a1210;
  background: linear-gradient(135deg, #7dffb8, #4ae8c8);
  border: 1px solid rgba(0, 255, 200, 0.65);
  box-shadow: 0 4px 18px rgba(0, 255, 200, 0.35);
  white-space: nowrap;
  pointer-events: none;
  animation: onboardingDrpLavkaBadgePulse 1.4s ease-in-out infinite;
}
@keyframes onboardingDrpLavkaBadgePulse {
  0%,
  100% {
    opacity: 0.92;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.06);
  }
}
@keyframes onboardingDrpCounterGlow {
  0%,
  100% {
    box-shadow:
      0 0 0 4px rgba(0, 255, 200, 0.18),
      0 0 22px rgba(0, 255, 200, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(0, 255, 200, 0.28),
      0 0 36px rgba(0, 255, 200, 0.55);
  }
}
/* Подсказки Архитектора над модалкой профиля (~2000) */
body.onboarding-active.onboarding-profile-hints-front #onboarding-root.is-active {
  z-index: 2060 !important;
}
/* Подсказки онбординга над модалкой журнала (~2000) */
body.onboarding-active.onboarding-diary-hints-front #onboarding-root.is-active {
  z-index: 2105 !important;
}
.onboarding-hint-cluster {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 1938;
  max-width: min(520px, calc(100vw - 24px));
  text-align: center;
  pointer-events: none;
}
.onboarding-hint-cluster .onboarding-pulse-btn {
  pointer-events: auto;
}
.diary-tab.onboarding-diary-tab-pulse,
.diary-subtab.onboarding-diary-tab-pulse {
  outline: 2px solid rgba(0, 255, 255, 0.85);
  outline-offset: 2px;
  border-radius: 8px;
  animation: onboardingTabPulse 1.1s ease-in-out infinite;
}
@keyframes onboardingTabPulse {
  50% {
    outline-color: rgba(180, 255, 255, 0.5);
  }
}
.onboarding-welcome-card {
  position: fixed;
  z-index: 2050;
  top: 50%;
  left: 50%;
  width: min(420px, calc(100vw - 32px));
  padding: 30px 26px 24px;
  border-radius: 22px;
  background: radial-gradient(
      120% 120% at 0% 0%,
      rgba(186, 104, 255, 0.22),
      rgba(8, 12, 28, 0.94) 60%
    ),
    linear-gradient(155deg, rgba(28, 14, 56, 0.96), rgba(10, 18, 40, 0.96));
  border: 1px solid rgba(186, 104, 255, 0.45);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(186, 104, 255, 0.18) inset,
    0 0 60px rgba(186, 104, 255, 0.18);
  color: #f3e8ff;
  text-align: center;
  font-family: Arial, sans-serif;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translate(-50%, -50%) scale(0.92);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
  pointer-events: auto;
}
.onboarding-welcome-card:not([hidden]) {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.onboarding-welcome-card__halo {
  position: absolute;
  inset: -40%;
  background: conic-gradient(
    from 0deg,
    rgba(186, 104, 255, 0.0),
    rgba(124, 200, 255, 0.18),
    rgba(155, 255, 207, 0.18),
    rgba(186, 104, 255, 0.18),
    rgba(186, 104, 255, 0.0)
  );
  animation: onboardingWelcomeHaloSpin 12s linear infinite;
  opacity: 0.55;
  pointer-events: none;
}
@keyframes onboardingWelcomeHaloSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.onboarding-welcome-card__title,
.onboarding-welcome-card__subtitle,
.onboarding-welcome-card__rewards,
.onboarding-welcome-card__hint,
.onboarding-welcome-card #onboarding-welcome-continue-btn {
  position: relative;
  z-index: 1;
}
.onboarding-welcome-card #onboarding-welcome-continue-btn {
  pointer-events: auto;
}
.onboarding-welcome-card__title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.01em;
  background: linear-gradient(90deg, #d6b4ff, #9bffcf, #ffd57c, #d6b4ff);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: onboardingWelcomeTitleShine 6s linear infinite;
}
@keyframes onboardingWelcomeTitleShine {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: 200% 0%;
  }
}
.onboarding-welcome-card__subtitle {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.45;
  color: #c8c1e0;
}
.onboarding-welcome-card__rewards {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-bottom: 16px;
}
.onboarding-welcome-card__reward {
  flex: 1;
  padding: 14px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.onboarding-welcome-card__reward--drp {
  border-color: rgba(155, 255, 207, 0.35);
  box-shadow: 0 0 24px rgba(0, 255, 180, 0.12) inset;
}
.onboarding-welcome-card__reward--exp {
  border-color: rgba(255, 213, 124, 0.35);
  box-shadow: 0 0 24px rgba(255, 188, 80, 0.12) inset;
}
.onboarding-welcome-card__reward-amount {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.onboarding-welcome-card__reward--drp .onboarding-welcome-card__reward-amount {
  color: #9bffcf;
  text-shadow: 0 0 14px rgba(0, 255, 180, 0.4);
}
.onboarding-welcome-card__reward--exp .onboarding-welcome-card__reward-amount {
  color: #ffd57c;
  text-shadow: 0 0 14px rgba(255, 188, 80, 0.4);
}
.onboarding-welcome-card__reward-label {
  margin-top: 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #b9b3d4;
}
.onboarding-welcome-card__hint {
  margin: 0 0 16px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #a89fc7;
}

@keyframes onboardingDropIn {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Full-screen boot overlay (id dream-loader; class neuro-loader — см. #neuro-loader в ТЗ). */
#dream-loader.neuro-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 24px;
  box-sizing: border-box;
  background: radial-gradient(120% 100% at 50% 45%, #12082a 0%, #05030f 42%, #020208 100%);
  font-family: Arial, sans-serif;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.8s ease, visibility 0s linear;
}
#dream-loader.neuro-loader .dream-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: min(320px, 88vw);
}
#dream-loader.neuro-loader .dream-loader-title {
  margin: 0;
  font-size: clamp(1.75rem, 5vw, 2.35rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #eaf5ff;
  text-align: center;
  animation: dreamLoaderTitleNeon 2.4s ease-in-out infinite;
}
@keyframes dreamLoaderTitleNeon {
  0%,
  100% {
    text-shadow:
      0 0 8px rgba(0, 255, 255, 0.45),
      0 0 22px rgba(155, 89, 182, 0.35),
      0 0 36px rgba(0, 220, 255, 0.2);
  }
  50% {
    text-shadow:
      0 0 14px rgba(155, 89, 182, 0.65),
      0 0 28px rgba(0, 255, 255, 0.5),
      0 0 48px rgba(180, 120, 255, 0.35);
  }
}
#dream-loader.neuro-loader .dream-loader-bar {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(20, 28, 42, 0.85);
  border: 1px solid rgba(130, 190, 255, 0.25);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.45);
}
#dream-loader.neuro-loader .dream-loader-bar-glint {
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 255, 255, 0.15),
    rgba(200, 160, 255, 0.85),
    rgba(0, 255, 255, 0.35),
    transparent
  );
  animation: dreamLoaderBarGlint 1.35s ease-in-out infinite;
}
@keyframes dreamLoaderBarGlint {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(350%);
  }
}
#dream-loader.neuro-loader .koan-text {
  margin: 0;
  padding: 0 8px;
  max-width: min(420px, 92vw);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.95rem, 2.6vw, 1.15rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.04em;
  text-align: center;
  color: rgba(220, 228, 240, 0.72);
  text-shadow: 0 0 18px rgba(155, 89, 182, 0.18);
}
#dream-loader.neuro-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}

/* ─── Cosmic empty states (lists / modals; no absolute overlay) ─── */
.empty-state-cosmic {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.25rem;
  min-height: 10rem;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
}

.empty-state-cosmic::before {
  content: "";
  position: absolute;
  inset: 12% 18%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(120, 90, 220, 0.12) 0%,
    rgba(40, 120, 200, 0.06) 45%,
    transparent 70%
  );
  filter: blur(18px);
  pointer-events: none;
  z-index: 0;
}

.empty-state-cosmic__icon {
  position: relative;
  z-index: 1;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 1rem;
  color: rgba(180, 210, 255, 0.45);
  opacity: 0.42;
}

.empty-state-cosmic__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.empty-state-cosmic__title {
  position: relative;
  z-index: 1;
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(235, 245, 255, 0.88);
  text-shadow: 0 0 24px rgba(140, 180, 255, 0.25);
}

.empty-state-cosmic__text {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 22rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(200, 220, 245, 0.55);
}

.empty-state-cosmic--compact {
  min-height: 6rem;
  padding: 1.25rem 1rem;
}

.empty-state-cosmic--compact .empty-state-cosmic__icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.65rem;
}

#inventory-grid > .empty-state-cosmic,
#achievements-grid > .empty-state-cosmic,
.lavka-shop-catalog-grid > .empty-state-cosmic,
#lavka-journal-list > .empty-state-cosmic {
  grid-column: 1 / -1;
}

#diary-oracle-scope-list > .empty-state-cosmic,
#diary-oracle-history > .empty-state-cosmic,
#diary-pane-visualizations .empty-state-cosmic,
.profile-notifications-stack > .empty-state-cosmic,
#friends-list-container > .empty-state-cosmic,
#diary-feed > .empty-state-cosmic,
#diary-registry-content > .empty-state-cosmic,
#diary-top-list > .empty-state-cosmic {
  margin: 0;
}

.diary-oracle-scope-cta {
  text-align: center;
  margin-top: -0.75rem;
  margin-bottom: 0.5rem;
}