*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";display:flex;flex-direction:column;min-height:100vh;background-color:#f8f9fa;color:#333;padding-top:70px;padding-bottom:50px;line-height:1.6}h1,h2{color:#0056b3;margin-bottom:.5em}h1{font-size:1.8em;margin-bottom:0}h2{font-size:1.4em;border-bottom:1px solid #ccc;padding-bottom:.3em;margin-top:15px;margin-bottom:.75em}#color-selection-tabs h2{border-bottom:none;margin-bottom:.2em;padding-bottom:0;margin-top:0}label{display:block;margin-bottom:.3em;font-weight:700;font-size:.9em}input[type=color],input[type=range],input[type=text]{padding:8px;border:1px solid #ccc;border-radius:4px;margin-bottom:5px;font-size:1em}input[type=color]{width:50px;height:38px;padding:2px;vertical-align:middle;cursor:pointer;border-radius:4px}input[type=range]{width:120px;vertical-align:middle;margin:0 5px}button{padding:8px 15px;border:none;border-radius:4px;background-color:#007bff;color:#fff;cursor:pointer;font-size:.9em;transition:background-color .2s ease,box-shadow .2s ease}button:hover{background-color:#0056b3}button:focus-visible{outline:2px solid #0056b3;outline-offset:2px;box-shadow:0 0 0 .2rem rgba(0,123,255,.5)}button:disabled{background-color:#ccc;cursor:not-allowed;opacity:.7}.copy-button{padding:5px 8px;font-size:.8em;margin-left:5px;background-color:#6c757d}.copy-button:hover{background-color:#5a6268}header{position:fixed;top:0;left:0;width:100%;height:60px;background-color:#343a40;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 25px;z-index:1000;border-bottom:3px solid #007bff;box-shadow:0 2px 4px rgba(0,0,0,.1)}header .title-version{display:flex;align-items:baseline}#version-info{font-size:.7em;margin-left:10px;opacity:.8}.return-button{display:inline-block;padding:8px 15px;background-color:#6c757d;color:#fff;text-decoration:none;border-radius:4px;font-size:.9em;transition:background-color .2s ease}.return-button:hover{background-color:#5a6268;text-decoration:none}main{flex:1;padding:20px;max-width:1200px;margin:0 auto;width:100%}.description{font-style:italic;color:#555;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:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,.1)}.tab-navigation{display:flex;margin-bottom:0;border-bottom:2px solid #007bff}.tab-button{padding:10px 15px;cursor:pointer;border:none;border-bottom:2px solid transparent;background-color:transparent;color:#0056b3;font-size:1em;margin-right:5px;border-radius:5px 5px 0 0;position:relative;bottom:-2px;transition:background-color .2s,color .2s,border-color .2s}.tab-button:hover{background-color:#e9ecef;color:#003875}.tab-button.active{background-color:#007bff;color:#fff;border-color:#007bff;font-weight:700}.tab-button.active:hover{background-color:#0069d9}.tab-content{display:none;padding:20px;border:1px solid #ddd;border-top:none;border-radius:0 0 5px 5px;background-color:#fff}.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 #eee;border-radius:5px;background-color:#fdfdfd}.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:#999;font-style:italic;padding:10px 0}.palette-swatch{width:30px;height:30px;border:1px solid #ccc;cursor:pointer;border-radius:3px;transition:transform .1s ease,border-color .1s ease}.palette-swatch:focus-visible,.palette-swatch:hover{transform:scale(1.1);border-color:#333;outline:0}#import-screenshot-tab>p:first-of-type{margin-bottom:15px;text-align:center;font-style:italic;color:#555}#image-drop-zone{border:2px dashed #007bff;padding:30px 20px;text-align:center;cursor:pointer;background-color:#f0f8ff;border-radius:5px;margin-bottom:20px;transition:background-color .2s,border-color .2s}#image-drop-zone:focus,#image-drop-zone:hover{background-color:#e2e6ea;border-color:#0056b3;outline:0}#image-upload-input{display:none}.image-upload-label{font-weight:700;color:#0056b3;font-size:1.1em;display:block}#image-preview-area{margin-bottom:15px;padding:10px;border:1px solid #eee;border-radius:5px}#image-controls{margin-bottom:15px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}#image-controls button{background-color:#5a6268;font-size:.85em}#image-controls button:hover{background-color:#495057}#image-controls button.active{background-color:#17a2b8;box-shadow:0 0 0 .2rem rgba(23,162,184,.5);color:#fff}#clear-screenshot-image{background-color:#dc3545}#clear-screenshot-image:hover{background-color:#c82333}#image-display-container{position:relative;max-width:100%;width:fit-content;margin:0 auto 15px auto;border:1px solid #ccc;background-color:#f9f9f9}#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 rgba(0,0,0,.5);z-index:1001}#picked-image-color-display{margin-top:10px;padding:8px 12px;background-color:#e9ecef;border:1px solid #dee2e6;border-radius:4px;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 #666;vertical-align:middle;border-radius:3px;box-shadow:0 0 2px rgba(0,0,0,.2)}#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 #eee;padding:10px;background-color:#fdfdfd}#extracted-colors-palette label{margin-bottom:.5em;font-weight:700;color:#333}@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}}#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 #ccc;border-radius:5px;background-color:#fff;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,.1)}#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:#e9ecef;cursor:text}#color-bank .bank-controls{margin-bottom:15px;display:flex;gap:10px;flex-wrap:wrap}#saved-colors-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.saved-color-entry{border:1px solid #eee;border-radius:5px;padding:8px;background-color:#fdfdfd;display:flex;flex-direction:column;gap:5px;transition:box-shadow .2s ease}.saved-color-entry:hover{box-shadow:0 0 8px rgba(0,0,0,.1)}.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 #ccc;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 #007bff}.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:#333;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:#555;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:#28a745}.clear-slot-button.icon-button{color:#dc3545}.saved-color-actions .icon-button:focus-visible,.saved-color-actions .icon-button:hover{color:#000;background-color:rgba(0,0,0,.05);outline:0}.clear-slot-button.icon-button:disabled{color:#bbb;background-color:transparent;cursor:not-allowed;opacity:.6}footer{position:fixed;bottom:0;left:0;width:100%;height:40px;background-color:#e9ecef;color:#6c757d;text-align:center;padding:10px 0;font-size:.9em;border-top:1px solid #dee2e6;z-index:1000}footer a{color:#0056b3;text-decoration:none}footer a:hover{text-decoration:underline}.link-button{background:0 0;border:none;color:#0056b3;text-decoration:none;cursor:pointer;padding:0;font-size:inherit;font-family:inherit}.link-button:hover{text-decoration:underline;background:0 0}dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid #ccc;border-radius:8px;padding:25px;box-shadow:0 4px 15px rgba(0,0,0,.2);min-width:320px;width:auto;max-width:calc(100vw - 40px);max-height:calc(100vh - 40px);overflow-y:auto;z-index:2000}dialog::backdrop{background-color:rgba(0,0,0,.6);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-cancel-button,.dialog-buttons button#prompt-cancel-button{background-color:#6c757d}.dialog-buttons button#confirm-cancel-button:hover,.dialog-buttons button#prompt-cancel-button:hover{background-color:#5a6268}#disclaimer-dialog h2{margin-top:0;color:#333;border:none;text-align:center;margin-bottom:15px}#disclaimer-dialog p{margin-bottom:1em;line-height:1.5;font-size:.95em}#disclaimer-dialog button{display:block;margin:20px auto 0 auto;min-width:100px}#toast-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:10px}.toast-message{background-color:#333;color:#fff;padding:12px 18px;border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,.2);font-size:.9em;opacity:0;transform:translateX(100%);animation:toast-slide-in .3s ease-out forwards,toast-slide-out .3s ease-in forwards 3.2s;min-width:250px;max-width:350px;word-wrap:break-word;cursor:pointer}.toast-message.toast-success{background-color:#28a745;color:#fff}.toast-message.toast-error{background-color:#dc3545;color:#fff}.toast-message.toast-info{background-color:#17a2b8;color:#fff}.toast-message.hiding{animation:toast-slide-out .3s ease-in forwards!important}@keyframes toast-slide-in{to{opacity:1;transform:translateX(0)}}@keyframes toast-slide-out{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}@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){body{padding-top:60px;padding-bottom:70px}header{padding:8px 15px;height:auto;flex-direction:column;align-items:center;gap:5px}header .title-version{text-align:center}main{padding:15px}h1{font-size:1.6em}h2{font-size:1.3em;margin-top:10px}.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%}#toast-container{left:10px;right:10px;top:10px;align-items:center}.toast-message{width:calc(100% - 20px);max-width:none}}@media (max-width:480px){body{padding-top:100px;padding-bottom:80px}footer{font-size:.8em;height:auto;padding:8px;display:flex;flex-direction:column;gap:5px;text-align:center}footer a,footer button.link-button,footer span{display:block;margin:2px 0}.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}}