:root{--page-bg:#e9e9e9;--card-bg:#ffffff;--panel-bg:#f7f8fa;--border:#d8dce2;--text:#20242a;--muted:#6f7782;--accent:#1683ff;--accent-dark:#0869d6;--success:#16834b;--danger:#d83a3a;--shadow:0 18px 55px rgba(0,0,0,.12);--radius:18px;}*{box-sizing:border-box;}html,body{min-height:100%;margin:0;}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);background:radial-gradient(circle at 50% 0%,#ffffff 0,#f4f4f4 34%,var(--page-bg) 100%);display:flex;justify-content:center;align-items:center;padding:28px;}button,input{font:inherit;}.app{width:min(1120px,100%);background:var(--card-bg);border:1px solid rgba(0,0,0,.06);border-radius:24px;box-shadow:var(--shadow);overflow:hidden;}.header{text-align:center;padding:30px 28px 22px;border-bottom:1px solid #eceef1;}.header h1{margin:0;font-size:clamp(25px,4vw,36px);letter-spacing:-.7px;}.header p{margin:8px auto 0;color:var(--muted);font-size:14px;max-width:720px;}.content{padding:28px;}.picker-layout{display:grid;grid-template-columns:minmax(300px,1.05fr) minmax(300px,.95fr);gap:26px;align-items:stretch;}.panel{background:var(--panel-bg);border:1px solid var(--border);border-radius:var(--radius);padding:20px;}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;}.panel-title h2{margin:0;font-size:17px;}.panel-title span{color:var(--muted);font-size:12px;}.picker{width:100%;}.sv-area{position:relative;height:310px;border-radius:12px;overflow:hidden;cursor:crosshair;touch-action:none;background:hsl(var(--picker-hue,145) 100% 50%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);}.sv-area::before,.sv-area::after{content:"";position:absolute;inset:0;pointer-events:none;}.sv-area::before{background:linear-gradient(to right,#fff,transparent);}.sv-area::after{background:linear-gradient(to top,#000,transparent);}.picker-cursor{position:absolute;z-index:2;width:20px;height:20px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1.5px rgba(0,0,0,.55),0 1px 5px rgba(0,0,0,.25);transform:translate(-50%,-50%);pointer-events:none;}.slider{position:relative;height:34px;margin-top:10px;border-radius:8px;cursor:pointer;touch-action:none;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);}.hue-slider{background:linear-gradient(to right,#ff0000 0%,#ffff00 16.66%,#00ff00 33.33%,#00ffff 50%,#0000ff 66.66%,#ff00ff 83.33%,#ff0000 100%);}.alpha-slider{background-image:linear-gradient(45deg,#d9d9d9 25%,transparent 25%),linear-gradient(-45deg,#d9d9d9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d9d9d9 75%),linear-gradient(-45deg,transparent 75%,#d9d9d9 75%);background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0;}.alpha-fill{position:absolute;inset:0;}.slider-thumb{position:absolute;top:50%;width:15px;height:42px;transform:translate(-50%,-50%);background:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.25);border-radius:6px;box-shadow:0 1px 5px rgba(0,0,0,.22);pointer-events:none;}.preview-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px;}.preview-box{min-height:58px;border-radius:10px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;font-size:12px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);background:#ffffff;}.color-code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;font-weight:700;overflow-wrap:anywhere;}.fields{display:grid;gap:13px;}.field-group{background:#fff;border:1px solid var(--border);border-radius:12px;padding:13px;}.field-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;}.field-heading label{font-weight:700;font-size:13px;}.field-heading small{color:var(--muted);font-size:11px;}.rgba-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}.rgba-cell label{display:block;color:var(--muted);font-size:11px;margin:0 0 4px 2px;}.input-wrap{display:flex;gap:8px;align-items:stretch;}input[type="text"],input[type="number"]{width:100%;height:42px;border:1px solid #bfc5cd;border-radius:8px;background:#fff;color:var(--text);outline:none;padding:0 11px;transition:border-color .15s,box-shadow .15s,background .15s;}input[type="number"]{text-align:center;padding:0 5px;}input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(22,131,255,.12);}input.invalid{border-color:var(--danger);background:#fff7f7;}.copy-btn{flex:0 0 76px;border:1px solid #bfc5cd;border-radius:8px;background:#fff;color:#353b43;cursor:pointer;font-weight:700;font-size:12px;transition:.15s;}.copy-btn:hover{border-color:var(--accent);color:var(--accent-dark);background:#f4f9ff;}.copy-btn.copied{color:var(--success);border-color:#75c99b;background:#f1fff7;}.hint{min-height:16px;margin-top:7px;color:var(--muted);font-size:11px;}.hint.error{color:var(--danger);}.status{margin-top:16px;padding:11px 13px;border-radius:9px;font-size:12px;text-align:center;background:#edf7ff;color:#285f88;border:1px solid #cfe9fb;}.bottom{margin-top:25px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;}.reset-btn{border:0;border-radius:9px;padding:10px 18px;background:#242a31;color:#fff;cursor:pointer;font-weight:700;}.reset-btn:hover{background:#11151a;}.format-note{text-align:center;margin:18px 0 0;color:var(--muted);font-size:11px;line-height:1.6;}.format-note code{background:#eef0f3;padding:2px 5px;border-radius:4px;}.footer{text-align:center;color:#8a9098;font-size:11px;padding:0 28px 25px;}@media (max-width:800px){body{padding:12px;align-items:flex-start;}.app{margin:12px 0;}.content{padding:17px;}.picker-layout{grid-template-columns:1fr;}.sv-area{height:270px;}}@media (max-width:460px){.header{padding:23px 17px 18px;}.header h1{font-size:24px;}.panel{padding:14px;}.rgba-grid{grid-template-columns:repeat(2,1fr);}.input-wrap{flex-direction:column;}.copy-btn{flex-basis:auto;height:38px;}}