/* Settings Modal - Accounts, Auth Mode, License, Language */

/* ═══════════════════════════════════════════════════════

   SIDEBAR — SETTINGS GEAR BUTTON

   ═══════════════════════════════════════════════════════ */



.settings-gear-btn {

    display: flex;

    align-items: center;

    gap: 8px;

    width: 100%;

    padding: 8px 12px;

    border: 1px solid var(--border-color);

    background: rgba(255, 255, 255, 0.03);

    color: var(--text-secondary);

    font-size: 13.5px;

    font-weight: 600;

    font-family: var(--font-main);

    border-radius: var(--radius-md);

    cursor: pointer;

    transition: all var(--transition-fast);

    margin-bottom: 8px;

}



.settings-gear-btn:hover {

    color: var(--text-primary);

    background: rgba(99, 102, 241, 0.08);

    border-color: rgba(99, 102, 241, 0.25);

}



.settings-gear-btn .gear-icon {

    font-size: 16px;

}



.settings-gear-btn .settings-text {

    display: inline-block;

}



/* ═══════════════════════════════════════════════════════

   MODAL OVERLAY — SETTINGS POPUP

   ═══════════════════════════════════════════════════════ */



.modal-overlay {

    position: fixed;

    inset: 0;

    z-index: 9000;

    display: none;

    align-items: center;

    justify-content: center;

    background: rgba(0, 0, 0, 0.6);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    opacity: 0;

    transition: opacity 0.25s ease;

}



.modal-overlay.open {

    display: flex;

    opacity: 1;

    animation: modal-fade-in 0.25s ease;

}



@keyframes modal-fade-in {

    from {

        opacity: 0;

    }



    to {

        opacity: 1;

    }

}



.modal-dialog {

    position: relative;

    width: 92vw;

    max-width: 960px;

    max-height: 88vh;

    overflow-y: auto;

    background: var(--bg-primary);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-xl, 20px);

    box-shadow:

        0 24px 80px rgba(0, 0, 0, 0.5),

        0 0 60px rgba(99, 102, 241, 0.08);

    padding: 32px 36px 36px;

    animation: modal-slide-in 0.3s ease;

}



@keyframes modal-slide-in {

    from {

        opacity: 0;

        transform: translateY(24px) scale(0.97);

    }



    to {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}



.modal-dialog .page-header {

    position: relative;

    padding-right: 48px;

}



.modal-close-btn {

    position: absolute;

    top: 0;

    right: 0;

    width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid var(--border-color);

    background: rgba(255, 255, 255, 0.04);

    color: var(--text-muted);

    font-size: 13px;

    border-radius: var(--radius-md);

    cursor: pointer;

    transition: all var(--transition-fast);

}



.modal-close-btn:hover {

    color: white;

    background: rgba(239, 68, 68, 0.15);

    border-color: rgba(239, 68, 68, 0.3);

}



/* Custom scrollbar for the modal */

.modal-dialog::-webkit-scrollbar {

    width: 6px;

}



.modal-dialog::-webkit-scrollbar-track {

    background: transparent;

}



.modal-dialog::-webkit-scrollbar-thumb {

    background: rgba(255, 255, 255, 0.08);

    border-radius: 3px;

}



.modal-dialog::-webkit-scrollbar-thumb:hover {

    background: rgba(255, 255, 255, 0.15);

}



/* ═══════════════════════════════════════════════════════

   SETTINGS PAGE — TABS & PANELS

   ═══════════════════════════════════════════════════════ */



.settings-tabs {

    display: flex;

    align-items: center;

    gap: 4px;

    margin-bottom: 24px;

    background: rgba(0, 0, 0, 0.25);

    border-radius: var(--radius-lg);

    padding: 4px;

    min-height: 48px;

    border: 1px solid var(--border-color);

    overflow-x: auto;

    overflow-y: hidden;

}



.settings-tab {

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 1;

    min-width: fit-content;

    padding: 10px 16px;

    min-height: 38px;

    border: none;

    background: transparent;

    color: var(--text-muted);

    font-size: 12.5px;

    font-weight: 600;

    font-family: var(--font-main);

    border-radius: var(--radius-md);

    cursor: pointer;

    transition: all var(--transition-fast);

    white-space: nowrap;

    line-height: 1.2;

}



.settings-tab:hover {

    color: var(--text-primary);

    background: rgba(255, 255, 255, 0.04);

}



.settings-tab.active {

    color: white;

    background: rgba(99, 102, 241, 0.2);

    border: 1px solid rgba(99, 102, 241, 0.3);

    box-shadow: 0 0 12px rgba(99, 102, 241, 0.15);

}



.settings-panel {

    display: none;

    animation: page-fade-in 0.2s ease;

}



.settings-panel.active {

    display: block;

}



/* ── Add Account Methods ─────────────────────────── */

.add-account-methods {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

    margin-top: 16px;

}



.method-card {

    background: rgba(0, 0, 0, 0.2);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-lg);

    padding: 20px;

    transition: all var(--transition-base);

}



.method-card:hover {

    border-color: rgba(99, 102, 241, 0.2);

}



.method-header {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin-bottom: 12px;

}



.method-icon {

    font-size: 28px;

    flex-shrink: 0;

}



.method-title {

    font-size: 14px;

    font-weight: 700;

    color: var(--text-primary);

    margin-bottom: 4px;

}



.method-desc {

    font-size: 12px;

    color: var(--text-muted);

    line-height: 1.5;

}



.method-note {

    font-size: 11.5px;

    padding: 8px 12px;

    border-radius: var(--radius-sm);

    margin-bottom: 14px;

    line-height: 1.5;

}



.method-note.success-note {

    background: rgba(16, 185, 129, 0.08);

    color: var(--accent-green);

    border: 1px solid rgba(16, 185, 129, 0.15);

}



.method-note.warn-note {

    background: rgba(245, 158, 11, 0.08);

    color: var(--accent-orange);

    border: 1px solid rgba(245, 158, 11, 0.15);

}



/* ── Accounts Table ──────────────────────────────── */

.accounts-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 16px;

}



.account-counter {

    font-size: 12px;

    font-weight: 600;

    color: var(--text-muted);

    font-family: var(--font-mono);

    background: rgba(99, 102, 241, 0.1);

    padding: 4px 12px;

    border-radius: 20px;

    border: 1px solid rgba(99, 102, 241, 0.15);

}



.accounts-ready-msg {

    font-size: 12.5px;

    color: var(--accent-green);

    margin-bottom: 16px;

    padding: 10px 14px;

    background: rgba(16, 185, 129, 0.06);

    border-radius: var(--radius-md);

    border: 1px solid rgba(16, 185, 129, 0.1);

}



.accounts-table-wrap {

    overflow-x: auto;

    border-radius: var(--radius-md);

    border: 1px solid var(--border-color);

}



.accounts-table {

    width: 100%;

    border-collapse: collapse;

    font-size: 12.5px;

}



.accounts-table thead {

    background: rgba(0, 0, 0, 0.3);

}



.accounts-table th {

    padding: 10px 14px;

    text-align: left;

    font-weight: 600;

    color: var(--text-muted);

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    border-bottom: 1px solid var(--border-color);

    white-space: nowrap;

}



.accounts-table td {

    padding: 10px 14px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.03);

    color: var(--text-primary);

    white-space: nowrap;

}



.accounts-table tbody tr:hover {

    background: rgba(99, 102, 241, 0.04);

}



.accounts-table .toggle-cell {

    width: 50px;

    text-align: center;

}



/* Toggle Switch */

.toggle-switch {

    position: relative;

    width: 36px;

    height: 20px;

    display: inline-block;

}



.toggle-switch input {

    display: none;

}



.toggle-switch .slider {

    position: absolute;

    inset: 0;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 20px;

    cursor: pointer;

    transition: background var(--transition-fast);

}



.toggle-switch .slider::before {

    content: '';

    position: absolute;

    width: 16px;

    height: 16px;

    border-radius: 50%;

    background: white;

    bottom: 2px;

    left: 2px;

    transition: transform var(--transition-fast);

}



.toggle-switch input:checked+.slider {

    background: var(--accent-green);

}



.toggle-switch input:checked+.slider::before {

    transform: translateX(16px);

}



/* Disabled toggle — for non-active accounts */

.toggle-switch.toggle-disabled .slider {

    cursor: not-allowed;

    opacity: 0.35;

}



.toggle-switch.toggle-disabled input:checked+.slider {

    background: rgba(255, 255, 255, 0.15);

}



.status-badge {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    font-size: 11px;

    font-weight: 600;

    padding: 3px 10px;

    border-radius: 12px;

}



.status-badge.active {

    color: var(--accent-green);

    background: rgba(16, 185, 129, 0.1);

}



.status-badge.expired {

    color: var(--accent-red);

    background: rgba(239, 68, 68, 0.1);

}



.status-badge.waiting {

    color: var(--text-muted);

    background: rgba(139, 143, 163, 0.1);

}



