/* ============================================
   ROTARACT CLUB OF COIMBATORE UNITY
   ADVANCED ADMIN PANEL STYLESHEET
   File: css/admin.css | Version: 12.0.0
   Premium Glassmorphism | Unified Color System | Micro-Interactions
   ============================================ */

/* ==========================================
   0. CSS CUSTOM PROPERTIES (UNIFIED COLOR SYSTEM)
   ========================================== */
:root {
    /* Primary Palette */
    --ap-glass-bg: rgba(255, 255, 255, 0.55);
    --ap-glass-bg-heavy: rgba(255, 255, 255, 0.72);
    --ap-glass-bg-light: rgba(255, 255, 255, 0.35);
    --ap-glass-border: rgba(255, 255, 255, 0.45);
    --ap-glass-border-light: rgba(255, 255, 255, 0.2);
    --ap-glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.06);
    --ap-glass-shadow-hover: 0 16px 48px rgba(31, 38, 135, 0.12);
    --ap-glass-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    --ap-glass-blur: blur(20px) saturate(180%);
    --ap-glass-blur-heavy: blur(30px) saturate(200%);

    /* Unified Icon & Accent Colors */
    --ap-icon-primary: #1a73e8;
    --ap-icon-secondary: #7c3aed;
    --ap-icon-success: #16a34a;
    --ap-icon-warning: #d97706;
    --ap-icon-danger: #dc2626;
    --ap-icon-info: #0891b2;
    --ap-icon-pink: #db2777;

    /* Surface Colors */
    --ap-surface-base: #f0f4f8;
    --ap-surface-elevated: rgba(255, 255, 255, 0.6);
    --ap-surface-input: rgba(255, 255, 255, 0.5);
    --ap-surface-hover: rgba(26, 115, 232, 0.04);

    /* Text */
    --ap-text-heading: #0f172a;
    --ap-text-body: #334155;
    --ap-text-muted: #64748b;
    --ap-text-faint: #94a3b8;

    /* Borders */
    --ap-border-subtle: rgba(0, 0, 0, 0.04);
    --ap-border-default: rgba(0, 0, 0, 0.06);
    --ap-border-focus: rgba(26, 115, 232, 0.4);

    /* Transitions */
    --ap-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ap-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ap-duration-fast: 0.15s;
    --ap-duration-normal: 0.25s;
    --ap-duration-slow: 0.4s;

    /* Radius */
    --ap-radius-sm: 8px;
    --ap-radius-md: 12px;
    --ap-radius-lg: 16px;
    --ap-radius-xl: 20px;
    --ap-radius-2xl: 24px;
    --ap-radius-3xl: 28px;
}

/* Dark Mode Variables */

/* ==========================================
   1. PORTAL SHELL & BACKGROUND
   ========================================== */

/* Animated Background Orbs */
#admin-portal-modal::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 900px 700px at 8% 12%, rgba(26, 115, 232, 0.14) 0%, transparent 65%),
        radial-gradient(ellipse 700px 600px at 92% 22%, rgba(124, 58, 237, 0.11) 0%, transparent 65%),
        radial-gradient(ellipse 600px 500px at 45% 88%, rgba(6, 182, 212, 0.09) 0%, transparent 60%),
        radial-gradient(ellipse 400px 350px at 75% 55%, rgba(236, 72, 153, 0.06) 0%, transparent 55%);
    animation: portalOrbDrift 40s ease-in-out infinite alternate;
}

.dark #admin-portal-modal::before {
    background:
        radial-gradient(ellipse 900px 700px at 8% 12%, rgba(96, 165, 250, 0.08) 0%, transparent 65%),
        radial-gradient(ellipse 700px 600px at 92% 22%, rgba(167, 139, 250, 0.06) 0%, transparent 65%),
        radial-gradient(ellipse 600px 500px at 45% 88%, rgba(34, 211, 238, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse 400px 350px at 75% 55%, rgba(244, 114, 182, 0.04) 0%, transparent 55%);
}

@keyframes portalOrbDrift {
    0% { transform: scale(1) translate(0, 0); opacity: 1; }
    33% { transform: scale(1.05) translate(10px, -8px); opacity: 0.85; }
    66% { transform: scale(0.98) translate(-8px, 5px); opacity: 0.9; }
    100% { transform: scale(1) translate(0, 0); opacity: 1; }
}

#admin-portal-modal > * {
    position: relative;
    z-index: 1;
}

/* ==========================================
   2. HEADER GLASS BAR
   ========================================== */

/* ==========================================
   3. SIDEBAR GLASS NAVIGATION
   ========================================== */
#admin-portal-modal aside {
    background: var(--ap-glass-bg-light) !important;
    backdrop-filter: var(--ap-glass-blur) !important;
    -webkit-backdrop-filter: var(--ap-glass-blur) !important;
    border-right: 1px solid var(--ap-glass-border-light) !important;
    box-shadow: inset -1px 0 0 var(--ap-glass-border-light) !important;
}

/* Sidebar Menu Buttons */
.admin-menu-btn {
    color: var(--ap-text-muted) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    transition: all var(--ap-duration-normal) var(--ap-ease-out) !important;
    border-radius: var(--ap-radius-md) !important;
}

.admin-menu-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 55%;
    background: linear-gradient(180deg, var(--ap-icon-primary), var(--ap-icon-secondary));
    border-radius: 0 6px 6px 0;
    transition: transform var(--ap-duration-normal) var(--ap-ease-out);
}

.admin-menu-btn:hover {
    background: var(--ap-surface-hover) !important;
    color: var(--ap-icon-primary) !important;
    transform: translateX(3px);
}

.admin-menu-btn.active {
    background: linear-gradient(135deg, rgba(26, 115, 232, 0.1) 0%, rgba(124, 58, 237, 0.06) 100%) !important;
    color: var(--ap-icon-primary) !important;
    border-color: rgba(26, 115, 232, 0.15) !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 12px rgba(26, 115, 232, 0.08);
}

.dark .admin-menu-btn.active {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.12) 0%, rgba(167, 139, 250, 0.08) 100%) !important;
    color: var(--ap-icon-primary) !important;
    border-color: rgba(96, 165, 250, 0.2) !important;
}

.admin-menu-btn.active::before {
    transform: translateY(-50%) scaleY(1);
}

/* ==========================================
   4. GLASS PANEL CARDS
   ========================================== */
.admin-panel {
    background: var(--ap-glass-bg) !important;
    backdrop-filter: var(--ap-glass-blur) !important;
    -webkit-backdrop-filter: var(--ap-glass-blur) !important;
    border: 1px solid var(--ap-glass-border) !important;
    border-radius: var(--ap-radius-2xl) !important;
    box-shadow: var(--ap-glass-shadow), var(--ap-glass-inner-glow) !important;
    overflow: hidden;
    transition: all var(--ap-duration-normal) var(--ap-ease-out);
}

.admin-panel:hover {
    box-shadow: var(--ap-glass-shadow-hover), var(--ap-glass-inner-glow) !important;
    transform: translateY(-1px);
}

.admin-panel-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--ap-border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.15);
}

.dark .admin-panel-header {
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--ap-border-subtle);
}

.admin-panel-title {
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ap-text-heading);
}

/* UNIFIED PANEL TITLE ICON COLORS */

.admin-panel-body {
    padding: 22px;
}

/* ==========================================
   5. GLASS STAT CARDS
   ========================================== */
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 28px;
}

.admin-stat-card {
    background: var(--ap-glass-bg) !important;
    backdrop-filter: var(--ap-glass-blur) !important;
    -webkit-backdrop-filter: var(--ap-glass-blur) !important;
    border: 1px solid var(--ap-glass-border) !important;
    border-radius: var(--ap-radius-2xl) !important;
    padding: 22px;
    position: relative;
    overflow: hidden;
    transition: all var(--ap-duration-normal) var(--ap-ease-out);
    box-shadow: var(--ap-glass-shadow), var(--ap-glass-inner-glow);
}

.admin-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ap-glass-shadow-hover), var(--ap-glass-inner-glow) !important;
}

.admin-stat-card:hover::after {
    transform: scale(1.6);
    opacity: 0.1;
}

.admin-stat-card.green::after { background: var(--ap-icon-success); }
.admin-stat-card.green .admin-stat-icon { background: rgba(22, 163, 74, 0.1) !important; color: var(--ap-icon-success) !important; }

.admin-stat-card.yellow::after { background: var(--ap-icon-warning); }
.admin-stat-card.yellow .admin-stat-icon { background: rgba(217, 119, 6, 0.1) !important; color: var(--ap-icon-warning) !important; }

.admin-stat-card.purple::after { background: var(--ap-icon-secondary); }
.admin-stat-card.purple .admin-stat-icon { background: rgba(124, 58, 237, 0.1) !important; color: var(--ap-icon-secondary) !important; }

.admin-stat-card.red::after { background: var(--ap-icon-danger); }
.admin-stat-card.red .admin-stat-icon { background: rgba(220, 38, 38, 0.1) !important; color: var(--ap-icon-danger) !important; }

.admin-stat-card.cyan::after { background: var(--ap-icon-info); }
.admin-stat-card.cyan .admin-stat-icon { background: rgba(8, 145, 178, 0.1) !important; color: var(--ap-icon-info) !important; }

.admin-stat-value {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.5px;
    line-height: 1;
    color: var(--ap-text-heading);
}

.admin-stat-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--ap-text-faint);
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ==========================================
   6. GLASS BUTTONS (UNIFIED COLORS)
   ========================================== */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--ap-radius-md);
    font-size: 11px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, var(--ap-icon-primary) 0%, var(--ap-icon-secondary) 100%) !important;
    color: white !important;
    border: none !important;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(26, 115, 232, 0.25);
    transition: all var(--ap-duration-normal) var(--ap-ease-out);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(26, 115, 232, 0.35);
}

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

.btn-primary.btn-sm { padding: 7px 14px; font-size: 10px; border-radius: var(--ap-radius-sm); }
.btn-primary.btn-xs { padding: 5px 10px; font-size: 9px; border-radius: 6px; }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--ap-radius-md);
    font-size: 11px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    background: var(--ap-glass-bg) !important;
    backdrop-filter: blur(10px);
    border: 1px solid var(--ap-border-default) !important;
    color: var(--ap-text-body) !important;
    cursor: pointer;
    transition: all var(--ap-duration-normal) var(--ap-ease-out);
}

.dark .btn-secondary {
    background: rgba(30, 41, 59, 0.5) !important;
    border: 1px solid var(--ap-border-default) !important;
    color: var(--ap-text-body) !important;
}

.btn-secondary:hover {
    background: var(--ap-glass-bg-heavy) !important;
    border-color: var(--ap-border-focus) !important;
    color: var(--ap-icon-primary) !important;
}

.btn-secondary.btn-sm { padding: 7px 14px; font-size: 10px; }
.btn-secondary.btn-xs { padding: 5px 10px; font-size: 9px; }

.btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--ap-radius-md);
    font-size: 11px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, var(--ap-icon-danger) 0%, #b91c1c 100%) !important;
    color: white !important;
    border: none !important;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.2);
    transition: all var(--ap-duration-normal) var(--ap-ease-out);
}

.btn-danger:hover {
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.3);
    transform: translateY(-1px);
}

.btn-danger.btn-xs { padding: 5px 10px; font-size: 9px; border-radius: 6px; }

/* ==========================================
   7. UNIFIED BADGE SYSTEM
   ========================================== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    backdrop-filter: blur(8px);
}

.badge-blue {
    background: rgba(26, 115, 232, 0.1) !important;
    color: var(--ap-icon-primary) !important;
    border: 1px solid rgba(26, 115, 232, 0.15);
}

.badge-green {
    background: rgba(22, 163, 74, 0.1) !important;
    color: var(--ap-icon-success) !important;
    border: 1px solid rgba(22, 163, 74, 0.15);
}

.badge-yellow {
    background: rgba(217, 119, 6, 0.1) !important;
    color: var(--ap-icon-warning) !important;
    border: 1px solid rgba(217, 119, 6, 0.15);
}

.badge-red {
    background: rgba(220, 38, 38, 0.1) !important;
    color: var(--ap-icon-danger) !important;
    border: 1px solid rgba(220, 38, 38, 0.15);
}

.badge-purple {
    background: rgba(124, 58, 237, 0.1) !important;
    color: var(--ap-icon-secondary) !important;
    border: 1px solid rgba(124, 58, 237, 0.15);
}

.badge-gray {
    background: rgba(148, 163, 184, 0.1) !important;
    color: var(--ap-text-faint) !important;
    border: 1px solid rgba(148, 163, 184, 0.15);
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 9px;
    font-weight: 700;
    text-transform: capitalize;
}

.status-badge.sent, .status-badge.active, .status-badge.approved, .status-badge.completed {
    background: rgba(22, 163, 74, 0.1); color: var(--ap-icon-success);
}
.status-badge.failed, .status-badge.rejected, .status-badge.cancelled {
    background: rgba(220, 38, 38, 0.1); color: var(--ap-icon-danger);
}
.status-badge.pending, .status-badge.queued, .status-badge.draft {
    background: rgba(217, 119, 6, 0.1); color: var(--ap-icon-warning);
}
.status-badge.fulfilled {
    background: rgba(26, 115, 232, 0.1); color: var(--ap-icon-primary);
}

/* ==========================================
   8. GLASS DATA TABLES
   ========================================== */
.admin-data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}

.admin-data-table thead tr {
    background: rgba(248, 250, 252, 0.5);
}

.dark .admin-data-table thead tr {
    background: rgba(15, 23, 42, 0.4);
}

.admin-data-table th {
    padding: 12px 16px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ap-text-faint);
    text-align: left;
    border-bottom: 2px solid var(--ap-border-subtle);
}

.admin-data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ap-border-subtle);
    color: var(--ap-text-body);
    vertical-align: middle;
}

.admin-data-table tbody tr {
    transition: background var(--ap-duration-fast) var(--ap-ease-out);
}

.admin-data-table tbody tr:hover {
    background: var(--ap-surface-hover);
}

/* ==========================================
   9. GLASS FORM ELEMENTS
   ========================================== */
.admin-form-group {
    margin-bottom: 16px;
}

.admin-form-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ap-text-muted);
    margin-bottom: 6px;
}

.admin-form-label .required {
    color: var(--ap-icon-danger);
    margin-left: 2px;
}

.admin-form-input {
    width: 100%;
    padding: 10px 14px;
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
    border-radius: var(--ap-radius-md);
    background: var(--ap-surface-input) !important;
    backdrop-filter: blur(8px);
    border: 1.5px solid var(--ap-border-default) !important;
    color: var(--ap-text-heading) !important;
    transition: all var(--ap-duration-normal) var(--ap-ease-out);
}

.dark .admin-form-input {
    background: rgba(15, 23, 42, 0.5) !important;
    border: 1.5px solid var(--ap-border-default) !important;
    color: var(--ap-text-heading) !important;
}

.admin-form-input:focus {
    outline: none !important;
    border-color: var(--ap-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.08);
    background: var(--ap-glass-bg-heavy) !important;
}

.admin-form-input::placeholder {
    color: var(--ap-text-faint);
}

.admin-form-textarea {
    resize: vertical;
    min-height: 80px;
    font-family: 'Poppins', sans-serif;
}

.admin-form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.admin-form-grid .full-width {
    grid-column: span 2;
}

@media (max-width: 640px) {
    .admin-form-grid { grid-template-columns: 1fr; }
    .admin-form-grid .full-width { grid-column: span 1; }}

.admin-form-hint {
    font-size: 10px;
    color: var(--ap-text-faint);
    margin-top: 4px;
    display: block;
}

.admin-form-section {
    padding: 20px;
    border-radius: var(--ap-radius-xl);
    background: var(--ap-glass-bg-light);
    border: 1px solid var(--ap-border-subtle);
    margin-bottom: 16px;
    backdrop-filter: blur(10px);
}

.admin-form-section-title {
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ap-border-subtle);
    color: var(--ap-text-heading);
}

.admin-form-section-title i {
    color: var(--ap-icon-primary) !important;
}

/* ==========================================
   10. QUICK ACTION BUTTONS
   ========================================== */
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}

.quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 12px;
    border-radius: var(--ap-radius-lg);
    background: var(--ap-glass-bg) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid var(--ap-glass-border-light) !important;
    color: var(--ap-text-body) !important;
    cursor: pointer;
    transition: all var(--ap-duration-normal) var(--ap-ease-out);
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.dark .quick-action-btn {
    background: rgba(30, 41, 59, 0.4) !important;
    border: 1px solid var(--ap-border-default) !important;
    color: var(--ap-text-body) !important;
}

.quick-action-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(26, 115, 232, 0.12);
    border-color: var(--ap-border-focus) !important;
    color: var(--ap-icon-primary) !important;
}

/* UNIFIED QUICK ACTION ICON COLORS */

/* ==========================================
   11. GLASS MODAL SYSTEM
   ========================================== */
.admin-modal-backdrop,
#admin-dynamic-modal > div:first-child {
    background: rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(12px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
}

.dark #admin-dynamic-modal > div:first-child {
    background: rgba(0, 0, 0, 0.5) !important;
}

#admin-dynamic-modal > div:last-child,
.admin-modal-content {
    background: var(--ap-glass-bg-heavy) !important;
    backdrop-filter: var(--ap-glass-blur-heavy) !important;
    -webkit-backdrop-filter: var(--ap-glass-blur-heavy) !important;
    border: 1px solid var(--ap-glass-border) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12), var(--ap-glass-inner-glow) !important;
}

.dark #admin-dynamic-modal > div:last-child,
.dark .admin-modal-content {
    background: rgba(13, 20, 38, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4), var(--ap-glass-inner-glow) !important;
}

/* ==========================================
   12. EMPTY STATES
   ========================================== */
.empty-state {
    text-align: center;
    padding: 48px 20px;
}

.empty-state-title {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 6px;
    color: var(--ap-text-heading);
}

.empty-state-desc {
    font-size: 11px;
    color: var(--ap-text-faint);
    max-width: 320px;
    margin: 0 auto;
}

/* ==========================================
   13. LIVE INDICATOR
   ========================================== */
