/* ==========================================================================
   BRUTALIST DESIGN SYSTEM & STYLE ARCHIVE
   ========================================================================== */

/* Design Tokens & Theme Definitions */
:root {
  /* Common System Values */
  --border-width: 3px;
  --font-mono: 'Space Mono', 'Courier New', monospace;
  --font-tech: 'Share Tech Mono', monospace;
  --font-header: 'Syne', sans-serif;
  
  /* Brutalist Concrete (Light Theme Default) */
  --bg-main: #E7E5E0;
  --bg-panel: #F4F2EE;
  --bg-sidebar: #ECEAE5;
  --fg-main: #000000;
  --fg-muted: #555555;
  --border-color: #000000;
  --shadow-color: #000000;
  --accent-red: #FF3B30;
  --accent-blue: #0040DD;
  --accent-yellow: #FFD60A;
  --accent-green: #1E824C;
  --badge-bg: #E0DDD6;
  --cursor-color: #FF3B30;
  
  --shadow-offset: 6px;
  --box-shadow-main: var(--shadow-offset) var(--shadow-offset) 0px var(--shadow-color);
  --box-shadow-hover: calc(var(--shadow-offset) * 1.5) calc(var(--shadow-offset) * 1.5) 0px var(--shadow-color);
  --box-shadow-active: 2px 2px 0px var(--shadow-color);
}

/* Neural Terminal (Dark Theme Override) */
[data-theme="neural"] {
  --bg-main: #0D0E10;
  --bg-panel: #14161B;
  --bg-sidebar: #101115;
  --fg-main: #FFFFFF;
  --fg-muted: #B6C5B6;
  --border-color: #384252;
  --shadow-color: #000000;
  --accent-red: #FF453A;
  --accent-blue: #0A84FF;
  --accent-yellow: #FFD60A;
  --accent-green: #30D158;
  --badge-bg: #1F232D;
  --cursor-color: #00E5FF;
  
  --shadow-offset: 5px;
  --box-shadow-main: var(--shadow-offset) var(--shadow-offset) 0px #0A84FF;
  --box-shadow-hover: calc(var(--shadow-offset) * 1.4) calc(var(--shadow-offset) * 1.4) 0px #30D158;
  --box-shadow-active: 1px 1px 0px var(--border-color);
}

/* Kraft Blueprint (Raw Cardboard/Blueprint Theme Override) */
[data-theme="kraft"] {
  --bg-main: #CFBFAC;
  --bg-panel: #E3D9CC;
  --bg-sidebar: #DBCFBE;
  --fg-main: #332A20;
  --fg-muted: #6B5B49;
  --border-color: #332A20;
  --shadow-color: #332A20;
  --accent-red: #A33A26;
  --accent-blue: #2B5797;
  --accent-yellow: #E5A823;
  --accent-green: #366E4E;
  --badge-bg: #D1C5B5;
  --cursor-color: #A33A26;
  
  --shadow-offset: 6px;
  --box-shadow-main: var(--shadow-offset) var(--shadow-offset) 0px var(--shadow-color);
  --box-shadow-hover: calc(var(--shadow-offset) * 1.5) calc(var(--shadow-offset) * 1.5) 0px var(--shadow-color);
  --box-shadow-active: 2px 2px 0px var(--shadow-color);
}

/* ==========================================================================
   RESET & STRUCTURES
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-mono);
  background-color: var(--bg-main);
  color: var(--fg-main);
  height: 100vh;
  overflow: hidden;
  position: relative;
  transition: background-color 0.25s ease, color 0.25s ease;
  cursor: none; /* Hide default cursor to use custom crosshair */
}

a, button, select, input {
  cursor: none; /* Keep cursor hidden on interactive items */
}

/* ==========================================================================
   BACKGROUND & OVERLAYS
   ========================================================================== */

/* Background shader-simulated Canvas */
#bg-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.15;
}
[data-theme="neural"] #bg-canvas {
  opacity: 0.35;
}

/* Texture Grain Overlay */
.grain-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9997;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.06;
}
[data-theme="neural"] .grain-overlay {
  opacity: 0.12;
}

/* Retro CRT Monitor Scanline & Screen Flicker Effect */
.crt-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9998;
  pointer-events: none;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  background-size: 100% 4px, 6px 100%;
  display: none;
}
.crt-overlay.active {
  display: block;
  animation: crt-flicker 0.15s infinite;
}

@keyframes crt-flicker {
  0% { opacity: 0.97; }
  50% { opacity: 1; }
  100% { opacity: 0.98; }
}

