/* ============================================================================
   The Appearance Studio (v10-studio.js). Controls on the left; a sticky live
   miniature of the workspace and a plain-words explainer on the right.
   ========================================================================== */
/* Header and footer stay put; only the body scrolls, so the preview can be
   sticky inside it (when #modal itself scrolled, it slid under the header). */
#modal.st-modal{width:min(1180px,96vw)!important;max-width:none!important;display:flex!important;flex-direction:column;overflow:hidden!important}
#modal.st-modal>:not(.st-body){flex:none}
.st-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:28px;align-items:start;padding:20px 26px 20px!important}

/* ------------------------------------------------------------ controls ---- */
.st-controls{display:grid;gap:22px;min-width:0}
.st-sec{display:grid;gap:10px}
.st-sec+.st-sec{padding-top:20px;border-top:1px solid var(--line2,var(--line))}
.st-sec-head{display:flex;align-items:baseline;gap:12px;justify-content:space-between;flex-wrap:wrap}
.st-sec-head h3{margin:0;font-size:16px;font-weight:750;letter-spacing:-.015em;color:var(--text)}
.st-sec-head>span{font-size:12.5px;color:var(--muted)}
.st-sub{margin:4px 0 -2px;font-size:11px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* moods */
.st-moods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.st-mood{
  display:grid;justify-items:start;gap:8px;padding:14px 14px 13px;border-radius:14px;cursor:pointer;text-align:left;
  background:linear-gradient(160deg,color-mix(in srgb,var(--v-accent) 9%,var(--surface)),var(--surface) 70%);
  border:1px solid color-mix(in srgb,var(--v-accent) 18%,var(--line));color:var(--text);
  transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .2s ease,border-color .2s ease;
}
.st-mood b{font-size:14px;font-weight:700}
.st-mood-ico{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:17px;color:var(--v-accent);background:var(--surface);box-shadow:0 1px 2px #1c2d5f14,0 6px 14px -8px color-mix(in srgb,var(--v-accent) 60%,transparent)}
.st-mood:hover,.st-mood:focus-visible{transform:translateY(-2px);border-color:color-mix(in srgb,var(--v-accent) 50%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--v-accent) 45%,transparent),0 10px 22px -10px color-mix(in srgb,var(--v-accent) 50%,transparent)}
.st-mood[aria-pressed=true]{border-color:var(--v-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--v-accent) 55%,transparent)}

