:root {
  --neon: #00ff66;
  --neon-dim: #008f39;
  --neon-glow: rgba(0, 255, 102, 0.45);
  --crimson: #ff1744;
  --crimson-glow: rgba(255, 23, 68, 0.5);
  --amber: #ff9100;
  --white: #ffffff;
  --bg-deep: #020402;
  --panel-bg: rgba(2, 8, 3, 0.95);
  --border-neon: 1px solid #00ff66;
  --border-dim: 1px solid rgba(0, 255, 102, 0.25);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-deep);
  color: var(--neon);
  font-family: 'Share Tech Mono', monospace;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 16px;
  position: relative;
  overflow-x: hidden;
  text-shadow: 0 0 2px rgba(0, 255, 102, 0.6);
}

/* Background Rain */
#matrix {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  opacity: 0.28;
}

/* Main Terminal Shell */
.window {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1050px;
  background: var(--panel-bg);
  border: 2px solid var(--neon);
  box-shadow: 0 0 25px rgba(0, 255, 102, 0.35), inset 0 0 15px rgba(0, 255, 102, 0.05);
}

/* CRT Scanlines across the whole window */
.window::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.35) 50%);
  background-size: 100% 4px;
  z-index: 40;
  pointer-events: none;
  opacity: 0.6;
}

.window-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  background: #001f0a;
  border-bottom: 2px solid var(--neon);
}

.window-controls .ctrl {
  display: inline-block;
  margin-right: 6px;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}
.window-controls .close { color: var(--crimson); text-shadow: 0 0 8px var(--crimson); }
.window-controls .min { color: var(--amber); }
.window-controls .max { color: var(--neon); }

.window-title {
  font-family: 'VT323', monospace;
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--white);
  text-shadow: 0 0 8px var(--neon);
}

.status-indicator {
  font-size: 12px;
  color: var(--neon);
  animation: pulse 1.2s infinite;
  font-weight: bold;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

/* TOP TELEMETRY STRIP */
.telemetry-bar {
  display: flex;
  justify-content: space-between;
  background: #000c04;
  border-bottom: 1px solid var(--neon-dim);
  padding: 8px 16px;
  font-size: 11px;
  letter-spacing: 1.5px;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--neon);
}
#uptime-counter { color: var(--white); text-shadow: 0 0 6px var(--neon); }
#latency-counter { color: var(--amber); }
.telemetry-bar span:nth-child(3) { color: var(--crimson); text-shadow: 0 0 6px var(--crimson-glow); font-weight: bold; }

.window-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel {
  border: 1px solid var(--neon-dim);
  padding: 18px;
  background: rgba(0, 15, 5, 0.7);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
}

.panel-header {
  font-size: 12px;
  color: var(--neon);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel-header::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--neon-dim);
}

/* HERO // OPERATOR IDENTITY */
.grid-two {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 18px;
  align-items: stretch;
}

.portrait-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  border: 1px solid var(--neon);
  background: rgba(0, 20, 8, 0.8);
}

.portrait-wrapper {
  position: relative;
  width: 155px;
  height: 180px;
  border: 2px solid var(--neon);
  box-shadow: 0 0 14px var(--neon-glow);
  background: #000;
  margin-bottom: 12px;
  overflow: hidden;
}

.profile-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: top center;
  display: block;
  filter: grayscale(100%) contrast(1.25) brightness(0.9);
  mix-blend-mode: luminosity;
  transition: 0.3s ease;
}

.portrait-wrapper::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 255, 102, 0.2);
  pointer-events: none;
  z-index: 2;
}

.portrait-wrapper:hover .profile-img {
  filter: grayscale(0%) contrast(1.05) brightness(1);
  mix-blend-mode: normal;
}
.portrait-wrapper:hover::before {
  background: transparent;
}

.status-pill {
  border: 1px solid var(--neon);
  color: var(--neon);
  padding: 6px 12px;
  margin-bottom: 8px;
  font-size: 11px;
  white-space: nowrap;
  letter-spacing: 1px;
  background: rgba(0, 255, 102, 0.1);
  box-shadow: 0 0 8px rgba(0, 255, 102, 0.3);
}

