/* ══════════════════════════════════════════════════════════════════════════
   AOS POLISH LAYER
   Loaded last across all custom admin + front-end surfaces.
   Its job: elevate every custom surface to "drop dead stunning."
   Focus areas:
     - Typography micro-rhythm (font-variation, tracking, optical-size)
     - Depth: layered shadows with navy tint
     - Motion: spring easing, reduced-motion respected
     - Surface cohesion: one shared set of navy/yellow/cream tokens
     - Micro-interactions: hover, focus, press
   ══════════════════════════════════════════════════════════════════════════ */


/* ── Shared tokens (polished) ─────────────────────────────────────────── */
:root {
	/* Brand palette retuned to AOS (cyan/teal + charcoal). These -px hex
	   tokens live in :root (the sanctioned place for raw values) and feed
	   every !important override below, so fixing them here re-tints every
	   polished surface on-brand at once. */
	--aos-navy-px:        #1C1E24;  /* charcoal ink (was HFU navy) */
	--aos-navy-deep-px:   #141519;  /* deeper charcoal */
	--aos-navy-soft-px:   #333640;  /* soft slate charcoal */
	--aos-blue-px:        #1F7A7A;  /* deep teal (was HFU blue) */
	--aos-yellow-px:      #2E9E9E;  /* brand teal (was HFU gold) */
	--aos-yellow-deep-px: #1F7A7A;  /* deep teal */
	--aos-yellow-soft-px: #E7F5F4;  /* light teal (was gold-soft) */
	--aos-cream-px:       #FAFAFA;
	--aos-cream-alt-px:   #F3F4F5;
	--aos-card-px:        #FFFFFF;

	/* Ink / text */
	--aos-ink-px:         #1C1E24;
	--aos-ink-muted-px:   #4A4F59;
	--aos-ink-subtle-px:  #676C75;

	/* Borders */
	--aos-border-px:      #E2E4E9;
	--aos-border-soft-px: #EDEEF1;

	/* Semantic — success */
	--aos-success-px:      #1BB36B;
	--aos-success-deep-px: #0A7F48;
	--aos-success-rgb:     27, 179, 107;

	/* Semantic — warning */
	--aos-warn-px:         #E5B007;
	--aos-warn-deep-px:    #8A6A00;
	--aos-warn-rgb:        229, 176, 7;

	/* Semantic — danger */
	--aos-danger-px:       #9E2A52;
	--aos-danger-soft-px:  #FCE4EE;
	--aos-danger-rgb:      158, 42, 82;

	/* Blue variant (now deep teal) */
	--aos-blue-deep-px:    #1A6B6B;
	--aos-blue-rgb:        31, 122, 122;

	/* Navy RGB (now charcoal — for rgba overlays) */
	--aos-navy-rgb:        28, 30, 36;

	--aos-ease:           cubic-bezier(0.22, 1, 0.36, 1);
	--aos-ease-spring:    cubic-bezier(0.175, 0.885, 0.32, 1.275);

	--aos-shadow-card:    0 1px 2px rgba(28, 30, 36, 0.04),
	                      0 4px 16px rgba(28, 30, 36, 0.06),
	                      0 16px 40px rgba(28, 30, 36, 0.04);
	--aos-shadow-card-hover: 0 1px 2px rgba(28, 30, 36, 0.05),
	                         0 6px 20px rgba(28, 30, 36, 0.08),
	                         0 24px 56px rgba(28, 30, 36, 0.08);
	--aos-shadow-modal:   0 40px 96px rgba(28, 30, 36, 0.24),
	                      0 16px 32px rgba(28, 30, 36, 0.14);
}


/* ══════════════════════════════════════════════════════════════════════════
   CONTENT HUB polish
   ══════════════════════════════════════════════════════════════════════════ */

/* Tighter rhythm around the greeting */
.aos-hub__greeting {
	margin-bottom: 56px !important;
}
.aos-hub__greeting h1 {
	font-size: clamp(2.4rem, 4vw, 3.4rem) !important;
	line-height: 1.02 !important;
	letter-spacing: -0.028em !important;
	font-variation-settings: "opsz" 72 !important;
}
.aos-hub__greeting h1::after {
	content: "";
	display: block;
	width: 48px;
	height: 2px;
	background: var(--aos-yellow-px);
	margin-top: 16px;
}

/* 3-way hero row: equalize heights + icons */
.aos-hub__heroes--triple {
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 16px !important;
}
.aos-hub__heroes--triple .aos-hub__hero {
	min-height: 140px !important;
	padding: 24px 22px !important;
	align-items: center;
}
.aos-hub__heroes--triple .aos-hub__hero-title {
	font-size: 22px !important;
	letter-spacing: -0.022em !important;
	margin: 0 !important;
}
.aos-hub__heroes--triple .aos-hub__hero-sub {
	font-size: 13.5px !important;
	line-height: 1.5 !important;
	margin: 4px 0 0 !important;
}
.aos-hub__plus {
	box-shadow: 0 4px 12px rgba(46, 158, 158, 0.35),
	            inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.aos-hub__plus--alt {
	background: var(--aos-blue-px) !important;
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(31, 122, 122, 0.25) !important;
}
.aos-hub__plus--spark {
	background: linear-gradient(135deg, var(--aos-yellow-px), var(--aos-yellow-deep-px)) !important;
	color: var(--aos-navy-px) !important;
	animation: aos-spark 2.4s ease-in-out infinite;
}
@keyframes aos-spark {
	0%, 100% { transform: rotate(0deg); }
	25%      { transform: rotate(-4deg); }
	75%      { transform: rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
	.aos-hub__plus--spark { animation: none; }
}

/* Hero card hover */
.aos-hub__hero {
	box-shadow: var(--aos-shadow-card) !important;
	transition: transform 220ms var(--aos-ease),
	            box-shadow 220ms var(--aos-ease),
	            border-color 220ms var(--aos-ease) !important;
}
.aos-hub__hero:hover {
	transform: translateY(-3px);
	box-shadow: var(--aos-shadow-card-hover) !important;
	border-color: var(--aos-yellow-px) !important;
}

/* AI suggestion cards — accent top rail */
.aos-hub__card--ai {
	position: relative;
	overflow: hidden;
	box-shadow: var(--aos-shadow-card) !important;
}
.aos-hub__card--ai::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--aos-yellow-px), var(--aos-blue-px));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 320ms var(--aos-ease);
}
.aos-hub__card--ai:hover::before { transform: scaleX(1); }
.aos-hub__card--ai:hover {
	transform: translateY(-3px);
	box-shadow: var(--aos-shadow-card-hover) !important;
	border-color: var(--aos-yellow-px) !important;
}

