/* SLAI AI Lab Pro Tools (Oct 8 2026) - on top of /slai/style.css + /slai/lab/lab.css */
.back { display:inline-flex; align-items:center; gap:6px; font-size:14px; color:var(--muted); margin-bottom:14px; text-decoration:none; }
.back:hover { color:var(--accent); }
.probadge { display:inline-block; vertical-align:middle; margin-left:8px; background:linear-gradient(90deg,#D7263D,#ff5a6e); color:#fff; font:700 11px/1 "Source Sans 3",sans-serif; letter-spacing:.14em; padding:5px 8px; border-radius:6px; text-transform:uppercase; }
.quota { display:inline-block; margin:0 0 16px; background:var(--bg3); border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-size:14px; font-weight:600; color:var(--ink); }
.quota:empty { display:none; }
.quota.demo { background:#FFD23F; border-color:#f2c200; }
.agree { display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--muted); margin-top:12px; }
.agree input { margin-top:3px; accent-color:var(--accent); width:18px; height:18px; flex:none; }
.prodrow { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.lemonband { height:6px; border-radius:6px; background:linear-gradient(90deg,#D7263D 0 33%,#FFD23F 33% 66%,#3BB273 66%); margin:0 0 18px; max-width:220px; }
.rule { background:#fff3f4; border:1px solid #f6c3ca; border-radius:12px; padding:10px 12px; font-size:14px; color:var(--ink); margin-top:12px; }
.priv { background:#eef8f1; border:1px solid #bfe3c9; border-radius:12px; padding:10px 12px; font-size:14px; color:#1f5a33; margin-top:12px; }
.steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0 0 18px; }
.steps div { background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:10px 12px; font-size:14px; color:var(--muted); }
.steps b { display:block; color:var(--ink); font-family:Oswald,Impact,sans-serif; letter-spacing:.06em; text-transform:uppercase; font-size:13px; }
/* design picker */
.dsgs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.dsg { position:relative; border:2px solid var(--line); border-radius:14px; background:#fff; cursor:pointer; padding:8px; color:var(--muted); font:inherit; font-size:12px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; min-height:120px; justify-content:center; }
.dsg img { width:100%; aspect-ratio:1/1; object-fit:contain; }
.dsg.on { border-color:var(--accent); box-shadow:0 0 0 3px rgba(215,38,61,.18); }
.dsg.up { border-style:dashed; background:var(--bg3); }
.dsg.up i { font-style:normal; font-size:34px; line-height:1; color:var(--accent); }
/* photo upload tile */
.drop { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.drop label.up { display:flex; align-items:center; justify-content:center; text-align:center; width:180px; height:180px; border:2px dashed var(--line); border-radius:16px; background:var(--bg3); cursor:pointer; color:var(--muted); font-size:15px; padding:10px; box-sizing:border-box; overflow:hidden; }
.drop label.up:hover { border-color:var(--accent); }
.drop label.up img { width:100%; height:100%; object-fit:cover; border-radius:10px; }
/* try-on models */
.models { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.model { position:relative; border:2px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; cursor:pointer; padding:0; aspect-ratio:2/3; }
.model img { width:100%; height:100%; object-fit:cover; display:block; }
.model.on { border-color:var(--accent); box-shadow:0 0 0 3px rgba(215,38,61,.18); }
.model.up { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border-style:dashed; background:var(--bg3); color:var(--muted); font-size:13px; text-align:center; padding:8px; box-sizing:border-box; }
.model.up i { font-style:normal; font-size:30px; color:var(--accent); line-height:1; }
/* results */
.hero-out { display:grid; grid-template-columns:minmax(0,420px) 1fr; gap:18px; align-items:start; }
.hero-out .big { border-radius:16px; overflow:hidden; background:var(--bg3); border:1px solid var(--line); aspect-ratio:2/3; }
.hero-out .big img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-out .big.sq { aspect-ratio:1/1; }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.shot { position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--bg3); }
.shot img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.shot .dl { position:absolute; right:10px; bottom:10px; background:rgba(255,255,255,.92); border:0; border-radius:999px; padding:8px 12px; font:600 13px "Source Sans 3",sans-serif; cursor:pointer; color:var(--ink); box-shadow:0 2px 8px rgba(0,0,0,.18); }
.prev { width:120px; height:120px; border-radius:12px; border:1px solid var(--line); background:var(--bg3); object-fit:cover; flex:none; }
/* brand kit */
.kit { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.kit .box { background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; }
.kit h3 { font-family:Oswald,Impact,sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:13px; color:var(--muted); margin:0 0 8px; }
.pal { display:flex; gap:8px; }
.pal button { flex:1; border:0; border-radius:10px; height:64px; cursor:pointer; position:relative; font:600 11px "Source Sans 3",sans-serif; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.5); display:flex; align-items:flex-end; justify-content:center; padding:6px 2px; }
.pal button span { display:block; }
.tag { font-family:Oswald,Impact,sans-serif; font-size:26px; letter-spacing:.02em; line-height:1.15; margin:0; }
.fontdemo b { display:block; font-size:28px; line-height:1.1; margin-bottom:4px; }
.slog { margin:0; padding-left:18px; }
.slog li { margin:4px 0; font-weight:600; }
.logo-out { display:grid; grid-template-columns:minmax(0,280px) 1fr; gap:16px; align-items:start; }
.logo-out .lg { border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#fff; aspect-ratio:1/1; }
.logo-out .lg img { width:100%; height:100%; object-fit:contain; display:block; }
/* 3D */
#view { width:100%; aspect-ratio:1/1; max-height:70vh; border-radius:18px; background:radial-gradient(ellipse at 50% 30%, #fff 0%, #fff3b8 70%, #ffe9a3 100%); border:1px solid var(--line); touch-action:none; cursor:grab; display:block; }
#view:active { cursor:grabbing; }
.vtools { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.words { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin-bottom:14px; }
.words .sl { font-family:Oswald,Impact,sans-serif; text-transform:uppercase; letter-spacing:.04em; font-size:28px; color:var(--accent); margin:0 0 6px; line-height:1.1; }
.words p { margin:0; font-style:italic; color:var(--ink); }
.ex { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.ex button { border:1px solid var(--line); background:var(--bg3); border-radius:999px; padding:6px 12px; font:inherit; font-size:13px; cursor:pointer; color:var(--ink); }
textarea.labinput { min-height:96px; resize:vertical; }
@media (max-width:760px) {
  .lab { padding-top:18px; } .panel { padding:14px; } .labbtn { width:100%; } .row .labbtn, .actions .labbtn { flex:1 1 140px; width:auto; }
  .steps { grid-template-columns:1fr; } .dsgs { grid-template-columns:repeat(3,minmax(0,1fr)); } .models { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hero-out, .kit, .logo-out { grid-template-columns:1fr; } .drop label.up { width:100%; height:220px; } .pal button { height:52px; font-size:10px; }
}