/* Demo skin — Voltage (EV & mobility · grid Volt Line · single 12 "Volt")
   Dark blueprint headers with a charge bar, spec-sheet list rows, mono labels,
   lime-on-ink controls and charge-ring taxonomy circles. */
html[data-demo="voltage"] {
	--vo-ink: #0b1020; --vo-lime: #a3e635; --vo-mono: 'JetBrains Mono', ui-monospace, monospace;
	--sk-radius: 10px; --sk-field-radius: 6px; --sk-btn-radius: 6px;
	--sk-head-align: left;
	--sk-head-bg: var(--vo-ink);
	--sk-head-fg: #ffffff; --sk-head-muted: rgba(255, 255, 255, .7);
	--sk-label-font: var(--vo-mono); --sk-label-size: 11.5px; --sk-label-ls: 1.5px; --sk-label-weight: 600;
	--sk-title-weight: 900; --sk-title-ls: -0.035em; --sk-btn-tt: none; --sk-btn-ls: .2px;
	--sk-soft: color-mix(in srgb, var(--accent) 5%, var(--bg-body));
}
html[data-demo="voltage"][data-theme="dark"] { --vo-ink: #070b16; --sk-soft: color-mix(in srgb, var(--accent) 7%, var(--bg-body)); }
html[data-demo="voltage"] :is(.archive-title, .author-name, .comments-title, .comment-reply-title, .classic-article-row .headline, .error-title) { font-family: 'Montserrat', var(--font-heading), sans-serif; }

/* ---------- Archive / author header: blueprint panel ---------- */
html[data-demo="voltage"] .archive-header,
html[data-demo="voltage"] .author-hero-section {
	border-bottom: 0;
	background-color: var(--vo-ink);
	background-image: radial-gradient(circle at 90% 20%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 40%), linear-gradient(rgba(163, 230, 53, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(163, 230, 53, .07) 1px, transparent 1px);
	background-size: auto, 32px 32px, 32px 32px;
}
html[data-demo="voltage"] .archive-header { padding: 76px 24px 70px; }
html[data-demo="voltage"] .archive-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--vo-lime) 0 62%, rgba(255, 255, 255, .12) 62%); }
html[data-demo="voltage"] .archive-header .container { padding-left: 26px; border-left: 0; }
html[data-demo="voltage"] .archive-header .container::before { content: ''; position: absolute; top: -18px; left: 0; width: 26px; height: 26px; border-top: 2px solid var(--vo-lime); border-left: 2px solid var(--vo-lime); }
html[data-demo="voltage"] .archive-label { color: var(--vo-lime); }
html[data-demo="voltage"] .archive-label::before { content: '//'; display: inline; width: auto; height: auto; background: none; opacity: .7; }
html[data-demo="voltage"] .archive-label::after { content: '\ed3c'; width: auto; height: auto; background: none; opacity: 1; font: 400 14px/1 'remixicon'; letter-spacing: 0; }
html[data-demo="voltage"] .archive-title { color: #fff; }
html[data-demo="voltage"] .archive-tag-prefix,
html[data-demo="voltage"] .archive-query { color: var(--vo-lime); }
html[data-demo="voltage"] .archive-desc { margin: 0; }
html[data-demo="voltage"] .archive-header .vt-circle-img { margin-left: 0; box-shadow: 0 0 0 3px var(--vo-ink), 0 0 0 5px var(--vo-lime); }
html[data-demo="voltage"] .author-role { background: var(--vo-lime); color: var(--vo-ink); font-weight: 700; }
html[data-demo="voltage"] .author-avatar { border-radius: 14px; box-shadow: 0 0 0 3px var(--vo-ink), 0 0 0 5px var(--vo-lime); }

/* ---------- Classic list rows: spec rows ---------- */
html[data-demo="voltage"] .classic-wide-container { border-top: 2px solid var(--text-main); }
html[data-demo="voltage"] .classic-article-row { position: relative; padding: 26px 0; }
html[data-demo="voltage"] .classic-article-row:last-child { border-bottom: 1px solid var(--border); }
html[data-demo="voltage"] .classic-article-row::before { content: ''; position: absolute; left: 0; top: -1px; width: 0; height: 2px; background: var(--accent); transition: width .4s ease; }
html[data-demo="voltage"] .classic-article-row:hover::before { width: 100%; }
html[data-demo="voltage"] .classic-meta-time { flex-basis: 96px; color: var(--text-muted); font: 600 11px/1.5 var(--vo-mono); letter-spacing: .5px; text-transform: uppercase; }
html[data-demo="voltage"] .classic-meta-time::before { content: '\ed3c'; display: block; margin-bottom: 8px; color: var(--accent-text, var(--accent)); font: 400 18px/1 'remixicon'; }
html[data-demo="voltage"] .classic-article-row .headline { font-weight: 800; letter-spacing: -.5px; }
html[data-demo="voltage"] .classic-article-row .headline a:hover { color: var(--accent-text, var(--accent)); }
html[data-demo="voltage"] .classic-thumb { flex-basis: 250px; overflow: hidden; border-radius: 8px; }
html[data-demo="voltage"] .category-tag { padding: 5px 8px; border-radius: 4px; background: var(--vo-ink); color: var(--vo-lime); font: 600 10.5px/1 var(--vo-mono); letter-spacing: 1px; text-transform: uppercase; }
html[data-demo="voltage"][data-theme="dark"] .category-tag { background: color-mix(in srgb, var(--vo-lime) 14%, transparent); }
html[data-demo="voltage"] .card-cat { font-family: var(--vo-mono); }

/* ---------- Load more / pagination ---------- */
html[data-demo="voltage"] .load-more-btn { padding: 14px 26px; border: 0; background: var(--vo-ink); color: #fff; font-family: 'Montserrat', sans-serif; font-size: 13.5px; }
html[data-demo="voltage"] .load-more-btn i { color: var(--vo-lime); }
html[data-demo="voltage"] .load-more-btn:hover { background: var(--accent-fill, var(--accent)); color: var(--on-accent-fill, #fff); }
html[data-demo="voltage"] .load-more-btn:hover i { color: #fff; }
html[data-demo="voltage"][data-theme="dark"] .load-more-btn { border: 1px solid color-mix(in srgb, var(--vo-lime) 40%, transparent); }
html[data-demo="voltage"] .ep-pagination.numeric-pagination a,
html[data-demo="voltage"] .ep-pagination.numeric-pagination span { font-family: var(--vo-mono); font-size: 13px; }
html[data-demo="voltage"] .ep-pagination.numeric-pagination span.current { border-color: var(--vo-ink); background: var(--vo-ink); color: var(--vo-lime); box-shadow: inset 0 -3px 0 var(--vo-lime); }
html[data-demo="voltage"][data-theme="dark"] .ep-pagination.numeric-pagination span.current { border-color: var(--vo-lime); }

/* ---------- Comments ---------- */
html[data-demo="voltage"] .comments-area { border-top: 3px solid var(--accent); }
html[data-demo="voltage"] .comments-title::after,
html[data-demo="voltage"] .comment-reply-title::after { width: 100%; height: 1px; border-radius: 0; background: linear-gradient(90deg, var(--accent) 0 60px, var(--border) 60px); }
html[data-demo="voltage"] .comment-content-wrap { border-radius: 0 10px 10px 10px; border-color: var(--border); background: var(--sk-soft); }
html[data-demo="voltage"] .comment-date { font-family: var(--vo-mono); font-size: 11px; }
html[data-demo="voltage"] .comment-avatar img { border-radius: 10px; }
html[data-demo="voltage"] .submit-btn { background: var(--vo-ink); color: #fff; box-shadow: inset 0 -3px 0 var(--vo-lime); font-family: 'Montserrat', sans-serif; }
html[data-demo="voltage"] .submit-btn:hover { background: var(--accent); }
html[data-demo="voltage"][data-theme="dark"] .submit-btn { background: var(--vo-lime); color: var(--vo-ink); box-shadow: none; }

/* ---------- Visual taxonomy index: charge rings ---------- */
html[data-demo="voltage"] .vt-circle-img { padding: 6px; border: 0; background: conic-gradient(var(--vo-lime) 0 72%, color-mix(in srgb, var(--text-main) 10%, transparent) 72%); box-shadow: none; }
html[data-demo="voltage"] .vt-circle-img img { border-radius: 50%; border: 4px solid var(--bg-body); }
html[data-demo="voltage"] .vt-grid-circle a:nth-child(2n) .vt-circle-img { background: conic-gradient(var(--vo-lime) 0 48%, color-mix(in srgb, var(--text-main) 10%, transparent) 48%); }
html[data-demo="voltage"] .vt-grid-circle a:nth-child(3n) .vt-circle-img { background: conic-gradient(var(--vo-lime) 0 88%, color-mix(in srgb, var(--text-main) 10%, transparent) 88%); }
html[data-demo="voltage"] .vt-grid-circle a:hover .vt-circle-img { background: var(--vo-lime); box-shadow: 0 14px 32px color-mix(in srgb, var(--accent) 28%, transparent); }
html[data-demo="voltage"] .vt-grid-circle h3 { font-family: 'Montserrat', var(--font-heading), sans-serif; font-weight: 800; }

@media (max-width: 768px) {
	html[data-demo="voltage"] .archive-header { padding: 54px 20px 50px !important; }
	html[data-demo="voltage"] .archive-header .container { padding-left: 16px; }
	html[data-demo="voltage"] .archive-header .container::before { top: -14px; width: 18px; height: 18px; }
}
@media (max-width: 600px) {
	html[data-demo="voltage"] .classic-meta-time { display: flex; align-items: center; gap: 8px; }
	html[data-demo="voltage"] .classic-meta-time::before { margin: 0; font-size: 14px; }
	html[data-demo="voltage"] .classic-thumb { flex-basis: auto; }
}