/* The marketing stylesheet rescales spacing; the tool keeps the 8px system scale. */
.cu-wrap, .cu-toast { --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; }
.cu-wrap { width: var(--container); margin: 0 auto; padding: var(--space-8) 0 var(--space-12); }
.cu-back { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--space-8); color: var(--muted-foreground); font-size: var(--text-sm); text-decoration: none; margin-bottom: var(--space-4); transition: color var(--dur) var(--ease-ui); }
.cu-back:hover { color: var(--foreground); }
.cu-title { font-family: var(--font-sans); font-size: var(--fs-display-3); line-height: 1.1; letter-spacing: var(--tracking-display); font-weight: 500; margin: 0 0 var(--space-2); color: var(--foreground); }
.cu-lede { font-size: var(--text-lg); line-height: 1.55; color: var(--text-secondary); margin: 0 0 var(--space-8); max-width: 64ch; }
.cu-h2 { font-family: var(--font-sans); font-size: var(--text-xl); line-height: var(--leading-xl); letter-spacing: var(--tracking-display); font-weight: 600; color: var(--foreground); margin: var(--space-10) 0 var(--space-4); }

.cu-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.cu-card { background: var(--card); border: 0.5px solid var(--border); border-radius: var(--radius); min-width: 0; }
.cu-card-head { padding: var(--space-5) var(--space-5) 0; }
.cu-card-title { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 600; margin: 0; color: var(--foreground); }
.cu-card-desc { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--muted-foreground); }
.cu-card-body { padding: var(--space-5); }

.cu-row { display: flex; gap: var(--space-3); align-items: flex-end; margin-bottom: var(--space-4); }
.cu-field-value { flex: 1; min-width: 0; }
.cu-field-unit { width: calc(var(--space-16) * 2); flex: none; }
.cu-field { min-width: 0; }
.cu-label { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--foreground); margin-bottom: var(--space-2); }
.cu-input { width: 100%; min-height: var(--input-height); padding: 0 var(--space-3); background: var(--input); color: var(--foreground); border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; font-size: var(--text-sm); box-sizing: border-box; transition: border-color var(--dur) var(--ease-ui); }
.cu-input:focus, .cu-input:focus-visible { outline: none; border-color: var(--primary); }
.cu-input-wrap { position: relative; }
.cu-input-wrap .cu-input { padding-right: var(--space-8); -moz-appearance: textfield; }
.cu-input-wrap .cu-input::-webkit-outer-spin-button, .cu-input-wrap .cu-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cu-suffix { position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%); font-size: var(--text-xs); color: var(--muted-foreground); pointer-events: none; }
.cu-hint { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--muted-foreground); }

.cu-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.cu-tile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-height: var(--input-height); padding: var(--space-3) var(--space-4); background: transparent; color: var(--foreground); border: 0.5px solid var(--border); border-radius: var(--radius-sm); font: inherit; text-align: left; cursor: pointer; min-width: 0; transition: background var(--dur) var(--ease-ui), border-color var(--dur) var(--ease-ui); }
.cu-tile:hover:not(:disabled) { background: var(--bg-hover); }
.cu-tile:disabled { cursor: default; opacity: .6; }
.cu-tile.is-source { border-color: var(--border-strong); background: var(--bg-hover); }
.cu-tile-unit { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--muted-foreground); }
.cu-tile-val { font-family: var(--font-mono); font-size: var(--text-lg); line-height: var(--leading-lg); max-width: 100%; overflow-wrap: anywhere; }
.cu-note { margin: var(--space-4) 0 0; font-size: var(--text-xs); color: var(--muted-foreground); }

.cu-settings { display: grid; gap: var(--space-4); margin-bottom: var(--space-5); }
.cu-btn { width: 100%; min-height: var(--input-height); background: transparent; color: var(--foreground); border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: background var(--dur) var(--ease-ui); }
.cu-btn:hover { background: var(--bg-hover); }

.cu-table-wrap { overflow-x: auto; }
.cu-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.cu-table th, .cu-table td { padding: var(--space-2) var(--space-3); text-align: left; white-space: nowrap; border-bottom: 0.5px solid var(--border); }
.cu-table th { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-eyebrow); color: var(--muted-foreground); }
.cu-table td { font-family: var(--font-mono); color: var(--text-secondary); }
.cu-table tr:last-child td { border-bottom: none; }
.cu-table tr.is-base td { background: var(--bg-hover); color: var(--foreground); }

.cu-ref { margin: 0; }
.cu-ref-row { display: flex; gap: var(--space-5); padding: var(--space-3) var(--space-5); border-bottom: 0.5px solid var(--border); }
.cu-ref-row:last-child { border-bottom: none; }
.cu-ref dt { flex: 0 0 calc(var(--space-16) * 2); font-family: var(--font-mono); font-weight: 600; color: var(--foreground); }
.cu-ref dd { margin: 0; color: var(--muted-foreground); }
.cu-ref dd code { display: block; margin-top: var(--space-1); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); }
.cu-section-lede { margin: 0 0 var(--space-4); max-width: 64ch; font-size: var(--text-sm); color: var(--muted-foreground); }

.cu-faq { max-width: none; margin: 0; }

.cu-toast { position: fixed; bottom: var(--space-6); left: 50%; transform: translateX(-50%); padding: var(--space-3) var(--space-5); background: var(--card); color: var(--foreground); border: 0.5px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-overlay); font-size: var(--text-xs); font-weight: 500; z-index: 1100; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease-ui), transform var(--dur) var(--ease-ui); }
.cu-toast.show { opacity: 1; }
.cu-toast:not(.show) { transform: translateX(-50%) translateY(var(--space-3)); }

@media (min-width: 640px) { .cu-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
    .cu-grid { grid-template-columns: minmax(0, 1fr) 400px; }
    .cu-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .cu-wrap { padding-top: var(--space-4); }
    .cu-card-head, .cu-card-body { padding-left: var(--space-4); padding-right: var(--space-4); }
    .cu-ref-row { flex-direction: column; gap: var(--space-1); padding-left: var(--space-4); padding-right: var(--space-4); }
    .cu-ref dt { flex-basis: auto; }
    .cu-back { min-height: var(--input-height); }
    .cu-input { font-size: var(--fs-body-2); }
}
@media (prefers-reduced-motion: reduce) { .cu-toast, .cu-tile, .cu-btn, .cu-input, .cu-back { transition: none; } }
.cu-select { appearance: none; -webkit-appearance: none; padding-right: var(--space-10); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394908a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; cursor: pointer; }