.mai-app {
	--mai-navy: #102a43;
	--mai-blue: #8222ee;
	--mai-pale: #f4edff;
	--mai-border: #d9e2ec;
	--mai-text: #243b53;
	--mai-muted: #627d98;
	color: var(--mai-text);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	left: 50%;
	margin: 0 0 24px;
	max-width: none;
	position: relative;
	transform: translateX(-50%);
	width: calc(100vw - 40px);
}

.mai-app * { box-sizing: border-box; }
.mai-app [hidden] { display: none !important; }
.mai-app h2 { color: var(--mai-navy); font-size: clamp(28px, 4vw, 44px); line-height: 1.12; margin: 8px 0 12px; }
.mai-app h3 { color: var(--mai-navy); margin: 0 0 18px; }
.mai-app p { line-height: 1.65; }
.mai-eyebrow { color: var(--mai-blue); font-size: 12px; font-weight: 800; letter-spacing: .13em; }

.mai-header,
.mai-result-hero {
	align-items: center;
	background: linear-gradient(135deg, #fbf8ff 0%, #f0e7ff 100%);
	border: 1px solid #dfcdf8;
	border-radius: 20px;
	display: flex;
	gap: 30px;
	justify-content: space-between;
	margin-bottom: 24px;
	padding: 38px;
}

.mai-header p { color: var(--mai-muted); margin: 0; max-width: 690px; }
.mai-card { background: #fff; border: 1px solid var(--mai-border); border-radius: 18px; box-shadow: 0 8px 30px rgba(16, 42, 67, .06); margin: 0 0 24px; padding: 30px; }

.mai-dashboard-shell { align-items: start; display: grid; gap: 28px; grid-template-columns: 310px minmax(0, 1fr); }
.mai-dashboard-main { min-width: 0; }
.mai-student-sidebar {
	background: linear-gradient(180deg, #35105f 0%, #6418b9 55%, #8222ee 100%);
	border-radius: 20px;
	box-shadow: 0 16px 42px rgba(86, 25, 151, .24);
	color: #fff;
	overflow: hidden;
	padding: 24px 20px;
	position: sticky;
	top: 36px;
}
.mai-sidebar-logo { background: #fff; border-radius: 12px; display: block; height: 88px; margin: 0 auto 21px; object-fit: contain; padding: 8px; width: 100%; }
.mai-student-identity { align-items: center; border-bottom: 1px solid rgba(255,255,255,.18); display: flex; gap: 12px; padding-bottom: 18px; }
.mai-avatar { align-items: center; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); border-radius: 50%; display: flex; font-size: 16px; font-weight: 900; height: 48px; justify-content: center; width: 48px; }
.mai-student-identity strong, .mai-student-identity small { display: block; }
.mai-student-identity strong { font-size: 15px; line-height: 1.25; }
.mai-student-identity small { margin-top: 3px; opacity: .72; }
.mai-sidebar-actions { display: block; }
.mai-sidebar-login { align-items: center; background: #fff; border: 0; border-radius: 9px; color: #6819c6; cursor: pointer; display: flex; font-weight: 800; justify-content: center; margin: 16px 0; padding: 10px 12px; width: 100%; }
.mai-sidebar-login svg { fill: currentColor; height: 18px; margin-right: 7px; width: 18px; }
.mai-sidebar-login:disabled { cursor: default; opacity: 1; }
.mai-sidebar-toggle { display: none; }
.mai-stat-list { display: grid; gap: 8px; }
.mai-stat-item { align-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; display: flex; gap: 10px; padding: 10px; }
.mai-stat-item > span { align-items: center; background: rgba(255,255,255,.15); border-radius: 8px; display: flex; flex: 0 0 34px; font-size: 16px; font-weight: 900; height: 34px; justify-content: center; }
.mai-stat-item small, .mai-stat-item strong { display: block; }
.mai-stat-item small { font-size: 10px; letter-spacing: .035em; opacity: .72; text-transform: uppercase; }
.mai-stat-item strong { font-size: 16px; margin-top: 1px; }
.mai-sidebar-chart { border-top: 1px solid rgba(255,255,255,.18); margin-top: 17px; padding-top: 15px; }
.mai-sidebar-chart h4 { color: #fff; margin: 0 0 10px; }
.mai-sidebar-chart > p { font-size: 12px; line-height: 1.4; margin: 0; opacity: .72; }
.mai-score-chart { align-items: end; display: flex; gap: 4px; height: 100px; }
.mai-chart-column { align-items: center; display: flex; flex: 1; flex-direction: column; height: 100%; justify-content: end; min-width: 0; }
.mai-chart-column span { background: linear-gradient(180deg, #fff, #d8bbff); border-radius: 4px 4px 1px 1px; display: block; min-height: 5px; width: 100%; }
.mai-chart-column small { font-size: 8px; margin-top: 3px; opacity: .78; }

.mai-promotion {
	align-items: center;
	backdrop-filter: blur(18px);
	background: linear-gradient(135deg, rgba(251,248,255,.88), rgba(239,228,255,.76));
	border: 1px solid #dfcdf8;
	border-radius: 18px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 14px 35px rgba(79,24,139,.09);
	display: grid;
	gap: 22px;
	grid-template-columns: 170px 1fr minmax(220px, .8fr);
	margin-bottom: 24px;
	padding: 25px;
}
.mai-promotion > img { background: #fff; border-radius: 12px; height: 105px; object-fit: contain; padding: 7px; width: 100%; }
.mai-promotion h3 { font-size: 25px; margin: 5px 0; }
.mai-promotion p { margin: 0; }
.mai-promotion p a { color: var(--mai-text); text-decoration: none; }
.mai-promotion-copy { backdrop-filter: blur(12px); background: rgba(255,255,255,.52); border: 1px solid rgba(255,255,255,.9); border-radius: 14px; box-shadow: 0 8px 24px rgba(76,24,133,.08); padding: 16px 18px; }
.mai-contact-actions { display: grid; gap: 8px; margin-top: 10px; }
.mai-contact-actions a { align-items: center; background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.96); border-radius: 10px; box-shadow: 0 6px 18px rgba(76,24,133,.08), inset 0 1px 0 #fff; color: var(--mai-text); display: flex; font-weight: 700; justify-content: space-between; padding: 10px 12px; text-decoration: none; transition: .2s ease; }
.mai-contact-actions a:hover { border-color: #c49bf3; color: var(--mai-blue); transform: translateY(-1px); }
.mai-promotion nav { display: grid; gap: 10px; }
.mai-promotion nav a { align-items: center; backdrop-filter: blur(12px); background: rgba(255,255,255,.68); border: 1px solid rgba(255,255,255,.95); border-radius: 12px; box-shadow: 0 7px 22px rgba(76,24,133,.09), inset 0 1px 0 #fff; color: var(--mai-blue); display: flex; font-weight: 800; justify-content: space-between; padding: 15px 16px; text-decoration: none; transition: .2s ease; }
.mai-promotion nav a:hover { border-color: #c49bf3; box-shadow: 0 10px 28px rgba(76,24,133,.15); transform: translateY(-1px); }

.mai-button {
	appearance: none;
	background: var(--mai-blue);
	border: 1px solid var(--mai-blue);
	border-radius: 10px;
	color: #fff !important;
	cursor: pointer;
	display: inline-flex;
	font-size: 15px;
	font-weight: 700;
	justify-content: center;
	line-height: 1.25;
	padding: 13px 21px;
	text-decoration: none !important;
	transition: .2s ease;
}

.mai-button:hover { background: #6819c6; transform: translateY(-1px); }
.mai-button:disabled { cursor: not-allowed; opacity: .55; transform: none; }
.mai-button svg { fill: currentColor; height: 19px; margin-right: 8px; width: 19px; }
.mai-button-secondary { background: #fff; color: var(--mai-blue) !important; }
.mai-full { margin-top: 14px; width: 100%; }
.mai-back, .mai-link { background: none; border: 0; color: var(--mai-blue); cursor: pointer; font-weight: 700; margin: 0 0 18px; padding: 3px; }
.mai-danger-link { color: #b42318; margin-left: 10px; }

.mai-table-wrap { overflow-x: auto; }
.mai-table { border-collapse: collapse; min-width: 760px; width: 100%; }
.mai-table th { color: var(--mai-muted); font-size: 12px; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.mai-table td, .mai-table th { border-bottom: 1px solid #edf1f5; padding: 16px 12px; }
.mai-table td span { color: var(--mai-muted); font-size: 13px; }
.mai-status { border-radius: 20px; display: inline-block; font-size: 12px !important; font-weight: 800; padding: 5px 10px; text-transform: capitalize; }
.mai-status-completed { background: #e7f8ee; color: #167447 !important; }
.mai-status-in_progress { background: #fff4db; color: #916000 !important; }
.mai-status-review_pending { background: #efe7ff; color: #6819c6 !important; }
.mai-status-review_failed { background: #fff0ef; color: #a9251a !important; }
.mai-empty { color: var(--mai-muted); padding: 45px 15px; text-align: center; }
.mai-empty span { font-size: 42px; }

.mai-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 25px 0; }
.mai-app label { color: var(--mai-navy); display: block; font-size: 14px; font-weight: 700; }
.mai-app input:not([type="checkbox"]):not([type="radio"]), .mai-app select, .mai-app textarea {
	background: #fff;
	border: 1px solid #bcccdc;
	border-radius: 9px;
	color: var(--mai-text);
	font: inherit;
	margin-top: 7px;
	padding: 12px 13px;
	width: 100%;
}
.mai-app textarea { line-height: 1.55; resize: vertical; }
.mai-field-help { color: var(--mai-muted); display: block; font-size: 12px; font-weight: 500; line-height: 1.45; margin-top: 7px; }
.mai-choice-field { border: 0; margin: 0; min-width: 0; padding: 0; }
.mai-choice-field legend { color: var(--mai-navy); font-size: 14px; font-weight: 700; margin-bottom: 10px; padding: 0; }
.mai-selection-layout { display: grid; gap: 20px; grid-column: 1 / -1; grid-template-columns: minmax(210px, 1fr) minmax(0, 4fr); }
.mai-count-choices { display: grid; gap: 9px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mai-category-choices { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; padding: 2px; }
.mai-choice-box { align-items: center; background: #fff; border: 1px solid var(--mai-border); border-radius: 9px; cursor: pointer; display: flex !important; gap: 9px; min-height: 43px; padding: 9px 11px; transition: background .18s, border-color .18s, box-shadow .18s; }
.mai-choice-box:hover { border-color: var(--mai-blue); }
.mai-choice-box:has(input:checked) { background: var(--mai-pale); border-color: var(--mai-blue); box-shadow: 0 0 0 2px rgba(130,34,238,.1); }
.mai-choice-box input { accent-color: var(--mai-blue); flex: 0 0 auto; margin: 0; }
.mai-choice-box span { font-size: 13px; font-weight: 700; line-height: 1.25; }
.mai-count-box { display: grid !important; grid-template-columns: 18px auto; justify-content: center; }
.mai-count-box input[type="radio"] { appearance: auto; height: 18px; margin: 0 !important; padding: 0 !important; position: static; width: 18px !important; }
.mai-count-box span { margin: 0 !important; padding: 0 !important; text-align: left; white-space: nowrap; width: auto !important; }
.mai-app input:focus, .mai-app select:focus, .mai-app textarea:focus { border-color: var(--mai-blue); box-shadow: 0 0 0 3px rgba(23, 105, 224, .12); outline: 0; }
.mai-consent { align-items: flex-start; background: var(--mai-pale); border-radius: 10px; display: flex !important; gap: 12px; margin: 0 0 22px; padding: 15px; }
.mai-consent input { margin-top: 4px; }
.mai-consent span { font-weight: 500; line-height: 1.5; }
.mai-required { color: #c91c1c; }
.mai-profile-summary { align-items: center; background: var(--mai-pale); border-radius: 12px; display: flex; justify-content: space-between; margin: 20px 0; padding: 14px 16px; }
.mai-profile-summary strong, .mai-profile-summary span { display: block; }
.mai-profile-summary span { color: var(--mai-muted); font-size: 13px; margin-top: 3px; }
.mai-profile-summary .mai-link { margin: 0; }

.mai-modal-open { overflow: hidden !important; }
.mai-modal { display: grid; inset: 0; padding: 20px; place-items: center; position: fixed; z-index: 999999; }
.mai-modal-backdrop { backdrop-filter: blur(4px); background: rgba(8, 24, 43, .68); inset: 0; position: absolute; }
.mai-login-dialog {
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 28px 80px rgba(0, 0, 0, .3);
	max-height: calc(100vh - 40px);
	max-height: calc(100dvh - 40px);
	max-width: 760px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 34px 42px;
	position: relative;
	width: 100%;
}
.mai-login-heading { margin: 0 auto; max-width: 650px; padding: 4px 54px 0; text-align: center; }
.mai-login-heading h2 { font-size: clamp(28px, 4vw, 38px); margin: 9px 0 7px; }
.mai-login-heading > p { color: var(--mai-muted); margin: 0; }
.mai-modal-close { align-items: center; background: #edf3fa; border: 1px solid transparent; border-radius: 50%; color: var(--mai-navy); cursor: pointer; display: flex; font-family: Arial, sans-serif; font-size: 29px; height: 44px; justify-content: center; line-height: 1; margin: 0; padding: 0 0 3px; position: absolute; right: 20px; top: 20px; transition: background .2s, border-color .2s, transform .2s; width: 44px; z-index: 2; }
.mai-modal-close:hover { background: #e5d5fb; border-color: var(--mai-blue); transform: scale(1.04); }
.mai-modal-close:focus-visible { box-shadow: 0 0 0 4px rgba(130,34,238,.18); outline: 2px solid var(--mai-blue); outline-offset: 2px; }
.mai-login-logo { align-items: center; display: flex; height: 58px; justify-content: center; margin-bottom: 15px; }
.mai-login-logo img { max-height: 58px; max-width: 180px; object-fit: contain; }
.mai-logo-fallback { align-items: center; background: linear-gradient(135deg, var(--mai-navy), var(--mai-blue)); border-radius: 12px; color: #fff; display: inline-flex; font-size: 21px; font-weight: 900; height: 52px; justify-content: center; letter-spacing: .08em; width: 82px; }
.mai-login-submit { align-items: center; }
.mai-login-grid { grid-template-columns: 1fr 1fr; }
.mai-google-login { align-items: center; background: #fff; border: 1px solid #c7d2df; border-radius: 10px; box-shadow: 0 2px 8px rgba(16,42,67,.06); color: #243b53 !important; display: flex; font-size: 15px; font-weight: 700; gap: 11px; justify-content: center; margin: 22px auto 0; min-height: 52px; padding: 12px 18px; text-decoration: none !important; transition: border-color .2s, box-shadow .2s, transform .2s; width: 100%; }
.mai-google-login:hover { border-color: #8222ee; box-shadow: 0 7px 20px rgba(86,25,151,.13); transform: translateY(-1px); }
.mai-google-login:focus-visible { box-shadow: 0 0 0 4px rgba(130,34,238,.16); outline: 2px solid #8222ee; outline-offset: 2px; }
.mai-google-login svg { flex: 0 0 22px; height: 22px; width: 22px; }
.mai-login-divider { align-items: center; color: var(--mai-muted); display: flex; font-size: 12px; gap: 12px; margin: 17px 0 -8px; text-align: center; }
.mai-login-divider::before, .mai-login-divider::after { background: #e1e8f0; content: ""; flex: 1; height: 1px; }
.mai-login-divider span { white-space: nowrap; }
.mai-password-wrap { display: block; position: relative; }
.mai-password-wrap input { padding-right: 52px !important; }
.mai-password-toggle { align-items: center; background: transparent; border: 0; color: var(--mai-blue); cursor: pointer; display: flex; font-size: 22px; height: 42px; justify-content: center; margin: 0; padding: 0; position: absolute; right: 7px; top: 8px; width: 42px; }
.mai-password-toggle svg { fill: none; height: 23px; margin: 0; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 23px; }
.mai-password-toggle .mai-eye-slash { display: none; }
.mai-password-toggle.is-visible .mai-eye-slash { display: block; }
.mai-password-toggle:focus { border-radius: 7px; box-shadow: 0 0 0 3px rgba(130,34,238,.16); outline: 0; }

.mai-device { align-items: stretch; display: grid; gap: 24px; grid-template-columns: minmax(250px, 1fr) minmax(320px, 1.5fr) minmax(300px, 1.5fr); }
.mai-device-copy { min-width: 0; }
.mai-preview, .mai-video-panel { background: #0b1727; border-radius: 16px; min-height: 300px; overflow: hidden; position: relative; }
.mai-preview video, .mai-video-panel video { height: 100%; left: 0; object-fit: cover; position: absolute; top: 0; transform: scaleX(-1); width: 100%; }
.mai-device-preview { align-self: center; aspect-ratio: 1 / 1; min-height: 0; width: 100%; }
.mai-level { background: rgba(255,255,255,.2); bottom: 18px; height: 7px; left: 8%; overflow: hidden; position: absolute; width: 84%; }
.mai-level span { background: #3ddc97; display: block; height: 100%; transition: width .1s; width: 0; }
.mai-check-list { list-style: none; margin: 22px 0; padding: 0; }
.mai-check-list li { border-bottom: 1px solid #edf1f5; padding: 10px 0; }
.mai-voice-control { margin: 0 0 18px; }
.mai-voice-control select { font-size: 14px; max-width: 100%; }
.mai-voice-inline { max-width: 390px; }
.mai-voice-settings { display: grid; gap: 14px; grid-template-columns: minmax(0, 2fr) minmax(140px, 1fr); }
.mai-select-wrap { display: block; position: relative; }
.mai-select-wrap::after { color: var(--mai-blue); content: "⌄"; font-size: 22px; font-weight: 900; line-height: 1; pointer-events: none; position: absolute; right: 16px; top: calc(50% + 3px); transform: translateY(-50%); }
.mai-select-wrap select { appearance: none; padding-right: 46px !important; }

.mai-question-layout { align-items: stretch; display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mai-question { display: flex; flex-direction: column; margin: 0; min-height: 390px; }
.mai-question h2 { font-size: clamp(25px, 3vw, 37px); }
.mai-question-meta { align-items: center; display: flex; gap: 9px; margin: 14px 0 4px; }
.mai-question-meta span, .mai-question-meta small { border-radius: 20px; font-size: 11px; font-weight: 800; padding: 5px 9px; text-transform: uppercase; }
.mai-question-meta span { background: var(--mai-pale); color: var(--mai-blue); }
.mai-question-meta small { background: #fff2d8; color: #8a5900; }
.mai-timer { align-self: center; background: linear-gradient(135deg, rgba(238,216,255,.96), rgba(255,239,165,.94)); border: 1px solid rgba(173,110,232,.38); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 9px 24px rgba(86,31,143,.14); color: var(--mai-navy); display: inline-flex; font-size: 24px; font-variant-numeric: tabular-nums; font-weight: 800; justify-content: center; margin: 18px auto 8px; min-width: 230px; padding: 12px 24px; white-space: nowrap; }
.mai-interview-controls { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: auto; padding-top: 24px; }
.mai-interview-controls .mai-button, .mai-record-control { min-height: 54px; width: 100%; }
.mai-record-control .mai-button { height: 100%; width: 100%; }
.mai-record-control { min-width: 0; }
.mai-record-control #mai-stop { display: none; }
.mai-record-control.is-recording #mai-record { display: none; }
.mai-record-control.is-recording #mai-stop { display: inline-flex; }
.mai-glass-button { backdrop-filter: blur(12px); border-width: 1px; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 9px 22px rgba(72,25,125,.16); }
.mai-glass-purple { background: linear-gradient(135deg, rgba(130,34,238,.96), rgba(101,24,198,.9)); border-color: rgba(105,25,205,.8); color: #fff !important; }
.mai-glass-gold { background: linear-gradient(135deg, rgba(255,221,77,.96), rgba(255,181,44,.9)); border-color: rgba(232,166,39,.78); color: #32105b !important; }
.mai-glass-purple:hover { background: linear-gradient(135deg, rgba(146,53,245,.98), rgba(88,18,181,.94)); box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 12px 27px rgba(72,25,125,.22); }
.mai-glass-gold:hover { background: linear-gradient(135deg, rgba(255,229,102,.98), rgba(255,170,24,.94)); box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 12px 27px rgba(153,96,13,.2); }
.mai-recording-badge { background: #c91c1c; border-radius: 20px; color: #fff; font-size: 12px; font-weight: 800; left: 15px; padding: 7px 10px; position: absolute; top: 15px; }
.mai-audio-visual { align-items: center; backdrop-filter: blur(12px); background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(244,237,255,.62)); border: 1px solid rgba(255,255,255,.72); border-radius: 12px; box-shadow: 0 8px 22px rgba(16,42,67,.18); display: flex; gap: 4px; height: 46px; justify-content: center; padding: 7px 11px; position: absolute; right: 15px; top: 15px; width: 104px; }
.mai-audio-visual span { background: linear-gradient(180deg, #ffcf35, #8222ee); border-radius: 4px; display: block; height: 5px; transition: height .1s ease, opacity .15s ease; width: 6px; }
.mai-audio-visual:not(.is-active) span { opacity: .58; }
.mai-video-column { min-width: 0; }
.mai-video-column .mai-video-panel { aspect-ratio: 3 / 4; min-height: 0; width: 100%; }
.mai-live-transcript { background: #f7faff; border: 1px solid var(--mai-border); border-radius: 12px; min-height: 110px; padding: 14px 16px; }
.mai-live-transcript strong { color: var(--mai-navy); display: block; font-size: 13px; margin-bottom: 7px; text-transform: uppercase; }
.mai-live-transcript p { color: var(--mai-muted); line-height: 1.5; margin: 0; max-height: 130px; overflow-y: auto; }
.mai-live-transcript p.is-listening { color: var(--mai-text); }
.mai-live-transcript small { color: var(--mai-muted); display: block; font-size: 12px; line-height: 1.5; margin-top: 16px; }
.mai-device-transcript, .mai-transcript-panel { min-height: 390px; padding: 24px; }
.mai-device-transcript p, .mai-transcript-panel p { max-height: 460px; }

.mai-review-grid { display: grid; gap: 28px; grid-template-columns: .9fr 1.1fr; }
.mai-review-grid video { background: #0b1727; border-radius: 12px; max-height: 370px; width: 100%; }
.mai-help, .mai-disclaimer { color: var(--mai-muted); font-size: 13px; }
.mai-message { border-radius: 8px; margin: 15px 0; padding: 12px 14px; }
.mai-message.error, .mai-error { background: #fff0ef; border: 1px solid #ffc9c5; color: #a9251a; }
.mai-loading, .mai-processing { padding: 70px 25px; text-align: center; }
.mai-spinner { animation: mai-spin .9s linear infinite; border: 4px solid #dce8f8; border-radius: 50%; border-top-color: var(--mai-blue); height: 48px; margin: 0 auto 22px; width: 48px; }
.mai-pending-icon { align-items: center; background: #e7f8ee; border-radius: 50%; color: #167447; display: flex; font-size: 26px; font-weight: 900; height: 56px; justify-content: center; margin: 0 auto 18px; width: 56px; }
@keyframes mai-spin { to { transform: rotate(360deg); } }

.mai-result-hero { background: linear-gradient(135deg, #32105b, #8222ee); color: #fff; }
.mai-result-hero h2, .mai-result-hero .mai-eyebrow { color: #fff; }
.mai-result-hero p { margin: 0; opacity: .85; }
.mai-score { align-items: baseline; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.25); border-radius: 18px; display: flex; flex-wrap: wrap; justify-content: center; min-width: 170px; padding: 20px; }
.mai-score strong { font-size: 54px; line-height: 1; }
.mai-score small { flex-basis: 100%; margin-top: 8px; text-align: center; }
.mai-feedback-grid { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; margin-top: 24px; }
.mai-feedback-grid > div { border-radius: 12px; padding: 20px; }
.mai-positive { background: #edfaf2; }
.mai-improve { background: #fff7e7; }
.mai-feedback-grid li, .mai-card ol li { line-height: 1.55; margin-bottom: 8px; }
.mai-answer-result { border: 1px solid var(--mai-border); border-radius: 10px; margin: 10px 0; overflow: hidden; }
.mai-answer-result summary { align-items: center; cursor: pointer; display: flex; justify-content: space-between; padding: 16px; }
.mai-answer-result > :not(summary) { margin-left: 18px; margin-right: 18px; }
.mai-private-recording { background: linear-gradient(135deg, #f8f2ff, #fff9e8); border: 1px solid #d8bdf8; border-radius: 14px; display: grid; gap: 12px; margin-bottom: 16px; padding: 16px; }
.mai-private-recording > strong, .mai-private-recording > small { display: block; }
.mai-private-recording video { aspect-ratio: 3 / 4; background: #0f172a; border-radius: 12px; display: block; max-height: 520px; object-fit: cover; width: min(100%, 360px); }
.mai-private-recording .mai-button { display: inline-flex; width: auto; }
.mai-private-recording small { color: var(--mai-muted); }
.mai-improved { background: var(--mai-pale); border-radius: 9px; margin-bottom: 18px; padding: 15px; }
.mai-result-actions { display: flex; gap: 12px; justify-content: center; margin: 25px 0; }
.mai-model-answer { background: linear-gradient(135deg, #f8f2ff, #eee2ff); border: 1px solid #d8bdf8; border-left: 4px solid var(--mai-blue); border-radius: 12px; margin-top: 14px; padding: 16px; }
.mai-model-answer > strong, .mai-model-answer > small { display: block; }
.mai-model-answer > strong { color: var(--mai-navy); }
.mai-model-answer > small { color: var(--mai-muted); font-size: 12px; margin-top: 4px; }
.mai-model-answer p { margin-bottom: 0; }
.mai-delivery-answer { background: #f7f4ff; border: 1px solid #e2d3f8; border-radius: 12px; margin-bottom: 18px; padding: 16px; }
.mai-delivery-answer > strong { color: var(--mai-navy); display: block; margin-bottom: 10px; }
.mai-delivery-answer > p { margin-bottom: 0; }
.mai-delivery-metrics { display: flex; flex-wrap: wrap; gap: 8px; }
.mai-delivery-metrics span { background: #fff; border: 1px solid #dac7f4; border-radius: 20px; color: var(--mai-muted); font-size: 12px; padding: 7px 10px; }
.mai-delivery-metrics span strong { color: var(--mai-blue); }
.mai-disclaimer { text-align: center; }

@media (min-width: 781px) and (max-width: 1100px) {
	.mai-dashboard-shell { gap: 20px; grid-template-columns: 255px minmax(0, 1fr); }
	.mai-header { align-items: flex-start; flex-direction: column; }
	.mai-promotion { grid-template-columns: 130px 1fr; }
	.mai-promotion nav { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
	.mai-selection-layout { grid-template-columns: minmax(190px, 1fr) minmax(0, 3fr); }
	.mai-category-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mai-device { grid-template-columns: minmax(250px, .8fr) minmax(320px, 1.2fr); }
	.mai-device-transcript { grid-column: 1 / -1; min-height: 180px; }
	.mai-question-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mai-transcript-panel { grid-column: 1 / -1; min-height: 180px; }
}

@media (max-width: 780px) {
	.mai-app { margin: 0 0 14px; width: calc(100vw - 20px); }
	.mai-header, .mai-result-hero { align-items: stretch; flex-direction: column; padding: 25px; }
	.mai-card { padding: 22px; }
	.mai-grid, .mai-device, .mai-question-layout, .mai-review-grid, .mai-feedback-grid { grid-template-columns: 1fr; }
	.mai-selection-layout { grid-template-columns: 1fr; }
	.mai-category-choices { grid-template-columns: 1fr; }
	.mai-preview, .mai-video-panel { min-height: 260px; }
	.mai-device-preview { aspect-ratio: 1 / 1; min-height: 0; }
	.mai-video-column .mai-video-panel { aspect-ratio: 3 / 4; min-height: 0; }
	.mai-device-transcript, .mai-transcript-panel { min-height: 180px; padding: 20px; }
	.mai-voice-settings { grid-template-columns: 1fr; }
	.mai-question { min-height: 0; }
	.mai-result-actions { align-items: stretch; flex-direction: column; }
	.mai-modal { align-items: start; padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); }
	.mai-login-dialog { border-radius: 16px; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); padding: 54px 17px 20px; }
	.mai-login-heading { padding: 0; }
	.mai-login-heading h2 { font-size: clamp(25px, 8vw, 32px); }
	.mai-login-heading > p { font-size: 14px; line-height: 1.5; }
	.mai-login-logo { height: 48px; margin-bottom: 10px; }
	.mai-login-logo img { max-height: 48px; max-width: 150px; }
	.mai-login-grid { gap: 13px; grid-template-columns: 1fr; margin: 19px 0; }
	.mai-login-grid input { min-height: 52px; }
	.mai-google-login { margin-top: 18px; min-height: 52px; }
	.mai-login-divider { margin: 15px 0 -6px; }
	.mai-login-divider span { white-space: normal; }
	.mai-login-submit { min-height: 52px; }
	.mai-modal-close { height: 42px; right: 10px; top: 10px; width: 42px; }
	.mai-profile-summary { align-items: flex-start; flex-direction: column; gap: 10px; }
	.mai-dashboard-shell { grid-template-columns: 1fr; }
	.mai-student-sidebar { position: static; }
	.mai-sidebar-logo { height: 100px; max-width: 250px; }
	.mai-sidebar-actions { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 16px 0; }
	.mai-sidebar-login { margin: 0; min-height: 48px; }
	.mai-sidebar-toggle { align-items: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.32); border-radius: 9px; color: #fff; cursor: pointer; display: flex; font-weight: 800; gap: 7px; justify-content: center; min-height: 48px; padding: 10px 12px; width: 100%; }
	.mai-sidebar-toggle span { font-size: 20px; line-height: 1; }
	.mai-sidebar-toggle strong { font-size: inherit; }
	.mai-student-sidebar.is-panel-collapsed .mai-sidebar-panel { display: none; }
	.mai-promotion { grid-template-columns: 1fr; text-align: center; }
	.mai-promotion > img { margin: auto; max-width: 240px; }
}

@media (max-width: 420px) {
	.mai-login-dialog { border-radius: 14px; padding: 50px 14px 16px; }
	.mai-login-heading h2 { margin-top: 7px; }
	.mai-login-logo { height: 42px; }
	.mai-login-logo img { max-height: 42px; max-width: 135px; }
	.mai-login-divider { font-size: 11px; gap: 8px; }
	.mai-help { line-height: 1.5; margin: 10px 0; }
}