/* Custom Crosshair Cursor Tracking */
.custom-cursor {
  position: fixed;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  z-index: 9999;
  pointer-events: none;
  transition: transform 0.08s ease-out, width 0.2s, height 0.2s;
}

.cursor-crosshair {
  position: relative;
  width: 100%;
  height: 100%;
}
.cursor-crosshair::before, .cursor-crosshair::after {
  content: '';
  position: absolute;
  background-color: var(--cursor-color);
}
/* Horizontal bar */
.cursor-crosshair::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}
/* Vertical bar */
.cursor-crosshair::after {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

.cursor-coords {
  position: absolute;
  top: 28px;
  left: 28px;
  background: var(--border-color);
  color: var(--bg-panel);
  font-family: var(--font-tech);
  font-size: 9px;
  padding: 2px 4px;
  white-space: nowrap;
  border: 1px solid var(--border-color);
  display: none;
}
body:hover .cursor-coords {
  display: block;
}

/* Hover expansion of crosshair */
.custom-cursor.hovering {
  width: 38px;
  height: 38px;
}
.custom-cursor.hovering .cursor-crosshair::before,
.custom-cursor.hovering .cursor-crosshair::after {
  background-color: var(--accent-red);
}

/* ==========================================================================
   CYBERSECURITY IPS LOCKOUT OVERLAY
   ========================================================================== */
.ips-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.96);
  z-index: 10000;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 24px;
}
.ips-overlay.active {
  display: flex;
  animation: ips-alarm 0.5s infinite steps(2);
}

@keyframes ips-alarm {
  0% { background-color: rgba(0, 0, 0, 0.96); }
  50% { background-color: rgba(60, 5, 5, 0.98); }
}

.ips-lockout-box {
  max-width: 600px;
  width: 100%;
  background-color: #0F0202;
  border: 4px solid var(--accent-red);
  padding: 30px;
  box-shadow: 0 0 25px rgba(255, 69, 58, 0.4);
  color: #FFF;
  font-family: var(--font-mono);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.red-glow {
  color: var(--accent-red);
  font-family: var(--font-header);
  font-size: 2.2rem;
  letter-spacing: -1px;
  text-shadow: 0 0 8px var(--accent-red);
  text-transform: uppercase;
  border-bottom: 2px solid var(--accent-red);
  padding-bottom: 8px;
}

/* ==========================================================================
   APP CONTAINER LAYOUT
   ========================================================================== */
.app-layout {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 12px;
  gap: 12px;
}

/* ==========================================================================
   SYSTEM STATUS HEADER
   ========================================================================== */
.system-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  border: var(--border-width) solid var(--border-color);
  background-color: var(--bg-panel);
  padding: 8px 12px;
  box-shadow: 4px 4px 0px var(--border-color);
  gap: 12px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 1 280px;
  width: 280px;
}

.system-title {
  font-weight: 700;
  font-family: var(--font-tech);
  letter-spacing: 1px;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--badge-bg);
  padding: 2px 8px;
  border: 1px solid var(--border-color);
  font-size: 10px;
  font-weight: bold;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--accent-green);
  box-shadow: 0 0 4px var(--accent-green);
}
.pulse-dot.active {
  animation: status-pulse 1.5s infinite alternate;
}

@keyframes status-pulse {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

/* Marquee scrolling bar */
.marquee-wrapper {
  overflow: hidden;
  white-space: nowrap;
  border-left: 2px solid var(--border-color);
  border-right: 2px solid var(--border-color);
  padding: 0 16px;
}
.marquee-content {
  display: inline-block;
  font-family: var(--font-tech);
  font-size: 13px;
  color: var(--accent-blue);
  animation: marquee-scroll 25s linear infinite;
}
[data-theme="neural"] .marquee-content {
  color: var(--accent-green);
}

@keyframes marquee-scroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 12px;
  flex: 0 1 auto;
  flex-wrap: wrap;
}

.header-clock {
  font-family: var(--font-tech);
  font-weight: 700;
  background: var(--fg-main);
  color: var(--bg-main);
  padding: 2px 8px;
}

/* ==========================================================================
   BUTTONS & CONTROLS
   ========================================================================== */
