.taras-page-header {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--taras-spacing-4);
    padding-block-start: var(--taras-spacing-3);
    padding-block-end: var(--taras-spacing-4);
    border-block-end: var(--taras-size-border-hairline) solid var(--taras-color-border-soft);
}

.taras-page-header::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: var(--taras-size-page-header-accent-inline);
    block-size: var(--taras-size-page-header-accent-block);
    border-radius: var(--taras-radius-sm);
    background: var(--taras-color-brand-secondary);
}

.taras-page-shell {
    display: grid;
    inline-size: 100%;
    max-inline-size: var(--taras-size-container-product);
    margin-inline: auto;
    min-width: 0;
    gap: var(--taras-spacing-5);
}

.taras-page-shell__body {
    display: grid;
    min-width: 0;
    gap: var(--taras-spacing-5);
}

.taras-page-header h1,
.taras-section-surface h2,
.taras-empty-state__title {
    margin: 0;
    color: var(--taras-color-text-primary);
    font-size: var(--taras-typography-size-md);
    font-weight: 650;
}

.taras-page-header h1 {
    color: var(--taras-color-text-accent);
    font-size: var(--taras-typography-size-xl);
    line-height: 1.18;
}

.taras-page-header p,
.taras-section-surface p,
.taras-empty-state__description,
.taras-data-table-frame__caption {
    margin: var(--taras-spacing-2) 0 0;
    color: var(--taras-color-text-secondary);
    line-height: 1.5;
}

.taras-page-header > div:first-child,
.taras-section-surface__header {
    min-width: 0;
}

.taras-page-header > div:first-child {
    max-inline-size: var(--taras-size-page-header-copy-max-inline);
}

.taras-section-surface h2 {
    font-size: var(--taras-typography-size-lg);
    line-height: 1.25;
}

.taras-page-header__eyebrow {
    color: var(--taras-color-text-muted);
    font-size: var(--taras-typography-size-sm);
    font-weight: 650;
    text-transform: uppercase;
}

.taras-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--taras-spacing-2);
}

.taras-section-surface,
.taras-status-message,
.taras-empty-state,
.taras-data-table-frame {
    border: var(--taras-size-border-hairline) solid var(--taras-color-border-default);
    border-radius: var(--taras-radius-md);
    background: var(--taras-color-surface-raised);
    box-shadow: var(--taras-shadow-surface);
}

.taras-section-surface,
.taras-data-table-frame {
    position: relative;
}

.taras-section-surface {
    overflow: hidden;
    border-color: color-mix(in srgb, var(--taras-color-border-default) 76%, var(--taras-color-brand-secondary));
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--taras-color-surface-raised) 90%, var(--taras-color-brand-secondary-soft)) 0,
            var(--taras-color-surface-raised) var(--taras-size-section-tint-stop)
        );
}

.taras-section-surface::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: var(--taras-size-section-accent-block);
    background: var(--taras-color-brand-secondary);
}

.taras-section-surface,
.taras-empty-state {
    padding: var(--taras-spacing-5);
}

.taras-section-surface__body {
    display: grid;
    min-width: 0;
    gap: var(--taras-spacing-4);
    margin-block-start: var(--taras-spacing-4);
}

.taras-status-message {
    border-inline-start-width: var(--taras-size-system-role-accent-border);
    padding: var(--taras-spacing-3);
    color: var(--taras-color-text-primary);
}

.taras-status-message--neutral {
    border-color: var(--taras-color-border-default);
    border-inline-start-color: var(--taras-color-text-muted);
    background: var(--taras-color-surface-muted);
}

.taras-status-message--accent {
    border-color: var(--taras-color-brand-secondary-border);
    border-inline-start-color: var(--taras-color-brand-secondary);
    background: var(--taras-color-brand-secondary-soft);
}

.taras-status-message--info {
    border-color: var(--taras-color-feedback-info);
    border-inline-start-color: var(--taras-color-feedback-info);
    background: var(--taras-color-feedback-info-soft);
}

.taras-status-message--success {
    border-color: var(--taras-color-feedback-success);
    border-inline-start-color: var(--taras-color-feedback-success);
    background: var(--taras-color-feedback-success-soft);
}

.taras-status-message--warning {
    border-color: var(--taras-color-feedback-warning);
    border-inline-start-color: var(--taras-color-feedback-warning);
    background: var(--taras-color-feedback-warning-soft);
}

.taras-status-message--danger {
    border-color: var(--taras-color-feedback-danger-strong);
    border-inline-start-color: var(--taras-color-feedback-danger-strong);
    background: var(--taras-color-feedback-danger-soft);
}

