@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";
:root{--color-bg:#f1f5f9;--color-surface:#fff;--color-text:#0f172a;--color-text-secondary:#475569;--color-text-muted:#94a3b8;--color-accent:#f07167;--color-accent-light:#f48c84;--color-accent-glow:#f0716740;--color-primary:#1e293b;--color-primary-light:#334155;--color-border:#e2e8f0;--color-success:#10b981;--color-warning:#f59e0b;--color-error:#ef4444;--font-body:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-full:9999px;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;--transition-fast:.15s ease}html.dark{--color-bg:#0f172a;--color-surface:#1e293b;--color-text:#f1f5f9;--color-text-secondary:#94a3b8;--color-text-muted:#64748b;--color-primary:#f1f5f9;--color-primary-light:#cbd5e1;--color-border:#334155;--color-accent:#fb7185;--color-accent-light:#fda4af;--color-accent-glow:#fb718540;--shadow-sm:0 1px 2px #0000004d;--shadow-md:0 4px 6px -1px #0006,0 2px 4px -1px #0003}html.dark body{background:var(--color-bg);color:var(--color-text)}html.dark .card,html.dark .table-wrapper table{background:var(--color-surface);color:var(--color-text)}html.dark input,html.dark select,html.dark textarea,html.dark .form-input,html.dark .form-select,html.dark .form-textarea{background:var(--color-bg);color:var(--color-text);border-color:var(--color-border)}html.dark .form-input::placeholder,html.dark .form-textarea::placeholder{color:var(--color-text-muted)}html.dark .badge{color:#cbd5e1;background:#334155}html.dark .btn-secondary{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}html.dark tr:hover{background:#ffffff08}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);min-height:100vh;line-height:1.6;overflow-x:hidden}a{color:var(--color-accent);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--color-text)}.auth-wrapper{background:var(--color-primary);justify-content:center;align-items:center;min-height:100vh;display:flex}.auth-card{background:var(--color-surface);padding:var(--space-xl);border-radius:var(--radius-lg);width:100%;max-width:400px;box-shadow:var(--shadow-md)}.auth-title{margin-bottom:var(--space-md);text-align:center;font-size:1.5rem;font-weight:700}.app-layout{max-width:100vw;min-height:100vh;display:flex;overflow-x:hidden}.sidebar{background:var(--color-surface);border-right:1px solid var(--color-border);z-index:10;flex-direction:column;width:260px;height:100vh;display:flex;position:fixed}.sidebar-header{padding:var(--space-lg);border-bottom:1px solid var(--color-border);align-items:center;gap:var(--space-sm);display:flex}.sidebar-nav{padding:var(--space-md)0;flex:1;overflow-y:auto}.nav-item{align-items:center;gap:var(--space-sm);padding:var(--space-sm)var(--space-lg);color:var(--color-text-secondary);transition:all var(--transition-fast);font-weight:500;display:flex}.nav-item:hover{background:var(--color-bg);color:var(--color-primary)}.nav-item.active{color:var(--color-accent);border-right:3px solid var(--color-accent);background:#f071671a}.sidebar-footer{padding:var(--space-md)var(--space-lg);border-top:1px solid var(--color-border)}.main-content{flex-direction:column;flex:1;min-width:0;margin-left:260px;display:flex;overflow-x:hidden}.topbar{background:var(--color-surface);border-bottom:1px solid var(--color-border);height:64px;padding:0 var(--space-lg);z-index:5;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.page-container{padding:var(--space-xl);flex:1;min-width:0;overflow-x:hidden}.charts-grid{grid-template-columns:2fr 1fr;gap:1.5rem;margin-bottom:2rem;display:grid}.order-detail-grid{grid-template-columns:1fr 1fr;gap:2rem;display:grid}.order-detail-header{flex-wrap:wrap;align-items:center;gap:1rem;margin-bottom:2rem;display:flex}.page-header{margin-bottom:var(--space-lg);justify-content:space-between;align-items:center;display:flex}.page-title{font-size:1.75rem;font-weight:700}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-lg);box-shadow:var(--shadow-sm)}.stat-card{align-items:center;gap:var(--space-md);display:flex}.stat-icon{border-radius:var(--radius-md);color:#fff;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.stat-info h3{color:var(--color-text-secondary);text-transform:uppercase;font-size:.85rem;font-weight:600}.stat-info p{color:var(--color-primary);font-size:1.5rem;font-weight:700}.table-wrapper{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}table{border-collapse:collapse;width:100%}th,td{padding:var(--space-md);text-align:left;border-bottom:1px solid var(--color-border)}th{background:var(--color-bg);color:var(--color-text-secondary);text-transform:uppercase;font-size:.85rem;font-weight:600}tr:last-child td{border-bottom:none}.btn{align-items:center;gap:var(--space-sm);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);border:none;padding:.5rem 1rem;font-size:.9rem;font-weight:500;display:inline-flex}.btn-primary{background:var(--color-accent);color:#fff}.btn-primary:hover{background:var(--color-accent-light)}.btn-secondary{background:var(--color-bg);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover{background:var(--color-border)}.btn-danger{background:var(--color-error);color:#fff}.form-group{margin-bottom:var(--space-md)}.form-label{margin-bottom:var(--space-xs);font-size:.9rem;font-weight:500;display:block}.form-input,.form-select,.form-textarea{border:1px solid var(--color-border);border-radius:var(--radius-sm);width:100%;transition:border-color var(--transition-fast);padding:.6rem .8rem;font-family:inherit;font-size:.95rem}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--color-accent);outline:none}.badge{border-radius:var(--radius-full);text-transform:uppercase;padding:.25rem .5rem;font-size:.75rem;font-weight:600}.badge-pending{color:var(--color-warning);background:#f59e0b1a}.badge-paid{color:var(--color-success);background:#10b9811a}.badge-processing{color:#3730a3;background:#eef2ff}.badge-done{color:var(--color-primary);background:#0f172a1a}.loading{justify-content:center;align-items:center;min-height:40vh;display:flex}.spinner{border:3px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;width:36px;height:36px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.filter-btn{align-items:center;gap:.4rem;display:none;position:relative}.filter-btn-active-dot{background:var(--color-accent);border-radius:50%;width:8px;height:8px;position:absolute;top:-3px;right:-3px}.filter-popup-overlay{z-index:40;background:#00000080;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.filter-popup{background:var(--color-surface);color:var(--color-text);border-radius:16px 16px 0 0;width:100%;max-width:480px;max-height:80vh;padding:1.5rem;overflow-y:auto}.filter-popup-header{justify-content:space-between;align-items:center;margin-bottom:1.25rem;display:flex}.filter-popup-section{margin-bottom:1.25rem}.filter-popup-section-title{text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin-bottom:.6rem;font-size:.72rem;font-weight:700}.filter-chip-group{flex-wrap:wrap;gap:.4rem;display:flex}.filter-chip{border:1px solid var(--color-border);color:var(--color-text-secondary);cursor:pointer;background:0 0;border-radius:100px;padding:.35rem .75rem;font-size:.8rem;font-weight:500;transition:all .15s}.filter-chip.active{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.mobile-menu-btn{cursor:pointer;color:var(--color-primary);background:0 0;border:none;padding:4px;display:none}.sidebar-close{cursor:pointer;color:var(--color-text-secondary);background:0 0;border:none;padding:4px;display:none}.sidebar-overlay{appearance:none;font:inherit;border:none;margin:0;padding:0;display:none}@media (max-width:1024px){.page-container{padding:var(--space-lg)}}@media (max-width:768px){.sidebar{transition:transform .25s;transform:translate(-100%)}.sidebar.sidebar-open{transform:translate(0)}.sidebar-close{display:block}.sidebar-header{justify-content:space-between}.sidebar-overlay{z-index:9;background:#0006;display:block;position:fixed;inset:0}.mobile-menu-btn{display:flex}.main-content{max-width:100vw;margin-left:0}.charts-grid,.order-detail-grid{grid-template-columns:1fr}.order-detail-header{flex-wrap:wrap;gap:.75rem}.order-detail-header h1{font-size:1.2rem}.topbar-email{display:none}.page-container{padding:var(--space-md)}.page-header{align-items:flex-start;gap:var(--space-md);flex-direction:column}.page-title{font-size:1.35rem}.table-wrapper{-webkit-overflow-scrolling:touch;overflow-x:auto}table{min-width:640px}.topbar{padding:0 var(--space-md)}.filter-tabs{display:none!important}.filter-btn{display:inline-flex!important}.table-responsive table{min-width:unset}.table-responsive thead{display:none}.table-responsive tbody tr{border:1px solid var(--color-border);background:var(--color-surface);box-shadow:var(--shadow-sm);border-radius:10px;margin-bottom:1rem;padding:.875rem;display:block}.table-responsive td{border:none;justify-content:space-between;align-items:center;gap:.5rem;min-height:30px;padding:.35rem 0;display:flex}.table-responsive td+td{border-top:1px solid var(--color-border)}.table-responsive td:before{content:attr(data-label);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em;flex-shrink:0;min-width:80px;font-size:.7rem;font-weight:600}.table-responsive td.td-action{flex-wrap:wrap;justify-content:flex-start;padding-top:.75rem}.table-responsive td.td-action:before{display:none}}