.sys-btn {
  background-color: var(--bg-panel);
  color: var(--fg-main);
  border: 2px solid var(--border-color);
  padding: 4px 8px;
  font-family: var(--font-tech);
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  transition: all 0.1s ease;
  box-shadow: 2px 2px 0px var(--border-color);
}
.sys-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px var(--border-color);
  background-color: var(--accent-yellow);
  color: #000;
}
.sys-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px var(--border-color);
}
.sys-btn.alert {
  background-color: var(--accent-red);
  color: #FFF;
}
.sys-btn.alert:hover {
  background-color: #000;
  color: #FFF;
}

/* ==========================================================================
   MAIN CONTAINER GRID
   ========================================================================== */
.main-container {
  display: grid;
  grid-template-columns: 280px 1fr;
  flex: 1;
  gap: 12px;
  min-height: 0; /* Important for scroll calculations */
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-box {
  border: var(--border-width) solid var(--border-color);
  background-color: var(--bg-panel);
  box-shadow: var(--box-shadow-main);
  display: flex;
  flex-direction: column;
}

.box-header {
  border-bottom: var(--border-width) solid var(--border-color);
  padding: 6px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--border-color);
  color: var(--bg-panel);
}

.box-title {
  font-family: var(--font-tech);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
}

.box-code {
  font-family: var(--font-tech);
  font-size: 11px;
}

/* Folder Directory Navigation Links */
.directory-list {
  display: flex;
  flex-direction: column;
  padding: 6px;
  gap: 4px;
}

.dir-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: 2px solid transparent;
  color: var(--fg-main);
  padding: 8px 12px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: bold;
  transition: all 0.1s ease;
}

.dir-link:hover {
  background-color: var(--badge-bg);
  border-color: var(--border-color);
  transform: translateX(4px);
}

.dir-link.active {
  background-color: var(--border-color);
  color: var(--bg-panel);
  border-color: var(--border-color);
}

.dir-icon {
  font-size: 16px;
}

/* CYBERSECURITY WAF STATS STYLES */
.waf-content {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.waf-metric-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-tech);
  font-size: 11px;
  font-weight: bold;
}
.waf-metric-row .lbl {
  color: var(--fg-muted);
}
.waf-metric-row .val {
  color: var(--fg-main);
}
.green-text {
  color: var(--accent-green) !important;
}
.red-text {
  color: var(--accent-red) !important;
}

.waf-meter-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  border-top: 1px dashed var(--border-color);
  padding-top: 8px;
}
.waf-meter-container .lbl {
  font-family: var(--font-tech);
  font-size: 10px;
  font-weight: bold;
  color: var(--fg-muted);
}
.waf-bar-bg {
  height: 8px;
  background-color: var(--badge-bg);
  border: 1px solid var(--border-color);
  position: relative;
}
.waf-bar-fill {
  height: 100%;
  background-color: var(--accent-green);
  transition: width 0.3s ease, background-color 0.3s ease;
}

/* Settings block styles */
.settings-content {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.setting-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.setting-row label {
  font-family: var(--font-tech);
  font-size: 11px;
  font-weight: bold;
}

.brut-select {
  width: 100%;
  border: 2px solid var(--border-color);
  background-color: var(--bg-panel);
  color: var(--fg-main);
  padding: 6px;
  font-family: var(--font-tech);
  font-size: 12px;
  font-weight: bold;
  outline: none;
}

.terminal-stats {
  border-top: 1px dashed var(--border-color);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-line {
  font-family: var(--font-tech);
  font-size: 11px;
  display: flex;
  justify-content: space-between;
}
.stat-line .lbl {
  color: var(--fg-muted);
}
.stat-line .val {
  font-weight: bold;
}

/* Tag Label style */
.tape-label {
  background-color: var(--accent-yellow);
  color: #000;
  border: 2px dashed var(--border-color);
  padding: 8px 12px;
  font-family: var(--font-tech);
  font-weight: 700;
  font-size: 12px;
  text-align: center;
  box-shadow: 3px 3px 0px var(--border-color);
  transform: rotate(-1.5deg);
  margin-top: auto;
}

/* ==========================================================================
   CONTENT VIEWPORT
   ========================================================================== */
.content-viewport {
  border: var(--border-width) solid var(--border-color);
  background-color: var(--bg-panel);
  box-shadow: var(--box-shadow-main);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.view-panel {
  display: none;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding: 24px;
  animation: panel-fade-in 0.25s steps(4) forwards;
}

.view-panel.active {
  display: flex;
}

@keyframes panel-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Custom Scrollbar for viewport panels */
.view-panel::-webkit-scrollbar {
  width: 12px;
}
.view-panel::-webkit-scrollbar-track {
  background: var(--bg-main);
  border-left: 2px solid var(--border-color);
}
.view-panel::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border: 2px solid var(--bg-main);
}

/* ==========================================================================
   VIEW: HOME
   ========================================================================== */
.hero-section {
  border-bottom: var(--border-width) dashed var(--border-color);
  padding-bottom: 18px;
  margin-bottom: 24px;
}

.glitch-title {
  font-family: var(--font-header);
  font-size: 4rem;
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -2px;
  margin-bottom: 6px;
  position: relative;
}

.subtitle {
  font-family: var(--font-tech);
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--accent-red);
  font-weight: bold;
}

/* Banner stat cells */
.grid-banner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: var(--border-width) solid var(--border-color);
  margin-bottom: 24px;
}