.status-badge.generating {

    color: var(--accent-cyan, #06b6d4);

    background: rgba(6, 182, 212, 0.12);

    animation: pulse-generating 1.5s ease-in-out infinite;

}



@keyframes pulse-generating {

    0%, 100% { opacity: 1; }

    50% { opacity: 0.65; }

}



.status-badge.completed {

    color: var(--accent-green);

    background: rgba(16, 185, 129, 0.12);

}



.status-badge.error {

    color: var(--accent-red);

    background: rgba(239, 68, 68, 0.12);

    cursor: help;

}



.status-badge.info {

    color: var(--accent-blue, #3b82f6);

    background: rgba(59, 130, 246, 0.1);

}



/* ── Setup Steps ─────────────────────────────────── */

.setup-steps {

    display: flex;

    flex-direction: column;

    gap: 20px;

    margin-top: 16px;

}



.setup-step {

    display: flex;

    gap: 16px;

    align-items: flex-start;

}



.step-number {

    flex-shrink: 0;

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: linear-gradient(135deg, var(--accent-indigo), var(--accent-purple));

    font-size: 14px;

    font-weight: 800;

    color: white;

}



.step-content h4 {

    font-size: 14px;

    font-weight: 700;

    color: var(--text-primary);

    margin-bottom: 4px;

}



.step-content p {

    font-size: 12.5px;

    color: var(--text-muted);

    line-height: 1.5;

    margin-bottom: 10px;

}



.step-actions {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

}



/* ── Connection Status ───────────────────────────── */

.connection-status-grid {

    display: flex;

    gap: 20px;

    margin-top: 16px;

    flex-wrap: wrap;

}



.conn-item {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 13px;

    color: var(--text-secondary);

}



.conn-dot {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    flex-shrink: 0;

}



.conn-dot.online {

    background: var(--accent-green);

    box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);

}



.conn-dot.offline {

    background: var(--accent-red);

    box-shadow: 0 0 6px rgba(239, 68, 68, 0.3);

}



.conn-value {

    font-weight: 600;

    color: var(--text-primary);

    font-family: var(--font-mono);

    font-size: 12px;

}



/* ── Auth Mode Cards ─────────────────────────────── */

.auth-modes {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-top: 16px;

}



.auth-mode-card {

    display: block;

    cursor: pointer;

}



.auth-mode-card input[type="radio"] {

    display: none;

}



.auth-mode-body {

    padding: 18px 20px;

    border-radius: var(--radius-lg);

    border: 2px solid var(--border-color);

    transition: all var(--transition-base);

    background: rgba(0, 0, 0, 0.15);

}



.auth-mode-card:hover .auth-mode-body {

    border-color: rgba(99, 102, 241, 0.2);

}



.auth-mode-card input:checked~.auth-mode-body {

    border-color: var(--accent-indigo);

    background: rgba(99, 102, 241, 0.06);

    box-shadow: 0 0 16px rgba(99, 102, 241, 0.1);

}



.auth-mode-header {

    display: flex;

    gap: 14px;

    align-items: flex-start;

}



.auth-mode-icon {

    font-size: 28px;

    flex-shrink: 0;

}



.auth-mode-header h4 {

    font-size: 14px;

    font-weight: 700;

    color: var(--text-primary);

    margin-bottom: 6px;

}



.auth-mode-header p {

    font-size: 12.5px;

    color: var(--text-muted);

    line-height: 1.5;

}



.recommended-badge {

    display: inline-block;

    font-size: 10px;

    padding: 2px 8px;

    border-radius: 10px;

    background: linear-gradient(135deg, var(--accent-indigo), var(--accent-purple));

    color: white;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    vertical-align: middle;

    margin-left: 6px;

}



/* ── Info Callout ────────────────────────────────── */

.info-callout {

    padding: 14px 18px;

    background: rgba(245, 158, 11, 0.06);

    border: 1px solid rgba(245, 158, 11, 0.12);

    border-radius: var(--radius-md);

    font-size: 12.5px;

    color: var(--text-secondary);

    line-height: 1.6;

}



/* ── Toolio Account ───────────────────────────────── */

#tab-account {

    overflow-y: visible !important;

}

.account-page-card {

    padding: 18px !important;

}

.account-page-layout {

    display: grid;

    grid-template-columns: minmax(0, 1fr) 300px;

    gap: 16px;

}

.account-page-main {

    display: grid;

    grid-template-columns: minmax(260px, 0.8fr) 1.2fr;

    gap: 14px;

    align-items: center;

    margin-top: 14px;

}

.account-subscription-card {

    padding: 18px !important;

    background:
        radial-gradient(circle at top right, rgba(34, 211, 238, 0.14), transparent 9rem),
        rgba(255, 255, 255, 0.025) !important;

}

.account-plan-title {

    margin-top: 16px;

    font-size: 20px;

    line-height: 1.2;

}

.account-plan-price {

    margin-top: 18px;

    display: flex;

    align-items: baseline;

    gap: 10px;

}

.account-plan-price span {

    font-size: 34px;

    font-weight: 900;

    color: var(--text-primary);

}

.account-plan-price small {

    color: var(--text-secondary);

    font-size: 12px;

    font-weight: 700;

}

.account-plan-note {

    margin-top: 14px;

    padding: 10px 12px;

    border-radius: var(--radius-md);

    background: rgba(251, 191, 36, 0.08);

    border: 1px solid rgba(251, 191, 36, 0.14);

    color: var(--text-secondary);

    font-size: 12.5px;

}

.account-contact-actions {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-top: 16px;

}

.account-page-header {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;

}

.account-page-avatar {

    width: 54px;

    height: 54px;

    border-radius: 50%;

    object-fit: cover;

    border: 1px solid rgba(125, 211, 252, 0.25);

}

.account-page-name {

    font-size: 18px;

    margin-bottom: 4px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.account-page-email {

    color: var(--text-secondary);

    font-size: 13px;

}

.account-page-status-grid {

    display: grid;

    grid-template-columns: minmax(105px, 0.7fr) minmax(160px, 1fr) minmax(190px, 1.2fr);

    gap: 10px;

    margin-top: 0;

}

.account-page-stat {

    min-width: 0;

    padding: 11px 12px;

    border-radius: var(--radius-md);

    background: rgba(255, 255, 255, 0.035);

    border: 1px solid var(--border-color);

}

.account-page-stat span {
    display: block;
    margin-bottom: 5px;
    color: #a5b4fc;
    font-size: 12px;
}

.account-page-stat strong {

    display: block;

    color: var(--text-primary);

    font-size: 14px;

    line-height: 1.25;

}

body[data-theme="soft-light"] .account-page-card,
body[data-theme="soft-light"] .account-subscription-card {
    background: rgba(246, 241, 240, 0.64) !important;
    border-color: rgba(95, 82, 98, 0.14) !important;
    box-shadow: 0 18px 46px rgba(86, 65, 98, 0.12);
}

body[data-theme="soft-light"] .account-subscription-card {
    background:
        radial-gradient(circle at top right, rgba(109, 222, 224, 0.24), transparent 9rem),
        rgba(246, 241, 240, 0.66) !important;
}

body[data-theme="soft-light"] .account-page-stat {
    background: rgba(255, 255, 255, 0.38);
    border-color: rgba(95, 82, 98, 0.12);
}

body[data-theme="soft-light"] .account-page-stat span,
body[data-theme="soft-light"] .account-page-email,
body[data-theme="soft-light"] .account-plan-price small,
body[data-theme="soft-light"] .account-plan-note,
body[data-theme="soft-light"] .account-redeem-note {
    color: #5f5967;
}

body[data-theme="soft-light"] .account-plan-title,
body[data-theme="soft-light"] .account-plan-price span,
body[data-theme="soft-light"] .account-page-name,
body[data-theme="soft-light"] .account-page-stat strong {
    color: #25232c;
}

body[data-theme="soft-light"] .account-plan-note {
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(217, 119, 6, 0.2);
}

body[data-theme="soft-light"] .account-redeem-box {
    border-top-color: rgba(95, 82, 98, 0.12);
}

body[data-theme="soft-light"] .account-contact-actions .btn-secondary,
body[data-theme="soft-light"] .account-redeem-row .btn-sm {
    color: #2b2632;
    background: rgba(255, 255, 255, 0.46);
    border-color: rgba(141, 107, 216, 0.24);
}

body[data-theme="soft-light"] .account-contact-actions .btn-secondary:hover,
body[data-theme="soft-light"] .account-redeem-row .btn-sm:hover {
    background: rgba(255, 255, 255, 0.66);
    border-color: rgba(141, 107, 216, 0.42);
}

.account-redeem-box {

    margin-top: 14px;

    padding-top: 14px;

    border-top: 1px solid rgba(255, 255, 255, 0.06);

}

body[data-theme="soft-light"] .modal-overlay {
    background: rgba(31, 28, 38, 0.42);
    backdrop-filter: blur(10px) saturate(120%);
}

body[data-theme="soft-light"] .settings-tabs {
    background: rgba(255, 255, 255, 0.34);
    border-color: rgba(95, 82, 98, 0.14);
}

body[data-theme="soft-light"] .settings-tab {
    color: #6a6270;
}

body[data-theme="soft-light"] .settings-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.42);
}

body[data-theme="soft-light"] .settings-tab.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(139, 115, 230, 0.92), rgba(216, 138, 168, 0.82));
    box-shadow: 0 10px 22px rgba(141, 107, 216, 0.18);
}

.account-redeem-note {

    margin-left: 8px !important;

    margin-top: -9px !important;

    margin-bottom: 10px !important;

}

.settings-general-row {

    display: grid;

    grid-template-columns: 220px minmax(480px, 1.45fr) minmax(340px, 1fr);

    gap: 20px;

    align-items: stretch;

    margin-bottom: 20px;

}

