/* ==========================================================================
   Xaler UI — shared design system
   --------------------------------------------------------------------------
   Single source of truth for palette, type scale, spacing, radii, elevation
   and shared component styles across the marketing site, the dashboard and
   the standalone tool pages.

   The palette is sampled from the Logiciel Analytics wordmark itself, whose
   dominant pixels are #4A9CFF / #489CD8 / #60C0E4 — an azure blue. The UI
   anchors on a deeper shade of that same hue so it carries brand identity and
   still passes contrast; the bright logo azure is reserved for accents,
   gradients and icon tints, where it never has to carry text.

       brand azure   #4A9CFF  (the logo)
       action blue   #1B72A8  (buttons, 5.2:1 on white)
       link blue     #145A87  (text, 7.4:1 on white)
       ink navy      #13263C

   Green is a STATUS colour only (success), never the primary.

   This file is presentation only. It never changes markup semantics, form
   field names, URLs or behaviour.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
	/* ---- Brand ----------------------------------------------------------
	   This is the ORIGINAL blue the product shipped with (Metronic's
	   #1B84FF family) — restored at the user's request after two attempts at
	   a logo-sampled azure both read wrong. Do not re-tint this ramp. */
	--xa-primary: #1b84ff; /* primary action fill — the old blue    */
	--xa-primary-50: #e9f3ff;
	--xa-primary-100: #d1e6ff;
	--xa-primary-200: #a4ceff;
	--xa-primary-300: #76b5ff; /* brand text on dark navy (6.9:1)      */
	--xa-primary-400: #4a9cff;
	--xa-primary-500: #1b84ff; /* the blue                             */
	--xa-primary-600: #056ee9; /* hover / pressed fills (4.8:1 white)  */
	--xa-primary-700: #006ae6; /* text on light surfaces (5.0:1)       */
	--xa-primary-800: #0057bd;
	--xa-primary-900: #01438f;

	--xa-secondary: #4a9cff; /* logo azure — accents, illustration   */
	--xa-secondary-600: #1b84ff;
	--xa-secondary-700: #1b84ff;

	--xa-accent: #f0b429; /* restrained gold — use sparingly      */
	--xa-accent-600: #d19a1c;

	--xa-ink: #13263c; /* deep navy — dark surfaces           */
	--xa-ink-800: #1A3050;
	--xa-ink-700: #2b4666;

	/* ---- Neutrals ------------------------------------------------------- */
	--xa-white: #ffffff;
	--xa-gray-50: #f8fafc;
	--xa-gray-100: #f1f5f9;
	--xa-gray-200: #e6edf3;
	--xa-gray-300: #d3dde6;
	--xa-gray-400: #9aa8b8;
	--xa-gray-500: #6b7c8f;
	--xa-gray-600: #52616f;
	--xa-gray-700: #3b4754;
	--xa-gray-800: #26303a;
	--xa-gray-900: #131a21;

	/* ---- Semantic surfaces & text --------------------------------------- */
	--xa-bg: var(--xa-gray-50);
	--xa-surface: var(--xa-white);
	--xa-surface-subtle: var(--xa-gray-100);
	--xa-border: var(--xa-gray-200);
	--xa-border-strong: var(--xa-gray-300);

	--xa-text: var(--xa-gray-900);
	--xa-text-secondary: var(--xa-gray-600);
	--xa-text-muted: var(--xa-gray-500);
	--xa-text-on-brand: #ffffff;

	/* ---- Status ---------------------------------------------------------
	   Muted, professional tones. The old neon green (#12CE5D) read as a
	   consumer app rather than a financial product. */
	--xa-success: #0e9f6e;
	--xa-success-bg: #e8f7f1;
	--xa-success-text: #066749;

	--xa-warning: #d97706;
	--xa-warning-bg: #fdf3e4;
	--xa-warning-text: #92500a;

	--xa-danger: #d14343;
	--xa-danger-bg: #fceded;
	--xa-danger-text: #a12f2f;

	--xa-info: #1b84ff;
	--xa-info-bg: #e9f3ff;
	--xa-info-text: #006ae6;

	/* ---- Typography ------------------------------------------------------ */
	--xa-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	--xa-font-mono: "SFMono-Regular", ui-monospace, "JetBrains Mono", Menlo,
		Consolas, "Liberation Mono", monospace;

	/* Type scale — 1.200 minor third, 15px base                              */
	--xa-text-2xs: 0.6875rem; /* 11px */
	--xa-text-xs: 0.75rem; /* 12px */
	--xa-text-sm: 0.8125rem; /* 13px */
	--xa-text-base: 0.9375rem; /* 15px */
	--xa-text-md: 1rem; /* 16px */
	--xa-text-lg: 1.125rem; /* 18px */
	--xa-text-xl: 1.375rem; /* 22px */
	--xa-text-2xl: 1.625rem; /* 26px */
	--xa-text-3xl: 2rem; /* 32px */

	--xa-leading-tight: 1.25;
	--xa-leading-normal: 1.6;
	--xa-leading-relaxed: 1.75;

	/* ---- Spacing — 4px base ---------------------------------------------- */
	--xa-space-1: 0.25rem;
	--xa-space-2: 0.5rem;
	--xa-space-3: 0.75rem;
	--xa-space-4: 1rem;
	--xa-space-5: 1.25rem;
	--xa-space-6: 1.5rem;
	--xa-space-8: 2rem;
	--xa-space-10: 2.5rem;
	--xa-space-12: 3rem;
	--xa-space-16: 4rem;

	/* ---- Radii ------------------------------------------------------------ */
	--xa-radius-xs: 4px;
	--xa-radius-sm: 6px;
	--xa-radius-md: 10px;
	--xa-radius-lg: 14px;
	--xa-radius-xl: 20px;
	--xa-radius-pill: 999px;

	/* ---- Elevation -------------------------------------------------------- */
	--xa-shadow-xs: 0 1px 2px rgba(19, 38, 60, 0.05);
	--xa-shadow-sm: 0 1px 3px rgba(19, 38, 60, 0.07), 0 1px 2px rgba(19, 38, 60, 0.04);
	--xa-shadow-md: 0 4px 12px rgba(19, 38, 60, 0.08), 0 2px 4px rgba(19, 38, 60, 0.04);
	--xa-shadow-lg: 0 12px 28px rgba(19, 38, 60, 0.1), 0 4px 8px rgba(19, 38, 60, 0.05);
	--xa-shadow-brand: 0 4px 14px rgba(27, 132, 255, 0.26);

	/* Focus ring, kept in one place so every control matches. */
	--xa-focus-ring: 0 0 0 3px rgba(27, 132, 255, 0.22);

	/* ---- Motion ----------------------------------------------------------- */
	--xa-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--xa-duration: 180ms;

	/* ---- Layout ----------------------------------------------------------- */
	--xa-container: 1400px;
	--xa-header-height: 64px;

	/* ---- Gradients --------------------------------------------------------- */
	--xa-gradient-brand: linear-gradient(135deg, #1b84ff 0%, #1b84ff 100%);
	--xa-gradient-accent: linear-gradient(135deg, #4a9cff 0%, #1b84ff 100%);
	--xa-gradient-ink: linear-gradient(135deg, #13263c 0%, #1a3050 100%);
}

/* --------------------------------------------------------------------------
   1b. Compatibility aliases: the --x-* token set
   --------------------------------------------------------------------------
   Four tool pages (transunion_cibil, bank_data_aa, esign, clickwrap_error)
   alias their local variables to a `--x-*` set that was never defined
   anywhere. Every one of those lookups resolved to nothing, so their buttons
   rendered with no background (white text on white) and their cards lost their
   surface colour — that is why the "Get CIBIL Score" button was invisible.

   Defining the set here fixes all four pages at once, with no page edits.
   -------------------------------------------------------------------------- */
:root {
	--x-brand: var(--xa-primary);
	--x-brand-active: var(--xa-primary-700);
	--x-brand-teal: var(--xa-secondary);
	--x-brand-gradient: var(--xa-gradient-brand);

	--x-canvas: var(--xa-bg);
	--x-surface: var(--xa-surface);
	--x-line: var(--xa-border);

	--x-ink: var(--xa-text);
	--x-ink-2: var(--xa-text-secondary);

	--x-success: var(--xa-success);
	--x-warning: var(--xa-warning);
	--x-danger: var(--xa-danger);
	--x-info: var(--xa-info);
	--x-info-ink: var(--xa-info-text);
	--x-info-soft: var(--xa-info-bg);
}

/* --------------------------------------------------------------------------
   2. Base / reset niceties
   -------------------------------------------------------------------------- */
.xa-scope,
body.xa-page {
	font-family: var(--xa-font-sans);
	color: var(--xa-text);
	font-size: var(--xa-text-base);
	line-height: var(--xa-leading-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-variant-numeric: tabular-nums;
}

body.xa-page {
	background-color: var(--xa-bg);
	overflow-x: hidden;
}

/* Nothing should ever push the document sideways. */
html,
body {
	max-width: 100%;
}

/* Images must not overflow their container — but do NOT force `height: auto`
   here. This selector outranks single-class rules like `.logo { height: 28px }`,
   which silently inflated every header logo to its intrinsic size. */
.xa-page img,
.xa-page svg,
.xa-page video,
.xa-page canvas {
	max-width: 100%;
}

/* Long unbroken strings (tokens, hashes, request ids, URLs) are the single
   most common cause of horizontal overflow on these pages. */
.xa-break {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Visible, on-brand focus ring for keyboard users everywhere. */
.xa-page :focus-visible {
	outline: 2px solid var(--xa-primary-600);
	outline-offset: 2px;
	border-radius: var(--xa-radius-xs);
}

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

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.xa-container {
	width: 100%;
	max-width: var(--xa-container);
	margin-inline: auto;
	padding-inline: var(--xa-space-6);
}

@media (max-width: 768px) {
	.xa-container {
		padding-inline: var(--xa-space-4);
	}
}

@media (max-width: 480px) {
	.xa-container {
		padding-inline: var(--xa-space-3);
	}
}

/* Auto-fitting grid — the workhorse for stat tiles and field grids.
   Collapses to a single column on its own, no breakpoint needed. */
.xa-grid {
	display: grid;
	gap: var(--xa-space-4);
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.xa-grid--sm {
	grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}

.xa-grid--lg {
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

/* Two-pane tool layout: request form on the left, results on the right.
   Several tool pages declared a `.container` grid in CSS but never put that
   class on any element, so their two cards stacked full-width on desktop and
   wasted the whole right-hand side. Applying this to the page's main element
   gives them the intended side-by-side arrangement. */
.xa-workspace {
	/* Equal halves, matching the pages that already used `1fr 1fr`
	   (.tu-container, .aa-container, pan_details_plus, rc_advanced) so every
	   tool page reads the same. A fixed narrow left column starved the form
	   inputs of width. */
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--xa-space-6);
	align-items: start;
}

.xa-workspace > * {
	min-width: 0;
}

/* Label-beside-input grids assume a full-width page. Inside a half-width pane
   they leave the field ~176px wide — too small to read what you typed. Stack
   the label above the input whenever the form sits in a workspace pane.
   Two classes beats the pages' single-class rule without needing !important. */
.xa-workspace .form-group,
.xa-workspace .form-row {
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
	gap: var(--xa-space-2);
}

.xa-workspace .form-label {
	font-size: var(--xa-text-sm);
	font-weight: 600;
	color: var(--xa-text);
}

/* Anything explicitly full-width (page headers, alerts) spans both panes. */
.xa-workspace > .xa-workspace-full {
	grid-column: 1 / -1;
}

@media (max-width: 1100px) {
	.xa-workspace {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--xa-space-4);
	}
}

.xa-stack {
	display: flex;
	flex-direction: column;
	gap: var(--xa-space-4);
}

.xa-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--xa-space-3);
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
.xa-page-title {
	font-size: var(--xa-text-2xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: var(--xa-leading-tight);
	color: var(--xa-text);
	margin: 0;
}

.xa-page-subtitle {
	font-size: var(--xa-text-base);
	color: var(--xa-text-secondary);
	margin: var(--xa-space-1) 0 0;
}

.xa-section-title {
	font-size: var(--xa-text-lg);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--xa-text);
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--xa-space-2);
}

.xa-section-title svg {
	width: 20px;
	height: 20px;
	color: var(--xa-primary-600);
	flex-shrink: 0;
}

.xa-label {
	font-size: var(--xa-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--xa-text-muted);
}

.xa-muted {
	color: var(--xa-text-muted);
}

.xa-mono {
	font-family: var(--xa-font-mono);
	font-size: 0.9em;
}

@media (max-width: 640px) {
	.xa-page-title {
		font-size: var(--xa-text-xl);
	}
	.xa-section-title {
		font-size: var(--xa-text-md);
	}
}

/* --------------------------------------------------------------------------
   5. Cards
   -------------------------------------------------------------------------- */
.xa-card {
	background: var(--xa-surface);
	border: 1px solid var(--xa-border);
	border-radius: var(--xa-radius-lg);
	box-shadow: var(--xa-shadow-sm);
	overflow: hidden;
}

.xa-card__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--xa-space-3);
	padding: var(--xa-space-5) var(--xa-space-6);
	border-bottom: 1px solid var(--xa-border);
}

