/* ==========================================================================
   tooldemo.css - styles for js/tooldemo.js (18 per-tool interactive demos).
   Everything namespaced under .atl-demo. The demo is a dark rounded plate
   that sits on light or dark sections alike.
   PERF LAW: no backdrop-filter, no filter anywhere in this file; faux-glass
   fills only (rgba layers + 1px rgba borders). Transitions are transform /
   opacity / width / background-color only, all short and user-triggered.
   Accent comes from --dhex / --dhex-12 / --dhex-22 / --dhex-45, set inline
   per mount from the tool's hex in tooldata.js.
   ========================================================================== */

.atl-demo{
  --dhex:#5B7CFA;
  --dhex-12:rgba(91,124,250,.12);
  --dhex-22:rgba(91,124,250,.22);
  --dhex-45:rgba(91,124,250,.45);
  position:relative;
  container-type:inline-size;
  width:100%;
  border-radius:22px;
  color:#EFF0F2;
  font-family:var(--font,"Aeonik","Helvetica Neue",Arial,sans-serif);
  background:
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015) 30%,rgba(0,0,0,0) 60%),
    linear-gradient(180deg,#12151b,#0e1116);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 48px rgba(2,6,14,.35);
  overflow:hidden;
  text-align:left;
}
.atl-demo *{box-sizing:border-box}
.atl-demo button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.atl-demo button:focus-visible,
.atl-demo input:focus-visible{outline:2px solid var(--dhex);outline-offset:2px;border-radius:6px}

/* ------------------------------------------------------------------ header */
.ad-head{display:flex;align-items:center;gap:10px;padding:13px 16px;
  border-bottom:1px solid rgba(255,255,255,.08)}
