/* ═══════════════════════════════════════════════════════════
   IMAGEKIT — SHARED.CSS  |  Master Stylesheet (all 4 pages)
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&family=Plus+Jakarta+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Dancing+Script:wght@700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── LIGHT THEME ─── */
:root {
  --bg:            #FFFFFF;
  --surface:       #F8FAFC;
  --surface-hover: #EFF6FF;
  --border:        #E2E8F0;
  --ink:           #0F172A;
  --ink2:          #475569;
  --ink3:          #94A3B8;
  --accent:        #2563EB;
  --accent-grad:   linear-gradient(135deg,#2563EB,#0F172A);
  --accent-light:  rgba(37,99,235,0.08);
  --accent-border: rgba(37,99,235,0.22);
  --green:         #059669;
  --green-bg:      #D1FAE5;
  --green-border:  rgba(5,150,105,0.25);
  --red:           #DC2626;
  --red-bg:        rgba(220,38,38,0.08);
  --radius:        12px;
  --radius-sm:     8px;
  --radius-lg:     18px;
  --shadow:        0 1px 3px rgba(15,23,42,.06),0 4px 16px rgba(15,23,42,.05);
  --shadow-md:     0 4px 12px rgba(15,23,42,.08),0 16px 40px rgba(15,23,42,.07);
  --shadow-lg:     0 8px 24px rgba(15,23,42,.1),0 24px 60px rgba(15,23,42,.1);
  --nav-bg:        rgba(255,255,255,0.9);
  --mono:          'JetBrains Mono',monospace;
  --transition:    all 0.3s cubic-bezier(0.4,0,0.2,1);
  --chase:         #2563EB;
  --glow:          #059669;
}

/* ─── DARK THEME ─── */
[data-theme="dark"] {
  --bg:            #000000;
  --surface:       #09090B;
  --surface-hover: #18181B;
  --border:        #27272A;
  --ink:           #FAFAFA;
  --ink2:          #A1A1AA;
  --ink3:          #52525B;
  --accent:        #00E5FF;
  --accent-grad:   linear-gradient(135deg,#00E5FF,#8B5CF6);
  --accent-light:  rgba(0,229,255,0.07);
  --accent-border: rgba(0,229,255,0.2);
  --green:         #10B981;
  --green-bg:      rgba(16,185,129,0.15);
  --green-border:  rgba(16,185,129,0.25);
  --red:           #F87171;
  --red-bg:        rgba(248,113,113,0.1);
  --shadow:        0 1px 4px rgba(0,0,0,.5),0 4px 16px rgba(0,0,0,.4);
  --shadow-md:     0 4px 16px rgba(0,0,0,.6),0 16px 40px rgba(0,0,0,.5);
  --shadow-lg:     0 8px 32px rgba(0,0,0,.7),0 24px 60px rgba(0,0,0,.6);
  --nav-bg:        rgba(0,0,0,0.9);
  --chase:         #00E5FF;
  --glow:          #10B981;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Plus Jakarta Sans',sans-serif;
  background: var(--bg); color: var(--ink);
  min-height: 100vh; line-height: 1.6;
  transition: background .3s ease, color .3s ease;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── CHASING LIGHT BG (always on) ─── */
.chase-bg {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: .1;
  will-change: transform; animation: orbDrift linear infinite;
}
[data-theme="dark"] .orb { opacity: .06; }
.orb-1 { width:560px;height:560px;background:var(--accent);top:-180px;left:-80px;animation-duration:20s; }
.orb-2 { width:480px;height:480px;background:#8B5CF6;bottom:-120px;right:-60px;animation-duration:25s;animation-direction:reverse; }
.orb-3 { width:380px;height:380px;background:var(--green);top:45%;left:55%;animation-duration:17s;animation-delay:-8s; }
@keyframes orbDrift {
  0%  { transform:translate(0,0) scale(1); }
  25% { transform:translate(55px,35px) scale(1.04); }
  50% { transform:translate(-35px,70px) scale(.96); }
  75% { transform:translate(70px,-25px) scale(1.02); }
  100%{ transform:translate(0,0) scale(1); }
}

/* ─── NAV ─── */
nav {
  position: sticky; top: 0; z-index: 200;
  background: var(--nav-bg); backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 0 2rem; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  transition: background .3s ease, border-color .3s ease;
}
.nav-logo {
  font-family: 'Outfit',sans-serif; font-size: 22px; font-weight: 700;
  color: var(--ink); text-decoration: none;
  display: flex; align-items: center; gap: 8px; letter-spacing: -.3px;
}
.nav-logo .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
  animation: dotPulse 3s ease-in-out infinite; flex-shrink: 0;
}
@keyframes dotPulse {
  0%,100% { box-shadow: 0 0 6px var(--accent); transform: scale(1); }
  50%      { box-shadow: 0 0 14px var(--accent); transform: scale(1.2); }
}
.theme-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 18px; transition: var(--transition); flex-shrink: 0;
}
.theme-btn:hover { background:var(--surface-hover); border-color:var(--accent-border); transform:rotate(15deg) scale(1.05); }

/* ─── TOOLS STRIP (3 cards below nav) ─── */
.tools-strip {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1rem; max-width: 900px; margin: 0 auto;
  padding: 1.5rem 1.5rem 0; position: relative; z-index: 10;
}
.tool-card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem 1rem;
  text-align: center; text-decoration: none; color: var(--ink);
  cursor: pointer; transition: var(--transition);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  will-change: transform; transform: translateZ(0);
}
.tool-card:hover, .tool-card.active {
  transform: translateY(-3px); box-shadow: var(--shadow-md);
  border-color: var(--accent); background: var(--accent-light);
}
.tool-card-icon { font-size: 28px; }
.tool-card-label { font-family:'Outfit',sans-serif; font-size:13px; font-weight:600; }
.tool-card-desc  { font-size:11px; color:var(--ink2); line-height:1.4; }

/* ─── HOW IT WORKS ─── */
.how-section {
  max-width: 900px; margin: 2rem auto 0;
  padding: 0 1.5rem; position: relative; z-index: 10;
}
.section-tag {
  font-family: var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); display:inline-flex; align-items:center; gap:6px;
  margin-bottom:12px;
}
.how-row {
  display: flex; align-items: stretch;
}
.how-step {
  flex: 1; background: var(--surface); border: 1px solid var(--border);
  padding: 1.25rem 1rem; text-align: center; transition: var(--transition);
  position: relative;
}
.how-step:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.how-step:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }
.how-step:not(:first-child) { border-left: 1px dashed var(--border); }
.how-step:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); z-index:1; }
.how-arrow {
  width: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--accent);
  animation: arrowBounce 1.6s ease-in-out infinite;
}
@keyframes arrowBounce { 0%,100%{transform:translateX(0)} 50%{transform:translateX(4px)} }
.how-step-num { font-family:var(--mono); font-size:10px; color:var(--ink3); margin-bottom:6px; text-transform:uppercase; letter-spacing:.1em; }
.how-step-icon { font-size:26px; margin-bottom:6px; }
.how-step-title { font-family:'Outfit',sans-serif; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:3px; }
.how-step-desc  { font-size:11px; color:var(--ink2); line-height:1.5; }