.settings-notification-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
}

.settings-notification-body {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.settings-notification-copy,
.settings-notification-copy :is(strong, small) { display: block; }
.settings-notification-copy strong { color: var(--text-primary); font-size: 13px; }
.settings-notification-copy small { margin-top: 3px; color: var(--text-muted); font-size: 11px; }
.settings-notification-control {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, .04);
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}
.settings-notification-control input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent-purple); }

.settings-notification-card:focus-within {
    outline: 3px solid rgba(99, 102, 241, 0.24);
    outline-offset: 2px;
}

.settings-notification-card:has(input:checked) {
    border-color: rgba(124, 92, 246, .48);
    box-shadow: 0 12px 30px rgba(87, 62, 184, .13), inset 0 1px rgba(255, 255, 255, .08);
}

.settings-mini-card {

    min-height: 136px;

    padding: 16px 18px !important;

    margin-bottom: 0 !important;

}

.settings-theme-card,
.settings-update-card {
    display: flex;
    flex-direction: column;
}

.settings-theme-card { align-items: flex-start; gap: 18px; }
.settings-update-card { gap: 7px; }

.settings-theme-switch {

    width: 100%;

    max-width: 140px;

}

.settings-update-card .account-redeem-note {

    margin-top: 0 !important;

}

@media (max-width: 1120px) {

    .settings-general-row {
        grid-template-columns: 220px minmax(280px, 1fr);
    }

    .settings-notification-card { grid-column: 1 / -1; }

}

.settings-update-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.settings-update-version {
    color: var(--text-muted);
    font-size: 11px;
    white-space: nowrap;
}

.settings-update-version #app-current-version {
    color: var(--text-primary);
    font-weight: 750;
}

.settings-update-description {
    margin-bottom: 0 !important;
    color: var(--text-secondary);
    font-size: 11px !important;
    line-height: 1.35;
}

.settings-update-actions {
    display: grid;
    grid-template-columns: minmax(138px, 1.35fr) minmax(86px, 1fr) minmax(112px, 1fr);
    gap: 6px;
}

.settings-update-actions button {
    min-width: 0;
    min-height: 38px;
    justify-content: center;
    padding: 7px 9px;
    font-size: 11px;
    text-align: center;
}

@media (max-width: 820px) {

    .settings-general-row {

        grid-template-columns: 1fr;

    }

    .settings-notification-card { grid-column: auto; }

    .settings-notification-body { align-items: flex-start; }

    .settings-update-actions { grid-template-columns: 1fr; }

}

.account-blocked-box {

    margin-top: 14px;

    padding: 12px 14px;

    border-radius: var(--radius-md);

    border: 1px solid rgba(239, 68, 68, 0.24);

    background: rgba(239, 68, 68, 0.10);

    color: var(--accent-red);

}

.account-blocked-box strong {

    display: block;

    margin-bottom: 4px;

}

.account-blocked-box p {

    margin: 0;

    color: var(--text-secondary);

}

.account-redeem-row {

    display: flex;

    gap: 10px;

}

.account-redeem-row .btn-sm {

    min-width: 92px;

}

@media (max-width: 820px) {

    .account-page-layout,
    .account-page-main,
    .account-page-status-grid {

        grid-template-columns: 1fr;

    }

    .account-redeem-row {

        flex-direction: column;

    }

}

.account-redeem-row .form-input {

    flex: 1;

}

/* ── License & Pricing ───────────────────────────── */

.license-user-info {

    margin-top: 16px;

}



.license-user-row {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 8px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.04);

}



.license-label {

    font-size: 13px;

    color: var(--text-muted);

    min-width: 80px;

}



.license-value {

    font-size: 13px;

    font-weight: 600;

    color: var(--text-primary);

    font-family: var(--font-mono);

}



.pricing-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 16px;

}



.plan-card {

    position: relative;

    background: rgba(0, 0, 0, 0.25);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-lg);

    padding: 24px 20px;

    text-align: center;

    transition: all var(--transition-base);

}



.plan-card:hover {

    border-color: rgba(99, 102, 241, 0.2);

    transform: translateY(-2px);

}



.plan-card.featured {

    border-color: var(--accent-indigo);

    background: rgba(99, 102, 241, 0.06);

    box-shadow: 0 0 24px rgba(99, 102, 241, 0.12);

}



.plan-popular {

    position: absolute;

    top: -10px;

    left: 50%;

    transform: translateX(-50%);

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    padding: 3px 14px;

    border-radius: 10px;

    background: linear-gradient(135deg, var(--accent-indigo), var(--accent-purple));

    color: white;

    white-space: nowrap;

}



.plan-header {

    margin-bottom: 20px;

}



.plan-name {

    font-size: 18px;

    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 8px;

}



.plan-price {

    font-size: 28px;

    font-weight: 800;

    background: linear-gradient(135deg, var(--accent-indigo), var(--accent-cyan));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.plan-price small {

    font-size: 13px;

    font-weight: 500;

    -webkit-text-fill-color: var(--text-muted);

}



.plan-features {

    list-style: none;

    padding: 0;

    margin: 0 0 20px 0;

    text-align: left;

}



.plan-features li {

    padding: 6px 0;

    font-size: 12.5px;

    color: var(--text-secondary);

    border-bottom: 1px solid rgba(255, 255, 255, 0.03);

}



.plan-badge {

    display: inline-block;

    font-size: 11px;

    font-weight: 700;

    padding: 6px 16px;

    border-radius: 8px;

}



.plan-badge.current {

    color: var(--accent-green);

    background: rgba(16, 185, 129, 0.1);

    border: 1px solid rgba(16, 185, 129, 0.15);

}



.plan-btn {

    width: 100%;

}



/* ── Language Grid ───────────────────────────────── */

.language-grid {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 14px;

}



.lang-btn {

    padding: 8px 16px;

    border: 1px solid var(--border-color);

    background: rgba(0, 0, 0, 0.2);

    color: var(--text-secondary);

    font-size: 12.5px;

    font-weight: 500;

    border-radius: var(--radius-md);

    cursor: pointer;

    transition: all var(--transition-fast);

    font-family: var(--font-main);

}



.lang-btn:hover {

    border-color: rgba(99, 102, 241, 0.3);

    color: var(--text-primary);

}



.lang-btn.active {

    border-color: var(--accent-indigo);

    background: rgba(99, 102, 241, 0.12);

    color: white;

    font-weight: 600;

    box-shadow: 0 0 10px rgba(99, 102, 241, 0.15);

}



/* ── Section Header Row ──────────────────────────── */

.section-header-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 16px;

}



/* ── Form Grid ───────────────────────────────────── */

.form-grid-2 {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

}



.form-hint {

    display: block;

    font-size: 11px;

    color: var(--text-muted);

    margin-top: 4px;

}



.delay-range {

    display: flex;

    align-items: center;

    gap: 8px;

}



.delay-sep {

    color: var(--text-muted);

    font-size: 14px;

}



/* ── Naming Preview ──────────────────────────────── */

.naming-preview {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 16px;

    background: rgba(0, 0, 0, 0.25);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-md);

    margin-top: 14px;

}



.naming-preview-label {

    font-size: 12px;

    font-weight: 600;

    color: var(--text-muted);

}



.naming-preview-value {

    font-size: 13px;

    font-family: var(--font-mono);

    color: var(--accent-cyan);

    font-weight: 500;

}



/* ── Settings Dialog Enlargement & Scrollable Panels ── */

.settings-dialog {

    width: 96vw !important;

    max-width: 1200px !important;

    height: 90vh !important;

    max-height: 90vh !important;

    display: flex !important;

    flex-direction: column !important;

    padding: 28px 32px 32px !important;

    overflow: hidden !important;

    /* Prevent parent scrolling */

}



/* Let the settings panels flow and scroll internally */

.settings-dialog .settings-panel {

    padding-right: 12px !important;

    margin-right: -12px !important;

}



/* Adjust active panel to behave nicely with flexing */

.settings-dialog .settings-panel.active {

    display: block !important;

    flex: 1 !important;

    overflow-y: auto !important;

}



/* Premium scrollbar for settings panels */

.settings-dialog .settings-panel::-webkit-scrollbar {

    width: 6px;

}



.settings-dialog .settings-panel::-webkit-scrollbar-track {

    background: transparent;

}



.settings-dialog .settings-panel::-webkit-scrollbar-thumb {

    background: rgba(255, 255, 255, 0.08);

    border-radius: 3px;

}



.settings-dialog .settings-panel::-webkit-scrollbar-thumb:hover {

    background: rgba(255, 255, 255, 0.15);

}



/* ═══════════════════════════════════════════════════════

   TOOLIO — TOOL CONTROLS (+ / −)

   ═══════════════════════════════════════════════════════ */



.tool-controls {

    display: flex;

    gap: 5px;

    padding: 0 8px;

    margin-bottom: 10px;

}



.tool-ctrl-btn {

    flex: 1;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid var(--border-color);

    background: rgba(255, 255, 255, 0.03);

    color: var(--text-muted);

    gap: 4px;

    font-size: 11px;

    font-weight: 800;

    font-family: var(--font-main);

    border-radius: 999px;

    cursor: pointer;

    transition: all var(--transition-fast);

}

body[data-theme="soft-light"] .lang-btn {
    color: #5d5664;
    background: rgba(255, 255, 255, 0.44);
    border-color: rgba(95, 82, 98, 0.16);
}

