:root {
  color-scheme: light;
  --primary: #6d4db1;
  --on-primary: #ffffff;
  --primary-container: #eadcff;
  --on-primary-container: #241047;
  --secondary: #865269;
  --surface: #fbf8ff;
  --surface-container: #f1ebf7;
  --surface-high: #e9e1f0;
  --on-surface: #29252d;
  --on-surface-variant: #655f6b;
  --outline: #7b737f;
  --outline-variant: #cec5d2;
  --error: #b3261e;
  --success: #386a3d;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-full: 999px;
  --shadow: 0 6px 24px rgb(58 36 77 / 9%);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; --primary: #d5baff; --on-primary: #3a176e; --primary-container: #53338a; --on-primary-container: #f0ddff; --secondary: #f2b8cf; --surface: #151218; --surface-container: #211c24; --surface-high: #2d2631; --on-surface: #e9e0ea; --on-surface-variant: #d0c4d0; --outline: #978d99; --outline-variant: #4b424d; --error: #ffb4ab; --success: #a6d8a6; --shadow: 0 6px 24px rgb(0 0 0 / 25%); }
}

:root[data-theme="dark"] { color-scheme: dark; --primary: #d5baff; --on-primary: #3a176e; --primary-container: #53338a; --on-primary-container: #f0ddff; --secondary: #f2b8cf; --surface: #151218; --surface-container: #211c24; --surface-high: #2d2631; --on-surface: #e9e0ea; --on-surface-variant: #d0c4d0; --outline: #978d99; --outline-variant: #4b424d; --error: #ffb4ab; --success: #a6d8a6; --shadow: 0 6px 24px rgb(0 0 0 / 25%); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--surface); color: var(--on-surface); font-family: var(--font); line-height: 1.5; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
.top-app-bar { max-width: 1180px; margin: 0 auto; height: 76px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 750; letter-spacing: -.03em; text-decoration: none; }
.brand-mark { display: grid; width: 34px; height: 34px; place-items: center; color: var(--on-primary); background: var(--primary); border-radius: 13px 13px 13px 4px; font-size: 19px; }
.top-actions { display: flex; align-items: center; gap: 18px; }
.tool-navigation { display: flex; gap: 6px; align-items: center; }
.tool-navigation a { padding: 8px 12px; border-radius: var(--radius-full); color: var(--on-surface-variant); font-size: 13px; font-weight: 700; text-decoration: none; }
.tool-navigation a:hover, .tool-navigation a:focus-visible, .tool-navigation a[aria-current="page"] { color: var(--on-primary-container); background: var(--primary-container); }
.tool-home { max-width: 1000px; margin: 45px auto 0; }
.tool-home h1 { max-width: 800px; font-size: clamp(42px, 6vw, 74px); }
.tool-home .hero-copy { max-width: none; margin: 0; }
.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.tool-card { display: flex; align-items: center; gap: 20px; min-height: 174px; padding: 26px; background: var(--surface-container); border-radius: var(--radius-lg); text-decoration: none; transition: background .2s ease, transform .2s ease; }
.tool-card:first-child { grid-row: span 2; align-items: flex-start; flex-direction: column; justify-content: space-between; background: var(--primary-container); }
.tool-card:hover, .tool-card:focus-visible { background: var(--surface-high); transform: translateY(-3px); }
.tool-card:first-child:hover, .tool-card:first-child:focus-visible { background: color-mix(in srgb, var(--primary-container) 82%, var(--surface)); }
.tool-card-symbol { display: grid; place-items: center; flex: none; width: 50px; height: 50px; color: var(--primary); background: var(--surface); border-radius: 18px; font-size: 28px; }
.tool-card-content { display: grid; gap: 6px; flex: 1; }
.tool-card-content strong { font-size: clamp(20px, 2vw, 28px); letter-spacing: -.035em; }
.tool-card-content span { color: var(--on-surface-variant); font-size: 14px; }
.pdf-file-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; padding: 14px 18px; background: var(--surface); border-radius: var(--radius-md); }
.pdf-file-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.pdf-layout-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 20px 4px 8px; }
.pdf-action-row { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin: 24px 4px 0; }
@media (max-width: 640px) { .pdf-layout-fields { grid-template-columns: 1fr; } }
a:focus-visible, button:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
@media (max-width: 760px) { .top-app-bar { height: auto; min-height: 76px; flex-wrap: wrap; gap: 10px; padding: 14px 20px; } .tool-navigation { order: 3; width: 100%; overflow-x: auto; } .tool-navigation a { white-space: nowrap; } .tool-grid { grid-template-columns: 1fr; } .tool-card:first-child { grid-row: auto; min-height: 174px; } .page-shell { padding: 28px 20px 70px; } }
.field-hint, .drop-hint { color: var(--on-surface-variant); font-size: 13px; }
.icon-button { width: 42px; height: 42px; padding: 0; color: var(--on-surface); background: transparent; border: 0; border-radius: 50%; font-size: 21px; }
.icon-button:hover { background: var(--surface-container); }
.page-shell { max-width: 1120px; margin: 0 auto; padding: 54px 28px 80px; }
.hero { max-width: 680px; margin: 0 auto 36px; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; color: var(--on-primary-container); background: var(--primary-container); border-radius: var(--radius-full); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.status-dot { width: 7px; height: 7px; background: var(--secondary); border-radius: 50%; }
h1 { margin: 18px 0 12px; font-size: clamp(42px, 7vw, 68px); line-height: .98; letter-spacing: -.065em; }
h1 em { color: var(--primary); font-style: normal; }
.hero-copy { max-width: 540px; margin: 0 auto; color: var(--on-surface-variant); font-size: 17px; }
.converter-surface { padding: 18px; background: var(--surface-container); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.source-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 16px; background: var(--surface-high); border-radius: var(--radius-full); }
.source-tab { flex: 1; border: 0; border-radius: var(--radius-full); padding: 12px 16px; color: var(--on-surface-variant); background: transparent; font-size: 14px; font-weight: 650; }
.source-tab.is-active { color: var(--on-primary-container); background: var(--primary-container); }
.source-panel { min-height: 214px; }
.drop-zone { min-height: 214px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 28px; text-align: center; background: color-mix(in srgb, var(--primary-container) 46%, var(--surface)); border: 2px dashed var(--primary); border-radius: var(--radius-lg); outline: none; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.drop-zone:hover, .drop-zone:focus-visible, .drop-zone.is-dragging { transform: translateY(-2px); background: var(--primary-container); border-style: solid; }
.drop-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 10px; color: var(--primary); background: var(--surface); border-radius: 17px; font-size: 27px; }
.drop-zone h2 { margin: 0; font-size: 22px; letter-spacing: -.03em; }
.drop-zone p { margin: 5px 0 10px; color: var(--on-surface-variant); }
.text-button { padding: 4px 0; color: var(--primary); background: none; border: 0; font-weight: 700; }
.text-button:hover { text-decoration: underline; }
.url-form { max-width: 650px; margin: 0 auto; padding: 42px 20px; }
.url-form label, .field-group label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 700; }
.url-input-row { display: flex; gap: 10px; }
input[type="url"], input[type="number"], select { width: 100%; padding: 14px 16px; color: var(--on-surface); background: var(--surface); border: 1px solid var(--outline); border-radius: var(--radius-sm); outline: none; }
input[type="url"]:focus, input[type="number"]:focus, select:focus { border: 2px solid var(--primary); padding: 13px 15px; }
.field-hint { display: block; margin-top: 7px; }
.filled-button, .tonal-button { display: inline-flex; justify-content: center; align-items: center; gap: 12px; min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--radius-full); font-weight: 750; transition: transform .15s ease, filter .15s ease; }
.filled-button { color: var(--on-primary); background: var(--primary); }
.tonal-button { color: var(--on-primary-container); background: var(--primary-container); }
.filled-button:hover, .tonal-button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.filled-button:disabled, .tonal-button:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.file-area { padding: 8px 4px 4px; }
.list-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 10px; }
.list-heading strong, .section-label { display: block; }
.section-label { margin-bottom: 1px; color: var(--on-surface-variant); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.file-list { display: grid; gap: 8px; }
.file-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) minmax(210px, auto) !important; grid-template-rows: auto auto; gap: 11px; align-items: center; padding: 14px 16px; background: var(--surface); border-radius: 18px; transition: background .2s ease, transform .2s ease; }
.file-row:hover { background: var(--surface-high); transform: translateY(-1px); }
.file-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--primary); background: var(--primary-container); border-radius: 13px; font-size: 18px; }
.file-meta { min-width: 0; }
.file-name { display: block; overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.file-detail { color: var(--on-surface-variant); font-size: 12px; }
.file-format-select { min-width: 0; padding: 9px 8px; font-size: 12px; }
.file-actions .file-format-select { width: 112px; }
.file-controls { display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(100px, 1fr) minmax(140px, 1.2fr) minmax(140px, 1.2fr) minmax(80px, .8fr); gap: 12px; align-items: end; padding: 16px 0 2px; }
.file-options { grid-column: 2 / -1; grid-row: 2; width: min(100%, 720px); }
.file-options summary { width: fit-content; color: var(--on-surface-variant); cursor: pointer; font-size: 12px; font-weight: 700; }
.file-options summary::marker { color: var(--primary); }
.file-control label { display: block; margin-bottom: 3px; color: var(--on-surface-variant); font-size: 10px; font-weight: 700; }
.file-control input[type="range"] { width: 100%; accent-color: var(--primary); }
.file-control input[type="color"] { width: 34px; height: 34px; padding: 2px; background: var(--surface); border: 1px solid var(--outline); border-radius: 9px; }
.file-control input[type="number"] { padding: 8px 6px; font-size: 12px; }
.file-actions { display: flex; grid-column: 3; grid-row: 1; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.file-convert-button { min-height: 38px; padding: 0 14px; font-size: 12px; white-space: nowrap; }
.batch-hint { margin: 10px 4px 0; color: var(--on-surface-variant); font-size: 12px; }
.batch-options-button { min-height: 40px; padding: 0 16px; font-size: 12px; }
.file-status { color: var(--on-surface-variant); font-size: 12px; font-weight: 700; white-space: nowrap; }
.file-status.is-success { color: var(--success); }
.file-status.is-error { color: var(--error); }
.file-download { margin-left: 8px; color: var(--primary); font-size: 12px; font-weight: 750; text-decoration: none; }
.file-progress { grid-column: 2 / -1; grid-row: 3; height: 4px; overflow: hidden; background: var(--surface-high); border-radius: var(--radius-full); }
.progress-track { height: 6px; overflow: hidden; background: var(--surface-high); border-radius: var(--radius-full); }
.progress-fill { width: 0; height: 100%; background: var(--primary); border-radius: inherit; transition: width .25s ease; }
.progress-fill.is-indeterminate { width: 38%; animation: progress-slide 1.1s ease-in-out infinite; }
@keyframes progress-slide { 0% { transform: translateX(-110%); } 50% { transform: translateX(150%); } 100% { transform: translateX(280%); } }
.remove-button { width: 30px; height: 30px; padding: 0; color: var(--on-surface-variant); background: transparent; border: 0; border-radius: 50%; font-size: 18px; }
.remove-button:hover { color: var(--error); background: var(--surface-container); }
.conversion-controls { display: grid; grid-template-columns: minmax(0, 420px) auto auto; align-items: end; gap: 12px; padding: 18px 4px 4px; }
.field-group { flex: 1; }
.conversion-controls .field-group { min-width: 0; }
.convert-button { min-width: 180px; }
.advanced-settings { margin: 8px 4px 0; padding: 12px 14px; background: color-mix(in srgb, var(--surface) 62%, transparent); border: 1px solid var(--outline-variant); border-radius: var(--radius-md); }
.advanced-settings summary { color: var(--on-surface-variant); cursor: pointer; font-size: 13px; font-weight: 750; }
.batch-advanced { grid-column: 2; grid-row: 1; margin: 0; min-width: 210px; }
.batch-advanced[open] { position: relative; z-index: 1; }
.batch-settings { display: none; grid-column: 1 / -1; grid-row: 2; padding-top: 4px; }
.batch-advanced[open] + .batch-settings { display: block; }
.batch-settings .settings-grid { padding: 18px; background: color-mix(in srgb, var(--surface) 72%, transparent); border: 1px solid var(--outline-variant); border-radius: var(--radius-md); }
.conversion-controls .convert-button { grid-column: 3; grid-row: 1; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 18px; }
.settings-grid .field-group { min-width: 0; }
.settings-grid output { color: var(--primary); font-variant-numeric: tabular-nums; }
.settings-grid input[type="range"] { width: 100%; accent-color: var(--primary); }
.color-row { display: flex; align-items: center; gap: 10px; color: var(--on-surface-variant); font-size: 12px; }
.color-row input[type="color"] { width: 44px; height: 36px; padding: 3px; background: var(--surface); border: 1px solid var(--outline); border-radius: var(--radius-sm); cursor: pointer; }
.checkbox-field { display: flex; align-items: center; gap: 9px; align-self: end; color: var(--on-surface-variant); font-size: 13px; }
.checkbox-field input { width: 18px; height: 18px; accent-color: var(--primary); }
.batch-progress { margin: 16px 4px 0; }
.progress-header { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--on-surface-variant); font-size: 12px; font-weight: 700; }
.progress-summary { margin: 14px 4px 0; color: var(--on-surface-variant); font-size: 13px; }
.result-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 4px 2px; }
.privacy-note { margin: 22px 4px 2px; color: var(--on-surface-variant); font-size: 12px; text-align: center; }
.privacy-note span { color: var(--primary); font-size: 18px; vertical-align: -2px; }
.site-footer { max-width: 1120px; display: flex; justify-content: space-between; gap: 18px; margin: 0 auto; padding: 0 28px 38px; color: var(--on-surface-variant); font-size: 12px; }
.snackbar { position: fixed; right: 24px; bottom: 24px; max-width: min(360px, calc(100vw - 48px)); padding: 14px 18px; color: var(--on-primary); background: var(--on-primary-container); border-radius: var(--radius-sm); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease; }
.snackbar.is-visible { opacity: 1; transform: translateY(0); }
.is-hidden { display: none !important; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 70%, white); outline-offset: 3px; }
@media (max-width: 600px) { .top-app-bar { height: 66px; padding: 0 18px; } .page-shell { padding: 34px 14px 60px; } h1 { font-size: 47px; } .hero-copy { font-size: 15px; } .converter-surface { padding: 12px; border-radius: 22px; } .drop-zone { padding: 22px 12px; } .conversion-controls, .result-actions { align-items: stretch; flex-direction: column; } .conversion-controls { display: flex; } .convert-button { width: 100%; } .settings-grid { grid-template-columns: 1fr; gap: 18px; } .checkbox-field { align-self: start; } .batch-options-button { width: 100%; } .batch-advanced, .batch-advanced[open] { width: 100%; } .batch-settings { width: 100%; } .batch-settings .settings-grid { margin-top: 12px; } .file-row { grid-template-columns: 38px minmax(0, 1fr) 30px !important; grid-template-rows: auto auto auto auto; } .file-options { grid-column: 2 / -1; grid-row: 2; width: 100%; } .file-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .file-actions { grid-column: 2 / -1; grid-row: 3; flex-wrap: wrap; justify-content: flex-start; } .file-progress { grid-row: 4; } .file-actions .file-format-select { width: 104px; } .file-convert-button { width: auto; } .file-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .site-footer { flex-direction: column; padding: 0 18px 28px; } .url-input-row { flex-direction: column; } .url-form { padding: 32px 8px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }
.pdf-merge-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.pdf-layout-options { flex: 1; min-width: 220px; }
.pdf-layout-options summary { cursor: pointer; color: var(--primary); padding: 12px 0; font-weight: 600; }
.pdf-layout-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 12px 0; }
@media (max-width: 640px) { .pdf-layout-options { flex-basis: 100%; } .pdf-layout-fields { grid-template-columns: 1fr; } }