.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 100px;
    background: rgba(22, 163, 74, 0.08);
    border: 1px solid rgba(22, 163, 74, 0.15);
    font-size: 9px;
    font-weight: 800;
    color: var(--ap-icon-success);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    backdrop-filter: blur(8px);
}

.live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ap-icon-success);
    position: relative;
}

.live-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid var(--ap-icon-success);
    animation: livePulseRing 1.5s ease-out infinite;
}

@keyframes livePulseRing {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* ==========================================
   14. NOTIFICATION BADGE
   ========================================== */
.notification-badge {
    position: absolute;
    top: 4px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 50%;
    background: var(--ap-icon-danger) !important;
    color: white !important;
    font-size: 8px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
}

.dark .notification-badge {
    border-color: #050a18;
}

/* ==========================================
   15. HOVER LIFT & MICRO-INTERACTIONS
   ========================================== */
.hover-lift {
    transition: all var(--ap-duration-normal) var(--ap-ease-out);
}

.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--ap-glass-shadow-hover), var(--ap-glass-inner-glow) !important;
}

/* ==========================================
   16. SKELETON LOADERS
   ========================================== */
.skeleton-line {
    height: 14px;
    border-radius: 100px;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.04) 25%,
        rgba(0, 0, 0, 0.08) 50%,
        rgba(0, 0, 0, 0.04) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s linear infinite;
}

.dark .skeleton-line {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.03) 25%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0.03) 75%);
    background-size: 200% 100%;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ==========================================
   17. STAGGER ANIMATIONS
   ========================================== */
.stagger-list > * {
    opacity: 0;
    animation: staggerFadeIn 0.4s var(--ap-ease-out) forwards;
}

.stagger-list > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-list > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-list > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-list > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-list > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-list > *:nth-child(6) { animation-delay: 0.3s; }

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

/* ==========================================
   18. UPLOAD ZONES
   ========================================== */

.admin-upload-icon {
    font-size: 28px;
    color: var(--ap-icon-primary) !important;
    margin-bottom: 8px;
}

.admin-upload-text {
    font-size: 12px;
    font-weight: 700;
    color: var(--ap-text-body);
}

.admin-upload-hint {
    font-size: 10px;
    color: var(--ap-text-faint);
    margin-top: 4px;
}

/* ==========================================
   19. PAGE HEADER
   ========================================== */
.admin-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.admin-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    color: var(--ap-text-faint);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
}

.admin-breadcrumb i {
    color: var(--ap-icon-primary) !important;
}

.admin-page-title {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -0.5px;
    color: var(--ap-text-heading);
    line-height: 1.2;
}

.admin-page-subtitle {
    font-size: 12px;
    color: var(--ap-text-faint);
    margin-top: 4px;
}

/* ==========================================
   20. DASHBOARD GRID
   ========================================== */
.admin-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

@media (max-width: 768px) {
    .admin-dashboard-grid { grid-template-columns: 1fr; }}

/* ==========================================
   21. KEYBOARD SHORTCUT BADGES
   ========================================== */
.kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid var(--ap-border-default);
    border-bottom-width: 2px;
    font-size: 10px;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    color: var(--ap-text-faint);
}

.dark .kbd {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--ap-border-default);
}

/* ==========================================
   22. SCROLLBAR STYLING
   ========================================== */
.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }

#admin-workspace ::-webkit-scrollbar { width: 5px; }
#admin-workspace ::-webkit-scrollbar-track { background: transparent; }
#admin-workspace ::-webkit-scrollbar-thumb {
    background: rgba(26, 115, 232, 0.15);
    border-radius: 100px;
}
.dark #admin-workspace ::-webkit-scrollbar-thumb {
    background: rgba(96, 165, 250, 0.15);
}

#admin-portal-modal aside::-webkit-scrollbar-thumb {
    background: rgba(26, 115, 232, 0.15);
    border-radius: 100px;
}

/* ==========================================
   23. RESPONSIVE OVERRIDES
   ========================================== */
@media (max-width: 1024px) {
    #admin-portal-modal aside {
        padding: 12px 8px !important;
    }
    /* Tab bar: keep icon tile AND label visible (the old rule hid every <span>,
       which collapsed each button to a ~20px sliver on tablets/phones). */
    #admin-portal-modal .admin-menu-btn {
        white-space: nowrap;
        flex: 0 0 auto;
        width: auto;
        min-width: max-content;
    }
    #admin-portal-modal .admin-menu-btn .ap-menu-label { display: inline; }
    #admin-portal-modal .admin-menu-btn .ap-ico { display: inline-grid; }}

@media (max-width: 640px) {
    .admin-page-title { font-size: 20px; }
    .admin-stat-value { font-size: 22px; }
    .admin-stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .admin-dashboard-grid { grid-template-columns: 1fr; }}

/* ==========================================
   24. MEETING TAB BUTTONS
   ========================================== */
.meeting-tab-btn {
    padding: 10px 18px;
    border-radius: var(--ap-radius-md);
    font-size: 11px;
    font-weight: 700;
    color: var(--ap-text-muted);
    background: var(--ap-glass-bg);
    border: 1px solid var(--ap-glass-border-light);
    transition: all var(--ap-duration-normal) var(--ap-ease-out);
    white-space: nowrap;
    cursor: pointer;
    backdrop-filter: blur(8px);
    display: inline-flex;
    align-items: center;
}

.meeting-tab-btn:hover {
    border-color: var(--ap-border-focus);
    color: var(--ap-icon-primary);
}

.meeting-tab-btn.active {
    background: linear-gradient(135deg, var(--ap-icon-primary), var(--ap-icon-secondary)) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 4px 16px rgba(26, 115, 232, 0.25);
}

/* ==========================================
   25. MEMBER TAB BUTTONS
   ========================================== */
.member-tab-btn {
    padding: 10px 18px;
    border-radius: var(--ap-radius-md);
    font-size: 11px;
    font-weight: 700;
    color: var(--ap-text-muted);
    background: var(--ap-glass-bg);
    border: 1px solid var(--ap-glass-border-light);
    transition: all var(--ap-duration-normal) var(--ap-ease-out);
    white-space: nowrap;
    cursor: pointer;
    backdrop-filter: blur(8px);
    display: inline-flex;
    align-items: center;
}

.member-tab-btn:hover {
    border-color: var(--ap-border-focus);
    color: var(--ap-icon-primary);
}

.member-tab-btn.active {
    background: linear-gradient(135deg, var(--ap-icon-primary), var(--ap-icon-secondary)) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 4px 16px rgba(26, 115, 232, 0.25);
}

/* ==========================================
   26. AVENUE TAB BUTTONS (PUBLIC)
   ========================================== */
.avenue-tab-btn {
    padding: 10px 18px;
    border-radius: var(--ap-radius-md);
    font-size: 11px;
    font-weight: 700;
    color: var(--ap-text-muted);
    background: var(--ap-glass-bg);
    border: 1px solid var(--ap-glass-border-light);
    transition: all var(--ap-duration-normal) var(--ap-ease-out);
    white-space: nowrap;
    cursor: pointer;
    backdrop-filter: blur(8px);
}

.avenue-tab-btn:hover {
    border-color: var(--ap-border-focus);
    color: var(--ap-icon-primary);
}

.avenue-tab-btn.active {
    background: linear-gradient(135deg, var(--ap-icon-primary), var(--ap-icon-secondary)) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 4px 16px rgba(26, 115, 232, 0.25);
}

/* ==========================================
   27. MEMBER GRID CARDS (PUBLIC)
   ========================================== */
.member-grid-card {
    position: relative;
    padding: 20px;
    border-radius: var(--ap-radius-2xl);
    background: var(--ap-glass-bg) !important;
    backdrop-filter: var(--ap-glass-blur) !important;
    border: 1px solid var(--ap-glass-border) !important;
    transition: all var(--ap-duration-normal) var(--ap-ease-out);
    overflow: hidden;
    box-shadow: var(--ap-glass-shadow), var(--ap-glass-inner-glow);
}

.member-grid-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ap-icon-primary), var(--ap-icon-secondary));
    opacity: 0;
    transition: opacity var(--ap-duration-normal);
}

.member-grid-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ap-glass-shadow-hover), var(--ap-glass-inner-glow) !important;
    border-color: var(--ap-border-focus) !important;
}

.member-grid-card:hover::after {
    opacity: 1;
}

.member-avatar-photo {
    width: 72px;
    height: 72px;
    border-radius: var(--ap-radius-lg);
    object-fit: cover;
    border: 2px solid var(--ap-glass-border);
    transition: all var(--ap-duration-slow) var(--ap-ease-out);
}

.member-grid-card:hover .member-avatar-photo {
    border-color: var(--ap-icon-primary);
    border-radius: 50%;
}

/* ==========================================
   28. GAME CARDS (PUBLIC)
   ========================================== */
.game-card {
    padding: 24px 16px;
    border-radius: var(--ap-radius-xl);
    background: var(--ap-glass-bg) !important;
    backdrop-filter: var(--ap-glass-blur) !important;
    border: 1px solid var(--ap-glass-border) !important;
    text-align: center;
    cursor: pointer;
    transition: all var(--ap-duration-normal) var(--ap-ease-out);
    box-shadow: var(--ap-glass-shadow), var(--ap-glass-inner-glow);
}

.game-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ap-glass-shadow-hover), var(--ap-glass-inner-glow) !important;
    border-color: var(--ap-border-focus) !important;
}

/* UNIFIED GAME ICON COLORS */
.game-icon {
    font-size: 28px;
    margin-bottom: 10px;
    color: var(--ap-icon-primary) !important;
}

/* ==========================================
   29. CHATBOT
   The assistant (ub-*) is styled in css/styles.css and js/chatbot.js.
   ========================================== */

/* ==========================================
   30. BLOOD GROUP TAGS
   ========================================== */
.blood-group-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--ap-radius-sm);
    font-size: 10px;
    font-weight: 800;
    background: rgba(220, 38, 38, 0.08) !important;
    color: var(--ap-icon-danger) !important;
    flex-shrink: 0;
}

/* ==========================================
   31. PORTFOLIO PILLS
   ========================================== */
.portfolio-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 100px;
    font-size: 9px;
    font-weight: 700;
    background: rgba(26, 115, 232, 0.08) !important;
    color: var(--ap-icon-primary) !important;
    border: 1px solid rgba(26, 115, 232, 0.12);
    margin: 2px;
}

/* ==========================================
   32. WIZARD STEPS
   ========================================== */
.wizard-circle {
    transition: all var(--ap-duration-normal) var(--ap-ease-out);
}

.wizard-line {
    transition: background var(--ap-duration-slow) var(--ap-ease-out);
}

/* ==========================================
   33. SETTINGS ROWS
   ========================================== */
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--ap-border-subtle);
    flex-wrap: wrap;
}

.settings-row:last-child { border-bottom: none; }

.settings-row-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--ap-text-heading);
}

.settings-row-desc {
    font-size: 10px;
    color: var(--ap-text-faint);
    font-family: 'Courier New', monospace;
}

/* ==========================================
   34. TOGGLE SWITCHES
   ========================================== */
.admin-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.admin-toggle input { display: none; }

.dark .admin-toggle-track {
    background: rgba(255, 255, 255, 0.1);
}

.admin-toggle input:checked + .admin-toggle-track::after {
    transform: translateX(18px);
}

/* ==========================================
   35. RESOURCE MONITOR
   ========================================== */
.resource-monitor {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.resource-item {
    padding: 16px;
    border-radius: var(--ap-radius-lg);
    background: var(--ap-glass-bg-light);
    border: 1px solid var(--ap-border-subtle);
    backdrop-filter: blur(8px);
}

.resource-item-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--ap-text-faint);
}

.resource-item-value {
    font-size: 20px;
    font-weight: 900;
    color: var(--ap-text-heading);
    margin: 4px 0;
}

.resource-item-limit {
    font-size: 9px;
    color: var(--ap-text-faint);
}

.resource-bar {
    height: 4px;
    background: var(--ap-border-subtle);
    border-radius: 100px;
    margin-top: 8px;
    overflow: hidden;
}

.resource-bar-fill {
    height: 100%;
    border-radius: 100px;
    transition: width var(--ap-duration-slow) var(--ap-ease-out);
}

.resource-bar-fill.safe { background: var(--ap-icon-success); }
.resource-bar-fill.warning { background: var(--ap-icon-warning); }
.resource-bar-fill.danger { background: var(--ap-icon-danger); }

/* ==========================================
   36. PAGINATION
   ========================================== */

.admin-pagination-btn:hover {
    border-color: var(--ap-border-focus);
    color: var(--ap-icon-primary);
}

.admin-pagination-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ==========================================
   37. BIRTHDAY HIGHLIGHT
   ========================================== */
.birthday-highlight {
    animation: birthdayGlow 2s ease-in-out infinite;
}

@keyframes birthdayGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(219, 39, 119, 0.3), var(--ap-glass-shadow); }
    50% { box-shadow: 0 0 0 8px rgba(219, 39, 119, 0), var(--ap-glass-shadow); }
}

/* ==========================================
   38. SEARCH ICON FIX
   ========================================== */
.search-icon-fix {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
    color: var(--ap-text-faint) !important;
}

/* ==========================================
   39. SIGNATURE PREVIEW
   ========================================== */
.signature-preview {
    width: 100%;
    height: 60px;
    object-fit: contain;
    background: white;
    border-radius: var(--ap-radius-sm);
    border: 1px solid var(--ap-border-default);
    padding: 6px;
}

/* ==========================================
   40. PHOTO GRID ITEMS
   ========================================== */
.photo-grid-item {
    position: relative;
    aspect-ratio: 16/10;
    border-radius: var(--ap-radius-md);
    overflow: hidden;
    border: 1px solid var(--ap-border-default);
}

.photo-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-grid-item .remove-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--ap-duration-fast);
}

.photo-grid-item:hover .remove-overlay {
    opacity: 1;
}

/* ==========================================
   41. ATTENDANCE ROWS
   ========================================== */
.attendance-row {
    display: grid;
    grid-template-columns: 40px 1.5fr 1.8fr 1fr 100px 120px 50px;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    background: var(--ap-glass-bg-light);
    border: 1px solid var(--ap-border-subtle);
    border-radius: var(--ap-radius-lg);
    margin-bottom: 8px;
    transition: all var(--ap-duration-fast) var(--ap-ease-out);
}

.dark .attendance-row {
    background: rgba(15, 23, 42, 0.3);
    border-color: var(--ap-border-subtle);
}

.attendance-row:hover {
    border-color: var(--ap-border-focus);
}

@media (max-width: 1024px) {
    .attendance-row { grid-template-columns: 1fr; gap: 8px; }}

/* ==========================================
   42. FORM PORTFOLIO TAGS
   ========================================== */
.form-portfolio-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(26, 115, 232, 0.08);
    color: var(--ap-icon-primary);
    border: 1px solid rgba(26, 115, 232, 0.15);
}

.form-portfolio-tag .remove-tag {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--ap-duration-fast);
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.form-portfolio-tag .remove-tag:hover {
    opacity: 1;
    background: rgba(220, 38, 38, 0.15);
    color: var(--ap-icon-danger);
}

/* ==========================================
   43. BULLETIN CARDS
   ========================================== */
.bulletin-admin-card {
    display: flex;
    gap: 16px;
    padding: 16px;
    border-radius: var(--ap-radius-lg);
    background: var(--ap-glass-bg);
    border: 1px solid var(--ap-glass-border-light);
    transition: all var(--ap-duration-normal) var(--ap-ease-out);
}

.bulletin-admin-card:hover {
    border-color: var(--ap-border-focus);
}

.bulletin-admin-cover {
    width: 80px;
    height: 110px;
    border-radius: var(--ap-radius-sm);
    object-fit: cover;
    border: 1px solid var(--ap-border-default);
    flex-shrink: 0;
}

/* ==========================================
   44. BLOOD REQUEST CARDS
   ========================================== */
.blood-request-card {
    padding: 16px;
    border-radius: var(--ap-radius-lg);
    background: var(--ap-glass-bg);
    border: 1px solid var(--ap-glass-border-light);
    border-left: 4px solid var(--ap-icon-danger);
    transition: all var(--ap-duration-normal) var(--ap-ease-out);
}

.blood-request-card.emergency {
    border-left-color: var(--ap-icon-danger) !important;
    background: rgba(220, 38, 38, 0.03) !important;
    animation: emergencyPulse 2s ease-in-out infinite;
}

@keyframes emergencyPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.2); }
    50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

.blood-request-card.urgent {
    border-left-color: var(--ap-icon-warning) !important;
}

.blood-request-card.normal {
    border-left-color: var(--ap-icon-success) !important;
}

/* ==========================================
   45. FINAL UTILITY CLASSES
   ========================================== */
.admin-hidden { display: none !important; }
.admin-visible { display: block !important; }
.admin-no-select { user-select: none; -webkit-user-select: none; }
.admin-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-mono { font-family: 'Courier New', monospace; font-variant-numeric: tabular-nums; }

/* Focus Visible Accessibility */
*:focus-visible {
    outline: 2px solid var(--ap-icon-primary);
    outline-offset: 2px;
}

/* Smooth all transitions globally in admin */
#admin-portal-modal * {
    transition-timing-function: var(--ap-ease-out);
}

/* ==========================================
   END OF ADMIN STYLESHEET
   Rotaract Club of Coimbatore Unity
   Version 11.0.0 (unified glass layer)
   ========================================== */

/* ==========================================================================
   UNITY ADMIN - UNIFIED GLASS LAYER
   One accent (azure -> violet), one icon system, one glass recipe.
   Everything below applies to the portal AND to modals (which are appended
   to <body>, outside #admin-portal-modal).
   ========================================================================== */
#admin-portal-modal, #admin-dynamic-modal {
    --ap-ico: #1a73e8;
    --ap-ico-bg: rgba(26, 115, 232, 0.10);
    --ap-ico-edge: rgba(26, 115, 232, 0.20);
    --ap-grad: linear-gradient(135deg, #1a73e8 0%, #7c3aed 100%);
    --ap-grad-shadow: 0 8px 22px rgba(26, 115, 232, 0.30);
    --ap-field-bg: rgba(255, 255, 255, 0.62);
    --ap-field-line: rgba(15, 23, 42, 0.10);
}
.dark #admin-portal-modal, .dark #admin-dynamic-modal {
    --ap-ico: #7db3ff;
    --ap-ico-bg: rgba(96, 165, 250, 0.12);
    --ap-ico-edge: rgba(96, 165, 250, 0.24);
    --ap-field-bg: rgba(15, 23, 42, 0.55);
    --ap-field-line: rgba(255, 255, 255, 0.10);
}

