/* SLAI AI Lab batch B tools (Oct 7 2026): team, duo, logo, photo, social. Sits on top of /slai/style.css + /slai/lab/lab.css.
   Strawberry Lemonade AI palette, plus one accent per tool so each page has its own feel inside the brand. */
:root { --sl-red:#D7263D; --sl-red2:#b81d31; --sl-lemon:#FFD23F; --sl-cream:#fffbe6; --sl-mint:#2BB673; --tool:#D7263D; --tool2:#FFD23F; }
body.t-team   { --tool:#D7263D; --tool2:#FFD23F; }
body.t-duo    { --tool:#E84A7F; --tool2:#FFB3C7; }
body.t-logo   { --tool:#2a0a10; --tool2:#FFD23F; }
body.t-photo  { --tool:#1F8A70; --tool2:#BFF0D4; }
body.t-social { --tool:#7B3FE4; --tool2:#FFD23F; }
.kb-back { display:inline-flex; align-items:center; gap:6px; color:var(--tool); font-weight:600; font-size:15px; margin:0 0 10px; }
.kb-back:hover { text-decoration:underline; }
.kb-hero { border-radius:20px; padding:22px 18px; margin:0 0 18px; background:linear-gradient(135deg, color-mix(in srgb, var(--tool2) 45%, #fff) 0%, #fffbe6 70%); border:1px solid var(--line); }
.kb-hero h1 em { color:var(--tool); }
.kb-hero .eyebrow { color:var(--tool); }
.kb-hero .sub { margin-bottom:6px; }
.kb .panel h2 { color:var(--tool); }
.kb .chip.on { background:var(--tool); border-color:var(--tool); }
.kb .labbtn { background:var(--tool); }
.kb .labbtn:hover { filter:brightness(.92); background:var(--tool); }
.kb .labbtn.ghost { background:transparent; color:var(--ink); }
.kb .labbtn.lemon { background:var(--sl-lemon); color:#2a0a10; }
.kb .opt.on { border-color:var(--tool); box-shadow:0 0 0 3px color-mix(in srgb, var(--tool) 22%, transparent); }
.kb-pill { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border-radius:999px; padding:4px 10px; background:var(--tool2); color:#2a0a10; }
.kb-grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.kb-grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
@media (max-width:700px){ .kb-grid3 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .kb-grid2.stack { grid-template-columns:1fr; } }
.kb-field { display:block; font-size:14px; font-weight:600; margin:0 0 6px; }
.kb-field small { font-weight:400; color:var(--muted); }
.kb-stack > * + * { margin-top:12px; }
.kb-out { background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; white-space:pre-wrap; font-size:16px; line-height:1.5; min-height:60px; }
.kb-tags { color:var(--tool); font-weight:600; }
.kb-copy { border:1px solid var(--line); background:var(--bg3); color:var(--ink); border-radius:10px; padding:8px 12px; font:inherit; font-size:14px; cursor:pointer; }
.kb-copy.ok { background:var(--sl-mint); color:#fff; border-color:var(--sl-mint); }
.kb-img { width:100%; aspect-ratio:1/1; object-fit:contain; border-radius:14px; border:1px solid var(--line); background:#fff; display:block; }
.kb-legal { font-size:13px; color:var(--muted); border-left:3px solid var(--tool2); padding:6px 10px; margin:12px 0 0; background:#fff; border-radius:0 8px 8px 0; }
.kb-demo { display:inline-block; margin:0 0 12px; font-size:13px; font-weight:700; color:#2a0a10; background:var(--sl-lemon); border-radius:8px; padding:5px 10px; }
.kb-drop { border:2px dashed var(--line); border-radius:16px; padding:22px 14px; text-align:center; cursor:pointer; background:#fff; }
.kb-drop:hover, .kb-drop.on { border-color:var(--tool); }
.kb-check { display:flex; gap:8px; align-items:flex-start; font-size:14px; color:var(--muted); margin-top:10px; }
.kb-check input { margin-top:4px; }
.kb-pair { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.kb-half { position:absolute; background-repeat:no-repeat; background-size:200% auto; }
.kb-name { position:absolute; display:block; pointer-events:none; }
.kb-table { width:100%; border-collapse:collapse; font-size:14px; }
.kb-table td, .kb-table th { padding:6px 4px; border-bottom:1px solid var(--line); text-align:left; }
.kb-table select { font:inherit; font-size:14px; padding:4px; border-radius:8px; border:1px solid var(--line); background:#fff; }
.kb-left { font-size:13px; color:var(--muted); }
textarea.labinput { resize:vertical; min-height:96px; }
select.labinput { appearance:auto; }