html,body{overflow:hidden;height:100%;margin:0;padding:0}main{padding:0!important;margin:0!important;max-width:100%!important;height:100vh!important;display:flex;flex-direction:column;overflow:hidden}footer{display:none!important}.toolbar{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1.5rem;background-color:var(--color-ghost-blue-light);border-bottom:1px solid rgba(15,23,42,.06);z-index:20}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:1rem}.back-btn{color:var(--color-aqua-teal)!important;border:1px solid rgba(14,165,233,.25)!important;border-radius:8px;transition:var(--transition-bounce)!important;margin-right:.25rem}.back-btn:hover{background:#0ea5e91a!important;color:var(--color-whisper-white)!important;transform:translate(-3px)}.toolbar-select{background-color:var(--color-ghost-blue-light, #FFFFFF);color:var(--color-whisper-white, #0F172A);border:1px solid rgba(15,23,42,.1);border-radius:8px;padding:.5rem 2.2rem .5rem 1rem;font-size:.9rem;font-weight:600;outline:none;cursor:pointer;transition:var(--transition-smooth);color-scheme:light;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;background-size:1rem}.toolbar-select:hover{background-color:#0f172a0a}html[data-theme=dark] .toolbar-select{background-color:#1d2b3a;border-color:#ffffff1a;color:#f3f7f8;color-scheme:dark;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B5C4D0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}html[data-theme=dark] .toolbar-select:hover{background-color:#ffffff0d}.toolbar-btn{background:var(--gradient-accent);color:#fff;border:none;padding:.5rem 1.25rem;border-radius:6px;font-weight:600;cursor:pointer;transition:var(--transition-bounce);box-shadow:0 4px 10px #0ea5e940}.toolbar-btn:hover{transform:translateY(-2px);box-shadow:0 6px 15px #8b5cf659}.icon-btn{background:transparent;border:none;color:var(--color-sky-grey);cursor:pointer;padding:.5rem;border-radius:6px;transition:var(--transition-smooth);display:flex;align-items:center;justify-content:center;width:38px;height:38px}.icon-btn:hover:not(:disabled){background:#0f172a0a;color:var(--color-whisper-white)}.icon-btn:disabled{opacity:.3;cursor:not-allowed}.cursor-pointer{cursor:pointer}.divider{width:1px;height:20px;background:#0f172a14}#palette-container{display:flex;flex-direction:row;width:100vw;flex-grow:1;min-height:0;overflow:hidden}.color-column{flex:1 1 0%;min-width:0;height:100%;position:relative;display:flex;flex-direction:column;justify-content:flex-end;transition:flex .3s cubic-bezier(.4,0,.2,1);cursor:grab}.color-column:active{cursor:grabbing}.color-column.dragging{opacity:.4;z-index:10}.color-column.drag-over{filter:brightness(1.15) contrast(1.1);box-shadow:inset 0 0 0 4px #ffffff4d;z-index:5}.text-shadow-black{color:var(--color-shadow-black)!important}.text-whisper-white{color:var(--color-whisper-white)!important}.text-shadow-black svg,.text-whisper-white svg{stroke:currentColor}.color-controls{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:1.2rem;opacity:0;transition:opacity .2s ease-in-out}.color-column:hover .color-controls{opacity:1}.color-controls button{background:transparent;border:none;cursor:pointer;transition:transform .2s ease;color:inherit;padding:.4rem;border-radius:50%;display:flex;align-items:center;justify-content:center}.color-controls button:hover{transform:scale(1.2);background:#ffffff4d}.text-shadow-black .color-controls button:hover{background:#00000014}.color-info{position:absolute;bottom:2rem;left:1.5rem;display:flex;flex-direction:column;align-items:flex-start;text-align:left}.hex-code{font-size:1.35rem;font-weight:800;cursor:pointer;padding:.25rem 0;transition:transform .2s;display:inline-block;margin:0;letter-spacing:-.015em}.hex-code:hover{transform:translate(8px)}.color-name{font-size:.85rem;font-weight:700;opacity:.85;margin-top:.1rem;margin-bottom:0}.modal-overlay{position:fixed;inset:0;background:#0f172a4d;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;z-index:100;padding:1rem;color:var(--color-whisper-white)}.modal-card{background:var(--color-ghost-blue-light);border:1px solid rgba(15,23,42,.06);border-radius:20px;width:100%;max-width:400px;box-shadow:0 20px 50px #0f172a26;display:flex;flex-direction:column;overflow:hidden;animation:modalFadeIn .3s cubic-bezier(.16,1,.3,1)}.modal-card.large{max-width:500px;max-height:90vh}@keyframes modalFadeIn{0%{transform:translateY(15px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{padding:1.2rem 1.5rem;border-bottom:1px solid rgba(15,23,42,.05);display:flex;justify-content:space-between;align-items:center}.modal-header h3{margin:0;font-size:1.2rem;font-weight:800;color:var(--color-whisper-white)}.modal-close{background:transparent;border:none;color:var(--color-sky-grey);cursor:pointer;padding:.25rem;border-radius:50%;display:flex;align-items:center;justify-content:center;width:32px;height:32px;transition:var(--transition-smooth)}.modal-close:hover{background:#0f172a0a;color:var(--color-whisper-white)}.modal-body{padding:1.5rem;overflow-y:auto}.input-field{width:100%;padding:.75rem 1rem;background:#0f172a05;border:1px solid rgba(15,23,42,.08);border-radius:8px;color:var(--color-whisper-white);box-sizing:border-box;outline:none;font-weight:600;transition:var(--transition-smooth)}.input-field:focus{border-color:var(--color-aqua-teal);box-shadow:0 0 0 2px #0ea5e933}.form-group{margin-bottom:1.2rem}.form-label{display:block;margin-bottom:.5rem;font-size:.9rem;font-weight:700;color:var(--color-sky-grey)}.shades-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:.75rem}.shade-box{height:4.5rem;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:monospace;font-weight:700;font-size:.8rem;cursor:pointer;transition:var(--transition-smooth)}.shade-box:hover{transform:scale(1.05);box-shadow:0 5px 15px #0f172a26}.copy-row{display:flex;align-items:center;justify-content:space-between;background:#0f172a03;border:1px solid rgba(15,23,42,.04);padding:.75rem 1rem;border-radius:8px;margin-bottom:.75rem}.copy-row .format-val{font-family:monospace;font-size:.9rem;font-weight:600;color:var(--color-whisper-white)}.copy-row .format-key{font-weight:700;color:var(--color-aqua-teal);margin-right:.5rem;min-width:50px;display:inline-block}.copy-format-btn{background:transparent;border:none;color:var(--color-sky-grey);cursor:pointer;padding:.5rem;border-radius:6px;transition:var(--transition-smooth);display:flex;align-items:center;justify-content:center;width:32px;height:32px}.copy-format-btn:hover{background:#0ea5e91a;color:var(--color-aqua-teal)}.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.export-option{background:#0f172a03;border:1px solid rgba(15,23,42,.04);padding:1.2rem;border-radius:10px;text-align:center;display:flex;flex-direction:column;gap:.75rem;transition:var(--transition-smooth)}.export-option:hover{background:#0f172a05;border-color:#0ea5e933}.export-option-icon{display:flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;color:var(--color-whisper-white)}.export-buttons{display:flex;gap:.5rem;margin-top:auto}.export-btn{flex:1;padding:.6rem;border-radius:6px;border:none;cursor:pointer;font-size:.85rem;font-weight:700;transition:var(--transition-smooth)}.export-btn:hover{opacity:.9;transform:translateY(-1px)}.btn-blue{background:var(--color-aqua-teal);color:#fff}.btn-gray{background:#0f172a0d;color:var(--color-whisper-white)}.btn-gray:hover{background:#0f172a1a}#toast-container{position:fixed;bottom:2rem;right:2rem;z-index:1000;display:flex;flex-direction:column;gap:.5rem}.toast{background:var(--gradient-accent);color:#fff;padding:.75rem 1.5rem;border-radius:30px;font-weight:700;font-size:.9rem;box-shadow:0 8px 24px #0ea5e94d;animation:slideIn .3s cubic-bezier(.175,.885,.32,1.275) forwards}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@media(max-width:768px){main{height:100vh!important}.toolbar{flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;padding:.75rem 1rem}.toolbar-left,.toolbar-right{gap:.5rem}.toolbar-select{padding:.5rem;font-size:.85rem;border-radius:6px}.toolbar-btn{padding:.5rem .85rem;font-size:.85rem;border-radius:6px}.icon-btn{width:38px;height:38px;padding:.4rem}#palette-container{flex-direction:column;width:100%;height:100%;min-height:0}.color-column{flex-direction:row!important;justify-content:space-between!important;align-items:center!important;width:100%!important;height:auto!important;flex:1 1 0%!important;cursor:default!important;padding:0 1rem!important;transition:none!important}.color-info{position:relative!important;bottom:auto!important;left:auto!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:.6rem!important;padding:0!important}.hex-code{font-size:1.15rem!important;margin:0!important;padding:.5rem 0!important}.hex-code:hover{transform:none!important}.color-name{font-size:.75rem!important;margin:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px;opacity:.7}.color-controls{position:relative!important;top:auto!important;left:auto!important;transform:none!important;flex-direction:row!important;gap:.4rem!important;opacity:1!important;margin-left:auto!important}.color-controls button{width:44px!important;height:44px!important;padding:.5rem!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:8px!important;transition:background-color .2s}.color-controls button:hover{transform:none!important;background:transparent!important}.color-controls button:active,.text-shadow-black .color-controls button:active{background:#0000000d!important}.color-controls button svg{width:22px!important;height:22px!important}.export-grid{grid-template-columns:1fr;gap:.75rem}}