/* ═══════════════════════════════════════════════════════════════════
   css-minifier.css - CSS Minifier & Beautifier
   Aesthetic: "CSS Studio" - deep dark with violet/purple accents
   Scope: #csm-root - zero bleed to any other tool
   Font: Syne (display) + JetBrains Mono (code) + Inter (UI)
═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');

/* ── Design Tokens ────────────────────────────────────────────── */
#csm-root {
  /* Surfaces - deep dark */
  --csm-bg:          #ffffff;
  --csm-surface:     #ffffff;
  --csm-surface2:    #ffffff;
  --csm-surface3:    #ffffff;
  --csm-border:      #ffffff;
  --csm-border2:     #ffffff;
  --csm-border-soft: rgb(255, 245, 245);

  /* Violet accent */
  --csm-violet:      #7c3aed;
  --csm-violet-mid:  #8b5cf6;
  --csm-violet-lite: #a78bfa;
  --csm-violet-glow: rgba(124,58,237,0.22);
  --csm-violet-dim:  rgba(124,58,237,0.10);
  --csm-violet-ring: rgba(124,58,237,0.35);

  /* Status */
  --csm-green:       #434d46;
  --csm-green-glow:  rgba(34,197,94,0.14);
  --csm-green-dim:   rgba(34,197,94,0.10);
  --csm-red:         #f87171;
  --csm-red-glow:    rgba(248,113,113,0.12);
  --csm-red-dim:     rgba(248,113,113,0.09);
  --csm-amber:       #fbbf24;
  --csm-amber-dim:   rgba(251,191,36,0.10);

  /* Text */
  --csm-text:        #000000;
  --csm-text2:       #000000;
  --csm-text3:       #000000;
  --csm-muted:       #000000;

  /* Syntax token colours */
  --csm-syn-sel:     #840aff;
  --csm-syn-prop:    #0972f1;
  --csm-syn-val:     #9900ff;
  --csm-syn-num:     #ffb700;
  --csm-syn-str:     #ff0f93;
  --csm-syn-comment: #4b4b6a;
  --csm-syn-brace:   #e8e8f8;

  /* Typography */
  --csm-font-ui:   'Inter', system-ui, -apple-system, sans-serif;
  --csm-font-disp: 'Syne', sans-serif;
  --csm-font-code: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Shape */
  --csm-radius:    12px;
  --csm-radius-sm: 8px;
  --csm-radius-xs: 5px;

  /* Shadows */
  --csm-shadow:    0 4px 24px rgba(0,0,0,0.5);
  --csm-shadow-lg: 0 12px 48px rgba(0,0,0,0.7);
  --csm-glow-box:  0 0 0 1px var(--csm-violet-ring), 0 4px 24px var(--csm-violet-glow);

  /* Motion */
  --csm-ease: cubic-bezier(.25,.46,.45,.94);
  --csm-t:    150ms;

  font-family: var(--csm-font-ui);
  color: var(--csm-text);
  background: var(--csm-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 100px;
  min-height: 100vh;
}

#csm-root *, #csm-root *::before, #csm-root *::after { box-sizing: border-box; }
#csm-root button   { cursor: pointer; font-family: var(--csm-font-ui); }
#csm-root textarea,
#csm-root input,
#csm-root select   { font-family: var(--csm-font-ui); }

/* ════════════════════ HERO ════════════════════════════════════ */
#csm-root .csm-hero {
  text-align: center;
  padding: 52px 20px 40px;
  position: relative;
  overflow: hidden;
}

/* Purple radial glow behind hero */
#csm-root .csm-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 300px;
  background: radial-gradient(ellipse at 50% 0%, rgba(124,58,237,.18) 0%, transparent 70%);
  pointer-events: none;
}

#csm-root .csm-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 16px;
  border-radius: 99px;
  background: var(--csm-violet-dim);
  border: 1px solid rgba(124,58,237,.3);
  color: var(--csm-violet-lite);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
#csm-root .csm-badge svg { width:12px; height:12px; flex-shrink:0; }

