:root{font-family:Arial,sans-serif;color:#142348;background:#f4f5fb;--blue:#072693;--orange:#ef7626}*{box-sizing:border-box}body{margin:0}header{background:var(--blue);color:white;padding:28px 4%;display:flex;justify-content:space-between;align-items:center;border-bottom:4px solid var(--orange)}header small{font-size:11px;letter-spacing:2px}h1{margin:8px 0;font-size:32px}h1 em{font-size:16px;font-style:normal;background:#ffffff25;padding:7px;border-radius:8px}header p{color:#dbe2ff;margin:0}header a{color:white;margin-left:16px}button,.button,select,input{font:inherit;border:1px solid #d6dcea;border-radius:8px;padding:10px;background:white;color:#142348}button,.button{cursor:pointer}button:hover{border-color:#5674d5;background:#edf1ff}nav{display:flex;gap:8px;padding:16px 4%;background:white;border-bottom:1px solid #e2e6ef}nav button.active{background:var(--blue);color:white}nav span{margin-left:auto;align-self:center;color:#69748a;font-size:12px}main{max-width:1700px;margin:auto;padding:28px 4%}h2{font-size:25px;margin:0 0 10px}h3{margin:0 0 15px;font-size:17px}p{line-height:1.5;color:#64708a}small,.hint{font-size:12px;color:#68768a}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.workspace{display:grid;grid-template-columns:305px minmax(0,1fr);gap:22px}aside,.card{background:white;border:1px solid #e0e5ef;border-radius:14px;padding:20px}aside{align-self:start}label{display:block;font-size:12px;margin-bottom:12px}label select,label input{display:block;width:100%;margin-top:6px}.button{display:inline-block;margin:0;font-size:14px}.shelfControl{background:#f7f8fc;border:1px solid #e3e7ef;padding:12px;border-radius:10px;margin-bottom:12px}.shelfControl input[type=text]{width:100%}.dimrow{display:flex;gap:5px;margin-top:8px}.dimrow label{min-width:0;flex:1}.dimrow input{width:100%;padding:7px}.smallbtn{padding:5px 9px;font-size:12px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.stats>div{background:white;padding:16px;border-radius:12px;border:1px solid #e0e5ef}.stats b{display:block;font-size:25px;color:var(--blue);margin-bottom:5px}.stats small{font-size:11px}.notice{padding:13px 16px;background:#fff4e5;color:#76500e;font-size:12px;line-height:1.5;border-radius:9px;margin-bottom:18px}.shelf{background:white;border:1px solid #dce2ef;border-radius:12px;margin-bottom:18px;overflow:hidden}.shelfHead{display:flex;justify-content:space-between;gap:16px;padding:16px;background:#eef1ff;font-size:13px}.shelfHead strong{display:block;font-size:17px;margin-bottom:5px}.shelfScroll{overflow-x:auto;padding:18px 16px 0}.deck{position:relative;display:flex;align-items:flex-end;border-bottom:12px solid #d1d7e2;min-height:230px;padding-top:25px;box-shadow:0 10px 12px -10px #72809b}.group{display:flex;flex-direction:column;align-items:center;flex:none;min-width:0}.packs{display:flex;align-items:flex-end;justify-content:flex-start;width:100%}.pack{object-fit:contain;object-position:center bottom;flex:none;background:white}.unknown .pack{border:1px dashed #e7a240}.placeholder{border:1px dashed #a8b2c5;display:flex;align-items:center;justify-content:center;text-align:center;font-size:10px;overflow:hidden}.label{width:100%;min-height:74px;font-size:10px;padding:7px 2px;text-align:center;background:#f7f8fd;border-right:1px solid #d9deea;overflow-wrap:anywhere}.label b{display:block;margin-bottom:5px}.label em{display:block;font-style:normal;color:#916014;margin-top:3px}.shelfNote{padding:12px 16px;font-size:12px;color:#64718c}.pendingRow{padding:10px 0;border-bottom:1px solid #eef0f5;font-size:13px}.pendingRow span{display:block;color:#986331;font-size:12px;margin-top:4px}.tableWrap{overflow:auto;background:white;border-radius:12px;margin-top:20px}table{border-collapse:collapse;width:100%;font-size:12px;min-width:1000px}th{text-align:left;background:#eaf0ff;padding:16px}td{padding:14px;border-bottom:1px solid #e4e8f1;vertical-align:top}td:first-child{max-width:240px}td input[type=text]{width:100%;min-width:240px}td .face{width:56px;margin:2px;padding:7px}td .axis{width:76px;padding:8px;margin:3px}td p{font-size:11px;margin:6px 0}td img{width:45px;height:65px;object-fit:contain;float:left;margin-right:10px}footer{margin-top:30px;font-size:12px;color:#7c879c}footer button{font-size:11px;margin-left:15px}[hidden]{display:none!important}@media(max-width:850px){header{display:block}header>div+div{margin-top:20px}nav{flex-wrap:wrap}nav span{display:none}.workspace{grid-template-columns:1fr}.intro{display:block}.stats{grid-template-columns:repeat(2,1fr)}main{padding:20px}.dimrow{max-width:420px}}@media print{header,nav,aside,.intro button,footer,.notice{display:none}.workspace{display:block}.shelf{break-inside:avoid}.shelfScroll{overflow:visible}.deck{max-width:100%}}
.crop{display:block;position:relative;overflow:hidden}.label{height:110px}.packs{height:170px}header small{color:#dbe2ff}
.packs{height:var(--packheight,170px)}

/* Shelf surface follows the packshots' subtle right-side perspective. */
.shelfScroll{padding:20px 38px 12px 20px;background:linear-gradient(180deg,#fafbfe 0%,#fff 65%);overflow-x:auto}
.deck{isolation:isolate;align-items:flex-end;border-bottom:0;min-height:0;padding-top:14px;box-shadow:none;--labelheight:110px;--lip:14px;--setback:14px}
.deck::before{content:"";position:absolute;pointer-events:none;z-index:0;left:0;bottom:calc(var(--labelheight) + var(--lip));width:calc(100% + 22px);height:34px;background:linear-gradient(174deg,#e2e7ee 0%,#f6f8fa 40%,#fff 75%,#dce2e9 100%);clip-path:polygon(22px 0,100% 0,calc(100% - 22px) 100%,0 100%);border-top:1px solid #c7d1df}
.deck::after{content:"";position:absolute;pointer-events:none;z-index:3;left:0;right:0;bottom:var(--labelheight);height:var(--lip);background:linear-gradient(#fff 0%,#e6ebf1 20%,#c2cad6 92%,#b7c1ce 100%);border-top:1px solid #fff;border-bottom:1px solid #aeb9c8;border-radius:0 0 3px 3px;box-shadow:5px 8px 12px -7px #4a5c7980}
.group{position:relative;z-index:1}
.packs{position:relative;align-items:flex-end;margin-bottom:calc(var(--lip) + var(--setback));height:var(--packheight,150px)}
.pack{background:transparent;filter:drop-shadow(3px 3px 2px #30415b22)}
.unknown .pack{border:0;outline:1px dashed #daa34b;outline-offset:2px}
.label{height:var(--labelheight);min-height:var(--labelheight);padding-top:12px;background:linear-gradient(180deg,#f5f7fc,#fff);border-right:1px solid #e5e9f1;line-height:1.35}
.label b{color:#162954}
.shelfNote{border-top:1px solid #edf0f6}
@media print{.shelfScroll{-webkit-print-color-adjust:exact;print-color-adjust:exact}.deck::before,.deck::after{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

.label{overflow:hidden;font-size:9.5px}
.label b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.label em{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shelfScroll{overflow-y:hidden}
.deck{--labelheight:160px}
.label{overflow:visible}
.label b,.label em{display:block;overflow:visible;-webkit-line-clamp:unset}