/* Tool detail dialog — glassmorphism, theme-aware (blue accent family) */
#tool-detail-overlay {
	--td-overlay-bg: rgba(15, 23, 42, 0.55);
	--td-modal-bg: rgba(255, 255, 255, 0.72);
	--td-modal-bg-solid: rgba(248, 250, 252, 0.95);
	--td-card-inner: rgba(255, 255, 255, 0.45);
	--td-text: #0f172a;
	--td-muted: #475569;
	--td-border: rgba(3, 105, 161, 0.22);
	--td-glow: rgba(14, 165, 233, 0.35);
	--td-accent: #0369a1;
	--td-accent-soft: #0284c7;
	--td-code-bg: rgba(15, 23, 42, 0.06);
	--td-terminal-bg: rgba(15, 23, 42, 0.85);
	--td-terminal-text: #e2e8f0;
	--td-shadow: 0 24px 64px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
	--td-close-hover: rgba(3, 105, 161, 0.12);
	--td-hl-kw: #0369a1;
	--td-hl-str: #b45309;
	--td-hl-comment: #64748b;
	--td-hl-sys: #0e749e;
	--td-hl-num: #c2410c;
	--td-hl-type: #0f766e;
	--td-hl-interp: #0369a1;
}

body.dark #tool-detail-overlay {
	--td-overlay-bg: rgba(2, 6, 23, 0.75);
	--td-modal-bg: rgba(30, 41, 59, 0.55);
	--td-modal-bg-solid: rgba(15, 23, 42, 0.92);
	--td-card-inner: rgba(51, 65, 85, 0.4);
	--td-text: #f1f5f9;
	--td-muted: #94a3b8;
	--td-border: rgba(100, 181, 246, 0.28);
	--td-glow: rgba(100, 181, 246, 0.45);
	--td-accent: #64b5f6;
	--td-accent-soft: #90caf9;
	--td-code-bg: rgba(2, 6, 23, 0.65);
	--td-terminal-bg: rgba(2, 6, 23, 0.92);
	--td-terminal-text: #cbd5e1;
	--td-shadow:
		0 24px 64px rgba(0, 0, 0, 0.45),
		0 0 0 1px rgba(100, 181, 246, 0.15) inset,
		0 0 80px -20px var(--td-glow);
	--td-close-hover: rgba(100, 181, 246, 0.15);
	--td-hl-kw: #90caf9;
	--td-hl-str: #fbbf24;
	--td-hl-comment: #94a3b8;
	--td-hl-sys: #7dd3fc;
	--td-hl-num: #fdba74;
	--td-hl-type: #5eead4;
	--td-hl-interp: #90caf9;
}

.tool-detail-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
		max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
	box-sizing: border-box;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.28s ease;
}

.tool-detail-overlay.tool-detail-overlay--open {
	pointer-events: auto;
	opacity: 1;
}

.tool-detail-backdrop {
	position: absolute;
	inset: 0;
	background: var(--td-overlay-bg);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.tool-detail-dialog {
	position: relative;
	width: 100%;
	max-width: 760px;
	max-height: min(88vh, 900px);
	display: flex;
	flex-direction: column;
	background: var(--td-modal-bg);
	backdrop-filter: blur(20px) saturate(1.35);
	-webkit-backdrop-filter: blur(20px) saturate(1.35);
	border: 1px solid var(--td-border);
	border-radius: 20px;
	box-shadow: var(--td-shadow);
	color: var(--td-text);
	transform: scale(0.96);
	opacity: 0;
	transition:
		transform 0.32s cubic-bezier(0.34, 1.2, 0.64, 1),
		opacity 0.28s ease;
	overflow: hidden;
	z-index: 1;
}

.tool-detail-overlay.tool-detail-overlay--open .tool-detail-dialog {
	transform: scale(1);
	opacity: 1;
}

.tool-detail-header {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 22px 22px 18px;
	border-bottom: 1px solid var(--td-border);
	background: linear-gradient(135deg, var(--td-card-inner), transparent);
	box-shadow: 0 0 40px -12px var(--td-glow);
}

.tool-detail-logo-wrap {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--td-modal-bg-solid);
	border: 1px solid var(--td-border);
	box-shadow: 0 4px 20px -8px var(--td-glow);
	overflow: hidden;
}

.tool-detail-logo-wrap .tool-logo,
.tool-detail-logo-wrap .tool-logo svg,
.tool-detail-logo-wrap .tool-logo img {
	width: 52px;
	height: 52px;
	max-width: 52px;
	max-height: 52px;
	object-fit: contain;
}

.tool-detail-heading {
	flex: 1;
	min-width: 0;
}

.tool-detail-title {
	margin: 0 0 6px;
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--td-accent);
	line-height: 1.2;
}

.tool-detail-subtitle {
	margin: 0;
	font-size: 0.95rem;
	color: var(--td-muted);
	line-height: 1.45;
}

.tool-detail-close {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	border: 1px solid var(--td-border);
	background: var(--td-card-inner);
	color: var(--td-accent);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
		background 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.15s ease;
}

.tool-detail-close:hover {
	background: var(--td-close-hover);
	box-shadow: 0 0 24px -6px var(--td-glow);
}

.tool-detail-close:focus-visible {
	outline: 2px solid var(--td-accent-soft);
	outline-offset: 2px;
}

.tool-detail-tabs-wrap {
	padding: 12px 16px 0;
	border-bottom: 1px solid var(--td-border);
	background: var(--td-modal-bg-solid);
}

.tool-detail-tablist {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--td-accent) transparent;
}

.tool-detail-tablist::-webkit-scrollbar {
	height: 4px;
}

.tool-detail-tablist::-webkit-scrollbar-thumb {
	background: var(--td-border);
	border-radius: 4px;
}

.tool-detail-tab {
	margin: 0;
	padding: 0;
}

.tool-detail-tab-btn {
	appearance: none;
	margin: 0;
	padding: 10px 14px;
	border-radius: 10px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--td-muted);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	transition:
		color 0.2s ease,
		background 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.tool-detail-tab-btn:hover {
	color: var(--td-accent);
	background: var(--td-close-hover);
}

.tool-detail-tab-btn[aria-selected='true'] {
	color: var(--td-accent);
	border-color: var(--td-border);
	background: var(--td-card-inner);
	box-shadow: 0 0 20px -8px var(--td-glow);
}

.tool-detail-tab-btn:focus-visible {
	outline: 2px solid var(--td-accent-soft);
	outline-offset: 2px;
}

.tool-detail-body {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 20px 22px 24px;
	min-height: 200px;
}

.tool-detail-panel {
	display: none;
	animation: tool-detail-panel-in 0.28s ease;
}

.tool-detail-panel.tool-detail-panel--active {
	display: block;
}

@keyframes tool-detail-panel-in {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.tool-detail-panel p {
	margin: 0 0 12px;
	color: var(--td-text);
	line-height: 1.6;
}

.tool-detail-muted {
	color: var(--td-muted);
	font-size: 0.95rem;
	line-height: 1.55;
}

.tool-detail-code {
	margin: 0;
	padding: 16px 18px;
	border-radius: 12px;
	background: var(--td-code-bg);
	border: 1px solid var(--td-border);
	font-family:
		ui-monospace,
		SFMono-Regular,
		'SF Mono',
		Menlo,
		Consolas,
		monospace;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--td-accent);
	white-space: pre-wrap;
	word-break: break-word;
	font-variant-ligatures: none;
	font-feature-settings:
		'liga' 0,
		'calt' 0;
}

.tool-detail-list {
	margin: 0;
	padding-left: 1.25rem;
	color: var(--td-text);
	line-height: 1.65;
}

.tool-detail-list li {
	margin-bottom: 8px;
}

.tool-detail-list li::marker {
	color: var(--td-accent-soft);
}

.tool-detail-demo {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.tool-detail-terminal {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--td-border);
	background: var(--td-terminal-bg);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.tool-detail-terminal-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: rgba(0, 0, 0, 0.25);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tool-detail-terminal-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--td-accent-soft);
	opacity: 0.85;
}

.tool-detail-terminal-title {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--td-terminal-text);
	opacity: 0.85;
}

.tool-detail-terminal-body {
	padding: 14px 16px 18px;
	min-height: 120px;
	font-family:
		ui-monospace,
		SFMono-Regular,
		Menlo,
		Consolas,
		monospace;
	font-size: 0.8125rem;
	line-height: 1.65;
	color: var(--td-terminal-text);
}

.tool-detail-terminal-line {
	opacity: 0;
	transform: translateY(4px);
	transition:
		opacity 0.35s ease,
		transform 0.35s ease;
}

.tool-detail-terminal-line.tool-detail-terminal-line--show {
	opacity: 1;
	transform: translateY(0);
}

.tool-detail-run {
	align-self: flex-start;
	padding: 12px 22px;
	border-radius: 12px;
	border: 1px solid var(--td-border);
	background: linear-gradient(135deg, #0369a1, #0ea5e9, #38bdf8);
	color: #fff;
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	cursor: pointer;
	box-shadow: 0 8px 28px -6px var(--td-glow);
	transition:
		transform 0.15s ease,
		box-shadow 0.2s ease,
		filter 0.2s ease;
}

body.dark .tool-detail-run {
	background: linear-gradient(135deg, #1976d2, #1565c0, #0d47a1);
}

.tool-detail-run:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 12px 32px -6px var(--td-glow);
}

.tool-detail-run:disabled {
	opacity: 0.65;
	cursor: not-allowed;
	transform: none;
}

.tool-detail-run:focus-visible {
	outline: 2px solid var(--td-accent-soft);
	outline-offset: 3px;
}

.tool-detail-official {
	margin-top: 8px;
}

.tool-detail-official-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 24px;
	border-radius: 12px;
	border: 1px solid var(--td-border);
	background: var(--td-card-inner);
	color: var(--td-accent);
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
	transition:
		background 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.15s ease;
}

.tool-detail-official-btn:hover {
	background: var(--td-close-hover);
	box-shadow: 0 0 28px -8px var(--td-glow);
	transform: translateY(-1px);
}

.tool-detail-official-btn:focus-visible {
	outline: 2px solid var(--td-accent-soft);
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.tool-detail-dialog {
		max-height: min(92vh, 100%);
		border-radius: 16px;
	}

	.tool-detail-header {
		flex-wrap: wrap;
		padding: 18px 16px 14px;
	}

	.tool-detail-title {
		font-size: 1.15rem;
	}

	.tool-detail-body {
		padding: 16px 16px 20px;
	}

	.tool-detail-tab-btn {
		padding: 8px 11px;
		font-size: 0.75rem;
	}
}

/* Tool card trigger + hint (section-tools) */
.styled-card-tool .tool-card-trigger {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
	position: relative;
	z-index: 2;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.styled-card-tool .tool-card-hint {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 4;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.92);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
	opacity: 0;
	transition: opacity 0.28s ease;
	pointer-events: none;
	white-space: nowrap;
}

.styled-card-tool:hover .tool-card-hint,
.styled-card-tool:focus-within .tool-card-hint {
	opacity: 1;
}

