/* ── BotFarm — Remnawave-style theme ───────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* Backgrounds */
    --bg:          #0a0a0c;
    --bg2:         #101013;
    --bg3:         #16171b;
    --surface:     #1a1b20;
    --surface2:    #22232a;
    --surface3:    #2a2b34;

    /* Borders & dividers */
    --border:      #2a2c35;
    --border-soft: #20222a;
    --divider:     #1d1e25;

    /* Text */
    --text:        #f1f1f3;
    --text2:       #a1a1aa;
    --text3:       #71717a;

    /* Accents — purple (Remnawave-esque) */
    --accent:      #8b5cf6;
    --accent2:     #a78bfa;
    --accent3:     #7c3aed;
    --accent-soft: rgba(139, 92, 246, 0.12);
    --accent-glow: rgba(139, 92, 246, 0.18);

    /* Status colors */
    --green:       #22c55e;
    --green-soft:  rgba(34, 197, 94, 0.14);
    --yellow:      #f59e0b;
    --yellow-soft: rgba(245, 158, 11, 0.14);
    --red:         #ef4444;
    --red-soft:    rgba(239, 68, 68, 0.14);
    --blue:        #3b82f6;
    --blue-soft:   rgba(59, 130, 246, 0.14);
    --cyan:        #06b6d4;

    /* Radii */
    --r-sm:   6px;
    --r:      10px;
    --r-lg:   14px;
    --r-xl:   18px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow:    0 4px 14px rgba(0,0,0,.35);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.5);

    /* Layout */
    --sidebar-w:  240px;
    --header-h:   60px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

code, pre, .mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

a { color: var(--accent2); text-decoration: none; }
a:hover { color: var(--accent); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #3a3b46; }

/* ── Layout: sidebar + content ─────────────────────────────────────── */

body {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: var(--header-h) 1fr;
    grid-template-areas:
        "sidebar header"
        "sidebar main";
    min-height: 100vh;
}

header {
    grid-area: header;
    background: var(--bg2);
    border-bottom: 1px solid var(--border-soft);
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
}
header h1 { display: none; }
header .status {
    font-size: 13px;
    color: var(--text3);
    font-weight: 500;
    letter-spacing: -0.005em;
}
header .btn {
    padding: 6px 12px;
    font-size: 13px;
}

nav {
    grid-area: sidebar;
    background: var(--bg2);
    border-right: 1px solid var(--border-soft);
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    position: sticky;
    top: 0;
    height: 100vh;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 4px 18px;
    padding: 4px 8px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    /* Solid theme accent with a slim light-highlight that drifts across it */
    background: linear-gradient(
        100deg,
        var(--accent) 0%,
        var(--accent) 38%,
        var(--accent2) 50%,
        var(--accent) 62%,
        var(--accent) 100%
    );
    background-size: 280% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: brand-shimmer 3.6s linear infinite;
}
@keyframes brand-shimmer {
    0%   { background-position: 280% 50%; }
    100% { background-position: 0% 50%; }
}
.brand-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--accent);
    /* keep the icon solid — background-clip only affects the text */
    -webkit-text-fill-color: var(--accent);
}
.brand-icon svg { width: 100%; height: 100%; display: block; }

