/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Color Palette - More subtle and professional */
    --primary: #3b82f6;
    --primary-light: #60a5fa;
    --primary-dark: #1d4ed8;
    --secondary: #64748b;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #06b6d4;
    
    /* Section-specific colors */
    --boon-color: #10b981;
    --boon-light: #d1fae5;
    --boon-dark: #065f46;
    --bane-color: #ef4444;
    --bane-light: #fee2e2;
    --bane-dark: #991b1b;
    --feat-color: #f59e0b;
    --feat-light: #fef3c7;
    --feat-dark: #92400e;
    --perk-color: #8b5cf6;
    --perk-light: #ede9fe;
    --perk-dark: #5b21b6;
    --flaw-color: #a16207;
    --flaw-light: #fef3c7;
    --flaw-dark: #451a03;
    
    /* Neutral Colors */
    --white: #ffffff;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    
    /* Semantic Colors */
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --border-light: #e2e8f0;
    --border-medium: #cbd5e1;
    --border-color: #e2e8f0;
    --bg-glass: rgba(255, 255, 255, 0.95);
    --bg-overlay: rgba(59, 130, 246, 0.1);
    
    /* Additional Colors */
    --background-light: #f8fafc;
    --background-lighter: #f1f5f9;
    --primary-color-light: #dbeafe;
    
    /* Spacing Scale - More compact */
    --spacing-xs: 2px;
    --spacing-sm: 4px;
    --spacing-md: 8px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
    --spacing-2xl: 24px;
    
    /* Border Radius - More subtle */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;
    
    /* Shadows - More subtle */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    
    /* Typography - Smaller and more compact */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-xs: 0.7rem;
    --font-size-sm: 0.75rem;
    --font-size-base: 0.8rem;
    --font-size-md: 0.9rem;
    --font-size-lg: 1rem;
    --font-size-xl: 1.125rem;
    --font-size-2xl: 1.25rem;
    --font-size-3xl: 1.5rem;
    --font-size-4xl: 1.75rem;
    
    /* Transitions */
    --transition-fast: 0.15s ease-out;
    --transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    font-family: var(--font-family);
    /* Simplified background - removed complex gradient animation */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: var(--text-primary);
    line-height: 1.4;
    min-height: 100vh;
    font-size: var(--font-size-base);
    /* Remove animation that can cause glitches */
    overflow-x: hidden; /* Prevent horizontal scroll issues */
    display: flex;
    flex-direction: column;
}

/* Remove problematic keyframe animation */
/* @keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
} */

.app-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-lg);
    position: relative;
}

/* Simplified background overlay - removed complex radial gradients */
.app-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(120, 119, 198, 0.1);
    pointer-events: none;
    z-index: -1;
    /* Remove backdrop-filter that can cause glitches */
}

/* Header Styles */
.app-header {
    background: rgba(255, 255, 255, 0.95);
    /* Remove backdrop-filter that can cause mobile issues */
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.app-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--success), var(--warning), var(--danger));
}

.app-header h1 {
    color: var(--primary);
    text-align: center;
    font-size: var(--font-size-3xl);
    font-weight: 700;
    margin: 0;
}

.app-header h1 i {
    margin-right: var(--spacing-sm);
    color: var(--primary);
}

.header-controls {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    flex-wrap: wrap;
}

/* Button Styles - Enhanced and Unified */
.btn {
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 600;
    transition: var(--transition-base);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    text-decoration: none;
    font-family: inherit;
    line-height: 1.3;
    min-height: 36px;
    justify-content: center;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn:hover::before {
    left: 100%;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* Button size variants */
.btn-small {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    border-radius: var(--radius-sm);
    min-height: 32px;
    font-weight: 600;
    transition: var(--transition-base);
}

.btn-large {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-base);
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
    min-height: 48px;
}

/* Button color variants */
.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: var(--white);
    border-color: var(--primary-dark);
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.btn-secondary {
    background: var(--white);
    color: var(--secondary);
    border-color: var(--border-medium);
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger) 0%, #d71010 100%);
    color: var(--white);
    border-color: var(--danger);
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

.btn-success {
    background: linear-gradient(135deg, var(--success) 0%, #34d399 100%);
    color: var(--white);
    border-color: var(--success);
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.btn-warning {
    background: linear-gradient(135deg, var(--warning) 0%, #fbbf24 100%);
    color: var(--white);
    border-color: var(--warning);
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

.btn-info {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: var(--white);
    border-color: #0891b2;
    box-shadow: 0 2px 4px rgba(6, 182, 212, 0.3);
}

/* Button hover states */
.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    border-color: var(--primary-dark);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
}

.btn-secondary:hover {
    background: var(--gray-100);
    color: var(--gray-700);
    border-color: var(--gray-400);
}

.btn-danger:hover {
    background: linear-gradient(135deg, #d71010 0%, var(--danger) 100%);
    border-color: #d71010;
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.4);
}

.btn-success:hover {
    background: linear-gradient(135deg, #34d399 0%, var(--success) 100%);
    border-color: #34d399;
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4);
}

.btn-warning:hover {
    background: linear-gradient(135deg, #fbbf24 0%, var(--warning) 100%);
    border-color: #fbbf24;
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.4);
}

.btn-info:hover {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    border-color: #0e7490;
    box-shadow: 0 4px 8px rgba(6, 182, 212, 0.4);
}

/* Disabled button state */
.btn:disabled,
.btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.btn:disabled:hover,
.btn[disabled]:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Unified Form Styles - Enhanced */
.form-row {
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.form-group {
    flex: 1;
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.form-group input, 
.form-group textarea, 
.form-group select {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    transition: var(--transition-base);
    background: var(--white);
    font-family: inherit;
    line-height: 1.4;
    min-height: 36px;
}

.form-group input:focus, 
.form-group textarea:focus, 
.form-group select:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--white);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

.form-group small {
    display: block;
    margin-top: var(--spacing-xs);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    line-height: 1.4;
}

/* XP field optimization - smaller width since it only needs to fit 2 digits */
.form-group.xp-field {
    flex: 0 0 auto;
    max-width: 150px;
}

/* Unified Card Components - Consolidated */
.card,
.attribute-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

/* Reduce border intensity for nested elements */
.content-section .content-section,
.content-section .attribute-card {
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-xs);
}

/* Initiative and Movement Section */
.initiative-movement-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.initiative-group,
.movement-group,
.legend-points-group {
    background: var(--white);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-xs);
}

.initiative-display {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.initiative-label {
    font-weight: 600;
    color: var(--text-primary);
}

.initiative-value {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--primary);
}

.initiative-dice {
    background: var(--primary-light);
    color: var(--white);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.initiative-advantage {
    margin-top: var(--spacing-sm);
}

.initiative-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.movement-stats {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.movement-stat {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.movement-stat label {
    font-weight: 600;
    color: var(--text-primary);
}

.movement-value {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--primary);
}

.movement-unit {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-left: 2px;
}

.hidden {
    display: none !important;
}

.legend-points-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.legend-points-display .btn {
    padding: 2px 6px;
    font-size: var(--font-size-xs);
    min-height: 20px;
    line-height: 1;
}

.legend-points-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--primary);
    text-align: center;
}

.legend-points-max {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.card-hover:hover,
.attribute-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.content-section:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: rgba(255, 255, 255, 0.6);
}

.card-padding,
.content-section-body {
    padding: var(--spacing-lg);
}

.card-padding-sm,
.content-section-header {
    padding: var(--spacing-md);
}

.card-padding-lg {
    padding: var(--spacing-xl);
}

/* Main Page Styles */
.main-page {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.main-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--success), var(--warning));
}

/* Welcome Section */
.welcome-section {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: rgba(59, 130, 246, 0.1);
    border-radius: var(--radius-md);
    border: 1px solid rgba(59, 130, 246, 0.2);
    position: relative;
    overflow: hidden;
}

.welcome-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--success));
}

.main-headline {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.warning-text {
    background: #fef2f2;
    color: #dc2626;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    border: 1px solid #fecaca;
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-sm);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    max-width: 500px;
}

.warning-text i {
    font-size: var(--font-size-base);
    color: #dc2626;
}

.main-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* Options List Page */
.options-list-page {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    width: 100%;
    margin: 0 auto;
}

.options-content {
    margin-top: var(--spacing-lg);
}

.option-category {
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.category-header {
    background: var(--gray-50);
    padding: var(--spacing-md);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition-base);
    border-bottom: 1px solid var(--border-light);
    position: relative;
}

.category-header:hover {
    background: var(--gray-100);
}

.category-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.category-header i {
    color: var(--primary);
}

/* Section-specific category header styling */
.boon-category {
    background: linear-gradient(135deg, var(--boon-light) 0%, rgba(16, 185, 129, 0.1) 100%);
    border-bottom: 2px solid var(--boon-color);
}

.boon-category:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.2) 100%);
}

.boon-category h3 {
    color: var(--boon-dark);
}

.boon-category i {
    color: var(--boon-color);
}

.bane-category {
    background: linear-gradient(135deg, var(--bane-light) 0%, rgba(239, 68, 68, 0.1) 100%);
    border-bottom: 2px solid var(--bane-color);
}

.bane-category:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.2) 100%);
}

.bane-category h3 {
    color: var(--bane-dark);
}

.bane-category i {
    color: var(--bane-color);
}

.feat-category {
    background: linear-gradient(135deg, var(--feat-light) 0%, rgba(245, 158, 11, 0.1) 100%);
    border-bottom: 2px solid var(--feat-color);
}

.feat-category:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.2) 100%);
}

.feat-category h3 {
    color: var(--feat-dark);
}

.feat-category i {
    color: var(--feat-color);
}

.perk-category {
    background: linear-gradient(135deg, var(--perk-light) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-bottom: 2px solid var(--perk-color);
}

.perk-category:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.2) 100%);
}

.perk-category h3 {
    color: var(--perk-dark);
}

.perk-category i {
    color: var(--perk-color);
}

.flaw-category {
    background: linear-gradient(135deg, var(--flaw-light) 0%, rgba(161, 98, 7, 0.1) 100%);
    border-bottom: 2px solid var(--flaw-color);
}

.flaw-category:hover {
    background: linear-gradient(135deg, rgba(161, 98, 7, 0.15) 0%, rgba(161, 98, 7, 0.2) 100%);
}

.flaw-category h3 {
    color: var(--flaw-dark);
}

.flaw-category i {
    color: var(--flaw-color);
}

.custom-category {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
    border-bottom: 2px solid var(--primary);
}

.custom-category:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.1) 100%);
}

.custom-category h3 {
    color: var(--primary-dark);
}

.custom-category i {
    color: var(--primary);
}

.expand-icon {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    transition: var(--transition-base);
    position: absolute;
    right: var(--spacing-md);
}

.category-header.expanded .expand-icon {
    transform: rotate(180deg);
}

.category-content {
    background: var(--white);
    padding: var(--spacing-md);
}

.options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-lg);
    align-items: start;
    grid-auto-rows: min-content;
}

.option-item {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-self: start;
    height: fit-content;
}

.option-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.option-item:hover::before {
    opacity: 1;
}

.option-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--primary);
}

.option-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
    gap: var(--spacing-sm);
}

.option-name {
    font-weight: 700;
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.025em;
    flex: 1;
}

.option-meta {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    flex-shrink: 0;
}

.option-badge {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.option-attributes {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid rgba(59, 130, 246, 0.2);
    display: inline-block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    align-self: flex-start;
}

.option-description {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
    background: var(--gray-50);
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary);
    font-style: italic;
    flex-shrink: 0;
}

.option-details {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-md);
    border-left: 4px solid var(--primary);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.option-details h6 {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--primary);
    padding-bottom: var(--spacing-xs);
    display: inline-block;
}

.option-details p {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.option-details p:last-child {
    margin-bottom: 0;
}

.option-details strong {
    color: var(--primary);
    font-weight: 600;
}

/* Alternate Form Switch Section */
.alternate-form-switch {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
    border: 2px solid var(--primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin: var(--spacing-md) 0;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.switch-container h5 {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--primary);
    font-size: var(--font-size-lg);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.switch-container h5 i {
    color: var(--secondary);
}

.switch-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.switch-button {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.switch-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
}

.switch-button:active {
    transform: translateY(0);
}

.switch-button.primary-form {
    background: linear-gradient(135deg, var(--success) 0%, var(--primary) 100%);
}

.switch-button.alternate-form {
    background: linear-gradient(135deg, var(--warning) 0%, var(--secondary) 100%);
}

/* Companion Switch Section */
.companion-switch {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
    border: 2px solid var(--info);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin: var(--spacing-md) 0;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.15);
}

.companion-switch .switch-container h5 {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--info);
    font-size: var(--font-size-lg);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.companion-switch .switch-container h5 i {
    color: var(--info);
}

.switch-button.companion {
    background: linear-gradient(135deg, var(--info) 0%, var(--primary) 100%);
}

.switch-button.parent {
    background: linear-gradient(135deg, var(--success) 0%, var(--info) 100%);
}

/* Switch sections visibility is controlled by JavaScript based on character data */

/* HTML content styling for feats */
.feat-html-content {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.feat-html-content ul {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
}

.feat-html-content li {
    margin-bottom: var(--spacing-xs);
    line-height: 1.4;
}

.feat-html-content b {
    font-weight: 600;
    color: var(--text-primary);
}

.feat-html-content br {
    margin-bottom: var(--spacing-xs);
}

/* Requirement logic indicators */
.requirement-logic {
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    font-size: var(--font-size-xs);
    margin: 0 2px;
}

.and-logic {
    background: rgba(239, 68, 68, 0.1);
    color: var(--bane-color);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.or-logic {
    background: rgba(16, 185, 129, 0.1);
    color: var(--boon-color);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Section-specific styling */
/* Boon items (Green) */
.boon-item::before {
    background: linear-gradient(90deg, var(--boon-color), var(--boon-dark));
}

.boon-item:hover {
    border-color: var(--boon-color);
}

.boon-item .option-badge {
    background: linear-gradient(135deg, var(--boon-color) 0%, var(--boon-dark) 100%);
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.boon-item .option-attributes {
    background: linear-gradient(135deg, var(--boon-light) 0%, rgba(16, 185, 129, 0.1) 100%);
    border: 1px solid var(--boon-color);
}

.boon-item .option-description {
    border-left: 3px solid var(--boon-color);
}

.boon-item .option-details {
    border-left: 4px solid var(--boon-color);
}

.boon-item .option-details h6 {
    border-bottom: 2px solid var(--boon-color);
}

.boon-item .option-details strong {
    color: var(--boon-color);
}

.boon-item.expanded {
    border-color: var(--boon-color) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

/* Bane items (Red) */
.bane-item::before {
    background: linear-gradient(90deg, var(--bane-color), var(--bane-dark));
}

.bane-item:hover {
    border-color: var(--bane-color);
}

.bane-item .option-badge {
    background: linear-gradient(135deg, var(--bane-color) 0%, var(--bane-dark) 100%);
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

.bane-item .option-attributes {
    background: linear-gradient(135deg, var(--bane-light) 0%, rgba(239, 68, 68, 0.1) 100%);
    border: 1px solid var(--bane-color);
}

.bane-item .option-description {
    border-left: 3px solid var(--bane-color);
}

.bane-item .option-details {
    border-left: 4px solid var(--bane-color);
}

.bane-item .option-details h6 {
    border-bottom: 2px solid var(--bane-color);
}

.bane-item .option-details strong {
    color: var(--bane-color);
}

.bane-item.expanded {
    border-color: var(--bane-color) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

/* Feat items (Orange/Yellow) */
.feat-item::before {
    background: linear-gradient(90deg, var(--feat-color), var(--feat-dark));
}

.feat-item:hover {
    border-color: var(--feat-color);
}

.feat-item .option-badge {
    background: linear-gradient(135deg, var(--feat-color) 0%, var(--feat-dark) 100%);
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

.feat-item .option-attributes {
    background: linear-gradient(135deg, var(--feat-light) 0%, rgba(245, 158, 11, 0.1) 100%);
    border: 1px solid var(--feat-color);
}

.feat-item .option-description {
    border-left: 3px solid var(--feat-color);
}

.feat-item .option-details {
    border-left: 4px solid var(--feat-color);
}

.feat-item .option-details h6 {
    border-bottom: 2px solid var(--feat-color);
}

.feat-item .option-details strong {
    color: var(--feat-color);
}

.feat-item.expanded {
    border-color: var(--feat-color) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

/* Perk items (Violet) */
.perk-item::before {
    background: linear-gradient(90deg, var(--perk-color), var(--perk-dark));
}

.perk-item:hover {
    border-color: var(--perk-color);
}

.perk-item .option-badge {
    background: linear-gradient(135deg, var(--perk-color) 0%, var(--perk-dark) 100%);
    box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3);
}

.perk-item .option-attributes {
    background: linear-gradient(135deg, var(--perk-light) 0%, rgba(139, 92, 246, 0.1) 100%);
    border: 1px solid var(--perk-color);
}

.perk-item .option-description {
    border-left: 3px solid var(--perk-color);
}

.perk-item .option-details {
    border-left: 4px solid var(--perk-color);
}

.perk-item .option-details h6 {
    border-bottom: 2px solid var(--perk-color);
}

.perk-item .option-details strong {
    color: var(--perk-color);
}

.perk-item.expanded {
    border-color: var(--perk-color) !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
}

/* Flaw items (Brown) */
.flaw-item::before {
    background: linear-gradient(90deg, var(--flaw-color), var(--flaw-dark));
}

.flaw-item:hover {
    border-color: var(--flaw-color);
}

.flaw-item .option-badge {
    background: linear-gradient(135deg, var(--flaw-color) 0%, var(--flaw-dark) 100%);
    box-shadow: 0 2px 4px rgba(161, 98, 7, 0.3);
}

.flaw-item .option-attributes {
    background: linear-gradient(135deg, var(--flaw-light) 0%, rgba(161, 98, 7, 0.1) 100%);
    border: 1px solid var(--flaw-color);
}

.flaw-item .option-description {
    border-left: 3px solid var(--flaw-color);
}

.flaw-item .option-details {
    border-left: 4px solid var(--flaw-color);
}

.flaw-item .option-details h6 {
    border-bottom: 2px solid var(--flaw-color);
}

.flaw-item .option-details strong {
    color: var(--flaw-color);
}

.flaw-item.expanded {
    border-color: var(--flaw-color) !important;
    box-shadow: 0 4px 12px rgba(161, 98, 7, 0.15);
}

/* Expanded state styling */
.option-item.expanded {
    border-color: var(--primary) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.option-item.expanded::before {
    opacity: 1 !important;
}

/* Ensure option-details can be toggled */
.option-details {
    transition: all 0.3s ease;
}

.option-details[style*="display: none"] {
    display: none !important;
}

.option-details[style*="display: block"] {
    display: block !important;
}

/* Power levels details within expandable sections */
.power-levels-details {
    margin-top: var(--spacing-sm);
}

/* Defense targets details within expandable sections */
.defense-targets-details {
    margin-top: var(--spacing-sm);
}

.defense-target-item {
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--white);
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-light);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.defense-target-item:last-child {
    margin-bottom: 0;
}

.defense-target-item strong {
    color: var(--info);
    font-weight: 600;
}

.power-level-item {
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--white);
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-light);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.power-level-item:last-child {
    margin-bottom: 0;
}

.power-level-item strong {
    color: var(--primary);
    font-weight: 600;
}

.page-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.page-header h2 {
    font-size: var(--font-size-2xl);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
}

.page-header p {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}

.character-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-md);
}

.character-card {
    background: rgba(255, 255, 255, 0.95);
    /* Remove backdrop-filter that can cause mobile issues */
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(59, 130, 246, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.character-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--secondary), var(--success));
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.character-card:hover::before {
    opacity: 1;
}

.character-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(59, 130, 246, 0.03);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.character-card:hover::after {
    opacity: 1;
}



.character-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--shadow-xl);
    border-color: rgba(59, 130, 246, 0.3);
}

.character-card h3 {
    font-size: var(--font-size-2xl);
    color: var(--gray-900);
    margin-bottom: var(--spacing-sm);
    font-weight: 800;
    text-align: center;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.character-overview-archetype {
    font-size: var(--font-size-sm);
    color: var(--primary);
    margin-bottom: var(--spacing-md);
    font-weight: 600;
    font-style: italic;
    text-align: center;
    opacity: 0.9;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(59, 130, 246, 0.1);
    border-radius: var(--radius-full);
    border: 1px solid rgba(59, 130, 246, 0.2);
    display: inline-block;
    align-self: center;
}

.character-overview-alternate {
    color: var(--warning);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-top: var(--spacing-xs);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.2) 100%);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    border: 1px solid var(--warning);
    display: inline-block;
    text-align: center;
}

.character-meta {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
    justify-content: center;
}

.character-meta span {
    background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-50) 100%);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid var(--gray-200);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.character-meta span:hover {
    background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-100) 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Character Card Actions */
.character-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-top: auto;
}

.character-actions .btn {
    flex: 1;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.character-actions .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.character-actions .btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border: 1px solid var(--primary-dark);
}

.character-actions .btn-secondary {
    background: linear-gradient(135deg, var(--gray-500) 0%, var(--gray-600) 100%);
    color: var(--white);
    border: 1px solid var(--gray-600);
}

.character-actions .btn-secondary:hover {
    background: linear-gradient(135deg, var(--gray-600) 0%, var(--gray-700) 100%);
    border-color: var(--gray-700);
}

.character-actions .btn-danger {
    background: linear-gradient(135deg, var(--danger) 0%, #d71010 100%);
    color: var(--white);
    border: 1px solid #d71010;
}

.character-actions .btn-danger:hover {
    background: linear-gradient(135deg, #d71010 0%, #b91c1c 100%);
    border-color: #b91c1c;
}

.empty-state {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-lg);
    color: var(--text-secondary);
}

.empty-state i {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-md);
    color: var(--gray-300);
}

.empty-state h3 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.empty-state p {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-lg);
}

/* Character Sheet Page */
.character-sheet-page {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    position: relative;
}

.character-sheet-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--success), var(--warning), var(--danger), var(--secondary));
}

