#app{display:none}
.topbar{background:var(--brand);border-bottom:1px solid var(--brand2);height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:200;box-shadow:0 2px 12px rgba(0,0,0,.4)}
.brand{display:flex;align-items:center;gap:16px}
.brand-logo{display:flex;flex-direction:column;line-height:1}
.brand-logo .brand-main{font-size:16px;font-weight:300;letter-spacing:6px;color:#fff;text-transform:uppercase;font-family:'Mulish',sans-serif}
.brand-logo .brand-sub{font-size:8px;font-weight:500;letter-spacing:4px;color:#CECECE;text-transform:uppercase;font-family:'Mulish',sans-serif;margin-top:2px}
.brand-divider{width:1px;height:32px;background:rgba(255,255,255,.2)}
.brand-ws{font-size:10px;font-weight:600;letter-spacing:2px;color:rgba(255,255,255,.5);text-transform:uppercase}
.rbadge{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:0;padding:4px 12px;font-size:11px;color:rgba(255,255,255,.8);font-family:'Mulish',sans-serif;letter-spacing:1px}
.rbadge.admin{border-color:var(--gold);color:var(--gold)}
.navtabs{display:flex;background:#fff;border-bottom:2px solid var(--border);padding:0 24px;overflow-x:auto;scrollbar-width:none}
.navtabs::-webkit-scrollbar{display:none}
@keyframes fbpulse{0%,100%{opacity:1}50%{opacity:.4}}
.ntab{padding:14px 18px;cursor:pointer;color:var(--text2);font-size:12px;font-weight:600;white-space:nowrap;border-bottom:2px solid transparent;transition:all .2s;letter-spacing:.5px;text-transform:uppercase;margin-bottom:-2px;position:relative}
.ntab:hover{color:var(--brand)}
.ntab.active{color:var(--brand);border-bottom-color:var(--brand)}
.ntab-dropdown{position:relative}
.ntab-dropdown:hover .ntab-submenu{display:block}
.ntab-submenu{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--border);border-top:2px solid var(--brand);box-shadow:0 4px 16px rgba(72,72,73,.12);z-index:999;min-width:160px}
.ntab-submenu .nsubtab{display:block;padding:10px 18px;font-size:12px;font-weight:600;color:var(--text2);cursor:pointer;white-space:nowrap;letter-spacing:.5px;text-transform:uppercase;border-bottom:1px solid var(--border);transition:all .15s}
.ntab-submenu .nsubtab:last-child{border-bottom:none}
.ntab-submenu .nsubtab:hover{background:var(--bg3);color:var(--brand)}
.ntab-submenu .nsubtab.active{color:var(--brand);background:rgba(72,72,73,.05);font-weight:700}
.stok-subtabs{display:none;background:#f9f9f8;border-bottom:1px solid var(--border);padding:0 24px;gap:0}
.stok-subtabs.visible{display:flex}
.stok-subtab{padding:10px 16px;cursor:pointer;color:var(--text2);font-size:11px;font-weight:600;white-space:nowrap;border-bottom:2px solid transparent;transition:all .2s;letter-spacing:.5px;text-transform:uppercase;margin-bottom:-1px}
.stok-subtab:hover{color:var(--brand)}
.stok-subtab.active{color:var(--brand);border-bottom-color:var(--brand)}
.page{display:none;padding:24px 20px;max-width:1440px;margin:0 auto}
.page.active{display:block}

.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:14px;margin-bottom:26px}
.scard{background:#fff;border:1px solid var(--border);border-radius:0;padding:18px;position:relative;overflow:hidden;border-left:3px solid var(--brand)}
.scard::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold)}
.scard.green::before{background:var(--green)}.scard.blue::before{background:var(--blue)}
.scard.orange::before{background:var(--orange)}.scard.purple::before{background:var(--purple)}
.scard.red::before{background:var(--red)}.scard.teal::before{background:var(--teal)}
.slabel{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px}
.sval{font-size:26px;font-weight:700;font-family:'IBM Plex Mono',monospace}

.tbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.tbar h2{font-size:17px;font-weight:600}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.filters input,.filters select{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r);padding:7px 12px;color:var(--text);font-size:13px;outline:none}
.filters input:focus,.filters select:focus{border-color:var(--gold)}
.twrap{background:var(--bg2);border:1px solid var(--border);border-radius:12px;overflow:hidden;overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:700px;table-layout:auto}
thead{background:var(--bg3)}
th{padding:7px 5px;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);font-weight:600;white-space:nowrap}
td{padding:7px 5px;border-top:1px solid var(--border);vertical-align:middle;font-size:13px}
tr:hover td{background:rgba(255,255,255,.015)}
.mono{font-family:'IBM Plex Mono',monospace;font-size:12px}