/* Авторитетное скрытие: атрибут hidden должен побеждать display:grid/flex !important
   (иначе переключение «вошёл/не вошёл» не работает). Специфичность выше, чем у .two/.card. */
[hidden] { display: none !important; }
.cabinet-only[hidden],
#login-form[hidden],
#logout-btn[hidden],
#code-field[hidden],
#confirm-btn[hidden] { display: none !important; }

.growth-panel h3 { margin: 18px 0 8px; font-size: 16px; }
.growth-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 8px; }
.growth-table th, .growth-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--account-line, rgba(0,0,0,.1)); }
.growth-table th { font-weight: 600; opacity: .7; }
.growth-empty { padding: 14px 16px; border-radius: 14px; background: rgba(0,0,0,.04); margin: 8px 0; }
.growth-actions { margin: 6px 0 0; padding-left: 18px; }
.growth-actions li { margin-bottom: 6px; }
.growth-money { padding: 14px 16px; border-radius: 14px; background: rgba(40,120,80,.08); margin: 8px 0 14px; }
.growth-money h3 { margin: 0 0 6px; }

:root {
  --account-ink: #1d1d1f;
  --account-muted: rgba(29, 29, 31, .66);
  --account-soft: rgba(255, 255, 255, .52);
  --account-line: rgba(78, 58, 49, .20);
  --account-card:
    linear-gradient(135deg, rgba(86, 224, 199, .50), rgba(139, 166, 255, .42) 55%, rgba(255, 226, 196, .62));
  --account-inner:
    linear-gradient(135deg, rgba(86, 224, 199, .32), rgba(139, 166, 255, .24) 58%, rgba(255, 226, 196, .38));
  --account-pill:
    linear-gradient(135deg, rgba(86, 224, 199, .34), rgba(139, 166, 255, .26) 55%, rgba(255, 226, 196, .42));
  --account-shadow: 0 26px 70px rgba(64, 106, 150, .18), inset 0 1px 0 rgba(255, 255, 255, .72);
  --account-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif;
  --account-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
button, input, select { font: inherit; }
a { color: inherit; text-decoration: none; }

body.landing-light .topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(18px, 3vw, 38px) !important;
}

body.landing-light .nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  row-gap: 6px !important;
}

body.landing-light .brand {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

#account-page {
  width: min(1180px, calc(100% - 36px)) !important;
  margin-inline: auto !important;
  padding-top: clamp(24px, 4vw, 48px) !important;
  gap: clamp(16px, 2.4vw, 30px) !important;
  color: var(--account-ink);
  font-family: var(--account-font);
}

#account-page .hero {
  min-height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
  gap: clamp(12px, 1.8vw, 20px) !important;
  align-items: stretch !important;
}

#account-page .hero > div,
#account-page .login-card,
#account-page .card,
#account-page .stat,
#account-page .plan-card,
#account-page .settings-section,
#account-page .access-item,
#account-page .step,
#account-page .item {
  border-radius: 28px !important;
  border: 1px solid var(--account-line) !important;
  background: var(--account-card) !important;
  box-shadow: var(--account-shadow) !important;
  backdrop-filter: blur(22px) saturate(150%) !important;
  color: var(--account-ink) !important;
}

#account-page .hero > div {
  padding: clamp(20px, 3vw, 34px) !important;
  display: grid !important;
  align-content: center !important;
}

#account-page .hero h1 {
  max-width: 860px !important;
  margin: 14px 0 0 !important;
  font-family: var(--account-display) !important;
  font-size: clamp(34px, 4vw, 54px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.055em !important;
  color: var(--account-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
}

#account-page h2,
#account-page h3,
#account-page .plan-name,
#account-page .stat b,
#account-page .item strong {
  font-family: var(--account-display) !important;
  color: var(--account-ink) !important;
  letter-spacing: -.03em !important;
}

#account-page .card h2,
#account-page .login-card h2 {
  margin: 0 0 8px !important;
  font-size: clamp(22px, 2.1vw, 30px) !important;
  line-height: 1.05 !important;
}

