:root{--cuc-primary:var(--main-primary);--cuc-primary-rgb:99, 102, 241;--cuc-secondary:var(--main-secondary);--cuc-text:#1f2937;--cuc-text-muted:#64748b;--cuc-text-light:#94a3b8;--cuc-bg:#fff;--cuc-bg-secondary:#f8fafc;--cuc-bg-hover:#f1f5f9;--cuc-border:#e2e8f0;--cuc-border-focus:var(--cuc-primary);--cuc-shadow:0 1px 3px #0000001a;--cuc-shadow-lg:0 4px 12px #0000001a;--cuc-radius:var(--main-radius);--cuc-radius-lg:var(--main-radius-lg);--cuc-px-color:#6366f1;--cuc-rem-color:#10b981;--cuc-em-color:#f59e0b}._cuc-container{max-width:600px;margin:0 auto}._cuc-card{background:var(--cuc-bg);border-radius:var(--cuc-radius-lg);padding:var(--main-space-6);box-shadow:var(--cuc-shadow);border-style:solid;border-width:1px;border-color:var(--cuc-border);margin-bottom:var(--main-space-5)}._cuc-label{font-size:var(--main-text-sm);color:var(--cuc-text);margin-bottom:var(--main-space-2);font-weight:500;display:block}._cuc-settings{gap:var(--main-space-4);margin-bottom:var(--main-space-5);background:var(--cuc-bg);border-radius:var(--cuc-radius-lg);padding:var(--main-space-4);box-shadow:var(--cuc-shadow);border-style:solid;border-width:1px;border-color:var(--cuc-border);display:flex}._cuc-setting-item{gap:var(--main-space-1);flex-direction:column;flex:1;display:flex}._cuc-setting-label{font-size:var(--main-text-xs);color:var(--cuc-text-muted);font-weight:500}._cuc-setting-input-wrap{background:var(--cuc-bg-secondary);border-style:solid;border-width:1.5px;border-color:var(--cuc-border);border-radius:var(--cuc-radius);padding:0 var(--main-space-3);align-items:center;transition:border-color .15s;display:flex}._cuc-setting-input-wrap:focus-within{border-color:var(--cuc-border-focus)}._cuc-setting-input{padding:var(--main-space-2) 0;font-family:var(--main-font-mono);font-size:var(--main-text-sm);color:var(--cuc-text);background:0 0;border:none;outline:none;flex:1;width:100%;min-width:0;font-weight:600}._cuc-setting-unit{font-size:var(--main-text-xs);color:var(--cuc-text-muted);margin-left:var(--main-space-1);font-weight:500}@media (max-width:768px){._cuc-container{padding-left:1rem;padding-right:1rem}._cuc-card{padding:var(--main-space-4)}._cuc-settings{gap:var(--main-space-3);padding:var(--main-space-3);flex-direction:column}}._cuc-input-row{gap:var(--main-space-3);align-items:stretch;display:flex}._cuc-input-wrap{background:var(--cuc-bg);border-style:solid;border-width:2px;border-color:var(--cuc-border);border-radius:var(--cuc-radius);padding:0 var(--main-space-3);flex:1;align-items:center;transition:border-color .15s,box-shadow .15s;display:flex}._cuc-input-wrap:focus-within{border-color:var(--cuc-border-focus);box-shadow:0 0 0 3px rgba(var(--cuc-primary-rgb), .1)}._cuc-input{padding:var(--main-space-3) 0;font-family:var(--main-font-mono);font-size:var(--main-text-xl);color:var(--cuc-text);background:0 0;border:none;outline:none;flex:1;min-width:0;font-weight:600}._cuc-input::placeholder{color:var(--cuc-text-light);font-weight:400}._cuc-clear-btn{background:var(--cuc-bg-secondary);width:28px;height:28px;color:var(--cuc-text-muted);border-radius:var(--cuc-radius);cursor:pointer;border:none;flex-shrink:0;justify-content:center;align-items:center;transition:background .15s,color .15s;display:flex}._cuc-clear-btn:hover{background:var(--cuc-bg-hover);color:var(--cuc-text)}._cuc-unit-tabs{gap:var(--main-space-1);flex-direction:column;display:flex}._cuc-unit-tab{padding:var(--main-space-2) var(--main-space-3);background:var(--cuc-bg-secondary);color:var(--cuc-text-muted);font-family:var(--main-font-mono);font-size:var(--main-text-xs);border-radius:var(--cuc-radius);cursor:pointer;white-space:nowrap;border:none;justify-content:center;align-items:center;min-width:52px;font-weight:600;transition:background .15s,color .15s;display:flex}._cuc-unit-tab:hover{background:var(--cuc-bg-hover);color:var(--cuc-text)}._cuc-unit-tab._cuc-unit-active{background:var(--cuc-primary);color:#fff}._cuc-examples{background:var(--cuc-bg);border-radius:var(--cuc-radius-lg);padding:var(--main-space-4);box-shadow:var(--cuc-shadow);border-style:solid;border-width:1px;border-color:var(--cuc-border);margin-bottom:var(--main-space-5)}._cuc-examples-header{align-items:center;gap:var(--main-space-2);font-size:var(--main-text-xs);color:var(--cuc-text-muted);margin-bottom:var(--main-space-3);font-weight:500;display:flex}._cuc-examples-list{gap:var(--main-space-2);flex-wrap:wrap;display:flex}._cuc-example-btn{padding:var(--main-space-1) var(--main-space-3);background:var(--cuc-bg-secondary);color:var(--cuc-text);font-family:var(--main-font-mono);font-size:var(--main-text-xs);border-radius:var(--cuc-radius);cursor:pointer;border:none;font-weight:500;transition:background .15s,color .15s}._cuc-example-btn:hover{background:var(--cuc-primary);color:#fff}@media (max-width:480px){._cuc-input-row{flex-direction:column}._cuc-unit-tabs{flex-direction:row}._cuc-unit-tab{flex:1}._cuc-input{font-size:var(--main-text-lg)}}._cuc-results{gap:var(--main-space-2);margin-bottom:var(--main-space-5);flex-direction:column;min-height:140px;display:flex}._cuc-row{align-items:center;gap:var(--main-space-3);background:var(--cuc-bg);border-radius:var(--cuc-radius);padding:var(--main-space-3) var(--main-space-4);box-shadow:var(--cuc-shadow);border-style:solid;border-width:1px;border-color:var(--cuc-border);transition:border-color .15s;display:flex}._cuc-row.source{border-color:var(--cuc-primary);border-width:2px}._cuc-row.error ._cuc-row-value{color:var(--main-error)}._cuc-row-header{align-items:center;gap:var(--main-space-2);min-width:90px;display:flex}._cuc-row-name{font-size:var(--main-text-sm);color:var(--cuc-text);font-weight:500}._cuc-row-symbol{font-family:var(--main-font-mono);font-size:var(--main-text-xs);color:var(--cuc-text-muted);background:var(--cuc-bg-secondary);border-radius:var(--cuc-radius);padding:.125rem .375rem;font-weight:600}._cuc-row[data-unit=px] ._cuc-row-symbol{color:var(--cuc-px-color)}._cuc-row[data-unit=rem] ._cuc-row-symbol{color:var(--cuc-rem-color)}._cuc-row[data-unit=em] ._cuc-row-symbol{color:var(--cuc-em-color)}._cuc-row-main{text-align:right;flex:1}._cuc-row-value{font-family:var(--main-font-mono);font-size:var(--main-text-lg);color:var(--cuc-text);font-weight:700}._cuc-row-copy{background:var(--cuc-bg-secondary);width:36px;height:36px;color:var(--cuc-text-muted);border-radius:var(--cuc-radius);cursor:pointer;border:none;flex-shrink:0;justify-content:center;align-items:center;transition:background .15s,color .15s;display:flex}._cuc-row-copy:hover{background:var(--cuc-bg-hover);color:var(--cuc-text)}._cuc-row-copy.copied{background:var(--main-success);color:#fff}@media (max-width:480px){._cuc-row{padding:var(--main-space-2) var(--main-space-3)}._cuc-row-header{min-width:70px}._cuc-row-value{font-size:var(--main-text-base)}}._cuc-unit-cards{gap:var(--main-space-3);margin-bottom:var(--main-space-5);grid-template-columns:repeat(3,1fr);display:grid}._cuc-unit-card{background:var(--cuc-bg);border-radius:var(--cuc-radius-lg);padding:var(--main-space-4);box-shadow:var(--cuc-shadow);border-style:solid;border-width:1px;border-color:var(--cuc-border);gap:var(--main-space-3);text-align:center;flex-direction:column;align-items:center;display:flex}._cuc-unit-card-badge{border-radius:var(--cuc-radius-lg);width:44px;height:44px;font-family:var(--main-font-mono);font-size:var(--main-text-sm);flex-shrink:0;justify-content:center;align-items:center;font-weight:700;display:flex}._cuc-badge-px{color:var(--cuc-px-color);background:#6366f11a}._cuc-badge-rem{color:var(--cuc-rem-color);background:#10b9811a}._cuc-badge-em{color:var(--cuc-em-color);background:#f59e0b1a}._cuc-unit-card-body{flex:1;min-width:0}._cuc-unit-card-title{font-size:var(--main-text-sm);color:var(--cuc-text);margin:0 0 var(--main-space-1) 0;font-weight:600}._cuc-unit-card-desc{font-size:var(--main-text-xs);color:var(--cuc-text-muted);margin:0;line-height:1.5}@media (max-width:768px){._cuc-unit-cards{grid-template-columns:1fr}._cuc-unit-card{text-align:left;flex-direction:row}}._cuc-reference{background:var(--cuc-bg);border-radius:var(--cuc-radius-lg);box-shadow:var(--cuc-shadow);border-style:solid;border-width:1px;border-color:var(--cuc-border);overflow:hidden}._cuc-reference-toggle{align-items:center;gap:var(--main-space-2);width:100%;padding:var(--main-space-4);color:var(--cuc-text);font-size:var(--main-text-sm);cursor:pointer;background:0 0;border:none;font-weight:500;transition:background .15s;display:flex}._cuc-reference-toggle:hover{background:var(--cuc-bg-hover)}._cuc-toggle-icon{color:var(--cuc-text-muted);margin-left:auto;transition:transform .2s;display:flex}._cuc-reference-toggle.active ._cuc-toggle-icon{transform:rotate(180deg)}._cuc-reference-panel{padding:0 var(--main-space-4) var(--main-space-4)}._cuc-reference-panel.hidden{display:none}._cuc-ref-table{flex-direction:column;display:flex}._cuc-ref-header-row{gap:var(--main-space-3);padding:var(--main-space-2) var(--main-space-3);font-size:var(--main-text-xs);color:var(--cuc-text-muted);text-transform:uppercase;letter-spacing:.05em;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--cuc-border);margin-bottom:var(--main-space-1);grid-template-columns:repeat(3,1fr);font-weight:600;display:grid}._cuc-ref-row{gap:var(--main-space-3);padding:var(--main-space-2) var(--main-space-3);font-family:var(--main-font-mono);font-size:var(--main-text-sm);color:var(--cuc-text);border-radius:var(--cuc-radius);grid-template-columns:repeat(3,1fr);transition:background .15s;display:grid}._cuc-ref-row:hover{background:var(--cuc-bg-secondary)}._cuc-ref-row span:first-child{color:var(--cuc-px-color);font-weight:600}._cuc-ref-row span:nth-child(2){color:var(--cuc-rem-color)}._cuc-ref-row span:nth-child(3){color:var(--cuc-em-color)}@media (max-width:480px){._cuc-ref-header-row,._cuc-ref-row{font-size:var(--main-text-xs);gap:var(--main-space-2);padding:var(--main-space-2)}}._cuc-sub-container{max-width:520px;margin:0 auto}._cuc-sub-settings{gap:var(--main-space-4);margin-bottom:var(--main-space-5);background:var(--cuc-bg);border-radius:var(--cuc-radius-lg);padding:var(--main-space-4);box-shadow:var(--cuc-shadow);border-style:solid;border-width:1px;border-color:var(--cuc-border);display:flex}._cuc-sub-setting-item{gap:var(--main-space-1);flex-direction:column;flex:1;display:flex}._cuc-sub-setting-label{font-size:var(--main-text-xs);color:var(--cuc-text-muted);font-weight:500}._cuc-sub-setting-input-wrap{background:var(--cuc-bg-secondary);border-style:solid;border-width:1.5px;border-color:var(--cuc-border);border-radius:var(--cuc-radius);padding:0 var(--main-space-3);align-items:center;transition:border-color .15s;display:flex}._cuc-sub-setting-input-wrap:focus-within{border-color:var(--cuc-border-focus)}._cuc-sub-setting-input{padding:var(--main-space-2) 0;font-family:var(--main-font-mono);font-size:var(--main-text-sm);color:var(--cuc-text);background:0 0;border:none;outline:none;flex:1;width:100%;min-width:0;font-weight:600}._cuc-sub-setting-unit{font-size:var(--main-text-xs);color:var(--cuc-text-muted);margin-left:var(--main-space-1);font-weight:500}._cuc-sub-card{background:var(--cuc-bg);border-radius:var(--cuc-radius-lg);padding:var(--main-space-6);box-shadow:var(--cuc-shadow);border-style:solid;border-width:1px;border-color:var(--cuc-border);margin-bottom:var(--main-space-5)}._cuc-sub-field{gap:var(--main-space-2);flex-direction:column;transition:opacity .15s;display:flex}._cuc-sub-field.active ._cuc-sub-input-wrap{border-color:var(--cuc-border-focus);box-shadow:0 0 0 3px rgba(var(--cuc-primary-rgb), .1)}._cuc-sub-header{justify-content:space-between;align-items:center;gap:var(--main-space-2);display:flex}._cuc-sub-label{align-items:center;gap:var(--main-space-2);font-size:var(--main-text-sm);color:var(--cuc-text);font-weight:500;display:flex}._cuc-sub-label-badge{background:var(--cuc-bg-secondary);color:var(--cuc-primary);font-size:var(--main-text-xs);border-radius:var(--cuc-radius);padding:.125rem .5rem;font-weight:700;display:inline-flex}._cuc-sub-input-wrap{background:var(--cuc-bg);border-style:solid;border-width:2px;border-color:var(--cuc-border);border-radius:var(--cuc-radius);padding:0 var(--main-space-3);align-items:center;transition:border-color .15s,box-shadow .15s;display:flex}._cuc-sub-input-wrap:focus-within{border-color:var(--cuc-border-focus);box-shadow:0 0 0 3px rgba(var(--cuc-primary-rgb), .1)}._cuc-sub-input{padding:var(--main-space-3) 0;font-family:var(--main-font-mono);font-size:var(--main-text-lg);color:var(--cuc-text);text-align:center;background:0 0;border:none;outline:none;flex:1;min-width:0;font-weight:600}._cuc-sub-input::placeholder{color:var(--cuc-text-light);font-weight:400}._cuc-sub-suffix{font-family:var(--main-font-mono);font-size:var(--main-text-sm);color:var(--cuc-text-muted);font-weight:600}._cuc-sub-swap-row{padding:var(--main-space-2) 0;justify-content:center;display:flex}._cuc-sub-swap{background:var(--cuc-bg-secondary);width:40px;height:40px;color:var(--cuc-text-muted);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;transition:background .15s,color .15s,transform .3s;display:flex}._cuc-sub-swap:hover{background:var(--cuc-primary);color:#fff}._cuc-sub-swap.swapping{transform:rotate(180deg)}._cuc-sub-copy{background:var(--cuc-bg-secondary);width:36px;height:36px;color:var(--cuc-text-muted);border-radius:var(--cuc-radius);cursor:pointer;margin-left:var(--main-space-2);border:none;flex-shrink:0;justify-content:center;align-items:center;transition:background .15s,color .15s;display:flex}._cuc-sub-copy:hover{background:var(--cuc-bg-hover);color:var(--cuc-text)}._cuc-sub-copy.copied{background:var(--main-success);color:#fff}._cuc-sub-reference{background:var(--cuc-bg);border-radius:var(--cuc-radius-lg);padding:var(--main-space-5);box-shadow:var(--cuc-shadow);border-style:solid;border-width:1px;border-color:var(--cuc-border);margin-bottom:var(--main-space-5)}._cuc-sub-ref-title{font-size:var(--main-text-sm);color:var(--cuc-text);margin:0 0 var(--main-space-3) 0;text-align:center;font-weight:600}._cuc-sub-ref-grid{gap:var(--main-space-4);grid-template-columns:repeat(2,1fr);display:grid}._cuc-sub-ref-col{gap:var(--main-space-2);flex-direction:column;display:flex}._cuc-sub-ref-item{align-items:center;gap:var(--main-space-2);font-family:var(--main-font-mono);font-size:var(--main-text-sm);color:var(--cuc-text);padding:var(--main-space-2);background:var(--cuc-bg-secondary);border-radius:var(--cuc-radius);display:flex}._cuc-sub-ref-item span:first-child{text-align:right;flex:1;font-weight:500}._cuc-sub-ref-eq{color:var(--cuc-text-muted)}._cuc-sub-ref-item span:last-child{color:var(--cuc-primary);flex:1;font-weight:600}._cuc-sub-info{gap:var(--main-space-3);flex-direction:column;display:flex}._cuc-sub-info-card{gap:var(--main-space-4);background:var(--cuc-bg);border-radius:var(--cuc-radius-lg);padding:var(--main-space-4);box-shadow:var(--cuc-shadow);border-style:solid;border-width:1px;border-color:var(--cuc-border);display:flex}._cuc-sub-info-icon{background:rgba(var(--cuc-primary-rgb), .1);width:48px;height:48px;color:var(--cuc-primary);border-radius:var(--cuc-radius);flex-shrink:0;justify-content:center;align-items:flex-start;padding-top:12px;display:flex}._cuc-sub-info-content{flex:1;min-width:0}._cuc-sub-info-title{font-size:var(--main-text-sm);color:var(--cuc-text);margin:0 0 var(--main-space-1) 0;font-weight:600}._cuc-sub-info-text{font-size:var(--main-text-sm);color:var(--cuc-text-muted);margin:0;line-height:1.5}@media (max-width:480px){._cuc-sub-container{padding-left:1rem;padding-right:1rem}._cuc-sub-settings{gap:var(--main-space-3);padding:var(--main-space-3);flex-direction:column}._cuc-sub-card{padding:var(--main-space-4)}._cuc-sub-header{align-items:flex-start;gap:var(--main-space-1);flex-direction:column}._cuc-sub-input{font-size:var(--main-text-base)}._cuc-sub-ref-grid{grid-template-columns:1fr}._cuc-sub-info-card{text-align:center;flex-direction:column;align-items:center}}