/* ==================================================
   CYBER — Intelligence Agency / White-Hat Aesthetic
   Matrix · Biometric HUD · Scan lines · Classified
   ================================================== */

/* ---------- Palette ---------- */
[data-theme="dark"] {
  --bg: #040605 !important;
  --bg-2: #0a0d0b !important;
  --surface: rgba(163,230,53,.04) !important;
  --line: rgba(163,230,53,.10) !important;
  --line-2: rgba(163,230,53,.22) !important;
  --ink: #e8f5b8 !important;          /* bone-tinted off-white */
  --ink-soft: #8ea870 !important;     /* muted moss */
  --ink-faint: #4a5a3c !important;
  --accent: #a3e635 !important;       /* signal lime */
  --accent-2: #5eead4 !important;     /* cyan teal */
  --warn: #f59e0b !important;
  --danger: #ef4444 !important;
}
[data-theme="light"] {
  --bg: #f5f7f0 !important;
  --bg-2: #ebeede !important;
  --surface: rgba(20,30,10,.025) !important;
  --line: rgba(20,30,10,.10) !important;
  --line-2: rgba(20,30,10,.22) !important;
  --ink: #0d130a !important;
  --ink-soft: #4d5d3a !important;
  --ink-faint: #8a9a7a !important;
  --accent: #5d8a1e !important;
  --accent-2: #047a6a !important;
  --warn: #b45309 !important;
  --danger: #b91c1c !important;
}

body { background: var(--bg) !important; color: var(--ink) !important; }

/* ---------- CRT scanlines + grid ---------- */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 1;
  background:
    repeating-linear-gradient(0deg, rgba(163,230,53,.012) 0 1px, transparent 1px 4px);
  pointer-events: none;
  mix-blend-mode: screen;
}
[data-theme="light"] body::before { display: none; }

/* Subtle large grid backdrop */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.85) 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.85) 0%, transparent 75%);
  pointer-events: none;
  opacity: .35;
}

/* ---------- Matrix rain canvas (added by JS) ---------- */
#matrix-rain {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: .12;
}
[data-theme="light"] #matrix-rain { opacity: .08; }

/* ---------- Targeting corner brackets (top-left + bottom-right of viewport) ---------- */
.corner-brackets {
  position: fixed; inset: 0; z-index: 30; pointer-events: none;
}
.corner-brackets span {
  position: absolute; width: 18px; height: 18px;
  border: 1px solid var(--accent);
}
.corner-brackets .tl { top: 12px;    left: 12px;    border-right: 0; border-bottom: 0; }
.corner-brackets .tr { top: 12px;    right: 12px;   border-left: 0; border-bottom: 0; }
.corner-brackets .bl { bottom: 12px; left: 12px;    border-right: 0; border-top: 0; }
.corner-brackets .br { bottom: 12px; right: 12px;   border-left: 0; border-top: 0; }

/* Top status bar */
.cyber-statusbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 28px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 36px;
  background: rgba(4,6,5,.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-soft);
  gap: 1.5rem;
}
[data-theme="light"] .cyber-statusbar { background: rgba(245,247,240,.85); }
.cyber-statusbar .left, .cyber-statusbar .right {
  display: flex; gap: 1.5rem; align-items: center;
}
.cyber-statusbar .center { text-align: center; }
.cyber-statusbar .blink {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
  animation: blink2 1.4s infinite;
}
@keyframes blink2 { 50% { opacity: .25; } }
.cyber-statusbar .timer { color: var(--accent); }
@media (max-width: 768px) { .cyber-statusbar { font-size: .5rem; padding: 0 16px; gap: .5rem; } .cyber-statusbar .center { display: none; } }

/* shift main layout below status bar */
.studio-layout, .studio-main { padding-top: 28px !important; }
.side-rail { top: 28px !important; }

/* ---------- Sidebar refinement ---------- */
.side-rail {
  background: rgba(4,6,5,.92) !important;
  border-right: 1px solid var(--line) !important;
  width: 92px !important;
  z-index: 60 !important;
}
[data-theme="light"] .side-rail { background: rgba(245,247,240,.92) !important; }
.studio-main { padding-left: 92px !important; }
@media (max-width: 768px) {
  .side-rail { width: 100% !important; height: 64px !important; top: 28px !important; }
  .studio-main { padding-left: 0 !important; padding-top: 92px !important; }
}