.character-header {
    background: var(--primary);
    color: var(--white);
    padding: var(--spacing-lg) var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    position: relative;
}

.character-title h2 {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    margin: 0;
    line-height: 1.3;
}

.character-meta {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.level-display, .exp-display {
    background: rgba(255, 255, 255, 0.2);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

.character-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Content Sections - Unified styling for all tabs */
.character-content {
    padding: var(--spacing-lg);
    background: transparent;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-top: none;
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 1;
    margin-top: 0;
    padding-top: var(--spacing-lg);
}

/* Edit mode: More compact layout for consistency with view mode */
.character-content:not(.view-mode) {
    padding: var(--spacing-sm);
    gap: var(--spacing-xs);
}

.character-content:not(.view-mode) .content-section {
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.content-section {
    margin-bottom: var(--spacing-lg);
    margin-top: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

.content-section:first-child {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Ensure active content sections are properly connected */
.content-section.active {
    border-top: 1px solid rgba(255, 255, 255, 0.4);
}

.content-section.active:first-child {
    border-top: none;
}

.content-section:last-child {
    margin-bottom: 0;
}

/* Consistent left border for all sections */
.content-section::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.section-header {
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.95) 0%, rgba(241, 245, 249, 0.95) 100%);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    position: relative;
    margin: 0;
}

/* Ensure first section header connects properly to navigation */
.content-section:first-child .section-header {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Ensure all section headers maintain visual connection */
.character-content .content-section .section-header {
    border-top: none;
    margin-top: 0;
    padding-top: var(--spacing-md);
}

.section-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 50%, var(--info) 100%);
    opacity: 0.8;
}

.section-header h3 {
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: 0;
    line-height: 1.3;
}

.section-header h3 i {
    color: var(--primary);
    font-size: var(--font-size-base);
}

/* Collapsible Section Styles */
.collapsible-header {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.collapsible-header:hover {
    background: linear-gradient(135deg, rgba(241, 245, 249, 0.95) 0%, rgba(226, 232, 240, 0.95) 100%);
}

.collapse-icon {
    color: var(--primary);
    font-size: var(--font-size-base);
    transition: transform 0.3s ease;
}

.collapse-icon.collapsed {
    transform: rotate(-90deg);
}

.collapsible-content {
    max-height: 5000px;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    opacity: 1;
}

.collapsible-content.collapsed {
    max-height: 0;
    opacity: 0;
}

.section-content {
    padding: var(--spacing-lg);
}

/* Ensure all content sections have consistent internal spacing */
.content-section > *:not(.section-header):first-child {
    margin-top: 0;
}

.content-section > *:not(.section-header) {
    margin-left: var(--spacing-lg);
    margin-right: var(--spacing-lg);
}

.content-section > *:last-child {
    margin-bottom: var(--spacing-lg);
}

/* Remove any gaps between navigation and content */
.character-navigation + .character-content {
    margin-top: 0;
}

/* Ensure no visual gaps between navigation and content sections */
.character-content {
    margin-top: 0;
    padding-top: 0;
}

.character-content > .content-section:first-child {
    margin-top: 0;
    padding-top: 0;
}

/* Force all content sections to be properly connected */
.character-content .content-section {
    margin-top: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
}

.character-content .content-section:first-child {
    border-top: none;
    margin-top: 0;
}

/* Ensure all sections have consistent visual connection */
.character-content .content-section {
    position: relative;
    z-index: 1;
}

/* Override any conflicting styles and ensure visual connection */
.character-content .content-section,
.character-content #statsSection,
.character-content #combatSection,
.character-content #equipmentSection,
.character-content #featsSection,
.character-content #characterSection,
.character-content #baseActionsSection {
    margin-top: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.4) !important;
    
}

.character-content .content-section:first-child,
.character-content #statsSection {
    border-top: none !important;
    margin-top: 0 !important;
}

/* Unified Component System */

.content-section-header {
    background: var(--gray-50);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.content-section-title {
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin: 0;
    line-height: 1.3;
}

.content-section-body {
    padding: var(--spacing-lg);
}

/* Typography System */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-white { color: var(--white); }

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* Spacing Utilities */
.m-0 { margin: 0; }
.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.p-0 { padding: 0; }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

/* Layout Utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }

.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }

/* Border Utilities */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadow Utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* Transition Utilities */
.transition { transition: var(--transition-base); }
.transition-fast { transition: var(--transition-fast); }

/* Interactive States */
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.hover-scale:hover {
    transform: scale(1.02);
}

/* Unified Form Styles - Enhanced */

/* Comprehensive Form Element Styling */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    line-height: 1.4;
    background: var(--white);
    color: var(--text-primary);
    transition: all var(--transition-base);
    min-height: 40px;
    box-sizing: border-box;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    transform: translateY(-1px);
}

input[type="text"]:hover,
input[type="number"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
textarea:hover,
select:hover {
    border-color: var(--border-medium);
    transform: translateY(-1px);
}

/* Specific input type styling */
input[type="number"] {
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--primary);
    transform: scale(1.1);
    transition: var(--transition-base);
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
    transform: scale(1.2);
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Textarea specific styling */
textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

textarea:focus {
    min-height: 80px;
}

/* Select specific styling */
select {
    cursor: pointer;
    /* Remove custom arrow styling to prevent overlap issues */
    padding-right: var(--spacing-md);
}

/* File input styling */
input[type="file"] {
    padding: var(--spacing-md);
    border: 2px dashed var(--border-light);
    border-radius: var(--radius-md);
    background: var(--gray-50);
    cursor: pointer;
    transition: var(--transition-base);
}

input[type="file"]:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--white);
}

input[type="file"]:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--white);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Range input styling */
input[type="range"] {
    width: 100%;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--gray-200);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
}

input[type="range"]::-webkit-slider-thumb:hover {
    background: var(--primary-dark);
    transform: scale(1.1);
    box-shadow: var(--shadow-md);
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    border: none;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
}

input[type="range"]::-moz-range-thumb:hover {
    background: var(--primary-dark);
    transform: scale(1.1);
    box-shadow: var(--shadow-md);
}

/* Special button styles for specific elements */
.attr-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--gray-50);
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0;
}

.attr-btn:hover {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.attr-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Calculate buttons styling - Combat tab */
#testGuardBtn,
#testToughnessBtn,
#testResolveBtn {
    background: linear-gradient(135deg, var(--info) 0%, #0891b2 100%);
    color: var(--white);
    border: 2px solid #0891b2;
    box-shadow: 0 2px 4px rgba(6, 182, 212, 0.3);
    font-weight: 600;
    transition: var(--transition-base);
    min-height: 36px;
    padding: var(--spacing-sm) var(--spacing-md);
}

#testGuardBtn:hover,
#testToughnessBtn:hover,
#testResolveBtn:hover {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    border-color: #0e7490;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(6, 182, 212, 0.4);
}

#testGuardBtn:active,
#testToughnessBtn:active,
#testResolveBtn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(6, 182, 212, 0.3);
}

/* Add buttons styling - Effects tabs */
#addAdvantageBtn,
#addDisadvantageBtn,
#addBoonBtn,
#addBaneBtn,
#addPerkBtn,
#addFlawBtn {
    background: linear-gradient(135deg, var(--success) 0%, #34d399 100%);
    color: var(--white);
    border: 2px solid #34d399;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
    font-weight: 600;
    transition: var(--transition-base);
    min-height: 36px;
    padding: var(--spacing-sm) var(--spacing-md);
}

#addAdvantageBtn:hover,
#addDisadvantageBtn:hover,
#addBoonBtn:hover,
#addBaneBtn:hover,
#addPerkBtn:hover,
#addFlawBtn:hover {
    background: linear-gradient(135deg, #34d399 0%, var(--success) 100%);
    border-color: #34d399;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4);
}

#addAdvantageBtn:active,
#addDisadvantageBtn:active,
#addBoonBtn:active,
#addBaneBtn:active,
#addPerkBtn:active,
#addFlawBtn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

/* Add Feat button styling */
#addFeatBtn {
    background: linear-gradient(135deg, var(--warning) 0%, #fbbf24 100%);
    color: var(--white);
    border: 2px solid #fbbf24;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
    font-weight: 600;
    transition: var(--transition-base);
    min-height: 36px;
    padding: var(--spacing-sm) var(--spacing-md);
}

#addFeatBtn:hover {
    background: linear-gradient(135deg, #fbbf24 0%, var(--warning) 100%);
    border-color: #fbbf24;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.4);
}

#addFeatBtn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

/* Unified form input styling - Consolidated */
.equipment-effects-edit,
.equipment-armor-edit,
.equipment-requirement-edit,
.equipment-item-attribute-edit,
.equipment-item-power-level-edit,
.weapon-category-section select,
.weapon-range-section select,
.weapon-wealth-section input,
.item-attribute-section select,
.item-power-level-section select,
.armor-specific-fields input {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    background: var(--white);
    transition: var(--transition-base);
    font-family: inherit;
    min-height: 36px;
}

/* Specific width overrides */
.equipment-effects-edit,
.equipment-armor-edit,
.equipment-requirement-edit,
.equipment-item-attribute-edit,
.equipment-item-power-level-edit {
    width: 100%;
}

.armor-specific-fields input {
    flex: 1;
    text-align: center;
    min-width: 0;
    width: 25%;
}

.item-attribute-section select,
.item-power-level-section select {
    max-width: 200px;
}

/* Focus states - Consolidated */
.equipment-effects-edit:focus,
.equipment-armor-edit:focus,
.equipment-requirement-edit:focus,
.equipment-item-attribute-edit:focus,
.equipment-item-power-level-edit:focus,
.weapon-category-section select:focus,
.weapon-range-section select:focus,
.weapon-wealth-section input:focus,
.item-attribute-section select:focus,
.item-power-level-section select:focus,
.armor-specific-fields input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 246, 130, 0.15);
    transform: translateY(-1px);
}

.equipment-speed-reduction-edit {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--primary);
    transform: scale(1.1);
}

/* Weapon form styling - Consolidated above */

/* Item form styling - Consolidated above */

/* Armor form styling - Consolidated above */

/* Speed reduction checkbox styling */
.speed-reduction-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    transition: var(--transition-base);
    flex-shrink: 0;
    white-space: nowrap;
    width: 25%;
}

.speed-reduction-checkbox:hover {
    background: var(--gray-100);
    border-color: var(--border-medium);
}

.speed-reduction-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary);
    margin: 0;
}

/* Add equipment form styling */
.add-equipment input,
.add-equipment select {
    padding: var(--spacing-md);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    background: var(--white);
    transition: var(--transition-base);
    min-height: 40px;
}

.add-equipment input:focus,
.add-equipment select:focus {
    border-color: var(--primary);
    background: var(--white);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    transform: translateY(-1px);
}

.add-equipment textarea {
    grid-column: 1 / -1;
    height: 80px;
    resize: vertical;
    min-height: 80px;
    padding: var(--spacing-md);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    background: var(--white);
    transition: var(--transition-base);
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    font-family: inherit;
}

.add-equipment textarea:focus {
    border-color: var(--primary);
    background: var(--white);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    transform: translateY(-1px);
}

/* Feat form styling */
.feat-selection select,
.feat-tier-selection select {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    background: var(--white);
    cursor: pointer;
    min-height: 36px;
    transition: var(--transition-base);
}

.feat-selection select:focus,
.feat-tier-selection select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    transform: translateY(-1px);
}

.feat-tier-selection select:disabled {
    background-color: var(--gray-100);
    color: var(--text-secondary);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Perk and flaw form styling */
.perk-input, .flaw-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-sm);
    background: var(--white);
    transition: var(--transition-base);
    min-height: 36px;
}

.perk-input:focus, .flaw-input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    transform: translateY(-1px);
}

/* Import/Export form styling */
#importData {
    width: 100%;
    height: 150px;
    padding: var(--spacing-md);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    font-family: monospace;
    margin-bottom: var(--spacing-lg);
    resize: vertical;
    background: var(--gray-50);
    transition: var(--transition-base);
    min-height: 150px;
}

#importData:focus {
    border-color: var(--primary);
    background: var(--white);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    transform: translateY(-1px);
}

/* Movement input styling */
.movement-input {
    width: 60px;
    padding: var(--spacing-sm);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-sm);
    text-align: center;
    font-weight: 600;
    background: var(--white);
    transition: var(--transition-base);
    min-height: 36px;
}

.movement-input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    transform: translateY(-1px);
}

/* Attack test input styling */
.attack-test input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-sm);
    text-align: center;
    font-weight: 600;
    background: var(--white);
    transition: var(--transition-base);
    min-height: 36px;
}

.attack-test input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    transform: translateY(-1px);
}

/* Wealth input styling */
.wealth-input {
    width: 80px;
    text-align: center;
    font-weight: 600;
    padding: var(--spacing-sm);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--white);
    transition: var(--transition-base);
    min-height: 36px;
}

.wealth-input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    transform: translateY(-1px);
}

/* Power level input styling */
.power-level-input {
    width: 80px;
    text-align: center;
    font-weight: 600;
    padding: var(--spacing-sm);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--white);
    transition: var(--transition-base);
    min-height: 36px;
}

.power-level-input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    transform: translateY(-1px);
}

/* Touch-friendly input styles for mobile */
.touch-friendly-input {
    font-size: var(--font-size-base);
    padding: var(--spacing-md);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-sm);
    width: 100%;
    text-align: center;
    transition: var(--transition-base);
    background: var(--white);
    min-height: 44px;
}

.touch-friendly-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    transform: translateY(-1px);
}

.touch-friendly-input:hover {
    border-color: var(--border-medium);
    transform: translateY(-1px);
}

/* Form validation states */
.form-group input.error,
.form-group textarea.error,
.form-group select.error {
    border-color: var(--danger);
    background: #fef2f2;
}

.form-group input.error:focus,
.form-group textarea.error:focus,
.form-group select.error:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.form-group input.success,
.form-group textarea.success,
.form-group select.success {
    border-color: var(--success);
    background: #f0fdf4;
}

.form-group input.success:focus,
.form-group textarea.success:focus,
.form-group select.success:focus {
    border-color: var(--success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

/* Form group spacing and layout */
.form-group + .form-group {
    margin-top: var(--spacing-md);
}

.form-row + .form-row {
    margin-top: var(--spacing-lg);
}

/* Responsive form adjustments */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .form-group {
        min-width: auto;
    }
    
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    textarea,
    select {
        font-size: 1rem; /* Prevent zoom on mobile */
        min-height: 44px; /* Better touch targets */
    }
    
    .btn {
        min-height: 44px;
    }
    
    .attr-btn {
        min-height: 32px;
        width: 32px;
        height: 32px;
    }
}

/* Form element animations - Consolidated */
@keyframes formElementFocus {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.3);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.1);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    animation: formElementFocus 0.3s ease-out;
}

/* Placeholder styling - Consolidated */
::placeholder,
::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
    color: var(--text-muted);
    opacity: 0.7;
    font-style: italic;
}

/* Focus visible for accessibility */
.form-group input:focus-visible,
.form-group textarea:focus-visible,
.form-group select:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .form-group input,
    .form-group textarea,
    .form-group select,
    .btn {
        border-width: 2px;
        border-color: var(--text-primary);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .form-group input,
    .form-group textarea,
    .form-group select,
    .btn {
        transition: none;
        animation: none;
    }
    
    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus,
    .btn:hover {
        transform: none;
    }
}

/* Attributes Table */
.attributes-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2px;
}

.attributes-table .attribute-row {
    border-bottom: 1px solid #e8e8e8;
}

.attributes-table .attribute-row:last-child {
    border-bottom: none;
}

.attributes-table td {
    padding: 4px 6px;
    vertical-align: middle;
    height: 28px;
    border-bottom: 1px solid var(--border-light);
}

.attributes-table .attribute-name {
    font-weight: 600;
    color: var(--text-primary);
    width: 40%;
    font-size: var(--font-size-sm);
    text-align: left;
    padding: 4px 6px;
    vertical-align: middle;
    line-height: 1.2;
}

.attributes-table .attribute-controls {
    width: 30%;
    text-align: center;
    padding: 4px 6px;
    vertical-align: middle;
}

.attributes-table .attribute-info {
    width: 30%;
    padding: 4px 6px;
    vertical-align: middle;
    text-align: center;
}

.attributes-table .attribute-info .attribute-cost,
.attributes-table .attribute-info .attribute-dice,
.attributes-table .attribute-info .attribute-max {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin: 1px 0;
    line-height: 1.2;
}

/* Attributes Grid (fallback) */
.attributes-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    justify-content: flex-start;
    align-items: flex-start;
}

.attribute-category {
    margin-bottom: 8px;
}

.attribute-category h4 {
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 600;
    margin-bottom: 4px;
    padding: 4px 8px;
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.attribute-category .attributes-grid {
    margin-left: 0;
    padding-left: 0;
}

.attribute-category h4 i {
    color: var(--primary);
    font-size: var(--font-size-sm);
}

.attribute-card {
    padding: var(--spacing-md);
    text-align: center;
    width: 120px;
    flex: 0 0 120px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--shadow-xs);
}

.attribute-card:nth-child(3n+1) {
    border-left: 3px solid var(--primary);
}

.attribute-card:nth-child(3n+2) {
    border-left: 3px solid var(--success);
}

.attribute-card:nth-child(3n+3) {
    border-left: 3px solid var(--warning);
}

.attribute-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary);
}

