/**
 * Frontend styles for Smart Assessment Portal.
 */

/* =========================================================
   Design tokens
   ========================================================= */

:root {
	--sap-color-primary: #0C2C43;
	--sap-color-accent: #F37748;

	--sap-color-accent-soft: rgba(243, 119, 72, 0.12);
	--sap-color-accent-soft-2: rgba(243, 119, 72, 0.06);

	--sap-color-bg: #faf7f2;
	--sap-color-bg-soft: #f6f1ea;
	--sap-color-bg-elevated: #fffdf9;

	--sap-color-border: #e7dfd3;
	--sap-color-border-strong: #d8ccbc;

	--sap-color-text: #243342;
	--sap-color-text-soft: #6f7b86;
	--sap-color-text-faint: #98a1ab;

	--sap-color-success: #15803d;
	--sap-color-warning: #b45309;
	--sap-color-info: #1d4ed8;
	--sap-color-danger: #b91c1c;

	--sap-radius-sm: 8px;
	--sap-radius-md: 12px;
	--sap-radius-lg: 16px;
	--sap-radius-xl: 20px;

	--sap-shadow-sm: 0 1px 2px rgba(12, 44, 67, 0.04);
	--sap-shadow-md: 0 8px 22px rgba(12, 44, 67, 0.08);
	--sap-shadow-lg: 0 14px 34px rgba(12, 44, 67, 0.10);

	--sap-font-ui: "Lora", Georgia, serif;
	--sap-font-heading: "Roboto", Arial, sans-serif;

	--sap-rainbow-conic: conic-gradient(
		from -90deg,
		rgba(233, 123, 123, 0.95),
		rgba(233, 176, 123, 0.95),
		rgba(233, 223, 123, 0.95),
		rgba(134, 224, 163, 0.95),
		rgba(127, 215, 230, 0.95),
		rgba(138, 167, 234, 0.95),
		rgba(181, 154, 232, 0.95),
		rgba(232, 143, 201, 0.95),
		rgba(233, 123, 123, 0.95)
	);

	--sap-rainbow-linear-soft: linear-gradient(
		90deg,
		rgba(233, 123, 123, 0.20),
		rgba(233, 176, 123, 0.20),
		rgba(233, 223, 123, 0.20),
		rgba(134, 224, 163, 0.20),
		rgba(127, 215, 230, 0.20),
		rgba(138, 167, 234, 0.20),
		rgba(181, 154, 232, 0.20),
		rgba(232, 143, 201, 0.20)
	);

	--sap-graph-color-1: rgba(233, 123, 123, 0.95);
	--sap-graph-color-2: rgba(233, 176, 123, 0.95);
	--sap-graph-color-3: rgba(233, 223, 123, 0.95);
	--sap-graph-color-4: rgba(134, 224, 163, 0.95);
	--sap-graph-color-5: rgba(127, 215, 230, 0.95);
	--sap-graph-color-6: rgba(138, 167, 234, 0.95);
	--sap-graph-color-7: rgba(181, 154, 232, 0.95);
	--sap-graph-color-8: rgba(232, 143, 201, 0.95);

	--sap-graph-placeholder-1: rgba(233, 123, 123, 0.40);
	--sap-graph-placeholder-2: rgba(233, 176, 123, 0.40);
	--sap-graph-placeholder-3: rgba(233, 223, 123, 0.40);
	--sap-graph-placeholder-4: rgba(134, 224, 163, 0.40);
	--sap-graph-placeholder-5: rgba(127, 215, 230, 0.40);
	--sap-graph-placeholder-6: rgba(138, 167, 234, 0.40);
	--sap-graph-placeholder-7: rgba(181, 154, 232, 0.40);
	--sap-graph-placeholder-8: rgba(232, 143, 201, 0.40);

	--sap-table-header-bg: #F3774885;
	--sap-table-header-text: #0C2C43;
}

/* =========================================================
   Base / global SAP wrappers
   ========================================================= */

.sap-shell,
.sap-card,
.sap-leaderboard,
.sap-user-dashboard,
.sap-result-card {
	font-family: var(--sap-font-ui);
	font-size: 14px;
	line-height: 1.65;
	color: var(--sap-color-text);
	box-sizing: border-box;
}

.sap-shell *,
.sap-card *,
.sap-leaderboard *,
.sap-user-dashboard *,
.sap-result-card * {
	box-sizing: border-box;
}

.sap-shell {
	display: grid;
	gap: 18px;
	width: 100%;
}

.sap-card {
	background: var(--sap-color-bg);
	border: 1px solid var(--sap-color-border);
	border-radius: var(--sap-radius-lg);
	box-shadow: var(--sap-shadow-sm);
	padding: 15px;
}

.sap-title,
.sap-quiz-title,
.sap-section-title,
.sap-leaderboard__title,
.sap-result-card__title,
.sap-question-title {
	font-family: var(--sap-font-heading);
	color: var(--sap-color-primary);
	margin: 0;
	letter-spacing: 0.2px;
	font-size: 20px;
	font-weight: 700;
}

.sap-question-title {
	font-size: clamp(1.2rem, 1.6vw, 1.5rem);
	line-height: 1.35;
	font-weight: 800;
	margin: 0 0 18px;
}

h1.sap-quiz-title {
	font-size: 25px;
	line-height: 1.15;
	font-weight: 700;
	margin: 20px 0;
}

