:root{--primary-dark:#092C5B;--primary-blue:#4365E7;--primary-text:#333;--accent-orange:#FF7D00;--background-light:#f5f5f5;--border-color:#e0e0e0;--white:#ffffff;--light-gray:#f8f9fa;--medium-gray:#e9ecef;--dark-gray:#6c757d;--font-mono:'Courier New',monospace;--border-radius-sm:6px;--border-radius-md:8px;--box-shadow-sm:0 4px 12px rgba(0,0,0,.1);--spacing-xs:.5rem;--spacing-sm:1rem;--spacing-md:1.5rem;--spacing-lg:2rem;}*{margin:0;padding:0;box-sizing:border-box;}body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background-color:var(--background-light);color:var(--primary-text);min-height:100vh;line-height:1.6;}.header{background:var(--white);padding:var(--spacing-md) var(--spacing-lg);text-align:center;border-bottom:1px solid var(--border-color);margin-bottom:var(--spacing-lg);}.header h1{font-size:2rem;font-weight:600;color:var(--primary-dark);margin-bottom:.25rem;}.header h1 i{color:var(--primary-blue);margin-right:.75rem;}.header p{font-size:1rem;color:var(--dark-gray);font-weight:400;}.main-container{display:grid;grid-template-columns:1fr 2fr;gap:var(--spacing-lg);max-width:1400px;margin:0 auto;padding:0 var(--spacing-lg);}.left-panel,.right-panel{display:flex;flex-direction:column;gap:var(--spacing-lg);}.tool-section,.results-section{background:var(--white);padding:var(--spacing-md);border-radius:var(--border-radius-md);border:1px solid var(--border-color);}.tool-section h2,.results-section h2{font-size:1.25rem;font-weight:600;color:var(--primary-dark);margin-bottom:var(--spacing-md);display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--border-color);padding-bottom:var(--spacing-sm);}.tool-section h2 i,.results-section h2 i{color:var(--primary-blue);}.color-picker-container,.hex-input-container{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm);align-items:center;}#colorPicker{width:50px;height:50px;border:1px solid var(--border-color);border-radius:var(--border-radius-md);cursor:pointer;background-color:transparent;}.hex-input-wrapper{flex:1;position:relative;}#hexInput{width:100%;padding:.75rem var(--spacing-sm);padding-right:3.5rem;border:1px solid var(--border-color);border-radius:var(--border-radius-md);font-size:1rem;font-family:var(--font-mono);transition:border-color .2s ease;}#hexInput:focus{outline:none;border-color:var(--primary-blue);}.hex-preview{position:absolute;right:var(--spacing-xs);top:50%;transform:translateY(-50%);width:2.5rem;height:2.5rem;border-radius:var(--border-radius-sm);border:1px solid var(--border-color);background:var(--light-gray);}.hex-suggestions{margin-top:var(--spacing-sm);}.rgb-input-container{display:flex;gap:var(--spacing-sm);align-items:center;margin-bottom:var(--spacing-sm);flex-wrap:wrap;}.rgb-input-group{display:flex;align-items:center;gap:var(--spacing-xs);}.rgb-input-group label{font-weight:500;width:20px;color:var(--primary-text);}.rgb-input-group input{width:70px;padding:.5rem;border:1px solid var(--border-color);border-radius:var(--border-radius-sm);font-family:var(--font-mono);text-align:center;-moz-appearance:textfield}.rgb-input-group input::-webkit-outer-spin-button,.rgb-input-group input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}.suggestion-label{font-size:.9rem;font-weight:500;color:var(--dark-gray);margin-bottom:.5rem;display:block;}.quick-colors{display:flex;gap:var(--spacing-xs);flex-wrap:wrap;}.quick-color{width:28px;height:28px;border-radius:var(--border-radius-sm);cursor:pointer;border:1px solid var(--border-color);transition:transform .2s ease,border-color .2s ease;}.quick-color:hover{transform:scale(1.1);border-color:var(--primary-blue);}.quick-color[data-hex="#FF0000"]{background:#FF0000}.quick-color[data-hex="#00FF00"]{background:#00FF00}.quick-color[data-hex="#0000FF"]{background:#0000FF}.quick-color[data-hex="#FFFF00"]{background:#FFFF00}.quick-color[data-hex="#FF00FF"]{background:#FF00FF}.quick-color[data-hex="#00FFFF"]{background:#00FFFF}.quick-color[data-hex="#000000"]{background:#000000}.quick-color[data-hex="#FFFFFF"]{background:#FFFFFF}.btn-primary,.btn-secondary{padding:.75rem var(--spacing-md);border:1px solid transparent;border-radius:var(--border-radius-md);font-weight:500;cursor:pointer;transition:all .2s ease;font-size:.9rem;text-transform:uppercase;letter-spacing:.5px;}.btn-primary{background-color:var(--primary-blue);color:var(--white);border-color:var(--primary-blue);}.btn-primary:hover{background-color:var(--primary-dark);border-color:var(--primary-dark);}.btn-secondary{background-color:var(--light-gray);color:var(--primary-text);border-color:var(--border-color);}.btn-secondary:hover{background-color:var(--medium-gray);border-color:var(--dark-gray);}.upload-area{border:2px dashed var(--border-color);border-radius:var(--border-radius-md);padding:var(--spacing-lg);text-align:center;cursor:pointer;transition:all .2s ease;background:var(--light-gray);}.upload-area:hover,.upload-area.dragover{border-color:var(--primary-blue);background:var(--white);}.upload-area i{font-size:2.5rem;color:var(--dark-gray);margin-bottom:var(--spacing-sm);display:block;}.upload-area p{color:var(--dark-gray);font-size:1rem;}.image-controls{margin-top:var(--spacing-md);display:flex;flex-wrap:wrap;gap:var(--spacing-sm);align-items:center;}.image-controls label{font-weight:500;color:var(--primary-text);}.image-controls select{padding:var(--spacing-xs);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);margin-left:var(--spacing-xs);}#imagePreview img{max-width:100%;max-height:250px;border-radius:var(--border-radius-md);border:1px solid var(--border-color);margin-top:var(--spacing-sm);}.instruction{color:var(--dark-gray);font-style:italic;margin-bottom:var(--spacing-sm);font-size:.9rem;}.color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:var(--spacing-md);margin-bottom:var(--spacing-md);}.color-box{width:100%;padding-bottom:100%;border-radius:var(--border-radius-md);cursor:pointer;position:relative;transition:transform .2s ease,box-shadow .2s ease;border:1px solid var(--border-color);}.color-box:hover{transform:translateY(-2px);box-shadow:var(--box-shadow-sm);}.color-box.locked{border:2px solid var(--accent-orange);box-shadow:0 0 0 2px var(--accent-orange);}.color-box.locked::before{content:'\f023';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;top:6px;right:6px;color:var(--accent-orange);font-size:1rem;text-shadow:0 0 4px var(--white);}.color-box::after{content:attr(data-hex);position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:.75rem;font-weight:500;color:var(--primary-text);background:var(--white);padding:2px 6px;border-radius:4px;border:1px solid var(--border-color);opacity:0;transition:opacity .2s ease;white-space:nowrap;}.color-box:hover::after{opacity:1;}.color-lock-info{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-sm);padding:.75rem;background:var(--light-gray);border-radius:var(--border-radius-md);}#lockedColorCount{font-weight:600;color:var(--primary-dark);}.btn-small{padding:var(--spacing-xs) var(--spacing-sm);font-size:.8rem;}.color-actions{display:flex;gap:var(--spacing-sm);justify-content:flex-start;flex-wrap:wrap;margin-top:var(--spacing-md);}.color-actions button:disabled{opacity:.5;cursor:not-allowed;background-color:var(--medium-gray);}.palettes-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-md);}.palette-controls{margin-bottom:var(--spacing-sm);}#baseColorDisplay{font-weight:500;}.engaging-palette,.palette{background:var(--white);padding:var(--spacing-md);border-radius:var(--border-radius-md);border:1px solid var(--border-color);display:flex;flex-direction:column;}.palette-header{margin-bottom:var(--spacing-sm);}.palette-title{font-size:1.1rem;font-weight:600;color:var(--primary-dark);margin-bottom:.25rem;}.palette-description{color:var(--dark-gray);font-size:.9rem;}.palette-colors-container,.palette-colors{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:var(--spacing-sm);margin-bottom:var(--spacing-md);}.palette-color-item{text-align:center;cursor:pointer;}.palette-color-box{width:100%;padding-bottom:100%;border-radius:var(--border-radius-sm);border:1px solid var(--border-color);transition:transform .2s ease;}.palette-color-item:hover .palette-color-box{transform:scale(1.05);}.palette-color-hex{font-size:.8rem;font-weight:500;color:var(--dark-gray);margin-top:var(--spacing-xs);font-family:var(--font-mono);}.palette-actions{display:flex;gap:var(--spacing-sm);justify-content:flex-start;flex-wrap:wrap;}.color-info-panel{background:var(--light-gray);padding:var(--spacing-md);border-radius:var(--border-radius-md);}.color-info-panel p{color:var(--dark-gray);}.color-info-item{display:flex;justify-content:space-between;margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--medium-gray);font-size:.9rem;}.color-info-item:last-child{border-bottom:none;margin-bottom:0;}.color-info-label{font-weight:500;color:var(--primary-text);}.color-info-value{color:var(--dark-gray);font-family:var(--font-mono);}.modal{position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;}.modal-content{background-color:var(--white);padding:var(--spacing-lg);border-radius:var(--border-radius-md);width:90%;max-width:500px;border:1px solid var(--border-color);position:relative;}.close{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);color:var(--dark-gray);font-size:24px;font-weight:bold;cursor:pointer;transition:color .2s ease;}.close:hover{color:var(--primary-text);}.export-options{display:flex;gap:var(--spacing-sm);margin:var(--spacing-md) 0;flex-wrap:wrap;}#exportOutput{width:100%;height:150px;margin-top:var(--spacing-sm);padding:var(--spacing-sm);border:1px solid var(--border-color);border-radius:var(--border-radius-md);font-family:var(--font-mono);font-size:.9rem;resize:vertical;margin-bottom:var(--spacing-sm);background-color:var(--light-gray);}#copyToClipboardBtn{display:block;width:100%;margin-top:var(--spacing-sm);}@media (max-width:1024px){.main-container{grid-template-columns:1fr}}#notification-container{position:fixed;top:20px;right:20px;z-index:10000;display:flex;flex-direction:column;align-items:flex-end;gap:10px;}.notification-container{position:fixed;top:20px;right:20px;z-index:10000;display:flex;flex-direction:column;align-items:flex-end;gap:10px;}@media (max-width:768px){body{font-size:16px}.main-container{padding:0 1rem}.header{padding:1rem;margin-bottom:1rem}.header h1{font-size:1.5rem}.tool-section,.results-section{padding:1rem}.color-picker-container,.hex-input-container{flex-direction:column;align-items:stretch}.image-controls{flex-direction:column;align-items:stretch}.color-grid{grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:1rem}.palettes-container{grid-template-columns:1fr}}.manual-color-inner-wrapper{display:flex;flex-wrap:wrap;gap:var(--spacing-md);align-items:flex-start;}.manual-color-inner-wrapper>div{margin-bottom:0;}.manual-color-inner-wrapper>.hex-input-container{flex:2 1 350px;}.manual-color-inner-wrapper>.color-picker-container,.manual-color-inner-wrapper>.rgb-input-container,.manual-color-inner-wrapper>.hex-suggestions{flex:1 1 220px;}#faq-section .faq-item{margin-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-color);padding-bottom:var(--spacing-sm);}#faq-section .faq-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}#faq-section .faq-question{cursor:pointer;font-weight:600;display:flex;justify-content:space-between;align-items:center;}#faq-section .faq-question::after{content:'\f078';font-family:'Font Awesome 6 Free';font-weight:900;transition:transform .3s ease;}#faq-section .faq-question.active::after{transform:rotate(180deg);}#faq-section .faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease,padding-top .3s ease;padding-top:0;color:var(--dark-gray);}#faq-section .faq-answer.active{padding-top:var(--spacing-sm);max-height:200px}