:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --ink: #17191f;
  --muted: #717782;
  --line: #e5e8ed;
  --soft: #f1f3f6;
  --blue: #536dfe;
  --blue-dark: #3f55d7;
  --blue-soft: #eef1ff;
  --green: #16a66b;
  --green-soft: #edf9f4;
  --amber: #b66a16;
  --amber-soft: #fff7e9;
  --shadow: 0 24px 70px rgba(29, 36, 52, .10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, "SF Pro Display", "Segoe UI", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.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; }

.site-header {
  width: min(1180px, calc(100% - 48px));
  height: 82px;
  display: flex;
  align-items: center;
  gap: 36px;
  margin: auto;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.brand img { border-radius: 13px; box-shadow: 0 8px 24px rgba(20,25,38,.12); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 16px; letter-spacing: -.02em; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.site-header nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.site-header nav a, .all-tools { color: #5e6470; font-size: 12px; font-weight: 700; text-decoration: none; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--ink); }
.all-tools { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 13px; background: var(--surface); }
.all-tools:hover { border-color: #cfd5ff; color: var(--blue-dark); }

main { overflow: hidden; }
.hero {
  position: relative;
  width: min(1180px, calc(100% - 48px));
  margin: auto;
  padding: 88px 0 96px;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 760px;
  height: 500px;
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(83,109,254,.13), rgba(83,109,254,.025) 55%, transparent 72%);
  filter: blur(5px);
}
.hero-copy { max-width: 780px; margin: 0 auto 46px; text-align: center; }
.eyebrow, .panel-kicker { color: var(--blue); font-size: 10px; font-weight: 900; letter-spacing: .17em; }
.hero h1 {
  margin: 16px 0 18px;
  font-size: clamp(54px, 7vw, 88px);
  line-height: .94;
  letter-spacing: -.065em;
}
.hero h1 em { color: var(--blue); font-style: normal; }
.hero-copy > p { max-width: 620px; margin: auto; color: var(--muted); font-size: 16px; line-height: 1.65; }
.trust-list { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.trust-list span { display: flex; align-items: center; gap: 7px; border: 1px solid #dcefe6; border-radius: 99px; padding: 7px 11px; background: #f4fbf7; color: #287a58; font-size: 10px; font-weight: 750; }
.trust-list i { font-style: normal; }

.converter-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(380px, .97fr);
  border: 1px solid var(--line);
  border-radius: 30px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.upload-panel, .settings-panel { min-width: 0; padding: 24px; }
.settings-panel { border-left: 1px solid var(--line); background: #fbfbfc; }
.drop-zone {
  min-height: 510px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed #ccd2dd;
  border-radius: 22px;
  padding: 30px;
  background: linear-gradient(145deg, #fbfcff, #f5f7fb);
  text-align: center;
  outline: 0;
  transition: border-color .2s, background .2s, box-shadow .2s, transform .2s;
}
.drop-zone:hover, .drop-zone:focus-visible, .drop-zone.dragging { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 5px rgba(83,109,254,.05); }
.drop-zone.dragging { transform: scale(.995); }
.upload-symbol {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  border-radius: 24px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 17px 36px rgba(23,25,31,.18);
}
.upload-symbol span { transform: translateX(2px); font-size: 26px; }
.drop-zone h2 { margin: 12px 0 7px; font-size: 27px; letter-spacing: -.045em; }
.drop-zone p { margin: 0 0 23px; color: #979ca6; font-size: 12px; }
.primary-button {
  min-width: 170px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 0;
  border-radius: 13px;
  padding: 0 16px;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  box-shadow: 0 11px 25px rgba(83,109,254,.24);
}
.primary-button:hover { background: var(--blue-dark); transform: translateY(-1px); }

.file-card {
  min-height: 410px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: end;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 16px;
  background: #101218;
  overflow: hidden;
}
.file-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.file-card::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(10,12,17,.9)); pointer-events: none; }
.file-copy { position: relative; z-index: 1; min-width: 0; color: #fff; }
.file-copy span, .file-copy strong, .file-copy small { display: block; }
.file-type { width: max-content; margin-bottom: 7px; border-radius: 6px; padding: 4px 6px; background: var(--blue); font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.file-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.file-copy small { margin-top: 5px; color: #b9bec8; font-size: 10px; }
.remove-button { position: absolute; z-index: 2; top: 12px; right: 12px; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.18); border-radius: 11px; background: rgba(20,22,28,.74); color: #fff; font-size: 20px; backdrop-filter: blur(10px); }
.remove-button:hover { background: #d84b5d; }
.size-warning { display: flex; align-items: center; gap: 11px; margin-top: 12px; border: 1px solid #f0dfbd; border-radius: 14px; padding: 11px 13px; background: var(--amber-soft); color: #75552f; }
.size-warning > span { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; background: #f4d697; font-weight: 900; }
.size-warning p { margin: 0; }
.size-warning strong, .size-warning small { display: block; }
.size-warning strong { font-size: 10px; }
.size-warning small { margin-top: 3px; font-size: 8px; }

.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 15px; margin: 2px 0 22px; }
.panel-heading h2 { margin: 7px 0 0; font-size: 26px; letter-spacing: -.04em; }
.local-badge { display: flex; align-items: center; gap: 7px; border: 1px solid #dcefe6; border-radius: 99px; padding: 7px 9px; background: var(--green-soft); color: #287a58; font-size: 9px; font-weight: 800; }
.local-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset:disabled { opacity: .48; }
.setting-group { padding: 16px 0; border-top: 1px solid var(--line); }
.setting-group.compact { min-width: 0; }
.setting-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.setting-label strong { font-size: 12px; }
.setting-label small { color: var(--muted); font-size: 9px; }
.time-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.time-fields label > span { display: block; margin: 0 0 6px 2px; color: var(--muted); font-size: 9px; font-weight: 700; }
.input-suffix { position: relative; }
.input-suffix input { width: 100%; height: 42px; border: 1px solid var(--line); border-radius: 11px; padding: 0 32px 0 11px; background: #fff; color: var(--ink); outline: 0; font-size: 11px; }
.input-suffix input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.input-suffix b { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: #9ba0aa; font-size: 9px; }
.clip-warning { margin: 9px 0 0; color: var(--amber); font-size: 9px; }
.setting-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid var(--line); }
.setting-grid .setting-group { border: 0; }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.segmented.four-options { grid-template-columns: repeat(4, 1fr); }
.segmented label { min-width: 0; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: #747985; font-size: 9px; font-weight: 800; transition: .16s; }
.segmented input:checked + span { border-color: #bdc6ff; background: var(--blue-soft); color: var(--blue-dark); box-shadow: inset 0 0 0 1px rgba(83,109,254,.06); }
.segmented input:focus-visible + span { outline: 3px solid rgba(83,109,254,.18); outline-offset: 1px; }
.recommendation { display: flex; align-items: center; gap: 10px; border: 1px solid #e2e6ed; border-radius: 13px; padding: 11px 12px; background: #fff; }
.recommendation > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--soft); color: var(--blue); font-weight: 900; }
.recommendation strong, .recommendation p { margin: 0; }
.recommendation strong { display: block; font-size: 9px; }
.recommendation p { margin-top: 3px; color: var(--muted); font-size: 8px; }
.status-area { margin-top: 16px; }
.status-copy { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.status-copy strong { color: var(--muted); font-size: 9px; font-weight: 750; }
.status-copy span { color: var(--muted); font-size: 8px; font-weight: 800; }
.progress-track { height: 5px; overflow: hidden; border-radius: 99px; background: #e9ebef; }
.progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), #8493ff); transition: width .25s ease; }
.status-area.working .status-copy strong, .status-area.working .status-copy span { color: var(--blue-dark); }
.status-area.done .status-copy strong, .status-area.done .status-copy span { color: var(--green); }
.status-area.error .status-copy strong, .status-area.error .status-copy span { color: #c84959; }
.convert-button {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  border: 0;
  border-radius: 14px;
  padding: 0 18px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}
.convert-button:hover:not(:disabled) { background: var(--blue); transform: translateY(-1px); }
.convert-button:disabled { cursor: not-allowed; opacity: .36; }
.convert-button.busy i { animation: pulseArrow 1s ease-in-out infinite; }
@keyframes pulseArrow { 50% { transform: translateX(4px); opacity: .55; } }

.result-section, .privacy-section, .faq-section { width: min(1180px, calc(100% - 48px)); margin: auto; padding: 92px 0; border-top: 1px solid var(--line); }
.result-heading { text-align: center; }
.result-heading h2, .privacy-copy h2, .faq-heading h2 { margin: 9px 0 10px; font-size: clamp(34px, 4vw, 52px); line-height: 1.03; letter-spacing: -.055em; }
.result-heading p, .privacy-copy p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.result-card { max-width: 900px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 16px; margin: 35px auto 0; border: 1px solid var(--line); border-radius: 27px; padding: 15px; background: #fff; box-shadow: var(--shadow); }
.gif-stage { min-height: 410px; display: grid; place-items: center; border-radius: 19px; padding: 18px; background-color: #f4f5f7; background-image: linear-gradient(45deg,#e8eaee 25%,transparent 25%),linear-gradient(-45deg,#e8eaee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e8eaee 75%),linear-gradient(-45deg,transparent 75%,#e8eaee 75%); background-size: 20px 20px; background-position: 0 0,0 10px,10px -10px,-10px 0; overflow: hidden; }
.gif-stage img { max-width: 100%; max-height: 500px; object-fit: contain; border-radius: 8px; box-shadow: 0 13px 34px rgba(20,25,38,.14); }
.result-details { display: flex; flex-direction: column; justify-content: center; padding: 26px; }
.success-pill { width: max-content; display: flex; align-items: center; gap: 7px; border-radius: 99px; padding: 7px 10px; background: var(--green-soft); color: #287a58; font-size: 9px; font-weight: 850; }
.result-details h3 { overflow: hidden; margin: 17px 0 5px; text-overflow: ellipsis; white-space: nowrap; font-size: 19px; letter-spacing: -.03em; }
.result-details > p { margin: 0 0 23px; color: var(--muted); font-size: 10px; }
.download-button, .secondary-button { height: 48px; display: flex; align-items: center; justify-content: space-between; border-radius: 13px; padding: 0 15px; font-size: 11px; font-weight: 850; text-decoration: none; }
.download-button { background: var(--blue); color: #fff; box-shadow: 0 11px 24px rgba(83,109,254,.2); }
.download-button:hover { background: var(--blue-dark); }
.secondary-button { justify-content: center; margin-top: 8px; border: 1px solid var(--line); background: #fff; color: #626873; }
.secondary-button:hover { background: var(--soft); }

.privacy-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: center; }
.privacy-copy h2 { max-width: 470px; }
.privacy-copy p { max-width: 500px; }
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.benefit-grid article { min-height: 210px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 21px; padding: 19px; background: #fff; }
.benefit-grid article > span { color: #bcc1ca; font-size: 11px; font-weight: 900; }
.benefit-grid strong { margin-top: auto; font-size: 14px; }
.benefit-grid p { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.faq-section { display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px 2px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 800; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--blue); font-size: 20px; font-weight: 400; transition: transform .2s; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list p { margin: -8px 0 23px; color: var(--muted); font-size: 12px; line-height: 1.65; }

.site-footer { width: min(1180px, calc(100% - 48px)); display: flex; align-items: center; gap: 28px; margin: auto; border-top: 1px solid var(--line); padding: 35px 0 48px; color: var(--muted); }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.footer-brand img { border-radius: 12px; }
.footer-brand strong, .footer-brand span { display: block; }
.footer-brand strong { color: var(--ink); font-size: 13px; }
.footer-brand span { margin-top: 3px; font-size: 9px; }
.site-footer nav { display: flex; gap: 18px; }
.site-footer a { color: inherit; font-size: 10px; text-decoration: none; }
.site-footer a:hover { color: var(--ink); }
.site-footer small { font-size: 9px; }
.noscript { position: fixed; inset: auto 20px 20px; z-index: 20; border-radius: 12px; padding: 13px; background: #c84959; color: #fff; text-align: center; font-size: 12px; }

@media (max-width: 900px) {
  .site-header nav { display: none; }
  .all-tools { margin-left: auto; }
  .hero { padding-top: 64px; }
  .converter-shell { grid-template-columns: 1fr; }
  .settings-panel { border-top: 1px solid var(--line); border-left: 0; }
  .drop-zone { min-height: 390px; }
  .result-card { grid-template-columns: 1fr; }
  .privacy-section, .faq-section { grid-template-columns: 1fr; gap: 38px; }
  .site-footer { flex-wrap: wrap; }
  .site-footer nav { order: 3; width: 100%; }
}

@media (max-width: 600px) {
  .site-header, .hero, .result-section, .privacy-section, .faq-section, .site-footer { width: min(100% - 28px, 1180px); }
  .site-header { height: 70px; }
  .brand small { display: none; }
  .all-tools { padding: 9px 11px; font-size: 10px; }
  .hero { padding: 52px 0 72px; }
  .hero h1 { font-size: clamp(48px, 15vw, 66px); }
  .hero-copy > p { font-size: 14px; }
  .converter-shell { border-radius: 23px; }
  .upload-panel, .settings-panel { padding: 13px; }
  .drop-zone { min-height: 330px; border-radius: 17px; padding: 18px; }
  .file-card { min-height: 320px; }
  .panel-heading { padding: 8px 5px 0; }
  .segmented.four-options { grid-template-columns: 1fr 1fr; }
  .setting-grid { grid-template-columns: 1fr; gap: 0; }
  .setting-grid .setting-group + .setting-group { border-top: 1px solid var(--line); }
  .result-section, .privacy-section, .faq-section { padding: 68px 0; }
  .result-card { padding: 10px; border-radius: 22px; }
  .gif-stage { min-height: 300px; }
  .result-details { padding: 20px 12px 12px; }
  .benefit-grid { grid-template-columns: 1fr; }
  .benefit-grid article { min-height: 140px; }
  .site-footer { align-items: flex-start; }
  .site-footer nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}

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

/* 2026 pale-blue workspace refresh */
:root {
  --bg: #edf6ff;
  --surface: #fafdff;
  --ink: #10243e;
  --muted: #58718c;
  --line: #cddff1;
  --soft: #e7f2ff;
  --blue: #3479ed;
  --blue-dark: #1f5ec5;
  --blue-soft: #e2efff;
  --green-soft: #e8f8f2;
  --shadow: 0 24px 64px rgba(28, 83, 139, .14);
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 7%, rgba(91, 187, 255, .22), transparent 28%),
    radial-gradient(circle at 91% 22%, rgba(90, 123, 255, .15), transparent 29%),
    linear-gradient(180deg, #f6fbff 0%, var(--bg) 58%, #e8f3ff 100%);
  transition: background .28s ease, color .28s ease;
}

.site-header { height: 76px; }
.brand strong { font-size: 18px; }
.brand small { font-size: 12px; }
.site-header nav a, .all-tools { color: var(--muted); font-size: 14px; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.utility-button {
  height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 12px;
  background: rgba(255,255,255,.76);
  color: var(--ink);
  box-shadow: 0 7px 20px rgba(34,83,132,.06);
  font-size: 14px;
  backdrop-filter: blur(12px);
}
.utility-button:hover { border-color: #91b9e8; background: #fff; color: var(--blue-dark); }
.all-tools { background: rgba(255,255,255,.76); }

.hero { padding: 20px 0 38px; isolation: isolate; }
.hero::before {
  width: 720px;
  height: 300px;
  top: -55px;
  background: radial-gradient(circle, rgba(70,145,255,.25), rgba(77,178,255,.08) 50%, transparent 73%);
  filter: blur(3px);
  animation: heroGlow 8s ease-in-out infinite alternate;
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 8%;
  width: 84%;
  height: 220px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 18% 45%, rgba(51,194,255,.25) 0 5px, transparent 6px),
    radial-gradient(circle at 76% 35%, rgba(80,102,255,.25) 0 4px, transparent 5px),
    linear-gradient(110deg, transparent 20%, rgba(91,184,255,.12) 48%, transparent 72%);
  animation: blueDrift 11s ease-in-out infinite alternate;
}
@keyframes heroGlow { to { transform: translateX(-47%) scale(1.1); opacity: .75; } }
@keyframes blueDrift { to { transform: translateX(4%) translateY(8px); opacity: .72; } }
.hero-copy { max-width: 980px; margin-bottom: 16px; }
.eyebrow, .panel-kicker { font-size: 13px; letter-spacing: .15em; }
.hero h1 {
  margin: 10px 0 11px;
  font-size: clamp(34px, 4.1vw, 52px);
  line-height: 1;
  white-space: nowrap;
}
.hero-copy > p { max-width: 760px; font-size: 17px; line-height: 1.5; }
.trust-list { margin-top: 9px; }
.trust-list span { border-color: #b9ddf4; background: rgba(245,252,255,.8); color: #176787; font-size: 13px; }

.converter-shell { background: rgba(250,253,255,.88); backdrop-filter: blur(18px); }
.settings-panel { background: linear-gradient(155deg, #f8fcff, #edf6ff); }
.drop-zone {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  border-color: #a9c8e8;
  background: linear-gradient(145deg, #f8fcff, #eaf5ff);
}
.drop-zone, .drop-zone * { cursor: pointer; }
.drop-zone h2 { font-size: 34px; }
.drop-zone p { color: var(--muted); font-size: 16px; }
.panel-kicker { font-size: 13px; }
.primary-button { min-width: 190px; height: 52px; font-size: 16px; }
.panel-heading h2 { font-size: 32px; }
.local-badge { border-color: #bce3d5; font-size: 13px; }
.setting-group { padding: 18px 0; }
.setting-label strong { font-size: 17px; }
.setting-label small { font-size: 13px; }
.time-fields label > span { font-size: 13px; }
.input-suffix input { height: 48px; background: var(--surface); font-size: 15px; }
.input-suffix b, .clip-warning { font-size: 13px; }
.segmented span { height: 44px; background: var(--surface); color: #425d79; font-size: 13px; }
.recommendation { background: var(--surface); }
.recommendation strong { font-size: 13px; }
.recommendation p { font-size: 13px; line-height: 1.45; }
.status-copy strong { font-size: 13px; }
.status-copy span { font-size: 13px; }
.convert-button { height: 56px; font-size: 16px; }
.size-warning strong { font-size: 13px; }
.size-warning small { font-size: 13px; }
.file-type { font-size: 13px; }
.file-copy strong { font-size: 17px; }
.file-copy small { font-size: 13px; }

.result-heading p, .privacy-copy p { font-size: 15px; }
.success-pill { font-size: 13px; }
.result-details h3 { font-size: 22px; }
.result-details > p { font-size: 13px; }
.download-button, .secondary-button { font-size: 14px; }
.benefit-grid article > span { font-size: 13px; }
.benefit-grid strong { font-size: 17px; }
.benefit-grid p { font-size: 13px; }
.faq-list summary { font-size: 16px; }
.faq-list summary b { font: inherit; }
.faq-list p { font-size: 14px; }
.footer-brand strong { font-size: 15px; }
.footer-brand span, .site-footer a, .site-footer small { font-size: 13px; }

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07182a;
  --surface: #0e263d;
  --ink: #f1f8ff;
  --muted: #a8c0d8;
  --line: #284965;
  --soft: #15344f;
  --blue: #65a9ff;
  --blue-dark: #8bc1ff;
  --blue-soft: #153a60;
  --green-soft: #123d36;
  --amber-soft: #3e301b;
  --shadow: 0 25px 70px rgba(0, 5, 15, .35);
}
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 10% 8%, rgba(22,121,202,.24), transparent 30%),
    radial-gradient(circle at 88% 16%, rgba(66,91,218,.2), transparent 30%),
    linear-gradient(180deg, #081827, #071423 58%, #091b2f);
}
html[data-theme="dark"] .utility-button,
html[data-theme="dark"] .all-tools,
html[data-theme="dark"] .converter-shell,
html[data-theme="dark"] .segmented span,
html[data-theme="dark"] .input-suffix input,
html[data-theme="dark"] .recommendation,
html[data-theme="dark"] .result-card,
html[data-theme="dark"] .secondary-button,
html[data-theme="dark"] .benefit-grid article { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .settings-panel { background: linear-gradient(155deg, #102941, #0a2035); }
html[data-theme="dark"] .drop-zone { background: linear-gradient(145deg, #102a43, #0c2238); }
html[data-theme="dark"] .trust-list span { border-color: #295c75; background: rgba(13,48,69,.82); color: #8ee2ff; }
html[data-theme="dark"] .local-badge { border-color: #286052; color: #8fe1c0; }
html[data-theme="dark"] .size-warning { color: #f3d5a2; }
html[data-theme="dark"] .progress-track { background: #18344c; }
html[data-theme="dark"] fieldset:disabled { opacity: .62; }
html[data-theme="dark"] .convert-button {
  background: linear-gradient(100deg, #48d7e8 0%, #628cff 56%, #8c67ff 100%);
  color: #06172a;
  box-shadow: 0 13px 28px rgba(67, 129, 238, .24);
}
html[data-theme="dark"] .convert-button:hover:not(:disabled) {
  background: linear-gradient(100deg, #68e5ef 0%, #79a3ff 56%, #a181ff 100%);
  color: #041321;
}
html[data-theme="dark"] .convert-button:disabled {
  border: 1px solid #41627e;
  background: #24425d;
  color: #c5d8e9;
  box-shadow: none;
  opacity: 1;
}

@media (max-width: 900px) {
  .hero { padding-top: 18px; }
  .header-actions { margin-left: auto; }
}

@media (max-width: 600px) {
  .site-header { gap: 10px; }
  .brand img { width: 38px; height: 38px; }
  .brand strong { font-size: 15px; }
  .header-actions { gap: 5px; }
  .utility-button { height: 38px; padding: 0 9px; font-size: 12px; }
  .all-tools { display: none; }
  .hero { padding: 18px 0 34px; }
  .hero h1 { font-size: clamp(28px, 9vw, 40px); white-space: normal; }
  .hero-copy > p { font-size: 14px; }
  .trust-list span { font-size: 11px; }
  .drop-zone h2 { font-size: 28px; }
  .drop-zone p { font-size: 14px; }
  .panel-heading h2 { font-size: 27px; }
  .setting-label { align-items: flex-start; }
  .setting-label strong { font-size: 16px; }
  .setting-label small { max-width: 45%; font-size: 12px; text-align: right; }
  .segmented span { font-size: 13px; }
}