:root {
  color-scheme: light;
  --paper: #f7f7f4;
  --surface: #fff;
  --ink: #222720;
  --muted: #81867e;
  --muted-dark: #646b61;
  --line: #e8e9e4;
  --line-strong: #dcdfd7;
  --accent: #617a55;
  --accent-dark: #4e6644;
  --accent-soft: #eef2eb;
  --warm: #f2efe8;
  --shadow: 0 4px 22px rgba(36, 43, 32, .035), 0 1px 2px rgba(36, 43, 32, .025);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; min-width: 320px; min-height: 100vh; min-height: 100dvh; background: var(--paper); color: var(--ink); }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(97, 122, 85, .35); outline-offset: 3px; }
button:disabled { cursor: not-allowed; }
.app-shell { width: min(1168px, calc(100% - 64px)); margin: 0 auto; padding: env(safe-area-inset-top) 0 max(22px, env(safe-area-inset-bottom)); }
.topbar { height: 78px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(42, 49, 38, .08); }
.brand, .footer-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 22px; letter-spacing: -.07em; font-weight: 700; }
.brand { min-height: 44px; }
.brand-period, .footer-brand span { color: var(--accent); }
.brand-mark { width: 25px; height: 23px; display: flex; align-items: end; gap: 3px; }
.brand-mark i { display: block; width: 6px; border-radius: 5px; background: var(--accent); transform: skew(-20deg); }
.brand-mark i:nth-child(1) { height: 13px; opacity: .55; }
.brand-mark i:nth-child(2) { height: 19px; opacity: .78; }
.brand-mark i:nth-child(3) { height: 23px; }
.topbar-nav { display: flex; align-items: center; gap: 30px; }
.local-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #e5e8e0; border-radius: 999px; color: #5b6655; font-size: 12px; letter-spacing: .005em; background: rgba(255,255,255,.56); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #7f9a6e; box-shadow: 0 0 0 3px #eaf0e5; }
.nav-link { display: inline-flex; gap: 7px; align-items: center; color: #656a61; text-decoration: none; font-size: 13px; transition: color .18s ease; }
.nav-link:hover { color: var(--accent-dark); }
.nav-link span { font-size: 12px; }

.intro { display: flex; align-items: end; justify-content: space-between; padding: 57px 0 37px; }
.eyebrow, .section-kicker { margin: 0; color: #858a81; font-size: 10px; font-weight: 650; letter-spacing: .14em; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: #747a70; }
.eyebrow-rule { width: 19px; height: 1px; background: #9da696; }
h1 { margin: 15px 0 13px; font-size: clamp(37px, 4.4vw, 54px); line-height: 1.055; letter-spacing: -.064em; font-weight: 590; }
h1 span { color: #858a80; font-weight: 450; }
.intro-description { margin: 0; color: #777d74; font-size: 14px; line-height: 1.75; letter-spacing: -.01em; }
.intro-note { margin-bottom: 5px; display: flex; align-items: center; gap: 11px; padding: 12px 15px; border: 1px solid #e9e9e3; border-radius: 12px; background: rgba(255,255,255,.48); }
.note-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #eff2ec; color: #607750; }
.note-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.55; }
.intro-note strong, .intro-note small { display: block; }
.intro-note strong { font-size: 11px; font-weight: 620; }
.intro-note small { padding-top: 4px; color: #858a82; font-size: 10px; }

.workspace { display: grid; grid-template-columns: minmax(0, 1.29fr) minmax(360px, .86fr); gap: 17px; align-items: stretch; }
.panel { border: 1px solid #e8e9e4; border-radius: 15px; background: var(--surface); box-shadow: var(--shadow); }
.preview-panel { min-width: 0; padding: 23px 25px 22px; display: flex; flex-direction: column; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; min-height: 48px; }
.section-kicker { font-size: 9px; letter-spacing: .11em; color: #92978e; }
.section-kicker span { padding: 0 3px; color: #b0b5ab; }
.panel-heading h2 { margin: 6px 0 0; font-size: 17px; line-height: 1.15; letter-spacing: -.035em; font-weight: 610; }
.preview-actions { display: flex; align-items: center; gap: 8px; }
.view-switch { display: inline-flex; align-items: center; padding: 3px; border: 1px solid #ebede8; border-radius: 9px; background: #f8f9f6; }
.view-tab { min-height: 29px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: #81877e; cursor: pointer; font-size: 10px; transition: background .18s, color .18s, box-shadow .18s; }
.view-tab.is-active { color: #414a3d; background: #fff; box-shadow: 0 1px 3px rgba(35,45,29,.12); }
.icon-button, .transform-button { display: inline-grid; place-items: center; border: 1px solid #e9ebe5; background: #fff; color: #757c71; cursor: pointer; transition: background .16s, border-color .16s, color .16s; }
.icon-button { width: 34px; height: 34px; border-radius: 9px; }
.icon-button:hover, .transform-button:hover { background: #f5f7f2; border-color: #dfe4da; color: var(--accent-dark); }
.icon-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dropzone { flex: 1; min-height: 319px; margin-top: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; border: 1px dashed #d8ddd3; border-radius: 12px; background: #fbfcf9; cursor: pointer; overflow: hidden; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.dropzone:hover, .dropzone.is-dragging, .dropzone:focus-visible { border-color: #8fa080; background: #f7f9f4; }
.dropzone.is-dragging { box-shadow: inset 0 0 0 3px rgba(97,122,85,.08); }
.empty-illustration { width: 88px; height: 77px; position: relative; margin-bottom: 18px; border: 1px solid #e2e6de; border-radius: 13px; background: #f2f5ef; overflow: hidden; }
.image-sun { position: absolute; width: 13px; height: 13px; top: 17px; right: 19px; border-radius: 50%; background: #ced9c5; }
.image-hill { position: absolute; width: 60px; height: 40px; bottom: -12px; border-radius: 45% 60% 0 0; transform: rotate(-28deg); }
.image-hill-back { left: 6px; background: #dfe7da; }
.image-hill-front { right: -8px; bottom: -22px; background: #cddac5; transform: rotate(30deg); }
.upload-arrow { position: absolute; width: 31px; height: 31px; right: -5px; bottom: -5px; display: grid; place-items: center; border: 2px solid #fbfcf9; border-radius: 10px; background: var(--accent); color: #fff; }
.upload-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.drop-title { margin: 0; color: #343a32; font-size: 14px; font-weight: 600; letter-spacing: -.02em; }
.drop-copy { margin: 7px 0 0; color: #7c8279; font-size: 12px; }
.browse-link { color: var(--accent-dark); text-decoration: underline; text-decoration-color: #c6d1bd; text-underline-offset: 3px; font-weight: 580; }
.drop-formats { margin: 18px 0 0; color: #9a9e96; font-size: 10px; }
.drop-formats span { padding: 0 4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.image-stage { height: 343px; margin-top: 13px; display: grid; place-items: center; position: relative; overflow: hidden; isolation: isolate; border-radius: 11px; background: #f5f6f3; }
.stage-background { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(45deg, #eceeea 25%, transparent 25%), linear-gradient(-45deg, #eceeea 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eceeea 75%), linear-gradient(-45deg, transparent 75%, #eceeea 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; opacity: .54; }
.image-stage img { display: block; max-width: calc(100% - 40px); max-height: 285px; object-fit: contain; border-radius: 3px; box-shadow: 0 6px 28px rgba(29,37,26,.11); transition: opacity .2s ease; }
.image-stage img.is-original-view { opacity: .96; }
.stage-caption { position: absolute; left: 12px; bottom: 11px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid rgba(231,233,228,.9); border-radius: 7px; background: rgba(255,255,255,.9); color: #6e756a; font-size: 10px; backdrop-filter: blur(6px); }
.caption-separator { width: 3px; height: 3px; border-radius: 50%; background: #abb1a6; }
.stage-processing { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; background: rgba(250,251,248,.76); color: #56634e; font-size: 12px; backdrop-filter: blur(2px); }
.spinner { width: 17px; height: 17px; border: 2px solid #d5dfcd; border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.file-meta { min-width: 0; margin-top: 15px; display: flex; align-items: center; gap: 11px; }
.batch-row { margin-top: 12px; padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #e6eae2; border-radius: 8px; background: #fafbf8; color: #697362; font-size: 12px; }
.batch-download { min-height: 40px; padding: 0 12px; flex: 0 0 auto; border: 1px solid #d7e0d1; border-radius: 7px; background: #fff; color: #4f6943; cursor: pointer; font-size: 12px; font-weight: 620; }
.batch-download:hover:not(:disabled) { background: #f0f4ed; }
.batch-download:disabled { opacity: .58; cursor: wait; }
.file-type-mark { flex: 0 0 auto; width: 38px; height: 40px; display: grid; place-items: center; border: 1px solid #e6e9e2; border-radius: 9px; background: #f8f9f6; color: #7b8973; font-size: 9px; font-weight: 700; letter-spacing: .025em; }
.file-meta-copy { min-width: 0; display: grid; gap: 5px; }
.file-meta-copy strong { overflow: hidden; color: #3c4339; font-size: 11px; font-weight: 570; text-overflow: ellipsis; white-space: nowrap; }
.file-meta-copy span { color: #92978f; font-size: 10px; }
.text-button { min-height: 36px; margin-left: auto; padding: 0 8px; border: 0; background: transparent; color: #6b7d60; cursor: pointer; font-size: 11px; font-weight: 570; }
.text-button:hover { color: #3d5632; text-decoration: underline; text-underline-offset: 3px; }
.result-summary { margin-top: 20px; padding-top: 17px; border-top: 1px solid #eff0ed; }
.summary-topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 13px; color: #525b4d; font-size: 11px; font-weight: 560; }
.saved-pill { padding: 5px 8px; border-radius: 999px; background: var(--accent-soft); color: #5c7550; font-size: 9px; font-weight: 620; white-space: nowrap; }
.size-comparison { display: grid; gap: 6px; }
.size-row { display: flex; justify-content: space-between; color: #92978e; font-size: 10px; }
.size-row strong { color: #4d6044; font-size: 10px; font-weight: 650; }
.size-track { height: 4px; overflow: hidden; border-radius: 999px; background: #f0f1ed; }
.size-bar { display: block; height: 100%; border-radius: inherit; transition: width .3s ease; }
.original-bar { width: 100%; background: #d8dcd4; }
.output-bar { width: 54%; background: #94a487; }
.output-size-row { margin-top: 4px; }
.notice { margin-top: 13px; padding: 9px 10px; display: flex; align-items: center; gap: 8px; border: 1px solid #efdfd8; border-radius: 8px; background: #fffaf8; color: #815e50; font-size: 10px; line-height: 1.4; }
.notice-icon { flex: 0 0 auto; width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; background: #f4e7e1; font-size: 10px; font-weight: 700; }
.notice-dismiss { width: 26px; height: 26px; margin-left: auto; border: 0; border-radius: 6px; background: transparent; color: #987e72; cursor: pointer; font-size: 16px; }
.notice-dismiss:hover { background: #f7ece7; }

.settings-panel { min-width: 0; padding: 23px 23px 18px; display: flex; flex-direction: column; }
.settings-spark { color: #9aaa8e; font-size: 18px; line-height: 1; }
.setting-section { padding: 18px 0; border-top: 1px solid #eff0ec; }
.compression-section { margin-top: 7px; padding-top: 16px; }
.setting-label-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.setting-label { color: #434a40; font-size: 11px; font-weight: 620; letter-spacing: -.005em; }
.setting-hint { color: #9a9f97; font-size: 9px; text-align: right; }
.preset-options { margin-top: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.preset-card { min-width: 0; min-height: 68px; padding: 10px 9px 8px; display: grid; grid-template-columns: 9px 1fr; align-content: center; align-items: center; column-gap: 6px; row-gap: 4px; text-align: left; border: 1px solid #eaebe7; border-radius: 9px; background: #fff; cursor: pointer; transition: border-color .17s ease, background .17s ease, box-shadow .17s ease; }
.preset-card:hover { border-color: #ced8c8; }
.preset-card.is-active { border-color: #9daa91; background: #f8faf6; box-shadow: inset 0 0 0 1px rgba(116,140,103,.06); }
.preset-dot { width: 7px; height: 7px; grid-row: 1; border-radius: 50%; background: #c9cdc5; }
.preset-dot-low { background: #b7c8ad; }
.preset-dot-medium { background: #8ea17f; }
.preset-dot-high { background: #687d5b; }
.preset-name { color: #495044; font-size: 10px; font-weight: 610; }
.preset-detail { grid-column: 2; color: #999e96; font-size: 9px; white-space: nowrap; }
.format-section { padding-top: 16px; padding-bottom: 15px; }
.format-options { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.format-option { min-width: 0; min-height: 48px; padding: 8px 9px; display: flex; align-items: center; gap: 9px; border: 1px solid #e9ebe6; border-radius: 8px; background: #fff; text-align: left; cursor: pointer; transition: border-color .16s, background .16s; }
.format-option:hover { border-color: #ccd6c6; }
.format-option.is-active { border-color: #a1ae96; background: #f9faf7; }
.format-symbol { flex: 0 0 auto; width: 31px; height: 27px; display: grid; place-items: center; border: 1px solid #e5e8e1; border-radius: 5px; background: #fff; color: #66775c; font-size: 8px; font-weight: 700; letter-spacing: .02em; }
.pdf-symbol { color: #9a7770; }
.format-description { overflow: hidden; color: #7f857a; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.format-note { min-height: 13px; margin: 9px 0 0; color: #989d94; font-size: 9px; line-height: 1.4; }
.filename-section { padding-top: 15px; padding-bottom: 15px; }
.filename-input-wrap { height: 38px; margin-top: 8px; display: flex; align-items: center; overflow: hidden; border: 1px solid #e6e8e2; border-radius: 7px; background: #fcfcfb; transition: border-color .16s, box-shadow .16s; }
.filename-input-wrap:focus-within { border-color: #a3b398; box-shadow: 0 0 0 3px rgba(97,122,85,.08); }
.filename-input-wrap input { width: 0; min-width: 0; height: 100%; flex: 1; padding: 0 10px; border: 0; outline: 0; background: transparent; color: #51594d; font-size: 11px; }
.filename-input-wrap input:focus-visible { outline: 0; }
.filename-extension { flex: 0 0 auto; padding-right: 10px; color: #9ba096; font-size: 10px; }
.resize-section { padding-top: 15px; padding-bottom: 16px; }
.aspect-button { min-height: 32px; padding: 0 4px 0 7px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 6px; background: transparent; color: #82887e; cursor: pointer; font-size: 9px; transition: color .17s, background .17s; }
.aspect-button:hover { background: #f6f7f3; }
.aspect-button[aria-pressed="false"] { color: #a0a49d; }
.aspect-button:disabled, .transform-button:disabled { cursor: not-allowed; opacity: .48; }
.aspect-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.aspect-button[aria-pressed="false"] svg { opacity: .5; }
.dimensions-row { display: grid; grid-template-columns: 1fr 13px 1fr; align-items: center; gap: 7px; margin-top: 9px; }
.dimension-input { min-width: 0; height: 36px; padding: 0 8px; display: flex; align-items: center; gap: 6px; border: 1px solid #e8eae5; border-radius: 7px; background: #fcfcfb; color: #989e94; font-size: 9px; }
.dimension-input input { width: 0; min-width: 0; height: 100%; flex: 1; padding: 0; border: 0; outline: 0; background: transparent; color: #555e51; font-size: 11px; appearance: textfield; }
.dimension-input input::-webkit-inner-spin-button, .dimension-input input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.dimension-input:focus-within { border-color: #a3b398; box-shadow: 0 0 0 3px rgba(97,122,85,.08); }
.dimension-input input:focus-visible { outline: 0; }
.dimension-input input::placeholder { color: #b7bbb4; font-size: 9px; }
.dimension-input > span:last-child { font-size: 8px; }
.dimension-times { color: #b0b4ad; font-size: 12px; text-align: center; }
.transform-row { min-height: 42px; margin-top: 9px; display: flex; align-items: center; justify-content: space-between; }
.transform-caption { color: #8e948b; font-size: 9px; }
.transform-buttons { display: flex; align-items: center; gap: 6px; }
.transform-button { width: 32px; height: 30px; border-radius: 7px; }
.transform-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.reset-transform { width: auto; padding: 0 8px; display: flex; gap: 5px; font-size: 9px; }
.reset-transform svg { width: 13px; height: 13px; }
.settings-footer { margin-top: auto; padding-top: 11px; }
.advanced-settings { margin-top: 10px; padding-top: 12px; border-top: 1px solid #eff0ec; }
.advanced-settings summary { min-height: 40px; display: flex; align-items: center; justify-content: space-between; color: #596351; cursor: pointer; font-size: 13px; font-weight: 600; list-style: none; }
.advanced-settings summary::-webkit-details-marker { display: none; }
.advanced-settings summary span { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid #e6e9e2; border-radius: 7px; color: #708267; font-size: 15px; font-weight: 400; }
.advanced-settings[open] summary span { transform: rotate(45deg); }
.advanced-grid { padding: 8px 0 3px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px 10px; }
.advanced-field { min-width: 0; display: flex; flex-direction: column; gap: 7px; color: #596153; font-size: 12px; font-weight: 570; }
.advanced-field small { color: #7d8579; font-size: 11px; font-weight: 400; line-height: 1.4; }
.advanced-field > label, .advanced-field > span:first-child { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.advanced-field output { color: #526c46; font-variant-numeric: tabular-nums; }
.advanced-field input[type="range"] { width: 100%; accent-color: var(--accent); }
.advanced-field input[type="number"], .advanced-field select { width: 100%; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid #e3e7df; border-radius: 7px; background: #fcfcfb; color: #404a3c; font-size: 15px; }
.advanced-field select { padding-right: 25px; }
.number-suffix { min-width: 0; height: 40px; display: flex; align-items: center; overflow: hidden; border: 1px solid #e3e7df; border-radius: 7px; background: #fcfcfb; }
.number-suffix input { width: 0; min-width: 0; height: 100%; flex: 1; padding: 0 9px; border: 0; outline: 0; background: transparent; color: #404a3c; font-size: 15px; }
.number-suffix > span { padding-right: 9px; color: #788274; font-size: 12px; }
.color-input-wrap { display: flex; align-items: center; gap: 8px; }
.color-input-wrap input { width: 40px; height: 34px; padding: 3px; border: 1px solid #e3e7df; border-radius: 7px; background: #fff; }
.color-input-wrap small { color: #7d8579; font-size: 11px; font-weight: 400; }
.home-content { padding: 26px 0 12px; }
.content-block { max-width: 790px; padding: 26px 0; border-bottom: 1px solid #e5e7e1; }
.content-block .section-kicker { margin-bottom: 10px; }
.content-block h2, .popular-tools h2, .faq-section h2, .latest-guides h2 { margin: 0 0 12px; color: #343c32; font-size: 25px; line-height: 1.25; letter-spacing: -.045em; font-weight: 580; }
.content-block p:not(.section-kicker) { margin: 10px 0 0; color: #626b60; font-size: 15px; line-height: 1.8; }
.popular-tools, .faq-section, .latest-guides { padding: 31px 0; border-bottom: 1px solid #e5e7e1; }
.tool-link-grid { margin-top: 15px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tool-link-grid a, .footer-nav a { color: #536b48; text-decoration-color: #bbc9b1; text-underline-offset: 3px; }
.tool-link-grid a { min-height: 48px; padding: 10px 12px; display: flex; align-items: center; border: 1px solid #e5e9e1; border-radius: 8px; background: rgba(255,255,255,.58); font-size: 13px; line-height: 1.4; }
.tool-link-grid a:hover { border-color: #bdcbb4; background: #fff; }
.faq-section > .section-kicker { margin-bottom: 9px; }
.faq-section details { max-width: 790px; padding: 14px 0; border-bottom: 1px solid #e7e9e3; }
.faq-section details summary { color: #394236; cursor: pointer; font-size: 15px; font-weight: 600; }
.faq-section details p { margin: 9px 0 0; color: #687164; font-size: 14px; line-height: 1.7; }
.latest-guides .section-kicker { margin-bottom: 7px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-nav a { color: #717a6d; font-size: 11px; }
.download-button { width: 100%; min-height: 46px; padding: 0 13px 0 17px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--accent-dark); border-radius: 9px; background: var(--accent); color: #fff; box-shadow: 0 2px 4px rgba(63,83,52,.1); cursor: pointer; transition: transform .16s ease, background .16s ease, box-shadow .16s ease; }
.download-button:hover:not(:disabled) { transform: translateY(-1px); background: var(--accent-dark); box-shadow: 0 5px 12px rgba(63,83,52,.16); }
.download-button:active:not(:disabled) { transform: translateY(0); }
.download-button:disabled { border-color: #b9c3b3; background: #b9c3b3; box-shadow: none; color: rgba(255,255,255,.9); }
.download-button-label { font-size: 12px; font-weight: 610; letter-spacing: -.005em; }
.download-button-icon { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 7px; background: rgba(255,255,255,.09); }
.download-button-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; }
.download-footnote { margin: 10px 0 0; display: flex; align-items: center; justify-content: center; gap: 6px; color: #969b93; font-size: 9px; }
.mini-lock svg { display: block; width: 12px; height: 12px; fill: none; stroke: #929d89; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.how-section { padding: 54px 0 46px; }
.how-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 17px; border-bottom: 1px solid #e5e7e1; }
.how-heading h2 { margin: 0; color: #4a5047; font-size: 18px; letter-spacing: -.04em; font-weight: 530; }
.how-steps { display: grid; grid-template-columns: repeat(3, 1fr); }
.how-step { min-height: 90px; padding: 19px 22px 0 0; display: flex; gap: 13px; }
.how-step + .how-step { padding-left: 21px; border-left: 1px solid #e7e9e3; }
.step-number { padding-top: 2px; color: #a3ad9b; font-size: 9px; font-weight: 650; letter-spacing: .08em; }
.how-step h3 { margin: 0; color: #4d5549; font-size: 11px; font-weight: 620; }
.how-step p { max-width: 220px; margin: 6px 0 0; color: #898f85; font-size: 10px; line-height: 1.55; }
.page-footer { min-height: 49px; padding: 10px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid #e5e7e1; color: #a0a49c; font-size: 9px; }
.footer-brand { gap: 0; font-size: 15px; }

[hidden] { display: none !important; }

@media (min-width: 1440px) {
  .app-shell { width: min(1248px, calc(100% - 96px)); }
  .intro { padding-top: 68px; padding-bottom: 42px; }
  .workspace { grid-template-columns: minmax(0, 1.32fr) minmax(390px, .84fr); gap: 20px; }
  .preview-panel { padding: 26px 28px 24px; }
  .settings-panel { padding: 26px 26px 20px; }
  .dropzone { min-height: 345px; }
  .image-stage { height: 370px; }
}

@media (max-width: 900px) {
  .app-shell { width: min(760px, calc(100% - 40px)); }
  .intro { padding-top: 45px; }
  .workspace { grid-template-columns: minmax(0, 1fr) minmax(325px, .9fr); gap: 12px; }
  .preview-panel { padding: 20px; }
  .settings-panel { padding: 20px 18px 16px; }
  .dropzone { min-height: 310px; }
  .image-stage { height: 326px; }
  .how-section { padding-top: 43px; }
}

@media (max-width: 700px) {
  .app-shell { width: min(520px, calc(100% - 32px)); padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .topbar { height: 63px; }
  .brand { font-size: 20px; }
  .brand-mark { transform: scale(.9); transform-origin: left center; margin-right: -2px; }
  .topbar-nav { gap: 0; }
  .local-badge { padding: 7px 9px; font-size: 10px; }
  .nav-link { display: none; }
  .intro { padding: 37px 0 24px; align-items: flex-start; }
  .eyebrow { font-size: 9px; }
  h1 { margin-top: 13px; font-size: clamp(38px, 10vw, 48px); }
  .intro-description { font-size: 12px; line-height: 1.65; }
  .intro-note { display: none; }
  .workspace { grid-template-columns: 1fr; gap: 12px; }
  .preview-panel { min-height: 0; padding: 18px; }
  .panel-heading h2 { font-size: 16px; }
  .dropzone { min-height: 275px; margin-top: 11px; }
  .empty-illustration { transform: scale(.92); margin-top: -6px; margin-bottom: 12px; }
  .image-stage { height: min(72vw, 360px); min-height: 250px; margin-top: 11px; }
  .image-stage img { max-height: calc(100% - 56px); }
  .file-meta { margin-top: 12px; }
  .icon-button { width: 44px; height: 44px; }
  .view-tab { min-height: 44px; }
  .text-button { min-height: 44px; padding: 0 10px; }
  .result-summary { margin-top: 15px; }
  .settings-panel { padding: 19px 18px 16px; }
  .compression-section { margin-top: 6px; }
  .setting-section { padding-top: 16px; padding-bottom: 15px; }
  .preset-card { min-height: 65px; }
  .format-option { min-height: 48px; }
  .filename-input-wrap { height: 42px; }
  .dimension-input { height: 42px; }
  .transform-button { width: 44px; height: 44px; }
  .reset-transform { width: auto; min-width: 58px; }
  .aspect-button { min-height: 44px; }
  .notice-dismiss { width: 44px; height: 44px; margin-right: -6px; }
  .filename-input-wrap input, .dimension-input input { font-size: 16px; }
  .download-button { min-height: 50px; }
  .how-section { padding: 38px 0 33px; }
  .how-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .how-heading h2 { font-size: 17px; }
  .how-steps { grid-template-columns: 1fr; }
  .how-step, .how-step + .how-step { min-height: 0; padding: 15px 0; border-left: 0; border-bottom: 1px solid #e9ebe6; }
  .how-step:last-child { border-bottom: 0; }
  .how-step p { max-width: none; margin-top: 4px; }
  .page-footer { flex-wrap: wrap; min-height: 55px; gap: 7px 12px; }
  .page-footer > span:last-child { flex-basis: 100%; padding-left: 0; }
}

@media (max-width: 380px) {
  .app-shell { width: calc(100% - 26px); }
  .intro { padding-top: 31px; }
  h1 { font-size: 37px; }
  .preview-panel, .settings-panel { padding-right: 14px; padding-left: 14px; }
  .dropzone { min-height: 255px; }
  .view-tab { padding: 0 8px; }
  .preset-options { gap: 5px; }
  .preset-card { padding-right: 6px; padding-left: 6px; }
  .preset-detail { font-size: 8px; }
  .format-option { padding: 7px; gap: 6px; }
  .format-symbol { width: 28px; }
  .format-description { font-size: 8px; }
  .aspect-button span { max-width: 90px; }
}

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

@media (hover: none) and (pointer: coarse) {
  .brand { min-height: 44px; }
  .icon-button { width: 44px; height: 44px; }
  .view-tab { min-height: 44px; }
  .text-button { min-height: 44px; padding: 0 10px; }
  .aspect-button { min-height: 44px; }
  .transform-button { width: 44px; height: 44px; }
  .reset-transform { width: auto; min-width: 58px; }
  .notice-dismiss { width: 44px; height: 44px; margin-right: -6px; }
  .filename-input-wrap input, .dimension-input input { font-size: 16px !important; }
}

/* Final readability pass: quieter secondary text, larger controls, and clear labels. */
body { font-size: 16px; line-height: 1.5; }
.eyebrow, .section-kicker { font-size: 12px; }
.section-kicker { color: #767e72; }
.local-badge, .nav-link { font-size: 14px; }
.intro-description { color: #626b60; font-size: 17px; }
.intro-note strong { font-size: 14px; }
.intro-note small { font-size: 12px; }
.panel-heading h2 { font-size: 21px; }
.drop-title { font-size: 18px; }
.drop-copy { font-size: 15px; }
.drop-formats { font-size: 13px; }
.stage-caption { font-size: 13px; }
.file-meta-copy strong { font-size: 15px; }
.file-meta-copy span { font-size: 13px; }
.text-button { font-size: 14px; }
.summary-topline { font-size: 14px; }
.saved-pill { font-size: 12px; }
.size-row, .size-row strong { font-size: 13px; }
.notice { font-size: 13px; }
.setting-label { font-size: 15px; }
.setting-hint { color: #737c70; font-size: 12px; }
.preset-name { font-size: 14px; }
.preset-detail { font-size: 12px; }
.format-symbol { font-size: 10px; }
.format-description, .format-note { font-size: 12px; }
.filename-input-wrap { height: 44px; }
.filename-extension { font-size: 14px; }
.aspect-button { font-size: 13px; }
.dimension-input { height: 44px; font-size: 13px; }
.dimension-input input { font-size: 16px; }
.dimension-input > span:last-child { font-size: 11px; }
.transform-caption { font-size: 13px; }
.transform-button { width: 38px; height: 38px; }
.reset-transform { font-size: 12px; }
.download-button-label { font-size: 16px; }
.download-footnote { color: #687164; font-size: 12px; }
.how-heading h2 { font-size: 23px; }
.how-step h3 { font-size: 15px; }
.how-step p { color: #6f786c; font-size: 13px; }
.page-footer { color: #747c70; font-size: 11px; }
.footer-brand { font-size: 17px; }

@media (max-width: 700px) {
  .intro-description { font-size: 15px; }
  .panel-heading h2 { font-size: 20px; }
  .drop-formats { font-size: 12px; }
  .format-description { font-size: 12px; }
  .advanced-grid { grid-template-columns: 1fr; gap: 12px; }
  .batch-row { align-items: flex-start; flex-direction: column; }
  .batch-download { width: 100%; }
  .tool-link-grid { grid-template-columns: 1fr; }
}

@media (hover: none) and (pointer: coarse) {
  .advanced-field input[type="number"], .advanced-field select, .number-suffix input { font-size: 16px !important; }
  .batch-download { min-height: 44px; }
}

h1 { font-size: clamp(40px, 5vw, 60px); line-height: 1.06; }
@media (max-width: 700px) { h1 { font-size: clamp(39px, 9vw, 49px); } }

@media (hover: none) and (pointer: coarse) {
  button { min-height: 44px; }
  .transform-button { width: 44px; height: 44px; }
  .reset-transform { width: auto; min-width: 58px; }
  .topbar-nav .nav-link { min-height: 44px; }
}

/* Keep secondary copy readable while the interface stays visually quiet. */
.eyebrow, .section-kicker, .intro-note small, .drop-copy, .drop-formats,
.setting-hint, .preset-detail, .format-description, .format-note,
.filename-extension, .transform-caption, .step-number, .how-step p,
.page-footer, .page-footer span, .footer-nav a, .download-footnote,
.size-row, .file-meta-copy span, .stage-caption, .file-type-mark {
  color: #626b60;
}
.pdf-symbol, .notice-dismiss { color: #75584f; }
.saved-pill { color: #4f6547; }
.download-button:disabled { border-color: #cbd5c3; background: #e8ede4; color: #465340; }

/* Keep control copy comfortable to read at normal viewing distance. */
.view-tab { font-size: 13px; }
.batch-row, .batch-download { font-size: 14px; }
.file-type-mark { font-size: 11px; }
.size-row, .size-row strong { font-size: 14px; }
.preset-detail { font-size: 13px; }
.format-symbol { font-size: 11px; }
.filename-input-wrap input, .dimension-input input,
.advanced-field input[type="number"], .advanced-field select,
.number-suffix input { font-size: 16px; }
.dimension-input > span:last-child { font-size: 12px; }
.aspect-button, .reset-transform { font-size: 13px; }
.page-footer, .footer-nav a { font-size: 13px; }

@media (max-width: 700px) {
  .batch-row, .batch-download { font-size: 14px; }
  .page-footer, .footer-nav a { font-size: 12px; }
}

/* Reference-inspired workspace: quiet header, clear two-column tool, direct controls. */
:root {
  --paper: #f8f8f4;
  --surface: rgba(255, 255, 255, .93);
  --ink: #172722;
  --muted: #718078;
  --muted-dark: #4f6057;
  --line: #e6e9e4;
  --line-strong: #d7ded6;
  --accent: #587b62;
  --accent-dark: #3f654b;
  --accent-soft: #edf4ee;
  --warm: #f5efe3;
  --shadow: 0 12px 34px rgba(37, 55, 43, .055), 0 2px 7px rgba(37, 55, 43, .035);
}

body {
  background:
    radial-gradient(ellipse at -2% 72%, rgba(190, 218, 197, .34), transparent 24%),
    radial-gradient(ellipse at 102% 77%, rgba(242, 220, 166, .34), transparent 26%),
    radial-gradient(ellipse at 102% 13%, rgba(204, 223, 228, .32), transparent 28%),
    #f8f8f4;
}
.app-shell { width: min(1168px, calc(100% - 64px)); }
.brand-mark i:nth-child(1) { display: none; }
.brand-mark { width: 18px; gap: 4px; }
.topbar { height: 58px; border-bottom-color: rgba(34, 53, 43, .09); }
.local-badge { padding: 8px 14px; border-color: #e7e9e4; background: rgba(255,255,255,.78); color: #405249; }
.status-lock { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-link { min-height: 40px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.62); color: #405249; }
.nav-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.intro { align-items: flex-start; padding: 25px 4px 17px; }
.eyebrow { font-size: 11px; color: #53675a; }
.eyebrow-rule { width: 28px; height: 2px; background: var(--accent); }
h1 { margin: 10px 0 12px; font-size: clamp(45px, 4vw, 51px); line-height: 1.045; letter-spacing: -.045em; }
h1 span { position: relative; z-index: 0; display: inline-block; color: #31473b; font-weight: 430; }
h1 span::after { content: ""; position: absolute; z-index: -1; right: 1%; bottom: -2px; left: 0; height: 5px; border-radius: 999px; background: #f2c94c; transform: rotate(-.35deg); }
.intro-description { color: #65756a; font-size: 15px; line-height: 1.48; letter-spacing: 0; }
.workspace { grid-template-columns: minmax(0, 1.42fr) minmax(360px, .98fr); gap: 12px; align-items: stretch; }
.panel { border-color: rgba(223, 228, 221, .95); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow); }
.preview-panel { padding: 17px 20px 18px; }
.panel-heading { min-height: 43px; align-items: center; }
.section-kicker { color: #68796c; font-size: 10px; letter-spacing: .12em; }
.panel-heading h2 { margin-top: 4px; color: var(--ink); font-size: 18px; letter-spacing: -.025em; }
.settings-heading h2 { font-size: 17px; }
.preview-actions { display: flex; align-items: center; gap: 8px; }
.replace-image-button { min-height: 38px; padding: 0 11px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #3f5146; font-size: 12px; }
.replace-image-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.remove-button { width: 38px; height: 38px; border-color: #ece2df; border-radius: 8px; color: #a65d56; background: #fff; }
.remove-button:hover { background: #fcf4f1; }
.dropzone { min-height: 285px; margin-top: 10px; border-radius: 9px; background: rgba(255,255,255,.55); }
.dropzone:hover, .dropzone.is-dragging, .dropzone:focus-visible { border-color: #8ca893; background: #f7faf6; }
.empty-illustration { transform: scale(1.1); margin-bottom: 17px; }
.browse-link { color: var(--accent-dark); text-decoration-color: #a9c1ac; }
.drop-title { color: var(--ink); font-size: 15px; }
.drop-copy { color: #62746a; font-size: 13px; }
.drop-formats { color: #708176; font-size: 11px; }
.image-stage { height: clamp(205px, 22vw, 246px); min-height: 205px; margin-top: 10px; border-radius: 8px; background: #eef2ee; }
.stage-background { background: #edf1ed; opacity: 1; }
.image-stage img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: none; }
.stage-caption { right: 10px; left: 10px; width: max-content; max-width: calc(100% - 20px); padding: 5px 8px; border-color: rgba(229,234,228,.95); background: rgba(255,255,255,.94); color: #526459; font-size: 11px; }
.image-stage { order: 1; }
.file-meta { min-height: 58px; margin-top: 0; padding: 7px 10px; gap: 10px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; background: rgba(255,255,255,.96); }
.file-meta { order: 2; }
.file-thumbnail { width: 42px; height: 40px; flex: 0 0 auto; border-radius: 6px; object-fit: cover; background: #eef2ee; }
.file-type-mark { width: 42px; height: 40px; border-radius: 6px; color: var(--accent-dark); background: var(--accent-soft); }
.file-meta-copy { gap: 4px; }
.file-meta-copy strong { color: #23372c; font-size: 13px; }
.file-meta-copy span { color: #718078; font-size: 11px; }
.view-switch { margin-left: auto; display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 7px; background: #f8f9f7; }
.view-tab { min-height: 30px; padding: 0 8px; border-radius: 5px; color: #63736a; font-size: 11px; }
.view-tab.is-active { background: #fff; color: var(--accent-dark); box-shadow: 0 1px 3px rgba(31,45,34,.12); }
.dropzone.has-image { min-height: 164px; flex: 1 0 164px; margin-top: 12px; border-color: #aabdaa; border-radius: 8px; background: linear-gradient(145deg, rgba(240,246,240,.92), rgba(248,249,246,.88)); }
.dropzone.has-image { order: 4; }
.dropzone.has-image .empty-illustration { width: 34px; height: 34px; margin-top: 0; margin-bottom: 12px; border-radius: 9px; background: #e6efe6; transform: none; }
.dropzone.has-image .image-sun { top: 8px; right: 8px; width: 6px; height: 6px; }
.dropzone.has-image .image-hill { width: 30px; height: 20px; bottom: -7px; }
.dropzone.has-image .upload-arrow { width: 21px; height: 21px; right: -3px; bottom: -3px; border-radius: 6px; }
.dropzone.has-image .upload-arrow svg { width: 12px; height: 12px; }
.dropzone.has-image .drop-title { font-size: 13px; }
.dropzone.has-image .drop-copy { margin-top: 5px; font-size: 12px; }
.dropzone.has-image .drop-formats { margin-top: 9px; font-size: 10px; }
.batch-row { margin-top: 10px; border-color: var(--line); background: #f8faf7; color: #53665a; font-size: 12px; }
.batch-row { order: 3; }
.notice { order: 5; }
.settings-panel { padding: 18px 20px 15px; }
.settings-heading { min-height: 34px; }
.settings-spark { width: 20px; height: 20px; display: grid; place-items: center; color: var(--accent); }
.settings-spark svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.setting-section { padding: 8px 0; }
.compression-section { margin-top: 0; padding-top: 6px; }
.compression-section .setting-label-row { display: none; }
.setting-label { color: #273c30; font-size: 13px; }
.setting-hint { color: #76857b; font-size: 11px; }
.preset-options { margin-top: 6px; gap: 8px; }
.preset-card { min-height: 68px; padding: 9px 10px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; border-color: var(--line); border-radius: 8px; }
.preset-card.is-active { border-color: #78977f; background: #f1f7f1; box-shadow: inset 0 0 0 1px rgba(78,119,85,.08); }
.preset-name { color: #21382a; font-size: 13px; }
.preset-detail { color: #58695d; font-size: 11px; line-height: 1.35; white-space: normal; }
.format-section { padding-top: 8px; padding-bottom: 8px; }
.format-options { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
.format-option { min-height: 40px; padding: 6px 4px; justify-content: center; border-color: var(--line); border-radius: 7px; }
.format-option.is-active { border-color: #78977f; background: #f1f7f1; box-shadow: inset 0 0 0 1px rgba(78,119,85,.06); }
.format-symbol { width: auto; height: auto; border: 0; background: transparent; color: #31483a; font-size: 12px; }
.format-description, .format-note { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.format-note { margin-top: 7px; color: #6f7d73; font-size: 10px; }
.filename-section { padding-top: 8px; padding-bottom: 8px; }
.filename-section > .setting-label { display: block; }
.filename-input-wrap { height: 38px; margin-top: 6px; border-color: var(--line); border-radius: 7px; background: #fcfcfb; }
.filename-input-wrap input { font-size: 13px; color: #2b4033; }
.filename-input-wrap input::placeholder { color: #859187; opacity: 1; }
.filename-extension { color: #65766a; font-size: 12px; }
.resize-section { padding-top: 8px; padding-bottom: 7px; }
.resize-heading { margin-bottom: 5px; }
.dimension-presets { position: relative; z-index: 5; }
.dimension-presets summary { min-height: 34px; padding: 0 9px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: #42564a; cursor: pointer; font-size: 11px; list-style: none; }
.dimension-presets summary::-webkit-details-marker { display: none; }
.dimension-presets summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.preset-menu { position: absolute; top: 39px; right: 0; width: 184px; padding: 5px; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: 0 8px 24px rgba(31,47,36,.13); }
.preset-menu button { min-height: 38px; padding: 0 9px; border: 0; border-radius: 6px; background: #fff; text-align: left; color: #33483a; cursor: pointer; font-size: 12px; }
.preset-menu button:hover:not(:disabled) { background: var(--accent-soft); }
.preset-menu button:disabled { color: #9ba49d; }
.dimensions-row { grid-template-columns: minmax(0,1fr) 38px minmax(0,1fr); gap: 8px; margin-top: 6px; }
.dimension-input { height: 39px; border-color: var(--line); border-radius: 7px; color: #77857b; font-size: 11px; }
.dimension-input input { color: #2b4033; font-size: 14px; }
.dimension-input > span:last-child { color: #75847a; font-size: 10px; }
.aspect-button { width: 38px; min-height: 38px; padding: 0; justify-content: center; border: 1px solid #e2e9e1; background: #f5f8f4; color: var(--accent-dark); }
.aspect-button span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.aspect-button svg { width: 16px; height: 16px; }
.transform-row { min-height: 39px; margin-top: 6px; }
.transform-caption { color: #40564a; font-size: 12px; }
.transform-buttons { gap: 6px; }
.transform-button { width: 38px; height: 36px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: #435a4b; }
.reset-transform { min-width: 42px; padding: 0 7px; font-size: 11px; }
.advanced-settings { margin-top: 5px; padding-top: 7px; border-top-color: var(--line); }
.advanced-settings summary { min-height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; color: #344a3c; background: #fff; font-size: 12px; }
.advanced-settings summary span { border: 0; color: #61776a; }
.advanced-grid { gap: 12px 10px; }
.advanced-field { color: #3c5143; font-size: 12px; }
.advanced-field small { color: #6c7c71; }
.advanced-field input[type="number"], .advanced-field select { border-color: var(--line); background: #fcfcfb; color: #2b4033; font-size: 16px; }
.number-suffix { border-color: var(--line); }
.number-suffix > span { color: #617268; }
.settings-footer { margin-top: auto; padding-top: 6px; }
.download-button { min-height: 43px; border-color: var(--accent-dark); border-radius: 8px; background: var(--accent); box-shadow: none; }
.download-button:hover:not(:disabled) { background: var(--accent-dark); box-shadow: 0 4px 12px rgba(50,82,58,.16); }
.download-button:disabled { border-color: #b4c2b5; background: #b4c2b5; color: #fff; }
.download-button-label { font-size: 13px; }
.download-button-icon { width: 25px; height: 25px; border-color: rgba(255,255,255,.34); }
.result-summary { margin: 6px 0 0; padding: 0; border: 0; }
.summary-topline { margin-bottom: 0; color: #3f6147; font-size: 11px; }
.saved-pill { padding: 3px 6px; background: var(--accent-soft); color: var(--accent-dark); font-size: 10px; }
.size-comparison { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.download-footnote { margin-top: 7px; color: #718078; font-size: 10px; }
.benefit-row { margin-top: 23px; padding: 20px 4px 14px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid rgba(223,228,221,.9); }
.benefit-row article { min-width: 0; min-height: 46px; padding: 0 20px; display: flex; align-items: center; gap: 14px; }
.benefit-row article:first-child { padding-left: 4px; }
.benefit-row article + article { border-left: 1px solid rgba(223,228,221,.9); }
.benefit-icon { width: 28px; height: 28px; flex: 0 0 auto; color: var(--accent); }
.benefit-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.benefit-row article div { min-width: 0; display: grid; gap: 4px; }
.benefit-row strong { color: #283d30; font-size: 12px; font-weight: 620; }
.benefit-row article div span { color: #718078; font-size: 10px; line-height: 1.35; }
.how-section { padding-top: 35px; }
.how-heading { border-bottom-color: rgba(223,228,221,.9); }
.how-heading h2 { color: #3c5043; font-size: 20px; }
.how-step h3 { color: #3d5144; }
.how-step p { color: #6f7d73; }
.page-footer { border-top-color: rgba(223,228,221,.9); }

@media (min-width: 1440px) {
  .app-shell { width: min(1200px, calc(100% - 96px)); }
  .topbar { height: 57px; }
  .intro { padding-top: 20px; padding-bottom: 15px; }
  h1 { font-size: clamp(44px, 3.6vw, 48px); }
  .workspace { grid-template-columns: minmax(0, 1.42fr) minmax(450px, .98fr); gap: 12px; }
  .preview-panel { padding: 17px 24px 18px; }
  .settings-panel { padding: 18px 20px 14px; }
  .image-stage { height: 246px; min-height: 205px; }
}

@media (max-width: 900px) {
  .app-shell { width: min(760px, calc(100% - 40px)); }
  .workspace { grid-template-columns: minmax(0, 1fr) minmax(325px, .9fr); gap: 12px; }
}

@media (max-width: 700px) {
  .app-shell { width: min(520px, calc(100% - 32px)); }
  .topbar { height: 58px; }
  .intro { padding: 28px 2px 20px; }
  h1 { font-size: clamp(38px, 10vw, 47px); }
  .intro-description { max-width: 44rem; font-size: 15px; }
  .workspace { grid-template-columns: 1fr; gap: 12px; }
  .preview-panel { padding: 16px; }
  .settings-panel { padding: 17px 16px 15px; }
  .dropzone { min-height: 240px; }
  .dropzone.has-image { min-height: 154px; }
  .image-stage { height: min(61vw, 300px); min-height: 210px; }
  .file-meta { flex-wrap: wrap; }
  .file-meta-copy { flex: 1; }
  .view-switch { flex-basis: 100%; margin: 2px 0 0 50px; }
  .view-tab { min-height: 34px; }
  .replace-image-button { min-height: 40px; }
  .remove-button { width: 40px; height: 40px; }
  .format-options { gap: 6px; }
  .format-option { min-height: 44px; }
  .benefit-row { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px 0; padding: 18px 0 12px; }
  .benefit-row article { padding: 0 10px; gap: 10px; }
  .benefit-row article:nth-child(odd) { padding-left: 2px; }
  .benefit-row article:nth-child(3) { border-left: 0; }
  .benefit-icon { width: 24px; height: 24px; }
  .benefit-row strong { font-size: 11px; }
  .benefit-row article div span { font-size: 10px; }
  .how-section { padding-top: 29px; }
}

@media (max-width: 380px) {
  .app-shell { width: calc(100% - 26px); }
  .preview-panel { padding: 14px; }
  .settings-panel { padding-right: 14px; padding-left: 14px; }
  .preset-options { gap: 5px; }
  .preset-card { padding-right: 7px; padding-left: 7px; }
  .preset-detail { font-size: 11px; }
  .dimension-input { padding: 0 6px; gap: 4px; }
  .dimensions-row { grid-template-columns: minmax(0,1fr) 36px minmax(0,1fr); gap: 5px; }
  .aspect-button { width: 36px; }
}

@media (hover: none) and (pointer: coarse) {
  button { min-height: 44px; }
  .replace-image-button, .view-tab, .preset-menu button, .dimension-presets summary { min-height: 44px; }
  .download-button { min-height: 44px; }
  .remove-button { width: 44px; height: 44px; }
  .aspect-button { width: 44px; min-height: 44px; }
  .transform-button { width: 44px; height: 44px; }
  .notice-dismiss { width: 44px; height: 44px; }
}

/* ==========================================================================
   Dedicated Content & Contact Page Styles
   ========================================================================== */
.page-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 30px 0 60px;
}

.page-hero {
  padding: 40px 0 32px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 36px;
}

.page-hero .eyebrow {
  margin-bottom: 12px;
}

.page-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(32px, 4.2vw, 46px);
  line-height: 1.15;
  letter-spacing: -.04em;
  color: var(--ink);
}

.page-hero p.hero-subtitle {
  margin: 0;
  max-width: 680px;
  color: var(--muted-dark);
  font-size: 16px;
  line-height: 1.6;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-dark);
  text-decoration: none;
  font-size: 13px;
  font-weight: 560;
  margin-bottom: 18px;
  transition: transform .18s ease;
}
.back-link:hover {
  transform: translateX(-3px);
}
.back-link svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* Highlight Cards */
.highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}

.highlight-card {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.highlight-card .card-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  margin-bottom: 14px;
}

.highlight-card .card-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.highlight-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 620;
  color: var(--ink);
}

.highlight-card p {
  margin: 0;
  color: var(--muted-dark);
  font-size: 13px;
  line-height: 1.55;
}

/* Contact Grid */
.contact-layout {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 32px;
  align-items: start;
}

.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px;
  box-shadow: var(--shadow);
}

.form-card h2 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 620;
  color: var(--ink);
}

.form-card p.form-desc {
  margin: 0 0 24px;
  color: var(--muted-dark);
  font-size: 14px;
  line-height: 1.5;
}

.contact-form {
  display: grid;
  gap: 18px;
}

.form-group {
  display: grid;
  gap: 7px;
}

.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: #313a2e;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fdfdfc;
  color: var(--ink);
  font-size: 14px;
  transition: border-color .18s ease, box-shadow .18s ease;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(97, 122, 85, .15);
  background: #fff;
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}

.submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 24px;
  border: 1px solid var(--accent-dark);
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease, transform .16s ease, box-shadow .18s ease;
}

.submit-btn:hover {
  background: var(--accent-dark);
  box-shadow: 0 4px 14px rgba(78, 102, 68, .2);
  transform: translateY(-1px);
}

.form-success-banner {
  padding: 14px 16px;
  border-radius: 8px;
  background: #eaf3e6;
  border: 1px solid #c2dab7;
  color: #2e5424;
  font-size: 13px;
  line-height: 1.5;
  display: none;
}

/* Info Sidebar */
.contact-sidebar {
  display: grid;
  gap: 18px;
}

.info-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
  box-shadow: var(--shadow);
}

.info-box h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 620;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 9px;
}

.info-box h3 svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}

.info-box p {
  margin: 0 0 12px;
  color: var(--muted-dark);
  font-size: 13px;
  line-height: 1.6;
}

.info-box a.contact-email-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-dark);
  text-decoration: underline;
  text-decoration-color: #c0cfba;
  text-underline-offset: 3px;
}

/* Policy Content Layout */
.policy-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 40px;
  box-shadow: var(--shadow);
}

.policy-card h2 {
  margin: 32px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 20px;
  font-weight: 620;
  color: var(--ink);
}
.policy-card h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.policy-card p {
  margin: 12px 0;
  color: #434c3f;
  font-size: 15px;
  line-height: 1.8;
}

.policy-card ul {
  margin: 14px 0 20px 20px;
  padding: 0;
  color: #434c3f;
}

.policy-card li {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.65;
}

.policy-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.policy-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 580;
}
.policy-badge svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

@media (max-width: 768px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .form-card, .policy-card {
    padding: 22px;
  }
}

/* ── Social Sharing & Creator Styles ── */
.share-section { margin: 48px 0 24px; }
.share-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 32px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.share-info h2 { margin: 6px 0 8px; font-size: 20px; font-weight: 600; color: var(--ink); }
.share-info p { margin: 0; color: var(--muted-dark); font-size: 13px; line-height: 1.6; max-width: 540px; }
.share-buttons { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.share-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; transition: all .18s ease; }
.share-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-1px); }
.share-btn svg { flex-shrink: 0; }

.footer-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.footer-social { display: inline-flex; align-items: center; gap: 10px; }
.creator-label { font-size: 12px; color: var(--muted-dark); }
.creator-label a { color: var(--ink); text-decoration: none; font-weight: 550; }
.creator-label a:hover { color: var(--accent); }
.social-icon-link { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: rgba(0,0,0,.04); color: var(--ink); text-decoration: none; transition: background .18s, color .18s; }
.social-icon-link:hover { background: var(--accent); color: #fff; }

@media (max-width: 768px) {
  .share-card { flex-direction: column; align-items: flex-start; padding: 20px; }
  .page-footer { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 0; }
}

/* ── Clean Resizer Controls (Matching Reference) ── */
.simple-controls-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 8px 0;
}

.controls-heading h2 {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.dimensions-bracket-row {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
}

.dim-inputs-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.dim-control-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 38px;
}

.dim-control-line label, .field-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  min-width: 50px;
  flex-shrink: 0;
}

.clean-input {
  width: 96px;
  height: 38px;
  padding: 6px 12px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  border: 1px solid #7c889b;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.clean-input:focus {
  border-color: #0066cc;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, .18);
}
.clean-input:disabled {
  opacity: .5;
  background: #f0f2f0;
}

/* ── Dimension Lock Connector & Button ── */
.dim-lock-connector {
  position: relative;
  width: 26px;
  height: 86px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.dim-lock-connector .connector-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 86px;
  overflow: visible;
  pointer-events: none;
}

.dim-lock-connector .connector-path {
  fill: none;
  stroke: #0066cc;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .15s ease, stroke-dasharray .15s ease;
}

.dim-lock-connector.is-unlocked .connector-path {
  stroke: #94a3b8;
  stroke-dasharray: 3 3;
}

.dim-lock-connector:has(.bracket-lock-btn:disabled) .connector-path {
  stroke: #cbd5e1;
  opacity: .6;
}

.bracket-lock-btn {
  position: absolute;
  top: 43px;
  left: 11px;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid #0052a3;
  background: #0066cc;
  color: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  padding: 0;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 3px rgba(0, 102, 204, .25);
}

.bracket-lock-btn:hover:not(:disabled) {
  transform: translate(-50%, -50%) scale(1.08);
}

.bracket-lock-btn.is-unlocked {
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  color: #64748b;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.bracket-lock-btn.is-unlocked:hover:not(:disabled) {
  background: #ffffff;
  border-color: #0066cc;
  color: #0066cc;
}

.bracket-lock-btn:disabled {
  opacity: .5;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #94a3b8;
  cursor: not-allowed;
  box-shadow: none;
}

.bracket-lock-btn svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.unit-dropdown-wrap {
  margin-left: 10px;
  flex-shrink: 0;
}
.unit-select, .clean-select {
  height: 38px;
  padding: 6px 10px;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid #7c889b;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  outline: none;
  appearance: auto;
}
.unit-select:focus, .clean-select:focus {
  border-color: #0066cc;
}
.unit-select:disabled, .clean-select:disabled {
  opacity: .5;
  background: #f0f2f0;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .dimensions-bracket-row {
    flex-wrap: nowrap;
  }
  .dim-control-line label {
    font-size: 13px;
    min-width: 42px;
  }
  .clean-input {
    width: 80px;
    padding: 6px 8px;
    font-size: 14px;
  }
  .unit-select {
    padding: 6px 8px;
    font-size: 13px;
  }
}

.resolution-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.resolution-box {
  display: inline-flex;
  align-items: center;
  border: 1px solid #7c889b;
  border-radius: 8px;
  background: var(--surface);
  padding: 0 10px;
  height: 38px;
}
.resolution-box input {
  width: 52px;
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  background: transparent;
}
.resolution-box input:disabled {
  opacity: .5;
}
.resolution-box span {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-dark);
}

.format-quality-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 10px;
  align-items: start;
}
.fq-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fq-item label, .fq-item .field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.quality-input-box {
  display: inline-flex;
  align-items: center;
  border: 1px solid #7c889b;
  border-radius: 8px;
  background: var(--surface);
  padding: 0 8px;
  height: 38px;
}
.quality-input-box input {
  width: 44px;
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  background: transparent;
}
.quality-input-box input:disabled {
  opacity: .5;
}
.quality-input-box span {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-dark);
}

.bg-swatch-list {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
}
.bg-swatch-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  padding: 0;
}
.bg-swatch-circle:hover:not(:disabled) {
  transform: scale(1.1);
}
.bg-swatch-circle.swatch-white {
  background: #ffffff;
  border-color: #7c889b;
}
.bg-swatch-circle.swatch-black {
  background: #000000;
  border-color: #000000;
}
.bg-swatch-circle.is-active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0066cc;
}
.bg-swatch-circle:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.bg-transparent-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  color: #0066cc;
  background: rgba(0, 102, 204, .08);
  border: 1px solid rgba(0, 102, 204, .2);
  border-radius: 20px;
  padding: 3px 10px;
  height: 24px;
  white-space: nowrap;
}

.rename-control-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rename-control-row label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.rename-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid #7c889b;
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
  height: 40px;
}
.rename-input-wrap input {
  flex: 1;
  border: none;
  outline: none;
  padding: 8px 12px;
  font-size: 14px;
  background: transparent;
  color: var(--ink);
}
.rename-input-wrap .ext-badge {
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted-dark);
  background: rgba(0,0,0,.04);
  height: 100%;
  display: flex;
  align-items: center;
  border-left: 1px solid var(--line);
}

.resize-main-btn {
  width: 100%;
  height: 48px;
  border-radius: 8px;
  background: #0066cc;
  color: #ffffff;
  border: none;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .18s, transform .12s, box-shadow .18s;
  box-shadow: 0 4px 14px rgba(0, 102, 204, .28);
}
.resize-main-btn:hover:not(:disabled) {
  background: #0052a3;
  transform: translateY(-1px);
}
.resize-main-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}

/* ── Compression preset chips ── */
.preset-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.preset-row .field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.preset-chips {
  display: flex;
  gap: 6px;
}
.preset-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid #c0c8d8;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.preset-chip small {
  font-size: 11px;
  font-weight: 500;
  opacity: .65;
}
.preset-chip:hover:not(:disabled) {
  border-color: #0066cc;
  color: #0066cc;
}
.preset-chip.is-active {
  background: #0066cc;
  border-color: #0066cc;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,102,204,.3);
}
.preset-chip.is-active small {
  opacity: .85;
}
.preset-chip:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ── Inline size preview (before Resize button) ── */
.size-preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,102,204,.06);
  border: 1px solid rgba(0,102,204,.15);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.size-preview-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.size-preview-item span {
  font-size: 11px;
  color: var(--muted-dark);
  font-weight: 500;
}
.size-preview-item strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.sp-output-val {
  color: #0066cc !important;
}
.size-preview-arrow {
  display: flex;
  align-items: center;
  color: #8e99a8;
}
.size-preview-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.size-preview-saved {
  font-size: 12px;
  font-weight: 700;
  color: #16a34a;
  white-space: nowrap;
  padding: 2px 8px;
  background: rgba(22,163,74,.1);
  border-radius: 20px;
}