:root{--h2r-bg:#0a0a0c;--h2r-surface:#121216;--h2r-surface-2:#1a1a1f;--h2r-border:#28282e;--h2r-text:#f2f2f4;--h2r-muted:#8c8c94;--h2r-accent:#0ea5e9;--h2r-accent-hover:#38bdf8;--h2r-radius:12px;--h2r-radius-sm:8px;--h2r-shadow:0 4px 20px rgba(0,0,0,0.2);--h2r-focus:0 0 0 3px rgba(14,165,233,0.35);--h2r-checker:#2a2a30;}
.h2r-tool{background:var(--h2r-surface);border:1px solid var(--h2r-border);border-radius:var(--h2r-radius);box-shadow:var(--h2r-shadow);padding:1.25rem;display:flex;flex-direction:column;gap:1.25rem;margin-bottom:2rem;}
.h2r-row-input{display:flex;flex-wrap:wrap;gap:0.75rem;align-items:flex-end;}
.h2r-hex-wrap{flex:1;min-width:0;min-width:120px;}
.h2r-label{display:block;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--h2r-muted);margin-bottom:0.375rem;}
.h2r-hex-group{display:flex;align-items:center;background:var(--h2r-surface-2);border:1px solid var(--h2r-border);border-radius:var(--h2r-radius-sm);overflow:hidden;}
.h2r-hex-prefix{color:var(--h2r-muted);padding:0.625rem 0.5rem 0.625rem 0.875rem;font-size:0.9375rem;font-weight:600;}
.h2r-hex-input{flex:1;min-width:0;background:transparent;border:none;color:var(--h2r-text);font-size:1rem;font-weight:600;padding:0.625rem 0.875rem;letter-spacing:0.04em;}
.h2r-hex-input::placeholder{color:var(--h2r-muted);opacity:0.7;}
.h2r-hex-input:focus{outline:none;}
.h2r-hex-group:focus-within{box-shadow:var(--h2r-focus);border-color:var(--h2r-accent);}
.h2r-picker-wrap{flex-shrink:0;}
.h2r-picker{width:48px;height:40px;padding:3px;border:1px solid var(--h2r-border);border-radius:var(--h2r-radius-sm);cursor:pointer;background:var(--h2r-surface-2);display:block;}
.h2r-picker::-webkit-color-swatch-wrapper{padding:2px;}
.h2r-picker::-webkit-color-swatch{border:none;border-radius:4px;}
.h2r-picker::-moz-color-swatch{border:none;border-radius:4px;}
.h2r-preview{min-height:120px;border-radius:var(--h2r-radius-sm);border:1px solid var(--h2r-border);overflow:hidden;position:relative;background-color:var(--h2r-checker);background-image:linear-gradient(45deg,var(--h2r-checker) 25%,transparent 25%),linear-gradient(-45deg,var(--h2r-checker) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--h2r-checker) 75%),linear-gradient(-45deg,transparent 75%,var(--h2r-checker) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;}
.h2r-preview-inner{width:100%;height:100%;min-height:120px;border-radius:calc(var(--h2r-radius-sm) - 1px);}
.h2r-alpha-row{display:flex;flex-direction:column;gap:0.5rem;}
.h2r-alpha-controls{display:flex;align-items:center;gap:0.75rem;}
.h2r-alpha-slider{flex:1;min-width:0;height:8px;-webkit-appearance:none;appearance:none;background:var(--h2r-surface-2);border-radius:4px;border:1px solid var(--h2r-border);}
.h2r-alpha-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--h2r-text);border:2px solid var(--h2r-accent);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.3);}
.h2r-alpha-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--h2r-text);border:2px solid var(--h2r-accent);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.3);}
.h2r-alpha-value-wrap{display:flex;align-items:center;gap:0.25rem;flex-shrink:0;}
.h2r-alpha-num{width:3.5rem;padding:0.5rem 0.375rem;font-size:0.9375rem;font-weight:600;text-align:center;background:var(--h2r-surface-2);border:1px solid var(--h2r-border);border-radius:var(--h2r-radius-sm);color:var(--h2r-text);}
.h2r-alpha-num:focus{outline:none;box-shadow:var(--h2r-focus);border-color:var(--h2r-accent);}
.h2r-alpha-unit{font-size:0.875rem;font-weight:600;color:var(--h2r-muted);}
.h2r-output{display:flex;flex-direction:column;gap:0.75rem;}
.h2r-output-main{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;background:var(--h2r-surface-2);border:1px solid var(--h2r-border);border-radius:var(--h2r-radius-sm);padding:0.75rem 1rem;}
.h2r-output-label{font-size:0.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--h2r-accent);}
.h2r-output-code{font-size:0.9375rem;font-weight:600;color:var(--h2r-text);word-break:break-all;}
.h2r-output-main .h2r-output-code{font-size:1rem;}
.h2r-output-list{display:flex;flex-wrap:wrap;gap:0.5rem;}
.h2r-output-item{display:flex;align-items:center;gap:0.375rem;flex-wrap:wrap;background:var(--h2r-surface-2);border:1px solid var(--h2r-border);border-radius:var(--h2r-radius-sm);padding:0.5rem 0.75rem;min-width:0;}
.h2r-output-tag{font-size:0.625rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--h2r-muted);}
.h2r-copy{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:6px;background:transparent;color:var(--h2r-muted);cursor:pointer;transition:color 0.2s,background 0.2s;margin-left:auto;}
.h2r-copy:hover{color:var(--h2r-accent);background:rgba(14,165,233,0.15);}
.h2r-copy:active{transform:scale(0.96);}
.h2r-output-item .h2r-copy{width:28px;height:28px;margin-left:0;}
.h2r-presets{display:flex;flex-wrap:wrap;gap:0.5rem;}
.h2r-preset{padding:0.5rem 0.875rem;font-size:0.8125rem;font-weight:600;border:1px solid var(--h2r-border);border-radius:var(--h2r-radius-sm);background:var(--h2r-surface-2);color:var(--h2r-text);cursor:pointer;transition:border-color 0.2s,background 0.2s,transform 0.1s;}
.h2r-preset:hover{border-color:var(--h2r-accent);background:rgba(14,165,233,0.1);}
.h2r-preset:active{transform:scale(0.98);}
.h2r-css-block{background:var(--h2r-surface-2);border:1px solid var(--h2r-border);border-radius:var(--h2r-radius-sm);padding:1rem;}
.h2r-css-title{font-size:0.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--h2r-muted);margin:0 0 0.625rem;}
.h2r-css-lines{display:flex;flex-direction:column;gap:0.5rem;}
.h2r-css-line{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;font-size:0.8125rem;color:var(--h2r-muted);}
.h2r-css-line code{font-size:0.8125rem;color:var(--h2r-text);word-break:break-all;}
.h2r-copy-sm{width:26px;height:26px;}
.h2r-toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);padding:0.625rem 1.25rem;font-size:0.875rem;font-weight:600;background:var(--h2r-surface-2);border:1px solid var(--h2r-border);border-radius:var(--h2r-radius-sm);color:var(--h2r-text);box-shadow:var(--h2r-shadow);z-index:9999;transition:opacity 0.2s,transform 0.2s;}
.h2r-toast[hidden]{opacity:0;transform:translateX(-50%) translateY(8px);pointer-events:none;}
.bmc-color .container{--text-muted:var(--h2r-muted);}
@media (min-width:480px){.h2r-tool{padding:1.5rem;gap:1.5rem;}.h2r-preview{min-height:140px;}.h2r-preview-inner{min-height:140px;}}
@media (min-width:640px){.h2r-output-main{padding:0.875rem 1.25rem;}.h2r-output-main .h2r-output-code{font-size:1.0625rem;}}
@media (prefers-color-scheme:light){:root{--h2r-bg:#f6f6f8;--h2r-surface:#fff;--h2r-surface-2:#f0f0f4;--h2r-border:#e2e2e8;--h2r-text:#1a1a1e;--h2r-muted:#6b6b72;--h2r-accent:#0284c7;--h2r-accent-hover:#0ea5e9;--h2r-shadow:0 2px 12px rgba(0,0,0,0.06);--h2r-focus:0 0 0 3px rgba(2,132,199,0.25);--h2r-checker:#e8e8ec;}}