@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Fira+Code:wght@300;400;500;600;700&display=swap');

:root {
  --background: 220 13% 12%;
  --foreground: 220 13% 82%;
  --card: 220 13% 15%;
  --card-foreground: 220 13% 82%;
  --popover: 220 13% 15%;
  --popover-foreground: 220 13% 82%;
  --primary: 180 100% 50%;
  --primary-foreground: 220 13% 8%;
  --secondary: 220 13% 18%;
  --secondary-foreground: 220 13% 72%;
  --muted: 220 13% 18%;
  --muted-foreground: 220 13% 50%;
  --accent: 150 100% 50%;
  --accent-foreground: 220 13% 8%;
  --destructive: 0 70% 50%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 13% 22%;
  --input: 220 13% 22%;
  --ring: 180 100% 50%;
  --radius: 0rem;

  --vscode-titlebar: 220 13% 10%;
  --vscode-sidebar: 220 13% 14%;
  --vscode-editor: 220 13% 12%;
  --vscode-tab-active: 220 13% 12%;
  --vscode-tab-inactive: 220 13% 16%;
  --vscode-statusbar: 240 60% 40%;
  --vscode-activitybar: 220 13% 10%;
  --vscode-line-number: 220 13% 35%;
  --vscode-line-highlight: 220 13% 15%;

  --neon-cyan: 180 100% 50%;
  --neon-green: 150 100% 50%;
  --neon-pink: 330 100% 60%;
  --neon-yellow: 50 100% 60%;
  --neon-orange: 30 100% 55%;
  --neon-purple: 270 100% 65%;
  --neon-blue: 210 100% 60%;

  --syntax-keyword: 210 100% 60%;
  --syntax-string: 30 100% 55%;
  --syntax-function: 50 100% 60%;
  --syntax-variable: 180 100% 50%;
  --syntax-comment: 220 13% 40%;
  --syntax-type: 150 100% 50%;
  --syntax-number: 270 100% 70%;
  --syntax-tag: 330 100% 60%;

  --sidebar-background: 220 13% 14%;
  --sidebar-foreground: 220 13% 72%;
  --sidebar-primary: 180 100% 50%;
  --sidebar-primary-foreground: 220 13% 8%;
  --sidebar-accent: 220 13% 20%;
  --sidebar-accent-foreground: 220 13% 82%;
  --sidebar-border: 220 13% 22%;
  --sidebar-ring: 180 100% 50%;
}

* { box-sizing: border-box; }
html {
  height: 100%;
  overflow: hidden;
}
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  border-color: hsl(var(--border));
}

/* Layout : un seul scroll (zone contenu), pas de scroll dans le scroll */
.vscode-layout { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.vscode-titlebar {
  height: 2rem;
  background: hsl(var(--vscode-titlebar));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  border-bottom: 1px solid hsl(var(--border));
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  user-select: none;
}
.vscode-main { display: flex; flex: 1; min-height: 0; overflow: hidden; position: relative; }
.vscode-activitybar-desk { flex: none; }
.vscode-sidebar-desk { flex: none; }
.vscode-activitybar {
  width: 3rem;
  background: hsl(var(--vscode-activitybar));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0;
  border-right: 1px solid hsl(var(--border));
  height: 100%;
}
.vscode-sidebar {
  width: 14rem;
  background: hsl(var(--vscode-sidebar));
  border-right: 1px solid hsl(var(--border));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}
.vscode-editor-area { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.vscode-tabs {
  display: flex;
  background: hsl(var(--vscode-tab-inactive));
  border-bottom: 1px solid hsl(var(--border));
  overflow-x: auto;
}
.vscode-tab {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 13px;
  border-right: 1px solid hsl(var(--border));
  min-width: fit-content;
  transition: background-color 0.15s, color 0.15s;
  text-decoration: none;
  color: hsl(var(--muted-foreground));
  border-top: 2px solid transparent;
  cursor: pointer;
  background: none;
  font-family: inherit;
}
.vscode-tab:hover { color: hsl(var(--foreground)); }
.vscode-tab.active {
  background: hsl(var(--vscode-tab-active));
  color: hsl(var(--foreground));
  border-top-color: hsl(var(--primary));
}
.vscode-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: hsl(var(--vscode-editor));
}
.vscode-content-inner { min-height: 100%; padding: 0.25rem 0; }
.vscode-statusbar {
  height: 1.5rem;
  background: hsl(var(--vscode-statusbar));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5rem;
  font-size: 12px;
  color: hsl(var(--primary-foreground));
}

/* Scrollbar */
.scrollbar-vscode::-webkit-scrollbar { width: 0.5rem; }
.scrollbar-vscode::-webkit-scrollbar-track { background: hsl(var(--vscode-editor)); }
.scrollbar-vscode::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground) / 0.3); border-radius: 0; }
.scrollbar-vscode::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / 0.5); }

