:root{
  --teal:#00CCCC; --teal-dark:#009999; --teal-hover:#007A7A;
  --green:#66CC99; --green-dark:#009966;
  --yellow:#FFCC33; --red:#F76363; --mint:#D1F0E0;
  --charcoal:#313131; --muted:#666666; --border:#E4E4E4; --card-border:#e3eeee;
  --surface:#fff; --bg:#f7fafa;
  --shadow-card:0 8px 30px rgba(0,153,153,.10);
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; background:var(--bg);
  font-family:'Inter',system-ui,sans-serif; color:var(--charcoal);
}

/* ---- Lillio brand chrome: rainbow accent bar + white topbar ---- */
.accent-bar{height:4px; background:linear-gradient(90deg,#00cccc 0%,#66cc99 35%,#ffcc33 65%,#f76363 100%)}
.topbar{
  position:sticky; top:0; z-index:30; background:#fff; border-bottom:1px solid var(--card-border);
  display:flex; align-items:center; gap:12px; padding:0 24px; height:58px;
}
.topbar .logo{height:28px; width:auto; display:block}
.topbar .divider{width:1px; height:26px; background:#c2c2c2}
.topbar .tool-name{font-family:'Poppins',sans-serif; font-weight:600; font-size:16px; letter-spacing:-.01em; color:var(--charcoal)}
.topbar .spacer{flex:1}
.topbar .signout{
  font-size:13.5px; font-weight:500; color:var(--muted); text-decoration:none;
  padding:7px 12px; border-radius:7px;
}
.topbar .signout:hover{background:var(--bg); color:var(--teal-dark)}
@media (max-width:560px){ .topbar{padding:0 14px} }

.shell{
  width:100%; max-width:960px; margin:0 auto; padding:44px 20px;
  display:flex; flex-direction:column; align-items:center;
}
.brand{height:58px; width:auto; margin-bottom:28px}
.card{
  width:100%; max-width:520px; background:var(--surface); border:1px solid var(--card-border);
  border-radius:14px; padding:34px 32px; box-shadow:var(--shadow-card);
}
/* the result step is wide so the landscape certificate is readable on desktop */
.card.result{max-width:960px; padding:34px 38px}

/* ---- Two-pane responsive layout for the certificate flow (index only) ---- */
/* A 6-field form shouldn't float in a narrow card on a wide display. On desktop:
   brand/context on the left, the active step on the right; collapses to a single
   column on tablet/phone. Scoped to .flow so verify.html (.shell) is unaffected. */
.shell.flow{
  max-width:1080px; display:grid; grid-template-columns:360px minmax(0,1fr);
  gap:48px; align-items:start;
}
.flow .intro-pane{position:sticky; top:82px; display:flex; flex-direction:column}
.flow .step-pane{min-width:0}
.flow .brand{margin:0 0 26px; align-self:flex-start}
.flow .intro-title{font-family:'Poppins',sans-serif; font-weight:700; font-size:30px;
  line-height:1.2; letter-spacing:-.4px; margin:0 0 12px}
.flow .intro-lede{color:var(--muted); font-size:15.5px; line-height:1.6; margin:0 0 24px}
.flow .intro-points{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:13px}
.flow .intro-points li{position:relative; padding-left:30px; font-size:14.5px; line-height:1.5}
.flow .intro-points li::before{content:"\2713"; position:absolute; left:0; top:0; width:21px; height:21px;
  border-radius:50%; background:var(--mint); color:var(--green-dark); font-size:12px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center}
.flow .card{max-width:none}
.flow .stepper{max-width:none}
/* When the certificate is ready, hide the intro and let the result span full width. */
.shell.flow:has(#step-done:not(.hidden)){grid-template-columns:1fr; max-width:1000px}
.shell.flow:has(#step-done:not(.hidden)) .intro-pane{display:none}
@media (max-width:880px){
  .shell.flow{grid-template-columns:1fr; gap:26px; max-width:560px}
  .flow .intro-pane{position:static; top:auto}
  .flow .intro-title{font-size:25px}
}
h1{font-family:'Poppins',sans-serif; font-weight:700; font-size:24px; margin:0 0 8px; letter-spacing:-.2px}
.sub{margin:0 0 22px; color:var(--muted); font-size:15px; line-height:1.5}
label{display:block; font-weight:600; font-size:13px; margin:16px 0 7px; color:var(--charcoal)}
input,select{
  width:100%; padding:13px 14px; font-size:15px; font-family:inherit; color:var(--charcoal);
  border:1.5px solid var(--border); border-radius:11px; background:#fff; outline:none;
}
input:focus,select:focus{border-color:var(--teal-dark); box-shadow:0 0 0 3px rgba(0,153,153,.12)}
#code{letter-spacing:8px; font-size:22px; text-align:center; font-weight:600}
button,.primary{font-family:'Poppins',sans-serif; cursor:pointer}
.primary{
  display:block; width:100%; margin-top:22px; padding:13px 16px; border:none; border-radius:11px;
  background:var(--teal-dark); color:#fff; font-size:15px; font-weight:600; text-align:center;
  text-decoration:none; transition:background .15s;
}
.primary:hover{background:var(--teal-hover)}
.primary[disabled]{opacity:.6; cursor:default}
.link{display:block; width:100%; margin-top:12px; background:none; border:none; color:var(--muted);
  font-size:14px; font-weight:500; padding:6px; text-decoration:underline}
.link:hover{color:var(--teal-dark)}
.err{color:var(--red); font-size:13.5px; margin:12px 0 0; min-height:18px; font-weight:500}
.dev-hint{background:var(--mint); color:var(--green-dark); border-radius:10px; padding:10px 12px;
  font-size:13px; font-weight:600; margin-bottom:6px}
.hidden{display:none !important}
/* preview matches the A4 landscape proportions of the certificate */
.result iframe{width:100%; aspect-ratio:297/210; height:auto; border:1px solid var(--border); border-radius:12px; margin-top:6px; background:#fff}
.row{display:flex; gap:14px; align-items:center; justify-content:center; margin:20px auto 0; max-width:520px}
.row .primary{margin-top:0; flex:1}
.row .link{margin-top:0; width:auto; white-space:nowrap}

@media (max-width:560px){
  .shell{padding:28px 14px}
  .card{padding:26px 22px}
  .card.result{padding:26px 20px}
}

/* textareas match inputs */
textarea{
  width:100%; padding:13px 14px; font-size:15px; font-family:inherit; color:var(--charcoal);
  border:1.5px solid var(--border); border-radius:11px; background:#fff; outline:none; resize:vertical; min-height:46px;
}
textarea:focus{border-color:var(--teal-dark); box-shadow:0 0 0 3px rgba(0,153,153,.12)}

/* step indicator */
.stepper{list-style:none; display:flex; gap:10px; padding:0; margin:0 0 22px; width:100%; max-width:520px}
.stepper li{flex:1; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--muted);
  padding-bottom:10px; border-bottom:2px solid var(--border)}
.stepper li .dot{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%;
  background:var(--border); color:#fff; font-size:12px; font-weight:700}
.stepper li.active{color:var(--teal-dark); border-bottom-color:var(--teal-dark)}
.stepper li.active .dot{background:var(--teal-dark)}
.stepper li.done{color:var(--green-dark); border-bottom-color:var(--green-dark)}
.stepper li.done .dot{background:var(--green-dark)}

/* grouped sections in the details step */
.group{padding:18px 0; border-top:1px solid var(--border)}
.group:first-of-type{border-top:none; padding-top:4px}
.group-title{font-family:'Poppins',sans-serif; font-weight:600; font-size:12px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--teal-dark); margin-bottom:2px}
.field-row{display:flex; gap:14px}
.field-row > div{flex:1; min-width:0}
.opt{color:var(--muted); font-weight:400; text-transform:none; letter-spacing:0}

/* star rating */
.stars{display:flex; gap:6px; margin-top:8px}
.stars span{font-size:30px; line-height:1; color:#E0E3E8; cursor:pointer; transition:color .12s; user-select:none}
.stars span.on{color:var(--yellow)}

@media (max-width:560px){ .field-row{flex-direction:column; gap:0} }

/* team records page */
.team-wrap{max-width:1200px; margin:0 auto; padding:32px 28px}
.team-head{display:flex; align-items:center; gap:18px; margin-bottom:14px}
.team-head h1{margin:0 0 2px}
.note{background:var(--mint); color:var(--green-dark); border-radius:10px; padding:10px 14px; font-size:13px; font-weight:500; margin-bottom:18px}
.table-scroll{overflow-x:auto; border:1px solid var(--card-border); border-radius:14px; background:#fff; box-shadow:var(--shadow-card)}
table{border-collapse:collapse; width:100%; font-size:13.5px}
thead th{text-align:left; font-family:'Poppins',sans-serif; font-weight:600; font-size:11px; letter-spacing:.8px; text-transform:uppercase;
  color:var(--muted); padding:13px 14px; border-bottom:1px solid var(--border); white-space:nowrap; background:#FAFBFC}
tbody td{padding:12px 14px; border-bottom:1px solid #F0F1F3; vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#FAFEFE}
td.muted, .muted{color:var(--muted)}
td.nowrap{white-space:nowrap}
td.rate{color:var(--yellow); font-size:15px; letter-spacing:1px; white-space:nowrap}
td a{color:var(--teal-dark); font-weight:600; text-decoration:none}
td a:hover{text-decoration:underline}
.empty{text-align:center; color:var(--muted); padding:30px}
@media (max-width:560px){ .team-wrap{padding:24px 14px} }

/* admin course manager */
.admin .add-bar{display:flex; gap:12px; margin-bottom:6px}
.admin .add-bar #new-name{flex:1}
.admin .add-bar #new-hours{width:110px}
.admin .add-bar .primary{margin-top:0; width:auto; padding:13px 22px}
.admin table input{padding:9px 11px; font-size:14px; border:1.5px solid var(--border); border-radius:9px; width:100%}
.admin table input:focus{border-color:var(--teal-dark); box-shadow:0 0 0 3px rgba(0,153,153,.12)}
.admin td.actions{display:flex; gap:10px; align-items:center}
.admin .save{font-family:'Poppins',sans-serif; font-weight:600; font-size:13px; padding:8px 16px; border:none;
  border-radius:9px; background:var(--teal-dark); color:#fff; cursor:pointer}
.admin .save:hover{background:var(--teal-hover)}
.admin .save.ok{background:var(--green-dark)} .admin .save.bad{background:var(--red)}
.admin .link-danger{background:none; border:none; color:var(--red); font-weight:600; font-size:13px; cursor:pointer; text-decoration:underline}
.admin .link-danger:hover{color:#A82828}

/* intro info note on the landing step */
.info{display:flex; gap:8px; align-items:flex-start; background:var(--mint); color:#2b3a34;
  border-radius:11px; padding:12px 14px; font-size:13.5px; line-height:1.5; margin-bottom:4px}
.info strong{color:var(--charcoal); font-weight:600}

/* admin console nav (Course Manager / Certificate Log) */
.console-nav{display:flex; gap:6px; align-items:center; margin-bottom:18px}
.console-nav a{font-family:'Poppins',sans-serif; font-weight:600; font-size:14px; text-decoration:none;
  color:var(--muted); padding:8px 14px; border-radius:9px}
.console-nav a.active{color:var(--teal-dark); background:#E6FAFA}
.console-nav a:hover{color:var(--teal-dark)}
.console-nav .export-btn{margin-left:auto; font-family:'Poppins',sans-serif; font-weight:600; font-size:13px;
  padding:9px 16px; border:1.5px solid var(--border); background:#fff; border-radius:9px; color:var(--charcoal); cursor:pointer}
.console-nav .export-btn:hover{border-color:var(--teal-dark); color:var(--teal-dark)}
.console-nav .export-btn[disabled]{opacity:.5; cursor:default}

/* "How to use" instruction block (shown on every page for internal users) */
.help{background:#F0FAFA; border:1px solid #CDEDED; border-radius:12px; padding:14px 16px;
  margin-bottom:18px; font-size:13.5px; line-height:1.6; color:#2b3a34}
.help h2{font-family:'Poppins',sans-serif; font-size:12px; font-weight:700; letter-spacing:.8px;
  text-transform:uppercase; color:var(--teal-dark); margin:0 0 6px}
.help ul{margin:8px 0 8px; padding-left:18px}
.help li{margin:3px 0}
.help strong{color:var(--charcoal); font-weight:600}

/* certificate verification result */
.vr{margin-top:18px; font-size:14px; line-height:1.5}
.vr.bad{background:#FDEEEE; border:1px solid #F6C9C9; color:#9b2c2c; border-radius:12px; padding:16px 18px}
.vr.ok{background:#EAF9F1; border:1px solid #BEE8D2; border-radius:12px; padding:18px 20px}
.vr-head{font-family:'Poppins',sans-serif; font-weight:700; font-size:16px; color:var(--green-dark); margin-bottom:12px}
.vr dl{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:0}
.vr dt{color:var(--muted); font-size:13px; font-weight:600}
.vr dd{margin:0; color:var(--charcoal); font-weight:500}

/* completion-code admin toggle */
.setting{background:#fff; border:1px solid var(--card-border); border-radius:12px; padding:14px 16px; margin-bottom:16px}
.switch{display:flex; align-items:center; gap:10px; font-family:'Poppins',sans-serif; font-weight:600; font-size:14px; color:var(--charcoal); cursor:pointer}
.switch input{width:18px; height:18px; margin:0; accent-color:var(--teal-dark); cursor:pointer}
.setting-hint{margin:8px 0 0; color:var(--muted); font-size:13px; line-height:1.5}
.state{font-weight:600}
.state.on{color:var(--green-dark)}
.state.off{color:var(--muted)}
.admin .add-bar #new-code{width:200px}