/* =====================================================================
   RESET — neutralizes theme CSS that commonly clashes with plugin markup
   (arrow icons on headings, list bullets, button chrome, img scaling…)
   ===================================================================== */
.aics-wrap,
.aics-wrap *,
.aics-wrap *::before,
.aics-wrap *::after {
	box-sizing: border-box !important;
	margin: 0;
	padding: 0;
}
.aics-wrap h1, .aics-wrap h2, .aics-wrap h3, .aics-wrap h4, .aics-wrap h5, .aics-wrap h6,
.aics-wrap [role="heading"] {
	all: unset !important;
	display: block !important;
	box-sizing: border-box !important;
}
.aics-wrap [role="heading"]::before,
.aics-wrap [role="heading"]::after,
.aics-wrap h1::before, .aics-wrap h1::after,
.aics-wrap h2::before, .aics-wrap h2::after,
.aics-wrap h3::before, .aics-wrap h3::after,
.aics-wrap h4::before, .aics-wrap h4::after {
	content: none !important;
	display: none !important;
}
.aics-wrap ul, .aics-wrap ol { list-style: none !important; }
.aics-wrap button {
	all: unset !important;
	box-sizing: border-box !important;
	cursor: pointer;
}
.aics-wrap a { text-decoration: none; }
.aics-wrap img, .aics-wrap svg {
	display: block !important;
	max-width: none !important;
	border: none !important;
	vertical-align: top;
}

/* ===================================================================== */

.aics-wrap {
	--aics-page-bg: #0b0f0d;
	--aics-panel-start: #173a2c;
	--aics-panel-end: #0e2a20;
	--aics-text: #dcefe6;
	--aics-muted: #9db8ac;
	--aics-accent: #d7e97a;
	--aics-pill-bg: #1c4534;
	--aics-pill-border: #2f5e49;
	--aics-pill-text: #eaf5ee;
	--aics-divider: #2b4d3d;
	--aics-mobile-tab-bg: #12281f;
	--aics-mobile-tab-active: #d7e97a;
	--aics-mobile-tab-active-text: #12281f;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background: var(--aics-page-bg);
	padding: 32px;
	border-radius: 16px;
	line-height: normal;
}

/* ============ DESKTOP ============ */
.aics-desktop {
	display: flex !important;
	gap: 48px;
	align-items: flex-start;
}
.aics-desktop-panel {
	flex: 0 0 380px;
	background: linear-gradient(160deg, var(--aics-panel-start), var(--aics-panel-end));
	border-radius: 24px;
	padding: 12px;
}
.aics-term-list { display: flex; flex-direction: column; }
.aics-term-row {
	padding: 18px 20px;
	border-bottom: 1px solid var(--aics-divider);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 4px;
	transition: background .15s ease;
	border-radius: 10px;
}
.aics-term-row:last-child { border-bottom: none; }
.aics-term-row:hover { background: rgba(255,255,255,0.04); }
.aics-term-label {
	display: block;
	font-size: 13px;
	color: var(--aics-muted);
}
.aics-term-title {
	display: block;
	font-size: 17px;
	font-weight: 500;
	color: var(--aics-text);
	line-height: 1.35;
}
.aics-term-row.is-active .aics-term-label,
.aics-term-row.is-active .aics-term-title {
	color: var(--aics-accent);
	font-weight: 700;
}

.aics-desktop-content { flex: 1; min-width: 0; }
.aics-content-panel { display: none !important; }
.aics-content-panel.is-active { display: block !important; }
.aics-panel-title {
	color: var(--aics-text);
	font-size: 20px;
	margin: 0 0 20px !important;
}
.aics-group { margin-bottom: 28px !important; }
.aics-group-label {
	display: block;
	color: var(--aics-muted);
	font-size: 15px;
	margin-bottom: 14px !important;
}
.aics-pills { display: flex; flex-wrap: wrap; gap: 14px; }
.aics-pill {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	background: var(--aics-pill-bg);
	border: 1px solid var(--aics-pill-border) !important;
	color: var(--aics-pill-text);
	padding: 10px 20px !important;
	border-radius: 999px;
	font-size: 15px;
	white-space: nowrap;
}
.aics-pill-icon {
	width: 18px !important;
	height: 18px !important;
	object-fit: contain;
	flex-shrink: 0;
}

.aics-techniques {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
}
.aics-technique {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 160px;
}
.aics-technique-icon {
	width: 22px !important;
	height: 22px !important;
	color: var(--aics-accent);
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}
.aics-technique-icon img,
.aics-technique-icon svg {
	width: 20px !important;
	height: 20px !important;
	max-height: 20px !important;
	object-fit: contain;
}
.aics-technique-label {
	display: block;
	color: var(--aics-text);
	font-size: 15px;
	line-height: 1.35;
}

/* ============ MOBILE ============ */
.aics-mobile { display: none !important; }
.aics-mobile-heading {
	color: var(--aics-text);
	font-weight: 400;
	font-size: 19px;
	margin: 0 0 16px !important;
}
.aics-mobile-heading strong { font-weight: 700; }

.aics-mobile-tabs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 6px !important;
	margin-bottom: 16px !important;
	scrollbar-width: none;
}
.aics-mobile-tabs::-webkit-scrollbar { display: none; }
.aics-mobile-tab {
	flex: 0 0 auto;
	background: var(--aics-mobile-tab-bg);
	color: var(--aics-muted);
	padding: 8px 16px !important;
	border-radius: 999px;
	font-size: 14px;
}
.aics-mobile-tab.is-active {
	background: var(--aics-mobile-tab-active);
	color: var(--aics-mobile-tab-active-text);
	font-weight: 600;
}

.aics-mobile-content {
	background: linear-gradient(160deg, var(--aics-panel-start), var(--aics-panel-end));
	border-radius: 20px;
	padding: 20px !important;
}
.aics-mobile-content .aics-group-label {
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: .06em;
	margin-bottom: 12px !important;
}
.aics-mobile-content .aics-pills { gap: 10px; }
.aics-mobile-content .aics-pill { padding: 8px 14px !important; font-size: 13px; }
.aics-mobile-content .aics-group { margin-bottom: 20px !important; padding-bottom: 20px !important; border-bottom: 1px solid var(--aics-divider); }
.aics-mobile-content .aics-group:last-child { border-bottom: none; margin-bottom: 0 !important; padding-bottom: 0 !important; }
.aics-mobile-content .aics-techniques { gap: 16px; }
.aics-mobile-content .aics-technique {
	flex: 0 0 calc(50% - 8px);
	max-width: none;
}

.aics-mobile-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 14px !important;
}
.aics-dot {
	width: 6px !important;
	height: 6px !important;
	border-radius: 50%;
	background: var(--aics-divider);
}
.aics-dot.is-active { background: var(--aics-accent); width: 18px !important; border-radius: 4px; }

@media (max-width: 880px) {
	.aics-desktop { display: none !important; }
	.aics-mobile { display: block !important; }
	.aics-wrap { padding: 20px; border-radius: 0; background: transparent; }
}