/* =====================================================================
   toolgrid.css — WexTools per-family tools grid (#wex-tools)
   Fan Deck look: white card stock, 1px hairlines, no shadows.
   Scoped under .wxt — no global selectors.
   ===================================================================== */

.wxt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1000px) { .wxt { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .wxt { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 621px)  { .wxt-card.x2 { grid-column: span 2; } }

/* grid-wide section header — injected by toolgrid.js before the cards */
.wxt-hd {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 0 2px 4px;
}
.wxt-hd b    { font: 700 .95rem var(--font); }
.wxt-hd span { font: 600 .78rem var(--font); color: var(--ink-2); }

.wxt-card {
  --wxa: #2f5dff;            /* tool accent — set by toolgrid.js */
  --wxi: #fff;               /* ink on accent */
  background: #fff;
  border: 1px solid var(--line, #e3e4ea);
  border-radius: 22px;
  overflow: hidden;
  display: flex; flex-direction: column;
  min-width: 0;
  transition: border-color .2s ease;
}
.wxt-card:hover { border-color: #c6cdd8; }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .wxt-card:hover { border-color: color-mix(in srgb, var(--wxa) 55%, #fff); }
}

/* inset illustration area — sits inside the card's white padding like Tangerine */
.wxt-demo {
  position: relative; height: 168px; flex: none;
  margin: 10px 10px 0; border-radius: 14px;
  background: #f4f4f6; overflow: hidden;
  -webkit-user-select: none; user-select: none;
}
.wxt-demo.dk { background: #141414; color: #fff; }
.wxt-demo.act { cursor: pointer; }
.wxt-demo.act:not(.dk):hover { background: #eceef3; }
.wxt-demo.act:focus-visible { outline: 2px solid #2f5dff; outline-offset: -2px; }
.wxt-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wxt-dim  { filter: brightness(.52) saturate(.85); }

.wxt-foot { padding: 15px 17px 16px; display: flex; flex-direction: column; gap: 7px; }
.wxt-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wxt-ic   { width: 19px; height: 19px; flex: none; color: var(--wxa); }
.wxt-name { font-weight: 700; font-size: 1.05rem; line-height: 1.2; letter-spacing: -.01em; }
.wxt-code {
  margin-left: auto; flex: none;
  font-size: .66rem; font-weight: 800; letter-spacing: .07em; line-height: 1;
  color: #5b6270; background: #f4f4f6;
  border: 1px solid var(--line, #e3e4ea); border-radius: 999px; padding: 4px 7px 3px;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .wxt-code {
    color: color-mix(in srgb, var(--wxa) 80%, #141414);
    background: color-mix(in srgb, var(--wxa) 8%, #fff);
    border-color: color-mix(in srgb, var(--wxa) 45%, #fff);
  }
}
.wxt-desc {
  margin: 0; font-size: .84rem; line-height: 1.35; color: var(--ink-2, #4a4f5a);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.35em;
}
.wxt-det {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  margin-top: 3px; font-size: .8rem; font-weight: 700; line-height: 1;
  color: var(--wxa, #2f5dff); text-decoration: none;
  border-radius: 6px; padding: 3px 2px;
}
.wxt-det:hover { text-decoration: underline; text-underline-offset: 3px; }
.wxt-det:focus-visible { outline: 2px solid var(--wxa, #2f5dff); outline-offset: 2px; }
.wxt-det-ic { width: 14px; height: 14px; transition: transform .18s var(--ease, ease); }
.wxt-det:hover .wxt-det-ic { transform: translate(2px, -2px); }

/* ---------- shared controls ---------- */
.wx-btn {
  position: absolute; right: 10px; bottom: 10px; z-index: 8;
  font-family: inherit; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  color: #fff; background: #141414; border: 0; border-radius: 999px; padding: 8px 13px;
  cursor: pointer; transition: transform .18s ease, opacity .18s ease;
}
.wx-btn:hover { transform: translateY(-1px); }
.wx-btn:disabled { opacity: .55; cursor: default; transform: none; }
.dk .wx-btn { background: #fff; color: #141414; }

.wx-ctl { position: absolute; left: 12px; right: 12px; bottom: 11px; z-index: 8; display: flex; align-items: center; gap: 8px; }
.wx-ctl .wx-btn { position: static; flex: none; }

.wx-pills { position: absolute; left: 10px; bottom: 10px; z-index: 8; display: flex; gap: 5px; }
.wx-pill {
  font-family: inherit; font-size: .68rem; font-weight: 700; color: #141414;
  background: #fff; border: 1px solid var(--line, #e3e4ea); border-radius: 999px;
  padding: 5px 9px; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.wx-pill.on { background: var(--wxa); border-color: var(--wxa); color: var(--wxi); }
.dk .wx-pill { background: #1e222b; color: #e8eaf0; border-color: #39404d; }
.dk .wx-pill.on { background: var(--wxa); border-color: var(--wxa); color: var(--wxi); }

.wx-hint {
  position: absolute; left: 10px; top: 9px; z-index: 5;
  font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #5b6270; background: rgb(255 255 255 / .85); border-radius: 6px; padding: 3px 7px;
  transition: opacity .3s ease;
}
.dk .wx-hint { color: #c9cfd9; background: rgb(255 255 255 / .12); }
.wxt-demo.has .wx-hint { opacity: 0; }

.wx-adone {
  position: absolute; right: 12px; bottom: 15px; z-index: 7;
  display: flex; align-items: center; gap: 4px;
  font-size: .64rem; font-weight: 800; color: #14a06c;
  opacity: 0; transition: opacity .3s ease;
}
.wx-adone.on { opacity: 1; }
.wx-adone svg { width: 12px; height: 12px; }

.wx-time { position: absolute; left: 12px; bottom: 12px; z-index: 5; font-size: .68rem; font-weight: 700; color: #e8eaf0; }

/* ---------- waveform bars ---------- */
.wx-wave { display: flex; align-items: flex-end; gap: 2px; }
.wx-wave i {
  flex: 1; min-width: 2px; height: var(--h, 52%);
  background: var(--wxa); border-radius: 2px;
  transition: height .45s ease, opacity .3s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}
.wx-wave i:nth-child(3n)    { --h: 72%; }
.wx-wave i:nth-child(4n+1)  { --h: 36%; }
.wx-wave i:nth-child(5n+2)  { --h: 84%; }
.wx-wave i:nth-child(7n)    { --h: 58%; }
.wx-wave i:nth-child(7n+3)  { --h: 24%; }
.wx-wave i:nth-child(11n)   { --h: 90%; }
.wx-wave i:nth-child(13n+5) { --h: 44%; }
.wx-wbg { position: absolute; left: 12px; right: 12px; top: 12px; height: 26px; opacity: .55; }

/* ---------- file / doc tiles ---------- */
.wx-dtile {
  background: #fff;
  border: 1px solid var(--line, #e3e4ea); border-top: 2px solid var(--c, var(--line, #e3e4ea));
  border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: 6px;
}
.wx-dtile svg { width: 16px; height: 16px; color: var(--c, var(--wxa)); }
.wx-dtile b   { font-size: .58rem; font-weight: 700; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-dtile i   { font-size: .52rem; font-style: normal; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c, #9aa3b2); }

.wx-mimg, .wx-mtile {
  position: absolute; right: 12px; top: 12px; width: 64px; height: 56px;
  border-radius: 9px; border: 1px solid var(--line, #e3e4ea);
}
.wx-mimg  { object-fit: cover; }
.wx-mtile { background: var(--c, var(--wxa)); color: var(--ci, var(--wxi)); display: grid; place-items: center; border: 0; }
.wx-mtile svg { width: 22px; height: 22px; }

/* ---------- crop ---------- */
.wx-cropf {
  position: absolute; left: 16%; top: 14%; width: 54%; height: 58%; z-index: 4;
  border: 2px solid var(--wxa); border-radius: 3px;
  outline: 400px solid rgb(12 14 20 / .42);
  cursor: grab; touch-action: none;
}
.wx-cropf:active { cursor: grabbing; }
.wx-cropf i { position: absolute; width: 10px; height: 10px; background: #fff; border: 2px solid var(--wxa); border-radius: 50%; }
.wx-cropf i[data-c="nw"] { left: -7px; top: -7px; cursor: nwse-resize; }
.wx-cropf i[data-c="ne"] { right: -7px; top: -7px; cursor: nesw-resize; }
.wx-cropf i[data-c="sw"] { left: -7px; bottom: -7px; cursor: nesw-resize; }
.wx-cropf i[data-c="se"] { right: -7px; bottom: -7px; cursor: nwse-resize; }
.wx-cropdim {
  position: absolute; left: 10px; top: 9px; z-index: 5;
  font-size: .68rem; font-weight: 800; color: #fff;
  background: #141414; border-radius: 6px; padding: 3px 8px;
  font-variant-numeric: tabular-nums;
}

/* ---------- add background ---------- */
.wx-plate { position: absolute; inset: 0; display: grid; place-items: center; transition: background .4s ease; }
.wx-plate img { width: 62%; max-height: 70%; object-fit: contain; border-radius: 8px; }
/* presets are the real abstract plates in /img/bg/ (bg-presets.js list) */
.wx-plate[data-p] { background: #141414 center / cover no-repeat; }
.wx-plate[data-p="aurora"]   { background-image: url("/img/bg/aurora.webp"); }
.wx-plate[data-p="ocean"]    { background-image: url("/img/bg/ocean.webp"); }
.wx-plate[data-p="sunset"]   { background-image: url("/img/bg/sunset.webp"); }
.wx-plate[data-p="grape"]    { background-image: url("/img/bg/grape.webp"); }
.wx-plate[data-p="mint"]     { background-image: url("/img/bg/mint.webp"); }
.wx-plate[data-p="sand"]     { background-image: url("/img/bg/sand.webp"); }
.wx-plate[data-p="rose"]     { background-image: url("/img/bg/rose.webp"); }
.wx-plate[data-p="graphite"] { background-image: url("/img/bg/graphite.webp"); }
.wx-sw { position: absolute; left: 10px; bottom: 10px; z-index: 6; display: flex; gap: 6px; }
.wx-sw button { width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 2px solid #fff; cursor: pointer; }
.wx-sw button.on { outline: 2px solid #141414; outline-offset: 1px; }
.wx-sw [data-p] { background: #141414 center / cover no-repeat; }
.wx-sw [data-p="aurora"]   { background-image: url("/img/bg/aurora.webp"); }
.wx-sw [data-p="ocean"]    { background-image: url("/img/bg/ocean.webp"); }
.wx-sw [data-p="sunset"]   { background-image: url("/img/bg/sunset.webp"); }
.wx-sw [data-p="grape"]    { background-image: url("/img/bg/grape.webp"); }
.wx-sw [data-p="mint"]     { background-image: url("/img/bg/mint.webp"); }
.wx-sw [data-p="sand"]     { background-image: url("/img/bg/sand.webp"); }
.wx-sw [data-p="rose"]     { background-image: url("/img/bg/rose.webp"); }
.wx-sw [data-p="graphite"] { background-image: url("/img/bg/graphite.webp"); }
.wx-bgname {
  position: absolute; left: 10px; top: 9px; z-index: 5;
  font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: rgb(16 18 24 / .6); border-radius: 6px; padding: 3px 7px;
}

/* ---------- compress ---------- */
.wx-cthumb {
  position: absolute; left: 12px; top: 14px; width: 58px; height: 52px;
  object-fit: cover; border-radius: 10px; border: 1px solid var(--line, #e3e4ea);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.wx-ctile {
  position: absolute; left: 12px; top: 14px; width: 58px; height: 52px;
  border-radius: 10px; background: var(--c, var(--wxa)); color: var(--ci, var(--wxi));
  display: grid; place-items: center;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.wx-ctile svg { width: 22px; height: 22px; }
.done .wx-cthumb, .done .wx-ctile { transform: scale(.86) rotate(-3deg); }
.wx-cmid { position: absolute; left: 80px; right: 12px; top: 17px; z-index: 4; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wx-fname { font-size: .76rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-crow  { display: flex; align-items: baseline; gap: 7px; }
.wx-cval  { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wx-cold  { font-size: .7rem; color: #9aa3b2; opacity: 0; transition: opacity .3s; }
.wx-csaved {
  font-size: .6rem; font-weight: 800; font-style: normal;
  color: #fff; background: #14a06c; border-radius: 5px; padding: 2px 6px;
  opacity: 0; transform: scale(.7); transition: opacity .3s, transform .3s;
}
.done .wx-cold, .done .wx-csaved { opacity: 1; transform: none; }
.wx-cbar { flex: 1; height: 8px; background: #e8e9ee; border-radius: 99px; overflow: hidden; }
.wx-cbar i { display: block; height: 100%; width: 100%; background: var(--wxa); border-radius: 99px; }

/* ---------- redact / annotate ---------- */
.wx-rbox {
  position: absolute; z-index: 4;
  background: rgb(16 18 24 / .82); border-radius: 4px;
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.wx-pin {
  position: absolute; z-index: 5; width: 20px; height: 20px; margin: -10px;
  border-radius: 50%; background: var(--wxa); color: var(--wxi);
  border: 2px solid #fff; font-size: .6rem; font-weight: 800;
  display: grid; place-items: center;
}
@media (prefers-reduced-motion: no-preference) {
  .wx-rbox, .wx-pin { animation: wx-pop .25s ease-out; }
}
@keyframes wx-pop { from { transform: scale(.5); opacity: 0; } }

/* ---------- resize ---------- */
.wx-rframe { position: absolute; left: 16%; right: 16%; top: 10px; bottom: 42px; border: 1.5px dashed #c6cdd8; border-radius: 10px; overflow: hidden; }
.wx-rimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.wx-rdim {
  position: absolute; left: 10px; top: 9px; z-index: 5;
  font-size: .68rem; font-weight: 800; color: #fff; background: #141414;
  border-radius: 6px; padding: 3px 8px; font-variant-numeric: tabular-nums;
}

/* ---------- metadata ---------- */
.wx-exif { position: absolute; left: 10px; top: 10px; z-index: 4; display: flex; flex-direction: column; gap: 4px; max-width: calc(100% - 92px); }
.wx-exif b {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  background: #fff; border: 1px solid var(--line, #e3e4ea); border-radius: 7px;
  padding: 4px 8px; font-size: .64rem; font-weight: 600;
  transition: opacity .35s ease;
}
.wx-exif i { flex: none; font-style: normal; font-size: .56rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #9aa3b2; min-width: 46px; }
.wx-exif u { text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s; }
.wx-exif.stripped b { opacity: .55; }
.wx-exif.stripped u { text-decoration: line-through; color: #c6cdd8; }

/* ---------- adjust ---------- */
.wx-slider {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 6;
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line, #e3e4ea); border-radius: 10px; padding: 8px 10px;
}
.wx-slider span { flex: none; font-size: .58rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #5b6270; }
.wx-slider input { flex: 1; min-width: 0; height: 14px; accent-color: var(--wxa); cursor: pointer; }
.wx-slider b { flex: none; min-width: 36px; text-align: right; font-size: .68rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- QR ---------- */
.wx-qrbox {
  position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -48px; width: 96px; height: 92px; z-index: 3;
  border: 2px dashed #c6cdd8; border-radius: 10px; display: grid; place-items: center;
  transition: border-color .3s;
}
.wx-qr { width: 84px; height: 84px; border-radius: 3px; opacity: 0; transform: scale(.85); transition: opacity .4s, transform .4s; }
.wx-qrhint { position: absolute; font-style: normal; font-size: .6rem; font-weight: 800; letter-spacing: .1em; color: #9aa3b2; transition: opacity .3s; }
.wx-qrtag {
  position: absolute; left: 12px; bottom: 13px; z-index: 5;
  font-size: .62rem; font-weight: 700; color: #fff; background: #141414;
  border-radius: 6px; padding: 4px 8px;
  opacity: 0; transform: translateY(5px); transition: opacity .35s .12s, transform .35s .12s;
}
.done .wx-qrbox { border-style: solid; border-color: #141414; }
.done .wx-qr { opacity: 1; transform: none; }
.done .wx-qrhint { opacity: 0; }
.done .wx-qrtag { opacity: 1; transform: none; }

/* ---------- tags ---------- */
.wx-tgpanel {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 6;
  background: #fff; border: 1px solid var(--line, #e3e4ea); border-radius: 10px;
  padding: 7px 9px; display: flex; flex-direction: column; gap: 6px;
}
.wx-chips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 20px; }
.wx-chip {
  font-family: inherit; font-size: .66rem; font-weight: 700; color: #141414;
  background: #f4f4f6; border: 1px solid var(--line, #e3e4ea); border-radius: 999px;
  padding: 3px 8px; cursor: pointer;
  transition: opacity .15s, transform .15s;
}
.wx-chip::after { content: "×"; margin-left: 5px; color: #9aa3b2; }
.wx-chip.out { opacity: 0; transform: scale(.8); }
.wx-tinput {
  border: 0; border-top: 1px solid var(--line, #e3e4ea); padding: 6px 1px 0;
  font-family: inherit; font-size: .72rem; width: 100%; background: transparent; color: inherit;
}
.wx-tinput:focus { outline: none; }
.wx-tinput::placeholder { color: #9aa3b2; }

/* ---------- mute ---------- */
.wx-vmid { position: absolute; left: 14px; right: 14px; top: 50%; transform: translateY(-62%); height: 34px; z-index: 3; }
.wx-mlab {
  position: absolute; left: 10px; top: 9px; z-index: 5;
  font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #c9cfd9;
}
.muted .wx-vmid i { --h: 9%; opacity: .3; }

/* ---------- snapshot ---------- */
.wx-film { position: absolute; left: 10px; right: 10px; bottom: 8px; z-index: 6; display: flex; gap: 6px; }
.wx-sfr { flex: 1; height: 32px; padding: 0; border: 2px solid transparent; border-radius: 7px; overflow: hidden; cursor: pointer; background: none; transition: border-color .2s; }
.wx-sfr.on { border-color: #fff; }
.wx-sfr img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wx-shot {
  position: absolute; right: 10px; top: 10px; width: 98px; z-index: 7;
  background: #fff; border: 1px solid var(--line, #e3e4ea); border-radius: 9px; padding: 5px;
  opacity: 0; transform: translateY(-6px) scale(.92);
  transition: opacity .3s, transform .3s cubic-bezier(.16, 1, .3, 1);
}
.wx-shot.pop { opacity: 1; transform: none; }
.wx-shot img { width: 100%; height: 44px; object-fit: cover; border-radius: 5px; }
.wx-shot b { display: block; margin-top: 4px; font-size: .56rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv1 { filter: none; }
.fv2 { filter: brightness(.82) hue-rotate(-14deg); }
.fv3 { filter: saturate(1.6) hue-rotate(16deg); }
.fv4 { filter: brightness(.68) contrast(1.25) saturate(.7); }

/* ---------- trim / split timelines ---------- */
.wx-fstrip { position: absolute; left: 12px; right: 12px; top: 46px; height: 30px; display: flex; gap: 4px; z-index: 2; }
.wx-fstrip img { flex: 1; min-width: 0; height: 100%; object-fit: cover; border-radius: 4px; }
.wx-fstrip .wx-wave { flex: 1; height: 100%; }
.wx-tl {
  position: absolute; left: 12px; right: 12px; top: 90px; height: 22px; z-index: 4;
  background: rgb(255 255 255 / .14); border-radius: 7px; touch-action: none;
}
.wx-tr { position: absolute; top: 0; bottom: 0; left: var(--a, 0%); width: calc(var(--b, 100%) - var(--a, 0%)); background: var(--wxa); opacity: .5; border-radius: 7px; }
.wx-h {
  position: absolute; top: 50%; width: 12px; height: 26px; margin: -13px 0 0 -6px; z-index: 2;
  background: #fff; border: 2px solid var(--wxa); border-radius: 6px; padding: 0; cursor: ew-resize;
}
.wx-h[data-h="a"] { left: var(--a, 0%); }
.wx-h[data-h="b"] { left: var(--b, 100%); }
.wx-stl { display: flex; gap: 2px; background: none; cursor: crosshair; }
.wx-sp {
  display: grid; place-items: center; min-width: 0;
  font-size: .6rem; font-weight: 800; color: #fff;
  border-radius: 5px; overflow: hidden; white-space: nowrap;
}
.wx-sp.a { width: var(--at, 50%); background: var(--wxa); }
.wx-sp.b { flex: 1; background: #39404d; }
.wx-smark { position: absolute; left: var(--at, 50%); top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: #fff; border-radius: 2px; }

/* ---------- speed ---------- */
.wx-strack { position: absolute; left: 14px; right: 14px; top: 88px; height: 5px; background: rgb(255 255 255 / .18); border-radius: 99px; z-index: 3; }
.wx-sdot {
  position: absolute; top: 50%; left: 0; width: 13px; height: 13px; margin: -6.5px 0 0 -6px;
  border-radius: 50%; background: var(--wxa); border: 2px solid #fff;
}
@media (prefers-reduced-motion: no-preference) {
  .wx-sdot { animation: wx-play var(--spd, 1.5s) linear infinite alternate; }
}
@keyframes wx-play { to { left: 100%; } }
.wx-stime { position: absolute; left: 12px; top: 48px; z-index: 4; display: flex; gap: 8px; align-items: baseline; }
.wx-stime s { color: #8b93a2; font-size: .66rem; }
.wx-stime b { color: #fff; font-size: .88rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- join ---------- */
.wx-jrow { position: absolute; left: 12px; right: 12px; top: 38px; z-index: 3; display: flex; gap: 6px; }
.wx-jc {
  flex: 1; min-width: 0; height: 52px; padding: 0 8px;
  background: #262b35; border: 1px solid #39404d; border-radius: 8px;
  display: flex; flex-direction: column; justify-content: center;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .35s;
}
.wx-jc b { font-size: .58rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-jc i { font-size: .54rem; font-style: normal; color: #9aa3b2; }
.wx-jout {
  position: absolute; left: 12px; right: 12px; top: 38px; height: 52px; z-index: 4;
  background: var(--wxa); border-radius: 8px; padding: 0 12px;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: scale(.88);
  transition: opacity .4s .1s, transform .45s cubic-bezier(.16, 1, .3, 1) .1s;
}
.wx-jout b { color: #fff; font-size: .64rem; }
.wx-jout i { font-style: normal; font-size: .56rem; color: rgb(255 255 255 / .85); }
.done .wx-jrow .wx-jc { transform: translateX(var(--jx, 0)) scale(.7); opacity: 0; }
.done .wx-jout { opacity: 1; transform: none; }

/* ---------- normalize / visualize / channels ---------- */
.wx-norm { position: absolute; left: 12px; right: 12px; top: 38px; height: 52px; z-index: 3; }
.wx-lufs {
  position: absolute; top: 9px; right: 10px; z-index: 4;
  font-size: .64rem; font-weight: 800; color: #5b6270;
  background: #fff; border: 1px solid var(--line, #e3e4ea); border-radius: 6px; padding: 3px 7px;
  transition: color .3s;
}
.leveled .wx-lufs { color: #14a06c; }
.leveled .wx-norm i { --h: 66%; }

.wx-vout {
  position: absolute; left: 12px; right: 12px; top: 12px; bottom: 44px; z-index: 3;
  border: 2px dashed #c6cdd8; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  transition: border-color .3s;
}
.wx-viz { width: 78%; height: 40px; }
.wx-viz i { transform: scaleY(0); transform-origin: bottom; transition-delay: calc(var(--i, 0) * 22ms); }
.on .wx-vout { border-style: solid; border-color: var(--wxa); }
.on .wx-viz i { transform: scaleY(1); }
.wx-vout b { font-size: .58rem; font-weight: 800; color: #9aa3b2; transition: color .3s; }
.on .wx-vout b { color: #141414; }

.wx-chs { position: absolute; left: 12px; right: 12px; top: 42px; z-index: 3; display: flex; flex-direction: column; gap: 8px; transition: gap .4s; }
.wx-ch  { height: 24px; transition: height .45s cubic-bezier(.16, 1, .3, 1), opacity .3s; }
.mono .wx-chs { gap: 0; }
.mono .ch1 { height: 34px; }
.mono .ch2 { height: 0; opacity: 0; }
.wx-chtag { position: absolute; left: 12px; bottom: 13px; z-index: 4; font-size: .66rem; font-weight: 800; color: #5b6270; }

/* ---------- bleep ---------- */
.wx-cap { position: absolute; left: 12px; right: 12px; top: 62px; z-index: 4; font-size: .95rem; font-weight: 600; color: #fff; line-height: 1.4; }
.wx-word {
  position: relative; font: inherit; color: #ffc21a; background: none; border: 0;
  border-bottom: 1.5px dashed rgb(255 255 255 / .45); padding: 0 1px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.wx-word.bleeped { color: transparent; border-bottom-color: transparent; }
.wx-word.bleeped::before { content: ""; position: absolute; inset: -1px -3px; background: #000; border-radius: 3px; }
.wx-bcount { position: absolute; left: 12px; bottom: 12px; z-index: 4; font-size: .64rem; font-weight: 800; color: #9aa3b2; }
.wx-bcount b { color: #ffc21a; }

/* ---------- pdf split / merge / pages ---------- */
.wx-pdoc { position: absolute; left: 50%; top: 38px; margin-left: -47px; width: 94px; height: 58px; z-index: 3; transition: transform .45s ease, opacity .4s; }
.done .wx-pdoc { transform: scale(.82); opacity: .35; }
.wx-pfan { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.wx-pp {
  position: absolute; left: 50%; top: 46px; width: 48px; height: 56px; margin-left: -24px;
  background: #fff; border: 1px solid var(--line, #e3e4ea); border-radius: 6px;
  display: grid; place-items: center;
  font-size: .66rem; font-weight: 800; font-style: normal; color: #141414;
  opacity: 0; transform: translateY(14px); transform-origin: 50% 150%;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .3s;
}
.done .wx-pp { opacity: 1; }
.done .wx-pp:nth-child(1) { transform: rotate(-16deg); }
.done .wx-pp:nth-child(2) { transform: rotate(0deg); }
.done .wx-pp:nth-child(3) { transform: rotate(16deg); }

.wx-mrow { position: absolute; left: 12px; right: 12px; top: 40px; z-index: 3; display: flex; justify-content: center; gap: 6px; }
.wx-mrow .wx-dtile { width: 70px; height: 54px; transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .35s; }
.wx-mout {
  position: absolute; left: 50%; top: 40px; width: 150px; height: 54px; margin-left: -75px; z-index: 4;
  opacity: 0; transform: scale(.85);
  transition: opacity .4s .1s, transform .45s cubic-bezier(.16, 1, .3, 1) .1s;
}
.done .wx-mrow .wx-dtile { transform: translateX(var(--jx, 0)) scale(.65); opacity: 0; }
.done .wx-mout { opacity: 1; transform: none; }

.wx-psrc { position: absolute; left: 14px; top: 40px; width: 76px; height: 60px; z-index: 3; transition: opacity .4s; }
.done .wx-psrc { opacity: .35; }
.wx-pth { position: absolute; right: 12px; top: 40px; z-index: 4; display: flex; gap: 5px; }
.wx-pth i {
  width: 28px; height: 38px;
  background: #fff; border: 1px solid var(--line, #e3e4ea); border-radius: 5px;
  display: grid; place-items: center;
  font-size: .62rem; font-weight: 800; font-style: normal; color: #141414;
  opacity: 0; transform: translateY(12px) rotate(6deg);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .3s;
}
.done .wx-pth i { opacity: 1; transform: none; }
.done .wx-pth i:nth-child(2) { transition-delay: .07s; }
.done .wx-pth i:nth-child(3) { transition-delay: .14s; }
.done .wx-pth i:nth-child(4) { transition-delay: .21s; }

/* ---------- archive extract ---------- */
.wx-zip { position: absolute; left: 50%; top: 38px; margin-left: -56px; width: 112px; height: 56px; z-index: 3; transition: transform .4s ease, opacity .35s; }
.done .wx-zip { transform: scale(.9); opacity: .4; }
.wx-xfold {
  position: absolute; left: 12px; right: 12px; bottom: 40px; z-index: 4;
  display: flex; align-items: center; gap: 5px; overflow: hidden;
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s, transform .4s cubic-bezier(.16, 1, .3, 1);
}
.wx-xfold b { flex: none; font-size: .6rem; font-weight: 800; color: #141414; }
.wx-xc {
  font-size: .56rem; font-weight: 600; font-style: normal; white-space: nowrap;
  background: #fff; border: 1px solid var(--line, #e3e4ea); border-radius: 5px; padding: 3px 6px;
  opacity: 0; transform: scale(.6);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), opacity .25s;
}
.done .wx-xfold { opacity: 1; transform: none; }
.done .wx-xc { opacity: 1; transform: none; }
.done .wx-xc:nth-of-type(2) { transition-delay: .06s; }
.done .wx-xc:nth-of-type(3) { transition-delay: .12s; }
.done .wx-xc:nth-of-type(4) { transition-delay: .18s; }
.done .wx-xc:nth-of-type(5) { transition-delay: .24s; }

/* ---------- convert flip (doc / sub) ---------- */
.wx-flip { position: absolute; inset: 10px 0 38px; z-index: 3; display: grid; place-items: center; perspective: 420px; }
.wx-flip .wx-dtile {
  grid-area: 1 / 1; width: 98px; height: 60px;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}
.wx-fb { transform: rotateY(180deg); }
.done .wx-ff { transform: rotateY(-180deg); }
.done .wx-fb { transform: rotateY(0deg); }
.wx-cvlab {
  position: absolute; left: 50%; bottom: 13px; transform: translateX(-50%); z-index: 4;
  font-size: .66rem; font-weight: 800; color: #5b6270; white-space: nowrap;
}

/* ---------- file actions ---------- */
.wx-achip {
  position: absolute; left: 12px; bottom: 14px; z-index: 3;
  display: flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--line, #e3e4ea); border-radius: 7px; padding: 6px 9px;
  font-size: .64rem; font-weight: 700; color: #141414;
  transition: opacity .3s;
}
.wx-achip svg { width: 14px; height: 14px; color: var(--wxa); }
.wx-afly {
  position: absolute; z-index: 6; width: 26px; height: 26px;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line, #e3e4ea); border-radius: 7px;
  opacity: 0;
}
.wx-afly svg { width: 15px; height: 15px; color: var(--wxa); }
.wx-atgt, .wx-afold {
  position: absolute; right: 12px; top: 12px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 2px; color: #5b6270;
}
.wx-atgt svg, .wx-afold svg { width: 24px; height: 24px; }
.wx-atgt b, .wx-afold b { font-size: .54rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.wx-afold i { font-size: .54rem; font-style: normal; color: #9aa3b2; }

.wx-awin {
  position: absolute; left: 12px; right: 12px; top: 28px; z-index: 3;
  background: #fff; border: 1px solid var(--line, #e3e4ea); border-radius: 9px; overflow: hidden;
}
.wx-awbar { display: flex; align-items: center; gap: 4px; background: #f4f4f6; padding: 5px 8px; }
.wx-awbar i { width: 6px; height: 6px; border-radius: 50%; background: #c6cdd8; }
.wx-awbar b { margin-left: 4px; font-size: .56rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #5b6270; }
.wx-aline { display: flex; align-items: center; padding: 7px 9px; min-height: 16px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .66rem; }
.wx-caret { flex: none; width: 2px; height: 11px; margin-left: 2px; background: #2f5dff; }
@media (prefers-reduced-motion: no-preference) {
  .wx-caret { animation: wx-blink 1.1s steps(1) infinite; }
}
@keyframes wx-blink { 50% { opacity: 0; } }

.wx-twin { background: #141414; border-color: #262b35; }
.wx-twin .wx-awbar { background: #1e222b; }
.wx-twin .wx-awbar i { background: #39404d; }
.wx-twin .wx-awbar b { color: #9aa3b2; }
.wx-tline { gap: 6px; color: #e8eaf0; }
.wx-tline b { color: #12b5c9; font-weight: 600; white-space: nowrap; }
.wx-tcmd { white-space: nowrap; overflow: hidden; }
.wx-twin .wx-caret { background: #e8eaf0; }
.wx-tout { padding: 0 9px 7px; font-family: ui-monospace, Consolas, monospace; font-size: .58rem; font-weight: 600; color: #14a06c; opacity: 0; transition: opacity .3s; }
.wx-tout.on { opacity: 1; }

.wx-ewin { opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .3s ease, transform .35s cubic-bezier(.16, 1, .3, 1); }
.wx-ewin.on { opacity: 1; transform: none; }
.wx-erow { display: flex; align-items: center; gap: 6px; padding: 5px 9px; font-size: .62rem; font-weight: 600; color: #141414; transition: background .25s, color .25s; }
.wx-erow svg { width: 13px; height: 13px; flex: none; color: #5b6270; }
.wx-erow.sel { background: #2f5dff; color: #fff; }
.wx-erow.sel svg { color: #fff; }

/* ---------- reduced motion: everything degrades to instant states ---------- */
@media (prefers-reduced-motion: reduce) {
  .wxt *, .wxt *::before, .wxt *::after { animation: none !important; transition: none !important; }
}