:root{--pi-bg:#f4f1ea;--pi-surface:#fff;--pi-surface-2:#faf8f3;--pi-ink:#1f2430;--pi-ink-soft:#3f4656;--pi-muted:#6b7280;--pi-border:#e9e4d9;--pi-border-soft:#f0ece2;--pi-sidebar:#171718;--pi-sidebar-2:#202022;--pi-sidebar-line:#ffffff14;--pi-sidebar-text:#ffffffb8;--pi-sidebar-muted:#ffffff6b;--pi-gold:#c8a13a;--pi-gold-dark:#a9821d;--pi-green:#16a34a;--pi-green-soft:#dcfce7;--pi-red:#dc2626;--pi-red-soft:#fee2e2;--pi-blue:#2563eb;--pi-blue-soft:#dbeafe;--pi-amber:#d97706;--pi-amber-soft:#fef3c7;--pi-radius:16px;--pi-radius-sm:10px;--pi-shadow:0 4px 16px #18181b0f;--pi-shadow-lg:0 12px 32px #18181b1a}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;background:#f4f1ea;background:var(--pi-bg);color:#1f2430;color:var(--pi-ink);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif}.app{display:flex;min-height:100vh}.sidebar{background:linear-gradient(180deg,#202022,#171718);background:linear-gradient(180deg,var(--pi-sidebar-2) 0,var(--pi-sidebar) 100%);border-right:1px solid #0006;color:#fff;height:100vh;left:0;position:fixed;top:0;width:262px}.sidebar,.sidebar-header{display:flex;flex-direction:column}.sidebar-header{border-bottom:1px solid #ffffff14;border-bottom:1px solid var(--pi-sidebar-line);gap:2px;padding:20px 20px 16px}.sidebar-header h1{align-items:center;color:#fff;display:flex;font-size:21px;font-weight:800;gap:9px;letter-spacing:1px}.sidebar-header h1:before{align-items:center;background:linear-gradient(135deg,#d9b23a,#b8891f);border-radius:9px;box-shadow:0 4px 12px #b8891f59;color:#1a1a1a;content:"PI";display:inline-flex;font-size:13px;font-weight:800;height:32px;justify-content:center;width:32px}.brand-sub{color:#ffffff6b;color:var(--pi-sidebar-muted);font-size:11px;letter-spacing:.4px;padding-left:41px}.nav{flex:1 1;overflow-y:auto;padding:12px 10px;scrollbar-color:#fff3 #0000;scrollbar-width:thin}.nav::-webkit-scrollbar{width:6px}.nav::-webkit-scrollbar-track{background:#0000}.nav::-webkit-scrollbar-thumb{background:#ffffff29;border-radius:3px}.nav::-webkit-scrollbar-thumb:hover{background:#ffffff47}.nav-item{align-items:center;background:#0000;border:none;border-radius:9px;color:#ffffffb8;color:var(--pi-sidebar-text);cursor:pointer;display:flex;font-size:14px;gap:12px;margin-bottom:2px;padding:10px 14px;text-align:left;text-decoration:none;transition:all .15s ease;width:100%}.nav-item:hover{background:#ffffff12;color:#fff}.nav-item.active{background:#c8a13a29;box-shadow:inset 3px 0 0 #c8a13a;box-shadow:inset 3px 0 0 var(--pi-gold);color:#f4d98a}.nav-icon{flex-shrink:0;font-size:17px;text-align:center;width:22px}.nav-filter{padding:8px 12px}.nav-filter input{background:#ffffff0f;border:1px solid #ffffff29;border-radius:8px;box-sizing:border-box;color:#fff;font-size:13px;padding:8px 11px;width:100%}.nav-filter input::placeholder{color:#ffffff6b}.nav-filter input:focus{background:#ffffff1a;border-color:#c8a13a;border-color:var(--pi-gold);outline:none}.nav-section{margin-bottom:2px}.nav-section-head{align-items:center;background:none;border:none;color:#ffffff6b;color:var(--pi-sidebar-muted);cursor:pointer;display:flex;font-size:11px;font-weight:700;justify-content:space-between;letter-spacing:.07em;padding:9px 14px 6px;text-transform:uppercase;width:100%}.nav-section-head:hover{color:#ffffffd1}.nav-section-head .chev{font-size:14px;line-height:1}.sidebar-footer{border-top:1px solid #ffffff14;border-top:1px solid var(--pi-sidebar-line);margin-top:auto;padding:14px}.user-info{margin-bottom:10px}.user-name{color:#ffffffb8;color:var(--pi-sidebar-text)}.logout-btn,.user-name{font-size:13px;font-weight:600}.logout-btn{background:#dc26261a;border:1px solid #dc26263d;border-radius:9px;color:#f7a7a7;cursor:pointer;padding:10px 14px;transition:all .15s;width:100%}.logout-btn:hover{background:#dc262633;border-color:#dc262680;color:#fecaca}.main{display:flex;flex:1 1;flex-direction:column;margin-left:262px;width:calc(100% - 262px)}.topbar{align-items:center;-webkit-backdrop-filter:saturate(140%) blur(8px);backdrop-filter:saturate(140%) blur(8px);background:#ffffffdb;display:flex;gap:16px;justify-content:flex-end;padding:12px 28px;position:-webkit-sticky;position:sticky;top:0;z-index:50}.header,.topbar{border-bottom:1px solid #e9e4d9;border-bottom:1px solid var(--pi-border)}.header{background:#fff;background:var(--pi-surface);padding:20px 32px}.header h2{color:#1f2430;color:var(--pi-ink);font-size:20px;font-weight:700}.header-with-search{align-items:center;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between}.header-with-search h2{margin:0;white-space:nowrap}.content{flex:1 1;padding:28px 32px 40px;width:100%}.dashboard{max-width:100%}.welcome-card{background:radial-gradient(1000px 400px at 85% -40%,#38352f 0,#201f1d 45%,#171718 100%);border-radius:16px;border-radius:var(--pi-radius);box-shadow:0 12px 32px #18181b1a;box-shadow:var(--pi-shadow-lg);color:#fff;margin-bottom:28px;padding:30px 32px}.welcome-card h2{font-size:27px;margin-bottom:8px}.welcome-card p{font-size:16px;opacity:.82}.stats-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-bottom:28px}.stat-card{align-items:center;background:#fff;background:var(--pi-surface);border:1px solid #e9e4d9;border:1px solid var(--pi-border);border-radius:16px;border-radius:var(--pi-radius);box-shadow:0 4px 16px #18181b0f;box-shadow:var(--pi-shadow);display:flex;gap:18px;padding:22px;transition:transform .2s,box-shadow .2s}.stat-card:hover{box-shadow:0 12px 32px #18181b1a;box-shadow:var(--pi-shadow-lg);transform:translateY(-3px)}.stat-icon{align-items:center;border-radius:14px;display:flex;flex-shrink:0;font-size:24px;height:52px;justify-content:center;width:52px}.stat-info{display:flex;flex-direction:column}.stat-value{color:#1f2430;color:var(--pi-ink);font-size:26px;font-weight:800}.stat-label{color:#6b7280;color:var(--pi-muted);font-size:13px;margin-top:4px}.quick-actions{background:#fff;background:var(--pi-surface);border:1px solid #e9e4d9;border:1px solid var(--pi-border);border-radius:16px;border-radius:var(--pi-radius);box-shadow:0 4px 16px #18181b0f;box-shadow:var(--pi-shadow);padding:26px}.quick-actions h3{color:#1f2430;color:var(--pi-ink);font-size:18px;font-weight:700;margin-bottom:20px}.actions-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.action-btn{background:#faf8f3;background:var(--pi-surface-2);border:1px solid #e9e4d9;border:1px solid var(--pi-border);border-radius:12px;color:#3f4656;color:var(--pi-ink-soft);cursor:pointer;font-size:15px;padding:18px;transition:all .2s}.action-btn:hover{background:#fbf6e9;border-color:#c8a13a;border-color:var(--pi-gold);color:#a9821d;color:var(--pi-gold-dark)}.page-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:24px}.page-header h3{color:#1f2430;color:var(--pi-ink);font-size:18px;font-weight:700}.primary-btn{background:linear-gradient(135deg,#d9b23a,#b8891f);border:none;border-radius:10px;border-radius:var(--pi-radius-sm);box-shadow:0 4px 12px #b8891f47;color:#1a1a1a;cursor:pointer;font-size:14px;font-weight:700;padding:12px 22px;transition:transform .2s,box-shadow .2s}.primary-btn:hover{box-shadow:0 6px 20px #b8891f61;transform:translateY(-2px)}.table-container{background:#fff;background:var(--pi-surface);border:1px solid #e9e4d9;border:1px solid var(--pi-border);border-radius:16px;border-radius:var(--pi-radius);box-shadow:0 4px 16px #18181b0f;box-shadow:var(--pi-shadow);overflow:hidden}.data-table{border-collapse:collapse;width:100%}.data-table th{background:#faf8f3;background:var(--pi-surface-2);border-bottom:1px solid #e9e4d9;border-bottom:1px solid var(--pi-border);color:#6b7280;color:var(--pi-muted);font-size:12px;font-weight:700;letter-spacing:.5px;padding:15px 20px;text-align:left;text-transform:uppercase}.data-table td{border-bottom:1px solid #f0ece2;border-bottom:1px solid var(--pi-border-soft);color:#3f4656;color:var(--pi-ink-soft);font-size:14px;padding:16px 20px}.data-table tr:last-child td{border-bottom:none}.data-table tr:hover{background:#faf8f3;background:var(--pi-surface-2)}.status-badge{border-radius:999px;display:inline-block;font-size:12px;font-weight:600;padding:5px 12px}.status-badge.completed{background:#dcfce7;background:var(--pi-green-soft);color:#16a34a;color:var(--pi-green)}.status-badge.pending{background:#fef3c7;background:var(--pi-amber-soft);color:#d97706;color:var(--pi-amber)}.status-badge.processing{background:#dbeafe;background:var(--pi-blue-soft);color:#2563eb;color:var(--pi-blue)}.coming-soon{align-items:center;display:flex;justify-content:center;min-height:400px}.coming-soon-content{background:#fff;background:var(--pi-surface);border:1px solid #e9e4d9;border:1px solid var(--pi-border);border-radius:20px;box-shadow:0 4px 16px #18181b0f;box-shadow:var(--pi-shadow);padding:48px;text-align:center}.coming-soon-icon{display:block;font-size:64px;margin-bottom:20px}.coming-soon-content h2{color:#1f2430;color:var(--pi-ink);font-size:24px;margin-bottom:8px}.coming-soon-content p{color:#6b7280;color:var(--pi-muted);font-size:16px}.loading-screen{align-items:center;background:#f4f1ea;background:var(--pi-bg);display:flex;flex-direction:column;justify-content:center;min-height:100vh}.loading-spinner{animation:spin 1s linear infinite;border:4px solid #e9e4d9;border-top-color:#c8a13a;border:4px solid var(--pi-border);border-radius:50%;border-top-color:var(--pi-gold);height:48px;width:48px}.loading-screen p{color:#6b7280;color:var(--pi-muted);font-size:14px;margin-top:16px}@keyframes spin{to{transform:rotate(1turn)}}@media (max-width:768px){.sidebar{width:70px}.sidebar-header h1{font-size:0;gap:0}.sidebar-header h1:before{margin:0 auto}.brand-sub,.nav-filter,.nav-item span:not(.nav-icon),.nav-section-head span:first-child{display:none}.nav-item{justify-content:center;padding:12px}.main{margin-left:70px;width:calc(100% - 70px)}.content{padding:16px}.topbar{padding:10px 16px}.sidebar-footer{padding:12px 8px}.user-info{display:none}.logout-btn{font-size:12px;padding:10px}}