/* ============================================================
   TowerPower - Hacker Terminal User Interface (TUI) Dashboard
   ============================================================ */

:root {
  --term-bg: #07090e;
  --term-surface: #0c1017;
  --term-panel: #111722;
  --term-border: #1e293b;
  --term-border-bright: #334155;
  
  --term-green: #00ff66;
  --term-green-dim: rgba(0, 255, 102, 0.15);
  --term-cyan: #00e5ff;
  --term-cyan-dim: rgba(0, 229, 255, 0.15);
  --term-amber: #ffb703;
  --term-amber-dim: rgba(255, 183, 3, 0.15);
  --term-yellow: #facc15;
  --term-yellow-dim: rgba(250, 204, 21, 0.15);
  --term-orange: #fb923c;
  --term-blue: #3b82f6;
  --term-purple: #c084fc;
  --term-purple-dim: rgba(192, 132, 252, 0.15);
  --term-red: #ff3366;
  --term-pink: #ff2a85;
  --term-pink-dim: rgba(255, 42, 133, 0.15);
  
  --text-primary: #e2e8f0;
  --text-muted: #94a3b8;
  --text-dim: #475569;
  
  --font-mono: 'JetBrains Mono', 'Share Tech Mono', monospace;
}

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

body {
  font-family: var(--font-mono);
  background-color: var(--term-bg);
  color: var(--text-primary);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  position: relative;
  overflow-x: hidden;
  padding: max(48px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(48px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  line-height: 1.5;
}

/* ============================================================
   WebGL Active CRT Filter Overlay (Ichiaka CRTFilter)
   Zero vignette, active retrace lines, phosphor dot mask,
   subtle analog noise & cathode tube flicker
   ============================================================ */
#crt-canvas,
#crt-canvas-webgl,
.crt-overlay {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 999 !important;
}

/* Main Container Frame */
.terminal-wrapper {
  width: 100%;
  max-width: 1180px;
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 12px;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.45);
}

/* TUI Window Titlebar */
.tui-window-header {
  background: var(--term-surface);
  border: 1px solid var(--term-border);
  padding: 8px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.tui-title-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.window-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.window-dot.red { background: #ff5f56; }
.window-dot.yellow { background: #ffbd2e; }
.window-dot.green { background: #27c93f; }

.window-title {
  color: var(--text-muted);
  font-weight: 500;
  margin-left: 6px;
}

.tui-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.tui-badge {
  color: var(--term-cyan);
}

.tui-separator {
  color: var(--term-border-bright);
}

/* Common TUI Box Styling */
.tui-box {
  background: var(--term-surface);
  border: 1px solid var(--term-border);
  padding: 16px 20px;
  position: relative;
  border-radius: 2px;
}

/* System Banner Section */
.system-banner {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.banner-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
  border-bottom: 1px dashed var(--term-border);
  padding-bottom: 14px;
}

.ascii-art {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.15;
  color: var(--term-green);
  text-shadow: 0 0 10px rgba(0, 255, 102, 0.4);
}

.ascii-tagline {
  font-size: 0.78rem;
  color: var(--term-cyan);
  margin-top: 6px;
  letter-spacing: 0.05em;
}

.system-clock-box {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sys-clock-time {
  font-size: 1.7rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.06em;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

.sys-clock-date {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.sys-uptime {
  font-size: 0.75rem;
  color: var(--term-amber);
  margin-top: 4px;
}

.sys-weather {
  font-size: 0.75rem;
  color: var(--term-cyan);
}

/* ============================================================
   Terminal Hardware Monitoring Cards
   Consistent architecture across all 4 components:
   - Header: Component Label & Hardware Badge
   - Top: Usage / Load
   - Middle: Full-width ASCII Progress Bar
   - Bottom: Utilization % (Underneath)
   - Zero multi-line text wrapping
   ============================================================ */

.tui-meters-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  width: 100%;
}

.meter-card {
  background: rgba(0, 20, 15, 0.45);
  border: 1px solid rgba(0, 255, 102, 0.22);
  border-radius: 4px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.meter-card:hover {
  border-color: rgba(0, 255, 102, 0.45);
  box-shadow: 0 0 12px rgba(0, 255, 102, 0.1);
  background: rgba(0, 26, 20, 0.6);
}

.meter-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  white-space: nowrap;
}

.meter-label {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-primary);
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}

.meter-badge {
  font-size: 0.72rem;
  color: var(--term-cyan);
  font-family: var(--font-mono);
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.2);
  padding: 1px 6px;
  border-radius: 2px;
  white-space: nowrap;
}

.meter-stat-top {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  font-family: var(--font-mono);
  white-space: nowrap;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.meter-bar-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  margin: 3px 0;
}

.meter-bar {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 1.5px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1.2;
}

.meter-bar.fill-green,
.meter-stat-bottom.fill-green {
  color: var(--term-green);
  text-shadow: 0 0 6px rgba(0, 255, 102, 0.35);
}

.meter-bar.fill-amber,
.meter-stat-bottom.fill-amber {
  color: var(--term-amber);
  text-shadow: 0 0 6px rgba(255, 170, 0, 0.35);
}

.meter-bar.fill-red,
.meter-stat-bottom.fill-red {
  color: var(--term-red);
  text-shadow: 0 0 6px rgba(255, 68, 68, 0.35);
}

.meter-stat-bottom {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--term-green);
  font-family: var(--font-mono);
  white-space: nowrap;
  letter-spacing: 0.5px;
}

/* Grouped Sections Container */
.tui-sections-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tui-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tui-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 3px solid var(--term-green);
}

.tui-section-header.pink-accent {
  border-left-color: var(--term-pink);
}

.tui-section-header.pink-accent .section-tag {
  color: var(--term-pink);
}

.tui-section-header.cyan-accent {
  border-left-color: var(--term-cyan);
}

.tui-section-header.purple-accent {
  border-left-color: var(--term-purple);
}

.tui-section-header.purple-accent .section-tag {
  color: var(--term-purple);
}

.tui-section-header.yellow-accent {
  border-left-color: var(--term-yellow);
}

.tui-section-header.yellow-accent .section-tag {
  color: var(--term-yellow);
}

.tui-section-header.infra-accent {
  border-left-color: #94a3b8;
}

.tui-section-header.infra-accent .section-tag {
  color: #94a3b8;
}

.tui-section-header.amber-accent {
  border-left-color: var(--term-amber);
}

.section-tag {
  color: var(--term-cyan);
  font-weight: 700;
}

.section-title {
  color: var(--text-primary);
  font-weight: 700;
}

.section-rule {
  flex: 1;
  height: 1px;
  background: dashed 1px var(--term-border);
  border-bottom: 1px dashed var(--term-border);
}

/* Services Matrix Grid (Legacy & Standard) */
.tui-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 14px;
}

/* Hero Full-Width Card (e.g. Jellyfin & Navidrome) */
.tui-card.hero-card {
  width: 100%;
  border-color: rgba(0, 229, 255, 0.3);
  background: linear-gradient(135deg, rgba(12, 16, 23, 0.95) 0%, rgba(17, 23, 34, 0.8) 100%);
}

.tui-card.hero-card:hover {
  border-color: var(--term-cyan);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.25);
}

.tui-card.hero-card .card-border-header {
  background: rgba(0, 229, 255, 0.08);
  color: var(--term-cyan);
  padding: 10px 16px;
  font-size: 0.88rem;
}

.tui-card.hero-card:hover .card-border-header {
  background: var(--term-cyan);
  color: #000;
}

.tui-card.hero-card .card-body {
  padding: 16px 20px;
}

/* Audio Hero Card Variant (Electric Violet) */
.tui-card.hero-card.hero-audio {
  border-color: rgba(192, 132, 252, 0.35);
  background: linear-gradient(135deg, rgba(15, 12, 24, 0.95) 0%, rgba(22, 17, 34, 0.8) 100%);
}

.tui-card.hero-card.hero-audio:hover {
  border-color: var(--term-purple);
  box-shadow: 0 0 20px rgba(192, 132, 252, 0.25);
}

.tui-card.hero-card.hero-audio .card-border-header {
  background: rgba(192, 132, 252, 0.08);
  color: var(--term-purple);
}

.tui-card.hero-card.hero-audio:hover .card-border-header {
  background: var(--term-purple);
  color: #000;
}

/* Photos / Immich Hero Card Variant (Cyber Yellow) */
.tui-card.hero-card.hero-photos {
  border-color: rgba(250, 204, 21, 0.45) !important;
  background: linear-gradient(135deg, rgba(28, 24, 10, 0.95) 0%, rgba(38, 32, 14, 0.8) 100%) !important;
}

.tui-card.hero-card.hero-photos:hover {
  border-color: #facc15 !important;
  box-shadow: 0 0 22px rgba(250, 204, 21, 0.3) !important;
}

.tui-card.hero-card.hero-photos .card-border-header {
  background: rgba(250, 204, 21, 0.12) !important;
  color: #facc15 !important;
}

.tui-card.hero-card.hero-photos:hover .card-border-header {
  background: #facc15 !important;
  color: #000 !important;
}

.tui-card.hero-card.hero-photos .card-launch,
.tui-card.hero-card.hero-photos .status-indicator.live,
.tui-card.hero-card.hero-photos .status-name {
  color: #facc15 !important;
}

/* AI / Neural Section & Hero Card (Cyber Pink) */
.tui-section-header.pink-accent {
  color: var(--term-pink);
}

.tui-section-header.pink-accent .section-rule {
  background: linear-gradient(90deg, rgba(255, 42, 133, 0.4) 0%, transparent 100%);
}

.tui-card.hero-card.hero-ai {
  border-color: rgba(255, 42, 133, 0.45) !important;
  background: linear-gradient(135deg, rgba(28, 8, 20, 0.95) 0%, rgba(38, 12, 28, 0.8) 100%) !important;
}

.tui-card.hero-card.hero-ai:hover {
  border-color: var(--term-pink) !important;
  box-shadow: 0 0 24px rgba(255, 42, 133, 0.35) !important;
}

.tui-card.hero-card.hero-ai .card-border-header {
  background: rgba(255, 42, 133, 0.12) !important;
  color: var(--term-pink) !important;
}

.tui-card.hero-card.hero-ai:hover .card-border-header {
  background: var(--term-pink) !important;
  color: #000 !important;
}

.tui-card.hero-card.hero-ai .card-launch,
.tui-card.hero-card.hero-ai .status-indicator.live,
.tui-card.hero-card.hero-ai .status-name {
  color: var(--term-pink) !important;
}

.tui-card.hero-card.hero-ai .tui-btn {
  border-color: rgba(255, 42, 133, 0.5) !important;
  color: var(--term-pink) !important;
}

.tui-card.hero-card.hero-ai .tui-btn:hover {
  background: var(--term-pink) !important;
  color: #000 !important;
}

.hero-meta-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 24px;
}

