/* ============================================================
   DAI ACADEMY — SQL tutorial + playground
   ============================================================ */

/* ---------- tutorial layout ---------- */
.tut{display:grid;grid-template-columns:250px 1fr;gap:34px;align-items:start}

.tutnav{
  position:sticky;top:96px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:16px;box-shadow:var(--shadow);max-height:calc(100vh - 120px);overflow:auto;
}
.tutnav h4{
  margin:0 0 10px;font-size:10.5px;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--gold-ink);font-weight:800;
}
.tutnav ol{list-style:none;margin:0;padding:0;counter-reset:d}
.tutnav li{margin:1px 0}
.tutnav a{
  display:block;padding:7px 10px;border-radius:8px;font-size:13px;
  color:var(--body);transition:.16s;line-height:1.35;
}
.tutnav a:hover{background:var(--paper-3);color:var(--ink)}
.tutnav a.on{background:var(--navy);color:#fff;font-weight:700}
.tutnav a b{display:block;font-size:10.5px;opacity:.75;font-weight:700}
.tutnav a.on b{opacity:.85}
.tutnav .ref{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}

.tutbody h2{font-size:clamp(21px,2.4vw,27px);margin:34px 0 10px;line-height:1.25}
.tutbody h2:first-child{margin-top:0}
.tutbody h3{font-size:17px;margin:24px 0 8px}
.tutbody p{margin:0 0 13px;font-size:15px;line-height:1.7}
.tutbody ul,.tutbody ol{margin:0 0 14px;padding-left:20px;font-size:15px;line-height:1.7}
.tutbody li{margin:5px 0}
.tutbody code{
  background:var(--paper-3);border:1px solid var(--line);border-radius:4px;
  padding:1px 5px;font-family:Consolas,"Courier New",monospace;font-size:13px;color:var(--navy);
}

/* callouts */
.note,.warn{
  border-radius:10px;padding:13px 16px;margin:0 0 16px;font-size:14.5px;line-height:1.65;
  border:1px solid;
}
.note{background:#F2F7FF;border-color:#C9DCF6;color:#1D3B73}
.warn{background:#FDF3DA;border-color:#EBD08A;color:#6B4C00}
.note b,.warn b{display:block;margin-bottom:2px}

/* syntax box */
.syntax{
  background:var(--navy);color:#DCE7F8;border-radius:10px;padding:14px 16px;margin:0 0 16px;
  font-family:Consolas,"Courier New",monospace;font-size:13.5px;line-height:1.7;
  white-space:pre;overflow-x:auto;
}
.syntax b{color:var(--gold-lt);font-weight:700}

/* prev / next */
.tutfoot{display:flex;gap:12px;justify-content:space-between;margin-top:40px;
  padding-top:22px;border-top:1px solid var(--line);flex-wrap:wrap}
.tutfoot a{
  flex:1;min-width:200px;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:14px 18px;box-shadow:var(--shadow);transition:.18s;
}
.tutfoot a:hover{border-color:var(--navy);transform:translateY(-2px)}
.tutfoot span{display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;
  color:var(--gold-ink);font-weight:800;margin-bottom:3px}
.tutfoot b{color:var(--ink);font-size:15px}
.tutfoot a.nxt{text-align:right}

/* ---------- playground ---------- */
.sqlbox{
  border:1px solid var(--line-2);border-radius:11px;overflow:hidden;margin:0 0 20px;
  background:#fff;box-shadow:var(--shadow);
}
.sqlhead{
  display:flex;align-items:center;gap:8px;padding:8px 12px;
  background:var(--paper-2);border-bottom:1px solid var(--line);
}
.sqlhead span{
  flex:1;font-size:10.5px;font-weight:800;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--muted);
}
.sqlrun,.sqlreset{
  border:0;border-radius:7px;font:inherit;font-size:12.5px;font-weight:800;
  cursor:pointer;padding:7px 14px;transition:.16s;
}
.sqlrun{background:linear-gradient(135deg,var(--gold-lt),var(--gold-dk));background-color:var(--gold);color:var(--navy)}
.sqlrun:hover{box-shadow:0 6px 16px rgba(240,180,41,.4)}
.sqlreset{background:#fff;border:1px solid var(--line-2);color:var(--muted);padding:7px 11px}
.sqlreset:hover{border-color:var(--navy);color:var(--ink)}

.sqlinput{
  width:100%;border:0;padding:14px 16px;font-family:Consolas,"Courier New",monospace;
  font-size:13.5px;line-height:1.6;color:var(--navy);background:#fff;resize:vertical;display:block;
}
.sqlinput:focus{outline:none;background:#FFFDF7}

.sqlout{border-top:1px solid var(--line);background:var(--paper-2);padding:12px 16px}
.sqlresult{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:8px}
.sqlresult table{border-collapse:collapse;width:100%;font-size:13px}
.sqlresult th,.sqlresult td{
  padding:7px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap;color:var(--ink);
}
.sqlresult th{
  background:var(--paper-3);color:var(--navy);font-size:11px;font-weight:800;
  letter-spacing:.6px;text-transform:uppercase;position:sticky;top:0;
}
.sqlresult tr:last-child td{border-bottom:0}
.sqlresult td.n{text-align:right;font-variant-numeric:tabular-nums}
.sqlresult .nul{color:var(--faint);font-size:11px;font-style:normal}
.sqlcount{margin:8px 0 0;font-size:12px;color:var(--muted)}
.sqlmsg{margin:0;font-size:13.5px;color:var(--muted)}
.sqlerr{
  margin:0;font-size:13.5px;color:#9B2226;background:#FDE9E9;
  border:1px solid #F0BFC0;border-radius:8px;padding:10px 13px;
}

/* demo table reference */
.sqltable{margin:0 0 22px}

/* exercises */
.tasks{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin:26px 0 0}
.tasks h3{margin:0 0 10px;font-size:15px}
.tasks ol{margin:0;padding-left:20px;font-size:14.5px}
.tasks li{margin:7px 0}

@media(max-width:900px){
  .tut{grid-template-columns:1fr;gap:22px}
  .tutnav{position:static;max-height:none}
  .tutnav ol{columns:2;column-gap:14px}
}
@media(max-width:560px){
  .tutnav ol{columns:1}
  .tutbody p,.tutbody ul,.tutbody ol{font-size:14.5px}
}

/* ============================================================
   Python playground
   ============================================================ */
.pybox{
  border:1px solid var(--line-2);border-radius:11px;overflow:hidden;margin:0 0 20px;
  background:#fff;box-shadow:var(--shadow);
}
.pyhead{
  display:flex;align-items:center;gap:8px;padding:8px 12px;
  background:var(--paper-2);border-bottom:1px solid var(--line);
}
.pyhead span{
  flex:1;font-size:10.5px;font-weight:800;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--muted);
}
.pyrun,.pyreset{
  border:0;border-radius:7px;font:inherit;font-size:12.5px;font-weight:800;
  cursor:pointer;padding:7px 14px;transition:.16s;
}
.pyrun{background:linear-gradient(135deg,var(--gold-lt),var(--gold-dk));background-color:var(--gold);color:var(--navy)}
.pyrun:hover{box-shadow:0 6px 16px rgba(240,180,41,.4)}
.pyreset{background:#fff;border:1px solid var(--line-2);color:var(--muted);padding:7px 11px}
.pyreset:hover{border-color:var(--navy);color:var(--ink)}

.pyinput{
  width:100%;border:0;padding:14px 16px;font-family:Consolas,"Courier New",monospace;
  font-size:13.5px;line-height:1.65;color:var(--navy);background:#fff;resize:vertical;
  display:block;tab-size:4;white-space:pre;overflow-x:auto;
}
.pyinput:focus{outline:none;background:#FFFDF7}

.pyout{border-top:1px solid var(--line);background:var(--paper-2);padding:12px 16px}
.pyresult{
  margin:0;background:var(--navy);color:#DCE7F8;border-radius:8px;padding:13px 16px;
  font-family:Consolas,"Courier New",monospace;font-size:13px;line-height:1.65;
  white-space:pre-wrap;word-break:break-word;overflow-x:auto;
}
.pymsg{margin:0;font-size:13.5px;color:var(--muted)}
.pyerr{
  margin:0;font-size:13.5px;color:#9B2226;background:#FDE9E9;
  border:1px solid #F0BFC0;border-radius:8px;padding:10px 13px;
}

/* ============================================================
   Excel playground
   ============================================================ */
.xlbox{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  margin:0 0 20px;background:#fff;box-shadow:var(--shadow);
}
.xlhead{
  display:flex;align-items:center;gap:8px;padding:9px 12px;
  background:var(--paper-2);border-bottom:1px solid var(--line);
}
.xlhead span{
  font-size:10.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--gold-ink);margin-right:auto;
}
.xlrun,.xlreset{
  border:1px solid var(--line-2);background:#fff;color:var(--navy);
  font:inherit;font-size:12.5px;font-weight:700;padding:5px 12px;
  border-radius:7px;cursor:pointer;transition:.16s;
}
.xlrun{background:var(--navy);color:#fff;border-color:var(--navy)}
.xlrun:hover{background:var(--navy-2)}
.xlreset{padding:5px 10px}
.xlreset:hover{border-color:var(--navy);background:var(--paper-3)}

.xlinput{
  display:block;width:100%;border:0;padding:13px 14px;resize:vertical;
  font-family:Consolas,"Courier New",monospace;font-size:13.5px;line-height:1.65;
  color:var(--navy);background:#fff;
}
.xlinput:focus{outline:2px solid var(--gold);outline-offset:-2px}

.xlout{border-top:1px solid var(--line);background:var(--paper-2);padding:10px 12px}
table.xlres{border-collapse:collapse;width:100%;font-size:13.5px}
table.xlres td{padding:6px 9px;vertical-align:top;border-bottom:1px solid var(--line)}
table.xlres tr:last-child td{border-bottom:0}
table.xlres td.f{
  font-family:Consolas,"Courier New",monospace;color:var(--navy);width:60%;
  word-break:break-word;
}
table.xlres td.v{
  font-weight:800;color:var(--ink);border-left:3px solid var(--gold);
  background:#fff;border-radius:0 6px 6px 0;
}
table.xlres td.v.n{font-variant-numeric:tabular-nums}
table.xlres td.v.err{color:#9B1C1C;border-left-color:#9B1C1C}
.xlerr{margin:0;font-size:13.5px;color:#9B1C1C}
.xlerr b{color:#7F1D1D}

/* the sheet grid */
.xlgridwrap{overflow-x:auto;border:1px solid var(--line-2);border-radius:10px;background:#fff}
table.xlgrid{border-collapse:collapse;font-size:13px;width:100%;min-width:520px}
table.xlgrid th,table.xlgrid td{
  border:1px solid #D9E2EF;padding:5px 9px;text-align:left;white-space:nowrap;
}
table.xlgrid thead th{
  background:#E8EEF8;color:var(--navy);font-weight:700;text-align:center;
  font-size:12px;position:sticky;top:0;
}
table.xlgrid th.xlrow{
  background:#E8EEF8;color:var(--muted);font-weight:700;text-align:center;
  font-size:12px;width:34px;
}
table.xlgrid th.xlcorner{width:34px}
table.xlgrid td.xlhead{background:var(--paper-2);font-weight:800;color:var(--ink)}
table.xlgrid td.n{text-align:right;font-variant-numeric:tabular-nums}
.sheetcap{
  font-size:12.5px;color:var(--muted);margin:0 0 16px;
}

/* ============================================================
   Power BI / DAX playground
   ============================================================ */
.daxbox{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  margin:0 0 20px;background:#fff;box-shadow:var(--shadow);
}
.daxhead{
  display:flex;align-items:center;gap:8px;padding:9px 12px;
  background:var(--paper-2);border-bottom:1px solid var(--line);
}
.daxhead span{
  font-size:10.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--gold-ink);margin-right:auto;
}
.daxrun,.daxreset{
  border:1px solid var(--line-2);background:#fff;color:var(--navy);
  font:inherit;font-size:12.5px;font-weight:700;padding:5px 12px;
  border-radius:7px;cursor:pointer;transition:.16s;
}
.daxrun{background:var(--navy);color:#fff;border-color:var(--navy)}
.daxrun:hover{background:var(--navy-2)}
.daxreset{padding:5px 10px}
.daxreset:hover{border-color:var(--navy);background:var(--paper-3)}

.daxinput{
  display:block;width:100%;border:0;padding:13px 14px;resize:vertical;
  font-family:Consolas,"Courier New",monospace;font-size:13.5px;line-height:1.7;
  color:var(--navy);background:#fff;
}
.daxinput:focus{outline:2px solid var(--gold);outline-offset:-2px}

.daxout{border-top:1px solid var(--line);background:var(--paper-2);padding:10px 12px;overflow-x:auto}
table.daxres{border-collapse:collapse;width:100%;font-size:13.5px}
table.daxres th{
  text-align:left;padding:7px 10px;font-size:11px;letter-spacing:.6px;
  text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--line-2);
}
table.daxres th.n{text-align:right}
table.daxres td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.daxres tr:last-child td{border-bottom:0}
table.daxres td.f{font-family:Consolas,"Courier New",monospace;color:var(--navy);width:55%;word-break:break-word}
table.daxres td.v{font-weight:800;color:var(--ink);border-left:3px solid var(--gold);background:#fff}
table.daxres td.n{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}
table.daxres td.err,table.daxres td.v.err{color:#9B1C1C;font-weight:600;text-align:left}
table.daxres tr.tot td{
  border-top:2px solid var(--line-2);font-weight:800;background:var(--paper-3);border-bottom:0;
}
.daxerr{margin:0;font-size:13.5px;color:#9B1C1C}
.daxnote{margin:8px 0 0;font-size:12.5px;color:var(--muted)}

/* model tables */
.daxgridwrap{overflow-x:auto;border:1px solid var(--line-2);border-radius:10px;background:#fff}
table.daxgrid{border-collapse:collapse;font-size:13px;width:100%;min-width:460px}
table.daxgrid th,table.daxgrid td{border:1px solid #D9E2EF;padding:5px 9px;text-align:left;white-space:nowrap}
table.daxgrid thead th{background:#E8EEF8;color:var(--navy);font-weight:700;font-size:12px}
table.daxgrid td.n{text-align:right;font-variant-numeric:tabular-nums}

/* ============================================================
   Tableau playground
   ============================================================ */
.tabbox{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  margin:0 0 20px;background:#fff;box-shadow:var(--shadow);
}
.tabhead{
  display:flex;align-items:center;gap:8px;padding:9px 12px;
  background:var(--paper-2);border-bottom:1px solid var(--line);
}
.tabhead span{
  font-size:10.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--gold-ink);margin-right:auto;
}
.tabrun,.tabreset{
  border:1px solid var(--line-2);background:#fff;color:var(--navy);
  font:inherit;font-size:12.5px;font-weight:700;padding:5px 12px;
  border-radius:7px;cursor:pointer;transition:.16s;
}
.tabrun{background:var(--navy);color:#fff;border-color:var(--navy)}
.tabrun:hover{background:var(--navy-2)}
.tabreset{padding:5px 10px}
.tabreset:hover{border-color:var(--navy);background:var(--paper-3)}

.tabinput{
  display:block;width:100%;border:0;padding:13px 14px;resize:vertical;
  font-family:Consolas,"Courier New",monospace;font-size:13.5px;line-height:1.7;
  color:var(--navy);background:#fff;
}
.tabinput:focus{outline:2px solid var(--gold);outline-offset:-2px}

.tabout{border-top:1px solid var(--line);background:var(--paper-2);padding:10px 12px;overflow-x:auto}
table.tabres{border-collapse:collapse;width:100%;font-size:13.5px}
table.tabres th{
  text-align:left;padding:7px 10px;font-size:11px;letter-spacing:.6px;
  text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--line-2);
}
table.tabres th.n{text-align:right}
table.tabres td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.tabres tr:last-child td{border-bottom:0}
table.tabres td.f{font-family:Consolas,"Courier New",monospace;color:var(--navy);width:55%;word-break:break-word}
table.tabres td.v{font-weight:800;color:var(--ink);border-left:3px solid var(--gold);background:#fff}
table.tabres td.n{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}
table.tabres td.err,table.tabres td.v.err{color:#9B1C1C;font-weight:600;text-align:left}
table.tabres tr.tot td{
  border-top:2px solid var(--line-2);font-weight:800;background:var(--paper-3);border-bottom:0;
}
.taberr{margin:0;font-size:13.5px;color:#9B1C1C}
.tabnote{margin:8px 0 0;font-size:12.5px;color:var(--muted)}

.tabgridwrap{overflow-x:auto;border:1px solid var(--line-2);border-radius:10px;background:#fff}
table.tabgrid{border-collapse:collapse;font-size:12.5px;width:100%;min-width:560px}
table.tabgrid th,table.tabgrid td{border:1px solid #D9E2EF;padding:5px 9px;text-align:left;white-space:nowrap}
table.tabgrid thead th{background:#E8EEF8;color:var(--navy);font-weight:700;font-size:11.5px}
/* Tableau colours dimensions blue and measures green - keep that cue */
table.tabgrid thead th.dim{color:#1F4E8C}
table.tabgrid thead th.msr{color:#1B6B45;text-align:right}
table.tabgrid td.n{text-align:right;font-variant-numeric:tabular-nums}

/* ============================================================
   GenAI prompt workbench
   ============================================================ */
.aibox{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  margin:0 0 20px;background:#fff;box-shadow:var(--shadow);
}
.aihead{
  display:flex;align-items:center;gap:8px;padding:9px 12px;
  background:var(--paper-2);border-bottom:1px solid var(--line);
}
.aihead span{
  font-size:10.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--gold-ink);margin-right:auto;
}
.airun,.aireset{
  border:1px solid var(--line-2);background:#fff;color:var(--navy);
  font:inherit;font-size:12.5px;font-weight:700;padding:5px 12px;
  border-radius:7px;cursor:pointer;transition:.16s;
}
.airun{background:var(--navy);color:#fff;border-color:var(--navy)}
.airun:hover{background:var(--navy-2)}
.aireset{padding:5px 10px}
.aireset:hover{border-color:var(--navy);background:var(--paper-3)}
.aiinput{
  display:block;width:100%;border:0;padding:13px 14px;resize:vertical;
  font:inherit;font-size:14px;line-height:1.65;color:var(--ink);background:#fff;
}
.aiinput:focus{outline:2px solid var(--gold);outline-offset:-2px}
.aiout{border-top:1px solid var(--line);background:var(--paper-2);padding:12px}

.ai-score{display:flex;align-items:baseline;gap:8px;margin-bottom:11px}
.ai-score b{font-size:30px;line-height:1;font-weight:800}
.ai-score span{font-size:13px;font-weight:700;color:var(--body)}
.ai-score i{margin-left:auto;font-style:normal;font-size:12px;color:var(--muted)}
.ai-score.ok b{color:#1B7F4B}
.ai-score.mid b{color:#8A6100}
.ai-score.low b{color:#B45309}
.ai-score.bad b{color:#9B1C1C}

.ai-parts{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:5px}
.ai-parts li{display:flex;align-items:baseline;gap:8px;font-size:13.5px;flex-wrap:wrap}
.ai-parts .mark{font-weight:800;width:15px;flex:none}
.ai-parts li.yes .mark{color:#1B7F4B}
.ai-parts li.no .mark{color:#9B1C1C}
.ai-parts li.yes b{color:var(--ink)}
.ai-parts li.no b{color:var(--body)}
.ai-parts .tip{flex:1 1 100%;padding-left:23px;font-size:12.5px;color:var(--muted);line-height:1.5}

.ai-notes{list-style:none;margin:0;padding:11px 0 0;border-top:1px solid var(--line);display:grid;gap:6px}
.ai-notes li{font-size:13px;line-height:1.55;padding-left:20px;position:relative}
.ai-notes li:before{position:absolute;left:0;font-weight:800}
.ai-notes li.good{color:#1B6B45}
.ai-notes li.good:before{content:"\2713";color:#1B7F4B}
.ai-notes li.warn{color:#6B4C00}
.ai-notes li.warn:before{content:"!";color:#B45309}
.ai-notes li.bad{color:#7F1D1D}
.ai-notes li.bad:before{content:"\2717";color:#9B1C1C}

/* weak vs strong */
.ai-vs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 20px}
.ai-col{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.ai-col h4{
  margin:0;padding:9px 13px;font-size:12px;letter-spacing:.8px;text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:center;
}
.ai-col.weak h4{background:#FDF2F2;color:#9B1C1C;border-bottom:1px solid #F3D6D6}
.ai-col.strong h4{background:#F0F9F4;color:#1B6B45;border-bottom:1px solid #CFE9DA}
.ai-col h4 span{font-weight:800;font-size:12.5px}
.ai-col pre{
  margin:0;padding:13px;white-space:pre-wrap;word-break:break-word;
  font:inherit;font-size:13px;line-height:1.6;color:var(--body);
}
@media(max-width:720px){ .ai-vs{grid-template-columns:1fr} }
.ai-parts li.opt .mark{color:var(--muted)}
.ai-parts li.opt b{color:var(--muted);font-weight:700}

/* ============================================================
   VBA playground
   ============================================================ */
.vbabox{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  margin:0 0 20px;background:#fff;box-shadow:var(--shadow);
}
.vbahead{
  display:flex;align-items:center;gap:8px;padding:9px 12px;
  background:var(--paper-2);border-bottom:1px solid var(--line);
}
.vbahead span{
  font-size:10.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--gold-ink);margin-right:auto;
}
.vbarun,.vbareset{
  border:1px solid var(--line-2);background:#fff;color:var(--navy);
  font:inherit;font-size:12.5px;font-weight:700;padding:5px 12px;
  border-radius:7px;cursor:pointer;transition:.16s;
}
.vbarun{background:var(--navy);color:#fff;border-color:var(--navy)}
.vbarun:hover{background:var(--navy-2)}
.vbareset{padding:5px 10px}
.vbareset:hover{border-color:var(--navy);background:var(--paper-3)}

.vbainput{
  display:block;width:100%;border:0;padding:13px 14px;resize:vertical;
  font-family:Consolas,"Courier New",monospace;font-size:13.5px;line-height:1.7;
  color:var(--navy);background:#fff;tab-size:4;
}
.vbainput:focus{outline:2px solid var(--gold);outline-offset:-2px}

.vbaout{border-top:1px solid var(--line);background:var(--paper-2);padding:11px 12px}
.vbaerr{
  margin:0 0 8px;font-size:13.5px;color:#9B1C1C;background:#FEF3F2;
  border:1px solid #F0BFC0;border-left:3px solid #9B1C1C;
  border-radius:0 8px 8px 0;padding:9px 12px;
}
.vbaerr b{color:#7F1D1D}
.vbamsgline{margin:0 0 8px;font-size:13px;color:var(--muted)}

/* MsgBox, drawn like the real dialog title bar */
.vbamsgs{display:grid;gap:8px;margin-bottom:10px}
.vbamsg{
  display:flex;align-items:flex-start;gap:10px;background:#fff;
  border:1px solid var(--line-2);border-radius:9px;padding:10px 12px;
  box-shadow:var(--shadow);
}
.vbamsg b{
  flex:none;font-size:10px;letter-spacing:1px;text-transform:uppercase;
  color:#fff;background:var(--navy);border-radius:5px;padding:3px 7px;margin-top:1px;
}
.vbamsg span{font-size:13.5px;color:var(--ink);line-height:1.55}

/* Immediate window */
.vbaimm{margin-bottom:10px}
.vbaimm h5,.vbasheetout h5{
  margin:0 0 6px;font-size:10.5px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--muted);
}
.vbasheetout h5 em{
  font-style:normal;color:var(--gold-ink);text-transform:none;letter-spacing:0;
  font-size:11.5px;
}
.vbaimm pre{
  margin:0;background:var(--navy);color:#E8EEF8;border-radius:9px;
  padding:11px 13px;overflow-x:auto;
  font-family:Consolas,"Courier New",monospace;font-size:13px;line-height:1.7;
}

/* the worksheet grid */
.vbagridwrap{overflow-x:auto;border:1px solid var(--line-2);border-radius:10px;background:#fff}
table.vbagrid{border-collapse:collapse;font-size:13px;width:100%;min-width:640px}
table.vbagrid th,table.vbagrid td{
  border:1px solid #D9E2EF;padding:5px 9px;text-align:left;white-space:nowrap;
}
table.vbagrid thead th{
  background:#E8EEF8;color:var(--navy);font-weight:700;text-align:center;font-size:12px;
}
table.vbagrid th.vbarow{
  background:#E8EEF8;color:var(--muted);font-weight:700;text-align:center;
  font-size:12px;width:34px;
}
table.vbagrid th.vbacorner{width:34px}
table.vbagrid td.n{text-align:right;font-variant-numeric:tabular-nums}
table.vbagrid td.b{font-weight:800;color:var(--navy)}
/* a cell the macro just wrote to */
table.vbagrid td.chg{box-shadow:inset 0 0 0 2px var(--gold);font-weight:700}

/* ============================================================
   HTML playground
   ============================================================ */
.htmlbox{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  margin:0 0 20px;background:#fff;box-shadow:var(--shadow);
}
.htmlhead{
  display:flex;align-items:center;gap:8px;padding:9px 12px;
  background:var(--paper-2);border-bottom:1px solid var(--line);
}
.htmlhead span{
  font-size:10.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--gold-ink);margin-right:auto;
}
.htmlrun,.htmlreset{
  border:1px solid var(--line-2);background:#fff;color:var(--navy);
  font:inherit;font-size:12.5px;font-weight:700;padding:5px 12px;
  border-radius:7px;cursor:pointer;transition:.16s;
}
.htmlrun{background:var(--navy);color:#fff;border-color:var(--navy)}
.htmlrun:hover{background:var(--navy-2)}
.htmlreset{padding:5px 10px}
.htmlreset:hover{border-color:var(--navy);background:var(--paper-3)}

.htmlinput{
  display:block;width:100%;border:0;padding:13px 14px;resize:vertical;
  font-family:Consolas,"Courier New",monospace;font-size:13px;line-height:1.7;
  color:var(--navy);background:#fff;tab-size:2;
}
.htmlinput:focus{outline:2px solid var(--gold);outline-offset:-2px}

/* Preview / Outline / Check switcher */
.htmltabs{
  display:flex;gap:4px;padding:7px 10px 0;
  background:var(--paper-2);border-top:1px solid var(--line);
}
.htmltab{
  border:1px solid transparent;border-bottom:0;background:none;
  font:inherit;font-size:12px;font-weight:700;color:var(--muted);
  padding:6px 13px;border-radius:8px 8px 0 0;cursor:pointer;transition:.14s;
}
.htmltab:hover{color:var(--navy)}
.htmltab.on{background:#fff;border-color:var(--line);color:var(--navy)}
.htmltab.hasbad{color:#9B1C1C}
.htmltab.on.hasbad{color:#9B1C1C}

.htmlout{background:#fff;border-top:1px solid var(--line)}
.htmlpane{padding:12px}
.htmlframe{
  display:block;width:100%;border:1px solid var(--line-2);border-radius:9px;
  background:#fff;
}

/* Outline */
.htmltree{
  font-family:Consolas,"Courier New",monospace;font-size:12.5px;line-height:1.5;
  max-height:300px;overflow:auto;
}
.htmlnode{padding:3px 0;border-bottom:1px dashed var(--line)}
.htmlnode:last-child{border-bottom:0}
.htmlnode b{color:var(--navy);font-weight:700}
.htmlnode span{
  color:var(--muted);margin-left:9px;font-family:inherit;
}

/* Check */
.htmlok{
  margin:0;font-size:13.5px;color:#1B6B45;background:#F0F9F4;
  border:1px solid #CFE9DA;border-left:3px solid #1B6B45;
  border-radius:0 8px 8px 0;padding:10px 13px;
}
.htmlok b{color:#145435}
ul.htmlproblems{margin:0;padding:0;list-style:none;display:grid;gap:7px}
ul.htmlproblems li{
  font-size:13.3px;line-height:1.55;padding:9px 12px;border-radius:0 8px 8px 0;
  margin:0;
}
ul.htmlproblems li.bad{background:#FEF3F2;border:1px solid #F0BFC0;border-left:3px solid #9B1C1C;color:#7F1D1D}
ul.htmlproblems li.warn{background:#FFFBEB;border:1px solid #EBD08A;border-left:3px solid #8A6100;color:#6B4B00}
ul.htmlproblems li b{
  display:inline-block;min-width:58px;font-size:10.5px;letter-spacing:.8px;
  text-transform:uppercase;opacity:.75;margin-right:8px;
}
.htmlmsg{margin:0;font-size:13px;color:var(--muted)}

/* ============================================================
   Power Automate playground
   ============================================================ */
.pabox,.paexprbox{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  margin:0 0 20px;background:#fff;box-shadow:var(--shadow);
}
.pahead{
  display:flex;align-items:center;gap:8px;padding:9px 12px;
  background:var(--paper-2);border-bottom:1px solid var(--line);
}
.pahead span{
  font-size:10.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--gold-ink);margin-right:auto;
}
.parun-btn,.pareset{
  border:1px solid var(--line-2);background:#fff;color:var(--navy);
  font:inherit;font-size:12.5px;font-weight:700;padding:5px 12px;
  border-radius:7px;cursor:pointer;transition:.16s;
}
.parun-btn{background:var(--navy);color:#fff;border-color:var(--navy)}
.parun-btn:hover{background:var(--navy-2)}
.pareset{padding:5px 10px}
.pareset:hover{border-color:var(--navy);background:var(--paper-3)}

.painput{
  display:block;width:100%;border:0;padding:13px 14px;resize:vertical;
  font-family:Consolas,"Courier New",monospace;font-size:12.8px;line-height:1.65;
  color:var(--navy);background:#fff;tab-size:2;
}
.painput:focus{outline:2px solid var(--gold);outline-offset:-2px}

.patabs{
  display:flex;gap:4px;padding:7px 10px 0;
  background:var(--paper-2);border-top:1px solid var(--line);
}
.patab{
  border:1px solid transparent;border-bottom:0;background:none;
  font:inherit;font-size:12px;font-weight:700;color:var(--muted);
  padding:6px 13px;border-radius:8px 8px 0 0;cursor:pointer;transition:.14s;
}
.patab:hover{color:var(--navy)}
.patab.on{background:#fff;border-color:var(--line);color:var(--navy)}
.patab.hasbad,.patab.on.hasbad{color:#9B1C1C}

.paout{background:#fff;border-top:1px solid var(--line);padding:12px}
.pamsg{margin:0;font-size:13px;color:var(--muted)}

/* run history */
ol.parun{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.pastep{
  border:1px solid var(--line-2);border-left:3px solid var(--ok,#1B6B45);
  border-radius:0 9px 9px 0;padding:9px 12px;background:#fff;
}
.pastep.failed{border-left-color:#9B1C1C;background:#FEF3F2}
.pastep.skipped{border-left-color:var(--line-2);background:var(--paper-2);opacity:.75}
.pastep.loop{border-left-color:var(--gold);background:#FFFBEB}
.pastep.empty{border-left-color:var(--line-2);background:var(--paper-2);opacity:.7}
.pastep-hd{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pastep-hd b{font-size:13.5px;color:var(--ink)}
.patype{
  font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--muted);background:var(--paper-3);border-radius:5px;padding:2px 7px;
}
.pabadge{
  margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.7px;
  text-transform:uppercase;border-radius:5px;padding:3px 8px;
}
.pabadge.ok{background:#E9F6EF;color:#145435}
.pabadge.failed{background:#FEE;color:#7F1D1D}
.pabadge.skipped{background:var(--paper-3);color:var(--muted)}
.pabadge.loop{background:#FDF3DA;color:var(--gold-ink)}
.pabadge.empty{background:var(--paper-3);color:var(--muted)}

.pakv{display:flex;gap:9px;margin-top:7px;align-items:flex-start}
.pakv span{
  flex:none;width:56px;font-size:10px;font-weight:800;letter-spacing:.7px;
  text-transform:uppercase;color:var(--muted);padding-top:4px;
}
.pakv pre{
  margin:0;flex:1;background:var(--paper-2);border:1px solid var(--line);
  border-radius:7px;padding:7px 10px;overflow-x:auto;
  font-family:Consolas,"Courier New",monospace;font-size:12.3px;line-height:1.55;
  color:var(--navy);white-space:pre-wrap;word-break:break-word;
}
.pabranch{margin-top:6px;font-size:12.5px;color:var(--gold-ink)}
.panote{margin-top:5px;font-size:12.5px;color:var(--muted)}
.paerr{
  margin-top:7px;font-size:13px;color:#7F1D1D;background:#fff;
  border:1px solid #F0BFC0;border-radius:7px;padding:8px 11px;line-height:1.55;
}
.paerr.top{
  margin:0 0 10px;border-left:3px solid #9B1C1C;border-radius:0 8px 8px 0;
  background:#FEF3F2;
}

/* the mock email card */
.pamail{margin-top:8px;border:1px solid var(--line-2);border-radius:9px;overflow:hidden}
.pamail div{display:flex;gap:10px;padding:7px 11px;font-size:13px;border-bottom:1px solid var(--line)}
.pamail div:last-child{border-bottom:0;white-space:pre-wrap}
.pamail span{
  flex:none;width:56px;font-size:10px;font-weight:800;letter-spacing:.7px;
  text-transform:uppercase;color:var(--muted);padding-top:2px;
}

.pavars{margin-top:14px}
.pavars h5{
  margin:0 0 6px;font-size:10.5px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--muted);
}
.pavars table{border-collapse:collapse;width:100%;font-size:13px}
.pavars th,.pavars td{
  border:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top;
}
.pavars th{background:var(--paper-2);color:var(--navy);width:150px}
.pavars td{font-family:Consolas,"Courier New",monospace;font-size:12.3px;white-space:pre-wrap}

/* the flow diagram */
.paflow{display:grid;gap:6px}
.patrigger{
  border:1px solid var(--gold);background:#FFFBEB;border-radius:9px;padding:9px 12px;
}
.patrigger b{font-size:13.5px;color:var(--gold-ink)}
.patrigger pre{
  margin:6px 0 0;font-family:Consolas,"Courier New",monospace;font-size:12px;
  white-space:pre-wrap;color:var(--navy);
}
.panode{
  border:1px solid var(--line-2);border-radius:9px;padding:8px 12px;background:#fff;
  display:flex;align-items:center;gap:10px;
}
.panode b{font-size:13.3px;color:var(--ink)}
.panode span{
  margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--muted);
}
.pabr{
  font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  color:var(--gold-ink);padding:2px 0;
}

/* single-expression box */
table.paexpr{border-collapse:collapse;width:100%;font-size:13.3px}
table.paexpr td{padding:6px 9px;vertical-align:top;border-bottom:1px solid var(--line)}
table.paexpr tr:last-child td{border-bottom:0}
table.paexpr td.e{
  font-family:Consolas,"Courier New",monospace;color:var(--navy);width:55%;
  word-break:break-word;
}
table.paexpr td.v{
  font-weight:700;color:var(--ink);border-left:3px solid var(--gold);
  background:var(--paper-2);border-radius:0 6px 6px 0;white-space:pre-wrap;
}
table.paexpr td.v.bad{color:#9B1C1C;border-left-color:#9B1C1C;background:#FEF3F2;font-weight:400}
table.paexpr td.v i{color:var(--muted);font-weight:400}