@media (hover: none) {
	.styled-card-tool .tool-card-hint {
		opacity: 0.72;
	}
}

/* —— Rich tool content (e.g. Java) —— */
.td-rich-overview {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.td-rich-lead,
.td-rich-footer {
	margin: 0;
	color: var(--td-text);
	line-height: 1.65;
	font-size: 0.98rem;
}

.td-rich-footer {
	color: var(--td-muted);
	font-size: 0.95rem;
}

.td-chip-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
	gap: 10px;
}

.td-chip {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--td-card-inner);
	border: 1px solid var(--td-border);
	box-shadow: 0 4px 16px -8px var(--td-glow);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--td-text);
	line-height: 1.3;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.td-chip:hover {
	border-color: var(--td-accent-soft);
	box-shadow: 0 6px 22px -10px var(--td-glow);
}

.td-chip i {
	width: 1.1em;
	text-align: center;
	color: var(--td-accent);
	font-size: 1rem;
	opacity: 0.95;
}

.td-rich-install {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.td-install-block {
	margin: 0;
}

.td-install-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--td-accent);
	letter-spacing: 0.02em;
}

.td-install-title i {
	opacity: 0.9;
	font-size: 1.05rem;
}

.td-install-desc {
	margin: 0 0 10px;
	font-size: 0.875rem;
	color: var(--td-muted);
	line-height: 1.5;
}

.td-install-desc code {
	font-size: 0.88em;
	padding: 2px 7px;
	border-radius: 6px;
	background: var(--td-code-bg);
	color: var(--td-accent);
	border: 1px solid var(--td-border);
	font-family:
		ui-monospace,
		SFMono-Regular,
		Menlo,
		Consolas,
		monospace;
}

.td-code-block {
	margin-top: 0;
	margin-bottom: 0;
}

.td-install-note {
	margin: 4px 0 0;
	padding: 12px 14px;
	border-radius: 10px;
	font-size: 0.8125rem;
	color: var(--td-muted);
	line-height: 1.55;
	background: var(--td-card-inner);
	border: 1px dashed var(--td-border);
}

.td-install-download {
	margin: 0 0 10px;
}

.td-install-download .tool-detail-official-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.td-install-note--tight {
	margin-top: 0;
	padding: 10px 12px;
	font-size: 0.78rem;
	border-style: solid;
}

.td-install-note--tight a {
	color: var(--td-accent);
	text-decoration: none;
	word-break: break-all;
}

.td-install-note--tight a:hover {
	text-decoration: underline;
}

.td-pm-list {
	margin: 10px 0 0;
	padding-left: 1.2rem;
	color: var(--td-text);
	line-height: 1.65;
	font-size: 0.9rem;
}

.td-pm-list li {
	margin-bottom: 6px;
}

.td-pm-list li::marker {
	color: var(--td-accent-soft);
}

.td-rich-usage {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.td-usage-section-title {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--td-accent);
}

.td-usage-section-title--sub {
	margin-top: 4px;
}

.td-usage-card-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 10px;
}

.td-usage-card {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--td-card-inner);
	border: 1px solid var(--td-border);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--td-text);
	line-height: 1.35;
	box-shadow: 0 2px 12px -6px rgba(0, 0, 0, 0.12);
}

body.dark .td-usage-card {
	box-shadow: 0 2px 14px -6px rgba(0, 0, 0, 0.35);
}

.td-usage-card i {
	margin-top: 2px;
	color: var(--td-accent);
	flex-shrink: 0;
	width: 1.1em;
	text-align: center;
}

.td-code-block--java {
	color: var(--td-text);
	font-size: 0.8125rem;
}

.td-usage-note {
	margin: 0;
	font-size: 0.9rem;
	color: var(--td-muted);
	line-height: 1.6;
	padding-top: 4px;
}

.tool-detail-terminal--premium {
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.06),
		0 0 32px -12px var(--td-glow);
}

.tool-detail-terminal--premium .tool-detail-terminal-head {
	border-bottom-color: rgba(100, 181, 246, 0.15);
	background: linear-gradient(90deg, rgba(3, 105, 161, 0.12), transparent);
}

body.dark .tool-detail-terminal--premium .tool-detail-terminal-head {
	background: linear-gradient(90deg, rgba(100, 181, 246, 0.12), transparent);
}

.tool-detail-terminal--premium .tool-detail-terminal-body {
	background: rgba(0, 0, 0, 0.2);
}

.tool-detail-terminal--premium .tool-detail-terminal-line {
	text-shadow: 0 0 20px rgba(14, 165, 233, 0.25);
}

.td-rich-official {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

.td-official-line {
	margin: 0;
	max-width: 36rem;
}

.tool-detail-official-btn--primary {
	background: linear-gradient(135deg, #0369a1, #0ea5e9, #38bdf8);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 8px 28px -8px var(--td-glow);
}

.tool-detail-official-btn--primary:hover {
	color: #fff;
	background: linear-gradient(135deg, #0369a1, #0ea5e9, #38bdf8);
	filter: brightness(1.05);
}

body.dark .tool-detail-official-btn--primary {
	background: linear-gradient(135deg, #1976d2, #1565c0, #0d47a1);
}

body.dark .tool-detail-official-btn--primary:hover {
	background: linear-gradient(135deg, #1976d2, #1565c0, #0d47a1);
	color: #fff;
}

@media (max-width: 480px) {
	.td-usage-card-grid {
		grid-template-columns: 1fr;
	}
}

/* Java mini-IDE (demo tab) */
.td-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.tool-detail-demo--ide {
	gap: 16px;
}

.td-java-ide {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 14px;
	align-items: stretch;
	min-height: 0;
}

.td-java-editor-pane {
	display: flex;
	flex-direction: column;
	min-height: 0;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--td-border);
	background: var(--td-modal-bg-solid);
	box-shadow: 0 4px 24px -12px var(--td-glow);
}

.td-java-editor-head {
	padding: 10px 14px;
	background: var(--td-card-inner);
	border-bottom: 1px solid var(--td-border);
	display: flex;
	align-items: center;
	gap: 8px;
}

.td-java-editor-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--td-accent);
}

.td-java-editor-tab i {
	font-size: 1rem;
	opacity: 0.95;
}

.td-java-editor-stack {
	position: relative;
	flex: 1;
	min-height: 240px;
	min-width: 0;
	overflow: hidden;
}

.td-java-highlight-layer {
	margin: 0;
	padding: clamp(14px, 2.8vw, 18px) clamp(14px, 3.5vw, 20px);
	padding-inline-end: max(clamp(14px, 3.5vw, 20px), env(safe-area-inset-right));
	min-height: 240px;
	max-height: min(52vh, 420px);
	overflow: auto;
	overflow-x: auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-gutter: stable;
	box-sizing: border-box;
	font-family:
		ui-monospace,
		SFMono-Regular,
		'SF Mono',
		Menlo,
		Consolas,
		monospace;
	font-size: clamp(0.8125rem, 0.68rem + 0.45vw, 0.9375rem);
	line-height: 1.68;
	tab-size: 4;
	white-space: pre;
	overflow-wrap: normal;
	word-break: normal;
	pointer-events: none;
	color: var(--td-text);
	background: var(--td-code-bg);
	border: none;
	border-radius: 0;
	scrollbar-width: thin;
	scrollbar-color: var(--td-border) transparent;
	font-variant-ligatures: none;
	font-synthesis: none;
	font-feature-settings:
		'liga' 0,
		'calt' 0;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

.td-java-highlight-code {
	display: block;
	width: max-content;
	min-width: 100%;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	font-family:
		ui-monospace,
		SFMono-Regular,
		Menlo,
		Consolas,
		'Courier New',
		monospace;
	font-variant-ligatures: none;
	font-feature-settings:
		'liga' 0,
		'calt' 0,
		'dlig' 0;
}

/* Plain escape fallback when TS highlighting fails — never show internal slot tokens */
.td-java-highlight-fallback {
	display: block;
	white-space: pre;
	color: inherit;
	font: inherit;
}

/* Isolate code from icon / UI fonts (PUA ligatures, Fira Code-style merges) */
.td-java-editor-stack .td-java-highlight-layer,
.td-java-editor-stack .td-java-highlight-code,
.td-java-editor-stack .td-java-highlight-fallback,
.td-java-editor-stack .td-java-highlight-layer span {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Menlo,
		Consolas,
		'Courier New',
		monospace !important;
	font-variant-ligatures: none !important;
	font-feature-settings:
		'liga' 0,
		'calt' 0,
		'dlig' 0,
		'salt' 0 !important;
}

.td-hl-kw {
	color: var(--td-hl-kw);
	font-weight: 600;
}

.td-hl-str {
	color: var(--td-hl-str);
}

.td-hl-comment {
	color: var(--td-hl-comment);
	font-style: italic;
}

.td-hl-sys {
	color: var(--td-hl-sys);
	font-weight: 600;
}

.td-hl-num {
	color: var(--td-hl-num);
}

.td-hl-type {
	color: var(--td-hl-type);
	font-weight: 600;
}

.td-hl-interp {
	color: var(--td-hl-interp);
	font-weight: 600;
}

.td-java-editor {
	font-family:
		ui-monospace,
		SFMono-Regular,
		'SF Mono',
		Menlo,
		Consolas,
		monospace;
	font-size: clamp(0.8125rem, 0.68rem + 0.45vw, 0.9375rem);
	line-height: 1.68;
	tab-size: 4;
	font-variant-ligatures: none;
	font-synthesis: none;
	font-feature-settings:
		'liga' 0,
		'calt' 0;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

.td-java-editor-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 240px;
	max-height: min(52vh, 420px);
	margin: 0;
	padding: clamp(14px, 2.8vw, 18px) clamp(14px, 3.5vw, 20px);
	padding-inline-end: max(clamp(14px, 3.5vw, 20px), env(safe-area-inset-right));
	border: none;
	border-radius: 0;
	resize: none;
	box-sizing: border-box;
	overflow: auto;
	overflow-x: auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	color: transparent;
	caret-color: var(--td-accent);
	background: transparent;
	z-index: 2;
	-webkit-text-fill-color: transparent;
	font-family:
		ui-monospace,
		SFMono-Regular,
		Menlo,
		Consolas,
		'Courier New',
		monospace !important;
	font-variant-ligatures: none !important;
	font-feature-settings:
		'liga' 0,
		'calt' 0,
		'dlig' 0 !important;
}

.td-java-editor-input:focus {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--td-accent-soft);
}

.td-java-editor-input::selection {
	background: rgba(3, 105, 161, 0.22);
	color: transparent;
	-webkit-text-fill-color: transparent;
}

body.dark .td-java-editor-input::selection {
	background: rgba(100, 181, 246, 0.28);
}

.td-java-console-pane {
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.td-java-console-pane .tool-detail-terminal {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 200px;
}

.td-java-terminal-inner {
	flex: 1;
	min-height: 180px;
	max-height: min(42vh, 320px);
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.td-console-lines {
	flex: 1;
	min-height: 0;
}

.td-console-hint {
	color: var(--td-muted);
	font-style: normal;
}

.td-console-line--cmd {
	color: var(--td-terminal-text);
}

.td-console-line--out {
	color: var(--td-accent-soft);
	font-weight: 500;
}

.td-console-line--typing {
	opacity: 0.98;
}

.td-inline-type-caret {
	display: inline-block;
	width: 7px;
	height: 1.05em;
	vertical-align: text-bottom;
	margin-left: 1px;
	background: var(--td-accent-soft);
	border-radius: 1px;
	animation: td-cursor-blink 0.95s step-end infinite;
	box-shadow: 0 0 12px var(--td-glow);
	flex-shrink: 0;
}

.tool-detail-terminal--success {
	transition:
		box-shadow 0.5s ease,
		border-color 0.5s ease;
	border-color: rgba(34, 197, 94, 0.5) !important;
	box-shadow:
		inset 0 0 0 1px rgba(34, 197, 94, 0.22),
		0 0 40px -10px rgba(34, 197, 94, 0.55),
		0 0 72px -20px rgba(34, 197, 94, 0.35) !important;
}

.tool-detail-terminal--success .tool-detail-terminal-head {
	border-bottom-color: rgba(34, 197, 94, 0.28);
	background: linear-gradient(90deg, rgba(34, 197, 94, 0.12), transparent);
}

body.dark .tool-detail-terminal--success .tool-detail-terminal-head {
	background: linear-gradient(90deg, rgba(34, 197, 94, 0.15), transparent);
}

.td-console-blank {
	line-height: 0.65;
	font-size: 0.65rem;
	opacity: 0.35;
	user-select: none;
}

.td-terminal-cursor-row {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	min-height: 1.35em;
	margin-top: 2px;
}

.td-terminal-cursor-row--off {
	visibility: hidden;
	height: 0;
	min-height: 0;
	margin: 0;
	overflow: hidden;
	pointer-events: none;
}

.td-terminal-cursor {
	display: inline-block;
	width: 9px;
	height: 1.15em;
	background: var(--td-accent-soft);
	border-radius: 1px;
	box-shadow: 0 0 12px var(--td-glow);
	vertical-align: text-bottom;
	animation: td-cursor-blink 1s step-end infinite;
}

@keyframes td-cursor-blink {
	0%,
	45% {
		opacity: 1;
	}
	50%,
	100% {
		opacity: 0;
	}
}

.tool-detail-run--compile {
	width: 100%;
	max-width: 280px;
	justify-content: center;
}

.tool-detail-run--compile .tool-detail-run-inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.tool-detail-run-spinner {
	display: inline-block;
	flex-shrink: 0;
	width: 1.05em;
	height: 1.05em;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.2s ease;
	vertical-align: middle;
}

.tool-detail-run--loading .tool-detail-run-spinner {
	opacity: 1;
	animation: td-spin 0.65s linear infinite;
}

.tool-detail-run--loading.tool-detail-run--compile {
	animation: td-run-loading-pulse 1.15s ease-in-out infinite;
}

@keyframes td-run-loading-pulse {
	0%,
	100% {
		box-shadow:
			0 8px 28px -6px var(--td-glow),
			0 0 0 1px rgba(14, 165, 233, 0.15);
		filter: brightness(1);
	}
	50% {
		box-shadow:
			0 12px 36px -4px rgba(14, 165, 233, 0.55),
			0 0 28px -6px var(--td-glow);
		filter: brightness(1.06);
	}
}

body.dark .tool-detail-run--loading.tool-detail-run--compile {
	animation: td-run-loading-pulse-dark 1.15s ease-in-out infinite;
}

@keyframes td-run-loading-pulse-dark {
	0%,
	100% {
		box-shadow:
			0 8px 28px -6px var(--td-glow),
			0 0 0 1px rgba(100, 181, 246, 0.2);
		filter: brightness(1);
	}
	50% {
		box-shadow:
			0 12px 40px -4px rgba(100, 181, 246, 0.5),
			0 0 36px -8px var(--td-glow);
		filter: brightness(1.08);
	}
}

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

.tool-detail-run--loading.tool-detail-run--compile {
	pointer-events: none;
}

/* Playwright demo: mini browser + console stack */
.td-pw-right-column {
	gap: 12px;
}

.td-pw-right-column .tool-detail-terminal {
	flex: 1;
	min-height: 140px;
}

/* JavaScript demo: app.js + live preview + console */
.td-js-ide {
	align-items: stretch;
}

.td-js-right-column {
	gap: 12px;
	min-height: 0;
}

.td-js-right-column .tool-detail-terminal {
	flex: 1;
	min-height: 130px;
}

.td-js-preview {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--td-border);
	background: var(--td-modal-bg-solid);
	box-shadow: 0 4px 24px -12px var(--td-glow);
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	min-height: 0;
	transition:
		border-color 0.45s ease,
		box-shadow 0.45s ease;
}

.td-js-preview--glow {
	border-color: rgba(14, 165, 233, 0.45);
	box-shadow:
		0 6px 28px -8px var(--td-glow),
		0 0 0 1px rgba(14, 165, 233, 0.12) inset;
}

body.dark .td-js-preview--glow {
	border-color: rgba(100, 181, 246, 0.42);
	box-shadow:
		0 8px 32px -8px var(--td-glow),
		0 0 0 1px rgba(100, 181, 246, 0.15) inset;
}

.td-js-preview--just-ran {
	animation: td-js-preview-flash 0.85s ease;
}

@keyframes td-js-preview-flash {
	0%,
	100% {
		filter: brightness(1);
	}
	40% {
		filter: brightness(1.04);
	}
}

.td-js-preview-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 14px;
	background: var(--td-card-inner);
	border-bottom: 1px solid var(--td-border);
}

.td-js-preview-head-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--td-accent);
	box-shadow: 0 0 12px var(--td-glow);
	flex-shrink: 0;
}

