:root{--primary-color: #2f5fb8;--secondary-color: #4f6287;--font-color: #273043;--bg-color: #f5f8ff;--surface-color: #ffffff;--border-color: #d7dfea;--heading-color: #273043}[data-theme=dark]{--primary-color: #8ab4ff;--secondary-color: #a7b5d6;--font-color: #e6edf8;--bg-color: #151a24;--surface-color: #1e2532;--border-color: #334159;--heading-color: #e6edf8}*{box-sizing:border-box;font-family:Consolas,Courier New,monospace}html,body,#root{height:100%;margin:0}body{background-color:var(--bg-color);color:var(--font-color)}a,a:visited{color:var(--primary-color)}.App{min-height:100%;display:flex;flex-direction:column}.top{height:10px;background:linear-gradient(90deg,#ff3b30,#34c759,#007aff)}.appHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--border-color);background:var(--surface-color)}.appBrand{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:30px}.appBrandMeta{display:inline-flex;align-items:baseline;gap:8px}.appLogo{width:26px;height:26px;object-fit:contain}.appTitle{display:inline-flex;align-items:center;color:var(--heading-color);font-size:1.12rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1}.appVersion{color:var(--secondary-color);font-size:.75rem;font-weight:600;white-space:nowrap}.themeSwitch{display:inline-flex;align-items:center;gap:8px;color:var(--secondary-color);font-size:.85rem}.themeSwitch>select{min-width:95px;height:30px;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-color);color:var(--font-color);padding:0 8px}.content{width:min(1240px,100%);margin:0 auto;padding:16px 14px;flex:1}.infoText{margin:10px 0 0;color:var(--secondary-color);font-size:.85rem;text-align:left}.footer{border-top:1px solid var(--border-color);padding:8px 12px;text-align:center;font-size:.75rem}@media(max-width:640px){.appHeader{flex-wrap:wrap;align-items:flex-start;padding:8px 10px}.appBrandMeta{gap:4px}.appTitle{font-size:.9rem}.appVersion{font-size:.64rem}.appLogo{width:20px;height:20px}.appBrand{min-height:28px}.themeSwitch{margin-left:auto;font-size:.8rem}.themeSwitch>select{min-width:86px;height:28px}.content{padding:10px 8px}.infoText{font-size:.8rem}}:root{--link-color: #5f77ab;--link-color-hover: #25365b;--input-color: #6a7896;--input-border: #ccd6ea;--input-background: #fff;--input-placeholder: #b7c1d6;--input-border-focus: #2f5fb8;--group-color: var(--input-color);--group-border: var(--input-border);--group-background: #edf3ff;--group-color-focus: #fff;--group-border-focus: var(--input-border-focus);--group-background-focus: #5a80d6;--control-height: 30px}[data-theme=dark]{--link-color: #8cb3ff;--link-color-hover: #c4d8ff;--input-color: #c0ccdf;--input-border: #43506b;--input-background: #1e2532;--input-placeholder: #7f8ba4;--input-border-focus: #8ab4ff;--group-color: #c5d1e5;--group-border: #43506b;--group-background: #2b3345;--group-color-focus: #0f1625;--group-border-focus: #8ab4ff;--group-background-focus: #8ab4ff}.colors-list{margin:8px 0 0;display:grid;border-radius:6px;border:1px solid var(--group-border);overflow-x:auto;overflow-y:hidden}.color-row{display:grid;grid-template-columns:minmax(88px,112px) 1fr 1fr 1fr 1fr;min-width:440px}.colorItem{justify-self:start;line-height:1.8em}.colorItem>*{background:none}.rDiff,.gDiff,.bDiff,.absDiff{line-height:1.8em;min-width:35px;width:100%;font-size:.9rem;text-align:center;background:#ff00001a}.gDiff{background:#00ff001a}.bDiff{background:#0000ff1a}.absDiff{background:#0000001a}.colors-list__color{padding:.2rem .4rem .2rem 1.8rem;margin:.1rem .2rem;cursor:pointer;color:var(--link-color);border:0;text-align:right;position:relative;text-transform:uppercase;font-size:1rem;line-height:1}.colors-list__color:hover{color:var(--link-color-hover)}.colors-list__color:after{content:"";position:absolute;background:var(--color);border-radius:50px;height:.95rem;width:.95rem;left:5px;top:2px;box-shadow:0 0 0 1px #0000007f}.colorInputContainer{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 10px}.colorInput{position:relative;display:flex;align-items:center}.inputColorSwatch{width:28px;aspect-ratio:1;height:var(--control-height);margin-left:0;border-radius:0;border:1px solid var(--group-border);background:var(--preview-color)}.colorInputField{width:116px;display:flex;margin:0;padding-right:15px}.colorInput>label,.colorInput>input{margin:0;height:var(--control-height);line-height:calc(var(--control-height) - 2px);padding:0 8px;font-size:.9rem;font-family:inherit;box-sizing:border-box;color:var(--group-color);border:solid 1px var(--group-border);transition:background .2s ease,border .2s ease,color .2s ease}.colorInput>label{border-radius:6px 0 0 6px;background:var(--group-background);font-weight:700;min-width:6.2em;text-align:center;border-right:none}.colorInput>input{border-radius:0 6px 6px 0;border-left:none;min-width:90px;width:120px;color:var(--input-color);background:var(--input-background)}.colorInput>input::placeholder{color:var(--input-placeholder)}.colorInput>input:focus{outline:none;border-color:var(--input-border-focus)}.colorInput>input:hover{background:color-mix(in srgb,var(--input-background) 92%,#ffffff 8%)}.colorInput:focus-within>label{color:var(--group-color-focus);background:var(--group-background-focus);border-color:var(--group-border-focus)}.clearInputBtn{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:.95em;color:#7b869c;padding:0;line-height:1;z-index:2}.mixModeControl{display:inline-flex;align-items:center;justify-content:flex-end;gap:10px;margin-left:auto}.mixModeText{color:var(--group-color);font-size:.8rem;font-weight:700}.mixModeHint{cursor:help;text-decoration:underline dotted;text-underline-offset:2px}.mixModeSeparator{color:var(--secondary-color, var(--group-color))}.mixModeSwitch{position:relative;display:inline-block;width:38px;height:22px}.mixModeSwitch input{opacity:0;width:0;height:0}.mixModeSlider{position:absolute;inset:0;cursor:pointer;background-color:var(--group-border);transition:.2s;border-radius:999px}.mixModeSlider:before{content:"";position:absolute;height:16px;width:16px;left:3px;top:3px;background-color:#fff;transition:.2s;border-radius:50%}.mixModeSwitch input:checked+.mixModeSlider{background-color:var(--input-border-focus)}.mixModeSwitch input:checked+.mixModeSlider:before{transform:translate(16px)}.copyToast{position:fixed;right:14px;top:14px;z-index:1200;max-width:min(320px,calc(100vw - 28px));padding:10px 12px;border-radius:8px;color:#fff;font-size:.82rem;font-weight:700;line-height:1.35;box-shadow:0 10px 24px #0000004d;pointer-events:none;animation:copyToastIn .18s ease-out}.copyToast--success{background:#2f8f4e}.copyToast--error{background:#c63838}@keyframes copyToastIn{0%{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.header-row{background:var(--group-background);color:var(--group-color);padding:4px;border-bottom:1px solid var(--group-border)}.header-row>div{font-weight:700;font-size:.9rem;padding:0 5px}.header-row>div:not(:first-child){text-align:center}@media(max-width:640px){:root{--control-height: 30px}.colorInputContainer{flex-direction:column;align-items:stretch;gap:6px}.colorInput{width:100%}.colorInput>label{min-width:7.6em;font-size:.85rem;display:flex;align-items:center;justify-content:center;line-height:1.15;white-space:normal}.colorInput>input{width:100%;min-width:0}.mixModeControl{width:100%;margin-left:0;justify-content:flex-end}.colors-list__color{font-size:.92rem}}