/* Parent-facing admission pages — register.prathomswu.ac.th
 * Refinement of the original look (user request 2026-09-25): centred seal header, content in one white card
 * on a light grey page, centred card title, numbered steps with the action at the end of the row —
 * in the school-logo palette (seal red #D81824 + charcoal #606060). Thai floor: body line-height >= 1.75,
 * headings >= 1.35, letter-spacing 0, Sarabun (complete Thai in every weight used).
 */
:root {
	--seal-red: #D81824;          /* logo red, 5.15:1 on white */
	--seal-red-dark: #B5121B;
	--seal-red-soft: #FCEEEF;
	--seal-grey: #606060;         /* logo charcoal */
	--ink: #1F2328;
	--ink-secondary: #5B6068;
	--line: #E2E5EA;
	--line-strong: #BCC2CA;
	--page-bg: #F3F4F6;
	--paper: #FFFFFF;
	--panel: #F7F8FA;
	--success: #1D6B3F;
	--success-soft: #E8F3EC;
	--seal-red-edge: #F3C7CA;     /* border of red-tinted boxes */
	--seal-red-deep: #8F0E15;     /* pressed button */
	--seal-red-text: #7A0D14;     /* text on seal-red-soft */
	--error-text: #9B111B;
	--selection: #F7C9CC;
	--tag-neutral: #ECEEF1;
	--row-alt: #FBFBFC;
	--success-edge: #BFDCC9;
	--mark: #FFF1A8;

	--font: "Sarabun", "Noto Sans Thai", "Leelawadee UI", "Thonburi", sans-serif;
	--text-body: 1rem;            /* 16px */
	--text-small: 0.875rem;       /* 14px */
	--text-h1: 1.5rem;            /* 24px mobile */
	--text-h2: 1.1875rem;         /* 19px */
	--text-h3: 1.0625rem;         /* 17px */
	--leading-body: 1.75;
	--leading-heading: 1.4;

	--radius: 8px;
	--radius-sm: 6px;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--page: 60rem;
	--shadow: 0 1px 2px rgba(31, 35, 40, .06), 0 4px 16px rgba(31, 35, 40, .06);
}
@media (min-width: 48em) {
	:root {
		--text-h1: 1.75rem;       /* 28px */
		--text-h2: 1.25rem;       /* 20px */
		--text-h3: 1.125rem;      /* 18px */
	}
}

