html, body{ height:100%; overflow:hidden }
body{ display:flex; flex-direction:column }
body::before, body::after{ display:none }   

svg.ti{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; flex:none }
svg.ti.xs{ width:12px; height:12px }


header.top{
  position:relative; z-index:60; flex:none;
  height:56px; display:flex; align-items:center; gap:8px; padding:0 16px;
  background:var(--ink-2); border-bottom:1px solid var(--line);
}
.top .logo{ font-size:20px; margin-right:4px; text-decoration:none; color:var(--text) }
.top-back{
  display:flex; align-items:center; gap:4px; color:var(--muted); font-size:13px;
  padding:6px 10px; border-radius:999px; text-decoration:none; white-space:nowrap; transition:.15s;
}
.top-back:hover{ color:var(--text); background:rgba(255,255,255,.06) }
.top-name{
  font-weight:600; font-size:14px; padding:6px 10px; border-radius:999px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:260px;
}

.top-fmt, .top-g{
  display:flex; align-items:center; gap:2px; padding:3px;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
}
.top-fmt, .top-g > button{
  font-family:var(--font-b); font-size:13px; color:var(--muted); cursor:pointer;
  background:transparent; border:none; border-radius:9px; min-height:30px;
  display:inline-flex; align-items:center; gap:6px; padding:0 9px; white-space:nowrap; transition:.15s;
}
.top-fmt{ padding:3px 9px; min-height:36px }
.top-fmt:hover, .top-g > button:hover:not([disabled]){ color:var(--text); background:rgba(255,255,255,.06) }
.top-fmt.on{ background:color-mix(in srgb, var(--acc) 14%, transparent); color:var(--text) }
.top-g > button{ width:34px; padding:0; justify-content:center }
.top-g > button[disabled]{ color:var(--faint); opacity:.55; cursor:default }
.top-mid{ margin:0 auto; display:flex; align-items:center; gap:8px; min-width:0 }
.top-right{ display:flex; align-items:center; gap:10px; margin-left:0; flex:none }
.top .chip{ padding:6px 12px; font-size:12.5px }
.top .btn{ padding:8px 15px; font-size:13.5px; font-weight:600; gap:7px; white-space:nowrap }
.top .btn:hover{ transform:none; box-shadow:none }
.top-dl{ color:var(--text) }

.top .btn.on{ background:rgba(255,255,255,.12) }
.top .ava.on{ box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 25%, transparent); border-color:var(--acc) }
.top-more.on{ background:rgba(255,255,255,.12) }
.top-more{
  display:none; width:38px; height:38px; border-radius:12px; padding:0;
  background:transparent; border:1px solid var(--line-2); color:var(--text); cursor:pointer;
  place-items:center; flex:none;
}
.top-more:hover{ background:rgba(255,255,255,.06) }

.top-more.guest{ display:grid }


.top .savechip{
  position:static; left:auto; right:auto; top:auto; bottom:auto;
  opacity:1; box-shadow:none; max-width:none; pointer-events:auto; padding:6px 11px;
}


.top-menu{
  position:absolute; top:52px; right:16px; width:280px; max-width:calc(100vw - 24px);
  background:var(--card); border:1px solid var(--line-2); border-radius:20px; padding:6px;
  box-shadow:0 18px 50px rgba(0,0,0,.55); z-index:80;
}
.top-menu > button, .top-menu > a{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  padding:9px 12px; border-radius:10px; font-family:var(--font-b); font-size:13.5px;
  color:var(--text); background:none; border:none; text-align:left; cursor:pointer;
  text-decoration:none; transition:.15s;
}
.top-menu > button:hover, .top-menu > a:hover{ background:rgba(255,255,255,.06) }
.top-menu > button.on{ background:color-mix(in srgb, var(--acc) 14%, transparent) }

.top-menu > button[disabled]{ color:var(--faint); cursor:default; background:none }
.top-menu em{ color:var(--faint); font-style:normal; font-size:11.5px; white-space:nowrap; text-align:right }
.top-menu h5{
  margin:0; padding:8px 12px 4px; font-family:var(--font-m); font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--faint);
}
.top-menu hr{ border:none; border-top:1px solid var(--line); margin:6px 4px }
.um-head{ padding:9px 12px 4px; font-weight:600; font-size:14px }
.um-head em{ display:block; font-weight:400; margin-top:2px }
.um-note{ margin:0; padding:6px 12px 8px; font-size:12px; color:var(--faint); line-height:1.45 }

@media (min-width:1001px){
  #moreMenu .mm-phone{ display:none }
}

