/* ==========================================================================
   EduEvent Connect - Master Stylesheet
   Version: 3.7.2 (Professional institution app interface)
   ========================================================================== */

/* 1. ROOT VARIABLES & THEME CONFIGURATION
   -------------------------------------------------------------------------- */
:root {
    /* Brand Colors */
    --ee-primary: #4f46e5;       /* Indigo 600 */
    --ee-primary-hover: #4338ca; /* Indigo 700 */
    --ee-primary-light: #e0e7ff; /* Indigo 100 */
    
    /* Functional Colors */
    --ee-success: #10b981;       /* Emerald */
    --ee-success-bg: #ecfdf5;
    --ee-warning: #f59e0b;       /* Amber */
    --ee-warning-bg: #fffbeb;
    --ee-danger: #ef4444;        /* Red */
    --ee-danger-bg: #fef2f2;
    --ee-info: #3b82f6;          /* Blue */
    --ee-info-bg: #eff6ff;
    
    /* Neutrals */
    --ee-bg-app: #f3f4f6;        /* Page Background */
    --ee-bg-card: #ffffff;       /* Card Background */
    --ee-bg-input: #f9fafb;      /* Inputs */
    --ee-text-main: #111827;     /* Headings */
    --ee-text-body: #374151;     /* Body */
    --ee-text-muted: #6b7280;    /* Meta */
    --ee-border: #e5e7eb;        /* Borders */

    /* UI Measurements */
    --ee-radius: 8px;
    --ee-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --ee-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --ee-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --ee-font-stack: 'Roboto', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --ee-transition: all 0.2s ease-in-out;
}

/* 2. GLOBAL RESET & BASE STYLES
   -------------------------------------------------------------------------- */
.ee-wrapper, .ee-public-wrapper {
    font-family: var(--ee-font-stack);
    color: var(--ee-text-body);
    background-color: var(--ee-bg-app);
    font-size: 15px;
    line-height: 1.6;
    box-sizing: border-box;
    padding: 20px;
}

.ee-wrapper *, .ee-public-wrapper * { box-sizing: border-box; }

.ee-wrapper a, .ee-public-wrapper a { text-decoration: none; color: var(--ee-primary); transition: var(--ee-transition); }
.ee-wrapper a:hover, .ee-public-wrapper a:hover { color: var(--ee-primary-hover); }

/* 3. LAYOUT UTILITIES
   -------------------------------------------------------------------------- */
.ee-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.ee-grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; }
.ee-grid-2-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

.ee-flex-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ee-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; flex-wrap: wrap; gap: 15px; }

.ee-mb { margin-bottom: 16px !important; }
.ee-mb-sm { margin-bottom: 8px !important; }
.ee-mt { margin-top: 16px !important; }
.ee-text-center { text-align: center; }

/* 4. COMPONENT: CARDS & BUTTONS
   -------------------------------------------------------------------------- */
.ee-card {
    background: var(--ee-bg-card);
    border-radius: var(--ee-radius);
    padding: 24px;
    border: 1px solid var(--ee-border);
    box-shadow: var(--ee-shadow-sm);
    position: relative;
    margin-bottom: 20px;
    transition: var(--ee-transition);
}
.ee-card:hover { box-shadow: var(--ee-shadow-md); }

/* Overflow fix for mobile tables inside cards */
@media (max-width: 900px) { 
    .ee-card[style*="overflow:hidden"] { overflow-x: auto !important; } 
}

.ee-card-title {
    display: block; font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--ee-text-muted);
    border-bottom: 1px solid var(--ee-border);
    padding-bottom: 12px; margin: -4px 0 20px 0;
}
.ee-card-title.no-border { border: none; padding: 0; margin: 0 0 15px 0; font-size: 18px; text-transform: none; color: var(--ee-text-main); }

.ee-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 20px; font-size: 14px; font-weight: 500;
    border-radius: var(--ee-radius); border: 1px solid transparent;
    cursor: pointer; transition: var(--ee-transition); gap: 8px; line-height: 1.2;
}
.ee-btn:active { transform: translateY(1px); }