/* Pipeline Subgrid (5 compact columns for Seerr, Radarr, Sonarr, Prowlarr, qBittorrent) */
.pipeline-subgrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

/* Audio Subgrid (4 compact columns strictly in one line for Maloja, Rewind, SpotiFLAC, Soulseek) */
.audio-subgrid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
}

/* Ensure all companion services under hero cards (Cinema & Audio) stay green */
.pipeline-subgrid .tui-card .card-border-header,
.audio-subgrid .tui-card .card-border-header {
  color: var(--term-green) !important;
}
.pipeline-subgrid .tui-card:hover,
.audio-subgrid .tui-card:hover {
  border-color: var(--term-green) !important;
  box-shadow: 0 0 15px rgba(0, 255, 102, 0.18) !important;
}
.pipeline-subgrid .tui-card:hover .card-border-header,
.audio-subgrid .tui-card:hover .card-border-header {
  background: var(--term-green) !important;
  color: #000 !important;
}

/* Infrastructure Subgrid (3 services strictly in one horizontal line) */
.infra-subgrid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
}

/* Infrastructure Card Distinct Color Themes */
/* 1. AList: Warm Amber Orange */
.tui-card.card-alist {
  border-color: rgba(251, 146, 60, 0.45) !important;
}
.tui-card.card-alist:hover {
  border-color: #fb923c !important;
  box-shadow: 0 0 16px rgba(251, 146, 60, 0.25) !important;
}
.tui-card.card-alist .card-border-header {
  color: #fb923c !important;
  background: rgba(251, 146, 60, 0.1) !important;
}
.tui-card.card-alist:hover .card-border-header {
  background: #fb923c !important;
  color: #000 !important;
}
.tui-card.card-alist .card-launch,
.tui-card.card-alist .status-indicator.live,
.tui-card.card-alist .status-name {
  color: #fb923c !important;
}

