/* GENERAL */

body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
background:#f3f4f6;
touch-action:manipulation;
overscroll-behavior-y:contain;
--practice-header-height:60px;
--practice-palette-height:58px;
--practice-controls-height:64px;
}

html.dark body{
background:#09090b;
color:#f4f4f5;
}

html.dark .header{
background:#18181b;
border-bottom:1px solid #27272a;
box-shadow:0 10px 28px rgba(0,0,0,.22);
}

html.dark .mode-switch,
html.dark .question-area,
html.dark .sidebar,
html.dark .controls{
background:#18181b;
border-color:#27272a;
color:#f4f4f5;
}

html.dark .mode-label,
html.dark .section-switch-label,
html.dark .section-switch-meta,
html.dark .status,
html.dark .question-number,
html.dark .question-text,
html.dark .candidate{
color:#e4e4e7;
}

html.dark .header-icon-btn,
html.dark .header-action-btn{
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.14);
}

html.dark .header-icon-btn:hover,
html.dark .header-action-btn:hover{
background:rgba(255,255,255,.14);
border-color:rgba(255,255,255,.22);
}

html.dark .btn,
html.dark .tools button,
html.dark .section-switch-btn,
html.dark .section-tab{
background:#111113;
border-color:#3f3f46;
color:#e4e4e7;
}

html.dark .btn:hover,
html.dark .tools button:hover,
html.dark .section-switch-btn:hover,
html.dark .section-tab:hover{
background:#27272a;
}

html.dark .primary,
html.dark .submit{
color:#fff;
}

html.dark .primary{
background:#2563eb;
border-color:#2563eb;
}

html.dark .submit{
background:#2563eb;
border-color:#2563eb;
}

html.dark .section-switch-menu{
background:#18181b;
border-color:#3f3f46;
box-shadow:0 18px 36px rgba(0,0,0,.36);
}

html.dark .section-switch-option{
color:#e4e4e7;
}

html.dark .section-switch-option:hover,
html.dark .section-switch-option.active,
html.dark .section-switch-option.is-active{
background:#27272a;
}

html.dark .palette-bar{
background:#111113;
border-color:#27272a;
}

html.dark .default{
background:#3f3f46;
color:#e4e4e7;
}

html.dark .current{
background:#2563eb;
border-color:#60a5fa;
}

html.dark .option{
background:#111113;
border-color:#3f3f46;
color:#f4f4f5;
}

html.dark .option:hover{
background:#27272a;
}

html.dark .option.correct{
background:rgba(30,58,138,.42);
border-color:rgba(59,130,246,.55);
}

html.dark .option.incorrect{
background:rgba(127,29,29,.38);
border-color:rgba(248,113,113,.5);
}

html.dark .explanation-box{
background:#111113;
border-color:#3f3f46;
color:#e4e4e7;
}

html.dark .resume-card,
html.dark .practice-choice-card,
html.dark #reportModal > div{
background:#18181b !important;
border-color:#27272a !important;
color:#f4f4f5 !important;
}

html.dark .resume-card-title,
html.dark .practice-choice-title,
html.dark #reportModal h3{
color:#f4f4f5 !important;
}

html.dark .resume-card-summary,
html.dark .practice-choice-summary,
html.dark #reportModal p{
color:#a1a1aa !important;
}

html.dark .resume-card-icon,
html.dark .practice-choice-icon{
background:rgba(29,78,216,.2);
color:#60a5fa;
}

html.dark .practice-choice-icon{
background:rgba(59,130,246,.16);
color:#60a5fa;
}

html.dark .resume-card-eyebrow{
color:#60a5fa;
}

html.dark .resume-primary-btn{
background:#2563eb;
border-color:#2563eb;
}

html.dark .resume-primary-btn:hover{
background:#1d4ed8;
border-color:#1d4ed8;
}

html.dark .resume-secondary-btn:hover{
background:rgba(29,78,216,.2);
border-color:#2563eb;
color:#60a5fa;
}

html.dark .resume-secondary-btn,
html.dark .practice-choice-secondary-btn{
background:#111113;
border-color:#3f3f46;
color:#e4e4e7;
}

html.dark textarea,
html.dark #reportMessage{
background:#111113 !important;
border-color:#3f3f46 !important;
color:#f4f4f5 !important;
}

html.dark textarea::placeholder{
color:#71717a;
}

/* HEADER */

.header{
position:fixed;
top:0;
left:0;
right:0;
height:60px;
background:#1e3a8a;
color:white;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,auto) minmax(0,1fr);
align-items:center;
gap:16px;
padding:0 20px;
z-index:1000;
font-size:14px;
box-sizing:border-box;
}