#account-page p,
#account-page .muted,
#account-page .stat span,
#account-page .plan-card p,
#account-page .plan-list,
#account-page .access-item span,
#account-page .item,
#account-page .step p {
  color: var(--account-muted) !important;
  line-height: 1.45 !important;
}

#account-page .hero p {
  max-width: 760px !important;
  margin-top: 12px !important;
  font-size: clamp(15px, 1.1vw, 17px) !important;
}

#account-page .login-card {
  min-height: 0 !important;
  display: grid !important;
  gap: 10px !important;
  align-content: center !important;
  padding: clamp(18px, 2vw, 24px) !important;
}

#account-page .grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

#account-page .two {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

#account-page .card,
#account-page .stat {
  padding: clamp(16px, 1.7vw, 21px) !important;
}

#account-page .stat {
  min-height: 118px !important;
}

#account-page .stat b {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(22px, 2vw, 30px) !important;
}

#account-page .eyebrow,
#account-page .plan-badge,
#account-page .pill,
#account-page .number {
  width: fit-content;
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(78, 58, 49, .18) !important;
  background: var(--account-pill) !important;
  color: rgba(20, 42, 66, .86) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .68), 0 10px 22px rgba(64, 106, 150, .10) !important;
}

#account-page form {
  display: grid;
  gap: 10px;
}

#account-page label {
  display: grid;
  gap: 8px;
  color: rgba(29, 29, 31, .68) !important;
  font-size: 14px;
  line-height: 1.35;
}

#account-page input,
#account-page select,
#account-page .custom-select-button {
  width: 100%;
  min-height: 42px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(29, 29, 31, .10) !important;
  outline: 0;
  background: rgba(255, 255, 255, .56) !important;
  color: var(--account-ink) !important;
  padding: 0 14px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72) !important;
}

#account-page input::placeholder {
  color: rgba(29, 29, 31, .36) !important;
}

#account-page input:focus,
#account-page select:focus,
#account-page .custom-select-button:hover,
#account-page .custom-select-button[aria-expanded="true"] {
  border-color: rgba(0, 102, 204, .32) !important;
  box-shadow: 0 0 0 4px rgba(0, 102, 204, .10), inset 0 1px 0 rgba(255, 255, 255, .82) !important;
}

#account-page .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

#account-page .button,
#account-page .plan-button {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(154, 223, 255, .82)) !important;
  color: #132235 !important;
  font-weight: 850 !important;
  cursor: pointer;
  box-shadow: 0 18px 38px rgba(76, 166, 226, .18), inset 0 1px 0 rgba(255, 255, 255, .85) !important;
  transition: transform .22s ease, filter .22s ease;
}

#account-page .button:hover,
#account-page .plan-button:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.03);
}

#account-page .button:disabled {
  cursor: not-allowed;
  opacity: .46;
  transform: none !important;
  filter: saturate(.7);
}

#account-page .settings-stack {
  display: grid;
  gap: 10px;
}

#account-page .settings-section,
#account-page .access-item,
#account-page .check-card,
#account-page .plan-summary,
#account-page .custom-select-menu,
#account-page .step,
#account-page .item {
  background: var(--account-inner) !important;
  border: 1px solid rgba(78, 58, 49, .18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .66), 0 14px 32px rgba(64, 106, 150, .11) !important;
  color: var(--account-ink) !important;
}

#account-page .settings-section {
  display: grid;
  gap: 10px;
  padding: clamp(12px, 1.35vw, 16px) !important;
  border-radius: 22px !important;
}

#account-page .section-kicker {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
  color: var(--account-muted) !important;
  font-size: 13px;
}

#account-page .section-kicker strong {
  color: var(--account-ink) !important;
  font-size: 15px;
}

#account-page .compact-grid,
#account-page .check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#account-page .wide-field { grid-column: span 2; }

#account-page .check-card {
  min-height: 48px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 11px !important;
  border-radius: 18px !important;
  color: rgba(29, 29, 31, .72) !important;
}