/* 2. Home Assistant: Royal Blue */
.tui-card.card-ha {
  border-color: rgba(59, 130, 246, 0.45) !important;
}
.tui-card.card-ha:hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.25) !important;
}
.tui-card.card-ha .card-border-header {
  color: #3b82f6 !important;
  background: rgba(59, 130, 246, 0.1) !important;
}
.tui-card.card-ha:hover .card-border-header {
  background: #3b82f6 !important;
  color: #fff !important;
}
.tui-card.card-ha .card-launch,
.tui-card.card-ha .status-indicator.live,
.tui-card.card-ha .status-name {
  color: #3b82f6 !important;
}

/* 3. AdGuard Home: Crimson Red */
.tui-card.card-adguard {
  border-color: rgba(255, 51, 102, 0.45) !important;
}
.tui-card.card-adguard:hover {
  border-color: #ff3366 !important;
  box-shadow: 0 0 16px rgba(255, 51, 102, 0.25) !important;
}
.tui-card.card-adguard .card-border-header {
  color: #ff3366 !important;
  background: rgba(255, 51, 102, 0.1) !important;
}
.tui-card.card-adguard:hover .card-border-header {
  background: #ff3366 !important;
  color: #fff !important;
}
.tui-card.card-adguard .card-launch,
.tui-card.card-adguard .status-indicator.live,
.tui-card.card-adguard .status-name {
  color: #ff3366 !important;
}