h3.sap-section-title {
	line-height: 1.2;
	font-size: 20px;
	font-weight: 800;
	margin: 20px 0;
}

.sap-muted,
.sap-result-card__subtitle,
.sap-note-list,
.sap-quiz-meta__label,
.sap-result-metric__label,
.sap-dashboard-eyebrow,
.sap-leaderboard__eyebrow,
.sap-result-card__eyebrow {
	color: var(--sap-color-text-soft);
}

.sap-muted,
.sap-result-card__subtitle,
.sap-result-panel__text,
.sap-note-list,
.sap-answer-option__text,
.sap-textarea,
.sap-message,
.sap-quiz-loading,
.sap-quiz-error,
.sap-submission-feedback,
.sap-leaderboard-empty {
	font-family: var(--sap-font-ui);
	font-size: 14px;
	line-height: 1.65;
}

.sap-dashboard-eyebrow,
.sap-leaderboard__eyebrow,
.sap-result-card__eyebrow {
	font-family: var(--sap-font-heading);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 8px;
}

/* =========================================================
   Pills / badges
   ========================================================= */

.sap-pill-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
	justify-self: right;
}

.sap-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(12, 44, 67, 0.06);
	color: var(--sap-color-primary);
	font-family: var(--sap-font-heading);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
}

.sap-pill--accent {
	background: var(--sap-color-accent-soft);
	color: var(--sap-color-accent);
}

.sap-pill--spaced-repetition {
	background: rgba(243, 119, 72, 0.12);
	color: #b45309;
	border: 1px solid rgba(243, 119, 72, 0.26);
}

/* =========================================================
   Tooltip
   ========================================================= */

.sap-tooltip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: help;
}

.sap-tooltip__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: none;
	color: var(--sap-color-primary);
	font-family: var(--sap-font-heading);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.sap-tooltip__icon-img {
	display: block;
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.sap-tooltip__text {
	position: absolute;
	left: 0;
	top: calc(100% + 8px);
	z-index: 40;
	min-width: 220px;
	max-width: 320px;
	padding: 10px 12px;
	border-radius: 10px;
	background: #fffdf9;
	border: 1px solid var(--sap-color-border-strong);
	box-shadow: var(--sap-shadow-md);
	color: var(--sap-color-text);
	font-size: 13px;
	line-height: 1.5;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.sap-tooltip:hover .sap-tooltip__text,
.sap-tooltip:focus-within .sap-tooltip__text {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* =========================================================
   Buttons
   ========================================================= */

.sap-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--sap-color-border);
	border-radius: 10px;
	padding: 11px 16px;
	font-family: var(--sap-font-heading);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition:
		background 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease,
		box-shadow 0.18s ease,
		transform 0.18s ease,
		filter 0.18s ease;
}

.sap-btn:hover {
	transform: translateY(-1px);
}

.sap-btn--primary {
	background: var(--sap-color-primary);
	border-color: var(--sap-color-primary);
	color: #fff;
}

.sap-btn--primary:hover,
.sap-btn--primary:focus {
	background: var(--sap-color-accent);
	border-color: var(--sap-color-accent);
	color: var(--sap-color-primary);
	box-shadow: var(--sap-shadow-md);
}

.sap-btn--secondary,
.sap-btn--ghost {
	background: var(--sap-color-bg-elevated);
	color: var(--sap-color-primary);
}

.sap-btn--secondary:hover,
.sap-btn--ghost:hover,
.sap-btn--secondary:focus,
.sap-btn--ghost:focus {
	background: var(--sap-color-accent-soft);
	border-color: rgba(243, 119, 72, 0.45);
	color: var(--sap-color-primary);
}

.sap-btn--toggle {
	background: var(--sap-color-bg-elevated);
	border-color: var(--sap-color-border-strong);
	color: var(--sap-color-primary);
	font-size: 12px;
	padding: 8px 12px;
}

.sap-btn[disabled],
.sap-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	filter: grayscale(0.08);
}

/* =========================================================
   Hero / summary areas
   ========================================================= */

.sap-quiz-hero,
.sap-submission-hero,
.sap-dashboard-hero {
	display: grid;
	grid-template-columns: 1.8fr 1fr;
	gap: 20px;
	align-items: start;
}

.sap-quiz-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin-top: 14px;
}

.sap-quiz-meta__item {
	padding: 12px 14px;
	border: 1px solid var(--sap-color-border);
	border-radius: 12px;
	background: var(--sap-color-bg-soft);
}