#dlMenu .dl-m{ display:none }
@media (max-width:1000px){
  #dlMenu .dl-pc{ display:none }
  #dlMenu .dl-m{ display:inline }
}


main.tool{
  position:relative; display:block; flex:1; min-height:0;
  height:auto; overflow:hidden; background:var(--ink);
}
.tool > .stage{ position:absolute; inset:0; display:block; min-height:0 }

.stage .jobbar{
  top:62px; left:var(--cvx, 50%); transform:translateX(-50%);
  max-width:min(620px, calc(var(--cvw, 100%) - 24px));
}

#rateBox{
  bottom:118px !important; z-index:20 !important; left:var(--cvx, 50%) !important;
  max-width:min(520px, calc(var(--cvw, 100%) - 24px)) !important;
}

.idea-fab, .idea-up, .themer{ display:none !important }


.shell-dim{ position:absolute; inset:0; z-index:35; background:rgba(0,0,0,.45); display:none }
#buildDrawer{
  position:absolute; top:0; bottom:0; left:72px; width:320px; z-index:40;
  display:flex; flex-direction:column; min-height:0;
  background:var(--ink-2); border-right:1px solid var(--line-2); border-bottom:none;
  box-shadow:12px 0 40px rgba(0,0,0,.45);
  transform:translateX(-130%); visibility:hidden;
  transition:transform .22s ease, visibility 0s linear .22s;
}
body.build-open #buildDrawer{ transform:none; visibility:visible; transition:transform .22s ease, visibility 0s }

body.drawer-wide #buildDrawer{ width:400px }
.drawer-head{
  position:relative; flex:none; display:flex; align-items:center; gap:10px;
  padding:14px 16px 10px; border-bottom:1px solid var(--line);
}
.drawer-head h3{ margin:0; flex:1; font:500 14px var(--font-d); letter-spacing:-.02em; color:var(--text) }
.drawer-grip{ display:none }
.drawer-x{
  width:32px; height:32px; border-radius:12px; padding:0; cursor:pointer;
  background:transparent; border:1px solid var(--line-2); color:var(--muted);
  display:grid; place-items:center; transition:.15s;
}
.drawer-x:hover{ color:var(--text); background:rgba(255,255,255,.06) }
#buildDrawer .panel-hide{ display:none }
#buildDrawer h1{ display:none }                 
#buildDrawer .panel-scroll{ padding:14px 16px 16px }
#buildDrawer .sub{ font-size:12.5px; margin-bottom:12px }
#buildDrawer .grp{ padding:13px 14px 15px; margin-bottom:12px; border-radius:14px }
#buildDrawer .grp label{ font-size:13.5px; margin-bottom:8px }
#buildDrawer .grp-hint{ font-size:12px; margin:-2px 0 10px }
#buildDrawer textarea.inp{ min-height:112px; font-size:14px; padding:12px 14px }
#buildDrawer .seg button{ padding:8px 6px; font-size:13px }
#buildDrawer .seg button small{ font-size:11px }
#buildDrawer .drop{ padding:16px 12px; font-size:13px }
#buildDrawer .drop b{ font-size:13.5px }

#tplGrp{ padding:10px 14px }
#tplGrp .grp-hint{ display:none }
#tplGrp > label{ margin-bottom:8px }
#tplOpen{ padding:8px 12px; font-size:12.5px }

#tplChosen{
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
  background:var(--card); border:1px solid var(--acc); border-radius:12px; padding:8px 8px 8px 12px;
}
#tplThumb{ width:36px; height:46px; object-fit:cover; border-radius:6px; background:var(--line-2); flex:none }
#tplChosen .tpl-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px }
#tplName{ font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
#tplMeta{ font-size:11.5px; color:var(--faint); white-space:nowrap }
#tplClear{ flex:none; padding:6px 10px; font-size:12px; border-radius:9px }
#tplClear:hover{ transform:none }

.tpl-note{ margin:0 0 8px; font-size:12px; line-height:1.45; color:var(--amber) }

#eyeNoSample, #eyeTpl{ font-size:12px; margin-top:6px }
#eyeNoSample{ color:var(--amber) }
#eyeTpl{ display:none; color:var(--muted) }
#eyeGrp.tpl-off #eyeNote, #eyeGrp.tpl-off #eyeTrial, #eyeGrp.tpl-off #eyeNoSample{ display:none }
#eyeGrp.tpl-off #eyeTpl{ display:block }
#eyeGrp.tpl-off .eye-head b, #eyeGrp.tpl-off .sw{ opacity:.5 }
#eyeGrp.tpl-off .sw input{ cursor:default }


