:root{--primary-color:#3273dc;--secondary-color:#209cee;--accent-color:#ff3860;--success-color:#23d160;--warning-color:#ffdd57;--danger-color:#ff3860;--info-color:#209cee;--light-color:#f5f5f5;--dark-color:#363636;--text-color:#4a4a4a;--border-color:#dbdbdb;--background-color:#f9f9f9;--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--shadow-sm:0 2px 5px rgba(0, 0, 0, 0.1);--shadow-md:0 4px 10px rgba(0, 0, 0, 0.1);--shadow-lg:0 6px 15px rgba(0, 0, 0, 0.1);--bg-light:#f7faff;--bg-lighter:#fbfdff;--text-light:#7a7a7a}body{background-color:var(--background-color);color:var(--text-color);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}.tool-card{background-color:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.tool-card:hover{box-shadow:var(--shadow-lg)}.color-swatch{width:100%;height:100px;border-radius:var(--radius-md);border:1px solid var(--border-color);margin-bottom:var(--spacing-md);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;font-family:monospace;font-size:.9rem;color:rgba(255,255,255,.9);text-shadow:0 1px 2px rgba(0,0,0,.5)}.color-swatch-small{width:40px;height:40px;border-radius:var(--radius-sm);border:1px solid var(--border-color);display:inline-block;margin-right:var(--spacing-sm);cursor:pointer;transition:transform .1s ease}.color-swatch-small:hover{transform:scale(1.1)}.color-info-popup{position:absolute;top:5px;right:5px;background-color:rgba(0,0,0,.3);color:#fff;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .2s ease}.color-swatch:hover .color-info-popup{opacity:1}.copy-btn{padding:.25rem;background:0 0;color:#6b7280;border:none;border-radius:.25rem;cursor:pointer;font-size:1rem;display:inline-flex;align-items:center;justify-content:center;gap:.25rem;line-height:1;transition:color .15s ease,transform .15s ease}.copy-btn:hover{color:#111827}.copy-btn:active{transform:scale(.95)}.copy-btn:focus-visible{outline:2px solid #4f46e5;outline-offset:2px}.copy-btn i{pointer-events:none}.copy-btn.is-copied{animation:copy-pop .3s ease;color:#16a34a}@keyframes copy-pop{0%{transform:scale(1)}50%{transform:scale(1.25)}100%{transform:scale(1)}}#copyNotification{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:#10b981;color:#fff;padding:.75rem 1.25rem;border-radius:.5rem;display:none;z-index:10000;box-shadow:0 4px 12px rgba(0,0,0,.15);font:500 0.875rem/1.25rem system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;animation:slideInFromBottom .3s ease-out}@keyframes slideInFromBottom{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}.color-value-display{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:.5rem;padding:.5rem 0;border-bottom:1px solid #eee}.color-value-display span:first-child{font-weight:700;min-width:60px}.color-value-display span:nth-child(2){font-family:monospace;flex-grow:1;text-align:left;margin-left:10px;word-break:break-all}.hex-input-container{position:relative}.hex-input-container .input{padding-left:2rem}.hex-input-container .icon{position:absolute;left:.5rem;top:50%;transform:translateY(-50%);color:#888}.export-buttons{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.share-link-container{margin-top:1rem;position:relative}.share-link-container .input{padding-right:2.5rem}.share-link-container .icon{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--primary-color)}.tool-box{background-color:#fff;border-radius:var(--radius-md);padding:var(--spacing-lg);height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:transform .3s ease,box-shadow .3s ease;box-shadow:var(--shadow-sm);border:1px solid var(--border-color)}.tool-box:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}.tool-box .icon{font-size:2.5rem;margin-bottom:var(--spacing-md);color:var(--primary-color)}.tool-box h3{margin-bottom:var(--spacing-sm);font-weight:600}.tool-box p{color:#666;font-size:.9rem;margin-top:.5rem}.seo-content{margin-top:var(--spacing-xl);padding-top:var(--spacing-lg);border-top:1px solid var(--border-color)}.seo-content h2{font-size:1.5rem;margin-bottom:var(--spacing-md)}@media screen and (max-width:768px){.tool-card{padding:var(--spacing-md)}.color-swatch{height:60px}.export-buttons{flex-direction:column}.export-buttons .button{width:100%}}.image-upload-area{border:2px dashed var(--border-color);border-radius:var(--radius-md);padding:var(--spacing-lg);text-align:center;background-color:#fafafa;cursor:pointer;transition:background-color .2s ease,border-color .2s ease}.image-upload-area:hover{background-color:#f0f0f0;border-color:#aaa}.image-upload-area.drag-over{background-color:#eef6fc;border-color:var(--info-color)}.wcag-pass{background-color:var(--success-color);color:#fff;padding:.2em .5em;border-radius:var(--radius-sm);font-size:.9em;font-weight:700}.wcag-fail{background-color:var(--danger-color);color:#fff;padding:.2em .5em;border-radius:var(--radius-sm);font-size:.9em;font-weight:700}.wcag-marginal{background-color:var(--warning-color);color:rgba(0,0,0,.7);padding:.2em .5em;border-radius:var(--radius-sm);font-size:.9em;font-weight:700}.sidebar{background-color:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--spacing-md);position:sticky;top:20px}.sidebar-title{font-size:1.2rem;font-weight:600;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-color)}.search-container{margin-bottom:var(--spacing-xl)}.search-input{border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:box-shadow .2s ease}.search-input:focus{box-shadow:var(--shadow-md)}.loading-spinner{display:inline-block;width:1.5rem;height:1.5rem;border:3px solid rgba(0,0,0,.1);border-radius:50%;border-top-color:var(--primary-color);animation:spin 1s ease-in-out infinite}#colorInfoModal .control.has-icons-right .icon.is-right.copy-btn{position:absolute;right:0;top:0;height:100%;width:2.375rem;display:flex;align-items:center;justify-content:center;padding:0;pointer-events:auto;color:#6b7280;cursor:pointer}#colorInfoModal .control.has-icons-right .icon.is-right.copy-btn:hover{color:#4f46e5}#colorInfoModal .control.has-icons-right .icon.is-right.copy-btn i{margin-right:0}#colorInfoModal .control.has-icons-right .input{padding-right:2.5em}#colorInfoModal{z-index:9999}#colorInfoModal .modal-background{z-index:9999}#colorInfoModal .modal-card{z-index:10000}.section.tool-seo{margin-top:2rem}.section.tool-seo .content{max-width:none}.section.tool-seo .content a{text-decoration:underline}.section.tool-seo .content h2{margin-top:.25rem}.section.tool-seo .content h3{margin-top:1.25rem}.section.tool-seo .content h4{margin-top:1rem}.instruction-box{background-color:#e6f3ff;border-left:5px solid #3273dc;padding:1rem;margin-bottom:1.5rem;border-radius:4px}.instruction-box .content{margin-bottom:0;line-height:1.6}.seo-card{background-color:#fff;border-radius:var(--radius-lg);border:1px solid var(--border-color);box-shadow:var(--shadow-md);padding:calc(var(--spacing-lg) + .5rem);margin-top:var(--spacing-xl);margin-bottom:var(--spacing-lg)}.seo-card:hover{box-shadow:var(--shadow-lg)}@keyframes spin{to{transform:rotate(360deg)}}.quick-actions{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;margin-top:16px;border-top:1px solid rgba(0,0,0,.08);border-radius:0 0 12px 12px;background:rgba(0,0,0,.02);gap:8px}.quick-actions__label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;margin-bottom:8px;width:100%}.quick-actions__group--left,.quick-actions__group--right{display:flex;gap:8px;flex-wrap:wrap}.quick-actions__btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;font-size:13px;font-weight:500;border-radius:8px;border:1px solid rgba(0,0,0,.1);background:#fff;cursor:pointer;transition:all .15s ease;color:#374151;white-space:nowrap}.quick-actions__btn:hover{background:#f5f5f5;border-color:rgba(0,0,0,.2)}.quick-actions__btn:active{transform:scale(.97)}.quick-actions__btn.copied{background:#10b981;color:#fff;border-color:transparent}@media (max-width:640px){.quick-actions{flex-direction:column;gap:6px;padding:10px 12px}.quick-actions__group--left,.quick-actions__group--right{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;width:100%}.quick-actions__group--left>:last-child:nth-child(odd),.quick-actions__group--right>:last-child:nth-child(odd){grid-column:1/-1}.quick-actions__btn{justify-content:center;padding:8px 10px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}}