*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f7f8fa;--surface:#fff;--border:#e4e6ea;--text:#1a1d23;--muted:#6b7280;--accent:#4f46e5;--accent-light:#ede9fe;--green:#16a34a;--red:#dc2626;--yellow:#ca8a04;--orange:#ea580c;--blue:#2563eb;--gray:#6b7280;--sidebar-w:232px;--radius:8px;color:var(--text);background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:15px}.layout{min-height:100vh;display:flex}.sidebar{width:var(--sidebar-w);background:#0f172a;border-right:none;flex-direction:column;padding:0;display:flex;position:fixed;top:0;bottom:0;left:0;box-shadow:2px 0 12px #0000002e}.logo{border-bottom:1px solid #ffffff12;padding:1.25rem 1rem 1rem}.sidebar nav{flex-direction:column;flex:1;gap:0;padding:.75rem .625rem;display:flex;overflow-y:auto}.sidebar nav::-webkit-scrollbar{width:4px}.sidebar nav::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}.nav-group{margin-bottom:.25rem}.nav-section-label{letter-spacing:.07em;text-transform:uppercase;color:#475569;-webkit-user-select:none;user-select:none;align-items:center;gap:6px;padding:.55rem .625rem .2rem;font-size:.75rem;font-weight:700;display:flex}.nav-section-label:before{content:"";border-radius:2px;flex-shrink:0;width:3px;height:10px;display:inline-block}.nav-group-dashboard .nav-section-label:before{background:#64748b}.nav-group-operations .nav-section-label:before{background:#6366f1}.nav-group-procurement .nav-section-label:before{background:#10b981}.nav-group-customers .nav-section-label:before{background:#f59e0b}.nav-group-agent .nav-section-label:before{background:#a78bfa}.nav-group-account .nav-section-label:before{background:#94a3b8}.nav-link{color:#94a3b8;border-radius:6px;margin-bottom:1px;padding:.45rem .75rem;font-size:.9375rem;font-weight:500;text-decoration:none;transition:background .12s,color .12s;display:block}.nav-link:hover{color:#e2e8f0;background:#1e293b}.nav-link.active{color:#a5b4fc;background:#6366f12e;font-weight:600}.nav-divider{background:#ffffff0f;height:1px;margin:.35rem .625rem}.content{margin-left:var(--sidebar-w);flex:1;max-width:1100px;padding:2rem}.page{flex-direction:column;gap:1.5rem;display:flex}.page h1{font-size:1.5rem;font-weight:700}.page h2{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:1rem;font-weight:600}.page section{flex-direction:column;gap:.75rem;display:flex}.page-header{justify-content:space-between;align-items:flex-start;display:flex}.stat-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;display:grid}.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem}.stat-card.accent{border-color:var(--accent);background:var(--accent-light)}.stat-card.accent .stat-value{color:var(--accent)}.stat-value{font-size:1.75rem;font-weight:700;line-height:1}.stat-label{color:var(--muted);margin-top:.25rem;font-size:.875rem}.stat-sub{color:var(--muted);margin-top:.125rem;font-size:.875rem}.table{border-collapse:collapse;background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);width:100%;overflow:hidden}.table th,.table td{text-align:left;border-bottom:1px solid var(--border);padding:.625rem .875rem}.table th{color:var(--muted);background:var(--bg);font-size:.875rem;font-weight:600}.table tr:last-child td{border-bottom:none}.table tr:hover td{background:#fafafa}.small{font-size:.8125rem}.badge{text-transform:uppercase;letter-spacing:.03em;border-radius:999px;padding:.2em .6em;font-size:.75rem;font-weight:600;display:inline-block}.badge-green{color:var(--green);background:#dcfce7}.badge-red{color:var(--red);background:#fee2e2}.badge-yellow{color:var(--yellow);background:#fef9c3}.badge-orange{color:var(--orange);background:#ffedd5}.badge-blue{color:var(--blue);background:#dbeafe}.badge-gray{color:var(--gray);background:#f3f4f6}.btn{border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;padding:.4375rem .875rem;font-size:.875rem;font-weight:500;transition:background .1s}.btn:hover:not(:disabled){background:var(--bg)}.btn:disabled{opacity:.5;cursor:default}.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn-primary:hover:not(:disabled){background:#4338ca}.btn-sm{padding:.25rem .625rem;font-size:.8125rem}.btn-row{gap:.5rem;margin-top:.5rem;display:flex}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem}.form{flex-direction:column;gap:.75rem;max-width:480px;display:flex}.form h2{margin-bottom:.25rem;font-size:1rem;font-weight:600}.form label{flex-direction:column;gap:.25rem;display:flex}.form label span{color:var(--muted);font-size:.8125rem;font-weight:500}.form input,.form select{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);padding:.4375rem .75rem;font-size:.875rem}.form input:focus,.form select:focus{outline:2px solid var(--accent);border-color:#0000}.toolbar{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.filter-group{flex-wrap:wrap;gap:.375rem;display:flex}.search{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);min-width:240px;padding:.4375rem .75rem;font-size:.875rem}.search:focus{outline:2px solid var(--accent);border-color:#0000}.pagination{align-items:center;gap:.75rem;display:flex}.pagination span{color:var(--muted);font-size:.875rem}.progress-bar{align-items:center;gap:.5rem;display:flex}.progress-bar>div{background:var(--bg);border-radius:999px;flex:1;max-width:80px;height:6px;overflow:hidden}.progress-fill{background:var(--accent);border-radius:999px;height:100%}.progress-bar span{color:var(--muted);white-space:nowrap;font-size:.8125rem}.modal-backdrop{z-index:50;background:#0006;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--surface);border-radius:var(--radius);flex-direction:column;gap:.75rem;width:100%;max-width:400px;padding:1.5rem;display:flex;box-shadow:0 20px 60px #00000026}.modal h2{margin-bottom:.25rem;font-size:1.125rem;font-weight:600}.modal label{flex-direction:column;gap:.25rem;display:flex}.modal label span{color:var(--muted);font-size:.875rem;font-weight:500}.modal input,.modal select{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);padding:.4375rem .75rem;font-size:.875rem}.muted{color:var(--muted)}.error{color:var(--red);font-size:.875rem}.link{color:var(--accent);font-weight:500;text-decoration:none}.link:hover{text-decoration:underline}