.side-mark .mark-letter {
  font-family: 'JetBrains Mono', monospace !important;
  font-style: normal !important;
  font-weight: 700;
  color: var(--accent);
  font-size: 1.4rem;
}
.side-mark .mark-dot { background: var(--accent) !important; box-shadow: 0 0 10px var(--accent); }

.side-menu-link {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: .7rem !important;
  font-weight: 500 !important;
  color: var(--ink-soft) !important;
  position: relative;
  padding: 1.1rem .35rem !important;
  letter-spacing: .35em !important;
}
.side-menu-link::before { background: var(--accent) !important; box-shadow: 0 0 8px var(--accent); }
.side-menu-link:hover, .side-menu-link.active { color: var(--accent) !important; }
.side-menu-link.active::after {
  content: ''; position: absolute; right: 6px; top: 0; bottom: 0;
  width: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent);
}

/* On hover, expand the side rail to show horizontal labels */
.side-rail:hover { width: 240px !important; transition: width .35s cubic-bezier(.25,1,.5,1); }
.side-rail { transition: width .35s cubic-bezier(.25,1,.5,1); }
.side-rail:hover .side-menu-link {
  writing-mode: horizontal-tb !important;
  transform: none !important;
  text-align: left;
  padding: .9rem 1.5rem !important;
  font-size: .72rem !important;
}
.side-rail:hover ~ .studio-main { /* stays in place — hover doesn't reflow */ }
@media (max-width: 768px) {
  .side-rail:hover { width: 100% !important; }
  .side-rail:hover .side-menu-link {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    padding: .4rem .6rem !important;
  }
}

/* Side rail SCROLL: if too many items, allow scrolling */
.side-rail { overflow-y: auto; overflow-x: hidden; }
.side-rail::-webkit-scrollbar { display: none; }
.side-rail { scrollbar-width: none; }
@media (max-width: 768px) {
  .side-menu-link.active::after { right: auto; bottom: 0; left: 50%; transform: translateX(-50%); height: 2px; width: 80%; }
}

.side-icon {
  position: relative;
  border: 1px solid transparent;
  border-radius: 4px !important;
  width: 38px !important; height: 38px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: .68rem !important;
  color: var(--ink-soft) !important;
}
.side-icon:hover {
  background: var(--surface) !important;
  border-color: var(--line-2) !important;
  color: var(--accent) !important;
}
.side-icon::after {
  content: ''; position: absolute; inset: 0; border-radius: 4px;
  border: 1px solid var(--accent); opacity: 0;
  transform: scale(.8); transition: all .3s;
}
.side-icon:hover::after { opacity: 1; transform: scale(1); }

/* Theme toggle made prominent — pulsing accent ring */
#studioTheme {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  position: relative;
}
#studioTheme i { color: var(--accent) !important; }
#studioTheme::before {
  content: ''; position: absolute; inset: -2px; border-radius: 6px;
  border: 1px solid var(--accent);
  opacity: .4; animation: ringPulse 2s infinite;
}
@keyframes ringPulse {
  0%,100% { transform: scale(1); opacity: .4; }
  50% { transform: scale(1.15); opacity: 0; }
}

.side-status-dot { background: var(--accent) !important; box-shadow: 0 0 12px var(--accent) !important; }

/* ---------- Hero ---------- */
.hero { padding-top: 4rem !important; }
.hero::before { color: var(--ink-soft) !important; opacity: .5; }
.hero .container, .hero .hero-grid { padding-top: 6rem !important; }

/* Section number badge in top-right of hero */
.hero-grid::before {
  content: '> AGENT // 001';
  position: absolute;
  top: 4rem; right: 4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  letter-spacing: .25em;
  color: var(--accent);
  text-transform: uppercase;
}
@media (max-width: 768px) { .hero-grid::before { display: none; } }

.hero-badge {
  color: var(--accent) !important;
  position: relative;
}
.hero-badge::before { background: var(--accent) !important; box-shadow: 0 0 10px var(--accent); }
.hero-status { background: var(--accent) !important; box-shadow: 0 0 12px var(--accent) !important; }

.hero-title { color: var(--ink) !important; }
.hero-title [data-i18n="hero.hi"] {
  color: var(--ink-soft) !important;
  font-family: 'JetBrains Mono', monospace !important;
}
.hero-title [data-i18n="hero.hi"]::before { background: var(--accent) !important; }
.hero-title .gradient-text {
  -webkit-text-fill-color: var(--ink) !important;
  color: var(--ink) !important;
}
.hero-title .name-italic {
  color: var(--accent) !important;
  font-family: 'Fraunces', serif !important;
}

