/* Shared page layer for boxed theme */
.bx-content.pd-page-content,
.pd-page-content {
    width: 100%;
    max-width: none;
}
.pd-page-content > .container {
    max-width: none;
    margin: 0;
    padding: 0;
}
.pd-page-content > .container.narrow {
    max-width: 760px;
    margin: 0 auto;
}

/* Add Site — premium layout */
.add-site {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.add-site-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 22px 24px;
    border: 1px solid var(--bx-line, var(--pd-line));
    border-radius: 18px;
    background:
        radial-gradient(700px 180px at 0% 0%, rgba(124,58,237,.12), transparent 58%),
        radial-gradient(500px 160px at 100% 0%, rgba(16,185,129,.08), transparent 50%),
        color-mix(in srgb, var(--bx-box, #fff) 94%, var(--bx-canvas, #eef2f8));
    box-shadow: none;
}
.add-hero-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.add-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #fff;
    background: linear-gradient(145deg, #8b5cf6, #10b981);
    box-shadow: none;
}
.add-hero-icon svg { width: 24px; height: 24px; }
.add-site-hero h1 {
    margin: 0;
    font-size: 22px;
    letter-spacing: -.45px;
    color: var(--bx-text, var(--pd-text));
}
.add-site-hero p {
    margin: 4px 0 0;
    color: var(--bx-muted, var(--pd-muted));
    font-size: 12.5px;
}
.add-site-steps {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.add-site-steps span {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px 0 6px;
    border-radius: 999px;
    border: 1px solid var(--bx-line, var(--pd-line));
    color: var(--bx-muted, var(--pd-muted));
    background: rgba(255,255,255,.5);
    font-size: 11px;
    font-weight: 750;
}
.add-site-steps span i {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
    color: var(--bx-muted, var(--pd-muted));
    background: color-mix(in srgb, var(--bx-canvas, #eef2f8) 70%, transparent);
}
.add-site-steps span.on {
    color: #6d28d9;
    border-color: rgba(124,58,237,.28);
    background: rgba(124,58,237,.1);
    box-shadow: none;
}
.add-site-steps span.on i {
    color: #fff;
    background: linear-gradient(145deg, #8b5cf6, #7c3aed);
}

.add-site-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: stretch;
}
.add-panel {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 20px;
    border: 1px solid var(--bx-line, var(--pd-line));
    border-radius: 18px;
    background: color-mix(in srgb, var(--bx-box, #fff) 96%, var(--bx-canvas, #eef2f8));
    box-shadow: none;
}
.add-panel-wide { grid-column: 1 / -1; }
.add-panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--bx-line, var(--pd-line));
}
.add-panel-head b {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(145deg, #8b5cf6, #7c3aed);
    font-size: 12px;
    font-weight: 800;
    box-shadow: none;
}
.add-panel-head strong, .add-panel-head small { display: block; }
.add-panel-head strong {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.2px;
    color: var(--bx-text, var(--pd-text));
}
.add-panel-head small {
    margin-top: 2px;
    color: var(--bx-muted, var(--pd-muted));
    font-size: 11.5px;
}
.add-inline {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.add-inline input { flex: 1; min-width: 0; }
.add-inline .btn {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 14px;
    white-space: nowrap;
    border-radius: 10px;
}
.add-submit {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin-top: 2px;
}
.add-submit .btn {
    width: 100%;
    max-width: 260px;
    min-height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(145deg, #8b5cf6, #7c3aed);
    box-shadow: none;
    font-size: 13.5px;
    font-weight: 800;
}
.add-submit .btn:hover { filter: brightness(1.05); transform: translateY(-1px); }

.add-site .form-group { margin-bottom: 14px; }
.add-site .form-group:last-child { margin-bottom: 0; }
.add-site .form-row { gap: 12px; }
.add-site .hint {
    margin-top: 6px;
    color: var(--bx-faint, #94a3b8);
    font-size: 11px;
}

.add-site-compact { gap: 10px; }
.add-site-compact .add-panel {
    padding: 16px 18px 14px;
    min-height: 0;
}
.add-site-compact .add-panel-head {
    margin-bottom: 12px;
    padding-bottom: 10px;
}
.add-site-compact .add-panel-head b {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 16px;
}
.add-site-compact .form-group { margin-bottom: 10px; }
.add-site-compact .add-submit { margin-top: 4px; }

[data-theme="dark"] .add-site-hero,
[data-theme="dark"] .add-panel {
    background: var(--bx-box, #111522);
    box-shadow: none;
}
[data-theme="dark"] .add-site-steps span {
    background: rgba(255,255,255,.03);
}
[data-theme="dark"] .add-site-steps span i {
    background: rgba(255,255,255,.06);
}

@media (max-width: 980px) {
    .add-site-grid { grid-template-columns: 1fr; }
    .add-site-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px;
    }
    .add-site-hero h1 { font-size: 19px; }
}

/* Edit Site — premium meta + actions */
.edit-site-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
.edit-meta-chip {
    min-width: 88px;
    padding: 8px 12px;
    border: 1px solid var(--bx-line, var(--pd-line));
    border-radius: 12px;
    background: rgba(255,255,255,.55);
}
.edit-meta-chip small {
    display: block;
    color: var(--bx-faint, #8b95ab);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.edit-meta-chip strong {
    display: block;
    margin-top: 3px;
    color: var(--bx-text, var(--pd-text));
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: -.15px;
}
.edit-meta-chip .tmpl-pill {
    color: #6d28d9;
}
.edit-meta-chip .mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
}
.edit-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.edit-actions .btn {
    min-height: 44px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 800;
    box-shadow: none;
}
.edit-actions .btn:not(.ghost) {
    border: 0;
    color: #fff;
    background: linear-gradient(145deg, #8b5cf6, #7c3aed);
}
.edit-actions .btn:not(.ghost):hover { filter: brightness(1.05); transform: translateY(-1px); }
.edit-cf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
[data-theme="dark"] .edit-meta-chip {
    background: rgba(255,255,255,.03);
}
@media (max-width: 720px) {
    .edit-site-meta { justify-content: flex-start; width: 100%; }
    .edit-actions { grid-template-columns: 1fr; }
}

.pd-page-content .page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 16px;
    padding: 16px 18px;
    border: 1px solid var(--bx-line, var(--pd-line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--bx-box, #fff) 90%, var(--bx-canvas, #f3f5f9));
}
.pd-page-content .page-title {
    color: var(--bx-text, var(--pd-text));
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.3px;
}
.pd-page-content .page-title .muted {
    color: var(--bx-faint, var(--pd-faint));
    font-size: 13px;
}
.pd-page-content .page-desc {
    color: var(--bx-muted, var(--pd-muted));
    font-size: 12px;
    margin-top: 4px;
}
.pd-page-content .card {
    padding: 22px;
    border: 1px solid var(--bx-line, var(--pd-line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--bx-box, #fff) 90%, var(--bx-canvas, #f3f5f9));
    box-shadow: none;
}
.pd-page-content .card-title {
    color: var(--bx-text, var(--pd-text));
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.3px;
}
.pd-page-content .card-sub {
    margin: 4px 0 20px;
    color: var(--bx-muted, var(--pd-muted));
    font-size: 12px;
}
.pd-page-content .section-title {
    margin: 22px 0 12px;
    color: var(--bx-text, var(--pd-text));
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.pd-page-content .section-title:after {
    background: var(--bx-line, var(--pd-line));
}

.pd-page-content .form-group { margin-bottom: 16px; }
.pd-page-content .form-group > label {
    display: flex; align-items: center;
    color: var(--bx-muted, var(--pd-muted));
    font-size: 10px; font-weight: 800;
    letter-spacing: .7px; text-transform: uppercase;
    margin-bottom: 6px;
}
.pd-page-content input[type="text"],
.pd-page-content input[type="password"],
.pd-page-content input[type="number"],
.pd-page-content input[type="url"],
.pd-page-content input[type="email"],
.pd-page-content select,
.pd-page-content textarea {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--bx-line, var(--pd-line));
    border-radius: 10px;
    color: var(--bx-text, var(--pd-text));
    background: var(--bx-box, var(--pd-panel-solid));
    font-size: 13px;
    outline: 0;
    box-shadow: none;
}
.pd-page-content textarea { min-height: 100px; resize: vertical; }
.pd-page-content input:focus,
.pd-page-content select:focus,
.pd-page-content textarea:focus {
    border-color: var(--bx-accent, var(--pd-purple));
    box-shadow: 0 0 0 3px var(--bx-accent-soft, rgba(79,70,229,.1));
}
.pd-page-content input[readonly],
.pd-page-content input:disabled {
    color: var(--bx-faint, var(--pd-faint));
    background: color-mix(in srgb, var(--bx-canvas, #eef1f6) 70%, transparent);
}

.pd-page-content .btn,
.pd-page-content .btn-add {
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: var(--bx-accent, var(--pd-purple));
    box-shadow: none;
    font-size: 12px;
    font-weight: 800;
}
.pd-page-content .btn:after,
.pd-page-content .btn-add:after { display: none; }
.pd-page-content .btn:hover,
.pd-page-content .btn-add:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}
.pd-page-content .btn.ghost {
    color: var(--bx-muted, var(--pd-muted));
    border: 1px solid var(--bx-line, var(--pd-line));
    background: transparent;
}
.pd-page-content .btn.ghost:hover {
    color: var(--bx-text, var(--pd-text));
    border-color: var(--bx-accent, var(--pd-purple));
    background: var(--bx-accent-soft, rgba(79,70,229,.08));
}

.pd-page-content .table-wrap {
    overflow: hidden;
    border: 1px solid var(--bx-line, var(--pd-line));
    border-radius: 14px;
    background: transparent;
    box-shadow: none;
}
.pd-page-content table { width: 100%; border-collapse: collapse; }
.pd-page-content thead {
    background: color-mix(in srgb, var(--bx-canvas, #eef1f6) 70%, transparent);
}
.pd-page-content th {
    height: 40px;
    padding: 0 14px;
    border-bottom: 1px solid var(--bx-line, var(--pd-line));
    color: var(--bx-faint, var(--pd-faint));
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
}
.pd-page-content td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--bx-line, var(--pd-line));
    color: var(--bx-muted, var(--pd-muted));
    font-size: 12px;
}
.pd-page-content tbody tr:last-child td { border-bottom: 0; }
.pd-page-content tbody tr:hover {
    background: var(--bx-accent-soft, rgba(79,70,229,.05));
}
.pd-page-content .cell-name {
    color: var(--bx-text, var(--pd-text));
    font-size: 12.5px;
    font-weight: 750;
}

.pd-page-content .chip,
.pd-page-content .tmpl,
.pd-page-content .role-badge,
.pd-page-content .badge {
    border-radius: 7px;
    font-size: 10px;
    font-weight: 800;
}
.pd-page-content .chip {
    padding: 4px 7px;
    color: var(--bx-accent, var(--pd-purple));
    background: var(--bx-accent-soft, rgba(79,70,229,.1));
    border: 0;
}
.pd-page-content .badge.status-active {
    color: var(--bx-green, var(--pd-green));
    background: rgba(5,150,105,.1);
    border-color: transparent;
}
.pd-page-content .badge.status-inactive {
    color: var(--bx-red, var(--pd-red));
    background: rgba(220,38,38,.08);
    border-color: transparent;
}

.pd-page-content .alert {
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 12px;
}
.pd-page-content .alert.error {
    color: var(--bx-red, var(--pd-red));
    border: 1px solid rgba(220,38,38,.18);
    background: rgba(220,38,38,.08);
}
.pd-page-content .alert.success {
    color: var(--bx-green, var(--pd-green));
    border: 1px solid rgba(5,150,105,.18);
    background: rgba(5,150,105,.08);
}

.pd-page-content .mini {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border: 1px solid var(--bx-line, var(--pd-line));
    border-radius: 7px;
    color: var(--bx-muted, var(--pd-muted));
    background: transparent;
    font-size: 10px;
    font-weight: 700;
    box-shadow: none;
}
.pd-page-content .mini:hover {
    color: var(--bx-text, var(--pd-text));
    border-color: var(--bx-line-2, var(--pd-line-strong));
}
.pd-page-content .mini.del:hover {
    color: var(--bx-red, var(--pd-red));
    border-color: rgba(220,38,38,.3);
    background: rgba(220,38,38,.08);
}

.pd-page-content .tawk-hint {
    display: none;
    border: 1px solid var(--bx-line, var(--pd-line));
    border-left: 3px solid var(--bx-accent, var(--pd-purple));
    border-radius: 10px;
    color: var(--bx-muted, var(--pd-muted));
    background: var(--bx-accent-soft, rgba(79,70,229,.05));
    box-shadow: none;
    max-width: 100%;
    overflow: hidden;
}
.pd-page-content .tawk-hint.show { display: block; }
.pd-page-content .tawk-hint-url {
    word-break: break-all;
    overflow-wrap: anywhere;
    white-space: normal;
}
.pd-page-content .checkbox-item {
    border: 1px solid var(--bx-line, var(--pd-line));
    border-radius: 9px;
    color: var(--bx-text, var(--pd-text));
    background: transparent;
}
.pd-page-content .checkbox-item:hover,
.pd-page-content .checkbox-item:has(input:checked) {
    border-color: color-mix(in srgb, var(--bx-accent, #4f46e5) 35%, transparent);
    background: var(--bx-accent-soft, rgba(79,70,229,.07));
}

.pd-page-content .steps {
    padding: 14px;
    border: 1px solid var(--bx-line, var(--pd-line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--bx-canvas, #eef1f6) 50%, transparent);
}

/* Shared boxed cards */
.box-card {
    padding: 18px;
    border: 1px solid var(--bx-line, var(--pd-line));
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)),
        color-mix(in srgb, var(--bx-box, #fff) 94%, var(--bx-canvas, #f3f5f9));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
[data-theme="dark"] .box-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
        color-mix(in srgb, var(--bx-box, #111522) 92%, #000);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.box-card-title {
    margin: 0 0 14px;
    color: var(--bx-text, var(--pd-text));
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.settings-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Settings hero */
.settings-hero {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
    padding: 22px 24px; border-radius: 18px;
    border: 1px solid var(--bx-line);
    background:
        radial-gradient(700px 200px at 0% 0%, rgba(124,58,237,.13), transparent 60%),
        color-mix(in srgb, var(--bx-box, #fff) 94%, var(--bx-canvas, #eee));
}
.settings-hero-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.settings-hero-icon {
    width: 52px; height: 52px; border-radius: 15px; flex: 0 0 auto;
    display: grid; place-items: center; color: #fff;
    background: linear-gradient(145deg, #8b5cf6, #7c3aed);
    box-shadow: 0 12px 26px -14px rgba(124,58,237,.75);
}
.settings-hero-icon svg { width: 24px; height: 24px; }
.settings-hero h1 { margin: 2px 0 0; font-size: 22px; letter-spacing: -.5px; color: var(--bx-text); }
.settings-hero p { margin: 4px 0 0; color: var(--bx-muted); font-size: 12.5px; }

/* Settings layout */
.settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 14px;
    align-items: start;
}
.settings-security {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(124,58,237,.22);
    border-radius: 8px;
    color: var(--bx-accent, #7c3aed);
    background: var(--bx-accent-soft, rgba(124,58,237,.08));
    font-size: 11px;
    font-weight: 750;
}
.settings-security i {
    width: 7px; height: 7px; border-radius: 50%;
    background: currentColor;
}
.settings-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.settings-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--bx-accent-soft, rgba(79,70,229,.1));
    color: var(--bx-accent, #4f46e5);
    overflow: hidden;
}
.settings-icon svg {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px;
    max-height: 20px;
    display: block;
    fill: currentColor;
}
.settings-card-copy { flex: 1; min-width: 0; }
.settings-card-copy h2 { margin: 0; font-size: 16px; color: var(--bx-text); }
.settings-card-copy p { margin: 3px 0 0; font-size: 12px; color: var(--bx-muted); }

.premium-switch {
    position: relative;
    width: 44px; height: 26px;
    flex: 0 0 auto;
}
.premium-switch input { display: none; }
.premium-switch span {
    position: absolute; inset: 0;
    border-radius: 999px;
    background: var(--bx-line-2, #d5dbe8);
    cursor: pointer;
    transition: .2s;
}
.premium-switch span:before {
    content: "";
    position: absolute; top: 3px; left: 3px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; transition: .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.premium-switch input:checked + span { background: var(--bx-accent, #4f46e5); }
.premium-switch input:checked + span:before { transform: translateX(18px); }

.settings-token-state {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--bx-line);
}
.settings-token-state i {
    width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; flex: 0 0 auto;
}
.settings-token-state.ready { background: rgba(5,150,105,.08); border-color: rgba(5,150,105,.18); }
.settings-token-state.ready i { background: var(--bx-green, #059669); }
.settings-token-state.missing { background: rgba(220,38,38,.06); border-color: rgba(220,38,38,.16); }
.settings-token-state.missing i { background: var(--bx-red, #dc2626); }
.settings-token-state strong, .settings-token-state span { display: block; }
.settings-token-state strong { font-size: 12.5px; color: var(--bx-text); }
.settings-token-state span { margin-top: 2px; font-size: 11px; color: var(--bx-muted); line-height: 1.4; }

.telegram-section-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    margin-bottom: 12px;
}
.telegram-section-head strong, .telegram-section-head span { display: block; }
.telegram-section-head strong { font-size: 13px; color: var(--bx-text); }
.telegram-section-head span { margin-top: 3px; font-size: 11px; color: var(--bx-muted); }
.telegram-section-head b {
    min-height: 26px; display: inline-flex; align-items: center;
    padding: 0 8px; border-radius: 7px;
    color: var(--bx-accent); background: var(--bx-accent-soft);
    font-size: 11px;
}
.telegram-group-list { display: flex; flex-direction: column; gap: 8px; }
.telegram-group-empty {
    padding: 16px; border: 1px dashed var(--bx-line);
    border-radius: 10px; color: var(--bx-muted); font-size: 12px; text-align: center;
}
.telegram-group-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border: 1px solid var(--bx-line); border-radius: 10px;
    background: var(--bx-box, #fff);
}
.telegram-group-status {
    width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
}
.telegram-group-status.online { background: var(--bx-green); box-shadow: 0 0 0 3px rgba(5,150,105,.12); }
.telegram-group-status.offline { background: var(--bx-faint); }
.telegram-group-info { flex: 1; min-width: 0; }
.telegram-group-info strong, .telegram-group-info span { display: block; }
.telegram-group-info strong { font-size: 12.5px; color: var(--bx-text); }
.telegram-group-info span {
    margin-top: 2px; font-size: 11px; color: var(--bx-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.telegram-group-owners { display: flex; flex-wrap: wrap; gap: 4px; }
.telegram-group-owners i {
    font-style: normal; padding: 3px 7px; border-radius: 6px;
    background: var(--bx-accent-soft); color: var(--bx-accent);
    font-size: 10px; font-weight: 700;
}

.telegram-template-area {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr);
    gap: 12px;
}
.telegram-placeholders { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.telegram-placeholders button {
    min-height: 28px; padding: 0 9px; border: 1px solid var(--bx-line);
    border-radius: 7px; background: transparent; color: var(--bx-muted);
    font-size: 11px; font-weight: 700; cursor: pointer;
}
.telegram-placeholders button:hover {
    color: var(--bx-accent); border-color: rgba(79,70,229,.3); background: var(--bx-accent-soft);
}
.telegram-preview {
    padding: 12px; border: 1px solid var(--bx-line); border-radius: 10px;
    background: color-mix(in srgb, var(--bx-canvas) 55%, transparent);
}
.telegram-preview > span {
    display: block; margin-bottom: 8px;
    color: var(--bx-faint); font-size: 10px; font-weight: 800;
    letter-spacing: .8px; text-transform: uppercase;
}
.telegram-preview pre {
    margin: 0; white-space: pre-wrap; word-break: break-word;
    color: var(--bx-text); font-size: 12px; line-height: 1.45;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.settings-actions {
    display: flex; justify-content: flex-end; gap: 8px;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bx-line);
}
.settings-side { display: flex; flex-direction: column; gap: 12px; }
.settings-summary h3 { margin: 6px 0 12px; font-size: 15px; }
.settings-summary a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; border-top: 1px solid var(--bx-line);
    color: var(--bx-text); text-decoration: none; font-size: 12.5px; font-weight: 650;
}
.settings-summary a:first-of-type { border-top: 0; }
.settings-summary a:hover { color: var(--bx-accent); }
.settings-summary b { color: var(--bx-faint); font-weight: 700; }
.settings-note strong { display: block; font-size: 12.5px; margin-bottom: 6px; }
.settings-note p { margin: 0; color: var(--bx-muted); font-size: 12px; line-height: 1.5; }

/* Payments — premium */
.pay-page { display: flex; flex-direction: column; gap: 16px; }
.pay-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 22px 24px; border: 1px solid var(--bx-line, var(--border)); border-radius: 18px;
    background:
        radial-gradient(700px 180px at 0% 0%, rgba(124,58,237,.1), transparent 58%),
        radial-gradient(500px 160px at 100% 0%, rgba(16,185,129,.08), transparent 50%),
        color-mix(in srgb, var(--bx-box,#fff) 94%, var(--bx-canvas,#eef2f8));
    box-shadow: none;
}
.pay-hero-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pay-hero-icon,
.pay-hero-avatar {
    width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; flex: 0 0 auto;
    color: #fff; font-size: 22px; font-weight: 800;
    background: linear-gradient(145deg, #8b5cf6, #10b981);
    box-shadow: none;
}
.pay-hero-icon svg { width: 24px; height: 24px; }
.pay-hero h1 { margin: 0; font-size: 22px; letter-spacing: -.45px; color: var(--bx-text, var(--text)); }
.pay-hero p { margin: 4px 0 0; font-size: 12.5px; color: var(--bx-muted, var(--text-dim)); }
.pay-hero-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pay-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 11px;
    border-radius: 999px; border: 1px solid var(--bx-line, var(--border));
    background: rgba(255,255,255,.55); font-size: 11px; font-weight: 750;
    color: var(--bx-muted, var(--text-dim));
}
.pay-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pay-chip.ok { color: #059669; border-color: rgba(5,150,105,.25); background: rgba(5,150,105,.1); }
.pay-chip.soft {
    background: rgba(124,58,237,.08); border-color: rgba(124,58,237,.18); color: #7c3aed;
}
.pay-chip.warn {
    color: #b45309; border-color: rgba(180,83,9,.28); background: rgba(245,158,11,.14);
}
.data-dup-badge {
    min-height: 22px; padding: 0 8px; font-size: 10px; letter-spacing: .04em; font-weight: 800;
}
.pay-hero-btn {
    display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px;
    border-radius: 10px; text-decoration: none; font-size: 12px; font-weight: 750; color: #fff;
    background: linear-gradient(145deg, #8b5cf6, #7c3aed);
    box-shadow: none; transition: .15s;
}
.pay-hero-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.pay-hero-btn.ghost {
    color: var(--bx-text, var(--text));
    background: rgba(255,255,255,.55);
    border: 1px solid var(--bx-line, var(--border));
    box-shadow: none;
}
.pay-hero-btn.ghost:hover { border-color: rgba(124,58,237,.35); color: #7c3aed; }

.pay-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.pay-stat-card {
    position: relative; overflow: hidden;
    padding: 16px 18px; border: 1px solid var(--bx-line, var(--border)); border-radius: 16px;
    background: color-mix(in srgb, var(--bx-box,#fff) 96%, var(--bx-canvas,#eef2f8));
    box-shadow: none;
}
.pay-stat-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pay-stat-label {
    font-size: 11px; font-weight: 750; letter-spacing: .4px; text-transform: uppercase;
    color: var(--bx-muted, var(--text-dim));
}
.pay-stat-ico {
    width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto;
}
.pay-stat-ico svg { width: 15px; height: 15px; }
.pay-stat-ico.try { background: rgba(124,58,237,.1); color: #7c3aed; }
.pay-stat-ico.usdt { background: rgba(16,185,129,.12); color: #10b981; }
.pay-stat-ico.note { background: rgba(217,119,6,.12); color: #d97706; }
.pay-stat-ico.tg { background: rgba(34,158,217,.12); color: #0f7fb5; }
.pay-stat-ico.cta { background: rgba(124,58,237,.12); color: #7c3aed; }
.pay-stat-card strong {
    display: block; color: var(--bx-text, var(--text));
    font-size: 20px; font-weight: 800; letter-spacing: -.4px; line-height: 1.2;
}
.pay-stat-card strong small {
    font-size: 12px; font-weight: 700; color: var(--bx-muted, var(--text-dim)); margin-left: 2px;
}
.pay-stat-cta { text-decoration: none; color: inherit; transition: .15s; }
.pay-stat-cta:hover {
    border-color: rgba(124,58,237,.35);
    transform: translateY(-1px);
}
.pay-stat-cta strong { color: #7c3aed; font-size: 15px; }

.pay-users-panel,
.pay-table-panel {
    border: 1px solid var(--bx-line, var(--border)); border-radius: 18px;
    background: color-mix(in srgb, var(--bx-box,#fff) 96%, var(--bx-canvas,#eef2f8));
    box-shadow: none;
    padding: 18px;
}
.pay-users-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 14px;
}
.pay-users-head h2 {
    margin: 4px 0 0; font-size: 16px; font-weight: 800; letter-spacing: -.3px;
    color: var(--bx-text, var(--text));
}

.pay-user-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.pay-empty {
    grid-column: 1 / -1; text-align: center; padding: 36px 16px;
    color: var(--bx-muted, var(--text-dim)); font-size: 13px;
    border: 1px dashed var(--bx-line, var(--border)); border-radius: 14px;
}
.pay-user-card {
    display: block; padding: 16px; border: 1px solid var(--bx-line, var(--border));
    border-radius: 14px; text-decoration: none; color: inherit; transition: .15s;
    background: rgba(255,255,255,.45);
}
.pay-user-card:hover {
    border-color: rgba(124,58,237,.35);
    background: rgba(255,255,255,.7);
}
.pay-user-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pay-user-avatar {
    width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center; flex: 0 0 auto;
    color: #fff; font-size: 14px; font-weight: 800;
    background: linear-gradient(145deg, #8b5cf6, #10b981);
    box-shadow: none;
}
.pay-user-who { flex: 1; min-width: 0; }
.pay-user-who strong, .pay-user-who small { display: block; }
.pay-user-who strong {
    color: var(--bx-text, var(--text)); font-size: 13.5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pay-user-who small {
    margin-top: 2px; color: var(--bx-muted, var(--text-dim)); font-size: 11px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pay-user-go {
    width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
    color: var(--bx-faint, #94a3b8); background: rgba(15,23,42,.04); transition: .15s;
}
.pay-user-go svg { width: 14px; height: 14px; }
.pay-user-card:hover .pay-user-go { color: #7c3aed; background: rgba(124,58,237,.1); }
.pay-user-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 2px;
}
.pay-metric {
    padding: 10px 11px;
    border-radius: 12px;
    border: 1px solid var(--bx-line, var(--border));
    background: color-mix(in srgb, var(--bx-canvas, #eef2f8) 55%, transparent);
}
.pay-metric span {
    display: block;
    margin-bottom: 4px;
    color: var(--bx-muted, var(--text-dim));
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .35px;
    text-transform: uppercase;
}
.pay-metric strong {
    display: block;
    color: var(--bx-text, var(--text));
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: -.25px;
    line-height: 1.25;
}
.pay-metric strong small {
    font-size: 10px;
    font-weight: 700;
    color: var(--bx-muted, var(--text-dim));
}
.pay-metric.accent {
    border-color: rgba(124,58,237,.22);
    background: linear-gradient(145deg, rgba(124,58,237,.1), rgba(16,185,129,.08));
}
.pay-metric.accent strong { color: #6d28d9; }
.pay-user-total {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    padding: 12px 0; border-top: 1px solid var(--bx-line, var(--border));
    border-bottom: 1px solid var(--bx-line, var(--border));
}
.pay-user-total span { color: var(--bx-muted, var(--text-dim)); font-size: 11px; font-weight: 650; }
.pay-user-total strong { color: var(--bx-text, var(--text)); font-size: 16px; letter-spacing: -.3px; }
.pay-user-meta {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px;
}
.pay-user-meta span {
    display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px;
    border-radius: 999px; font-size: 11px; font-weight: 650;
    color: #7c3aed; background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.12);
}
.pay-user-meta b { font-weight: 800; margin-right: 3px; }

.pay-table { border: 0 !important; border-radius: 0 !important; background: transparent !important; }
.pay-table-empty {
    text-align: center; color: var(--bx-faint, var(--text-faint)); padding: 40px !important;
}

/* Filters + pagination */
.pay-toolbar {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin: 0 0 12px;
}
.pay-filters {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1; min-width: 0;
}
.pay-filter-input {
    min-height: 30px; padding: 0 12px; border-radius: 999px;
    border: 1px solid var(--bx-line, var(--border));
    background: color-mix(in srgb, var(--bx-box, #fff) 96%, var(--bx-canvas, #eef2f8));
    color: var(--bx-text, var(--text));
    font-size: 12px; font-weight: 650;
    min-width: 180px; flex: 1 1 160px;
}
.pay-filter-input:focus {
    outline: none;
    border-color: rgba(124,58,237,.45);
}
.pay-badge-group {
    display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center;
    padding: 3px; border-radius: 999px;
    border: 1px solid var(--bx-line, var(--border));
    background: color-mix(in srgb, var(--bx-canvas, #eef2f8) 55%, transparent);
}
.pay-badge-sites { max-width: 100%; }
.pay-fbadge {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 26px; padding: 0 11px; border-radius: 999px;
    border: 0; cursor: pointer;
    background: transparent;
    color: var(--bx-muted, var(--text-dim));
    font-size: 11px; font-weight: 750;
    transition: .12s background, .12s color;
    white-space: nowrap;
}
.pay-fbadge:hover { color: var(--bx-text, var(--text)); background: rgba(255,255,255,.55); }
.pay-fbadge.active {
    color: #fff;
    background: linear-gradient(145deg, #8b5cf6, #7c3aed);
}
.pay-fbadge.active.try { background: linear-gradient(145deg, #8b5cf6, #7c3aed); }
.pay-fbadge.active.crypto { background: linear-gradient(145deg, #10b981, #10b981); }
.pay-fbadge.active.ok { background: linear-gradient(145deg, #10b981, #059669); }
.pay-fbadge.active.warn { background: linear-gradient(145deg, #f59e0b, #d97706); }
.pay-fbadge.active.err { background: linear-gradient(145deg, #f43f5e, #e11d48); }
.pay-fbadge.active.mute { background: linear-gradient(145deg, #64748b, #475569); }
.pay-fbadge.reset {
    border: 1px solid var(--bx-line, var(--border));
    background: transparent;
}
.pay-fbadge.reset:hover { border-color: rgba(225,29,72,.3); color: #e11d48; }
.pay-pager-size {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--bx-muted, var(--text-dim)); font-size: 12px; font-weight: 700;
}
.pay-pager {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-top: 12px;
}
.pay-pager-info {
    font-size: 12px; font-weight: 650; color: var(--bx-muted, var(--text-dim));
}
.pay-pager-nav { display: inline-flex; align-items: center; gap: 6px; }
.pay-pager-pages { display: inline-flex; align-items: center; gap: 4px; }
.pay-pager-btn {
    min-height: 30px; min-width: 30px; padding: 0 10px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--bx-line, var(--border));
    background: transparent; color: var(--bx-muted, var(--text-dim));
    font-size: 12px; font-weight: 700;
}
.pay-pager-btn:hover:not(:disabled) {
    color: #7c3aed; border-color: rgba(124,58,237,.35);
}
.pay-pager-btn.active {
    color: #fff; border-color: transparent;
    background: linear-gradient(145deg, #8b5cf6, #7c3aed);
}
.pay-pager-btn:disabled { opacity: .45; cursor: default; }

[data-theme="dark"] .pay-filter-input,
[data-theme="dark"] .pay-badge-group {
    background: rgba(255,255,255,.03);
}
[data-theme="dark"] .pay-fbadge:hover { background: rgba(255,255,255,.06); }

/* Compact payment datatable */
.pay-dt-wrap {
    overflow-x: auto;
    border: 1px solid var(--bx-line, var(--border));
    border-radius: 12px;
    background: rgba(255,255,255,.35);
}
.pay-dt {
    width: 100%;
    border-collapse: collapse;
    min-width: 920px;
}
.pay-dt thead th {
    padding: 10px 12px;
    text-align: left;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .45px;
    text-transform: uppercase;
    color: var(--bx-faint, #94a3b8);
    background: color-mix(in srgb, var(--bx-canvas, #eef2f8) 70%, transparent);
    border-bottom: 1px solid var(--bx-line, var(--border));
    white-space: nowrap;
}
.pay-dt tbody td {
    padding: 9px 12px;
    font-size: 12.5px;
    color: var(--bx-muted, var(--text-dim));
    border-bottom: 1px solid var(--bx-line, var(--border));
    vertical-align: middle;
    white-space: nowrap;
}
.pay-dt tbody tr:last-child td { border-bottom: 0; }
.pay-dt tbody tr:hover td {
    background: rgba(124,58,237,.04);
}
.pay-dt tbody tr.is-approved td {
    background: rgba(5,150,105,.05);
}
.pay-dt tbody tr.is-rejected td {
    background: rgba(225,29,72,.04);
}
.pay-dt tbody tr.is-duplicate td {
    background: rgba(217,119,6,.05);
}
.pay-tg-retry {
    cursor: pointer;
    border: 0;
    font: inherit;
}
.pay-tg-retry:hover {
    filter: brightness(0.96);
    text-decoration: underline;
}
.pay-act.ghost {
    color: var(--bx-muted, var(--text-dim));
    background: transparent;
    border: 1px solid var(--bx-line, var(--border));
}
.pay-act.ghost:hover { color: #e11d48; border-color: rgba(225,29,72,.3); }
.pay-act.done.danger {
    color: #e11d48;
    background: rgba(225,29,72,.1);
}
.pay-dt .cell-name {
    color: var(--bx-text, var(--text));
    font-weight: 700;
}
.pay-dt td b {
    color: var(--bx-text, var(--text));
    font-weight: 800;
}
.pay-dt-date {
    display: inline;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none !important;
    box-shadow: none;
    font-size: 12.5px;
    font-weight: 550;
    font-variant-numeric: tabular-nums;
    color: var(--bx-muted, var(--text-dim));
    letter-spacing: 0;
    white-space: nowrap;
}
.pay-status {
    display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px;
    border-radius: 999px; font-size: 10px; font-weight: 750;
}
.pay-status.ok { color: #059669; background: rgba(5,150,105,.12); }
.pay-status.err { color: #e11d48; background: rgba(225,29,72,.1); }
.pay-status.warn { color: #d97706; background: rgba(217,119,6,.12); }
.pay-status.mute { color: var(--bx-muted, var(--text-dim)); background: rgba(15,23,42,.05); }
.pay-status b { font-weight: 800; color: inherit; }
.pay-dt-actions { width: 1%; }
.pay-dt-btns {
    display: inline-flex; align-items: center; gap: 6px;
}
.pay-act {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 28px; padding: 0 10px; border-radius: 8px;
    border: 1px solid transparent; font-size: 11px; font-weight: 750; cursor: pointer;
    transition: .15s; white-space: nowrap;
}
.pay-act.approve {
    color: #fff;
    background: linear-gradient(145deg, #10b981, #10b981);
}
.pay-act.approve:hover { filter: brightness(1.05); }
.pay-act.danger {
    color: #e11d48;
    background: rgba(225,29,72,.08);
    border-color: rgba(225,29,72,.18);
}
.pay-act.danger:hover { background: rgba(225,29,72,.14); }
.pay-act.done {
    color: #059669; background: rgba(5,150,105,.1); cursor: default;
}
.pay-act:disabled { opacity: .6; cursor: wait; }

[data-theme="dark"] .pay-dt-wrap { background: rgba(255,255,255,.02); }
[data-theme="dark"] .pay-dt thead th { background: rgba(255,255,255,.03); }
[data-theme="dark"] .pay-dt tbody tr:hover td { background: rgba(255,255,255,.03); }
[data-theme="dark"] .pay-dt tbody tr.is-approved td { background: rgba(5,150,105,.08); }
[data-theme="dark"] .pay-dt tbody tr.is-rejected td { background: rgba(225,29,72,.08); }
[data-theme="dark"] .pay-dt tbody tr.is-duplicate td { background: rgba(217,119,6,.1); }
[data-theme="dark"] .pay-status.mute { background: rgba(255,255,255,.04); }
.pd-page-content .chip.chip-try {
    color: #7c3aed; background: rgba(124,58,237,.1);
}
.pd-page-content .chip.chip-crypto {
    color: #10b981; background: rgba(16,185,129,.12);
}

[data-theme="dark"] .pay-hero,
[data-theme="dark"] .pay-stat-card,
[data-theme="dark"] .pay-users-panel,
[data-theme="dark"] .pay-table-panel {
    background: var(--bx-box, #111522);
    box-shadow: none;
}
[data-theme="dark"] .pay-chip,
[data-theme="dark"] .pay-hero-btn.ghost { background: rgba(255,255,255,.04); }
[data-theme="dark"] .pay-user-card { background: rgba(255,255,255,.03); }
[data-theme="dark"] .pay-user-card:hover { background: rgba(255,255,255,.06); }
[data-theme="dark"] .pay-user-go { background: rgba(255,255,255,.04); }

/* legacy aliases */
.payment-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.pay-stat span { display: block; color: var(--bx-muted); font-size: 11px; font-weight: 650; }
.pay-stat strong { display: block; margin-top: 8px; color: var(--bx-text); font-size: 18px; letter-spacing: -.3px; }
.pay-stat-link { text-decoration: none; transition: .15s; }
.pay-stat-link:hover { border-color: var(--bx-accent); color: inherit; }
.pay-stat-link strong { color: var(--bx-accent); font-size: 14px; }
.payment-user-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.payment-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.payment-list-meta span {
    display: inline-flex; align-items: center; min-height: 26px; padding: 0 8px;
    border-radius: 7px; color: var(--bx-muted); background: var(--bx-accent-soft); font-size: 11px; font-weight: 700;
}

.pd-page-content .user-card,
.pd-page-content .pay-user-card,
.pd-page-content .dcard,
.pd-page-content .apikey-box {
    border: 1px solid var(--bx-line, var(--pd-line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--bx-box, #fff) 90%, var(--bx-canvas, #f3f5f9));
    box-shadow: none;
}

@media (max-width: 1100px) {
    .settings-layout { grid-template-columns: 1fr; }
    .payment-user-grid,
    .pay-user-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .telegram-template-area { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .pay-stats { grid-template-columns: 1fr 1fr; }
    .pay-hero h1 { font-size: 19px; }
}
@media (max-width: 720px) {
    .payment-overview,
    .pay-stats { grid-template-columns: 1fr; }
    .payment-user-grid,
    .pay-user-grid { grid-template-columns: 1fr; }
    .pay-hero { padding: 18px; }
    .settings-actions { flex-direction: column; }
    .settings-actions .btn { width: 100%; }
}

/* ========== Auth (login / register) ========== */
.auth-body {
    min-height: 100vh;
    font-family: Outfit, "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
    position: relative;
    overflow-x: hidden;
}
.auth-v2 { background: transparent; }

.auth-bg {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(900px 520px at 12% -10%, rgba(124,58,237,.18), transparent 58%),
        radial-gradient(800px 480px at 92% 8%, rgba(16,185,129,.14), transparent 52%),
        radial-gradient(700px 400px at 50% 100%, rgba(124,58,237,.08), transparent 55%),
        linear-gradient(180deg, #eef2f8 0%, #e6ebf4 45%, #dde4f0 100%);
}
[data-theme="dark"] .auth-bg {
    background:
        radial-gradient(900px 520px at 12% -10%, rgba(139,92,246,.18), transparent 55%),
        radial-gradient(800px 480px at 92% 8%, rgba(45,212,191,.1), transparent 50%),
        linear-gradient(180deg, #0a0e18 0%, #070a12 50%, #060912 100%);
}
.auth-bg > i {
    position: absolute; border-radius: 50%;
    filter: blur(48px); opacity: .55;
    animation: authOrb 16s ease-in-out infinite;
}
.auth-bg > i.a {
    width: 300px; height: 300px; top: 10%; left: 6%;
    background: rgba(139,92,246,.24);
}
.auth-bg > i.b {
    width: 340px; height: 340px; bottom: 6%; right: 4%;
    background: rgba(16,185,129,.18);
    animation-delay: -5s;
}
.auth-bg > i.c {
    width: 200px; height: 200px; top: 42%; right: 28%;
    background: rgba(124,58,237,.14);
    animation-delay: -9s;
}
@keyframes authOrb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(14px, -18px) scale(1.05); }
}
.auth-grid {
    position: absolute; inset: 0;
    opacity: .35;
    background-image:
        linear-gradient(rgba(15,23,42,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
}
[data-theme="dark"] .auth-grid {
    opacity: .2;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
}

.auth-theme-btn {
    position: fixed;
    top: 18px; right: 18px; z-index: 30;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 14px;
    background: rgba(255,255,255,.7);
    color: var(--bx-muted, #5f6b85);
    cursor: pointer;
    backdrop-filter: blur(12px) saturate(1.2);
    box-shadow: 0 8px 24px -16px rgba(16,21,34,.35);
    transition: .18s ease;
}
.auth-theme-btn svg { width: 18px; height: 18px; }
.auth-theme-btn .ico-moon { display: none; }
[data-theme="dark"] .auth-theme-btn .ico-sun { display: none; }
[data-theme="dark"] .auth-theme-btn .ico-moon { display: block; }
.auth-theme-btn:hover {
    color: var(--bx-text, #101522);
    border-color: rgba(124,58,237,.35);
    transform: translateY(-1px);
}
[data-theme="dark"] .auth-theme-btn {
    background: rgba(16,21,34,.65);
    border-color: rgba(255,255,255,.08);
    color: var(--bx-muted);
}

.auth-center {
    position: relative; z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px 32px;
    gap: 20px;
}

.auth-hero-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    animation: authRise .45s ease-out;
}
.auth-logo {
    width: 54px; height: 54px;
    display: grid; place-items: center;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(145deg, #a78bfa, #7c3aed 55%, #6d28d9);
    font-size: 22px; font-weight: 800;
    box-shadow:
        0 14px 28px -14px rgba(124,58,237,.7),
        inset 0 1px 0 rgba(255,255,255,.4);
}
.auth-hero-brand strong,
.auth-hero-brand small { display: block; }
.auth-hero-brand strong {
    font-size: 21px; font-weight: 800;
    letter-spacing: -.4px;
    color: var(--bx-text, #101522);
}
.auth-hero-brand small {
    margin-top: 3px;
    font-size: 11px; font-weight: 650;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--bx-muted, #5f6b85);
}

.auth-glass {
    width: 100%;
    max-width: 420px;
    padding: 32px 32px 28px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 24px;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(22px) saturate(1.35);
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
    box-shadow:
        0 1px 0 rgba(255,255,255,.8) inset,
        0 28px 60px -28px rgba(16,21,34,.4);
    animation: authRise .5s ease-out .05s both;
}
.auth-glass-wide { max-width: 460px; }
[data-theme="dark"] .auth-glass {
    border-color: rgba(255,255,255,.08);
    background: rgba(16,21,34,.72);
    box-shadow:
        0 1px 0 rgba(255,255,255,.05) inset,
        0 28px 60px -24px rgba(0,0,0,.75);
}

/* Auth v3 shell — gradient rim */
.auth-v3 .auth-shell {
    padding: 1px;
    border: 0;
    background: linear-gradient(145deg, rgba(167,139,250,.55), rgba(255,255,255,.35) 40%, rgba(52,211,153,.35));
    box-shadow:
        0 36px 70px -34px rgba(16,21,34,.45),
        0 0 0 1px rgba(255,255,255,.2) inset;
}
.auth-v3 .auth-shell-inner {
    padding: 34px 32px 26px;
    border-radius: 23px;
    background:
        radial-gradient(120% 80% at 50% -20%, rgba(139,92,246,.1), transparent 55%),
        rgba(255,255,255,.86);
    backdrop-filter: blur(22px) saturate(1.35);
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
}
[data-theme="dark"] .auth-v3 .auth-shell {
    background: linear-gradient(145deg, rgba(167,139,250,.45), rgba(255,255,255,.08) 40%, rgba(52,211,153,.22));
    box-shadow: 0 36px 70px -28px rgba(0,0,0,.8);
}
[data-theme="dark"] .auth-v3 .auth-shell-inner {
    background:
        radial-gradient(120% 80% at 50% -20%, rgba(139,92,246,.18), transparent 55%),
        rgba(14,18,30,.9);
}

.auth-glass-head {
    margin-bottom: 26px;
    text-align: center;
}
.auth-eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: #7c3aed;
}
[data-theme="dark"] .auth-eyebrow { color: #a78bfa; }
.auth-glass-head h1 {
    margin: 0;
    font-size: 27px; font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    font-synthesis: none;
    color: var(--bx-text, #101522);
}
.auth-glass-head p {
    margin: 8px auto 0;
    max-width: 300px;
    font-size: 13.5px; font-weight: 500;
    line-height: 1.5;
    color: var(--bx-muted, #5f6b85);
}

.auth-form .form-group { margin-bottom: 16px; }
.auth-form .form-group:last-of-type { margin-bottom: 22px; }
.auth-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 11px; font-weight: 700;
    letter-spacing: .5px; text-transform: uppercase;
    color: var(--bx-faint, #8b95ab);
}
.auth-field {
    position: relative;
    display: flex;
    align-items: center;
}
.auth-field-ico {
    position: absolute; left: 14px; z-index: 1;
    width: 18px; height: 18px;
    color: var(--bx-faint, #8b95ab);
    pointer-events: none;
    display: grid; place-items: center;
}
.auth-field-ico svg { width: 17px; height: 17px; }
.auth-eye {
    position: absolute; right: 8px; z-index: 2;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border: 0; border-radius: 10px;
    background: transparent;
    color: var(--bx-faint, #8b95ab);
    cursor: pointer;
    transition: .15s ease;
}
.auth-eye:hover { color: #7c3aed; background: rgba(124,58,237,.08); }
.auth-eye svg { width: 17px; height: 17px; }
.auth-eye .eye-off { display: none; }
.auth-eye.is-on .eye-on { display: none; }
.auth-eye.is-on .eye-off { display: block; }

.auth-form input[type="text"],
.auth-form input[type="password"],
.auth-form input[type="number"] {
    width: 100%;
    min-height: 50px;
    padding: 0 15px;
    border: 1px solid rgba(20,24,36,.1);
    border-radius: 14px;
    background: rgba(255,255,255,.92);
    color: var(--bx-text, #101522);
    font-size: 14.5px; font-weight: 500;
    font-family: inherit;
    outline: none;
    transition: .18s border-color, .18s box-shadow, .18s background;
}
.auth-field input {
    padding-left: 44px !important;
    padding-right: 46px !important;
}
.auth-form input:focus {
    border-color: rgba(124,58,237,.5);
    box-shadow: 0 0 0 4px rgba(124,58,237,.12);
    background: #fff;
}
.auth-field:focus-within .auth-field-ico { color: #7c3aed; }
[data-theme="dark"] .auth-form input[type="text"],
[data-theme="dark"] .auth-form input[type="password"],
[data-theme="dark"] .auth-form input[type="number"] {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.1);
    color: var(--bx-text);
}
[data-theme="dark"] .auth-form input:focus {
    background: rgba(255,255,255,.06);
}

.auth-submit {
    width: 100%;
    min-height: 52px;
    border: 0; border-radius: 14px;
    color: #fff;
    background: linear-gradient(145deg, #a78bfa, #7c3aed 50%, #6d28d9);
    font-size: 14.5px; font-weight: 700;
    font-family: inherit;
    letter-spacing: -.1px;
    cursor: pointer;
    box-shadow: 0 16px 32px -16px rgba(124,58,237,.8);
    transition: .18s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.auth-submit svg { width: 16px; height: 16px; transition: .18s transform; }
.auth-submit:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 20px 36px -14px rgba(124,58,237,.9);
}
.auth-submit:hover svg { transform: translateX(3px); }
.auth-submit:active { transform: translateY(0); }

.auth-divider {
    display: flex; align-items: center; gap: 14px;
    margin: 20px 0 14px;
    color: var(--bx-faint, #8b95ab);
    font-size: 11px; font-weight: 650;
    letter-spacing: .3px;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(20,24,36,.12), transparent);
}
[data-theme="dark"] .auth-divider::before,
[data-theme="dark"] .auth-divider::after {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
}

.auth-secondary {
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    min-height: 48px;
    border: 1px solid rgba(20,24,36,.1);
    border-radius: 14px;
    color: var(--bx-text, #101522);
    background: rgba(255,255,255,.45);
    text-decoration: none;
    font-size: 13.5px; font-weight: 700;
    transition: .18s;
}
.auth-secondary:hover {
    border-color: rgba(124,58,237,.35);
    background: rgba(124,58,237,.08);
    color: #6d28d9;
}
[data-theme="dark"] .auth-secondary {
    background: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.1);
    color: var(--bx-text);
}

.auth-trust {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--bx-faint, #8b95ab);
    font-size: 11.5px;
    font-weight: 550;
}
.auth-trust svg { width: 14px; height: 14px; color: #7c3aed; flex: 0 0 auto; }
[data-theme="dark"] .auth-trust svg { color: #a78bfa; }

.auth-alt {
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
    color: var(--bx-muted, #5f6b85);
    font-weight: 600;
}
.auth-alt a {
    color: #7c3aed;
    font-weight: 800;
    text-decoration: none;
}
.auth-alt a:hover { text-decoration: underline; }

.auth-foot {
    font-size: 11.5px; font-weight: 550;
    color: var(--bx-faint, #8b95ab);
    letter-spacing: .15px;
    animation: authRise .55s ease-out .1s both;
}

.auth-glass .alert {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 12.5px; font-weight: 650;
}
.auth-glass .alert.error {
    color: #e11d48;
    border: 1px solid rgba(225,29,72,.18);
    background: rgba(225,29,72,.08);
}

@keyframes authRise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .auth-bg > i,
    .auth-hero-brand,
    .auth-glass,
    .auth-foot { animation: none !important; }
}

@media (max-width: 560px) {
    .auth-center { padding: 72px 16px 24px; gap: 18px; }
    .auth-glass { padding: 26px 20px 22px; border-radius: 20px; }
    .auth-v3 .auth-shell-inner { padding: 28px 20px 22px; border-radius: 19px; }
    .auth-glass-head h1 { font-size: 23px; }
    .auth-hero-brand strong { font-size: 19px; }
    .auth-logo { width: 48px; height: 48px; border-radius: 14px; font-size: 20px; }
    .auth-security { grid-template-columns: 1fr 110px; }
}

/* ========== Users page ========== */
.users-page { display: flex; flex-direction: column; gap: 16px; }
.users-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 22px 24px; border: 1px solid var(--bx-line, var(--border)); border-radius: 18px;
    background:
        radial-gradient(700px 180px at 0% 0%, rgba(47,111,237,.1), transparent 58%),
        radial-gradient(500px 160px at 100% 0%, rgba(15,159,138,.08), transparent 50%),
        color-mix(in srgb, var(--bx-box,#fff) 94%, var(--bx-canvas,#eef2f8));
}
.users-hero-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.users-hero-icon {
    width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; flex: 0 0 auto;
    color: #fff; background: linear-gradient(145deg, #3b82f6, #0f9f8a);
}
.users-hero-icon svg { width: 24px; height: 24px; }
.users-hero h1 { margin: 0; font-size: 22px; letter-spacing: -.45px; color: var(--bx-text, var(--text)); }
.users-hero p { margin: 4px 0 0; font-size: 12.5px; color: var(--bx-muted, var(--text-dim)); }
.users-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.users-hero-btn {
    display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px;
    border-radius: 10px; text-decoration: none; font-size: 12px; font-weight: 750; color: #fff;
    background: linear-gradient(145deg, #3b82f6, #2563eb); transition: .15s;
}
.users-hero-btn.ghost {
    color: var(--bx-text, var(--text));
    background: rgba(255,255,255,.55);
    border: 1px solid var(--bx-line, var(--border));
}
.users-hero-btn.ghost:hover { border-color: rgba(47,111,237,.35); color: #2563eb; }

.users-notice {
    padding: 12px 14px; border-radius: 12px; font-size: 12.5px; font-weight: 650;
}
.users-notice.ok { color: #059669; border: 1px solid rgba(5,150,105,.2); background: rgba(5,150,105,.1); }
.users-notice.err { color: #e11d48; border: 1px solid rgba(225,29,72,.18); background: rgba(225,29,72,.08); }

.users-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}
.users-stat {
    padding: 16px 18px;
    border: 1px solid var(--bx-line, var(--border));
    border-radius: 16px;
    background: color-mix(in srgb, var(--bx-box,#fff) 96%, var(--bx-canvas,#eef2f8));
}
.users-stat span {
    display: block;
    font-size: 11px; font-weight: 750;
    letter-spacing: .35px; text-transform: uppercase;
    color: var(--bx-faint, #8b95ab);
}
.users-stat strong {
    display: block; margin-top: 6px;
    font-size: 24px; font-weight: 800; letter-spacing: -.5px;
    color: var(--bx-text, var(--text));
}
.users-stat.ok strong { color: #059669; }
.users-stat.warn strong { color: #d97706; }
.users-stat.mute strong { color: var(--bx-muted, #5f6b85); }

.users-panel {
    padding: 0;
    border: 1px solid var(--bx-line, var(--border));
    border-radius: 18px;
    background: color-mix(in srgb, var(--bx-box,#fff) 96%, var(--bx-canvas,#eef2f8));
    overflow: hidden;
}
.users-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--bx-line, var(--border));
}
.users-panel-head strong {
    display: block;
    font-size: 15px; font-weight: 800;
    color: var(--bx-text, var(--text));
}
.users-panel-head small {
    display: block; margin-top: 3px;
    font-size: 11.5px; color: var(--bx-muted, var(--text-dim));
}

.users-table-wrap { overflow-x: auto; }
.users-table {
    width: 100%;
    border-collapse: collapse;
}
.users-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 10px; font-weight: 800;
    letter-spacing: .55px; text-transform: uppercase;
    color: var(--bx-faint, #8b95ab);
    background: rgba(15,23,42,.02);
    border-bottom: 1px solid var(--bx-line, var(--border));
}
.users-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--bx-line, var(--border));
    vertical-align: middle;
}
.users-table tr:last-child td { border-bottom: 0; }
.users-table tr:hover td { background: rgba(47,111,237,.03); }

.users-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.users-avatar {
    width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center; flex: 0 0 auto;
    color: #fff; font-size: 14px; font-weight: 800;
    background: linear-gradient(145deg, #3b82f6, #2563eb);
}
.users-avatar.owner { background: linear-gradient(145deg, #f59e0b, #d97706); }
.users-avatar.admin { background: linear-gradient(145deg, #6366f1, #4f46e5); }
.users-avatar.member { background: linear-gradient(145deg, #3b82f6, #0f9f8a); }
.users-id strong {
    display: block;
    font-size: 13.5px; font-weight: 800;
    color: var(--bx-text, var(--text));
}
.users-id small {
    display: block; margin-top: 2px;
    font-size: 11px; color: var(--bx-faint, #8b95ab); font-weight: 600;
}
.users-hidden {
    font-style: normal;
    color: #e11d48;
    font-weight: 800;
}

.users-role {
    display: inline-flex; align-items: center;
    min-height: 26px; padding: 0 10px;
    border-radius: 999px;
    font-size: 10px; font-weight: 800;
    letter-spacing: .35px; text-transform: uppercase;
}
.users-role.owner { color: #b45309; background: rgba(245,158,11,.14); }
.users-role.admin { color: #4338ca; background: rgba(99,102,241,.12); }
.users-role.member { color: #1d4ed8; background: rgba(37,99,235,.1); }

.users-pay {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 26px; padding: 0 10px;
    border-radius: 999px;
    font-size: 11px; font-weight: 750;
}
.users-pay i {
    width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.users-pay.ok { color: #059669; background: rgba(5,150,105,.1); }
.users-pay.err { color: #e11d48; background: rgba(225,29,72,.08); }
.users-pay.mute { color: var(--bx-faint); background: transparent; padding: 0; }

.users-sites { display: flex; flex-wrap: wrap; gap: 6px; }
.users-chip {
    display: inline-flex; align-items: center;
    min-height: 24px; padding: 0 9px;
    border-radius: 8px;
    font-size: 11px; font-weight: 700;
    color: #1d4ed8;
    background: rgba(37,99,235,.08);
}
.users-chip.soft { color: var(--bx-muted); background: rgba(15,23,42,.05); }

.users-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.users-actions form { margin: 0; }
.users-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 30px; padding: 0 11px;
    border-radius: 9px;
    border: 1px solid var(--bx-line, var(--border));
    background: rgba(255,255,255,.55);
    color: var(--bx-muted, var(--text-dim));
    font-size: 11px; font-weight: 750;
    text-decoration: none; cursor: pointer;
    font-family: inherit;
    transition: .15s;
}
.users-btn:hover { color: #1d4ed8; border-color: rgba(37,99,235,.3); background: rgba(37,99,235,.08); }
.users-btn.warn { color: #d97706; border-color: rgba(217,119,6,.28); background: rgba(217,119,6,.08); }
.users-btn.danger { color: #e11d48; border-color: rgba(225,29,72,.22); background: rgba(225,29,72,.06); }
.users-btn.danger:hover { color: #fff; background: #e11d48; border-color: transparent; }

.users-pw { display: flex; gap: 6px; align-items: center; }
.users-pw input {
    width: 120px; max-width: 36vw;
    min-height: 30px; padding: 0 10px;
    border-radius: 9px;
    border: 1px solid var(--bx-line, var(--border));
    background: rgba(255,255,255,.7);
    color: var(--bx-text);
    font-size: 12px; font-family: inherit; outline: none;
}
.users-pw input:focus { border-color: rgba(47,111,237,.45); box-shadow: 0 0 0 3px rgba(47,111,237,.1); }

.users-cards { display: none; padding: 12px; gap: 10px; }
.users-card {
    padding: 14px;
    border: 1px solid var(--bx-line, var(--border));
    border-radius: 14px;
    background: rgba(255,255,255,.45);
}
.users-card-top {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    margin-bottom: 12px;
}
.users-card-meta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin-bottom: 12px;
}
.users-card-meta span {
    display: block; font-size: 10px; font-weight: 750;
    letter-spacing: .4px; text-transform: uppercase; color: var(--bx-faint);
}
.users-card-meta b {
    display: block; margin-top: 3px;
    font-size: 13px; font-weight: 800; color: var(--bx-text);
}
.users-card-meta b.ok { color: #059669; }
.users-card-meta b.err { color: #e11d48; }

[data-theme="dark"] .users-hero,
[data-theme="dark"] .users-stat,
[data-theme="dark"] .users-panel {
    background: var(--bx-box, #111522);
}
[data-theme="dark"] .users-hero-btn.ghost,
[data-theme="dark"] .users-btn,
[data-theme="dark"] .users-card,
[data-theme="dark"] .users-pw input {
    background: rgba(255,255,255,.04);
}
[data-theme="dark"] .users-table th { background: rgba(255,255,255,.02); }
[data-theme="dark"] .users-table tr:hover td { background: rgba(255,255,255,.03); }

@media (max-width: 1100px) {
    .users-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .users-table-wrap { display: none; }
    .users-cards { display: grid; }
    .users-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .users-hero { padding: 18px; }
    .users-hero h1 { font-size: 19px; }
}
@media (max-width: 560px) {
    .users-stats { grid-template-columns: 1fr 1fr; }
}

/* ========== Payment limits ========== */
.limits-page { display: flex; flex-direction: column; gap: 16px; max-width: 880px; }
.limits-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 22px 24px; border: 1px solid var(--bx-line, var(--border)); border-radius: 18px;
    background:
        radial-gradient(700px 180px at 0% 0%, rgba(47,111,237,.1), transparent 58%),
        radial-gradient(500px 160px at 100% 0%, rgba(15,159,138,.08), transparent 50%),
        color-mix(in srgb, var(--bx-box,#fff) 94%, var(--bx-canvas,#eef2f8));
}
.limits-hero-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.limits-hero-icon {
    width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; flex: 0 0 auto;
    color: #fff; background: linear-gradient(145deg, #3b82f6, #0f9f8a);
}
.limits-hero-icon svg { width: 24px; height: 24px; }
.limits-hero h1 { margin: 0; font-size: 22px; letter-spacing: -.45px; color: var(--bx-text, var(--text)); }
.limits-hero p { margin: 4px 0 0; font-size: 12.5px; color: var(--bx-muted, var(--text-dim)); line-height: 1.45; }
.limits-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.limits-btn {
    display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px;
    border-radius: 10px; text-decoration: none; font-size: 12px; font-weight: 750; color: #fff;
    background: linear-gradient(145deg, #3b82f6, #2563eb); transition: .15s;
}
.limits-btn.ghost {
    color: var(--bx-text, var(--text));
    background: rgba(255,255,255,.55);
    border: 1px solid var(--bx-line, var(--border));
}
.limits-btn.ghost:hover { border-color: rgba(47,111,237,.35); color: #2563eb; }

.limits-notice {
    padding: 12px 14px; border-radius: 12px; font-size: 12.5px; font-weight: 650;
}
.limits-notice.ok { color: #059669; border: 1px solid rgba(5,150,105,.2); background: rgba(5,150,105,.1); }
.limits-notice.err { color: #e11d48; border: 1px solid rgba(225,29,72,.18); background: rgba(225,29,72,.08); }

.limits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.limits-card {
    padding: 20px;
    border: 1px solid var(--bx-line, var(--border));
    border-radius: 18px;
    background: color-mix(in srgb, var(--bx-box,#fff) 96%, var(--bx-canvas,#eef2f8));
}
.limits-card-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 18px; padding-bottom: 14px;
    border-bottom: 1px solid var(--bx-line, var(--border));
}
.limits-card-icon {
    width: 42px; height: 42px; border-radius: 12px;
    display: grid; place-items: center; flex: 0 0 auto;
}
.limits-card-icon svg { width: 20px; height: 20px; }
.limits-card-icon.try { color: #1d4ed8; background: rgba(37,99,235,.1); }
.limits-card-icon.crypto { color: #0f766e; background: rgba(15,159,138,.12); }
.limits-card-head strong {
    display: block; font-size: 15px; font-weight: 800;
    color: var(--bx-text, var(--text));
}
.limits-card-head small {
    display: block; margin-top: 2px;
    font-size: 11.5px; color: var(--bx-muted, var(--text-dim));
}
.limits-fields { display: grid; gap: 12px; }
.limits-card .form-group { margin: 0; }
.limits-card label {
    display: block; margin-bottom: 7px;
    font-size: 10.5px; font-weight: 800;
    letter-spacing: .45px; text-transform: uppercase;
    color: var(--bx-faint, #8b95ab);
}
.limits-input {
    display: flex; align-items: stretch;
    border: 1px solid var(--bx-line-2, rgba(20,24,36,.14));
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,.75);
}
.limits-input span {
    display: grid; place-items: center;
    min-width: 42px;
    color: #1d4ed8;
    background: rgba(37,99,235,.08);
    font-size: 14px; font-weight: 800;
}
.limits-input input {
    flex: 1; min-width: 0;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    min-height: 46px;
    padding: 0 14px;
    font-size: 15px; font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: var(--bx-text);
    font-family: inherit;
    outline: none;
}
.limits-input:focus-within {
    border-color: rgba(47,111,237,.45);
    box-shadow: 0 0 0 3px rgba(47,111,237,.1);
}

.limits-submit { grid-column: 1 / -1; }
.limits-save {
    width: 100%;
    min-height: 48px;
    border: 0; border-radius: 14px;
    color: #fff;
    background: linear-gradient(145deg, #3b82f6, #2563eb);
    font-size: 14px; font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 14px 28px -16px rgba(37,99,235,.65);
    transition: .15s;
}
.limits-save:hover { filter: brightness(1.05); transform: translateY(-1px); }

[data-theme="dark"] .limits-hero,
[data-theme="dark"] .limits-card { background: var(--bx-box, #111522); }
[data-theme="dark"] .limits-btn.ghost { background: rgba(255,255,255,.04); }
[data-theme="dark"] .limits-input {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.1);
}
[data-theme="dark"] .limits-input span {
    color: #93c5fd;
    background: rgba(59,130,246,.12);
}

@media (max-width: 820px) {
    .limits-grid { grid-template-columns: 1fr; }
    .limits-hero { padding: 18px; }
    .limits-hero h1 { font-size: 19px; }
}

/* ========== Edit user ========== */
.edit-user-page { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.edit-user-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 22px 24px; border: 1px solid var(--bx-line, var(--border)); border-radius: 18px;
    background:
        radial-gradient(700px 180px at 0% 0%, rgba(47,111,237,.1), transparent 58%),
        radial-gradient(500px 160px at 100% 0%, rgba(15,159,138,.08), transparent 50%),
        color-mix(in srgb, var(--bx-box,#fff) 94%, var(--bx-canvas,#eef2f8));
}
.edit-user-hero-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.edit-user-avatar {
    width: 56px; height: 56px; border-radius: 16px; flex: 0 0 auto;
    display: grid; place-items: center;
    color: #fff; font-size: 22px; font-weight: 800;
    background: linear-gradient(145deg, #3b82f6, #0f9f8a);
}
.edit-user-hero h1 {
    margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.45px;
    color: var(--bx-text, var(--text));
}
.edit-user-hero p {
    margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    font-size: 12.5px;
}
.edit-user-meta { color: var(--bx-muted, var(--text-dim)); font-weight: 650; }
.edit-user-meta.mute { color: var(--bx-faint); }
.edit-user-meta.ok { color: #059669; }
.edit-user-meta.warn { color: #d97706; }
.edit-user-dot { color: var(--bx-faint); }
.edit-user-hero-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.edit-user-pill {
    display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px;
    border-radius: 999px; font-size: 11px; font-weight: 800;
    color: #1d4ed8; background: rgba(37,99,235,.1);
}

.edit-user-notice {
    padding: 12px 14px; border-radius: 12px; font-size: 12.5px; font-weight: 650;
}
.edit-user-notice.ok { color: #059669; border: 1px solid rgba(5,150,105,.2); background: rgba(5,150,105,.1); }
.edit-user-notice.err { color: #e11d48; border: 1px solid rgba(225,29,72,.18); background: rgba(225,29,72,.08); }

.edit-user-grid {
    display: grid;
    grid-template-columns: minmax(280px, .9fr) minmax(360px, 1.4fr);
    gap: 14px;
    align-items: start;
}
.edit-user-card {
    padding: 20px;
    border: 1px solid var(--bx-line, var(--border));
    border-radius: 18px;
    background: color-mix(in srgb, var(--bx-box,#fff) 96%, var(--bx-canvas,#eef2f8));
}
.edit-user-card-wide { min-width: 0; }
.edit-user-card-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 18px; padding-bottom: 14px;
    border-bottom: 1px solid var(--bx-line, var(--border));
}
.edit-user-card-icon {
    width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto;
    display: grid; place-items: center;
    color: #1d4ed8; background: rgba(37,99,235,.1);
}
.edit-user-card-icon.pay { color: #0f766e; background: rgba(15,159,138,.12); }
.edit-user-card-icon svg { width: 20px; height: 20px; }
.edit-user-card-head strong {
    display: block; font-size: 15px; font-weight: 800;
    color: var(--bx-text, var(--text));
}
.edit-user-card-head small {
    display: block; margin-top: 2px;
    font-size: 11.5px; color: var(--bx-muted, var(--text-dim));
}
.edit-user-card .form-group { margin-bottom: 14px; }
.edit-user-card .form-group:last-child { margin-bottom: 0; }
.edit-user-card label {
    display: block; margin-bottom: 7px;
    font-size: 10.5px; font-weight: 800;
    letter-spacing: .45px; text-transform: uppercase;
    color: var(--bx-faint, #8b95ab);
}
.edit-user-card input {
    width: 100%; min-height: 46px; padding: 0 14px;
    border: 1px solid var(--bx-line-2, rgba(20,24,36,.14));
    border-radius: 12px;
    background: rgba(255,255,255,.75);
    color: var(--bx-text);
    font-size: 13.5px; font-weight: 600;
    font-family: inherit; outline: none;
}
.edit-user-card input:focus {
    border-color: rgba(47,111,237,.45);
    box-shadow: 0 0 0 3px rgba(47,111,237,.1);
}
.edit-user-card .hint {
    margin-top: 6px; font-size: 11px; color: var(--bx-faint);
}
.edit-user-note {
    margin-top: 4px; padding: 12px 14px; border-radius: 12px;
    border: 1px solid rgba(37,99,235,.14);
    background: rgba(37,99,235,.06);
}
.edit-user-note strong {
    display: block; font-size: 12.5px; font-weight: 800;
    color: var(--bx-text);
}
.edit-user-note p {
    margin: 4px 0 0; font-size: 12px; line-height: 1.45;
    color: var(--bx-muted);
}
.edit-user-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
}
.edit-user-fields .form-group { margin: 0; }

.edit-user-actions {
    grid-column: 1 / -1;
    display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
}
.edit-user-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 18px;
    border-radius: 12px;
    font-size: 13.5px; font-weight: 800;
    text-decoration: none; cursor: pointer;
    font-family: inherit; border: 0; transition: .15s;
}
.edit-user-btn.ghost {
    color: var(--bx-text);
    background: rgba(255,255,255,.55);
    border: 1px solid var(--bx-line, var(--border));
}
.edit-user-btn.ghost:hover { border-color: rgba(47,111,237,.35); color: #2563eb; }
.edit-user-btn.primary {
    color: #fff;
    background: linear-gradient(145deg, #3b82f6, #2563eb);
    box-shadow: 0 14px 28px -16px rgba(37,99,235,.65);
}
.edit-user-btn.primary:hover { filter: brightness(1.05); transform: translateY(-1px); }

[data-theme="dark"] .edit-user-hero,
[data-theme="dark"] .edit-user-card { background: var(--bx-box, #111522); }
[data-theme="dark"] .edit-user-btn.ghost,
[data-theme="dark"] .edit-user-card input { background: rgba(255,255,255,.04); }

@media (max-width: 980px) {
    .edit-user-grid { grid-template-columns: 1fr; }
    .edit-user-fields { grid-template-columns: 1fr; }
    .edit-user-hero { padding: 18px; }
    .edit-user-hero h1 { font-size: 19px; }
    .edit-user-actions { justify-content: stretch; }
    .edit-user-actions .edit-user-btn { flex: 1; }
}

/* ===== Activity Log (owner) ===== */
.act-page { display: flex; flex-direction: column; gap: 16px; }
.act-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.act-hero-left { display: flex; gap: 14px; align-items: center; }
.act-hero-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--bx-surface-2, #eef2ff); color: var(--bx-accent, #2563eb); flex-shrink: 0; }
.act-hero-icon svg { width: 22px; height: 22px; }
.act-hero h1 { margin: 4px 0 2px; font-size: 1.45rem; letter-spacing: -0.02em; }
.act-hero p { margin: 0; color: var(--bx-muted, #64748b); font-size: .92rem; }
.act-hero-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.act-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: rgba(37,99,235,.1); color: #1d4ed8; }
.act-chip.soft { background: var(--bx-surface-2, #f1f5f9); color: var(--bx-muted, #64748b); }
.act-filters { display: grid; grid-template-columns: 1.6fr repeat(3, .9fr) auto auto; gap: 8px; align-items: center; }
.act-filters input, .act-filters select { width: 100%; border: 1px solid var(--bx-border, #e2e8f0); background: var(--bx-surface, #fff); color: inherit; border-radius: 10px; padding: 10px 12px; font: inherit; font-size: .88rem; }
.act-btn { border: 0; border-radius: 10px; padding: 10px 14px; font: inherit; font-weight: 650; font-size: .88rem; cursor: pointer; background: #2563eb; color: #fff; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.act-btn.ghost { background: transparent; color: var(--bx-muted, #64748b); border: 1px solid var(--bx-border, #e2e8f0); }
.act-table-wrap { border: 1px solid var(--bx-border, #e2e8f0); border-radius: 14px; overflow: auto; background: var(--bx-surface, #fff); }
.act-table { width: 100%; border-collapse: collapse; min-width: 860px; }
.act-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bx-muted, #64748b); padding: 12px 14px; border-bottom: 1px solid var(--bx-border, #e2e8f0); background: var(--bx-surface-2, #f8fafc); position: sticky; top: 0; }
.act-table td { padding: 12px 14px; border-bottom: 1px solid var(--bx-border, #e2e8f0); font-size: .88rem; vertical-align: top; }
.act-table tr:last-child td { border-bottom: 0; }
.act-table tr.fail { background: rgba(239,68,68,.05); }
.act-ts { white-space: nowrap; color: var(--bx-muted, #64748b); font-variant-numeric: tabular-nums; font-size: .82rem; }
.act-user strong { font-weight: 700; }
.act-role { display: inline-flex; padding: 3px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.act-role.owner { background: rgba(124,58,237,.12); color: #6d28d9; }
.act-role.admin { background: rgba(37,99,235,.12); color: #1d4ed8; }
.act-role.user { background: rgba(16,185,129,.12); color: #047857; }
.act-action { font-weight: 650; }
.act-fail { margin-left: 6px; font-size: .72rem; font-weight: 700; color: #dc2626; text-transform: uppercase; }
.act-target { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }
.act-detail { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bx-muted, #64748b); }
.act-ip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; color: var(--bx-muted, #64748b); }
.act-empty { padding: 36px 16px; text-align: center; color: var(--bx-muted, #64748b); }
.act-pager { display: flex; justify-content: center; align-items: center; gap: 16px; }
.act-pager a { color: #2563eb; font-weight: 650; text-decoration: none; }
@media (max-width: 900px) {
    .act-filters { grid-template-columns: 1fr 1fr; }
}
html[data-theme="dark"] .act-chip { background: rgba(96,165,250,.15); color: #93c5fd; }
html[data-theme="dark"] .act-chip.soft { background: rgba(255,255,255,.06); color: #94a3b8; }
html[data-theme="dark"] .act-btn { background: #3b82f6; }
html[data-theme="dark"] .act-role.owner { background: rgba(167,139,250,.18); color: #c4b5fd; }
html[data-theme="dark"] .act-role.admin { background: rgba(96,165,250,.18); color: #93c5fd; }
html[data-theme="dark"] .act-role.user { background: rgba(52,211,153,.15); color: #6ee7b7; }

.pay-user-metrics-2 { grid-template-columns: 1fr 1fr !important; }
.users-ts {
    font-size: 11.5px; font-variant-numeric: tabular-nums;
    color: var(--bx-muted, #64748b); white-space: nowrap;
}

/* ── Account page ── */
.acc-page { display:flex; flex-direction:column; gap:16px; }
.acc-hero {
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    padding:22px 24px; border:1px solid var(--bx-line,var(--border)); border-radius:18px;
    background:
        radial-gradient(700px 180px at 0% 0%, rgba(124,58,237,.14), transparent 58%),
        radial-gradient(500px 160px at 100% 0%, rgba(192,132,252,.1), transparent 50%),
        linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0)),
        color-mix(in srgb, var(--bx-box,#fff) 92%, var(--bx-canvas,#eef2f8));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.acc-hero-left { display:flex; align-items:center; gap:14px; min-width:0; }
.acc-hero-icon {
    width:56px; height:56px; border-radius:16px; display:grid; place-items:center; flex:0 0 auto;
    color:#fff; background:linear-gradient(145deg,#8b5cf6,#7c3aed);
    box-shadow:0 12px 26px -14px rgba(124,58,237,.7);
}
.acc-hero-icon svg { width:24px; height:24px; }
.acc-hero h1 { margin:0; font-size:22px; letter-spacing:-.45px; color:var(--bx-text,var(--text)); }
.acc-hero p { margin:4px 0 0; font-size:12.5px; color:var(--bx-muted,var(--text-dim)); }
.acc-hero-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.acc-chip {
    display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:0 11px;
    border-radius:999px; border:1px solid var(--bx-line,var(--border));
    background:rgba(255,255,255,.55); font-size:11px; font-weight:750; color:var(--bx-muted,var(--text-dim));
}
.acc-chip.ok { color:#059669; border-color:rgba(5,150,105,.25); background:rgba(5,150,105,.1); }
.acc-chip.warn { color:#d97706; border-color:rgba(217,119,6,.25); background:rgba(217,119,6,.1); }
.acc-chip i { width:7px; height:7px; border-radius:50%; background:currentColor; }

.acc-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:16px; align-items:start; }
.acc-panel {
    position:relative; overflow:hidden;
    border:1px solid var(--bx-line,var(--border)); border-radius:18px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)),
        color-mix(in srgb, var(--bx-box,#fff) 94%, var(--bx-canvas,#eef2f8));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 14px 34px -28px rgba(41,24,74,.35);
}
.acc-panel-inner { padding:22px; }
.acc-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; }
.acc-panel-head h2 { margin:0; font-size:16px; font-weight:800; letter-spacing:-.3px; color:var(--bx-text,var(--text)); }
.acc-panel-head p { margin:4px 0 0; font-size:12px; color:var(--bx-muted,var(--text-dim)); line-height:1.45; max-width:340px; }
.acc-icon {
    width:38px; height:38px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto;
    background:rgba(124,58,237,.1); color:#7c3aed;
}
.acc-icon svg { width:18px; height:18px; }
.acc-icon.lock { background:rgba(16,185,129,.1); color:#10b981; }

.acc-step {
    display:flex; gap:12px; padding:14px; margin-bottom:16px; border-radius:14px;
    border:1px solid rgba(34,158,217,.18);
    background:linear-gradient(135deg, rgba(34,158,217,.08), rgba(124,58,237,.05));
}
.acc-step-num {
    width:28px; height:28px; flex:0 0 28px; border-radius:50%; display:grid; place-items:center;
    font-size:12px; font-weight:800; color:#fff;
    background:linear-gradient(145deg,#229ED9,#0f7fb5);
    box-shadow:0 8px 16px -10px rgba(15,127,181,.8);
}
.acc-step-title { font-size:13px; font-weight:750; color:var(--bx-text,var(--text)); margin-bottom:3px; }
.acc-step-text { font-size:12px; color:var(--bx-muted,var(--text-dim)); margin-bottom:10px; line-height:1.5; }
.acc-step-text b { color:var(--bx-text,var(--text)); }
.acc-tg-btn {
    display:inline-flex; align-items:center; gap:8px; text-decoration:none;
    font-size:12px; font-weight:750; padding:9px 14px; border-radius:10px; color:#fff;
    background:linear-gradient(145deg,#229ED9,#0f7fb5);
    box-shadow:0 10px 18px -12px rgba(15,127,181,.85); transition:.15s;
}
.acc-tg-btn:hover { filter:brightness(1.06); transform:translateY(-1px); }
.acc-tg-btn svg { width:14px; height:14px; }

.acc-fields { display:flex; flex-direction:column; gap:2px; }
.acc-inline { display:flex; gap:8px; align-items:stretch; }
.acc-inline input { flex:1; min-width:0; }
.acc-inline .btn { flex:0 0 auto; min-height:42px; padding:0 14px; white-space:nowrap; font-size:12px; }
.acc-detect-list { margin-top:8px; display:flex; flex-direction:column; gap:6px; }
.acc-detect-item {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:10px 12px; border:1px solid var(--bx-line,var(--border)); border-radius:11px;
    background:rgba(255,255,255,.4); cursor:pointer; transition:.15s;
}
.acc-detect-item:hover { border-color:rgba(124,58,237,.35); background:rgba(124,58,237,.06); }
.acc-di-title { font-size:12.5px; font-weight:650; color:var(--bx-text,var(--text)); }
.acc-di-id { font-family:ui-monospace,monospace; font-size:11px; color:#7c3aed; font-weight:650; }

.acc-save {
    width:100%; min-height:44px; margin-top:10px; border:0; border-radius:12px; cursor:pointer;
    color:#fff; font-size:13px; font-weight:800;
    background:linear-gradient(145deg,#8b5cf6,#7c3aed);
    box-shadow:0 12px 22px -14px rgba(124,58,237,.9); transition:.15s;
}
.acc-save:hover { filter:brightness(1.05); transform:translateY(-1px); }
.acc-save:disabled { opacity:.7; cursor:wait; transform:none; }
.acc-save.secure { background:linear-gradient(145deg,#10b981,#059669); box-shadow:0 12px 22px -14px rgba(16,185,129,.85); }

.acc-secure-note {
    display:flex; gap:10px; padding:12px 14px; margin-bottom:16px; border-radius:12px;
    border:1px solid rgba(16,185,129,.18); background:rgba(16,185,129,.07);
    color:var(--bx-muted,var(--text-dim)); font-size:12px; line-height:1.45;
}
.acc-secure-note strong { display:block; color:#10b981; font-size:12px; margin-bottom:2px; }
.acc-notice { padding:11px 14px; border-radius:11px; font-size:12.5px; font-weight:650; margin-bottom:14px; }
.acc-notice.ok { background:rgba(5,150,105,.1); border:1px solid rgba(5,150,105,.22); color:#059669; }
.acc-notice.err { background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.2); color:#ef4444; }

[data-theme="dark"] .acc-hero,
[data-theme="dark"] .acc-panel {
    background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
        var(--bx-box,#16112e);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 34px -28px rgba(0,0,0,.7);
}
[data-theme="dark"] .acc-chip { background:rgba(255,255,255,.04); }
[data-theme="dark"] .acc-detect-item { background:rgba(255,255,255,.03); }

@media (max-width:980px) {
    .acc-grid { grid-template-columns:1fr; }
    .acc-hero { padding:18px; }
    .acc-hero h1 { font-size:19px; }
}

.auth-math {
    display: grid;
    gap: 10px;
}
.auth-math-q {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,.22);
    background: rgba(15,23,42,.35);
    color: #e2e8f0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .4px;
    font-variant-numeric: tabular-nums;
}
[data-theme="light"] .auth-math-q {
    background: rgba(248,250,252,.9);
    color: #0f172a;
    border-color: rgba(15,23,42,.12);
}
.auth-turnstile-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--bx-muted, #94a3b8);
    text-align: center;
}

.act-count { margin-left: 6px; display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; font-size: .7rem; font-weight: 750; background: rgba(37,99,235,.12); color: #1d4ed8; }
html[data-theme="dark"] .act-count { background: rgba(96,165,250,.18); color: #93c5fd; }

/* ===== Data (login captures) ===== */
.dl-page { display: flex; flex-direction: column; gap: 16px; }
.dl-hero {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; flex-wrap: wrap;
}
.dl-hero-left { display: flex; align-items: center; gap: 14px; min-width: 0; flex-wrap: wrap; }
.dl-back {
    display: inline-flex; align-items: center; align-self: flex-start;
    margin: 2px 4px 0 0; padding: 7px 11px; border-radius: 999px;
    font-size: .78rem; font-weight: 700; text-decoration: none;
    color: var(--bx-muted, #64748b); background: var(--bx-surface-2, #f1f5f9);
    border: 1px solid var(--bx-border, #e2e8f0);
}
.dl-back:hover { color: #2563eb; border-color: rgba(37,99,235,.28); }
.dl-hero-icon {
    width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
    background: linear-gradient(145deg, rgba(37,99,235,.14), rgba(14,165,233,.12));
    color: #2563eb; flex-shrink: 0;
}
.dl-hero-icon svg { width: 24px; height: 24px; }
.dl-hero-copy { min-width: 0; }
.dl-hero-copy h1 {
    margin: 4px 0 6px; font-size: 1.5rem; letter-spacing: -.03em;
    color: var(--bx-text, var(--text));
}
.dl-hero-copy p {
    margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: .9rem; color: var(--bx-muted, #64748b);
}
.dl-hero-copy a { color: #2563eb; text-decoration: none; font-weight: 600; }
.dl-hero-copy a:hover { text-decoration: underline; }
.dl-badge {
    display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px;
    font-size: .68rem; font-weight: 800; letter-spacing: .04em;
    color: #4338ca; background: rgba(99,102,241,.12);
}
.dl-hero-actions, .dl-hero-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dl-chip {
    display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px;
    font-size: .78rem; font-weight: 700; background: rgba(37,99,235,.1); color: #1d4ed8;
}
.dl-chip.soft { background: var(--bx-surface-2, #f1f5f9); color: var(--bx-muted, #64748b); }
.dl-btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px;
    border-radius: 11px; border: 0; font: inherit; font-size: .86rem; font-weight: 700;
    cursor: pointer; text-decoration: none; background: #2563eb; color: #fff;
}
.dl-btn svg { width: 16px; height: 16px; }
.dl-btn.ghost {
    background: transparent; color: var(--bx-muted, #64748b);
    border: 1px solid var(--bx-border, #e2e8f0);
}
.dl-btn.ghost:hover { color: #2563eb; border-color: rgba(37,99,235,.3); }
.dl-btn.danger {
    background: rgba(225,29,72,.08); color: #e11d48;
    border: 1px solid rgba(225,29,72,.2);
}
.dl-btn.danger:hover { background: #e11d48; color: #fff; border-color: transparent; }
.dl-notice {
    padding: 12px 14px; border-radius: 12px; font-size: .88rem; font-weight: 650;
}
.dl-notice.ok {
    color: #059669; background: rgba(5,150,105,.1); border: 1px solid rgba(5,150,105,.22);
}
.dl-stats {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.dl-stat {
    position: relative; overflow: hidden;
    padding: 18px 16px; border-radius: 16px;
    background: var(--bx-surface, #fff);
    border: 1px solid var(--bx-border, #e2e8f0);
    box-shadow: 0 1px 0 rgba(15,23,42,.02);
}
.dl-stat::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
    background: linear-gradient(180deg, #2563eb, #38bdf8);
}
.dl-stat.ok::before { background: linear-gradient(180deg, #059669, #34d399); }
.dl-stat.warn::before { background: linear-gradient(180deg, #d97706, #fbbf24); }
.dl-stat.mute::before { background: linear-gradient(180deg, #64748b, #94a3b8); }
.dl-stat span {
    display: block; font-size: .68rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--bx-faint, #94a3b8);
}
.dl-stat strong {
    display: block; margin-top: 8px; font-size: 1.55rem; letter-spacing: -.04em;
    color: var(--bx-text, #0f172a);
}
.dl-stat.ok strong { color: #059669; }
.dl-stat.warn strong { color: #d97706; }
.dl-stat-sm { font-size: 1.15rem !important; letter-spacing: -.02em !important; }
.dl-panel {
    border: 1px solid var(--bx-border, #e2e8f0); border-radius: 16px;
    background: var(--bx-surface, #fff); overflow: hidden;
}
.dl-panel-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap; padding: 14px 16px;
    border-bottom: 1px solid var(--bx-border, #e2e8f0);
    background: linear-gradient(180deg, rgba(248,250,252,.9), rgba(255,255,255,0));
}
.dl-panel-head strong { display: block; font-size: .95rem; }
.dl-panel-head small { color: var(--bx-muted, #64748b); font-size: .78rem; }
.dl-tools { display: flex; gap: 8px; }
.dl-search {
    width: min(240px, 70vw); border: 1px solid var(--bx-border, #e2e8f0);
    background: var(--bx-surface, #fff); color: inherit; border-radius: 10px;
    padding: 9px 12px; font: inherit; font-size: .86rem;
}
.dl-search:focus {
    outline: 0; border-color: rgba(37,99,235,.45);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.dl-table-wrap { overflow: auto; max-height: 640px; }
.dl-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.dl-table th {
    text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--bx-muted, #64748b); padding: 12px 16px;
    border-bottom: 1px solid var(--bx-border, #e2e8f0);
    background: var(--bx-surface-2, #f8fafc); position: sticky; top: 0; z-index: 1;
}
.dl-table td {
    padding: 13px 16px; border-bottom: 1px solid var(--bx-border, #e2e8f0);
    font-size: .9rem; vertical-align: middle;
}
.dl-table tr:last-child td { border-bottom: 0; }
.dl-table tr:hover td { background: rgba(37,99,235,.03); }
.dl-time {
    white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .78rem; color: var(--bx-muted, #64748b);
}
.dl-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dl-avatar {
    width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
    font-size: .75rem; font-weight: 800; color: #fff;
    background: linear-gradient(145deg, #3b82f6, #0ea5e9); flex-shrink: 0;
}
.dl-user strong { font-weight: 700; color: #1d4ed8; }
.dl-pass code {
    display: inline-block; padding: 5px 9px; border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem;
    color: #b45309; background: rgba(245,158,11,.12);
}
.dl-status {
    display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px;
    font-size: .7rem; font-weight: 800; letter-spacing: .02em;
}
.dl-status.ok { color: #047857; background: rgba(16,185,129,.12); }
.dl-status.try { color: #b45309; background: rgba(245,158,11,.14); }
.dl-empty {
    padding: 48px 20px; text-align: center; color: var(--bx-muted, #64748b);
}
.dl-empty.panel {
    border: 1px solid var(--bx-border, #e2e8f0); border-radius: 16px;
    background: var(--bx-surface, #fff);
}
.dl-empty-icon {
    width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 16px;
    display: grid; place-items: center; background: var(--bx-surface-2, #f1f5f9);
    color: var(--bx-muted, #64748b);
}
.dl-empty-icon svg { width: 24px; height: 24px; }
.dl-empty strong { display: block; color: var(--bx-text, #0f172a); font-size: 1rem; }
.dl-empty p { margin: 6px 0 0; font-size: .88rem; }
.dl-pager {
    display: flex; justify-content: center; align-items: center; gap: 16px;
    padding: 14px; border-top: 1px solid var(--bx-border, #e2e8f0);
    color: var(--bx-muted, #64748b); font-size: .86rem;
}
.dl-pager a { color: #2563eb; font-weight: 700; text-decoration: none; }

.dl-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px;
}
.dl-card {
    display: flex; flex-direction: column; gap: 12px; padding: 16px;
    border-radius: 16px; text-decoration: none; color: inherit;
    background: var(--bx-surface, #fff);
    border: 1px solid var(--bx-border, #e2e8f0);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dl-card:hover {
    transform: translateY(-2px);
    border-color: rgba(37,99,235,.28);
    box-shadow: 0 14px 30px rgba(15,23,42,.08);
}
.dl-card.hot { border-color: rgba(37,99,235,.22); }
.dl-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.dl-card-id { display: flex; gap: 11px; align-items: center; min-width: 0; }
.dl-card-mark {
    width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
    font-weight: 800; color: #fff; background: linear-gradient(145deg, #2563eb, #0ea5e9);
    flex-shrink: 0;
}
.dl-card-id strong {
    display: block; font-size: .95rem; letter-spacing: -.02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px;
}
.dl-card-id small {
    display: block; margin-top: 2px; font-size: .68rem; font-weight: 800;
    letter-spacing: .05em; color: #6366f1;
}
.dl-card-count {
    min-width: 36px; height: 28px; padding: 0 9px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 800; color: var(--bx-muted, #64748b);
    background: var(--bx-surface-2, #f1f5f9);
}
.dl-card-count.ok { color: #1d4ed8; background: rgba(37,99,235,.12); }
.dl-card-meta {
    display: flex; justify-content: space-between; gap: 10px; align-items: center;
    font-size: .8rem; color: var(--bx-muted, #64748b);
}
.dl-card-meta span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.dl-card-meta em { font-style: normal; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.dl-card-foot {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 10px; border-top: 1px dashed var(--bx-border, #e2e8f0);
    font-size: .8rem; font-weight: 700; color: #2563eb;
}
.dl-card-foot svg { width: 16px; height: 16px; }

@media (max-width: 900px) {
    .dl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .dl-table { min-width: 0; }
    .dl-table thead { display: none; }
    .dl-table, .dl-table tbody, .dl-table tr, .dl-table td { display: block; width: 100%; }
    .dl-table tr {
        padding: 12px 14px; border-bottom: 1px solid var(--bx-border, #e2e8f0);
    }
    .dl-table td {
        padding: 4px 0; border: 0;
    }
    .dl-table td::before {
        content: attr(data-label); display: block;
        font-size: .65rem; font-weight: 800; letter-spacing: .05em;
        text-transform: uppercase; color: var(--bx-faint, #94a3b8); margin-bottom: 2px;
    }
}

html[data-theme="dark"] .dl-hero-icon { background: rgba(96,165,250,.12); color: #93c5fd; }
html[data-theme="dark"] .dl-back,
html[data-theme="dark"] .dl-chip.soft,
html[data-theme="dark"] .dl-btn.ghost,
html[data-theme="dark"] .dl-stat,
html[data-theme="dark"] .dl-panel,
html[data-theme="dark"] .dl-card,
html[data-theme="dark"] .dl-empty.panel,
html[data-theme="dark"] .dl-search {
    background: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.08);
}
html[data-theme="dark"] .dl-chip { background: rgba(96,165,250,.15); color: #93c5fd; }
html[data-theme="dark"] .dl-badge { color: #c4b5fd; background: rgba(167,139,250,.16); }
html[data-theme="dark"] .dl-user strong { color: #93c5fd; }
html[data-theme="dark"] .dl-pass code { color: #fbbf24; background: rgba(251,191,36,.12); }
html[data-theme="dark"] .dl-table th { background: rgba(255,255,255,.02); }
html[data-theme="dark"] .dl-table tr:hover td { background: rgba(255,255,255,.03); }
html[data-theme="dark"] .dl-card:hover { box-shadow: 0 16px 36px rgba(0,0,0,.35); }
html[data-theme="dark"] .dl-panel-head {
    background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}

/* Data list enhancements */
.dl-hero-card {
    border: 1px solid var(--bx-border, #e2e8f0);
    border-radius: 18px;
    background:
        radial-gradient(1200px 240px at 0% 0%, rgba(37,99,235,.08), transparent 55%),
        radial-gradient(900px 220px at 100% 0%, rgba(14,165,233,.07), transparent 50%),
        var(--bx-surface, #fff);
    padding: 18px 18px 14px;
    box-shadow: 0 10px 30px rgba(15,23,42,.04);
}
.dl-hero-stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid var(--bx-border, #e2e8f0);
}
.dl-hero-stats > div {
    padding: 10px 12px; border-radius: 12px;
    background: rgba(15,23,42,.025);
}
.dl-hero-stats span {
    display: block; font-size: .66rem; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; color: var(--bx-faint, #94a3b8);
}
.dl-hero-stats strong {
    display: block; margin-top: 4px; font-size: 1.2rem; letter-spacing: -.03em;
    color: var(--bx-text, #0f172a);
}
.dl-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap; padding: 4px 2px;
}
.dl-toolbar strong { display: block; font-size: .95rem; }
.dl-toolbar small { color: var(--bx-muted, #64748b); font-size: .78rem; }
.dl-card { position: relative; overflow: hidden; }
.dl-card-glow {
    position: absolute; inset: auto -20% -40% auto; width: 160px; height: 160px;
    border-radius: 50%; background: radial-gradient(circle, rgba(37,99,235,.16), transparent 70%);
    pointer-events: none; opacity: 0; transition: opacity .2s ease;
}
.dl-card:hover .dl-card-glow, .dl-card.hot .dl-card-glow { opacity: 1; }
@media (max-width: 700px) {
    .dl-hero-stats { grid-template-columns: 1fr; }
}
html[data-theme="dark"] .dl-hero-card {
    background:
        radial-gradient(1200px 240px at 0% 0%, rgba(59,130,246,.12), transparent 55%),
        radial-gradient(900px 220px at 100% 0%, rgba(14,165,233,.1), transparent 50%),
        rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.08);
}
html[data-theme="dark"] .dl-hero-stats > div { background: rgba(255,255,255,.04); }

/* leftover utilities restored 2026-09-01 */
.pay-search {
    width: 100%; min-height: 40px; padding: 0 14px;
    border: 1px solid var(--bx-line, rgba(20,24,36,.1));
    border-radius: 12px; background: rgba(255,255,255,.8);
    color: var(--bx-text); font: inherit; font-size: 13px; font-weight: 600;
}
[data-theme="dark"] .pay-search { background: rgba(255,255,255,.04); border-color: var(--bx-line); color: var(--bx-text); }
.pay-table-wrap { overflow-x: auto; border: 1px solid var(--bx-line); border-radius: 14px; }
.pay-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.pay-pass { letter-spacing: .02em; }
.dl-row:hover td { background: rgba(124,58,237,.04); }
.dl-detail { padding: 10px 14px; color: var(--bx-muted); font-size: 12.5px; }
.tawk-label { font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--bx-faint); }
.ann-select-wrap { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Page transition overlay — hidden unless .on (unstyled leftover text fix) */
.sf-page-fx {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    background: rgba(8, 10, 18, .58);
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility .28s ease;
}
.sf-page-fx.on {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.sf-page-fx-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 220px;
    padding: 28px 32px 24px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.12);
    background:
        radial-gradient(280px 120px at 50% 0%, rgba(139,92,246,.22), transparent 70%),
        color-mix(in srgb, #111522 88%, #fff);
    box-shadow: 0 28px 70px -28px rgba(0,0,0,.65);
}
.sf-page-fx-logo {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: 16px;
    color: #fff;
    font-size: 22px; font-weight: 800;
    background: linear-gradient(145deg, #8b5cf6, #10b981);
    box-shadow: 0 14px 28px -14px rgba(124,58,237,.7);
    animation: sfPulse 1.1s ease-in-out infinite;
}
.sf-page-fx-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #f8fafc;
}
.sf-page-fx-msg {
    min-height: 22px;
    margin: 2px 0 4px;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: -.15px;
    color: rgba(226,232,240,.78);
    text-align: center;
}
.sf-page-fx-msg.swap {
    animation: sfMsgIn .35s cubic-bezier(.22,1,.36,1) both;
}
@keyframes sfMsgIn {
    from { opacity: 0; transform: translateY(6px); filter: blur(2px); }
    to { opacity: 1; transform: none; filter: none; }
}
@keyframes sfPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
.sf-page-fx-bar {
    width: 120px; height: 3px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,.12);
}
.sf-page-fx-bar i {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8b5cf6, #10b981);
    animation: sfBar 1s ease-in-out infinite;
}
@keyframes sfBar {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}
body.sf-leaving { cursor: progress; }

.add-site select,
.add-site input[type="text"],
.add-site input[type="password"],
.asx input[type="text"],
.asx input[type="search"],
.asx input[type="password"] {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--bx-line, rgba(20,24,36,.1));
    border-radius: 12px;
    background: rgba(255,255,255,.86);
    color: var(--bx-text, #101522);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
}
[data-theme="dark"] .add-site select,
[data-theme="dark"] .add-site input[type="text"],
[data-theme="dark"] .add-site input[type="password"],
[data-theme="dark"] .asx input[type="text"],
[data-theme="dark"] .asx input[type="search"],
[data-theme="dark"] .asx input[type="password"] {
    background: rgba(255,255,255,.04);
    border-color: var(--bx-line);
    color: var(--bx-text);
}

/* Add Site — wizard */
.asx { width: 100%; display: flex; flex-direction: column; gap: 18px; }
.asx-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    padding: 26px 28px 24px;
    border: 1px solid var(--bx-line);
    border-radius: 22px;
    background:
        radial-gradient(720px 220px at 0% 0%, rgba(124,58,237,.16), transparent 58%),
        radial-gradient(480px 180px at 100% 0%, rgba(16,185,129,.1), transparent 52%),
        color-mix(in srgb, var(--bx-box) 94%, transparent);
    box-shadow: var(--bx-shadow-soft);
}
.asx-kicker {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--bx-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.asx-hero h1 {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.7px;
    color: var(--bx-text);
}
.asx-hero p {
    margin: 6px 0 0;
    color: var(--bx-muted);
    font-size: 13.5px;
}
.asx-rail {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}
.asx-rail li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 7px;
    border-radius: 999px;
    border: 1px solid var(--bx-line);
    color: var(--bx-muted);
    background: rgba(255,255,255,.45);
    font-size: 12px;
    font-weight: 750;
}
.asx-rail em {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    font-style: normal;
    font-size: 10px;
    font-weight: 800;
    background: color-mix(in srgb, var(--bx-canvas) 70%, transparent);
}
.asx-rail li.on {
    color: #5b21b6;
    border-color: rgba(124,58,237,.28);
    background: rgba(124,58,237,.1);
}
.asx-rail li.on em { color: #fff; background: linear-gradient(145deg, #8b5cf6, #7c3aed); }
.asx-alert { margin: 0; }
.asx-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
    align-items: start;
}
.asx-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.asx-card {
    position: relative;
    padding: 22px;
    border: 1px solid var(--bx-line);
    border-radius: 20px;
    background: color-mix(in srgb, var(--bx-box) 96%, var(--bx-canvas));
    box-shadow: var(--bx-shadow-soft);
}
.asx-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.asx-card-head b {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(145deg, #8b5cf6, #6d28d9);
    font-size: 12px;
    font-weight: 800;
}
.asx-card-head strong, .asx-card-head small { display: block; }
.asx-card-head strong { font-size: 15.5px; font-weight: 800; letter-spacing: -.25px; }
.asx-card-head small { margin-top: 2px; color: var(--bx-muted); font-size: 12px; }

.asx-stacks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.asx-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 14px 13px;
    border: 1px solid var(--bx-line);
    border-radius: 16px;
    background: rgba(255,255,255,.55);
    cursor: pointer;
    text-align: left;
    color: inherit;
    transition: .18s ease;
}
.asx-stack i {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    margin-bottom: 6px;
    font-style: normal;
    font-size: 10px;
    font-weight: 800;
    color: #6d28d9;
    background: rgba(124,58,237,.1);
}
.asx-stack strong { font-size: 13px; font-weight: 800; }
.asx-stack small { color: var(--bx-muted); font-size: 11px; }
.asx-stack:hover { border-color: rgba(124,58,237,.35); transform: translateY(-1px); }
.asx-stack.on {
    border-color: rgba(124,58,237,.45);
    background: linear-gradient(180deg, rgba(139,92,246,.12), rgba(255,255,255,.7));
    box-shadow: 0 10px 24px -18px rgba(109,40,217,.7);
}

.asx-brand-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.asx-search {
    position: relative;
    flex: 1;
}
.asx-search svg {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    color: var(--bx-faint);
}
.asx-search input { padding-left: 36px; }
.asx-count { color: var(--bx-faint); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.asx-brands {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 8px;
    max-height: 280px;
    overflow: auto;
    padding: 2px;
}
.asx-brand {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--bx-line);
    border-radius: 12px;
    background: rgba(255,255,255,.7);
    color: var(--bx-text);
    font-size: 12.5px;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
}
.asx-brand:hover { border-color: rgba(124,58,237,.35); }
.asx-brand.on {
    color: #5b21b6;
    border-color: rgba(124,58,237,.4);
    background: rgba(124,58,237,.1);
}
.asx-empty {
    grid-column: 1 / -1;
    padding: 18px;
    color: var(--bx-muted);
    text-align: center;
    font-size: 13px;
}
.asx-native {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.asx-members {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
}
.asx-member {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--bx-line);
    border-radius: 14px;
    background: rgba(255,255,255,.6);
    cursor: pointer;
}
.asx-member input { display: none; }
.asx-member.on {
    border-color: rgba(124,58,237,.4);
    background: rgba(124,58,237,.08);
}
.asx-avatar {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(145deg, #8b5cf6, #10b981);
    font-size: 11px;
    font-weight: 800;
}
.asx-member strong, .asx-member small { display: block; }
.asx-member strong { font-size: 13.5px; }
.asx-member small { color: var(--bx-muted); font-size: 11px; margin-top: 2px; }

.asx-inline { display: flex; gap: 8px; }
.asx-inline input { flex: 1; }
.asx-ghost {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--bx-line);
    border-radius: 12px;
    background: rgba(255,255,255,.7);
    color: var(--bx-text);
    font-weight: 750;
    cursor: pointer;
}
.asx-domains {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: end;
}
.asx-arrow {
    padding-bottom: 12px;
    color: var(--bx-faint);
    font-size: 18px;
    font-weight: 800;
}
.asx-field {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--bx-line);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,.86);
}
.asx-field em {
    display: grid;
    place-items: center;
    padding: 0 12px;
    color: var(--bx-faint);
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
    background: rgba(124,58,237,.06);
    border-right: 1px solid var(--bx-line);
}
.asx-field input {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    min-height: 44px;
}

.asx-side { position: sticky; top: 18px; }
.asx-preview {
    padding: 22px;
    border: 1px solid var(--bx-line);
    border-radius: 22px;
    background:
        radial-gradient(280px 140px at 100% 0%, rgba(124,58,237,.16), transparent 60%),
        color-mix(in srgb, var(--bx-box) 96%, #1a1235);
    box-shadow: var(--bx-shadow);
}
.asx-preview-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.asx-live {
    color: var(--bx-faint);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.asx-badge {
    padding: 4px 8px;
    border-radius: 999px;
    color: #5b21b6;
    background: rgba(124,58,237,.12);
    font-size: 11px;
    font-weight: 800;
}
.asx-preview h2 {
    margin: 0 0 16px;
    font-size: 24px;
    letter-spacing: -.5px;
}
.asx-preview dl { margin: 0 0 18px; }
.asx-preview dl > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid var(--bx-line);
}
.asx-preview dt { color: var(--bx-faint); font-size: 11.5px; font-weight: 750; }
.asx-preview dd {
    margin: 0;
    color: var(--bx-text);
    font-size: 12.5px;
    font-weight: 750;
    text-align: right;
    word-break: break-all;
}
.asx-submit {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(145deg, #8b5cf6, #6d28d9);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 14px 28px -16px rgba(109,40,217,.8);
}
.asx-submit:hover { filter: brightness(1.06); transform: translateY(-1px); }
.asx-fine {
    margin: 10px 0 0;
    color: var(--bx-faint);
    font-size: 11px;
    text-align: center;
}

[data-theme="dark"] .asx-hero,
[data-theme="dark"] .asx-card,
[data-theme="dark"] .asx-preview {
    background: var(--bx-box);
}
[data-theme="dark"] .asx-stack,
[data-theme="dark"] .asx-brand,
[data-theme="dark"] .asx-member,
[data-theme="dark"] .asx-ghost,
[data-theme="dark"] .asx-field,
[data-theme="dark"] .asx-rail li {
    background: rgba(255,255,255,.03);
}
[data-theme="dark"] .asx-stack.on,
[data-theme="dark"] .asx-brand.on,
[data-theme="dark"] .asx-member.on {
    background: rgba(139,92,246,.16);
    color: #ddd6fe;
}
[data-theme="dark"] .asx-rail li.on { color: #ddd6fe; }
[data-theme="dark"] .asx-badge { color: #ddd6fe; }

@media (max-width: 1080px) {
    .asx-shell { grid-template-columns: 1fr; }
    .asx-side { position: static; }
    .asx-stacks { grid-template-columns: 1fr 1fr; }
    .asx-domains { grid-template-columns: 1fr; }
    .asx-arrow { display: none; }
    .asx-hero { flex-direction: column; align-items: flex-start; }
    .asx-hero h1 { font-size: 24px; }
}