/* SeeB4Coding — Image Compression Tool
   Shares the design tokens used across seeb4coding.in tools. */

*,*::before,*::after{box-sizing:border-box}

:root{
  --brand-1:#0800ff;
  --brand-2:#8e00e7;
  --grad:linear-gradient(120deg,#0800ff,#8e00e7);
  --bg:#f6f7fb;
  --bg-soft:#eef0f7;
  --surface:#ffffff;
  --surface-2:#f8f9fc;
  --text:#12142b;
  --text-muted:#5b6076;
  --border:#e3e6f0;
  --border-strong:#c9cfe2;
  --ok:#0f9d58;
  --ok-bg:#e7f6ee;
  --warn:#b25c00;
  --warn-bg:#fdf0e0;
  --danger:#c62828;
  --danger-bg:#fdecec;
  --shadow-sm:0 1px 2px rgba(18,20,43,.06),0 2px 8px rgba(18,20,43,.05);
  --shadow-md:0 4px 12px rgba(18,20,43,.07),0 12px 32px rgba(18,20,43,.07);
  --shadow-lg:0 12px 28px rgba(18,20,43,.12),0 32px 64px rgba(18,20,43,.14);
  --radius:14px;
  --radius-sm:10px;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --checker:#e9ecf5;
}

html[data-theme="dark"]{
  --bg:#0b0b14;
  --bg-soft:#12121f;
  --surface:#151623;
  --surface-2:#1c1d2d;
  --text:#eceefb;
  --text-muted:#a2a7c4;
  --border:#282a3d;
  --border-strong:#3a3d55;
  --ok:#4ade80;
  --ok-bg:#12301f;
  --warn:#fbbf24;
  --warn-bg:#33270a;
  --danger:#f87171;
  --danger-bg:#3a1414;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 12px rgba(0,0,0,.35),0 16px 40px rgba(0,0,0,.35);
  --shadow-lg:0 16px 40px rgba(0,0,0,.5),0 40px 80px rgba(0,0,0,.5);
  --checker:#23253a;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}

a{color:var(--brand-1)}
html[data-theme="dark"] a{color:#9aa8ff}

h1,h2,h3,h4{line-height:1.2;letter-spacing:-.015em}

.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:clamp(14px,3.5vw,28px)}
.wrap-narrow{max-width:900px}

.skip{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--text);padding:10px 16px;border-radius:0 0 8px 0;z-index:100}
.skip:focus{left:0}

:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--brand-2);
  outline-offset:2px;
  border-radius:6px;
}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------- header ---------------- */
.site-header{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);
}
.site-header .wrap{display:flex;align-items:center;gap:10px;min-height:64px}
.back-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:0 0 auto;
  border-radius:50%;color:var(--brand-1);text-decoration:none;
  border:1px solid var(--border);background:var(--surface-2);
  transition:transform .18s ease,background .18s ease;
}
.back-link:hover{transform:translateX(-2px);background:var(--bg-soft)}
.back-link svg{width:18px;height:18px}
html[data-theme="dark"] .back-link{color:#9aa8ff}
.brand{display:inline-flex;align-items:center;margin-right:auto;text-decoration:none;color:var(--text);min-width:0}
.brand img{display:block;width:160px;max-width:34vw;height:auto}
html[data-theme="dark"] .brand img{filter:brightness(0) invert(1)}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 13px;
  border:1px solid var(--border);border-radius:999px;
  background:var(--surface-2);color:var(--text);
  font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}
.icon-btn:hover{background:var(--bg-soft);border-color:var(--border-strong)}
.icon-btn svg{width:18px;height:18px;flex:0 0 auto}
#themeToggle .moon{display:none}
html[data-theme="dark"] #themeToggle .sun{display:none}
html[data-theme="dark"] #themeToggle .moon{display:block}
.tt-label{display:none}
@media (min-width:720px){.tt-label{display:inline}}

/* ---------------- hero ---------------- */
/* Kept deliberately short: the drop zone and the Compress button should both
   be reachable without scrolling on a laptop. */
