/* PixelFree Tools — design system
   Palette: graphite ink on warm-white, one confident signal blue, grounded green/red for state.
   Type: Sora (display, technical geometric) + Inter (body) + IBM Plex Mono (data/numbers — the tool's precision cue). */

:root{
  --bg:#FAFAF8;
  --surface:#FFFFFF;
  --surface-sunken:#F3F4F2;
  --ink:#15171B;
  --ink-soft:#5B616B;
  --ink-faint:#68707A;
  --border:#E5E7E3;
  --border-strong:#D3D6D1;
  --accent:#2551E8;
  --accent-ink:#1B3AB0;
  --accent-soft:#EAEFFE;
  --signal:#12805C;
  --signal-soft:#E6F5EF;
  --warn:#C2410C;
  --warn-soft:#FDEEE7;
  --danger:#B3261E;
  --danger-soft:#FBEAE8;
  --radius-s:6px;
  --radius-m:10px;
  --radius-l:16px;
  --shadow-1:0 1px 2px rgba(20,22,25,.06);
  --shadow-2:0 8px 24px rgba(20,22,25,.08);
  --maxw:1180px;
  --font-display:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --font-body:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --font-mono:ui-monospace,'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit}
h1,h2,h3{font-family:var(--font-display);font-weight:650;letter-spacing:-0.02em;line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(1.9rem,4.4vw,3rem)}
h2{font-size:clamp(1.4rem,2.6vw,1.9rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important}}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(250,250,248,.92);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border)}
.site-header .bar{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.08rem;text-decoration:none;color:var(--ink)}
.brand-mark{width:22px;height:22px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px;flex:none}
.brand-mark i{background:var(--accent);border-radius:1px}
.brand-mark i:nth-child(2),.brand-mark i:nth-child(4),.brand-mark i:nth-child(6),.brand-mark i:nth-child(8){background:var(--ink)}
.brand-mark i:nth-child(5){background:var(--signal)}
.main-nav{display:none;gap:22px;font-size:.94rem}
.main-nav a{text-decoration:none;color:var(--ink-soft);padding:8px 0;border-bottom:2px solid transparent}
.main-nav a:hover{color:var(--ink)}
.header-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.btn-alltools{display:none}
.hamburger{border:1px solid var(--border-strong);background:var(--surface);border-radius:var(--radius-s);width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.hamburger span,.hamburger span::before,.hamburger span::after{content:'';display:block;width:18px;height:2px;background:var(--ink);position:relative;transition:transform .15s}
.hamburger span::before{position:absolute;top:-6px}
.hamburger span::after{position:absolute;top:6px}
.mobile-nav{display:none;flex-direction:column;border-top:1px solid var(--border);background:var(--surface)}
.mobile-nav.open{display:flex}
.mobile-nav a{padding:14px 20px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--border);font-size:.98rem}
@media(min-width:900px){
  .main-nav{display:flex}
  .btn-alltools{display:inline-flex}
  .hamburger{display:none}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-m);padding:12px 20px;font-size:.95rem;font-weight:600;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .08s ease, box-shadow .15s ease, background .15s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-ink)}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--border-strong)}
.btn-secondary:hover{border-color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink-soft);border-color:transparent;padding:12px 14px}
.btn-ghost:hover{color:var(--ink)}
.btn-download{background:var(--signal);color:#fff;font-size:1.02rem;padding:14px 26px;box-shadow:var(--shadow-1)}
.btn-download:hover{background:#0E6B4B}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-block{width:100%}

/* ---------- Hero / search ---------- */
.hero{padding:64px 0 40px;text-align:center}
.hero .eyebrow{display:inline-block;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:6px 12px;border-radius:99px;margin-bottom:18px;font-weight:600}
.hero h1{max-width:820px;margin-left:auto;margin-right:auto}
.hero .sub{max-width:620px;margin:0 auto 28px;color:var(--ink-soft);font-size:1.08rem}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:36px}
.search-box{max-width:560px;margin:0 auto;position:relative}
.search-box input{width:100%;padding:16px 18px 16px 46px;border-radius:var(--radius-l);border:1.5px solid var(--border-strong);background:var(--surface);font-size:1rem;box-shadow:var(--shadow-1)}
.search-box input:focus{border-color:var(--accent)}
.search-box svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--ink-faint)}
.search-hints{margin-top:10px;font-size:.85rem;color:var(--ink-faint)}
.search-hints button{border:none;background:none;color:var(--ink-soft);text-decoration:underline;cursor:pointer;font-size:inherit;padding:0 3px}
#search-results{max-width:560px;margin:14px auto 0;text-align:left;display:none}
#search-results.open{display:block}
#search-results .sr-item{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-top:none;text-decoration:none;color:var(--ink)}
#search-results .sr-item:first-child{border-top:1px solid var(--border);border-radius:var(--radius-m) var(--radius-m) 0 0}
#search-results .sr-item:last-child{border-radius:0 0 var(--radius-m) var(--radius-m)}
#search-results .sr-item:hover{background:var(--surface-sunken)}
#search-results .sr-empty{padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);color:var(--ink-faint);font-size:.9rem}

