/*
 * AI API Gateway — Public Models Directory
 *
 * Loaded after home.css + inner-pages.css and reuses their CSS
 * variables, container, button, badge and reveal-animation classes so
 * this page reads as part of the same site. Only page-specific layout
 * (hero count/search, sidebar filters, card grid, details modal) lives
 * here. All classes are prefixed "aiapimd-" to avoid clashing with the
 * shared "aiapih-" vocabulary they sit alongside.
 */

/* ------------------------------------------------------------------ */
/* Hero: count line + search box                                       */
/* ------------------------------------------------------------------ */

.aiapimd-hero { padding: 40px 0 28px; }

/* The whole intro lives in one framed panel: soft glow + faint grid. */
.aiapimd-hero-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 60px 32px 56px;
	border-radius: 28px;
	border: 1px solid var(--aiapih-border);
	background: linear-gradient(180deg, var(--aiapih-surface-strong), var(--aiapih-surface));
	box-shadow: var(--aiapih-glass-shadow);
	text-align: center;
}
.aiapimd-hero-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(520px 260px at 50% -8%, color-mix(in srgb, var(--aiapih-primary) 20%, transparent), transparent 70%),
		radial-gradient(380px 220px at 100% 100%, color-mix(in srgb, var(--aiapih-primary) 9%, transparent), transparent 70%),
		linear-gradient(color-mix(in srgb, var(--aiapih-primary) 6%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--aiapih-primary) 6%, transparent) 1px, transparent 1px);
	background-size: auto, auto, 36px 36px, 36px 36px;
	-webkit-mask-image: radial-gradient(ellipse 85% 100% at 50% 0, #000 35%, transparent 100%);
	mask-image: radial-gradient(ellipse 85% 100% at 50% 0, #000 35%, transparent 100%);
}
.aiapimd-hero-card::after {
	content: "";
	position: absolute;
	inset-inline: 18%;
	top: 0;
	height: 2px;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, var(--aiapih-primary), transparent);
	opacity: .55;
}

.aiapimd-hero-inner { margin-inline: auto; max-width: 680px; }
.aiapimd-hero .aiapih-lead { margin-top: 14px; margin-bottom: 0; max-width: 540px; }

.aiapimd-hero-count {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 22px 0 0;
	padding: 7px 16px;
	border-radius: 999px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--aiapih-text-muted);
	background: var(--aiapih-surface-solid);
	border: 1px solid var(--aiapih-border);
	box-shadow: var(--aiapih-shadow-sm);
}
.aiapimd-hero-count strong { color: var(--aiapih-text); font-weight: 800; font-variant-numeric: tabular-nums; }
.aiapimd-live-dot {
	position: relative;
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--aiapih-success);
}
.aiapimd-live-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--aiapih-success);
	animation: aiapimd-pulse 2s ease-out infinite;
}
@keyframes aiapimd-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(3); opacity: 0; } }

.aiapimd-search-box {
	margin: 26px auto 0;
	max-width: 620px;
	width: 100%;
	cursor: text;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 56px;
	padding: 0 22px;
	border-radius: 999px;
	background: var(--aiapih-surface-solid);
	border: 1px solid var(--aiapih-border-strong);
	box-shadow: var(--aiapih-shadow-md);
	transition: border-color .18s ease, box-shadow .18s ease;
}
.aiapimd-search-box:focus-within {
	border-color: var(--aiapih-primary);
	box-shadow: 0 0 0 4px var(--aiapih-primary-soft), var(--aiapih-shadow-md);
}
.aiapimd-search-box svg { flex: none; color: var(--aiapih-text-faint); transition: color .18s ease; }
.aiapimd-search-box:focus-within svg { color: var(--aiapih-primary); }
.aiapimd-search-box input {
	flex: 1;
	height: 100%;
	border: 0;
	background: none;
	color: var(--aiapih-text);
	min-width: 0;
	padding: 0;
	font-size: 15px;
	outline: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.aiapimd-search-box input::-webkit-search-cancel-button { -webkit-appearance: none; }
.aiapimd-search-box input::placeholder { color: var(--aiapih-text-faint); opacity: 1; }


.aiapi-home .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Scope: cards, toolbar and filters share the Home page's model       */
/* component tokens (.ains-mdl → --ains-*, --mdl-*). Here it only      */
/* provides those tokens; the Home band/padding/background are off.    */
/* ------------------------------------------------------------------ */

.aiapi-home .ains-mdl.aiapimd-scope {
	position: static; isolation: auto; padding: 0; background: none; border: 0; box-shadow: none;
	--aiapimd-side: 296px;
	--aiapimd-gap: 28px;
	--aiapimd-sticky: calc(var(--aiapih-header-height, 76px) + 18px);
}
html.aiapimd-lock { overflow: hidden; }

.aiapimd-body-section { padding-top: 6px; padding-bottom: 96px; }
.aiapimd-layout { display: grid; grid-template-columns: var(--aiapimd-side) minmax(0, 1fr); align-items: start; gap: var(--aiapimd-gap); }
.aiapimd-main { min-width: 0; }

/* ------------------------------------------------------------------ */
/* Filter panel                                                         */
/* ------------------------------------------------------------------ */

.aiapimd-side {
	position: sticky; top: var(--aiapimd-sticky);
	display: flex; flex-direction: column; max-height: calc(100vh - var(--aiapimd-sticky) - 18px);
	background: var(--ains-surface); border: 1px solid var(--ains-border); border-radius: 20px;
	box-shadow: var(--ains-shadow-sm); overflow: hidden;
}
.aiapimd-side-grip, .aiapimd-side-close, .aiapimd-side-foot { display: none; }

.aiapimd-side-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 16px 18px 14px; border-bottom: 1px solid var(--ains-border); }
.aiapimd-side-head h2 {
	display: inline-flex; align-items: center; gap: 8px; margin: 0; margin-inline-end: auto;
	font-size: 14.5px; font-weight: 800; letter-spacing: -.005em; line-height: 1.4; color: var(--ains-text);
}
.aiapimd-side-head h2 svg { color: var(--mdl-accent); }
.aiapimd-side-badge {
	display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
	background: var(--mdl-accent); color: var(--mdl-ink); font-size: 11px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
}
.aiapimd-side-badge[hidden] { display: none; }

