/* Button */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-base);padding:11px 18px;border-radius:var(--radius-md);cursor:pointer;border:1px solid transparent;transition:background var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard);text-decoration:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-sm{padding:8px 14px;font-size:var(--text-sm);gap:6px}
.btn-lg{padding:14px 24px;font-size:var(--text-lg)}
.btn-primary{background:var(--brand-primary);color:var(--text-on-brand);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--brand-primary-hover);box-shadow:var(--shadow-md)}
.btn-primary:active{background:var(--brand-primary-active)}
.btn-secondary{background:var(--white);color:var(--text-primary);border-color:var(--border-strong)}
.btn-secondary:hover{background:var(--surface-sunken);box-shadow:var(--shadow-xs)}
.btn-accent{background:var(--brand-accent);color:var(--gray-900);box-shadow:var(--shadow-sm)}
.btn-accent:hover{background:var(--brand-accent-hover);box-shadow:var(--shadow-md)}
.btn-ghost{background:transparent;color:var(--brand-primary)}
.btn-ghost:hover{background:var(--green-50)}
.btn-danger{background:var(--color-danger);color:var(--white);box-shadow:var(--shadow-sm)}
.btn-danger:hover{background:#9c3620;box-shadow:var(--shadow-md)}

/* Form fields */
.field{display:flex;flex-direction:column;gap:6px;font-family:var(--font-body)}
.field-label{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary)}
.field-input-wrap{position:relative;display:flex;align-items:center}
.field-input,.field-select{width:100%;font:inherit;font-size:var(--text-base);padding:11px 14px;border-radius:var(--radius-md);border:1px solid var(--border-default);outline:none;color:var(--text-primary);background:var(--white);transition:box-shadow var(--duration-fast),border-color var(--duration-fast)}
.field-input{padding-right:14px}
.field-input.has-unit{padding-right:48px}
.field-input:focus,.field-select:focus{border-color:var(--border-focus);box-shadow:var(--shadow-focus)}
.field-input.field-error{border-color:var(--color-danger)}
.field-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23787C72' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.field-unit{position:absolute;right:14px;font-size:var(--text-sm);color:var(--text-muted);font-weight:var(--weight-medium);pointer-events:none}
.field-hint{font-size:var(--text-xs);color:var(--text-muted)}
.field-error-text{font-size:var(--text-xs);color:var(--color-danger)}

/* Checkbox */
.checkbox{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-family:var(--font-body);font-size:var(--text-base);color:var(--text-primary)}
.checkbox input{position:absolute;opacity:0;width:20px;height:20px;margin:0;cursor:pointer}
.checkbox-box{width:20px;height:20px;flex:none;border-radius:6px;border:1.5px solid var(--border-strong);background:var(--white);display:flex;align-items:center;justify-content:center;transition:all var(--duration-fast)}
.checkbox input:checked + .checkbox-box{border-color:var(--brand-primary);background:var(--brand-primary)}
.checkbox-box svg{opacity:0;transition:opacity var(--duration-fast)}
.checkbox input:checked + .checkbox-box svg{opacity:1}
.checkbox input:focus-visible + .checkbox-box{outline:2px solid var(--border-focus);outline-offset:2px}

/* Radio (used for shape selectors) */
.radio-group{display:flex;flex-wrap:wrap;gap:8px}
.radio-chip{position:relative}
.radio-chip input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.radio-chip-label{display:inline-flex;align-items:center;padding:9px 16px;border-radius:var(--radius-full);border:1px solid var(--border-strong);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-secondary);background:var(--white);cursor:pointer;transition:all var(--duration-fast)}
.radio-chip input:checked + .radio-chip-label{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--white)}
.radio-chip input:focus-visible + .radio-chip-label{outline:2px solid var(--border-focus);outline-offset:2px}

/* Card */
.card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-6);transition:box-shadow var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard)}
.card-interactive{cursor:pointer;text-decoration:none;color:inherit;display:block}
.card-interactive:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}

/* Badge */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-semibold)}
.badge-neutral{background:var(--gray-100);color:var(--gray-700)}
.badge-success{background:var(--color-success-bg);color:var(--color-success)}
.badge-warning{background:var(--color-warning-bg);color:var(--amber-700)}
.badge-danger{background:var(--color-danger-bg);color:var(--red-600)}
.badge-brand{background:var(--green-100);color:var(--green-800)}

/* Tag */
.tag{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--weight-medium);background:var(--surface-sunken);color:var(--text-secondary);border:1px solid var(--border-default);text-decoration:none}
.tag-selected{background:var(--brand-primary);color:var(--white);border-color:var(--brand-primary)}

/* Breadcrumb */
.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:var(--text-sm);font-family:var(--font-body)}
.breadcrumb a{color:var(--text-secondary)}
.breadcrumb a:hover{color:var(--text-link-hover)}
.breadcrumb span.current{color:var(--text-primary);font-weight:var(--weight-medium)}
.breadcrumb span.sep{color:var(--text-muted)}

/* Tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border-default);font-family:var(--font-body)}
.tabs-btn{border:none;background:none;cursor:pointer;padding:10px 16px;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs-btn.active{color:var(--brand-primary);border-bottom-color:var(--brand-primary)}
.tab-panel{display:none}
.tab-panel.active{display:flex}

/* CalcField */
.calc-field{display:flex;flex-direction:column;gap:6px;font-family:var(--font-body)}
.calc-field-label-row{display:flex;align-items:center;gap:6px;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary)}
.calc-field-tip{width:16px;height:16px;border-radius:50%;background:var(--gray-200);color:var(--gray-700);font-size:11px;display:inline-flex;align-items:center;justify-content:center;cursor:help;font-weight:var(--weight-semibold)}

/* ResultStat */
.result-stat{display:flex;flex-direction:column;gap:4px;font-family:var(--font-body)}
.result-stat-label{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em}
.result-stat-value{font-family:var(--font-mono);font-size:var(--text-5xl);font-weight:700;color:var(--brand-primary);line-height:1}
.result-stat-value.neutral{color:var(--text-primary)}
.result-stat-value.md{font-size:var(--text-3xl)}
.result-stat-unit{font-size:var(--text-lg);font-weight:600;margin-left:6px;color:var(--text-muted)}
.result-stat-value.md .result-stat-unit{font-size:var(--text-sm)}

/* Unit toggle */
.unit-toggle{display:inline-flex}
.unit-toggle button{border:1px solid var(--border-strong);background:var(--white);color:var(--text-secondary);font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:13px;padding:7px 14px;cursor:pointer}
.unit-toggle button:first-child{border-radius:var(--radius-md) 0 0 var(--radius-md)}
.unit-toggle button:last-child{border-radius:0 var(--radius-md) var(--radius-md) 0;margin-left:-1px}
.unit-toggle button.active{background:var(--brand-primary);color:var(--white);border-color:var(--brand-primary);position:relative;z-index:1}

/* FAQ accordion */
.faq-item{border-bottom:1px solid var(--border-default)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;background:none;border:none;text-align:left;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-base);color:var(--text-primary);cursor:pointer}
.faq-q .chev{flex:none;transition:transform var(--duration-base) var(--ease-standard);color:var(--text-muted)}
.faq-item.open .faq-q .chev{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height var(--duration-base) var(--ease-standard)}
.faq-a p{padding:0 0 18px;color:var(--text-secondary);font-size:var(--text-sm);line-height:1.6;max-width:640px}
.faq-item.open .faq-a{max-height:400px}