*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:'Inter',sans-serif;
  background:linear-gradient(135deg,#0f172a,#1e293b,#111827);
  color:white;
  min-height:100vh;
  padding:30px;
}

.container{
  max-width:1600px;
  margin:auto;
}

.hero{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(14px);
  border-radius:28px;
  padding:15px 25px;
  margin-bottom:15px;
  box-shadow:0 20px 40px rgba(0,0,0,0.35);
}

.hero h1{
  margin:0;
  font-size:24px;
  font-weight:700;
  display: inline-block;
}

.hero p{
  color:#cbd5e1;
  margin: 0 0 0 15px;
  display: inline-block;
  font-size: 14px;
}

.privacy-notice {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
  padding: 10px 20px;
  border-radius: 14px;
  margin-bottom: 15px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

.grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:16px;
  align-items: center;
}

.panel{
  background:rgba(255,255,255,0.05);
  border-radius:24px;
  border:1px solid rgba(255,255,255,0.08);
  padding:22px;
  backdrop-filter:blur(10px);
  box-shadow:0 10px 25px rgba(0,0,0,0.3);
}

.swap-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 4px;
}

.swap-mid-btn {
  background: linear-gradient(135deg, #f59e0b, #ea580c);
  color: white;
  border: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(234, 88, 12, 0.35);
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
  z-index: 10;
}

.swap-mid-btn .swap-icon {
  display: inline-block;
  transition: transform 0.3s ease-in-out;
}

.swap-mid-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(234, 88, 12, 0.5);
}

.swap-mid-btn:hover .swap-icon {
  transform: rotate(180deg);
}

.controls{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:20px;
  max-width:100%;
}

select,
button,
input{
  border:none;
  border-radius:14px;
  padding:12px 16px;
  font-size:14px;
  max-width:100%;
  min-width:0;
}

input[type="file"]{
  flex:1 1 220px;
  box-sizing:border-box;
}

select,
input{
  background:#0f172a;
  color:white;
  border:1px solid rgba(255,255,255,0.08);
}

button{
  background:linear-gradient(135deg,#3b82f6,#8b5cf6);
  color:white;
  cursor:pointer;
  font-weight:600;
  transition:0.25s;
}

button:hover{
  transform:translateY(-2px);
  opacity:0.95;
}

/* ---- Visible press feedback for every button on the site ----
   Without this, clicking a button gives no confirmation the click
   registered at all (especially noticeable on mobile/touch, where
   :hover never fires) - if the action is slow or fails silently, the
   person has no idea whether they actually pressed it. :active fires
   immediately on press, before any network response, so it always
   confirms the click itself succeeded, independent of what happens next. */
button:active{
  transform:translateY(1px) scale(0.97);
  opacity:0.85;
  transition:transform 0.05s ease, opacity 0.05s ease;
}

button:disabled{
  opacity:0.5;
  cursor:not-allowed;
  transform:none;
}
button:disabled:active{
  transform:none;
  opacity:0.5;
}

textarea{
  width:100%;
  min-height:550px;
  resize:vertical;
  border-radius:18px;
  border:none;
  padding:18px;
  font-family:monospace;
  /* Fluid font-size: scales smoothly with viewport width instead of
     jumping at fixed breakpoints. 16px floor keeps it readable and
     substantial on small phones; 22px ceiling gives it real presence on
     desktop without breaking layout; everything in between (tablets,
     small laptops) interpolates linearly via the vw term. */
  font-size:clamp(16px, 1.1vw + 11.9px, 22px);
  line-height:1.5;
  background:#020617;
  color:#e2e8f0;
  border:1px solid rgba(255,255,255,0.08);
}

h2{
  margin-top:0;
}

.preview{
  background:white;
  color:black;
  border-radius:18px;
  padding:20px;
  overflow:auto;
  max-height:400px;
}

#diffOutput{
  font-family:monospace;
  font-size:13px;
  white-space:pre-wrap;
  background:#020617;
  border-radius:18px;
  padding:18px;
  border:1px solid rgba(255,255,255,0.08);
  max-height:300px;
  overflow:auto;
  margin-top:12px;
  display:none;
}