/* Duo Grid (Legacy 2 columns) */
.duo-subgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* Compact Card Styling */
.tui-card.compact-card .card-border-header {
  padding: 6px 10px;
  font-size: 0.76rem;
}

.tui-card.compact-card .card-body {
  flex: 1;
  padding: 10px 12px;
  gap: 4px;
  font-size: 0.76rem;
  display: flex;
  flex-direction: column;
}

.tui-card.compact-card .card-meta-line {
  display: flex;
  gap: 6px;
  min-width: 0;
}

.tui-card.compact-card .card-meta-line .k {
  min-width: 48px;
  flex-shrink: 0;
}

.tui-card.compact-card .card-meta-line .v {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* TUI Service Card Base */
.tui-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  background: var(--term-surface);
  border: 1px solid var(--term-border);
  color: var(--text-primary);
  transition: all 0.18s ease-in-out;
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
}

.tui-card:hover {
  border-color: var(--term-green);
  background: var(--term-panel);
  transform: translateY(-2px);
  box-shadow: 0 0 15px rgba(0, 255, 102, 0.15);
}

.card-border-header {
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--term-border);
  padding: 8px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--term-green);
}

.tui-card:hover .card-border-header {
  background: var(--term-green);
  color: #000;
}

.card-pid {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-muted);
}

.tui-card:hover .card-pid {
  color: #000;
}

.card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
  font-size: 0.8rem;
}

.card-meta-line {
  display: flex;
  gap: 8px;
  min-width: 0;
}

.card-meta-line .k {
  color: var(--text-dim);
  font-weight: 600;
  min-width: 60px;
  flex-shrink: 0;
}

.card-meta-line .v {
  color: var(--text-primary);
}

/* Pinned to the bottom of all tiles */
.card-status-line {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed var(--term-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.75rem;
  white-space: nowrap;
}

.card-status-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  min-width: 0;
}

.status-indicator.live {
  color: var(--term-green);
  text-shadow: 0 0 8px rgba(0, 255, 102, 0.8);
  font-size: 0.75rem;
  line-height: 1;
  flex-shrink: 0;
}

.status-indicator.offline {
  color: var(--term-amber);
  text-shadow: 0 0 8px rgba(255, 183, 3, 0.6);
  font-size: 0.75rem;
  line-height: 1;
  flex-shrink: 0;
}

.status-name {
  color: var(--term-green);
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: 0.74rem;
  white-space: nowrap;
}

.status-name.offline {
  color: var(--term-amber);
}

/* Cyberpunk Power Toggle Switch */
.tui-power-btn {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease-in-out;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.3;
}

.tui-power-btn.running {
  color: var(--term-amber);
  background: rgba(255, 183, 3, 0.08);
  border: 1px solid rgba(255, 183, 3, 0.35);
}

.tui-power-btn.running:hover {
  background: var(--term-amber);
  color: #000;
  box-shadow: 0 0 10px rgba(255, 183, 3, 0.4);
}

.tui-power-btn.stopped {
  color: var(--term-cyan);
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.4);
}

.tui-power-btn.stopped:hover {
  background: var(--term-cyan);
  color: #000;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
}

.tui-power-btn.loading {
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.3);
  cursor: wait;
  opacity: 0.8;
  animation: pulse-loading 0.8s infinite alternate;
}

@keyframes pulse-loading {
  from { opacity: 0.4; }
  to { opacity: 1.0; }
}

