/* ================================================================
   ZERONEX Compress — app layer
   Sits on top of bootstrap.rtl + zeronex-bootstrap.css. Tokens only
   (var(--bg-*), var(--fg-*), var(--accent) …) — no raw Bootstrap colors.
   One DOM, two layouts:
     ≥ 992px  → website: navbar + grid (hero / dropzone / settings / results / steps)
     < 992px  → native-app shell: app bar + one screen at a time + floating bottom dock
   Pages: index.php (image) · video.php · guide.php — chrome in partials/layout.php
   ================================================================ */

/* cross-page navigation feels like an app: crossfade, chrome stays put */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--zx-d-base)}
.zx-dock{view-transition-name:zx-dock}
.zx-appbar{view-transition-name:zx-appbar}
.zx-nav{view-transition-name:zx-nav}

html{-webkit-text-size-adjust:100%}
body{min-height:100vh;min-height:100dvh;position:relative;-webkit-tap-highlight-color:transparent}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 500px at 85% -8%,var(--accent-soft),transparent 62%),
    radial-gradient(700px 420px at 8% 102%,var(--aurum-soft),transparent 58%);
  opacity:.9;
}
.zx-app,.zx-page,.zx-nav,.zx-appbar,.zx-dock,.zx-footer{position:relative;z-index:1}
button,a,label,input,select{touch-action:manipulation}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;display:inline-block}
.zx-file-input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.zx-ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ----------------------------------------------------------------
   1. SCREENS  (mobile: one at a time · desktop: all visible)
   ---------------------------------------------------------------- */
.zx-screen{scroll-margin-top:96px}
@keyframes zx-screen-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.zx-title{font-family:var(--zx-font-display);font-weight:300;font-size:1.75rem;letter-spacing:var(--zx-ls-tight);line-height:1.2;margin:0}
.zx-subtitle{color:var(--fg-muted);font-size:var(--zx-fs-sm);margin:4px 0 0}
.zx-screen-head{margin-bottom:18px}

@media (max-width:991.98px){
  .zx-app{padding:20px 16px 0} /* dock clearance lives on .zx-footer */
  .zx-screen{display:none}
  .zx-screen.is-active{display:block;animation:zx-screen-in var(--zx-d-base) var(--zx-ease-out) both}
  .zx-hero + .zx-drop-wrap{margin-top:22px}
  .zx-hero-mark{margin-top:0}
}
@media (min-width:992px){
  .zx-app{
    max-width:1164px;margin-inline:auto;padding:40px 12px 24px;
    display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start;
  }
  .zx-hero{grid-column:1 / -1}
  .zx-drop-wrap{grid-column:1 / span 8}
  /* the column stretches over its own rows and only the card inside it sticks,
     so it stops at the end of the results instead of riding over the guide */
  .zx-settings{grid-column:9 / -1;grid-row:2 / span 2;align-self:stretch}
  .zx-settings > .card{position:sticky;top:96px}
  .zx-files{grid-column:1 / span 8}
  .zx-files.is-empty{display:none}
  .zx-steps{grid-column:1 / -1;margin-top:48px}
}

/* ----------------------------------------------------------------
   2. APP BAR  (mobile) · NAVBAR (desktop)
   ---------------------------------------------------------------- */
.zx-appbar{
  position:sticky;top:0;z-index:1030;padding-top:env(safe-area-inset-top);
  background-color:color-mix(in srgb,var(--bg-canvas) 78%,transparent);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--border-subtle);
}
.zx-appbar-row{height:56px;display:flex;align-items:center;justify-content:space-between;padding-inline:16px}
.zx-brand{display:inline-flex;align-items:center;gap:10px;color:var(--fg-primary);text-decoration:none}
.zx-brand:hover{color:var(--fg-primary)}
.zx-brand img{height:26px;width:auto;display:block}
.zx-brand .zx-wordmark{font-size:.78rem}
.zx-nav .zx-brand img{height:30px}
.zx-nav .zx-brand .zx-wordmark{font-size:.9rem}
.zx-brand-sub{font-family:var(--zx-font-display);font-size:var(--zx-fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);
  padding-inline-start:10px;border-inline-start:1px solid var(--border-default);line-height:1.2}
