/* Shared design variables, browser normalization, MathJax, and scrollbar base. */
:root {
            --primary-color: #4a90e2;
            --primary-dark: #357abd;
            --success-color: #d1fae5;  
            --success-text: #065f46;
            --success-pill: #10b981; 
            --error-color: #fee2e2;
            --error-text: #991b1b;
            --error-pill: #ef4444;
            --partial-bg: #fef3c7;
            --partial-text: #92400e;
            --partial-pill: #f59e0b; 
            --text-color: #333;
            --sub-text-color: #666;
            --bg-color: #f3f4f6;
            --card-bg: #ffffff;
            --border-color: #eee;
            --shadow-color: rgba(0,0,0,0.08);
            --highlight-bg: #e0f2fe;
            --highlight-text: #0284c7;
            --exp-bg: #f8f9fa;
            --exp-border: #e9ecef;
            --exp-title: #495057;
            --toggle-bg-off: #e5e7eb;
            --toggle-on-bg: #34d399;
            --toggle-text-active: #059669;
            --header-height: 60px;
            --footer-height: 70px;
            --scrollbar-thumb: rgba(0, 0, 0, 0.15);
            --scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);
            --search-match-bg: #fef08a;
            --search-match-text: #854d0e;
            --search-active-bg: #f59e0b;
            --search-active-text: #ffffff;
            --base-font-size: 15px;
            --font-scale: 1; 
            --vh: var(--app-height, 100vh);
        }

        html.is-wechat {
            --safe-bottom: 0px !important; 
        }

        html[data-theme="dark"] {
            --primary-color: #3A3A3A;
            --primary-dark: #505050;

            --text-color: #E5E5E5;
            --sub-text-color: #A0A0A0;
            --bg-color: #121212;
            --card-bg: #1C1C1C;

            --border-color: #2A2A2A;
            --shadow-color: rgba(0, 0, 0, 0.6);

            --highlight-bg: #2B2B2B;
            --highlight-text: #DDDDDD;

            --success-color: #142017;  
            --success-text: #7BCF93;
            --success-pill: #34d399;

            --error-color: #241516;
            --error-text: #D28888;
            --error-pill: #f87171;
            
            --partial-bg: #262015;
            --partial-text: #D6B47A;
            --partial-pill: #fbbf24;

            --exp-bg: #252525;
            --exp-border: #333;
            --exp-title: #aaa;

            --toggle-bg-off: #2C2C2C;  
            --toggle-on-bg: #2e7d56;   
            --toggle-text-active: #7BCF93;
            
            --scrollbar-thumb: rgba(255, 255, 255, 0.2);
            --scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
            
            --search-match-bg: #634d1b;
            --search-match-text: #e2e8f0;
            --search-active-bg: #d97706;
            --search-active-text: #ffffff;
        }

        mjx-container {
            font-size: 0.94em;
            font-weight: normal !important;
            font-style: normal !important;
            display: inline-block !important; 
            vertical-align: middle !important;
            position: relative !important;
            top: -1.4px !important;
            max-width: 100% !important;
            overflow-x: auto !important;
            overflow-y: hidden;
            margin: 0 1px !important;
            padding: 0 !important;
            box-sizing: border-box;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        mjx-container[display="true"] {
            display: flex !important;
            width: 100% !important;
            justify-content: center;
            margin: 1em 0 !important;
            padding: 0 !important;
        }
        mjx-container svg {
            display: block !important; 
            fill: currentColor !important;
            max-width: none !important;
            flex-shrink: 0;
        }
        mjx-container[display="false"] {
            width: fit-content !important; 
        }
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        html, 
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            height: var(--app-height, var(--vh, 100vh));
            overflow: hidden;

            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            transition: background-color var(--duration-normal), color var(--duration-normal);
        }