.td-js-preview-head-title {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--td-accent);
}

.td-js-preview-chrome {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 12px 8px;
	background: var(--td-code-bg);
	border-bottom: 1px solid var(--td-border);
}

.td-js-preview-dots {
	display: flex;
	gap: 5px;
	align-items: center;
	flex-shrink: 0;
}

.td-js-preview-dots span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--td-muted);
	opacity: 0.5;
}

.td-js-preview-dots span:nth-child(1) {
	background: #ef4444;
	opacity: 0.9;
}
.td-js-preview-dots span:nth-child(2) {
	background: #eab308;
	opacity: 0.9;
}
.td-js-preview-dots span:nth-child(3) {
	background: #22c55e;
	opacity: 0.9;
}

.td-js-preview-url {
	flex: 1;
	min-width: 0;
	font-size: 0.7rem;
	font-weight: 600;
	font-family:
		ui-monospace,
		SFMono-Regular,
		Menlo,
		Consolas,
		monospace;
	color: var(--td-muted);
	font-variant-ligatures: none;
}

.td-js-preview-viewport {
	position: relative;
	min-height: 100px;
	max-height: min(32vh, 200px);
	padding: 14px 16px 16px;
	background: #fff;
	box-sizing: border-box;
}

body.dark .td-js-preview-viewport {
	background: #0b1220;
}

.td-js-preview-canvas {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(145deg, rgba(3, 105, 161, 0.04), transparent 55%);
}

body.dark .td-js-preview-canvas {
	background: linear-gradient(145deg, rgba(100, 181, 246, 0.06), transparent 60%);
}

.td-js-preview-surface {
	position: relative;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.5;
	color: #0f172a;
	font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

body.dark .td-js-preview-surface {
	color: #e2e8f0;
}

.td-js-preview-surface--ready {
	letter-spacing: 0.01em;
}

.td-js-script-badge {
	margin: 0;
	padding: 10px 12px;
	border-radius: 10px;
	text-align: center;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(135deg, var(--td-accent), var(--td-accent-soft));
	box-shadow: 0 6px 22px -8px var(--td-glow);
	flex-shrink: 0;
	animation: td-js-badge-in 0.4s ease;
}

.td-js-script-badge--hidden {
	display: none;
}

@keyframes td-js-badge-in {
	from {
		opacity: 0;
		transform: translateY(5px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Python demo: app.py + program output + console */
.td-py-ide {
	align-items: stretch;
}

.td-py-right-column {
	gap: 12px;
	min-height: 0;
}

.td-py-right-column .tool-detail-terminal {
	flex: 1;
	min-height: 130px;
}

.td-py-output {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--td-border);
	background: var(--td-modal-bg-solid);
	box-shadow: 0 4px 24px -12px var(--td-glow);
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	min-height: 0;
	transition:
		border-color 0.45s ease,
		box-shadow 0.45s ease;
}

.td-py-output--glow {
	border-color: rgba(14, 165, 233, 0.45);
	box-shadow:
		0 6px 28px -8px var(--td-glow),
		0 0 0 1px rgba(14, 165, 233, 0.12) inset;
}

body.dark .td-py-output--glow {
	border-color: rgba(100, 181, 246, 0.42);
	box-shadow:
		0 8px 32px -8px var(--td-glow),
		0 0 0 1px rgba(100, 181, 246, 0.15) inset;
}

.td-py-output--just-ran {
	animation: td-py-output-flash 0.85s ease;
}

@keyframes td-py-output-flash {
	0%,
	100% {
		filter: brightness(1);
	}
	40% {
		filter: brightness(1.04);
	}
}

.td-py-output-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 14px;
	background: var(--td-card-inner);
	border-bottom: 1px solid var(--td-border);
}

.td-py-output-head-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--td-accent);
	box-shadow: 0 0 12px var(--td-glow);
	flex-shrink: 0;
}

.td-py-output-head-title {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--td-accent);
}

.td-py-output-chrome {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 12px 8px;
	background: var(--td-code-bg);
	border-bottom: 1px solid var(--td-border);
}

.td-py-output-dots {
	display: flex;
	gap: 5px;
	align-items: center;
	flex-shrink: 0;
}

.td-py-output-dots span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--td-muted);
	opacity: 0.5;
}

.td-py-output-dots span:nth-child(1) {
	background: #ef4444;
	opacity: 0.9;
}
.td-py-output-dots span:nth-child(2) {
	background: #eab308;
	opacity: 0.9;
}
.td-py-output-dots span:nth-child(3) {
	background: #22c55e;
	opacity: 0.9;
}

.td-py-output-meta {
	flex: 1;
	min-width: 0;
	font-size: 0.7rem;
	font-weight: 600;
	font-family:
		ui-monospace,
		SFMono-Regular,
		Menlo,
		Consolas,
		monospace;
	color: var(--td-muted);
	font-variant-ligatures: none;
}

.td-py-output-viewport {
	position: relative;
	min-height: 100px;
	max-height: min(32vh, 200px);
	padding: 14px 16px 16px;
	background: #fff;
	box-sizing: border-box;
}

body.dark .td-py-output-viewport {
	background: #0b1220;
}

.td-py-output-canvas {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(145deg, rgba(3, 105, 161, 0.04), transparent 55%);
}