.hero{text-align:center;padding:clamp(16px,3vw,30px) 0 clamp(12px,2vw,18px)}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;margin:0 0 18px;
  border:1px solid var(--border);border-radius:999px;
  background:var(--surface);box-shadow:var(--shadow-sm);
  font-size:.8rem;font-weight:600;color:var(--text-muted);letter-spacing:.02em;
}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.hero h1{
  margin:0 0 10px;
  font-size:clamp(1.6rem,4.2vw,2.6rem);
  line-height:1.12;font-weight:800;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
html[data-theme="dark"] .hero h1{background:linear-gradient(120deg,#7b8cff,#c77dff);-webkit-background-clip:text;background-clip:text}
.hero .sub{margin:0 auto;max-width:64ch;font-size:clamp(.98rem,2.2vw,1.12rem);color:var(--text-muted)}

/* ---------------- cards ---------------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
}
.tool{padding:clamp(14px,2.4vw,22px);margin-bottom:28px}

/* ---------------- tool layout ----------------
   Stacked on small screens; from 1000px the drop zone and the settings sit
   side by side, which roughly halves the height of the tool and keeps the
   Compress button in view instead of far below the fold. */
.tool-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:1000px){
  .tool-grid{grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr)}
  /* The drop zone stretches to match the settings column. */
  .tool-grid>.dropzone{height:100%}
}

/* ---------------- dropzone ---------------- */
.dropzone{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;
  min-height:clamp(160px,22vw,210px);
  padding:clamp(18px,3vw,30px);
  border:2px dashed var(--border-strong);
  border-radius:var(--radius);
  background:var(--surface-2);
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.dropzone:hover{border-color:var(--brand-2);background:var(--bg-soft)}
.dropzone.drag{border-color:var(--brand-2);background:var(--bg-soft);transform:scale(1.006)}
.dropzone.drag .dz-ico{transform:translateY(-4px) scale(1.06)}
.dz-ico{
  width:56px;height:56px;flex:0 0 auto;
  display:grid;place-items:center;border-radius:16px;
  background:var(--grad);color:#fff;
  box-shadow:0 8px 20px rgba(142,0,231,.28);
  transition:transform .2s ease;
}
.dz-ico svg{width:28px;height:28px}
.dz-title{margin:0;font-size:clamp(1rem,2.4vw,1.2rem);font-weight:700}
.dz-sub{margin:0;font-size:.88rem;color:var(--text-muted)}
.dz-sub kbd{
  font:inherit;font-size:.8em;font-family:var(--mono);
  border:1px solid var(--border-strong);border-bottom-width:2px;
  border-radius:5px;padding:1px 5px;background:var(--surface);
}
.dz-formats{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:2px}
.chip{
  font-size:.72rem;font-weight:700;letter-spacing:.03em;
  padding:3px 9px;border-radius:999px;
  background:var(--bg-soft);border:1px solid var(--border);color:var(--text-muted);
}

/* ---------------- settings ---------------- */
/* Spacing comes from the .tool-grid gap in both layouts. */
.settings{margin-top:0;display:grid;gap:12px;align-content:start}
.set-group{
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface-2);overflow:hidden;
}
.set-group>summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:10px;
  padding:13px 16px;font-weight:700;font-size:.92rem;
  user-select:none;
}
.set-group>summary::-webkit-details-marker{display:none}
.set-group>summary .caret{
  margin-left:auto;width:16px;height:16px;flex:0 0 auto;
  transition:transform .2s ease;color:var(--text-muted);
}
.set-group[open]>summary .caret{transform:rotate(180deg)}
.set-group>summary .g-ico{width:18px;height:18px;flex:0 0 auto;color:var(--brand-2)}
html[data-theme="dark"] .set-group>summary .g-ico{color:#c77dff}
.set-group>summary .badge{
  font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:999px;
  background:var(--grad);color:#fff;letter-spacing:.04em;
}
.set-body{padding:0 16px 16px;display:grid;gap:16px}

.field{display:grid;gap:7px}
.field>label,.field-label{font-size:.84rem;font-weight:600;color:var(--text-muted)}
.row{display:grid;gap:14px}
@media (min-width:640px){.row.two{grid-template-columns:1fr 1fr}.row.three{grid-template-columns:repeat(3,1fr)}}

/* segmented control */
.seg{
  display:flex;flex-wrap:wrap;gap:4px;padding:4px;
  background:var(--bg-soft);border:1px solid var(--border);
  border-radius:999px;
}
.seg button{
  flex:1 1 auto;min-width:66px;
  padding:8px 12px;border:0;border-radius:999px;
  background:transparent;color:var(--text-muted);
  font:inherit;font-size:.83rem;font-weight:600;cursor:pointer;
  transition:background .16s ease,color .16s ease;
  white-space:nowrap;
}
.seg button:hover:not([aria-pressed="true"]){color:var(--text);background:var(--surface)}
.seg button[aria-pressed="true"]{background:var(--grad);color:#fff;box-shadow:var(--shadow-sm)}
.seg button[disabled]{opacity:.4;cursor:not-allowed}

/* slider */
.slider-row{display:flex;align-items:center;gap:14px}
input[type=range]{
  -webkit-appearance:none;appearance:none;
  flex:1;height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--brand-1) 0%,var(--brand-2) var(--pct,50%),var(--border) var(--pct,50%));
  outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;border-radius:50%;
  background:var(--surface);border:3px solid var(--brand-2);
  box-shadow:var(--shadow-sm);cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:var(--surface);border:3px solid var(--brand-2);
  box-shadow:var(--shadow-sm);cursor:pointer;
}
.slider-val{
  flex:0 0 auto;min-width:62px;text-align:center;
  font-family:var(--mono);font-size:.86rem;font-weight:700;
  padding:5px 9px;border-radius:8px;
  background:var(--bg-soft);border:1px solid var(--border);
}

