.ig-btn {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ig-space-2);
    padding: .625rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--ig-radius-sm);
    font: 700 var(--ig-font-size-base)/1 var(--ig-font-sans);
    text-decoration: none;
    transition: background-color var(--ig-transition-fast), border-color var(--ig-transition-fast), color var(--ig-transition-fast);
}

.ig-btn--primary { color: #fff; background: var(--ig-color-primary); }
.ig-btn--primary:hover { color: #fff; background: var(--ig-color-primary-hover); }
.ig-btn--secondary { color: var(--ig-color-text); background: var(--ig-color-surface); border-color: var(--ig-color-border); }
.ig-btn--secondary:hover { color: var(--ig-color-primary-hover); border-color: var(--ig-color-primary); background: var(--ig-color-primary-soft); }
.ig-btn--ghost { color: var(--ig-color-text); background: transparent; }
.ig-btn--ghost:hover { color: var(--ig-color-primary-hover); background: var(--ig-color-primary-soft); }
.ig-btn--danger { color: #fff; background: var(--ig-color-danger); }
.ig-btn--danger:hover { color: #fff; background: #c94050; }
.ig-btn[disabled], .ig-btn.is-disabled { opacity: .55; pointer-events: none; }

.ig-icon-btn {
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--ig-color-border);
    border-radius: var(--ig-radius-sm);
    color: var(--ig-color-text);
    background: var(--ig-color-surface);
}

.ig-icon-btn svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ig-icon-btn:hover { color: var(--ig-color-primary); background: var(--ig-color-primary-soft); }

.ig-card {
    padding: var(--ig-space-5);
    border: 1px solid var(--ig-color-border);
    border-radius: var(--ig-radius-lg);
    background: var(--ig-color-surface);
    box-shadow: var(--ig-shadow-sm);
}

.card.ig-card { padding: 0; overflow: hidden; }
.ig-card--accent { border-top: 3px solid var(--ig-color-primary); }
.ig-card--warning { border-top: 3px solid var(--ig-color-warning); }
.ig-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ig-space-4); margin-bottom: var(--ig-space-4); }
.ig-card__header h2, .ig-card__header h3 { margin: 0; }

.ig-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ig-space-5);
    margin-bottom: var(--ig-space-6);
}

.ig-page-header__text { min-width: 0; }
.ig-page-header__eyebrow { margin: 0 0 var(--ig-space-1); color: var(--ig-color-primary); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ig-page-header h1 { margin: 0; color: var(--ig-color-text); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.ig-page-header__text > p:last-child { margin: var(--ig-space-2) 0 0; color: var(--ig-color-muted); }

.ig-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ig-space-1);
    padding: .25rem .55rem;
    border-radius: 999px;
    color: var(--ig-color-text);
    background: var(--ig-color-primary-soft);
    font-size: var(--ig-font-size-sm);
    font-weight: 700;
}
.ig-badge--success { color: #145c3d; background: #dff7eb; }
.ig-badge--warning { color: #7a4b00; background: #fff2cf; }
.ig-badge--danger { color: #8f2632; background: #ffe1e5; }
.ig-badge--info { color: #174f9e; background: #e2edff; }
.ig-badge--neutral { color: #475467; background: #edf0f4; }

.ig-alert { padding: var(--ig-space-4); border: 1px solid var(--ig-color-border); border-left-width: .25rem; border-radius: var(--ig-radius-md); background: var(--ig-color-surface); }
.ig-alert--success { border-left-color: var(--ig-color-success); }
.ig-alert--warning { border-left-color: var(--ig-color-warning); }
.ig-alert--danger { border-left-color: var(--ig-color-danger); }
.ig-alert--info { border-left-color: var(--ig-color-info); }

.ig-empty-state { padding: var(--ig-space-8); border: 1px dashed var(--ig-color-border); border-radius: var(--ig-radius-lg); color: var(--ig-color-muted); text-align: center; background: var(--ig-color-surface); }
.ig-empty-state > :last-child { margin-bottom: 0; }
.ig-field { display: grid; gap: var(--ig-space-2); }
.ig-field > label { color: var(--ig-color-text); font-weight: 700; }
.ig-form-control { width: 100%; min-height: 2.75rem; padding: .625rem .75rem; border: 1px solid var(--ig-color-border); border-radius: var(--ig-radius-sm); color: var(--ig-color-text); background: var(--ig-color-surface); }
.ig-table-shell { max-width: 100%; overflow-x: auto; border: 1px solid var(--ig-color-border); border-radius: var(--ig-radius-lg); background: var(--ig-color-surface); }
.ig-table-shell > .table-responsive { overflow: visible; }
.ig-table-shell .table { margin-bottom: 0; }
.ig-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ig-space-3); }
.ig-toolbar--filters { padding: var(--ig-space-4); border: 1px solid var(--ig-color-border); border-radius: var(--ig-radius-lg); background: var(--ig-color-surface); box-shadow: var(--ig-shadow-sm); }
.ig-dropdown, .ig-modal { border: 1px solid var(--ig-color-border); border-radius: var(--ig-radius-md); background: var(--ig-color-surface); box-shadow: var(--ig-shadow-md); }
.ig-drawer { background: var(--ig-color-sidebar); }
.ig-skeleton { overflow: hidden; border-radius: var(--ig-radius-sm); background: linear-gradient(90deg, #edf0f4 25%, #f8f9fb 50%, #edf0f4 75%); background-size: 200% 100%; animation: ig-skeleton 1.4s linear infinite; }

.ig-btn:focus-visible, .ig-icon-btn:focus-visible, .ig-form-control:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ig-color-focus) 55%, transparent);
    outline-offset: 2px;
}

@keyframes ig-skeleton { to { background-position-x: -200%; } }

@media (max-width: 767.98px) {
    .ig-page-header { align-items: stretch; flex-direction: column; }
    .ig-card { padding: var(--ig-space-4); }
    .card.ig-card { padding: 0; }
    .ig-toolbar > .btn, .ig-toolbar > .ig-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .ig-skeleton { animation: none; }
}