/* Elinom AI Design Studio — mobile-first workspace */

:root {
  --ads-bg: #0b0b14;
  --ads-surface: #141422;
  --ads-card: #1c1c2e;
  --ads-line: rgba(255, 255, 255, 0.08);
  --ads-text: #f8fafc;
  --ads-muted: #94a3b8;
  --ads-indigo: #6366f1;
  --ads-amber: #f59e0b;
  --ads-rose: #fb7185;
  --ads-teal: #14b8a6;
  --ads-focus: #a5b4fc;
  --ads-radius: 18px;
  --ads-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.ads-body {
  font-family: Inter, system-ui, sans-serif;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, 0.22), transparent 50%),
    radial-gradient(900px 500px at 110% 0%, rgba(245, 158, 11, 0.16), transparent 46%),
    var(--ads-bg);
  color: var(--ads-text);
}

.ads-app { max-width: 1280px; margin: 0 auto; padding: 1rem 1rem 4rem; }
#ads-root { min-height: 12rem; }
.ads-topbar {
  display: flex; align-items: stretch; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.25rem;
}
.ads-brand { display: flex; flex-direction: column; gap: 0.15rem; }
.ads-brand strong { font-size: 1.05rem; letter-spacing: 0.04em; }
.ads-brand span { color: var(--ads-muted); font-size: 0.85rem; }
.ads-nav { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ads-nav button, .ads-btn, .ads-chip, .ads-card-btn {
  border: 1px solid var(--ads-line); background: rgba(255,255,255,0.04);
  color: var(--ads-text); border-radius: 999px; padding: 0.55rem 0.95rem;
  font: inherit; cursor: pointer;
}
.ads-nav button[aria-current="page"], .ads-chip.is-selected, .ads-btn-primary {
  background: linear-gradient(135deg, var(--ads-indigo), #4338ca);
  border-color: transparent;
}
.ads-btn-primary { font-weight: 700; }
.ads-btn-ghost { background: transparent; }
.ads-btn:focus-visible, .ads-nav button:focus-visible, .ads-chip:focus-visible, .ads-field:focus-visible {
  outline: 3px solid var(--ads-focus); outline-offset: 2px;
}

.ads-hero { margin: 0 0 1.5rem; }
.ads-hero h1 { font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.1; margin: 0 0 0.6rem; }
.ads-hero p { color: var(--ads-muted); max-width: 40rem; }

.ads-workspaces {
  display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem;
}
.ads-workspace {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid var(--ads-line); border-radius: var(--ads-radius);
  padding: 1.25rem; min-height: 180px; text-align: left; box-shadow: var(--ads-shadow);
  color: inherit; width: 100%;
}
.ads-workspace h2 { margin: 0 0 0.4rem; font-size: 1.2rem; }
.ads-workspace p { margin: 0 0 1rem; color: var(--ads-muted); }
.ads-workspace-graphics { border-top: 3px solid var(--ads-indigo); }
.ads-workspace-fashion { border-top: 3px solid var(--ads-rose); }
.ads-workspace-interior { border-top: 3px solid var(--ads-teal); }
.ads-workspace-film { border-top: 3px solid #f472b6; }
.ads-workspace-video { border-top: 3px solid #38bdf8; }
.ads-workspace-voice { border-top: 3px solid #f472b6; }
.ads-row { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; margin-top: 0.75rem; }
.ads-help { color: var(--ads-muted); font-size: 0.9rem; }
.ads-voice-script { min-height: 8rem; }
.ads-voice-timeline { display: grid; gap: 0.75rem; }
.ads-voice-segment { border: 1px solid var(--ads-line); border-radius: 14px; padding: 0.85rem; background: var(--ads-surface); }
.ads-voice-segment.is-stale { border-color: var(--ads-amber); }
.ads-voice-segment audio { width: 100%; margin-top: 0.5rem; }
.ads-film-concept.is-selected { border-color: rgba(244, 114, 182, 0.55); }
@media (max-width: 719px) {
  .ads-film-desktop-only { display: none; }
}
.ads-workspace-training { border-top: 3px solid #fbbf24; }
.ads-workspace-screen-demo { border-top: 3px solid #34d399; }
.ads-workspace-brand { border-top: 3px solid #a78bfa; }
.ads-workspace-templates { border-top: 3px solid #fb7185; }
.ads-workspace-intelligence { border-top: 3px solid #22d3ee; }
.ads-workspace-social { border-top: 3px solid #60a5fa; }
.ads-workspace-distribution { border-top: 3px solid #c084fc; }
.ads-workspace-analytics { border-top: 3px solid #4ade80; }
.ads-metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.ads-metric { background: var(--ads-surface); border: 1px solid var(--ads-line); border-radius: 14px; padding: 0.85rem; }
.ads-metric strong { display: block; font-size: 1.25rem; }
.ads-metric span { color: var(--ads-muted); font-size: 0.8rem; }
.ads-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ads-table th, .ads-table td { text-align: left; padding: 0.45rem 0.35rem; border-bottom: 1px solid var(--ads-line); vertical-align: top; }
.ads-table th { color: var(--ads-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.ads-hub-links { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.ads-badge { display: inline-block; border-radius: 999px; padding: 0.15rem 0.55rem; font-size: 0.75rem; background: rgba(255,255,255,0.08); }
.ads-badge-neg { background: rgba(251, 113, 133, 0.18); }
.ads-badge-pos { background: rgba(52, 211, 153, 0.18); }
.ads-check { display: flex; align-items: center; gap: 0.55rem; font-size: 0.92rem; }
.ads-rtl { direction: rtl; text-align: right; }
.ads-scene p { color: var(--ads-muted); font-size: 0.9rem; }

.ads-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.ads-panel {
  background: var(--ads-card); border: 1px solid var(--ads-line);
  border-radius: var(--ads-radius); padding: 1rem 1.1rem;
}
.ads-panel h3 { margin: 0 0 0.75rem; font-size: 1rem; }
.ads-thumb-list { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ads-thumb {
  background: var(--ads-surface); border-radius: 14px; overflow: hidden;
  border: 1px solid var(--ads-line); min-height: 110px; cursor: pointer; padding: 0;
  color: inherit; text-align: left;
}
.ads-thumb img, .ads-canvas img { width: 100%; height: auto; display: block; background: #0f172a; }
.ads-thumb span, .ads-muted { color: var(--ads-muted); font-size: 0.82rem; }

.ads-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ads-form { display: grid; gap: 0.85rem; }
.ads-field, select.ads-field, textarea.ads-field {
  width: 100%; border-radius: 12px; border: 1px solid var(--ads-line);
  background: #0f1020; color: var(--ads-text); padding: 0.7rem 0.8rem; font: inherit;
}
.ads-label { display: grid; gap: 0.35rem; font-size: 0.9rem; }
.ads-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.ads-progress { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ads-progress span {
  width: 8px; height: 8px; border-radius: 50%; background: #334155;
}
.ads-progress span.is-on { background: var(--ads-amber); }

.ads-layout { display: grid; gap: 1rem; }
.ads-canvas {
  background: #080814; border-radius: var(--ads-radius); min-height: 280px;
  border: 1px solid var(--ads-line); overflow: hidden;
}
.ads-spec { font-size: 0.9rem; color: #e2e8f0; }
.ads-spec dt { color: var(--ads-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.ads-spec dd { margin: 0 0 0.65rem; }
.ads-ad {
  border: 1px dashed rgba(245, 158, 11, 0.45); border-radius: 12px; padding: 0.7rem;
  font-size: 0.85rem;
}
.ads-ad strong { color: var(--ads-amber); }
.ads-workspace-cta {
  display: inline-flex; margin-top: auto; padding: 0.55rem 0.95rem;
  border-radius: 999px; background: linear-gradient(135deg, var(--ads-indigo), #4338ca);
  color: #fff; font-weight: 700; font-size: 0.9rem;
}
.ads-sample-row { margin-bottom: 1rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--ads-line); }
.ads-empty-card {
  display: grid; gap: 0.75rem; padding: 0.85rem 0; color: var(--ads-muted);
}
.ads-empty-card .ads-btn { justify-self: start; }
.ads-pro-card .ads-actions,
.ads-quote-card .ads-actions,
.ads-quote-form .ads-actions { margin-top: 0.75rem; }
.ads-quote-form { margin-top: 0.85rem; }
.ads-product h4 { margin: 0 0 0.35rem; font-size: 0.95rem; }
.ads-status { font-size: 0.85rem; color: var(--ads-muted); }
.ads-banner {
  background: rgba(99, 102, 241, 0.12); border: 1px solid rgba(99, 102, 241, 0.28);
  border-radius: 14px; padding: 0.8rem 1rem; margin-bottom: 1rem;
}
.ads-empty { color: var(--ads-muted); padding: 1rem 0; }
.ads-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.ads-toast {
  position: fixed; bottom: 1rem; right: 1rem; background: #111827; color: #fff;
  padding: 0.7rem 1rem; border-radius: 12px; z-index: 20;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
@media (max-width: 719px) {
  .ads-voice-desktop-only { display: none; }
}
@media (min-width: 720px) {
  .ads-workspaces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ads-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ads-layout { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr); }
  .ads-app { padding: 1.5rem 1.5rem 5rem; }
  .ads-metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .ads-thumb-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ads-pipeline {
  display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; padding: 0; margin: 0 0 1rem;
}
.ads-pipeline li {
  font-size: 0.72rem; text-transform: capitalize; padding: 0.25rem 0.55rem;
  border-radius: 999px; border: 1px solid var(--ads-line); color: var(--ads-muted);
}
.ads-pipeline li.is-on { color: var(--ads-text); border-color: var(--ads-indigo); background: rgba(99,102,241,0.16); }
.ads-banner-info { border-color: rgba(20,184,166,0.35); background: rgba(20,184,166,0.1); }
.ads-fashion-grid, .ads-fit-split, .ads-measure-grid {
  display: grid; gap: 1rem;
}
.ads-measure-grid { grid-template-columns: 1fr 1fr; }
.ads-pattern-svg { overflow: auto; background: #0b0b14; border-radius: 12px; margin-bottom: 0.75rem; }
.ads-fit-physics, .ads-fit-ai, .ads-visual-layer, .ads-fashion-pipeline section {
  border: 1px solid var(--ads-line); border-radius: var(--ads-radius); padding: 0.9rem;
}
.ads-fit-physics { border-color: rgba(245,158,11,0.35); }
.ads-fit-ai { border-color: rgba(99,102,241,0.35); }
.ads-visual-img { max-width: 180px; border-radius: 12px; display: block; margin: 0.5rem 0; }
.ads-fashion-pipeline h4 { margin: 0 0 0.5rem; }
.ads-desktop-only { display: none; }
@media (max-width: 719px) {
  .ads-pattern-cad .ads-pattern-svg { max-height: 120px; }
  .ads-measure-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 720px) {
  .ads-fashion-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ads-fit-split { grid-template-columns: 1fr 1fr; }
  .ads-desktop-only { display: block; }
}

/* Graphic Design workspace (CorelDRAW / Photoshop inspired) */
.ads-gfx-studio { display: flex; flex-direction: column; gap: 16px; }
.ads-gfx-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; }
.ads-gfx-header h1 { margin: 0 0 6px; font-size: 1.6rem; }
.ads-gfx-header p { margin: 0; color: #64748b; max-width: 44rem; }
.ads-gfx-mode-toggle, .ads-gfx-actions, .ads-gfx-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.ads-gfx-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; justify-content: space-between; }
.ads-gfx-title-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; width: min(100%, 260px); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
.ads-gfx-layout { display: grid; grid-template-columns: minmax(200px, 240px) minmax(0, 1fr) minmax(200px, 260px); gap: 16px; }
.ads-gfx-side, .ads-gfx-stage { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 14px; }
.ads-gfx-side h3 { margin: 0 0 10px; font-size: .95rem; }
.ads-gfx-tool.is-active, .ads-btn.is-active { outline: 2px solid #2563eb; }
.ads-gfx-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 420px; background: linear-gradient(180deg, #f8fafc, #eef2ff); }
.ads-gfx-artboard { position: relative; overflow: hidden; box-shadow: 0 18px 40px rgba(15, 23, 42, .12); border-radius: 8px; }
.ads-gfx-layer { position: absolute; box-sizing: border-box; }
.ads-gfx-text { white-space: pre-wrap; line-height: 1.15; }
.ads-gfx-ellipse { border-radius: 999px; }
.ads-gfx-layers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ads-gfx-layers li { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.ads-gfx-layers li.is-selected button:first-child { font-weight: 700; color: #1d4ed8; }
.ads-gfx-templates, .ads-gfx-library { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow: auto; }
.ads-gfx-template, .ads-gfx-library-item { text-align: left; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px; background: #f8fafc; cursor: pointer; }
.ads-gfx-template strong, .ads-gfx-library-item strong { display: block; margin-bottom: 4px; }
.ads-gfx-template span, .ads-gfx-library-item span, .ads-gfx-template em { display: block; color: #64748b; font-size: 12px; font-style: normal; }
.ads-gfx-import-label { cursor: pointer; display: inline-flex; align-items: center; }
.ads-nav button[aria-current="page"] { background: #111827; color: #fff; }
@media (max-width: 1100px) {
  .ads-gfx-layout { grid-template-columns: 1fr; }
}

/* Graphic Design — high-contrast tools on dark studio chrome */
.ads-gfx-studio { color: #e2e8f0; }
.ads-gfx-header h1 { color: #f8fafc; }
.ads-gfx-header p, .ads-gfx-title-field, .ads-gfx-menubar, .ads-gfx-side h3 { color: #cbd5e1; }
.ads-gfx-side, .ads-gfx-stage {
  background: #111827;
  border: 1px solid #334155;
  color: #e2e8f0;
}
.ads-gfx-stage { background: linear-gradient(180deg, #0f172a, #1e293b); }
.ads-gfx-tool, .ads-gfx-actions .ads-btn, .ads-gfx-mode-toggle .ads-btn, .ads-gfx-import-label {
  background: #1e293b !important;
  color: #f8fafc !important;
  border: 1px solid #64748b !important;
}
.ads-gfx-tool.is-active, .ads-gfx-mode-toggle .ads-btn-primary, .ads-gfx-actions .ads-btn-primary {
  background: #2563eb !important;
  color: #fff !important;
  border-color: #93c5fd !important;
}
.ads-gfx-menubar {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  padding: 10px 14px; border-radius: 12px; background: #0b1220; border: 1px solid #334155;
}
.ads-gfx-menubar span { color: #e2e8f0; font-size: 13px; font-weight: 600; cursor: default; }
.ads-gfx-layers li button { color: #f1f5f9; background: transparent; border: 0; text-align: left; }
.ads-gfx-layers li.is-selected { background: rgba(37,99,235,.25); border-radius: 8px; }
.ads-gfx-layer-actions { display: inline-flex; gap: 6px; }
.ads-gfx-layer-actions .ads-linkish { color: #93c5fd !important; }
.ads-gfx-template, .ads-gfx-library-item {
  background: #1e293b; border-color: #475569; color: #f8fafc;
}
.ads-gfx-template span, .ads-gfx-library-item span, .ads-gfx-template em { color: #94a3b8; }
.ads-gfx-layer.is-selected { outline: 2px solid #38bdf8; outline-offset: 2px; }
.ads-gfx-handle {
  position: absolute; width: 12px; height: 12px; background: #38bdf8; border: 2px solid #fff;
  border-radius: 2px; z-index: 5; cursor: nwse-resize;
}
.ads-gfx-inspector .ads-field { background: #0f172a; color: #f8fafc; border: 1px solid #475569; }
.ads-canvas img { max-width: 100%; min-height: 220px; background: #0f172a; border-radius: 16px; display: block; }
.ads-concept-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.ads-concept-gallery img { width: 100%; min-height: 160px; object-fit: cover; border-radius: 12px; background: #111827; }
.ads-starter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 12px 0; }
.ads-starter-card {
  text-align: left; border: 1px solid #334155; border-radius: 14px; padding: 14px;
  background: #111827; color: #f8fafc; cursor: pointer;
}
.ads-starter-card strong { display: block; margin-bottom: 6px; }
.ads-starter-card span { color: #94a3b8; font-size: 13px; }
.ads-social-composer textarea { min-height: 110px; }

/* ===== Mobile polish (phones + narrow tablets) ===== */
.ads-app { width: 100%; overflow-x: clip; }
.ads-topbar {
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 0.65rem 0 0.75rem;
  background: linear-gradient(180deg, rgba(11,11,20,0.98), rgba(11,11,20,0.92));
  backdrop-filter: blur(10px);
}
.ads-brand strong {
  font-size: clamp(0.92rem, 3.6vw, 1.05rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ads-brand span {
  display: block;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.ads-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 0.15rem 0.1rem 0.45rem;
  margin: 0;
  scrollbar-width: thin;
}
.ads-nav::-webkit-scrollbar { height: 4px; }
.ads-nav button {
  flex: 0 0 auto;
  scroll-snap-align: start;
  white-space: nowrap;
  max-width: 85vw;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 44px;
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  touch-action: manipulation;
}
.ads-nav button, .ads-btn, .ads-chip, .ads-card-btn, .ads-starter-card, .ads-workspace, .ads-thumb {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ads-btn, .ads-chip, .ads-card-btn {
  min-height: 44px;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
  line-height: 1.25;
}
.ads-actions, .ads-hub-links, .ads-row, .ads-chips {
  max-width: 100%;
}
.ads-actions .ads-btn,
.ads-hub-links .ads-btn,
.ads-sample-row .ads-btn {
  flex: 1 1 auto;
  justify-content: center;
  text-align: center;
}
.ads-field, select.ads-field, textarea.ads-field, input.ads-field {
  max-width: 100%;
  min-width: 0;
  font-size: 16px; /* avoid iOS zoom */
}
.ads-table-wrap, .ads-panel {
  max-width: 100%;
}
.ads-panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ads-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
}
.ads-table th, .ads-table td {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ads-starter-grid {
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 10px 0;
}
.ads-starter-card {
  width: 100%;
  min-height: 64px;
  overflow-wrap: anywhere;
}
.ads-starter-card span {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ads-concept-gallery {
  grid-template-columns: 1fr;
}
.ads-concept-gallery img,
.ads-canvas img {
  min-height: 0;
  max-height: none;
  width: 100%;
  height: auto;
}
.ads-thumb-list { grid-template-columns: 1fr 1fr; }
.ads-thumb span, .ads-thumb small {
  display: block;
  padding: 0.35rem 0.5rem;
  overflow-wrap: anywhere;
}
.ads-workspace {
  min-height: 0;
  padding: 1rem;
}
.ads-workspace h2, .ads-hero h1, .ads-panel h3 {
  overflow-wrap: anywhere;
}
.ads-toast {
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  width: auto;
  max-width: none;
  text-align: center;
  overflow-wrap: anywhere;
}
.ads-metric-grid { grid-template-columns: 1fr 1fr; }
.ads-measure-grid { grid-template-columns: 1fr; }

/* Graphic Design mobile */
.ads-gfx-title-field { min-width: 0; width: 100%; }
.ads-gfx-toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 10px;
}
.ads-gfx-toolbar .ads-gfx-title-field { grid-column: 1 / -1; }
.ads-gfx-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ads-gfx-actions .ads-btn,
.ads-gfx-actions .ads-gfx-import-label {
  width: 100%;
  justify-content: center;
  min-height: 44px;
  white-space: normal;
  text-align: center;
}
.ads-gfx-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.ads-gfx-tool {
  width: 100%;
  min-height: 44px;
  padding: 0.45rem 0.35rem;
  font-size: 0.78rem;
  white-space: normal;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.ads-gfx-layout { grid-template-columns: 1fr; gap: 12px; }
.ads-gfx-stage {
  min-height: 0;
  padding: 10px;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ads-gfx-artboard {
  max-width: 100%;
  margin: 0 auto;
}
.ads-gfx-menubar {
  gap: 10px;
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}
.ads-gfx-menubar span { flex: 0 0 auto; }
.ads-gfx-layers li {
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
}
.ads-gfx-layers li > button:first-child {
  flex: 1 1 100%;
  min-height: 40px;
  overflow-wrap: anywhere;
  white-space: normal;
}
.ads-gfx-layer-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
.ads-gfx-templates, .ads-gfx-library { max-height: 260px; }
.ads-gfx-mode-toggle { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ads-gfx-mode-toggle .ads-btn { width: 100%; min-height: 44px; }

@media (max-width: 719px) {
  .ads-app { padding: 0.75rem 0.75rem 5.5rem; }
  .ads-hero { margin-bottom: 1rem; }
  .ads-hero h1 { font-size: clamp(1.35rem, 7vw, 1.9rem); }
  .ads-thumb-list { grid-template-columns: 1fr; }
  .ads-workspaces { gap: 0.75rem; }
  .ads-pipeline { gap: 0.3rem; }
  .ads-pipeline li { font-size: 0.68rem; }
  .ads-film-desktop-only,
  .ads-voice-desktop-only { display: none !important; }
  .ads-canvas { min-height: 200px; }
  .ads-sample-row .ads-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (min-width: 720px) {
  .ads-topbar {
    flex-direction: row;
    align-items: flex-start;
    position: static;
    background: transparent;
    backdrop-filter: none;
    padding: 0;
  }
  .ads-nav {
    flex-wrap: wrap;
    overflow-x: visible;
    scroll-snap-type: none;
    max-width: min(72%, 920px);
  }
  .ads-starter-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .ads-concept-gallery { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .ads-gfx-toolbar { display: flex; }
  .ads-gfx-actions { display: flex; grid-column: auto; }
  .ads-gfx-tools { display: flex; flex-wrap: wrap; }
  .ads-gfx-tool { width: auto; font-size: inherit; }
  .ads-gfx-mode-toggle { display: flex; width: auto; }
  .ads-table { min-width: 0; }
  .ads-toast { left: auto; width: auto; max-width: 22rem; text-align: left; }
  .ads-actions .ads-btn,
  .ads-hub-links .ads-btn,
  .ads-sample-row .ads-btn { flex: 0 1 auto; }
}

@media (min-width: 1100px) {
  .ads-gfx-layout { grid-template-columns: minmax(200px, 240px) minmax(0, 1fr) minmax(200px, 260px); }
}