/* ---------- ONE ICON SYSTEM ---------------------------------------------
   Every icon sits on the same translucent tile in the same accent colour.
   Only status meaning (success / warning / danger) is allowed to differ.   */

.ap-ico-tile {
    display: flex; align-items: center; justify-content: center;
    background: var(--ap-ico-bg);
    border: 1px solid var(--ap-ico-edge);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.ap-ico-tile i { color: var(--ap-ico) !important; }
.ap-tint-box { background: var(--ap-ico-bg); border: 1px solid var(--ap-ico-edge); }

/* ---------- SIDEBAR ------------------------------------------------------ */
#admin-portal-modal aside { scrollbar-width: none; }
#admin-portal-modal aside::-webkit-scrollbar {
    width: 3px;
    display: none;
}
#admin-portal-modal .admin-menu-btn {
    display: flex; align-items: center; gap: 10px;
    flex: 0 0 auto; width: auto;
    padding: 7px 12px 7px 8px !important;
    font-size: 12px; font-weight: 600;
    color: var(--ap-text-muted) !important;
    border-radius: 14px !important;
}
#admin-portal-modal .admin-menu-btn::before { display: none; }
#admin-portal-modal .admin-menu-btn:hover {
    background: var(--ap-surface-hover) !important;
    color: var(--ap-text-heading) !important;
    transform: none;
}
#admin-portal-modal .admin-menu-btn:hover .ap-ico { background: rgba(26, 115, 232, 0.18); }

#admin-portal-modal .admin-menu-btn.active .ap-ico { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.34); box-shadow: none; }
#admin-portal-modal .admin-menu-btn.active .ap-ico i { color: #fff !important; }
#admin-portal-modal .notification-badge { top: 50%; right: 8px; transform: translateY(-50%); }
@media (min-width: 1024px) {
    #admin-portal-modal .admin-menu-btn { width: 100%; }
    #admin-portal-modal aside { border-radius: 0 24px 24px 0; margin: 12px 0; }}

/* ---------- GLASS SURFACES (one recipe) ---------------------------------- */
#admin-portal-modal :is(.admin-panel, .admin-stat-card, .settings-section-card, .stat-metric-card, .category-pill-card) {
    background: var(--ap-glass-bg) !important;
    border: 1px solid var(--ap-glass-border) !important;
    border-radius: 22px !important;
    -webkit-backdrop-filter: var(--ap-glass-blur) !important;
    backdrop-filter: var(--ap-glass-blur) !important;
    box-shadow: var(--ap-glass-shadow), var(--ap-glass-inner-glow) !important;
}
          /* no jumping tables / forms */
#admin-portal-modal .admin-page-header {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px; margin-bottom: 20px;
    background: var(--ap-glass-bg); border: 1px solid var(--ap-glass-border); border-radius: 22px;
    -webkit-backdrop-filter: var(--ap-glass-blur); backdrop-filter: var(--ap-glass-blur);
    box-shadow: var(--ap-glass-shadow), var(--ap-glass-inner-glow);
}

/* stat cards: one accent, not four */
.admin-stat-card::after {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    opacity: 0.05;
    transition: all var(--ap-duration-slow) var(--ap-ease-out);
    background: var(--ap-grad) !important;
}
.admin-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--ap-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-bottom: 14px;
    background: var(--ap-ico-bg) !important;
    color: var(--ap-ico) !important;
    border: 1px solid var(--ap-ico-edge);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
/* panel titles + quick actions use the same tile */
.admin-panel-title i {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: var(--ap-ico-bg);
    border: 1px solid var(--ap-ico-edge);
    color: var(--ap-ico) !important;
    font-size: 12px;
}
.quick-action-btn i {
    transition: transform var(--ap-duration-normal) var(--ap-ease-bounce);
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: var(--ap-ico-bg);
    border: 1px solid var(--ap-ico-edge);
    color: var(--ap-ico) !important;
    font-size: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

.quick-action-btn span {
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
    font-weight: 600;
}

/* ---------- BUTTONS (neutralise the public-site .btn-primary) ------------ */

:is(#admin-portal-modal, #admin-dynamic-modal) .btn-primary::before { display: none; }

:is(#admin-portal-modal, #admin-dynamic-modal) :is(.btn-primary, .btn-secondary, .btn-danger):disabled { opacity: .55; cursor: not-allowed; transform: none; }
/* row actions: identical glass icon buttons; only delete carries a red hint */
.admin-data-table :is(.btn-primary, .btn-secondary).btn-xs {
    min-height: 30px; min-width: 30px; padding: 0 9px !important; border-radius: 10px !important; justify-content: center;
    background: var(--ap-ico-bg) !important; color: var(--ap-ico) !important;
    border: 1px solid var(--ap-ico-edge) !important; box-shadow: none !important;
}
.admin-data-table :is(.btn-primary, .btn-secondary).btn-xs:hover { background: var(--ap-grad) !important; color: #fff !important; border-color: transparent !important; }
.admin-data-table .btn-danger.btn-xs {
    min-height: 30px; min-width: 30px; padding: 0 9px !important; border-radius: 10px !important; justify-content: center;
    background: rgba(220, 38, 38, 0.10) !important; color: var(--ap-icon-danger) !important;
    border: 1px solid rgba(220, 38, 38, 0.22) !important; box-shadow: none !important;
}
.admin-data-table .btn-danger.btn-xs:hover { background: var(--ap-icon-danger) !important; color: #fff !important; }

/* ---------- FORMS (portal + modals) -------------------------------------- */

:is(#admin-portal-modal, #admin-dynamic-modal) textarea { min-height: 84px; resize: vertical; }

:is(#admin-portal-modal, #admin-dynamic-modal) select option { background: #fff; color: #0f172a; }
.dark :is(#admin-portal-modal, #admin-dynamic-modal) select option { background: #0c1225; color: #f1f5f9; }
:is(#admin-portal-modal, #admin-dynamic-modal) :is(.admin-form-label, .settings-label) {
    display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ap-text-muted);
}
:is(#admin-portal-modal, #admin-dynamic-modal) .admin-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0 16px; }
:is(#admin-portal-modal, #admin-dynamic-modal) .admin-form-grid .full-width { grid-column: 1 / -1; }
.settings-hint { font-size: 11px; color: var(--ap-text-faint); margin-top: 4px; }

/* ---------- MODALS (appended to <body>) ---------------------------------- */

.dark #admin-dynamic-modal > div:nth-child(2) { background: rgba(10, 16, 34, 0.82) !important; }
#admin-dynamic-modal > div:nth-child(2) > :is(div:first-child, div:last-child:not(:nth-child(2))) { border-color: var(--ap-border-default) !important; }

#admin-dynamic-modal h3 { color: var(--ap-text-heading); }
#admin-dynamic-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: apModalIn .22s var(--ap-ease-out);
}
@keyframes apModalIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- WIZARD PAGES (events + reports) ------------------------------ */
.wizard-page, .report-wizard-page { animation: apPageIn .25s var(--ap-ease-out); }
.wizard-page.hidden, .report-wizard-page.hidden { display: none; }
@keyframes apPageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wizard-step { min-width: 80px; }
.wizard-circle-event { transition: all .2s ease; }
.wizard-line-event { transition: background .3s ease; }

/* ---------- SETTINGS ------------------------------------------------------ */
.settings-tabs {
    display: flex; gap: 8px; margin: 0 0 20px; padding: 8px; border-radius: 20px; overflow-x: auto; scrollbar-width: none;
    background: var(--ap-glass-bg); border: 1px solid var(--ap-glass-border);
    -webkit-backdrop-filter: var(--ap-glass-blur); backdrop-filter: var(--ap-glass-blur);
}
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tab-btn {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 16px; min-height: 40px; border-radius: 14px;
    font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--ap-text-muted); background: transparent; border: 1px solid transparent; cursor: pointer;
    transition: background .2s, color .2s, box-shadow .2s;
}
.settings-tab-btn i { color: var(--ap-ico); }
.settings-tab-btn:hover { background: var(--ap-surface-hover); color: var(--ap-text-heading); }
.settings-tab-btn.active { background: var(--ap-grad); color: #fff; box-shadow: var(--ap-grad-shadow); }
.settings-tab-btn.active i { color: #fff; }
@media (min-width: 1024px) { .settings-tabs { flex-wrap: wrap; overflow: visible; }}
.settings-section-card { padding: clamp(16px, 2.6vw, 28px); margin-bottom: 20px; }
.section-sticky-header { position: static; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; background: transparent; }
.logo-preview-box {
    width: 100%; height: 90px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 10px;
    border-radius: 14px; background: var(--ap-ico-bg); border: 1px dashed var(--ap-ico-edge);
}
.logo-preview-box img { max-height: 100%; max-width: 100%; object-fit: contain; }
.color-swatch { width: 36px; height: 36px; border-radius: 10px; cursor: pointer; border: 2px solid rgba(255,255,255,.6); box-shadow: 0 4px 12px rgba(0,0,0,.10); transition: transform .2s; }
.color-swatch:hover { transform: scale(1.1); }
.save-pulse-btn { position: relative; overflow: hidden; }

/* ---------- TREASURY (was injected from treasury.js) ---------------------- */

.treasury-tab-btn:hover { color: var(--ap-text-heading); border-color: var(--ap-ico-edge); }
.treasury-tab-btn.active { background: var(--ap-grad); color: #fff; border-color: transparent; box-shadow: var(--ap-grad-shadow); }
.stat-metric-card { position: relative; padding: 24px; overflow: hidden; }
.stat-metric-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .6; background: var(--metric-gradient, linear-gradient(135deg, rgba(26,115,232,.06), transparent)); }
.stat-metric-card > * { position: relative; z-index: 1; }
.category-pill-card { padding: 20px; transition: transform .2s, box-shadow .2s; }
.category-pill-card:hover { transform: translateY(-2px); }
.chart-bar { position: relative; min-width: 32px; border-radius: 8px 8px 0 0; transition: all .4s ease; cursor: pointer; }
.chart-bar:hover { opacity: .85; transform: scaleY(1.02); }
.chart-bar .bar-tooltip {
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 6px 10px; border-radius: 8px;
    background: #0f172a; color: #fff; font-size: 10px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.chart-bar:hover .bar-tooltip { opacity: 1; }
.transaction-row-income td:first-child { box-shadow: inset 3px 0 0 var(--ap-icon-success); }
.transaction-row-expense td:first-child { box-shadow: inset 3px 0 0 var(--ap-icon-danger); }
.budget-progress-bar { width: 100%; height: 8px; border-radius: 9999px; overflow: hidden; background: var(--ap-border-default); }
.budget-progress-fill { height: 100%; border-radius: 9999px; transition: width .5s ease; }
.budget-progress-fill.safe { background: linear-gradient(90deg, #22c55e, #16a34a); }
.budget-progress-fill.warning { background: linear-gradient(90deg, #f59e0b, #d97706); }
.budget-progress-fill.danger { background: linear-gradient(90deg, #ef4444, #dc2626); }
.cell-action-btn {
    padding: 6px 8px; border-radius: 9px; font-size: 11px; cursor: pointer; color: var(--ap-ico);
    background: transparent; border: 1px solid transparent; transition: all .15s;
}
.cell-action-btn:hover { background: var(--ap-ico-bg); border-color: var(--ap-ico-edge); }
.cell-action-btn.danger { color: var(--ap-icon-danger); }
.cell-action-btn.danger:hover { background: rgba(220,38,38,.10); border-color: rgba(220,38,38,.22); }

/* ---------- TABLES / MISC ------------------------------------------------- */
#admin-portal-modal main { min-width: 0; }
#admin-portal-modal :is(.overflow-x-auto, .admin-table-wrap) { max-width: 100%; -webkit-overflow-scrolling: touch; }

.empty-state-icon {
    font-size: 42px;
    margin-bottom: 14px;
    display: block;
    color: var(--ap-ico);
    opacity: .85;
}

/* ---------- MOBILE -------------------------------------------------------- */
@media (max-width: 640px) {
    #admin-portal-modal main { padding: 14px; }
    #admin-portal-modal header { padding-inline: 14px; }
    #admin-portal-modal .admin-page-header { padding: 14px; }
    :is(#admin-portal-modal, #admin-dynamic-modal) :is(.admin-form-input, .settings-input, input, select, textarea) { font-size: 16px; }
    #admin-portal-modal .admin-page-header > .btn-primary { width: 100%; }}
@media (prefers-reduced-motion: reduce) {
    #admin-dynamic-modal, .wizard-page, .report-wizard-page { animation: none; }}

/* ==========================================================================
   UNITY ADMIN : PREMIUM GLASS v12
   Frosted layers with a specular top light, inner rim, soft depth and fine
   grain.  Applies to the portal and to modals appended to <body>.
   Icons come from the self-contained icon system in css/styles.css.
   ========================================================================== */
:root {
    --apg-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0, rgba(255, 255, 255, 0) 42%);
    --apg-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --apg-fill: linear-gradient(145deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.46) 55%, rgba(236, 243, 255, 0.52) 100%);
    --apg-fill-strong: linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 100%);
    --apg-edge: rgba(255, 255, 255, 0.88);
    --apg-hair: rgba(15, 35, 90, 0.08);
    --apg-blur: blur(30px) saturate(190%);
    --apg-blur-sm: blur(16px) saturate(170%);
    --apg-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 -1px 0 rgba(255, 255, 255, 0.2) inset, 0 0 0 1px rgba(20, 60, 160, 0.045), 0 2px 4px rgba(15, 35, 80, 0.04), 0 14px 30px -12px rgba(15, 35, 80, 0.16), 0 36px 64px -32px rgba(15, 35, 80, 0.22);
    --apg-shadow-hover: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 0 0 1px rgba(26, 115, 232, 0.16), 0 4px 8px rgba(15, 35, 80, 0.05), 0 22px 40px -14px rgba(26, 80, 200, 0.28), 0 48px 80px -36px rgba(15, 35, 80, 0.3);
    --apg-shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 0 0 1px rgba(20, 60, 160, 0.04), 0 8px 18px -10px rgba(15, 35, 80, 0.18);
    --apg-brand: linear-gradient(135deg, #1a73e8 0%, #5b4bf0 52%, #7c3aed 100%);
    --apg-brand-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 -8px 16px rgba(40, 20, 140, 0.2) inset, 0 12px 26px -8px rgba(76, 70, 235, 0.55);
}

/* ---------- shell: aurora + grain ---------- */
#admin-portal-modal {
    font-family: 'Poppins', system-ui, sans-serif;
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    overflow-y: auto;
    background: radial-gradient(60rem 44rem at 6% -6%, rgba(26, 115, 232, 0.20), transparent 62%),
        radial-gradient(50rem 40rem at 100% 8%, rgba(124, 58, 237, 0.15), transparent 64%),
        radial-gradient(48rem 38rem at 52% 112%, rgba(6, 182, 212, 0.13), transparent 62%),
        linear-gradient(160deg, #f1f5ff 0%, #e6edfb 55%, #efe9fb 100%) !important;
}
.dark #admin-portal-modal {
    background: radial-gradient(60rem 44rem at 6% -6%, rgba(26, 115, 232, 0.26), transparent 62%),
        radial-gradient(50rem 40rem at 100% 8%, rgba(124, 58, 237, 0.20), transparent 64%),
        radial-gradient(48rem 38rem at 52% 112%, rgba(6, 182, 212, 0.10), transparent 62%),
        linear-gradient(160deg, #040a1a 0%, #08142b 55%, #0c0b22 100%) !important;
}
#admin-portal-modal::before { position: fixed; }
#admin-portal-modal::after {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image: var(--apg-grain); opacity: 0.5; mix-blend-mode: soft-light;
}

/* ---------- header + sidebar ---------- */
#admin-portal-modal > header {
    background: var(--apg-sheen), var(--apg-fill-strong) !important;
    -webkit-backdrop-filter: var(--apg-blur) !important;
    backdrop-filter: var(--apg-blur) !important;
    border-bottom: 1px solid var(--apg-edge) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 12px 30px -16px rgba(15, 35, 80, 0.3) !important;
}
.dark #admin-portal-modal > header { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 14px 34px -16px rgba(0, 0, 0, 0.7) !important; }
#admin-portal-modal aside {
    background: var(--apg-sheen), var(--apg-grain), var(--apg-fill) !important;
    -webkit-backdrop-filter: var(--apg-blur) !important; backdrop-filter: var(--apg-blur) !important;
    border-right: 1px solid var(--apg-edge) !important;
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.5) inset, 18px 0 40px -28px rgba(15, 35, 80, 0.35) !important;
}
@media (min-width: 1024px) {
    #admin-portal-modal aside { border: 1px solid var(--apg-edge) !important; box-shadow: var(--apg-shadow) !important; }}
#admin-portal-modal .admin-menu-btn.active {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 52%), var(--apg-brand) !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    box-shadow: var(--apg-brand-shadow) !important;
}

/* ---------- one premium icon tile ---------- */
.ap-ico {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    transition: background .2s, border-color .2s, transform .2s;
    width: 32px;
    height: 32px;
    border-radius: 11px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 70%), var(--ap-ico-bg);
    border: 1px solid var(--ap-ico-edge);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 4px 10px -4px rgba(26, 115, 232, 0.35);
}
.dark .ap-ico { background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 70%), var(--ap-ico-bg); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 4px 10px -4px rgba(0, 0, 0, 0.5); }
.ap-ico i {
    line-height: 1;
    color: var(--ap-ico) !important;
    width: auto;
    font-size: 14px;
}
.admin-stat-icon, .quick-action-btn i, .admin-panel-title i {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 70%), var(--ap-ico-bg) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 6px 14px -6px rgba(26, 115, 232, 0.4);
}
.dark .admin-stat-icon, .dark .quick-action-btn i, .dark .admin-panel-title i {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 70%), var(--ap-ico-bg) !important;
}
.quick-action-btn:hover i {
    border-color: transparent;
    color: #fff !important;
    transform: scale(1.06);
    background: var(--apg-brand) !important;
    box-shadow: var(--apg-brand-shadow);
}

/* ---------- glass surfaces ---------- */
#admin-portal-modal :is(.admin-panel, .admin-stat-card, .settings-section-card, .stat-metric-card, .category-pill-card, .admin-page-header, .settings-tabs, .bulletin-admin-card, .blood-request-card, .attendance-row) {
    background: var(--apg-sheen), var(--apg-grain), var(--apg-fill) !important;
    -webkit-backdrop-filter: var(--apg-blur) !important; backdrop-filter: var(--apg-blur) !important;
    border: 1px solid var(--apg-edge) !important;
    box-shadow: var(--apg-shadow) !important;
}
#admin-portal-modal .blood-request-card { border-left: 4px solid var(--ap-icon-danger) !important; }
#admin-portal-modal .blood-request-card.urgent { border-left-color: var(--ap-icon-warning) !important; }
#admin-portal-modal .blood-request-card.normal { border-left-color: var(--ap-icon-success) !important; }
#admin-portal-modal :is(.admin-stat-card, .category-pill-card, .bulletin-admin-card):hover {
    box-shadow: var(--apg-shadow-hover) !important; transform: translateY(-3px);
}
#admin-portal-modal .admin-panel:hover {
    transform: none;
    box-shadow: var(--apg-shadow) !important;
}
#admin-portal-modal .attendance-row { border-radius: 16px !important; }
#admin-portal-modal .attendance-row:hover { box-shadow: var(--apg-shadow-hover) !important; }
#admin-portal-modal .admin-stat-value { letter-spacing: -0.02em; }

/* ---------- tables ---------- */
#admin-portal-modal .admin-data-table { border-collapse: separate; border-spacing: 0; }
#admin-portal-modal .admin-data-table th {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.15));
    -webkit-backdrop-filter: var(--apg-blur-sm);
    backdrop-filter: var(--apg-blur-sm);
    border-bottom: 1px solid var(--apg-hair);
}
.dark #admin-portal-modal .admin-data-table th { background: rgba(255, 255, 255, 0.04); }

#admin-portal-modal .admin-data-table td { border-bottom: 1px solid var(--apg-hair); }

/* ---------- fields ---------- */
:is(#admin-portal-modal, #admin-dynamic-modal) :is(.admin-form-input, .settings-input, input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]), select, textarea) {
    width: 100%;
    min-height: 42px;
    padding: 10px 14px;
    font-size: 13px;
    border-radius: 12px;
    color: var(--ap-text-heading);
    background: var(--ap-field-bg);
    transition: border-color .15s, box-shadow .15s, background .15s;
    background-color: rgba(255, 255, 255, 0.58);
    border: 1px solid var(--apg-edge);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 1px 3px rgba(15, 35, 80, 0.07), 0 -1px 0 rgba(15, 35, 80, 0.03) inset;
    -webkit-backdrop-filter: var(--apg-blur-sm);
    backdrop-filter: var(--apg-blur-sm);
}
.dark :is(#admin-portal-modal, #admin-dynamic-modal) :is(.admin-form-input, .settings-input, input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]), select, textarea) {
    background-color: rgba(255, 255, 255, 0.05); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 2px 6px rgba(0, 0, 0, 0.25);
}
:is(#admin-portal-modal, #admin-dynamic-modal) :is(.admin-form-input, .settings-input, input, select, textarea):focus {
    outline: none;
    border-color: rgba(26, 115, 232, 0.65);
    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.16), 0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

/* ---------- buttons ---------- */
:is(#admin-portal-modal, #admin-dynamic-modal) .btn-primary {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    min-height: 40px;
    border-radius: 12px;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 52%), var(--apg-brand) !important;
    box-shadow: var(--apg-brand-shadow);
}
:is(#admin-portal-modal, #admin-dynamic-modal) .btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 -8px 16px rgba(40, 20, 140, 0.2) inset, 0 20px 36px -10px rgba(76, 70, 235, 0.65); }
:is(#admin-portal-modal, #admin-dynamic-modal) .btn-secondary {
    min-height: 40px;
    border-radius: 12px;
    font-weight: 600;
    justify-content: center;
    background: var(--apg-sheen), var(--apg-fill);
    border: 1px solid var(--apg-edge);
    box-shadow: var(--apg-shadow-sm);
    -webkit-backdrop-filter: var(--apg-blur-sm);
    backdrop-filter: var(--apg-blur-sm);
}
:is(#admin-portal-modal, #admin-dynamic-modal) .btn-secondary:hover:not(:disabled) { box-shadow: var(--apg-shadow-hover); }
:is(#admin-portal-modal, #admin-dynamic-modal) .btn-danger {
    min-height: 40px;
    border-radius: 12px;
    font-weight: 600;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 52%), linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 12px 24px -8px rgba(220, 38, 38, 0.55);
}

/* ---------- modals ---------- */
#admin-dynamic-modal > div:first-child {
    background: radial-gradient(60rem 40rem at 50% 0%, rgba(26, 115, 232, 0.16), transparent 70%), rgba(6, 12, 30, 0.5) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important; backdrop-filter: blur(16px) saturate(140%) !important;
}
#admin-dynamic-modal > div:nth-child(2) {
    background: var(--apg-sheen), var(--apg-grain), var(--apg-fill-strong) !important;
    -webkit-backdrop-filter: blur(36px) saturate(200%) !important;
    backdrop-filter: blur(36px) saturate(200%) !important;
    border: 1px solid var(--apg-edge) !important;
    border-radius: 30px !important;
    box-shadow: var(--apg-shadow), 0 70px 130px -30px rgba(8, 20, 60, 0.5) !important;
}

/* ---------- tabs, pagination, toggles ---------- */
.settings-tab-btn.active, .treasury-tab-btn.active, .avenue-tab-btn.active {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 52%), var(--apg-brand) !important;
    box-shadow: var(--apg-brand-shadow) !important;
}
.treasury-tab-btn {
    padding: 10px 18px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    color: var(--ap-text-muted);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: all .2s;
    background: var(--apg-sheen), var(--apg-fill);
    border: 1px solid var(--apg-edge);
    box-shadow: var(--apg-shadow-sm);
}
.admin-pagination-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--ap-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--ap-text-muted);
    cursor: pointer;
    transition: all var(--ap-duration-fast) var(--ap-ease-out);
    background: var(--apg-fill);
    border: 1px solid var(--apg-edge);
    box-shadow: var(--apg-shadow-sm);
    -webkit-backdrop-filter: var(--apg-blur-sm);
    backdrop-filter: var(--apg-blur-sm);
}
.admin-pagination-btn.active {
    background: var(--ap-icon-primary) !important;
    color: white !important;
    border-color: var(--ap-icon-primary) !important;
    box-shadow: var(--apg-brand-shadow);
}
.admin-toggle-track {
    width: 42px;
    height: 24px;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.1);
    position: relative;
    transition: background var(--ap-duration-normal) var(--ap-ease-out);
    box-shadow: 0 2px 5px rgba(15, 35, 80, 0.18) inset;
}
.admin-toggle input:checked + .admin-toggle-track {
    background: var(--apg-brand);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset, 0 6px 14px -4px rgba(76, 70, 235, 0.55);
}
.admin-toggle-track::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform var(--ap-duration-normal) var(--ap-ease-bounce);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 3px 8px rgba(15, 35, 80, 0.3);
}

