/* Crop the exact approved 7-by-4 catalogue above its printed captions. */
.yabao-skin-art{display:block;position:relative;aspect-ratio:1536/1330;overflow:hidden;flex-shrink:0;border-radius:4px}
.yabao-skin-art>span{display:block;width:100%;height:100%;background-image:url('assets/yabao-skins-transparent-v1.opt-v1.webp');background-size:700% 538.947368%;background-position:calc(var(--skin-col)*100%/6) var(--skin-y);background-repeat:no-repeat}
#companion-launch .companion-character{display:grid;place-items:center}
.studio-page #floating-companion{z-index:90}
.yabao-basic-art{background:transparent}
.yabao-basic-art>img{display:block;width:100%;height:100%;object-fit:contain;user-select:none}
.yabao-skin-art.yabao-soft-cat-art{aspect-ratio:1;background:transparent}
.yabao-soft-cat-art>span{background-image:url('assets/yabao-cat-heads-sprouts-v1.opt-v1.webp');background-size:var(--cat-head-size);background-position:var(--cat-head-position)}
.companion-wardrobe-hint{position:absolute;right:0;bottom:calc(100% + 27px);margin-bottom:5px;white-space:nowrap;font-size:11px;line-height:1.6;padding:3px 7px;border:1px solid #dce8ec;border-radius:3px;background:#ffffffeb;color:#526c80;pointer-events:none}
.near-left .companion-wardrobe-hint{right:auto;left:0}
.near-top .companion-wardrobe-hint{bottom:auto;top:calc(100% + 29px);margin-top:5px;margin-bottom:0}
.is-dragging .companion-wardrobe-hint{visibility:hidden}
.dark .companion-wardrobe-hint{background:#203247ed;border-color:#41566a;color:#d1e4ef}
#companion-launch .yabao-skin-art{width:100%;border-radius:4px}
body.studio-page dialog.yabao-skin-picker{box-sizing:border-box;width:min(940px,calc(100vw - 24px));max-width:none;max-height:90vh;max-height:90dvh;overflow:hidden;margin:auto;padding:0;border:1px solid #d7e2ed;border-radius:6px;background:#fff;color:#293e57}
.yabao-skin-picker::backdrop{background:#142d4a70}
body.studio-page #yabao-skin-picker .yabao-skin-tabs{display:flex;flex-direction:row;align-items:center;width:100%}
body.studio-page #yabao-skin-picker .yabao-skin-tabs>button{border-radius:0;display:block;width:auto;min-width:0;flex:0 0 auto;text-align:center}
.yabao-skin-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid #e4ebf2}
.yabao-skin-header h2{font-size:22px;line-height:1.4;margin:0 0 5px}.yabao-skin-header p{font-size:12px;line-height:1.6;margin:0;color:#6a7f94}
.yabao-skin-header>button{width:44px;height:44px;font-size:28px;flex-shrink:0;color:inherit}
.yabao-skin-body{display:grid;grid-template-columns:190px minmax(0,1fr);gap:20px;padding:16px 20px;max-height:calc(90dvh - 174px);overflow-y:auto;overscroll-behavior:contain}
.yabao-skin-preview{align-self:start;position:sticky;top:0;text-align:center}.yabao-skin-preview>.yabao-skin-art{width:100%;margin:10px 0 16px}.yabao-skin-preview small{font-size:11px;color:#2485c9}.yabao-skin-preview h3{font-size:22px;margin:7px 0}.yabao-skin-preview p{font-size:12px;line-height:1.8;color:#708298;margin:0}
.yabao-skin-catalog{min-width:0}.yabao-skin-tabs{display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid #e4ebf2;margin-bottom:12px}.yabao-skin-tabs>button{border-radius:0;min-height:40px;padding:7px 14px;border-bottom:2px solid transparent;font-size:12px;color:inherit;white-space:nowrap;flex-shrink:0}.yabao-skin-tabs>button[aria-pressed=true]{border-color:#2485d1;color:#1674bd;}
.yabao-skin-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-content:start}.yabao-skin-option{display:block;min-width:0;padding:0 0 8px;border:1px solid #e0e8ef;border-radius:4px;overflow:hidden;background:#fff;color:inherit;text-align:center}.yabao-skin-option>.yabao-skin-art{width:100%;border-radius:0}.yabao-skin-option b{display:block;font-size:12px;font-weight:600;line-height:1.7;padding:3px 2px}.yabao-skin-option small{display:block;font-size:10px;color:#8092a3;line-height:1.6}.yabao-skin-option[aria-pressed=true]{border-color:#2284cf;box-shadow:inset 0 0 0 1px #2284cf;background:#f1f8ff}.yabao-skin-option[aria-pressed=true] small{color:#1576bd}
.yabao-skin-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;border-top:1px solid #e4ebf2}.yabao-skin-footer>span{font-size:11px;line-height:1.6;color:#73879a}.yabao-skin-footer>div{display:flex;gap:6px;flex-shrink:0}.yabao-skin-footer button{min-height:40px;padding:8px 10px;border-radius:3px;color:inherit;font-size:12px}.yabao-skin-footer button.primary{background:#2584cf;color:#fff;padding-inline:18px}.yabao-skin-picker button:focus-visible{outline:2px solid #1974b6;outline-offset:2px}
body.studio-page.dark dialog.yabao-skin-picker{background:#1c2c3f;border-color:#40556b;color:#e7f0fa}.dark .yabao-skin-header,.dark .yabao-skin-footer,.dark .yabao-skin-tabs{border-color:#40556b}.dark .yabao-skin-option{background:#25384d;border-color:#40556b}.dark .yabao-skin-option[aria-pressed=true]{background:#244865}.dark .yabao-skin-header p,.dark .yabao-skin-preview p,.dark .yabao-skin-option small,.dark .yabao-skin-footer>span{color:#b7c9db}
@media(max-width:650px){.yabao-skin-header{padding:12px 14px}.yabao-skin-header h2{font-size:19px}.yabao-skin-body{display:block;padding:12px;max-height:calc(90dvh - 204px)}.yabao-skin-preview{position:static;display:grid;grid-template-columns:100px minmax(0,1fr);gap:12px;text-align:left;align-items:center;margin-bottom:12px}.yabao-skin-preview>.yabao-skin-art{width:100px;margin:0}.yabao-skin-preview h3{font-size:19px;margin:4px 0}.yabao-skin-preview p{font-size:11px}.yabao-skin-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.yabao-skin-tabs>button{border-radius:0;padding:7px 11px}.yabao-skin-footer{display:block;padding:10px 12px}.yabao-skin-footer>span{display:block;margin-bottom:6px}.yabao-skin-footer>div{justify-content:flex-end}.yabao-skin-footer button{min-height:44px}}