:root{
  --bg:#0d1117; --panel:#12171f; --card:#161b22; --line:#232a33;
  --tx:#e6edf3; --mut:#8d97a5; --ac:#00A19A; --ac2:#33EBC0; --cut:#ff00ff;
  --rail:56px; --panelw:308px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--tx);
  font:14px/1.45 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;overflow:hidden}
button,input,select{font:inherit;color:inherit}

/* top bar */
.top{height:52px;display:flex;align-items:center;gap:12px;padding:0 14px;
  background:var(--panel);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px}
.logo{height:38px;width:auto;display:block}
.brand-t{font-size:11px;line-height:1.15;color:var(--mut);letter-spacing:.04em;text-transform:uppercase}
.brand-t b{color:var(--tx);font-size:13px;letter-spacing:.01em}
.top-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.pill{background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:5px 12px;font-size:12px;color:var(--mut);max-width:220px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.price{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ac2);min-width:74px;text-align:right}

.btn{background:var(--ac);color:#04231f;border:0;border-radius:8px;padding:8px 14px;
  font-weight:600;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--tx);border:1px solid var(--line)}
.btn.sm{padding:5px 10px;font-size:12.5px;border-radius:7px}

/* layout */
.shell{display:flex;height:calc(100% - 52px)}
.rail{width:var(--rail);background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding-top:8px;flex:0 0 auto}
.rail-b{background:none;border:0;cursor:pointer;color:var(--mut);padding:11px 0;
  display:flex;flex-direction:column;align-items:center;gap:3px;border-left:2px solid transparent}
