/* ============================================================
   oge-web — Общий файл стилей
   Извлечён из 33+ HTML-файлов для устранения дублирования
   ============================================================ */

:root {
  --color-primary: #667eea;
  --color-secondary: #764ba2;
  --color-success: #4caf50;
  --color-error: #f44336;
  --color-warning: #ff9800;
  --color-info: #2196f3;
  --font-main: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --font-mono: "Courier New", monospace;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 15px;
  --radius-xl: 20px;
  --radius-pill: 25px;
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 15px 40px rgba(0, 0, 0, 0.25);
}

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

/* === Body === */
body {
  font-family: var(--font-main);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  min-height: 100vh;
  padding: 20px;
}

body.body-center {
  display: flex;
  justify-content: center;
}

/* === Container === */
.container {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.container-wide {
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

/* === Typography === */
h1 {
  text-align: center;
  color: white;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  font-size: 1.8rem;
}

h2 {
  color: #333;
  margin-bottom: 15px;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

h3 {
  color: #444;
  margin: 20px 0 10px 0;
  font-size: 1.2rem;
}

.subtitle {
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 40px;
  font-size: 1.1rem;
}

/* === Navigation Links === */
.nav-links {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  transition: background 0.3s;
  font-weight: 500;
}

.back-link:hover {
  background: rgba(255, 255, 255, 0.3);
}

.back-link:focus-visible {
  outline: 3px solid white;
  outline-offset: 2px;
}

/* === Cards === */
.task-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-lg);
  padding: 25px;
  margin-bottom: 25px;
  box-shadow: var(--shadow-md);
}

.theory-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-lg);
  padding: 25px;
  margin-bottom: 25px;
  box-shadow: var(--shadow-md);
}

.theory-section p {
  color: #555;
  line-height: 1.8;
  margin-bottom: 12px;
}

.theory-section ul,
.theory-section ol {
  margin: 10px 0 15px 25px;
  color: #555;
  line-height: 1.8;
}

.theory-section li {
  margin-bottom: 8px;
}

/* === Index Page Grid === */
.tasks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

.tasks-grid .task-card {
  text-align: center;
  border-radius: var(--radius-xl);
  transition: transform 0.3s, box-shadow 0.3s;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.tasks-grid .task-card > a.task-card-link {
  padding: 30px 30px 15px 30px;
}

.tasks-grid .task-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
}