.banner-cell {
  padding: 12px;
  border-right: var(--border-width) solid var(--border-color);
  display: flex;
  flex-direction: column;
}
.banner-cell:last-child {
  border-right: none;
}

.cell-num {
  font-family: var(--font-tech);
  font-size: 11px;
  color: var(--fg-muted);
}
.cell-lbl {
  font-family: var(--font-tech);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 2px 0;
}
.cell-val {
  font-weight: 700;
  font-size: 14px;
}

/* Folder Deck Cards grid */
.folder-deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.folder-card {
  border: var(--border-width) solid var(--border-color);
  background-color: var(--bg-panel);
  display: flex;
  flex-direction: column;
  box-shadow: 4px 4px 0px var(--border-color);
  transition: all 0.15s ease;
}

.folder-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0px var(--border-color);
  background-color: var(--bg-main);
}

.card-header {
  border-bottom: 2px solid var(--border-color);
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-tech);
  font-size: 11px;
  background-color: var(--badge-bg);
  font-weight: bold;
}

.card-body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.brutal-badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-tech);
  font-size: 10px;
  font-weight: 700;
  background-color: var(--border-color);
  color: var(--bg-panel);
  padding: 2px 6px;
  border-radius: 0;
  text-transform: uppercase;
}
.brutal-badge.warning {
  background-color: var(--accent-yellow);
  color: #000;
  border: 1px solid var(--border-color);
}
.brutal-badge.accent {
  background-color: var(--accent-red);
  color: #FFF;
}

.folder-card h3 {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  margin-top: 4px;
}

.folder-card p {
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.4;
  flex: 1;
}

.card-action {
  font-family: var(--font-tech);
  font-size: 11px;
  font-weight: 700;
  margin-top: 12px;
  color: var(--accent-blue);
}
[data-theme="neural"] .card-action {
  color: var(--accent-red);
}

.card-footer {
  border-top: 1px dashed var(--border-color);
  padding: 4px 10px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-tech);
  font-size: 9px;
  color: var(--fg-muted);
}

/* Console logs widget at bottom of homepage */
.bottom-console {
  border: var(--border-width) solid var(--border-color);
  background-color: #000000;
  color: #39FF14;
  font-family: var(--font-tech);
  font-size: 12px;
  display: flex;
  flex-direction: column;
}

.console-header {
  border-bottom: 2px solid #39FF14;
  padding: 4px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.console-body {
  padding: 10px;
  height: 80px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ==========================================================================
   COMMON VIEW PANEL SUBELEMENTS
   ========================================================================== */
.view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: var(--border-width) solid var(--border-color);
  padding-bottom: 12px;
  margin-bottom: 20px;
}

.view-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.view-index {
  font-family: var(--font-tech);
  font-size: 20px;
  color: var(--accent-red);
  font-weight: bold;
}

.view-header h2 {
  font-family: var(--font-header);
  font-size: 2rem;
  letter-spacing: -1px;
}

.back-home-btn {
  background-color: var(--border-color);
  color: var(--bg-panel);
  border: none;
  padding: 6px 12px;
  font-family: var(--font-tech);
  font-size: 12px;
  font-weight: bold;
}
.back-home-btn:hover {
  background-color: var(--accent-red);
  color: white;
}

/* ==========================================================================
   VIEW: MY IDEOLOGY
   ========================================================================== */
.manifesto-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
  align-items: stretch;
}

.manifesto-column {
  border: var(--border-width) solid var(--border-color);
  background-color: var(--bg-panel);
  box-shadow: 4px 4px 0px var(--border-color);
  display: flex;
  flex-direction: column;
}

.box-label {
  background-color: var(--border-color);
  color: var(--bg-panel);
  padding: 4px 10px;
  font-family: var(--font-tech);
  font-size: 11px;
  font-weight: bold;
}