.xa-card__body {
	padding: var(--xa-space-6);
}

.xa-card__footer {
	padding: var(--xa-space-4) var(--xa-space-6);
	border-top: 1px solid var(--xa-border);
	background: var(--xa-gray-50);
}

@media (max-width: 640px) {
	.xa-card {
		border-radius: var(--xa-radius-md);
	}
	.xa-card__header {
		padding: var(--xa-space-4);
	}
	.xa-card__body {
		padding: var(--xa-space-4);
	}
	.xa-card__footer {
		padding: var(--xa-space-3) var(--xa-space-4);
	}
}

/* Stat tile ---------------------------------------------------------------- */
.xa-stat {
	background: var(--xa-surface);
	border: 1px solid var(--xa-border);
	border-radius: var(--xa-radius-md);
	padding: var(--xa-space-5);
	display: flex;
	align-items: flex-start;
	gap: var(--xa-space-4);
	min-width: 0; /* lets the tile shrink instead of overflowing its grid cell */
	transition: box-shadow var(--xa-duration) var(--xa-ease),
		transform var(--xa-duration) var(--xa-ease);
}

.xa-stat:hover {
	box-shadow: var(--xa-shadow-md);
	transform: translateY(-1px);
}

.xa-stat__icon {
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border-radius: var(--xa-radius-md);
	display: grid;
	place-items: center;
	background: var(--xa-primary-50);
	color: var(--xa-primary-700);
}