/* ---------- base ---------- */
/* bootstrap.css sets html{font-size:14px}, which shrank every rem; restore the browser default */
html { font-size: 100% !important; line-height: 1.75; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body.r-page {
	margin: 0;
	background: var(--page-bg);
	color: var(--ink);
	font-family: var(--font);
	font-size: var(--text-body);
	line-height: var(--leading-body);
	letter-spacing: 0;
	overflow-x: clip;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.r-page *, .r-page *::before, .r-page *::after { box-sizing: border-box; letter-spacing: 0; }
.r-page p, .r-page li, .r-page td, .r-page th, .r-page dd, .r-page dt, .r-page label, .r-page span, .r-page div { line-height: var(--leading-body); }
.r-page h1, .r-page h2, .r-page h3, .r-page h4, .r-page h5, .r-page h6 {
	font-family: var(--font);
	color: var(--ink);
	font-weight: 700;
	line-height: var(--leading-heading);
	margin: 0 0 var(--space-3);
}
.r-page a { color: var(--seal-red); text-decoration: underline; text-underline-offset: 0.18em; }
.r-page a:hover { color: var(--seal-red-dark); }
.r-page a:focus-visible, .r-page button:focus-visible, .r-page input:focus-visible, .r-page select:focus-visible, .r-page textarea:focus-visible {
	outline: 2px solid var(--seal-red) !important;
	outline-offset: 2px;
}
.r-page ::selection { background: var(--selection); color: var(--ink); }
.r-page input, .r-page textarea { caret-color: var(--ink); }
.r-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.r-page .r-skip { color: var(--ink); text-decoration: none; }
.r-skip { position: absolute; left: -999px; top: 0; background: #fff; padding: var(--space-2) var(--space-4); z-index: 10; border: 2px solid var(--seal-red); }
.r-skip:focus { left: var(--space-4); }
.r-nowrap { white-space: nowrap; }

/* ---------- layout ---------- */
.r-width { max-width: var(--page); margin: 0 auto; padding: 0 var(--space-3); }
@media (min-width: 40em) { .r-width { padding: 0 var(--space-5); } }
.r-main { flex: 1 0 auto; padding: var(--space-5) 0 var(--space-7); }

/* the page content sits in one white card (the original look), with a seal-red strip on top */
.r-main > .r-width {
	background: var(--paper);
	border: 1px solid var(--line);
	border-top-color: var(--seal-red);
	border-radius: var(--radius);
	overflow: hidden;
	/* seal-red strip across the top, clipped by the card's own corners (a thick border-top would bend round them) */
	box-shadow: inset 0 4px 0 var(--seal-red), var(--shadow);
	padding: var(--space-5) var(--space-4) var(--space-6);
	max-width: calc(var(--page) - 2 * var(--space-5));
}
@media (min-width: 40em) { .r-main > .r-width { padding: var(--space-6) var(--space-7) var(--space-7); } }
@media (max-width: 40em) { .r-main { padding: var(--space-3) var(--space-3) var(--space-6); } }

/* ---------- header: centred seal (as before) ---------- */
.r-header { background: var(--paper); box-shadow: 0 1px 0 var(--line), 0 2px 8px rgba(31, 35, 40, .05); }
.r-header__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) 0; }
.r-header__logo { grid-column: 2; display: inline-block; line-height: 0; }
.r-header__logo img { height: 48px; width: auto; }
@media (min-width: 40em) { .r-header__logo img { height: 60px; } }
.r-header nav { grid-column: 3; justify-self: end; }
.r-header__nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; }
.r-header__nav a { font-weight: 600; font-size: var(--text-small); text-decoration: none; color: var(--ink); padding: 10px 0; display: inline-block; }
.r-header__nav a:hover { color: var(--seal-red); }
@media (max-width: 40em) {
	.r-header__bar { grid-template-columns: 1fr; justify-items: center; padding-bottom: var(--space-1); }
	.r-header__logo, .r-header nav { grid-column: 1; justify-self: center; }
	.r-header__nav { justify-content: center; }
}

/* ---------- footer (as before: school left, phone right) ---------- */
.r-footer { border-top: 1px solid var(--line); background: var(--paper); padding: var(--space-4) 0; color: var(--ink-secondary); font-size: var(--text-small); }
.r-footer .r-width { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-5); }
.r-footer p { margin: 0; }
.r-footer strong { color: var(--ink); font-weight: 600; }