.manifesto-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
  line-height: 1.6;
}

.manifesto-lead {
  font-size: 16px;
  font-weight: 700;
  border-left: 4px solid var(--accent-red);
  padding-left: 12px;
  color: var(--fg-main);
  margin-bottom: 6px;
}

.manifesto-body ul {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ideology-blueprint {
  margin-top: 12px;
  border: 1px dashed var(--border-color);
  background-color: var(--bg-main);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.blueprint-overlay {
  height: 90px;
  background-color: var(--bg-panel);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
}
#ideology-svg {
  height: 100%;
}
.blueprint-tag {
  font-family: var(--font-tech);
  font-size: 9px;
  color: var(--fg-muted);
}

/* Tenets list on right side */
.tenets-list {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.tenet-item {
  border: 2px solid var(--border-color);
  background-color: var(--bg-panel);
  padding: 8px 12px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: all 0.15s ease;
}
.tenet-item:hover {
  transform: translateX(4px);
  background-color: var(--bg-main);
}
.tenet-item.active {
  background-color: var(--border-color);
  color: var(--bg-panel);
}

.tenet-number {
  font-family: var(--font-tech);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.tenet-title {
  font-weight: 700;
  font-size: 13px;
}

.tenet-desc {
  display: none; /* Displayed in detail box below */
}

.tenet-detail-display {
  border-top: var(--border-width) solid var(--border-color);
  padding: 16px;
  background-color: var(--badge-bg);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tenet-detail-display .tag {
  font-family: var(--font-tech);
  font-size: 10px;
  font-weight: bold;
  align-self: flex-start;
  background-color: var(--accent-red);
  color: #FFF;
  padding: 1px 5px;
}
.tenet-detail-display p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-main);
}

/* ==========================================================================
   VIEW: WORK EXPERIENCE (CRIS)
   ========================================================================== */
.rail-header {
  border: var(--border-width) solid var(--border-color);
  background-color: var(--accent-red);
  color: #FFF;
  padding: 6px 12px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-tech);
  font-weight: bold;
  font-size: 13px;
  margin-bottom: 20px;
}
[data-theme="neural"] .rail-header {
  background-color: var(--border-color);
  color: var(--accent-green);
}

.cris-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cris-card {
  border: var(--border-width) solid var(--border-color);
  background-color: var(--bg-panel);
  box-shadow: 4px 4px 0px var(--border-color);
  display: flex;
  flex-direction: column;
}

.cris-card-header {
  background-color: var(--border-color);
  color: var(--bg-panel);
  padding: 4px 10px;
  font-family: var(--font-tech);
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-indicator-blink {
  width: 8px;
  height: 8px;
  background-color: var(--accent-green);
  border-radius: 50%;
  animation: blink 0.8s infinite steps(2);
}

@keyframes blink {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Timetable Styles */
.timetable {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: left;
}

.timetable th {
  background-color: var(--badge-bg);
  border-bottom: var(--border-width) solid var(--border-color);
  padding: 8px 12px;
  font-weight: bold;
}

.timetable td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
}
.timetable tr:last-child td {
  border-bottom: none;
}
.timetable tr:nth-child(even) {
  background-color: rgba(0,0,0,0.02);
}

.status-on-time {
  color: var(--accent-green);
  font-weight: bold;
}
.status-delayed {
  color: var(--accent-red);
  font-weight: bold;
}
.status-special {
  color: var(--accent-blue);
  font-weight: bold;
}

.cris-action-bar {
  padding: 10px;
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 10px;
  background-color: var(--badge-bg);
}

/* Detail columns below table */
.cris-info-columns {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
}

.cris-column {
  border: var(--border-width) solid var(--border-color);
  background-color: var(--bg-panel);
  box-shadow: 4px 4px 0px var(--border-color);
  display: flex;
  flex-direction: column;
}

.column-header-lbl {
  background-color: var(--border-color);
  color: var(--bg-panel);
  padding: 4px 10px;
  font-family: var(--font-tech);
  font-size: 11px;
  font-weight: bold;
}

.column-content {
  padding: 16px;
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.brutal-bullets {
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.brutal-bullets li {
  line-height: 1.4;
}

/* Railway Spec & ticket stub */
.spec-column .column-content {
  justify-content: space-between;
  flex: 1;
}

.train-blueprint-box {
  border: 1px dashed var(--border-color);
  background-color: var(--bg-main);
  padding: 8px;
  display: flex;
  flex-direction: column;
}
.train-blueprint {
  height: 48px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
}
.lbl-tag {
  font-family: var(--font-tech);
  font-size: 8px;
  color: var(--fg-muted);
  margin-top: 2px;
}

.specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0;
}
.spec-cell {
  background-color: var(--badge-bg);
  border: 1px solid var(--border-color);
  padding: 6px;
  display: flex;
  flex-direction: column;
}
.spec-cell .label {
  font-family: var(--font-tech);
  font-size: 9px;
  color: var(--fg-muted);
}
.spec-cell .value {
  font-family: var(--font-tech);
  font-size: 11px;
  font-weight: bold;
}

/* Vintage Ticket stub look */
.ticket-stub {
  border: 2px dashed var(--accent-red);
  background-color: var(--bg-main);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ticket-header {
  font-family: var(--font-tech);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent-red);
  border-bottom: 1px dashed var(--accent-red);
  padding-bottom: 2px;
}
.ticket-details {
  display: flex;
  flex-direction: column;
  font-family: var(--font-tech);
  font-size: 9px;
}
.ticket-id {
  font-size: 11px;
  font-weight: bold;
  margin-top: 2px;
  align-self: flex-end;
}

/* ==========================================================================
   VIEW: PROJECTS ARCHIVE
   ========================================================================== */
.projects-tabs {
  display: flex;
  border-bottom: var(--border-width) solid var(--border-color);
  margin-bottom: 20px;
}

.tab-btn {
  background: none;
  border: none;
  border-right: var(--border-width) solid var(--border-color);
  padding: 10px 16px;
  font-family: var(--font-tech);
  font-weight: 700;
  font-size: 13px;
  color: var(--fg-main);
  transition: all 0.1s ease;
}
.tab-btn:hover {
  background-color: var(--badge-bg);
}
.tab-btn.active {
  background-color: var(--border-color);
  color: var(--bg-panel);
}

.projects-content-area {
  flex: 1;
  position: relative;
}

.tab-view {
  display: none;
  animation: panel-fade-in 0.2s steps(2) forwards;
}
.tab-view.active {
  display: block;
}

/* Serious projects card layout */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.project-card {
  border: var(--border-width) solid var(--border-color);
  background-color: var(--bg-panel);
  box-shadow: 4px 4px 0px var(--border-color);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease;
}
.project-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--border-color);
}

.project-header {
  border-bottom: 2px solid var(--border-color);
  padding: 4px 10px;
  background-color: var(--badge-bg);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-tech);
  font-size: 10px;
  font-weight: bold;
}
.proj-id {
  color: var(--accent-red);
}

