.png-pdf-main { padding-bottom: 6px; }
.pdf-intro { padding-bottom: 24px; }
.pdf-intro .intro-description { max-width: 720px; }
.pdf-converter-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .82fr); gap: 14px; align-items: start; }
.pdf-source-panel, .pdf-settings-panel { min-width: 0; padding: 19px; }
.pdf-panel-heading, .pdf-pages-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pdf-panel-heading { min-height: 43px; margin-bottom: 14px; }
.pdf-panel-heading h2 { margin: 4px 0 0; color: var(--ink); font-size: 18px; letter-spacing: -.025em; }
.pdf-dropzone { min-height: 198px; padding: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; position: relative; border: 1px dashed #cad5ca; border-radius: 11px; background: rgba(250, 252, 249, .83); color: #62746a; cursor: pointer; text-align: center; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.pdf-dropzone:hover, .pdf-dropzone.is-dragging { border-color: #7c9e82; background: #f3f8f3; }
.pdf-dropzone:focus-visible { outline: 3px solid rgba(88, 123, 98, .35); outline-offset: 3px; }
.pdf-dropzone strong { color: #263a2f; font-size: 15px; font-weight: 640; }
.pdf-dropzone > span:not(.pdf-upload-icon) { font-size: 13px; }
.pdf-dropzone small { margin-top: 8px; color: #7c897f; font-size: 11px; }
.pdf-upload-icon { width: 38px; height: 38px; margin-bottom: 3px; display: grid; place-items: center; border: 1px solid #e1e9e0; border-radius: 11px; background: #edf4ed; color: var(--accent-dark); }
.pdf-upload-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pdf-notice { margin-top: 12px; padding: 10px 12px; border: 1px solid #e8d5c9; border-radius: 8px; background: #fff8f3; color: #795c4b; font-size: 12px; line-height: 1.5; }
.pdf-notice.is-success { border-color: #d5e2d4; background: #f4f8f3; color: #49634c; }
.pdf-notice[hidden] { display: none; }
.pdf-pages-section { margin-top: 18px; }
.pdf-pages-heading { margin-bottom: 10px; }
.pdf-pages-heading h3 { margin: 0; color: #263a2f; font-size: 14px; font-weight: 650; }
.pdf-muted { margin: 3px 0 0; color: #748177; font-size: 11px; }
.pdf-quiet-button, .pdf-add-button { min-height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: #49604f; cursor: pointer; font-size: 11px; font-weight: 600; }
.pdf-quiet-button:hover, .pdf-add-button:hover { border-color: #c8d6c8; background: #f5f8f4; }
.pdf-quiet-button[hidden] { display: none; }
.pdf-page-list { margin: 0; padding: 0; display: grid; gap: 8px; list-style: none; }
.pdf-page-item { min-width: 0; padding: 8px; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid #e8ece6; border-radius: 8px; background: rgba(255,255,255,.82); }
.pdf-page-item.is-dragging { opacity: .5; }
.pdf-page-thumb { width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; border: 1px solid #edf0ec; border-radius: 6px; background: #f5f7f3; }
.pdf-page-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pdf-page-copy { min-width: 0; display: grid; gap: 4px; }
.pdf-page-name { overflow: hidden; color: #34473b; font-size: 12px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.pdf-page-meta { color: #7c887f; font-size: 10px; }
.pdf-page-controls { display: flex; align-items: center; gap: 4px; }
.pdf-page-controls button { width: 29px; height: 29px; padding: 0; display: grid; place-items: center; border: 1px solid #e5eae3; border-radius: 6px; background: #fff; color: #58705d; cursor: pointer; font-size: 14px; }
.pdf-page-controls button:hover:not(:disabled) { border-color: #bfd0bf; background: #f2f7f1; }
.pdf-page-controls button:disabled { color: #b5beb5; cursor: not-allowed; }
.pdf-page-controls .pdf-remove-page { color: #98635a; }
.pdf-reorder-hint { margin: 9px 0 0; color: #7a867c; font-size: 10px; line-height: 1.45; }
.pdf-settings-panel { position: sticky; top: 84px; }
.pdf-setting-group { min-width: 0; margin-bottom: 15px; display: grid; gap: 6px; }
.pdf-setting-group label { color: #42564a; font-size: 11px; font-weight: 620; }
.pdf-select { width: 100%; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid #e0e7df; border-radius: 7px; background: #fff; color: #304439; font: inherit; font-size: 13px; }
.pdf-setting-group small { color: #7a877d; font-size: 10px; line-height: 1.4; }
.pdf-setting-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pdf-name-input { height: 40px; display: flex; align-items: center; overflow: hidden; border: 1px solid #e0e7df; border-radius: 7px; background: #fff; }
.pdf-name-input:focus-within { border-color: #8ca893; box-shadow: 0 0 0 3px rgba(98, 137, 105, .12); }
.pdf-name-input input { width: 100%; min-width: 0; height: 100%; padding: 0 10px; border: 0; outline: 0; background: transparent; color: #304439; font: inherit; font-size: 13px; }
.pdf-name-input span { padding-right: 10px; color: #849086; font-size: 11px; }
.pdf-create-button { margin-top: 2px; }
.pdf-create-button:disabled { opacity: .72; }
.pdf-result, .pdf-error { margin: 12px 0 0; padding: 10px 11px; border-radius: 7px; font-size: 11px; line-height: 1.45; }
.pdf-result { border: 1px solid #d7e4d5; background: #f4f8f2; color: #49634c; }
.pdf-result[hidden], .pdf-error[hidden] { display: none; }
.pdf-error { border: 1px solid #ecd9d2; background: #fff7f4; color: #81584b; }
.pdf-privacy-note { margin: 12px 0 0; display: flex; align-items: center; gap: 6px; color: #738177; font-size: 10px; line-height: 1.4; }
.pdf-privacy-note svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: #627b66; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pdf-benefit-row { margin: 18px 0 8px; padding: 15px 17px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; border: 1px solid rgba(223, 228, 221, .85); border-radius: 11px; background: rgba(255,255,255,.55); }
.pdf-benefit-row article { min-width: 0; display: grid; gap: 4px; }
.pdf-benefit-row strong { color: #40564a; font-size: 11px; font-weight: 650; }
.pdf-benefit-row span { color: #718078; font-size: 10px; line-height: 1.4; }
.pdf-how-section { padding-top: 25px; }
.pdf-breadcrumbs { margin-top: 28px; }
.pdf-guide { margin-top: 14px; }
.pdf-guide h2 { margin-top: 18px; }
.pdf-guide .guide-lead { max-width: 780px; }
.pdf-guide-note { margin-top: 17px; padding: 11px 13px; border-left: 2px solid #a6c0ad; background: rgba(237, 244, 237, .55); color: #627369; font-size: 12px; line-height: 1.6; }
.pdf-faq { margin-top: 30px; }

@media (max-width: 800px) {
  .pdf-converter-layout { grid-template-columns: minmax(0, 1fr); }
  .pdf-settings-panel { position: static; }
  .pdf-benefit-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .pdf-intro { padding-top: 24px; padding-bottom: 17px; }
  .pdf-source-panel, .pdf-settings-panel { padding: 14px; }
  .pdf-dropzone { min-height: 178px; }
  .pdf-page-item { grid-template-columns: 45px minmax(0, 1fr) auto; gap: 8px; }
  .pdf-page-thumb { width: 45px; height: 45px; }
  .pdf-page-controls { gap: 2px; }
  .pdf-page-controls button { width: 26px; height: 28px; }
  .pdf-benefit-row { gap: 12px; padding: 13px; }
}