#buildDrawer .grp > label{ display:block; position:relative; line-height:22px; margin-bottom:8px }
#buildDrawer .grp > label:has(> .stepn){ padding-left:32px }
#buildDrawer .grp > label .stepn{ position:absolute; left:0; top:0 }
#buildDrawer .grp > label .opt{
  display:inline-block; max-width:100%; vertical-align:top;   
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#buildDrawer .grp > label .qhelp{ margin-left:3px }

#buildDrawer .seg button{ padding:8px 4px; min-width:0; overflow:hidden }
#buildDrawer .seg small{ line-height:1.35 }
#buildDrawer .seg small span{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

#buildDrawer .keep-txt{ white-space:nowrap }
.keep-txt .kw-l{ display:none }
.keep-txt .kw-s{ display:inline }

#buildDrawer .eye{ display:block; padding:12px 14px }
#buildDrawer .eye-head{ display:flex; align-items:center; justify-content:space-between; gap:12px }
#buildDrawer .eye p{ margin-top:6px }

body.drawer-wide #buildDrawer .seg small span{ display:inline; white-space:nowrap }
body.drawer-wide #buildDrawer .seg small .seg-px::before{ content:" · " }
body.drawer-wide #buildDrawer .panel-scroll{ padding:16px 18px 18px }
body.drawer-wide #buildDrawer .sub{ font-size:13px }
body.drawer-wide #buildDrawer .grp{ padding:14px 16px 16px }
body.drawer-wide #buildDrawer .grp-hint{ font-size:12.5px }
body.drawer-wide #buildDrawer textarea.inp{ min-height:124px }
body.drawer-wide #buildDrawer .seg button{ padding:9px 6px }

body.drawer-wide #buildDrawer .drop{ padding:18px 14px; text-wrap:balance }
body.drawer-wide #buildDrawer .grp-hint, body.drawer-wide #buildDrawer .eye p, body.drawer-wide #buildDrawer .est-note,
body.drawer-wide #buildDrawer .tpl-note{ text-wrap:pretty }

body.drawer-wide .keep-txt .kw-l{ display:inline }
body.drawer-wide .keep-txt .kw-s{ display:none }
body.drawer-wide #buildDrawer .eye{ padding:14px 16px }
body.drawer-wide #buildDrawer .eye p{ font-size:13px; line-height:1.5 }
body.drawer-wide #eyeNoSample, body.drawer-wide #eyeTpl{ font-size:12.5px }
body.drawer-wide #buildDrawer .launch{ padding:12px 18px 16px }
body.drawer-wide #buildDrawer .est{ padding:11px 16px; font-size:13.5px }
body.drawer-wide #buildDrawer .est-note{ font-size:11.5px; margin:-2px 2px 12px }

#estNoteM{ display:none }
#buildDrawer .launch{ padding:12px 16px 14px; background:var(--ink-2) }

#buildDrawer .est{ padding:10px 14px; font-size:13px; margin-bottom:10px; gap:10px }
#buildDrawer .est > span{ white-space:nowrap }
#buildDrawer .est .val{ font-size:15px }
#buildDrawer .est-note{ font-size:11px; margin:-2px 2px 10px }
#buildDrawer .launch .btn{ padding:12px 20px; font-size:14.5px }
#buildDrawer .launch .btn:hover{ transform:none; box-shadow:none }


.ver-box{
  position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(0,0,0,.55);
}
.ver-box[hidden]{ display:none }
.ver-card{
  width:100%; max-width:420px; max-height:min(80vh, 640px); display:flex; flex-direction:column; min-height:0;
  background:var(--card); border:1px solid var(--line-2); border-radius:20px; padding:16px 18px 16px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.ver-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px }
.ver-head h3{ margin:0; font:500 16px var(--font-d); letter-spacing:-.02em; color:var(--text) }
.ver-note{ margin:0 0 10px; font-size:12.5px; line-height:1.45; color:var(--faint) }
.ver-msg{ margin:0; font-size:13px; line-height:1.45; color:var(--muted) }
.ver-msg:empty{ display:none }
.ver-msg.err{ color:var(--coral) }
.ver-list{ overflow:auto; min-height:0; display:flex; flex-direction:column; gap:6px }
.ver-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 8px 8px 12px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.03);
}
.ver-row .ver-t{ font-size:13.5px; color:var(--muted); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ver-row .ver-t b{ font-weight:600; color:var(--text) }
.ver-row .btn{ flex:none; padding:6px 12px; font-size:12.5px; border-radius:9px }
.ver-row .btn:hover{ transform:none; box-shadow:none }
@media (max-width:1000px){
  .ver-box{ padding:0; align-items:flex-end }
  .ver-card{ max-width:none; max-height:72vh; border-radius:22px 22px 0 0; padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px)) }
}


