*{box-sizing:border-box}html{min-height:0}body{min-height:0;height:auto}body{margin:0;font-family:var(--font-family);font-size:var(--text-base);background-color:var(--color-bg-page);color:var(--color-text)}#app,.portal-app{min-height:0}.portal-app{width:100%}.page-fade-enter-active,.page-fade-leave-active{transition:opacity .3s ease,transform .3s ease}.page-fade-enter-from{opacity:0;transform:translateY(10px)}.page-fade-leave-to{opacity:0;transform:translateY(-10px)}.btn-primary{background:var(--color-primary);color:#fff;border:none;padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);font-weight:var(--font-semibold);font-size:var(--text-base);cursor:pointer;transition:background .2s,transform .15s}.btn-primary:hover{background:var(--color-primary-hover)}.btn,.icon-btn,.tab-item,.card,.dashboard-card{transition:all .25s cubic-bezier(.4,0,.2,1)}.card:hover,.dashboard-card:hover{box-shadow:var(--shadow-card-hover)}.menu-icon[data-v-2eb375ec]{display:inline-flex;align-items:center;justify-content:center;color:inherit}.menu-icon svg[data-v-2eb375ec]{display:block}.app-layout[data-v-6cdef262]{background-color:var(--color-bg-page);background-size:cover;background-position:center;background-attachment:scroll;padding-bottom:var(--space-8, 2rem)}[data-theme=light] .app-layout[data-v-6cdef262]{background-image:url(/images/background/user-portal-light.webp)}[data-theme=dark] .app-layout[data-v-6cdef262]{background-image:url(/images/background/user-portal-dark.webp)}.top-nav[data-v-6cdef262]{background:var(--color-bg, #fff);box-shadow:0 4px 12px #0000000d;position:sticky;top:0;z-index:100;border-bottom:1px solid var(--color-border)}.top-nav-inner[data-v-6cdef262]{width:100%;margin:0;padding:var(--space-3) var(--space-5);display:flex;justify-content:space-between;align-items:center;gap:var(--space-6)}.top-nav-search-and-actions[data-v-6cdef262]{display:flex;align-items:center;gap:var(--space-4);flex:1;justify-content:flex-end}.logo[data-v-6cdef262]{display:flex;align-items:center;text-decoration:none;color:var(--color-text);flex-shrink:0}.logo-img[data-v-6cdef262]{height:48px;width:auto;display:block;object-fit:contain}.search-wrap[data-v-6cdef262]{width:100%;min-width:200px;max-width:320px;display:flex;align-items:center;gap:var(--space-2);background:var(--color-bg-input);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);border:1px solid transparent;transition:background .2s,border-color .2s;margin-left:auto;margin-right:auto}.search-wrap[data-v-6cdef262]:focus-within{background:var(--color-bg);border-color:var(--color-border);box-shadow:var(--shadow-focus)}.search-icon[data-v-6cdef262]{display:flex;align-items:center;justify-content:center;color:var(--color-text-subtle);flex-shrink:0}.search-input[data-v-6cdef262]{border:none;background:none;width:100%;font-size:var(--text-md);outline:none;color:var(--color-text)}.search-input[data-v-6cdef262]::placeholder{color:var(--color-text-placeholder)}.top-nav-right[data-v-6cdef262]{display:flex;align-items:center;gap:var(--space-2)}.icon-btn[data-v-6cdef262]{width:40px;height:40px;border:none;background:transparent;border-radius:var(--radius-md);cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);transition:color .2s,background .2s}.icon-btn[data-v-6cdef262]:hover{background:var(--color-bg-hover);color:var(--color-text)}.icon-btn[data-v-6cdef262]:focus{outline:none}.icon-btn[data-v-6cdef262]:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}.icon-btn svg[data-v-6cdef262]{display:block}.notification-wrap[data-v-6cdef262],.badge-wrap[data-v-6cdef262]{position:relative}.notification-popup[data-v-6cdef262]{position:absolute;top:calc(100% + var(--space-2));right:0;width:360px;max-width:calc(100vw - 2rem);background:var(--color-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-card-hover);border:1px solid var(--color-border);z-index:200;overflow:hidden}.notification-popup-header[data-v-6cdef262]{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border);background:var(--color-bg-muted)}.notification-popup-title[data-v-6cdef262]{font-weight:var(--font-bold);font-size:var(--text-base);color:var(--color-text)}.notification-popup-subtitle[data-v-6cdef262]{margin-top:var(--space-1);font-size:var(--text-xs);color:var(--color-text-muted)}.notification-popup-subtitle-sep[data-v-6cdef262]{margin:0 var(--space-1)}.notification-popup-links[data-v-6cdef262]{display:flex;justify-content:space-between;gap:var(--space-2);padding:var(--space-2) var(--space-5) 0}.notification-popup-link[data-v-6cdef262]{flex:1;text-align:center;font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-primary);text-decoration:none;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--color-primary-muted)}.notification-popup-link[data-v-6cdef262]:hover{background:var(--color-bg-hover);color:var(--color-primary-hover)}.notification-popup-list[data-v-6cdef262]{list-style:none;margin:0;padding:var(--space-2) 0;max-height:280px;overflow-y:auto}.notification-popup-item[data-v-6cdef262]{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-5)}.notification-popup-item[data-v-6cdef262]:hover{background:var(--color-bg-hover)}.notification-popup-dot[data-v-6cdef262]{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:6px}.notification-popup-text[data-v-6cdef262]{font-size:var(--text-sm);color:var(--color-text);line-height:1.4}.notification-popup-highlight[data-v-6cdef262]{font-weight:var(--font-semibold);color:var(--color-primary)}.notification-popup-see-all[data-v-6cdef262]{display:block;padding:var(--space-3) var(--space-5);text-align:center;font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-primary);text-decoration:none;border-top:1px solid var(--color-border);background:var(--color-bg-muted)}.notification-popup-see-all[data-v-6cdef262]:hover{background:var(--color-bg-hover);text-decoration:underline}.badge[data-v-6cdef262]{position:absolute;top:2px;right:2px;min-width:16px;height:16px;background:var(--color-primary);color:#fff;font-size:var(--text-xs);font-weight:var(--font-semibold);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;padding:0 4px}.user-menu[data-v-6cdef262]{position:relative;margin-left:var(--space-2);padding-left:var(--space-3);border-left:1px solid var(--color-border)}.user-avatar-btn[data-v-6cdef262]{background:none;border:none;padding:0;cursor:pointer;display:block}.user-avatar-img[data-v-6cdef262]{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid transparent;transition:border-color .2s}.user-avatar-btn:hover .user-avatar-img[data-v-6cdef262]{border-color:var(--color-primary)}.user-popup[data-v-6cdef262]{position:absolute;top:calc(100% + var(--space-3));right:0;width:300px;background:var(--color-bg);border-radius:var(--radius-xl);box-shadow:var(--shadow-card-hover);border:1px solid var(--color-border);padding:var(--space-5);z-index:210;display:flex;flex-direction:column;gap:var(--space-5);animation:popup-fade-6cdef262 .2s ease-out}@keyframes popup-fade-6cdef262{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.up-header[data-v-6cdef262]{display:flex;justify-content:space-between;align-items:center}.up-title[data-v-6cdef262]{font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--color-text)}.up-close[data-v-6cdef262]{background:none;border:none;color:var(--color-text-muted);cursor:pointer;padding:var(--space-1);border-radius:var(--radius-sm)}.up-close[data-v-6cdef262]:hover{color:var(--color-text);background:var(--color-bg-hover)}.up-profile-info[data-v-6cdef262]{display:flex;align-items:center;gap:var(--space-4)}.up-avatar-large[data-v-6cdef262]{width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--color-primary-muted)}.up-user-details[data-v-6cdef262]{display:flex;flex-direction:column;gap:var(--space-1)}.up-name[data-v-6cdef262]{font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--color-text)}.up-role[data-v-6cdef262]{font-size:var(--text-sm);color:var(--color-text-muted)}.up-email[data-v-6cdef262]{font-size:var(--text-xs);color:var(--color-text-muted);display:flex;align-items:center;gap:var(--space-2)}.up-menu-list[data-v-6cdef262]{display:flex;flex-direction:column;gap:0}.up-menu-item[data-v-6cdef262]{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;color:inherit;padding:var(--space-3) var(--space-2);border-radius:var(--radius-md);transition:background .2s}.up-menu-item[data-v-6cdef262]:hover{background:var(--color-bg-hover)}.up-item-icon[data-v-6cdef262]{width:40px;height:40px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}.up-icon-blue[data-v-6cdef262]{background:var(--color-primary-muted);color:var(--color-primary)}.up-icon-green[data-v-6cdef262]{background:var(--color-success-bg);color:var(--color-success-text)}.up-icon-orange[data-v-6cdef262]{background:var(--color-accent-orange-muted);color:var(--color-accent-orange)}.up-item-text[data-v-6cdef262]{display:flex;flex-direction:column;gap:2px}.up-item-title[data-v-6cdef262]{font-weight:var(--font-semibold);font-size:var(--text-base);color:var(--color-text)}.up-item-sub[data-v-6cdef262]{font-size:var(--text-xs);color:var(--color-text-muted)}.up-logout-btn[data-v-6cdef262]{width:100%;background:var(--color-primary);color:#fff;border:none;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-weight:var(--font-semibold);font-size:var(--text-base);cursor:pointer;transition:background .2s;margin-top:var(--space-2)}.up-logout-btn[data-v-6cdef262]:hover{background:var(--color-primary-hover)}.secondary-menu[data-v-6cdef262]{background:var(--color-bg);border-bottom:1px solid var(--color-border);box-shadow:0 1px 0 0 var(--color-border)}.secondary-menu-inner[data-v-6cdef262]{width:100%;margin:0;padding:0 var(--space-5);display:flex;justify-content:center;gap:0;overflow-x:auto;scrollbar-width:none}.secondary-menu-inner[data-v-6cdef262]::-webkit-scrollbar{display:none}.menu-item[data-v-6cdef262]{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-5);color:var(--color-text-muted);text-decoration:none;font-size:var(--text-base);font-weight:var(--font-medium);white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s,background .2s}.menu-item[data-v-6cdef262]:hover{color:var(--color-text);background:var(--color-bg-hover)}.menu-item.active[data-v-6cdef262]{color:var(--color-primary);font-weight:var(--font-semibold);border-bottom-color:var(--color-primary)}.menu-item[data-v-6cdef262]:focus{outline:none}.menu-item[data-v-6cdef262]:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}.menu-icon[data-v-6cdef262]{display:inline-flex;align-items:center;justify-content:center;color:inherit}.menu-icon svg[data-v-6cdef262]{display:block}.menu-arrow[data-v-6cdef262]{display:none}.menu-arrow svg[data-v-6cdef262]{display:block}.main-content[data-v-6cdef262]{width:100%;padding:var(--space-6) var(--space-5);max-width:1400px;margin:0 auto}@media(max-width:768px){.search-wrap[data-v-6cdef262]{display:none}.main-content[data-v-6cdef262]{padding:var(--space-4)}}.modal-overlay[data-v-6cdef262]{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:9999;padding:var(--space-5)}.modal-content[data-v-6cdef262]{background:var(--color-bg);width:100%;max-width:400px;border-radius:var(--radius-lg);box-shadow:var(--shadow-card-hover);border:1px solid var(--color-border);overflow:hidden;animation:modal-pop .25s ease-out}.modal-header[data-v-6cdef262]{padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--color-border)}.modal-title[data-v-6cdef262]{margin:0;font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--color-text)}.modal-body[data-v-6cdef262]{padding:var(--space-6);color:var(--color-text-muted);font-size:var(--text-base);line-height:1.5}.modal-footer[data-v-6cdef262]{padding:var(--space-4) var(--space-6);background:var(--color-bg-muted);display:flex;justify-content:flex-end;gap:var(--space-3)}.btn[data-v-6cdef262]{padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);border:none;font-weight:var(--font-semibold);font-size:var(--text-base);cursor:pointer;transition:background .2s}.btn-secondary[data-v-6cdef262]{background:var(--color-border);color:var(--color-text)}.btn-secondary[data-v-6cdef262]:hover{background:var(--color-bg-hover);color:var(--color-text)}.btn-danger[data-v-6cdef262]{background:#ef4444;color:#fff}.btn-danger[data-v-6cdef262]:hover{background:#dc2626}:root{--font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;--color-primary: #764df0;--color-primary-hover: #5e3ac7;--color-primary-muted: rgba(118, 77, 240, .12);--color-primary-focus: rgba(118, 77, 240, .35);--color-accent-orange: #ff9f43;--color-accent-orange-hover: #ffb76b;--color-accent-orange-muted: rgba(255, 159, 67, .12);--color-text: #1a1e42;--color-text-muted: #64748b;--color-text-subtle: #94a3b8;--color-text-placeholder: #94a3b8;--color-bg: #ffffff;--color-bg-page: #f5f7fb;--color-bg-muted: #f8faff;--color-bg-input: #f0f2f5;--color-bg-hover: #f1f5f9;--color-bg-hover-strong: #f8fafc;--color-border: #e2e8f0;--color-border-dashed: #e2e8f0;--color-success-bg: #dcfce7;--color-success-text: #166534;--color-warning-bg: #fef9c3;--color-warning-text: #854d0e;--color-info-bg: #cffafe;--color-info-text: #0e7490;--color-high-bg: #fce7f3;--color-high-text: #9d174d;--text-xs: .75rem;--text-sm: .8rem;--text-base: .875rem;--text-md: .9rem;--text-lg: 1rem;--text-xl: 1.1rem;--text-2xl: 1.15rem;--text-3xl: 1.35rem;--text-display: 1.75rem;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 10px;--radius-xl: 14px;--radius-full: 9999px;--shadow-card: 0 2px 12px rgba(0, 0, 0, .06);--shadow-card-hover: 0 4px 20px rgba(0, 0, 0, .08);--shadow-focus: 0 0 0 2px var(--color-primary-focus);--focus-ring: 2px solid var(--color-primary);--focus-offset: 2px}[data-theme=dark]{--color-bg: #1a1e42;--color-bg-page: #111435;--color-bg-muted: #1e2255;--color-bg-input: #2d336b;--color-bg-hover: #2d336b;--color-bg-hover-strong: #363d7e;--color-text: #ffffff;--color-text-muted: #cbd5e1;--color-text-subtle: #94a3b8;--color-border: #2d336b;--color-border-dashed: #363d7e;--shadow-card: 0 4px 20px rgba(0, 0, 0, .4)}[data-theme=dark] .search-bar input,[data-theme=dark] h1,[data-theme=dark] h2,[data-theme=dark] h3,[data-theme=dark] h4,[data-theme=dark] h5,[data-theme=dark] h6,[data-theme=dark] .page-title,[data-theme=dark] .page-subtitle,[data-theme=dark] .card h3,[data-theme=dark] .card-header h3,[data-theme=dark] .card-subtitle,[data-theme=dark] .stat-value,[data-theme=dark] .stat-label,[data-theme=dark] .breadcrumb,[data-theme=dark] .header-main h2,[data-theme=dark] .header-main h3,[data-theme=dark] .breadcrumbs span,[data-theme=dark] .congrats-content h2,[data-theme=dark] .order-stats .stat-details strong,[data-theme=dark] .revenue-amount strong,[data-theme=dark] .metric-value strong,[data-theme=dark] .table-card h3,[data-theme=dark] .regional-card h3,[data-theme=dark] .data-table th,[data-theme=dark] .data-table td,[data-theme=dark] .location-item .region-name,[data-theme=dark] .product-cell span,[data-theme=dark] .text-muted,[data-theme=dark] .chart-center-text span,[data-theme=dark] .attendance-donut-center span,[data-theme=dark] .card-title,[data-theme=dark] .payment-amount,[data-theme=dark] .payment-meta,[data-theme=dark] .payment-date,[data-theme=dark] .payment-type,[data-theme=dark] .payment-status{color:#fff!important}[data-theme=dark] .admin-header,[data-theme=dark] .admin-nav,[data-theme=dark] .admin-main .card,[data-theme=dark] .admin-main .mini-card{background:var(--color-bg)!important;border-color:var(--color-border)!important}[data-theme=dark] .search-bar{background:var(--color-bg-input)!important}[data-theme=dark] .search-bar input{color:var(--color-text)!important}[data-theme=dark] .search-bar input::placeholder{color:var(--color-text-subtle)!important}[data-theme=dark] .icon-btn{background:var(--color-bg-muted)!important}[data-theme=dark] .icon-btn:hover{background:var(--color-bg-hover)!important}[data-theme=dark] .user-profile{background:var(--color-bg)!important;border-color:var(--color-border)!important}[data-theme=dark] .user-profile:hover{background:var(--color-bg-hover)!important}[data-theme=dark] .user-name,[data-theme=dark] .profile-dropdown .dropdown-item{color:var(--color-text)!important}[data-theme=dark] .user-role,[data-theme=dark] .dropdown-icon{color:var(--color-text-muted)!important}[data-theme=dark] .profile-dropdown{background:var(--color-bg)!important;border-color:var(--color-border)!important}[data-theme=dark] .profile-dropdown .dropdown-item:hover{background:var(--color-bg-hover)!important}[data-theme=dark] .dropdown-divider{background:var(--color-border)!important}[data-theme=dark] .nav-item{color:var(--color-text-muted)!important}[data-theme=dark] .nav-item:hover,[data-theme=dark] .nav-item.active{color:var(--color-text)!important}.focus-ring:focus{outline:none}.focus-ring:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}button:focus,input:focus,select:focus{outline:none}button:focus,button:active,.btn:focus,.btn:active,a.btn:focus,a.btn:active,[class*=btn-]:focus,[class*=btn-]:active,.action-btn:focus,.action-btn:active,.icon-btn:focus,.icon-btn:active,.nav-item:focus,.nav-item:active,[role=button]:focus,[role=button]:active,.tab-item:focus,.tab-item:active,.topic-card:focus,.topic-card:active,.panel-tab:focus,.panel-tab:active,.filter-tab:focus,.filter-tab:active,.calendar-btn:focus,.calendar-btn:active,.sidebar-request-btn:focus,.sidebar-request-btn:active,.suggestion-connect:focus,.suggestion-connect:active,.side-events-filter-btn:focus,.side-events-filter-btn:active,.card-menu-btn:focus,.card-menu-btn:active,.fab:focus,.fab:active,.btn-icon:focus,.btn-icon:active,.pagination-controls button:focus,.pagination-controls button:active{transform:none!important;box-shadow:none!important;scale:none!important}button:focus-visible,.btn:focus-visible,a.btn:focus-visible,[class*=btn-]:focus-visible,.action-btn:focus-visible,.icon-btn:focus-visible,.nav-item:focus-visible,[role=button]:focus-visible,.tab-item:focus-visible,.topic-card:focus-visible,.panel-tab:focus-visible,.filter-tab:focus-visible,.calendar-btn:focus-visible,.sidebar-request-btn:focus-visible,.suggestion-connect:focus-visible,.side-events-filter-btn:focus-visible,.card-menu-btn:focus-visible,.fab:focus-visible,.btn-icon:focus-visible,.pagination-controls button:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset);box-shadow:none!important;transform:none!important;scale:none!important}