:root{
  --bg-1:#071522;
  --bg-2:#0b2236;
  --bg-3:#12334f;
  --surface:rgba(255,255,255,.94);
  --surface-soft:rgba(255,255,255,.84);
  --text:#10202f;
  --muted:#4f6478;
  --line:rgba(19,61,93,.14);
  --primary:#3ba1ff;
  --primary-2:#1877f2;
  --accent:#7ce3ff;
  --success:#1faa63;
  --danger:#d9534f;
  --shadow:0 16px 48px rgba(0,0,0,.22);
  --radius:18px;
}

html{
  scroll-behavior:smooth;
}

body{
  background:
    radial-gradient(circle at top left, rgba(21,144,197,.18), transparent 30%),
    linear-gradient(135deg, var(--bg-1), var(--bg-2) 45%, var(--bg-3));
  color:#eef6ff !important;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
  min-height:100vh;
}

header{
  background:rgba(7,21,34,.72) !important;
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 30px rgba(0,0,0,.2) !important;
  position:sticky;
  top:0;
  z-index:50;
}

header h1{
  letter-spacing:.2px;
}

nav a{
  color:#d7e8fb !important;
  padding:10px 14px;
  border-radius:999px;
  transition:all .18s ease;
}

nav a:hover{
  background:rgba(255,255,255,.08);
  text-decoration:none !important;
  color:#fff !important;
}

.container,
.quiz-container{
  background:var(--surface) !important;
  color:var(--text) !important;
  border:1px solid var(--line);
  border-radius:24px !important;
  box-shadow:var(--shadow) !important;
}

.top-info,
#progress{
  color:var(--muted) !important;
}

#progress-bar,
.progress-bar-container{
  background:rgba(18,51,79,.10) !important;
  border-radius:999px !important;
  overflow:hidden;
}

#progress-fill,
.progress-bar{
  background:linear-gradient(90deg, var(--primary), var(--accent)) !important;
}

h1, h2, h3{
  color:#0f2c47 !important;
}

.task,
.email,
.learn,
.info,
.flag,
.achievement,
.result-box,
.output-box,
.demo-box,
.simulation-box,
.card,
.box,
.panel,
.warning,
.notice,
.instructions,
.quiz-question{
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,250,255,.96)) !important;
  border:1px solid rgba(19,61,93,.10) !important;
  border-radius:18px !important;
  box-shadow:0 10px 24px rgba(11,34,54,.08);
}

.task{
  padding:18px !important;
}

.btn,
button,
.back-button,
input[type="submit"],
input[type="button"]{
  background:linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
  color:#fff !important;
  border:none !important;
  border-radius:12px !important;
  box-shadow:0 8px 18px rgba(24,119,242,.20);
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.btn:hover,
button:hover,
.back-button:hover,
input[type="submit"]:hover,
input[type="button"]:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
  box-shadow:0 12px 24px rgba(24,119,242,.24);
}

input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select{
  border:1px solid rgba(19,61,93,.16) !important;
  border-radius:12px !important;
  background:#fff !important;
  color:#10202f !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}

input::placeholder,
textarea::placeholder{
  color:#72879a !important;
}

.console,
.shell,
pre,
.code-box,
.terminal{
  background:linear-gradient(180deg, #07131e, #0a1824) !important;
  color:#9ff59f !important;
  border:1px solid rgba(124,227,255,.16);
  border-radius:16px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02), 0 12px 28px rgba(0,0,0,.18);
}

.email-header{
  background:linear-gradient(135deg, var(--primary), #0e5fcb) !important;
}

footer{
  color:#d0deec !important;
}
footer a{
  color:#fff !important;
}

a{
  color:#176fd6;
}

hr{
  border:none;
  border-top:1px solid rgba(19,61,93,.12);
}

table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:14px;
}

table th{
  background:#eaf4ff;
  color:#113252;
}

table th, table td{
  border:1px solid rgba(19,61,93,.10);
  padding:10px 12px;
}

#secret-header{
  background:#edf6ff !important;
  border:1px solid rgba(19,61,93,.10);
  border-radius:14px !important;
}

.cookie-banner{
  background:rgba(7,21,34,.94) !important;
  backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.08);
}

@media (max-width: 900px){
  .container,
  .quiz-container{
    border-radius:18px !important;
    padding:16px !important;
  }

  .task{
    padding:16px !important;
  }
}


