/* ============================================================================
   COMPONENT STYLES - TEMPLE OF CAPITAL DESIGN SYSTEM
   ============================================================================
   Standardized component styles for buttons, cards, forms, and modals.
   These styles apply to launchpad pages only (CULT EXEC is protected).
   ============================================================================ */

/* ============================================================================
   BUTTONS
   ============================================================================ */

/* Base Button - All buttons get subtle metallic sheen */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--button-padding-y-md) var(--button-padding-x-md);
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    border: var(--border-width-thin) solid transparent;
    border-radius: var(--radius-sm); /* Sharper corners for plaque look */
    cursor: pointer;
    /* Solid, instant appearance - no grow animation */
    transform: none !important; /* Ensure no initial scale/transform */
    transition: box-shadow var(--duration-base) var(--ease-classic),
                background var(--duration-base) var(--ease-classic),
                border-color var(--duration-base) var(--ease-classic),
                color var(--duration-base) var(--ease-classic),
                text-shadow var(--duration-base) var(--ease-classic);
    /* Only transition transform on hover/active, not on initial load */
    box-shadow: var(--elevation-2);
    white-space: nowrap;
    user-select: none;
    position: relative;
    overflow: hidden;
    /* Subtle metallic sheen on all buttons */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* Ensure .btn-primary overrides base .btn styles */
.btn.btn-primary {
    box-shadow: var(--shadow-metallic-raised) !important;
}

.btn:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.btn-primary:focus-visible {
    outline: 2px solid var(--gold-metallic-base);
    outline-offset: 2px;
    box-shadow: 
        var(--shadow-metallic-raised),
        0 0 0 4px rgba(212, 175, 55, 0.2);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Button Sizes */
.btn-sm {
    padding: var(--button-padding-y-sm) var(--button-padding-x-sm);
    font-size: var(--font-size-body-sm);
    height: var(--button-height-sm);
}

.btn-md {
    padding: var(--button-padding-y-md) var(--button-padding-x-md);
    font-size: var(--font-size-body);
    height: var(--button-height-md);
}

.btn-lg {
    padding: var(--button-padding-y-lg) var(--button-padding-x-lg);
    font-size: var(--font-size-body-lg);
    height: var(--button-height-lg);
}

/* Button Variants */
.btn-primary {
    background: var(--gradient-metallic-raised) !important;
    background-color: transparent !important; /* Override any background-color */
    color: var(--gold-metallic-dark) !important; /* Darker text for engraved look */
    border: 1px solid var(--gold-metallic-dark) !important;
    border-radius: var(--radius-sm) !important; /* Sharp corners like engraved plaques */
    box-shadow: var(--shadow-metallic-raised) !important;
    text-shadow: 
        0 1px 2px rgba(255, 255, 255, 0.3), /* Subtle highlight on top */
        0 2px 4px rgba(0, 0, 0, 0.5), /* Deep shadow for engraved effect */
        0 0 1px rgba(0, 0, 0, 0.8) !important; /* Sharp edge definition */
    position: relative;
    overflow: hidden;
    font-weight: var(--font-weight-bold) !important; /* Bolder text for plaque readability */
    font-family: var(--font-engraved) !important; /* Serif font for engraved plaque look */
    /* Solid, instant appearance - no grow animation */
    transform: none !important; /* Ensure no initial scale/transform */
    opacity: 1 !important; /* Ensure fully visible from start */
}

.btn-primary:hover:not(:disabled) {
    background: linear-gradient(160deg,
        var(--gold-metallic-sheen) 0%,
        var(--gold-metallic-light) 15%,
        var(--gold-metallic-base) 40%,
        var(--gold-metallic-gradient-mid) 60%,
        var(--gold-metallic-gradient-dark) 85%,
        var(--gold-metallic-dark) 100%) !important;
    background-color: transparent !important;
    box-shadow: 
        inset 0 2px 3px rgba(255, 255, 255, 0.3),
        inset 0 -2px 3px rgba(0, 0, 0, 0.25),
        0 4px 8px rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.15),
        0 0 12px rgba(212, 175, 55, 0.2) !important;
    /* Only transition transform on hover, not on initial load */
    transition: transform var(--duration-base) var(--ease-classic),
                box-shadow var(--duration-base) var(--ease-classic),
                background var(--duration-base) var(--ease-classic),
                border-color var(--duration-base) var(--ease-classic),
                color var(--duration-base) var(--ease-classic),
                text-shadow var(--duration-base) var(--ease-classic);
    transform: translateY(-1px);
    border-color: var(--gold-metallic-base) !important;
    color: var(--gold-metallic-dark) !important; /* Keep dark text on hover */
    text-shadow: 
        0 1px 2px rgba(255, 255, 255, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.6),
        0 0 1px rgba(0, 0, 0, 0.9) !important; /* Enhanced shadow on hover */
}

