/* --- Базовые переменные --- */
:root {
  --bg-0: #000000;
  --bg-1: #0b0f0a;
  --bg-2: #0f1610;
  --green: #8bff9a;
  --green-bright: #b8ffb8;
  --green-neo: #23ff6c;
  --grid: #1a2b1d;
  --border: #285434;
  --border-strong: #37a04f;
  --amber: #ffd36a;
  --shadow: rgba(17, 255, 119, 0.25);
}

/* --- Сброс и глобальные стили --- */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { background: var(--bg-0); }
body {
  margin: 0;
  color: var(--green-bright);
  background: radial-gradient(1200px 800px at 50% 40%, var(--bg-2) 0%, var(--bg-1) 40%, var(--bg-0) 100%);
  font-family: "Courier New", "Lucida Console", monospace;
  letter-spacing: 0.5px;
  text-shadow: 0 0 1px var(--green), 0 0 6px var(--shadow);
}

/* Эффект сканлайнов и легкого мерцания */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.04) 0px,
    rgba(255,255,255,0.04) 1px,
    transparent 2px,
    transparent 4px
  );
  mix-blend-mode: overlay;
  animation: flicker 7s infinite linear;
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 80%, 100% { opacity: 0.16; }
  20%, 22% { opacity: 0.10; }
  24% { opacity: 0.13; }
}

.blink {
  animation: blink 1.1s steps(1, end) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* --- Рамка (как у монитора) --- */
.crt-bezel {
  padding: 16px;
}

/* --- Табличная верстка --- */
.layout {
  width: 100%;
  max-width: 980px;
  margin: 32px auto;
  border: 2px solid var(--border);
  border-collapse: collapse;
  box-shadow: 0 0 0 2px var(--grid) inset, 0 0 18px var(--shadow);
  background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
}

.layout td {
  border: 1px solid var(--border);
  padding: 12px 14px;
  vertical-align: top;
}

/* Шапка */
.header td {
  background: linear-gradient(180deg, rgba(10, 30, 15, 0.9) 0%, rgba(10,30,15,0.4) 100%);
  border-bottom: 2px solid var(--border-strong);
}

.logo {
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 1px;
}

.logo-mark { color: var(--amber); margin-right: 6px; }
.tagline { color: var(--green); opacity: 0.9; margin-top: 4px; font-size: 12px; }

/* Навигация */
.nav { width: 220px; background: rgba(8, 18, 12, 0.65); }
.panel-title { font-weight: bold; color: var(--green-neo); margin-bottom: 8px; }
.menu { list-style: square; padding-left: 18px; margin: 0; }
.menu li { margin: 6px 0; }
.menu a {
  color: var(--green-bright);
  text-decoration: none;
  padding: 2px 3px;
  border-bottom: 1px dotted var(--border-strong);
}
.menu a:hover { color: #eaffea; text-shadow: 0 0 8px var(--shadow); }
.menu a:visited { color: #c9a7ff; }

/* Контент */
.content {
  background: rgba(5, 12, 8, 0.55);
}

.content h1 { font-size: 22px; margin: 0 0 10px; }
.content h2 { font-size: 16px; margin: 0 0 8px; color: var(--green-neo); }
.content p  { margin: 0 0 12px; line-height: 1.4; }

.btn {
  display: inline-block;
  margin: 0 6px 10px 0;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  color: var(--green-bright);
  text-decoration: none;
  background: rgba(0,0,0,0.25);
}
.btn:hover { text-shadow: 0 0 8px var(--shadow); color: #eaffea; }

.box {
  border: 1px solid var(--border-strong);
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(8,22,14,0.8) 0%, rgba(8,22,14,0.4) 100%);
  box-shadow: 0 0 12px rgba(35,255,108,0.08) inset;
  margin: 12px 0 16px;
}

/* Вложенная таблица как грид */
.inner-table {
  width: 100%;
  border-collapse: collapse;
}
.inner-table td {
  border: 1px dashed var(--border-strong);
  text-align: center;
  padding: 10px 8px;
  background: rgba(0,0,0,0.25);
}

/* Сайдбар */
.aside { width: 240px; background: rgba(8, 18, 12, 0.65); }
.card { border: 1px solid var(--border-strong); padding: 8px 10px; margin-top: 8px; background: rgba(0,0,0,0.25); }
.card-title { color: var(--amber); font-weight: bold; margin-bottom: 6px; }
.card-body { color: var(--green-bright); }

/* Подвал */
.footer td {
  background: linear-gradient(180deg, rgba(10,30,15,0.4) 0%, rgba(10,30,15,0.8) 100%);
  border-top: 2px solid var(--border-strong);
}
.footer-inner { text-align: center; font-size: 12px; opacity: 0.9; }

/* Мелочи */
::selection { background: rgba(35,255,108,0.24); color: #eaffea; }
a { outline: none; }

/* Небольшая адаптивность под узкие экраны (остаемся в табличной сетке) */
@media (max-width: 740px) {
  .nav { width: 160px; }
  .aside { display: none; }
  .layout { margin: 16px auto; }
}