*{box-sizing:border-box} :root{--ink:#202735;--muted:#7b8393;--line:#e9ecf2;--bg:#f6f7fb;--purple:#6554df;--nav:232px}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.55 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}a{color:var(--purple);text-decoration:none}a:hover{filter:brightness(.88)}aside{position:fixed;width:var(--nav);height:100vh;top:0;left:0;background:white;border-right:1px solid var(--line);padding:26px 18px;display:flex;flex-direction:column;z-index:2}.brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:750;color:var(--ink);letter-spacing:-.6px}.brand small{font-size:10px;background:#f0edff;color:var(--purple);border-radius:5px;padding:1px 4px}.logo{background:var(--purple);color:white;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;font-size:19px}.workspace{display:flex;align-items:center;gap:10px;border:1px solid var(--line);padding:12px;border-radius:10px;margin:28px 0;font-size:12px;font-weight:650}.workspace small,.sidefoot small{display:block;color:var(--muted);font-size:10px;font-weight:400}.avatar{display:grid;place-items:center;width:29px;height:29px;background:#eeeefa;border-radius:8px;color:var(--purple);font-size:10px}.navlabel{font-size:9px;font-weight:700;color:#959baa;letter-spacing:1.2px;margin:0 10px 12px}nav{display:grid;gap:5px}nav a{padding:11px 12px;border-radius:8px;color:#697183;font-size:12px;font-weight:550;display:flex;gap:12px;align-items:center}nav a.selected{background:#eeebff;color:var(--purple)}nav a:hover{background:#f4f3fc}nav i{font-style:normal;font-size:18px;width:18px;text-align:center}.sidefoot{margin-top:auto;font-size:11px;padding:18px 10px 0}.sidefoot small{margin-top:7px}.dot{display:inline-block;width:6px;height:6px;background:#5eaf8f;border-radius:50%;margin-right:5px}main{margin-left:var(--nav)}header{height:70px;background:#fff;border-bottom:1px solid var(--line);padding:0 36px;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:11px}header b{font-weight:500;color:#444c5c}.pill{border:1px solid var(--line);border-radius:20px;padding:6px 12px;color:#747c8c;font-size:10px}.content{max-width:1550px;margin:auto;padding:34px 36px}.eyebrow{font-size:9px;font-weight:700;letter-spacing:1.7px;color:var(--muted);margin-bottom:9px}.titleline{display:flex;align-items:center;justify-content:space-between;gap:14px}h1{font-size:29px;letter-spacing:-1.1px;line-height:1.3;margin:0;font-weight:680}.heading p{color:var(--muted);font-size:12px;margin:10px 0 28px}h2{font-size:16px;letter-spacing:-.3px;margin:0 0 16px;font-weight:650}p{font-size:12px}button,.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--purple);color:#fff;border:1px solid transparent;border-radius:8px;padding:10px 15px;font:600 11px/1.5 inherit;font-size:11px;cursor:pointer;text-decoration:none;font-family:inherit}button:hover,.button:hover{filter:brightness(.95)}button:disabled{opacity:.45;cursor:not-allowed}.secondary{background:#fff;color:#596173;border-color:#e1e4ec}.hero{background:linear-gradient(110deg,#eeebff,#f2efff 65%,#e9e6ff);border:1px solid #e3defb;border-radius:14px;padding:30px 32px;display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.tag{font-size:8px;color:var(--purple);font-weight:750;letter-spacing:1.7px}.hero h2{font-size:24px;letter-spacing:-.9px;margin:12px 0 8px}.hero p{color:#77758e;font-size:12px;line-height:1.85;margin-bottom:20px}.herofigure{font-size:84px;font-weight:250;letter-spacing:-7px;color:#bdb4ef;padding-right:20px}.herofigure span{display:block;font-size:9px;letter-spacing:0;color:#8e83bd}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}.metrics article,.panel{background:white;border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 3px #23304e02}.metrics article{padding:20px}.metrics label{font-size:11px;color:#7c8494}.metrics strong{display:block;font-size:30px;font-weight:620;letter-spacing:-1px;margin:13px 0 6px}.metrics em{font-style:normal;font-size:15px;font-weight:400;color:#9ba2af}.metrics small{font-size:9px;color:#989eaa}.twocol{display:grid;grid-template-columns:1.15fr 1fr;gap:22px}.panel{padding:24px;margin-bottom:22px}.badge{display:inline-block;padding:4px 8px;border-radius:6px;background:#f0f2f6;color:#87909f;font-size:9px;font-weight:550;white-space:nowrap}.badge.amber{color:#a47b2c;background:#fff6e3}.badge.green{color:#398767;background:#eaf7f0}.panel h2 .badge{margin-left:8px;vertical-align:middle}.checklist{list-style:none;counter-reset:steps;margin:0;padding:0}.checklist li{counter-increment:steps;position:relative;padding:13px 0 15px 42px;border-bottom:1px solid #f2f3f7}.checklist li:last-child{border:none}.checklist li:before{content:counter(steps);position:absolute;left:0;top:14px;width:27px;height:27px;border-radius:50%;background:#f0edff;display:grid;place-items:center;font-size:11px;color:var(--purple)}.checklist b{font-size:12px;font-weight:600}.checklist small{display:block;font-size:10px;color:#949baa;margin-top:3px}.quality{display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #f1f3f7;padding:18px 0;font-size:11px}.quality b{font-weight:500}.muted{color:var(--muted)}.toolbar{display:flex;gap:10px}.toolbar input{flex:1}.toolbar select{width:235px}input,select{border:1px solid #dfe4ed;border-radius:7px;background:#fff;color:#323b4c;padding:10px 12px;font:12px/1.5 inherit;font-size:12px;font-family:inherit;max-width:100%}input:focus,select:focus{outline:2px solid #d6d0ff;border-color:#998aec}.tablewrap{overflow:auto}table{border-collapse:collapse;width:100%;text-align:left;white-space:nowrap}th{font-size:9px;font-weight:600;letter-spacing:.3px;color:#8c94a2;background:#fafbfc;padding:13px 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}td{padding:15px 12px;border-bottom:1px solid #eff1f5;font-size:11px}td b{font-weight:600}td small{display:block;font-size:9px;color:#929aa7;margin-top:3px}tr:hover td{background:#fcfbff}.pagination{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:20px;font-size:10px;color:var(--muted)}.pagination span{margin-right:auto}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:20px}label{display:block;font-size:11px;color:#697384}label input,label select{display:block;margin-top:7px;width:100%}.wide{grid-column:1/-1}.checkbox{display:flex;align-items:center;gap:9px;margin:20px 0}.checkbox input{width:auto;margin:0}.inline{display:flex;gap:5px}.inline input{width:145px;padding:6px 8px}.inline button{padding:5px 10px}.notice{padding:13px 16px;border:1px solid #ebe6d8;background:#fffaf0;color:#927132;border-radius:8px;font-size:11px;margin:15px 0}.notice.success{background:#edf8f0;border-color:#daeee0;color:#2e8051}.notice.error{background:#fff0ef;border-color:#f2d9d7;color:#a84c46}.stocknumber{font-size:38px;font-weight:620;letter-spacing:-1px}.back{display:inline-block;font-size:12px;margin-bottom:18px}.empty{text-align:center;padding:65px 30px}.emptyicon{font-size:42px;color:var(--purple);margin-bottom:18px}.empty h2{font-size:24px;margin-top:20px}.empty p{max-width:570px;margin:18px auto}.empty .button{margin-top:15px}footer{display:flex;justify-content:space-between;font-size:9px;color:#a0a7b4;padding-top:10px}button:focus-visible,a:focus-visible{outline:3px solid #b9aeff;outline-offset:3px}@media(min-width:1700px){.content{padding-top:45px}}@media(max-width:1150px){:root{--nav:205px}.content{padding:25px}.metrics{grid-template-columns:repeat(2,1fr)}.herofigure{display:none}.twocol{grid-template-columns:1fr}header{padding:0 25px}.pill{display:none}}@media(max-width:700px){:root{--nav:0px}aside{position:static;width:100%;height:auto;padding:15px}.brand{font-size:17px}.workspace,.navlabel,.sidefoot{display:none}nav{display:flex;overflow-x:auto;margin-top:14px}nav a{white-space:nowrap;padding:8px;font-size:11px}nav i{display:none}main{margin:0}header{height:45px;font-size:10px}.content{padding:20px 14px}.titleline{flex-wrap:wrap}h1{font-size:24px}.hero{padding:23px}.hero h2{font-size:22px}.metrics{gap:10px}.metrics article{padding:15px}.metrics strong{font-size:27px}.panel{padding:17px}.toolbar{flex-wrap:wrap}.toolbar input{min-width:100%}.toolbar select{flex:1}.formgrid{grid-template-columns:1fr}.hero p br{display:none}footer{display:block}footer span{display:block;margin-top:5px}.heading p{font-size:11px}.metrics small{font-size:9px}}

.productgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.tile{padding:14px;border:1px solid var(--line);border-radius:12px;min-width:0}.tile h2{overflow-wrap:anywhere;margin:12px 0 4px}.tile p{overflow-wrap:anywhere}.tile small{display:block;color:var(--muted);margin:8px 0}.productphoto{width:100%;height:170px;object-fit:contain;border-radius:10px;background:#fff}.producthead{display:flex;gap:24px;margin-bottom:24px}.producthead>a{width:220px;flex-shrink:0}.producthead .productphoto{height:220px}.nophoto{display:grid;place-items:center;height:150px;color:var(--muted);background:var(--bg);border-radius:10px}.loginwrap{max-width:440px;margin:10vh auto;padding:15px}.loginwrap h1{margin-top:20px}.loginwrap label{margin:16px 0}.loginwrap button{width:100%;font-size:15px}.inline{display:flex;gap:8px}h1{margin-bottom:16px}hr{border:0;border-top:1px solid var(--line);margin:24px 0}body[data-theme=dark]{--ink:#e6e8f1;--muted:#a2abc0;--line:#363d50;--bg:#171c28;--purple:#a194ff}body[data-theme=dark] aside,body[data-theme=dark] header,body[data-theme=dark] .panel,body[data-theme=dark] .metrics article{background:#202737}body[data-theme=dark] input,body[data-theme=dark] select,body[data-theme=dark] .secondary{background:#293144;color:#e8ebf5;border-color:#48516a}body[data-theme=dark] nav a{color:#b4bcd0}body[data-theme=dark] nav a.selected{background:#373152;color:#c6bcff}body[data-theme=dark] th,body[data-theme=dark] tr:hover td{background:#293144}body[data-theme=dark] td{border-color:#363d50}body[data-theme=dark] .hero{background:#302b49;border-color:#4a426b}body[data-theme=dark] .hero p,body[data-theme=dark] label{color:#b5bdd0}body[data-theme=dark] .notice{background:#39332a;border-color:#63533b;color:#edce8b}body[data-theme=dark] .quality{border-color:#363d50}body[data-theme=dark] header b{color:#e6e8f1}body[data-theme=dark] button,body[data-theme=dark] .button{color:#151525}body[data-theme=dark] .secondary{color:#e6e8f1}@media(max-width:1100px){.productgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){.productgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tile{padding:10px}.productphoto{height:140px}.producthead{flex-direction:column}.producthead>a{width:100%}.tile h2{font-size:13px}input,select,button{min-height:44px;font-size:16px}header{height:auto;padding:12px}.theme{max-width:160px}.content{padding:18px 12px}nav a{min-height:44px}.inline input{width:120px}}

/* Portrait product photos — UI 0.3.1 */
.tile > a:first-child {
  display: block;
}
.productgrid .tile .productphoto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  object-position: center;
}
.productgrid .tile .nophoto {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
}
.producthead > a {
  display: block;
  width: 260px;
  max-width: 100%;
  flex-shrink: 0;
}
.producthead .productphoto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
}
@media (max-width: 700px) {
  .producthead > a {
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
  }
}