/* chat80 — generator tool pages (address + personal details).
   Design system look; logical properties only — RTL/LTR agnostic. */

.gen-page { max-width: 1080px; }

.gen-hero { margin-bottom: 1.4rem; }
.gen-subtitle { margin: .3rem 0 .6rem; }
/* ── shared tool-page components (chat99 — identical on every tool page) ── */
.gen-cross-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.gen-cross {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .9rem; color: var(--primary, #a855f7); text-decoration: none;
  padding: .35rem .8rem; border: 1px solid currentColor; border-radius: 999px;
  white-space: nowrap;
}
.gen-cross:hover { background: color-mix(in srgb, var(--primary, #a855f7) 10%, transparent); }
.gen-privacy {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--ok-soft, #dcfce7); color: var(--ok, #16a34a);
  border: 1px solid color-mix(in srgb, var(--ok, #16a34a) 25%, transparent);
  border-radius: 999px; padding: .3rem .85rem; font-size: .8rem; font-weight: 600;
  margin-block: .2rem .4rem;
}
.gen-privacy i { font-size: 1rem; }

/* controls */
.gen-controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; padding: 1.1rem 1.2rem; }
.gen-country-box { flex: 1 1 260px; min-width: 220px; }
.gen-country-box label, .gen-field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; }
.gen-country-filter { width: 100%; margin-bottom: .5rem; }
.gen-country-box select {
  width: 100%; max-height: 38px; padding: .55rem .7rem;
  border: 1px solid var(--dv-border, #e2e8f0); border-radius: .6rem;
  background: var(--dv-card, #fff); color: inherit; font: inherit;
}
.gen-field select {
  padding: .55rem .7rem; border: 1px solid var(--dv-border, #e2e8f0);
  border-radius: .6rem; background: var(--dv-card, #fff); color: inherit; font: inherit;
}
.gen-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* result */
.gen-result-wrap { padding: 0; min-height: 140px; }
.gen-result-wrap:not(.is-ready)::before {
  content: "···"; display: block; text-align: center;
  color: var(--dv-muted, #94a3b8); font-size: 2rem; letter-spacing: .5rem; padding: 2.5rem 0;
}
.gen-result-head {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .9rem 1.2rem; border-bottom: 1px solid var(--dv-border, #eef2f7);
}
.gen-flag { font-size: 1.5rem; line-height: 1; }
.gen-result-head strong { font-size: 1.05rem; }
.gen-meta { margin-inline-start: auto; font-size: .78rem; color: var(--dv-muted, #64748b); }
.gen-badge {
  font-size: .72rem; padding: .18rem .6rem; border-radius: 999px;
  color: #059669; background: color-mix(in srgb, #059669 12%, transparent);
  display: inline-flex; align-items: center; gap: .3rem;
}

.gen-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--dv-border, #eef2f7); }
@media (max-width: 720px) { .gen-cards { grid-template-columns: 1fr; } }
.gen-card { background: var(--dv-card, #fff); }
.gen-card-local { background: color-mix(in srgb, var(--dv-accent, #2563eb) 4%, var(--dv-card, #fff)); }
.gen-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem .9rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--dv-muted, #64748b);
  border-bottom: 1px solid var(--dv-border, #eef2f7);
}
.gen-card-body { padding: .9rem; }
.gen-line { font-size: .95rem; line-height: 1.75; }
.gen-bigname { font-size: 1.25rem; font-weight: 700; line-height: 1.5; }

.gen-copy {
  border: 1px solid var(--dv-border, #e2e8f0); background: transparent; color: var(--dv-muted, #64748b);
  border-radius: .45rem; padding: .18rem .5rem; cursor: pointer; line-height: 1;
}
.gen-copy:hover { color: var(--dv-accent, #2563eb); border-color: currentColor; }
.gen-copy.is-ok { color: #059669; border-color: #059669; }
.gen-copy-all {
  display: inline-flex; align-items: center; gap: .45rem; margin: .8rem 1.2rem;
  border: 1px solid var(--dv-border, #e2e8f0); background: transparent; color: inherit;
  border-radius: .55rem; padding: .45rem .9rem; cursor: pointer; font: inherit; font-size: .88rem;
}
.gen-copy-all:hover { border-color: var(--dv-accent, #2563eb); color: var(--dv-accent, #2563eb); }
.gen-copy-all.is-ok { border-color: #059669; color: #059669; }

/* rows */
.gen-rows { padding: .4rem 1.2rem 1.1rem; }
.gen-row {
  display: grid; grid-template-columns: 130px 1fr 1fr; gap: .8rem; align-items: baseline;
  padding: .55rem 0; border-bottom: 1px dashed var(--dv-border, #eef2f7); font-size: .92rem;
}
.gen-row:last-child { border-bottom: 0; }
.gen-row-label { color: var(--dv-muted, #64748b); font-size: .8rem; }
@media (max-width: 720px) {
  .gen-row { grid-template-columns: 1fr; gap: .2rem; padding: .5rem 0; }
}

.gen-about { margin-top: 1.6rem; }
.gen-about h2 { font-size: 1.05rem; margin-bottom: .5rem; }
.gen-about p { color: var(--dv-muted, #475569); font-size: .92rem; line-height: 1.8; }

/* chat82 — barcode + QR maker pages (shared look with the chat80
   generator pages; logical properties, RTL/LTR agnostic). */
.gen-field input[type="text"], .gen-field input[type="url"],
.gen-field input[type="search"], .gen-field textarea {
  width: 100%; padding: .55rem .7rem; font: inherit;
  border: 1px solid var(--dv-border, #e2e8f0); border-radius: .6rem;
  background: var(--dv-card, #fff); color: inherit;
}
.gen-field textarea { min-height: 84px; resize: vertical; }
.gen-hint { font-size: .78rem; color: var(--dv-muted, #64748b); margin: .3rem 0 0; }
.gen-err { font-size: .8rem; color: #dc2626; margin: .3rem 0 0; font-weight: 600; }

/* options grid (colors, sizes, checkbox) */
.bc-opts {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;
  width: 100%; padding-top: .4rem; border-top: 1px dashed var(--dv-border, #eef2f7);
  margin-top: .4rem;
}
.bc-opts .gen-field { min-width: 100px; }
.bc-opt-color { min-width: 84px !important; }
.gen-field input[type="color"] {
  width: 100%; height: 38px; padding: 2px; cursor: pointer;
  border: 1px solid var(--dv-border, #e2e8f0); border-radius: .6rem;
  background: var(--dv-card, #fff);
}
.gen-field select { min-width: 90px; }
.bc-check { display: flex; align-items: center; gap: .45rem; padding-bottom: .55rem; font-size: .88rem; cursor: pointer; }
.bc-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--dv-accent, #2563eb); }

/* result stage (barcode / QR image) */
.bc-stage {
  display: flex; align-items: center; justify-content: center;
  padding: 1.3rem 1.2rem; min-height: 160px;
}
.bc-stage svg { max-width: 100%; height: auto; }
.bc-stage-empty { color: var(--dv-muted, #94a3b8); font-size: 1.6rem; letter-spacing: .4rem; }
.qrg-stage svg { border-radius: .5rem; }

/* download row */
.gen-dl {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  padding: .8rem 1.2rem 1.1rem; border-top: 1px dashed var(--dv-border, #eef2f7);
}

/* QR mode tabs (segmented control) */
.qrg-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; width: 100%; }
.qrg-tab {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--dv-border, #e2e8f0); background: transparent; color: inherit;
  border-radius: 999px; padding: .45rem .95rem; font: inherit; font-size: .88rem;
  cursor: pointer; white-space: nowrap;
}
.qrg-tab:hover { border-color: var(--dv-accent, #2563eb); color: var(--dv-accent, #2563eb); }
.qrg-tab.is-active {
  background: var(--dv-accent, #2563eb); border-color: var(--dv-accent, #2563eb); color: #fff;
}
.qrg-panels { width: 100%; }
.qrg-panel { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.qrg-panel .gen-field.wide { grid-column: 1 / -1; }

/* logo row */
.qrg-logo-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.qrg-logo-row input[type="file"] { font-size: .82rem; max-width: 210px; }
.qrg-logo-remove {
  display: inline-flex; align-items: center; gap: .3rem;
  border: 1px solid var(--dv-border, #e2e8f0); background: transparent; color: inherit;
  border-radius: .45rem; padding: .3rem .7rem; font: inherit; font-size: .8rem; cursor: pointer;
}
.qrg-logo-remove:hover { border-color: #dc2626; color: #dc2626; }