/* DG Bycards Cabinet - интерфейс кабинета 2.0
   Все классы с префиксом dgbc2-, чтобы не пересекаться с правилами front.css. */

.dgbc-cabinet.dgbc2-host { max-width: 1180px !important; }
.dgbc2 {
    --d2-panel: #0b1615;
    --d2-raised: #10201e;
    --d2-sunk: #081110;
    --d2-line: rgba(99, 255, 199, .13);
    --d2-line-2: rgba(99, 255, 199, .3);
    --d2-text: #e9fbf4;
    --d2-muted: #95ada5;
    --d2-dim: #6e867d;
    --d2-accent: #63ffc7;
    --d2-ink: #03140d;
    --d2-accent-soft: rgba(99, 255, 199, .09);
    --d2-warn: #ffdf7e;
    --d2-warn-soft: rgba(255, 223, 126, .08);
    --d2-error: #ff8585;
    --d2-error-soft: rgba(255, 133, 133, .08);
    --d2-sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --d2-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
    color: var(--d2-text);
    font-family: var(--d2-sans) !important;
    font-size: 15px;
    line-height: 1.55;
    text-align: left;
}
.dgbc2 *, .dgbc2 *::before, .dgbc2 *::after { box-sizing: border-box; }
/* Тема и старый front.css местами задают nowrap — в кабинете текст должен переноситься. */
.dgbc-cabinet .dgbc2,
.dgbc-cabinet .dgbc2 :where(p, li, span, div, small, strong, b, em, label, h2, h3, h4, summary, figcaption, a, button, code, dialog, form, ol, ul, select) { white-space: normal !important; }
.dgbc-cabinet .dgbc2 .dgbc2-days { white-space: nowrap !important; }
.dgbc2 h2, .dgbc2 h3, .dgbc2 h4 { font-family: var(--d2-sans) !important; color: var(--d2-text) !important; margin: 0 !important; padding: 0 !important; text-transform: none !important; letter-spacing: -.015em !important; }
.dgbc2 p { margin: 0; }
.dgbc2 ol, .dgbc2 ul { margin: 0; }
.dgbc2 button { font-family: inherit !important; cursor: pointer; text-transform: none !important; letter-spacing: normal !important; }
.dgbc2 button:focus-visible, .dgbc2 a:focus-visible, .dgbc2 summary:focus-visible { outline: 2px solid var(--d2-accent) !important; outline-offset: 2px; }
.dgbc2 code { font-family: var(--d2-mono) !important; font-size: .86em; background: var(--d2-accent-soft); border: 1px solid var(--d2-line); border-radius: 6px; padding: 1px 6px; color: var(--d2-accent); overflow-wrap: anywhere; }
.dgbc2 [hidden] { display: none !important; }
/* front.css ставит .dgbc-cabinet { overflow-x: hidden } — всё, что шире колонки, срезается. Не даём ничему расползаться. */
.dgbc-cabinet .dgbc2 :where(section, figure, .dgbc2-layout, .dgbc2-main, .dgbc2-panel, .dgbc2-setup, .dgbc2-step, .dgbc2-step-body, .dgbc2-pane, [data-dgbc2-mpane], [data-dgbc2-pane], .dgbc2-method, .dgbc2-update, .dgbc2-renew, .dgbc2-head) { min-width: 0 !important; max-width: 100% !important; }
.dgbc-cabinet .dgbc2 img { max-width: 100% !important; height: auto; }
.dgbc2 svg { flex: none; }