.xa-stat__icon svg {
	width: 20px;
	height: 20px;
}

.xa-stat__icon--success {
	background: var(--xa-success-bg);
	color: var(--xa-success-text);
}
.xa-stat__icon--warning {
	background: var(--xa-warning-bg);
	color: var(--xa-warning-text);
}
.xa-stat__icon--danger {
	background: var(--xa-danger-bg);
	color: var(--xa-danger-text);
}
.xa-stat__icon--info {
	background: var(--xa-info-bg);
	color: var(--xa-info-text);
}

.xa-stat__body {
	min-width: 0;
	flex: 1;
}

.xa-stat__label {
	font-size: var(--xa-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--xa-text-muted);
	margin-bottom: var(--xa-space-1);
}

.xa-stat__value {
	font-size: var(--xa-text-2xl);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--xa-text);
	overflow-wrap: anywhere;
}

.xa-stat__meta {
	font-size: var(--xa-text-xs);
	color: var(--xa-text-muted);
	margin-top: var(--xa-space-1);
}

@media (max-width: 480px) {
	.xa-stat {
		padding: var(--xa-space-4);
		gap: var(--xa-space-3);
	}
	.xa-stat__value {
		font-size: var(--xa-text-xl);
	}
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.xa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--xa-space-2);
	padding: 0.625rem 1.125rem;
	font-family: inherit;
	font-size: var(--xa-text-sm);
	font-weight: 600;
	line-height: 1.2;
	border-radius: var(--xa-radius-md);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--xa-duration) var(--xa-ease),
		border-color var(--xa-duration) var(--xa-ease),
		box-shadow var(--xa-duration) var(--xa-ease),
		transform var(--xa-duration) var(--xa-ease);
}