body[data-theme="soft-light"] .lang-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.64);
    border-color: rgba(141, 107, 216, 0.32);
}

body[data-theme="soft-light"] .lang-btn.active {
    color: #fff;
    background: linear-gradient(135deg, #8b73e6, #ba8ce8);
    border-color: rgba(125, 89, 189, 0.28);
    box-shadow: 0 8px 18px rgba(141, 107, 216, 0.18);
}

.tool-ctrl-icon {

    font-size: 13px;

    line-height: 1;

}

.tool-ctrl-text {

    font-size: 10.5px;

    letter-spacing: 0.02em;

}



.tool-ctrl-btn:hover {

    color: var(--text-primary);

    border-color: rgba(99, 102, 241, 0.3);

}



.tool-ctrl-add:hover {

    background: rgba(16, 185, 129, 0.12);

    border-color: rgba(16, 185, 129, 0.3);

    color: var(--accent-green);

}



.tool-ctrl-remove:hover {

    background: rgba(239, 68, 68, 0.12);

    border-color: rgba(239, 68, 68, 0.3);

    color: var(--accent-red);

}



/* ═══════════════════════════════════════════════════════

   TOOLIO — TOOL MODAL

   ═══════════════════════════════════════════════════════ */



.tool-modal-dialog {

    max-width: 600px;

    width: 90%;

}



.tool-modal-grid {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-top: 16px;

}



.tool-card {

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 16px 20px;

    background: rgba(0, 0, 0, 0.2);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-lg);

    transition: all var(--transition-base);

}



.tool-card:hover {

    border-color: rgba(99, 102, 241, 0.25);

    background: rgba(99, 102, 241, 0.04);

}



.tool-card-remove:hover {

    border-color: rgba(239, 68, 68, 0.25);

    background: rgba(239, 68, 68, 0.04);

}



.tool-card-icon {

    flex-shrink: 0;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

    border-radius: var(--radius-md);

}

.tool-card-icon svg {
    width: 24px;
    height: 24px;
}



.tool-card-info {

    flex: 1;

    min-width: 0;

}



.tool-card-name {

    font-size: 14px;

    font-weight: 700;

    color: var(--text-primary);

    margin-bottom: 2px;

}



.tool-card-category {

    display: inline-block;

    font-size: 10px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    color: var(--accent-indigo);

    background: rgba(99, 102, 241, 0.1);

    padding: 2px 8px;

    border-radius: 8px;

    margin-bottom: 6px;

}



.tool-card-desc {

    font-size: 12px;

    color: var(--text-muted);

    line-height: 1.4;

}

body[data-theme="soft-light"] .tool-modal-dialog {
    background: rgba(246, 241, 240, 0.72);
    border-color: rgba(95, 82, 98, 0.14);
    box-shadow: 0 24px 80px rgba(86, 65, 98, 0.18);
    backdrop-filter: blur(22px) saturate(135%);
}

body[data-theme="soft-light"] .tool-card {
    background: rgba(255, 255, 255, 0.42);
    border-color: rgba(95, 82, 98, 0.14);
    box-shadow: 0 12px 28px rgba(86, 65, 98, 0.08);
}

body[data-theme="soft-light"] .tool-card:hover {
    background: rgba(255, 255, 255, 0.58);
    border-color: rgba(141, 107, 216, 0.3);
}

body[data-theme="soft-light"] .tool-card-remove:hover {
    background: rgba(255, 235, 238, 0.62);
    border-color: rgba(239, 68, 68, 0.28);
}

body[data-theme="soft-light"] .tool-card-name {
    color: #25232c;
}

body[data-theme="soft-light"] .tool-card-desc {
    color: #5f5967;
}

body[data-theme="soft-light"] .tool-card-category {
    color: #654bd1;
    background: rgba(139, 115, 230, 0.14);
}

body[data-theme="soft-light"] .tool-card-icon {
    background: rgba(255, 255, 255, 0.5) !important;
}



.tool-card-btn {
    flex-shrink: 0;
    padding: 10px 22px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    font-family: var(--font-main);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-width: 90px;
    text-align: center;
}



.tool-card-add {

    background: rgba(16, 185, 129, 0.1);

    border-color: rgba(16, 185, 129, 0.25);

    color: var(--accent-green);

}



.tool-card-add:hover {

    background: rgba(16, 185, 129, 0.2);

    border-color: rgba(16, 185, 129, 0.4);

    box-shadow: 0 0 12px rgba(16, 185, 129, 0.15);

}



.tool-card-del {

    background: rgba(239, 68, 68, 0.1);

    border-color: rgba(239, 68, 68, 0.25);

    color: var(--accent-red);

}



.tool-card-del:hover {

    background: rgba(239, 68, 68, 0.2);

    border-color: rgba(239, 68, 68, 0.4);

    box-shadow: 0 0 12px rgba(239, 68, 68, 0.15);

}



/* ── Account Page Redesign Overrides ─────────────────── */



.premium-card {

    background: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%) !important;

    backdrop-filter: blur(12px);

    border: 1px solid rgba(255,255,255,0.08) !important;

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);

    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;

}



.premium-card:hover {

    border-color: rgba(99, 102, 241, 0.3) !important;

    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.15);

}



.account-page-avatar {

    position: relative;

    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.5), 0 0 20px rgba(99, 102, 241, 0.5);

    border: 2px solid rgba(165, 180, 252, 0.8) !important;

    transition: box-shadow 0.3s ease;

}



.account-page-avatar:hover {

    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.7), 0 0 25px rgba(99, 102, 241, 0.6);

}



.account-page-stat {

    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;

    cursor: default;

}



.account-page-stat:hover {

    transform: translateY(-2px);

    background: rgba(255, 255, 255, 0.06);

    box-shadow: 0 4px 12px rgba(0,0,0,0.1);

    border-color: rgba(255, 255, 255, 0.15);

}



.account-page-stat span::before {

    content: "•";

    color: var(--accent-indigo);

    margin-right: 6px;

    font-size: 14px;

}



.account-plan-price span {

    background: linear-gradient(135deg, #a855f7, #6366f1);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    text-shadow: 0 2px 10px rgba(99, 102, 241, 0.2);

}



@keyframes gentlePulse {

    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }

    70% { transform: scale(1.02); box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); }

    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }

}



.premium-btn-whatsapp, .premium-btn-telegram {

    animation: gentlePulse 3s infinite;

    color: #ffffff !important;

    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;

}



#btn-account-redeem {

    color: #ffffff !important;

    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;

    font-weight: 700;

}



.premium-btn-whatsapp:hover, .premium-btn-telegram:hover {

    animation: none;

    transform: scale(1.03);

}



.premium-input:focus {

    border-color: var(--accent-indigo) !important;

    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;

    background: rgba(0,0,0,0.3) !important;

}



.premium-badge {

    box-shadow: 0 0 10px rgba(99, 102, 241, 0.3);

    border: 1px solid rgba(99, 102, 241, 0.4);

}





.tool-card-del:hover {

    background: rgba(239, 68, 68, 0.2);

    border-color: rgba(239, 68, 68, 0.4);

    box-shadow: 0 0 12px rgba(239, 68, 68, 0.15);

}



/* ── Account Page Redesign Overrides ─────────────────── */



.premium-card {

    background: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%) !important;

    backdrop-filter: blur(12px);

    border: 1px solid rgba(255,255,255,0.08) !important;

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);

    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;

}



.premium-card:hover {

    border-color: rgba(99, 102, 241, 0.3) !important;

    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.15);

}



.account-page-avatar {

    position: relative;

    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.5), 0 0 20px rgba(99, 102, 241, 0.5);

    border: 2px solid rgba(165, 180, 252, 0.8) !important;

    transition: box-shadow 0.3s ease;

}



.account-page-avatar:hover {

    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.7), 0 0 25px rgba(99, 102, 241, 0.6);

}



.account-page-stat {

    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;

    cursor: default;

}



.account-page-stat:hover {

    transform: translateY(-2px);

    background: rgba(255, 255, 255, 0.06);

    box-shadow: 0 4px 12px rgba(0,0,0,0.1);

    border-color: rgba(255, 255, 255, 0.15);

}



.account-page-stat span::before {

    content: "•";

    color: var(--accent-indigo);

    margin-right: 6px;

    font-size: 14px;

}



.account-plan-price span {

    background: linear-gradient(135deg, #a855f7, #6366f1);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    text-shadow: 0 2px 10px rgba(99, 102, 241, 0.2);

}



@keyframes gentlePulse {

    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }

    70% { transform: scale(1.02); box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); }

    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }

}



.premium-btn-whatsapp, .premium-btn-telegram {

    animation: gentlePulse 3s infinite;

    color: #ffffff !important;

    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;

}



#btn-account-redeem {

    color: #ffffff !important;

    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;

    font-weight: 700;

}



.premium-btn-whatsapp:hover, .premium-btn-telegram:hover {

    animation: none;

    transform: scale(1.03);

}



.premium-input:focus {

    border-color: var(--accent-indigo) !important;

    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;

    background: rgba(0,0,0,0.3) !important;

}



.premium-badge {

    box-shadow: 0 0 10px rgba(99, 102, 241, 0.3);

    border: 1px solid rgba(99, 102, 241, 0.4);

}



.account-page-layout {

    gap: 24px;

}



