@scope (.image-file-size-increaser-tool) {
    .image-size-grower,
    .image-size-grower *,
    .image-size-grower *::before,
    .image-size-grower *::after { box-sizing: border-box; }

    .image-size-grower {
      --gray-50:#fbfbfb;
      --gray-100:#f7f7f7;
      --gray-150:#f2f2f2;
      --gray-200:#eeeeee;
      --gray-300:#dddddd;
      --gray-400:#bbbbbb;
      --gray-500:#999999;
      --gray-600:#666666;
      --gray-700:#444444;
      --gray-800:#222222;
      --gray-900:#111111;
      --success:#276749;
      --danger:#a12424;
      --warning:#8a5a00;
      --radius:6px;
      --radius-sm:4px;
      --font-sans:"Noto Sans SC",system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
      --font-mono:"Noto Sans Mono","SFMono-Regular",Consolas,Monaco,monospace;
      min-height:100vh;
      padding:24px 30px 48px;
      background:#fff;
      color:var(--gray-900);
      font:15px/1.7 var(--font-sans);
    }

    .image-size-grower h1,
    .image-size-grower h2,
    .image-size-grower h3,
    .image-size-grower p { margin-top:0; }

    .image-size-grower h1 {
      margin-bottom:4px;
      font-size:30px;
      line-height:1.2;
      letter-spacing:-.5px;
    }

    .image-size-grower h2 {
      margin:32px 0 16px;
      padding-left:12px;
      border-left:3px solid var(--gray-900);
      font-size:24px;
      line-height:1.3;
    }

    .image-size-grower h3 { margin-bottom:8px; font-size:18px; line-height:1.4; }
    .page-intro { margin-bottom:16px; color:var(--gray-600); }
    .top-divider { height:1px; margin:16px 0 24px; background:var(--gray-300); }

    .card {
      margin-bottom:16px;
      padding:16px 24px;
      border:1px solid var(--gray-300);
      border-radius:var(--radius);
      background:var(--gray-100);
    }

    .notice {
      display:grid;
      grid-template-columns:auto minmax(0,1fr);
      gap:10px;
      align-items:start;
      margin-bottom:16px;
      padding:12px 14px;
      border:1px solid var(--gray-300);
      border-radius:var(--radius);
      background:#fff;
    }

    .notice strong { font-weight:700; }
    .notice-icon {
      display:grid;
      place-items:center;
      width:24px;
      height:24px;
      border-radius:999px;
      background:var(--gray-900);
      color:#fff;
      font:700 13px/1 var(--font-sans);
    }

    .ifsi-workspace {
      display:grid;
      grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
      gap:16px;
      align-items:start;
    }

    .drop-zone {
      min-height:238px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:28px;
      border:1px dashed var(--gray-500);
      border-radius:var(--radius);
      background:#fff;
      text-align:center;
      cursor:pointer;
      transition:background .15s ease,border-color .15s ease;
    }

    .drop-zone:hover,
    .drop-zone.is-dragover { background:var(--gray-150); border-color:var(--gray-900); }
    .drop-zone:focus-visible { outline:2px solid var(--gray-900); outline-offset:2px; }
    .drop-icon { font-size:34px; line-height:1; }
    .drop-title { margin:0; font-size:18px; font-weight:700; }
    .drop-help { margin:0; color:var(--gray-600); }

    .button-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
    .btn {
      min-height:40px;
      min-width:80px;
      padding:0 16px;
      border:1px solid var(--gray-300);
      border-radius:var(--radius);
      background:#fff;
      color:var(--gray-900);
      font:600 14px/1 var(--font-sans);
      cursor:pointer;
      white-space:nowrap;
    }
    .btn:hover { background:var(--gray-200); border-color:var(--gray-400); }
    .btn:active { transform:translateY(1px); }
    .btn:focus-visible { outline:2px solid var(--gray-900); outline-offset:2px; }
    .btn:disabled { cursor:not-allowed; background:var(--gray-200); color:var(--gray-500); transform:none; }
    .btn-primary { border-color:var(--gray-900); background:var(--gray-900); color:#fff; }
    .btn-primary:hover { background:var(--gray-800); }
    .btn-danger { color:var(--danger); }
    .btn-small { min-height:34px; min-width:0; padding:0 10px; font-size:13px; }

    .settings-title { margin-bottom:12px; font-weight:700; }
    .segmented {
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:1px;
      margin-bottom:16px;
      padding:1px;
      border:1px solid var(--gray-300);
      border-radius:var(--radius);
      background:var(--gray-300);
    }
    .segmented button {
      min-height:42px;
      padding:7px 10px;
      border:0;
      background:#fff;
      color:var(--gray-700);
      font:600 13px/1.35 var(--font-sans);
      cursor:pointer;
    }
    .segmented button:first-child { border-radius:5px 0 0 5px; }
    .segmented button:last-child { border-radius:0 5px 5px 0; }
    .segmented button[aria-pressed="true"] { background:var(--gray-900); color:#fff; }
    .segmented button:focus-visible { outline:2px solid var(--gray-900); outline-offset:2px; z-index:1; }

    .field-grid { display:grid; grid-template-columns:minmax(0,1fr) 132px; gap:8px; }
    .field label { display:block; margin-bottom:4px; color:var(--gray-700); font-size:13px; font-weight:700; }
    .input,
    .select {
      width:100%;
      height:44px;
      padding:0 12px;
      border:1px solid var(--gray-300);
      border-radius:var(--radius);
      background:#fff;
      color:var(--gray-900);
      font:15px/1 var(--font-mono);
    }
    .select { font-family:var(--font-sans); }
    .input:focus,
    .select:focus { border-color:var(--gray-900); outline:2px solid var(--gray-900); outline-offset:2px; }
    .field-help { margin:8px 0 0; color:var(--gray-600); font-size:13px; }

    .naming-block {
      margin-top:16px;
      padding-top:16px;
      border-top:1px solid var(--gray-300);
    }
    .naming-head {
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:12px;
    }
    .naming-head .field { flex:1 1 auto; min-width:0; }
    .filename-preview {
      display:flex;
      align-items:center;
      gap:10px;
      margin-top:10px;
      padding:9px 12px;
      border:1px solid var(--gray-300);
      border-radius:var(--radius);
      background:#fff;
      min-width:0;
    }
    .filename-preview span { flex:0 0 auto; color:var(--gray-600); font-size:12px; }
    .filename-preview strong {
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      font:700 13px/1.5 var(--font-mono);
    }

    .summary-strip {
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:8px;
      margin-bottom:12px;
    }
    .summary-item { padding:10px 12px; border:1px solid var(--gray-300); border-radius:var(--radius); background:#fff; }
    .summary-label { display:block; color:var(--gray-600); font-size:12px; }
    .summary-value { display:block; margin-top:2px; font:700 16px/1.4 var(--font-mono); overflow-wrap:anywhere; }

    .queue-empty {
      padding:32px 16px;
      border:1px solid var(--gray-300);
      border-radius:var(--radius);
      background:#fff;
      color:var(--gray-600);
      text-align:center;
    }

    .queue-list { display:grid; gap:8px; }
    .file-row {
      display:grid;
      grid-template-columns:64px minmax(150px,1.6fr) minmax(120px,.7fr) minmax(140px,.8fr) auto;
      gap:12px;
      align-items:center;
      padding:10px;
      border:1px solid var(--gray-300);
      border-radius:var(--radius);
      background:#fff;
    }
    .thumb {
      width:64px;
      height:54px;
      object-fit:cover;
      border:1px solid var(--gray-300);
      border-radius:var(--radius-sm);
      background:var(--gray-100);
    }
    .file-name { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
    .file-meta { margin:2px 0 0; color:var(--gray-600); font:12px/1.5 var(--font-mono); }
    .size-pair { font-family:var(--font-mono); }
    .size-pair strong { display:block; font-size:14px; }
    .size-pair span { display:block; color:var(--gray-600); font-size:12px; }
    .status-text { color:var(--gray-600); font-size:13px; }
    .status-text.success { color:var(--success); }
    .status-text.error { color:var(--danger); }
    .status-text.warning { color:var(--warning); }
    .row-actions { display:flex; gap:6px; justify-content:flex-end; }

    .progress-wrap { margin-top:12px; }
    .progress-bar { height:8px; overflow:hidden; border-radius:999px; background:var(--gray-200); }
    .progress-bar span { display:block; width:0; height:100%; background:var(--gray-900); transition:width .15s ease; }
    .status-line { min-height:22px; margin:8px 0 0; color:var(--gray-600); }

    .structure-demo {
      display:grid;
      grid-template-columns:1fr auto 1fr;
      gap:16px;
      align-items:center;
    }
    .file-structure { padding:16px; border:1px solid var(--gray-300); border-radius:var(--radius); background:#fff; }
    .structure-label { display:flex; justify-content:space-between; gap:12px; margin-bottom:10px; font-weight:700; }
    .structure-bar { display:flex; height:42px; overflow:hidden; border:1px solid var(--gray-900); border-radius:var(--radius-sm); }
    .pixel-data { display:grid; place-items:center; min-width:34%; flex:1 1 auto; background:var(--gray-900); color:#fff; font-size:13px; }
    .metadata { display:grid; place-items:center; width:14%; min-width:48px; background:var(--gray-300); color:var(--gray-800); font-size:12px; }
    .padding-data { display:grid; place-items:center; width:44%; min-width:90px; border-left:1px solid var(--gray-900); background:repeating-linear-gradient(135deg,#fff,#fff 8px,var(--gray-150) 8px,var(--gray-150) 16px); color:var(--gray-800); font-size:12px; }
    .arrow { font-size:28px; font-weight:700; }
    .structure-note { margin:10px 0 0; color:var(--gray-600); font-size:13px; }

    .steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
    .step { padding:16px; border:1px solid var(--gray-300); border-radius:var(--radius); background:#fff; }
    .step-num { display:grid; place-items:center; width:30px; height:30px; margin-bottom:10px; border-radius:999px; background:var(--gray-900); color:#fff; font:700 14px/1 var(--font-mono); }
    .step p { margin-bottom:0; color:var(--gray-600); }

    .case-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
    .case { padding:16px; border:1px solid var(--gray-300); border-radius:var(--radius); background:#fff; }
    .case p { margin-bottom:12px; color:var(--gray-600); }
    .case dl { display:grid; grid-template-columns:auto 1fr; gap:6px 12px; margin:0; }
    .case dt { color:var(--gray-600); }
    .case dd { margin:0; font-family:var(--font-mono); text-align:right; }

    details.acc { border-bottom:1px solid var(--gray-300); }
    details.acc:last-child { border-bottom:0; }
    details.acc summary {
      min-height:48px;
      display:flex;
      align-items:center;
      gap:12px;
      cursor:pointer;
      list-style:none;
      font-size:16px;
      font-weight:700;
    }
    details.acc summary::-webkit-details-marker { display:none; }
    details.acc summary::after { content:"+"; margin-left:auto; color:var(--gray-600); font-size:20px; }
    details.acc[open] summary::after { content:"−"; }
    details.acc[open] summary { border-bottom:1px solid var(--gray-300); }
    .acc-panel { padding:12px 0 16px; }
    .acc-panel p:last-child,
    .acc-panel ul:last-child { margin-bottom:0; }

    .related-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
    .related-card { padding:14px; border:1px dashed var(--gray-400); border-radius:var(--radius); background:#fff; }
    .related-card strong { display:block; }
    .related-card span { color:var(--gray-600); font-size:13px; }

    .visually-hidden {
      position:absolute!important;
      width:1px!important;
      height:1px!important;
      padding:0!important;
      margin:-1px!important;
      overflow:hidden!important;
      clip:rect(0,0,0,0)!important;
      white-space:nowrap!important;
      border:0!important;
    }

    @media (max-width:900px) {
      .image-size-grower { padding:16px 8px 40px; }
      .ifsi-workspace { grid-template-columns:1fr; }
      .file-row { grid-template-columns:56px minmax(0,1fr) auto; }
      .thumb { width:56px; height:50px; }
      .file-row .size-pair,
      .file-row .status-text { grid-column:2 / 4; }
      .row-actions { grid-column:3; grid-row:1; }
      .structure-demo { grid-template-columns:1fr; }
      .arrow { transform:rotate(90deg); text-align:center; }
      .related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    }

    @media (max-width:720px) {
      .card { padding:14px 12px; }
      .summary-strip,
      .steps,
      .case-grid { grid-template-columns:1fr; }
      .field-grid { grid-template-columns:minmax(0,1fr) 118px; }
      .summary-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .segmented { grid-template-columns:1fr; }
      .segmented button:first-child,
      .segmented button:last-child { border-radius:0; }
      .segmented button:first-child { border-radius:5px 5px 0 0; }
      .segmented button:last-child { border-radius:0 0 5px 5px; }
    }

    @media (max-width:430px) {
      .image-size-grower h1 { font-size:27px; }
      .field-grid,
      .related-grid { grid-template-columns:1fr; }
      .button-row .btn { flex:1 1 100%; }
      .naming-head { align-items:stretch; flex-direction:column; }
      .naming-head .btn { width:100%; }
      .file-row { grid-template-columns:50px minmax(0,1fr); }
      .row-actions { grid-column:1 / 3; grid-row:auto; justify-content:stretch; }
      .row-actions .btn { flex:1; }
      .file-row .size-pair,
      .file-row .status-text { grid-column:1 / 3; }
      .thumb { width:50px; height:46px; }
    }

    @media (prefers-reduced-motion:reduce) {
      .image-size-grower *,
      .image-size-grower *::before,
      .image-size-grower *::after { transition-duration:.01ms!important; animation-duration:.01ms!important; }
    }
}