@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;500;800&display=swap');

:root {
    --primary-color: #2563eb;
    --secondary-color: #1e40af;
    --success-color: #059669;
    --warning-color: #d97706;
    --danger-color: #dc2626;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --border-radius: 12px;
    --transition: all 0.2s ease;
    --bg-color: #e9c46a;
    --contrast-color: #fcfcff;

    /* ---- central light-theme tokens (eye-friendly, low glare) ---- */
    --bg: #edeff4;
    /* soft page background (not pure white) */
    --surface: #ffffff;
    /* cards / panels */
    --surface-2: #f4f6fa;
    /* subtle fills: table head, hovers */
    --border: #e6e9f0;
    /* hairlines / card borders */
    --text: #1f2937;
    /* primary text */
    --text-secondary: #64748b;
    /* muted text */
    --hover: #eef2f8;
    /* hover surfaces */
    --primary: var(--primary-color);
    --accent-color: var(--primary-color);
    /* second palette colour */
    --success: #16a34a;
    --danger: #dc2626;
    --warning: #d97706;
    --secondary: #64748b;

    --time: 2000ms;
    --animation-settings: var(--time) ease infinite;
}

/* ===== RESET & BASE STYLES ===== */
html {
    margin: 0;
    padding: 0;
    height: 100%;
}

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

a {
    text-decoration: none;
}

body,
input,
button,
select,
textarea {
    font-family: 'Vazirmatn';
}

body {
    font-family: 'Vazirmatn';
    color: #1f2937;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-color-dark, var(--bg));
}

/* Duplicate shimmer animation removed - using the one below */

@keyframes elegant-pulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
    }

    100% {
        transform: scale(1.2);
        opacity: 1;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
    }
}

/* ===== LOGIN STYLES ===== */

/* Recovery Options Styles */

/* Recovery Forms Styles */

/* Enhanced Form Actions */
.secondary-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
}

.btn-link {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

.btn-secondary {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
    border: 1px solid rgba(37, 99, 235, 0.2);
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    margin-left: 8px;
}

.btn-secondary:hover {
    background: rgba(37, 99, 235, 0.15);
    border-color: rgba(37, 99, 235, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}

/* User Info Styles */

/* Token Help Section Styles */

/* Enhanced Footer */
.login-footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.footer-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

.footer-link {
    color: #4a90e2;
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 1px solid transparent;
}

.footer-link:hover {
    color: #ffffff;
    border-bottom-color: #4a90e2;
}

/* Responsive Design for Recovery Page */
@media (max-width: 768px) {

    .secondary-actions {
        flex-direction: column;
        gap: 10px;
    }

    .btn-link,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .sidebar {
        width: 100%;
        max-width: 300px;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }


    .content-area {
        margin-right: 0;
        padding: 15px;
    }

    .menu-link {
        padding: 12px 20px;
        margin-left: 8px;
    }

    .sidebar-overlay.active {
        opacity: 1;
    }

    .sidebar-overlay {
        display: block !important;
    }

    .manage-container .content {
        padding: 5px !important;
    }

    .action-buttons {
        gap: 3px;
    }

    .btn-action {
        width: 26px;
        height: 26px;
        font-size: 9px;
    }

    .dashboard-container {
        padding: 1rem;
    }

    .payment-container {
        margin: 1rem;
        padding: 2rem 1.5rem;
    }

    .payment-image {
        width: 150px;
        height: 150px;
    }

    .payment-title {
        font-size: 1.5rem;
    }

    .code-container {
        padding: 1rem;
    }

    .code-value {
        font-size: 1rem;
    }

    .steps-container {
        padding: 1.5rem;
    }

    .step-item {
        flex-direction: column;
        text-align: center;
    }

    .denied_header h1 {
        font-size: 1.5rem;
    }

    .denied_card {
        padding: 20px;
    }

    .denied_actions {
        flex-direction: column;
    }

    .denied_btn {
        width: 100%;
        justify-content: center;
    }

    .denied_reasons li {
        font-size: 0.9rem;
    }

    .toast-stack {
        right: 10px;
        left: 10px;
        width: auto;
        max-width: none;
    }

    .page-table {
        font-size: 12px;
    }

    .page-table th,
    .page-table td {
        padding: 10px 8px;
    }

    .pagination-container {
        flex-direction: column;
        gap: 15px;
    }

    .search-input {
        width: 88% !important;

    }


    .search-input {
        width: 100%;
        padding: 12px 16px;
        border-radius: 12px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
    }

    .tabs .btn_actions {
        flex-direction: column;
    }

    .tabs .info_data {
        font-size: 12px !important;
        padding: 10px 10px !important;
    }

    .agent_bot .data span {
        display: block;
    }

    .agent_bot .data {
        margin: 4px 0 !important;
    }

    .agent_bot {
        padding: 10 !important;
    }

    .manage-container .tabs {
        padding: 10px !important;
    }

    .table-container {
        background-color: transparent;
    }

    .btn-admin,
    .back-page {
        padding: 6px 8px !important;
    }


    .manage-header h3 {
        font-size: 13px !important;
    }



    .page-table {
        display: none;
    }

    .card-list {
        display: block !important;
    }

    .table-container {
        background-color: transparent !important;
    }

    .card {
        background-color: #fff;
    }

    .actions {
        flex-direction: column;
    }

    .actions button {
        margin: 0 !important;
    }

    .btn-view {
        background: #23a7ff;
        color: #0369a1;
    }

    .btn-delete {
        background: #cc5b5b !important;
    }

    .input-wrapper-size-3 {
        flex-direction: column;
    }

    .menu-top {
        width: 100% !important;
    }

    .theme-toggle {
        margin: 0;
    }

    .search_bar__input {
        width: 100% !important;
    }

    .sort__menu {
        right: -141px !important;
    }

    .box_ticket {
        display: flex !important;
        flex-direction: column;
        padding: 25px 5px !important;
        justify-content: center;
    }



    .box_ticket .ticket_message {
        padding: 12px 5px !important;
    }

    .create_comment {
        padding: 30px 15px !important;
    }
}

.card-list {
    display: none;
}

.card {
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 10px;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.boxlogin {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.15),
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    padding: 40px;
    width: 100%;
    max-width: 500px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.8);
    margin: 20px auto;
}

.boxlogin::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2563eb 0%, #1e40af 100%);
    border-radius: 24px 24px 0 0;
}

/* Login Header */
.login-header {
    text-align: center;
    margin-bottom: 32px;
}

.login-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: white;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
}