.project-body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.project-body h3 {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
}
.project-body p {
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.4;
  flex: 1;
}

/* Project dynamic mock widgets */
.canvas-chart-container {
  border: 1px solid var(--border-color);
  background: #000;
  padding: 4px;
  margin: 6px 0;
  display: flex;
  flex-direction: column;
}
.canvas-chart-container canvas {
  width: 100%;
  height: 60px;
}
.chart-tag {
  font-family: var(--font-tech);
  font-size: 7px;
  color: #39FF14;
  margin-top: 2px;
}

.code-terminal-mock {
  border: 1px solid var(--border-color);
  background: #000;
  padding: 6px;
  font-family: var(--font-tech);
  font-size: 9px;
  margin: 6px 0;
}
.term-header {
  border-bottom: 1px solid #333;
  color: #888;
  padding-bottom: 2px;
  margin-bottom: 4px;
}
.term-body {
  color: #FFF;
}
.term-body .green { color: #39FF14; }
.term-body .red { color: var(--accent-red); }
.term-body .yellow { color: var(--accent-yellow); }

.project-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.project-stack span {
  font-family: var(--font-tech);
  font-size: 9px;
  font-weight: bold;
  background-color: var(--badge-bg);
  border: 1px solid var(--border-color);
  padding: 1px 4px;
}

.project-links {
  border-top: 1px dashed var(--border-color);
  padding: 8px 12px;
  display: flex;
  gap: 12px;
}
.proj-link {
  font-family: var(--font-tech);
  font-size: 11px;
  font-weight: bold;
  color: var(--accent-blue);
  text-decoration: none;
}
[data-theme="neural"] .proj-link {
  color: var(--accent-green);
}
.proj-link:hover {
  text-decoration: underline;
}

/* Silly projects card layout */
.silly-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  align-items: stretch;
}

.silly-card {
  border: var(--border-width) solid var(--border-color);
  background-color: var(--bg-panel);
  box-shadow: 4px 4px 0px var(--border-color);
  display: flex;
  flex-direction: column;
}