.btn-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 -1px 2px rgba(255, 255, 255, 0.15),
        0 1px 2px rgba(0, 0, 0, 0.15) !important;
    background: linear-gradient(160deg,
        var(--gold-metallic-base) 0%,
        var(--gold-metallic-gradient-mid) 50%,
        var(--gold-metallic-dark) 100%) !important;
    background-color: transparent !important;
}

.btn-secondary {
    background: var(--gradient-bronze-raised) !important;
    background-color: transparent !important;
    color: var(--bronze-metallic-dark) !important; /* Darker text for engraved look */
    border: 1px solid var(--bronze-metallic-dark) !important;
    border-radius: var(--radius-sm) !important; /* Sharp corners like engraved plaques */
    box-shadow: var(--shadow-bronze-raised) !important;
    text-shadow: 
        0 1px 2px rgba(255, 255, 255, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.5),
        0 0 1px rgba(0, 0, 0, 0.8) !important; /* Deep shadow for engraved effect */
    font-weight: var(--font-weight-bold) !important;
    font-family: var(--font-engraved) !important; /* Serif font for engraved plaque look */
    /* Solid, instant appearance - no grow animation */
    transform: none !important; /* Ensure no initial scale/transform */
    opacity: 1 !important; /* Ensure fully visible from start */
}

.btn-secondary:hover:not(:disabled) {
    background: linear-gradient(160deg,
        var(--bronze-metallic-sheen) 0%,
        var(--bronze-metallic-light) 15%,
        var(--bronze-metallic-base) 40%,
        var(--bronze-metallic-gradient-mid) 60%,
        var(--bronze-metallic-gradient-dark) 85%,
        var(--bronze-metallic-dark) 100%) !important;
    background-color: transparent !important;
    box-shadow: 
        inset 0 2px 3px rgba(255, 255, 255, 0.25),
        inset 0 -2px 3px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.15),
        0 0 12px rgba(205, 127, 50, 0.2) !important;
    /* Only transition transform on hover, not on initial load */
    transition: transform var(--duration-base) var(--ease-classic),
                box-shadow var(--duration-base) var(--ease-classic),
                background var(--duration-base) var(--ease-classic),
                border-color var(--duration-base) var(--ease-classic),
                color var(--duration-base) var(--ease-classic),
                text-shadow var(--duration-base) var(--ease-classic);
    transform: translateY(-1px);
    border-color: var(--bronze-metallic-base) !important;
    color: var(--bronze-metallic-dark) !important; /* Keep dark text on hover */
    text-shadow: 
        0 1px 2px rgba(255, 255, 255, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.6),
        0 0 1px rgba(0, 0, 0, 0.9) !important;
}

.btn-secondary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 -1px 2px rgba(255, 255, 255, 0.15),
        0 1px 2px rgba(0, 0, 0, 0.15) !important;
    background: linear-gradient(160deg,
        var(--bronze-metallic-base) 0%,
        var(--bronze-metallic-gradient-mid) 50%,
        var(--bronze-metallic-dark) 100%) !important;
    background-color: transparent !important;
}

.btn-secondary:focus-visible {
    outline: 2px solid var(--bronze-metallic-base);
    outline-offset: 2px;
    box-shadow: 
        var(--shadow-bronze-raised),
        0 0 0 4px rgba(205, 127, 50, 0.2) !important;
}

.btn-outline {
    background: transparent !important;
    color: var(--gold-metallic-dark) !important; /* Darker for engraved look */
    border: 1px solid var(--gold-metallic-base) !important;
    border-radius: var(--radius-sm) !important; /* Sharp corners */
    box-shadow: var(--shadow-metallic-engraved) !important;
    text-shadow: 
        0 1px 2px rgba(255, 255, 255, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.6),
        0 0 1px rgba(0, 0, 0, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; /* Enhanced engraved effect */
    font-weight: var(--font-weight-bold) !important;
    font-family: var(--font-engraved) !important; /* Serif font for engraved plaque look */
}

.btn-outline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-metallic-engraved);
    opacity: 0.15;
    z-index: -1;
    border-radius: inherit;
}

