/* ─── BRAND TOKENS ─────────────────────────────────────── */
.av-studio {
  --av-red:       #cc203b;
  --av-red-dk:    #a8172f;
  --av-dark:      #1a1a1c;
  --av-text:      #3d3a37;
  --av-muted:     #8a8480;
  --av-border:    #ddd8d0;
  --av-border-lt: #ece8e2;
  --av-bg:        #f5f0eb;
  --av-parchment: #faf7f3;
  --av-white:     #ffffff;
  --av-gold:      #b89b6a;
  --av-sidebar-w: 320px;
  --av-radius:    2px;
  --av-font-serif: Georgia, 'Times New Roman', serif;
}

/* ─── LAYOUT ────────────────────────────────────────────── */
.av-studio {
  display: grid;
  grid-template-columns: var(--av-sidebar-w) 1fr;
  min-height: 600px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: var(--av-text);
  background: var(--av-bg);
  border: 1px solid var(--av-border);
  border-top: 3px solid var(--av-dark);
  overflow: hidden;
}

/* ─── SIDEBAR ───────────────────────────────────────────── */
.av-sidebar {
  background: var(--av-parchment);
  border-right: 1px solid var(--av-border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.av-section {
  padding: 18px 20px;
  border-bottom: 1px solid var(--av-border-lt);
}
.av-section:last-child { border-bottom: none; }

.av-section-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--av-gold);
  margin-bottom: 14px;
}