.account-page-main {

    margin-top: 20px;

    margin-bottom: 20px;

}



/* ──────────────────────────────────────────────────────────
   PREMIUM BORDERS & DEFINITION FIX FOR SOFT LIGHT THEME
────────────────────────────────────────────────────────── */
body[data-theme="soft-light"] .tool-card {
    border: 1px solid #94a3b8 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03) !important;
}

body[data-theme="soft-light"] .tool-card-btn,
body[data-theme="soft-light"] .btn-secondary {
    border: 1px solid #94a3b8 !important;
}

body[data-theme="soft-light"] .premium-card,
body[data-theme="soft-light"] .glass-card,
body[data-theme="soft-light"] .config-card {
    border: 1px solid #94a3b8 !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04) !important;
    background: #ffffff !important;
}

body[data-theme="soft-light"] .integrated-brand-header {
    border: 1px solid #94a3b8 !important;
    background: rgba(255, 255, 255, 0.6) !important;
    border-radius: 8px;
}

body[data-theme="soft-light"] .premium-stat-card,
body[data-theme="soft-light"] .account-page-stat {
    border: 1px solid #94a3b8 !important;
    background: #f8fafc !important;
}

body[data-theme="soft-light"] .form-input,
body[data-theme="soft-light"] .premium-input,
body[data-theme="soft-light"] .config-textarea {
    border: 1px solid #94a3b8 !important;
    background: #ffffff !important;
}

body[data-theme="soft-light"] .account-redeem-box {
    border: 1px dashed #94a3b8 !important; 
    background: rgba(99, 102, 241, 0.03) !important;
}

body[data-theme="soft-light"] .lang-btn,
body[data-theme="soft-light"] .premium-lang-btn {
    border: 1px solid #94a3b8 !important;
    background: #ffffff !important;
}

body[data-theme="soft-light"] .lang-btn.active,
body[data-theme="soft-light"] .premium-lang-btn.active {
    border: 1px solid #4f46e5 !important;
    background: rgba(79, 70, 229, 0.05) !important;
}

body[data-theme="soft-light"] .settings-tabs {
    border: 1px solid #94a3b8 !important;
    background: #f8fafc !important;
}

/* General settings — isolated so its card and control styles cannot bleed into tools. */
#tab-general {
    --general-accent: #5b8cff;
    --general-surface: rgba(15, 27, 44, .82);
    --general-surface-strong: rgba(17, 32, 51, .96);
    --general-border: rgba(124, 164, 220, .24);
    --general-muted: #9bb0cb;
    display: none;
    grid-template-rows: auto auto auto;
    align-content: start;
    gap: 20px;
    padding-top: 4px;
}

#settings-dialog #tab-general.active { display: grid !important; }

#tab-general .general-section-header,
#tab-general .general-card-heading,
#tab-general .general-section-header > span:last-child,
#tab-general .general-card-heading > span:last-child {
    display: flex;
    min-width: 0;
}

#tab-general .general-section-header {
    align-items: center;
    gap: 14px;
    padding: 2px 4px 0;
}

#tab-general .general-section-header > span:last-child,
#tab-general .general-card-heading > span:last-child {
    flex-direction: column;
}

#tab-general .general-section-icon,
#tab-general .general-card-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    color: #72a4ff;
    border: 1px solid rgba(91, 140, 255, .36);
    background: rgba(91, 140, 255, .12);
}

#tab-general .general-section-icon { width: 52px; height: 52px; border-radius: 15px; }
#tab-general .general-card-icon { width: 38px; height: 38px; border-radius: 11px; }
#tab-general :is(.general-section-icon, .general-card-icon) svg,
#tab-general .settings-update-actions svg,
#tab-general .settings-theme-switch > svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#tab-general .general-section-eyebrow {
    margin-bottom: 4px;
    color: #70a4ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}

#tab-general .general-section-header strong { color: var(--text-primary); font-size: 22px; line-height: 1.2; }
#tab-general .general-section-header small { margin-top: 4px; color: var(--general-muted); font-size: 12px; line-height: 1.45; }

#tab-general :is(.general-language-card, .settings-mini-card) {
    margin: 0 !important;
    border: 1px solid var(--general-border) !important;
    background: linear-gradient(145deg, var(--general-surface-strong), var(--general-surface)) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .045), 0 14px 34px rgba(0, 0, 0, .1) !important;
}

#tab-general .general-language-card { padding: 16px 18px; }
#tab-general .general-card-heading { align-items: center; gap: 11px; }
#tab-general .general-card-heading strong { color: var(--text-primary); font-size: 13px; line-height: 1.25; }
#tab-general .general-card-heading small { margin-top: 3px; color: var(--general-muted); font-size: 11px; line-height: 1.35; }

#tab-general .language-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

#tab-general .lang-btn {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 12px;
    overflow: hidden;
    color: #bac8da;
    border: 1px solid rgba(133, 159, 194, .25);
    border-radius: 12px;
    background: rgba(6, 14, 26, .4);
    font-size: 12px;
    font-weight: 700;
}

#tab-general .lang-btn > span {
    display: inline-grid;
    min-width: 27px;
    height: 23px;
    place-items: center;
    color: #8facd0;
    border-radius: 7px;
    background: rgba(122, 151, 192, .12);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .05em;
}

#tab-general .lang-btn:is(:hover, :focus-visible) { color: var(--text-primary); border-color: rgba(91, 140, 255, .58); background: rgba(91, 140, 255, .09); }
#tab-general .lang-btn.active { color: #f8fbff; border-color: #6094ff; background: linear-gradient(135deg, rgba(46, 101, 203, .42), rgba(88, 65, 181, .38)); box-shadow: 0 9px 22px rgba(36, 82, 176, .2), inset 0 1px rgba(255, 255, 255, .09); }
#tab-general .lang-btn.active > span { color: #fff; background: #4d83ef; }
#tab-general .lang-btn.active::after { content: "✓"; position: absolute; inset-inline-end: 8px; top: 6px; color: #9fc0ff; font-size: 10px; }

#tab-general .settings-general-row {
    display: grid;
    grid-template-columns: minmax(190px, .58fr) minmax(470px, 1.55fr) minmax(310px, .92fr);
    gap: 20px;
    margin: 0 !important;
}

#tab-general .settings-mini-card { min-height: 160px; padding: 18px 20px !important; }
#tab-general .settings-theme-card { justify-content: space-between; gap: 18px; }
#tab-general .settings-theme-switch {
    display: flex;
    width: 100%;
    max-width: none;
    min-height: 46px;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    color: var(--text-primary);
    border: 1px solid rgba(133, 159, 194, .28);
    border-radius: 12px;
    background: rgba(6, 14, 26, .42);
    font: 750 12px var(--font-main);
    cursor: pointer;
}

#tab-general .settings-theme-switch .theme-dot { width: 10px; height: 10px; border-radius: 50%; background: #7b68ee; box-shadow: 0 0 0 5px rgba(123, 104, 238, .12); }
#tab-general .settings-theme-switch > svg { width: 16px; height: 16px; margin-inline-start: auto; color: var(--general-muted); }

#tab-general .settings-update-card { justify-content: space-between; gap: 16px; }
#tab-general .settings-update-head { align-items: flex-start; }
#tab-general .settings-update-version { padding: 7px 10px; color: #a9bdd8; border: 1px solid rgba(91, 140, 255, .25); border-radius: 999px; background: rgba(91, 140, 255, .08); font-size: 10px; }
#tab-general .settings-update-actions { display: grid; grid-template-columns: minmax(175px, 1.4fr) minmax(105px, .8fr) minmax(135px, 1fr); gap: 8px; }
#tab-general .settings-update-actions button { height: 46px; min-height: 46px; gap: 7px; padding: 0 11px; font-size: 11px; white-space: nowrap; }
#tab-general .settings-update-actions svg { width: 16px; height: 16px; }

#tab-general .settings-notification-card { justify-content: space-between; gap: 14px; cursor: pointer; }
#tab-general .settings-notification-body { align-items: flex-end; gap: 12px; }
#tab-general .settings-notification-copy strong { font-size: 12px; }
#tab-general .settings-notification-copy small { max-width: 190px; color: var(--general-muted); line-height: 1.35; }
#tab-general .settings-notification-control { min-height: 44px; padding: 0 11px; border-radius: 12px; background: rgba(6, 14, 26, .42); }
#tab-general .settings-notification-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
#tab-general .settings-switch-track { display: flex; width: 34px; height: 20px; align-items: center; padding: 2px; border-radius: 999px; background: #4b5c72; transition: background 180ms ease; }
#tab-general .settings-switch-track > span { width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .28); transition: transform 180ms ease; }
#tab-general .settings-notification-control input:checked + .settings-switch-track { background: #4b87ff; }
#tab-general .settings-notification-control input:checked + .settings-switch-track > span { transform: translateX(14px); }

#settings-dialog .settings-title-help {
    display: inline-grid;
    width: 24px;
    height: 24px;
    margin-inline-start: 7px;
    place-items: center;
    vertical-align: 2px;
    color: #8fb5ff;
    border: 1px solid rgba(112, 164, 255, .36);
    border-radius: 8px;
    background: rgba(91, 140, 255, .1);
    -webkit-text-fill-color: currentColor;
    opacity: 1;
}