.btn-outline:hover:not(:disabled) {
    background: rgba(201, 164, 66, 0.1) !important;
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 -1px 2px rgba(255, 255, 255, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.15),
        0 0 8px rgba(212, 175, 55, 0.15) !important;
    border-color: var(--gold-metallic-base) !important;
    color: var(--gold-metallic-dark) !important; /* Keep dark text */
    transform: translateY(-1px);
    text-shadow: 
        0 1px 2px rgba(255, 255, 255, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.6),
        0 0 1px rgba(0, 0, 0, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.btn-outline:active:not(:disabled) {
    box-shadow: 
        inset 0 3px 6px rgba(0, 0, 0, 0.4),
        inset 0 -1px 2px rgba(255, 255, 255, 0.05),
        0 1px 2px rgba(0, 0, 0, 0.1) !important;
    background: rgba(125, 98, 33, 0.15) !important;
    transform: translateY(0);
}

.btn-outline:focus-visible {
    outline: 2px solid var(--gold-metallic-base);
    outline-offset: 2px;
    box-shadow: 
        var(--shadow-metallic-engraved),
        0 0 0 4px rgba(212, 175, 55, 0.2) !important;
}

.btn-ghost {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) !important;
}

.btn-ghost::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-silver-raised);
    opacity: 0.08;
    z-index: -1;
    border-radius: inherit;
    transition: opacity var(--duration-base) var(--ease-classic);
}

.btn-ghost:hover:not(:disabled) {
    background: rgba(158, 158, 158, 0.1) !important;
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.1) !important;
    color: var(--text-primary) !important;
    border-color: var(--silver-metallic-base) !important;
}

.btn-ghost:hover:not(:disabled)::before {
    opacity: 0.15;
}

.btn-ghost:active:not(:disabled) {
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        inset 0 -1px 2px rgba(255, 255, 255, 0.1) !important;
    background: rgba(158, 158, 158, 0.15) !important;
}

.btn-ghost:focus-visible {
    outline: 2px solid var(--silver-metallic-base);
    outline-offset: 2px;
    background: rgba(158, 158, 158, 0.1) !important;
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        0 0 0 4px rgba(158, 158, 158, 0.2) !important;
}

/* Button with Art Deco styling */
.btn-artdeco {
    font-family: var(--font-accent);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
}

/* ============================================================================
   GOLD METALLIC BUTTONS
   ============================================================================ */

/* Base gold metallic button - raised variant (coin-like) */
.btn-gold,
.btn-gold--raised {
    background: var(--gradient-metallic-raised);
    color: var(--gold-metallic-sheen);
    border: 1px solid var(--gold-metallic-dark);
    box-shadow: var(--shadow-metallic-raised);
    text-shadow: 
        0 1px 0 var(--gold-metallic-dark),
        0 2px 2px rgba(0, 0, 0, 0.25);
    transition: all var(--duration-base) var(--ease-classic);
    position: relative;
    overflow: hidden;
}

.btn-gold:hover:not(:disabled),
.btn-gold--raised:hover:not(:disabled) {
    background: linear-gradient(160deg,
        var(--gold-metallic-sheen) 0%,
        var(--gold-metallic-light) 15%,
        var(--gold-metallic-base) 40%,
        var(--gold-metallic-gradient-mid) 60%,
        var(--gold-metallic-gradient-dark) 85%,
        var(--gold-metallic-dark) 100%);
    box-shadow: 
        inset 0 2px 3px rgba(255, 255, 255, 0.3),
        inset 0 -2px 3px rgba(0, 0, 0, 0.25),
        0 4px 8px rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.15),
        0 0 12px rgba(212, 175, 55, 0.2);
    transform: translateY(-1px);
    border-color: var(--gold-metallic-base);
}

.btn-gold:active:not(:disabled),
.btn-gold--raised:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 -1px 2px rgba(255, 255, 255, 0.15),
        0 1px 2px rgba(0, 0, 0, 0.15);
    background: linear-gradient(160deg,
        var(--gold-metallic-base) 0%,
        var(--gold-metallic-gradient-mid) 50%,
        var(--gold-metallic-dark) 100%);
}

.btn-gold:focus-visible,
.btn-gold--raised:focus-visible {
    outline: 2px solid var(--gold-metallic-base);
    outline-offset: 2px;
    box-shadow: 
        var(--shadow-metallic-raised),
        0 0 0 4px rgba(212, 175, 55, 0.2);
}