input[type=number],input[type=text],select{
  width:100%;padding:9px 12px;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text);
  font:inherit;font-size:.9rem;
}
input[type=number]:focus,select:focus{border-color:var(--brand-2)}

.hint{margin:0;font-size:.78rem;color:var(--text-muted);line-height:1.5}

/* toggle switch */
.switch{
  display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  padding:11px 13px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--surface);
  transition:border-color .16s ease,background .16s ease;
}
.switch:hover{border-color:var(--border-strong)}
.switch:has(input:checked){border-color:var(--brand-2);background:color-mix(in srgb,var(--brand-2) 5%,var(--surface))}
.switch input{position:absolute;opacity:0;width:0;height:0}
.sw-track{
  flex:0 0 auto;margin-top:2px;
  width:40px;height:23px;border-radius:999px;
  background:var(--border-strong);position:relative;
  transition:background .18s ease;
}
.sw-track::after{
  content:"";position:absolute;top:3px;left:3px;
  width:17px;height:17px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .18s ease;
}
.switch input:checked+.sw-track{background:var(--grad)}
.switch input:checked+.sw-track::after{transform:translateX(17px)}
.switch input:focus-visible+.sw-track{outline:3px solid var(--brand-2);outline-offset:2px}
.switch input:disabled+.sw-track{opacity:.45}
.sw-text{display:grid;gap:2px;min-width:0}
.sw-title{font-size:.9rem;font-weight:650}
.sw-desc{font-size:.78rem;color:var(--text-muted);line-height:1.45}

/* ai status */
.ai-status{
  display:none;align-items:center;gap:10px;
  padding:10px 13px;border-radius:var(--radius-sm);
  background:var(--bg-soft);border:1px solid var(--border);
  font-size:.82rem;color:var(--text-muted);
}
.ai-status.on{display:flex}
.ai-status.err{background:var(--danger-bg);border-color:var(--danger);color:var(--danger)}
.ai-status.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.ai-bar{flex:1;height:6px;border-radius:999px;background:var(--border);overflow:hidden;min-width:60px}
.ai-bar>i{display:block;height:100%;width:0;background:var(--grad);transition:width .2s ease}
.spin{
  width:15px;height:15px;flex:0 0 auto;border-radius:50%;
  border:2px solid var(--border-strong);border-top-color:var(--brand-2);
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------- actions ---------------- */
.actions{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--border);
}