.subtext {
  font-size: 10px;
  color: var(--neon-dim);
  letter-spacing: 1px;
}

.profile-data {
  border: 1px solid var(--neon);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(0, 20, 8, 0.8);
}

.profile-data h2 {
  font-family: 'VT323', monospace;
  font-size: 38px;
  letter-spacing: 2px;
  color: var(--white);
  text-shadow: 0 0 10px var(--neon);
  line-height: 1;
}

.profile-data .role {
  font-size: 14px;
  color: var(--amber);
  margin: 6px 0 14px 0;
  text-shadow: 0 0 6px rgba(255, 145, 0, 0.4);
}

.divider {
  height: 1px;
  background: var(--neon-dim);
  margin-bottom: 14px;
}

.data-list {
  list-style: none;
  font-size: 13px;
  line-height: 2;
}

.data-list span {
  color: var(--white);
  display: inline-block;
  width: 95px;
  font-weight: bold;
}

/* ABOUT PANEL */
.about-panel {
  border-left: 4px solid var(--neon);
}
.about-content .about-lead {
  font-family: 'VT323', monospace;
  font-size: 26px;
  color: var(--white);
  text-shadow: 0 0 8px var(--neon);
  margin-bottom: 8px;
}
.about-content p {
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 10px;
  color: #c9ffd9;
}
.about-content strong {
  color: var(--white);
  text-shadow: 0 0 4px var(--neon);
}
.hobbies-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.hobbies-tags span {
  border: 1px dashed var(--neon-dim);
  color: var(--neon);
  font-size: 11px;
  padding: 4px 10px;
  background: rgba(0, 255, 102, 0.05);
}

/* RESEARCH & CERTS SPLIT */
.split-telemetry-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 16px;
  align-items: stretch;
}

.research-panel {
  border: 1px solid var(--crimson);
  border-left: 5px solid var(--crimson);
  background: rgba(25, 2, 5, 0.85);
  box-shadow: 0 0 15px rgba(255, 23, 68, 0.2);
}
.research-panel .panel-header {
  color: var(--crimson);
}
.research-panel .panel-header::after {
  background: rgba(255, 23, 68, 0.4);
}
.research-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 6px;
}
.research-header h3 {
  font-family: 'VT323', monospace;
  font-size: 26px;
  color: var(--white);
  text-shadow: 0 0 8px var(--crimson-glow);
}
.status-chip {
  font-size: 10px;
  color: var(--crimson);
  border: 1px solid var(--crimson);
  background: rgba(255, 23, 68, 0.15);
  padding: 3px 8px;
  box-shadow: 0 0 6px var(--crimson-glow);
}
.research-desc {
  font-size: 12px;
  line-height: 1.7;
  color: #ffcdd2;
  margin-bottom: 14px;
}

.certs-panel {
  border: 1px solid var(--neon-dim);
  border-left: 5px solid var(--neon);
  background: rgba(0, 18, 6, 0.8);
}
.certs-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
}
.cert-item {
  display: flex;
  gap: 10px;
  font-size: 12px;
  align-items: flex-start;
}
.cert-item.acquired .cert-status {
  color: var(--neon);
  font-weight: bold;
  text-shadow: 0 0 5px var(--neon);
}
.cert-item.progress .cert-status {
  color: var(--amber);
  font-weight: bold;
  text-shadow: 0 0 5px var(--amber);
}
.cert-details strong {
  color: var(--white);
  font-size: 13px;
}
.cert-meta {
  font-size: 11px;
  color: var(--neon-dim);
}

