:root {
  color-scheme: dark;
  --bg: #080d1c;
  --bg-2: #0d1428;
  --card: rgba(255, 255, 255, .085);
  --card-strong: rgba(255, 255, 255, .13);
  --text: #f4f7ff;
  --muted: rgba(244, 247, 255, .68);
  --line: rgba(255, 255, 255, .14);
  --line-strong: rgba(103, 232, 249, .38);
  --cyan: #67e8f9;
  --blue: #6366f1;
  --violet: #8b5cf6;
  --green: #34d399;
  --warn: #fbbf24;
  --danger: #fb7185;
  --radius: 28px;
  --radius-lg: 36px;
  --shadow: 0 28px 90px rgba(0, 0, 0, .38);
  --font: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 0; scroll-behavior: smooth; }
body {
  min-width: 0;
  margin: 0;
  overflow-x: hidden;
  background: radial-gradient(circle at 50% -10%, rgba(255, 255, 255, .12), transparent 30%), var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
button, input, textarea, select { font: inherit; }
button, .button, .btn, .btn-primary, .btn-secondary, .nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  color: #07111f;
  background: #fff;
  font-weight: 730;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease;
  box-shadow: 0 18px 40px rgba(255, 255, 255, .12);
}
button:hover, .button:hover, .btn:hover, .btn-primary:hover, .btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 22px 54px rgba(6, 182, 212, .22); }
button:active, .button:active, .btn:active, .btn-primary:active, .btn-secondary:active { transform: translateY(1px) scale(.985); }
button[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.button.primary, .btn, .btn-primary, button[type="submit"] { background: #fff; color: #07111f; }
.button.secondary, .btn-secondary, .nav-link { background: rgba(255,255,255,.1); color: var(--text); border: 1px solid var(--line); box-shadow: none; backdrop-filter: blur(18px); }
.btn-small { min-height: 38px; padding: 10px 13px; font-size: 13px; }
:focus-visible { outline: 3px solid rgba(103, 232, 249, .95); outline-offset: 4px; }

.site-mesh {
  position: fixed;
  inset: -170px -24% auto;
  height: 580px;
  pointer-events: none;
  background: conic-gradient(from 210deg, #8b5cf6, #06b6d4, #22c55e, #f59e0b, #ec4899, #8b5cf6);
  filter: blur(78px);
  opacity: .54;
  transform: rotate(-8deg) translate3d(0,0,0);
  animation: mesh-drift 18s ease-in-out infinite alternate;
  z-index: 0;
}
.site-shell { position: relative; z-index: 2; width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 24px 0 58px; }
.content { display: grid; gap: 22px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 4px 0 26px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 820; letter-spacing: -.03em; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(135deg, var(--violet), #06b6d4 52%, var(--green)); box-shadow: 0 18px 42px rgba(6,182,212,.28); }
.brand-logo { display: none; }
.nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.nav-telegram { color: #bff7ff; }
.nav-dropdown { position: relative; display: inline-flex; }
.nav-dropdown__summary { list-style: none; user-select: none; }
.nav-dropdown__summary::-webkit-details-marker { display: none; }
.nav-dropdown__menu { position: absolute; right: 0; top: calc(100% + 12px); min-width: 230px; display: grid; gap: 5px; padding: 10px; border: 1px solid var(--line); border-radius: 22px; background: rgba(8,13,31,.94); box-shadow: var(--shadow); backdrop-filter: blur(24px); z-index: 30; }
.nav-dropdown__menu a, .nav-dropdown__menu button { width: 100%; justify-content: flex-start; min-height: 40px; color: var(--text); background: transparent; border: 0; box-shadow: none; border-radius: 14px; padding: 10px 12px; }
.nav-dropdown__menu a:hover, .nav-dropdown__menu button:hover { background: rgba(255,255,255,.1); }

.hero, .card, .price-card, .dashboard-card, .flow-step {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.072));
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px);
  padding: clamp(22px, 4vw, 34px);
  transition: transform .24s ease, border-color .24s ease, background .24s ease, box-shadow .24s ease;
}
.card:hover, .price-card:hover, .dashboard-card:hover, .flow-step:hover { transform: translateY(-4px); border-color: var(--line-strong); background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.09)); }
.hero { overflow: hidden; }
.hero-grid, .auth-layout, .cabinet-grid, .payment-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: clamp(22px, 5vw, 54px); align-items: center; }
.hero h1, h1, h2 { margin: 0 0 16px; font-weight: 760; letter-spacing: -.045em; line-height: 1.02; text-wrap: balance; }
.hero h1 { font-size: clamp(44px, 7.8vw, 92px); }
h1 { font-size: clamp(38px, 5.8vw, 72px); }
h2 { font-size: clamp(30px, 4vw, 52px); }
h3 { margin: 0 0 12px; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.14; letter-spacing: -.035em; }
h4 { margin: 0 0 8px; font-size: 20px; letter-spacing: -.025em; }
p { margin: 0 0 14px; }
.lead, .lead-text, .muted { color: var(--muted); }
.lead { max-width: 650px; font-size: clamp(18px, 2vw, 22px); line-height: 1.48; }
.eyebrow, .badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; color: #a5f3fc; font-size: 12px; font-weight: 820; letter-spacing: .08em; text-transform: uppercase; }
.badge { border: 1px solid rgba(103,232,249,.24); border-radius: 999px; padding: 7px 10px; background: rgba(103,232,249,.08); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 18px; }
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.section { display: grid; gap: 20px; }

