:root{
    --bg:#FAFAFC;
    --surface:#FFFFFF;
    --border:#E7E7EE;
    --border-strong:#D6D6E0;
    --ink:#17171F;
    --muted:#6C6C78;
    --accent:#2F54FF;      /* electric cobalt — fast, technical */
    --accent-ink:#1E3ACC;
    --accent-wash:#EEF1FF;
    --ready:#12B76A;       /* conversion complete */
    --ready-wash:#E7F8F0;
    --danger:#D64545;
    --danger-wash:#FCECEC;
    --radius:14px;
    --radius-sm:9px;
    --shadow:0 1px 2px rgba(23,23,31,.04), 0 8px 30px rgba(23,23,31,.06);
    --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --sans:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  }

  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    font-family:var(--sans);
    background:var(--bg);
    color:var(--ink);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  a{color:var(--accent-ink);text-decoration:none}
  a:hover{text-decoration:underline}

  .wrap{max-width:820px;margin:0 auto;padding:0 20px}

  /* Header */
  header{padding:26px 0 6px}
  .brand{display:flex;align-items:center;gap:10px}
  .mark{
    width:30px;height:30px;border-radius:8px;
    background:var(--ink);color:#fff;display:grid;place-items:center;
    font-family:var(--mono);font-weight:700;font-size:15px;
  }
  .mark span{transform:translateY(-1px)}
  .brand b{font-weight:700;font-size:17px;letter-spacing:-.01em}
  .brand .placeholder{color:var(--muted);font-weight:500;font-size:12px;margin-left:2px}

  /* Hero = the tool itself */
  .hero{padding:34px 0 8px}
  .hero h1{
    font-size:clamp(28px,5vw,40px);
    line-height:1.08;letter-spacing:-.025em;font-weight:700;margin:0 0 12px;
  }
  .hero h1 .fmt{font-family:var(--mono);font-weight:700}
  .hero p{color:var(--muted);font-size:17px;margin:0;max-width:52ch}

  /* Converter card */
  .card{
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius);box-shadow:var(--shadow);
    margin:22px 0;overflow:hidden;
  }

  /* Drop zone */
  .drop{
    padding:44px 24px;text-align:center;cursor:pointer;
    border:2px dashed var(--border-strong);border-radius:var(--radius);
    margin:18px;transition:border-color .15s, background .15s;
    background:linear-gradient(180deg,#fff, #fdfdff);
  }
  .drop:hover{border-color:var(--accent)}
  .drop.drag{border-color:var(--accent);background:var(--accent-wash)}
  .drop .icon{
    width:46px;height:46px;margin:0 auto 12px;border-radius:12px;
    background:var(--accent-wash);color:var(--accent);display:grid;place-items:center;
  }
  .drop h2{font-size:18px;margin:0 0 4px;font-weight:600}
  .drop .sub{color:var(--muted);font-size:14px;margin:0}
  .drop .accept{color:var(--muted);font-size:12.5px;margin:12px 0 0;font-family:var(--mono)}

  /* Popular quick-picks */
  .popular{padding:0 18px 18px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .popular .lbl{font-size:12.5px;color:var(--muted);margin-right:2px}
  .chip{
    font-family:var(--mono);font-size:12.5px;font-weight:500;
    border:1px solid var(--border);background:#fff;color:var(--ink);
    padding:6px 10px;border-radius:999px;cursor:pointer;transition:.12s;
  }
  .chip:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-wash)}

  /* Staged files + controls */
  .stage{padding:0 18px 18px;display:none}
  .stage.show{display:block}
  .filelist{display:flex;flex-direction:column;gap:8px;margin:0 0 16px}
  .filerow{
    display:flex;align-items:center;gap:12px;
    border:1px solid var(--border);border-radius:var(--radius-sm);
    padding:10px 12px;background:#fff;
  }
  .filerow .ext{
    font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.02em;
    background:var(--ink);color:#fff;padding:4px 7px;border-radius:6px;text-transform:uppercase;
    flex:none;min-width:44px;text-align:center;
  }
  .filerow .meta{min-width:0;flex:1}
  .filerow .name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .filerow .size{font-size:12px;color:var(--muted)}
  .filerow .rm{border:none;background:none;color:var(--muted);cursor:pointer;font-size:18px;line-height:1;padding:4px;border-radius:6px}
  .filerow .rm:hover{color:var(--danger);background:var(--danger-wash)}

  /* The signature: format-to-format selector */
  .convertbar{
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    padding:16px;border:1px solid var(--border);border-radius:var(--radius-sm);
    background:#fcfcfe;
  }
  .fmttoken{
    font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:.02em;
    padding:9px 13px;border-radius:9px;text-transform:uppercase;
    border:1px solid var(--border-strong);background:#fff;color:var(--ink);
  }
  .arrow{color:var(--muted);flex:none;display:grid;place-items:center}
  .toblock{display:flex;align-items:center;gap:8px}
  .toblock label{font-size:13px;color:var(--muted)}
  select#target{
    font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:.02em;text-transform:uppercase;
    padding:9px 13px;padding-right:30px;border-radius:9px;
    border:1px solid var(--accent);background:var(--accent-wash);color:var(--accent-ink);
    cursor:pointer;appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231E3ACC' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 10px center;
  }
  .quality{display:flex;align-items:center;gap:10px;margin-left:auto}
  .quality label{font-size:13px;color:var(--muted);white-space:nowrap}
  .quality input[type=range]{accent-color:var(--accent);width:110px}
  .quality .val{font-family:var(--mono);font-size:12.5px;color:var(--ink);min-width:34px}
  .quality.hide{display:none}

  .actions{display:flex;gap:10px;margin-top:16px;align-items:center;flex-wrap:wrap}
  .btn{
    font-family:var(--sans);font-weight:600;font-size:15px;
    padding:12px 20px;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:.12s;
  }
  .btn.primary{background:var(--accent);color:#fff}
  .btn.primary:hover{background:var(--accent-ink)}
  .btn.primary:disabled{opacity:.5;cursor:default}
  .btn.ghost{background:#fff;border-color:var(--border-strong);color:var(--ink)}
  .btn.ghost:hover{border-color:var(--muted)}
  .status{font-size:13.5px;color:var(--muted)}

  /* Results */
  .results{padding:0 18px 20px;display:none}
  .results.show{display:block}
  .resultshead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 14px;flex-wrap:wrap}
  .results h3{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0;font-weight:600}
  .resultshead .btn{padding:9px 16px;font-size:14px;display:inline-flex;align-items:center;gap:6px}
  .resultrow{
    display:flex;align-items:center;gap:12px;
    border:1px solid var(--ready);background:var(--ready-wash);
    border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:8px;
  }
  .resultrow .tick{color:var(--ready);flex:none}
  .resultrow .name{flex:1;min-width:0;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .resultrow .size{font-size:12px;color:var(--muted);flex:none}
  .resultrow a.dl{
    font-family:var(--sans);font-weight:600;font-size:13px;color:#fff;background:var(--ready);
    padding:7px 12px;border-radius:8px;flex:none;
  }
  .resultrow a.dl:hover{filter:brightness(.95);text-decoration:none}

  .err{
    background:var(--danger-wash);border:1px solid #F1C9C9;color:#8f2b2b;
    border-radius:var(--radius-sm);padding:11px 13px;font-size:13.5px;margin:0 18px 18px;
  }
  .err.hide{display:none}

  /* Ad slot placeholders — leave for phase: monetisation */
  .adslot{
    border:1px dashed var(--border-strong);border-radius:10px;color:var(--muted);
    font-size:12px;text-align:center;padding:14px;margin:20px 0;font-family:var(--mono);
    display:none; /* flip to block once AdSense is approved */
  }

  /* Trust strip */
  .trust{display:flex;gap:22px;flex-wrap:wrap;color:var(--muted);font-size:13.5px;margin:6px 0 30px}
  .trust div{display:flex;align-items:center;gap:7px}
  .trust svg{color:var(--ready)}

  footer{border-top:1px solid var(--border);padding:26px 0 50px;color:var(--muted);font-size:13px}
  footer p{margin:0 0 6px}

  @media (max-width:560px){
    .quality{margin-left:0;width:100%}
    .convertbar{gap:10px}
  }
  @media (prefers-reduced-motion:reduce){
    *{transition:none!important;animation:none!important}
  }

/* ---- SEO landing-page content ---- */
.content{margin:8px 0 44px}
.content h2{font-size:20px;letter-spacing:-.01em;font-weight:600;margin:30px 0 10px}
.content p{color:var(--ink);margin:0 0 12px;font-size:15.5px}
ol.steps{list-style:none;padding:0;margin:0 0 8px;display:flex;flex-direction:column;gap:10px}
ol.steps li{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;font-size:14.5px;color:var(--muted)}
ol.steps li strong{color:var(--ink)}
.faq-q{border-top:1px solid var(--border);padding:14px 0}
.faq-q h3{font-size:15px;font-weight:600;margin:0 0 5px}
.faq-q p{margin:0;color:var(--muted);font-size:14.5px}
.rel-grid{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
a.rel{font-family:var(--mono);font-size:12.5px;font-weight:500;border:1px solid var(--border);border-radius:999px;padding:7px 12px;color:var(--ink);text-decoration:none;transition:.12s;white-space:nowrap}
a.rel:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-wash)}
header .wrap{display:flex;align-items:center}
footer .wrap p{margin:0 0 6px}

/* footer nav + legal pages */
.fnav{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 10px}
.fnav a{color:var(--muted);font-size:13.5px;text-decoration:none}
.fnav a:hover{color:var(--accent-ink)}
.content.prose{max-width:760px}
.content.prose h1{font-size:28px;letter-spacing:-.02em;font-weight:700;margin:24px 0 14px}
.content.prose a{color:var(--accent-ink)}