/* Кнопки */
.dgbc2 .dgbc2-btn {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    min-height: 42px !important; padding: 10px 16px !important; margin: 0 !important;
    border: 0 !important; border-radius: 11px !important;
    background: var(--d2-accent) !important; color: var(--d2-ink) !important;
    font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important;
    text-decoration: none !important; box-shadow: none !important; width: auto !important;
}
.dgbc2 .dgbc2-btn:hover { filter: brightness(1.07); }
.dgbc2 .dgbc2-btn svg { width: 17px; height: 17px; }
.dgbc2 .dgbc2-btn.is-sec { background: transparent !important; color: var(--d2-accent) !important; box-shadow: inset 0 0 0 1px var(--d2-line-2) !important; }
.dgbc2 .dgbc2-btn.is-sec:hover { background: var(--d2-accent-soft) !important; }
.dgbc2 .dgbc2-btn.is-warn { background: var(--d2-warn) !important; color: #241c00 !important; }
.dgbc2 .dgbc2-btn.is-err { background: var(--d2-error) !important; color: #2a0606 !important; }
.dgbc2 .dgbc2-ghost {
    display: inline-flex !important; align-items: center !important; min-height: 36px !important; padding: 6px 14px !important;
    border: 1px solid var(--d2-line) !important; border-radius: 10px !important; background: transparent !important;
    color: var(--d2-text) !important; font-size: 13.5px !important; text-decoration: none !important;
}
.dgbc2 .dgbc2-ghost:hover { border-color: var(--d2-line-2) !important; }

/* Шапка аккаунта */
.dgbc2-acct { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--d2-line); }
.dgbc2-acct h2 { font-size: 22px !important; font-weight: 700 !important; margin-right: auto !important; }
.dgbc2-mail { font-family: var(--d2-mono); font-size: 13px; color: var(--d2-muted); overflow-wrap: anywhere; }
/* Вход без кода — отдельная строка под заголовком; старые правила front.css (колонки, 205px, 9px шрифт) гасим. */
.dgbc-cabinet .dgbc2 .dgbc2-acct-social { order: 5; flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.dgbc-cabinet .dgbc2 .dgbc2-acct-social .dgbc-head-social-inline {
    display: flex !important; flex-flow: row wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important;
    position: static !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important;
}
.dgbc-cabinet .dgbc2 .dgbc2-acct-social .dgbc-head-social-label { flex: none !important; margin: 0 !important; color: var(--d2-dim) !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.3 !important; text-transform: none !important; letter-spacing: normal !important; }
.dgbc-cabinet .dgbc2 .dgbc2-acct-social .dgbc-head-social-form,
.dgbc-cabinet .dgbc2 .dgbc2-acct-social .dgbc-head-social-connect,
.dgbc-cabinet .dgbc2 .dgbc2-acct-social .dgbc-telegram-login {
    display: inline-flex !important; flex-direction: row !important; flex: none !important; align-items: center !important; justify-content: flex-start !important;
    position: static !important; float: none !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; overflow: visible !important; text-align: left !important;
}
.dgbc-cabinet .dgbc2 .dgbc2-acct-social .dgbc-telegram-login iframe { display: block !important; margin: 0 !important; }
.dgbc-cabinet .dgbc2 .dgbc2-acct-social .dgbc-head-social-chip,
.dgbc-cabinet .dgbc2 .dgbc2-acct-social .dgbc-vk-login-button,
.dgbc-cabinet .dgbc2 .dgbc2-acct-social .dgbc-yandex-login-button {
    display: inline-flex !important; align-items: center !important; gap: 6px !important; flex: none !important;
    width: auto !important; max-width: 100% !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; max-height: none !important;
    margin: 0 !important; padding: 0 11px !important; border: 1px solid var(--d2-line) !important; border-radius: 9px !important; background: var(--d2-sunk) !important; box-shadow: none !important;
    color: var(--d2-text) !important; font-family: var(--d2-sans) !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1 !important; text-decoration: none !important; text-transform: none !important; letter-spacing: normal !important; overflow: hidden !important;
}
.dgbc-cabinet .dgbc2 .dgbc2-acct-social .dgbc-head-social-chip:hover,
.dgbc-cabinet .dgbc2 .dgbc2-acct-social .dgbc-vk-login-button:hover,
.dgbc-cabinet .dgbc2 .dgbc2-acct-social .dgbc-yandex-login-button:hover { border-color: var(--d2-line-2) !important; }
.dgbc-cabinet .dgbc2 .dgbc2-acct-social .dgbc-head-social-chip span { font-size: 13px !important; font-weight: 600 !important; color: var(--d2-accent) !important; white-space: nowrap !important; }
.dgbc-cabinet .dgbc2 .dgbc2-acct-social .dgbc-head-social-chip small { max-width: 180px !important; font-size: 12px !important; color: var(--d2-muted) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.dgbc-cabinet .dgbc2 .dgbc2-acct-social .dgbc-head-social-chip i { font-style: normal !important; font-size: 15px !important; color: var(--d2-dim) !important; }
.dgbc-cabinet .dgbc2 .dgbc2-acct-social .dgbc-vk-logo,
.dgbc-cabinet .dgbc2 .dgbc2-acct-social .dgbc-yandex-logo { display: inline-grid !important; place-items: center !important; width: 18px !important; height: 18px !important; margin: 0 !important; border-radius: 5px !important; font-size: 9px !important; font-weight: 800 !important; line-height: 1 !important; color: #fff !important; }
.dgbc-cabinet .dgbc2 .dgbc2-acct-social .dgbc-vk-logo { background: #0077ff !important; }
.dgbc-cabinet .dgbc2 .dgbc2-acct-social .dgbc-yandex-logo { background: #fc3f1d !important; font-size: 11px !important; }
.dgbc-cabinet .dgbc2 .dgbc2-acct-social .dgbc-vk-login-button span:not(.dgbc-vk-logo),
.dgbc-cabinet .dgbc2 .dgbc2-acct-social .dgbc-yandex-login-button span:not(.dgbc-yandex-logo) { white-space: nowrap !important; font-size: 13px !important; }
.dgbc2-notices { display: grid; gap: 10px; margin-bottom: 18px; }
.dgbc2-notices .dgbc-alert, .dgbc2-notices .dgbc-pending-requests, .dgbc2-notices .dgbc-config-pending-global { margin: 0 !important; }

/* Раскладка */
.dgbc2-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; align-items: start; }
.dgbc2-aside { display: grid; gap: 14px; position: sticky; top: 12px; min-width: 0; }
.dgbc2-main { display: grid; gap: 14px; min-width: 0; }
.dgbc2-side-h { font-family: var(--d2-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--d2-dim); padding-left: 4px; }

/* Список устройств */
.dgbc2-devlist { display: grid; gap: 8px; }
.dgbc2 .dgbc2-dev {
    display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
    width: 100% !important; margin: 0 !important; padding: 12px !important; text-align: left !important;
    border: 1px solid var(--d2-line) !important; border-radius: 14px !important; background: var(--d2-panel) !important;
    color: var(--d2-text) !important; font-size: 14px !important; box-shadow: none !important; min-height: 0 !important; height: auto !important;
}
.dgbc2 .dgbc2-dev:hover { border-color: var(--d2-line-2) !important; }
.dgbc2 .dgbc2-dev[aria-current="true"] { background: var(--d2-raised) !important; border-color: var(--d2-accent) !important; box-shadow: 0 0 0 3px rgba(99, 255, 199, .08) !important; }
.dgbc2-dev-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--d2-sunk); border: 1px solid var(--d2-line); display: grid; place-items: center; color: var(--d2-accent); }
.dgbc2-dev-ico svg { width: 20px; height: 20px; }
.dgbc2-dev-text { display: grid; min-width: 0; }
.dgbc2-dev-name { font-weight: 600; font-size: 14.5px; line-height: 1.25; overflow-wrap: anywhere; }
.dgbc2-dev-sub { font-size: 12.5px; color: var(--d2-muted); line-height: 1.35; }
.dgbc2-days { font-family: var(--d2-mono); font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dgbc2-days.is-ok { color: var(--d2-accent); background: var(--d2-accent-soft); }
.dgbc2-days.is-warn { color: var(--d2-warn); background: var(--d2-warn-soft); }
.dgbc2-days.is-err { color: var(--d2-error); background: var(--d2-error-soft); }
.dgbc2 .dgbc2-add {
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px;
    width: 100% !important; margin: 0 !important; padding: 12px !important; min-height: 0 !important;
    border: 1px dashed var(--d2-line-2) !important; border-radius: 14px !important; background: transparent !important;
    color: var(--d2-accent) !important; font-weight: 600 !important; font-size: 14px !important; box-shadow: none !important;
}
.dgbc2 .dgbc2-add:hover { background: var(--d2-accent-soft) !important; }

/* Реферальный блок в колонке */
.dgbc2-ref .dgbc-referral-mini { margin: 0 !important; padding: 14px !important; border: 1px solid var(--d2-line) !important; border-radius: 14px !important; background: linear-gradient(160deg, rgba(99, 255, 199, .07), transparent 70%) !important; min-height: 0 !important; }
.dgbc2-ref .dgbc-referral-mini-title { font-size: 14px !important; font-weight: 700 !important; margin: 0 0 2px !important; font-family: var(--d2-sans) !important; }
.dgbc2-ref .dgbc-referral-mini-note { font-size: 13px !important; color: var(--d2-muted) !important; margin: 0 0 8px !important; font-family: var(--d2-sans) !important; }
/* Ссылка сверху во всю ширину, кнопка под ней: старый front.css и тема растягивают кнопку на 100% и сжимали поле до нуля. */
.dgbc-cabinet .dgbc2 .dgbc2-ref .dgbc-referral-mini-row { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; margin: 0 !important; }
.dgbc-cabinet .dgbc2 .dgbc2-ref .dgbc-referral-mini-row button { width: 100% !important; }
.dgbc-cabinet .dgbc2 .dgbc2-ref .dgbc-referral-mini-row input { min-height: 36px !important; text-overflow: ellipsis !important; }
.dgbc2-ref .dgbc-referral-mini-row input { display: block !important; flex: none !important; min-width: 0 !important; width: 100% !important; height: 36px !important; background: var(--d2-sunk) !important; border: 1px solid var(--d2-line) !important; border-radius: 9px !important; color: var(--d2-muted) !important; font-family: var(--d2-mono) !important; font-size: 11.5px !important; padding: 0 8px !important; }
.dgbc2-ref .dgbc-referral-mini-row button { flex: none !important; height: 36px !important; min-height: 0 !important; border: 0 !important; background: var(--d2-accent) !important; color: var(--d2-ink) !important; border-radius: 9px !important; padding: 0 12px !important; font-weight: 700 !important; font-size: 12.5px !important; }
.dgbc2-invites { margin-top: 18px; }

/* Панели */
.dgbc2-panel { border: 1px solid var(--d2-line); border-radius: 16px; background: var(--d2-panel); }
.dgbc2-head { padding: 20px 22px; display: grid; gap: 14px; }
.dgbc2-head-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.dgbc2-head-top h3 { font-size: 24px !important; font-weight: 700 !important; overflow-wrap: anywhere; line-height: 1.2 !important; }
.dgbc2-pill { font-family: var(--d2-mono); font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid currentColor; }
.dgbc2-pill.is-ok { color: var(--d2-accent); }
.dgbc2-pill.is-warn { color: var(--d2-warn); }
.dgbc2-pill.is-err { color: var(--d2-error); }
.dgbc2-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.dgbc2-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: end; }
.dgbc2-fact { display: grid; gap: 2px; }
.dgbc2-fact small { font-size: 12px; color: var(--d2-dim); }
.dgbc2-big { font-family: var(--d2-mono); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dgbc2-big.is-warn { color: var(--d2-warn); }
.dgbc2-big.is-err { color: var(--d2-error); }
.dgbc2-mid { font-size: 14.5px; }
.dgbc2-mid.is-warn { color: var(--d2-warn); font-weight: 600; }
.dgbc2-live { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.dgbc2-live small { color: var(--d2-dim); font-size: 12.5px; }
.dgbc2-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--d2-dim); }
.dgbc2-live.is-on .dgbc2-dot { background: var(--d2-accent); box-shadow: 0 0 0 4px rgba(99, 255, 199, .16); animation: dgbc2-pulse 2.4s ease-in-out infinite; }
@keyframes dgbc2-pulse { 50% { box-shadow: 0 0 0 7px rgba(99, 255, 199, .05); } }
.dgbc2-tech > summary { display: inline; cursor: pointer; list-style: none; color: var(--d2-muted); font-size: 13px; text-decoration: underline; text-decoration-color: var(--d2-line-2); text-underline-offset: 3px; }
.dgbc2-tech > summary::-webkit-details-marker { display: none; }
.dgbc2-tech-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 18px; padding: 12px 14px; border-radius: 11px; background: var(--d2-sunk); border: 1px solid var(--d2-line); }
.dgbc2-tech-grid div { display: grid; font-size: 13px; }
.dgbc2-tech-grid small { color: var(--d2-dim); font-size: 11.5px; }
.dgbc2-tech-grid span { font-family: var(--d2-mono); overflow-wrap: anywhere; }
.dgbc2-head .dgbc-referral-notice { margin: 0 !important; }

/* Продление */
.dgbc2-renew { padding: 18px 22px; display: grid; gap: 12px; border-top: 1px solid var(--d2-line); }
.dgbc2-renew-title { font-weight: 700; font-size: 16px; }
.dgbc2-renew-note { font-size: 13px; color: var(--d2-muted); max-width: 72ch; }
.dgbc2-terms { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.dgbc2 a.dgbc2-term {
    display: grid !important; gap: 2px; position: relative; padding: 12px !important; margin: 0 !important;
    border: 1px solid var(--d2-line) !important; border-radius: 12px !important; background: var(--d2-sunk) !important;
    color: var(--d2-text) !important; text-decoration: none !important;
}
.dgbc2 a.dgbc2-term:hover { border-color: var(--d2-accent) !important; background: var(--d2-accent-soft) !important; }
.dgbc2-term .dgbc-renew-main { display: grid; gap: 2px; }
.dgbc2-term .dgbc-renew-term { font-weight: 700; font-size: 15px; }
.dgbc2-term .dgbc-renew-price { font-family: var(--d2-mono); font-size: 13px; color: var(--d2-muted); }
.dgbc2-term .dgbc-renew-discount { position: absolute; top: -8px; right: 8px; font-family: var(--d2-mono); font-size: 10.5px; background: var(--d2-warn); color: #241c00; border-radius: 6px; padding: 1px 6px; font-weight: 700; }

/* Баннеры */
.dgbc2-banner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; padding: 14px 18px; border-radius: 14px; border: 1px solid; }
.dgbc2-banner > svg { width: 22px; height: 22px; grid-row: span 2; margin-top: 2px; }
.dgbc2-banner strong { font-size: 15px; color: var(--d2-text); }
.dgbc2-banner p { font-size: 13.5px; color: var(--d2-muted); }
.dgbc2-banner .dgbc2-row { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dgbc2-banner.is-warn { border-color: rgba(255, 223, 126, .35); background: var(--d2-warn-soft); color: var(--d2-warn); }
.dgbc2-banner.is-err { border-color: rgba(255, 133, 133, .35); background: var(--d2-error-soft); color: var(--d2-error); }
.dgbc2-banner.is-info { border-color: var(--d2-line-2); background: var(--d2-accent-soft); color: var(--d2-accent); }
/* Профиль создаётся: значок крутится, пока страница ждёт готовый профиль */
.dgbc2-banner.is-busy > svg { animation: dgbc2-spin 1.6s linear infinite; }
@keyframes dgbc2-spin { to { transform: rotate(360deg); } }
.dgbc2 .dgbc2-keybox .dgbc2-btn:disabled { opacity: .5; cursor: default; }

/* Инструкция */
.dgbc2-setup { padding: 8px 22px 22px; }
.dgbc2-setup-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 14px 0 4px; }
.dgbc2-setup-h h4 { font-size: 19px !important; }
.dgbc2-setup-h span { font-size: 13px; color: var(--d2-dim); }
.dgbc2-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 14px; padding-top: 18px; }
.dgbc2-step-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--d2-mono); font-weight: 700; font-size: 14px; color: var(--d2-accent); border: 1px solid var(--d2-line-2); background: var(--d2-sunk); }
.dgbc2-rail { grid-column: 1; grid-row: 2; width: 1px; background: var(--d2-line); justify-self: center; margin-top: 4px; }
.dgbc2-step:last-child .dgbc2-rail { display: none; }
.dgbc2-step-body { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding-bottom: 6px; min-width: 0; }
.dgbc2-pane { grid-template-columns: minmax(0, 1fr); }
.dgbc2-step-title { font-weight: 700; font-size: 16px; line-height: 34px; }
.dgbc2-hint { font-size: 12.5px; color: var(--d2-dim); }
.dgbc2-plats { display: flex; flex-wrap: wrap; gap: 6px; }
.dgbc2 .dgbc2-plat {
    display: inline-flex !important; align-items: center !important; gap: 7px; margin: 0 !important; padding: 8px 13px !important; min-height: 0 !important; width: auto !important;
    border: 1px solid var(--d2-line) !important; border-radius: 11px !important; background: var(--d2-sunk) !important;
    color: var(--d2-muted) !important; font-size: 14px !important; font-weight: 500 !important; box-shadow: none !important;
}
.dgbc2 .dgbc2-plat svg { width: 16px; height: 16px; }
.dgbc2 .dgbc2-plat[aria-pressed="true"] { border-color: var(--d2-accent) !important; color: var(--d2-text) !important; background: var(--d2-accent-soft) !important; }
.dgbc2 .dgbc2-plat[aria-pressed="true"] svg { color: var(--d2-accent); }
.dgbc2-pane { display: grid; gap: 10px; min-width: 0; }
.dgbc2-app-main { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.dgbc2-src { font-family: var(--d2-mono); font-size: 12px; color: var(--d2-dim); }
.dgbc2-alts { border-left: 2px solid var(--d2-line); padding-left: 12px; }
.dgbc2-alts > summary { cursor: pointer; font-size: 13.5px; color: var(--d2-muted); list-style: none; display: inline-flex; gap: 6px; align-items: center; }
.dgbc2-alts > summary::-webkit-details-marker { display: none; }
.dgbc2-alts > summary::before { content: "›"; display: inline-block; transition: transform .2s; color: var(--d2-accent); font-weight: 700; }
.dgbc2-alts[open] > summary::before { transform: rotate(90deg); }
.dgbc2-alts ul { list-style: none !important; margin: 8px 0 0 !important; padding: 0 !important; display: grid; gap: 6px; }
.dgbc2-alts li { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; font-size: 13.5px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.dgbc2-alts li::before { content: none !important; }
.dgbc2-alts li a { color: var(--d2-accent) !important; font-weight: 600; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-color: var(--d2-line-2) !important; }
.dgbc2-alts li span { color: var(--d2-dim); font-size: 12.5px; }
.dgbc2-alts p { font-size: 13.5px; color: var(--d2-muted); margin-top: 8px; }
.dgbc2-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--d2-line); padding-bottom: 10px; }
.dgbc2 .dgbc2-tab {
    display: inline-flex !important; gap: 8px; align-items: center !important; margin: 0 !important; padding: 7px 12px !important; min-height: 0 !important; width: auto !important;
    border: 1px solid transparent !important; border-radius: 10px !important; background: transparent !important;
    color: var(--d2-muted) !important; font-size: 14px !important; font-weight: 500 !important; box-shadow: none !important;
}
.dgbc2 .dgbc2-tab[aria-selected="true"] { border-color: var(--d2-line-2) !important; background: var(--d2-raised) !important; color: var(--d2-text) !important; }
.dgbc2-tab em { font-style: normal; font-family: var(--d2-mono); font-size: 10.5px; color: var(--d2-ink); background: var(--d2-accent); border-radius: 5px; padding: 1px 5px; font-weight: 700; }
.dgbc-cabinet .dgbc2 .dgbc2-method { display: flex !important; flex-wrap: wrap !important; gap: 18px !important; align-items: flex-start !important; width: 100% !important; }
.dgbc-cabinet .dgbc2 .dgbc2-method > ol { flex: 1 1 300px !important; min-width: 0 !important; max-width: 100% !important; }
.dgbc-cabinet .dgbc2 .dgbc2-method > .dgbc2-visual { flex: 0 0 210px !important; width: 210px !important; max-width: 100% !important; position: static !important; float: none !important; }
.dgbc2-method li > span { min-width: 0; overflow-wrap: anywhere; }
.dgbc2-method ol { padding: 0 !important; list-style: none !important; counter-reset: d2m; display: grid; gap: 10px; }
.dgbc2-method li { counter-increment: d2m; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 14.5px; line-height: 1.5; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.dgbc2-method li::before { content: counter(d2m); font-family: var(--d2-mono); font-size: 12px; color: var(--d2-dim); padding-top: 2px; }
.dgbc2-method li .dgbc2-btn { margin-top: 8px !important; }
.dgbc2-note { font-size: 13px; color: var(--d2-muted); background: var(--d2-sunk); border: 1px solid var(--d2-line); border-radius: 10px; padding: 10px 12px; }
.dgbc2-note b { color: var(--d2-warn); font-weight: 600; }
.dgbc2-visual { display: grid; gap: 6px; justify-items: center; margin: 0 !important; }
.dgbc2-visual figcaption { font-size: 11.5px; color: var(--d2-dim); text-align: center; }
.dgbc2-shot { display: block; width: 100%; max-width: 210px; border-radius: 18px; border: 1px solid var(--d2-line-2); overflow: hidden; background: #000; }
.dgbc2-shot.is-wide { border-radius: 10px; }
.dgbc2-shot img { display: block; width: 100%; height: auto; margin: 0 !important; }
.dgbc2-qr { display: block; background: #fff; border-radius: 14px; padding: 10px; width: 100%; max-width: 210px; min-height: 120px; }
.dgbc-cabinet .dgbc2 .dgbc2-qr img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; }
.dgbc2-qr span { color: #445; font-size: 12px; }
.dgbc2-chat { width: 100%; max-width: 210px; border-radius: 18px; border: 1px solid var(--d2-line-2); background: #0e1621; padding: 12px; display: grid; gap: 10px; font-size: 12px; }
.dgbc2-chat-top { color: #8aa0b5; text-align: center; font-weight: 600; }
.dgbc2-bubble { justify-self: end; background: #2b5278; border-radius: 12px 12px 3px 12px; padding: 8px 10px; display: flex; gap: 8px; align-items: center; max-width: 100%; }
.dgbc2-bubble i { width: 30px; height: 30px; border-radius: 50%; background: #4a90d9; display: grid; place-items: center; font-style: normal; flex: none; color: #fff; }
.dgbc2-bubble i svg { width: 14px; height: 14px; }
.dgbc2-bubble b { display: block; font-family: var(--d2-mono); font-size: 10px; color: #fff; overflow-wrap: anywhere; font-weight: 600; }
.dgbc2-sheet { background: #1c2733; border-radius: 12px; padding: 6px; display: grid; gap: 2px; }
.dgbc2-sheet div { padding: 7px 8px; border-radius: 8px; color: #c9d6e2; }
.dgbc2-sheet div.is-hl { background: rgba(99, 255, 199, .16); color: #fff; font-weight: 600; }
.dgbc2-sheet p { margin: 0 !important; padding: 2px 8px 4px; font-size: 10.5px; color: #8aa0b5; }
.dgbc2-sheet div { display: flex; align-items: center; gap: 8px; }
.dgbc2-sheet div i { width: 20px; height: 20px; border-radius: 6px; background: #34495e; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 700; color: #fff; flex: none; }
.dgbc2-sheet div.is-hl i { background: var(--d2-accent); color: var(--d2-ink); }
.dgbc2-bar { display: flex; justify-content: space-between; align-items: center; padding: 2px 6px; color: #8aa0b5; font-size: 16px; }
.dgbc2-bar .is-hl { color: var(--d2-accent); border-radius: 8px; padding: 3px; box-shadow: 0 0 0 2px rgba(99, 255, 199, .55); }
.dgbc2-bar svg { display: block; width: 18px; height: 18px; }
.dgbc2-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; background: #1c2733; border-radius: 12px; padding: 8px 4px; }
.dgbc2-apps span { display: grid; justify-items: center; gap: 3px; font-size: 9px; color: #c9d6e2; text-align: center; overflow-wrap: anywhere; }
.dgbc2-apps i { width: 28px; height: 28px; border-radius: 8px; background: #34495e; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; }
.dgbc2-apps .is-hl i { box-shadow: 0 0 0 2px var(--d2-accent); }
.dgbc2-ico-inline { display: inline-grid; place-items: center; width: 24px; height: 24px; vertical-align: -6px; border-radius: 6px; border: 1px solid var(--d2-line-2); color: var(--d2-accent); }
.dgbc2-ico-inline svg { width: 15px; height: 15px; }
.dgbc2-keybox { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; padding: 8px; border: 1px solid var(--d2-line); border-radius: 10px; background: var(--d2-sunk); }
.dgbc2-keybox code { flex: 1 1 200px; min-width: 0; background: none; border: 0; padding: 0 4px; max-height: 4.6em; overflow: hidden; }
.dgbc2 .dgbc2-keybox .dgbc2-btn { margin-top: 0 !important; min-height: 36px !important; padding: 7px 12px !important; font-size: 13px !important; }
.dgbc2-custom { font-size: 14px; color: var(--d2-muted); }
.dgbc2-custom a { color: var(--d2-accent) !important; }

/* Обновление файла */
.dgbc2-update { padding: 18px 22px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; }
.dgbc2-update.is-hot { border-color: rgba(255, 223, 126, .4); box-shadow: 0 0 0 3px rgba(255, 223, 126, .06); }
/* Иконка вынесена из сетки: сколько бы строк ни было в блоке, кнопка не уезжает в левую колонку. */
.dgbc-cabinet .dgbc2 .dgbc2-update { position: relative; grid-template-columns: minmax(0, 1fr); padding-left: 62px; }
.dgbc2-update > svg { position: absolute; left: 22px; top: 20px; width: 24px; height: 24px; color: var(--d2-accent); }
@media (max-width: 520px) { .dgbc-cabinet .dgbc2 .dgbc2-update { padding-left: 50px; } .dgbc2-update > svg { left: 16px; } }
.dgbc2-update.is-hot > svg { color: var(--d2-warn); }
.dgbc2-update h4 { font-size: 17px !important; }
.dgbc2-update p { font-size: 13.5px; color: var(--d2-muted); max-width: 66ch; }
.dgbc2-update ol { margin: 8px 0 0 !important; padding-left: 20px !important; display: grid; gap: 4px; font-size: 14px; }
.dgbc2-update ol li { margin: 0 !important; }
.dgbc2-update .dgbc2-btn { margin-top: 10px !important; justify-self: start; }
.dgbc2-locked { padding: 22px; display: grid; gap: 10px; justify-items: start; }
.dgbc2-locked p { color: var(--d2-muted); font-size: 14px; max-width: 60ch; }
.dgbc2 .dgbc2-linkish { background: none !important; border: 0 !important; padding: 0 !important; min-height: 0 !important; color: var(--d2-muted) !important; font-size: 13px !important; text-decoration: underline; text-decoration-color: var(--d2-line-2); text-underline-offset: 3px; box-shadow: none !important; width: auto !important; }
.dgbc2-empty { padding: 22px; display: grid; gap: 12px; justify-items: start; }
.dgbc2-empty p { color: var(--d2-muted); max-width: 62ch; }

/* Окно «Новое устройство» */
.dgbc-cabinet .dgbc2 .dgbc2-dialog { width: min(calc(100vw - 32px), 460px) !important; max-width: min(calc(100vw - 32px), 460px) !important; height: auto !important; max-height: calc(100vh - 32px) !important; margin: auto !important; padding: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; border: 1px solid var(--d2-line-2) !important; border-radius: 18px !important; background: var(--d2-raised) !important; color: var(--d2-text) !important; }
.dgbc-cabinet .dgbc2 .dgbc2-dialog * { max-width: 100%; }
.dgbc2-update-last { color: var(--d2-text) !important; }
.dgbc2-dialog::backdrop { background: rgba(3, 8, 8, .72); backdrop-filter: blur(3px); }
.dgbc2-dialog-in { padding: 22px; display: grid; gap: 14px; }
.dgbc2-dialog h4 { font-size: 19px !important; }
.dgbc2-dialog p { font-size: 13.5px; color: var(--d2-muted); }
.dgbc-cabinet .dgbc2 .dgbc2-add-form { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
.dgbc-cabinet .dgbc2 .dgbc2-dialog label { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; width: 100% !important; margin: 0 !important; font-size: 13px !important; color: var(--d2-muted) !important; }
.dgbc-cabinet .dgbc2 .dgbc2-dialog select { display: block !important; min-height: 46px !important; max-width: 100% !important; appearance: auto; }
.dgbc-cabinet .dgbc2 .dgbc2-dialog-row .dgbc2-btn { flex: 1 1 140px !important; }
.dgbc2-dialog select { width: 100% !important; background: var(--d2-sunk) !important; color: var(--d2-text) !important; border: 1px solid var(--d2-line-2) !important; border-radius: 10px !important; padding: 10px !important; font: inherit !important; font-size: 14px !important; height: auto !important; }
.dgbc2-dialog-row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.dgbc2-dialog small { font-size: 12px; color: var(--d2-dim); line-height: 1.45; }

/* 0.5.27: оплата в списке устройств — галочка в карточке и блок «Оплата» под списком */
.dgbc2-devitem { position: relative; min-width: 0; }
.dgbc2-dev-check { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); z-index: 1; display: flex; padding: 4px; margin: -4px; cursor: pointer; }
.dgbc2-dev-check input { width: 20px !important; height: 20px !important; margin: 0 !important; accent-color: var(--d2-accent); cursor: pointer; }
.dgbc2 .dgbc2-devitem.has-check .dgbc2-dev { padding-left: 46px !important; grid-template-columns: minmax(0, 1fr) auto; }
.dgbc2-devitem.has-check .dgbc2-dev-ico { display: none; }
.dgbc2-dev-status { font-size: 12.5px; color: var(--d2-muted); line-height: 1.35; margin-top: 2px; }
.dgbc2-devitem.is-checked .dgbc2-dev-status { color: var(--d2-accent); }
.dgbc2-dev-status.is-err { color: var(--d2-error); }
.dgbc-cabinet .dgbc2 .dgbc2-pay { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; margin: 0 !important; padding: 14px !important; width: 100% !important; border: 1px solid var(--d2-line-2); border-radius: 14px; background: var(--d2-panel); }
.dgbc2-pay.is-flash { animation: dgbc2-flash 1.2s ease-out; }
@keyframes dgbc2-flash { 0% { box-shadow: 0 0 0 4px rgba(99, 255, 199, .45); } 100% { box-shadow: 0 0 0 0 rgba(99, 255, 199, 0); } }
.dgbc2-pay-h { font-weight: 700; font-size: 15px; }
.dgbc2-pay small { font-size: 12px; color: var(--d2-dim); line-height: 1.45; }
.dgbc-cabinet .dgbc2 .dgbc2-pay-btn { width: 100% !important; }
.dgbc2-ra-terms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.dgbc2-ra-term { display: block; position: relative; margin: 0; cursor: pointer; }
.dgbc2-ra-term input { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; margin: 0 !important; pointer-events: none; }
.dgbc2-ra-term span { display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 6px 4px; border: 1px solid var(--d2-line-2); border-radius: 10px; background: var(--d2-sunk); color: var(--d2-text); font-size: 13px; font-weight: 600; text-align: center; line-height: 1.2; white-space: nowrap !important; }
.dgbc2-ra-term:hover span { border-color: var(--d2-accent); }
.dgbc2-ra-term input:checked + span { background: var(--d2-accent); border-color: var(--d2-accent); color: var(--d2-ink); font-weight: 800; box-shadow: 0 0 0 3px rgba(99, 255, 199, .18); }
.dgbc2-ra-term input:focus-visible + span { outline: 2px solid var(--d2-accent); outline-offset: 2px; }
.dgbc2-ra-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; color: var(--d2-muted); }
.dgbc2-ra-total strong { font-family: var(--d2-mono); font-size: 20px; color: var(--d2-accent); white-space: nowrap !important; }
.dgbc2-ra-error { color: var(--d2-error); font-weight: 600; font-size: 13px; }
@media (max-width: 900px) {
    /* С галочками оплаты список на телефоне вертикальный: видно, что отмечено. */
    .dgbc2-devlist.is-pay { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; padding-bottom: 0; }
}
.dgbc-cabinet .dgbc2 .dgbc2-ra-term span,.dgbc-cabinet .dgbc2 .dgbc2-ra-total strong { white-space: nowrap !important; }

.dgbc2-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 99999; background: var(--d2-text); color: var(--d2-ink); padding: 10px 16px; border-radius: 12px; font-size: 13.5px; font-weight: 600; max-width: calc(100% - 32px); text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); font-family: var(--d2-sans); }

@media (max-width: 900px) {
    .dgbc2-layout { grid-template-columns: minmax(0, 1fr); }
    .dgbc2-aside { position: static; }
    .dgbc2-devlist { grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); overflow-x: auto; padding-bottom: 4px; }
    .dgbc2-ref { order: 5; }
    .dgbc-cabinet .dgbc2 .dgbc2-method > .dgbc2-visual { flex-basis: 100% !important; width: 100% !important; justify-items: start; }
}
@media (max-width: 520px) {
    .dgbc2-head, .dgbc2-setup, .dgbc2-renew, .dgbc2-update { padding-left: 16px; padding-right: 16px; }
    .dgbc2-actions { margin-left: 0; width: 100%; }
    .dgbc2-actions .dgbc2-btn { flex: 1 1 auto; }
    .dgbc2-facts { gap: 10px 20px; }
    .dgbc2-big { font-size: 18px; }
    .dgbc2-step { grid-template-columns: 28px minmax(0, 1fr); gap: 0 10px; }
    .dgbc2-step-n { width: 28px; height: 28px; font-size: 12px; }
    .dgbc2-step-title { line-height: 28px; }
    .dgbc2-acct h2 { width: 100%; }
    .dgbc2-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .dgbc2 *, .dgbc2 *::before { animation: none !important; transition: none !important; }
}