#unit-converter { --uc-border: #d1d5db; --uc-surface: #fff; --uc-text: #111827; --uc-muted: #4b5563; --uc-active: #eff6ff; }
#unit-converter .unit-primary-grid { margin-top: 0; }
#unit-converter .unit-primary-grid .tool-input { min-height: 58px; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
#unit-converter .unit-primary-actions { margin-top: 16px; }
#unit-converter .unit-primary-actions button { overflow-wrap: anywhere; }
#unit-converter .tool-label > [dir="ltr"] { display: inline-block; margin-inline-start: 4px; font-weight: 700; }
#unit-converter .unit-settings { margin-top: 20px; padding: 0 0 16px; border-bottom: 1px solid var(--uc-border); }
#unit-converter .unit-settings summary { display: list-item; width: fit-content; max-width: 100%; min-height: 46px; padding: 12px 16px; border: 1px solid var(--uc-border); border-radius: 6px; color: var(--uc-text); background: var(--uc-surface); cursor: pointer; font-weight: 600; overflow-wrap: anywhere; }
#unit-converter .unit-settings summary:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
#unit-converter .unit-select-control { display: flex; flex-direction: column; gap: 8px; }
#unit-converter .tool-select { appearance: none; min-height: 46px; height: auto; padding-inline-end: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-position: right 12px center; background-repeat: no-repeat; background-size: 16px; }
[dir="rtl"] #unit-converter .tool-select { background-position: left 12px center; }
#unit-converter .tool-result-value { font-size: 20px; overflow-wrap: anywhere; }
#unit-converter .tool-formula { white-space: normal; overflow-wrap: anywhere; }
#unit-converter .unit-inch-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#unit-converter .unit-storage-guide { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--uc-border); }
#unit-converter .unit-storage-base-grid, #unit-converter .unit-storage-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#unit-converter .unit-storage-base-option { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-width: 0; padding: 14px; border: 1px solid var(--uc-border); border-radius: 6px; color: var(--uc-muted); background: var(--uc-surface); text-align: start; cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; }
#unit-converter .unit-storage-base-option:hover { border-color: #93c5fd; }
#unit-converter .unit-storage-base-option:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
#unit-converter .unit-storage-base-option.is-active { border-color: #2563eb; background: var(--uc-active); box-shadow: 0 0 0 1px #2563eb; }
#unit-converter .unit-storage-base-value { color: var(--uc-text); font-size: 18px; font-weight: 700; }
#unit-converter .unit-storage-equation { display: inline-block; margin-top: 7px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-weight: 700; direction: ltr; unicode-bidi: isolate; }
#unit-converter .unit-storage-description { display: block; margin-top: 7px; color: var(--uc-muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
#unit-converter .unit-storage-comparison { margin-top: 12px; }
#unit-converter .unit-storage-comparison .tool-metric { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#unit-converter .unit-storage-comparison .tool-metric-value { font-size: 20px; overflow-wrap: anywhere; }
#unit-converter .tool-table td, #unit-converter .tool-table th { white-space: normal; overflow-wrap: anywhere; }
#unit-converter .tool-table th { color: var(--uc-muted); text-align: start; }
#unit-converter .tool-table td { text-align: start; }
#unit-converter .unit-temperature-reference td[dir="ltr"] { white-space: nowrap; overflow-wrap: normal; }
#unit-converter .hidden { display: none; }
html[data-theme="dark"] #unit-converter { --uc-border: #475569; --uc-surface: #1e293b; --uc-text: #e5e7eb; --uc-muted: #cbd5e1; --uc-active: #172f50; }
@media (max-width: 640px) {
    #unit-converter .unit-inch-metric-grid, #unit-converter .unit-storage-base-grid, #unit-converter .unit-storage-comparison { grid-template-columns: 1fr; }
    #unit-converter .unit-primary-grid .tool-input { font-size: 1.125rem; }
}