.xa-btn svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.xa-btn:active {
	transform: translateY(1px);
}

.xa-btn:disabled,
.xa-btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

.xa-btn--primary {
	background: var(--xa-gradient-brand);
	color: var(--xa-text-on-brand);
	box-shadow: var(--xa-shadow-brand);
}

.xa-btn--primary:hover {
	color: var(--xa-text-on-brand);
	box-shadow: 0 6px 20px rgba(27, 114, 168, 0.30);
}

.xa-btn--secondary {
	background: var(--xa-surface);
	color: var(--xa-text);
	border-color: var(--xa-border-strong);
	box-shadow: var(--xa-shadow-xs);
}

.xa-btn--secondary:hover {
	background: var(--xa-gray-50);
	border-color: var(--xa-gray-400);
	color: var(--xa-text);
}

.xa-btn--ghost {
	background: transparent;
	color: var(--xa-text-secondary);
}

.xa-btn--ghost:hover {
	background: var(--xa-surface-subtle);
	color: var(--xa-text);
}

.xa-btn--danger {
	background: var(--xa-danger);
	color: #fff;
}

.xa-btn--danger:hover {
	background: var(--xa-danger-text);
	color: #fff;
}

.xa-btn--sm {
	padding: 0.4375rem 0.8125rem;
	font-size: var(--xa-text-xs);
}

