:root{--accent:#B57E4E;}
:root { --bg:#ffffff; --text:#0f172a; --muted:#475569; --border:#e2e8f0; --primary:#B57E4E; --danger:#ef4444; --radius:14px; }
:root[data-theme="dark"] { --bg:#0b1220; --text:#e5e7eb; --muted:#94a3b8; --border:#233143; --primary:#B57E4E; --danger:#f87171; }
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.container{max-width:1000px;margin:0 auto;padding:16px}
.topbar{position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--border);z-index:20}
.topbar .link{ display:inline-flex; align-items:center; gap:.35rem; background:none; border:none; padding:0; color:var(--primary); cursor:pointer; font:inherit; text-decoration:underline; }
.topbar nav{ display:flex; align-items:center; gap:16px; }
.topbar nav .link + .link{ position: relative; }
.topbar nav .link + .link::before{
  content:"";
  position:absolute;
  left:-8px;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:1.25em;
  background: var(--primary, #B57E4E);
  opacity: 1;
}

.row{display:flex;gap:12px}
.row.center{align-items:center}
.row.between{justify-content:space-between}
.row.end{justify-content:flex-end}
.gap-8{gap:8px}.gap-16{gap:16px}
.text-sm{font-size:14px}
.logo{height:50px}
.card{border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin:16px 0;background:var(--bg)}
.card.subtle{background:color-mix(in oklab, var(--bg) 92%, var(--primary))}
h1,h2,h3{margin:0 0 10px}
.field label{display:block;font-size:14px;color:var(--muted);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--primary);font-weight:700}
.field input::placeholder,.field textarea::placeholder{color:color-mix(in oklab, var(--primary) 50%, var(--bg));font-weight:400}
.help{font-size:12px;color:var(--muted)}
.error{font-size:12px;color:#dc2626}
.btn{border:1px solid var(--border);padding:10px 14px;border-radius:10px;background:color-mix(in oklab, var(--bg) 92%, var(--primary));color:var(--text);cursor:pointer}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.link{background:none;border:none;color:var(--primary);cursor:pointer}
.link.danger{color:var(--danger)}
.progress{height:8px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin:12px 0 20px}
.progress-bar{height:100%;background:var(--primary);width:0%}
.mic{border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);padding:6px 10px;cursor:pointer}
.grid-2{display:grid;grid-template-columns:1fr 1fr}
.col-span-2{grid-column:span 2}
@media (max-width: 800px){.grid-2{grid-template-columns:1fr}.col-span-2{grid-column:span 1}}
article p{margin:8px 0}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}
.muted{color:var(--muted)}
.banner{display:flex;align-items:center;gap:10px;background:#f0f9ff;border:1px solid #bae6fd;padding:10px 12px;border-radius:10px;margin-bottom:12px}
:root[data-theme="dark"] .banner{background:#06263a;border-color:#0f3f5b}
.banner .icon{font-size:20px}
.banner .spacer{flex:1}
.banner .info-btn{border:1px solid var(--border);padding:6px 10px;border-radius:999px;cursor:pointer;background:var(--bg);color:var(--text)}
.print-only{display:none}
.kbd{padding:2px 6px;border:1px solid var(--border);border-radius:6px;font-size:12px}
/* Chips */
.chipbox{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--border);background:var(--bg);padding:6px 10px;border-radius:999px;cursor:pointer;color:var(--text)}
.chip.selected{background:var(--primary);border-color:var(--primary);color:#fff}
.chip:focus{outline:2px solid var(--primary);outline-offset:2px}
/* Modal */
.modal.hidden{display:none}
.modal{position:fixed;inset:0;z-index:50}
.modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.45)}
.modal-card{position:relative;max-width:720px;margin:10vh auto;background:var(--bg);border-radius:14px;padding:16px;border:1px solid var(--border)}
/* Preview top nav */
.top-backnav{justify-content:flex-end}
.page-instruction{ margin:6px 0 20px 0; color: var(--muted); font-size: 0.95rem; }
.page-instruction-divider{border:0;height:1px;background:linear-gradient(to right,transparent,#B57E4E,transparent);margin:24px 0 8px;}

@media (max-width: 640px){
  .top-backnav{flex-direction:column; align-items:stretch}
  .top-backnav .btn{width:100%}
}
/* Responsive preview actions */
.actions .row { flex-wrap: wrap; }
@media (min-width: 768px){
  .actions .row.firstline { justify-content: flex-end; }
}
@media (max-width: 640px){
  .actions .row button { width: 100%; }
}
@media print{
  .topbar, .btn, .mic, .progress, .nav-row, .actions, .banner, .modal, .page-instruction, #theme-toggle, #primary-color {display:none !important}
  .card{border:none;padding:16px;margin:16px 0;}
  .print-only{display:block}
  @page{size:Letter;margin:1in}
}

.ai-divider{border:0;height:1px;background:linear-gradient(to right,transparent,#B57E4E,transparent);margin:24px 0 8px;}
.ai-badge{/*display:inline-block;*/background:var(--primary);color:#fff;font-weight:600;padding:10px 10px;/*border-radius:999px;*/margin:20px 0 8px 0;font-size:.9rem; width: 100%;}
.ai-text{white-space:pre-wrap;line-height:1.5;/*font-family:ui-monospace,Menlo,Consolas,monospace*/ margin-bottom: 40px;}
.ai-header{ display:flex; align-items:center; /*gap:.5rem;*/ margin-bottom:.25rem; }
.ai-clear-link{ font-size:.9rem; font-weight:400; color:#ffffff; text-decoration:none; background: var(--primary); margin: 20px 0 8px 0; padding: 10px 10px;}
.ai-clear-link:hover{ text-decoration:underline; }
#btn-ai[disabled]{opacity:.6;pointer-events:none;filter:grayscale(.25);}

/* --- Added styles for tooltips and required markers --- */
label .help-icon{ 
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border:1px solid var(--border); border-radius:50%;
  margin-left:6px; font-size:12px; line-height:1; background:var(--bg); color:var(--text);
  cursor:help; position:relative;
}
label .help-icon:focus{ outline:2px solid var(--primary); outline-offset:2px; }
label .help-icon::after{
  content: attr(data-tooltip);
  position:absolute; left:50%; transform:translateX(-50%);
  bottom: 125%; white-space:nowrap;
  background: var(--text); color: var(--bg);
  padding:6px 8px; border-radius:8px; font-size:12px;
  opacity:0; pointer-events:none; transition:opacity .15s ease;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}
label .help-icon:hover::after, label .help-icon:focus::after{ opacity:1; }
.required-asterisk{ color:#dc2626; } /* red */

/* Footer */
.bottombar{/*position:sticky;bottom:0;*/background:var(--bg);border-top:1px solid var(--border);z-index:20;font-size: 14px;}
@media print{ .bottombar { display:none !important } }
.privacy{ font-size: 0.75rem; line-spacing: 1.0rem; }