/* Distributor portal (24 Oct 2026) — phone first */
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:#f4f5f8;color:#1f2a33;font-size:14px}
a{color:#0277bd}.muted{color:#78909c}.sp{flex:1}
#hd{position:sticky;top:0;z-index:10;background:#2D323D;color:#fff}
#hd .row1{display:flex;align-items:center;gap:10px;padding:10px 16px}
.brand{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#90a4ae}
#dname{font-size:17px;font-weight:700}
#fy{background:#3b4150;color:#fff;border:0;border-radius:6px;padding:7px 8px;font-size:13px}
#out{color:#cfd8dc;font-size:12px;text-decoration:none;white-space:nowrap}
#tabs{display:flex;gap:2px;overflow-x:auto;padding:0 8px;scrollbar-width:none}#tabs::-webkit-scrollbar{display:none}
#tabs button{flex:none;border:0;background:none;color:#b0bec5;padding:10px 14px;font-size:14px;cursor:pointer;border-bottom:3px solid transparent}
#tabs button.on{color:#fff;border-bottom-color:#29b6f6;font-weight:600}
#main{padding:16px;max-width:1280px;margin:0 auto}
.viewas{background:#fff3e0;color:#e65100;padding:6px 16px;font-size:12px}
.card{background:#fff;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.08);padding:14px;margin-bottom:14px}
.card h3{margin:0 0 10px;font-size:15px}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.kpi{background:#fff;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.08);padding:12px}
.kpi .l{font-size:11px;color:#78909c;text-transform:uppercase;letter-spacing:.4px}.kpi .v{font-size:21px;font-weight:700;margin-top:4px}
.kpi .s{font-size:12px;color:#78909c;margin-top:2px}.kpi.ret .v{color:#c62828}
.bars{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:10px}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.bars .b i{display:block;width:100%;background:#29b6f6;border-radius:4px 4px 0 0;min-height:1px}
.bars .b em{font-style:normal;font-size:10px;color:#78909c;margin-top:4px}.bars .b u{text-decoration:none;font-size:10px;color:#455a64;margin-bottom:2px;white-space:nowrap}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse}th,td{padding:8px;border-bottom:1px solid #eceff1;text-align:left;white-space:nowrap;vertical-align:middle}
th{font-size:11px;color:#78909c;text-transform:uppercase;font-weight:600}td.n,th.n{text-align:right}
tr.click{cursor:pointer}tr.click:hover td{background:#f1f8fe}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;align-items:center}
.filters input,.filters select{font:inherit;padding:8px 10px;border:1px solid #cfd8dc;border-radius:8px;background:#fff;min-width:0}
.filters input[type=search]{flex:1 1 180px}
.btn{border:0;background:#eceff1;padding:8px 14px;border-radius:18px;cursor:pointer;font:inherit;font-size:13px;white-space:nowrap}
.btn.pri{background:#0288d1;color:#fff}
.chip{display:inline-flex;align-items:center;gap:6px;background:#e1f5fe;color:#01579b;border-radius:16px;padding:5px 10px;font-size:13px}
.chip button{border:0;background:none;cursor:pointer;font-size:15px;color:#01579b;padding:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.prod{background:#fff;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.08);overflow:hidden;cursor:pointer}
.prod img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#eceff1;display:block}
.pw{position:relative}.pw .oc{position:absolute;left:6px;bottom:6px;background:rgba(0,0,0,.6);color:#fff;font-size:10px;padding:2px 6px;border-radius:4px}
.prod .b{padding:8px 10px}.prod .c{font-weight:700}.prod .m{color:#78909c;font-size:12px;margin:2px 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prod .q{font-size:13px}.prod .q b{font-size:15px}
.sizes{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px}.sizes span{font-size:11px;background:#e1f5fe;border-radius:4px;padding:2px 5px}
.more{text-align:center;margin:16px 0}
.thumb{width:42px;height:56px;object-fit:cover;border-radius:4px;background:#eceff1;display:block}
.tag{display:inline-block;font-size:11px;border-radius:4px;padding:1px 6px;background:#eceff1;color:#455a64}
.tag.fair{background:#fff8e1;color:#8d6e00}.tag.d2d{background:#ede7f6;color:#4527a0}.tag.ret{background:#ffebee;color:#c62828}
#modal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:50;display:none;align-items:flex-start;justify-content:center;overflow:auto;padding:16px}
#modal.on{display:flex}#modal .box{background:#fff;border-radius:12px;max-width:1000px;width:100%;padding:18px;position:relative}
#modal .x{position:absolute;right:10px;top:6px;border:0;background:none;font-size:28px;cursor:pointer;color:#546e7a}
.pd{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:18px}.pd .main{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;background:#eceff1}
.attrs{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;margin:8px 0 12px;font-size:13px}.attrs b{color:#78909c;font-weight:600}
h2.t{margin:0 0 4px;font-size:19px;padding-right:30px}
.grp{font-weight:700;margin:16px 0 6px;padding-bottom:4px;border-bottom:2px solid #29b6f6;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.szg td,.szg th{text-align:center;padding:5px 6px}
.empty{padding:30px;text-align:center;color:#78909c}
body.login{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#2D323D;padding:16px}
.lcard{background:#fff;border-radius:12px;padding:24px;width:100%;max-width:340px}.lcard h2{margin:4px 0}
.lcard input{display:block;width:100%;font:inherit;padding:10px;border:1px solid #cfd8dc;border-radius:8px;margin-bottom:10px}
.lcard button{width:100%;border:0;background:#0288d1;color:#fff;padding:11px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer}
@media(max-width:640px){#main{padding:12px}.pd{grid-template-columns:1fr}.pd .main{max-width:320px;margin:0 auto}
  .grid{grid-template-columns:repeat(2,1fr);gap:8px}#dname{font-size:15px}.kpi .v{font-size:18px}.hide-m{display:none}}