/*!
 * Engineeringa2z International Tools — Core Stylesheet
 * Har class e2zi- se shuru hoti hai. Sister plugin (e2z-) se koi collision nahi.
 * Version: 1.0.0
 */

/* =========================================================
   1. DESIGN TOKENS (CSS VARIABLES)
   Sabhi custom properties --e2zi- prefixed hain, taki sister
   plugin ke --e2z- variables kabhi leak na karen.
   ========================================================= */

.e2zi-tool,
.e2zi-grid,
.e2zi-alert,
.e2zi-toast-stack,
.e2zi-modal {
	--e2zi-primary: #0b63c5;
	--e2zi-primary-dark: #084a95;
	--e2zi-primary-soft: #e8f1fc;
	--e2zi-accent: #0f9d76;
	--e2zi-accent-soft: #e6f6f1;
	--e2zi-danger: #c62828;
	--e2zi-danger-soft: #fdecec;
	--e2zi-warning: #b26a00;
	--e2zi-warning-soft: #fff5e0;
	--e2zi-info: #0b63c5;
	--e2zi-info-soft: #e8f1fc;

	--e2zi-bg: #ffffff;
	--e2zi-bg-alt: #f6f8fb;
	--e2zi-bg-sunken: #eef2f7;
	--e2zi-text: #16202c;
	--e2zi-text-soft: #475569;
	--e2zi-text-muted: #64748b;
	--e2zi-border: #dbe3ec;
	--e2zi-border-strong: #b9c6d6;

	--e2zi-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--e2zi-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--e2zi-fs-xs: 0.75rem;
	--e2zi-fs-sm: 0.8125rem;
	--e2zi-fs-base: 0.9375rem;
	--e2zi-fs-md: 1.0625rem;
	--e2zi-fs-lg: 1.25rem;
	--e2zi-fs-xl: 1.5rem;
	--e2zi-fs-2xl: 1.875rem;
	--e2zi-lh: 1.6;

	--e2zi-space-1: 4px;
	--e2zi-space-2: 8px;
	--e2zi-space-3: 12px;
	--e2zi-space-4: 16px;
	--e2zi-space-5: 24px;
	--e2zi-space-6: 32px;
	--e2zi-space-7: 48px;

	--e2zi-radius-sm: 6px;
	--e2zi-radius: 10px;
	--e2zi-radius-lg: 16px;
	--e2zi-radius-pill: 999px;

	--e2zi-shadow-sm: 0 1px 2px rgba(16, 32, 48, 0.06);
	--e2zi-shadow: 0 2px 10px rgba(16, 32, 48, 0.08);
	--e2zi-shadow-lg: 0 12px 34px rgba(16, 32, 48, 0.16);

	--e2zi-speed: 180ms;
	--e2zi-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Dark mode — data attribute ya OS preference dono se */
.e2zi-tool[data-e2zi-theme="dark"],
[data-e2zi-theme="dark"] .e2zi-tool,
[data-e2zi-theme="dark"] .e2zi-grid {
	--e2zi-bg: #131a23;
	--e2zi-bg-alt: #1a232e;
	--e2zi-bg-sunken: #101720;
	--e2zi-text: #e8eef6;
	--e2zi-text-muted: #94a3b8;
	--e2zi-border: #2a3542;
	--e2zi-border-strong: #3b4956;
	--e2zi-primary-soft: #10263d;
	--e2zi-accent-soft: #0e2b24;
	--e2zi-danger-soft: #33191a;
	--e2zi-warning-soft: #332715;
	--e2zi-info-soft: #10263d;
	--e2zi-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
	--e2zi-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
	--e2zi-shadow-lg: 0 12px 34px rgba(0, 0, 0, 0.6);
}

/* =========================================================
   2. BASE / TYPOGRAPHY (sirf plugin ke andar scoped)
   ========================================================= */

.e2zi-tool {
	box-sizing: border-box;
	font-family: var(--e2zi-font-body);
	font-size: var(--e2zi-fs-base);
	line-height: var(--e2zi-lh);
	color: var(--e2zi-text);
	background: var(--e2zi-bg);
	max-width: 100%;
	margin: 0 0 var(--e2zi-space-5);
}

.e2zi-tool *,
.e2zi-tool *::before,
.e2zi-tool *::after {
	box-sizing: border-box;
}

.e2zi-tool__title {
	font-size: var(--e2zi-fs-xl);
	line-height: 1.25;
	font-weight: 700;
	margin: 0 0 var(--e2zi-space-4);
	color: var(--e2zi-text);
	letter-spacing: -0.01em;
}

.e2zi-tool h2,
.e2zi-tool h3,
.e2zi-tool h4 {
	color: var(--e2zi-text);
	line-height: 1.3;
	margin: 0 0 var(--e2zi-space-3);
}

.e2zi-tool p {
	margin: 0 0 var(--e2zi-space-3);
}

.e2zi-tool code,
.e2zi-code {
	font-family: var(--e2zi-font-mono);
	font-size: var(--e2zi-fs-sm);
	background: var(--e2zi-bg-sunken);
	border-radius: var(--e2zi-radius-sm);
	padding: 2px 6px;
	color: var(--e2zi-text);
}

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

.e2zi-small {
	font-size: var(--e2zi-fs-sm);
}

.e2zi-strong {
	font-weight: 700;
}

.e2zi-mono {
	font-family: var(--e2zi-font-mono);
	font-variant-numeric: tabular-nums;
}

/* =========================================================
   3. LAYOUT & GRID
   ========================================================= */

.e2zi-grid {
	display: grid;
	gap: var(--e2zi-space-4);
	grid-template-columns: 1fr;
	font-family: var(--e2zi-font-body);
	color: var(--e2zi-text);
}

.e2zi-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.e2zi-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.e2zi-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.e2zi-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e2zi-space-3);
}

