:root {
      --font-size: 16px;
      --button-font-size: 16px;
      --heading-font-size: 22px;
    }
    body {
        font-family: Arial, sans-serif;
        margin: 20px;
        background-color: #fff;
        color: #000;
        transition: background-color 0.3s, color 0.3s;
        font-size: var(--font-size);
    }
    .page { display: none; }
    .page.active { display: block; }
    button, .button-link {
        padding: 5px 10px;
        font-size: var(--button-font-size);
        margin-right: 10px;
        transition: font-size 0.3s;
        text-decoration: none;
        color: #000;
        border: 1px solid #666;
        background-color: #f0f0f0;
        cursor: pointer;
        display: inline-block;
        line-height: normal;
    }
    #exam_container {
        font-size: var(--font-size);
        transition: font-size 0.3s;
    }
    #question { margin-bottom: 20px; }
    #options { margin: 10px 0; }
    #options .option-item {
        display: flex;
        align-items: center;
        padding: 8px 0;
        font-size: var(--font-size);
    }
    #options input[type="radio"] {
        cursor: pointer;
        transform: scale(1.5);
        margin-right: 8px;
    }
    @media (max-width: 600px) {
        #options input[type="radio"] {
            transform: scale(2.2);
            margin-right: 10px;
        }
    }
    #options .option-item.selected { background-color: #d0eaff; }
    .nav-buttons { margin-top: 20px; }
    .nav-buttons button { margin-right: 10px; }
    .action-buttons {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0;
        vertical-align: middle;
    }
    .action-buttons button {
        margin-right: 0;
        margin-bottom: 6px;
    }
    .action-buttons button.active {
        border-width: 2px;
        font-weight: bold;
    }
    .action-buttons button:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }
    #remaining_time { margin-top: 20px; color: red; font-size: var(--font-size); }
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      border: 0;
      overflow: hidden;
      clip: rect(0,0,0,0);
    }
    #exam_container.big-font-mode {
        font-size: calc(var(--font-size) * 1.8);
    }
    #exam_container.big-font-mode button {
        font-size: calc(var(--button-font-size) * 1.7);
        padding: 8px 16px;
    }
    #exam_container.big-font-mode h2 {
        font-size: calc(var(--heading-font-size) * 1.8);
    }
    body.high-contrast {
        background-color: #000;
        color: #fff;
    }
    body.high-contrast input,
    body.high-contrast select,
    body.high-contrast button,
    body.high-contrast .button-link {
        background-color: #000;
        color: #fff;
        border: 1px solid #fff;
    }
    body.high-contrast #options .option-item.selected { background-color: #333; }
    #practice_settings { margin-top: 30px; text-align: center; }
    #practice_settings select { padding: 10px; font-size: var(--font-size); margin-right: 10px; }
    #practice_options .practice_choice { display: inline-flex; align-items: center; margin-right: 20px; font-size: var(--font-size); }
    #practice_options .practice_choice input[type="radio"] { cursor: pointer; margin-right: 6px; }
    h2 { font-size: var(--heading-font-size); }
    html { background: #f4f7f5; }
    body {
        margin: 0;
        background: linear-gradient(180deg, #edf5f1 0, #f8faf9 280px);
        color: #17201b;
        line-height: 1.65;
    }
    .page.active {
        width: min(100%, 980px);
        margin: 0 auto;
        padding: 26px;
        box-sizing: border-box;
    }
    h2 {
        margin: 0 0 18px;
        color: #102018;
        font-weight: 700;
    }
    button, .button-link {
        min-height: 44px;
        padding: 10px 16px;
        border-radius: 8px;
        border-color: #b9c7c0;
        background: #fff;
        color: #102018;
        box-shadow: 0 1px 2px rgba(16, 32, 24, 0.08);
    }
    button:hover, .button-link:hover {
        border-color: #1f6f5b;
    }
    button:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }
    #start_practice_button,
    #next_button,
    #submit_button,
    #quick_submit_button {
        background: #1f6f5b;
        border-color: #1f6f5b;
        color: #fff;
        font-weight: 700;
    }
    #exam_container,
    #practice_settings_page,
    #result_page {
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid #dbe6e1;
        border-radius: 8px;
        box-shadow: 0 14px 38px rgba(30, 52, 42, 0.12);
    }
    #exam_container {
        padding: 28px;
    }
    #practice_settings_page,
    #result_page {
        margin-top: 20px;
    }
    #practice_settings {
        text-align: left;
    }
    #practice_settings select,
    #practice_settings input[type="number"] {
        min-height: 44px;
        border: 1px solid #b9c7c0;
        border-radius: 8px;
        background: #fff;
        color: #102018;
    }
    #practice_settings label {
        display: inline-flex;
        align-items: center;
        margin: 8px 8px 8px 0;
    }
    #question {
        margin-bottom: 24px;
    }
    #question_text {
        margin: 0 0 18px;
        font-size: 1.16em;
        font-weight: 700;
        line-height: 1.75;
    }
    #options {
        display: grid;
        gap: 12px;
        margin: 18px 0 24px;
    }
    #options .option-item {
        min-height: 58px;
        padding: 14px 16px;
        border: 1px solid #d6e1dc;
        border-radius: 8px;
        background: #fff;
        line-height: 1.6;
    }
    #options .option-item.selected {
        background-color: #e5f2ed;
        border-color: #1f6f5b;
        box-shadow: inset 4px 0 0 #1f6f5b;
    }
    #options input[type="radio"] {
        margin-right: 12px;
    }
    .nav-buttons {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        margin-top: 24px;
    }
    .nav-buttons button,
    .action-buttons button {
        margin: 0;
    }
    .action-buttons {
        gap: 8px;
    }
    .action-buttons button.active {
        border-color: #b7791f;
        background: #fff7e6;
        color: #4a2a00;
    }
    @media (max-width: 700px) {
        .page.active {
            padding: 12px;
        }
        #exam_container,
        #practice_settings_page,
        #result_page {
            padding: 16px;
            box-shadow: none;
        }
        #question_text {
            font-size: 1.18em;
        }
        #options {
            gap: 14px;
        }
        #options .option-item {
            min-height: 64px;
            padding: 16px;
        }
        .nav-buttons {
            gap: 8px;
        }
        .nav-buttons > button,
        .action-buttons button {
            flex: 1 1 calc(50% - 8px);
        }
        .action-buttons {
            display: flex;
            width: 100%;
            margin-top: 8px;
        }
        #practice_settings select,
        #practice_settings input[type="number"],
        #practice_settings label,
        #question_count_wrap,
        #bank_settings_wrap,
        #bank_select_wrap {
            width: 100%;
            box-sizing: border-box;
        }
    }