/* ---------- uploads, badges, skeleton ---------- */
.admin-upload-zone {
    position: relative;
    border-radius: var(--ap-radius-xl);
    padding: 32px 20px;
    text-align: center;
    transition: all var(--ap-duration-normal) var(--ap-ease-out);
    cursor: pointer;
    background: var(--apg-sheen), var(--apg-fill);
    border: 1.5px dashed var(--ap-ico-edge);
    -webkit-backdrop-filter: var(--apg-blur-sm);
    backdrop-filter: var(--apg-blur-sm);
}
.admin-upload-zone:hover {
    border-color: var(--ap-icon-primary);
    background: rgba(26, 115, 232, 0.04);
    box-shadow: var(--apg-shadow-hover);
}
.status-badge, .badge { border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset; }

/* ---------- scrollbars ---------- */
#admin-portal-modal ::-webkit-scrollbar { width: 8px; height: 8px; }
#admin-portal-modal ::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.35); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
#admin-portal-modal ::-webkit-scrollbar-thumb:hover { background: rgba(26, 115, 232, 0.6); background-clip: padding-box; }

/* ---------- fallbacks ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #admin-portal-modal :is(.admin-panel, .admin-stat-card, .settings-section-card, .stat-metric-card, .category-pill-card, .admin-page-header, .settings-tabs, aside, > header) { background: var(--bg-card-solid, #fff) !important; }
    .dark #admin-portal-modal :is(.admin-panel, .admin-stat-card, .settings-section-card, aside, > header) { background: #0c1225 !important; }}
@media (max-width: 640px) {
    :root { --apg-blur: blur(20px) saturate(170%); }
    #admin-portal-modal::before { animation: none; }}
@media (prefers-reduced-motion: reduce) { #admin-portal-modal::before { animation: none; }}
@media print { #admin-portal-modal::after { display: none; }}
/* ==========================  END OF ADMIN STYLESHEET v12  =============== */

/* ================================================================
   ADMIN LIQUID GLASS v13  (+ Reset Data tab)
   ================================================================ */
:root {
  --alg-ring:0 1px 0 rgba(255,255,255,.95) inset,0 0 0 1px rgba(255,255,255,.5) inset,0 -12px 26px -16px rgba(120,150,255,.35) inset;
  --alg-glint:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.4) 50%,transparent 66%);
}
.dark {
    --ap-glass-bg: rgba(13, 20, 38, 0.5);
    --ap-glass-bg-heavy: rgba(13, 20, 38, 0.7);
    --ap-glass-bg-light: rgba(13, 20, 38, 0.35);
    --ap-glass-border: rgba(255, 255, 255, 0.07);
    --ap-glass-border-light: rgba(255, 255, 255, 0.04);
    --ap-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    --ap-glass-shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.35);
    --ap-glass-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --ap-icon-primary: #60a5fa;
    --ap-icon-secondary: #a78bfa;
    --ap-icon-success: #4ade80;
    --ap-icon-warning: #fbbf24;
    --ap-icon-danger: #f87171;
    --ap-icon-info: #22d3ee;
    --ap-icon-pink: #f472b6;
    --ap-surface-base: #050a18;
    --ap-surface-elevated: rgba(15, 23, 42, 0.6);
    --ap-surface-input: rgba(15, 23, 42, 0.5);
    --ap-surface-hover: rgba(26, 115, 232, 0.08);
    --ap-text-heading: #f1f5f9;
    --ap-text-body: #cbd5e1;
    --ap-text-muted: #94a3b8;
    --ap-text-faint: #64748b;
    --ap-border-subtle: rgba(255, 255, 255, 0.03);
    --ap-border-default: rgba(255, 255, 255, 0.06);
    --ap-border-focus: rgba(96, 165, 250, 0.4);
    --apg-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0, rgba(255, 255, 255, 0) 38%);
    --apg-fill: linear-gradient(145deg, rgba(30, 44, 80, 0.60) 0%, rgba(16, 26, 52, 0.50) 55%, rgba(24, 18, 52, 0.54) 100%);
    --apg-fill-strong: linear-gradient(145deg, rgba(24, 36, 68, 0.90) 0%, rgba(12, 20, 42, 0.84) 100%);
    --apg-edge: rgba(255, 255, 255, 0.13);
    --apg-hair: rgba(255, 255, 255, 0.07);
    --apg-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 -1px 0 rgba(0, 0, 0, 0.3) inset, 0 0 0 1px rgba(0, 0, 0, 0.28), 0 2px 4px rgba(0, 0, 0, 0.25), 0 16px 34px -12px rgba(0, 0, 0, 0.55), 0 40px 70px -34px rgba(0, 0, 0, 0.7);
    --apg-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 0 0 1px rgba(96, 165, 250, 0.3), 0 4px 8px rgba(0, 0, 0, 0.3), 0 24px 46px -14px rgba(26, 115, 232, 0.35), 0 52px 90px -38px rgba(0, 0, 0, 0.75);
    --apg-shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 0 1px rgba(0, 0, 0, 0.22), 0 10px 22px -10px rgba(0, 0, 0, 0.6);
    --alg-ring: 0 1px 0 rgba(255,255,255,.22) inset,0 0 0 1px rgba(255,255,255,.1) inset,0 -12px 26px -16px rgba(96,165,250,.28) inset;
    --alg-glint: linear-gradient(115deg,transparent 34%,rgba(255,255,255,.14) 50%,transparent 66%);
}
#admin-portal-modal :is(.admin-panel,.admin-stat-card,.settings-section-card,.stat-metric-card,.category-pill-card,.admin-page-header) {
  background-image:var(--alg-glint),var(--apg-sheen),var(--apg-grain),var(--apg-fill) !important;
  background-size:260% 100%,auto,auto,auto !important;
  background-position:140% 0,0 0,0 0,0 0 !important;
  background-repeat:no-repeat,no-repeat,repeat,no-repeat !important;
  -webkit-backdrop-filter:blur(34px) saturate(210%) !important;backdrop-filter:blur(34px) saturate(210%) !important;
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s,background-position 1.1s cubic-bezier(.22,1,.36,1) !important;
}
#admin-portal-modal :is(.admin-panel,.admin-stat-card,.settings-section-card):hover {
  background-position:-40% 0,0 0,0 0,0 0 !important;
  transform:translateY(-3px);
}
#admin-portal-modal .admin-stat-card {box-shadow:var(--alg-ring),var(--apg-shadow) !important}
#admin-portal-modal aside {-webkit-backdrop-filter:blur(34px) saturate(200%) !important;backdrop-filter:blur(34px) saturate(200%) !important}
#admin-portal-modal .admin-menu-btn:not(.active):hover {background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.12)) !important;box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 10px 22px -12px rgba(26,115,232,.4)}
#admin-portal-modal .quick-action-btn {background-image:var(--alg-glint),var(--apg-sheen),var(--apg-fill) !important;background-size:260% 100%,auto,auto !important;background-position:140% 0,0 0,0 0 !important;background-repeat:no-repeat !important;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,background-position .9s cubic-bezier(.22,1,.36,1)}
#admin-portal-modal .quick-action-btn:hover {background-position:-40% 0,0 0,0 0 !important;transform:translateY(-4px)}
#admin-portal-modal .admin-data-table tbody tr {
    transition: background .2s,box-shadow .2s;
}
#admin-portal-modal .admin-data-table tbody tr:hover {
    background: linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.12)) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}
