*{box-sizing:border-box;margin:0;padding:0}body{background:#f3f4f6;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif}.app{display:flex;min-height:100vh}.sidebar{background:linear-gradient(180deg,#1e293b,#0f172a);color:#fff;display:flex;flex-direction:column;height:100vh;left:0;position:fixed;top:0;width:250px}.sidebar-header{border-bottom:1px solid #ffffff1a;padding:24px 20px}.sidebar-header h1{font-size:22px;font-weight:700}.nav{flex:1 1;overflow-y:auto;padding:16px 12px;scrollbar-color:#fff3 #0000;scrollbar-width:thin}.nav::-webkit-scrollbar{width:6px}.nav::-webkit-scrollbar-track{background:#0000}.nav::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.nav::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.nav-item{align-items:center;background:#0000;border:none;border-radius:10px;color:#94a3b8;cursor:pointer;display:flex;font-size:15px;gap:12px;margin-bottom:4px;padding:14px 16px;text-align:left;text-decoration:none;transition:all .2s ease;width:100%}.nav-item:hover{background:#ffffff1a;color:#fff}.nav-item.active{background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 4px 12px #3b82f666;color:#fff}.nav-icon{font-size:20px}.main{display:flex;flex:1 1;flex-direction:column;margin-left:250px;width:calc(100% - 250px)}.header{background:#fff;border-bottom:1px solid #e5e7eb;box-shadow:0 1px 3px #0000000d;padding:20px 32px}.header h2{color:#111827;font-size:20px;font-weight:600}.content{flex:1 1;padding:32px;width:100%}.dashboard{max-width:100%}.welcome-card{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:16px;box-shadow:0 10px 40px #667eea4d;color:#fff;margin-bottom:32px;padding:32px}.welcome-card h2{font-size:28px;margin-bottom:8px}.welcome-card p{font-size:16px;opacity:.9}.stats-grid{grid-gap:24px;display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-bottom:32px}.stat-card{align-items:center;background:#fff;border-radius:16px;box-shadow:0 4px 6px #0000000d;display:flex;gap:20px;padding:24px;transition:transform .2s,box-shadow .2s}.stat-card:hover{box-shadow:0 12px 24px #0000001a;transform:translateY(-4px)}.stat-icon{align-items:center;border-radius:14px;display:flex;font-size:28px;height:56px;justify-content:center;width:56px}.stat-info{display:flex;flex-direction:column}.stat-value{color:#111827;font-size:28px;font-weight:700}.stat-label{color:#6b7280;font-size:14px;margin-top:4px}.quick-actions{background:#fff;border-radius:16px;box-shadow:0 4px 6px #0000000d;padding:28px}.quick-actions h3{color:#374151;font-size:18px;font-weight:600;margin-bottom:20px}.actions-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.action-btn{background:#f8fafc;border:2px dashed #e2e8f0;border-radius:12px;color:#475569;cursor:pointer;font-size:15px;padding:20px;transition:all .2s}.action-btn:hover{background:#eff6ff;border-color:#3b82f6;color:#1d4ed8}.transactions{max-width:100%}.page-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:24px}.page-header h3{color:#111827;font-size:18px;font-weight:600}.primary-btn{background:linear-gradient(135deg,#3b82f6,#2563eb);border:none;border-radius:10px;box-shadow:0 4px 12px #3b82f64d;color:#fff;cursor:pointer;font-size:14px;font-weight:500;padding:12px 24px;transition:all .2s}.primary-btn:hover{box-shadow:0 6px 20px #3b82f666;transform:translateY(-2px)}.table-container{background:#fff;border-radius:16px;box-shadow:0 4px 6px #0000000d;overflow:hidden}.data-table{border-collapse:collapse;width:100%}.data-table th{background:#f8fafc;border-bottom:1px solid #e2e8f0;color:#64748b;font-size:13px;font-weight:600;letter-spacing:.5px;padding:16px 20px;text-align:left;text-transform:uppercase}.data-table td{border-bottom:1px solid #f1f5f9;color:#334155;font-size:14px;padding:18px 20px}.data-table tr:hover{background:#f8fafc}.status-badge{border-radius:20px;display:inline-block;font-size:12px;font-weight:600;padding:6px 14px}.status-badge.completed{background:#dcfce7;color:#16a34a}.status-badge.pending{background:#fef3c7;color:#d97706}.status-badge.processing{background:#dbeafe;color:#2563eb}.hello-world{align-items:center;display:flex;justify-content:center;min-height:400px}.hello-content{background:linear-gradient(135deg,#10b981,#059669);border-radius:20px;box-shadow:0 10px 40px #10b9814d;color:#fff;padding:48px 64px;text-align:center}.hello-content h1{font-size:48px;margin-bottom:12px}.hello-content p{font-size:18px;opacity:.9}.coming-soon{align-items:center;display:flex;justify-content:center;min-height:400px}.coming-soon-content{background:#fff;border-radius:20px;box-shadow:0 4px 6px #0000000d;padding:48px;text-align:center}.coming-soon-icon{display:block;font-size:64px;margin-bottom:20px}.coming-soon-content h2{color:#111827;font-size:24px;margin-bottom:8px}.coming-soon-content p{color:#6b7280;font-size:16px}.sidebar-footer{border-top:1px solid #ffffff1a;margin-top:auto;padding:16px}.user-info{margin-bottom:12px}.user-name{color:#94a3b8;font-size:14px}.logout-btn{background:#ef44441a;border:1px solid #ef44444d;border-radius:8px;color:#f87171;cursor:pointer;font-size:14px;padding:12px 16px;transition:all .2s;width:100%}.logout-btn:hover{background:#ef444433;border-color:#ef444480}.loading-screen{align-items:center;background:#f3f4f6;display:flex;flex-direction:column;justify-content:center;min-height:100vh}.loading-spinner{animation:spin 1s linear infinite;border:4px solid #e5e7eb;border-radius:50%;border-top-color:#3b82f6;height:48px;width:48px}.loading-screen p{color:#6b7280;font-size:14px;margin-top:16px}@keyframes spin{to{transform:rotate(1turn)}}@media (max-width:768px){.sidebar{width:70px}.sidebar-header h1{font-size:16px;text-align:center}.nav-item span:not(.nav-icon){display:none}.nav-item{justify-content:center;padding:14px}.main{margin-left:70px;width:calc(100% - 70px)}.content{padding:16px}.sidebar-footer{padding:12px 8px}.user-info{display:none}.logout-btn{font-size:12px;padding:10px}}.header-with-search{flex-wrap:wrap}.header-with-search h2{margin:0;white-space:nowrap}.nav-filter{padding:8px 12px}.nav-filter input{background:#ffffff14;border:1px solid #ffffff2e;border-radius:6px;box-sizing:border-box;color:inherit;font-size:13px;padding:7px 10px;width:100%}.nav-filter input::placeholder{color:#ffffff73}.nav-filter input:focus{border-color:#fff6;outline:none}.nav-section{margin-bottom:2px}.nav-section-head{align-items:center;background:none;border:none;color:#ffffff8c;cursor:pointer;display:flex;font-size:11px;font-weight:700;justify-content:space-between;letter-spacing:.06em;padding:8px 14px;text-transform:uppercase;width:100%}.nav-section-head:hover{color:#ffffffd9}.nav-section-head .chev{font-size:14px;line-height:1}.topbar{display:flex;justify-content:flex-end;padding:12px 24px 0}.header-with-search{align-items:center;display:flex;gap:24px;justify-content:space-between}