.dashboard-preview { position: relative; animation: dashboard-float 7s ease-in-out infinite; }
.dashboard-top { display:flex; gap:8px; padding: 0 0 16px; }
.dot { width: 11px; height: 11px; border-radius:999px; background:#fb7185; }
.dot:nth-child(2){background:#fbbf24}.dot:nth-child(3){background:#34d399}
.dashboard-tabs { display:grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; padding: 6px; border-radius: 18px; background: rgba(5,10,25,.54); border: 1px solid rgba(255,255,255,.09); }
.dashboard-tab { min-height: 38px; padding: 0 10px; color: rgba(244,247,255,.72); background: transparent; border: 0; box-shadow: none; font-size: 13px; }
.dashboard-tab.is-active { color: #07111f; background: #fff; box-shadow: 0 10px 30px rgba(255,255,255,.13); }
.dashboard-body { display:grid; grid-template-columns: .75fr 1.25fr; gap: 14px; }
.dashboard-card { border-radius: 24px; padding: 18px; background: rgba(8,13,31,.76); box-shadow: none; }
.dashboard-card strong { display:block; font-size: 30px; letter-spacing: -.04em; }
.metric { margin-top: 14px; padding: 16px; border-radius: 20px; background: linear-gradient(135deg, rgba(139,92,246,.76), rgba(6,182,212,.54)); }
.metric-value, .stat-value { display:block; font-size: clamp(28px, 4vw, 42px); font-weight: 780; letter-spacing: -.045em; }
.panel-head, .header-card, .tariff-top, .cta-top, .notifications-page-head, .detail-row { display:flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.live-pill, .status-pill { display: inline-flex; align-items:center; border-radius:999px; padding: 7px 11px; font-size: 12px; font-weight: 820; white-space: nowrap; }
.live-pill, .status-ok { color: #86efac; background: rgba(52,211,153,.14); }
.status-off, .notice-error { color: #fecdd3; background: rgba(251,113,133,.13); }
.bars { height: 188px; display:flex; align-items:end; gap:10px; padding-top:18px; }
.bars i { flex:1; height: var(--bar, 60%); min-height: 30px; border-radius: 10px 10px 0 0; background: linear-gradient(180deg,#67e8f9,#6366f1); transform-origin: bottom; animation: bar-rise .9s cubic-bezier(.2,.8,.2,1) both; transition: height .55s cubic-bezier(.2,.8,.2,1), filter .24s ease, transform .24s ease; }
.bars i:nth-child(2){animation-delay:.06s}.bars i:nth-child(3){animation-delay:.12s}.bars i:nth-child(4){animation-delay:.18s}.bars i:nth-child(5){animation-delay:.24s}.bars i:nth-child(6){animation-delay:.3s}

.price-card, .tariff-card, .cta-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 16px; }
.price-card::before, .tariff-card::before, .cta-card::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 20% 0%, rgba(103,232,249,.18), transparent 38%); opacity:0; transition: opacity .24s ease; }
.price-card:hover::before, .tariff-card:hover::before, .cta-card:hover::before { opacity:1; }
.price-card > *, .tariff-card > *, .cta-card > * { position: relative; }
.tariff-highlight, .is-featured, .cta-card-highlight { border-color: rgba(52,211,153,.42); box-shadow: 0 22px 80px rgba(34,197,94,.13); }
.price { font-size: clamp(32px, 4vw, 46px); font-weight: 780; letter-spacing: -.055em; white-space: nowrap; }
.tariff-list, .steps { margin: 0; padding-left: 20px; color: rgba(244,247,255,.78); }
.tariff-list li, .steps li { margin: 0 0 10px; }
.cta-grid { display: grid; gap: 14px; margin-top: 16px; }
.cta-meta { color: #a5f3fc; font-weight: 760; }

.notice { min-width:0; border-radius: 22px; padding: 16px 18px; margin: 16px 0 0; border: 1px solid var(--line); background: rgba(255,255,255,.08); color: var(--text); }
.notice-soft { background: rgba(103,232,249,.08); }
.notice-info { background: rgba(99,102,241,.13); color: #c7d2fe; }
.notice-success { background: rgba(52,211,153,.13); color: #bbf7d0; }
.notice-email-warning, .notice-spam-warning { background: rgba(251,191,36,.12); color: #fde68a; }
.notice-close { min-height: 32px; width: 32px; padding: 0; float: right; background: transparent; color: var(--text); box-shadow: none; }
.error { margin: 0 0 14px; color: #fecdd3; background: rgba(251,113,133,.13); border: 1px solid rgba(251,113,133,.28); padding: 12px 14px; border-radius: 16px; }

form { min-width: 0; }
label { display:block; margin: 12px 0 8px; color: rgba(244,247,255,.82); font-weight: 720; font-size: 14px; }
input, textarea, select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  padding: 13px 15px;
  margin: 0 0 12px;
  color: var(--text);
  background: rgba(5,10,25,.62);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
textarea { min-height: 140px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: rgba(103,232,249,.62); box-shadow: 0 0 0 4px rgba(103,232,249,.1); background: rgba(5,10,25,.78); }
input::placeholder, textarea::placeholder { color: rgba(244,247,255,.42); }
.auth-card { max-width: 560px; margin: 0 auto; width: 100%; }
.auth-side { min-height: 100%; display: grid; align-content: center; }

.details-list { display: grid; gap: 12px; }
.detail-row { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.detail-row:last-child { border-bottom: 0; padding-bottom: 0; }
.detail-row strong { text-align: right; overflow-wrap: anywhere; }
.detail-row-stack { align-items: flex-start; }
.stat-card small { display:block; color: var(--muted); margin-bottom: 8px; }

.access-key-panel, .access-key-preview, .access-key-value, pre.key, .key { min-width: 0; max-width: 100%; }
.access-key-panel { width: 100%; overflow: hidden; }
.access-key-preview, .access-key-value, pre.key, .key {
  display: block;
  width: 100%;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  padding: 13px 15px;
  margin: 10px 0 0;
  color: var(--text);
  background: rgba(5,10,25,.62);
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
}
.access-key-preview { white-space: normal; word-break: break-word; color: var(--muted); }
.access-key-value.is-hidden, .access-key-preview.is-hidden { display: none !important; }
.access-key-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.access-key-dots { letter-spacing: 2px; }
.access-key-label { margin-left: 8px; font-family: var(--font); font-size: 13px; color: var(--muted); }

.payment-summary { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin: 18px 0; }
.payment-summary > div { border:1px solid var(--line); border-radius: 20px; padding: 16px; background: rgba(5,10,25,.44); }
.payment-summary span { display:block; color: var(--muted); font-size: 13px; }
.payment-summary strong { font-size: 24px; }
.notification-list-form { margin: 0; }
.notifications-list { display: grid; gap: 12px; }
.notification-list-button { width: 100%; justify-content: space-between; min-height: 78px; border-radius: 22px; color: var(--text); background: rgba(255,255,255,.075); border: 1px solid var(--line); box-shadow: none; }
.notification-list-button-unread { border-color: rgba(103,232,249,.45); background: rgba(103,232,249,.09); }
.notification-list-main { display: grid; gap: 6px; text-align: left; }
.notification-date { color: var(--muted); font-size: 13px; }
.notification-dot { width: 8px; height: 8px; display:inline-block; border-radius:999px; background: var(--cyan); margin-right: 6px; }
.notification-new { margin-left: 8px; color: #a5f3fc; font-size: 12px; }
.notification-detail-message { padding: 18px; border: 1px solid var(--line); border-radius: 22px; background: rgba(5,10,25,.44); white-space: pre-wrap; }
.legal-card { max-width: 900px; margin: 0 auto; }
.legal-card p, .legal-card li { color: rgba(244,247,255,.76); }
.site-footer { position: relative; z-index: 2; width: min(1180px, calc(100% - 40px)); margin: 0 auto 42px; color: var(--muted); }
.footer-links { display:flex; flex-wrap:wrap; gap: 14px; margin-bottom: 8px; }
.footer-links a { color: rgba(244,247,255,.78); border-bottom: 1px solid rgba(244,247,255,.18); }
.telegram-floating-button { position: fixed; right: 22px; bottom: 22px; z-index: 60; display:inline-flex; gap: 8px; align-items:center; padding: 12px 16px; border-radius: 999px; color:#fff; background: linear-gradient(135deg,#2ea8e6,#168acd); box-shadow: 0 16px 40px rgba(22,138,205,.28); font-weight: 760; }
.bottom-nav { display:none; }
.confirm-modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:120; padding:20px; }
.confirm-modal.is-open { display:flex; }
.confirm-modal__backdrop { position:absolute; inset:0; background:rgba(0,0,0,.58); backdrop-filter:blur(4px); }
.confirm-modal__dialog { position:relative; width:min(100%,460px); border:1px solid var(--line); border-radius:28px; padding:24px; background:rgba(8,13,31,.96); box-shadow:var(--shadow); }
.confirm-modal__close { position:absolute; top:12px; right:12px; min-height:36px; width:36px; padding:0; background:rgba(255,255,255,.1); color:#fff; box-shadow:none; }
body.modal-open { overflow:hidden; }

.js-ready .reveal, .js-ready .card, .js-ready .hero, .js-ready .price-card, .js-ready .flow-step, .js-ready .dashboard-card { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1), border-color .24s ease, background .24s ease, box-shadow .24s ease; }
.js-ready .is-visible { opacity: 1; transform: translateY(0); }

@keyframes mesh-drift { from { transform: rotate(-8deg) translate3d(-18px,-8px,0) scale(1); } to { transform: rotate(-4deg) translate3d(18px,18px,0) scale(1.05); } }
@keyframes dashboard-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes bar-rise { from { transform: scaleY(.2); opacity: .4; } to { transform: scaleY(1); opacity: 1; } }

@media (max-width: 1024px) {
  .hero-grid, .auth-layout, .cabinet-grid, .payment-layout { grid-template-columns: 1fr; }
  .dashboard-body { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .site-shell, .site-footer { width: min(100% - 28px, 1180px); }
  .nav { display:none; }
  body { padding-bottom: 88px; }
  .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display:grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(8,13,31,.94); backdrop-filter: blur(22px); }
  .bottom-nav a { min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border-radius:16px; padding: 8px 3px; color: rgba(244,247,255,.78); }
  .bottom-nav span { font-size: 18px; line-height: 1; }
  .bottom-nav small { font-size: 11px; white-space: nowrap; }
  .bottom-nav b { position:absolute; margin-left: 34px; margin-top: -28px; min-width:18px; height:18px; display:grid; place-items:center; border-radius:999px; background: var(--danger); color:#fff; font-size:11px; }
  .grid-2, .grid-3, .payment-summary { grid-template-columns: 1fr; }
  .panel-head, .header-card, .tariff-top, .cta-top, .notifications-page-head, .detail-row { flex-direction: column; align-items: flex-start; }
  .detail-row strong { text-align: left; }
  .actions .button, .actions .btn, .actions .btn-primary, .actions .btn-secondary, .actions button, .actions a { width: 100%; }
  .telegram-floating-button { right: 14px; bottom: 92px; padding: 11px 13px; }
}
@media (max-width: 430px) {
  .site-shell, .site-footer { width: min(100% - 24px, 1180px); }
  .hero, .card, .price-card, .dashboard-card, .flow-step { border-radius: 24px; padding: 18px; }
  .hero h1 { font-size: clamp(40px, 13vw, 58px); }
  .dashboard-tabs { grid-template-columns: 1fr; }
  .bars { height: 132px; gap: 7px; }
  .brand-text { font-size: 16px; }
  .access-key-actions { display:grid; grid-template-columns: 1fr; }
  .access-key-actions .btn-small { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js-ready .reveal, .js-ready .card, .js-ready .hero, .js-ready .price-card, .js-ready .flow-step, .js-ready .dashboard-card { opacity: 1; transform: none; }
}


/* Brand polish: minimal ladybug mark + clean mobile nav */
.brand-link {
  position: relative;
}

.brand-ladybug,
.brand-note__mark {
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
  width: 42px;
  height: 42px;
  border-radius: 54% 46% 50% 50% / 58% 58% 42% 42%;
  background:
    radial-gradient(circle at 33% 36%, #111827 0 3px, transparent 3.5px),
    radial-gradient(circle at 64% 35%, #111827 0 3px, transparent 3.5px),
    radial-gradient(circle at 38% 65%, #111827 0 2.6px, transparent 3px),
    radial-gradient(circle at 62% 66%, #111827 0 2.6px, transparent 3px),
    linear-gradient(90deg, transparent 0 calc(50% - 1px), rgba(17,24,39,.72) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(135deg, #ff6b72 0%, #ef233c 48%, #be123c 100%);
  box-shadow:
    0 18px 42px rgba(239,35,60,.24),
    inset 0 1px 0 rgba(255,255,255,.38);
  color: transparent;
  overflow: visible;
}

.brand-ladybug::before,
.brand-note__mark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 18px;
  height: 13px;
  transform: translateX(-50%);
  border-radius: 999px 999px 8px 8px;
  background: #111827;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.brand-ladybug::after,
.brand-note__mark::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 7px;
  width: 10px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.26);
  transform: rotate(-28deg);
}

.brand-note {
  width: fit-content;
  max-width: 100%;
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px 9px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(244,247,255,.84);
  box-shadow: 0 18px 48px rgba(0,0,0,.18);
  backdrop-filter: blur(18px);
}

.brand-note__mark {
  width: 30px;
  height: 30px;
  box-shadow:
    0 12px 30px rgba(239,35,60,.20),
    inset 0 1px 0 rgba(255,255,255,.36);
}

.brand-note__mark::before {
  top: -3px;
  width: 13px;
  height: 9px;
}

.brand-note__mark::after {
  left: 7px;
  top: 5px;
  width: 8px;
  height: 5px;
}

.brand-note span:last-child {
  font-size: 14px;
  font-weight: 720;
  letter-spacing: -.01em;
}

@media (max-width: 700px) {
  .brand-ladybug {
    width: 36px;
    height: 36px;
  }

  .brand-ladybug::before {
    width: 15px;
    height: 11px;
  }

  .brand-note {
    margin-top: 18px;
    padding: 8px 13px 8px 8px;
    gap: 10px;
  }

  .brand-note span:last-child {
    font-size: 13px;
    line-height: 1.25;
  }

  .bottom-nav {
    gap: 8px;
  }

  .bottom-nav a,
  .bottom-nav-logout {
    min-height: 48px;
    padding: 10px 5px;
  }

  .bottom-nav span {
    display: none !important;
  }

  .bottom-nav small {
    font-size: 12px;
    font-weight: 760;
    letter-spacing: -.01em;
  }
}

@media (max-width: 390px) {
  .brand-ladybug {
    width: 32px;
    height: 32px;
  }

  .brand-text {
    font-size: 15px;
  }

  .brand-note {
    border-radius: 20px;
  }

  .bottom-nav small {
    font-size: 11px;
  }
}


/* Polish v2: better ladybug + clean mobile icons */
.brand-ladybug,
.brand-note__mark {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 40px;
  height: 30px;
  border-radius: 58% 42% 52% 48% / 68% 62% 38% 32%;
  transform: rotate(-16deg);
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.52) 0 10%, transparent 11%),
    radial-gradient(circle at 36% 36%, #2a0a12 0 6%, transparent 7%),
    radial-gradient(circle at 57% 29%, #2a0a12 0 6%, transparent 7%),
    radial-gradient(circle at 42% 66%, #2a0a12 0 5%, transparent 6%),
    radial-gradient(circle at 68% 58%, #2a0a12 0 5%, transparent 6%),
    linear-gradient(115deg, #ff9aa5 0%, #ff5b66 18%, #ef233c 46%, #c1123a 75%, #7f1734 100%);
  box-shadow:
    inset -10px -8px 18px rgba(55, 8, 18, .36),
    inset 7px 6px 12px rgba(255,255,255,.18),
    0 14px 34px rgba(239,35,60,.22);
  overflow: visible;
}

.brand-ladybug::before,
.brand-note__mark::before {
  content: "";
  position: absolute;
  left: 44%;
  top: -2px;
  width: 13px;
  height: 11px;
  transform: translateX(-50%) rotate(8deg);
  border-radius: 60% 55% 45% 50%;
  background: linear-gradient(180deg, #1f2937 0%, #0f172a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.brand-ladybug::after,
.brand-note__mark::after {
  content: "";
  position: absolute;
  inset: 4px 17px 4px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(29,19,22,.18) 0%, rgba(18,18,18,.72) 100%);
  opacity: .88;
}

.brand-note__mark {
  width: 28px;
  height: 22px;
  box-shadow:
    inset -7px -6px 12px rgba(55, 8, 18, .30),
    inset 5px 4px 10px rgba(255,255,255,.16),
    0 10px 24px rgba(239,35,60,.18);
}

.brand-note__mark::before {
  width: 10px;
  height: 8px;
  top: -2px;
}

.brand-note__mark::after {
  inset: 3px 12px 3px 11px;
}

@media (max-width: 700px) {
  .brand-ladybug {
    width: 35px;
    height: 26px;
  }

  .brand-note__mark {
    width: 24px;
    height: 19px;
  }

  .bottom-nav a,
  .bottom-nav-logout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 52px;
    padding: 8px 4px;
  }

  .bottom-nav span {
    display: none !important;
  }

  .bottom-nav a::before {
    content: "";
    width: 18px;
    height: 18px;
    display: block;
    opacity: .92;
    background: currentColor;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
  }

  .bottom-nav a[href="/"]::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3l8 6.5V21h-5v-6H9v6H4V9.5L12 3z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3l8 6.5V21h-5v-6H9v6H4V9.5L12 3z'/></svg>");
  }

  .bottom-nav a[href="/guide"]::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M6 4h9a3 3 0 0 1 3 3v13H9a3 3 0 0 0-3 3V4zm3 2v10h7V7a1 1 0 0 0-1-1H9z'/><path fill='black' d='M6 20a1 1 0 0 1 1-1h11v2H7a3 3 0 0 0-3 3v-2a2 2 0 0 1 2-2z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M6 4h9a3 3 0 0 1 3 3v13H9a3 3 0 0 0-3 3V4zm3 2v10h7V7a1 1 0 0 0-1-1H9z'/><path fill='black' d='M6 20a1 1 0 0 1 1-1h11v2H7a3 3 0 0 0-3 3v-2a2 2 0 0 1 2-2z'/></svg>");
  }

  .bottom-nav a[href="/help"]::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 17a1.3 1.3 0 1 1 1.3-1.3A1.3 1.3 0 0 1 12 19zm1.5-5.7c-.9.5-1.2.9-1.2 1.7h-2c0-1.7.7-2.6 2.1-3.4 1-.6 1.5-1 1.5-1.8a2 2 0 0 0-4 0H8a4 4 0 0 1 8 0c0 1.8-1.2 2.7-2.5 3.5z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 17a1.3 1.3 0 1 1 1.3-1.3A1.3 1.3 0 0 1 12 19zm1.5-5.7c-.9.5-1.2.9-1.2 1.7h-2c0-1.7.7-2.6 2.1-3.4 1-.6 1.5-1 1.5-1.8a2 2 0 0 0-4 0H8a4 4 0 0 1 8 0c0 1.8-1.2 2.7-2.5 3.5z'/></svg>");
  }

  .bottom-nav a[href="/cabinet"]::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 4h7v7H4zm9 0h7v5h-7zM4 13h5v7H4zm7 0h9v7h-9z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 4h7v7H4zm9 0h7v5h-7zM4 13h5v7H4zm7 0h9v7h-9z'/></svg>");
  }

  .bottom-nav a[href="/cabinet/notifications"]::before,
  .bottom-nav-notifications::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3a5 5 0 0 1 5 5v2.2c0 1 .4 2 1.1 2.8l1.2 1.4V16H4.7v-1.6l1.2-1.4c.7-.8 1.1-1.8 1.1-2.8V8a5 5 0 0 1 5-5zm0 18a2.7 2.7 0 0 0 2.5-2h-5A2.7 2.7 0 0 0 12 21z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3a5 5 0 0 1 5 5v2.2c0 1 .4 2 1.1 2.8l1.2 1.4V16H4.7v-1.6l1.2-1.4c.7-.8 1.1-1.8 1.1-2.8V8a5 5 0 0 1 5-5zm0 18a2.7 2.7 0 0 0 2.5-2h-5A2.7 2.7 0 0 0 12 21z'/></svg>");
  }

  .bottom-nav a[href="/login"]::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M10 4h8v16h-8v-2h6V6h-6V4z'/><path fill='black' d='M13 12l-4-4v3H4v2h5v3l4-4z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M10 4h8v16h-8v-2h6V6h-6V4z'/><path fill='black' d='M13 12l-4-4v3H4v2h5v3l4-4z'/></svg>");
  }

  .bottom-nav a[href="/register"]::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0 2c-3.3 0-6 1.6-6 3.5V20h12v-2.5c0-1.9-2.7-3.5-6-3.5z'/><path fill='black' d='M19 7V4h-2v3h-3v2h3v3h2V9h3V7z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0 2c-3.3 0-6 1.6-6 3.5V20h12v-2.5c0-1.9-2.7-3.5-6-3.5z'/><path fill='black' d='M19 7V4h-2v3h-3v2h3v3h2V9h3V7z'/></svg>");
  }

  .bottom-nav small {
    font-size: 11px;
    font-weight: 760;
    letter-spacing: -.01em;
    line-height: 1.1;
  }
}

@media (max-width: 390px) {
  .bottom-nav a::before {
    width: 17px;
    height: 17px;
  }

  .bottom-nav small {
    font-size: 10px;
  }
}


/* Brand cleanup: remove ladybug look, keep clean abstract brand mark */
.brand-ladybug,
.brand-note__mark {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 30%, rgba(255,255,255,.60) 0 10%, transparent 11%),
    radial-gradient(circle at 68% 72%, rgba(59,130,246,.30) 0 18%, transparent 19%),
    linear-gradient(135deg, #ff6b6b 0%, #ef4444 38%, #7c3aed 100%) !important;
  box-shadow:
    0 10px 30px rgba(124,58,237,.18),
    0 6px 20px rgba(239,68,68,.18),
    inset 0 1px 0 rgba(255,255,255,.30) !important;
}

.brand-ladybug {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  transform: rotate(0deg) !important;
}

.brand-note__mark {
  width: 22px !important;
  height: 22px !important;
  border-radius: 8px !important;
  transform: rotate(0deg) !important;
}

.brand-ladybug::before,
.brand-ladybug::after,
.brand-note__mark::before,
.brand-note__mark::after {
  content: none !important;
}

.brand-text {
  letter-spacing: -.02em;
}

@media (max-width: 700px) {
  .brand-ladybug {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
  }

  .brand-note__mark {
    width: 18px !important;
    height: 18px !important;
    border-radius: 6px !important;
  }
}