#sup-app{--blue:#1f6feb;--dark:#111827;--green:#16834b;--red:#d93025;--amber:#b26a00;--line:#dfe4e8;color:#17202a;font:14px Arial,sans-serif;max-width:1500px;margin:18px auto}#sup-app *{box-sizing:border-box}.sup-head{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--dark);color:#fff;padding:16px 18px;border-radius:14px}.sup-head h1{font-size:21px;margin:0}.sup-tabs,.sup-actions{display:flex;flex-wrap:wrap;gap:7px}.sup-tabs{margin:14px 0}.sup-btn{border:0;border-radius:8px;padding:9px 13px;background:var(--blue);color:#fff;font-weight:700;cursor:pointer}.sup-btn.alt{background:#eef2f6;color:#26313b}.sup-btn.ok{background:var(--green)}.sup-btn.warn{background:#d98b16}.sup-tab.active{background:var(--blue);color:#fff}.sup-panel{display:none}.sup-panel.active{display:block}.sup-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.sup-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px;margin-bottom:12px;box-shadow:0 2px 8px #00000008}.sup-kpi{font-size:27px;font-weight:800;margin-top:5px}.sup-muted{color:#68737d;font-size:12px}.sup-row{display:flex;flex-wrap:wrap;gap:10px;align-items:end}.sup-field{display:flex;flex:1;min-width:150px;flex-direction:column;gap:5px}.sup-field input,.sup-field select,.sup-field textarea{width:100%;padding:9px;border:1px solid #cbd3da;border-radius:7px;background:#fff}.sup-tablewrap{overflow:auto;border-radius:10px}.sup-table{width:100%;border-collapse:collapse;background:#fff;min-width:720px}.sup-table th,.sup-table td{padding:9px 8px;border-bottom:1px solid #edf0f2;text-align:left;vertical-align:middle}.sup-table th{background:#f7f9fb}.sup-low{color:var(--red);font-weight:800}.sup-ok{color:var(--green);font-weight:800}.sup-pending{color:var(--amber);font-weight:800}.sup-modal{position:fixed;inset:0;background:#0008;z-index:99999;display:flex;align-items:center;justify-content:center;padding:15px}.sup-modalbox{width:min(720px,96vw);max-height:90vh;overflow:auto;background:#fff;border-radius:14px;padding:19px}.sup-modalbox h2{margin-top:0}.sup-empty{text-align:center;padding:28px;color:#68737d}.sup-toast{position:fixed;right:18px;bottom:18px;z-index:100000;background:#17202a;color:#fff;padding:13px 16px;border-radius:9px}.sup-toast.error{background:var(--red)}.sup-loading{padding:50px;text-align:center}.sup-login{padding:22px;border:1px solid #dfe4e8;border-radius:12px;background:#fff}@media(max-width:900px){.sup-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){#sup-app{margin:8px}.sup-grid{grid-template-columns:1fr}.sup-head{align-items:flex-start;flex-direction:column}.sup-btn{padding:10px}.sup-tabs{flex-wrap:nowrap;overflow:auto;padding-bottom:5px}.sup-tab{white-space:nowrap}}