.task-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.theory-link {
  display: block;
  margin-top: auto;
  padding: 15px 20px;
  background: linear-gradient(145deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  text-decoration: none;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  font-size: 1.4rem;
  font-weight: 600;
  transition: filter 0.2s;
}

.theory-link:hover {
  filter: brightness(1.1);
}

.task-number {
  width: 70px;
  height: 70px;
  background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 1.8rem;
  font-weight: bold;
  color: white;
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.task-icon {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.task-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.task-description {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.5;
}

/* Card number gradients */
.tasks-grid .task-card:nth-child(1) .task-number { background: linear-gradient(145deg, #f093fb, #f5576c); box-shadow: 0 8px 20px rgba(240,147,251,0.4); }
.tasks-grid .task-card:nth-child(2) .task-number { background: linear-gradient(145deg, #11998e, #38ef7d); box-shadow: 0 8px 20px rgba(17,153,142,0.4); }
.tasks-grid .task-card:nth-child(3) .task-number { background: linear-gradient(145deg, #4facfe, #00f2fe); box-shadow: 0 8px 20px rgba(79,172,254,0.4); }
.tasks-grid .task-card:nth-child(4) .task-number { background: linear-gradient(145deg, #fa709a, #fee140); box-shadow: 0 8px 20px rgba(250,112,154,0.4); }
.tasks-grid .task-card:nth-child(5) .task-number { background: linear-gradient(145deg, #a18cd1, #fbc2eb); box-shadow: 0 8px 20px rgba(161,140,209,0.4); }
.tasks-grid .task-card:nth-child(6) .task-number { background: linear-gradient(145deg, #ff9a9e, #fecfef); box-shadow: 0 8px 20px rgba(255,154,158,0.4); }
.tasks-grid .task-card:nth-child(7) .task-number { background: linear-gradient(145deg, #84fab0, #8fd3f4); box-shadow: 0 8px 20px rgba(132,250,176,0.4); }
.tasks-grid .task-card:nth-child(8) .task-number { background: linear-gradient(145deg, #ffecd2, #fcb69f); box-shadow: 0 8px 20px rgba(255,236,210,0.4); }
.tasks-grid .task-card:nth-child(9) .task-number { background: linear-gradient(145deg, #667eea, #764ba2); box-shadow: 0 8px 20px rgba(102,126,234,0.4); }
.tasks-grid .task-card:nth-child(10) .task-number { background: linear-gradient(145deg, #f093fb, #f5576c); box-shadow: 0 8px 20px rgba(240,147,251,0.4); }

/* === Task Header === */
.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.task-type {
  background: linear-gradient(145deg, #11998e, #38ef7d);
  color: white;
  padding: 8px 20px;
  border-radius: 20px;
  font-weight: 500;
}

.task-type.delete {
  background: linear-gradient(145deg, #eb3349, #f45c43);
}

.task-type.add {
  background: linear-gradient(145deg, #11998e, #38ef7d);
}

.task-type.greatest {
  background: linear-gradient(145deg, #eb3349, #f45c43);
}

.task-type.least {
  background: linear-gradient(145deg, #11998e, #38ef7d);
}

/* === Task Text === */
.task-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 20px;
}

.task-text .highlight {
  background: linear-gradient(145deg, #fff9c4, #fff59d);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.task-text .code {
  background: #f5f5f5;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
}

.quote {
  background: #f5f7fa;
  border-left: 4px solid var(--color-primary);
  padding: 15px 20px;
  margin: 15px 0;
  border-radius: 0 10px 10px 0;
  font-style: italic;
  color: #444;
}

/* === Answer Section === */
.answer-section {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 2px dashed #ddd;
}

.answer-label {
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  display: block;
}

.answer-input {
  width: 100%;
  max-width: 400px;
  padding: 15px 20px;
  font-size: 1.1rem;
  border: 2px solid #ddd;
  border-radius: 10px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.answer-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
}

.answer-input.correct {
  border-color: var(--color-success);
  background: #e8f5e9;
}

.answer-input.incorrect {
  border-color: var(--color-error);
  background: #ffebee;
}

/* === Buttons === */
.buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
}

.btn {
  border: none;
  padding: 12px 25px;
  border-radius: var(--radius-pill);
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  font-weight: 500;
  color: white;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:focus-visible {
  outline: 3px solid white;
  outline-offset: 2px;
}

.btn:active {
  transform: translateY(0);
}

.btn-check {
  background: linear-gradient(145deg, var(--color-primary), var(--color-secondary));
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-next {
  background: linear-gradient(145deg, #11998e, #38ef7d);
  box-shadow: 0 4px 15px rgba(17, 153, 142, 0.4);
}

.btn-hint {
  background: linear-gradient(145deg, #f093fb, #f5576c);
  box-shadow: 0 4px 15px rgba(240, 147, 251, 0.4);
}

.btn-solution {
  background: linear-gradient(145deg, #4facfe, #00f2fe);
  box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);
}

.btn-clear {
  background: linear-gradient(145deg, #ff6b6b, #ee5a24);
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
}

.btn-reset {
  background: linear-gradient(145deg, #f093fb, #f5576c);
  box-shadow: 0 4px 15px rgba(240, 147, 251, 0.4);
}

/* === Result === */
.result {
  margin-top: 20px;
  padding: 15px 20px;
  border-radius: 10px;
  display: none;
}

.result.correct {
  display: block;
  background: linear-gradient(145deg, #e8f5e9, #c8e6c9);
  border-left: 4px solid var(--color-success);
  color: #2e7d32;
}

.result.incorrect {
  display: block;
  background: linear-gradient(145deg, #ffebee, #ffcdd2);
  border-left: 4px solid var(--color-error);
  color: #c62828;
}

.result-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 10px;
}

/* === Hint Box === */
.hint-box {
  background: #e3f2fd;
  border-radius: var(--radius-md);
  padding: 20px;
  margin-top: 20px;
  border-left: 4px solid var(--color-info);
  display: none;
}

.hint-box h4 {
  color: #1565c0;
  margin-bottom: 10px;
}

.hint-box p {
  color: #333;
  line-height: 1.6;
}

/* === Solution Box === */
.solution-box {
  background: #f5f7fa;
  border-radius: var(--radius-md);
  padding: 20px;
  margin-top: 20px;
  border-left: 4px solid var(--color-primary);
  display: none;
}

.solution-box h4 {
  color: #333;
  margin-bottom: 15px;
}

.solution-step {
  background: white;
  padding: 12px 15px;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  border-left: 3px solid var(--color-primary);
}

.solution-step strong {
  color: var(--color-primary);
}

/* === Formula Box (Theory) === */
.formula-box {
  background: linear-gradient(145deg, #f5f7fa, #e4e8eb);
  border-radius: var(--radius-md);
  padding: 20px;
  margin: 15px 0;
  border-left: 4px solid var(--color-primary);
  text-align: center;
}

.formula {
  font-size: 1.3rem;
  font-weight: bold;
  color: #333;
  font-family: var(--font-mono);
}

.formula-description {
  font-size: 0.95rem;
  color: #666;
  margin-top: 10px;
}

/* === Units Table (Theory) === */
.units-table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
}

.units-table th,
.units-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.units-table th {
  background: linear-gradient(145deg, var(--color-primary), var(--color-secondary));
  color: white;
  font-weight: 600;
}

.units-table tr:hover {
  background: #f5f5f5;
}

.units-table td:first-child {
  font-weight: 600;
  color: var(--color-primary);
}

/* === Example Box (Theory) === */
.example-box {
  background: #e8f5e9;
  border-radius: var(--radius-md);
  padding: 20px;
  margin: 15px 0;
  border-left: 4px solid var(--color-success);
}

.example-box h4 {
  color: #2e7d32;
  margin-bottom: 10px;
}

.example-box p {
  color: #333;
}

.example-solution {
  background: white;
  border-radius: var(--radius-sm);
  padding: 15px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.95rem;
}

/* === Warning Box (Theory) === */
.warning-box {
  background: #fff3e0;
  border-radius: var(--radius-md);
  padding: 20px;
  margin: 15px 0;
  border-left: 4px solid var(--color-warning);
}

.warning-box h4 {
  color: #e65100;
  margin-bottom: 10px;
}

/* === Tip Box (Theory) === */
.tip-box {
  background: #e3f2fd;
  border-radius: var(--radius-md);
  padding: 20px;
  margin: 15px 0;
  border-left: 4px solid var(--color-info);
}

.tip-box h4 {
  color: #1565c0;
  margin-bottom: 10px;
}

/* === Task Type Cards (Theory) === */
.task-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.task-type-card {
  background: linear-gradient(145deg, #f5f7fa, #e4e8eb);
  border-radius: var(--radius-md);
  padding: 20px;
  border-top: 4px solid var(--color-primary);
}

.task-type-card h4 {
  color: #333;
  margin-bottom: 10px;
  font-size: 1.1rem;
}

.task-type-card p {
  color: #666;
  font-size: 0.95rem;
}

/* === Quick Navigation (floating buttons) === */
.quick-nav {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 100;
}

.quick-nav-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform 0.3s;
  box-shadow: var(--shadow-sm);
}

.quick-nav-btn:hover {
  transform: scale(1.1);
}

.quick-nav-btn:focus-visible {
  outline: 3px solid white;
  outline-offset: 2px;
}

.quick-nav-btn.top {
  background: linear-gradient(145deg, var(--color-primary), var(--color-secondary));
  color: white;
}

.quick-nav-btn.theory {
  background: linear-gradient(145deg, #f093fb, #f5576c);
  color: white;
}

.quick-nav-btn.practice {
  background: linear-gradient(145deg, #11998e, #38ef7d);
  color: white;
}

/* === Prev/Next Navigation === */
.task-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  gap: 15px;
}

.task-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  transition: background 0.3s;
  font-weight: 500;
  font-size: 0.95rem;
}

.task-nav a:hover {
  background: rgba(255, 255, 255, 0.35);
}

.task-nav a:focus-visible {
  outline: 3px solid white;
  outline-offset: 2px;
}

.task-nav .nav-placeholder {
  flex: 1;
}

/* === Progress Bar === */
.progress-bar {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  height: 6px;
  margin-bottom: 20px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #11998e, #38ef7d);
  border-radius: 20px;
  transition: width 0.5s ease;
}

.progress-score {
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  margin-bottom: 15px;
}

/* === Footer === */
.footer {
  text-align: center;
  margin-top: 40px;
  padding: 20px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.footer-instruction {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 10px;
}

.footer-copyright {
  color: rgba(255, 255, 255, 0.8);
}

.footer-github {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.3s;
}

.footer-github:hover {
  background: rgba(255, 255, 255, 0.2);
}

.footer-github svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* === Highlight & Code (global) === */
.highlight {
  background: linear-gradient(145deg, #fff9c4, #fff59d);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.code {
  background: #f5f5f5;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

/* === Focus styles for accessibility === */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* Skip to main content link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: white;
  padding: 8px 16px;
  z-index: 200;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 0;
}

/* === Task Selector (oge15) === */
.task-selector {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.task-selector select {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-primary);
  font-size: 0.95rem;
  background: white;
  color: #333;
  cursor: pointer;
}

.task-selector select:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* === Responsive === */
@media (max-width: 600px) {
  body {
    padding: 15px;
  }

  h1 {
    font-size: 1.4rem;
  }

  .subtitle {
    font-size: 1rem;
    margin-bottom: 30px;
  }

  .task-text {
    font-size: 1rem;
  }

  .answer-input {
    font-size: 1rem;
    padding: 12px 15px;
  }

  .btn {
    padding: 10px 20px;
    font-size: 0.9rem;
  }

  .task-card {
    padding: 20px 15px;
  }

  .theory-section {
    padding: 20px 15px;
  }

  .formula {
    font-size: 1.1rem;
  }

  .units-table th,
  .units-table td {
    padding: 8px 10px;
    font-size: 0.9rem;
  }

  .task-number {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }

  .task-nav {
    flex-direction: column;
  }

  .task-nav a {
    width: 100%;
    justify-content: center;
  }
}

/* === Print styles === */
@media print {
  body {
    background: white;
    padding: 0;
  }

  .quick-nav,
  .task-nav,
  .back-link,
  .btn,
  .nav-links {
    display: none !important;
  }

  .task-card,
  .theory-section {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}


/* ============================================================
   Task-specific styles (restored from original inline styles)
   ============================================================ */

/* --- oge.html --- */

.badge { display: inline-block; background: linear-gradient(145deg, #11998e 0%, #38ef7d 100%); color: white; padding: 4px 12px; border-radius: 15px; font-size: 0.75rem; font-weight: 600; margin-left: 8px; vertical-align: middle;}

.task-card.disabled { opacity: 0.6; pointer-events: none; filter: grayscale(0.5);}

.task-card.disabled:hover { transform: none; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);}

.disabled-badge { background: linear-gradient(145deg, #6c757d 0%, #adb5bd 100%);}

.exam-mode .task-number { background: linear-gradient( 145deg, #ff6b6b 0%, #ee5a24 100% ) !important; box-shadow: 0 8px 20px rgba(255, 107, 107, 0.4) !important;}

.generator .task-number { background: linear-gradient( 145deg, #feca57 0%, #ff9f43 100% ) !important; box-shadow: 0 8px 20px rgba(254, 202, 87, 0.4) !important;}

.exam-mode, .generator { display: none;}

/* --- oge10-t.html --- */

.num-subscript { font-size: 0.75em; vertical-align: sub;}

/* --- oge10.html --- */

.task-type.convert { background: linear-gradient(145deg, #f093fb 0%, #f5576c 100%);}

.task-type.arithmetic { background: linear-gradient(145deg, #11998e 0%, #38ef7d 100%);}

.task-type.compare { background: linear-gradient(145deg, #4facfe 0%, #00f2fe 100%);}

.task-type.base { background: linear-gradient(145deg, #ff9a9e 0%, #fecfef 100%); color: #333;}

.number-block { display: inline-flex; align-items: baseline; font-family: "Courier New", monospace;}

.number-block .base { font-size: 0.7em; vertical-align: sub; margin-left: 1px;}

.numbers-list { background: #f5f7fa; border-radius: 8px; padding: 15px 20px; margin: 15px 0; font-family: "Courier New", monospace; font-size: 1.1rem;}

/* --- oge11-t.html --- */

.file-tree { background: #1e1e1e; color: #d4d4d4; border-radius: 12px; padding: 20px; margin: 15px 0; font-family: "Courier New", monospace; font-size: 0.95rem; line-height: 1.8; overflow-x: auto;}

.file-tree .folder { color: #569cd6;}

.file-tree .file { color: #ce9178;}

.search-tip { background: #f0f4ff; border-radius: 12px; padding: 20px; margin: 15px 0; border-left: 4px solid #667eea;}

.search-tip h4 { color: #333; margin-bottom: 10px;}

.search-tip p { color: #555;}

/* --- oge11.html --- */

.download-link { display: inline-flex; align-items: center; gap: 8px; background: rgba(76, 175, 80, 0.85); color: white; text-decoration: none; padding: 12px 20px; border-radius: 25px; transition: background 0.3s; font-weight: 500;}

.download-link:hover { background: rgba(76, 175, 80, 1);}

.stats-bar { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; flex-wrap: wrap;}

.stat-item { background: rgba(255, 255, 255, 0.2); color: white; padding: 8px 18px; border-radius: 20px; font-size: 0.95rem; font-weight: 500;}

.stat-item span { font-weight: 700;}

.stats-bar { flex-direction: column; align-items: center;}

/* --- oge12-t.html --- */

.file-tree { background: #1e1e1e; color: #d4d4d4; border-radius: 12px; padding: 20px; margin: 15px 0; font-family: "Courier New", monospace; font-size: 0.95rem; line-height: 1.8; overflow-x: auto;}

.file-tree .folder { color: #569cd6;}

.file-tree .file { color: #ce9178;}

.file-tree .ext { color: #6a9955;}

.file-tree .size { color: #808080;}

/* --- oge12.html --- */

.download-link { display: inline-flex; align-items: center; gap: 8px; background: rgba(76, 175, 80, 0.85); color: white; text-decoration: none; padding: 12px 20px; border-radius: 25px; transition: background 0.3s; font-weight: 500;}

.download-link:hover { background: rgba(76, 175, 80, 1);}

.stats-bar { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; flex-wrap: wrap;}

.stat-item { background: rgba(255, 255, 255, 0.2); color: white; padding: 8px 18px; border-radius: 20px; font-size: 0.95rem; font-weight: 500;}

.stat-item span { font-weight: 700;}

.stats-bar { flex-direction: column; align-items: center;}

/* --- oge131-t.html --- */

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 20px 0;}

.feature-card { background: linear-gradient(145deg, #f5f7fa 0%, #e4e8eb 100%); border-radius: 12px; padding: 20px; border-top: 4px solid #c0392b;}

.feature-card h4 { color: #333; margin-bottom: 10px; font-size: 1.1rem;}

.feature-card p { color: #666; font-size: 0.95rem; margin: 0;}

.danger-box { background: #ffebee; border-radius: 12px; padding: 20px; margin: 15px 0; border-left: 4px solid #f44336;}

.danger-box h4 { color: #c62828; margin-bottom: 10px;}

.success-box { background: #e8f5e9; border-radius: 12px; padding: 20px; margin: 15px 0; border-left: 4px solid #4caf50;}

.success-box h4 { color: #2e7d32; margin-bottom: 10px;}

.table-wrapper { overflow-x: auto; margin: 15px 0;}

.slide-layout { background: white; border: 2px dashed #c0392b; border-radius: 12px; padding: 20px; margin: 15px 0; min-height: 200px; position: relative;}

.slide-layout .title-placeholder { text-align: center; background: #f0f0f0; padding: 12px; border-radius: 8px; color: #999; font-size: 24px; margin-bottom: 15px;}

.slide-layout .content-area { display: flex; gap: 15px; flex-wrap: wrap;}

.slide-layout .img-placeholder { background: #e8e8e8; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #aaa; font-size: 0.9rem; min-height: 120px; flex: 1; min-width: 150px; border: 2px dashed #ccc;}

.slide-layout .text-placeholder { background: #f5f5f5; border-radius: 8px; padding: 15px; color: #aaa; font-size: 20px; flex: 1; min-width: 150px; min-height: 80px; border: 2px dashed #ccc;}

.checklist-item { display: flex; align-items: flex-start; gap: 12px; background: #f8f9fa; padding: 15px; border-radius: 10px; margin-bottom: 12px; border-left: 4px solid #c0392b;}

.checklist-item .check-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 2px;}

.checklist-item .check-content { color: #555; line-height: 1.6;}

.checklist-item .check-content strong { color: #333;}

.step-number { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: linear-gradient(145deg, #c0392b 0%, #8e44ad 100%); color: white; border-radius: 50%; font-weight: bold; font-size: 0.9rem; flex-shrink: 0;}

.step-item { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 15px;}

.step-item .step-text { color: #555; line-height: 1.6; padding-top: 5px;}

.step-item .step-text strong { color: #333;}

.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0;}

.comparison-card { border-radius: 12px; padding: 20px;}

.comparison-card.wrong { background: #ffebee; border: 2px solid #ef9a9a;}

.comparison-card.correct { background: #e8f5e9; border: 2px solid #a5d6a7;}

.comparison-card h4 { margin-bottom: 10px;}

.comparison-card.wrong h4 { color: #c62828;}

.comparison-card.correct h4 { color: #2e7d32;}

.comparison-card p { color: #555; line-height: 1.6;}

.highlight-box { background: linear-gradient(145deg, #fff8e1, #fff3cd); border-radius: 12px; padding: 20px; margin: 15px 0; border: 2px solid #ffc107; text-align: center;}

.highlight-box p { color: #333; font-size: 1.05rem; margin: 0; font-weight: 500;}

.requirements-list { list-style: none; padding: 0; margin: 15px 0;}

.requirements-list li { background: #f8f9fa; padding: 12px 15px; border-radius: 8px; margin-bottom: 10px; border-left: 4px solid #c0392b; color: #555; line-height: 1.6;}

.requirements-list li strong { color: #333;}

.feature-grid { grid-template-columns: 1fr;}

.slide-layout .content-area { flex-direction: column;}

.comparison-grid { grid-template-columns: 1fr;}

/* --- oge132-t.html --- */

.back-link.active { background: rgba(255, 255, 255, 0.35); border: 2px solid rgba(255, 255, 255, 0.5);}

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 20px 0;}

.feature-card { background: linear-gradient(145deg, #f5f7fa 0%, #e4e8eb 100%); border-radius: 12px; padding: 20px; border-top: 4px solid #2b5876;}

.feature-card h4 { color: #333; margin-bottom: 10px; font-size: 1.1rem;}

.feature-card p { color: #666; font-size: 0.95rem; margin: 0;}

.error-box { background: #fce4ec; border-radius: 12px; padding: 20px; margin: 15px 0; border-left: 4px solid #e53935;}

.error-box h4 { color: #c62828; margin-bottom: 10px;}

.checklist-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 15px; margin: 8px 0; background: #f5f7fa; border-radius: 10px; border-left: 4px solid #2b5876;}

.checklist-item .check-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 2px;}

.checklist-item .check-text { color: #444; line-height: 1.6;}

.checklist-item .check-text strong { color: #2b5876;}

.table-wrapper { overflow-x: auto; margin: 15px 0;}

.sample-text { background: #fafafa; border: 2px solid #ddd; border-radius: 10px; padding: 25px; margin: 15px 0; font-family: "Times New Roman", serif;}

.sample-text .title { text-align: center; font-weight: bold; font-size: 1.2rem; margin-bottom: 15px;}

.sample-text .body { font-size: 1rem; line-height: 1.5; text-align: justify; text-indent: 1cm;}

.sample-text .sample-table { width: 60%; margin: 15px auto; border-collapse: collapse; font-size: 1rem;}

.sample-text .sample-table th, .sample-text .sample-table td { border: 1px solid #333; padding: 6px 12px; text-align: center;}

.sample-text .sample-table td:first-child { text-align: left;}

.sample-text .sample-table th { font-weight: bold;}

.element-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 15px 0;}

.element-card { border-radius: 10px; padding: 20px;}

.element-card.text-card { background: #e8f5e9; border: 2px solid #4caf50;}

.element-card.table-card { background: #e3f2fd; border: 2px solid #2196f3;}

.element-card h4 { margin-bottom: 10px;}

.element-card.text-card h4 { color: #2e7d32;}

.element-card.table-card h4 { color: #1565c0;}

.time-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; margin: 20px 0;}

.time-card { background: linear-gradient(145deg, #f5f7fa 0%, #e4e8eb 100%); border-radius: 12px; padding: 20px; border-top: 4px solid #2b5876; text-align: center;}

.time-card .minutes { font-size: 2rem; font-weight: 700; color: #2b5876; display: block;}

.time-card .label { color: #666; font-size: 0.95rem; margin-top: 5px;}

.secret-card { background: linear-gradient(145deg, #f1f8e9 0%, #dcedc8 100%); border-radius: 12px; padding: 20px; margin: 10px 0; border-left: 4px solid #8bc34a;}

.secret-card h4 { color: #33691e; margin-bottom: 8px;}

.secret-card p { color: #444; margin: 0;}

.score-box { background: linear-gradient(145deg, #f5f7fa 0%, #e4e8eb 100%); border-radius: 12px; padding: 20px; margin: 15px 0; text-align: center;}

.score-box .score { font-size: 2.5rem; font-weight: 700; display: block;}

.score-box .score.good { color: #2e7d32;}

.score-box .score.medium { color: #e65100;}

.score-box .score.bad { color: #c62828;}

.requirements-list { list-style: none; padding: 0; margin: 15px 0;}

.requirements-list li { background: #f8f9fa; padding: 12px 15px; border-radius: 8px; margin-bottom: 10px; border-left: 4px solid #2b5876; color: #555; line-height: 1.6;}

.requirements-list li strong { color: #333;}

.comparison-table th:first-child { width: 30%;}

.feature-grid { grid-template-columns: 1fr;}

.element-grid { grid-template-columns: 1fr;}

.time-grid { grid-template-columns: 1fr;}

.sample-text .sample-table { width: 100%;}

/* --- oge14-t.html --- */

.back-link.active { background: rgba(255, 255, 255, 0.35); border: 2px solid rgba(255, 255, 255, 0.5);}

.toc { background: rgba(255, 255, 255, 0.15); border-radius: 15px; padding: 20px 25px; margin-bottom: 25px; color: white;}

.toc h2 { font-size: 1.3rem; margin-bottom: 12px; text-align: center;}

.toc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px;}

.toc-link { color: white; text-decoration: none; padding: 6px 12px; border-radius: 8px; display: block; transition: background 0.2s;}

.toc-link:hover { background: rgba(255, 255, 255, 0.2);}

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 15px; margin: 20px 0;}

.feature-card { background: linear-gradient(145deg, #f5f7fa 0%, #e4e8eb 100%); border-radius: 12px; padding: 20px; border-top: 4px solid #667eea; transition: transform 0.2s, box-shadow 0.2s;}

.feature-card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);}

.feature-card h4 { color: #333; margin-bottom: 10px; font-size: 1.1rem;}

.feature-card p { color: #666; font-size: 0.95rem; line-height: 1.6;}

.step-card { background: linear-gradient(145deg, #f5f7fa 0%, #e4e8eb 100%); border-radius: 12px; padding: 20px; margin: 12px 0; border-left: 4px solid #667eea; display: flex; align-items: flex-start; gap: 15px;}

.step-card .step-num { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(145deg, #667eea 0%, #764ba2 100%); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2rem;}

.step-card .step-text { color: #555; line-height: 1.6;}

.formula-block { background: linear-gradient(145deg, #f5f7fa 0%, #e4e8eb 100%); border-radius: 12px; padding: 20px; margin: 15px 0; border-left: 4px solid #667eea;}

.formula-desc { font-size: 0.95rem; color: #666; line-height: 1.6;}

.data-table-sample { width: 100%; border-collapse: collapse; margin: 15px 0; font-size: 0.9rem;}

.data-table-sample th { background: #667eea; color: white; padding: 8px 10px; text-align: center; font-weight: 600; border: 1px solid #5566cc;}

.data-table-sample td { padding: 6px 10px; border: 1px solid #ddd; text-align: center; color: #333;}

.data-table-sample td:first-child { text-align: left;}

.data-table-sample tr:nth-child(even) { background: #f5f7fa;}

.error-box { background: #fce4ec; border-radius: 12px; padding: 20px; margin: 15px 0; border-left: 4px solid #e53935;}

.error-box h4 { color: #c62828; margin-bottom: 10px;}

.checklist-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 15px; margin: 8px 0; background: #f5f7fa; border-radius: 10px; border-left: 4px solid #667eea;}

.checklist-item .check-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 2px;}

.checklist-item .check-text { color: #444; line-height: 1.6;}

.checklist-item .check-text strong { color: #667eea;}

.time-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; margin: 20px 0;}

.time-card { background: linear-gradient(145deg, #f5f7fa 0%, #e4e8eb 100%); border-radius: 12px; padding: 20px; border-top: 4px solid #667eea; text-align: center;}

.time-card .minutes { font-size: 2rem; font-weight: 700; color: #667eea; display: block;}

.time-card .label { color: #666; font-size: 0.95rem; margin-top: 5px;}

.secret-card { background: linear-gradient(145deg, #f1f8e9 0%, #dcedc8 100%); border-radius: 12px; padding: 20px; margin: 10px 0; border-left: 4px solid #8bc34a;}

.secret-card h4 { color: #33691e; margin-bottom: 8px;}

.secret-card p { color: #444; margin: 0;}

.criteria-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 20px 0;}

.criteria-card { background: linear-gradient(145deg, #f5f7fa 0%, #e4e8eb 100%); border-radius: 12px; padding: 20px; border-top: 4px solid #667eea;}

.criteria-card h4 { color: #333; margin-bottom: 10px; font-size: 1.1rem;}

.criteria-card p { color: #666; font-size: 0.95rem;}

.criteria-card ul { margin: 8px 0 0 20px; color: #666; font-size: 0.95rem;}

.func-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 20px 0;}

.func-card { background: linear-gradient(145deg, #f5f7fa 0%, #e4e8eb 100%); border-radius: 12px; padding: 15px; border-top: 4px solid #667eea; text-align: center;}

.func-card .func-name { font-size: 1.2rem; font-weight: bold; color: #333; font-family: "Courier New", monospace; margin-bottom: 8px;}

.func-card .func-desc { color: #666; font-size: 0.9rem; line-height: 1.5;}

.section-link { cursor: pointer; scroll-margin-top: 20px;}

.data-table-sample th, .data-table-sample td { padding: 5px 6px; font-size: 0.8rem;}

.func-grid { grid-template-columns: 1fr;}

.feature-grid { grid-template-columns: 1fr;}

.time-grid { grid-template-columns: 1fr;}

.criteria-grid { grid-template-columns: 1fr;}

/* --- oge15-t.html --- */

.back-link.active { background: rgba(255, 255, 255, 0.35); border: 2px solid rgba(255, 255, 255, 0.5);}

.error-box { background: #fce4ec; border-radius: 12px; padding: 20px; margin: 15px 0; border-left: 4px solid #e53935;}

.error-box h4 { color: #c62828; margin-bottom: 10px;}

.formula-block { background: linear-gradient(145deg, #f5f7fa 0%, #e4e8eb 100%); border-radius: 12px; padding: 20px; margin: 15px 0; border-left: 4px solid #667eea;}

.formula-block .formula { font-size: 1.1rem; font-weight: bold; color: #333; font-family: "Courier New", monospace; text-align: center; line-height: 1.6;}

.formula-block .formula-desc { font-size: 0.95rem; color: #666; margin-top: 10px; text-align: center;}

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 20px 0;}

.feature-card { background: linear-gradient(145deg, #f5f7fa 0%, #e4e8eb 100%); border-radius: 12px; padding: 20px; border-top: 4px solid #667eea; text-decoration: none; display: block; transition: transform 0.2s, box-shadow 0.2s;}

.feature-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);}

.feature-card h4 { color: #333; margin-bottom: 10px; font-size: 1.1rem;}

.feature-card p { color: #666; font-size: 0.95rem; margin: 0;}

.step-card { background: linear-gradient(145deg, #f5f7fa 0%, #e4e8eb 100%); border-radius: 12px; padding: 20px; margin: 12px 0; border-left: 4px solid #667eea; display: flex; align-items: flex-start; gap: 15px;}

.step-card .step-num { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(145deg, #667eea 0%, #764ba2 100%); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2rem;}

.step-card .step-text { color: #555; line-height: 1.6;}

.step-card .step-text strong { color: #333;}

.score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; margin: 20px 0;}

.score-card { background: linear-gradient(145deg, #f5f7fa 0%, #e4e8eb 100%); border-radius: 12px; padding: 20px; text-align: center; border-top: 4px solid #667eea;}

.score-card .score { font-size: 2.5rem; font-weight: 700; display: block;}

.score-card .score.good { color: #2e7d32;}

.score-card .score.medium { color: #e65100;}

.score-card .score.bad { color: #c62828;}

.score-card .label { color: #666; font-size: 0.95rem; margin-top: 5px;}

.algo-block { background: #1e1e2e; border-radius: 12px; padding: 20px; margin: 15px 0; font-family: "Courier New", monospace; font-size: 0.95rem; line-height: 1.8; color: #f8f8f2; overflow-x: auto;}

.algo-block .comment { color: #6272a4; font-style: italic;}

.algo-block .keyword { color: #ff79c6; font-weight: bold;}

.algo-block .command { color: #50fa7b;}

.algo-block .condition { color: #8be9fd;}

.checklist-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 15px; margin: 8px 0; background: #f5f7fa; border-radius: 10px; border-left: 4px solid #667eea;}

.checklist-item .check-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 2px;}

.checklist-item .check-text { color: #444; line-height: 1.6;}

.checklist-item .check-text strong { color: #667eea;}

.time-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; margin: 20px 0;}

.time-card { background: linear-gradient(145deg, #f5f7fa 0%, #e4e8eb 100%); border-radius: 12px; padding: 20px; border-top: 4px solid #667eea; text-align: center;}

.time-card .minutes { font-size: 2rem; font-weight: 700; color: #667eea; display: block;}

.time-card .label { color: #666; font-size: 0.95rem; margin-top: 5px;}

.secret-card { background: linear-gradient(145deg, #f1f8e9 0%, #dcedc8 100%); border-radius: 12px; padding: 20px; margin: 10px 0; border-left: 4px solid #8bc34a;}

.secret-card h4 { color: #33691e; margin-bottom: 8px;}

.secret-card p { color: #444; margin: 0;}

.feature-grid { grid-template-columns: 1fr;}

.score-grid { grid-template-columns: 1fr;}

.time-grid { grid-template-columns: 1fr;}

/* --- oge15.html --- */

.header { max-width: 1400px; margin: 0 auto 15px; display: flex; align-items: center; gap: 15px; flex-wrap: wrap;}

.header h1 { color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); font-size: 1.5rem;}

.main-layout { max-width: 1400px; margin: 0 auto; display: flex; gap: 15px; align-items: flex-start;}

/* Left column — code editor */ .left-col { flex: 1 1 45%; min-width: 300px; display: flex; flex-direction: column; gap: 12px;}

/* Right column — field */ .right-col { flex: 1 1 55%; min-width: 400px; display: flex; flex-direction: column; gap: 12px;}

.panel { background: rgba(255,255,255,0.95); border-radius: 12px; padding: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);}

.panel h2 { font-size: 1rem; color: #333; margin-bottom: 10px;}

.btn-sm.load-task { background: #4caf50; color: white; padding: 6px 14px; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 0.85rem; transition: transform 0.15s, box-shadow 0.15s;}

.btn-sm.load-task:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15);}

/* Stats bar */ .stats-bar { display: flex; justify-content: center; gap: 20px; margin-bottom: 12px; flex-wrap: wrap;}

.stat-item { background: rgba(255,255,255,0.2); color: white; padding: 8px 18px; border-radius: 20px; font-size: 0.95rem; font-weight: 500;}

.stat-item span { font-weight: 700;}

/* Code editor */ .editor-wrapper { display: flex; border: 2px solid #ddd; border-radius: 8px; overflow: hidden; background: #1e1e2e; min-height: 350px; font-family: 'Consolas', 'Courier New', monospace; font-size: 14px; line-height: 1.6; position: relative;}

.line-numbers { flex-shrink: 0; width: 44px; padding: 12px 0; background: #1e1e2e; color: #8585a0; text-align: right; overflow: hidden; user-select: none; border-right: 1px solid #333;}

.line-numbers div { padding: 0 8px 0 4px; font-family: inherit; font-size: inherit; line-height: inherit; white-space: pre;}

.line-numbers .active-line { background: rgba(80, 250, 123, 0.15); color: #50fa7b;}

.editor-content { flex: 1; position: relative; min-width: 0;}

.editor-content .editor-highlight { z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 12px; margin: 0; border: none; font-family: inherit; font-size: inherit; line-height: inherit; white-space: pre-wrap; word-wrap: break-word; overflow: hidden; resize: none; color: #f8f8f2; pointer-events: none;}

.editor-content textarea { z-index: 3; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 12px; margin: 0; border: none; font-family: inherit; font-size: inherit; line-height: inherit; white-space: pre-wrap; word-wrap: break-word; overflow: auto; resize: none; scrollbar-width: thin; scrollbar-color: #555 #2d2d44; color: rgba(30, 30, 46, 0.01); background: transparent; caret-color: white; outline: none;}

.editor-highlight .kw { color: #ff79c6; font-weight: bold;}

.editor-highlight .cmd { color: #50fa7b;}

.editor-highlight .cond { color: #8be9fd;}

.editor-highlight .logic { color: #ffb86c;}

.editor-highlight .comment { color: #6272a4; font-style: italic;}

.editor-highlight .paren { color: #f1fa8c;}

.editor-highlight .err { color: #ff5555; text-decoration: underline; text-decoration-color: #ff5555;}

.editor-highlight .active-line-bg { background: rgba(80, 250, 123, 0.08);}

.editor-highlight .line-marker { background: rgba(80, 250, 123, 0.12); border-left: 3px solid #50fa7b; animation: linePulse 1s ease-in-out infinite;}

.editor-highlight .hl-active-line { background: rgba(255, 235, 59, 0.2); display: block;}

/* Controls */ .control-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;}

.control-bar button { padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 0.9rem; transition: transform 0.15s, box-shadow 0.15s;}

.control-bar button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15);}

.control-bar button:active { transform: translateY(0);}

.control-bar button:disabled { opacity: 0.5; cursor: not-allowed; transform: none;}

.btn-run { background: #4caf50; color: white;}

.btn-step { background: #2196f3; color: white;}

.btn-pause { background: #ff9800; color: white;}

.btn-stop { background: #f44336; color: white;}

.speed-control { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #555; margin-left: auto;}

.speed-control input[type="range"] { width: 100px;}

/* Autocomplete */ .ac-item { padding: 4px 10px; cursor: pointer; border-radius: 4px; transition: background 0.15s;}

.ac-item:hover, .ac-item.ac-selected { background: rgba(80, 250, 123, 0.2); color: #50fa7b;}

/* Log */ .log-area { background: #1e1e2e; color: #f8f8f2; border-radius: 8px; padding: 10px; font-family: 'Consolas', 'Courier New', monospace; font-size: 13px; min-height: 80px; max-height: 120px; overflow-y: auto; line-height: 1.5;}

.log-area .log-ok { color: #50fa7b;}

.log-area .log-err { color: #ff5555;}

.log-area .log-info { color: #8be9fd;}

/* Canvas */ .field-container { display: flex; flex-direction: column; align-items: center;}

/* Field controls */ .field-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; width: 100%;}

.field-controls label { font-size: 0.85rem; color: #555; display: flex; align-items: center; gap: 4px;}

.field-controls input[type="number"] { width: 50px; padding: 3px 6px; border: 1px solid #ddd; border-radius: 4px; font-size: 0.85rem;}

.field-controls .btn-sm { padding: 5px 12px; border: none; border-radius: 6px; cursor: pointer; font-size: 0.8rem; font-weight: 500; transition: transform 0.15s;}

.field-controls .btn-sm:hover { transform: translateY(-1px);}

.btn-sm.primary { background: #667eea; color: white;}

.btn-sm.warning { background: #ff9800; color: white;}

.btn-sm.danger { background: #f44336; color: white;}

.btn-sm.success { background: #4caf50; color: white;}

.btn-sm.secondary { background: #607d8b; color: white;}

.field-info { font-size: 0.85rem; color: #666; margin-top: 5px; text-align: center;}

@media (max-width: 900px) {
  .main-layout { flex-direction: column; }
  .left-col, .right-col { flex: 1 1 auto; min-width: 0; width: 100%; }
  .editor-wrapper { min-height: 200px; }
}

/* --- oge16-t.html --- */

.code-block { background: #1e1e1e; color: #d4d4d4; border-radius: 10px; padding: 20px; margin: 15px 0; font-family: "Consolas", "Courier New", monospace; font-size: 0.95rem; line-height: 1.6; overflow-x: auto;}

.code-block .keyword { color: #569cd6;}

.code-block .function { color: #dcdcaa;}

.code-block .string { color: #ce9178;}

.code-block .number { color: #b5cea8;}

.code-block .comment { color: #6a9955;}

.code-block .builtin { color: #4ec9b0;}

.code-block .operator { color: #d4d4d4;}

.table-wrapper { overflow-x: auto; margin: 15px 0;}

.info-table { width: 100%; border-collapse: collapse;}

.info-table th, .info-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #ddd;}

.info-table th { background: linear-gradient(145deg, #667eea 0%, #764ba2 100%); color: white; font-weight: 600;}

.info-table tr:hover { background: #f5f5f5;}

.code-block { font-size: 0.85rem; padding: 15px;}

/* --- oge16.html --- */

.task-type.end-digit { background: linear-gradient(145deg, #667eea, #764ba2);}

.task-type.end-two { background: linear-gradient(145deg, #f093fb, #f5576c);}

.task-type.penult { background: linear-gradient(145deg, #4facfe, #00f2fe);}

.task-type.count-digits { background: linear-gradient(145deg, #fa709a, #fee140);}

.task-type.sum-digits { background: linear-gradient(145deg, #a18cd1, #fbc2eb);}

.task-type.minmax { background: linear-gradient(145deg, #ff9a9e, #fecfef);}

.task-text .highlight-digit { background: linear-gradient(145deg, #e3f2fd, #bbdefb); padding: 2px 6px; border-radius: 4px; font-weight: 600;}

.input-table { width: 100%; border-collapse: collapse; margin: 12px 0; max-width: 500px;}

.input-table th, .input-table td { padding: 10px 15px; text-align: left; border: 1px solid #ddd;}

.input-table th { background: linear-gradient(145deg, #667eea, #764ba2); color: white; font-weight: 600;}

.input-table td { background: #f9f9f9;}

.code-section { margin-top: 25px; padding-top: 20px; border-top: 2px dashed #ddd;}

.code-label { font-weight: bold; color: #333; margin-bottom: 10px; display: block; font-size: 1.05rem;}

.code-editor { width: 100%; min-height: 220px; padding: 16px 20px; font-family: "Consolas", "Courier New", monospace; font-size: 0.95rem; line-height: 1.6; color: #d4d4d4; background: #1e1e1e; border: 2px solid #333; border-radius: 10px; resize: vertical; tab-size: 4; white-space: pre; overflow-x: auto;}

.code-editor:focus { outline: none; border-color: #569cd6; box-shadow: 0 0 10px rgba(86, 156, 214, 0.3);}

.code-editor::placeholder { color: #6a9955; font-style: italic;}

.btn-run { background: linear-gradient(145deg, #11998e, #38ef7d); color: white;}

.btn-run:hover:not(:disabled) { background: linear-gradient(145deg, #0e8a7f, #2ed86e);}

.btn-select { background: linear-gradient(145deg, #ff6b6b, #ee5a24); color: white; padding: 10px 18px; font-size: 0.9rem;}

.btn-prev { background: linear-gradient(145deg, #4facfe, #00f2fe); color: white; padding: 10px 18px; font-size: 0.9rem;}

.btn-next-task { background: linear-gradient(145deg, #a18cd1, #fbc2eb); color: white; padding: 10px 18px; font-size: 0.9rem;}

.output-section { margin-top: 20px; padding: 16px 20px; border-radius: 10px; display: none;}

.output-section.show { display: block;}

.output-section.success { background: #e8f5e9; border: 2px solid #4caf50;}

.output-section.error { background: #ffebee; border: 2px solid #f44336;}

.output-section.runtime-error { background: #fff3e0; border: 2px solid #ff9800;}

.output-section.loading { background: #e3f2fd; border: 2px solid #2196f3; display: block;}

.output-title { font-weight: bold; font-size: 1.05rem; margin-bottom: 10px;}

.output-content { font-family: "Consolas", "Courier New", monospace; font-size: 0.9rem; line-height: 1.6; background: rgba(0, 0, 0, 0.05); padding: 12px 16px; border-radius: 8px; white-space: pre-wrap; overflow-x: auto;}

.output-detail { margin-top: 8px; font-size: 0.9rem; color: #555;}

.hint-title, .solution-title { font-weight: bold; margin-bottom: 12px; font-size: 1.05rem;}

.solution-step .code-block-display { background: #1e1e1e; color: #d4d4d4; border-radius: 10px; padding: 16px 20px; margin: 12px 0; font-family: "Consolas", "Courier New", monospace; font-size: 0.9rem; line-height: 1.6; overflow-x: auto;}

.spinner { display: inline-block; width: 18px; height: 18px; border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: white; border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: middle; margin-right: 8px;}

/* Test results table */ .test-results { margin-top: 20px; border-collapse: collapse; width: 100%; font-size: 0.9rem;}

.test-results th, .test-results td { padding: 8px 12px; text-align: left; border: 1px solid #ddd;}

.test-results th { background: linear-gradient(145deg, #667eea, #764ba2); color: white; font-weight: 600;}

.test-results td { background: #f9f9f9;}

.test-results .pass { color: #4caf50; font-weight: bold;}

.test-results .fail { color: #f44336; font-weight: bold;}

.test-summary { margin-top: 15px; padding: 12px 16px; border-radius: 8px; font-weight: bold; font-size: 1.05rem; text-align: center;}

.test-summary.all-pass { background: #e8f5e9; border: 2px solid #4caf50; color: #2e7d32;}

.test-summary.some-fail { background: #ffebee; border: 2px solid #f44336; color: #c62828;}

.progress-bar-container { display: none; }

.test-results { font-size: 0.8rem;}

.test-results th, .test-results td { padding: 5px 8px;}

/* --- oge2-t.html --- */

.code-table { width: 100%; border-collapse: collapse; margin: 15px 0; font-family: "Courier New", monospace;}

.code-table th, .code-table td { padding: 10px 15px; text-align: center; border: 1px solid #ddd;}

.code-table th { background: linear-gradient(145deg, #667eea 0%, #764ba2 100%); color: white; font-weight: 600;}

.code-table tr:hover td { background: #f0f0f0;}

.fano-box { background: linear-gradient(145deg, #f5f7fa 0%, #e4e8eb 100%); border-radius: 12px; padding: 20px; margin: 15px 0; border-left: 4px solid #667eea;}

.fano-box.direct { border-left-color: #4caf50; background: linear-gradient(145deg, #e8f5e9 0%, #c8e6c9 100%);}

.fano-box.reverse { border-left-color: #e91e63; background: linear-gradient(145deg, #fce4ec 0%, #f8bbd9 100%);}

.fano-box h4 { color: #333; margin-bottom: 10px; font-size: 1.1rem;}

.message-box { background: #1a1a2e; color: #00ff88; padding: 15px 20px; border-radius: 10px; font-family: "Courier New", monospace; font-size: 1.1rem; letter-spacing: 2px; margin: 15px 0; text-align: center; word-break: break-all;}

.decode-step { display: flex; align-items: center; gap: 15px; padding: 10px 15px; background: white; border-radius: 8px; margin: 8px 0; font-family: "Courier New", monospace;}

.decode-bits { background: #1a1a2e; color: #00ff88; padding: 5px 10px; border-radius: 5px; min-width: 60px; text-align: center;}

.decode-arrow { color: #667eea; font-size: 1.2rem;}

.decode-letter { background: #667eea; color: white; padding: 5px 12px; border-radius: 5px; font-weight: bold;}

.tree-diagram { background: #f5f7fa; border-radius: 12px; padding: 20px; margin: 15px 0; text-align: center;}

.tree-node { display: inline-block; padding: 8px 15px; border-radius: 8px; margin: 5px; font-weight: 500;}

.tree-node.root { background: #667eea; color: white;}

.tree-node.branch { background: #e3f2fd; color: #1565c0; border: 2px solid #2196f3;}

.tree-node.leaf { background: #e8f5e9; color: #2e7d32; border: 2px solid #4caf50;}

/* --- oge2.html --- */

.oge2 .answer-section { text-align: center; }
.oge2 .answer-input { width: 300px; text-align: center; text-transform: uppercase; }

.instructions { background: rgba(255, 255, 255, 0.95); padding: 15px 20px; border-radius: 10px; margin-bottom: 20px; text-align: center; font-size: 0.95rem; color: #333;}

.task-text .message { background: #f8f9fa; border: 2px solid #4ca1af; padding: 10px 15px; border-radius: 8px; font-family: "Courier New", monospace; font-size: 1.3rem; letter-spacing: 3px; display: block; margin: 15px 0; word-break: break-all;}

.message-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background: #f8f9fa; border: 2px solid #4ca1af; padding: 10px 15px; border-radius: 8px; margin: 15px 0; gap: 0;}

.message-char { font-family: "Courier New", monospace; font-size: 1.3rem; font-weight: bold; color: #2c3e50; padding: 5px 2px; user-select: none;}

.message-divider-slot { width: 8px; height: 100%; min-height: 30px; cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; border-radius: 2px; transition: background 0.2s;}

.message-divider-slot:hover { background: rgba(76, 161, 175, 0.2);}

.message-divider-slot.has-divider::after { content: ""; position: absolute; width: 3px; height: 80%; background: linear-gradient(145deg, #eb3349 0%, #f45c43 100%); border-radius: 2px; box-shadow: 0 0 5px rgba(235, 51, 73, 0.5);}

.message-divider-slot:hover.has-divider::after { background: linear-gradient(145deg, #c0392b 0%, #e74c3c 100%);}

.divider-hint { font-size: 0.85rem; color: #666; margin-top: 5px; font-style: italic;}

.code-table-container { overflow-x: auto; margin: 20px 0;}

.code-table { width: auto; border-collapse: collapse; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); margin: 0 auto;}

.code-table th, .code-table td { border: 2px solid #e0e0e0; padding: 12px 20px; text-align: center; min-width: 70px;}

.code-table th { background: linear-gradient(145deg, #2c3e50 0%, #4ca1af 100%); color: white; font-weight: 600; font-size: 1.1rem;}

.code-table td { font-family: "Courier New", monospace; font-size: 1.2rem; font-weight: bold; color: #2c3e50;}

.code-table td.letter { background: linear-gradient(145deg, #11998e 0%, #38ef7d 100%); color: white; font-size: 1.3rem;}

.feedback { margin-top: 20px; padding: 15px; border-radius: 10px; text-align: center; font-weight: bold; display: none;}

.feedback.correct { display: block; background: linear-gradient(145deg, #11998e 0%, #38ef7d 100%); color: white;}

.feedback.incorrect { display: block; background: linear-gradient(145deg, #eb3349 0%, #f45c43 100%); color: white;}

.hint-step { margin: 10px 0; padding: 10px 15px; background: rgba(33, 150, 243, 0.1); border-radius: 8px; line-height: 1.6; font-family: "Courier New", monospace;}

.hint-step .code-part { background: rgba(33, 150, 243, 0.2); padding: 2px 6px; border-radius: 4px; font-weight: bold;}

.hint-step .letter-part { color: #11998e; font-weight: bold;}

.hint-step .result { color: #1565c0; font-weight: bold;}

.fano-toggle { background: linear-gradient(145deg, #fff3cd 0%, #ffe69c 100%); border-left: 4px solid #ffc107; padding: 12px 15px; margin: 15px 0; border-radius: 0 8px 8px 0; font-size: 0.95rem; cursor: pointer; transition: all 0.3s ease; user-select: none;}

.fano-toggle:hover { background: linear-gradient(145deg, #ffe69c 0%, #ffd93d 100%);}

.fano-toggle-header { display: flex; align-items: center; justify-content: space-between;}

.fano-toggle-title { font-weight: bold; color: #856404;}

.fano-toggle-icon { font-size: 1.2rem; transition: transform 0.3s ease;}

.fano-toggle.open .fano-toggle-icon { transform: rotate(180deg);}

.fano-content { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #ffc107; color: #856404;}

.fano-toggle.open .fano-content { display: block;}

.stats { display: flex; justify-content: center; gap: 30px; margin-top: 20px; flex-wrap: wrap;}

.stat-item { text-align: center; padding: 10px 20px; background: rgba(255, 255, 255, 0.5); border-radius: 10px;}

.stat-value { font-size: 1.5rem; font-weight: bold; color: #2c3e50;}

.stat-label { font-size: 0.85rem; color: #666;}

.code-table th, .code-table td { padding: 8px 12px; font-size: 1rem;}

/* --- oge3-t.html --- */

.truth-table { width: 100%; border-collapse: collapse; margin: 15px 0; font-size: 1rem;}

.truth-table th, .truth-table td { padding: 12px 15px; text-align: center; border: 1px solid #ddd;}

.truth-table th { background: linear-gradient(145deg, #667eea 0%, #764ba2 100%); color: white; font-weight: 600;}

.truth-table tr:nth-child(even) { background: #f9f9f9;}

.truth-table tr:hover td { background: #f0f0f0;}

.logic-box { background: linear-gradient(145deg, #f5f7fa 0%, #e4e8eb 100%); border-radius: 12px; padding: 20px; margin: 15px 0; border-left: 4px solid #667eea;}

.logic-box h4 { color: #333; margin-bottom: 10px; font-size: 1.1rem;}

.logic-box.and { border-left-color: #4caf50; background: linear-gradient(145deg, #e8f5e9 0%, #c8e6c9 100%);}

.logic-box.or { border-left-color: #2196f3; background: linear-gradient(145deg, #e3f2fd 0%, #bbdefb 100%);}

.logic-box.not { border-left-color: #ff9800; background: linear-gradient(145deg, #fff3e0 0%, #ffe0b2 100%);}

.condition-box { background: #1a1a2e; color: #00ff88; padding: 15px 20px; border-radius: 10px; font-family: "Courier New", monospace; font-size: 1rem; margin: 15px 0; text-align: center;}

.step-box { background: white; border-radius: 8px; padding: 12px 15px; margin: 8px 0; border-left: 3px solid #667eea;}

.step-box strong { color: #667eea;}

.truth-table th, .truth-table td { padding: 8px 10px; font-size: 0.9rem;}

/* --- oge3.html --- */

.condition-box { background: #1a1a2e; color: #00ff88; padding: 15px 20px; border-radius: 10px; font-family: "Courier New", monospace; font-size: 1rem; margin: 15px 0; text-align: center;}

/* --- oge4-path.html --- */

.card { background: rgba(255, 255, 255, 0.95); border-radius: 15px; padding: 25px; margin-bottom: 25px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);}

.card h2 { color: #333; margin-bottom: 15px; font-size: 1.3rem; display: flex; align-items: center; gap: 10px;}

.card p { color: #555; line-height: 1.7; margin-bottom: 10px;}

.controls-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 20px;}

.control-group { display: flex; flex-direction: column; gap: 6px; min-width: 150px;}

.control-group label { font-weight: 600; color: #444; font-size: 0.9rem;}

.control-group input { padding: 10px 14px; font-size: 1rem; border: 2px solid #ddd; border-radius: 10px; transition: border-color 0.3s, box-shadow 0.3s; width: 100%;}

.control-group input:focus { outline: none; border-color: #667eea; box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);}

.control-group input.error { border-color: #f44336; background: #ffebee;}

.btn-primary { background: linear-gradient(145deg, #667eea 0%, #764ba2 100%); color: white; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);}

.btn-success { background: linear-gradient(145deg, #11998e 0%, #38ef7d 100%); color: white; box-shadow: 0 4px 15px rgba(17, 153, 142, 0.4);}

.btn-warning { background: linear-gradient(145deg, #f093fb 0%, #f5576c 100%); color: white; box-shadow: 0 4px 15px rgba(240, 147, 251, 0.4);}

.matrix-container { display: flex; justify-content: center; margin: 20px 0; overflow-x: auto;}

.matrix-table { border-collapse: collapse; font-size: 0.95rem;}

.matrix-table th, .matrix-table td { padding: 0; text-align: center; border: 1px solid #ddd; min-width: 50px; height: 42px;}

.matrix-table th { background: linear-gradient(145deg, #667eea 0%, #764ba2 100%); color: white; font-weight: 600; white-space: nowrap; padding: 8px 10px;}

.matrix-table td { background: #f9f9f9;}

.matrix-table td input { display: block; width: 100%; height: 100%; border: none; margin: 0; padding: 0 4px; text-align: center; font-size: 0.9rem; font-family: inherit; line-height: 42px; background: transparent; box-sizing: border-box; outline: none;}

.matrix-table td input:focus { background: #fffde7; box-shadow: inset 0 0 0 2px #667eea;}

.matrix-table td.diagonal { background: #e8e8e8;}

.matrix-table td.diagonal input { color: #999; cursor: default; user-select: none;}

.matrix-table td.mirror { background: #f0f0f0;}

.matrix-table td.mirror .mirror-value { display: block; width: 100%; padding: 0 4px; text-align: center; font-size: 0.9rem; line-height: 42px; color: #999; user-select: none;}

.matrix-table td.mirror.has-value { background: #e8f5e9;}

.matrix-table td.mirror.has-value .mirror-value { color: #2e7d32; font-weight: 600;}

.matrix-table td.editable.has-value { background: #e8f5e9;}

.matrix-table td.editable.has-value input { color: #2e7d32; font-weight: 600;}

.query-row { display: flex; gap: 15px; flex-wrap: wrap; align-items: flex-end; margin-top: 20px; padding-top: 20px; border-top: 2px dashed #ddd;}

.query-row select { padding: 10px 14px; font-size: 1rem; border: 2px solid #ddd; border-radius: 10px; background: white; transition: border-color 0.3s; cursor: pointer;}

.query-row select:focus { outline: none; border-color: #667eea; box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);}

.result-box { margin-top: 20px; padding: 20px 25px; border-radius: 15px; display: none; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); animation: resultPop 0.4s ease-out;}

.result-box.show { display: block;}

.result-box.success { background: linear-gradient(145deg, #e8f5e9 0%, #c8e6c9 100%); border: 2px solid #4caf50;}

.result-box.error { background: linear-gradient(145deg, #ffebee 0%, #ffcdd2 100%); border: 2px solid #f44336;}

.result-title { font-size: 1.2rem; font-weight: 700; color: #2e7d32; margin-bottom: 10px; display: flex; align-items: center; gap: 8px;}

.result-box.error .result-title { color: #c62828;}

.result-path { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 15px 0; font-family: "Courier New", monospace;}

.segment-vertex { padding: 6px 10px; background: white; border-radius: 8px; font-weight: 700; font-size: 1.2rem; color: #333; border: 2px solid #667eea; min-width: 40px; text-align: center; z-index: 1;}

.segment-edge { display: flex; flex-direction: column; align-items: center; margin: 0 2px;}

.segment-weight { font-size: 0.75rem; color: #e65100; font-weight: 700; line-height: 1;}

.segment-arrow { font-size: 1.1rem; color: #999; line-height: 1;}

.result-length { font-size: 1.1rem; color: #555; margin-top: 8px;}

.result-length strong { color: #2e7d32; font-size: 1.3rem;}

.label-editor { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px;}

.label-editor input { width: 46px; padding: 6px 4px; font-size: 0.9rem; text-align: center; border: 2px solid #ddd; border-radius: 8px; transition: border-color 0.3s;}

.label-editor input:focus { outline: none; border-color: #667eea; box-shadow: 0 0 6px rgba(102, 126, 234, 0.3);}

.label-hint { font-size: 0.82rem; color: #888; margin-top: 4px;}

.algorithm-info { background: #e3f2fd; border-radius: 10px; padding: 15px 20px; margin-top: 20px; border-left: 4px solid #2196f3; font-size: 0.9rem; color: #1565c0; line-height: 1.6;}

.algorithm-info strong { display: block; margin-bottom: 5px;}

.card { padding: 18px 12px;}

.matrix-table th, .matrix-table td { min-width: 36px;}

.matrix-table th { padding: 5px 4px; font-size: 0.8rem;}

.controls-row { flex-direction: column; gap: 12px;}

/* --- oge4-t.html --- */

.matrix-container { display: flex; justify-content: center; margin: 20px 0;}

.matrix-table { border-collapse: collapse; font-size: 1rem;}

.matrix-table th, .matrix-table td { padding: 10px 15px; text-align: center; border: 1px solid #ddd; min-width: 40px;}

.matrix-table th { background: linear-gradient(145deg, #667eea 0%, #764ba2 100%); color: white; font-weight: 600;}

.matrix-table td { background: #f9f9f9;}

.matrix-table td.highlight { background: #fff9c4; font-weight: bold;}

.matrix-table td.empty { background: #e0e0e0;}

.graph-container { display: flex; justify-content: center; margin: 20px 0;}

.graph-svg { max-width: 100%; height: auto;}

.step-box { background: white; border-radius: 8px; padding: 12px 15px; margin: 8px 0; border-left: 3px solid #667eea;}

.step-box strong { color: #667eea;}

.path-box { background: linear-gradient(145deg, #e8f5e9 0%, #c8e6c9 100%); border-radius: 8px; padding: 10px 15px; margin: 8px 0; border-left: 3px solid #4caf50;}

.path-box.best { background: linear-gradient(145deg, #fff9c4 0%, #fff59d 100%); border-left-color: #ffc107; font-weight: bold;}

.matrix-table th, .matrix-table td { padding: 6px 8px; font-size: 0.9rem;}

/* --- oge4.html --- */

.task-type.via-point { background: linear-gradient(145deg, #eb3349 0%, #f45c43 100%);}

.matrix-container { display: flex; justify-content: center; margin: 20px 0; overflow-x: auto;}

.matrix-table { border-collapse: collapse; font-size: 1rem;}

.matrix-table th, .matrix-table td { padding: 10px 15px; text-align: center; border: 1px solid #ddd; min-width: 40px;}

.matrix-table th { background: linear-gradient(145deg, #667eea 0%, #764ba2 100%); color: white; font-weight: 600;}

.matrix-table td { background: #f9f9f9;}

.matrix-table td.empty { background: #e0e0e0; color: #999;}

.path-item { background: linear-gradient(145deg, #e8f5e9 0%, #c8e6c9 100%); padding: 8px 12px; border-radius: 6px; margin: 5px 0; border-left: 3px solid #4caf50;}

.path-item.best { background: linear-gradient(145deg, #fff9c4 0%, #fff59d 100%); border-left-color: #ffc107; font-weight: bold;}

.matrix-table th, .matrix-table td { padding: 6px 8px; font-size: 0.9rem;}

/* --- oge5-t.html --- */

.command-table { width: 100%; border-collapse: collapse; margin: 15px 0;}

.command-table th, .command-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #ddd;}

.command-table th { background: linear-gradient(145deg, #667eea 0%, #764ba2 100%); color: white; font-weight: 600;}

.command-table tr:hover { background: #f5f5f5;}

.command-table td:first-child { font-weight: 600; color: #667eea;}

.algorithm-box { background: #f5f7fa; border-radius: 8px; padding: 15px; margin: 10px 0; font-family: "Courier New", monospace; border-left: 3px solid #667eea;}

.algorithm-step { padding: 5px 0; display: flex; align-items: center; gap: 10px;}

.step-number { background: #667eea; color: white; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: bold;}

.command-table th, .command-table td { padding: 8px 10px; font-size: 0.9rem;}

/* --- oge5.html --- */

.task-type.algorithm { background: linear-gradient(145deg, #667eea 0%, #764ba2 100%);}

.task-type.parameter { background: linear-gradient(145deg, #f093fb 0%, #f5576c 100%);}

.commands-box { background: #f5f7fa; border-radius: 12px; padding: 15px 20px; margin: 15px 0; border-left: 4px solid #667eea;}

.commands-box h4 { color: #333; margin-bottom: 10px;}

.command-item { padding: 5px 0; font-family: "Courier New", monospace;}

.command-number { display: inline-block; width: 20px; height: 20px; background: #667eea; color: white; border-radius: 50%; text-align: center; line-height: 20px; font-size: 0.8rem; margin-right: 10px;}

.algorithm-step { background: linear-gradient(145deg, #e8f5e9 0%, #c8e6c9 100%); padding: 8px 12px; border-radius: 6px; margin: 5px 0; border-left: 3px solid #4caf50; font-family: "Courier New", monospace;}

/* --- oge6-t.html --- */

.code-block { background: #2d2d2d; color: #f8f8f2; border-radius: 8px; padding: 15px; margin: 15px 0; font-family: "Courier New", monospace; font-size: 0.95rem; overflow-x: auto;}

.code-block .keyword { color: #66d9ef;}

.code-block .string { color: #a6e22e;}

.code-block .comment { color: #75715e;}

.code-block .function { color: #f92672;}

.code-block .number { color: #ae81ff;}

.code-block .operator { color: #f92672;}

.comparison-table { width: 100%; border-collapse: collapse; margin: 15px 0;}

.comparison-table th, .comparison-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #ddd;}

.comparison-table th { background: linear-gradient(145deg, #667eea 0%, #764ba2 100%); color: white; font-weight: 600;}

.comparison-table tr:hover { background: #f5f5f5;}

.comparison-table code { background: #f5f5f5; padding: 2px 6px; border-radius: 4px; font-family: "Courier New", monospace;}

.algorithm-box { background: #f5f7fa; border-radius: 8px; padding: 15px; margin: 10px 0; font-family: "Courier New", monospace; border-left: 3px solid #667eea;}

.algorithm-step { padding: 5px 0; display: flex; align-items: center; gap: 10px;}

.step-number { background: #667eea; color: white; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: bold;}

.trace-table { width: 100%; border-collapse: collapse; margin: 15px 0; font-size: 0.95rem;}

.trace-table th, .trace-table td { padding: 10px 12px; text-align: center; border: 1px solid #ddd;}

.trace-table th { background: linear-gradient(145deg, #667eea 0%, #764ba2 100%); color: white; font-weight: 600;}

.trace-table tr:nth-child(even) { background: #f9f9f9;}

.trace-table .yes { background: #e8f5e9; color: #2e7d32; font-weight: bold;}

.trace-table .no { background: #ffebee; color: #c62828; font-weight: bold;}

/* Интерактивные пары чисел */ .pairs-container { display: flex; flex-wrap: wrap; gap: 10px; margin: 15px 0;}

.pair-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 70px; padding: 8px 12px; border: 2px solid #ddd; border-radius: 8px; background: #f5f5f5; cursor: pointer; font-family: "Courier New", monospace; font-size: 0.95rem; transition: all 0.2s ease; user-select: none;}

.pair-btn:hover { border-color: #667eea; transform: translateY(-2px); box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);}

.pair-btn.yes { background: linear-gradient(145deg, #e8f5e9 0%, #c8e6c9 100%); border-color: #4caf50; color: #2e7d32; font-weight: bold;}

.pair-btn.no { background: linear-gradient(145deg, #ffebee 0%, #ffcdd2 100%); border-color: #f44336; color: #c62828; font-weight: bold;}

.pair-counter { display: inline-flex; align-items: center; gap: 15px; margin-top: 15px; padding: 10px 15px; background: linear-gradient(145deg, #f5f7fa 0%, #e4e8eb 100%); border-radius: 8px; font-size: 0.95rem;}

.pair-counter .count { font-weight: bold; font-size: 1.1rem;}

.pair-counter .count.yes-count { color: #2e7d32;}

.pair-counter .count.no-count { color: #c62828;}

.pair-hint { font-size: 0.85rem; color: #666; margin-top: 10px; font-style: italic;}

.comparison-table th, .comparison-table td { padding: 8px 10px; font-size: 0.9rem;}

/* --- oge6.html --- */

.task-type.count { background: linear-gradient(145deg, #667eea 0%, #764ba2 100%);}

.task-type.parameter { background: linear-gradient(145deg, #f093fb 0%, #f5576c 100%);}

.code-block { background: #2d2d2d; color: #f8f8f2; border-radius: 8px; padding: 15px; margin: 15px 0; font-family: "Courier New", monospace; font-size: 0.95rem; overflow-x: auto;}

.code-block .keyword { color: #66d9ef;}

.code-block .string { color: #a6e22e;}

.code-block .number { color: #ae81ff;}

.code-block .comment { color: #75715e;}

.pairs-box { background: #f5f7fa; border-radius: 12px; padding: 15px 20px; margin: 15px 0; border-left: 4px solid #667eea;}

.pairs-box h4 { color: #333; margin-bottom: 10px;}

.pairs-list { display: flex; flex-wrap: wrap; gap: 10px;}

.pair-item { background: white; padding: 5px 12px; border-radius: 15px; font-family: "Courier New", monospace; font-size: 0.95rem; border: 1px solid #ddd;}

/* Интерактивные пары чисел */ .pairs-container { display: flex; flex-wrap: wrap; gap: 10px; margin: 15px 0;}

.pair-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 70px; padding: 8px 12px; border: 2px solid #ddd; border-radius: 8px; background: #f5f5f5; cursor: pointer; font-family: "Courier New", monospace; font-size: 0.95rem; transition: all 0.2s ease; user-select: none;}

.pair-btn:hover { border-color: #667eea; transform: translateY(-2px); box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);}

.pair-btn.yes { background: linear-gradient(145deg, #e8f5e9 0%, #c8e6c9 100%); border-color: #4caf50; color: #2e7d32; font-weight: bold;}

.pair-btn.no { background: linear-gradient(145deg, #ffebee 0%, #ffcdd2 100%); border-color: #f44336; color: #c62828; font-weight: bold;}

.pair-counter { display: inline-flex; align-items: center; gap: 15px; margin-top: 15px; padding: 10px 15px; background: linear-gradient(145deg, #f5f7fa 0%, #e4e8eb 100%); border-radius: 8px; font-size: 0.95rem;}

.pair-counter .count { font-weight: bold; font-size: 1.1rem;}

.pair-counter .count.yes-count { color: #2e7d32;}

.pair-counter .count.no-count { color: #c62828;}

.pair-hint { font-size: 0.85rem; color: #666; margin-top: 10px; font-style: italic;}

/* Переключатель языков */ .language-tabs { display: flex; gap: 5px; margin-bottom: 10px;}

.lang-tab { padding: 8px 16px; border: none; border-radius: 8px 8px 0 0; background: #555; color: #aaa; cursor: pointer; font-size: 0.9rem; font-weight: 500; transition: all 0.2s ease;}

.lang-tab:hover { background: #666; color: #fff;}

.lang-tab.active { background: #2d2d2d; color: #fff;}

.code-wrapper { position: relative;}

.code-wrapper .code-block { display: none;}

.code-wrapper .code-block.active { display: block;}

.trace-table { width: 100%; border-collapse: collapse; margin: 15px 0; font-size: 0.9rem;}

.trace-table th, .trace-table td { padding: 8px 10px; text-align: center; border: 1px solid #ddd;}

.trace-table th { background: linear-gradient(145deg, #667eea 0%, #764ba2 100%); color: white; font-weight: 600;}

.trace-table tr:nth-child(even) { background: #f9f9f9;}

.trace-table .yes { background: #e8f5e9; color: #2e7d32; font-weight: bold;}

.trace-table .no { background: #ffebee; color: #c62828; font-weight: bold;}

.trace-table { font-size: 0.8rem;}

.trace-table th, .trace-table td { padding: 5px 6px;}

/* --- oge7-t.html --- */

.theory-intro { background: rgba(255, 255, 255, 0.95); border-radius: 15px; padding: 25px; margin-bottom: 25px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);}

.theory-intro h2 { color: #333; margin-bottom: 15px; font-size: 1.4rem;}

.theory-intro p { color: #555; line-height: 1.7; margin-bottom: 10px;}

.theory-intro ul { margin: 15px 0 15px 20px; color: #555;}

.theory-intro li { margin-bottom: 8px; line-height: 1.6;}

.category-section { background: rgba(255, 255, 255, 0.95); border-radius: 15px; padding: 25px; margin-bottom: 25px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);}

.category-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 3px solid;}

.category-header.protocol { border-color: #e94560;}

.category-header.domain { border-color: #38ef7d;}

.category-header.path { border-color: #f093fb;}

.category-header.file { border-color: #667eea;}

.category-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem;}

.category-icon.protocol { background: linear-gradient(145deg, #e94560 0%, #ff6b6b 100%);}

.category-icon.domain { background: linear-gradient(145deg, #11998e 0%, #38ef7d 100%);}

.category-icon.path { background: linear-gradient(145deg, #f093fb 0%, #f5576c 100%);}

.category-icon.file { background: linear-gradient(145deg, #667eea 0%, #764ba2 100%);}

.category-title { font-size: 1.5rem; color: #333;}

.category-description { color: #666; line-height: 1.6; margin-bottom: 20px; padding: 15px; background: #f8f9fa; border-radius: 10px; border-left: 4px solid #e94560;}

.formula-part { display: inline-block; padding: 5px 10px; border-radius: 5px; margin: 2px;}

.formula-part.protocol { background: linear-gradient(145deg, #e94560 0%, #ff6b6b 100%);}

.formula-part.separator { background: #607d8b;}

.formula-part.domain { background: linear-gradient(145deg, #11998e 0%, #38ef7d 100%);}

.formula-part.path { background: linear-gradient(145deg, #f093fb 0%, #f5576c 100%);}

.formula-part.file { background: linear-gradient(145deg, #667eea 0%, #764ba2 100%);}

.example-url { font-family: "Consolas", "Courier New", monospace; font-size: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 2px;}

.url-part { padding: 4px 8px; border-radius: 4px; font-weight: 500;}

.url-part.protocol { background: rgba(233, 69, 96, 0.3); color: #ff6b6b;}

.url-part.separator { background: rgba(96, 125, 139, 0.3); color: #b0bec5;}

.url-part.domain { background: rgba(17, 153, 142, 0.3); color: #38ef7d;}

.url-part.path { background: rgba(240, 147, 251, 0.3); color: #f5576c;}

.url-part.file { background: rgba(102, 126, 234, 0.3); color: #a18cd1;}

.protocols-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px;}

.protocol-item { background: linear-gradient(145deg, #f5f7fa 0%, #e4e8eb 100%); border-radius: 10px; padding: 15px; text-align: center; cursor: pointer; transition: all 0.3s; border: 2px solid transparent;}

.protocol-item:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); border-color: #e94560;}

.protocol-name { font-family: "Consolas", "Courier New", monospace; font-size: 1.1rem; font-weight: 600; color: #333; margin-bottom: 5px;}

.protocol-desc { font-size: 0.8rem; color: #666;}

.comparison-table { width: 100%; border-collapse: collapse; margin: 20px 0;}

.comparison-table th, .comparison-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #e0e0e0;}

.comparison-table th { background: linear-gradient(145deg, #1a1a2e 0%, #0f3460 100%); color: white;}

.comparison-table tr:hover { background: #f8f9fa;}

.comparison-table code { background: #f0f0f0; padding: 2px 8px; border-radius: 4px; font-family: "Consolas", monospace; font-weight: 600;}

.steps-section { background: rgba(255, 255, 255, 0.95); border-radius: 15px; padding: 25px; margin-bottom: 25px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);}

.step-item { display: flex; gap: 15px; margin-bottom: 20px; padding: 15px; background: #f8f9fa; border-radius: 10px; align-items: flex-start;}

.step-number { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; color: white; font-size: 1.2rem;}

.step-number.step1 { background: linear-gradient(145deg, #e94560 0%, #ff6b6b 100%);}

.step-number.step2 { background: linear-gradient(145deg, #11998e 0%, #38ef7d 100%);}

.step-number.step3 { background: linear-gradient(145deg, #f093fb 0%, #f5576c 100%);}

.step-number.step4 { background: linear-gradient(145deg, #667eea 0%, #764ba2 100%);}

.step-content h4 { color: #333; margin-bottom: 8px;}

.step-content p { color: #666; line-height: 1.6;}

.interactive-demo { background: #1a1a2e; border-radius: 15px; padding: 25px; margin: 20px 0;}

.interactive-demo h3 { color: white; margin-bottom: 20px; text-align: center;}

.demo-builder { display: flex; flex-direction: column; gap: 15px;}

.demo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;}

.demo-label { color: #b0bec5; min-width: 100px;}

.demo-input { flex: 1; min-width: 200px; padding: 10px 15px; border: 2px solid #37474f; border-radius: 8px; background: #263238; color: white; font-family: "Consolas", monospace; font-size: 1rem;}

.demo-input:focus { outline: none; border-color: #667eea;}

.demo-result { margin-top: 15px; padding: 15px; background: #263238; border-radius: 10px; font-family: "Consolas", monospace; font-size: 1rem; word-break: break-all; min-height: 50px; display: flex; align-items: center; justify-content: center; text-align: center;}

.demo-result.has-content { color: #4fc3f7;}

.demo-result.empty { color: #607d8b;}

.category-header { flex-direction: column; text-align: center;}

.protocols-grid { grid-template-columns: repeat(2, 1fr);}

.step-item { flex-direction: column; align-items: center; text-align: center;}

/* --- oge7.html --- */

.task-counter { text-align: center; color: #e94560; font-size: 1.1rem; margin-bottom: 15px; font-weight: bold;}

.instructions { background: rgba(255, 255, 255, 0.95); padding: 15px 20px; border-radius: 10px; margin-bottom: 20px; text-align: center; font-size: 0.95rem; color: #333;}

.path-workspace { display: flex; flex-direction: column; gap: 20px;}

.path-parts-pool { background: #f0f4f8; border-radius: 12px; padding: 15px; border: 2px dashed #b0bec5;}

.path-parts-pool h3 { color: #546e7a; margin-bottom: 12px; font-size: 0.95rem; text-align: center;}

.parts-container { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 50px;}

.path-part { background: linear-gradient(145deg, #667eea 0%, #764ba2 100%); color: white; padding: 10px 16px; border-radius: 8px; cursor: grab; user-select: none; font-weight: 500; font-size: 0.95rem; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); transition: transform 0.2s, box-shadow 0.2s; touch-action: none;}

.path-part:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);}

.path-part.dragging { opacity: 0.5; cursor: grabbing;}

.path-part.protocol { background: linear-gradient(145deg, #e94560 0%, #ff6b6b 100%); box-shadow: 0 4px 12px rgba(233, 69, 96, 0.3);}

.path-part.domain { background: linear-gradient(145deg, #11998e 0%, #38ef7d 100%); box-shadow: 0 4px 12px rgba(17, 153, 142, 0.3);}

.path-part.path-segment { background: linear-gradient(145deg, #f093fb 0%, #f5576c 100%); box-shadow: 0 4px 12px rgba(240, 147, 251, 0.3);}

.path-part.file { background: linear-gradient(145deg, #667eea 0%, #764ba2 100%); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);}

.path-part.separator { background: #607d8b; padding: 10px 12px; font-weight: bold;}

.path-assembly { background: #263238; border-radius: 12px; padding: 20px; min-height: 80px;}

.path-assembly h3 { color: #b0bec5; margin-bottom: 12px; font-size: 0.95rem; text-align: center;}

.assembly-zone { display: flex; flex-wrap: wrap; gap: 6px; min-height: 50px; padding: 10px; border: 2px dashed #546e7a; border-radius: 8px; background: rgba(255, 255, 255, 0.05); align-items: center;}

.assembly-zone.drag-over { border-color: #667eea; background: rgba(102, 126, 234, 0.1);}

.parts-container.drag-over { background: rgba(102, 126, 234, 0.15); border-radius: 8px;}

.assembly-zone .path-part { margin: 2px;}

.result-display { background: #1a1a2e; border-radius: 8px; padding: 15px; margin-top: 15px; font-family: "Consolas", "Courier New", monospace; font-size: 1rem; color: #4fc3f7; word-break: break-all; min-height: 50px; display: flex; align-items: center; justify-content: center; text-align: center;}

.result-display.correct { background: linear-gradient(145deg, #11998e 0%, #38ef7d 100%); color: white;}

.result-display.incorrect { background: linear-gradient(145deg, #eb3349 0%, #f45c43 100%); color: white; animation: shake 0.5s ease-in-out;}

.score-board { background: rgba(255, 255, 255, 0.95); border-radius: 15px; padding: 20px; text-align: center; margin-top: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);}

.score { font-size: 1.3rem; font-weight: bold; color: #333;}

.score span { color: #11998e;}

.feedback { margin-top: 15px; padding: 15px; border-radius: 10px; text-align: center; font-weight: bold; display: none;}

.feedback.correct { display: block; background: linear-gradient(145deg, #11998e 0%, #38ef7d 100%); color: white;}

.feedback.incorrect { display: block; background: linear-gradient(145deg, #eb3349 0%, #f45c43 100%); color: white;}

.correct-answer { margin-top: 10px; font-size: 0.9rem; color: #fff;}

.path-part { padding: 8px 12px; font-size: 0.85rem;}

/* --- oge8-t.html --- */

.theory-intro { background: rgba(255, 255, 255, 0.95); border-radius: 15px; padding: 25px; margin-bottom: 25px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);}

.theory-intro h2 { color: #333; margin-bottom: 15px; font-size: 1.4rem;}

.theory-intro p { color: #555; line-height: 1.7; margin-bottom: 10px;}

.theory-intro ul { margin: 15px 0 15px 20px; color: #555;}

.theory-intro li { margin-bottom: 8px; line-height: 1.6;}

.category-section { background: rgba(255, 255, 255, 0.95); border-radius: 15px; padding: 25px; margin-bottom: 25px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);}

.category-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 3px solid;}

.category-header.operations { border-color: #e94560;}

.category-header.queries { border-color: #38ef7d;}

.category-header.formulas { border-color: #667eea;}

.category-header.interactive { border-color: #f093fb;}

.category-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem;}

.category-icon.operations { background: linear-gradient(145deg, #e94560 0%, #ff6b6b 100%);}

.category-icon.queries { background: linear-gradient(145deg, #11998e 0%, #38ef7d 100%);}

.category-icon.formulas { background: linear-gradient(145deg, #667eea 0%, #764ba2 100%);}

.category-icon.interactive { background: linear-gradient(145deg, #f093fb 0%, #f5576c 100%);}

.category-title { font-size: 1.5rem; color: #333;}

.category-description { color: #666; line-height: 1.6; margin-bottom: 20px; padding: 15px; background: #f8f9fa; border-radius: 10px; border-left: 4px solid #e94560;}

.operations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 20px;}

.operation-card { background: linear-gradient(145deg, #f5f7fa 0%, #e4e8eb 100%); border-radius: 15px; padding: 20px; text-align: center; transition: transform 0.3s, box-shadow 0.3s;}

.operation-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);}

.operation-symbol { font-size: 3rem; font-weight: bold; margin-bottom: 10px;}

.operation-symbol.not { color: #e94560;}

.operation-symbol.and { color: #11998e;}

.operation-symbol.or { color: #667eea;}

.operation-name { font-size: 1.2rem; font-weight: 600; color: #333; margin-bottom: 8px;}

.operation-diagram { max-width: 150px; height: auto; margin: 10px auto; display: block;}

.operation-desc { font-size: 0.95rem; color: #666; line-height: 1.5;}

.formula-highlight { color: #4fc3f7; font-weight: bold;}

.example-box .query { background: rgba(255, 255, 255, 0.1); padding: 2px 8px; border-radius: 4px; color: #f5576c;}

/* Interactive Euler Diagram */ .euler-container { display: flex; flex-direction: column; align-items: center; gap: 20px;}

.euler-svg { max-width: 100%; height: auto; cursor: pointer;}

.euler-info { background: linear-gradient(145deg, #1a1a2e 0%, #0f3460 100%); border-radius: 12px; padding: 20px; text-align: center; min-width: 300px; width: 100%; max-width: 500px;}

.euler-info h4 { color: #4fc3f7; margin-bottom: 10px; font-size: 1.1rem;}

.euler-info .expression { font-family: "Consolas", "Courier New", monospace; font-size: 1.3rem; color: #38ef7d; margin: 10px 0; word-break: break-word;}

.euler-info .description { color: #b0bec5; font-size: 0.95rem; line-height: 1.5;}

.legend { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; margin-top: 15px;}

.legend-item { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.95); padding: 10px 18px; border-radius: 25px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); transition: transform 0.2s;}

.legend-item:hover { transform: scale(1.05);}

.legend-color { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.2); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);}

.legend-label { color: #333; font-weight: 600; font-size: 0.95rem;}

.region-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 20px; width: 100%;}

.region-item { background: rgba(255, 255, 255, 0.95); border-radius: 10px; padding: 12px 15px; cursor: pointer; transition: all 0.3s; text-align: center; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); border: 2px solid transparent;}

.region-item:hover { transform: scale(1.03); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);}

.region-item.active { background: linear-gradient(145deg, #fff9c4 0%, #fff59d 100%); border: 2px solid #ffc107; box-shadow: 0 5px 20px rgba(255, 193, 7, 0.4);}

.region-item .region-name { color: #333; font-weight: 600; margin-bottom: 5px;}

.region-item .region-expr { color: #666; font-size: 0.9rem; font-family: "Consolas", monospace;}

.region-item.active .region-name { color: #f57f17;}

.region-item.active .region-expr { color: #795548;}

.steps-section { background: rgba(255, 255, 255, 0.95); border-radius: 15px; padding: 25px; margin-bottom: 25px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);}

.step-item { display: flex; gap: 15px; margin-bottom: 20px; padding: 15px; background: #f8f9fa; border-radius: 10px; align-items: flex-start;}

.step-number { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; color: white; font-size: 1.2rem;}

.step-number.step1 { background: linear-gradient(145deg, #e94560 0%, #ff6b6b 100%);}

.step-number.step2 { background: linear-gradient(145deg, #11998e 0%, #38ef7d 100%);}

.step-number.step3 { background: linear-gradient(145deg, #f093fb 0%, #f5576c 100%);}

.step-number.step4 { background: linear-gradient(145deg, #667eea 0%, #764ba2 100%);}

.step-content h4 { color: #333; margin-bottom: 8px;}

.step-content p { color: #666; line-height: 1.6;}

/* SVG styles */ .euler-circle { opacity: 0.5; transition: opacity 0.3s; stroke: rgba(255, 255, 255, 0.4); stroke-width: 2;}

.euler-circle.highlighted { opacity: 0.85; stroke: #ffd700; stroke-width: 4; filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.8));}

.region-highlight { opacity: 0; transition: opacity 0.3s; pointer-events: none;}

.region-highlight.visible { opacity: 0.7; filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));}

.click-region { cursor: pointer; transition: all 0.2s;}

.click-region:hover { opacity: 0.3; fill: white;}

.category-header { flex-direction: column; text-align: center;}

.operations-grid { grid-template-columns: 1fr;}

.step-item { flex-direction: column; align-items: center; text-align: center;}

.euler-info { min-width: auto;}

/* --- oge8.html --- */

.task-counter { text-align: center; color: #e94560; font-size: 1.1rem; margin-bottom: 15px; font-weight: bold;}

.task-text .query { background: rgba(102, 126, 234, 0.2); padding: 2px 6px; border-radius: 4px; font-family: "Consolas", monospace; color: #667eea;}

.data-table { width: 100%; border-collapse: collapse; margin: 15px 0; font-size: 0.95rem;}

.data-table th, .data-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #e0e0e0;}

.data-table th { background: linear-gradient(145deg, #667eea 0%, #764ba2 100%); color: white; font-weight: 600;}

.data-table td { background: #f8f9fa;}

.data-table tr:hover td { background: #e8eaf6;}

.data-table .value { font-weight: 600; color: #11998e;}

.data-table .unknown { color: #e94560; font-weight: bold;}

.question-text { background: linear-gradient(145deg, #11998e 0%, #38ef7d 100%); color: white; padding: 15px 20px; border-radius: 10px; font-size: 1.05rem; margin: 15px 0;}

.workspace { display: grid; grid-template-columns: 1fr 350px; gap: 20px; margin-top: 20px;}

@media (max-width: 900px) {
  .workspace { grid-template-columns: 1fr; }
}

.diagram-section { background: #1a1a2e; border-radius: 12px; padding: 15px; text-align: center;}

.diagram-title { color: #4fc3f7; font-size: 1rem; margin-bottom: 10px;}

.euler-svg { max-width: 100%; height: auto; margin: 0 auto;}

.input-group { display: flex; align-items: center; gap: 10px;}

.input-group label { font-weight: 600; color: #333; min-width: 120px;}

.input-group input { flex: 1; padding: 12px 15px; border: 2px solid #667eea; border-radius: 8px; font-size: 1.1rem; font-family: "Consolas", monospace; max-width: 150px;}

.input-group input:focus { outline: none; border-color: #11998e; box-shadow: 0 0 10px rgba(17, 153, 142, 0.3);}

.input-group span { color: #666; font-size: 0.9rem;}

.btn-diagram { background: linear-gradient(145deg, #f093fb 0%, #f5576c 100%); color: white; box-shadow: 0 4px 15px rgba(240, 147, 251, 0.4);}

.feedback { margin-top: 15px; padding: 15px; border-radius: 10px; text-align: center; font-weight: bold; display: none;}

.feedback.correct { display: block; background: linear-gradient(145deg, #11998e 0%, #38ef7d 100%); color: white;}

.feedback.incorrect { display: block; background: linear-gradient(145deg, #eb3349 0%, #f45c43 100%); color: white;}

.hint-box .hint-text { color: #856404; margin-top: 8px; line-height: 1.5;}

.formula-hint { background: #263238; padding: 10px 15px; border-radius: 8px; font-family: "Consolas", monospace; color: #4fc3f7; margin-top: 10px; font-size: 0.95rem;}

.score-board { background: rgba(255, 255, 255, 0.95); border-radius: 15px; padding: 20px; text-align: center; margin-top: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);}

.score { font-size: 1.3rem; font-weight: bold; color: #333;}

.score span { color: #11998e;}

/* Euler Diagram Styles */ .euler-circle { opacity: 0.5; transition: opacity 0.3s; stroke: rgba(255, 255, 255, 0.4); stroke-width: 2;}

.euler-circle:hover { opacity: 0.7;}

.euler-circle.highlighted { opacity: 0.85; stroke: #ffd700; stroke-width: 4; filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.8));}

.click-region { cursor: pointer; transition: all 0.2s;}

.click-region:hover { opacity: 0.2; fill: white;}

.highlight-group { pointer-events: none;}

.region-overlay { fill: transparent; cursor: pointer; transition: fill 0.2s;}

.region-overlay:hover { fill: rgba(255, 255, 255, 0.2);}

.region-overlay.selected { fill: rgba(255, 255, 255, 0.4); stroke: #fff; stroke-width: 2;}

.region-overlay.correct { fill: rgba(56, 239, 125, 0.5); stroke: #38ef7d; stroke-width: 2;}

.legend-container { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px;}

.legend-item { display: flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, 0.1); padding: 5px 10px; border-radius: 15px;}

.legend-color { width: 15px; height: 15px; border-radius: 50%;}

.legend-label { color: white; font-size: 0.85rem;}

.region-info { background: rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 10px; margin-top: 10px; text-align: center;}

.region-info .expression { color: #38ef7d; font-family: "Consolas", monospace; font-size: 1.1rem;}

.region-info .description { color: #b0bec5; font-size: 0.85rem; margin-top: 5px;}

.explanation-box { background: #263238; border-radius: 12px; padding: 15px; margin-top: 15px;}

.explanation-box h4 { color: #4fc3f7; margin-bottom: 10px;}

.explanation-box p { color: #b0bec5; line-height: 1.6; margin-bottom: 8px;}

.explanation-box .formula { background: rgba(255, 255, 255, 0.1); padding: 10px 15px; border-radius: 8px; font-family: "Consolas", monospace; color: #38ef7d; margin: 10px 0;}

.explanation-box .result { color: #38ef7d; font-weight: bold;}

.data-table { font-size: 0.85rem;}

.data-table th, .data-table td { padding: 8px 10px;}

.workspace { grid-template-columns: 1fr;}

/* --- oge9-t.html --- */

.graph-example { background: #1a1a2e; border-radius: 12px; padding: 20px; margin: 15px 0; text-align: center;}

.graph-example svg { max-width: 100%; height: auto;}

.step-table { width: 100%; border-collapse: collapse; margin: 15px 0;}

.step-table th, .step-table td { padding: 10px 15px; text-align: center; border: 1px solid #ddd;}

.step-table th { background: linear-gradient(145deg, #667eea 0%, #764ba2 100%); color: white; font-weight: 600;}

.step-table td { background: #f8f9fa;}

.step-table .highlight-cell { background: #fff9c4; font-weight: bold;}

/* --- oge9.html --- */

.task-type.through { background: linear-gradient(145deg, #11998e 0%, #38ef7d 100%);}

.task-type.not-through { background: linear-gradient(145deg, #eb3349 0%, #f45c43 100%);}

.graph-container { background: #1a1a2e; border-radius: 12px; padding: 20px; margin: 20px 0; text-align: center; overflow-x: auto;}

.graph-svg { max-width: 100%; height: auto;}

.vertex-input { width: 36px; height: 28px; font-size: 14px; font-weight: bold; text-align: center; border: 2px solid #00e5ff; border-radius: 6px; background: rgba(26, 26, 46, 0.95); color: #fff; outline: none; padding: 2px; box-shadow: 0 2px 8px rgba(0, 229, 255, 0.3);}

.vertex-input:focus { border-color: #fff; box-shadow: 0 0 12px rgba(0, 229, 255, 0.6);}

.vertex-input.correct { border-color: #4caf50; background: rgba(76, 175, 80, 0.2); color: #4caf50;}

.vertex-input.incorrect { border-color: #f44336; background: rgba(244, 67, 54, 0.2); color: #f44336;}

.vertex-input::placeholder { color: rgba(255, 255, 255, 0.4);}

.btn-show-values { background: linear-gradient(145deg, #9c27b0 0%, #673ab7 100%); color: white; box-shadow: 0 4px 15px rgba(156, 39, 176, 0.4);}

.btn-check-values { background: linear-gradient(145deg, #ff9800 0%, #f57c00 100%); color: white; box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4);}

.btn-clear-values { background: linear-gradient(145deg, #607d8b 0%, #455a64 100%); color: white; box-shadow: 0 4px 15px rgba(96, 125, 139, 0.4);}

.solution-table { width: 100%; border-collapse: collapse; margin: 15px 0;}

.solution-table th, .solution-table td { padding: 10px 15px; text-align: center; border: 1px solid #ddd;}

.solution-table th { background: linear-gradient(145deg, #667eea 0%, #764ba2 100%); color: white; font-weight: 600;}

.solution-table td { background: #f8f9fa;}

.solution-table .highlight-cell { background: #fff9c4; font-weight: bold;}

.graph-container { padding: 10px;}

/* ============================================================
   Body variant: dark theme (oge7, oge8)
   ============================================================ */

body.body-dark {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

/* ============================================================
   Body variant: teal (oge2)
   ============================================================ */

body.body-teal {
  background: linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%);
}

/* ============================================================
   Body variant: red-purple (oge131-t)
   ============================================================ */

body.body-red-purple {
  background: linear-gradient(135deg, #c0392b 0%, #8e44ad 100%);
}

/* ============================================================
   Body variant: blue-indigo (oge132-t)
   ============================================================ */

body.body-blue-indigo {
  background: linear-gradient(135deg, #2b5876 0%, #4e4376 100%);
}