/* themes */
.st-surprise{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:6px 13px;font:inherit;font-size:12.5px;font-weight:650;cursor:pointer}
.st-surprise:hover{border-color:var(--v-accent);color:var(--v-accent)}
.st-themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:9px}
.st-theme{
  position:relative;display:grid;gap:7px;padding:7px 7px 9px;border-radius:13px;cursor:pointer;text-align:left;
  background:var(--surface);border:1px solid var(--line);color:var(--text);
  transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .2s ease,border-color .2s ease;
}
.st-theme-art{position:relative;display:block;height:52px;border-radius:9px;overflow:hidden;background:var(--b);border:1px solid color-mix(in srgb,var(--x) 8%,transparent)}
.st-theme-art::before{content:"";position:absolute;left:0;top:0;bottom:0;width:22%;background:var(--s);border-right:1px solid color-mix(in srgb,var(--x) 8%,transparent)}
.st-theme-art::after{content:"";position:absolute;left:5%;top:30%;width:3px;height:22%;border-radius:3px;background:var(--a)}
.st-theme-art i{position:absolute;border-radius:50%;border:2px solid var(--a);background:var(--w)}
.st-theme-art i:nth-child(1){width:26px;height:26px;left:36%;top:18%;box-shadow:0 0 12px color-mix(in srgb,var(--a) 40%,transparent)}
.st-theme-art i:nth-child(2){width:15px;height:15px;left:70%;top:14%;opacity:.8}
.st-theme-art i:nth-child(3){width:12px;height:12px;left:66%;top:58%;border-width:1.5px;opacity:.7}
.st-theme-name{font-size:12.5px;font-weight:650;padding:0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-theme-tick{position:absolute;right:11px;top:11px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;background:var(--a);opacity:0;transform:scale(.6);transition:.2s}
.st-theme:hover,.st-theme:focus-visible{transform:translateY(-2px);border-color:color-mix(in srgb,var(--a) 55%,var(--line));box-shadow:0 10px 22px -12px color-mix(in srgb,var(--a) 70%,transparent)}
.st-theme[aria-pressed=true]{border-color:var(--a);box-shadow:0 0 0 2px color-mix(in srgb,var(--a) 50%,transparent)}
.st-theme[aria-pressed=true] .st-theme-tick{opacity:1;transform:none}

/* motion */
.st-motion{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.st-motion button{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:inherit;font-size:13.5px;font-weight:650;cursor:pointer;transition:.18s}
.st-motion button span{font-size:16px;color:var(--v-accent)}

/* setting rows */
.st-row{display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr);gap:14px;align-items:center;padding:9px 0}
.st-row+.st-row{border-top:1px dashed var(--line2,var(--line))}
.st-row-label b{display:block;font-size:14px;font-weight:700;color:var(--text)}
.st-row-label small{display:block;font-size:12px;color:var(--muted);line-height:1.35;margin-top:2px}
.st-seg{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:12px;background:color-mix(in srgb,var(--v-wash) 60%,var(--bg));border:1px solid var(--line)}
.st-seg button{flex:1 1 auto;min-width:0;border:0;border-radius:9px;padding:8px 12px;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:650;cursor:pointer;transition:background .18s,color .18s,box-shadow .18s}
.st-seg button:hover{color:var(--text);background:color-mix(in srgb,var(--surface) 70%,transparent)}
.st-seg button[aria-checked=true],.st-motion button[aria-checked=true]{
  background:var(--surface);color:var(--text);
  box-shadow:0 1px 2px #1c2d5f18,0 0 0 1.5px var(--v-accent);
}
.st-motion button:hover{border-color:color-mix(in srgb,var(--v-accent) 50%,var(--line))}
.st-range{display:flex;align-items:center;gap:12px}
.st-range input{flex:1;accent-color:var(--v-accent)}
.st-aa{font-weight:700;color:var(--muted)}.st-aa.small{font-size:12px}.st-aa.big{font-size:19px}
.st-range output{min-width:44px;text-align:right;font-size:13px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.st-hour{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.st-hour select{border:1px solid var(--line);border-radius:9px;padding:6px 8px;background:var(--surface);color:var(--text);font:inherit;font-size:13px}

/* ------------------------------------------------------------ preview ----- */
.st-preview-col{position:sticky;top:0;display:grid;gap:14px}
.st-preview{
  --pa:#187bb1;--ptext:16;
  position:relative;overflow:hidden;border-radius:18px;background:var(--pbg);color:var(--pt);
  border:1px solid var(--pl);box-shadow:0 18px 44px -22px #1c2d5f55,0 2px 6px #1c2d5f10;
  transition:background .35s ease,color .35s ease,border-color .35s ease;
}
.st-mock-top{display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;background:var(--ps);border-bottom:1px solid var(--pl);transition:background .35s}
.st-dot{width:9px;height:9px;border-radius:50%;background:var(--pa)}
.st-mock-crumb{font-size:11px;font-weight:700;letter-spacing:-.01em}
.st-mock-pill{margin-left:auto;width:54px;height:14px;border-radius:999px;background:color-mix(in srgb,var(--pa) 18%,var(--ps))}
.st-preview[data-ambient=on] .st-mock-top{background:color-mix(in srgb,#e0659a 11%,var(--ps))}
.st-preview[data-ambient=on] .st-dot{background:#e0659a}
.st-mock-main{display:grid;grid-template-columns:56px 1fr;height:196px}
.st-mock-side{display:grid;align-content:start;gap:9px;padding:14px 10px;background:var(--ps);border-right:1px solid var(--pl)}
.st-mock-side i{position:relative;height:7px;border-radius:4px;background:color-mix(in srgb,var(--pt) 12%,transparent)}
.st-mock-side i.on{background:color-mix(in srgb,var(--pa) 22%,transparent)}
.st-mock-side i.on::before{content:"";position:absolute;left:-10px;top:-4px;bottom:-4px;width:3px;border-radius:2px;background:var(--pa)}
.st-mock-canvas{position:relative;overflow:hidden;transition:background .35s}
.st-preview[data-background=dots] .st-mock-canvas{background-image:radial-gradient(color-mix(in srgb,var(--pt) 22%,transparent) 1px,transparent 1.2px);background-size:12px 12px}
.st-preview[data-background=aurora] .st-mock-canvas{background:
  radial-gradient(60% 55% at 0% 0%,color-mix(in srgb,var(--pa) 22%,transparent),transparent 70%),
  radial-gradient(55% 60% at 100% 100%,color-mix(in srgb,#e0659a 16%,transparent),transparent 70%)}
.st-mock-lines{position:absolute;inset:0;width:100%;height:100%}
.st-mock-lines line{stroke:var(--pa);stroke-width:1.4;opacity:.25;vector-effect:non-scaling-stroke}
.st-mock-lines line.hot{opacity:.95;stroke-width:2}
.st-preview[data-line-flow=on]:not([data-motion=off]) .st-mock-lines line.hot{stroke-dasharray:6 7;animation:st-flow 1.6s linear infinite}
@keyframes st-flow{to{stroke-dashoffset:-26}}
.st-c,.st-you,.st-person{position:absolute;transform:translate(-50%,-50%);border-radius:50%}
.st-c{
  --c:var(--pa);--s:46px;--ga:18%;--gs:14px;
  width:var(--s);height:var(--s);background:color-mix(in srgb,var(--c) 10%,var(--ps));border:2.5px solid var(--c);
  box-shadow:0 0 var(--gs) calc(var(--gs)/5) color-mix(in srgb,var(--c) var(--ga),transparent);
  transition:width .35s cubic-bezier(.16,1,.3,1),height .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease;
}
.st-c-b{--c:#e0659a}.st-c-c{--c:#e3a13a}
.st-preview[data-glow=minimal] .st-c{--ga:5%;--gs:4px}
.st-preview[data-glow=strong] .st-c{--ga:48%;--gs:26px}
.st-preview[data-auto-importance=on] .st-c-a{--s:60px}
.st-preview[data-auto-importance=on] .st-c-c{--s:34px}
.st-preview[data-auto-importance=on] .st-c::after{content:attr(data-p);position:absolute;left:50%;top:calc(100% + 4px);transform:translateX(-50%);font-size:8.5px;font-weight:700;color:var(--pm);white-space:nowrap}
.st-you{width:30px;height:30px;display:grid;place-items:center;font-size:8px;font-weight:800;color:var(--pa);background:var(--ps);border:2px solid var(--pa)}
.st-person{width:15px;height:15px;background:var(--ps);border:1.5px solid color-mix(in srgb,var(--pt) 30%,transparent)}
.st-preview[data-motion=full] .st-c{animation:st-float 4.5s ease-in-out infinite}
.st-preview[data-motion=full] .st-c-b{animation-delay:-1.5s}.st-preview[data-motion=full] .st-c-c{animation-delay:-3s}
.st-preview[data-motion=subtle] .st-c{animation:st-float 9s ease-in-out infinite;--fy:-1.5px}
@keyframes st-float{50%{transform:translate(-50%,calc(-50% + var(--fy,-4px)))}}
.st-mock-card{margin:0 12px 12px;padding:6px;border-radius:12px;background:var(--ps);border:1px solid var(--pl);display:grid;gap:2px}
.st-mock-row{display:flex;align-items:center;gap:9px;padding:8px 8px;border-radius:9px;transition:padding .3s ease}
.st-preview[data-density=compact] .st-mock-row{padding:3px 8px}
.st-mock-row i{flex:none;width:5px;height:24px;border-radius:9px;background:var(--c)}
.st-mock-row b{display:block;font-size:calc(var(--ptext) * .72px);font-weight:700;line-height:1.25;transition:font-size .25s}
.st-mock-row small{display:block;font-size:calc(var(--ptext) * .6px);color:var(--pm);transition:font-size .25s}

/* explainer */
.st-explain{padding:16px 18px 17px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:0 1px 2px #1c2d5f0d;min-height:150px;transition:border-color .2s}
.st-explain:not(.is-chosen){border-color:color-mix(in srgb,var(--v-accent) 45%,var(--line));background:linear-gradient(170deg,color-mix(in srgb,var(--v-accent) 6%,var(--surface)),var(--surface) 70%)}
.st-explain-kicker{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--v-accent)}
.st-explain.is-chosen .st-explain-kicker{color:#1f9a6d}
.st-explain h4{margin:5px 0 6px;font-size:17px;font-weight:750;letter-spacing:-.015em;color:var(--text)}
.st-explain p{margin:0 0 11px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.st-where{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;color:var(--text);background:color-mix(in srgb,var(--v-wash) 70%,var(--bg));border-radius:999px;padding:5px 11px}
.st-where i{font-style:normal;color:var(--v-accent)}

@media(prefers-reduced-motion:reduce){.st-preview *{animation:none!important}}
@media(max-width:920px){
  .st-body{grid-template-columns:1fr;padding:14px 16px 6px!important}
  .st-preview-col{position:static;order:-1;grid-template-columns:1fr}
  .st-mock-main{height:150px}
  .st-explain{min-height:0}
  .st-moods{grid-template-columns:repeat(2,1fr)}
  .st-row{grid-template-columns:1fr}
}
.st-body:focus{outline:none}
.st-preview .st-mock-row b,.st-preview .st-mock-crumb,.st-preview .st-you{color:var(--pt)!important}.st-preview .st-mock-row small{color:var(--pm)!important}.st-preview .st-you{color:var(--pa)!important}

/* ---- Opening line: what greets you (saved to the account, not the device) */
.st-ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.st-ol-opt{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 6px 11px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);cursor:pointer;text-align:center;transition:transform .16s,border-color .16s,box-shadow .16s}
.st-ol-opt b{font-size:12.5px;font-weight:700;line-height:1.25}
.st-ol-ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:16px;color:var(--v-accent);background:color-mix(in srgb,var(--v-accent) 10%,var(--surface))}
.st-ol-opt:hover,.st-ol-opt:focus-visible{transform:translateY(-2px);border-color:color-mix(in srgb,var(--v-accent) 50%,var(--line))}
.st-ol-opt[aria-checked=true]{border-color:var(--v-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--v-accent) 55%,transparent);background:color-mix(in srgb,var(--v-accent) 6%,var(--surface))}
.st-ol-opt[aria-checked=true] .st-ol-ico{background:var(--v-accent);color:#fff}
.st-ol-words{display:grid;gap:10px;margin-top:12px;padding:14px;border-radius:14px;background:color-mix(in srgb,var(--v-accent) 5%,var(--surface));border:1px solid color-mix(in srgb,var(--v-accent) 22%,var(--line))}
.st-ol-words[hidden],.st-ol-words [hidden]{display:none!important}
.st-ol-words label{display:grid;gap:5px;font-size:12.5px;font-weight:650;color:var(--text)}
.st-ol-words label small{font-weight:400;color:var(--muted)}
.st-ol-words input{width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;font-size:14px;font-weight:400}
.st-ol-words input:focus{outline:none;border-color:var(--v-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--v-accent) 20%,transparent)}
.st-ol-save{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.st-ol-msg{font-size:12.5px;color:var(--muted)}
.st-ol-msg.bad{color:#c0392b;font-weight:600}
/* the line itself, in the miniature */
.st-mock-line{display:flex;align-items:center;gap:8px;margin:7px 9px 0;padding:7px 10px;border-radius:9px;color:#fff;background:linear-gradient(120deg,var(--pa),color-mix(in srgb,var(--pa) 62%,#1d2b3e));box-shadow:0 6px 14px -8px var(--pa);animation:stLineIn .28s ease both}
.st-mock-line[hidden]{display:none}
.st-mock-line i{font-style:normal;font-size:12px;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;background:#ffffff2e;flex:none}
.st-mock-line span{display:grid;min-width:0}
.st-mock-line small{font-size:8px;letter-spacing:.09em;text-transform:uppercase;opacity:.85}
.st-mock-line small:empty{display:none}
.st-mock-line b{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff!important}
@keyframes stLineIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media(max-width:760px){.st-ol{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Shown only when the device asks for reduced motion (see deviceStill). */
.st-device-still{margin:10px 0 0;padding:11px 13px;border-radius:12px;border:1px solid color-mix(in srgb,#d97706 45%,var(--line));background:color-mix(in srgb,#f59e0b 10%,var(--surface));font-size:12.5px;line-height:1.5;color:var(--text)}
.st-device-still b{display:block;margin-bottom:3px}
.st-device-still span{display:block;padding-left:10px;color:var(--muted)}
.st-device-still i{font-style:normal;font-weight:650;color:var(--text)}
.st-device-still .btn{display:block;margin-top:9px}
.st-device-still.on{border-color:color-mix(in srgb,var(--v-accent) 40%,var(--line));background:color-mix(in srgb,var(--v-accent) 8%,var(--surface))}

/* Living background preview: v13-ambient.js animates it live in the mock. */
.st-mock-canvas > canvas.vx-amb-pv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}