body.dark .td-py-output-canvas {
	background: linear-gradient(145deg, rgba(100, 181, 246, 0.06), transparent 60%);
}

.td-py-output-surface {
	position: relative;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.5;
	color: #0f172a;
	font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

body.dark .td-py-output-surface {
	color: #e2e8f0;
}

.td-py-output-surface--ready {
	letter-spacing: 0.01em;
}

.td-py-script-badge {
	margin: 0;
	padding: 10px 12px;
	border-radius: 10px;
	text-align: center;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(135deg, var(--td-accent), var(--td-accent-soft));
	box-shadow: 0 6px 22px -8px var(--td-glow);
	flex-shrink: 0;
	animation: td-py-badge-in 0.4s ease;
}

.td-py-script-badge--hidden {
	display: none;
}

@keyframes td-py-badge-in {
	from {
		opacity: 0;
		transform: translateY(5px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Cypress demo: spec editor + runner + command log */
.td-cy-ide {
	align-items: stretch;
}

.td-cy-right-column {
	gap: 12px;
	min-height: 0;
}

.td-cy-right-column .tool-detail-terminal {
	flex: 1;
	min-height: 130px;
}

.td-cy-runner-wrap {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--td-border);
	background: var(--td-modal-bg-solid);
	box-shadow: 0 4px 24px -12px var(--td-glow);
	flex-shrink: 0;
}

.td-cy-runner-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 14px;
	background: var(--td-card-inner);
	border-bottom: 1px solid var(--td-border);
}

.td-cy-runner-head-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--td-accent);
	box-shadow: 0 0 12px var(--td-glow);
}

.td-cy-runner-head-title {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--td-accent);
}

.td-cy-runner-chrome {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 10px 8px 12px;
	background: var(--td-code-bg);
	border-bottom: 1px solid var(--td-border);
}

.td-cy-runner-dots {
	display: flex;
	gap: 5px;
	flex-shrink: 0;
}

.td-cy-runner-dots span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
}
.td-cy-runner-dots span:nth-child(1) {
	background: #ef4444;
}
.td-cy-runner-dots span:nth-child(2) {
	background: #eab308;
}
.td-cy-runner-dots span:nth-child(3) {
	background: #22c55e;
}

.td-cy-runner-url {
	flex: 1;
	min-width: 0;
	font-size: 0.68rem;
	font-family:
		ui-monospace,
		SFMono-Regular,
		Menlo,
		Consolas,
		monospace;
	font-variant-ligatures: none;
	font-feature-settings:
		'liga' 0,
		'calt' 0;
	padding: 5px 10px;
	border-radius: 8px;
	background: var(--td-card-inner);
	border: 1px solid var(--td-border);
	color: var(--td-muted);
}

.td-cy-runner {
	position: relative;
	min-height: 180px;
	height: 200px;
	background: #fff;
	overflow: hidden;
}

body.dark .td-cy-runner {
	background: #0b1220;
}

.td-cy-loading-screen,
.td-cy-mock--login,
.td-cy-mock--dash,
.td-cy-pass-badge {
	position: absolute;
	inset: 0;
}

.td-cy-loading-screen {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 20px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease;
}

.td-cy-loading-bar {
	width: 70%;
	height: 7px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--td-border), var(--td-accent-soft), var(--td-border));
	background-size: 200% 100%;
	animation: td-cy-shimmer 1.05s ease-in-out infinite;
}

.td-cy-loading-bar--short {
	width: 45%;
}
.td-cy-loading-bar:nth-child(2) {
	animation-delay: 0.12s;
}
.td-cy-loading-bar:nth-child(3) {
	animation-delay: 0.24s;
}

@keyframes td-cy-shimmer {
	0% {
		background-position: 100% 0;
	}
	100% {
		background-position: -100% 0;
	}
}

.td-cy-step-hint {
	position: absolute;
	top: 10px;
	left: 12px;
	right: 12px;
	margin: 0;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--td-accent);
	z-index: 2;
}

.td-cy-mock--login {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 10px;
	padding: 40px 18px 18px;
	box-sizing: border-box;
	background: linear-gradient(165deg, rgba(3, 105, 161, 0.06), transparent);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

body.dark .td-cy-mock--login {
	background: linear-gradient(165deg, rgba(100, 181, 246, 0.1), transparent);
}

.td-cy-mock-lab {
	margin: 0 0 4px;
	font-size: 0.9rem;
	font-weight: 800;
	color: var(--td-text);
	text-align: center;
}

.td-cy-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.td-cy-fake-label {
	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--td-muted);
}

.td-cy-fake-input {
	min-height: 2rem;
	border-radius: 8px;
	border: 1px solid var(--td-border);
	background: var(--td-modal-bg-solid);
	padding: 6px 10px;
	font-size: 0.78rem;
	color: var(--td-text);
}

.td-cy-mock-btn {
	margin-top: 4px;
	align-self: center;
	padding: 7px 22px;
	border-radius: 9px;
	border: 1px solid var(--td-border);
	background: var(--td-card-inner);
	color: var(--td-text);
	font-weight: 700;
	font-size: 0.8rem;
	cursor: default;
	transition:
		box-shadow 0.25s ease,
		border-color 0.25s ease,
		transform 0.25s ease;
}

.td-cy-mock--dash {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 24px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.td-cy-mock-hero {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--td-text);
	letter-spacing: -0.02em;
}

.td-cy-mock-dim {
	margin: 0;
	font-size: 0.75rem;
	color: var(--td-muted);
}

.td-cy-pass-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(135deg, var(--td-accent), var(--td-accent-soft));
	box-shadow: 0 6px 24px -6px var(--td-glow);
	pointer-events: none;
	z-index: 3;
	text-align: center;
	animation: td-cy-badge-pop 0.4s ease;
}

.td-cy-pass-badge--hidden {
	display: none;
}

@keyframes td-cy-badge-pop {
	from {
		opacity: 0;
		transform: scale(0.96);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.td-cy-runner--step-0 .td-cy-loading-screen {
	opacity: 1;
}

.td-cy-runner--step-1 .td-cy-loading-screen,
.td-cy-runner--step-2 .td-cy-loading-screen,
.td-cy-runner--step-3 .td-cy-loading-screen,
.td-cy-runner--step-4 .td-cy-loading-screen,
.td-cy-runner--step-5 .td-cy-loading-screen {
	opacity: 0;
}

.td-cy-runner--step-1 .td-cy-mock--login,
.td-cy-runner--step-2 .td-cy-mock--login,
.td-cy-runner--step-3 .td-cy-mock--login {
	opacity: 1;
	pointer-events: auto;
}

.td-cy-runner--step-2 .td-cy-mock--login .td-cy-fake-input,
.td-cy-runner--step-3 .td-cy-mock--login .td-cy-mock-btn {
	border-color: var(--td-accent-soft);
}

.td-cy-runner--step-3 .td-cy-mock-btn {
	box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.35);
	transform: scale(0.98);
}
body.dark .td-cy-runner--step-3 .td-cy-mock-btn {
	box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.4);
}

.td-cy-runner--step-4 .td-cy-mock--login,
.td-cy-runner--step-5 .td-cy-mock--login {
	opacity: 0;
	pointer-events: none;
}

.td-cy-runner--step-4 .td-cy-mock--dash,
.td-cy-runner--step-5 .td-cy-mock--dash {
	opacity: 1;
}

.td-cy-runner.td-cy-runner--step-4 {
	box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.2);
}
body.dark .td-cy-runner.td-cy-runner--step-4 {
	box-shadow: inset 0 0 0 1px rgba(100, 181, 246, 0.25);
}

.td-cy-runner.td-cy-runner--step-5 {
	box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.35);
}

/* Selenium demo: panel title + mini Chrome (single bordered stack) */
.td-se-browser-stack {
	flex-shrink: 0;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--td-border);
	background: var(--td-modal-bg-solid);
	box-shadow: 0 4px 24px -12px var(--td-glow);
}

.td-se-browser-stack .td-pw-browser {
	border: none;
	border-radius: 0;
	box-shadow: none;
}

.td-se-mini-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: var(--td-card-inner);
	border-bottom: 1px solid var(--td-border);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--td-accent);
}

.td-se-mini-head .tool-detail-terminal-dot {
	flex-shrink: 0;
}

.td-se-browser.td-pw-browser--step-4 .td-pw-mock-login {
	animation: td-se-login-press 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes td-se-login-press {
	0% {
		transform: scale(0.96);
	}
	45% {
		transform: scale(0.86);
	}
	100% {
		transform: scale(1);
	}
}

.td-pw-browser {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--td-border);
	background: var(--td-modal-bg-solid);
	box-shadow: 0 4px 24px -12px var(--td-glow);
	flex-shrink: 0;
}

.td-pw-browser-chrome {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: var(--td-card-inner);
	border-bottom: 1px solid var(--td-border);
}

.td-pw-browser-dots {
	display: flex;
	gap: 5px;
	flex-shrink: 0;
}

.td-pw-browser-dots span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	opacity: 0.9;
}

.td-pw-browser-dots span:nth-child(1) {
	background: #ef4444;
}

.td-pw-browser-dots span:nth-child(2) {
	background: #f59e0b;
}

.td-pw-browser-dots span:nth-child(3) {
	background: #22c55e;
}

.td-pw-browser-url {
	flex: 1;
	min-width: 0;
	font-size: 0.68rem;
	font-family:
		ui-monospace,
		SFMono-Regular,
		Menlo,
		Consolas,
		monospace;
	font-variant-ligatures: none;
	font-feature-settings:
		'liga' 0,
		'calt' 0;
	padding: 5px 10px;
	border-radius: 8px;
	background: var(--td-code-bg);
	border: 1px solid var(--td-border);
	color: var(--td-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.td-pw-browser-viewport {
	position: relative;
	min-height: 168px;
	height: 200px;
	background: var(--td-code-bg);
	overflow: hidden;
}

.td-pw-loading-screen,
.td-pw-mock-site {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 16px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.td-pw-loading-screen {
	gap: 10px;
}

.td-pw-loading-bar {
	width: 72%;
	height: 8px;
	border-radius: 4px;
	background: linear-gradient(
		90deg,
		var(--td-border),
		var(--td-accent-soft),
		var(--td-border)
	);
	background-size: 220% 100%;
	animation: td-pw-shimmer 1.1s ease-in-out infinite;
}

.td-pw-loading-bar--short {
	width: 48%;
}

.td-pw-loading-bar:nth-child(2) {
	animation-delay: 0.15s;
}

.td-pw-loading-bar:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes td-pw-shimmer {
	0% {
		background-position: 100% 0;
	}
	100% {
		background-position: -100% 0;
	}
}

.td-pw-mock-site {
	background: linear-gradient(165deg, rgba(3, 105, 161, 0.08), transparent);
}

body.dark .td-pw-mock-site {
	background: linear-gradient(165deg, rgba(100, 181, 246, 0.12), transparent);
}

.td-pw-mock-brand {
	position: absolute;
	top: 10px;
	left: 12px;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--td-accent);
	opacity: 0.85;
}

.td-pw-mock-body {
	text-align: center;
	max-width: 100%;
}

.td-pw-mock-title {
	margin: 0 0 14px;
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--td-text);
	letter-spacing: -0.02em;
}

.td-pw-mock-login {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 20px;
	border-radius: 10px;
	border: 1px solid var(--td-border);
	background: var(--td-card-inner);
	color: var(--td-text);
	font-weight: 700;
	font-size: 0.8rem;
	cursor: default;
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		border-color 0.25s ease;
}

.td-pw-mock-welcome {
	margin: 16px 0 0;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--td-accent);
	opacity: 0;
	transform: translateY(8px);
	transition:
		opacity 0.35s ease,
		transform 0.35s ease;
}

