/* ===== TTB – Contact Form Generator (Light, Professional) ===== */

/* App shell (light) */
.ttb-cfg {
  --bg:#f5f7fb;
  --panel:#ffffff;
  --muted:#6b7280;
  --ink:#111827;
  --acc:#2563eb;            /* professional blue */
  --line:#e5e7eb;
  --radius:14px;
  --pad:16px;
  color:var(--ink);
}
.ttb-cfg * { box-sizing:border-box; }
.ttb-cfg a { color:var(--acc); text-decoration:none; }
.ttb-cfg a:hover { text-decoration:underline; }

.ttb-cfg__header { margin-bottom:16px; }
.ttb-cfg__header h1 { margin:0 0 6px; font-size:28px; }
.ttb-cfg__header p  { margin:0; color:var(--muted); }

/* Stacked layout */
.ttb-cfg__grid { display:block; }

/* Panels */
.ttb-panel {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--pad);
  margin-bottom:16px;
  box-shadow:0 1px 2px rgba(17,24,39,.04);
}
.ttb-panel h2 { margin:0 0 10px; font-size:18px; }
.ttb-panel__head { display:flex; align-items:center; gap:8px; justify-content:space-between; margin-bottom:8px; }

/* Rows & Buttons */
.ttb-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ttb-row--controls { margin-top:10px; }
.ttb-btn {
  background:var(--acc); color:#fff; font-weight:700;
  border:none; padding:10px 14px; border-radius:10px; cursor:pointer;
}
.ttb-btn:hover { filter:brightness(0.98); }
.ttb-btn--secondary { background:transparent; color:var(--ink); border:1px solid var(--line); }

/* Settings (left panel) */
.ttb-label { display:block; margin-bottom:12px; font-size:14px; }
.ttb-label input, .ttb-label select {
  width:100%; margin-top:6px; padding:10px 12px;
  border-radius:10px; border:1px solid var(--line);
  background:#fff; color:var(--ink);
}

/* ===== Fields builder ===== */
.ttb-fields { min-height:20px; }

.ttb-field-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  display:block;
  margin-bottom:10px;
}
.ttb-field-card__head {
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.ttb-field-card__grip {
  cursor:grab; user-select:none; padding:6px 10px;
  background:#f9fafb; border:1px dashed #d1d5db; border-radius:8px;
  font-size:13px; color:#6b7280;
}
.ttb-field-card__actions { margin-left:auto; display:flex; gap:6px; }
.ttb-mini {
  padding:6px 8px; border-radius:8px; border:1px solid var(--line);
  background:#fff; color:var(--ink); cursor:pointer;
}
.ttb-mini:hover { background:#f3f4f6; }

/* Labeled controls grid */
.ttb-form-grid {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px 12px;
}
@media (min-width: 860px){
  .ttb-form-grid { grid-template-columns: 1fr 1fr 1fr 120px; }
}
.ttb-col { display:block; }
.ttb-col-lab { display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
.ttb-form-grid input[type="text"],
.ttb-form-grid input[type="number"],
.ttb-form-grid select,
.ttb-form-grid textarea {
  width:100%;
  background:#fff; color:var(--ink);
  border:1px solid var(--line); border-radius:10px;
  padding:10px 12px;
}
.ttb-col-required { display:flex; align-items:end; }
.ttb-col-required .ttb-col-lab { margin-bottom:0; margin-right: 10px; }
.ttb-col-required input[type="checkbox"] { width:18px; height:18px; }
.ttb-col-wide { grid-column:1 / -1; }

/* ===== Code blocks (light) ===== */
.ttb-codeblock { margin-top:16px; }
.ttb-codeblock__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.ttb-copy {
  border:1px solid #00c237; background:#3ac762; color:var(--ink);
  border-radius:8px; padding:6px 10px; cursor:pointer;
}
.ttb-copy:hover { background:#083d00; }
.ttb-codeblock textarea {
  width:100%; min-height:220px;
  background:#f8fafc; color:#111827;
  border:1px solid #e5e7eb; border-radius:12px;
  padding:10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size:13px; line-height:1.55;
}
.ttb-tip { color:var(--muted); font-size:13px; margin:6px 0 0; }

/* ===== Preview box ===== */
#ttb-preview {
  padding:8px; background:#f8fafc; border-radius:12px; border:1px dashed #d1d5db;
}

/* ===== Generated form baseline (kept light) ===== */
.ttb-contact { --bg:#ffffff; --fg:#1f2937; --muted:#6b7280; --acc:#2563eb; --bd:#e5e7eb; --rad:12px; --pad:14px; --gap:14px; font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--fg); }
.ttb-contact * { box-sizing:border-box; }
.ttb-contact form { display:grid; gap:var(--gap); background:var(--bg); }
.ttb-contact .ttb-field label { display:block; margin-bottom:6px; font-weight:600; color:var(--fg); }
.ttb-contact input[type="text"],
.ttb-contact input[type="email"],
.ttb-contact textarea {
  width:100%; padding:12px 14px; border:1px solid var(--bd); border-radius:var(--rad); outline:none; background:#fff; color:var(--fg);
}
.ttb-contact input:focus, .ttb-contact textarea:focus { border-color:var(--acc); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.ttb-contact .ttb-btn { padding:12px 18px; border:none; border-radius:var(--rad); background:var(--acc); color:#fff; font-weight:700; cursor:pointer; }
.ttb-contact .ttb-btn:hover { filter:brightness(0.98); }
.ttb-contact .ttb-success { background:rgba(37,99,235,.06); border:1px solid rgba(37,99,235,.18); padding:10px 12px; border-radius:var(--rad); margin-top:6px; }
.ttb-contact .ttb-error { background:rgba(190,18,60,.06); border:1px solid rgba(190,18,60,.18); padding:10px 12px; border-radius:var(--rad); margin-top:6px; }

/* Theme tokens (generated snippet preview only) */
.ttb-theme-professional { --acc:#2563eb; --bd:#e5e7eb; --bg:#ffffff; }
.ttb-theme-minimalistic { --acc:#374151; --bd:#e5e7eb; --bg:#ffffff; }
.ttb-theme-modern { --acc:#0ea5e9; --bd:#bae6fd; --bg:#f0f9ff; }
.ttb-theme-fun { --acc:#f59e0b; --bd:#fde68a; --bg:#fffbeb; }
.ttb-theme-oldschool { --acc:#111827; --bd:#cbd5e1; --bg:#f8fafc; }
.ttb-theme-oldschool input,.ttb-theme-oldschool textarea { font-family:"Times New Roman", Times, serif; }
.ttb-theme-oldschool .ttb-btn { background:#111827; }

@media (min-width:720px){ .ttb-panel { padding:18px; } }
@media (min-width:1024px){ .ttb-panel { padding:20px; } }