:root{--bg:#f4f3f1;--card:#fff;--tx:#1a1a1a;--mu:#6b6b6b;--bd:#e3e0dc;--red:#c8102e;--gold:#e8a900;--blk:#151515}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--tx);font:14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;display:flex;min-height:100vh}
aside{width:240px;background:var(--blk);color:#fff;padding:16px 10px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;flex-shrink:0}
.br{display:flex;gap:10px;align-items:center;padding:4px 8px 14px;border-bottom:3px solid var(--red);margin-bottom:10px}.br img{width:46px;height:46px;background:#fff;border-radius:8px;padding:2px}.br b{font-size:13px;display:block;line-height:1.2}.br small{color:var(--gold)}
nav{flex:1}nav a{display:block;color:#cfcfcf;padding:10px 12px;border-radius:8px;text-decoration:none;margin:2px 0}nav a:hover{background:#2a2a2a}nav a.on{background:var(--red);color:#fff}
.me{border-top:1px solid #333;padding:12px 8px;font-size:13px}.me small{color:var(--gold)}.me a{display:block;color:#fff;margin-top:8px}
main{flex:1;min-width:0;padding:24px}h1{margin:0 0 14px;font-size:22px}h3{margin:0 0 10px}.sub{color:var(--mu);margin:-8px 0 14px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:16px;margin-bottom:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:14px}.grid .card{margin:0}.kpi{border-top:4px solid var(--red)}.kpi:nth-child(2){border-color:var(--gold)}.kpi:nth-child(3){border-color:var(--blk)}.kpi span{color:var(--mu);font-size:12px}.kpi div{font-size:28px;font-weight:700}
.tw{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{padding:9px 10px;border-bottom:1px solid var(--bd);text-align:left;vertical-align:top}th{font-size:12px;color:var(--mu);text-transform:uppercase}td.r{text-align:right}
.tag{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;background:#eee}.g{background:#d9f2df;color:#14622b}.y{background:#fff0c2;color:#7a5600}.r{background:#fbd5da;color:#8e0b1f}
.bar{flex:1;height:10px;background:var(--bd);border-radius:6px;overflow:hidden;min-width:80px}.bar i{display:block;height:100%;background:var(--red)}.row{display:flex;align-items:center;gap:10px;margin:8px 0}.row label{width:260px;flex-shrink:0}.row b{width:44px;text-align:right}
input,select,textarea{font:inherit;padding:8px 10px;border:1px solid var(--bd);border-radius:8px;background:#fff;color:var(--tx);max-width:100%}
.b{display:inline-block;background:var(--red);color:#fff;border:0;border-radius:8px;padding:8px 14px;cursor:pointer;text-decoration:none;font:inherit}.b.o{background:none;color:var(--tx);border:1px solid var(--bd)}
form:not(.login):not(.inl):not([hidden]){display:flex;flex-wrap:wrap;gap:8px}.inl{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.inl input{flex:1;min-width:160px}
td input[name^=c]{width:100%;margin-top:6px}.bk a{display:block;font-size:12px;margin-top:4px;color:var(--red)}.sticky{position:sticky;bottom:12px;margin:0 0 14px;box-shadow:0 4px 14px #0003}.cari{width:100%;margin-bottom:10px}
.lg{align-items:center;justify-content:center;background:linear-gradient(135deg,#151515 50%,#c8102e 50%)}.login{width:360px;max-width:92vw;text-align:center;display:flex;flex-direction:column;gap:12px;padding:28px}.login img{width:120px;margin:auto}.login h2,.login p{margin:0}.login label{text-align:left;display:grid;gap:4px}.err{background:#fbd5da;color:#8e0b1f;padding:8px;border-radius:8px}
.kop{background:#fff;padding:28px;border:1px solid var(--bd);font-family:"Times New Roman",serif;margin-top:12px}.kop .h{display:flex;align-items:center;gap:16px;border-bottom:4px double #000;padding-bottom:10px;text-align:center}.kop .h img{width:96px}.kop .h div{flex:1}.kop p{margin:0}.kop .n{font-size:24px;font-weight:700}.kop .l{font-weight:700}.kop .s{font-size:12px}.kop .c{text-align:center;margin:16px 0}
.kop table th,.kop table td{border:1px solid #555;color:#000;font-size:13px}.kop .pl td{border:0;padding:2px 6px}.ttd{display:flex;justify-content:space-between;text-align:center;margin-top:34px}
@media(max-width:800px){body{flex-direction:column}aside{width:100%;height:auto;position:static}nav{display:flex;overflow-x:auto}.row label{width:120px}}
@media print{aside,.np{display:none!important}main{padding:0}.kop{border:0;padding:0}body{background:#fff}}
.lgd{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.lgd button{display:flex;align-items:center;gap:6px;border:1px solid var(--bd);background:#fff;border-radius:99px;padding:3px 10px;cursor:pointer;font:inherit;font-size:12px}.lgd button.off{opacity:.4}.lgd i{width:10px;height:10px;border-radius:50%}
.ed{margin-top:6px;font-size:12px}.ed input{width:100%;margin-top:4px}