.attribute-card label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.attribute-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin: 0 auto;
    height: 100%;
}

.attr-btn {
    width: 24px;
    height: 24px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--gray-50);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.attr-btn:hover {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    transform: translateY(-1px);
}

.attr-btn:active {
    transform: translateY(0);
}

.attribute-value {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    display: inline-block;
    line-height: 1;
    padding: 2px 6px;
    background: var(--white);
    border-radius: var(--radius-sm);
    border: 1px solid var(--primary);
}

.attribute-cost {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: 500;
    background: var(--gray-100);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    display: inline-block;
    margin-bottom: var(--spacing-xs);
}

.attribute-dice {
    color: var(--primary);
    font-size: var(--font-size-xs);
    font-weight: 600;
    background: var(--primary-light);
    color: var(--white);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    display: inline-block;
    border: 1px solid var(--primary);
    margin-top: var(--spacing-xs);
}

.attribute-max {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: 500;
    background: var(--gray-100);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    display: inline-block;
    border: 1px solid var(--border-light);
    margin-top: var(--spacing-xs);
}

.attribute-summary {
    background: linear-gradient(135deg, #f7fafc, #edf2f7);
    padding: 15px 20px;
    border-radius: 12px;
    text-align: center;
    font-weight: 600;
    color: #4a5568;
    border: 1px solid #e2e8f0;
}

/* Initiative and Movement Stats */
.initiative-movement-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

.initiative-group, .movement-group, .legend-points-group {
    background: white;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.initiative-group:hover, .movement-group:hover, .legend-points-group:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.initiative-group h4, .movement-group h4, .legend-points-group h4 {
    color: #2d3748;
    margin-bottom: 20px;
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
}

.initiative-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.initiative-label {
    font-size: 0.9rem;
    color: #718096;
    font-weight: 500;
}

.initiative-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: #667eea;
}

.initiative-dice {
    font-size: 1.1rem;
    color: #718096;
    font-weight: 600;
    background: #f7fafc;
    padding: 8px 16px;
    border-radius: var(--radius-lg);
    border: 1px solid #e2e8f0;
}

.initiative-advantage {
    text-align: center;
}

.initiative-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #4a5568;
    cursor: pointer;
}

.initiative-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.movement-stats {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.movement-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #f7fafc;
    border-radius: var(--radius-lg);
    border: 1px solid #e2e8f0;
}

.movement-stat label {
    font-weight: 600;
    color: #4a5568;
    font-size: 0.9rem;
}

.movement-input {
    width: 60px;
    padding: 8px;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-md);
    text-align: center;
    font-weight: 600;
}

.movement-input:focus {
    border-color: #667eea;
    outline: none;
}

.movement-value {
    font-weight: 700;
    color: #667eea;
    text-align: center;
}

.movement-unit {
    color: #718096;
    font-size: 0.9rem;
}

.legend-points-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.legend-points-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: #667eea;
    text-align: center;
}

.legend-points-max {
    color: #718096;
    font-size: 1.1rem;
    font-weight: 600;
}

/* Defense Stats */
.defense-grid {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    width: 100%;
}

.defense-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

/* Add subtle background pattern to defense cards */
.defense-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.defense-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.defense-card h4 {
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.defense-value {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: var(--spacing-sm);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    border: 2px solid var(--primary);
    box-shadow: var(--shadow-sm);
    text-align: center;
    position: relative;
    overflow: hidden;
    display: inline-block;
}

/* Add a subtle inner glow effect */
.defense-value::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
    border-radius: inherit;
    pointer-events: none;
}

/* Add a subtle top highlight */
.defense-value::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 50%, var(--info) 100%);
    opacity: 0.8;
}

/* Subtle hover effect to show they're display elements, not buttons */
.defense-value:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-dark);
}

/* Ensure the text is always visible above the pseudo-elements */
.defense-value > * {
    position: relative;
    z-index: 1;
}

.defense-breakdown {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8rem;
    color: #718096;
    margin-bottom: var(--spacing-sm);
}

.defense-breakdown span {
    padding: 2px var(--spacing-xs);
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-200);
    font-size: 0.75rem;
}

.attack-test {
    background: var(--gray-50);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
    margin-top: var(--spacing-md);
}

.attack-test label {
    display: block;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.attack-test input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-sm);
    text-align: center;
    font-weight: 600;
}

.attack-test input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* HP Section */
.hp-section {
    margin-top: var(--spacing-lg);
}

.hp-section h4 {
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.hp-display {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.hp-info {
    background: rgba(255, 255, 255, 0.95);
    /* Remove backdrop-filter that can cause mobile issues */
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    text-align: center;
    flex: 1;
    border: 1px solid rgba(239, 68, 68, 0.2);
    position: relative;
    overflow: hidden;
}

.hp-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--danger);
}

.hp-label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

.hp-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--danger);
}

.hp-controls {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.damage-healing-row {
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.damage-controls, .lethal-controls {
    flex: 1;
    background: rgba(248, 250, 252, 0.95);
    /* Remove backdrop-filter that can cause mobile issues */
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.damage-controls::before, .lethal-controls::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--warning);
}

.damage-controls:hover, .lethal-controls:hover {
    background: var(--white);
    border-color: var(--border-medium);
    box-shadow: var(--shadow-sm);
}

.damage-controls label, .lethal-controls label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    text-align: center;
}

/* Damage input group styles */
.damage-input-group {
    margin-bottom: 2px;
    text-align: center;
}

.damage-input-group .touch-friendly-input {
    padding: 4px 8px;
    font-size: var(--font-size-sm);
    min-height: 28px;
    max-width: 80px;
    margin: 0 auto;
}

.damage-input-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}



.healing-controls {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.reset-controls {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    padding: var(--spacing-md);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}


/* Equipment Section */
.wealth-display {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}


.wealth-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #718096;
}

.wealth-checkbox input[type="checkbox"] {
    transform: scale(1.2);
}

.weapon-specific-fields {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--white);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}

.weapon-category-section,
.weapon-range-section,
.weapon-wealth-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.weapon-properties-section,
.weapon-banes-section {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.weapon-category-section select,
.weapon-range-section select,
.weapon-wealth-section input {
    padding: 8px 12px;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    transition: border-color 0.2s ease;
}

.weapon-category-section select:focus,
.weapon-range-section select:focus,
.weapon-wealth-section input:focus {
    border-color: #667eea;
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.weapon-range-section select,
.weapon-wealth-section input {
    padding: 8px 12px;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    transition: border-color 0.2s ease;
}

.weapon-range-section select:focus,
.weapon-wealth-section input:focus {
    border-color: #667eea;
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.weapon-properties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}

.weapon-property {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 4px 8px;
    background: #f1f5f9;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.weapon-property:hover {
    background: #e2e8f0;
}

.weapon-property input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: #667eea;
}

.property-specific-inputs {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--gray-100);
    border-radius: var(--radius-sm);
}

.property-input {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.property-input input {
    padding: 6px 10px;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    font-size: var(--font-size-sm);
}

.property-input input:focus {
    border-color: #667eea;
    outline: none;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.bane-selection {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}

.bane-selection select {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    transition: border-color 0.2s ease;
}

.bane-selection select:focus {
    border-color: #667eea;
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Item-specific fields styling */
.item-specific-fields {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--white);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}

/* Ensure item fields are visible when equipment type is 'item' */
.item-specific-fields[style*="display: block"] {
    display: grid !important;
}

.item-attribute-section,
.item-power-level-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.item-attribute-section label,
.item-power-level-section label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-xs);
}

.item-attribute-section select,
.item-power-level-section select {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    background: var(--white);
    transition: var(--transition-base);
    max-width: 200px;
}

.item-attribute-section select:focus,
.item-power-level-section select:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

.armor-specific-fields {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--white);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    align-items: center;
}

.armor-specific-fields input {
    flex: 1;
    padding: 10px;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-md);
    text-align: center;
    font-size: var(--font-size-base);
    transition: border-color 0.2s ease;
    min-width: 0;
    width: 25%;
}

.armor-specific-fields input:focus {
    border-color: #667eea;
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.speed-reduction-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #4a5568;
    cursor: pointer;
    padding: 8px 12px;
    background: #f7fafc;
    border-radius: var(--radius-md);
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
    width: 25%;
}

.speed-reduction-checkbox:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
}

.speed-reduction-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #667eea;
}

.equipment-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.equipment-inventory, .equipped-items {
    background: var(--white);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
}

.equipment-inventory h4, .equipped-items h4 {
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-xl);
    font-weight: 700;
}

.add-equipment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    max-width: 100%;
}

.add-equipment input,
.add-equipment select {
    padding: var(--spacing-md);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    background: var(--white);
    transition: var(--transition-base);
}

.add-equipment input:focus,
.add-equipment select:focus {
    border-color: var(--primary);
    background: var(--white);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

.add-equipment textarea {
    grid-column: 1 / -1;
    height: 80px;
    resize: vertical;
    min-height: 80px;
    padding: var(--spacing-md);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    background: var(--white);
    transition: var(--transition-base);
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

.add-equipment textarea:focus {
    border-color: var(--primary);
    background: var(--white);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

/* Add Equipment button styling - Unified with other buttons */
.add-equipment #addEquipmentBtn {
    grid-column: 1 / -1;
    justify-self: start;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-base);
    font-weight: 600;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--white);
    border: 2px solid var(--primary-dark);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    transition: all var(--transition-base);
    min-height: 48px;
    text-transform: none;
    letter-spacing: normal;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Add Equipment Section Styles */
.add-equipment-section {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%);
    border: 2px solid var(--border-medium);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* Item-specific fields layout optimization */
.item-specific-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    align-items: start;
}

.item-specific-fields .item-attribute-section,
.item-specific-fields .item-power-level-section,
.item-specific-fields .item-wealth-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.item-specific-fields .universal-properties-section {
    grid-column: 1 / -1;
    margin-top: var(--spacing-sm);
}

/* Universal Properties Styles */
.universal-properties-section {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm);
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}

.universal-properties-section label {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    display: block;
}

.universal-properties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.universal-property {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.universal-property input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

.universal-property-inputs {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.universal-property-inputs .property-input {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.universal-property-inputs .property-input label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0;
}

.universal-property-inputs .property-input input,
.universal-property-inputs .property-input select {
    padding: var(--spacing-xs);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

/* Cursed bane power level styling */

.add-equipment-header {
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.add-equipment-header i {
    color: var(--primary);
    font-size: var(--font-size-xl);
}

.add-equipment-section .add-equipment {
    background: var(--white);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}

/* Wealth Level Input Styling */
.wealth-level-input {
    width: 80px !important;
    text-align: center;
}

/* Fix Speed Reduction Checkbox Size */
.speed-reduction-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: var(--spacing-sm) 0;
}

.speed-reduction-checkbox input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}

/* Ensure the checkbox is properly sized - Override all global styles */
#armorSpeedReduction {
    width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    transform: none !important;
    transform-origin: center;
    scale: 1 !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
}

/* Also override the class-based rule */
.speed-reduction-checkbox input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    transform: none !important;
    scale: 1 !important;
}

.add-equipment #addEquipmentBtn:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.add-equipment #addEquipmentBtn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.3);
}

.equipment-list {
    margin-top: var(--spacing-md);
}

.equipment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    border-left: 4px solid var(--primary);
    transition: var(--transition-base);
    min-height: 80px;
    gap: var(--spacing-lg);
}

.equipment-item.equipped {
    border-left-color: #51cf66;
    background: #f0fff4;
}

.equipment-info {
    flex: 1;
    margin-right: var(--spacing-lg);
    min-width: 0;
}

.equipment-name {
    font-weight: 600;
    color: #2d3748;
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-lg);
}

.equipment-type {
    font-size: var(--font-size-sm);
    color: #718096;
    text-transform: capitalize;
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--white);
    border-radius: var(--radius-sm);
    display: inline-block;
    border: 1px solid var(--border-light);
}

.equipment-details {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary);
}

/* View mode: Always show equipment details and hide details button */
.view-mode .equipment-details {
    display: block !important;
    background: var(--gray-50);
    border-left: 3px solid var(--primary);
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
}

.view-mode .equipment-actions .btn-secondary:first-child {
    display: none !important;
}

/* Improve view mode equipment details layout */
.view-mode .equipment-details > div {
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-xs);
    background: var(--white);
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-light);
}

.view-mode .equipment-details > div:last-child {
    margin-bottom: 0;
}

.view-mode .equipment-details label {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    display: block;
}

.view-mode .equipment-details span {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

/* Edit Mode Attribute Table Styling */
.character-content:not(.view-mode) .attributes-table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.character-content:not(.view-mode) .attributes-table .attribute-row {
    background: var(--white);
    transition: background-color var(--transition-fast);
    height: 32px;
}

.character-content:not(.view-mode) .attributes-table .attribute-row:hover {
    background: var(--gray-50);
}

.character-content:not(.view-mode) .attributes-table .attribute-row:nth-child(even) {
    background: var(--gray-50);
}

.character-content:not(.view-mode) .attributes-table .attribute-row:nth-child(even):hover {
    background: var(--gray-100);
}

.character-content:not(.view-mode) .attributes-table td {
    border-right: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.character-content:not(.view-mode) .attributes-table td:last-child {
    border-right: none;
}

.character-content:not(.view-mode) .attributes-table .attribute-row:last-child td {
    border-bottom: none;
}

/* Ensure consistent spacing for attribute elements in edit mode */
.character-content:not(.view-mode) .attributes-table .attribute-name {
    line-height: 1.2;
    white-space: nowrap;
}

.character-content:not(.view-mode) .attributes-table .attribute-name .attribute-score {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 4px;
    background: var(--primary-light);
    color: var(--white);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.character-content:not(.view-mode) .attributes-table .attribute-name .attribute-dice-inline {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 4px;
    background: var(--warning);
    color: var(--white);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.character-content:not(.view-mode) .attributes-table .attribute-cost,
.character-content:not(.view-mode) .attributes-table .attribute-dice,
.character-content:not(.view-mode) .attributes-table .attribute-max {
    font-weight: 500;
    line-height: 1.4;
}

/* Hide edit actions in view mode */
.view-mode .equipment-edit-actions {
    display: none !important;
}

/* Hide edit inputs and textareas in view mode */
.view-mode .equipment-effects-edit,
.view-mode .equipment-armor-edit,
.view-mode .equipment-requirement-edit,
.view-mode .equipment-speed-reduction-edit {
    display: none !important;
}

/* Compact equipment details styling */
.equipment-details-compact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm);
    background: var(--white);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}

.detail-tag {
    display: inline-block;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    margin: var(--spacing-xs);
}

.detail-tag:hover {
    background: var(--gray-50);
    border-color: var(--primary);
}

/* Compact weapon details styling */
.equipment-weapon-details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary);
}

.weapon-detail {
    display: inline-block;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    margin: var(--spacing-xs);
}

.weapon-detail:hover {
    background: var(--gray-50);
    border-color: var(--primary);
}

/* Responsive design for equipment details */
@media (max-width: 768px) {
    .detail-tag {
        padding: var(--spacing-xs);
        font-size: var(--font-size-xs);
        margin-bottom: var(--spacing-xs);
    }
    
    .equipment-details-compact {
        gap: var(--spacing-xs);
    }
    
    .weapon-detail {
        padding: var(--spacing-xs);
        font-size: var(--font-size-xs);
        margin-bottom: var(--spacing-xs);
    }
    
    .equipment-weapon-details {
        gap: var(--spacing-xs);
        padding: var(--spacing-xs);
    }
}