.sap-quiz-meta__label {
	display: block;
	font-family: var(--sap-font-heading);
	font-size: 12px;
	font-weight: 700;
	margin-bottom: 4px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.sap-quiz-meta__value {
	display: block;
	font-family: var(--sap-font-heading);
	font-size: 14px;
	font-weight: 600;
	color: var(--sap-color-primary);
	line-height: 1.45;
}

/* =========================================================
   Timer card
   ========================================================= */

.sap-timer-card {
	position: relative;
	border-radius: 16px;
	padding: 18px;
	background: var(--sap-color-bg-elevated);
	border: 1px solid var(--sap-color-border);
	box-shadow: var(--sap-shadow-sm);
	overflow: hidden;
}

.sap-timer-card::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(
		90deg,
		rgba(233, 123, 123, 0.55),
		rgba(233, 176, 123, 0.55),
		rgba(233, 223, 123, 0.55),
		rgba(134, 224, 163, 0.55),
		rgba(127, 215, 230, 0.55),
		rgba(138, 167, 234, 0.55),
		rgba(181, 154, 232, 0.55),
		rgba(232, 143, 201, 0.55)
	);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.sap-timer-card__label {
	font-family: var(--sap-font-heading);
	font-size: 12px;
	font-weight: 700;
	color: var(--sap-color-text-soft);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 8px;
}

.sap-timer-card__value {
	font-family: var(--sap-font-heading);
	font-size: clamp(1.6rem, 2vw, 2.1rem);
	font-weight: 800;
	color: var(--sap-color-primary);
	line-height: 1;
}

/* =========================================================
   Quiz progress / status
   ========================================================= */

.sap-quiz-status {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.sap-quiz-status__left {
	flex: 1;
}

.sap-progress-label {
	font-family: var(--sap-font-heading);
	font-size: 12px;
	font-weight: 700;
	color: var(--sap-color-text-soft);
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.sap-progress-track {
	position: relative;
	height: 10px;
	background: #ede7de;
	border-radius: 999px;
	overflow: hidden;
}

.sap-progress-fill {
	height: 100%;
	width: 0%;
	border-radius: 999px;
	background: #f37748;
	transition: width 0.25s ease;
}

/* =========================================================
   Quiz stage / question content
   ========================================================= */

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

.sap-question-header__left,
.sap-question-header__right {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.sap-question-number,
.sap-question-points {
	font-family: var(--sap-font-heading);
	font-size: 13px;
	font-weight: 700;
	color: var(--sap-color-primary);
}

.sap-question-body {
	display: grid;
	gap: 12px;
}

.sap-answer-list {
	display: grid;
	gap: 10px;
}

/* Objective answer options inside quiz shell */
.sap-shell .sap-answer-option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--sap-color-border);
	border-radius: 12px;
	background-color: #c1c1c1;
	box-shadow: 0 0 1px 0 #c1c1c1;
	cursor: pointer;
	transition:
		border-color 0.18s ease,
		background 0.18s ease,
		box-shadow 0.18s ease,
		transform 0.18s ease,
		color 0.18s ease;
}

.sap-shell .sap-answer-option__control {
	margin-top: 2px;
}

.sap-shell .sap-answer-option__text {
	flex: 1;
	font-size: 14px;
	line-height: 1.65;
	color: black;
}

.sap-shell .sap-answer-option:hover {
	border-color: rgba(243, 119, 72, 0.55);
	background: rgba(243, 119, 72, 0.05);
	transform: translateY(-1px);
	color: #0C2C43;
}

.sap-shell .sap-answer-option.is-selected {
	border-color: var(--sap-color-accent);
	background: #f3774885;
	box-shadow: var(--sap-shadow-sm);
	color: white;
}

.sap-shell .sap-answer-option.is-selected .sap-answer-option__text,
.sap-shell .sap-answer-option.is-selected .sap-answer-option__control {
	color: white;
}

.sap-answer-option.is-disabled {
	opacity: 0.68;
	cursor: not-allowed;
}

/* =========================================================
   Written-answer / essay editor
   ========================================================= */

.sap-written-answer-zone,
#sap-written-answer-zone {
	display: grid;
	gap: 12px;
}

.sap-written-editor {
	display: grid;
	gap: 0;
	border: 1px solid var(--sap-color-border);
	border-radius: 16px;
	background: #fffdf9;
	box-shadow: var(--sap-shadow-sm);
	overflow: hidden;
}

.sap-written-editor__topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	background: #f4efe8;
	border-bottom: 1px solid var(--sap-color-border);
	flex-wrap: wrap;
}