/* ─── MAIN ─── */
main {
  max-width: 900px; margin: 0 auto;
  padding: 2rem 1.5rem 6rem; position: relative; z-index: 10;
}

/* ─── CARD ─── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow); margin-bottom: 1.5rem; transition: var(--transition);
}
.card-head {
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}
.card-icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; background: var(--accent-light); border: 1px solid var(--accent-border);
  flex-shrink: 0;
}
.card-title { font-family:'Outfit',sans-serif; font-size:15px; font-weight:600; color:var(--ink); }
.card-sub   { font-size:12px; color:var(--ink2); margin-top:2px; }
.card-body  { padding: 1.5rem; }

/* ─── @property for chasing border ─── */
@property --cangle { syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes chaseBorder { to { --cangle:360deg; } }

/* ─── DROP ZONE ─── */
.drop-zone {
  border: 1.5px dashed var(--border); border-radius: var(--radius);
  padding: 2.5rem 1.5rem; text-align: center; cursor: pointer;
  position: relative; overflow: hidden; background: var(--bg);
  transition: background .2s ease, border-color .2s ease;
}
.drop-zone::before {
  content: ''; position: absolute; inset: -2px;
  border-radius: calc(var(--radius) + 2px);
  background: conic-gradient(from var(--cangle,0deg),transparent 70%,var(--chase) 90%,transparent 100%);
  opacity: 0; transition: opacity .3s ease; pointer-events: none; z-index: 0;
}
.drop-zone::after {
  content: ''; position: absolute; inset: 1.5px;
  border-radius: calc(var(--radius) - 1px);
  background: var(--bg); z-index: 0; pointer-events: none; transition: background .2s ease;
}
.drop-zone > * { position: relative; z-index: 1; }
.drop-zone:hover::before,
.drop-zone.dragging::before,
.drop-zone.chase-active::before { opacity:1; animation:chaseBorder 2s linear infinite; }
.drop-zone:hover, .drop-zone.dragging { border-color:transparent; background:var(--accent-light); }
.drop-zone:hover::after, .drop-zone.dragging::after { background:var(--accent-light); }
.drop-zone.chase-active { border-color:transparent; }
.drop-zone input[type="file"] { display:none; }
.drop-icon-wrap {
  width:56px; height:56px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px; font-size:24px; box-shadow:var(--shadow);
  transition: var(--transition);
}
.drop-zone:hover .drop-icon-wrap { transform:scale(1.06); border-color:var(--accent-border); }
.drop-title { font-family:'Outfit',sans-serif; font-size:16px; font-weight:600; margin-bottom:4px; }
.drop-sub { font-size:13px; color:var(--ink2); }
.drop-sub span { color:var(--accent); cursor:pointer; font-weight:600; }
.format-badges { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:12px; }
.fmt-badge { font-family:var(--mono); font-size:10px; font-weight:500; padding:3px 8px; border:1px solid var(--border); border-radius:6px; background:var(--surface); color:var(--ink2); }

/* ─── PROGRESS BAR ─── */
.progress-wrap { margin:1rem 0; display:none; }
.progress-wrap.show { display:block; }
.progress-label { font-size:12px; color:var(--ink2); margin-bottom:6px; display:flex; justify-content:space-between; }
.progress-track { height:6px; background:var(--border); border-radius:999px; overflow:hidden; }
.progress-fill {
  height:100%; width:0%; border-radius:999px;
  background: var(--accent-grad); background: var(--accent);
  transition: width .4s cubic-bezier(.4,0,.2,1); position:relative;
}
.progress-fill::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:shimmer 1.5s linear infinite;
}
@keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }

/* ─── STATUS BAR ─── */
.status-bar {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:var(--radius-sm);
  font-size:13px; font-weight:500; margin-bottom:1rem;
  transition:var(--transition);
}
.status-bar.loading { background:var(--accent-light); color:var(--accent); border:1px solid var(--accent-border); }
.status-bar.success { background:var(--green-bg); color:var(--green); border:1px solid var(--green-border); }
.status-bar.error   { background:var(--red-bg); color:var(--red); border:1px solid rgba(220,38,38,.2); }
.status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; background:currentColor; }
.status-dot.pulse { animation:sPulse 1s ease-in-out infinite; }
@keyframes sPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

/* ─── @property for glow border ─── */
@property --gangle { syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes glowChase { to { --gangle:360deg; } }

/* ─── RESULT BOX ─── */
.result-box {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.25rem; margin-bottom:1rem;
  position:relative; overflow:hidden; transition:var(--transition);
}
.result-box.success-glow::before {
  content:''; position:absolute; inset:-2px;
  border-radius:calc(var(--radius)+2px);
  background:conic-gradient(from var(--gangle,0deg),transparent 70%,var(--glow) 90%,transparent 100%);
  animation:glowChase 2s linear 3; z-index:0;
}
.result-box.success-glow::after {
  content:''; position:absolute; inset:1px;
  border-radius:calc(var(--radius)-1px); background:var(--surface); z-index:0;
}
.result-box > * { position:relative; z-index:1; }

/* ─── INPUTS ─── */
input[type="text"],input[type="password"],input[type="number"],input[type="url"],select,textarea {
  width:100%; padding:11px 14px; border:1.5px solid var(--border);
  border-radius:var(--radius-sm); background:var(--bg); color:var(--ink);
  font-family:'Plus Jakarta Sans',sans-serif; font-size:14px;
  transition:border-color .2s,box-shadow .2s,background .3s,color .3s;
  appearance:none; -webkit-appearance:none; outline:none;
}
input[type="text"]:focus,input[type="password"]:focus,
input[type="number"]:focus,input[type="url"]:focus,
select:focus,textarea:focus {
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light);
}
input::placeholder { color:var(--ink3); }
select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394A3B8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
}
.mono-input { font-family:var(--mono)!important; font-size:13px!important; }
.field-group { margin-bottom:1.25rem; }
.field-label {
  font-size:12px; font-weight:600; color:var(--ink2);
  text-transform:uppercase; letter-spacing:.07em;
  margin-bottom:6px; display:flex; align-items:center; gap:6px;
}
.field-label a { color:var(--accent); text-decoration:none; font-weight:500; text-transform:none; letter-spacing:0; }
.field-label a:hover { text-decoration:underline; }
.input-wrap { position:relative; }
.input-wrap input { padding-right:44px; }
.eye-btn {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer;
  font-size:16px; color:var(--ink3); padding:4px; transition:color .2s;
}
.eye-btn:hover { color:var(--ink); }

