:root { --bg:#f5f6f8; --card:#fff; --ink:#1c2430; --line:#d7dbe0; --accent:#1f6feb; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }

/* Two columns on desktop: preview on the LEFT, form on the RIGHT.
   form-pane is first in the DOM (better for keyboard/screen-reader order);
   row-reverse paints the preview to its left. */
.layout { display:flex; flex-direction:row-reverse; gap:20px;
  max-width:1180px; margin:24px auto; padding:0 16px; align-items:flex-start; }

.form-pane { flex:1 1 52%; background:var(--card);
  padding:24px 28px; border-radius:12px; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.preview-pane { flex:1 1 48%; position:sticky; top:24px; }

.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
h1 { margin:0 0 4px; font-size:22px; }
.mode { margin:0 0 20px; color:#5a6573; font-size:14px; }

.lang-toggle { display:flex; gap:4px; flex:none; }
.flag { font-size:20px; line-height:1; padding:5px 8px; border:1px solid var(--line);
  border-radius:8px; background:#fff; cursor:pointer; opacity:.4; transition:opacity .12s; }
.flag:hover { opacity:.75; }
.flag.active { opacity:1; border-color:var(--accent); box-shadow:0 0 0 2px rgba(31,111,235,.2); }

.preview-heading { font-size:13px; font-weight:600; color:#5a6573; margin:0 0 8px; }
#preview { width:100%; height:82vh; border:1px solid var(--line); border-radius:8px;
  background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.08); }

form { display:grid; gap:14px; }
label { display:grid; gap:4px; font-size:13px; font-weight:600; color:#3a4452; }
input { font-size:15px; padding:9px 11px; border:1px solid var(--line);
  border-radius:8px; font-weight:400; color:var(--ink); }
input:focus { outline:2px solid var(--accent); border-color:var(--accent); }
.amount span { font-size:14px; }
.amount input { background:#fffbe9; font-size:17px; font-weight:600; padding:11px; }

/* Greyed "details" block: auto-filled / optional, still editable.
   Fades up to full when hovered or focused so it never feels locked. */
.secondary { display:grid; gap:14px; margin-top:4px; padding:14px 16px;
  border:1px dashed var(--line); border-radius:10px; background:#fafbfc;
  opacity:.55; transition:opacity .15s; }
.secondary:hover { opacity:.8; }
.secondary:focus-within { opacity:1; }
.section-note { margin:0 0 2px; font-size:12px; font-weight:600; color:#8a93a0; }

.req { color:#c0392b; }
.actions { display:flex; gap:10px; margin-top:8px; }
button { font-size:15px; font-weight:600; padding:10px 18px; border-radius:8px;
  border:1px solid var(--line); cursor:pointer; background:#fff; }
#generate { background:var(--accent); border-color:var(--accent); color:#fff; }
#generate:disabled { opacity:.6; cursor:default; }
.status { min-height:20px; font-size:14px; font-weight:600; }
.status.error { color:#c0392b; }
.status.ok { color:#1e8e3e; }

/* Stack on narrow screens: form first, preview below. */
@media (max-width: 820px) {
  .layout { flex-direction:column; }
  .preview-pane { position:static; width:100%; }
  #preview { height:60vh; }
}