/* Colors */
.text-foreground { color: hsl(var(--foreground)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.text-primary { color: hsl(var(--primary)); }
.text-neon-cyan { color: hsl(var(--neon-cyan)); }
.text-neon-green { color: hsl(var(--neon-green)); }
.text-neon-yellow { color: hsl(var(--neon-yellow)); }
.text-neon-orange { color: hsl(var(--neon-orange)); }
.text-neon-pink { color: hsl(var(--neon-pink)); }
.text-neon-blue { color: hsl(var(--neon-blue)); }
.text-neon-purple { color: hsl(var(--neon-purple)); }
.text-vscode-line-number { color: hsl(var(--vscode-line-number)); }
.text-syntax-keyword { color: hsl(var(--syntax-keyword)); }
.text-syntax-string { color: hsl(var(--syntax-string)); }
.text-syntax-function { color: hsl(var(--syntax-function)); }
.text-syntax-variable { color: hsl(var(--syntax-variable)); }
.text-syntax-comment { color: hsl(var(--syntax-comment)); }
.text-syntax-type { color: hsl(var(--syntax-type)); }
.text-syntax-number { color: hsl(var(--syntax-number)); }
.text-syntax-tag { color: hsl(var(--syntax-tag)); }
.bg-vscode-line-highlight { background: hsl(var(--vscode-line-highlight)); }
.bg-vscode-sidebar { background: hsl(var(--vscode-sidebar)); }
.bg-secondary { background: hsl(var(--secondary)); }
.bg-background { background: hsl(var(--background)); }
.bg-neon-green\/60 { background: hsl(var(--neon-green) / 0.6); }
.bg-neon-yellow\/60 { background: hsl(var(--neon-yellow) / 0.6); }
.bg-neon-pink\/60 { background: hsl(var(--neon-pink) / 0.6); }
.border-border { border-color: hsl(var(--border)); }

/* Neon */
.neon-glow-cyan {
  text-shadow: 0 0 7px hsl(var(--neon-cyan) / 0.8), 0 0 10px hsl(var(--neon-cyan) / 0.5), 0 0 21px hsl(var(--neon-cyan) / 0.3), 0 0 42px hsl(var(--neon-cyan) / 0.15);
}
.neon-glow-green {
  text-shadow: 0 0 7px hsl(var(--neon-green) / 0.8), 0 0 10px hsl(var(--neon-green) / 0.5), 0 0 21px hsl(var(--neon-green) / 0.3);
}
.neon-box-cyan {
  box-shadow: 0 0 5px hsl(var(--neon-cyan) / 0.3), 0 0 10px hsl(var(--neon-cyan) / 0.15), inset 0 0 5px hsl(var(--neon-cyan) / 0.1);
}
.neon-box-green {
  box-shadow: 0 0 5px hsl(var(--neon-green) / 0.3), 0 0 10px hsl(var(--neon-green) / 0.15), inset 0 0 5px hsl(var(--neon-green) / 0.1);
}

/* Code lines */
.code-line {
  display: flex;
  font-size: 13px;
  line-height: 1.5rem;
}
.code-line:hover { background: hsl(var(--vscode-line-highlight)); }
.code-line-num {
  width: 3rem;
  text-align: right;
  padding-right: 1rem;
  color: hsl(var(--vscode-line-number));
  user-select: none;
  flex-shrink: 0;
}
.code-line-content { padding-left: 0; }
.code-line-content.indent-1 { padding-left: 16px; }
.code-line-content.indent-2 { padding-left: 32px; }

/* Content sections */
.content-section { padding: 0.5rem 0; font-family: inherit; }
.content-section h1 { font-size: 1.875rem; font-weight: 700; margin-bottom: 0.5rem; }
.content-section h2 { font-size: 1.25rem; margin-bottom: 1rem; }
.content-section .btn-primary,
.content-section button.btn-primary { border: 1px solid hsl(var(--primary) / 0.5); color: hsl(var(--primary)); background: transparent; padding: 0.5rem 1rem; font-size: 0.875rem; text-decoration: none; display: inline-flex; transition: all 0.2s; }
.content-section .btn-primary:hover,
.content-section button.btn-primary:hover { background: hsl(var(--primary) / 0.1); }
.content-section .btn-green { border: 1px solid hsl(var(--neon-green) / 0.5); color: hsl(var(--neon-green)); padding: 0.5rem 1rem; font-size: 0.875rem; text-decoration: none; display: inline-flex; transition: all 0.2s; }
.content-section .btn-green:hover { background: hsl(var(--neon-green) / 0.1); }

/* Mobile */
@media (max-width: 767px) {
  .vscode-activitybar-desk { display: none !important; }
  .vscode-sidebar-desk { display: none !important; }
}
@media (min-width: 768px) {
  .vscode-mobile-menu-btn { display: none !important; }
}
@media (min-width: 640px) {
  #titlebar-center { display: inline !important; }
}
@media (max-width: 639px) {
  .vscode-titlebar-menu-text { display: none !important; }
}
.activity-btn { transition: color 0.15s; }
.activity-btn:hover { color: hsl(var(--foreground)) !important; }
.activity-btn.active { color: hsl(var(--foreground)) !important; position: relative; }
.activity-btn.active::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: hsl(var(--primary)); }
.vscode-mobile-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
}
.vscode-mobile-overlay .sidebar-panel { width: 16rem; background: hsl(var(--vscode-sidebar)); border-right: 1px solid hsl(var(--border)); display: flex; flex-direction: column; }
.vscode-mobile-overlay .backdrop { flex: 1; background: hsl(var(--background) / 0.5); }
.hidden { display: none !important; }
.vscode-mobile-overlay.hidden { display: none; }