.rail-b b{font-size:17px;line-height:1}
.rail-b span{font-size:9.5px;letter-spacing:.02em}
.rail-b.on{color:var(--ac2);border-left-color:var(--ac);background:#00a19a12}

.panel{width:var(--panelw);flex:0 0 auto;background:var(--panel);
  border-right:1px solid var(--line);overflow-y:auto;padding:16px 15px 40px}
.pane{display:none}.pane.on{display:block}
h2{margin:0 0 2px;font-size:16px}
h3{margin:18px 0 7px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
p.sub{margin:0 0 14px;color:var(--mut);font-size:12.5px}
.hint{color:var(--mut);font-size:11.5px;margin-top:6px;line-height:1.4}
.hint.warn{color:#e0a05a}
.hint.warn:empty{display:none;margin:0}
.moq{background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:1px 8px;font-size:9.5px;letter-spacing:.03em;color:var(--ac2);margin-left:5px;
  text-transform:none;vertical-align:middle}
.lock{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-weight:600}

input[type=text],input[type=number],input[type=search],select{
  width:100%;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
input[type=range]{width:100%;accent-color:var(--ac)}
.row{display:flex;gap:8px;margin-top:8px}
.row>*{flex:1}
.fld{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--mut)}
.ck{display:flex;align-items:center;gap:7px;font-size:13px;margin:4px 0 8px}
.ck input{accent-color:var(--ac)}

.seg{display:flex;gap:8px}
.seg button{flex:1;background:var(--card);border:1px solid var(--line);border-radius:9px;
  padding:10px 8px;cursor:pointer;display:flex;flex-direction:column;gap:2px;text-align:left}
.seg button b{font-size:13px}
.seg button i{font-style:normal;font-size:11px;color:var(--mut)}
.seg button.on{border-color:var(--ac);background:#00a19a18}
.seg button.on b{color:var(--ac2)}

.presets{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.presets button{background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:8px;cursor:pointer;text-align:left;font-size:12px}
.presets button b{display:block}
.presets button i{font-style:normal;font-size:10.5px;color:var(--mut)}
.presets button.on{border-color:var(--ac)}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:5px 11px;font-size:12px;cursor:pointer}
.chips button.on{border-color:var(--ac);color:var(--ac2)}

.drop{display:flex;flex-direction:column;align-items:center;gap:3px;padding:20px;
  border:1.5px dashed var(--line);border-radius:10px;cursor:pointer;background:var(--card)}
.drop.hot{border-color:var(--ac);background:#00a19a10}
.drop i{font-style:normal;font-size:11px;color:var(--mut)}

.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.sw{background:var(--card);border:1px solid var(--line);border-radius:9px;overflow:hidden;
  cursor:pointer;padding:0;text-align:left}
.sw img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:#222}
.sw span{display:block;padding:5px 6px;font-size:10px;line-height:1.25}
.sw em{display:block;font-style:normal;color:var(--mut);font-size:9px}
.sw em.eng{display:flex;align-items:center;gap:4px;margin-top:2px}
.sw em.eng i{width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  box-shadow:0 0 0 1px #ffffff2e inset,0 0 0 1px #0006}
.sw.on{border-color:var(--ac);box-shadow:0 0 0 1px var(--ac)}
.loading{grid-column:1/-1;color:var(--mut);font-size:12px;padding:14px 0}

/* stage */
.stage{flex:1;display:flex;flex-direction:column;min-width:0}
.stage-bar,.stage-foot{display:flex;align-items:center;gap:9px;padding:8px 13px;
  background:var(--panel);border-bottom:1px solid var(--line)}
.stage-foot{border-bottom:0;border-top:1px solid var(--line);font-size:11.5px;color:var(--mut)}
.stage-bar input{width:210px}
.grow{flex:1}
.zoom{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums;min-width:44px;text-align:center}
.canvas-wrap{flex:1;overflow:auto;display:grid;place-items:center;
  background:
    linear-gradient(45deg,#0000 25%,#ffffff05 25% 50%,#0000 50% 75%,#ffffff05 75%) 0 0/22px 22px,
    var(--bg)}
canvas#cv{box-shadow:0 8px 40px #0009;border-radius:2px}

/* modal */
.modal{position:fixed;inset:0;background:#000b;display:grid;place-items:center;z-index:50}
.modal-in{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  width:min(940px,94vw);max-height:92vh;overflow:hidden;display:flex;flex-direction:column}
.modal-head{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid var(--line)}
.modal-head select{width:auto;min-width:210px}
.mock-body{display:flex;gap:14px;padding:14px;overflow:auto}
.mock-body canvas{flex:1;min-width:0;background:#0a0d12;border-radius:9px;max-width:100%}
.mock-side{width:190px;flex:0 0 auto;display:flex;flex-direction:column;gap:10px}

/* manage */
.seg.tabs{gap:5px}
.seg.tabs button{padding:5px 12px;font-size:12.5px;flex:0 0 auto;border-radius:7px}
.manage-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line)}
.manage-bar input,.manage-bar select{width:auto;flex:0 0 auto;min-width:170px}
.manage-body{overflow:auto;padding:10px 14px 16px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:7px;max-height:56vh}
.mg{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);
  border-radius:9px;padding:6px 9px}
.mg.off{opacity:.42}
.mg img{width:34px;height:34px;border-radius:6px;object-fit:cover;flex:0 0 auto;background:#222}
.mg .t{flex:1;min-width:0;font-size:12px;line-height:1.25}
.mg .t em{display:block;font-style:normal;font-size:10px;color:var(--mut);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw-t{position:relative;width:34px;height:19px;flex:0 0 auto;cursor:pointer}
.sw-t input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.sw-t i{position:absolute;inset:0;background:#39414f;border-radius:99px;transition:.15s}
.sw-t i::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;
  border-radius:50%;background:#fff;transition:.15s}
.sw-t input:checked + i{background:var(--ac)}
.sw-t input:checked + i::after{transform:translateX(15px)}
.manage-foot{padding:9px 14px;border-top:1px solid var(--line)}

.menu{position:absolute;right:14px;top:52px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:5px;z-index:60;box-shadow:0 12px 40px #000a}
.menu button{display:block;width:100%;text-align:left;background:none;border:0;
  padding:9px 12px;border-radius:7px;cursor:pointer;font-size:13px;white-space:nowrap}
.menu button:hover{background:var(--card)}

@media (max-width:900px){
  .panel{position:absolute;left:var(--rail);top:52px;bottom:0;z-index:20}
}