/* ════════════════════════════════════════════════════════════════
   Cabinet premium polish — overrides on top of skeleton kit + pages
   Adds richer hover/transition states + brand-glow accents.
   ════════════════════════════════════════════════════════════════ */

:root {
  --dz-control-h: 44px;
  --dz-control-h-sm: 36px;
  --dz-control-h-lg: 54px;
  --dz-control-r: 12px;
  --dz-control-r-sm: 10px;
  --dz-control-r-lg: 14px;
  --dz-control-bg: rgba(255,255,255,0.045);
  --dz-control-bg-hover: rgba(255,255,255,0.075);
  --dz-control-line: rgba(255,255,255,0.10);
  --dz-control-line-hover: rgba(255,255,255,0.20);
  --dz-control-focus: rgba(255,210,77,0.46);
  --dz-control-shadow: 0 10px 26px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.05);
  --dz-cta-bg: linear-gradient(180deg, #FFD24D 0%, #FFB000 100%);
  --dz-cta-bg-hover: linear-gradient(180deg, #FFE07A 0%, #FFB000 58%, #FF8A00 100%);
  --dz-cta-text: #06080C;
  --dz-cta-border: rgba(255, 210, 77, 0.72);
  --dz-cta-shadow: 0 0 0 1px rgba(255,210,77,0.42), 0 14px 36px -8px rgba(255,176,0,0.58), inset 0 1px 0 rgba(255,255,255,0.34);
  --dz-cta-shadow-hover: 0 0 0 1px rgba(255,210,77,0.62), 0 18px 44px -8px rgba(255,176,0,0.70), inset 0 1px 0 rgba(255,255,255,0.42);
}

/* ───── 2026 control system pass ───────────────────────────────
   One shared geometry for the cabinet's many historical button,
   tab, chip, search, and field classes. */
:is(
  .btn,
  .au-btn,
  .st-btn,
  .ct-btn,
  .sc-btn,
  .ts-btn,
  .rl-cta,
  .up-btn,
  .pf-btn,
  .rn-pay-btn,
  .dv-add-btn,
  .bl-export,
  .rf-share-btn,
  .rf-link-row button,
  .co-promo button,
  .rn-promo-form button
) {
  box-sizing: border-box;
  min-height: var(--dz-control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--dz-control-r);
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform .16s ease,
    border-color .18s ease,
    background-color .18s ease,
    color .18s ease,
    box-shadow .22s ease,
    filter .18s ease;
}

:is(.btn, .au-btn, .st-btn, .ct-btn, .sc-btn, .ts-btn, .rl-cta, .up-btn, .pf-btn, .rn-pay-btn, .dv-add-btn, .bl-export, .rf-share-btn, .rf-link-row button, .co-promo button, .rn-promo-form button):hover {
  transform: translateY(-1px);
}

:is(.btn, .au-btn, .st-btn, .ct-btn, .sc-btn, .ts-btn, .rl-cta, .up-btn, .pf-btn, .rn-pay-btn, .dv-add-btn, .bl-export, .rf-share-btn, .rf-link-row button, .co-promo button, .rn-promo-form button):active {
  transform: translateY(1px);
}

:is(
  .btn-micro,
  .dv-action-btn,
  .dv-action-icon-btn,
  .bl-icon-btn,
  .bl-pager .num
) {
  box-sizing: border-box;
  min-height: var(--dz-control-h-sm);
  border-radius: var(--dz-control-r-sm);
  transition:
    transform .16s ease,
    border-color .18s ease,
    background-color .18s ease,
    color .18s ease,
    box-shadow .22s ease;
}

:is(.dv-action-icon-btn, .bl-icon-btn) {
  width: var(--dz-control-h-sm);
  height: var(--dz-control-h-sm);
  padding: 0;
}

:is(.btn-micro, .dv-action-btn, .dv-action-icon-btn, .bl-icon-btn, .bl-pager .num):hover {
  transform: translateY(-1px);
}

:is(
  .dv-pill,
  .bl-tab,
  .st-side a,
  .rf-code-chip,
  .rf-status-pill,
  .rn-status-chip,
  .rn-pay-methods .chip,
  .bl-tbl td.status .pill-s,
  .st-pill
) {
  box-sizing: border-box;
  min-height: var(--dz-control-h-sm);
  display: inline-flex;
  align-items: center;
  border-radius: var(--dz-control-r-sm);
  transition:
    border-color .18s ease,
    background-color .18s ease,
    color .18s ease,
    transform .16s ease;
}

:is(.dv-pill, .bl-tab, .st-side a, .rf-code-chip):hover {
  transform: translateY(-1px);
}

:is(.dv-search-wrap, .hp-search) {
  box-sizing: border-box;
  min-height: var(--dz-control-h);
  border-radius: var(--dz-control-r-lg);
  border-color: var(--dz-control-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

:is(.dv-search-wrap, .hp-search):focus-within {
  border-color: var(--dz-control-focus) !important;
  box-shadow: 0 0 0 3px rgba(56,189,248,0.12), inset 0 1px 0 rgba(255,255,255,0.05);
}

:is(
  .st-field input,
  .co-field input,
  .co-promo input,
  .rn-promo-form input,
  .au-field input,
  .bl-period select,
  .dv-search-wrap input,
  .hp-search input
) {
  box-sizing: border-box;
  min-height: var(--dz-control-h);
}

:is(.st-field input, .co-field input, .co-promo input, .rn-promo-form input, .au-field input, .bl-period select) {
  border-radius: var(--dz-control-r);
  transition:
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .22s ease;
}

:is(.st-field input, .co-field input, .co-promo input, .rn-promo-form input, .au-field input, .bl-period select):focus {
  border-color: var(--dz-control-focus) !important;
  box-shadow: 0 0 0 3px rgba(56,189,248,0.12);
}

:is(.co-pay-btn, .tro-cta, .rn-pay-btn, .rl-cta) {
  min-height: var(--dz-control-h-lg);
  border-radius: var(--dz-control-r-lg);
}

:is(.co-promo-toggle, .co-inline-action, .rn-promo-toggle, .rn-promo-remove, .rf-bonus-cta) {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 8px;
  transition:
    color .18s ease,
    text-decoration-color .18s ease,
    opacity .18s ease;
}

:is(.co-promo-toggle, .co-inline-action, .rn-promo-toggle, .rn-promo-remove, .rf-bonus-cta):hover {
  color: #7dd3fc;
  text-decoration-color: currentColor;
}

:is(.co-method, .rn-v6a-chip, .rn-plan, .rn-period) {
  box-sizing: border-box;
  transition:
    transform .18s ease,
    border-color .2s ease,
    background-color .2s ease,
    box-shadow .24s ease,
    filter .18s ease;
}

:is(.co-method, .rn-v6a-chip, .rn-plan, .rn-period):hover {
  filter: brightness(1.04);
}

:is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--dz-control-focus);
  outline-offset: 3px;
}

:is(button:disabled, .is-disabled, [aria-disabled="true"]) {
  opacity: 0.52;
  cursor: not-allowed;
  transform: none !important;
}

/* ───── Plan cards in /renew ────────────────────────────────── */
.rn-plan {
  transition: transform .22s, border-color .22s, box-shadow .22s, background-color .22s;
  text-decoration: none;
}
.rn-plan:hover {
  transform: translateY(-2px);
  border-color: rgba(245,158,11,0.35) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.40);
}