.taras-empty-state {
    display: grid;
    min-height: var(--taras-size-empty-state-min-block);
    place-items: center;
    gap: var(--taras-spacing-4);
    color: var(--taras-color-text-secondary);
    text-align: center;
}

.taras-empty-state__icon {
    display: grid;
    min-block-size: var(--taras-size-empty-state-icon);
    min-inline-size: var(--taras-size-empty-state-icon);
    place-items: center;
    border-radius: 50%;
    background: var(--taras-color-brand-secondary-soft);
    color: var(--taras-color-brand-secondary);
    font-size: var(--taras-typography-size-lg);
}

.taras-empty-state__content,
.taras-empty-state__detail {
    max-inline-size: var(--taras-size-empty-state-content-max);
}

.taras-empty-state__actions,
.taras-form-action-row,
.taras-form-action-row__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--taras-spacing-2);
}

.taras-empty-state__actions {
    justify-content: center;
}

.taras-form-action-row {
    align-items: center;
    justify-content: space-between;
    padding-block-start: var(--taras-spacing-4);
}

.taras-form-action-row__summary {
    min-width: 0;
    color: var(--taras-color-text-secondary);
}

.taras-form-action-row__actions {
    justify-content: flex-end;
}

.taras-data-table-frame {
    min-width: 0;
    overflow: hidden;
    background: var(--taras-color-surface-default);
}

.taras-data-table-frame__caption {
    padding: var(--taras-spacing-3) var(--taras-spacing-4);
    border-block-end: var(--taras-size-border-hairline) solid var(--taras-color-border-subtle);
    background: color-mix(in srgb, var(--taras-color-surface-muted) 72%, var(--taras-color-surface-default));
    font-weight: 650;
}

.taras-data-table-frame__scroll {
    overflow-x: auto;
    outline: none;
}

.taras-data-table-frame__scroll:focus-visible {
    box-shadow:
        0 0 0 var(--taras-size-focus-ring-inner) var(--taras-color-surface-default),
        0 0 0 var(--taras-size-focus-ring-outer) var(--taras-color-brand-primary-focus);
}

.taras-data-table-frame table {
    width: 100%;
    min-width: var(--taras-size-data-table-min-inline);
    margin: 0;
}

.taras-badge {
    display: inline-flex;
    min-block-size: 1.5rem;
    max-inline-size: 100%;
    align-items: center;
    gap: var(--taras-spacing-1);
    border: var(--taras-size-border-hairline) solid transparent;
    border-radius: var(--taras-radius-sm);
    padding: 0 var(--taras-spacing-2);
    font-size: var(--taras-typography-size-sm);
    font-weight: 650;
    line-height: 1;
    overflow-wrap: anywhere;
}

.taras-badge--neutral {
    border-color: var(--taras-color-border-default);
    background: var(--taras-color-surface-subtle);
    color: var(--taras-color-text-secondary);
}

.taras-badge--success {
    border-color: var(--taras-color-feedback-success);
    background: var(--taras-color-feedback-success-soft);
    color: var(--taras-color-feedback-success-strong);
}

.taras-badge--warning {
    border-color: var(--taras-color-feedback-warning);
    background: var(--taras-color-feedback-warning-soft);
    color: var(--taras-color-text-primary);
}

.taras-badge--danger {
    border-color: var(--taras-color-feedback-danger-strong);
    background: var(--taras-color-feedback-danger-soft);
    color: var(--taras-color-feedback-danger-strong);
}

.taras-badge--accent {
    border-color: var(--taras-color-brand-secondary-border);
    background: var(--taras-color-brand-secondary-soft);
    color: var(--taras-color-brand-secondary-strong);
}

.taras-badge--info {
    border-color: var(--taras-color-feedback-info);
    background: var(--taras-color-feedback-info-soft);
    color: var(--taras-color-feedback-info-strong);
}

.taras-field-control,
.taras-field-select,
.taras-field-textarea {
    width: 100%;
    min-block-size: 2rem;
    border: var(--taras-size-border-hairline) solid var(--taras-color-border-default);
    border-radius: var(--taras-radius-sm);
    padding: var(--taras-spacing-2);
    background: var(--taras-color-surface-default);
    color: var(--taras-color-text-primary);
}

.taras-field-control[readonly],
.taras-field-control:disabled,
.taras-field-select[readonly],
.taras-field-select:disabled,
.taras-field-textarea[readonly],
.taras-field-textarea:disabled {
    background: var(--taras-color-surface-muted);
    color: var(--taras-color-text-secondary);
}

.taras-field-control::placeholder,
.taras-field-textarea::placeholder {
    color: var(--taras-color-text-secondary);
    opacity: 1;
}

