/* Static helper workspace: phone-first, copyable, no API dependency. */
.tool-lab{
  --lab-cream:#fffbf4;
  --lab-navy:#1e1b4b;
  --lab-teal:#0d9488;
  --lab-teal-light:#2dd4bf;
  --lab-gold:#e9a323;
  --lab-ink:#221f3d;
  --lab-white:#fff;
  --lab-line:rgba(30,27,75,.14);
  width:min(960px,calc(100% - 32px));
  margin:0 auto;
  padding:30px 0 70px;
  color:var(--lab-ink);
  font-family:inherit;
}

.tool-lab *{ box-sizing:border-box; }

.tool-lab__hero{
  max-width:760px;
  margin:0 auto 22px;
  text-align:center;
}

.tool-lab__eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 12px;
  border-radius:999px;
  background:var(--lab-gold);
  color:var(--lab-navy);
  font-size:.8rem;
  font-weight:800;
}

.tool-lab__hero h1{
  margin:10px 0 8px;
  color:var(--lab-navy);
  font-size:clamp(1.8rem,1.4rem + 1.6vw,2.7rem);
  line-height:1.35;
}

.tool-lab__hero p{
  margin:0;
  font-size:1.05rem;
  font-weight:600;
  line-height:1.85;
}

.tool-lab__back{
  display:inline-flex;
  min-height:42px;
  align-items:center;
  margin-top:15px;
  padding:8px 16px;
  border:2px solid rgba(255,255,255,.92);
  border-radius:999px;
  background:var(--lab-white);
  color:var(--lab-teal);
  font-size:.9rem;
  font-weight:800;
  text-decoration:none;
  box-shadow:3px 4px 10px rgba(30,27,75,.1);
}

.tool-lab__back:focus-visible,
.tool-lab button:focus-visible,
.tool-lab a:focus-visible,
.tool-lab input:focus-visible,
.tool-lab textarea:focus-visible,
.tool-lab select:focus-visible{
  outline:3px solid var(--lab-gold);
  outline-offset:3px;
}

.tool-lab__panel{
  padding:24px;
  border:2px solid rgba(255,255,255,.94);
  border-radius:24px;
  background:rgba(255,255,255,.84);
  box-shadow:6px 8px 18px rgba(30,27,75,.12),-4px -4px 12px rgba(255,255,255,.68);
}

.tool-lab__panel + .tool-lab__panel{ margin-top:18px; }

.tool-lab__panel h2{
  margin:0 0 6px;
  color:var(--lab-navy);
  font-size:1.3rem;
  line-height:1.5;
}

.tool-lab__panel > p{
  margin:0 0 17px;
  font-weight:600;
  line-height:1.75;
}

.tool-lab__form{
  display:grid;
  gap:14px;
}

.tool-lab__field{
  display:grid;
  gap:6px;
}

.tool-lab__field label,
.tool-lab__legend{
  color:var(--lab-navy);
  font-size:.98rem;
  font-weight:800;
  line-height:1.55;
}

.tool-lab__field small,
.tool-lab__hint{
  color:var(--lab-teal);
  font-size:.82rem;
  font-weight:700;
  line-height:1.55;
}

.tool-lab input,
.tool-lab textarea,
.tool-lab select{
  width:100%;
  min-height:48px;
  padding:11px 13px;
  border:2px solid var(--lab-line);
  border-radius:13px;
  background:var(--lab-cream);
  color:var(--lab-ink);
  font:inherit;
  font-size:1rem;
  line-height:1.65;
}

.tool-lab textarea{
  min-height:112px;
  resize:vertical;
}

.tool-lab input::placeholder,
.tool-lab textarea::placeholder{ color:rgba(34,31,61,.55); }

.tool-lab__two,
.tool-lab__three{
  display:grid;
  gap:14px;
}

.tool-lab__two{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.tool-lab__three{ grid-template-columns:repeat(3,minmax(0,1fr)); }

.tool-lab__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:2px;
}

.tool-lab__button{
  min-height:48px;
  padding:10px 18px;
  border:0;
  border-radius:13px;
  background:linear-gradient(145deg,var(--lab-teal-light),var(--lab-teal));
  color:var(--lab-white);
  font:inherit;
  font-size:.98rem;
  font-weight:800;
  cursor:pointer;
  box-shadow:4px 5px 12px rgba(13,148,136,.2);
}

.tool-lab__button--quiet{
  background:var(--lab-white);
  color:var(--lab-navy);
  box-shadow:3px 4px 10px rgba(30,27,75,.1);
}

.tool-lab__button:active{ transform:translateY(2px); }

.tool-lab__notice{
  margin:0 0 16px;
  padding:12px 14px;
  border-inline-start:5px solid var(--lab-gold);
  border-radius:10px;
  background:rgba(233,163,35,.12);
  color:var(--lab-navy);
  font-size:.9rem;
  font-weight:700;
  line-height:1.7;
}

.tool-lab__callout{
  margin:0 0 16px;
  padding:14px 16px;
  border:1px solid rgba(61,56,120,.16);
  border-radius:12px;
  background:rgba(61,56,120,.06);
  color:var(--lab-navy);
  line-height:1.8;
}

.tool-lab__callout ol{ margin:8px 0 0; padding-inline-start:24px; }

.tool-lab__output-wrap{ margin-top:18px; }

.tool-lab__output-title{
  margin:0 0 8px;
  color:var(--lab-navy);
  font-size:1.08rem;
  font-weight:800;
}