/* Period selectors */
.rn-period {
  transition: transform .22s, border-color .22s, box-shadow .22s, background-color .22s;
  text-decoration: none;
}
.rn-period:hover {
  transform: translateY(-2px);
  border-color: rgba(56,189,248,0.40) !important;
  background-color: rgba(56,189,248,0.06);
  box-shadow: 0 12px 30px rgba(56,189,248,0.15);
}
.rn-period.is-selected {
  border-color: rgba(56,189,248,0.55) !important;
  background-color: rgba(56,189,248,0.08);
  box-shadow:
    0 12px 36px rgba(56,189,248,0.20),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ───── Sidebar nav links ───────────────────────────────────── */
.sb-link {
  transition: background-color .18s, color .18s, border-color .18s;
}
.sb-link:hover {
  background: rgba(56,189,248,0.06);
  color: #fff;
}

/* ───── Generic buttons polish ──────────────────────────────── */
.btn {
  transition: transform .18s, box-shadow .22s, background-color .22s, border-color .22s, filter .22s;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--dz-cta-bg);
  border: 1px solid var(--dz-cta-border);
  color: var(--dz-cta-text);
  box-shadow: var(--dz-cta-shadow);
  text-shadow: none;
}
.btn-primary:hover {
  background: var(--dz-cta-bg-hover);
  box-shadow: var(--dz-cta-shadow-hover);
  filter: brightness(1.08);
}

/* Primary CTA contract: payment / renewal / auth / success CTAs share one
   visual language instead of separate historical button skins. */
:is(
  .btn-primary,
  .co-pay-btn,
  .rn-pay-btn,
  .au-btn--primary,
  .sc-btn--primary,
  .ts-btn--primary,
  .pf-btn--primary,
  .up-btn--primary,
  .tro-cta,
  .rl-cta,
  .if-cta,
  .it-cta,
  .tp-submit,
  .tdp-cta-bottom .btn
) {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 16px;
  border: 1px solid var(--dz-cta-border);
  background: var(--dz-cta-bg);
  color: var(--dz-cta-text);
  box-shadow: var(--dz-cta-shadow);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
}