/* Once images are queued, the action bar pins to the bottom of the viewport so
   Compress is always one click away, however far down the settings you are.
   It stays out of the way entirely until there is something to compress. */
body.has-files .actions{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  margin:0;border-top:1px solid var(--border);
  padding-block:11px;
  /* Line the contents up with the 1180px page wrap on wide screens. */
  padding-inline:max(clamp(14px,3.5vw,28px), calc((100vw - 1180px) / 2 + 22px));
  background:color-mix(in srgb,var(--surface) 98%,transparent);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 -4px 22px rgba(18,20,43,.10);
  animation:bar-up .22s ease;
}
html[data-theme="dark"] body.has-files .actions{box-shadow:0 -4px 22px rgba(0,0,0,.5)}
@keyframes bar-up{from{transform:translateY(100%)}to{transform:none}}
/* Reserve the space the fixed bar covers. */
body.has-files{padding-bottom:84px}
body.has-files #toasts{bottom:96px}
@media (max-width:560px){
  body.has-files .actions{gap:8px}
  body.has-files .actions .btn{flex:1 1 auto;padding-inline:14px}
  body.has-files{padding-bottom:150px}
  body.has-files #toasts{bottom:160px}
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:999px;border:1px solid transparent;
  font:inherit;font-size:.9rem;font-weight:650;cursor:pointer;
  text-decoration:none;white-space:nowrap;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,opacity .16s ease;
}
.btn svg{width:17px;height:17px;flex:0 0 auto}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 4px 14px rgba(142,0,231,.3)}
.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 7px 20px rgba(142,0,231,.4)}
.btn-ghost{background:var(--surface-2);color:var(--text);border-color:var(--border)}
.btn-ghost:hover:not(:disabled){background:var(--bg-soft);border-color:var(--border-strong)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.actions .spacer{flex:1 1 auto}
.stat-pill{
  display:none;align-items:center;gap:7px;
  padding:7px 14px;border-radius:999px;
  background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok);
  font-size:.84rem;font-weight:700;
}
.stat-pill.on{display:inline-flex}
/* Without an explicit box the inline SVG stretches to fill the flex line. */
.stat-pill svg{width:16px;height:16px;flex:0 0 auto}

/* ---------------- results ---------------- */
.results{margin-top:22px;display:grid;gap:10px}
.results:empty{display:none}
.res-head{
  display:none;align-items:center;gap:12px;
  font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-muted);padding:0 14px;
}
@media (min-width:900px){.res-head{display:flex}}
.res-head .c-name{flex:1 1 auto;min-width:0}
.res-head .c-size{flex:0 0 92px;text-align:right}
.res-head .c-save{flex:0 0 96px;text-align:right}
.res-head .c-act{flex:0 0 172px;text-align:right}