.aiapi-home .aiapimd-link-btn {
	display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; margin: 0;
	border: 0; border-radius: 8px; background: transparent; color: var(--ains-text-muted);
	font-size: 12.5px; font-weight: 700; cursor: pointer; transition: color .15s ease, background .15s ease;
}
.aiapi-home .aiapimd-link-btn:hover:not(:disabled) { color: var(--mdl-accent); background: color-mix(in srgb, var(--mdl-accent) 10%, transparent); }
.aiapi-home .aiapimd-link-btn:disabled { opacity: .4; cursor: default; }
.aiapi-home .aiapimd-link-btn:focus-visible { outline: 2px solid var(--mdl-accent); outline-offset: 1px; }

.aiapimd-side-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 4px 18px 10px; }
.aiapimd-fs { padding: 16px 0; border-top: 1px solid color-mix(in srgb, var(--ains-border) 70%, transparent); }
.aiapimd-fs:first-child { border-top: 0; }
.aiapimd-fs-title { margin: 0 0 11px; font-size: 11.5px; font-weight: 800; line-height: 1.4; letter-spacing: .07em; text-transform: uppercase; color: var(--ains-text-faint); }

/* Segmented control (pricing) */
.aiapimd-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 12px; background: var(--ains-surface-2); }
.aiapi-home .aiapimd-seg button {
	display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; margin: 0; padding: 7px 4px 6px;
	border: 0; border-radius: 9px; background: transparent; color: var(--ains-text-muted);
	font-size: 12.5px; font-weight: 800; line-height: 1.35; cursor: pointer;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.aiapi-home .aiapimd-seg button em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--ains-text-faint); font-variant-numeric: tabular-nums; }
.aiapi-home .aiapimd-seg button:hover { color: var(--ains-text); }
.aiapi-home .aiapimd-seg button.is-active { background: var(--ains-surface); color: var(--mdl-accent); box-shadow: 0 1px 2px rgba(20, 22, 26, .12), 0 0 0 1px color-mix(in srgb, var(--mdl-accent) 30%, transparent); }
.aiapi-home .aiapimd-seg button.is-active em { color: var(--mdl-accent); }
.aiapi-home .aiapimd-seg button:focus-visible { outline: 2px solid var(--mdl-accent); outline-offset: 1px; }

/* Checkbox / radio rows */
.aiapimd-opts { display: flex; flex-direction: column; gap: 1px; margin-inline: -8px; }
.aiapimd-opt { position: relative; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 8px; margin: 0; border-radius: 10px; cursor: pointer; user-select: none; transition: background .12s ease, opacity .15s ease; }
.aiapimd-opt[hidden] { display: none !important; }
.aiapimd-opt:hover { background: var(--ains-surface-2); }
.aiapimd-opt.is-zero { opacity: .42; }
.aiapimd-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }

.aiapimd-opt-box {
	flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px;
	border: 1.5px solid color-mix(in srgb, var(--ains-text-faint) 70%, transparent); background: var(--ains-surface);
	color: transparent; transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.aiapimd-opt-box svg { width: 11px; height: 11px; stroke-width: 3; }
.aiapimd-opt input:checked + .aiapimd-opt-box { background: var(--mdl-accent); border-color: var(--mdl-accent); color: var(--mdl-ink); }
.aiapimd-opt input:focus-visible + .aiapimd-opt-box { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mdl-accent) 28%, transparent); }
.aiapimd-opt-box--radio { border-radius: 50%; position: relative; }
.aiapimd-opt-box--radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--mdl-ink); transform: scale(0); transition: transform .15s ease; }
.aiapimd-opt input:checked + .aiapimd-opt-box--radio::after { transform: scale(1); }