@media (max-width:1000px){
  body.ed-focus header.top{ display:none }
}


@media (max-width:1400px){
  .top-back span{ display:none }
  .top-name{ max-width:180px }
}
@media (max-width:1300px){
  
  .top .savechip{ border:none; background:none; padding:0 4px; box-shadow:none }
  .top .savechip #saveTxt{ display:none }
}
@media (max-width:1200px){
  .top .chip.lim{ display:none }
  .top-dl > span, .top-dl > .ti.xs{ display:none }
  .top-name{ max-width:140px }
}


@media (max-width:1000px){
  
  header.top{ height:calc(52px + env(safe-area-inset-top, 0px)); padding:env(safe-area-inset-top, 0px) 8px 0; gap:4px }
  .top .logo{ display:none }
  .top-back{ padding:8px }
  .top-back span{ display:none }
  
  .top-name{
    position:absolute; left:50%; top:calc(26px + env(safe-area-inset-top, 0px)); transform:translate(-50%, -50%);
    max-width:calc(100% - 220px); text-align:center; font-size:14px; padding:6px 4px; pointer-events:none;
  }
  .top-fmt{ display:none }
  .top-mid{ margin:0; gap:4px }
  .top-right{ margin-left:auto }
  .top-g{ background:transparent; border:none; padding:0 }
  .top-g > button{ width:40px; min-height:40px }
  #tbRedo{ display:none }
  .top .savechip{ display:flex; border:none; background:none; padding:0 4px; box-shadow:none }
  .top .savechip #saveTxt{ display:none }
  .top-right{ gap:4px }
  .top .chip, #admBtn, #buildBtn, #loginBtn, #ava{ display:none !important }
  .top .top-dl{ width:40px; height:40px; padding:0; justify-content:center; border-radius:12px;
    background:transparent; border:none }
  .top .top-dl > span, .top .top-dl > .ti.xs{ display:none }
  .top .top-dl .ti{ width:20px; height:20px }
  .top-more{ display:grid; border:none; width:40px; height:40px }
  .top-more .ti{ width:20px; height:20px }
  .top-menu{ top:48px; right:8px }
  .stage .jobbar{ top:12px; max-width:calc(var(--cvw, 100%) - 20px) }
  #rateBox{ bottom:92px !important; max-width:calc(var(--cvw, 100%) - 20px) !important }

  
  body.build-open .shell-dim{ display:block }
  #buildDrawer{
    left:0; right:0; top:auto; bottom:0; width:auto; height:92%; max-height:92%;
    border-right:none; border-top:1px solid var(--line-2); border-radius:22px 22px 0 0;
    box-shadow:0 -12px 40px rgba(0,0,0,.5);
    transform:translateY(110%);
  }
  .drawer-head{ padding:18px 16px 10px }
  .drawer-grip{
    display:block; position:absolute; left:50%; top:7px; width:40px; height:4px;
    margin-left:-20px; border-radius:2px; background:rgba(255,255,255,.2);
  }
  .drawer-x{ width:40px; height:40px }
  #buildDrawer .panel-scroll{ padding:12px 14px 28px }   
  #buildDrawer textarea.inp, #buildDrawer .photo-item input{ font-size:16px }   
  #buildDrawer .launch{ padding:10px 14px calc(12px + env(safe-area-inset-bottom, 0px)) }
  #buildDrawer .launch .btn{ min-height:48px; font-size:15px }
  
  
  #eyeNoSample{ color:var(--muted) }
  
  #estNote{ display:none }
  #estNoteM{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  #buildDrawer .est-note{ margin:-2px 2px 8px }
}


.savechip .sck{ display:none; width:15px; height:15px; flex:none; overflow:visible }
.savechip.ok .sdot{ display:none }
.savechip.ok .sck{ display:block; animation:sckHalo .9s ease-out }
.savechip .sck circle, .savechip .sck path{ fill:none; stroke:var(--mint); stroke-linecap:round; stroke-linejoin:round }
.savechip .sck circle{ stroke-width:1.6; stroke-dasharray:41; stroke-dashoffset:41; transform:rotate(-90deg);
  transform-origin:8px 8px; animation:sckDraw .45s cubic-bezier(.2,0,0,1) forwards }
.savechip .sck path{ stroke-width:1.9; stroke-dasharray:12; stroke-dashoffset:12;
  animation:sckDraw .32s .38s cubic-bezier(.34,1.56,.64,1) forwards }
.savechip.busy .sdot{ width:11px; height:11px; background:none; border:2px solid var(--card-2);
  border-top-color:var(--acc); animation:sp .8s linear infinite }
