.icon { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 1rem; height: 1rem; }
.icon--lg { width: 1.35rem; height: 1.35rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 2.625rem; padding: .625rem .875rem; border: 1px solid transparent; border-radius: var(--radius-md); color: var(--color-text); background: transparent; font-size: var(--text-sm); font-weight: 650; line-height: 1; text-decoration: none; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); }
.button:hover { text-decoration: none; }
.button:active { transform: translateY(1px); }
.button--primary { color: var(--color-on-primary); background: var(--color-primary); border-color: var(--color-primary); }
.button--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.button--secondary { background: var(--color-surface); border-color: var(--color-border-strong); }
.button--secondary:hover { background: var(--color-bg-subtle); }
.button--ghost { color: var(--color-text-secondary); }
.button--ghost:hover { color: var(--color-text); background: var(--color-bg-subtle); }
.button--danger { color: var(--color-danger); background: var(--color-danger-soft); }
.button--danger:hover { background: #fbdede; }
.button--full { width: 100%; }
.field { display: grid; gap: var(--space-2); }
.field label { color: var(--color-text); font-size: var(--text-sm); font-weight: 650; }
.field-help, .field-error { font-size: var(--text-xs); }
.field-help { color: var(--color-text-secondary); }
.field-error { color: var(--color-danger); }
.input, .select { width: 100%; min-height: 2.75rem; padding: .625rem .75rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); color: var(--color-text); background: var(--color-surface); box-shadow: var(--shadow-sm); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.input::placeholder { color: var(--color-text-tertiary); }
.input:hover, .select:hover { border-color: #aebbc6; }
.input:focus, .select:focus { outline: 0; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--brand-focus-ring); }
.input--error { border-color: var(--color-danger); }
.surface { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.surface--flat { box-shadow: none; }
.badge { display: inline-flex; align-items: center; min-height: 1.5rem; padding: .2rem .5rem; border-radius: 999px; background: var(--color-bg-subtle); color: var(--color-text-secondary); font-size: var(--text-xs); font-weight: 650; white-space: nowrap; }
.badge--primary { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.alert { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid transparent; border-radius: var(--radius-md); font-size: var(--text-sm); }
.alert--success { color: #155c46; border-color: #bee5d6; background: var(--color-success-soft); }
.alert--warning { color: #82500e; border-color: #f3daac; background: var(--color-warning-soft); }
.alert--error, .alert--danger { color: #913030; border-color: #f0c2c2; background: var(--color-danger-soft); }
.alert--info { color: #1d536f; border-color: #c7dfec; background: var(--color-primary-soft); }
.alert-close { padding: 0; border: 0; color: inherit; background: transparent; font-size: 1.25rem; line-height: 1; }
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: .875rem var(--space-4); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: middle; }
.table th { color: var(--color-text-secondary); background: #fafbfc; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.table td { font-size: var(--text-sm); }
.table tbody tr { transition: background-color var(--transition-fast); }
.table tbody tr:hover { background: #fafcfd; }
.table tbody tr:last-child td { border-bottom: 0; }
.table .align-right { text-align: right; }
.empty-state { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-7) var(--space-5); text-align: center; }
.empty-state p { max-width: 28rem; margin: 0; color: var(--color-text-secondary); }