#settings-dialog .settings-title-help svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#tab-general :is(button, label):focus-visible,
#tab-general .settings-notification-card:focus-within { outline: 3px solid rgba(91, 140, 255, .34); outline-offset: 2px; }
#tab-general button:active { filter: brightness(.92); }

body[data-theme="soft-light"] #tab-general {
    --general-surface: rgba(255, 255, 255, .72);
    --general-surface-strong: rgba(255, 255, 255, .96);
    --general-border: rgba(91, 91, 135, .24);
    --general-muted: #64748b;
}

body[data-theme="soft-light"] #tab-general :is(.general-language-card, .settings-mini-card) { box-shadow: 0 12px 28px rgba(79, 70, 120, .08), inset 0 1px #fff !important; }
body[data-theme="soft-light"] #tab-general .lang-btn,
body[data-theme="soft-light"] #tab-general :is(.settings-theme-switch, .settings-notification-control) { color: #334155; border-color: rgba(86, 88, 128, .28) !important; background: rgba(248, 250, 252, .82) !important; }
body[data-theme="soft-light"] #tab-general .lang-btn.active { color: #312e81; border-color: #6366f1 !important; background: linear-gradient(135deg, rgba(224, 231, 255, .95), rgba(243, 232, 255, .95)) !important; }
body[data-theme="soft-light"] #tab-general .lang-btn.active > span { color: #fff; background: #6366f1; }

@media (max-width: 1180px) {
    #tab-general .settings-general-row { grid-template-columns: minmax(180px, .55fr) minmax(430px, 1.45fr); }
    #tab-general .settings-notification-card { grid-column: 1 / -1; min-height: 118px; }
}

@media (max-width: 820px) {
    #tab-general .language-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #tab-general .settings-general-row { grid-template-columns: 1fr; }
    #tab-general .settings-notification-card { grid-column: auto; }
    #tab-general .settings-update-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    #tab-general *, #tab-general *::before, #tab-general *::after { transition-duration: .01ms !important; }
}

/* Toolio account page — deliberately scoped to prevent settings/theme bleed. */
#settings-tabs .settings-tab { gap: 8px; }
#settings-tabs .settings-tab > svg,
#btn-close-settings > svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
#btn-close-settings { display: inline-grid; place-items: center; }
#btn-close-settings > svg { width: 18px; height: 18px; }

#tab-account {
    --account-accent: #7c5cf6;
    --account-accent-strong: #5f45e8;
    --account-cyan: #4dc9e8;
    --account-success: #32d49a;
    --account-warning: #f0b94f;
    --account-danger: #fb7185;
    --account-surface: rgba(15, 25, 43, 0.78);
    --account-surface-strong: rgba(20, 33, 55, 0.94);
    --account-border: rgba(139, 171, 214, 0.22);
    --account-text: #f4f7ff;
    --account-muted: #aebbd0;
    --account-shadow: 0 20px 48px rgba(0, 0, 0, 0.24);
    overflow-y: auto !important;
    padding: 2px 2px 18px;
    color: var(--account-text);
}

#tab-account :is(button, input) { font: inherit; }
#tab-account [hidden] { display: none !important; }
#tab-account .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
#tab-account svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#tab-account .account-section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
}

#tab-account .account-section-icon,
#tab-account .account-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border: 1px solid rgba(124, 92, 246, 0.46);
    border-radius: 15px;
    color: #9ab8ff;
    background: linear-gradient(145deg, rgba(124, 92, 246, 0.19), rgba(77, 201, 232, 0.09));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}

#tab-account .account-section-icon svg { width: 25px; height: 25px; }
#tab-account .account-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #78a9ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.13em;
}
#tab-account .account-section-header h2,
#tab-account .account-card-heading h3 { margin: 0; color: var(--account-text); }
#tab-account .account-section-header h2 { font-size: clamp(20px, 2vw, 26px); line-height: 1.2; }
#tab-account .account-section-header p,
#tab-account .account-card-heading p { margin: 5px 0 0; color: var(--account-muted); font-size: 13px; line-height: 1.5; }

#tab-account .account-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(310px, 0.75fr);
    gap: 18px 20px;
    align-items: start;
}

#tab-account .account-content-column { display: grid; gap: 15px; min-width: 0; }

#tab-account :is(.account-page-card, .account-subscription-card) {
    min-width: 0;
    padding: 22px !important;
    border: 1px solid var(--account-border) !important;
    border-radius: 20px;
    color: var(--account-text);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 45%),
        var(--account-surface) !important;
    box-shadow: var(--account-shadow), inset 0 1px rgba(255, 255, 255, 0.045) !important;
    backdrop-filter: blur(16px) saturate(120%);
}
#tab-account .account-subscription-card { padding: 18px 20px !important; }

#tab-account .account-page-card > .section-badge { display: none; }
#tab-account .account-page-main {
    display: grid;
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
    gap: 18px;
    align-items: center;
    margin: 0 0 18px;
}
#tab-account .account-page-header { display: flex; align-items: center; gap: 14px; min-width: 0; }
#tab-account .account-page-avatar {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    object-fit: cover;
    border: 2px solid rgba(122, 169, 255, 0.68) !important;
    border-radius: 18px;
    background: rgba(9, 16, 29, 0.72);
    box-shadow: 0 0 0 4px rgba(124, 92, 246, 0.12), 0 12px 28px rgba(0, 0, 0, 0.22) !important;
}
#tab-account .account-page-header > div { min-width: 0; }
#tab-account .account-page-name {
    margin: 0 0 5px;
    overflow: hidden;
    color: var(--account-text);
    font-size: 18px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#tab-account .account-page-email {
    margin: 0;
    overflow: hidden;
    color: var(--account-muted);
    font-size: 12.5px;
    line-height: 1.45;
    text-overflow: ellipsis;
}

#tab-account .account-page-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin: 0;
}
#tab-account .account-page-stat {
    min-width: 0;
    height: 82px;
    min-height: 82px;
    padding: 12px;
    border: 1px solid rgba(139, 171, 214, 0.18);
    border-radius: 14px;
    background: rgba(6, 14, 27, 0.32);
}
#tab-account .account-page-stat:hover { transform: none; box-shadow: none; border-color: rgba(122, 169, 255, 0.34); }
#tab-account .account-stat-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 9px;
    color: var(--account-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}
#tab-account .account-stat-label::before { content: none; }
#tab-account .account-stat-label svg { width: 15px; height: 15px; color: #78a9ff; }
#tab-account .account-page-stat strong {
    display: block;
    overflow: hidden;
    color: var(--account-text);
    font-size: 13px;
    line-height: 1.35;
    text-overflow: ellipsis;
}
#tab-account #account-page-ends {
    display: grid;
    gap: 1px;
    overflow: visible;
    color: var(--account-text);
    text-overflow: clip;
    white-space: nowrap;
}
#tab-account #account-page-ends > span::before,
#tab-account #account-page-ends > small::before { content: none; }
#tab-account #account-page-ends-date { margin: 0; color: var(--account-text); font-size: 13px; line-height: 1.2; }
#tab-account #account-page-ends-time { margin: 0; color: var(--account-muted); font-size: 12px; font-weight: 650; line-height: 1.15; }

#tab-account .account-primary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 0;
    padding-top: 17px;
    border-top: 1px solid rgba(139, 171, 214, 0.15);
}
#tab-account .account-primary-actions button,
#tab-account #btn-account-redeem,
#tab-account .account-contact-btn {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px !important;
    border-radius: 12px;
    cursor: pointer;
    font-size: 13px !important;
    font-weight: 750;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}
#tab-account .account-primary-actions button:hover,
#tab-account #btn-account-redeem:hover,
#tab-account .account-contact-btn:hover { transform: none; }
#tab-account .premium-btn-indigo,
#tab-account #btn-account-redeem {
    border: 1px solid rgba(157, 139, 255, 0.72) !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--account-accent-strong), var(--account-accent)) !important;
    box-shadow: 0 9px 22px rgba(95, 69, 232, 0.24);
}
#tab-account .premium-btn-indigo:hover:not(:disabled),
#tab-account #btn-account-redeem:hover:not(:disabled) { box-shadow: 0 12px 27px rgba(95, 69, 232, 0.34); }
#tab-account .premium-btn-gray {
    border: 1px solid var(--account-border) !important;
    color: var(--account-text) !important;
    background: rgba(255, 255, 255, 0.055) !important;
}
#tab-account .premium-btn-gray:hover { border-color: rgba(122, 169, 255, 0.48) !important; background: rgba(122, 169, 255, 0.1) !important; }
#tab-account .premium-btn-red {
    border: 1px solid rgba(251, 113, 133, 0.42) !important;
    color: #ffc5cf !important;
    background: rgba(251, 113, 133, 0.08) !important;
}
#tab-account .premium-btn-red:hover { background: rgba(251, 113, 133, 0.15) !important; }
#tab-account button:disabled { cursor: not-allowed; opacity: 0.48; box-shadow: none !important; }
#tab-account button[aria-busy="true"] svg { animation: toolio-account-busy 850ms linear infinite; }
#tab-account :is(button, input):focus-visible {
    outline: 3px solid rgba(122, 169, 255, 0.38);
    outline-offset: 2px;
}

