:root{--cnf-primary:#6366f1;--cnf-primary-hover:#4f46e5;--cnf-text:#1e293b;--cnf-text-muted:#64748b;--cnf-bg:#fff;--cnf-bg-secondary:#f8fafc;--cnf-border:#e2e8f0;--cnf-shadow:0 1px 3px #0000001a;--cnf-shadow-lg:0 8px 24px #0000001f;--cnf-radius:10px;--cnf-radius-lg:16px;--cnf-radius-xl:20px;--cnf-radius-full:9999px;--cnf-score-excellent:#10b981;--cnf-score-good:#f59e0b;--cnf-score-fair:#ef4444}._cnf-container{gap:var(--main-space-4);flex-direction:column;max-width:600px;margin:0 auto;display:flex}._cnf-input-card{background:var(--cnf-bg);border-radius:var(--cnf-radius-xl);padding:var(--main-space-5);box-shadow:var(--cnf-shadow-lg);border-style:solid;border-width:1px;border-color:var(--cnf-border)}._cnf-results{gap:var(--main-space-4);flex-direction:column;display:flex}@media (max-width:640px){._cnf-container{padding-left:var(--main-space-3);padding-right:var(--main-space-3)}._cnf-input-card{padding:var(--main-space-4);border-radius:var(--cnf-radius-lg)}}._cnf-input-row{gap:var(--main-space-3);align-items:center;display:flex}._cnf-color-preview-wrapper{cursor:pointer;flex-shrink:0;position:relative}._cnf-color-preview{border-radius:var(--cnf-radius);border-style:solid;border-width:2px;border-color:var(--cnf-border);width:52px;height:52px;box-shadow:var(--cnf-shadow);background:#3b82f6}._cnf-color-picker-hidden{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0}._cnf-pick-hint{background:var(--cnf-bg);border-radius:var(--cnf-radius-full);width:20px;height:20px;box-shadow:var(--cnf-shadow);color:var(--cnf-text-muted);pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;bottom:-4px;right:-4px}._cnf-input-wrapper{flex:1;position:relative}._cnf-input{border-style:solid;border-width:2px;border-color:var(--cnf-border);border-radius:var(--cnf-radius);background:var(--cnf-bg);width:100%;color:var(--cnf-text);outline:none;padding:.875rem 2.5rem .875rem 1rem;font-size:1rem;transition:border-color .2s,box-shadow .2s}._cnf-input:focus{border-color:var(--cnf-primary);box-shadow:0 0 0 3px #6366f126}._cnf-input::placeholder{color:var(--cnf-text-muted)}._cnf-clear-btn{background:var(--cnf-bg-secondary);border-radius:var(--cnf-radius-full);width:24px;height:24px;color:var(--cnf-text-muted);cursor:pointer;border:none;justify-content:center;align-items:center;transition:background .2s,color .2s;display:none;position:absolute;top:50%;right:.75rem;transform:translateY(-50%)}._cnf-clear-btn:hover{background:var(--cnf-border);color:var(--cnf-text)}._cnf-input:not(:placeholder-shown)~._cnf-clear-btn{display:flex}._cnf-db-toggle{gap:var(--main-space-2);margin-top:var(--main-space-4);padding-top:var(--main-space-4);border-top-style:solid;border-top-width:1px;border-top-color:var(--cnf-border);display:flex}._cnf-db-btn{border-style:solid;border-width:1px;border-color:var(--cnf-border);border-radius:var(--cnf-radius);background:var(--cnf-bg);color:var(--cnf-text-muted);cursor:pointer;flex:1;padding:.625rem 1rem;font-size:.875rem;font-weight:500;transition:all .2s}._cnf-db-btn:hover{border-color:var(--cnf-primary);color:var(--cnf-primary)}._cnf-db-btn._cnf-db-btn-active{background:var(--cnf-primary);border-color:var(--cnf-primary);color:#fff}._cnf-db-count{opacity:.7;font-weight:400}._cnf-best-match{background:var(--cnf-bg);border-radius:var(--cnf-radius-xl);padding:var(--main-space-5);box-shadow:var(--cnf-shadow-lg);border-style:solid;border-width:1px;border-color:var(--cnf-border)}._cnf-comparison{justify-content:center;align-items:center;gap:var(--main-space-4);margin-bottom:var(--main-space-4);display:flex}._cnf-compare-item{align-items:center;gap:var(--main-space-2);flex-direction:column;display:flex}._cnf-compare-preview{border-radius:var(--cnf-radius);border-style:solid;border-width:2px;border-color:var(--cnf-border);width:64px;height:64px;box-shadow:var(--cnf-shadow);background:#e2e8f0}._cnf-compare-label{color:var(--cnf-text-muted);text-align:center;text-overflow:ellipsis;white-space:nowrap;max-width:80px;font-size:.75rem;overflow:hidden}._cnf-compare-arrow{color:var(--cnf-text-muted);font-size:1.5rem;font-weight:300}._cnf-match-info{text-align:center;margin-bottom:var(--main-space-4);padding-bottom:var(--main-space-4);border-bottom-style:dashed;border-bottom-width:1px;border-bottom-color:var(--cnf-border)}._cnf-match-name{color:var(--cnf-text);margin-bottom:var(--main-space-2);font-size:1.5rem;font-weight:700}._cnf-match-score{justify-content:center;align-items:center;gap:var(--main-space-2);display:flex}._cnf-score-badge{border-radius:var(--cnf-radius-full);color:var(--cnf-score-excellent);background:#10b9811a;align-items:center;padding:.25rem .75rem;font-size:.875rem;font-weight:600;display:inline-flex}._cnf-score-badge._cnf-score-good{color:var(--cnf-score-good);background:#f59e0b1a}._cnf-score-badge._cnf-score-fair{color:var(--cnf-score-fair);background:#ef44441a}._cnf-delta-e{color:var(--cnf-text-muted);font-size:.75rem}._cnf-match-values{gap:var(--main-space-2);flex-direction:column;display:flex}._cnf-value-item{align-items:center;gap:var(--main-space-3);background:var(--cnf-bg-secondary);border-radius:var(--cnf-radius);padding:.5rem .75rem;display:flex}._cnf-value-label{color:var(--cnf-text-muted);text-transform:uppercase;min-width:40px;font-size:.75rem;font-weight:600}._cnf-value-text{font-size:.875rem;font-family:var(--main-font-mono);color:var(--cnf-text);flex:1}._cnf-copy-btn{width:28px;height:28px;color:var(--cnf-text-muted);cursor:pointer;border-radius:var(--cnf-radius);background:0 0;border:none;justify-content:center;align-items:center;transition:background .2s,color .2s;display:flex}._cnf-copy-btn:hover{background:var(--cnf-border);color:var(--cnf-text)}._cnf-copy-btn._cnf-copied{color:var(--cnf-score-excellent)}._cnf-similar{background:var(--cnf-bg);border-radius:var(--cnf-radius-lg);padding:var(--main-space-4);box-shadow:var(--cnf-shadow);border-style:solid;border-width:1px;border-color:var(--cnf-border)}._cnf-similar-header{margin-bottom:var(--main-space-3)}._cnf-similar-title{color:var(--cnf-text-muted);font-size:.875rem;font-weight:600}._cnf-similar-list{gap:var(--main-space-2);grid-template-columns:repeat(auto-fill,minmax(140px,1fr));min-height:60px;display:grid}._cnf-similar-item{align-items:center;gap:var(--main-space-2);background:var(--cnf-bg-secondary);border-radius:var(--cnf-radius);cursor:pointer;border:1px solid #0000;padding:.5rem;transition:background .2s,box-shadow .2s;display:flex}._cnf-similar-item:hover{background:var(--cnf-bg);border-color:var(--cnf-border);box-shadow:var(--cnf-shadow)}._cnf-similar-preview{border-style:solid;border-width:1px;border-color:var(--cnf-border);border-radius:6px;flex-shrink:0;width:32px;height:32px}._cnf-similar-info{flex:1;min-width:0}._cnf-similar-name{color:var(--cnf-text);white-space:nowrap;text-overflow:ellipsis;font-size:.8125rem;font-weight:500;overflow:hidden}._cnf-similar-score{color:var(--cnf-text-muted);font-size:.6875rem}._cnf-history{margin-top:var(--main-space-2)}._cnf-history-toggle{justify-content:center;align-items:center;gap:var(--main-space-2);width:100%;color:var(--cnf-text-muted);cursor:pointer;border-radius:var(--cnf-radius);background:0 0;border:none;padding:.625rem 1rem;font-size:.8125rem;font-weight:500;transition:background .2s,color .2s;display:flex}._cnf-history-toggle:hover{background:var(--cnf-bg);color:var(--cnf-text)}._cnf-history-toggle svg:last-child{transition:transform .2s}._cnf-history._cnf-history-open ._cnf-history-toggle svg:last-child{transform:rotate(180deg)}._cnf-history-count{opacity:.7}._cnf-history-content{margin-top:var(--main-space-2);padding:var(--main-space-3);background:var(--cnf-bg);border-radius:var(--cnf-radius-lg);border-style:solid;border-width:1px;border-color:var(--cnf-border);display:none}._cnf-history._cnf-history-open ._cnf-history-content{display:block}._cnf-history-list{gap:var(--main-space-2);margin-bottom:var(--main-space-3);flex-wrap:wrap;min-height:40px;display:flex}._cnf-history-item{border-radius:var(--cnf-radius);cursor:pointer;border-style:solid;border-width:2px;border-color:var(--cnf-border);width:36px;height:36px;transition:border-color .2s,box-shadow .2s}._cnf-history-item:hover{border-color:var(--cnf-primary);box-shadow:0 0 0 2px #6366f133}._cnf-history-clear{width:100%;color:var(--cnf-text-muted);cursor:pointer;border-radius:var(--cnf-radius);background:0 0;border:none;padding:.5rem;font-size:.75rem;transition:background .2s,color .2s}._cnf-history-clear:hover{background:var(--cnf-bg-secondary);color:var(--cnf-score-fair)}._cnf-history-empty{text-align:center;width:100%;padding:var(--main-space-2);color:var(--cnf-text-muted);font-size:.8125rem}@media (max-width:640px){._cnf-input-row{flex-direction:column;align-items:stretch}._cnf-color-preview-wrapper{align-self:center}._cnf-color-preview{width:64px;height:64px}._cnf-best-match{padding:var(--main-space-4);border-radius:var(--cnf-radius-lg)}._cnf-compare-preview{width:56px;height:56px}._cnf-match-name{font-size:1.25rem}._cnf-similar-list{grid-template-columns:repeat(2,1fr)}._cnf-db-toggle{flex-direction:column}}