#csm-root .csm-hero h1 {
  font-family: var(--csm-font-disp);
  font-size: clamp(2rem, 5.5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--csm-text);
  letter-spacing: -.025em;
  margin: 0 0 14px;
}
#csm-root .csm-hero h1 span {
  background: linear-gradient(135deg, var(--csm-violet) 0%, var(--csm-violet-lite) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
#csm-root .csm-hero p {
  font-size: 1rem;
  color: var(--csm-text2);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ════════════════════ LAYOUT ══════════════════════════════════ */
#csm-root .csm-workspace {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 860px) {
  #csm-root .csm-workspace { grid-template-columns: 1fr; }
}

/* ════════════════════ PANELS ══════════════════════════════════ */
#csm-root .csm-panel {
  background: var(--csm-surface);
  border: 1px solid var(--csm-border);
  border-radius: var(--csm-radius);
  overflow: hidden;
  box-shadow: var(--csm-shadow);
  margin-bottom: 14px;
}
#csm-root .csm-panel:last-child { margin-bottom: 0; }

#csm-root .csm-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--csm-border);
  background: linear-gradient(to bottom, var(--csm-surface2), var(--csm-surface));
  flex-wrap: wrap;
}
#csm-root .csm-panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--csm-text);
  letter-spacing: .03em;
  text-transform: uppercase;
}
#csm-root .csm-panel-title svg {
  width: 14px; height: 14px;
  color: var(--csm-violet-mid);
  flex-shrink: 0;
}
#csm-root .csm-panel-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ════════════════════ BUTTONS ═════════════════════════════════ */
#csm-root .csm-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: var(--csm-radius-sm);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid transparent;
  transition: all var(--csm-t) var(--csm-ease);
  letter-spacing: .01em;
}
#csm-root .csm-btn svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Primary - violet */
#csm-root .csm-btn-primary {
  background: linear-gradient(135deg, var(--csm-violet), var(--csm-violet-mid));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 12px var(--csm-violet-glow);
}
#csm-root .csm-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--csm-violet-glow);
  filter: brightness(1.08);
}
#csm-root .csm-btn-primary:active { transform: translateY(0); filter: brightness(.95); }

/* Secondary - outlined violet */
#csm-root .csm-btn-secondary {
  background: var(--csm-violet-dim);
  color: var(--csm-violet-lite);
  border-color: rgba(124,58,237,.28);
}
#csm-root .csm-btn-secondary:hover {
  background: rgba(124,58,237,.18);
  border-color: var(--csm-violet-mid);
}

/* Outline - subtle */
#csm-root .csm-btn-outline {
  background: transparent;
  color: var(--csm-text2);
  border-color: var(--csm-border2);
}
#csm-root .csm-btn-outline:hover {
  border-color: var(--csm-violet-mid);
  color: var(--csm-violet-lite);
  background: var(--csm-violet-dim);
}

/* Ghost */
#csm-root .csm-btn-ghost {
  background: transparent;
  color: var(--csm-text3);
  border-color: transparent;
}
#csm-root .csm-btn-ghost:hover {
  background: var(--csm-surface3);
  color: var(--csm-text2);
}

/* Green - success action */
#csm-root .csm-btn-green {
  background: var(--csm-green-dim);
  color: var(--csm-green);
  border-color: rgba(34,197,94,.22);
}
#csm-root .csm-btn-green:hover { background: rgba(34,197,94,.18); }

/* Large */
#csm-root .csm-btn-lg {
  padding: 12px 22px;
  font-size: 13.5px;
  border-radius: var(--csm-radius-sm);
  width: 100%;
  justify-content: center;
}

/* ════════════════════ CODE TEXTAREA ═══════════════════════════ */
#csm-root .csm-editor {
  display: block;
  width: 100%;
  min-height: 260px;
  padding: 16px;
  font-size: 13px;
  font-family: var(--csm-font-code);
  line-height: 1.72;
  color: var(--csm-text);
  background: var(--csm-surface);
  border: none;
  resize: vertical;
  outline: none;
  tab-size: 2;
  caret-color: var(--csm-violet-lite);
  transition: background var(--csm-t) var(--csm-ease);
}
#csm-root .csm-editor::placeholder {
  color: var(--csm-muted);
  font-family: var(--csm-font-code);
}
#csm-root .csm-editor:focus { background: var(--csm-surface2); }

/* Output editor - slightly lighter surface */
#csm-root .csm-editor-out {
  background: var(--csm-surface2);
  color: var(--csm-syn-val);
}
#csm-root .csm-editor-out:focus { background: var(--csm-surface3); }