.sap-written-editor__label-group {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.sap-written-editor__label {
	font-family: var(--sap-font-heading);
	font-size: 13px;
	font-weight: 800;
	color: var(--sap-color-primary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.sap-written-editor__mode-pill {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(12, 44, 67, 0.06);
	color: var(--sap-color-primary);
	font-family: var(--sap-font-heading);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
}

.sap-written-editor__utility {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.sap-written-editor__status {
	font-family: var(--sap-font-heading);
	font-size: 12px;
	font-weight: 700;
	color: var(--sap-color-text-soft);
}

.sap-written-editor__toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 10px 14px;
	background: #fbf8f4;
	border-bottom: 1px solid var(--sap-color-border);
}

.sap-editor-btn,
.sap-editor-select {
	border: 1px solid var(--sap-color-border);
	background: var(--sap-color-bg-elevated);
	color: var(--sap-color-primary);
	border-radius: 10px;
	font-family: var(--sap-font-heading);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
}

.sap-editor-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	cursor: pointer;
	transition:
		background 0.18s ease,
		border-color 0.18s ease,
		transform 0.18s ease,
		color 0.18s ease;
}

.sap-editor-btn:hover {
	transform: translateY(-1px);
	background: rgba(243, 119, 72, 0.05);
	border-color: rgba(243, 119, 72, 0.35);
	color: var(--sap-color-primary);
}

.sap-editor-btn:disabled,
.sap-editor-select:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.sap-editor-select {
	height: 34px;
	padding: 0 10px;
}

.sap-editor-divider {
	width: 1px;
	height: 24px;
	background: var(--sap-color-border);
	margin: 0 2px;
}

.sap-written-editor__workspace {
	padding: 0;
	background: #fff;
}

.sap-written-answer {
	display: block;
	width: 100%;
	min-height: 240px;
	padding: 18px 18px 20px;
	border: 0;
	background: #fff;
	font-family: var(--sap-font-ui);
	font-size: 16px;
	line-height: 1.7;
	color: var(--sap-color-text);
	resize: vertical;
	box-shadow: none;
	outline: none;
	border-radius: 0;
}

.sap-written-answer:focus {
	outline: none;
	box-shadow: none;
}

.sap-written-editor__bottombar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	background: #f8f4ef;
	border-top: 1px solid var(--sap-color-border);
	flex-wrap: wrap;
}

.sap-written-editor__help {
	flex: 1;
	min-width: 220px;
}

.sap-written-editor__counts {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.sap-written-answer-count {
	font-family: var(--sap-font-heading);
	font-size: 12px;
	font-weight: 700;
	color: var(--sap-color-text-soft);
}

.sap-question-prompt-extra,
.sap-question-explanation-zone,
.sap-question-inline-feedback {
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid var(--sap-color-border);
	background: var(--sap-color-bg-soft);
}

.sap-question-inline-feedback[data-type="success"] {
	background: rgba(21, 128, 61, 0.06);
	border-color: rgba(21, 128, 61, 0.16);
	color: #166534;
}

.sap-question-inline-feedback[data-type="error"] {
	background: rgba(185, 28, 28, 0.05);
	border-color: rgba(185, 28, 28, 0.14);
	color: #991b1b;
}

.sap-question-inline-feedback[data-type="info"] {
	background: rgba(29, 78, 216, 0.05);
	border-color: rgba(29, 78, 216, 0.14);
	color: #1d4ed8;
}

/* =========================================================
   Quiz actions
   ========================================================= */

.sap-quiz-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.sap-quiz-actions__left,
.sap-quiz-actions__right {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* =========================================================
   Notes / messages
   ========================================================= */

.sap-note-list {
	margin: 0;
	padding-left: 18px;
	display: grid;
	gap: 8px;
	font-size: 14px;
	line-height: 1.65;
}

.sap-note-list li {
	margin: 0;
}

.sap-shell #sap-quiz-notes {
	border: 2px dashed #c1c1c1;
}

#sap-dashboard-reminders {
	border: 2px dashed #c1c1c1;
}

.sap-message,
.sap-quiz-loading,
.sap-quiz-error,
.sap-submission-feedback,
.sap-leaderboard-empty {
	padding: 14px 16px;
	border-radius: 12px;
	border: 1px solid var(--sap-color-border);
	background: var(--sap-color-bg-soft);
	font-size: 14px;
}

.sap-quiz-error,
.sap-shell--error .sap-card {
	border-color: rgba(185, 28, 28, 0.18);
	background: rgba(185, 28, 28, 0.04);
}

.sap-shell--restricted .sap-card {
	border-color: rgba(180, 83, 9, 0.18);
	background: rgba(180, 83, 9, 0.04);
}

/* =========================================================
   Result cards / dashboard metrics
   ========================================================= */

.sap-result-card {
	display: grid;
	gap: 18px;
}

.sap-result-card__top {
	display: flex;
	justify-content: space-between;
	align-items: start;
	gap: 16px;
}

.sap-result-card__title {
	font-size: clamp(1.35rem, 1.8vw, 1.7rem);
	font-weight: 800;
	margin-bottom: 6px;
}

.sap-result-card__subtitle {
	margin: 0;
	font-size: 14px;
}

.sap-result-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
	border-radius: 999px;
	font-family: var(--sap-font-heading);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
}

.sap-result-badge--success {
	background: rgba(21, 128, 61, 0.10);
	color: var(--sap-color-success);
}

.sap-result-badge--warning {
	background: rgba(180, 83, 9, 0.10);
	color: var(--sap-color-warning);
}

.sap-result-grid,
.sap-dashboard-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
}

.sap-result-metric {
	border: 1px solid var(--sap-color-border);
	border-radius: 14px;
	padding: 16px;
	background: var(--sap-color-bg-elevated);
}

.sap-result-metric--featured {
	background: #f3774834;
	border-color: #f37748;
}

.sap-result-metric__label {
	font-family: var(--sap-font-heading);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 8px;
}

.sap-result-metric__value {
	font-family: var(--sap-font-heading);
	font-size: 1.55rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--sap-color-primary);
}

.sap-result-panel {
	border: 1px solid var(--sap-color-border);
	border-radius: 14px;
	padding: 16px;
	background: var(--sap-color-bg-soft);
}

.sap-result-panel--leaderboard {
	background:
		linear-gradient(
			to right,
			rgba(243, 119, 72, 0.10) 0%,
			transparent 60%
		),
		var(--sap-color-bg-soft);
	border-color: rgba(243, 119, 72, 0.28);
}

.sap-result-panel__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
}

/* =========================================================
   Leaderboard
   ========================================================= */

.sap-leaderboard {
	display: grid;
	gap: 18px;
}

.sap-leaderboard__header {
	display: flex;
	justify-content: space-between;
	align-items: start;
	gap: 16px;
}

.sap-leaderboard__title {
	font-size: clamp(1.35rem, 1.8vw, 1.7rem);
	font-weight: 800;
}

.sap-leaderboard__meta {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.sap-leaderboard-growth-card,
#growth-snapshot-section {
	margin: 18px 0 0;
	border: 2px dashed #c1c1c1;
	padding: 25px;
	box-shadow: 0 2px 3px 1px #c1c1c1;
	background: ghostwhite;
}