.dark #admin-portal-modal .admin-data-table tbody tr:hover {background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.02)) !important}
#admin-portal-modal :is(.settings-input,.admin-input,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea) {
  background-image:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 70%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
}
#admin-portal-modal :is(.btn-primary,.btn-danger) {box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 -10px 18px rgba(40,20,140,.25) inset,0 14px 28px -10px rgba(76,70,235,.6)}
#admin-portal-modal .btn-danger {box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 -10px 18px rgba(127,29,29,.3) inset,0 14px 28px -10px rgba(220,38,38,.55)}
#admin-dynamic-modal>div:nth-child(2) {-webkit-backdrop-filter:blur(36px) saturate(200%);backdrop-filter:blur(36px) saturate(200%);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 40px 90px -24px rgba(8,20,60,.55)}
@media (hover:none) {#admin-portal-modal :is(.admin-panel,.admin-stat-card,.settings-section-card):hover,#admin-portal-modal .quick-action-btn:hover {transform:none}}
@media (prefers-reduced-motion:reduce) {#admin-portal-modal :is(.admin-panel,.admin-stat-card,.settings-section-card):hover,#admin-portal-modal .quick-action-btn:hover {transform:none}}

/* ---------- Reset Data tab (Super Admin) ---------- */
.reset-zone {border:1px solid rgba(239,68,68,.35) !important;background-image:linear-gradient(145deg,rgba(239,68,68,.10),rgba(255,255,255,0) 55%),var(--apg-sheen),var(--apg-fill) !important}
.reset-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:14px 0}
.reset-group {display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:18px;cursor:pointer;background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(255,255,255,.18));border:1px solid rgba(255,255,255,.6);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 24px -14px rgba(15,35,80,.3);transition:transform .25s,box-shadow .25s,border-color .25s}
.dark .reset-group {background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border-color:rgba(255,255,255,.12)}
.reset-group:hover {transform:translateY(-2px);border-color:rgba(239,68,68,.5)}
.reset-group input {margin-top:4px;width:18px;height:18px;accent-color:#ef4444}
.reset-ico {width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;color:#ef4444;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3)}
.reset-txt b {display:block;font-size:12.5px;font-weight:800}.reset-txt small {display:block;margin-top:3px;font-size:10.5px;line-height:1.5;color:#64748b}
.reset-kept {display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;font-size:11px;line-height:1.6;color:#166534;background:linear-gradient(135deg,rgba(34,197,94,.16),rgba(34,197,94,.05));border:1px solid rgba(34,197,94,.4)}
.dark .reset-kept {color:#86efac}.reset-kept i {font-size:18px;margin-top:2px}
.reset-confirm {display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px;padding:16px;border-radius:18px;background:rgba(239,68,68,.08);border:1px dashed rgba(239,68,68,.5)}
.reset-confirm label {flex:1 1 100%}.reset-confirm input {flex:1 1 180px;max-width:240px;text-transform:uppercase;letter-spacing:.2em;font-weight:800}
.reset-confirm code {padding:2px 8px;border-radius:8px;background:rgba(239,68,68,.15);color:#dc2626;font-weight:800}
.reset-confirm button:disabled {opacity:.4;cursor:not-allowed;filter:grayscale(.5)}
.reset-report {margin-top:14px;display:flex;flex-direction:column;gap:6px}
.reset-line {padding:8px 12px;border-radius:12px;font-size:11px;background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.6)}
.dark .reset-line {background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.reset-line.ok {color:#15803d}.reset-line.bad {color:#b91c1c;background:rgba(239,68,68,.12)}
/* ====================== END ADMIN LIQUID GLASS v13 ====================== */

/* ================================================================
   TEAM CHAT  (WhatsApp-style admin chat, glass)
   ================================================================ */

.dark .tc-app {--tc-ink:#e8eefb;--tc-mute:#93a4c3;--tc-line:rgba(255,255,255,.1);--tc-glass:rgba(255,255,255,.07);--tc-glass2:rgba(17,24,39,.95);--tc-in:rgba(255,255,255,.1);--tc-out:rgba(26,115,232,.38);
  background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border-color:rgba(255,255,255,.14);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 30px 70px -34px rgba(0,0,0,.8)}
.tc-app * {box-sizing:border-box}
.tc-app button {font-family:inherit;color:inherit;cursor:pointer}
.tc-app b {font-weight:700}
.tc-app i.fa-solid,.tc-app i.fa-regular {font-style:normal}
.tc-app ::-webkit-scrollbar {width:6px;height:6px}.tc-app ::-webkit-scrollbar-thumb {background:rgba(100,116,139,.35);border-radius:9px}

/* sidebar */
.tc-side {display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--tc-line);background:var(--tc-glass)}
.tc-side-head {display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 14px 10px}
.tc-me {display:flex;align-items:center;gap:10px;min-width:0}.tc-me b {display:block;font-size:15px;font-weight:800}.tc-me small {color:var(--tc-mute);font-size:10.5px;font-weight:600}
.tc-side-btns {display:flex;gap:4px}
.tc-ib {width:38px;height:38px;flex:0 0 auto;display:inline-grid;place-items:center;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--tc-mute);font-size:14px;transition:background .15s,color .15s,transform .15s}
.tc-ib:hover {background:rgba(26,115,232,.12);color:var(--tc-accent)}.tc-ib:active {transform:scale(.94)}.tc-ib.sm {width:30px;height:30px;font-size:12px}
.tc-ib.on {color:#dc2626;background:rgba(220,38,38,.12)}
.tc-search {position:relative;margin:0 14px 8px}.tc-search i {position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--tc-mute);font-size:12px}
.tc-search input {width:100%;height:40px;padding:0 14px 0 36px;border-radius:14px;border:1px solid var(--tc-line);background:var(--tc-in);color:var(--tc-ink);font-size:13px;outline:none}
.tc-search input:focus {border-color:var(--tc-accent);box-shadow:0 0 0 3px rgba(26,115,232,.16)}
.tc-chips {display:flex;gap:6px;padding:0 14px 10px;overflow-x:auto;scrollbar-width:none}.tc-chips::-webkit-scrollbar {display:none}
.tc-chips button {flex:0 0 auto;padding:6px 13px;border-radius:999px;border:1px solid var(--tc-line);background:var(--tc-in);font-size:11.5px;font-weight:700;color:var(--tc-mute)}
.tc-chips button.on {background:linear-gradient(135deg,var(--tc-accent),var(--tc-accent2));border-color:transparent;color:#fff}.tc-chips .tc-count {font-weight:800}
.tc-localbar {margin:0 14px 8px;padding:8px 12px;border-radius:12px;border:1px solid rgba(217,119,6,.35);background:rgba(251,191,36,.16);color:#92400e;font-size:11px;font-weight:600;text-align:left}.dark .tc-localbar {color:#fde68a}
.tc-list {flex:1;overflow-y:auto;padding:0 8px 10px;min-height:0}

.tc-item-main {flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tc-item-top,.tc-item-bot {display:flex;align-items:center;gap:8px;min-width:0}
.tc-item-top b {flex:1;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-item-top time {font-size:10.5px;color:var(--tc-mute);flex:0 0 auto}.tc-item-top time.unread {color:var(--tc-green);font-weight:800}

.tc-badge {min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;background:var(--tc-green);color:#fff;font-size:10.5px;font-weight:800}.tc-badge.muted {background:#94a3b8}
.tc-mute {color:var(--tc-mute);font-size:11px}.tc-at {width:20px;height:20px;border-radius:50%;display:inline-grid;place-items:center;background:var(--tc-green);color:#fff;font-size:11px;font-weight:800}
.tc-typing-txt {color:var(--tc-green);font-weight:700}.tc-on {color:var(--tc-green);font-weight:700}
.tc-sec {padding:12px 12px 4px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--tc-mute)}
.tc-empty-list {display:flex;flex-direction:column;align-items:center;gap:10px;padding:46px 20px;text-align:center;color:var(--tc-mute)}.tc-empty-list>i {font-size:34px;opacity:.5}
.tc-av {position:relative;flex:0 0 auto;display:inline-grid;place-items:center;border-radius:50%;overflow:visible}
.tc-av img {width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.tc-av b {position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;z-index:-1}
.tc-av.noimg b {position:static;width:100%;height:100%;z-index:auto}
.tc-av.online::after {content:"";position:absolute;right:0;bottom:0;width:30%;height:30%;min-width:9px;min-height:9px;border-radius:50%;background:#22c55e;border:2px solid #fff}.dark .tc-av.online::after {border-color:#0f172a}
.tc-av-gap {width:30px;flex:0 0 30px}

/* buttons */
.tc-btn {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 18px;border-radius:13px;border:1px solid var(--tc-line);background:var(--tc-in);color:var(--tc-ink);font-size:12.5px;font-weight:700;transition:transform .15s,box-shadow .15s}
.tc-btn:hover {transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(30,41,90,.5)}.tc-btn:disabled {opacity:.5;pointer-events:none}
.tc-btn.pri {background:linear-gradient(135deg,var(--tc-accent),var(--tc-accent2));border-color:transparent;color:#fff}
.tc-btn.red {background:rgba(220,38,38,.12);border-color:rgba(220,38,38,.3);color:#dc2626}.tc-btn.ghost {background:transparent}
.tc-link {background:none;border:0;color:var(--tc-accent);font-size:12px;font-weight:700;padding:4px 0}

/* main pane */
.tc-main {position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:radial-gradient(40rem 24rem at 90% 0%,rgba(124,58,237,.1),transparent 60%),radial-gradient(34rem 22rem at 0% 100%,rgba(26,115,232,.1),transparent 60%)}
.tc-main.drop::after {content:"Drop files to send";position:absolute;inset:10px;z-index:30;display:grid;place-items:center;border:2px dashed var(--tc-accent);border-radius:20px;background:rgba(26,115,232,.12);font-weight:800;font-size:16px;color:var(--tc-accent)}
.tc-welcome {margin:auto;max-width:380px;padding:30px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.tc-welcome-ico {width:84px;height:84px;border-radius:26px;display:grid;place-items:center;font-size:34px;color:#fff;background:linear-gradient(135deg,var(--tc-accent),var(--tc-accent2));box-shadow:0 18px 40px -16px var(--tc-accent)}
.tc-welcome h2 {margin:6px 0 0;font-size:22px;font-weight:800}.tc-welcome p {margin:0;color:var(--tc-mute);line-height:1.55}.tc-welcome small {color:var(--tc-mute);font-size:11px}
.tc-welcome-btns {display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:8px 0}
.tc-head {display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--tc-line);background:var(--tc-glass2);position:relative;z-index:5}
.tc-head-main {flex:1;min-width:0;display:flex;align-items:center;gap:12px;border:0;background:transparent;text-align:left;padding:2px 4px;border-radius:14px}
.tc-head-main span {min-width:0;display:flex;flex-direction:column}.tc-head-main b {font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-head-main small {font-size:11.5px;color:var(--tc-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-head-btns {display:flex}.tc-back {display:none}
.tc-searchbar {display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--tc-line);background:var(--tc-glass2)}
.tc-searchbar input {flex:1;height:38px;border-radius:12px;border:1px solid var(--tc-line);background:var(--tc-in);padding:0 12px;color:var(--tc-ink);outline:none;font-size:13px}
#tc-sinfo {display:flex;align-items:center;gap:2px;font-size:11.5px;color:var(--tc-mute)}#tc-sinfo em {font-style:normal;margin-right:4px}
.tc-pin {border-bottom:1px solid var(--tc-line);background:var(--tc-glass2)}.tc-pin button {width:100%;display:flex;align-items:center;gap:12px;padding:8px 16px;border:0;background:transparent;text-align:left}
.tc-pin button>i {color:var(--tc-accent)}.tc-pin span {display:flex;flex-direction:column;min-width:0}.tc-pin b {font-size:11px;color:var(--tc-accent)}.tc-pin em {font-style:normal;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tc-mute)}
.tc-msgs {flex:1;min-height:0;overflow-y:auto;padding:14px clamp(10px,3vw,40px) 10px;display:flex;flex-direction:column;gap:3px;outline:none;scroll-behavior:auto}
.tc-day {display:flex;justify-content:center;margin:12px 0 6px;position:sticky;top:0;z-index:2}.tc-day span {padding:5px 14px;border-radius:999px;font-size:11px;font-weight:700;background:var(--tc-glass2);border:1px solid var(--tc-line);color:var(--tc-mute);box-shadow:0 4px 12px -8px rgba(0,0,0,.4)}
.tc-unread {display:flex;justify-content:center;margin:10px 0}.tc-unread span {padding:5px 16px;border-radius:999px;font-size:11px;font-weight:800;background:rgba(22,163,74,.14);color:var(--tc-green)}
.tc-sys {display:flex;justify-content:center;margin:6px 0}.tc-sys span {max-width:80%;text-align:center;padding:5px 14px;border-radius:12px;font-size:11.5px;background:var(--tc-glass2);border:1px solid var(--tc-line);color:var(--tc-mute)}.tc-sys.note span {background:rgba(251,191,36,.15);color:#92400e}.dark .tc-sys.note span {color:#fde68a}
.tc-more {display:flex;justify-content:center;margin:4px 0 10px}.tc-more button {padding:7px 16px;border-radius:999px;border:1px solid var(--tc-line);background:var(--tc-in);font-size:12px;font-weight:700;color:var(--tc-accent)}
.tc-empty-chat {margin:auto;text-align:center;color:var(--tc-mute);padding:30px}.tc-empty-chat>i {font-size:26px;opacity:.5;margin-bottom:8px;display:block}
.tc-row {display:flex;align-items:flex-end;gap:8px;max-width:100%;margin-top:8px}.tc-row.grouped {margin-top:1px}
.tc-row.mine {justify-content:flex-end}.tc-row.theirs {justify-content:flex-start}
.tc-row.flash .tc-bub {animation:tcFlash 1.7s ease}@keyframes tcFlash {0%,60%{box-shadow:0 0 0 3px var(--tc-accent),0 0 30px var(--tc-accent)}100%{box-shadow:none}}
.tc-bubwrap {max-width:min(78%,560px);min-width:0;display:flex;flex-direction:column}.tc-row.mine .tc-bubwrap {align-items:flex-end}
.tc-bub {position:relative;padding:7px 10px 6px;border-radius:16px;background:var(--tc-in);border:1px solid var(--tc-line);box-shadow:0 8px 18px -14px rgba(30,41,90,.5);word-break:break-word;overflow-wrap:anywhere;min-width:64px}
.tc-row.mine .tc-bub {background:var(--tc-out);border-color:rgba(26,115,232,.28);border-bottom-right-radius:5px}.tc-row.theirs .tc-bub {border-bottom-left-radius:5px}
.tc-bub.urgent {border-color:#ef4444;box-shadow:0 0 0 1px rgba(239,68,68,.45),0 10px 24px -12px rgba(239,68,68,.6)}.tc-bub.mentioned {border-color:var(--tc-accent2)}
.tc-bub.deleted {opacity:.75;font-style:italic}
.tc-urg {font-size:10px;font-weight:800;letter-spacing:.1em;color:#ef4444;margin-bottom:2px}
.tc-who {font-size:12px;font-weight:800;margin-bottom:2px}.tc-fwd {font-size:11px;color:var(--tc-mute);font-style:italic;margin-bottom:3px}
.tc-text {font-size:13.5px;line-height:1.45;white-space:normal}.tc-text a {color:var(--tc-accent);text-decoration:underline}
.tc-mono {font-family:ui-monospace,Menlo,monospace;font-size:12px;background:rgba(100,116,139,.2);padding:1px 5px;border-radius:5px}
.tc-mention {color:var(--tc-accent2);font-weight:700}.tc-mention.me {background:rgba(124,58,237,.16);border-radius:5px;padding:0 3px}
.tc-meta {float:right;display:inline-flex;align-items:center;gap:5px;margin:6px 0 0 14px;font-size:10px;color:var(--tc-mute);line-height:1}.tc-meta em {font-style:normal}
.tc-star {color:#f59e0b}.tc-tick {font-size:11px;border:0;background:none;padding:0}.tc-tick.read {color:#0ea5e9}.tc-tick.fail {color:#ef4444;font-size:13px}.tc-tick.wait {opacity:.6}
.tc-chev {position:absolute;top:2px;right:4px;width:24px;height:24px;border-radius:8px;border:0;background:linear-gradient(90deg,transparent,var(--tc-in) 40%);color:var(--tc-mute);font-size:11px;opacity:0;transition:opacity .15s}
.tc-row.mine .tc-chev {background:linear-gradient(90deg,transparent,rgba(210,228,252,.95) 40%)}.dark .tc-row.mine .tc-chev {background:linear-gradient(90deg,transparent,#1e4a9a 40%)}
.tc-bub:hover .tc-chev,.tc-chev:focus-visible {opacity:1}@media (hover:none) {.tc-chev {opacity:.7}}
.tc-quote {display:flex;flex-direction:column;gap:1px;padding:5px 9px;margin-bottom:5px;border-radius:10px;border-left:4px solid var(--tc-accent2);background:rgba(100,116,139,.14);cursor:pointer;font-size:12px}
.tc-quote b {font-size:11.5px}.tc-quote span {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tc-mute);max-width:100%}.tc-quote.plain {cursor:default;border-left-color:var(--tc-accent)}.tc-quote.plain span {white-space:normal}.tc-quote small {color:var(--tc-mute)}
.tc-del {color:var(--tc-mute);font-size:12.5px}
.tc-img {display:block;max-width:min(300px,100%);max-height:320px;border-radius:12px;cursor:zoom-in;margin-bottom:4px;object-fit:cover}
.tc-voice {display:flex;align-items:center;gap:8px;min-width:230px}.tc-voice audio {height:34px;max-width:200px}.tc-voice small {color:var(--tc-mute)}
.tc-file,.tc-card {display:flex;align-items:center;gap:12px;width:100%;min-width:220px;padding:10px 12px;border-radius:12px;background:rgba(100,116,139,.14);border:1px solid var(--tc-line);color:inherit;text-decoration:none;text-align:left;margin-bottom:4px}
.tc-file>i:first-child,.tc-card>i:first-child {font-size:20px;color:var(--tc-accent)}.tc-file span,.tc-card span {flex:1;min-width:0;display:flex;flex-direction:column}.tc-file small,.tc-card small {color:var(--tc-mute);font-size:11px}
.tc-card:hover,.tc-file:hover {background:rgba(26,115,232,.14)}
.tc-poll {min-width:240px;display:flex;flex-direction:column;gap:6px}.tc-poll-q {font-weight:800;font-size:14px}.tc-poll small {color:var(--tc-mute);font-size:11px}
.tc-opt {position:relative;display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:12px;border:1px solid var(--tc-line);background:rgba(255,255,255,.35);overflow:hidden;text-align:left}.dark .tc-opt {background:rgba(255,255,255,.06)}
.tc-opt i {position:absolute;left:0;top:0;bottom:0;background:rgba(26,115,232,.22);transition:width .4s;z-index:0}.tc-opt>* {position:relative;z-index:1}.tc-opt em {flex:1;font-style:normal;font-size:13px}.tc-opt b {font-size:12px}
.tc-chk {width:18px;height:18px;border-radius:50%;border:2px solid var(--tc-mute);display:grid;place-items:center;font-size:9px;color:#fff;flex:0 0 auto}.tc-opt.on .tc-chk {background:var(--tc-accent);border-color:var(--tc-accent)}
.tc-rx {display:flex;gap:4px;margin:-6px 8px 0;position:relative;z-index:1;flex-wrap:wrap}.tc-rx button {display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:999px;border:1px solid var(--tc-line);background:var(--tc-glass2);font-size:13px}.tc-rx button.on {border-color:var(--tc-accent);background:rgba(26,115,232,.15)}.tc-rx b {font-size:10.5px}
.tc-jump {position:absolute;right:20px;bottom:92px;z-index:8;width:42px;height:42px;border-radius:50%;border:1px solid var(--tc-line);background:var(--tc-glass2);box-shadow:0 12px 26px -10px rgba(0,0,0,.5);color:var(--tc-accent)}

/* composer */
.tc-composer {position:relative;padding:8px 12px 12px;border-top:1px solid var(--tc-line);background:var(--tc-glass2)}

.tc-composer.locked .tc-compose-row {display:none}
.tc-locked {padding:12px;text-align:center;color:var(--tc-mute);font-size:12.5px}
#tc-input {flex:1;min-height:42px;max-height:140px;padding:10px 14px;border-radius:21px;border:1px solid var(--tc-line);background:var(--tc-in);color:var(--tc-ink);font:inherit;font-size:14px;line-height:1.4;resize:none;outline:none;overflow-y:auto}
#tc-input:focus {border-color:var(--tc-accent);box-shadow:0 0 0 3px rgba(26,115,232,.16)}
.tc-send {width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;border:0;background:linear-gradient(135deg,var(--tc-accent),var(--tc-accent2));color:#fff;font-size:15px;box-shadow:0 10px 22px -10px var(--tc-accent);transition:transform .15s}
.tc-send:active {transform:scale(.92)}.tc-send.mic {background:var(--tc-in);color:var(--tc-accent);border:1px solid var(--tc-line);box-shadow:none}.tc-send.mic.rec {background:#ef4444;color:#fff;animation:tcPulse 1s infinite}
@keyframes tcPulse {50%{box-shadow:0 0 0 8px rgba(239,68,68,.2)}}
.tc-bar {display:flex;align-items:center;gap:10px;padding:8px 12px;margin-bottom:8px;border-radius:14px;border-left:4px solid var(--tc-accent2);background:rgba(100,116,139,.14)}
.tc-bar>span {flex:1;min-width:0;display:flex;flex-direction:column}.tc-bar b {font-size:12px;color:var(--tc-accent2)}.tc-bar em {font-style:normal;font-size:12px;color:var(--tc-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tc-bar button {border:0;background:none;color:var(--tc-mute)}
.tc-bar.edit {border-left-color:#f59e0b}.tc-bar.rec {border-left-color:#ef4444}.tc-recdot {width:10px;height:10px;border-radius:50%;background:#ef4444;animation:tcPulse 1s infinite}
.tc-suggest {position:absolute;left:12px;right:12px;bottom:calc(100% - 4px);z-index:12;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:var(--tc-glass2);border:1px solid var(--tc-line);box-shadow:0 18px 40px -16px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.tc-suggest button {display:flex;align-items:center;gap:10px;padding:9px 14px;border:0;background:transparent;text-align:left;font-size:13px}.tc-suggest button.on,.tc-suggest button:hover {background:rgba(26,115,232,.14)}

/* floating menus */
.tc-pop {position:absolute;z-index:60;min-width:200px;padding:6px;border-radius:18px;background:var(--tc-glass2);border:1px solid var(--tc-line);box-shadow:0 24px 50px -16px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);animation:tcPop .12s ease-out}
@keyframes tcPop {from{opacity:0;transform:scale(.96) translateY(4px)}}
.tc-pop>button {display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:12px;background:transparent;text-align:left;font-size:13px;font-weight:600}.tc-pop>button:hover {background:rgba(26,115,232,.12)}.tc-pop>button>i {width:18px;text-align:center;color:var(--tc-mute)}.tc-pop>button.red,.tc-pop>button.red>i {color:#ef4444}
.tc-quickrx {display:flex;justify-content:space-between;gap:2px;padding:4px 4px 8px;border-bottom:1px solid var(--tc-line);margin-bottom:4px}.tc-quickrx button {width:36px;height:36px;border-radius:50%;border:0;background:transparent;font-size:20px;transition:transform .12s}.tc-quickrx button:hover {background:rgba(26,115,232,.14);transform:scale(1.18)}
.tc-emoji {display:grid;grid-template-columns:repeat(8,1fr);gap:2px;width:min(320px,80vw)}.tc-emoji button {height:36px;border:0;border-radius:10px;background:transparent;font-size:20px}.tc-emoji button:hover {background:rgba(26,115,232,.14)}
.tc-pop.emoji,.tc-pop.attachmenu {padding:8px}.tc-pop.attachmenu {min-width:230px}
.tc-pop.attachmenu>button {padding:8px 10px}.tc-circ {width:34px;height:34px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font-size:14px;background:var(--tc-accent);flex:0 0 auto}
.tc-circ.c1 {background:linear-gradient(135deg,#a855f7,#7c3aed)}.tc-circ.c2 {background:linear-gradient(135deg,#3b82f6,#1d4ed8)}.tc-circ.c3 {background:linear-gradient(135deg,#f59e0b,#d97706)}.tc-circ.c4 {background:linear-gradient(135deg,#10b981,#047857)}.tc-circ.c5 {background:linear-gradient(135deg,#ec4899,#be185d)}.tc-circ.c6 {background:linear-gradient(135deg,#06b6d4,#0e7490)}
.tc-pop.attachmenu>button>i.tc-circ {color:#fff}

/* modals */
.tc-overlay {position:absolute;inset:0;z-index:50;display:none}.tc-overlay.on {display:block}
.tc-scrim {position:absolute;inset:0;background:rgba(15,23,42,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.tc-modal {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100% - 24px));max-height:calc(100% - 24px);display:flex;flex-direction:column;border-radius:24px;background:var(--tc-glass2);border:1px solid rgba(255,255,255,.7);box-shadow:0 40px 80px -30px rgba(0,0,0,.6);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);animation:tcModal .16s ease-out}
.dark .tc-modal {border-color:rgba(255,255,255,.16);background:rgba(15,23,42,.88)}
@keyframes tcModal {from{opacity:0;transform:translate(-50%,-48%) scale(.97)}}
.tc-modal.wide {width:min(620px,calc(100% - 24px))}
.tc-modal-h b {font-size:16px;font-weight:800}

.tc-modal.stack .tc-modal-f {flex-direction:column}.tc-modal.stack .tc-modal-f .tc-btn {width:100%}
.tc-fl {display:flex;flex-direction:column;gap:6px;margin:10px 0}.tc-fl span {font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--tc-mute)}
.tc-fl input,.tc-m-search input,.tc-addtpl input,#tc-popts input {width:100%;height:42px;padding:0 14px;border-radius:13px;border:1px solid var(--tc-line);background:var(--tc-in);color:var(--tc-ink);outline:none;font:inherit;font-size:14px}
.tc-fl input:focus,.tc-m-search input:focus,.tc-addtpl input:focus,#tc-popts input:focus {border-color:var(--tc-accent);box-shadow:0 0 0 3px rgba(26,115,232,.16)}
#tc-popts {display:flex;flex-direction:column;gap:8px}#tc-popts .tc-fl {margin:0}
.tc-check {display:flex;align-items:center;gap:10px;margin:12px 0 0;font-size:13px;font-weight:600}
.tc-m-search {margin:8px 0}
.tc-prow>span:not(.tc-av) {flex:1;min-width:0;display:flex;flex-direction:column}.tc-prow small {color:var(--tc-mute);font-size:11.5px}
.tc-prow input[type=checkbox] {width:18px;height:18px;accent-color:var(--tc-accent)}
.tc-hint {font-size:12px;color:var(--tc-mute);margin:10px 0;line-height:1.5}.tc-hint.center {text-align:center;padding:24px 8px}.tc-hint.center>i {font-size:28px;opacity:.5}
.tc-srow {display:flex;align-items:center;gap:10px;width:100%;padding:10px 4px;border:0;border-bottom:1px solid var(--tc-line);background:transparent;text-align:left;color:inherit;text-decoration:none}.tc-srow.link:hover {background:rgba(26,115,232,.08)}
.tc-srow>span:not(.tc-av) {flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.tc-srow em {font-style:normal;font-size:11px;color:var(--tc-mute)}.tc-srow small {font-size:12.5px;color:var(--tc-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-tabs {display:flex;gap:6px;margin-bottom:10px}.tc-tabs button {flex:1;padding:8px;border-radius:12px;border:1px solid var(--tc-line);background:var(--tc-in);font-weight:700;font-size:12.5px}.tc-tabs button.on {background:linear-gradient(135deg,var(--tc-accent),var(--tc-accent2));color:#fff;border-color:transparent}
.tc-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px}.tc-grid button {padding:0;border:0;border-radius:12px;overflow:hidden;aspect-ratio:1}.tc-grid img {width:100%;height:100%;object-fit:cover;display:block}
.tc-viewer {display:block;max-width:100%;max-height:60vh;margin:auto;border-radius:14px}
.tc-tpl .tc-trow {display:flex;align-items:center;gap:6px;padding:2px 0}.tc-tpl-t {flex:1;padding:10px 12px;border-radius:12px;border:1px solid var(--tc-line);background:var(--tc-in);text-align:left;font-size:13px}.tc-tpl-t:hover {border-color:var(--tc-accent)}
.tc-addtpl {display:flex;gap:8px;margin-top:10px}.tc-addtpl input {flex:1}
.tc-storage {margin-top:14px;padding:12px;border-radius:14px;background:rgba(26,115,232,.08);border:1px solid rgba(26,115,232,.2);display:flex;flex-direction:column;gap:6px;align-items:flex-start}.tc-storage small {color:var(--tc-mute);line-height:1.45}
.tc-trow {display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:10px 4px;border:0;background:transparent;text-align:left;border-radius:12px}.tc-trow>span:not(.tc-av) {display:flex;flex-direction:column;gap:2px;min-width:0}.tc-trow small {color:var(--tc-mute);font-size:11.5px;font-weight:500}
.tc-trow.plain {padding:12px 6px}.tc-trow.plain:hover {background:rgba(26,115,232,.08)}.tc-trow.red,.tc-trow.red b {color:#ef4444}.tc-trow b i {margin-right:8px;width:16px;text-align:center}
.tc-sw {position:relative;flex:0 0 auto;width:42px;height:24px;border-radius:999px;background:rgba(100,116,139,.4);transition:background .2s}.tc-sw::after {content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:transform .2s}.tc-sw.on {background:linear-gradient(135deg,var(--tc-accent),var(--tc-accent2))}.tc-sw.on::after {transform:translateX(18px)}
.tc-select {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 4px}.tc-select>span:not(.tc-av) {display:flex;flex-direction:column;gap:2px}.tc-select small {color:var(--tc-mute);font-size:11.5px}.tc-select select {height:36px;border-radius:10px;border:1px solid var(--tc-line);background:var(--tc-in);color:var(--tc-ink);padding:0 8px}

/* info panel */
.tc-info {position:absolute;right:0;top:0;bottom:0;z-index:20;width:min(360px,100%);display:flex;flex-direction:column;background:var(--tc-glass2);border-left:1px solid var(--tc-line);box-shadow:-24px 0 50px -30px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);animation:tcSlide .18s ease-out}
@keyframes tcSlide {from{transform:translateX(30px);opacity:0}}
.tc-info-h {display:flex;align-items:center;justify-content:space-between;padding:12px 12px 8px 18px;border-bottom:1px solid var(--tc-line)}.tc-info-b {flex:1;overflow-y:auto;padding:0 14px 20px}
.tc-info-top {display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 10px 14px;text-align:center}.tc-info-top h3 {margin:6px 0 0;font-size:19px;font-weight:800}.tc-info-top p {margin:0;color:var(--tc-mute)}.tc-desc {color:var(--tc-mute);font-size:12.5px;line-height:1.5;max-width:280px}
.tc-info-sec {margin-top:10px;padding:6px 8px;border-radius:18px;background:var(--tc-glass);border:1px solid var(--tc-line)}.tc-sec-h {display:flex;justify-content:space-between;align-items:center;padding:6px 4px}.tc-sec-h b.blue {color:#0ea5e9}
.tc-mrow {display:flex;align-items:center;gap:10px;padding:7px 4px}.tc-mrow>span {flex:1;min-width:0;display:flex;flex-direction:column}.tc-mrow small {color:var(--tc-mute);font-size:11px}.tc-adm {font-style:normal;font-size:10px;font-weight:800;padding:2px 8px;border-radius:999px;color:var(--tc-green);border:1px solid rgba(22,163,74,.4)}

/* setup + loading */
.tc-loading {display:grid;place-items:center;height:300px;color:var(--tc-mute,#64748b);font-weight:600}
.tc-setup {display:grid;place-items:center;padding:10px}
.dark .tc-setup-card {background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#e8eefb}
.tc-setup-card .tc-welcome-ico {width:70px;height:70px;font-size:28px}.tc-setup-card h2 {margin:0;font-size:22px;font-weight:800}.tc-setup-card p {margin:0;opacity:.75;line-height:1.55}.tc-setup-card ol {text-align:left;margin:0;padding-left:20px;line-height:1.9;font-size:13px}
.tc-sql {width:100%;font:12px/1.5 ui-monospace,Menlo,monospace;padding:12px;border-radius:14px;border:1px solid rgba(100,116,139,.3);background:rgba(15,23,42,.06);color:inherit;resize:vertical}.dark .tc-sql {background:rgba(0,0,0,.3)}
.tc-setup-btns {display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.tc-err {color:#dc2626;font-size:11px;word-break:break-word}
.tc-setup .tc-btn {--tc-line:rgba(15,23,42,.14);--tc-in:rgba(255,255,255,.85);--tc-ink:#0f172a;--tc-accent:var(--blue,#1a73e8);--tc-accent2:var(--purple,#7c3aed)}.dark .tc-setup .tc-btn {--tc-in:rgba(255,255,255,.1);--tc-ink:#e8eefb;--tc-line:rgba(255,255,255,.16)}

/* responsive: phone = one pane at a time */
@media (max-width:860px) {
  .tc-app {grid-template-columns:minmax(0,1fr);height:calc(100dvh - 150px);min-height:480px;border-radius:20px}
  .tc-app.has-chat .tc-side {display:none}
  .tc-app:not(.has-chat) .tc-main {display:none}
  .tc-back {display:inline-grid}
  .tc-bubwrap {max-width:86%}
  .tc-info {width:100%}
  .tc-jump {bottom:96px}}
@media (max-width:420px) {.tc-msgs {padding-inline:8px}.tc-emoji {grid-template-columns:repeat(7,1fr)}.tc-modal-f .tc-btn {flex:1}}
body.tc-admin-chat #admin-workspace {padding-bottom:12px}
#admin-workspace:has(.tc-app),#admin-workspace:has(.tc-setup) {padding-top:14px}
@media (prefers-reduced-motion:reduce) {.tc-app * {animation:none!important;transition:none!important}}
.tc-setup-card {
    width: min(720px,100%);
    padding: clamp(18px,4vw,34px);
    border-radius: 26px;
    background: linear-gradient(145deg,rgba(255,255,255,.75),rgba(255,255,255,.45));
    border: 1px solid rgba(255,255,255,.85);
    box-shadow: 0 30px 70px -34px rgba(30,41,90,.45);
    -webkit-backdrop-filter: blur(26px);
    backdrop-filter: blur(26px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #0f172a;
    --tc-accent: var(--blue,#1a73e8);
    --tc-accent2: var(--purple,#7c3aed);
    --tc-mute: #64748b;
}

/* ===== Team Chat v2: reputation, notifications, tasks, appearance ===== */
.tc-lvl {font-size:.82em;margin-left:3px;vertical-align:baseline}
.tc-avbtn {cursor:pointer;display:inline-flex;border-radius:50%;transition:transform .15s}.tc-avbtn:hover {transform:scale(1.07)}
.tc-who[data-tc] {cursor:pointer;display:inline-block}.tc-who[data-tc]:hover {text-decoration:underline}
.tc-mrow[data-tc] {cursor:pointer;border-radius:12px;transition:background .15s}.tc-mrow[data-tc]:hover {background:rgba(26,115,232,.07)}
.tc-pinned {color:var(--tc-mute);font-size:10px;margin-right:4px}
.tc-bellb {position:relative}
.tc-bellN {position:absolute;top:3px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:#ef4444;color:#fff;font-size:9.5px;font-weight:800;display:grid;place-items:center;border:2px solid var(--tc-glass2,#fff);box-sizing:content-box;line-height:1}
.tc-h4 {font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--tc-mute);margin:14px 0 6px}
.tc-hint kbd {padding:1px 6px;border-radius:6px;border:1px solid var(--tc-line);background:var(--tc-in);font:600 10.5px inherit}

/* segmented control */
.tc-seg {display:inline-flex;flex-wrap:wrap;gap:3px;padding:3px;border-radius:12px;background:rgba(100,116,139,.12)}
.tc-seg button {border:0;background:transparent;padding:6px 11px;border-radius:9px;font-size:11.5px;font-weight:700;color:var(--tc-mute)}
.tc-seg button.on {background:var(--tc-glass2);color:var(--tc-accent);box-shadow:0 2px 8px -3px rgba(0,0,0,.3)}
.tc-seg.full {display:flex}.tc-seg.full button {flex:1}

/* settings */
.tc-set h4 {display:flex;align-items:center;gap:8px;margin:14px 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--tc-mute)}.tc-set h4:first-child {margin-top:0}
.tc-setrow {display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:8px 2px}.tc-setrow>span {min-width:92px}
.tc-setrow input[type=time] {height:36px;padding:0 10px;border-radius:10px;border:1px solid var(--tc-line);background:var(--tc-in);color:var(--tc-ink)}

/* profile */
.tc-profmodal {width:min(400px,calc(100% - 24px))}
.tc-prof-top {display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:4px 0 10px}
.tc-prof-top h3 {margin:8px 0 0;font-size:18px;font-weight:800}.tc-prof-top h3 small {font-size:12px;color:var(--tc-mute);font-weight:600}.tc-prof-top p {margin:0;color:var(--tc-mute);font-size:12px}
.tc-lvlchip {display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:5px 12px;border-radius:99px;font-size:11.5px;font-weight:800;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 35%,transparent)}
.tc-prog {margin:8px 0 12px}.tc-prog>div {display:flex;justify-content:space-between;font-size:12px;margin-bottom:5px}.tc-prog small {color:var(--tc-mute)}
.tc-prog>span {display:block;height:8px;border-radius:9px;background:rgba(100,116,139,.18);overflow:hidden}.tc-prog>span i {display:block;height:100%;border-radius:9px;transition:width .5s}
.tc-stats {display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tc-stats>div {display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border-radius:14px;background:var(--tc-in);border:1px solid var(--tc-line)}
.tc-stats i {color:var(--tc-accent);font-size:14px}.tc-stats b {font-size:16px}.tc-stats small {font-size:10.5px;color:var(--tc-mute);font-weight:600}
.tc-badges {display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.tc-badges em {font-size:12px;color:var(--tc-mute)}
.tc-badges span {display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:99px;font-size:11px;font-weight:700;background:rgba(245,158,11,.14);color:#b45309;border:1px solid rgba(245,158,11,.3)}
.dark .tc-badges span {color:#fbbf24}

/* leaderboard */
.tc-lb {display:flex;flex-direction:column;gap:4px}
.tc-lbrow {display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;border:1px solid transparent;background:transparent;text-align:left;width:100%}
.tc-lbrow:hover {background:rgba(26,115,232,.08);border-color:var(--tc-line)}
.tc-rank {width:24px;text-align:center;font-weight:800;color:var(--tc-mute);font-size:13px}.tc-rank i {font-size:18px}
.tc-lbn {flex:1;min-width:0;display:flex;flex-direction:column}.tc-lbn b {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-lbn small {color:var(--tc-mute);font-size:11px}
.tc-lbrow em {font-style:normal;font-weight:800;color:var(--tc-accent)}

/* notification centre */
.tc-nlist {display:flex;flex-direction:column;gap:4px}
.tc-nrow {display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;border:1px solid var(--tc-line);background:var(--tc-in);text-align:left;width:100%}
.tc-nrow.new {border-color:rgba(26,115,232,.4);background:rgba(26,115,232,.08)}.tc-nrow:hover {border-color:var(--tc-accent)}
.tc-nrow>span:nth-child(2) {flex:1;min-width:0;display:flex;flex-direction:column}.tc-nrow small {color:var(--tc-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-nrow em {font-style:normal;font-weight:500;color:var(--tc-mute)}
.tc-nrow time {font-size:10.5px;color:var(--tc-mute)}
.tc-toast-ic {width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:12px;color:var(--c);background:color-mix(in srgb,var(--c) 15%,transparent);font-size:16px}

/* toasts (outside .tc-app) */
.tc-toasts {position:fixed;right:16px;bottom:16px;z-index:10050;display:flex;flex-direction:column;gap:10px;width:min(360px,calc(100vw - 24px));pointer-events:none}
.tc-toast {pointer-events:auto;display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:18px;background:rgba(255,255,255,.96);color:#0f172a;border:1px solid rgba(15,23,42,.08);box-shadow:0 20px 50px -18px rgba(15,23,42,.5);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:tcToast .28s cubic-bezier(.2,.9,.3,1.2);font-size:13px;position:relative}
.dark .tc-toast {background:rgba(17,24,39,.96);color:#e8eefb;border-color:rgba(255,255,255,.14)}
.tc-toast.urgent {border-color:#ef4444;box-shadow:0 0 0 2px rgba(239,68,68,.35),0 20px 50px -18px rgba(239,68,68,.5)}
.tc-toast-b {flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.tc-toast-b>b {padding-right:20px;font-size:13px}
.tc-toast-b>span {color:#64748b;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.tc-toast-tag {font-style:normal;font-weight:800;font-size:10.5px;text-transform:uppercase;color:#1a73e8}.tc-toast.urgent .tc-toast-tag {color:#ef4444}
.tc-toast-a {display:flex;gap:6px;margin-top:6px}
.tc-toast-a button,.tc-toast-r button {border:1px solid rgba(100,116,139,.25);background:transparent;color:inherit;border-radius:9px;padding:4px 11px;font-size:11.5px;font-weight:700;cursor:pointer}
.tc-toast-a button:hover {background:rgba(26,115,232,.12);border-color:#1a73e8}
.tc-toast-r {display:flex;gap:6px;margin-top:6px}.tc-toast-in {flex:1;min-width:0;height:34px;padding:0 10px;border-radius:10px;border:1px solid rgba(100,116,139,.35);background:transparent;color:inherit;outline:none}.tc-toast-in:focus {border-color:#1a73e8}
.tc-toast-r button {background:#1a73e8;color:#fff;border-color:transparent;width:36px}
.tc-toast-x {position:absolute;top:8px;right:8px;width:24px;height:24px;border:0;border-radius:8px;background:transparent;color:#94a3b8;cursor:pointer}.tc-toast-x:hover {background:rgba(100,116,139,.18)}
@keyframes tcToast {from{opacity:0;transform:translateX(30px) scale(.96)}to{opacity:1;transform:none}}
@media (max-width:560px) {.tc-toasts {right:12px;left:12px;bottom:12px;width:auto}}

/* tasks */
.tc-task {display:flex;flex-direction:column;gap:8px;min-width:210px;max-width:290px;padding:2px 0}
.tc-task-h {display:flex;gap:9px;align-items:flex-start}.tc-task-h i {color:#7c3aed;margin-top:2px}.tc-task.done .tc-task-h i {color:#16a34a}.tc-task.done .tc-task-h b {text-decoration:line-through;opacity:.7}
.tc-task>small {color:var(--tc-mute);font-size:11.5px}.tc-task>small.od {color:#dc2626;font-weight:700}
.tc-task-as {display:flex;gap:4px}.tc-task-as span {opacity:.5;filter:grayscale(.6);border-radius:50%;position:relative}.tc-task-as span.ok {opacity:1;filter:none;box-shadow:0 0 0 2px #16a34a}
.tc-task-p {display:flex;align-items:center;gap:8px}.tc-task-p span {flex:1;height:6px;border-radius:9px;background:rgba(100,116,139,.2);overflow:hidden}.tc-task-p i {display:block;height:100%;background:linear-gradient(90deg,#7c3aed,#16a34a);border-radius:9px}.tc-task-p small {font-size:10.5px;color:var(--tc-mute)}
.tc-btn.sm {min-height:32px;padding:0 12px;font-size:11.5px;align-self:flex-start}
.tc-loc {text-decoration:none;color:inherit}
.tc-circ.c7 {background:linear-gradient(135deg,#8b5cf6,#6d28d9)}.tc-circ.c8 {background:linear-gradient(135deg,#10b981,#047857)}

/* appearance */
.tc-app[data-fs=s] .tc-bub {font-size:12px}.tc-app[data-fs=l] .tc-bub {font-size:15px}
.tc-app[data-wall=mint] .tc-msgs {background-image:linear-gradient(180deg,rgba(16,185,129,.1),rgba(20,184,166,.04))}
.tc-app[data-wall=dusk] .tc-msgs {background-image:linear-gradient(180deg,rgba(99,102,241,.14),rgba(236,72,153,.06))}
.tc-app[data-wall=sand] .tc-msgs {background-image:linear-gradient(180deg,rgba(217,119,6,.1),rgba(251,191,36,.05))}
.tc-app[data-wall=plain] .tc-msgs {background-image:none;background-color:transparent}
.tc-app .tc-bub {transition:box-shadow .2s}
.tc-row:hover .tc-bub {box-shadow:0 6px 18px -12px rgba(30,41,90,.5)}
@media (prefers-reduced-motion:reduce) {.tc-toast {animation:none}}

/* ===== Team Chat v3: modern polish, portal-leak fixes, a11y ===== */
.tc-app {
    --tc-ink: #0f172a;
    --tc-mute: #526077;
    --tc-line: rgba(15,23,42,.09);
    --tc-glass: rgba(255,255,255,.62);
    --tc-glass2: rgba(255,255,255,.95);
    --tc-in: rgba(255,255,255,.9);
    --tc-out: rgba(26,115,232,.17);
    --tc-accent: var(--blue,#1a73e8);
    --tc-accent2: var(--purple,#7c3aed);
    --tc-green: #16a34a;
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px,380px) minmax(0,1fr);
    height: clamp(520px,calc(100dvh - 190px),920px);
    border-radius: 26px;
    overflow: hidden;
    color: var(--tc-ink);
    font-size: 13px;
    isolation: isolate;
    background: linear-gradient(145deg,rgba(255,255,255,.7),rgba(255,255,255,.4));
    border: 1px solid rgba(255,255,255,.85);
    box-shadow: 0 1px 0 #fff inset,0 30px 70px -34px rgba(30,41,90,.45),0 0 0 1px rgba(26,115,232,.08);
    -webkit-backdrop-filter: blur(26px) saturate(170%);
    backdrop-filter: blur(26px) saturate(170%);
    --tc-focus: 0 0 0 3px rgba(26,115,232,.35);
}
.tc-app :focus {outline:none}
.tc-app :is(button,a,input,textarea,select,[tabindex]):focus-visible {outline:2px solid var(--tc-accent);outline-offset:2px;border-radius:12px}
.tc-toasts :is(button,input):focus-visible {outline:2px solid #1a73e8;outline-offset:2px}
.tc-btn,.tc-chips button,.tc-seg button,.tc-link,.tc-toast-a button {white-space:nowrap}
.tc-app .tc-modal-b button.tc-prow,.tc-app .tc-lbrow,.tc-app .tc-nrow {white-space:normal}

/* people pickers: clean, tappable rows */
.tc-prow {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    border-radius: 14px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    min-height: 56px;
    padding: 8px 10px;
    border: 1px solid transparent;
    transition: background .15s,border-color .15s,transform .12s;
}
.tc-prow:hover {
    background: rgba(26,115,232,.09);
    border-color: rgba(26,115,232,.18);
}
.tc-prow:active {transform:scale(.99)}
.tc-prow>span:not(.tc-av) b {display:block;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25;word-break:break-word}
.tc-prow>span:not(.tc-av) small {display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-prow:has(input:checked) {background:linear-gradient(135deg,rgba(26,115,232,.14),rgba(124,58,237,.1));border-color:rgba(26,115,232,.3)}
.tc-prow.action {
    background: linear-gradient(135deg,rgba(26,115,232,.1),rgba(124,58,237,.08));
    border-color: rgba(26,115,232,.2);
    margin: 6px 0 10px;
}
.tc-prow.action .tc-circ {width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--tc-accent),var(--tc-accent2));color:#fff;font-size:15px;flex:0 0 auto}
.tc-plist {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: min(320px,46vh);
    overflow-y: auto;
    margin: 0 -8px;
    padding: 0 8px;
    scrollbar-width: thin;
}
.tc-m-search input {background-image:none}
.tc-modal-f {
    padding: 12px 20px 18px;
    border-top: 1px solid var(--tc-line);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.tc-modal-f .tc-btn {min-width:96px}
.tc-modal-b {
    padding: 4px 20px 16px;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.tc-modal-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 8px 20px;
    position: sticky;
    top: 0;
    z-index: 2;
}

/* chat list: subtle depth */
.tc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px;
    border-radius: 16px;
    background: transparent;
    text-align: left;
    transition: background .15s;
    border: 1px solid transparent;
}
.tc-item:hover {
    background: rgba(26,115,232,.08);
    border-color: var(--tc-line);
}
.tc-item.on {
    background: linear-gradient(135deg,rgba(26,115,232,.18),rgba(124,58,237,.12));
    border-color: rgba(26,115,232,.28);
    box-shadow: 0 10px 24px -16px rgba(26,115,232,.55);
}
.tc-pv {
    color: var(--tc-mute);
    font-size: 12.5px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.tc-item-bot {justify-content:space-between}
.tc-send,.tc-ib {flex-shrink:0}

/* composer */
.tc-compose-row {
    display: flex;
    gap: 4px;
    align-items: flex-end;
}
.tc-compose-row textarea {min-width:0;flex:1}

/* dark theme contrast */
.dark .tc-app .tc-prow:hover {background:rgba(96,165,250,.14);border-color:rgba(96,165,250,.28)}
.dark .tc-app .tc-prow.action {background:linear-gradient(135deg,rgba(96,165,250,.16),rgba(167,139,250,.12));border-color:rgba(96,165,250,.28)}
.dark .tc-app .tc-prow:has(input:checked) {background:linear-gradient(135deg,rgba(96,165,250,.2),rgba(167,139,250,.14));border-color:rgba(96,165,250,.4)}
.dark .tc-app .tc-item.on {border-color:rgba(96,165,250,.35);box-shadow:0 10px 24px -16px rgba(0,0,0,.8)}
.dark .tc-app .tc-search input,.dark .tc-app .tc-m-search input,.dark .tc-app .tc-fl input,.dark .tc-app textarea {color:#e8eefb;caret-color:#60a5fa}
.dark .tc-app ::placeholder {color:#8ea0c0;opacity:1}
.tc-app ::placeholder {color:#64748b;opacity:1}
.dark .tc-seg button.on {color:#93c5fd}
.dark .tc-toast-b>span {
    color: #a9b8d4;
}
.dark .tc-nrow.new {background:rgba(96,165,250,.14);border-color:rgba(96,165,250,.45)}
.dark .tc-task>small.od {color:#f87171}
.dark .tc-lbrow:hover {background:rgba(96,165,250,.12)}

/* touch devices: 44px targets, no hover-only affordances */
@media (hover:none),(pointer:coarse) {
  .tc-ib {width:44px;height:44px}.tc-ib.sm {width:36px;height:36px}
  .tc-chips button,.tc-seg button {min-height:38px}
  .tc-btn {min-height:44px}
  .tc-chev {opacity:1}}

/* tablets & phones */
@media (max-width:900px) {
  #admin-portal-modal .tc-app aside.tc-info {width:100% !important;max-width:100% !important}}
@media (max-width:640px) {
  .tc-app {border-radius:20px}
  .tc-modal {width:calc(100% - 16px);max-height:calc(100% - 16px);border-radius:22px}
  .tc-modal-f {flex-wrap:nowrap}.tc-modal-f .tc-btn {flex:1;min-width:0;padding:0 10px}
  .tc-stats {grid-template-columns:repeat(3,1fr);gap:6px}
  .tc-setrow>span {min-width:0;flex:1 0 100%}
  .tc-seg {max-width:100%;overflow-x:auto;scrollbar-width:none}
  .tc-bub {max-width:88%}}
@media (max-width:360px) {.tc-stats {grid-template-columns:repeat(2,1fr)}.tc-ib {width:40px;height:40px}}
.tc-app .tc-info {background:#fff !important;color:var(--tc-ink)}
.dark .tc-app .tc-info {background:#0f172a !important}
.tc-app .tc-search input {padding-left:38px !important}
.tc-app .tc-search>i {z-index:1}

/* contrast fixes (WCAG AA for small text) */
.tc-trow.red,.tc-trow.red b,.tc-pop>button.red,.tc-pop>button.red span{color:#dc2626}
.dark .tc-trow.red,.dark .tc-trow.red b,.dark .tc-pop>button.red,.dark .tc-pop>button.red span{color:#fca5a5}
.tc-adm{color:#15803d;font-size:10.5px}.dark .tc-adm{color:#4ade80}
.dark .tc-lvlchip{color:color-mix(in srgb,var(--c) 45%,#fff)}
.dark .tc-lbrow em{color:#93c5fd}
.dark .tc-setup-card,.dark .tc-setup-card p{color:#cbd5e1}
.tc-localbar{white-space:normal;line-height:1.35}
.tc-task{min-width:0;max-width:100%}
.tc-main,.tc-side,.tc-msgs,.tc-bubwrap,.tc-bub{min-width:0}
.tc-bub{overflow-wrap:anywhere}
.tc-text{overflow-wrap:anywhere;word-break:break-word}
@media (min-width:861px) and (max-width:1100px){
  .tc-app{grid-template-columns:minmax(260px,320px) minmax(0,1fr)}
  .tc-info{width:min(340px,100%)}
}
.tc-me{flex:1;min-width:0}.tc-me>span:not(.tc-av){min-width:0}.tc-me b,.tc-me small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:380px){.tc-side-head{padding:12px 10px 8px;gap:6px}.tc-side-btns{gap:0}.tc-side-btns .tc-ib{width:38px;height:38px}.tc-me small{display:none}}

/* Team Chat icons: draw the real Font Awesome glyph (the site-wide mask-icon override in styles.css maps many different icons onto the same picture, e.g. gift/cake, crown/medal, paperclip/link) */
.tc-app i.fa-solid[class][class][class]::before,.tc-toasts i.fa-solid[class][class][class]::before{-webkit-mask:none !important;mask:none !important;background:none !important;width:auto !important;height:auto !important;display:inline-block;vertical-align:baseline !important;font-family:'Font Awesome 6 Free','Font Awesome 7 Free','Font Awesome 5 Free' !important;font-weight:900 !important;font-style:normal;line-height:1}
.tc-app i.fa-angles-down[class][class][class]::before,.tc-toasts i.fa-angles-down[class][class][class]::before{content:"\f103" !important}
.tc-app i.fa-arrow-left[class][class][class]::before,.tc-toasts i.fa-arrow-left[class][class][class]::before{content:"\f060" !important}
.tc-app i.fa-arrow-up-right-from-square[class][class][class]::before,.tc-toasts i.fa-arrow-up-right-from-square[class][class][class]::before{content:"\f08e" !important}
.tc-app i.fa-at[class][class][class]::before,.tc-toasts i.fa-at[class][class][class]::before{content:"\@" !important}
.tc-app i.fa-ban[class][class][class]::before,.tc-toasts i.fa-ban[class][class][class]::before{content:"\f05e" !important}
.tc-app i.fa-bell[class][class][class]::before,.tc-toasts i.fa-bell[class][class][class]::before{content:"\f0f3" !important}
.tc-app i.fa-bell-slash[class][class][class]::before,.tc-toasts i.fa-bell-slash[class][class][class]::before{content:"\f1f6" !important}
.tc-app i.fa-bolt[class][class][class]::before,.tc-toasts i.fa-bolt[class][class][class]::before{content:"\f0e7" !important}
.tc-app i.fa-book-open[class][class][class]::before,.tc-toasts i.fa-book-open[class][class][class]::before{content:"\f518" !important}
.tc-app i.fa-bookmark[class][class][class]::before,.tc-toasts i.fa-bookmark[class][class][class]::before{content:"\f02e" !important}
.tc-app i.fa-box-archive[class][class][class]::before,.tc-toasts i.fa-box-archive[class][class][class]::before{content:"\f187" !important}
.tc-app i.fa-broom[class][class][class]::before,.tc-toasts i.fa-broom[class][class][class]::before{content:"\f51a" !important}
.tc-app i.fa-bullhorn[class][class][class]::before,.tc-toasts i.fa-bullhorn[class][class][class]::before{content:"\f0a1" !important}
.tc-app i.fa-bullseye[class][class][class]::before,.tc-toasts i.fa-bullseye[class][class][class]::before{content:"\f140" !important}
.tc-app i.fa-cake-candles[class][class][class]::before,.tc-toasts i.fa-cake-candles[class][class][class]::before{content:"\f1fd" !important}
.tc-app i.fa-calendar-check[class][class][class]::before,.tc-toasts i.fa-calendar-check[class][class][class]::before{content:"\f274" !important}
.tc-app i.fa-calendar-day[class][class][class]::before,.tc-toasts i.fa-calendar-day[class][class][class]::before{content:"\f783" !important}
.tc-app i.fa-calendar-days[class][class][class]::before,.tc-toasts i.fa-calendar-days[class][class][class]::before{content:"\f073" !important}
.tc-app i.fa-calendar-week[class][class][class]::before,.tc-toasts i.fa-calendar-week[class][class][class]::before{content:"\f784" !important}
.tc-app i.fa-camera[class][class][class]::before,.tc-toasts i.fa-camera[class][class][class]::before{content:"\f030" !important}
.tc-app i.fa-champagne-glasses[class][class][class]::before,.tc-toasts i.fa-champagne-glasses[class][class][class]::before{content:"\f79f" !important}
.tc-app i.fa-chart-simple[class][class][class]::before,.tc-toasts i.fa-chart-simple[class][class][class]::before{content:"\e473" !important}
.tc-app i.fa-check[class][class][class]::before,.tc-toasts i.fa-check[class][class][class]::before{content:"\f00c" !important}
.tc-app i.fa-check-double[class][class][class]::before,.tc-toasts i.fa-check-double[class][class][class]::before{content:"\f560" !important}
.tc-app i.fa-chevron-down[class][class][class]::before,.tc-toasts i.fa-chevron-down[class][class][class]::before{content:"\f078" !important}
.tc-app i.fa-chevron-right[class][class][class]::before,.tc-toasts i.fa-chevron-right[class][class][class]::before{content:"\f054" !important}
.tc-app i.fa-chevron-up[class][class][class]::before,.tc-toasts i.fa-chevron-up[class][class][class]::before{content:"\f077" !important}
.tc-app i.fa-circle-check[class][class][class]::before,.tc-toasts i.fa-circle-check[class][class][class]::before{content:"\f058" !important}
.tc-app i.fa-circle-exclamation[class][class][class]::before,.tc-toasts i.fa-circle-exclamation[class][class][class]::before{content:"\f06a" !important}
.tc-app i.fa-circle-info[class][class][class]::before,.tc-toasts i.fa-circle-info[class][class][class]::before{content:"\f05a" !important}
.tc-app i.fa-circle-question[class][class][class]::before,.tc-toasts i.fa-circle-question[class][class][class]::before{content:"\f059" !important}
.tc-app i.fa-circle-xmark[class][class][class]::before,.tc-toasts i.fa-circle-xmark[class][class][class]::before{content:"\f057" !important}
.tc-app i.fa-clock[class][class][class]::before,.tc-toasts i.fa-clock[class][class][class]::before{content:"\f017" !important}
.tc-app i.fa-clock-rotate-left[class][class][class]::before,.tc-toasts i.fa-clock-rotate-left[class][class][class]::before{content:"\f1da" !important}
.tc-app i.fa-cloud[class][class][class]::before,.tc-toasts i.fa-cloud[class][class][class]::before{content:"\f0c2" !important}
.tc-app i.fa-comments[class][class][class]::before,.tc-toasts i.fa-comments[class][class][class]::before{content:"\f086" !important}
.tc-app i.fa-copy[class][class][class]::before,.tc-toasts i.fa-copy[class][class][class]::before{content:"\f0c5" !important}
.tc-app i.fa-crown[class][class][class]::before,.tc-toasts i.fa-crown[class][class][class]::before{content:"\f521" !important}
.tc-app i.fa-database[class][class][class]::before,.tc-toasts i.fa-database[class][class][class]::before{content:"\f1c0" !important}
.tc-app i.fa-download[class][class][class]::before,.tc-toasts i.fa-download[class][class][class]::before{content:"\f019" !important}
.tc-app i.fa-droplet[class][class][class]::before,.tc-toasts i.fa-droplet[class][class][class]::before{content:"\f043" !important}
.tc-app i.fa-dumbbell[class][class][class]::before,.tc-toasts i.fa-dumbbell[class][class][class]::before{content:"\f44b" !important}
.tc-app i.fa-ellipsis-vertical[class][class][class]::before,.tc-toasts i.fa-ellipsis-vertical[class][class][class]::before{content:"\f142" !important}
.tc-app i.fa-envelope[class][class][class]::before,.tc-toasts i.fa-envelope[class][class][class]::before{content:"\f0e0" !important}
.tc-app i.fa-eye[class][class][class]::before,.tc-toasts i.fa-eye[class][class][class]::before{content:"\f06e" !important}
.tc-app i.fa-face-angry[class][class][class]::before,.tc-toasts i.fa-face-angry[class][class][class]::before{content:"\f556" !important}
.tc-app i.fa-face-grin-beam[class][class][class]::before,.tc-toasts i.fa-face-grin-beam[class][class][class]::before{content:"\f582" !important}
.tc-app i.fa-face-grin-hearts[class][class][class]::before,.tc-toasts i.fa-face-grin-hearts[class][class][class]::before{content:"\f584" !important}
.tc-app i.fa-face-grin-stars[class][class][class]::before,.tc-toasts i.fa-face-grin-stars[class][class][class]::before{content:"\f587" !important}
.tc-app i.fa-face-grin-tears[class][class][class]::before,.tc-toasts i.fa-face-grin-tears[class][class][class]::before{content:"\f588" !important}
.tc-app i.fa-face-grin-wink[class][class][class]::before,.tc-toasts i.fa-face-grin-wink[class][class][class]::before{content:"\f58c" !important}
.tc-app i.fa-face-kiss-wink-heart[class][class][class]::before,.tc-toasts i.fa-face-kiss-wink-heart[class][class][class]::before{content:"\f598" !important}
.tc-app i.fa-face-laugh-squint[class][class][class]::before,.tc-toasts i.fa-face-laugh-squint[class][class][class]::before{content:"\f59b" !important}
.tc-app i.fa-face-meh[class][class][class]::before,.tc-toasts i.fa-face-meh[class][class][class]::before{content:"\f11a" !important}
.tc-app i.fa-face-rolling-eyes[class][class][class]::before,.tc-toasts i.fa-face-rolling-eyes[class][class][class]::before{content:"\f5a5" !important}
.tc-app i.fa-face-sad-cry[class][class][class]::before,.tc-toasts i.fa-face-sad-cry[class][class][class]::before{content:"\f5b3" !important}
.tc-app i.fa-face-sad-tear[class][class][class]::before,.tc-toasts i.fa-face-sad-tear[class][class][class]::before{content:"\f5b4" !important}
.tc-app i.fa-face-smile[class][class][class]::before,.tc-toasts i.fa-face-smile[class][class][class]::before{content:"\f118" !important}
.tc-app i.fa-face-surprise[class][class][class]::before,.tc-toasts i.fa-face-surprise[class][class][class]::before{content:"\f5c2" !important}
.tc-app i.fa-face-tired[class][class][class]::before,.tc-toasts i.fa-face-tired[class][class][class]::before{content:"\f5c8" !important}
.tc-app i.fa-file-export[class][class][class]::before,.tc-toasts i.fa-file-export[class][class][class]::before{content:"\f56e" !important}
.tc-app i.fa-file-lines[class][class][class]::before,.tc-toasts i.fa-file-lines[class][class][class]::before{content:"\f15c" !important}
.tc-app i.fa-fire[class][class][class]::before,.tc-toasts i.fa-fire[class][class][class]::before{content:"\f06d" !important}
.tc-app i.fa-flag[class][class][class]::before,.tc-toasts i.fa-flag[class][class][class]::before{content:"\f024" !important}
.tc-app i.fa-gear[class][class][class]::before,.tc-toasts i.fa-gear[class][class][class]::before{content:"\f013" !important}
.tc-app i.fa-gem[class][class][class]::before,.tc-toasts i.fa-gem[class][class][class]::before{content:"\f3a5" !important}
.tc-app i.fa-gift[class][class][class]::before,.tc-toasts i.fa-gift[class][class][class]::before{content:"\f06b" !important}
.tc-app i.fa-hand[class][class][class]::before,.tc-toasts i.fa-hand[class][class][class]::before{content:"\f256" !important}
.tc-app i.fa-hand-fist[class][class][class]::before,.tc-toasts i.fa-hand-fist[class][class][class]::before{content:"\f6de" !important}
.tc-app i.fa-hand-holding-heart[class][class][class]::before,.tc-toasts i.fa-hand-holding-heart[class][class][class]::before{content:"\f4be" !important}
.tc-app i.fa-hand-peace[class][class][class]::before,.tc-toasts i.fa-hand-peace[class][class][class]::before{content:"\f25b" !important}
.tc-app i.fa-hand-point-right[class][class][class]::before,.tc-toasts i.fa-hand-point-right[class][class][class]::before{content:"\f0a4" !important}
.tc-app i.fa-hands-clapping[class][class][class]::before,.tc-toasts i.fa-hands-clapping[class][class][class]::before{content:"\e1a8" !important}
.tc-app i.fa-hands-praying[class][class][class]::before,.tc-toasts i.fa-hands-praying[class][class][class]::before{content:"\f684" !important}
.tc-app i.fa-handshake[class][class][class]::before,.tc-toasts i.fa-handshake[class][class][class]::before{content:"\f2b5" !important}
.tc-app i.fa-hard-drive[class][class][class]::before,.tc-toasts i.fa-hard-drive[class][class][class]::before{content:"\f0a0" !important}
.tc-app i.fa-heart[class][class][class]::before,.tc-toasts i.fa-heart[class][class][class]::before{content:"\f004" !important}
.tc-app i.fa-hourglass-half[class][class][class]::before,.tc-toasts i.fa-hourglass-half[class][class][class]::before{content:"\f252" !important}
.tc-app i.fa-id-badge[class][class][class]::before,.tc-toasts i.fa-id-badge[class][class][class]::before{content:"\f2c1" !important}
.tc-app i.fa-image[class][class][class]::before,.tc-toasts i.fa-image[class][class][class]::before{content:"\f03e" !important}
.tc-app i.fa-lightbulb[class][class][class]::before,.tc-toasts i.fa-lightbulb[class][class][class]::before{content:"\f0eb" !important}
.tc-app i.fa-link[class][class][class]::before,.tc-toasts i.fa-link[class][class][class]::before{content:"\f0c1" !important}
.tc-app i.fa-list-check[class][class][class]::before,.tc-toasts i.fa-list-check[class][class][class]::before{content:"\f0ae" !important}
.tc-app i.fa-location-dot[class][class][class]::before,.tc-toasts i.fa-location-dot[class][class][class]::before{content:"\f3c5" !important}
.tc-app i.fa-lock[class][class][class]::before,.tc-toasts i.fa-lock[class][class][class]::before{content:"\f023" !important}
.tc-app i.fa-magnifying-glass[class][class][class]::before,.tc-toasts i.fa-magnifying-glass[class][class][class]::before{content:"\f002" !important}
.tc-app i.fa-medal[class][class][class]::before,.tc-toasts i.fa-medal[class][class][class]::before{content:"\f5a2" !important}
.tc-app i.fa-message[class][class][class]::before,.tc-toasts i.fa-message[class][class][class]::before{content:"\f27a" !important}
.tc-app i.fa-microphone[class][class][class]::before,.tc-toasts i.fa-microphone[class][class][class]::before{content:"\f130" !important}
.tc-app i.fa-moon[class][class][class]::before,.tc-toasts i.fa-moon[class][class][class]::before{content:"\f186" !important}
.tc-app i.fa-mug-hot[class][class][class]::before,.tc-toasts i.fa-mug-hot[class][class][class]::before{content:"\f7b6" !important}
.tc-app i.fa-music[class][class][class]::before,.tc-toasts i.fa-music[class][class][class]::before{content:"\f001" !important}
.tc-app i.fa-palette[class][class][class]::before,.tc-toasts i.fa-palette[class][class][class]::before{content:"\f53f" !important}
.tc-app i.fa-paper-plane[class][class][class]::before,.tc-toasts i.fa-paper-plane[class][class][class]::before{content:"\f1d8" !important}
.tc-app i.fa-paperclip[class][class][class]::before,.tc-toasts i.fa-paperclip[class][class][class]::before{content:"\f0c6" !important}
.tc-app i.fa-pen[class][class][class]::before,.tc-toasts i.fa-pen[class][class][class]::before{content:"\f304" !important}
.tc-app i.fa-people-group[class][class][class]::before,.tc-toasts i.fa-people-group[class][class][class]::before{content:"\e533" !important}
.tc-app i.fa-phone[class][class][class]::before,.tc-toasts i.fa-phone[class][class][class]::before{content:"\f095" !important}
.tc-app i.fa-photo-film[class][class][class]::before,.tc-toasts i.fa-photo-film[class][class][class]::before{content:"\f87c" !important}
.tc-app i.fa-pizza-slice[class][class][class]::before,.tc-toasts i.fa-pizza-slice[class][class][class]::before{content:"\f818" !important}
.tc-app i.fa-play[class][class][class]::before,.tc-toasts i.fa-play[class][class][class]::before{content:"\f04b" !important}
.tc-app i.fa-plus[class][class][class]::before,.tc-toasts i.fa-plus[class][class][class]::before{content:"\+" !important}
.tc-app i.fa-ranking-star[class][class][class]::before,.tc-toasts i.fa-ranking-star[class][class][class]::before{content:"\e561" !important}
.tc-app i.fa-reply[class][class][class]::before,.tc-toasts i.fa-reply[class][class][class]::before{content:"\f3e5" !important}
.tc-app i.fa-right-from-bracket[class][class][class]::before,.tc-toasts i.fa-right-from-bracket[class][class][class]::before{content:"\f2f5" !important}
.tc-app i.fa-rocket[class][class][class]::before,.tc-toasts i.fa-rocket[class][class][class]::before{content:"\f135" !important}
.tc-app i.fa-rotate[class][class][class]::before,.tc-toasts i.fa-rotate[class][class][class]::before{content:"\f2f1" !important}
.tc-app i.fa-rotate-left[class][class][class]::before,.tc-toasts i.fa-rotate-left[class][class][class]::before{content:"\f2ea" !important}
.tc-app i.fa-sack-dollar[class][class][class]::before,.tc-toasts i.fa-sack-dollar[class][class][class]::before{content:"\f81d" !important}
.tc-app i.fa-seedling[class][class][class]::before,.tc-toasts i.fa-seedling[class][class][class]::before{content:"\f4d8" !important}
.tc-app i.fa-share[class][class][class]::before,.tc-toasts i.fa-share[class][class][class]::before{content:"\f064" !important}
.tc-app i.fa-shield-heart[class][class][class]::before,.tc-toasts i.fa-shield-heart[class][class][class]::before{content:"\e574" !important}
.tc-app i.fa-spinner[class][class][class]::before,.tc-toasts i.fa-spinner[class][class][class]::before{content:"\f110" !important}
.tc-app i.fa-star[class][class][class]::before,.tc-toasts i.fa-star[class][class][class]::before{content:"\f005" !important}
.tc-app i.fa-star-half-stroke[class][class][class]::before,.tc-toasts i.fa-star-half-stroke[class][class][class]::before{content:"\f5c0" !important}
.tc-app i.fa-stop[class][class][class]::before,.tc-toasts i.fa-stop[class][class][class]::before{content:"\f04d" !important}
.tc-app i.fa-sun[class][class][class]::before,.tc-toasts i.fa-sun[class][class][class]::before{content:"\f185" !important}
.tc-app i.fa-thumbs-down[class][class][class]::before,.tc-toasts i.fa-thumbs-down[class][class][class]::before{content:"\f165" !important}
.tc-app i.fa-thumbs-up[class][class][class]::before,.tc-toasts i.fa-thumbs-up[class][class][class]::before{content:"\f164" !important}
.tc-app i.fa-thumbtack[class][class][class]::before,.tc-toasts i.fa-thumbtack[class][class][class]::before{content:"\f08d" !important}
.tc-app i.fa-trash[class][class][class]::before,.tc-toasts i.fa-trash[class][class][class]::before{content:"\f1f8" !important}
.tc-app i.fa-triangle-exclamation[class][class][class]::before,.tc-toasts i.fa-triangle-exclamation[class][class][class]::before{content:"\f071" !important}
.tc-app i.fa-trophy[class][class][class]::before,.tc-toasts i.fa-trophy[class][class][class]::before{content:"\f091" !important}
.tc-app i.fa-up-right-from-square[class][class][class]::before,.tc-toasts i.fa-up-right-from-square[class][class][class]::before{content:"\f35d" !important}
.tc-app i.fa-user-minus[class][class][class]::before,.tc-toasts i.fa-user-minus[class][class][class]::before{content:"\f503" !important}
.tc-app i.fa-user-plus[class][class][class]::before,.tc-toasts i.fa-user-plus[class][class][class]::before{content:"\f234" !important}
.tc-app i.fa-user-shield[class][class][class]::before,.tc-toasts i.fa-user-shield[class][class][class]::before{content:"\f505" !important}
.tc-app i.fa-users[class][class][class]::before,.tc-toasts i.fa-users[class][class][class]::before{content:"\f0c0" !important}
.tc-app i.fa-wand-magic-sparkles[class][class][class]::before,.tc-toasts i.fa-wand-magic-sparkles[class][class][class]::before{content:"\e2ca" !important}
.tc-app i.fa-xmark[class][class][class]::before,.tc-toasts i.fa-xmark[class][class][class]::before{content:"\f00d" !important}
.tc-pop.attachmenu>button>i.tc-circ{width:34px;height:34px;min-width:34px;flex:0 0 34px;border-radius:50%;font-size:14px}
.tc-pop.attachmenu>button>i.tc-circ>i{width:auto;margin:0}

/* ===== v3.1 fixes: dropdown arrow tiling + invisible primary row buttons ===== */
/* Several rules used the `background` shorthand on <select>, which reset the arrow's no-repeat/position and tiled it across the text ("vvvv"). One explicit rule wins for every dropdown. */
:is(#admin-portal-modal,#admin-dynamic-modal,.tc-app) select:not([multiple]):not([size]),
:is(#admin-portal-modal,#admin-dynamic-modal) select.admin-form-select:not([multiple]){
  -webkit-appearance:none !important;appearance:none !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;background-position:right 12px center !important;background-size:14px 14px !important;
  padding-right:38px !important;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;cursor:pointer;
}
.dark :is(#admin-portal-modal,#admin-dynamic-modal,.tc-app) select:not([multiple]):not([size]),
.dark :is(#admin-portal-modal,#admin-dynamic-modal) select.admin-form-select:not([multiple]){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}
:is(#admin-portal-modal,#admin-dynamic-modal) select option{color:#0f172a;background:#fff}
.dark :is(#admin-portal-modal,#admin-dynamic-modal) select option{color:#f1f5f9;background:#0c1225}
/* primary action buttons inside tables: solid brand fill with white text (was blue text on a blue fill) */
.admin-data-table .btn-primary.btn-xs,
#admin-portal-modal .admin-data-table .btn-primary.btn-xs{
  background-color:transparent !important;background-image:linear-gradient(135deg,#1a73e8,#7c3aed) !important;
  color:#fff !important;border-color:transparent !important;box-shadow:0 6px 14px -8px rgba(76,70,235,.7) !important;
}
.admin-data-table .btn-primary.btn-xs :is(i,span,svg){color:#fff !important}
.admin-data-table .btn-primary.btn-xs:hover{filter:brightness(1.08);transform:translateY(-1px)}