/* ════════════════════ STATS BAR ═══════════════════════════════ */
#csm-root .csm-stats-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px 10px;
  flex-wrap: wrap;
  border-top: 1px solid var(--csm-border);
}
#csm-root .csm-pill {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--csm-surface3);
  border: 1px solid var(--csm-border2);
  font-size: 11px;
}
#csm-root .csm-pill-val {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--csm-violet-lite);
  font-family: var(--csm-font-code);
}
#csm-root .csm-pill-lbl { color: var(--csm-text3); font-weight: 500; }

/* Compression ratio pill */
#csm-root .csm-pill-ratio .csm-pill-val { color: var(--csm-green); }

/* ════════════════════ COMPRESSION METER ══════════════════════ */
#csm-root .csm-meter-wrap {
  padding: 10px 16px 14px;
  border-top: 1px solid var(--csm-border);
}
#csm-root .csm-meter-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--csm-text3);
  margin-bottom: 6px;
}
#csm-root .csm-meter-label strong { color: var(--csm-green); font-size: 12px; }
#csm-root .csm-meter-track {
  height: 5px;
  border-radius: 99px;
  background: var(--csm-surface3);
  overflow: hidden;
}
#csm-root .csm-meter-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--csm-violet), var(--csm-green));
  width: 0%;
  transition: width .5s var(--csm-ease);
}

/* ════════════════════ DRAG DROP ZONE ═════════════════════════ */
#csm-root .csm-dropzone {
  padding: 14px 16px;
  border-top: 1px solid var(--csm-border);
}
#csm-root .csm-drop-target {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  border: 1.5px dashed var(--csm-border2);
  border-radius: var(--csm-radius-sm);
  color: var(--csm-text3);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--csm-t) var(--csm-ease);
  background: var(--csm-surface2);
}
#csm-root .csm-drop-target:hover,
#csm-root .csm-drop-target.drag-over {
  border-color: var(--csm-violet-mid);
  color: var(--csm-violet-lite);
  background: var(--csm-violet-dim);
}
#csm-root .csm-drop-target svg { width: 16px; height: 16px; flex-shrink: 0; }
#csm-root .csm-drop-input { display: none; }

/* ════════════════════ TOGGLE SWITCH ══════════════════════════ */
#csm-root .csm-options { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
#csm-root .csm-opt-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
#csm-root .csm-opt-label  { font-size: 12.5px; font-weight: 600; color: var(--csm-text); line-height: 1.3; }
#csm-root .csm-opt-desc   { font-size: 11px; color: var(--csm-text3); margin-top: 2px; line-height: 1.4; }

#csm-root .csm-toggle { position: relative; width: 38px; height: 21px; flex-shrink: 0; }
#csm-root .csm-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
#csm-root .csm-toggle-track {
  position: absolute; inset: 0; border-radius: 99px;
  background: var(--csm-border2); cursor: pointer;
  transition: background var(--csm-t) var(--csm-ease);
}
#csm-root .csm-toggle-track::after {
  content: '';
  position: absolute; top: 2.5px; left: 2.5px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--csm-text3);
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
  transition: transform var(--csm-t) var(--csm-ease), background var(--csm-t);
}
#csm-root .csm-toggle input:checked + .csm-toggle-track { background: var(--csm-violet); }
#csm-root .csm-toggle input:checked + .csm-toggle-track::after {
  transform: translateX(17px);
  background: #fff;
}

#csm-root .csm-divider { height: 1px; background: var(--csm-border); margin: 2px 0; }

/* ════════════════════ ACTION BAR ══════════════════════════════ */
#csm-root .csm-action-bar {
  padding: 14px 16px;
  border-top: 1px solid var(--csm-border);
  background: linear-gradient(to top, var(--csm-surface2), var(--csm-surface));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#csm-root .csm-action-row { display: flex; gap: 8px; }
#csm-root .csm-action-row .csm-btn { flex: 1; justify-content: center; }

