/* ChannelOps Catalogue — standalone product datasheet site */
:root{--ink:#16233a;--muted:#5c6b83;--line:#dbe4ef;--bg:#f4f7fb;--card:#fff;--brand:#223c6e;--ok:#197450;--warn:#a2700d;--bad:#9c2e3f}
*{box-sizing:border-box}body{margin:0;font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--ink)}
.topbar{display:flex;align-items:center;gap:14px;padding:12px 22px;background:var(--brand);color:#fff}
.topbar b{letter-spacing:.04em}.topbar .spacer{flex:1}
.topbar button,.topbar a.btn{background:rgba(255,255,255,.14);border:0;color:#fff;padding:8px 14px;border-radius:9px;font-weight:600;cursor:pointer;text-decoration:none}
main{max-width:1180px;margin:24px auto;padding:0 18px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:18px;box-shadow:0 8px 22px rgba(30,55,95,.05)}
.login-wrap{max-width:420px;margin:10vh auto}.login-wrap input{width:100%;padding:11px;border:1px solid var(--line);border-radius:10px;margin-top:6px}
button.primary{background:var(--brand);color:#fff;border:0;padding:10px 16px;border-radius:10px;font-weight:700;cursor:pointer}
button.danger{background:var(--bad);color:#fff;border:0;padding:7px 12px;border-radius:9px;cursor:pointer}
input,select,textarea{font:inherit;color:var(--ink)}
.search-row{display:flex;gap:10px;align-items:center}
.search-row input{flex:1;padding:11px;border:1px solid var(--line);border-radius:10px}
.product-list{display:flex;flex-direction:column;gap:10px}
.family-row{border:1px solid var(--line);border-radius:13px;background:#fff;overflow:hidden}
.family-head{display:grid;grid-template-columns:56px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:12px 14px;cursor:pointer}
.family-head img{width:52px;height:52px;border-radius:10px;object-fit:cover;background:#eef2f8}
.family-head h3{margin:0;font-size:15px}.family-head small{color:var(--muted)}
.variation-menu{border-top:1px dashed var(--line);background:#fafbfd;display:none;padding:10px 14px;gap:8px;flex-wrap:wrap}
.family-row.open .variation-menu{display:flex}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;font-size:12px;font-weight:600;cursor:pointer}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.count-pill{background:#eef3fa;color:#40577e;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:800}
.datasheet h2{margin:.2em 0 .8em}.ds-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px}
.ds-card{border:1px solid var(--line);border-radius:13px;padding:14px;background:#fbfcfe;margin-bottom:14px}
.ds-card h4{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
label.field{display:block;margin-bottom:9px}label.field span{display:block;font-size:11px;font-weight:800;color:var(--muted);margin-bottom:4px}
label.field input,label.field select,label.field textarea{width:100%;padding:9px;border:1px solid var(--line);border-radius:9px}
table.attributes{width:100%;border-collapse:collapse}table.attributes th,table.attributes td{border:1px solid var(--line);padding:7px 9px;font-size:13px;text-align:left}
table.attributes th{background:#f0f4fa}table.attributes input{width:100%;border:1px solid transparent;background:transparent;padding:4px}
table.attributes input:focus{border-color:var(--line);background:#fff;border-radius:6px}
.ids-table td{font-size:12.5px}
.image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.asset-tile{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.asset-tile img{width:100%;height:96px;object-fit:cover;display:block}
.asset-tile.file{padding:12px;font-size:12px;font-weight:700;word-break:break-all}
.asset-tile .row{display:flex;justify-content:space-between;padding:6px 8px;font-size:11px}
.badge-primary{background:var(--ok);color:#fff;border-radius:7px;padding:2px 7px;font-weight:800;font-size:10px}
.upload-zone{border:2px dashed #b9c8de;border-radius:13px;padding:18px;text-align:center;color:var(--muted);cursor:pointer;margin-bottom:12px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.msg{margin:10px 0;padding:9px 12px;border-radius:10px;font-size:13px;display:none}
.msg.ok{display:block;background:#ecf7f1;color:var(--ok)}.msg.err{display:block;background:#fbecee;color:var(--bad)}
.hidden{display:none!important}
.statusdot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px}
.dot-up{background:#37d67a}.dot-down{background:#ff7875}