/* THEME: SOFT RESET / BASE */
/* Load this BEFORE your specific theme, or keep it active in the background. */

/* 1. CONTAINER DEFAULTS */
.character-card {
    /* Reset geometric distortions */
    transform: none;
    clip-path: none;
    mask: none;
    
    /* Reset visual effects */
    backdrop-filter: none;
    box-shadow: none;
    background-image: none;
    
    /* Reset borders and spacing */
    border-radius: 0;
    margin: 0;
    
    /* Set a safe fallback background (so it's not invisible if a theme fails) */
    background-color: #ffffff; 
    color: #000000;
    
    /* Typography defaults */
    font-family: sans-serif;
    letter-spacing: normal;
    text-shadow: none;
}

/* 2. HEADER DEFAULTS */
.char-name {
    transform: none;
    text-shadow: none;
    letter-spacing: normal;
    text-transform: none;
    border: none;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    margin-top: 0;
}

/* 3. BUTTON DEFAULTS */
.actions {
    transform: none;
    gap: 5px;
    border: none;
}

.action-btn {
    transform: none;
    clip-path: none;
    box-shadow: none;
    border-radius: 0;
    
    /* Neutral button styling */
    background-color: #f0f0f0; 
    color: #000;
    border: 1px solid #999;
    
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
}

/* 4. INPUT DEFAULTS */
.form-grid {
    transform: none;
}

.theme-input {
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 0;
    box-shadow: none;
    color: #000;
    width: 100%;
}

/* 5. BAR DEFAULTS */
.bar-bg {
    transform: none;
    border-radius: 0;
    box-shadow: none;
    background-color: #e0e0e0;
    border: 1px solid #000;
    height: 10px;
}

.hp-fill, .mp-fill {
    box-shadow: none;
    background-image: none;
}/* THEME: SUAVE CORPORATE */
:root {
    --corp-blue: #0056b3;
    --corp-dark: #343a40;
    --corp-gray: #6c757d;
    --corp-bg: #f8f9fa;
    --corp-border: #dee2e6;
    --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.character-card {
    /* RESET RULES */
    transform: none;
    clip-path: none;
    backdrop-filter: none;
    text-shadow: none;
    margin: 0;

    /* LAYOUT */
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;

    /* STYLE */
    background-color: #fff;
    color: var(--corp-dark);
    border: 1px solid var(--corp-border);
    border-top: 4px solid var(--corp-blue); /* Professional accent top bar */
    border-radius: 4px;
    padding: 24px;
    font-family: var(--font-stack);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.char-name {
    transform: none;
    margin-top: 0;
    font-weight: 600;
    color: var(--corp-dark);
    border-bottom: 1px solid var(--corp-border);
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.actions {
    transform: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 25px;
    border-top: 1px solid var(--corp-border);
    padding-top: 20px;
}

.action-btn {
    clip-path: none;
    flex: 1 0 auto;
    background: #fff;
    color: var(--corp-blue);
    border: 1px solid var(--corp-blue);
    border-radius: 4px;
    padding: 8px 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn:hover {
    background: var(--corp-blue);
    color: #fff;
}

/* FORM INPUTS */
.form-grid { display: flex; flex-wrap: wrap; gap: 15px; transform: none; }
.input-group { flex: 1 1 45%; }
.full-width { flex: 1 1 100%; }

.theme-input {
    background: #fff;
    border: 1px solid #ced4da;
    color: #495057;
    font-family: var(--font-stack);
    padding: 6px 12px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 4px;
}
.theme-input:focus { border-color: #80bdff; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); }

/* BARS */
.bar-bg { transform: none; background: #e9ecef; height: 8px; width: 100%; margin-bottom: 8px; border-radius: 4px; overflow: hidden;}
.hp-fill { height: 100%; background-color: #28a745; }
.mp-fill { height: 100%; background-color: var(--corp-blue); }
.stats-row { display: flex; gap: 10px; width: 100%; margin: 10px 0; }
.stat-box { flex: 1; text-align: center; }