.e2zi-row--between { justify-content: space-between; }
.e2zi-row--center { align-items: center; }
.e2zi-row--end { justify-content: flex-end; }

.e2zi-stack > * + * {
	margin-top: var(--e2zi-space-3);
}

.e2zi-divider {
	height: 1px;
	background: var(--e2zi-border);
	border: 0;
	margin: var(--e2zi-space-5) 0;
}

/* =========================================================
   4. CARD
   ========================================================= */

.e2zi-card {
	background: var(--e2zi-bg);
	border: 1px solid var(--e2zi-border);
	border-radius: var(--e2zi-radius);
	box-shadow: var(--e2zi-shadow-sm);
	overflow: hidden;
	transition: box-shadow var(--e2zi-speed) var(--e2zi-ease),
		border-color var(--e2zi-speed) var(--e2zi-ease);
}

.e2zi-card:hover {
	box-shadow: var(--e2zi-shadow);
}

.e2zi-card__head {
	padding: var(--e2zi-space-4);
	border-bottom: 1px solid var(--e2zi-border);
	background: var(--e2zi-bg-alt);
}

.e2zi-card__title {
	margin: 0;
	font-size: var(--e2zi-fs-md);
	font-weight: 700;
}

.e2zi-card__body {
	padding: var(--e2zi-space-4);
}

.e2zi-card__foot {
	padding: var(--e2zi-space-3) var(--e2zi-space-4);
	border-top: 1px solid var(--e2zi-border);
	background: var(--e2zi-bg-alt);
	font-size: var(--e2zi-fs-sm);
	color: var(--e2zi-text-muted);
}

.e2zi-tool-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e2zi-space-1);
	margin-bottom: var(--e2zi-space-2);
}

.e2zi-tool-card__name {
	font-size: var(--e2zi-fs-md);
	margin: 0 0 var(--e2zi-space-2);
}

.e2zi-tool-card__desc {
	color: var(--e2zi-text-muted);
	font-size: var(--e2zi-fs-sm);
	margin: 0 0 var(--e2zi-space-3);
}

.e2zi-tool-card__code {
	display: inline-block;
	font-family: var(--e2zi-font-mono);
	font-size: var(--e2zi-fs-xs);
	background: var(--e2zi-bg-sunken);
	padding: 3px 8px;
	border-radius: var(--e2zi-radius-sm);
	color: var(--e2zi-text-muted);
}

/* =========================================================
   5. FORMS
   ========================================================= */

.e2zi-field {
	margin-bottom: var(--e2zi-space-4);
}

.e2zi-label {
	display: block;
	font-size: var(--e2zi-fs-sm);
	font-weight: 600;
	color: var(--e2zi-text);
	margin-bottom: var(--e2zi-space-2);
}

.e2zi-input-group {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--e2zi-border);
	border-radius: var(--e2zi-radius-sm);
	background: var(--e2zi-bg);
	transition: border-color var(--e2zi-speed) var(--e2zi-ease),
		box-shadow var(--e2zi-speed) var(--e2zi-ease);
}

.e2zi-input-group:focus-within {
	border-color: var(--e2zi-primary);
	box-shadow: 0 0 0 3px var(--e2zi-primary-soft);
}

.e2zi-input,
.e2zi-select,
.e2zi-textarea {
	width: 100%;
	font-family: var(--e2zi-font-body);
	font-size: var(--e2zi-fs-base);
	color: var(--e2zi-text);
	background: transparent;
	border: 0;
	border-radius: var(--e2zi-radius-sm);
	padding: 10px 12px;
	min-height: 42px;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
}

.e2zi-select,
.e2zi-textarea {
	border: 1px solid var(--e2zi-border);
	background: var(--e2zi-bg);
}