.ad-dot{width:8px;height:8px;border-radius:50%;background:var(--dhex);flex:0 0 auto}
.ad-name{font-size:14px;font-weight:500;letter-spacing:.01em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ad-sim{font-family:var(--mono,ui-monospace,monospace);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;padding:3px 9px;border-radius:100px;flex:0 0 auto;
  border:1px solid var(--dhex-45);color:var(--dhex);background:var(--dhex-12)}
.ad-reset{margin-left:auto;flex:0 0 auto;font-family:var(--mono,ui-monospace,monospace);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(239,240,242,.55);
  padding:5px 12px;border-radius:100px;border:1px solid rgba(255,255,255,.14);
  transition:color .25s,border-color .25s,transform .25s var(--ease,ease)}
.ad-reset:hover{color:#EFF0F2;border-color:var(--dhex)}
.ad-reset:active{transform:scale(.95)}

/* -------------------------------------------------------------------- body */
.ad-body{position:relative;padding:16px;display:flex;flex-direction:column;gap:12px;
  min-height:220px}

/* generic buttons */
.ad-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:100px;
  border:1px solid rgba(255,255,255,.20);font-size:12px;font-weight:500;letter-spacing:.02em;
  background:rgba(255,255,255,.04);
  transition:border-color .25s,background-color .25s,color .25s,transform .25s var(--ease,ease),opacity .25s}
.ad-btn:hover{border-color:var(--dhex);background:var(--dhex-12)}
.ad-btn:active{transform:scale(.96)}
.ad-btn:disabled{opacity:.35;cursor:default;pointer-events:none}
.ad-btn[aria-pressed="true"]{border-color:var(--dhex);background:var(--dhex-22);color:#fff}
.ad-btn-hot{background:var(--dhex);border-color:var(--dhex);color:#0d0d10}
.ad-btn-hot:hover{background:var(--dhex);border-color:#fff;color:#0d0d10}
.ad-btn-danger{border-color:rgba(229,85,110,.55);color:#E5556E}
.ad-btn-danger:hover{border-color:#E5556E;background:rgba(229,85,110,.12)}
.ad-btn.ad-armed{border-color:#E5556E;color:#E5556E;background:rgba(229,85,110,.10)}
.ad-kbd{font-family:var(--mono,ui-monospace,monospace);font-size:9.5px;line-height:1;
  padding:3px 6px;border-radius:5px;border:1px solid rgba(255,255,255,.22);
  color:rgba(239,240,242,.65)}
.ad-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* chips */
.ad-chip{display:inline-flex;align-items:center;font-family:var(--mono,ui-monospace,monospace);
  font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;
  border-radius:100px;border:1px solid rgba(255,255,255,.16);color:rgba(239,240,242,.7);
  white-space:nowrap;flex:0 0 auto;
  transition:opacity .3s var(--ease,ease),transform .3s var(--ease,ease)}
.ad-chip-safe{border-color:rgba(53,196,143,.5);color:#35C48F;background:rgba(53,196,143,.10)}
.ad-chip-warn{border-color:rgba(240,136,62,.5);color:#F0883E;background:rgba(240,136,62,.10)}
.ad-chip-risk{border-color:rgba(229,85,110,.5);color:#E5556E;background:rgba(229,85,110,.10)}
.ad-chip-info{border-color:rgba(125,211,252,.5);color:#7DD3FC;background:rgba(125,211,252,.10)}
.ad-chip-mono{text-transform:none;letter-spacing:.04em}
.ad-chip-dim{opacity:.6}

/* lists + rows */
.ad-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ad-row{display:flex;align-items:center;gap:10px;padding:7px 11px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  font-size:12.5px;min-height:34px;
  transition:opacity .32s var(--ease,ease),transform .32s var(--ease,ease),
    border-color .3s,background-color .3s}
.ad-row.ad-mini{padding:5px 9px;min-height:28px;font-size:11.5px}
.ad-fico{width:9px;height:9px;border-radius:3px;flex:0 0 auto;
  transition:background-color .3s,border-color .3s}
.ad-fico.ad-cloudic{background:transparent !important;border:1.5px solid var(--dhex);
  border-radius:50%}
.ad-fname{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-fmeta{font-family:var(--mono,ui-monospace,monospace);font-size:10.5px;
  color:rgba(239,240,242,.55);font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto}
.ad-owner{font-family:var(--mono,ui-monospace,monospace);font-size:9.5px;color:#C77DFF;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.ad-row.ad-kept{border-color:rgba(53,196,143,.35)}
.ad-row.ad-staged{border-color:var(--dhex-45);background:var(--dhex-12)}
.ad-row.ad-lifted{opacity:.55}
.ad-row.ad-surfaced{border-color:var(--dhex-45);background:var(--dhex-12)}
.ad-row.ad-dim{opacity:.38}

/* enter / exit states (JS toggles ad-pre / ad-out) */
.ad-pre{opacity:0 !important;transform:translateY(8px) !important}
.ad-out{opacity:0 !important;transform:translateX(16px) !important;pointer-events:none}

/* stat block */
.ad-stat{display:flex;align-items:baseline;gap:8px;flex:0 0 auto}
.ad-stat b{font-size:19px;font-weight:500;letter-spacing:-.01em;color:var(--dhex);
  font-variant-numeric:tabular-nums;min-width:64px}
.ad-stat span{font-family:var(--mono,ui-monospace,monospace);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(239,240,242,.45)}

/* notes + labels */
.ad-note{margin:0;font-size:11.5px;line-height:1.5;color:rgba(239,240,242,.55)}
.ad-label{font-family:var(--mono,ui-monospace,monospace);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(239,240,242,.45)}

/* top line (progress / sort / threshold rows) */
.ad-topline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ad-progress{font-family:var(--mono,ui-monospace,monospace);font-size:11px;
  font-variant-numeric:tabular-nums;color:rgba(239,240,242,.7);flex:0 0 auto}
.ad-meter{flex:1;min-width:80px;height:4px;border-radius:100px;background:rgba(255,255,255,.10);
  overflow:hidden}
.ad-meter i{display:block;height:100%;width:0;background:var(--dhex);border-radius:100px;
  transition:width .35s var(--ease,ease)}

/* end plate */
.ad-plate{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:18px;
  background:
    radial-gradient(70% 60% at 50% 20%,var(--dhex-12),transparent 70%),
    rgba(13,15,19,.97);
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease,ease)}
.ad-plate.on{opacity:1;pointer-events:auto}
.ad-plate-in{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  max-width:44ch}
.ad-check{width:34px;height:34px;flex:0 0 auto}
.ad-check path{stroke:var(--dhex);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset .5s var(--ease,ease) .15s}
.ad-plate.on .ad-check path{stroke-dashoffset:0}
.ad-plate-title{font-size:16px;font-weight:500;letter-spacing:-.01em;line-height:1.25}
.ad-plate-sub{margin:0;font-size:11.5px;line-height:1.55;color:rgba(239,240,242,.6)}

/* switches */
.ad-sw{position:relative;width:34px;height:20px;flex:0 0 auto;border-radius:100px;
  border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);
  transition:background-color .25s,border-color .25s,opacity .25s;padding:0}
.ad-sw::after{content:"";position:absolute;top:2.5px;left:3px;width:13px;height:13px;
  border-radius:50%;background:#EFF0F2;transition:transform .25s var(--ease,ease),background-color .25s}
.ad-sw[aria-checked="true"]{background:var(--dhex);border-color:var(--dhex)}
.ad-sw[aria-checked="true"]::after{transform:translateX(14px);background:#0d0d10}
.ad-sw:disabled{opacity:.4;cursor:default}

/* native inputs */
.atl-demo input[type="checkbox"]{width:15px;height:15px;flex:0 0 auto;
  accent-color:var(--dhex);cursor:pointer}
.ad-input{font-family:var(--mono,ui-monospace,monospace);font-size:12px;color:#EFF0F2;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);border-radius:8px;
  padding:7px 11px;min-width:0;width:130px;transition:border-color .25s}
.ad-input::placeholder{color:rgba(239,240,242,.35)}
.ad-input:focus{border-color:var(--dhex)}
.ad-range{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:none;
  accent-color:var(--dhex);cursor:pointer}
.ad-range-inline{flex:1;min-width:100px;width:auto}

/* ------------------------------------------------------- 01 fast sorter deck */
.ad-deck{position:relative;height:148px;border-radius:14px}
.ad-deck:focus-visible{outline:2px solid var(--dhex);outline-offset:3px;border-radius:14px}
.ad-card{position:absolute;inset:0;border-radius:14px;padding:14px 16px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;gap:13px;
  transition:transform .3s var(--ease,ease),opacity .3s var(--ease,ease)}
.ad-card-prev{width:58px;height:58px;border-radius:11px;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.14)}
.ad-card-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.ad-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ad-card-name{font-size:15.5px;font-weight:500;letter-spacing:-.01em;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-card.ad-under{transform:scale(.955) translateY(9px);opacity:.5}
.ad-card.ad-go-keep{transform:translateX(64%) rotate(4deg);opacity:0}
.ad-card.ad-go-skip{transform:translateX(-64%) rotate(-4deg);opacity:0}
.ad-card.ad-go-del{transform:translateY(74%) rotate(-3deg);opacity:0}
.ad-card.ad-go-move{transform:translate(58%,-34%) rotate(6deg);opacity:0}
.ad-card.ad-go-vault{transform:scale(.35) translateY(64%);opacity:0}

/* ----------------------------------------------------- 02 crossfire star map */
.ad-sky{position:relative;height:218px;border-radius:14px;overflow:hidden;
  background:
    radial-gradient(60% 70% at 50% 52%,var(--dhex-12),transparent 70%),
    rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07)}
.ad-skysvg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ad-xline{stroke:var(--dhex-45);stroke-width:1;opacity:0;transition:opacity .5s var(--ease,ease)}
.ad-skysvg.ad-lit .ad-xline{opacity:1}
.ad-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;
  align-items:center;gap:3px;text-align:center;max-width:130px;
  transition:opacity .4s var(--ease,ease),transform .4s var(--ease,ease)}
.ad-node.ad-pre{transform:translate(-50%,-44%) !important}
.ad-ndot{width:8px;height:8px;border-radius:50%;background:var(--dhex);
  box-shadow:0 0 10px var(--dhex-45)}
.ad-hub .ad-ndot{width:12px;height:12px}
.ad-nlabel{font-family:var(--mono,ui-monospace,monospace);font-size:9px;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(239,240,242,.75);white-space:nowrap}
.ad-hub .ad-nlabel{font-size:10px;color:#fff}
.ad-nsize{font-family:var(--mono,ui-monospace,monospace);font-size:9px;
  color:var(--dhex);font-variant-numeric:tabular-nums}
.ad-ndotw{position:relative;width:22px;height:22px;display:grid;place-items:center}
.ad-narc{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ad-narc circle{stroke:var(--dhex);stroke-width:2;opacity:.85}
.ad-ledger{display:flex;flex-direction:column;gap:7px}

/* ------------------------------------------------------------ 03 vault seal */
.ad-capsule{display:flex;align-items:center;gap:11px;padding:11px 16px;border-radius:100px;
  border:1px dashed var(--dhex-45);color:rgba(239,240,242,.75);
  transition:border-color .35s,background-color .35s}
.ad-capsule.ad-sealed{border-style:solid;background:var(--dhex-12);color:#EFF0F2}
.ad-lock{width:17px;height:17px;flex:0 0 auto}
.ad-lock rect{fill:none;stroke:rgba(239,240,242,.6);stroke-width:1.6;
  transition:stroke .35s,fill .35s}
.ad-lock-sh{stroke:rgba(239,240,242,.6);stroke-width:1.6;
  transition:transform .35s var(--ease,ease),stroke .35s;transform-origin:50% 45%}
.ad-capsule.ad-sealed .ad-lock rect{stroke:var(--dhex)}
.ad-capsule.ad-sealed .ad-lock-sh{stroke:var(--dhex);transform:translateY(1.5px)}
.ad-captxt{font-size:12px;font-variant-numeric:tabular-nums}
.ad-lockline{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono,ui-monospace,monospace);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(239,240,242,.5)}
.ad-lockline .ad-lock{width:13px;height:13px}
.ad-purge{display:none;align-items:center;gap:8px}
.ad-purge.on{display:flex}

/* -------------------------------------------------------- 04 cleanup + tray */
.ad-tiers{display:flex;flex-direction:column;gap:10px}
.ad-tierbox{display:flex;flex-direction:column;gap:7px;border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:9px;background:rgba(255,255,255,.02)}
.ad-tierhead{display:flex;align-items:center;gap:9px}
.ad-tiername{flex:1;min-width:0;font-family:var(--mono,ui-monospace,monospace);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(239,240,242,.85);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-tray{display:none;align-items:center;gap:10px;padding:9px 14px;border-radius:100px;
  border:1px solid var(--dhex-45);background:var(--dhex-12)}
.ad-tray.on{display:flex}
.ad-traytxt{font-family:var(--mono,ui-monospace,monospace);font-size:11px;
  font-variant-numeric:tabular-nums;color:#EFF0F2;flex:1;min-width:0}

/* ---------------------------------------------------------- 05 categories */
.ad-two{display:grid;grid-template-columns:172px 1fr;gap:12px;align-items:start}
.ad-catlist{display:flex;flex-direction:column;gap:6px}
.ad-catbtn{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);font-size:12.5px;text-align:left;
  transition:border-color .25s,background-color .25s}
.ad-catbtn:hover{border-color:var(--dhex-45)}
.ad-catbtn[aria-selected="true"]{border-color:var(--dhex);background:var(--dhex-12)}
.ad-catpane{display:flex;flex-direction:column;gap:9px;min-width:0}
.ad-cathead{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ad-catbar{height:5px;border-radius:100px;background:rgba(255,255,255,.08);overflow:hidden}
.ad-catbar i{display:block;height:100%;width:0;background:var(--dhex);border-radius:100px;
  transition:width .6s var(--ease,ease)}
.ad-catrow{display:grid;grid-template-columns:9px minmax(80px,34%) 1fr auto auto;
  align-items:center;gap:9px}
.ad-plus{width:22px;height:22px;border-radius:50%;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.22);font-size:14px;line-height:1;
  color:rgba(239,240,242,.8);
  transition:border-color .25s,background-color .25s,opacity .25s,transform .25s var(--ease,ease)}
.ad-plus:hover{border-color:var(--dhex);background:var(--dhex-12)}
.ad-plus:active{transform:scale(.9)}
.ad-plus:disabled{opacity:.35;cursor:default}
@container (max-width:520px){.ad-two{grid-template-columns:1fr}
  .ad-catlist{flex-direction:row;flex-wrap:wrap}}

/* -------------------------------------------------------- 06 biggest files */
.ad-bigrow{display:grid;grid-template-columns:15px minmax(90px,38%) 1fr auto;
  align-items:center;gap:10px}
.ad-bigbar{height:7px;border-radius:100px;background:rgba(255,255,255,.07);overflow:hidden;
  min-width:40px}
.ad-bigbar i{display:block;height:100%;width:0;border-radius:100px;
  background:linear-gradient(90deg,var(--dhex-45),var(--dhex));
  transition:width .7s var(--ease,ease)}

/* ------------------------------------------------------------ 07 duplicates */
.ad-zone{display:flex;flex-direction:column;gap:10px}
.ad-scan{font-family:var(--mono,ui-monospace,monospace);font-size:10.5px;
  color:var(--dhex);padding:9px 12px;border-radius:10px;background:var(--dhex-12);
  border:1px solid var(--dhex-45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-grp{border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:9px;
  display:flex;flex-direction:column;gap:7px;background:rgba(255,255,255,.02);
  transition:opacity .35s var(--ease,ease),transform .35s var(--ease,ease)}
.ad-grphead{display:flex;align-items:center;gap:8px;justify-content:space-between}
.ad-dupsum{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  transition:opacity .35s var(--ease,ease),transform .35s var(--ease,ease)}
.ad-dupsum b{font-size:14.5px;font-weight:500;color:var(--dhex);
  font-variant-numeric:tabular-nums}

/* ----------------------------------------------------------- 08 ghost files */
.ad-ghostpane{position:relative;min-height:60px;border-radius:12px;overflow:hidden;
  padding:2px}
.ad-sweep{position:absolute;top:0;bottom:0;left:0;width:2px;border-radius:2px;
  background:var(--dhex);opacity:0;pointer-events:none;
  box-shadow:0 0 14px var(--dhex-45)}
.ad-sweep.go{animation:adSweep .9s var(--ease,ease) both}
@keyframes adSweep{0%{left:0;opacity:1}90%{opacity:1}100%{left:calc(100% - 2px);opacity:0}}

/* ------------------------------------------------------------- 11 recovery */
.ad-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:start}
.ad-col{display:flex;flex-direction:column;gap:8px;border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:10px;background:rgba(255,255,255,.02)}
.ad-colhead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ad-col .ad-btn{justify-content:center}
@container (max-width:560px){.ad-cols{grid-template-columns:1fr}}

/* -------------------------------------------------------- 12 restore points */
.ad-readout{font-family:var(--mono,ui-monospace,monospace);font-size:11px;
  font-variant-numeric:tabular-nums;color:rgba(239,240,242,.75);
  padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07)}
.ad-ticks{display:flex;gap:8px;align-items:flex-end}
.ad-tick{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
  transition:opacity .32s var(--ease,ease),transform .32s var(--ease,ease)}
.ad-tick i{display:block;width:100%;height:22px;border-radius:6px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
  transition:background-color .25s,border-color .25s}
.ad-tick.on i{background:var(--dhex-22);border-color:var(--dhex)}

/* ---------------------------------------------------- 13 windows optimizer */
.ad-boot{position:relative;height:26px;border-radius:8px;overflow:hidden;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.ad-boot i{display:block;height:100%;width:100%;border-radius:8px 0 0 8px;
  background:linear-gradient(90deg,var(--dhex-22),var(--dhex));
  transition:width .55s var(--ease,ease)}
.ad-bootsecs{position:absolute;top:50%;right:10px;transform:translateY(-50%);
  font-family:var(--mono,ui-monospace,monospace);font-size:11px;font-variant-numeric:tabular-nums;
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}

/* ------------------------------------------------------- 14 similar images */
.ad-pairs{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}
.ad-pair{display:flex;align-items:center;gap:7px;padding:8px;border-radius:12px;
  border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03);
  transition:border-color .3s,background-color .3s,opacity .3s}
.ad-pair.ad-grouped{border-color:var(--dhex);background:var(--dhex-12)}
.ad-pair.ad-stagedpair{opacity:.55}
.ad-pair.ad-stagedpair .ad-thumb:last-of-type{opacity:.35}
.ad-thumb{width:42px;height:33px;border-radius:6px;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.12);transition:opacity .3s}
.ad-pairmeta{display:flex;flex-direction:column;gap:2px;min-width:0}
.ad-pairmeta b{font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------ 17 workbench */
.ad-wb{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
.ad-wbgroup{display:flex;flex-direction:column;gap:6px;min-width:0;
  border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px;
  background:rgba(255,255,255,.02)}
.ad-wbchips{display:flex;flex-wrap:wrap;gap:6px;min-height:30px}
.ad-wbchip{display:inline-flex;align-items:center;gap:8px;max-width:100%;
  padding:6px 12px;border-radius:100px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);font-size:11.5px;
  transition:border-color .25s,background-color .25s,opacity .3s var(--ease,ease),
    transform .3s var(--ease,ease)}
.ad-wbchip:hover{border-color:var(--dhex)}
.ad-wbchip.ad-intray{border-color:var(--dhex);background:var(--dhex-12)}
.ad-wbchip .ad-fname{flex:0 1 auto}
.ad-wbtray{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:12px;
  border:1px dashed var(--dhex-45);background:var(--dhex-12);min-height:120px}
@container (max-width:520px){.ad-wb{grid-template-columns:1fr}}

/* ---------------------------------------------------------- 18 oldest files */
.ad-dial .ad-btn{font-family:var(--mono,ui-monospace,monospace);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;padding:6px 13px}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  .atl-demo *,
  .atl-demo *::before,
  .atl-demo *::after{transition:none !important;animation:none !important}
  .ad-sweep{display:none}
  .ad-plate{opacity:1}
  .ad-plate:not(.on){opacity:0}
  .ad-check path{stroke-dashoffset:0}
}