:root{--cc-primary:#6366f1;--cc-primary-hover:#4f46e5;--cc-text:#1e293b;--cc-text-muted:#64748b;--cc-bg:#fff;--cc-bg-secondary:#f1f5f9;--cc-border:#e2e8f0;--cc-shadow:0 1px 3px #0000001a;--cc-shadow-lg:0 8px 24px #0000001f;--cc-radius:10px;--cc-radius-lg:16px;--cc-radius-xl:24px;--cc-radius-full:9999px}._cc-container{max-width:700px;margin:0 auto}._cc-main-card{background:var(--cc-bg);border-radius:var(--cc-radius-xl);box-shadow:var(--cc-shadow-lg);border-style:solid;border-width:1px;border-color:var(--cc-border);overflow:hidden}@media (max-width:640px){._cc-container{padding-left:var(--main-space-3);padding-right:var(--main-space-3)}._cc-main-card{border-radius:var(--cc-radius-lg)}}._cc-tabs-wrapper{margin-bottom:var(--main-space-5)}._cc-tabs{gap:var(--main-space-2);flex-wrap:wrap;justify-content:center;display:flex}._cc-tab{padding:var(--main-space-2) var(--main-space-4);background:var(--cc-bg);border-style:solid;border-width:1px;border-color:var(--cc-border);border-radius:var(--cc-radius-full);color:var(--cc-text-muted);font-size:var(--main-text-sm);cursor:pointer;white-space:nowrap;font-weight:500;transition:all .2s}._cc-tab:hover{color:var(--cc-text);border-color:var(--cc-primary);background:#6366f114}._cc-tab._cc-tab-active{background:var(--cc-primary);border-color:var(--cc-primary);color:#fff;box-shadow:0 4px 12px #6366f159}._cc-tab._cc-tab-active:hover{color:#fff;background:var(--cc-primary-hover)}._cc-tab-content{display:none}._cc-tab-content._cc-tab-active{display:block}@media (max-width:640px){._cc-tabs{gap:6px}._cc-tab{font-size:var(--main-text-xs);padding:8px 14px}}._cc-color-display{background:var(--cc-bg-secondary);padding:var(--main-space-6);padding-bottom:calc(var(--main-space-6) + 28px);justify-content:center;align-items:center;display:flex}._cc-color-preview-wrapper{position:relative}._cc-color-preview-large{border-radius:var(--cc-radius-xl);cursor:pointer;background:#3b82f6;width:140px;height:140px;transition:box-shadow .3s,background .2s;box-shadow:0 8px 32px #3b82f666,inset 0 0 0 1px #ffffff26}._cc-color-preview-large:hover{box-shadow:0 12px 40px #3b82f680,inset 0 0 0 1px #fff3}._cc-color-picker-hidden{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0}._cc-pick-hint{color:var(--cc-text-muted);white-space:nowrap;opacity:.7;align-items:center;gap:6px;font-size:11px;font-weight:500;display:flex;position:absolute;bottom:-28px;left:50%;transform:translate(-50%)}._cc-pick-hint svg{color:var(--cc-primary)}._cc-converter-grid{padding:var(--main-space-5);align-items:stretch;gap:0;display:flex}._cc-field{gap:var(--main-space-2);padding:var(--main-space-4);background:var(--cc-bg);flex-direction:column;flex:1;display:flex;position:relative}._cc-field._cc-field-input{border-radius:var(--cc-radius-lg) 0 0 var(--cc-radius-lg);border-style:solid;border-width:2px;border-color:var(--cc-border);background:linear-gradient(135deg,#6366f108 0%,#0000 100%);border-right:none}._cc-field._cc-field-output{border-radius:0 var(--cc-radius-lg) var(--cc-radius-lg) 0;border-style:solid;border-width:2px;border-color:var(--cc-border);background:linear-gradient(135deg,#10b98108 0%,#0000 100%)}._cc-converter-arrow{background:var(--cc-bg);border-top-style:solid;border-top-width:2px;border-bottom-style:solid;border-bottom-width:2px;border-top-color:var(--cc-border);border-bottom-color:var(--cc-border);width:40px;color:var(--cc-primary);flex-shrink:0;justify-content:center;align-items:center;display:flex}._cc-label{align-items:center;gap:var(--main-space-2);background:var(--cc-bg-secondary);border-radius:var(--cc-radius-full);color:var(--cc-text);text-transform:uppercase;letter-spacing:.03em;padding:6px 12px;font-size:11px;font-weight:700;display:inline-flex}._cc-label svg{color:var(--cc-primary)}._cc-label._cc-label-input{background:linear-gradient(135deg,#6366f11a 0%,#6366f10d 100%);border:1px solid #6366f133}._cc-label._cc-label-output{background:linear-gradient(135deg,#10b9811a 0%,#10b9810d 100%);border:1px solid #10b98133}._cc-label._cc-label-output svg{color:var(--main-success)}._cc-input-wrapper{position:relative}._cc-input{width:100%;height:52px;padding:0 var(--main-space-4);background:var(--cc-bg);border-style:solid;border-width:2px;border-color:var(--cc-border);border-radius:var(--cc-radius-lg);font-size:var(--main-text-base);font-family:var(--main-font-mono);color:var(--cc-text);font-weight:600;transition:border-color .2s,box-shadow .2s}._cc-input:focus{border-color:var(--cc-primary);outline:none;box-shadow:0 0 0 4px #6366f11f}._cc-input::placeholder{color:var(--cc-text-muted);opacity:.6;font-weight:400}._cc-input._cc-input-error{border-color:var(--main-error);box-shadow:0 0 0 4px #ef44441f}._cc-output-wrapper{position:relative}._cc-output{width:100%;height:52px;padding:0 var(--main-space-4);background:var(--cc-bg-secondary);border-radius:var(--cc-radius-lg);font-size:var(--main-text-base);font-family:var(--main-font-mono);color:var(--cc-text);border:2px solid #0000;align-items:center;padding-right:52px;font-weight:600;display:flex}._cc-copy-btn{background:var(--cc-bg);border-style:solid;border-width:1px;border-color:var(--cc-border);border-radius:var(--cc-radius);width:36px;height:36px;color:var(--cc-text-muted);cursor:pointer;justify-content:center;align-items:center;transition:all .15s;display:flex;position:absolute;top:50%;right:8px;transform:translateY(-50%)}._cc-copy-btn:hover{color:var(--cc-primary);border-color:var(--cc-primary);background:#6366f114}._cc-copy-btn._cc-copied{color:var(--main-success);border-color:var(--main-success);background:#10b98114}._cc-all-formats{border-top-style:solid;border-top-width:1px;border-top-color:var(--cc-border)}._cc-formats-toggle{justify-content:center;align-items:center;gap:var(--main-space-2);width:100%;padding:var(--main-space-3) var(--main-space-4);font-size:var(--main-text-sm);color:var(--cc-text-muted);cursor:pointer;background:0 0;border:none;font-weight:500;transition:all .2s;display:flex}._cc-formats-toggle:hover{color:var(--cc-text);background:var(--cc-bg-secondary)}._cc-formats-toggle svg{transition:transform .2s}._cc-formats-toggle._cc-expanded svg{transform:rotate(180deg)}._cc-formats-content{padding:0 var(--main-space-5) var(--main-space-5);display:none}._cc-formats-content._cc-show{padding-top:var(--main-space-4);display:block}._cc-formats-grid{gap:var(--main-space-2);grid-template-columns:repeat(2,1fr);display:grid}._cc-format-item{align-items:center;gap:var(--main-space-2);padding:var(--main-space-3);background:var(--cc-bg-secondary);border-radius:var(--cc-radius);transition:background .15s;display:flex}._cc-format-item:hover{background:var(--cc-border)}._cc-format-label{color:var(--cc-primary);text-transform:uppercase;min-width:36px;font-size:10px;font-weight:700}._cc-format-value{font-size:var(--main-text-xs);font-family:var(--main-font-mono);color:var(--cc-text);white-space:nowrap;text-overflow:ellipsis;flex:1;font-weight:500;overflow:hidden}._cc-format-copy{width:24px;height:24px;color:var(--cc-text-muted);cursor:pointer;opacity:0;background:0 0;border:none;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;transition:all .15s;display:flex}._cc-format-item:hover ._cc-format-copy{opacity:1}._cc-format-copy:hover{color:var(--cc-primary);background:var(--cc-bg)}._cc-format-copy._cc-copied{color:var(--main-success);opacity:1}@media (max-width:640px){._cc-color-display{padding:var(--main-space-5)}._cc-color-preview-large{border-radius:var(--cc-radius-lg);width:100px;height:100px}._cc-pick-hint{font-size:10px;bottom:-24px}._cc-converter-grid{padding:var(--main-space-4);flex-direction:column}._cc-field._cc-field-input{border-radius:var(--cc-radius-lg) var(--cc-radius-lg) 0 0;border-right-style:solid;border-right-width:2px;border-right-color:var(--cc-border);border-bottom:none}._cc-field._cc-field-output{border-radius:0 0 var(--cc-radius-lg) var(--cc-radius-lg)}._cc-converter-arrow{border-style:none solid;border-width:medium 2px;border-top-color:currentColor;border-bottom-color:currentColor;border-left-color:var(--cc-border);border-right-color:var(--cc-border);width:100%;height:36px}._cc-converter-arrow svg{transform:rotate(90deg)}._cc-input,._cc-output{height:48px;font-size:var(--main-text-sm)}._cc-formats-content{padding:0 var(--main-space-4) var(--main-space-4)}._cc-formats-grid{grid-template-columns:1fr}._cc-format-copy{opacity:1}}