.sap-leaderboard-podium {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.sap-podium-card {
	position: relative;
	overflow: visible;
	margin: 15px 10px 10px;
	border: 1px solid var(--sap-color-border);
	border-radius: 10px;
	background: var(--sap-color-bg-elevated);
	padding: 18px;
	box-shadow: var(--sap-shadow-sm);
	display: grid;
	gap: 10px;
	min-height: 170px;
}

.sap-podium-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 10px;
	background: var(--sap-rainbow-linear-soft);
	opacity: 0.55;
	pointer-events: none;
}

.sap-podium-card > * {
	position: relative;
	z-index: 1;
}

.sap-podium-card--first {
	border-color: rgba(243, 119, 72, 0.45);
	box-shadow: var(--sap-shadow-md);
}

.sap-podium-card--current-user {
	outline: 2px solid rgba(243, 119, 72, 0.55);
	outline-offset: 2px;
}

.sap-podium-card img[alt$="Tier"] {
	position: absolute;
	top: -40px;
	right: -55px;
	left: auto !important;
	width: 110px !important;
	height: 110px !important;
	max-width: none !important;
	object-fit: contain;
	z-index: 5;
	display: block;
}

.sap-podium-card__rank {
	font-family: "Roboto Slab";
	font-size: 25px;
	font-weight: 800;
	color: var(--sap-color-primary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-top: -20px;
}

.sap-podium-card__name {
	font-family: var(--sap-font-heading);
	font-size: 30px;
	font-weight: 800;
	color: var(--sap-color-primary);
	line-height: 1.3;
}

.sap-podium-card__score {
	font-family: var(--sap-font-heading);
	font-size: 20px;
	font-weight: 800;
	color: var(--sap-color-accent);
	line-height: 1.1;
}

.sap-podium-card__badge,
.sap-podium-card__current {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: 6px 10px;
	border-radius: 999px;
	font-family: var(--sap-font-heading);
	font-size: 12px;
	font-weight: 700;
	background: rgba(12, 44, 67, 0.08);
	color: var(--sap-color-primary);
}

.sap-podium-card__current {
	background: rgba(243, 119, 72, 0.16);
	color: var(--sap-color-accent);
}

.sap-leaderboard-focus-card,
#sap-leaderboard-focus-card {
	margin-top: 18px;
	border: 2px dashed #c1c1c1;
	padding: 15px;
}

.sap-leaderboard-notes {
	border: 2px dashed #c1c1c1;
	border-radius: 10px;
	padding: 10px 20px;
	margin-top: -30px;
}

.sap-leaderboard-table-wrap,
.sap-dashboard-table-wrap {
	overflow-x: auto;
}

.sap-dashboard-table-wrap {
	border-radius: 10px;
}

.sap-leaderboard-table,
.sap-dashboard-table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 14px;
}

.sap-leaderboard-table th,
.sap-leaderboard-table td,
.sap-dashboard-table th,
.sap-dashboard-table td {
	padding: 12px 10px;
	border-bottom: 1px solid var(--sap-color-border);
	text-align: left;
	vertical-align: top;
}

.sap-leaderboard-table th,
.sap-dashboard-table th {
	font-family: var(--sap-font-heading);
	font-size: 12px;
	font-weight: 800;
	color: var(--sap-table-header-text);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background: var(--sap-table-header-bg);
}

.sap-leaderboard-table__row--current {
	background:
		linear-gradient(
			to right,
			rgba(243, 119, 72, 0.10) 0%,
			rgba(243, 119, 72, 0.04) 35%,
			transparent 100%
		);
}

.sap-leaderboard-name {
	font-weight: 700;
	color: var(--sap-color-primary);
}

.sap-leaderboard-you {
	font-weight: 700;
	color: var(--sap-color-accent);
}

.sap-leaderboard-top {
	font-weight: 700;
	color: var(--sap-color-primary);
}

.sap-leaderboard-neutral {
	color: var(--sap-color-text-soft);
}

.sap-nearby-rank {
	display: grid;
	gap: 12px;
}

.sap-nearby-rank__list {
	display: grid;
	gap: 10px;
}

.sap-nearby-rank__item {
	display: grid;
	grid-template-columns: 70px 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 12px 14px;
	border: 1px solid var(--sap-color-border);
	border-radius: 12px;
	background: var(--sap-color-bg-elevated);
}

.sap-nearby-rank__item--current {
	border-color: rgba(243, 119, 72, 0.45);
	background: rgba(243, 119, 72, 0.10);
}

.sap-nearby-rank__rank,
.sap-nearby-rank__score {
	font-family: var(--sap-font-heading);
	font-weight: 800;
	color: var(--sap-color-primary);
}

.sap-nearby-rank__name {
	font-weight: 600;
}

/* =========================================================
   Dashboard
   ========================================================= */

.sap-dashboard-ranks,
.sap-dashboard-panels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.sap-rank-list {
	display: grid;
	gap: 10px;
}

.sap-rank-list__item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--sap-color-border);
	border-radius: 12px;
	background: var(--sap-color-bg-elevated);
}

.sap-rank-list__label {
	font-size: 14px;
	font-weight: 600;
}

.sap-rank-list__value {
	font-family: var(--sap-font-heading);
	font-size: 1rem;
	font-weight: 800;
	color: var(--sap-color-primary);
}

/* =========================================================
   Chart helpers
   ========================================================= */