.zx-nav-link{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:var(--zx-fs-sm);padding:8px 14px!important;border-radius:var(--zx-r-pill)}
.zx-nav-link .zx-ico{width:17px;height:17px;opacity:.75}
.zx-nav-link:hover{background:var(--bg-hover)}
.zx-nav-link.active{color:var(--fg-primary);background:var(--accent-soft)}
.zx-nav-link.active .zx-ico{color:var(--fg-brand);opacity:1}
.zx-appbar .btn-icon{width:40px;height:40px}
.zx-appbar .btn-icon:hover{transform:none}
.zx-appbar .btn-icon.is-active{color:var(--fg-brand);background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.zx-theme-sun{display:none}
[data-bs-theme="light"] .zx-theme-sun{display:block}
[data-bs-theme="light"] .zx-theme-moon{display:none}

/* ----------------------------------------------------------------
   3. HERO
   ---------------------------------------------------------------- */
.zx-hero{position:relative;text-align:center}
.zx-hero-mark{position:relative;display:grid;place-items:center;margin:2px auto 14px}
.zx-hero-mark::before{
  content:'';position:absolute;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(closest-side,var(--accent-soft),transparent 72%);
}
.zx-hero-mark img{position:relative;height:60px;width:auto}
.zx-hero h1{font-weight:300;letter-spacing:var(--zx-ls-tight);line-height:1.22;margin:0 auto;font-size:clamp(1.85rem,8vw,2.4rem);max-width:15ch}
.zx-hero .lead-sm{color:var(--fg-secondary);font-size:var(--zx-fs-base);max-width:44ch;margin:12px auto 0}
.zx-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.zx-chips .badge{display:inline-flex;align-items:center;gap:6px;text-transform:none;letter-spacing:.02em;font-family:var(--zx-font-fa);font-weight:500;padding:.5em .9em}
.zx-chips .badge .zx-ico{width:14px;height:14px}
@media (min-width:992px){
  .zx-hero{text-align:start;display:grid;grid-template-columns:1.3fr .7fr;align-items:center;column-gap:32px;padding:8px 0 12px}
  .zx-hero > *{grid-column:1}
  .zx-hero .zx-eyebrow{direction:rtl}
  .zx-hero-mark{grid-column:2;grid-row:1 / span 4;margin:0}
  .zx-hero-mark::before{width:400px;height:400px}
  .zx-hero-mark img{height:auto;width:min(100%,300px)}
  .zx-hero h1{font-size:var(--zx-fs-display);margin:14px 0 0;max-width:14ch;line-height:1.12}
  .zx-hero .lead-sm{font-size:var(--zx-fs-lg);margin:18px 0 0;max-width:52ch}
  .zx-chips{justify-content:flex-start;margin-top:22px}
}

/* ----------------------------------------------------------------
   4. DROPZONE
   ---------------------------------------------------------------- */
.zx-drop{
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;cursor:pointer;
  position:relative;padding:34px 20px;margin:0;
  border:1.5px dashed var(--border-strong);border-radius:var(--zx-r-xl);
  background:var(--bg-inset) var(--grad-surface);
  transition:border-color var(--zx-d-base) var(--zx-ease),background-color var(--zx-d-base) var(--zx-ease),box-shadow var(--zx-d-base) var(--zx-ease),transform var(--zx-d-fast) var(--zx-ease);
}
.zx-drop:hover,body.is-dragging .zx-drop{border-color:var(--accent);background-color:var(--accent-soft);box-shadow:var(--shadow-glow)}
.zx-drop:active{transform:scale(.992)}
.zx-drop:focus-within{box-shadow:var(--ring);border-color:var(--accent)}
.zx-drop-icon{
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin-bottom:6px;
  background:var(--accent-soft);color:var(--fg-brand);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
}
.zx-drop-icon .zx-ico{width:26px;height:26px}
.zx-drop h2{font-size:1.12rem;margin:0;font-weight:400}
.zx-drop .sub{color:var(--fg-muted);font-size:var(--zx-fs-sm)}
.zx-drop .btn{margin-top:12px;pointer-events:none}
.zx-drop .on-desktop{display:none}
@media (min-width:992px){
  .zx-drop{padding:54px 24px}
  .zx-drop .on-desktop{display:inline}
  .zx-drop .on-mobile{display:none}
}
@media (max-width:991.98px){.zx-drop .btn{display:none}}

/* preset pill (mobile) — jumps to Settings */
.zx-preset{
  display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;padding:12px 14px;text-align:start;
  background:var(--bg-surface);color:var(--fg-secondary);border:1px solid var(--border-subtle);border-radius:var(--zx-r-lg);
  font:inherit;font-size:var(--zx-fs-sm);transition:border-color var(--zx-d-base) var(--zx-ease),background var(--zx-d-base) var(--zx-ease);
}
.zx-preset:active{background:var(--bg-hover);border-color:var(--border-default)}
.zx-preset .pre-ico{width:36px;height:36px;border-radius:var(--zx-r-md);display:grid;place-items:center;background:var(--accent-soft);color:var(--fg-brand);flex:none}
.zx-preset .grow{flex:1;min-width:0}
.zx-preset .k{display:block;color:var(--fg-muted);font-size:var(--zx-fs-xs)}
.zx-preset .v{display:block;color:var(--fg-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zx-preset .chev{color:var(--fg-muted);width:18px;height:18px}

/* ----------------------------------------------------------------
   5. SETTINGS
   ---------------------------------------------------------------- */
.zx-settings .card-body{padding:var(--zx-s-5)}
.zx-setting + .zx-setting{margin-top:var(--zx-s-5);padding-top:var(--zx-s-5);border-top:1px solid var(--border-subtle)}
.zx-setting-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.zx-setting-head .form-label{margin:0}
.zx-val{font-family:var(--zx-font-mono);font-size:var(--zx-fs-sm);color:var(--fg-brand)}
.zx-val-fa{font-family:var(--zx-font-fa);font-weight:500}
.zx-setting .zx-segment{display:flex;width:100%}
.zx-setting .zx-segment .btn{flex:1;padding:10px 6px;white-space:normal;line-height:1.25;text-transform:none;letter-spacing:.02em;font-family:var(--zx-font-fa)}
.zx-setting .zx-formats .btn{padding:11px 2px;font-family:var(--zx-font-display);font-size:var(--zx-fs-xs);letter-spacing:.04em}
.zx-setting .zx-formats .btn[data-format="keep"]{font-family:var(--zx-font-fa)}
.zx-format-hint{color:var(--fg-muted);font-size:var(--zx-fs-xs);line-height:1.7;margin:10px 2px 0;min-height:3.4em}
.zx-setting .zx-chips{justify-content:flex-start;margin:0 0 14px;gap:6px}
.zx-setting .zx-chip{padding:7px 12px;font-size:var(--zx-fs-xs);font:inherit;font-size:var(--zx-fs-xs)}
.zx-range{--fill:71%}
.zx-range::-webkit-slider-runnable-track{background:linear-gradient(to left,var(--accent) var(--fill),var(--bg-inset) var(--fill))!important;border:1px solid var(--border-subtle)}
.zx-range::-moz-range-progress{height:.5rem;border-radius:1rem;background:var(--accent)}
.zx-range-ends{display:flex;justify-content:space-between;color:var(--fg-muted);font-size:var(--zx-fs-xs);margin-top:4px}
.zx-note{color:var(--fg-muted);font-size:var(--zx-fs-xs);margin:var(--zx-s-5) 0 0;display:flex;gap:8px;line-height:1.7}
.zx-note .zx-ico{width:15px;height:15px;margin-top:3px;color:var(--fg-brand)}

/* ----------------------------------------------------------------
   6. RESULTS
   ---------------------------------------------------------------- */
.zx-summary{margin-bottom:14px}
.zx-summary .card-body{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.zx-summary .big{font-family:var(--zx-font-display);font-weight:300;font-size:2.7rem;line-height:1;letter-spacing:var(--zx-ls-tight)}
.zx-summary .meta{flex:1;min-width:150px}
.zx-summary .meta .zx-lbl{margin-bottom:4px}
.zx-summary .detail{color:var(--fg-secondary);font-size:var(--zx-fs-sm)}
.zx-summary .pending{display:block;color:var(--fg-brand);font-size:var(--zx-fs-xs);margin-top:2px}
.zx-summary .actions{display:flex;gap:8px;width:100%}
.zx-summary .actions .btn-primary{flex:1}
@media (min-width:576px){.zx-summary .actions{width:auto}}

.zx-list{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.zx-file{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px;
  background:var(--bg-surface) var(--grad-surface);border:1px solid var(--border-subtle);border-radius:var(--zx-r-lg);
  animation:zx-screen-in var(--zx-d-base) var(--zx-ease-out) both;
  transition:border-color var(--zx-d-base) var(--zx-ease);
}
.zx-thumb{width:56px;height:56px;border-radius:var(--zx-r-md);object-fit:cover;background:var(--bg-sunken);border:1px solid var(--border-subtle);display:block}
.zx-file-name{font-size:var(--zx-fs-sm);font-weight:500;color:var(--fg-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zx-file-sub{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:5px;color:var(--fg-muted);font-size:var(--zx-fs-xs)}
.zx-file-sub .badge{font-family:var(--zx-font-fa);text-transform:none;letter-spacing:.02em;padding:.35em .7em}
.zx-file-sub .after{color:var(--fg-primary)}
.zx-file-actions{display:flex;align-items:center;gap:6px}
.zx-file-actions .btn-icon{width:40px;height:40px;text-decoration:none}
.zx-file-actions .btn-icon:hover{transform:none}
.zx-file-actions .btn-icon .zx-ico{width:18px;height:18px}
.zx-file-actions .dl{color:var(--fg-brand);border-color:color-mix(in srgb,var(--accent) 34%,transparent);background:var(--accent-soft)}
.zx-file-actions .dl[aria-disabled="true"]{opacity:.32;pointer-events:none}
.zx-file .progress{position:absolute;inset-inline:0;bottom:0;height:2px;border-radius:0;display:none;background:transparent}
.zx-file.is-working .progress{display:flex}
.zx-file.is-working .progress-bar{width:36%;animation:zx-indeterminate 1.25s var(--zx-ease-in-out) infinite}
@keyframes zx-indeterminate{from{transform:translateX(120%)}to{transform:translateX(-300%)}}
.zx-file.is-error{border-color:color-mix(in srgb,var(--danger) 40%,transparent)}

.zx-empty{text-align:center;padding:44px 20px;border:1px dashed var(--border-default);border-radius:var(--zx-r-xl);color:var(--fg-muted)}
.zx-empty .zx-drop-icon{margin:0 auto;width:56px;height:56px;background:var(--bg-inset);color:var(--fg-muted);border-color:var(--border-subtle)}
.zx-empty h3{font-size:1.05rem;color:var(--fg-secondary);margin:14px 0 4px}
.zx-empty p{font-size:var(--zx-fs-sm);margin:0 0 16px}

/* ----------------------------------------------------------------
   6b. VIDEO ROWS
   ---------------------------------------------------------------- */
.zx-vfile{align-items:start}
.zx-vthumb{
  position:relative;width:96px;height:64px;padding:0;border-radius:var(--zx-r-md);overflow:hidden;cursor:pointer;
  display:grid;place-items:center;background:var(--bg-sunken);border:1px solid var(--border-subtle);color:var(--fg-muted);
}
.zx-vthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.zx-vthumb .ph{width:24px;height:24px}
.zx-vthumb .play{
  position:absolute;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:rgba(4,10,10,.55);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transform:scale(.85);transition:opacity var(--zx-d-base) var(--zx-ease),transform var(--zx-d-base) var(--zx-ease-out);
}
.zx-vthumb .play .zx-ico{width:13px;height:13px;fill:currentColor;stroke:none;margin-inline-start:2px}
.zx-vthumb:hover .play,.zx-vthumb:focus-visible .play,.zx-vfile.is-done .zx-vthumb .play{opacity:1;transform:none}
.zx-vthumb .dur{
  position:absolute;bottom:4px;inset-inline-end:4px;padding:1px 5px;border-radius:5px;
  background:rgba(4,10,10,.7);color:#fff;font-family:var(--zx-font-mono);font-size:.625rem;line-height:1.5;
}
.zx-vthumb .dur:empty{display:none}
.zx-engine{
  font-family:var(--zx-font-display);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 7px;border-radius:var(--zx-r-pill);border:1px solid var(--border-default);color:var(--fg-secondary);direction:ltr;
}
.zx-engine.is-ffmpeg{color:var(--aurum);border-color:color-mix(in srgb,var(--aurum) 35%,transparent)}
.zx-vprog{display:flex;align-items:center;gap:10px;margin-top:9px}
.zx-bar{flex:1;height:5px;border-radius:99px;background:var(--bg-inset);border:1px solid var(--border-subtle);overflow:hidden;position:relative}
.zx-bar > i{position:absolute;inset-block:0;inset-inline-start:0;width:0;border-radius:inherit;background:var(--grad-brand);
  transition:width var(--zx-d-base) var(--zx-ease)}
.zx-vfile.is-working .state + .before{opacity:.8}
.zx-vprog .pct{font-family:var(--zx-font-mono);font-size:var(--zx-fs-xs);color:var(--fg-brand);min-width:34px}
.zx-vprog .eta{font-size:var(--zx-fs-xs);color:var(--fg-muted);white-space:nowrap}
.zx-vprog .eta:empty{display:none}
.zx-vinfo{font-size:var(--zx-fs-xs);color:var(--fg-muted);margin-top:5px;line-height:1.6}
.zx-vinfo:empty{display:none}
.zx-vfile.is-working{border-color:color-mix(in srgb,var(--accent) 34%,transparent);box-shadow:var(--shadow-glow)}
.zx-vfile.is-queued{opacity:.78}
.zx-vfile .zx-file-actions{align-self:center}
@media (max-width:575.98px){
  /* phones: thumbnail with its two actions stacked underneath, details beside them */
  .zx-vfile{grid-template-columns:84px minmax(0,1fr);row-gap:8px}
  .zx-vthumb{grid-row:1;grid-column:1;width:84px;height:56px}
  .zx-vfile .zx-file-meta{grid-row:1 / span 2;grid-column:2}
  .zx-vfile .zx-file-actions{grid-row:2;grid-column:1;align-self:start;justify-content:space-between;gap:0}
  .zx-vfile .zx-file-actions .btn-icon{width:38px;height:38px}
}

.zx-reapply{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;padding:12px 14px;
  border-radius:var(--zx-r-lg);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  color:var(--fg-secondary);font-size:var(--zx-fs-sm);
}
.zx-reapply .zx-ico{color:var(--fg-brand);width:18px;height:18px}
.zx-reapply span{flex:1;min-width:140px}

.zx-switch{cursor:pointer}
.zx-setting .zx-segment .btn:disabled{opacity:.4}

/* preview — centred modal on desktop, bottom sheet on phones */
.zx-sheet .modal-header{position:relative;gap:12px}
.zx-sheet .modal-title{font-size:var(--zx-fs-base);font-family:var(--zx-font-fa);margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zx-sheet .modal-header .btn-close{margin:0}
.zx-sheet .modal-body{padding:0;background:#000;position:relative}
.zx-sheet video{display:block;width:100%;max-height:min(70vh,640px);background:#000}
.zx-sheet .modal-footer{justify-content:space-between}
.zx-grabber{display:none}
.zx-preview-error{position:absolute;inset:0;display:grid;place-items:center;padding:24px;margin:0;text-align:center;color:#fff;background:rgba(4,10,10,.85);font-size:var(--zx-fs-sm)}
.zx-preview-error[hidden]{display:none}
@media (max-width:575.98px){
  .zx-sheet .modal-dialog{position:fixed;inset-inline:0;bottom:0;margin:0;max-width:none;min-height:0;align-items:flex-end}
  .zx-sheet.fade .modal-dialog{transform:translateY(100%);transition:transform var(--zx-d-slow) var(--zx-ease-out)}
  .zx-sheet.show .modal-dialog{transform:none}
  .zx-sheet .modal-content{border-radius:var(--zx-r-xl) var(--zx-r-xl) 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom)}
  .zx-sheet .modal-header{padding-top:22px}
  .zx-grabber{display:block;position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:99px;background:var(--border-strong)}
}

/* ----------------------------------------------------------------
   6c. AUDIO ROWS — voice-message style player (always left-to-right)
   ---------------------------------------------------------------- */
.zx-afile{grid-template-columns:minmax(230px,300px) minmax(0,1fr) auto;align-items:center}
.zx-aplayer{
  direction:ltr;display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;min-width:0;
  border-radius:var(--zx-r-pill);background:var(--bg-inset);border:1px solid var(--border-subtle);
}
.zx-aplay{
  flex:none;width:40px;height:40px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;cursor:pointer;
  color:var(--fg-on-brand);background:var(--grad-brand);background-size:180% 180%;
  box-shadow:0 6px 16px -8px rgba(43,163,154,.8),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform var(--zx-d-fast) var(--zx-ease);
}
[data-bs-theme="light"] .zx-aplay{color:#fff}
.zx-aplay:active{transform:scale(.92)}
.zx-aplay .zx-ico{width:15px;height:15px;fill:currentColor;stroke:none}
.zx-aplay .i-play{margin-left:2px}
.zx-aplay .i-pause,.zx-afile.is-playing .zx-aplay .i-play{display:none}
.zx-afile.is-playing .zx-aplay .i-pause{display:block}
.zx-wave{position:relative;flex:1;min-width:0;height:32px;cursor:pointer;color:var(--fg-disabled);--p:0%;border-radius:4px}
.zx-wave svg{position:absolute;inset:0;width:100%;height:100%;fill:currentColor}
.zx-wave .fill{position:absolute;inset:0;color:var(--accent);clip-path:inset(0 calc(100% - var(--p)) 0 0);transition:clip-path 120ms linear}
.zx-afile.is-placeholder .zx-wave{opacity:.55}
.zx-atime{flex:none;min-width:38px;text-align:right;font-family:var(--zx-font-mono);font-size:var(--zx-fs-xs);color:var(--fg-secondary)}
.zx-afile.is-playing .zx-atime{color:var(--fg-brand)}
.zx-afile.is-working .zx-aplayer{opacity:.8}
.zx-ainfo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:5px}
.zx-ainfo .zx-vinfo{margin:0}
.zx-ab.btn-group.zx-segment{padding:2px}
.zx-ab .btn{font-family:var(--zx-font-fa);font-size:.6875rem;padding:4px 10px;text-transform:none;letter-spacing:0}
@media (max-width:767.98px){
  /* phones: player across the top, details and actions underneath */
  .zx-afile{grid-template-columns:minmax(0,1fr) auto;row-gap:10px}
  .zx-afile .zx-aplayer{grid-column:1 / -1}
  .zx-afile .zx-file-actions{align-self:start}
}

/* tool switcher (phones) — the active pill morphs between pages via view transitions */
.zx-tools.is-active{display:flex}
.zx-tools{
  gap:4px;padding:4px;margin-bottom:22px;border-radius:var(--zx-r-pill);
  background:var(--bg-inset);border:1px solid var(--border-subtle);
}
.zx-tools-item{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 6px;border-radius:var(--zx-r-pill);
  color:var(--fg-muted);text-decoration:none;font-size:var(--zx-fs-sm);font-weight:500;
  transition:color var(--zx-d-base) var(--zx-ease),background var(--zx-d-base) var(--zx-ease);
}
.zx-tools-item .zx-ico{width:17px;height:17px}
.zx-tools-item:hover{color:var(--fg-primary)}
.zx-tools-item.active{
  color:var(--fg-primary);background:var(--bg-raised);box-shadow:var(--shadow-xs),0 0 0 1px var(--border-subtle);
  view-transition-name:zx-tool-active;
}
.zx-tools-item.active .zx-ico{color:var(--fg-brand)}
::view-transition-group(zx-tool-active){animation-duration:var(--zx-d-slow);animation-timing-function:var(--zx-ease-out)}

/* ----------------------------------------------------------------
   7. STEPS · GUIDE
   ---------------------------------------------------------------- */
.zx-step{display:flex;gap:14px;align-items:flex-start}
.zx-step .n{
  flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--zx-font-display);font-size:var(--zx-fs-sm);color:var(--fg-brand);
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
}
.zx-step h3{font-size:1rem;margin:4px 0 4px}
.zx-step p{margin:0;color:var(--fg-secondary);font-size:var(--zx-fs-sm)}

.zx-page{max-width:1000px;margin-inline:auto;padding:48px 12px 0}
@media (max-width:991.98px){.zx-page{padding:20px 16px 0}}
.zx-guide-logo{display:block;margin:6px auto 18px;width:min(190px,52vw);height:auto}
.zx-guide-head{margin-bottom:28px}
.zx-guide-head h1{font-weight:300;font-size:var(--zx-fs-h1);letter-spacing:var(--zx-ls-tight);margin:14px 0 10px}
.zx-guide-head p{color:var(--fg-secondary);max-width:62ch;margin:0;font-size:var(--zx-fs-lg)}
@media (max-width:991.98px){
  .zx-guide-head{text-align:center}
  .zx-guide-head h1{font-size:1.9rem;margin-top:0}
  .zx-guide-head p{font-size:var(--zx-fs-base);margin-inline:auto}
}
.zx-guide .zx-eyebrow,.zx-steps .zx-eyebrow{direction:rtl}
.zx-guide-section{margin-top:48px}
.zx-guide-section > h2{font-weight:300;font-size:var(--zx-fs-h2);margin:12px 0 18px}
.zx-guide-lead{color:var(--fg-secondary);max-width:68ch;margin:-6px 0 18px}

.zx-tool-card{text-decoration:none;color:inherit}
.zx-tool-card .card-body{display:flex;align-items:center;gap:16px}
.zx-tool-card .ic,.zx-privacy .ic,.zx-engine-card .ic{
  flex:none;width:48px;height:48px;border-radius:var(--zx-r-md);display:grid;place-items:center;
  background:var(--accent-soft);color:var(--fg-brand);border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
}
.zx-tool-card .ic .zx-ico{width:24px;height:24px}
.zx-tool-card h2{font-size:1.1rem;margin:0 0 4px}
.zx-tool-card p{margin:0;color:var(--fg-secondary);font-size:var(--zx-fs-sm)}
.zx-tool-card > .card-body > div{flex:1;min-width:0}
.zx-tool-card .chev{color:var(--fg-muted);transition:transform var(--zx-d-base) var(--zx-ease-out)}
.zx-tool-card:hover .chev{transform:translateX(-4px);color:var(--fg-brand)}

.zx-privacy{
  display:flex;gap:16px;align-items:flex-start;margin-top:16px;padding:20px;border-radius:var(--zx-r-lg);
  background:var(--bg-inset) var(--grad-surface);border:1px solid var(--border-subtle);
}
.zx-privacy h2{font-size:1.05rem;margin:2px 0 6px}
.zx-privacy p{margin:0;color:var(--fg-secondary);font-size:var(--zx-fs-sm)}

.zx-format-card .name{font-family:var(--zx-font-display);font-size:1.25rem;letter-spacing:.04em}
.zx-format-card .badge{font-family:var(--zx-font-fa);text-transform:none;letter-spacing:.02em}
.zx-format-card p{margin:12px 0 0;color:var(--fg-secondary);font-size:var(--zx-fs-sm)}

.zx-engine-card .head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.zx-engine-card .head > div{flex:1}
.zx-engine-card h3{font-family:var(--zx-font-display);font-size:1.25rem;margin:0}
.zx-engine-card .badge{font-family:var(--zx-font-fa);text-transform:none}
.zx-proscons{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:var(--zx-fs-sm);color:var(--fg-secondary)}
.zx-proscons li{position:relative;padding-inline-start:26px}
.zx-proscons li::before{
  content:'';position:absolute;inset-inline-start:0;top:4px;width:16px;height:16px;border-radius:50%;
  background:var(--success-soft) no-repeat center/10px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234FBF86' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E");
}
.zx-proscons li.con::before{
  background-color:var(--bg-inset);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23728685' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}

.zx-guide .accordion{--bs-accordion-bg:transparent;--bs-accordion-border-radius:var(--zx-r-lg);--bs-accordion-inner-border-radius:var(--zx-r-lg)}
.zx-guide .accordion-button{font-family:var(--zx-font-fa);font-size:var(--zx-fs-base)}
.zx-guide .accordion-body{color:var(--fg-secondary);font-size:var(--zx-fs-sm);line-height:1.9}

/* ----------------------------------------------------------------
   FOOTER — same as qr_generator (partials/layout.php)
   ---------------------------------------------------------------- */
.zx-footer{padding:var(--zx-s-6) 0 var(--zx-s-5);margin-top:var(--zx-s-8);border-top:1px solid var(--border-subtle);color:var(--fg-muted);font-size:var(--zx-fs-sm)}
.zx-footer-logo{height:auto;opacity:.92;transition:opacity var(--zx-d-base) var(--zx-ease)}
.zx-footer-brand:hover .zx-footer-logo{opacity:1}
[data-bs-theme="light"] .zx-footer-logo{filter:brightness(.55) saturate(1.2)}
.zx-footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--zx-s-3);
  margin-top:var(--zx-s-5);padding-top:var(--zx-s-4);border-top:1px solid var(--border-subtle)}
.zx-maker{font-family:var(--zx-font-display);font-weight:600;letter-spacing:.24em;text-decoration:none;margin-inline-start:4px;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;direction:ltr;unicode-bidi:isolate}
.zx-maker:hover{filter:brightness(1.2)}
.zx-domain-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--zx-r-pill);
  border:1px solid var(--border-default);background:var(--bg-inset);color:var(--fg-secondary);text-decoration:none;
  font-family:var(--zx-font-mono);font-size:var(--zx-fs-xs);letter-spacing:.02em;white-space:nowrap;transition:all var(--zx-d-base) var(--zx-ease)}
.zx-domain-chip:hover{color:var(--fg-brand);border-color:var(--border-strong)}
.zx-domain-chip .zx-dot{color:var(--success)}
@media (max-width:991.98px){
  .zx-footer{margin:24px 16px 0;padding-bottom:calc(116px + env(safe-area-inset-bottom));text-align:center}
  .zx-footer > .container{padding:0}
  .zx-footer-bottom{flex-direction:column;justify-content:center}
}

/* ----------------------------------------------------------------
   8. BOTTOM DOCK — native-style floating tab bar (mobile)
   ---------------------------------------------------------------- */
.zx-dock{
  position:fixed;z-index:1040;inset-inline:0;bottom:0;
  padding:0 14px calc(12px + env(safe-area-inset-bottom));pointer-events:none;
}
.zx-dock::before{ /* fade the content out under the dock */
  content:'';position:absolute;inset-inline:0;bottom:0;height:120px;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,var(--bg-canvas) 18%,transparent);
}
.zx-dock-inner{
  pointer-events:auto;position:relative;max-width:440px;margin-inline:auto;height:68px;
  display:grid;grid-template-columns:1fr 1fr 76px 1fr 1fr;align-items:center;padding-inline:4px;
  border-radius:var(--zx-r-xl);
  background-color:color-mix(in srgb,var(--bg-raised) 86%,transparent);
  backdrop-filter:blur(24px) saturate(170%);-webkit-backdrop-filter:blur(24px) saturate(170%);
  border:1px solid var(--border-default);
  box-shadow:var(--shadow-lg),0 0 30px -12px color-mix(in srgb,var(--accent) 40%,transparent);
}
.zx-dock-inner::after{ /* hairline sheen on the top edge, like .card-feature */
  content:'';position:absolute;inset-inline:28px;top:-1px;height:1px;background:var(--grad-hairline);pointer-events:none;
}
.zx-tab,.zx-fab{text-decoration:none}
.zx-tab{
  appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:var(--fg-muted);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:100%;position:relative;
  transition:color var(--zx-d-base) var(--zx-ease);
}
.zx-tab:focus-visible{box-shadow:none}
.zx-tab:focus-visible .ic{box-shadow:var(--ring)}
.zx-tab .ic{position:relative;width:54px;height:30px;display:grid;place-items:center;border-radius:var(--zx-r-pill)}
.zx-tab .ic::before{ /* active indicator pill — grows from the centre */
  content:'';position:absolute;inset:0;border-radius:inherit;background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  opacity:0;transform:scaleX(.4);
  transition:opacity var(--zx-d-base) var(--zx-ease-out),transform var(--zx-d-slow) var(--zx-ease-out);
}
.zx-tab .ic .zx-ico{position:relative;width:21px;height:21px;transition:transform var(--zx-d-base) var(--zx-ease-out)}
.zx-tab .lbl{font-size:.6875rem;line-height:1;font-weight:500;letter-spacing:.01em;transition:color var(--zx-d-base) var(--zx-ease)}
.zx-tab:active .ic .zx-ico{transform:scale(.86)}
.zx-tab.is-active{color:var(--fg-brand)}
.zx-tab.is-active .lbl{color:var(--fg-primary)}
.zx-tab.is-active .ic::before{opacity:1;transform:none}
.zx-tab.is-active .ic .zx-ico{stroke-width:2}
.zx-badge{
  position:absolute;top:-5px;inset-inline-end:4px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;
  display:grid;place-items:center;font-family:var(--zx-font-body);font-size:.625rem;font-weight:600;line-height:1;direction:ltr;
  background:var(--grad-brand);color:var(--fg-on-brand);
  box-shadow:0 0 0 2px var(--bg-raised);
  transform:scale(0);transition:transform var(--zx-d-base) var(--zx-ease-out);
}
.zx-badge.show{transform:scale(1)}
[data-bs-theme="light"] .zx-badge{color:#fff}

/* centre action — raised round "add" button */
.zx-fab-slot{display:grid;place-items:center;height:100%}
.zx-fab{
  appearance:none;border:0;padding:0;cursor:pointer;position:relative;
  width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  color:var(--fg-on-brand);background:var(--grad-brand);background-size:180% 180%;background-position:12% 50%;
  transform:translateY(-18px);
  box-shadow:
    0 0 0 6px var(--bg-canvas),
    0 0 0 7px var(--border-default),
    0 16px 30px -8px rgba(43,163,154,.75),
    inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform var(--zx-d-fast) var(--zx-ease),background-position var(--zx-d-slow) var(--zx-ease);
}
[data-bs-theme="light"] .zx-fab{color:#fff}
.zx-fab .zx-ico{width:26px;height:26px;stroke-width:2.2}
.zx-fab:hover{background-position:88% 50%}
.zx-fab:active{transform:translateY(-16px) scale(.93)}
.zx-fab:focus-visible{box-shadow:0 0 0 6px var(--bg-canvas),0 0 0 9px rgba(69,189,180,.45),0 16px 30px -8px rgba(43,163,154,.75)}

@media (min-width:992px){.zx-dock,.zx-appbar{display:none!important}}
@media (max-width:991.98px){.zx-nav{display:none!important}}

/* ----------------------------------------------------------------
   9. TOASTS — snackbar above the dock on mobile
   ---------------------------------------------------------------- */
.zx-toasts{position:fixed;z-index:1100;inset-inline:0;bottom:calc(108px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 16px}
.zx-toasts .toast{pointer-events:auto;width:auto;max-width:420px;border-radius:var(--zx-r-lg);font-size:var(--zx-fs-sm);color:var(--fg-primary)}
.zx-toasts .toast-body{padding:12px 16px;display:flex;align-items:center;gap:10px}
.zx-toasts .zx-ico{width:18px;height:18px;color:var(--fg-brand)}
.zx-toasts .is-error .zx-ico{color:var(--danger)}
@media (min-width:992px){.zx-toasts{bottom:28px}}