/* --- CORE VARIABLES & RESET --- */
        :root {
            --bg-body: #ececec;
            --bg-white: #ffffff;
            --header-dark: #293846; /* Top dark bar */
            --uscpa-blue: #232325;
            --accent-orange: #d74c15; /* Highlight Orange */
            --text-dark: #333333;
            --text-light: #555555;
            --border-color: #dcdcdc;
            --shadow-card: 0 1px 3px rgba(0,0,0,0.1);
            --font-main: "Open Sans", Helvetica, Arial, sans-serif;
        }

        * { box-sizing: border-box; }
        
        body {
            margin: 0;
            padding: 0;
            font-family: var(--font-main);
            background-color: var(--bg-body);
            height: 100vh;
            display: flex;
            flex-direction: column;
            color: var(--text-dark);
            font-size: 14px;
        }

        /* --- UTILITY CLASSES --- */
        .flex { display: flex; }
        .full-height { height: 100%; }
        
        /* --- CARD LAYOUT (Selection, Launch, Intro, Break) --- */
        .card-stage {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            overflow-y: auto;
        }
        .card {
            background: var(--bg-white);
            max-width: 900px;
            width: 100%;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            border-radius: 4px;
            display: flex;
            flex-direction: column;
        }
        .card-header {
            background: var(--header-dark);
            color: white;
            padding: 15px 25px;
            font-size: 18px;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .card-body { padding: 40px; }
        .card-footer {
            padding: 20px 40px;
            display: flex;
            justify-content: center;
            gap: 15px;
        }

        /* --- BUTTONS --- */
        .btn {
            border: none;
            padding: 5px 15px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            border-radius: 1px;
            transition: background 0.2s;
        }
        .btn-primary { background-color: #b43e10; color: white; }
        .btn-primary:hover { background-color: #5a2009; }
        .btn-secondary { background-color: white; border: 1px solid var(--uscpa-blue); color: var(--uscpa-blue); }
        .btn-secondary:hover { background-color: #f0f0ff; }
        .btn-orange { background-color: var(--accent-orange); color: white; }
        .btn-orange:hover { background-color: #b43e10; }

        /* --- EXAM SELECTION GRID --- */
        .exam-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 20px; }
        .exam-tile {
            border: 1px solid #ccc; border-radius: 4px; padding: 25px;
            text-align: center; cursor: pointer; transition: all 0.2s; background: white;
        }
        .exam-tile:hover {
            border-color: var(--uscpa-blue);
            box-shadow: 0 2px 8px rgba(41, 52, 150, 0.2);
            transform: translateY(-2px);
        }
        .exam-tile strong { display: block; font-size: 24px; color: var(--uscpa-blue); margin-bottom: 5px; }
        .exam-tile span { color: #666; font-size: 12px; }

        /* --- LAUNCH/AUTH STYLES --- */
        .launch-info-row { display: flex; margin-bottom: 25px; border-bottom: 1px solid #eee; padding-bottom: 25px; }
        .launch-code-box {
            background: #f4f4f4; padding: 15px; text-align: center; border: 1px dashed #999;
            margin: 20px 0; font-family: monospace; font-size: 24px; letter-spacing: 2px; color: var(--text-dark);
        }
        .auth-input { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; margin-bottom: 10px; }

        /* --- BREAK SCREENS --- */
        .break-timer-large {
            font-size: 60px; font-weight: bold; color: var(--header-dark); margin: 20px 0;
            font-family: "Roboto Condensed", sans-serif;
        }
        .break-warning {
            background-color: #fff3cd; color: #856404; padding: 15px; border: 1px solid #ffeeba;
            border-radius: 4px; display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
        }

        /* --- MAIN EXAM UI STRUCTURE --- */
        #exam-ui { display: flex; flex-direction: column; height: 100vh; }

        /* 1. Header Ribbon */
        .exam-header {
            background: var(--bg-white); border-bottom: 1px solid var(--border-color);
            display: flex; flex-direction: column; box-shadow: 0 1px 4px rgba(0,0,0,0.05); z-index: 100;
        }
        .top-blue-bar {
            background: var(--header-dark); height: 40px; color: white;
            display: flex; justify-content: space-between; align-items: center;
            padding: 0 20px; font-size: 16px; font-weight: 700;
        }
        .testlet-compass {
            display: flex; background: #f3f3f3; height: 35px; border-bottom: 1px solid #ddd;
            align-items: center; padding-left: 20px;
        }
        /* Compass Styles Updated */
        .compass-item {
            font-size: 12px; 
            color: #888; 
            margin-right: 20px;
            display: flex; 
            align-items: center; 
            gap: 6px;
        }
        .compass-item.active { color: var(--accent-orange); font-weight: bold; }
        .compass-item.completed { color: #888; } /* Blue for completed */
        .compass-item.future { color: #aaa; } /* Gray for future */
        
        /* Remove old dot, use icon box */
        .compass-icon-box i { font-size: 14px; }
        .compass-item.active .compass-icon-box { color: var(--accent-orange); }
        .compass-item.completed .compass-icon-box { color: #888; }

        /* 2. Tool & Timer Bar */
        .tool-bar {
            height: 55px; display: flex; align-items: center; justify-content: space-between;
            background: white; padding: 0 20px; border-bottom: 1px solid #ddd;
        }
        .timer-box {
            background: #293846; color: white; padding: 5px 15px; border-radius: 4px;
            text-align: center; font-family: "Roboto Condensed", sans-serif; min-width: 100px;
        }
        .timer-time { font-size: 18px; font-weight: bold; letter-spacing: 1px; }
        .timer-label { font-size: 10px; opacity: 0.8; }

        .tools-group { display: flex; gap: 0; border-left: 1px solid #eee; height: 100%; }
        .tool-btn {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            background: none; border: none; border-right: 1px solid #eee; width: 70px;
            cursor: pointer; color: #555; transition: background 0.1s;
        }
        .tool-btn:hover { background: #f9f9f9; color: var(--uscpa-blue); }
        .tool-btn i { font-size: 18px; margin-bottom: 4px; }
        .tool-btn span { font-size: 10px; font-weight: 600; }
        .submit-group { display: flex; gap: 5px; margin-left: 20px; }

        /* 4. Main Content Area */
        .workspace { 
            flex: 1; 
            display: flex; 
            background: #ececec; 
            padding: 8px; 
            justify-content: center; 
            overflow: hidden; /* Prevent workspace itself from scrolling */
        }

        /* Ensure content panel flexes correctly */
        .content-panel {
            flex: 0 1 70%; 
            background: white; 
            border-left: 4px solid var(--accent-orange);
            max-width: 1000px; 
            width: 95%; 
            height: 100%; 
            min-height: 0;
            display: flex; 
            flex-direction: column; 
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }        

        /* MCQ Styles */
        .mcq-question { font-size: 16px; margin-bottom: 25px; line-height: 1.5; color: #222; }
        .mcq-option {
            display: flex; align-items: flex-start; padding: 12px; margin-bottom: 8px;
            cursor: pointer; border: 1px solid transparent; border-radius: 4px;
        }
        .mcq-option:hover { background-color: #f4f8fb; }
        .mcq-option.selected { background-color: #e8f0fe; border-color: #d2e3fc; }
        .radio-circle {
            width: 20px; height: 20px; border: 2px solid #757575; border-radius: 50%;
            margin-right: 15px; margin-top: 2px; display: flex; align-items: center; justify-content: center;
        }
        .mcq-option.selected .radio-circle { border-color: var(--uscpa-blue); }
        .mcq-option.selected .radio-circle::after {
            content: ''; width: 10px; height: 10px; background: var(--uscpa-blue); border-radius: 50%;
        }
                        
        .cpa-grid { width: 100%; border-collapse: collapse; font-size: 13px; }
        .cpa-grid th { background: #e9ecef; border: 1px solid #ced4da; padding: 8px; font-weight: 600; text-align: center; }
        .cpa-grid td { border: 1px solid #ced4da; padding: 0; height: 32px; background: white; }
        .cpa-input {
            width: 100%; height: 100%; border: none; padding: 0 8px; outline: none; font-family: inherit;
        }
        .cpa-input:focus { background: #e8f0fe; }
        .currency-cell { position: relative; }
        .currency-symbol { position: absolute; left: 5px; top: 7px; color: #666; pointer-events: none; font-size: 11px; }

        /* Scrollbars */
        ::-webkit-scrollbar { width: 10px; height: 10px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 5px; }
        ::-webkit-scrollbar-thumb:hover { background: #aaa; }
        /* --- NEW BREAK SCREEN STYLES (Reference Matches) --- */
        .break-content { max-width: 800px; margin: 0 auto; text-align: left; }
        
        .break-content .content-area { padding: 30px; font-size: 15px; color: #333; }
        .break-content .content-area p { margin-bottom: 15px; }
        .break-content .bold-text { font-weight: 700; color: #000; }
        .break-content ul { margin: 15px 0; padding-left: 30px; }
        .break-content li { margin-bottom: 8px; }
        
        .break-content .action-area {
            background: #f2f2f2; padding: 20px; border-top: 1px solid #ddd;
            display: flex; justify-content: flex-end; gap: 15px;
        }

        .icon-clock-text { display: flex; align-items: center; gap: 10px; font-weight: bold; font-size: 16px; margin-bottom: 20px; color: var(--header-dark); }
        .icon-clock-text i { font-size: 20px; }
        .icon-clock-text.stop i { color: var(--accent-orange); } /* Pause Clock Color */

        .countdown-container { 
            display: flex; align-items: center; gap: 10px; font-weight: bold; color: var(--uscpa-blue);
        }
        
        /* Compass overrides for Break Screens */
        .on-break-compass { background: #f3f3f3; border-bottom: 1px solid #ccc; padding: 10px 20px; display: flex; }

        /* --- NEW NAVIGATION & QUESTION LIST STYLES --- */
        
        /* Wrapper for the list of numbers (1 2 3 4...) */
        .q-list-wrapper {
            display: flex;
            flex-wrap: wrap; /* Wraps to next line */
            justify-content: center; /* Center in middle */
            gap: 5px;
            padding: 10px 0;
            max-width: 80%; /* Forces wrapping much earlier than full screen */
            margin-left: auto; /* Centers the wrapper */
            margin-right: auto; /* Centers the wrapper */
        }

        /* Individual Number Item */
        .q-num-item {
            display: flex;             /* Enables flexbox for the item */
            align-items: center;       /* Centers content vertically */
            justify-content: center;   /* Centers content horizontally */
            cursor: pointer;
            font-size: 13px;
            color: #333;
            font-weight: 700; /* Default bold */
            position: relative;
            user-select: none;
            overflow: visible;
            min-width: 35px; 
            width: 35px;     
            height: 20px;
            flex-shrink: 0;
            padding: 0;
        }

        /* Answered State: Unbolded */
        .q-num-item.answered {
            font-weight: normal; 
            color: #555;
        }

        /* Selected (Current) State: Bigger & Orange */
        .q-num-item.selected {
            font-size: 18px; /* Bigger */
            color: var(--accent-orange);
            font-weight: bold;
        }
        .num-text {
            position: relative;
            display: inline-block;
        }
        .q-num-flag {
            position: absolute;
            left: auto;
            right: -10px;
            top: 3px;  
            font-size: 8px;
            color: var(--accent-orange);
            white-space: nowrap;
        }
                
        .tbs-container {
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow: hidden;
        }

        /* Top Exhibit Bar */
        .tbs-exhibit-bar {
            background: #f0f0f0;
            border: 1px solid #ccc;
            padding: 8px;
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 15px;
            margin: 0 10px;
        }
        .exhibit-header-label {
            font-weight: bold;
            color: #555;
            font-size: 12px;
        }
        .exhibit-btn-group {
            display: flex;
            gap: 5px;
        }
        .exhibit-btn {
            background: white;
            border: 1px solid #ccc;
            padding: 5px 10px;
            border-radius: 3px;
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .exhibit-btn:hover {
            background: #fff8e1;
        }

        /* Full Width Content */
        .tbs-content-full {
            flex: 1;
            overflow-y: auto;
            padding: 10px 10px;
            width: 100%;
        }
        .tbs-inner-wrap {
            width: 100%;
            max-width: 65%;   /* Width constraint moves here */
            margin: 0 auto;   /* Center the content */
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 0 10px;  /* Add padding here instead */
        }

        /* 3. Ensure the nav bar inside the wrapper has breathing room at bottom */
        .tbs-inner-wrap .nav-bottom-bar-centered {
            padding-bottom: 30px;
            margin-top: auto;
        }

        /* --- TOAST NOTIFICATION STYLES --- */
        .toast-container {
            position: fixed;
            top: 80px; /* Below the top headers */
            left: 50%;
            transform: translateX(-50%);
            z-index: 3000;
            pointer-events: none;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .toast {
            background-color: #333;
            color: #fff;
            padding: 12px 24px;
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            font-size: 14px;
            font-weight: 600;
            opacity: 0;
            transform: translateY(-20px);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .toast.show {
            opacity: 1;
            transform: translateY(0);
        }

        .toast.error {
            background-color: #d74c15; /* Warning Orange */
            color: white;
        }

        .toast.success {
            background-color: #28a745;
            color: white;
        }
        .tbs-intro {
            margin-bottom: 20px;
            line-height: 1.6;
            color: #333;
        }
        
        .tbs-grid-wrapper {
            background: white;
        }

        /* Ensure MCQ container takes full height for bottom nav positioning */
        .mcq-container {
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow: hidden; /* Container itself does not scroll */
            padding: 0;
        }
        .mcq-scroll-pane {
            flex: 1;
            overflow-y: auto;
            width: 100%;
            padding-top: 20px;
        }

        /* Centered content wrapper */
        .mcq-inner-wrap {
            width: 100%;
            max-width: 65%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            min-height: min-content; /* Ensure it takes space */
        }
        .mcq-body {
            width: 100%;
        }

        /* --- NEW HEADER CONTROL ROW (Triangles + Number + Flag) --- */
        .q-header-control-row {
            display: flex;
            align-items: center;
            justify-content: flex-start; /* Aligns left generally, but we want arrows hugging number */
            gap: 10px;
            padding: 10px 20px;
        }

        .q-number-display {
            position: relative;
            display: flex;
            align-items: center;
            padding-right: 5px; /* Space for the flag */
        }

        .q-title-text {
            font-size: 24px;
            font-weight: bold;
            color: var(--accent-orange);
            line-height: 1;
        }

        /* Nav Triangle Buttons (Transparent, just the icon) */
        .nav-triangle-btn {
            background: none;
            border: none;
            cursor: pointer;
            color: #555;
            font-size: 18px;
            padding: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .nav-triangle-btn:hover:not(:disabled) {
            color: var(--accent-orange);
        }
        .nav-triangle-btn:disabled {
            color: #ccc;
            cursor: default;
        }
        .nav-triangle-btn.large {
            font-size: 24px; /* Larger for bottom bar */
        }

        /* Flag Toggle Button - Upper Right next to number */
        .flag-toggle-btn {
            position: absolute;
            top: -5px;
            right: -10px;
            background: none;
            border: none;
            cursor: pointer;
            color: #ccc; /* Default grey */
            font-size: 12px;
            padding: 2px;
        }
        .flag-toggle-btn:hover { background: none; color: #999; }
        .flag-toggle-btn.active { 
            color: var(--accent-orange); 
        }

        /* --- CENTERED BOTTOM NAV --- */
        .nav-bottom-bar-centered {
            margin-top: auto;
            display: flex;
            justify-content: center; /* Center the arrows */
            align-items: center;
            gap: 40px; /* Space between Prev and Next */
            padding: 15px 0;
            background: #fff;
        }
        /* --- NEW SUBMIT MODAL STYLES --- */
        .modal-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2000;
        }

        .card-container.unattempted-list {
            background: white;
            width: 600px;
            max-width: 90%;
            border-radius: 4px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .card-container .content-area {
            padding: 30px;
            color: #333;
        }

        .card-container .header {
            color: #b43e10; /* Orange warning color */
            font-size: 18px;
            margin-top: 0;
            margin-bottom: 15px;
            font-weight: bold;
        }

        .card-container .action-area {
            background: #f2f2f2;
            padding: 20px;
            border-top: 1px solid #ccc;
            display: flex;
            justify-content: space-between;
        }

        /* --- DRS WIDGET STYLES (ACDC Widget) --- */
        
        /* The Link/Placeholder */
        .drs-placeholder {
            display: inline-flex;
            align-items: center;
            padding: 5px 10px;
            text-decoration: none;
            cursor: pointer;
            min-width: 250px;
            justify-content: space-between;
            font-weight: 500;
        }
        .drs-placeholder:hover {
            background: #eef;
            border-color: var(--uscpa-blue);
        }
        .drs-placeholder-text {
            margin-right: 10px;
        }
        
        /* Checkbox inside the link */
        .drs-placeholder-checkbox {
            pointer-events: none; 
        }

        /* The Popup Container (Hidden by default in HTML) */
        .drs-options-container {
            position: absolute; /* Usually positioned via JS libraries, but absolute for now */
            background: white;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            width: 400px;
            z-index: 500;
            margin-top: 5px;
            border-radius: 4px;
        }

        .drs-options-widget-panel {
            display: flex;
            flex-direction: column;
        }

        .drs-panel-title {
            background: #293846;
            color: white;
            padding: 10px 15px;
            font-weight: bold;
            font-size: 14px;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
        }

        .options-list {
            padding: 0;
            margin: 0;
            border: none;
            max-height: 300px;
            overflow-y: auto;
        }

        .drs-option {
            border-bottom: 1px solid #eee;
        }
        
        .drs-option label {
            display: flex;
            align-items: flex-start;
            padding: 5px 5px;
            cursor: pointer;
            width: 100%;
        }
        .drs-option:hover {
            background-color: #f0f8ff;
        }

        .drs-option-radio {
            margin-right: 10px;
            align-self: center;
        }
        
        .drs-option-text-snippet {
            font-size: 13px;
        }

        /* Footer of the widget popup */
        .drs-options-container .action-area {
            padding: 10px 15px;
            background: #f9f9f9;
            border-top: 1px solid #ddd;
            display: flex;
            justify-content: flex-end;
        }
        /* Styling for the List Icon Button */
        .drs-trigger-btn {
            background: none;
            border: 1px solid transparent;
            cursor: pointer;
            color: var(--uscpa-blue); /* or #293846 */
            padding: 2px 6px;
            border-radius: 3px;
            transition: all 0.2s;
            font-size: 14px;
            margin: 0 5px;
        }

        .drs-trigger-btn:hover {
            background-color: #e8f0fe;
            color: var(--accent-orange);
        }

        /* Ensure the popup floats on top */
        .drs-options-container {
            position: absolute;
            top: 100%; /* Pushes it right below the text line */
            left: 0;
            width: 400px;
            z-index: 9999; /* High Z-index to float over everything */
            background: white;
            border: 1px solid #ccc;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            border-radius: 4px;
        }

        /* Helper class */
        .hidden {
            display: none !important;
        }

        html, body {
            -webkit-text-size-adjust: none; /* Chrome, Safari, newer iOS */
            -moz-text-size-adjust: none;    /* Firefox */
            text-size-adjust: none;         /* Standard */
        }

        /* --- DEMO / SIMULATION SPECIFIC STYLES --- */

        /* 1. The big background watermark */
        .demo-watermark {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-30deg);
            font-size: clamp(1rem, 8vw, 7rem); /* Scales with viewport */
            font-weight: 900;
            color: rgba(0, 0, 0, 0.04); /* Very faint grey */
            pointer-events: none; /* Allows clicking through it */
            z-index: 9999; /* Sits on top of everything visually */
            white-space: nowrap;
            user-select: none;
            font-family: Arial, sans-serif;
        }

        /* 2. The disclaimer box on the main screen */
        .simulation-alert {
            background-color: #fff3cd;
            border: 1px solid #ffeeba;
            color: #856404;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 20px;
            font-size: 14px;
            text-align: left;
            line-height: 1.5;
        }
        footer {
            text-align: center;
            padding-top: 1rem;
            color: #e4e4e7;
            font-size: 0.9rem;
        }