:root {
        /* Colores Base (Violeta por defecto) */
        --primary-h: 255;
        --primary-s: 35%;
        --primary-l: 48%;

        --md-sys-color-primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
        --md-sys-color-on-primary: #FFFFFF;
        --md-sys-color-surface: #FEF7FF;
        --md-sys-color-surface-variant: #E7E0EC;
        --md-sys-color-outline: #79747E;
        --md-sys-color-secondary-container: hsl(var(--primary-h), var(--primary-s), 92%);
        
        --md-sys-color-success-subtle: #e8f5e9;
        --md-sys-color-success-text: #2e7d32;
        --md-sys-color-error-subtle: #ffebee;
        --md-sys-color-error-text: #c62828;
        
        --bg-gradient: linear-gradient(180deg, #f7f9fc, #eef2f7);
        --card-bg: #FFFFFF;
        --text-main: #1f2937;
        --text-secondary: #4b5563;
        --nav-bg: #FFFFFF;


        --textcolor: #6366f1;
        --footercolor:#9ca3af;
        --backgroundmain: linear-gradient(180deg, #f7f9fc, #eef2f7);



    }

    /* Variaciones para Modo Oscuro */
    [data-theme="dark"] {
        --md-sys-color-surface: #1C1B1F;
        --md-sys-color-surface-variant: #49454F;
        --md-sys-color-outline: #938F99;
        --md-sys-color-secondary-container: hsl(var(--primary-h), var(--primary-s), 25%);
        --bg-gradient: linear-gradient(180deg, #121212, #1a1a1a);
        --card-bg: #252429;
        --text-main: #E6E1E5;
        --text-secondary: #CAC4D0;
        --nav-bg: #1C1B1F;
    }

    body {
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 100vh;
        background-color: var(--md-sys-color-surface);
        background-image: var(--bg-gradient);
        font-family: 'Roboto', sans-serif;
        color: var(--text-main);
        overflow-x: hidden;
        transition: background 0.3s, color 0.3s;
    }

    nav {
        background-color:var(--bg-gradient);
        padding:10px 15px;
        display: flex;
        width: 100%;
        max-width: 1200px;
        box-sizing: border-box;
        justify-content: space-around;
        align-items: center;
        z-index: 10;
        width: 100%;
    }

    nav a{text-decoration: none;}


   
    nav h1 { font-weight: 700; font-size: 1.1rem; color: var(--md-sys-color-primary); margin: 0; }
    nav div a, nav a { text-decoration: none; margin-left: 1.5rem; font-weight: 500; color: var(--text-secondary); }

    .header { margin-top: 20px; text-align: center; }

    /* Estilos del Panel de Donación */
    .donation-section {
        width: 100%;
        height: 400px;
        max-width: 600px;
        margin: 15px 0;
        background: var(--card-bg);
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        max-height: 1000px;
    }

    .donation-section.collapsed {
        max-height: 0;
        margin: 0;
        opacity: 0;
        pointer-events: none;
    }

    .donation-content {
        padding: 20px;
        text-align: center;
    }

    .donation-title {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--md-sys-color-primary);
        margin-bottom: 15px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .qr-divider {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
    }

    .qr-container {
        flex: 1;
        min-width: 140px;
        max-width: 200px;
        background: #f9f9f9;
        padding: 10px;
        border-radius: 16px;
        border: 1px solid var(--md-sys-color-surface-variant);
    }

    .qr-image {
        width: 100%;
        height: auto;
        border-radius: 8px;
        display: block;
    }

    .qr-label {
        font-size: 0.75rem;
        font-weight: 600;
        margin-top: 8px;
        color: var(--text-secondary);
    }

    .btn-toggle-donation {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--md-sys-color-secondary-container);
        color: var(--md-sys-color-primary);
        border: none;
        padding: 8px 20px;
        border-radius: 20px;
        font-weight: 600;
        cursor: pointer;
        margin-bottom: 20px;
        transition: transform 0.2s;
        animation: uwu 2s infinite forwards;

    }

    .btn-toggle-donation:hover { transform: scale(1.02); }
    .btn-toggle-donation .material-icons { font-size: 18px; }

    .mode-selector {
        display: flex;
        gap: 10px;
        margin-bottom: 15px;
        background: var(--md-sys-color-surface-variant);
        padding: 5px;
        border-radius: 12px;
    }

    .mode-btn {
        border: none;
        padding: 10px 20px;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.3s;
        background: transparent;
        color: var(--text-secondary);
    }

    .mode-btn.active {
        background: var(--card-bg);
        color: var(--md-sys-color-primary);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .score-panel {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
        font-weight: 500;
        background: var(--card-bg);
        padding: 10px 25px;
        border-radius: 30px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        color: var(--text-secondary);
    }

    .score-item { display: flex; align-items: center; gap: 8px; }
    .score-count { font-size: 1.2rem; font-weight: 700; color: var(--text-main); }
    .text-neutral { color: var(--md-sys-color-outline); }
    
    .btn-view-errors {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--md-sys-color-primary);
        display: flex;
        align-items: center;
        padding: 2px;
        border-radius: 50%;
        transition: background 0.2s;
    }
    .btn-view-errors:hover { background: var(--md-sys-color-surface-variant); }

    .card-container {
        width: 320px;
        height: 400px;
        perspective: 1000px;
        cursor: pointer;
        margin-bottom: 20px;
    }

    .card {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 28px;
    }

    .card.is-flipped { transform: rotateY(180deg); }

.card-face{       
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 28px;
    box-shadow: 0px 10px 25px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.1);
}

    .card-front { background-color: var(--md-sys-color-secondary-container); }
    .card-back { background-color: var(--card-bg); transform: rotateY(180deg); }

    .character { font-family: 'Noto Sans JP', sans-serif; font-size: 110px; margin: 0; color: var(--text-main); }
    .romaji { font-size: 70px; font-weight: 700; color: var(--md-sys-color-primary); }

    .eval-controls {
        display: flex;
        gap: 15px;
        width: 320px;
        margin-bottom: 20px;
    }

    .eval-btn {
        flex: 1;
        border: none;
        padding: 12px;
        border-radius: 12px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        font-weight: 600;
        font-size: 0.75rem;
        transition: all 0.2s;
    }

    .btn-error { 
        background-color: var(--md-sys-color-error-subtle); 
        color: var(--md-sys-color-error-text);
    }
    
    .btn-success { 
        background-color: var(--md-sys-color-success-subtle); 
        color: var(--md-sys-color-success-text);
    }

    .eval-btn:hover { opacity: 0.8; }
    .eval-btn:active { transform: scale(0.96); }

    .controls { display: flex; gap: 15px; align-items: center; }

    .btn {
        background-color: var(--md-sys-color-primary);
        color: var(--md-sys-color-on-primary);
        border: none;
        padding: 12px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
    }

    .progress { margin-top: 15px; color: var(--md-sys-color-outline); font-weight: 500; font-size: 0.85rem; }

    /* Panel Lateral de Errores */
    .error-drawer {
        position: fixed;
        top: 0;
        right: 0;
        width: 320px;
        height: 100vh;
        background: var(--card-bg);
        box-shadow: -5px 0 25px rgba(0,0,0,0.2);
        z-index: 100;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        padding: 20px;
        box-sizing: border-box;
    }

    .error-drawer.open { transform: translateX(0); }

    .drawer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid var(--md-sys-color-surface-variant);
    }

    .drawer-header h2 { margin: 0; font-size: 1.2rem; color: var(--text-main); }

    .error-list {
        flex: 1;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .error-item {
        background: var(--md-sys-color-surface-variant);
        padding: 12px 20px;
        border-radius: 12px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .error-kana { font-family: 'Noto Sans JP', sans-serif; font-size: 1.4rem; font-weight: 700; color: var(--text-main); }
    .error-romaji { font-size: 0.9rem; color: var(--md-sys-color-primary); font-weight: 600; text-transform: uppercase; }

    /* Botón Flotante (FAB) de Temas */
    .fab-container {
        position: fixed;
        bottom: 30px;
        right: 30px;
        z-index: 200;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 15px;
    }

    .fab-main {
        width: 56px;
        height: 56px;
        border-radius: 16px;
        background-color: var(--md-sys-color-primary);
        color: var(--md-sys-color-on-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        cursor: pointer;
        transition: transform 0.3s;
    }
    .fab-main:hover { transform: scale(1.05); }

    .theme-menu {
        background: var(--card-bg);
        border-radius: 20px;
        padding: 20px;
        box-shadow: 0 8px 30px rgba(0,0,0,0.3);
        width: 200px;
        display: none;
        flex-direction: column;
        gap: 15px;
        transform-origin: bottom right;
        animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .theme-menu.active { display: flex; }

    @keyframes popIn {
        from { transform: scale(0.5); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }

    .theme-section-title {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--md-sys-color-outline);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 5px;
    }

    .brightness-options {
        display: flex;
        justify-content: space-between;
        background: var(--md-sys-color-surface-variant);
        padding: 4px;
        border-radius: 10px;
    }

    .brightness-btn {
        border: none;
        background: none;
        padding: 8px;
        border-radius: 8px;
        cursor: pointer;
        color: var(--text-secondary);
        display: flex;
        transition: all 0.2s;
    }

    .brightness-btn.active {
        background: var(--card-bg);
        color: var(--md-sys-color-primary);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .color-options {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
    }

    .color-swatch {
        width: 100%;
        aspect-ratio: 1;
        border-radius: 50%;
        cursor: pointer;
        border: 2px solid transparent;
        transition: transform 0.2s;
    }
    .color-swatch.active { border-color: var(--text-main); transform: scale(1.1); }

    footer {
        margin-top: auto;
        background: #111827;
        color: #9ca3af;
        text-align: center;
        padding: 10px;
        width: 100%;
        box-sizing: border-box;
    }

    footer a { text-decoration: none; color: white; font-weight: 500; }

    .toast {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: #333;
        color: white;
        padding: 10px 20px;
        border-radius: 20px;
        opacity: 0;
        transition: opacity 0.3s;
        pointer-events: none;
        z-index: 110;
    }




    .nu, .paypal{
        display: flex;
        flex-direction: column;
        background: linear-gradient(90deg, #4f46e5, #b80cc1);
        border-radius: 10px;
        padding: 10px;
        color: white;
        animation: uwu 2s infinite forwards;


    }

    .paypal {
        background: rgb(240, 240, 240);
        color: black;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        animation: none;

    }

    .izquierda{
        transform: translateX(-80px);
        line-height: .5;
        display: flex;
        flex-direction: column;
        justify-content: left;
        align-items: left;
        padding: 10px;
    }



    @keyframes uwu {
  0%{transform: scale(.95);}
  50%{transform: scale(1);}
  100%{transform: scale(.95);}

  
}