/* ============================================================
   hornt3ch.com — shared stylesheet
   All pages import this. Page-specific overrides follow below.
   ============================================================ */

/* ── DESIGN TOKENS ── */
:root {
  --bg:        #080c10;
  --bg2:       #0d1117;
  --panel:     #111820;
  --border:    #1e3a4a;
  --accent:    #00d4ff;   /* default cyan; overridden per page */
  --accent2:   #ff3c6e;
  --accent3:   #39ff14;
  --text:      #c8d8e8;
  --muted:     #4a6070;
  --font-mono: 'Share Tech Mono', monospace;
  --font-body: 'Rajdhani', sans-serif;
  --font-head: 'Orbitron', sans-serif;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ── BASE ── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}

/* Scanline overlay */
body::before {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,212,255,.018) 2px, rgba(0,212,255,.018) 4px
  );
  pointer-events: none;
  z-index: 999;
}

/* ── TYPOGRAPHY ── */
h1 {
  font-family: var(--font-head);
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: #fff;
  letter-spacing: .06em;
  line-height: 1.1;
}
h1 .hl  { color: var(--accent); }
h1 .hl2 { color: var(--accent2); }

h2 {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: #fff;
  letter-spacing: .06em;
  margin-bottom: 2.5rem;
}

h3 {
  font-family: var(--font-head);
  font-size: 1rem;
  color: #fff;
  letter-spacing: .08em;
  margin-bottom: .6rem;
}

