/* === OGA Modern Theme === */
        :root {
            --oga-orange: #FF9800;
            --oga-orange-dark: #F57C00;
            --oga-white: #FFFFFF;
            --oga-steel-gray-dark: #424242;
            --oga-steel-gray-medium: #757575;
            --oga-steel-gray-light: #E0E0E0;
            --oga-glass-bg: rgba(255, 255, 255, 0.15);
            --oga-glass-bg-darker: rgba(0, 0, 0, 0.2);
            --oga-glass-border: rgba(255, 255, 255, 0.25);
            --oga-text-light: ghostwhite;
            --oga-text-light-secondary: #BDBDBD;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            line-height: 1.6;
            color: var(--oga-text-light);
            background: linear-gradient(135deg, var(--oga-steel-gray-medium) 0%, var(--oga-steel-gray-light) 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 40px 15px;
            min-height: 100vh;
        }

        .background-container {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1002%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(45%2c 41%2c 41%2c 1)'%3e%3c/rect%3e%3cg transform='translate(0%2c 0)' stroke-linecap='round' stroke='url(%26quot%3b%23SvgjsRadialGradient1003%26quot%3b)'%3e%3cpath d='M150 255.09 L150 304.9' stroke-width='15'%3e%3c/path%3e%3cpath d='M170 131.96 L170 428.04' stroke-width='15'%3e%3c/path%3e%3cpath d='M190 114.42 L190 445.58' stroke-width='15'%3e%3c/path%3e%3cpath d='M210 114.44 L210 445.56' stroke-width='15'%3e%3c/path%3e%3cpath d='M230 213.51 L230 346.49' stroke-width='15'%3e%3c/path%3e%3cpath d='M250 226.82 L250 333.18' stroke-width='15'%3e%3c/path%3e%3cpath d='M270 242.19 L270 317.81' stroke-width='15'%3e%3c/path%3e%3cpath d='M290 132.03 L290 427.97' stroke-width='15'%3e%3c/path%3e%3cpath d='M310 75.97 L310 484.03' stroke-width='15'%3e%3c/path%3e%3cpath d='M330 140.17 L330 419.83' stroke-width='15'%3e%3c/path%3e%3cpath d='M350 79.03 L350 480.97' stroke-width='15'%3e%3c/path%3e%3cpath d='M370 238.71 L370 321.29' stroke-width='15'%3e%3c/path%3e%3cpath d='M390 63.29 L390 496.71' stroke-width='15'%3e%3c/path%3e%3cpath d='M410 124.6 L410 435.4' stroke-width='15'%3e%3c/path%3e%3cpath d='M430 104.31 L430 455.69' stroke-width='15'%3e%3c/path%3e%3cpath d='M450 197.12 L450 362.88' stroke-width='15'%3e%3c/path%3e%3cpath d='M470 240.84 L470 319.16' stroke-width='15'%3e%3c/path%3e%3cpath d='M490 70.62 L490 489.38' stroke-width='15'%3e%3c/path%3e%3cpath d='M510 197.34 L510 362.66' stroke-width='15'%3e%3c/path%3e%3cpath d='M530 185.75 L530 374.25' stroke-width='15'%3e%3c/path%3e%3cpath d='M550 233.06 L550 326.94' stroke-width='15'%3e%3c/path%3e%3cpath d='M570 97.81 L570 462.19' stroke-width='15'%3e%3c/path%3e%3cpath d='M590 95.45 L590 464.55' stroke-width='15'%3e%3c/path%3e%3cpath d='M610 96.88 L610 463.12' stroke-width='15'%3e%3c/path%3e%3cpath d='M630 177.42 L630 382.58' stroke-width='15'%3e%3c/path%3e%3cpath d='M650 105.92 L650 454.08' stroke-width='15'%3e%3c/path%3e%3cpath d='M670 186.93 L670 373.07' stroke-width='15'%3e%3c/path%3e%3cpath d='M690 256.46 L690 303.54' stroke-width='15'%3e%3c/path%3e%3cpath d='M710 93.61 L710 466.39' stroke-width='15'%3e%3c/path%3e%3cpath d='M730 110.04 L730 449.96' stroke-width='15'%3e%3c/path%3e%3cpath d='M750 196.95 L750 363.05' stroke-width='15'%3e%3c/path%3e%3cpath d='M770 178.28 L770 381.72' stroke-width='15'%3e%3c/path%3e%3cpath d='M790 218.09 L790 341.92' stroke-width='15'%3e%3c/path%3e%3cpath d='M810 74.78 L810 485.22' stroke-width='15'%3e%3c/path%3e%3cpath d='M830 83.28 L830 476.73' stroke-width='15'%3e%3c/path%3e%3cpath d='M850 183.53 L850 376.48' stroke-width='15'%3e%3c/path%3e%3cpath d='M870 249.84 L870 310.17' stroke-width='15'%3e%3c/path%3e%3cpath d='M890 123.81 L890 436.19' stroke-width='15'%3e%3c/path%3e%3cpath d='M910 183.99 L910 376.01' stroke-width='15'%3e%3c/path%3e%3cpath d='M930 66.54 L930 493.46' stroke-width='15'%3e%3c/path%3e%3cpath d='M950 236.62 L950 323.38' stroke-width='15'%3e%3c/path%3e%3cpath d='M970 109.81 L970 450.19' stroke-width='15'%3e%3c/path%3e%3cpath d='M990 133.38 L990 426.63' stroke-width='15'%3e%3c/path%3e%3cpath d='M1010 208.34 L1010 351.65' stroke-width='15'%3e%3c/path%3e%3cpath d='M1030 218.09 L1030 341.91' stroke-width='15'%3e%3c/path%3e%3cpath d='M1050 248.28 L1050 311.71' stroke-width='15'%3e%3c/path%3e%3cpath d='M1070 191.13 L1070 368.87' stroke-width='15'%3e%3c/path%3e%3cpath d='M1090 141.13 L1090 418.88' stroke-width='15'%3e%3c/path%3e%3cpath d='M1110 249.12 L1110 310.88' stroke-width='15'%3e%3c/path%3e%3cpath d='M1130 84.91 L1130 475.09' stroke-width='15'%3e%3c/path%3e%3cpath d='M1150 211.07 L1150 348.93' stroke-width='15'%3e%3c/path%3e%3cpath d='M1170 246.77 L1170 313.23' stroke-width='15'%3e%3c/path%3e%3cpath d='M1190 158.69 L1190 401.31' stroke-width='15'%3e%3c/path%3e%3cpath d='M1210 218.26 L1210 341.74' stroke-width='15'%3e%3c/path%3e%3cpath d='M1230 113.88 L1230 446.12' stroke-width='15'%3e%3c/path%3e%3cpath d='M1250 187.94 L1250 372.06' stroke-width='15'%3e%3c/path%3e%3cpath d='M1270 185.73 L1270 374.27' stroke-width='15'%3e%3c/path%3e%3cpath d='M1290 180.03 L1290 379.97' stroke-width='15'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1002'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cradialGradient cx='720' cy='280' r='625.75' gradientUnits='userSpaceOnUse' id='SvgjsRadialGradient1003'%3e%3cstop stop-color='rgba(0%2c 0%2c 0%2c 1)' offset='0.25'%3e%3c/stop%3e%3cstop stop-color='rgba(255%2c 124%2c 0%2c 1)' offset='1'%3e%3c/stop%3e%3c/radialGradient%3e%3c/defs%3e%3c/svg%3e");
            background-repeat: repeat-y; background-size: contain; background-position: center;
        }

        h1 { margin-bottom: 40px; color: var(--oga-white); font-weight: 600; text-align: center; text-shadow: 0 2px 4px rgba(0,0,0,0.3); font-size: 2.5em; }

        /* === Glassmorphic Section Styling === */
        .static-chart-section,
        .comparison-container {
            width: 100%; max-width: 950px; margin: 0 auto 40px auto; padding: 25px 30px;
            background: var(--oga-glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--oga-glass-border); border-radius: 12px;
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
        }

        .static-chart-section h2,
        .comparison-container h2 {
            text-align: center; margin-top: 0; margin-bottom: 15px; color: var(--oga-white); font-size: 1.6em;
            font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }

        .section-description { text-align: center; margin-bottom: 25px; color: var(--oga-text-light-secondary); line-height: 1.5; max-width: 750px; margin-left: auto; margin-right: auto; }

        .chart-wrapper { max-width: 800px; margin: 0 auto; position: relative; height: 350px; }
        .chart-wrapper canvas { max-width: 100%; }

        /* === OGA Themed Buttons === */
        .oga-button {
            display: inline-block; padding: 12px 28px; background-color: var(--oga-orange); color: var(--oga-white) !important;
            border: none; border-radius: 5px; font-size: 1rem; font-weight: bold; cursor: pointer; text-decoration: none;
            transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
            box-shadow: 0 3px 6px rgba(0,0,0,0.1);
        }
        .oga-button:hover { background-color: var(--oga-orange-dark); transform: translateY(-2px); box-shadow: 0 5px 10px rgba(0,0,0,0.15); }
        .oga-button:active { transform: translateY(0) scale(0.98); }

        /* === Comparison Tool Styles === */
        .comparison-selection { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 15px; margin-top: 25px; margin-bottom: 30px; }
        .comparison-selection label { display: flex; align-items: center; cursor: pointer; font-size: 0.95em; color: var(--oga-text-light); }
        .comparison-selection input[type="checkbox"] { margin-right: 10px; cursor: pointer; width: 18px; height: 18px; accent-color: var(--oga-orange); }
        .compare-button { display: block; width: fit-content; margin: 0 auto 30px auto; }
        
        .comparison-result { margin-top: 30px; display: none; overflow-x: auto; }
        .comparison-result h3 { text-align: center; margin-bottom: 20px; color: var(--oga-white); }
        .comparison-result .comparison-table { width: 100%; border-collapse: collapse; min-width: 600px; font-size: 0.9em; background: var(--oga-glass-bg-darker); border-radius: 8px; overflow: hidden; }
        .comparison-result .comparison-table th, .comparison-result .comparison-table td { border: 1px solid var(--oga-glass-border); padding: 10px 12px; text-align: left; vertical-align: middle; }
        .comparison-result .comparison-table th { background-color: rgba(0,0,0,0.2); font-weight: 600; position: sticky; top: 0; z-index: 2; color: var(--oga-orange); }
        .comparison-result .comparison-table td:first-child, .comparison-result .comparison-table th:first-child { position: sticky; left: 0; background-color: rgba(0,0,0,0.2); z-index: 1; font-weight: 500; min-width: 150px; white-space: nowrap; }
        .comparison-result .comparison-table td:first-child { background-color: transparent; }
        .comparison-result .comparison-table td { text-align: center; }
        .comparison-result .comparison-table td:first-child { text-align: left; color: var(--oga-steel-gray-light); }
        .highlight-score { background-color: rgba(255, 152, 0, 0.3); color: var(--oga-white); font-weight: 600; }
        .teaching-comparison-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 20px; }
        .teaching-comparison-item { background: var(--oga-glass-bg); backdrop-filter: blur(5px); padding: 15px; border-radius: 8px; border-left: 4px solid var(--oga-orange); }
        .teaching-comparison-item h4 { margin-top: 0; margin-bottom: 10px; color: var(--oga-orange); }
        .teaching-comparison-item ul { padding-left: 20px; margin-bottom: 0; font-size: 0.9em; color: var(--oga-text-light); }
        .teaching-comparison-item li { margin-bottom: 5px; line-height: 1.5;}

        /* === Slider Styles === */
        .slider-container { width: 100%; max-width: 550px; margin: 0 auto 40px auto; overflow: hidden; position: relative; }
        .slider-wrapper { display: flex; transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
        .slider-card {
            flex: 0 0 100%; box-sizing: border-box; padding: 35px 45px; text-align: center;
            background: var(--oga-glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--oga-glass-border); border-radius: 12px;
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
            opacity: 0.5; transform: scale(0.95);
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
            will-change: opacity, transform;
        }
        .slider-card.active { opacity: 1; transform: scale(1); }
        .slider-card h3 { margin-top: 0; margin-bottom: 20px; color: var(--oga-orange); font-size: 1.6em; font-weight: 600; }
        .chart-container { max-width: 340px; max-height: 340px; margin: 0 auto 30px auto; position: relative; background: rgba(255,255,255,0.1); border-radius: 50%; padding:10px; }
        .slider-card .description { font-size: 1em; color: var(--oga-text-light-secondary); line-height: 1.5; min-height: 65px; margin-bottom: 20px; }
        .slider-card .total-score { font-weight: 600; font-size: 1.15em; color: var(--oga-white); margin-bottom: 25px; }
        .slider-card:not(.active) .view-profile-btn { pointer-events: none; }
        .slider-nav { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.4); color: var(--oga-orange); border: 1px solid var(--oga-glass-border); width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 22px; font-weight: bold; border-radius: 50%; cursor: pointer; z-index: 10; transition: background-color 0.2s ease-out, transform 0.1s ease-out; }
        .slider-nav:hover { background-color: rgba(0, 0, 0, 0.6); }
        .slider-nav:active { transform: translateY(-50%) scale(0.95); }
        .prev-btn { left: -15px; }
        .next-btn { right: -15px; }

        /* === Modal Styles === */
        .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); backdrop-filter: blur(5px); padding-top: 40px; }
        .modal-content {
            background: var(--oga-glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--oga-glass-border);
            margin: auto; width: 90%; max-width: 800px; border-radius: 12px; position: relative;
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
            animation: fadeInModal 0.3s ease-out; padding: 0; display: flex; flex-direction: column; max-height: 90vh;
        }
        @keyframes fadeInModal { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
        .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; border-bottom: 1px solid var(--oga-glass-border); position: sticky; top: 0; background: rgba(0,0,0,0.1); z-index: 10; }
        .modal-close-btn { color: var(--oga-steel-gray-light); font-size: 32px; font-weight: bold; line-height: 1; border: none; background: none; cursor: pointer; padding: 0 5px; order: 2; transition: color 0.2s; }
        .modal-close-btn:hover, .modal-close-btn:focus { color: var(--oga-white); }
        .download-btn { order: 1; }
        #modal-body { padding: 25px 30px; overflow-y: auto; }
        #modal-body .archetype-header { text-align: center; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid var(--oga-glass-border); }
        #modal-body .archetype-header h1 { font-size: 1.2em; color: var(--oga-text-light-secondary); margin-bottom: 5px; }
        #modal-body .archetype-header h2 { font-size: 1.8em; margin-bottom: 10px; color: var(--oga-orange); }
        #modal-body .archetype-header .learning-power-modal { font-size: 1.1em; font-weight: bold; color: var(--oga-white); }
        #modal-body .archetype-description-modal { font-size: 1.05em; margin-bottom: 30px; background-color: var(--oga-glass-bg-darker); padding: 15px 20px; border-radius: 8px; line-height: 1.6; }
        #modal-body .score-section-modal { margin-bottom: 30px; }
        #modal-body .score-section-modal h3 { margin-bottom: 15px; color: var(--oga-white); text-align: center; }
        .modal-chart-container { max-width: 420px; max-height: 420px; margin: 0 auto 35px auto; background: rgba(255,255,255,0.1); border-radius: 50%; padding: 10px; }
        .modal-chart-container canvas { max-width: 100%; height: auto !important; }
        #modal-body .score-grid-modal { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-bottom: 30px; }
        #modal-body .dimension-box-modal { background-color: var(--oga-glass-bg-darker); padding: 20px; border-radius: 8px; }
        #modal-body .dimension-title-modal { font-weight: 600; margin-bottom: 15px; font-size: 1.1em; color: var(--oga-orange); text-align: center; }
        #modal-body .dimension-score-modal { display: flex; align-items: center; margin-bottom: 12px; font-size: 0.95em; }
        #modal-body .dimension-label-modal { width: 45%; font-weight: 500; color: var(--oga-text-light); padding-right: 10px; }
        #modal-body .dimension-bar-container-modal { width: 45%; height: 18px; background-color: rgba(0,0,0,0.3); border-radius: 9px; overflow: hidden; }
        #modal-body .dimension-bar-modal { height: 100%; background-color: var(--oga-orange); border-radius: 9px; transition: width 0.5s ease-out; }
        #modal-body .dimension-value-modal { padding-left: 10px; font-weight: 600; color: var(--oga-white); min-width: 45px; text-align: right; }
        #modal-body .teaching-box-modal { background-color: var(--oga-glass-bg-darker); padding: 20px 25px; margin-top: 30px; border-radius: 8px; border-left: 5px solid var(--oga-orange); }
        #modal-body .teaching-box-modal h3 { margin-top: 0; margin-bottom: 15px; color: var(--oga-orange); font-size: 1.2em;}
        #modal-body .teaching-box-modal p, #modal-body .teaching-box-modal ul, #modal-body .teaching-box-modal li { color: var(--oga-text-light); font-size: 0.95em; }
        #modal-body .teaching-box-modal ul { padding-left: 20px; margin-bottom: 0; }
        #modal-body .teaching-box-modal li { margin-bottom: 8px; line-height: 1.5;}