/* IT Space shared theme. */
:root {
  color-scheme: dark;
  --bg: #0b1220;
  --deep: #080e19;
  --surface: #0f172a;
  --elevated: #111c30;
  --inset: #172338;
  --border: #526b8d;
  --text: #f8fafc;
  --muted: #aab6c8;
  --primary: #3b82f6;
  --bright: #38bdf8;
  --danger: #ef4444;
  --focus: 0 0 0 3px rgba(56, 189, 248, .28);
}
* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
html { background: var(--deep); }
body { display: grid; place-items: center; min-height: 100vh; margin: 0; background: radial-gradient(circle at top right, rgba(30, 64, 175, .12), transparent 34%), var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.shell { width: min(100% - 32px, 560px); }
.panel { background: var(--surface); border: 1px solid #33445d; border-radius: 14px; padding: 28px; box-shadow: 0 12px 30px rgba(0, 0, 0, .24); }
h1 { margin: 0 0 12px; color: var(--text); font-size: 24px; }
p { line-height: 1.5; }
p, .header span, .cooldown { color: var(--muted); }
label { display: block; margin: 18px 0 6px; color: var(--secondary, #cbd5e1); font-weight: 700; }
input { width: 100%; min-height: 44px; padding: 9px 10px; background: var(--elevated); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font: inherit; }
input::placeholder { color: #8493a8; }
input:focus { outline: none; border-color: var(--bright); box-shadow: var(--focus); background: var(--inset); }
button { min-height: 44px; margin-top: 18px; padding: 0 16px; border: 1px solid transparent; border-radius: 10px; background: linear-gradient(180deg, #4b8df8, #2563eb); color: #fff; font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 7px 16px rgba(37, 99, 235, .28), inset 0 1px 0 rgba(255, 255, 255, .18); transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease; }
button:hover { filter: brightness(1.08); transform: translateY(-1px); }
button:focus-visible { outline: none; box-shadow: var(--focus); }
button:disabled { background: var(--inset); border-color: var(--border); color: var(--muted); box-shadow: none; opacity: .7; transform: none; }
button.secondary { background: var(--elevated); border-color: var(--border); color: var(--text); box-shadow: none; }
a.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 0 16px; border: 1px solid transparent; border-radius: 10px; color: #fff; font-weight: 600; text-decoration: none; }
a.button.secondary { background: var(--elevated); border-color: var(--border); color: var(--text); }
a.button:hover { filter: brightness(1.08); }
a.button:focus-visible { outline: none; box-shadow: var(--focus); }
.error { padding: 10px; background: rgba(239, 68, 68, .12); border: 1px solid rgba(239, 68, 68, .48); border-left-width: 4px; border-radius: 10px; color: #fca5a5; }
.notice { padding: 10px; background: rgba(56, 189, 248, .11); border: 1px solid rgba(56, 189, 248, .45); border-left-width: 4px; border-radius: 10px; color: var(--text); }
.otp-delivery-notice { display: grid; gap: 5px; margin-top: 18px; }
.otp-delivery-notice strong { color: #7dd3fc; font-size: 15px; }
.otp-delivery-notice span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.details { background: var(--elevated); border-color: #33445d; border-radius: 10px; }
.details { margin: 14px 0; padding: 14px; border-style: solid; border-width: 1px; overflow-wrap: anywhere; }
.details p { margin: 7px 0; }
.header { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; flex-wrap: wrap; }
.header span { overflow-wrap: anywhere; }
.copy-row { display: flex; gap: 8px; align-items: center; }
.copy-row button { margin-top: 0; flex: 0 0 auto; }
.tariff { border-color: #33445d; }
.tariff { margin: 24px 0; padding-top: 18px; border-top-style: solid; border-top-width: 1px; }
.tariff form { margin: 0; }
.cooldown { min-height: 24px; margin: 10px 0 0; }
.upload-form input[type="file"] { border: 0; padding: 8px 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; } }

/* Stage 2 login layout: shared visual shell for user and admin authentication. */
.shell--login { width: min(100% - 32px, 960px); }
.login-layout { display: grid; grid-template-columns: minmax(0, .92fr) minmax(340px, 1.08fr); align-items: stretch; gap: 18px; }
.login-brand { position: relative; display: flex; min-height: 440px; flex-direction: column; justify-content: center; overflow: hidden; padding: 48px; border: 1px solid #33445d; border-radius: 14px; background: linear-gradient(145deg, rgba(17, 28, 48, .96), rgba(11, 18, 32, .92)); box-shadow: 0 12px 30px rgba(0, 0, 0, .24); }
.login-brand::before, .login-brand::after { position: absolute; content: ""; pointer-events: none; }
.login-brand::before { inset: 12% -18% auto 35%; height: 1px; background: linear-gradient(90deg, transparent, rgba(56, 189, 248, .55), transparent); box-shadow: 0 88px 0 rgba(59, 130, 246, .24), 0 176px 0 rgba(56, 189, 248, .16); transform: rotate(-24deg); }
.login-brand::after { right: -48px; bottom: -70px; width: 220px; height: 220px; border: 1px solid rgba(56, 189, 248, .22); border-radius: 50%; box-shadow: 0 0 0 24px rgba(56, 189, 248, .04), 0 0 0 48px rgba(56, 189, 248, .03); }
.brand-mark { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 6px; width: 44px; height: 34px; margin-bottom: 28px; }
.brand-mark span { display: block; width: 9px; border-radius: 5px; background: linear-gradient(180deg, var(--bright), var(--primary)); box-shadow: 0 0 16px rgba(56, 189, 248, .24); }
.brand-mark span:nth-child(1) { height: 18px; opacity: .72; }
.brand-mark span:nth-child(2) { height: 29px; }
.brand-mark span:nth-child(3) { height: 23px; opacity: .86; }
.login-eyebrow, .login-context { position: relative; z-index: 1; margin: 0 0 10px; color: var(--bright); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.login-brand h2 { position: relative; z-index: 1; max-width: 300px; margin: 0; color: var(--text); font-size: 28px; line-height: 1.12; }
.login-brand-copy { position: relative; z-index: 1; max-width: 310px; margin: 18px 0 0; color: var(--muted); }
.login-panel { align-self: center; padding: 42px; }
.login-panel h1 { margin-bottom: 12px; }
.login-panel form { margin-top: 26px; }
.login-panel button { width: 100%; }
.login-privacy-note { margin: 22px 0 0; padding: 14px 16px; border: 1px solid rgba(56, 189, 248, .32); border-radius: 10px; background: rgba(56, 189, 248, .07); color: #cbd5e1; font-size: 14px; line-height: 1.55; }
.login-context { display: inline-block; padding: 5px 9px; border: 1px solid rgba(56, 189, 248, .35); border-radius: 999px; background: rgba(56, 189, 248, .08); }
.login-layout--admin .login-brand { background: linear-gradient(145deg, rgba(17, 28, 48, .98), rgba(15, 23, 42, .92)); }
@media (max-width: 760px) {
  .shell--login { width: min(100% - 24px, 560px); }
  .login-layout { grid-template-columns: 1fr; gap: 12px; }
  .login-brand { min-height: 0; padding: 26px; }
  .login-brand::after { right: -70px; bottom: -150px; }
  .brand-mark { margin-bottom: 18px; }
  .login-brand h2 { font-size: 26px; }
  .login-brand-copy { margin-top: 10px; }
  .login-panel { padding: 28px 24px; }
}
@media (max-width: 420px) {
  .shell--login { width: min(100% - 20px, 560px); }
  .login-brand, .login-panel { border-radius: 12px; }
  .login-brand { padding: 22px; }
  .login-panel { padding: 24px 20px; }
}

/* Stage 4 user cabinet. Login layout and authentication forms remain unchanged. */
.shell--account { width: min(100% - 32px, 960px); }
.account-layout { width: 100%; }
.account-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.account-header h1 { margin: 0; font-size: 27px; line-height: 1.15; }
.account-eyebrow, .section-kicker { margin: 0 0 7px; color: var(--bright); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.account-email { margin: 7px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.account-logout, .account-back { margin-top: 0; text-decoration: none; }
.account-primary { padding: 30px; }
.telegram-link-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; padding: 13px 15px; }
.telegram-link-copy { min-width: 0; }
.telegram-link-copy h2 { margin: 2px 0 0; color: var(--text); font-size: 16px; }
.telegram-link-copy p:last-child { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.telegram-link-card form { flex: 0 0 auto; margin: 0; }
.telegram-link-card button { min-height: 34px; margin: 0; padding-inline: 11px; border-radius: 7px; font-size: 11px; }
.telegram-login-panel [data-telegram-login-form] { margin-top: 18px; }
.telegram-login-panel a.button { width: 100%; margin-top: 18px; }
.account-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 26px; }
.account-card-head h2, .account-action h2 { margin: 0; color: var(--text); font-size: 19px; }
.account-status { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border: 1px solid rgba(245, 158, 11, .45); border-radius: 999px; background: rgba(245, 158, 11, .1); color: #fde68a; font-size: 12px; font-weight: 700; white-space: nowrap; }
.account-status.is-ok { border-color: rgba(34, 197, 94, .48); background: rgba(34, 197, 94, .12); color: #86efac; }
.account-status.is-blocked { border-color: rgba(239, 68, 68, .48); background: rgba(239, 68, 68, .12); color: #fca5a5; }
.account-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.account-facts > div { min-height: 86px; padding: 15px; border: 1px solid rgba(82, 107, 141, .52); border-radius: 10px; background: var(--elevated); }
.account-facts span, .account-facts small { display: block; color: var(--muted); font-size: 12px; }
.account-facts strong { display: block; margin-top: 8px; color: var(--text); font-size: 16px; }
.account-facts small { margin-top: 4px; font-size: 11px; }
.account-muted { margin: 14px 0 0; color: var(--muted); }
.subscription-access { display: grid; gap: 10px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(82, 107, 141, .42); }
.subscription-access h3 { margin: 0; color: var(--text); font-size: 18px; }
.subscription-access label { margin: 0 0 6px; color: var(--secondary); font-size: 13px; }
.subscription-access .copy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.subscription-access .copy-row button { margin-top: 0; }
.account-primary .notice { margin: 20px 0 0; }
.connection-list { display: grid; gap: 18px; margin-top: 24px; }
.connection-card { padding: 22px; border: 1px solid rgba(82, 107, 141, .52); border-radius: 12px; background: linear-gradient(145deg, rgba(17, 28, 48, .96), rgba(15, 23, 42, .9)); }
.connection-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.connection-card__header h3 { margin: 0; color: var(--text); font-size: 19px; overflow-wrap: anywhere; }
.connection-rename { margin-bottom: 18px; }
.connection-rename label { margin: 0 0 6px; color: var(--muted); font-size: 12px; }
.connection-rename > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.connection-rename button { margin: 0; }
.connection-card .subscription-connect { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(82, 107, 141, .36); }
.expiry-warning { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 13px 15px; border: 1px solid rgba(245, 158, 11, .48); border-radius: 10px; background: rgba(245, 158, 11, .1); }
.expiry-warning-mark { display: inline-flex; flex: 0 0 28px; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(245, 158, 11, .2); color: #fde68a; font-weight: 800; }
.expiry-warning strong, .expiry-warning span { display: block; }
.expiry-warning strong { color: #fef3c7; }
.expiry-warning div > span { margin-top: 3px; color: var(--muted); font-size: 13px; }
.subscription-connect { display: grid; gap: 10px; align-items: center; margin-top: 8px; }
.subscription-actions { display: grid; gap: 10px; }
.subscription-actions button { width: 100%; margin-top: 0; }
.subscription-actions > span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.subscription-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 0 16px; border: 1px solid transparent; border-radius: 10px; background: linear-gradient(180deg, #4b8df8, #2563eb); box-shadow: 0 7px 16px rgba(37, 99, 235, .28), inset 0 1px 0 rgba(255, 255, 255, .18); color: #fff; font-weight: 700; text-align: center; text-decoration: none; }
.subscription-button:hover { filter: brightness(1.08); }
.subscription-button:focus-visible { outline: none; box-shadow: var(--focus); }
.account-action { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 14px; padding: 22px 26px; }
.account-action p { margin: 7px 0 0; }
.account-action form { margin: 0; }
.account-action button { margin-top: 0; }
.account-action--stacked { display: grid; align-items: stretch; }
.account-action--stacked form { width: 100%; }
.renewal-form fieldset { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; border: 0; }
.connection-choice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid rgba(82, 107, 141, .52); border-radius: 10px; background: var(--elevated); cursor: pointer; }
.connection-choice:focus-within { border-color: var(--bright); box-shadow: var(--focus); }
.connection-choice input { width: 20px; min-height: 20px; margin: 0; accent-color: var(--primary); }
.connection-choice span { color: var(--text); overflow-wrap: anywhere; }
.connection-choice small { color: var(--muted); }
.quantity-form > label { margin-top: 18px; }
.quantity-control { display: grid; grid-template-columns: minmax(100px, 160px) auto; align-items: center; gap: 12px; }
.quantity-control span { color: var(--muted); font-size: 13px; }
.purchase-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-top: 18px; padding: 14px 16px; border: 1px solid rgba(56, 189, 248, .35); border-radius: 10px; background: rgba(56, 189, 248, .07); }
.purchase-summary span { color: var(--muted); }
.purchase-summary strong { color: var(--text); font-size: 18px; }
.renewal-form button, .quantity-form button { width: 100%; margin-top: 14px; }
.account-empty { padding: 18px 0 4px; }
.account-empty p { margin: 0; color: var(--text); font-weight: 650; }
.account-empty span { display: block; margin-top: 6px; color: var(--muted); }
.payment-layout { max-width: 760px; margin: 0 auto; }
.payment-card { padding: 30px; }
.payment-card > p { margin: 12px 0; }
.payment-card .details { margin-top: 22px; }
.payment-card .upload-form { display: grid; gap: 8px; margin-top: 22px; }
.payment-card .upload-form label { margin: 0; }
.payment-card .upload-form input[type="file"] { width: 100%; min-height: 54px; padding: 12px; border: 1px solid rgba(82, 107, 141, .8); border-radius: 10px; background: var(--elevated); color: var(--text); cursor: pointer; }
.payment-card .upload-form input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 12px; border: 1px solid rgba(56, 189, 248, .55); border-radius: 8px; background: rgba(56, 189, 248, .14); color: var(--text); font: inherit; cursor: pointer; }
.payment-card .upload-form input[type="file"]:focus { outline: none; border-color: var(--bright); box-shadow: var(--focus); }
.payment-card .upload-form button { margin-top: 8px; }
.payment-retry-actions { display: grid; gap: 7px; margin: 18px 0; padding: 14px; border: 1px solid rgba(82, 107, 141, .55); border-radius: 10px; background: rgba(17, 28, 48, .58); }
.payment-retry-actions form { margin: 0; }
.payment-retry-actions button { width: auto; margin: 0; }
.payment-retry-actions p { margin: 0; }
.payment-bank-notice { font-weight: 800; letter-spacing: .04em; }
.payment-steps { margin: 22px 0 0; padding-left: 24px; color: var(--muted); }
.payment-steps li + li { margin-top: 8px; }
.subscription-help { margin-top: 18px; line-height: 1.55; }
.payment-card > a { display: inline-block; margin-top: 18px; }
@media (max-width: 760px) {
  .shell--account { width: min(100% - 24px, 640px); }
  .account-header { align-items: flex-start; flex-direction: column; gap: 14px; }
  .account-logout, .account-back { align-self: flex-start; }
  .account-primary { padding: 24px; }
  .telegram-link-card { align-items: flex-start; flex-direction: column; }
  .telegram-link-card form, .telegram-link-card button { width: 100%; }
  .account-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subscription-connect { grid-template-columns: 1fr; }
  .account-action { align-items: flex-start; flex-direction: column; padding: 22px 24px; }
  .account-action button { width: 100%; }
  .connection-card { padding: 18px; }
  .payment-card { padding: 24px; }
}
@media (max-width: 420px) {
  .shell--account { width: min(100% - 20px, 640px); }
  .account-card-head { flex-direction: column; gap: 12px; }
  .connection-card__header { flex-direction: column; }
  .connection-rename > div { grid-template-columns: 1fr; }
  .connection-rename button { width: 100%; }
  .connection-choice { grid-template-columns: auto minmax(0, 1fr); }
  .connection-choice small { grid-column: 2; }
  .quantity-control { grid-template-columns: 1fr; }
  .purchase-summary { align-items: flex-start; flex-direction: column; gap: 6px; }
  .account-facts { grid-template-columns: 1fr; }
  .subscription-access .copy-row { grid-template-columns: 1fr; }
  .subscription-access .copy-row button { width: 100%; }
}


/* Windows Happ Plus setup guide. */
.setup-guide { margin-top: 28px; padding-top: 26px; border-top: 1px solid rgba(82, 107, 141, .42); }
.setup-guide-head h2 { margin: 0; color: var(--text); font-size: 21px; }
.setup-guide-head > p:last-child { margin: 9px 0 0; color: var(--muted); }
.setup-steps { display: grid; gap: 18px; margin: 22px 0 0; padding: 0; list-style: none; }
.setup-step { overflow: hidden; border: 1px solid rgba(82, 107, 141, .52); border-radius: 12px; background: linear-gradient(145deg, rgba(17, 28, 48, .96), rgba(15, 23, 42, .9)); }
.setup-step-copy { display: flex; gap: 13px; padding: 18px 18px 16px; }
.setup-step-number { display: inline-flex; flex: 0 0 30px; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid rgba(56, 189, 248, .58); border-radius: 50%; background: rgba(56, 189, 248, .12); color: var(--bright); font-weight: 800; }
.setup-step h3 { margin: 2px 0 6px; color: var(--text); font-size: 16px; }
.setup-step p { margin: 0; color: var(--muted); line-height: 1.55; }
.setup-step img { display: block; width: 100%; height: auto; border-top: 1px solid rgba(82, 107, 141, .42); }
.setup-guide-note { margin: 18px 0 0; color: var(--muted); font-size: 13px; }
@media (max-width: 560px) { .setup-step-copy { padding: 16px; } .setup-step h3 { font-size: 15px; } }


/* Separate Windows Happ Plus guide page. */
.subscription-help .setup-link { display: inline-block; margin-left: 6px; color: var(--bright); font-weight: 700; }
.subscription-help .setup-links { display: inline-flex; flex-wrap: wrap; gap: 8px 14px; }
.subscription-help .setup-links .setup-link { margin-left: 0; }
.windows-guide-page { max-width: 960px; margin: 0 auto; }
.windows-guide-card { padding: 30px; }
.windows-guide-intro h2 { margin: 0; color: var(--text); font-size: 22px; }
.windows-guide-intro p { margin: 9px 0 0; color: var(--muted); }
.windows-guide-steps { display: grid; gap: 18px; margin: 26px 0 0; padding: 0; list-style: none; }
.windows-guide-step, .windows-guide-step-group { overflow: hidden; border: 1px solid rgba(82, 107, 141, .52); border-radius: 12px; background: linear-gradient(145deg, rgba(17, 28, 48, .96), rgba(15, 23, 42, .9)); }
.windows-guide-step-copy { display: flex; gap: 13px; padding: 18px 20px; }
.windows-guide-step-copy + .windows-guide-step-copy { border-top: 1px solid rgba(82, 107, 141, .3); }
.windows-guide-number { display: inline-flex; flex: 0 0 32px; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid rgba(56, 189, 248, .58); border-radius: 50%; background: rgba(56, 189, 248, .12); color: var(--bright); font-weight: 800; }
.windows-guide-step h3, .windows-guide-step-group h3, .windows-guide-step-text h3 { margin: 2px 0 6px; color: var(--text); font-size: 16px; }
.windows-guide-step p, .windows-guide-step-group p, .windows-guide-step-text p { margin: 0; color: var(--muted); line-height: 1.55; }
.windows-guide-step > img, .windows-guide-step-group > img { display: block; width: 100%; height: auto; border-top: 1px solid rgba(82, 107, 141, .42); }
.ios-guide-page .windows-guide-step > img { width: min(100%, 420px); max-width: 100%; margin: 0 auto; }
.windows-guide-step-text { border: 1px solid rgba(82, 107, 141, .52); border-radius: 12px; background: rgba(17, 28, 48, .72); }
.windows-guide-note { margin: 22px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
@media (max-width: 760px) { .windows-guide-card { padding: 24px; } }
@media (max-width: 560px) { .windows-guide-card { padding: 18px; } .windows-guide-step-copy { padding: 16px; } .subscription-help .setup-link { margin: 7px 0 0; } }

/* Keyboard navigation and action feedback. */
.skip-link {
  position: fixed;
  top: 12px;
  left: 16px;
  z-index: 1000;
  padding: 10px 14px;
  border: 1px solid var(--bright);
  border-radius: 8px;
  background: #0b1220;
  color: #fff;
  font-weight: 750;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform var(--transition);
}
.skip-link:focus-visible { outline: none; transform: translateY(0); box-shadow: var(--focus); }
.copy-feedback { margin: 10px 0 0; color: var(--bright); font-size: 13px; }
.copy-feedback:empty { display: none; }

/* Compact account workspace. Authentication, payment and help pages stay unchanged. */
.account-layout > .notice { display: inline-flex; margin: 0 0 8px; padding: 5px 8px; border-left-width: 2px; border-radius: 7px; font-size: 12px; line-height: 1.35; }
.account-save-notice { margin: 0 0 8px; }
.account-primary--has-connections { padding: 14px; }
.account-primary--has-connections > .account-card-head { margin-bottom: 6px; }
.account-primary--has-connections > .account-card-head h2 { font-size: 17px; }
.account-primary--has-connections > .account-muted { margin-top: 4px; font-size: 12px; line-height: 1.4; }
.account-primary--has-connections .account-status { min-height: 24px; padding: 2px 7px; font-size: 10px; }
.connection-list { gap: 7px; margin-top: 10px; }
.connection-card { padding: 10px 12px; }
.connection-card__header { gap: 8px; margin-bottom: 7px; }
.connection-card__identity { flex: 1 1 auto; min-width: 0; }
.connection-card__identity .section-kicker { margin-bottom: 3px; font-size: 9px; }
.connection-rename { margin: 0; }
.connection-rename > div { grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
.connection-rename input { min-height: 32px; padding: 5px 8px; border-radius: 7px; font-size: 13px; font-weight: 650; }
.connection-rename button { min-height: 32px; padding-inline: 9px; border-radius: 7px; font-size: 11px; }
.connection-card .account-facts { display: flex; flex-wrap: wrap; gap: 5px 18px; padding: 6px 0; border-top: 1px solid rgba(82, 107, 141, .28); border-bottom: 1px solid rgba(82, 107, 141, .28); }
.connection-card .account-facts > div { flex: 1 1 120px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.connection-card .account-facts span { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.connection-card .account-facts strong { margin-top: 1px; font-size: 12px; line-height: 1.25; }
.connection-card .account-facts small { display: inline; margin: 0 0 0 4px; font-size: 9px; }
.connection-card .subscription-connect { gap: 5px; margin-top: 7px; padding-top: 0; border-top: 0; }
.subscription-actions { grid-template-columns: repeat(2, max-content); justify-content: start; gap: 6px; }
.subscription-actions button { width: auto; min-height: 32px; margin: 0; padding-inline: 10px; border-radius: 7px; font-size: 11px; box-shadow: none; }
.subscription-connect > span { color: var(--muted); font-size: 10px; line-height: 1.35; }
.expiry-warning { gap: 7px; margin-top: 6px; padding: 5px 8px; }
.expiry-warning-mark { flex-basis: 20px; width: 20px; height: 20px; }
.expiry-warning strong { font-size: 11px; }
.expiry-warning div > span { margin-top: 0; font-size: 10px; }
.account-primary--has-connections .subscription-help { margin: 8px 0 0; padding-top: 7px; border-top: 1px solid rgba(82, 107, 141, .3); font-size: 10px; line-height: 1.4; }
.account-action-list { margin-top: 13px; }
.account-action-list > .section-kicker { margin-bottom: 4px; }
.account-action { gap: 10px; margin-top: 6px; padding: 11px 13px; }
.account-action--stacked { grid-template-columns: minmax(180px, .7fr) minmax(300px, 1.3fr); }
.account-action p { margin-top: 2px; font-size: 11px; line-height: 1.35; }
.renewal-form fieldset { gap: 4px; margin-top: 0; }
.connection-choice { min-height: 34px; padding: 5px 8px; border-radius: 7px; font-size: 12px; }
.connection-choice input { width: 16px; min-height: 16px; }
.quantity-form > label { margin-top: 0; font-size: 11px; }
.quantity-control { grid-template-columns: minmax(80px, 120px) auto; gap: 8px; }
.quantity-control input { min-height: 34px; }
.purchase-summary { margin-top: 7px; padding: 7px 9px; border-radius: 7px; font-size: 12px; }
.purchase-summary strong { font-size: 15px; }
.renewal-form button, .quantity-form button { margin-top: 7px; }
.payment-submit:not(:disabled) { background: linear-gradient(180deg, #34d399, #16a34a); box-shadow: 0 6px 14px rgba(22, 163, 74, .25), inset 0 1px 0 rgba(255, 255, 255, .16); }

@media (max-width: 760px) {
  .account-primary--has-connections { padding: 12px; }
  .connection-card { padding: 9px 10px; }
  .connection-rename input, .connection-rename button { min-height: 34px; }
  .subscription-actions button { min-height: 34px; }
  .account-action { padding: 10px 11px; }
  .account-action--stacked { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .account-header { margin-bottom: 16px; }
  .account-header h1 { font-size: 24px; }
  .connection-card__header { flex-direction: column; }
  .connection-card__header .account-status { white-space: normal; }
  .subscription-actions { grid-template-columns: repeat(2, max-content); }
}
@media (max-width: 380px) {
  .connection-rename > div { grid-template-columns: 1fr; }
  .connection-rename button { width: 100%; }
  .subscription-actions { grid-template-columns: 1fr; }
  .subscription-actions button { width: 100%; }
}

/* ============================================================
   Личный кабинет: единый стиль страниц заявки, подписок и оплаты.
   Родная синяя палитра сайта, мягкая раскладка.
   ============================================================ */
:root{
  --lk-card:#111c30;
  --lk-card-2:#172338;
  --lk-card-press:#1e2c46;
  --lk-line:rgba(82,107,141,.38);
  --lk-label-2:#aab6c8;
  --lk-label-3:rgba(170,182,200,.5);
  --lk-accent-top:#4b8df8;
  --lk-accent-bottom:#2563eb;
  --lk-accent-text:#8fc0ff;
  --lk-ok-line:rgba(34,197,94,.48);
  --lk-ok-bg:rgba(34,197,94,.12);
  --lk-ok-text:#86efac;
  --lk-warn-line:rgba(245,158,11,.45);
  --lk-warn-bg:rgba(245,158,11,.1);
  --lk-warn-text:#fde68a;
  --lk-warn-solid:#f59e0b;
  --lk-track:rgba(82,107,141,.32);
  --lk-blur:rgba(8,14,25,.78);
  --lk-shadow:0 10px 28px rgba(0,0,0,.28);
  /* Скругления: карточка 18, элемент управления 13, чип pill */
  --lk-r-card:18px;
  --lk-r-ui:13px;
}
.shell--account{max-width:calc(100vw - 20px)}
.account-layout{font-variant-numeric:tabular-nums;max-width:100%;overflow-x:clip}

/* Липкая шапка с размытием */
.account-topbar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:0 -10px 8px;padding:14px 10px 12px;
  background:var(--lk-blur);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--lk-line);
}
.account-topbar > div{min-width:0}
.account-topbar h1{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em}
.account-topbar .account-email{margin:2px 0 0;font-size:13px;color:var(--lk-label-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-topbar form{margin:0;flex:0 0 auto}

/* Заголовок секции вне карточки */
.sec-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:22px 4px 8px}
.sec-title span:first-child{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--lk-label-2)}
.sec-title span:last-child{font-size:13px;color:var(--lk-label-3)}

.account-layout .card{background:var(--lk-card);border:1px solid var(--lk-line);border-radius:var(--lk-r-card);box-shadow:var(--lk-shadow);overflow:hidden}

/* Кнопки с отдачей при нажатии */
.account-layout .btn{
  -webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  min-height:44px;margin:0;padding:0 16px;border:1px solid transparent;border-radius:var(--lk-r-ui);
  font:inherit;font-size:15px;font-weight:700;letter-spacing:-.01em;
  cursor:pointer;text-decoration:none;user-select:none;touch-action:manipulation;
  transition:transform .16s cubic-bezier(.2,.8,.3,1), filter .16s ease, background-color .16s ease;
  box-shadow:none;
}
.account-layout .btn:active{transform:scale(.955)}
.account-layout .btn.fill{background:linear-gradient(180deg,var(--lk-accent-top),var(--lk-accent-bottom));color:#fff;box-shadow:0 6px 15px rgba(37,99,235,.3), inset 0 1px 0 rgba(255,255,255,.2)}
.account-layout .btn.fill:hover{filter:brightness(1.06)}
.account-layout .btn.tint{background:var(--lk-card-2);border-color:var(--lk-line);color:var(--text)}
.account-layout .btn.tint:hover{background:var(--lk-card-press)}
.account-layout .btn.btn-small{min-height:38px;padding:0 14px;font-size:14px}
.account-layout .btn:disabled{opacity:.45;cursor:default;box-shadow:none;transform:none;filter:grayscale(.25)}

/* Состояния доступа и пустой список */
.state{padding:22px 18px}
.state-ico{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.state-ico svg{width:21px;height:21px}
.state-ico.wait{background:var(--lk-warn-bg);border:1px solid var(--lk-warn-line);color:var(--lk-warn-text)}
.state-ico.bad{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.45);color:#fca5a5}
.state-ico.info{background:rgba(75,141,248,.14);border:1px solid rgba(75,141,248,.4);color:var(--lk-accent-text)}
.state h2{margin:0 0 6px;font-size:19px;font-weight:700}
.state p{margin:0;font-size:14.5px;color:var(--lk-label-2);line-height:1.5}
.state-after{margin:16px 0 0}

/* Telegram */
.tg-row{display:flex;align-items:center;gap:14px;padding:15px 16px}
.tg-text{flex:1 1 auto;min-width:0}
.tg-text b{display:block;font-size:16px;font-weight:600}
.tg-text span{font-size:13px;color:var(--lk-label-2)}
.tg-row form{margin:0;flex:0 0 auto}

/* Подписка */
.sub-row{padding:16px;position:relative}
.sub-row + .sub-row{border-top:.5px solid var(--lk-line);margin-left:16px}
.sub-row.is-soon{background:linear-gradient(90deg, rgba(245,158,11,.09), transparent 46%)}
.sub-row.is-soon::before{content:"";position:absolute;inset:0 auto 0 -16px;width:3px;background:var(--lk-warn-solid)}
.sub-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}

/* Флажок выбора для продления */
.pick{flex:0 0 auto;display:inline-flex;cursor:pointer}
.pick input{position:absolute;opacity:0;width:0;height:0}
.pick-box{width:24px;height:24px;border-radius:8px;border:2px solid var(--lk-line);background:var(--lk-card-2);display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:background-color .16s ease, border-color .16s ease}
.pick-box svg{width:14px;height:14px;opacity:0;transition:opacity .12s ease}
.pick input:checked + .pick-box{background:linear-gradient(180deg,var(--lk-accent-top),var(--lk-accent-bottom));border-color:transparent;box-shadow:0 3px 9px rgba(37,99,235,.35)}
.pick input:checked + .pick-box svg{opacity:1}
.pick input:focus-visible + .pick-box{box-shadow:var(--focus)}

.sub-name{
  flex:1 1 auto;min-width:0;width:auto;min-height:0;
  font-size:19px;font-weight:700;letter-spacing:-.01em;
  background:transparent;border:1px solid transparent;border-radius:9px;padding:3px 7px;margin:-3px -7px;
}
.sub-name:hover{border-color:var(--lk-line)}
.sub-name:focus{background:var(--inset);border-color:var(--bright)}
.rename-save{
  flex:0 0 auto;width:34px;height:34px;min-height:0;margin:0;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--lk-line);border-radius:10px;background:var(--lk-card-2);color:var(--lk-accent-text);
  cursor:pointer;box-shadow:none;
  transition:transform .16s cubic-bezier(.2,.8,.3,1), background-color .16s ease;
}
.rename-save svg{width:17px;height:17px}
.rename-save:hover{background:var(--lk-card-press);filter:none;transform:none}
.rename-save:active{transform:scale(.92)}
.rename-form{display:none}
/* кнопку сохранения показываем только когда правят название */
.sub-head .rename-save{display:none}
.sub-head:focus-within .rename-save{display:inline-flex}

.chip{flex:0 0 auto;height:25px;padding:0 11px;border-radius:999px;display:inline-flex;align-items:center;font-size:12px;font-weight:700;border:1px solid transparent;white-space:nowrap}
.chip.ok{background:var(--lk-ok-bg);border-color:var(--lk-ok-line);color:var(--lk-ok-text)}
.chip.soon{background:var(--lk-warn-bg);border-color:var(--lk-warn-line);color:var(--lk-warn-text)}

.facts{display:flex;gap:20px;flex-wrap:wrap;margin:0 0 14px}
.facts > div{min-width:0}
.facts dt{font-size:12px;color:var(--lk-label-2);margin-bottom:2px}
.facts dd{margin:0;font-size:15px;font-weight:600}

.meter{margin-bottom:16px}
.meter-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:7px}
.meter-top span{font-size:12px;color:var(--lk-label-2)}
.meter-top b{font-size:13px;font-weight:600}
.track{height:6px;border-radius:999px;background:var(--lk-track);overflow:hidden}
.track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--lk-accent-top),var(--lk-accent-bottom))}
.track i.hot{background:var(--lk-warn-solid)}

.warn-note{margin:0 0 14px;font-size:14px;font-weight:500;color:var(--lk-warn-text)}
.sub-acts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}

/* Панель массового продления */
.renew-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;border-top:1px solid var(--lk-line);background:rgba(75,141,248,.06)}
.renew-text{flex:1 1 170px;min-width:0}
.renew-text b{display:block;font-size:15px;font-weight:700}
.renew-text span{font-size:13px;color:var(--lk-label-2)}
.renew-sum{font-size:16px;font-weight:700;white-space:nowrap}
.renew-tariffs{display:flex;gap:8px;flex-wrap:wrap;width:100%}
.renew-tariff{display:inline-flex;align-items:center;gap:7px;margin:0;padding:7px 12px;border:1px solid var(--lk-line);border-radius:999px;background:var(--lk-card-2);font-size:13px;font-weight:600;color:var(--lk-label-2);cursor:pointer}
.renew-tariff input{width:auto;min-height:0;margin:0}
.renew-tariff:has(input:checked){border-color:rgba(75,141,248,.55);background:rgba(75,141,248,.16);color:var(--text)}

/* Сноска под секцией */
.footnote{margin:10px 6px 0;font-size:13px;line-height:1.45;color:var(--lk-label-2)}
.footnote .setup-link{color:var(--lk-accent-text);text-decoration:none;border-bottom:1px solid rgba(143,192,255,.3)}
.footnote-dot{margin:0 7px;color:var(--lk-label-3)}

/* Покупка */
.buy{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0;padding:16px}
.buy-text{flex:1 1 150px;min-width:0}
.buy-text b{display:block;font-size:16px;font-weight:600}
.buy-text span{font-size:13px;color:var(--lk-label-2)}
.buy-qty{width:74px;min-width:0;text-align:center;font-weight:700;border-radius:var(--lk-r-ui)}
.buy-sum{font-size:17px;font-weight:700;white-space:nowrap}

/* Оплата */
.order{padding:4px 16px 12px}
.order-line{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 0;border-bottom:1px solid var(--lk-line);font-size:14.5px}
.order-line:last-child{border-bottom:0}
.order-line span{color:var(--lk-label-2)}
.order-line b{font-weight:600;text-align:right}
.order-total{padding-top:12px;font-size:16px}
.order-total b{font-size:19px}
.pay-inset{padding:0 16px 16px}
.account-layout .payment-bank-notice{margin:0;padding:13px 15px;border:1px solid var(--lk-warn-line);border-radius:var(--lk-r-ui);background:var(--lk-warn-bg);color:var(--lk-warn-text);font-size:14px;font-weight:700;line-height:1.45}
.pay-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:15px 16px}
.pay-actions form{margin:0}
.pay-actions .account-muted{margin:0;flex:1 1 200px;font-size:13px}

.account-layout .payment-steps{margin:0;padding:14px 16px 6px;list-style:none;counter-reset:paystep}
.account-layout .payment-steps li{position:relative;padding:9px 0 9px 34px;font-size:14.5px;line-height:1.45;color:var(--lk-label-2);counter-increment:paystep}
.account-layout .payment-steps li::before{
  content:counter(paystep);position:absolute;left:0;top:8px;
  width:23px;height:23px;border-radius:50%;
  background:var(--lk-card-2);border:1px solid var(--lk-line);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:var(--text);
}
.account-layout .upload-form{margin:0;padding:6px 16px 18px}
.upload-label{display:block;margin:0 0 8px;font-size:14px;font-weight:600;color:var(--text)}
.account-layout .upload-form input[type="file"]{width:100%;padding:11px 12px;border:1px dashed var(--lk-line);border-radius:var(--lk-r-ui);background:var(--lk-card-2);font-size:14px}
.upload-hint{margin:9px 0 0;font-size:12.5px;color:var(--lk-label-3);line-height:1.45}
.upload-submit{width:100%;margin-top:14px}

/* Уведомления кабинета */
.account-layout .notice,
.account-layout .error{border-radius:var(--lk-r-ui);font-size:14px;line-height:1.45}
.account-layout .account-save-notice{margin-bottom:10px}

@media (max-width: 520px){
  .renew-bar .btn{width:100%}
  .buy .btn{width:100%}
}
@media (prefers-reduced-motion: reduce){
  .account-layout .btn,.pick-box,.rename-save{transition-duration:.01ms !important}
}