/* ── NAV ── */
nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 2.5rem;
  background: rgba(8,12,16,.92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
}
.logo {
  font-family: var(--font-head);
  font-size: 1.25rem;
  color: #00d4ff;
  letter-spacing: .12em;
  text-decoration: none;
}
.logo span { color: var(--accent2); }
nav ul { list-style: none; display: flex; gap: 2rem; align-items: center; }
nav a {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .2s;
}
nav a:hover  { color: #00d4ff; }
nav a.active { color: var(--accent); }
.nav-back {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: #00d4ff;
  text-decoration: none;
  letter-spacing: .08em;
}
.nav-back:hover { color: #40e8ff; }
/* Home page CTA button in nav */
.nav-cta {
  background: var(--accent2) !important;
  color: #fff !important;
  padding: .35rem .9rem;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
  transition: background .2s !important;
}
.nav-cta:hover { background: #ff6090 !important; }

/* ── HEX BACKGROUND ── */
.hex-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hex-bg svg { width: 100%; height: 100%; opacity: .06; }

/* ── PAGE HERO (inner pages) ── */
#page-hero {
  padding: 4rem 2.5rem 3rem;
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.page-hero-inner {
  max-width: 1200px; margin: 0 auto;
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 2rem;
}
.breadcrumb {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--muted);
  margin-bottom: .8rem;
}
.breadcrumb a { color: #00d4ff; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.page-hero-sub { margin-top: .8rem; color: var(--muted); font-weight: 600; max-width: 560px; }

/* ── TAG FILTER ROW ── */
.tag-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.tag {
  font-family: var(--font-mono);
  font-size: .65rem;
  padding: .25rem .65rem;
  border: 1px solid var(--border);
  color: var(--accent);
  background: rgba(0,212,255,.05);
  letter-spacing: .08em;
  cursor: pointer;
  transition: all .2s;
}
.tag:hover, .tag.active { border-color: var(--accent); background: rgba(0,212,255,.14); }
.tag.blue  { color: #00d4ff; border-color: #0d2a3a; background: rgba(0,212,255,.05); }
.tag.blue:hover, .tag.blue.active { border-color: #00d4ff; background: rgba(0,212,255,.13); }
.tag.green { color: #39ff14; border-color: #1a3010; background: rgba(57,255,20,.05); }
.tag.green:hover, .tag.green.active { border-color: #39ff14; background: rgba(57,255,20,.12); }
.tag.red   { color: var(--accent2); border-color: #3a1020; background: rgba(255,60,110,.06); }
.tag.red:hover, .tag.red.active { border-color: var(--accent2); background: rgba(255,60,110,.12); }
.tag.orange { color: #ffb86c; border-color: #2a2010; background: rgba(255,184,108,.05); }
.tag.orange:hover, .tag.orange.active { border-color: #ffb86c; background: rgba(255,184,108,.13); }
.tag.purple { color: #bd93f9; border-color: #1e1030; background: rgba(189,147,249,.05); }
.tag.purple:hover, .tag.purple.active { border-color: #bd93f9; background: rgba(189,147,249,.14); }

/* ── PAGE BODY LAYOUT ── */
.page-body {
  max-width: 1200px; margin: 0 auto;
  padding: 3rem 2.5rem;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2.5rem;
  align-items: start;
}

/* ── SECTION LABEL ── */
.section-label {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--accent2);
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.section-label::before { content: '// '; opacity: .5; }

/* ── SEARCH BOX ── */
.search-box {
  display: flex;
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 2rem;
}
.search-box input {
  flex: 1; background: transparent; border: none; outline: none;
  padding: .6rem .8rem;
  font-family: var(--font-mono); font-size: .78rem;
  color: var(--text); caret-color: var(--accent);
}
.search-box input::placeholder { color: var(--muted); }
.search-box button {
  background: var(--border); border: none;
  padding: .6rem .9rem;
  color: var(--accent); cursor: pointer;
  font-size: .85rem; transition: background .2s;
}
.search-box button:hover { background: rgba(0,212,255,.2); }

/* ── TAB BAR ── */
.tab-bar {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
}
.tab {
  font-family: var(--font-mono); font-size: .75rem;
  letter-spacing: .08em; padding: .65rem 1.2rem;
  border: none; background: transparent;
  color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all .2s; text-transform: uppercase;
  margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── CODE SNIPPETS ── */
.snippet {
  background: var(--panel);
  border: 1px solid var(--border);
  margin-bottom: 1.5rem;
  overflow: hidden;
  transition: border-color .2s;
}
.snippet:hover { border-color: rgba(0,212,255,.35); }
.snippet-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 1rem;
  background: #0a1520;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap; gap: .5rem;
}
.snippet-title-group { display: flex; align-items: center; gap: .75rem; }
.snip-dots { display: flex; gap: .4rem; }
.snip-dot { width: 8px; height: 8px; border-radius: 50%; }
.snip-dot.r { background: #ff3c6e; }
.snip-dot.y { background: #ffd700; }
.snip-dot.g { background: #39ff14; }
.snippet-title { font-family: var(--font-mono); font-size: .75rem; color: var(--text); }
.snippet-meta { display: flex; align-items: center; gap: .75rem; }
.snip-tag {
  font-family: var(--font-mono); font-size: .6rem;
  padding: .2rem .55rem; border: 1px solid var(--border);
  color: var(--muted); letter-spacing: .08em;
}
.snip-tag.blue   { color: #00d4ff;  border-color: rgba(0,212,255,.3); }
.snip-tag.green  { color: #39ff14;  border-color: rgba(57,255,20,.3); }
.snip-tag.red    { color: var(--accent2); border-color: rgba(255,60,110,.3); }
.snip-tag.orange { color: #ffb86c;  border-color: rgba(255,184,108,.3); }
.snip-tag.purple { color: #bd93f9;  border-color: rgba(189,147,249,.3); }
.copy-btn {
  font-family: var(--font-mono); font-size: .65rem;
  padding: .25rem .65rem;
  background: transparent; border: 1px solid var(--border);
  color: var(--muted); cursor: pointer;
  letter-spacing: .08em; transition: all .2s;
}
.copy-btn:hover         { border-color: var(--accent); color: var(--accent); }
.copy-btn.copied        { border-color: #39ff14; color: #39ff14; }
.snippet-desc { padding: .6rem 1rem .3rem; font-size: .85rem; color: var(--muted); }
pre {
  margin: 0; padding: 1.2rem 1rem;
  font-family: var(--font-mono); font-size: .8rem;
  line-height: 1.75; overflow-x: auto; color: var(--text);
  tab-size: 2;
}

/* ── SYNTAX TOKENS ── */
.kw     { color: #ff79c6; }
.cm     { color: var(--muted); font-style: italic; }
.str    { color: #f1fa8c; }
.val    { color: #50fa7b; }
.cls    { color: #bd93f9; }
.fn     { color: #ffb86c; }
.op     { color: #ff79c6; }
.var    { color: #8be9fd; }
.cmd    { color: #00d4ff; }
.sql-kw { color: #00d4ff; }
.sql-fn { color: #ffb86c; }
.sql-t  { color: #bd93f9; }

/* ── TIPS ── */
.tip {
  display: flex; gap: 1.2rem;
  background: var(--panel); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 1.2rem; margin-bottom: 1rem;
}
.tip.warn   { border-left-color: #ffd700; }
.tip.danger { border-left-color: var(--accent2); }
.tip.success{ border-left-color: #39ff14; }
.tip.info   { border-left-color: #00d4ff; }
.tip.orange { border-left-color: #ffb86c; }
.tip-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: .1rem; }
.tip-title {
  font-family: var(--font-head); font-size: .9rem;
  color: #fff; letter-spacing: .06em; margin-bottom: .3rem;
}
.tip-text { font-size: .88rem; color: var(--muted); line-height: 1.55; }
.tip-text code {
  font-family: var(--font-mono); font-size: .8rem;
  color: var(--accent); background: rgba(0,212,255,.07);
  padding: .1rem .35rem;
}

/* ── HELP LINKS ── */
.link-group { margin-bottom: 1.8rem; }
.link-group-title {
  font-family: var(--font-head); font-size: .85rem;
  color: var(--muted); letter-spacing: .1em;
  margin-bottom: .75rem; text-transform: uppercase;
}
.link-card {
  display: flex; align-items: center; gap: 1rem;
  background: var(--panel); border: 1px solid var(--border);
  padding: .85rem 1rem; margin-bottom: .6rem;
  text-decoration: none; transition: all .2s;
}
.link-card:hover { border-color: var(--accent); padding-left: 1.3rem; }
.link-icon { font-size: 1.3rem; flex-shrink: 0; }
.link-name { font-family: var(--font-head); font-size: .92rem; color: #fff; letter-spacing: .05em; }
.link-url  { font-family: var(--font-mono); font-size: .65rem; color: var(--muted); }
.link-arrow { margin-left: auto; color: var(--muted); transition: color .2s; }
.link-card:hover .link-arrow { color: var(--accent); }

/* ── SIDEBAR ── */
.sidebar-widget {
  background: var(--panel);
  border: 1px solid var(--border);
  margin-bottom: 1.5rem; overflow: hidden;
}
.widget-header {
  padding: .7rem 1rem; background: #0a1520;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: .72rem;
  color: var(--accent); letter-spacing: .1em;
}
.widget-body { padding: 1rem; }
.cheat-row {
  font-family: var(--font-mono); font-size: .72rem;
  padding: .4rem 0; border-bottom: 1px solid rgba(30,58,74,.4);
  display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center;
}
.cheat-row:last-child { border-bottom: none; }
.cheat-cmd  { color: var(--accent); }
.cheat-desc { color: var(--muted); font-size: .65rem; text-align: right; }
.toc-link {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem 0; font-family: var(--font-mono); font-size: .72rem;
  color: var(--muted); text-decoration: none;
  border-bottom: 1px solid rgba(30,58,74,.3); transition: color .2s;
}
.toc-link:last-child { border-bottom: none; }
.toc-link:hover { color: var(--accent); }
.toc-link::before { content: '›'; color: var(--border); }

/* ── PAGINATION ── */
.pagination { display: flex; gap: .5rem; margin-top: 2rem; justify-content: center; }
.page-btn {
  font-family: var(--font-mono); font-size: .72rem;
  padding: .45rem .85rem;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer; transition: all .2s;
}
.page-btn:hover, .page-btn.active { border-color: var(--accent); color: var(--accent); }

/* ── FOOTER ── */
footer {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 2rem 2.5rem; text-align: center;
}
footer .logo { display: inline-block; margin-bottom: .5rem; }
footer p { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); }

/* ── BUTTONS ── */
.btn {
  font-family: var(--font-mono); font-size: .8rem;
  letter-spacing: .1em; text-decoration: none;
  padding: .7rem 1.6rem;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  transition: all .2s; cursor: pointer; border: none;
}
.btn-primary { background: var(--accent); color: #000; font-weight: 700; }
.btn-primary:hover { background: #40e8ff; }
.btn-ghost {
  background: transparent; border: 1px solid var(--border);
  color: var(--text); clip-path: none;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ── STATUS / CLUSTER ── */
.status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #39ff14; box-shadow: 0 0 8px #39ff14;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }

/* ── ANIMATIONS ── */
@keyframes blink { 50% { opacity: 0; } }
@keyframes grow  { from { width: 0; } }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .page-body { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
  .terminal-card { display: none; }
  .about-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  nav ul { display: none; }
  section { padding: 3rem 1.2rem; }
  .page-body { padding: 2rem 1.2rem; }
  #page-hero { padding: 2.5rem 1.2rem; }
}


/* ============================================================
   PAGE-SPECIFIC OVERRIDES
   Each page gets its own accent color and header tint.
   ============================================================ */

/* ── index.html (home) — cyan ── */
body.page-home {
  --accent: #00d4ff;
}
body.page-home nav a.active { color: #00d4ff; }

/* ── proxmox.html — cyan (default) ── */
body.page-proxmox {
  --accent: #00d4ff;
}
body.page-proxmox #page-hero { background: var(--bg); }
body.page-proxmox .snippet:hover { border-color: rgba(0,212,255,.35); }
body.page-proxmox .snippet-header { background: #0a1520; }
body.page-proxmox .widget-header  { background: #0a1520; color: #00d4ff; }

/* ── linux.html — green ── */
body.page-linux {
  --accent: #39ff14;
}
body.page-linux body::before {
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(57,255,20,.015) 2px, rgba(57,255,20,.015) 4px
  );
}
body.page-linux #page-hero { background: linear-gradient(135deg, #080c10 60%, #0a1a0a); }
body.page-linux .snippet:hover    { border-color: rgba(57,255,20,.35); }
body.page-linux .snippet-header   { background: #0a120a; }
body.page-linux .widget-header    { background: #0a120a; color: #39ff14; }
body.page-linux .search-box button:hover { background: rgba(57,255,20,.2); }
body.page-linux .tab.active       { color: #39ff14; border-bottom-color: #39ff14; }
body.page-linux .toc-link:hover   { color: #39ff14; }
body.page-linux .page-btn:hover, body.page-linux .page-btn.active { border-color: #39ff14; color: #39ff14; }
body.page-linux .tip-text code    { color: #39ff14; background: rgba(57,255,20,.07); }
body.page-linux .link-card:hover  { border-color: #39ff14; }
body.page-linux .link-card:hover .link-arrow { color: #39ff14; }
body.page-linux .copy-btn:hover   { border-color: #39ff14; color: #39ff14; }
body.page-linux nav a.active      { color: #39ff14; }

/* ── dev.html — purple ── */
body.page-dev {
  --accent: #bd93f9;
}
body.page-dev body::before {
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(189,147,249,.012) 2px, rgba(189,147,249,.012) 4px
  );
}
body.page-dev #page-hero { background: linear-gradient(135deg, #080c10 60%, #100a18); }
body.page-dev .snippet:hover    { border-color: rgba(189,147,249,.35); }
body.page-dev .snippet-header   { background: #0e0a18; }
body.page-dev .widget-header    { background: #0e0a18; color: #bd93f9; }
body.page-dev .search-box button:hover { background: rgba(189,147,249,.2); }
body.page-dev .tab.active       { color: #bd93f9; border-bottom-color: #bd93f9; }
body.page-dev .toc-link:hover   { color: #bd93f9; }
body.page-dev .page-btn:hover, body.page-dev .page-btn.active { border-color: #bd93f9; color: #bd93f9; }
body.page-dev .tip-text code    { color: #bd93f9; background: rgba(189,147,249,.07); }
body.page-dev .link-card:hover  { border-color: #bd93f9; }
body.page-dev .link-card:hover .link-arrow { color: #bd93f9; }
body.page-dev .copy-btn:hover   { border-color: #bd93f9; color: #bd93f9; }
body.page-dev nav a.active      { color: #bd93f9; }


/* ============================================================
   HOME PAGE SPECIFIC STYLES
   ============================================================ */
#hero {
  min-height: 92vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 5rem 2.5rem 4rem;
  position: relative; overflow: hidden;
}
.hero-grid {
  display: grid; grid-template-columns: 1fr 420px;
  gap: 3rem; max-width: 1200px; margin: 0 auto;
  width: 100%; align-items: center;
}
.hero-content { position: relative; z-index: 1; }
.terminal-tag {
  font-family: var(--font-mono); font-size: .8rem;
  color: #39ff14; letter-spacing: .08em; margin-bottom: 1.2rem;
}
.terminal-tag::before { content: '$ '; opacity: .5; }
.hero-sub { margin-top: 1.4rem; font-size: 1.1rem; color: var(--muted); max-width: 520px; font-weight: 600; }
.badge-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.badge {
  font-family: var(--font-mono); font-size: .72rem;
  padding: .3rem .75rem; border: 1px solid var(--border);
  color: #00d4ff; letter-spacing: .08em;
  clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
  background: rgba(0,212,255,.06);
}
.badge.red   { color: var(--accent2); border-color: #3a1020; background: rgba(255,60,110,.06); }
.badge.green { color: #39ff14; border-color: #1a3010; background: rgba(57,255,20,.05); }
.cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; }

/* Terminal card widget */
.terminal-card {
  position: relative; z-index: 1;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 2px; overflow: hidden;
  box-shadow: 0 0 40px rgba(0,212,255,.08);
}
.term-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem 1rem; background: #0a1520;
  border-bottom: 1px solid var(--border);
}
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.r { background: #ff3c6e; }
.dot.y { background: #ffd700; }
.dot.g { background: #39ff14; }
.term-title { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); margin-left: .3rem; }
.term-body  { padding: 1.2rem 1.5rem; font-family: var(--font-mono); font-size: .8rem; line-height: 2; }
.term-body .cmd { color: #39ff14; }
.term-body .val { color: #00d4ff; }
.term-body .cmt { color: var(--muted); }
.cursor {
  display: inline-block; width: 8px; height: 14px;
  background: #00d4ff; vertical-align: middle;
  animation: blink 1.1s step-end infinite;
}

/* Home sections */
section { padding: 5rem 2.5rem; }
.section-inner { max-width: 1200px; margin: 0 auto; }
#about { background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.stat-block { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
.stat { background: var(--panel); border: 1px solid var(--border); padding: 1.2rem 1rem; text-align: center; }
.stat-num { font-family: var(--font-head); font-size: 2rem; color: #00d4ff; }
.stat-lbl { font-family: var(--font-mono); font-size: .68rem; color: var(--muted); letter-spacing: .08em; }
.skill-list { display: flex; flex-direction: column; gap: 1rem; margin-top: .5rem; }
.skill-row  { display: flex; flex-direction: column; gap: .3rem; }
.skill-meta { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .72rem; color: var(--muted); }
.skill-bar  { height: 4px; background: var(--border); position: relative; }
.skill-fill {
  position: absolute; left: 0; top: 0; height: 100%;
  background: linear-gradient(90deg, #00d4ff, var(--accent2));
  animation: grow 1.5s ease forwards; transform-origin: left;
}
#content { background: var(--bg); }
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.5rem; }
.pillar {
  background: var(--panel); border: 1px solid var(--border);
  padding: 1.8rem 1.5rem; position: relative;
  transition: border-color .25s, box-shadow .25s;
}
.pillar:hover { border-color: #00d4ff; box-shadow: 0 0 20px rgba(0,212,255,.1); }
.pillar-icon { font-size: 2rem; margin-bottom: 1rem; display: block; }
.pillar p { font-size: .9rem; color: var(--muted); line-height: 1.5; }
.pillar-tag { position: absolute; top: 1rem; right: 1rem; font-family: var(--font-mono); font-size: .6rem; color: var(--accent2); letter-spacing: .1em; }
#platforms { background: var(--bg2); border-top: 1px solid var(--border); }
.platform-row { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; }
.platform-card {
  background: var(--panel); border: 1px solid var(--border);
  padding: 2rem 2.5rem; text-align: center; min-width: 200px;
  transition: all .25s; text-decoration: none; display: block;
}
.platform-card:hover { border-color: #00d4ff; transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,212,255,.12); }
.platform-card .picon { font-size: 2.5rem; display: block; margin-bottom: .75rem; }
.platform-card .pname { font-family: var(--font-head); font-size: .95rem; color: #fff; letter-spacing: .1em; }
.platform-card .phandle { font-family: var(--font-mono); font-size: .7rem; color: #00d4ff; margin-top: .3rem; }
#latest { background: var(--bg); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.card { background: var(--panel); border: 1px solid var(--border); overflow: hidden; transition: border-color .2s; }
.card:hover { border-color: #00d4ff; }
.card-thumb { height: 150px; display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.card-thumb.linux  { background: linear-gradient(135deg, #0d1f0d, #1a3a1a); }
.card-thumb.gaming { background: linear-gradient(135deg, #1a0d1a, #3a1a2a); }
.card-thumb.prox   { background: linear-gradient(135deg, #0d1520, #1a2a3a); }
.card-thumb.dev    { background: linear-gradient(135deg, #1a1a0d, #2a2a1a); }
.card-body  { padding: 1.2rem; }
.card-cat   { font-family: var(--font-mono); font-size: .65rem; color: var(--accent2); letter-spacing: .12em; text-transform: uppercase; }
.card h4    { font-family: var(--font-head); font-size: 1.05rem; color: #fff; margin: .4rem 0 .5rem; letter-spacing: .04em; }
.card p     { font-size: .85rem; color: var(--muted); }

/* Proxmox-specific */
.cluster-status {
  display: flex; align-items: center; gap: 1rem;
  background: var(--panel); border: 1px solid var(--border);
  padding: 1rem 1.5rem; white-space: nowrap;
}
.status-text  { font-family: var(--font-mono); font-size: .72rem; color: #39ff14; }
.status-label { font-family: var(--font-mono); font-size: .65rem; color: var(--muted); }
.node-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .5rem 0; border-bottom: 1px solid rgba(30,58,74,.5);
  font-family: var(--font-mono); font-size: .75rem;
}
.node-row:last-child { border-bottom: none; }
.node-name { color: var(--text); }
.node-status { font-size: .65rem; padding: .15rem .5rem; }
.node-status.online  { color: #39ff14; border: 1px solid rgba(57,255,20,.3); }
.node-status.offline { color: var(--accent2); border: 1px solid rgba(255,60,110,.3); }
.vm-row {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: .5rem; align-items: center;
  padding: .45rem 0; border-bottom: 1px solid rgba(30,58,74,.4);
  font-family: var(--font-mono); font-size: .7rem;
}
.vm-row:last-child { border-bottom: none; }
.vm-id   { color: var(--muted); }
.vm-name { color: var(--text); }
.vm-state { font-size: .62rem; padding: .12rem .45rem; }
.vm-state.run  { color: #39ff14; border: 1px solid rgba(57,255,20,.3); }
.vm-state.stop { color: var(--muted); border: 1px solid var(--border); }

/* Linux-specific */
.distro-strip { display: flex; gap: .75rem; flex-wrap: wrap; }
.distro-badge {
  font-family: var(--font-mono); font-size: .68rem;
  padding: .4rem .9rem; border: 1px solid var(--border);
  background: var(--panel); color: var(--muted); letter-spacing: .08em;
}
.distro-badge.active-distro { border-color: #39ff14; color: #39ff14; background: rgba(57,255,20,.07); }
.distro-list-item {
  font-family: var(--font-mono); font-size: .72rem;
  padding: .45rem 0; border-bottom: 1px solid rgba(30,58,74,.4);
  display: flex; justify-content: space-between;
}
.distro-list-item:last-child { border-bottom: none; }
.distro-name { color: var(--text); }
.distro-use  { color: var(--muted); font-size: .65rem; }

/* Dev-specific */
.stack-strip { display: flex; gap: .75rem; flex-wrap: wrap; }
.stack-badge {
  font-family: var(--font-mono); font-size: .68rem;
  padding: .4rem .9rem; border: 1px solid var(--border);
  background: var(--panel); color: var(--muted); letter-spacing: .08em;
}
.stack-badge.purple { border-color: rgba(189,147,249,.4); color: #bd93f9; background: rgba(189,147,249,.07); }
.stack-badge.orange { border-color: rgba(255,184,108,.3); color: #ffb86c; background: rgba(255,184,108,.06); }
.stack-badge.red    { border-color: rgba(255,60,110,.3);  color: var(--accent2); background: rgba(255,60,110,.06); }
.stack-badge.blue   { border-color: rgba(0,212,255,.3);   color: #00d4ff; background: rgba(0,212,255,.05); }
.xp-row {
  font-family: var(--font-mono); font-size: .72rem;
  padding: .45rem 0; border-bottom: 1px solid rgba(30,58,74,.4);
  display: flex; justify-content: space-between;
}
.xp-row:last-child { border-bottom: none; }
.xp-tech { color: var(--text); }
.xp-yrs  { color: #ffb86c; }