.equipment-effects {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.equipment-effects label,
.equipment-armor label,
.equipment-requirement label,
.equipment-speed-reduction label,
.equipment-weapon-category label,
.equipment-weapon-range label,
.equipment-weapon-wealth label,
.equipment-weapon-properties label,
.equipment-weapon-banes label {
    display: block;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

.equipment-effects-edit {
    width: 100%;
    min-height: 60px;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    background: white;
}

.equipment-effects-edit:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.equipment-armor-edit,
.equipment-requirement-edit {
    width: 80px;
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    text-align: center;
    background: white;
}

.equipment-armor-edit:focus,
.equipment-requirement-edit:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.equipment-speed-reduction {
    margin-top: 8px;
}

.equipment-speed-reduction input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #667eea;
    margin-right: 8px;
}

/* Weapon equipment details styling */
.equipment-weapon-category,
.equipment-weapon-range,
.equipment-weapon-wealth,
.equipment-weapon-properties,
.equipment-weapon-banes {
    margin-top: 8px;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: var(--radius-md);
    border-left: 3px solid #667eea;
}

.equipment-weapon-category span,
.equipment-weapon-range span,
.equipment-weapon-wealth span,
.equipment-weapon-properties span,
.equipment-weapon-banes span {
    font-weight: 500;
    color: #2d3748;
}

.equipment-edit-actions {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e2e8f0;
}

.equipment-armor, .equipment-requirement {
    font-size: 0.8rem;
    color: #718096;
    margin-bottom: 5px;
}

.equipment-bonus {
    background: #667eea;
    color: white;
    padding: 4px 10px;
    border-radius: 15px;
}

/* Boons and Banes Section */
.boons-banes-section {
    margin-top: 30px;
    padding: 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
}

.boons-banes-section h4 {
    margin: 0 0 20px 0;
    color: #2d3748;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
}

.boons-banes-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.boons-section,
.banes-section {
    display: flex;
    flex-direction: column;
}

.boons-section h5,
.banes-section h5 {
    margin: 0 0 15px 0;
    color: #4a5568;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.boons-section h5 i {
    color: #f6ad55;
}

.banes-section h5 i {
    color: #e53e3e;
}

.boons-list,
.banes-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.boon-item,
.bane-item {
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    padding: 8px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.boon-header,
.bane-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.boon-name,
.bane-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: #2d3748;
    margin-bottom: 2px;
    line-height: 1.2;
}

.boon-attributes,
.bane-attributes {
    font-size: 0.75rem;
    color: #718096;
    margin-bottom: 3px;
    line-height: 1.2;
}

.power-levels {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: 2px;
}

.power-level-badge {
    background: #e2e8f0;
    color: #4a5568;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.2;
}

.power-level-badge.active {
    background: #667eea;
    color: white;
}

.power-level-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 0;
    padding: 6px 0;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.power-level-nav-btn {
    background: #667eea;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.power-level-nav-btn:hover:not(:disabled) {
    background: #5a67d8;
}

.power-level-nav-btn:disabled {
    background: #cbd5e0;
    cursor: not-allowed;
}

.current-power-level {
    font-size: 0.8rem;
    font-weight: 600;
    color: #4a5568;
}

.boon-item:hover,
.bane-item:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.boon-item.expanded,
.bane-item.expanded {
    background: #ffffff;
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
    z-index: 10;
    position: relative;
}

.boon-overview,
.bane-overview {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.boon-info,
.bane-info {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    flex: 1;
}

.boon-actions,
.bane-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.expand-indicator {
    color: #667eea;
    font-size: 0.8rem;
    font-weight: bold;
    transition: transform 0.2s ease;
}

.boon-item.expanded .expand-indicator,
.bane-item.expanded .expand-indicator {
    transform: rotate(180deg);
}

/* Cursed bane indicator */
.cursed-indicator {
    color: #f59e0b;
    font-size: 1.2em;
    cursor: help;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(245, 158, 11, 0.1);
}

/* Persistent boon indicator */
.persistent-indicator {
    color: #10b981;
    font-size: 0.8rem;
    font-weight: 500;
    background: #ecfdf5;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #6ee7b7;
}

/* Persistent lock indicator for active boons */
.persistent-lock {
    color: #10b981;
    font-size: 1.2em;
    cursor: help;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(16, 185, 129, 0.1);
}

.boon-header,
.bane-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.boon-name,
.bane-name {
    font-weight: 600;
    color: #2d3748;
    font-size: 1rem;
}

.bane-attribute,
.bane-source,
.boon-attributes {
    font-size: 0.8rem;
    color: #718096;
    font-style: italic;
}

.bane-source.weapon-based {
    color: #d69e2e;
    font-weight: 500;
    background: #fef5e7;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #f6e05e;
}

.power-levels {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.power-level-badge {
    background: #667eea;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.power-level-badge.active {
    background: #48bb78;
}

.boon-details,
.bane-details {
    display: none;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e2e8f0;
}

.boon-item.expanded .boon-details,
.bane-item.expanded .bane-details {
    display: block;
}

.detail-section {
    margin-bottom: 8px;
    padding: 4px 0;
}

.detail-section h6 {
    margin: 0 0 4px 0;
    color: #4a5568;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.detail-section p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.3;
    color: #2d3748;
}

.detail-section p {
    margin: 0;
    color: #2d3748;
    font-size: 0.9rem;
    line-height: 1.5;
}

.power-level-navigation {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.power-level-nav-btn {
    background: #667eea;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.8rem;
    transition: background-color 0.2s ease;
}

.power-level-nav-btn:hover {
    background: #5a67d8;
}

.power-level-nav-btn:disabled {
    background: #cbd5e0;
    cursor: not-allowed;
}

.current-power-level {
    font-weight: 600;
    color: #667eea;
    font-size: 0.9rem;
}

.no-boons,
.no-banes {
    text-align: center;
    color: #718096;
    font-style: italic;
    padding: 20px;
    background: #f7fafc;
    border-radius: var(--radius-lg);
    border: 1px dashed #cbd5e0;
}

/* Attribute Error Popup */
.attribute-error-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.attribute-error-popup .popup-content {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    text-align: center;
}

.attribute-error-popup h3 {
    color: #e53e3e;
    margin: 0 0 20px 0;
    font-size: 1.5rem;
}

.attribute-error-popup p {
    margin: 0 0 15px 0;
    color: #2d3748;
    font-size: 1rem;
    line-height: 1.5;
}

.attribute-error-popup .btn {
    margin-top: 20px;
    padding: 12px 24px;
    font-size: 1rem;
}

.equipment-actions {
    display: flex;
    gap: var(--spacing-md);
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Responsive improvements for equipment actions */
@media (max-width: 768px) {
    .equipment-actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }
    
    .equipment-item {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
    }
    
    .equipment-info {
        margin-right: 0;
        margin-bottom: var(--spacing-md);
    }
}

/* Equipment action buttons styling */
.equipment-actions .btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.equipped-section {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.equipped-section h5 {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-base);
    font-weight: 600;
}

.equipped-item {
    padding: var(--spacing-md);
    background: var(--white);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    min-height: 50px;
    display: flex;
    align-items: center;
    font-style: italic;
    color: var(--text-muted);
}

.equipped-items-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Feats Section */
.feats-section {
    background: white;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
}

.feat-points-display {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    padding: 15px;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.feat-points-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.feat-points-label {
    font-size: var(--font-size-xs);
    color: #718096;
    margin-bottom: 5px;
    font-weight: 500;
}

.feat-points-value {
    font-size: var(--font-size-2xl);
    font-weight: bold;
    color: #007bff;
}

.add-feat {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
    padding: 20px;
    background: #f7fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.feat-selection,
.feat-tier-selection {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.feat-selection label,
.feat-tier-selection label {
    font-weight: 500;
    color: #2d3748;
    font-size: var(--font-size-base);
}

.feat-selection select,
.feat-tier-selection select {
    padding: 10px;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    background: white;
    cursor: pointer;
}

.feat-selection select:focus,
.feat-tier-selection select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.feat-tier-selection select:disabled {
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.7;
}

.feat-cost-display {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #e9ecef;
    border-radius: var(--radius-lg);
    border: 1px solid #dee2e6;
}

.feat-cost-label {
    font-weight: 500;
    color: #2d3748;
}

.feat-cost-value {
    font-size: var(--font-size-xl);
    font-weight: bold;
    color: #dc3545;
}

.add-feat button {
    padding: 12px 24px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-size: var(--font-size-lg);
    font-weight: 500;
    transition: background-color 0.2s;
}

.add-feat button:hover {
    background: #0056b3;
}

                .add-feat button:disabled {
                    background: #6c757d;
                    cursor: not-allowed;
                }
                
                .feat-preview {
                    background: #f8f9fa;
                    border: 1px solid #dee2e6;
                    border-radius: var(--radius-lg);
                    padding: 15px;
                    margin: 10px 0;
                    max-height: 200px;
                    overflow-y: auto;
                }
                
                .feat-preview h4 {
                    margin: 0 0 10px 0;
                    color: #2d3748;
                    font-size: var(--font-size-lg);
                }
                
                .feat-preview .feat-description {
                    color: #4a5568;
                    margin-bottom: 10px;
                    line-height: 1.4;
                }
                
                .feat-preview .feat-requirements {
                    background: #fff3cd;
                    border: 1px solid #ffeaa7;
                    border-radius: var(--radius-md);
                    padding: 10px;
                    margin: 10px 0;
                    color: #856404;
                }
                
                .feat-preview .feat-requirements h5 {
                    margin: 0 0 8px 0;
                    color: #856404;
                    font-size: var(--font-size-base);
                    font-weight: 600;
                }
                
                .feat-preview .feat-requirements ul {
                    margin: 0;
                    padding-left: 20px;
                    color: #856404;
                }
                
                .feat-preview .feat-requirements li {
                    margin-bottom: 5px;
                }
                
                .feat-preview .feat-effects {
                    background: #e9ecef;
                    border-radius: var(--radius-md);
                    padding: 10px;
                    margin: 10px 0;
                }
                
                .feat-preview .feat-effects h5 {
                    margin: 0 0 8px 0;
                    color: #495057;
                    font-size: var(--font-size-base);
                }
                
                .feat-preview .feat-effects ul {
                    margin: 0;
                    padding-left: 20px;
                    color: #495057;
                }
                
                .feat-preview .feat-effects li {
                    margin-bottom: 5px;
                }
                
                .feat-preview .feat-special {
                    background: #fff3cd;
                    border: 1px solid #ffeaa7;
                    border-radius: var(--radius-md);
                    padding: 10px;
                    margin: 10px 0;
                    color: #856404;
                }
                
                .feat-custom-input {
                    margin: 10px 0;
                }
                
                .feat-custom-input label {
                    display: block;
                    font-weight: 500;
                    color: #2d3748;
                    margin-bottom: 5px;
                    font-size: var(--font-size-base);
                }
                
                .feat-custom-input textarea {
                    width: 100%;
                    min-height: 80px;
                    padding: 10px;
                    border: 2px solid #e2e8f0;
                    border-radius: var(--radius-lg);
                    font-size: var(--font-size-base);
                    resize: vertical;
                    font-family: inherit;
                }
                
                .feat-custom-input textarea:focus {
                    outline: none;
                    border-color: #007bff;
                    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
                }

.feats-list {
    /* Remove height restriction and scrollbar */
    max-height: none;
    overflow-y: visible;
    /* Ensure proper spacing between feat items */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.feat-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 15px;
    background: #f7fafc;
    border-radius: 12px;
    margin-bottom: 0; /* Remove margin since we're using gap now */
    border-left: 4px solid #fcc419;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.feat-item:hover {
    background: #e9ecef;
    border-color: #adb5bd;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.feat-item::after {
    content: "▼ Click to expand";
    position: absolute;
    top: 10px;
    right: 50px;
    font-size: 0.7rem;
    color: #718096;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.feat-item:hover::after {
    opacity: 1;
}

.feat-item.expanded::after {
    content: "▲ Click to collapse";
}

.feat-item.expanded {
    background: white;
    border-color: #007bff;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
}

.feat-info {
    flex: 1;
    margin-right: 15px;
}

.feat-name {
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 8px;
}

.feat-tier {
    display: inline-block;
    background: #007bff;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    margin-bottom: 8px;
}

.feat-cost {
    display: inline-block;
    background: #dc3545;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    margin-left: 10px;
}

.feat-description {
    color: #718096;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 10px;
}

/* Fix list styling in feat descriptions */
.feat-description ul {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
    list-style-type: disc;
}

.feat-description li {
    margin-bottom: var(--spacing-xs);
    line-height: 1.4;
    padding-left: var(--spacing-xs);
}

.feat-description ul ul {
    margin: var(--spacing-xs) 0;
    padding-left: var(--spacing-md);
}

.feat-description ul ul li {
    list-style-type: circle;
}

.feat-description ul ul ul li {
    list-style-type: square;
}

.feat-custom-summary {
    background: #e3f2fd;
    color: #1565c0;
    font-size: 0.85rem;
    padding: 6px 10px;
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    border-left: 3px solid #2196f3;
}

.feat-tier-edit {
    margin: 10px 0;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: var(--radius-md);
    border: 1px solid #dee2e6;
}

.feat-tier-edit label {
    font-weight: 600;
    color: #495057;
    margin-right: 8px;
    font-size: 0.85rem;
}

.feat-tier-dropdown {
    padding: 4px 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: white;
    font-size: 0.85rem;
    color: #495057;
    cursor: pointer;
}

.feat-tier-dropdown:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Hide tier edit in view mode */
.view-mode .feat-tier-edit {
    display: none !important;
}

.feat-details {
    display: none;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e2e8f0;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.feat-item.expanded .feat-details {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.feat-overview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.feat-overview .feat-name {
    font-weight: 600;
    color: #2d3748;
    font-size: 1.1rem;
    margin-bottom: 0;
}

.feat-overview .feat-tier {
    background: #007bff;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0;
    margin-left: 0;
}

.feat-overview .feat-cost {
    background: #dc3545;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0;
    margin-left: 0;
}

.feat-overview .feat-description {
    color: #718096;
    font-size: 0.9rem;
    line-height: 1.4;
    flex-basis: 100%;
    margin-top: 5px;
    margin-bottom: 0;
}

.feat-prerequisites {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: var(--radius-lg);
    padding: 10px;
    margin-bottom: 10px;
}

.feat-prerequisites h5 {
    margin: 0 0 8px 0;
    color: #856404;
    font-size: var(--font-size-base);
}

.feat-prerequisites ul {
    margin: 0;
    padding-left: 20px;
    color: #856404;
}

.feat-prerequisites li {
    margin-bottom: 5px;
}

.feat-effect {
    background: #d1ecf1;
    border: 1px solid #bee5eb;
    border-radius: var(--radius-lg);
    padding: 10px;
    margin-bottom: 10px;
}

.feat-effect h5 {
    margin: 0 0 8px 0;
    color: #0c5460;
    font-size: var(--font-size-base);
}

.feat-effect-description {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: var(--radius-lg);
    padding: 10px;
    margin-bottom: 10px;
}

.feat-effect-description h5 {
    margin: 0 0 8px 0;
    color: #856404;
    font-size: var(--font-size-base);
}

.feat-effect-description p {
    margin: 0;
    color: #856404;
    line-height: 1.4;
}

/* Fix list styling in effect descriptions */
.feat-effect-description ul {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
    list-style-type: disc;
}

.feat-effect-description li {
    margin-bottom: var(--spacing-xs);
    line-height: 1.4;
    padding-left: var(--spacing-xs);
}

.feat-effect-description ul ul {
    margin: var(--spacing-xs) 0;
    padding-left: var(--spacing-md);
}

.feat-effect-description ul ul li {
    list-style-type: circle;
}

.feat-effect-description ul ul ul li {
    list-style-type: square;
}

.feat-base-effect-description {
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    border-radius: var(--radius-lg);
    padding: 10px;
    margin-bottom: 10px;
}

.feat-base-effect-description h5 {
    margin: 0 0 8px 0;
    color: #1565c0;
    font-size: var(--font-size-base);
}

.feat-base-effect-description p {
    margin: 0;
    color: #1565c0;
    line-height: 1.4;
}

/* Fix list styling in base effect descriptions */
.feat-base-effect-description ul {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
    list-style-type: disc;
}

.feat-base-effect-description li {
    margin-bottom: var(--spacing-xs);
    line-height: 1.4;
    padding-left: var(--spacing-xs);
}

.feat-base-effect-description ul ul {
    margin: var(--spacing-xs) 0;
    padding-left: var(--spacing-md);
}

.feat-base-effect-description ul ul li {
    list-style-type: circle;
}

.feat-base-effect-description ul ul ul li {
    list-style-type: square;
}

                .feat-effect p {
                    margin: 0;
                    color: #0c5460;
                    line-height: 1.4;
                }

/* Fix list styling in feat effects */
.feat-effect ul {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
    list-style-type: disc;
}

.feat-effect li {
    margin-bottom: var(--spacing-xs);
    line-height: 1.4;
    padding-left: var(--spacing-xs);
}

.feat-effect ul ul {
    margin: var(--spacing-xs) 0;
    padding-left: var(--spacing-md);
}

.feat-effect ul ul li {
    list-style-type: circle;
}

.feat-effect ul ul ul li {
    list-style-type: square;
}
                
                .feat-custom-details {
                    background: #e8f5e8;
                    border: 1px solid #c3e6c3;
                    border-radius: var(--radius-lg);
                    padding: 10px;
                    margin-bottom: 10px;
                }
                
                .feat-custom-details h5 {
                    margin: 0 0 8px 0;
                    color: #155724;
                    font-size: var(--font-size-base);
                }
                
                .feat-custom-details p {
                    margin: 0;
                    color: #155724;
                    line-height: 1.4;
                }

.feat-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.remove-item {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: var(--font-size-lg);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.remove-item:hover {
    background: #c82333;
}

/* Advantages & Boons */
.advantages-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* Row containers for side-by-side layout */
.advantages-disadvantages-row,
.boons-banes-row {
    display: flex;
    gap: var(--spacing-xl);
    flex-wrap: wrap;
}

.advantages-disadvantages-row .advantage-group,
.boons-banes-row .advantage-group {
    flex: 1;
}

/* Responsive design for mobile devices */
@media (max-width: 768px) {
    .advantages-disadvantages-row,
    .boons-banes-row {
        flex-direction: column;
        gap: var(--spacing-lg);
    }
    
    .advantages-disadvantages-row .advantage-group,
    .boons-banes-row .advantage-group {
        min-width: auto;
    }
    
    .advantage-summary {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}

.advantage-summary {
    background: var(--white);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

.advantage-disadvantage-calculation {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.advantage-summary .advantage-filter {
    margin-bottom: 0;
}

.advantages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.advantage-group {
    background: var(--white);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
}

.advantage-group h4 {
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-xl);
    font-weight: 700;
}

.advantage-filter {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    flex-wrap: wrap;
}

.advantage-filter > * {
    margin-bottom: 5px;
}

.advantage-filter label {
    font-weight: 600;
    color: #2d3748;
    font-size: 0.9rem;
}

.advantage-filter select {
    padding: 8px 12px;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-lg);
    background: white;
    font-size: 0.9rem;
}

.advantage-filter select:focus {
    border-color: #667eea;
    outline: none;
}

.validation-controls {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
}

.validation-controls .btn {
    font-size: 0.85rem;
    padding: 6px 12px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #6c757d;
}

.validation-controls .btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
    color: #495057;
}

.advantage-count {
    background: var(--primary);
    color: var(--white);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 20px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-left: auto;
}

.advantage-count-display {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
}

.checkbox-list {
    margin-bottom: 20px;
}

.checkbox-item {
    display: flex !important;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    transition: var(--transition-base);
    min-width: 0;
    overflow: hidden;
}

/* Ensure advantages and disadvantages use flexbox layout */
.advantages-section .checkbox-item,
#advantagesList .checkbox-item,
#disadvantagesList .checkbox-item {
    display: flex !important;
    align-items: center;
}

.checkbox-item:hover {
    background: var(--gray-100);
}

.checkbox-item input[type="checkbox"] {
    margin-right: var(--spacing-sm);
    transform: scale(1.2);
}

.checkbox-item label {
    flex: 1;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-primary);
    margin-left: var(--spacing-sm);
    white-space: nowrap;
    margin-right: var(--spacing-sm);
}

.advantage-attribute {
    background: var(--success-light);
    color: var(--text-primary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 12px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    white-space: nowrap;
    margin-left: auto;
    flex-shrink: 0;
    margin-right: var(--spacing-sm);
}

.remove-item {
    background: var(--danger);
    color: var(--white);
    border: none;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 600;
    transition: var(--transition-base);
    margin-left: var(--spacing-sm);
    flex-shrink: 0;
}

/* Unique delete button styles for advantages and disadvantages */
.remove-advantage-btn,
.remove-disadvantage-btn {
    background: var(--danger);
    color: var(--white);
    border: none;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 600;
    transition: var(--transition-base);
    flex-shrink: 0;
}

.remove-item:hover {
    background: var(--danger-dark);
    transform: scale(1.05);
}

.remove-advantage-btn:hover,
.remove-disadvantage-btn:hover {
    background: var(--danger-dark);
    transform: scale(1.05);
}

/* Boon and Bane Styles */
.boon-item, .bane-item {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.boon-overview, .bane-overview {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
}

.boon-item span, .bane-item span {
    font-weight: 600;
    color: #2d3748;
}

.boon-name, .bane-name {
    flex: 1;
    margin-right: var(--spacing-sm);
}

.boon-duration, .bane-duration {
    background: var(--gray-50);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-left: auto;
    margin-right: var(--spacing-sm);
}

.boon-power-level, .bane-power-level {
    background: var(--primary);
    color: var(--white);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    flex-shrink: 0;
}

.sustain-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* Ensure remove buttons in boon/bane items are properly positioned */
.boon-overview .remove-item,
.bane-overview .remove-item {
    flex-shrink: 0;
}

.sustain-checkbox input[type="checkbox"] {
    margin: 0;
}

.bane-resist-checkboxes {
    display: flex;
    gap: 15px;
    align-items: center;
}

.bane-resist-checkboxes label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: #4a5568;
}

.bane-resist-checkboxes input[type="checkbox"] {
    margin: 0;
}

.bane-checkboxes {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.bane-checkboxes label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    color: #2d3748;
    cursor: pointer;
}

.add-item {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.add-item > * {
    margin-bottom: 8px;
}

.add-item input {
    flex: 1;
}


.add-item select[id$="CountSelect"] {
    text-align: center;
}

/* Mobile-friendly styling for count dropdowns */
@media (max-width: 768px) {
    .add-item {
        flex-direction: column;
        align-items: stretch;
    }
    
    .add-item input,
    .add-item select {
        min-width: auto;
        width: 100%;
    }
    
    .add-item select[id$="CountSelect"] {
        width: 100%;
        text-align: center;
    }
    
    .add-item button {
        width: 100%;
    }
}

.power-level-input {
    width: 80px;
    text-align: center;
    font-weight: 600;
}

/* Character Description */
.description-section {
    background: white;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
}

.image-upload-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.image-preview {
    width: 150px;
    height: 150px;
    border: 3px dashed #cbd5e0;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f7fafc;
    color: #718096;
}

.image-preview:hover {
    border-color: #667eea;
    background: #edf2f7;
}

.image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 9px;
}

.image-preview i {
    font-size: 3rem;
    margin-bottom: 10px;
    color: #a0aec0;
}

.image-preview span {
    font-size: 0.9rem;
    text-align: center;
    line-height: 1.3;
}

.perks-flaws-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 25px;
}

.perks-section, .flaws-section {
    background: #f7fafc;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.perks-section h4, .flaws-section h4 {
    color: #2d3748;
    margin-bottom: 15px;
    font-size: 1.1rem;
    font-weight: 700;
}

.perk-input, .flaw-input {
    width: 100%;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-lg);
    margin-bottom: 10px;
    font-size: var(--font-size-base);
    background: white;
}

.perk-input:focus, .flaw-input:focus {
    border-color: #667eea;
    outline: none;
}

/* Modal Styles */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

.modal-content {
    background-color: white;
    margin: 5% auto;
    padding: 30px;
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    position: relative;
}

.modal-content.modal-large {
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
}

@media (min-width: 1200px) {
    .modal-content.modal-large {
        max-width: 1000px;
    }
}

@media (max-width: 768px) {
    .modal-content.modal-large {
        max-width: 95%;
        margin: 2% auto;
        padding: 20px;
    }
    
    .custom-form .form-row {
        grid-template-columns: 1fr;
    }
    
    .custom-entry-card {
        grid-template-columns: 1fr;
    }
    
    .custom-entry-actions {
        flex-direction: row;
        justify-content: flex-start;
    }
    
    #customBaneDefenseTargets {
        grid-template-columns: 1fr;
    }
}

.close {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: var(--font-size-3xl);
    font-weight: bold;
    cursor: pointer;
    color: #aaa;
    transition: color 0.3s ease;
}

.close:hover {
    color: #2d3748;
}

/* Custom Boons & Banes Styles */
.custom-actions-header {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, var(--gray-50) 0%, white 100%);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .custom-actions-header {
        flex-direction: column;
    }
    
    .custom-actions-header button {
        width: 100%;
    }
}

.custom-subsection {
    margin-bottom: var(--spacing-2xl);
    padding: var(--spacing-lg);
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.custom-subsection h4 {
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.custom-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.custom-form .form-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.custom-form .form-group input:not([type="checkbox"]),
.custom-form .form-group textarea,
.custom-form .form-group select {
    width: 100%;
    box-sizing: border-box;
}

.custom-form .form-group input[type="checkbox"] {
    width: auto;
}

.custom-form .form-row {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

.custom-form .form-row .form-group {
    width: 100%;
    margin: 0;
    min-width: 0;
}

.attributes-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--spacing-sm) var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--gray-50);
    border-radius: var(--radius-sm);
}

@media (min-width: 900px) {
    .attributes-checkboxes {
        grid-template-columns: repeat(6, 1fr);
    }
}

.attributes-checkboxes label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    cursor: pointer;
    white-space: nowrap;
}

.attributes-checkboxes input[type="checkbox"] {
    cursor: pointer;
    flex-shrink: 0;
}

.power-level-input {
    width: 100%;
    margin-bottom: var(--spacing-lg);
}

.power-level-input label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-sm);
}

.power-level-input textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 90px;
    resize: vertical;
    padding: var(--spacing-md);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-family: inherit;
    line-height: 1.5;
}

#customBoonPowerLevelDescs,
#customBanePowerLevelDescs {
    width: 100%;
    box-sizing: border-box;
}