/* ---------- Sections ---------- */
.section{padding:44px 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.section-head p{color:var(--ink-soft);margin:0}
.section-head a{font-size:.9rem;font-weight:600;color:var(--accent);text-decoration:none;white-space:nowrap}

/* ---------- Tool cards / grid ---------- */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.tool-card{display:flex;flex-direction:column;gap:10px;padding:18px;border:1px solid var(--border);border-radius:var(--radius-m);background:var(--surface);text-decoration:none;color:var(--ink);transition:border-color .15s, box-shadow .15s, transform .1s}
.tool-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-1);transform:translateY(-1px)}
.tool-card .tc-top{display:flex;align-items:center;gap:10px}
.tc-icon{width:34px;height:34px;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.tc-icon svg{width:18px;height:18px}
.tc-badge{margin-left:auto;font-size:.68rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--signal);background:var(--signal-soft);padding:3px 8px;border-radius:99px}
.tool-card h3{font-size:1rem;margin:0}
.tool-card p{font-size:.87rem;color:var(--ink-soft);margin:0;flex:1}
.tc-cta{font-size:.85rem;font-weight:600;color:var(--accent)}
.tool-card.popular{background:linear-gradient(180deg,#fff,var(--accent-soft) 260%);border-color:var(--accent);box-shadow:var(--shadow-1)}

/* ---------- Category tabs ---------- */
.cat-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:24px;-webkit-overflow-scrolling:touch}
.cat-tabs a,.cat-tabs button{white-space:nowrap;padding:9px 16px;border-radius:99px;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink-soft);text-decoration:none;font-size:.88rem;font-weight:600;cursor:pointer}
.cat-tabs a.active,.cat-tabs button.active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- Breadcrumb ---------- */
.breadcrumb{font-size:.85rem;color:var(--ink-faint);margin-bottom:14px}
.breadcrumb a{color:var(--ink-soft);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb span{margin:0 6px}

/* ---------- Tool page layout ---------- */
.tool-hero{padding:28px 0 8px}
.tool-hero h1{margin-bottom:8px}
.tool-hero .lede{color:var(--ink-soft);max-width:680px;font-size:1.02rem}
.privacy-line{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--ink-faint);margin-top:14px}
.privacy-line svg{flex:none;color:var(--signal)}

.tool-app{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);padding:22px;margin:22px 0 8px;box-shadow:var(--shadow-1)}
@media(min-width:720px){.tool-app{padding:30px}}

.upload-zone{border:2px dashed var(--border-strong);border-radius:var(--radius-m);padding:40px 20px;text-align:center;cursor:pointer;background:var(--surface-sunken);transition:border-color .15s, background .15s}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--accent);background:var(--accent-soft)}
.upload-zone .uz-icon{width:48px;height:48px;margin:0 auto 14px;color:var(--accent)}
.upload-zone h3{margin-bottom:6px;font-size:1.1rem}
.upload-zone .uz-sub{color:var(--ink-soft);font-size:.9rem;margin-bottom:16px}
.upload-zone input[type=file]{display:none}
.uz-meta{margin-top:18px;font-size:.8rem;color:var(--ink-faint);display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.uz-meta b{color:var(--ink-soft);font-weight:600}

.file-panel{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:14px;background:var(--surface-sunken);border-radius:var(--radius-m);border:1px solid var(--border)}
.file-panel .thumb{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--border);background:#fff;flex:none}
.file-panel .fp-info{flex:1;min-width:160px}
.file-panel .fp-info .fname{font-weight:600;font-size:.92rem;word-break:break-all}
.file-panel .fp-info .fmeta{font-size:.82rem;color:var(--ink-soft);font-family:var(--font-mono)}
.file-panel .fp-actions{display:flex;gap:8px}

.settings-panel{margin-top:18px;padding-top:18px;border-top:1px solid var(--border)}
.field-row{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:14px}
@media(min-width:560px){.field-row.two{grid-template-columns:1fr 1fr}}
.field label{display:block;font-size:.82rem;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.field input[type=number],.field select,.field input[type=text]{width:100%;padding:10px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-s);font-size:.95rem;font-family:var(--font-mono);background:#fff}
.field input[type=range]{width:100%;accent-color:var(--accent)}
.range-value{font-family:var(--font-mono);font-size:.85rem;color:var(--ink-soft)}
.checkline{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--ink-soft)}
.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-bottom:14px}
.preset-grid button{padding:10px;border:1px solid var(--border-strong);border-radius:var(--radius-s);background:#fff;cursor:pointer;font-size:.85rem;text-align:left}
.preset-grid button.active,.preset-grid button:hover{border-color:var(--accent);background:var(--accent-soft)}

.actions-row{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}

.processing-state{text-align:center;padding:40px 20px}
.spinner{width:38px;height:38px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--accent);margin:0 auto 16px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.progress-track{max-width:320px;margin:16px auto 0;height:6px;border-radius:99px;background:var(--border);overflow:hidden}
.progress-fill{height:100%;background:var(--accent);width:0%;transition:width .15s ease}

.result-state{display:none}
.result-state.open{display:block}
.result-compare{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:18px}
@media(min-width:640px){.result-compare{grid-template-columns:1fr 1fr}}
.compare-card{border:1px solid var(--border);border-radius:var(--radius-m);overflow:hidden;background:var(--surface-sunken)}
.compare-card .cc-label{padding:8px 12px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);background:var(--surface);border-bottom:1px solid var(--border)}
.compare-card img{width:100%;max-height:280px;object-fit:contain;background:repeating-conic-gradient(#f2f2f0 0% 25%, #fff 0% 50%) 50%/16px 16px}
.result-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:18px}
@media(min-width:560px){.result-stats{grid-template-columns:repeat(4,1fr)}}
.stat{padding:12px;border:1px solid var(--border);border-radius:var(--radius-s);background:var(--surface-sunken)}
.stat .stat-label{font-size:.72rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.03em}
.stat .stat-value{font-family:var(--font-mono);font-size:1.05rem;font-weight:600;margin-top:2px}
.stat .stat-value.good{color:var(--signal)}

.error-state{display:none;padding:18px;background:var(--danger-soft);border:1px solid #F0C9C5;border-radius:var(--radius-m);color:var(--danger);font-size:.92rem;margin-top:14px}
.error-state.open{display:flex;align-items:flex-start;gap:10px}

.ocr-text-out{width:100%;min-height:180px;border:1px solid var(--border-strong);border-radius:var(--radius-s);padding:12px;font-family:var(--font-mono);font-size:.9rem;resize:vertical}

/* Crop canvas */
.crop-stage{position:relative;max-width:100%;touch-action:none;background:var(--surface-sunken);border-radius:var(--radius-s);overflow:hidden}
.crop-stage canvas{display:block;max-width:100%;height:auto}

/* ---------- Ads ---------- */
.ad-slot{width:100%;margin:28px 0;display:flex;flex-direction:column;align-items:center;gap:6px}
.ad-slot .ad-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint)}
.ad-slot .ad-box{width:100%;max-width:728px;min-height:90px;border:1px dashed var(--border-strong);border-radius:var(--radius-s);background:var(--surface-sunken);display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-size:.8rem}
.ad-slot.ad-rect .ad-box{max-width:336px;min-height:280px}

