/* ==========================================================================
   VidSpark AI — Tool Page Shell (shared 2-column layout for AI tool pages)
   Used by: tiktok-seo.html, and every future standalone tool page (SEO
   YouTube, générateur de titres, générateur de descriptions, etc.).
   Pairs with js/tool-page.js (ToolPage.mount) which injects the topbar +
   grid skeleton and leaves #tpMain / #tpSide as plain containers — the
   page keeps 100% ownership of its own business logic and markup inside
   those two slots.
   Reuses the --shell-* design tokens from app-shell.css so every tool page
   shares the same visual identity as the dashboard/account/billing shell.
   Breakpoints: ≥1280px = 2 columns (main ~70% / sidebar ~30%, sidebar
   sticky) · 768–1279px = 1 column, sidebar cards become a 2-col mini-grid
   below the form · <768px = 1 column, everything stacks full width.
   ========================================================================== */

.tp-topbar, .tp-topbar *,
.tp-page, .tp-page *{ box-sizing:border-box; }

/* ── Topbar ── */
.tp-topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 20px; background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--shell-b1, rgba(255,255,255,.06));
}
.tp-brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.tp-brand .lg{
  width:32px; height:32px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(135deg,var(--shell-accent,#F2900F),var(--shell-accent-2,#ff7a18));
  display:flex; align-items:center; justify-content:center; color:#0b0f19; font-size:16px; font-weight:900;
}
.tp-brand .tx{ min-width:0; }
.tp-brand .nm{ font-weight:800; font-size:14.5px; color:var(--shell-text,#211D16); white-space:nowrap; }
.tp-brand .pg{ font-size:11.5px; color:var(--shell-muted,#8b92a7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tp-back{
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
  background:var(--shell-s2,#FFFFFF); border:1px solid var(--shell-b2,rgba(255,255,255,.10));
  color:var(--shell-text,#eaecf3); font-weight:700; font-size:13px;
  padding:8px 14px; border-radius:10px; text-decoration:none; transition:border-color .15s, color .15s;
}
.tp-back:hover{ border-color:var(--shell-accent-line,rgba(242,144,15,.32)); color:var(--shell-accent-l,#ffb85c); }

/* ── Page container + grid ── */
.tp-page{
  max-width:1560px; margin:0 auto;
  padding:28px clamp(16px,3vw,40px) 90px;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--shell-text,#eaecf3);
}
.tp-head{ margin-bottom:24px; }
.tp-head h1{ font-size:25px; font-weight:800; margin-bottom:5px; display:flex; align-items:center; gap:10px; }
.tp-head .sub{ color:var(--shell-muted,#8b92a7); font-size:14px; }
.tp-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.tp-meta-item{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--shell-s2,#FFFFFF); border:1px solid var(--shell-b1,rgba(255,255,255,.06));
  border-radius:20px; padding:6px 12px; font-size:12px; font-weight:600; color:var(--shell-muted,#8b92a7);
}

.tp-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:start; }
.tp-main{ min-width:0; }

/* ── Sidebar cards (generic — content is supplied per page) ── */
.tp-side{ display:flex; flex-direction:column; gap:16px; }
.tp-card{
  background:var(--shell-s2,#FFFFFF); border:1px solid var(--shell-b1,rgba(255,255,255,.06));
  border-radius:var(--shell-radius,16px); padding:17px 18px;
}
.tp-card-h{ display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.tp-card-h .ic{
  width:28px; height:28px; border-radius:8px; flex-shrink:0; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--shell-accent-soft,rgba(242,144,15,.12)); color:var(--shell-accent-l,#ffb85c);
}
.tp-card-h .tt{ font-weight:800; font-size:13.5px; }
.tp-card-b{ font-size:13px; color:var(--shell-muted,#8b92a7); line-height:1.6; }
.tp-card-b p+p{ margin-top:8px; }
.tp-card-b a{ color:var(--shell-accent-l,#ffb85c); text-decoration:none; font-weight:700; }
.tp-card-b a:hover{ text-decoration:underline; }
.tp-card ul{ list-style:none; margin:0; padding:0; }
.tp-card li{ padding:6px 0; border-top:1px solid var(--shell-b1,rgba(255,255,255,.06)); font-size:13px; color:var(--shell-text,#eaecf3); }
.tp-card li:first-child{ border-top:none; padding-top:0; }
.tp-card li a{ color:inherit; text-decoration:none; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tp-card li a:hover{ color:var(--shell-accent-l,#ffb85c); }
.tp-empty-hint{ font-size:12.5px; color:var(--shell-faint,#5b6276); font-style:italic; }
.tp-stat-row{ display:flex; align-items:baseline; justify-content:space-between; padding:6px 0; }
.tp-stat-row .lb{ font-size:12.5px; color:var(--shell-muted,#8b92a7); }
.tp-stat-row .vl{ font-size:16px; font-weight:800; color:var(--shell-text,#211D16); }
.tp-card-b .tag-wrap{ display:flex; flex-wrap:wrap; }
.tp-card-b .tag{
  display:inline-block; background:rgba(0,0,0,.035); border:1px solid var(--shell-b2,rgba(0,0,0,.10));
  color:var(--shell-text,#eaecf3); border-radius:14px; padding:4px 10px; font-size:11.5px; font-weight:600; margin:0 6px 6px 0;
}

/* ≥1280px: real 2-column layout, sidebar sticky, main column takes most of the width */
@media (min-width:1280px){
  .tp-page{ max-width:1680px; }
  .tp-grid{ grid-template-columns:minmax(0,1fr) 400px; gap:32px; }
  .tp-side{ position:sticky; top:84px; max-height:calc(100vh - 100px); overflow-y:auto; }
}

/* 768–1279px: 1 column, sidebar cards become a compact 2-col grid under the form */
@media (min-width:768px) and (max-width:1279.98px){
  .tp-side{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
}

/* <768px: everything full width, comfortable stacking */
@media (max-width:767.98px){
  .tp-page{ padding:20px 14px 70px; }
  .tp-topbar{ padding:12px 14px; gap:8px; }
  .tp-brand .pg{ display:none; }
  .tp-head h1{ font-size:21px; }
}

/* <480px: topbar is tight (logo + lang selector + back button) — icon-only brand/back */
@media (max-width:479.98px){
  .tp-brand .tx{ display:none; }
  .tp-back span{ display:none; }
  .tp-back{ padding:8px 10px; }
  #vsLangFloat select{ max-width:88px !important; }
}

/* ==========================================================================
   Generic AI-tool primitives — form controls, result cards, chips, tabs…
   Scoped to .tp-main so they never leak into the rest of the site. Every
   future tool page (SEO YouTube, générateur de titres, …) reuses this exact
   markup/class vocabulary, so building a new tool page = new #tpMain
   content only, no new CSS to write.
   Local custom properties map to the shared --shell-* tokens so colors
   stay consistent across the whole site while keeping the short variable
   names the original tiktok-seo markup already used (--s1, --orange, …).
   ========================================================================== */
.tp-main{
  --s1: var(--shell-s2,#FFFFFF); --s2:var(--shell-bg,#FBF8F3); --b1:var(--shell-b1,rgba(0,0,0,.06)); --b2:var(--shell-b2,rgba(0,0,0,.10));
  --text:var(--shell-text,#211D16); --muted:var(--shell-muted,#756D5E);
  --orange:var(--shell-accent,#F2900F); --orange-d:var(--shell-accent-2,#E8830A);
  --green:var(--shell-green,#167A45); --red:var(--shell-red,#C23B22); --purple:#7C3AED;
}
.tp-main a{ color:var(--orange); text-decoration:none; }
.tp-main button{ cursor:pointer; font-family:inherit; }

/* Tab nav — underline style (modern app nav, not pill buttons) */
.tp-main .tools{
  display:flex; flex-wrap:nowrap; overflow-x:auto; gap:2px; margin:0;
  padding:14px 16px 0; border-bottom:1px solid var(--b1); -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.tp-main .tools::-webkit-scrollbar{ display:none; }
.tp-main .tool{
  background:none; border:none; border-radius:0; color:var(--muted);
  padding:10px 14px 12px; font-size:13.5px; font-weight:700; white-space:nowrap; flex-shrink:0;
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s ease, border-color .15s ease;
}
.tp-main .tool:hover{ color:var(--text); }
.tp-main .tool.active{ background:none; color:var(--orange); border-color:var(--orange); }

/* Work card ("panel"): tabs header + body, single elevated surface */
.tp-main .tp-panel{
  background:var(--s1); border:1px solid var(--b1); border-radius:16px;
  margin-bottom:20px; position:relative; overflow:hidden;
}
.tp-main .tp-panel::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--orange),var(--orange-d));
}
.tp-main .tp-panel-body{ padding:20px 22px 22px; }
.tp-main .tp-form-head{ margin-bottom:14px; }
.tp-main .tp-form-title{ font-size:14.5px; font-weight:800; color:var(--text); }
.tp-main .tp-form-sub{ font-size:12px; color:var(--muted); margin-top:3px; }
.tp-main .tp-divider{ height:1px; background:var(--b1); margin:16px 0 12px; }

.tp-main .card{ background:var(--s1); border:1px solid var(--b1); border-radius:14px; padding:18px; margin-bottom:16px; }
.tp-main label{ display:block; font-size:12px; color:var(--muted); margin:10px 0 5px; text-transform:uppercase; letter-spacing:.4px; }
.tp-main .tp-form-fields label:first-child{ margin-top:0; }
.tp-main input, .tp-main select, .tp-main textarea{ width:100%; background:var(--s2); border:1px solid var(--b2); border-radius:9px; padding:11px; color:var(--text); font-size:14px; font-family:inherit; }
.tp-main textarea{ resize:vertical; min-height:60px; }
.tp-main .row{ display:flex; gap:12px; flex-wrap:wrap; }
.tp-main .row>div{ flex:1; min-width:160px; }
.tp-main .btn{ background:var(--orange); color:#1a1200; border:none; border-radius:10px; padding:13px 20px; font-weight:800; font-size:15px; width:100%; margin-top:0; transition:transform .12s ease, background .15s ease; }
.tp-main .btn:hover{ background:var(--orange-d); color:#1a1200; }
.tp-main .btn:active{ transform:scale(.99); }
.tp-main .btn:disabled{ opacity:.6; cursor:not-allowed; }

/* Permanent results zone — dashed empty state before the first generation */
.tp-main #out{ margin-top:18px; }
.tp-main .tp-out-empty{
  text-align:center; padding:44px 20px; background:var(--s1); border:1.5px dashed var(--b2);
  border-radius:16px; color:var(--muted);
}
.tp-main .tp-out-empty .ic{ font-size:32px; margin-bottom:12px; }
.tp-main .tp-out-empty .tt{ font-size:15px; font-weight:800; color:var(--text); margin-bottom:5px; }
.tp-main .tp-out-empty .sb{ font-size:12.5px; margin-bottom:16px; }
.tp-main .tp-out-empty .list{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; max-width:440px; margin:0 auto; }
.tp-main .btn-mini{ background:var(--s2); border:1px solid var(--b2); color:var(--muted); border-radius:7px; padding:4px 10px; font-size:12px; font-weight:700; }
.tp-main .btn-mini:hover{ color:var(--text); border-color:var(--orange); }
.tp-main .sec{ margin-bottom:20px; }
.tp-main .sec h3{ font-size:15px; margin-bottom:10px; }
.tp-main .cap{ background:var(--s2); border:1px solid var(--b2); border-radius:10px; padding:14px; line-height:1.6; font-size:15px; white-space:pre-wrap; }
.tp-main .chips{ display:flex; flex-wrap:wrap; gap:7px; }
.tp-main .chip{ background:rgba(242,144,15,.12); color:var(--orange-d); border:1px solid rgba(242,144,15,.3); border-radius:20px; padding:5px 12px; font-size:13px; }
.tp-main .chip.k{ background:var(--s2); color:var(--text); border-color:var(--b2); }
.tp-main .chip.p{ background:rgba(124,58,237,.10); color:var(--purple); border-color:rgba(124,58,237,.3); }
.tp-main .htcat{ margin-bottom:12px; }
.tp-main .htcat .lbl{ font-size:11px; color:var(--muted); text-transform:uppercase; margin-bottom:6px; }
.tp-main li{ list-style:none; }
.tp-main .item{ background:var(--s2); border:1px solid var(--b2); border-radius:10px; padding:12px; margin-bottom:8px; }
.tp-main .item.best{ border-color:var(--green); }
.tp-main .badge{ display:inline-block; background:var(--b1); color:var(--muted); border-radius:12px; padding:2px 9px; font-size:11px; font-weight:700; margin-top:4px; }
.tp-main .score{ float:right; font-weight:800; }
.tp-main .step{ border-left:3px solid var(--orange); padding:6px 0 6px 12px; margin-bottom:10px; }
.tp-main .step .p{ font-size:12px; color:var(--orange); font-weight:800; text-transform:uppercase; }
.tp-main .muted{ color:var(--muted); }
.tp-main .empty, .tp-main .err{ text-align:center; padding:36px 16px; color:var(--muted); }
.tp-main .err{ color:var(--red); }
.tp-main .spin{ display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.3); border-top-color:#1a1200; border-radius:50%; animation:tpSpin .7s linear infinite; vertical-align:-3px; }
@keyframes tpSpin{ to{ transform:rotate(360deg); } }
.tp-main .hd{ display:flex; justify-content:space-between; align-items:center; }