/* SENTINEL FLAGSHIP */
.flagship-panel {
  border: 2px solid var(--neon);
  background: linear-gradient(180deg, rgba(0, 35, 12, 0.85) 0%, rgba(0, 10, 3, 0.95) 100%);
  box-shadow: 0 0 20px rgba(0, 255, 102, 0.35);
  padding: 22px;
}
.flagship-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.flagship-tag {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1.5px;
  color: var(--white);
  text-shadow: 0 0 6px var(--neon);
}
.flagship-badge {
  background: #001f0a;
  border: 1px solid var(--neon);
  color: var(--neon);
  font-size: 10px;
  padding: 3px 10px;
  box-shadow: 0 0 8px var(--neon-glow);
}
.flagship-header h3 {
  font-family: 'VT323', monospace;
  font-size: 34px;
  letter-spacing: 1.5px;
  color: var(--white);
  text-shadow: 0 0 10px var(--neon);
  margin-bottom: 8px;
}
.flagship-summary {
  font-size: 13px;
  line-height: 1.7;
  color: #d1ffd9;
  margin-bottom: 16px;
}
.flagship-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.flagship-tech span {
  border: 1px solid var(--neon);
  color: var(--white);
  font-size: 11px;
  padding: 3px 9px;
  background: rgba(0, 255, 102, 0.12);
  text-shadow: 0 0 3px var(--neon);
}
.flagship-btns {
  margin-top: 14px;
}
.flagship-btn {
  font-size: 12px;
  padding: 10px 20px;
  font-weight: bold;
}

/* LAB EXPERIENCES */
.projects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.project-card {
  border: 1px solid var(--neon-dim);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(0, 15, 6, 0.7);
  transition: all 0.2s ease;
}
.project-card:hover {
  border-color: var(--neon);
  box-shadow: 0 0 12px rgba(0, 255, 102, 0.3);
  transform: translateY(-2px);
}
.card-tag {
  font-size: 10px;
  color: var(--amber);
  margin-bottom: 6px;
  letter-spacing: 1px;
}
.project-card h3 {
  font-family: 'VT323', monospace;
  font-size: 25px;
  color: var(--white);
  text-shadow: 0 0 6px var(--neon);
  margin-bottom: 8px;
}
.project-card p {
  font-size: 12px;
  line-height: 1.65;
  color: #c9ffd9;
  margin-bottom: 12px;
}
.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.tech-tags span {
  border: 1px solid var(--neon-dim);
  color: var(--neon);
  font-size: 10px;
  padding: 2px 7px;
  background: rgba(0, 255, 102, 0.05);
}

/* BUTTONS */
.btn-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cyber-btn {
  flex: 1;
  min-width: 110px;
  display: inline-block;
  border: 1px solid var(--neon);
  color: var(--neon);
  text-decoration: none;
  font-size: 11px;
  padding: 8px 12px;
  text-align: center;
  background: rgba(0, 255, 102, 0.08);
  font-weight: bold;
  letter-spacing: 1px;
  transition: all 0.2s;
}
.cyber-btn:hover {
  background: var(--neon);
  color: #000;
  box-shadow: 0 0 14px var(--neon-glow);
}
.cyber-btn.linkedin-btn {
  border-color: var(--crimson);
  color: var(--crimson);
  background: rgba(255, 23, 68, 0.1);
  box-shadow: 0 0 6px var(--crimson-glow);
}
.cyber-btn.linkedin-btn:hover {
  background: var(--crimson);
  color: #000;
  box-shadow: 0 0 14px var(--crimson-glow);
}