/* ─── BUTTONS ─── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:11px 24px;
  font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; font-weight:600;
  border-radius:var(--radius-sm); border:1.5px solid transparent;
  cursor:pointer; transition:all .2s ease; text-decoration:none; white-space:nowrap;
}
.btn:active { transform:scale(.97); }
.btn-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
[data-theme="dark"] .btn-primary { color:#000; }
.btn-primary:hover { filter:brightness(1.1); box-shadow:0 4px 16px var(--accent-light); }
.btn-primary:disabled { opacity:.45; cursor:not-allowed; }
.btn-outline { background:transparent; color:var(--ink); border-color:var(--border); }
.btn-outline:hover { background:var(--surface-hover); border-color:var(--accent-border); color:var(--accent); }
.btn-danger { background:var(--red); color:#fff; border-color:var(--red); }
.btn-success { background:var(--green)!important; color:#fff!important; border-color:var(--green)!important; }
.btn-sm   { padding:7px 16px; font-size:13px; }
.btn-full { width:100%; }
.btn-icon { width:40px; height:40px; padding:0; border-radius:var(--radius-sm); }
.btn-copy { transition:all .2s ease; }
.btn-copy.copied { transform:scale(1.04); }
.btn-copy .copy-icon { display:inline-block; transition:transform .3s ease; }
.btn-copy.copied .copy-icon { transform:rotate(360deg) scale(1.2); }

/* ─── API SAVED BADGE ─── */
.api-saved-badge {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:var(--green-bg); border:1px solid var(--green-border);
  border-radius:var(--radius-sm); font-size:13px; color:var(--green);
}
.api-saved-badge .badge-left { display:flex; align-items:center; gap:8px; font-weight:500; }
.api-saved-badge button { background:none; border:none; cursor:pointer; font-size:12px; color:var(--green); opacity:.8; text-decoration:underline; padding:0; font-family:inherit; }
.api-saved-badge button:hover { opacity:1; }

/* ─── PREVIEW ─── */
.preview-wrap {
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  min-height:180px; max-height:320px; margin-bottom:1.25rem;
}
.preview-wrap img { max-width:100%; max-height:320px; display:block; border-radius:var(--radius-sm); }
.preview-badge {
  position:absolute; top:10px; left:10px;
  background:rgba(0,0,0,.65); color:#fff;
  font-family:var(--mono); font-size:11px;
  padding:3px 10px; border-radius:999px; backdrop-filter:blur(8px);
}