/* ════════════════════ TOAST ═══════════════════════════════════ */
#csm-root .csm-toast {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--csm-radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  margin: 0 0 14px;
  animation: csmFadeUp .2s var(--csm-ease);
}
#csm-root .csm-toast.ok  { background: var(--csm-green-dim); color: var(--csm-green); border: 1px solid rgba(34,197,94,.22); display: flex; }
#csm-root .csm-toast.err { background: var(--csm-red-dim); color: var(--csm-red); border: 1px solid rgba(248,113,113,.20); display: flex; }
#csm-root .csm-toast svg { width: 14px; height: 14px; flex-shrink: 0; }
@keyframes csmFadeUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* ════════════════════ SEO CONTENT ════════════════════════════ */
#csm-root .csm-seo {
  margin-top: 40px;
  border-top: 1px solid var(--csm-border);
  padding-top: 40px;
}
#csm-root .csm-seo-h2 {
  font-family: var(--csm-font-disp);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--csm-text);
  margin: 0 0 8px;
  letter-spacing: -.02em;
}
#csm-root .csm-seo-sub {
  font-size: .95rem;
  color: var(--csm-text2);
  line-height: 1.7;
  margin: 0 0 28px;
  max-width: 680px;
}
#csm-root .csm-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px,1fr));
  gap: 14px;
  margin-bottom: 36px;
}
#csm-root .csm-info-card {
  background: var(--csm-surface);
  border: 1px solid var(--csm-border);
  border-radius: var(--csm-radius);
  padding: 18px;
  box-shadow: var(--csm-shadow);
  transition: border-color var(--csm-t) var(--csm-ease);
}
#csm-root .csm-info-card:hover { border-color: var(--csm-border2); }
#csm-root .csm-info-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--csm-violet-dim);
  border: 1px solid rgba(124,58,237,.2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
#csm-root .csm-info-icon svg { width: 18px; height: 18px; color: var(--csm-violet-lite); }
#csm-root .csm-info-card h3 { font-size: 13px; font-weight: 700; color: var(--csm-text); margin: 0 0 6px; }
#csm-root .csm-info-card p  { font-size: 12.5px; color: var(--csm-text2); margin: 0; line-height: 1.65; }

/* FAQ */
#csm-root .csm-faq h2 { font-family: var(--csm-font-disp); font-size: 1.25rem; font-weight: 800; color: var(--csm-text); margin: 0 0 14px; letter-spacing: -.02em; }
#csm-root .csm-faq-item {
  background: var(--csm-surface);
  border: 1px solid var(--csm-border);
  border-radius: var(--csm-radius-sm);
  margin-bottom: 8px;
  overflow: hidden;
}
#csm-root .csm-faq-q {
  width: 100%; text-align: left; padding: 13px 16px;
  font-size: 13px; font-weight: 700; color: var(--csm-text);
  background: none; border: none;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer; transition: background var(--csm-t) var(--csm-ease);
}
#csm-root .csm-faq-q:hover { background: var(--csm-surface2); }
#csm-root .csm-faq-q svg { width: 14px; height: 14px; color: var(--csm-violet-lite); flex-shrink: 0; transition: transform var(--csm-t) var(--csm-ease); }
#csm-root .csm-faq-item.open .csm-faq-q svg { transform: rotate(45deg); }
#csm-root .csm-faq-a {
  display: none; padding: 0 16px 13px;
  font-size: 13px; color: var(--csm-text2); line-height: 1.7;
  border-top: 1px solid var(--csm-border);
}
#csm-root .csm-faq-item.open .csm-faq-a { display: block; }

/* ════════════════════ MOBILE STICKY CTA ═══════════════════════ */
#csm-root .csm-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0; z-index: 200;
  padding: 10px 16px 14px;
  background: rgba(13,13,26,.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--csm-border);
  box-shadow: 0 -6px 28px rgba(124,58,237,.15);
}
@media (max-width: 640px) {
  #csm-root .csm-sticky-cta { display: block; }
}

/* ════════════════════ RESPONSIVE ══════════════════════════════ */
@media (max-width: 640px) {
  #csm-root { padding: 0 12px 110px; }
  #csm-root .csm-hero { padding: 32px 8px 24px; }
  #csm-root .csm-hero::before { display: none; }
  #csm-root .csm-editor { min-height: 180px; font-size: 12.5px; }
  #csm-root .csm-panel-head { flex-wrap: wrap; gap: 7px; }
  #csm-root .csm-btn { padding: 6px 10px; font-size: 11.5px; }
  #csm-root .csm-action-row { flex-direction: column; }
  #csm-root .csm-options { padding: 12px; }
  #csm-root .csm-info-grid { grid-template-columns: 1fr; }
}