#account-page .check-card input {
  width: 18px !important;
  min-height: 18px !important;
  margin-top: 1px;
  accent-color: #0066cc;
  box-shadow: none !important;
}

#account-page .access-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#account-page .access-item {
  min-height: 72px;
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 12px !important;
  border-radius: 18px !important;
}

#account-page .access-item strong {
  color: var(--account-ink) !important;
  font-size: 15px;
}

#account-page .access-item.locked {
  opacity: .62;
  filter: saturate(.7);
}

#account-page .access-item.locked strong::after {
  content: "  закрыто";
  color: rgba(29, 29, 31, .45);
  font-size: 11px;
  font-weight: 800;
}

#account-page .pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

#account-page .plan-card {
  min-height: 0 !important;
  display: grid;
  align-content: space-between;
  gap: 10px;
  padding: clamp(14px, 1.55vw, 18px) !important;
  cursor: pointer;
  text-align: center !important;
}

#account-page .plan-card.active {
  border-color: rgba(0, 102, 204, .34) !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, .12), var(--account-shadow) !important;
}

#account-page .plan-topline {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

#account-page .plan-name {
  width: 100%;
  font-size: clamp(21px, 1.8vw, 27px) !important;
}

#account-page .plan-card p {
  margin: 6px auto 0;
  max-width: 340px;
  font-size: 14px;
  text-align: center;
}

#account-page .plan-list {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

#account-page .plan-list li {
  padding: 7px 9px;
  border-radius: 14px;
  border: 1px solid rgba(78, 58, 49, .16);
  background: rgba(255, 255, 255, .25);
}

#account-page .plan-summary {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding: 18px !important;
  border-radius: 22px !important;
  text-align: center;
}

#account-page .plan-summary strong {
  color: var(--account-ink) !important;
  font-size: 22px;
}

#account-page .select-shell {
  position: relative;
  width: 100%;
}

#account-page .select-shell .select-native {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

#account-page .custom-select-button {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  text-align: left !important;
  cursor: pointer;
}

#account-page .custom-select-arrow {
  width: 18px;
  height: 18px;
  color: #0066cc;
  transition: transform .18s ease;
}

#account-page .custom-select-button[aria-expanded="true"] .custom-select-arrow {
  transform: rotate(180deg);
}

#account-page .custom-select-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  display: none;
  max-height: 310px;
  overflow: auto;
  padding: 8px;
  border-radius: 20px !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
}

#account-page .select-shell.open .custom-select-menu {
  display: grid;
  gap: 4px;
}

#account-page .custom-select-group {
  padding: 8px 10px 5px;
  color: rgba(29, 29, 31, .56);
  font-size: 11px;
  font-weight: 800;
}

#account-page .custom-select-option {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  border-radius: 13px;
  color: rgba(29, 29, 31, .78);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

#account-page .custom-select-option:hover,
#account-page .custom-select-option.active {
  color: var(--account-ink);
  background: rgba(255, 255, 255, .34);
}

#account-page .custom-select-option.is-disabled {
  opacity: .42;
  cursor: not-allowed;
}

#account-page .custom-select-option.active:after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0066cc;
}

#account-page .lock-note {
  display: none;
  width: 100%;
  margin-top: 8px;
  color: rgba(20, 42, 66, .70);
  font-size: 12px;
  line-height: 1.35;
}

#account-page .is-plan-locked {
  opacity: .55;
  position: relative;
}

#account-page .is-plan-locked input,
#account-page .is-plan-locked select,
#account-page .is-plan-locked .custom-select-button {
  pointer-events: none;
  filter: saturate(.55);
}

#account-page .is-plan-locked .lock-note {
  display: block;
}

#account-page .status {
  min-height: 24px;
  color: rgba(0, 102, 204, .88);
  line-height: 1.4;
  font-size: 14px;
  font-weight: 700;
}

#account-page .sync-steps,
#account-page .list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