.td-pw-pass-ribbon {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 6px 11px;
	border-radius: 8px;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: rgba(22, 163, 74, 0.95);
	color: #fff;
	box-shadow: 0 4px 14px -4px rgba(22, 163, 74, 0.55);
	opacity: 0;
	transform: scale(0.88);
	transition:
		opacity 0.35s ease,
		transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
	pointer-events: none;
}

.td-pw-browser--step-1 .td-pw-loading-screen {
	opacity: 1;
}

.td-pw-browser--step-2 .td-pw-loading-screen,
.td-pw-browser--step-3 .td-pw-loading-screen,
.td-pw-browser--step-4 .td-pw-loading-screen,
.td-pw-browser--step-5 .td-pw-loading-screen {
	opacity: 0;
}

.td-pw-browser--step-2 .td-pw-mock-site,
.td-pw-browser--step-3 .td-pw-mock-site,
.td-pw-browser--step-4 .td-pw-mock-site,
.td-pw-browser--step-5 .td-pw-mock-site {
	opacity: 1;
}

.td-pw-browser--step-3 .td-pw-mock-login {
	border-color: var(--td-accent-soft);
	box-shadow:
		0 0 0 2px rgba(3, 105, 161, 0.35),
		0 8px 22px -10px var(--td-glow);
	transform: scale(0.96);
}

body.dark .td-pw-browser--step-3 .td-pw-mock-login {
	box-shadow:
		0 0 0 2px rgba(100, 181, 246, 0.45),
		0 8px 26px -10px var(--td-glow);
}

.td-pw-browser--step-4 .td-pw-mock-login,
.td-pw-browser--step-5 .td-pw-mock-login {
	border-color: var(--td-border);
	box-shadow: none;
	transform: scale(1);
}

.td-pw-browser--step-4 .td-pw-mock-welcome,
.td-pw-browser--step-5 .td-pw-mock-welcome {
	opacity: 1;
	transform: translateY(0);
}

.td-pw-browser--step-5 .td-pw-pass-ribbon {
	opacity: 1;
	transform: scale(1);
}

.td-pw-browser--step-5 .td-pw-browser-viewport {
	box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.35);
}

/* Jenkins pipeline demo — enterprise CI dashboard */
.td-jenkins-ide {
	--td-jk-glass: linear-gradient(145deg, var(--td-card-inner) 0%, transparent 55%);
}

.td-jenkins-editor-head-chrome {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	background: linear-gradient(90deg, rgba(3, 105, 161, 0.08) 0%, transparent 100%);
}

body.dark .td-jenkins-editor-head-chrome {
	background: linear-gradient(90deg, rgba(100, 181, 246, 0.1) 0%, transparent 100%);
}

.td-jenkins-file-hint {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--td-muted);
	opacity: 0.95;
	white-space: nowrap;
}

.td-jenkins-file-stack {
	border-radius: 0 0 12px 12px;
	box-shadow: inset 0 0 0 1px var(--td-border);
}

.td-jenkins-right-column {
	gap: 10px;
}

.td-jenkins-dashboard {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.td-jenkins-buildbar {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--td-border);
	background: var(--td-modal-bg-solid);
	background-image: var(--td-jk-glass);
	box-shadow: 0 4px 24px -14px var(--td-glow);
	transition:
		border-color 0.35s ease,
		box-shadow 0.4s ease;
}

.td-jenkins-buildbar--idle {
	border-color: var(--td-border);
}

.td-jenkins-buildbar--running {
	border-color: var(--td-accent-soft);
	box-shadow: 0 0 0 1px rgba(3, 105, 161, 0.15), 0 6px 28px -12px var(--td-glow);
}

body.dark .td-jenkins-buildbar--running {
	box-shadow: 0 0 0 1px rgba(100, 181, 246, 0.22), 0 8px 32px -12px var(--td-glow);
}

.td-jenkins-buildbar--success {
	border-color: rgba(22, 163, 74, 0.4);
	box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.18);
}

.td-jenkins-buildbar-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px 6px;
	border-bottom: 1px solid var(--td-border);
}

.td-jenkins-buildbar-product {
	font-size: 0.64rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--td-muted);
	gap: 6px;
	display: inline-flex;
	align-items: center;
}

.td-jenkins-buildbar-id {
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--td-accent);
	font-variant-numeric: tabular-nums;
}

.td-jenkins-buildbar-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px 12px;
	padding: 10px 14px 12px;
}

@media (min-width: 480px) {
	.td-jenkins-buildbar-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.td-jenkins-buildbar-cell {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.td-jenkins-buildbar-cell--status {
	align-items: flex-start;
}

.td-jenkins-bk {
	font-size: 0.58rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--td-muted);
}

.td-jenkins-bv {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--td-text);
	letter-spacing: 0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.td-jenkins-bv--mono {
	font-family: ui-monospace, 'Cascadia Code', 'Fira Code', Consolas, monospace;
	font-size: 0.78rem;
}

.td-jenkins-status-pill {
	display: inline-block;
	margin-top: 1px;
	padding: 2px 8px 3px;
	border-radius: 6px;
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: rgba(100, 116, 139, 0.25);
	color: var(--td-muted);
	border: 1px solid var(--td-border);
}

.td-jenkins-buildbar--running .td-jenkins-status-pill {
	color: var(--td-accent);
	border-color: var(--td-accent-soft);
	background: rgba(3, 105, 161, 0.12);
}

body.dark .td-jenkins-buildbar--running .td-jenkins-status-pill {
	background: rgba(100, 181, 246, 0.12);
}

.td-jenkins-buildbar--success .td-jenkins-status-pill {
	color: #fff;
	background: linear-gradient(135deg, rgb(22, 163, 74), rgb(21, 128, 61));
	border-color: rgba(22, 163, 74, 0.55);
}

.td-jenkins-right-column .tool-detail-terminal {
	flex: 1;
	min-height: 140px;
}

.tool-detail-terminal--jenkins-con {
	min-height: 148px;
}

.td-jenkins-console-body {
	font-size: 0.78rem;
	max-height: 200px;
}

.td-jenkins-summary-card {
	border-radius: 12px;
	border: 1px solid var(--td-border);
	background: var(--td-modal-bg-solid);
	padding: 10px 12px 12px;
	box-shadow: 0 4px 20px -14px var(--td-glow);
	transition:
		border-color 0.35s ease,
		box-shadow 0.35s ease;
}

.td-jenkins-summary-card.td-jenkins-summary--populated {
	border-color: rgba(3, 105, 161, 0.35);
}

body.dark .td-jenkins-summary-card.td-jenkins-summary--populated {
	border-color: rgba(100, 181, 246, 0.35);
}

.td-jenkins-summary-title {
	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--td-muted);
	margin-bottom: 8px;
}

.td-jenkins-summary-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px 10px;
}

@media (min-width: 400px) {
	.td-jenkins-summary-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.td-jenkins-smetric {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.td-jenkins-smetric--wide {
	grid-column: 1 / -1;
}

.td-jenkins-smetric-l {
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--td-muted);
}

.td-jenkins-smetric-v {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--td-text);
	font-variant-numeric: tabular-nums;
}

.td-jenkins-smetric-v--ok {
	color: rgb(22, 163, 74);
}

.td-jenkins-board {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--td-border);
	background: var(--td-modal-bg-solid);
	background-image: var(--td-jk-glass);
	box-shadow: 0 4px 22px -12px var(--td-glow);
	flex-shrink: 0;
	transition:
		box-shadow 0.35s ease,
		border-color 0.35s ease;
}

.td-jenkins-board--success {
	border-color: rgba(22, 163, 74, 0.45);
	box-shadow:
		0 4px 28px -10px var(--td-glow),
		0 0 0 1px rgba(22, 163, 74, 0.2);
}

.td-jenkins-board-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: var(--td-card-inner);
	border-bottom: 1px solid var(--td-border);
}

.td-jenkins-board-title {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--td-accent);
}

.td-jenkins-stages {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 14px 14px;
}

.td-jenkins-stage {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: 8px 10px;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--td-border);
	background: var(--td-card-inner);
	font-size: 0.8125rem;
	transition:
		border-color 0.25s ease,
		box-shadow 0.25s ease,
		background 0.25s ease;
}

.td-jenkins-stage-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--td-border);
	transition:
		background 0.25s ease,
		box-shadow 0.25s ease;
}

.td-jenkins-stage-name {
	font-weight: 700;
	color: var(--td-text);
	letter-spacing: 0.02em;
}

.td-jenkins-stage-dur {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--td-muted);
	font-variant-numeric: tabular-nums;
	font-family: ui-monospace, 'Cascadia Code', 'Fira Code', Consolas, monospace;
	text-align: right;
	min-width: 3.1rem;
}

.td-jenkins-stage--running .td-jenkins-stage-dur {
	color: var(--td-accent);
}

.td-jenkins-stage--passed .td-jenkins-stage-dur {
	color: var(--td-text);
}

.td-jenkins-stage-status {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--td-muted);
	font-variant-numeric: tabular-nums;
}

.td-jenkins-stage--pending .td-jenkins-stage-dot {
	background: var(--td-muted);
	opacity: 0.45;
}

.td-jenkins-stage--running {
	border-color: var(--td-accent-soft);
	box-shadow: 0 0 0 1px rgba(3, 105, 161, 0.2);
	animation: td-jenkins-stage-pulse 1.2s ease-in-out infinite;
}

body.dark .td-jenkins-stage--running {
	box-shadow: 0 0 0 1px rgba(100, 181, 246, 0.25);
}

.td-jenkins-stage--running .td-jenkins-stage-dot {
	background: var(--td-accent);
	box-shadow: 0 0 10px -2px var(--td-glow);
	animation: td-jenkins-dot-pulse 1s ease-in-out infinite;
}

.td-jenkins-stage--running .td-jenkins-stage-status {
	color: var(--td-accent);
}

.td-jenkins-stage--passed {
	border-color: rgba(22, 163, 74, 0.35);
	background: rgba(22, 163, 74, 0.06);
}

.td-jenkins-stage--passed .td-jenkins-stage-dot {
	background: rgb(22, 163, 74);
	opacity: 1;
}

.td-jenkins-stage--passed .td-jenkins-stage-status {
	color: rgb(22, 163, 74);
}

@keyframes td-jenkins-stage-pulse {
	0%,
	100% {
		filter: brightness(1);
	}
	50% {
		filter: brightness(1.04);
	}
}

