:root { color-scheme: dark; }

body {
  background: #000;
  color: #E8B84A;
  font-family: Consolas, 'Courier New', monospace;
  margin: 0;
  padding: 0;
}

.page-layout { display: flex; min-height: 100vh; }

.app-switcher {
  flex: 0 0 180px;
  width: 180px;
  background: #0a0704;
  border-right: 1px solid #6b4f1a;
  padding: 24px 16px;
  box-sizing: border-box;
}

.app-switcher-title {
  color: #6b4f1a;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.app-switcher a {
  display: block;
  padding: 8px 10px;
  margin-bottom: 4px;
  border-radius: 4px;
  text-decoration: none;
  color: #E8B84A;
}

.app-switcher a:hover { background: #1b1409; }

.app-switcher a.active {
  background: #FFB300;
  color: #000;
  font-weight: bold;
}

.page-content { flex: 1; min-width: 0; }

.wrap { max-width: 560px; margin: 0 auto; padding: 32px 20px; }

h1 { color: #FFB300; font-size: 20px; letter-spacing: 0.5px; }

a { color: #FFB300; }

.card {
  background: #14100a;
  border: 1px solid #6b4f1a;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 16px;
}

.hint { color: #6b4f1a; font-size: 12px; }

@media (max-width: 640px) {
  .page-layout { flex-direction: column; min-height: 0; }
  .app-switcher {
    width: auto; flex: none; border-right: none;
    border-bottom: 1px solid #6b4f1a; padding: 16px;
    display: flex; align-items: center; gap: 8px; overflow-x: auto;
  }
  .app-switcher-title { display: none; }
  .app-switcher a { margin-bottom: 0; white-space: nowrap; }
}