/* --- visibility fixes for revealed flags / terminal outputs --- */
#result,
#resultBox,
#output,
#flag-output,
#secret-output,
#bruteforce-result,
#phishing-result,
#hash-result,
#sql-result,
.reveal,
.reveal-box,
.flag-output,
.flag-box,
.result,
.result-box,
.output-box,
.success-box,
.code,
pre,
.console,
.shell,
.terminal{
  background: linear-gradient(180deg, #091521, #0c1c2a) !important;
  color: #a8f5a8 !important;
  border: 1px solid rgba(124,227,255,.16) !important;
}

.flag,
.achievement{
  color: var(--text) !important;
}

.hidden-flag,
.secret-flag{
  background: linear-gradient(180deg, #091521, #0c1c2a) !important;
  color: #a8f5a8 !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(124,227,255,.16) !important;
  font-family: "Courier New", monospace !important;
  display: inline-block;
}

/* ensure generic text inside dynamically injected result areas is readable */
.result-box *,
.output-box *,
.flag-box *,
.console *,
.shell *,
.terminal *{
  color: inherit !important;
}


/* --- v3 polish fixes --- */

/* keep page titles in dark headers readable */
body > h1,
header h1,
header .logo,
header .brand,
header .site-title,
.hero h1,
.hero-title{
  color:#eef6ff !important;
  text-shadow:0 2px 12px rgba(0,0,0,.28);
}

/* only dark text INSIDE light content areas */
.container h1,
.container h2,
.container h3,
.quiz-container h1,
.quiz-container h2,
.quiz-container h3,
.task h1,
.task h2,
.task h3,
.info h1,
.info h2,
.info h3,
.panel h1,
.panel h2,
.panel h3,
.card h1,
.card h2,
.card h3{
  color:#0f2c47 !important;
  text-shadow:none !important;
}

/* buttons less toy-like */
.btn,
button,
.back-button,
input[type="submit"],
input[type="button"]{
  background:linear-gradient(180deg, #2f8ef3, #1f74d6) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:10px !important;
  box-shadow:0 6px 14px rgba(16,72,138,.22) !important;
  text-decoration:none !important;
  font-weight:600 !important;
  padding:10px 14px !important;
}

.btn:hover,
button:hover,
.back-button:hover,
input[type="submit"]:hover,
input[type="button"]:hover{
  background:linear-gradient(180deg, #3796fa, #277fe2) !important;
  box-shadow:0 8px 18px rgba(16,72,138,.26) !important;
  transform:translateY(-1px);
}

.btn:active,
button:active,
.back-button:active,
input[type="submit"]:active,
input[type="button"]:active{
  transform:translateY(0);
  box-shadow:0 4px 10px rgba(16,72,138,.2) !important;
}

/* keep inline action groups tidy */
.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* warning/info boxes should not look like empty white pills */
.warning,
.notice,
.info{
  padding:16px 18px !important;
  line-height:1.55;
}

/* links in content stay normal and readable */
.container a:not(.btn),
.quiz-container a:not(.btn),
.task a:not(.btn){
  color:#176fd6 !important;
  text-decoration:underline;
}


/* --- v4 main page rhythm / cards / forms --- */
.container{
  max-width: 1220px !important;
  padding: 32px 34px !important;
}

.top-info{
  margin-bottom: 18px !important;
  line-height: 1.55 !important;
  font-size: 1rem !important;
}

.container > h1,
.container > h2,
.container > h3{
  letter-spacing: -0.02em;
}

.container h2{
  font-size: 2rem !important;
  margin: 16px 0 22px !important;
  font-weight: 800 !important;
}

.task-grid,
.tasks-grid,
.grid{
  gap: 24px !important;
}

.task{
  padding: 22px 20px 18px !important;
  border-radius: 20px !important;
  min-height: 220px;
}

.task h3{
  font-size: 1.15rem !important;
  line-height: 1.3 !important;
  margin: 0 0 16px !important;
  font-weight: 800 !important;
}

.task p{
  margin: 0 0 16px !important;
  line-height: 1.55 !important;
  font-size: 1rem !important;
  color: #17324c !important;
}

.task .btn,
.task button{
  margin-top: 2px !important;
}

.task input[type="text"],
.task input[type="password"]{
  width: 100% !important;
  margin: 12px 0 10px !important;
  min-height: 46px;
  padding: 11px 14px !important;
  font-size: .98rem !important;
}

#progress{
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  margin: 10px 0 10px !important;
}

#progress-bar,
.progress-bar-container{
  height: 18px !important;
  margin: 0 auto 26px !important;
}

.note,
.small,
.muted{
  color:#5f7488 !important;
}

@media (max-width: 900px){
  .container{
    padding: 20px 18px !important;
  }
  .container h2{
    font-size: 1.65rem !important;
  }
  .task{
    min-height: unset;
  }
}


/* --- v5 card layout fixes --- */
.task{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
}

.task > *{
  margin-left:0 !important;
  margin-right:0 !important;
}

.task p{
  display:block !important;
}

.task .btn,
.task button,
.task input[type="text"],
.task input[type="password"],
.task label,
.task .note,
.task .small,
.task .muted{
  display:block !important;
  clear:both !important;
}

.task .btn{
  margin: 0 0 14px 0 !important;
}

.task input[type="text"],
.task input[type="password"]{
  margin: 0 0 12px 0 !important;
}

.task button{
  margin: 0 !important;
}

.task br{
  display:none !important;
}

.task .btn + .btn{
  margin-top:10px !important;
}

.task input + button{
  margin-top:2px !important;
}

.task p + .btn,
.task p + a.btn{
  margin-top: 2px !important;
}

.task .btn + p,
.task .btn + .note,
.task .btn + .small{
  margin-top: 0 !important;
}

.task .note,
.task .small,
.task .muted{
  margin: 0 0 10px 0 !important;
  line-height:1.45 !important;
}

.task .flag-box,
.task .result-box,
.task .output-box{
  width:100% !important;
  margin-top:12px !important;
}

@media (max-width: 900px){
  .task .btn,
  .task button{
    width:auto !important;
  }
}


/* --- mobile & tablet polish --- */
html, body{
  max-width:100%;
  overflow-x:hidden;
}

img, iframe, video, canvas{
  max-width:100%;
  height:auto;
}

.container{
  width:min(100%, 1180px) !important;
}

.task{
  width:100%;
}

.task input[type="text"],
.task input[type="password"],
.task input[type="email"],
.task textarea,
.lock-box input,
.container input[type="text"],
.container input[type="password"]{
  width:100% !important;
  max-width:100%;
}

.task .btn,
.task button,
.lock-box .btn,
.lock-box button{
  min-height:44px;
}

.category-columns{
  align-items:stretch !important;
}

.category-panel,
.category-full{
  width:100% !important;
}

.file-list{
  padding-left:0;
}

.file-list li{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
}

.code-box,
.query-box,
.result-box,
.flag-box,
.status{
  overflow-x:auto;
}

@media (max-width: 1024px){
  .container{
    padding:24px 20px !important;
  }

  .category-columns{
    flex-direction:column !important;
    gap:18px !important;
  }

  .category-panel > summary{
    font-size:1.05rem !important;
    padding:13px 14px !important;
  }

  .task{
    min-height:unset !important;
    padding:18px 16px 16px !important;
  }

  .task h3{
    font-size:1.05rem !important;
  }

  .top-info{
    font-size:.97rem !important;
  }
}

@media (max-width: 768px){
  body{
    font-size:16px;
  }

  .container{
    padding:18px 14px !important;
    border-radius:16px !important;
  }

  .container h1{
    font-size:1.8rem !important;
    line-height:1.15 !important;
  }

  .container h2{
    font-size:1.35rem !important;
    line-height:1.2 !important;
    margin:12px 0 16px !important;
  }

  .task{
    border-radius:16px !important;
    padding:16px 14px 14px !important;
  }

  .task h3{
    font-size:1rem !important;
    margin-bottom:12px !important;
  }

  .task p,
  .top-info,
  .note{
    font-size:.95rem !important;
    line-height:1.5 !important;
  }

  .btn,
  button,
  .back-button,
  input[type="submit"],
  input[type="button"]{
    width:100%;
    justify-content:center;
    text-align:center;
    padding:12px 14px !important;
  }

  .category-panel > summary{
    font-size:1rem !important;
    padding:12px 13px !important;
  }

  .lock-box{
    padding-right:0 !important;
  }

  .file-list li span{
    font-size:.92rem;
  }
}

@media (max-width: 480px){
  .container{
    padding:14px 12px !important;
  }

  .container h1{
    font-size:1.55rem !important;
  }

  .task p,
  .top-info,
  .note{
    font-size:.93rem !important;
  }

  .category-panel > summary{
    border-radius:12px !important;
  }
}


/* --- layout repair pass: keep desktop clean, mobile readable --- */
*,
*::before,
*::after{
  box-sizing:border-box;
}

.category-columns{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
  gap:24px !important;
  align-items:start !important;
}

.category-columns > *{
  min-width:0 !important;
}

.category-panel,
.category-full,
.column{
  min-width:0 !important;
  width:100% !important;
}

.category-panel > summary,
.category-full > summary{
  width:100% !important;
}

.category-panel .task,
.category-full .task{
  width:100% !important;
  margin:0 0 22px 0 !important;
}

.lock-box{
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:10px !important;
  margin:0 0 18px 0 !important;
}

.lock-box p{
  margin:0 !important;
  line-height:1.5 !important;
}

.lock-box input{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
}

.lock-box .btn,
.lock-box button{
  width:max-content !important;
  min-width:140px;
  margin:0 !important;
}

.container .top-info{
  max-width:none !important;
}

.file-list li img{
  width:100%;
  max-width:620px;
}

@media (max-width: 1024px){
  .category-columns{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .lock-box .btn,
  .lock-box button{
    width:100% !important;
    min-width:0;
  }
}

@media (max-width: 768px){
  .container{
    margin:14px auto !important;
  }

  .category-panel .task,
  .category-full .task{
    margin:0 0 16px 0 !important;
  }
}


/* --- layout polish / responsiveness --- */
body{
  line-height:1.6;
  overflow-wrap:anywhere;
}

img,
video,
iframe{
  max-width:100%;
  height:auto;
}

.container,
.quiz-container{
  width:min(100%, 1200px);
  box-sizing:border-box;
}

.task,
.email,
.learn,
.info,
.flag,
.achievement,
.result-box,
.output-box,
.demo-box,
.simulation-box,
.card,
.box,
.panel,
.warning,
.notice,
.instructions,
.quiz-question{
  overflow-wrap:anywhere;
}

.flex-container,
.category-columns{
  width:100%;
  box-sizing:border-box;
}

.category-panel > summary,
details.lab-entry > summary{
  word-break:break-word;
}

@media (max-width: 900px){
  nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
  }

  nav a{
    margin:0 !important;
  }

  #progress-bar{
    width:100% !important;
  }
}

@media (max-width: 700px){
  body{
    font-size:16px;
  }

  header{
    padding:14px 12px !important;
  }

  .container,
  .quiz-container{
    width:100%;
    margin:14px auto !important;
    padding:16px !important;
  }

  .flex-container,
  .category-columns{
    flex-direction:column;
    gap:16px;
  }

  .column{
    min-width:0 !important;
  }

  table,
  thead,
  tbody,
  th,
  td,
  tr{
    display:block;
  }

  table thead{
    display:none;
  }

  table tr{
    margin-bottom:12px;
    border:1px solid rgba(19,61,93,.10);
    border-radius:12px;
    overflow:hidden;
    background:#fff;
  }

  table td{
    border:none;
    border-bottom:1px solid rgba(19,61,93,.08);
  }

  table td:last-child{
    border-bottom:none;
  }
}


/* --- 2026 patch: mobile polish, terminal unlock UI, safer wrapping --- */
html, body{
  max-width:100%;
  overflow-x:hidden;
}
body{ line-height:1.55; }
header{ padding-inline:14px !important; }
nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.container, .page-wrap, .quiz-container{ width:min(1180px, calc(100% - 24px)); box-sizing:border-box; }
.page-wrap{ background:var(--surface) !important; color:var(--text) !important; border:1px solid var(--line); border-radius:24px !important; box-shadow:var(--shadow) !important; }
p, li{ overflow-wrap:anywhere; }
.btn, button, input[type="submit"], input[type="button"]{ min-height:44px; padding:10px 14px !important; }
.hidden-until-linux{ display:none !important; }
.hidden-until-linux.is-visible{ display:inline-flex !important; }
.expert-card{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.expert-badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:#edf6ff; color:#0f2c47; border:1px solid rgba(19,61,93,.10); font-weight:700; font-size:.95rem; }
.expert-badge.locked{ background:#f6f7f9; color:#53687b; }
.note-soft{ color:#587089; font-size:.96rem; }
.terminal-status{ margin-top:14px; padding:14px 16px; border-radius:14px; background:#edf6ff; border:1px solid rgba(19,61,93,.10); color:#0f2c47; }
.kbd{ display:inline-block; padding:2px 8px; border-radius:8px; border:1px solid rgba(19,61,93,.12); background:#fff; font-family:Consolas, Monaco, monospace; font-size:.92em; }
@media (max-width: 900px){
  .container, .page-wrap, .quiz-container{ width:min(100% - 16px, 1180px); margin:16px auto !important; padding:16px !important; border-radius:18px !important; }
  header{ position:static; }
  nav a{ margin:0 !important; padding:8px 10px !important; font-size:.95rem; }
  .flex-container, .category-columns, .layout, .principles-grid, .note-grid{ gap:16px !important; }
}
@media (max-width: 640px){
  body{ font-size:15px; }
  .column{ min-width:0 !important; }
  .task, .terminal-box, .legend-box, .hint-box, .toc, .section-box, .intro-box, .note-card{ padding:14px !important; }
  .terminal{ min-height:320px !important; max-height:420px !important; font-size:.95rem; }
  .terminal-input{ width:100% !important; margin-top:6px; }
}


.device-note{margin:0 0 18px 0;padding:14px 16px;border-radius:14px;border:1px solid rgba(16,35,58,.12);background:linear-gradient(180deg,#f7fbff,#eef6ff);color:#17314c}
.device-note strong{color:#0b63bd}
.device-note.desktop-required{border-left:5px solid #0f8cff}
.device-note.mobile-ok{border-left:5px solid #1f9d5c}
.device-note p{margin:.2rem 0}
.device-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0}
.device-chip{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:.85rem;font-weight:700;border:1px solid rgba(16,35,58,.1);background:#f3f7fb;color:#17314c}
.device-chip.desktop{background:#eef6ff;color:#0b63bd}
.device-chip.mixed{background:#fff4e5;color:#9a5a00}
.device-chip.mobile{background:#ebfff5;color:#0e6b3f}
@media (max-width:760px){.device-note{padding:12px 14px;margin-bottom:14px}.device-chip{font-size:.8rem}}


/* --- 2026 refinement: less bubbly device hints, stronger linux status --- */
.device-note{
  margin:0 0 18px 0;
  padding:15px 17px;
  border-radius:10px;
  border:1px solid #d7e0e8;
  border-left:4px solid #0f8cff;
  background:#f5f7fa;
  color:#23384d;
  box-shadow:none;
}
.device-note strong{color:#10233a}
.device-note p{margin:0; line-height:1.55}
.device-note.desktop-required{border-left-color:#0f8cff}
.device-note.mobile-ok{border-left-color:#1f9d5c}
.device-note.mobile-limited{border-left-color:#c07a00}
.device-chip-row{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.device-chip{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:6px;
  font-size:.78rem;
  font-weight:600;
  border:1px solid #d6dde5;
  background:#f3f5f7;
  color:#26384a;
  box-shadow:none;
}
.device-chip.desktop{background:#eef5ff;color:#184a8b;border-color:#cad8ea}
.device-chip.mixed{background:#fff6e8;color:#8a5a00;border-color:#ead7b0}
.device-chip.mobile{background:#eef8f1;color:#205a38;border-color:#d5e7dc}
#course-state,
.terminal-status.course-state{
  background:#132739 !important;
  color:#dcebe3 !important;
  border:1px solid #25485a !important;
  border-left:4px solid #1f9d5c !important;
  font-weight:600;
}
#course-state a,
.terminal-status.course-state a{
  color:#9fd0ff !important;
  font-weight:700;
  text-decoration:underline;
}


/* 2026-04 restrained device notes + linux success readability */
.device-note{
  margin:0 0 12px 0 !important;
  padding:9px 11px !important;
  border-radius:6px !important;
  border:1px solid #dce3ea !important;
  border-left:3px solid #a9bfd6 !important;
  background:#f7f9fb !important;
  color:#4d5f72 !important;
  box-shadow:none !important;
}
.device-note strong{
  color:#26384a !important;
  font-weight:600 !important;
}
.device-note p{
  margin:0 !important;
  line-height:1.45 !important;
  font-size:.92rem !important;
}
.device-note.desktop-required{border-left-color:#8fb0cf !important;}
.device-note.mobile-limited{border-left-color:#c7ab72 !important;}
.device-note.mobile-ok{border-left-color:#8db69a !important;}
.device-chip-row{display:none !important;}

/* overview page: even quieter */
body > .container > .device-note,
.container > .device-note:first-of-type{
  margin-bottom:10px !important;
}

/* linux course state/status readability */
#course-state,
.terminal-status.course-state,
.terminal-status.success-box{
  background:#162634 !important;
  color:#eef4f8 !important;
  border:1px solid #29465c !important;
  border-left:4px solid #4c9a6d !important;
  font-weight:600 !important;
}
#course-state a,
.terminal-status.course-state a,
.terminal-status.success-box a{
  color:#9fd0ff !important;
  text-decoration:underline !important;
  font-weight:700 !important;
}