/* Tweet Screenshot Studio — self-contained, scoped under .ss-studio so it
   renders identically on the marketing site (no Tailwind) and the dashboard
   (Tailwind). Never use utility classes inside .ts-card: the card must look
   the same regardless of page chrome, and must survive html-to-image export. */

.ss-studio { --ss-ink:#111827; --ss-mut:#6B7280; --ss-faint:#9CA3AF;
  --ss-line:#E5E7EB; --ss-bg:#F9FAFB; --ss-accent:#2563EB;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ss-ink); box-sizing:border-box; }
.ss-studio *, .ss-studio *::before, .ss-studio *::after { box-sizing:border-box; }

/* minmax(0,1fr) on the preview track: without it the stage's min-content width
   (fixed-width card + frame padding) blows the track out wider than the panel/
   viewport, causing horizontal page scroll on narrow screens. */
.ss-grid { display:grid; grid-template-columns:340px minmax(0,1fr); gap:24px; align-items:start; }
@media (max-width:880px){
  .ss-grid{ grid-template-columns:minmax(0,1fr); }
}

/* ---- Controls panel ---- */
.ss-panel { background:#fff; border:1px solid var(--ss-line); border-radius:14px; padding:20px; }
.ss-section { padding:14px 0; border-top:1px solid var(--ss-line); }
.ss-section:first-child { padding-top:0; border-top:none; }
.ss-section > h4 { margin:0 0 12px; font-size:11px; font-weight:700; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--ss-faint); }
.ss-field { margin-bottom:12px; }
.ss-field:last-child { margin-bottom:0; }
.ss-field > label { display:block; font-size:12.5px; font-weight:600; color:var(--ss-mut); margin-bottom:5px; }
.ss-input, .ss-textarea, .ss-select {
  width:100%; font-size:14px; font-family:inherit; color:var(--ss-ink);
  border:1px solid var(--ss-line); border-radius:9px; padding:9px 11px; background:#fff;
  transition:border-color .15s, box-shadow .15s; }
.ss-textarea { resize:vertical; min-height:84px; line-height:1.5; }
.ss-input:focus, .ss-textarea:focus, .ss-select:focus {
  outline:none; border-color:var(--ss-accent); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.ss-row { display:flex; gap:10px; }
.ss-row > * { flex:1; min-width:0; }
.ss-hint { font-size:11.5px; color:var(--ss-faint); margin-top:5px; line-height:1.4; }

.ss-toggle { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:7px 0; font-size:13.5px; font-weight:500; color:var(--ss-ink); cursor:pointer; }
.ss-toggle input { width:16px; height:16px; accent-color:var(--ss-accent); cursor:pointer; }
.ss-toggle.is-locked { color:var(--ss-faint); cursor:not-allowed; }

.ss-swatches { display:flex; flex-wrap:wrap; gap:8px; }
.ss-swatch { width:30px; height:30px; border-radius:8px; border:2px solid #fff;
  box-shadow:0 0 0 1px var(--ss-line); cursor:pointer; padding:0; }
.ss-swatch.is-active { box-shadow:0 0 0 2px var(--ss-accent); }
.ss-seg { display:inline-flex; background:var(--ss-bg); border:1px solid var(--ss-line);
  border-radius:9px; padding:3px; gap:3px; }
.ss-seg button { border:none; background:none; font:inherit; font-size:12.5px; font-weight:600;
  color:var(--ss-mut); padding:6px 12px; border-radius:7px; cursor:pointer; }
.ss-seg button.is-active { background:#fff; color:var(--ss-ink); box-shadow:0 1px 2px rgba(0,0,0,.08); }

.ss-lock { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:#92400E; background:#FEF3C7; border-radius:5px;
  padding:2px 6px; margin-left:6px; vertical-align:middle; }

/* ---- Buttons ---- */
.ss-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font:inherit; font-size:14px; font-weight:600; border-radius:10px; padding:10px 16px;
  border:1px solid transparent; cursor:pointer; transition:background .15s, box-shadow .15s, border-color .15s; }
.ss-btn-primary { background:var(--ss-accent); color:#fff; }
.ss-btn-primary:hover { background:#1D4ED8; }
.ss-btn-ghost { background:#fff; color:var(--ss-ink); border-color:var(--ss-line); }
.ss-btn-ghost:hover { background:var(--ss-bg); box-shadow:0 1px 2px rgba(0,0,0,.05); }
.ss-btn:disabled { opacity:.55; cursor:not-allowed; }
.ss-btn-row { display:flex; flex-wrap:wrap; gap:10px; }

/* ---- Preview stage ---- */
.ss-stage-wrap { position:sticky; top:16px; }
.ss-stage { display:flex; align-items:center; justify-content:center; padding:28px;
  background:var(--ss-bg); border:1px solid var(--ss-line); border-radius:14px;
  min-height:280px; overflow:auto; }
.ss-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:14px; }
.ss-status { font-size:12.5px; color:var(--ss-mut); min-height:16px; margin-top:8px; }

/* ---- The exportable frame + tweet card ---- */
.ts-frame { padding:var(--ss-pad,40px); display:inline-block; max-width:100%;
  background:#2563EB; background-size:cover; background-position:center; }
.ts-card { width:520px; max-width:78vw; background:#fff; color:#0F1419; border-radius:18px;
  padding:22px 24px; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  box-shadow:0 12px 34px rgba(0,0,0,.16); text-align:left; }
.ts-head { display:flex; align-items:center; gap:12px; }
.ts-avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; flex-shrink:0;
  background:#E5E7EB; }
.ts-id { min-width:0; flex:1; }
.ts-name { display:flex; align-items:center; gap:4px; font-size:16px; font-weight:700;
  line-height:1.2; color:#0F1419; }
.ts-name span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ts-verified { width:18px; height:18px; flex-shrink:0; }
.ts-handle { font-size:14px; color:#536471; line-height:1.3; }
.ts-logo { margin-left:auto; max-height:30px; max-width:120px; object-fit:contain; }
.ts-text { margin:16px 0 0; font-size:21px; line-height:1.45; color:#0F1419; white-space:pre-wrap;
  word-wrap:break-word; }
.ts-text.is-big { font-size:27px; }
.ts-media { margin-top:16px; display:grid; gap:6px; border-radius:16px; overflow:hidden; }
.ts-media.n-1 { grid-template-columns:1fr; }
.ts-media.n-2 { grid-template-columns:1fr 1fr; }
.ts-media.n-3, .ts-media.n-4 { grid-template-columns:1fr 1fr; }
.ts-media img { width:100%; height:100%; object-fit:cover; display:block;
  max-height:280px; background:#E5E7EB; }
.ts-meta { margin-top:18px; padding-top:14px; border-top:1px solid #EFF3F4;
  display:flex; align-items:center; gap:20px; font-size:14px; color:#536471; }
.ts-meta b { color:#0F1419; font-weight:700; }
.ts-date { margin-top:14px; font-size:14px; color:#536471; }
.ts-wm { margin-top:14px; font-size:12px; color:#8899A6; text-align:right; }

/* Dark + dim themes */
.ts-card.theme-dim { background:#15202B; color:#F7F9F9; box-shadow:0 12px 34px rgba(0,0,0,.4); }
.ts-card.theme-dim .ts-name, .ts-card.theme-dim .ts-text { color:#F7F9F9; }
.ts-card.theme-dim .ts-handle, .ts-card.theme-dim .ts-meta, .ts-card.theme-dim .ts-date { color:#8B98A5; }
.ts-card.theme-dim .ts-meta { border-top-color:#38444D; }
.ts-card.theme-dim .ts-meta b { color:#F7F9F9; }
.ts-card.theme-dark { background:#000; color:#E7E9EA; box-shadow:0 12px 34px rgba(0,0,0,.5); }
.ts-card.theme-dark .ts-name, .ts-card.theme-dark .ts-text { color:#E7E9EA; }
.ts-card.theme-dark .ts-handle, .ts-card.theme-dark .ts-meta, .ts-card.theme-dark .ts-date { color:#71767B; }
.ts-card.theme-dark .ts-meta { border-top-color:#2F3336; }
.ts-card.theme-dark .ts-meta b { color:#E7E9EA; }

/* Thread / bulk strip */
.ss-thread-list { display:flex; flex-direction:column; gap:14px; }
.ss-thread-item { display:flex; gap:10px; align-items:flex-start; }
.ss-thread-item .ss-textarea { min-height:60px; }
.ss-thread-rm { flex-shrink:0; width:34px; height:34px; border-radius:8px; border:1px solid var(--ss-line);
  background:#fff; color:var(--ss-mut); cursor:pointer; font-size:18px; line-height:1; }
.ss-thread-rm:hover { background:#FEF2F2; color:#B91C1C; border-color:#FECACA; }

/* Upsell note (free tier) */
.ss-upsell { margin-top:14px; background:#EFF6FF; border:1px solid #BFDBFE; border-radius:12px;
  padding:14px 16px; font-size:13.5px; color:#1E3A8A; line-height:1.5; }
.ss-upsell a { color:#1D4ED8; font-weight:700; text-decoration:none; }
.ss-upsell a:hover { text-decoration:underline; }

/* ---- Responsive overrides ----
   Placed last so these win over the base rules above (media queries add no
   specificity, so source order decides ties against .ss-stage-wrap / .ts-card
   / .ss-stage etc). */
@media (max-width:880px){
  /* Single column: show the live preview ABOVE the controls so you can see what
     you're editing, and drop the sticky — once stacked it's pointless and the
     tall preview would pin over and cover the controls as you scroll. */
  .ss-stage-wrap{ order:-1; position:static; }
}
@media (max-width:560px){
  .ss-panel{ padding:16px; }
  .ss-stage{ padding:14px; min-height:auto; }
  /* Let the frame fill the stage and the card fill the frame, so the preview
     always fits with no internal scroll. Cap the (slider-driven) frame padding
     so the colored border doesn't eat the card on a narrow screen. */
  .ts-frame{ display:block; width:100%; padding:min(var(--ss-pad,40px), 24px); }
  .ts-card{ width:auto; max-width:100%; }
  /* Action buttons fill the row instead of leaving ragged gaps. */
  .ss-toolbar > .ss-btn{ flex:1 1 140px; }
  /* Roomier touch targets. */
  .ss-seg button{ padding:8px 14px; }
  .ss-swatch{ width:34px; height:34px; }
}