nav button {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text2);
    padding: 9px 12px;
    border-radius: var(--r);
    text-align: left;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
    font-family: inherit;
    transition: background .12s, color .12s, border-color .12s;
    display: flex;
    align-items: center;
    gap: 11px;
}
nav button::before {
    content: "";
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 18px;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 18px;
}
/* Lucide-style stroke SVGs as masks (so they inherit currentColor) */
nav button[data-tab="dashboard"]::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='9'/><rect x='14' y='3' width='7' height='5'/><rect x='14' y='12' width='7' height='9'/><rect x='3' y='16' width='7' height='5'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='9'/><rect x='14' y='3' width='7' height='5'/><rect x='14' y='12' width='7' height='9'/><rect x='3' y='16' width='7' height='5'/></svg>");
}
nav button[data-tab="accounts"]::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
}
nav button[data-tab="bots"]::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='10' rx='2'/><circle cx='12' cy='5' r='2'/><path d='M12 7v4'/><line x1='8' y1='16' x2='8' y2='16'/><line x1='16' y1='16' x2='16' y2='16'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='10' rx='2'/><circle cx='12' cy='5' r='2'/><path d='M12 7v4'/><line x1='8' y1='16' x2='8' y2='16'/><line x1='16' y1='16' x2='16' y2='16'/></svg>");
}
nav button[data-tab="botslist"]::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='7' r='2.5'/><circle cx='6' cy='17' r='2.5'/><line x1='11' y1='6' x2='21' y2='6'/><line x1='11' y1='9' x2='17' y2='9'/><line x1='11' y1='16' x2='21' y2='16'/><line x1='11' y1='19' x2='17' y2='19'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='7' r='2.5'/><circle cx='6' cy='17' r='2.5'/><line x1='11' y1='6' x2='21' y2='6'/><line x1='11' y1='9' x2='17' y2='9'/><line x1='11' y1='16' x2='21' y2='16'/><line x1='11' y1='19' x2='17' y2='19'/></svg>");
}
nav button[data-tab="usernames"]::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
}
nav button[data-tab="register"]::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='2' width='14' height='20' rx='2'/><line x1='12' y1='18' x2='12.01' y2='18'/><path d='M9 7h6'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='2' width='14' height='20' rx='2'/><line x1='12' y1='18' x2='12.01' y2='18'/><path d='M9 7h6'/></svg>");
}
nav button[data-tab="warmup"]::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'/></svg>");
}
nav button[data-tab="invites"]::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='8.5' cy='7' r='4'/><line x1='20' y1='8' x2='20' y2='14'/><line x1='23' y1='11' x2='17' y2='11'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='8.5' cy='7' r='4'/><line x1='20' y1='8' x2='20' y2='14'/><line x1='23' y1='11' x2='17' y2='11'/></svg>");
}
nav button[data-tab="webhooks"]::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/><path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/><path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/></svg>");
}
nav button[data-tab="proxies"]::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='2' y1='12' x2='22' y2='12'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='2' y1='12' x2='22' y2='12'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>");
}
nav button[data-tab="tasks"]::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 11l3 3L22 4'/><path d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 11l3 3L22 4'/><path d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/></svg>");
}

nav button:hover {
    background: var(--surface);
    color: var(--text);
}
nav button.active {
    background: var(--accent-soft);
    color: var(--accent2);
    border-color: var(--accent-glow);
    font-weight: 600;
}
nav button.active::before { opacity: 1; }

main {
    grid-area: main;
    padding: 24px 28px 60px;
    overflow-y: auto;
    max-width: 100%;
}

/* ── Cards ─────────────────────────────────────────────────────────── */

.card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    padding: 22px 24px;
    margin-bottom: 18px;
}
.card h2 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 16px;
    letter-spacing: -0.005em;
}

/* Stat cards (metric tiles) */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.stat {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
    transition: border-color .15s, transform .15s;
}
.stat:hover {
    border-color: var(--border);
    transform: translateY(-1px);
}
.stat-label {
    font-size: 11px;
    color: var(--text3);
    font-weight: 500;
    letter-spacing: 0.01em;
}
.stat-value {
    font-size: 26px;
    font-weight: 700;
    margin-top: 4px;
    color: var(--text);
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}
.stat-sub {
    font-size: 11.5px;
    color: var(--text3);
    margin-top: 6px;
}

/* ── Tabs ──────────────────────────────────────────────────────────── */

.tab-content { display: none; }
.tab-content.active { display: block; }

/* ── Form controls ─────────────────────────────────────────────────── */

label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text2);
    display: block;
    margin-bottom: 6px;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="file"],
textarea,
select {
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 9px 12px;
    border-radius: var(--r);
    font-size: 13px;
    font-family: inherit;
    width: 100%;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type="file"] {
    cursor: pointer;
    padding: 8px 10px;
}
input[type="file"]::file-selector-button {
    background: var(--surface2);
    border: none;
    color: var(--text);
    padding: 4px 10px;
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: 12px;
    margin-right: 10px;
    cursor: pointer;
}
input[type="checkbox"] {
    accent-color: var(--accent);
    width: 16px; height: 16px;
    vertical-align: middle;
    margin-right: 4px;
}