.header-left,
.header-right{
display:flex;
align-items:center;
gap:12px;
min-width:0;
}

.header-right{
margin-left:auto;
justify-self:end;
}

#headerTitle{
font-weight:700;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

#timerText{
font-weight:600;
white-space:nowrap;
order:2;
}

#fullscreenBtn{
order:1;
}

#practiceSettingsBtn{
order:3;
}

.header-icon-btn,
.header-action-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
height:38px;
border-radius:10px;
border:1px solid rgba(255,255,255,.24);
background:rgba(255,255,255,.12);
color:#fff;
cursor:pointer;
transition:background .2s ease,border-color .2s ease;
}

.header-icon-btn{
width:38px;
padding:0;
flex:0 0 38px;
}

.header-action-btn{
padding:0 12px;
font-size:13px;
font-weight:600;
white-space:nowrap;
}

.header-icon-btn:hover,
.header-action-btn:hover{
background:rgba(255,255,255,.2);
border-color:rgba(255,255,255,.36);
}

.header-icon-btn i,
.header-action-btn i{
width:18px;
height:18px;
}

.resume-overlay,
.practice-choice-overlay{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:24px;
background:rgba(15,23,42,.54);
z-index:1600;
}

.resume-overlay[hidden],
.practice-choice-overlay[hidden]{
display:none;
}

.resume-card,
.practice-choice-card{
width:min(100%,460px);
background:#fff;
border-radius:20px;
box-shadow:0 30px 80px rgba(15,23,42,.24);
padding:24px;
border:1px solid #e5e7eb;
}

.resume-card-top,
.practice-choice-top{
display:flex;
align-items:flex-start;
gap:14px;
margin-bottom:18px;
}

.resume-card-icon,
.practice-choice-icon{
width:46px;
height:46px;
flex:0 0 46px;
display:flex;
align-items:center;
justify-content:center;
border-radius:14px;
background:#eef2ff;
color:#4f46e5;
}

.resume-card-icon{
background:#eff6ff;
color:#2563eb;
}

.practice-choice-icon{
background:#eff6ff;
color:#2563eb;
}

.resume-card-icon i,
.practice-choice-icon i{
width:22px;
height:22px;
}

.resume-card-eyebrow,
.practice-choice-eyebrow{
margin:0 0 6px;
font-size:12px;
font-weight:700;
letter-spacing:.04em;
text-transform:uppercase;
color:#6366f1;
}

.resume-card-eyebrow{
color:#1d4ed8;
}

.practice-choice-eyebrow{
color:#2563eb;
}

.resume-card-title,
.practice-choice-title{
margin:0;
font-size:22px;
font-weight:700;
color:#0f172a;
}

.resume-card-summary,
.practice-choice-summary{
margin:8px 0 0;
font-size:14px;
line-height:1.6;
color:#475569;
}

.resume-card-actions,
.practice-choice-actions{
display:flex;
justify-content:flex-end;
gap:12px;
}

.resume-secondary-btn,
.resume-primary-btn,
.practice-choice-secondary-btn,
.practice-choice-primary-btn{
height:44px;
padding:0 18px;
border-radius:12px;
font-size:14px;
font-weight:700;
cursor:pointer;
transition:background .2s ease,border-color .2s ease,transform .2s ease;
}

.resume-secondary-btn,
.practice-choice-secondary-btn{
border:1px solid #cbd5e1;
background:#fff;
color:#334155;
}

.resume-primary-btn,
.practice-choice-primary-btn{
border:1px solid #4f46e5;
background:#4f46e5;
color:#fff;
}

.resume-primary-btn{
border-color:#2563eb;
background:#2563eb;
}

.practice-choice-primary-btn{
border-color:#2563eb;
background:#2563eb;
}

.resume-secondary-btn:hover,
.resume-primary-btn:hover,
.practice-choice-secondary-btn:hover,
.practice-choice-primary-btn:hover{
transform:translateY(-1px);
}

.practice-choice-secondary-btn:hover{
border-color:#bfdbfe;
background:#eff6ff;
color:#1d4ed8;
}

.resume-secondary-btn:hover{
border-color:#93c5fd;
background:#eff6ff;
color:#1d4ed8;
}

.resume-primary-btn:hover{
border-color:#1d4ed8;
background:#1d4ed8;
}

.resume-secondary-btn:focus-visible,
.resume-primary-btn:focus-visible{
outline:3px solid rgba(59,130,246,.28);
outline-offset:2px;
}

.practice-choice-primary-btn:hover{
border-color:#1d4ed8;
background:#1d4ed8;
}

body.resume-overlay-open,
body.practice-choice-overlay-open{
overflow:hidden;
}