.xa-btn--lg {
	padding: 0.8125rem 1.5rem;
	font-size: var(--xa-text-base);
}

.xa-btn--block {
	width: 100%;
}

/* On the smallest screens buttons in a toolbar go full width rather than
   wrapping into slivers. */
@media (max-width: 420px) {
	.xa-btn--responsive {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   7. Badges & pills
   -------------------------------------------------------------------------- */
.xa-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--xa-space-1);
	padding: 0.1875rem 0.5rem;
	border-radius: var(--xa-radius-pill);
	font-size: var(--xa-text-xs);
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	background: var(--xa-surface-subtle);
	color: var(--xa-text-secondary);
	border: 1px solid transparent;
}

.xa-badge--success {
	background: var(--xa-success-bg);
	color: var(--xa-success-text);
}
.xa-badge--warning {
	background: var(--xa-warning-bg);
	color: var(--xa-warning-text);
}
.xa-badge--danger {
	background: var(--xa-danger-bg);
	color: var(--xa-danger-text);
}
.xa-badge--info {
	background: var(--xa-info-bg);
	color: var(--xa-info-text);
}
.xa-badge--brand {
	background: var(--xa-primary-50);
	color: var(--xa-primary-700);
}
.xa-badge--neutral {
	background: var(--xa-gray-100);
	color: var(--xa-gray-600);
}

.xa-badge__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */
.xa-field {
	display: flex;
	flex-direction: column;
	gap: var(--xa-space-2);
	min-width: 0;
}

.xa-field__label {
	font-size: var(--xa-text-sm);
	font-weight: 600;
	color: var(--xa-text);
}

.xa-field__label .xa-required::after,
.xa-required::after {
	content: " *";
	color: var(--xa-danger);
}

.xa-field__hint {
	font-size: var(--xa-text-xs);
	color: var(--xa-text-muted);
}

.xa-field__error {
	font-size: var(--xa-text-xs);
	color: var(--xa-danger-text);
	display: flex;
	align-items: center;
	gap: var(--xa-space-1);
}

.xa-input,
.xa-select,
.xa-textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.625rem 0.875rem;
	font-family: inherit;
	/* 16px on touch devices stops iOS Safari zooming the viewport on focus. */
	font-size: var(--xa-text-base);
	color: var(--xa-text);
	background: var(--xa-surface);
	border: 1px solid var(--xa-border-strong);
	border-radius: var(--xa-radius-sm);
	transition: border-color var(--xa-duration) var(--xa-ease),
		box-shadow var(--xa-duration) var(--xa-ease);
	appearance: none;
}

.xa-textarea {
	min-height: 96px;
	resize: vertical;
}

.xa-select {
	/* Replace the default OS control with a consistent chevron. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7c8f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	padding-right: 2.25rem;
}

.xa-input::placeholder,
.xa-textarea::placeholder {
	color: var(--xa-gray-400);
}

.xa-input:hover,
.xa-select:hover,
.xa-textarea:hover {
	border-color: var(--xa-gray-400);
}

.xa-input:focus,
.xa-select:focus,
.xa-textarea:focus {
	outline: none;
	border-color: var(--xa-primary-500);
	box-shadow: var(--xa-focus-ring);
}

.xa-input:disabled,
.xa-select:disabled,
.xa-textarea:disabled {
	background: var(--xa-gray-100);
	color: var(--xa-text-muted);
	cursor: not-allowed;
}

/* Validation states */
.xa-input.is-invalid,
.xa-select.is-invalid,
.xa-textarea.is-invalid {
	border-color: var(--xa-danger);
}

.xa-input.is-invalid:focus,
.xa-select.is-invalid:focus,
.xa-textarea.is-invalid:focus {
	box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.16);
}

