/* App shell grid */
.app-header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--sp-6);
  background: linear-gradient(180deg, #0f1420 0%, #0a0e17 100%);
  border-bottom: 1px solid var(--border);
  z-index: 100;
  backdrop-filter: blur(12px);
}
.header-left { display: flex; align-items: center; gap: var(--sp-3); }
.logo-mark {
  font-family: var(--font-mono); font-weight: 700; font-size: 20px;
  letter-spacing: 0.15em; color: var(--accent-green);
  padding: 4px 10px; border: 1px solid var(--accent-green);
  border-radius: var(--r-sm);
  text-shadow: 0 0 12px rgba(0, 212, 170, 0.6);
}
.logo-sub { color: var(--text-secondary); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.header-center { text-align: center; }
.header-tagline {
  font-size: 11px; color: var(--text-muted); letter-spacing: 0.2em; text-transform: uppercase;
}
.header-right { display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-4); }
.lang-switcher { display: flex; gap: 2px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px; }
.lang-btn {
  padding: 6px 12px; font-size: 12px; color: var(--text-secondary);
  border-radius: var(--r-sm); transition: all var(--dur-fast) var(--ease);
}
.lang-btn.active { background: var(--accent-green); color: var(--text-inverse); font-weight: 600; }
.user-chip .user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
  display: grid; place-items: center; font-weight: 700;
}

.app-shell {
  position: fixed; top: var(--header-h); left: 0; right: 0; bottom: var(--status-h);
  display: grid; grid-template-columns: var(--sidebar-w) 1fr;
}

.sidebar {
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: var(--sp-3) var(--sp-2);
  gap: var(--sp-2);
  overflow-y: auto;
}
.side-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: var(--sp-3) 4px; border-radius: var(--r-md);
  color: var(--text-muted); font-size: 10px;
  transition: all var(--dur-fast) var(--ease);
  position: relative;
}
.side-btn i { width: 22px; height: 22px; }
.side-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
.side-btn.active {
  color: var(--accent-green); background: var(--accent-green-dim);
  box-shadow: inset 2px 0 0 var(--accent-green);
}
.side-btn.active::before {
  content: ''; position: absolute; left: -8px; top: 20%; bottom: 20%; width: 3px;
  background: var(--accent-green); border-radius: var(--r-pill);
  box-shadow: 0 0 10px var(--accent-green);
}
.side-label { font-weight: 500; letter-spacing: 0.02em; }

.main-content {
  overflow-y: auto;
  padding: var(--sp-6);
  background:
    radial-gradient(ellipse at top left, rgba(52, 152, 255, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(0, 212, 170, 0.04) 0%, transparent 50%),
    var(--bg-primary);
}

.panel { display: none; animation: fadeUp var(--dur-slow) var(--ease); }
.panel.active { display: block; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.panel-header { margin-bottom: var(--sp-6); }
.panel-title {
  font-size: 24px; font-weight: 700; color: var(--text-primary);
  letter-spacing: -0.02em;
}
.panel-subtitle { color: var(--text-secondary); font-size: 13px; margin-top: var(--sp-1); }

.status-bar {
  position: fixed; bottom: 0; left: 0; right: 0; height: var(--status-h);
  background: var(--bg-secondary); border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--sp-6);
  padding: 0 var(--sp-6); font-size: 11px; color: var(--text-muted);
  font-family: var(--font-mono);
  z-index: 100;
}
.status-item { display: flex; align-items: center; gap: var(--sp-2); }
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent-green);
  box-shadow: 0 0 8px var(--accent-green);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}