/* --- Panel UI Styling --- */
.re-panel { position: fixed; bottom: 20px; right: 20px; z-index: 99999; font-family: sans-serif; color: #333; }
#re-toggle-btn { background: #0073aa; color: #fff; border: none; padding: 15px 18px; border-radius: 50%; cursor: pointer; font-size: 18px; font-weight: bold; box-shadow: 0 4px 6px rgba(0,0,0,0.2); transition: transform 0.2s; }
#re-toggle-btn:hover { transform: scale(1.05); }
.re-controls { background: #fff; border: 1px solid #ddd; padding: 15px; border-radius: 8px; position: absolute; bottom: 65px; right: 0; width: 280px; box-shadow: 0 4px 15px rgba(0,0,0,0.15); }
.re-hidden { display: none; }
.re-control-group { margin-bottom: 10px; display: flex; justify-content: space-between; gap: 8px; }
.re-control-group button { flex: 1; padding: 8px; cursor: pointer; border: 1px solid #ccc; background: #f9f9f9; border-radius: 4px; color: #333; font-size: 13px; }
.re-control-group button:hover { background: #e9e9e9; }
.re-controls select { font-size: 13px; color: #333; }

/* --- Theme Modes --- */
/* Dark */
body.re-dark-mode { background-color: #121212 !important; color: #e0e0e0 !important; }
body.re-dark-mode * { color: #e0e0e0 !important; border-color: #333 !important; background-color: transparent; }
body.re-dark-mode .re-controls, body.re-dark-mode .re-controls * { background-color: #222 !important; color: #fff !important; border-color: #444 !important; }

/* Sepia */
body.re-sepia-mode { background-color: #f4ecd8 !important; color: #433422 !important; }
body.re-sepia-mode * { color: #433422 !important; border-color: #d8c8b8 !important; background-color: transparent; }
body.re-sepia-mode .re-controls, body.re-sepia-mode .re-controls * { background-color: #faeed9 !important; border-color: #d8c8b8 !important; }

/* --- Fonts --- */
body.re-font-serif, body.re-font-serif * { font-family: Georgia, "Times New Roman", serif !important; }
body.re-font-mono, body.re-font-mono * { font-family: "Courier New", Courier, monospace !important; }
body.re-font-dyslexic, body.re-font-dyslexic * { font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif !important; letter-spacing: 0.05em !important; }

/* --- Line Spacing --- */
body.re-lh-tight, body.re-lh-tight * { line-height: 1.3 !important; }
body.re-lh-loose, body.re-lh-loose * { line-height: 2.0 !important; }

/* --- Distraction Free Mode --- */
body.re-focus-mode header,
body.re-focus-mode footer,
body.re-focus-mode .wp-block-comments,
body.re-focus-mode .wp-block-post-navigation-link {
    display: none !important;
}

/* Base reading column formatting */
body.re-focus-mode main {
    width: 100% !important;
    max-width: 800px !important; /* Base normal width */
    margin: 0 auto !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    transition: all 0.3s ease-in-out;
}

/* --- Margins / Width --- */
/* Placed below the focus mode so these specific rules win the CSS hierarchy */
body.re-width-narrow main { max-width: 550px !important; margin: 0 auto !important; }
body.re-width-wide main { max-width: 1100px !important; margin: 0 auto !important; }