.hero-subtitle {
  color: var(--accent) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-style: normal !important;
  font-size: .9rem !important;
  letter-spacing: .15em !important;
}
.hero-subtitle::before { color: var(--accent) !important; }
.cursor { color: var(--accent) !important; }

.hero-desc { color: var(--ink-soft) !important; }

.hero-actions .btn-primary {
  background: var(--accent) !important;
  color: #0a0d0b !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 0 transparent;
}
.hero-actions .btn-primary:hover {
  background: var(--accent-2) !important;
  border-color: var(--accent-2) !important;
  box-shadow: 0 8px 24px rgba(94,234,212,.35) !important;
}
.hero-actions .btn-ghost {
  color: var(--ink) !important;
  border-color: var(--line-2) !important;
}
.hero-actions .btn-ghost:hover {
  background: var(--accent) !important;
  color: #0a0d0b !important;
  border-color: var(--accent) !important;
}

.hero-socials a { color: var(--ink-soft) !important; }
.hero-socials a:hover { color: var(--accent) !important; }

/* ---------- Profile photo: scanning frame ---------- */
.profile-card::before {
  border-color: var(--accent) !important;
}
.profile-frame {
  background: linear-gradient(180deg, #0a0d0b, #040605) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px var(--line-2) !important;
}
.profile-frame::after {
  border-color: transparent !important;
}

/* Targeting brackets on photo corners */
.profile-frame::before {
  content: ''; position: absolute; inset: 12px;
  background:
    linear-gradient(to right, var(--accent) 1px, transparent 1px) 0 0/20px 1px no-repeat,
    linear-gradient(to right, var(--accent) 1px, transparent 1px) 0 0/1px 20px no-repeat,
    linear-gradient(to right, var(--accent) 1px, transparent 1px) 100% 0/20px 1px no-repeat,
    linear-gradient(to right, var(--accent) 1px, transparent 1px) calc(100% - 1px) 0/1px 20px no-repeat,
    linear-gradient(to right, var(--accent) 1px, transparent 1px) 0 100%/20px 1px no-repeat,
    linear-gradient(to right, var(--accent) 1px, transparent 1px) 0 calc(100% - 19px)/1px 20px no-repeat,
    linear-gradient(to right, var(--accent) 1px, transparent 1px) 100% 100%/20px 1px no-repeat,
    linear-gradient(to right, var(--accent) 1px, transparent 1px) calc(100% - 1px) calc(100% - 19px)/1px 20px no-repeat;
  pointer-events: none; z-index: 3;
}

/* Scanning line animation on photo */
.profile-frame {
  position: relative; overflow: hidden;
}
.profile-frame > .scan-line {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 20px var(--accent);
  animation: scanMove 3s ease-in-out infinite;
  z-index: 2; pointer-events: none;
  top: 0;
}
@keyframes scanMove {
  0%   { top: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.profile-frame img {
  filter: grayscale(.15) contrast(1.1) brightness(1) saturate(.9) !important;
  position: relative; z-index: 1;
}

/* Photo plate refined */
.profile-card .photo-plate {
  background: rgba(4,6,5,.85) !important;
  border-left: 2px solid var(--accent) !important;
  border-top: 1px solid var(--line) !important;
  border-right: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
}
.profile-card .photo-plate-name {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: .8rem !important;
  letter-spacing: .05em;
  color: var(--ink) !important;
}
.profile-card .photo-plate-role {
  color: var(--accent) !important;
}
.profile-card .photo-plate-badge {
  background: var(--accent) !important;
  color: #0a0d0b !important;
  position: relative;
}
.profile-card .photo-plate-badge::before {
  content: ''; position: absolute; inset: -3px;
  border-radius: 50%; border: 1px solid var(--accent);
  animation: ringPulse 2s infinite;
}

/* Photo meta strips */
.profile-card .photo-meta-top {
  color: var(--accent) !important;
}
.profile-card .photo-meta-top::before { content: '◉ ID:SY-2026-001'; }
.profile-card .photo-meta-top::after  { content: 'CLASSIFIED ↗'; }

/* Biometric data block above photo plate */
.profile-card .biometric-data {
  position: absolute;
  top: 1rem; right: 1rem;
  z-index: 3;
  font-family: 'JetBrains Mono', monospace;
  font-size: .55rem;
  letter-spacing: .15em;
  color: var(--accent);
  background: rgba(4,6,5,.7);
  backdrop-filter: blur(8px);
  padding: .4rem .6rem;
  border: 1px solid var(--line-2);
  display: grid;
  gap: .15rem;
  text-align: right;
  pointer-events: none;
}
.profile-card .biometric-data .label { color: var(--ink-faint); }
.profile-card .biometric-data .val { color: var(--accent); }

/* ---------- Sections ---------- */
.section-tag {
  color: var(--accent) !important;
}
.section-tag::before { background: var(--accent) !important; box-shadow: 0 0 8px var(--accent); }

.section-title { color: var(--ink) !important; }
.section-title .gradient-text {
  color: var(--accent) !important;
  font-family: 'Fraunces', serif !important;
  font-style: italic !important;
}

.section::before {
  color: var(--ink-soft) !important;
}

/* Section corner badges - cyber style */
#about::before        { content: '[ § 01 ] // INTEL_REPORT'; }
#experience::before   { content: '[ § 02 ] // OPS_LOG'; }
#skills::before       { content: '[ § 03 ] // CAPABILITIES'; }
#projects::before     { content: '[ § 04 ] // MISSIONS'; }
#publications::before { content: '[ § 05 ] // RESEARCH_FILES'; }
#contact::before      { content: '[ § 06 ] // SECURE_CHANNEL'; }

/* Stat numbers with accent suffix */
.stat-number, .stat-suffix {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  font-family: 'JetBrains Mono', monospace !important;
}
.stat-suffix { color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important; }
.stat-card p { color: var(--ink-soft) !important; }

/* Skill cards — tactical look */
.skill-icon { color: var(--accent) !important; border-color: var(--line-2) !important; }
.skill-bar span { background: var(--accent) !important; box-shadow: 0 0 10px var(--accent) !important; }

/* Timeline */
.timeline::before { background: linear-gradient(180deg, var(--accent), transparent) !important; }
.timeline-dot {
  background: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--line-2), 0 0 12px var(--accent) !important;
}
.timeline-card h4 { color: var(--accent) !important; }
.timeline-card li::before { background: var(--accent) !important; box-shadow: 0 0 6px var(--accent); }

/* Project cards */
.project-icon { color: var(--accent) !important; border-color: var(--line-2) !important; }
.project-card h3 { color: var(--ink) !important; }
.project-tags span { color: var(--ink-soft) !important; border-color: var(--line-2) !important; }
.project-card:hover .project-icon { color: var(--accent-2) !important; border-color: var(--accent-2) !important; }

/* Pub cards */
.pub-badge { color: var(--accent) !important; border-color: var(--accent) !important; background: rgba(163,230,53,.05) !important; }
.pub-link { color: var(--accent) !important; }

/* Education */
.edu-card h4 { color: var(--accent) !important; }

/* Languages */
.lang-card h4 { color: var(--ink) !important; }

/* Contact */
.contact-info p { color: var(--ink) !important; }
.contact-list li i { color: var(--accent) !important; border-color: var(--line-2) !important; }
.contact-list a:hover { color: var(--accent) !important; }
.contact-form input, .contact-form textarea { color: var(--ink) !important; }
.contact-form input:focus, .contact-form textarea:focus { border-bottom-color: var(--accent) !important; }
.contact-form .btn-primary {
  background: var(--accent) !important; color: #0a0d0b !important; border-color: var(--accent) !important;
}
.contact-form .btn-primary:hover { background: var(--accent-2) !important; border-color: var(--accent-2) !important; }

/* Footer */
.footer-left .logo-mark {
  background: var(--accent) !important;
  color: #0a0d0b !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-style: normal !important;
}
.footer-right a:hover { background: var(--accent) !important; color: #0a0d0b !important; border-color: var(--accent) !important; }

/* Footer legal links area */
.footer-legal {
  display: flex; gap: 1.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.footer-legal a { color: var(--ink-soft); }
.footer-legal a:hover { color: var(--accent); }

/* ---------- Cursor ---------- */
.cursor-dot { background: var(--accent) !important; box-shadow: 0 0 12px var(--accent) !important; mix-blend-mode: normal !important; }
.cursor-ring { border-color: var(--accent) !important; mix-blend-mode: normal !important; opacity: .5; }

/* ---------- Selection ---------- */
::selection { background: var(--accent); color: #0a0d0b; text-shadow: none; }

/* ---------- Encrypted/decrypt text effect ---------- */
.decrypt {
  font-family: 'JetBrains Mono', monospace;
  position: relative;
}

/* ---------- Sonar/radar pulse on dots ---------- */
.sonar {
  position: relative;
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent);
}
.sonar::before, .sonar::after {
  content: ''; position: absolute; inset: 0;
  border-radius: 50%; border: 1px solid var(--accent);
  animation: sonar 2s infinite;
}
.sonar::after { animation-delay: -1s; }
@keyframes sonar {
  0% { transform: scale(1); opacity: .8; }
  100% { transform: scale(4); opacity: 0; }
}

/* ---------- Floating bottom-right HUD widget ---------- */
.cyber-hud {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 50;
  display: grid; gap: .35rem;
  padding: .8rem 1rem;
  background: rgba(4,6,5,.85);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  min-width: 180px;
  pointer-events: none;
}
[data-theme="light"] .cyber-hud { background: rgba(245,247,240,.85); }
.cyber-hud .row { display: flex; justify-content: space-between; gap: 1rem; }
.cyber-hud .row .v { color: var(--accent); }
.cyber-hud .head {
  display: flex; align-items: center; gap: .4rem;
  color: var(--accent);
  border-bottom: 1px solid var(--line);
  padding-bottom: .25rem; margin-bottom: .15rem;
}
.cyber-hud .head .sonar { width: 6px; height: 6px; }
@media (max-width: 768px) { .cyber-hud { display: none; } }

/* ---------- Marquee re-style with mono ---------- */
.marquee-track {
  font-family: 'JetBrains Mono', monospace !important;
  text-transform: uppercase;
  font-size: clamp(1.2rem, 2.4vw, 2rem) !important;
  letter-spacing: .15em !important;
  font-weight: 400 !important;
}
.marquee-track span:nth-child(odd) { color: var(--accent); }
.marquee-track span:nth-child(even) {
  color: transparent;
  -webkit-text-stroke: 1px var(--accent);
}
.marquee {
  border-color: var(--line) !important;
  background: linear-gradient(90deg, var(--bg), var(--bg-2), var(--bg)) !important;
}

/* ---------- Legal pages (Impressum / Datenschutz) ---------- */
.legal-page { padding: 5rem 0 6rem; }
.legal-header { margin-bottom: 4rem; }
.legal-header .section-title { font-size: clamp(2.5rem, 7vw, 5rem) !important; margin-top: .5rem; }
.legal-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: 1rem;
}
.legal-block {
  padding: 2rem 0;
  border-bottom: 1px solid var(--line);
}
.legal-block h2 {
  font-family: 'Inter Tight', sans-serif !important;
  font-weight: 400 !important;
  font-size: 1.4rem;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 1rem;
  padding-left: 28px;
  position: relative;
}
.legal-block h2::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 18px; height: 1px; background: var(--accent);
}
.legal-block p, .legal-block li {
  color: var(--ink-soft);
  font-size: 1rem; font-weight: 300;
  line-height: 1.75;
}
.legal-block p + p, .legal-block ul + p { margin-top: .8rem; }
.legal-block ul { padding-left: 1.4rem; margin: .8rem 0; list-style: none; }
.legal-block ul li { padding-left: 1.2rem; position: relative; margin-bottom: .35rem; }
.legal-block ul li::before {
  content: '▸'; position: absolute; left: 0; top: 0;
  color: var(--accent); font-size: .8rem;
}
.legal-block a {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.legal-block a:hover { border-bottom-color: var(--accent); }
.legal-block strong { color: var(--ink); font-weight: 500; }
.legal-block em { color: var(--accent-2); font-style: italic; }

.legal-footer { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.legal-back {
  display: inline-flex; align-items: center; gap: .8rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); padding: 1rem 1.6rem;
  border: 1px solid var(--line-2);
  transition: all .3s var(--ease, cubic-bezier(.25,1,.5,1));
}
.legal-back:hover {
  background: var(--accent); color: #0a0d0b;
  border-color: var(--accent);
  transform: translateX(-4px);
}

/* Z-stacking — make sure content is above grids */
.studio-main, .side-rail, .cyber-statusbar, .corner-brackets, .cyber-hud { position: relative; z-index: 5; }
.cyber-statusbar { z-index: 60; }
.side-rail { z-index: 60 !important; }
.corner-brackets { z-index: 30; }
.cyber-hud { z-index: 50; }