.e2zi-select {
	background-image: linear-gradient(45deg, transparent 50%, var(--e2zi-text-muted) 50%),
		linear-gradient(135deg, var(--e2zi-text-muted) 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 34px;
}

.e2zi-select:focus,
.e2zi-textarea:focus {
	border-color: var(--e2zi-primary);
	box-shadow: 0 0 0 3px var(--e2zi-primary-soft);
}

.e2zi-textarea {
	min-height: 96px;
	resize: vertical;
	line-height: var(--e2zi-lh);
}

.e2zi-input-unit {
	display: flex;
	align-items: center;
	padding: 0 12px;
	font-size: var(--e2zi-fs-sm);
	font-weight: 600;
	color: var(--e2zi-text-muted);
	background: var(--e2zi-bg-sunken);
	border-left: 1px solid var(--e2zi-border);
	white-space: nowrap;
}

.e2zi-hint {
	display: block;
	margin-top: var(--e2zi-space-1);
	font-size: var(--e2zi-fs-xs);
	color: var(--e2zi-text-muted);
}

.e2zi-field.is-invalid .e2zi-input-group,
.e2zi-field.is-invalid .e2zi-select {
	border-color: var(--e2zi-danger);
}

.e2zi-error {
	display: block;
	margin-top: var(--e2zi-space-1);
	font-size: var(--e2zi-fs-xs);
	color: var(--e2zi-danger);
	font-weight: 600;
}

.e2zi-check {
	display: inline-flex;
	align-items: center;
	gap: var(--e2zi-space-2);
	font-size: var(--e2zi-fs-sm);
	cursor: pointer;
}

/* Number input ke spinner hata do — engineering inputs me distraction hai */
.e2zi-input[type="number"]::-webkit-outer-spin-button,
.e2zi-input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.e2zi-input[type="number"] {
	-moz-appearance: textfield;
}

/* =========================================================
   6. BUTTONS
   ========================================================= */

.e2zi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--e2zi-space-2);
	font-family: var(--e2zi-font-body);
	font-size: var(--e2zi-fs-base);
	font-weight: 600;
	line-height: 1;
	padding: 11px 18px;
	min-height: 42px;
	border: 1px solid transparent;
	border-radius: var(--e2zi-radius-sm);
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--e2zi-speed) var(--e2zi-ease),
		border-color var(--e2zi-speed) var(--e2zi-ease),
		transform var(--e2zi-speed) var(--e2zi-ease);
}

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

.e2zi-btn:focus-visible {
	outline: 3px solid var(--e2zi-primary-soft);
	outline-offset: 1px;
}

.e2zi-btn--primary {
	background: var(--e2zi-primary);
	color: #ffffff;
}

.e2zi-btn--primary:hover {
	background: var(--e2zi-primary-dark);
}

.e2zi-btn--secondary {
	background: var(--e2zi-bg-sunken);
	color: var(--e2zi-text);
	border-color: var(--e2zi-border);
}

.e2zi-btn--secondary:hover {
	border-color: var(--e2zi-border-strong);
}

.e2zi-btn--ghost {
	background: transparent;
	color: var(--e2zi-primary);
	border-color: var(--e2zi-border);
}

.e2zi-btn--ghost:hover {
	background: var(--e2zi-primary-soft);
	border-color: var(--e2zi-primary);
}

.e2zi-btn--danger {
	background: var(--e2zi-danger);
	color: #ffffff;
}

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

.e2zi-btn--sm {
	padding: 7px 12px;
	min-height: 34px;
	font-size: var(--e2zi-fs-sm);
}

.e2zi-btn[disabled],
.e2zi-btn.is-disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

.e2zi-btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e2zi-space-2);
}

/* =========================================================
   7. BADGES
   ========================================================= */

.e2zi-badge {
	display: inline-flex;
	align-items: center;
	font-size: var(--e2zi-fs-xs);
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 3px 10px;
	border-radius: var(--e2zi-radius-pill);
	background: var(--e2zi-bg-sunken);
	color: var(--e2zi-text-muted);
	border: 1px solid var(--e2zi-border);
}

.e2zi-badge--info { background: var(--e2zi-info-soft); color: var(--e2zi-info); border-color: transparent; }
.e2zi-badge--success { background: var(--e2zi-accent-soft); color: var(--e2zi-accent); border-color: transparent; }
.e2zi-badge--warning { background: var(--e2zi-warning-soft); color: var(--e2zi-warning); border-color: transparent; }
.e2zi-badge--danger { background: var(--e2zi-danger-soft); color: var(--e2zi-danger); border-color: transparent; }

/* =========================================================
   8. ALERTS
   ========================================================= */

.e2zi-alert {
	font-family: var(--e2zi-font-body);
	font-size: var(--e2zi-fs-sm);
	line-height: var(--e2zi-lh);
	padding: var(--e2zi-space-3) var(--e2zi-space-4);
	border-radius: var(--e2zi-radius-sm);
	border-left: 4px solid var(--e2zi-info);
	background: var(--e2zi-info-soft);
	color: var(--e2zi-text);
	margin: 0 0 var(--e2zi-space-4);
}

.e2zi-alert--success { border-left-color: var(--e2zi-accent); background: var(--e2zi-accent-soft); }
.e2zi-alert--warning { border-left-color: var(--e2zi-warning); background: var(--e2zi-warning-soft); }
.e2zi-alert--danger { border-left-color: var(--e2zi-danger); background: var(--e2zi-danger-soft); }

