/* MomoMii 꾸미기 화면 — 미리보기(라일락 무대)가 중심, 도구는 흰 판. 휴대폰은 엄지가 닿는 아래쪽에 탭과 목록 */
:root{--ink:#2f2534;--mute:#7d7182;--line:#ebe3ef;--paper:#fff;--wash:#f7f3fa;--lilac:#efe7f8;--plum:#6a42a2;--plum-soft:#efe6fa;--butter:#f6d47a;--butter-ink:#4b3914;--warn:#a8621a}
*{box-sizing:border-box}[hidden]{display:none!important}
html,body{height:100%}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Pretendard','Apple SD Gothic Neo','Noto Sans KR','Noto Sans JP',system-ui,sans-serif;-webkit-tap-highlight-color:transparent;overflow:hidden;overscroll-behavior:none}
button,input,select{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:default}
:focus-visible{outline:3px solid var(--plum);outline-offset:2px}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ── 틀 */
.app{height:100vh;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"bar" "stage" "tray" "tabs"}
.bar{grid-area:bar;height:calc(56px + env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px 0 16px;padding-top:env(safe-area-inset-top);border-bottom:1px solid var(--line);background:var(--paper)}
.logo{font-weight:900;font-size:21px;letter-spacing:-1px;color:var(--plum)}.logo span{color:#c25656}
.bar-actions{display:flex;align-items:center;gap:0;min-width:0}
.icon-btn{width:44px;height:44px;border:0;border-radius:50%;background:none;display:grid;place-items:center;color:var(--ink)}.icon-btn:disabled{opacity:.3}.icon-btn:not(:disabled):active{background:var(--wash)}
.save{white-space:nowrap;margin-left:6px;height:40px;border:0;border-radius:20px;background:var(--butter);color:var(--butter-ink);font-weight:800;font-size:14px;padding:0 14px 0 11px;display:flex;align-items:center;gap:5px}.save svg{width:18px;height:18px;stroke-width:2.2}

.stage{grid-area:stage;position:relative;min-height:0;display:flex;align-items:center;justify-content:center;padding:12px;background:radial-gradient(ellipse 46% 9% at 50% 93%,rgba(106,66,162,.12),transparent 72%),var(--lilac);overflow:hidden}
.stage canvas{position:absolute;left:0;top:0;width:0;height:0;display:block;touch-action:none;user-select:none;-webkit-user-select:none}
.toast{position:absolute;left:12px;right:12px;bottom:12px;margin:auto;max-width:420px;background:rgba(47,37,52,.9);color:#fff;font-size:13.5px;line-height:1.5;border-radius:14px;padding:10px 14px;text-align:center;pointer-events:none;z-index:2}
#placeholder{position:absolute;color:var(--mute);font-size:14px;pointer-events:none}

.tabs{grid-area:tabs;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);background:var(--paper);padding-bottom:env(safe-area-inset-bottom)}
.tabs button{border:0;background:none;height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12.5px;font-weight:600;color:var(--mute)}
.tabs svg{box-sizing:content-box;padding:3px 16px;border-radius:14px}
.tabs button.active{color:var(--plum)}.tabs button.active svg{background:var(--plum-soft)}

/* 판 높이는 고정 — 탭·접는 칸에 따라 무대(캐릭터 크기)가 바뀌지 않게 */
.tray{grid-area:tray;height:42vh;height:42dvh;overflow-y:auto;overscroll-behavior:contain;padding:12px 16px 16px;background:var(--paper)}
.tray-top{display:none}

/* ── 고르기 줄 */
.strip-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:15px}
.strip-actions{display:flex;align-items:center;gap:4px}
#panelToggle{display:none}
.link{border:0;background:none;color:var(--plum);font-weight:700;font-size:14px;min-height:40px;padding:8px 6px;white-space:nowrap}.link:disabled{opacity:.45}
.strip-row{position:relative;display:flex;gap:10px;overflow-x:auto;padding:2px 2px 6px;margin:0 -16px;padding-inline:16px;scroll-snap-type:x proximity;scrollbar-width:none}.strip-row::-webkit-scrollbar{display:none}
.item{position:relative;border:1.5px solid var(--line);border-radius:16px;background:var(--wash);padding:6px;overflow:hidden}
.item.selected{border-color:var(--plum);box-shadow:0 0 0 1.5px var(--plum);background:#fff}
.item:disabled{opacity:.5}
.item img{display:block;height:100%;width:100%;object-fit:contain}
.strip-row .item{flex:0 0 78px;height:104px;scroll-snap-align:center}
.item-figure{position:relative;display:block;height:100%;aspect-ratio:1040/1845;margin:auto}.item .item-figure img{position:absolute;object-fit:fill}.item .item-figure .item-body{inset:0;width:100%;height:100%}.item .item-figure .item-face{max-width:none}
.item-label{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:4px;font-size:12px;color:var(--ink);text-align:center;line-height:1.3}.item .item-label img{height:58%}
.face-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.face-item img{height:auto;width:58px;aspect-ratio:1;object-fit:cover;border-radius:50%;background:#fff}
.face-item small{font-size:11.5px;color:var(--ink);white-space:nowrap}
.face-item.add{border:0;background:var(--plum);color:#fff}.face-item.add .add-plus{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.18);font-size:26px;line-height:1}.face-item.add small{font-size:12px;font-weight:700;color:#fff;white-space:normal;text-align:center;line-height:1.3}.sheet-grid .face-item.add .add-plus{width:56px;height:56px;font-size:30px}.sheet-grid .face-item.add small{font-size:14px}

/* ── 조절 카드 */
.panel{display:grid;gap:10px;margin-top:6px}.panel:empty{display:none}
.card{background:var(--wash);border-radius:18px;padding:14px 16px;display:grid;gap:12px}
.card-head{display:flex;align-items:flex-start;gap:10px}
.card-head strong,.fold summary strong{display:block;font-size:15px}
.hint,.card small{display:block;font-size:12.5px;line-height:1.55;color:var(--mute);margin-top:2px}
.fold{padding:0}.fold summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:52px;padding:6px 14px 6px 16px;cursor:pointer}.fold summary::-webkit-details-marker{display:none}
.fold summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:rotate(45deg) translateY(-2px);transition:transform .15s;flex:none;margin-left:4px}.fold[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.fold-body{display:grid;gap:14px;padding:2px 16px 16px}
.row{display:flex;align-items:center;gap:12px}.grow{flex:1;min-width:0}.buttons{display:flex;flex-wrap:wrap;gap:8px}
.opt{display:flex;align-items:center;gap:12px;min-height:44px}.opt>.grow>span{font-size:14.5px}
.switch{flex:none;width:50px;height:30px;border-radius:15px;border:0;background:#d8cfdc;position:relative;padding:0}.switch::after{content:'';position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(47,37,52,.25);transition:transform .15s}.switch.on{background:var(--plum)}.switch.on::after{transform:translateX(20px)}
.range{display:grid;gap:4px}.range-top{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.num{display:flex;align-items:center;gap:2px;width:84px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:4px 8px}.num input{width:100%;border:0;text-align:right;font-size:14px;background:none;padding:2px 0;-moz-appearance:textfield}.num input::-webkit-inner-spin-button{display:none}.num i{font-style:normal;color:var(--mute);font-size:12px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:32px;background:none;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:#e1d7e7}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;background:#fff;border:2.5px solid var(--plum);box-shadow:0 1px 3px rgba(47,37,52,.25)}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:#e1d7e7}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:2.5px solid var(--plum)}
.chip{min-height:40px;border:1px solid #ddd0e4;background:#fff;border-radius:12px;padding:8px 14px;font-size:13.5px;font-weight:600;white-space:nowrap}.chip.strong{border-color:#c4b2d6;color:var(--plum)}.chip:disabled{opacity:.45}.chip.wide{width:100%}
.link.wide{width:100%}.link.cut{justify-self:start;padding-left:0}
.primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;background:var(--plum);color:#fff;border:0;border-radius:14px;padding:12px 18px;font-weight:700;font-size:15.5px}.primary:disabled{opacity:.45}
.full{width:100%}.subtle{border:0;background:none;color:var(--mute);min-height:44px}

.avatar{flex:none;width:56px;height:56px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--plum);overflow:hidden;background:#fff}.avatar img{width:100%;height:100%;object-fit:cover}.avatar.busy{opacity:.5}
.sub small{margin-bottom:6px}.faces{display:flex;flex-wrap:wrap;gap:10px}.face-pick{position:relative}
.face-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);padding:0;overflow:hidden;background:#fff}.face-pick.current .face-btn{border:2px solid var(--plum)}.face-btn img{width:100%;height:100%;object-fit:cover}
.face-del{position:absolute;right:-8px;top:-8px;width:28px;height:28px;border-radius:50%;border:2px solid #fff;background:#5b4a5e;color:#fff;font-size:14px;line-height:22px;padding:0}.face-del::before{content:"";position:absolute;inset:-8px}
.face-del.armed{background:#b3372f;transform:scale(1.25)}
.warn{margin:0;font-size:13px;color:var(--warn)}
.note{margin:0;font-size:13px;line-height:1.5;color:#6f6371;background:var(--wash);border-radius:14px;padding:12px 14px}
.ai-box{display:grid;gap:8px}.gallery{display:grid;gap:8px}.ai-item{display:flex;align-items:center;gap:8px;background:#fff;border-radius:12px;padding:6px}.ai-item.current{outline:2px solid var(--plum)}.ai-item img{width:48px;height:48px;object-fit:contain}

/* ── 창 */
dialog{border:0;border-radius:22px;padding:24px;width:min(420px,92vw);color:var(--ink);box-shadow:0 18px 50px rgba(35,21,45,.25)}dialog::backdrop{background:rgba(36,21,45,.45)}
dialog h2{margin:0 0 4px;font-size:19px}dialog p{color:var(--mute);line-height:1.6;font-size:14px}
dialog label{display:grid;gap:6px;margin:14px 0}dialog input:not([type=checkbox]),.menu input,.menu select{padding:11px 12px;border:1px solid #ddd3e1;border-radius:10px;background:#fff;font-size:15px}
.close{float:right;width:40px;height:40px;margin:-10px -10px 0 0;border:0;background:none;font-size:26px;color:var(--mute)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5}.check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--plum);flex:none}
#authError,#cutStatus,#aiStatus{font-size:14px;color:var(--plum)}
.list{display:grid;gap:8px;margin-top:14px;max-height:60vh;overflow:auto}.list-item{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:10px}.list-item small{display:block;color:var(--mute);font-size:12px}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}.compare figure{margin:0}.compare figcaption{text-align:center;font-size:12px;color:var(--mute);margin-bottom:4px}.compare div{aspect-ratio:1;background:#f2eef4 repeating-conic-gradient(#ebe6ee 0 25%,#f7f4f8 0 50%) 0 0/16px 16px;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden}.compare img{width:100%;height:100%;object-fit:contain}.compare span{font-size:12px;color:#a59aa8}

/* 바텀시트 — 전체 목록(2열 큰 그림)과 메뉴 */
.sheet[open]{display:flex;flex-direction:column}.sheet{margin:auto auto 0;padding:0;width:min(560px,100vw);max-width:100vw;max-height:84vh;border-radius:22px 22px 0 0;animation:sheet-up .22s ease-out}@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
.sheet-head{position:relative;display:flex;justify-content:space-between;align-items:center;padding:16px 12px 8px 20px;border-bottom:1px solid var(--line);font-size:16px}.sheet-head::before{content:"";position:absolute;left:50%;top:6px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:#ddd3e0}
.sheet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px 16px calc(20px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain}
.sheet-grid .item{height:180px;padding:8px}.sheet-grid[data-kind=hat] .item{height:112px}.sheet-grid[data-kind=face] .item{height:132px}
.sheet-grid .face-item img{width:min(90px,78%)}.sheet-grid .face-item small{font-size:13px}.sheet-grid .add .item-label{font-size:34px}.sheet-grid .add small{font-size:13px}
.menu-body{display:grid;gap:20px;padding:16px 20px calc(24px + env(safe-area-inset-bottom));overflow-y:auto}
.menu-sec{display:grid;gap:10px}.menu-sec+.menu-sec{border-top:1px solid var(--line);padding-top:18px}.menu-sec>strong{font-size:15px}
.menu-row{display:flex;flex-wrap:wrap;gap:8px}.menu-line{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14.5px;margin:0}

/* ── 넓은 화면: 왼쪽 무대, 오른쪽 도구판(탭 위, 목록은 여러 줄) */
@media (min-width:900px){
  .app{grid-template-columns:minmax(0,1fr) 420px;grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"bar bar" "stage tabs" "stage tray"}
  .bar{padding:0 16px 0 24px}
  .stage{padding:32px}
  .tabs{border-top:0;border-left:1px solid var(--line);border-bottom:1px solid var(--line);padding:0 8px}
  .tabs button{flex-direction:row;height:56px;gap:6px;font-size:14px}.tabs svg{padding:3px 8px}
  .tray{height:auto;border-left:1px solid var(--line);padding:16px 20px 28px}
  #stripMore{display:none}
  .strip-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:2px;max-height:max(352px,calc(100vh - 380px));overflow:auto;scrollbar-width:thin}
  .strip-row .item{height:132px}.strip-row[data-kind=hat] .item{height:96px}.strip-row[data-kind=face] .item{height:112px}
  .panel{margin-top:14px}
}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}.switch::after,.fold summary::after{transition:none}}

/* 키가 작은 휴대폰(iPhone SE 등) — 도구 판을 줄여 무대를 키운다 */
@media (max-width:899px) and (max-height:760px){.tray{height:36vh;height:36dvh;padding-top:8px}.strip-head{margin-bottom:4px}.strip-row .item{flex-basis:70px;height:90px}.face-item img{width:52px}.tabs button{height:56px}}
@media (max-width:380px){.logo{font-size:19px}.bar{padding-left:12px}.icon-btn{width:40px}.save{padding:0 12px 0 10px}}
/* 저장 버튼 글자 — 좁은 화면에서는 짧게(영어·일본어는 더 일찍) */
.save .short{display:none}
@media (max-width:340px){.save .long{display:none}.save .short{display:inline}}
@media (max-width:400px){:lang(en) .save .long,:lang(ja) .save .long{display:none}:lang(en) .save .short,:lang(ja) .save .short{display:inline}}
#charFresh{justify-self:start;padding-left:0}
/* 휴대폰 가로 — 무대 왼쪽, 도구 판 오른쪽 */
@media (max-width:899px) and (orientation:landscape) and (max-height:500px){.app{grid-template-columns:minmax(0,1fr) min(340px,46vw);grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"bar bar" "stage tabs" "stage tray"}.bar{height:calc(48px + env(safe-area-inset-top))}.tabs{border-top:0;border-left:1px solid var(--line);border-bottom:1px solid var(--line);padding-bottom:0}.tabs button{flex-direction:row;height:44px;gap:4px;font-size:12px}.tabs svg{padding:2px 4px;width:20px;height:20px}.tray{height:auto;border-left:1px solid var(--line)}.stage{padding:8px}}
/* 세로 화면에서는 목록을 짧게 두고, 세밀한 조절이 필요할 때만 도구판을 펼친다. */
@media (max-width:899px) and (orientation:portrait){
  .app{grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"bar" "stage" "tray"}
  .stage{padding:12px 68px}
  .tabs{grid-area:stage;position:relative;display:block;border:0;background:none;padding:0;pointer-events:none;z-index:1}
  .tabs button{position:absolute;width:58px;height:64px;border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);box-shadow:0 2px 8px rgba(47,37,52,.12);pointer-events:auto;font-size:12px}
  .tabs button:nth-child(1){left:6px;top:20%}.tabs button:nth-child(2){left:6px;top:55%}
  .tabs button:nth-child(3){right:6px;top:20%}.tabs button:nth-child(4){right:6px;top:55%}
  .tabs svg{padding:2px 10px}.tabs button.active{color:var(--plum);border-color:var(--plum)}
  .app:not(.drawer-open) .tabs button.active{color:var(--ink);border-color:var(--line)}
  .app:not(.drawer-open) .tabs button.active svg{background:none}
  .tabs button:active{background:var(--plum-soft)}
  .app:not(.drawer-open) .tray{display:none}
  .tray{height:30dvh;min-height:210px;padding-top:0}
  .tray.expanded{height:46dvh}
  .tray-top{display:flex;justify-content:flex-end;height:44px}
  .tray-top .link{min-height:44px;min-width:44px;padding:4px 6px}
  .tray:not(.expanded) .panel{display:none}
  .strip-head{position:sticky;top:0;z-index:1;background:var(--paper)}
  #panelToggle{display:inline-flex;align-items:center}
  .strip-row .item{flex-basis:70px;height:90px}
  .face-item img{width:52px}
}
.sheet-chips{display:flex;gap:6px;overflow-x:auto;padding:10px 16px 2px;scrollbar-width:none;flex:none}.sheet-chips::-webkit-scrollbar{display:none}.chip.on{background:var(--plum-soft);border-color:var(--plum)}
/* 칩 줄 — 작게, 넘치면 오른쪽 끝을 흐려 더 있음을 보인다. 아래 목록 위 칩은 넓은 화면에서만 */
.sheet-chips .chip{min-height:34px;padding:6px 12px;font-size:13px}.sheet-chips{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);padding-right:28px}
.strip-chips{display:none}@media (min-width:900px){.strip-chips:not([hidden]){display:flex;padding:0 0 10px;-webkit-mask-image:none;mask-image:none;flex-wrap:wrap}}
/* 저장 배경을 흰색으로 고르면 무대도 흰색 */
.stage[data-bg=white]{background:radial-gradient(ellipse 46% 9% at 50% 93%,rgba(106,66,162,.1),transparent 72%),#fff}

/* Launch studio: visual decoration stays outside the exported canvas. */
:root{--paper:#fffdfa;--wash:#f8f3fc;--line:#e5d9ee;--mute:#716078;--plum:#7040a8;--plum-soft:#eee0fc;--studio-shadow:0 8px 22px #62388818;--soft-inset:inset 0 2px 2px #ffffff,inset 0 -4px 5px #b49ac51f}
.bar{background:linear-gradient(120deg,#fffdfa,#faf4ff);box-shadow:0 3px 14px #6545820d;z-index:2}
.save{min-height:44px;background:linear-gradient(#ffe8aa,#f7ce70);border:1px solid #fff1c8;box-shadow:inset 0 2px 2px #fff8df,0 3px 0 #dbb25d,0 5px 10px #b9944230}
.stage,.stage[data-bg=white]{background:radial-gradient(ellipse 62% 64% at 50% 38%,#fff5ed 0%,#f3e4f6 55%,transparent 77%),linear-gradient(145deg,#eee3fb,#e7d9f4)}
.stage::before{content:'';position:absolute;pointer-events:none;width:70%;height:76%;top:6%;border:2px solid #ffffff80;border-radius:48% 48% 30% 30%;box-shadow:inset 0 0 30px #ffffff55}
.stage::after{content:'';position:absolute;pointer-events:none;width:64%;height:var(--platform-height,28px);top:var(--platform-top,85%);left:var(--platform-center,50%);transform:translateX(-50%);border-radius:50%;background:linear-gradient(#fffdf6,#e5cdec);box-shadow:0 8px 0 #d3b7e5,0 14px 18px #75449722;border:2px solid #ffffffb0}
.stage canvas{z-index:1}.stage .toast{z-index:3}
.tray{background:linear-gradient(135deg,#fffdfa,#faf3ff);border-radius:28px 28px 0 0;border:1px solid #ffffff;box-shadow:0 -6px 25px #71479512}
.item{border-radius:20px;box-shadow:var(--soft-inset),0 3px 7px #6b438512}
.item.selected{outline:2px solid var(--plum);outline-offset:-2px;background:var(--plum-soft)}
.fold{border-radius:20px;background:#ffffffbd;box-shadow:var(--studio-shadow)}
@media(max-width:899px) and (orientation:portrait){
 .tabs button{border:2px solid #fffafc;background:linear-gradient(145deg,#fffefb,#f7edf7);box-shadow:var(--soft-inset),0 5px 0 #d8c6df,0 9px 14px #744d8520;border-radius:21px}
 .app.drawer-open .tabs button.active{background:linear-gradient(145deg,#f6ebff,#dec4fa);border-color:#b28bdf;box-shadow:inset 0 2px 4px #fff,0 4px 0 #b897d2,0 7px 16px #8c57c42a}
 .app.drawer-open .tabs button.active::after{content:'✓';position:absolute;right:-3px;top:-7px;background:var(--plum);color:white;border:2px solid white;border-radius:50%;width:20px;height:20px;font-size:12px}
}
@media(min-width:900px){.tray{border-radius:0;border-left:1px solid var(--line)}.stage::before{max-width:650px}.stage::after{max-width:500px}}
/* Keep compact artwork while giving the actual controls a 44px touch target. */
:root{--touch-target:44px}
.icon-btn{min-width:var(--touch-target)}
.chip,.sheet-chips .chip,.link{min-height:var(--touch-target)}
.num{padding:0 8px}.num input{min-height:var(--touch-target)}
input[type=range]{height:var(--touch-target)}
.range-control{position:relative;min-height:44px}.range-touch{display:none;position:absolute;inset:0;touch-action:pan-y pinch-zoom;user-select:none}
@media(any-pointer:coarse){.range-touch{display:block}.range-control.adjusting{border-radius:12px;background:#7040a80b}}
.switch,.switch.on{height:var(--touch-target);background:transparent}
.switch::before{content:'';position:absolute;inset:7px 0;border-radius:15px;background:#d8cfdc}
.switch.on::before{background:var(--plum)}
.switch::after{top:10px}
.element-lock{position:absolute;z-index:5;top:12px;left:50%;transform:translateX(-50%);min-height:48px;max-width:calc(100% - 96px);padding:8px 16px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--plum);border-radius:24px;background:#fffdfa;color:var(--plum);box-shadow:0 3px 10px #7040a81a;font:inherit;font-weight:700;cursor:pointer}
.element-lock[hidden]{display:none}.element-lock svg{width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.element-lock[data-locked=true]{background:var(--plum);color:#fff}.element-lock:active{filter:brightness(.94)}
.element-lock:focus-visible{outline:3px solid #bd85e5;outline-offset:3px}.fold input:disabled,.fold button:disabled{opacity:.45;cursor:not-allowed}