select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23a1a1aa' d='M4.5 6L8 9.5L11.5 6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 32px;
}

.form-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.form-group {
    display: flex;
    flex-direction: column;
}

/* ── Buttons ───────────────────────────────────────────────────────── */

.btn {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 9px 16px;
    border-radius: var(--r);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}
.btn:hover:not(:disabled) {
    background: var(--surface3);
    border-color: var(--surface3);
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
    font-weight: 600;
    box-shadow: 0 1px 0 rgba(255,255,255,.12) inset;
}
.btn-primary:hover:not(:disabled) {
    background: var(--accent3);
    border-color: var(--accent3);
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 4px 12px var(--accent-soft);
}
.btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

.btn-secondary {
    background: var(--surface2);
    border-color: var(--border);
}

.btn-danger {
    background: var(--red-soft);
    border-color: rgba(239, 68, 68, .35);
    color: #fca5a5;
}
.btn-danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, .25);
    border-color: var(--red);
    color: white;
}

.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-xs { padding: 4px 9px; font-size: 11px; border-radius: var(--r-sm); }

/* ── Tables ────────────────────────────────────────────────────────── */

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}
thead th {
    text-align: left;
    padding: 11px 14px;
    background: transparent;
    color: var(--text3);
    font-weight: 500;
    font-size: 11.5px;
    letter-spacing: 0.005em;
    border-bottom: 1px solid var(--border-soft);
    position: sticky;
    top: 0;
}
thead th:first-child { border-top-left-radius: var(--r); }
thead th:last-child  { border-top-right-radius: var(--r); }

tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--divider);
    vertical-align: middle;
}
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--bg3); }
tbody tr:last-child td { border-bottom: none; }

td.empty, td.empty:hover {
    text-align: center;
    color: var(--text3);
    padding: 36px 14px;
    font-size: 13px;
}

/* ── Badges ────────────────────────────────────────────────────────── */

.badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.5;
    background: var(--surface3);
    color: var(--text2);
    border: 1px solid transparent;
}
.badge-active,
.badge-completed,
.badge-success    { background: var(--green-soft); color: #86efac; border-color: rgba(34,197,94,.3); }
.badge-pending,
.badge-running    { background: var(--blue-soft); color: #93c5fd; border-color: rgba(59,130,246,.3); }
.badge-warning,
.badge-limit      { background: var(--yellow-soft); color: #fcd34d; border-color: rgba(245,158,11,.3); }
.badge-inactive   { background: var(--surface3); color: var(--text2); border-color: var(--border); }
.badge-frozen     { background: rgba(6,182,212,.14); color: #67e8f9; border-color: rgba(6,182,212,.3); }
.badge-blocked,
.badge-failed,
.badge-cancelled  { background: var(--red-soft); color: #fca5a5; border-color: rgba(239,68,68,.3); }

.mini-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    background: var(--surface3);
    color: var(--text2);
    border: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mini-badge.ok    { background: var(--green-soft); color: #86efac; border-color: rgba(34,197,94,.3); }
.mini-badge.limit { background: var(--yellow-soft); color: #fcd34d; border-color: rgba(245,158,11,.3); }
.mini-badge.cool  { background: var(--red-soft); color: #fca5a5; border-color: rgba(239,68,68,.3); }

/* ── Status dots ───────────────────────────────────────────────────── */

.dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--text3);
    box-shadow: 0 0 0 3px rgba(255,255,255,.02);
}
.dot-ok      { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.dot-warn    { background: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-soft); }
.dot-fail    { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.dot-unknown { background: var(--text3); box-shadow: 0 0 0 3px rgba(255,255,255,.04); }

/* ── Toasts ────────────────────────────────────────────────────────── */

.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    color: var(--text);
    padding: 12px 16px;
    border-radius: var(--r);
    box-shadow: var(--shadow);
    font-size: 13px;
    min-width: 240px;
    max-width: 420px;
    animation: toast-in .22s ease-out;
    pointer-events: auto;
}
.toast.success { border-left-color: var(--green); }
.toast.error   { border-left-color: var(--red); }
.toast.info    { border-left-color: var(--blue); }
@keyframes toast-in {
    from { transform: translateX(20px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

/* ── Modal ─────────────────────────────────────────────────────────── */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 26px 28px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: modal-in .2s ease-out;
}
@keyframes modal-in {
    from { transform: scale(.96); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.modal h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

/* ── Empty state / spinner ─────────────────────────────────────────── */

.empty {
    text-align: center;
    color: var(--text3);
    padding: 24px;
    font-size: 13px;
}
.spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid var(--surface3);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .8s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Drop zones ────────────────────────────────────────────────────── */

.drop-zone {
    border: 1.5px dashed var(--border);
    border-radius: var(--r-lg);
    background: var(--bg3);
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all .15s;
    min-height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
}
.drop-zone:hover, .drop-zone:focus {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.drop-zone.dragover {
    border-color: var(--accent2);
    background: var(--accent-soft);
}
.drop-zone-wide { min-height: 100px; }
.drop-hint {
    color: var(--text3);
    font-size: 12px;
    margin-top: 8px;
}
.avatar-preview {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.drop-zone-wide .avatar-preview {
    width: 100%;
    height: 80px;
    border-radius: var(--r);
}
.avatar-preview img,
.avatar-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.drop-zone.has-image .drop-hint { display: none; }

/* ── Upload mode tabs (Accounts upload) ────────────────────────────── */

.upload-tabs { gap: 6px; }
.upload-tab-btn {
    background: var(--bg3);
    color: var(--text2);
    border: 1px solid var(--border);
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--r);
}
.upload-tab-btn.active {
    background: var(--accent-soft);
    color: var(--accent2);
    border-color: rgba(139, 92, 246, .35);
}
.upload-mode { padding: 6px 0; }

/* ── Inline dropdowns in tables ────────────────────────────────────── */

select.inline-lib,
select.inline-proxy {
    background: var(--bg3);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 4px 22px 4px 8px;
    font-size: 11px;
    min-width: 110px;
    background-position: right 6px center;
    background-size: 12px;
}

/* ── Row actions ───────────────────────────────────────────────────── */

.row-actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.row-actions .btn { padding: 4px 8px; font-size: 11px; }

/* ── Countdown / proxy test status ─────────────────────────────────── */

.countdown {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    color: var(--yellow);
    font-size: 12px;
    background: var(--yellow-soft);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
}
.proxy-test {
    font-size: 11px;
    color: var(--text3);
}
.proxy-test.ok   { color: #86efac; }
.proxy-test.fail { color: #fca5a5; }

/* ── Pickable username badges ──────────────────────────────────────── */

.un-pick {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 3px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    transition: all .15s;
}
.un-pick.on {
    background: var(--green-soft);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.4);
}
.un-pick.off {
    background: var(--surface2);
    color: var(--text3);
    border-color: var(--border);
    text-decoration: line-through;
}
.un-pick.on:hover  { background: rgba(34, 197, 94, 0.25); }
.un-pick.off:hover { background: var(--surface3); color: var(--text2); }
.un-pick-mark {
    display: inline-block;
    width: 12px;
    text-align: center;
    font-weight: bold;
}

/* ── Tooltips via data-tip ─────────────────────────────────────────── */

[data-tip] { position: relative; }
[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface2);
    color: var(--text);
    padding: 5px 9px;
    border-radius: var(--r-sm);
    font-size: 11px;
    white-space: nowrap;
    border: 1px solid var(--border);
    z-index: 10;
    pointer-events: none;
    box-shadow: var(--shadow);
}

/* ── Multi-select listbox ──────────────────────────────────────────── */

.account-select-multi {
    background: var(--bg3);
    font-size: 12px;
    line-height: 1.7;
    padding: 4px 8px;
}
.account-select-multi option {
    padding: 4px 8px;
    border-radius: var(--r-sm);
}
.account-select-multi option:checked {
    background: var(--accent-soft);
    color: var(--accent2);
}

/* ── Misc ──────────────────────────────────────────────────────────── */

details summary { cursor: pointer; user-select: none; }
details[open] summary { margin-bottom: 8px; }

code {
    background: var(--bg3);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    color: var(--accent2);
    border: 1px solid var(--border-soft);
}
pre code { background: none; border: none; padding: 0; }

hr {
    border: none;
    border-top: 1px solid var(--border-soft);
    margin: 16px 0;
}

/* ── Responsive (sidebar collapses) ────────────────────────────────── */

@media (max-width: 900px) {
    body {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            "header"
            "sidebar"
            "main";
    }
    nav {
        height: auto;
        position: relative;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 8px 12px;
        border-right: none;
        border-bottom: 1px solid var(--border-soft);
    }
    nav::before { display: none; }
    nav button { flex: 1 1 auto; justify-content: center; padding: 8px 10px; font-size: 13px; }
    main { padding: 16px; }
}

/* ── Header buttons with leading icons ──────────────────────────── */
.header-icon-btn {
    display: inline-flex;
    align-items: center;
    color: var(--text2);
}
.header-icon-btn:hover { color: var(--text); }

/* ── Polished theme swatches (no emoji) ─────────────────────────── */
.theme-swatch {
    border: 2px solid transparent;
    border-radius: var(--r);
    padding: 14px 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: white;
    font-weight: 500;
    font-size: 12px;
    font-family: inherit;
    transition: all .15s;
    background: var(--surface2);
    border-color: var(--border);
    position: relative;
}
.theme-swatch::before {
    content: "";
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--swatch-color, var(--accent));
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.theme-swatch > span:first-child { display: none; }
.theme-swatch .theme-name { color: var(--text); font-size: 11.5px; }
.theme-swatch:hover {
    transform: translateY(-1px);
    border-color: var(--surface3);
}
.theme-swatch.active {
    border-color: var(--swatch-color, var(--accent));
    background: var(--bg3);
}
.theme-swatch.active::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 14px;
    height: 14px;
    background-color: var(--swatch-color, var(--accent));
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}

/* Bot list — Telegram-style chat rows */
.bot-cards {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--surface2);
    border-radius: var(--r);
    border: 1px solid var(--border-soft);
    overflow: hidden;
}
.bot-card {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background .12s;
    border-bottom: 1px solid var(--border-soft);
    background: transparent;
}
.bot-card:last-child { border-bottom: none; }
.bot-card:hover { background: var(--surface3); }
.bot-card .bc-head { display: contents; }
.bot-card .bc-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2, var(--accent)));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 600; font-size: 18px;
    flex-shrink: 0;
    overflow: hidden;
}
.bot-card .bc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bot-card > div:nth-child(2) {
    min-width: 0; display: flex; flex-direction: column; gap: 2px;
}
.bot-card .bc-username {
    font-weight: 500; font-size: 15px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bot-card .bc-name {
    font-size: 13px; color: var(--text2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bot-card .bc-meta {
    display: flex; gap: 4px; flex-wrap: wrap; font-size: 10.5px;
    margin-top: 3px;
}
.bot-card .bc-tag {
    background: var(--surface3); color: var(--text2);
    padding: 1px 7px; border-radius: 999px;
    border: 1px solid var(--border-soft);
    font-size: 10.5px;
    line-height: 1.4;
}
.bot-card .bc-tag.lib-telethon { color: #5ec5ff; border-color: rgba(94,197,255,.3); }
.bot-card .bc-tag.lib-pyrofork { color: #ff9d5e; border-color: rgba(255,157,94,.3); }
.bot-card .bc-tag.wh-sent { color: var(--accent); border-color: var(--accent); }
.bot-card .bc-token { display: none; }
.bot-card .bc-date {
    font-size: 11px; color: var(--text2);
    text-align: right; white-space: nowrap;
    align-self: flex-start;
    padding-top: 4px;
}

/* Telegram-style preview at top of bot editor modal */
.tg-preview {
    text-align: center;
    padding: 24px 20px 20px;
    margin: -22px -24px 0;
    background:
        radial-gradient(circle at 50% 0%, var(--accent-soft) 0%, transparent 60%),
        var(--surface2);
    border-bottom: 1px solid var(--border-soft);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.tg-preview .tg-avatar {
    width: 92px; height: 92px; border-radius: 50%;
    margin: 0 auto 12px;
    background: linear-gradient(135deg, var(--accent), var(--accent2, var(--accent)));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 600; font-size: 36px;
    box-shadow: 0 8px 24px -10px rgba(0,0,0,.6);
    overflow: hidden;
    position: relative;
}
.tg-preview .tg-avatar img {
    width: 100%; height: 100%; object-fit: cover;
}
.tg-preview .tg-title {
    font-weight: 600; font-size: 19px; color: var(--text);
    line-height: 1.2;
}
.tg-preview .tg-username {
    font-size: 13.5px; color: var(--accent);
    margin-top: 2px;
}
.tg-preview .tg-substatus {
    font-size: 12.5px; color: var(--text2); margin-top: 2px;
}
.tg-preview .tg-tme-desc {
    white-space: pre-line;
    word-wrap: break-word;
}
.bot-card .bc-tme-desc {
    white-space: nowrap;  /* в списке — одна строка с многоточием */
}

/* Start-message card — looks like Telegram message bubble */
.tg-start-card {
    margin: 18px auto 12px;
    max-width: 420px;
    background: var(--surface3);
    border-radius: 14px;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.tg-start-card .tg-start-photo {
    display: none;  /* по дефолту скрыто — как в реальном TG, если фото не задано */
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--surface2);
    align-items: center; justify-content: center;
    color: var(--text2);
    font-size: 11.5px;
    position: relative;
    overflow: hidden;
}
.tg-start-card .tg-start-photo.has-img {
    display: flex;
}
.tg-start-card .tg-start-photo img {
    width: 100%; height: 100%; object-fit: cover;
}
.tg-start-card .tg-start-text {
    padding: 12px 14px 14px;
    font-size: 13.5px;
    color: var(--text);
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.tg-buttons-row {
    display: flex; justify-content: center; gap: 8px;
    margin-top: 6px;
}
.tg-btn-pill {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 12.5px;
    font-weight: 500;
    pointer-events: none;
    opacity: .9;
}

/* Bot editor modal sections */
.bot-editor .section {
    border-top: 1px solid var(--border-soft);
    margin-top: 14px;
    padding-top: 14px;
}
.bot-editor .section:first-of-type {
    border-top: none; margin-top: 0; padding-top: 0;
}
.bot-editor .section h3 {
    font-size: 13px; font-weight: 600; color: var(--text);
    margin-bottom: 10px;
    display: flex; align-items: center; gap: 8px;
}
.bot-editor .section .hint {
    font-size: 12px; color: var(--text2); margin-bottom: 8px;
}
.bot-editor .danger-zone {
    border: 1px solid rgba(255, 80, 80, .35);
    background: rgba(255, 80, 80, .04);
    border-radius: var(--r);
    padding: 14px 16px;
    margin-top: 18px;
}
.bot-editor .danger-zone h3 { color: #ff6b6b; }
.bot-editor .row-actions {
    display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px;
}
.bot-editor .copy-row {
    display: flex; gap: 6px; align-items: center;
}
.bot-editor .copy-row input {
    flex: 1; font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 12px;
}

/* Picture upload — drag-and-drop zones */
.pic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 8px;
}
@media (max-width: 600px) {
    .pic-grid { grid-template-columns: 1fr; }
}
.pic-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pic-block label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    margin: 0;
}
.dropzone {
    border: 2px dashed var(--border);
    border-radius: var(--r);
    background: var(--surface2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s;
    text-align: center;
    overflow: hidden;
    position: relative;
    color: var(--text2);
}
.dropzone:hover {
    border-color: var(--accent);
    background: var(--surface3);
    color: var(--text);
}
.dropzone.is-dragover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    transform: scale(1.01);
}
.dropzone.dz-avatar { aspect-ratio: 1 / 1; }
.dropzone.dz-descpic { aspect-ratio: 16 / 9; }
.dropzone input[type="file"] { display: none; }
.dropzone .dz-content {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px;
    padding: 16px 12px;
    width: 100%; height: 100%;
}
.dropzone .dz-icon {
    width: 32px; height: 32px;
    opacity: .7;
}
.dropzone .dz-hint {
    font-size: 12px;
    line-height: 1.3;
}
.dropzone .dz-filename {
    color: var(--accent);
    font-size: 11.5px;
    font-weight: 500;
    word-break: break-all;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dropzone.has-preview {
    border-style: solid;
    border-color: var(--border-soft);
    padding: 0;
}
.dropzone.has-preview .dz-content { padding: 0; }
.dropzone .dz-preview-img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.dropzone .dz-clear {
    position: absolute;
    top: 6px; right: 6px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(0,0,0,.6);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; line-height: 1;
    z-index: 2;
}
.dropzone .dz-clear:hover { background: rgba(0,0,0,.85); }
.pic-block .pic-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pic-block .pic-actions .btn { width: 100%; }
.pic-block .pic-hint {
    font-size: 11.5px;
    color: var(--text2);
    line-height: 1.4;
}

/* Grouped settings sub-blocks inside the «Настройки бота» section */
.settings-sub {
    border-top: 1px dashed var(--border-soft);
    padding-top: 14px;
    margin-top: 14px;
}
.settings-sub:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}
.settings-sub-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 10px;
}
.toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    line-height: 1.45;
}
.toggle-row input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}
.toggle-row .toggle-hint {
    color: var(--text2);
    font-size: 12px;
}
.adm-rights {
    background: var(--surface2);
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    padding: 8px 12px;
    margin-bottom: 8px;
    max-height: 280px;
    overflow-y: auto;
}
.adm-rights label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--text);
    font-weight: 400;
}
.adm-rights label input { margin: 0; }

/* Proxy geo-tag */
.geo-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface3);
    border: 1px solid var(--border-soft);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
}
.flag-svg {
    width: 18px;
    height: 13px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15);
    vertical-align: middle;
    flex-shrink: 0;
}
.geo-tag.geo-empty {
    color: var(--text2);
    background: transparent;
    border-style: dashed;
}
.geo-tag:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Live registration log feed */
.reg-log-feed {
    background: #0f1115;
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    padding: 8px 12px;
    height: 320px;
    overflow-y: auto;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 12px;
    line-height: 1.55;
}
.reg-log-feed .lg-row {
    display: flex; gap: 10px; align-items: baseline;
    padding: 2px 0;
    color: #d4d4d4;
}
.reg-log-feed .lg-row.lg-success { color: #4ade80; }
.reg-log-feed .lg-row.lg-error   { color: #ff6b6b; }
.reg-log-feed .lg-row.lg-warn    { color: #f59e0b; }
.reg-log-feed .lg-ts {
    color: #6b7280; flex-shrink: 0; font-size: 11px;
}
.reg-log-feed .lg-phone {
    color: #5ec5ff; flex-shrink: 0;
}
.reg-log-feed .lg-msg { flex: 1; word-break: break-word; }

/* Registration stats grid */
.reg-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
@media (max-width: 640px) { .reg-stat-grid { grid-template-columns: repeat(2, 1fr); } }
.reg-stat-tile {
    background: var(--surface2);
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    padding: 14px 12px;
    text-align: center;
    font-size: 11.5px;
    color: var(--text2);
}
.reg-stat-tile .rst-n {
    font-size: 22px; font-weight: 600;
    color: var(--text); margin-bottom: 2px;
}
.reg-stat-tile.rst-ok .rst-n { color: #4ade80; }
.reg-stat-tile.rst-fail .rst-n { color: #ff6b6b; }
.reg-stat-tile.rst-rate .rst-n { color: var(--accent2, var(--accent)); }
.reg-stat-row {
    display: flex; justify-content: space-between;
    padding: 5px 0;
    font-size: 12.5px;
    border-bottom: 1px solid var(--border-soft);
}
.reg-stat-row:last-child { border-bottom: none; }
.reg-stat-row b { color: var(--text); }

/* Live SMS-provider balance pill */
.balance-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--accent-soft), transparent),
                var(--surface2);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: 7px 14px 7px 12px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    transition: all .15s;
    user-select: none;
}
.balance-pill:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px -8px var(--accent-glow, rgba(0,0,0,.5));
}
.balance-pill .bp-icon { font-size: 14px; }
.balance-pill .bp-label {
    color: var(--text2);
    font-size: 12px;
    font-weight: 500;
}
.balance-pill .bp-value {
    font-weight: 600;
    color: var(--accent2, var(--accent));
    font-family: var(--font-mono, ui-monospace, monospace);
    min-width: 60px;
}
.balance-pill.is-loading .bp-value { opacity: .55; }
.balance-pill.is-error {
    border-color: rgba(255, 80, 80, .35);
    background: rgba(255, 80, 80, .04);
}
.balance-pill.is-error .bp-value { color: #ff6b6b; }
.balance-pill .bp-refresh {
    color: var(--text2);
    font-size: 13px;
    opacity: .6;
    transition: transform .25s, opacity .15s;
}
.balance-pill:hover .bp-refresh {
    opacity: 1;
    transform: rotate(90deg);
}
.balance-pill.is-loading .bp-refresh {
    animation: bp-spin 1.1s linear infinite;
    opacity: 1;
}
@keyframes bp-spin {
    to { transform: rotate(360deg); }
}

/* Proxy test-all summary modal */
.proxy-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}
@media (max-width: 640px) {
    .proxy-stats { grid-template-columns: repeat(2, 1fr); }
}
.proxy-stats .ps-cell {
    background: var(--surface2);
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    padding: 12px 10px;
    text-align: center;
    font-size: 11.5px;
    color: var(--text2);
    line-height: 1.3;
}
.proxy-stats .ps-n {
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}
.proxy-stats .ps-ok .ps-n { color: #4ade80; }
.proxy-stats .ps-fail .ps-n { color: #ff6b6b; }
.proxy-stats .ps-burned .ps-n { color: #f59e0b; }

.burn-banner {
    background: rgba(245, 158, 11, .08);
    border: 1px solid rgba(245, 158, 11, .35);
    border-radius: var(--r);
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
    margin: 8px 0 14px;
}

.fail-list {
    max-height: 320px;
    overflow-y: auto;
    background: var(--surface2);
    border: 1px solid var(--border-soft);
    border-radius: var(--r);
    padding: 6px;
}
.fail-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .12s;
    font-weight: 400;
}
.fail-row:hover { background: var(--surface3); }
.fail-row + .fail-row { border-top: 1px solid var(--border-soft); }
.fail-row input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.fail-row .fail-head {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.fail-row .fail-label {
    font-weight: 600; font-size: 13.5px; color: var(--text);
    font-family: var(--font-mono, ui-monospace, monospace);
}
.fail-row .fail-meta { font-size: 11px; color: var(--text2); }
.fail-row .fail-status {
    color: #ff6b6b;
    font-size: 12px;
    margin: 4px 0 6px;
    word-break: break-word;
}
.fail-row .burn-accounts {
    font-size: 11.5px;
    color: var(--text2);
    display: flex; flex-wrap: wrap; gap: 5px;
    align-items: center;
}
.fail-row .burn-warn {
    color: #f59e0b;
    font-weight: 500;
}
.fail-row .burn-acc {
    background: var(--surface3);
    border: 1px solid var(--border-soft);
    padding: 1px 7px;
    border-radius: 999px;
    color: var(--text);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10.5px;
}

/* Subtle text-link action — used for secondary alternatives next to a primary button */
.link-action {
    display: inline-block;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--text2);
    text-decoration: none;
    border-bottom: 1px dotted var(--text2);
    line-height: 1.3;
    cursor: pointer;
}
.link-action:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}