.widget-header {
  background-color: var(--border-color);
  color: var(--bg-panel);
  padding: 4px 10px;
  font-family: var(--font-tech);
  font-size: 11px;
  font-weight: bold;
}

.widget-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 12px;
  flex: 1;
}

/* Soundboard buttons */
.soundboard-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.sound-btn {
  background-color: var(--bg-panel);
  border: 2px solid var(--border-color);
  padding: 8px;
  font-family: var(--font-tech);
  font-weight: bold;
  font-size: 11px;
  text-align: left;
  box-shadow: 2px 2px 0px var(--border-color);
  transition: all 0.1s ease;
}
.sound-btn:hover {
  background-color: var(--accent-red);
  color: #FFF;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px var(--border-color);
}
.sound-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px var(--border-color);
}

/* Toaster Widget Form */
.toast-control {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.toast-control label {
  font-family: var(--font-tech);
  font-size: 10px;
  font-weight: bold;
}
.toast-control input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: var(--badge-bg);
  border: 1px solid var(--border-color);
  outline: none;
}
.toast-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 18px;
  background: var(--border-color);
  border: 1px solid var(--bg-panel);
}
.toast-control span {
  font-family: var(--font-tech);
  font-size: 11px;
  font-weight: bold;
  align-self: flex-end;
}

.toaster-logs {
  background-color: #000;
  color: var(--accent-yellow);
  font-family: var(--font-tech);
  font-size: 10px;
  padding: 6px;
  height: 70px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  margin-top: auto;
}

/* Terminal Game Widget */
.game-display {
  background-color: #000;
  color: #FFF;
  font-family: var(--font-tech);
  font-size: 10px;
  padding: 8px;
  height: 100px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.game-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cmd-prompt {
  font-family: var(--font-tech);
  font-weight: bold;
  font-size: 12px;
}
.game-input-row input {
  flex: 1;
  border: 2px solid var(--border-color);
  background-color: var(--bg-panel);
  color: var(--fg-main);
  padding: 4px 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  outline: none;
}

/* ==========================================================================
   SYSTEM FOOTER STATUS BAR
   ========================================================================== */
.system-footer {
  display: grid;
  grid-template-columns: 1.2fr 1fr 2fr 1fr;
  border: var(--border-width) solid var(--border-color);
  background-color: var(--bg-panel);
  box-shadow: 4px 4px 0px var(--border-color);
}

.footer-cell {
  padding: 6px 12px;
  border-right: var(--border-width) solid var(--border-color);
  font-family: var(--font-tech);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}
.footer-cell:last-child {
  border-right: none;
}

.footer-marquee-cell {
  padding: 0 12px;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}

/* ==========================================================================
   RESPONSIVE DESIGN (COLLAPSING GRIDS)
   ========================================================================== */

/* Fix sidebar container height and allow scrolling to prevent sizing breakage */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.sidebar::-webkit-scrollbar {
  width: 4px;
}
.sidebar::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
}

/* Header element styling overrides */
.header-select {
  border: 2px solid var(--border-color);
  background-color: var(--bg-panel);
  color: var(--fg-main);
  padding: 4px 8px;
  font-family: var(--font-tech);
  font-size: 12px;
  font-weight: bold;
  outline: none;
}

/* Text Justification alignment for header far-left title */
.justified-title {
  display: inline-block;
  width: 100%;
  text-align: justify;
  text-align-last: justify;
}

/* Sidebar Operator profile and Works items styling */
.bio-content, .works-content {
  font-size: 12px;
  line-height: 1.4;
}

.works-bullet-list {
  list-style-type: square;
  padding-left: 20px;
}
.works-bullet-list li {
  margin-bottom: 4px;
}

/* Clickable Research Domain layout rules */
.domain-item {
  border: 2px solid var(--border-color);
  background-color: var(--bg-panel);
  padding: 8px 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  transition: all 0.15s ease;
  cursor: pointer;
}
.domain-item:hover {
  transform: translateX(4px);
  background-color: var(--bg-main);
}
.domain-item.active {
  background-color: var(--border-color);
  color: var(--bg-panel);
}
.domain-icon {
  font-size: 20px;
}
.domain-title {
  font-weight: 700;
  font-size: 13px;
}

