*{box-sizing:border-box;margin:0;padding:0}:root{--color-bg-body: linear-gradient(135deg, #0a0a23 0%, #1a1a3a 50%, #2a4066 100%);--color-bg-header: rgba(0, 123, 255, .15);--color-bg-header-hover: rgba(0, 123, 255, .25);--color-bg-main: linear-gradient(145deg, #00bfff 0%, #1e90ff 50%, #00bfff 100%);--color-bg-footer: rgba(0, 123, 255, .15);--color-bg-footer-before: linear-gradient(90deg, transparent, #00ffff, transparent);--color-bg-footer-hover: rgba(0, 123, 255, .25);--color-bg-plus-toggle-btn: linear-gradient(135deg, #1e3a8a, #1e40af);--color-bg-plus-toogle-btn-hover: linear-gradient(135deg, #5dade2, #3498db);--color-bg-change-btn: rgba(255,255,255,.2);--color-bg-change-btn-hover: rgba(255,0,0,.4);--color-bg-empty-state: rgba(255,255,255,.1);--color-bg-add-button: rgba(255,255,255,.1);--color-bg-button-close-edit: linear-gradient(135deg, #1e3a8a, #1e40af);--color-bg-button-close-edit-hover: rgba(255,0,0,.9);--color-bg-input: rgba(255, 255, 255, .9);--color-bg-header-section: rgba(255, 255, 255, .12);--border: 1px solid rgba(0, 255, 255, .4);--border-button: 1px solid rgba(255, 255, 255, .3);--border-button-close-edit: 2px solid rgba(255,255,255,.6);--border-add-button: 1px solid rgba(255, 255, 255, .2);--border-input: 2px solid rgba(0, 0, 0, .1);--border-empty-state: 2px dashed rgba(255,255,255,.3);--border-radius: 20px;--border-radius-circle: 50%;--border-color-input-focus: #3498db;--border-color-card: 3px solid rgba(255, 255, 255, .4);--box-shadow: 0 8px 32px rgba(0, 123, 255, .2);--box-shadow-hover: 0 12px 40px var(--neon-glow);--box-shadow-plus-toogle-btn: 0 4px 16px rgba(52, 152, 219, .4);--box-shadow-plus-toogle-btn-hover: 0 6px 20px rgba(52, 152, 219, .6);--box-shadow-button-close-edit: 0 8px 20px rgba(255,0,0,.3);--box-shadow-button-close-edit-hover: 0 10px 25px rgba(255,0,0,.4);--box-shadow-copy-btn: 0 2px 8px rgba(0, 0, 0, .2);--box-shadow-add-button: 0 8px 32px rgba(0, 0, 0, .1);--box-shadow-input-focus: 0 0 0 3px rgba(52, 152, 219, .1);--box-shadow-input-submit: 0 4px 12px rgba(30, 58, 138, .4);--box-shadow-input-submit-hover: 0 4px 12px rgba(52, 152, 219, .4);--outline-plus-toogle-btn: 2px solid rgba(255,255,255,.8);--glass-blur: blur(12px);--transition-all: all .3s ease;--neon-glow: rgba(0, 255, 255, .3);--font-family: system-ui, -apple-system, sans-serif;--font-family-color-headline: "Courier New", monospace;--font-family-contrast-checker: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--color-text-light: #00ffff;--color-form-label: #333;--outline-add-butto-input: 2px solid rgba(255,255,255,.8);--color-icon-yup: #10b981;--color-icon-kinda: #f59e0b;--color-icon-nope: #ef4444;--button-size: 25px;--button-font-size: .8em;--max-width-container: 700px;--width-color-card: 600px;--height-color-card: 120px}body{font-family:var(--font-family);min-height:100vh;display:flex;flex-direction:column;background:var(--color-bg-body)}.glass-container{margin:10px auto;width:90vw;max-width:380px;flex-shrink:0}#root{width:100%;height:100%}@media (max-width: 480px){.glass-container{width:95vw;margin:8px auto}}.header{display:flex;justify-content:center;align-items:center;height:90px;max-width:var(--max-width-container);padding:0 15px;background:var(--color-bg-header);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);transition:var(--transition-all);border:var(--border);border-radius:var(--border-radius);box-shadow:var(--box-shadow)}.header svg{width:100%;height:auto;max-width:360px}.header:hover{box-shadow:var(--box-shadow-hover);background:var(--color-bg-header-hover)}@media (max-width: 480px){.header{height:85px;padding:0 12px}}.main{flex:1;display:flex;align-items:flex-start!important;justify-content:flex-start!important;overflow:hidden;padding:1rem 1rem 0;max-width:var(--max-width-container);background:var(--color-bg-main);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);transition:var(--transition-all);border:var(--border);border-radius:var(--border-radius)}.main:hover{box-shadow:var(--box-shadow-hover);transform:translateY(-2px)}@media (max-width: 480px){.main{padding:1.5rem;margin-bottom:8px}}.footer{display:flex;position:relative;justify-content:center;align-items:center;height:60px;max-width:var(--max-width-container);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);transition:var(--transition-all);background:var(--color-bg-footer);border:var(--border);border-radius:var(--border-radius);box-shadow:var(--box-shadow)}.footer:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:80%;height:1px;background:var(--color-bg-footer-before);filter:drop-shadow(0 0 4px var(--color-text-light))}.footer p{position:relative;z-index:2;color:var(--color-text-light);font-size:.95rem;font-weight:600;text-shadow:0 0 4px rgba(0,255,255,.8),0 1px 2px rgba(0,0,0,.5);letter-spacing:.3px;margin:0}.footer:hover{box-shadow:var(--box-shadow-hover);background:var(--color-bg-footer-hover)}.button{display:flex;align-items:center;justify-content:center;width:var(--button-size);height:var(--button-size);border:var(--border-button-close-edit);border-radius:var(--border-radius-circle);background:var(--color-bg-button-close-edit);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--box-shadow-button-close-edit);transition:all .2s ease;color:var(--color-text-light);font-size:var(--button-font-size);cursor:pointer}.button:hover{background:var(--box-shadow-input-submit);transform:scale(1.1)}.delete-button{position:absolute;bottom:8px;right:8px}.edit-button{position:absolute;top:8px;right:8px}.close-edit-button{position:absolute;top:10px;right:10px}.add-button{position:absolute;top:0;right:0}.copy-btn:active{transform:scale(.98)}.app-colors{padding:3rem 1.5rem 2rem;width:100%;max-width:var(--max-width-container);display:flex;gap:1rem;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start}.input-area{position:relative;max-width:360px;margin:.5rem auto;min-height:50px}.empty-state{width:320px;height:80px;margin:0 auto 1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--color-bg-empty-state);border-radius:var(--border-radius);border:var(--border-empty-state);color:var(--color-text-light);font-weight:500;text-align:center;font-size:1rem}.header-section{position:relative;width:100%;max-width:var(--width-color-card);margin:0 auto 1.5rem;min-height:60px;padding:1rem 3rem 1rem 1.5rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center;background:var(--color-bg-header-section);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:var(--border-button);border-radius:var(--border-radius)}.theme-title{flex:1;text-align:center;margin:0;font-size:1.2rem;font-weight:600;color:var(--color-form-label);white-space:nowrap}.add-button{position:absolute;top:10px;right:10px}@media (max-width: 480px){.header-section{max-width:340px;margin:0 auto .75rem}.theme-title{top:-22px;font-size:1.1rem;padding-left:.5rem}.add-button{top:-12px;right:8px;width:48px!important;height:48px!important}}.contrast-checker{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:14px;font-family:var(--font-family-contrast-checker)}.contrast-label{font-weight:500;color:var(--color-form-label)}.contrast-loading,.contrast-no-data{color:var(--color-form-label);font-size:13px}.contrast-container{display:flex;align-items:center;gap:12px;margin-top:15px;font-size:14px;font-family:var(--font-family)}.loading-text,.no-data-text{color:var(--color-form-label)}.icon-yup{font-size:20px;color:var(--color-icon-yup)}.icon-kinda{font-size:20px;color:var(--color-icon-kinda)}.icon-nope{font-size:20px;color:var(--color-icon-nope)}.formAddButton{position:relative;overflow:visible;width:100%;max-width:var(--width-color-card);margin:1rem auto;padding:1.5rem;background:var(--color-bg-add-button);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:var(--border-radius);border:var(--border-add-button);box-shadow:var(--box-shadow-add-button)}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.formAddButton form{display:flex;flex-direction:column;gap:.5rem}.formAddButton__label{font-weight:700;font-size:.9rem;color:var(--color-form-label)}.formAddButton__input{height:35px;padding:.75rem 1rem;color:var(--color-form-label);font-size:1rem;background:var(--color-bg-input);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease;border:var(--border-input);border-radius:var(--border-radius);box-sizing:border-box}.formAddButton__input:focus{outline:var(--outline-add-butto-input);border-color:var(--border-color-input-focus);box-shadow:var(--box-shadow-input-focus)}.formAddButton__input-row{display:flex!important;gap:.5rem;align-items:stretch}.formAddButton__input-row .formAddButton__input{flex:1;min-width:0}.formAddButton__input--submit{display:flex;justify-content:center;align-items:center;cursor:pointer;height:40px;width:200px;padding:1rem 1.5rem;margin:1rem auto 0;text-align:center;color:var(--color-text-light);font-weight:700;font-size:1.1rem;background:var(--color-bg-button-close-edit);box-shadow:var(--box-shadow-input-submit);transition:transform .2s,box-shadow .2s;border:none;border-radius:var(--border-radius)}.formAddButton__input--submit:focus{outline:none}.formAddButton__input--submit:hover{transform:translateY(-2px);box-shadow:var(--box-shadow-input-submit-hover)}.custom-color-picker{position:relative;display:inline-block}.hidden-color-input{display:none!important}.custom-color-picker{position:relative}.color-preview:hover{box-shadow:0 0 0 3px #007bff40}.color-preview:focus-within{outline:2px solid var(--color-bg-button-close-edit)}.hidden-color-input{display:none}.form-input-wrapper{width:100%;max-width:270px}.custom-color-picker{width:100%}.color-preview{width:100%!important}.color-preview-base{height:35px;padding:.75rem 1rem;border:var(--border-input);border-radius:var(--border-radius);box-sizing:border-box;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease;cursor:pointer;position:relative;overflow:hidden;width:100%}.color-preview-base:hover{box-shadow:0 0 0 3px #007bff40}.color-preview-base:focus-within{outline:2px solid var(--color-bg-button-close-edit)}@media (max-width: 480px){.formAddButton{margin:.5rem;padding:1rem}.formAddButton__input{height:48px;font-size:1.1rem}.formAddButton__input-row .formAddButton__input--color{width:30px;height:48px}}.color-card{display:flex;flex-direction:column;position:relative;align-items:flex-start;justify-content:center;width:var(--width-color-card);height:var(--height-color-card);text-align:left;margin:0 1rem 1.5rem;padding:25px 50px 20px 0;border:var(--border-color-card);border-radius:var(--border-radius);font-weight:700;font-size:.85rem;outline:none!important;outline-offset:0!important;tab-index:-1}.color-card:hover{border-color:#ffffffb3;box-shadow:0 8px 25px #0000004d;transition:all .3s ease}.color-card div{line-height:1.1}.edit-header{margin-bottom:.5rem}.colors-grid{display:flex;flex-direction:column;align-items:center;gap:0;width:100%;max-width:var(--max-width-container);padding:0}.color-display{display:flex;align-items:center;gap:.75rem;width:60%;margin-bottom:.25rem}.color-hex{flex:1;line-height:1.1;background:var(--color-bg-change-btn);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:.5rem .75rem;border-radius:8px;border:var(--border-button);font-size:1.2rem;font-weight:800;font-family:var(--font-family-color-headline);tab-index:-1}.color-contrast{font-size:.8rem;opacity:.9;user-select:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;-khtml-user-select:none!important;pointer-events:none!important;outline:none!important}.color-role{font-size:1rem;padding:10px 0;opacity:.9;user-select:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;-khtml-user-select:none!important;pointer-events:none!important;outline:none!important}.container{position:absolute;top:10px;right:10px}.button-group{display:flex;flex-direction:row;gap:8px;pointer-events:auto!important}.color-display,.color-role,.color-contrast{margin-left:20px}.color-hex:focus,.color-hex:focus-visible,.color-hex:focus-within{outline:none!important;outline-offset:0!important;box-shadow:none!important}.color-hex:focus-visible{outline:2px solid rgba(255,255,255,.5)!important;box-shadow:0 0 0 2px #ffffff80!important}@media (max-width: 480px){.color-hex{font-size:1.1rem;padding:.4rem .6rem}}