/* ---------- card title (centred, with divider — as before) ---------- */
.r-h1 { font-size: var(--text-h1); text-align: center; margin: 0 0 var(--space-2) !important; }
.r-progress { text-align: center; color: var(--ink-secondary); margin: 0 0 var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.r-h1 + .r-lead { margin-top: var(--space-2); }
.r-h2 { font-size: var(--text-h2); margin: var(--space-6) 0 var(--space-3) !important; padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
.r-h3 { font-size: var(--text-h3); margin-top: var(--space-5) !important; }
.r-lead { font-size: 1.0625rem; margin: 0 0 var(--space-4); }
.r-lead--center { text-align: center; color: var(--ink-secondary); margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.r-lead--center .r-tag { margin-left: var(--space-1); }
.r-actions-end { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--space-3); margin: 0 0 var(--space-4); }
.r-body { margin: 0 0 var(--space-3); }
/* comfortable Thai line length inside the wide card */
.r-body, .r-lead, .r-hint, .r-steps__when, .r-notice p, .r-consent p { max-width: 42rem; }
.r-lead--center, .r-progress { max-width: none; }
.r-secondary { color: var(--ink-secondary); }
.r-list { padding-left: 1.4em; margin: 0 0 var(--space-4); }
.r-list li { margin-bottom: var(--space-1); }

/* ---------- buttons ---------- */
.r-button, .r-page .btn-primary {
	display: inline-flex; align-items: center; justify-content: center;
	-webkit-appearance: none; appearance: none;
	font-family: var(--font);
	font-size: var(--text-body);
	font-weight: 600;
	line-height: 1.4;
	color: #fff !important;
	background: var(--seal-red);
	border: 1px solid var(--seal-red);
	border-radius: var(--radius-sm);
	padding: 10px 22px;
	margin: 0 0 var(--space-3);
	text-decoration: none !important;
	text-align: center;
	cursor: pointer;
	min-height: 44px;
	min-width: 160px;
	white-space: nowrap;
	transition: background-color .15s ease-out;
}
.r-button:hover, .r-page .btn-primary:hover { background: var(--seal-red-dark); border-color: var(--seal-red-dark); color: #fff; }
.r-button:active { background: var(--seal-red-deep); }
.r-button--secondary { background: var(--paper); color: var(--ink) !important; border-color: var(--line-strong); }
.r-button--secondary:hover { background: var(--panel); color: var(--ink) !important; border-color: var(--seal-grey); }
.r-button[disabled], .r-button.disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 40em) { .r-button { width: 100%; white-space: normal; } }
.r-button-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); margin-top: var(--space-5); }

/* ---------- tags (status) ---------- */
.r-tag { display: inline-block; font-weight: 600; font-size: 0.8125rem; line-height: 1.6; padding: 1px 10px; border-radius: 999px; color: var(--ink); background: var(--tag-neutral); vertical-align: middle; white-space: nowrap; }
.r-tag--open { color: var(--success); background: var(--success-soft); }
.r-tag--closed { color: #fff; background: var(--seal-grey); }
.r-tag--wait { color: var(--ink-secondary); background: var(--tag-neutral); }

/* ---------- boxes ---------- */
.r-inset { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--seal-grey); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-5); }
.r-warning { display: flex; gap: var(--space-3); align-items: flex-start; background: var(--seal-red-soft); border: 1px solid var(--seal-red-edge); border-radius: var(--radius-sm); padding: var(--space-4); margin: 0 0 var(--space-5); color: var(--seal-red-text); font-weight: 600; }
.r-warning__icon { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--seal-red); color: #fff; font-weight: 700; font-size: 1rem; line-height: 26px; text-align: center; margin-top: 2px; }
.r-panel { background: var(--success-soft); color: var(--success); border: 1px solid var(--success-edge); border-radius: var(--radius); padding: var(--space-4); margin: 0 0 var(--space-4); text-align: center; }
.r-panel p { margin: 0; }
.r-panel__big { font-size: 2rem; font-weight: 700; line-height: 1.35; color: var(--ink); }
.r-notice { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--seal-red); border-radius: var(--radius-sm); padding: var(--space-4); margin: 0 0 var(--space-5); }
.r-notice > *:last-child, .r-inset > *:last-child, .r-warning > *:last-child, .r-consent > *:last-child { margin-bottom: 0; }
.r-notice .r-panel__big { font-size: 1.25rem; }

