/* Browser-local utilities. Keep every component inside the tools page. */
body.page-tools .oao-tools {
  --tools-blue: #2365ef;
  --tools-ink: #172134;
  --tools-muted: #68768c;
  --tools-line: #dfe5ee;
  --tools-surface: #f5f7fa;
  padding-top: 90px;
  padding-bottom: 18px;
  color: var(--tools-ink);
  background: #fff;
  font-family: 'Segoe UI', 'Malgun Gothic', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color-scheme: light;
  min-height: 100vh;
}
/* The shared void theme marks main, headings, form controls and any class
   containing "preview" as dark with !important. Isolate the approved light
   tools surface without changing the shared header, sidebar or footer. */
body.page-tools.theme-oao-void { background: #fff !important; }
body.page-tools .oao-tools main {
  background: #fff !important;
  color: var(--tools-ink);
}
body.page-tools .oao-tools h1,
body.page-tools .oao-tools h2,
body.page-tools .oao-tools h3,
body.page-tools .oao-tools h4,
body.page-tools .oao-tools h5,
body.page-tools .oao-tools h6 { color: var(--tools-ink) !important; }
body.page-tools .oao-tools .drop-zone { color: var(--tools-ink); }
body.page-tools .oao-tools select {
  border: 1px solid var(--tools-line) !important;
  border-radius: 5px !important;
  background: #fff !important;
  color: #4e607d !important;
  box-shadow: none;
  min-height: 40px;
}
body.page-tools .oao-tools #target-kb,
body.page-tools .oao-tools #split-height {
  min-height: 24px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #253754 !important;
  box-shadow: none;
}
body.page-tools .oao-tools #qr-text,
body.page-tools .oao-tools #favicon-code {
  border: 1px solid var(--tools-line) !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #334867 !important;
  box-shadow: none;
}
body.page-tools .oao-tools #favicon-code { background: #f8fafc !important; min-height: 84px; }
body.page-tools .oao-tools .result-preview {
  background: repeating-conic-gradient(#eff2f6 0% 25%, #fff 0% 50%) 50%/18px 18px !important;
  border-color: var(--tools-line) !important;
  box-shadow: none !important;
}
body.page-tools .oao-tools .file-preview-empty {
  background: #f2f4f8 !important;
  color: #6886b1;
  box-shadow: none !important;
}
body.page-tools .oao-tools .result-preview-empty {
  background: transparent !important;
  color: #7188a5;
  box-shadow: none !important;
}
body.page-tools .oao-tools .drop-zone small { color: #6e819e !important; }
body.page-tools .oao-tools :focus-visible {
  outline: 3px solid #527deb;
  outline-offset: 3px;
  box-shadow: none !important;
}
/* Shared a:hover uses violet and outranks short component selectors. Keep
   every tool link state on its own contrast-safe light-surface palette. */
body.page-tools .oao-tools a {
  --tools-link: #2858b8;
  color: var(--tools-link) !important;
}
body.page-tools .oao-tools a:hover,
body.page-tools .oao-tools a:focus,
body.page-tools .oao-tools a:active,
body.page-tools .oao-tools a:visited { color: var(--tools-link) !important; }
body.page-tools .oao-tools .tool-card { --tools-link: #172134; }
body.page-tools .oao-tools .breadcrumb a,
body.page-tools .oao-tools .back-link { --tools-link: #536e94; }
body.page-tools .oao-tools .tool-nav a { --tools-link: #4d6484; }
body.page-tools .oao-tools .tool-nav a.active,
body.page-tools .oao-tools .tool-nav a[aria-current="page"] { --tools-link: #285bdc; }
body.page-tools .oao-tools .creation-banner > a,
body.page-tools .oao-tools .detail-contact a,
body.page-tools .oao-tools .related-tools a { --tools-link: #315ca1; }
body.page-tools .oao-tools .result-info > a {
  --tools-link: #1e4fbc;
  font-weight: 650;
}
body.page-tools .oao-tools .result-info > a:hover,
body.page-tools .oao-tools .result-info > a:focus-visible {
  --tools-link: #17429f;
  background: #dde9ff;
}
body.page-tools .oao-tools .breadcrumb,
body.page-tools .oao-tools .tools-caption,
body.page-tools .oao-tools .tool-type,
body.page-tools .oao-tools .file-info span,
body.page-tools .oao-tools .result-meta,
body.page-tools .oao-tools .settings-note,
body.page-tools .oao-tools .privacy-note,
body.page-tools .oao-tools .field-help,
body.page-tools .oao-tools .qr-input-note,
body.page-tools .oao-tools .detail-contact p,
body.page-tools .oao-tools .file-preview-empty,
body.page-tools .oao-tools .result-preview-empty,
body.page-tools .oao-tools .work-elapsed,
body.page-tools .oao-tools .range-endpoints,
body.page-tools .oao-tools .unit-input > span,
body.page-tools .oao-tools .usage-section li,
body.page-tools .oao-tools .usage-section > p,
body.page-tools .oao-tools .usage-section details p { color: #5b7090; }
body.page-tools .oao-tools .drop-zone > span:not(.upload-mark):not(.select-file-visual) { color: #5b7090; }
body.page-tools .oao-tools .drop-zone small { color: #5b7090 !important; }
.oao-tools *, .oao-tools *::before, .oao-tools *::after { box-sizing: border-box; }
.oao-tools [hidden] { display: none !important; }
.oao-tools a { color: inherit; text-decoration: none; }
.oao-tools button, .oao-tools input, .oao-tools select, .oao-tools textarea { font: inherit; }
.oao-tools button, .oao-tools a, .oao-tools label[for="file-input"] { -webkit-tap-highlight-color: transparent; }
.oao-tools button { cursor: pointer; color: inherit; }
.oao-tools button:disabled, .oao-tools input:disabled, .oao-tools select:disabled { cursor: wait; opacity: .62; }
.oao-tools button:focus-visible, .oao-tools a:focus-visible, .oao-tools select:focus-visible,
.oao-tools input:focus-visible, .oao-tools textarea:focus-visible { outline: 3px solid #96baff; outline-offset: 3px; }
.oao-tools .page-inner { width: 100%; max-width: 1280px; padding: 0 42px; margin: auto; }
.oao-tools .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; padding-top: 24px; color: #6f7e93; font-size: 12px; }
.oao-tools .breadcrumb a:hover { text-decoration: underline; }
.oao-tools .hub-heading { padding: 43px 0 37px; }
.oao-tools .eyebrow { color: var(--tools-blue); font-size: 11px; font-weight: 750; letter-spacing: 1.5px; }
.oao-tools .hub-heading h1 { margin: 8px 0 12px; font-size: 38px; letter-spacing: -1.8px; line-height: 1.3; font-weight: 800; color: var(--tools-ink); }
.oao-tools .hub-heading p { margin: 0; color: #627187; font-size: 16px; letter-spacing: -.4px; }
.oao-tools .mobile-break { display: none; }
.oao-tools .service-points { display: flex; gap: 24px; margin-top: 20px; font-size: 12px; color: #576780; }
.oao-tools .service-points b { color: var(--tools-blue); padding-right: 5px; }
.oao-tools .tools-topline { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--tools-line); margin-bottom: 23px; min-height: 46px; }
.oao-tools .category-tabs { display: flex; gap: 22px; }
.oao-tools .category-tabs button { border: 0; background: none; padding: 12px 0; font-size: 13px; font-weight: 650; color: #718096; position: relative; }
.oao-tools .category-tabs button.selected { color: var(--tools-ink); }
.oao-tools .category-tabs button.selected::after { content: ''; position: absolute; bottom: -1px; height: 2px; left: 0; right: 0; background: var(--tools-ink); }
.oao-tools .category-tabs span { margin-left: 5px; font-size: 11px; color: var(--tools-blue); }
.oao-tools .tools-caption { color: #6f7f96; font-size: 11px; }
.oao-tools .tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.oao-tools .tool-card { border: 1px solid var(--tools-line); border-radius: 9px; padding: 24px 25px 18px; display: flex; flex-direction: column; min-height: 247px; transition: border-color .16s, box-shadow .16s, transform .16s; background: #fff; }
.oao-tools .tool-card:hover { border-color: #a6c0f5; box-shadow: 0 6px 18px #204f9810; transform: translateY(-2px); }
.oao-tools .card-head { display: flex; justify-content: space-between; align-items: flex-start; }
.oao-tools .file-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 46px; height: 48px; border-radius: 7px; background: #eff4ff; color: #285ce1; font-size: 11px; font-weight: 800; letter-spacing: .4px; }
.oao-tools .file-icon > span { position: absolute; bottom: 1px; right: 5px; font-size: 14px; }
.oao-tools .tool-type { font-size: 10px; color: #687b96; padding-top: 5px; }
.oao-tools .tool-card h2 { font-size: 19px; letter-spacing: -.7px; margin: 17px 0 7px; line-height: 1.4; color: var(--tools-ink); }
.oao-tools .tool-card p { font-size: 12px; line-height: 1.85; color: #66758c; margin: 0 0 20px; }
.oao-tools .card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 13px; border-top: 1px solid #edf0f5; margin-top: auto; font-size: 10px; color: #6b7a91; }
.oao-tools .card-bottom strong { color: #436ae1; font-size: 11px; font-weight: 650; white-space: nowrap; }
.oao-tools .card-bottom strong span { margin-left: 5px; }
.oao-tools .creation-banner { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin: 35px 0 48px; background: #f5f7fb; border-radius: 8px; padding: 26px 30px; }
.oao-tools .banner-label { font-size: 11px; color: #607ba8; }
.oao-tools .creation-banner h2 { font-size: 19px; letter-spacing: -.6px; margin: 5px 0; color: var(--tools-ink); }
.oao-tools .creation-banner p { font-size: 12px; color: #67788f; margin: 0; }
.oao-tools .creation-banner > a { font-size: 12px; white-space: nowrap; color: #426399; }
.oao-tools .creation-banner > a span { margin-left: 18px; }
.oao-tools .detail-heading { padding: 24px 0; }
.oao-tools .back-link { color: #697e9e; font-size: 12px; }
.oao-tools .detail-heading h1 { font-size: 32px; letter-spacing: -1.3px; margin: 12px 0 8px; line-height: 1.35; color: var(--tools-ink); }
.oao-tools .detail-heading p { font-size: 14px; color: #647690; margin: 0; }
.oao-tools .tool-nav { display: flex; gap: 8px; border-bottom: 1px solid var(--tools-line); padding-bottom: 18px; margin-bottom: 26px; flex-wrap: wrap; }
.oao-tools .tool-nav a { padding: 6px 12px; border-radius: 4px; background: #f5f7fb; color: #657893; font-size: 11px; }
.oao-tools .tool-nav a.active, .oao-tools .tool-nav a[aria-current="page"] { background: #edf3ff; color: #285bdc; font-weight: 700; }
.oao-tools .workspace { display: grid; grid-template-columns: minmax(0, 1fr) 316px; border: 1px solid var(--tools-line); border-radius: 10px; overflow: hidden; background: #fff; }
.oao-tools .input-pane { padding: 25px 28px; min-width: 0; }
.oao-tools .pane-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 19px; }
.oao-tools .pane-heading h2, .oao-tools .settings-pane > h2 { font-size: 16px; margin: 0; letter-spacing: -.4px; color: var(--tools-ink); }
.oao-tools .text-button { font-size: 11px; color: #526fa6; border: 0; background: transparent; padding: 5px 0; }
.oao-tools .drop-zone { display: flex; align-items: center; flex-direction: column; justify-content: center; min-height: 330px; border: 1px dashed #becde4; border-radius: 7px; background: #fafcff; position: relative; cursor: pointer; text-align: center; padding: 20px; }
.oao-tools .drop-zone.is-dragging { background: #edf3ff; border-color: var(--tools-blue); }
.oao-tools .upload-mark { width: 44px; height: 44px; background: #edf3ff; border-radius: 9px; color: #6490ef; font-size: 28px; margin-bottom: 17px; line-height: 44px; }
.oao-tools .drop-zone > strong { font-size: 16px; letter-spacing: -.4px; margin-bottom: 5px; }
.oao-tools .drop-zone > span:not(.upload-mark):not(.select-file-visual) { font-size: 12px; color: #6d809d; }
.oao-tools .select-file-visual { color: #fff; background: var(--tools-blue); border-radius: 5px; padding: 8px 23px; font-size: 12px; margin-top: 20px; }
.oao-tools .drop-zone small { font-size: 10px; color: #6e819e; margin-top: 22px; }
.oao-tools .drop-zone input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.oao-tools .drop-zone:focus-within { outline: 3px solid #96baff; outline-offset: 3px; }
.oao-tools .privacy-note { font-size: 11px; color: #647995; margin: 17px 0 0; display: flex; align-items: flex-start; gap: 8px; }
.oao-tools .privacy-note > span { color: #507aa6; }
.oao-tools .settings-pane { padding: 25px 24px; background: #f8fafe; border-left: 1px solid var(--tools-line); min-width: 0; }
.oao-tools .settings-pane > h2 { margin-bottom: 21px; }
.oao-tools .setting-block { margin-bottom: 20px; }
.oao-tools .setting-block > label, .oao-tools .range-label label, .oao-tools .qr-input-area > label, .oao-tools .favicon-code-area > label { display: block; color: #54637a; font-size: 12px; font-weight: 650; margin-bottom: 8px; }
.oao-tools .preset-buttons { display: flex; gap: 6px; margin-bottom: 10px; }
.oao-tools .preset-buttons button { flex: 1; border: 1px solid #dce3ef; background: #fff; border-radius: 4px; padding: 7px 0; color: #657793; font-size: 11px; }
.oao-tools .preset-buttons button.selected { color: #285ee7; border-color: #7ba6fb; background: #f1f6ff; font-weight: 700; }
.oao-tools .unit-input { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #dce3ef; border-radius: 5px; padding: 7px 10px; }
.oao-tools .unit-input input { border: 0; background: none; min-width: 0; width: 100%; outline-offset: 1px; color: #253754; font-size: 13px; margin: 0; }
.oao-tools .unit-input > span { color: #6a7c99; font-size: 11px; white-space: nowrap; }
.oao-tools .setting-block select { width: 100%; border: 1px solid #dce3ef; border-radius: 5px; padding: 9px 10px; color: #4e607d; font-size: 12px; background: #fff; }
.oao-tools .range-label { display: flex; align-items: baseline; justify-content: space-between; }
.oao-tools .range-label strong { font-size: 11px; color: #4b73ce; }
.oao-tools .setting-block input[type="range"] { width: 100%; accent-color: var(--tools-blue); display: block; margin: 10px 0; }
.oao-tools .range-endpoints { display: flex; justify-content: space-between; font-size: 10px; color: #6f809a; }
.oao-tools .primary-button { width: 100%; background: var(--tools-blue); border: 1px solid var(--tools-blue); color: #fff; border-radius: 5px; padding: 12px 15px; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; margin-top: 23px; min-height: 44px; }
.oao-tools .secondary-button { border: 1px solid #d8e1ed; border-radius: 5px; background: #fff; padding: 8px 14px; color: #546d95; font-size: 12px; min-height: 38px; }
.oao-tools .settings-pane > .secondary-button { width: 100%; margin-top: 9px; }
.oao-tools .settings-note { color: #687b98; font-size: 10px; line-height: 1.7; margin: 10px 0 0; }
.oao-tools .selected-files-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 12px; gap: 10px; }
.oao-tools .file-row { display: flex; gap: 13px; align-items: center; border: 1px solid #e5eaf1; border-radius: 6px; padding: 10px; margin: 8px 0; min-width: 0; }
.oao-tools .file-row img { width: 58px; height: 52px; object-fit: contain; border-radius: 4px; background: #f2f4f8; flex: 0 0 auto; }
.oao-tools .file-preview-empty { display: flex; align-items: center; justify-content: center; width: 58px; height: 52px; color: #6886b1; background: #f2f4f8; border-radius: 4px; font-size: 11px; flex: 0 0 auto; }
.oao-tools .file-info { min-width: 0; flex: 1; }
.oao-tools .file-info strong { display: block; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.oao-tools .file-info span { display: block; font-size: 10px; color: #6a7b93; margin-top: 3px; }
.oao-tools .file-remove { background: none; border: 0; color: #657997; font-size: 18px; padding: 3px 7px; flex: 0 0 auto; }
.oao-tools .add-files { display: block; width: 100%; color: #5273aa; border: 1px dashed #cbd7e9; border-radius: 5px; background: #fff; text-align: center; padding: 12px; font-size: 12px; cursor: pointer; margin-top: 16px; }
.oao-tools .error-message { font-size: 12px; color: #a9362f; background: #fff4f3; padding: 12px 15px; border-radius: 5px; margin: 14px 0; white-space: pre-line; overflow-wrap: anywhere; }
.oao-tools .work-status { font-size: 12px; color: #436ba2; margin: 16px 0; min-height: 4px; overflow-wrap: anywhere; }
.oao-tools .work-elapsed { color: #6c7e96; white-space: nowrap; }
.oao-tools .work-progress { display: block; width: 100%; height: 6px; margin: 11px 0 0; accent-color: var(--tools-blue); border: 0; border-radius: 5px; overflow: hidden; }
.oao-tools .work-progress::-webkit-progress-bar { background: #eaf0fb; border-radius: 5px; }
.oao-tools .work-progress::-webkit-progress-value { background: var(--tools-blue); border-radius: 5px; }
.oao-tools .work-progress::-moz-progress-bar { background: var(--tools-blue); border-radius: 5px; }
.oao-tools .results-area { margin-top: 28px; border-top: 1px solid var(--tools-line); padding-top: 24px; }
.oao-tools .results-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.oao-tools .results-heading h2 { font-size: 20px; margin: 3px 0; letter-spacing: -.6px; color: var(--tools-ink); }
.oao-tools .result-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.oao-tools .result-card { border: 1px solid var(--tools-line); border-radius: 7px; overflow: hidden; background: #fff; }
.oao-tools .result-preview { height: 200px; background: repeating-conic-gradient(#eff2f6 0% 25%, #fff 0% 50%) 50%/18px 18px; display: flex; align-items: center; justify-content: center; padding: 16px; }
.oao-tools .result-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.oao-tools .result-preview-empty { color: #7188a5; font-size: 13px; }
.oao-tools .result-info { padding: 16px; }
.oao-tools .result-info strong { display: block; overflow-wrap: anywhere; font-size: 12px; }
.oao-tools .result-meta { display: block; color: #697c97; font-size: 11px; margin: 4px 0; }
.oao-tools .result-note { font-size: 11px; color: #5077aa; min-height: 18px; margin: 4px 0 10px; }
.oao-tools .result-info > a { display: block; text-align: center; font-size: 12px; background: #edf3ff; border-radius: 4px; color: #3766cf; padding: 8px; }
.oao-tools .usage-section { margin: 39px 0 28px; border-top: 1px solid var(--tools-line); padding-top: 23px; }
.oao-tools .usage-section h2 { font-size: 17px; margin: 0 0 14px; letter-spacing: -.4px; color: var(--tools-ink); }
.oao-tools .usage-section > p { margin: 0 0 16px; font-size: 13px; line-height: 1.9; color: #657996; }
.oao-tools .tool-guide h3 { margin: 21px 0 8px; color: var(--tools-ink); font-size: 14px; }
.oao-tools .tool-guide ul { padding-left: 20px; margin: 0; color: #657996; font-size: 12px; line-height: 2; }
.oao-tools .usage-section ol { color: #657996; font-size: 12px; line-height: 2.1; padding-left: 20px; margin: 0 0 20px; }
.oao-tools .usage-section details { border-top: 1px solid #e7ebf2; padding: 15px 0; }
.oao-tools .usage-section summary { cursor: pointer; color: #536986; font-size: 12px; }
.oao-tools .usage-section details p { font-size: 12px; color: #647997; margin: 10px 0 0; }
.oao-tools .detail-contact { padding: 20px 0 33px; display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.oao-tools .detail-contact strong { font-size: 14px; }
.oao-tools .detail-contact p { font-size: 11px; color: #6b7e99; margin: 5px 0; }
.oao-tools .detail-contact a { font-size: 11px; color: #5277bb; white-space: nowrap; }
.oao-tools .detail-contact > div:last-child:not(:first-child) { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.oao-tools .qr-input-area textarea { width: 100%; padding: 16px; border: 1px solid #dce4ef; border-radius: 6px; color: #334867; background: #fff; resize: vertical; font-size: 14px; min-height: 200px; }
.oao-tools .field-help { font-size: 11px; color: #6a7f9d; line-height: 1.8; margin: 9px 0; }
.oao-tools .qr-input-note { padding: 17px 0; color: #7086a4; font-size: 11px; }
.oao-tools .icon-size-list { display: flex; flex-direction: column; gap: 7px; font-size: 12px; color: #58759f; }
.oao-tools .color-settings { display: flex; gap: 14px; }
.oao-tools .color-settings > label { flex: 1; }
.oao-tools .color-settings input { width: 100%; height: 37px; border: 1px solid #dce3ef; border-radius: 4px; background: #fff; padding: 3px; margin-top: 8px; }
.oao-tools .favicon-code-area { margin-top: 20px; position: relative; }
.oao-tools .favicon-code-area textarea { width: 100%; border: 1px solid var(--tools-line); border-radius: 5px; padding: 12px; background: #f8fafc; color: #526e91; font: 12px/1.6 Consolas, monospace; resize: vertical; }
.oao-tools .favicon-code-area button { display: block; margin-left: auto; padding: 8px 0; }
.oao-tools .related-tools { padding: 22px 0 0; border-top: 1px solid var(--tools-line); }
.oao-tools .related-tools h2 { margin: 0 0 12px; font-size: 17px; color: var(--tools-ink); }
.oao-tools .related-tools a { display: inline-block; padding: 7px 12px; margin: 0 6px 8px 0; border: 1px solid var(--tools-line); border-radius: 4px; color: #4d6d9e; font-size: 12px; }
.oao-tools .tools-noscript { padding: 15px 20px; margin: 15px 0; background: #fff4f3; color: #a9362f; border-radius: 5px; font-size: 13px; }
.oao-tools .category-tabs { flex-wrap: wrap; row-gap: 8px; }
.oao-tools .tool-nav-all { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 12px; }
.oao-tools .tool-nav-all a { flex: 0 0 auto; white-space: nowrap; }

@media (min-width: 1500px) {
  .oao-tools .page-inner { max-width: 1350px; }
  .oao-tools .hub-heading { padding-top: 50px; }
  .oao-tools .tool-card { min-height: 254px; }
  .oao-tools .hub-heading h1 { font-size: 42px; }
}
@media (max-width: 1000px) {
  .oao-tools .page-inner { padding: 0 28px; }
  .oao-tools .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oao-tools .workspace { grid-template-columns: minmax(0, 1fr) 278px; }
  .oao-tools .input-pane { padding: 22px; }
  .oao-tools .settings-pane { padding: 22px 18px; }
  .oao-tools .result-list { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  body.page-tools .oao-tools { padding-top: 80px; }
  .oao-tools .page-inner { padding: 0 20px; }
  .oao-tools .breadcrumb { padding-top: 18px; font-size: 10px; }
  .oao-tools .hub-heading { padding: 31px 0 27px; }
  .oao-tools .hub-heading h1 { font-size: 28px; letter-spacing: -1.2px; }
  .oao-tools .hub-heading p { font-size: 13px; line-height: 1.9; }
  .oao-tools .mobile-break { display: block; }
  .oao-tools .service-points { gap: 13px; font-size: 10px; margin-top: 17px; flex-wrap: wrap; }
  .oao-tools .tools-caption { display: none; }
  .oao-tools .tool-grid { gap: 12px; }
  .oao-tools .tool-card { padding: 19px 17px 14px; min-height: 241px; }
  .oao-tools .tool-card h2 { font-size: 16px; line-height: 1.5; margin-top: 14px; }
  .oao-tools .tool-card p { font-size: 11px; }
  .oao-tools .tool-card p br { display: none; }
  .oao-tools .tool-type { display: none; }
  .oao-tools .file-icon { width: 39px; height: 42px; }
  .oao-tools .card-bottom { display: block; }
  .oao-tools .card-bottom strong { display: block; margin-top: 5px; }
  .oao-tools .creation-banner { padding: 23px 21px; display: block; margin: 27px 0 34px; }
  .oao-tools .creation-banner h2 { font-size: 17px; }
  .oao-tools .creation-banner p { font-size: 11px; }
  .oao-tools .creation-banner > a { display: block; margin-top: 17px; }
  .oao-tools .detail-heading { padding: 23px 0 21px; }
  .oao-tools .detail-heading h1 { font-size: 27px; }
  .oao-tools .detail-heading p { font-size: 12px; }
  .oao-tools .tool-nav { gap: 6px; padding-bottom: 15px; margin-bottom: 20px; }
  .oao-tools .tool-nav a { font-size: 10px; padding: 7px 9px; }
  .oao-tools .workspace { grid-template-columns: 1fr; }
  .oao-tools .input-pane { padding: 20px 18px; }
  .oao-tools .drop-zone { min-height: 266px; }
  .oao-tools .drop-zone strong { font-size: 15px; }
  .oao-tools .settings-pane { border-left: 0; border-top: 1px solid var(--tools-line); padding: 22px 20px; }
  .oao-tools .settings-pane select, .oao-tools .settings-pane input[type="number"], .oao-tools .qr-input-area textarea { font-size: 16px; }
  .oao-tools .setting-block { margin-bottom: 17px; }
  .oao-tools .settings-note { font-size: 11px; }
  .oao-tools .detail-contact { display: block; }
  .oao-tools .detail-contact a { display: block; margin-top: 10px; }
  .oao-tools .results-heading { gap: 10px; }
  .oao-tools .results-heading h2 { font-size: 18px; }
  .oao-tools .results-heading > button { font-size: 11px; }
  .oao-tools .result-preview { height: 220px; }
}
@media (max-width: 380px) {
  .oao-tools .tool-grid { grid-template-columns: 1fr; }
  .oao-tools .tool-card { min-height: 210px; }
  .oao-tools .card-bottom { display: flex; }
  .oao-tools .card-bottom strong { margin-top: 0; }
  .oao-tools .service-points { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .oao-tools *, .oao-tools *::before, .oao-tools *::after { scroll-behavior: auto !important; transition: none !important; }
}