#tab-account .account-blocked-box {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 16px;
    padding: 13px 14px;
    border: 1px solid rgba(251, 113, 133, 0.4);
    border-radius: 13px;
    color: #ffd1d8;
    background: rgba(127, 29, 29, 0.2);
}
#tab-account .account-blocked-box.hidden { display: none; }
#tab-account .account-blocked-box svg { color: var(--account-danger); }
#tab-account .account-blocked-box p { margin: 4px 0 0; color: #e9aeb8; font-size: 12px; line-height: 1.45; }

#tab-account .account-redeem-box {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid rgba(124, 92, 246, 0.28);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(124, 92, 246, 0.1), rgba(77, 201, 232, 0.045));
}
#tab-account .account-card-heading { display: flex; align-items: center; gap: 12px; }
#tab-account .account-card-heading .account-card-icon { width: 42px; height: 42px; flex-basis: 42px; border-radius: 13px; }
#tab-account .account-card-heading h3 { font-size: 15px; line-height: 1.3; }
#tab-account .account-card-heading p { font-size: 12px; }
#tab-account .account-redeem-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 15px; }
#tab-account .account-code-field { position: relative; display: block; min-width: 0; }
#tab-account #account-redeem-code {
    width: 100%;
    min-height: 44px;
    padding: 0 48px 0 13px !important;
    border: 1px solid rgba(139, 171, 214, 0.34) !important;
    border-radius: 11px;
    color: var(--account-text);
    background: rgba(5, 12, 24, 0.48) !important;
}
#tab-account #account-redeem-code::placeholder { color: #78869e; opacity: 1; }
#tab-account .account-paste-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    color: #9ab8ff;
    background: transparent;
    cursor: pointer;
    transition: color 180ms ease, background 180ms ease;
}
#tab-account .account-paste-btn:hover { color: #fff; background: rgba(122, 169, 255, 0.14); }

#tab-account .account-subscription-card {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0, rgba(124, 92, 246, 0.25), transparent 15rem),
        radial-gradient(circle at 0 100%, rgba(77, 201, 232, 0.12), transparent 13rem),
        var(--account-surface-strong) !important;
}
#tab-account .account-subscription-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(var(--account-cyan), var(--account-accent));
}
#tab-account .account-plan-heading { display: flex; align-items: center; gap: 10px; }
#tab-account .account-plan-heading .account-card-icon { width: 38px; height: 38px; flex-basis: 38px; border-radius: 12px; color: #d2c7ff; }
#tab-account .account-plan-heading .account-eyebrow { margin: 0; }
#tab-account .account-plan-title { max-width: 340px; margin: 12px 0 0; color: var(--account-text); font-size: 22px; line-height: 1.25; }
#tab-account .account-plan-price { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
#tab-account .account-plan-price > span {
    color: #fff;
    background: linear-gradient(135deg, #b6ccff, #b59dff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 38px;
    font-weight: 850;
    letter-spacing: -0.04em;
}
#tab-account .account-plan-price > div { display: grid; gap: 2px; }
#tab-account .account-plan-price strong { color: var(--account-text); font-size: 13px; }
#tab-account .account-plan-price small { color: var(--account-muted); font-size: 11px; font-weight: 650; }
#tab-account .account-plan-features { display: grid; gap: 8px; margin: 14px 0; padding: 0; list-style: none; }
#tab-account .account-plan-features li { display: flex; align-items: center; gap: 9px; color: var(--account-text); font-size: 12.5px; line-height: 1.35; }
#tab-account .account-plan-features svg { width: 19px; height: 19px; padding: 3px; border-radius: 50%; color: #7de3be; background: rgba(50, 212, 154, 0.13); }
#tab-account .account-plan-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px;
    border: 1px solid rgba(240, 185, 79, 0.26);
    border-radius: 13px;
    color: var(--account-text);
    background: rgba(240, 185, 79, 0.075);
}
#tab-account .account-plan-note svg { width: 19px; height: 19px; color: var(--account-warning); }
#tab-account .account-plan-note div { display: grid; gap: 3px; }
#tab-account .account-plan-note strong { font-size: 12px; }
#tab-account .account-plan-note span { color: var(--account-muted); font-size: 11px; line-height: 1.4; }
#tab-account .account-contact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
#tab-account .account-contact-btn { padding: 0 11px !important; color: #fff !important; animation: none !important; text-shadow: none !important; }
#tab-account .premium-btn-whatsapp { border: 1px solid #178c62 !important; background: linear-gradient(135deg, #20ad78, #12815b) !important; box-shadow: 0 8px 18px rgba(18, 129, 91, 0.2); }
#tab-account .premium-btn-telegram { border: 1px solid #2876d6 !important; background: linear-gradient(135deg, #499bf3, #2f70d8) !important; box-shadow: 0 8px 18px rgba(47, 112, 216, 0.2); }
#tab-account .account-plan-footnote { margin: 9px 0 0; color: var(--account-muted); font-size: 11px; line-height: 1.45; text-align: center; }

#tab-account[data-account-state="active"] .account-page-avatar,
#tab-account[data-account-state="trial"] .account-page-avatar { border-color: rgba(50, 212, 154, 0.76) !important; box-shadow: 0 0 0 4px rgba(50, 212, 154, 0.1), 0 12px 28px rgba(0, 0, 0, 0.22) !important; }
#tab-account[data-account-state="expired"] .account-page-avatar { border-color: rgba(240, 185, 79, 0.8) !important; }
#tab-account[data-account-state="blocked"] .account-page-avatar { border-color: rgba(251, 113, 133, 0.8) !important; }
#tab-account[data-account-state="blocked"] .account-redeem-box { display: none; }
#tab-account .account-expired-text { color: #ffc565 !important; }
#tab-account[data-account-state="blocked"] .account-expired-text { color: #ff9aaa !important; }

body[data-theme="soft-light"] #tab-account {
    --account-accent: #7356df;
    --account-accent-strong: #5a41cf;
    --account-cyan: #0e91af;
    --account-success: #087c5a;
    --account-warning: #a75b05;
    --account-danger: #c83750;
    --account-surface: rgba(255, 255, 255, 0.78);
    --account-surface-strong: rgba(249, 247, 255, 0.94);
    --account-border: rgba(71, 82, 119, 0.24);
    --account-text: #1d2435;
    --account-muted: #59657a;
    --account-shadow: 0 18px 42px rgba(83, 67, 110, 0.13);
}
body[data-theme="soft-light"] #tab-account .account-section-icon,
body[data-theme="soft-light"] #tab-account .account-card-icon { color: #5b52c7; background: linear-gradient(145deg, rgba(115, 86, 223, 0.14), rgba(14, 145, 175, 0.08)); }
body[data-theme="soft-light"] #tab-account .account-eyebrow,
body[data-theme="soft-light"] #tab-account .account-stat-label svg { color: #4b58ae; }
body[data-theme="soft-light"] #tab-account :is(.account-page-card, .account-subscription-card) { border-color: var(--account-border) !important; color: var(--account-text); box-shadow: var(--account-shadow), inset 0 1px rgba(255, 255, 255, 0.88) !important; }
body[data-theme="soft-light"] #tab-account .account-page-stat { border-color: rgba(71, 82, 119, 0.2) !important; background: rgba(245, 247, 252, 0.82) !important; }
body[data-theme="soft-light"] #tab-account .account-page-avatar { background: #f4f6fb; }
body[data-theme="soft-light"] #tab-account #account-redeem-code { border-color: rgba(71, 82, 119, 0.3) !important; color: var(--account-text); background: rgba(255, 255, 255, 0.88) !important; }
body[data-theme="soft-light"] #tab-account #account-redeem-code::placeholder { color: #6c778a; }
body[data-theme="soft-light"] #tab-account .account-paste-btn:hover { color: #3d399a; background: rgba(91, 82, 199, 0.1); }
body[data-theme="soft-light"] #tab-account .premium-btn-gray { color: #283147 !important; background: rgba(255, 255, 255, 0.72) !important; }
body[data-theme="soft-light"] #tab-account .premium-btn-red { color: #a3213a !important; background: rgba(200, 55, 80, 0.07) !important; }
body[data-theme="soft-light"] #tab-account .account-plan-features svg { color: #087c5a; background: rgba(8, 124, 90, 0.1); }
body[data-theme="soft-light"] #tab-account .account-plan-price > span { background: linear-gradient(135deg, #354c9f, #7253cc); -webkit-background-clip: text; background-clip: text; }
body[data-theme="soft-light"] #tab-account .account-blocked-box { color: #7f1d31; background: rgba(200, 55, 80, 0.07); }
body[data-theme="soft-light"] #tab-account .account-blocked-box p { color: #8b3a4b; }

@keyframes toolio-account-busy { to { rotate: 1turn; } }

@media (max-width: 1120px) {
    #tab-account .account-page-layout { grid-template-columns: 1fr; }
    #tab-account .account-subscription-card { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
    #tab-account .account-plan-heading,
    #tab-account .account-plan-title,
    #tab-account .account-plan-price,
    #tab-account .account-plan-features { grid-column: 1; }
    #tab-account .account-plan-note,
    #tab-account .account-contact-actions,
    #tab-account .account-plan-footnote { grid-column: 2; }
    #tab-account .account-plan-note { grid-row: 1 / span 2; align-self: start; margin-top: 0; }
    #tab-account .account-contact-actions { align-self: start; }
}

