.image-analysis-page *, .image-analysis-page *::before, .image-analysis-page *::after { box-sizing: border-box; }
.image-analysis-page [hidden] { display: none !important; }
.analysis-workspace { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 28px; }
.analysis-workspace > *, .analysis-settings, .analysis-output, .analysis-field { min-width: 0; }
.analysis-settings { border: 0; margin: 0; padding: 0; }
.analysis-settings legend { width: 100%; margin: 0 0 14px; padding: 0; border: 0; font-size: 18px; font-weight: 700; color: #17335d; }
.analysis-field { display: flex; flex-direction: column; gap: 7px; margin: 14px 0; }
.analysis-field label { margin: 0; }
.analysis-drop { display: flex; flex-direction: column; gap: 8px; padding: 22px 14px; text-align: center; border: 2px dashed #b8c7dc; border-radius: 10px; background: #f3f7fc; cursor: pointer; overflow-wrap: anywhere; }
.analysis-drop:hover, .analysis-drop.is-dragover { border-color: #0052cc; background: #eaf2ff; }
.analysis-drop:focus-visible { outline: 3px solid #9bbcea; outline-offset: 3px; }
.analysis-drop[aria-disabled="true"] { opacity: .6; cursor: wait; }
.analysis-actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 15px 0; }
.image-analysis-page .tool-button { max-width: 100%; min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
.image-analysis-page .field-help { color: #526176; font-size: 13px; line-height: 1.8; margin: 12px 0; overflow-wrap: anywhere; }
.analysis-empty { padding: 32px 20px; border: 1px dashed #c8d4e3; border-radius: 10px; text-align: center; color: #526176; }
.analysis-source { max-width: 100%; margin-top: 18px; }
.analysis-preview-frame { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; line-height: 0; background-color: #fff; background-image: linear-gradient(45deg,#e7edf5 25%,transparent 25%),linear-gradient(-45deg,#e7edf5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e7edf5 75%),linear-gradient(-45deg,transparent 75%,#e7edf5 75%); background-size: 16px 16px; background-position: 0 0,0 8px,8px -8px,-8px 0; }
#analysis-source-preview { display: block; width: auto; height: auto; max-width: 100%; max-height: 480px; }
.is-picker #analysis-source-preview { cursor: crosshair; touch-action: none; user-select: none; -webkit-user-drag: none; }
.analysis-pixel-marker { position: absolute; display: block; width: 17px; height: 17px; border: 2px solid white; border-radius: 50%; outline: 1px solid #000; transform: translate(-50%,-50%); pointer-events: none; }
.analysis-group { margin: 0 0 20px; }
.analysis-output h3 { font-size: 18px; line-height: 1.6; margin: 12px 0; color: #17335d; overflow-wrap: anywhere; }
.analysis-data { margin: 0; font-size: 14px; line-height: 1.7; }
.analysis-data-row { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 14px; padding: 10px 12px; border-bottom: 1px solid #dbe4f0; }
.analysis-data-row:nth-child(odd) { background: #f3f7fc; }
.analysis-data-row dt, .analysis-data-row dd { min-width: 0; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.analysis-data-row dt { color: #17335d; }
.analysis-data-row dd { color: #354a65; }
.analysis-warning { padding: 12px; border: 1px solid #e8d28f; background: #fffbeb; border-radius: 8px; color: #854d0e; font-size: 14px; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
.image-analysis-page .tool-message, .image-analysis-page .privacy-note { overflow-wrap: anywhere; }
.analysis-colors { display: grid; grid-template-columns: minmax(0,1fr); gap: 15px; }
.analysis-color-card { min-width: 0; border: 1px solid #dbe4f0; border-radius: 9px; padding: 12px; }
.analysis-color-card h3 { margin-top: 0; }
.analysis-swatch { min-height: 80px; border: 1px solid #c8d4e3; border-radius: 5px; }
.analysis-history { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.analysis-history h3 { flex: 0 0 100%; }
.analysis-history button { font-size: 12px; border-width: 3px; background: #fff; color: #17335d; }
#analysis-magnifier { display: block; width: 220px; height: 220px; max-width: 100%; margin: 16px auto; image-rendering: pixelated; border: 1px solid #c8d4e3; }
#analysis-histogram { display: block; width: 100%; height: auto; aspect-ratio: 8 / 3; margin: 18px 0; border: 1px solid #dbe4f0; border-radius: 6px; }
#analysis-channel-preview { display: block; width: auto; height: auto; max-width: 100%; max-height: 480px; margin: 15px auto; }
#analysis-raw-panel { max-width: 100%; margin-top: 18px; }
#analysis-raw-panel summary { cursor: pointer; line-height: 1.8; color: #17335d; overflow-wrap: anywhere; }
.image-analysis-page #analysis-raw { width: 100%; max-width: 100%; min-height: 220px; max-height: 420px; overflow: auto; white-space: pre; font-size: 12px; }
@media (max-width: 767px) {
    .analysis-workspace { grid-template-columns: minmax(0,1fr); gap: 22px; }
    .image-analysis-page .tool-shell { padding: 16px; }
    .analysis-data-row { grid-template-columns: minmax(0,1fr); gap: 3px; padding: 10px; }
    .analysis-actions .tool-button { flex: 1 1 110px; }
    #analysis-channel-preview, #analysis-source-preview { max-height: 420px; }
}