.aiapimd-opt-logo { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #fff; border: 1px solid var(--ains-border); }
.aiapimd-opt-logo img { width: 16px; height: 16px; object-fit: contain; }
.aiapimd-mono { filter: grayscale(1); opacity: .65; }
.aiapimd-opt-label { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 1.4; color: var(--ains-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aiapimd-opt-count { flex: none; min-width: 26px; padding: 1px 7px; border-radius: 999px; text-align: center; font-style: normal; font-size: 11px; font-weight: 800; line-height: 1.7; color: var(--ains-text-faint); background: var(--ains-surface-2); font-variant-numeric: tabular-nums; }
.aiapimd-opt input:checked ~ .aiapimd-opt-label { color: var(--mdl-accent); }

.aiapi-home .aiapimd-more-btn { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 4px 0; border: 0; background: none; color: var(--mdl-accent); font-size: 12.5px; font-weight: 800; cursor: pointer; }
.aiapimd-more-btn svg { transition: transform .2s ease; }
.aiapimd-more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.aiapi-home .aiapimd-more-btn:focus-visible { outline: 2px solid var(--mdl-accent); outline-offset: 2px; border-radius: 4px; }

/* Switch (vision) */
.aiapimd-switch { position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 12px; margin: 0; border: 1px solid var(--ains-border); border-radius: 12px; background: var(--ains-surface-2); cursor: pointer; user-select: none; transition: border-color .15s ease; }
.aiapimd-switch:hover { border-color: color-mix(in srgb, var(--mdl-accent) 40%, var(--ains-border)); }
.aiapimd-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.aiapimd-switch-text { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; line-height: 1.4; color: var(--ains-text); }
.aiapimd-switch-text svg { flex: none; color: #8b5cf6; }
.aiapimd-switch-track { position: relative; flex: none; width: 36px; height: 20px; border-radius: 999px; background: color-mix(in srgb, var(--ains-text-faint) 45%, transparent); transition: background .18s ease; }
.aiapimd-switch-track::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: inset-inline-start .18s ease; }
.aiapimd-switch input:checked ~ .aiapimd-switch-track { background: var(--mdl-accent); }
.aiapimd-switch input:checked ~ .aiapimd-switch-track::after { inset-inline-start: 18px; }
.aiapimd-switch input:focus-visible ~ .aiapimd-switch-track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mdl-accent) 28%, transparent); }

/* ------------------------------------------------------------------ */
/* Results toolbar + active filter chips                                */
/* ------------------------------------------------------------------ */

/* Toolbar: one framed bar — result count on the start side, sort control on the end. */
.aiapimd-toolbar {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	margin-bottom: 16px; min-height: 0; padding: 8px; padding-inline: 16px 8px;
	background: var(--ains-surface); border: 1px solid var(--ains-border); border-radius: 16px;
	box-shadow: var(--ains-shadow-sm);
}
.ains-mdl-result.aiapimd-count {
	position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 0; margin: 0;
	font-size: 13.5px; line-height: 1.6; color: var(--ains-text-muted); font-variant-numeric: tabular-nums;
}
.aiapimd-count::before {
	content: ""; flex: none; width: 4px; height: 18px; border-radius: 4px;
	background: linear-gradient(180deg, var(--mdl-accent), color-mix(in srgb, var(--mdl-accent) 35%, transparent));
}
.aiapimd-count strong { color: var(--ains-text); font-weight: 800; font-variant-numeric: tabular-nums; }
.aiapimd-toolbar .ains-mdl-sort { flex: none; gap: 10px; }
.aiapimd-toolbar .ains-mdl-sort > span { font-size: 12.5px; font-weight: 700; color: var(--ains-text-faint); white-space: nowrap; }
.ains-mdl .aiapimd-toolbar .ains-mdl-dd-btn {
	min-width: 176px; height: 38px; padding-inline: 14px 10px; gap: 10px; border-radius: 11px;
	background: var(--ains-surface-2); border-color: transparent; font-weight: 800;
}
.ains-mdl .aiapimd-toolbar .ains-mdl-dd-btn:hover { background: var(--ains-surface); border-color: color-mix(in srgb, var(--mdl-accent) 45%, var(--ains-border)); }
.ains-mdl .aiapimd-toolbar .ains-mdl-dd.is-open .ains-mdl-dd-btn,
.ains-mdl .aiapimd-toolbar .ains-mdl-dd-btn:focus-visible { background: var(--ains-surface); border-color: var(--mdl-accent); }
.ains-mdl-dd-btn .ains-mdl-dd-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.ains-mdl-dd-btn svg { flex: none; color: var(--ains-text-muted); transition: transform .2s ease, color .2s ease; }
.ains-mdl-dd.is-open .ains-mdl-dd-btn svg { transform: rotate(180deg); color: var(--mdl-accent); }
.aiapimd-toolbar .ains-mdl-dd-menu { inset-inline-start: auto; inset-inline-end: 0; top: calc(100% + 10px); }

.aiapimd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -2px 0 16px; }
.aiapimd-chips[hidden] { display: none; }
.aiapi-home .aiapimd-chip {
	display: inline-flex; align-items: center; gap: 7px; height: 30px; padding-block: 0; padding-inline: 12px 10px; margin: 0;
	border: 1px solid color-mix(in srgb, var(--mdl-accent) 30%, var(--ains-border)); border-radius: 999px;
	background: color-mix(in srgb, var(--mdl-accent) 9%, var(--ains-surface)); color: var(--mdl-accent);
	font-size: 12.5px; font-weight: 800; cursor: pointer; transition: background .15s ease;
}
.aiapi-home .aiapimd-chip:hover { background: color-mix(in srgb, var(--mdl-accent) 16%, var(--ains-surface)); }
.aiapi-home .aiapimd-chip:focus-visible { outline: 2px solid var(--mdl-accent); outline-offset: 2px; }
.aiapimd-chip svg { flex: none; opacity: .8; }

/* ------------------------------------------------------------------ */
/* Cards (shared Home component) — directory-only additions            */
/* ------------------------------------------------------------------ */