.boxlogin .title {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.subtitle {
    color: #64748b;
    font-size: 14px;
    margin: 0;
    font-weight: 400;
}

/* Notifications (Django messages) — classic side toast stack */
.toast-stack {
    position: fixed;
    top: 84px;
    left: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 360px;
    max-width: calc(100vw - 48px);
    pointer-events: none;
}

.alert {
    pointer-events: auto;
    position: static;
    display: block;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color-dark, var(--border, #e6e9f0));
    border-inline-start: 4px solid var(--_accent, var(--primary-color, #2563eb));
    border-radius: 12px;
    background: var(--card-bg-dark, var(--surface, #fff));
    color: var(--text-color-dark, var(--text, #1f2937));
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    direction: rtl;
    font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif;
    animation: alertSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.alert-error   { --_accent: var(--danger,  #dc2626); }
.alert-success { --_accent: var(--success, #16a34a); }
.alert-warning { --_accent: var(--warning, #d97706); }
.alert-info    { --_accent: var(--primary-color, #2563eb); }

.alert-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 14px;
    border: 0;
}

.alert-icon-wrapper {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.alert-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--_accent, var(--primary-color, #2563eb));
    flex-shrink: 0;
}

.alert-icon img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

.alert-close {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.alert-close:hover {
    background: var(--hover-bg-dark, var(--hover, #eef2f8));
}

.alert-close img {
    width: 14px;
    height: 14px;
    filter: brightness(0.55);
    opacity: 0.75;
}

.alert-message {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color-dark, var(--text, #1f2937));
    line-height: 1.7;
    margin: 0;
    word-break: break-word;
}

.alert::before,
.alert::after {
    content: none;
    display: none;
}

.alert.fade-out {
    animation: alertSlideOut 0.35s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

/* Alert Animations */
@keyframes alertSlideIn {
    from {
        opacity: 0;
        transform: translateX(-18px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes alertSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-18px);
    }
}

/* Responsive Design */
@media (max-width: 640px) {
    .toast-stack {
        top: 12px;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
    }

    .alert-message {
        font-size: 0.85rem;
    }
}

/* Form Styles */
.login-form {
    width: 100%;
}

.form-group {
    margin-bottom: 24px;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    z-index: 2;
    pointer-events: auto;
    font-size: 12px;
    font-weight: 500;
    background: #f8fafc;
    width: auto;
    height: auto;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 4px 6px;
    border: 1px solid #e2e8f0;
    user-select: none;
}

.input-wrapper:focus-within .input-icon {
    color: #2563eb;
    background: #dbeafe;
    border-color: #2563eb;
    transform: translateY(-50%);
    box-shadow: none;
}

.input-icon:hover {
    color: #2563eb;
    background: #dbeafe;
    border-color: #2563eb;
}

.form-input {
    width: 100%;
    padding: 16px 16px 16px 48px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 16px;
    font-family: 'Vazirmatn', sans-serif;
    background: #ffffff;
    color: #1e293b;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: right;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    line-height: 1.5;
    font-weight: 500;
}

.form-input::placeholder {
    color: #94a3b8;
    font-size: 14px;
    opacity: 1;
    font-weight: 400;
}

.form-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1), 0 4px 12px rgba(0, 0, 0, 0.1);
    background: #ffffff;
    color: #0f172a;
}

.form-input:focus::placeholder {
    color: #cbd5e1;
    transform: translateY(-2px);
}

.form-input:focus~.input-icon {
    color: #2563eb;
}


.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Vazirmatn', sans-serif;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    color: white;
    width: 100%;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3);
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.4);
}

.btn-primary:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    opacity: 0.5;
    transform: none;
    box-shadow: none;
}

.btn-primary:disabled:hover {
    background: #9ca3af;
    transform: none;
    box-shadow: none;
}

.btn-primary:active {
    transform: translateY(0);
}

/* Duplicate .btn-secondary removed - consolidated above */

.btn-link {
    background: transparent;
    color: #64748b;
    flex: 1;
    margin-right: 8px;
}

.btn-link:hover {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.05);
}

.secondary-actions {
    display: flex;
    gap: 8px;
}

.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Password Requirements */

/* Token Validation Styles */

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Footer */
.login-footer {
    margin-top: 32px;
    text-align: center;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}

.footer-text {
    font-size: 12px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.footer-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}

.footer-link:hover {
    text-decoration: underline;
}

/* Legacy styles for backward compatibility */
.btnpanel {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    flex-direction: column;
}

.btn_reg_pass {
    margin-top: 10px;
}

/* ===== MAIN LAYOUT ===== */
.main-container {
    display: flex;
    flex: 1;
    direction: rtl;
    font-family: 'Vazirmatn', sans-serif;
}

.content-area {
    flex: 1;
    margin-right: 280px;
    padding: 0 20px 0 20px;
    background: var(--bg-color-dark, var(--bg));
    color: var(--text-color-dark, var(--text));
    overflow-y: auto;
    width: calc(100% - 280px);
    transition: margin-left 0.3s ease;
}

/* ===== SIDEBAR STYLES ===== */
.sidebar {
    width: 280px;
    background: #fff;
    color: #000;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 7px rgb(209 209 209 / 40%);
    position: fixed;
    height: -webkit-fill-available;
    right: 0;
    top: 0;
    z-index: 999;
    backdrop-filter: blur(10px);
    overflow-y: auto;
}


.sidebar-menu {
    flex: 1;
    list-style: none;
    padding: 20px 0;
    margin: 0;
}

.menu-item {
    margin-bottom: 8px;
    position: relative;
}

.menu-link {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    color: #000;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    margin-left: 16px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.menu-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(79, 172, 254, 0.2), transparent);
    transition: left 0.5s ease;
}

.menu-link:hover::before {
    left: 100%;
}

.menu-link:hover {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.2) 0%, rgba(0, 242, 254, 0.1) 100%);
    color: #4facfe;
    transform: translateX(-6px);
    box-shadow: 0 6px 25px rgba(79, 172, 254, 0.3);
}

.menu-link.active {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.3) 0%, rgba(0, 242, 254, 0.2) 100%);
    color: #4facfe;
    border-left: 4px solid #4facfe;
    box-shadow: 0 6px 30px rgba(79, 172, 254, 0.4);
    text-shadow: 0 0 10px rgba(79, 172, 254, 0.5);
}

.menu-text {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.submenu {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 8px 5px 0 0;
    border-radius: 0 16px 16px 0;
    border-left: 2px solid transparent;
    backdrop-filter: blur(5px);
    opacity: 0;
    transform: translateY(-10px);
}

.submenu.active {
    max-height: 300px;
    opacity: 1;
    transform: translateY(0);
    border-left: 2px solid rgba(79, 172, 254, 0.3);
}

.submenu-item {
    padding: 14px 24px 14px 48px;
    color: #000;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px;
    font-weight: 500;
    position: relative;
    border-radius: 0 12px 12px 0;
    margin: 4px 8px 4px 0;
    letter-spacing: 0.3px;
}

.submenu-item::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: rgba(79, 172, 254, 0.6);
    border-radius: 50%;
    transition: all 0.3s ease;
    opacity: 0.5;
}

.submenu-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(79, 172, 254, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 0 12px 12px 0;
}

.submenu-item:hover {
    color: #4facfe;
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.15) 0%, rgba(0, 242, 254, 0.08) 100%);
    transform: translateX(-4px);
    box-shadow: 0 4px 15px rgba(79, 172, 254, 0.2);
    text-shadow: 0 0 8px rgba(79, 172, 254, 0.4);
}

.submenu-item:hover::before {
    background: #4facfe;
    opacity: 1;
    transform: translateY(-50%) scale(1.3);
    box-shadow: 0 0 10px rgba(79, 172, 254, 0.6);
}

.submenu-item:hover::after {
    opacity: 1;
}

.submenu-item:active {
    transform: translateX(-2px) scale(0.98);
}

.submenu-arrow {
    margin-right: auto;
    font-size: 14px;
    color: #000;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: rotate(0deg);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(79, 172, 254, 0.2);
}

.menu-link:hover .submenu-arrow {
    color: #4facfe;
    background: rgba(79, 172, 254, 0.2);
    border-color: rgba(79, 172, 254, 0.4);
    box-shadow: 0 0 15px rgba(79, 172, 254, 0.3);
    transform: rotate(180deg) scale(1.1);
}

.submenu.active+.menu-link .submenu-arrow,
.menu-item:has(.submenu.active) .submenu-arrow {
    transform: rotate(180deg) scale(1.1);
    color: #4facfe;
    background: rgba(79, 172, 254, 0.25);
    border-color: rgba(79, 172, 254, 0.5);
    box-shadow: 0 0 20px rgba(79, 172, 254, 0.4);
}

/* ===== MOBILE MENU TOGGLE ===== */
.mobile-menu-toggle {
    position: fixed;
    top: 50%;
    right: -25px;
    transform: translateY(-50%);
    z-index: 1001;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
    border: none;
    border-radius: 16px;
    width: 52px;
    height: 52px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
}

/* ===== SIDEBAR OVERLAY ===== */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}


.create_comment input[type="submit"] {
    align-self: flex-start;
    padding: 14px 36px;
    border-radius: 18px;
    border: none;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.create_comment input[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(37, 99, 235, 0.22);
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1024px) {
    .sidebar {
        width: 260px;
        transform: translateX(100%);
        box-shadow: none;
    }

    .sidebar.active {
        transform: translateX(0);
    }

    .content-area {
        margin-right: 0;
        padding: 20px;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .tabs .detail {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .tabcontent {
        padding: 10px !important;
    }

    .content-area {
        margin-left: 0;
        padding-top: 80px;
    }


    .search-input {
        min-width: auto;
    }

    .action-buttons {
        gap: 4px;
    }

    .btn-action {
        width: 28px;
        height: 28px;
        font-size: 10px;
    }
}

/* ===== HEADER STYLES ===== */



/* Bot List Styles */


.search-input {
    padding: 10px 15px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: white;
}

.search-input {
    min-width: 250px;
    flex: 1;
}

.search-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Expiry info styles */

.action-buttons {
    display: flex;
    gap: 8px;
}

.btn-action {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 12px;
}

.btn-stats {
    background: #ecfdf5;
    color: #059669;
}

.btn-stats:hover {
    background: #059669;
    color: white;
    transform: translateY(-2px);
}

.btn-delete {
    background: #fef2f2;
    color: #dc2626;
}

.btn-delete:hover {
    background: #dc2626;
    color: white;
    transform: translateY(-2px);
}

/* ===== DASHBOARD STYLES ===== */
.dashboard-container {
    padding: 20px;
    max-width: 1500px;
    margin: 0 auto;
    direction: rtl;
}

/* Stats Grid */

/* Stat Box */

/* Stat Icon */

/* Stat Content */

/* Responsive Design */

/* ===== FOOTER STYLES ===== */

/* Extend Bot Styles */
.box_extend {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    padding: 30px;
    max-width: 800px;
    width: 90%;
    margin: 20px auto;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.box_extend::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    animation: shimmer 3s infinite;
}

/* Duplicate shimmer animation removed - using the one below */

.extend_header {
    text-align: center;
    margin-bottom: 25px;
    position: relative;
    z-index: 2;
}

.extend_header h1 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.extend_header p {
    font-size: 1.1rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.payment_options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}

.payment_card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 20px;
    color: #333;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.payment_card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s;
}

.payment_card:hover::before {
    left: 100%;
}

.payment_card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    border-color: #667eea;
}

.rial_payment:hover {
    border-color: #28a745;
}

.crypto_payment:hover {
    border-color: #f39c12;
}

.payment_icon {
    text-align: center;
    margin-bottom: 20px;
}

.payment_icon i {
    font-size: 3rem;
    color: #667eea;
    transition: all 0.3s ease;
}

.rial_payment .payment_icon i {
    color: #28a745;
}

.crypto_payment .payment_icon i {
    color: #f39c12;
}

.payment_card:hover .payment_icon i {
    transform: scale(1.1) rotate(5deg);
}

.payment_content h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    font-weight: 600;
    text-align: center;
}

.payment_content p {
    text-align: center;
    margin-bottom: 20px;
    color: #666;
    line-height: 1.5;
}

.payment_features {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
}

.payment_features li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.payment_features i {
    color: #28a745;
    margin-left: 10px;
    font-size: 0.9rem;
}

.payment_btn {
    display: block;
    width: 100%;
    padding: 15px 20px;
    text-align: center;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.rial_btn {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: #fff;
}

.crypto_btn {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: #fff;
}

.payment_btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.payment_btn i {
    margin-right: 10px;
    transition: transform 0.3s ease;
}

.payment_btn:hover i {
    transform: translateX(-5px);
}



@media (max-width:651px) {
    .boxlogin {
        width: 100% !important;
        -webkit-width: 100% !important;
    }

    .box_extend {
        padding: 15px;
        margin: 10px;
        width: 95%;
    }

    .extend_header h1 {
        font-size: 1.4rem;
    }

    .extend_header p {
        font-size: 0.9rem;
    }

    .payment_options {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-bottom: 20px;
    }

    .payment_card {
        padding: 15px;
    }

    .payment_icon i {
        font-size: 2rem;
    }

    .payment_content h3 {
        font-size: 1.2rem;
    }

    .payment_btn {
        padding: 12px 15px;
        font-size: 0.9rem;
    }
}

/* AddBot Page Styles - Simple & Modern */

/* Page Header */

/* Form Container - consolidated with main form styles above */

/* Error Alert */
.error-alert {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #721c24;
}

.error-alert i {
    font-size: 18px;
    margin-top: 2px;
}

.error-alert h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
}

.error-alert ul {
    margin: 0;
    padding-right: 20px;
}

.error-alert li {
    margin-bottom: 4px;
}

/* Form Grid */

.required {
    color: #dc3545;
    font-weight: 600;
}

.form-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: white;
    box-sizing: border-box;
}

.form-input:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Form Actions */
.form-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
    margin-top: 32px;
}

/* Help Section */

/* Duplicate dashboard-container removed - consolidated above */

.payment-container {
    background: white;
    border-radius: var(--border-radius);
    padding: 3rem;
    box-shadow: var(--shadow-md);
    margin: 2rem auto;
    border: 1px solid var(--gray-200);
    text-align: center;
    max-width: 700px;
    transition: var(--transition);
}

.payment-container:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--gray-300);
}

.payment-image {
    width: 200px;
    height: 200px;
    margin: 0 auto 2rem;
    display: block;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.payment-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--gray-800);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.payment-description {
    color: var(--gray-600);
    margin-bottom: 2rem;
    line-height: 1.8;
    font-size: 1rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.code-container {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: var(--warning-color);
    padding: 1.5rem;
    border-radius: 12px;
    margin: 2rem 0;
    border: 2px solid #fbbf24;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.code-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #f59e0b, #d97706, #f59e0b);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.code-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.code-value {
    background: rgba(255, 255, 255, 0.8);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--gray-800);
    border: 1px solid rgba(0, 0, 0, 0.1);
    letter-spacing: 1px;
    user-select: all;
    cursor: pointer;
    transition: var(--transition);
}

.code-value:hover {
    background: white;
    transform: scale(1.05);
    box-shadow: var(--shadow-sm);
}

.contact-container {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: var(--success-color);
    padding: 2rem;
    border-radius: 12px;
    margin: 2rem 0;
    border: 2px solid #10b981;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.contact-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.telegram-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #0088cc;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.telegram-link:hover {
    background: #006ba3;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.steps-container {
    background: var(--gray-50);
    border-radius: var(--border-radius);
    padding: 2rem;
    margin-top: 2rem;
    border: 1px solid var(--gray-200);
}

.steps-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 1.5rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.steps-list {
    list-style: none;
    padding: 0;
}

.step-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    transition: var(--transition);
}

.step-item:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--primary-color);
}

.step-number {
    background: var(--primary-color);
    color: white;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.step-text {
    color: var(--gray-700);
    line-height: 1.6;
    font-size: 0.875rem;
}

.icon {
    font-size: 1.125rem;
}

/* Access Denied Styles */
.access_denied {
    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
    border: none;
    color: white;
}

.denied_header {
    text-align: center;
    margin-bottom: 30px;
}

.denied_header h1 {
    color: white;
    font-size: 2rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.denied_header p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    margin-bottom: 0;
}

.denied_content {
    margin-top: 30px;
}

.denied_card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    color: #333;
}

.denied_info {
    margin-bottom: 30px;
}

.denied_info i {
    color: #ff6b6b;
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.denied_info h3 {
    color: #333;
    font-size: 1.3rem;
    margin-bottom: 20px;
    font-weight: 600;
}

.denied_reasons {
    list-style: none;
    padding: 0;
    margin: 0;
}

.denied_reasons li {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    border-right: 4px solid #ff6b6b;
}

.denied_reasons li i {
    color: #ff6b6b;
    margin-left: 12px;
    font-size: 1rem;
    width: 20px;
}

.denied_actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.denied_btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.denied_btn i {
    margin-left: 8px;
    font-size: 1rem;
}

.primary_btn {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
}

.primary_btn:hover {
    background: linear-gradient(135deg, #0056b3, #004085);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
    color: white;
    text-decoration: none;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* Animations */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes gradientRotate {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes robotPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

@keyframes logoFloat {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }
}

@keyframes textGlow {
    0% {
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    }

    100% {
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.8), 0 0 40px rgba(255, 255, 255, 0.3);
    }
}

@keyframes progressShine {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes waveAnimation {

    0%,
    100% {
        transform: scaleY(0.5);
    }

    50% {
        transform: scaleY(1.5);
    }
}

/* Loading Screen Styles End */

/* Alert Messages Styles consolidated above */

@keyframes slideInUp {
    from {
        transform: translateY(100%) scale(0.8);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes slideOutDown {
    from {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    to {
        transform: translateY(100%) scale(0.8);
        opacity: 0;
    }
}

.page-container {
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
    direction: rtl;
}

/* ===== USER MANAGER STYLES ===== */

.manage-container {
    max-width: 1400px;
    margin: 0 auto;
    direction: rtl;
}

.table-container {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.table-wrapper {
    overflow-x: auto;
}

.page-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.page-table thead {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.page-table th {
    padding: 18px 15px;
    text-align: right;
    font-weight: 600;
    color: #334155;
    border-bottom: 2px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.page-table th:hover {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
}

.page-table th i {
    margin-right: 8px;
    opacity: 0.6;
    font-size: 12px;
}

.page-table tbody tr {
    transition: all 0.3s ease;
    border-bottom: 1px solid #f1f5f9;
}

.page-table tbody tr:hover {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.page-table td {
    padding: 15px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
    word-break: break-all;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.username {
    color: #667eea;
    font-weight: 500;
}

.balance {
    direction: ltr;
    text-align: center;
}

.action-buttons {
    display: flex;
    gap: 8px;
}

.btn-action {
    width: 35px;
    height: 35px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 14px;
}

.btn-view {
    background: #e0f2fe;
    color: #0369a1;
}

.btn-view:hover {
    background: #0369a1;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(3, 105, 161, 0.3);
}

.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-page {
    padding: 10px 15px;
    border: 1px solid #e2e8f0;
    background: white;
    color: #64748b;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.btn-page:hover:not(:disabled) {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

.btn-page:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-numbers {
    display: flex;
    gap: 5px;
}

.page-number {
    width: 40px;
    height: 40px;
    border: 1px solid #e2e8f0;
    background: white;
    color: #64748b;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 14px;
}

.page-number:hover {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

.page-number.active {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

@media (max-width: 1200px) {
    .page-container {
        padding: 15px;
    }

    .content-area {
        padding: 0;
    }

    .manage-container {
        margin-top: 40px;
    }

    .manage-container .content {
        flex-direction: column;
    }

    .box_state_item {
        flex: 1 1 calc(50% - 10px) !important;
    }

    .manage-container .info_right {
        width: 100% !important;
        margin-bottom: 20px;
    }

    .manage-container .info_left {
        width: 100% !important;
    }
}

.search-bar {
    padding: 20px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: right;
    align-items: center;
    gap: 10px;
}

.search-input {
    width: 90%;
    background: #f6f6f6;
    border: 0;

}

.form-control button {
    all: unset;
    border: 2px solid #d6d6d6;
    padding: 10px 25px;
}

.form-control {
    display: flex !important;
    justify-content: center;
    width: 100%;
    border-radius: 5px;
    font-size: 14px;
    gap: 10px;
    color: #334155;
}

.form-control .search-input {
    border: 0;
}

.form-control .search-input:focus {
    outline: 0;
    border: 0;
    box-shadow: none;
}

.manage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    margin-top: 32px;
    padding: 20px;
}

.manage-header a {
    color: #2563eb;
    text-decoration: none;
    background-color: #0056b3;
    color: #fff;
    padding: 10px;
    border-radius: 6px;
}

.manage-header .back-page {
    transition: all 0.3s ease;
}

.manage-header .back-page:hover {
    transform: translateY(-2px);

}

.manage-container .content {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background: #f1f5f9;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-top: 20px;
}

.manage-container .info_right {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: start;
    width: 24.333%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    background: white;
    padding: 20px;
}

.manage-container .info_left {
    text-align: right;
    width: 75%;
}

.manage-container .avatar {
    font-size: 25px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #000000 100%);
    margin-bottom: 10px;
    color: white;
}

.info_right .username {
    font-size: 20px;
    font-weight: 600;
    margin-top: 10px;
    color: #1e293b;
}

.info_right .user_id_info {
    font-weight: normal;
    color: #969aa0;
}

.info_right .status_user {
    margin-top: 10px;
    border-radius: 6px;
}

.info_right .status_user.active {
    background: #dcfce7;
    color: #166534;
    padding: 5px 10px;
    display: inline-block;
    font-weight: 600;
}

.unverify {
    background: #fcf6dc;
    color: #655916;
    padding: 5px 10px;
    display: inline-block;
    font-weight: 600;
}

.info_right .status_user.inactive {
    background: #fef2f2;
    color: #991b1b;
    padding: 5px 10px;
    display: inline-block;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.line-space {
    margin-top: 20px;
    width: 60%;
    margin-right: auto;
    margin-left: auto;
    border: 2px solid #e2e8f0;
}

.btn_block {
    background-color: #dc3545;
    color: #fff;
    padding: 5px 5px;
    border-radius: 5px;
    cursor: pointer;
}

.btn_unban {
    margin-top: 10px;
    color: #fff;
    padding: 5px 5px;
    border-radius: 5px;
    cursor: pointer;
}

.btn_verify {
    color: #fff;
    padding: 5px 5px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.box_state {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.info_left .header {
    display: flex;
    align-items: center;
}

.info_left .header i {
    margin-left: 10px;
}

.boxs_state {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.box_state_item {
    flex: 1;
    text-align: center;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-top: 2px solid #667eea;
    transition: all 0.3s ease;

}

.box_state_item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.box_state_item .value_box_state_item {
    font-size: 24px;
    font-weight: 600;
    color: #1e293b;
    margin-top: 10px;
}

.box_state_item .title_box_state_item {
    color: #64748b;
    font-weight: normal;
    font-size: 15px;
    margin-top: 5px;
}

.info_right .Balance {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}

.info_right .Balance a {
    margin: 0 1px;
}

.primary {
    background-color: var(--primary-color);
    color: #fff;
    transition: all 0.3s ease;
}

.primary:hover {
    background-color: #275fbb;
    transform: translateY(-2px);
}

.Success {
    background-color: var(--success-color);
    color: #fff;
    transition: all 0.3s ease;
}

.Success:hover {
    background-color: #1a8f45;
    transform: translateY(-2px);
}

.Danger {
    background-color: var(--danger-color);
    color: #fff;
    transition: all 0.3s ease;
}

.Danger:hover {
    background-color: #c63e3e;
    transform: translateY(-2px);
}

.Warning {
    background-color: #F97316;
    color: #fff;
    transition: all 0.3s ease;
}

.Warning:hover {
    background-color: #b95916;
    transform: translateY(-2px);
}

.Secondary {
    background-color: #6B7280;
    color: #fff;
    transition: all 0.3s ease;
}

.btn_balance {
    width: 200px;
    padding: 5px 5px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn_sendmessage {
    margin: 20px 0 10px 0;
    padding: 5px 5px;
    border-radius: 5px;
    cursor: pointer;
}

.btn_add_order {
    margin: 10px 0 0 0;
    padding: 5px 5px;
    border-radius: 5px;
    cursor: pointer;
}

.manage-container .tabs {
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.manage-container .tabs .menu_tabs button {
    all: unset;
    padding: 10px 20px;
    cursor: pointer;
    background-color: #a7bbcd17;
    border-radius: 8px;
    color: #000;
    transition: all 0.3s ease;
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: bold;
}

.manage-container .tabs .menu_tabs button:hover {
    background-color: #0088ff4a;
    transform: scale(0.99);
}

.manage-container .tabs .menu_tabs button.active {
    background-color: #0088ff4a;
    color: #0056b3;
    border-bottom-color: #007bff;
}

.tabcontent {
    padding: 13px;
    opacity: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    display: none;
    transition: opacity 0.5s ease-in-out;

}

.tabcontent.active {
    opacity: 1;
    height: auto;
    visibility: visible;
    display: block;
}

.tabs .detail {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.tabs .info_data {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-radius: 6px;
    background-color: #e2e2e24a;
    margin: 0 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 5px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    direction: rtl;
}

.tabs .info_data:hover {
    background-color: #e2e2e270;
    transform: translateY(-2px);
}

.info_data h3 {
    color: #334155;
    font-weight: 600;
    font-size: 16px;
}

.tabs .menu_tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    white-space: nowrap;
}

/* ============================================================
   MODALS — refined, animated, theme-aware (used across panel)
   ============================================================ */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(7px) saturate(118%);
    backdrop-filter: blur(7px) saturate(118%);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 22px;
    opacity: 0;
    transition: opacity .32s cubic-bezier(.4, 0, .2, 1);
}

.modal.show {
    opacity: 1;
}

body.modal-open {
    overflow: hidden;
}

.modal-box {
    position: relative;
    background: var(--card-bg-dark, var(--surface, #fff));
    color: var(--text-color-dark, var(--text, #1f2937));
    padding: 26px 24px 22px;
    border-radius: 18px;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 44px);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow:
        inset 0 4px 0 0 var(--primary-color, #2563eb),
        0 24px 60px -18px rgba(15, 23, 42, .45),
        0 8px 22px -12px rgba(15, 23, 42, .30),
        0 0 0 1px rgba(15, 23, 42, .05);
    transform: scale(.98);
    opacity: 0;
    transition:
        transform .34s cubic-bezier(.22, 1, .36, 1),
        opacity .26s ease;
    will-change: transform, opacity;
}

.modal.show .modal-box {
    transform: scale(1);
    opacity: 1;
}

.modal-box p {
    margin-bottom: 14px;
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--text-secondary-dark, var(--text-secondary, #64748b));
}

.modal-box p+p {
    margin-top: -8px;
}

.modal-box h3 {
    margin-bottom: 6px;
    padding-bottom: 14px;
    padding-left: 36px;
    /* room for close button (RTL: visual right) */
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--text-color-dark, var(--text, #1f2937));
    border-bottom: 1px solid var(--border-color-dark, var(--border, #e6e9f0));
}

.modal-box form {
    margin-top: 16px;
}

/* field labels above inputs */
.modal-box .field-label {
    display: block;
    margin: 0 0 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-color-dark, var(--text, #1f2937));
}

/* label + input grouped as one block (works standalone and in rows) */
.modal-box .field {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.modal-box .field>input,
.modal-box .field>select,
.modal-box .field>textarea {
    margin-bottom: 0;
}

/* two-column rows: each .field shares the row evenly */
.modal-box .form_control,
.modal-box .form-control {
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.modal-box .form_control>.field,
.modal-box .form-control>.field {
    flex: 1;
    margin-bottom: 0;
    min-width: 0;
}

.modal-box input,
.modal-box select,
.modal-box textarea {
    width: 100%;
    padding: 11px 13px;
    margin-bottom: 16px;
    border: 1.5px solid var(--input-border-dark, var(--border, #d1d5db));
    border-radius: 11px;
    font-size: 14px;
    font-family: inherit;
    background: var(--input-bg-dark, var(--surface, #fff));
    color: var(--text-color-dark, var(--text, #1f2937));
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.modal-box textarea {
    min-height: 96px;
    resize: vertical;
    line-height: 1.7;
}

/* custom dropdown arrow so selects don't look like raw OS controls */
.modal-box select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    padding-left: 38px;
    cursor: pointer;
}

.modal-box input::placeholder,
.modal-box textarea::placeholder {
    color: var(--text-secondary-dark, var(--text-secondary, #94a3b8));
    opacity: .75;
}

.modal-box input:focus,
.modal-box select:focus,
.modal-box textarea:focus {
    border-color: var(--primary-color, #2563eb);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color, #2563eb) 16%, transparent);
}

.modal-box input[type="file"] {
    padding: 10px 13px;
    cursor: pointer;
    color: var(--text-secondary-dark, var(--text-secondary, #64748b));
}

.modal-box .btns {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 18px;
}

.modal-box button,
.modal-box .btns a,
.modal-box a.cancel,
.modal-box a.confirm,
.modal-box a.Success {
    padding: 11px 20px;
    border: none;
    border-radius: 11px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, filter .2s ease;
}

.modal-box button:active,
.modal-box .btns a:active,
.modal-box a.cancel:active {
    transform: translateY(1px);
}

.modal-box button.confirm {
    background: linear-gradient(135deg,
            var(--primary-color, #16a34a),
            color-mix(in srgb, var(--primary-color, #16a34a) 82%, #000 8%));
    color: #fff;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--primary-color, #16a34a) 70%, transparent);
}

.modal-box button.confirm:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--primary-color, #16a34a) 75%, transparent);
}

.modal-box .cancel,
.modal-box button.cancel {
    background: var(--surface-2, #e5e7eb);
    color: var(--text, #374151);
    border: 1px solid var(--border, #e6e9f0);
}

.modal-box .cancel:hover,
.modal-box button.cancel:hover {
    background: var(--hover, #d1d5db);
}

/* injected close (×) button */
.modal-close {
    position: absolute;
    top: 16px;
    left: 18px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 9px;
    background: var(--surface-2, #f1f5f9);
    color: var(--text-secondary, #64748b);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background .2s ease, color .2s ease, transform .2s ease;
    z-index: 2;
}

.modal-close:hover {
    background: var(--danger, #dc2626);
    color: #fff;
    transform: rotate(90deg);
}

/* tidy internal scrollbar for long modals */
.modal-box::-webkit-scrollbar {
    width: 9px;
}

.modal-box::-webkit-scrollbar-thumb {
    background: var(--border, #cbd5e1);
    border-radius: 9px;
    border: 2px solid var(--surface, #fff);
}

.modal-box::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary, #94a3b8);
}

@media (max-width: 600px) {
    .modal-box {
        padding: 22px 18px 18px;
        border-radius: 16px;
    }

    .modal-box .btns {
        flex-direction: column-reverse;
    }

    .modal-box .btns button,
    .modal-box .btns a {
        width: 100%;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {

    .modal,
    .modal-box,
    .modal.show .modal-box>* {
        transition-duration: .01ms !important;
        animation: none !important;
    }

    .modal-box {
        transform: none;
    }
}

.tabs .btn_actions {
    margin-top: 40px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tabs .btn_actions a {
    padding: 10px 10px;
    border-radius: 6px;
    font-size: 13px;
    flex: 1 1 20%;
}

textarea {
    width: 100%;
    min-height: 60px;
    padding: 12px;
    font-size: 1rem;
    border: none;
    border-radius: 8px;
    resize: none;
    overflow: auto;
    line-height: 1.5;
    background: #eeeeee;
    max-height: 300px;
}

textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}


@media (max-width: 480px) {
    .action-buttons {
        align-self: flex-end;
    }

    .page-table th:nth-child(4),
    .page-table td:nth-child(4),
    .page-table th:nth-child(5),
    .page-table td:nth-child(5) {
        display: none;
    }

    .sidebar {
        width: 100vw;
    }

    .content-area {
        padding: 10px;
    }

    .menu-link {
        padding: 14px 20px;
        font-size: 15px;
    }

    .submenu-item {
        padding: 6px 35px;
        font-size: 13px;
    }
}

.click {
    cursor: pointer;
}


.mobile-menu-toggle:hover {
    background: linear-gradient(135deg, #1a252f 0%, #2c3e50 100%);
    box-shadow: 0 12px 35px rgba(44, 62, 80, 0.4), 0 5px 15px rgba(0, 0, 0, 0.2);
}

.mobile-menu-toggle:active {
    background: linear-gradient(135deg, #16202b 0%, #1a252f 100%);
    box-shadow: 0 4px 15px rgba(44, 62, 80, 0.5), inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.affiliates_modal {
    display: flex;
    flex-direction: column;
}

.affiliates_not_exits {
    background-color: #eaf5ff;
    border-radius: 10px;
    text-align: center;
    padding: 20px;
}

.list_affiliates {
    max-height: 360px;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 16px;
    padding: 4px;
}

.list_affiliates a {
    flex: 1 1 22%;
    text-align: center;
    padding: 9px 6px;
    border-radius: 10px;
    font-weight: 700;
    background: var(--surface-2, #f1f5f9);
    border: 1px solid var(--border, #e6e9f0);
    color: var(--primary-color, #2563eb);
    transition: background .2s ease, transform .15s ease, border-color .2s ease;
}

.list_affiliates a:hover {
    background: var(--hover, #eef2f8);
    border-color: var(--primary-color, #2563eb);
    transform: translateY(-1px);
}

.manage-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.avatar {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    flex-shrink: 0;

}

.status {
    background: #dcfce7;
    color: #166534;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.status.inactive {
    background: #fef2f2;
    color: #991b1b;
}

.actions {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}

.actions button {
    flex: 1;
    min-height: 44px;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 15px;
}

.actions button:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

.actions button:active {
    transform: translateY(0);
}

@media (min-width: 768px) {

    .manage-header {
        margin-bottom: 16px;
    }

    .actions {
        max-width: 200px;
        margin-right: auto;
    }
}

.agent_bot {
    padding: 20px;
    background-color: #00000008;
    box-shadow: 0 0 4px 1px #6e6e6e33;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    font-size: 15px;
    margin-top: 20px;
}

.agent_bot .header {
    margin-bottom: 20px;
    font-weight: normal;
    color: #00000096;
}

.agent_bot .data span {
    background-color: #f3f3f396;
    padding: 10px;
    margin-right: 20px;
    border-radius: 6px;
    gap: 10px;
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
    margin: 10px 0;
}

.agent_bot .data {
    margin: 11px 0;
}

.custom-multiselect {
    width: 300px;
    position: relative;
}

.select_panel_hide {
    display: flex;
    align-items: center;
    margin-top: 20px;
    gap: 10px;
    width: 100%;
}

.select_panel_hide .selected-items {
    width: 100%;
}

.custom-multiselect select {
    display: none;
}

.custom-multiselect select {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 14px;
    outline: none;
    height: 150px;
}

.custom-multiselect select option {
    padding: 6px;
}

.selected-items {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 6px;
    min-height: 40px;
    cursor: pointer;
    background-color: #fff;
    margin-bottom: 15px;
}

.selected-items .item {
    background-color: #3b82f6;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
}

.selected-items .item span {
    cursor: pointer;
    font-weight: bold;
}

.option-list {
    position: absolute;
    left: 0;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 6px;
    max-height: 150px;
    overflow-y: auto;
    background-color: #fff;
    z-index: 100;
    display: none;
}

.option-list.top {
    bottom: 50px;
}

.option-list.bottom {
    top: 50px;
}

.option-list div {
    padding: 8px;
    cursor: pointer;
}

.option-list div:hover {
    background-color: #f0f0f0;
}

.btn-admin {
    padding: 10px;
    border-radius: 6px;
}

.theme-toggle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;
    background: #e5e7eb;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background 0.4s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
}

.theme-toggle:hover {
    transform: scale(1.1);
}

.theme-toggle.dark {
    background: #1f2933;
}

.icon {
    position: absolute;
    font-size: 28px;
    transition: transform 0.5s ease, opacity 0.4s ease, color 0.4s ease;
    color: #111;
}

.sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.moon {
    opacity: 0;
    transform: rotate(-120deg) scale(0.3);
}

.theme-toggle.dark .sun {
    opacity: 0;
    transform: rotate(120deg) scale(0.3);
}

.theme-toggle.dark .moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.tabcontent .subscriptions code {
    padding: 20px;
    background-color: #c6c6c640;
    color: #000;
    font-weight: bold;
    width: 100%;
    border-radius: 6px;
    margin-top: 10px;
    word-break: break-all;
}

.tabcontent .subscriptions {
    display: flex;
    flex-direction: column;
}

.tabcontent .box_config {
    display: flex;
    gap: 50px;
    flex-direction: column;
}

.tabcontent .configs code {
    padding: 20px;
    background-color: #c6c6c640;
    color: #000;
    width: 100%;
    border-radius: 6px;
    margin-top: 10px;
    word-break: break-all
}

.tabcontent .configs {
    display: flex;
    flex-direction: column;
}

.btn_remove_service {
    padding: 5px 5px;
    cursor: pointer;
    margin: 3px;
    border-radius: 5px;
}

.empty-data {
    padding: 20px;
    text-align: center;
}

.page-container .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-container .header button {
    padding: 10px 15px;
    width: auto;
    margin: 0;
    border-radius: 5px;
}

.list-notices {
    display: grid;
    gap: 0.75rem;
    margin: 1.25rem 0;
}

.list-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    border-radius: 12px;
    border: 2px solid transparent;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.list-notice--danger {
    background: #fff1f2;
    border-color: #ef4444;
    color: #7f1d1d;
}

.list-notice--warning {
    background: #fffbeb;
    border-color: #f59e0b;
    color: #78350f;
}

.list-notice__badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.35rem 0.7rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
    background: #ef4444;
}

.list-notice--warning .list-notice__badge {
    background: #d97706;
}

.list-notice__text {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.85;
    font-weight: 800;
}

@media (max-width: 640px) {
    .list-notice {
        flex-direction: column;
        gap: 0.55rem;
    }

    .list-notice__text {
        font-size: 0.98rem;
    }
}

.form_control {
    display: flex;
    gap: 10px;
    align-items: center;
}

.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    color: #000;
}

.checkbox-wrapper input[type="checkbox"] {
    display: none;
}

.custom-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid #4CAF50;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    transition: all 0.3s ease;
}

.checkbox-wrapper input[type="checkbox"]:checked+.custom-checkbox {
    background-color: #4CAF50;
    border-color: #4CAF50;
}

.custom-checkbox::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    opacity: 0;
    transform: rotate(45deg) scale(0.8);
    transition: all 0.2s ease;
}

.checkbox-wrapper input[type="checkbox"]:checked+.custom-checkbox::after {
    opacity: 1;
}

.box_details {
    padding: 20px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    background-color: #007bff30;
    border-radius: 10px;
}

#hide_panel .btns {
    display: flex;
    flex-direction: row-reverse;
    justify-content: left;
    gap: 10px;

}

#hide_panel button,
#hide_panel a {
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: 0.3s;
}

#hide_panel button.confirm {
    background: #16a34a;
    color: white;
}

#hide_panel button.confirm:hover {
    background: #15803d;
}

#hide_panel button.cancel {
    background: #e5e7eb;
}

.lable_panel {
    width: 30%;
}

.info_data label {
    display: block;
}

.info_data label>input[type=checkbox] {
    display: none;
}

.info_data .check-1 {
    position: fixed;
    top: 50%;
    left: 3%;
    transform: translateX(-50%) translateY(-50%);
    width: 50px;
    height: 30px;
    border-radius: 50px;
    position: relative;
}

.info_data .check-1 .inner {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    border: 2px solid #e8e8e8;
    background: #f9f9f9;
    transition: all .2s ease;
}

.info_data .check-1 .bullet {
    position: relative;
    width: 25px;
    height: 25px;
    background: #eee;
    border-radius: 50%;
    transition: all .3s ease;
    top: 2px;
    right: 2px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, .15);
}

.info_data .check-1 input:checked~.inner {
    border: 15px solid #2ecc71;
    transition: all .2s ease;
}

.info_data .check-1 input:checked~.bullet {
    right: 23px;
    transition: all .3s ease;
    animation: .2s bullet;
}

@keyframes bullet {

    0%,
    100% {
        width: 25px;
    }

    40% {
        width: 30px;
    }
}

.input-wrapper-size-3 {
    display: flex;
    margin-top: 60px;
    gap: 20px;
    justify-content: right;
    align-items: center;
    flex-wrap: wrap;
}

.input-wrapper-size-3 input {
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
    transition: border-color 0.3s ease;
}

.warp-flex {
    flex: 1 1 32%;
}

.input_option {
    display: flex;
    flex-direction: row-reverse;
    justify-content: left;
    gap: 10px;

}

.input_option button,
.input_option a {
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: 0.3s;
}

.input_option button.confirm {
    background: #16a34a;
    color: white;
}

.input_option button.confirm:hover {
    background: #15803d;
}

.input_option button.cancel {
    background: #e5e7eb;
}

.menu-top {
    display: flex;
    justify-content: space-between;
    margin-right: auto;
    align-items: center;
    background-color: transparent;
    backdrop-filter: blur(10px);
    padding: 15px 10px;
    position: sticky;
    top: 0;
    z-index: 100;
    width: 82%;
}

.menu-top .avatar {
    margin: 0 10px;
}

.menu-top .left {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.workspace-switcher {
    position: relative;
    width: 284px;
    max-width: 100%;
    min-width: 0;
}

.ws-trigger {
    background: #fff;
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    min-width: 0;
    overflow: hidden;
    gap: 10px;
}

.ws-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.ws-name {
    font-weight: 600;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
    display: block;
}

.ws-badge {
    background: #eef1f4;
    color: #333;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
}

.ws-arrow {
    font-size: 14px;
    transition: transform 0.2s ease;
}

.workspace-switcher.open .ws-arrow {
    transform: rotate(180deg);
}

.ws-menu {
    list-style: none;
    margin: 8px 0 0;
    padding: 6px;
    position: absolute;
    width: 100%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    display: none;
    z-index: 1000;
}

.workspace-switcher.open .ws-menu {
    display: block;
}

.ws-item {
    padding: 8px;
    border-radius: 10px;
    cursor: pointer;
}

.ws-item:hover {
    background: #f3f5f7;
}


.sort {
    position: relative;
    display: inline-block;
    direction: rtl;
    font-family: inherit;
}

.sort__toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .9rem;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .08);
}

.sort__menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 220px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .14);
    padding: 12px 6px;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-8px) scale(.98);
    pointer-events: none;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

.sort.is-open .sort__menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
}

.sort__title {
    margin: 0 0 10px;
    font-size: 14px;
    text-align: right;
}

.sort__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

.sort__item {
    width: 100%;
    text-align: right;
    padding: 10px 4px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    transition: background-color .15s ease;
}

.sort__item:hover {
    background: #f3f5f7;
}

.sort__toggle.icon-only {
    width: 42px;
    height: 42px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
}

.sort__toggle.icon-only:hover {
    background-color: #f3f5f7;
}

.sort__toggle.icon-only:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.search_bar__input {
    width: 40%;
}

.icon_svg {
    margin-left: 15px;
}

.box_ticket {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 28px;
    align-items: flex-start;
    padding: 25px;
}

.box_ticket .ticket_meta,
.box_ticket .info_left {
    width: 100%;
}

.ticket_meta {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 280px;
    max-width: 320px;
}

.ticket_meta_header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 18px 20px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(248, 250, 252, 0.95));
    border: 1px solid rgba(37, 99, 235, 0.16);
}

.ticket_meta_header h3 {
    margin: 0 0 6px 0;
    font-size: 18px;
    color: #0f172a;
}

.ticket_meta_subtitle {
    margin: 0;
    color: #475569;
    font-size: 13px;
    line-height: 1.5;
}

.ticket_meta_status {
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.16);
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.ticket_meta_cards {
    display: grid;
    gap: 12px;
}

.ticket_meta_card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    border-radius: 20px;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.26);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.ticket_meta_card p {
    margin: 0;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
}

.ticket_meta_card span {
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    text-align: right;
}

.ticket_meta_card:nth-child(odd) {
    background: #ffffff;
}

.ticket_meta_card:nth-child(even) {
    background: #eff6ff;
}

.box_ticket .ticket_message {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 20px 24px;
    width: 100%;
    background: #7c9cc5;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    margin-bottom: 13px;
}



.box_ticket .ticket_message.admin {
    background: #36575aad;
    border-color: rgba(37, 99, 235, 0.25);
}

.box_ticket .message {
    margin: 0;
    width: 100%;
    padding: 16px 18px;
    border-radius: 20px;
    background: #ffffff;
    color: #0f172a;
    font-size: 15px;
    line-height: 1.8;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.ticket_message .message_content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.message_preview {
    display: inline-flex;
    width: fit-content;
    padding: 4px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.message_preview img {
    display: block;
    width: 120px;
    max-width: 120px;
    height: auto;
    border-radius: 16px;
}

.box_message {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.create_comment {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 24px;
    padding: 30px 32px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.create_comment h2 {
    margin-bottom: 10px;
    font-size: 1.55rem;
    color: #1f2937;
}

.create_comment p {
    margin-bottom: 24px;
    color: #475569;
    line-height: 1.75;
    font-size: 12px;
}

.create_comment form {
    display: grid;
    gap: 18px;
}

.create_comment textarea {
    min-height: 180px;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
    resize: vertical;
}

.create_comment textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.create_comment input[type="file"] {
    width: 100%;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #000;
    cursor: pointer;
}

.create_comment input[type="submit"] {
    width: fit-content;
    padding: 12px 28px;
    border-radius: 999px;
    border: none;
    background: var(--primary-color);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.create_comment input[type="submit"]:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

/* ============================================================
   CLASSIC SIDEBAR MENU + MOBILE  (dark-mode aware)
   Overrides the old neon sidebar; scoped under .sidebar so it
   wins over earlier rules and dark.css without editing them.
   ============================================================ */

/* layout back to sidebar (undo any top-nav remnants) */
.main-container {
    display: flex;
}

/* --- remove shimmer / glow / motion --- */
.sidebar .menu-link::before,
.sidebar .submenu-item::before,
.sidebar .submenu-item::after {
    content: none !important;
}

.sidebar .menu-link,
.sidebar .submenu-item {
    transition: background-color .15s ease, color .15s ease;
    overflow: visible;
    transform: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    letter-spacing: 0;
}

/* --- clean item shape --- */
.sidebar .menu-link {
    margin: 2px 8px;
    padding: 12px 18px;
    border-radius: 8px;
    border-left: none;
    border-right: 3px solid transparent;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    cursor: pointer;
}

.sidebar .menu-link:hover {
    background: rgba(37, 99, 235, 0.10);
    color: var(--primary-color);
}

.sidebar .menu-link.active {
    background: rgba(37, 99, 235, 0.14);
    color: var(--primary-color);
    border-right: 3px solid var(--primary-color);
    font-weight: 700;
}

.sidebar .menu-link.active .icon_svg {
    opacity: 1;
}

/* --- submenu --- */
.sidebar .submenu {
    border-left: none;
    margin: 2px 8px 2px 0;
    transform: none;
    backdrop-filter: none;
}

.sidebar .submenu.active {
    border-left: none;
}

.sidebar .submenu-item {
    padding: 10px 18px 10px 42px;
    border-radius: 8px;
    margin: 2px 6px;
    font-weight: 500;
}

.sidebar .submenu-item:hover {
    background: rgba(37, 99, 235, 0.10);
    color: var(--primary-color);
}

.sidebar .submenu-item.active {
    background: rgba(37, 99, 235, 0.14);
    color: var(--primary-color);
    font-weight: 700;
}

/* --- arrow: plain rotating chevron --- */
.sidebar .submenu-arrow {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    width: auto;
    height: auto;
    font-size: 12px;
    opacity: .55;
    transform: rotate(0deg);
    transition: transform .2s ease;
}

.sidebar .menu-item:has(.submenu.active) .submenu-arrow,
.sidebar .submenu-toggle.active .submenu-arrow {
    transform: rotate(180deg) !important;
    color: var(--primary-color);
    background: none !important;
    box-shadow: none !important;
    opacity: 1;
}

.sidebar .menu-link:hover .submenu-arrow {
    transform: rotate(180deg);
    background: none !important;
    box-shadow: none !important;
}

/* --- a11y + scrollbar (neutral so it shows in dark mode too) --- */
.sidebar .submenu-toggle {
    cursor: pointer;
    user-select: none;
}

.sidebar .menu-link:focus-visible,
.sidebar .submenu-item:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 8px;
}

.sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(127, 127, 127, .45) transparent;
}

.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(127, 127, 127, .45);
    border-radius: 3px;
}

/* ============================================================
   CORPORATE GROUPED SIDEBAR — section labels between groups
   ============================================================ */
.sidebar .menu-section {
    list-style: none;
    margin: 16px 20px 6px;
    padding-top: 13px;
    border-top: 1px solid var(--border-color-dark, var(--border, #e9edf3));
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
    color: var(--text-muted, #94a3b8);
    user-select: none;
}
.sidebar .menu-section:first-child {
    margin-top: 6px;
    padding-top: 0;
    border-top: none;
}
.sidebar .menu-section span {
    display: inline-block;
    opacity: .9;
}

/* collapsed sidebar: labels become a plain divider line */
@media (min-width: 769px) {
    html.sidebar-collapsed .sidebar .menu-section {
        margin: 8px 16px;
        padding: 0;
        height: 0;
        overflow: hidden;
        border-top: 1px solid var(--border-color-dark, var(--border, #e9edf3));
    }
    html.sidebar-collapsed .sidebar .menu-section span { display: none; }
}

/* ============================================================
   MOBILE: hamburger in the top bar (classic 3-bar icon)
   ============================================================ */

/* desktop: sidebar always visible -> hide the hamburger */
.menu-top .mobile-menu-toggle {
    display: none;
}

@media (max-width: 1024px) {

    /* tidy, theme-correct mobile top bar (transparent like desktop) */
    .menu-top {
        width: 100% !important;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 8px 12px;
        background: transparent;
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(127, 127, 127, .18);
    }

    /* switcher fills free space and TRUNCATES instead of wrapping/overlapping */
    .menu-top .workspace-switcher {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }

    .menu-top .ws-trigger {
        width: 100%;
        min-width: 0;
        padding: 8px 12px;
    }

    .menu-top .ws-left {
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
    }

    .menu-top .ws-name {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .menu-top .left {
        flex: 0 0 auto;
        gap: 4px;
    }

    /* hamburger: classic 3-bar, themed color (visible in light & dark) */
    .menu-top .mobile-menu-toggle {
        position: static;
        transform: none;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 42px;
        height: 42px;
        flex: 0 0 auto;
        background: transparent;
        color: inherit;
        border: 1px solid rgba(127, 127, 127, .35);
        border-radius: 10px;
        box-shadow: none;
        cursor: pointer;
    }

    .mobile-menu-toggle .hamburger-bar {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        transition: transform .25s ease, opacity .2s ease;
    }

    .mobile-menu-toggle[aria-expanded="true"] .hamburger-bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .mobile-menu-toggle[aria-expanded="true"] .hamburger-bar:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle[aria-expanded="true"] .hamburger-bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* drawer ABOVE the dim layer so the menu stays clickable */
    .sidebar {
        width: 86%;
        max-width: 320px;
        transform: translateX(100%);
        transition: transform .3s ease;
        box-shadow: -4px 0 24px rgba(0, 0, 0, .18);
        backdrop-filter: none;
        z-index: 1000;
    }

    .sidebar.active {
        transform: translateX(0);
    }

    /* dim/blur layer must sit BELOW the sidebar (both were 999) */
    .sidebar-overlay {
        z-index: 998;
    }

    .content-area {
        margin-right: 0;
        width: 100%;
        padding-top: 12px;
    }
}

/* ============================================================
   HEADER & MENU POLISH
   (1) cleaner sidebar hover/active  (2) bot switcher on mobile
   (3) logout moved into sidebar footer  (4) theme toggle
   (5) avatar.  All theme-aware via dark.css vars + light fallback.
   ============================================================ */

/* ---------- (1) sidebar items: clean modern hover/active ---------- */
.sidebar .menu-link {
    margin: 2px 10px;
    padding: 11px 14px;
    border-radius: 10px;
    border: 0 !important;
    /* drop the stray accent border */
    gap: 12px;
}

.sidebar .menu-link:hover:not(.active) {
    background: rgba(37, 99, 235, .08);
    color: var(--primary-color);
}

/* leaf / current page = solid filled pill */
.sidebar .menu-link.active {
    background: var(--primary-color);
    color: #fff;
    font-weight: 700;
}

.sidebar .menu-link.active .icon_svg {
    filter: brightness(0) invert(1);
    opacity: 1;
}

.sidebar .menu-link.active .submenu-arrow {
    color: #fff;
    opacity: 1;
}

/* a group whose child is active = subtle (it's a section, not the page) */
.sidebar .submenu-toggle.active {
    background: rgba(37, 99, 235, .10);
    color: var(--primary-color);
    font-weight: 700;
}

.sidebar .submenu-toggle.active .icon_svg {
    filter: none;
}

.sidebar .submenu-toggle.active .submenu-arrow {
    color: var(--primary-color);
}

/* submenu items: sensible RTL indent + filled active */
.sidebar .submenu-item {
    padding: 9px 38px 9px 16px;
    margin: 2px 10px;
    border-radius: 10px;
}

.sidebar .submenu-item:hover:not(.active) {
    background: rgba(37, 99, 235, .08);
    color: var(--primary-color);
}

.sidebar .submenu-item.active {
    background: var(--primary-color);
    color: #fff;
    font-weight: 700;
}

/* ---------- (2) bot switcher (trigger + dropdown), theme-aware ---------- */
.ws-trigger {
    background: var(--card-bg-dark, var(--surface));
    color: inherit;
    border: 1px solid var(--border-color-dark, var(--border));
    box-shadow: none;
    min-width: 0;
    overflow: hidden;
}

.ws-name {
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.ws-badge {
    background: var(--hover-bg-dark, var(--surface-2));
    color: inherit;
    flex-shrink: 0;
}

.ws-menu {
    background: var(--card-bg-dark, var(--surface));
    border: 1px solid var(--border-color-dark, var(--border));
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
    max-height: 320px;
    overflow-y: auto;
    width: 100%;
    min-width: 240px;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
}

.ws-item {
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;
}

.ws-item .ws-left {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
}

.ws-item .ws-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.ws-item:hover {
    background: var(--hover-bg-dark, var(--surface-2));
}

/* on mobile the dropdown spans almost full width so names/badges breathe */
@media (max-width: 1024px) {
    .workspace-switcher .ws-menu {
        position: fixed;
        top: 60px;
        right: 10px;
        left: 10px;
        width: auto;
        min-width: 0;
        max-width: none;
        max-height: 65vh;
    }
}

/* ---------- (3) logout in the sidebar footer ---------- */
.sidebar-footer {
    margin-top: auto;
    padding: 12px 10px;
    border-top: 1px solid var(--border-color-dark, var(--border));
}

.logout-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    color: #e11d48;
    text-decoration: none;
    font-weight: 700;
    transition: background-color .15s ease;
}

.logout-link:hover {
    background: rgba(225, 29, 72, .12);
}

.logout-link .icon_svg {
    width: 20px;
    height: 20px;
    filter: none;
}

/* ---------- (4) theme toggle: neat bordered icon button ---------- */
.theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border-color-dark, rgba(15, 23, 42, .12));
    margin: 0;
    transition: background-color .15s ease;
}

.theme-toggle:hover {
    transform: none;
    background: var(--hover-bg-dark, var(--hover));
}

.theme-toggle.dark {
    background: transparent;
}

.theme-toggle .icon {
    width: 20px;
    height: 20px;
}

/* ---------- (5) avatar: clean ring ---------- */
.menu-top .avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color-dark, rgba(15, 23, 42, .10));
    background: var(--hover-bg-dark, var(--surface-2));
    margin: 0;
}

.menu-top .left {
    gap: 10px;
}

/* ============================================================
   TOP LOADING BAR  (soft progress bar, replaces the old loader)
   ============================================================ */
#top-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 100000;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease .15s;
}

#top-loader.active {
    opacity: 1;
    transition: opacity .12s ease;
}

#top-loader .bar {
    position: absolute;
    top: 0;
    right: 0;
    /* RTL: grow from the right edge */
    height: 100%;
    width: 0;
    background: var(--accent-color, var(--primary-color));
    box-shadow: 0 0 10px rgba(37, 99, 235, .6), 0 0 4px rgba(37, 99, 235, .4);
    border-radius: 2px 0 0 2px;
    transition: width .3s cubic-bezier(.2, .8, .2, 1);
}

/* ============================================================
   TABLE & BUTTON  —  classic, flat (no gradients, no zebra)
   theme-aware (light fallback + dark vars); scoped so it wins
   over earlier rules and dark.css without editing them.
   ============================================================ */

/* card around the table */
.table-container {
    background: var(--card-bg-dark, var(--surface));
    border: 1px solid var(--border-color-dark, var(--border));
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .07);
    overflow: hidden;
}

/* table */
.table-container .page-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

/* classic header: solid subtle bg + a clear accent divider */
.table-container .page-table thead {
    background: var(--hover-bg-dark, var(--surface-2));
}

.table-container .page-table th {
    padding: 14px 16px;
    text-align: right;
    font-weight: 700;
    font-size: 13px;
    color: var(--text-color-dark, var(--text));
    border-bottom: 2px solid var(--primary-color);
    cursor: default;
    transition: none;
    white-space: nowrap;
}

.table-container .page-table th:hover {
    background: var(--hover-bg-dark, var(--surface-2));
    color: var(--text-color-dark, var(--text));
}

/* rows: plain horizontal dividers, NO zebra, gentle hover */
.table-container .page-table tbody tr {
    background: transparent;
    border-bottom: 1px solid var(--border-color-dark, var(--border));
    transition: background-color .15s ease;
}

.table-container .page-table tbody tr:hover {
    background: var(--hover-bg-dark, var(--surface-2));
}

.table-container .page-table tbody tr:last-child {
    border-bottom: 0;
}

.table-container .page-table td {
    padding: 13px 16px;
    vertical-align: middle;
    border-bottom: 0;
    color: inherit;
    word-break: break-word;
}

/* (old table action-button styles removed; see TABLE ACTION BUTTONS block at end of file) */

/* ---- mobile cards ---- */
.card-list .card {
    background: var(--card-bg-dark, var(--surface));
    border: 1px solid var(--border-color-dark, var(--border));
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .07);
    padding: 16px;
    margin-bottom: 12px;
}

.card-list .card p {
    margin: 6px 0;
    color: inherit;
}

.card-list .card p strong {
    color: var(--text-secondary-dark, var(--text-secondary));
    font-weight: 700;
}

/* ---- empty state + pagination footer ---- */
.empty-data {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-secondary-dark, var(--text-secondary));
    font-weight: 600;
}

.pagination-container {
    background: var(--card-bg-dark, var(--surface));
    border-top: 1px solid var(--border-color-dark, var(--border));
    border-radius: 0 0 12px 12px;
}

/* ============================================================
   TICKET PAGE (report/ticket.html) — modern, clean, theme-aware
   Uses the tk- namespace; dark values via dark.css vars + light
   fallback so it works in both themes with no .dark class.
   ============================================================ */

/* header */

.tk-type.is-idea {
    background: rgba(37, 99, 235, .12);
    color: #2563eb;
}

.tk-type.is-problem {
    background: rgba(220, 38, 38, .12);
    color: #dc2626;
}

/* layout */

/* conversation column */

/* composer */

.tk-file-name.has-file {
    color: var(--primary-color);
    font-weight: 700;
}

.tk-send:active {
    transform: scale(.98);
}

/* info sidebar */

/* responsive */
@media (max-width: 1024px) {

    /* info card on top on mobile */
}

/* ============================================================
   TICKET / IDEA PAGE  —  modern conversation UI
   Flat (no gradients, no zebra), theme-aware. Prefixed with
   `html .box_ticket` so it cleanly wins over dark.css.
   ============================================================ */

html .box_ticket {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 20px;
    padding: 20px;
    align-items: start;
}

/* ---- meta sidebar ---- */
html .box_ticket .ticket_meta {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    max-width: none;
}

html .box_ticket .ticket_meta_header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 18px;
    border-radius: 14px;
    background: var(--card-bg-dark, var(--surface));
    border: 1px solid var(--border-color-dark, var(--border));
}

html .box_ticket .ticket_meta_header h3 {
    margin: 0 0 4px;
    font-size: 16px;
    color: inherit;
}

html .box_ticket .ticket_meta_subtitle {
    margin: 0;
    color: var(--text-secondary-dark, var(--text-secondary));
    font-size: 12px;
    line-height: 1.6;
}

html .box_ticket .ticket_meta_status {
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(37, 99, 235, .12);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* meta details: one clean card, divided rows, NO zebra */
html .box_ticket .ticket_meta_cards {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--card-bg-dark, var(--surface));
    border: 1px solid var(--border-color-dark, var(--border));
    border-radius: 14px;
    overflow: hidden;
}

html .box_ticket .ticket_meta_card,
html .box_ticket .ticket_meta_card:nth-child(odd),
html .box_ticket .ticket_meta_card:nth-child(even) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-color-dark, var(--border));
    box-shadow: none;
}

html .box_ticket .ticket_meta_card:last-child {
    border-bottom: 0;
}

html .box_ticket .ticket_meta_card p {
    margin: 0;
    color: var(--text-secondary-dark, var(--text-secondary));
    font-size: 13px;
    font-weight: 600;
}

html .box_ticket .ticket_meta_card span {
    color: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    word-break: break-word;
}

/* ---- conversation (chat bubbles) ---- */
html .box_ticket .box_message {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

html .box_ticket .ticket_message {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: auto;
    max-width: 78%;
    align-self: flex-start;
    /* RTL: user side (right) */
    padding: 14px 16px;
    margin: 0;
    background: var(--card-bg-dark, var(--surface));
    border: 1px solid var(--border-color-dark, var(--border));
    border-radius: 14px 14px 14px 4px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}

html .box_ticket .ticket_message>span,
html .box_ticket .ticket_message .message_content>span {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary-dark, var(--text-secondary));
}

html .box_ticket .ticket_message.admin {
    align-self: flex-end;
    /* RTL: admin side (left) */
    background: rgba(37, 99, 235, .08);
    border-color: rgba(37, 99, 235, .22);
    border-radius: 14px 14px 4px 14px;
}

html .box_ticket .ticket_message.admin .message_content>span {
    color: var(--primary-color);
}

html .box_ticket .message {
    margin: 0;
    width: 100%;
    padding: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    font-size: 14px;
    line-height: 1.85;
    word-break: break-word;
}

html .box_ticket .ticket_message .message_content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

html .box_ticket .message_preview {
    display: inline-flex;
    width: fit-content;
    padding: 4px;
    border-radius: 10px;
    border: 1px solid var(--border-color-dark, var(--border));
    background: var(--card-bg-dark, var(--surface));
    box-shadow: none;
}

html .box_ticket .message_preview img {
    display: block;
    width: 150px;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ---- reply composer ---- */
html .box_ticket .create_comment {
    background: var(--card-bg-dark, var(--surface));
    border: 1px solid var(--border-color-dark, var(--border));
    border-radius: 14px;
    padding: 20px;
    box-shadow: none;
    margin-top: 6px;
}

html .box_ticket .create_comment h2 {
    margin: 0 0 4px;
    font-size: 18px;
    color: inherit;
}

html .box_ticket .create_comment p {
    margin: 0 0 16px;
    color: var(--text-secondary-dark, var(--text-secondary));
    font-size: 12px;
    line-height: 1.7;
}

html .box_ticket .create_comment form {
    display: grid;
    gap: 14px;
}

html .box_ticket .create_comment textarea {
    min-height: 120px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--input-border-dark, var(--border));
    background: var(--input-bg-dark, var(--surface));
    color: inherit;
    box-shadow: none;
    resize: vertical;
    font-family: inherit;
    font-size: 14px;
}

html .box_ticket .create_comment textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

html .box_ticket .create_comment .file-upload {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

html .box_ticket .create_comment input[type="file"] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px dashed var(--input-border-dark, var(--border));
    background: var(--input-bg-dark, var(--surface));
    color: inherit;
    cursor: pointer;
    font-size: 13px;
}

html .box_ticket .create_comment .file-upload-hint {
    margin: 0;
    font-size: 11px;
    color: var(--text-secondary-dark, var(--text-secondary));
}

html .box_ticket .create_comment input[type="submit"] {
    width: fit-content;
    padding: 11px 26px;
    border-radius: 10px;
    border: 0;
    background: var(--primary-color);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s ease;
}

html .box_ticket .create_comment input[type="submit"]:hover {
    background: var(--primary-color);
    filter: brightness(.92);
    transform: none;
}

/* ---- mobile: stack + wider bubbles ---- */
@media (max-width: 1024px) {
    html .box_ticket {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    html .box_ticket .ticket_message {
        max-width: 90%;
    }
}

/* ============================================================
   USER DETAIL / MANAGE PAGE  —  WIDE, fresh theme (flat, no gradients)
   Full-width layout, profile card with a solid header band + overlapping
   avatar, wide stat tiles, underline tabs, multi-column info grid.
   Theme-aware; `html` prefix + scoping beats dark.css & earlier rules.
   ============================================================ */

html .manage-container {
    max-width: none;
    margin: 0;
}

/* header */
html .manage-container .manage-header {
    background: transparent;
    border: 0;
    margin-top: 6px;
    padding: 4px 2px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

html .manage-container .manage-header h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: inherit;
}

html .manage-container .manage-header a,
html .manage-container .manage-header .back-page {
    background: var(--card-bg-dark, var(--surface));
    color: var(--primary-color);
    border: 1px solid var(--border-color-dark, var(--border));
    padding: 9px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    transition: background-color .15s ease;
}

html .manage-container .manage-header .back-page:hover {
    background: var(--hover-bg-dark, var(--surface-2));
    transform: none;
}

/* WIDE layout: slim profile + wide main (flex so pages without a
   profile column — e.g. panel detail — fill full width, not squish) */
html .manage-container .content {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin-top: 4px;
    align-items: flex-start;
}

html .manage-container .content>.info_right {
    flex: 0 0 320px;
    max-width: 320px;
}

html .manage-container .content>.info_left {
    flex: 1 1 360px;
    min-width: 0;
    width: auto;
}

/* ---- profile card: solid header band + overlapping avatar ---- */
html .manage-container .info_right {
    width: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    background: var(--card-bg-dark, var(--surface));
    border: 1px solid var(--border-color-dark, var(--border));
    border-radius: 18px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .07);
    padding: 0 18px 18px;
    overflow: hidden;
}

html .manage-container .info_right::before {
    content: "";
    display: block;
    height: 76px;
    margin: 0 -18px 0;
    background: var(--accent-color, var(--primary-color));
}

html .manage-container .avatar {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    margin: -46px auto 4px;
    background: var(--card-bg-dark, var(--surface));
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 4px solid var(--card-bg-dark, var(--surface));
    box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
    position: relative;
    z-index: 1;
}

html .manage-container .avatar img {
    width: 46px;
    height: 46px;
}

html .manage-container .info_right .username {
    font-size: 19px;
    font-weight: 800;
    margin: 2px 0 0;
    color: inherit;
}

html .manage-container .info_right .user_id_info {
    color: var(--text-secondary-dark, var(--text-secondary));
    font-size: 13px;
    direction: ltr;
    margin: 0;
}

html .manage-container .info_right .status_user {
    margin: 10px auto 4px;
    padding: 5px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    display: inline-block;
    width: fit-content;
}

html .manage-container .line-space {
    width: 100%;
    border: 0;
    border-top: 1px solid var(--border-color-dark, var(--border));
    margin: 12px 0 6px;
}

/* profile buttons: uniform full-width flat */
html .manage-container .info_right>a,
html .manage-container .info_right .Balance a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 11px 14px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    transition: filter .15s ease;
}

html .manage-container .info_right .Balance {
    display: flex;
    gap: 8px;
    margin: 0;
}

html .manage-container .info_right .Balance a {
    width: 100%;
}

/* ---- wide stat tiles ---- */
html .manage-container .info_left {
    width: auto;
}

html .manage-container .box_state {
    background: var(--card-bg-dark, var(--surface));
    border: 1px solid var(--border-color-dark, var(--border));
    border-radius: 18px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .07);
    padding: 20px;
}

html .manage-container .info_left .header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

html .manage-container .boxs_state {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    margin-top: 16px;
}

html .manage-container .box_state_item {
    background: var(--hover-bg-dark, var(--surface-2));
    border: 1px solid var(--border-color-dark, var(--border));
    border-top: 0;
    border-radius: 14px;
    box-shadow: none;
    padding: 18px 18px 18px 18px;
    text-align: right;
    position: relative;
    transition: none;
    overflow: hidden;
}

html .manage-container .box_state_item::before {
    content: "";
    position: absolute;
    top: 16px;
    bottom: 16px;
    right: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent-color, var(--primary-color));
}

html .manage-container .box_state_item:hover {
    transform: none;
    box-shadow: none;
}

html .manage-container .box_state_item .value_box_state_item {
    font-size: 24px;
    font-weight: 800;
    color: var(--primary-color);
    margin: 0;
}

html .manage-container .box_state_item .title_box_state_item {
    color: var(--text-secondary-dark, var(--text-secondary));
    font-size: 13px;
    font-weight: 500;
    margin-top: 4px;
}

/* ---- tabs (underline style) ---- */
html .manage-container .tabs {
    margin-top: 20px;
    padding: 6px 22px 22px;
    background: var(--card-bg-dark, var(--surface));
    border: 1px solid var(--border-color-dark, var(--border));
    border-radius: 18px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .07);
}

html .manage-container .tabs .menu_tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-color-dark, var(--border));
    margin-bottom: 16px;
}

html .manage-container .tabs .menu_tabs button {
    all: unset;
    padding: 14px 10px;
    margin: 0 8px;
    cursor: pointer;
    color: var(--text-secondary-dark, var(--text-secondary));
    font-weight: 700;
    font-size: 14px;
    border-bottom: 2px solid transparent;
    flex: 0 0 auto;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease;
}

html .manage-container .tabs .menu_tabs button:hover {
    color: var(--primary-color);
    background: transparent;
    transform: none;
}

html .manage-container .tabs .menu_tabs button.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background: transparent;
}

/* ---- wide info grid (key : value) ---- */
html .manage-container .tabs .detail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 32px;
}

html .manage-container .tabs .info_data {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 4px;
    margin: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    border-bottom: 1px solid var(--border-color-dark, var(--border));
    cursor: default;
}

html .manage-container .tabs .info_data:hover {
    background: transparent;
    transform: none;
}

html .manage-container .info_data h3 {
    color: var(--text-secondary-dark, var(--text-secondary));
    font-weight: 600;
    font-size: 14px;
    margin: 0;
}

html .manage-container .info_data p {
    margin: 0;
    font-weight: 700;
    font-size: 14px;
    color: inherit;
}

/* action buttons inside tabs */
html .manage-container .tabs .btn_actions {
    margin-top: 18px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

html .manage-container .tabs .btn_actions a {
    flex: 1 1 auto;
    min-width: 160px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

/* ---- shared button colors (flat solid, clickable only) ---- */
a.primary,
button.primary,
input.primary {
    background: var(--primary-color);
    color: #fff;
    transition: filter .15s ease;
}

a.Success,
button.Success,
input.Success {
    background: var(--success-color, #16a34a);
    color: #fff;
    transition: filter .15s ease;
}

a.Danger,
button.Danger,
input.Danger {
    background: var(--danger-color, #dc2626);
    color: #fff;
    transition: filter .15s ease;
}

a.Warning,
button.Warning,
input.Warning {
    background: #f59e0b;
    color: #fff;
    transition: filter .15s ease;
}

a.Secondary,
button.Secondary,
input.Secondary {
    background: #64748b;
    color: #fff;
    transition: filter .15s ease;
}

a.primary:hover,
button.primary:hover,
input.primary:hover,
a.Success:hover,
button.Success:hover,
input.Success:hover,
a.Danger:hover,
button.Danger:hover,
input.Danger:hover,
a.Warning:hover,
button.Warning:hover,
input.Warning:hover,
a.Secondary:hover,
button.Secondary:hover,
input.Secondary:hover {
    filter: brightness(.92);
    transform: none;
}

/* ---- modals: clean + theme-aware (used across pages) ---- */
html .modal-box {
    background: var(--card-bg-dark, var(--surface));
    border: 1px solid var(--border-color-dark, var(--border));
    border-radius: 18px;
    width: 100%;
    max-width: 560px;
    color: inherit;
}

html .modal-box h3 {
    color: inherit;
    border-bottom: 1px solid var(--border-color-dark, var(--border));
}

html .modal-box p {
    color: var(--text-secondary-dark, var(--text-secondary));
}

html .modal-box input,
html .modal-box select,
html .modal-box textarea {
    background-color: var(--input-bg-dark, var(--surface));
    border: 1.5px solid var(--input-border-dark, var(--border-color-dark, var(--border)));
    color: var(--text-color-dark, var(--text));
    border-radius: 11px;
}

html .modal-box select {
    background-color: var(--input-bg-dark, var(--surface));
}

html .modal-box input:focus,
html .modal-box select:focus,
html .modal-box textarea:focus {
    border-color: var(--primary-color);
}

html .modal-box .btns button,
html .modal-box .btns a {
    padding: 11px 20px;
    border-radius: 11px;
    font-weight: 700;
}

html .modal-box .cancel,
html .modal-box button.cancel {
    background: var(--input-bg-dark, var(--surface-2, #e5e7eb));
    border: 1px solid var(--border-color-dark, var(--border));
    color: inherit;
}

html .modal-close {
    background: var(--input-bg-dark, var(--surface-2, #f1f5f9));
    color: var(--text-secondary-dark, var(--text-secondary));
}

/* ---- responsive ---- */
@media (max-width: 1400px) {
    html .manage-container .tabs .detail {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    html .manage-container .content>.info_right {
        flex-basis: 100%;
        max-width: none;
    }
}

@media (max-width: 700px) {
    html .manage-container .tabs .detail {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   USER DETAIL — button layout overhaul + agent_bot card
   (appended last so it wins; flat, theme-aware)
   ============================================================ */

/* profile actions: compact 2-col grid instead of a tall stack */
html .manage-container .info_right .profile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

html .manage-container .info_right .profile-actions .Balance {
    display: contents;
}

html .manage-container .info_right .profile-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: auto;
    box-sizing: border-box;
    margin: 0;
    padding: 11px 12px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.3;
    cursor: pointer;
    text-decoration: none;
    transition: filter .15s ease;
}

/* primary actions span the full row */
html .manage-container .info_right .profile-actions .btn_sendmessage,
html .manage-container .info_right .profile-actions .btn_add_order {
    grid-column: 1 / -1;
}

/* tab action buttons: tidy auto-width row (not stretched) */
html .manage-container .tabs .btn_actions {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

html .manage-container .tabs .btn_actions a {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

/* ---- agent bot: clean card ---- */
html .manage-container .agent_bot {
    margin-top: 18px;
    padding: 18px;
    display: block;
    font-size: 14px;
    background: var(--hover-bg-dark, var(--surface-2));
    border: 1px solid var(--border-color-dark, var(--border));
    border-radius: 14px;
    box-shadow: none;
}

html .manage-container .agent_bot .header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-weight: 800;
    font-size: 15px;
    color: inherit;
}

html .manage-container .agent_bot .header .icon_svg {
    width: 20px;
    height: 20px;
}

html .manage-container .agent_bot .data {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 11px 0;
    border-bottom: 1px solid var(--border-color-dark, var(--border));
    color: var(--text-secondary-dark, var(--text-secondary));
    font-weight: 600;
}

html .manage-container .agent_bot .data span {
    background: var(--card-bg-dark, var(--surface));
    border: 1px solid var(--border-color-dark, var(--border));
    color: inherit;
    padding: 5px 10px;
    margin: 0;
    border-radius: 8px;
    font-weight: 700;
    word-break: break-word;
    white-space: normal;
    text-align: left;
    max-width: 70%;
    direction: ltr;
}

html .manage-container .agent_bot .btn_actions {
    margin-top: 14px;
}

/* ============================================================
   DETAIL PAGES — calm, cohesive action buttons (ALL sections)
   Soft tinted by default (colored text + subtle border), fill with
   their color on hover. Covers every button inside .manage-container:
   action rows, profile actions, form/save buttons, stray color buttons.
   Modals (outside .manage-container) keep their own styles. Flat, theme-aware.
   ============================================================ */

/* uniform shape for every action/form button in detail pages */
html .manage-container a.primary,
html .manage-container a.Success,
html .manage-container a.Danger,
html .manage-container a.Warning,
html .manage-container a.Secondary,
html .manage-container a.btn-primary,
html .manage-container button.primary,
html .manage-container button.Success,
html .manage-container button.Danger,
html .manage-container button.Warning,
html .manage-container button.Secondary,
html .manage-container button.btn-primary,
html .manage-container .btns button,
html .manage-container .btns a,
html .manage-container .btns .confirm,
html .manage-container .confirm,
html .manage-container button[type="submit"],
html .manage-container input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.3;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    border: 1px solid var(--border-color-dark, var(--border));
    background: var(--hover-bg-dark, var(--surface-2));
    color: var(--text-secondary-dark, var(--text-secondary));
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* keep form button rows tidy */
html .manage-container .btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

/* soft color variants (resting state) */
html .manage-container a.primary,
html .manage-container button.primary,
html .manage-container a.btn-primary,
html .manage-container button.btn-primary {
    background: rgba(37, 99, 235, .10);
    color: #2563eb;
    border-color: rgba(37, 99, 235, .22);
}

html .manage-container a.Success,
html .manage-container button.Success {
    background: rgba(22, 163, 74, .10);
    color: #16a34a;
    border-color: rgba(22, 163, 74, .22);
}

html .manage-container a.Danger,
html .manage-container button.Danger {
    background: rgba(220, 38, 38, .10);
    color: #dc2626;
    border-color: rgba(220, 38, 38, .22);
}

html .manage-container a.Warning,
html .manage-container button.Warning {
    background: rgba(217, 119, 6, .12);
    color: #d97706;
    border-color: rgba(217, 119, 6, .28);
}

html .manage-container a.Secondary,
html .manage-container button.Secondary {
    background: var(--hover-bg-dark, var(--surface-2));
    color: var(--text-secondary-dark, var(--text-secondary));
    border-color: var(--border-color-dark, var(--border));
}

/* save / confirm / submit = soft green (positive action) */
html .manage-container .btns .confirm,
html .manage-container .confirm,
html .manage-container button[type="submit"],
html .manage-container input[type="submit"] {
    background: rgba(22, 163, 74, .10);
    color: #16a34a;
    border-color: rgba(22, 163, 74, .22);
}

/* hover: fill with the colour (calm at rest, clear on interaction) */
html .manage-container a.primary:hover,
html .manage-container button.primary:hover,
html .manage-container a.btn-primary:hover,
html .manage-container button.btn-primary:hover {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
    filter: none;
    transform: none;
}

html .manage-container a.Success:hover,
html .manage-container button.Success:hover,
html .manage-container .btns .confirm:hover,
html .manage-container .confirm:hover,
html .manage-container button[type="submit"]:hover,
html .manage-container input[type="submit"]:hover {
    background: #16a34a;
    color: #fff;
    border-color: #16a34a;
    filter: none;
    transform: none;
}

html .manage-container a.Danger:hover,
html .manage-container button.Danger:hover {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
    filter: none;
    transform: none;
}

html .manage-container a.Warning:hover,
html .manage-container button.Warning:hover {
    background: #d97706;
    color: #fff;
    border-color: #d97706;
    filter: none;
    transform: none;
}

html .manage-container a.Secondary:hover,
html .manage-container button.Secondary:hover {
    background: var(--border-color-dark, var(--border));
    color: inherit;
    border-color: var(--border-color-dark, var(--border));
    filter: none;
    transform: none;
}

/* keep the compact profile-actions grid layout */
html .manage-container .info_right .profile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

html .manage-container .info_right .profile-actions .Balance {
    display: contents;
}

html .manage-container .info_right .profile-actions .btn_sendmessage,
html .manage-container .info_right .profile-actions .btn_add_order {
    grid-column: 1 / -1;
}

/* tab action rows stay tidy auto-width */
html .manage-container .tabs .btn_actions {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

html .manage-container .tabs .btn_actions a {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
}

/* ============================================================
   DETAIL/SETTINGS FORMS inside tabs (notification id, shop settings ...)
   Clean modern fields: label above, full-width themed input.
   Scoped to .manage-container .tabs. Flat, theme-aware.
   ============================================================ */

/* helper / intro text */
html .manage-container .tabs>p {
    color: var(--text-secondary-dark, var(--text-secondary));
    font-size: 14px;
    line-height: 1.9;
    margin: 0 0 8px;
}

/* form scaffolding */
html .manage-container .tabs .form-group {
    margin: 16px 0 0;
}

html .manage-container .tabs .input_value {
    display: block;
    width: 100%;
}

html .manage-container .tabs .input-wrapper-size-3 {
    margin-top: 12px;
    gap: 16px;
    justify-content: flex-start;
    align-items: flex-end;
    flex-wrap: wrap;
}

/* each field = label stacked over a full-width input */
html .manage-container .tabs .warp-flex,
html .manage-container .tabs .form_control {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    flex: 1 1 260px;
    min-width: 0;
}

html .manage-container .tabs .form_control label {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-secondary-dark, var(--text-secondary));
}

html .manage-container .tabs input[type="text"],
html .manage-container .tabs input[type="number"],
html .manage-container .tabs .input-wrapper-size-3 input,
html .manage-container .tabs .form_control input {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 14px;
    border: 1px solid var(--input-border-dark, var(--border));
    background: var(--input-bg-dark, var(--surface));
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}

html .manage-container .tabs input[type="text"]:focus,
html .manage-container .tabs input[type="number"]:focus,
html .manage-container .tabs .input-wrapper-size-3 input:focus,
html .manage-container .tabs .form_control input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

/* the "current value" line reads as a subtle info chip */
html .manage-container .tabs>p:nth-of-type(2) {
    display: inline-block;
    margin: 4px 0 0;
    padding: 9px 14px;
    border-radius: 10px;
    background: var(--hover-bg-dark, var(--surface-2));
    border: 1px solid var(--border-color-dark, var(--border));
    color: inherit;
    font-weight: 700;
    font-size: 13px;
}

/* save button gets a little breathing room */
html .manage-container .tabs form>button[type="submit"],
html .manage-container .tabs form>.btn {
    margin-top: 18px;
}

/* ============================================================
   THEME / COLOR SETTINGS MODAL (palette picker + dark switch)
   ============================================================ */
.theme-modal .modal-box {
    max-width: 460px;
}

.theme-modal .theme-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color-dark, var(--border));
    font-weight: 700;
    color: inherit;
}

.theme-modal .theme-section-label {
    margin: 16px 0 10px;
    font-weight: 700;
    font-size: 14px;
    color: inherit;
}

.theme-modal .palette-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

.theme-modal .palette-swatch {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    box-shadow: inset 0 0 0 2px var(--card-bg-dark, var(--surface));
    transition: transform .12s ease, box-shadow .12s ease;
}

.theme-modal .palette-swatch:hover {
    transform: scale(1.08);
}

.theme-modal .palette-swatch.selected {
    border-color: var(--text-color-dark, var(--text));
    box-shadow: inset 0 0 0 3px var(--card-bg-dark, var(--surface));
}

/* iOS-style toggle switch */
.theme-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex: 0 0 auto;
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.theme-switch .theme-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    border-radius: 999px;
    background: var(--border-color-dark, #cbd5e1);
    transition: background-color .2s ease;
}

.theme-switch .theme-slider::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    right: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

.theme-switch input:checked+.theme-slider {
    background: var(--primary-color);
}

.theme-switch input:checked+.theme-slider::before {
    transform: translateX(-20px);
}

@media (max-width: 560px) {
    .theme-modal .palette-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ============================================================
   THEME PICKER — card based (like reference): dark/light groups,
   multi-colour preview, name + tags, selected check.
   ============================================================ */
.theme-modal .modal-box.theme-picker {
    max-width: 760px;
    width: 92vw;
    max-height: 86vh;
    overflow-y: auto;
    text-align: right;
}

.theme-picker-head {
    margin-bottom: 4px;
}

.theme-picker-head h3 {
    margin: 0 0 4px;
}

.theme-picker-head p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary-dark, var(--text-secondary));
}

.theme-group-label {
    margin: 20px 0 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary-dark, var(--text-secondary));
}

.theme-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.theme-card {
    position: relative;
    padding: 0;
    cursor: pointer;
    text-align: right;
    overflow: hidden;
    border: 1.5px solid var(--border-color-dark, var(--border));
    border-radius: 14px;
    background: var(--card-bg-dark, var(--surface));
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.theme-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}

.theme-card.selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-color);
}

.theme-card .preview {
    display: flex;
    height: 52px;
    width: 100%;
}

.theme-card .preview span {
    flex: 1;
}

.theme-card .meta {
    padding: 9px 12px 11px;
}

.theme-card .meta .name {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-color-dark, var(--text));
}

.theme-card .meta .tags {
    margin-top: 3px;
    font-size: 11px;
    color: var(--text-secondary-dark, var(--text-secondary));
}

.theme-card .check {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    font-size: 13px;
    line-height: 22px;
    text-align: center;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .14s ease, transform .14s ease;
    z-index: 2;
}

.theme-card.selected .check {
    opacity: 1;
    transform: scale(1);
}

@media (max-width: 640px) {
    .theme-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}


.service-modal {
    z-index: 100000;
}

.service-modal .modal-box.service-picker {
    max-width: 640px;
    width: 92vw;
    text-align: right;
}

.service-picker-head h3 {
    margin: 0 0 10px;
    padding-left: 0;
}

.service-picker-head p {
    margin: 0;
    font-size: 13px;
    line-height: 2;
    color: var(--text-secondary-dark, var(--text-secondary));
}

.service-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.service-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px;
    cursor: pointer;
    text-align: right;
    border: 1.5px solid var(--border-color-dark, var(--border));
    border-radius: 14px;
    background: var(--card-bg-dark, var(--surface));
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.service-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}

#serviceModeForm.is-busy .service-cards {
    opacity: .6;
    pointer-events: none;
}

.service-card .sc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
}

.service-card .sc-icon img {
    width: 22px;
    height: 22px;
}

.service-card .sc-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.service-card .sc-name {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--text-color-dark, var(--text));
}

.service-card .sc-desc {
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--text-secondary-dark, var(--text-secondary));
}

@media (max-width: 560px) {
    .service-cards {
        grid-template-columns: 1fr;
    }
}

.mz-dash{
  --mz-surface: var(--card-bg-dark, var(--surface));
  --mz-surface-2: var(--hover-bg-dark, var(--surface-2));
  --mz-border: var(--border-color-dark, var(--border));
  --mz-text: var(--text-color-dark, var(--text));
  --mz-muted: var(--text-secondary-dark, var(--text-secondary));
  --mz-primary: var(--primary-color);
  --mz-radius: 14px;
  --mz-shadow: 0 1px 3px rgba(0,0,0,.12);
  direction:rtl; max-width:1360px; margin:0 auto; padding:22px 4px 48px; color:var(--mz-text);
}
.mz-dash *{box-sizing:border-box}

/* soft entrance (respects reduced-motion) */
@keyframes mzUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mz-anim{opacity:0;animation:mzUp .4s ease forwards}
.mz-d1{animation-delay:.02s}.mz-d2{animation-delay:.06s}.mz-d3{animation-delay:.10s}
.mz-d4{animation-delay:.14s}.mz-d5{animation-delay:.18s}

/* ===== HERO — flat, no gradient ===== */
.mz-hero{
  position:relative; border-radius:var(--mz-radius); padding:24px 26px; overflow:hidden;
  background:var(--mz-surface); border:1px solid var(--mz-border); box-shadow:var(--mz-shadow);
  color:var(--mz-text); display:grid; grid-template-columns:1fr auto; align-items:center; gap:28px;
}
.mz-hero-id{position:relative;z-index:1;min-width:0}
.mz-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:600;color:var(--mz-muted);margin-bottom:16px}
.mz-eyebrow::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--mz-primary)}
.mz-id-row{display:flex;align-items:center;gap:14px}
.mz-robot{
  width:52px;height:52px;border-radius:12px;flex-shrink:0;
  background:var(--mz-primary);
  display:flex;align-items:center;justify-content:center;
}
.mz-robot img{width:26px;height:26px;filter:brightness(0) invert(1)}
.mz-id-text{min-width:0}
.mz-botname{font-size:1.5rem;font-weight:700;line-height:1.2;color:var(--mz-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mz-botname bdi{unicode-bidi:isolate}
.mz-status{display:inline-flex;align-items:center;gap:7px;margin-top:9px;font-size:.8rem;font-weight:600;color:var(--mz-text);background:var(--mz-surface-2);border:1px solid var(--mz-border);padding:5px 12px;border-radius:8px}
.mz-status .mz-dot{width:8px;height:8px;border-radius:50%;background:var(--mz-muted)}
.mz-status.s-active  .mz-dot{background:#22c55e}
.mz-status.s-expired .mz-dot{background:#ef4444}
.mz-status.s-waiting .mz-dot{background:#f59e0b}
.mz-status.s-disable .mz-dot{background:var(--mz-muted)}

.mz-meta{display:flex;flex-wrap:wrap;gap:0;margin-top:20px;background:var(--mz-surface-2);border:1px solid var(--mz-border);border-radius:10px;padding:4px;width:fit-content;max-width:100%}
.mz-meta-item{display:flex;flex-direction:column;gap:3px;padding:8px 16px;min-width:0}
.mz-meta-item + .mz-meta-item{border-inline-start:1px solid var(--mz-border)}
.mz-meta-item .lbl{font-size:.68rem;color:var(--mz-muted);font-weight:500}
.mz-meta-item .val{font-size:.85rem;font-weight:700;color:var(--mz-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.mz-meta-item .val.ltr{direction:ltr;text-align:right}

/* ===== RT tile — calm; single-color bar; no fake "processing" theatre ===== */
.mz-rt-tile{position:relative;z-index:1;background:var(--mz-surface-2);border:1px solid var(--mz-border);border-radius:12px;padding:18px 20px;min-width:240px;max-width:320px}
.mz-rt{display:flex;flex-direction:column;gap:11px}
.mz-rt-label{font-size:.76rem;color:var(--mz-muted);font-weight:500}
.mz-rt-value{display:flex;align-items:baseline;gap:7px;line-height:1}
.mz-rt-num{font-size:2.1rem;font-weight:800;letter-spacing:-.5px;color:var(--mz-text)}
.mz-rt-num.is-inf{color:var(--mz-primary)}
.mz-rt-cap{font-size:.73rem;color:var(--mz-muted)}
.mz-rt-bar{position:relative;height:8px;border-radius:999px;background:color-mix(in srgb,var(--mz-primary) 12%,var(--mz-border));overflow:hidden}
.mz-rt-fill{position:absolute;inset-block:0;right:0;left:auto;width:0;border-radius:999px;background:var(--mz-primary);transition:width 1s cubic-bezier(.22,.61,.36,1)}
/* fake "processing" state neutralized: value is always shown calmly */
.mz-rt-proc{display:none}
.mz-rt.is-processing .mz-rt-fill{animation:none}

/* ===== STAT CARDS — single accent, flat, no rainbow ===== */
.mz-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
.mz-stat{background:var(--mz-surface);border:1px solid var(--mz-border);border-radius:12px;padding:16px 18px;box-shadow:var(--mz-shadow);position:relative;transition:border-color .2s ease}
.mz-stat:hover{border-color:color-mix(in srgb,var(--mz-primary) 35%,var(--mz-border))}
.mz-stat-top{display:flex;align-items:center;justify-content:space-between}
.mz-ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--mz-primary) 12%,transparent);color:var(--mz-primary)}
.mz-ico svg{width:21px;height:21px}
.mz-trend{font-size:.7rem;font-weight:600;color:var(--mz-muted);background:var(--mz-surface-2);border:1px solid var(--mz-border);padding:3px 9px;border-radius:6px}
.mz-stat-val{font-size:1.5rem;font-weight:800;margin-top:14px;line-height:1.1;letter-spacing:-.5px;display:flex;align-items:baseline;gap:6px;color:var(--mz-text);font-variant-numeric:tabular-nums}
.mz-stat-val .suf{font-size:.8rem;font-weight:600;color:var(--mz-muted)}
.mz-stat-lbl{font-size:.8rem;color:var(--mz-muted);margin-top:4px}

/* ===== LOWER GRID ===== */
.mz-grid2{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;margin-top:14px}
.mz-card{background:var(--mz-surface);border:1px solid var(--mz-border);border-radius:var(--mz-radius);box-shadow:var(--mz-shadow);padding:20px}
.mz-card-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--mz-border)}
.mz-card-head h3{font-size:1rem;font-weight:700;margin:0;color:var(--mz-text)}
.mz-hicon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--mz-primary) 12%,transparent);color:var(--mz-primary)}
.mz-hicon svg{width:17px;height:17px}

.mz-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mz-action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:18px 10px;border-radius:11px;text-align:center;background:var(--mz-surface-2);border:1px solid var(--mz-border);color:var(--mz-text);transition:border-color .2s ease,background .2s ease}
.mz-action:hover{border-color:color-mix(in srgb,var(--mz-primary) 45%,var(--mz-border));background:color-mix(in srgb,var(--mz-primary) 7%,var(--mz-surface-2))}
.mz-aico{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--mz-primary) 12%,transparent)}
.mz-aico img{width:20px;height:20px}
.mz-action span{font-size:.81rem;font-weight:600}

.mz-info{display:flex;flex-direction:column}
.mz-info-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 2px;border-bottom:1px solid var(--mz-border)}
.mz-info-row:last-child{border-bottom:0}
.mz-info-row .k{font-size:.83rem;color:var(--mz-muted);display:flex;align-items:center;gap:8px}
.mz-info-row .v{font-size:.85rem;font-weight:600;color:var(--mz-text);text-align:left;word-break:break-word;max-width:62%}
.mz-info-row .v.ltr{direction:ltr}
.mz-pill{font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:6px}
.mz-pill.on{color:#16a34a;background:color-mix(in srgb,#16a34a 14%,transparent)}
.mz-pill.off{color:#dc2626;background:color-mix(in srgb,#dc2626 14%,transparent)}
.mz-note{margin-top:14px;padding:12px 14px;border-radius:10px;font-size:.83rem;line-height:1.8;color:var(--mz-muted);background:var(--mz-surface-2);border:1px solid var(--mz-border)}

/* ===== RESPONSIVE ===== */
@media (max-width:1100px){.mz-stats{grid-template-columns:repeat(2,1fr)}.mz-grid2{grid-template-columns:1fr}}
@media (max-width:760px){.mz-hero{grid-template-columns:1fr;justify-items:center;text-align:center;gap:22px}.mz-hero-id{text-align:center}.mz-eyebrow{justify-content:center}.mz-id-row{justify-content:center}.mz-meta{margin-inline:auto}.mz-rt-tile{max-width:none;width:100%}}
@media (max-width:640px){.mz-hero{padding:22px}.mz-botname{font-size:1.3rem;white-space:normal}.mz-stats{grid-template-columns:1fr}.mz-actions{grid-template-columns:repeat(2,1fr)}.mz-meta{width:100%}.mz-meta-item .val{max-width:none}}
@media (prefers-reduced-motion:reduce){.mz-anim{animation:none;opacity:1}.mz-rt-fill{transition:none}}
/* ===============  END MIRZA DASHBOARD  =============== */



/* ============================================================
   USER INFO SECTION (tabs) — formal / corporate redesign
   Appended at the end of static/style.css.
   Works across all themes (dark/light + palettes) via theme vars.
   ============================================================ */

.manage-container .tabs{
  margin-top:20px;
  padding:0;
  background:var(--surface-color-dark, var(--surface, #fff));
  border:1px solid var(--border-color-dark, var(--border, #e6e9f0));
  border-radius:12px;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  overflow:hidden;
}

/* --- tab bar: animated underline, flat, formal --- */
.tabs .menu_tabs{
  position:relative;
  display:flex;
  gap:0;
  padding:0 6px;
  background:transparent;
  border-bottom:1px solid var(--border-color-dark, var(--border, #e6e9f0));
  overflow-x:auto;
  white-space:nowrap;
  scrollbar-width:none;
}
.tabs .menu_tabs::-webkit-scrollbar{display:none}
.manage-container .tabs .menu_tabs button,
.tabs .menu_tabs button{
  all:unset;
  position:relative;
  z-index:1;
  flex:0 0 auto;
  text-align:center;
  padding:15px 22px;
  cursor:pointer;
  border-radius:0;
  font-size:14px;
  font-weight:600;
  color:var(--text-secondary-dark, var(--text-secondary, #64748b));
  transition:color .2s ease;
  white-space:nowrap;
}
.manage-container .tabs .menu_tabs button:hover,
.tabs .menu_tabs button:hover{
  color:var(--text-color-dark, var(--text, #1f2937));
  background:transparent;transform:none;
}
.manage-container .tabs .menu_tabs button.active,
.tabs .menu_tabs button.active{
  color:var(--primary-color);
  background:transparent;
}
.tabs .menu_tabs button:focus-visible{outline:2px solid var(--primary-color);outline-offset:-4px}
.tabs .tab-indicator{
  position:absolute;
  bottom:-1px;
  z-index:2;
  height:2.5px;
  border-radius:3px 3px 0 0;
  background:var(--primary-color);
  transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);
}

/* --- tab content --- */
.tabcontent{
  display:none;padding:22px 20px;
  opacity:0;height:0;overflow:hidden;visibility:hidden;
}
.tabcontent.active{
  display:block;opacity:1;height:auto;visibility:visible;
  animation:tabFade .3s ease;
}
@keyframes tabFade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* section label (e.g. user group) */
.tabcontent .section-label{
  font-size:12px;font-weight:700;letter-spacing:.02em;
  color:var(--text-secondary-dark, var(--text-secondary, #64748b));
  margin:0 2px 14px;padding-bottom:10px;
  border-bottom:1px solid var(--border-color-dark, var(--border, #e6e9f0));
}

/* --- info grid: tidy definition layout --- */
.tabs .detail{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:10px;
}
.tabs .info_data{
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  padding:13px 15px;margin:0;
  border-radius:9px;
  text-align:right;direction:rtl;
  background:var(--card-bg-dark, var(--surface-2, #f8fafc));
  border:1px solid var(--border-color-dark, var(--border, #eef1f6));
  box-shadow:none;cursor:default;
  transition:border-color .2s ease;
}
.tabs .info_data:hover{
  transform:none;
  background:var(--card-bg-dark, var(--surface-2, #f8fafc));
  border-color:color-mix(in srgb, var(--primary-color) 40%, var(--border-color-dark, var(--border, #e6e9f0)));
}
.info_data h3{
  font-size:12px;font-weight:500;
  color:var(--text-secondary-dark, var(--text-secondary, #64748b));
}
.info_data p{
  font-size:15px;font-weight:700;line-height:1.5;
  color:var(--text-color-dark, var(--text, #1f2937));
}

/* status chip — flat, formal */
.info_data .chip{
  display:inline-flex;align-items:center;gap:6px;width:max-content;
  padding:3px 10px;border-radius:6px;font-size:12.5px;font-weight:600;
  border:1px solid transparent;
}
.info_data .chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.info_data .chip.ok{color:#10b981;background:color-mix(in srgb,#10b981 10%,transparent);border-color:color-mix(in srgb,#10b981 30%,transparent)}
.info_data .chip.warn{color:#f59e0b;background:color-mix(in srgb,#f59e0b 10%,transparent);border-color:color-mix(in srgb,#f59e0b 30%,transparent)}
.info_data .chip.off{color:#9aa0a6;background:color-mix(in srgb,#9aa0a6 10%,transparent);border-color:color-mix(in srgb,#9aa0a6 30%,transparent)}
.info_data .chip.bad{color:#ef4444;background:color-mix(in srgb,#ef4444 10%,transparent);border-color:color-mix(in srgb,#ef4444 30%,transparent)}

/* --- action bar: uniform with clear hierarchy --- */
.tabs .btn_actions{
  margin-top:22px;padding-top:20px;
  border-top:1px solid var(--border-color-dark, var(--border, #e6e9f0));
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(205px,1fr));
  gap:8px;
}
.tabs .btn_actions a{
  display:flex;align-items:center;justify-content:center;gap:6px;
  flex:initial;
  padding:11px 14px;border-radius:8px;
  font-size:13px;font-weight:600;line-height:1.3;text-align:center;
  cursor:pointer;text-decoration:none;
  border:1px solid var(--border-color-dark, var(--border, #e6e9f0));
  background:var(--card-bg-dark, var(--surface-2, #f8fafc));
  color:var(--text-color-dark, var(--text, #1f2937));
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.tabs .btn_actions a:hover{
  border-color:color-mix(in srgb, var(--primary-color) 55%, transparent);
  background:color-mix(in srgb, var(--primary-color) 9%, var(--card-bg-dark, #f1f5f9));
}
.tabs .btn_actions a:active{transform:translateY(1px)}
/* positive — green outline */
.tabs .btn_actions a.Success{
  color:#10b981;background:transparent;
  border-color:color-mix(in srgb,#10b981 45%,transparent);
}
.tabs .btn_actions a.Success:hover{background:color-mix(in srgb,#10b981 12%,transparent);border-color:#10b981}
/* destructive — red outline */
.tabs .btn_actions a.Danger{
  color:#ef4444;background:transparent;
  border-color:color-mix(in srgb,#ef4444 45%,transparent);
}
.tabs .btn_actions a.Danger:hover{background:color-mix(in srgb,#ef4444 12%,transparent);border-color:#ef4444}
/* warning — amber outline */
.tabs .btn_actions a.Warning{
  color:#f59e0b;background:transparent;
  border-color:color-mix(in srgb,#f59e0b 45%,transparent);
}
.tabs .btn_actions a.Warning:hover{background:color-mix(in srgb,#f59e0b 12%,transparent);border-color:#f59e0b}

@media (prefers-reduced-motion:reduce){
  .tabs *{transition:none!important;animation:none!important}
}
@media (max-width:560px){
  .tabs .detail{grid-template-columns:1fr 1fr}
  .tabs .btn_actions{grid-template-columns:1fr 1fr}
  .tabs .menu_tabs button{padding:14px 16px}
}


/* ============================================================
   PANEL SETTINGS PAGE — switch rows and save button
   (complements the tabs redesign block; works across all themes)
   ============================================================ */

/* setting row with a switch: label right, switch left, one line */
.tabs .info_data:has(.check-1){
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.tabs .info_data:has(.check-1) > label[for]{
  font-size:14px;
  font-weight:600;
  color:var(--text-color-dark, var(--text, #1f2937));
  cursor:pointer;
  margin:0;
}

/* clean, formal switch (restyled .check-1) */
.tabs .info_data .check-1{
  position:relative; inset:auto; top:auto; left:auto;
  transform:none;
  flex:0 0 auto;
  width:46px; height:26px;
  border-radius:999px;
  cursor:pointer;
}
.tabs .info_data .check-1 input{
  position:absolute; inset:0;
  width:100%; height:100%; margin:0;
  opacity:0; cursor:pointer; z-index:2;
}
.tabs .info_data .check-1 .inner{
  position:absolute; inset:0;
  border:none; border-radius:999px;
  background:var(--border-color-dark, var(--border, #cbd5e1));
  transition:background .2s ease;
}
.tabs .info_data .check-1 .bullet{
  position:absolute; top:3px; right:3px; left:auto;
  width:20px; height:20px;
  background:#fff; border-radius:50%;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:right .25s cubic-bezier(.4,0,.2,1);
  z-index:1;
  animation:none;
}
.tabs .info_data .check-1 input:checked ~ .inner{
  border:none;
  background:var(--primary-color);
}
.tabs .info_data .check-1 input:checked ~ .bullet{
  right:23px;
  animation:none;
}

/* --- action bar: uniform with clear hierarchy --- */
.tabs .btns.input_option{
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid var(--border-color-dark, var(--border, #e6e9f0));
  flex-direction:row;
  justify-content:flex-start;
}


/* ============================================================
   PAGINATION — rewritten: unified, theme-aware, very soft motion
   (works across all themes/modes; old #667eea and #2563eb removed)
   ============================================================ */
.pagination-container{
  display:flex; justify-content:center; align-items:center;
  flex-wrap:wrap; gap:14px;
  padding:18px 24px;
  background:var(--surface-color-dark, var(--surface, #fff));
  border-top:1px solid var(--border-color-dark, var(--border, #e6e9f0));
  border-radius:0 0 12px 12px;
}
.pagination-controls{ display:flex; align-items:center; gap:8px; }
.page-numbers{ display:flex; align-items:center; gap:6px; }

/* base buttons (arrows and numbers) */
.pagination-controls .btn-page,
.pagination-controls .page-number{
  box-sizing:border-box;
  min-width:40px; height:40px; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border-radius:10px;
  border:1px solid var(--border-color-dark, var(--border, #e6e9f0));
  background:var(--card-bg-dark, var(--surface-2, #fff));
  color:var(--text-secondary-dark, var(--text-secondary, #64748b));
  font-family:inherit; font-size:14px; font-weight:600; line-height:1;
  -webkit-appearance:none; appearance:none;
  cursor:pointer; text-decoration:none;
  transition:background .28s cubic-bezier(.4,0,.2,1),
             color .28s cubic-bezier(.4,0,.2,1),
             border-color .28s cubic-bezier(.4,0,.2,1),
             box-shadow .28s cubic-bezier(.4,0,.2,1),
             transform .2s cubic-bezier(.4,0,.2,1);
  animation:pgIn .5s cubic-bezier(.22,.61,.36,1) both;
}
.pagination-controls .btn-page img{
  width:18px; height:18px; display:block;
  transition:filter .28s ease;
}

/* very soft hover: gentle theme tint + slight lift */
.pagination-controls .btn-page:hover:not(:disabled),
.pagination-controls .page-number:hover:not(.active){
  background:color-mix(in srgb, var(--primary-color) 10%, var(--card-bg-dark, #fff));
  border-color:color-mix(in srgb, var(--primary-color) 45%, transparent);
  color:var(--text-color-dark, var(--text, #1f2937));
  transform:translateY(-2px);
}
.pagination-controls .btn-page:active:not(:disabled),
.pagination-controls .page-number:active:not(.active){
  transform:translateY(0) scale(.95);
}
.pagination-controls .btn-page:disabled{ opacity:.45; cursor:not-allowed; }

/* active page: filled with theme color + soft glow ring */
.pagination-controls .page-number.active{
  background:var(--primary-color);
  border-color:var(--primary-color);
  color:#fff;
  cursor:default;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--primary-color) 16%, transparent),
             0 6px 16px -8px color-mix(in srgb, var(--primary-color) 70%, transparent);
}

/* soft staggered entrance on render */
@keyframes pgIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.pagination-controls .page-numbers .page-number:nth-child(1){animation-delay:.03s}
.pagination-controls .page-numbers .page-number:nth-child(2){animation-delay:.06s}
.pagination-controls .page-numbers .page-number:nth-child(3){animation-delay:.09s}
.pagination-controls .page-numbers .page-number:nth-child(4){animation-delay:.12s}
.pagination-controls .page-numbers .page-number:nth-child(5){animation-delay:.15s}
.pagination-controls .page-numbers .page-number:nth-child(6){animation-delay:.18s}
.pagination-controls .page-numbers .page-number:nth-child(7){animation-delay:.21s}
.pagination-controls .page-numbers .page-number:nth-child(n+8){animation-delay:.24s}

@media (prefers-reduced-motion:reduce){
  .pagination-controls .btn-page,
  .pagination-controls .page-number{ animation:none; transition:none; }
  .pagination-controls .btn-page:hover,
  .pagination-controls .page-number:hover{ transform:none; }
}


/* ============================================================
   TABLE ACTION BUTTONS — redesigned: soft tint at rest, solid on hover
   Semantic color carried by --bc; neutral icon at rest, white on hover.
   Robust (monochrome SVGs via filter); works in light and dark themes.
   ============================================================ */
.action-buttons{ display:flex; gap:8px; justify-content:flex-start; flex-wrap:wrap; }

/* semantic color per action class */
.action-buttons .btn-action,
.card .actions button{ --bc:#64748b; }
.action-buttons .btn-view,    .card .actions .btn-view{ --bc:#0284c7; }
.action-buttons .btn-delete,  .card .actions .btn-delete{ --bc:#dc2626; }
.action-buttons .btn-stats,   .card .actions .btn-stats{ --bc:#059669; }
.action-buttons .btn-primary, .card .actions .btn-primary{ --bc:var(--primary-color); }

/* desktop icon-only buttons */
.action-buttons .btn-action{
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9px;
  background:color-mix(in srgb, var(--bc) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--bc) 28%, transparent);
  cursor:pointer; box-shadow:none;
  transition:background .22s cubic-bezier(.4,0,.2,1),
             border-color .22s cubic-bezier(.4,0,.2,1),
             box-shadow .22s cubic-bezier(.4,0,.2,1),
             transform .16s cubic-bezier(.4,0,.2,1);
}
.action-buttons .btn-action img{
  width:17px; height:17px;
  /* neutral grey icon at rest (works on light & dark tint) */
  filter:brightness(0) invert(.55);
  transition:filter .22s ease;
}
.action-buttons .btn-action:hover{
  background:var(--bc);
  border-color:var(--bc);
  transform:translateY(-2px);
  box-shadow:0 6px 14px -8px color-mix(in srgb, var(--bc) 75%, transparent);
}
.action-buttons .btn-action:hover img{ filter:brightness(0) invert(1); } /* white on solid */
.action-buttons .btn-action:active{ transform:translateY(0) scale(.95); }

/* mobile card buttons (icon + text) */
.card .actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.card .actions button{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px; border-radius:9px;
  background:color-mix(in srgb, var(--bc) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--bc) 28%, transparent);
  color:var(--bc);
  font-family:inherit; font-weight:700; font-size:13px;
  cursor:pointer; box-shadow:none;
  transition:background .22s cubic-bezier(.4,0,.2,1),
             border-color .22s cubic-bezier(.4,0,.2,1),
             color .22s cubic-bezier(.4,0,.2,1),
             transform .16s cubic-bezier(.4,0,.2,1);
}
.card .actions button img{
  width:16px; height:16px;
  filter:brightness(0) invert(.55);
  transition:filter .22s ease;
}
.card .actions button:hover{
  background:var(--bc); border-color:var(--bc); color:#fff;
  transform:translateY(-2px);
}
.card .actions button:hover img{ filter:brightness(0) invert(1); }
.card .actions button:active{ transform:translateY(0) scale(.97); }

@media (prefers-reduced-motion:reduce){
  .action-buttons .btn-action,
  .card .actions button{ transition:none; }
  .action-buttons .btn-action:hover,
  .card .actions button:hover{ transform:none; }
}


/* ============================================================
   WORKSPACE (BOT) SWITCHER — stronger, more present trigger
   ============================================================ */
.menu-top .workspace-switcher{ width:284px; max-width:100%; min-width:0; }
.menu-top .workspace-switcher .ws-trigger{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap:10px;
  padding:7px 12px 7px 8px;
  border-radius:13px;
  border:1px solid var(--border-color-dark, var(--border, #e6e9f0));
  background:var(--card-bg-dark, var(--surface, #fff));
  box-shadow:0 1px 3px rgba(0,0,0,.16);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}
.menu-top .workspace-switcher .ws-trigger:hover{
  border-color:color-mix(in srgb, var(--primary-color) 50%, var(--border-color-dark, var(--border, #e6e9f0)));
  box-shadow:0 6px 16px -8px color-mix(in srgb, var(--primary-color) 45%, transparent);
}
.menu-top .workspace-switcher .ws-trigger.ws-trigger--static{
  cursor:default;
  padding-inline:12px;
  pointer-events:none;
}
.menu-top .workspace-switcher .ws-trigger.ws-trigger--static:hover{
  border-color:var(--border-color-dark, var(--border, #e6e9f0));
  box-shadow:0 1px 3px rgba(0,0,0,.16);
}
.menu-top .workspace-switcher.open .ws-trigger{
  border-color:var(--primary-color);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary-color) 16%, transparent);
}
.menu-top .workspace-switcher .ws-trigger .ws-left{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
/* robot icon -> solid accent avatar chip */
.menu-top .workspace-switcher .ws-trigger .ws-left .icon_svg{
  width:36px; height:36px; padding:8px; box-sizing:border-box;
  border-radius:10px;
  background:var(--primary-color);
  filter:brightness(0) invert(1);
  flex-shrink:0;
}
.menu-top .workspace-switcher .ws-trigger .ws-name{
  font-size:15px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-width: 0; flex: 1; display: block;
}
/* arrow in a subtle round chip */
.menu-top .workspace-switcher .ws-arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:7px;
  background:var(--hover-bg-dark, var(--surface-2, #f1f5f9));
  color:var(--text-secondary-dark, var(--text-secondary, #64748b));
  font-size:12px; flex-shrink:0;
}

/* ============================================================
   TICKET / IDEA PAGE — refinement pass (richer, less plain)
   higher specificity (html body) so it wins over earlier blocks
   ============================================================ */
/* page title (the bare h2 above the ticket) */
h2:has(+ .box_ticket){
  display:flex; align-items:center; gap:10px;
  margin:6px 2px 16px;
  font-size:20px; font-weight:800;
  color:var(--text-color-dark, var(--text, #1f2937));
}
h2:has(+ .box_ticket)::before{
  content:""; width:5px; height:22px; border-radius:3px;
  background:var(--primary-color);
}

/* status badge -> pill with dot */
html body .box_ticket .ticket_meta_status{
  display:inline-flex; align-items:center; gap:7px;
  border-radius:999px;
  background:color-mix(in srgb, var(--primary-color) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--primary-color) 28%, transparent);
}
html body .box_ticket .ticket_meta_status::before{
  content:""; width:7px; height:7px; border-radius:50%; background:currentColor;
}

/* meta header gets a quiet leading accent */
html body .box_ticket .ticket_meta_header{ position:relative; overflow:hidden; }
html body .box_ticket .ticket_meta_header::before{
  content:""; position:absolute; inset-block:0; inset-inline-start:0; width:3px;
  background:var(--primary-color);
}

/* author label -> small chip */
html body .box_ticket .ticket_message>span,
html body .box_ticket .ticket_message .message_content>span{
  width:max-content; padding:3px 9px; border-radius:7px;
  background:var(--surface-color-dark, var(--surface-2, #f1f5f9));
}
html body .box_ticket .ticket_message.admin .message_content>span{
  background:color-mix(in srgb, var(--primary-color) 14%, transparent);
}

/* soft staggered entrance for conversation bubbles */
@keyframes tkIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
html body .box_ticket .ticket_message{ animation:tkIn .45s cubic-bezier(.22,.61,.36,1) both; }
html body .box_ticket .box_message .ticket_message:nth-child(1){animation-delay:.04s}
html body .box_ticket .box_message .ticket_message:nth-child(2){animation-delay:.10s}
html body .box_ticket .box_message .ticket_message:nth-child(3){animation-delay:.16s}
html body .box_ticket .box_message .ticket_message:nth-child(n+4){animation-delay:.2s}

/* composer submit: presence + soft hover lift */
html body .box_ticket .create_comment input[type="submit"]{
  padding:12px 28px; border-radius:10px;
  box-shadow:0 6px 16px -8px color-mix(in srgb, var(--primary-color) 75%, transparent);
  transition:filter .15s ease, transform .15s ease, box-shadow .2s ease;
}
html body .box_ticket .create_comment input[type="submit"]:hover{
  filter:brightness(.96); transform:translateY(-2px);
  box-shadow:0 10px 22px -8px color-mix(in srgb, var(--primary-color) 80%, transparent);
}
@media (prefers-reduced-motion:reduce){
  html body .box_ticket .ticket_message{ animation:none; }
}

/* ============================================================
   KEYBOARD EDITOR (#root, compiled React) — make the default
   (neutral) keyboard buttons more vivid; styled buttons untouched.
   Targets the chip (rounded-xl + min-h-[2.75rem] + bg-white) only.
   ID specificity (#root) beats Tailwind utilities, no !important.
   ============================================================ */
#root .rounded-xl.min-h-\[2\.75rem\].bg-white{
  background-color:color-mix(in srgb, var(--primary-color, #3b82f6) 8%, #ffffff);
  border-color:color-mix(in srgb, var(--primary-color, #3b82f6) 40%, #cbd5e1);
  box-shadow:0 1px 2px rgba(15,23,42,.08);
}
html.dark #root .rounded-xl.min-h-\[2\.75rem\].bg-white{
  background-color:color-mix(in srgb, var(--primary-color, #3b82f6) 18%, #1e293b);
  border-color:color-mix(in srgb, var(--primary-color, #3b82f6) 52%, #334155);
  color:#e8eef7;
  box-shadow:none;
}


/* ============================================================
   FOLLOW-UP FIXES
   ============================================================ */

/* --- bot switcher: clearer avatar + font-independent arrow --- */
.menu-top .workspace-switcher .ws-trigger .ws-left .icon_svg{
  width:38px; height:38px; padding:6px; box-sizing:border-box;
  border-radius:10px;
  background:var(--primary-color);
  border:0;
  filter:brightness(0) invert(1);   /* white robot on accent — high contrast both themes */
  flex-shrink:0;
}
/* draw the dropdown caret with CSS so it never shows a missing-glyph box */
.menu-top .workspace-switcher .ws-arrow{
  font-size:0; line-height:0;
  width:24px; height:24px; border-radius:7px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--hover-bg-dark, var(--surface-2, #f1f5f9));
  color:var(--text-secondary-dark, var(--text-secondary, #64748b));
  flex-shrink:0;
}
.menu-top .workspace-switcher .ws-arrow::before{
  content:"";
  width:0; height:0;
  border-inline:5px solid transparent;
  border-top:6px solid currentColor;
}

/* --- table action buttons: solid + clearly visible (white icon) --- */
.action-buttons .btn-action{
  background:var(--bc);
  border-color:transparent;
  box-shadow:0 1px 2px rgba(0,0,0,.18);
}
.action-buttons .btn-action img{ filter:brightness(0) invert(1); }
.action-buttons .btn-action:hover{
  background:color-mix(in srgb, var(--bc) 90%, #000);
  border-color:transparent;
  transform:translateY(-2px);
  box-shadow:0 8px 16px -8px color-mix(in srgb, var(--bc) 80%, transparent);
}
.action-buttons .btn-action:hover img{ filter:brightness(0) invert(1); }

.card .actions button{
  background:var(--bc);
  border-color:transparent;
  color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.18);
}
.card .actions button img{ filter:brightness(0) invert(1); }
.card .actions button:hover{
  background:color-mix(in srgb, var(--bc) 90%, #000);
  border-color:transparent; color:#fff;
  transform:translateY(-2px);
}


/* bot avatar fix: subtle tinted box + theme-adaptive grey robot (clear, not a white blob) */
.menu-top .workspace-switcher .ws-trigger .ws-left .icon_svg{
  width:26px; height:26px; padding:0; margin:0;
  background:none; border:0; border-radius:0;
  filter:brightness(0) invert(.42);   /* dark-grey robot for light theme */
  flex-shrink:0;
}


/* ============================================================
   WORKSPACE SWITCHER DROPDOWN — redesigned, soft motion
   ============================================================ */
.menu-top .workspace-switcher .ws-menu{
  margin-top:10px; padding:8px;
  border-radius:14px;
  background:var(--card-bg-dark, var(--surface, #fff));
  border:1px solid var(--border-color-dark, var(--border, #e6e9f0));
  box-shadow:0 16px 40px -16px rgba(0,0,0,.45), 0 4px 12px -8px rgba(0,0,0,.3);
  max-height:340px; overflow-y:auto; overscroll-behavior:contain;
}
.menu-top .workspace-switcher.open .ws-menu{
  animation:wsMenuIn .22s cubic-bezier(.22,.61,.36,1);
}
@keyframes wsMenuIn{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }

.menu-top .workspace-switcher .ws-item{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:10px;
  cursor:pointer;
  border:1px solid transparent;
  transition:background .18s ease, border-color .18s ease;
}
.menu-top .workspace-switcher .ws-item + .ws-item{ margin-top:3px; }
.menu-top .workspace-switcher .ws-item::before{
  content:""; flex-shrink:0;
  width:9px; height:9px; border-radius:50%;
  background:color-mix(in srgb, var(--primary-color) 55%, transparent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary-color) 14%, transparent);
}
.menu-top .workspace-switcher .ws-item:hover{
  background:color-mix(in srgb, var(--primary-color) 10%, transparent);
  border-color:color-mix(in srgb, var(--primary-color) 32%, transparent);
}
.menu-top .workspace-switcher .ws-item .ws-left{
  width:100%; justify-content:space-between; align-items:center; gap:10px; min-width:0;
}
.menu-top .workspace-switcher .ws-item .ws-name{
  font-size:14px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.menu-top .workspace-switcher .ws-item .ws-badge{
  flex-shrink:0; font-size:11px; font-weight:700;
  padding:3px 10px; border-radius:999px;
  background:color-mix(in srgb, var(--primary-color) 14%, transparent);
  color:var(--primary-color);
  border:1px solid color-mix(in srgb, var(--primary-color) 26%, transparent);
}
@media (prefers-reduced-motion:reduce){
  .menu-top .workspace-switcher.open .ws-menu{ animation:none; }
}


/* ============================================================
   PROFILE CARD (info_right) — redesigned: compact, no heavy band
   Used by product detail + user detail (and any .info_right card).
   ============================================================ */
html .manage-container .info_right{
  padding:24px 18px 18px;
  gap:7px;
  align-items:stretch;
}
/* drop the big solid header band */
html .manage-container .info_right::before{ display:none; content:none; }

/* avatar -> clean accent app-tile (icon clearly framed) */
html .manage-container .info_right .avatar{
  width:72px; height:72px;
  margin:0 auto 12px;
  border-radius:18px;
  background:var(--primary-color);
  border:0;
  box-shadow:0 10px 22px -10px color-mix(in srgb, var(--primary-color) 70%, transparent);
  overflow:hidden;
}
html .manage-container .info_right .avatar .avatar-placeholder{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}
html .manage-container .info_right .avatar img{
  width:36px; height:36px;
  filter:brightness(0) invert(1);   /* white type-icon on accent tile */
}

/* name + id */
html .manage-container .info_right > h3,
html .manage-container .info_right .username{
  font-size:19px; font-weight:800; margin:2px 0 0; text-align:center; color:inherit;
}
html .manage-container .info_right .user_id_info{
  text-align:center; direction:ltr;
  color:var(--text-secondary-dark, var(--text-secondary)); font-size:13px; margin:0;
}

/* a touch more breathing room between action buttons */
html .manage-container .info_right > a{ margin-top:2px; }


/* ============================================================
   ACCOUNT MENU (top profile avatar -> dropdown)
   Avatar loads from email (Gravatar) via JS, falls back to image.
   ============================================================ */
.menu-top .account-menu{ position:relative; flex-shrink:0; margin:0 10px; margin-inline-start:auto; }
.menu-top .account-trigger{
  all:unset; cursor:pointer; display:inline-flex; position:relative; border-radius:50%;
}
.menu-top .account-trigger:focus-visible{ outline:2px solid var(--primary-color); outline-offset:3px; }
.menu-top .account-trigger .avatar{
  width:42px; height:42px; border-radius:50%; object-fit:cover; display:block; margin:0;
  border:2px solid color-mix(in srgb, var(--primary-color) 45%, var(--border-color-dark, var(--border, #e6e9f0)));
  box-shadow:0 0 0 3px transparent;
  transition:box-shadow .2s ease, border-color .2s ease;
}
.menu-top .account-trigger:hover .avatar{ box-shadow:0 0 0 3px color-mix(in srgb, var(--primary-color) 16%, transparent); }
.menu-top .account-menu.open .account-trigger .avatar{
  border-color:var(--primary-color);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary-color) 22%, transparent);
}
.menu-top .account-trigger::after{
  content:""; position:absolute; bottom:0; inset-inline-end:0;
  width:11px; height:11px; border-radius:50%; background:#22c55e;
  border:2px solid var(--bg-color-dark, var(--surface, #fff));
}
.menu-top .account-dropdown{
  position:absolute; top:calc(100% + 10px); left:0; right:auto;
  min-width:236px; padding:8px; z-index:1200; direction:rtl;
  background:var(--card-bg-dark, var(--surface, #fff));
  border:1px solid var(--border-color-dark, var(--border, #e6e9f0));
  border-radius:14px;
  box-shadow:0 18px 44px -18px rgba(0,0,0,.55), 0 6px 16px -10px rgba(0,0,0,.35);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.menu-top .account-menu.open .account-dropdown{ opacity:1; visibility:visible; transform:none; }
.menu-top .account-dropdown .acc-head{
  display:flex; align-items:center; gap:11px;
  padding:8px 8px 12px; margin-bottom:6px;
  border-bottom:1px solid var(--border-color-dark, var(--border, #e6e9f0));
}
.menu-top .account-dropdown .acc-avatar{
  width:42px; height:42px; border-radius:50%; object-fit:cover; flex-shrink:0;
  border:1px solid var(--border-color-dark, var(--border));
}
.menu-top .account-dropdown .acc-meta{ display:flex; flex-direction:column; min-width:0; }
.menu-top .account-dropdown .acc-name{ font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.menu-top .account-dropdown .acc-sub{ font-size:11px; color:var(--text-secondary-dark, var(--text-secondary)); direction:ltr; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.menu-top .account-dropdown .acc-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:9px;
  font-size:13.5px; font-weight:600; color:inherit; text-decoration:none; cursor:pointer;
  transition:background .15s ease;
}
.menu-top .account-dropdown .acc-item + .acc-item{ margin-top:1px; }
.menu-top .account-dropdown .acc-form{ margin:1px 0 0; }
.menu-top .account-dropdown button.acc-item{
  width:100%; border:none; background:none; font-family:inherit; text-align:right;
}
.menu-top .account-dropdown .acc-item .icon_svg{ width:17px; height:17px; margin:0; opacity:.85; flex-shrink:0; }
.menu-top .account-dropdown .acc-item:hover{ background:color-mix(in srgb, var(--primary-color) 10%, transparent); }
.menu-top .account-dropdown .acc-item.danger{ color:#ef4444; }
.menu-top .account-dropdown .acc-item.danger:hover{ background:color-mix(in srgb,#ef4444 12%,transparent); }
.menu-top .account-dropdown .acc-sep{ height:1px; background:var(--border-color-dark, var(--border)); margin:6px 4px; }
@media (prefers-reduced-motion:reduce){ .menu-top .account-dropdown{ transition:none; } }


/* ============================================================
   BOT-SWITCH LOADING OVERLAY — playful hopping robot
   ============================================================ */
.bot-loader{
  position:fixed; inset:0; z-index:99999;
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:24px;
  background:color-mix(in srgb, var(--bg-color-dark, #0b0b0c) 80%, transparent);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
}
.bot-loader.show{ display:flex; animation:blFade .25s ease; }
.bot-loader.bl-hide{ animation:blFadeOut .3s ease forwards; }
@keyframes blFade{ from{opacity:0} to{opacity:1} }
@keyframes blFadeOut{ from{opacity:1} to{opacity:0} }

.bot-loader .bl-stage{ position:relative; width:240px; height:104px; }
.bot-loader .bl-walker{
  position:absolute; bottom:18px; left:calc(50% - 34px); width:68px;
  animation:blWalk 2s ease-in-out infinite;
}
@keyframes blWalk{ 0%{transform:translateX(-74px)} 50%{transform:translateX(74px)} 100%{transform:translateX(-74px)} }

.bot-loader .bl-bot{
  width:64px; height:64px; border-radius:18px; margin:0 auto;
  background:var(--primary-color);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 26px -8px color-mix(in srgb, var(--primary-color) 70%, transparent);
  animation:blHop .6s ease-in-out infinite;
}
.bot-loader .bl-bot img{ width:34px; height:34px; filter:brightness(0) invert(1); }
@keyframes blHop{
  0%,100%{ transform:translateY(0) scale(1,1); }
  30%   { transform:translateY(-30px) scale(.92,1.1); }
  60%   { transform:translateY(0) scale(1.12,.88); }
}
.bot-loader .bl-shadow{
  width:50px; height:11px; border-radius:50%; margin:7px auto 0;
  background:rgba(0,0,0,.45); filter:blur(2px);
  animation:blShadow .6s ease-in-out infinite;
}
@keyframes blShadow{
  0%,100%{ transform:scale(1); opacity:.5; }
  30%   { transform:scale(.5); opacity:.28; }
}
.bot-loader .bl-text{
  font-weight:700; font-size:15px; letter-spacing:.2px;
  color:var(--text-color-dark, #eee);
}
.bot-loader .bl-text::after{ content:""; display:inline-block; width:1.2em; text-align:right; animation:blDots 1.2s steps(4,end) infinite; }
@keyframes blDots{ 0%{content:""} 25%{content:"."} 50%{content:".."} 75%,100%{content:"..."} }

@media (prefers-reduced-motion:reduce){
  .bot-loader .bl-walker,
  .bot-loader .bl-bot,
  .bot-loader .bl-shadow,
  .bot-loader .bl-text::after{ animation:none; }
}


/* ============================================================
   SECRET FIELDS — masked by default, reveal with the eye toggle
   ============================================================ */
.secret-field{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.secret-field .secret-mask{ letter-spacing:3px; font-weight:700; user-select:none; }
.secret-field .secret-value{ display:none; }
.secret-field.revealed .secret-mask{ display:none; }
.secret-field.revealed .secret-value{ display:inline; }
.secret-field .secret-toggle{
  all:unset; cursor:pointer; flex-shrink:0;
  width:28px; height:28px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--hover-bg-dark, var(--surface-2, #f1f5f9));
  border:1px solid var(--border-color-dark, var(--border, #e6e9f0));
  transition:background .15s ease, border-color .15s ease;
}
.secret-field .secret-toggle:hover{
  background:color-mix(in srgb, var(--primary-color) 12%, transparent);
  border-color:color-mix(in srgb, var(--primary-color) 40%, transparent);
}
.secret-field .secret-toggle img{ width:16px; height:16px; opacity:.85; }
.secret-field.revealed .secret-toggle{
  background:color-mix(in srgb, var(--primary-color) 14%, transparent);
  border-color:color-mix(in srgb, var(--primary-color) 45%, transparent);
}


/* ============================================================
   LIMITED-ACCESS NOTICE (extend_bot, .access_denied) — calm & clean
   replaces the loud red block with a tidy theme-aware card
   ============================================================ */
.box_extend.access_denied{
  max-width:560px; margin:48px auto; padding:34px 30px 30px;
  background:var(--card-bg-dark, var(--surface, #fff));
  border:1px solid var(--border-color-dark, var(--border, #e6e9f0));
  border-radius:18px;
  color:var(--text-color-dark, var(--text, #1f2937));
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  animation:none;
}
.box_extend.access_denied::before{ display:none; content:none; }

.access_denied .denied_header{ text-align:center; margin-bottom:4px; }
.access_denied .denied_header .icon_svg{
  width:26px; height:26px; padding:15px; margin:0 auto 16px; display:block; box-sizing:content-box;
  border-radius:50%;
  background:color-mix(in srgb, #f59e0b 16%, transparent);
}
.access_denied .denied_header h1{
  color:var(--text-color-dark, var(--text, #1f2937)); font-size:1.4rem; font-weight:800; margin:0 0 8px;
}
.access_denied .denied_header p{
  color:var(--text-secondary-dark, var(--text-secondary, #64748b)); font-size:.95rem; margin:0; line-height:1.8;
}

.access_denied .denied_content{ margin-top:22px; }
.access_denied .denied_card{
  background:transparent; border:0; box-shadow:none; color:inherit;
  padding:22px 0 0; border-top:1px solid var(--border-color-dark, var(--border, #e6e9f0));
  border-radius:0;
}
.access_denied .denied_info{ margin-bottom:22px; }
.access_denied .denied_info h3{
  display:flex; align-items:center; gap:9px;
  color:var(--text-color-dark, var(--text, #1f2937)); font-size:1rem; font-weight:700; margin:0 0 14px;
}
.access_denied .denied_info h3 .icon_svg{ width:18px; height:18px; margin:0; }
.access_denied .denied_reasons{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.access_denied .denied_reasons li{
  display:flex; align-items:flex-start; gap:11px;
  margin:0; padding:13px 15px; border-radius:11px;
  background:var(--hover-bg-dark, var(--surface-2, #f8fafc));
  border:1px solid var(--border-color-dark, var(--border, #eef1f6));
  border-right:3px solid color-mix(in srgb, #f59e0b 75%, transparent);
  color:var(--text-color-dark, var(--text, #1f2937));
  font-size:.9rem; line-height:1.95; text-align:right;
}
.access_denied .denied_reasons li .icon_svg{ width:18px; height:18px; margin:3px 0 0; flex-shrink:0; opacity:.85; }
.access_denied .denied_actions{ display:flex; justify-content:center; margin-top:24px; }
.access_denied .denied_btn.primary_btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 26px; border-radius:11px; font-weight:700; font-size:.9rem;
  background:var(--primary-color); color:#fff; border:0; text-decoration:none;
  box-shadow:0 8px 18px -8px color-mix(in srgb, var(--primary-color) 70%, transparent);
  transition:filter .15s ease, transform .15s ease;
}
.access_denied .denied_btn.primary_btn:hover{ filter:brightness(.95); transform:translateY(-2px); color:#fff; }
.access_denied .denied_btn.primary_btn img{ width:18px; height:18px; filter:brightness(0) invert(1); }

/* ============================================================
   PAYMENT METHOD SELECTION (extend_bot, .extend_pay) — clean redesign
   replaces the loud purple gradient + shimmer with a tidy theme card
   ============================================================ */
.box_extend.extend_pay{
  max-width:760px; margin:48px auto; padding:34px 30px 30px;
  background:var(--card-bg-dark, var(--surface, #fff));
  border:1px solid var(--border-color-dark, var(--border, #e6e9f0));
  border-radius:18px;
  color:var(--text-color-dark, var(--text, #1f2937));
  box-shadow:0 1px 3px rgba(0,0,0,.12);
  overflow:visible;
  animation:none;
}
.box_extend.extend_pay::before{ display:none; content:none; }

.extend_pay .extend_header{ text-align:center; margin-bottom:26px; }
.extend_pay .extend_header .icon_svg{
  width:26px; height:26px; padding:15px; margin:0 auto 16px; display:block; box-sizing:content-box;
  border-radius:50%;
  background:color-mix(in srgb, var(--primary-color) 14%, transparent);
}
.extend_pay .extend_header h1{
  color:var(--text-color-dark, var(--text, #1f2937));
  font-size:1.4rem; font-weight:800; margin:0 0 8px; text-shadow:none;
}
.extend_pay .extend_header p{
  color:var(--text-secondary-dark, var(--text-secondary, #64748b));
  font-size:.95rem; line-height:1.8; margin:0 auto; max-width:460px; opacity:1;
}

.extend_pay .payment_options{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:18px; margin:0;
}
.extend_pay .payment_card{
  display:flex; flex-direction:column;
  background:var(--hover-bg-dark, var(--surface-2, #f8fafc));
  border:1px solid var(--border-color-dark, var(--border, #eef1f6));
  border-radius:14px; padding:22px 20px; color:inherit;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  overflow:hidden;
}
.extend_pay .payment_card::before{ display:none; content:none; }
.extend_pay .payment_card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 24px -14px rgba(0,0,0,.35);
}
.extend_pay .rial_payment:hover{ border-color:color-mix(in srgb, var(--success, #16a34a) 55%, transparent); }
.extend_pay .crypto_payment:hover{ border-color:color-mix(in srgb, var(--warning, #d97706) 55%, transparent); }

.extend_pay .payment_icon{
  width:54px; height:54px; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center; border-radius:14px;
}
.extend_pay .rial_payment .payment_icon{ background:color-mix(in srgb, var(--success, #16a34a) 14%, transparent); }
.extend_pay .crypto_payment .payment_icon{ background:color-mix(in srgb, var(--warning, #d97706) 14%, transparent); }
.extend_pay .payment_icon .icon_svg{ width:26px; height:26px; margin:0; }

.extend_pay .payment_content{ display:flex; flex-direction:column; flex:1 1 auto; }
.extend_pay .payment_content h3{
  font-size:1.15rem; font-weight:700; text-align:center; margin:0 0 6px;
  color:var(--text-color-dark, var(--text, #1f2937));
}
.extend_pay .payment_content p{
  text-align:center; font-size:.88rem; line-height:1.7; margin:0 0 16px;
  color:var(--text-secondary-dark, var(--text-secondary, #64748b));
}
.extend_pay .payment_features{
  list-style:none; padding:0; margin:0 0 20px;
  display:flex; flex-direction:column; gap:9px;
}
.extend_pay .payment_features li{
  display:flex; align-items:center; gap:9px; margin:0; text-align:right;
  font-size:.86rem; color:var(--text-color-dark, var(--text, #374151));
}
.extend_pay .payment_features li .icon_svg{ width:16px; height:16px; margin:0; flex-shrink:0; opacity:.9; }

.extend_pay .payment_btn{
  margin-top:auto; width:100%; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 18px; border-radius:11px;
  font-weight:700; font-size:.9rem; text-decoration:none; color:#fff;
  transition:filter .15s ease, transform .15s ease;
}
.extend_pay .rial_btn{
  background:var(--success, #16a34a);
  box-shadow:0 8px 18px -8px color-mix(in srgb, var(--success, #16a34a) 70%, transparent);
}
.extend_pay .crypto_btn{
  background:var(--warning, #d97706);
  box-shadow:0 8px 18px -8px color-mix(in srgb, var(--warning, #d97706) 70%, transparent);
}
.extend_pay .payment_btn:hover{ filter:brightness(.96); transform:translateY(-2px); color:#fff; }
.extend_pay .payment_btn .btn_arrow{
  width:16px; height:16px; filter:brightness(0) invert(1); transition:transform .15s ease;
}
.extend_pay .payment_btn:hover .btn_arrow{ transform:translateX(-4px); }

@media (max-width:651px){
  .box_extend.extend_pay{ margin:18px auto; padding:22px 16px; width:92%; }
  .extend_pay .extend_header h1{ font-size:1.2rem; }
  .extend_pay .payment_options{ grid-template-columns:1fr; gap:14px; }
}

/* ---- plan + payment-method selection (extend page) ---- */
.extend_pay .plan-block{ margin-bottom:20px; }
.extend_pay .plan-block-label{
  display:block; margin:0 0 10px; font-size:.82rem; font-weight:700;
  color:var(--text-color-dark, var(--text, #374151));
}
.extend_pay .plan-select{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.extend_pay .plan-card{ position:relative; display:block; cursor:pointer; }
.extend_pay .plan-card input{ position:absolute; opacity:0; pointer-events:none; }
.extend_pay .plan-body{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:15px 10px; border-radius:13px; text-align:center;
  background:var(--hover-bg-dark, var(--surface-2, #f8fafc));
  border:1.5px solid var(--border-color-dark, var(--border, #e6e9f0));
  transition:all .15s ease;
}
.extend_pay .plan-card.is-selected .plan-body{
  border-color:var(--primary-color, #2563eb);
  background:color-mix(in srgb, var(--primary-color, #2563eb) 8%, transparent);
}
.extend_pay .plan-dur{ font-size:.9rem; font-weight:700; color:var(--text-color-dark, var(--text, #1f2937)); }
.extend_pay .plan-price{ font-size:1.05rem; font-weight:800; color:var(--primary-color, #2563eb); }
.extend_pay .plan-cur{ font-size:.75rem; font-weight:700; }
.extend_pay .plan-badge{
  position:absolute; top:-8px; inset-inline-end:8px; z-index:1;
  padding:2px 8px; border-radius:20px; font-size:.65rem; font-weight:700;
  background:var(--success, #16a34a); color:#fff;
}

.extend_pay .method-select{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px; }
.extend_pay .method-card{ display:block; cursor:pointer; }
.extend_pay .method-card input{ position:absolute; opacity:0; pointer-events:none; }
.extend_pay .method-body{
  display:flex; align-items:center; gap:11px; height:100%; padding:14px;
  border-radius:13px;
  background:var(--hover-bg-dark, var(--surface-2, #f8fafc));
  border:1.5px solid var(--border-color-dark, var(--border, #e6e9f0));
  transition:all .15s ease;
}
.extend_pay .method-card.is-selected .method-body{
  border-color:var(--primary-color, #2563eb);
  background:color-mix(in srgb, var(--primary-color, #2563eb) 7%, transparent);
}
.extend_pay .method-icon{
  width:42px; height:42px; flex-shrink:0; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
}
.extend_pay .method-icon.rial{ background:color-mix(in srgb, var(--success, #16a34a) 14%, transparent); }
.extend_pay .method-icon.crypto{ background:color-mix(in srgb, var(--warning, #d97706) 14%, transparent); }
.extend_pay .method-icon .icon_svg{ width:22px; height:22px; margin:0; }
.extend_pay .method-info{ display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0; }
.extend_pay .method-title{ font-size:.92rem; font-weight:700; color:var(--text-color-dark, var(--text, #1f2937)); }
.extend_pay .method-desc{ font-size:.72rem; line-height:1.6; color:var(--text-secondary-dark, var(--text-secondary, #64748b)); }
.extend_pay .method-check{
  width:18px; height:18px; flex-shrink:0; border-radius:50%;
  border:2px solid var(--border-color-dark, var(--border, #cbd5e1));
  position:relative; transition:all .15s ease;
}
.extend_pay .method-card.is-selected .method-check{
  border-color:var(--primary-color, #2563eb); background:var(--primary-color, #2563eb);
}
.extend_pay .method-card.is-selected .method-check::after{
  content:''; position:absolute; inset:0; margin:auto; width:6px; height:6px; border-radius:50%; background:#fff;
}

.extend_pay .pay-submit{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; box-sizing:border-box; padding:15px;
  border-radius:13px; text-decoration:none; font-weight:800; font-size:1rem;
  background:var(--primary-color, #2563eb); color:#fff;
  box-shadow:0 12px 24px -10px color-mix(in srgb, var(--primary-color, #2563eb) 75%, transparent);
  transition:filter .15s ease, transform .15s ease;
}
.extend_pay .pay-submit:hover{ filter:brightness(.96); transform:translateY(-1px); color:#fff; }
.extend_pay .pay-submit .btn_arrow{ width:16px; height:16px; filter:brightness(0) invert(1); }

@media (max-width:560px){
  .extend_pay .method-select{ grid-template-columns:1fr; }
}

/* selected plan line on the rial page */
.pay-plan{ font-size:1.1rem; font-weight:800; color:var(--text-color-dark, var(--text, #1f2937)); }

/* ============================================================
   LOGIN / AUTH PAGE — clean split-card redesign
   ============================================================ */
.auth{
  flex:1 1 auto;
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:24px;
  /* formal slate accent (scoped to the auth pages only) */
  --auth:#334155;
  --auth-strong:#1e293b;
}
.auth-card{
  display:grid; grid-template-columns:1.05fr 1fr;
  width:100%; max-width:920px;
  background:var(--card-bg-dark, var(--surface, #fff));
  border:1px solid var(--border-color-dark, var(--border, #e6e9f0));
  border-radius:22px; overflow:hidden;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.06);
}

/* brand side */
.auth-brand{
  position:relative; display:flex; align-items:center;
  padding:44px 38px; overflow:hidden; color:#fff;
  background:linear-gradient(150deg, var(--auth) 0%, var(--auth-strong) 100%);
}
.auth-brand::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(80% 60% at 0% 100%, rgba(255,255,255,.10), transparent 55%);
}
.auth-brand-inner{ position:relative; z-index:1; }
.auth-logo{
  width:58px; height:58px; margin-bottom:22px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25);
}
.auth-logo svg{ width:30px; height:30px; }
.auth-brand-title{ font-size:1.5rem; font-weight:800; margin:0 0 10px; }
.auth-brand-text{ font-size:.92rem; line-height:2; opacity:.92; margin:0 0 24px; }
.auth-points{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:13px; }
.auth-points li{ display:flex; align-items:center; gap:10px; font-size:.88rem; opacity:.96; }
.auth-points li img{ width:16px; height:16px; flex-shrink:0; filter:brightness(0) invert(1); }

/* form side */
.auth-form-side{ padding:44px 40px; display:flex; flex-direction:column; justify-content:center; }
.auth-head{ margin-bottom:24px; }
.auth-title{ font-size:1.55rem; font-weight:800; margin:0 0 8px; color:var(--text-color-dark, var(--text, #1f2937)); }
.auth-subtitle{ font-size:.9rem; line-height:1.8; margin:0; color:var(--text-secondary-dark, var(--text-secondary, #64748b)); }

.auth-error{
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 14px; margin-bottom:18px; border-radius:11px;
  background:color-mix(in srgb, var(--danger, #dc2626) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--danger, #dc2626) 30%, transparent);
  color:var(--danger, #dc2626);
}
.auth-error img{ width:18px; height:18px; margin-top:2px; flex-shrink:0; }
.auth-error span{ display:block; font-size:.86rem; font-weight:600; line-height:1.7; }

.auth-form{ display:flex; flex-direction:column; gap:16px; }
.auth-field{ display:block; }
.auth-label{ display:block; margin-bottom:7px; font-size:.82rem; font-weight:700; color:var(--text-color-dark, var(--text, #374151)); }
.auth-hint{ display:block; margin-top:6px; font-size:.74rem; line-height:1.7; color:var(--text-secondary-dark, var(--text-secondary, #94a3b8)); }
.auth-input{
  display:flex; align-items:center; gap:9px; height:48px; padding:0 12px;
  border:1px solid var(--border-color-dark, var(--border, #d8dde7)); border-radius:12px;
  background:var(--hover-bg-dark, var(--surface-2, #f8fafc));
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.auth-input:focus-within{
  border-color:var(--auth);
  background:var(--card-bg-dark, var(--surface, #fff));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--auth) 22%, transparent);
}
.auth-input-icon{ width:18px; height:18px; flex-shrink:0; color:var(--text-secondary-dark, var(--text-secondary, #94a3b8)); }
.auth-input input{
  flex:1 1 auto; min-width:0; height:100%;
  border:0; outline:0; background:transparent;
  font-family:inherit; font-size:.92rem; color:var(--text-color-dark, var(--text, #1f2937));
}
.auth-input input::placeholder{ color:var(--text-secondary-dark, var(--text-secondary, #9aa6b6)); }
.auth-toggle{
  display:flex; align-items:center; padding:4px; border:0; background:transparent; cursor:pointer;
  color:var(--text-secondary-dark, var(--text-secondary, #94a3b8));
}
.auth-toggle.on{ color:var(--auth); }
.auth-toggle svg{ width:18px; height:18px; }

.auth-btn{
  margin-top:6px; height:50px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:0; border-radius:12px; cursor:pointer;
  background:var(--auth); color:#fff;
  font-family:inherit; font-size:.98rem; font-weight:700;
  box-shadow:0 12px 24px -10px color-mix(in srgb, var(--auth) 75%, transparent);
  transition:filter .15s ease, transform .15s ease;
}
.auth-btn:hover{ filter:brightness(.96); transform:translateY(-1px); }
.auth-btn:active{ transform:translateY(0); }
.auth-btn svg{ width:18px; height:18px; }

.auth-alt{ margin-top:20px; text-align:center; font-size:.88rem; color:var(--text-secondary-dark, var(--text-secondary, #64748b)); }
.auth-alt a{ margin-inline-start:4px; color:var(--auth); font-weight:700; text-decoration:none; }
.auth-alt a:hover{ text-decoration:underline; }
.auth-foot{ margin-top:18px; text-align:center; font-size:.78rem; line-height:1.9; color:var(--text-secondary-dark, var(--text-secondary, #94a3b8)); }
.auth-foot a{ color:var(--text-secondary-dark, var(--text-secondary, #64748b)); text-decoration:underline; }

/* entrance / switch animation — login slides in from the right,
   register from the left, giving a back-and-forth movement feel */
.auth-card{ animation:authSlideRight .45s cubic-bezier(.22,1,.36,1) both; }
.auth-reg .auth-card{ animation-name:authSlideLeft; }

.auth-brand-inner{ animation:authRise .5s .06s ease both; }
.auth-form-side{ animation:authRise .5s .14s ease both; }

@keyframes authSlideRight{
  from{ opacity:0; transform:translateX(48px); }
  to  { opacity:1; transform:translateX(0); }
}
@keyframes authSlideLeft{
  from{ opacity:0; transform:translateX(-48px); }
  to  { opacity:1; transform:translateX(0); }
}
@keyframes authRise{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .auth-card, .auth-brand-inner, .auth-form-side{ animation:none; }
}

@media (max-width:780px){
  .auth-card{ grid-template-columns:1fr; max-width:430px; }
  .auth-brand{ display:none; }
  .auth-form-side{ padding:34px 26px; }
}

/* ============================================================
   ADD-BOT WIZARD (modal stepper)
   ============================================================ */
.wizard-steps{ display:flex; margin:8px 0 22px; }
.wizard-step{
  flex:1; position:relative; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  text-align:center;
}
/* connector line behind the dots (RTL-safe: spans from this dot to the next) */
.wizard-step:not(:last-child)::after{
  content:''; position:absolute; top:14px; right:50%; width:100%; height:2px;
  background:var(--border-color-dark, var(--border, #e2e8f0)); z-index:0;
}
.wizard-step.is-done:not(:last-child)::after{ background:var(--success, #16a34a); }
.wizard-step .wizard-dot{
  position:relative; z-index:1;
  width:30px; height:30px; flex-shrink:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.82rem; font-weight:700;
  background:var(--hover-bg-dark, var(--hover, #eef2f8));
  border:1px solid var(--border-color-dark, var(--border, #e2e8f0));
  color:var(--text-secondary, #64748b);
  transition:all .15s ease;
}
.wizard-step .wizard-label{
  font-size:.74rem; font-weight:600; line-height:1.5;
  color:var(--text-secondary, #64748b);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wizard-step.is-active .wizard-dot{
  background:var(--primary-color, #2563eb); border-color:var(--primary-color, #2563eb); color:#fff;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--primary-color, #2563eb) 18%, transparent);
}
.wizard-step.is-active .wizard-label{ color:var(--text-color-dark, var(--text, #1f2937)); }
.wizard-step.is-done .wizard-dot{
  background:var(--success, #16a34a); border-color:var(--success, #16a34a); color:#fff;
}

.wizard-pane{ display:none; animation:wizardIn .25s ease; }
.wizard-pane.is-active{ display:block; }
@keyframes wizardIn{
  from{ opacity:0; transform:translateX(12px); }
  to  { opacity:1; transform:translateX(0); }
}

/* loading spinner shown on the step buttons while validating */
.btn-spinner{
  display:inline-block; width:14px; height:14px; vertical-align:-2px; margin-inline-end:4px;
  border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%;
  animation:btnSpin .6s linear infinite;
}
.confirm.is-loading{ opacity:.85; cursor:progress; }
@keyframes btnSpin{ to{ transform:rotate(360deg); } }

.wizard-msg{
  margin:0 0 14px; padding:10px 12px; border-radius:10px;
  font-size:.85rem; font-weight:600; line-height:1.8;
}
.wizard-msg.is-err{
  color:var(--danger, #dc2626);
  background:color-mix(in srgb, var(--danger, #dc2626) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--danger, #dc2626) 30%, transparent);
}
.wizard-msg.is-ok{
  color:var(--success, #16a34a);
  background:color-mix(in srgb, var(--success, #16a34a) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--success, #16a34a) 30%, transparent);
}
.wizard-msg.is-loading{
  color:var(--text-secondary, #64748b);
  background:var(--hover-bg-dark, var(--hover, #f1f5f9));
  border:1px solid var(--border-color-dark, var(--border, #e6e9f0));
}
.msg-spinner{
  display:inline-block; width:14px; height:14px; vertical-align:-2px; margin-inline-end:6px;
  border:2px solid color-mix(in srgb, var(--text-secondary, #64748b) 30%, transparent);
  border-top-color:var(--text-secondary, #64748b); border-radius:50%;
  animation:btnSpin .6s linear infinite;
}

.static-value{
  padding:11px 13px; border-radius:10px; direction:ltr; text-align:left;
  background:var(--hover-bg-dark, var(--hover, #f1f5f9));
  border:1px dashed var(--border-color-dark, var(--border, #cbd5e1));
  color:var(--text-color-dark, var(--text, #1f2937));
  font-weight:700; font-size:.92rem;
}

.cname-target{ display:flex; align-items:center; gap:8px; }
.cname-target code{
  flex:1 1 auto; min-width:0; padding:10px 12px; border-radius:10px;
  direction:ltr; text-align:left; white-space:nowrap; overflow-x:auto;
  background:var(--hover-bg-dark, var(--hover, #f1f5f9));
  border:1px solid var(--border-color-dark, var(--border, #e6e9f0));
  font-family:monospace; font-size:.9rem; color:var(--text-color-dark, var(--text, #1f2937));
}
.cname-target .copy-btn{
  flex-shrink:0; padding:9px 14px; border:0; border-radius:10px; cursor:pointer;
  background:var(--primary-color, #2563eb); color:#fff; font-weight:600; font-size:.82rem;
}
.wizard-pane .hint{ margin-top:6px; font-size:.8rem; line-height:1.8; color:var(--text-secondary, #64748b); }

@media (max-width:560px){
  .wizard-step{ font-size:0; gap:0; padding:8px; }
  .wizard-step .wizard-dot{ font-size:.78rem; }
}

/* ============================================================
   RIAL RENEWAL PAGE (payIRR) — clean, theme-aware redesign
   ============================================================ */
.pay-rial{ display:flex; justify-content:center; padding:24px 16px; }
.pay-card{
  width:100%; max-width:600px; padding:34px 30px 30px;
  background:var(--card-bg-dark, var(--surface, #fff));
  border:1px solid var(--border-color-dark, var(--border, #e6e9f0));
  border-radius:18px;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
  color:var(--text-color-dark, var(--text, #1f2937));
}

.pay-head{ text-align:center; margin-bottom:24px; }
.pay-icon{
  width:58px; height:58px; margin:0 auto 16px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--success, #16a34a) 14%, transparent);
  color:var(--success, #16a34a);
}
.pay-icon svg{ width:28px; height:28px; }
.pay-title{ font-size:1.4rem; font-weight:800; margin:0 0 8px; color:var(--text-color-dark, var(--text, #1f2937)); }
.pay-sub{ font-size:.92rem; line-height:1.9; margin:0 auto; max-width:440px; color:var(--text-secondary-dark, var(--text-secondary, #64748b)); }
.pay-bot{ margin:12px 0 0; font-size:.85rem; color:var(--text-secondary-dark, var(--text-secondary, #64748b)); }
.pay-bot b{ color:var(--text-color-dark, var(--text, #1f2937)); }

.pay-code-box{ margin:0 0 14px; }
.pay-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0 0 18px; }
.pay-box{
  padding:16px; border-radius:14px;
  background:var(--hover-bg-dark, var(--surface-2, #f8fafc));
  border:1px solid var(--border-color-dark, var(--border, #eef1f6));
}
.pay-box-label{ display:block; margin-bottom:9px; font-size:.78rem; font-weight:700; color:var(--text-secondary-dark, var(--text-secondary, #64748b)); }
.pay-code{ display:flex; align-items:center; gap:8px; }
.pay-code code{
  flex:1 1 auto; min-width:0; padding:9px 11px; border-radius:9px;
  direction:ltr; unicode-bidi:bidi-override; text-align:left; white-space:nowrap; overflow-x:auto;
  background:var(--card-bg-dark, var(--surface, #fff));
  border:1px solid var(--border-color-dark, var(--border, #e6e9f0));
  font-family:monospace; font-weight:700; font-size:.95rem; letter-spacing:.5px;
  color:var(--text-color-dark, var(--text, #1f2937));
}
.pay-copy{
  flex-shrink:0; padding:9px 13px; border:0; border-radius:9px; cursor:pointer;
  background:var(--primary-color, #2563eb); color:#fff; font-weight:700; font-size:.8rem;
  transition:filter .15s ease;
}
.pay-copy:hover{ filter:brightness(.95); }
.pay-amount{ display:flex; align-items:baseline; gap:4px; font-size:1.7rem; font-weight:800; color:var(--success, #16a34a); }
.pay-cur{ font-size:1rem; font-weight:700; opacity:.85; }

.pay-tg{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; box-sizing:border-box; padding:13px 18px; margin-bottom:24px;
  border-radius:12px; text-decoration:none; font-weight:700; font-size:.95rem;
  background:#229ED9; color:#fff;
  box-shadow:0 10px 22px -10px rgba(34,158,217,.7);
  transition:filter .15s ease, transform .15s ease;
}
.pay-tg:hover{ filter:brightness(.96); transform:translateY(-1px); color:#fff; }
.pay-tg svg{ width:20px; height:20px; }

.pay-steps{
  padding-top:22px; border-top:1px solid var(--border-color-dark, var(--border, #eef1f6));
}
.pay-steps-title{ font-size:1rem; font-weight:700; margin:0 0 14px; color:var(--text-color-dark, var(--text, #1f2937)); }
.pay-steps-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.pay-steps-list li{
  display:flex; align-items:flex-start; gap:11px;
  padding:12px 14px; border-radius:11px;
  background:var(--hover-bg-dark, var(--surface-2, #f8fafc));
  border:1px solid var(--border-color-dark, var(--border, #eef1f6));
  font-size:.88rem; line-height:1.9; color:var(--text-color-dark, var(--text, #374151));
}
.pay-step-n{
  flex-shrink:0; width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--primary-color, #2563eb); color:#fff; font-size:.78rem; font-weight:700;
}

@media (max-width:520px){
  .pay-card{ padding:24px 18px; }
  .pay-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   COLLAPSIBLE SIDEBAR + top-nav layout fix
   ============================================================ */
/* keep the bot selector next to the menu (not centered) */
.menu-top{ justify-content:flex-start; gap:12px; }
.account-menu{ margin-inline-start:auto; }

.sidebar-collapse-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; flex-shrink:0;
  border:0; border-radius:12px; cursor:pointer;
  background:var(--card-bg-dark, var(--surface, #fff));
  color:var(--text-color-dark, var(--text, #334155));
  box-shadow:0 1px 3px rgba(0,0,0,.12);
  transition:background .15s ease;
}
.sidebar-collapse-toggle:hover{ background:var(--hover-bg-dark, var(--hover, #eef2f8)); }
.sidebar-collapse-toggle svg{ width:22px; height:22px; }

.sidebar{ transition:width .25s ease; }
.content-area{ transition:margin-right .25s ease, width .25s ease; }

@media (min-width:769px){
  html.sidebar-collapsed .sidebar{ width:74px; }
  html.sidebar-collapsed .content-area{ margin-right:74px; width:calc(100% - 74px); }
  html.sidebar-collapsed .sidebar .menu-text,
  html.sidebar-collapsed .sidebar .submenu-arrow,
  html.sidebar-collapsed .sidebar .submenu,
  html.sidebar-collapsed .sidebar-footer .menu-text{ display:none; }
  html.sidebar-collapsed .sidebar .menu-link,
  html.sidebar-collapsed .sidebar .submenu-toggle,
  html.sidebar-collapsed .sidebar-footer .logout-link{
    justify-content:center; padding-inline:0;
  }
  html.sidebar-collapsed .sidebar .menu-link .icon_svg,
  html.sidebar-collapsed .sidebar-footer .logout-link .icon_svg{ margin:0; }
}
@media (max-width:768px){
  .sidebar-collapse-toggle{ display:none; }
}

/* top bar widens together with the content when the sidebar collapses */
@media (min-width:769px){
  .menu-top{
    width:calc(100% - 280px); margin-right:280px; margin-left:0;
    transition:width .25s ease, margin-right .25s ease;
  }
  html.sidebar-collapsed .menu-top{ width:calc(100% - 74px); margin-right:74px; }
}

/* collapsed sidebar: submenus as hover flyouts, labels as tooltips */
@media (min-width:769px){
  html.sidebar-collapsed .sidebar,
  html.sidebar-collapsed .sidebar .sidebar-menu{ overflow:visible; }
  html.sidebar-collapsed .sidebar .menu-item{ position:relative; }

  /* flyout submenu — always present but hidden; shown on hover. Uses
     visibility/opacity (not display) + a close delay + an invisible bridge
     so the cursor can travel from the icon to the panel without losing hover. */
  html.sidebar-collapsed .sidebar .menu-item > .submenu{
    display:block; position:absolute; top:-6px; right:100%; margin-right:10px;
    max-height:none; overflow:visible;
    min-width:208px; padding:8px;
    background:var(--card-bg-dark, var(--surface, #fff));
    border:1px solid var(--border-color-dark, var(--border, #e6e9f0));
    border-radius:12px; box-shadow:0 16px 34px -12px rgba(0,0,0,.35);
    opacity:0; visibility:hidden; transform:translateX(8px);
    transition:opacity .14s ease, transform .14s ease, visibility 0s linear .25s;
    z-index:1300;
  }
  /* transparent bridge over the 10px gap (keeps :hover continuous) */
  html.sidebar-collapsed .sidebar .menu-item > .submenu::before{
    content:''; position:absolute; top:0; bottom:0; right:-12px; width:12px;
  }
  html.sidebar-collapsed .sidebar .menu-item:hover > .submenu,
  html.sidebar-collapsed .sidebar .menu-item > .submenu:hover{
    opacity:1; visibility:visible; transform:translateX(0);
    transition:opacity .14s ease, transform .14s ease, visibility 0s;
  }

  /* label tooltip for simple items */
  html.sidebar-collapsed .sidebar .menu-item > .menu-link:not(.submenu-toggle) .menu-text{
    display:block; position:absolute; top:50%; right:100%; transform:translateY(-50%);
    margin-right:12px; white-space:nowrap; padding:8px 12px; pointer-events:none;
    background:var(--card-bg-dark, var(--surface, #fff));
    border:1px solid var(--border-color-dark, var(--border, #e6e9f0));
    border-radius:10px; box-shadow:0 12px 26px -12px rgba(0,0,0,.32);
    color:var(--text-color-dark, var(--text, #1f2937)); font-size:.85rem;
    opacity:0; visibility:hidden; transition:opacity .14s ease, visibility 0s linear .2s;
    z-index:1300;
  }
  html.sidebar-collapsed .sidebar .menu-item:hover > .menu-link:not(.submenu-toggle) .menu-text{
    opacity:1; visibility:visible; transition:opacity .14s ease, visibility 0s;
  }
}

.req-pane{ display:none; animation:wizardIn .25s ease; }
.req-pane.is-active{ display:block; }

/* the request wizard needs more room than the default modal width */
#add_new_report .modal-box{ max-width:600px; }

.req-head{
  display:flex; align-items:center; gap:11px;
  margin:0 0 14px;
}
.modal-box .req-back{
  flex-shrink:0; width:32px; height:32px; padding:0; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  border:1px solid var(--border-color-dark, var(--border, #e6e9f0));
  background:var(--hover-bg-dark, var(--surface-2, #f8fafc));
  color:var(--text-secondary-dark, var(--text-secondary, #64748b));
  transition:color .16s ease, border-color .16s ease, background .16s ease;
}
.modal-box .req-back:hover{
  color:var(--primary-color);
  border-color:color-mix(in srgb, var(--primary-color) 45%, transparent);
  background:color-mix(in srgb, var(--primary-color) 8%, transparent);
}
.modal-box .req-back svg{ width:15px; height:15px; }
.req-pane-title{
  margin:0; font-size:15px; font-weight:800; line-height:1.6;
  color:var(--text-color-dark, var(--text, #1f2937));
}

.modal-box .req-lead{
  margin:0 0 16px; font-size:12.5px; font-weight:500; line-height:1.95;
  color:var(--text-secondary-dark, var(--text-secondary, #64748b));
}

/* inline warning inside a wizard pane */
.req-note{
  display:flex; align-items:flex-start; gap:10px;
  margin:0 0 16px; padding:12px 14px; border-radius:12px;
  font-size:12.5px; font-weight:600; line-height:1.95;
  color:#ef4444;
  background:color-mix(in srgb, #ef4444 8%, transparent);
  border:1px solid color-mix(in srgb, #ef4444 24%, transparent);
}
.req-note svg{ width:17px; height:17px; flex-shrink:0; margin-top:4px; }
.req-note b{ font-weight:800; }

.modal-box .hint{
  display:block; margin-top:7px;
  font-size:11.5px; font-weight:500; line-height:1.85;
  color:var(--text-secondary-dark, var(--text-secondary, #94a3b8));
}
.req-counter b{
  font-weight:800; font-variant-numeric:tabular-nums;
  color:var(--text-secondary-dark, var(--text-secondary, #64748b));
}

.paste-note{
  display:block; margin-top:7px;
  font-size:11.5px; font-weight:700; line-height:1.8;
  color:#0d9488;
}
.paste-note.is-error{ color:#ef4444; }

/* step 1 — request type chooser */
.req-type-grid{ display:flex; flex-direction:column; gap:8px; margin:0 0 4px; }
.req-type{
  position:relative; display:flex; align-items:center; gap:13px; width:100%;
  padding:12px 14px; cursor:pointer; text-align:start;
  border:1px solid var(--border-color-dark, var(--border, #e6e9f0)); border-radius:14px;
  background:var(--card-bg-dark, var(--surface, #fff)); color:var(--text-color-dark, var(--text, #1f2937));
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.req-type:hover{
  border-color:color-mix(in srgb, var(--rt, var(--primary-color)) 42%, transparent);
  background:color-mix(in srgb, var(--rt, var(--primary-color)) 4%, var(--card-bg-dark, var(--surface, #fff)));
  box-shadow:0 10px 22px -16px color-mix(in srgb, var(--rt, var(--primary-color)) 85%, transparent);
}
.req-type:focus-visible{ outline:2px solid var(--rt, var(--primary-color)); outline-offset:2px; }
.req-type .req-ico{
  flex-shrink:0; width:40px; height:40px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--rt, var(--primary-color));
  background:color-mix(in srgb, var(--rt, var(--primary-color)) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--rt, var(--primary-color)) 20%, transparent);
  transition:background .16s ease;
}
.req-type:hover .req-ico{ background:color-mix(in srgb, var(--rt, var(--primary-color)) 15%, transparent); }
.req-type .req-ico svg{ width:19px; height:19px; }
.req-type .req-info{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
.req-type .req-name{ font-size:14px; font-weight:800; line-height:1.6; }
.req-type .req-desc{
  font-size:12px; font-weight:500; line-height:1.8;
  color:var(--text-secondary-dark, var(--text-secondary, #64748b));
}
.req-type .req-go{
  flex-shrink:0; display:inline-flex; align-items:center;
  color:var(--text-secondary-dark, var(--text-secondary, #cbd5e1));
  transition:transform .16s ease, color .16s ease;
}
.req-type .req-go svg{ width:15px; height:15px; }
.req-type:hover .req-go{ transform:translateX(-3px); color:var(--rt, var(--primary-color)); }

/* outage diagnosis — animated scanner */
.diag-scanner{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:24px 0 10px; }
.diag-radar{ position:relative; width:88px; height:88px; }
.diag-radar::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg,
    color-mix(in srgb, var(--primary-color, #2563eb) 45%, transparent), transparent 68%);
  animation:diagSweep 1.1s linear infinite;
}
.diag-radar::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid color-mix(in srgb, var(--primary-color, #2563eb) 28%, transparent);
}
.diag-radar i{
  position:absolute; inset:0; margin:auto; width:12px; height:12px; border-radius:50%;
  border:2px solid var(--primary-color, #2563eb); background:transparent; opacity:0;
  animation:diagPulse 1.8s ease-out infinite;
}
.diag-radar i:nth-child(2){ animation-delay:.6s; }
.diag-radar i:nth-child(3){ animation-delay:1.2s; }
@keyframes diagSweep{ to{ transform:rotate(360deg); } }
@keyframes diagPulse{
  0%{ width:12px; height:12px; opacity:.6; }
  100%{ width:88px; height:88px; opacity:0; }
}
.diag-scan-text{ font-size:.85rem; font-weight:600; color:var(--text-secondary, #64748b); }

/* outage diagnosis — summary banner */
.diag-summary{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; margin-bottom:12px;
  font-weight:700; font-size:.9rem; line-height:1.7;
}
.diag-summary__ic{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; color:#fff; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.diag-summary.ok{ color:var(--success, #16a34a); background:color-mix(in srgb, var(--success, #16a34a) 10%, transparent); }
.diag-summary.ok .diag-summary__ic{ background:var(--success, #16a34a); }
.diag-summary.bad{ color:var(--danger, #dc2626); background:color-mix(in srgb, var(--danger, #dc2626) 10%, transparent); }
.diag-summary.bad .diag-summary__ic{ background:var(--danger, #dc2626); }

/* outage diagnosis — result rows */
.diag-list{ display:flex; flex-direction:column; gap:8px; }
.diag-row{
  display:flex; gap:11px; align-items:flex-start; padding:11px 13px; border-radius:12px;
  border:1px solid var(--border-color-dark, var(--border, #e6e9f0));
  background:var(--card-bg-dark, var(--surface, #fff));
  animation:diagItemIn .35s ease both;
}
@keyframes diagItemIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
.diag-row.ok{ border-color:color-mix(in srgb, var(--success, #16a34a) 30%, transparent); }
.diag-row.bad{
  border-color:color-mix(in srgb, var(--danger, #dc2626) 32%, transparent);
  background:color-mix(in srgb, var(--danger, #dc2626) 5%, transparent);
}
.diag-row__ic{
  flex-shrink:0; width:22px; height:22px; border-radius:50%; color:#fff; font-weight:800; font-size:.72rem;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.diag-row.ok .diag-row__ic{ background:var(--success, #16a34a); }
.diag-row.bad .diag-row__ic{ background:var(--danger, #dc2626); }
.diag-row__body{ min-width:0; }
.diag-row__title{ font-weight:700; font-size:.88rem; margin-bottom:2px; color:var(--text-color-dark, var(--text, #1f2937)); }
.diag-row__detail{ font-size:.81rem; line-height:1.9; color:var(--text-secondary, #64748b); }

/* outage diagnosis — call-to-action (open a ticket after a clean check) */
.diag-cta{
  margin-top:14px; padding:14px; border-radius:12px; text-align:center;
  border:1px dashed var(--border-color-dark, var(--border, #cbd5e1));
  background:var(--hover-bg-dark, var(--hover, #f8fafc));
}
.diag-cta__q{ margin:0 0 10px; font-size:.84rem; line-height:1.9; color:var(--text-secondary, #64748b); }

/* ============================================================
   TICKET DETAIL PAGE (report/ticket.html) — modern rewrite
   ============================================================ */
.tk-page{ max-width:none; width:100%; }
.tk-head{ margin-bottom:18px; }
.tk-back{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:12px;
  font-size:.85rem; font-weight:600; text-decoration:none;
  color:var(--text-secondary, #64748b); transition:color .15s ease;
}
.tk-back:hover{ color:var(--primary-color, #2563eb); }
.tk-back-arrow{ display:inline-block; transform:scaleX(-1); }
.tk-title{ margin:0 0 10px; font-size:1.35rem; font-weight:800; line-height:1.6; color:var(--text-color-dark, var(--text, #0f172a)); }
.tk-badges{ display:flex; flex-wrap:wrap; gap:8px; }
.tk-chip{
  display:inline-flex; align-items:center; padding:5px 12px; border-radius:999px;
  font-size:.78rem; font-weight:700; line-height:1;
  background:var(--hover-bg-dark, var(--hover, #f1f5f9)); color:var(--text-color-dark, var(--text, #334155));
  border:1px solid var(--border-color-dark, var(--border, #e6e9f0));
}
.tk-chip.tk-type{
  background:color-mix(in srgb, var(--primary-color, #2563eb) 12%, transparent);
  color:var(--primary-color, #2563eb);
  border-color:color-mix(in srgb, var(--primary-color, #2563eb) 30%, transparent);
}
.tk-chip.tk-muted{ direction:ltr; }

/* status colors (shared by chip + sidebar dot) */
.tk-status--pending{ --tkc:#2563eb; }
.tk-status--accepted{ --tkc:#16a34a; }
.tk-status--done{ --tkc:#0d9488; }
.tk-status--rejected{ --tkc:#dc2626; }
.tk-status--not_view{ --tkc:#64748b; }
.tk-chip.tk-status{
  background:color-mix(in srgb, var(--tkc, #64748b) 13%, transparent);
  color:var(--tkc, #64748b);
  border-color:color-mix(in srgb, var(--tkc, #64748b) 32%, transparent);
}

.tk-grid{ display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start; }

/* ----- conversation ----- */
.tk-conv{ min-width:0; display:flex; flex-direction:column; gap:18px; }
.tk-thread{ display:flex; flex-direction:column; gap:16px; }
.tk-msg{ display:flex; gap:12px; align-items:flex-start; }
.tk-msg.is-admin{ flex-direction:row-reverse; }
.tk-avatar{
  flex-shrink:0; width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1rem; color:#fff;
  background:linear-gradient(135deg, var(--primary-color, #2563eb), color-mix(in srgb, var(--primary-color, #2563eb) 55%, #000));
  box-shadow:0 6px 16px -8px color-mix(in srgb, var(--primary-color, #2563eb) 80%, transparent);
}
.tk-msg.is-admin .tk-avatar{
  background:linear-gradient(135deg, #16a34a, #0d9488);
  box-shadow:0 6px 16px -8px rgba(13,148,136,.7);
}
.tk-avatar img{ width:22px; height:22px; filter:brightness(0) invert(1); }
.tk-bubble{
  position:relative; max-width:80%; padding:13px 16px; border-radius:16px;
  background:var(--card-bg-dark, var(--surface, #fff));
  border:1px solid var(--border-color-dark, var(--border, #e6e9f0));
  border-top-right-radius:5px;
  box-shadow:0 8px 22px -18px rgba(15,23,42,.45);
}
.tk-msg.is-admin .tk-bubble{
  border-top-right-radius:16px; border-top-left-radius:5px;
  background:color-mix(in srgb, var(--primary-color, #2563eb) 6%, var(--card-bg-dark, var(--surface, #fff)));
  border-color:color-mix(in srgb, var(--primary-color, #2563eb) 22%, var(--border-color-dark, var(--border, #e6e9f0)));
}
.tk-meta-row{ display:flex; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
.tk-author{ font-weight:800; font-size:.86rem; color:var(--text-color-dark, var(--text, #0f172a)); }
.tk-time{ font-size:.72rem; color:var(--text-secondary, #94a3b8); direction:ltr; }
.tk-text{ margin:0; font-size:.9rem; line-height:2; color:var(--text-color-dark, var(--text, #334155)); white-space:pre-line; word-break:break-word; }
.tk-attach{ display:inline-block; margin-top:10px; border-radius:12px; overflow:hidden; border:1px solid var(--border-color-dark, var(--border, #e6e9f0)); }
.tk-attach img{ display:block; max-width:240px; max-height:200px; object-fit:cover; transition:transform .2s ease; }
.tk-attach:hover img{ transform:scale(1.03); }

/* ----- reply box ----- */
.tk-reply{
  padding:18px; border-radius:16px;
  background:var(--card-bg-dark, var(--surface, #fff));
  border:1px solid var(--border-color-dark, var(--border, #e6e9f0));
}
.tk-reply--closed{ display:flex; align-items:center; gap:12px; }
.tk-reply-closed-ico{ flex-shrink:0; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; background:var(--success, #16a34a); }
.tk-reply-closed-text{ margin:0; font-size:.95rem; font-weight:700; color:var(--text-color-dark, var(--text, #0f172a)); }
.tk-reply-title{ margin:0 0 12px; font-size:1rem; font-weight:800; color:var(--text-color-dark, var(--text, #0f172a)); }
.tk-reply textarea{
  width:100%; min-height:110px; resize:vertical; padding:13px 14px; border-radius:12px;
  font:inherit; font-size:.9rem; line-height:1.9;
  background:var(--input-bg-dark, var(--surface, #fff));
  border:1px solid var(--border-color-dark, var(--border, #e6e9f0));
  color:var(--text-color-dark, var(--text, #1f2937));
  transition:border-color .15s ease, box-shadow .15s ease;
}
.tk-reply textarea:focus{
  outline:none; border-color:var(--primary-color, #2563eb);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary-color, #2563eb) 16%, transparent);
}

/* ----- pretty file upload (dropzone) ----- */
.tk-dropzone{
  display:block; margin-top:12px; padding:16px; cursor:pointer; border-radius:14px;
  border:2px dashed var(--border-color-dark, var(--border, #cbd5e1));
  background:var(--hover-bg-dark, var(--hover, #f8fafc));
  transition:border-color .15s ease, background .15s ease;
}
.tk-dropzone:hover, .tk-dropzone.is-drag{
  border-color:var(--primary-color, #2563eb);
  background:color-mix(in srgb, var(--primary-color, #2563eb) 7%, transparent);
}
.tk-dropzone.has-file{ cursor:default; border-style:solid; }
.tk-dz-idle{ display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; }
.tk-dz-ico{
  width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  color:var(--primary-color, #2563eb);
  background:color-mix(in srgb, var(--primary-color, #2563eb) 12%, transparent);
}
.tk-dz-ico svg{ width:26px; height:26px; }
.tk-dz-title{ font-size:.86rem; font-weight:700; color:var(--text-color-dark, var(--text, #334155)); }
.tk-dz-hint{ font-size:.74rem; color:var(--text-secondary, #94a3b8); }
.tk-dz-preview{ display:flex; align-items:center; gap:12px; }
/* respect the [hidden] attribute (the display rules above would otherwise override it) */
.tk-dz-idle[hidden], .tk-dz-preview[hidden]{ display:none; }
.tk-dz-thumb{ width:56px; height:56px; flex-shrink:0; object-fit:cover; border-radius:10px; border:1px solid var(--border-color-dark, var(--border, #e6e9f0)); }
.tk-dz-file{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.tk-dz-name{ font-size:.84rem; font-weight:700; color:var(--text-color-dark, var(--text, #334155)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tk-dz-size{ font-size:.74rem; color:var(--text-secondary, #94a3b8); direction:ltr; text-align:right; }
.tk-dz-remove{
  flex-shrink:0; width:30px; height:30px; border-radius:50%; cursor:pointer; line-height:1;
  border:0; font-size:1.2rem; font-weight:700;
  background:color-mix(in srgb, var(--danger, #dc2626) 12%, transparent); color:var(--danger, #dc2626);
  transition:background .15s ease;
}
.tk-dz-remove:hover{ background:color-mix(in srgb, var(--danger, #dc2626) 22%, transparent); }

.tk-reply-actions{ margin-top:14px; display:flex; justify-content:flex-start; }
.tk-send{
  display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border:0; border-radius:12px; cursor:pointer;
  font:inherit; font-size:.9rem; font-weight:700; color:#fff;
  background:var(--primary-color, #2563eb);
  box-shadow:0 10px 22px -12px color-mix(in srgb, var(--primary-color, #2563eb) 85%, transparent);
  transition:transform .15s ease, filter .15s ease;
}
.tk-send:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.tk-send svg{ width:18px; height:18px; transform:scaleX(-1); }

/* ----- meta sidebar ----- */
.tk-side{ min-width:0; }
.tk-card{
  position:sticky; top:84px; padding:18px;
  border-radius:16px; background:var(--card-bg-dark, var(--surface, #fff));
  border:1px solid var(--border-color-dark, var(--border, #e6e9f0));
}
.tk-card-title{ margin:0 0 12px; font-size:.95rem; font-weight:800; color:var(--text-color-dark, var(--text, #0f172a)); }
.tk-info{ list-style:none; margin:0; padding:0; }
.tk-info li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 0; border-bottom:1px dashed var(--border-color-dark, var(--border, #e6e9f0));
}
.tk-info li:last-child{ border-bottom:0; }
.tk-info li span{ font-size:.8rem; color:var(--text-secondary, #64748b); flex-shrink:0; }
.tk-info li b{ font-size:.84rem; font-weight:700; color:var(--text-color-dark, var(--text, #1f2937)); text-align:left; word-break:break-word; }
.tk-status-dot{ display:inline-flex; align-items:center; gap:6px; color:var(--tkc, #64748b) !important; }
.tk-status-dot::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--tkc, #64748b); }

@media (max-width:900px){
  .tk-grid{ grid-template-columns:1fr; }
  .tk-card{ position:static; }
  .tk-bubble{ max-width:88%; }
}

@media (max-width:560px){
  .req-type{ padding:11px 12px; gap:11px; }
  .req-type .req-ico{ width:36px; height:36px; border-radius:10px; }
  .req-type .req-ico svg{ width:17px; height:17px; }
  .req-type .req-name{ font-size:13.5px; }
  .req-type .req-desc{ font-size:11.5px; }
}

/* ===== GATEWAY SETTINGS (settings/gateway.html) ===== */
.gw-wrap {
  /* light theme tokens — overridden for dark in dark.css */
  --gw-card-bg: var(--surface, #ffffff);
  --gw-border: var(--border, #e6e9f0);
  --gw-text: var(--text, #1f2937);
  --gw-muted: var(--text-secondary, #64748b);
  --gw-input-bg: var(--surface, #ffffff);
  --gw-input-border: var(--gray-300, #d1d5db);
  --gw-track: var(--gray-300, #d1d5db);
  --gw-on: var(--success, #16a34a);
  --gw-danger: var(--danger, #dc2626);
}

.gw-intro { color: var(--gw-muted); font-size: 13px; line-height: 1.9; margin: 4px 0 18px; }

/* One card per gateway. A second column appears only when there is genuinely
   room for two full cards — at the panel's usual content width (~840px) the old
   2-column grid left the fields ~175px wide and wrapped every hint onto two
   lines. `min(560px, 100%)` lets the track shrink below the ideal card width on
   a phone instead of forcing the page to scroll sideways. */
.gw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(560px, 100%), 1fr)); gap: 18px; }

.gw-card {
  display: flex; flex-direction: column;
  background: var(--gw-card-bg);
  border: 1px solid var(--gw-border);
  border-radius: 16px;
  padding: 18px 18px 20px;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .05));
}
/* the switch sits next to the gateway name rather than at the far edge — on a
   full-width card `space-between` pushed them ~700px apart */
.gw-card-head {
  display: flex; align-items: center; justify-content: flex-start; gap: 14px;
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--gw-border);
}
.gw-card-head h4 { margin: 0; font-size: 15px; font-weight: 700; color: var(--gw-text); }

/* toggle switch */
.gw-switch { position: relative; display: inline-flex; flex: 0 0 auto; width: 46px; height: 26px; cursor: pointer; }
.gw-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.gw-track { position: absolute; inset: 0; border-radius: 999px; background: var(--gw-track); transition: background .2s ease; }
.gw-thumb { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: right .2s ease; }
.gw-switch input:checked ~ .gw-track { background: var(--gw-on); }
.gw-switch input:checked ~ .gw-thumb { right: 23px; }
.gw-switch input:focus-visible ~ .gw-track { box-shadow: 0 0 0 3px rgba(37, 99, 235, .35); }

/* field groups: «شرایط نمایش» and «مبلغ و کش‌بک» */
.gw-group + .gw-group { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--gw-border); }
.gw-group-title {
  display: block; margin-bottom: 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .2px; color: var(--gw-muted);
}

.gw-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 16px; }
.gw-field-row { display: flex; flex-direction: column; min-width: 0; }
.gw-field-row .gw-label { font-size: 12.5px; font-weight: 600; color: var(--gw-text); margin-bottom: 7px; }
.gw-field-row input[type="number"] {
  width: 100%; box-sizing: border-box; padding: 9px 11px;
  border: 1px solid var(--gw-input-border); border-radius: 9px;
  background: var(--gw-input-bg); color: var(--gw-text);
  font-size: 14px; outline: none; transition: border-color .2s ease, box-shadow .2s ease;
  -moz-appearance: textfield;
}
.gw-field-row input[type="number"]::-webkit-outer-spin-button,
.gw-field-row input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gw-field-row input[type="number"]:focus { border-color: var(--primary-color, #2563eb); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.gw-field-row input[type="number"].gw-invalid { border-color: var(--gw-danger); box-shadow: 0 0 0 3px rgba(220, 38, 38, .15); }
.gw-hint { font-size: 11px; color: var(--gw-muted); margin-top: 5px; line-height: 1.6; }
.gw-error { display: none; font-size: 11px; color: var(--gw-danger); margin-top: 5px; }
.gw-error.show { display: block; }

/* sticky save bar */
.gw-bar {
  position: sticky; bottom: 12px; z-index: 5;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 20px; padding: 12px 16px;
  background: var(--gw-card-bg); border: 1px solid var(--gw-border);
  border-radius: 14px; box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, .12));
}
.gw-banner { flex: 1 1 auto; min-width: 160px; font-size: 13px; font-weight: 600; color: var(--gw-muted); }
.gw-banner.ok { color: var(--gw-on); }
.gw-banner.err { color: var(--gw-danger); }
.gw-save {
  padding: 10px 22px; border: none; border-radius: 10px; cursor: pointer;
  background: var(--primary-color, #2563eb); color: #fff; font-size: 14px; font-weight: 600;
  transition: opacity .2s ease, transform .05s ease;
}
.gw-save:hover { opacity: .92; }
.gw-save:active { transform: translateY(1px); }
.gw-save:disabled { opacity: .6; cursor: default; }

/* no viewport media query for .gw-fields: `auto-fit` already collapses the row
   based on the card's own width, which is what matters when a card is narrow on
   a wide screen */

/* ===== BOT TEXTS EDITOR (settings/text.html) ===== */
.tx-wrap,
.tx-bar {
  /* light theme tokens — overridden for dark in dark.css */
  --tx-card-bg: var(--surface, #ffffff);
  --tx-alt-bg: var(--gray-50, #f9fafb);
  --tx-border: var(--border, #e6e9f0);
  --tx-text: var(--text, #1f2937);
  --tx-muted: var(--text-secondary, #64748b);
  --tx-input-bg: var(--surface, #ffffff);
  --tx-input-border: var(--gray-300, #d1d5db);
  --tx-primary: var(--primary-color, #2563eb);
  --tx-on: var(--success-color, #16a34a);
  --tx-danger: var(--danger-color, #dc2626);
  --tx-accent-bg: rgba(37, 99, 235, .08);
}

.tx-intro { color: var(--tx-muted); font-size: 13px; line-height: 2; margin: 4px 0 16px; }
.tx-intro code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  background: var(--tx-accent-bg); color: var(--tx-primary);
  padding: 1px 6px; border-radius: 6px; direction: ltr; display: inline-block;
}

/* toolbar */
.tx-toolbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.tx-search {
  flex: 1 1 260px; min-width: 200px; box-sizing: border-box;
  padding: 10px 14px; border: 1px solid var(--tx-input-border); border-radius: 11px;
  background: var(--tx-input-bg); color: var(--tx-text); font-family: inherit;
  font-size: 14px; outline: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.tx-search:focus { border-color: var(--tx-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
/* pill toggle: «فقط سفارشی‌شده‌ها» */
.tx-toggle {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 8px 14px 8px 12px; border-radius: 999px;
  border: 1px solid var(--tx-border); background: var(--tx-card-bg);
  font-size: 13px; font-weight: 600; color: var(--tx-muted);
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.tx-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.tx-toggle:hover { border-color: var(--tx-primary); color: var(--tx-text); }
.tx-toggle:focus-within { box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); border-color: var(--tx-primary); }
.tx-toggle-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: var(--tx-input-border);
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tx-toggle.is-on {
  background: var(--tx-accent-bg); border-color: var(--tx-primary); color: var(--tx-primary);
}
.tx-toggle.is-on .tx-toggle-dot {
  background: var(--tx-primary); box-shadow: 0 0 0 3px var(--tx-accent-bg); transform: scale(1.05);
}
.tx-count { font-size: 12.5px; font-weight: 600; color: var(--tx-primary); margin-inline-start: auto; }

/* tree groups */
.tx-tree { display: flex; flex-direction: column; gap: 14px; }
.tx-group {
  background: var(--tx-card-bg); border: 1px solid var(--tx-border);
  border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .05));
}
.tx-group-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--tx-text); user-select: none;
  transition: background .15s ease;
}
.tx-group-head::-webkit-details-marker { display: none; }
.tx-group-head:hover { background: var(--tx-alt-bg); }
.tx-group-name { display: flex; align-items: center; gap: 9px; font-size: 14.5px; }
.tx-group-name::before {
  content: "›"; display: inline-block; font-size: 18px; line-height: 1;
  color: var(--tx-muted); transform: rotate(-90deg); transition: transform .2s ease;
}
.tx-group[open] > .tx-group-head .tx-group-name::before { transform: rotate(-270deg); }
.tx-group-count {
  font-size: 11.5px; font-weight: 600; color: var(--tx-muted);
  background: var(--tx-alt-bg); border: 1px solid var(--tx-border);
  padding: 2px 9px; border-radius: 999px; flex: 0 0 auto;
}
.tx-group-body {
  display: flex; flex-direction: column;
  padding: 4px 16px 14px; border-top: 1px solid var(--tx-border);
}
/* nested groups sit slightly inset */
.tx-group-body .tx-group { margin-top: 12px; border-radius: 12px; }

/* field */
.tx-field { padding: 15px 0; border-bottom: 1px dashed var(--tx-border); }
.tx-field:last-child { border-bottom: none; }
.tx-field-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.tx-field-label { font-size: 13.5px; font-weight: 700; color: var(--tx-text); }
.tx-field-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  color: var(--tx-muted); background: var(--tx-alt-bg); border: 1px solid var(--tx-border);
  padding: 1px 8px; border-radius: 6px; direction: ltr;
}
.tx-badge {
  font-size: 11px; font-weight: 700; color: var(--tx-primary);
  background: var(--tx-accent-bg); border: 1px solid rgba(37, 99, 235, .25);
  padding: 2px 9px; border-radius: 999px;
}
.tx-field.tx-dirty { position: relative; }
.tx-field.tx-dirty::before {
  content: ""; position: absolute; inset-inline-start: -16px; top: 15px; bottom: 15px;
  width: 3px; border-radius: 3px; background: var(--tx-primary);
}

.tx-textarea {
  width: 100%; box-sizing: border-box; padding: 11px 13px;
  border: 1px solid var(--tx-input-border); border-radius: 11px;
  background: var(--tx-input-bg); color: var(--tx-text);
  font-family: 'Vazirmatn', inherit; font-size: 14px;
  line-height: 2; outline: none; resize: vertical; min-height: 48px;
  direction: rtl; transition: border-color .2s ease, box-shadow .2s ease;
}
.tx-textarea:focus { border-color: var(--tx-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .13); }

.tx-default {
  margin: 9px 0 0; padding: 11px 13px; white-space: pre-wrap; word-break: break-word;
  font-family: 'Vazirmatn', inherit; font-size: 13.5px;
  line-height: 2; color: var(--tx-muted); background: var(--tx-alt-bg);
  border: 1px dashed var(--tx-border); border-radius: 10px; direction: rtl;
}

.tx-field-msg { font-size: 12px; margin-top: 8px; min-height: 0; color: var(--tx-muted); }
.tx-field-msg.ok { color: var(--tx-on); }
.tx-field-msg.err { color: var(--tx-danger); }

.tx-field-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.tx-len { font-size: 11px; color: var(--tx-muted); margin-inline-start: auto; direction: ltr; }
.tx-len-over { color: var(--tx-danger); font-weight: 700; }

/* buttons */
.tx-btn {
  padding: 9px 18px; border: 1px solid transparent; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600;
  transition: opacity .2s ease, background .2s ease, transform .05s ease;
}
.tx-btn:active { transform: translateY(1px); }
.tx-btn:disabled { opacity: .5; cursor: default; }
.tx-btn-sm { padding: 6px 14px; font-size: 12.5px; }
.tx-btn-primary { background: var(--tx-primary); color: #fff; }
.tx-btn-primary:hover:not(:disabled) { opacity: .92; }
.tx-btn-ghost { background: transparent; color: var(--tx-muted); border-color: var(--tx-border); }
.tx-btn-ghost:hover:not(:disabled) { background: var(--tx-alt-bg); color: var(--tx-text); }

/* sticky save bar */
.tx-bar {
  position: sticky; bottom: 12px; z-index: 5;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 20px 0 4px; padding: 12px 16px;
  background: var(--tx-card-bg); border: 1px solid var(--tx-border);
  border-radius: 14px; box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, .12));
}
.tx-banner { flex: 1 1 auto; min-width: 160px; font-size: 13px; font-weight: 600; color: var(--tx-muted); }
.tx-banner.ok { color: var(--tx-on); }
.tx-banner.err { color: var(--tx-danger); }

@media (max-width: 560px) {
  .tx-toolbar { gap: 10px; }
  .tx-count { margin-inline-start: 0; }
  .tx-field.tx-dirty::before { inset-inline-start: -8px; }
}

/* ============================================================
   PROFESSIONAL / CORPORATE POLISH  (appended override layer)
   Flattens gradients, removes glow + hover-lift, denser tables,
   subtler sidebar active state. Keeps the theme primary color.
   Dark mode keeps its own table styling (dark.css loads after).
   ============================================================ */

/* ---- sidebar: active = subtle tint + accent bar (not a loud fill) ---- */
.sidebar .menu-link.active {
    background: rgba(37, 99, 235, .10);
    color: var(--primary-color);
    border-right: 3px solid var(--primary-color);
    border-radius: 8px;
    font-weight: 700;
}
.sidebar .menu-link.active .icon_svg { filter: none; opacity: 1; }
.sidebar .menu-link.active .submenu-arrow { color: var(--primary-color); }
.sidebar .menu-section { color: #64748b; }

/* ---- primary buttons: flat, no gradient / glow / lift ---- */
.btn-primary,
.btn.btn-primary {
    background: var(--primary-color);
    box-shadow: none;
    border-radius: 8px;
    transition: background-color .15s ease, opacity .15s ease;
}
.btn-primary:hover:not(:disabled),
.btn.btn-primary:hover:not(:disabled) {
    filter: brightness(.94);
    transform: none;
    box-shadow: none;
}
.btn-primary:active { transform: none; }

/* ---- tables: denser rows, flat header, calm hover ---- */
.page-table thead { background: #f8fafc; }
.page-table th {
    padding: 12px 14px;
    color: #475569;
    font-weight: 700;
    border-bottom: 1px solid #e2e8f0;
    transition: none;
}
.page-table th:hover { background: transparent; color: #475569; }
.page-table td { padding: 11px 14px; border-bottom: 1px solid #eef2f7; }
.page-table tbody tr { transition: background-color .12s ease; }
.page-table tbody tr:hover {
    background: #f8fafc;
    transform: none;
    box-shadow: none;
}

/* action buttons inside tables: tinted & flat instead of solid-blue blocks */
.action-buttons .btn-action,
.btn-action.btn-primary {
    background: rgba(37, 99, 235, .10) !important;
    color: var(--primary-color) !important;
    box-shadow: none !important;
    border-radius: 8px;
}
.action-buttons .btn-action:hover,
.btn-action.btn-primary:hover {
    background: var(--primary-color) !important;
    color: #fff !important;
    transform: none !important;
    box-shadow: none !important;
}

/* retire the leftover indigo accent (#667eea) in favour of the theme primary */
.username { color: var(--primary-color); }

/* ---- table: no border box around it (kept flush) ---- */
.table-container {
    border: none;
    box-shadow: none;
}

/* ---- list cards: subtle border + soft neutral shadow ---- */
.card-list .card {
    border: 1px solid #e9edf3;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
}

/* ============================================================
   ACCOUNT PANEL — LICENSE DASHBOARD
   ============================================================ */
.lic-dash {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 6px 20px 40px;
    direction: rtl;
}

/* ---------- hero ---------- */
.lic-hero {
    --lic-surface: var(--card-bg-dark, var(--surface, #fff));
    --lic-surface-2: var(--hover-bg-dark, var(--surface-2, #f6f8fc));
    --lic-line: var(--border-color-dark, var(--border, #e6e9f0));
    --lic-ink: var(--text-color-dark, var(--text, #111827));
    --lic-muted: var(--text-secondary-dark, var(--text-secondary, #64748b));
    --lic-accent: var(--primary-color);
    --lic-status: #16a34a;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 22px;
    padding: 22px 24px 24px;
    color: var(--lic-ink);
    background: linear-gradient(180deg, color-mix(in srgb, var(--lic-accent) 7%, var(--lic-surface)), var(--lic-surface) 58%);
    border: 1px solid color-mix(in srgb, var(--lic-accent) 18%, var(--lic-line));
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px -22px color-mix(in srgb, var(--lic-accent) 60%, transparent);
}

.lic-hero::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--lic-accent), transparent);
}

.lic-hero--expired { --lic-accent: #dc2626; --lic-status: #dc2626; }
.lic-hero--disable { --lic-accent: #64748b; --lic-status: #64748b; }

.lic-hero__glow {
    position: absolute;
    inset-inline-start: -110px;
    top: -150px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--lic-accent) 14%, transparent), transparent 70%);
    pointer-events: none;
    z-index: -1;
}

.lic-hero__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.lic-hero__id {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.lic-hero__badge {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--lic-accent);
    background: color-mix(in srgb, var(--lic-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--lic-accent) 22%, transparent);
}

.lic-hero__badge svg {
    width: 22px;
    height: 22px;
}

.lic-hero__eyebrow {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--lic-muted);
    margin-bottom: 3px;
}

.lic-hero__title {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--lic-ink);
}

.lic-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--lic-status);
    background: color-mix(in srgb, var(--lic-status) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--lic-status) 28%, transparent);
}

.lic-chip__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}

.lic-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 13px;
    font-size: 13.5px;
    font-weight: 800;
    text-decoration: none;
    color: #fff;
    background: var(--lic-accent);
    box-shadow: 0 10px 20px -14px color-mix(in srgb, var(--lic-accent) 90%, transparent);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.lic-hero__cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 14px 24px -14px color-mix(in srgb, var(--lic-accent) 90%, transparent);
}

.lic-hero__cta svg {
    width: 17px;
    height: 17px;
}

.lic-hero__body {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 14px;
    margin-top: 20px;
}

/* ---------- key card ---------- */
.lic-keycard {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--lic-accent) 5%, var(--lic-surface-2));
    border: 1px solid color-mix(in srgb, var(--lic-accent) 20%, transparent);
}

.lic-keycard__label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--lic-muted);
}

.lic-keycard__row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.lic-keycard__code {
    flex: 1;
    min-width: 0;
    direction: ltr;
    unicode-bidi: isolate;
    text-align: right;
    padding: 9px 14px;
    border-radius: 12px;
    background: var(--lic-surface);
    border: 1px solid color-mix(in srgb, var(--lic-accent) 18%, var(--lic-line));
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--lic-ink);
    word-break: break-all;
}

.lic-hero .lic-copy-btn {
    height: 40px;
    min-width: 118px;
    background: var(--lic-accent);
    border-color: transparent;
    color: #fff;
}

.lic-hero .lic-copy-btn:hover {
    filter: brightness(1.06);
    border-color: transparent;
    color: #fff;
}

.lic-hero .lic-copy-btn.is-copied {
    background: #16a34a;
    color: #fff;
}

/* ---------- validity meter ---------- */
.lic-meter {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--lic-surface-2);
    border: 1px solid var(--lic-line);
}

.lic-meter__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.lic-meter__label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--lic-muted);
}

.lic-meter__value {
    font-size: 20px;
    font-weight: 800;
    color: var(--lic-ink);
}

.lic-meter__track {
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--lic-accent) 13%, transparent);
    overflow: hidden;
}

.lic-meter__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--lic-accent) 55%, #fff), var(--lic-accent));
    transition: width .4s ease;
}

.lic-meter__dates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 2px;
}

.lic-meter__dates > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lic-meter__dates span {
    font-size: 11.5px;
    color: var(--lic-muted);
}

.lic-meter__dates b {
    unicode-bidi: isolate;
    font-size: 13px;
    font-weight: 800;
    color: var(--lic-ink);
}


/* ---------- stat tiles ---------- */
.lic-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}

.lic-stat {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    border-radius: 18px;
    background: var(--card-bg-dark, var(--surface, #fff));
    border: 1px solid var(--border-color-dark, var(--border, #e6e9f0));
    box-shadow: 0 2px 10px rgba(0, 0, 0, .035);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.lic-stat:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary-color) 32%, var(--border-color-dark, #e6e9f0));
    box-shadow: 0 14px 26px -18px rgba(0, 0, 0, .4);
}

.lic-stat__top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lic-stat__icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lic-stat__icon svg {
    width: 17px;
    height: 17px;
}

.lic-stat__icon--device { background: color-mix(in srgb, #475569 14%, transparent); color: #64748b; }
.lic-stat__icon--ticket { background: color-mix(in srgb, #1d4ed8 14%, transparent); color: #3b82f6; }
.lic-stat__icon--req    { background: color-mix(in srgb, #b45309 14%, transparent); color: #d97706; }
.lic-stat__icon--time   { background: color-mix(in srgb, #0f766e 14%, transparent); color: #0d9488; }

.lic-stat__lbl {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-secondary-dark, var(--text-secondary, #64748b));
}

.lic-stat__val {
    font-size: 25px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--text-color-dark, var(--text, #111827));
}

.lic-stat__val--sm {
    font-size: 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    letter-spacing: .2px;
}

.lic-stat__hint {
    font-size: 11.5px;
    color: var(--text-secondary-dark, var(--text-secondary, #94a3b8));
}

.lic-stat__track {
    height: 6px;
    border-radius: 999px;
    background: var(--hover-bg-dark, var(--surface-2, #eef2f7));
    overflow: hidden;
}

.lic-stat__val--over { color: #ef4444; }

.lic-stat__hint--over { color: #ef4444; font-weight: 700; }

.lic-stat__track.is-over span { background: #ef4444; }

.lic-count--over {
    background: color-mix(in srgb, #ef4444 12%, transparent);
    color: #ef4444;
}

.lic-stat__track span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--primary-color);
}

/* ---------- panels ---------- */
.lic-split {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.lic-panel {
    background: var(--card-bg-dark, var(--surface, #fff));
    border: 1px solid var(--border-color-dark, var(--border, #e6e9f0));
    border-radius: 20px;
    padding: 20px 22px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .035);
}

.lic-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.lic-panel__title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-color-dark, var(--text, #111827));
}

.lic-panel__sub {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-secondary-dark, var(--text-secondary, #64748b));
}

.lic-count {
    display: inline-block;
    line-height: 1.7;
    padding: 5px 13px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
    font-size: 12.5px;
    font-weight: 800;
}

.lic-table-wrap { overflow-x: auto; }

.lic-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.lic-table th {
    text-align: start;
    padding: 10px 12px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-secondary-dark, var(--text-secondary, #64748b));
    border-bottom: 1px solid var(--border-color-dark, var(--border, #e6e9f0));
    white-space: nowrap;
}

.lic-table td {
    padding: 13px 12px;
    border-bottom: 1px solid var(--border-color-dark, var(--border, #eef2f7));
    color: var(--text-color-dark, var(--text, #1f2937));
    vertical-align: middle;
    white-space: nowrap;
}

.lic-table tbody tr:last-child td { border-bottom: none; }

.lic-table tbody tr:hover td {
    background: var(--hover-bg-dark, var(--surface-2, #f8fafc));
}

.lic-table code {
    background: var(--hover-bg-dark, var(--surface-2, #f8fafc));
    border: 1px solid var(--border-color-dark, var(--border, #e2e8f0));
    border-radius: 8px;
    padding: 4px 9px;
    display: inline-block;
}

.lic-mono {
    direction: ltr;
    unicode-bidi: isolate;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12.5px;
    letter-spacing: .2px;
}

.tk-warn {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0 4px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.95;
    color: #b45309;
    background: color-mix(in srgb, #f59e0b 10%, transparent);
    border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
}

.tk-warn[hidden] { display: none; }

.tk-warn svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin-top: 4px;
}

.lic-table__action { width: 1%; white-space: nowrap; text-align: center; }
.lic-table__action form { margin: 0; display: inline-flex; }

.lic-device-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 9px;
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--border-color-dark, var(--border, #e6e9f0));
    color: var(--text-secondary-dark, var(--text-secondary, #94a3b8));
    transition: color .16s ease, border-color .16s ease, background .16s ease;
}

.lic-device-remove:hover {
    color: #ef4444;
    border-color: color-mix(in srgb, #ef4444 45%, transparent);
    background: color-mix(in srgb, #ef4444 9%, transparent);
}

.lic-device-remove svg { width: 16px; height: 16px; }

.lic-panel__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 36px 12px;
    text-align: center;
    color: var(--text-secondary-dark, var(--text-secondary, #94a3b8));
}

.lic-panel__empty svg {
    width: 40px;
    height: 40px;
    opacity: .6;
}

.lic-panel__empty p {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

.lic-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.lic-facts li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--border-color-dark, var(--border, #e6e9f0));
}

.lic-facts li:last-child { border-bottom: none; }

.lic-facts span {
    font-size: 12.5px;
    color: var(--text-secondary-dark, var(--text-secondary, #64748b));
}

.lic-facts b {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-color-dark, var(--text, #1f2937));
}

.lic-panel__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 13px;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    transition: background .16s ease;
}

.lic-panel__link:hover {
    background: color-mix(in srgb, var(--primary-color) 17%, transparent);
}

.lic-panel__link svg {
    width: 16px;
    height: 16px;
}

/* ---------- standalone license request page ---------- */
.lic-req {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 6px 0 40px;
    direction: rtl;
}

.lic-req__intro {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px;
    border-radius: 20px;
    background: var(--card-bg-dark, var(--surface, #fff));
    border: 1px solid var(--border-color-dark, var(--border, #e6e9f0));
    box-shadow: 0 2px 10px rgba(0, 0, 0, .035);
}

.lic-req__icon {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}

.lic-req__icon svg { width: 26px; height: 26px; }

.lic-req__title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 800;
    color: var(--text-color-dark, var(--text, #111827));
}

.lic-req__text {
    margin: 0;
    font-size: 13px;
    line-height: 2.05;
    color: var(--text-secondary-dark, var(--text-secondary, #64748b));
}

.lic-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.lic-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border-radius: 18px;
    cursor: pointer;
    background: var(--card-bg-dark, var(--surface, #fff));
    border: 1.5px solid var(--border-color-dark, var(--border, #e6e9f0));
    box-shadow: 0 2px 10px rgba(0, 0, 0, .035);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.lic-plan:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
}

.lic-plan.is-selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 16%, transparent);
}

.lic-plan input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.lic-plan__check {
    position: absolute;
    inset-inline-end: 18px;
    top: 20px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: transparent;
    border: 1.5px solid var(--border-color-dark, var(--border, #cbd5e1));
    transition: background .16s ease, border-color .16s ease;
}

.lic-plan__check svg { width: 12px; height: 12px; opacity: 0; transition: opacity .16s ease; }

.lic-plan.is-selected .lic-plan__check {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.lic-plan.is-selected .lic-plan__check svg { opacity: 1; }

.lic-plan__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-inline-end: 34px;
    min-height: 26px;
}

.lic-plan__name {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.6;
    color: var(--text-color-dark, var(--text, #111827));
    overflow-wrap: anywhere;
}

.lic-plan__badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--text-secondary-dark, var(--text-secondary, #64748b));
    background: var(--hover-bg-dark, var(--surface-2, #f1f5f9));
}

.lic-plan__pricing {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: -4px;
}

.lic-plan__price {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--primary-color);
}

.lic-plan__price--free {
    color: #0d9488;
}

.lic-plan__period {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary-dark, var(--text-secondary, #94a3b8));
}

.lic-plan__specs {
    display: flex;
    flex-direction: column;
    padding-top: 12px;
    border-top: 1px dashed var(--border-color-dark, var(--border, #e6e9f0));
}

.lic-plan__spec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
}

.lic-plan__spec-label {
    font-size: 12.5px;
    color: var(--text-secondary-dark, var(--text-secondary, #64748b));
}

.lic-plan__spec-value {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--text-color-dark, var(--text, #1f2937));
}

.lic-req__form {
    padding: 22px 24px;
    border-radius: 20px;
    background: var(--card-bg-dark, var(--surface, #fff));
    border: 1px solid var(--border-color-dark, var(--border, #e6e9f0));
    box-shadow: 0 2px 10px rgba(0, 0, 0, .035);
}

.lic-req__form-title {
    margin: 0 0 18px;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-color-dark, var(--text, #111827));
}

.lic-req__form .field {
    display: flex;
    flex-direction: column;
    margin-bottom: 18px;
}

.lic-req__form .field-label {
    display: block;
    margin: 0 0 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-color-dark, var(--text, #1f2937));
}

.lic-req__form input[type="text"],
.lic-req__form textarea {
    width: 100%;
    padding: 11px 13px;
    border-radius: 11px;
    font-size: 14px;
    font-family: inherit;
    border: 1.5px solid var(--input-border-dark, var(--border, #d1d5db));
    background: var(--input-bg-dark, var(--surface, #fff));
    color: var(--text-color-dark, var(--text, #1f2937));
}

.lic-req__form input[type="text"]:focus,
.lic-req__form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 14%, transparent);
}

.lic-req__form .hint {
    display: block;
    margin-top: 7px;
    font-size: 11.5px;
    line-height: 1.85;
    color: var(--text-secondary-dark, var(--text-secondary, #94a3b8));
}

.lic-req__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.lic-req__submit {
    padding: 12px 28px;
    border: none;
    border-radius: 13px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    background: var(--primary-color);
    box-shadow: 0 14px 26px -16px color-mix(in srgb, var(--primary-color) 85%, transparent);
    transition: filter .16s ease, transform .16s ease;
}

.lic-req__submit:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.lic-req__submit:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.lic-req__cancel {
    padding: 12px 24px;
    border-radius: 13px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary-dark, var(--text-secondary, #64748b));
    background: var(--hover-bg-dark, var(--surface-2, #f1f5f9));
}

.lic-req__empty {
    padding: 30px 22px;
    border-radius: 18px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-secondary-dark, var(--text-secondary, #94a3b8));
    background: var(--card-bg-dark, var(--surface, #fff));
    border: 1px dashed var(--border-color-dark, var(--border, #e6e9f0));
}

/* ---------- onboarding (no license yet) ---------- */
.lic-onboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 26px 42px;
    border-radius: 24px;
    background: var(--card-bg-dark, var(--surface, #fff));
    border: 1px solid var(--border-color-dark, var(--border, #e6e9f0));
    box-shadow: 0 2px 10px rgba(0, 0, 0, .035);
}

.lic-onboard__icon {
    width: 78px;
    height: 78px;
    border-radius: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}

.lic-onboard__icon svg {
    width: 36px;
    height: 36px;
}

.lic-onboard__title {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 800;
    color: var(--text-color-dark, var(--text, #111827));
}

.lic-onboard__text {
    margin: 0;
    max-width: 540px;
    font-size: 13.5px;
    line-height: 2.15;
    color: var(--text-secondary-dark, var(--text-secondary, #64748b));
}

.lic-onboard__cta {
    display: inline-flex;
    align-items: center;
    margin-top: 22px;
    padding: 12px 24px;
    border-radius: 13px;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 800;
    color: #fff;
    background: var(--primary-color);
    box-shadow: 0 14px 26px -16px color-mix(in srgb, var(--primary-color) 85%, transparent);
    transition: filter .16s ease, transform .16s ease;
}

.lic-onboard__cta:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.lic-onboard__plans {
    width: 100%;
    max-width: 440px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color-dark, var(--border, #e6e9f0));
    text-align: start;
}

.lic-onboard__plans-title {
    display: block;
    margin-bottom: 12px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .4px;
    color: var(--text-secondary-dark, var(--text-secondary, #64748b));
}

.lic-plans {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lic-plans li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color-dark, var(--border, #e6e9f0));
}

.lic-plans__months {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-color-dark, var(--text, #1f2937));
}

.lic-plans__price {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color);
}

.lic-badge {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    color: var(--primary-color);
}

.lic-badge--expired {
    background: color-mix(in srgb, #ef4444 14%, transparent);
    color: #ef4444;
}

.lic-badge--disable {
    background: color-mix(in srgb, #64748b 16%, transparent);
    color: #64748b;
}

.lic-copy-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 128px;
    height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid var(--border-color-dark, var(--border, #cbd5e1));
    background: var(--card-bg-dark, var(--surface, #fff));
    color: var(--text-color-dark, var(--text, #111827));
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.lic-copy-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.lic-copy-btn__idle,
.lic-copy-btn__done {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: opacity .18s ease, transform .18s ease;
}

.lic-copy-btn__done {
    position: absolute;
    inset: 0;
    justify-content: center;
    opacity: 0;
    transform: translateY(8px);
    color: #fff;
}

.lic-copy-btn.is-copied .lic-copy-btn__idle {
    opacity: 0;
    transform: translateY(-8px);
}

.lic-copy-btn.is-copied .lic-copy-btn__done {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1024px) {
    .lic-split { grid-template-columns: minmax(0, 1fr); }
    .lic-hero__body { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
    .lic-dash { padding-inline: 12px; }
    .lic-hero { padding: 20px 16px 22px; border-radius: 20px; }
    .lic-hero__title { font-size: 17px; }
    .lic-hero__cta { width: 100%; justify-content: center; }
    .lic-keycard, .lic-meter { padding: 14px 15px; }
    .lic-keycard__code { font-size: 16px; letter-spacing: .8px; }
    .lic-hero .lic-copy-btn { width: 100%; }
    .lic-panel { padding: 18px 16px; }
}

.lic-renew-wrapper {
    max-width: 680px;
    margin: 20px auto 40px;
    direction: rtl;
}

.lic-renew-card {
    padding: 28px;
}

.lic-renew-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lic-key-code {
    direction: ltr;
    font-size: 15px;
    font-weight: 700;
    padding: 6px 12px;
    background: var(--hover-bg-dark, var(--surface-2, #f1f5f9));
    border-radius: 8px;
    color: var(--primary-color);
}

.lic-renew-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 20px 0;
    padding: 16px;
    background: var(--hover-bg-dark, var(--surface-2, #f8fafc));
    border-radius: 12px;
}

.lic-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lic-meta-label {
    font-size: 12px;
    color: var(--text-secondary-dark, var(--text-secondary, #64748b));
}

.lic-meta-val {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-color-dark, var(--text, #1f2937));
}

.lic-select {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--border-color-dark, var(--border, #cbd5e1));
    background: var(--card-bg-dark, var(--surface, #fff));
    color: var(--text-color-dark, var(--text, #1f2937));
    font-size: 14px;
    font-weight: 600;
    margin-top: 6px;
}

.lic-renew-submit {
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    display: inline-flex !important;
    gap: 10px;
    padding: 12px 20px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

.lic-renew-submit .icon_svg {
    width: 18px;
    height: 18px;
    margin: 0 !important;
    display: block;
    flex-shrink: 0;
}

.lic-card {
    background: var(--card-bg-dark, var(--surface, #fff));
    border: 1px solid var(--border-color-dark, var(--border, #e6e9f0));
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}

.lic-card--main {
    grid-column: span 2;
}

.lic-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-color-dark, var(--border, #e6e9f0));
}

.lic-card__head h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-color-dark, var(--text, #1f2937));
}

.lic-badge {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    color: var(--primary-color);
}

.lic-badge--expired {
    background: color-mix(in srgb, #ef4444 14%, transparent);
    color: #ef4444;
}

.lic-badge--disable {
    background: color-mix(in srgb, #64748b 16%, transparent);
    color: #64748b;
}

.lic-key {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: var(--hover-bg-dark, var(--surface-2, #f6f8fb));
}

.lic-key__label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary-dark, var(--text-secondary, #64748b));
}

.lic-key code {
    flex: 1;
    min-width: 180px;
    direction: ltr;
    text-align: left;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--text-color-dark, var(--text, #1f2937));
}

.lic-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 0 0 18px;
}

.lic-meta dt {
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--text-secondary-dark, var(--text-secondary, #64748b));
}

.lic-meta dd {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color-dark, var(--text, #1f2937));
}

.lic-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.lic-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
}

.lic-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px;
    border-radius: 16px;
    background: var(--card-bg-dark, var(--surface, #fff));
    border: 1px solid var(--border-color-dark, var(--border, #e6e9f0));
}

.lic-stat__value {
    font-size: 26px;
    font-weight: 800;
    color: var(--primary-color);
}

.lic-stat__label {
    font-size: 12.5px;
    color: var(--text-secondary-dark, var(--text-secondary, #64748b));
}

.lic-plans {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lic-plans li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color-dark, var(--border, #e6e9f0));
}

.lic-plans__months {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-color-dark, var(--text, #1f2937));
}

.lic-plans__price {
    font-size: 13px;
    color: var(--text-secondary-dark, var(--text-secondary, #64748b));
}

.lic-empty {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary-dark, var(--text-secondary, #64748b));
}

.lic-onboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 26px;
}

.lic-onboard__icon {
    width: 76px;
    height: 76px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
}

.lic-onboard__icon .icon_svg {
    width: 34px;
    height: 34px;
    margin: 0 !important;
    opacity: .9;
}

.lic-onboard__title {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 800;
    color: var(--text-color-dark, var(--text, #111827));
}

.lic-onboard__text {
    margin: 0;
    max-width: 560px;
    font-size: 13.5px;
    line-height: 2.1;
    color: var(--text-secondary-dark, var(--text-secondary, #64748b));
}

.lic-onboard__actions {
    margin-top: 22px;
}

.lic-onboard__plans {
    width: 100%;
    max-width: 460px;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid var(--border-color-dark, var(--border, #e6e9f0));
    text-align: start;
}

.lic-onboard__plans .lic-key-panel__eyebrow {
    display: block;
    margin-bottom: 10px;
}

@media (max-width: 900px) {
    .lic-card--main {
        grid-column: span 1;
    }
}