/* INTERACTIVE CLI */
.cli-panel {
  background: rgba(0, 10, 4, 0.95);
  border: 1px solid var(--neon);
}
.cli-quick-links {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.cli-quick-links button {
  background: rgba(0, 255, 102, 0.05);
  border: 1px solid var(--neon-dim);
  color: var(--neon);
  font-family: inherit;
  font-size: 11px;
  padding: 3px 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.cli-quick-links button:hover {
  border-color: var(--neon);
  background: var(--neon);
  color: #000;
}
.cli-output {
  min-height: 75px;
  max-height: 140px;
  overflow-y: auto;
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 10px;
  border-left: 2px solid var(--neon);
  padding-left: 10px;
  color: var(--white);
}
.cli-input-line {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cli-input-line .prompt {
  font-size: 12px;
  color: var(--neon);
  font-weight: bold;
}
.cli-input-line input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--neon);
  color: var(--white);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  padding: 4px;
}
.term-hl { color: var(--white); text-decoration: underline; }
.term-prompt { color: var(--neon); }
.term-res { color: #d6ffe0; margin-bottom: 4px; }
.term-err { color: var(--crimson); text-shadow: 0 0 5px var(--crimson); margin-bottom: 4px; }

/* COMM LINKS */
.links-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.link-tile {
  border: 1px solid var(--neon-dim);
  padding: 12px;
  color: var(--neon);
  text-decoration: none;
  font-size: 13px;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
  background: rgba(0, 255, 102, 0.03);
}
.link-tile .key {
  margin-right: 8px;
  color: var(--white);
  font-weight: bold;
}
.link-tile:hover {
  border-color: var(--neon);
  color: #000;
  background: var(--neon);
  box-shadow: 0 0 12px var(--neon-glow);
}
.link-tile.highlight {
  border-color: var(--amber);
  color: var(--amber);
}
.link-tile.highlight:hover {
  background: var(--amber);
  color: #000;
}



/* Non-clickable lab execution badge */
.lab-status-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed rgba(0, 255, 102, 0.4);
  background: rgba(0, 255, 102, 0.04);
  color: var(--neon);
  font-size: 11px;
  letter-spacing: 1px;
  padding: 8px 12px;
  user-select: none;
}

.lab-status-badge .badge-dot {
  color: var(--neon);
  font-size: 12px;
}

/* Non-clickable lab execution badge */
.lab-status-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed rgba(0, 255, 102, 0.4);
  background: rgba(0, 255, 102, 0.05);
  color: var(--neon);
  font-size: 11px;
  letter-spacing: 1.5px;
  padding: 8px 12px;
  user-select: none;
  font-weight: bold;
}

.lab-status-badge .badge-dot {
  color: var(--neon);
  font-size: 11px;
}

/* Research Post Button - Crimson Theme */
.cyber-btn.research-link-btn {
  border-color: var(--crimson);
  color: var(--crimson);
  background: rgba(255, 23, 68, 0.1);
  box-shadow: 0 0 8px var(--crimson-glow);
}
.cyber-btn.research-link-btn:hover {
  background: var(--crimson);
  color: #000;
  box-shadow: 0 0 16px var(--crimson-glow);
}

/* Direct Verification Link Styling */
.cert-verify-link {
  display: inline-block;
  color: var(--neon);
  font-size: 10px;
  letter-spacing: 1px;
  text-decoration: none;
  margin-top: 4px;
  border-bottom: 1px dashed var(--neon-dim);
  transition: all 0.2s ease;
}
.cert-verify-link:hover {
  color: var(--white);
  border-bottom-color: var(--white);
  text-shadow: 0 0 6px var(--neon);
}
.cert-meta-sub {
  font-size: 10px;
  color: #7ab38d;
  margin-top: 2px;
}

/* Clickable [VERIFIED] link badge in Crimson Red */
.cert-status-link {
  color: var(--crimson);
  font-weight: bold;
  font-size: 12px;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--crimson);
  letter-spacing: 1px;
  text-shadow: 0 0 6px var(--crimson-glow);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.cert-status-link:hover {
  color: #fff;
  text-shadow: 0 0 10px var(--crimson-glow);
  transform: scale(1.05);
}

/* Fix alignment for cert items and prevent status text wrapping */
.cert-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cert-item .cert-status,
.cert-item .cert-status-link {
  min-width: 105px;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.4;
}

.cert-details strong {
  display: block;
  line-height: 1.3;
}

.cert-details .cert-meta {
  display: block;
  margin-top: 3px;
}
/* Comm links SVG icon styles */
.comm-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.comm-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.comm-btn:hover .comm-icon {
  transform: scale(1.15);
  filter: drop-shadow(0 0 4px currentColor);
}
/* Comm links SVG icon styles */
.comm-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}

