/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-s70xbok2bw] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--bg-primary);
}

main[b-s70xbok2bw] {
    flex: 1;
    overflow-y: auto;
}

.sidebar[b-s70xbok2bw] {
    background-color: var(--bg-secondary);
    border-right: 1px solid var(--border);
}

.content[b-s70xbok2bw] {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

@media (min-width: 641px) {
    .page[b-s70xbok2bw] {
        flex-direction: row;
    }

    .sidebar[b-s70xbok2bw] {
        width: 260px;
        height: 100vh;
        position: sticky;
        top: 0;
        flex-shrink: 0;
        transition: width var(--transition-normal);
        z-index: 1000;
        overflow: hidden;
    }

    /* Mini Sidebar state */
    .sidebar.mini-sidebar[b-s70xbok2bw] {
        width: 64px;
    }

    /* Expand on hover */
    .sidebar.mini-sidebar:hover[b-s70xbok2bw] {
        width: 260px;
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.3);
    }

    /* Hide internal elements in mini mode using ::deep */
    .sidebar.mini-sidebar:not(:hover)[b-s70xbok2bw]  .brand-name,
    .sidebar.mini-sidebar:not(:hover)[b-s70xbok2bw]  .nav-section-label,
    .sidebar.mini-sidebar:not(:hover)[b-s70xbok2bw]  .nav-link span,
    .sidebar.mini-sidebar:not(:hover)[b-s70xbok2bw]  .theme-toggle-btn span,
    .sidebar.mini-sidebar:not(:hover)[b-s70xbok2bw]  .nav-logout-btn span,
    .sidebar.mini-sidebar:not(:hover)[b-s70xbok2bw]  .nav-footer small {
        display: none;
    }

    /* Center icons in mini mode */
    .sidebar.mini-sidebar:not(:hover)[b-s70xbok2bw]  .brand-icon,
    .sidebar.mini-sidebar:not(:hover)[b-s70xbok2bw]  .nav-item,
    .sidebar.mini-sidebar:not(:hover)[b-s70xbok2bw]  .theme-toggle-btn,
    .sidebar.mini-sidebar:not(:hover)[b-s70xbok2bw]  .nav-logout-btn {
        justify-content: center;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .sidebar.mini-sidebar:not(:hover)[b-s70xbok2bw]  .nav-link i,
    .sidebar.mini-sidebar:not(:hover)[b-s70xbok2bw]  .theme-toggle-btn i,
    .sidebar.mini-sidebar:not(:hover)[b-s70xbok2bw]  .nav-logout-btn i {
        margin: 0 !important;
        font-size: 1.2rem;
    }

    .content[b-s70xbok2bw] {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* --- Brand Area --- */
.nav-brand-area[b-egrm7tgmyf] {
    padding: 1.25rem 1rem 1rem;
    border-bottom: 1px solid var(--border);
}

.brand-row[b-egrm7tgmyf] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.brand-icon[b-egrm7tgmyf] {
    width: 34px;
    height: 34px;
    background: var(--accent);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    flex-shrink: 0;
}

.brand-name[b-egrm7tgmyf] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: -0.02em;
    flex-grow: 1;
}

.brand-name:hover[b-egrm7tgmyf] {
    color: var(--text-primary);
    text-decoration: none;
}

/* --- Toggle --- */
.navbar-toggler[b-egrm7tgmyf] {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.navbar-toggler:hover[b-egrm7tgmyf] {
    background: var(--bg-glass-hover);
    color: var(--text-primary);
}

/* --- Section Labels --- */
.nav-section-label[b-egrm7tgmyf] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    padding: 1rem 1.25rem 0.4rem;
}

/* --- Nav Items --- */
.nav-item[b-egrm7tgmyf] {
    padding-bottom: 2px;
}

.nav-item[b-egrm7tgmyf]  a {
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    height: 2.5rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0 0.75rem;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.nav-item[b-egrm7tgmyf]  a i {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.nav-item[b-egrm7tgmyf]  a.active {
    background: var(--accent-subtle);
    color: var(--accent);
}

.nav-item[b-egrm7tgmyf]  a.active i {
    opacity: 1;
    color: var(--accent);
}

.nav-item[b-egrm7tgmyf]  a:hover {
    background: var(--bg-glass-hover);
    color: var(--text-primary);
}

.nav-item[b-egrm7tgmyf]  a:hover i {
    opacity: 1;
}

/* --- Footer --- */
.nav-footer[b-egrm7tgmyf] {
    padding: 1.25rem;
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.7rem;
    margin-top: auto;
}

/* --- Scrollable & Responsive --- */
@media (min-width: 641px) {
    .navbar-toggler[b-egrm7tgmyf] {
        display: none;
    }

    .collapse[b-egrm7tgmyf] {
        display: flex !important;
        flex-direction: column;
    }

    .nav-scrollable[b-egrm7tgmyf] {
        height: calc(100vh - 68px);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }
}

/* --- Logout Button --- */
.nav-logout-btn[b-egrm7tgmyf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.nav-logout-btn:hover[b-egrm7tgmyf] {
    background: var(--danger-subtle);
    color: var(--danger);
    border-color: rgba(225, 112, 85, 0.3);
}
/* /Layout/TopHeader.razor.rz.scp.css */
/* Status Dropdown Custom Styles */

.status-dropdown-container[b-mrrsjiva6r] {
    position: relative;
    user-select: none;
}

.status-current[b-mrrsjiva6r] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-current:hover[b-mrrsjiva6r] {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.status-dot[b-mrrsjiva6r] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 6px rgba(0,0,0,0.2);
}

/* Status Colors */
.dot-online[b-mrrsjiva6r] { background-color: #10b981; box-shadow: 0 0 8px rgba(16, 185, 129, 0.5); }
.dot-break[b-mrrsjiva6r] { background-color: #f59e0b; box-shadow: 0 0 8px rgba(245, 158, 11, 0.5); }
.dot-offline[b-mrrsjiva6r] { background-color: #94a3b8; box-shadow: 0 0 8px rgba(148, 163, 184, 0.5); }
.dot-finished[b-mrrsjiva6r] { background-color: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.5); }

.arrow-icon[b-mrrsjiva6r] {
    font-size: 0.7rem;
    margin-left: 0.2rem;
    transition: transform 0.2s ease;
    opacity: 0.7;
}

.arrow-rotated[b-mrrsjiva6r] {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.status-menu[b-mrrsjiva6r] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 180px;
    background: #1e293b; /* slate-800 */
    border: 1px solid #334155; /* slate-700 */
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    overflow: hidden;
    padding: 0.4rem;
    
    transform-origin: top center;
    animation: dropdownFadeIn-b-mrrsjiva6r 0.2s ease-out forwards;
}

@keyframes dropdownFadeIn-b-mrrsjiva6r {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.status-item[b-mrrsjiva6r] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: #f1f5f9;
    font-size: 0.85rem;
}

.status-item:hover[b-mrrsjiva6r] {
    background: #334155;
    color: #fff;
}

.status-item.active[b-mrrsjiva6r] {
    background: rgba(255, 255, 255, 0.05);
    font-weight: 600;
}

.status-check[b-mrrsjiva6r] {
    margin-left: auto;
    font-size: 0.8rem;
    color: #10b981;
}

/* Mobile full-screen overlay for click-outside */
.dropdown-overlay[b-mrrsjiva6r] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: transparent;
}
/* /Pages/Crm.razor.rz.scp.css */
/* ==============================================
   CRM — PREMIUM DARK THEME DESIGN SYSTEM
   Glassmorphism + Gradient + Micro-animations
   ============================================== */

/* ===== CRM Root ===== */
.crm-root[b-4ehxjwgnc3] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 80px);
    overflow: hidden;
}

/* ===== Header ===== */
.crm-header[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.5rem;
}
.crm-header-left[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.crm-header-left h1[b-4ehxjwgnc3] {
    background: linear-gradient(135deg, var(--accent), #a29bfe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.crm-header-right[b-4ehxjwgnc3] {
    display: flex;
    gap: 0.5rem;
}
.crm-connection-status[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ===== Live Indicator ===== */
.status-dot[b-4ehxjwgnc3] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
}
.status-dot-active[b-4ehxjwgnc3] {
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
    animation: livePulse-b-4ehxjwgnc3 2s ease-in-out infinite;
}
.status-dot-inactive[b-4ehxjwgnc3] {
    background: var(--text-muted);
}

@keyframes livePulse-b-4ehxjwgnc3 {
    0%, 100% { box-shadow: 0 0 4px var(--success); transform: scale(1); }
    50% { box-shadow: 0 0 12px var(--success), 0 0 20px rgba(0,184,148,0.3); transform: scale(1.15); }
}

/* ===== Tabs ===== */
.crm-tabs[b-4ehxjwgnc3] {
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}
.crm-tabs .nav-link[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* ===== Content ===== */
.crm-content[b-4ehxjwgnc3] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* ===== Schedule Toolbar ===== */
.schedule-toolbar[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.schedule-date-nav[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.schedule-actions[b-4ehxjwgnc3] {
    display: flex;
    gap: 0.4rem;
}

/* ===== Kanban Board — Premium Glassmorphism ===== */
.kanban-board[b-4ehxjwgnc3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    height: calc(100% - 60px);
    min-height: 400px;
}
.kanban-column[b-4ehxjwgnc3] {
    background: var(--bg-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    position: relative;
}
.kanban-column[b-4ehxjwgnc3]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.kanban-column:nth-child(1)[b-4ehxjwgnc3]::before {
    background: linear-gradient(90deg, var(--success), #55efc4);
}
.kanban-column:nth-child(2)[b-4ehxjwgnc3]::before {
    background: linear-gradient(90deg, var(--warning), #ffeaa7);
}
.kanban-column:nth-child(3)[b-4ehxjwgnc3]::before {
    background: linear-gradient(90deg, var(--info), #81ecec);
}
.kanban-column:hover[b-4ehxjwgnc3] {
    border-color: var(--border-strong);
    box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}
.kanban-column.drag-over[b-4ehxjwgnc3] {
    border-color: var(--accent);
    box-shadow: 0 0 20px var(--accent-glow);
}
.kanban-column-header[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-glass);
}
.kanban-column-header .badge[b-4ehxjwgnc3] {
    margin-left: auto;
    font-size: 0.65rem;
}
.kanban-column-body[b-4ehxjwgnc3] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* ===== Kanban Card — Premium with micro-animations ===== */
.kanban-card[b-4ehxjwgnc3] {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem; /* Increased padding to prevent clipping */
    cursor: grab;
    transition: all var(--transition-fast);
    user-select: none;
    position: relative;
    overflow: visible; /* Changed to visible to ensure text is never clipped */
}
.kanban-card[b-4ehxjwgnc3]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(108,92,231,0.03));
    opacity: 0;
    transition: opacity var(--transition-fast);
    pointer-events: none;
}
.kanban-card:hover[b-4ehxjwgnc3] {
    border-color: var(--accent);
    box-shadow: var(--shadow-sm), 0 0 12px var(--accent-glow);
    transform: translateY(-2px);
}
.kanban-card:hover[b-4ehxjwgnc3]::after {
    opacity: 1;
}
.kanban-card:active[b-4ehxjwgnc3] {
    cursor: grabbing;
    opacity: 0.8;
    transform: scale(0.98);
}
.kanban-card-time[b-4ehxjwgnc3] {
    font-size: 0.85rem; /* Slightly larger for better readability */
    font-weight: 600;
    line-height: 1.4; /* Ensure enough height for the text */
    color: var(--text-primary);
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.kanban-card-time i[b-4ehxjwgnc3] {
    color: var(--accent);
    font-size: 0.75rem;
}
.kanban-card-client[b-4ehxjwgnc3] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.kanban-card.kanban-card--break[b-4ehxjwgnc3] {
    border-left: 3px solid #e17055 !important;
    background: rgba(225, 112, 85, 0.05);
    opacity: 0.95;
    cursor: default;
}
.kanban-card.kanban-card--break:hover[b-4ehxjwgnc3] {
    background: rgba(225, 112, 85, 0.1);
    border-left-color: #ff7675 !important;
}
.kanban-card-break-label[b-4ehxjwgnc3] {
    margin-top: 0.5rem;
    padding: 0.35rem 0.6rem;
    background: rgba(225, 112, 85, 0.15);
    color: #e17055;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid rgba(225, 112, 85, 0.2);
}
.kanban-card.kanban-card--break .kanban-card-time i[b-4ehxjwgnc3] {
    color: #e17055;
}
.kanban-card-service[b-4ehxjwgnc3] {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}
.kanban-card-source[b-4ehxjwgnc3] {
    margin-top: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.kanban-card-source .badge[b-4ehxjwgnc3] {
    font-size: 0.6rem;
}
.kanban-card-actions[b-4ehxjwgnc3] {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.kanban-card:hover .kanban-card-actions[b-4ehxjwgnc3] {
    opacity: 1;
}
.kanban-card-actions button[b-4ehxjwgnc3] {
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    padding: 0.15rem 0.35rem;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.kanban-card-actions button:hover[b-4ehxjwgnc3] {
    color: var(--accent);
    border-color: var(--accent);
}
.kanban-card-conv-link[b-4ehxjwgnc3] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.6rem;
    color: var(--accent);
    cursor: pointer;
    margin-top: 0.25rem;
    transition: opacity var(--transition-fast);
}
.kanban-card-conv-link:hover[b-4ehxjwgnc3] {
    opacity: 0.8;
    text-decoration: underline;
}
.kanban-empty[b-4ehxjwgnc3] {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
    font-size: 0.8rem;
}
.kanban-empty i[b-4ehxjwgnc3] {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

/* ===== Source Badges — Gradient ===== */
.source-badge-bot[b-4ehxjwgnc3] {
    background: linear-gradient(135deg, #fdcb6e, #e17055) !important;
    color: #fff !important;
}
.source-badge-operator[b-4ehxjwgnc3] {
    background: linear-gradient(135deg, #00b894, #00cec9) !important;
    color: #fff !important;
}
.source-badge-client[b-4ehxjwgnc3] {
    background: linear-gradient(135deg, #74b9ff, #0984e3) !important;
    color: #fff !important;
}
.source-badge-system[b-4ehxjwgnc3] {
    background: linear-gradient(135deg, #636e72, #b2bec3) !important;
    color: #fff !important;
}

/* ===== Clients Toolbar (search + filters) ===== */
.clients-toolbar[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.clients-filter-group[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.clients-filter-select[b-4ehxjwgnc3] {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    padding: 0.4rem 2rem 0.4rem 0.8rem;
    font-size: 0.8rem;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-fast);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,0.5)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 1rem;
    min-width: 140px;
}
.clients-filter-select:hover[b-4ehxjwgnc3] {
    border-color: var(--text-secondary);
    background-color: var(--bg-tertiary);
}
.clients-filter-select option[b-4ehxjwgnc3] {
    background: #1a1a1a;
    color: #ffffff;
    padding: 10px;
}
.clients-filter-select:focus[b-4ehxjwgnc3] {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.2);
}
.clients-seed-btn[b-4ehxjwgnc3] {
    margin-left: auto;
    display: flex;
    gap: 0.4rem;
}

/* ===== Clients Table ===== */
.clients-table-wrap[b-4ehxjwgnc3] {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-secondary);
}
.clients-table[b-4ehxjwgnc3] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    table-layout: fixed; /* Ensures column widths are respected */
}
.clients-table thead tr[b-4ehxjwgnc3] {
    background: var(--bg-glass);
    border-bottom: 1px solid var(--border);
}
.clients-table th[b-4ehxjwgnc3] {
    padding: 0.65rem 0.85rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.clients-table tbody tr[b-4ehxjwgnc3] {
    border-bottom: 1px solid var(--border);
    transition: background var(--transition-fast);
    cursor: pointer;
}
.clients-table tbody tr:last-child[b-4ehxjwgnc3] {
    border-bottom: none;
}
.clients-table tbody tr:hover[b-4ehxjwgnc3] {
    background: var(--bg-glass-hover);
}
.clients-table td[b-4ehxjwgnc3] {
    padding: 0.75rem 0.85rem;
    color: var(--text-primary);
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Column width ratios */
.clients-table th:nth-child(1)[b-4ehxjwgnc3], .clients-table td:nth-child(1)[b-4ehxjwgnc3] { width: 25%; } /* Клиент */
.clients-table th:nth-child(2)[b-4ehxjwgnc3], .clients-table td:nth-child(2)[b-4ehxjwgnc3] { width: 18%; } /* Контакт */
.clients-table th:nth-child(3)[b-4ehxjwgnc3], .clients-table td:nth-child(3)[b-4ehxjwgnc3] { width: 14%; } /* Источник/Канал */
.clients-table th:nth-child(4)[b-4ehxjwgnc3], .clients-table td:nth-child(4)[b-4ehxjwgnc3] { width: 15%; } /* Последнее сообщ. */
.clients-table th:nth-child(5)[b-4ehxjwgnc3], .clients-table td:nth-child(5)[b-4ehxjwgnc3] { width: 10%; } /* Статус */
.clients-table th:nth-child(6)[b-4ehxjwgnc3], .clients-table td:nth-child(6)[b-4ehxjwgnc3] { width: 8%; }  /* Записей */
.clients-table th:nth-child(7)[b-4ehxjwgnc3], .clients-table td:nth-child(7)[b-4ehxjwgnc3] { width: 10%; } /* Отв. */
.ct-avatar-cell[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    overflow: hidden;
}
.ct-avatar[b-4ehxjwgnc3] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--accent), #a29bfe);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
    box-shadow: 0 2px 6px var(--accent-glow);
}
.ct-name[b-4ehxjwgnc3] { 
    font-weight: 600; 
    font-size: 0.8rem; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;
}
.ct-sub[b-4ehxjwgnc3] { 
    font-size: 0.68rem; 
    color: var(--text-muted); 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;
}
.ct-badges[b-4ehxjwgnc3] {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    align-items: center;
}
.badge-bot[b-4ehxjwgnc3] { background: linear-gradient(135deg,#fdcb6e,#e17055) !important; color:#fff !important; font-size:.58rem!important; }
.badge-operator[b-4ehxjwgnc3] { background: linear-gradient(135deg,#00b894,#00cec9) !important; color:#fff !important; font-size:.58rem!important; }
.badge-new[b-4ehxjwgnc3] { background: linear-gradient(135deg,#6c5ce7,#a29bfe) !important; color:#fff !important; font-size:.58rem!important; }
.badge-booking[b-4ehxjwgnc3] { background: linear-gradient(135deg,#fdcb6e,#f0932b) !important; color:#fff !important; font-size:.58rem!important; }
.status-chip[b-4ehxjwgnc3] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.18rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: 0.68rem;
    font-weight: 600;
}
.status-active[b-4ehxjwgnc3] { background:rgba(0,184,148,0.15); color:var(--success); border:1px solid rgba(0,184,148,0.25); }
.status-new[b-4ehxjwgnc3] { background:rgba(108,92,231,0.15); color:var(--accent); border:1px solid var(--accent-subtle); }
.status-vip[b-4ehxjwgnc3] { background:rgba(253,203,110,0.15); color:var(--warning); border:1px solid rgba(253,203,110,0.25); }
.status-inactive[b-4ehxjwgnc3] { background:rgba(99,110,114,0.15); color:var(--text-muted); border:1px solid var(--border); }

/* ===== 3-Column Client Card Overlay (PRO Redesign) ===== */
.client-card-overlay[b-4ehxjwgnc3] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    animation: fadeIn 0.3s ease-out;
}

.client-card-panel[b-4ehxjwgnc3] {
    width: min(850px, 95vw);
    height: 100%;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    box-shadow: -20px 0 50px rgba(0,0,0,0.3);
    animation: slideInRightP-b-4ehxjwgnc3 0.4s cubic-bezier(0.16,1,0.3,1) forwards;
    overflow: hidden;
    position: relative;
}

@keyframes slideInRightP-b-4ehxjwgnc3 {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Header */
.client-card-header[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-primary);
    flex-shrink: 0;
}

.client-card-header-left[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.client-card-title[b-4ehxjwgnc3] {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.status-badge[b-4ehxjwgnc3] {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid transparent;
}

.client-card-channel[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

.client-card-channel i[b-4ehxjwgnc3] {
    color: var(--accent);
    font-size: 0.85rem;
}

.client-card-close-btn[b-4ehxjwgnc3] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.client-card-close-btn:hover[b-4ehxjwgnc3] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    transform: scale(1.05);
}

/* Layout Content */
.client-card-content[b-4ehxjwgnc3] {
    display: grid;
    grid-template-columns: 280px 1fr;
    flex: 1;
    overflow: hidden;
}

.client-side-col[b-4ehxjwgnc3] {
    padding: 2rem;
    border-right: 1px solid var(--border);
    background: var(--bg-glass);
    overflow-y: auto;
}

.client-main-col[b-4ehxjwgnc3] {
    padding: 2rem;
    overflow-y: auto;
    background: var(--bg-secondary);
}

/* Section Components */
.card-section[b-4ehxjwgnc3] {
    margin-bottom: 2.5rem;
}

.section-label[b-4ehxjwgnc3] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1rem;
    letter-spacing: 0.08em;
}

/* Profile Grid */
.profile-info-grid[b-4ehxjwgnc3] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.info-row[b-4ehxjwgnc3] {
    display: grid;
    grid-template-columns: 24px 70px 1fr;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
}

.info-row i[b-4ehxjwgnc3] {
    color: var(--accent);
    font-size: 0.85rem;
    opacity: 0.8;
}

.info-label[b-4ehxjwgnc3] {
    color: var(--text-muted);
}

.info-value[b-4ehxjwgnc3] {
    color: var(--text-primary);
    font-weight: 500;
    word-break: break-all;
}

/* Modern Buttons */
.actions-grid[b-4ehxjwgnc3] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Left Nav Menu */
.drawer-nav-menu[b-4ehxjwgnc3] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.drawer-nav-item[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
    width: 100%;
}

.drawer-nav-item i[b-4ehxjwgnc3] {
    font-size: 1.1rem;
    opacity: 0.7;
    width: 20px;
    text-align: center;
}

.drawer-nav-item:hover[b-4ehxjwgnc3] {
    background: var(--bg-glass-hover);
    color: var(--text-primary);
}

.drawer-nav-item.active[b-4ehxjwgnc3] {
    background: var(--accent-subtle);
    border-color: var(--accent-subtle);
    color: var(--accent);
}

.drawer-nav-item.active i[b-4ehxjwgnc3] {
    opacity: 1;
    color: var(--accent);
}

.drawer-nav-divider[b-4ehxjwgnc3] {
    height: 1px;
    background: var(--border);
    margin: 0.5rem 0.75rem;
}

@media (max-width: 900px) {
    .client-card-content[b-4ehxjwgnc3] {
        grid-template-columns: 1fr;
    }
    .client-side-col[b-4ehxjwgnc3] {
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding-bottom: 1.5rem;
    }
}

/* Status Chips v2 */
.status-row[b-4ehxjwgnc3] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rt-dot-chip[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.8rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 500;
}

.rt-dot-chip.active[b-4ehxjwgnc3] {
    background: rgba(0,184,148,0.05);
    border-color: rgba(0,184,148,0.2);
    color: var(--success);
}

.rt-dot-chip i[b-4ehxjwgnc3] { font-size: 0.8rem; }

/* Timeline v2 */
.timeline-v2[b-4ehxjwgnc3] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
    padding-left: 1rem;
}

.timeline-v2[b-4ehxjwgnc3]::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 1px;
    background: var(--border-strong);
}

.timeline-v2-item[b-4ehxjwgnc3] {
    display: flex;
    gap: 1.5rem;
    position: relative;
}

.timeline-v2-marker[b-4ehxjwgnc3] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    color: var(--text-muted);
}

.timeline-v2-marker.dot-operator[b-4ehxjwgnc3] { border-color: var(--accent); color: var(--accent); }
.timeline-v2-marker.dot-bot[b-4ehxjwgnc3] { border-color: var(--warning); color: var(--warning); }
.timeline-v2-marker.dot-client[b-4ehxjwgnc3] { border-color: var(--success); color: var(--success); }

.timeline-v2-card[b-4ehxjwgnc3] {
    flex: 1;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.85rem 1.25rem;
    transition: all var(--transition-fast);
}

.timeline-v2-card:hover[b-4ehxjwgnc3] {
    border-color: var(--border-strong);
    background: var(--bg-glass-hover);
}

.tl-card-header[b-4ehxjwgnc3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}

.tl-card-date[b-4ehxjwgnc3] {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
}

.tl-card-desc[b-4ehxjwgnc3] {
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.source-tag[b-4ehxjwgnc3] {
    font-size: 0.58rem;
    font-weight: 800;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Timeline Empty State */
.timeline-empty-state[b-4ehxjwgnc3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
    text-align: center;
}

.empty-icon-wrap[b-4ehxjwgnc3] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 1.25rem;
    opacity: 0.4;
    border: 1px dashed var(--border-strong);
}

.timeline-empty-state p[b-4ehxjwgnc3] {
    font-size: 0.85rem;
    font-weight: 500;
    margin: 0;
}

/* Notes v2 */
.notes-list-v2[b-4ehxjwgnc3] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.note-card-v2[b-4ehxjwgnc3] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    transition: all var(--transition-fast);
}

.note-card-v2:hover[b-4ehxjwgnc3] {
    border-color: var(--border-strong);
}

.note-card-top[b-4ehxjwgnc3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.note-author-info[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
}

.note-author[b-4ehxjwgnc3] {
    color: var(--text-primary);
    font-weight: 700;
}

.note-dot[b-4ehxjwgnc3] {
    color: var(--text-muted);
}

.note-date[b-4ehxjwgnc3] {
    color: var(--text-muted);
}

.note-card-text[b-4ehxjwgnc3] {
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.note-action-btn[b-4ehxjwgnc3] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all var(--transition-fast);
}

.note-action-btn:hover[b-4ehxjwgnc3] {
    background: rgba(235, 77, 75, 0.1);
    color: var(--danger);
}

.add-note-full-btn[b-4ehxjwgnc3] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.85rem;
    background: transparent;
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.add-note-full-btn:hover[b-4ehxjwgnc3] {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-subtle);
}

.note-form-v2[b-4ehxjwgnc3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--accent-subtle);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}

.note-form-v2 textarea[b-4ehxjwgnc3] {
    background: transparent;
    border: none;
    resize: none;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: inherit;
    line-height: 1.6;
}

.note-form-v2 textarea:focus[b-4ehxjwgnc3] { outline: none; }

.note-form-actions[b-4ehxjwgnc3] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.notes-empty[b-4ehxjwgnc3] {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-size: 0.78rem;
}

/* ===== Old panel (kept for mobile fallback) ===== */
.client-detail-overlay[b-4ehxjwgnc3] {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    justify-content: flex-end;
}
.client-detail-panel[b-4ehxjwgnc3] {
    width: 460px; max-width: 90vw; height: 100%;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border);
    overflow-y: auto; padding: 1.5rem;
    animation: slideInRight-b-4ehxjwgnc3 0.3s ease forwards;
}
.client-detail-header[b-4ehxjwgnc3] { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
.client-detail-header h3[b-4ehxjwgnc3] { margin:0; font-size:1.2rem; background:linear-gradient(135deg,var(--text-primary),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.detail-section[b-4ehxjwgnc3] { margin-bottom:1.5rem; }
.detail-section h5[b-4ehxjwgnc3] { font-size:.85rem; color:var(--text-secondary); margin-bottom:.75rem; display:flex; align-items:center; gap:.4rem; }
.detail-section p[b-4ehxjwgnc3] { margin:.3rem 0; font-size:.8rem; }
.detail-item[b-4ehxjwgnc3] { display:flex; align-items:center; justify-content:space-between; padding:.4rem .6rem; background:var(--bg-glass); border-radius:var(--radius-sm); margin-bottom:.35rem; font-size:.78rem; transition:background var(--transition-fast); }
.detail-item:hover[b-4ehxjwgnc3] { background:var(--bg-glass-hover); }
.client-action-bar[b-4ehxjwgnc3] { display:flex; gap:.4rem; margin-bottom:1rem; }
.client-action-bar .btn[b-4ehxjwgnc3] { flex:1; font-size:.75rem; }
.client-avatar[b-4ehxjwgnc3] { width:40px; height:40px; border-radius:var(--radius-full); background:linear-gradient(135deg,var(--accent),#a29bfe); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; flex-shrink:0; box-shadow:0 2px 8px var(--accent-glow); }
.client-info[b-4ehxjwgnc3] { flex:1; min-width:0; }
.client-name[b-4ehxjwgnc3] { font-weight:600; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.client-meta[b-4ehxjwgnc3] { display:flex; align-items:center; gap:.4rem; margin-top:.2rem; font-size:.72rem; color:var(--text-muted); }
.timeline-section[b-4ehxjwgnc3] { position:relative; padding-left:1.5rem; }
.timeline-section[b-4ehxjwgnc3]::before { content:''; position:absolute; left:.55rem; top:0; bottom:0; width:2px; background:linear-gradient(to bottom,var(--accent),var(--border)); border-radius:1px; }
.timeline-item[b-4ehxjwgnc3] { position:relative; padding:.4rem 0 .4rem .75rem; font-size:.75rem; animation:fadeIn var(--transition-slow) ease forwards; }
.timeline-item[b-4ehxjwgnc3]::before { content:''; position:absolute; left:-1.15rem; top:.65rem; width:8px; height:8px; border-radius:50%; background:var(--accent); border:2px solid var(--bg-secondary); box-shadow:0 0 6px var(--accent-glow); }
.timeline-item-desc[b-4ehxjwgnc3] { color:var(--text-primary); font-weight:500; }
.timeline-item-meta[b-4ehxjwgnc3] { display:flex; align-items:center; gap:.4rem; margin-top:.15rem; color:var(--text-muted); font-size:.68rem; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .kanban-board[b-4ehxjwgnc3] { grid-template-columns: 1fr; height: auto; }
    .schedule-toolbar[b-4ehxjwgnc3] { flex-direction: column; align-items: stretch; }
    .clients-table th:nth-child(n+5)[b-4ehxjwgnc3],
    .clients-table td:nth-child(n+5)[b-4ehxjwgnc3] { display: none; }
    .client-card-body[b-4ehxjwgnc3] { grid-template-columns: 1fr; }
    .client-col[b-4ehxjwgnc3] { border-right: none; border-bottom: 1px solid var(--border); max-height: 45vh; }
    .client-card-panel[b-4ehxjwgnc3] { width: 100vw; }
}

.clients-grid[b-4ehxjwgnc3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}
.client-card[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem !important;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.client-card[b-4ehxjwgnc3]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 60%, var(--accent-subtle));
    opacity: 0;
    transition: opacity var(--transition-normal);
    pointer-events: none;
}
.client-card:hover[b-4ehxjwgnc3]::before {
    opacity: 1;
}
.client-avatar[b-4ehxjwgnc3] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--accent), #a29bfe);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px var(--accent-glow);
}
.client-info[b-4ehxjwgnc3] {
    flex: 1;
    min-width: 0;
}
.client-name[b-4ehxjwgnc3] {
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.client-meta[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* ===== Client Detail Overlay (Slide-in Panel) ===== */
.client-detail-overlay[b-4ehxjwgnc3] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    justify-content: flex-end;
}
.client-detail-panel[b-4ehxjwgnc3] {
    width: 460px;
    max-width: 90vw;
    height: 100%;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border);
    overflow-y: auto;
    padding: 1.5rem;
    animation: slideInRight-b-4ehxjwgnc3 0.3s ease forwards;
}
@keyframes slideInRight-b-4ehxjwgnc3 {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.client-detail-header[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.client-detail-header h3[b-4ehxjwgnc3] {
    margin: 0;
    font-size: 1.2rem;
    background: linear-gradient(135deg, var(--text-primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.client-detail-body[b-4ehxjwgnc3] {
    padding-bottom: 1rem;
}
.detail-section[b-4ehxjwgnc3] {
    margin-bottom: 1.5rem;
}
.detail-section h5[b-4ehxjwgnc3] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.detail-section p[b-4ehxjwgnc3] {
    margin: 0.3rem 0;
    font-size: 0.8rem;
}
.detail-item[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.6rem;
    background: var(--bg-glass);
    border-radius: var(--radius-sm);
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    transition: background var(--transition-fast);
}
.detail-item:hover[b-4ehxjwgnc3] {
    background: var(--bg-glass-hover);
}

/* ===== Client Detail — Open Dialog Button ===== */
.client-action-bar[b-4ehxjwgnc3] {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1rem;
}
.client-action-bar .btn[b-4ehxjwgnc3] {
    flex: 1;
    font-size: 0.75rem;
}

/* ===== Client Timeline ===== */
.timeline-section[b-4ehxjwgnc3] {
    position: relative;
    padding-left: 1.5rem;
}
.timeline-section[b-4ehxjwgnc3]::before {
    content: '';
    position: absolute;
    left: 0.55rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent), var(--border));
    border-radius: 1px;
}
.timeline-item[b-4ehxjwgnc3] {
    position: relative;
    padding: 0.4rem 0 0.4rem 0.75rem;
    font-size: 0.75rem;
    animation: fadeIn var(--transition-slow) ease forwards;
}
.timeline-item[b-4ehxjwgnc3]::before {
    content: '';
    position: absolute;
    left: -1.15rem;
    top: 0.65rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg-secondary);
    box-shadow: 0 0 6px var(--accent-glow);
}
.timeline-item-desc[b-4ehxjwgnc3] {
    color: var(--text-primary);
    font-weight: 500;
}
.timeline-item-meta[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.15rem;
    color: var(--text-muted);
    font-size: 0.68rem;
}

/* ===== Activity Feed ===== */
.activity-feed[b-4ehxjwgnc3] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.activity-item[b-4ehxjwgnc3] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}
.activity-item[b-4ehxjwgnc3]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent);
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.activity-item:hover[b-4ehxjwgnc3] {
    border-color: var(--border-strong);
}
.activity-item:hover[b-4ehxjwgnc3]::before {
    opacity: 1;
}
.activity-icon[b-4ehxjwgnc3] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--accent-subtle);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.activity-content[b-4ehxjwgnc3] {
    flex: 1;
}
.activity-desc[b-4ehxjwgnc3] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
}
.activity-meta[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.3rem;
}
.activity-meta small[b-4ehxjwgnc3] {
    font-size: 0.7rem;
    color: var(--text-muted);
}
.event-count-badge[b-4ehxjwgnc3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0 0.35rem;
    animation: livePulse-b-4ehxjwgnc3 2s ease-in-out infinite;
}

/* ===== Modal ===== */
.modal-overlay[b-4ehxjwgnc3] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    align-items: flex-start; /* Changed from center */
    justify-content: center;
    padding: 3vh 0; /* Add padding for breathing room */
    overflow-y: auto;
}
.modal-panel[b-4ehxjwgnc3] {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    width: 420px;
    max-width: 90vw;
    box-shadow: var(--shadow-lg), 0 0 40px rgba(108,92,231,0.1);
    animation: modalIn-b-4ehxjwgnc3 0.25s ease forwards;
}
@keyframes modalIn-b-4ehxjwgnc3 {
    from { transform: scale(0.95) translateY(10px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}
.modal-panel h4[b-4ehxjwgnc3] {
    margin-top: 0;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--text-primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== Toast — Premium with progress bar ===== */
.crm-toast-container[b-4ehxjwgnc3] {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}
.crm-toast[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    font-weight: 500;
    box-shadow: var(--shadow-md), 0 0 20px rgba(0,0,0,0.3);
    pointer-events: auto;
    max-width: 380px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
    animation: toastSlideIn-b-4ehxjwgnc3 0.3s ease forwards;
}
@keyframes toastSlideIn-b-4ehxjwgnc3 {
    from { transform: translateX(100%) translateY(-10px); opacity: 0; }
    to { transform: translateX(0) translateY(0); opacity: 1; }
}
.crm-toast[b-4ehxjwgnc3]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    animation: toastProgress-b-4ehxjwgnc3 4s linear forwards;
}
.toast-persistent[b-4ehxjwgnc3]::after {
    display: none !important;
}
.btn-toast-close[b-4ehxjwgnc3] {
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    padding: 0 0.2rem;
    transition: opacity 0.2s;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}
.btn-toast-close:hover[b-4ehxjwgnc3] {
    opacity: 1;
}
@keyframes toastProgress-b-4ehxjwgnc3 {
    from { width: 100%; }
    to { width: 0%; }
}
.toast-success[b-4ehxjwgnc3] {
    background: var(--success-subtle);
    color: var(--success);
    border: 1px solid rgba(0, 184, 148, 0.3);
}
.toast-success[b-4ehxjwgnc3]::after {
    background: var(--success);
}
.toast-warning[b-4ehxjwgnc3] {
    background: var(--warning-subtle);
    color: var(--warning);
    border: 1px solid rgba(253, 203, 110, 0.3);
}
.toast-warning[b-4ehxjwgnc3]::after {
    background: var(--warning);
}
.toast-danger[b-4ehxjwgnc3] {
    background: var(--danger-subtle);
    color: var(--danger);
    border: 1px solid rgba(225, 112, 85, 0.3);
}
.toast-danger[b-4ehxjwgnc3]::after {
    background: var(--danger);
}
.toast-info[b-4ehxjwgnc3] {
    background: var(--info-subtle);
    color: var(--info);
    border: 1px solid rgba(116, 185, 255, 0.3);
}
.toast-info[b-4ehxjwgnc3]::after {
    background: var(--info);
}

/* ===== PRO Drawer Enhancements ===== */
.drawer-dialogs-list[b-4ehxjwgnc3] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.drawer-dialog-card[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.drawer-dialog-card:hover[b-4ehxjwgnc3] {
    background: var(--bg-glass-hover);
    border-color: var(--accent);
    transform: translateX(4px);
}

.dialog-card-icon[b-4ehxjwgnc3] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--accent-subtle);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.dialog-card-info[b-4ehxjwgnc3] {
    flex: 1;
}

.dialog-card-title[b-4ehxjwgnc3] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

.dialog-card-status[b-4ehxjwgnc3] {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.dialog-card-arrow[b-4ehxjwgnc3] {
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.5;
}

/* Appointments cards */
.drawer-appointments-list[b-4ehxjwgnc3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.appointment-card-v2[b-4ehxjwgnc3] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-fast);
}

.appointment-card-v2:hover[b-4ehxjwgnc3] {
    border-color: var(--border-strong);
    background: var(--bg-glass-hover);
}

.apt-card-header[b-4ehxjwgnc3] {
    padding: 0.75rem 1.25rem;
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.apt-date-wrap[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-primary);
}

.apt-date-wrap i[b-4ehxjwgnc3] { color: var(--accent); }

.apt-card-body[b-4ehxjwgnc3] {
    padding: 1rem 1.25rem;
}

.apt-info-grid[b-4ehxjwgnc3] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.apt-info-item small[b-4ehxjwgnc3] {
    display: block;
    font-size: 0.62rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.apt-info-item div[b-4ehxjwgnc3] {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-primary);
}

.apt-status-tag[b-4ehxjwgnc3] {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
}

.apt-status-free[b-4ehxjwgnc3] { background: rgba(0,184,148,0.1); color: var(--success); border: 1px solid rgba(0,184,148,0.2); }
.apt-status-booked[b-4ehxjwgnc3] { background: rgba(253,203,110,0.1); color: var(--warning); border: 1px solid rgba(253,203,110,0.2); }
.apt-status-completed[b-4ehxjwgnc3] { background: rgba(108,92,231,0.1); color: var(--accent); border: 1px solid var(--accent-subtle); }
.apt-status-cancelled[b-4ehxjwgnc3] { background: rgba(225,112,85,0.1); color: var(--danger); border: 1px solid rgba(225,112,85,0.2); }

.apt-source-tag[b-4ehxjwgnc3] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.68rem;
}

.apt-source-tag.source-bot[b-4ehxjwgnc3] { color: var(--warning); }
.apt-source-tag.source-operator[b-4ehxjwgnc3] { color: var(--success); }

/* Placeholder blocks */
.drawer-placeholder-block[b-4ehxjwgnc3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background: rgba(255,255,255,0.01);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--text-muted);
}

.drawer-placeholder-block i[b-4ehxjwgnc3] {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.3;
}

.placeholder-title[b-4ehxjwgnc3] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.placeholder-desc[b-4ehxjwgnc3] {
    font-size: 0.68rem;
    line-height: 1.4;
    max-width: 220px;
}

/* Timeline source tags */
.tl-source-badge[b-4ehxjwgnc3] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
}

.tl-source-badge.source-badge-bot[b-4ehxjwgnc3] { background: rgba(253,203,110,0.1); color: var(--warning); border: 1px solid rgba(253,203,110,0.2); }
.tl-source-badge.source-badge-operator[b-4ehxjwgnc3] { background: rgba(0,184,148,0.1); color: var(--success); border: 1px solid rgba(0,184,148,0.2); }
.tl-source-badge.source-badge-client[b-4ehxjwgnc3] { background: rgba(116,185,255,0.1); color: var(--info); border: 1px solid rgba(116,185,255,0.2); }
.tl-source-badge.source-badge-system[b-4ehxjwgnc3] { background: rgba(178,190,195,0.1); color: var(--text-muted); border: 1px solid var(--border); }

/* Note full button */
.add-note-full-btn[b-4ehxjwgnc3] {
    width: 100%;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.add-note-full-btn:hover[b-4ehxjwgnc3] {
    background: var(--bg-glass-hover);
    border-color: var(--accent);
    color: var(--accent);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .kanban-board[b-4ehxjwgnc3] {
        grid-template-columns: 1fr;
        height: auto;
    }
    .schedule-toolbar[b-4ehxjwgnc3] {
        flex-direction: column;
        align-items: stretch;
    }
    .clients-grid[b-4ehxjwgnc3] {
        grid-template-columns: 1fr;
    }
    .client-detail-panel[b-4ehxjwgnc3] {
        width: 100vw;
    }
}

/* ===================================================
   GUIDE (Руководство использования) — Premium Section
   =================================================== */

/* ---- Section Header ---- */
.guide-header[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem 0 1rem;
    margin-bottom: 0.25rem;
}
.guide-header-icon[b-4ehxjwgnc3] {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--accent), #a29bfe);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 16px var(--accent-glow);
}
.guide-header-title[b-4ehxjwgnc3] {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
    background: linear-gradient(135deg, var(--text-primary) 60%, var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.guide-header-sub[b-4ehxjwgnc3] {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

/* ---- Tile Grid ---- */
.guide-grid[b-4ehxjwgnc3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 0.85rem;
    padding-bottom: 2rem;
}

.guide-tile[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}
.guide-tile[b-4ehxjwgnc3]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--accent-subtle), transparent);
    opacity: 0;
    transition: opacity var(--transition-normal);
    pointer-events: none;
}
.guide-tile:hover[b-4ehxjwgnc3] {
    border-color: var(--accent);
    box-shadow: 0 4px 20px var(--accent-glow);
    transform: translateY(-2px);
}
.guide-tile:hover[b-4ehxjwgnc3]::before {
    opacity: 1;
}
.guide-tile:active[b-4ehxjwgnc3] {
    transform: translateY(0) scale(0.99);
}

.guide-tile-icon[b-4ehxjwgnc3] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--accent-subtle);
    border: 1px solid var(--accent-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--accent);
    flex-shrink: 0;
    transition: all var(--transition-normal);
}
.guide-tile:hover .guide-tile-icon[b-4ehxjwgnc3] {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 14px var(--accent-glow);
}

.guide-tile-body[b-4ehxjwgnc3] {
    flex: 1;
    min-width: 0;
}
.guide-tile-title[b-4ehxjwgnc3] {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    line-height: 1.3;
}
.guide-tile-desc[b-4ehxjwgnc3] {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.guide-tile-arrow[b-4ehxjwgnc3] {
    color: var(--text-muted);
    font-size: 0.8rem;
    flex-shrink: 0;
    transition: transform var(--transition-fast), color var(--transition-fast);
}
.guide-tile:hover .guide-tile-arrow[b-4ehxjwgnc3] {
    transform: translateX(3px);
    color: var(--accent);
}

/* ---- Article Detail ---- */
.guide-article[b-4ehxjwgnc3] {
    max-width: 780px;
    padding: 1rem 0 3rem;
}

.guide-back-btn[b-4ehxjwgnc3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-glass);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.45rem 1rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-bottom: 1.75rem;
    font-family: 'Inter', sans-serif;
}
.guide-back-btn:hover[b-4ehxjwgnc3] {
    background: var(--accent-subtle);
    border-color: var(--accent);
    color: var(--accent);
    transform: translateX(-2px);
}

.guide-article-header[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}
.guide-article-icon[b-4ehxjwgnc3] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--accent), #a29bfe);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 16px var(--accent-glow);
}
.guide-article-title[b-4ehxjwgnc3] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

.guide-article-body[b-4ehxjwgnc3] {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.guide-article-body p[b-4ehxjwgnc3] {
    font-size: 0.88rem;
    line-height: 1.75;
    color: var(--text-secondary);
    margin: 0 0 1rem;
    padding: 0.85rem 1.1rem;
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}
.guide-article-body p:hover[b-4ehxjwgnc3] {
    background: var(--bg-glass-hover);
}
.guide-article-body p strong[b-4ehxjwgnc3] {
    color: var(--text-primary);
    font-weight: 700;
}
.guide-article-body p em[b-4ehxjwgnc3] {
    color: var(--text-muted);
    font-style: italic;
}

/* Responsive */
@media (max-width: 640px) {
    .guide-grid[b-4ehxjwgnc3] {
        grid-template-columns: 1fr;
    }
    .guide-tile[b-4ehxjwgnc3] {
        padding: 0.9rem 1rem;
    }
    .guide-article[b-4ehxjwgnc3] {
        padding-top: 0.5rem;
    }
}

/* ===== Broadcast Tab ===== */
.broadcast-root[b-4ehxjwgnc3] {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 1rem;
}
.broadcast-header[b-4ehxjwgnc3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-glass);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.broadcast-header-left[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.2rem;
    font-weight: 600;
}
.broadcast-subtitle[b-4ehxjwgnc3] {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 0.5rem;
}
.btn-broadcast-new[b-4ehxjwgnc3] {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.btn-broadcast-new:hover[b-4ehxjwgnc3] {
    background: var(--accent-hover);
    box-shadow: 0 4px 15px var(--accent-glow);
}

.broadcast-form[b-4ehxjwgnc3] {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.broadcast-form-title[b-4ehxjwgnc3] {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
}
.bform-row[b-4ehxjwgnc3] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.bform-row label[b-4ehxjwgnc3] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.bform-input[b-4ehxjwgnc3], .bform-select[b-4ehxjwgnc3], .bform-textarea[b-4ehxjwgnc3] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.8rem;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    transition: all var(--transition-fast);
}

.bform-select[b-4ehxjwgnc3] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,0.5)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
    cursor: pointer;
}

.bform-select option[b-4ehxjwgnc3] {
    background-color: #1a1a1a;
    color: #ffffff;
    padding: 10px;
}

.bform-input:focus[b-4ehxjwgnc3], .bform-select:focus[b-4ehxjwgnc3], .bform-textarea:focus[b-4ehxjwgnc3] {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
    background-color: var(--bg-secondary);
}

.bform-textarea[b-4ehxjwgnc3] {
    resize: vertical;
}
.bform-hint[b-4ehxjwgnc3] {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: right;
}
.bform-actions[b-4ehxjwgnc3] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1rem;
}
.btn-bform-cancel[b-4ehxjwgnc3] {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 500;
}
.btn-bform-cancel:hover[b-4ehxjwgnc3] {
    background: var(--bg-hover);
}
.btn-bform-create[b-4ehxjwgnc3] {
    background: linear-gradient(135deg, var(--success), #55efc4);
    color: #000;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}
.btn-bform-create:hover[b-4ehxjwgnc3] {
    box-shadow: 0 4px 15px rgba(0, 184, 148, 0.4);
}
.btn-bform-create:disabled[b-4ehxjwgnc3] {
    opacity: 0.6;
    cursor: not-allowed;
}
.bform-error[b-4ehxjwgnc3] {
    background: rgba(255, 118, 117, 0.1);
    color: var(--danger);
    padding: 0.8rem;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    border: 1px solid rgba(255, 118, 117, 0.2);
}
.bform-spinner[b-4ehxjwgnc3] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0,0,0,0.2);
    border-top-color: #000;
    border-radius: 50%;
    animation: spin 1s infinite linear;
}

.broadcast-empty[b-4ehxjwgnc3] {
    text-align: center;
    padding: 3rem;
    background: var(--bg-glass);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border);
}
.broadcast-loading[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 2rem;
    color: var(--text-muted);
}
.campaigns-list[b-4ehxjwgnc3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
    overflow-y: auto;
}
.campaign-card[b-4ehxjwgnc3] {
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all 0.2s;
}
.campaign-card:hover[b-4ehxjwgnc3] {
    border-color: var(--border-strong);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.cc-head[b-4ehxjwgnc3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.cc-name[b-4ehxjwgnc3] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}
.cc-meta[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
}
.cc-channel-badge[b-4ehxjwgnc3] {
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
}
.cc-channel-whatsapp[b-4ehxjwgnc3] { background: rgba(0, 184, 148, 0.15); color: #00b894; }
.cc-channel-instagram[b-4ehxjwgnc3] { background: rgba(225, 112, 85, 0.15); color: #e17055; }
.cc-channel-messenger[b-4ehxjwgnc3] { background: rgba(9, 132, 227, 0.15); color: #0984e3; }
.cc-channel-all[b-4ehxjwgnc3] { background: rgba(108, 92, 231, 0.15); color: #a29bfe; }

.cc-status-badge[b-4ehxjwgnc3] {
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    border: 1px solid transparent;
}
.cc-status-draft[b-4ehxjwgnc3] { background: rgba(99, 110, 114, 0.2); color: #b2bec3; }
.cc-status-running[b-4ehxjwgnc3] { background: rgba(253, 203, 110, 0.15); color: #fdcb6e; border-color: rgba(253, 203, 110, 0.3); }
.cc-status-completed[b-4ehxjwgnc3] { background: rgba(0, 184, 148, 0.1); color: #00b894; }
.cc-status-cancelled[b-4ehxjwgnc3] { background: rgba(225, 112, 85, 0.1); color: #e17055; }

.cc-date[b-4ehxjwgnc3] {
    color: var(--text-muted);
}
.cc-actions[b-4ehxjwgnc3] {
    display: flex;
    gap: 0.4rem;
}
.cc-btn[b-4ehxjwgnc3] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    cursor: pointer;
    color: var(--text-primary);
    transition: all 0.2s;
}
.cc-btn-start[b-4ehxjwgnc3] {
    width: auto;
    padding: 0 0.8rem;
    gap: 0.4rem;
    font-size: 0.8rem;
    background: rgba(0, 184, 148, 0.1);
    color: #55efc4;
    border-color: rgba(0, 184, 148, 0.3);
}
.cc-btn-start:hover[b-4ehxjwgnc3] {
    background: #00b894;
    color: #000;
}
.cc-btn-cancel[b-4ehxjwgnc3] {
    color: #e17055;
    background: rgba(225, 112, 85, 0.1);
    border-color: rgba(225, 112, 85, 0.2);
}
.cc-btn-cancel:hover[b-4ehxjwgnc3] {
    background: #e17055;
    color: #fff;
}

.cc-message-preview[b-4ehxjwgnc3] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: rgba(0,0,0,0.2);
    padding: 0.8rem;
    border-radius: var(--radius-md);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-left: 3px solid var(--border-strong);
}

.cc-progress-wrap[b-4ehxjwgnc3] {
    margin-top: auto;
}
.cc-progress-bar[b-4ehxjwgnc3] {
    height: 8px;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    margin-bottom: 0.5rem;
}
.cc-progress-fill[b-4ehxjwgnc3] {
    position: absolute;
    top: 0;
    bottom: 0;
    transition: width 0.3s ease;
}
.cc-fill-sent[b-4ehxjwgnc3] {
    background: linear-gradient(90deg, #00b894, #55efc4);
    left: 0;
}
.cc-fill-failed[b-4ehxjwgnc3] {
    background: #e17055;
}
.cc-progress-stats[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.75rem;
}
.cc-stat-sent[b-4ehxjwgnc3] { color: #55efc4; font-weight: 500; }
.cc-stat-failed[b-4ehxjwgnc3] { color: #e17055; font-weight: 500; }
.cc-stat-total[b-4ehxjwgnc3] { color: var(--text-muted); }
.cc-stat-percent[b-4ehxjwgnc3] { margin-left: auto; font-weight: 600; color: var(--text-primary); }
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.8rem;
    color: var(--text-primary);
    font-family: 'Inter'[b-4ehxjwgnc3], sans-serif;
    font-size: 0.9rem;[b-4ehxjwgnc3]
}
.bform-textarea[b-4ehxjwgnc3] {
    resize: vertical;
}
.bform-hint[b-4ehxjwgnc3] {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: right;
}
.bform-actions[b-4ehxjwgnc3] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1rem;
}
.btn-bform-cancel[b-4ehxjwgnc3] {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 500;
}
.btn-bform-cancel:hover[b-4ehxjwgnc3] {
    background: var(--bg-hover);
}
.btn-bform-create[b-4ehxjwgnc3] {
    background: linear-gradient(135deg, var(--success), #55efc4);
    color: #000;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}
.btn-bform-create:hover[b-4ehxjwgnc3] {
    box-shadow: 0 4px 15px rgba(0, 184, 148, 0.4);
}
.btn-bform-create:disabled[b-4ehxjwgnc3] {
    opacity: 0.6;
    cursor: not-allowed;
}
.bform-error[b-4ehxjwgnc3] {
    background: rgba(255, 118, 117, 0.1);
    color: var(--danger);
    padding: 0.8rem;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    border: 1px solid rgba(255, 118, 117, 0.2);
}
.bform-spinner[b-4ehxjwgnc3] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0,0,0,0.2);
    border-top-color: #000;
    border-radius: 50%;
    animation: spin 1s infinite linear;
}

.broadcast-empty[b-4ehxjwgnc3] {
    text-align: center;
    padding: 3rem;
    background: var(--bg-glass);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border);
}
.broadcast-loading[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 2rem;
    color: var(--text-muted);
}
.campaigns-list[b-4ehxjwgnc3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
    overflow-y: auto;
}
.campaign-card[b-4ehxjwgnc3] {
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all 0.2s;
}
.campaign-card:hover[b-4ehxjwgnc3] {
    border-color: var(--border-strong);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.cc-head[b-4ehxjwgnc3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.cc-name[b-4ehxjwgnc3] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}
.cc-meta[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
}
.cc-channel-badge[b-4ehxjwgnc3] {
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
}
.cc-channel-whatsapp[b-4ehxjwgnc3] { background: rgba(0, 184, 148, 0.15); color: #00b894; }
.cc-channel-instagram[b-4ehxjwgnc3] { background: rgba(225, 112, 85, 0.15); color: #e17055; }
.cc-channel-messenger[b-4ehxjwgnc3] { background: rgba(9, 132, 227, 0.15); color: #0984e3; }
.cc-channel-all[b-4ehxjwgnc3] { background: rgba(108, 92, 231, 0.15); color: #a29bfe; }

.cc-status-badge[b-4ehxjwgnc3] {
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    border: 1px solid transparent;
}
.cc-status-draft[b-4ehxjwgnc3] { background: rgba(99, 110, 114, 0.2); color: #b2bec3; }
.cc-status-running[b-4ehxjwgnc3] { background: rgba(253, 203, 110, 0.15); color: #fdcb6e; border-color: rgba(253, 203, 110, 0.3); }
.cc-status-completed[b-4ehxjwgnc3] { background: rgba(0, 184, 148, 0.1); color: #00b894; }
.cc-status-cancelled[b-4ehxjwgnc3] { background: rgba(225, 112, 85, 0.1); color: #e17055; }

.cc-date[b-4ehxjwgnc3] {
    color: var(--text-muted);
}
.cc-actions[b-4ehxjwgnc3] {
    display: flex;
    gap: 0.4rem;
}
.cc-btn[b-4ehxjwgnc3] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    cursor: pointer;
    color: var(--text-primary);
    transition: all 0.2s;
}
.cc-btn-start[b-4ehxjwgnc3] {
    width: auto;
    padding: 0 0.8rem;
    gap: 0.4rem;
    font-size: 0.8rem;
    background: rgba(0, 184, 148, 0.1);
    color: #55efc4;
    border-color: rgba(0, 184, 148, 0.3);
}
.cc-btn-start:hover[b-4ehxjwgnc3] {
    background: #00b894;
    color: #000;
}
.cc-btn-cancel[b-4ehxjwgnc3] {
    color: #e17055;
    background: rgba(225, 112, 85, 0.1);
    border-color: rgba(225, 112, 85, 0.2);
}
.cc-btn-cancel:hover[b-4ehxjwgnc3] {
    background: #e17055;
    color: #fff;
}

.cc-message-preview[b-4ehxjwgnc3] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: rgba(0,0,0,0.2);
    padding: 0.8rem;
    border-radius: var(--radius-md);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-left: 3px solid var(--border-strong);
}

.cc-progress-wrap[b-4ehxjwgnc3] {
    margin-top: auto;
}
.cc-progress-bar[b-4ehxjwgnc3] {
    height: 8px;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    margin-bottom: 0.5rem;
}
.cc-progress-fill[b-4ehxjwgnc3] {
    position: absolute;
    top: 0;
    bottom: 0;
    transition: width 0.3s ease;
}
.cc-fill-sent[b-4ehxjwgnc3] {
    background: linear-gradient(90deg, #00b894, #55efc4);
    left: 0;
}
.cc-fill-failed[b-4ehxjwgnc3] {
    background: #e17055;
}
.cc-progress-stats[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.75rem;
}
.cc-stat-sent[b-4ehxjwgnc3] { color: #55efc4; font-weight: 500; }
.cc-stat-failed[b-4ehxjwgnc3] { color: #e17055; font-weight: 500; }
.cc-stat-total[b-4ehxjwgnc3] { color: var(--text-muted); }
.cc-stat-percent[b-4ehxjwgnc3] { margin-left: auto; font-weight: 600; color: var(--text-primary); }

/* =====================================================
   NOTIFICATION SYSTEM — Bell, Center, Reminder Modal
   ===================================================== */

/* ── Bell Button ── */
.notif-bell-wrap[b-4ehxjwgnc3] {
    position: relative;
    display: flex;
    align-items: center;
}
.notif-bell-btn[b-4ehxjwgnc3] {
    position: relative;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 1rem;
}
.notif-bell-btn:hover[b-4ehxjwgnc3] {
    background: var(--bg-glass-hover);
    color: var(--text-primary);
    border-color: rgba(255,255,255,0.2);
}

/* ── Unread Badge ── */
.notif-badge[b-4ehxjwgnc3] {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: #e17055;
    color: #fff;
    border-radius: 9999px;
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    border: 2px solid var(--bg-secondary);
    animation: badgePop-b-4ehxjwgnc3 0.3s cubic-bezier(0.68,-0.55,0.27,1.55);
}
@keyframes badgePop-b-4ehxjwgnc3 {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

/* ── Notification Center Dropdown ── */
.notification-center[b-4ehxjwgnc3] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-height: 480px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 0 1px rgba(108,92,231,0.08);
    z-index: 3000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.notif-center-header[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-glass);
    flex-shrink: 0;
}
.notif-center-header i[b-4ehxjwgnc3] { color: var(--accent); margin-right: 0.4rem; }
.notif-clear-btn[b-4ehxjwgnc3] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.72rem;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
}
.notif-clear-btn:hover[b-4ehxjwgnc3] { color: var(--danger); }
.notif-center-body[b-4ehxjwgnc3] { flex: 1; overflow-y: auto; }

/* ── Notification Item ── */
.notif-item[b-4ehxjwgnc3] {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.notif-item:last-child[b-4ehxjwgnc3] { border-bottom: none; }
.notif-item:hover[b-4ehxjwgnc3] { background: var(--bg-glass-hover); }
.notif-item--unread[b-4ehxjwgnc3] {
    background: rgba(108,92,231,0.05);
    border-left: 2px solid var(--accent);
}
.notif-item-icon[b-4ehxjwgnc3] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: rgba(253,203,110,0.12);
    color: var(--warning);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
}
.notif-icon-conflict[b-4ehxjwgnc3] { background: rgba(253,203,110,0.2) !important; color: #fdcb6e !important; }
.notif-item-body[b-4ehxjwgnc3] { flex: 1; min-width: 0; }
.notif-item-title[b-4ehxjwgnc3] {
    font-size: 0.78rem;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 0.2rem;
}
.notif-item-meta[b-4ehxjwgnc3] {
    font-size: 0.68rem;
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.notif-service[b-4ehxjwgnc3] { color: var(--accent); }
.notif-empty[b-4ehxjwgnc3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
    font-size: 0.82rem;
}
.notif-empty i[b-4ehxjwgnc3] { font-size: 1.8rem; opacity: 0.4; }

/* ── Reminder Button ── */
.btn-reminder[b-4ehxjwgnc3] {
    background: rgba(108, 92, 231, 0.12);
    color: var(--accent);
    border: 1px solid rgba(108, 92, 231, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all var(--transition-fast);
}
.btn-reminder:hover[b-4ehxjwgnc3] {
    background: rgba(108, 92, 231, 0.22);
    border-color: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow);
    transform: translateY(-1px);
    color: var(--accent);
}
.reminder-active-badge[b-4ehxjwgnc3] {
    font-size: 0.6rem;
    font-weight: 700;
    background: var(--accent);
    color: #fff;
    padding: 0.1rem 0.4rem;
    border-radius: 9999px;
}

/* ── Reminder Modal ── */
.reminder-modal[b-4ehxjwgnc3] { max-width: 440px; width: 100%; }
.reminder-modal-header[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-glass);
}
.reminder-modal-title[b-4ehxjwgnc3] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.reminder-modal-body[b-4ehxjwgnc3] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.reminder-info-block[b-4ehxjwgnc3] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    background: rgba(116, 185, 255, 0.06);
    border: 1px solid rgba(116, 185, 255, 0.15);
    border-radius: var(--radius-md);
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.reminder-info-icon[b-4ehxjwgnc3] { color: var(--info); font-size: 1rem; margin-top: 1px; flex-shrink: 0; }
.reminder-sound-row[b-4ehxjwgnc3],
.reminder-push-row[b-4ehxjwgnc3] {
    padding: 0.75rem 0.85rem;
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);
}
.reminder-sound-row:hover[b-4ehxjwgnc3],
.reminder-push-row:hover[b-4ehxjwgnc3] { border-color: var(--border-strong); }
.reminder-checkbox-label[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    cursor: pointer;
    margin: 0;
}
.reminder-checkbox-wrap[b-4ehxjwgnc3] { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.reminder-checkbox[b-4ehxjwgnc3] { opacity: 0; width: 0; height: 0; position: absolute; }
.reminder-checkbox-ui[b-4ehxjwgnc3] {
    position: absolute;
    inset: 0;
    background: var(--border-strong);
    border-radius: 99px;
    transition: background var(--transition-fast);
    cursor: pointer;
}
.reminder-checkbox-ui[b-4ehxjwgnc3]::after {
    content: '';
    position: absolute;
    left: 3px; top: 3px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform var(--transition-fast);
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.reminder-checkbox:checked + .reminder-checkbox-ui[b-4ehxjwgnc3] { background: var(--accent); }
.reminder-checkbox:checked + .reminder-checkbox-ui[b-4ehxjwgnc3]::after { transform: translateX(18px); }
.reminder-checkbox-title[b-4ehxjwgnc3] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.reminder-checkbox-title i[b-4ehxjwgnc3] { color: var(--accent); }
.reminder-checkbox-sub[b-4ehxjwgnc3] { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.15rem; }
.reminder-status-msg[b-4ehxjwgnc3] {
    font-size: 0.78rem;
    color: var(--success);
    text-align: center;
    padding: 0.4rem;
}
.reminder-modal-footer[b-4ehxjwgnc3] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    background: var(--bg-glass);
}

/* Highlighted slot card */
.kanban-card--highlighted[b-4ehxjwgnc3] {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent-glow), 0 4px 20px rgba(108,92,231,0.3) !important;
    animation: highlightPulse-b-4ehxjwgnc3 2s ease-in-out 2;
}
@keyframes highlightPulse-b-4ehxjwgnc3 {
    0%, 100% { box-shadow: 0 0 0 2px var(--accent-glow); }
    50% { box-shadow: 0 0 0 4px var(--accent-glow), 0 4px 30px rgba(108,92,231,0.4); }
}

@media (max-width: 480px) {
    .notification-center[b-4ehxjwgnc3] { width: calc(100vw - 1rem); right: -0.5rem; }
}

/* ===== Premium Modal Enhancements ===== */
.premium-modal[b-4ehxjwgnc3] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    padding: 0;
    width: 480px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 40px rgba(108, 92, 231, 0.1);
    overflow: hidden;
}

.modal-header-premium[b-4ehxjwgnc3] {
    padding: 1.5rem 1.75rem;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header-premium h4[b-4ehxjwgnc3] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-close-premium[b-4ehxjwgnc3] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-close-premium:hover[b-4ehxjwgnc3] {
    color: var(--danger);
    transform: rotate(90deg);
}

.modal-body-premium[b-4ehxjwgnc3] {
    padding: 1.75rem;
}

.premium-label[b-4ehxjwgnc3] {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}

.premium-input-wrap[b-4ehxjwgnc3] {
    position: relative;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all var(--transition-fast);
}

.premium-input-wrap:focus-within[b-4ehxjwgnc3] {
    border-color: var(--accent);
    background: var(--bg-elevated);
    box-shadow: 0 0 0 4px var(--accent-glow);
}

.premium-input-wrap i[b-4ehxjwgnc3] {
    font-size: 1rem;
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.premium-input-wrap:focus-within i[b-4ehxjwgnc3] {
    color: var(--accent);
}

.premium-input-wrap input[b-4ehxjwgnc3] {
    background: transparent;
    border: none;
    width: 100%;
    padding: 0.75rem 0;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
}

.premium-input-wrap input:focus[b-4ehxjwgnc3] {
    outline: none;
}

.premium-input-wrap select[b-4ehxjwgnc3],
.premium-input-wrap input[type="datetime-local"][b-4ehxjwgnc3] {
    background: transparent;
    border: none;
    width: 100%;
    padding: 0.75rem 0;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    outline: none;
}

.premium-input-wrap select:focus[b-4ehxjwgnc3],
.premium-input-wrap input[type="datetime-local"]:focus[b-4ehxjwgnc3] {
    outline: none;
}

.premium-input-wrap select option[b-4ehxjwgnc3] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.premium-textarea-wrap[b-4ehxjwgnc3] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.75rem;
    transition: all var(--transition-fast);
}

.premium-textarea-wrap:focus-within[b-4ehxjwgnc3] {
    border-color: var(--accent);
    background: var(--bg-elevated);
    box-shadow: 0 0 0 4px var(--accent-glow);
}

.premium-textarea-wrap textarea[b-4ehxjwgnc3] {
    background: transparent;
    border: none;
    width: 100%;
    color: var(--text-primary);
    font-size: 0.9rem;
    resize: none;
    font-family: 'Inter', sans-serif;
}

.premium-textarea-wrap textarea:focus[b-4ehxjwgnc3] {
    outline: none;
}

.modal-footer-premium[b-4ehxjwgnc3] {
    padding: 1.25rem 1.75rem;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Readonly state */
.is-readonly[b-4ehxjwgnc3] {
    opacity: 0.8;
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: var(--border) !important;
    pointer-events: none;
}

.is-readonly input[b-4ehxjwgnc3], .is-readonly textarea[b-4ehxjwgnc3] {
    color: var(--text-muted);
}

/* Animations */
.animate-scale-in[b-4ehxjwgnc3] {
    animation: scaleIn-b-4ehxjwgnc3 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes scaleIn-b-4ehxjwgnc3 {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ===== Appointment Filter & Accordion ===== */
.apt-filter-bar[b-4ehxjwgnc3] {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    display: flex;
    justify-content: flex-start;
}

.apt-filter-item[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-primary);
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.apt-filter-item:focus-within[b-4ehxjwgnc3] {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

.apt-filter-item i[b-4ehxjwgnc3] {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.apt-date-input[b-4ehxjwgnc3] {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.85rem;
    outline: none;
    width: 140px;
}

.apt-filter-clear[b-4ehxjwgnc3] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    transition: color var(--transition-fast);
}

.apt-filter-clear:hover[b-4ehxjwgnc3] {
    color: var(--danger);
}

/* Accordion for Notes */
.apt-notes-accordion[b-4ehxjwgnc3] {
    margin-top: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-primary);
    transition: all var(--transition-normal);
}

.apt-notes-toggle[b-4ehxjwgnc3] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    background: var(--bg-glass);
    border: none;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.apt-notes-toggle:hover[b-4ehxjwgnc3] {
    background: var(--bg-glass-hover);
    color: var(--text-primary);
}

.apt-notes-toggle i.bi-journal-text[b-4ehxjwgnc3] {
    color: var(--accent);
    margin-right: 0.4rem;
}

.apt-notes-content[b-4ehxjwgnc3] {
    max-height: 0;
    overflow: hidden;
    padding: 0 0.85rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

.apt-notes-accordion.expanded .apt-notes-content[b-4ehxjwgnc3] {
    max-height: 300px; /* Large enough for big notes */
    padding: 0.85rem;
    opacity: 1;
    border-top: 1px solid var(--border);
}

.apt-notes-accordion.expanded[b-4ehxjwgnc3] {
    border-color: var(--accent-subtle);
}

.apt-service-val[b-4ehxjwgnc3] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.85rem;
}


/* ===== Updated Appointment Navigation (Image 1) ===== */
.apt-filter-nav-v2[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.apt-nav-btn[b-4ehxjwgnc3] {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.apt-nav-btn:hover[b-4ehxjwgnc3] {
    background: var(--bg-tertiary);
    border-color: var(--border-strong);
    transform: scale(1.05);
}

.apt-date-display[b-4ehxjwgnc3] {
    position: relative;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0 1.25rem;
    height: 38px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 160px;
    cursor: pointer;
}

.apt-hidden-picker[b-4ehxjwgnc3] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
}

.apt-date-text[b-4ehxjwgnc3] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent);
}

.apt-date-display i[b-4ehxjwgnc3] {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-left: auto;
}

.apt-today-btn[b-4ehxjwgnc3] {
    height: 38px;
    padding: 0 1.25rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.apt-today-btn:hover[b-4ehxjwgnc3] {
    background: var(--bg-tertiary);
    border-color: var(--accent-subtle);
    color: var(--accent);
}

/* ===== Updated Appointment Card (Image 2) ===== */
.appointment-card-v3[b-4ehxjwgnc3] {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 1.25rem;
    overflow: hidden;
    transition: all var(--transition-fast);
}

.appointment-card-v3:hover[b-4ehxjwgnc3] {
    border-color: var(--border-strong);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.apt-v3-header[b-4ehxjwgnc3] {
    background: rgba(255,255,255,0.02);
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.apt-v3-time-info[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: #a29bfe;
}

.apt-v3-date-sub[b-4ehxjwgnc3] {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.apt-v3-body[b-4ehxjwgnc3] {
    padding: 1.25rem;
}

.apt-v3-grid[b-4ehxjwgnc3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.apt-v3-item small[b-4ehxjwgnc3] {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}

.apt-v3-val[b-4ehxjwgnc3] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.source-highlight[b-4ehxjwgnc3] {
    color: #fdcb6e;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.source-highlight i[b-4ehxjwgnc3] { font-size: 0.9rem; }

/* ===== Kanban Card Payment Status ===== */
.kanban-card-paid-status[b-4ehxjwgnc3] {
    margin-top: 0.5rem;
    padding: 0.25rem 0.6rem;
    background: rgba(0, 184, 148, 0.1);
    color: var(--success);
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid rgba(0, 184, 148, 0.2);
}

/* ===== Revenue Dashboard Mini ===== */
.revenue-dashboard-mini[b-4ehxjwgnc3] {
    display: flex;
    gap: 0.75rem;
}
.rev-pill[b-4ehxjwgnc3] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0.35rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}
.rev-lab[b-4ehxjwgnc3] {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
}
.rev-val[b-4ehxjwgnc3] {
    font-size: 0.85rem;
    font-weight: 700;
}

/* ===== Transaction List v2 ===== */
.transaction-list-v2[b-4ehxjwgnc3] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.transaction-item-v2[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem;
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}
.transaction-item-v2:hover[b-4ehxjwgnc3] {
    border-color: var(--accent-subtle);
    background: var(--bg-glass-hover);
}
.tr-icon[b-4ehxjwgnc3] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 1.1rem;
}
.tr-info[b-4ehxjwgnc3] {
    flex: 1;
}
.tr-service[b-4ehxjwgnc3] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}
.tr-meta[b-4ehxjwgnc3] {
    font-size: 0.7rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.tr-dot[b-4ehxjwgnc3] { opacity: 0.3; }
.tr-amount[b-4ehxjwgnc3] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--success);
}

/* ===== Payment Modal Specifics ===== */
.payment-modal[b-4ehxjwgnc3] {
    max-width: 420px;
}
.payment-info-box[b-4ehxjwgnc3] {
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}
.p-row[b-4ehxjwgnc3] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
}
.p-row:last-child[b-4ehxjwgnc3] { margin-bottom: 0; }
.p-label[b-4ehxjwgnc3] { color: var(--text-muted); }
.p-val[b-4ehxjwgnc3] { color: var(--text-primary); font-weight: 600; }

/* ===== Transactions Date Filter Bar ===== */
.tr-filter-bar[b-4ehxjwgnc3] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 0.5rem;
}

.btn-tr-nav[b-4ehxjwgnc3] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: var(--text-primary);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.btn-tr-nav:hover[b-4ehxjwgnc3] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--accent);
}

.btn-tr-nav:active[b-4ehxjwgnc3] {
    transform: scale(0.95);
}

.tr-date-picker-wrap[b-4ehxjwgnc3] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    height: 38px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.tr-date-picker-wrap:hover[b-4ehxjwgnc3] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.tr-date-picker-wrap i[b-4ehxjwgnc3] {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-left: 4px;
    color: var(--text-muted);
    transition: color 0.2s ease;
}

.tr-date-picker-wrap:hover i[b-4ehxjwgnc3] {
    color: var(--accent);
    opacity: 1;
}

.tr-hidden-date-picker[b-4ehxjwgnc3] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    outline: none;
}

.btn-tr-today[b-4ehxjwgnc3] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0 16px;
    height: 38px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-tr-today:hover[b-4ehxjwgnc3] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--accent);
}

.btn-tr-today:active[b-4ehxjwgnc3] {
    transform: scale(0.95);
}
/* /Pages/GuideUsage.razor.rz.scp.css */
/* ╔═══════════════════════════════════════╗
   ║  GuideUsage.razor.css                 ║
   ╚═══════════════════════════════════════╝ */

/* ─── Page Shell ─── */
.guide-page[b-8pxpfafte3] {
    max-width: 860px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

/* ─── Page Header ─── */
.guide-page-header[b-8pxpfafte3] {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: 2rem;
}

.guide-page-icon[b-8pxpfafte3] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark, #4f46e5));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(99,102,241,.35);
}

.guide-page-title[b-8pxpfafte3] {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.2rem;
    line-height: 1.2;
}

.guide-page-subtitle[b-8pxpfafte3] {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin: 0;
}

/* ─── Tile Grid ─── */
.guide-tile-grid[b-8pxpfafte3] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.guide-card[b-8pxpfafte3] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-glass, rgba(255,255,255,.04));
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 14px;
    padding: 1rem 1.2rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.guide-card[b-8pxpfafte3]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--accent, #6366f1), transparent);
    opacity: 0;
    transition: opacity .22s ease;
    border-radius: inherit;
}

.guide-card:hover[b-8pxpfafte3] {
    transform: translateY(-2px);
    border-color: var(--accent, #6366f1);
    box-shadow: 0 6px 24px rgba(99,102,241,.18);
}

.guide-card:hover[b-8pxpfafte3]::before {
    opacity: 0.04;
}

.guide-card:active[b-8pxpfafte3] {
    transform: translateY(0);
}

/* Icon bubble */
.guide-card-icon-wrap[b-8pxpfafte3] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--accent-subtle, rgba(99,102,241,.12));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--accent, #6366f1);
    flex-shrink: 0;
    transition: background .18s ease, color .18s ease;
    position: relative;
    z-index: 1;
}

.guide-card:hover .guide-card-icon-wrap[b-8pxpfafte3] {
    background: var(--accent, #6366f1);
    color: #fff;
}

/* Body */
.guide-card-body[b-8pxpfafte3] {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.guide-card-title[b-8pxpfafte3] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
    line-height: 1.3;
}

.guide-card-desc[b-8pxpfafte3] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

/* Arrow */
.guide-card-arrow[b-8pxpfafte3] {
    color: var(--text-muted, rgba(255,255,255,.25));
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: transform .18s ease, color .18s ease;
    position: relative;
    z-index: 1;
}

.guide-card:hover .guide-card-arrow[b-8pxpfafte3] {
    transform: translateX(3px);
    color: var(--accent, #6366f1);
}

/* ─── Article Detail ─── */
.guide-article-page[b-8pxpfafte3] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.guide-back-btn[b-8pxpfafte3] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: transparent;
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.83rem;
    font-weight: 600;
    padding: 0.45rem 0.9rem;
    cursor: pointer;
    transition: all .18s ease;
    margin-bottom: 1.6rem;
    font-family: 'Inter', sans-serif;
    align-self: flex-start;
}

.guide-back-btn:hover[b-8pxpfafte3] {
    background: var(--bg-glass-hover, rgba(255,255,255,.06));
    color: var(--accent, #6366f1);
    border-color: var(--accent, #6366f1);
    transform: translateX(-2px);
}

.guide-article-hdr[b-8pxpfafte3] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.8rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
}

.guide-article-hdr-icon[b-8pxpfafte3] {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent, #6366f1), var(--accent-dark, #4f46e5));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(99,102,241,.3);
}

.guide-article-hdr-title[b-8pxpfafte3] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
    margin: 0;
}

/* Paragraphs */
.guide-article-content p[b-8pxpfafte3] {
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--text-secondary);
    margin-bottom: 0.9rem;
    padding: 0.75rem 1rem;
    background: var(--bg-glass, rgba(255,255,255,.03));
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition: border-color .15s ease, background .15s ease;
}

.guide-article-content p:first-child[b-8pxpfafte3] {
    font-weight: 600;
    color: var(--text-primary);
    background: transparent;
    padding: 0 0 0.3rem;
    border-left: none;
}

.guide-article-content p:hover[b-8pxpfafte3] {
    border-left-color: var(--accent, #6366f1);
    background: var(--bg-glass-hover, rgba(99,102,241,.05));
}

.guide-article-content p strong[b-8pxpfafte3] {
    color: var(--accent, #6366f1);
    font-weight: 700;
}

.guide-article-content p em[b-8pxpfafte3] {
    color: var(--text-primary);
    font-style: normal;
    font-weight: 600;
}

/* ─── Fade-in animation ─── */
.animate-fade-in[b-8pxpfafte3] {
    animation: fadeInUp-b-8pxpfafte3 .3s ease both;
}

@keyframes fadeInUp-b-8pxpfafte3 {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Mobile ─── */
@media (max-width: 640px) {
    .guide-page[b-8pxpfafte3] {
        padding: 1.2rem 1rem 3rem;
    }

    .guide-card[b-8pxpfafte3] {
        padding: 0.85rem 1rem;
    }

    .guide-article-hdr-title[b-8pxpfafte3] {
        font-size: 1.1rem;
    }
}