/* ─── INFO / TRUST BOXES ─── */
.info-box { background:var(--accent-light); border:1px solid var(--accent-border); border-radius:var(--radius-sm); padding:12px 16px; font-size:13px; color:var(--ink2); line-height:1.6; margin-bottom:1.25rem; }
.info-box a { color:var(--accent); font-weight:600; }
.trust-badge { display:flex; align-items:flex-start; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 16px; font-size:12px; color:var(--ink2); line-height:1.6; margin-bottom:1.5rem; }

/* ─── URL RESULT ─── */
.url-label { font-size:11px; font-weight:600; color:var(--ink3); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
.url-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.url-row input { flex:1; }

/* ─── RANGE ─── */
input[type="range"] {
  width:100%; height:4px; accent-color:var(--accent);
  border-radius:999px; cursor:pointer; background:transparent; border:none; padding:0;
}
input[type="range"]::-webkit-slider-runnable-track { height:4px; background:var(--border); border-radius:999px; }
input[type="range"]::-webkit-slider-thumb { appearance:none; width:18px; height:18px; border-radius:50%; background:var(--accent); border:2px solid var(--bg); box-shadow:0 1px 4px rgba(0,0,0,.2); cursor:pointer; margin-top:-7px; transition:transform .15s; }
input[type="range"]::-webkit-slider-thumb:hover { transform:scale(1.15); }

/* ─── FAQ ─── */
.faq-section { margin-top:2rem; }
.section-title { font-family:'Outfit',sans-serif; font-size:22px; font-weight:700; color:var(--ink); margin-bottom:1rem; letter-spacing:-.3px; }
.faq-item { border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); margin-bottom:6px; overflow:hidden; transition:var(--transition); }
.faq-question { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; cursor:pointer; font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; font-weight:500; color:var(--ink); background:none; border:none; width:100%; text-align:left; transition:background .2s; }
.faq-question:hover { background:var(--surface-hover); }
.faq-arrow { font-size:12px; color:var(--ink3); transition:transform .2s; flex-shrink:0; }
.faq-item.open .faq-arrow { transform:rotate(180deg); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .3s ease,padding .3s ease; font-size:13px; color:var(--ink2); line-height:1.7; padding:0 16px; }
.faq-item.open .faq-answer { max-height:280px; padding:0 16px 14px; }

/* ─── DOWNLOAD ─── */
.download-wrap { text-align:center; padding:1.5rem; }
.download-preview { max-width:100%; max-height:200px; border-radius:var(--radius); border:1px solid var(--border); margin-bottom:1rem; display:block; margin-left:auto; margin-right:auto; }
.download-meta { font-family:var(--mono); font-size:12px; color:var(--ink3); margin-bottom:1rem; }

/* ─── FOOTER ─── */
footer { text-align:center; padding:2.5rem 1.5rem 3rem; border-top:1px solid var(--border); margin-top:3rem; position:relative; z-index:10; }
.footer-brand { font-family:'Dancing Script',cursive; font-size:38px; font-weight:700; background:linear-gradient(135deg,#F59E0B,#F97316,#EF4444); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:inline-block; margin-bottom:6px; filter:drop-shadow(0 2px 10px rgba(245,158,11,.3)); }
.footer-sub { font-size:13px; color:var(--ink3); }
.footer-links { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:12px; }
.footer-links a { font-size:13px; color:var(--ink2); text-decoration:none; transition:color .2s; }
.footer-links a:hover { color:var(--accent); }

/* ─── PAGE HERO ─── */
.page-hero { margin-bottom:2rem; }
.hero-tag { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); background:var(--accent-light); padding:4px 12px; border-radius:999px; border:1px solid var(--accent-border); margin-bottom:10px; }
.page-hero h1 { font-family:'Outfit',sans-serif; font-size:clamp(24px,5vw,34px); font-weight:700; line-height:1.2; color:var(--ink); margin-bottom:8px; letter-spacing:-.5px; }
.page-hero p { font-size:15px; color:var(--ink2); }

/* ─── RESIZER SPECIFIC ─── */
.dim-row { display:grid; grid-template-columns:1fr 40px 1fr; gap:8px; align-items:end; margin-bottom:1rem; }
.dim-unit { font-family:var(--mono); font-size:12px; color:var(--ink3); display:inline-block; margin-left:4px; }
.lock-btn { width:40px; height:40px; padding:0; border-radius:var(--radius-sm); border:1.5px solid var(--border); background:var(--surface); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; transition:var(--transition); align-self:flex-end; }
.lock-btn.locked { border-color:var(--accent-border); background:var(--accent-light); }
.lock-btn:hover { border-color:var(--accent); }
.size-est { font-family:var(--mono); font-size:12px; color:var(--ink3); text-align:right; }
.fmt-btn { padding:7px 14px; border:1.5px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink2); font-family:var(--mono); font-size:12px; cursor:pointer; transition:var(--transition); }
.fmt-btn.active { border-color:var(--accent); background:var(--accent-light); color:var(--accent); }
.fmt-btn:hover:not(.active) { border-color:var(--accent-border); color:var(--ink); }
.fmt-btns { display:flex; gap:8px; flex-wrap:wrap; }
.preset-btn { padding:5px 10px; border:1px solid var(--border); border-radius:6px; background:var(--surface); color:var(--ink2); font-family:var(--mono); font-size:11px; cursor:pointer; transition:var(--transition); }
.preset-btn:hover { border-color:var(--accent); color:var(--accent); }
.presets-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }

/* ─── CIRCLE SPECIFIC ─── */
.circle-preview { border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; margin:0 auto; transition:var(--transition); }
.customizer-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; gap:1rem; }
.customizer-label { font-size:13px; font-weight:500; color:var(--ink2); flex-shrink:0; min-width:100px; }
.color-picker { width:40px; height:40px; border-radius:var(--radius-sm); border:1.5px solid var(--border); padding:2px; cursor:pointer; background:none; outline:none; }

/* ─── UTILITIES ─── */
.hidden { display:none!important; }
.mt-1 { margin-top:.5rem; } .mt-2 { margin-top:1rem; } .mt-3 { margin-top:1.5rem; }
.mb-1 { margin-bottom:.5rem; } .mb-2 { margin-bottom:1rem; }
.flex { display:flex; } .flex-gap { display:flex; gap:8px; } .flex-center { display:flex; align-items:center; } .flex-between { display:flex; align-items:center; justify-content:space-between; }
.chip { display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-size:11px; padding:3px 9px; border-radius:6px; background:var(--surface); border:1px solid var(--border); color:var(--ink2); }
.chip.accent { background:var(--accent-light); border-color:var(--accent-border); color:var(--accent); }

/* ─── ANIMATION ─── */
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.anim-in { animation:fadeIn .4s cubic-bezier(.4,0,.2,1) both; }

/* ─── RESPONSIVE ─── */
@media (max-width:700px) {
  nav { padding:0 1rem; }
  .tools-strip { grid-template-columns:1fr; gap:.75rem; }
  main { padding:1.5rem 1rem 5rem; }
  .how-section { padding:0 1rem; }
  .how-row { flex-direction:column; }
  .how-step { border-radius:0!important; border:1px solid var(--border)!important; border-bottom:none!important; }
  .how-step:first-child { border-radius:var(--radius) var(--radius) 0 0!important; }
  .how-step:last-child  { border-radius:0 0 var(--radius) var(--radius)!important; border-bottom:1px solid var(--border)!important; }
  .how-arrow { width:100%; height:24px; transform:rotate(90deg); }
  @keyframes arrowBounce { 0%,100%{transform:rotate(90deg) translateX(0)} 50%{transform:rotate(90deg) translateX(4px)} }
}
@media (max-width:480px) {
  .tools-strip { grid-template-columns:1fr 1fr; }
  .tools-strip .tool-card:last-child { grid-column:1/-1; }
  .dim-row { grid-template-columns:1fr 40px 1fr; }
}

/* ─── 60 FPS PERF ─── */
.card,.tool-card,.how-step,.drop-zone,.btn,nav,.theme-btn {
  will-change:transform; backface-visibility:hidden; transform:translateZ(0);
}