/* Button Variants */
.ee-btn-primary { background: var(--ee-primary); color: #fff; box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2); }
.ee-btn-primary:hover { background: var(--ee-primary-hover); color: #fff; }

.ee-btn-white { background: #fff; border-color: var(--ee-border); color: var(--ee-text-body); }
.ee-btn-white:hover { background: var(--ee-bg-app); border-color: #d1d5db; color: var(--ee-text-main); }

.ee-btn-danger { background: var(--ee-danger); color: #fff; }
.ee-btn-danger:hover { background: #dc2626; color: #fff; }

.ee-btn-success { background: var(--ee-success); color: #fff; }
.ee-btn-success:hover { background: #059669; color: #fff; }

.ee-btn-block { width: 100%; display: flex; }
.ee-btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 6px; }
.ee-btn-xs { padding: 4px 8px; font-size: 11px; border-radius: 4px; }

/* Icon Button (Standard) */
.ee-btn-icon { 
    width: 36px; height: 36px; padding: 0; border-radius: 50%; 
    display: inline-flex; align-items: center; justify-content: center; 
    border: 1px solid var(--ee-border); background: white; 
    cursor: pointer; color: var(--ee-text-muted); transition: 0.2s;
}
.ee-btn-icon:hover { 
    color: var(--ee-text-main); border-color: var(--ee-text-muted); 
}

/* Danger Icon Button (Red Trash Can) */
.ee-btn-icon-danger {
    width: 36px; height: 36px; padding: 0; border-radius: 50%; 
    display: inline-flex; align-items: center; justify-content: center; 
    border: 1px solid var(--ee-border); background: white; 
    cursor: pointer; color: var(--ee-danger); transition: 0.2s;
}
.ee-btn-icon-danger:hover { 
    color: #fff; 
    border-color: var(--ee-danger); 
    background: var(--ee-danger); 
}

/* --- NEW: Chat Bubble & Unread Badge Styles --- */
.ee-chat-bubble {
    max-width: 70%;
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: 18px;
    clear: both;
    word-wrap: break-word;
}
.ee-chat-bubble.me {
    float: right;
    background: #dcf8c6;
    align-self: flex-end;
}
.ee-chat-bubble.them {
    float: left;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    align-self: flex-start;
}
.ee-chat-sender {
    font-size: 11px;
    font-weight: bold;
    margin-bottom: 2px;
    color: #4b5563;
}
.ee-chat-time {
    font-size: 9px;
    color: #6b7280;
    text-align: right;
    margin-top: 4px;
}
.ee-chat-unread-badge {
    background: #dc2626;
    color: #fff;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 10px;
    margin-left: 4px;
    position: relative;
    top: -8px;
}
#chatMessages {
    display: flex;
    flex-direction: column;
    background: #f0f2f5;
}
/* ------------------------------------------------- */

/* 5. FORMS & INPUTS
   -------------------------------------------------------------------------- */
.ee-form-group { margin-bottom: 20px; }
.ee-form-group label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: var(--ee-text-main); }

.ee-form-control {
    width: 100%; padding: 10px 14px;
    background: var(--ee-bg-input); border: 1px solid var(--ee-border);
    border-radius: var(--ee-radius); font-size: 14px;
    color: var(--ee-text-main); transition: var(--ee-transition);
}
.ee-form-control:focus { outline: none; border-color: var(--ee-primary); background: #fff; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); }
textarea.ee-form-control { min-height: 100px; resize: vertical; }

.ee-input-group {
    display: flex; gap: 10px; align-items: center;
    background: var(--ee-bg-app); padding: 10px;
    border: 1px solid var(--ee-border); border-radius: var(--ee-radius); margin-bottom: 10px;
}

/* 6. TABLES & STATUS
   -------------------------------------------------------------------------- */
.ee-table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--ee-radius); border: 1px solid var(--ee-border); }
.ee-table { width: 100%; border-collapse: collapse; min-width: 700px; background: #fff; }
.ee-table th { text-align: left; padding: 14px 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--ee-text-muted); background: var(--ee-bg-app); border-bottom: 2px solid var(--ee-border); white-space: nowrap; }
.ee-table td { padding: 14px 20px; border-bottom: 1px solid var(--ee-border); font-size: 14px; vertical-align: middle; color: var(--ee-text-body); }
.ee-table tbody tr:hover { background-color: var(--ee-bg-input); }

.ee-avatar-initials { width: 36px; height: 36px; background: var(--ee-primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.ee-clickable-name { color: var(--ee-primary); cursor: pointer; font-weight: 500; }

.ee-badge { padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; display: inline-flex; align-items: center; }
.ee-badge-verified, .ee-badge-accepted, .ee-badge-present { background: var(--ee-success-bg); color: var(--ee-success); }
.ee-badge-pending { background: var(--ee-warning-bg); color: var(--ee-warning); border: 1px solid rgba(245, 158, 11, 0.2); }
.ee-badge-rejected { background: var(--ee-danger-bg); color: var(--ee-danger); }
.ee-badge-rejected_reupload { background: var(--ee-danger-bg); color: #b91c1c; border: 1px dashed var(--ee-danger); }
.ee-badge-not_submitted, .ee-badge-neutral { background: var(--ee-bg-app); color: var(--ee-text-muted); }

.ee-status-mini-select {
    padding: 6px 24px 6px 10px; font-size: 12px; font-weight: 600; border-radius: 6px; border: 1px solid transparent; cursor: pointer;
    background-color: var(--ee-bg-app); color: var(--ee-text-body); appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236b7280%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat; background-position: right 8px center; background-size: 8px auto;
}
.ee-status-mini-select:hover { border-color: var(--ee-border); }
.ee-status-mini-select.status-verified { background-color: var(--ee-success-bg); color: #065f46; }
.ee-status-mini-select.status-rejected { background-color: var(--ee-danger-bg); color: #991b1b; }
.ee-status-mini-select.status-pending { background-color: var(--ee-warning-bg); color: #92400e; }

/* 7. PUBLIC DASHBOARD & SIDEBAR (MOBILE READY)
   -------------------------------------------------------------------------- */
.ee-public-wrapper { display: flex; gap: 30px; align-items: start; max-width: 1200px; margin: 0 auto; min-height: 80vh; }

.ee-public-sidebar {
    width: 280px; flex-shrink: 0; background: var(--ee-bg-card); border-radius: var(--ee-radius);
    border: 1px solid var(--ee-border); position: sticky; top: 30px; z-index: 100;
    display: flex; flex-direction: column;
}

.ee-sidebar-header {
    padding: 24px; text-align: center; border-bottom: 1px solid var(--ee-border);
    background: linear-gradient(to bottom, var(--ee-bg-app), #fff); border-radius: var(--ee-radius) var(--ee-radius) 0 0;
}
.ee-user-avatar { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: var(--ee-shadow-md); margin-bottom: 12px; }
.ee-user-name { font-weight: 700; font-size: 16px; color: var(--ee-text-main); }
.ee-user-email { font-size: 13px; color: var(--ee-text-muted); }

.ee-nav-menu { padding: 15px; display: flex; flex-direction: column; gap: 4px; }
.ee-nav-item {
    padding: 12px 16px; border-radius: var(--ee-radius); color: var(--ee-text-body); font-weight: 500; font-size: 14px;
    display: flex; align-items: center; gap: 12px;
}
.ee-nav-item i { width: 20px; text-align: center; color: var(--ee-text-muted); transition: 0.2s; }
.ee-nav-item:hover, .ee-nav-item.active { background: var(--ee-primary-light); color: var(--ee-primary); }
.ee-nav-item:hover i, .ee-nav-item.active i { color: var(--ee-primary); }

.ee-public-content { flex: 1; min-width: 0; }
.ee-mobile-nav-toggle { display: none; }
.ee-close-sidebar { display: none; }

/* Mobile Logic */
@media (max-width: 991px) {
    .ee-public-wrapper { display: block; padding: 10px; }
    .ee-grid-2 { grid-template-columns: 1fr; }
    
    .ee-mobile-nav-toggle {
        display: flex; align-items: center; justify-content: space-between;
        background: var(--ee-bg-card); padding: 15px 20px; margin-bottom: 20px;
        border-radius: var(--ee-radius); border: 1px solid var(--ee-border);
        box-shadow: var(--ee-shadow-sm); cursor: pointer; font-weight: 600; color: var(--ee-primary);
    }
    .ee-public-sidebar {
        position: fixed; top: 0; left: 0; width: 280px; height: 100vh; z-index: 9999;
        border-radius: 0; border: none; transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 15px rgba(0,0,0,0.1); overflow-y: auto;
    }
    .ee-public-sidebar.active { transform: translateX(0); }
    .ee-close-sidebar {
        display: block; position: absolute; top: 15px; right: 15px;
        font-size: 24px; color: var(--ee-text-muted); cursor: pointer;
        width: 32px; height: 32px; text-align: center; line-height: 32px; background: rgba(255,255,255,0.8); border-radius: 50%;
    }
    .ee-sidebar-backdrop {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.5); z-index: 9998; display: none; backdrop-filter: blur(2px);
    }
    .ee-public-sidebar.active + .ee-sidebar-backdrop, .ee-sidebar-backdrop.active { display: block; }
}

/* 8. STUDENT DASHBOARD MODULES
   -------------------------------------------------------------------------- */
.ee-event-list-card {
    display: flex; background: var(--ee-bg-card); border: 1px solid var(--ee-border);
    border-radius: var(--ee-radius); overflow: hidden; margin-bottom: 20px; transition: var(--ee-transition);
}
.ee-event-list-card:hover { transform: translateY(-2px); box-shadow: var(--ee-shadow-md); border-color: var(--ee-primary-light); }
.ee-event-thumb { width: 120px; background-color: var(--ee-bg-input); background-size: cover; background-position: center; flex-shrink: 0; }
.ee-event-info { padding: 20px; flex: 1; }
@media (max-width: 600px) {
    .ee-event-list-card { flex-direction: column; }
    .ee-event-thumb { width: 100%; height: 140px; }
}

.ee-connect-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; margin-bottom: 25px; }
.ee-connect-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 15px; background: #fff; border: 1px solid var(--ee-border); border-radius: var(--ee-radius);
    text-align: center; color: var(--ee-text-main); font-weight: 500; font-size: 13px; transition: var(--ee-transition);
}
.ee-connect-btn:hover { transform: translateY(-3px); box-shadow: var(--ee-shadow-md); }
.ee-connect-btn.whatsapp i { color: #25D366; font-size: 24px; }
.ee-connect-btn.meet i { color: #00897B; font-size: 24px; }
.ee-connect-btn.map i { color: #EA4335; font-size: 24px; }
.ee-connect-btn.web i { color: var(--ee-primary); font-size: 24px; }

/* Timeline */
.ee-timeline { position: relative; margin: 10px 0; }
.ee-timeline-item { display: flex; gap: 20px; position: relative; padding-bottom: 30px; }
.ee-timeline-item::before { content: ''; position: absolute; top: 20px; left: 20px; width: 2px; height: 100%; background: var(--ee-border); z-index: 0; }
.ee-timeline-item:last-child { padding-bottom: 0; }
.ee-timeline-item:last-child::before { display: none; }
.ee-timeline-icon {
    width: 42px; height: 42px; border-radius: 50%; background: #fff;
    border: 2px solid var(--ee-border); color: var(--ee-text-muted);
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 1; flex-shrink: 0; font-size: 16px;
    box-shadow: 0 0 0 4px var(--ee-bg-app);
}
.ee-timeline-content { flex: 1; background: var(--ee-bg-card); border: 1px solid var(--ee-border); padding: 16px; border-radius: var(--ee-radius); position: relative; }
.status-green .ee-timeline-icon { border-color: var(--ee-success); color: var(--ee-success); background: var(--ee-success-bg); }
.status-orange .ee-timeline-icon { border-color: var(--ee-warning); color: var(--ee-warning); background: var(--ee-warning-bg); }
.status-red .ee-timeline-icon { border-color: var(--ee-danger); color: var(--ee-danger); background: var(--ee-danger-bg); }
.status-blue .ee-timeline-icon { border-color: var(--ee-primary); color: var(--ee-primary); background: var(--ee-primary-light); }

/* Material List */
.ee-material-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px; background: #fff; border: 1px solid var(--ee-border);
    border-radius: var(--ee-radius); margin-bottom: 10px;
}
.ee-material-icon { font-size: 24px; color: var(--ee-primary); margin-right: 15px; }
.ee-material-meta { font-size: 12px; color: var(--ee-text-muted); }

/* --- NEW: COUPON STYLES --- */
.ee-coupon-ticket {
    display: flex; align-items: center; 
    background: #fff; border: 1px dashed var(--ee-primary);
    border-radius: 8px; margin-bottom: 10px; overflow: hidden;
    transition: var(--ee-transition);
}
.ee-coupon-ticket:hover { transform: translateY(-2px); box-shadow: var(--ee-shadow-sm); }
.coupon-icon {
    width: 50px; height: 60px; background: var(--ee-primary-light);
    color: var(--ee-primary); display: flex; align-items: center; justify-content: center;
    font-size: 20px;
}
.coupon-info { flex: 1; padding: 0 15px; font-size: 14px; }
.coupon-qr { 
    width: 50px; height: 60px; background: #222; color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.coupon-qr:hover { background: #000; }

/* 9. ADMIN MODULES
   -------------------------------------------------------------------------- */
.ee-tabs-container { border-bottom: 1px solid var(--ee-border); margin-bottom: 25px; overflow-x: auto; }
.ee-tabs { display: flex; gap: 5px; min-width: max-content; }
.ee-tab-item {
    padding: 12px 20px; text-decoration: none; color: var(--ee-text-muted); font-weight: 600; font-size: 14px;
    border-bottom: 2px solid transparent; transition: var(--ee-transition);
}
.ee-tab-item:hover, .ee-tab-item.active { color: var(--ee-primary); border-bottom-color: var(--ee-primary); }
.ee-tab-item.active { background: var(--ee-primary-light); }

/* Analytics */
.ee-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.ee-stat-card {
    background: #fff; padding: 25px; border-radius: var(--ee-radius);
    border: 1px solid var(--ee-border); display: flex; justify-content: space-between; align-items: center;
}
.ee-stat-info h3 { margin: 0; font-size: 28px; font-weight: 800; color: var(--ee-text-main); }
.ee-stat-info span { font-size: 13px; text-transform: uppercase; color: var(--ee-text-muted); font-weight: 600; }
.ee-stat-card .ee-icon { font-size: 40px; opacity: 0.2; }
.ee-stat-card.blue .ee-icon { color: var(--ee-info); }
.ee-stat-card.green .ee-icon { color: var(--ee-success); }
.ee-stat-card.orange .ee-icon { color: var(--ee-warning); }

/* Chart Logic */
.ee-chart-container { 
    height: 300px; width: 100%; display: flex; align-items: flex-end; justify-content: space-around; 
    padding: 20px 0 40px 0; border-bottom: 1px solid var(--ee-border);
}
.ee-chart-bar-group { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; flex: 1; max-width: 80px; }
.ee-chart-bar { width: 40px; background: var(--ee-primary); border-radius: 4px 4px 0 0; position: relative; transition: height 0.5s ease; min-height: 2px; }
.ee-chart-bar:hover { background: var(--ee-primary-hover); }
.ee-bar-value { position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-weight: bold; font-size: 12px; color: var(--ee-text-main); }
.ee-chart-label { margin-top: 10px; font-size: 11px; color: var(--ee-text-muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }

/* Profile Editor */
.ee-profile-form-card { max-width: 600px; margin: 0 auto; }
.ee-avatar-edit { position: relative; width: 100px; height: 100px; margin: 0 auto 20px; }
.ee-avatar-edit img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--ee-border); }
.ee-avatar-edit-btn {
    position: absolute; bottom: 0; right: 0; background: var(--ee-primary); color: white; border-radius: 50%;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 2px solid white;
}

/* 10. MODALS & ALERTS
   -------------------------------------------------------------------------- */
.ee-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px);
    z-index: 10000; display: none; align-items: center; justify-content: center; padding: 20px;
}
.ee-modal-content {
    background: #fff; width: 100%; max-width: 650px; border-radius: 12px; padding: 30px;
    position: relative; max-height: 90vh; overflow-y: auto; box-shadow: var(--ee-shadow-lg);
    animation: eeModalSlide 0.3s ease-out;
}
@keyframes eeModalSlide { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.ee-modal-close { position: absolute; top: 15px; right: 20px; font-size: 28px; color: var(--ee-text-muted); cursor: pointer; transition: 0.2s; }
.ee-modal-close:hover { color: var(--ee-danger); }

.ee-alert { padding: 15px; border-radius: var(--ee-radius); margin-bottom: 20px; font-size: 14px; border: 1px solid transparent; }
.ee-alert-info { background: var(--ee-info-bg); color: #1e40af; border-color: #bfdbfe; }
.ee-alert-success { background: var(--ee-success-bg); color: #065f46; border-color: #a7f3d0; }
.ee-alert-error { background: var(--ee-danger-bg); color: #991b1b; border-color: #fecaca; }

/* 11. ID CARD DESIGNER & GENERATOR (15 TEMPLATES)
   -------------------------------------------------------------------------- */

/* BASE STRUCTURE (Crucial for html2canvas) */
.ee-id-card {
    width: 340px; height: 540px; background: #ffffff; overflow: hidden; position: relative;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    box-sizing: border-box; font-family: 'Roboto', sans-serif; border: 1px solid #e5e7eb;
}
.tpl-header { width: 100%; display: flex; align-items: center; justify-content: center; text-transform: uppercase; font-weight: 700; line-height: 1.2; padding: 10px; }
.tpl-body { flex: 1; width: 100%; padding: 15px 20px; display: flex; flex-direction: column; align-items: center; position: relative; }
.tpl-avatar { object-fit: cover; z-index: 10; background: #f3f4f6; }
.tpl-name { font-weight: 800; color: var(--ee-text-main); margin-bottom: 5px; line-height: 1.3; }
.tpl-meta { width: 100%; margin-top: 10px; text-align: left; font-size: 13px; color: var(--ee-text-body); }
.tpl-meta-row { border-bottom: 1px solid #f3f4f6; padding: 6px 0; display: flex; }
.tpl-meta-row strong { width: 95px; flex-shrink: 0; color: var(--ee-text-muted); }
.tpl-qr { margin-top: auto; margin-bottom: 15px; }
.tpl-qr img { width: 100px; height: 100px; display: block; }

/* TEMPLATES (1-15) */
.ee-id-tpl-1 .tpl-header { height: 110px; background: var(--ee-primary); color: white; font-size: 18px; }
.ee-id-tpl-1 .tpl-avatar { width: 130px; height: 130px; border-radius: 50%; border: 5px solid #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); margin-top: -65px; margin-bottom: 15px; }
.ee-id-tpl-1 .tpl-name { font-size: 22px; }

.ee-id-tpl-2 .tpl-header { height: 140px; background: #059669; color: white; font-size: 20px; clip-path: ellipse(80% 80% at 50% 20%); align-items: flex-start; padding-top: 25px; }
.ee-id-tpl-2 .tpl-avatar { width: 120px; height: 120px; border-radius: 50%; border: 4px solid #fff; margin-top: -60px; margin-bottom: 20px; }
.ee-id-tpl-2 .tpl-name { color: #065f46; font-size: 24px; text-transform: uppercase; }

.ee-id-tpl-3 { background: #111827; border: 4px solid #d97706; }
.ee-id-tpl-3 .tpl-header { height: 100px; background: #d97706; color: #111827; font-size: 18px; letter-spacing: 1px; }
.ee-id-tpl-3 .tpl-avatar { width: 130px; height: 130px; border-radius: 8px; border: 2px solid #d97706; margin-top: -50px; margin-bottom: 15px; }
.ee-id-tpl-3 .tpl-name { color: #f3f4f6; font-size: 22px; }
.ee-id-tpl-3 .tpl-meta-row { border-color: #374151; color: #d1d5db; }
.ee-id-tpl-3 .tpl-meta-row strong { color: #d97706; }
.ee-id-tpl-3 .tpl-qr { background: white; padding: 5px; border-radius: 4px; }

.ee-id-tpl-4 .tpl-header { height: 80px; background: #dc2626; color: white; font-size: 16px; }
.ee-id-tpl-4 .tpl-avatar { width: 140px; height: 140px; border-radius: 12px; border: 4px solid #fff; margin-top: 20px; margin-bottom: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.ee-id-tpl-4 .tpl-name { font-size: 24px; color: #dc2626; border-bottom: 2px solid #dc2626; padding-bottom: 5px; display: inline-block; margin-bottom: 15px; }

.ee-id-tpl-5 { border: 10px solid #4f46e5; }
.ee-id-tpl-5 .tpl-header { background: white; color: #4f46e5; height: 80px; border-bottom: 1px solid #eee; font-size: 20px; }
.ee-id-tpl-5 .tpl-avatar { width: 120px; height: 120px; border-radius: 50%; margin: 20px 0; border: 1px solid #ddd; }
.ee-id-tpl-5 .tpl-name { font-weight: 300; font-size: 26px; color: #000; }

.ee-id-tpl-6 .tpl-header { height: 50px; background: #2563eb; color: white; }
.ee-id-tpl-6 .tpl-body { background: linear-gradient(to bottom, #eff6ff 0%, #ffffff 100%); }
.ee-id-tpl-6 .tpl-avatar { width: 110px; height: 110px; border-radius: 0; border: 3px solid #2563eb; margin: 20px 0; }
.ee-id-tpl-6 .tpl-name { font-family: 'Courier New', monospace; font-weight: 700; }

.ee-id-tpl-7 .tpl-header { height: 120px; background: linear-gradient(135deg, #6366f1, #a855f7); color: white; clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); }
.ee-id-tpl-7 .tpl-avatar { width: 120px; height: 120px; border-radius: 50%; border: 4px solid #fff; margin-top: -60px; margin-bottom: 15px; }
.ee-id-tpl-7 .tpl-name { color: #7c3aed; }

.ee-id-tpl-8 { border-top: 20px solid #f97316; }
.ee-id-tpl-8 .tpl-header { background: #fff; color: #f97316; height: 60px; border-bottom: 2px solid #f97316; font-size: 20px; }
.ee-id-tpl-8 .tpl-avatar { width: 140px; height: 140px; border-radius: 8px; margin: 20px 0; border: 1px solid #ccc; }
.ee-id-tpl-8 .tpl-name { text-transform: uppercase; letter-spacing: 2px; font-size: 20px; }

.ee-id-tpl-9 .tpl-header { height: 150px; background: #0d9488; color: white; clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); align-items: flex-start; padding-top: 20px; }
.ee-id-tpl-9 .tpl-avatar { width: 110px; height: 110px; border-radius: 50%; border: 4px solid #ccfbf1; margin-top: -70px; margin-bottom: 10px; }
.ee-id-tpl-9 .tpl-name { color: #0f766e; font-size: 24px; }

.ee-id-tpl-10 .tpl-header { background: #000; color: #fff; height: 90px; }
.ee-id-tpl-10 .tpl-avatar { width: 100px; height: 120px; border-radius: 4px; border: 2px solid #000; margin-top: -40px; background: #fff; }
.ee-id-tpl-10 .tpl-name { margin-top: 10px; font-family: sans-serif; text-transform: uppercase; border-bottom: 1px solid #000; padding-bottom: 5px; display: block; width: 100%; }

.ee-id-tpl-11 .tpl-header { height: 100px; background: #ec4899; color: white; border-bottom-left-radius: 50% 20px; border-bottom-right-radius: 50% 20px; }
.ee-id-tpl-11 .tpl-avatar { width: 130px; height: 130px; border-radius: 50%; border: 6px solid #fbcfe8; margin-top: -65px; background: white; }
.ee-id-tpl-11 .tpl-name { color: #be185d; }

.ee-id-tpl-12 { background: linear-gradient(to bottom, #1e40af 50%, #ffffff 50%); }
.ee-id-tpl-12 .tpl-header { background: transparent; color: white; height: 100px; align-items: flex-end; padding-bottom: 20px; }
.ee-id-tpl-12 .tpl-avatar { width: 140px; height: 140px; border-radius: 50%; border: 5px solid white; box-shadow: 0 5px 15px rgba(0,0,0,0.2); margin-top: 10px; }
.ee-id-tpl-12 .tpl-name { margin-top: 15px; color: #1e3a8a; }
.ee-id-tpl-12 .tpl-meta { background: rgba(255,255,255,0.9); padding: 10px; border-radius: 8px; }

.ee-id-tpl-13 .tpl-header { height: 40px; background: #475569; color: white; font-size: 12px; justify-content: flex-start; padding-left: 20px; }
.ee-id-tpl-13 .tpl-body { align-items: flex-start; text-align: left; }
.ee-id-tpl-13 .tpl-avatar { width: 100px; height: 100px; border-radius: 4px; position: absolute; right: 20px; top: 20px; border: 1px solid #94a3b8; }
.ee-id-tpl-13 .tpl-name { margin-top: 20px; width: 60%; font-size: 20px; line-height: 1.1; }
.ee-id-tpl-13 .tpl-meta { margin-top: 20px; }
.ee-id-tpl-13 .tpl-qr { position: absolute; right: 20px; bottom: 20px; }

.ee-id-tpl-14 { background: #fffbeb; border: 2px double #b45309; }
.ee-id-tpl-14 .tpl-header { height: 90px; background: transparent; color: #b45309; font-family: 'Georgia', serif; font-style: italic; font-size: 22px; border-bottom: 1px solid #fcd34d; }
.ee-id-tpl-14 .tpl-avatar { width: 120px; height: 120px; border-radius: 50%; border: 2px solid #b45309; margin-top: 20px; }
.ee-id-tpl-14 .tpl-name { font-family: 'Georgia', serif; color: #78350f; margin-top: 10px; }

.ee-id-tpl-15 { background: #000; color: #0f0; font-family: 'Courier New', monospace; border: 2px solid #0f0; }
.ee-id-tpl-15 .tpl-header { background: #111; color: #0f0; border-bottom: 1px dashed #0f0; }
.ee-id-tpl-15 .tpl-avatar { width: 120px; height: 120px; border-radius: 0; border: 2px solid #0f0; margin-top: 20px; filter: grayscale(100%); }
.ee-id-tpl-15 .tpl-name { color: #fff; margin-top: 15px; text-transform: uppercase; }
.ee-id-tpl-15 .tpl-meta-row { border-bottom: 1px dashed #333; }
.ee-id-tpl-15 .tpl-meta-row strong { color: #0f0; }
.ee-id-tpl-15 .tpl-qr { background: #fff; padding: 5px; }

/* --- ADMIN PREVIEW WRAPPER --- */
.ee-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px; }
.ee-id-preview-wrapper {
    width: 100%; padding-top: 158%; position: relative; background: #f3f4f6;
    border: 3px solid transparent; border-radius: 8px; cursor: pointer; overflow: hidden; transition: all 0.2s;
}
.ee-template-radio:checked + .ee-id-preview-wrapper { border-color: var(--ee-primary); box-shadow: 0 0 0 4px var(--ee-primary-light); }
.ee-id-preview-wrapper .ee-id-card {
    position: absolute; top: 0; left: 0; transform-origin: top left;
    transform: scale(0.47); border: none; box-shadow: none; pointer-events: none;
}
@media (min-width: 1200px) { .ee-id-preview-wrapper .ee-id-card { transform: scale(0.55); } }

/* Canvas Responsive Fix */
#cert_canvas { max-width: 100%; overflow: hidden; margin: 0 auto; box-shadow: 0 0 20px rgba(0,0,0,0.1); }

/* 12. UTILITY FIXES & PATCHES (ADDED)
   -------------------------------------------------------------------------- */
.ee-text-primary { color: var(--ee-primary); }
.ee-text-danger { color: var(--ee-danger); }

/* Modal Data List Styles */
.ee-data-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ee-data-item { font-size: 14px; border-bottom: 1px dashed var(--ee-border); padding-bottom: 4px; display: flex; }
.ee-data-item strong { color: var(--ee-text-muted); width: 140px; flex-shrink: 0; display: inline-block; }

.ee-info-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: #6b7280;
    color: white;
    border-radius: 50%;
    font-size: 12px;
    text-align: center;
    line-height: 16px;
    margin-left: 5px;
    cursor: help;
}
.ee-info-icon:hover {
    background: #4b5563;
}

/* ============================================================================
   EduEvent Connect 3.6.0 — participant workflow and mobile improvements
   Layered on top of the existing component styles to preserve legacy screens.
   ============================================================================ */
:root {
    --ee-primary: #3156d8;
    --ee-primary-hover: #2646bd;
    --ee-primary-light: #e9efff;
    --ee-success: #15966a;
    --ee-success-bg: #e9f8f1;
    --ee-warning: #b7791f;
    --ee-warning-bg: #fff6df;
    --ee-danger: #d64045;
    --ee-danger-bg: #fff0f0;
    --ee-info: #2563c7;
    --ee-info-bg: #edf5ff;
    --ee-bg-app: #f5f7fb;
    --ee-bg-card: #ffffff;
    --ee-bg-input: #fbfcfe;
    --ee-text-main: #172033;
    --ee-text-body: #3d485c;
    --ee-text-muted: #68758a;
    --ee-border: #e2e7f0;
    --ee-radius: 12px;
    --ee-shadow-sm: 0 2px 8px rgba(22, 34, 59, .045);
    --ee-shadow-md: 0 8px 24px rgba(22, 34, 59, .075);
    --ee-shadow-lg: 0 18px 48px rgba(22, 34, 59, .16);
    --ee-transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
}

.ee-wrapper,
.ee-public-wrapper {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: clamp(12px, 1.8vw, 24px);
    background: var(--ee-bg-app);
    color: var(--ee-text-body);
    font-family: var(--ee-font-stack);
    font-size: 13px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.ee-wrapper *,
.ee-public-wrapper *,
.ee-wrapper *::before,
.ee-wrapper *::after,
.ee-public-wrapper *::before,
.ee-public-wrapper *::after { box-sizing: border-box; }

.ee-wrapper a,
.ee-public-wrapper a { color: var(--ee-primary); text-decoration: none; transition: var(--ee-transition); }
.ee-wrapper a:hover,
.ee-public-wrapper a:hover { color: var(--ee-primary-hover); }
.ee-wrapper img,
.ee-public-wrapper img { max-width: 100%; height: auto; }
.ee-wrapper h1,
.ee-public-wrapper h1 { color: var(--ee-text-main); font-size: clamp(21px, 2vw, 25px); line-height: 1.25; font-weight: 750; letter-spacing: -.025em; }
.ee-wrapper h2,
.ee-public-wrapper h2 { color: var(--ee-text-main); font-size: clamp(18px, 1.7vw, 21px); line-height: 1.3; font-weight: 700; letter-spacing: -.015em; }
.ee-wrapper h3,
.ee-public-wrapper h3 { color: var(--ee-text-main); font-size: 16px; line-height: 1.35; font-weight: 700; }
.ee-wrapper h4,
.ee-public-wrapper h4 { color: var(--ee-text-main); font-size: 14px; line-height: 1.4; font-weight: 650; }
.ee-wrapper p,
.ee-public-wrapper p { line-height: 1.6; }

.ee-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.ee-grid-2 { grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr); gap: 18px; }
.ee-grid-2-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ee-flex-row { gap: 10px; }
.ee-header { align-items: center; gap: 12px 18px; margin-bottom: 18px; }
.ee-header > * { min-width: 0; }

.ee-card {
    min-width: 0;
    padding: clamp(14px, 1.6vw, 21px);
    margin-bottom: 16px;
    border: 1px solid var(--ee-border);
    border-radius: 13px;
    background: var(--ee-bg-card);
    box-shadow: var(--ee-shadow-sm);
    transition: var(--ee-transition);
}
.ee-card:hover { box-shadow: var(--ee-shadow-md); }
.ee-card-title { margin: 0 0 14px; padding-bottom: 10px; color: var(--ee-text-muted); font-size: 11px; font-weight: 750; letter-spacing: .075em; line-height: 1.4; }
.ee-card-title.no-border { margin: 0 0 12px; padding: 0; color: var(--ee-text-main); font-size: 16px; font-weight: 700; letter-spacing: -.01em; }

.ee-btn {
    min-height: 36px;
    padding: 8px 13px;
    gap: 7px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
}
.ee-btn-primary { background: var(--ee-primary); border-color: var(--ee-primary); box-shadow: 0 2px 5px rgba(49, 86, 216, .16); color: #fff !important; }
.ee-btn-primary:hover { background: var(--ee-primary-hover); border-color: var(--ee-primary-hover); color: #fff !important; }
.ee-btn-white { background: #fff; border-color: var(--ee-border); color: var(--ee-text-body) !important; }
.ee-btn-white:hover { background: #f7f9fd; border-color: #cbd5e1; color: var(--ee-text-main) !important; }
.ee-btn-danger { color: #fff !important; }
.ee-btn-success { color: #fff !important; }
.ee-btn-sm { min-height: 30px; padding: 6px 10px; font-size: 11.5px; }
.ee-btn-xs { min-height: 27px; padding: 4px 8px; font-size: 10.5px; }
.ee-btn-icon,
.ee-btn-icon-danger { width: 32px; height: 32px; min-width: 32px; border-radius: 9px; }
.ee-btn-icon:hover { background: var(--ee-primary-light); border-color: #c8d5ff; color: var(--ee-primary); }

.ee-form-group { min-width: 0; margin-bottom: 14px; }
.ee-form-group label,
.ee-wrapper label,
.ee-public-wrapper label { color: var(--ee-text-main); font-size: 12px; font-weight: 650; line-height: 1.45; }
.ee-form-group label { margin-bottom: 6px; }
.ee-form-control,
.ee-wrapper input[type="text"],
.ee-wrapper input[type="email"],
.ee-wrapper input[type="tel"],
.ee-wrapper input[type="url"],
.ee-wrapper input[type="number"],
.ee-wrapper input[type="date"],
.ee-wrapper input[type="datetime-local"],
.ee-wrapper input[type="password"],
.ee-wrapper input[type="search"],
.ee-wrapper select,
.ee-wrapper textarea,
.ee-public-wrapper input[type="text"],
.ee-public-wrapper input[type="email"],
.ee-public-wrapper input[type="tel"],
.ee-public-wrapper input[type="url"],
.ee-public-wrapper input[type="number"],
.ee-public-wrapper input[type="date"],
.ee-public-wrapper input[type="datetime-local"],
.ee-public-wrapper input[type="password"],
.ee-public-wrapper input[type="search"],
.ee-public-wrapper select,
.ee-public-wrapper textarea {
    width: 100%;
    max-width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid #d9e0eb;
    border-radius: 8px;
    background: #fff;
    color: var(--ee-text-main);
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.45;
    box-shadow: none;
}
.ee-wrapper input[type="checkbox"],
.ee-public-wrapper input[type="checkbox"],
.ee-wrapper input[type="radio"],
.ee-public-wrapper input[type="radio"] { accent-color: var(--ee-primary); }
.ee-wrapper :is(input, select, textarea, button, a),
.ee-public-wrapper :is(input, select, textarea, button, a) { outline-offset: 2px; }
.ee-form-control:focus,
.ee-wrapper input:focus,
.ee-wrapper select:focus,
.ee-wrapper textarea:focus,
.ee-public-wrapper input:focus,
.ee-public-wrapper select:focus,
.ee-public-wrapper textarea:focus { border-color: #8ca8ff; box-shadow: 0 0 0 3px rgba(49, 86, 216, .10); outline: none; }
.ee-wrapper textarea,
.ee-public-wrapper textarea,
textarea.ee-form-control { min-height: 88px; }
.ee-input-group { gap: 8px; padding: 8px; border-radius: 10px; }
.ee-wrapper small,
.ee-public-wrapper small { line-height: 1.45; }

.ee-table-responsive { max-width: 100%; overflow-x: auto; border: 1px solid var(--ee-border); border-radius: 10px; background: #fff; }
.ee-table { min-width: 640px; border-spacing: 0; background: #fff; }
.ee-table th { padding: 10px 12px; background: #f5f7fb; border-bottom: 1px solid var(--ee-border); color: #64718a; font-size: 10.5px; letter-spacing: .055em; }
.ee-table td { padding: 10px 12px; border-bottom: 1px solid #edf0f5; color: #364155; font-size: 12px; line-height: 1.45; }
.ee-table tbody tr:last-child td { border-bottom: 0; }
.ee-table tbody tr:hover { background: #f8faff; }
.ee-avatar-initials { width: 32px; height: 32px; font-size: 12px; }
.ee-clickable-name { font-size: 12.5px; }
.ee-badge { padding: 4px 8px; font-size: 9.5px; letter-spacing: .045em; line-height: 1.3; }
.ee-status-mini-select { min-height: 30px; max-width: 155px; padding-top: 5px; padding-bottom: 5px; border-radius: 7px; font-size: 11.5px; }

.ee-public-wrapper { max-width: 1340px; display: flex; align-items: flex-start; gap: 20px; min-height: 72vh; }
.ee-public-sidebar { width: 246px; border-radius: 13px; border-color: var(--ee-border); box-shadow: var(--ee-shadow-sm); }
.ee-sidebar-header { padding: 19px 16px; background: linear-gradient(180deg, #f4f7ff 0%, #fff 100%); }
.ee-user-avatar { width: 76px; height: 76px; border: 3px solid #fff; margin-bottom: 8px; }
.ee-user-name { font-size: 14px; line-height: 1.35; }
.ee-user-email { font-size: 11.5px; overflow-wrap: anywhere; }
.ee-nav-menu { padding: 10px; gap: 3px; }
.ee-nav-item { min-height: 38px; padding: 9px 11px; border-radius: 8px; font-size: 12.5px; gap: 9px; }
.ee-nav-item i { width: 17px; font-size: 13px; }
.ee-public-content { min-width: 0; }
.ee-mobile-nav-toggle { min-height: 42px; padding: 10px 13px; margin-bottom: 12px; border-radius: 10px; font-size: 12.5px; }

.ee-event-list-card { margin-bottom: 14px; border-radius: 12px; box-shadow: 0 1px 3px rgba(22,34,59,.035); }
.ee-event-list-card:hover { transform: translateY(-1px); }
.ee-event-thumb { width: 110px; min-height: 112px; }
.ee-event-info { min-width: 0; padding: 14px 16px; }
.ee-connect-grid { gap: 10px; margin-bottom: 18px; }
.ee-connect-btn { min-height: 84px; padding: 12px 10px; border-radius: 10px; font-size: 12px; }
.ee-connect-btn i { font-size: 21px !important; }
.ee-timeline-item { gap: 12px; padding-bottom: 20px; }
.ee-timeline-icon { width: 36px; height: 36px; font-size: 13px; }
.ee-timeline-item::before { left: 17px; top: 18px; }
.ee-timeline-content { min-width: 0; padding: 13px; border-radius: 10px; }
.ee-material-item { min-width: 0; gap: 10px; padding: 12px; border-radius: 10px; }
.ee-material-icon { flex: 0 0 auto; margin-right: 4px; font-size: 20px; }
.ee-coupon-ticket { border-radius: 10px; }
.ee-coupon-info { min-width: 0; }

.ee-tabs-container { margin-bottom: 18px; border-bottom-color: var(--ee-border); scrollbar-width: thin; }
.ee-tabs { gap: 3px; }
.ee-tab-item { padding: 10px 13px; font-size: 12px; border-radius: 8px 8px 0 0; }
.ee-tab-item.active { background: #edf2ff; }
.ee-stats-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; }
.ee-stat-card { min-width: 0; padding: 17px; border-radius: 12px; }
.ee-stat-info h3 { font-size: 24px; letter-spacing: -.025em; }
.ee-stat-info span { font-size: 10.5px; letter-spacing: .025em; }
.ee-stat-card .ee-icon { font-size: 30px; }
.ee-chart-container { height: 245px; padding: 14px 0 32px; }
.ee-chart-bar { width: min(34px, 70%); }
.ee-chart-label { font-size: 10px; }

.ee-modal-overlay { padding: 14px; }
.ee-modal-content { max-width: 640px; padding: 22px; border-radius: 14px; }
.ee-modal-close { top: 10px; right: 13px; font-size: 25px; }
.ee-alert { padding: 11px 13px; margin-bottom: 14px; border-radius: 9px; font-size: 12.5px; line-height: 1.5; }
.ee-data-list { gap: 7px; }
.ee-data-item { gap: 8px; font-size: 12px; }
.ee-data-item strong { width: 125px; max-width: 42%; }

.ee-dash-tabs { display: flex; flex-wrap: wrap; gap: 5px !important; border-bottom: 1px solid var(--ee-border) !important; margin-bottom: 16px !important; }
.ee-dash-tab { padding: 9px 12px !important; border-bottom-width: 2px !important; border-radius: 8px 8px 0 0; font-size: 12px !important; }
.ee-limit-badge { margin-left: 0 !important; padding: 4px 7px !important; border-radius: 7px !important; font-size: 10px !important; }
.ee-list-tabs, .ee-archive-tabs { max-width: 100%; flex-wrap: wrap; gap: 6px !important; margin-bottom: 14px !important; }
.ee-list-tab, .ee-archive-tab { padding: 7px 11px !important; border-radius: 8px !important; font-size: 11.5px !important; }
.ee-event-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.ee-bottom-nav { padding: 7px 0 calc(7px + env(safe-area-inset-bottom)) !important; border-top: 1px solid #e2e7f0 !important; box-shadow: 0 -5px 18px rgba(22,34,59,.07) !important; }
.ee-bottom-nav-item { min-width: 55px; padding: 5px 10px !important; font-size: 10px !important; line-height: 1.2; }
.ee-bottom-nav-item i { font-size: 17px !important; }
.ee-single-event-header { gap: 5px; padding: 10px 12px !important; }
.ee-single-event-header h2 { font-size: 14px !important; }

/* Prevent wide builder/designer controls from pushing the entire page off-screen. */
.ee-wrapper .ee-card,
.ee-public-wrapper .ee-card,
.ee-wrapper .ee-grid > *,
.ee-wrapper .ee-grid-2 > *,
.ee-public-wrapper .ee-grid > *,
.ee-public-wrapper .ee-grid-2 > * { min-width: 0; }
.ee-wrapper pre,
.ee-public-wrapper pre { max-width: 100%; overflow: auto; }
.ee-wrapper .ee-fullscreen-editor { overflow: auto; padding: 12px; }
.ee-wrapper #cert_wrapper { transform-origin: top left; }

@media (max-width: 1100px) {
    .ee-grid-2 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .ee-public-wrapper { gap: 14px; }
    .ee-public-sidebar { width: 230px; }
    .ee-card { padding: 16px; }
}

@media (max-width: 991px) {
    .ee-wrapper { padding: 12px; }
    .ee-public-wrapper { display: block; padding: 12px 12px 82px; }
    .ee-public-sidebar { width: min(86vw, 310px); max-width: 310px; height: 100vh; height: 100dvh; padding-bottom: env(safe-area-inset-bottom); }
    .ee-grid-2-mini { grid-template-columns: minmax(0, 1fr); }
    .ee-header { align-items: flex-start; }
    .ee-header > div:last-child { max-width: 100%; }
    .ee-mobile-nav-toggle { width: 100%; }
    .ee-card[style*="overflow:hidden"] { overflow-x: auto !important; }
    .ee-table th { padding: 9px 10px; }
    .ee-table td { padding: 9px 10px; }
    .ee-modal-content { max-height: 88dvh; }
}

@media (max-width: 640px) {
    .ee-wrapper { padding: 9px; font-size: 12.5px; }
    .ee-public-wrapper { padding: 9px 9px 82px; font-size: 12.5px; }
    .ee-wrapper h1, .ee-public-wrapper h1 { font-size: 20px; }
    .ee-wrapper h2, .ee-public-wrapper h2 { font-size: 17px; }
    .ee-wrapper h3, .ee-public-wrapper h3 { font-size: 14.5px; }
    .ee-card { padding: 13px; margin-bottom: 12px; border-radius: 11px; }
    .ee-card-title.no-border { font-size: 15px; }
    .ee-header { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 14px; }
    .ee-header > div:last-child { display: flex; flex-wrap: wrap; }
    .ee-header .ee-btn { flex: 0 1 auto; }
    .ee-btn { min-height: 35px; padding: 8px 10px; font-size: 12px; }
    .ee-btn-sm { min-height: 29px; }
    .ee-flex-row { gap: 7px; }
    .ee-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .ee-grid-2-mini { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .ee-form-control,
    .ee-wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
    .ee-wrapper select,
    .ee-wrapper textarea,
    .ee-public-wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
    .ee-public-wrapper select,
    .ee-public-wrapper textarea { font-size: 16px; min-height: 40px; }
    .ee-form-group label, .ee-wrapper label, .ee-public-wrapper label { font-size: 11.5px; }
    .ee-table { min-width: 610px; }
    .ee-table th { font-size: 10px; }
    .ee-table td { font-size: 11.5px; }
    .ee-event-list-card { display: flex; flex-direction: column; }
    .ee-event-thumb { width: 100%; min-height: 0; height: 145px; }
    .ee-event-info { padding: 12px; }
    .ee-connect-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .ee-connect-btn { min-height: 72px; padding: 9px 7px; font-size: 11.5px; }
    .ee-timeline-item { gap: 9px; }
    .ee-timeline-icon { width: 32px; height: 32px; }
    .ee-timeline-item::before { left: 15px; }
    .ee-timeline-content { padding: 10px; }
    .ee-material-item { align-items: flex-start; flex-wrap: wrap; }
    .ee-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .ee-stat-card { padding: 12px; gap: 8px; }
    .ee-stat-info h3 { font-size: 20px; }
    .ee-stat-info span { font-size: 9px; }
    .ee-stat-card .ee-icon { font-size: 23px; }
    .ee-tabs-container { margin-right: -2px; margin-left: -2px; }
    .ee-tab-item { padding: 9px 10px; font-size: 11.5px; }
    .ee-modal-overlay { padding: 8px; align-items: flex-end; }
    .ee-modal-content { width: 100%; max-width: none; max-height: 92dvh; padding: 17px 13px; border-radius: 14px 14px 10px 10px; }
    .ee-data-item { flex-direction: column; gap: 2px; }
    .ee-data-item strong { width: auto; max-width: none; }
    .ee-dash-tabs { gap: 2px !important; }
    .ee-dash-tab { padding: 8px 9px !important; font-size: 11.5px !important; }
    .ee-event-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .ee-archive-tabs { width: 100%; border-radius: 10px !important; }
    .ee-bottom-nav-item { flex: 1 1 0; min-width: 0; padding: 5px 4px !important; }
    .ee-single-event-header h2 { font-size: 13px !important; padding: 0 4px !important; }
}

@media (max-width: 380px) {
    .ee-wrapper, .ee-public-wrapper { padding-left: 7px; padding-right: 7px; }
    .ee-stats-grid { grid-template-columns: minmax(0, 1fr); }
    .ee-header .ee-btn { width: 100%; }
    .ee-bottom-nav-item span { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    .ee-wrapper *, .ee-public-wrapper * { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* Small utility and state classes used across older event-management screens. */
.ee-text-muted { color: var(--ee-text-muted); }
.ee-text-success { color: #087a51; }
.ee-text-danger { color: #b91c1c; }
.ee-mt-sm { margin-top: 8px !important; }
.ee-alert-warning { background: var(--ee-warning-bg); color: #805b14; border-color: #f1d48a; }
.ee-badge-error { background: var(--ee-danger-bg); color: #aa252b; border: 1px solid #ffd0d1; }
.ee-btn-icon-primary { color: var(--ee-primary); border-color: #dbe4ff; background: #f5f7ff; }
.ee-btn-icon-primary:hover { color: #fff; border-color: var(--ee-primary); background: var(--ee-primary); }
.ee-btn-large { min-height: 42px; padding: 11px 17px; font-size: 13px; }
.ee-team-input { min-height: 31px !important; width: 64px; padding: 5px 7px !important; border: 1px solid var(--ee-border); border-radius: 7px; background: #fff; color: var(--ee-text-main); font-size: 11.5px; }
.ee-file-preview { display: flex; align-items: center; gap: 9px; max-width: 100%; padding: 10px 12px; margin: 8px 0; border: 1px solid var(--ee-border); border-radius: 9px; background: #f7f9fd; color: var(--ee-text-body); font-size: 12px; overflow-wrap: anywhere; }
.ee-file-preview > i { flex: 0 0 auto; color: var(--ee-primary); font-size: 17px; }
.ee-file-preview a { font-weight: 650; }
.ee-menu-btn { min-width: 38px; min-height: 38px; border-radius: 9px !important; font-size: 20px !important; }
.ee-back-btn, .ee-scanner-btn { flex: 0 0 auto; width: 36px !important; height: 36px !important; border-radius: 9px !important; font-size: 16px !important; }
.ee-event-type-badge { margin-left: 5px; padding: 3px 7px; border-radius: 6px; font-size: 9px; letter-spacing: .04em; }
.ee-chat-btn { width: 32px; height: 32px; }
.ee-mobile-extra { min-width: 0; }
.ee-mobile-top-bar { box-shadow: 0 3px 10px rgba(22, 34, 59, .04); }
.ee-mobile-top-bar h2 { font-size: 15px !important; }
.ee-desktop-only { min-width: 0; }


/* ========================================================================== 
   EduEvent Connect 3.6.0 – participant QR, team workflows and mobile usability
   Scoped to EduEvent components; does not restyle the WordPress theme globally.
   ========================================================================== */
.ee-wrapper, .ee-public-wrapper { max-width: 100%; min-width: 0; }
.ee-wrapper *, .ee-public-wrapper * { min-width: 0; }
.ee-wrapper .ee-card, .ee-public-wrapper .ee-card { border-radius: 14px; }
.ee-wrapper .ee-header h1, .ee-wrapper .ee-header h2 { letter-spacing: -.02em; line-height: 1.25; }
.ee-wrapper .ee-form-control, .ee-public-wrapper .ee-form-control { border-radius: 9px; }
.ee-wrapper .ee-btn, .ee-public-wrapper .ee-btn { gap: 8px; }
.ee-dash-tabs { flex-wrap: wrap; }
.ee-wrapper .ee-table-responsive, .ee-public-wrapper .ee-table-responsive { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ee-wrapper .ee-table, .ee-public-wrapper .ee-table { border-collapse: separate; border-spacing: 0; }
.ee-wrapper .ee-table th, .ee-public-wrapper .ee-table th { font-size: 12px; letter-spacing: .02em; }
.ee-wrapper .ee-table td, .ee-public-wrapper .ee-table td { vertical-align: middle; }
.ee-modal-overlay { padding: 12px; box-sizing: border-box; }
.ee-modal-content { max-width: min(640px, 100%); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.ee-coupon-ticket { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; margin: 10px 0; }
.ee-coupon-ticket .coupon-icon { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #eef2ff; color: #4f46e5; font-size: 20px; }
.ee-coupon-ticket .coupon-info { flex: 1; overflow-wrap: anywhere; }
.ee-coupon-ticket .coupon-info strong { display: block; font-size: 15px; line-height: 1.35; }
.ee-coupon-hint { margin-top: 3px; font-size: 12px; color: #6b7280; }
.ee-coupon-ticket .coupon-qr { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; flex-direction: column; gap: 3px; min-width: 64px; min-height: 58px; padding: 6px 8px; border: 1px solid #c7d2fe; border-radius: 10px; background: #eef2ff; color: #4338ca; font-size: 12px; font-weight: 700; cursor: pointer; }
.ee-coupon-ticket .coupon-qr i { font-size: 23px; }
.ee-author-team-panel { margin-top: 22px; border-top: 3px solid #6366f1; }
.ee-author-team-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.ee-author-team-head .ee-card-title { margin-bottom: 6px; }
.ee-author-team-head p { margin: 4px 0 12px; font-size: 14px; }
.ee-team-owner-pill { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; border-radius: 20px; padding: 6px 10px; background: #eef2ff; color: #4338ca; font-size: 12px; font-weight: 700; }
.ee-team-code-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; margin: 12px 0 16px; border-radius: 12px; background: linear-gradient(110deg,#f5f3ff,#eef2ff); border: 1px solid #ddd6fe; }
.ee-team-code-label { display: block; color: #6b7280; font-size: 12px; margin-bottom: 2px; }
.ee-team-code { display: block; color: #312e81; font-size: 30px; letter-spacing: .15em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ee-team-join-form { border-top: 1px solid #e5e7eb; padding-top: 15px; margin-top: 14px; }
.ee-team-join-form label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.ee-team-join-row { display: flex; gap: 10px; align-items: stretch; }
.ee-team-join-row .ee-form-control { max-width: 210px; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.ee-team-membership-status { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.5; margin: 12px 0; }
.ee-team-request-list { margin-top: 17px; border-top: 1px solid #e5e7eb; padding-top: 14px; }
.ee-team-request-list h4 { margin: 0 0 10px; font-size: 15px; color: #111827; }
.ee-team-request-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f1f5f9; }
.ee-team-request-row > div:first-child { overflow-wrap: anywhere; }
.ee-team-request-row small { display: block; color: #6b7280; font-size: 12px; margin-top: 3px; }
.ee-team-request-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.ee-team-request-actions form, .ee-team-request-row form { margin: 0; }

@media (max-width: 767px) {
  .ee-wrapper, .ee-public-wrapper { padding: 10px !important; font-size: 16px; line-height: 1.55; }
  .ee-card { padding: 15px !important; margin-bottom: 13px; border-radius: 14px !important; }
  .ee-card-title { font-size: 13px; line-height: 1.45; padding-bottom: 9px; margin-bottom: 13px; }
  .ee-card-title.no-border { font-size: 17px !important; line-height: 1.35; }
  .ee-header { align-items: stretch; gap: 11px; margin-bottom: 16px; }
  .ee-wrapper .ee-card > div[style*='margin-top:auto'] { flex-wrap: wrap; }
  .ee-wrapper .ee-card > div[style*='margin-top:auto'] > a { flex: 1 1 auto; }
  .ee-header h1 { font-size: 22px !important; }
  .ee-header h2 { font-size: 20px !important; }
  .ee-header p { font-size: 14px !important; }
  .ee-grid, .ee-grid-2, .ee-grid-2-mini { grid-template-columns: minmax(0, 1fr) !important; gap: 13px !important; }
  .ee-btn { min-height: 44px; padding: 10px 14px; font-size: 15px; line-height: 1.25; }
  .ee-btn-sm { min-height: 42px; padding: 9px 12px; font-size: 14px; }
  .ee-btn-xs { min-height: 38px; padding: 7px 10px; font-size: 13px; }
  .ee-btn-icon { width: 44px; height: 44px; font-size: 18px; }
  .ee-nav-item { min-height: 48px; padding: 12px 15px; font-size: 16px; gap: 10px; }
  .ee-nav-item i { width: 24px; font-size: 20px; }
  .ee-bottom-nav { padding: 8px 4px calc(8px + env(safe-area-inset-bottom)); min-height: 68px; }
  .ee-bottom-nav-item { min-width: 62px; min-height: 52px; padding: 6px 8px; font-size: 13px; font-weight: 600; }
  .ee-bottom-nav-item i { font-size: 23px; margin-bottom: 3px; }
  .ee-form-control { min-height: 44px; font-size: 16px !important; padding: 10px 12px; }
  .ee-form-group label, .ee-wrapper label, .ee-public-wrapper label { font-size: 14px; line-height: 1.45; }
  .ee-table th { font-size: 12px !important; padding: 9px 10px !important; }
  .ee-table td { font-size: 13px !important; padding: 9px 10px !important; }
  .ee-badge { font-size: 12px !important; padding: 4px 8px; }
  .ee-single-event-header { padding: 8px 10px !important; }
  .ee-single-event-header h2 { font-size: 17px !important; }
  .ee-scanner-btn, .ee-back-btn { width: 44px; height: 44px; font-size: 22px; }
  .ee-modal-content { width: 100%; padding: 17px !important; border-radius: 16px !important; }
  #reader, #couponReader, #creatorReader { width: 100% !important; max-width: 100%; }
  .ee-coupon-ticket { padding: 11px; gap: 10px; }
  .ee-coupon-ticket .coupon-icon { flex-basis: 44px; width: 44px; height: 44px; font-size: 22px; }
  .ee-coupon-ticket .coupon-info strong { font-size: 16px; }
  .ee-coupon-hint { font-size: 13px; }
  .ee-coupon-ticket .coupon-qr { min-width: 68px; min-height: 62px; font-size: 13px; }
  .ee-coupon-ticket .coupon-qr i { font-size: 25px; }
  .ee-team-code-row { align-items: center; padding: 12px; gap: 9px; }
  .ee-team-code { font-size: 27px; }
  .ee-team-join-row { flex-direction: column; }
  .ee-team-join-row .ee-form-control { max-width: none; width: 100%; }
  .ee-team-join-row .ee-btn { width: 100%; }
  .ee-team-request-row { align-items: flex-start; flex-direction: column; }
  .ee-team-request-actions { width: 100%; }
  .ee-team-request-actions form { flex: 1; }
  .ee-team-request-actions .ee-btn { width: 100%; }
  .ee-author-team-head { gap: 8px; }
  .ee-team-owner-pill { font-size: 11px; padding: 5px 8px; }
  .ee-dash-tabs { gap: 6px !important; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .ee-dash-tab { flex: 0 0 auto; padding: 10px 11px !important; font-size: 14px; white-space: nowrap; }
  .ee-fullscreen-editor { padding: 8px !important; }
  .ee-limit-badge { margin-left: 0; font-size: 12px; }
  .ee-material-item { align-items: flex-start; gap: 8px; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .ee-wrapper, .ee-public-wrapper { padding: 16px !important; }
  .ee-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 16px; }
  .ee-card { padding: 18px; }
}


/* v3.6.1: schedule-linked learning resources */
.ee-event-schedule-materials .ee-session-resource:last-of-type { border-bottom: 0; }
.ee-session-material-link { display: inline-flex; align-items: flex-start; gap: 8px; color: var(--ee-primary, #3156d8); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.ee-session-material-link:hover, .ee-session-material-link:focus { text-decoration: underline; }
.ee-session-material-link i { margin-top: 3px; flex: 0 0 auto; }
.ee-session-resource-heading strong { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .ee-event-schedule-materials { padding: 14px; }
  .ee-session-resource { padding: 13px 0 !important; }
  .ee-session-material-link { font-size: 15px; line-height: 1.45; }
}


/* v3.6.3 participant workspace and responsive navigation */
.ee-event-code-search { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin:18px 0; scroll-margin-top:86px; }
.ee-event-code-search-copy { display:flex; flex-direction:column; gap:5px; min-width:180px; }
.ee-event-code-search-copy strong { font-size:15px; color:var(--ee-text, #172033); }
.ee-event-code-search-copy small { color:var(--ee-text-muted, #64748b); font-size:12px; }
.ee-event-code-search-form { display:flex; flex:1 1 320px; gap:8px; min-width:0; }
.ee-event-code-search-form input { flex:1; min-width:0; text-align:center; letter-spacing:.12em; font-weight:700; }
.ee-event-code-feedback { width:100%; margin:0; }
.ee-event-code-result { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding-top:12px; border-top:1px solid var(--ee-border, #e2e8f0); }
.ee-event-code-result > div { display:flex; flex-direction:column; gap:4px; min-width:0; }
.ee-event-code-result strong { overflow-wrap:anywhere; }
.ee-event-code-result small { color:var(--ee-text-muted, #64748b); }
.ee-event-id-label { display:inline-flex; align-items:center; gap:5px; color:var(--ee-text-muted, #64748b); font-size:12px; margin:0 0 8px; }
.ee-event-id-label strong { color:var(--ee-primary, #3156d8); letter-spacing:.08em; }
.ee-public-event-code-wrap { margin:16px auto; }
.ee-public-event-code, .ee-event-workspace-code { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ee-public-event-code strong, .ee-event-workspace-code strong { font-size:20px; letter-spacing:.12em; color:var(--ee-primary, #3156d8); }
.ee-event-workspace-code { margin:12px 0 18px; padding:10px 14px; border:1px solid var(--ee-border, #e2e8f0); border-radius:12px; background:var(--ee-bg-app, #f8fafc); scroll-margin-top:82px; }
.ee-event-workspace-code span { color:var(--ee-text-muted, #64748b); font-size:12px; font-weight:600; text-transform:uppercase; }
.ee-event-workspace-code button { margin-left:auto; border:1px solid var(--ee-border, #e2e8f0); border-radius:8px; background:#fff; padding:7px 10px; color:var(--ee-primary, #3156d8); font-weight:600; }
.ee-event-code-owner { margin:0 0 12px; font-size:12px; color:var(--ee-text-muted, #64748b); }
.ee-event-code-owner strong { font-size:14px; letter-spacing:.08em; color:var(--ee-primary, #3156d8); }
.ee-event-schedule-materials { scroll-margin-top:88px; }
.ee-session-material-link { display:flex; align-items:center; gap:9px; padding:10px 12px; border:1px solid var(--ee-border, #e2e8f0); border-radius:9px; overflow-wrap:anywhere; }
.ee-session-material-link i { flex:0 0 auto; }
@media (max-width: 991px) {
  .ee-public-wrapper { padding-bottom:calc(100px + env(safe-area-inset-bottom, 0px)) !important; overflow-x:clip; }
  .ee-public-content { box-sizing:border-box; width:100%; min-width:0; padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px)) !important; }
  .ee-bottom-nav { position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; width:100% !important; min-height:72px !important; height:auto !important; box-sizing:border-box !important; padding:8px 5px calc(8px + env(safe-area-inset-bottom, 0px)) !important; display:flex !important; justify-content:space-around !important; align-items:stretch !important; gap:2px !important; z-index:10000 !important; border-top:1px solid var(--ee-border, #e2e8f0) !important; background:rgba(255,255,255,.98) !important; box-shadow:0 -5px 18px rgba(15,23,42,.10) !important; }
  .ee-bottom-nav-item { flex:1 1 0 !important; min-width:0 !important; min-height:54px !important; box-sizing:border-box !important; padding:5px 2px !important; display:flex !important; flex-direction:column !important; justify-content:center !important; align-items:center !important; gap:4px !important; text-align:center !important; font-size:12px !important; line-height:1.15 !important; font-weight:600 !important; white-space:normal !important; overflow-wrap:anywhere !important; border-radius:10px !important; }
  .ee-bottom-nav-item i { display:block !important; margin:0 !important; font-size:24px !important; line-height:1 !important; }
  .ee-bottom-nav-item > span:not(.ee-nav-unread-badge) { display:block !important; margin:0 !important; }
  .ee-bottom-nav-scan i { font-size:27px !important; }
  .ee-nav-unread-badge { position:absolute !important; display:none; min-width:17px; padding:2px 5px; border-radius:99px; background:#ef4444; color:#fff; font-size:10px !important; line-height:1.2; }
  .ee-bottom-nav-item#chat-nav-icon { position:relative; }
  .ee-single-event-header { padding:8px 10px !important; }
  .ee-single-event-header h2 { font-size:16px !important; padding:0 6px !important; }
  .ee-back-btn, .ee-scanner-btn { width:44px !important; height:44px !important; flex:0 0 44px !important; font-size:24px !important; }
  .ee-event-code-search { align-items:stretch; padding:14px !important; }
  .ee-event-code-search-form { flex:1 1 100%; }
  .ee-event-code-search-form input { font-size:15px !important; min-height:44px; }
  .ee-event-code-search-form .ee-btn { min-height:44px; white-space:nowrap; }
  .ee-event-code-result { align-items:stretch; flex-direction:column; }
  .ee-event-code-result .ee-btn { width:100%; justify-content:center; }
  .ee-event-workspace-code { gap:8px; }
  .ee-event-workspace-code strong, .ee-public-event-code strong { font-size:18px; }
  .ee-event-workspace-code button { min-height:38px; }
  .ee-event-schedule-materials { scroll-margin-top:74px; }
  .ee-session-resource-heading { align-items:flex-start !important; }
  .ee-session-material-link { min-height:44px; }
  .ee-event-grid, .ee-connect-grid, .ee-grid-2, .ee-grid { min-width:0; }
  .ee-event-info, .ee-event-list-card, .ee-card { min-width:0; }
  .ee-public-content, .ee-public-content * { max-width:100%; }
  .ee-public-content img { height:auto; }
}
@media (max-width: 380px) {
  .ee-bottom-nav-item { font-size:11px !important; }
  .ee-bottom-nav-item i { font-size:22px !important; }
  .ee-bottom-nav-scan i { font-size:25px !important; }
  .ee-bottom-nav { padding-left:2px !important; padding-right:2px !important; }
  .ee-event-code-search-form { flex-direction:column; }
  .ee-event-code-search-form .ee-btn { width:100%; }
}


/* v3.6.4: participant and team detail modal layout */
.ee-participant-detail-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start; }
.ee-participant-detail-grid .ee-card { min-width:0; }
.ee-participant-detail-grid h4 { margin:14px 0 8px; font-size:14px; line-height:1.4; }
.ee-team-view-button { display:block; margin-top:5px; padding:5px 8px; font-size:11px; white-space:nowrap; }
#eeModal .ee-modal-content { max-width:min(960px, calc(100vw - 28px)); max-height:calc(100vh - 28px); overflow:auto; }
#eeModal .ee-form-group { margin-bottom:10px; }
#eeModal .ee-form-control { min-width:0; max-width:100%; }
@media (max-width: 760px) {
  .ee-participant-detail-grid { grid-template-columns:minmax(0,1fr); gap:14px; }
  #eeModal { padding:10px !important; }
  #eeModal .ee-modal-content { width:100% !important; max-width:100% !important; max-height:calc(100dvh - 20px) !important; padding:16px !important; border-radius:12px !important; }
  #eeModal .ee-btn { min-height:40px; }
  .ee-team-view-button { font-size:12px; }
}


/* EduEvent Connect 3.6.6 — chat usability and unread states */
.ee-chat-btn { position: relative !important; overflow: visible !important; }
.ee-chat-unread-badge {
  position: absolute !important; top: -7px !important; right: -7px !important; z-index: 5;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; box-sizing: border-box; padding: 0 4px;
  border: 2px solid #fff; border-radius: 99px; background: #dc2626; color: #fff;
  font-size: 10px !important; font-weight: 800; line-height: 1; margin: 0 !important;
  box-shadow: 0 2px 5px rgba(15,23,42,.18); white-space: nowrap;
}
.ee-chat-thread-list { display:flex; flex-direction:column; gap:8px; }
.ee-chat-thread {
  width:100%; display:flex; align-items:center; gap:12px; text-align:left;
  border:1px solid var(--ee-border, #e2e8f0); border-radius:14px; background:#fff;
  padding:12px; color:var(--ee-text-main, #0f172a); cursor:pointer; transition:background .15s,border-color .15s;
}
.ee-chat-thread:hover, .ee-chat-thread:focus-visible { background:#f8faff; border-color:#a5b4fc; outline:none; }
.ee-chat-thread-icon { flex:0 0 40px; width:40px; height:40px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background:#eef2ff; color:#4338ca; font-size:18px; }
.ee-chat-thread-copy { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.ee-chat-thread-copy strong { font-size:14px; font-weight:750; overflow-wrap:anywhere; }
.ee-chat-thread-copy small { font-size:12px; color:#64748b; }
.ee-chat-thread-unread { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; min-width:23px; height:23px; padding:0 6px; border-radius:99px; background:#dc2626; color:#fff; font-size:11px; font-weight:800; }
.ee-chat-thread-arrow { color:#94a3b8; font-size:12px; }
#chatConversationModal .ee-modal-content, #chatModal .ee-modal-content { display:flex; flex-direction:column; gap:10px; }
#chatMessages { min-height:180px; max-height:min(55vh, 520px); overflow-y:auto; overscroll-behavior:contain; }
#chatConversationModal #chatMessages, #chatModal #chatMessages { height:min(48vh, 420px) !important; }
#chatConversationModal #chatInput, #chatModal #chatInput { min-height:46px; max-height:130px; resize:vertical; font-size:14px; }
#chatConversationModal .ee-chat-send-button, #chatModal .ee-chat-send-button { align-self:stretch; min-height:44px; flex:0 0 auto; }
.ee-chat-empty, .ee-chat-error { margin:8px 0; font-size:13px; }
.ee-chat-empty { color:#64748b; text-align:center; }
.ee-chat-error { color:#b91c1c; }
.ee-chat-sender { font-size:12px !important; }
.ee-chat-time { font-size:10px !important; }
#chat-nav-icon { position:relative; }
#chat-nav-icon .ee-nav-unread-badge { top:1px !important; right:calc(50% - 27px) !important; min-width:18px; min-height:18px; align-items:center; justify-content:center; font-weight:800; box-shadow:0 1px 4px rgba(15,23,42,.2); }
@media (max-width: 600px) {
  #chatListModal .ee-modal-content, #chatConversationModal .ee-modal-content, #chatModal .ee-modal-content {
    width:calc(100vw - 24px) !important; max-width:calc(100vw - 24px) !important;
    max-height:calc(100dvh - 36px); overflow:auto; padding:14px !important; box-sizing:border-box;
  }
  #chatConversationModal #chatMessages, #chatModal #chatMessages { height:44vh !important; max-height:48vh; }
  #chatConversationModal .ee-chat-bubble, #chatModal .ee-chat-bubble { max-width:88%; }
  #chatConversationModal .ee-chat-send-button, #chatModal .ee-chat-send-button { min-width:72px; padding:10px 13px; }
  .ee-chat-thread { padding:11px; }
  .ee-chat-thread-icon { flex-basis:38px; width:38px; height:38px; }
}


/* EduEvent Connect 3.6.7 — role-based chat alignment without live polling */
#chatMessages {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
}
#chatMessages .ee-chat-bubble {
  display: block;
  width: fit-content;
  max-width: min(78%, 520px);
  margin: 0 0 12px !important;
  float: none !important;
  clear: none !important;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
#chatMessages .ee-chat-bubble.me {
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  background: #dcf8c6;
  border: 1px solid #c7edb7;
}
#chatMessages .ee-chat-bubble.them {
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  background: #fff;
  border: 1px solid #e5e7eb;
}
@media (max-width: 600px) {
  #chatMessages .ee-chat-bubble { max-width: 88%; }
}


/* EduEvent Connect 3.6.9 — explicit persisted sender roles and reliable message direction */
#chatMessages { display:flex !important; flex-direction:column !important; align-items:stretch !important; }
#chatMessages .ee-chat-bubble { float:none !important; clear:none !important; display:block !important; width:fit-content !important; max-width:min(78%,520px) !important; margin:0 0 12px !important; box-sizing:border-box !important; overflow-wrap:anywhere !important; }
#chatMessages .ee-chat-bubble.is-outgoing { align-self:flex-end !important; margin-left:auto !important; margin-right:0 !important; background:#dcf8c6 !important; border:1px solid #c7edb7 !important; }
#chatMessages .ee-chat-bubble.is-incoming { align-self:flex-start !important; margin-left:0 !important; margin-right:auto !important; background:#fff !important; border:1px solid #dbe1e8 !important; }
#chatMessages .ee-chat-sender { display:block; font-size:11px !important; font-weight:800 !important; color:#334155 !important; line-height:1.35 !important; }
#chatMessages .ee-chat-text { white-space:normal; overflow-wrap:anywhere; line-height:1.45; }
#chatMessages .ee-chat-bubble--participant.is-incoming { border-left:3px solid #64748b !important; }
#chatMessages .ee-chat-bubble--institution.is-incoming { border-left:3px solid #4f46e5 !important; }
@media(max-width:600px) { #chatMessages .ee-chat-bubble { max-width:88% !important; } }


/* ========================================================================
   EduEvent Connect 3.7.0 — Institution Dashboard App UI
   Scoped deliberately to the institution dashboard so public/participant
   views retain their established design and behaviour.
   ======================================================================== */
.ee-institution-app {
    --ee-app-ink: #17243a;
    --ee-app-muted: #64748b;
    --ee-app-line: #e3e8f1;
    --ee-app-surface: rgba(255,255,255,.96);
    --ee-app-shadow: 0 8px 28px rgba(25, 42, 70, .065);
    position: relative;
    isolation: isolate;
    width: min(100%, 1600px);
    max-width: 1600px;
    min-height: 68vh;
    margin: 22px auto;
    padding: clamp(18px, 2.1vw, 32px);
    border: 1px solid #e7ebf3;
    border-radius: 26px;
    background:
      radial-gradient(circle at 100% 0%, rgba(99,102,241,.075), transparent 27rem),
      linear-gradient(145deg, #f8faff 0%, #f5f7fb 48%, #f1f5fb 100%);
    box-shadow: 0 18px 55px rgba(28, 43, 72, .075);
    color: var(--ee-app-ink);
    font-family: Inter, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.ee-institution-app *, .ee-institution-app *::before, .ee-institution-app *::after { box-sizing: border-box; }
.ee-institution-app img, .ee-institution-app svg { max-width: 100%; }
.ee-institution-app h1, .ee-institution-app h2, .ee-institution-app h3,
.ee-institution-app h4 { color: var(--ee-app-ink); letter-spacing: -.025em; line-height: 1.25; }
.ee-institution-app h1 { font-size: clamp(25px, 2.6vw, 34px); font-weight: 800; margin: 0; }
.ee-institution-app h2 { font-size: clamp(21px, 2.1vw, 28px); font-weight: 750; }
.ee-institution-app h3 { font-size: 18px; font-weight: 750; }
.ee-institution-app p { line-height: 1.6; }
.ee-institution-app .ee-text-muted { color: var(--ee-app-muted) !important; }
.ee-institution-app a { text-underline-offset: 3px; }

/* Institution identity and screen heading */
.ee-institution-app > .ee-institution-brandbar,
.ee-institution-app .ee-institution-brandbar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 22px 26px !important;
    border: 1px solid rgba(221,228,241,.9) !important;
    border-left: 5px solid #5558e8 !important;
    border-radius: 18px !important;
    background: linear-gradient(112deg, #ffffff 0%, #f7f8ff 72%, #f2f5ff 100%);
    box-shadow: var(--ee-app-shadow);
}
.ee-institution-app .ee-institution-brandbar .ee-card-title.no-border {
    margin: 0 0 3px !important; font-size: clamp(21px, 2vw, 28px) !important;
    font-weight: 800; letter-spacing: -.03em; color: #182842 !important;
}
.ee-institution-app .ee-header,
.ee-institution-app .ee-institution-page-header {
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}
.ee-institution-app .ee-header > div { min-width: 0; }
.ee-institution-app .ee-header > div:last-child { display:flex; align-items:center; flex-wrap:wrap; gap:9px; }
.ee-institution-app .ee-institution-page-header { padding: 3px 2px; }
.ee-institution-app .ee-institution-page-header p { margin: 6px 0 0 !important; color: #697991 !important; font-size: 14px !important; }
.ee-institution-app .ee-header h1,
.ee-institution-app .ee-header h2,
.ee-institution-app .ee-header h3 { margin-top: 0; }

/* Cards, event tiles and content surfaces */
.ee-institution-app .ee-card {
    min-width: 0;
    border: 1px solid var(--ee-app-line);
    border-radius: 17px;
    background: var(--ee-app-surface);
    box-shadow: 0 3px 12px rgba(30, 47, 78, .035);
    padding: 22px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ee-institution-app .ee-card:hover { border-color: #d7def0; box-shadow: 0 10px 28px rgba(31, 48, 78, .075); }
.ee-institution-app .ee-card-title {
    color: #6a7890; font-size: 12px; font-weight: 800;
    letter-spacing: .075em; line-height: 1.4; padding-bottom: 13px;
    margin-bottom: 18px; border-bottom-color: #edf0f6;
}
.ee-institution-app .ee-card-title.no-border {
    color: #1b2a42 !important; font-size: 18px !important;
    font-weight: 760; letter-spacing: -.02em;
}
.ee-institution-app #view-events > .ee-grid { gap: 20px; align-items: stretch; }
.ee-institution-app #view-events > .ee-grid > .ee-card {
    padding: 0 !important; overflow: hidden; display: flex; flex-direction: column;
    border-radius: 19px; background: #fff;
}
.ee-institution-app #view-events > .ee-grid > .ee-card:hover { transform: translateY(-2px); }
.ee-institution-app #view-events > .ee-grid > .ee-card > div:first-child { height: 156px !important; min-height: 156px; }
.ee-institution-app #view-events > .ee-grid > .ee-card > div:nth-child(2) { padding: 20px 21px 21px !important; gap: 9px; }
.ee-institution-app .ee-event-code-owner {
    display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap;
    padding: 8px 10px; border-radius: 10px; background: #f3f5ff;
    color: #4b5681; font-size: 12px; border: 1px solid #e7eaff;
}
.ee-institution-app .ee-event-code-owner strong { color: #333ab4; letter-spacing: .05em; }

/* Tabs: touch-friendly, clear active state, no tiny labels */
.ee-institution-app .ee-dash-tabs {
    display: flex; flex-wrap: nowrap; gap: 6px !important;
    width: 100%; margin: 0 0 22px; padding: 6px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid #e4e9f4; border-radius: 14px;
    background: rgba(255,255,255,.72); scrollbar-width: thin;
}
.ee-institution-app .ee-dash-tab {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; min-height: 42px; padding: 10px 16px !important;
    border: 0 !important; border-radius: 10px; color: #67758c !important;
    font-size: 13px !important; font-weight: 700; white-space: nowrap;
}
.ee-institution-app .ee-dash-tab.active { color: #3e46c8 !important; background: #edf0ff; box-shadow: inset 0 0 0 1px #dce2ff; }
.ee-institution-app .ee-dash-tab:hover { background: #f2f4ff; }
.ee-institution-app .ee-tabs-container {
    position: relative; z-index: 2; margin: 0 0 20px !important;
    padding: 6px; border: 1px solid #e2e8f3; border-radius: 15px;
    background: rgba(255,255,255,.82); overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.ee-institution-app .ee-tabs { display: flex; flex-wrap: nowrap; gap: 4px; min-width: max-content; }
.ee-institution-app .ee-tab-item {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 42px; padding: 10px 15px; border: 0 !important;
    border-radius: 10px; color: #627087; font-size: 13px; font-weight: 700;
    white-space: nowrap; background: transparent;
}
.ee-institution-app .ee-tab-item:hover { background: #f2f4ff; color: #3943c4; }
.ee-institution-app .ee-tab-item.active { color: #353fc0; background: #edf0ff; box-shadow: inset 0 0 0 1px #dce2ff; }
.ee-institution-app #ee-tab-content { min-width: 0; }
.ee-institution-app .ee-tab-loading { min-height: 110px; display: grid; place-items: center; color: #64748b; }

/* Consistent controls and actions */
.ee-institution-app .ee-btn,
.ee-institution-app button.ee-btn {
    min-height: 40px; padding: 10px 15px; border-radius: 11px;
    font-family: inherit; font-size: 13px; line-height: 1.25; font-weight: 700;
    letter-spacing: -.005em; gap: 8px; box-shadow: none;
}
.ee-institution-app .ee-btn-primary { background: linear-gradient(135deg,#4f46e5 0%,#4338ca 100%); border-color: transparent; color:#fff !important; box-shadow: 0 4px 10px rgba(79,70,229,.17); }
.ee-institution-app .ee-btn-primary:hover { background: #3f3ab8; box-shadow: 0 6px 15px rgba(79,70,229,.22); }
.ee-institution-app .ee-btn-white { background:#fff; border-color:#dfe5ef; color:#34435b !important; }
.ee-institution-app .ee-btn-white:hover { background:#f7f8fc; border-color:#c7d1e1; color:#202f49 !important; }
.ee-institution-app .ee-btn-danger { background:#dc454c; color:#fff !important; }
.ee-institution-app .ee-btn-sm { min-height:35px; padding:8px 11px; font-size:12px; border-radius:9px; }
.ee-institution-app .ee-btn-xs { min-height:31px; padding:6px 9px; font-size:11.5px; border-radius:8px; }
.ee-institution-app .ee-btn-icon, .ee-institution-app .ee-btn-icon-danger { width:38px; height:38px; flex:0 0 38px; border-radius:11px; background:#fff; }
.ee-institution-app .ee-flex-row { gap:9px; }

/* Forms: aligned labels, generous fields, usable keyboard/touch targets */
.ee-institution-app .ee-form-group { margin-bottom:17px; min-width:0; }
.ee-institution-app .ee-form-group label,
.ee-institution-app label { color:#36445b; font-size:13px; line-height:1.4; font-weight:650; }
.ee-institution-app .ee-form-control,
.ee-institution-app input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
.ee-institution-app select,
.ee-institution-app textarea {
    max-width:100%; border:1px solid #dce3ef; border-radius:10px;
    background:#fff; color:#24334b; font-family:inherit; font-size:14px;
    box-shadow: 0 1px 2px rgba(30,44,70,.025); transition:border-color .15s, box-shadow .15s;
}
.ee-institution-app .ee-form-control:focus,
.ee-institution-app input:focus, .ee-institution-app select:focus, .ee-institution-app textarea:focus {
    outline: none; border-color:#777bf0; box-shadow:0 0 0 3px rgba(91,95,230,.12); background:#fff;
}
.ee-institution-app .ee-form-control { width:100%; min-height:43px; padding:10px 12px; }
.ee-institution-app textarea.ee-form-control { min-height:100px; resize:vertical; }
.ee-institution-app input[type="checkbox"], .ee-institution-app input[type="radio"] { accent-color:#4f46e5; }
.ee-institution-app .ee-input-group { gap:9px; align-items:center; }
.ee-institution-app hr { border:0; border-top:1px solid #e9edf5; }

/* Data tables stay readable and scroll within their own surface on smaller screens */
.ee-institution-app .ee-table-responsive {
    width:100%; max-width:100%; overflow-x:auto; overflow-y:hidden;
    border:1px solid #e2e8f1; border-radius:13px; background:#fff;
    -webkit-overflow-scrolling:touch;
}
.ee-institution-app .ee-table { min-width:760px; border:0; background:#fff; }
.ee-institution-app .ee-table th {
    padding:14px 15px; border-bottom:1px solid #e4e9f2;
    background:#f5f7fc; color:#64728a; font-size:11px; letter-spacing:.055em;
    font-weight:800; white-space:nowrap;
}
.ee-institution-app .ee-table td { padding:13px 15px; border-bottom:1px solid #edf0f5; font-size:13px; line-height:1.5; color:#34435b; }
.ee-institution-app .ee-table tbody tr:last-child td { border-bottom:0; }
.ee-institution-app .ee-table tbody tr:hover { background:#f8faff; }
.ee-institution-app .ee-clickable-name { font-weight:750; color:#3f46c9; }
.ee-institution-app .ee-avatar-initials { width:40px; height:40px; font-size:13px; box-shadow:0 0 0 3px #eef0ff; }
.ee-institution-app .ee-badge { padding:5px 9px; font-size:10px; letter-spacing:.035em; }
.ee-institution-app .ee-status-mini-select { min-height:36px; border-radius:9px; padding:7px 9px; font-size:12px; max-width:100%; }
.ee-institution-app .ee-alert { border-radius:12px; padding:13px 15px; line-height:1.55; }

/* Modals and popups */
.ee-institution-app .ee-modal-overlay { backdrop-filter: blur(5px); background:rgba(18,28,48,.56); }
.ee-institution-app .ee-modal-content { border:1px solid rgba(226,232,240,.9); border-radius:19px; box-shadow:0 24px 80px rgba(15,23,42,.28); }

@media (min-width: 992px) {
    .ee-institution-app .ee-grid { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap:20px; }
    .ee-institution-app .ee-grid-2 { grid-template-columns:minmax(0, 1.7fr) minmax(260px, .9fr); gap:22px; }
}
@media (max-width: 991px) {
    .ee-institution-app { width:calc(100% - 22px); margin:11px auto; padding:18px; border-radius:21px; }
    .ee-institution-app .ee-grid-2 { grid-template-columns:minmax(0, 1fr); }
    .ee-institution-app .ee-header { align-items:flex-start; }
}
@media (max-width: 640px) {
    .ee-institution-app {
        width:100%; max-width:none; min-height:100dvh; margin:0; padding:16px 13px calc(24px + env(safe-area-inset-bottom));
        border-radius:0; border:0; box-shadow:none;
        background:linear-gradient(180deg,#f7f8ff 0%,#f4f7fb 250px,#f6f8fc 100%);
        font-size:14px;
    }
    .ee-institution-app .ee-institution-brandbar { padding:17px 16px !important; border-radius:15px !important; margin-bottom:16px !important; }
    .ee-institution-app .ee-institution-brandbar .ee-card-title.no-border { font-size:21px !important; }
    .ee-institution-app .ee-header { display:flex; flex-direction:column; align-items:stretch; gap:12px; margin-bottom:17px; }
    .ee-institution-app .ee-header > div:last-child { width:100%; display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; }
    .ee-institution-app .ee-header > div:last-child > form { min-width:0; }
    .ee-institution-app .ee-header > div:last-child .ee-btn,
    .ee-institution-app .ee-header > div:last-child form .ee-btn { width:100%; min-height:42px; }
    .ee-institution-app .ee-card { padding:16px; margin-bottom:13px; border-radius:15px; }
    .ee-institution-app .ee-card-title { margin-bottom:14px; padding-bottom:10px; }
    .ee-institution-app .ee-card-title.no-border { font-size:17px !important; }
    .ee-institution-app #view-events > .ee-grid { grid-template-columns:minmax(0,1fr); gap:13px; }
    .ee-institution-app #view-events > .ee-grid > .ee-card > div:first-child { height:138px !important; min-height:138px; }
    .ee-institution-app #view-events > .ee-grid > .ee-card > div:nth-child(2) { padding:16px !important; }
    .ee-institution-app #view-events > .ee-grid > .ee-card h3 { font-size:17px !important; line-height:1.35; }
    .ee-institution-app .ee-dash-tabs { position:relative; margin-bottom:16px; padding:4px; gap:4px !important; border-radius:12px; }
    .ee-institution-app .ee-dash-tab { min-height:42px; padding:9px 12px !important; font-size:12.5px !important; }
    .ee-institution-app .ee-tabs-container { margin-bottom:15px !important; border-radius:13px; padding:5px; }
    .ee-institution-app .ee-tab-item { min-height:44px; padding:10px 13px; font-size:12.5px; }
    .ee-institution-app .ee-btn, .ee-institution-app button.ee-btn { min-height:43px; padding:10px 13px; font-size:13px; }
    .ee-institution-app .ee-btn-sm { min-height:39px; font-size:12.5px; }
    .ee-institution-app .ee-btn-xs { min-height:35px; font-size:12px; }
    .ee-institution-app .ee-form-group { margin-bottom:15px; }
    .ee-institution-app .ee-form-group label, .ee-institution-app label { font-size:13px; margin-bottom:6px; }
    .ee-institution-app .ee-form-control,
    .ee-institution-app input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
    .ee-institution-app select, .ee-institution-app textarea { font-size:16px; min-height:44px; }
    .ee-institution-app .ee-form-control { padding:11px 12px; }
    .ee-institution-app .ee-table-responsive { border-radius:11px; }
    .ee-institution-app .ee-table { min-width:760px; }
    .ee-institution-app .ee-table th { padding:12px; font-size:11px; }
    .ee-institution-app .ee-table td { padding:12px; font-size:12.5px; }
    .ee-institution-app .ee-flex-row { gap:8px; }
    .ee-institution-app .ee-modal-overlay { padding:10px; }
    .ee-institution-app .ee-modal-content { width:100%; max-width:100%; max-height:calc(100dvh - 20px); padding:20px 15px; border-radius:17px; }
    .ee-institution-app .ee-grid-2-mini { grid-template-columns:minmax(0,1fr); gap:0; }
}
@media (max-width: 380px) {
    .ee-institution-app { padding-left:10px; padding-right:10px; }
    .ee-institution-app .ee-card { padding:13px; }
    .ee-institution-app .ee-header > div:last-child { grid-template-columns:minmax(0,1fr); }
    .ee-institution-app .ee-dash-tab { padding:9px 10px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .ee-institution-app *, .ee-institution-app *::before, .ee-institution-app *::after { transition:none !important; animation:none !important; }
}


/* ========================================================================
   EduEvent Connect 3.7.2 — Tutorial-aligned visual system
   Visual-only layer: preserves existing controls, workflows, IDs and handlers.
   Palette and surfaces follow the Institution/Participant tutorial UI.
   ======================================================================== */
:root {
    --ee-primary: #3159cf;
    --ee-primary-hover: #2448b7;
    --ee-primary-light: #eaf0ff;
    --ee-success: #16845d;
    --ee-success-bg: #eaf8f1;
    --ee-warning: #a96d12;
    --ee-warning-bg: #fff6df;
    --ee-danger: #c83f50;
    --ee-danger-bg: #fff0f2;
    --ee-info: #3976cf;
    --ee-info-bg: #edf5ff;
    --ee-bg-app: #f4f7fb;
    --ee-bg-card: #ffffff;
    --ee-bg-input: #f9fbfe;
    --ee-text-main: #19283e;
    --ee-text-body: #3b4b62;
    --ee-text-muted: #718198;
    --ee-border: #dce5ef;
    --ee-radius: 12px;
    --ee-shadow-sm: 0 2px 8px rgba(20, 43, 76, .045);
    --ee-shadow-md: 0 8px 24px rgba(20, 43, 76, .085);
    --ee-shadow-lg: 0 18px 48px rgba(20, 43, 76, .17);
    --ee-font-stack: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.ee-wrapper,
.ee-public-wrapper {
    font-family: var(--ee-font-stack) !important;
    color: var(--ee-text-body);
    background: #f4f7fb;
    font-size: 14px;
    line-height: 1.58;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
.ee-wrapper :is(h1,h2,h3,h4,h5),
.ee-public-wrapper :is(h1,h2,h3,h4,h5) {
    color: #19283e;
    letter-spacing: -.02em;
    line-height: 1.3;
}
.ee-wrapper h1, .ee-public-wrapper h1 { font-size: clamp(24px, 2.2vw, 31px); font-weight: 800; }
.ee-wrapper h2, .ee-public-wrapper h2 { font-size: clamp(20px, 1.8vw, 25px); font-weight: 750; }
.ee-wrapper h3, .ee-public-wrapper h3 { font-size: 16px; font-weight: 750; }
.ee-wrapper p, .ee-public-wrapper p { color: inherit; line-height: 1.62; }
.ee-wrapper :is(a,button,input,select,textarea),
.ee-public-wrapper :is(a,button,input,select,textarea) { outline-offset: 3px; }
.ee-wrapper :is(a,button,input,select,textarea):focus-visible,
.ee-public-wrapper :is(a,button,input,select,textarea):focus-visible { outline: 3px solid rgba(49,89,207,.28); }

/* Institution dashboard: polished app canvas and clean identity header. */
.ee-institution-app {
    --ee-app-ink: #19283e;
    --ee-app-muted: #718198;
    --ee-app-line: #dce5ef;
    --ee-app-surface: #ffffff;
    --ee-app-shadow: 0 3px 14px rgba(28, 49, 82, .045);
    background: #f4f7fb !important;
    border: 1px solid #e1e8f1 !important;
    border-radius: 22px !important;
    box-shadow: 0 15px 44px rgba(22, 42, 72, .055) !important;
    font-family: var(--ee-font-stack) !important;
    color: #3b4b62 !important;
}
.ee-institution-app > .ee-institution-brandbar,
.ee-institution-app .ee-institution-brandbar {
    background: #fff !important;
    border: 1px solid #dce5ef !important;
    border-left: 4px solid #3159cf !important;
    border-radius: 13px !important;
    box-shadow: 0 3px 14px rgba(28,49,82,.045) !important;
}
.ee-institution-app .ee-institution-brandbar .ee-card-title.no-border {
    color: #19283e !important;
}
.ee-institution-app .ee-institution-page-header p,
.ee-institution-app .ee-header p { color: #718198 !important; }
.ee-institution-app .ee-header,
.ee-institution-app .ee-institution-page-header { margin-bottom: 20px; }

/* Event tiles and general content cards. */
.ee-institution-app .ee-card,
.ee-public-wrapper .ee-card,
.ee-wrapper:not(.ee-institution-app) .ee-card {
    background: #fff;
    border-color: #dce5ef;
    border-radius: 13px;
    box-shadow: 0 2px 9px rgba(26, 46, 77, .04);
}
.ee-institution-app .ee-card:hover,
.ee-public-wrapper .ee-card:hover,
.ee-wrapper:not(.ee-institution-app) .ee-card:hover {
    border-color: #cbd8eb;
    box-shadow: 0 8px 23px rgba(26, 46, 77, .075);
}
.ee-institution-app #view-events > .ee-grid > .ee-card,
.ee-institution-app #view-events > .ee-grid > .ee-card:hover {
    border-radius: 15px;
}
.ee-institution-app #view-events > .ee-grid > .ee-card > div:first-child {
    background-color: #e8eef8;
}
.ee-institution-app .ee-card-title,
.ee-public-wrapper .ee-card-title {
    color: #748198;
    letter-spacing: .06em;
}
.ee-institution-app .ee-card-title.no-border,
.ee-public-wrapper .ee-card-title.no-border { color: #19283e !important; }

/* Buttons: consistent tutorial blue with accessible contrast. */
.ee-wrapper .ee-btn,
.ee-public-wrapper .ee-btn {
    font-family: var(--ee-font-stack) !important;
    font-weight: 700;
    letter-spacing: -.005em;
    border-radius: 9px;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ee-wrapper .ee-btn-primary,
.ee-public-wrapper .ee-btn-primary {
    background: #3159cf !important;
    border-color: #3159cf !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(49,89,207,.16);
}
.ee-wrapper .ee-btn-primary:hover,
.ee-public-wrapper .ee-btn-primary:hover {
    background: #2448b7 !important;
    border-color: #2448b7 !important;
    box-shadow: 0 6px 14px rgba(49,89,207,.21);
    color: #fff !important;
}
.ee-wrapper .ee-btn-white,
.ee-public-wrapper .ee-btn-white {
    background: #fff !important;
    border-color: #d6e0ed !important;
    color: #344760 !important;
}
.ee-wrapper .ee-btn-white:hover,
.ee-public-wrapper .ee-btn-white:hover { background: #f3f7fc !important; border-color: #c3d1e4 !important; }
.ee-wrapper .ee-btn-danger,
.ee-public-wrapper .ee-btn-danger { background: #c83f50 !important; border-color: #c83f50 !important; }
.ee-wrapper .ee-btn-success,
.ee-public-wrapper .ee-btn-success { background: #16845d !important; border-color: #16845d !important; }

/* Forms: consistent field height, labels, spacing and accessible focus. */
.ee-wrapper .ee-form-group,
.ee-public-wrapper .ee-form-group { margin-bottom: 15px; }
.ee-wrapper label,
.ee-public-wrapper label { color: #344760; font-weight: 650; }
.ee-wrapper .ee-form-control,
.ee-wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
.ee-wrapper select, .ee-wrapper textarea,
.ee-public-wrapper .ee-form-control,
.ee-public-wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
.ee-public-wrapper select, .ee-public-wrapper textarea {
    border-color: #d4dfed;
    border-radius: 9px;
    background: #fff;
    color: #19283e;
    font-family: var(--ee-font-stack);
}
.ee-wrapper input:focus, .ee-wrapper select:focus, .ee-wrapper textarea:focus,
.ee-public-wrapper input:focus, .ee-public-wrapper select:focus, .ee-public-wrapper textarea:focus {
    border-color: #7895e8;
    box-shadow: 0 0 0 3px rgba(49,89,207,.12);
}
.ee-wrapper input[type="checkbox"], .ee-wrapper input[type="radio"],
.ee-public-wrapper input[type="checkbox"], .ee-public-wrapper input[type="radio"] { accent-color: #3159cf; }

/* Tabs, list filters and section navigation. */
.ee-institution-app .ee-dash-tabs,
.ee-institution-app .ee-tabs-container {
    border-color: #dce5ef !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 2px 8px rgba(26,46,77,.025);
}
.ee-institution-app .ee-dash-tab.active,
.ee-institution-app .ee-tab-item.active {
    color: #2448b7 !important;
    background: #eaf0ff !important;
    box-shadow: inset 0 0 0 1px #d9e3ff !important;
}
.ee-institution-app .ee-dash-tab:hover,
.ee-institution-app .ee-tab-item:hover { color: #2448b7 !important; background: #f0f4ff !important; }
.ee-list-tabs, .ee-archive-tabs { gap: 7px !important; }
.ee-list-tab, .ee-archive-tab {
    border: 1px solid #dce5ef !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #566780 !important;
    font-weight: 700 !important;
}
.ee-list-tab.active, .ee-archive-tab.active { background: #3159cf !important; border-color: #3159cf !important; color: #fff !important; }

/* Tables remain inside their own scroll surfaces and keep comfortable density. */
.ee-wrapper .ee-table-responsive,
.ee-public-wrapper .ee-table-responsive { border-color: #dce5ef; border-radius: 11px; box-shadow: 0 2px 8px rgba(26,46,77,.025); }
.ee-wrapper .ee-table th, .ee-public-wrapper .ee-table th { background: #f2f5fa; color: #5c6d85; font-weight: 800; }
.ee-wrapper .ee-table td, .ee-public-wrapper .ee-table td { color: #344760; }
.ee-wrapper .ee-table tbody tr:hover, .ee-public-wrapper .ee-table tbody tr:hover { background: #f6f9ff; }
.ee-institution-app .ee-status-mini-select { border-color: #dce5ef; }

/* Participant app shell: sidebar, content panels and event tiles match the demo. */
.ee-public-wrapper {
    max-width: 1480px !important;
    gap: 18px !important;
    align-items: stretch !important;
    background: #f4f7fb !important;
}
.ee-public-sidebar {
    border: 1px solid #dce5ef !important;
    border-radius: 13px !important;
    background: #fff !important;
    box-shadow: 0 3px 13px rgba(26,46,77,.045) !important;
    overflow: hidden;
}
.ee-sidebar-header {
    background: linear-gradient(180deg,#f0f5ff 0%,#fff 100%) !important;
    border-bottom: 1px solid #e4ebf4 !important;
}
.ee-user-avatar { box-shadow: 0 5px 16px rgba(25,48,82,.12) !important; }
.ee-user-name { color: #19283e !important; }
.ee-user-email { color: #718198 !important; }
.ee-nav-item {
    border: 1px solid transparent;
    color: #485a73 !important;
    font-weight: 650 !important;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.ee-nav-item i { color: #7a8aa1 !important; }
.ee-nav-item:hover,
.ee-nav-item.active { background: #eaf0ff !important; border-color: #dce5ff !important; color: #2448b7 !important; }
.ee-nav-item:hover i,
.ee-nav-item.active i { color: #3159cf !important; }
.ee-public-content { min-width: 0; }
.ee-mobile-top-bar {
    background: rgba(255,255,255,.96) !important;
    border: 1px solid #dce5ef !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 12px rgba(26,46,77,.045) !important;
    backdrop-filter: blur(10px);
}
.ee-mobile-top-bar h2 { color: #19283e !important; font-weight: 800 !important; }
.ee-menu-btn { color: #3159cf !important; }
.ee-event-list-card {
    background: #fff !important;
    border: 1px solid #dce5ef !important;
    border-radius: 13px !important;
    overflow: hidden;
    box-shadow: 0 2px 9px rgba(26,46,77,.04) !important;
}
.ee-event-list-card:hover { border-color: #c5d4ef !important; box-shadow: 0 8px 24px rgba(26,46,77,.08) !important; }
.ee-event-info h3 { color: #19283e !important; }
.ee-event-id-label { color: #5f7087 !important; }
.ee-event-id-label strong { color: #3159cf !important; }
.ee-event-type-badge { border-radius: 7px !important; letter-spacing: .035em; }
.ee-event-code-search { border: 1px solid #dce5ef; box-shadow: 0 3px 13px rgba(26,46,77,.035); }
.ee-event-code-result { border-top-color: #e5ebf3; }
.ee-public-event-code-wrap .ee-card { border-top: 3px solid #3159cf; }
.ee-public-event-code strong, .ee-event-workspace-code strong { color: #3159cf !important; }

/* Schedule timeline, materials, downloads, coupons and collaboration panels. */
.ee-timeline-content, .ee-material-item, .ee-coupon-ticket,
.ee-author-team-panel, .ee-chat-thread, .ee-profile-form-card {
    border-color: #dce5ef !important;
    border-radius: 12px !important;
    background: #fff;
    box-shadow: 0 2px 8px rgba(26,46,77,.035);
}
.ee-session-material-link { border-color: #dce5ef !important; background: #fff; border-radius: 9px !important; }
.ee-session-material-link:hover { background: #f4f7ff; border-color: #c5d5f2 !important; }
.ee-team-code-row { background: linear-gradient(115deg,#eef3ff,#f8faff) !important; border-color: #dce5ff !important; }
.ee-team-code { color: #2448b7 !important; }
.ee-team-owner-pill { background: #eaf0ff !important; color: #2448b7 !important; }
.ee-coupon-ticket .coupon-icon { background: #eaf0ff !important; color: #3159cf !important; }
.ee-coupon-ticket .coupon-qr { border-color: #d6e1ff !important; background: #eaf0ff !important; color: #2448b7 !important; }
.ee-connect-btn { border-radius: 11px !important; }

/* Alerts and modal dialogs. */
.ee-wrapper .ee-alert, .ee-public-wrapper .ee-alert { border-radius: 10px; line-height: 1.55; }
.ee-modal-overlay { backdrop-filter: blur(5px); }
.ee-modal-content {
    border: 1px solid #dce5ef !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 80px rgba(12,28,52,.25) !important;
    font-family: var(--ee-font-stack) !important;
}
.ee-modal-close { color: #718198 !important; }
.ee-modal-close:hover { color: #c83f50 !important; }

/* Fixed participant navigation respects safe areas and never hides the content. */
.ee-public-wrapper { padding-bottom: calc(100px + env(safe-area-inset-bottom)) !important; }
.ee-bottom-nav {
    min-height: 68px;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom)) !important;
    background: rgba(255,255,255,.97) !important;
    border-top: 1px solid #dce5ef !important;
    box-shadow: 0 -6px 20px rgba(23,43,72,.09) !important;
    backdrop-filter: blur(12px);
}
.ee-bottom-nav-item {
    flex: 1 1 0;
    min-width: 0 !important;
    min-height: 46px;
    padding: 5px 4px !important;
    border-radius: 10px !important;
    color: #65758c !important;
    font-size: 10.5px !important;
    font-weight: 750 !important;
}
.ee-bottom-nav-item i { font-size: 20px !important; margin-bottom: 4px !important; }
.ee-bottom-nav-item.active { color: #3159cf !important; background: #eaf0ff !important; }
.ee-bottom-nav-item.ee-bottom-nav-scan { color: #3159cf !important; }
.ee-single-event-header {
    background: rgba(255,255,255,.97) !important;
    border-bottom: 1px solid #dce5ef !important;
    box-shadow: 0 3px 12px rgba(26,46,77,.04);
}
.ee-single-event-header h2 { color: #19283e !important; font-weight: 800 !important; }

/* Responsive polish: retain every action and let only wide data areas scroll. */
@media (min-width: 992px) {
    .ee-public-wrapper { padding: 20px !important; }
    .ee-public-sidebar { position: sticky; top: 18px; }
}
@media (max-width: 991px) {
    .ee-public-wrapper { display: block !important; padding: 12px 12px calc(100px + env(safe-area-inset-bottom)) !important; }
    .ee-public-sidebar { border-radius: 0 14px 14px 0 !important; }
    .ee-mobile-top-bar { margin-bottom: 12px; }
}
@media (max-width: 640px) {
    .ee-institution-app {
        width: 100% !important; max-width: 100% !important; margin: 0 !important;
        padding: 14px 12px calc(28px + env(safe-area-inset-bottom)) !important;
        border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
        background: #f4f7fb !important;
    }
    .ee-institution-app .ee-institution-brandbar { border-radius: 12px !important; padding: 17px 16px !important; }
    .ee-institution-app .ee-card, .ee-public-wrapper .ee-card { border-radius: 12px !important; }
    .ee-institution-app .ee-card:hover, .ee-public-wrapper .ee-card:hover { transform: none; }
    .ee-institution-app .ee-dash-tabs, .ee-institution-app .ee-tabs-container { max-width: 100%; }
    .ee-institution-app .ee-dash-tab, .ee-institution-app .ee-tab-item { min-height: 43px; font-size: 12.5px !important; }
    .ee-public-wrapper { padding: 9px 9px calc(104px + env(safe-area-inset-bottom)) !important; }
    .ee-public-wrapper .ee-header { gap: 10px; }
    .ee-public-wrapper .ee-event-code-search { align-items: stretch; }
    .ee-public-wrapper .ee-event-code-search-form { flex-basis: 100%; width: 100%; }
    .ee-public-wrapper .ee-event-code-search-form .ee-btn { flex: 0 0 auto; }
    .ee-public-wrapper .ee-event-code-result { align-items: flex-start; flex-direction: column; }
    .ee-event-list-card { width: 100%; }
    .ee-event-info { padding: 15px !important; }
    .ee-bottom-nav { min-height: 70px; }
    .ee-bottom-nav-item { min-height: 48px; font-size: 10px !important; }
    .ee-bottom-nav-item i { font-size: 20px !important; }
    .ee-modal-overlay { padding: 8px !important; }
    .ee-modal-content { max-height: calc(100dvh - 16px) !important; overflow-y: auto; }
    .ee-team-join-row { flex-wrap: wrap; }
    .ee-team-join-row .ee-form-control { max-width: 100%; flex: 1 1 170px; }
    .ee-team-request-row { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    .ee-wrapper *, .ee-public-wrapper *, .ee-institution-app * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}