#customBoonPowerLevelDescs:empty,
#customBanePowerLevelDescs:empty {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--text-secondary);
}

#customBoonPowerLevelDescs:empty::before {
    content: 'Power level description fields will appear here after you enter power levels above';
}

#customBanePowerLevelDescs:empty::before {
    content: 'Power level description fields will appear here after you enter power levels above';
}

#customBaneDefenseTargets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

#customBaneDefenseTargets:empty {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--text-secondary);
}

#customBaneDefenseTargets:empty::before {
    content: 'Defense target fields will appear here after you select attributes above';
}

.defense-target-input {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--spacing-sm);
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: white;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}

.defense-target-input label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.defense-target-input select {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.field-help {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
    font-style: italic;
}

.export-text-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.export-text-section textarea {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    background: var(--gray-50);
    resize: vertical;
}

.export-text-section p {
    margin: 0;
}

.custom-badge {
    font-size: var(--font-size-xs);
    color: var(--primary);
    font-weight: 600;
    background: var(--primary-color-light);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    margin-left: var(--spacing-xs);
}

/* Favorite Actions Styles */
.favorite-actions-section {
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
    border-bottom: 2px solid var(--border-light);
}

.favorite-actions-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.favorite-action-item {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--spacing-md);
    transition: var(--transition-base);
}

.favorite-action-item:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--perk-color);
    transform: translateY(-1px);
}

.favorite-action-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.favorite-action-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.favorite-action-name {
    font-weight: 600;
    color: var(--perk-dark);
    font-size: var(--font-size-base);
}

.favorite-action-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--perk-color);
    color: white;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.favorite-action-stats {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    font-size: var(--font-size-sm);
}

.favorite-action-stat {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.favorite-action-stat strong {
    color: var(--text-secondary);
}

.favorite-action-dice {
    font-weight: 700;
    color: var(--perk-color);
    background: var(--perk-light);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
}

.favorite-action-advantage {
    font-weight: 600;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
}

.favorite-action-advantage.positive {
    color: var(--success);
    background: rgba(16, 185, 129, 0.1);
}

.favorite-action-advantage.negative {
    color: var(--danger);
    background: rgba(239, 68, 68, 0.1);
}

.favorite-action-advantage.neutral {
    color: var(--text-secondary);
}

.favorite-action-remove {
    align-self: flex-start;
}

.add-favorite-action {
    background: var(--gray-50);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.add-favorite-action .form-row {
    margin-bottom: var(--spacing-md);
}

.custom-health-buff {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-left: auto;
}

.custom-health-buff label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.custom-health-input {
    width: 80px;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    text-align: center;
}

.manual-settings-section {
    background: linear-gradient(135deg, var(--warning) 0%, #fbbf24 100%);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    border: 2px solid var(--warning);
}

.manual-settings-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    color: white;
    font-size: var(--font-size-base);
}

.manual-settings-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.manual-settings-help {
    margin: var(--spacing-xs) 0 0 32px;
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
}

.manual-override-input {
    width: 80px;
    padding: var(--spacing-xs);
    text-align: center;
    font-weight: bold;
    border: 2px solid var(--warning);
    background: var(--warning);
    color: white;
}

/* Ensure manual override inputs are always visible when displayed */
.manual-always-visible {
    display: inline-block !important;
}

.manual-always-visible[style*="display: none"] {
    display: none !important;
}

.modal-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-light);
}

.custom-entry-card {
    background: white;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    position: relative;
    transition: var(--transition-base);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--spacing-lg);
}

.custom-entry-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.custom-entry-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.custom-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-xs);
}

.custom-entry-title {
    font-weight: 600;
    color: var(--primary);
    font-size: var(--font-size-lg);
}

.custom-entry-actions {
    display: flex;
    gap: var(--spacing-xs);
    flex-shrink: 0;
    align-items: flex-start;
}

.custom-entry-meta {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.custom-entry-meta > span {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.custom-entry-description {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: 1.5;
}

/* Import Modal Styles */
.import-section {
    margin-bottom: 25px;
}

.import-section h3 {
    margin-bottom: 15px;
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    display: flex;
    align-items: center;
    gap: 10px;
}

.import-divider {
    text-align: center;
    margin: 25px 0;
    position: relative;
}

.import-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-color);
}

.import-divider span {
    background: white;
    padding: 0 15px;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

/* File Upload Area */
.file-upload-area {
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    background: var(--background-light);
    transition: all 0.3s ease;
    cursor: pointer;
    margin-bottom: 15px;
}

/* Export Modal Styles */
.export-section {
    margin-bottom: 25px;
}

.export-section h3 {
    margin-bottom: 15px;
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    display: flex;
    align-items: center;
    gap: 10px;
}

.export-section p {
    margin-bottom: 15px;
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    line-height: 1.5;
}

.export-divider {
    text-align: center;
    margin: 25px 0;
    position: relative;
}

.export-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-color);
}

.export-divider span {
    background: white;
    padding: 0 15px;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

#exportDataText {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 12px;
    background: var(--background-light);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.file-upload-area:hover {
    border-color: var(--primary-color);
    background: var(--background-lighter);
}

.file-upload-area.dragover {
    border-color: var(--primary-color);
    background: var(--primary-color-light);
    transform: scale(1.02);
}

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

.upload-placeholder i {
    font-size: var(--font-size-4xl);
    margin-bottom: 15px;
    color: var(--primary-color);
}

.upload-placeholder p {
    margin: 8px 0;
    font-size: var(--font-size-md);
}

.upload-hint {
    font-size: var(--font-size-sm) !important;
    color: var(--text-muted) !important;
}

.file-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: var(--text-primary);
}

.file-info i {
    font-size: var(--font-size-2xl);
    color: var(--success-color);
}

.file-info span {
    font-weight: 500;
    font-size: var(--font-size-md);
}

#importData {
    width: 100%;
    height: 150px;
    padding: 15px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-family: monospace;
    margin-bottom: 20px;
    resize: vertical;
    background: #f7fafc;
}

#importData:focus {
    border-color: #667eea;
    background: white;
    outline: none;
}