.taras-field-label {
    display: block;
    margin-bottom: var(--taras-spacing-1);
    color: var(--taras-color-text-secondary);
    font-size: var(--taras-typography-size-sm);
    font-weight: 650;
}

.taras-field-hint {
    color: var(--taras-color-text-muted);
    font-size: var(--taras-typography-size-sm);
    line-height: 1.4;
}

.taras-field-block {
    display: grid;
    gap: var(--taras-spacing-1);
    min-width: 0;
}

.taras-inline-field {
    display: flex;
    min-width: 0;
    gap: var(--taras-spacing-2);
    align-items: stretch;
}

.taras-inline-field .taras-field-control {
    flex: 1 1 auto;
    min-width: 0;
}

.taras-field-textarea {
    resize: vertical;
}

.taras-field-control:focus,
.taras-field-select:focus,
.taras-field-textarea:focus {
    outline: none;
    box-shadow:
        0 0 0 var(--taras-size-focus-ring-inner) var(--taras-color-surface-default),
        0 0 0 var(--taras-size-focus-ring-outer) var(--taras-color-brand-primary-focus);
}

.taras-data-table {
    border-collapse: collapse;
    color: var(--taras-color-text-primary);
}

.taras-data-table th,
.taras-data-table td {
    padding: var(--taras-spacing-2) var(--taras-spacing-3);
    border-bottom: var(--taras-size-border-hairline) solid var(--taras-color-border-default);
    text-align: left;
    vertical-align: top;
}

.taras-data-table thead th {
    background: var(--taras-color-surface-muted);
    color: var(--taras-color-text-secondary);
    font-size: var(--taras-typography-size-sm);
    font-weight: 650;
}

.taras-data-table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--taras-color-surface-muted) 44%, transparent);
}

.taras-data-table tbody tr:hover td {
    background: color-mix(in srgb, var(--taras-color-brand-primary-soft) 74%, transparent);
}

.taras-monospace {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.taras-button {
    display: inline-flex;
    min-block-size: 2rem;
    align-items: center;
    justify-content: center;
    border: var(--taras-size-border-hairline) solid var(--taras-color-action-default-border);
    border-radius: var(--taras-radius-sm);
    padding: var(--taras-spacing-2) var(--taras-spacing-3);
    background: var(--taras-color-action-default-bg);
    color: var(--taras-color-action-default-text);
    font: inherit;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition:
        border-color 140ms ease,
        background-color 140ms ease,
        color 140ms ease,
        box-shadow 140ms ease;
}

.taras-button:hover:not(:disabled) {
    border-color: var(--taras-color-action-default-border-hover);
    background: var(--taras-color-action-default-bg-hover);
    color: var(--taras-color-action-default-text-hover);
}

.taras-button:disabled {
    cursor: not-allowed;
    opacity: var(--taras-opacity-disabled);
}

.taras-button:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 var(--taras-size-focus-ring-inner) var(--taras-color-surface-default),
        0 0 0 var(--taras-size-focus-ring-outer) var(--taras-color-brand-primary-focus);
}

.taras-button--accent {
    border-color: var(--taras-color-action-accent-border);
    background: var(--taras-color-action-accent-bg);
    color: var(--taras-color-action-accent-text);
}

.taras-button--accent:hover:not(:disabled) {
    border-color: var(--taras-color-action-accent-border-hover);
    background: var(--taras-color-action-accent-bg-hover);
    color: var(--taras-color-action-accent-text);
}

.taras-button--danger {
    border-color: var(--taras-color-feedback-danger-strong);
    background: color-mix(in srgb, var(--taras-color-feedback-danger-soft) 82%, var(--taras-color-surface-raised));
    color: var(--taras-color-feedback-danger-strong);
}

.taras-button--danger:hover:not(:disabled) {
    border-color: var(--taras-color-feedback-danger-strong);
    background: var(--taras-color-feedback-danger-soft);
    color: var(--taras-color-feedback-danger-strong);
}

.taras-text-secondary {
    color: var(--taras-color-text-secondary);
}

.taras-text-warning {
    color: var(--taras-color-feedback-warning-strong);
}

@media (forced-colors: active) {
    .taras-section-surface,
    .taras-status-message,
    .taras-empty-state,
    .taras-data-table-frame {
        border-color: CanvasText;
    }

    .taras-empty-state__icon {
        border: var(--taras-size-border-hairline) solid CanvasText;
        background: Canvas;
        color: CanvasText;
    }

    .taras-badge,
    .taras-field-control,
    .taras-field-select,
    .taras-field-textarea,
    .taras-button {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }
}