:root{--bg:#f6f5f3;--sf:#fff;--tx:#1d1d1f;--mu:#6b6b70;--bd:#e3e1dd;--ac:#d6457a;--ok:#1a7f4b;--wr:#b7791f;--er:#c0392b;color-scheme:light}
@media(prefers-color-scheme:dark){:root{--bg:#141416;--sf:#1e1e21;--tx:#f0f0f2;--mu:#9a9aa2;--bd:#32323a;--ac:#ef6a9b;--ok:#4cc38a;--wr:#e0b04a;--er:#ef7b6e;color-scheme:dark}}
*{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);color:var(--tx);font:14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
.app{display:flex;min-height:100vh}nav{width:210px;background:var(--sf);border-right:1px solid var(--bd);padding:16px 10px;flex-shrink:0}
nav h1{font-size:15px;margin:0 8px 14px;color:var(--ac)}nav a{display:block;padding:8px 10px;border-radius:8px;color:var(--mu);cursor:pointer}
nav a.on{background:var(--ac);color:#fff}nav a:hover:not(.on){background:var(--bg)}
main{flex:1;padding:20px;min-width:0}.top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
h2{margin:0;font-size:20px}h3{font-size:15px;margin:18px 0 8px}
.card{background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:14px;margin-bottom:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.kpi b{display:block;font-size:24px}.kpi span{color:var(--mu);font-size:12px}
.tw{overflow-x:auto}table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:7px 9px;border-bottom:1px solid var(--bd);white-space:nowrap}th{color:var(--mu);font-weight:600;font-size:12px}
input,select,textarea,button{font:inherit;color:var(--tx);background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:7px 10px}
button{cursor:pointer;background:var(--ac);color:#fff;border:0}button.g{background:var(--bg);color:var(--tx);border:1px solid var(--bd)}button.s{padding:3px 9px;font-size:12px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:end}.row label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--mu)}
.tag{padding:2px 8px;border-radius:99px;font-size:11px;border:1px solid currentColor}.layak,.acc{color:var(--ok)}.karantina,.pending{color:var(--wr)}.defect,.expired,.tolak,.bad{color:var(--er)}
.note{color:var(--mu);font-size:12px}textarea{width:100%;min-height:90px;font-family:ui-monospace,monospace}
.cg{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:10px}.cg .card{margin-bottom:0}.cg svg{width:100%;height:auto;display:block}.cg text{fill:var(--mu);font-size:10px}
.c1{fill:var(--ac)}.c2{fill:var(--ok)}.c3{fill:var(--wr)}.ax{stroke:var(--bd)}.ln{stroke:var(--ac);fill:none;stroke-width:2}.dot{fill:var(--ac)}
.hb{display:flex;align-items:center;gap:8px;margin:6px 0}.hb span{width:120px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb div{flex:1;background:var(--bg);border-radius:6px;height:16px}.hb i{display:block;height:100%;border-radius:6px;background:var(--ac)}.hb b{width:48px;text-align:right;font-size:12px}
@media(max-width:760px){.app{flex-direction:column}nav{width:100%;display:flex;flex-wrap:wrap;gap:4px;border-right:0;border-bottom:1px solid var(--bd)}nav h1{width:100%}}