*{box-sizing:border-box}:root{--gap: 10px;--bg-color: #fff;--text-color: #333;--header-bg: #eee;--border-color: #ccc;--input-border: #ddd;--selected-bg: #d0e0ff;--viewer-bg: #f0f0f0;--placeholder-color: #888;--button-bg: #f0f0f0;--button-text: #333;--link-color: blue;--message-success-bg: #d4edda;--message-success-text: #155724;--message-success-border: #c3e6cb;--message-error-bg: #f8d7da;--message-error-text: #721c24;--message-error-border: #f5c6cb;--metadata-bg: #f8f8f8;--metadata-key-color: #333}body[data-theme=dark]{--bg-color: #222;--text-color: #eee;--header-bg: #333;--border-color: #555;--input-border: #444;--selected-bg: #4a5a7a;--viewer-bg: #404040;--placeholder-color: #aaa;--button-bg: #555;--button-text: #eee;--link-color: #6bb7ff;--message-success-bg: #1f4c29;--message-success-text: #d4edda;--message-success-border: #3a784a;--message-error-bg: #5a2d33;--message-error-text: #f8d7da;--message-error-border: #8b4b53;--metadata-bg: #333;--metadata-key-color: #eee}body{font-family:sans-serif;display:flex;flex-direction:column;height:100vh;margin:0;background-color:var(--bg-color);color:var(--text-color)}header{padding:var(--gap);background-color:var(--header-bg);border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}header h1{margin:0;display:flex;flex-direction:column;gap:2px}.hero-title-clickable{cursor:pointer}.hero-title-clickable:hover{text-decoration:underline}.hero-title em{font-style:italic;color:#e6c23a}.header-tech{font-size:.5em;font-weight:400;opacity:.9;line-height:1.2}.header-about-link{font-size:.9rem;color:var(--link-color);text-decoration:none}.header-about-link:hover{text-decoration:underline}main{display:flex;flex:1;min-height:0;padding:var(--gap);gap:var(--gap);margin-top:var(--gap)}#leftPanel{width:380px;min-height:0;display:flex;flex-direction:column;gap:var(--gap);margin-top:0}#middlePanel{width:300px;display:flex;flex-direction:column;gap:var(--gap);overflow-y:auto}#middlePanel h2{margin:0}#controls{display:flex;flex-direction:column;gap:var(--gap);border:1px solid var(--border-color);padding:var(--gap);background-color:var(--bg-color);margin-bottom:0}#controls h2{margin-top:0;margin-bottom:0}#storedImagesSection{border:1px solid var(--border-color);padding:var(--gap);background-color:var(--bg-color);flex:1 1 0;min-height:0;margin-top:0;display:flex;flex-direction:column;gap:var(--gap)}#storedImagesSection h2{margin-top:0;margin-bottom:0;flex-shrink:0}#fileList{list-style:none;padding:0;margin:0;overflow-y:auto;flex:1 1 0;min-height:0}#fileList li{margin-bottom:var(--gap);word-break:break-all;padding:calc(var(--gap) * .2) calc(var(--gap) * .4);border-radius:3px;cursor:default;color:var(--text-color);display:flex;align-items:center;flex-wrap:wrap;gap:0}#fileList a{text-decoration:none;color:var(--link-color);cursor:pointer}#fileList a:hover{text-decoration:underline}#fileList li.selected-image{background-color:var(--selected-bg)}.library-item-top-bottom{display:inline-flex;flex-direction:column;margin-right:calc(var(--gap) * .5);flex-shrink:0}.library-item-order{display:inline-flex;flex-direction:column;margin-right:var(--gap);flex-shrink:0}.order-btn{padding:0 4px;font-size:.65em;line-height:1.1;min-width:20px}.order-btn.order-top,.order-btn.order-bottom,.order-btn.order-up,.order-btn.order-down{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:none;color:var(--button-text);box-shadow:none;outline:none}.order-btn::-moz-focus-inner{border:none;padding:0}.order-btn:focus{outline:none;box-shadow:none}.order-btn:disabled{opacity:.35;cursor:not-allowed}.library-action-btn{margin-left:5px;font-size:.8em;padding:2px 5px}#imageViewerContainer{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}#imageViewer{position:relative;flex:1;min-width:0;min-height:0;width:100%;border:1px solid var(--border-color);background-color:var(--viewer-bg);display:flex;align-items:center;justify-content:center;overflow:hidden}.image-viewer-content{position:absolute;top:0;left:0;right:0;bottom:0}.region-overlay .region-display{color:var(--text-color)}.region-overlay .palette-swatch-overlay{stroke:var(--border-color)}.region-overlay .palette-swatch-overlay.highlighted{filter:drop-shadow(0 0 8px rgba(255,255,100,.9)) drop-shadow(0 0 16px rgba(255,220,80,.6))}.image-viewer-content img,.image-viewer-content .image-viewer-overlay,.image-viewer-content .region-overlay{position:absolute;top:0;left:0;width:100%;height:100%}.image-viewer-content-fill{overflow-y:auto}.image-viewer-content-fill .image-viewer-inner{position:relative;min-width:100%}.image-viewer-content-fill .image-viewer-inner img{position:relative;width:100%;height:auto;display:block}.image-viewer-content-fill .image-viewer-inner .image-viewer-overlay,.image-viewer-content-fill .image-viewer-inner .region-overlay{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%}.image-viewer-content img{object-fit:contain;object-position:top center}#imageViewer .placeholder{color:var(--placeholder-color)}.image-viewer-overlay{position:absolute;top:0;left:0;right:0;bottom:0}.image-viewer-template-draw-hint{position:absolute;bottom:0;left:0;right:0;margin:0;padding:.5rem .75rem;font-size:.85rem;color:var(--text-color);background:#000000b3;color:#fff;text-align:center;pointer-events:none}.template-draw-overlay{pointer-events:auto;cursor:crosshair}.input-group{margin-bottom:var(--gap)}.input-group label{color:var(--text-color)}.hidden{display:none}#messageArea{margin-top:0;padding:var(--gap);border-radius:5px;text-align:center;min-height:auto;border:1px solid transparent;flex-grow:1;margin-left:var(--gap);line-height:1.5}#messageArea:empty{display:none}.message-success{background-color:var(--message-success-bg);color:var(--message-success-text);border:1px solid var(--message-success-border)}.message-error{background-color:var(--message-error-bg);color:var(--message-error-text);border:1px solid var(--message-error-border)}form{border:1px solid var(--input-border);padding:var(--gap);border-radius:5px;background-color:var(--bg-color)}button{padding:calc(var(--gap) * .8) var(--gap);cursor:pointer;background-color:var(--button-bg);color:var(--button-text);border:1px solid var(--border-color);border-radius:3px}button:hover{opacity:.8}button:disabled{opacity:.6;cursor:not-allowed}input[type=text],input[type=file]{width:95%;padding:calc(var(--gap) * .6);margin-top:calc(var(--gap) * .5);background-color:var(--bg-color);color:var(--text-color);border:1px solid var(--input-border);border-radius:3px}@media (max-width: 768px){main{flex-direction:column;overflow:auto}#leftPanel,#middlePanel,#controls,#storedImagesSection,#imageViewerContainer{width:100%;max-width:none;min-height:300px}#imageViewer{min-height:300px}}#metadataDisplay{border:1px solid var(--border-color);padding:var(--gap);margin-bottom:var(--gap);background-color:var(--metadata-bg);font-size:.85em;color:var(--text-color)}#metadataDisplay h3{margin:0 0 calc(var(--gap) * .5) 0;font-size:1.1em}#metadataDisplay ul{list-style:none;padding:0;margin:0}#metadataDisplay li{margin-bottom:calc(var(--gap) * .3)}#metadataDisplay strong{color:var(--metadata-key-color);min-width:80px;display:inline-block}#metadataDisplay .placeholder{color:var(--placeholder-color);font-style:italic}#metadataDisplay a{color:var(--link-color);overflow-wrap:break-word;word-break:break-all}#themeToggleButton{padding:calc(var(--gap) * .5) var(--gap);font-size:.9em}#palette-display,#paletteDisplay{padding:var(--gap);border:1px solid var(--border-color);background-color:var(--metadata-bg);text-align:center;min-height:60px;display:flex;flex-wrap:wrap;gap:var(--gap);justify-content:center;align-items:center}#palette-display .palette-display-subtitle,#paletteDisplay .palette-display-subtitle{width:100%;margin:0 0 calc(var(--gap) * .5) 0;text-align:left;font-size:.95em;font-weight:600;color:var(--text-color)}.palette-item{display:flex;flex-direction:column;align-items:center;gap:calc(var(--gap) * .4);position:relative}.palette-swatch-wrapper{position:relative;width:30px;height:30px}.palette-swatch,.palette-color{width:30px;height:30px;border-radius:50%;border:1px solid var(--border-color);display:inline-block}.palette-swatch-wrapper .palette-swatch.palette-swatch-filled{background:var(--swatch-color)!important;background-color:var(--swatch-color)!important}.palette-swatch-wrapper .palette-swatch.palette-swatch-sample{background-color:var(--sample-swatch-color)!important}.palette-swatch-wrapper .palette-swatch.palette-swatch-sample.palette-swatch-sample-empty{border-style:dashed;border-color:#aaa}.palette-swatch.highlighted{filter:drop-shadow(0 0 8px rgba(255,255,100,.9)) drop-shadow(0 0 16px rgba(255,220,80,.6))}.swatch-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.85em;font-weight:600;color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.5);pointer-events:none;-webkit-user-select:none;user-select:none}.swatch-label.swatch-label-hidden{opacity:0}.palette-label{font-size:.8em;font-family:ui-monospace,Cascadia Code,Source Code Pro,Menlo,Monaco,Courier New,monospace;color:var(--text-color)}#palette-display .placeholder,#paletteDisplay .placeholder{color:var(--placeholder-color);font-style:italic}.swatch-delete-btn{position:absolute;top:-5px;right:-5px;display:flex;align-items:center;justify-content:center;background-color:#80808099;color:#fff;border:none;border-radius:50%;width:18px;height:14px;font-size:12px;line-height:1;padding:0;cursor:pointer;opacity:.5;transition:opacity .2s ease-in-out,background-color .2s ease-in-out}.palette-item:hover .swatch-delete-btn{opacity:1}.swatch-delete-btn:hover{background-color:#ff0000b3;opacity:1}#paletteNameRow{display:flex;align-items:baseline;gap:var(--gap);margin-bottom:0}#paletteNameRow label{margin:0;font-weight:700;color:var(--text-color);flex-shrink:0}#paletteNameRow input{flex-grow:1;min-width:0;padding:calc(var(--gap) * .6);background-color:var(--bg-color);color:var(--text-color);border:1px solid var(--input-border);border-radius:3px}#paletteMatchSwatchesRow.palette-toggle-row{margin:0 0 calc(var(--gap) * .5) 0;display:flex;align-items:center;gap:calc(var(--gap) * .5)}#paletteMatchSwatchesRow label{display:flex;align-items:center;gap:calc(var(--gap) * .4);cursor:pointer;font-size:.9em;color:var(--text-color)}#paletteMatchSwatchesRow:has(input:disabled){cursor:not-allowed;opacity:.6}#regionDetectionSection{margin:0 0 calc(var(--gap) * .5) 0}#regionDetectionRow{display:flex;align-items:center;gap:var(--gap);margin-bottom:calc(var(--gap) * .5)}#regionParamsRow{display:flex;align-items:center;gap:var(--gap);flex-wrap:wrap;margin-left:0}#regionParamsRow label{font-size:.85em;color:var(--text-color)}#regionParamsRow input{width:4em;padding:calc(var(--gap) * .4);font-size:.9em;background-color:var(--bg-color);color:var(--text-color);border:1px solid var(--input-border);border-radius:3px}#regionDetectionRow label{flex-shrink:0;font-size:.9em;color:var(--text-color)}#regionDetectionRow select{flex:1;min-width:0;padding:calc(var(--gap) * .6);background-color:var(--bg-color);color:var(--text-color);border:1px solid var(--input-border);border-radius:3px;font-size:.9em}#regionDetectionRow button{font-size:.8em;padding:2px 5px;flex-shrink:0}#paletteActionsRow{margin:0}#paletteActionsRow select{width:100%;padding:calc(var(--gap) * .6);background-color:var(--bg-color);color:var(--text-color);border:1px solid var(--input-border);border-radius:3px;font-size:.95em}#paletteNameInput{flex-grow:1;min-width:100px;padding:calc(var(--gap) * .6);background-color:var(--bg-color);color:var(--text-color);border:1px solid var(--input-border);border-radius:3px}#regeneratePaletteButton,#duplicatePaletteButton,#exportPaletteButton{padding:calc(var(--gap) * .6) var(--gap);font-size:.9em;flex-shrink:0}.test-placeholder-swatch{border:1px dotted var(--placeholder-color)!important;position:relative}.test-placeholder-swatch:before{content:"+";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:20px;font-weight:700;color:var(--placeholder-color);line-height:1;pointer-events:none;transition:opacity .1s linear;opacity:1}.test-placeholder-swatch.sampling{border-style:solid;border-color:#000}.test-placeholder-swatch.sampling:before{opacity:0}span.test-placeholder-label{color:transparent!important}body.sampling-active,body.sampling-active #imageViewer,body.sampling-active #imageViewer img{cursor:crosshair}.source-input-row{display:flex;align-items:center;gap:var(--gap);margin-top:var(--gap);margin-bottom:0;flex-wrap:nowrap}.source-input-row #urlInputGroup,.source-input-row #fileInputGroup{display:flex;flex-direction:column;gap:calc(var(--gap) * .5);min-width:0;flex-shrink:1}.source-input-row #urlInputGroup.hidden,.source-input-row #fileInputGroup.hidden{display:none!important}.source-input-row #urlInputGroup input[type=text]{width:20em;max-width:100%;margin-top:0}.source-input-row #fileInputGroup input[type=file]{width:12em;margin-top:0}.source-input-row>button{flex-shrink:0;font-size:.8em;padding:2px 5px}.form-actions{display:flex;align-items:center;margin-top:var(--gap)}.form-actions>button{font-size:.8em;padding:2px 5px}