.xa-input.is-valid,
.xa-select.is-valid,
.xa-textarea.is-valid {
	border-color: var(--xa-success);
}

/* Form layout — labels stack above inputs and the grid auto-collapses. */
.xa-form-grid {
	display: grid;
	gap: var(--xa-space-4) var(--xa-space-5);
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.xa-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--xa-space-3);
	margin-top: var(--xa-space-5);
}

@media (max-width: 480px) {
	.xa-form-actions .xa-btn {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   9. Tables
   --------------------------------------------------------------------------
   Every wide table must sit inside .xa-table-wrap. On mobile the wrapper
   scrolls horizontally instead of the page — that is the difference between
   "responsive" and "broken".
   -------------------------------------------------------------------------- */
.xa-table-wrap {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--xa-radius-md);
	border: 1px solid var(--xa-border);
	background: var(--xa-surface);
}

/* Slim, unobtrusive scrollbars. */
.xa-table-wrap::-webkit-scrollbar,
.xa-scroll::-webkit-scrollbar {
	height: 8px;
	width: 8px;
}

.xa-table-wrap::-webkit-scrollbar-thumb,
.xa-scroll::-webkit-scrollbar-thumb {
	background: var(--xa-gray-300);
	border-radius: var(--xa-radius-pill);
}

.xa-table-wrap::-webkit-scrollbar-thumb:hover,
.xa-scroll::-webkit-scrollbar-thumb:hover {
	background: var(--xa-gray-400);
}

.xa-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--xa-text-sm);
}

.xa-table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--xa-gray-50);
	padding: var(--xa-space-3) var(--xa-space-4);
	text-align: left;
	font-size: var(--xa-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--xa-text-muted);
	border-bottom: 1px solid var(--xa-border);
	white-space: nowrap;
}

.xa-table tbody td {
	padding: var(--xa-space-3) var(--xa-space-4);
	border-bottom: 1px solid var(--xa-border);
	color: var(--xa-text-secondary);
	vertical-align: middle;
}

.xa-table tbody tr:last-child td {
	border-bottom: none;
}

.xa-table tbody tr {
	transition: background-color var(--xa-duration) var(--xa-ease);
}

.xa-table tbody tr:hover {
	background: var(--xa-gray-50);
}

.xa-table .xa-table__num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.xa-table tfoot td,
.xa-table .xa-table__total td {
	font-weight: 700;
	color: var(--xa-text);
	background: var(--xa-gray-50);
}

/* Empty state ------------------------------------------------------------- */
.xa-empty {
	text-align: center;
	padding: var(--xa-space-12) var(--xa-space-4);
	color: var(--xa-text-muted);
}

.xa-empty svg {
	width: 40px;
	height: 40px;
	color: var(--xa-gray-300);
	margin-bottom: var(--xa-space-3);
}

.xa-empty__title {
	font-size: var(--xa-text-md);
	font-weight: 600;
	color: var(--xa-text);
	margin-bottom: var(--xa-space-1);
}

/* --------------------------------------------------------------------------
   10. Definition list — the "label: value" pattern used all over the tool
       pages. Replaces two-column tables, which never fit on a phone.
   -------------------------------------------------------------------------- */
.xa-dl {
	display: grid;
	grid-template-columns: minmax(140px, 34%) 1fr;
	gap: 0;
	margin: 0;
}

.xa-dl > dt,
.xa-dl > dd {
	padding: var(--xa-space-3) var(--xa-space-4);
	border-bottom: 1px solid var(--xa-border);
	margin: 0;
	min-width: 0;
}

.xa-dl > dt {
	font-size: var(--xa-text-sm);
	font-weight: 500;
	color: var(--xa-text-muted);
	background: var(--xa-gray-50);
}

.xa-dl > dd {
	font-size: var(--xa-text-sm);
	color: var(--xa-text);
	overflow-wrap: anywhere;
}

.xa-dl > dt:last-of-type,
.xa-dl > dd:last-of-type {
	border-bottom: none;
}

