/* ==========================================================
   Zerbaib portfolio — full terminal theme
   ========================================================== */
:root,
:root[data-theme="dark"] {
  --bg: #0b0e0c;
  --bar: #141a16;
  --line: #24332a;
  --line-2: #2f4437;
  --text: #c9d7cd;
  --muted: #6e8576;
  --accent: #50fa7b;
  --accent-dim: rgba(80, 250, 123, .12);
  --on-accent: #04170a;
  --path: #6cb6ff;
  --warn: #f1fa8c;
  --pink: #ff79c6;
  --glow: 0 0 8px rgba(80, 250, 123, .45);
  --code-bg: #070908;
  --scan: rgba(0, 0, 0, .18);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f4f3ec;
  --bar: #e7e6dc;
  --line: #cfd2c4;
  --line-2: #b9bfad;
  --text: #1e2620;
  --muted: #66705f;
  --accent: #0f7a3a;
  --accent-dim: rgba(15, 122, 58, .10);
  --on-accent: #ffffff;
  --path: #1d4ed8;
  --warn: #9a6a00;
  --pink: #b0306f;
  --glow: none;
  --code-bg: #0d1210;
  --scan: transparent;
  color-scheme: light;
}

/* ==========================================================
   Base
   ========================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 64px; }

body {
  margin: 0;
  padding-bottom: 40px; /* room for the status bar */
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  transition: background-color .25s, color .25s;
}

/* CRT scanlines */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, var(--scan) 2px 3px);
}

