/* Hacking 101 lesson styles — HIGH CONTRAST for readability
   Overrides /style.css variables for this course */
:root {
  --accent: #22c55e;
  --accent-light: #4ade80;
  --text: #e6edf3;
  --text-muted: #b1bac4;
  --text-dim: #8b949e;
  --bg: #0d1117;
  --bg-card: #161b22;
  --bg-deep: #010409;
  --border: #30363d;
}

body { background: #0d1117; color: #e6edf3; }

.lesson-wrap { max-width:880px; margin:40px auto 60px; padding:0 20px; }
.lesson-header { margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid #30363d; }
.lesson-module { font-size:12px; color:#22c55e; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:8px; font-weight:700; }
.lesson-title { font-size:32px; font-weight:800; line-height:1.2; margin-bottom:14px; color:#ffffff; }
.lesson-meta { display:flex; gap:18px; font-size:14px; color:#b1bac4; }

.lesson-body h2 { font-size:26px; font-weight:700; margin:38px 0 14px; color:#ffffff; }
.lesson-body h3 { font-size:21px; font-weight:700; margin:26px 0 10px; color:#ffffff; }
.lesson-body p { font-size:18px; line-height:1.75; color:#e6edf3; margin-bottom:16px; }
.lesson-body ul, .lesson-body ol { margin:0 0 18px 26px; color:#e6edf3; }
.lesson-body li { font-size:18px; line-height:1.85; color:#e6edf3; margin-bottom:6px; }
.lesson-body strong { color:#ffffff; font-weight:700; }
.lesson-body em { color:#b1bac4; }

/* CALLOUT BOXES — высокий контраст */
.callout {
  background:rgba(34,197,94,0.08);
  border:1px solid rgba(34,197,94,0.4);
  border-left:4px solid #22c55e;
  border-radius:10px;
  padding:18px 22px;
  margin:18px 0;
}
.callout-label {
  font-size:12px;
  color:#4ade80;
  text-transform:uppercase;
  letter-spacing:1.2px;
  font-weight:800;
  margin-bottom:10px;
}
.callout p, .callout li { color:#e6edf3 !important; }
.callout strong { color:#ffffff; }

/* Specific colored callouts */
.callout-info { background:rgba(56,189,248,0.08); border-color:rgba(56,189,248,0.4); border-left-color:#38bdf8; }
.callout-info .callout-label { color:#7dd3fc; }

.callout-warn { background:rgba(251,191,36,0.08); border-color:rgba(251,191,36,0.4); border-left-color:#fbbf24; }
.callout-warn .callout-label { color:#fcd34d; }

.callout-danger { background:rgba(239,68,68,0.08); border-color:rgba(239,68,68,0.4); border-left-color:#ef4444; }
.callout-danger .callout-label { color:#fca5a5; }

.callout-purple { background:rgba(168,85,247,0.08); border-color:rgba(168,85,247,0.4); border-left-color:#a855f7; }
.callout-purple .callout-label { color:#c4b5fd; }

/* Code / terminal */
.terminal-box { background:#010409; border:1px solid #30363d; border-radius:8px; padding:16px 20px; margin:14px 0; font-family:'Courier New',monospace; font-size:14px; color:#e6edf3; line-height:1.7; white-space:pre-wrap; }
.tp { color:#7ee787; }
.tc { color:#8b949e; }
.tok { color:#7ee787; }
.tcl { color:#c4a8f5; }
code { background:#161b22; color:#7ee787; padding:2px 8px; border-radius:4px; font-size:14px; font-family:'Courier New',monospace; border:1px solid #30363d; }
kbd { background:#161b22; color:#e6edf3; padding:2px 8px; border-radius:4px; font-size:13px; border:1px solid #30363d; }
pre { background:#010409; border:1px solid #30363d; border-radius:8px; padding:14px 18px; overflow-x:auto; margin:12px 0; }
pre code { background:none; border:none; padding:0; color:#7ee787; font-size:14px; line-height:1.7; }

/* Navigation */
.lesson-nav, .lesson-nav-bottom { display:flex; justify-content:space-between; margin-top:48px; padding-top:24px; border-top:1px solid #30363d; }
.lesson-nav a, .lesson-nav-bottom a { color:#22c55e; text-decoration:none; font-size:15px; font-weight:600; }
.lesson-nav a:hover, .lesson-nav-bottom a:hover { color:#4ade80; }
.nav-btn { display:inline-block; padding:11px 22px; border-radius:8px; text-decoration:none; color:#22c55e; border:1px solid #22c55e; font-weight:700; font-size:14px; }
.nav-btn:hover { background:rgba(34,197,94,0.1); color:#4ade80; }
.nav-btn.primary { background:#22c55e; color:#0d1117; }
.nav-btn.primary:hover { background:#4ade80; color:#0d1117; }

/* MODULE OVERVIEW */
.module-overview { max-width:880px; margin:50px auto; padding:0 24px; }
.module-overview h1 { font-size:36px; font-weight:800; margin-bottom:16px; color:#ffffff; }
.module-overview .subtitle { font-size:17px; color:#e6edf3; margin-bottom:32px; line-height:1.7; }
.module-overview .module-tag { font-size:12px; color:#22c55e; text-transform:uppercase; letter-spacing:1.5px; font-weight:800; margin-bottom:8px; display:block; }

.lesson-grid { display:grid; gap:14px; margin:30px 0; }
.lesson-link { background:#161b22; border:1px solid #30363d; border-radius:10px; padding:20px 24px; text-decoration:none; color:#e6edf3; display:block; transition:all 0.2s; }
.lesson-link:hover { border-color:#22c55e; background:rgba(34,197,94,0.06); transform:translateX(4px); }
.lesson-link-num { font-size:12px; color:#22c55e; text-transform:uppercase; letter-spacing:1.2px; margin-bottom:6px; font-weight:700; }
.lesson-link-title { font-size:18px; font-weight:700; margin-bottom:6px; color:#ffffff; }
.lesson-link-desc { font-size:14px; color:#b1bac4; line-height:1.6; }

/* Module Nav */
.module-nav-bottom { display:flex; justify-content:space-between; margin-top:48px; padding-top:24px; border-top:1px solid #30363d; font-size:15px; }
.module-nav-bottom a { color:#22c55e; text-decoration:none; font-weight:600; }
.module-nav-bottom a:hover { color:#4ade80; }

/* Hat cards (lesson 1.1) */
.hat-card { background:#161b22; border-radius:12px; padding:24px; margin:18px 0; border:1px solid #30363d; }
.hat-card.white { border-left:4px solid #f0f6fc; }
.hat-card.black { border-left:4px solid #ef4444; }
.hat-card.grey { border-left:4px solid #a855f7; }
.hat-icon { font-size:32px; margin-bottom:8px; }
.hat-card h3 { margin-top:0; color:#ffffff; }
.hat-card p { color:#e6edf3; }
.hat-card strong { color:#ffffff; }

/* Story box */
.story { background:rgba(34,197,94,0.06); border-left:4px solid #22c55e; padding:20px 24px; border-radius:8px; margin-bottom:24px; }
.story p { color:#e6edf3 !important; margin-bottom:10px; }
.story strong { color:#ffffff; }

/* Vibe-task (Claude prompts) */
.vibe-task { background:rgba(168,85,247,0.06); border:1px solid rgba(168,85,247,0.3); border-radius:10px; padding:22px 26px; margin:22px 0; }
.vibe-task::before { content:'🤖 Vibe-task с Claude'; display:block; font-size:12px; color:#c4b5fd; text-transform:uppercase; letter-spacing:1.2px; font-weight:800; margin-bottom:10px; }
.vibe-task p { color:#e6edf3; }
.vibe-task pre { background:#010409; }
.vibe-task code { color:#c4a8f5; }

/* Cliff (what's next) */
.cliff { background:rgba(6,182,212,0.06); border-left:4px solid #06b6d4; padding:20px 24px; border-radius:8px; margin:28px 0 18px; }
.cliff h3 { color:#67e8f9; margin-top:0; margin-bottom:10px; }
.cliff p { color:#e6edf3; }
.cliff strong { color:#ffffff; }

/* Step box (step-by-step instructions) */
.step-box { background:#161b22; border:1px solid #30363d; border-radius:10px; padding:20px 24px; margin:18px 0; }
.step-box p, .step-box li { color:#e6edf3; }
.step-box strong { color:#ffffff; }
.step-box code { color:#7ee787; }

/* Career tier */
.career-tier { background:#161b22; border-radius:12px; padding:22px 26px; margin:14px 0; border:1px solid #30363d; display:flex; gap:20px; align-items:flex-start; }
.tier-num { background:#22c55e; color:#0d1117; font-weight:800; font-size:24px; min-width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tier-body h3 { margin-top:0; color:#ffffff; }
.tier-body p { color:#e6edf3; }
.tier-body strong { color:#ffffff; }

/* Legal card */
.legal-card { background:#161b22; border-radius:12px; padding:20px 24px; margin:14px 0; border:1px solid #30363d; }
.legal-card.good { border-left:4px solid #22c55e; }
.legal-card h3 { margin-top:0; color:#ffffff; }
.legal-card p { color:#e6edf3; }
.legal-card strong { color:#ffffff; }
.legal-icon { font-size:28px; margin-bottom:6px; }

/* Cert */
.cert { background:#161b22; border-radius:10px; padding:18px 22px; margin:10px 0; border:1px solid #30363d; }
.cert h3 { margin-top:0; font-size:18px; color:#ffffff; }
.cert p { color:#e6edf3; }
.cert strong { color:#ffffff; }

/* Salary table */
.salary-table { width:100%; border-collapse:collapse; margin:18px 0; }
.salary-table th, .salary-table td { border:1px solid #30363d; padding:11px 14px; text-align:left; font-size:15px; color:#e6edf3; }
.salary-table th { background:#161b22; font-weight:700; color:#22c55e; }
.salary-table td strong { color:#ffffff; }

/* Cmd table */
.cmd-table { width:100%; border-collapse:collapse; margin:18px 0; font-size:14px; }
.cmd-table th, .cmd-table td { border:1px solid #30363d; padding:10px 14px; text-align:left; color:#e6edf3; }
.cmd-table th { background:#161b22; color:#22c55e; font-weight:700; }
.cmd-table td code { background:#010409; color:#7ee787; }

/* details/summary */
details { background:#161b22; border:1px solid #30363d; border-radius:8px; padding:14px 18px; margin:10px 0; cursor:pointer; }
details[open] { border-color:#22c55e; }
summary { font-weight:700; color:#ffffff; outline:none; font-size:15px; }
details p { margin-top:10px; color:#e6edf3; }
details ul, details ol { color:#e6edf3; }
details strong { color:#ffffff; }

/* nav top */
.nav { background:#010409; border-bottom:1px solid #30363d; padding:14px 24px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.nav a { color:#b1bac4; text-decoration:none; font-size:14px; font-weight:500; }
.nav a:hover { color:#e6edf3; }
.nav .nav-logo { color:#22c55e; font-weight:800; font-size:18px; }
.nav .nav-link { color:#b1bac4; }
.nav .nav-link:hover { color:#e6edf3; }
.nav .btn-primary { background:#22c55e; color:#0d1117; padding:8px 18px; border-radius:8px; font-weight:700; font-size:13px; }
.nav .btn-primary:hover { background:#4ade80; color:#0d1117; }

/* responsive */
@media (max-width:680px) {
  .lesson-title, .module-overview h1 { font-size:26px; }
  .lesson-body p, .lesson-body li { font-size:15px; }
}