.resize-page{max-width:900px}.resize-intro{max-width:680px;margin:0 auto 1.5rem;text-align:center;color:var(--text-subtle)}.source-preview{display:grid;grid-template-columns:minmax(150px,240px) 1fr;gap:1rem;align-items:center;margin-top:1rem;padding:1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.source-preview img{display:block;width:100%;height:180px;object-fit:contain;border-radius:12px;background:#fff}.preview-kicker{margin:0 0 .25rem;color:var(--success);font-weight:700}.preview-name{margin:.15rem 0;font-size:1.05rem;font-weight:700;overflow-wrap:anywhere}.file-details{margin:.25rem 0;color:var(--text-subtle)}.resize-options{margin-top:1rem;padding:clamp(18px,3.5vw,26px);background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow)}.need-picker{border:0;padding:0;margin:0}.need-picker legend{margin-bottom:.8rem;font-weight:800}.need-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.65rem}.need-card{min-height:118px;padding:.75rem .55rem;color:var(--text);background:var(--surface-strong);border:1px solid var(--border);border-radius:14px;cursor:pointer;text-align:center}.need-card span,.need-card strong,.need-card small{display:block}.need-card span{font-size:1.45rem}.need-card strong{margin:.35rem 0 .15rem}.need-card small{color:var(--text-subtle);line-height:1.25}.need-card:hover,.need-card:focus-visible{border-color:var(--brand);box-shadow:var(--outline)}.need-card.is-selected{border-color:var(--success);background:color-mix(in srgb,var(--success) 13%,var(--surface-strong));box-shadow:0 0 0 2px color-mix(in srgb,var(--success) 25%,transparent)}.preset-area,.custom-area{margin-top:1.15rem;padding:1rem;background:color-mix(in srgb,var(--surface-strong) 88%,transparent);border:1px solid var(--border);border-radius:14px}.preset-area>label{display:block;margin-bottom:.45rem;font-weight:700}.recommendation-card{margin-top:1rem;padding:1rem;background:color-mix(in srgb,var(--surface-strong) 88%,transparent);border:1px solid var(--border);border-radius:14px}.recommendation-topline{display:flex;align-items:center;justify-content:space-between;gap:1rem}.recommendation-topline h3{margin:.35rem 0 0}.preset-badge{display:inline-block;padding:.25rem .55rem;border-radius:999px;background:color-mix(in srgb,var(--brand) 20%,var(--surface-strong));color:var(--text);font-size:.78rem;font-weight:700}.preset-shape{display:none!important}.recommendation-description{margin:.9rem 0}.recommendation-columns{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.recommendation-columns ul{margin:.45rem 0 0;padding-left:1.25rem}.recommendation-columns li{margin:.3rem 0}.resize-note{margin:.65rem 0 0;color:var(--text-subtle);font-size:.92rem}.custom-mode{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:.8rem}.dimension-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.dimension-grid label{font-weight:700}.dimension-grid input[type=number]{width:100%;margin-top:.35rem;padding:.7rem;border:1px solid var(--border);border-radius:10px;background:var(--surface-strong);color:var(--text)}#percentField input[type=range]{width:min(420px,75%)}.lock-row{display:block;margin-top:.8rem}.resize-summary{display:grid;grid-template-columns:1fr 1fr auto 1fr;gap:1rem;align-items:center;margin-top:1.15rem;padding:1rem;border:1px solid var(--border);border-radius:14px;text-align:center}.resize-summary span,.resize-summary strong{display:block}.resize-summary span{color:var(--text-subtle);font-size:.9rem}.resize-summary strong{margin-top:.2rem;font-size:1.2rem}.summary-arrow{font-size:1.35rem;color:var(--success)}.privacy-badge{margin:1rem auto 0;text-align:center;color:var(--success);font-weight:700}.resize-result-preview{display:block;width:100%;max-height:430px;object-fit:contain;margin:1rem auto;border-radius:14px;background:#fff}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:1rem 0}.result-stats div{padding:.75rem;background:var(--surface-strong);border-radius:12px;text-align:center}.result-stats span,.result-stats strong{display:block}.result-stats span{font-size:.85rem;color:var(--text-subtle)}@media(max-width:760px){.need-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.need-card:last-child{grid-column:1/-1}.source-preview{grid-template-columns:1fr;text-align:center}.source-preview img{height:220px}.dimension-grid{grid-template-columns:1fr}.result-stats{grid-template-columns:1fr}.resize-summary{grid-template-columns:1fr 1fr}.summary-arrow{display:none}.recommendation-columns{grid-template-columns:1fr}}@media(max-width:430px){.need-card{min-height:105px;padding:.6rem .4rem}.need-card small{font-size:.75rem}.resize-summary strong{font-size:1rem}.recommendation-topline{align-items:flex-start}}

/* Resize component theme boundary
   The site canvas stays dark in light system mode, so Resize owns its panel
   and text colors instead of mixing the global light surfaces with home-page
   dark-theme text. */
.resize-page {
  --resize-panel: rgba(15, 21, 48, .92);
  --resize-panel-strong: #141b3a;
  --resize-text: #f5f8ff;
  --resize-muted: #bdc9e1;
  --resize-border: rgba(111, 155, 255, .28);
  --resize-accent: #7bf9c8;
  --resize-badge-bg: rgba(79, 140, 255, .18);
  --resize-badge-text: #dce7ff;
  --resize-warning: #ffd66b;
}

.resize-page .source-preview,
.resize-page .resize-options {
  color: var(--resize-text);
  background: var(--resize-panel);
  border: 1px solid var(--resize-border);
}

.resize-page .need-card,
.resize-page .preset-area,
.resize-page .custom-area,
.resize-page .recommendation-card,
.resize-page .resize-summary,
.resize-page .result-stats div {
  color: var(--resize-text);
  background: var(--resize-panel-strong);
  border-color: var(--resize-border);
}

.resize-page .need-card.is-selected {
  color: var(--resize-text);
  background: color-mix(in srgb, var(--resize-accent) 14%, var(--resize-panel-strong));
  border-color: var(--resize-accent);
}

.resize-page .preview-name,
.resize-page .need-picker legend,
.resize-page .need-card strong,
.resize-page .preset-area > label,
.resize-page .recommendation-topline h3,
.resize-page .recommendation-columns strong,
.resize-page .custom-area label,
.resize-page .resize-summary strong,
.resize-page .result-stats strong {
  color: var(--resize-text);
}

.resize-page .file-details,
.resize-page .need-card small,
.resize-page .recommendation-description,
.resize-page .recommendation-columns li,
.resize-page .resize-note,
.resize-page .resize-summary span,
.resize-page .result-stats span,
.resize-page .aspect-notice span,
.resize-page .aspect-notice small {
  color: var(--resize-muted);
}

.resize-page .preview-kicker,
.resize-page .summary-arrow,
.resize-page .aspect-notice.aspect-preserved strong {
  color: var(--resize-accent);
}

.resize-page .aspect-notice.aspect-changed strong {
  color: var(--resize-warning);
}

.resize-page .preset-badge {
  color: var(--resize-badge-text);
  background: var(--resize-badge-bg);
}

.resize-page select,
.resize-page .dimension-grid input[type="number"] {
  color: var(--resize-text);
  background: var(--resize-panel-strong);
  border-color: var(--resize-border);
}

.resize-page .resize-options .btn.secondary:not([disabled]) {
  color: var(--resize-text);
  background: var(--resize-panel-strong);
  border-color: var(--resize-border);
}

@media (prefers-color-scheme: light) {
  .resize-page {
    --resize-panel: #f7f9ff;
    --resize-panel-strong: #e9eef9;
    --resize-text: #10172b;
    --resize-muted: #46536f;
    --resize-border: rgba(23, 68, 141, .26);
    --resize-accent: #08775d;
    --resize-badge-bg: rgba(48, 92, 196, .14);
    --resize-badge-text: #1b3776;
    --resize-warning: #805400;
  }
}