/* ---------- Content sections on tool pages ---------- */
.content-block{margin-top:8px}
.content-block h2{margin-top:0}
.content-grid{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:820px){.content-grid{grid-template-columns:2fr 1fr}}
.faq-item{border-bottom:1px solid var(--border);padding:14px 0}
.faq-item summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';color:var(--accent);font-size:1.2rem}
.faq-item[open] summary::after{content:'−'}
.faq-item p{margin-top:10px;color:var(--ink-soft)}
.related-list{display:flex;flex-direction:column;gap:8px}
.related-list a{display:block;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-s);text-decoration:none;color:var(--ink);font-size:.9rem}
.related-list a:hover{border-color:var(--accent);color:var(--accent)}
.tips-list{padding-left:18px;color:var(--ink-soft)}
.tips-list li{margin-bottom:6px}

/* ---------- Category / All tools page ---------- */
.filters-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:22px}
.filters-bar select{padding:9px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-s);font-size:.88rem;background:#fff}
.count-tag{font-size:.85rem;color:var(--ink-faint)}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--border);margin-top:60px;padding:44px 0 28px;background:var(--surface)}
.footer-grid{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:720px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.footer-grid h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);margin-bottom:12px}
.footer-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.footer-grid a{text-decoration:none;color:var(--ink-soft);font-size:.9rem}
.footer-grid a:hover{color:var(--ink)}
.footer-bottom{margin-top:36px;padding-top:20px;border-top:1px solid var(--border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.82rem;color:var(--ink-faint)}

/* generic page (about/privacy/terms) */
.prose{max-width:760px}
.prose h2{margin-top:1.6em}
.prose ul{color:var(--ink-soft)}

/* Compression UX */
.kb-chooser{margin-bottom:16px;padding:14px;border:1px solid var(--border);border-radius:var(--radius-m);background:var(--surface-sunken)}
.kb-chooser-title{font-size:.86rem;font-weight:700;color:var(--ink-soft);margin-bottom:10px}
.kb-options{display:flex;gap:8px;flex-wrap:wrap}
.kb-option{min-width:62px;padding:9px 10px;border:1px solid var(--border-strong);border-radius:10px;background:#fff;color:var(--ink);font-weight:700;cursor:pointer;transition:.15s}
.kb-option span{font-size:.7rem;margin-left:2px;color:var(--ink-soft)}
.kb-option:hover,.kb-option.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.kb-option.active span{color:var(--accent)}
.change-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:8px}
.live-size{font-family:var(--font-mono);font-weight:700;font-size:.9rem;color:#1677ff;background:rgba(22,119,255,.08);border:1px solid rgba(22,119,255,.18);border-radius:999px;padding:7px 11px}

/* Enhanced resize editors */
.live-dims{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-m);background:var(--accent-soft);color:var(--ink-soft);font-size:.88rem}.live-dims b{color:var(--accent)}
.tool-callout{display:flex;flex-direction:column;gap:3px;padding:13px 14px;border:1px solid #CBD7FF;background:#F3F6FF;border-radius:var(--radius-m);margin-bottom:14px}.tool-callout b{color:var(--accent);font-family:var(--font-display)}.tool-callout span{font-size:.86rem;color:var(--ink-soft)}
.visual-editor .visual-presets button{display:flex;flex-direction:column;gap:2px}.visual-editor .visual-presets small{color:var(--ink-faint);font-size:.72rem}.editor-stage{display:flex;justify-content:center;padding:18px;border-radius:var(--radius-m);background:linear-gradient(135deg,#F3F4F2,#EAEFFE);margin:14px 0}.editor-frame{position:relative;width:min(100%,360px);max-height:460px;overflow:hidden;background:#fff;border:2px solid var(--accent);border-radius:12px;box-shadow:var(--shadow-2)}.editor-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform-origin:center;will-change:transform}.guide{position:absolute;z-index:2;pointer-events:none;background:rgba(255,255,255,.65)}.guide-v{left:50%;top:0;bottom:0;width:1px}.guide-h{top:50%;left:0;right:0;height:1px}.face-guide{position:absolute;z-index:2;left:50%;top:50%;width:min(48%,160px);aspect-ratio:.78 / 1;transform:translate(-50%,-50%);border:1.5px dashed rgba(255,255,255,.92);border-radius:50%;pointer-events:none;box-shadow:0 0 0 999px rgba(10,18,35,.06)}.editor-tools{display:grid;grid-template-columns:1fr;gap:12px}@media(min-width:700px){.editor-tools{grid-template-columns:1fr 1fr}}.signature-editor .preset-grid{margin:12px 0}

/* Global passport studio */
.passport-chooser{background:linear-gradient(180deg,#fff,#F7F9FF);border:1px solid var(--border);border-radius:14px;padding:18px;margin-top:0}.passport-title{margin-bottom:16px}.passport-spec-card{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 16px;border:1px solid #C9D5FF;background:#EEF3FF;border-radius:12px;margin:14px 0}.passport-spec-card strong{display:block;color:#173EA8;font-family:var(--font-mono);font-size:1.05rem;margin-top:2px}.passport-spec-kicker{display:block;color:var(--ink-soft);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700}.passport-verified{color:#173EA8;background:#fff;border:1px solid #B9C9FF;border-radius:99px;padding:5px 9px;font-size:.75rem;font-weight:700}.passport-requirements{border-left:3px solid var(--accent);padding:10px 12px;background:#fff;border-radius:0 10px 10px 0}.passport-requirements ul{margin:8px 0;padding-left:18px;color:var(--ink-soft);font-size:.88rem}.passport-requirements small{display:block;color:var(--ink-faint);line-height:1.45}.passport-chooser select{background:#fff}.visual-editor{margin-top:14px}

/* ---------- Live reprocessing + social media studio ---------- */
.live-result-note{margin:4px 0 14px;padding:10px 12px;border:1px solid var(--accent);border-radius:var(--radius-s);background:var(--accent-soft);color:var(--accent-ink);font-size:.84rem}
.compare-card video{width:100%;max-height:360px;display:block;background:#0d0f12;object-fit:contain}
.social-video-editor .preset-grid button{display:flex;flex-direction:column;gap:2px}
.social-video-editor .preset-grid button b{font-size:.86rem;color:var(--ink)}
.social-video-editor .preset-grid button span{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-soft)}
.social-video-editor .preset-grid button.active b{color:var(--accent-ink)}
.social-video-note{margin:8px 0 0;color:var(--ink-soft);font-size:.82rem}
.media-compare video{aspect-ratio:auto}
@media(max-width:560px){.social-video-editor .preset-grid{grid-template-columns:1fr 1fr}.media-compare video{max-height:260px}}

.frame-ratio-badge{position:absolute;z-index:3;right:8px;bottom:8px;padding:4px 7px;border-radius:999px;background:rgba(15,23,42,.72);color:#fff;font:600 .68rem var(--font-mono);pointer-events:none}.social-studio-head+.visual-editor .face-guide{display:none!important}

/* Direct crop dragging + social video preview */
.editor-frame{touch-action:none;cursor:grab}.editor-frame.dragging{cursor:grabbing}.editor-photo{user-select:none;-webkit-user-drag:none;pointer-events:none}.editor-drag-hint{margin:8px 0 4px;color:var(--ink-soft);font-size:.82rem}.video-crop-stage{display:flex;justify-content:center;padding:18px;border-radius:var(--radius-m);background:linear-gradient(135deg,#F3F4F2,#EAEFFE);margin:14px 0}.video-crop-frame{position:relative;width:min(100%,520px);max-height:460px;overflow:hidden;background:#101318;border:2px solid var(--accent);border-radius:12px}.video-crop-frame video{display:block;width:100%;height:100%;object-fit:cover;background:#101318}.video-crop-frame .frame-ratio-badge{z-index:4}

/* Context crop workspace: keep the whole source visible while the frame shows export crop */
.editor-stage{position:relative;min-height:380px;overflow:hidden;isolation:isolate}
.editor-ghost{position:absolute;z-index:0;left:10%;top:10%;width:80%;height:80%;object-fit:contain;opacity:.20;filter:saturate(.75);transform-origin:center;pointer-events:none;transition:opacity .15s}
.editor-frame{z-index:2;overflow:hidden;background:rgba(255,255,255,.92)}
.editor-frame::before{content:"EXPORT AREA";position:absolute;z-index:5;left:8px;top:8px;padding:3px 7px;border-radius:999px;background:rgba(37,81,232,.88);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.04em;pointer-events:none}
.face-guide{top:var(--head-top,15%);width:52%;height:var(--head-pct,60%);aspect-ratio:auto;transform:translateX(-50%);border-radius:46% 46% 50% 50%;box-shadow:none}
.face-guide::before,.face-guide::after{content:"";position:absolute;left:-18%;right:-18%;border-top:1px dashed rgba(255,255,255,.9)}
.face-guide::before{top:0}.face-guide::after{bottom:0}
.video-crop-frame{touch-action:none;cursor:grab}.video-crop-frame video{transform-origin:center;will-change:transform}
.social-platform-pills{display:flex;gap:8px;overflow-x:auto;padding:2px 0 18px;margin-top:-4px}.social-platform-pills a{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:8px 13px;border:1px solid var(--border-strong);border-radius:999px;background:#fff;color:var(--ink);text-decoration:none;font-size:.84rem;font-weight:600}.social-platform-pills a:hover{border-color:var(--accent);box-shadow:var(--shadow-1)}.brand-mini{width:20px;height:20px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800}.brand-mini.ig{color:#e1306c;border:1.5px solid #e1306c}.brand-mini.fb{background:#1877f2;color:#fff;border-radius:50%}.brand-mini.li{background:#0a66c2;color:#fff}.brand-mini.tt{background:#111;color:#fff}.brand-mini.yt{background:#ff0033;color:#fff}


/* v4 crop workspace — one source image, one export frame, no duplicate/ghost mismatch */
.crop-workspace{position:relative;width:100%;height:520px;overflow:hidden;margin:14px 0;border-radius:14px;background:linear-gradient(135deg,#eef1f5,#e8edf8);touch-action:none;cursor:grab;isolation:isolate}
.crop-workspace.dragging{cursor:grabbing}
.workspace-photo{position:absolute;z-index:1;max-width:none!important;display:block;transform-origin:center;user-select:none;-webkit-user-drag:none;pointer-events:none}
.workspace-frame{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);background:transparent;border:3px solid var(--accent);border-radius:12px;box-shadow:0 0 0 9999px rgba(250,250,248,.72);pointer-events:none;overflow:hidden}
.workspace-frame .guide{z-index:5;background:rgba(255,255,255,.72)}
.workspace-frame .frame-ratio-badge{z-index:6}
.passport-head-guide{position:absolute;z-index:6;left:8%;right:8%;top:0;bottom:0;pointer-events:none}
.passport-head-guide .head-line{position:absolute;left:0;right:0;border-top:2px dashed rgba(255,255,255,.95);filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.passport-head-guide .head-top{top:var(--head-top,15%)}
.passport-head-guide .head-chin{top:var(--head-bottom,75%)}
.passport-head-guide .head-line i{position:absolute;right:3px;top:-18px;padding:2px 5px;border-radius:5px;background:rgba(15,23,42,.72);color:#fff;font-size:.62rem;font-style:normal;white-space:nowrap}
.passport-head-guide .head-chin i{top:3px}
@media(max-width:640px){.crop-workspace{height:430px}.workspace-frame{border-width:2px}}

/* Colored vector tool cards + codec fallback */
.tc-icon{background:#f7f8fb;border:1px solid #eef0f5;overflow:hidden}
.tc-icon svg{width:20px;height:20px;display:block}
.video-preview-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:#111827;color:#fff;gap:7px;z-index:1}
.video-preview-fallback b{font-size:.95rem}
.video-preview-fallback span{max-width:340px;font-size:.82rem;line-height:1.45;color:#d1d5db}
.video-crop-frame{position:relative;overflow:hidden}
.video-crop-frame .frame-ratio-badge{z-index:3}


/* v6 — true preset-shaped video frames + large visual vector cards */
.video-crop-frame{
  width:min(100%, calc(460px * var(--frame-ratio, 1.7777778)));
  max-width:520px;
  max-height:none;
  aspect-ratio:var(--frame-ratio, 16 / 9);
  flex:0 0 auto;
}
.video-crop-frame video{position:absolute;inset:0;width:100%;height:100%}
@media(max-width:640px){
  .video-crop-stage{padding:12px}
  .video-crop-frame{width:min(100%, calc(400px * var(--frame-ratio, 1.7777778)));max-width:100%}
}

/* Large, glanceable vector illustrations on every tool card */
.tool-card .tc-top{position:relative;justify-content:center;min-height:96px;margin:-2px -2px 2px}
.tool-card .tc-icon{width:96px;height:82px;border-radius:18px;background:linear-gradient(145deg,#f8faff,#f1f4fb);border:1px solid #e9edf6;box-shadow:0 7px 18px rgba(31,41,55,.06)}
.tool-card .tc-icon svg{width:58px;height:58px}
.tool-card .tc-badge{position:absolute;right:0;top:0;margin:0}
@media(max-width:560px){.tool-card .tc-top{min-height:84px}.tool-card .tc-icon{width:84px;height:72px}.tool-card .tc-icon svg{width:50px;height:50px}}

/* v7 — video crop workspace mirrors image crop: full media remains visible outside export frame */
.video-crop-stage{overflow:hidden;min-height:470px;align-items:center}
.video-crop-workspace{position:relative;width:min(100%,760px);height:440px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.video-crop-workspace>.video-ghost{position:absolute;left:50%;top:50%;width:72%;height:88%;transform-origin:center;translate:-50% -50%;opacity:.20;filter:saturate(.75);pointer-events:none;background:transparent}
.video-crop-workspace>.video-crop-frame{z-index:2}
.video-crop-frame{overflow:hidden;background:#101318}
.video-crop-frame video{transform-origin:center;will-change:transform}
.progress-meta{max-width:320px;margin:14px auto 6px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.82rem;color:var(--ink-soft)}
.progress-meta b{color:var(--accent);font-size:.95rem}
@media(max-width:640px){.video-crop-stage{min-height:390px}.video-crop-workspace{height:360px}.video-crop-workspace>.video-ghost{width:90%;height:84%}}

/* v8: single-media video crop workspace. The media is never clipped while positioning. */
.video-crop-stage{overflow:visible!important;min-height:500px!important;align-items:center}
.video-crop-workspace{position:relative;width:min(100%,780px);height:460px;overflow:hidden;display:block;margin:auto;touch-action:none;cursor:grab;border-radius:14px;background:linear-gradient(135deg,#edf1f7,#e7ecf7)}
.video-crop-workspace.dragging{cursor:grabbing}
.video-crop-workspace>#social-video-preview{position:absolute;z-index:1;max-width:none!important;max-height:none!important;margin:0!important;transform-origin:center center;background:#101318;opacity:1;object-fit:fill}
.video-crop-frame{position:absolute!important;z-index:4!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;overflow:visible!important;background:transparent!important;border:3px solid var(--accent)!important;border-radius:12px;box-shadow:0 0 0 9999px rgba(238,242,248,.76);pointer-events:none}
.video-crop-frame::before{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);border-radius:9px}
.video-export-label{position:absolute;left:8px;top:8px;z-index:5;padding:3px 7px;border-radius:999px;background:var(--accent);color:white;font-size:.65rem;font-weight:800;letter-spacing:.04em}
.video-preview-fallback{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:min(360px,80%);text-align:center;padding:20px;border-radius:12px;background:#101827;color:white;display:flex;flex-direction:column;gap:6px}
.video-editor-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
@media(max-width:640px){.video-crop-stage{min-height:430px!important}.video-crop-workspace{height:390px}}

/* Task 2 interaction upgrades */
.tool-stepbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:#fafbff}.step-back{appearance:none;border:0;background:transparent;color:var(--accent);font-weight:750;cursor:pointer;padding:7px 8px;border-radius:8px}.step-back:hover{background:var(--accent-soft)}.step-note{font-size:.8rem;color:var(--ink-soft)}
.crop-stage-select{cursor:crosshair;overflow:visible!important}.crop-stage-select canvas{cursor:crosshair;border-radius:10px}.crop-cursor-label{position:absolute;z-index:8;display:none;pointer-events:none;padding:5px 8px;border-radius:8px;background:#101828;color:#fff;font-size:.75rem;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.18);white-space:nowrap}.crop-cursor-label.show{display:block}.crop-selection-meta{margin-top:10px;padding:8px 10px;border-radius:9px;background:var(--accent-soft);color:var(--accent);font-size:.83rem;font-weight:700}
.picker-stage{overflow:visible!important;cursor:crosshair}.picker-stage canvas{cursor:crosshair}.picker-lens{position:absolute;z-index:9;display:none;align-items:center;gap:7px;pointer-events:none;background:#111827;color:#fff;padding:7px 9px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.22);font-size:.75rem;white-space:nowrap}.picker-lens.show{display:flex}.picker-lens .picker-swatch{width:20px;height:20px;border-radius:6px;border:2px solid rgba(255,255,255,.85)}.picker-lens small{opacity:.72}
.blur-preview-stage{position:relative;display:flex;justify-content:center;align-items:center;margin:14px 0;background:var(--surface-sunken);border-radius:12px;overflow:hidden;touch-action:none}.blur-preview-stage canvas{display:block;max-width:100%;height:auto}.blur-target{position:absolute;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);border:2px solid #2563eb;border-radius:50%;background:rgba(37,99,235,.08);box-shadow:0 0 0 1px rgba(255,255,255,.8) inset;color:#fff;text-shadow:0 1px 2px #000;font-size:.72rem;font-weight:800;pointer-events:none}.blur-mode{margin-top:12px}
.amazon-callout{margin-bottom:8px}
.tc-icon svg[viewBox="0 0 76 50"]{width:74px!important;height:50px!important}
@media(max-width:560px){.step-note{display:none}.picker-lens{transform:scale(.92);transform-origin:left top}}

.tc-icon svg[viewBox="0 0 92 60"]{width:86px!important;height:56px!important}

/* PDF & Documents */
.doc-panel{max-width:820px;margin:0 auto;padding:28px;border:1px solid var(--border);border-radius:18px;background:#fff;display:grid;gap:18px}.doc-drop{border:2px dashed #ccd4e4;border-radius:16px;padding:34px;text-align:center;display:grid;gap:7px;position:relative}.doc-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}.doc-drop span{color:var(--ink-soft);font-size:.9rem}.doc-input{width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:10px;margin-top:7px}.doc-status{min-height:22px;color:var(--ink-soft)}.doc-status.ok{color:#087a55}.doc-status.err{color:#b42318}.doc-status.warn{padding:13px;border-radius:10px;background:#fff7e8;color:#8a5b00}.doc-vector{width:130px;height:90px;display:grid;place-items:center;margin:auto}.doc-vector svg{width:120px;height:80px}


/* v15 — larger glanceable tool vectors + large color picker workspace */
.tool-card .tc-top{min-height:132px;margin:-4px -4px 4px;align-items:center;justify-content:center}
.tool-card .tc-icon{width:128px;height:110px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(145deg,#fbfcff,#f3f6fc);border:1px solid #e6ebf4;box-shadow:0 9px 22px rgba(31,41,55,.07);overflow:visible}
.tool-card .tc-icon svg{width:92px!important;height:78px!important;max-width:92px;max-height:78px;overflow:visible}
.tool-card .tc-badge{top:2px;right:2px}
@media(max-width:560px){.tool-card .tc-top{min-height:112px}.tool-card .tc-icon{width:108px;height:94px}.tool-card .tc-icon svg{width:78px!important;height:66px!important}}

.color-picker-pro{max-width:none!important}
.picker-stage{width:100%;min-height:520px;display:grid;place-items:center;padding:14px;background:#eef2f8!important;border:1px solid #e0e6f0;border-radius:14px;overflow:visible!important}
.picker-stage canvas{width:auto;max-width:100%;max-height:72vh;height:auto;border-radius:10px;box-shadow:0 8px 25px rgba(15,23,42,.1);image-rendering:auto}
.picker-lens{transform:scale(1.08);transform-origin:left top}
@media(max-width:700px){.picker-stage{min-height:360px;padding:8px}.picker-stage canvas{max-height:60vh}.picker-lens{transform:scale(.96)}}

/* Make the documents category unmistakably visible on the home page. */
.documents-home .tool-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.documents-home .tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.documents-home .tool-grid{grid-template-columns:1fr}}

/* v16 clarity pass */
.tool-card{padding:20px;gap:12px}.tool-card .tc-top{min-height:154px}.tool-card .tc-icon{width:148px;height:126px;border-radius:22px;background:linear-gradient(145deg,#fff,#f3f6fc);box-shadow:0 10px 25px rgba(31,41,55,.09)}.tool-card .tc-icon svg{width:112px!important;height:96px!important;max-width:112px;max-height:96px}.tool-card h3{font-size:1.04rem}.tool-card p{font-size:.9rem;line-height:1.5}.blur-preview-stage{min-height:360px;padding:14px;background:linear-gradient(135deg,#f5f7fb,#eef2f8)}.blur-preview-stage canvas{max-height:620px;cursor:crosshair;border-radius:10px;box-shadow:0 6px 20px rgba(15,23,42,.12)}
@media(max-width:560px){.tool-card .tc-top{min-height:132px}.tool-card .tc-icon{width:126px;height:108px}.tool-card .tc-icon svg{width:96px!important;height:82px!important}.blur-preview-stage{min-height:260px}}

/* v17: clear AI-inspired vector tool cards */
#all-tools-grid,.tool-grid{grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:18px;align-items:stretch}
#all-tools-grid .tool-card,.tool-grid .tool-card{min-height:310px;border-radius:18px;padding:18px;background:linear-gradient(180deg,#fff 0%,#fbfcff 100%);box-shadow:0 8px 26px rgba(15,23,42,.055)}
#all-tools-grid .tool-card .tc-top,.tool-grid .tool-card .tc-top{min-height:142px}
#all-tools-grid .tool-card .tc-icon,.tool-grid .tool-card .tc-icon{width:142px;height:122px;border-radius:22px;background:linear-gradient(145deg,#ffffff,#edf3ff);border:1px solid #e1e8f4;box-shadow:0 12px 25px rgba(37,81,232,.10),inset 0 1px 0 #fff}
#all-tools-grid .tool-card .tc-icon svg,.tool-grid .tool-card .tc-icon svg{width:112px!important;height:94px!important;filter:drop-shadow(0 5px 5px rgba(15,23,42,.11))}
#all-tools-grid .tool-card h3,.tool-grid .tool-card h3{font-size:1.02rem;line-height:1.3}
#all-tools-grid .tool-card p,.tool-grid .tool-card p{font-size:.88rem;line-height:1.48}
@media(min-width:1050px){#all-tools-grid .tool-card{aspect-ratio:1/1.05}}
@media(max-width:560px){#all-tools-grid,.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#all-tools-grid .tool-card,.tool-grid .tool-card{min-height:270px;padding:13px}#all-tools-grid .tool-card .tc-icon,.tool-grid .tool-card .tc-icon{width:108px;height:94px}#all-tools-grid .tool-card .tc-icon svg,.tool-grid .tool-card .tc-icon svg{width:86px!important;height:72px!important}}

.doc-panel{max-width:980px;margin:0 auto 40px;padding:24px;border:1px solid var(--border);border-radius:18px;background:#fff;box-shadow:0 8px 28px rgba(15,23,42,.05)}
.doc-drop{position:relative;display:grid;place-items:center;text-align:center;min-height:190px;border:2px dashed #c9d4e7;border-radius:16px;background:#f8faff;margin:18px 0;padding:22px}.doc-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}.doc-drop strong{font-size:1.08rem}.doc-drop span{color:var(--ink-soft);font-size:.9rem}.doc-input{width:100%;padding:11px 12px;border:1px solid var(--border-strong);border-radius:9px;margin-top:7px}.doc-panel label{display:block;margin:14px 0;font-weight:600}.doc-status{margin-top:15px;padding:12px 14px;border-radius:10px;min-height:20px}.doc-status.err{background:#fff0f0;color:#b42318}.doc-status.ok{background:#ecfdf3;color:#067647}.doc-progress{height:8px;background:#e8edf5;border-radius:999px;overflow:hidden;margin-top:12px}.doc-progress>i{display:block;height:100%;width:0;background:#2551e8;transition:width .2s}.pdf-jpg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin-top:18px}.pdf-jpg-item{border:1px solid var(--border);border-radius:12px;padding:10px;background:#fff}.pdf-jpg-item img{width:100%;height:180px;object-fit:contain;background:#f5f7fb;border-radius:8px}.office-preview{position:absolute;left:-100000px;top:0;width:900px;background:#fff;color:#111;padding:30px}.doc-note{font-size:.86rem;color:var(--ink-soft);margin-top:10px}

/* v18: true previous-page control + square All Tools cards */

#all-tools-grid .tool-card{aspect-ratio:1/1!important;min-height:0!important}
@media(max-width:560px){#all-tools-grid .tool-card{aspect-ratio:auto!important;min-height:260px!important}}

/* v19 — one Previous Page control only; Vector 2 reserved for Conversion/PDF + format compressors */
.tool-stepbar,.step-back{display:none!important}
.vector2{overflow:visible}
body[data-vector-theme="v2"] .tc-icon{background:linear-gradient(145deg,#fff,#f4f7fd)}


/* v22 — utilities repaired, PDF cards square on phones, no Previous Page control */
.tool-global-back{display:none!important}
.utility-preview-stage{display:grid;place-items:center;margin:14px 0 18px;padding:14px;min-height:320px;background:linear-gradient(135deg,#f5f7fb,#eef2f8);border-radius:14px;overflow:auto}
.utility-preview-stage canvas{display:block;max-width:100%;height:auto;max-height:620px;border-radius:10px;box-shadow:0 6px 20px rgba(15,23,42,.12)}
.utility-controls{margin-top:10px}
.qr-workspace{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}
.qr-preview{min-height:320px;display:grid;place-items:center;background:#f7f9fd;border:1px solid var(--border);border-radius:16px;padding:20px}
#qr-output{background:#fff;padding:14px;border-radius:12px;box-shadow:0 8px 24px rgba(15,23,42,.08)}
@media(max-width:700px){.qr-workspace{grid-template-columns:1fr}.qr-preview{min-height:260px}}
@media(max-width:560px){
  body[data-vector-theme="v2"] #all-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body[data-vector-theme="v2"] #all-tools-grid .tool-card{aspect-ratio:1/1!important;min-height:0!important;padding:10px;gap:6px;overflow:hidden}
  body[data-vector-theme="v2"] #all-tools-grid .tool-card .tc-top{min-height:92px;margin:0}
  body[data-vector-theme="v2"] #all-tools-grid .tool-card .tc-icon{width:92px;height:78px;border-radius:16px}
  body[data-vector-theme="v2"] #all-tools-grid .tool-card .tc-icon svg{width:74px!important;height:62px!important}
  body[data-vector-theme="v2"] #all-tools-grid .tool-card h3{font-size:.84rem;line-height:1.18;margin:0;text-align:center}
  body[data-vector-theme="v2"] #all-tools-grid .tool-card p{display:none}
  body[data-vector-theme="v2"] #all-tools-grid .tool-card .tc-cta{font-size:.75rem;text-align:center;margin-top:auto}
  body[data-vector-theme="v2"] #all-tools-grid .tool-card .tc-badge{font-size:.62rem;padding:3px 6px}
  .utility-preview-stage{min-height:230px;padding:10px}
}

/* v23: keep homepage Conversion in complete rows */
.conversion-home{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media(max-width:980px){.conversion-home{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:520px){.conversion-home{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* v25 internal tool back */
.tool-step-nav{display:flex;justify-content:flex-start;align-items:center;margin:0 0 12px}
.tool-back-btn{min-height:40px;padding:9px 14px;border-radius:12px;font-weight:700}



/* v31 accessibility — FREE badge only.
   Contrast ratio: > 8.7:1 against this pale background. */
.tc-badge{
  color:#064e3b !important;
  background:#e6f7ef !important;
  font-weight:700 !important;
}