/* Upload zone */
.av-upload-zone {
  display: block;
  border: 1px dashed var(--av-border);
  border-radius: var(--av-radius);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  background: var(--av-bg);
  overflow: hidden;
}
.av-upload-zone:hover,
.av-upload-zone:focus-within {
  border-color: var(--av-red);
  background: #f9eef0;
}
.av-upload-placeholder {
  padding: 30px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  color: #c4bdb5;
}
.av-upload-text {
  font-size: 12px;
  color: var(--av-text);
  font-weight: 500;
}
.av-upload-sub {
  font-size: 10px;
  color: #bbb;
  letter-spacing: 0.04em;
}
.av-upload-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.av-preview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-top: 1px solid var(--av-border-lt);
  background: var(--av-parchment);
}
.av-preview-name {
  font-size: 11px;
  color: var(--av-text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}
.av-preview-change {
  font-size: 10px;
  color: var(--av-red);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Style grid */
.av-styles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.av-style-card {
  border-radius: var(--av-radius);
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: var(--av-white);
}
.av-style-card:hover { border-color: var(--av-border); box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
.av-style-card.active { border-color: var(--av-dark); }

.av-style-thumb {
  height: 50px;
  position: relative;
}
.av-style-thumb--skandynawski {
  background: linear-gradient(160deg, #f2ede5 30%, #ddd3c4 100%);
}
.av-style-thumb--loftowy {
  background: linear-gradient(160deg, #2e2b27 30%, #181614 100%);
}
.av-style-thumb--klasyczny {
  background: linear-gradient(160deg, #ede4d2 30%, #c9b48c 100%);
}
.av-style-thumb--japandi {
  background: linear-gradient(160deg, #e6e8e1 30%, #b8b59e 100%);
}

/* Small decorative frame icon on each thumb */
.av-style-thumb::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 22px;
  border: 2px solid rgba(255,255,255,0.5);
}
.av-style-thumb--loftowy::after {
  border-color: rgba(255,255,255,0.2);
}

.av-style-label {
  padding: 5px 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--av-text);
  letter-spacing: 0.05em;
  background: var(--av-parchment);
  border-top: 1px solid var(--av-border-lt);
  text-align: center;
  text-transform: uppercase;
}
.av-style-card.active .av-style-label {
  background: var(--av-dark);
  color: #fff;
  border-color: var(--av-dark);
}

/* Params */
.av-params { display: flex; flex-direction: column; gap: 14px; }
.av-param-row label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--av-text);
  margin-bottom: 7px;
}
.av-param-row label em {
  font-style: normal;
  font-weight: 700;
  color: var(--av-dark);
}
.av-param-row input[type=range] {
  width: 100%;
  appearance: none;
  height: 2px;
  background: var(--av-border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.av-param-row input[type=range]::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--av-dark);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(26,26,28,0.1);
}
.av-param-hint {
  display: block;
  font-size: 10px;
  color: #bbb;
  margin-top: 5px;
  line-height: 1.4;
}

/* Generate button */
.av-btn-generate {
  width: 100%;
  padding: 13px;
  background: var(--av-dark);
  color: #fff;
  border: none;
  border-radius: var(--av-radius);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s;
}
.av-btn-generate:hover:not(:disabled) { background: #2e2e31; }
.av-btn-generate:disabled { background: #c4bdb5; cursor: not-allowed; }

.av-generate-hint {
  margin-top: 8px;
  font-size: 10px;
  color: #bbb;
  text-align: center;
  letter-spacing: 0.04em;
}

/* ─── CANVAS ────────────────────────────────────────────── */
.av-canvas {
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  gap: 12px;
  background: var(--av-bg);
}

.av-canvas-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.av-canvas-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--av-gold);
}
.av-canvas-meta {
  display: flex;
  gap: 6px;
}
.av-meta-tag {
  background: var(--av-parchment);
  border: 1px solid var(--av-border);
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--av-muted);
}
.av-meta-tag.is-generating {
  background: rgba(204,32,59,.06);
  border-color: rgba(204,32,59,.25);
  color: var(--av-red);
}

/* Result frame — gallery-style mat border */
.av-result-frame {
  flex: 1;
  overflow: hidden;
  background: var(--av-white);
  border: 1px solid var(--av-border);
  box-shadow:
    inset 0 0 0 8px var(--av-parchment),
    inset 0 0 0 9px var(--av-border-lt);
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Empty state */
.av-empty-state {
  text-align: center;
  color: var(--av-muted);
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.av-empty-state p {
  font-size: 12px;
  max-width: 230px;
  line-height: 1.6;
  font-family: var(--av-font-serif);
  font-style: italic;
  color: var(--av-muted);
}

/* Loading */
.av-loading {
  position: absolute;
  inset: 0;
  background: rgba(245,240,235,0.93);
  display: flex;
  align-items: center;
  justify-content: center;
}
.av-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.av-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(26,26,28,0.12);
  border-top-color: var(--av-dark);
  border-radius: 50%;
  animation: av-spin 0.8s linear infinite;
}
@keyframes av-spin { to { transform: rotate(360deg); } }
.av-loading-text {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--av-dark);
}
.av-progress-bar-wrap {
  width: 140px;
  height: 2px;
  background: var(--av-border);
  border-radius: 2px;
  overflow: hidden;
}
.av-progress-bar-fill {
  height: 100%;
  background: var(--av-dark);
  border-radius: 2px;
  width: 0;
  transition: width 1s linear;
}
.av-loading-time {
  font-size: 10px;
  color: #bbb;
  letter-spacing: 0.04em;
}

/* Error */
.av-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 24px;
  color: var(--av-muted);
}
.av-error p { font-size: 12px; max-width: 240px; line-height: 1.6; }
.av-btn-retry {
  padding: 8px 18px;
  background: var(--av-red);
  color: #fff;
  border: none;
  border-radius: var(--av-radius);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}
.av-btn-retry:hover { background: var(--av-red-dk); }

/* Result image */
.av-result-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ─── TOOLBAR ───────────────────────────────────────────── */
.av-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.av-toolbar-left, .av-toolbar-right {
  display: flex;
  gap: 6px;
}
.av-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border-radius: var(--av-radius);
  border: 1px solid var(--av-border);
  background: var(--av-parchment);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--av-text);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}