footer {
  margin-top: 40px;
  text-align: center;
  color: #64748b;
  font-size: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 20px;
  line-height: 1.6;
}

footer a {
  color: #94a3b8;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

.accessibility-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.accessibility-badge:hover,
.accessibility-badge:focus-visible {
  background: rgba(96,165,250,0.15);
  color: #e2e8f0;
  text-decoration: none;
}

.accessibility-badge-icon {
  font-size: 16px;
  line-height: 1;
}

.accessibility-statement {
  margin-top: 40px;
  padding: 24px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1.7;
  text-align: left;
  direction: ltr;
}

.accessibility-statement h2 {
  margin: 0 0 16px 0;
  color: #fff;
  font-size: 20px;
  text-align: left;
}

.accessibility-statement h3 {
  margin: 20px 0 8px 0;
  color: #e2e8f0;
  font-size: 15px;
}

.accessibility-statement ul {
  margin: 0;
  padding-left: 20px;
  padding-right: 0;
}

.accessibility-statement a {
  color: #60a5fa;
}

.accessibility-statement-meta {
  margin-top: 16px;
  font-size: 12px;
  color: #64748b;
}

@media(max-width:1100px){
  .grid{ 
    grid-template-columns:1fr; 
    gap:20px;
  }
  .swap-container {
    padding: 10px 0;
  }
  .swap-mid-btn:hover .swap-icon {
    transform: rotate(90deg);
  }
  .hero p { display: block; margin: 5px 0 0 0; }
}

[data-tooltip]{position:relative}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after{
content:attr(data-tooltip);
position:absolute;
left:50%;
transform:translateX(-50%);
bottom:120%;
white-space:pre-line;
min-width:220px;
max-width:340px;
padding:10px 12px;
border-radius:10px;
background:rgba(15,23,42,.98);
color:#fff;
font-size:12px;
line-height:1.4;
z-index:9999;
border:1px solid rgba(255,255,255,.15);
box-shadow:0 8px 24px rgba(0,0,0,.35);
transform: translateX(-50%) rotate(0deg) !important;
}

.active-editor{
 border:2px solid #60a5fa !important;
 box-shadow:0 0 15px rgba(96,165,250,.45);
}

.editor-toolbar{
display:flex;
gap:6px;
margin-bottom:10px;
justify-content:flex-end;
flex-wrap: wrap;
}

/* Only the bottom toolbar (zoom controls + Example/Pretty/Minify) needs the
   two button groups pushed to opposite corners. The top Copy/Paste/Clear
   row keeps the original flex-end (clustered top-right) behavior. */
.editor-toolbar-split{
justify-content:space-between;
}

.editor-toolbar-group{
display:flex;
gap:6px;
flex-wrap:wrap;
}

.editor-toolbar button{
padding:6px 10px;
border-radius:10px;
font-size:12px;
}

.btn-zoom {
  background: linear-gradient(135deg, #334155, #1e293b) !important;
  min-width:38px;
}

.zoom-control{
  display:flex;
  align-items:center;
  gap:2px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:12px;
  padding:3px;
}

.zoom-control button{
  background:transparent !important;
  color:#94a3b8;
  width:28px;
  height:26px;
  padding:0;
  border-radius:8px;
  box-shadow:none !important;
  display:flex;
  align-items:center;
  justify-content:center;
}

.zoom-control button:hover{
  background:rgba(255,255,255,0.1) !important;
  color:#f1f5f9;
  transform:none;
}

.zoom-control button svg{
  width:14px;
  height:14px;
  stroke:currentColor;
  stroke-width:2.25;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}

.zoom-control .zoom-reset svg{
  width:13px;
  height:13px;
}

.zoom-control .zoom-divider{
  width:1px;
  height:16px;
  background:rgba(255,255,255,0.12);
  margin:0 1px;
}

/* ---- Visual hierarchy ----
   Only Convert / Download (the primary actions) and the Swap button (the
   one deliberately bold "signature" interaction) keep a loud gradient.
   Every other action - Copy/Paste/Clear/Example/Pretty/Minify/Auto Detect/
   Check & Suggest Fix - is a secondary action and shares one quiet,
   consistent style instead of six different colors competing for
   attention. Differentiation between them now comes from their icon and
   label, not from color-coding every single button. */
.btn-secondary{
  background:rgba(255,255,255,0.06) !important;
  border:1px solid rgba(255,255,255,0.12);
  color:#e2e8f0;
  box-shadow:none !important;
}
.btn-secondary:hover{
  background:rgba(255,255,255,0.13) !important;
  border-color:rgba(255,255,255,0.24);
}
.btn-secondary:active{
  background:rgba(255,255,255,0.22) !important;
  border-color:rgba(255,255,255,0.4);
}

.btn-icon{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.btn-icon svg{
  width:14px;
  height:14px;
  stroke:currentColor;
  stroke-width:2.25;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
  flex-shrink:0;
}

/* ---- Accessibility: visible keyboard focus ----
   Mouse users get :hover; keyboard users need an equally clear signal.
   :focus-visible (not plain :focus) means clicking with a mouse doesn't
   leave a distracting ring, but Tab-ing through the page does. */
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:2px solid #60a5fa;
  outline-offset:2px;
}

/* ---- Toast notifications ----
   Replaces the browser's native alert() for all in-app feedback (errors,
   validation results, copy/paste confirmations). alert() blocks the whole
   page, looks like an OS dialog instead of part of the product, and can't
   show more than one line comfortably - none of which fits a tool that
   already has a designed dark UI. */
.toast-container{
  position:fixed;
  top:20px;
  right:20px;
  z-index:1000;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:380px;
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  background:rgba(15,23,42,0.97);
  border:1px solid rgba(255,255,255,0.12);
  border-left:3px solid #60a5fa;
  border-radius:14px;
  padding:14px 16px;
  box-shadow:0 12px 28px rgba(0,0,0,0.4);
  backdrop-filter:blur(12px);
  display:flex;
  gap:10px;
  align-items:flex-start;
  animation:toast-in 0.25s ease-out;
}
.toast.toast-out{
  animation:toast-out 0.2s ease-in forwards;
}
.toast-success{ border-left-color:#34d399; }
.toast-error{ border-left-color:#f87171; }
.toast-warning{ border-left-color:#fbbf24; }
.toast-icon{
  flex-shrink:0;
  width:18px;
  height:18px;
  margin-top:1px;
}
.toast-success .toast-icon{ color:#34d399; }
.toast-error .toast-icon{ color:#f87171; }
.toast-warning .toast-icon{ color:#fbbf24; }
.toast-info .toast-icon{ color:#60a5fa; }
.toast-body{
  flex:1;
  font-size:13px;
  line-height:1.5;
  color:#e2e8f0;
  white-space:pre-line;
}
.toast-close{
  background:transparent !important;
  border:none;
  box-shadow:none !important;
  color:#94a3b8;
  padding:0 !important;
  width:18px;
  height:18px;
  flex-shrink:0;
  font-size:16px;
  line-height:1;
}
.toast-close:hover{ color:#f1f5f9; transform:none; }
@keyframes toast-in{
  from{ opacity:0; transform:translateX(20px); }
  to{ opacity:1; transform:translateX(0); }
}
@keyframes toast-out{
  from{ opacity:1; transform:translateX(0); }
  to{ opacity:0; transform:translateX(20px); }
}
@media (max-width:640px){
  .toast-container{
    left:12px;
    right:12px;
    top:12px;
    max-width:none;
  }
}

.statusbar{
 display:flex;
 flex-direction: column;
 gap:8px;
 padding:12px 16px;
 margin:8px 0 12px 0;
 background:rgba(255,255,255,.05);
 border:1px solid rgba(255,255,255,.08);
 border-radius:16px;
 font-size:13px;
 color:#cbd5e1;
}

.statusbar-row {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.statusbar-row:not(:last-child) {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 6px;
}

.statusbar strong{
 color:#fff;
 font-weight:600;
}

.badge-label {
  background: rgba(255,255,255,0.1);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.5px;
}
.badge-input { border-left: 3px solid #3b82f6; color: #60a5fa; }
.badge-output { border-left: 3px solid #10b981; color: #34d399; }

/* Accessibility — visually hidden, no layout impact */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: #1e293b;
  color: #fff;
  border-radius: 0 0 14px 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.15);
}

.skip-link:focus,
.skip-link:focus-visible {
  left: 30px;
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}

fieldset.format-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
  display: contents;
}

:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}

@media (max-width: 640px) {
  html, body{
    overflow-x:hidden;
    width:100%;
  }
  body{
    padding:10px;
  }
  .hero{
    padding:14px 16px;
    border-radius:18px;
  }
  .hero h1{
    font-size:19px;
  }
  .privacy-notice{
    padding:10px 14px;
    font-size:12px;
  }
  .panel{
    padding:14px;
    border-radius:16px;
  }
  .controls{
    gap:8px;
  }
  select,
  button,
  input{
    padding:10px 12px;
    font-size:13px;
  }
  input[type="file"]{
    flex:1 1 100%;
    width:100%;
    padding:10px 12px;
  }
  textarea{
    min-height:320px;
    padding:12px;
  }
  .statusbar{
    padding:10px 12px;
  }
  .statusbar-row{
    gap:10px;
    font-size:12px;
  }
  .accessibility-statement{
    padding:16px;
    border-radius:16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ---------------------------------------------------------------------
 * SEO landing-page sections (breadcrumb, intro copy, FAQ, related links).
 * Generated by scripts/generate-seo-pages.js - styled to match the
 * existing .hero / .accessibility-statement look, not a separate theme.
 * --------------------------------------------------------------------- */
.seo-breadcrumb {
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 10px;
  text-align: left;
  direction: ltr;
}
.seo-breadcrumb a { color: #93c5fd; text-decoration: none; }
.seo-breadcrumb a:hover { text-decoration: underline; }

.hero p code {
  background: rgba(255,255,255,0.08);
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 0.9em;
}

.seo-note {
  color: #fbbf24;
  font-size: 14px;
}

.seo-content {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  text-align: left;
  direction: ltr;
}

.seo-faq, .seo-related {
  padding: 24px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1.7;
}

.seo-faq h2, .seo-related h2 {
  margin: 0 0 16px 0;
  color: #fff;
  font-size: 20px;
}

.faq-item { margin-bottom: 18px; }
.faq-item:last-child { margin-bottom: 0; }
.faq-item h3 {
  margin: 0 0 6px 0;
  color: #e2e8f0;
  font-size: 15px;
}
.faq-item p { margin: 0; }

.seo-related ul {
  margin: 0 0 16px 0;
  padding-left: 20px;
  columns: 2;
}
.seo-related li { margin-bottom: 8px; break-inside: avoid; }
.seo-related a { color: #93c5fd; text-decoration: none; }
.seo-related a:hover { text-decoration: underline; }
.seo-related p { margin: 0; }

@media (max-width: 700px) {
  .seo-related ul { columns: 1; }
}

/* ---------------------------------------------------------------------
 * Lightweight single-purpose tool pages (mini-tool.js). Deliberately
 * simpler than the full converter UI (.panel/.controls) - one input,
 * one action, one output.
 * --------------------------------------------------------------------- */
.mini-tool-panel {
  padding: 24px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  margin-bottom: 20px;
}
.mini-tool-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.mini-tool-label {
  font-size: 13px;
  color: #94a3b8;
  min-width: 70px;
  text-align: left;
}
.mini-tool-panel textarea, .mini-tool-panel input[type="text"], .mini-tool-panel input[type="number"] {
  width: 100%;
  min-height: 90px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: #f1f5f9;
  padding: 12px 14px;
  font-family: 'Inter', monospace;
  font-size: 14px;
  resize: vertical;
  direction: ltr;
  text-align: left;
}
.mini-tool-panel input[type="number"], .mini-tool-panel input[type="text"] {
  min-height: unset;
  width: auto;
  flex: 1;
}
.mini-tool-result {
  font-size: 28px;
  font-weight: 700;
  color: #4ade80;
  margin: 10px 0 4px 0;
  word-break: break-all;
}
.mini-tool-rate-note {
  font-size: 13px;
  color: #94a3b8;
}
.mini-tool-error { color: #f87171 !important; }
.mini-tool-actions { display: flex; gap: 10px; margin-top: 10px; }

/* ---------------------------------------------------------------------
 * Interactive dev-tool pages (cron explainer, curl-to-code, JSON->TS,
 * text diff, QR code, UUID/password/slug/chmod generators).
 * --------------------------------------------------------------------- */
.devtool-panel {
  padding: 24px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  margin-bottom: 20px;
  text-align: left;
  direction: ltr;
}
.devtool-panel label { display: block; font-size: 13px; color: #94a3b8; margin-bottom: 6px; }
.devtool-panel textarea, .devtool-panel input[type="text"], .devtool-panel input[type="number"], .devtool-panel select {
  width: 100%;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: #f1f5f9;
  padding: 12px 14px;
  font-family: 'Inter', monospace;
  font-size: 14px;
  margin-bottom: 14px;
}
.devtool-panel textarea { min-height: 120px; resize: vertical; }
.devtool-panel .devtool-result {
  font-size: 20px;
  font-weight: 600;
  color: #4ade80;
  padding: 14px;
  background: rgba(0,0,0,0.2);
  border-radius: 12px;
  overflow-wrap: break-word;
  word-break: break-word;
  min-height: 24px;
}
.devtool-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.devtool-checkbox-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.devtool-checkbox-row label { display: flex; align-items: center; gap: 6px; margin-bottom: 0; color: #cbd5e1; font-size: 14px; }
.devtool-checkbox-row input[type="checkbox"] { width: auto; margin: 0; }
.devtool-permbox { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; text-align: center; }
.devtool-permbox > div { background: rgba(0,0,0,0.2); border-radius: 12px; padding: 12px; }
.devtool-permbox h4 { margin: 0 0 8px 0; color: #e2e8f0; font-size: 13px; }
#qrOutput svg { background: #fff; border-radius: 12px; padding: 12px; max-width: 100%; height: auto; display: inline-block; box-sizing: border-box; }
.diff-added { background: rgba(74, 222, 128, 0.25); color: #bbf7d0; }
.diff-removed { background: rgba(248, 113, 113, 0.25); color: #fecaca; text-decoration: line-through; }
.diff-same { color: #cbd5e1; }
.diff-legend { font-size: 12px; font-weight: 400; margin-left: 10px; }
.diff-legend span { padding: 2px 6px; border-radius: 4px; }
#diffOutput { white-space: pre-wrap; font-family: monospace; font-size: 13px; line-height: 1.6; padding: 14px; background: rgba(0,0,0,0.2); border-radius: 12px; }

/* ---------------------------------------------------------------------
 * Mobile fixes for the mini-tool / devtool components. Narrow phones
 * (≤400px) combined with 24px panel padding leave well under 300px of
 * usable width, so anything with a fixed width (the QR SVG, the
 * 3-column chmod grid) needs an explicit override here rather than
 * relying on flex-wrap alone.
 * --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .mini-tool-panel, .devtool-panel {
    padding: 16px;
  }
  .devtool-permbox {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .mini-tool-row, .devtool-row {
    flex-direction: column;
    align-items: stretch;
  }
  .mini-tool-row input[type="number"], .mini-tool-row input[type="text"],
  .devtool-row input[type="number"], .devtool-row input[type="text"],
  .devtool-row select {
    width: 100%;
    flex: none;
  }
  .mini-tool-result {
    font-size: 22px;
    word-break: break-word;
  }
}