.desktop-only{
display:inline-flex;
}

.mobile-settings-btn{
display:none;
}

/* MOBILE QUESTION PALETTE */

.palette-bar{
display:none;
contain:layout paint;
}

.palette{
width:38px;
height:38px;
flex:0 0 38px;
display:flex;
align-items:center;
justify-content:center;
border-radius:4px;
font-size:14px;
cursor:pointer;
box-sizing:border-box;
}

.default{background:#d1d5db;}
.answered{background:#2563eb;color:white;}
.notanswered{background:#dc2626;color:white;}
.review{background:#7c3aed;color:white;}
.current{background:#2563eb;color:white;border:2px solid #1d4ed8;}

/* LAYOUT */

.layout{
display:flex;
margin-top:0;
height:calc(100vh - var(--practice-controls-height));
padding-top:var(--practice-header-height);
box-sizing:border-box;
}

.mode-switch{
display:flex;
gap:14px;
align-items:center;
justify-content:center;
flex-wrap:nowrap;
position:relative;
z-index:1;
justify-self:center;
min-width:0;
max-width:min(760px,48vw);
color:#111827;
padding:0 2px;
}

.mode-label{
font-size:13px;
color:#4b5563;
font-weight:600;
white-space:nowrap;
}

@media(min-width:901px){
.header .mode-switch{
gap:16px;
width:520px;
max-width:520px;
justify-content:center;
}

.header .mode-label{
color:#fff;
opacity:.86;
font-size:13px;
font-weight:600;
}

.header .section-chip-prefix{
color:#475569;
opacity:1;
font-size:13px;
font-weight:600;
}

.header .mode-label{
margin-right:-8px;
}

.header .mode-switch > .btn{
box-shadow:none;
transition:background .18s ease,border-color .18s ease,color .18s ease;
}

.header .mode-switch > .btn:hover{
background:#fff !important;
border-color:#fff !important;
color:#1e3a8a !important;
}

.header .section-switch-wrap:not([hidden]){
display:inline-flex;
width:280px;
flex:0 0 280px;
}

.header .section-tabs{
display:none !important;
}

.header .section-switch-btn{
height:30px;
min-height:30px;
width:100%;
min-width:0;
max-width:none;
padding:0 8px 0 10px;
border-radius:6px;
font-size:13px;
gap:5px;
background:#fff;
border-color:rgba(255,255,255,.9);
color:#1e3a8a;
box-shadow:none;
}

.header .section-switch-btn i{
width:14px;
height:14px;
flex:0 0 14px;
color:#0f172a;
margin-left:4px;
}

.header .section-switch-current{
min-width:0;
flex:1 1 auto;
max-width:none;
color:#1e3a8a;
font-weight:700;
text-align:left;
}

.header .section-switch-menu{
left:0;
right:auto;
width:100%;
min-width:100%;
box-sizing:border-box;
}
}

.section-switch-wrap{
position:relative;
display:none;
align-items:center;
flex:none;
}

.section-switch-wrap[hidden],
.section-switch-menu[hidden],
.section-tabs[hidden]{
display:none;
}

.section-tabs{
display:inline-flex;
align-items:center;
justify-content:flex-start;
gap:6px;
flex-wrap:wrap;
min-width:0;
max-width:100%;
margin-left:24px;
padding-left:24px;
border-left:1px solid #e5e7eb;
}

.section-tabs::before{
content:"Change Section:";
font-size:13px;
font-weight:600;
color:#4b5563;
white-space:nowrap;
}

.section-tab{
display:inline-flex;
align-items:center;
gap:6px;
max-width:220px;
padding:6px 12px;
border:1px solid #ccc;
background:#fff;
color:#111827;
border-radius:4px;
font-size:14px;
font-weight:400;
cursor:pointer;
white-space:nowrap;
}

.section-tab:hover,
.section-tab.active{
background:#eef2ff;
border-color:#c7d2fe;
color:#3730a3;
}

.section-tab-name{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.section-tab-meta{
display:none;
}

.section-switch-btn{
display:inline-flex;
align-items:center;
gap:6px;
height:30px;
padding:6px 10px;
border:1px solid #cbd5e1;
background:#fff;
color:#111827;
border-radius:4px;
font-size:13px;
font-weight:600;
cursor:pointer;
white-space:nowrap;
flex:none;
}

@media(min-width:901px){
.header .mode-switch > .btn{
height:30px;
min-height:30px;
padding:0 12px !important;
border-radius:6px;
font-size:13px;
line-height:1;
}
}

.section-switch-btn:hover{
background:#f8fafc;
}

.section-switch-btn i{
width:15px;
height:15px;
}

.section-switch-current{
max-width:150px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#4338ca;
}

.section-switch-menu{
position:absolute;
top:calc(100% + 8px);
right:0;
width:min(340px,calc(100vw - 24px));
max-height:min(360px,calc(100vh - 150px));
overflow:auto;
background:#fff;
border:1px solid #dbe3f0;
border-radius:12px;
box-shadow:0 18px 45px rgba(15,23,42,.2);
padding:8px;
z-index:1300;
}

.section-switch-option{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
border:0;
background:transparent;
border-radius:8px;
padding:10px 12px;
text-align:left;
cursor:pointer;
color:#0f172a;
}

.section-switch-option:hover,
.section-switch-option.active{
background:#eef2ff;
}

.section-switch-option.active{
color:#1e3a8a;
font-weight:700;
}

.section-switch-name{
font-size:13px;
font-weight:700;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.section-switch-meta{
font-size:11px;
color:#64748b;
white-space:nowrap;
}

/* QUESTION AREA */

.question-area{
flex:1;
background:white;
padding:28px 26px 120px;
overflow:auto;
user-select:none;
-webkit-user-select:none;
touch-action:manipulation;
contain:layout paint style;
border-right:1px solid #e5e7eb;
}

body.practice-submitted .layout{
margin-top:var(--practice-header-height);
height:calc(100vh - var(--practice-header-height));
}

body.practice-submitted .question-area{
padding-bottom:32px;
overflow-y:auto;
}

.question-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:18px;
}

.question-number{
font-weight:bold;
font-size:17px;
margin-bottom:0;
}

/* BOOKMARK + REPORT */

.tools{
display:flex;
align-items:center;
gap:10px;
}

.tools button{
display:flex;
align-items:center;
gap:6px;
height:34px;
padding:7px 10px;
border:1px solid #e5e7eb;
background:white;
color:#64748b;
cursor:pointer;
border-radius:4px;
font-size:13px;
white-space:nowrap;
}

.tools button:hover{
background:#f8fafc;
border-color:#dbe3f0;
color:#475569;
}

.tools svg{
width:18px;
height:18px;
}

/* QUESTION TEXT */

.question-text{
font-size:18px;
line-height:1.61;
margin-bottom:24px;
}

.question-text:empty{
display:none;
}

.practice-instruction-card{
border:1px solid #dbeafe;
background:#eff6ff;
border-radius:10px;
padding:12px;
margin-bottom:18px;
line-height:1.6;
color:#1e3a8a;
}

.practice-question-card{
border:0;
border-radius:0;
padding:0;
margin-bottom:0;
background:#fff;
}

.practice-question-prompt{
line-height:1.61;
margin-bottom:24px;
font-size:18px;
}

/* OPTIONS */

.options{
display:flex;
flex-direction:column;
gap:12px;
}

.option{
min-height:46px;
box-sizing:border-box;
padding:12px 16px;
border:1px solid #d1d5db;
border-radius:6px;
cursor:pointer;
display:flex;
align-items:center;
gap:10px;
font-size:16px;
line-height:1.45;
}

.option input[type="radio"]{
width:16px;
height:16px;
flex-shrink:0;
margin:0;
}

.option:hover{
background:#f9fafb;
}

.option.selected{
border-color:#2563eb;
background:#eff6ff;
}

.option.correct{
border-color:#2563eb;
background:#ecfdf5;
}

.option.incorrect{
border-color:#dc2626;
background:#fef2f2;
}

.option.disabled{
cursor:not-allowed;
opacity:1;
}

.option.answer-locked{
cursor:pointer;
}

.explanation-box{
margin-top:16px;
padding:12px;
border:1px solid #d1d5db;
border-radius:6px;
background:#f8fafc;
line-height:1.5;
display:none;
}

.descriptive-answer-box{
margin-top:22px;
padding:16px;
border:1px solid #dbe3f0;
border-radius:12px;
background:#f8fafc;
}

.descriptive-answer-box[hidden]{display:none;}

.descriptive-meta{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
flex-wrap:wrap;
margin-bottom:10px;
}

.descriptive-meta span{
font-size:12px;
font-weight:700;
color:#475569;
}

.descriptive-meta .descriptive-word-limit-warning{color:#b91c1c;}

.descriptive-answer-input{
display:block;
width:100%;
min-height:380px;
box-sizing:border-box;
padding:14px;
border:1px solid #cbd5e1;
border-radius:10px;
background:#fff;
color:#111827;
font:inherit;
font-size:15px;
line-height:1.65;
resize:vertical;
user-select:text;
-webkit-user-select:text;
}

.descriptive-answer-input:focus{
outline:none;
border-color:#2563eb;
box-shadow:0 0 0 3px rgba(37,99,235,.14);
}

.descriptive-save-status{
min-height:18px;
margin-top:8px;
font-size:12px;
color:#64748b;
}

.descriptive-save-status.is-saving{color:#1d4ed8;}
.descriptive-save-status.is-saved{color:#1d4ed8;}
.descriptive-save-status.is-error{color:#b91c1c;}

/* SIDEBAR */

.sidebar{
width:260px;
background:white;
border-left:0;
padding:16px 14px 96px;
overflow:auto;
contain:layout paint style;
}

/* USER */

.candidate{
display:flex;
align-items:center;
gap:10px;
margin-bottom:0;
padding:0 2px 14px;
font-weight:bold;
border-bottom:1px solid #e5e7eb;
}

/* STATUS */

.status{
padding:14px 2px 4px;
font-size:14px;
line-height:1.4;
margin-bottom:10px;
border-bottom:1px solid #e5e7eb;
}

.status-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}

.status-row > span:first-child{
display:flex;
align-items:center;
gap:8px;
min-width:0;
color:#4b5563;
}

.status-row > span:last-child{
font-weight:700;
}

.status-dot{
width:8px;
height:8px;
border-radius:999px;
flex:0 0 8px;
background:#94a3b8;
}

.answered-dot{background:#2563eb;}
.notanswered-dot{background:#dc2626;}
.review-dot{background:#7c3aed;}
.total-dot{background:#64748b;}
.green{color:#2563eb;}
.red{color:#dc2626;}
.purple{color:#7c3aed;}

/* QUESTION GRID */

.question-grid{
display:grid;
grid-template-columns:repeat(5,42px);
gap:10px;
padding:14px 0;
justify-content:center;
contain:layout paint;
}

.question-grid .palette{
width:42px;
height:42px;
flex-basis:42px;
border-radius:6px;
font-size:14px;
font-weight:600;
}

/* BOTTOM CONTROLS */

.controls{
position:fixed;
bottom:0;
left:0;
right:0;
height:64px;
background:white;
border-top:1px solid #e5e7eb;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
box-sizing:border-box;
padding:10px 18px;
z-index:1000;
}

.left-controls,
.center-controls{
display:flex;
gap:10px;
align-items:center;
}

.right-controls{
display:flex;
align-items:center;
}

.btn{
min-height:42px;
padding:10px 15px;
border:1px solid #ccc;
background:white;
cursor:pointer;
border-radius:4px;
font-size:14px;
white-space:nowrap;
}

.btn,
.palette,
.option,
.tools button,
.section-tab,
.section-switch-btn{
-webkit-tap-highlight-color:transparent;
}

.btn:hover{
background:#f3f4f6;
}

.primary{
background:#2563eb;
color:white;
border:none;
font-weight:600;
min-width:110px;
}

.primary:hover{
background:#2563eb;
}

.submit{
background:#2563eb;
color:white;
border:none;
font-weight:600;
min-width:100px;
}

.submit:hover{
background:#2563eb;
}

@media (prefers-reduced-motion: reduce){
*,
*::before,
*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
scroll-behavior:auto !important;
transition-duration:.01ms !important;
}
}

/* MOBILE DESIGN */

@media(max-width:900px){

html,
body{
height:100%;
overflow:hidden;
--practice-controls-height:178px;
}

.header{
padding:0 12px;
height:var(--practice-header-height);
display:flex;
justify-content:space-between;
gap:8px;
}

body.practice-settings-open .header{
z-index:1400;
}

.header-left,
.header-right{
gap:8px;
}

.header-right{
display:flex;
align-items:center;
margin-left:auto;
min-width:0;
}

#timerText{
order:1;
}

#practiceSettingsBtn{
order:2;
}

#headerTitle{
max-width:150px;
font-size:13px;
}

#timerText{
font-size:12px;
}

.header-icon-btn{
width:36px;
height:36px;
flex-basis:36px;
}

.desktop-only{
display:none !important;
}

.mobile-settings-btn{
display:inline-flex;
width:34px;
height:34px;
padding:0;
font-size:12px;
border-radius:8px;
flex:0 0 34px;
}

.mobile-settings-btn i{
width:16px;
height:16px;
}

.mobile-settings-btn span{
display:none;
}

.layout{
flex-direction:column;
position:fixed;
left:0;
right:0;
top:calc(var(--practice-header-height) + var(--practice-palette-height));
bottom:var(--practice-controls-height);
height:auto;
margin-top:0;
padding-top:0;
overflow:hidden;
}

.sidebar{
display:none;
}

/* show palette on mobile */

.palette-bar{
display:flex;
position:fixed;
top:var(--practice-header-height);
left:0;
right:0;
background:#f3f4f6;
height:var(--practice-palette-height);
box-sizing:border-box;
align-items:center;
padding:8px 10px;
gap:8px;
overflow-x:auto;
overflow-y:hidden;
white-space:nowrap;
z-index:1001;
border-bottom:1px solid #dbe3f0;
box-shadow:0 8px 18px rgba(15,23,42,.06);
}

.layout{
margin-top:0;
}

/* hide text beside icons */

.tool-text{
display:none;
}

.tools button{
padding:8px;
}

.controls{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
height:auto;
min-height:var(--practice-controls-height);
box-sizing:border-box;
padding:8px 10px calc(8px + env(safe-area-inset-bottom));
gap:8px;
z-index:1003;
}

.mode-switch{
display:none;
position:fixed;
top:calc(var(--practice-header-height) + 8px);
left:12px;
right:12px;
height:auto;
box-sizing:border-box;
margin:0;
max-width:none;
max-height:calc(100vh - var(--practice-header-height) - 24px);
padding:14px;
gap:10px;
align-items:center;
justify-content:flex-start;
flex-wrap:wrap;
overflow:auto;
z-index:1401;
background:#fff;
border:1px solid #dbe3f0;
border-radius:12px;
box-shadow:0 18px 46px rgba(15,23,42,.24);
color:#111827;
}

.mode-switch::before{
content:"Settings";
flex:0 0 100%;
font-size:15px;
font-weight:800;
color:#0f172a;
margin-bottom:2px;
}

body.practice-settings-open .mode-switch{
display:flex;
}

.section-tabs{
display:none;
}

.section-switch-wrap:not([hidden]){
display:none;
}

.mode-label{
flex:0 0 100%;
font-size:12px;
font-weight:700;
text-transform:uppercase;
color:#64748b;
margin-top:4px;
}

.mode-switch .btn{
flex:1 1 calc(50% - 5px) !important;
height:42px;
min-height:42px;
padding:8px 10px !important;
font-size:14px;
font-weight:700;
line-height:1.1;
border-radius:8px;
box-shadow:none;
}

.mode-switch .btn + .section-switch-wrap,
.mode-switch .btn + .section-switch-wrap + .section-tabs{
margin-top:2px;
}

.section-tabs:not([hidden]){
display:grid !important;
grid-template-columns:1fr;
gap:8px;
width:100%;
max-width:none;
margin:4px 0 0;
padding:12px 0 0;
border-left:0;
border-top:1px solid #e5e7eb;
}

.section-tabs:not([hidden])::before{
content:"Change Section";
font-size:12px;
font-weight:700;
text-transform:uppercase;
color:#64748b;
margin-bottom:0;
}

.section-tab{
width:100%;
max-width:none;
min-height:42px;
justify-content:flex-start;
border-radius:8px;
font-size:14px;
font-weight:700;
padding:10px 12px;
box-sizing:border-box;
}

.section-tab.active{
background:#eef2ff;
border-color:#c7d2fe;
color:#3730a3;
}

.section-switch-btn{
height:42px;
min-height:42px;
border-radius:8px;
font-size:14px;
padding:8px 10px !important;
}

.section-switch-current{
display:inline;
max-width:160px;
}

.section-switch-menu{
position:static;
width:100%;
max-height:40vh;
box-sizing:border-box;
margin-top:8px;
box-shadow:none;
}

.left-controls{
display:contents;
}

.center-controls{
display:contents;
}

.btn{
min-height:42px;
width:100%;
margin:0;
}

.right-controls{
display:contents;
}

.submit{
grid-column:1 / -1;
width:100%;
margin-top:0;
}

.option{
font-size:16px;
padding:14px;
}

.question-area{
height:100%;
box-sizing:border-box;
padding-top:18px;
padding-bottom:24px;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}

@media(max-width:768px){
.question-number{
font-size:20px;
font-weight:700;
margin-bottom:18px;
}

.question-text,
.practice-question-prompt{
font-size:20px;
line-height:1.5;
margin-bottom:28px;
}

.option{
font-size:18px;
line-height:1.4;
}
}

body.practice-submitted .layout{
top:var(--practice-header-height);
bottom:0;
height:auto;
margin-top:0;
}

body.practice-submitted .question-area{
padding-bottom:32px;
overflow-y:auto;
}

.resume-card,
.practice-choice-card{
padding:20px;
}

.resume-card-title,
.practice-choice-title{
font-size:20px;
}

.resume-card-actions,
.practice-choice-actions{
flex-direction:column-reverse;
}

.resume-secondary-btn,
.resume-primary-btn,
.practice-choice-secondary-btn,
.practice-choice-primary-btn{
width:100%;
}

}

/* Final dark-mode polish: keep the practice room in one surface system. */
html.dark body{
background:#09090b !important;
color:#f4f4f5 !important;
}

html.dark .header,
html.dark .mode-switch,
html.dark .controls{
background:#18181b !important;
border-color:#27272a !important;
box-shadow:none !important;
}

@media(min-width:901px){
html.dark .mode-switch{
max-width:min(720px,44vw) !important;
margin:0 !important;
min-height:0 !important;
border-bottom:0 !important;
}
}

html.dark .layout{
background:#09090b !important;
}

html.dark .question-area{
background:#09090b !important;
padding:28px 26px 120px !important;
border-right-color:#27272a !important;
}

html.dark .question-header{
border-bottom:1px solid #27272a !important;
padding-bottom:14px !important;
margin-bottom:18px !important;
}

html.dark .question-number{
color:#f4f4f5 !important;
}

html.dark .question-text{
color:#f4f4f5 !important;
line-height:1.61 !important;
margin-bottom:24px !important;
}

html.dark .question-text,
html.dark .question-text *{
color:#f4f4f5 !important;
}

html.dark .question-text:empty{
display:none !important;
}

html.dark .practice-instruction-card{
background:#111113 !important;
border-color:#3f3f46 !important;
box-shadow:0 10px 24px rgba(0,0,0,.16) !important;
color:#e4e4e7 !important;
}

html.dark .practice-question-card{
background:#18181b !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
color:#f4f4f5 !important;
padding:0 !important;
}

html.dark .practice-question-card,
html.dark .practice-question-card *{
color:#f4f4f5 !important;
}

html.dark .practice-question-prompt{
color:#f4f4f5 !important;
line-height:1.61 !important;
margin-bottom:24px !important;
}

html.dark .options{
gap:12px !important;
}

html.dark .option{
background:#18181b !important;
border:1px solid #2f2f35 !important;
border-radius:6px !important;
box-shadow:none !important;
color:#f4f4f5 !important;
padding:12px 16px !important;
min-height:46px !important;
}

html.dark .option,
html.dark .option *{
color:#f4f4f5 !important;
}

html.dark .option:hover{
background:#242428 !important;
border-color:#3f3f46 !important;
}

html.dark .option.selected{
background:rgba(37,99,235,.22) !important;
border-color:#60a5fa !important;
}

html.dark .option.correct{
background:rgba(30,58,138,.32) !important;
border-color:rgba(59,130,246,.55) !important;
}

html.dark .option.incorrect{
background:rgba(127,29,29,.3) !important;
border-color:rgba(248,113,113,.45) !important;
}

html.dark .btn,
html.dark .tools button,
html.dark .section-switch-btn,
html.dark .section-tab{
background:#111113 !important;
border-color:#3f3f46 !important;
border-radius:9px !important;
color:#e4e4e7 !important;
}

html.dark .btn:hover,
html.dark .tools button:hover,
html.dark .section-switch-btn:hover,
html.dark .section-tab:hover{
background:#27272a !important;
color:#f4f4f5 !important;
}

html.dark .primary{
background:#2563eb !important;
border-color:#2563eb !important;
color:#fff !important;
}

html.dark .submit{
background:#2563eb !important;
border-color:#2563eb !important;
color:#fff !important;
}

html.dark .sidebar{
background:#111113 !important;
border-left-color:#27272a !important;
color:#e4e4e7 !important;
}

html.dark .candidate{
border-bottom:1px solid #27272a !important;
color:#f4f4f5 !important;
padding-bottom:14px !important;
}

html.dark .status{
color:#d4d4d8 !important;
border-bottom-color:#27272a !important;
}

html.dark .status-row > span:first-child{
color:#d4d4d8 !important;
}

html.dark .palette{
background:#27272a !important;
border:1px solid #3f3f46 !important;
color:#e4e4e7 !important;
}

html.dark .palette:hover{
background:#3f3f46 !important;
}

html.dark .answered{
background:#1d4ed8 !important;
color:#fff !important;
}

html.dark .notanswered{
background:#991b1b !important;
color:#fff !important;
}

html.dark .review{
background:#6d28d9 !important;
color:#fff !important;
}

html.dark .current{
background:#2563eb !important;
border-color:#60a5fa !important;
color:#fff !important;
}

html.dark .default{
background:#27272a !important;
color:#d4d4d8 !important;
}

html.dark .explanation-box{
background:#111113 !important;
border-color:#3f3f46 !important;
border-radius:12px !important;
color:#e4e4e7 !important;
}

html.dark .descriptive-answer-box{
background:#111113 !important;
border-color:#3f3f46 !important;
}

html.dark .descriptive-meta span{color:#d4d4d8;}
html.dark .descriptive-meta .descriptive-word-limit-warning{color:#f87171;}

html.dark .descriptive-answer-input{
background:#18181b !important;
border-color:#3f3f46 !important;
color:#f4f4f5 !important;
}

html.dark #reportModal > div,
html.dark #practiceChapterResources{
background:#18181b !important;
border-color:#27272a !important;
color:#f4f4f5 !important;
}

html.dark #practiceChapterResources > div:first-child,
html.dark #practiceChapterResources span{
color:#f4f4f5 !important;
}

html.dark #practiceChapterResources a{
background:#111113 !important;
border-color:#3f3f46 !important;
}

html.dark #practiceChapterResources a:hover{
background:#27272a !important;
}

html.dark #practiceChapterResources a div div:first-child{
color:#e4e4e7 !important;
}

html.dark #practiceChapterResources a div div:last-child{
color:#a1a1aa !important;
}

html.dark textarea,
html.dark #reportMessage{
background:#111113 !important;
border-color:#3f3f46 !important;
color:#f4f4f5 !important;
}

html.dark textarea::placeholder{
color:#71717a !important;
}

@media(max-width:900px){
html.dark .question-area{
padding:18px 12px 24px !important;
border-right:0 !important;
}

html.dark .palette-bar{
background:#111113 !important;
border-bottom-color:#27272a !important;
box-shadow:0 10px 24px rgba(0,0,0,.24) !important;
}

.descriptive-answer-box{padding:12px;}

.descriptive-answer-input{
min-height:320px;
font-size:16px;
}
}

html.dark .practice-analysis-card{
background:linear-gradient(180deg,#18181b,#111113) !important;
border-color:#27272a !important;
box-shadow:0 16px 34px rgba(0,0,0,.26) !important;
color:#f4f4f5 !important;
}

html.dark .practice-analysis-title,
html.dark .practice-analysis-review-question,
html.dark .practice-analysis-review-answer,
html.dark .practice-analysis-review-answer strong{
color:#f4f4f5 !important;
}

html.dark .practice-analysis-metric{
background:#111113 !important;
border-color:#3f3f46 !important;
}

html.dark .practice-analysis-metric-marks{
background:rgba(30,64,175,.16) !important;
border-color:rgba(96,165,250,.34) !important;
}

html.dark .practice-analysis-metric-max{
background:rgba(30,58,138,.22) !important;
border-color:rgba(59,130,246,.34) !important;
}

html.dark .practice-analysis-metric-percent{
background:rgba(120,53,15,.22) !important;
border-color:rgba(251,146,60,.34) !important;
}

html.dark .practice-analysis-metric-status{
background:rgba(88,28,135,.2) !important;
border-color:rgba(192,132,252,.32) !important;
}

html.dark .practice-analysis-label{
color:#d4d4d8 !important;
}

html.dark .practice-analysis-value{
color:#f4f4f5 !important;
}

html.dark .practice-analysis-secondary-btn{
background:#111113 !important;
border-color:#3f3f46 !important;
color:#e4e4e7 !important;
}

html.dark .practice-analysis-secondary-btn:hover{
background:#27272a !important;
color:#f4f4f5 !important;
}

.practice-analysis-primary-btn{
border-color:#2563eb !important;
background:#2563eb !important;
color:#fff !important;
}

.practice-analysis-primary-btn:hover{
border-color:#1d4ed8 !important;
background:#1d4ed8 !important;
}

html.dark .practice-analysis-review{
background:#18181b !important;
border-color:#27272a !important;
box-shadow:0 12px 26px rgba(0,0,0,.2) !important;
color:#f4f4f5 !important;
}

html.dark .practice-analysis-review-status{
color:#d4d4d8 !important;
}

html.dark .practice-analysis-review-status-correct{
color:#60a5fa !important;
}

html.dark .practice-analysis-review-status-incorrect{
color:#fb7185 !important;
}

html.dark .practice-analysis-review-status-skipped{
color:#fbbf24 !important;
}

@media(max-width:768px){
.question-number{
font-size:20px;
font-weight:700;
margin-bottom:18px;
}

.question-text,
.practice-question-prompt,
html.dark .question-text,
html.dark .practice-question-prompt{
font-size:20px !important;
line-height:1.5 !important;
margin-bottom:28px !important;
}

.option,
html.dark .option{
font-size:18px !important;
line-height:1.4 !important;
}
}