*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#f5f3ef;color:#1f2a44;padding-bottom:72px}
header{position:sticky;top:0;z-index:5;background:#1f2a44;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top))}
header h1{font-size:1.15rem;margin:0}#syncState{color:#999}#syncState.ok{color:#4ade80}#syncState.err{color:#f87171}
main{max-width:1100px;margin:auto;padding:12px}.view{display:none}.view.active{display:block}
nav{position:fixed;bottom:0;left:0;right:0;display:flex;background:#fff;border-top:1px solid #ddd;padding-bottom:env(safe-area-inset-bottom);z-index:5}
nav button{flex:1;border:0;background:none;padding:8px 0;font-size:1.3rem;display:flex;flex-direction:column;align-items:center;color:#777}
nav button span{font-size:.7rem}nav button.on{color:#1f2a44;font-weight:600}
button,.btn{font:inherit;border:1px solid #ccd;background:#fff;border-radius:10px;padding:9px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.primary{background:#1f2a44;color:#fff;border-color:#1f2a44}.danger{color:#b91c1c;border-color:#b91c1c}
input,select,textarea{font:inherit;padding:9px;border:1px solid #ccd;border-radius:8px;width:100%;background:#fff}
.filters{display:flex;gap:8px;margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.card{background:#fff;border-radius:12px;padding:8px;box-shadow:0 1px 3px #0001;cursor:pointer}
.card img,.thumb{width:100%;aspect-ratio:1;object-fit:contain;background:repeating-conic-gradient(#f2f2f2 0 25%,#fff 0 50%) 0 0/16px 16px;border-radius:8px}
.card b{display:block;font-size:.85rem;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card small{color:#777}
.muted{color:#888;font-size:.9rem}.fab{position:fixed;right:20px;bottom:88px;width:58px;height:58px;border-radius:50%;background:#c2410c;color:#fff;border:0;font-size:1.8rem;justify-content:center;box-shadow:0 4px 12px #0003;z-index:4}
.mixbar{display:flex;gap:8px;justify-content:center;margin-bottom:10px}
.board{position:relative;margin:auto;max-width:520px;aspect-ratio:3/4;background:#e9e4da;border-radius:16px;
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:minmax(0,.55fr) minmax(0,1.1fr) minmax(0,1.4fr) minmax(0,.6fr);overflow:hidden;gap:6px;padding:10px}
.slot{position:relative;border-radius:12px;display:flex;align-items:center;justify-content:center;touch-action:pan-y;border:2px dashed transparent}
.slot.over{border-color:#c2410c}.slot img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 3px 4px #0003);pointer-events:none}
.slot .lbl{position:absolute;top:2px;left:6px;font-size:.65rem;text-transform:uppercase;color:#8a7f6c}
.slot .empty{color:#a99f8c;font-size:.8rem}
.slot .nav{position:absolute;top:50%;transform:translateY(-50%);border:0;background:#fff9;border-radius:50%;width:30px;height:30px;padding:0;justify-content:center}
.slot .prev{left:0}.slot .next{right:0}
.s-headwear{grid-column:2;grid-row:1}.s-outerwear{grid-column:1;grid-row:2/4}.s-top{grid-column:2;grid-row:2}.s-bottom{grid-column:2;grid-row:3}.s-shoes{grid-column:2;grid-row:4}.s-accessory{grid-column:3;grid-row:2/4}.s-bag{grid-column:3;grid-row:4}
.hint{text-align:center}.strip{display:flex;gap:8px;overflow-x:auto;padding:6px 0}.strip img{width:72px;height:72px;flex:none;cursor:grab}
.outfits{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.ocard{background:#fff;border-radius:12px;padding:10px}.ocard .mini{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:#e9e4da;border-radius:8px;padding:6px}
.ocard .mini img{width:100%;aspect-ratio:1;object-fit:contain}.ocard .row{margin-top:8px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:640px}.form label{display:flex;flex-direction:column;font-size:.85rem;gap:4px}
.form .full,.form h2,.form h3{grid-column:1/-1}.form h2,.form h3{margin:4px 0}.chk{flex-direction:row!important;align-items:center}.chk input{width:auto}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.row input{flex:1;min-width:140px}
dialog{border:0;border-radius:16px;padding:16px;width:min(560px,94vw);max-height:92vh}dialog::backdrop{background:#0006}
.preview{grid-column:1/-1;display:flex;gap:8px;justify-content:center;min-height:120px;align-items:center}.preview img{width:46%;max-height:220px;object-fit:contain;background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 0/16px 16px;border-radius:8px}
@media(min-width:900px){#v-mix{display:none}#v-mix.active{display:grid;grid-template-columns:1fr 280px;gap:16px}#v-mix .mixbar,#v-mix .hint{grid-column:1/-1}
 #v-mix .strip{flex-wrap:wrap;align-content:flex-start;overflow:auto;max-height:70vh;grid-column:2;grid-row:2}#v-mix .board{grid-column:1;grid-row:2;height:72vh;width:auto;aspect-ratio:3/4}}

.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.card{background:#fff;border-radius:6px;padding:8px 8px 10px;box-shadow:0 1px 4px #0000000f;text-align:center}
.card .tile{position:relative;background:#ecebe8;border-radius:4px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.card .tile img{width:86%;height:86%;object-fit:contain;background:none;border-radius:0;aspect-ratio:auto;filter:drop-shadow(0 2px 3px #0000001f)}
.card .brand{display:block;margin-top:8px;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:#9a9a9a}
.card b{font-size:.8rem;font-weight:700;color:#222;white-space:normal;line-height:1.25}
.badge{position:absolute;top:6px;left:6px;background:#1f2a44d9;color:#fff;font-size:.62rem;padding:2px 7px;border-radius:9px;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.55}}
.preview figure{margin:0;width:31%;text-align:center}.preview figure img{width:100%;height:150px}.preview figcaption{font-size:.7rem;color:#888}

.hdr{display:flex;align-items:center;gap:10px}.refine{background:#c9a227;color:#1f2a44;border:0;font-weight:700;padding:6px 12px;font-size:.85rem}.refine:disabled{opacity:.6}
.banner{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#fff7e0;border:1px solid #e7cf7a;border-radius:12px;padding:10px 12px;margin-bottom:12px}
.banner span{flex:1;min-width:160px;font-size:.9rem}.banner button:last-child{border:0;background:none}
.badge.idle{background:#8a8a8acc;animation:none}.okc{color:#15803d;font-weight:600}
[hidden]{display:none!important}

.tryon{background:#c2410c;color:#fff;border-color:#c2410c}.tryon:disabled{opacity:.6}
.trypanel{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;background:#fff;border-radius:12px;padding:8px 12px;margin:0 auto 10px;max-width:520px;font-size:.9rem}
.trypanel img{width:54px;height:72px;object-fit:cover;border-radius:6px;cursor:pointer}.trypanel .err{color:#b91c1c}
@media(min-width:900px){#v-mix .trypanel{grid-column:1/-1}}
.trydlg{padding:0;width:auto;max-width:96vw;background:#111}.trybox{position:relative}.trybox img{display:block;max-width:96vw;max-height:86vh;object-fit:contain}
.trybox p{margin:0;padding:6px 12px;color:#ccc;background:#111;font-size:.85rem}.tryx{position:absolute;top:8px;right:8px;background:#000a;color:#fff;border:0;border-radius:50%;width:36px;height:36px;padding:0;justify-content:center;font-size:1.1rem}
.ocard .tst{display:block;font-size:.8rem;margin-top:6px;color:#555}.ocard .tst.err{color:#b91c1c}
.mephoto{margin:6px 0}.mephoto img{max-width:160px;max-height:220px;border-radius:8px;object-fit:cover;display:block}
#emptyMsg.err{color:#b91c1c}#emptyMsg button{margin-left:6px}
.spin{display:inline-block;width:14px;height:14px;border:2px solid #cbd5e1;border-top-color:#1f2a44;border-radius:50%;vertical-align:-2px;margin-right:6px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.slot{min-width:0;min-height:0;overflow:visible}.slot img{position:absolute;top:16px;left:4px;width:calc(100% - 8px);height:calc(100% - 20px);max-width:none;max-height:none;object-fit:contain}
.slot .nav,.slot .lbl{z-index:1}
/* Realistic scale on Mix: each slot's image is sized by the real-life size of that kind of item (cm),
   using one board-wide scale (--u per cm, from board height), capped by the slot box. */
.board{--u:1.4px}
.s-top{--cm:72}.s-outerwear{--cm:78}.s-bottom{--cm:105}.s-headwear{--cm:24}.s-shoes{--cm:30}.s-accessory{--cm:14}.s-bag{--cm:40}
.board .slot img{top:calc(50% + 6px);left:50%;transform:translate(-50%,-50%);
 --sz:min(calc(var(--cm)*var(--u)),calc(100% * 1.12));width:var(--sz);height:var(--sz)}
.board .s-headwear img{top:calc(50% + 9px)}