/* ============================================================
   BASE — Reset, CSS Variables (Light/Dark Themes), Body Styles
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

        html { scroll-behavior: smooth; }

        /* ============================================================
           LIGHT THEME — Premium Design System
        ============================================================ */
        :root, [data-theme="light"] {
            --bg:           #F7F8FA;
            --bg-card:      #FFFFFF;
            --bg-input:     #F2F3F5;
            --bg-th:        #ECEEF0;
            --bg-nav:       rgba(247, 248, 250, 0.82);
            --hover-bg:     rgba(0,0,0,0.025);

            --text-primary:   #0F1419;
            --text-secondary: #536471;
            --text-tertiary:  #8899A6;

            --border:        rgba(0,0,0,0.06);
            --border-strong: rgba(0,0,0,0.12);

            --teal:          #00939E;
            --teal-hover:    #007A84;
            --teal-light:    #E6F7F8;
            --teal-glow:     rgba(0, 147, 158, 0.15);

            --gold:          #A87B00;
            --gold-light:    #FEF6DC;

            --green:         #1A7F37;
            --green-light:   #E6F7EC;

            --red:           #C0392B;
            --red-light:     #FDF0EF;
            
            --progress-bg:   #E8F5E9;
            --progress-bar:  #1A7F37;

            --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.03);
            --shadow-md: 0 4px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
            --shadow-lg: 0 12px 40px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);

            --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px;
            --transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
            --transition-slow: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            --transition-linear: all 0.18s ease;
        }

        /* ============================================================
           DARK THEME — Premium Design System
        ============================================================ */
        [data-theme="dark"] {
            --bg:           #0A0F14;
            --bg-card:      #141B22;
            --bg-input:     #0D141A;
            --bg-th:        #0D171E;
            --bg-nav:       rgba(10, 15, 20, 0.88);
            --hover-bg:     rgba(255,255,255,0.04);

            --text-primary:   #F1F5F9;
            --text-secondary: #94A3B8;
            --text-tertiary:  #64748B;

            --border:        rgba(255,255,255,0.06);
            --border-strong: rgba(255,255,255,0.12);

            --teal:          #2ECBD6;
            --teal-hover:    #45D8E2;
            --teal-light:    rgba(46, 203, 214, 0.12);
            --teal-glow:     rgba(46, 203, 214, 0.2);

            --gold:          #E0AD1C;
            --gold-light:    rgba(224, 173, 28, 0.12);

            --green:         #3DD68C;
            --green-light:   rgba(61, 214, 140, 0.1);

            --red:           #FF7878;
            --red-light:     rgba(255, 120, 120, 0.12);
            
            --progress-bg:   rgba(61, 214, 140, 0.15);
            --progress-bar:  #3DD68C;

            --shadow-sm: 0 1px 2px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.2);
            --shadow-md: 0 4px 16px rgba(0,0,0,0.35), 0 1px 4px rgba(0,0,0,0.25);
            --shadow-lg: 0 12px 40px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3);
        }

        /* ============================================================
           BASE & NAV
        ============================================================ */
        body { font-family: 'DM Sans', sans-serif; background-color: var(--bg); color: var(--text-primary); min-height: 100vh; -webkit-font-smoothing: antialiased; transition: background-color 0.4s ease, color 0.4s ease; line-height: 1.6; }