:root{--blue-50:#e8f0fe;--blue-100:#c5d9f8;--blue-200:#8db3f0;--blue-300:#5a8fe6;--blue-400:#2d72d9;--blue-500:#0056b3;--blue-600:#004a9a;--blue-700:#003d80;--blue-800:#002f63;--blue-900:#001f42;--green-50:#e6f7ec;--green-100:#c3ebd0;--green-200:#85d6a1;--green-300:#52c278;--green-400:#34b35c;--green-500:#28a745;--green-600:#218c3a;--green-700:#1a712f;--green-800:#135624;--green-900:#0d3b19;--gray-50:#f8f9fa;--gray-100:#f1f3f5;--gray-200:#e9ecef;--gray-300:#dee2e6;--gray-400:#ced4da;--gray-500:#adb5bd;--gray-600:#868e96;--gray-700:#495057;--gray-800:#343a40;--gray-900:#212529;--color-primary:var(--blue-500);--color-primary-light:var(--blue-100);--color-primary-dark:var(--blue-700);--color-secondary:var(--green-500);--color-secondary-light:var(--green-100);--color-secondary-dark:var(--green-700);--color-success:#28a745;--color-warning:#f59e0b;--color-danger:#dc3545;--color-info:#17a2b8;--bg-primary:#fff;--bg-secondary:var(--gray-50);--bg-tertiary:var(--gray-100);--bg-sidebar:#001f42;--bg-card:#fff;--bg-overlay:rgba(0,0,0,.5);--text-primary:var(--gray-900);--text-secondary:var(--gray-600);--text-muted:var(--gray-500);--text-inverse:#fff;--text-link:var(--blue-500);--font-family:"Noto Sans Arabic","Inter",-apple-system,BlinkMacSystemFont,sans-serif;--font-family-latin:"Inter","Noto Sans",-apple-system,sans-serif;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--shadow-sm:0 1px 2px rgba(0,0,0,.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,.07),0 2px 4px -2px rgba(0,0,0,.05);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -4px rgba(0,0,0,.04);--shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.05);--shadow-card:0 1px 3px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.03);--shadow-glow-blue:0 0 20px rgba(0,86,179,.15);--shadow-glow-green:0 0 20px rgba(40,167,69,.15);--transition-fast:150ms ease;--transition-base:250ms ease;--transition-slow:400ms ease;--transition-spring:500ms cubic-bezier(0.34,1.56,0.64,1);--sidebar-width:280px;--sidebar-collapsed:72px;--header-height:64px;--content-max-width:1400px}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family);background:var(--bg-secondary);color:var(--text-primary);line-height:1.6;direction:rtl;min-height:100vh}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--blue-900) 0,var(--blue-700) 40%,var(--blue-500) 100%);position:relative;overflow:hidden}.login-page:before{content:"";position:absolute;width:600px;height:600px;background:radial-gradient(circle,rgba(40,167,69,.12) 0,transparent 70%);top:-200px;left:-200px;animation:floatOrb 15s ease-in-out infinite}.login-page:after{content:"";position:absolute;width:400px;height:400px;background:radial-gradient(circle,rgba(0,86,179,.15) 0,transparent 70%);bottom:-100px;right:-100px;animation:floatOrb 12s ease-in-out infinite reverse}@keyframes floatOrb{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-30px) scale(1.05)}66%{transform:translate(-20px,20px) scale(.95)}}.login-card{background:hsla(0,0%,100%,.97);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--radius-xl);padding:var(--space-12);width:100%;max-width:460px;box-shadow:var(--shadow-xl),0 0 80px rgba(0,86,179,.12);position:relative;z-index:1;text-align:center;animation:slideUp .6s var(--transition-spring)}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.login-logo{width:130px;height:130px;margin:0 auto var(--space-5);border-radius:var(--radius-full);overflow:hidden;box-shadow:0 4px 20px rgba(0,86,179,.2),0 0 0 3px rgba(0,86,179,.08);animation:logoPulse 3s ease-in-out infinite}@keyframes logoPulse{0%,to{box-shadow:0 4px 20px rgba(0,86,179,.2),0 0 0 3px rgba(0,86,179,.08)}50%{box-shadow:0 4px 30px rgba(0,86,179,.3),0 0 0 5px rgba(0,86,179,.12)}}.login-logo img{width:100%;height:100%;object-fit:cover}.login-title{font-family:Noto Sans Arabic,sans-serif;font-size:1.6rem;font-weight:900;color:var(--blue-800);margin-bottom:var(--space-2);letter-spacing:-.3px;line-height:1.4}.login-subtitle{font-family:Inter,Noto Sans Arabic,sans-serif;font-size:.78rem;font-weight:500;color:var(--text-muted);margin-bottom:var(--space-6);letter-spacing:.8px;text-transform:uppercase}.login-slogan{font-family:Noto Sans Arabic,sans-serif;font-size:var(--font-size-xs);color:var(--green-600);font-weight:600;margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--gray-200);letter-spacing:.2px}.sidebar{position:fixed;right:0;top:0;width:var(--sidebar-width);height:100vh;background:linear-gradient(180deg,var(--blue-900) 0,var(--blue-800) 50%,#001233 100%);color:var(--text-inverse);z-index:100;display:flex;flex-direction:column;transition:width var(--transition-base);overflow:hidden}.sidebar-header{padding:var(--space-6);display:flex;align-items:center;gap:var(--space-4);border-bottom:1px solid hsla(0,0%,100%,.08)}.sidebar-logo{width:48px;height:48px;border-radius:var(--radius-full);overflow:hidden;flex-shrink:0;border:2px solid hsla(0,0%,100%,.2)}.sidebar-logo img{width:100%;height:100%;object-fit:cover}.sidebar-brand{flex:1 1;min-width:0}.sidebar-brand h2{font-size:var(--font-size-sm);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-brand span{font-size:var(--font-size-xs);color:hsla(0,0%,100%,.5)}.sidebar-nav{flex:1 1;padding:var(--space-4) var(--space-3);overflow-y:auto;scrollbar-width:thin;scrollbar-color:hsla(0,0%,100%,.1) transparent}.nav-section{margin-bottom:var(--space-6)}.nav-section-title{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:1px;color:hsla(0,0%,100%,.35);padding:var(--space-2) var(--space-3);font-weight:600}.nav-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);color:hsla(0,0%,100%,.7);text-decoration:none;font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all var(--transition-fast);border:none;background:none;width:100%;text-align:right}.nav-item:hover{background:hsla(0,0%,100%,.08);color:#fff;transform:translateX(-2px)}.nav-item.active{background:linear-gradient(135deg,rgba(0,86,179,.4),rgba(40,167,69,.2));color:#fff;box-shadow:0 2px 8px rgba(0,86,179,.3)}.nav-item .nav-icon{font-size:1.2rem;width:24px;text-align:center;flex-shrink:0}.nav-item .nav-badge{margin-right:auto;margin-left:0;background:var(--color-danger);color:#fff;font-size:var(--font-size-xs);padding:1px 8px;border-radius:var(--radius-full);font-weight:600}.sidebar-footer{padding:var(--space-4) var(--space-6);border-top:1px solid hsla(0,0%,100%,.08)}.sidebar-user{display:flex;align-items:center;gap:var(--space-3)}.sidebar-user-avatar{width:36px;height:36px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--blue-400),var(--green-400));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--font-size-sm)}.sidebar-user-info{flex:1 1}.sidebar-user-info .name{font-size:var(--font-size-sm);font-weight:600}.sidebar-user-info .role{font-size:var(--font-size-xs);color:hsla(0,0%,100%,.5)}.main-content{margin-right:var(--sidebar-width);min-height:100vh;transition:margin-right var(--transition-base)}.page-header{background:var(--bg-primary);padding:var(--space-6) var(--space-8);border-bottom:1px solid var(--gray-200);display:flex;align-items:center;justify-content:space-between;position:-webkit-sticky;position:sticky;top:0;z-index:50;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:hsla(0,0%,100%,.95)}.page-header-title{display:flex;align-items:center;gap:var(--space-3)}.page-header-title h1{font-size:var(--font-size-xl);font-weight:700;color:var(--gray-900)}.page-header-title .breadcrumb{font-size:var(--font-size-sm);color:var(--text-secondary)}.page-header-actions{display:flex;align-items:center;gap:var(--space-3)}.page-body{padding:var(--space-8);max-width:var(--content-max-width)}.card{background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden;transition:all var(--transition-base)}.card:hover{box-shadow:var(--shadow-md)}.card-header{padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--gray-100);display:flex;align-items:center;justify-content:space-between}.card-header h3{font-size:var(--font-size-lg);font-weight:700;color:var(--gray-800)}.card-body{padding:var(--space-6)}.card-footer{padding:var(--space-4) var(--space-6);border-top:1px solid var(--gray-100);background:var(--gray-50)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));grid-gap:var(--space-5);gap:var(--space-5);margin-bottom:var(--space-8)}.stat-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-card);display:flex;align-items:flex-start;gap:var(--space-4);transition:all var(--transition-base);position:relative;overflow:hidden}.stat-card:before{content:"";position:absolute;top:0;right:0;width:4px;height:100%;transition:width var(--transition-base)}.stat-card:hover:before{width:6px}.stat-card.blue:before{background:linear-gradient(180deg,var(--blue-400),var(--blue-600))}.stat-card.green:before{background:linear-gradient(180deg,var(--green-400),var(--green-600))}.stat-card.orange:before{background:linear-gradient(180deg,#f59e0b,#d97706)}.stat-card.red:before{background:linear-gradient(180deg,#ef4444,#dc2626)}.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.stat-icon{width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}.stat-icon.blue{background:var(--blue-50);color:var(--blue-500)}.stat-icon.green{background:var(--green-50);color:var(--green-500)}.stat-icon.orange{background:#fef3c7;color:#d97706}.stat-icon.red{background:#fee2e2;color:#dc2626}.stat-content{flex:1 1}.stat-label{font-size:var(--font-size-sm);color:var(--text-secondary);margin-bottom:var(--space-1)}.stat-value{font-size:var(--font-size-3xl);font-weight:800;color:var(--text-primary);line-height:1.1}.stat-change{font-size:var(--font-size-xs);margin-top:var(--space-1);display:flex;align-items:center;gap:var(--space-1)}.stat-change.positive{color:var(--color-success)}.stat-change.negative{color:var(--color-danger)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:600;border:none;cursor:pointer;transition:all var(--transition-fast);text-decoration:none;white-space:nowrap;line-height:1.4}.btn:active{transform:scale(.97)}.btn-primary{background:linear-gradient(135deg,var(--blue-500),var(--blue-600));color:#fff;box-shadow:0 2px 4px rgba(0,86,179,.3)}.btn-primary:hover{background:linear-gradient(135deg,var(--blue-600),var(--blue-700));box-shadow:0 4px 12px rgba(0,86,179,.4);transform:translateY(-1px)}.btn-secondary{background:linear-gradient(135deg,var(--green-500),var(--green-600));color:#fff;box-shadow:0 2px 4px rgba(40,167,69,.3)}.btn-secondary:hover{background:linear-gradient(135deg,var(--green-600),var(--green-700));box-shadow:0 4px 12px rgba(40,167,69,.4);transform:translateY(-1px)}.btn-outline{background:transparent;border:1.5px solid var(--gray-300);color:var(--text-primary)}.btn-outline:hover{border-color:var(--blue-500);color:var(--blue-500);background:var(--blue-50)}.btn-danger{background:linear-gradient(135deg,#dc3545,#c82333);color:#fff}.btn-danger:hover{background:linear-gradient(135deg,#c82333,#a71d2a)}.btn-ghost{background:transparent;color:var(--text-secondary);padding:var(--space-2) var(--space-3)}.btn-ghost:hover{background:var(--gray-100);color:var(--text-primary)}.btn-sm{padding:var(--space-2) var(--space-3);font-size:var(--font-size-xs)}.btn-lg{padding:var(--space-4) var(--space-8);font-size:var(--font-size-base)}.btn-icon{width:40px;height:40px;padding:0;border-radius:var(--radius-md)}.form-group{margin-bottom:var(--space-5)}.form-label{display:block;font-size:var(--font-size-sm);font-weight:600;color:var(--gray-700);margin-bottom:var(--space-2)}.form-input,.form-select,.form-textarea{width:100%;padding:var(--space-3) var(--space-4);border:1.5px solid var(--gray-300);border-radius:var(--radius-md);font-family:var(--font-family);font-size:var(--font-size-sm);color:var(--text-primary);background:var(--bg-primary);transition:all var(--transition-fast);direction:rtl}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(0,86,179,.1)}.form-input::placeholder{color:var(--gray-400)}.form-textarea{resize:vertical;min-height:100px}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-gap:var(--space-4);gap:var(--space-4)}.form-hint{color:var(--text-muted)}.form-error,.form-hint{font-size:var(--font-size-xs);margin-top:var(--space-1)}.form-error{color:var(--color-danger)}.table-container{overflow-x:auto;border-radius:var(--radius-lg);background:var(--bg-card);box-shadow:var(--shadow-card)}.data-table{width:100%;border-collapse:collapse}.data-table thead{background:var(--gray-50)}.data-table th{text-align:right;font-size:var(--font-size-xs);font-weight:700;color:var(--gray-600);text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid var(--gray-200);white-space:nowrap}.data-table td,.data-table th{padding:var(--space-4) var(--space-5)}.data-table td{font-size:var(--font-size-sm);border-bottom:1px solid var(--gray-100);vertical-align:middle}.data-table tbody tr{transition:background var(--transition-fast)}.data-table tbody tr:hover{background:var(--blue-50)}.data-table tbody tr:last-child td{border-bottom:none}.status-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:600}.status-badge:before{content:"";width:6px;height:6px;border-radius:50%}.status-badge.active{background:var(--green-50);color:var(--green-700)}.status-badge.active:before{background:var(--green-500)}.status-badge.warned{background:#fef3c7;color:#92400e}.status-badge.warned:before{background:#f59e0b}.status-badge.suspended{background:#fee2e2;color:#991b1b}.status-badge.suspended:before{background:#dc3545}.status-badge.expelled{background:var(--gray-100);color:var(--gray-600)}.status-badge.expelled:before{background:var(--gray-500)}.status-badge.pending{background:var(--blue-50);color:var(--blue-700)}.status-badge.pending:before{background:var(--blue-500)}.status-badge.approved{background:var(--green-50);color:var(--green-700)}.status-badge.approved:before{background:var(--green-500)}.status-badge.rejected{background:#fee2e2;color:#991b1b}.status-badge.rejected:before{background:#dc3545}.modal-overlay{position:fixed;inset:0;background:var(--bg-overlay);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--space-4);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:var(--bg-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);width:100%;max-width:560px;max-height:90vh;overflow-y:auto;animation:modalSlide .3s var(--transition-spring)}@keyframes modalSlide{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{padding:var(--space-6);border-bottom:1px solid var(--gray-100);display:flex;align-items:center;justify-content:space-between}.modal-header h3{font-size:var(--font-size-lg);font-weight:700}.modal-close{width:32px;height:32px;border:none;background:var(--gray-100);border-radius:var(--radius-full);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--gray-600);transition:all var(--transition-fast)}.modal-close:hover{background:var(--gray-200);color:var(--gray-800)}.modal-body{padding:var(--space-6)}.modal-footer{padding:var(--space-4) var(--space-6);border-top:1px solid var(--gray-100);justify-content:flex-start}.modal-footer,.toast-container{display:flex;gap:var(--space-3)}.toast-container{position:fixed;top:var(--space-6);left:50%;transform:translateX(-50%);z-index:2000;flex-direction:column;pointer-events:none}.toast{background:var(--gray-800);color:#fff;padding:var(--space-4) var(--space-6);border-radius:var(--radius-md);box-shadow:var(--shadow-xl);display:flex;align-items:center;gap:var(--space-3);font-size:var(--font-size-sm);font-weight:500;pointer-events:auto;animation:toastIn .4s var(--transition-spring);min-width:300px}.toast.success{border-right:4px solid var(--green-500)}.toast.error{border-right:4px solid var(--color-danger)}.toast.warning{border-right:4px solid var(--color-warning)}.toast.info{border-right:4px solid var(--blue-500)}@keyframes toastIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.toast-exit{animation:toastOut .3s ease forwards}@keyframes toastOut{to{opacity:0;transform:translateY(-20px)}}.progress-ring-container{display:flex;align-items:center;justify-content:center;position:relative}.progress-ring-value{position:absolute;font-size:var(--font-size-lg);font-weight:800;color:var(--text-primary)}.grid-2{grid-template-columns:repeat(2,1fr);grid-gap:var(--space-5)}.grid-2,.grid-3{display:grid;gap:var(--space-5)}.grid-3{grid-template-columns:repeat(3,1fr);grid-gap:var(--space-5)}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:var(--space-5);gap:var(--space-5)}.empty-state{text-align:center;padding:var(--space-12) var(--space-8);color:var(--text-secondary)}.empty-state .empty-icon{font-size:3rem;margin-bottom:var(--space-4);opacity:.5}.empty-state h3{font-size:var(--font-size-lg);margin-bottom:var(--space-2);color:var(--gray-700)}.empty-state p{margin-bottom:var(--space-6);font-size:var(--font-size-sm)}.search-box{position:relative;max-width:360px}.search-box input{width:100%;padding:var(--space-3) var(--space-4);padding-right:var(--space-10);border:1.5px solid var(--gray-300);border-radius:var(--radius-full);font-family:var(--font-family);font-size:var(--font-size-sm);background:var(--bg-primary);transition:all var(--transition-fast)}.search-box input:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(0,86,179,.1)}.search-box .search-icon{position:absolute;right:var(--space-4);top:50%;transform:translateY(-50%);color:var(--gray-400)}.chart-container{padding:var(--space-4);min-height:300px}.member-card{background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--space-6);display:flex;align-items:center;gap:var(--space-4);transition:all var(--transition-base);cursor:pointer}.member-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.member-avatar{width:56px;height:56px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--blue-400),var(--green-400));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:var(--font-size-lg);flex-shrink:0}.member-info{flex:1 1;min-width:0}.member-info h4{font-size:var(--font-size-base);font-weight:700;margin-bottom:var(--space-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.member-info .member-role{font-size:var(--font-size-xs);color:var(--blue-500);font-weight:600}.member-info .member-id{font-size:var(--font-size-xs);color:var(--text-muted);font-family:Noto Sans,monospace}.project-card{background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden;transition:all var(--transition-base)}.project-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}.project-card-header{padding:var(--space-5) var(--space-6);display:flex;align-items:center;gap:var(--space-3)}.project-category-icon{width:40px;height:40px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.2rem}.project-card-body{padding:0 var(--space-6) var(--space-6)}.project-progress{margin-top:var(--space-4)}.progress-bar{height:8px;background:var(--gray-200);border-radius:var(--radius-full);overflow:hidden}.progress-bar-fill{height:100%;border-radius:var(--radius-full);transition:width 1s ease;background:linear-gradient(90deg,var(--blue-500),var(--green-500))}.progress-label{display:flex;justify-content:space-between;font-size:var(--font-size-xs);color:var(--text-secondary);margin-top:var(--space-2)}.finance-summary{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:var(--space-4);gap:var(--space-4);margin-bottom:var(--space-6)}.finance-item{text-align:center;padding:var(--space-4);border-radius:var(--radius-md)}.finance-item.income{background:var(--green-50)}.finance-item.expense{background:#fee2e2}.finance-item.balance{background:var(--blue-50)}.finance-item .amount{font-size:var(--font-size-2xl);font-weight:800}.finance-item.income .amount{color:var(--green-600)}.finance-item.expense .amount{color:var(--color-danger)}.finance-item.balance .amount{color:var(--blue-600)}.finance-item .label{font-size:var(--font-size-xs);color:var(--text-secondary);margin-top:var(--space-1)}.meter-card{background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--space-5);display:flex;align-items:center;gap:var(--space-4);transition:all var(--transition-base)}.meter-card:hover{box-shadow:var(--shadow-md)}.meter-icon{width:48px;height:48px;border-radius:var(--radius-md);background:linear-gradient(135deg,#e0f7fa,#b2ebf2);display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}.badge-preview{width:350px;margin:0 auto;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);overflow:hidden;border:2px solid var(--blue-500)}.badge-header-area{background:linear-gradient(135deg,var(--blue-800),var(--blue-600));padding:var(--space-5);text-align:center;color:#fff}.badge-photo-area{width:100px;height:100px;border-radius:var(--radius-full);background:var(--gray-200);margin:calc(-50px) auto var(--space-4);border:4px solid #fff;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:2.5rem;position:relative;z-index:1}.badge-info-area{padding:var(--space-3) var(--space-6) var(--space-6);text-align:center}.badge-footer-area{background:var(--gray-50);padding:var(--space-3) var(--space-4);text-align:center;font-size:var(--font-size-xs);color:var(--green-600);font-weight:500;border-top:1px solid var(--gray-200)}.tabs{display:flex;gap:var(--space-1);border-bottom:2px solid var(--gray-200);margin-bottom:var(--space-6)}.tab{padding:var(--space-3) var(--space-5);font-size:var(--font-size-sm);font-weight:600;color:var(--text-secondary);background:none;border:none;cursor:pointer;position:relative;transition:all var(--transition-fast);font-family:var(--font-family)}.tab.active,.tab:hover{color:var(--blue-500)}.tab.active:after{content:"";position:absolute;bottom:-2px;right:0;left:0;height:2px;background:var(--blue-500);border-radius:1px 1px 0 0}.mobile-bottom-nav,.mobile-header{display:none}@media (max-width:1024px){.desktop-sidebar{width:var(--sidebar-collapsed)}.desktop-sidebar .nav-badge,.desktop-sidebar .nav-item span:not(.nav-icon),.desktop-sidebar .nav-section-title,.desktop-sidebar .sidebar-brand,.desktop-sidebar .sidebar-user-info{display:none}.desktop-sidebar .nav-item{justify-content:center;padding:var(--space-3)}.main-content{margin-right:var(--sidebar-collapsed)}.grid-4{grid-template-columns:repeat(2,1fr)}.finance-summary{grid-template-columns:1fr}}@media (max-width:768px){.desktop-sidebar{display:none!important}.mobile-header{display:block;position:fixed;top:0;right:0;left:0;z-index:200;background:var(--bg-sidebar);box-shadow:0 2px 12px rgba(0,0,0,.15)}.mobile-header-inner{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);height:56px}.mobile-header-right{display:flex;align-items:center;gap:var(--space-3)}.mobile-logo{width:36px;height:36px;border-radius:50%;border:2px solid hsla(0,0%,100%,.2);object-fit:cover}.mobile-brand-name{color:#fff;font-size:var(--font-size-sm);font-weight:700}.mobile-user-btn{background:none;border:none;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}.mobile-user-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--blue-400),var(--green-400));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:var(--font-size-sm);border:2px solid hsla(0,0%,100%,.3)}.mobile-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:250;animation:fadeIn .2s ease}.mobile-dropdown{position:absolute;top:60px;left:var(--space-4);background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);z-index:300;min-width:220px;padding:var(--space-2);animation:slideDown .2s ease}.mobile-dropdown-user{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3)}.mobile-dropdown-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--blue-500),var(--green-500));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:var(--font-size-base);flex-shrink:0}.mobile-dropdown-divider{height:1px;background:var(--gray-200);margin:var(--space-1) var(--space-3)}.mobile-dropdown-item{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3);border:none;background:none;cursor:pointer;font-size:var(--font-size-sm);font-family:var(--font-family);color:var(--text-primary);border-radius:var(--radius-md);text-align:right;transition:background var(--transition-fast)}.mobile-dropdown-item:active,.mobile-dropdown-item:hover{background:var(--gray-50)}.mobile-dropdown-logout{color:var(--color-danger)}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.mobile-bottom-nav{display:flex;position:fixed;bottom:0;right:0;left:0;z-index:200;background:linear-gradient(180deg,#001f42,#001233);border-top:2px solid rgba(96,181,255,.2);padding:var(--space-2) 0;padding-bottom:max(var(--space-2),env(safe-area-inset-bottom,8px));overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;justify-content:space-around;box-shadow:0 -4px 20px rgba(0,0,0,.3);min-height:64px}.mobile-bottom-nav::-webkit-scrollbar{display:none}.mobile-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:56px;padding:var(--space-1) var(--space-2);border:none;background:none;cursor:pointer;color:hsla(0,0%,100%,.55);font-family:var(--font-family);border-radius:var(--radius-md);transition:all .2s ease;-webkit-tap-highlight-color:transparent;position:relative}.mobile-nav-item.active{color:#60b5ff;background:rgba(96,181,255,.12)}.mobile-nav-item.active:after{content:"";position:absolute;top:-2px;left:25%;right:25%;height:3px;background:#60b5ff;border-radius:0 0 4px 4px}.mobile-nav-icon{font-size:1.1rem;line-height:1}.mobile-nav-label{font-size:.55rem;line-height:1.2;white-space:nowrap;font-weight:700;letter-spacing:-.2px;overflow:hidden;text-overflow:ellipsis;max-width:52px;color:hsla(0,0%,100%,.6)}.main-content,body,html{overflow-x:hidden;max-width:100vw}.main-content{margin-right:0;padding-top:60px;padding-bottom:85px;min-height:100vh}.page-header{padding:var(--space-4);flex-direction:column;gap:var(--space-3);align-items:stretch}.page-header-title h1{font-size:var(--font-size-xl)}.page-header-actions{display:flex;gap:var(--space-2);flex-wrap:wrap}.page-header-actions .btn{flex:1 1;min-width:100px;justify-content:center;font-size:var(--font-size-sm);padding:var(--space-2) var(--space-3)}.page-body{padding:var(--space-3)}.stats-grid{grid-template-columns:1fr 1fr;gap:var(--space-3)}.stat-card{padding:var(--space-3)}.stat-value{font-size:var(--font-size-xl)}.stat-icon{width:40px;height:40px;font-size:1.2rem}.card{border-radius:var(--radius-md)}.card-body,.card-header{padding:var(--space-3) var(--space-4)}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.form-row{flex-direction:column;gap:var(--space-3)}.form-input,.form-select,.form-textarea{font-size:16px;padding:var(--space-3)}.btn{min-height:44px;font-size:var(--font-size-sm);-webkit-tap-highlight-color:transparent}.modal-content{width:95%;max-width:95vw;max-height:85vh;margin:var(--space-4) auto;border-radius:var(--radius-lg)}.modal-header{padding:var(--space-3) var(--space-4)}.modal-body{padding:var(--space-4)}.modal-footer{padding:var(--space-3) var(--space-4);flex-wrap:wrap;gap:var(--space-2)}.modal-footer .btn{flex:1 1;min-width:100px}.table-container{overflow-x:hidden;width:100%;max-width:100%}.data-table,table{min-width:0!important;width:100%!important;display:block}.data-table thead{display:none}.data-table tbody{display:flex;flex-direction:column;gap:var(--space-3);width:100%}.data-table tbody tr{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);padding:var(--space-4);background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);border-right:4px solid var(--blue-400);align-items:center;width:100%;max-width:100%}.data-table tbody td{padding:var(--space-1) 0;border:none;font-size:var(--font-size-sm);word-break:break-word}.data-table tbody td:first-child{order:3;font-size:var(--font-size-xs);color:var(--text-secondary)}.data-table tbody td:nth-child(2){width:100%;font-size:var(--font-size-base);font-weight:800;color:var(--text-heading);order:-2}.data-table tbody td:nth-child(3){color:var(--blue-500);font-weight:600;order:-1;background:var(--blue-50);padding:2px 10px;border-radius:var(--radius-full);font-size:var(--font-size-xs)}.data-table tbody td:nth-child(n+4){font-size:var(--font-size-xs);color:var(--text-secondary)}.data-table tbody td:last-child{margin-right:auto;margin-left:0}.login-card{margin:var(--space-4);padding:var(--space-6);max-width:calc(100vw - var(--space-8))}.login-logo{width:100px;height:100px}.badge-preview{width:100%;max-width:340px;margin:0 auto}.dashboard-grid{grid-template-columns:1fr}.member-row{flex-wrap:wrap;gap:var(--space-2)}.finance-summary{grid-template-columns:1fr!important;gap:var(--space-3)}.page-body [style]{max-width:100%!important}.search-box{max-width:100%}.search-box input{width:100%;font-size:16px}.tabs{max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:var(--space-2)}.tabs::-webkit-scrollbar{display:none}.page-body>*{max-width:100%;overflow-x:hidden}.flex-between{flex-wrap:wrap;gap:var(--space-2)}.card,.meter-card{max-width:100%;overflow:hidden;word-break:break-word}.report-chart-container{max-width:100%;padding:var(--space-2)}canvas{max-width:100%!important;height:auto!important}.report-summary-cards{grid-template-columns:1fr 1fr!important}h1{font-size:var(--font-size-xl)}h2{font-size:var(--font-size-lg)}h3{font-size:var(--font-size-base)}}@media (max-width:480px){.stats-grid{grid-template-columns:1fr;gap:var(--space-2)}.stat-card{flex-direction:row;padding:var(--space-3)}.page-header-title h1{font-size:var(--font-size-lg)}.page-header-actions{flex-direction:column}.page-header-actions .btn{width:100%}.login-card{padding:var(--space-5);border-radius:var(--radius-lg)}.badge-preview{transform:scale(.85);transform-origin:center top}.mobile-nav-item{min-width:36px}.mobile-nav-label{font-size:.5rem;max-width:42px}}@media (max-width:360px){.page-body{padding:var(--space-2)}.card-body,.card-header{padding:var(--space-2) var(--space-3)}.modal-content{width:98%}.mobile-nav-label{font-size:.45rem;max-width:38px}}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.text-muted{color:var(--text-secondary)}.text-success{color:var(--color-success)}.text-danger{color:var(--color-danger)}.text-primary{color:var(--color-primary)}.font-bold{font-weight:700}.font-extra{font-weight:800}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.gap-4{gap:var(--space-4)}.flex{display:flex}.flex-between{justify-content:space-between}.flex-between,.flex-center{display:flex;align-items:center}.flex-center{justify-content:center}.flex-gap{display:flex;align-items:center;gap:var(--space-3)}.w-full{width:100%}.hidden{display:none}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--gray-400)}::selection{background:var(--blue-200);color:var(--blue-900)}@media (hover:none) and (pointer:coarse){.btn:active{transform:scale(.97)}.mobile-nav-item:active{transform:scale(.92)}.card:active{transform:scale(.99)}}@supports (padding-bottom:env(safe-area-inset-bottom)){.mobile-bottom-nav{padding-bottom:env(safe-area-inset-bottom)}.main-content{padding-bottom:calc(72px + env(safe-area-inset-bottom))}}@media print{.btn,.desktop-sidebar,.mobile-bottom-nav,.mobile-header,.toast-container{display:none!important}.main-content{margin:0!important;padding:0!important}.card{box-shadow:none!important;border:1px solid #ddd}}.report-summary-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-gap:var(--space-4);gap:var(--space-4);margin-bottom:var(--space-6)}.report-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-card);text-align:center;border-right:4px solid var(--color-primary);transition:transform var(--transition-base),box-shadow var(--transition-base)}.report-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.report-card .report-value{font-size:var(--font-size-3xl);font-weight:800;color:var(--color-primary);line-height:1;margin-bottom:var(--space-2)}.report-card .report-label{font-size:var(--font-size-sm);color:var(--text-secondary)}@media (max-width:768px){.report-summary-cards{grid-template-columns:1fr 1fr}}@media (max-width:480px){.report-summary-cards{grid-template-columns:1fr}}