.card-launch {
  color: var(--term-cyan);
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.tui-card:hover .card-launch {
  color: #fff;
  text-shadow: 0 0 8px var(--term-cyan);
}

/* Quick Hardware Box */
.quick-links-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quick-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

.quick-links-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.tui-btn {
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--term-cyan);
  background: rgba(0, 229, 255, 0.05);
  border: 1px solid rgba(0, 229, 255, 0.2);
  padding: 6px 14px;
  border-radius: 2px;
  transition: all 0.15s ease;
}

.tui-btn:hover {
  background: var(--term-cyan);
  color: #000;
  border-color: var(--term-cyan);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.3);
}

/* Mobile Brand Title (Hidden on desktop, shown on mobile when ASCII art is hidden) */
.mobile-brand-title {
  display: none;
}

/* TUI Footer */
.tui-footer {
  border-top: 1px solid var(--term-border);
  padding-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  font-size: 0.75rem;
  color: var(--text-dim);
  flex-wrap: wrap;
}

/* ============================================================
   Responsive Adaptations & Mobile Layout Engine
   ============================================================ */

/* Large Tablets & Medium Screens */
@media (max-width: 1100px) {
  .tui-meters-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pipeline-subgrid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablets & Mobile Devices */
@media (max-width: 768px) {
  body {
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  }

  .terminal-wrapper {
    margin: 0;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    padding: 8px 6px;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    gap: 12px;
    overflow-x: hidden;
  }

  /* TUI Window Header */
  .tui-window-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
  }

  .tui-title-bar {
    width: 100%;
    font-size: 0.78rem;
  }

  .window-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tui-controls {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.72rem;
  }

  .tui-separator {
    display: none;
  }

  /* Top Banner & Header */
  .system-banner {
    padding: 12px 10px;
    gap: 12px;
  }

  .banner-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .ascii-art {
    display: none;
  }

  .mobile-brand-title {
    display: block;
    font-family: var(--font-mono);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--term-green);
    text-shadow: 0 0 10px rgba(0, 255, 102, 0.4);
    letter-spacing: 1px;
    margin-bottom: 4px;
  }

  .ascii-tagline {
    font-size: 0.72rem;
    white-space: normal;
    line-height: 1.4;
  }

  .system-clock-box {
    width: 100%;
    box-sizing: border-box;
    border-left: none;
    border-top: 1px solid var(--term-border);
    padding-top: 10px;
    text-align: left;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 12px;
  }

  .sys-clock-time {
    font-size: 1.3rem;
  }

  .sys-clock-date,
  .sys-uptime,
  .sys-weather {
    font-size: 0.72rem;
  }

  /* Monitoring Grid - Stacks 1-by-1 vertically */
  .tui-meters-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .meter-card {
    padding: 10px 12px;
  }

  .meter-stat-top {
    font-size: 0.92rem;
  }

  /* Hero & Section Cards */
  .hero-meta-columns {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .card-meta-line {
    font-size: 0.75rem;
    word-break: break-word;
  }

  .pipeline-subgrid,
  .audio-subgrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }

  .infra-subgrid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  .card-border-header {
    font-size: 0.75rem;
  }

  .card-body {
    padding: 10px;
  }

  .card-status-line {
    margin-top: 8px;
    font-size: 0.75rem;
  }

  .card-launch {
    padding: 3px 6px;
    font-size: 0.72rem;
  }

  /* Quick links */
  .quick-links-box {
    padding: 12px 10px;
  }

  .quick-links-row {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }

  .tui-btn {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
    padding: 10px 12px;
    font-size: 0.75rem;
  }

  /* Footer */
  .tui-footer {
    gap: 8px 12px;
    font-size: 0.7rem;
    text-align: center;
    padding: 10px 6px;
  }
}

/* Small Smartphone Viewport (iPhone SE, Galaxy S, etc. <= 480px) */
@media (max-width: 480px) {
  .pipeline-subgrid,
  .audio-subgrid {
    grid-template-columns: 1fr !important;
  }

  .system-clock-box {
    grid-template-columns: 1fr;
  }

  .card-border-header {
    flex-wrap: wrap;
    gap: 4px;
  }

  .card-pid {
    font-size: 0.68rem;
  }

  .card-meta-line .v {
    white-space: normal;
  }

  .meter-card-header {
    font-size: 0.78rem;
  }

  .meter-stat-top {
    font-size: 0.88rem;
  }

  .meter-stat-bottom {
    font-size: 0.78rem;
  }
}