:root{
  --brand: #3cbfba;    /* primary teal */
  --white: #ffffff;
  --dark:  #012e44;    /* deep navy for text / headings */
  --muted: rgba(1,46,68,0.55);
  --panel: rgba(3,46,68,0.03);
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;color:var(--dark);background:var(--white)}
a{color:var(--brand);text-decoration:underline}

/* Topbar */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 20px;
  background:var(--brand);
  color:var(--white);
  gap:12px;
}
.topbar .brand h1{margin:0;font-size:18px;line-height:1.1;color:var(--white)}
.progress-wrap{display:flex;align-items:center;gap:10px;min-width:160px}

/* Progress element */
.progress-wrap progress{
  -webkit-appearance:none;
  appearance:none;
  width:260px;
  max-width:42vw;
  height:12px;
  border-radius:8px;
  background:rgba(255,255,255,0.18);
  border: none;
  overflow:hidden;
}
.progress-wrap progress::-webkit-progress-bar{ background: rgba(255,255,255,0.18); border-radius:8px; }
.progress-wrap progress::-webkit-progress-value{ background: var(--white); border-radius:8px; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.03); }
.progress-wrap progress::-moz-progress-bar{ background: var(--white); border-radius:8px; }

/* Layout */
.wrap{display:flex;gap:20px;max-width:1200px;margin:18px auto;padding:0 16px}
.sidebar{width:260px;min-width:200px;background:var(--white);padding:14px;border-radius:8px;border:1px solid var(--panel)}
.sidebar ul{list-style:none;margin:0;padding:0}
.sidebar li{padding:8px 10px;margin-bottom:6px;border-radius:6px;cursor:pointer;color:var(--dark);font-weight:500}
.sidebar li.active{background:var(--brand);color:var(--white);font-weight:700}
.content{flex:1;padding-bottom:40px}

/* Card/section styles */
.section{display:none;background:var(--white);padding:18px;border-radius:10px;box-shadow:0 6px 18px rgba(1,46,68,0.04);margin-bottom:18px;border:1px solid var(--panel)}
.section.active{display:block}
h2{color:var(--dark);margin-top:0;font-size:20px}
h3{color:var(--dark);margin-bottom:8px}
.muted{color:var(--muted)}

/* Form inputs */
.form label{display:block;margin-bottom:8px}
.form input, .form textarea, .form select{width:100%;padding:8px;border-radius:6px;border:1px solid #e6eef0;margin-top:6px;font-size:14px}
.row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.row label{flex:1;min-width:160px}
.actions{display:flex;gap:8px;align-items:center;margin-top:10px}

/* Buttons */
button, .download{
  background:var(--brand);
  color:var(--white);
  border:0;
  padding:9px 14px;
  border-radius:6px;
  cursor:pointer;
  font-weight:600;
  transition:transform .06s ease, box-shadow .06s ease;
}
button:hover, .download:hover{ transform: translateY(-1px); box-shadow:0 6px 20px rgba(60,191,186,0.12); }
button.mark-done{ background:var(--dark); color:var(--white); }

/* Code block / pre */
.code{background:#f7feff;padding:12px;border-radius:6px;white-space:pre-wrap;border:1px solid rgba(60,191,186,0.12); color:var(--dark)}

/* Certificate */
.certificate{border:2px dashed rgba(3,46,68,0.08);padding:14px;margin-top:12px;background:linear-gradient(180deg, rgba(60,191,186,0.02), rgba(255,255,255,0))}

/* Small helpers */
.hidden{display:none}
.checklist li{margin-bottom:8px}

/* Responsive */
@media(max-width:900px){
  .wrap{flex-direction:column;padding:12px}
  .sidebar{width:100%;display:flex;overflow:auto}
  .sidebar ul{display:flex;gap:6px}
  .sidebar li{white-space:nowrap;padding:8px}
  .progress-wrap progress{width:140px}
}

/* Fallback safeguard: ensure key elements show brand if older CSS specificity is blocking */
.topbar, .sidebar li.active, button, .download {
  background-color: var(--brand) !important;
  color: var(--white) !important;
}
h2, h3 { color: var(--dark) !important; }