/* ---------- steps on the home card: number · text · action at the end of the row ---------- */
.r-steps { list-style: none; margin: 0 0 var(--space-5); padding: 0; counter-reset: step; }
.r-steps__item {
	position: relative;
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	column-gap: var(--space-4);
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--line);
}
.r-steps__item:last-child { border-bottom: 0; }
.r-steps__item::before {
	counter-increment: step; content: counter(step);
	grid-column: 1; grid-row: 1 / span 4;
	width: 40px; height: 40px; border-radius: 50%;
	border: 2px solid var(--seal-red); color: var(--seal-red);
	font-weight: 700; font-size: 1.125rem; line-height: 36px; text-align: center;
}
.r-steps__item > * { grid-column: 2; }
.r-steps__title { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); row-gap: var(--space-1); font-size: var(--text-h3); margin: 6px 0 var(--space-1) !important; }
.r-steps__when { margin: 0 0 var(--space-1); color: var(--ink-secondary); font-size: var(--text-small); }
.r-steps__when strong { color: var(--ink); font-weight: 600; }
.r-steps__item .r-body { font-size: var(--text-small); color: var(--ink-secondary); margin-bottom: var(--space-2); }
.r-steps__item > .r-button { grid-column: 1 / -1; justify-self: stretch; margin: var(--space-3) 0 0; }
@media (min-width: 48em) {
	.r-steps__item { grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; }
	.r-steps__when strong { white-space: nowrap; }
	.r-steps__item > .r-button { grid-column: 3; grid-row: 1 / span 4; align-self: center; margin: 0; min-width: 11.5rem; }
}

/* ---------- tables ---------- */
.r-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; font-size: var(--text-small); }
.r-table th, .r-table td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.r-table tbody tr:last-child th, .r-table tbody tr:last-child td { border-bottom: 0; }
.r-table thead th { background: var(--panel); font-weight: 700; color: var(--ink); }
.r-table tbody th { font-weight: 600; width: 38%; }
.r-table tbody tr:nth-child(even) { background: var(--row-alt); }
@media (max-width: 40em) {
	.r-table--stack thead { display: none; }
	.r-table--stack tr { display: block; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
	.r-table--stack tbody tr:last-child { border-bottom: 0; }
	.r-table--stack th, .r-table--stack td { display: block; width: auto; border: 0; padding: 0; }
	.r-table--stack tbody th { width: auto; color: var(--ink); margin-bottom: 2px; }
}

/* ---------- summary list (review / status) ---------- */
.r-summary { margin: 0 0 var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.r-summary__row { border-bottom: 1px solid var(--line); padding: var(--space-3) var(--space-4); }
.r-summary__row:last-child { border-bottom: 0; }
.r-summary__key { font-weight: 600; color: var(--ink-secondary); font-size: var(--text-small); margin: 0; }
.r-summary__value { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 40em) {
	.r-summary__row { display: flex; gap: var(--space-4); }
	.r-summary__key { flex: 0 0 34%; font-size: var(--text-body); }
	.r-summary__value { flex: 1 1 auto; }
}
.r-docs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin: 0 0 var(--space-5); }
@media (min-width: 40em) { .r-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.r-docs figure { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-3); }
.r-docs figcaption { font-weight: 600; margin-bottom: var(--space-2); }
.r-docs img { width: 100%; height: auto; max-height: 360px; object-fit: contain; background: var(--panel); display: block; margin-bottom: var(--space-2); border-radius: 4px; }

/* ---------- forms ---------- */
.r-form fieldset.r-fieldset, fieldset.r-fieldset { border: 0; margin: 0 0 var(--space-7); padding: 0; min-width: 0; }
.r-lead + .r-fieldset, .r-lead + form .r-fieldset:first-child { margin-top: var(--space-5); }
.r-fieldset__legend {
	display: block; width: 100%; float: none;
	font-size: var(--text-h2); font-weight: 700; line-height: var(--leading-heading); color: var(--ink);
	margin: 0 0 var(--space-4); padding: 0 0 var(--space-2);
	border-bottom: 1px solid var(--line);
}
.r-field { margin: 0 0 var(--space-4); }
.r-label { display: block; font-weight: 600; margin: 0 0 var(--space-1); color: var(--ink); }
.r-label--small { font-weight: 600; font-size: var(--text-small); color: var(--ink-secondary); }
.r-hint { display: block; color: var(--ink-secondary); margin: 0 0 var(--space-2); font-size: var(--text-small); line-height: 1.75; }
.r-optional { font-weight: 400; color: var(--ink-secondary); }
.r-hint--important { color: var(--seal-red-dark); font-weight: 600; }
.r-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); }
@media (min-width: 40em) {
	.r-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.r-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.r-row--date { grid-template-columns: 7rem minmax(0, 12rem) 8rem; }
}
.r-row .r-field { margin: 0; }
.r-row--narrow { max-width: 20rem; }