/* =========================================================
   9. RESULT DISPLAY
   ========================================================= */

.e2zi-result {
	display: flex;
	flex-direction: column;
	gap: var(--e2zi-space-1);
	padding: var(--e2zi-space-4);
	background: var(--e2zi-primary-soft);
	border: 1px solid var(--e2zi-border);
	border-radius: var(--e2zi-radius);
}

.e2zi-result__label {
	font-size: var(--e2zi-fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--e2zi-text-muted);
}

.e2zi-result__value {
	font-family: var(--e2zi-font-mono);
	font-size: var(--e2zi-fs-xl);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--e2zi-primary);
	word-break: break-word;
}

.e2zi-result--success .e2zi-result__value { color: var(--e2zi-accent); }
.e2zi-result--danger .e2zi-result__value { color: var(--e2zi-danger); }

/* =========================================================
   10. TABLES
   ========================================================= */

.e2zi-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--e2zi-border);
	border-radius: var(--e2zi-radius-sm);
}

.e2zi-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--e2zi-fs-sm);
	background: var(--e2zi-bg);
}

.e2zi-table caption {
	caption-side: top;
	text-align: left;
	padding: var(--e2zi-space-3);
	font-weight: 700;
	color: var(--e2zi-text);
}

.e2zi-table th,
.e2zi-table td {
	padding: 10px 14px;
	text-align: left;
	border-bottom: 1px solid var(--e2zi-border);
	vertical-align: top;
}

.e2zi-table th {
	background: var(--e2zi-bg-alt);
	font-weight: 700;
	white-space: nowrap;
	color: var(--e2zi-text);
}

.e2zi-table tbody tr:last-child td {
	border-bottom: 0;
}

.e2zi-table tbody tr:nth-child(even) td {
	background: var(--e2zi-bg-alt);
}

.e2zi-table td.e2zi-num {
	font-family: var(--e2zi-font-mono);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* =========================================================
   11. TABS
   ========================================================= */

.e2zi-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e2zi-space-1);
	border-bottom: 1px solid var(--e2zi-border);
	margin-bottom: var(--e2zi-space-4);
}

.e2zi-tabs__btn {
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 10px 14px;
	font-family: var(--e2zi-font-body);
	font-size: var(--e2zi-fs-sm);
	font-weight: 600;
	color: var(--e2zi-text-muted);
	cursor: pointer;
	transition: color var(--e2zi-speed) var(--e2zi-ease),
		border-color var(--e2zi-speed) var(--e2zi-ease);
}

.e2zi-tabs__btn:hover { color: var(--e2zi-text); }

.e2zi-tabs__btn.is-active {
	color: var(--e2zi-primary);
	border-bottom-color: var(--e2zi-primary);
}

.e2zi-tabs__panel { display: none; }
.e2zi-tabs__panel.is-active { display: block; }

/* =========================================================
   12. ACCORDION
   ========================================================= */

.e2zi-accordion__item {
	border: 1px solid var(--e2zi-border);
	border-radius: var(--e2zi-radius-sm);
	margin-bottom: var(--e2zi-space-2);
	background: var(--e2zi-bg);
}

.e2zi-accordion__title {
	padding: var(--e2zi-space-3) var(--e2zi-space-4);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	color: var(--e2zi-text);
}

.e2zi-accordion__title::-webkit-details-marker { display: none; }

.e2zi-accordion__title::after {
	content: "+";
	float: right;
	font-weight: 700;
	color: var(--e2zi-text-muted);
}

.e2zi-accordion__item[open] .e2zi-accordion__title::after { content: "−"; }

.e2zi-accordion__body {
	padding: 0 var(--e2zi-space-4) var(--e2zi-space-4);
	font-size: var(--e2zi-fs-sm);
	color: var(--e2zi-text-muted);
}

/* =========================================================
   13. TOAST
   ========================================================= */

.e2zi-toast-stack {
	position: fixed;
	z-index: 999999;
	right: 16px;
	bottom: 16px;
	display: flex;
	flex-direction: column;
	gap: var(--e2zi-space-2);
	max-width: min(360px, calc(100vw - 32px));
	pointer-events: none;
}

.e2zi-toast {
	pointer-events: auto;
	font-family: var(--e2zi-font-body);
	font-size: var(--e2zi-fs-sm);
	font-weight: 600;
	padding: 12px 16px;
	border-radius: var(--e2zi-radius-sm);
	background: #16202c;
	color: #ffffff;
	box-shadow: var(--e2zi-shadow-lg);
	animation: e2zi-slide-in var(--e2zi-speed) var(--e2zi-ease);
}