.sap-chart-placeholder {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	height: 220px;
	padding: 18px 12px 10px;
	border: 1px solid var(--sap-color-border);
	border-radius: 16px;
	background:
		linear-gradient(to top, rgba(12, 44, 67, 0.03), rgba(12, 44, 67, 0.01)),
		var(--sap-color-bg-elevated);
	position: relative;
}

.sap-chart-placeholder__bar-wrap {
	flex: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	min-width: 0;
}

.sap-chart-placeholder__bar {
	width: 100%;
	max-width: 52px;
	border-radius: 12px 12px 6px 6px;
	box-shadow: 0 6px 18px rgba(12, 44, 67, 0.08);
	min-height: 0;
	transition: transform 0.18s ease, opacity 0.18s ease;
}

.sap-chart-placeholder__bar:hover {
	transform: translateY(-2px);
}

.sap-chart-placeholder__label {
	font-family: var(--sap-font-heading);
	font-size: 12px;
	font-weight: 700;
	color: var(--sap-color-text-soft);
	text-align: center;
}

.sap-chart-placeholder__value {
	font-family: var(--sap-font-heading);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	margin-bottom: 4px;
	color: var(--sap-color-primary);
}

.sap-chart-placeholder__sample-note {
	position: absolute;
	top: 12px;
	right: 12px;
	font-family: var(--sap-font-heading);
	font-size: 11px;
	font-weight: 700;
	color: var(--sap-color-text-soft);
	background: rgba(255, 255, 255, 0.75);
	padding: 6px 9px;
	border-radius: 999px;
	border: 1px solid rgba(12, 44, 67, 0.08);
}

/* Rotating colors */
.sap-bar-color-1 { background: rgba(233,123,123,0.40); }
.sap-bar-color-2 { background: rgba(207,146,149,0.40); }
.sap-bar-color-3 { background: rgba(181,169,175,0.40); }
.sap-bar-color-4 { background: rgba(154,192,202,0.40); }
.sap-bar-color-5 { background: rgba(127,215,230,0.40); }
.sap-bar-color-6 { background: rgba(145,195,223,0.40); }
.sap-bar-color-7 { background: rgba(163,174,216,0.40); }
.sap-bar-color-8 { background: rgba(181,154,232,0.40); }

.sap-bar-color-live-1 { background: rgba(233,123,123,0.82); }
.sap-bar-color-live-2 { background: rgba(207,146,149,0.82); }
.sap-bar-color-live-3 { background: rgba(181,169,175,0.82); }
.sap-bar-color-live-4 { background: rgba(154,192,202,0.82); }
.sap-bar-color-live-5 { background: rgba(127,215,230,0.82); }
.sap-bar-color-live-6 { background: rgba(145,195,223,0.82); }
.sap-bar-color-live-7 { background: rgba(163,174,216,0.82); }
.sap-bar-color-live-8 { background: rgba(181,154,232,0.82); }

/* =========================================================
   Submission form
   ========================================================= */

.sap-submission-status-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.sap-label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--sap-font-heading);
	font-size: 13px;
	font-weight: 700;
	color: var(--sap-color-primary);
}

.sap-textarea {
	display: block;
	width: 100%;
	min-height: 240px;
	padding: 14px 16px;
	border: 1px solid var(--sap-color-border);
	border-radius: 14px;
	background: var(--sap-color-bg-elevated);
	font-size: 14px;
	line-height: 1.65;
	color: var(--sap-color-text);
	resize: vertical;
	box-shadow: none;
}

.sap-textarea:focus {
	border-color: var(--sap-color-accent);
	box-shadow: 0 0 0 1px var(--sap-color-accent);
	outline: none;
}

.sap-placeholder-feedback {
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px dashed rgba(12, 44, 67, 0.16);
	background: rgba(255, 255, 255, 0.36);
	color: rgba(36, 51, 66, 0.58);
	font-size: 14px;
	line-height: 1.65;
	font-style: italic;
}

/* =========================================================
   Quiz completion notice only
   ========================================================= */

#sap-quiz-completion {
	padding: 15px;
	border: 2px dashed #c1c1c1 !important;
	background-color: whitesmoke;
	display: none;
	margin-top: 18px;
	box-shadow: 0 8px 22px rgba(12, 44, 67, 0.08);
}

#sap-quiz-completion[hidden] {
	display: none !important;
}

#sap-quiz-completion .sap-quiz-completion__header {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 15px;
	flex-wrap: wrap;
	border-bottom: 1px dashed #c1c1c1;
	padding-bottom: 14px;
	margin-bottom: 14px;
}

#sap-quiz-completion .sap-quiz-completion__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-width: 34px;
	border-radius: 999px;
	background: white;
	color: #0C2C43;
	font-size: 25px;
	line-height: 1;
	box-shadow: inset 0 0 0 1px rgba(243, 119, 72, 0.20);
	border: 1px solid grey;
	margin-top: 10px;
}

#sap-quiz-completion .sap-quiz-completion__body {
	display: flex;
	gap: 18px;
	align-items: stretch;
}

#sap-quiz-completion .sap-quiz-completion__score-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 15px;
	border-radius: 15px;
	background: #f37748;
	width: 223px;
	min-width: 223px;
	height: 211px;
	color: white;
}

#sap-quiz-completion .sap-quiz-completion__chart-card {
	padding: 10px;
	flex: 1;
}

#sap-quiz-completion .sap-quiz-completion__chart-wrap {
	margin-bottom: 10px;
}

