* {
    box-sizing: border-box;
}


:root {
    --bg-primary: #ffffff;
    --bg-secondary: #ffffff;
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --text-primary: #000000;
    --text-secondary: #666666;
    --border-color: #000000;
    --shadow-color: #000000;
    --hover-bg: #f0f0f0;
    --input-bg: #ffffff;
}

body.theme-dark, body.dark-mode {
    --bg-primary: #121212;
    --bg-secondary: #1e1e1e;
    --bg-overlay: rgba(18, 18, 18, 0.95);
    --text-primary: #e5e5e5;
    --text-secondary: #a0a0a0;
    --border-color: #404040;
    --shadow-color: #000000;
    --hover-bg: #2d2d2d;
    --input-bg: #121212;
}



body.theme-autumn {
    --bg-primary: #c25e29;
    --bg-secondary: #f4ebd8;
    --bg-overlay: rgba(194, 94, 41, 0.95);
    --text-primary: #2d1b0f;
    --text-secondary: #5c3924;
    --border-color: #2d1b0f;
    --shadow-color: #2d1b0f;
    --hover-bg: #dfbd8c;
    --input-bg: #ffffff;

    background-color: var(--bg-primary);
    background-image: 
        repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(45, 27, 15, 0.1) 40px, rgba(45, 27, 15, 0.1) 80px),
        repeating-linear-gradient(180deg, transparent, transparent 40px, rgba(45, 27, 15, 0.1) 40px, rgba(45, 27, 15, 0.1) 80px);
}
body.theme-autumn button.primary { background: #2d1b0f; color: #f4ebd8; border-color: #2d1b0f; }
body.theme-autumn button.secondary { background: #f4ebd8; color: #2d1b0f; border-color: #2d1b0f; }
body.theme-autumn .maze-bg { display: none !important; }

body.theme-terminal {
    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --bg-overlay: rgba(10, 10, 10, 0.95);
    --text-primary: #4ade80;
    --text-secondary: #22c55e;
    --border-color: #22c55e;
    --shadow-color: #166534;
    --hover-bg: #14532d;
    --input-bg: #0a0a0a;
}

body.theme-vaporwave {
    --bg-primary: #ff71ce;
    --bg-secondary: #01cdfe;
    --bg-overlay: rgba(1, 205, 254, 0.95);
    --text-primary: #000000;
    --text-secondary: #ffffff;
    --border-color: #000000;
    --shadow-color: #b967ff;
    --hover-bg: #05ffa1;
    --input-bg: #ffffff;

    background-color: var(--bg-primary);
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.4) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.4) 2px, transparent 2px);
    background-size: 30px 30px;
}