/* Responsive Design - Consolidated */
@media (max-width: 768px) {
    .app-container {
        padding: var(--spacing-sm);
        max-width: 100%;
        width: 100%;
    }
    
    .main-page {
        padding: var(--spacing-sm);
    }
    
    .app-header h1 {
        font-size: var(--font-size-2xl);
    }
    
    /* Group elements that need column layout */
    .header-controls,
    .character-header,
    .form-row,
    .hp-display,
    .hp-controls {
        flex-direction: column;
    }
    
    .damage-healing-row {
        flex-direction: row;
        gap: var(--spacing-sm);
        justify-content: center;
        align-items: center;
    }
    
    .character-header {
        text-align: center;
    }
    
    .character-actions {
        justify-content: center;
    }
    
    .form-group {
        min-width: auto;
    }
    
    .attributes-grid {
        justify-content: center;
    }
    
    .advantages-section {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    /* Group elements that need column layout with stretch alignment */
    .add-item,
    .advantage-filter,
    .armor-specific-fields {
        flex-direction: column;
        align-items: stretch;
    }
    
    .add-item,
    .advantage-filter {
        gap: var(--spacing-sm);
    }
    
    .advantage-count {
        margin-left: 0;
        text-align: center;
    }
    
    .item-specific-fields {
        gap: 12px;
        padding: 12px;
    }
    
    /* Prevent zoom on mobile for form elements */
    .item-attribute-section select,
    .item-power-level-section select,
    .equipment-item-attribute-edit,
    .equipment-item-power-level-edit {
        font-size: 1rem;
    }
    
    /* Mobile optimizations for expanded equipment layout */
    .equipment-item {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }
    
    .equipment-actions {
        flex-direction: row;
        min-width: auto;
        gap: var(--spacing-xs);
    }
    
    .detail-tag,
    .weapon-detail {
        padding: var(--spacing-xs) var(--spacing-sm);
        margin: var(--spacing-xs);
    }
    
    /* Mobile optimizations for add equipment form */
    .add-equipment {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
        max-width: 100%;
    }
    
    .item-specific-fields,
    .weapon-specific-fields {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .armor-specific-fields {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .weapon-properties-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: var(--spacing-sm);
    }
    
    .bane-selection {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .add-equipment #addEquipmentBtn {
        padding: var(--spacing-sm) var(--spacing-md);
        justify-self: center;
    }
    
    .bane-checkboxes {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .perks-flaws-section {
        grid-template-columns: 1fr;
    }
    
    .modal-content {
        margin: 10% auto;
        width: 95%;
        padding: var(--spacing-lg);
    }
    
    /* Mobile-specific optimizations to prevent glitches */
    .character-card {
        transform: none !important;
        transition: none !important;
    }
    
    .character-card:hover {
        transform: none !important;
        box-shadow: var(--shadow-lg);
    }
    
    /* Reduce complex shadows on mobile */
    .card, .content-section, .attribute-card {
        box-shadow: var(--shadow-sm);
    }
    
    /* Simplify transitions on mobile */
    .btn, .attribute-card, .content-section {
        transition: none !important;
    }
    
    /* Prevent transform glitches on mobile */
    .btn:hover, .attribute-card:hover {
        transform: none !important;
    }
    
    /* Mobile performance optimizations */
    .fade-in, .slide-in {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    
    /* Mobile touch optimizations */
    .btn {
        min-height: 44px;
        /* Fix double-tap issue on mobile */
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
    
    /* Ensure buttons respond immediately to touch */
    .btn:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    
    input[type="text"],
    input[type="number"],
    input[type="email"],
    textarea,
    select {
        font-size: var(--font-size-lg);
    }
    
    .character-grid {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: auto;
    }
    
    .feats-list {
        /* Ensure feats list expands properly on mobile */
        max-height: none;
        overflow-y: visible;
        gap: var(--spacing-sm);
    }
    
    .app-container,
    .character-sheet-page,
    .content-section {
        overflow-x: hidden;
        width: 100%;
    }
    
    .character-card,
    .attribute-card,
    .btn {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Character card responsive optimizations */
    .character-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: var(--spacing-lg);
        padding: var(--spacing-sm);
    }
    
    .character-card {
        padding: var(--spacing-lg);
        min-height: 180px;
    }
    
    .character-card h3 {
        font-size: var(--font-size-xl);
    }
    
    .character-meta {
        gap: var(--spacing-xs);
    }
    
    .character-meta span {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-xs);
    }
    
    .character-actions {
        gap: var(--spacing-xs);
    }
    
    .character-actions .btn {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-xs);
    }
    
    /* Override problematic min-widths for mobile */
    .btn-large {
        min-width: auto;
    }
    
    .form-group {
        min-width: auto;
    }
}

/* Small screen optimizations - Consolidated */
@media (max-width: 480px) {
    .character-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    /* Ensure character-content doesn't exceed viewport on very small screens */
    .view-mode .character-content {
        display: block !important;
        grid-template-columns: none !important;
        grid-template-areas: none !important;
        padding: 1px;
        gap: 0;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    
    .app-container {
        max-width: 100%;
        width: 100%;
    }
    
    .main-page {
        padding: var(--spacing-xs);
    }
    
    /* Ensure all sections use block layout and proper spacing on very small screens */
    .view-mode #statsSection,
    .view-mode #combatSection,
    .view-mode #initiativeMovementSection,
    .view-mode #availableBoonsBanesSection,
    .view-mode #effectsSection,
    .view-mode #equipmentSection,
    .view-mode #featsSection,
    .view-mode #characterSection,
    .view-mode #baseActionsSection {
        width: 100% !important;
        margin-bottom: var(--spacing-xs);
        display: block !important;
    }
    
    /* Movement labels wrap on very small screens */
    .view-mode .movement-stat label {
        font-size: var(--font-size-xs);
        line-height: 1.1;
        max-width: 60%;
    }
    
    .view-mode .movement-stat {
        padding: 2px 3px;
        gap: 2px;
    }
    
    /* Fix boons and banes section margins and width on mobile - maximize space usage */
    .view-mode .boons-banes-container {
        padding: 0 !important;
        gap: 1px !important;
        margin: 0 !important;
    }
    
    .view-mode .boons-section, 
    .view-mode .banes-section {
        margin-bottom: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    
    .view-mode .boons-section h5, 
    .view-mode .banes-section h5 {
        margin: 0 0 1px 0 !important;
        padding: 1px !important;
        font-size: var(--font-size-xs) !important;
    }
    
    .view-mode .boons-list, 
    .view-mode .banes-list {
        padding: 0 !important;
        gap: 0 !important;
        margin: 0 !important;
    }
    
    .view-mode .boon-item,
    .view-mode .bane-item {
        padding: 2px 4px !important;
        margin: 1px 0 !important;
        width: 100% !important;
        box-sizing: border-box;
        min-height: auto !important;
        font-size: var(--font-size-xs) !important;
        line-height: 1.2 !important;
    }
    
    .view-mode .boon-item .boon-name,
    .view-mode .bane-item .bane-name {
        font-size: var(--font-size-xs) !important;
        margin-bottom: 1px !important;
    }
    
    .view-mode .boon-item .boon-description,
    .view-mode .bane-item .bane-description {
        font-size: var(--font-size-xs) !important;
        line-height: 1.2 !important;
    }
    
    /* Fix expanded state width and spacing on very small screens */
    .view-mode .boon-item.expanded,
    .view-mode .bane-item.expanded {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1px 2px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    
    .view-mode .boon-item.expanded .boon-details,
    .view-mode .bane-item.expanded .bane-details {
        padding: 1px 2px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .view-mode .boon-item.expanded .detail-section,
    .view-mode .bane-item.expanded .detail-section {
        margin-bottom: 1px !important;
        padding: 1px 0 !important;
    }
    
    .view-mode .boon-item.expanded .detail-section h6,
    .view-mode .bane-item.expanded .detail-section h6 {
        margin: 0 0 1px 0 !important;
        font-size: var(--font-size-xs) !important;
    }
    
    /* Fix double-tap issue on very small screens */
    .btn {
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
    }
    
    .btn:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    
    .character-card {
        padding: var(--spacing-md);
        min-height: 160px;
    }
    
    .character-overview-archetype {
        font-size: var(--font-size-xs);
        padding: var(--spacing-xs);
    }
    
    .btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-xs);
        min-width: auto;
    }
    
    /* Override problematic min-widths for extra small screens */
    .btn-large {
        min-width: auto;
    }
    
    .form-group {
        min-width: auto;
    }
    
    .attribute-card {
        padding: var(--spacing-sm);
        width: 100px;
        flex: 0 0 100px;
    }
    
    .view-mode .attribute-card {
        width: 100px;
        flex: 0 0 100px;
    }
    
    .hp-value {
        font-size: var(--font-size-xl);
    }
    
    .defense-value {
        font-size: var(--font-size-3xl);
        padding: var(--spacing-md) var(--spacing-lg);
    }
    
    .damage-controls, .lethal-controls {
        min-width: auto;
        flex: 1;
        max-width: 50%;
    }
    
    /* Additional mobile optimizations */
    .app-container::before {
        display: none; /* Remove background overlay on very small screens */
    }
    
    /* Simplify character cards on very small screens */
    .character-card::before,
    .character-card::after {
        display: none;
    }
    
    /* Ensure proper stacking context */
    .modal {
        z-index: 10000;
    }
    
    .attribute-error-popup {
        z-index: 10001;
    }
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(30px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.slide-in {
    animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateY(0); }
}

/* Mobile performance optimizations - Consolidated with main responsive section above */

/* Prevent graphical glitches */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Ensure proper stacking context for modals and overlays */
.modal {
    z-index: 10000;
    position: fixed;
}

.attribute-error-popup {
    z-index: 10001;
    position: fixed;
}

/* Prevent transform glitches on mobile */
@media (max-width: 768px) {
    .character-card,
    .attribute-card,
    .content-section,
    .btn {
        will-change: auto;
        transform: none !important;
    }
    
    .character-card:hover,
    .attribute-card:hover,
    .btn:hover {
        transform: none !important;
    }
}

/* High Damage Modal Styles */
.high-damage-modal {
    z-index: 10002; /* Higher than other modals */
}

.high-damage-content {
    max-width: 600px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
    border: 3px solid var(--warning);
    box-shadow: 0 20px 40px rgba(245, 158, 11, 0.3);
}

.high-damage-header {
    background: linear-gradient(135deg, var(--warning) 0%, #fbbf24 100%);
    color: var(--white);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    text-align: center;
    position: relative;
}

.high-damage-header h2 {
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.high-damage-header .close {
    position: absolute;
    right: var(--spacing-lg);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-2xl);
    font-weight: bold;
    cursor: pointer;
    color: var(--white);
    opacity: 0.8;
    transition: opacity var(--transition-base);
}

.high-damage-header .close:hover {
    opacity: 1;
}

.high-damage-body {
    padding: var(--spacing-xl);
}

.damage-display {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
    border-radius: var(--radius-lg);
    border: 2px solid rgba(239, 68, 68, 0.3);
}

.damage-number {
    display: block;
    font-size: var(--font-size-4xl);
    font-weight: 900;
    color: var(--danger);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: var(--spacing-sm);
}

.damage-label {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    font-weight: 600;
}

.game-mechanics-info h3 {
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.mechanics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.mechanic-item {
    text-align: center;
    padding: var(--spacing-lg);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    transition: var(--transition-base);
}

.mechanic-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.mechanic-item i {
    font-size: var(--font-size-2xl);
    color: var(--primary);
    margin-bottom: var(--spacing-sm);
}

.mechanic-item h4 {
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.mechanic-item p {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.4;
    margin: 0;
}

.action-buttons {
    text-align: center;
}

.action-buttons .btn {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
    font-weight: 600;
}

/* Responsive design for high damage modal */
@media (max-width: 768px) {
    .high-damage-content {
        max-width: 95vw;
        margin: 20px;
    }
    
    .mechanics-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .damage-number {
        font-size: var(--font-size-3xl);
    }
    
    .high-damage-header h2 {
        font-size: var(--font-size-xl);
    }
}

/* Utility Classes - Consolidated */
.text-center { text-align: center; }
.mt-20 { margin-top: var(--spacing-lg); }
.mb-20 { margin-bottom: var(--spacing-lg); }
.hidden { display: none; }

/* Feat sort buttons */
.feat-sort-buttons {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    justify-content: flex-start;
}

/* Mobile touch optimizations - Consolidated with main responsive section above */

/* Global mobile button double-tap fix */
@media (max-width: 768px) {
    .btn, .attr-btn, button {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
    
    .btn:active, .attr-btn:active, button:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* Health Bar Styles */
.health-bar-container {
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.health-bar {
    width: 100%;
    height: 20px;
    background: var(--gray-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
    margin-bottom: var(--spacing-sm);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: var(--transition-base);
}

.health-bar:hover {
    transform: scale(1.01);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.health-bar-segment {
    height: 100%;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 0;
    position: relative;
}

.health-bar-segment.current-hp {
    background: linear-gradient(135deg, #51cf66, #40c057);
    float: left;
    box-shadow: 0 0 10px rgba(81, 207, 102, 0.3);
}

.health-bar-segment.missing-hp {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    float: left;
    box-shadow: 0 0 10px rgba(255, 107, 107, 0.3);
}

.health-bar-segment.reduced-max {
    background: linear-gradient(135deg, #2d3748, #1a202c);
    float: left;
    box-shadow: 0 0 10px rgba(45, 55, 72, 0.3);
}

.health-bar-text {
    text-align: center;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
    transition: var(--transition-base);
}

.health-bar-text:hover {
    color: var(--text-primary);
}

/* Touch-friendly input styles */
.touch-friendly-input {
    font-size: var(--font-size-base);
    padding: var(--spacing-md);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    width: 100%;
    text-align: center;
    transition: var(--transition-base);
    background: var(--white);
}

.touch-friendly-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    transform: translateY(-1px);
}

.touch-friendly-input:hover {
    border-color: var(--border-medium);
    transform: translateY(-1px);
}

/* Damage buttons styles - Restored red and green colors */
.damage-buttons {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    justify-content: center;
}

.damage-buttons .btn {
    flex: 1;
    padding: 4px 8px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
    min-height: 28px;
    white-space: nowrap;
    max-width: 80px;
}

.damage-buttons .btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.damage-buttons .btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* Specific damage and healing button colors - Exception to unified styling */
#damageBtn,
#lethalDamageBtn {
    background: linear-gradient(135deg, var(--danger) 0%, #d71010 100%) !important;
    color: var(--white) !important;
    border: 2px solid var(--danger) !important;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3) !important;
}

#damageBtn:hover,
#lethalDamageBtn:hover {
    background: linear-gradient(135deg, #d71010 0%, var(--danger) 100%) !important;
    border-color: #d71010 !important;
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.4) !important;
}

#healBtn,
#lethalHealBtn {
    background: linear-gradient(135deg, var(--success) 0%, #34d399 100%) !important;
    color: var(--white) !important;
    border: 2px solid var(--success) !important;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3) !important;
}

#healBtn:hover,
#lethalHealBtn:hover {
    background: linear-gradient(135deg, #34d399 0%, var(--success) 100%) !important;
    border-color: #34d399 !important;
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4) !important;
}

/* Character title styles */
.character-title {
    color: var(--primary);
    font-weight: 500;
    margin: 0;
    font-size: var(--font-size-xl);
    opacity: 0.9;
    flex: 1;
    text-align: center;
}

/* Character archetype styles */
.character-archetype {
    color: var(--primary);
    font-weight: 400;
    margin: 0;
    font-size: var(--font-size-lg);
    opacity: 0.8;
    text-align: center;
    font-style: italic;
    margin-top: var(--spacing-xs);
}

/* Attribute error popup styling */
.attribute-error-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.attribute-error-popup .popup-content {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    text-align: center;
    animation: popupSlideIn 0.3s ease-out;
}

.attribute-error-popup h3 {
    color: #e74c3c;
    margin: 0 0 20px 0;
    font-size: 1.4em;
}

.attribute-error-popup p {
    margin: 10px 0;
    color: #555;
    line-height: 1.5;
}

.attribute-error-popup strong {
    color: #e74c3c;
    font-weight: 600;
}

.attribute-error-popup .btn {
    margin-top: 20px;
    padding: 12px 24px;
    font-size: 1.1em;
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* HP Section Styles */

/* Custom Details Overview Styling */
.feat-custom-details-overview {
    background: #f0f8ff;
    padding: 5px 8px;
    margin: 5px 0;
    border-radius: 4px;
    border-left: 3px solid #007acc;
    font-size: 0.9em;
    color: #333;
}

/* Boon and Bane Overview Styling */
.boon-overview,
.bane-overview,
.perk-overview,
.flaw-overview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 4px;
    margin-bottom: 5px;
}

.boon-name,
.bane-name,
.perk-name,
.flaw-name {
    font-weight: bold;
    flex: 1;
}

.boon-power-level,
.bane-power-level {
    background: #007acc;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.8em;
    font-weight: bold;
}

.boon-duration,
.bane-duration {
    color: #666;
    font-size: 0.9em;
}

/* Boon and Bane Details Styling */
.boon-details,
.bane-details,
.perk-details,
.flaw-details {
    background: #f8f9fa;
    padding: 10px;
    margin: 5px 0;
    border-radius: 4px;
    border-left: 3px solid #28a745;
}

.boon-description,
.bane-description,
.perk-description,
.flaw-description,
.boon-effect,
.bane-effect,
.perk-effect,
.boon-power-level-effect,
.bane-power-level-effect,
.boon-special,
.bane-special {
    margin: 5px 0;
    line-height: 1.4;
}

.boon-special,
.bane-special {
    color: #dc3545;
    font-weight: bold;
}

/* Expandable Items */
.boon-item,
.bane-item,
.perk-item,
.flaw-item {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 8px;
    overflow: hidden;
}

/* Allow expanded items to show their content */
.boon-item.expanded,
.bane-item.expanded,
.perk-item.expanded,
.flaw-item.expanded {
    overflow: visible;
}

.boon-item:hover,
.bane-item:hover,
.perk-item:hover,
.flaw-item:hover {
    border-color: #007acc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.boon-item.expanded,
.bane-item.expanded,
.perk-item.expanded,
.flaw-item.expanded {
    border-color: #28a745;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    z-index: 10;
    position: relative;
}

/* Character Navigation */
.character-navigation {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: none;
    padding: var(--spacing-md);
    margin-bottom: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 2;
}

.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    border: none;
    background: transparent;
    padding: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    margin-bottom: 0;
}

.nav-tab {
    background: var(--white);
    border: 1px solid var(--border-light);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    position: relative;
    min-height: 36px;
}

.nav-tab:hover {
    background: var(--primary-light);
    color: var(--white);
    transform: translateY(-1px);
}

.nav-tab.active {
    color: var(--white);
    background: var(--primary-dark);
    box-shadow: var(--shadow-md);
    font-weight: 600;
    transform: translateY(-1px);
    border-color: var(--primary);
}

.nav-tab i {
    font-size: var(--font-size-base);
}

/* Section Visibility */
[id$="Section"] {
    display: none !important;
}

[id$="Section"].active {
    display: block !important;
}

/* Responsive Navigation */
@media (max-width: 768px) {
    .nav-tabs {
        flex-direction: column;
        width: 100%;
    }
    
    .nav-tab {
        border-bottom: 1px solid var(--border-light);
        border-right: none;
        text-align: left;
        justify-content: flex-start;
    }
    
    .nav-tab.active {
        border-bottom-color: var(--primary);
        border-right: none;
    }
}

@media (max-width: 480px) {
    .nav-tab {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-xs);
    }
    
    .nav-tab i {
        font-size: var(--font-size-sm);
    }
}

/* View Mode Styles - Consolidated */
.view-mode .editable-only,
.view-mode .attribute-controls,
.view-mode .attribute-cost,
.view-mode .base-stats-section,
.view-mode .add-feat,
.view-mode .add-item,
.view-mode .feat-points-display,
.view-mode .advantage-summary,
.view-mode .perks-flaws-section .add-item,
.view-mode .image-upload-container button {
    display: none !important;
}

.view-mode .advantage-filter {
    display: block !important;
}

.view-mode .image-upload-container {
    pointer-events: none;
}

.view-mode .image-preview {
    cursor: default;
}

.view-mode .image-preview:hover {
    transform: none;
}

/* Ensure view-mode buttons maintain their styling */
.view-mode .btn.view-mode-btn {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--gray-600) 100%);
    color: var(--white);
    border: 2px solid var(--gray-600);
    box-shadow: 0 2px 4px rgba(100, 116, 139, 0.3);
}

.view-mode .btn.view-mode-btn:hover {
    background: linear-gradient(135deg, var(--gray-600) 0%, var(--secondary) 100%);
    border-color: var(--gray-600);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(100, 116, 139, 0.4);
}

.view-mode .form-group textarea:not(#charNotes),
.view-mode .form-group input:not(#charNotes):not(.manual-override-input):not(#customHealthBuff):not(#favoriteActionName):not(#favoriteActionTime) {
    pointer-events: none;
    background-color: var(--gray-100);
    color: var(--text-secondary);
    border: 1px solid var(--gray-300);
}

.view-mode .form-group select:not(#favoriteActionAttribute) {
    pointer-events: none;
    background-color: var(--gray-100);
    color: var(--text-secondary);
    border: 1px solid var(--gray-300);
}

/* Manual override inputs and custom health buff remain editable in view mode */
.view-mode .manual-override-input,
.view-mode #customHealthBuff {
    pointer-events: auto;
    cursor: pointer;
}

/* Favorite actions remain editable in view mode */
.view-mode #favoriteActionName,
.view-mode #favoriteActionAttribute,
.view-mode #favoriteActionTime {
    pointer-events: auto !important;
    cursor: pointer !important;
    background-color: var(--white) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}

.view-mode #addFavoriteActionBtn {
    display: inline-flex !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    opacity: 1 !important;
}

.view-mode .add-favorite-action {
    display: block !important;
}

.view-mode .favorite-action-remove button {
    pointer-events: auto;
    cursor: pointer;
}

/* Override: Show equipment fields in view mode */
.view-mode .equipment-details-full .equipment-effects textarea,
.view-mode .equipment-details-full .equipment-armor input,
.view-mode .equipment-details-full .equipment-requirement input,
.view-mode .equipment-details-full .equipment-speed-reduction input,
.view-mode .equipment-details-full .equipment-weapon-details span {
    display: block !important;
    pointer-events: none;
    background-color: var(--gray-50);
    color: var(--text-primary);
    border: 1px solid var(--gray-300);
    cursor: default;
}

/* Make character description and background story read-only in view mode */
.view-mode #charDescription,
.view-mode #charBackground {
    pointer-events: none;
    background-color: var(--gray-50);
    color: var(--text-primary);
    border: 1px solid var(--gray-300);
    cursor: default;
}

.view-mode .form-group textarea:not(#charNotes):focus,
.view-mode .form-group input:not(#charNotes):focus {
    outline: none;
    box-shadow: none;
}

.view-mode #charDescription:focus,
.view-mode #charBackground:focus {
    outline: none;
    box-shadow: none;
}

.view-mode .btn:not(.edit-mode-btn):not(.view-mode-btn):not(#addEquipmentBtn):not(#addFavoriteActionBtn):not(.favorite-action-delete-btn) {
    display: none !important;
}

/* Show equipment fields in view mode - Consolidated */
.view-mode .equipment-details-full,
.view-mode .equipment-details-full input,
.view-mode .equipment-details-full select,
.view-mode .equipment-details-full textarea,
.view-mode .equipment-details-full label,
.view-mode .equipment-details-full *,
.view-mode .equipment-details-full .weapon-detail {
    display: block !important;
}

.view-mode .equipment-details-full input,
.view-mode .equipment-details-full select,
.view-mode .equipment-details-full textarea {
    pointer-events: none;
    background-color: var(--gray-50);
    color: var(--text-primary);
    border: 1px solid var(--gray-300);
    cursor: default;
}

.view-mode .equipment-details-full label {
    color: var(--text-primary);
    font-weight: 600;
}

.view-mode .equipment-details-full .equipment-weapon-details {
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.view-mode .edit-mode-btn {
    display: inline-flex !important;
}

.edit-mode-btn {
    display: none;
}

/* View mode visual indicator */
.view-mode {
    background: rgba(248, 250, 252, 0.95);
}

/* Hide navigation in view mode */
.view-mode .character-navigation {
    display: none !important;
}

/* Edit mode: More compact navigation for consistency */
.character-navigation:not(.view-mode) {
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.character-navigation:not(.view-mode) .nav-tabs {
    gap: var(--spacing-xs);
}

.character-navigation:not(.view-mode) .nav-tabs .nav-link {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.9em;
}

/* Edit mode: Consistent page layout and spacing */
.character-sheet:not(.view-mode) {
    padding: var(--spacing-sm);
    gap: var(--spacing-sm);
}

.character-sheet:not(.view-mode) .character-content {
    margin-top: var(--spacing-sm);
}

/* Edit mode: More compact section headers */
.character-content:not(.view-mode) .section-header {
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.character-content:not(.view-mode) .section-header h3 {
    font-size: var(--font-size-lg);
    margin: 0;
}

/* One-page view mode layout - Optimized positioning */
.view-mode .character-content {
    display: grid !important;
    grid-template-columns: 180px 1fr !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 6px !important;
    padding: 6px !important;
    max-width: none !important;
    overflow-x: visible !important;
    font-size: var(--font-size-base) !important;
    line-height: 1.2 !important;
    grid-template-areas: 
        "stats combat" !important;
}

/* Show all sections in view mode - Ultra compact */
.view-mode .content-section {
    display: block !important;
    margin-bottom: 4px;
    min-height: auto;
    padding: 6px;
    font-size: var(--font-size-base);
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #fff;
    box-shadow: none;
    width: 100% !important;
}

/* Sections outside the grid use full width */
.view-mode .content-section:not(#statsSection):not(#combatSection) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
}

/* Initiative & Movement section styling */
.view-mode #initiativeMovementSection {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.view-mode .initiative-movement-section {
    display: flex !important;
    flex-direction: row !important;
    gap: var(--spacing-md) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.view-mode .initiative-group,
.view-mode .movement-group,
.view-mode .legend-points-group {
    flex: 1 !important;
    min-width: 0 !important;
}

/* Ensure new sections are properly styled */
#availableBoonsBanesSection {
    display: none;
}

#availableBoonsBanesSection.active {
    display: block;
}

/* Assign sections to specific grid areas */
.view-mode #statsSection {
    grid-area: stats !important;
    width: 180px !important;
}

.view-mode #combatSection {
    grid-area: combat !important;
    max-width: 100% !important;
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Sections after combat now use full width - no grid areas needed */



/* Ensure combat section uses proper width in edit mode */
.character-content:not(.view-mode) #combatSection {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: var(--spacing-md) !important;
    box-sizing: border-box !important;
}

/* Ensure combat-content uses proper width in edit mode */
.character-content:not(.view-mode) #combatSection .combat-content {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    gap: var(--spacing-md) !important;
    box-sizing: border-box !important;
}

/* Combat section uses single column layout in edit mode (same as view mode) */
.character-content:not(.view-mode) #combatSection .combat-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
}

/* Edit mode: Combat left and right columns */
.character-content:not(.view-mode) #combatSection .combat-left,
.character-content:not(.view-mode) #combatSection .combat-right {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spacing-sm) !important;
}

/* Edit mode: Defense stats use full width in a row (same as view mode) */
.character-content:not(.view-mode) #combatSection .defense-grid {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    width: 100% !important;
}

.character-content:not(.view-mode) #combatSection .defense-card {
    flex: 1 !important;
    min-width: 0 !important;
}

/* Ensure initiative/movement/legend points use proper width in edit mode */
.character-content:not(.view-mode) #combatSection .initiative-movement-section {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spacing-sm) !important;
    box-sizing: border-box !important;
}

.character-content:not(.view-mode) #combatSection .initiative-group,
.character-content:not(.view-mode) #combatSection .movement-group,
.character-content:not(.view-mode) #combatSection .legend-points-group {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}



/* Optimize section heights based on content */
.view-mode #statsSection {
    min-height: 400px;
    max-height: none;
    overflow-y: visible;
}

.view-mode #combatSection {
    min-height: 800px;
    max-height: none;
    overflow-y: visible;
}

/* Full-width sections after combat - no height constraints needed */

.view-mode .section-header {
    padding: 2px 4px;
    margin-bottom: 2px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
}

.view-mode .section-header h3 {
    font-size: var(--font-size-md);
    margin: 0;
    font-weight: bold;
}

.view-mode .section-content {
    padding: 1px 2px;
}

/* View mode table styling */
.view-mode .attributes-table {
    font-size: var(--font-size-base);
    margin-top: 1px;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.view-mode .attributes-table .attribute-row {
    border-bottom: 1px solid #e0e0e0;
    height: 40px;
    background: #fff;
    transition: background-color 0.2s ease;
}

.view-mode .attributes-table .attribute-row:hover {
    background: #f8f9fa;
}

.view-mode .attributes-table .attribute-row:nth-child(even) {
    background: #fafbfc;
}

.view-mode .attributes-table .attribute-row:nth-child(even):hover {
    background: #f1f3f4;
}

.view-mode .attributes-table td {
    padding: 8px 12px;
    vertical-align: middle;
    border-right: 1px solid #f0f0f0;
}

.view-mode .attributes-table td:last-child {
    border-right: none;
}

.view-mode .attributes-table .attribute-name {
    font-weight: 700;
    color: #2c3e50;
    font-size: var(--font-size-base);
    width: 75%;
    text-align: left;
    text-transform: capitalize;
    display: block;
    line-height: 1.4;
}

.view-mode .attributes-table .attribute-controls,
.view-mode .attributes-table .attribute-cost,
.view-mode .attributes-table .attribute-max,
.view-mode .attributes-table .attribute-info {
    display: none;
}

.view-mode .attributes-table td.attribute-dice.view-mode-only {
    display: table-cell !important;
    text-align: center;
    width: 25%;
    padding: 2px 4px;
    font-size: var(--font-size-xs);
    background: transparent !important;
}

.view-mode .attributes-table td.attribute-dice.view-mode-only .attribute-score {
    display: inline-block;
    font-weight: 600;
    color: #1a5a1a;
    background: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 100%);
    border-radius: 2px;
    padding: 1px 4px;
    margin-right: 2px;
    font-size: var(--font-size-xs);
    width: 20px;
    text-align: center;
}

.view-mode .attributes-table td.attribute-dice.view-mode-only .attribute-dice-inline {
    display: inline-block;
    font-weight: 600;
    color: #8b0000;
    background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
    border-radius: 2px;
    padding: 1px 4px;
    font-size: var(--font-size-xs);
    width: 28px;
    text-align: center;
}