#sap-quiz-completion .sap-quiz-completion__pie {
	--sap-pie-percent: 0%;
	width: 75px;
	height: 75px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	position: relative;
	margin-bottom: 10px;
	background: conic-gradient(
		#F37748 0 var(--sap-pie-percent),
		rgba(12, 44, 67, 0.10) var(--sap-pie-percent) 100%
	);
	box-shadow: 0 0 5px 0 rgba(12, 44, 67, 0.4);
}

#sap-quiz-completion .sap-quiz-completion__pie::before {
	content: "";
	position: absolute;
	inset: 10px;
	border-radius: 50%;
	background: #fffdf9;
	box-shadow: inset 0 0 0 1px rgba(12, 44, 67, 0.06);
}

#sap-quiz-completion .sap-quiz-completion__pie-center,
#sap-quiz-completion .sap-quiz-completion__pie-label,
#sap-quiz-completion #sap-quiz-completion-pie-label {
	position: relative;
	z-index: 1;
	font-size: 18px;
	font-weight: 800;
	line-height: 1;
	color: #0C2C43;
	font-family: var(--sap-font-heading);
}

#sap-quiz-completion .sap-result-metric {
	border-radius: 10px;
	padding: 20px;
	border: 0;
	background: transparent;
}

#sap-quiz-completion .sap-result-metric__value {
	font-family: var(--sap-font-heading);
	font-size: 3rem;
	font-weight: 800;
	line-height: 1.1;
	color: white;
}

#sap-quiz-completion .sap-result-metric__label {
	font-family: var(--sap-font-heading);
	font-size: 15px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: -5px 0 8px;
	color: black;
}

#sap-quiz-completion.is-pass {
	border-color: rgba(21, 128, 61, 0.18);
}

#sap-quiz-completion.is-pass .sap-quiz-completion__icon {
	background: rgba(21, 128, 61, 0.12);
	box-shadow: inset 0 0 0 1px rgba(21, 128, 61, 0.18);
}

#sap-quiz-completion.is-grow {
	border-color: rgba(243, 119, 72, 0.22);
}

/* Completion answer review */
#sap-quiz-completion .sap-quiz-completion__answers {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px dashed #c1c1c1;
	display: grid;
	gap: 14px;
}

#sap-quiz-completion .sap-quiz-completion__answers-list {
	display: grid;
	gap: 12px;
}

#sap-quiz-completion .sap-quiz-completion__answers-empty {
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px dashed rgba(12, 44, 67, 0.16);
	background: rgba(255, 255, 255, 0.55);
	color: var(--sap-color-text-soft);
}

#sap-quiz-completion .sap-completion-answer-item {
	border: 1px solid var(--sap-color-border);
	border-radius: 14px;
	background: #fffdf9;
	padding: 14px;
	display: grid;
	gap: 10px;
	box-shadow: 0 1px 2px rgba(12, 44, 67, 0.04);
}

#sap-quiz-completion .sap-completion-answer-item__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

#sap-quiz-completion .sap-completion-answer-item__number {
	font-family: var(--sap-font-heading);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--sap-color-text-soft);
}

#sap-quiz-completion .sap-completion-answer-item__prompt {
	font-family: var(--sap-font-heading);
	font-size: 16px;
	font-weight: 800;
	color: var(--sap-color-primary);
	line-height: 1.35;
}

#sap-quiz-completion .sap-completion-answer-item__prompt-extra {
	font-size: 14px;
	line-height: 1.6;
	color: var(--sap-color-text);
}

#sap-quiz-completion .sap-completion-answer-item__body {
	display: grid;
	gap: 10px;
}

#sap-quiz-completion .sap-completion-answer-item__row {
	display: grid;
	gap: 5px;
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--sap-color-bg-soft);
	border: 1px solid rgba(12, 44, 67, 0.05);
}

#sap-quiz-completion .sap-completion-answer-item__label {
	font-family: var(--sap-font-heading);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--sap-color-text-soft);
}

#sap-quiz-completion .sap-completion-answer-item__value {
	font-size: 14px;
	line-height: 1.65;
	color: var(--sap-color-text);
	white-space: pre-wrap;
	word-break: break-word;
}

.sap-completion-answer-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 10px;
	border-radius: 999px;
	font-family: var(--sap-font-heading);
	font-size: 11px;
	font-weight: 800;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.sap-completion-answer-badge--correct {
	background: rgba(21, 128, 61, 0.10);
	color: var(--sap-color-success);
}

.sap-completion-answer-badge--incorrect {
	background: rgba(185, 28, 28, 0.08);
	color: var(--sap-color-danger);
}

.sap-completion-answer-badge--pending {
	background: rgba(180, 83, 9, 0.10);
	color: var(--sap-color-warning);
}

.sap-completion-answer-badge--neutral {
	background: rgba(12, 44, 67, 0.08);
	color: var(--sap-color-primary);
}

/* Inline feedback below quiz actions */
#sap-quiz-inline-feedback {
	margin-top: 14px;
	border-radius: 12px;
	padding: 12px 14px;
	font-size: 14px;
	line-height: 1.6;
	border: 1px solid rgba(12, 44, 67, 0.10);
	background: #fffdf9;
	color: #243342;
}

#sap-quiz-inline-feedback[data-type="success"] {
	background: rgba(21, 128, 61, 0.06);
	border-color: rgba(21, 128, 61, 0.16);
	color: #166534;
}