@keyframes td-jenkins-dot-pulse {
	0%,
	100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.15);
		opacity: 0.85;
	}
}

.td-jenkins-build-badge {
	margin: 0 14px 14px;
	padding: 12px 14px;
	border-radius: 10px;
	text-align: center;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(135deg, rgb(22, 163, 74), rgb(21, 128, 61));
	box-shadow: 0 6px 20px -8px rgba(22, 163, 74, 0.55);
	animation: td-jenkins-badge-in 0.45s ease;
}

.td-jenkins-build-badge--hidden {
	display: none;
}

@keyframes td-jenkins-badge-in {
	from {
		opacity: 0;
		transform: translateY(6px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Cucumber BDD demo: scenario runner + console */
.td-code-block--gherkin code {
	display: block;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	font-variant-ligatures: none;
	font-feature-settings:
		'liga' 0,
		'calt' 0,
		'dlig' 0;
	white-space: pre-wrap;
	word-break: break-word;
}

.td-cu-right-column {
	gap: 12px;
}

.td-cu-right-column .tool-detail-terminal {
	flex: 1;
	min-height: 140px;
}

.td-cu-scenario-board {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--td-border);
	background: var(--td-modal-bg-solid);
	box-shadow: 0 4px 22px -12px var(--td-glow);
	flex-shrink: 0;
	transition:
		box-shadow 0.35s ease,
		border-color 0.35s ease;
}

.td-cu-scenario-board--success {
	border-color: rgba(22, 163, 74, 0.45);
	box-shadow:
		0 4px 28px -10px var(--td-glow),
		0 0 0 1px rgba(22, 163, 74, 0.2);
}

.td-cu-scenario-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: var(--td-card-inner);
	border-bottom: 1px solid var(--td-border);
}

.td-cu-scenario-title {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--td-accent);
}

.td-cu-steps {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 14px 10px;
}

.td-cu-step {
	display: grid;
	grid-template-columns: minmax(48px, auto) 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--td-border);
	background: var(--td-card-inner);
	font-size: 0.8125rem;
	transition:
		border-color 0.25s ease,
		box-shadow 0.25s ease,
		background 0.25s ease;
}

.td-cu-step-keyword {
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: capitalize;
	letter-spacing: 0.05em;
	color: var(--td-hl-kw);
}

.td-cu-step-body {
	font-weight: 600;
	color: var(--td-text);
	line-height: 1.35;
}

.td-cu-step-status {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--td-muted);
	font-variant-numeric: tabular-nums;
}

.td-cu-step--pending {
	opacity: 0.92;
}

.td-cu-step--pending .td-cu-step-keyword {
	opacity: 0.9;
}

.td-cu-step--running {
	border-color: var(--td-accent-soft);
	box-shadow: 0 0 0 1px rgba(3, 105, 161, 0.2);
	animation: td-cu-step-pulse 1.2s ease-in-out infinite;
}

body.dark .td-cu-step--running {
	box-shadow: 0 0 0 1px rgba(100, 181, 246, 0.25);
}

.td-cu-step--running .td-cu-step-status {
	color: var(--td-accent);
}

.td-cu-step--passed {
	border-color: rgba(22, 163, 74, 0.35);
	background: rgba(22, 163, 74, 0.06);
}

.td-cu-step--passed .td-cu-step-keyword {
	color: rgb(22, 163, 74);
}

.td-cu-step--passed .td-cu-step-status {
	color: rgb(22, 163, 74);
}

@keyframes td-cu-step-pulse {
	0%,
	100% {
		filter: brightness(1);
	}
	50% {
		filter: brightness(1.03);
	}
}

.td-cu-scenario-badge {
	margin: 0 14px 14px;
	padding: 12px 14px;
	border-radius: 10px;
	text-align: center;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(135deg, rgb(22, 163, 74), rgb(21, 128, 61));
	box-shadow: 0 6px 20px -8px rgba(22, 163, 74, 0.55);
	animation: td-jenkins-badge-in 0.45s ease;
}

.td-cu-scenario-badge--hidden {
	display: none;
}

/* PostgreSQL demo: result grid + psql console */
.td-code-block--sql code {
	display: block;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	font-variant-ligatures: none;
	font-feature-settings:
		'liga' 0,
		'calt' 0,
		'dlig' 0;
	white-space: pre-wrap;
	word-break: break-word;
}

.td-pg-right-column {
	gap: 12px;
}

.td-pg-right-column .tool-detail-terminal {
	flex: 1;
	min-height: 140px;
}

.td-pg-result-board {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--td-border);
	background: var(--td-modal-bg-solid);
	box-shadow: 0 4px 22px -12px var(--td-glow);
	flex-shrink: 0;
	transition:
		box-shadow 0.35s ease,
		border-color 0.35s ease;
}

.td-pg-result-board--success {
	border-color: rgba(22, 163, 74, 0.45);
	box-shadow:
		0 4px 28px -10px var(--td-glow),
		0 0 0 1px rgba(22, 163, 74, 0.2);
}

.td-pg-result-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: var(--td-card-inner);
	border-bottom: 1px solid var(--td-border);
}

.td-pg-result-title {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--td-accent);
}

.td-pg-table-wrap {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition:
		max-height 0.45s ease,
		opacity 0.35s ease;
}

.td-pg-result-board--show-results .td-pg-table-wrap {
	max-height: 220px;
	opacity: 1;
}

.td-pg-table-scroll {
	max-height: 200px;
	overflow: auto;
	padding: 0 12px 12px;
	scrollbar-width: thin;
	scrollbar-color: var(--td-border) transparent;
}

.td-pg-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 0.75rem;
	font-family:
		ui-monospace,
		SFMono-Regular,
		Menlo,
		Consolas,
		monospace;
	font-variant-ligatures: none;
	font-feature-settings:
		'liga' 0,
		'calt' 0;
}

.td-pg-table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 10px 12px;
	text-align: left;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: lowercase;
	color: var(--td-accent);
	background: var(--td-card-inner);
	border-bottom: 1px solid var(--td-border);
	white-space: nowrap;
}

.td-pg-table tbody td {
	padding: 9px 12px;
	border-bottom: 1px solid var(--td-border);
	color: var(--td-text);
}

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

.td-pg-table tbody tr:hover td {
	background: rgba(3, 105, 161, 0.06);
}

body.dark .td-pg-table tbody tr:hover td {
	background: rgba(100, 181, 246, 0.08);
}

.td-pg-rows-badge {
	margin: 0 14px 14px;
	padding: 12px 14px;
	border-radius: 10px;
	text-align: center;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(135deg, rgb(22, 163, 74), rgb(21, 128, 61));
	box-shadow: 0 6px 20px -8px rgba(22, 163, 74, 0.55);
	animation: td-jenkins-badge-in 0.45s ease;
}

.td-pg-rows-badge--hidden {
	display: none;
}

/* Postman demo: request builder + response + console */
.td-code-block--js code {
	display: block;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	font-variant-ligatures: none;
	font-feature-settings:
		'liga' 0,
		'calt' 0,
		'dlig' 0;
	white-space: pre-wrap;
	word-break: break-word;
}

.td-pm-right-column {
	gap: 12px;
}

.td-pm-right-column .tool-detail-terminal {
	flex: 1;
	min-height: 140px;
}

.td-pm-request-pane .td-pm-request-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 0;
	padding: 12px 14px 14px;
	box-sizing: border-box;
}

.td-pm-method-row {
	display: flex;
	align-items: stretch;
	gap: 10px;
}

.td-pm-method-badge {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(135deg, var(--td-accent), #0369a1);
	box-shadow: 0 4px 14px -6px var(--td-glow);
}

body.dark .td-pm-method-badge {
	background: linear-gradient(135deg, var(--td-accent), #1565c0);
}

.td-pm-url-field {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 0.78rem;
	line-height: 1.4;
	font-family:
		ui-monospace,
		SFMono-Regular,
		Menlo,
		Consolas,
		monospace;
	font-variant-ligatures: none;
	font-feature-settings:
		'liga' 0,
		'calt' 0;
	border: 1px solid var(--td-border);
	background: var(--td-code-bg);
	color: var(--td-text);
}

.td-pm-section-label {
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--td-muted);
	margin-bottom: 6px;
}

.td-pm-headers-pre {
	margin: 0;
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--td-code-bg);
	border: 1px solid var(--td-border);
	font-size: 0.78rem;
	line-height: 1.5;
	font-family:
		ui-monospace,
		SFMono-Regular,
		Menlo,
		Consolas,
		monospace;
	font-variant-ligatures: none;
	font-feature-settings:
		'liga' 0,
		'calt' 0;
	color: var(--td-text);
	white-space: pre-wrap;
	word-break: break-word;
}

.td-pm-response-board {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--td-border);
	background: var(--td-modal-bg-solid);
	box-shadow: 0 4px 22px -12px var(--td-glow);
	flex-shrink: 0;
	transition:
		box-shadow 0.35s ease,
		border-color 0.35s ease;
}

.td-pm-response-board--success {
	border-color: rgba(22, 163, 74, 0.45);
	box-shadow:
		0 4px 28px -10px var(--td-glow),
		0 0 0 1px rgba(22, 163, 74, 0.2);
}

.td-pm-response-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: var(--td-card-inner);
	border-bottom: 1px solid var(--td-border);
}

.td-pm-response-title {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--td-accent);
}

.td-pm-response-inner {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 4px;
}

.td-pm-response-meta--hidden,
.td-pm-json-wrap--hidden {
	display: none;
}

.td-pm-meta-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 10px;
	font-size: 0.8125rem;
	padding: 4px 14px 0;
}

.td-pm-meta-label {
	color: var(--td-muted);
	font-weight: 600;
}

.td-pm-status-badge {
	display: inline-flex;
	align-items: center;
	padding: 5px 11px;
	border-radius: 8px;
	font-weight: 800;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	background: rgba(22, 163, 74, 0.12);
	color: rgb(22, 163, 74);
	border: 1px solid rgba(22, 163, 74, 0.35);
}

.td-pm-time-value {
	font-weight: 700;
	color: var(--td-text);
	font-variant-numeric: tabular-nums;
}

.td-pm-json-label {
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--td-muted);
	padding: 0 14px;
	margin-top: 4px;
}

.td-pm-json-pre {
	margin: 0 14px;
	padding: clamp(12px, 2.5vw, 14px) clamp(12px, 3vw, 16px);
	border-radius: 10px;
	background: var(--td-code-bg);
	border: 1px solid var(--td-border);
	max-height: min(38vh, 260px);
	overflow: auto;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-gutter: stable;
	scrollbar-width: thin;
	scrollbar-color: var(--td-border) transparent;
}

.td-pm-json-code {
	display: block;
	margin: 0;
	padding: 0;
	font-size: clamp(0.75rem, 0.68rem + 0.35vw, 0.875rem);
	line-height: 1.65;
	font-family:
		ui-monospace,
		SFMono-Regular,
		Menlo,
		Consolas,
		monospace;
	font-variant-ligatures: none;
	font-feature-settings:
		'liga' 0,
		'calt' 0,
		'dlig' 0;
	color: var(--td-text);
	white-space: pre;
	word-break: normal;
	overflow-wrap: normal;
}

