.icns-extractor-page .primary-nav { gap: 14px; }
.icns-extractor-page .primary-nav .primary-nav-guides { margin-left: auto; }
.extractor-tool { padding: clamp(20px, 3.2vw, 38px); border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(145deg, rgba(17, 38, 54, .98), rgba(8, 20, 32, .98)); box-shadow: var(--shadow); }
.extractor-title-row { margin-bottom: 25px; }
.extractor-title-row h1 { max-width: none; font-size: clamp(31px, 4vw, 46px); letter-spacing: -.045em; }
.extractor-workspace { display: grid; grid-template-columns: minmax(0, .9fr) minmax(330px, 1.1fr); gap: 14px; }
.extractor-workspace > section { min-width: 0; padding: clamp(18px, 2.5vw, 27px); border: 1px solid var(--line); border-radius: 20px; background: rgba(3, 11, 19, .28); }
.icns-extractor-page .icns-drop { min-height: 230px; }
.extractor-result-panel { display: flex; flex-direction: column; }
.selection-hint { max-width: 48ch; margin: -5px 0 14px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.size-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(69px, 1fr)); gap: 7px; min-height: 35px; }
.size-option { position: relative; display: grid; min-width: 0; min-height: 42px; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: rgba(139, 211, 255, .035); color: #c2d2db; cursor: pointer; font: 750 10px/1.15 ui-monospace, SFMono-Regular, Consolas, monospace; transition: border-color .14s ease, background .14s ease, color .14s ease; }
.size-option:hover { border-color: rgba(139, 211, 255, .62); }
.size-option:has(input:checked) { border-color: rgba(185, 243, 109, .65); background: rgba(185, 243, 109, .12); color: var(--accent); }
.size-option:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.size-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.size-option small { margin-top: 3px; color: var(--muted); font: 500 8px/1.1 system-ui, sans-serif; }
.trim-control { display: flex; align-items: flex-start; gap: 11px; margin: 13px 0 15px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(139, 211, 255, .035); cursor: pointer; }
.trim-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.trim-switch { position: relative; flex: 0 0 34px; width: 34px; height: 20px; margin-top: 1px; border: 1px solid #526879; border-radius: 999px; background: #263948; transition: background .14s ease, border-color .14s ease; }
.trim-switch::after { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #b7c9d3; content: ""; transition: transform .14s ease, background .14s ease; }
.trim-control input:checked + .trim-switch { border-color: var(--accent); background: rgba(185, 243, 109, .28); }
.trim-control input:checked + .trim-switch::after { background: var(--accent); transform: translateX(14px); }
.trim-control input:focus-visible + .trim-switch { outline: 2px solid var(--blue); outline-offset: 3px; }
.trim-control input:disabled + .trim-switch { opacity: .45; }
.trim-copy { display: grid; min-width: 0; gap: 4px; }
.trim-copy strong { font-size: 11px; }
.trim-copy small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.extractor-preview { min-height: 112px; }
.extractor-preview .icon-preview-frame { background: repeating-conic-gradient(#263847 0 25%, #142332 0 50%) 50% / 11px 11px; }
.extractor-preview img { object-fit: contain; }
.extractor-result-panel .download-button, .extractor-result-panel .download-placeholder { margin-top: 12px; }
.extractor-details { margin-top: 17px; }
.extractor-details .scope-note { margin-top: 14px !important; padding-left: 11px; border-left: 2px solid var(--blue); font-size: 11px !important; }
.extractor-faq { max-width: 850px; margin: 48px auto 62px; }
.extractor-faq details[open] summary { color: var(--blue); }
.icns-extractor-page .icns-status.is-error { color: var(--danger); }
.icns-extractor-page .icns-status.is-success { color: var(--accent); }
.icns-extractor-page .icns-status.is-working { color: var(--blue); }
@media (max-width: 760px) {
  .icns-extractor-page .primary-nav { justify-content: flex-start; column-gap: 13px; }
  .icns-extractor-page .primary-nav .primary-nav-guides { margin-left: 0; }
  .extractor-workspace, .extractor-details { grid-template-columns: minmax(0, 1fr); }
  .extractor-workspace > section { padding: 17px; }
  .extractor-title-row { align-items: start; flex-direction: column; gap: 10px; margin-bottom: 16px; }
  .extractor-title-row h1 { font-size: clamp(30px, 8vw, 38px); }
  .icns-extractor-page .icns-drop { min-height: 204px; }
  .extractor-faq { margin-top: 38px; }
}
@media (max-width: 480px) {
  .extractor-tool { padding: 16px 12px; border-radius: 20px; }
  .extractor-title-row h1 { font-size: 30px; }
  .extractor-workspace > section { padding: 14px; border-radius: 16px; }
  .icns-extractor-page .icns-drop { min-height: 190px; padding: 18px 12px; }
  .size-options { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .size-option { min-height: 39px; font-size: 9px; }
  .trim-control { gap: 9px; padding: 10px; }
  .trim-copy small { font-size: 9px; }
  .extractor-preview { gap: 11px; padding: 11px; }
  .extractor-preview .icon-preview-frame { flex-basis: 68px; width: 68px; height: 68px; }
}
@media (prefers-reduced-motion: reduce) {
  .size-option, .trim-switch, .trim-switch::after { transition: none; }
}