::selection { background: var(--accent); color: var(--on-accent); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.3; font-weight: 700; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
code { font-family: inherit; font-size: inherit; }
.dim { color: var(--muted); }
.ok { color: var(--accent); }
.k { color: var(--path); font-weight: 700; }

main { max-width: 1060px; margin: 0 auto; padding: 0 20px; }

/* ==========================================================
   Prompt & terminal output
   ========================================================== */
.cmd { color: var(--text); overflow-wrap: anywhere; }
.ps1 { color: var(--muted); }
.ps1 b { color: var(--accent); text-shadow: var(--glow); }
.ps1 i { color: var(--path); font-style: normal; font-weight: 700; }
.cmd.small { font-size: 13px; margin-bottom: 8px; }
.cmd.small .ps1 { color: var(--accent); }

.out { margin-top: 6px; }
.block { padding: 34px 0 10px; }
.block > .cmd { margin-top: 26px; }
.block > .cmd:first-child { margin-top: 0; }

.comment { font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; margin-top: 10px; color: var(--text); }
.comment::before { content: "# "; color: var(--accent); }
.out.dim { font-size: 14px; }
.out.dim::before { content: "  "; white-space: pre; }

.cursor {
  display: inline-block;
  width: .6em;
  height: 1.15em;
  vertical-align: text-bottom;
  background: var(--accent);
  box-shadow: var(--glow);
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.type {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  white-space: nowrap;
  box-sizing: content-box;
  border-right: .6em solid var(--accent);
  animation: type 1s steps(8) .2s both, caret .1s 1.3s forwards;
}
@keyframes type { from { width: 0; } to { width: 8ch; } }
@keyframes caret { to { border-right-color: transparent; } }

/* ==========================================================
   Window title bar
   ========================================================== */
.titlebar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bar);
  border-bottom: 1px solid var(--line);
}
.titlebar-inner {
  max-width: 1060px;
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.dots { display: flex; gap: 7px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.dots i:nth-child(2) { background: #febc2e; }
.dots i:nth-child(3) { background: #28c840; }

.title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
}
.title img { width: 18px; height: 18px; }

.title-actions { display: flex; gap: 6px; }
.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--line-2);
  border-bottom-width: 3px;
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font: 700 12px "JetBrains Mono", monospace;
  cursor: pointer;
  transition: color .15s, border-color .15s, transform .1s;
}
.key:hover { color: var(--accent); border-color: var(--accent); }
.key:active { transform: translateY(2px); border-bottom-width: 1px; }

:root[data-theme="dark"] .i-moon,
:root[data-theme="light"] .i-sun { display: none; }

/* ==========================================================
   Buttons & tags
   ========================================================== */
.links { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.btn {
  display: inline-block;
  padding: 3px 4px;
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
  transition: background .12s, color .12s;
}
.btn::before { content: "[ "; color: var(--accent); }
.btn::after { content: " ]"; color: var(--accent); }
.btn:hover { background: var(--accent); color: var(--on-accent); }
.btn:hover::before, .btn:hover::after { color: var(--on-accent); }
.btn-primary { color: var(--accent); text-shadow: var(--glow); }
.btn-primary:hover { text-shadow: none; }

.tag { font-size: 12.5px; color: var(--muted); }
.tag::before { content: "#"; }
.tag-accent { color: var(--accent); }
.tag-warn { color: var(--warn); }

/* ==========================================================
   Neofetch hero
   ========================================================== */
.hero { padding-top: 30px; }

.banner {
  margin: 18px 0 8px;
  color: var(--accent);
  text-shadow: var(--glow);
  font-size: clamp(6.5px, 1.5vw, 15px);
  line-height: 1.05;
  letter-spacing: 0;
  overflow: hidden;
}

.neofetch {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 34px;
  align-items: center;
  margin: 18px 0 6px;
}
.nf-logo {
  width: 210px;
  padding: 8px;
  border: 1px dashed var(--line-2);
}
.nf-logo img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.nf-info p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-head b { color: var(--accent); text-shadow: var(--glow); }
.nf-sep { color: var(--muted); }
.verified { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; }
.nf-colors { display: flex; margin-top: 10px; }
.nf-colors i { width: 26px; height: 16px; background: #1e1e1e; }
.nf-colors i:nth-child(2) { background: #ff5555; }
.nf-colors i:nth-child(3) { background: #50fa7b; }
.nf-colors i:nth-child(4) { background: #f1fa8c; }
.nf-colors i:nth-child(5) { background: #6cb6ff; }
.nf-colors i:nth-child(6) { background: #ff79c6; }
.nf-colors i:nth-child(7) { background: #8be9fd; }
.nf-colors i:nth-child(8) { background: #e6e6e6; }

.lead { max-width: 760px; }

/* ==========================================================
   TUI boxes (title sits in the top border)
   ========================================================== */
.box {
  position: relative;
  display: block;
  margin-top: 30px;
  padding: 24px 22px 20px;
  border: 1px solid var(--line-2);
  background: var(--bg);
  transition: border-color .15s;
}
.box-title {
  position: absolute;
  top: 0;
  left: 14px;
  transform: translateY(-55%);
  padding: 0 8px;
  background: var(--bg);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.box-title::before { content: "┤ "; color: var(--line-2); }
.box-title::after { content: " ├"; color: var(--line-2); }
a.box:hover, .box:hover { border-color: var(--accent); }
a.box:hover .box-title::before, a.box:hover .box-title::after { color: var(--accent); }

/* ==========================================================
   Projects
   ========================================================== */
.feature-inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 34px;
  align-items: center;
}
.feature-reverse .feature-body { order: 2; }

.perm { font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.feature h3 { font-size: 26px; font-weight: 800; margin: 6px 0 10px; }
.desc { color: var(--muted); font-size: 14.5px; }
.desc code { color: var(--accent); }

.checks { margin: 16px 0 20px; display: grid; gap: 6px; }
.checks li { position: relative; padding-left: 26px; font-size: 14px; }
.checks li::before { content: "+"; position: absolute; left: 6px; color: var(--accent); font-weight: 800; }

.code {
  margin: 0;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.7;
  color: #cfd8d2;
  background: var(--code-bg);
  border-left: 2px solid var(--accent);
  overflow-x: auto;
}
.code .ln { display: inline-block; width: 2.6ch; margin-right: 12px; color: #4b5c51; text-align: right; user-select: none; }
.code .k { color: #ff79c6; font-weight: 400; }
.code .s { color: #f1fa8c; }
.code .n { color: #bd93f9; }
.install { margin-top: 10px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow-x: auto; }

/* Discord mock (kept modern on purpose) */
.discord-mock {
  border-radius: 6px;
  background: #313338;
  color: #dbdee1;
  overflow: hidden;
  border: 1px solid #1e1f22;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.dm-head { padding: 12px 16px; font-weight: 700; border-bottom: 1px solid #26282c; color: #f2f3f5; }
.dm-hash { color: #80848e; margin-right: 4px; }
.dm-msg { display: flex; gap: 14px; padding: 14px 16px 4px; }
.dm-msg > img, .dm-bot-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.dm-msg > img { background: #1e1f22; }
.dm-bot-avatar { background: #5865f2; display: grid; place-items: center; }
.dm-bot-avatar img { width: 22px; height: 22px; filter: invert(1); }
.dm-name { font-weight: 700; color: #f2f3f5; display: flex; align-items: center; gap: 6px; }
.dm-badge { font-size: 10px; background: #5865f2; color: #fff; border-radius: 4px; padding: 1px 5px; }
.dm-cmd { color: #c9cdfb; background: rgba(88, 101, 242, .2); border-radius: 4px; padding: 1px 6px; display: inline-block; margin-top: 2px; font-size: 14px; font-family: "JetBrains Mono", monospace; }
.dm-full { flex: 1; min-width: 0; padding-bottom: 16px; }
.dm-embed { margin-top: 6px; padding: 12px 14px; border-left: 4px solid #5865f2; border-radius: 6px; background: #2b2d31; }
.dm-embed-title { font-weight: 700; color: #f2f3f5; }
.dm-bar { height: 8px; border-radius: 4px; background: #1e1f22; margin: 10px 0; overflow: hidden; }
.dm-bar span { display: block; height: 100%; width: 68%; background: linear-gradient(90deg, #5865f2, #a35cf0); }
.dm-embed-foot { font-size: 11px; color: #949ba4; font-family: "JetBrains Mono", monospace; }

/* Other projects */
.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.card { margin-top: 18px; }
.card p { font-size: 13.5px; color: var(--muted); }
.card .card-meta { margin: 10px 0 4px; }
.card-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--line);
  filter: grayscale(.35) contrast(1.05);
  transition: filter .2s;
}
.card:hover .card-img { filter: none; }

/* ==========================================================
   Network
   ========================================================== */
.dn42 { border-color: var(--accent); }
.dn42-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 30px;
  align-items: center;
}
.svc { font-weight: 700; }
.svc-kv { padding-left: 2ch; font-size: 14px; }
.svc-kv .k { color: var(--muted); font-weight: 500; display: inline-block; width: 8ch; text-align: right; }
.dn42 .desc { margin-top: 12px; }
.dn42-diagram svg { width: 100%; max-width: 300px; margin: 0 auto; display: block; }
.dg-links line { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 4; animation: dash 1.4s linear infinite; }
.dg-links line.dim { stroke: var(--line-2); animation: none; }
.dg-peers rect { fill: var(--bg); stroke: var(--line-2); stroke-width: 1.5; }
.dg-me { fill: var(--accent); }
.dg-t1 { fill: var(--on-accent); font: 800 12px "JetBrains Mono", monospace; }
.dg-t2 { fill: var(--on-accent); opacity: .75; font: 700 10px "JetBrains Mono", monospace; }
.dg-t3 { fill: var(--muted); font: 700 9px "JetBrains Mono", monospace; }
@keyframes dash { to { stroke-dashoffset: -16; } }

.units { margin-top: 10px; border-top: 1px dashed var(--line); }
.unit {
  display: grid;
  grid-template-columns: 1.5ch 28px 19ch 15ch 1fr;
  gap: 12px;
  align-items: center;
  padding: 9px 6px;
  border-bottom: 1px dashed var(--line);
  font-size: 14px;
  transition: background .12s;
}
.unit:hover { background: var(--accent-dim); }
.unit-logo { display: grid; place-items: center; width: 28px; height: 28px; }
.unit-logo img, .unit-logo .mono-logo { width: 22px; height: 22px; }
.unit-logo.glyph { font-size: 10px; font-weight: 800; color: var(--accent); border: 1px solid var(--line-2); }
.unit-name { font-weight: 700; }
.unit-state { color: var(--accent); }
.unit-desc { color: var(--muted); font-size: 13.5px; }

/* Monochrome brand logos (Simple Icons) tinted with a CSS mask */
.mono-logo {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: var(--brand, var(--text));
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}

/* ==========================================================
   Skills
   ========================================================== */
.skill-group { margin-top: 16px; }
.dir { color: var(--path); font-weight: 700; }
.ls { display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 6px 0 0 4ch; border-left: 1px solid var(--line); margin-left: 1ch; }
.ls li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 6px;
  font-size: 14px;
  transition: background .12s, color .12s;
}
.ls li:hover { background: var(--accent-dim); color: var(--accent); }
.ls img, .ls .mono-logo { width: 20px; height: 20px; }
.ls-dim li { color: var(--muted); }
.skill-group:last-of-type .ls { border-left-color: transparent; }

/* Dark logos need a light chip in dark mode */
:root[data-theme="dark"] .ls img[src*="bash"],
:root[data-theme="dark"] .ls img[src*="githubactions"] { background: #fff; border-radius: 3px; padding: 1px; }

.pip { margin-top: 10px; }
.pip-row {
  display: grid;
  grid-template-columns: 22ch 1fr;
  gap: 16px;
  padding: 5px 6px;
  font-size: 14px;
}
.pip-row > span:first-child { font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.pip-row > span:last-child { color: var(--muted); }
.pip-head { border-bottom: 1px dashed var(--line-2); color: var(--muted); }
.pip-head > span:first-child, .pip-head > span:last-child { color: var(--muted); font-weight: 500; }
.pip-main > span:first-child { color: #7983f5; }
.pip-row:not(.pip-head):hover { background: var(--accent-dim); }

/* ==========================================================
   Contact & footer
   ========================================================== */
.contact-list { margin-top: 14px; display: grid; gap: 4px; max-width: 720px; }
.contact-item {
  display: grid;
  grid-template-columns: 11ch 20px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  font-size: 15px;
  transition: background .12s, color .12s;
}
.contact-item::after { content: "↵"; color: var(--muted); }
.ck { color: var(--path); font-weight: 700; }
.ck::after { content: " ="; color: var(--muted); font-weight: 400; }
.cv { overflow-wrap: anywhere; }
.contact-item .mono-logo { width: 18px; height: 18px; }
.contact-item:hover { background: var(--accent); color: var(--on-accent); }
.contact-item:hover .ck, .contact-item:hover .ck::after, .contact-item:hover::after, .contact-item:hover .dim { color: var(--on-accent); }

.footer { padding-bottom: 50px; }
.comment-line { color: var(--muted); font-size: 13px; }
.footer .comment-line[data-i18n]::before { content: "# "; }
.footer .cmd { margin-top: 16px; }

/* ==========================================================
   tmux status bar (navigation)
   ========================================================== */
.statusbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  height: 30px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 700;
}
.sb-session { padding: 0 12px; background: rgba(0, 0, 0, .18); height: 100%; display: flex; align-items: center; flex-shrink: 0; }
.sb-windows { display: flex; flex: 1; overflow-x: auto; scrollbar-width: none; height: 100%; }
.sb-windows::-webkit-scrollbar { display: none; }
.sb-windows a { padding: 0 10px; display: flex; align-items: center; white-space: nowrap; font-weight: 500; }
.sb-windows a:hover { background: rgba(0, 0, 0, .12); }
.sb-windows a.active { font-weight: 800; background: rgba(0, 0, 0, .22); }
.sb-windows a.active::after { content: "*"; }
.sb-right { padding: 0 12px; white-space: nowrap; flex-shrink: 0; }

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 960px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .feature-inner, .dn42-inner { grid-template-columns: 1fr; }
  .feature-reverse .feature-body { order: 0; }
  .unit { grid-template-columns: 1.5ch 28px 19ch 1fr; }
  .unit-state { display: none; }
}

@media (max-width: 720px) {
  main { padding: 0 16px; }
  .titlebar-inner { padding: 8px 16px; gap: 10px; }
  .title .dim { display: none; }
  .title { justify-content: flex-start; }
  body { font-size: 14px; }
  .neofetch { grid-template-columns: 1fr; gap: 16px; }
  .nf-logo { width: 140px; }
  .nf-info p { white-space: normal; }
  .box { padding: 22px 14px 16px; }
  .grid-3 { grid-template-columns: 1fr; }
  .unit { grid-template-columns: 1.5ch 28px 1fr; row-gap: 2px; }
  .unit-desc { grid-column: 3; }
  .pip-row { grid-template-columns: 1fr; gap: 0; padding: 7px 6px; }
  .pip-head { display: none; }
  .contact-item { grid-template-columns: 20px 1fr; }
  .contact-item .ck, .contact-item::after { display: none; }
  .ls { padding-left: 2ch; }
  .sb-right .sb-host { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dg-links line, .cursor, .type { animation: none; }
  .type { border-right: 0; }
  * { transition: none !important; }
}

/* Monochrome logo sources (paths relative to this stylesheet) */
.logo-mikrotik { --logo: url(../img/logos/mikrotik.svg); }
.logo-cisco { --logo: url(../img/logos/cisco.svg); }
.logo-proxmox { --logo: url(../img/logos/proxmox.svg); }
.logo-discord { --logo: url(../img/logos/discord.svg); }
.logo-pypi { --logo: url(../img/logos/pypi.svg); }

/* Let grid children shrink below their content (code blocks scroll instead) */
.feature-inner > *, .dn42-inner > *, .grid > *, .neofetch > *, .unit > *, .pip-row > *, .contact-item > * { min-width: 0; }