:is(
  .btn-primary,
  .co-pay-btn,
  .rn-pay-btn,
  .au-btn--primary,
  .sc-btn--primary,
  .ts-btn--primary,
  .pf-btn--primary,
  .up-btn--primary,
  .tro-cta,
  .rl-cta,
  .if-cta,
  .it-cta,
  .tp-submit,
  .tdp-cta-bottom .btn
):hover {
  background: var(--dz-cta-bg-hover);
  box-shadow: var(--dz-cta-shadow-hover);
}

:is(.btn-primary, .co-pay-btn)::before {
  opacity: 0.42;
}

/* Small action buttons in panels */
.btn-micro, .dv-add-btn, .dv-pill, .bl-tab {
  transition: background-color .18s, border-color .18s, color .18s, transform .15s;
}
.dv-pill:hover, .bl-tab:hover {
  border-color: rgba(56,189,248,0.40) !important;
  color: #fff !important;
}
.dv-add-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* ───── Card-obsidian + qa hover (account bento) ────────────── */
.qa, .card-obsidian {
  transition: transform .25s, border-color .25s, box-shadow .25s, background-color .25s;
}
a.qa:hover, a.card-obsidian:hover {
  transform: translateY(-3px);
  border-color: rgba(56,189,248,0.30) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,0.40);
}

/* ───── Mission control cards (account) ─────────────────────── */
.mi-card {
  transition: transform .28s cubic-bezier(.2,.9,.4,1), border-color .25s, box-shadow .25s;
  text-decoration: none;
}
.mi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 60px rgba(0,0,0,0.45);
}
.mi-card--hero:hover .mi-cta-btn--hot {
  filter: brightness(1.08);
  box-shadow: 0 14px 32px rgba(245,158,11,0.45);
}

/* ───── Help cards & FAQ links ──────────────────────────────── */
.hp-card { transition: transform .22s, border-color .22s, background-color .22s; }
.hp-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.12); }
.hp-qlist a {
  transition: color .15s, padding-left .18s;
  cursor: pointer;
}
.hp-qlist a:hover {
  color: var(--cyan) !important;
  padding-left: 4px;
}

.hp-contact-item {
  transition: transform .22s, border-color .22s, background-color .22s;
}
.hp-contact-item:hover {
  transform: translateY(-2px);
  border-color: rgba(56,189,248,0.40);
}

/* ───── Settings switches & buttons ─────────────────────────── */
.st-switch { transition: background-color .2s, border-color .2s; }
.st-side a {
  transition: background-color .15s, color .15s, border-color .15s, padding-left .15s;
}
.st-side a:hover { padding-left: 18px; }

.st-btn { transition: background-color .18s, border-color .18s, color .18s, transform .15s, filter .18s; }
.st-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.st-btn:active { transform: translateY(1px); }

/* ───── Referral panel polish ───────────────────────────────── */
.rf-share-btn, .rf-link-row button, .rf-code-chip {
  transition: background-color .18s, border-color .18s, color .18s, transform .15s, filter .18s;
}
.rf-share-btn:hover, .rf-link-row button:hover {
  filter: brightness(1.10);
  transform: translateY(-1px);
}

/* ───── Auth (signup/login/verify) inputs polish ───────────── */
.au-field input,
.au-otp input {
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.au-field input:focus,
.au-otp input:focus {
  border-color: rgba(56,189,248,0.50) !important;
  box-shadow: 0 0 0 3px rgba(56,189,248,0.15);
  background-color: rgba(0,0,0,0.40);
}

.au-btn { transition: filter .18s, transform .15s, box-shadow .22s; }
.au-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.au-btn:active { transform: translateY(1px); }

.au-tg { transition: border-color .18s, background-color .18s, transform .15s; }
.au-tg:hover {
  border-color: rgba(56,189,248,0.40);
  background-color: rgba(56,189,248,0.08);
  transform: translateY(-1px);
}

/* ───── Connect-telegram code box ───────────────────────────── */
.ct-card { animation: ct-card-in .35s ease-out backwards; }
@keyframes ct-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.ct-code-box .code {
  transition: color .15s, transform .15s;
}
.ct-code-box .code:hover { color: var(--cyan); transform: scale(1.02); }
.ct-btn { transition: filter .18s, transform .15s, box-shadow .22s; }
.ct-btn:hover { filter: brightness(1.10); transform: translateY(-1px); }