:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#171717;background:#f6f5f2;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-width:320px}
button{font:inherit}
button:focus-visible{outline:3px solid #ef0b94;outline-offset:3px}
.app{min-height:100vh;display:flex;flex-direction:column}
.topbar{height:88px;padding:0 clamp(18px,2.7vw,44px);display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #dfded9;background:#fbfaf8}
.brand{display:flex;align-items:center;gap:13px;line-height:1}
.brand img{width:45px;height:45px;object-fit:contain;border-radius:50%}
.brand strong{display:block;font-size:17px;letter-spacing:.035em;font-weight:850}
.brand span{display:block;margin-top:6px;color:#8a8884;font-size:10px;font-weight:750;letter-spacing:.16em}
.top-actions{display:flex;gap:9px}
.button{border:1px solid #191919;border-radius:9px;min-height:42px;padding:0 18px;font-size:12px;font-weight:800;letter-spacing:.04em;cursor:pointer;transition:transform .16s,background .16s,box-shadow .16s}
.button:hover{transform:translateY(-2px);box-shadow:0 5px 14px #00000015}
.button:disabled{opacity:.55;cursor:wait;transform:none}
.button-light{background:#fff;color:#191919;border-color:#deddd8}
.button-dark{background:#191919;color:#fff}
.button-dark:hover{background:#ee008f}
.button-icon{font-size:18px;line-height:0;vertical-align:-1px;margin-right:6px;font-weight:500}
.workspace{display:grid;grid-template-columns:minmax(218px,260px) minmax(350px,1fr) minmax(290px,356px);gap:14px;padding:18px clamp(18px,2.7vw,44px) 24px;flex:1;min-height:0;max-width:1660px;width:100%;margin:0 auto}
.panel{border:1px solid #e3e1dc;border-radius:15px;background:#fff;min-width:0;min-height:0;overflow:hidden}
.parts-panel,.options-panel{display:flex;flex-direction:column;height:calc(100vh - 130px);min-height:620px}
.panel-heading,.options-heading{padding:27px 23px 24px}
.eyebrow{margin:0;color:#eb008c;font-size:10px;font-weight:850;letter-spacing:.17em}
h1,h2,p{margin-top:0}
h1{font-size:28px;line-height:1.05;letter-spacing:-.055em;margin:18px 0 11px;font-weight:850}
.subtle{font-size:12px;line-height:1.55;color:#84817c;margin:0}
.section-line{display:flex;justify-content:space-between;gap:10px;padding:12px 23px;border-top:1px solid #e9e8e4;border-bottom:1px solid #e9e8e4;color:#92908b;font-size:9px;font-weight:850;letter-spacing:.14em}
.part-list{overflow:auto;padding:12px 10px;scrollbar-width:thin;flex:1}
.part-row{display:flex;align-items:center;border-radius:9px;min-height:50px;margin:2px 0;transition:background .16s}
.part-row:hover{background:#f8f7f5}
.part-row.active{background:#f5f2f4}
.part-select{appearance:none;border:0;background:transparent;text-align:left;cursor:pointer;display:flex;align-items:center;gap:10px;min-width:0;flex:1;padding:11px 10px;color:#2c2c2c;font-weight:750;font-size:12px}
.part-row.active .part-select{color:#e90088}
.part-number{color:#aaa7a2;font-size:10px;font-variant-numeric:tabular-nums;min-width:18px}
.part-row.active .part-number{color:#e90088}
.part-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.part-selected{color:#a4a19b;font-size:10px;font-variant-numeric:tabular-nums;margin-left:auto}
.match-wrap{position:relative;display:flex;align-items:center;gap:5px;padding-right:8px;cursor:pointer;color:#77736e;font-size:9px;font-weight:850;letter-spacing:.035em;white-space:nowrap}
.match-wrap input{position:absolute;opacity:0;width:1px;height:1px}
.switch{width:26px;height:16px;border-radius:99px;background:#cfcdc8;position:relative;transition:background .16s;flex:none}
.switch:after{content:"";position:absolute;width:10px;height:10px;left:3px;top:3px;border-radius:50%;background:white;transition:transform .16s}
.match-wrap input:checked+.switch{background:#eb008c}
.match-wrap input:checked+.switch:after{transform:translateX(10px)}
.match-wrap input:focus-visible+.switch{outline:3px solid #ef0b94;outline-offset:2px}
.fixed-note{border-top:1px solid #e9e8e4;padding:17px 22px;display:flex;gap:9px;color:#8c8983;font-size:10px;line-height:1.45}
.fixed-dot{width:7px;height:7px;border-radius:50%;background:#c6c3bd;margin-top:3px;flex:none}
.preview-panel{height:calc(100vh - 130px);min-height:620px;display:flex;flex-direction:column;background:#fdfdfc}
.preview-toolbar,.preview-footer{padding:17px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.preview-toolbar{border-bottom:1px solid #ecebe7}
.preview-toolbar strong{display:block;font-size:11px;letter-spacing:.08em;margin-top:5px}
.preview-size,.preview-footer{color:#9b9892;font-size:9px;font-weight:850;letter-spacing:.11em;white-space:nowrap}
.preview-stage{position:relative;min-height:0;flex:1;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(circle at 50% 48%,#fff 0%,#f5f4f1 76%)}
.character{position:relative;aspect-ratio:5/7;height:100%;max-width:100%;max-height:100%;overflow:hidden;box-shadow:0 13px 34px #28251f1b;background:#fff}
.preview-loading{position:absolute;left:29px;bottom:29px;padding:8px 11px;border-radius:6px;background:#fff;color:#e90088;box-shadow:0 2px 12px #0000001a;font-size:10px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.preview-loading[hidden]{display:none}
.preview-footer{border-top:1px solid #ecebe7;min-height:48px}
.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#38c8ad;margin-right:5px;vertical-align:1px}
.options-heading{padding-bottom:22px}
.options-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:17px}
h2{font-size:28px;letter-spacing:-.055em;line-height:1.05;margin:0 0 8px;font-weight:850}
.layer-number{font-size:32px;font-weight:850;letter-spacing:-.07em;color:#ece9e4}
.options-grid{overflow-y:auto;scrollbar-width:thin;padding:15px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:9px;flex:1}
.option{appearance:none;border:1px solid #e9e7e2;background:#f8f7f5;border-radius:10px;min-width:0;padding:6px;cursor:pointer;text-align:left;position:relative;transition:border-color .16s,box-shadow .16s,transform .16s}
.option:hover{transform:translateY(-2px);border-color:#b9b5ae}
.option.active{border-color:#ec008d;box-shadow:inset 0 0 0 1px #ec008d}
.option-media{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;border-radius:6px;background:#eeece8;overflow:hidden}
.option-media img{width:100%;height:100%;object-fit:contain;display:block}
.option-label{display:flex;align-items:center;justify-content:space-between;padding:8px 3px 2px;font-size:10px;font-weight:850;letter-spacing:.08em;color:#393735}
.option.active .option-label{color:#e90088}
.option-check{display:none;font-size:13px;line-height:8px}
.option.active .option-check{display:block}
.options-footer{border-top:1px solid #e9e8e4;padding:16px 20px;display:flex;justify-content:space-between;color:#928f89;font-size:9px;font-weight:850;letter-spacing:.12em;white-space:nowrap}
.options-footer span:first-child{color:#e90088}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1100px){.workspace{grid-template-columns:210px minmax(300px,1fr) 300px;gap:10px;padding:12px}.panel-heading,.options-heading{padding-left:17px;padding-right:17px}.section-line{padding-left:17px;padding-right:17px}.part-select{font-size:11px;gap:6px}.match-wrap{font-size:8px}.parts-panel,.options-panel,.preview-panel{height:calc(100vh - 112px)}}
@media(max-width:860px){.workspace{grid-template-columns:210px minmax(0,1fr);grid-template-areas:"parts preview" "options options"}.parts-panel{grid-area:parts;height:620px}.preview-panel{grid-area:preview;height:620px}.options-panel{grid-area:options;height:auto;min-height:0}.options-grid{grid-template-columns:repeat(5,minmax(0,1fr));max-height:350px}.options-heading{padding-bottom:14px}}
@media(max-width:700px){
  html,body{height:100%;overflow:hidden}
  .app{height:100dvh;min-height:0}
  .topbar{height:66px;min-height:66px;flex:none;padding:8px 12px;gap:8px}
  .brand{gap:8px}
  .brand img{width:34px;height:34px}
  .brand strong{font-size:13px}
  .brand span{font-size:7px;margin-top:4px}
  .top-actions{gap:5px}
  .button{min-height:35px;padding:0 9px;font-size:10px;white-space:nowrap}
  .button-icon{font-size:15px;margin-right:3px}
  .workspace{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(210px,42dvh) 58px minmax(0,1fr);grid-template-areas:"preview" "parts" "options";height:auto;min-height:0;flex:1;padding:8px;gap:8px;overflow:hidden}
  .panel{border-radius:12px}
  .preview-panel,.parts-panel,.options-panel{height:auto;min-height:0}
  .preview-panel{grid-area:preview}
  .preview-toolbar{padding:8px 11px;min-height:34px}
  .preview-toolbar .eyebrow{display:none}
  .preview-toolbar strong{margin:0;font-size:10px}
  .preview-size{font-size:8px}
  .preview-stage{padding:6px}
  .preview-footer{display:none}
  .parts-panel{grid-area:parts;display:block}
  .parts-panel .panel-heading,.parts-panel .section-line,.fixed-note{display:none}
  .part-list{display:flex;align-items:center;height:100%;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding:5px 6px;gap:6px;scrollbar-width:none}
  .part-list::-webkit-scrollbar{display:none}
  .part-row{min-height:44px;flex:0 0 auto;margin:0;border:1px solid #e9e7e2}
  .part-row.active{border-color:#eb008c}
  .part-select{flex:none;padding:8px 9px;gap:5px;font-size:11px}
  .part-number{display:none}
  .part-selected{display:none}
  .match-wrap{padding-right:8px;font-size:8px}
  .options-panel{grid-area:options}
  .options-heading{padding:10px 12px 8px}
  .options-heading .eyebrow{display:none}
  .options-title-row{margin:0}
  h2{font-size:21px;margin:0 0 2px}
  .options-title-row .subtle{font-size:10px}
  .layer-number{font-size:23px}
  .options-panel .section-line{padding:6px 12px}
  .options-grid{grid-template-columns:repeat(3,minmax(0,1fr));padding:8px;gap:6px;max-height:none;min-height:0}
  .option{padding:4px;border-radius:8px}
  .option-label{padding:5px 2px 1px}
  .options-footer{display:none}
}
@media(max-width:700px) and (max-height:650px){
  .workspace{grid-template-rows:minmax(180px,36dvh) 52px minmax(0,1fr)}
}
@media(min-width:501px) and (max-width:700px){
  .options-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:360px){
  .topbar{height:84px;min-height:84px;display:grid;grid-template-columns:1fr;grid-template-rows:30px 35px;gap:5px;padding:7px 8px}
  .brand img{width:29px;height:29px}
  .brand strong{font-size:12px}
  .top-actions{width:100%}
  .top-actions .button{flex:1}
  .workspace{grid-template-rows:minmax(170px,34dvh) 50px minmax(0,1fr)}
}