.av-tool-btn:hover { border-color: var(--av-dark); color: var(--av-dark); background: var(--av-white); }
.av-btn-primary {
  background: var(--av-red);
  color: #fff !important;
  border-color: var(--av-red);
}
.av-btn-primary:hover { background: var(--av-red-dk); border-color: var(--av-red-dk); }

/* ─── HISTORY ───────────────────────────────────────────── */
.av-history-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--av-gold);
  margin-bottom: 8px;
}
.av-history-row {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.av-history-thumb {
  width: 76px;
  height: 54px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 2px var(--av-border-lt);
  transition: border-color 0.15s;
  flex-shrink: 0;
}
.av-history-thumb:hover { border-color: var(--av-border); }
.av-history-thumb.current { border-color: var(--av-dark); }
.av-history-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ─── SEO CONTENT BLOCKS ────────────────────────────────── */
.av-seo-wrap {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: var(--av-text, #3d3a37);
  max-width: 100%;
}

.av-seo-hero {
  padding: 36px 0 24px;
  border-bottom: 1px solid #ddd8d0;
  margin-bottom: 48px;
}
.av-seo-hero h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 400;
  color: #1a1a1c;
  line-height: 1.3;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.av-seo-hero p {
  font-size: 15px;
  line-height: 1.7;
  color: #5a5550;
  max-width: 680px;
  margin: 0;
}

.av-seo-section {
  margin: 52px 0;
}
.av-seo-section h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 400;
  color: #1a1a1c;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ddd8d0;
  letter-spacing: -0.01em;
}

/* How it works — steps */
.av-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-top: 24px;
}
.av-step {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.av-step-num {
  width: 32px;
  height: 32px;
  border: 1px solid #ddd8d0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #b89b6a;
  flex-shrink: 0;
}
.av-step h3 {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1c;
  margin: 0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.av-step p {
  font-size: 13px;
  line-height: 1.65;
  color: #5a5550;
  margin: 0;
}

/* Benefits */
.av-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.av-benefit {
  padding: 20px;
  background: #faf7f3;
  border: 1px solid #ece8e2;
  border-top: 2px solid #1a1a1c;
}
.av-benefit h3 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1a1a1c;
  margin: 0 0 8px;
}
.av-benefit p {
  font-size: 13px;
  line-height: 1.65;
  color: #5a5550;
  margin: 0;
}

/* FAQ */
.av-faq {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 24px;
  border-top: 1px solid #ddd8d0;
}
.av-faq-item {
  padding: 18px 0;
  border-bottom: 1px solid #ddd8d0;
}
.av-faq-item h3 {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1c;
  margin: 0 0 8px;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
}
.av-faq-item p {
  font-size: 13px;
  line-height: 1.7;
  color: #5a5550;
  margin: 0;
}

/* CTA */
.av-seo-cta {
  background: #1a1a1c;
  color: #faf7f3;
  padding: 36px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 52px 0 0;
  flex-wrap: wrap;
}
.av-seo-cta-text h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 400;
  margin: 0 0 8px;
  color: #faf7f3;
  border: none;
  padding: 0;
}
.av-seo-cta-text p {
  font-size: 13px;
  color: #a09890;
  margin: 0;
  line-height: 1.6;
}
.av-seo-cta-btn {
  display: inline-block;
  padding: 12px 28px;
  background: var(--av-red, #cc203b);
  color: #fff;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.2s;
  flex-shrink: 0;
}
.av-seo-cta-btn:hover { background: #a8172f; color: #fff; }

/* ─── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 700px) {
  .av-studio {
    grid-template-columns: 1fr;
  }
  .av-sidebar { border-right: none; border-bottom: 1px solid var(--av-border); }
  .av-toolbar { flex-direction: column; align-items: stretch; }
  .av-toolbar-left, .av-toolbar-right { justify-content: center; }
  .av-seo-cta { flex-direction: column; text-align: center; }
}