.tool-lab__output{
  min-height:150px;
  margin:0;
  padding:16px;
  overflow:auto;
  border:2px solid rgba(13,148,136,.18);
  border-radius:14px;
  background:#f6fffd;
  color:var(--lab-ink);
  white-space:pre-wrap;
  font:inherit;
  font-size:.96rem;
  line-height:1.8;
  direction:rtl;
  text-align:start;
}

.tool-lab__status{
  display:block;
  min-height:1.6em;
  margin-top:8px;
  color:var(--lab-teal);
  font-size:.86rem;
  font-weight:700;
}

.tool-lab__steps{
  display:grid;
  gap:9px;
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:lab-step;
}

.tool-lab__steps li{
  display:flex;
  align-items:flex-start;
  gap:9px;
  line-height:1.7;
}

.tool-lab__steps li::before{
  counter-increment:lab-step;
  content:counter(lab-step);
  display:inline-grid;
  width:26px;
  height:26px;
  flex:0 0 26px;
  place-items:center;
  border-radius:8px;
  background:var(--lab-gold);
  color:var(--lab-navy);
  font-size:.82rem;
  font-weight:800;
}

.tool-markmap{
  min-height:360px;
  margin-top:15px;
  overflow:hidden;
  border:2px solid rgba(13,148,136,.18);
  border-radius:16px;
  background:#f6fffd;
}

.tool-markmap .markmap{
  min-height:360px;
}

.tool-markmap .markmap > svg{
  width:100%;
  min-height:360px;
}

.tool-markmap__fallback{
  margin:0;
  padding:18px;
  white-space:pre-wrap;
  font:inherit;
  line-height:1.8;
}

.tool-lab__table-wrap{
  overflow:auto;
  margin-top:14px;
  border:2px solid rgba(13,148,136,.18);
  border-radius:14px;
}

.tool-lab__table{
  width:100%;
  min-width:620px;
  border-collapse:collapse;
  background:var(--lab-white);
}

.tool-lab__table th,
.tool-lab__table td{
  padding:11px 12px;
  border-bottom:1px solid var(--lab-line);
  text-align:start;
  vertical-align:top;
  line-height:1.65;
}

.tool-lab__table th{
  background:rgba(13,148,136,.08);
  color:var(--lab-navy);
  font-weight:800;
}

.tool-lab__print-note{
  margin-top:14px;
  color:var(--lab-teal);
  font-size:.86rem;
  font-weight:700;
  line-height:1.6;
}

@media (max-width:700px){
  .tool-lab{ width:min(100% - 20px,960px); padding-top:22px; }
  .tool-lab__panel{ padding:18px 15px; border-radius:20px; }
  .tool-lab__two,
  .tool-lab__three{ grid-template-columns:1fr; }
  .tool-lab__hero h1{ font-size:1.85rem; }
  .tool-lab__hero p{ font-size:.98rem; }
  .tool-markmap,
  .tool-markmap .markmap,
  .tool-markmap .markmap > svg{ min-height:300px; }
}

@media print{
  .tool-lab__back,
  .tool-lab__actions,
  .tool-lab__hint,
  .tool-lab__status{ display:none; }
  .tool-lab{ width:100%; padding:0; }
  .tool-lab__panel{ box-shadow:none; }
}

/* Recommender result cards */
.tool-recommender__source{
  display:inline-flex;
  min-height:28px;
  align-items:center;
  padding:4px 11px;
  border-radius:999px;
  background:rgba(13,148,136,.12);
  color:var(--lab-teal);
  font-size:.8rem;
  font-weight:800;
}

.tool-recommender__result > h2{
  margin:12px 0 15px;
  color:var(--lab-navy);
  font-size:1.35rem;
}

.tool-recommender__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.tool-recommender__tool{
  display:flex;
  min-width:0;
  flex-direction:column;
  padding:17px;
  border:2px solid rgba(13,148,136,.18);
  border-radius:17px;
  background:#f6fffd;
}

.tool-recommender__tool--alt{ background:#fffaf0; border-color:rgba(233,163,35,.28); }

.tool-recommender__label{
  color:var(--lab-teal);
  font-size:.8rem;
  font-weight:800;
}

.tool-recommender__tool h3{
  margin:6px 0 9px;
  color:var(--lab-navy);
  font-size:1.15rem;
  line-height:1.5;
}

.tool-recommender__badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  min-height:28px;
}

.tool-recommender__badge{
  display:inline-flex;
  min-height:25px;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  background:var(--lab-white);
  color:var(--lab-navy);
  font-size:.74rem;
  font-weight:800;
}

.tool-recommender__tool a{
  display:inline-flex;
  min-height:42px;
  align-items:center;
  justify-content:center;
  margin-top:14px;
  padding:8px 12px;
  border-radius:11px;
  background:var(--lab-teal);
  color:var(--lab-white);
  font-size:.9rem;
  font-weight:800;
  text-decoration:none;
}

.tool-recommender__tool p{
  margin:10px 0 0;
  color:var(--lab-ink);
  font-size:.86rem;
  font-weight:600;
  line-height:1.65;
}

.tool-recommender__answer{
  margin-top:17px;
  padding-top:15px;
  border-top:1px solid var(--lab-line);
}

.tool-recommender__answer h3{
  margin:0 0 7px;
  color:var(--lab-navy);
  font-size:1rem;
}

.tool-recommender__answer p{ margin:0; font-weight:600; line-height:1.75; }

.tool-recommender__answer pre{
  margin:0;
  padding:12px;
  overflow:auto;
  border-radius:11px;
  background:var(--lab-cream);
  white-space:pre-wrap;
  font:inherit;
  font-size:.92rem;
  line-height:1.75;
}

@media (max-width:700px){
  .tool-recommender__grid{ grid-template-columns:1fr; }
}