body.theme-vaporwave button.primary { background: #b967ff; color: #fff; border-color: #000; }
body.theme-vaporwave button.secondary { background: #fff; color: #000; border-color: #000; }
body.theme-vaporwave .maze-bg { display: none !important; }



body.theme-blueprint {
    --bg-primary: #0a3d91;
    --bg-secondary: #ffffff;
    --bg-overlay: rgba(10, 61, 145, 0.95);
    --text-primary: #0a3d91;
    --text-secondary: #062a66;
    --border-color: #000000;
    --shadow-color: #000000;
    --hover-bg: #e0f2fe;
    --input-bg: #ffffff;
    
    background-color: var(--bg-primary);
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px, 10px 10px, 10px 10px;
}
body.theme-blueprint button.primary { background: #0a3d91; color: #fff; }
body.theme-blueprint .maze-bg { display: none !important; }

body.theme-blueprint #toast,
body.theme-blueprint .db-toast {
    background: #ffffff !important;
    color: #0a3d91 !important;
    border: 3px solid #0a3d91 !important;
}

body.theme-blueprint .db-deck-stats,
body.theme-blueprint .db-study-bar,
body.theme-blueprint #study-mastery,
body.theme-blueprint #study-progress-text {
    color: #ffffff !important;
}

body.theme-blueprint .db-deck-cards > div:not(.db-card-row) {
    color: #ffffff !important;
}




body.theme-neopop {
    --bg-primary: #a7f3d0;
    --bg-secondary: #fbcfe8;
    --bg-overlay: rgba(167, 243, 208, 0.95);
    --text-primary: #000000;
    --text-secondary: #333333;
    --border-color: #000000;
    --shadow-color: #000000;
    --hover-bg: #fef08a;
    --input-bg: #ffffff;
    
    background-color: var(--bg-primary);
    background-image: radial-gradient(#000000 15%, transparent 15%);
    background-size: 20px 20px;
}
body.theme-neopop button.primary { background: #000000; color: #a7f3d0; }
body.theme-neopop .maze-bg { display: none !important; }

/* COMPOSITION */
/* EARTHY */
body.theme-earthy {
    --bg-primary: #3b5240;
    --bg-secondary: #e0d5c1;
    --bg-overlay: rgba(59, 82, 64, 0.95);
    --text-primary: #1f140c;
    --text-secondary: #4a3626;
    --border-color: #1f140c;
    --shadow-color: #1f140c;
    --hover-bg: #cbbba1;
    --input-bg: #ffffff;
    
    background-color: var(--bg-primary);
    background-image: repeating-radial-gradient(
        circle at 0 0,
        transparent,
        transparent 40px,
        rgba(31, 20, 12, 0.1) 40px,
        rgba(31, 20, 12, 0.1) 42px
    );
}
body.theme-earthy button.primary { background: #1f140c; color: #e0d5c1; border-color: #1f140c; }
body.theme-earthy button.secondary { background: #e0d5c1; color: #1f140c; border-color: #1f140c; }
body.theme-earthy .maze-bg { display: none !important; }

/* SPACE */
body.theme-space {
    --bg-primary: #04050a;
    --bg-secondary: #101423;
    --bg-overlay: rgba(4, 5, 10, 0.95);
    --text-primary: #e2e8f0;
    --text-secondary: #8b99af;
    --border-color: #00f0ff;
    --shadow-color: #00f0ff;
    --hover-bg: #1c233c;
    --input-bg: #04050a;

    background-color: var(--bg-primary);
    background-image: 
        radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 4px),
        radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 3px),
        radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 4px),
        radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 3px);
    background-size: 50px 50px, 40px 40px, 30px 30px, 60px 60px;
    background-position: 0 0, 20px 20px, 15px 5px, 35px 25px;
}
body.theme-space button.primary { background: #00f0ff; color: #04050a; border-color: #00f0ff; }
body.theme-space button.secondary { background: #101423; color: #00f0ff; border-color: #00f0ff; }
body.theme-space input { color: #e2e8f0; }
body.theme-space .maze-bg { display: none !important; }
body.theme-space .db-sidebar { border-right: 4px solid #00f0ff; }

/* MOON */


body.theme-moon {
    --bg-primary: #8a8d91;
    --bg-secondary: #ffffff;
    --bg-overlay: rgba(138, 141, 145, 0.95);
    --text-primary: #000000;
    --text-secondary: #333333;
    --border-color: #000000;
    --shadow-color: #000000;
    --hover-bg: #ffb703;
    --input-bg: #ffffff;

    background-color: var(--bg-primary);
    background-image: radial-gradient(rgba(0,0,0,0.15) 2px, transparent 2px);
    background-size: 20px 20px;
}
body.theme-moon button.primary { background: #000000; color: #ffffff; border-color: #000000; }
body.theme-moon button.secondary { background: #ffffff; color: #000000; border-color: #000000; }
body.theme-moon .maze-bg { display: none !important; }

body.theme-composition {
    --bg-primary: #fdf6e3;
    --bg-secondary: #ffffff;
    --bg-overlay: rgba(253, 246, 227, 0.95);
    --text-primary: #000000;
    --text-secondary: #444444;
    --border-color: #000000;
    --shadow-color: #000000;
    --hover-bg: #e2e8f0;
    --input-bg: #ffffff;
    
    background-color: var(--bg-primary);
    background-image: 
        linear-gradient(90deg, transparent 40px, #ff4d6d 40px, #ff4d6d 43px, transparent 43px),
        repeating-linear-gradient(0deg, transparent, transparent 27px, #3b82f6 27px, #3b82f6 29px);
}
body.theme-composition button.primary { background: #000000; color: #ffffff; }
body.theme-composition .maze-bg { display: none !important; }

/* DRACULA */
body.theme-dracula {
    --bg-primary: #15161e;
    --bg-secondary: #282a36;
    --bg-overlay: rgba(21, 22, 30, 0.95);
    --text-primary: #f8f8f2;
    --text-secondary: #bd93f9;
    --border-color: #ff5555;
    --shadow-color: #000000;
    --hover-bg: #6272a4;
    --input-bg: #282a36;
}
body.theme-dracula button.primary { background: #ff5555; color: #ffffff; border-color: #ff5555; }
body.theme-dracula button.secondary { background: #44475a; color: #f8f8f2; border-color: #ff5555; }
body.theme-dracula .maze-bg { display: none !important; }

/* RETRO 1984 */


/* CABIN */
body.theme-cabin {
    --bg-primary: #382215;
    --bg-secondary: #e6cda3;
    --bg-overlay: rgba(56, 34, 21, 0.95);
    --text-primary: #211204;
    --text-secondary: #4a2c16;
    --border-color: #1a0f09;
    --shadow-color: #1a0f09;
    --hover-bg: #ffba08;
    --input-bg: #ffffff;

    background-color: var(--bg-primary);
    background-image: repeating-linear-gradient(
        180deg,
        #382215,
        #382215 38px,
        #1a0f09 38px,
        #1a0f09 42px
    );
}
body.theme-cabin button.primary { background: #8a2522; color: #ffffff; border-color: #1a0f09; }
body.theme-cabin button.secondary { background: #e6cda3; color: #211204; border-color: #1a0f09; }
body.theme-cabin .maze-bg { display: none !important; }
body.theme-cabin .db-sidebar { border-right: 4px solid #1a0f09; }

/* MATCHA */
body.theme-matcha {
    --bg-primary: #d1deb9;
    --bg-secondary: #fcf9f2;
    --bg-overlay: rgba(209, 222, 185, 0.95);
    --text-primary: #2c3d25;
    --text-secondary: #4c6b41;
    --border-color: #2c3d25;
    --shadow-color: #2c3d25;
    --hover-bg: #ffb7c5;
    --input-bg: #ffffff;

    background-color: var(--bg-primary);
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.5) 2px,
        transparent 2px,
        transparent 12px
    );
}
body.theme-matcha button.primary { background: #2c3d25; color: #ffffff; border-color: #2c3d25; }
body.theme-matcha button.secondary { background: #fcf9f2; color: #2c3d25; border-color: #2c3d25; }
body.theme-matcha .maze-bg { display: none !important; }

/* TATOOINE */
body.theme-tatooine {
    --bg-primary: #e6c280;
    --bg-secondary: #f4dca6;
    --bg-overlay: rgba(230, 194, 128, 0.95);
    --text-primary: #3d2314;
    --text-secondary: #6e3d22;
    --border-color: #3d2314;
    --shadow-color: #8c4a22;
    --hover-bg: #d4a355;
    --input-bg: #ffffff;

    background-color: var(--bg-primary);
    background-image: radial-gradient(circle at 80% 20%, rgba(255,165,0,0.4) 10px, transparent 40px), 
                      radial-gradient(circle at 65% 15%, rgba(255,69,0,0.5) 15px, transparent 50px);
}
body.theme-tatooine button.primary { background: #8c4a22; color: #f4dca6; border-color: #3d2314; }
body.theme-tatooine button.secondary { background: #f4dca6; color: #3d2314; border-color: #3d2314; }
body.theme-tatooine .maze-bg { display: none !important; }

/* KYLO */
body.theme-kylo {
    --bg-primary: #000000;
    --bg-secondary: #120202;
    --bg-overlay: rgba(0, 0, 0, 0.95);
    --text-primary: #909090;
    --text-secondary: #ea1c1c;
    --border-color: #3f1b1b;
    --shadow-color: #120202;
    --hover-bg: #312f2f;
    --input-bg: #000000;

    background-color: var(--bg-primary);
    background-image: 
        /* The Red Kintsugi Cracks */
        linear-gradient(65deg, transparent calc(25% - 1px), rgba(234, 28, 28, 0.9) 25%, transparent calc(25% + 1px)),
        linear-gradient(25deg, transparent calc(38% - 1px), rgba(234, 28, 28, 0.9) 38%, transparent calc(38% + 1px)),
        linear-gradient(-55deg, transparent calc(65% - 1px), rgba(234, 28, 28, 0.9) 65%, transparent calc(65% + 1px)),
        linear-gradient(-35deg, transparent calc(72% - 1px), rgba(234, 28, 28, 0.9) 72%, transparent calc(72% + 1px)),
        linear-gradient(80deg, transparent calc(80% - 1px), rgba(234, 28, 28, 0.9) 80%, transparent calc(80% + 1px)),
        /* The sweeping curved chrome visor bands */
        radial-gradient(1500px 800px at 50% -200px, 
            transparent calc(45% - 1px), 
            rgba(144, 144, 144, 0.2) 45%, rgba(200, 200, 200, 0.4) calc(45% + 6px), transparent calc(45% + 7px),
            transparent calc(48% - 1px), 
            rgba(144, 144, 144, 0.2) 48%, rgba(200, 200, 200, 0.4) calc(48% + 6px), transparent calc(48% + 7px),
            transparent calc(51% - 1px), 
            rgba(144, 144, 144, 0.2) 51%, rgba(200, 200, 200, 0.4) calc(51% + 6px), transparent calc(51% + 7px),
            transparent calc(54% - 1px), 
            rgba(144, 144, 144, 0.2) 54%, rgba(200, 200, 200, 0.4) calc(54% + 6px), transparent calc(54% + 7px)
        );
    background-attachment: fixed;
}
body.theme-kylo button.primary { background: #3f1b1b; color: #909090; border-color: #ea1c1c; }
body.theme-kylo button.secondary { background: #120202; color: #909090; border-color: #3f1b1b; }
body.theme-kylo .maze-bg { display: none !important; }

/* R2-D2: silver astromech dome (radar eye, holo-projector, blue panel bands) over a white body */
body.theme-r2d2 {
    --bg-primary: #c0c0c0;
    --bg-secondary: #ffffff;
    --bg-overlay: rgba(192, 192, 192, 0.95);
    --text-primary: #23408e;
    --text-secondary: #4b4f63;
    --border-color: #23408e;
    --shadow-color: #0e1d4d;
    --hover-bg: #dfe5f4;
    --input-bg: #ffffff;

    background-color: var(--bg-primary);
    background-image:
        radial-gradient(circle at 36% 34%, rgba(255, 255, 255, 0.75) 0 7%, transparent 8%),
        radial-gradient(circle, #08080f 0 44%, #34343f 45% 49%, transparent 50%),
        linear-gradient(#23408e, #23408e),
        linear-gradient(#23408e 0 22px, transparent 22px 30px, #23408e 30px 52px),
        radial-gradient(circle, #1b1b24 0 22%, #f2f2f2 23% 45%, #8e8e96 46% 58%, #e6e6ea 59% 72%, transparent 73%),
        repeating-linear-gradient(90deg, #23408e 0 74px, transparent 74px 86px),
        repeating-linear-gradient(90deg, #23408e 0 132px, transparent 132px 142px, #23408e 142px 176px, transparent 176px 186px, #23408e 186px 262px, transparent 262px 272px),
        linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
        repeating-linear-gradient(90deg, transparent 0 46px, #23408e 46px 60px, transparent 60px 118px, #23408e 118px 168px, transparent 168px 200px),
        linear-gradient(#ffffff, #ffffff),
        radial-gradient(ellipse 120% 95% at 50% 0%, #f1f1f4 0%, #c9c9cd 45%, #a9a9b0 62%);
    background-size: 96px 96px, 96px 96px, 118px 118px, 26px 52px, 58px 58px, 100% 16px, 100% 62px, 100% 4px, 100% 40px, 100% 38%, 100% 100%;
    background-position: 50% 25%, 50% 25%, 50% 24%, calc(50% - 98px) 26%, calc(50% + 104px) 27%, 0 9%, 0 47%, 0 56%, 0 84%, 0 100%, 0 0;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat, no-repeat;
    background-attachment: fixed;
}
body.theme-r2d2 button.primary { background: #23408e; color: #ffffff; border-color: #23408e; }
body.theme-r2d2 button.secondary { background: #ffffff; color: #23408e; border-color: #23408e; }
body.theme-r2d2 .maze-bg { display: none !important; }

/* BOBA FETT: weathered green Mandalorian helmet (black T-visor, brown trim, rangefinder, kill stripes) */
body.theme-boba {
    --bg-primary: #5d6e5a;
    --bg-secondary: #e8dccb;
    --bg-overlay: rgba(93, 110, 90, 0.95);
    --text-primary: #5e3424;
    --text-secondary: #6e6255;
    --border-color: #5e3424;
    --shadow-color: #2f1a12;
    --hover-bg: #d9c6a8;
    --input-bg: #f6efe4;

    background-color: var(--bg-primary);
    background-image:
        linear-gradient(100deg, transparent 0 30%, rgba(232, 220, 203, 0.18) 30% 34%, transparent 34%),
        linear-gradient(#141412, #141412),
        linear-gradient(#141412, #141412),
        linear-gradient(#5e3424, #5e3424),
        linear-gradient(#5e3424, #5e3424),
        repeating-linear-gradient(90deg, #b3895c 0 6px, transparent 6px 12px),
        linear-gradient(#e8dccb, #e8dccb),
        linear-gradient(#85786a, #85786a),
        linear-gradient(#b3895c, #b3895c),
        radial-gradient(circle, rgba(20, 20, 18, 0.55) 0 5px, rgba(232, 220, 203, 0.35) 6px 7px, transparent 8px),
        radial-gradient(circle, rgba(20, 20, 18, 0.5) 0 2px, transparent 4px),
        radial-gradient(circle, rgba(20, 20, 18, 0.5) 0 2px, transparent 4px),
        linear-gradient(160deg, transparent 47%, rgba(232, 220, 203, 0.45) 48% 52%, transparent 53%),
        linear-gradient(20deg, transparent 47%, rgba(232, 220, 203, 0.4) 48% 52%, transparent 53%),
        linear-gradient(140deg, transparent 46%, rgba(94, 52, 36, 0.6) 47% 53%, transparent 54%),
        radial-gradient(ellipse 110% 90% at 38% 6%, #7b8c74 0%, #5d6e5a 45%, #45523f 100%);
    background-size: 64% 10%, 64% 10%, 9% 62%, 70% 18%, 15% 60%, 42px 26px, 30px 70px, 7px 34%, 16px 46px, 18px 18px, 10px 10px, 10px 10px, 140px 36px, 110px 30px, 90px 40px, 100% 100%;
    background-position: 50% 33%, 50% 33%, 50% 100%, 50% 31%, 50% 100%, 72% 17%, 9% 36%, calc(9% + 12px) 0, calc(9% + 7px) 4%, 24% 14%, 83% 58%, 17% 74%, 20% 52%, 84% 80%, 62% 8%, 0 0;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-attachment: fixed;
}
body.theme-boba button.primary { background: #5e3424; color: #e8dccb; border-color: #2f1a12; }
body.theme-boba button.secondary { background: #e8dccb; color: #5e3424; border-color: #5e3424; }
body.theme-boba .maze-bg { display: none !important; }

/* FJORD: misty layered mountain ridges, a snowcap, pale sun and still water */
body.theme-fjord {
    --bg-primary: #dfe6ea;
    --bg-secondary: #f8fafb;
    --bg-overlay: rgba(223, 230, 234, 0.95);
    --text-primary: #2b3a44;
    --text-secondary: #5b6d79;
    --border-color: #2b3a44;
    --shadow-color: #7d93a1;
    --hover-bg: #e8eef1;
    --input-bg: #ffffff;

    background-color: var(--bg-primary);
    background-image:
        repeating-linear-gradient(0deg, transparent 0 7px, rgba(255, 255, 255, 0.28) 7px 8px),
        linear-gradient(180deg, #8ea3b0, #a7b9c4),
        conic-gradient(from 129.6deg at 50% 0, #7d93a1 0 100.9deg, transparent 0),
        linear-gradient(180deg, rgba(232, 238, 241, 0), rgba(232, 238, 241, 0.6) 65%, rgba(232, 238, 241, 0)),
        conic-gradient(from 149.0deg at 50% 0, #9db0bc 0 61.9deg, transparent 0),
        linear-gradient(180deg, rgba(232, 238, 241, 0), rgba(232, 238, 241, 0.65) 65%, rgba(232, 238, 241, 0)),
        conic-gradient(from 142.6deg at 50% 0, #f3f6f8 0 74.8deg, transparent 0),
        conic-gradient(from 142.6deg at 50% 0, #bac8d1 0 74.8deg, transparent 0),
        radial-gradient(circle, rgba(255, 249, 232, 0.95) 0 34px, rgba(255, 249, 232, 0.35) 46px, transparent 110px),
        linear-gradient(180deg, #e9eff2 0%, #dfe6ea 55%, #d2dce2 100%);
    background-size: 100% 44px, 100% 44px, 460px 190px, 100% 140px, 300px 250px, 100% 160px, 520px 70px, 520px 340px, 240px 240px, 100% 100%;
    background-position: 0 100%, 0 100%, 40px calc(100% - 40px), 0 calc(100% - 40px - 120px), 170px calc(100% - 40px - 60px), 0 calc(100% - 40px - 200px), -120px calc(100% - 40px - 220px - 270px), -120px calc(100% - 40px - 220px), 80% 12%, 0 0;
    background-repeat: no-repeat, no-repeat, repeat-x, no-repeat, repeat-x, no-repeat, repeat-x, repeat-x, no-repeat, no-repeat;
    background-attachment: fixed;
}
body.theme-fjord button.primary { background: #2b3a44; color: #f8fafb; border-color: #2b3a44; }
body.theme-fjord button.secondary { background: #f8fafb; color: #2b3a44; border-color: #2b3a44; }
body.theme-fjord .maze-bg { display: none !important; }

/* NIGHT LIBRARY: lamp-lit shelves of muted book spines with gold bands */
body.theme-library {
    --bg-primary: #1d2230;
    --bg-secondary: #272d3f;
    --bg-overlay: rgba(29, 34, 48, 0.95);
    --text-primary: #ece4d4;
    --text-secondary: #b3a68d;
    --border-color: #4b5470;
    --shadow-color: #0f121b;
    --hover-bg: #323a52;
    --input-bg: #1d2230;

    background-color: var(--bg-primary);
    background-image:
        radial-gradient(ellipse 60% 45% at 88% 0%, rgba(255, 190, 110, 0.22), transparent 70%),
        radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.35)),
        linear-gradient(180deg, #1d2230 0 14px, transparent 14px 118px, #4a3426 118px 130px, #2c2019 130px 136px, #1d2230 136px 150px),
        linear-gradient(180deg, transparent 0 34px, rgba(224, 164, 88, 0.3) 34px 36px, transparent 36px 92px, rgba(224, 164, 88, 0.24) 92px 95px, transparent 95px),
        repeating-linear-gradient(90deg, #5a3b3b 0px 18px, #151922 18px 20px, #2f4a47 20px 33px, #151922 33px 35px, #6b5a3d 35px 59px, #151922 59px 61px, #3a3f5e 61px 76px, #151922 76px 78px, #4d2f40 78px 98px, #151922 98px 100px, #6a4a33 100px 111px, #151922 111px 113px, #34505c 113px 139px, #151922 139px 141px, #57513a 141px 155px, #151922 155px 157px, #3f2f2a 157px 176px, #151922 176px 178px, #4a5a3c 178px 200px, #151922 200px 202px, #5e4560 202px 214px, #151922 214px 216px, #2e3b52 216px 233px, #151922 233px 235px, transparent 235px 247px),
        repeating-linear-gradient(90deg, #5a3b3b 0px 18px, #151922 18px 20px, #2f4a47 20px 33px, #151922 33px 35px, #6b5a3d 35px 59px, #151922 59px 61px, #3a3f5e 61px 76px, #151922 76px 78px, #4d2f40 78px 98px, #151922 98px 100px, #6a4a33 100px 111px, #151922 111px 113px, #34505c 113px 139px, #151922 139px 141px, #57513a 141px 155px, #151922 155px 157px, #3f2f2a 157px 176px, #151922 176px 178px, #4a5a3c 178px 200px, #151922 200px 202px, #5e4560 202px 214px, #151922 214px 216px, #2e3b52 216px 233px, #151922 233px 235px, transparent 235px 247px),
        repeating-linear-gradient(90deg, #5a3b3b 0px 18px, #151922 18px 20px, #2f4a47 20px 33px, #151922 33px 35px, #6b5a3d 35px 59px, #151922 59px 61px, #3a3f5e 61px 76px, #151922 76px 78px, #4d2f40 78px 98px, #151922 98px 100px, #6a4a33 100px 111px, #151922 111px 113px, #34505c 113px 139px, #151922 139px 141px, #57513a 141px 155px, #151922 155px 157px, #3f2f2a 157px 176px, #151922 176px 178px, #4a5a3c 178px 200px, #151922 200px 202px, #5e4560 202px 214px, #151922 214px 216px, #2e3b52 216px 233px, #151922 233px 235px, transparent 235px 247px),
        repeating-linear-gradient(90deg, #5a3b3b 0px 18px, #151922 18px 20px, #2f4a47 20px 33px, #151922 33px 35px, #6b5a3d 35px 59px, #151922 59px 61px, #3a3f5e 61px 76px, #151922 76px 78px, #4d2f40 78px 98px, #151922 98px 100px, #6a4a33 100px 111px, #151922 111px 113px, #34505c 113px 139px, #151922 139px 141px, #57513a 141px 155px, #151922 155px 157px, #3f2f2a 157px 176px, #151922 176px 178px, #4a5a3c 178px 200px, #151922 200px 202px, #5e4560 202px 214px, #151922 214px 216px, #2e3b52 216px 233px, #151922 233px 235px, transparent 235px 247px);
    background-size: 100% 100%, 100% 100%, 100% 150px, 100% 150px, 100% 150px, 100% 150px, 100% 150px, 100% 150px;
    background-position: 0 0, 0 0, 0 0, 0 0, -97px 150px, -181px 450px, -53px 750px, 0 0;
    background-repeat: no-repeat, no-repeat, repeat, repeat, repeat-x, repeat-x, repeat-x, repeat;
    background-attachment: fixed;
}
body.theme-library button.primary { background: #e0a458; color: #1d2230; border-color: #e0a458; }
body.theme-library button.secondary { background: #272d3f; color: #ece4d4; border-color: #4b5470; }
body.theme-library .maze-bg { display: none !important; }
body.theme-library input, body.theme-library textarea { color: #ece4d4; }

/* Campfire Theme (animated: the scene is an animated SVG, see images/campfire-scene.svg) */
body.theme-campfire {
    --bg-primary: #080a10;
    --bg-secondary: #1c1512;
    --bg-overlay: rgba(8, 10, 16, 0.94);
    --text-primary: #f3e3cf;
    --text-secondary: #c79a76;
    --border-color: #5a3a24;
    --shadow-color: #050302;
    --hover-bg: #2b1f18;
    --input-bg: #120d0b;

    background-color: var(--bg-primary);
    background-image: url("../images/campfire-scene.svg");
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
body.theme-campfire button.primary { background: #ff8a2b; color: #1a0d05; border-color: #ff8a2b; }
body.theme-campfire button.secondary { background: #1c1512; color: #f3e3cf; border-color: #5a3a24; }
body.theme-campfire .maze-bg { display: none !important; }
body.theme-campfire input, body.theme-campfire textarea { color: #f3e3cf; }

/* ===== Animated scenes (see createScene in js/themes.js) =====
   Only transform and opacity are animated, so everything runs on the compositor
   and keeps a steady frame rate even when the page is idle. */
.scene {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    container-type: size;
}
.scene-campfire { --fire-w: 9cqmin; }
.scene-campfire .fire {
    position: absolute;
    left: 50%;
    bottom: 7cqh;
    width: var(--fire-w);
    height: calc(var(--fire-w) * 1.7);
    transform: translateX(-50%);
}
.scene-campfire .fire-glow,
.scene-campfire .fire-core-glow {
    position: absolute;
    left: 50%;
    border-radius: 50%;
    will-change: transform, opacity;
}
.scene-campfire .fire-glow {
    bottom: 12%;
    width: calc(var(--fire-w) * 12);
    height: calc(var(--fire-w) * 7);
    background: radial-gradient(ellipse at center, rgba(200, 100, 40, 0.24), rgba(150, 62, 22, 0.09) 42%, transparent 70%);
    transform: translate(-50%, 45%);
    animation: fire-glow 4.4s ease-in-out infinite;
}
.scene-campfire .fire-core-glow {
    bottom: 6%;
    width: calc(var(--fire-w) * 3.4);
    height: calc(var(--fire-w) * 2.4);
    background: radial-gradient(ellipse at center, rgba(255, 170, 80, 0.30), rgba(255, 120, 40, 0.1) 50%, transparent 72%);
    transform: translate(-50%, 40%);
    animation: fire-glow 2.3s ease-in-out infinite -0.8s;
}
.scene-campfire .pit {
    position: absolute;
    left: 50%;
    bottom: calc(var(--fire-w) * -0.5);
    width: calc(var(--fire-w) * 3.2);
    height: calc(var(--fire-w) * 1.354);
    transform: translateX(-50%);
    overflow: visible;
}
.scene-campfire .flames { position: absolute; left: 12%; right: 12%; bottom: calc(var(--fire-w) * 0.1); top: 0; }
.scene-campfire .flame {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    transform-origin: 50% 100%;
    will-change: transform, opacity;
}
.scene-campfire .t-left { width: 84%; height: 74%; left: -6%; opacity: 0.8; animation: flame-b 2.3s ease-in-out infinite -0.4s; }
.scene-campfire .t-right { width: 84%; height: 70%; left: 22%; opacity: 0.8; animation: flame-a 2.7s ease-in-out infinite -1.3s; }
.scene-campfire .t-main { opacity: 0.9; animation: flame-a 2.9s ease-in-out infinite; }
.scene-campfire .t-inner { width: 64%; height: 66%; left: 18%; opacity: 0.92; animation: flame-b 1.9s ease-in-out infinite -0.9s; }
.scene-campfire .t-core { width: 44%; height: 40%; left: 28%; opacity: 0.9; animation: flame-a 1.5s ease-in-out infinite -0.3s; }
.scene-campfire .ember {
    position: absolute;
    left: calc(50% + var(--x));
    bottom: 40%;
    width: max(2px, 0.32cqmin);
    height: max(2px, 0.32cqmin);
    border-radius: 50%;
    background: #f0a860;
    box-shadow: 0 0 3px 1px rgba(255, 150, 60, 0.5);
    opacity: 0;
    animation: ember var(--d) linear infinite var(--delay);
    will-change: transform, opacity;
}
.scene-campfire .smoke {
    position: absolute;
    left: 50%;
    bottom: 70%;
    width: calc(var(--fire-w) * 1.6);
    height: calc(var(--fire-w) * 1.6);
    margin-left: calc(var(--fire-w) * -0.8);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(150, 140, 130, 0.07), transparent 68%);
    opacity: 0;
    animation: smoke 11s ease-out infinite;
    will-change: transform, opacity;
}
.scene-campfire .s2 { animation-delay: -3.7s; --sx: 6cqmin; }
.scene-campfire .s3 { animation-delay: -7.3s; --sx: -5cqmin; }
.scene-campfire .s1 { --sx: 1cqmin; }
@keyframes fire-glow { 0%, 100% { opacity: 0.8; transform: translate(-50%, 45%) scale(1); } 40% { opacity: 1; transform: translate(-50%, 45%) scale(1.05); } 70% { opacity: 0.72; transform: translate(-50%, 45%) scale(0.98); } }
@keyframes flame-a { 0%, 100% { transform: scale(1, 1) skewX(0deg); } 25% { transform: scale(0.94, 1.08) skewX(-2.5deg) translateX(-1%); } 55% { transform: scale(1.05, 0.93) skewX(2deg) translateX(1%); } 80% { transform: scale(0.97, 1.05) skewX(-1deg); } }
@keyframes flame-b { 0%, 100% { transform: scale(1, 1) skewX(0deg); } 30% { transform: scale(1.06, 0.92) skewX(2.5deg) translateX(1%); } 60% { transform: scale(0.94, 1.09) skewX(-2deg) translateX(-1%); } 85% { transform: scale(1.02, 0.98) skewX(1deg); } }
@keyframes ember { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 12% { opacity: 0.85; } 100% { opacity: 0; transform: translate3d(var(--dx), -24cqmin, 0); } }
@keyframes smoke { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--sx, 0), -26cqmin, 0) scale(2.4); } }
@media (prefers-reduced-motion: reduce) {
    .scene * { animation: none !important; }
    .scene-campfire .ember, .scene-campfire .smoke { display: none; }
}

/* TRANSPARENCY BLOCK */

/* Strawberry Theme */
body.theme-strawberry {
    --bg-primary: #FA2A28;
    --bg-secondary: #FEC0A9;
    --bg-overlay: rgba(182, 13, 23, 0.8);
    --text-primary: #B60D17;
    --text-secondary: #336B26;
    --accent-primary: #C9CF56;
    --border-color: #B60D17;
    --shadow-color: #B60D17;
    
    background-color: var(--bg-primary);
    background-image: 
        radial-gradient(ellipse at center, #C9CF56 3px, transparent 4px),
        radial-gradient(ellipse at center, #C9CF56 3px, transparent 4px);
    background-size: 60px 80px;
    background-position: 0 0, 30px 40px;
}
body.theme-strawberry button.primary { background: #C9CF56; color: #336B26; border-color: #336B26; box-shadow: 4px 4px 0px 0px #336B26; }
body.theme-strawberry button.secondary { background: #FEC0A9; color: #B60D17; border-color: #B60D17; }
body.theme-strawberry button:hover { background: #336B26; color: #C9CF56; border-color: #336B26; box-shadow: 4px 4px 0px 0px #336B26; }
body.theme-strawberry .maze-bg { display: none !important; }

body.theme-autumn .view,
body.theme-vaporwave .view,
body.theme-blueprint .view,
body.theme-neopop .view,
body.theme-composition .view,
body.theme-earthy .view,
body.theme-space .view,
body.theme-moon .view,
body.theme-cabin .view,
body.theme-matcha .view,
body.theme-tatooine .view,
body.theme-kylo .view,
body.theme-r2d2 .view,
body.theme-boba .view,
body.theme-fjord .view,
body.theme-library .view,
body.theme-campfire .view,
body.theme-strawberry .view,
body.theme-autumn .list-container,
body.theme-vaporwave .list-container,
body.theme-blueprint .list-container,
body.theme-neopop .list-container,
body.theme-composition .list-container,
body.theme-earthy .list-container,
body.theme-space .list-container,
body.theme-moon .list-container,
body.theme-cabin .list-container,
body.theme-matcha .list-container,
body.theme-tatooine .list-container,
body.theme-kylo .list-container,
body.theme-r2d2 .list-container,
body.theme-boba .list-container,
body.theme-fjord .list-container,
body.theme-library .list-container,
body.theme-campfire .list-container,
body.theme-strawberry .list-container {
    background: transparent !important;
}



body {
    width: 480px;
    height: 600px;
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 4px solid var(--border-color);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Geometric Background */
.maze-bg {
    background-color: var(--bg-primary);
    background-image: 
        linear-gradient(45deg, var(--border-color) 25%, transparent 25%, transparent 75%, var(--border-color) 75%, var(--border-color)), 
        linear-gradient(45deg, var(--border-color) 25%, transparent 25%, transparent 75%, var(--border-color) 75%, var(--border-color));
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    opacity: 0.05;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
}

/* Strong Borders for high contrast */
.view {
    display: none;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background: var(--bg-primary);
    position: relative;
    z-index: 1;
}

.view.active {
    display: flex;
    animation: fadeIn 0.25s ease-out forwards;
}

/* Header */
.header {
    padding: 16px;
    border-bottom: 3px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-secondary);
    z-index: 2;
}

.header h1, .header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Buttons */
button {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
    padding: 8px 16px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 12px;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0;
    box-shadow: 2px 2px 0px 0px var(--shadow-color);
    box-shadow: 2px 2px 0px 0px var(--shadow-color);
}

button:hover {
    background: var(--hover-bg);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0px 0px var(--shadow-color);
}

button:active {
    transform: translate(2px, 2px);
    box-shadow: 0px 0px 0px 0px var(--shadow-color);
}

button.primary {
    background: var(--text-primary);
    color: var(--bg-primary);
}
button.primary:hover {
    background: var(--text-primary);
    opacity: 0.9;
}

button.danger {
    background: #ff4444;
    color: #ffffff;
    border-color: #ff4444;
}
button.danger:hover {
    background: #cc0000;
    border-color: #cc0000;
}

button.icon-btn {
    padding: 8px;
    box-shadow: none;
    border: none;
    border-radius: 50%;
}

button.icon-btn:hover {
    background: var(--hover-bg);
    transform: scale(1.1);
    box-shadow: none;
}

button.icon-btn:active {
    transform: scale(0.95);
}

/* Lists */
.list-container {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: var(--bg-overlay);
}

@keyframes ai-pulse-spin {
    0% { transform: scale(0.8) rotate(0deg); opacity: 0.8; }
    50% { transform: scale(1.2) rotate(45deg); opacity: 1; }
    100% { transform: scale(0.8) rotate(90deg); opacity: 0.8; }
}

.ai-sparkle {
    animation: ai-pulse-spin 1.5s ease-in-out infinite;
}

.card-item, .deck-item { cursor: pointer;
    border: 3px solid var(--border-color);
    padding: 12px;
    margin-bottom: 12px;
    background: var(--bg-secondary);
    box-shadow: 4px 4px 0px 0px var(--shadow-color);
    position: relative;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-item:hover, .deck-item:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px 0px var(--shadow-color);
}

.deck-item { cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}

.deck-item-info {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.deck-title-text {
    font-weight: 800;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown {
    position: relative;
    display: inline-block;
    margin-left: 8px;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: var(--bg-secondary);
    min-width: 100px;
    box-shadow: 4px 4px 0px 0px var(--shadow-color);
    border: 3px solid var(--border-color);
    z-index: 10;
    flex-direction: column;
}

.dropdown.show .dropdown-content {
    display: flex;
}

.dropdown.drop-up .dropdown-content {
    top: auto;
    bottom: 100%;
}

.dropdown-content button {
    box-shadow: none;
    border: none;
    border-bottom: 2px solid var(--border-color);
    text-align: left;
    width: 100%;
    padding: 12px;
}
.dropdown-content button:last-child {
    border-bottom: none;
}

.dropdown-content button:hover {
    background: var(--hover-bg);
    transform: none;
    box-shadow: none;
}

.deck-item:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px 0px var(--shadow-color);
}

.card-item .term {
    font-size: 18px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pill {
    font-size: 10px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2px 6px;
    text-transform: lowercase;
}

.card-item .definition {
    margin-top: 8px;
    font-size: 14px;
}

.card-item .example {
    margin-top: 4px;
    font-size: 12px;
    font-style: italic;
    color: var(--text-secondary);
}

.card-actions {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Forms */
input[type="text"], input[type="password"], input[type="search"], input[type="file"], textarea {
    width: 100%;
    border: 2px solid var(--border-color);
    flex-shrink: 0;
    padding: 8px;
    margin-bottom: 12px;
    box-sizing: border-box;
    font-family: inherit;
    background: var(--input-bg);
    color: var(--text-primary);
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus {
    box-shadow: 4px 4px 0 var(--text-primary);
}

/* Flashcard Study View */
.study-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px;
    height: 100%;
    width: 100%;
    background: transparent;
}

.flashcard {
    flex: none;
    height: 360px;
    width: 100%;
    border: 4px solid var(--border-color);
    background: var(--bg-secondary);
    box-shadow: 8px 8px 0px 0px var(--shadow-color);
    position: relative;
    cursor: pointer;
    perspective: 1000px;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.flashcard:hover {
    transform: translate(-2px, -2px);
    box-shadow: 10px 10px 0px 0px var(--shadow-color);
}

.flashcard-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flashcard.flipped .flashcard-inner {
    transform: rotateY(180deg);
}

.flashcard-front, .flashcard-back {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.flashcard-back {
    transform: rotateY(180deg);
}

.study-actions {
    display: flex;
    gap: 8px;
    margin-top: 24px;
}

.study-actions button {
    flex: 1;
    min-width: 0;
    padding: 12px 4px;
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.progress-bar {
    height: 8px;
    background: var(--hover-bg);
    border: 2px solid var(--border-color);
    margin-bottom: 16px;
    width: 100%;
}

.progress-fill {
    height: 100%;
    background: var(--border-color);
    width: 0%;
    transition: width 0.3s;
}

.deck-stats {
    font-size: 12px;
    font-weight: normal;
}


/* Fix overlapping dropdowns by raising the z-index of the active deck item */
.deck-item:has(.dropdown.show) {
    z-index: 100;
}

/* Loading Spinner */
.loader {
    width: 48px;
    height: 48px;
    border: 5px solid var(--border-color);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Brutalist Loading Animation */
.brutalist-loader {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.brutalist-loader .block {
    width: 24px;
    height: 32px;
    background: var(--bg-secondary);
    border: 3px solid var(--border-color);
    box-shadow: 4px 4px 0px var(--shadow-color);
    animation: brutal-bounce 0.6s infinite alternate cubic-bezier(0.8, 0, 0.2, 1);
}

.brutalist-loader .block:nth-child(2) {
    animation-delay: 0.2s;
    background: var(--bg-secondary);
}

.brutalist-loader .block:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes brutal-bounce {
    0% { transform: translateY(0); box-shadow: 4px 4px 0px var(--shadow-color); }
    100% { transform: translateY(-16px); box-shadow: 8px 20px 0px var(--shadow-color); }
}

@keyframes brutal-border-throb {
    0% { border-width: 8px; border-style: solid; border-color: var(--text-primary); }
    100% { border-width: 24px; border-style: solid; border-color: var(--text-primary); }
}

.animated-dots::after {
    content: '';
    animation: dots 1.5s infinite steps(1, end);
}

@keyframes dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}

.dropzone-loading {
    border-style: solid !important;
    animation: brutal-border-throb 0.3s infinite alternate cubic-bezier(0.8, 0, 0.2, 1) !important;
}

textarea {
    resize: vertical;
    font-family: inherit;
}

.deck-item.drag-over {
    background-color: var(--border-color) !important;
    transform: scale(1.02);
}

/* Markdown styling inside flashcards */
.flashcard-front p, .flashcard-back p {
    margin: 8px 0;
}
.flashcard-front > * > p:first-child, .flashcard-front > p:first-child {
    margin-top: 0;
}
.flashcard-front > * > p:last-child, .flashcard-front > p:last-child {
    margin-bottom: 0;
}

/* Markdown Typography */
.flashcard-inner code {
    font-family: monospace;
    background-color: var(--bg-primary);
    padding: 2px 4px;
    border: 2px solid var(--border-color);
    font-size: 0.9em;
}

.flashcard-inner pre {
    background-color: var(--bg-primary);
    border: 3px solid var(--border-color);
    padding: 12px;
    overflow-x: auto;
    text-align: left;
    box-shadow: 4px 4px 0px 0px var(--shadow-color);
    margin: 16px 0;
    width: 100%;
    box-sizing: border-box;
}

.flashcard-inner pre code {
    background-color: transparent;
    border: none;
    padding: 0;
    font-size: 14px;
}

.flashcard-inner ul, .flashcard-inner ol {
    text-align: left;
    margin: 8px 0;
    padding-left: 24px;
    width: 100%;
}

.flashcard-inner li {
    margin-bottom: 4px;
}

textarea { flex-shrink: 0; min-height: 80px; }


.dropzone-base {
    position: absolute;
    top: 8px; left: 8px; right: 8px; bottom: 8px;
    background: var(--bg-overlay);
    z-index: 100;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 4px dashed var(--text-primary);
}

/* Cloze styling */
.cloze-blank {
    display: inline-block;
    width: 80px;
    border-bottom: 2px dashed var(--text-primary);
    margin: 0 4px;
    vertical-align: baseline;
}

.cloze-highlight {
    background-color: #ffd000;
    color: #000;
    border: 2px solid #000;
    box-shadow: 2px 2px 0px #000;
    padding: 0 8px;
    font-weight: bold;
    display: inline-block;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.cloze-highlight-correct {
    background-color: #00cc00;
    color: #000;
}

.cloze-highlight-wrong {
    background-color: #ff4444;
    color: #fff;
}

/* Cloze answer feedback */
.cloze-correct {
    animation: correctPulse 0.6s ease;
}

.cloze-wrong {
    animation: wrongShake 0.5s ease;
}

@keyframes correctPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

@keyframes wrongShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}

#input-cloze.cloze-input-correct {
    border-color: #000 !important;
    background-color: #00cc00 !important;
    color: #000 !important;
    font-weight: bold;
}

#input-cloze.cloze-input-wrong {
    border-color: #000 !important;
    background-color: #ff4444 !important;
    color: #fff !important;
    font-weight: bold;
}

#cloze-input-container {
    text-align: left; /* Aligns the RIGHT/WRONG badge to the left */
}

/* Removed cloze-feedback styles */

/* Card mode toggle */
.card-mode-toggle {
    display: flex;
    gap: 0;
    border: 2px solid var(--border-color);
}

.mode-btn {
    flex: 1;
    padding: 8px 0;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mode-btn:first-child,
.card-mode-toggle .mode-btn:not(:last-child) {
    border-right: 2px solid var(--border-color);
}

.mode-btn.active {
    background: var(--text-primary);
    color: var(--bg-primary);
}

/* Brutalist Scrollbar */
::-webkit-scrollbar {
    width: 16px;
    height: 16px;
    background: var(--bg-primary);
    border-left: 3px solid var(--border-color);
}
::-webkit-scrollbar-thumb {
    background: var(--text-primary);
    border: 3px solid var(--border-color);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--hover-bg);
}
::-webkit-scrollbar-corner {
    background: var(--bg-primary);
    border-left: 3px solid var(--border-color);
    border-top: 3px solid var(--border-color);
}


.theme-menu {
    position: fixed;
    background: var(--bg-secondary);
    border: 4px solid var(--border-color);
    box-shadow: 4px 4px 0px 0px var(--shadow-color);
    z-index: 10000;
    display: none;
    flex-direction: column;
    min-width: 160px;
    max-height: min(480px, calc(100vh - 80px));
    overflow-y: auto;
}
.theme-option {
    padding: 12px 16px;
    border-bottom: 2px solid var(--border-color);
    cursor: pointer;
    font-weight: 900;
    font-size: 14px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: background 0.1s;
}
.theme-option:last-child {
    border-bottom: none;
}
.theme-option:hover {
    background: var(--hover-bg);
}
.theme-color-box {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
}

/* ===== MOVE-TO PICKER (popup + dashboard + mobile) ===== */
.move-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.move-modal {
    border: 4px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    box-shadow: 8px 8px 0px 0px var(--shadow-color);
    width: 100%;
    max-width: 440px;
    max-height: 85vh;
    max-height: 85dvh;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    box-sizing: border-box;
}

.move-modal h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
}

.move-subtitle {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.move-subtitle strong {
    color: var(--text-primary);
}

.move-list {
    display: flex;
    flex-direction: column;
    border: 3px solid var(--border-color);
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
}

.move-target {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    flex-shrink: 0;
    text-align: left;
    text-transform: none;
    font-size: 14px;
    border: none;
    border-bottom: 2px solid var(--border-color);
    box-shadow: none;
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.move-target:last-child {
    border-bottom: none;
}

.move-target:hover:not(:disabled),
.move-target:focus-visible {
    background: var(--hover-bg);
    transform: none;
    box-shadow: none;
}

.move-target:active:not(:disabled) {
    transform: none;
    box-shadow: none;
}

.move-target:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.move-target-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.move-tag {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    border: 2px solid currentColor;
    padding: 1px 6px;
}

.move-cancel {
    width: 100%;
    padding: 12px;
}

/* Shows where a new folder/deck will be created */
.location-hint {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.location-hint strong {
    color: var(--text-primary);
}

/* ===== SYNC STATUS ===== */
.sync-status-text {
    margin-bottom: 12px;
}

.sync-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 3px solid var(--border-color);
    box-shadow: 4px 4px 0px 0px var(--shadow-color);
    padding: 12px 16px;
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 700;
}

.sync-banner span {
    flex: 1 1 220px;
    min-width: 0;
}

/* ===== THEMES: swatches + quick menu (popup + dashboard) ===== */
.theme-tile {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 2px solid var(--border-color);
}

.theme-tile > span {
    width: 13px;
    height: 9px;
    border: 2px solid;
}

.theme-tile--lg {
    width: 36px;
    height: 36px;
}

.theme-tile--lg > span {
    width: 16px;
    height: 11px;
}

.theme-quick-menu {
    width: 280px;
    max-width: calc(100vw - 16px);
}

.tq-header {
    padding: 12px 14px;
    border-bottom: 3px solid var(--border-color);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-primary);
}

.theme-quick-menu .theme-option {
    width: 100%;
    min-height: 50px;
    border: none;
    border-bottom: 2px solid var(--border-color);
    box-shadow: none;
    text-align: left;
    font-family: inherit;
}

.theme-quick-menu .theme-option:hover,
.theme-quick-menu .theme-option:active {
    transform: none;
    box-shadow: none;
}

.theme-quick-menu .theme-option[aria-checked="true"] {
    background: var(--text-primary);
    color: var(--bg-secondary);
}

.tq-name {
    flex: 1;
    min-width: 0;
}

.tq-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 18px;
    text-align: center;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary);
    border-bottom: 3px solid var(--border-color);
}

.tq-empty strong {
    font-size: 14px;
    text-transform: uppercase;
    color: var(--text-primary);
}

.tq-empty-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px dashed var(--border-color);
    color: var(--text-primary);
}

.tq-browse {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 10px 14px;
    border: none;
    box-shadow: none;
    background: var(--bg-secondary);
    color: var(--text-primary);
    text-align: left;
    text-transform: none;
    font-family: inherit;
}

.tq-browse:hover,
.tq-browse:active {
    transform: none;
    box-shadow: none;
    background: var(--hover-bg);
}

.tq-browse span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tq-browse strong {
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.tq-browse small {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
}

/* ===== PRACTICE QUIZ DECKS: practice test (popup + dashboard) ===== */
.pt {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    color: var(--text-primary);
    /* Layout follows the space the test has (popup, phone, or dashboard pane) */
    container-type: inline-size;
}

.pt-panel {
    background: var(--bg-secondary);
    border: 4px solid var(--border-color);
    box-shadow: 6px 6px 0 var(--shadow-color);
    padding: 24px;
}

.pt-panel[hidden] {
    display: none;
}

.pt-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px;
}

.pt-kicker,
.pt-label,
.pt-rail-title,
.pt-q-type {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.pt-title {
    margin: 4px 0;
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.pt-meta,
.pt-progress {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.pt-header-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.pt-mode {
    min-width: 260px;
}

.pt-mode .mode-btn {
    padding: 10px 14px;
}

.pt-body {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.pt-rail {
    position: sticky;
    top: 0;
    padding: 16px;
    background: var(--bg-secondary);
    border: 4px solid var(--border-color);
    box-shadow: 6px 6px 0 var(--shadow-color);
}

.pt-rail-title {
    margin: 0 0 12px;
    color: var(--text-primary);
}

.pt-rail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.pt-rail-item {
    width: 100%;
    aspect-ratio: 1;
    min-height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 900;
    border: 2px solid var(--border-color);
    box-shadow: none;
}

.pt-rail-item.is-answered {
    background: var(--hover-bg);
}

.pt-rail-item.is-correct {
    border-color: #00cc00;
    box-shadow: inset 0 -4px 0 #00cc00;
}

.pt-rail-item.is-wrong {
    border-color: #ff4444;
    box-shadow: inset 0 -4px 0 #ff4444;
}

.pt-rail-item[aria-current="true"] {
    background: var(--text-primary);
    color: var(--bg-secondary);
}

.pt-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pt-question {
    background: var(--bg-secondary);
    border: 4px solid var(--border-color);
    box-shadow: 6px 6px 0 var(--shadow-color);
    padding: 24px;
    scroll-margin-top: 24px;
    outline: none;
}

.pt-question.is-correct {
    border-left: 10px solid #00cc00;
}

.pt-question.is-wrong {
    border-left: 10px solid #ff4444;
}

.pt-q-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pt-q-num {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--text-primary);
    color: var(--bg-secondary);
    font-size: 14px;
    font-weight: 900;
}

.pt-q-text {
    margin: 16px 0 20px;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.pt-blank {
    display: inline-block;
    width: 100px;
    height: 1em;
    vertical-align: -3px;
    border-bottom: 4px solid var(--text-primary);
}

.pt-choices {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pt-choices--tf {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pt-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 3px solid var(--border-color);
    box-shadow: 3px 3px 0 var(--shadow-color);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.pt-choice input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.pt-choice:not(:has(input:disabled)):hover {
    background: var(--hover-bg);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--shadow-color);
}

.pt-choice:has(input:focus-visible) {
    outline: 3px solid var(--text-primary);
    outline-offset: 3px;
}

.pt-choice:has(input:disabled) {
    cursor: default;
}

.pt-radio {
    position: relative;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    box-sizing: border-box;
    border: 3px solid currentColor;
    /* Round on purpose (the dashboard squares every corner): a square would read
       as a checkbox, but each question takes exactly one answer */
    border-radius: 50% !important;
}

.pt-choice.is-selected {
    background: var(--text-primary);
    color: var(--bg-secondary);
}

.pt-choice.is-selected .pt-radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50% !important;
    background: currentColor;
}

.pt-choice-text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.pt-choice-tag {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.pt-choice-tag:empty {
    display: none;
}

.pt-choice.is-correct {
    border-color: #00cc00;
    box-shadow: 3px 3px 0 #00cc00;
}

.pt-choice.is-correct .pt-choice-tag::before {
    content: '✓ ';
}

.pt-choice.is-wrong {
    border-color: #ff4444;
    box-shadow: 3px 3px 0 #ff4444;
}

.pt-choice.is-wrong .pt-choice-tag::before {
    content: '✗ ';
}

.pt-fitb {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.pt-fitb .pt-input {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    font-size: 16px;
}

.pt-fitb .pt-check[hidden] {
    display: none;
}

.pt-q-feedback:empty {
    display: none;
}

.pt-q-feedback {
    margin-top: 16px;
}

.pt-feedback {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin: 0;
    padding: 12px 14px;
    border: 3px solid;
    font-size: 14px;
}

.pt-feedback.is-correct {
    border-color: #00cc00;
}

.pt-feedback.is-wrong {
    border-color: #ff4444;
}

.pt-feedback-status {
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.pt-explanation {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.pt-link {
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    color: inherit;
    font-size: 12px;
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pt-link:hover,
.pt-link:active {
    background: none;
    transform: none;
    box-shadow: none;
}

.pt-results {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.pt-results-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    padding: 16px 24px;
    border: 4px solid var(--border-color);
}

.pt-results-value {
    font-size: 48px;
    font-weight: 900;
    line-height: 1;
}

.pt-results-label {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
}

.pt-results-body {
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pt-results-title {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
}

.pt-results-detail {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
}

.pt-results-note {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.pt-results-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pt-results-actions button {
    min-height: 44px;
    padding: 0 18px;
}

.pt-submit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.pt-submit-note {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
}

.pt-submit button {
    min-height: 48px;
    padding: 0 28px;
}

.pt-empty {
    padding: 24px;
    font-weight: 700;
    color: var(--text-secondary);
}

/* Narrow (extension popup, phones): question list becomes a strip */
@container (max-width: 760px) {
    .pt-panel,
    .pt-question {
        padding: 16px;
    }
    .pt-header-side {
        align-items: stretch;
        width: 100%;
    }
    .pt-mode {
        min-width: 0;
    }
    .pt-title {
        font-size: 20px;
    }
    .pt-body {
        display: block;
    }
    .pt-rail {
        z-index: 5;
        margin-bottom: 16px;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .pt-rail-title {
        margin: 0;
        flex-shrink: 0;
    }
    .pt-rail-list {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 6px;
        scrollbar-width: thin;
    }
    .pt-rail-list::-webkit-scrollbar {
        height: 6px;
        border: none;
    }
    .pt-rail-item {
        width: 36px;
        min-width: 36px;
    }
    .pt-question {
        scroll-margin-top: 80px;
    }
    .pt-q-text {
        font-size: 17px;
    }
    .pt-choice {
        padding: 12px 14px;
        font-size: 15px;
    }
}

/* Quiz deck tag in deck lists */
.deck-kind-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border: 2px solid var(--border-color);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    vertical-align: middle;
}

/* ===== CSV IMPORT HELP (popup + dashboard) ===== */
.import-help-intro {
    font-size: 13px;
}

.import-help-toggle {
    margin-bottom: 16px;
}

.import-help-panel {
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.import-help-panel[hidden] {
    display: none;
}

.import-help-panel p {
    margin: 0;
}

.import-help-code {
    font-weight: bold;
    font-family: monospace;
    font-size: 13px;
    background: var(--hover-bg);
    padding: 12px;
    border: 2px solid var(--border-color);
    text-align: center;
    overflow-wrap: anywhere;
}

.import-help-rule {
    border-left: 4px solid var(--border-color);
    padding-left: 12px;
}

.import-help-rule div {
    margin-top: 4px;
}

.import-help-tag {
    background: var(--hover-bg);
    padding: 2px 6px;
    border: 1px solid var(--border-color);
}

.import-help-note {
    color: var(--text-secondary);
}

.import-help-ai {
    margin: 20px 0;
    padding-top: 16px;
    border-top: 2px dashed var(--border-color);
    text-align: center;
    font-size: 13px;
}

.import-help-ai > span:first-child {
    color: var(--text-secondary);
}

.import-help-ai-link {
    color: var(--text-primary);
    font-weight: bold;
    text-decoration: underline;
    margin-left: 4px;
}

.import-help-ai-note {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* ===== GENERATE PRACTICE QUIZ (AI) form (popup + dashboard) ===== */
.aq {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.aq-intro {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

.aq-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aq-field input,
.aq-field textarea {
    margin: 0;
}

.aq-label {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.aq-hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary);
}

.aq-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 2px dashed var(--border-color);
}

.aq-file button {
    flex-shrink: 0;
}

.aq-file-name {
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aq-notes {
    min-height: 140px;
    resize: vertical;
}

.aq-error {
    margin: 0;
    padding: 10px 12px;
    border: 3px solid #ff4444;
    font-size: 13px;
    font-weight: 700;
}

.aq-error[hidden] {
    display: none;
}

.aq-actions {
    display: flex;
    gap: 12px;
}

.aq-actions button {
    flex: 1;
}
/* Multi-select: keep a gap between neighboring selected question types */
.aq .mode-btn.active + .mode-btn.active { box-shadow: inset 2px 0 0 var(--bg-secondary); }