.r-page input.form-control, .r-page select.form-control, .r-page textarea.form-control,
.r-form input[type="text"], .r-form input[type="password"], .r-form select, .r-form textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	min-height: 44px;
	font-family: var(--font);
	font-size: var(--text-body);
	line-height: 1.5;
	color: var(--ink);
	background-color: var(--paper);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	padding: 9px 12px;
	margin: 0;
	box-shadow: none;
	transition: border-color .15s ease-out;
}
.r-page input.form-control:hover, .r-page select.form-control:hover { border-color: var(--seal-grey); }
.r-page input.form-control:focus, .r-page select.form-control:focus, .r-page textarea.form-control:focus { border-color: var(--seal-red); outline: 2px solid var(--seal-red) !important; outline-offset: 0; }
/* bootstrap's select.form-control:not([size]):not([multiple]) sets a taller height; match its specificity */
.r-page select.form-control, .r-page select.form-control:not([size]):not([multiple]) { height: 44px; padding-top: 0; padding-bottom: 0; -webkit-appearance: none; appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-secondary) 50%), linear-gradient(135deg, var(--ink-secondary) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.r-page .r-input--id-wrap input.form-control { max-width: 20ch; font-variant-numeric: tabular-nums; }
.r-input--idfield { max-width: 20ch !important; font-variant-numeric: tabular-nums; }

/* radios from TRadio: <fieldset class="radio"><label><input type="radio"> text</label></fieldset> */
.r-page fieldset.radio { border: 0; margin: 0 0 var(--space-1); padding: 0; }
.r-page fieldset.radio label { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: 4px 0; cursor: pointer; font-weight: 400; margin: 0; }
.r-page fieldset.radio br { display: none; }
.r-page input[type="radio"], .r-page input[type="checkbox"] { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; accent-color: var(--seal-red); cursor: pointer; }

/* live citizen-ID check message (#error_id) */
.r-idcheck { display: block; margin-top: var(--space-1); font-weight: 600; font-size: var(--text-small); }
.r-idcheck:empty { display: none; }
.r-idcheck--ok { color: var(--success); }
.r-idcheck--bad { color: var(--seal-red); }
.r-idcheck--wait { color: var(--ink-secondary); }
.r-existing img { max-width: 320px; width: 100%; border: 1px solid var(--line); border-radius: 4px; display: block; margin: var(--space-2) 0; }

/* file upload with a Thai button: the native input stays in the DOM (keyboard + screen readers), visually hidden */
.r-file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); }
.r-file input[type="file"] { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; overflow: hidden; }
.r-file__button { display: inline-block; font-weight: 600; font-size: var(--text-small); background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px 16px; min-height: 44px; line-height: 1.6; cursor: pointer; margin: 0; }
.r-file__button:hover { border-color: var(--seal-grey); }
.r-file:focus-within .r-file__button { outline: 2px solid var(--seal-red); outline-offset: 2px; }
.r-file__name { color: var(--ink-secondary); font-size: var(--text-small); overflow-wrap: anywhere; }

/* ---------- error summary (framework error_msg) ---------- */
.r-error-summary { border: 1px solid var(--seal-red-edge); border-left: 4px solid var(--seal-red); border-radius: var(--radius-sm); background: var(--seal-red-soft); padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-5); }
.r-error-summary:focus { outline: 2px solid var(--seal-red); outline-offset: 2px; }
.r-error-summary__title { font-size: var(--text-h3); font-weight: 700; margin: 0 0 var(--space-2); line-height: var(--leading-heading); }
.r-error-summary__body { color: var(--error-text); font-weight: 600; margin: 0; }

/* ---------- consent block ---------- */
.r-consent { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-4); }
.r-consent p { margin: 0 0 var(--space-3); color: var(--seal-red-text); }