.character-content:not(.view-mode) .attributes-table .attribute-dice.view-mode-only {
    display: none;
}

/* Style dice within attribute name cell */
/* Unique styling for inline attribute dice to prevent size regression */
.view-mode .attributes-table .attribute-name .attribute-dice-inline {
    display: none;
}

.view-mode .attributes-table .attribute-name .attribute-dice {
    display: none;
}

.view-mode .attributes-table .attribute-name .attribute-score {
    display: none;
}

/* Legacy grid fallback (no longer used) */
.view-mode .attributes-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Combat section uses 2-column layout: left (health+defense) and right (initiative+movement) */
.view-mode .combat-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
}

/* Force all combat section children to be block elements */
.view-mode #combatSection .combat-content > * {
    display: block !important;
    width: 100% !important;
    margin-bottom: 6px !important;
}

/* Override any flex properties on combat section children */
.view-mode #combatSection .combat-content > h4,
.view-mode #combatSection .combat-content > div {
    display: block !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    justify-content: unset !important;
    align-items: unset !important;
}

/* HP section styling - target all HP elements in combat-content */
.view-mode #combatSection h4:first-of-type {
    margin: 0 0 4px 0;
    text-align: left;
    height: auto !important;
    min-height: auto !important;
    max-height: 30px !important;
    line-height: 1.2 !important;
    padding: 0 !important;
}

.view-mode #combatSection .health-bar-container {
    width: 100%;
    margin-bottom: 4px;
    text-align: left !important;
}

.view-mode #combatSection .health-bar-text {
    text-align: left !important;
    font-size: var(--font-size-lg) !important;
    font-weight: 700 !important;
    color: #1a365d !important;
    background: linear-gradient(135deg, #e6fffa 0%, #b2f5ea 100%) !important;
    padding: 8px 12px !important;
    border-radius: var(--radius-lg) !important;
    border: 2px solid #38b2ac !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15) !important;
    margin-top: 4px !important;
    transition: all 0.3s ease !important;
}

.view-mode #combatSection .health-bar-text:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
}

.view-mode #combatSection .hp-display {
    display: none !important;
}

.view-mode #combatSection .hp-controls {
    width: 100%;
    margin-bottom: 4px;
    text-align: left !important;
    display: block !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    justify-content: unset !important;
    align-items: unset !important;
}

.view-mode #combatSection .damage-controls,
.view-mode #combatSection .lethal-controls {
    text-align: center !important;
}

.view-mode #combatSection .damage-input-group {
    text-align: center !important;
}

/* Defense section styling */
.view-mode #combatSection h4:nth-of-type(2) {
    margin: 8px 0 4px 0;
    text-align: left;
    width: 100%;
    height: auto !important;
    min-height: auto !important;
    max-height: 30px !important;
    line-height: 1.2 !important;
    padding: 0 !important;
}

.view-mode #combatSection .defense-grid {
    width: 100%;
    margin-left: 0;
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
}

/* Override the block display for defense-grid specifically */
.view-mode #combatSection .combat-content > .defense-grid {
    display: flex !important;
    flex-direction: row !important;
}

/* NUCLEAR OPTION: Force combat-content to be single column with maximum specificity */
.view-mode .character-content #combatSection .combat-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    grid-template-rows: none !important;
}

/* Force all direct children to be block elements with maximum specificity */
.view-mode .character-content #combatSection .combat-content > * {
    display: block !important;
    width: 100% !important;
    margin-bottom: 6px !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    justify-content: unset !important;
    align-items: unset !important;
}

/* Exception for defense-grid with maximum specificity */
.view-mode .character-content #combatSection .combat-content > .defense-grid {
    display: flex !important;
    flex-direction: row !important;
}

/* Initiative & Movement section was moved out of combat area */



/* Defense stats use horizontal layout in full width */
.view-mode .defense-grid {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    width: 100% !important;
}

.view-mode .defense-card {
    flex: 1 !important;
    min-width: 0 !important;
}

/* Standardized combat subsection styling */
.view-mode .combat-subsection {
    border: 1px solid #ddd;
    border-radius: 2px;
    background: #fff;
    padding: 3px;
    margin-bottom: 3px;
}

.view-mode .combat-subsection h4 {
    font-size: var(--font-size-base);
    margin: 0 0 2px 0;
    font-weight: bold;
    text-align: center;
    background: #f5f5f5;
    padding: 1px;
    border-radius: 1px;
}

/* HP section styling */
.view-mode .hp-display {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: var(--font-size-sm);
}

.view-mode .hp-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1px 3px;
    border: 1px solid #eee;
    border-radius: 1px;
    background: #fafafa;
}



.view-mode .defense-value {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: white;
    text-align: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 8px 12px;
    border-radius: var(--radius-lg);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border: 2px solid #4a5568;
    display: inline-block;
    transition: all 0.3s ease;
}

.view-mode .defense-value:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
}

.view-mode .defense-breakdown {
    font-size: var(--font-size-base);
    line-height: 1.3;
}

.view-mode .defense-breakdown span {
    display: block;
    margin-bottom: 3px;
    font-size: var(--font-size-base);
}

.view-mode .attack-test {
    font-size: var(--font-size-base);
    margin-top: 3px;
}

.view-mode .attack-test label {
    display: block;
    margin-bottom: 2px;
}

.view-mode .attack-test input {
    width: 100%;
    font-size: var(--font-size-base);
    padding: 2px;
    margin-bottom: 2px;
}

.view-mode .attack-test button {
    font-size: var(--font-size-base);
    padding: 2px 4px;
}

/* Initiative, Movement, and Legend Points Full Width Layout */
.view-mode .initiative-movement-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 2px;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
}

/* Initiative section styling */
.view-mode .initiative-group {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 4px 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.view-mode .initiative-group h5 {
    font-size: var(--font-size-base);
    margin: 0 0 3px 0;
    font-weight: 700;
    text-align: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2px 6px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.view-mode .initiative-display {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: #333;
}

/* Movement section styling */
.view-mode .movement-group {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 4px 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.view-mode .movement-group h5 {
    font-size: var(--font-size-base);
    margin: 0 0 3px 0;
    font-weight: 700;
    text-align: center;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    padding: 2px 6px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.view-mode .movement-stats {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.view-mode .movement-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1px 2px;
    font-size: var(--font-size-xs);
    border-bottom: 1px solid #eee;
    gap: 2px;
}

.view-mode .movement-stat:last-child {
    border-bottom: none;
}

/* Legend points section styling */
.view-mode .legend-points-group {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.view-mode .legend-points-group h5 {
    font-size: var(--font-size-base);
    margin: 0 0 3px 0;
    font-weight: 700;
    text-align: center;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    padding: 2px 6px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.view-mode .legend-points-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: #333;
    width: 100%;
    text-align: center;
}

.view-mode .legend-points-display .btn {
    padding: 2px 6px;
    font-size: var(--font-size-xs);
    min-height: 20px;
    line-height: 1;
}

/* Make equipment section ultra compact */
.view-mode .equipment-list {
    max-height: 800px;
    overflow-y: auto;
    font-size: var(--font-size-base);
}

.view-mode .equipment-item {
    padding: 1px 2px;
    margin-bottom: 1px;
    font-size: var(--font-size-base);
    border: 1px solid #eee;
    border-radius: 1px;
}

/* Make feats section ultra compact */
.view-mode .feats-list {
    max-height: 800px;
    overflow-y: auto;
    font-size: var(--font-size-base);
}

.view-mode .feat-item {
    padding: 1px 2px;
    margin-bottom: 1px;
    font-size: var(--font-size-base);
    border: 1px solid #eee;
    border-radius: 1px;
}

/* Make effects section ultra compact */
.view-mode .advantage-group {
    max-height: 400px;
    overflow-y: auto;
    font-size: var(--font-size-base);
}

.view-mode .checkbox-list {
    max-height: 400px;
    overflow-y: auto;
    font-size: var(--font-size-base);
}

/* Make character section ultra compact */
.view-mode .description-section {
    font-size: var(--font-size-base);
}

.view-mode .form-group textarea {
    min-height: 30px;
    font-size: var(--font-size-base);
    padding: 2px;
}

/* Make base actions section ultra compact */
.view-mode .actions-list {
    max-height: 800px;
    overflow-y: auto;
    font-size: var(--font-size-base);
}

/* Responsive design for precise layout */
@media (min-width: 1200px) {
    .view-mode .character-content {
        grid-template-columns: 180px 1fr;
        gap: 4px;
    }
}

@media (max-width: 1199px) {
    .view-mode .character-content {
        grid-template-columns: 150px 1fr;
        gap: 4px;
    }
    
    .view-mode #statsSection {
        width: 150px;
    }
}

@media (max-width: 768px) {
    .view-mode .character-content {
        display: block !important;
        grid-template-columns: none !important;
        grid-template-areas: none !important;
        gap: 0;
        padding: 2px;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    
    .view-mode #statsSection {
        width: 100% !important;
        margin-bottom: var(--spacing-sm);
    }
    
    .view-mode #combatSection,
    .view-mode #initiativeMovementSection,
    .view-mode #availableBoonsBanesSection,
    .view-mode #effectsSection,
    .view-mode #equipmentSection,
    .view-mode #featsSection,
    .view-mode #characterSection,
    .view-mode #baseActionsSection {
        width: 100% !important;
        margin-bottom: var(--spacing-sm);
        display: block !important;
    }

    .view-mode .content-section {
        padding: 4px;
        font-size: var(--font-size-md);
    }
    
    /* Mobile optimization for attribute categories */
    .view-mode .attribute-category h4 {
        font-size: var(--font-size-sm);
        padding: 2px 4px;
        letter-spacing: 0.5px;
    }
    
    .view-mode .attribute-category h4 i {
        display: none; /* Hide icons on mobile to save space */
    }
    
    /* More compact attribute table on mobile */
    .view-mode .attributes-table {
        font-size: var(--font-size-sm);
        margin-top: 1px;
    }
    
    .view-mode .attributes-table .attribute-row {
        height: 36px;
    }
    
    .view-mode .attributes-table td {
        padding: 6px 8px;
    }
    
    .view-mode .attributes-table .attribute-name {
        font-size: var(--font-size-sm);
    }
    
    .view-mode .attributes-table .attribute-name .attribute-score {
        font-size: var(--font-size-xs);
        padding: 1px 2px;
    }
    
    .view-mode .attributes-table .attribute-name .attribute-dice-inline {
        font-size: var(--font-size-xs);
        padding: 1px 3px;
    }
}

/* Attribute range styling */
.attribute-range {
    font-size: var(--font-size-xs);
    color: var(--primary);
    font-weight: 600;
    margin-left: var(--spacing-xs);
    background: rgba(59, 130, 246, 0.1);
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    border: 1px solid rgba(59, 130, 246, 0.3);
    display: inline-block;
}

.view-mode .attributes-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

@media (max-width: 768px) {
    .view-mode .defense-grid {
        display: flex !important;
        flex-direction: row !important;
        gap: 2px !important;
    }
    
    .view-mode .defense-card {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 2px 4px !important;
    }
    
    /* Mobile: Combat section uses single column */
    .view-mode .combat-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }
    
    .view-mode .combat-left,
    .view-mode .combat-right {
        width: 100% !important;
    }
    
    .view-mode .advantage-group {
        max-height: 300px;
    }
    
    .view-mode .checkbox-list {
        max-height: 300px;
    }
}

/* Additional ultra compact styling */
.view-mode h4, .view-mode h5 {
    font-size: var(--font-size-md);
    margin: 2px 0;
    font-weight: bold;
}

.view-mode .hp-display, .view-mode .hp-controls {
    font-size: var(--font-size-base);
    padding: 2px;
}

.view-mode .health-bar-container {
    margin: 2px 0;
}

.view-mode .health-bar-text {
    font-size: var(--font-size-base);
}

.view-mode .initiative-movement-section {
    font-size: var(--font-size-base);
}

.view-mode .movement-stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.view-mode .movement-stat {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: var(--font-size-base);
    padding: 3px 4px;
    border: 1px solid #e8e8e8;
    border-radius: 2px;
    background: #f5f5f5;
    min-height: 18px;
    margin-bottom: 2px;
    flex-wrap: wrap;
    gap: 4px;
}

.view-mode .movement-stat label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: #666;
    flex-shrink: 1;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    line-height: 1.2;
}

.view-mode .movement-stat .movement-value {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: #333;
    flex-shrink: 0;
}

.view-mode .movement-stat .movement-unit {
    font-size: var(--font-size-sm);
    color: #777;
    margin-left: 1px;
    flex-shrink: 0;
}

.view-mode .legend-points-display {
    font-size: var(--font-size-base);
    text-align: center;
}

.view-mode .boons-banes-container {
    font-size: var(--font-size-xs);
    padding: 8px;
}

.view-mode .boons-section, .view-mode .banes-section {
    margin-bottom: 8px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fafafa;
}

.view-mode .boons-section h5, .view-mode .banes-section h5 {
    font-size: var(--font-size-xs);
    margin: 4px 0 8px 0;
    font-weight: bold;
    text-align: center;
    background: #f0f0f0;
    padding: 4px;
    border-radius: 3px;
}

.view-mode .boons-list, .view-mode .banes-list {
    max-height: none;
    overflow-y: visible;
    font-size: var(--font-size-md);
    padding: 4px;
}

.view-mode .perks-flaws-section {
    font-size: var(--font-size-base);
    min-height: 200px;
}

.view-mode .perks-section, .view-mode .flaws-section {
    margin-bottom: 4px;
    min-height: 120px;
}

.view-mode .perks-list, .view-mode .flaws-list {
    max-height: 250px;
    overflow-y: auto;
    font-size: var(--font-size-sm);
}

.view-mode .character-header {
    background: var(--gray-50);
    border: 2px solid var(--gray-200);
}

.view-mode .character-header::before {
    content: "📖 View Mode";
    position: absolute;
    top: 10px;
    right: 20px;
    background: var(--gray-200);
    color: var(--gray-700);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

/* View mode specific styling for better readability */












.view-mode .attributes-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.view-mode .attribute-category {
    margin-bottom: 1px;
}

.view-mode .attribute-category h4 {
    font-size: 0.8rem;
    margin: 0 0 1px 0;
    padding: 2px 4px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
    border: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.view-mode .attribute-max {
    display: none !important;
}

.attribute-score {
    font-weight: 600;
    color: var(--white);
    font-size: var(--font-size-sm);
    text-transform: none;
    letter-spacing: normal;
    background: var(--primary-light);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    margin-left: var(--spacing-xs);
    display: inline-block;
}

/* Styling for attributes boosted by equipment */
.attribute-score.boosted-by-equipment {
    background: linear-gradient(135deg, var(--success) 0%, var(--success-color) 100%);
    color: var(--white);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    position: relative;
}

.attribute-score.boosted-by-equipment::after {
    content: "⚡";
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: var(--font-size-xs);
    background: var(--warning);
    color: var(--white);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Combat section remains mostly the same in view mode - Consolidated */
.view-mode .hp-controls,
.view-mode .healing-controls,
.view-mode .damage-controls,
.view-mode .lethal-controls,
.view-mode .reset-controls,
.view-mode .attack-test,
.view-mode .equipment-inventory .add-equipment {
    display: block !important;
}

/* Show damage/healing inputs in view mode */
.view-mode #damageInput,
.view-mode #lethalDamageInput {
    display: inline-block !important;
}

/* Show attack test inputs in view mode */
.view-mode #guardAttackTest,
.view-mode #toughnessAttackTest,
.view-mode #resolveAttackTest {
    display: inline-block !important;
}

/* Equipment item details styling for edit mode */
.equipment-item-details {
    margin-top: 15px;
    padding: 15px;
    background: #f8fafc;
    border-radius: var(--radius-lg);
    border-left: 3px solid #667eea;
}

.equipment-item-attribute,
.equipment-item-power-level {
    margin-bottom: 15px;
}

.equipment-item-attribute:last-child,
.equipment-item-power-level:last-child {
    margin-bottom: 0;
}

.equipment-item-attribute label,
.equipment-item-power-level label {
    display: block;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 8px;
    font-size: var(--font-size-base);
}

/* Equipment item edit styles - Consolidated with unified form styling above */
.equipment-item-attribute-edit,
.equipment-item-power-level-edit {
    width: 100%;
}



/* Effects section in view mode - keep everything visible */
.view-mode .advantage-group .add-item,
.view-mode .boons-banes-row .add-item {
    display: block !important;
}

/* Make select elements functional in boons/banes sections */
.view-mode .boons-banes-row select,
.view-mode .advantage-group select {
    pointer-events: auto !important;
    background-color: var(--white) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-light) !important;
}

/* Keep advantage filter and result visible in view mode */
.view-mode #advantageDisadvantageResult,
.view-mode #advantageFilter {
    display: inline-block !important;
}

.view-mode .advantage-summary {
    display: block !important;
}

/* Ensure side-by-side layout works well in view mode */
.view-mode .advantages-disadvantages-row,
.view-mode .boons-banes-row {
    display: flex;
    gap: var(--spacing-xl);
}

.view-mode .advantages-disadvantages-row .advantage-group,
.view-mode .boons-banes-row .advantage-group {
    flex: 1;
}