.res{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  padding:12px 14px;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface-2);
  animation:fade-up .25s ease;
}
@keyframes fade-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.res.err{border-color:var(--danger);background:var(--danger-bg)}
.res-thumb{
  flex:0 0 auto;width:46px;height:46px;border-radius:9px;overflow:hidden;
  border:1px solid var(--border);
  background-color:var(--checker);
  background-image:
    linear-gradient(45deg,rgba(128,128,128,.22) 25%,transparent 25%),
    linear-gradient(-45deg,rgba(128,128,128,.22) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,rgba(128,128,128,.22) 75%),
    linear-gradient(-45deg,transparent 75%,rgba(128,128,128,.22) 75%);
  background-size:12px 12px;
  background-position:0 0,0 6px,6px -6px,-6px 0;
}
.res-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.res-main{flex:1 1 190px;min-width:0}
.res-name{
  font-size:.88rem;font-weight:650;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.res-meta{font-size:.75rem;color:var(--text-muted);display:flex;flex-wrap:wrap;gap:4px 9px}
.res-meta .tag{
  font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.03em;
  padding:1px 6px;border-radius:5px;background:var(--bg-soft);border:1px solid var(--border);
}
.res-size{
  flex:0 0 auto;min-width:92px;text-align:right;
  font-family:var(--mono);font-size:.8rem;line-height:1.4;
}
.res-size .from{color:var(--text-muted);text-decoration:line-through;display:block;font-size:.74rem}
.res-size .to{font-weight:700;display:block}
.res-save{flex:0 0 auto;min-width:96px;text-align:right}
.save-val{font-size:.95rem;font-weight:800;font-family:var(--mono)}
.save-val.good{color:var(--ok)}
.save-val.bad{color:var(--warn)}
.save-bar{height:5px;border-radius:999px;background:var(--border);overflow:hidden;margin-top:4px}
.save-bar>i{display:block;height:100%;width:0;background:var(--ok);transition:width .4s ease}
.save-bar>i.bad{background:var(--warn)}
.res-act{flex:0 0 auto;display:flex;gap:7px;margin-left:auto}
.mini{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:34px;padding:0 13px;border-radius:8px;
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  font:inherit;font-size:.8rem;font-weight:650;cursor:pointer;text-decoration:none;
  transition:background .16s ease,border-color .16s ease;
}
.mini:hover{background:var(--bg-soft);border-color:var(--border-strong)}
.mini svg{width:14px;height:14px}
.mini.primary{background:var(--grad);color:#fff;border-color:transparent}
.mini.primary:hover{opacity:.92;background:var(--grad)}
.res-prog{
  flex:1 1 100%;height:4px;border-radius:999px;
  background:var(--border);overflow:hidden;
}
.res-prog>i{display:block;height:100%;width:30%;background:var(--grad);animation:indet 1.1s ease-in-out infinite}
@keyframes indet{0%{margin-left:-30%}100%{margin-left:100%}}

/* ---------------- compare modal ---------------- */
.modal{
  position:fixed;inset:0;z-index:60;
  display:none;align-items:center;justify-content:center;
  padding:clamp(12px,3vw,28px);
  background:rgba(8,8,20,.72);backdrop-filter:blur(4px);
}
.modal.on{display:flex}
.modal-box{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);
  width:min(980px,100%);max-height:92vh;display:flex;flex-direction:column;overflow:hidden;
}
.modal-head{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--border);
}
.modal-head h3{margin:0;font-size:1rem;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-btn{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--border);background:var(--surface-2);color:var(--text);
  display:grid;place-items:center;cursor:pointer;
}
.x-btn:hover{background:var(--bg-soft)}
.x-btn svg{width:16px;height:16px}
.modal-body{padding:16px 18px 18px;overflow:auto}
.cmp{
  position:relative;width:100%;overflow:hidden;
  border-radius:var(--radius-sm);border:1px solid var(--border);
  background-color:var(--checker);
  background-image:
    linear-gradient(45deg,rgba(128,128,128,.22) 25%,transparent 25%),
    linear-gradient(-45deg,rgba(128,128,128,.22) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,rgba(128,128,128,.22) 75%),
    linear-gradient(-45deg,transparent 75%,rgba(128,128,128,.22) 75%);
  background-size:20px 20px;
  background-position:0 0,0 10px,10px -10px,-10px 0;
  user-select:none;touch-action:none;
}
.cmp img{display:block;width:100%;height:auto}
.cmp .after{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;clip-path:inset(0 0 0 50%)}
.cmp-handle{
  position:absolute;top:0;bottom:0;left:50%;width:3px;
  background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35);
  transform:translateX(-50%);pointer-events:none;
}
.cmp-handle::after{
  content:"";position:absolute;top:50%;left:50%;
  width:38px;height:38px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.cmp-lab{
  position:absolute;top:10px;padding:4px 10px;border-radius:999px;
  background:rgba(8,8,20,.72);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.04em;
  pointer-events:none;z-index:2;
}
.cmp-lab.l{left:10px}
.cmp-lab.r{right:10px}
.cmp-meta{
  display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;
  font-size:.83rem;color:var(--text-muted);
}
.cmp-meta b{color:var(--text);font-family:var(--mono)}
.cmp-range{width:100%;margin-top:12px}

/* ---------------- content sections ---------------- */
.section{margin:clamp(34px,6vw,60px) 0}
.section>h2{
  font-size:clamp(1.35rem,3.4vw,2rem);
  margin:0 0 10px;text-align:center;font-weight:800;
}
.section>.lede{
  text-align:center;color:var(--text-muted);max-width:66ch;margin:0 auto clamp(22px,4vw,34px);
  font-size:clamp(.94rem,2vw,1.03rem);
}
.grid{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:620px){.grid.g2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.grid.g3{grid-template-columns:repeat(3,1fr)}}
.tile{
  padding:20px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--surface);
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease;
}
.tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.tile .t-ico{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:var(--grad);color:#fff;margin-bottom:13px;
}
.tile .t-ico svg{width:20px;height:20px}
.tile h3{margin:0 0 7px;font-size:1.02rem}
.tile p{margin:0;font-size:.88rem;color:var(--text-muted);line-height:1.6}

