:root{--background:#fff;--foreground:#171717;--panel-neutral:grey}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px}*,body{margin:0}*{box-sizing:border-box;padding:0}.container{background:#fff;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.3);padding:30px;max-width:1000px;width:100%}h1{color:#333;margin-bottom:6px;font-size:26px}.subtitle,h1{text-align:center}.subtitle{color:#666;margin-bottom:12px;font-size:13px}.lab-bar{text-align:center;background:#e8f4fd;color:#005999;font-family:monospace;font-size:12px;padding:6px 10px;border-radius:8px;margin:0 auto 14px;max-width:420px;box-shadow:inset 0 0 0 1px #c3d9e8;display:flex;justify-content:center;gap:14px;font-feature-settings:"tnum" 1,"lnum" 1,tabular-nums lining-nums;font-variant-numeric:tabular-nums lining-nums}.lab-bar .lab-val{white-space:pre;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace}.lab-bar .lab-label{font-weight:600}.color-converter{background:#fff;border-radius:20px;box-shadow:0 14px 40px rgba(0,0,0,.18);padding:26px 30px 30px;width:100%;max-width:1080px}.conversion-method{display:flex;justify-content:center;gap:12px;margin-bottom:18px;padding:10px 14px;background:#f0f4f8;border-radius:40px}.method-option{display:flex;align-items:center;gap:6px;cursor:pointer}.method-option input[type=radio]{cursor:pointer}.method-option label{cursor:pointer;font-size:12px;color:#334155;background:#fff;padding:6px 10px;border-radius:18px;box-shadow:0 1px 2px rgba(0,0,0,.08);transition:background .25s,color .25s}.method-info,.method-option input[type=radio]:checked+label{background:#667eea;color:#fff}.method-info{width:16px;height:16px;border-radius:50%;text-align:center;line-height:16px;font-size:11px;margin-left:2px;cursor:help;position:relative}.method-info:after{content:attr(data-tooltip);position:absolute;bottom:28px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:8px 12px;border-radius:8px;font-size:11px;line-height:1.35;white-space:normal;width:max-content;max-width:340px;box-shadow:0 4px 14px rgba(0,0,0,.35);z-index:20;opacity:0;pointer-events:none}.method-info[data-show="1"]:after{opacity:1}.color-panels{display:grid;grid-template-columns:1fr 1fr;grid-gap:22px;gap:22px}.panel{background:var(--panel-neutral);border-radius:12px;padding:16px 16px 18px}.panel-header{font-size:16px;font-weight:600;margin-bottom:14px;color:#f8f9fa;text-align:center;letter-spacing:.5px}.color-preview{width:100%;height:100px;border-radius:8px;margin-bottom:16px;border:1px solid #ddd;position:relative;overflow:hidden}.color-preview:after{content:"";position:absolute;inset:0;background:linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc),linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc);background-size:20px 20px;background-position:0 0,10px 10px;z-index:0}.color-preview .color-display{position:relative;width:100%;height:100%;z-index:1}.slider-group{margin-bottom:10px}.slider-label{display:flex;justify-content:space-between;margin-bottom:5px;font-size:13px;color:#f1f5f9}.slider{width:100%;height:10px;border-radius:5px;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ddd}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #667eea;cursor:pointer}.slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #667eea;cursor:pointer}.slider.c{background:linear-gradient(90deg,#fff,cyan)}.slider.m{background:linear-gradient(90deg,#fff,#f0f)}.slider.y{background:linear-gradient(90deg,#fff,#ff0)}.slider.k{background:linear-gradient(90deg,#fff,#000)}.slider.r{background:linear-gradient(90deg,#000,red)}.slider.g{background:linear-gradient(90deg,#000,lime)}.slider.b{background:linear-gradient(90deg,#000,blue)}.hex-group{position:relative;margin-top:12px;display:flex}.color-input{flex:1 1;padding:8px 38px 8px 10px;border:2px solid #e0e0e0;border-radius:8px;font-size:13px;transition:border-color .3s}.color-input:focus{outline:none;border-color:#667eea}.picker-btn{position:absolute;top:3px;right:3px;width:30px;height:30px;border:none;background:#667eea;color:#fff;border-radius:6px;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;transition:background .25s}.picker-btn:hover{background:#5a67d8}.picker-btn input[type=color]{position:absolute;inset:0;opacity:0;cursor:pointer}.values-display{margin-top:10px;padding:8px 10px;background:#fff;border-radius:8px;font-family:monospace;font-size:12px;color:#444;text-align:center;cursor:pointer;transition:background-color .2s,transform .1s;position:relative}.values-display:hover{background:#f0f8ff;box-shadow:inset 0 0 0 2px #e0ecff}.values-display:active{background:#e6f2ff}.values-display .copy-icon{font-size:14px;opacity:.6;margin-right:4px}.values-display:hover .copy-icon{opacity:1}.values-display[data-state=copied]:after{content:"Copied!";position:absolute;top:4px;right:8px;font-size:10px;color:#22c55e}.values-display[data-state=idle]:after{content:"Copy";position:absolute;top:4px;right:8px;font-size:10px;color:#94a3b8}.values-display.hex-display{background:#f5f5f5;margin-top:8px}.values-display.hex-display:hover{background:#e8e8ff}.warning-note{background:#fff9e6;border:1px solid #fc0;border-radius:8px;padding:8px 12px;margin-top:16px;font-size:11px;color:#960;text-align:center}.advanced-settings{display:flex;flex-wrap:wrap;gap:12px;background:#f1f1f1;padding:10px 14px;border-radius:10px;margin-bottom:16px}.advanced-row{display:flex;align-items:center;gap:8px;font-size:12px}.advanced-row label{font-weight:500}.adv-ref{font-size:12px;text-decoration:none;color:#4256d9;opacity:.9;margin-left:6px;position:relative;top:-1px;padding:2px 6px 3px;border-radius:6px;background:rgba(102,126,234,.14);line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:background .2s,color .2s,opacity .2s}.adv-ref:hover{background:rgba(102,126,234,.28);color:#1e3aa9;opacity:1;text-decoration:none}.adv-ref[data-tooltip]:after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translate(-50%,-10px);background:#222;color:#fff;padding:10px 14px 11px;border-radius:10px;font-size:11px;line-height:1.4;white-space:normal;width:max-content;max-width:440px;box-shadow:0 6px 18px rgba(0,0,0,.45);z-index:40;text-align:left;opacity:0;pointer-events:none}.adv-ref[data-show="1"]:after{opacity:1}.advanced-value{font-size:11px;color:#333;display:flex;align-items:center;gap:2px;font-feature-settings:"tnum" 1,"lnum" 1,tabular-nums lining-nums;font-variant-numeric:tabular-nums lining-nums}.advanced-value .adv-num{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;white-space:pre;display:inline-block;min-width:2.2ch;text-align:right}.advanced-value .adv-percent{font-weight:600}.advanced-settings input[type=range]{width:120px}.method-comparison{margin-top:18px;background:#f8f8f8;padding:12px 14px;border-radius:10px;box-shadow:inset 0 0 0 1px #ddd}.method-comparison .mc-header{font-size:13px;font-weight:600;margin-bottom:8px}.mc-table{width:100%;border-collapse:collapse;font-size:11px}.mc-table td,.mc-table th{padding:4px 6px;text-align:left}.mc-table th{background:#ececec;font-weight:600}.mc-table tbody tr:nth-child(odd){background:#fafafa}.mc-table tbody tr:nth-child(2n){background:#f3f3f3}.mc-table .num-group{white-space:pre;font-feature-settings:"tnum" 1,"lnum" 1,tabular-nums lining-nums;font-variant-numeric:tabular-nums lining-nums}.mc-table .num-group .num{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;display:inline-block}@media (max-width:768px){.color-panels{grid-template-columns:1fr}.conversion-method{flex-direction:column;gap:10px}}