@keyframes sckDraw{ to{ stroke-dashoffset:0 } }
@keyframes sckHalo{ 0%{ filter:drop-shadow(0 0 0 rgba(89,224,184,0)) } 45%{ filter:drop-shadow(0 0 5px rgba(89,224,184,.85)) }
  100%{ filter:drop-shadow(0 0 0 rgba(89,224,184,0)) } }
@media (prefers-reduced-motion: reduce){
  .savechip .sck, .savechip .sck circle, .savechip .sck path{ animation:none; stroke-dashoffset:0 }
}


body.ed-toast #rateBox{ opacity:0 !important; pointer-events:none !important }


.rate-ic{ position:relative; flex:none; width:38px; height:38px; padding:0; border:none; background:none;
  border-radius:50%; color:var(--muted); cursor:pointer; transition:color .15s }
.rate-ic svg{ display:block; width:38px; height:38px; overflow:visible }
.rate-ic .bg{ fill:none; stroke:var(--line-2); stroke-width:1.2; transition:stroke .15s }
.rate-ic .rg{ fill:none; stroke:var(--mint); stroke-width:2; stroke-linecap:round; stroke-dasharray:103.7;
  stroke-dashoffset:103.7; transform:rotate(-90deg); transform-origin:18px 18px }
.rate-ic .th{ transform-origin:18px 18px }
.rate-ic .th path{ fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round }
.rate-ic .mo{ stroke-dasharray:15; stroke-dashoffset:0 }
.rate-ic .ey{ fill:currentColor; transform-box:fill-box; transform-origin:center }
.rate-ic:hover{ color:var(--text) }
.rate-ic:hover .bg{ stroke:var(--acc) }
.rate-ic.yes{ color:var(--mint) }
.rate-ic.yes .rg{ animation:rgSweep .5s cubic-bezier(.2,0,0,1) forwards }
.rate-ic.yes .th{ animation:thPop .55s cubic-bezier(.34,1.56,.64,1) }
.rate-ic.yes svg{ animation:rgHalo .9s ease-out }
.rate-ic.yes .mo, .rate-ic.no .mo{ animation:moDraw .45s .12s cubic-bezier(.34,1.56,.64,1) both }
.rate-ic.yes .ey{ animation:eyBlink .5s .1s ease }
.rate-ic.no{ color:var(--coral); animation:rgShake .45s }
.rate-ic.no .rg{ stroke:var(--coral); animation:rgSweep .4s cubic-bezier(.2,0,0,1) forwards }
.rate-ok{ display:inline-block; width:18px; height:18px; margin-left:6px; vertical-align:-4px; overflow:visible }
.rate-ok circle, .rate-ok path{ fill:none; stroke:var(--mint); stroke-linecap:round; stroke-linejoin:round }
.rate-ok circle{ stroke-width:1.8; stroke-dasharray:41; stroke-dashoffset:41; transform:rotate(-90deg);
  transform-origin:9px 9px; animation:rgSweep .45s ease forwards }
.rate-ok path{ stroke-width:2; stroke-dasharray:14; stroke-dashoffset:14;
  animation:rgSweep .3s .35s cubic-bezier(.34,1.56,.64,1) forwards }
.rate-in{ animation:rateIn .28s .12s cubic-bezier(.2,0,0,1) both }
#rateBox.rate-note{ width:420px }   
@keyframes rgSweep{ to{ stroke-dashoffset:0 } }
@keyframes moDraw{ from{ stroke-dashoffset:15 } to{ stroke-dashoffset:0 } }
@keyframes eyBlink{ 0%,100%{ transform:scaleY(1) } 40%{ transform:scaleY(.15) } }
@keyframes thPop{ 0%{ transform:scale(.7) } 60%{ transform:scale(1.15) } 100%{ transform:scale(1) } }
@keyframes rgHalo{ 0%{ filter:drop-shadow(0 0 0 rgba(89,224,184,0)) } 35%{ filter:drop-shadow(0 0 8px rgba(89,224,184,.75)) }
  100%{ filter:drop-shadow(0 0 0 rgba(89,224,184,0)) } }
@keyframes rgShake{ 20%{ transform:translateX(-5px) } 40%{ transform:translateX(4px) } 60%{ transform:translateX(-3px) }
  80%{ transform:translateX(2px) } }
@keyframes rateIn{ from{ opacity:0; transform:translateY(6px) } }
@media (prefers-reduced-motion: reduce){
  .rate-ic, .rate-ic *, .rate-ok *, .rate-in{ animation-duration:.01s !important; animation-delay:0s !important }
}