.steps{counter-reset:s;display:grid;gap:14px}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{
  position:relative;padding:22px 20px 20px;
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);box-shadow:var(--shadow-sm);
}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;top:-14px;left:20px;
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--grad);color:#fff;font-weight:800;font-size:.92rem;
  box-shadow:0 4px 12px rgba(142,0,231,.3);
}
.step h3{margin:8px 0 7px;font-size:1rem}
.step p{margin:0;font-size:.88rem;color:var(--text-muted)}

.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:660px;font-size:.88rem}
th,td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
thead th{background:var(--surface-2);font-weight:700;font-size:.8rem;letter-spacing:.03em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td code{font-family:var(--mono);font-size:.86em;background:var(--bg-soft);padding:1px 6px;border-radius:5px;border:1px solid var(--border)}

.faq{display:grid;gap:10px}
.faq details{
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface);overflow:hidden;
}
.faq summary{
  cursor:pointer;padding:15px 18px;font-weight:650;font-size:.95rem;
  list-style:none;display:flex;align-items:center;gap:12px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";margin-left:auto;flex:0 0 auto;
  width:9px;height:9px;border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);
  transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.faq details[open] summary{border-bottom:1px solid var(--border)}
.faq .a{padding:14px 18px 17px;font-size:.9rem;color:var(--text-muted);line-height:1.65}
.faq .a p{margin:0 0 10px}
.faq .a p:last-child{margin:0}

.prose{max-width:72ch;margin-inline:auto}
.prose h2{font-size:clamp(1.3rem,3.2vw,1.8rem);margin:34px 0 12px}
.prose h3{font-size:1.05rem;margin:24px 0 8px}
.prose p,.prose li{color:var(--text-muted);font-size:.94rem;line-height:1.7}
.prose ul{padding-left:20px}
.prose li{margin-bottom:7px}
.prose strong{color:var(--text)}

.ad-slot{margin:clamp(26px,5vw,44px) 0;text-align:center;min-height:1px;overflow:hidden}

/* ---------------- footer ---------------- */
.site-footer{
  border-top:1px solid var(--border);
  background:var(--surface);
  padding:26px 0;margin-top:clamp(34px,6vw,60px);
  font-size:.86rem;color:var(--text-muted);
}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:space-between}
.site-footer a{font-weight:600;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 16px}

/* ---------------- toasts ---------------- */
#toasts{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center;
  pointer-events:none;padding-inline:12px;width:100%;max-width:520px;
}
.toast{
  display:flex;align-items:center;gap:9px;
  padding:11px 17px;border-radius:11px;
  background:var(--text);color:var(--bg);
  font-size:.87rem;font-weight:600;box-shadow:var(--shadow-md);
  animation:toast-in .25s ease;
}
.toast.err{background:var(--danger);color:#fff}
.toast.ok{background:var(--ok);color:#fff}
.toast svg{width:16px;height:16px;flex:0 0 auto}
@keyframes toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media print{
  .site-header,.dropzone,.settings,.actions,#toasts,.site-footer,.ad-slot,.res-act{display:none!important}
  .card{box-shadow:none;border:0}
}