@media (max-width: 760px) {
    #tab-account .account-section-header { align-items: flex-start; }
    #tab-account .account-page-main { grid-template-columns: 1fr; }
    #tab-account .account-page-status-grid { grid-template-columns: 1fr; }
    #tab-account .account-page-stat { min-height: 68px; }
    #tab-account .account-primary-actions { display: grid; grid-template-columns: 1fr; }
    #tab-account .account-primary-actions button { width: 100%; }
    #tab-account .account-redeem-row { grid-template-columns: 1fr; }
    #tab-account #btn-account-redeem { width: 100%; }
    #tab-account .account-subscription-card { display: block; }
    #tab-account .account-contact-actions { grid-template-columns: 1fr; }
    #tab-account .account-plan-note { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    #tab-account *, #tab-account *::before, #tab-account *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation: none !important; }
}

/* Tool picker modal — scoped to avoid affecting shared dialogs. */
#tool-modal .tool-modal-dialog {
    width: min(920px, 92vw);
    max-width: 920px;
    max-height: min(760px, 84vh);
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(129, 140, 248, 0.18);
    border-radius: 20px;
    background:
        radial-gradient(circle at 8% 0%, rgba(59, 130, 246, 0.08), transparent 28%),
        linear-gradient(160deg, #111827, #0c1220 72%);
    box-shadow: 0 28px 90px rgba(2, 6, 23, 0.68), 0 0 50px rgba(79, 70, 229, 0.08);
}

#tool-modal .tool-modal-header {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    column-gap: 14px;
    row-gap: 3px;
    margin: 0;
    padding: 24px 76px 20px 26px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.11);
    background: rgba(255, 255, 255, 0.018);
}

#tool-modal .tool-modal-heading-icon {
    grid-column: 1;
    grid-row: 1 / 4;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    align-self: center;
    color: #67e8f9;
    border: 1px solid rgba(34, 211, 238, 0.25);
    border-radius: 14px;
    background: rgba(6, 182, 212, 0.09);
}

#tool-modal[data-mode="remove"] .tool-modal-heading-icon {
    color: #fda4af;
    border-color: rgba(251, 113, 133, 0.25);
    background: rgba(244, 63, 94, 0.08);
}

#tool-modal .tool-modal-heading-icon svg { width: 25px; height: 25px; }
#tool-modal .tool-modal-icon-remove { display: none; }
#tool-modal[data-mode="remove"] .tool-modal-icon-add { display: none; }
#tool-modal[data-mode="remove"] .tool-modal-icon-remove { display: block; }

#tool-modal .tool-modal-eyebrow {
    grid-column: 2 / 4;
    grid-row: 1;
    color: #67e8f9;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

#tool-modal[data-mode="remove"] .tool-modal-eyebrow { color: #fda4af; }

#tool-modal .tool-modal-header .page-title {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    color: #f8fafc;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
}

#tool-modal .tool-modal-count {
    grid-column: 3;
    grid-row: 2;
    align-self: center;
    padding: 5px 9px;
    color: #a5f3fc;
    border: 1px solid rgba(34, 211, 238, 0.18);
    border-radius: 999px;
    background: rgba(6, 182, 212, 0.08);
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

#tool-modal[data-mode="remove"] .tool-modal-count {
    color: #fecdd3;
    border-color: rgba(251, 113, 133, 0.18);
    background: rgba(244, 63, 94, 0.07);
}

#tool-modal .tool-modal-header .page-description {
    grid-column: 2 / 4;
    grid-row: 3;
    margin: 1px 0 0;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.5;
}

#tool-modal #btn-close-tool-modal {
    top: 24px;
    right: 26px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
}

#tool-modal #btn-close-tool-modal svg { width: 19px; height: 19px; }

#tool-modal .tool-modal-grid {
    min-height: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 12px;
    margin: 0;
    padding: 20px 22px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: rgba(129, 140, 248, 0.48) transparent;
}

#tool-modal .tool-modal-grid::-webkit-scrollbar { width: 5px; }
#tool-modal .tool-modal-grid::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(129, 140, 248, 0.48); }

#tool-modal .tool-card {
    min-width: 0;
    min-height: 106px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
    transition: opacity 220ms ease, transform 220ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

#tool-modal .tool-card:hover {
    border-color: color-mix(in srgb, var(--tool-color, #818cf8) 34%, transparent);
    background: color-mix(in srgb, var(--tool-color, #818cf8) 7%, rgba(255, 255, 255, 0.022));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 10px 24px rgba(2, 6, 23, 0.14);
}

#tool-modal[data-mode="remove"] .tool-card:hover {
    border-color: rgba(251, 113, 133, 0.28);
    background: rgba(244, 63, 94, 0.045);
}

#tool-modal .tool-card-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: color-mix(in srgb, var(--tool-color, #93c5fd) 84%, white);
    border: 1px solid color-mix(in srgb, var(--tool-color, #93c5fd) 24%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--tool-color, #93c5fd) 11%, rgba(15, 23, 42, 0.86));
}

#tool-modal .tool-card-icon svg { width: 22px; height: 22px; }
#tool-modal .tool-card-info { min-width: 0; }

#tool-modal .tool-card-name {
    margin: 0 0 4px;
    color: #f1f5f9;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.25;
}

#tool-modal .tool-card-category {
    margin: 0 0 5px;
    padding: 2px 7px;
    color: color-mix(in srgb, var(--tool-color, #a5b4fc) 70%, white);
    border: 1px solid color-mix(in srgb, var(--tool-color, #818cf8) 16%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--tool-color, #818cf8) 8%, transparent);
    font-size: 9px;
    font-weight: 750;
}

#tool-modal .tool-card-desc {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

#tool-modal .tool-card-btn {
    min-width: 82px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 13px;
    border-radius: 10px;
    font: 750 12px/1 var(--font-sans);
    touch-action: manipulation;
    transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

#tool-modal .tool-card-btn svg { width: 15px; height: 15px; flex: 0 0 15px; }

#tool-modal .tool-card-add {
    color: #a7f3d0;
    border-color: rgba(52, 211, 153, 0.24);
    background: rgba(16, 185, 129, 0.09);
}

#tool-modal .tool-card-add:hover:not(:disabled) { color: #ecfdf5; border-color: rgba(52, 211, 153, 0.42); background: rgba(16, 185, 129, 0.18); }

#tool-modal .tool-card-del {
    color: #fda4af;
    border-color: rgba(251, 113, 133, 0.24);
    background: rgba(244, 63, 94, 0.08);
    box-shadow: none;
}

#tool-modal .tool-card-del:hover { color: #fff1f2; border-color: rgba(251, 113, 133, 0.42); background: rgba(244, 63, 94, 0.16); }
#tool-modal .tool-card-btn:disabled { cursor: not-allowed; opacity: 0.48; }

#tool-modal .tool-card-btn:focus-visible,
#tool-modal #btn-close-tool-modal:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

#tool-modal .tool-modal-footer {
    min-height: 52px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 24px;
    color: #8492a8;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    background: rgba(2, 6, 23, 0.14);
}

#tool-modal .tool-modal-footer svg { width: 17px; height: 17px; flex: 0 0 17px; color: #7dd3fc; }
#tool-modal[data-mode="remove"] .tool-modal-footer svg { color: #fda4af; }
#tool-modal .tool-modal-footer p { margin: 0; font-size: 11.5px; line-height: 1.45; }

body[data-theme="soft-light"] #tool-modal .tool-modal-dialog {
    border-color: rgba(95, 82, 98, 0.16);
    background: linear-gradient(155deg, rgba(251, 249, 252, 0.98), rgba(241, 237, 247, 0.98));
    box-shadow: 0 28px 80px rgba(86, 65, 98, 0.2);
}

body[data-theme="soft-light"] #tool-modal .tool-modal-header,
body[data-theme="soft-light"] #tool-modal .tool-modal-footer { border-color: rgba(95, 82, 98, 0.12); background: rgba(255, 255, 255, 0.36); }
body[data-theme="soft-light"] #tool-modal .tool-modal-header .page-title { color: #2f2938; }
body[data-theme="soft-light"] #tool-modal .tool-modal-header .page-description,
body[data-theme="soft-light"] #tool-modal .tool-card-desc,
body[data-theme="soft-light"] #tool-modal .tool-modal-footer { color: #655e70; }
body[data-theme="soft-light"] #tool-modal .tool-card { border-color: rgba(95, 82, 98, 0.14); background: rgba(255, 255, 255, 0.54); box-shadow: 0 8px 22px rgba(86, 65, 98, 0.06); }
body[data-theme="soft-light"] #tool-modal .tool-card:hover { background: rgba(255, 255, 255, 0.82); }
body[data-theme="soft-light"] #tool-modal .tool-card-name { color: #332d3b; }
body[data-theme="soft-light"] #tool-modal .tool-card-icon { background: color-mix(in srgb, var(--tool-color, #7c3aed) 9%, white); }

@media (max-width: 760px) {
    #tool-modal .tool-modal-dialog { width: min(94vw, 560px); max-height: 88vh; }
    #tool-modal .tool-modal-grid { grid-template-columns: 1fr; padding: 16px; }
}

@media (max-height: 650px) {
    #tool-modal .tool-modal-dialog { max-height: 90vh; }
    #tool-modal .tool-modal-header { padding-top: 17px; padding-bottom: 15px; }
    #tool-modal #btn-close-tool-modal { top: 17px; }
    #tool-modal .tool-modal-grid { padding-top: 14px; padding-bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    #tool-modal *, #tool-modal *::before, #tool-modal *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation: none !important; }
}