/* ---------- citizen-ID entry pages: narrow centred card ---------- */
.r-single { max-width: 30rem; margin: 0 auto; }
.r-single .r-button { width: 100%; }
.r-single input.form-control { max-width: 100% !important; }

/* ---------- legacy templates still using the old theme classes (report-in form) ---------- */
.r-page .app-content, .r-page .content-wrapper { padding: 0 !important; margin: 0 !important; }
.r-page .content-header { display: none; }
.r-page .card { border: 0; background: transparent; box-shadow: none; margin: 0 0 var(--space-5); }
.r-page .card-header { background: transparent; border: 0; padding: 0; }
.r-page .card-block, .r-page .card-body { padding: 0; }
.r-page .card-title { font-size: var(--text-h2); font-weight: 700; }
.r-page .heading-elements, .r-page .heading-elements-toggle { display: none !important; }
.r-page .form-section { font-size: var(--text-h2); font-weight: 700; line-height: var(--leading-heading); color: var(--ink); border-bottom: 1px solid var(--line); padding: 0 0 var(--space-2); margin: var(--space-6) 0 var(--space-4); }
.r-page h1.form-section { font-size: var(--text-h1); text-align: center; margin-top: 0; }
.r-page .form-section:first-child { margin-top: 0; }
.r-page .label-control { font-weight: 600; text-align: left; padding-top: 0; }
.r-page .form-group { margin-bottom: var(--space-4); }
.r-page .form-group.row { margin-left: 0; margin-right: 0; }
.r-page .form-group.row > [class*="col-"] { padding-left: 0; padding-right: var(--space-2); margin-bottom: var(--space-2); }
.r-page .text-muted, .r-page small { color: var(--ink-secondary); font-size: var(--text-small); }
.r-page code { color: var(--ink); background: var(--panel); font-family: var(--font); font-size: inherit; padding: 0 4px; }
.r-page .btn { font-family: var(--font); font-size: var(--text-body); font-weight: 600; border-radius: var(--radius-sm); min-height: 44px; padding: 8px 18px; }
.r-page .btn-outline-info, .r-page .btn-outline-primary, .r-page .btn-outline-warning, .r-page .btn-outline-success { color: var(--ink); background: #fff; border: 1px solid var(--line-strong); }
.r-page .btn-outline-info:hover, .r-page .btn-outline-primary:hover, .r-page .btn-outline-warning:hover, .r-page .btn-outline-success:hover { background: var(--panel); color: var(--ink); }
.r-page .btn-outline-success[type="submit"], .r-page input[type="submit"].btn { color: #fff; background: var(--seal-red); border-color: var(--seal-red); }
.r-page .text-danger, .r-page .danger, .r-page .red { color: var(--seal-red) !important; }
.r-page .text-success, .r-page .success { color: var(--success) !important; }
.r-page .text-warning, .r-page .text-info, .r-page .text-primary { color: var(--ink) !important; }
.r-page mark { background: var(--mark); color: var(--ink); padding: 0 2px; }
.r-page .alert { border-radius: var(--radius-sm); border: 1px solid var(--seal-red-edge); background: var(--seal-red-soft); color: var(--ink); padding: var(--space-4); }
.r-page .alert .close { display: none; }

/* ---------- SweetAlert (framework alerts() popups) ---------- */
.sweet-alert { font-family: var(--font) !important; border-radius: var(--radius) !important; }
.sweet-alert h2 { font-family: var(--font) !important; color: var(--ink) !important; line-height: 1.4 !important; }
.sweet-alert p { font-family: var(--font) !important; font-size: 1rem !important; color: var(--ink) !important; line-height: 1.75 !important; }
.sweet-alert button { font-family: var(--font) !important; font-size: 1rem !important; font-weight: 600 !important; border-radius: var(--radius-sm) !important; background: var(--seal-red) !important; box-shadow: none !important; min-width: 120px; }