.e2zi-toast--success { background: #0f7a5e; }
.e2zi-toast--danger { background: #b02525; }
.e2zi-toast--warning { background: #9a5b00; }
.e2zi-toast.is-leaving { animation: e2zi-fade-out var(--e2zi-speed) var(--e2zi-ease) forwards; }

/* =========================================================
   14. MODAL
   ========================================================= */

.e2zi-modal {
	position: fixed;
	inset: 0;
	z-index: 999998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--e2zi-space-4);
	background: rgba(10, 18, 28, 0.55);
	animation: e2zi-fade-in var(--e2zi-speed) var(--e2zi-ease);
}

.e2zi-modal__box {
	background: var(--e2zi-bg);
	color: var(--e2zi-text);
	border-radius: var(--e2zi-radius-lg);
	box-shadow: var(--e2zi-shadow-lg);
	width: min(560px, 100%);
	max-height: 86vh;
	overflow-y: auto;
	font-family: var(--e2zi-font-body);
}

.e2zi-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e2zi-space-3);
	padding: var(--e2zi-space-4);
	border-bottom: 1px solid var(--e2zi-border);
}

.e2zi-modal__title {
	margin: 0;
	font-size: var(--e2zi-fs-md);
	font-weight: 700;
}

.e2zi-modal__close {
	background: transparent;
	border: 0;
	font-size: var(--e2zi-fs-lg);
	line-height: 1;
	cursor: pointer;
	color: var(--e2zi-text-muted);
	padding: 4px 8px;
}

.e2zi-modal__body { padding: var(--e2zi-space-4); }

/* =========================================================
   15. LOADER / SKELETON
   ========================================================= */

.e2zi-loader {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid var(--e2zi-border);
	border-top-color: var(--e2zi-primary);
	border-radius: 50%;
	animation: e2zi-spin 700ms linear infinite;
}

.e2zi-loader--lg { width: 34px; height: 34px; border-width: 3px; }

.e2zi-skeleton { display: block; }

.e2zi-skeleton__line {
	display: block;
	height: 12px;
	margin-bottom: var(--e2zi-space-2);
	border-radius: var(--e2zi-radius-sm);
	background: linear-gradient(90deg, var(--e2zi-bg-sunken) 25%, var(--e2zi-bg-alt) 37%, var(--e2zi-bg-sunken) 63%);
	background-size: 400% 100%;
	animation: e2zi-shimmer 1.4s ease infinite;
}

.e2zi-skeleton__line:nth-child(2) { width: 82%; }
.e2zi-skeleton__line:nth-child(3) { width: 64%; }

/* =========================================================
   16. TOOLTIP
   ========================================================= */

.e2zi-tooltip {
	position: relative;
	border-bottom: 1px dotted var(--e2zi-border-strong);
	cursor: help;
}

.e2zi-tooltip::after {
	content: attr(data-e2zi-tip);
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);
	transform: translateX(-50%);
	min-width: 160px;
	max-width: 260px;
	padding: 8px 10px;
	border-radius: var(--e2zi-radius-sm);
	background: #16202c;
	color: #ffffff;
	font-size: var(--e2zi-fs-xs);
	font-weight: 500;
	line-height: 1.45;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--e2zi-speed) var(--e2zi-ease);
	z-index: 20;
}

.e2zi-tooltip:hover::after,
.e2zi-tooltip:focus::after {
	opacity: 1;
	visibility: visible;
}

/* =========================================================
   17. EXPORT BAR / PAGINATION / SEARCH
   ========================================================= */

.e2zi-export {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e2zi-space-2);
	margin-top: var(--e2zi-space-4);
	padding-top: var(--e2zi-space-3);
	border-top: 1px dashed var(--e2zi-border);
}

.e2zi-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e2zi-space-1);
	justify-content: center;
	margin-top: var(--e2zi-space-4);
}

.e2zi-pagination__btn {
	min-width: 36px;
	min-height: 36px;
	border: 1px solid var(--e2zi-border);
	border-radius: var(--e2zi-radius-sm);
	background: var(--e2zi-bg);
	color: var(--e2zi-text);
	font-size: var(--e2zi-fs-sm);
	font-weight: 600;
	cursor: pointer;
}

.e2zi-pagination__btn.is-active {
	background: var(--e2zi-primary);
	border-color: var(--e2zi-primary);
	color: #ffffff;
}

.e2zi-search {
	position: relative;
	margin-bottom: var(--e2zi-space-4);
}

.e2zi-search__input {
	width: 100%;
	padding: 12px 16px;
	font-size: var(--e2zi-fs-base);
	font-family: var(--e2zi-font-body);
	color: var(--e2zi-text);
	background: var(--e2zi-bg);
	border: 1px solid var(--e2zi-border);
	border-radius: var(--e2zi-radius-pill);
	outline: none;
}

.e2zi-search__input:focus {
	border-color: var(--e2zi-primary);
	box-shadow: 0 0 0 3px var(--e2zi-primary-soft);
}

.e2zi-is-hidden { display: none !important; }

/* =========================================================
   18. PRINT
   ========================================================= */