.comm-icon {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  vertical-align: middle;
}

.comm-item:hover .comm-icon {
  transform: scale(1.15);
  filter: drop-shadow(0 0 4px currentColor);
}
/* Comm links SVG icon styles */
.comm-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}

.comm-icon {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  vertical-align: middle;
}

.comm-item:hover .comm-icon {
  transform: scale(1.15);
  filter: drop-shadow(0 0 4px currentColor);
}
/* Bottom Social Icon Row below COMM_LINKS */
.terminal-social-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  margin: 18px 0 10px 0;
  padding-top: 10px;
}

.social-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--neon-dim);
  background: rgba(0, 255, 102, 0.03);
  color: var(--neon);
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.social-icon-btn svg {
  width: 20px;
  height: 20px;
}

.social-icon-btn:hover {
  background: var(--neon);
  color: #000;
  border-color: var(--neon);
  box-shadow: 0 0 14px var(--neon-glow);
  transform: translateY(-2px);
}
/* CONNECT WITH ME 3-card grid */
.connect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}



.connect-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--neon-dim);
  background: rgba(0, 255, 102, 0.03);
  text-decoration: none;
  color: var(--neon);
  transition: all 0.2s ease;
}

.connect-card:hover {
  background: rgba(0, 255, 102, 0.12);
  border-color: var(--neon);
  box-shadow: 0 0 12px var(--neon-glow);
  transform: translateY(-2px);
}

.connect-svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--neon);
  transition: transform 0.2s ease;
}

.connect-card:hover .connect-svg {
  transform: scale(1.15);
  filter: drop-shadow(0 0 6px var(--neon));
}

.connect-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.connect-label {
  font-weight: bold;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--neon);
}

.connect-val {
  font-size: 11px;
  color: #7ab38d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.connect-card:hover {
  background: rgba(0, 255, 102, 0.1) !important;
  border-color: var(--neon) !important;
  box-shadow: 0 0 12px var(--neon-glow) !important;
  transform: translateY(-2px);
}

.connect-card:hover svg {
  transform: scale(1.1);
  filter: drop-shadow(0 0 6px var(--neon));
}

/* Connect cards 2-column layout & hover styles */
.connect-card {
  transition: all 0.25s ease !important;
}

.connect-card:hover {
  background: rgba(0, 255, 102, 0.08) !important;
  border-color: var(--neon) !important;
  box-shadow: 0 0 14px var(--neon-glow) !important;
  transform: translateY(-2px);
}

.connect-card:hover svg {
  transform: scale(1.12);
  filter: drop-shadow(0 0 6px var(--neon));
}

/* Pure Logo Badges Layout */
.pure-icons-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 16px 0 8px 0;
}

.icon-link-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 90px;
  height: 72px;
  border: 1px solid var(--neon-dim);
  background: rgba(0, 255, 102, 0.03);
  color: var(--neon);
  text-decoration: none;
  transition: all 0.25s ease;
  border-radius: 4px;
}

.site-logo {
  width: 26px;
  height: 26px;
  fill: currentColor;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.icon-caption {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1.5px;
}

.icon-link-btn:hover {
  background: var(--neon);
  color: #000;
  border-color: var(--neon);
  box-shadow: 0 0 16px var(--neon-glow);
  transform: translateY(-3px);
}

.icon-link-btn:hover .site-logo {
  transform: scale(1.15);
}
/* Uniform Red Connect Boxes */
.connect-links-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 14px 0 6px 0 !important;
}

.connect-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 96px !important;
  height: 82px !important;
  border: 1px solid rgba(255, 23, 68, 0.45) !important;
  background: rgba(255, 23, 68, 0.04) !important;
  color: #ff1744 !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  box-shadow: 0 0 8px rgba(255, 23, 68, 0.15) !important;
  transition: all 0.25s ease !important;
}