/* Draft card thumb */
.aos-hub__draft-thumb {
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	margin-bottom: 6px;
	display: grid;
	place-items: center;
	color: var(--aos-yellow-px);
	font-family: "Instrument Sans", Georgia, serif;
	font-size: 40px;
	font-weight: 350;
	letter-spacing: -0.02em;
	font-variation-settings: "opsz" 72;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.aos-hub__draft-thumb-label { opacity: 0.7; }

/* Health strip polish */
.aos-hub__health {
	box-shadow: var(--aos-shadow-card) !important;
	margin-bottom: 16px;
}
.aos-hub__health-item {
	transition: background 220ms var(--aos-ease);
	cursor: default;
}
.aos-hub__health-item:hover { background: var(--aos-cream-alt-px) !important; }
.aos-hub__health-value {
	font-size: 44px !important;
	font-weight: 350 !important;
	font-variation-settings: "opsz" 96 !important;
}
.aos-hub__health-label {
	font-size: 10px !important;
	letter-spacing: 0.18em !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   AI WIZARD polish
   ══════════════════════════════════════════════════════════════════════════ */

.aos-wiz,
[id="aos-ai-wizard-root"] {
	max-width: 1040px !important;
	margin: 0 auto !important;
}

/* Title */
.aos-wiz h1,
.aos-wiz__title {
	font-family: "Instrument Sans", Georgia, serif !important;
	font-weight: 350 !important;
	font-size: clamp(2.2rem, 3.4vw, 3rem) !important;
	line-height: 1.04 !important;
	letter-spacing: -0.028em !important;
	color: var(--aos-navy-px) !important;
	font-variation-settings: "opsz" 72 !important;
}
.aos-wiz__subtitle {
	color: #4A4F59;
	font-size: 15.5px;
	margin-top: 8px;
}

/* Step rail — numbered dots with connecting fill */
.aos-wiz__rail,
.aos-wiz__steps {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	position: relative;
	margin: 40px 0;
	padding: 0 8%;
}
.aos-wiz__rail::before,
.aos-wiz__steps::before {
	content: "";
	position: absolute;
	top: 16px;
	left: calc(8% + 20px);
	right: calc(8% + 20px);
	height: 2px;
	background: #EDEEF1;
	z-index: 0;
}
.aos-wiz__step-dot,
.aos-wiz__rail-dot,
.aos-wiz__step > span:first-child {
	width: 32px; height: 32px;
	border-radius: 50%;
	display: grid; place-items: center;
	background: #fff;
	border: 2px solid #B7C1CD;
	color: #676C75;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12px;
	font-weight: 600;
	position: relative;
	z-index: 1;
	transition: all 260ms var(--aos-ease);
}
.aos-wiz__step.is-current .aos-wiz__step-dot,
.aos-wiz__step.is-current > span:first-child {
	background: var(--aos-navy-px);
	border-color: var(--aos-navy-px);
	color: var(--aos-yellow-px);
	box-shadow: 0 0 0 4px rgba(28, 30, 36, 0.1);
	transform: scale(1.05);
}
.aos-wiz__step.is-done .aos-wiz__step-dot,
.aos-wiz__step.is-done > span:first-child {
	background: var(--aos-yellow-px);
	border-color: var(--aos-yellow-deep-px);
	color: var(--aos-navy-px);
}

/* Wizard primary buttons — navy + white, matching the global primary rule. */
.aos-wiz__nav .button-primary,
.aos-wiz .button-primary,
.aos-wiz__btn--primary,
button.aos-wiz-next,
button.aos-wiz-generate {
	background: var(--aos-navy-px) !important;
	border-color: var(--aos-navy-px) !important;
	color: #fff !important;
	border-radius: 999px !important;
	padding: 10px 28px !important;
	font-family: "Instrument Sans", system-ui, sans-serif !important;
	font-weight: 700 !important;
	font-size: 14.5px !important;
	height: auto !important;
	text-shadow: none !important;
	box-shadow: 0 2px 10px rgba(28, 30, 36, 0.25) !important;
	transition: transform 180ms var(--aos-ease), box-shadow 180ms var(--aos-ease), background 180ms var(--aos-ease) !important;
}
.aos-wiz__nav .button-primary:hover,
.aos-wiz .button-primary:hover {
	background: var(--aos-navy-soft-px) !important;
	border-color: var(--aos-navy-soft-px) !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(28, 30, 36, 0.35) !important;
}
.aos-wiz__nav .button-primary:disabled,
.aos-wiz .button-primary:disabled,
.aos-wiz .button-primary[disabled] {
	background: #E2E4E9 !important;
	border-color: #E2E4E9 !important;
	color: #676C75 !important;
	box-shadow: none !important;
	cursor: not-allowed !important;
}

/* Segmented control (Intent step) */
.aos-wiz__seg {
	display: grid;
	grid-auto-flow: column;
	gap: 4px;
	padding: 4px;
	background: #EDEEF1;
	border-radius: 12px;
}
.aos-wiz__seg button {
	padding: 10px 18px;
	background: transparent;
	border: 0;
	border-radius: 8px;
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #4A4F59;
	cursor: pointer;
	transition: all 180ms var(--aos-ease);
}
.aos-wiz__seg button.is-active,
.aos-wiz__seg button[aria-pressed="true"],
.aos-wiz__seg button.button-primary {
	background: var(--aos-navy-px) !important;
	color: #fff !important;
	box-shadow: 0 1px 3px rgba(28, 30, 36, 0.25);
}

/* Text inputs */
.aos-wiz input[type="text"],
.aos-wiz input[type="url"],
.aos-wiz textarea,
.aos-wiz select {
	font-family: "Instrument Sans", system-ui, sans-serif !important;
	font-size: 15px !important;
	padding: 10px 14px !important;
	border: 1px solid #E2E4E9 !important;
	border-radius: 10px !important;
	background: #FFF !important;
	box-shadow: none !important;
	transition: border-color 180ms var(--aos-ease), box-shadow 180ms var(--aos-ease) !important;
}
.aos-wiz input:focus,
.aos-wiz textarea:focus,
.aos-wiz select:focus {
	border-color: var(--aos-blue-px) !important;
	outline: 0 !important;
	box-shadow: 0 0 0 3px rgba(31, 122, 122, 0.12) !important;
}

/* Card shell for each step */
.aos-wiz__card,
.aos-wiz__panel {
	background: #fff;
	border: 1px solid #EDEEF1;
	border-radius: 20px;
	padding: 36px 36px 32px;
	box-shadow: var(--aos-shadow-card);
}

.aos-wiz__card h2,
.aos-wiz h2 {
	font-family: "Instrument Sans", Georgia, serif !important;
	font-weight: 400 !important;
	font-size: 26px !important;
	line-height: 1.15 !important;
	letter-spacing: -0.022em !important;
	color: var(--aos-navy-px) !important;
	margin: 0 0 8px !important;
}

/* Label / eyebrow style */
.aos-wiz__eyebrow,
.aos-wiz label {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #676C75;
	font-weight: 600;
}


/* ══════════════════════════════════════════════════════════════════════════
   MIGRATION WIZARD polish
   ══════════════════════════════════════════════════════════════════════════ */

[class*="aos-mig"] h1 {
	font-family: "Instrument Sans", Georgia, serif !important;
	font-weight: 350 !important;
	font-size: clamp(2.2rem, 3.4vw, 3rem) !important;
	line-height: 1.04 !important;
	letter-spacing: -0.028em !important;
	color: var(--aos-navy-px) !important;
	font-variation-settings: "opsz" 72 !important;
}

[class*="aos-mig"] input[type="url"] {
	border-radius: 14px !important;
	padding: 16px 20px !important;
	font-size: 17px !important;
	border: 1px solid #E2E4E9 !important;
	background: #fff !important;
}

/* All primary buttons — navy background, white text, brand pill shape.
   Applies globally so the dashboard's "Save Draft", AOS page CTAs, wizard
   "Next/Generate" buttons, and any other .button-primary all read
   identically. Earlier this block tinted AOS pages yellow and left the
   stock dashboard navy-on-navy with the white text washed out by other
   cascade hits — both problems collapse if the rule is the same everywhere
   and the color declaration is locked at maximum specificity. */
.wp-core-ui .button-primary,
.wp-core-ui input[type="submit"].button-primary,
.wp-core-ui button.button-primary,
.wp-core-ui a.button-primary,
body .wp-core-ui .button-primary,
.aos-hub .button-primary,
.aos-hub button.button-primary,
[id^="aos-"] .button-primary,
[id^="aos-"] button.button-primary,
[class*="aos-mig"] .button-primary,
[class*="aos-mig"] button.button-primary,
[class*="aos-wiz"] .button-primary,
[class*="aos-wiz"] button.button-primary,
.wrap.aos-ai-cp .button-primary,
.wrap.aos-ai-cp button.button-primary,
.wrap.aos-ai-feature .button-primary,
.wrap.aos-ai-feature button.button-primary,
.wrap[class*="aos-ai"] .button-primary,
.wrap[class*="aos-ai"] button.button-primary {
	background: var(--aos-navy-px) !important;
	border-color: var(--aos-navy-px) !important;
	color: #fff !important;
	border-radius: 999px !important;
	padding: 10px 28px !important;
	font-family: "Instrument Sans", system-ui, sans-serif !important;
	font-weight: 700 !important;
	font-size: 14.5px !important;
	height: auto !important;
	text-shadow: none !important;
	box-shadow: 0 2px 10px rgba(28, 30, 36, 0.25) !important;
	transition: transform 180ms var(--aos-ease), box-shadow 180ms var(--aos-ease), background 180ms var(--aos-ease) !important;
}
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus,
body .wp-core-ui .button-primary:hover,
.aos-hub .button-primary:hover,
[id^="aos-"] .button-primary:hover,
[class*="aos-mig"] .button-primary:hover,
[class*="aos-wiz"] .button-primary:hover,
.wrap.aos-ai-cp .button-primary:hover,
.wrap.aos-ai-feature .button-primary:hover,
.wrap[class*="aos-ai"] .button-primary:hover {
	background: var(--aos-navy-soft-px) !important;
	border-color: var(--aos-navy-soft-px) !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(28, 30, 36, 0.35) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   ASK AOS CHATBOT polish
   ══════════════════════════════════════════════════════════════════════════ */

/* Launcher */
.aos-chat-launcher {
	background: var(--aos-navy-px) !important;
	box-shadow: 0 16px 32px hsl(var(--aos-navy) / 0.28),
	            0 4px 12px hsl(var(--aos-navy) / 0.18),
	            inset 0 1px 0 hsl(var(--paper) / 0.12) !important;
	border: 2px solid hsl(var(--aos-yellow) / 0.5) !important;
	position: fixed !important;
}
.aos-chat-launcher svg {
	color: var(--aos-yellow-px) !important;
	width: 22px !important;
	height: 22px !important;
}
/* Panel frame */
.aos-chat-panel {
	box-shadow: var(--aos-shadow-modal) !important;
	border-radius: 20px !important;
	overflow: hidden;
	border: 0 !important;
}

/* Panel header */
.aos-chat-header {
	background: linear-gradient(135deg, var(--aos-navy-px), var(--aos-navy-deep-px)) !important;
	color: hsl(var(--paper)) !important;
	padding: 20px 22px !important;
	position: relative;
	align-items: flex-start !important;
	border-bottom: 2px solid hsl(var(--aos-yellow)) !important;
}
.aos-chat-header__title {
	font-family: "Instrument Sans", system-ui, sans-serif !important;
	font-weight: 600 !important;
	font-size: 20px !important;
	line-height: 1.15 !important;
	letter-spacing: -0.022em !important;
	color: hsl(var(--paper)) !important;
	margin: 0 0 4px !important;
}
.aos-chat-header__sub {
	font-size: 12.5px !important;
	color: hsl(var(--paper) / 0.78) !important;
	font-family: "Instrument Sans", system-ui, sans-serif !important;
	letter-spacing: -0.005em;
}
.aos-chat-header__close {
	background: hsl(var(--paper) / 0.08) !important;
	color: hsl(var(--paper) / 0.85) !important;
	border-radius: 10px !important;
	width: 32px !important;
	height: 32px !important;
	transition: background 180ms var(--aos-ease) !important;
}
.aos-chat-header__close:hover {
	background: hsl(var(--aos-yellow) / 0.2) !important;
	color: var(--aos-yellow-px) !important;
}

/* Message bubbles */
.aos-chat-message--assistant .aos-chat-message__body,
.aos-chat-message.is-assistant .aos-chat-message__body,
.aos-chat-message[data-role="assistant"] .aos-chat-message__body,
.aos-chat-messages .aos-chat-message.assistant .aos-chat-message__body {
	background: #fff !important;
	border: 1px solid #EDEEF1 !important;
	color: var(--aos-navy-px) !important;
	font-family: "Instrument Sans", Georgia, serif !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	border-radius: 4px 16px 16px 16px !important;
}
.aos-chat-message--user .aos-chat-message__body,
.aos-chat-message.is-user .aos-chat-message__body,
.aos-chat-message[data-role="user"] .aos-chat-message__body {
	background: var(--aos-navy-px) !important;
	color: #fff !important;
	border-radius: 16px 4px 16px 16px !important;
	font-family: "Instrument Sans", system-ui, sans-serif !important;
	font-size: 14.5px !important;
	line-height: 1.5 !important;
}

/* Suggested prompt pills */
.aos-chat-suggestions button,
.aos-chat-suggestion,
.aos-chat-prompts button {
	background: var(--aos-yellow-soft-px) !important;
	border: 1px solid #F3D773 !important;
	color: var(--aos-navy-px) !important;
	border-radius: 999px !important;
	padding: 8px 14px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	font-family: "Instrument Sans", system-ui, sans-serif !important;
	transition: all 180ms var(--aos-ease) !important;
}
.aos-chat-suggestions button:hover,
.aos-chat-prompts button:hover,
.aos-chat-suggestion:hover {
	background: var(--aos-yellow-px) !important;
	border-color: var(--aos-yellow-deep-px) !important;
	transform: translateY(-1px);
}

/* Input */
.aos-chat-input,
.aos-chat-composer {
	border-top: 1px solid #EDEEF1 !important;
	padding: 14px 16px !important;
	background: #fff !important;
}
.aos-chat-input textarea,
.aos-chat-input input[type="text"],
.aos-chat-composer textarea {
	font-family: "Instrument Sans", system-ui, sans-serif !important;
	font-size: 14px !important;
	border: 1px solid #E2E4E9 !important;
	border-radius: 12px !important;
	padding: 10px 14px !important;
}
.aos-chat-send,
.aos-chat-composer button[type="submit"] {
	background: var(--aos-yellow-px) !important;
	color: var(--aos-navy-px) !important;
	border: 0 !important;
	border-radius: 50% !important;
	width: 36px !important;
	height: 36px !important;
	box-shadow: 0 2px 8px rgba(46, 158, 158, 0.4) !important;
	display: grid !important;
	place-items: center !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   PATTERN INSERTER MODAL polish
   ══════════════════════════════════════════════════════════════════════════ */

/* Branded + button */
.aos-ins__trigger,
button.aos-ins__trigger {
	background: var(--aos-navy-px) !important;
	color: var(--aos-yellow-px) !important;
	border: 0 !important;
	border-radius: 10px !important;
	padding: 8px 14px !important;
	font-family: "Instrument Sans", system-ui, sans-serif !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	box-shadow: 0 2px 6px rgba(28, 30, 36, 0.2) !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
}
.aos-ins__trigger:hover {
	background: var(--aos-navy-soft-px) !important;
}

/* Pattern card thumbnails — colored by category */
.aos-ins__card {
	box-shadow: var(--aos-shadow-card) !important;
	transition: transform 220ms var(--aos-ease), box-shadow 220ms var(--aos-ease) !important;
}
.aos-ins__card:hover {
	transform: translateY(-3px) !important;
	box-shadow: var(--aos-shadow-card-hover) !important;
}
.aos-ins__card[data-category="aos-hero"] .aos-ins__thumb,
.aos-ins__thumb--hero {
	background: linear-gradient(135deg, var(--aos-navy-px), var(--aos-blue-px)) !important;
}
.aos-ins__card[data-category="aos-section"] .aos-ins__thumb,
.aos-ins__thumb--section {
	background: linear-gradient(135deg, var(--aos-cream-alt-px), var(--aos-cream-px)) !important;
	color: var(--aos-navy-px) !important;
}
.aos-ins__card[data-category="aos-card"] .aos-ins__thumb,
.aos-ins__thumb--card {
	background: linear-gradient(135deg, var(--aos-blue-px), var(--aos-navy-px)) !important;
}
.aos-ins__card[data-category="aos-callout"] .aos-ins__thumb,
.aos-ins__thumb--callout {
	background: linear-gradient(135deg, var(--aos-yellow-px), var(--aos-yellow-deep-px)) !important;
	color: var(--aos-navy-px) !important;
}
.aos-ins__card[data-category="aos-form"] .aos-ins__thumb,
.aos-ins__thumb--form {
	background: linear-gradient(135deg, #9E2A52, #C2446B) !important;
}
.aos-ins__card[data-category="aos-media"] .aos-ins__thumb,
.aos-ins__thumb--media {
	background: linear-gradient(135deg, #333640, #1F7A7A) !important;
}
.aos-ins__card[data-category="aos-footer"] .aos-ins__thumb,
.aos-ins__thumb--footer {
	background: var(--aos-navy-px) !important;
}

/* Modal + backdrop */
.aos-ins__backdrop,
.components-modal__screen-overlay:has(.aos-ins-modal) {
	background: rgba(28, 30, 36, 0.48) !important;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.aos-ins-modal,
.components-modal__frame:has(.aos-ins-modal) {
	border-radius: 20px !important;
	box-shadow: var(--aos-shadow-modal) !important;
	background: var(--aos-cream-px) !important;
	border: 0 !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   ADMIN SHELL — last-mile details
   ══════════════════════════════════════════════════════════════════════════ */

/* Subtle scroll-shadow on the wpcontent area */
#wpbody-content {
	scrollbar-width: thin;
	scrollbar-color: #B7C1CD transparent;
}

/* Focus ring upgrade */
:where(#wpbody input, #wpbody textarea, #wpbody select):focus-visible,
:where(.aos-hub, .aos-wiz, .aos-mig) a:focus-visible,
:where(.aos-hub, .aos-wiz, .aos-mig) button:focus-visible {
	outline: 2px solid var(--aos-blue-px) !important;
	outline-offset: 3px !important;
	border-radius: 6px !important;
}

/* Smooth page-load entrance for hub + wizard + migration */
.aos-hub, .aos-wiz, [id="aos-ai-wizard-root"], [id="aos-migration-root"] {
	animation: aos-page-in 420ms var(--aos-ease) both;
}
@keyframes aos-page-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.aos-hub, .aos-wiz, [id="aos-ai-wizard-root"], [id="aos-migration-root"] {
		animation: none;
	}
}


/* ══════════════════════════════════════════════════════════════════════════
   LOGIN page polish (refine the double-logo layout)
   ══════════════════════════════════════════════════════════════════════════ */

body.login h1 a {
	font-size: 38px !important;
	line-height: 1.08 !important;
	margin-bottom: 24px !important;
	font-variation-settings: "opsz" 72 !important;
}
body.login form {
	border-radius: 20px !important;
	padding: 40px 36px 32px !important;
	box-shadow: 0 40px 96px rgba(28, 30, 36, 0.28),
	            0 16px 32px rgba(28, 30, 36, 0.18) !important;
}
body.login #login {
	padding-top: 8vh !important;
	width: 400px !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   Global: respect reduced motion
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   COHESION PASS — universal AOS components every custom admin page can use
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Card primitive ──────────────────────────────────────────────── */
.aos-card {
	background: var(--aos-card-px, #fff);
	border: 1px solid var(--aos-border, #EDEEF1);
	border-radius: 16px;
	padding: 22px 24px;
	box-shadow: var(--aos-shadow-card);
	transition:
		transform 240ms var(--aos-ease, cubic-bezier(0.22, 1, 0.36, 1)),
		box-shadow 240ms var(--aos-ease, cubic-bezier(0.22, 1, 0.36, 1)),
		border-color 240ms var(--aos-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.aos-card--lift:hover,
.aos-card[data-interactive]:hover {
	transform: translateY(-2px);
	border-color: var(--aos-fg-muted, #4A4F59);
	box-shadow: var(--aos-shadow-card-hover);
}
.aos-card__title,
.aos-card h3 {
	font-family: "Instrument Sans", Georgia, serif;
	font-weight: 400;
	font-size: 17px;
	color: var(--aos-navy-px, #1C1E24);
	margin: 0 0 4px;
	letter-spacing: -0.005em;
}
.aos-card__sub,
.aos-card p {
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.55;
	color: var(--aos-fg-muted, #4A4F59);
	margin: 0;
}

/* ── Pill primitive (status, tag, badge) ─────────────────────────── */
.aos-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: var(--aos-cream-alt-px, #F3F4F5);
	color: var(--aos-navy-px, #1C1E24);
	border: 1px solid var(--aos-border, #EDEEF1);
}
.aos-pill--success {
	background: rgba(21, 128, 61, 0.08);
	color: #15803d;
	border-color: rgba(21, 128, 61, 0.32);
}
.aos-pill--warn {
	background: rgba(46, 158, 158, 0.14);
	color: #8a6700;
	border-color: rgba(229, 180, 0, 0.4);
}
.aos-pill--danger {
	background: rgba(185, 28, 28, 0.06);
	color: #b91c1c;
	border-color: rgba(185, 28, 28, 0.3);
}
.aos-pill--ai {
	background: linear-gradient(135deg, rgba(46, 158, 158, 0.18), rgba(31, 122, 122, 0.10));
	color: var(--aos-navy-px, #1C1E24);
	border-color: var(--aos-yellow-deep-px, #1F7A7A);
}
.aos-pill--ai::before {
	content: "✨";
	font-size: 10px;
	opacity: 0.9;
}
.aos-pill__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 2px currentColor;
	opacity: 0.6;
}

/* ── Section heading primitive ───────────────────────────────────── */
.aos-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--aos-border, #EDEEF1);
}
.aos-section-head h2 {
	font-family: "Instrument Sans", Georgia, serif;
	font-weight: 400;
	font-size: 22px;
	letter-spacing: -0.014em;
	color: var(--aos-navy-px, #1C1E24);
	margin: 0;
	font-variation-settings: "opsz" 28;
}
.aos-section-head .aos-section-head__hint {
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 12.5px;
	color: var(--aos-fg-muted, #4A4F59);
}

/* ── Eyebrow label (over a heading) ──────────────────────────────────────
 * Canonical .aos-eyebrow lives in
 * wp-content/themes/aos-theme/assets/css/aos-components.css (Style A on light).
 * The duplicate rule that previously sat here set font-size: 11px and clashed
 * with the canonical 10px, producing visibly inconsistent eyebrow sizing on
 * any page that loaded both stylesheets. Removed in favor of the canonical.
 * ───────────────────────────────────────────────────────────────────── */

/* ── KPI / stat primitive ────────────────────────────────────────── */
.aos-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	background: var(--aos-cream-px, #FAFAFA);
	border: 1px solid var(--aos-border, #EDEEF1);
	border-radius: 12px;
}
.aos-stat__value {
	font-family: "Instrument Sans", Georgia, serif;
	font-weight: 350;
	font-size: 26px;
	letter-spacing: -0.018em;
	color: var(--aos-navy-px, #1C1E24);
	font-variation-settings: "opsz" 32;
	line-height: 1.05;
}
.aos-stat__label {
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--aos-fg-muted, #4A4F59);
}
.aos-stat__delta {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11.5px;
	color: #15803d;
}
.aos-stat__delta--down { color: #b91c1c; }

/* ── Skeleton shimmer (for loading lists/cards) ──────────────────── */
@keyframes aos-shimmer {
	0%   { background-position: -200% 0; }
	100% { background-position:  200% 0; }
}
.aos-skeleton {
	background:
		linear-gradient(90deg, var(--aos-cream-alt-px, #F3F4F5) 0%, #fff 50%, var(--aos-cream-alt-px, #F3F4F5) 100%);
	background-size: 200% 100%;
	border-radius: 8px;
	animation: aos-shimmer 1.6s linear infinite;
}
.aos-skeleton--text   { height: 14px; margin: 4px 0; }
.aos-skeleton--title  { height: 22px; margin: 6px 0; }
.aos-skeleton--avatar { width: 36px; height: 36px; border-radius: 50%; }
.aos-skeleton--card   { height: 120px; }

/* ── Confirm dialog (small inline yes/no) ────────────────────────── */
.aos-confirm {
	background: linear-gradient(180deg, var(--aos-cream-px) 0%, #fff 100%);
	border: 1px solid var(--aos-yellow-deep-px, #1F7A7A);
	border-radius: 12px;
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 14px;
	box-shadow: var(--aos-shadow-card);
}
.aos-confirm__msg {
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 13.5px;
	color: var(--aos-navy-px, #1C1E24);
	flex: 1;
}
.aos-confirm__actions {
	display: flex; gap: 8px;
}

/* ── Premium scrollbars (inside AOS custom admin pages) ──────────── */
.aos-scroll,
.aos-card,
.aos-hub__plus,
.aos-hub__heroes--triple,
.toplevel_page_aos-ai .wrap,
.toplevel_page_aos-design .wrap,
.toplevel_page_aos-library .wrap,
.toplevel_page_aos-marketing .wrap,
.toplevel_page_aos-quality .wrap {
	scrollbar-width: thin;
	scrollbar-color: var(--aos-border, #EDEEF1) transparent;
}
.aos-scroll::-webkit-scrollbar,
.toplevel_page_aos-ai .wrap::-webkit-scrollbar { width: 8px; height: 8px; }
.aos-scroll::-webkit-scrollbar-track,
.toplevel_page_aos-ai .wrap::-webkit-scrollbar-track { background: transparent; }
.aos-scroll::-webkit-scrollbar-thumb,
.toplevel_page_aos-ai .wrap::-webkit-scrollbar-thumb {
	background: var(--aos-border, #EDEEF1);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: padding-box;
}
.aos-scroll::-webkit-scrollbar-thumb:hover {
	background: var(--aos-fg-muted, #4A4F59);
	background-clip: padding-box;
}

/* ── Branded textarea / large input (for paste areas) ────────────── */
.aos-textarea {
	background: var(--aos-cream-px, #FAFAFA) !important;
	border: 1px solid var(--aos-border, #EDEEF1) !important;
	border-radius: 12px !important;
	font-family: "Instrument Sans", system-ui, sans-serif !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	padding: 14px 16px !important;
	box-shadow: var(--aos-shadow-card);
	min-height: 140px;
	resize: vertical;
}
.aos-textarea:focus {
	outline: none !important;
	background: #fff !important;
	border-color: var(--aos-yellow-deep-px, #1F7A7A) !important;
	box-shadow:
		0 0 0 3px rgba(46, 158, 158, 0.32),
		var(--aos-shadow-card) !important;
}

/* ── Brand image upload zone ─────────────────────────────────────── */
.aos-upload {
	border: 2px dashed var(--aos-border, #EDEEF1);
	border-radius: 14px;
	padding: 36px 24px;
	text-align: center;
	background: var(--aos-cream-px, #FAFAFA);
	color: var(--aos-fg-muted, #4A4F59);
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 13.5px;
	transition: border-color 200ms ease, background 200ms ease;
}
.aos-upload:hover,
.aos-upload--hover {
	border-color: var(--aos-yellow-deep-px, #1F7A7A);
	background: rgba(46, 158, 158, 0.06);
	color: var(--aos-navy-px, #1C1E24);
}

/* ── Color swatch row (used in design-language preview) ──────────── */
.aos-swatch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px 4px 4px;
	background: #fff;
	border: 1px solid var(--aos-border, #EDEEF1);
	border-radius: 999px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11.5px;
	color: var(--aos-navy-px, #1C1E24);
}
.aos-swatch__dot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.06);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* ── Quote/blockquote inside admin pages ─────────────────────────── */
.aos-quote,
.wrap blockquote {
	font-family: "Instrument Sans", Georgia, serif;
	font-style: italic;
	font-weight: 350;
	font-size: 17px;
	line-height: 1.5;
	color: var(--aos-navy-px, #1C1E24);
	border-left: 3px solid var(--aos-yellow-deep-px, #1F7A7A);
	padding: 4px 0 4px 18px;
	margin: 18px 0;
	max-width: 60ch;
}
.aos-quote cite,
.wrap blockquote cite {
	display: block;
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--aos-fg-muted, #4A4F59);
	margin-top: 10px;
}

/* ── Brand spinner with label ────────────────────────────────────── */
.aos-loading {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	background: var(--aos-cream-px, #FAFAFA);
	border: 1px solid var(--aos-border, #EDEEF1);
	border-radius: 999px;
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 12.5px;
	color: var(--aos-fg-muted, #4A4F59);
}
.aos-loading__spinner {
	width: 14px;
	height: 14px;
	border: 2px solid var(--aos-border, #EDEEF1);
	border-top-color: var(--aos-yellow-deep-px, #1F7A7A);
	border-radius: 50%;
	animation: aos-spin 700ms linear infinite;
}

/* ── Section divider with optional label ─────────────────────────── */
.aos-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 24px 0;
}
.aos-divider::before,
.aos-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--aos-border, #EDEEF1);
}
.aos-divider__label {
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--aos-fg-muted, #4A4F59);
}

/* ── Floating "What's new" badge (used near AI feature labels) ──── */
.aos-new {
	display: inline-flex;
	align-items: center;
	padding: 1px 7px;
	background: var(--aos-yellow);
	color: var(--aos-navy-deep);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	border-radius: 4px;
	margin-left: 8px;
	vertical-align: 0.18em;
}

/* ── AOS AI badges that appear on shared module pages ─────────── */
.aos-ai-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px 3px 8px;
	background: linear-gradient(135deg, rgba(46, 158, 158, 0.12), rgba(31, 122, 122, 0.08));
	color: var(--aos-navy-px, #1C1E24);
	border: 1px solid rgba(229, 180, 0, 0.35);
	border-radius: 999px;
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
}
.aos-ai-badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--aos-yellow-deep);
	box-shadow: 0 0 0 2px rgba(229, 180, 0, 0.32);
}

/* ── Tabs primitive (.aos-tabs / .aos-tab) ─────────────────────── */
.aos-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid var(--aos-border, #EDEEF1);
	margin-bottom: 22px;
}
.aos-tab {
	background: transparent;
	border: 0;
	color: var(--aos-fg-muted, #4A4F59);
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.005em;
	padding: 10px 16px;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	cursor: pointer;
	transition: color 140ms ease, border-color 140ms ease;
}
.aos-tab:hover { color: var(--aos-navy-px, #1C1E24); }
.aos-tab--active,
.aos-tab[aria-selected="true"] {
	color: var(--aos-navy-px, #1C1E24);
	border-bottom-color: var(--aos-yellow-deep-px, #1F7A7A);
}

/* ── Shared "info row" (label + value horizontal) ──────────────── */
.aos-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--aos-border, #EDEEF1);
}
.aos-row:last-child { border-bottom: 0; }
.aos-row__label {
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--aos-fg-muted, #4A4F59);
}
.aos-row__value {
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 13.5px;
	color: var(--aos-navy-px, #1C1E24);
}

/* ── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.aos-card,
	.aos-card--lift:hover,
	.aos-skeleton,
	.aos-loading__spinner {
		transition: none !important;
		animation: none !important;
	}
}

/* ── AI feature page (shared by all 10 feature settings screens) ── */
.aos-ai-feature__head {
	margin: 18px 0 24px;
	max-width: 72ch;
}
.aos-ai-feature__head h1 {
	font-family: "Instrument Sans", Georgia, serif;
	font-weight: 350;
	font-size: clamp(28px, 2.8vw, 38px);
	letter-spacing: -0.022em;
	color: var(--aos-navy-px, #1C1E24);
	margin: 0 0 8px;
	font-variation-settings: "opsz" 36;
	line-height: 1.08;
}
.aos-ai-feature__lede {
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	color: var(--aos-fg-muted, #4A4F59);
	margin: 0;
	max-width: 64ch;
}
.aos-ai-feature__bar {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 14px 18px;
	background: linear-gradient(180deg, #fff 0%, var(--aos-cream-px, #FAFAFA) 100%);
	border: 1px solid var(--aos-border, #EDEEF1);
	border-radius: 14px;
	box-shadow: var(--aos-shadow-card);
	margin: 0 0 24px;
}
.aos-ai-feature__bar-msg {
	flex: 1;
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 13.5px;
	color: var(--aos-fg-muted, #4A4F59);
	min-width: 200px;
}
.aos-ai-feature__bar-link {
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--aos-navy-px, #1C1E24);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 140ms ease;
	white-space: nowrap;
}
.aos-ai-feature__bar-link:hover {
	border-bottom-color: var(--aos-yellow-deep-px, #1F7A7A);
}
.aos-ai-feature__placeholder {
	max-width: 64ch;
}

/* ── .aos-disclosure (premium <details>/<summary>) ─────────────── */
.aos-disclosure {
	background: #fff;
	border: 1px solid var(--aos-border, #EDEEF1);
	border-radius: 14px;
	margin: 14px 0;
	box-shadow: var(--aos-shadow-card);
	transition:
		border-color 200ms var(--aos-ease, cubic-bezier(0.22, 1, 0.36, 1)),
		box-shadow 200ms var(--aos-ease, cubic-bezier(0.22, 1, 0.36, 1)),
		transform 240ms var(--aos-ease, cubic-bezier(0.22, 1, 0.36, 1));
	overflow: hidden;
}
.aos-disclosure:hover {
	border-color: var(--aos-fg-muted, #4A4F59);
	box-shadow: var(--aos-shadow-card-hover);
}
.aos-disclosure[open] {
	border-color: var(--aos-yellow-deep-px, #1F7A7A);
	box-shadow:
		0 1px 0 rgba(229, 180, 0, 0.16),
		0 8px 24px rgba(46, 158, 158, 0.10);
}
.aos-disclosure__summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.aos-disclosure__summary::-webkit-details-marker { display: none; }
.aos-disclosure__chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--aos-cream-alt-px, #F3F4F5);
	color: var(--aos-fg-muted, #4A4F59);
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	transition: transform 220ms var(--aos-ease, cubic-bezier(0.22, 1, 0.36, 1)), background 200ms ease, color 200ms ease;
}
.aos-disclosure[open] .aos-disclosure__chevron {
	transform: rotate(90deg);
	background: var(--aos-yellow-deep-px, #1F7A7A);
	color: var(--aos-navy-deep-px, #141519);
}
.aos-disclosure__label {
	font-family: "Instrument Sans", Georgia, serif;
	font-weight: 400;
	font-size: 16px;
	color: var(--aos-navy-px, #1C1E24);
	letter-spacing: -0.005em;
	flex: 1;
}
.aos-disclosure__status {
	margin-left: auto;
}
.aos-disclosure__hint {
	padding: 0 20px 8px 54px;
	color: var(--aos-fg-muted, #4A4F59);
	font-size: 13px;
	line-height: 1.55;
	margin: 0;
}
.aos-disclosure__hint strong {
	color: var(--aos-navy-px, #1C1E24);
	font-weight: 600;
}
.aos-disclosure__field-label {
	display: block;
	padding: 12px 20px 6px 54px;
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aos-fg-muted, #4A4F59);
}
.aos-disclosure .aos-textarea {
	margin: 0 20px 18px 54px !important;
	width: calc(100% - 74px);
}
.aos-textarea--code {
	font-family: "JetBrains Mono", ui-monospace, monospace !important;
	font-size: 13px !important;
	line-height: 1.55 !important;
}

/* ── .aos-key (API key card row) ─────────────────────────────── */
.aos-key {
	margin: 14px 0;
	padding: 18px 22px;
}
.aos-key__summary {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	list-style: none;
}
.aos-key__summary::-webkit-details-marker { display: none; }
.aos-key__label {
	font-family: "Instrument Sans", Georgia, serif;
	font-weight: 400;
	font-size: 17px;
	color: var(--aos-navy-px, #1C1E24);
	letter-spacing: -0.005em;
}
.aos-key__src {
	margin-left: auto;
}
.aos-key[open] {
	border-color: var(--aos-yellow-deep-px, #1F7A7A) !important;
	box-shadow:
		0 1px 0 rgba(229, 180, 0, 0.16),
		0 8px 24px rgba(46, 158, 158, 0.10) !important;
}
.aos-key input[type="password"],
.aos-key input[type="text"] {
	font-family: "JetBrains Mono", ui-monospace, monospace !important;
	font-size: 13px !important;
}

/* ── Toast notification system (pop-up confirmations) ─────────── */
.aos-toast-region {
	position: fixed;
	right: 20px;
	bottom: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 100000;
	pointer-events: none;
}
.aos-toast {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 240px;
	max-width: 360px;
	padding: 12px 18px;
	background: var(--aos-navy-deep-px, #141519);
	color: #fff;
	border-radius: 12px;
	box-shadow: var(--aos-shadow-modal);
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 500;
	pointer-events: auto;
	transform: translateY(8px);
	opacity: 0;
	transition: transform 260ms var(--aos-ease, cubic-bezier(0.22, 1, 0.36, 1)),
		opacity 260ms var(--aos-ease, cubic-bezier(0.22, 1, 0.36, 1));
	border-left: 3px solid var(--aos-yellow);
}
.aos-toast.is-visible {
	transform: translateY(0);
	opacity: 1;
}
.aos-toast--success { border-left-color: #15803d; }
.aos-toast--warn    { border-left-color: var(--aos-yellow-deep-px, #1F7A7A); }
.aos-toast--error   { border-left-color: #b91c1c; }
.aos-toast__icon {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	border-radius: 50%;
	background: rgba(46, 158, 158, 0.18);
	display: grid;
	place-items: center;
	color: var(--aos-yellow);
	font-size: 12px;
}
.aos-toast--success .aos-toast__icon { background: rgba(21, 128, 61, 0.2); color: #4ade80; }
.aos-toast--error   .aos-toast__icon { background: rgba(185, 28, 28, 0.18); color: #fca5a5; }
.aos-toast__msg { flex: 1; }
.aos-toast__close {
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	padding: 0;
	font-size: 16px;
	line-height: 1;
	transition: color 140ms ease;
}
.aos-toast__close:hover { color: #fff; }

/* ── Copy-to-clipboard chrome ──────────────────────────────────── */
.aos-copy-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	background: var(--aos-cream-px, #FAFAFA);
	border: 1px solid var(--aos-border, #EDEEF1);
	border-radius: 999px;
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--aos-navy-px, #1C1E24);
	cursor: pointer;
	transition: background 140ms ease, transform 140ms ease, border-color 140ms ease;
}
.aos-copy-btn:hover {
	background: #fff;
	border-color: var(--aos-fg-muted, #4A4F59);
	transform: translateY(-1px);
}
.aos-copy-btn.is-copied {
	background: rgba(21, 128, 61, 0.08);
	color: #15803d;
	border-color: rgba(21, 128, 61, 0.32);
}
.aos-copy-btn::before {
	content: "⎘";
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 13px;
}
.aos-copy-btn.is-copied::before {
	content: "✓";
}