:root{--bg: #fafafa;--bg-elev: #ffffff;--bg-soft: #f3f3f4;--fg: #1a1a1a;--fg-soft: #5e5e5e;--fg-mute: #8a8a8a;--border: #e5e5e7;--border-strong: #d0d0d3;--accent: #6366f1;--accent-soft: #eef2ff;--danger: #ef4444;--ok: #10b981;--shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .04);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--radius: 12px;--radius-sm: 8px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace}:root[data-theme=dark]{--bg: #0f0f10;--bg-elev: #1a1a1c;--bg-soft: #232326;--fg: #f4f4f5;--fg-soft: #b4b4b8;--fg-mute: #76767a;--border: #2c2c2f;--border-strong: #3a3a3d;--accent: #818cf8;--accent-soft: #1e1e2c;--shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 4px 12px rgba(0, 0, 0, .2);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .4)}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}#app{min-height:100vh;display:flex;flex-direction:column}button{font:inherit;cursor:pointer}input,button{font-family:inherit}.app-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--border);background:var(--bg-elev);position:sticky;top:0;z-index:10}.app-header__logo{font-weight:700;font-size:16px;letter-spacing:.5px}.app-main{flex:1;padding:var(--space-5);max-width:1200px;width:100%;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5)}.app-footer{border-top:1px solid var(--border);padding:var(--space-3) var(--space-5);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-2);color:var(--fg-mute);font-size:12px;background:var(--bg-elev)}.app-footer__hint{font-family:var(--mono);font-size:11px}.app-footer__link{color:var(--fg-mute);text-decoration:none;font-size:12px;transition:color .15s ease}.app-footer__link:hover{color:var(--accent)}.app-footer__shortcut{color:var(--fg-mute);font-size:11px}kbd{display:inline-block;padding:2px 6px;background:var(--bg-soft);border:1px solid var(--border);border-radius:4px;font-family:var(--mono);font-size:11px}.btn{appearance:none;border:1px solid var(--border);background:var(--bg-elev);color:var(--fg);padding:6px 12px;border-radius:var(--radius-sm);font-size:13px;transition:all .15s ease}.btn:hover{background:var(--bg-soft);border-color:var(--border-strong)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn--primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn--primary:hover{background:var(--accent);filter:brightness(1.08)}.btn--highlight{border-color:var(--accent);color:var(--accent)}.btn--highlight:hover{background:var(--accent-soft)}.btn--ghost{background:transparent;border-color:transparent;color:var(--fg-soft)}.btn--ghost:hover{background:var(--bg-soft);color:var(--fg)}.btn--xs{padding:2px 8px;font-size:12px}.block{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-5);box-shadow:var(--shadow);display:grid;grid-template-columns:240px 1fr;gap:var(--space-5);align-items:start}@media (max-width: 640px){.block{grid-template-columns:1fr}}.block__swatch{width:240px;height:240px;border-radius:var(--radius);box-shadow:var(--shadow);transition:background .15s ease;background-image:linear-gradient(45deg,#e5e5e5 25%,transparent 25%),linear-gradient(-45deg,#e5e5e5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e5e5e5 75%),linear-gradient(-45deg,transparent 75%,#e5e5e5 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.block__swatch--light{box-shadow:var(--shadow),inset 0 0 0 1px #0000000a}.block__info{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}.block__hex-input{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--mono);font-size:16px;font-weight:600;letter-spacing:1px;background:var(--bg);color:var(--fg);text-transform:uppercase;transition:border-color .15s ease,box-shadow .15s ease}.block__hex-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.block__rows{display:flex;flex-direction:column;gap:2px}.block__row{display:grid;grid-template-columns:48px 1fr 32px;align-items:center;gap:var(--space-3);padding:6px 8px;border-radius:var(--radius-sm);transition:background .15s ease}.block__row:hover{background:var(--bg-soft)}.block__row-label{font-size:12px;color:var(--fg-mute);font-weight:600;letter-spacing:.5px}.block__row-value{font-family:var(--mono);font-size:14px;color:var(--fg);word-break:break-all}.block__row-copy{background:transparent;border:none;cursor:pointer;font-size:14px;padding:4px;border-radius:4px;opacity:.5;transition:opacity .15s ease,background .15s ease}.block__row:hover .block__row-copy{opacity:1}.block__row-copy:hover{background:var(--bg-elev)}.block__export{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;padding-top:var(--space-2);border-top:1px dashed var(--border)}.block__export-label{font-size:12px;color:var(--fg-mute);font-weight:600}.picker{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-4);display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center;box-shadow:var(--shadow)}.sliders{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);box-shadow:var(--shadow)}.sliders__row{display:grid;grid-template-columns:24px 1fr 60px;align-items:center;gap:var(--space-3)}.sliders__label{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--fg-soft);text-align:center}.sliders__track{position:relative;display:flex;align-items:center;height:24px;border-radius:5px;border:1px solid var(--border);overflow:hidden}:root[data-theme=dark] .sliders__track{border-color:var(--border-strong)}.sliders__input{position:absolute;width:100%;height:100%;appearance:none;-webkit-appearance:none;background:transparent;margin:0;cursor:pointer}.sliders__input::-webkit-slider-runnable-track{background:transparent;height:100%}.sliders__input::-moz-range-track{background:transparent;height:100%}.sliders__input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--fg);border:3px solid var(--bg-elev);box-shadow:0 2px 6px #00000026;cursor:grab;transition:transform .1s ease,box-shadow .1s ease}.sliders__input::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 3px 10px #0003}.sliders__input::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.2)}.sliders__input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--fg);border:3px solid var(--bg-elev);box-shadow:0 2px 6px #00000026;cursor:grab}.sliders__value{font-family:var(--mono);font-size:13px;color:var(--fg-soft);text-align:right;min-width:60px}.scheme{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-5);box-shadow:var(--shadow)}.scheme__tabs{display:flex;gap:var(--space-1);margin-bottom:var(--space-3);flex-wrap:wrap}.scheme__tab{appearance:none;background:transparent;border:1px solid var(--border);color:var(--fg-soft);padding:6px 14px;border-radius:999px;font-size:13px;transition:all .15s ease}.scheme__tab:hover{background:var(--bg-soft)}.scheme__tab--active{background:var(--accent);border-color:var(--accent);color:#fff}.scheme__swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:var(--space-2)}.scheme__cell{appearance:none;border:1px solid var(--border);border-radius:var(--radius-sm);aspect-ratio:2 / 1;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.scheme__cell:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.contrast{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-5);box-shadow:var(--shadow)}.contrast__title{font-weight:600;margin-bottom:var(--space-3);font-size:14px;color:var(--fg)}.contrast__samples{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-3)}.contrast__cell{display:flex;flex-direction:column;gap:var(--space-2)}.contrast__swatch{height:80px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:18px;letter-spacing:1px;border:1px solid var(--border)}.contrast__ratio{font-family:var(--mono);font-size:12px;color:var(--fg-soft)}.contrast__badges{display:flex;gap:var(--space-1)}.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;font-family:var(--mono)}.badge--ok{background:#10b9811f;color:var(--ok)}.badge--no{background:#ef44441f;color:var(--danger)}:root[data-theme=dark] .badge--ok{background:#10b98133}:root[data-theme=dark] .badge--no{background:#ef444433}.history{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-5);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:var(--space-4)}.history__row{display:flex;flex-direction:column;gap:var(--space-2)}.history__head{display:flex;justify-content:space-between;align-items:center}.history__title{font-weight:600;font-size:13px;color:var(--fg)}.history__swatches{display:flex;gap:4px;flex-wrap:wrap;min-height:28px;align-items:center}.history__cell{width:28px;height:28px;border-radius:6px;border:1px solid var(--border);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.history__cell:hover{transform:scale(1.15);box-shadow:var(--shadow);z-index:1}.history__empty{font-size:12px;color:var(--fg-mute);font-style:italic}.help-modal{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(4px)}.help-modal__card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-5);min-width:280px;max-width:360px;box-shadow:var(--shadow-lg);position:relative}.help-modal__title{margin:0 0 var(--space-4);font-size:18px;font-weight:700;color:var(--fg)}.help-modal__close{position:absolute;top:var(--space-3);right:var(--space-3);background:none;border:none;font-size:24px;color:var(--fg-mute);cursor:pointer;padding:4px 8px;line-height:1}.help-modal__close:hover{color:var(--fg)}.help-modal__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}.help-modal__item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--border)}.help-modal__item:last-child{border-bottom:none}.help-modal__key{display:inline-block;min-width:60px;padding:4px 10px;background:var(--bg-soft);border:1px solid var(--border);border-radius:6px;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--fg);text-align:center}.help-modal__desc{font-size:14px;color:var(--fg-soft)}.image-picker{position:fixed;inset:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(4px)}.image-picker__stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}.image-picker__canvas{max-width:90vw;max-height:80vh;border-radius:var(--radius);cursor:crosshair;box-shadow:var(--shadow-lg)}.image-picker__tip{color:#fff;font-size:13px;opacity:.85}.toast-host{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:8px;z-index:200;pointer-events:none}.toast{background:var(--fg);color:var(--bg-elev);padding:10px 16px;border-radius:var(--radius-sm);font-size:13px;box-shadow:var(--shadow-lg);opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease;max-width:320px}.toast--show{opacity:1;transform:translateY(0)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-soft);border-radius:4px}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--fg-mute)}::selection{background:var(--accent-soft);color:var(--accent)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (max-width: 640px){.app-main{padding:var(--space-3);gap:var(--space-4)}.block{grid-template-columns:1fr;padding:var(--space-4)}.block__swatch{width:100%;height:180px}.app-header{padding:var(--space-3) var(--space-4)}.app-footer{flex-direction:column;align-items:flex-start;gap:var(--space-2)}.btn{min-height:44px;min-width:44px;padding:10px 16px}.sliders__input{height:32px}.sliders__input::-webkit-slider-thumb{width:28px;height:28px;margin-top:-9px}.scheme__tab{min-height:40px;padding:8px 16px}.history__cell{width:36px;height:36px}.block__hex-input{font-size:18px;padding:12px 16px}.btn,.scheme__tab,.history__cell,.scheme__cell{-webkit-user-select:none;user-select:none}html{scroll-behavior:smooth}body{overflow-x:hidden}}@media (max-width: 380px){.block__rows{gap:4px}.block__row{grid-template-columns:40px 1fr 28px;padding:8px 6px}.contrast__samples{grid-template-columns:1fr}}