.e2zi-print { font-family: var(--e2zi-font-body); color: #000000; }
.e2zi-print__title { font-size: 20pt; margin: 0 0 8px; }
.e2zi-print__meta { font-size: 10pt; color: #444444; }
.e2zi-print__head { border-bottom: 2px solid #000000; padding-bottom: 10px; margin-bottom: 16px; }
.e2zi-print__foot { border-top: 1px solid #999999; margin-top: 20px; padding-top: 8px; font-size: 9pt; color: #444444; }

@media print {
	.e2zi-export,
	.e2zi-toast-stack,
	.e2zi-modal { display: none !important; }

	.e2zi-tool {
		box-shadow: none;
		background: #ffffff;
		color: #000000;
	}

	.e2zi-card { border: 1px solid #cccccc; box-shadow: none; page-break-inside: avoid; }
}

/* =========================================================
   19. ANIMATIONS
   ========================================================= */

@keyframes e2zi-spin { to { transform: rotate(360deg); } }
@keyframes e2zi-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes e2zi-fade-out { from { opacity: 1; } to { opacity: 0; transform: translateY(6px); } }
@keyframes e2zi-slide-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes e2zi-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.e2zi-anim-fade { animation: e2zi-fade-in 240ms var(--e2zi-ease); }
.e2zi-anim-slide { animation: e2zi-slide-in 240ms var(--e2zi-ease); }

@media (prefers-reduced-motion: reduce) {
	.e2zi-tool *,
	.e2zi-grid *,
	.e2zi-toast,
	.e2zi-modal {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* =========================================================
   20. RESPONSIVE — 320 / 375 / 425 / 768 / 1024 / 1280 / 1440 / 1920
   Mobile-first: grid columns upar single-column hain, yahan badhte hain.
   ========================================================= */

@media (min-width: 600px) {
	.e2zi-grid--2,
	.e2zi-grid--3,
	.e2zi-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.e2zi-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.e2zi-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
	.e2zi-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
	.e2zi-tool { font-size: 0.9375rem; }
	.e2zi-tool__title { font-size: var(--e2zi-fs-lg); }
	.e2zi-card__body,
	.e2zi-card__head { padding: var(--e2zi-space-3); }
	.e2zi-btn { width: 100%; }
	.e2zi-btn-group .e2zi-btn { width: auto; flex: 1 1 auto; }
	.e2zi-result__value { font-size: var(--e2zi-fs-lg); }
	.e2zi-toast-stack { left: 12px; right: 12px; max-width: none; }
}

@media (max-width: 360px) {
	.e2zi-table th,
	.e2zi-table td { padding: 8px 10px; }
	.e2zi-tabs__btn { padding: 8px 10px; font-size: var(--e2zi-fs-xs); }
}

/* =========================================================================
   SHARED TOOL HEADER BASE
   Har tool ka apna .e2zi-[slug]-header isi ko extend karta hai. Title,
   subtitle aur region row EK hi gradient block ke andar rehte hain — yahi
   wo bug thi jahan tool ka naam alag khaali box me upar aa jata tha.
   Gradient ke do stop har tool apne palette se deta hai:
     --e2zi-header-from / --e2zi-header-to
   ========================================================================= */

.e2zi-tool-header-base.e2zi-tool-header-base {
	--e2zi-header-from: #1e293b;
	--e2zi-header-to: #0f172a;

	display: block;
	padding: 20px 16px;
	background: linear-gradient(135deg, var(--e2zi-header-from) 0%, var(--e2zi-header-to) 100%);
	color: #ffffff;
	border-radius: 12px 12px 0 0;
}

.e2zi-tool-header-base.e2zi-tool-header-base > * + * {
	margin-top: 10px;
}

/* Shortcode ka apna title tab hi dikhe jab module ka header na ho —
   warna do headings, do boxes. */
.e2zi-tool--has-own-header > .e2zi-tool__title {
	display: none;
}

/* =========================================================================
   SHARED REGION SELECTOR — 4 quick pills + full dropdown.
   13 pills ek mobile header me nahi samate, isliye hybrid.
   ========================================================================= */

.e2zi-region-select.e2zi-region-select {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.e2zi-region-select__quick.e2zi-region-select__quick {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.e2zi-region-select__pill.e2zi-region-select__pill {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.e2zi-region-select__pill.e2zi-region-select__pill input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}

.e2zi-region-select__pill.e2zi-region-select__pill span {
	display: flex;
	align-items: center;
	justify-content: center;
	/* 44px minimum tap target */
	min-height: 44px;
	padding: 9px 12px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	color: #ffffff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.e2zi-region-select__pill.e2zi-region-select__pill input:checked + span {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--e2zi-header-to, #0f172a);
}

.e2zi-region-select__pill.e2zi-region-select__pill input:focus-visible + span {
	outline: 3px solid #ffffff;
	outline-offset: 2px;
}

.e2zi-region-select__more.e2zi-region-select__more {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.92);
}

.e2zi-region-select__more-label.e2zi-region-select__more-label {
	flex: 0 0 auto;
	white-space: nowrap;
}

.e2zi-region-select__dropdown.e2zi-region-select__dropdown {
	flex: 1 1 auto;
	/* Sabse lambe naam ("United Arab Emirates") ke liye jagah, warna text kat jata hai */
	min-width: 12rem;
	min-height: 44px;
	padding: 9px 10px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	font: inherit;
	font-size: 0.85rem;
}

/* Native dropdown ka panel OS se aata hai — uske options ko halka background
   chahiye warna white-on-white ho jate hain. */
.e2zi-region-select__dropdown.e2zi-region-select__dropdown option {
	color: #0f172a;
	background: #ffffff;
}

.e2zi-region-select__dropdown.e2zi-region-select__dropdown:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 2px;
}

@media (min-width: 600px) {
	.e2zi-region-select.e2zi-region-select {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px 12px;
	}

	.e2zi-region-select__quick.e2zi-region-select__quick {
		flex: 0 1 auto;
	}

	.e2zi-region-select__pill.e2zi-region-select__pill {
		flex: 0 1 auto;
	}
}

/* =========================================================================
   SHARED FIELD GRID + INPUT GROUP
   Screenshot me dropdown ka text kat raha tha ("100 A" -> "100 /") aur ek
   column right edge se bahar ja raha tha. Yahan sirf fr / minmax / auto —
   koi fixed px width nahi, taki kisi bhi width par kuch clip na ho.
   ========================================================================= */

.e2zi-field-grid.e2zi-field-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.e2zi-field-grid.e2zi-field-grid > * {
	/* minmax(0,1fr) ke bina grid item apne content se bada ho jata hai
	   aur padosi column ko bahar dhakel deta hai. */
	min-width: 0;
}

.e2zi-input-group.e2zi-input-group {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 6px;
	align-items: stretch;
}

.e2zi-input-group--trio.e2zi-input-group--trio {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

.e2zi-input-group.e2zi-input-group > input,
.e2zi-input-group.e2zi-input-group > select {
	min-width: 0;
	width: 100%;
	min-height: 44px;
	font-size: 1rem;
}

/* Number field me 4-5 digit hamesha dikhne chahiye */
.e2zi-input-group.e2zi-input-group > input[type="number"] {
	min-width: 5ch;
}

/* Select apni sabse lambi option se chhota na ho */
.e2zi-input-group.e2zi-input-group > select {
	min-width: 7rem;
	text-overflow: ellipsis;
}

.e2zi-input-group__reset.e2zi-input-group__reset {
	flex: 0 0 auto;
	width: 44px;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
}

/* 375px se neeche font thoda chhota — clip karne se behtar hai */
@media (max-width: 374px) {
	.e2zi-input-group.e2zi-input-group > select {
		font-size: 0.88rem;
		min-width: 6rem;
	}

	/* Agar sach me jagah nahi bachi to trio do line me — input+select upar,
	   reset neeche daayen. Kabhi bhi clip nahi karte. */
	.e2zi-input-group--trio.e2zi-input-group--trio {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.e2zi-input-group--trio.e2zi-input-group--trio > .e2zi-input-group__reset.e2zi-input-group__reset {
		grid-column: 2;
		justify-self: end;
	}
}

@media (min-width: 768px) {
	.e2zi-field-grid.e2zi-field-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.e2zi-field-grid.e2zi-field-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* =========================================================================
   DESKTOP VIEW POPUP + REVERT BUTTON
   Non-blocking. Page ko kabhi block nahi karta.
   ========================================================================= */

.e2zi-desktop-popup.e2zi-desktop-popup {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 99990;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	max-width: 560px;
	margin: 0 auto;
	padding: 14px 44px 14px 16px;
	border-radius: 12px;
	/* #ffffff on #0f172a = 17.85:1 */
	background: #0f172a;
	color: #ffffff;
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
	font-family: var(--e2zi-font-body);
	font-size: 0.88rem;
	line-height: 1.45;
}

.e2zi-desktop-popup__msg.e2zi-desktop-popup__msg {
	flex: 1 1 14rem;
	margin: 0;
	color: #ffffff;
}

.e2zi-desktop-popup__actions.e2zi-desktop-popup__actions {
	flex: 0 0 auto;
}

.e2zi-desktop-popup__go.e2zi-desktop-popup__go {
	appearance: none;
	min-height: 44px;
	padding: 10px 16px;
	border: 0;
	border-radius: 8px;
	/* #0f172a on #ffffff = 17.85:1 */
	background: #ffffff;
	color: #0f172a;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.e2zi-desktop-popup__go.e2zi-desktop-popup__go:hover {
	background: #e2e8f0;
}

.e2zi-desktop-popup__go.e2zi-desktop-popup__go:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

.e2zi-desktop-popup__close.e2zi-desktop-popup__close {
	position: absolute;
	top: 6px;
	right: 6px;
	appearance: none;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	/* #cbd5e1 on #0f172a = 12.6:1 */
	color: #cbd5e1;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.e2zi-desktop-popup__close.e2zi-desktop-popup__close:hover {
	color: #ffffff;
}

.e2zi-desktop-popup__close.e2zi-desktop-popup__close:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: -2px;
}

.e2zi-desktop-revert.e2zi-desktop-revert {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 99989;
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	min-width: 44px;
	padding: 10px 12px;
	border: 0;
	border-radius: 10px 0 0 10px;
	/* Jaan-boojh kar halka — ye ek chhota sa wapsi ka rasta hai, koi CTA nahi.
	   Alpha 0.7 se kam par white text safed page ke upar 4.5:1 se neeche gir jata
	   hai (0.55 par sirf 4.0:1), isliye 0.7 rakha hai: 6.6:1, aur phir bhi
	   transparent dikhta hai. */
	background: rgba(15, 23, 42, 0.7);
	color: #ffffff;
	font-family: var(--e2zi-font-body);
	font-size: 0.72rem;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	/* element-level opacity yahan jaan-boojh kar nahi hai: wo background ke alpha
	   ke UPAR lagti hai, effective alpha ~0.46 kar deti hai aur white text 3.9:1
	   par gir jata hai. Halkapan sirf background ke rgba se aata hai. */
	box-shadow: none;
	backdrop-filter: blur(2px);
	transition: background 180ms ease;
}

/* Chhoo-ne ya focus par thoda gehra ho jata hai */
.e2zi-desktop-revert.e2zi-desktop-revert:hover,
.e2zi-desktop-revert.e2zi-desktop-revert:focus-visible {
	background: rgba(15, 23, 42, 0.9);
}

.e2zi-desktop-revert.e2zi-desktop-revert:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: -3px;
}

/* Desktop view force hone par tool ko apne desktop rules milte rehne chahiye */
/* Pehle yahan "min-width: 1180px" tha, jo tool ko site ke container se chauda
   kar deta tha aur wo page ki width se bahar nikal jata tha. Zaroorat hi nahi hai:
   viewport meta ko width=1280 karne se browser khud 1280 CSS px par layout karta
   hai, aur tool ko uske apne desktop rules mil jate hain — bilkul sister plugin
   ki tarah. Yahan sirf itna pakka karte hain ki tool container se bahar na jaye. */
body.e2zi-force-desktop-view .e2zi-tool {
	max-width: 100%;
	overflow-x: hidden;
}

/* Desktop view me page ko horizontally scroll nahi karna chahiye */
body.e2zi-force-desktop-view {
	overflow-x: auto;
}

@media print {
	.e2zi-desktop-popup.e2zi-desktop-popup,
	.e2zi-desktop-revert.e2zi-desktop-revert {
		display: none !important;
	}
}

/* =========================================================================
   VERIFIED / GENERAL-ESTIMATE BADGE
   Header ke andar region control ke saath. Kabhi fine print me nahi.
   Contrast: #14532d on #dcfce7 = 9.7:1 ; #7c2d12 on #ffedd5 = 8.0:1
   ========================================================================= */

.e2zi-region-badge-slot.e2zi-region-badge-slot {
	width: 100%;
	margin-top: 8px;
}

.e2zi-region-badge-slot.e2zi-region-badge-slot.is-empty {
	display: none;
}

.e2zi-region-badge.e2zi-region-badge {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 8px;
	margin: 0;
	padding: 9px 11px;
	border-radius: 8px;
	font-size: 0.78rem;
	line-height: 1.45;
}

.e2zi-region-badge__tag.e2zi-region-badge__tag {
	flex: 0 0 auto;
	font-weight: 800;
	white-space: nowrap;
}

/* Badge ek <p> hai, aur module ka theme-reset ".tool.tool.tool :where(p) { color: inherit }"
   (0,3,0) hai — wo (0,2,0) wale rule ko haraa deta tha, isliye text header ka white
   inherit kar leta tha aur amber background par gayab ho jata tha. Isliye colour rules
   ko char baar class repeat karke (0,4,0) par le gaye hain, aur shade ko near-black
   kar diya hai taki saaf padha jaye. */
.e2zi-region-badge--verified.e2zi-region-badge--verified {
	background: #dcfce7;
}

.e2zi-region-badge--general.e2zi-region-badge--general {
	background: #ffedd5;
}

.e2zi-region-badge--verified.e2zi-region-badge--verified.e2zi-region-badge--verified.e2zi-region-badge--verified,
.e2zi-region-badge--verified.e2zi-region-badge--verified.e2zi-region-badge--verified.e2zi-region-badge--verified .e2zi-region-badge__tag,
.e2zi-region-badge--verified.e2zi-region-badge--verified.e2zi-region-badge--verified.e2zi-region-badge--verified span {
	/* #052e16 on #dcfce7 = 13.57:1 */
	color: #052e16;
}

.e2zi-region-badge--general.e2zi-region-badge--general.e2zi-region-badge--general.e2zi-region-badge--general,
.e2zi-region-badge--general.e2zi-region-badge--general.e2zi-region-badge--general.e2zi-region-badge--general .e2zi-region-badge__tag,
.e2zi-region-badge--general.e2zi-region-badge--general.e2zi-region-badge--general.e2zi-region-badge--general span {
	/* #431407 on #ffedd5 = 13.66:1 */
	color: #431407;
}