.pct-calc__banner{display:flex;align-items:flex-start;gap:var(--space-3, .75rem);margin-block-end:var(--space-5, 1.25rem);padding:var(--space-3, .75rem) var(--space-4, 1rem);border:1px solid var(--color-border);border-inline-start:3px solid var(--color-primary);border-radius:var(--radius-lg, .75rem);background:var(--color-primary-soft);color:var(--color-text)}.pct-calc__banner p{margin:0;font-size:var(--font-size-sm, .875rem);line-height:var(--line-height-base, 1.7);color:var(--color-text-muted)}.pct-calc__fields{display:grid;gap:var(--space-4, 1rem);margin-block-end:var(--space-4, 1rem)}@media (min-width: 640px){.pct-calc__fields{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}}.pct-calc__field{display:flex;flex-direction:column;gap:var(--space-2, .5rem)}.pct-calc__label{font-size:.92rem;font-weight:var(--font-weight-semibold, 600);color:var(--color-text, #1a1a1a)}.pct-calc__input,.pct-calc__output{width:100%;min-height:3rem;padding:.65rem .85rem;border:1px solid var(--color-border, #d1d5db);border-radius:var(--radius-md, .5rem);background:var(--color-surface, #fff);font-size:clamp(1.05rem,3.5vw,1.2rem);line-height:1.4;transition:border-color .16s ease,box-shadow .16s ease}.pct-calc__input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 22%,transparent)}.pct-calc__input[aria-invalid=true]{border-color:var(--color-danger, #dc2626)}.pct-calc__output{display:flex;align-items:center;margin:0;background:color-mix(in srgb,var(--color-primary) 6%,var(--color-surface, #fff));border-color:color-mix(in srgb,var(--color-primary) 24%,var(--color-border, #d1d5db));color:var(--color-text-muted, #6b7280);font-weight:var(--font-weight-bold, 700)}.pct-calc__output.has-value{color:var(--color-primary);font-size:clamp(1.15rem,4vw,1.35rem)}.pct-calc__hint{color:var(--color-text-muted, #6b7280);font-size:.78rem}.pct-calc__quick{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2, .5rem);margin-block-end:var(--space-5, 1.25rem)}.pct-calc__quick-label{font-size:.85rem;color:var(--color-text-muted, #6b7280);flex:0 0 auto}.pct-calc__quick-buttons{display:flex;flex-wrap:wrap;gap:.4rem}.pct-calc__chip{border:1px solid var(--color-border, #d1d5db);border-radius:999px;background:var(--color-surface, #fff);color:var(--color-text, #1a1a1a);padding:.35rem .75rem;font-size:.85rem;cursor:pointer;min-height:var(--tap-target, 2.75rem);transition:background .16s ease,border-color .16s ease,color .16s ease}.pct-calc__chip:hover{border-color:var(--color-primary);color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 8%,var(--color-surface, #fff))}.pct-calc__actions{display:flex;flex-wrap:wrap;gap:var(--space-3, .75rem);margin-block-end:var(--space-4, 1rem)}.pct-calc__submit,.pct-calc__reset{flex:1 1 9rem;min-height:2.85rem;display:inline-flex;align-items:center;justify-content:center;gap:.45rem}.pct-calc__error{margin:0 0 var(--space-4, 1rem);padding:.65rem .85rem;border-radius:var(--radius-md, .5rem);background:color-mix(in srgb,var(--color-danger, #dc2626) 10%,var(--color-surface));color:var(--color-danger, #dc2626);font-size:.92rem}.pct-calc__equation-wrap{position:relative;border:1px solid var(--color-border, #d1d5db);border-radius:var(--radius-lg, .75rem);background:var(--color-surface-muted, #f3f4f6);padding:var(--space-5, 1.25rem) var(--space-4, 1rem) var(--space-4, 1rem);transition:box-shadow .22s ease}.pct-calc__equation-wrap.is-updated{box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 16%,transparent)}.pct-calc__equation-tab{position:absolute;inset-inline-end:var(--space-4, 1rem);top:0;transform:translateY(-50%);background:var(--color-text, #374151);color:var(--ut-on-accent);font-size:.78rem;font-weight:var(--font-weight-semibold, 600);padding:.2rem .65rem;border-radius:var(--radius-sm, .375rem)}.pct-calc__equation-body{display:flex;flex-direction:column;align-items:center;gap:var(--space-3, .75rem);text-align:center}.pct-calc__equation{margin:0;font-size:clamp(1.05rem,3.8vw,1.25rem);font-weight:var(--font-weight-bold, 700);color:var(--color-primary);line-height:1.8}.pct-calc__copy{border:1px solid var(--color-border, #d1d5db);border-radius:var(--radius-md, .5rem);background:var(--color-surface, #fff);color:var(--color-text, #1a1a1a);padding:.45rem .85rem;font-size:.88rem;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;min-height:2.35rem}.pct-calc__copy.is-copied{border-color:var(--color-success, #16a34a);color:var(--color-success, #16a34a)}.pct-calc__banner>.bi{flex:none;margin-block-start:.15em;color:var(--color-primary)}.pct-calc__banner{border-color:var(--ut-line);border-inline-start-color:var(--ut-accent);background:var(--ut-accent-tint);color:var(--ut-ink)}.pct-calc__banner p{color:var(--ut-ink-muted)}.pct-calc__label{color:var(--ut-ink-body)}.pct-calc__input{border-color:transparent;background:var(--ut-surface-muted);color:var(--ut-ink)}.pct-calc__input:hover{border-color:var(--ut-line-strong)}.pct-calc__input:focus{background:var(--ut-surface);box-shadow:0 0 0 3px var(--ut-accent-tint-strong)}.pct-calc__output{border-color:var(--ut-accent-line);background:var(--ut-accent-tint);color:var(--ut-ink-subtle)}.pct-calc__output.has-value{color:var(--ut-accent-strong);font-size:clamp(1.3rem,4.5vw,1.6rem);font-weight:800}.pct-calc__hint,.pct-calc__quick-label{color:var(--ut-ink-muted)}.pct-calc__chip{border-color:var(--ut-line);background:var(--ut-surface);color:var(--ut-ink-body);min-height:36px}.pct-calc__chip:hover{border-color:var(--ut-accent-line);background:var(--ut-accent-tint);color:var(--ut-accent-ink)}.pct-calc__error{background:var(--ut-danger-tint);color:var(--ut-danger-ink)}.pct-calc__equation-wrap{border-color:var(--ut-line);border-radius:var(--ut-radius-md);background:var(--ut-surface-muted)}.pct-calc__equation-wrap.is-updated{box-shadow:0 0 0 3px var(--ut-accent-tint-strong)}.pct-calc__equation-tab{background:var(--ut-accent);color:var(--ut-on-accent)}.pct-calc__equation{color:var(--ut-accent-strong)}.pct-calc__copy{border-color:var(--ut-accent-line);border-radius:var(--radius-full, 999px);background:var(--ut-surface);color:var(--ut-accent-ink)}.pct-calc__copy.is-copied{border-color:currentColor;color:var(--ut-success-ink)}