.aiapimd-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr)); }
.ains-mdl-card.is-opener { cursor: pointer; }
/* Footer: two equal, full-width buttons stacked (text never wraps, so it holds up in
   Persian / English / Russian); side by side only when the card is wide enough. */
.aiapimd-grid .ains-mdl-card { container-type: inline-size; }
.ains-mdl-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 14px; border-top: 1px dashed var(--ains-border); }
.ains-mdl-foot .ains-mdl-btn-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ains-mdl-foot .ains-mdl-cta {
	align-self: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: 38px; padding: 0 14px; border-radius: 11px; line-height: 1; white-space: nowrap;
	font-size: 13px; font-weight: 800; color: var(--mdl-accent);
	background: color-mix(in srgb, var(--mdl-accent) 10%, var(--ains-surface));
	border: 1px solid color-mix(in srgb, var(--mdl-accent) 28%, var(--ains-border));
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.ains-mdl-card:hover .ains-mdl-foot .ains-mdl-cta { background: var(--mdl-accent); border-color: var(--mdl-accent); color: var(--mdl-ink); }
.ains-mdl-foot .ains-mdl-cta svg { flex: none; }
.aiapi-home .ains-mdl-quick {
	position: relative; z-index: 3; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%; height: 38px; margin: 0; padding: 0 14px; line-height: 1; white-space: nowrap;
	border: 1px solid var(--ains-border); border-radius: 11px; background: var(--ains-surface-2); color: var(--ains-text);
	font-size: 13px; font-weight: 700; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.aiapi-home .ains-mdl-quick svg { flex: none; }
.aiapi-home .ains-mdl-quick:hover { background: var(--ains-surface); border-color: var(--mdl-accent); color: var(--mdl-accent); }
.aiapi-home .ains-mdl-quick:focus-visible { outline: 2px solid var(--mdl-accent); outline-offset: 2px; }
@container (min-width: 380px) {
	.ains-mdl-foot:has(.ains-mdl-cta) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.aiapimd-grid[hidden], .ains-mdl-card[hidden] { display: none !important; }

.aiapimd-mbar, .aiapimd-backdrop { display: none; }

.aiapimd-copy-btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px; height: 24px;
	border-radius: 7px;
	border: 1px solid var(--aiapih-border);
	background: var(--aiapih-surface);
	color: var(--aiapih-text-muted);
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.aiapimd-copy-btn:hover { color: var(--aiapih-primary-strong); border-color: var(--aiapih-border-strong); }
.aiapimd-copy-btn.is-copied { color: var(--aiapih-success); border-color: var(--aiapih-success); }


/* ------------------------------------------------------------------ */
/* Info table — the model description, presented as a structured,     */
/* bordered table cell (like the pricing/specs boxes around it)       */
/* instead of a bare, unstyled paragraph. Shared by the card and the  */
/* details modal.                                                     */
/* ------------------------------------------------------------------ */
.aiapimd-info-table {
	width: 100%;
	border-collapse: separate;
	margin-bottom: 14px;
}
.aiapimd-info-table td {
	font-size: 12.8px;
	line-height: 1.65;
	color: var(--aiapih-text-muted);
	background: var(--aiapih-bg-soft);
	border: 1px solid var(--aiapih-border);
	border-radius: 12px;
	padding: 11px 13px;
	vertical-align: top;
	text-align: start;
}


.aiapimd-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 700;
	color: var(--aiapih-text-muted);
	background: var(--aiapih-bg-soft);
	border: 1px solid var(--aiapih-border);
	border-radius: 999px;
	padding: 3px 9px;
}
.aiapimd-badge--vision { color: var(--aiapih-primary-strong); background: var(--aiapih-primary-soft); border-color: var(--aiapih-border-strong); }
.aiapimd-badge svg { width: 11px; height: 11px; }


.aiapimd-price-row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; }
.aiapimd-price-row + .aiapimd-price-row { padding-top: 7px; border-top: 1px dashed var(--aiapih-border); }
.aiapimd-price-row > span:first-child { color: var(--aiapih-text-faint); font-weight: 600; }
.aiapimd-price-val { font-weight: 800; color: var(--aiapih-text); direction: ltr; }
.aiapimd-price-row--free { justify-content: center; color: var(--aiapih-success); font-weight: 700; }
.aiapimd-dash { color: var(--aiapih-text-faint); }


/* ------------------------------------------------------------------ */
/* Details modal — full-height panel docked to a screen corner         */
/* (not the small centered auth-modal box: .aiapimd-modal-overlay and  */
/* .aiapimd-modal below intentionally override .aiapih-modal-overlay's */
/* centering so this one reads like a dedicated model-details drawer). */
/* ------------------------------------------------------------------ */

.aiapimd-modal-overlay {
	align-items: stretch;
	justify-content: flex-end;
	padding: 0;
}

/* Docked flush against the edge of the screen with sharp corners, like
   a slide-out menu/drawer, not a floating card — no gap from the top,
   bottom, or the edge it's docked to. */
.aiapimd-modal {
	width: 100%;
	max-width: 760px;
	max-height: none;
	height: 100%;
	background: var(--aiapih-surface-solid);
	color: var(--aiapih-text);
	border: 0;
	border-inline-start: 1px solid var(--aiapih-border);
	border-radius: 0;
	box-shadow: var(--aiapih-shadow-lg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	text-align: start;
	position: relative;
	isolation: isolate;
	transform: translateX(24px);
	opacity: 0;
	animation: aiapimd-slide-in .3s cubic-bezier(.16,1,.3,1) forwards;
}
[dir="rtl"] .aiapimd-modal { border-inline-start: 0; border-inline-end: 1px solid var(--aiapih-border); transform: translateX(-24px); }
@keyframes aiapimd-slide-in { to { transform: translateX(0); opacity: 1; } }

/* ---- Decorative background: blurred glow + giant faded provider-logo
   watermark behind the sticky head — same visual language as the card
   grid and the account panel's plan cards. ------------------------- */
.aiapimd-modal-decor {
	position: absolute;
	inset: 0 0 auto 0;
	height: 320px;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
}
.aiapimd-modal-decor-glow {
	position: absolute;
	inset-inline-end: -100px;
	top: -110px;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background: var(--aiapih-primary);
	opacity: .16;
	filter: blur(70px);
}
.aiapimd-modal-decor-logo {
	position: absolute;
	inset-inline-end: 10px;
	top: -34px;
	width: 190px;
	height: 190px;
	object-fit: contain;
	opacity: .06;
	transform: rotate(-8deg);
}
.aiapimd-modal-decor-logo--mono { filter: grayscale(1); opacity: .045; }

.aiapimd-modal-head {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 26px 28px 16px;
	flex: none;
}
/* Badge background/padding lives on this wrapper, not on the <img>
   itself: the auto-dark-mode logo filter (brightness(0) invert(1),
   applied straight to img.aiapi-plogo-auto-dark — see home.css) acts
   on the *entire* filtered element, background included. Putting the
   background on the img (as this used to do) meant that in dark mode
   the badge's own background color got crushed to black then
   inverted to white right along with the logo mark, so both ended up
   the same flat white and the icon vanished into a plain white box.
   Isolating the background on this unfiltered wrapper — the same
   pattern already used for .aiapimd-card-logo-wrap — keeps the invert
   scoped to just the logo pixels. */
.aiapimd-modal-logo-wrap {
	width: 44px; height: 44px; border-radius: 13px; flex: none;
	display: flex; align-items: center; justify-content: center;
	background: var(--aiapih-bg-soft);
}
.aiapimd-modal-logo { width: 30px; height: 30px; object-fit: contain; }
.aiapimd-modal-head-text { flex: 1; min-width: 0; }
.aiapimd-modal-title-row { display: flex; align-items: center; gap: 8px; }
.aiapimd-modal-title-row h2 {
	font-size: 19px; font-weight: 800; margin: 0;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aiapimd-modal-provider {
	font-size: 12.5px; color: var(--aiapih-text-faint);
	margin: 3px 0 0; text-align: start; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.aiapimd-modal-copy { flex: none; width: 26px; height: 26px; border-radius: 8px; }

/* "Details Page" link — only rendered when the model has a published
   SEO page (models-directory.js toggles [hidden] + href per model). */
.aiapimd-modal-page-link {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}
.aiapimd-modal-page-link svg { flex-shrink: 0; }

/* Same specificity trick as .aiapimd-grid[hidden] / .aiapimd-card[hidden]
   above: .aiapimd-modal-page-link's own `display: inline-flex` otherwise
   beats the browser's built-in `[hidden] { display: none }`, so the link
   stayed visible even when models-directory.js set pageLinkEl.hidden =
   true for a model with no published page. */
.aiapimd-modal-page-link[hidden] { display: none; }

.aiapimd-modal-close {
	position: static !important;
	flex: none; width: 34px; height: 34px; border-radius: 10px;
}

.aiapimd-modal-badges { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 28px 16px; flex: none; }

.aiapimd-modal-tabs {
	position: relative; z-index: 1;
	display: flex; gap: 4px; margin: 0 28px 0; padding: 4px;
	border-radius: 13px; background: var(--aiapih-surface-solid); border: 1px solid var(--aiapih-border); flex: none;
}
.aiapimd-modal-tabs .aiapih-tab-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.aiapimd-modal-tabs .aiapih-tab-btn svg { width: 14px; height: 14px; }

/* ----- KPI strip — shared above Overview & Performance tab content --- */
.aiapimd-modal-kpis {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	padding: 18px 26px 0;
	flex: none;
}
.aiapimd-kpi {
	padding: 14px 14px 12px;
	border: 1px solid var(--aiapih-border);
	border-radius: 15px;
	background: var(--aiapih-surface);
	display: flex; flex-direction: column; gap: 4px;
}
.aiapimd-kpi-label {
	display: flex; align-items: center; gap: 5px;
	font-size: 11px; font-weight: 700; color: var(--aiapih-text-faint);
	text-transform: uppercase; letter-spacing: .03em;
}
.aiapimd-kpi-label svg { width: 12px; height: 12px; flex: none; }
.aiapimd-kpi-value { font-size: 20px; font-weight: 800; direction: ltr; text-align: start; }
.aiapimd-kpi-value--good { color: var(--aiapih-success); }
.aiapimd-kpi-hint { font-size: 11px; color: var(--aiapih-text-faint); }

.aiapimd-modal-noUsage {
	display: flex; align-items: flex-start; gap: 6px;
	margin: 10px 26px 0 !important; padding: 10px 12px;
	background: var(--aiapih-bg-soft); border-radius: 11px;
	font-size: 11.5px; line-height: 1.6; color: var(--aiapih-text-faint);
	flex: none;
}
.aiapimd-modal-noUsage svg { flex: none; margin-top: 2px; }
.aiapimd-modal-noUsage[hidden] { display: none; }

/* ----- Scrollable tab panes -------------------------------------- */
.aiapimd-modal-pane { display: none; padding: 18px 26px 28px; overflow-y: auto; flex: 1; }
.aiapimd-modal-pane.is-active { display: block; }

.aiapimd-modal-section-title {
	display: flex; align-items: center; gap: 6px;
	font-size: 12px; font-weight: 800; color: var(--aiapih-text-faint);
	text-transform: uppercase; letter-spacing: .03em;
	margin: 20px 0 10px;
}
.aiapimd-modal-section-title:first-child,
.aiapimd-modal-section-title--flush { margin-top: 0; }
.aiapimd-modal-section-title svg { width: 13px; height: 13px; }

.aiapimd-modal-desc { margin: 0 0 16px; }
.aiapimd-modal-desc td { font-size: 13.5px; line-height: 1.75; border-radius: 14px; padding: 14px 16px; }

.aiapimd-modal-specs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
.aiapimd-modal-spec {
	padding: 11px 13px;
	border-radius: 13px;
	background: var(--aiapih-bg-soft);
}
.aiapimd-modal-spec-label { font-size: 10.5px; font-weight: 700; color: var(--aiapih-text-faint); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 3px; }
.aiapimd-modal-spec-value { font-size: 14px; font-weight: 800; }

.aiapimd-modal-plans { display: flex; flex-wrap: wrap; gap: 7px; }
.aiapimd-plan-chip {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: 12px; font-weight: 700; color: var(--aiapih-text);
	background: var(--aiapih-primary-soft);
	border: 1px solid var(--aiapih-border-strong);
	border-radius: 999px; padding: 5px 12px;
}
.aiapimd-plan-chip svg { width: 11px; height: 11px; color: var(--aiapih-primary); }
.aiapimd-modal-plans-empty { font-size: 12.5px; color: var(--aiapih-text-faint); }

.aiapimd-modal-pricing-card {
	border: 1px solid var(--aiapih-border);
	border-radius: 16px;
	padding: 16px 18px;
}
.aiapimd-modal-pricing-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.aiapimd-modal-pricing-head > span:first-child { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; }
.aiapimd-modal-pricing-head > span:first-child svg { width: 14px; height: 14px; color: var(--aiapih-primary); }
.aiapimd-modal-pricing-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.aiapimd-modal-pricing-rows .aiapimd-price-row {
	flex-direction: column; align-items: flex-start; gap: 4px;
	padding: 11px 13px; border-radius: 12px; background: var(--aiapih-bg-soft);
	font-size: 13px;
}
.aiapimd-modal-pricing-rows .aiapimd-price-val { font-size: 16px; }
.aiapimd-modal-pricing-rows .aiapimd-price-row--free { grid-column: 1 / -1; flex-direction: row; padding: 14px; font-size: 14px; }
.aiapimd-modal-pricing-note { margin: 0; font-size: 11.5px; color: var(--aiapih-text-faint); line-height: 1.6; }

/* ----- API tab: language tabs, code block, auth, parameters --------- */
.aiapimd-modal-api-lead { font-size: 13.5px; color: var(--aiapih-text-muted); margin: 0 0 4px; }

.aiapimd-lang-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.aiapimd-lang-tabs button {
	font-size: 12px; font-weight: 700; padding: 6px 13px; border-radius: 9px;
	border: 1px solid var(--aiapih-border); background: var(--aiapih-surface);
	color: var(--aiapih-text-muted); cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.aiapimd-lang-tabs button.is-active { color: #fff; background: var(--aiapih-primary); border-color: var(--aiapih-primary); }

.aiapimd-code-block {
	position: relative;
	background: #12141f;
	color: #d8dbec;
	border-radius: 14px;
	padding: 16px 44px 16px 16px;
	overflow-x: auto;
	margin-bottom: 16px;
}
[dir="rtl"] .aiapimd-code-block { padding: 16px 16px 16px 44px; }
.aiapimd-code-block pre { margin: 0; }
.aiapimd-code-block code {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1.7;
	white-space: pre;
	direction: ltr;
	display: block;
}
.aiapimd-code-copy {
	position: absolute;
	top: 12px;
	inset-inline-end: 12px;
	width: 26px; height: 26px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 8px;
	border: 1px solid rgba(255,255,255,.14);
	background: rgba(255,255,255,.06);
	color: #d8dbec;
	cursor: pointer;
}
.aiapimd-code-copy:hover { background: rgba(255,255,255,.14); }
.aiapimd-code-copy.is-copied { color: #4fcaa0; border-color: #4fcaa0; }

.aiapimd-modal-auth {
	border: 1px solid var(--aiapih-border);
	border-radius: 13px;
	padding: 12px 14px;
	margin-bottom: 18px;
}
.aiapimd-modal-auth summary {
	display: flex; align-items: center; gap: 7px;
	font-size: 14px; font-weight: 700; cursor: pointer;
	list-style: none;
}
.aiapimd-modal-auth summary::-webkit-details-marker { display: none; }
.aiapimd-modal-auth summary svg { width: 13px; height: 13px; color: var(--aiapih-primary); }
.aiapimd-modal-auth p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.75; color: var(--aiapih-text-muted); }
.aiapimd-modal-auth code { background: var(--aiapih-bg-soft); padding: 2px 6px; border-radius: 6px; direction: ltr; unicode-bidi: embed; }

/* Params table now lives inside .aiapimd-modal-params-box together with
   its own header, so the "Supported parameters" title is visibly part
   of the same bordered card instead of a faint, disconnected label
   floating above the table. The title keeps its shared
   .aiapimd-modal-section-title class (reused by every other section in
   this modal) — only recolored/repositioned here, scoped to this box,
   so the other sections are untouched. */
.aiapimd-modal-params-box {
	border: 1px solid var(--aiapih-border);
	border-radius: 13px;
	overflow: hidden;
	background: var(--aiapih-surface-solid);
}
.aiapimd-modal-params-box .aiapimd-modal-section-title {
	margin: 0;
	padding: 12px 14px;
	color: var(--aiapih-text);
	background: var(--aiapih-bg-soft);
	border-bottom: 1px solid var(--aiapih-border);
}

.aiapimd-params-table {
	width: 100%; border-collapse: collapse; font-size: 14.5px;
}
.aiapimd-params-table th, .aiapimd-params-table td {
	padding: 10px 14px; text-align: start; border-bottom: 1px solid var(--aiapih-border);
	vertical-align: top;
}
.aiapimd-params-table thead th { background: var(--aiapih-bg-soft); font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--aiapih-text-faint); }
.aiapimd-params-table tbody tr:last-child td { border-bottom: 0; }
.aiapimd-params-table code { direction: ltr; unicode-bidi: embed; font-size: 13.5px; color: var(--aiapih-primary-strong); }
.aiapimd-params-table[hidden] { display: none; }

/* Its own bordered/filled box — kept apart from .aiapimd-modal-params-box
   on purpose, so it never reads as a trailing row of the table above it. */
.aiapimd-modal-api-hint-box {
	margin: 20px 0 0;
	padding: 12px 14px;
	border: 1px solid var(--aiapih-border);
	border-radius: 13px;
	background: var(--aiapih-bg-soft);
}
.aiapimd-modal-api-hint {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--aiapih-text-muted);
	margin: 0;
}
/* Exactly two flex children on purpose: the icon, then ONE span
   wrapping the whole sentence (including the inline link). Flex
   treats every child element AND every bare text node as its own
   item, so without this wrapper span the sentence's leading text
   node and its trailing <a> become separate items and the line
   fractures into stacked fragments on narrow/mobile widths. */
.aiapimd-modal-api-hint svg { flex: none; margin-top: 2px; }
.aiapimd-modal-api-hint span { flex: 1 1 auto; min-width: 0; }
.aiapimd-modal-api-hint a { color: var(--aiapih-primary); font-weight: 700; }


/* ------------------------------------------------------------------ */
/* Responsive                                                           */
/* ------------------------------------------------------------------ */

@media (max-width: 1180px) {
	.aiapi-home .ains-mdl.aiapimd-scope { --aiapimd-side: 268px; --aiapimd-gap: 22px; }
}

/* Filters become a bottom sheet opened from a bar pinned to the bottom edge
   (docked against the footer when it scrolls into view). */
@media (max-width: 980px) {
	.aiapimd-layout { grid-template-columns: minmax(0, 1fr); }
	.aiapimd-body-section { padding-bottom: 110px; }

	.aiapimd-side {
		position: fixed; inset-inline: 0; top: auto; bottom: 0; z-index: 210;
		max-height: min(88vh, 720px); border-radius: 22px 22px 0 0; border-bottom: 0;
		box-shadow: 0 -18px 50px -12px rgba(0, 0, 0, .35);
		transform: translateY(105%); visibility: hidden;
		transition: transform .28s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .28s;
	}
	.is-sheet-open .aiapimd-side { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.16, 1, .3, 1), visibility 0s; }
	.aiapimd-side-grip { display: block; flex: none; width: 38px; height: 4px; margin: 9px auto 0; border-radius: 4px; background: var(--ains-border); }
	.aiapimd-side-head { padding-top: 10px; }
	.aiapimd-side-close { display: grid; place-items: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 1px solid var(--ains-border); border-radius: 10px; background: var(--ains-surface-2); color: var(--ains-text-muted); cursor: pointer; }
	.aiapimd-side-foot { display: block; flex: none; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ains-border); background: var(--ains-surface); }
	.aiapi-home .aiapimd-apply { display: flex; align-items: center; justify-content: center; width: 100%; height: 46px; margin: 0; border: 0; border-radius: 13px; background: var(--mdl-accent); color: var(--mdl-ink); font-size: 14.5px; font-weight: 800; cursor: pointer; transition: opacity .15s ease, transform .15s ease; }
	.aiapi-home .aiapimd-apply:active { transform: scale(.985); }
	.aiapi-home .aiapimd-apply:disabled { opacity: .5; cursor: default; }

	.aiapimd-backdrop { display: block; position: fixed; inset: 0; z-index: 205; background: rgba(10, 10, 16, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: aiapih-fade .2s ease; }
	.aiapimd-backdrop[hidden] { display: none !important; }

	.aiapimd-mbar {
		display: flex; align-items: center; justify-content: space-between; gap: 12px;
		position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: color-mix(in srgb, var(--ains-surface) 92%, transparent);
		-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
		border-top: 1px solid var(--ains-border); box-shadow: 0 -10px 30px -18px rgba(20, 22, 26, .35);
		transition: transform .25s ease;
	}
	.aiapimd-mbar.is-docked { transform: translateY(105%); }
	.is-sheet-open .aiapimd-mbar { visibility: hidden; }
	.aiapi-home .aiapimd-mbar-btn { display: inline-flex; align-items: center; gap: 9px; height: 42px; margin: 0; padding: 0 18px; border: 0; border-radius: 999px; background: var(--mdl-accent); color: var(--mdl-ink); font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 20px -10px var(--mdl-accent); }
	.aiapimd-mbar-btn .aiapimd-side-badge { background: var(--mdl-ink); color: var(--mdl-accent); }
	.aiapimd-mbar-count { font-size: 12.5px; font-weight: 700; color: var(--ains-text-muted); font-variant-numeric: tabular-nums; }
}

@media (max-width: 640px) {
	.aiapimd-hero { padding: 22px 0 18px; }
	.aiapimd-hero-card { padding: 38px 18px 34px; border-radius: 22px; }
	.aiapimd-hero-card::before { background-size: auto, auto, 28px 28px, 28px 28px; }
	.aiapimd-hero .aiapih-lead { font-size: 14.5px; line-height: 1.8; }
	.aiapimd-hero-count { margin-top: 18px; padding: 6px 14px; font-size: 13px; }
	.aiapimd-search-box { height: 52px; padding: 0 18px; margin-top: 22px; }
	.aiapimd-search-box input { font-size: 16px; } /* >=16px stops iOS zoom-on-focus */
	.aiapimd-toolbar { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; border-radius: 14px; }
	.ains-mdl-result.aiapimd-count { font-size: 13px; }
	.aiapimd-toolbar .ains-mdl-sort { width: 100%; justify-content: space-between; }
	.aiapimd-toolbar .ains-mdl-dd { flex: 1; }
	.ains-mdl .aiapimd-toolbar .ains-mdl-dd-btn { width: 100%; height: 42px; }
	.aiapimd-toolbar .ains-mdl-dd-menu { inset-inline: 0; min-width: 100%; }
	.aiapimd-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.aiapimd-live-dot::after { animation: none; opacity: 0; }
	.aiapimd-side, .aiapimd-mbar, .aiapimd-backdrop, .aiapimd-opt-box, .aiapimd-switch-track, .aiapimd-switch-track::after { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------------------ */
/* Quick details panel — additions                                      */
/* ------------------------------------------------------------------ */

.aiapimd-modal-provider { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; }
.aiapimd-modal-provider code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; unicode-bidi: isolate; background: none; padding: 0; font: inherit; color: inherit; }
.aiapimd-badge--free { color: var(--aiapih-success); background: var(--aiapih-success-soft); border-color: transparent; }
.aiapimd-modal-decor-logo.aiapimd-mono { opacity: .045; }
.aiapimd-modal-kpis { padding: 0; margin-bottom: 12px; }
.aiapimd-modal-noUsage { margin: 0 0 14px !important; }
.aiapimd-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.aiapimd-table-scroll[hidden] { display: none; }
.aiapimd-params-table { min-width: 460px; }

.aiapimd-stats { min-height: 220px; }
.aiapimd-stats-loading { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.aiapimd-stats-loading i, .aiapimd-stats-loading b {
	display: block; height: 82px; border-radius: 14px;
	background: linear-gradient(90deg, var(--aiapih-bg-soft) 25%, var(--aiapih-border) 50%, var(--aiapih-bg-soft) 75%);
	background-size: 200% 100%; animation: aiapimd-shimmer 1.3s linear infinite;
}
.aiapimd-stats-loading b { grid-column: 1 / -1; height: 190px; }
@keyframes aiapimd-shimmer { to { background-position: -200% 0; } }
.aiapimd-stats-error { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 54px 16px; text-align: center; color: var(--aiapih-text-muted); font-size: 13.5px; }
.aiapimd-stats-error p { margin: 0; }

@media (max-width: 780px) {
	.aiapimd-modal-overlay { padding: 0; }
	.aiapimd-modal { max-width: none; border-radius: 0; border: 0; }
	.aiapimd-modal-kpis { gap: 6px; }
	.aiapimd-kpi { padding: 10px 9px 9px; border-radius: 12px; gap: 3px; }
	.aiapimd-kpi-label { font-size: 9.5px; gap: 3px; white-space: nowrap; overflow: hidden; }
	.aiapimd-kpi-label span { overflow: hidden; text-overflow: ellipsis; }
	.aiapimd-kpi-label svg { width: 10px; height: 10px; }
	.aiapimd-kpi-value { font-size: 15px; }
	.aiapimd-kpi-hint { font-size: 9.5px; }
	.aiapimd-modal-specs, .aiapimd-modal-pricing-rows { grid-template-columns: 1fr; }
	.aiapimd-stats-loading { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.aiapimd-modal-head { padding: 18px 18px 14px; gap: 10px; }
	.aiapimd-modal-page-link { padding-inline: 9px; }
	.aiapimd-modal-page-link span { display: none; }
	.aiapimd-modal-badges { padding: 0 18px 14px; }
	.aiapimd-modal-tabs { margin: 0 18px; }
	.aiapimd-modal-tabs .aiapih-tab-btn { padding-inline: 6px; font-size: 12.5px; }
	.aiapimd-modal-pane { padding: 16px 18px 28px; }
}