#account-page .step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 14px !important;
  border-radius: 20px !important;
}

#account-page .pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

#account-page .connection-toolbar {
  margin: 14px 0 10px;
}

#account-page #metrics-connections {
  grid-column: 1 / -1;
  order: 3;
}

#account-page #telegram-sync {
  order: 2;
}

#account-page .integration-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

#account-page .integration-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 20px;
  border: 1px solid rgba(78, 58, 49, .18);
  background: var(--account-inner);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .66), 0 14px 32px rgba(64, 106, 150, .11);
}

#account-page .integration-card.is-active {
  border-color: rgba(0, 102, 204, .34);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, .10), inset 0 1px 0 rgba(255, 255, 255, .72), 0 16px 34px rgba(64, 106, 150, .14);
}

#account-page .integration-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

#account-page .integration-head strong {
  display: block;
  color: var(--account-ink);
  font-family: var(--account-display);
  font-size: 15px;
  line-height: 1.1;
}

#account-page .integration-head span,
#account-page .integration-card p,
#account-page .integration-next,
#account-page .integration-guide {
  color: rgba(29, 29, 31, .64);
  font-size: 12px;
  line-height: 1.4;
}

#account-page .integration-next {
  padding: 8px 10px;
  border-radius: 15px;
  border: 1px solid rgba(78, 58, 49, .14);
  background: rgba(255, 255, 255, .24);
}

#account-page .integration-status-badge {
  flex: 0 0 auto;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(78, 58, 49, .18);
  background: rgba(255, 255, 255, .34);
  color: rgba(20, 42, 66, .76);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
}

#account-page .integration-status-badge.status-connected {
  color: #0b6b41;
  background: rgba(134, 230, 176, .34);
}

#account-page .integration-status-badge.status-ready_to_connect {
  color: #0059a8;
  background: rgba(154, 223, 255, .44);
}

#account-page .integration-status-badge.status-credentials_required,
#account-page .integration-status-badge.status-snippet_required {
  color: #7a4b00;
  background: rgba(255, 226, 196, .52);
}

#account-page .integration-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#account-page .integration-actions .button {
  min-height: 36px !important;
  padding: 0 11px !important;
  font-size: 12px;
}

#account-page .analysis-panel {
  margin-top: 12px;
}

#account-page .integration-guide {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(78, 58, 49, .16);
  background: rgba(255, 255, 255, .36);
}

#account-page .integration-guide strong {
  color: var(--account-ink);
  font-size: 14px;
}

#account-page .integration-guide p {
  margin: 0;
}

#account-page .integration-callback code {
  display: inline-block;
  max-width: 100%;
  padding: 3px 7px;
  overflow-wrap: anywhere;
  border-radius: 10px;
  background: rgba(255, 255, 255, .42);
  border: 1px solid rgba(78, 58, 49, .12);
  color: var(--account-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
}

#account-page .integration-guide ol {
  margin: 0;
  padding-left: 18px;
}

#account-page .integration-guide li {
  margin: 4px 0;
}

#account-page .integration-guide pre {
  max-width: 100%;
  overflow: auto;
  margin: 0;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .44);
  border: 1px solid rgba(78, 58, 49, .12);
}

@media (max-width: 1040px) {
  #account-page .grid,
  #account-page .pricing-grid,
  #account-page .integration-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  #account-page .hero,
  #account-page .two {
    grid-template-columns: 1fr !important;
  }

  #account-page .grid,
  #account-page .pricing-grid,
  #account-page .integration-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 780px) {
  #account-page {
    width: min(100% - 28px, 1080px) !important;
  }

  #account-page .grid,
  #account-page .pricing-grid,
  #account-page .integration-grid,
  #account-page .compact-grid,
  #account-page .check-grid,
  #account-page .access-panel {
    grid-template-columns: 1fr !important;
  }

  #account-page .wide-field {
    grid-column: auto;
  }

  #account-page .hero h1 {
    font-size: clamp(34px, 10vw, 50px) !important;
  }
}