#sap-quiz-inline-feedback[data-type="error"] {
	background: rgba(185, 28, 28, 0.05);
	border-color: rgba(185, 28, 28, 0.14);
	color: #991b1b;
}

#sap-quiz-inline-feedback[data-type="info"] {
	background: rgba(29, 78, 216, 0.05);
	border-color: rgba(29, 78, 216, 0.14);
	color: #1d4ed8;
}

/* =========================================================
   Blur / privacy helper
   ========================================================= */

.sap-blurable {
	position: relative;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.sap-blurable.is-blurred {
	filter: blur(8px);
	opacity: 0.68;
	user-select: none;
	pointer-events: none;
}

.sap-blur-toggle-row {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 10px;
}

/* Hide quiz-only sections once completion notice is visible */
.sap-shell:has(#sap-quiz-completion:not([hidden])) .sap-quiz-stage,
.sap-shell:has(#sap-quiz-completion:not([hidden])) .sap-card.sap-quiz-actions,
.sap-shell:has(#sap-quiz-completion:not([hidden])) #sap-quiz-notes {
	display: none !important;
}

/* Distribution chart */
.sap-distribution-chart {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	height: 190px;
	margin-top: 18px;
}

.sap-distribution-bin {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	height: 100%;
}

.sap-distribution-bin__count {
	font-size: 11px;
	margin-bottom: 8px;
}

.sap-distribution-bin__bar {
	width: 100%;
	max-width: 42px;
	border-radius: 12px 12px 6px 6px;
}

.sap-distribution-bin__label {
	margin-top: 10px;
	text-align: center;
	font-size: 11px;
	line-height: 1.2;
	color: rgba(12, 44, 67, 0.74);
	min-height: 28px;
}

.sap-distribution-bin__you-slot {
	min-height: 18px;
	margin-top: 6px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.sap-distribution-bin__you {
	font-size: 11px;
	font-weight: 700;
	color: #F37748;
	line-height: 1;
}

/* Distribution bars — scoped only to the distribution chart */
.sap-distribution-chart .sap-distribution-bin__bar {
	width: 100%;
	max-width: 42px;
	border-radius: 12px 12px 6px 6px;
}

/* User's current placement bar */
.sap-distribution-chart .sap-distribution-bin__bar.is-user-bar {
	background: linear-gradient(180deg, rgba(12,44,67,0.96), rgba(30,75,104,0.92));
	box-shadow: 0 0 0 2px rgba(243,119,72,0.45);
}

/* Normal bars */
.sap-distribution-chart .sap-distribution-bin__bar--1 { background: rgba(233,123,123,0.82); }
.sap-distribution-chart .sap-distribution-bin__bar--2 { background: rgba(207,146,149,0.82); }
.sap-distribution-chart .sap-distribution-bin__bar--3 { background: rgba(181,169,175,0.82); }
.sap-distribution-chart .sap-distribution-bin__bar--4 { background: rgba(154,192,202,0.82); }
.sap-distribution-chart .sap-distribution-bin__bar--5 { background: rgba(127,215,230,0.82); }
.sap-distribution-chart .sap-distribution-bin__bar--6 { background: rgba(145,195,223,0.82); }
.sap-distribution-chart .sap-distribution-bin__bar--7 { background: rgba(163,174,216,0.82); }
.sap-distribution-chart .sap-distribution-bin__bar--8 { background: rgba(181,154,232,0.82); }

.sap-leaderboard-subject-filter {
	display: inline-flex;
	align-items: center;
	margin: 0;
}

.sap-leaderboard-subject-select {
	min-width: 180px;
	padding: 8px 10px;
	border: 1px solid var(--sap-color-border);
	border-radius: 10px;
	background: var(--sap-color-bg-elevated);
	color: var(--sap-color-primary);
	font-family: var(--sap-font-heading);
	font-size: 13px;
	font-weight: 600;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1024px) {
	.sap-quiz-hero,
	.sap-submission-hero,
	.sap-dashboard-hero,
	.sap-dashboard-ranks,
	.sap-dashboard-panels,
	.sap-leaderboard-podium {
		grid-template-columns: 1fr;
	}

	.sap-leaderboard__header,
	.sap-result-card__top,
	.sap-quiz-status,
	.sap-written-editor__topbar,
	.sap-written-editor__bottombar {
		flex-direction: column;
		align-items: stretch;
	}
}

@media (max-width: 768px) {
	#sap-quiz-completion .sap-quiz-completion__body {
		flex-direction: column;
	}

	#sap-quiz-completion .sap-quiz-completion__score-card {
		width: 100%;
		min-width: 0;
		height: auto;
	}

	.sap-quiz-title {
		font-size: 20px;
	}

	.sap-written-editor__toolbar {
		gap: 6px;
	}
}

@media (max-width: 640px) {
	.sap-card {
		padding: 16px;
	}

	.sap-quiz-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.sap-quiz-actions__left,
	.sap-quiz-actions__right {
		width: 100%;
	}

	.sap-btn {
		width: 100%;
		justify-content: center;
	}

	.sap-nearby-rank__item {
		grid-template-columns: 60px 1fr;
	}

	.sap-nearby-rank__score {
		grid-column: 1 / -1;
	}

	.sap-chart-placeholder {
		gap: 8px;
		height: 190px;
	}

	.sap-chart-placeholder__bar {
		max-width: 36px;
	}

	.sap-editor-divider {
		display: none;
	}

	.sap-editor-btn,
	.sap-editor-select {
		flex: 1 1 auto;
	}
}