/* Engraved gold button - etched-in effect */
.btn-gold--engraved {
    background: transparent;
    color: var(--gold-metallic-sheen);
    border: 1px solid var(--gold-metallic-dark);
    box-shadow: var(--shadow-metallic-engraved);
    text-shadow: 
        0 1px 0 var(--gold-metallic-dark),
        0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all var(--duration-base) var(--ease-classic);
    position: relative;
}

.btn-gold--engraved::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-metallic-engraved);
    opacity: 0.15;
    z-index: -1;
    border-radius: inherit;
}

.btn-gold--engraved:hover:not(:disabled) {
    background: rgba(201, 164, 66, 0.1);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 -1px 2px rgba(255, 255, 255, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.15),
        0 0 8px rgba(212, 175, 55, 0.15);
    border-color: var(--gold-metallic-base);
    text-shadow: 
        0 1px 0 var(--gold-metallic-dark),
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-gold--engraved:active:not(:disabled) {
    box-shadow: 
        inset 0 3px 6px rgba(0, 0, 0, 0.4),
        inset 0 -1px 2px rgba(255, 255, 255, 0.05),
        0 1px 2px rgba(0, 0, 0, 0.1);
    background: rgba(125, 98, 33, 0.15);
}

.btn-gold--engraved:focus-visible {
    outline: 2px solid var(--gold-metallic-base);
    outline-offset: 2px;
    box-shadow: 
        var(--shadow-metallic-engraved),
        0 0 0 4px rgba(212, 175, 55, 0.2);
}

/* Optional shimmer effect - disabled by default, enable with .shimmer class */
.btn-gold.shimmer,
.btn-gold--raised.shimmer {
    background-size: 200% 100%;
    animation: shimmer-metallic 3s ease-in-out infinite;
}

@keyframes shimmer-metallic {
    0% {
        background-position: -200% 0;
    }
    50% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ============================================================================
   CARDS
   ============================================================================ */

.card {
    background: var(--bg-elevated);
    border: var(--border-width-thin) solid var(--border-base);
    border-radius: var(--card-border-radius);
    padding: var(--card-padding);
    box-shadow: var(--elevation-2); /* Elevation 2 for cards */
    transition: var(--transition-elevation);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    /* Ensure marble texture doesn't make card transparent */
    background-color: var(--bg-elevated);
}

.card:hover {
    box-shadow: var(--elevation-3); /* Elevation 3 on hover */
    transform: translateY(-2px);
    border-color: var(--border-dark);
}

/* Clickable cards should have focus states */
.card[role="button"],
.card[tabindex],
a.card,
button.card {
    cursor: pointer;
}

.card[role="button"]:focus-visible,
.card[tabindex]:focus-visible,
a.card:focus-visible,
button.card:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    box-shadow: var(--shadow-gold);
    border-color: var(--accent-primary);
}

/* Card with uniform height (for grids) */
.card-uniform {
    height: 100%;
    min-height: 400px; /* Base minimum height */
}

/* Card Header */
.card-header {
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-4);
    border-bottom: var(--border-width-thin) solid var(--border-base);
}

.card-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
    margin: 0;
    /* Allow natural overflow - no truncation */
    min-height: 2.5rem; /* Minimum for single line */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.card-subtitle {
    font-size: var(--font-size-body-sm);
    color: var(--text-secondary);
    margin: var(--spacing-1) 0 0 0;
}

/* Card Body */
.card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.card-description {
    font-size: var(--font-size-body);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    margin: 0;
    /* Fixed height for uniform cards - 2 lines max */
    min-height: 3rem; /* ~48px for 2 lines */
    max-height: 3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Card Footer */
.card-footer {
    margin-top: auto;
    padding-top: var(--spacing-4);
    border-top: var(--border-width-thin) solid var(--border-base);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
}

/* Card Badges */
.card-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.card-badge.featured {
    background-color: var(--gold-primary);
    color: var(--text-inverse);
}

.card-badge.mock {
    background-color: #ff69b4;
    color: var(--text-inverse);
}

.card-badge.audit {
    background-color: var(--success-500);
    color: var(--text-inverse);
}

/* Card with Marble texture effect */
.card-marble {
    background: linear-gradient(to bottom, var(--marble-white), var(--marble-cream));
    box-shadow: var(--shadow-marble);
}

/* ============================================================================
   FORMS
   ============================================================================ */

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
}

.form-label {
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    font-family: var(--font-body);
}