.td-pm-success-badge {
	margin: 0 14px 14px;
	padding: 12px 14px;
	border-radius: 10px;
	text-align: center;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(135deg, rgb(22, 163, 74), rgb(21, 128, 61));
	box-shadow: 0 6px 20px -8px rgba(22, 163, 74, 0.55);
	animation: td-jenkins-badge-in 0.45s ease;
}

.td-pm-success-badge--hidden {
	display: none;
}

/* Jira demo: Atlassian-style board + issue card + activity timeline */
.td-code-block--ticket {
	font-variant-ligatures: none;
	font-feature-settings:
		'liga' 0,
		'calt' 0;
	white-space: pre-wrap;
}

.td-jira-ide {
	--td-jira-brand: #0052cc;
	--td-jira-brand-bright: #0c66e4;
	--td-jira-surface: #f7f8f9;
	--td-jira-column-bg: #ebecf0;
	--td-jira-card-bg: #ffffff;
	--td-jira-line: rgba(9, 30, 66, 0.14);
}

body.dark .td-jira-ide {
	--td-jira-brand: #579dff;
	--td-jira-brand-bright: #85b8ff;
	--td-jira-surface: rgba(255, 255, 255, 0.04);
	--td-jira-column-bg: rgba(255, 255, 255, 0.06);
	--td-jira-card-bg: var(--td-modal-bg-solid);
	--td-jira-line: rgba(166, 197, 255, 0.2);
}

.td-jira-right-column {
	gap: 12px;
}

.td-jira-issue-shell {
	display: flex;
	flex-direction: column;
	min-height: 0;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--td-border);
	background: var(--td-modal-bg-solid);
	box-shadow:
		0 4px 24px -12px var(--td-glow),
		0 0 0 1px var(--td-jira-line);
}

.td-jira-issue-shell-head {
	padding: 11px 14px;
	background: linear-gradient(
		135deg,
		rgba(0, 82, 204, 0.12) 0%,
		rgba(12, 102, 228, 0.08) 50%,
		transparent 100%
	);
	border-bottom: 1px solid var(--td-border);
}

body.dark .td-jira-issue-shell-head {
	background: linear-gradient(
		135deg,
		rgba(87, 157, 255, 0.14) 0%,
		rgba(38, 132, 255, 0.08) 55%,
		transparent 100%
	);
}

.td-jira-issue-shell-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--td-jira-brand);
}

.td-jira-issue-shell-title i {
	opacity: 0.95;
	font-size: 1rem;
}

.td-jira-issue-shell-body {
	flex: 1;
	min-height: 0;
	padding: 14px;
	overflow: auto;
	background: var(--td-jira-surface);
}

body.dark .td-jira-issue-shell-body {
	background: var(--td-card-inner);
}

.td-jira-issue-card {
	border-radius: 12px;
	padding: 14px 14px 16px;
	background: var(--td-jira-card-bg);
	border: 1px solid var(--td-border);
	box-shadow:
		0 1px 1px var(--td-jira-line),
		0 8px 24px -12px rgba(9, 30, 66, 0.2);
}

body.dark .td-jira-issue-card {
	box-shadow:
		0 1px 1px var(--td-jira-line),
		0 10px 28px -14px rgba(0, 0, 0, 0.45);
}

.td-jira-issue-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.td-jira-issue-card-key {
	font-size: 0.8125rem;
	font-weight: 800;
	font-family:
		ui-monospace,
		SFMono-Regular,
		Menlo,
		Consolas,
		monospace;
	font-variant-ligatures: none;
	color: var(--td-jira-brand);
	letter-spacing: 0.02em;
}

.td-jira-issue-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--td-jira-brand-bright), var(--td-jira-brand));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	box-shadow: 0 2px 8px -2px rgba(0, 82, 204, 0.45);
	flex-shrink: 0;
}

.td-jira-issue-card-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.td-jira-chip {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 3px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.td-jira-chip--bug {
	background: #dfe1e6;
	color: #42526e;
	border: none;
}

body.dark .td-jira-chip--bug {
	background: rgba(166, 197, 255, 0.15);
	color: #b6c2cf;
}

.td-jira-chip--priority {
	background: #ffebe6;
	color: #bf2600;
	border: none;
}

body.dark .td-jira-chip--priority {
	background: rgba(255, 171, 0, 0.18);
	color: #f18d13;
}

.td-jira-chip--mini {
	padding: 2px 7px;
	font-size: 0.625rem;
	border-radius: 3px;
}

.td-jira-issue-card-heading {
	margin: 0 0 14px;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.45;
	color: var(--td-text);
	letter-spacing: 0.01em;
}

.td-jira-issue-card-assignee {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8125rem;
	color: var(--td-muted);
	margin-bottom: 12px;
}

.td-jira-issue-card-assignee i {
	color: var(--td-jira-brand);
	opacity: 0.9;
}

.td-jira-issue-card-assignee strong {
	color: var(--td-text);
	font-weight: 700;
}

.td-jira-issue-card-labels {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
}

.td-jira-label {
	display: inline-flex;
	padding: 3px 8px;
	border-radius: 3px;
	font-size: 0.75rem;
	font-weight: 600;
	background: var(--td-jira-column-bg);
	color: var(--td-text);
	border: none;
}

.td-jira-label--mini {
	font-size: 0.6875rem;
	padding: 2px 6px;
}

.td-jira-issue-card-footer {
	padding-top: 4px;
	border-top: 1px solid var(--td-border);
}

.td-jira-status-pill {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: 3px;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition:
		background 0.25s ease,
		color 0.25s ease,
		box-shadow 0.25s ease;
}

.td-jira-status-pill--todo {
	background: var(--td-jira-column-bg);
	color: #5e6c84;
	box-shadow: inset 0 0 0 1px var(--td-jira-line);
}

body.dark .td-jira-status-pill--todo {
	color: #9fadbc;
}

.td-jira-status-pill--progress {
	background: #deebff;
	color: #0747a6;
	box-shadow: inset 0 0 0 1px rgba(0, 82, 204, 0.25);
}

body.dark .td-jira-status-pill--progress {
	background: rgba(87, 157, 255, 0.2);
	color: var(--td-jira-brand-bright);
}

.td-jira-status-pill--review {
	background: #e6fcff;
	color: #006644;
	box-shadow: inset 0 0 0 1px rgba(0, 102, 68, 0.2);
}

body.dark .td-jira-status-pill--review {
	background: rgba(54, 179, 126, 0.18);
	color: #7ee2c1;
}

.td-jira-status-pill--done {
	background: #e3fcef;
	color: #006644;
	box-shadow: inset 0 0 0 1px rgba(0, 102, 68, 0.28);
}

body.dark .td-jira-status-pill--done {
	background: rgba(54, 179, 126, 0.22);
	color: #84f7c8;
}

.td-jira-kanban-board {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--td-border);
	background: var(--td-modal-bg-solid);
	box-shadow:
		0 4px 24px -12px var(--td-glow),
		0 0 0 1px var(--td-jira-line);
	flex-shrink: 0;
	transition:
		box-shadow 0.35s ease,
		border-color 0.35s ease;
}

.td-jira-kanban-board--success {
	border-color: rgba(22, 163, 74, 0.45);
	box-shadow:
		0 4px 28px -10px var(--td-glow),
		0 0 0 1px rgba(22, 163, 74, 0.22);
}

.td-jira-kanban-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: linear-gradient(
		90deg,
		rgba(0, 82, 204, 0.14) 0%,
		rgba(12, 102, 228, 0.06) 45%,
		transparent 100%
	);
	border-bottom: 1px solid var(--td-border);
}

body.dark .td-jira-kanban-head {
	background: linear-gradient(
		90deg,
		rgba(87, 157, 255, 0.16) 0%,
		rgba(38, 132, 255, 0.06) 50%,
		transparent 100%
	);
}

.td-jira-kanban-head-icon {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--td-jira-brand);
	box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.2);
	flex-shrink: 0;
}

body.dark .td-jira-kanban-head-icon {
	box-shadow: 0 0 0 3px rgba(87, 157, 255, 0.25);
}

.td-jira-kanban-head-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.td-jira-kanban-eyebrow {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--td-jira-brand);
	opacity: 0.9;
}

.td-jira-kanban-title {
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--td-text);
}

.td-jira-kanban-cols {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	padding: 12px 12px 8px;
	min-height: 176px;
	background: var(--td-jira-surface);
}

body.dark .td-jira-kanban-cols {
	background: rgba(0, 0, 0, 0.15);
}

@media (max-width: 720px) {
	.td-jira-kanban-cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		min-height: 240px;
	}
}

.td-jira-column {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border-radius: 12px;
	border: 1px solid var(--td-jira-line);
	background: var(--td-jira-column-bg);
	transition:
		border-color 0.35s ease,
		box-shadow 0.35s ease,
		transform 0.35s ease;
}

.td-jira-column--active {
	border-color: var(--td-jira-brand);
	box-shadow:
		0 0 0 2px rgba(0, 82, 204, 0.2),
		0 10px 28px -14px rgba(0, 82, 204, 0.35);
	transform: translateY(-1px);
}

body.dark .td-jira-column--active {
	border-color: var(--td-jira-brand-bright);
	box-shadow:
		0 0 0 2px rgba(87, 157, 255, 0.28),
		0 12px 32px -14px rgba(0, 0, 0, 0.5);
}

.td-jira-column-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 10px;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #5e6c84;
	border-bottom: 1px solid var(--td-jira-line);
}

body.dark .td-jira-column-title {
	color: #9fadbc;
}

.td-jira-col-count {
	min-width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	font-size: 0.625rem;
	font-weight: 800;
	background: rgba(9, 30, 66, 0.08);
	color: #42526e;
}

body.dark .td-jira-col-count {
	background: rgba(255, 255, 255, 0.1);
	color: #dcdfe4;
}

.td-jira-column-body {
	flex: 1;
	min-height: 100px;
	padding: 10px 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.td-jira-card {
	border-radius: 8px;
	padding: 10px 10px 11px;
	background: var(--td-jira-card-bg);
	border: none;
	box-shadow:
		0 1px 2px var(--td-jira-line),
		0 4px 12px -4px rgba(9, 30, 66, 0.18);
	cursor: default;
	transition:
		transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1),
		box-shadow 0.35s ease;
}

body.dark .td-jira-card {
	box-shadow:
		0 1px 2px var(--td-jira-line),
		0 6px 18px -8px rgba(0, 0, 0, 0.5);
}

.td-jira-column--active .td-jira-card {
	transform: translateY(-3px);
	box-shadow:
		0 4px 14px -4px rgba(0, 82, 204, 0.35),
		0 8px 22px -10px rgba(9, 30, 66, 0.25);
}

body.dark .td-jira-column--active .td-jira-card {
	box-shadow:
		0 4px 18px -6px rgba(87, 157, 255, 0.35),
		0 10px 28px -12px rgba(0, 0, 0, 0.55);
}