/* Header Navigation tabs */
.header-nav-wrapper {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 2px solid var(--border-color);
  border-right: 2px solid var(--border-color);
  padding: 0 12px;
}
.header-nav {
  display: flex;
  gap: 8px;
}
.header-nav-btn {
  background: none;
  border: 2px solid transparent;
  color: var(--fg-main);
  padding: 2px 6px;
  font-family: var(--font-tech);
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.1s ease;
}
.header-nav-btn:hover {
  background-color: var(--badge-bg);
  border-color: var(--border-color);
}
.header-nav-btn.active {
  background-color: var(--border-color);
  color: var(--bg-panel);
  border-color: var(--border-color);
}

/* blogs connect grid structure */
.blogs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  align-items: stretch;
}
.blogs-column {
  border: var(--border-width) solid var(--border-color);
  background-color: var(--bg-panel);
  box-shadow: 4px 4px 0px var(--border-color);
  display: flex;
  flex-direction: column;
}
.connect-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.connect-lead {
  font-size: 14px;
  font-weight: bold;
}
.social-links-deck {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.social-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: var(--bg-panel);
  color: var(--fg-main);
  border: var(--border-width) solid var(--border-color);
  padding: 12px;
  font-family: var(--font-tech);
  font-weight: bold;
  font-size: 13px;
  text-decoration: none;
  box-shadow: 4px 4px 0px var(--border-color);
  transition: all 0.1s ease;
}
.social-btn:hover {
  background-color: var(--accent-yellow);
  color: #000;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--border-color);
}
.social-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--border-color);
}

.connect-schematic {
  border: 1px dashed var(--border-color);
  background-color: var(--bg-main);
  padding: 8px;
}
.schematic-terminal {
  background-color: #000;
  color: #39FF14;
  font-family: var(--font-tech);
  font-size: 11px;
  padding: 10px;
  height: 100px;
  overflow-y: auto;
}

/* Diary / Blogs list */
.blogs-list {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.blog-item {
  border: 2px solid var(--border-color);
  background-color: var(--bg-panel);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.15s ease;
  cursor: pointer;
}
.blog-item:hover {
  transform: translateX(4px);
  background-color: var(--bg-main);
}
.blog-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-tech);
  font-size: 10px;
  font-weight: bold;
  color: var(--fg-muted);
}
.blog-tag {
  color: var(--accent-red);
}
.blog-title {
  font-size: 14px;
  font-weight: bold;
}
.blog-excerpt {
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.4;
}

/* Blog detail viewer */
.blog-detail-viewer {
  border-top: var(--border-width) solid var(--border-color);
  padding: 16px;
  background-color: var(--badge-bg);
  min-height: 160px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Responsive screen media query overrides */
@media (max-width: 1024px) {
  body {
    cursor: auto;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .custom-cursor {
    display: none !important;
  }
  
  .app-layout {
    height: auto !important;
    overflow: visible !important;
  }
  
  .sidebar {
    max-height: none !important;
    overflow-y: visible !important;
  }
  
  .main-container {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  
  .content-viewport {
    height: auto !important;
    overflow: visible !important;
  }
  
  .view-panel {
    height: auto !important;
    overflow: visible !important;
  }
  
  .folder-deck, .projects-grid, .silly-grid, .blogs-grid {
    grid-template-columns: 1fr !important;
  }
  
  .manifesto-grid, .cris-info-columns {
    grid-template-columns: 1fr !important;
  }
  
  .system-header {
    justify-content: center !important;
    gap: 8px !important;
  }
  .header-left, .header-right {
    justify-content: center !important;
    border-left: none !important;
    border-right: none !important;
    padding: 4px 0 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  .header-nav-wrapper {
    display: none !important;
  }
  .marquee-wrapper {
    width: 100% !important;
    border-left: none !important;
    border-right: none !important;
    margin: 4px 0 !important;
  }
}

/* Notion-Style SVG Icons Alignment */
.box-header-icon {
  width: 14px;
  height: 14px;
  margin-right: 6px;
  display: inline-block;
  vertical-align: middle;
}

.dir-icon-svg {
  width: 14px;
  height: 14px;
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.1s ease;
}

.dir-link:hover .dir-icon-svg {
  transform: scale(1.1);
}

.dir-link.active .dir-icon-svg {
  color: var(--bg-panel);
}

.header-icon {
  width: 13px;
  height: 13px;
  margin-right: 6px;
  display: inline-block;
  vertical-align: middle;
}

.btn-icon-svg {
  width: 12px;
  height: 12px;
  margin-right: 6px;
  display: inline-block;
  vertical-align: middle;
}

.sys-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
}

.flex-align {
  display: flex;
  align-items: center;
}