.description{font-style:italic;color:var(--text-muted);margin-bottom:1.5em;text-align:center;font-size:1.1em}@media (min-width: 1024px){.main-layout-container{display:flex;gap:25px;align-items:flex-start}.main-column.column-left{flex:3;min-width:0}.main-column.column-right{flex:2;min-width:0;display:flex;flex-direction:column;gap:2em}.main-column section{margin-bottom:0}}section{margin-bottom:2em;background-color:var(--card-bg);padding:20px;border-radius:var(--border-radius);border:1px solid var(--border-color);box-shadow:var(--box-shadow-sm)}section h2{font-size:1.4em;border-bottom:1px solid var(--border-color);padding-bottom:.3em;margin-top:0;margin-bottom:.75em;color:var(--gray-800)}#color-selection-tabs h2{border-bottom:none;margin-bottom:.2em;padding-bottom:0;margin-top:0}.tab-navigation{display:flex;margin-bottom:0;border-bottom:2px solid var(--primary)}.tab-button{padding:10px 15px;cursor:pointer;border:none;border-bottom:2px solid transparent;background-color:transparent;color:var(--primary);font-size:1em;margin-right:5px;border-radius:var(--border-radius-sm) var(--border-radius-sm) 0 0;position:relative;bottom:-2px;transition:background-color .2s,color .2s,border-color .2s}.tab-button:hover{background-color:var(--gray-200);color:var(--primary-dark);border-color:transparent}.tab-button.active{background-color:var(--primary);color:#fff;border-color:var(--primary);font-weight:700}.tab-button.active:hover{background-color:var(--primary-dark)}.tab-content{display:none;padding:20px;border:1px solid var(--border-color);border-top:none;border-radius:0 0 var(--border-radius-sm) var(--border-radius-sm);background-color:var(--card-bg)}.tab-content.active{display:block}#select-color-tab .selection-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}#select-color-tab .method{padding:15px;border:1px solid var(--gray-200);border-radius:var(--border-radius-sm);background-color:var(--card-bg)}input[type=color]{width:50px;height:38px;padding:2px;vertical-align:middle;cursor:pointer;border-radius:var(--border-radius-sm);border:1px solid var(--input-border-color)}input[type=range]{width:120px;vertical-align:middle;margin:0 5px;accent-color:var(--primary)}.rgb-sliders .slider-group{display:flex;align-items:center;margin-bottom:8px}.rgb-sliders .slider-group label{width:20px;margin-bottom:0;font-weight:400;font-size:.9em}.rgb-sliders .slider-value{min-width:30px;text-align:right;font-size:.9em;margin-left:5px;font-family:monospace}.palette .palette-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(30px,1fr));gap:5px;margin-top:10px}.palette-grid p.empty-palette{grid-column:1 / -1;text-align:center;color:var(--text-muted);font-style:italic;padding:10px 0}.palette-swatch{width:30px;height:30px;border:1px solid var(--gray-400);cursor:pointer;border-radius:3px;transition:transform .1s ease,border-color .1s ease;padding:0}.palette-swatch:hover,.palette-swatch:focus-visible{transform:scale(1.1);border-color:var(--gray-800);outline:none}#import-screenshot-tab>p:first-of-type{margin-bottom:15px;text-align:center;font-style:italic;color:var(--text-muted)}#image-drop-zone{border:2px dashed var(--primary);padding:30px 20px;text-align:center;cursor:pointer;background-color:var(--gray-100);border-radius:var(--border-radius-sm);margin-bottom:20px;transition:background-color .2s,border-color .2s}#image-drop-zone:hover,#image-drop-zone:focus{background-color:var(--gray-200);border-color:var(--primary-dark);outline:none}#image-upload-input{display:none}.image-upload-label{font-weight:700;color:var(--primary-dark);font-size:1.1em;display:block;cursor:pointer}#image-preview-area{margin-bottom:15px;padding:10px;border:1px solid var(--gray-200);border-radius:var(--border-radius-sm)}#image-controls{margin-bottom:15px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}#image-controls button{background-color:var(--gray-600);color:#fff;border-color:var(--gray-600);font-size:.85em}#image-controls button:hover{background-color:var(--gray-700);border-color:var(--gray-700)}#image-controls button.active{background-color:#17a2b8;box-shadow:0 0 0 .2rem #17a2b880;color:#fff;border-color:#17a2b8}#clear-screenshot-image{background-color:var(--danger);border-color:var(--danger)}#clear-screenshot-image:hover{background-color:#d63e60;border-color:#d63e60}#image-display-container{position:relative;max-width:100%;width:fit-content;margin:0 auto 15px;border:1px solid var(--gray-400);background-color:var(--gray-100)}#image-canvas-display{display:block;max-width:100%;height:auto;cursor:default}#image-canvas-display.eyedropper-active{cursor:crosshair!important}#magnifier-canvas{position:absolute;width:100px;height:100px;border:2px solid #000;pointer-events:none;display:none;background-color:#fff;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;border-radius:50%;box-shadow:0 0 10px #00000080;z-index:1001}#picked-image-color-display{margin-top:10px;padding:8px 12px;background-color:var(--gray-200);border:1px solid var(--gray-300);border-radius:var(--border-radius-sm);text-align:center;font-size:.9em;display:flex;align-items:center;justify-content:center;gap:8px}#picked-image-color-swatch{display:inline-block;width:20px;height:20px;border:1px solid var(--gray-600);vertical-align:middle;border-radius:3px;box-shadow:0 0 2px #0003}#picked-image-color-hex{font-family:monospace;font-weight:700}#extracted-colors-palette{margin-top:20px}#extracted-colors-palette .palette-grid{min-height:35px;border:1px solid var(--gray-200);padding:10px;background-color:var(--card-bg)}#extracted-colors-palette label{margin-bottom:.5em;font-weight:700}@media (min-width: 769px){#extracted-colors-grid{grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:8px}#extracted-colors-grid .palette-swatch{width:40px;height:40px}}.copy-button{padding:5px 8px;font-size:.8em;margin-left:5px;background-color:var(--gray-600);color:#fff;border-color:var(--gray-600)}.copy-button:hover{background-color:var(--gray-700);border-color:var(--gray-700)}#color-output .output-container{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap}#selected-color-swatch{width:100px;height:100px;border:1px solid var(--gray-400);border-radius:var(--border-radius-sm);background-color:#fff;flex-shrink:0;box-shadow:var(--box-shadow-sm)}#color-output .formats{flex-grow:1;display:grid;gap:10px}#color-output .format-entry{display:flex;align-items:center;gap:10px}#color-output .format-entry label{width:100px;text-align:right;margin-bottom:0;font-weight:400}#color-output .format-entry input[type=text]{flex-grow:1;font-family:monospace;font-size:1em;background-color:var(--gray-200);cursor:text;width:auto}#color-bank .bank-controls{margin-bottom:15px;display:flex;gap:10px;flex-wrap:wrap}#color-bank .bank-controls button{background-color:var(--primary);color:#fff;border-color:var(--primary-dark)}#color-bank .bank-controls button:hover{background-color:var(--primary-dark);border-color:var(--primary-dark)}#saved-colors-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.saved-color-entry{border:1px solid var(--gray-200);border-radius:var(--border-radius-sm);padding:8px;background-color:var(--card-bg);display:flex;flex-direction:column;gap:5px;transition:box-shadow .2s ease}.saved-color-entry:hover{box-shadow:var(--box-shadow)}.saved-color-entry .swatch-name{display:flex;align-items:center;gap:8px;margin-bottom:5px}.saved-color-swatch{width:30px;height:30px;border:1px solid var(--gray-400);cursor:pointer;border-radius:3px;flex-shrink:0}.saved-color-name{flex-grow:1;font-size:.9em;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;padding:5px;border-bottom:1px dashed transparent}.saved-color-name:hover{border-bottom:1px dashed var(--primary)}.details-actions-line{display:flex;justify-content:space-between;align-items:center;margin-top:4px}.saved-color-hex{font-family:monospace;font-size:.85em;color:var(--text-color);text-align:left;flex-grow:1;flex-shrink:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:5px}.saved-color-actions{display:flex;gap:5px;margin-top:0;flex-shrink:0}.saved-color-actions .icon-button{background-color:transparent;border:none;padding:2px;font-size:1.1em;line-height:1;width:auto;height:auto;cursor:pointer;color:var(--text-muted);border-radius:3px;transition:color .2s ease,background-color .2s ease;display:inline-flex;align-items:center;justify-content:center}.save-here-button.icon-button{color:var(--success)}.clear-slot-button.icon-button{color:var(--danger)}.saved-color-actions .icon-button:hover,.saved-color-actions .icon-button:focus-visible{color:var(--gray-800);background-color:#0000000d;outline:none}.clear-slot-button.icon-button:disabled{color:var(--gray-500);background-color:transparent;cursor:not-allowed;opacity:.6}dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:25px;box-shadow:var(--box-shadow-lg);min-width:320px;width:auto;max-width:calc(100vw - 40px);max-height:calc(100vh - 40px);overflow-y:auto;z-index:2000;background-color:var(--card-bg);color:var(--text-color)}dialog::backdrop{background-color:#0009;backdrop-filter:blur(3px)}dialog p{margin-bottom:15px;line-height:1.5}dialog input[type=text]{width:100%;margin-bottom:20px;padding:10px}.dialog-buttons{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.dialog-buttons button{padding:8px 18px}.dialog-buttons button#confirm-ok-button,.dialog-buttons button#prompt-ok-button,.dialog-buttons button#alert-ok-button{background-color:var(--primary);color:#fff;border-color:var(--primary-dark)}.dialog-buttons button#confirm-ok-button:hover,.dialog-buttons button#prompt-ok-button:hover,.dialog-buttons button#alert-ok-button:hover{background-color:var(--primary-dark)}.dialog-buttons button#confirm-cancel-button,.dialog-buttons button#prompt-cancel-button{background-color:var(--gray-200);color:var(--gray-700)}.dialog-buttons button#confirm-cancel-button:hover,.dialog-buttons button#prompt-cancel-button:hover{background-color:var(--gray-300)}@media (max-width: 1023px){#saved-colors-grid{grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px}.saved-color-entry{padding:6px}.saved-color-hex{font-size:.8em}.saved-color-actions .icon-button{font-size:1em}}@media (max-width: 768px){.tab-navigation{overflow-x:auto;white-space:nowrap}.tab-button{font-size:.9em;padding:8px 12px}#select-color-tab .selection-methods{grid-template-columns:1fr}#color-output .output-container{flex-direction:column;align-items:center}#color-output .format-entry{flex-direction:column;align-items:stretch;gap:5px}#color-output .format-entry label{width:auto;text-align:left}#color-output .format-entry .copy-button{align-self:flex-end}#image-controls{flex-direction:column}#image-controls button{width:100%}}@media (max-width: 480px){.dialog-buttons{flex-direction:column-reverse;gap:8px}.dialog-buttons button{width:100%}#saved-colors-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}.saved-color-name{font-size:.85em}.saved-color-hex{padding-right:3px}.saved-color-actions{gap:3px}}body.dark-theme section{background-color:var(--card-bg);border-color:var(--border-color)}body.dark-theme .tab-button{color:var(--primary)}body.dark-theme .tab-button:hover{background-color:var(--gray-200)}body.dark-theme .tab-button.active{background-color:var(--primary);color:#fff}body.dark-theme .tab-content{background-color:var(--card-bg);border-color:var(--border-color)}body.dark-theme #select-color-tab .method{border-color:var(--border-color);background-color:var(--card-bg)}body.dark-theme #image-drop-zone{background-color:var(--gray-100);border-color:var(--primary)}body.dark-theme #image-drop-zone:hover,body.dark-theme #image-drop-zone:focus{background-color:var(--gray-200)}body.dark-theme .image-upload-label{color:var(--primary)}body.dark-theme #image-preview-area{border-color:var(--border-color)}body.dark-theme #image-display-container{border-color:var(--border-color);background-color:var(--gray-100)}body.dark-theme #picked-image-color-display{background-color:var(--gray-200);border-color:var(--border-color)}body.dark-theme #extracted-colors-palette .palette-grid{border-color:var(--border-color);background-color:var(--card-bg)}body.dark-theme #color-output .format-entry input[type=text]{background-color:var(--gray-200)}body.dark-theme .saved-color-entry{border-color:var(--border-color);background-color:var(--card-bg)}body.dark-theme .palette-swatch,body.dark-theme .saved-color-swatch{border-color:var(--gray-400)}body.dark-theme dialog{background-color:var(--card-bg);border-color:var(--border-color);color:var(--text-color)}body.dark-theme .saved-color-actions .icon-button:hover,body.dark-theme .saved-color-actions .icon-button:focus-visible{background-color:#ffffff14;color:var(--text-color)}