.td-jira-card--moving {
	animation: td-jira-card-move 0.5s cubic-bezier(0.34, 1.35, 0.64, 1);
}

@keyframes td-jira-card-move {
	0% {
		transform: scale(0.96);
		opacity: 0.88;
	}
	55% {
		transform: scale(1.02);
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.td-jira-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.td-jira-card-key {
	font-size: 0.72rem;
	font-weight: 800;
	font-family:
		ui-monospace,
		SFMono-Regular,
		Menlo,
		Consolas,
		monospace;
	font-variant-ligatures: none;
	color: var(--td-jira-brand);
}

.td-jira-card-title {
	margin: 0 0 8px;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--td-text);
}

.td-jira-card-labels {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.td-jira-activity-panel {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--td-border);
	background: var(--td-modal-bg-solid);
	box-shadow: 0 4px 22px -12px var(--td-glow);
	flex: 1;
	min-height: 140px;
	display: flex;
	flex-direction: column;
	min-height: 0;
	transition:
		box-shadow 0.35s ease,
		border-color 0.35s ease;
}

.td-jira-activity-panel--success {
	border-color: rgba(22, 163, 74, 0.4);
	box-shadow:
		0 4px 26px -10px var(--td-glow),
		0 0 0 1px rgba(22, 163, 74, 0.2);
}

.td-jira-activity-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: var(--td-card-inner);
	border-bottom: 1px solid var(--td-border);
}

.td-jira-activity-head-icon {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--td-jira-brand);
	opacity: 0.9;
	flex-shrink: 0;
}

.td-jira-activity-title {
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--td-jira-brand);
}

.td-jira-activity-body {
	flex: 1;
	min-height: 120px;
	max-height: min(38vh, 280px);
	overflow: auto;
	padding: 14px 12px 14px 8px;
	background: var(--td-jira-surface);
	scrollbar-width: thin;
	scrollbar-color: var(--td-border) transparent;
}

body.dark .td-jira-activity-body {
	background: var(--td-card-inner);
}

.td-jira-timeline {
	display: flex;
	flex-direction: column;
	gap: 0;
	position: relative;
	padding-left: 4px;
}

.td-jira-timeline:has(.td-jira-timeline-placeholder:only-child)::before {
	display: none;
}

.td-jira-timeline-placeholder {
	margin: 0;
	padding: 14px 16px;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--td-muted);
	border-radius: 10px;
	border: 1px dashed var(--td-jira-line);
	background: var(--td-jira-card-bg);
	box-shadow: 0 1px 2px var(--td-jira-line);
}

.td-jira-timeline::before {
	content: '';
	position: absolute;
	left: 11px;
	top: 10px;
	bottom: 10px;
	width: 2px;
	background: linear-gradient(180deg, var(--td-jira-brand) 0%, rgba(0, 82, 204, 0.2) 100%);
	border-radius: 2px;
	opacity: 0.45;
}

body.dark .td-jira-timeline::before {
	background: linear-gradient(180deg, var(--td-jira-brand-bright) 0%, rgba(87, 157, 255, 0.15) 100%);
}

.td-jira-timeline-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	position: relative;
	padding: 10px 0 10px 0;
	opacity: 0;
	transform: translateX(-8px);
	transition:
		opacity 0.4s ease,
		transform 0.45s cubic-bezier(0.34, 1.35, 0.64, 1);
}

.td-jira-timeline-item--show {
	opacity: 1;
	transform: translateX(0);
}

.td-jira-timeline-dot {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	margin-top: 5px;
	margin-left: 2px;
	border-radius: 50%;
	background: var(--td-jira-card-bg);
	border: 2px solid var(--td-jira-brand);
	box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.12);
	z-index: 1;
}

body.dark .td-jira-timeline-dot {
	box-shadow: 0 0 0 3px rgba(87, 157, 255, 0.18);
}

.td-jira-timeline-inner {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	flex: 1;
	padding: 8px 12px 10px;
	border-radius: 10px;
	background: var(--td-jira-card-bg);
	border: 1px solid var(--td-jira-line);
	box-shadow: 0 2px 8px -4px rgba(9, 30, 66, 0.12);
}

body.dark .td-jira-timeline-inner {
	box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.4);
}

.td-jira-timeline-time {
	font-size: 0.72rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--td-jira-brand);
	letter-spacing: 0.04em;
}

.td-jira-timeline-msg {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--td-text);
	line-height: 1.4;
}

.td-jira-resolved-badge {
	margin: 0 12px 12px;
	padding: 12px 14px;
	border-radius: 10px;
	text-align: center;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(135deg, rgb(22, 163, 74), rgb(21, 128, 61));
	box-shadow: 0 6px 20px -8px rgba(22, 163, 74, 0.55);
	animation: td-jenkins-badge-in 0.45s ease;
}

.td-jira-resolved-badge--hidden {
	display: none;
}

/* Git / GitHub / GitLab demo + official multi-CTA */
.td-git-official-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 10px;
	margin-top: 4px;
}

.td-git-official-grid .tool-detail-official-btn {
	width: 100%;
	justify-content: center;
	text-align: center;
}

.td-git-right-column {
	gap: 12px;
}

.td-git-right-column .tool-detail-terminal {
	flex: 1;
	min-height: 140px;
}

.td-git-flow {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--td-border);
	background: var(--td-modal-bg-solid);
	box-shadow: 0 4px 22px -12px var(--td-glow);
	flex-shrink: 0;
	transition:
		border-color 0.35s ease,
		box-shadow 0.35s ease;
}

.td-git-flow--success {
	border-color: rgba(22, 163, 74, 0.4);
	box-shadow:
		0 4px 28px -10px var(--td-glow),
		0 0 0 1px rgba(22, 163, 74, 0.18);
}

.td-git-flow-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: var(--td-card-inner);
	border-bottom: 1px solid var(--td-border);
}

.td-git-flow-title {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--td-accent);
}

.td-git-flow-body {
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.td-git-graph-wrap {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.td-git-main-lane {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.td-git-branch-pill {
	display: inline-flex;
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: 8px;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: var(--td-card-inner);
	border: 1px solid var(--td-border);
	color: var(--td-text);
}

.td-git-branch-pill--main {
	color: var(--td-accent);
	border-color: var(--td-accent-soft);
}

.td-git-lane-rail {
	display: flex;
	align-items: center;
	gap: 0;
	min-height: 22px;
}

.td-git-rail-seg {
	flex: 1;
	height: 3px;
	min-width: 24px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--td-accent-soft), var(--td-border));
	opacity: 0.85;
}

.td-git-node {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex-shrink: 0;
	border: 2px solid var(--td-border);
	background: var(--td-code-bg);
	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease,
		background 0.3s ease,
		border-color 0.3s ease;
}

.td-git-node--root {
	background: var(--td-accent);
	border-color: var(--td-accent);
	box-shadow: 0 0 12px -4px var(--td-glow);
}

.td-git-node--tip {
	background: var(--td-card-inner);
}

.td-git-node--tip.td-git--merge-active {
	background: rgb(22, 163, 74);
	border-color: rgb(21, 128, 61);
	box-shadow: 0 0 14px -4px rgba(22, 163, 74, 0.55);
	transform: scale(1.12);
}

.td-git-feature-lane {
	display: flex;
	gap: 0;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transform: translateY(-6px);
	transition:
		opacity 0.4s ease,
		max-height 0.45s ease,
		transform 0.4s ease;
}

.td-git-feature-lane.td-git--show {
	max-height: 120px;
	opacity: 1;
	transform: translateY(0);
}

.td-git-feature-curve {
	width: 14px;
	flex-shrink: 0;
	border-left: 3px solid var(--td-accent-soft);
	border-bottom: 3px solid var(--td-accent-soft);
	border-bottom-left-radius: 12px;
	margin-top: 0;
	margin-bottom: 18px;
	opacity: 0.9;
}

.td-git-feature-inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.td-git-lane-rail--feature {
	min-height: 22px;
}

.td-git-node--commit {
	opacity: 0;
	transform: scale(0.4);
	pointer-events: none;
}

.td-git-node--commit.td-git--show {
	opacity: 1;
	transform: scale(1);
	background: var(--td-accent);
	border-color: var(--td-accent);
	box-shadow: 0 0 12px -4px var(--td-glow);
}

.td-git-merge-note {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	color: rgb(22, 163, 74);
	letter-spacing: 0.04em;
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transition: opacity 0.35s ease, max-height 0.35s ease;
}

.td-git-merge-note.td-git--show {
	opacity: 1;
	max-height: 40px;
}

.td-git-flow-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	min-height: 32px;
}

.td-git-toolbar-pill {
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 6px 11px;
	border-radius: 8px;
	background: var(--td-card-inner);
	border: 1px solid var(--td-border);
	color: var(--td-muted);
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
	transition:
		opacity 0.35s ease,
		transform 0.35s ease;
}

.td-git-toolbar-pill.td-git--show {
	opacity: 1;
	transform: translateY(0);
	color: var(--td-text);
}

.td-git-toolbar-pill--pr.td-git--show {
	border-color: var(--td-accent-soft);
	color: var(--td-accent);
	background: rgba(3, 105, 161, 0.08);
}

body.dark .td-git-toolbar-pill--pr.td-git--show {
	background: rgba(100, 181, 246, 0.1);
}

.td-git-cloud-sync {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--td-card-inner);
	border: 1px solid var(--td-border);
	color: var(--td-accent);
	opacity: 0;
	transform: scale(0.85);
	transition:
		opacity 0.35s ease,
		transform 0.35s ease;
}

.td-git-cloud-sync.td-git--show {
	opacity: 1;
	transform: scale(1);
	animation: td-git-cloud-pulse 1.2s ease-in-out infinite;
}

@keyframes td-git-cloud-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(3, 105, 161, 0.25);
	}
	50% {
		box-shadow: 0 0 0 8px rgba(3, 105, 161, 0);
	}
}

body.dark .td-git-cloud-sync.td-git--show {
	animation-name: td-git-cloud-pulse-dark;
}

@keyframes td-git-cloud-pulse-dark {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(100, 181, 246, 0.2);
	}
	50% {
		box-shadow: 0 0 0 8px rgba(100, 181, 246, 0);
	}
}

.td-git-sync-banner {
	margin: 0;
	padding: 11px 14px;
	border-radius: 10px;
	text-align: center;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(135deg, rgb(22, 163, 74), rgb(21, 128, 61));
	box-shadow: 0 6px 18px -8px rgba(22, 163, 74, 0.5);
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	padding-top: 0;
	padding-bottom: 0;
	transition:
		opacity 0.4s ease,
		max-height 0.4s ease,
		padding 0.4s ease;
}

.td-git-sync-banner.td-git--show {
	opacity: 1;
	max-height: 56px;
	padding-top: 11px;
	padding-bottom: 11px;
}

@media (max-width: 640px) {
	.td-java-ide {
		grid-template-columns: 1fr;
	}

	.tool-detail-run--compile {
		max-width: none;
	}
}