.form-label.required::after {
    content: ' *';
    color: var(--error-500);
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: var(--input-padding-y) var(--input-padding-x);
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    color: var(--text-primary);
    background-color: var(--bg-elevated);
    border: var(--input-border-width) solid var(--border-base);
    border-radius: var(--input-border-radius);
    transition: var(--transition-base);
    box-sizing: border-box;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-gold);
}

.form-input:focus-visible,
.form-textarea:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-gold);
}

.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
    background-color: var(--bg-secondary);
    color: var(--text-muted);
    cursor: not-allowed;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-muted);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

.form-error {
    font-size: var(--font-size-body-sm);
    color: var(--error-500);
    margin-top: var(--spacing-1);
}

.form-help {
    font-size: var(--font-size-body-sm);
    color: var(--text-muted);
    margin-top: var(--spacing-1);
}

/* Input with icon */
.form-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.form-input-wrapper .form-input {
    padding-right: var(--spacing-10);
}

.form-input-icon {
    position: absolute;
    right: var(--spacing-3);
    color: var(--text-muted);
    pointer-events: none;
}

/* ============================================================================
   MODALS
   ============================================================================ */

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--modal-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-backdrop);
    padding: var(--spacing-4);
    animation: fade-in var(--duration-base) var(--ease-out-classic);
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal {
    background: var(--bg-elevated);
    border-radius: var(--modal-border-radius);
    padding: var(--modal-padding);
    width: 100%;
    max-width: var(--modal-max-width);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--elevation-5); /* Maximum elevation for modals */
    z-index: var(--z-modal);
    animation: slide-up var(--duration-base) var(--ease-out-classic);
    position: relative;
}

@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
    border-bottom: var(--border-width-thin) solid var(--border-base);
}

.modal-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    padding: var(--spacing-2);
    cursor: pointer;
    color: var(--text-muted);
    font-size: var(--font-size-h4);
    line-height: 1;
    transition: var(--transition-color);
    border-radius: var(--radius-sm);
}

.modal-close:hover {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
}

.modal-close:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
}

.modal-body {
    margin-bottom: var(--spacing-6);
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-3);
    padding-top: var(--spacing-4);
    border-top: var(--border-width-thin) solid var(--border-base);
}

/* ============================================================================
   UTILITY CLASSES FOR COMPONENTS
   ============================================================================ */

/* Text truncation */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Loading states */
.loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--border-base);
    border-top-color: var(--accent-primary);
    border-radius: var(--radius-full);
    animation: spin var(--duration-slower) linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Empty states */
.empty-state {
    text-align: center;
    padding: var(--spacing-16);
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: var(--font-size-display-3);
    margin-bottom: var(--spacing-4);
    opacity: 0.5;
}

.empty-state-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-2) 0;
}

.empty-state-description {
    font-size: var(--font-size-body);
    color: var(--text-secondary);
    margin: 0;
}

/* ============================================================================
   MARBLE TEXTURE OPT-IN (Feature Branch)
   ============================================================================
   Cards and modals can opt-in to marble texture by adding classes.
   Example usage in markup:
   - Cards: class="card marble-bg marble-sm marble-stretch-x marble-pos-b"
   - Modals: class="modal marble-bg marble-md marble-softlight marble-soft"
   ============================================================================ */

/* Cards with marble texture */
.card.marble-bg {
    /* Position relative is already set in .card base */
    /* Marble utilities can be composed via classes */
}

/* Modals with marble texture */
.modal.marble-bg {
    /* Position relative is already set in .modal base */
    /* Marble utilities can be composed via classes */
}

/* ============================================================================
   ENGRAVED SVG ICONS
   ============================================================================
   Styling for SVG icons used throughout the application
   ============================================================================ */

/* Base icon styling - all SVG icons inherit these */
.icon-copy,
.icon-etherscan,
.icon-github,
.icon-website,
.icon-twitter,
.icon-creator,
.icon-audited {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    color: currentColor;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
}

/* Icons in card links */
.card-link-icon svg,
.factory-link svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* Icons in buttons */
.copy-address-button svg {
    width: 14px;
    height: 14px;
    display: block;
}

/* Icons in badges */
.audit-badge-top svg {
    width: 14px;
    height: 14px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}

/* Ensure icons inherit color from parent */
.icon-copy svg,
.icon-etherscan svg,
.icon-github svg,
.icon-website svg,
.icon-twitter svg,
.icon-creator svg,
.icon-audited svg {
    color: inherit;
    stroke: currentColor;
    fill: none;
}