/* Stack label over value on narrow screens. */
@media (max-width: 560px) {
	.xa-dl {
		grid-template-columns: 1fr;
	}
	.xa-dl > dt {
		border-bottom: none;
		padding-bottom: var(--xa-space-1);
		font-size: var(--xa-text-xs);
		text-transform: uppercase;
		letter-spacing: 0.05em;
		background: transparent;
	}
	.xa-dl > dd {
		padding-top: 0;
	}
}

/* --------------------------------------------------------------------------
   11. Alerts
   -------------------------------------------------------------------------- */
.xa-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--xa-space-3);
	padding: var(--xa-space-4);
	border-radius: var(--xa-radius-md);
	border: 1px solid transparent;
	font-size: var(--xa-text-sm);
	line-height: var(--xa-leading-normal);
}

.xa-alert svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 1px;
}

.xa-alert__body {
	min-width: 0;
	overflow-wrap: anywhere;
}

.xa-alert--info {
	background: var(--xa-info-bg);
	border-color: rgba(3, 165, 136, 0.24);
	color: var(--xa-info-text);
}
.xa-alert--success {
	background: var(--xa-success-bg);
	border-color: rgba(13, 163, 73, 0.24);
	color: var(--xa-success-text);
}
.xa-alert--warning {
	background: var(--xa-warning-bg);
	border-color: rgba(245, 158, 11, 0.28);
	color: var(--xa-warning-text);
}
.xa-alert--danger {
	background: var(--xa-danger-bg);
	border-color: rgba(229, 72, 77, 0.24);
	color: var(--xa-danger-text);
}

/* --------------------------------------------------------------------------
   12. Code / JSON viewer
   -------------------------------------------------------------------------- */
.xa-code {
	position: relative;
	background: var(--xa-ink);
	border-radius: var(--xa-radius-md);
	border: 1px solid var(--xa-ink-700);
	overflow: hidden;
}

.xa-code__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--xa-space-2);
	padding: var(--xa-space-2) var(--xa-space-3);
	background: rgba(255, 255, 255, 0.04);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.xa-code__title {
	font-size: var(--xa-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.5);
}

.xa-code__copy {
	display: inline-flex;
	align-items: center;
	gap: var(--xa-space-1);
	background: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--xa-radius-sm);
	padding: 0.3125rem 0.625rem;
	font-family: inherit;
	font-size: var(--xa-text-xs);
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--xa-duration) var(--xa-ease);
}

.xa-code__copy:hover {
	background: rgba(255, 255, 255, 0.18);
}

.xa-code pre {
	margin: 0;
	padding: var(--xa-space-4);
	max-height: 460px;
	overflow: auto;
	font-family: var(--xa-font-mono);
	font-size: var(--xa-text-xs);
	line-height: 1.6;
	color: #d7e3ee;
	white-space: pre;
	tab-size: 2;
}

/* --------------------------------------------------------------------------
   13. Loading states
   -------------------------------------------------------------------------- */
.xa-overlay {
	position: fixed;
	inset: 0;
	background: rgba(19, 38, 60, 0.45);
	backdrop-filter: blur(2px);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1080;
}

.xa-overlay.is-active {
	display: flex;
}

.xa-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid rgba(255, 255, 255, 0.25);
	border-top-color: var(--xa-primary);
	border-radius: 50%;
	animation: xa-spin 0.8s linear infinite;
}

.xa-spinner--inline {
	width: 16px;
	height: 16px;
	border-width: 2px;
	border-color: rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	display: inline-block;
	vertical-align: -2px;
}

@keyframes xa-spin {
	to {
		transform: rotate(360deg);
	}
}

.xa-skeleton {
	background: linear-gradient(
		90deg,
		var(--xa-gray-100) 25%,
		var(--xa-gray-200) 37%,
		var(--xa-gray-100) 63%
	);
	background-size: 400% 100%;
	animation: xa-shimmer 1.4s ease infinite;
	border-radius: var(--xa-radius-xs);
}

@keyframes xa-shimmer {
	0% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0 50%;
	}
}

/* --------------------------------------------------------------------------
   14. Utilities
   -------------------------------------------------------------------------- */
.xa-scroll {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.xa-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.xa-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.xa-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.xa-hide-sm {
	display: initial;
}

@media (max-width: 640px) {
	.xa-hide-sm {
		display: none !important;
	}
}