.connect-svg-icon {
  width: 26px !important;
  height: 26px !important;
  fill: #ff1744 !important;
  transition: transform 0.2s ease !important;
}

.connect-box-title {
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: bold !important;
  letter-spacing: 1.5px !important;
  color: #ff1744 !important;
  text-decoration: none !important;
}

.connect-box:hover {
  background: #ff1744 !important;
  color: #000 !important;
  border-color: #ff1744 !important;
  box-shadow: 0 0 16px rgba(255, 23, 68, 0.8) !important;
  transform: translateY(-3px) !important;
}

.connect-box:hover .connect-svg-icon {
  fill: #000 !important;
  transform: scale(1.1) !important;
}

.connect-box:hover .connect-box-title {
  color: #000 !important;
}

/* ==========================================================
   CLEAN RESPONSIVE ARCHITECTURE
   ========================================================== */

/* TABLETS (650px to 900px): Keep two-column identity row */
@media (min-width: 651px) and (max-width: 900px) {
  body {
    padding: 16px 12px !important;
  }
  .window {
    width: 96% !important;
    max-width: 96% !important;
  }
}

/* MOBILE PHONES (<= 650px): Optimized single column */
@media (max-width: 650px) {
  body {
    display: block !important;
    padding: 8px 6px !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .window {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px !important;
    border-left: 1px solid var(--neon-dim) !important;
    border-right: 1px solid var(--neon-dim) !important;
  }

  /* Compact header status bar */
  .window-meta, .status-bar, [class*="telemetry"] {
    font-size: 9px !important;
    gap: 6px !important;
  }

  /* Shrink avatar container on phones so it doesn't eat the whole screen */
  .panel:has(img), .avatar-box, [class*="avatar"] {
    max-width: 240px !important;
    margin: 0 auto 12px auto !important;
    padding: 10px !important;
  }

  /* About tags */
  .tag, .about-tags span {
    font-size: 10px !important;
    padding: 3px 6px !important;
  }

  /* Bottom connect buttons */
  .connect-links-row {
    gap: 10px !important;
  }
  .connect-box {
    width: 78px !important;
    height: 70px !important;
  }
  .connect-svg-icon {
    width: 22px !important;
    height: 22px !important;
  }
  .connect-box-title {
    font-size: 9px !important;
  }
}
/* Stack top identity panels into a clean single column on mobile */
@media (max-width: 650px) {
  .window > div:has(.panel),
  .window > section:has(.panel),
  .grid-2,
  .hero-grid,
  .top-grid,
  .operator-row,
  .profile-grid,
  [class*="hero"],
  [class*="top-"] {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .window > * {
    max-width: 100% !important;
  }

  .panel {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Keep photo centered and properly proportioned */
  .panel img, [class*="avatar"] img {
    max-width: 180px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* Ensure text in the identity card is fully readable */
  .panel h1, .panel h2, .panel [class*="title"] {
    font-size: 1.2rem !important;
    word-break: normal !important;
  }
}

/* ==========================================================
   FORCE VERTICAL STACK ON MOBILE (<= 650px)
   ========================================================== */
@media screen and (max-width: 650px) {
  /* Flatten any grid or flex parent inside .window */
  .window,
  .window > div,
  .window > section,
  .window > main {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Force every panel to take full available width */
  .panel,
  .mobile-stack-panel {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 10px 0 !important;
  }

  /* Ensure avatar stays centered within its box */
  .panel img, 
  .avatar-box img {
    display: block !important;
    max-width: 200px !important;
    width: 60% !important;
    height: auto !important;
    margin: 0 auto 10px auto !important;
  }

  /* Keep identity text readable and unwrapped */
  .panel-header, 
  h1, h2, h3 {
    word-break: break-word !important;
  }
}
/* Scaled down connect button labels */
.connect-box-title,
.icon-caption,
.comm-panel a span {
  font-size: 8px !important;
  letter-spacing: 0.5px !important;
  line-height: 1 !important;
}