/* Responsive design for view mode on mobile */
@media (max-width: 768px) {
    .view-mode .advantages-disadvantages-row,
    .view-mode .boons-banes-row {
        flex-direction: column;
        gap: var(--spacing-lg);
    }
    
    .view-mode .advantages-disadvantages-row .advantage-group,
    .view-mode .boons-banes-row .advantage-group {
        min-width: auto;
    }
    
    /* Fix boons and banes section margins and width on mobile - maximize space usage */
    .view-mode .boons-banes-container {
        padding: 1px !important;
        gap: 2px !important;
        margin: 0 !important;
    }
    
    .view-mode .boons-section, 
    .view-mode .banes-section {
        margin-bottom: 1px !important;
        padding: 1px !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    
    .view-mode .boons-section h5, 
    .view-mode .banes-section h5 {
        margin: 1px 0 2px 0 !important;
        padding: 1px !important;
        font-size: var(--font-size-sm) !important;
    }
    
    .view-mode .boons-list, 
    .view-mode .banes-list {
        padding: 0 !important;
        gap: 1px !important;
        margin: 0 !important;
    }
    
    .view-mode .boon-item,
    .view-mode .bane-item {
        padding: 3px 6px !important;
        margin: 1px 0 !important;
        width: 100% !important;
        box-sizing: border-box;
        min-height: auto !important;
        font-size: var(--font-size-sm) !important;
        line-height: 1.3 !important;
    }
    
    .view-mode .boon-item .boon-name,
    .view-mode .bane-item .bane-name {
        font-size: var(--font-size-sm) !important;
        margin-bottom: 2px !important;
    }
    
    .view-mode .boon-item .boon-description,
    .view-mode .bane-item .bane-description {
        font-size: var(--font-size-sm) !important;
        line-height: 1.3 !important;
    }
    
    /* Fix expanded state width and spacing on mobile */
    .view-mode .boon-item.expanded,
    .view-mode .bane-item.expanded {
        width: 100% !important;
        max-width: 100% !important;
        padding: 2px 3px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    
    .view-mode .boon-item.expanded .boon-details,
    .view-mode .bane-item.expanded .bane-details {
        padding: 2px 3px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .view-mode .boon-item.expanded .detail-section,
    .view-mode .bane-item.expanded .detail-section {
        margin-bottom: 2px !important;
        padding: 1px 0 !important;
    }
    
    .view-mode .boon-item.expanded .detail-section h6,
    .view-mode .bane-item.expanded .detail-section h6 {
        margin: 0 0 2px 0 !important;
        font-size: var(--font-size-sm) !important;
    }
}

/* Character section in view mode */
.view-mode .description-section .form-group:not(:has(#charNotes)) {
    opacity: 0.8;
}

.view-mode .description-section .form-group:not(:has(#charNotes)) label {
    color: var(--text-secondary);
}

/* Character layout - side by side */
.view-mode .character-layout {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.view-mode .character-image-section {
    flex: 0 0 200px;
}

.view-mode .character-text-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.view-mode .character-text-section .form-group {
    margin-bottom: 0;
}

.view-mode .character-text-section textarea {
    font-size: var(--font-size-base);
    padding: 4px;
    line-height: 1.2;
    min-height: 50px;
}



/* Keep additional notes editable in view mode */
.view-mode #charNotes {
    background-color: var(--white);
    border-color: var(--primary-500);
    pointer-events: auto;
    cursor: text;
}

.view-mode .form-group:has(#charNotes) {
    opacity: 1 !important;
}

.view-mode .form-group:has(#charNotes) label {
    color: var(--text-primary) !important;
    font-size: var(--font-size-base);
    margin-bottom: 2px;
}

.view-mode .form-group:has(#charNotes) textarea {
    display: block !important;
    visibility: visible !important;
    opacity: 0.8 !important;
    background-color: var(--gray-100) !important;
    border: 1px solid var(--gray-300) !important;
    color: var(--text-secondary) !important;
    font-size: var(--font-size-base) !important;
    padding: 4px !important;
    line-height: 1.2 !important;
    min-height: 50px !important;
    width: 100% !important;
    pointer-events: auto !important;
    cursor: text !important;
}

/* Tab navigation remains active in view mode */
.view-mode .nav-tabs {
    pointer-events: auto;
}

.view-mode .nav-tab {
    cursor: pointer;
}

/* Smooth transitions for view mode changes */
.content-section,
.attribute-card,
.form-group,
.btn {
    transition: all var(--transition-base);
}

/* View mode element visibility - Consolidated */
.view-mode .view-mode-help,
.view-mode #featsSection .remove-item,
.view-mode .perks-flaws-section .remove-item {
    display: none !important;
}

.view-mode .advantages-section .remove-advantage-btn,
.view-mode .advantages-section .remove-disadvantage-btn {
    display: inline-flex !important;
}

/* Keep expandable items functional in view mode */
.view-mode .boon-item,
.view-mode .bane-item,
.view-mode .perk-item,
.view-mode .flaw-item {
    cursor: pointer;
    pointer-events: auto;
    padding: 6px 10px;
    margin: 2px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    font-size: var(--font-size-md);
    line-height: 1.3;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Override for mobile to ensure consistent width */
@media (max-width: 768px) {
    .view-mode .boon-item,
    .view-mode .bane-item,
    .view-mode .perk-item,
    .view-mode .flaw-item {
        padding: 3px 6px !important;
        margin: 1px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-height: auto !important;
        font-size: var(--font-size-sm) !important;
    }
}

@media (max-width: 480px) {
    .view-mode .boon-item,
    .view-mode .bane-item,
    .view-mode .perk-item,
    .view-mode .flaw-item {
        padding: 2px 4px !important;
        margin: 1px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-height: auto !important;
        font-size: var(--font-size-xs) !important;
    }
}

.view-mode .boon-item:hover,
.view-mode .bane-item:hover,
.view-mode .perk-item:hover,
.view-mode .flaw-item:hover {
    border-color: #007acc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.view-mode .boon-item .boon-name,
.view-mode .bane-item .bane-name {
    font-weight: bold;
    font-size: var(--font-size-xs);
    margin-bottom: 3px;
    color: #333;
}

.view-mode .boon-item .boon-description,
.view-mode .bane-item .bane-description {
    font-size: var(--font-size-base);
    color: #666;
    line-height: 1.3;
    flex: 1;
}

/* Base Actions Section */
.base-actions-section {
    padding: var(--spacing-md);
}

.action-duration-filter {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
}

.action-duration-filter label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.action-duration-filter select {
    width: 100%;
    max-width: 300px;
    padding: var(--spacing-sm);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    background: var(--white);
    font-size: var(--font-size-base);
}

.actions-list {
    display: grid;
    gap: var(--spacing-md);
}

.action-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.action-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.action-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-sm);
}

.action-name {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.action-duration-badge {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Action duration badge variants - Consolidated */
.action-duration-badge.free-action {
    background: var(--green-100);
    color: var(--green-700);
    border: 1px solid var(--green-200);
}

.action-duration-badge.minor-action {
    background: var(--blue-100);
    color: var(--blue-700);
    border: 1px solid var(--blue-200);
}

.action-duration-badge.movement-action {
    background: var(--yellow-100);
    color: var(--yellow-700);
    border: 1px solid var(--yellow-200);
}

.action-duration-badge.major-action {
    background: var(--red-100);
    color: var(--red-700);
    border: 1px solid var(--red-200);
}

.action-duration-badge.focus-action {
    background: var(--purple-100);
    color: var(--purple-700);
    border: 1px solid var(--purple-200);
}

.action-duration-badge.interrupt-action {
    background: var(--orange-100);
    color: var(--orange-700);
    border: 1px solid var(--orange-200);
}

/* Feat Notes Styling */
.feat-notes-section {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
}

/* Well-Rounded Feat Description Styling */
.feat-description-section {
    margin: var(--spacing-sm) 0;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(245, 158, 11, 0.05);
    border-left: 2px solid var(--feat-color);
    border-radius: var(--radius-sm);
}

.feat-description-content h4 {
    color: var(--feat-dark);
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin: 0 0 var(--spacing-xs) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.feat-description-content h4 i {
    color: var(--feat-color);
    font-size: var(--font-size-xs);
}

.feat-description-text {
    color: var(--gray-600);
    font-size: var(--font-size-xs);
    line-height: 1.4;
    margin: 0;
    font-style: italic;
}

/* Effective Wealth Display */
.effective-wealth-display {
    color: var(--feat-color);
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-left: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(245, 158, 11, 0.1);
    border-radius: var(--radius-sm);
    border: 1px solid var(--feat-color);
}

/* Wealth Level Section */
.wealth-level-section {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
}

.wealth-level-section h4 {
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0 0 var(--spacing-md) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.wealth-level-section h4::before {
    content: "💰";
    font-size: var(--font-size-lg);
}

.wealth-level-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md);
}

.wealth-level-controls label {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}

.wealth-level-controls .wealth-input {
    width: 60px;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    text-align: center;
    font-weight: 500;
}

.wealth-level-controls .wealth-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.wealth-level-controls .wealth-checkbox input[type="checkbox"] {
    margin: 0;
}

/* Defensive Weapon Bonus Note Styling */
.defensive-bonus-note {
    color: var(--primary);
    font-size: 0.85em;
    font-style: italic;
    margin-left: var(--spacing-xs);
    opacity: 0.9;
}

/* Feat Icon Styling */
.feat-icon {
    display: inline-block;
    margin-left: var(--spacing-xs);
    font-size: 1.2em; /* Increased from 0.9em to match feat-indicator */
    color: #ffd700; /* Yellow color */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); /* Enhanced shadow */
    cursor: pointer; /* Changed from help to pointer */
    transition: all 0.2s ease; /* Enhanced transition */
    vertical-align: middle;
    line-height: 1;
    padding: 2px 4px; /* Added padding for button-like appearance */
    border-radius: 4px; /* Rounded corners */
    background: rgba(255, 215, 0, 0.1); /* Subtle background */
    border: 1px solid rgba(255, 215, 0, 0.3); /* Subtle border */
    user-select: none; /* Prevent text selection */
}

.feat-icon:hover {
    transform: scale(1.15); /* Increased scale */
    background: rgba(255, 215, 0, 0.2); /* More prominent background on hover */
    border-color: rgba(255, 215, 0, 0.5); /* More prominent border on hover */
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3); /* Glow effect */
}

.feat-icon:active {
    transform: scale(1.05); /* Slight press effect */
    background: rgba(255, 215, 0, 0.3); /* Even more prominent when pressed */
}

/* Feat icon on its own line */
.attribute-name .feat-icon {
    margin-left: 0; /* Remove left margin when on its own line */
    margin-top: 2px; /* Small top margin for spacing */
    display: inline-block;
}

.feat-indicator {
    display: inline-block;
    margin-left: var(--spacing-xs);
    font-size: 1.2em; /* Increased from 0.9em */
    color: #ffd700; /* Yellow color */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    cursor: pointer;
    transition: all 0.2s ease;
    vertical-align: middle;
    line-height: 1;
    padding: 2px 4px; /* Added padding for button-like appearance */
    border-radius: 4px; /* Rounded corners */
    background: rgba(255, 215, 0, 0.1); /* Subtle background */
    border: 1px solid rgba(255, 215, 0, 0.3); /* Subtle border */
    user-select: none; /* Prevent text selection */
}

.feat-indicator:hover {
    transform: scale(1.15); /* Increased scale */
    background: rgba(255, 215, 0, 0.2); /* More prominent background on hover */
    border-color: rgba(255, 215, 0, 0.5); /* More prominent border on hover */
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3); /* Glow effect */
}

.feat-indicator:active {
    transform: scale(1.05); /* Slight press effect */
    background: rgba(255, 215, 0, 0.3); /* Even more prominent when pressed */
}

/* Attribute Substitution controls */
.attribute-substitution-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 5px;
    border: 1px solid #dee2e6;
}

.substitution-dropdown {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.substitution-dropdown label {
    font-weight: bold;
    color: #495057;
    font-size: 0.9em;
}

.substitution-dropdown select {
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
    font-size: 0.9em;
}

.substitution-dropdown select:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Bane Focus controls */
.bane-focus-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 5px;
    border: 1px solid #dee2e6;
}

.bane-focus-dropdown {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bane-focus-dropdown label {
    font-weight: bold;
    color: #495057;
    font-size: 0.9em;
}

.bane-focus-dropdown select {
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
    font-size: 0.9em;
}

.bane-focus-dropdown select:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Battlefield Punisher controls */
.battlefield-punisher-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 5px;
    border: 1px solid #dee2e6;
}

.battlefield-punisher-dropdown {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.battlefield-punisher-dropdown label {
    font-weight: bold;
    color: #495057;
    font-size: 0.9em;
}

.battlefield-punisher-dropdown select {
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
    font-size: 0.9em;
}

.battlefield-punisher-dropdown select:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Boon Access controls */
.boon-access-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 5px;
    border: 1px solid #dee2e6;
}

.boon-access-dropdown {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.boon-access-dropdown label {
    font-weight: bold;
    color: #495057;
    font-size: 0.9em;
}

.boon-access-dropdown select {
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
    font-size: 0.9em;
}

.boon-access-dropdown select:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Boon Focus controls */
.boon-focus-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 5px;
    border: 1px solid #dee2e6;
}

.boon-focus-dropdown {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.boon-focus-dropdown label {
    font-weight: bold;
    color: #495057;
    font-size: 0.9em;
}

.boon-focus-dropdown select {
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
    font-size: 0.9em;
}

.boon-focus-dropdown select:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Extraordinary Focus dropdown styles */
.extraordinary-focus-controls {
    margin-bottom: 15px;
}

.extraordinary-focus-dropdown {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.extraordinary-focus-dropdown label {
    font-weight: bold;
    color: #495057;
    font-size: 0.9em;
}

.extraordinary-focus-dropdown select {
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
    font-size: 0.9em;
}

.extraordinary-focus-dropdown select:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Extraordinary Focus indicator styles */
.extraordinary-focus-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
}

/* Martial Focus indicator styles */
.martial-focus-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
}

/* Multi-Bane Specialist dropdown styles */
.multi-bane-specialist-controls {
    margin-bottom: 15px;
}

.multi-bane-specialist-dropdown {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
}

.multi-bane-specialist-dropdown label {
    font-weight: bold;
    color: #495057;
    font-size: 0.9em;
}

.multi-bane-specialist-dropdown select {
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
    font-size: 0.9em;
}

.multi-bane-specialist-dropdown select:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Potent Bane dropdown styles */
.potent-bane-controls {
    margin-bottom: 15px;
}

.potent-bane-dropdown {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.potent-bane-dropdown label {
    font-weight: bold;
    color: #495057;
    font-size: 0.9em;
}

.potent-bane-dropdown select {
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
    font-size: 0.9em;
}

.potent-bane-dropdown select:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Skill Specialization dropdown styles */
.skill-specialization-controls {
    margin-bottom: 15px;
}

.skill-specialization-dropdown {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.skill-specialization-dropdown label {
    font-weight: bold;
    color: #495057;
    font-size: 0.9em;
}

.skill-specialization-dropdown select {
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: white;
    font-size: 0.9em;
}

.skill-specialization-dropdown select:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Skill Specialization indicator styles */
.skill-specialization-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
}

/* Popup styles */
.feat-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(20, 25, 35, 0.95); /* Darker, more opaque background */
    border: 2px solid var(--feat-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); /* Stronger shadow */
    backdrop-filter: blur(15px); /* More blur for better contrast */
}

.feat-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    backdrop-filter: blur(5px);
}

.feat-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--feat-color);
    padding-bottom: var(--spacing-sm);
}

.feat-popup-title {
    color: var(--feat-color);
    font-size: var(--font-size-lg);
    font-weight: bold;
    margin: 0;
}

.feat-popup-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.feat-popup-close:hover {
    background: var(--feat-color);
    color: var(--bg-primary);
}

.feat-popup-content {
    color: #ffffff; /* Pure white for better contrast */
    line-height: 1.6;
    font-size: 16px; /* Slightly larger for readability */
}

.feat-popup-content h4 {
    color: var(--feat-color);
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    font-size: 18px; /* Larger heading */
}

.feat-popup-content p {
    margin-bottom: var(--spacing-sm);
    color: #f0f0f0; /* Slightly off-white for better readability */
}

.feat-popup-content strong {
    color: var(--feat-color);
    font-weight: 600; /* Bolder text */
}

.cumulative-effects {
    background: rgba(255, 215, 0, 0.05); /* Subtle background */
    border-left: 3px solid var(--feat-color);
    padding: var(--spacing-sm);
    margin: var(--spacing-sm) 0;
    border-radius: 4px;
}

.cumulative-effects strong {
    color: var(--feat-color);
    font-weight: 600;
}

/* Fix list styling in cumulative effects */
.cumulative-effects ul {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
    list-style-type: disc;
}

.cumulative-effects li {
    margin-bottom: var(--spacing-xs);
    line-height: 1.4;
    padding-left: var(--spacing-xs);
}

.cumulative-effects ul ul {
    margin: var(--spacing-xs) 0;
    padding-left: var(--spacing-md);
}

.cumulative-effects ul ul li {
    list-style-type: circle;
}

.cumulative-effects ul ul ul li {
    list-style-type: square;
}

.tier-effect {
    margin: var(--spacing-sm) 0;
    padding: var(--spacing-xs);
    border-left: 2px solid var(--feat-color);
    padding-left: var(--spacing-sm);
}

.tier-effect strong {
    color: var(--feat-color);
    font-weight: 600;
}

/* Fix list styling in tier effects */
.tier-effect ul {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
    list-style-type: disc;
}

.tier-effect li {
    margin-bottom: var(--spacing-xs);
    line-height: 1.4;
    padding-left: var(--spacing-xs);
}

.tier-effect ul ul {
    margin: var(--spacing-xs) 0;
    padding-left: var(--spacing-md);
}

.tier-effect ul ul li {
    list-style-type: circle;
}

.tier-effect ul ul ul li {
    list-style-type: square;
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    .feat-popup {
        margin: var(--spacing-md);
        max-width: calc(100vw - 2 * var(--spacing-md));
        padding: var(--spacing-md);
    }
    
    .feat-popup-title {
        font-size: var(--font-size-md);
    }
}

.feat-note {
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-sm);
    line-height: 1.4;
    color: var(--text-secondary);
}

.feat-note:last-child {
    margin-bottom: 0;
}

.feat-note strong {
    color: var(--primary);
    font-weight: 600;
}

/* Duration Sections Styling */
.duration-section {
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Ensure base actions section is hidden when not active */
#baseActionsSection:not(.active) {
    display: none !important;
}

.duration-header {
    background: var(--gray-50);
    padding: var(--spacing-md);
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid var(--gray-200);
}

.duration-header:hover {
    background: var(--gray-100);
}

.duration-title {
    margin: 0;
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.category-description {
    margin: var(--spacing-xs) 0 0 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.4;
}

.duration-icon {
    color: var(--primary-500);
    transition: transform 0.2s ease;
}

.duration-content {
    padding: var(--spacing-md);
    background: var(--white);
}

.action-description {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* View mode styling for Base Actions */
.view-mode .base-actions-section {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.view-mode .action-duration-filter {
    background: var(--gray-100);
    border-color: var(--gray-300);
}

.view-mode .action-card {
    border-color: var(--gray-300);
    background: var(--gray-50);
}

.view-mode .action-card:hover {
    background: var(--white);
    border-color: var(--primary-300);
}

/* Hide form fields in view mode */
.view-mode .equipment-details-full {
    display: none !important;
}

/* Responsive design for character cards - Consolidated with main responsive section above */

/* Duplicate removed - consolidated above */

/* Show compact details in view mode */
.view-mode .equipment-details-compact {
    display: flex !important;
}

/* Remove the equipment-details div wrapper in view mode but keep content visible */
.view-mode .equipment-details {
    display: contents !important;
}

/* Clickable Properties Styling */
.clickable-property {
    cursor: pointer;
    transition: all var(--transition-base);
    border-bottom: 1px dotted var(--primary-color);
    padding-bottom: 1px;
}

.clickable-property:hover {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background-color: var(--primary-color-light);
    border-radius: var(--radius-sm);
    padding: 2px 4px;
    margin: -2px -4px;
}

.clickable-property:active {
    transform: translateY(1px);
}

/* Property Modal Styling */
.property-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.property-modal-content {
    background-color: var(--white);
    margin: 5% auto;
    padding: 0;
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 600px;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-color);
    animation: modalSlideIn 0.3s ease-out;
}

.property-modal .modal-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-light) 100%);
    color: var(--white);
    padding: var(--spacing-lg) var(--spacing-xl);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.property-modal .modal-header h3 {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: 600;
}

.property-modal .modal-body {
    padding: var(--spacing-xl);
    line-height: 1.6;
    color: var(--text-primary);
}

.property-modal .modal-body p {
    margin: 0;
    font-size: var(--font-size-base);
}

.property-modal .close {
    color: var(--white);
    font-size: var(--font-size-2xl);
    font-weight: bold;
    cursor: pointer;
    transition: opacity var(--transition-base);
    opacity: 0.8;
}

.property-modal .close:hover {
    opacity: 1;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Footer Section Styling */
.footer-section {
    margin-top: auto;
    padding: var(--spacing-lg) var(--spacing-xl);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    display: none; /* Hidden by default */
}

/* Show footer when main page is visible */
body.showing-main-page .footer-section {
    display: block;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: center;
}

.footer-links {
    display: flex;
    gap: var(--spacing-lg);
    justify-content: center;
    margin-bottom: var(--spacing-sm);
}

.footer-link {
    color: var(--white);
    text-decoration: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
    font-size: var(--font-size-sm);
    opacity: 0.9;
    background: linear-gradient(135deg, var(--secondary) 0%, var(--gray-600) 100%);
    border: 1px solid var(--gray-500);
    box-shadow: var(--shadow-sm);
    display: inline-block;
    font-weight: 500;
}

.footer-link:hover {
    color: var(--white);
    background: linear-gradient(135deg, var(--gray-600) 0%, var(--secondary) 100%);
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: var(--gray-400);
}

.footer-link i {
    margin-right: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

.footer-link:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.footer-link:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.footer-text {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    opacity: 0.6;
}

.footer-text p {
    margin: 0;
}

/* Ensure footer stays at bottom */
#app {
    flex: 1;
    display: flex;
    flex-direction: column;
}