*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f7f9fc;--bg2:#ffffff;--bg3:#ffffff;--border:#e3e8f0;
  --text:#0f172a;--text2:#5b6878;--text3:#64748b;
  --accent:#2563eb;--green:#059669;--radius:12px;
}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:15px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

nav{background:var(--bg2);border-bottom:1px solid var(--border)}
.nav-inner{max-width:1300px;margin:0 auto;padding:0 20px;height:52px;display:flex;align-items:center;gap:16px}
.logo{font-weight:700;font-size:18px;color:var(--accent)}
.nav-badge{font-size:12px;color:var(--green);background:rgba(52,211,153,0.1);border:1px solid rgba(52,211,153,0.25);border-radius:20px;padding:3px 10px}

.app-layout{display:grid;grid-template-columns:380px 1fr;height:calc(100vh - 52px);overflow:hidden}

/* FORM PANEL */
.form-panel{overflow-y:auto;border-right:1px solid var(--border);padding:24px 20px}
.form-header{margin-bottom:20px}
.form-header h2{font-size:20px;margin-bottom:4px}
.form-subtitle{font-size:13px;color:var(--text2)}

.doc-tabs{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap}
.doc-tab{background:var(--bg3);border:1px solid var(--border);color:var(--text2);padding:7px 14px;border-radius:8px;font-size:13px;cursor:pointer;transition:all .15s;white-space:nowrap}
.doc-tab:hover{border-color:var(--accent);color:var(--text)}
.doc-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}

.form-section{margin-bottom:24px}
.form-section h3{font-size:13px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}
.field{margin-bottom:12px}
.field label{display:block;font-size:13px;color:var(--text2);margin-bottom:5px;font-weight:500}
.req{color:#dc2626}
.field input[type=text],.field input[type=url],.field input[type=email],.field input[type=date],.field select{
  width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text);
  padding:9px 12px;font-size:14px;transition:border-color .15s
}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent)}
.field select{cursor:pointer}
.check-label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2);padding:5px 0;cursor:pointer}
.check-label:hover{color:var(--text)}
.check-label input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;cursor:pointer;flex-shrink:0}

/* PREVIEW PANEL */
.preview-panel{display:flex;flex-direction:column;overflow:hidden}
.preview-toolbar{
  background:var(--bg2);border-bottom:1px solid var(--border);
  padding:10px 20px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0
}
.doc-badge{font-size:13px;font-weight:600;color:var(--accent)}
.toolbar-actions{display:flex;gap:8px}
.btn-copy,.btn-dl{
  background:var(--bg3);border:1px solid var(--border);color:var(--text2);
  padding:6px 14px;border-radius:7px;font-size:13px;cursor:pointer;transition:all .15s
}
.btn-copy:hover{border-color:var(--accent);color:var(--text)}
.btn-dl:hover{border-color:var(--green);color:var(--green)}

.preview-doc{
  flex:1;overflow-y:auto;padding:32px 40px;
  font-family:Georgia,'Times New Roman',serif;
  font-size:14px;line-height:1.8;color:#c8d0e0;background:var(--bg)
}
.preview-doc h1{font-size:22px;color:var(--text);margin-bottom:8px;font-family:inherit}
.preview-doc h2{font-size:16px;color:var(--text);margin:24px 0 8px;font-family:inherit}
.preview-doc p{margin-bottom:10px}
.preview-doc ul{margin:8px 0 10px 20px}
.preview-doc li{margin-bottom:4px}
.preview-doc .doc-meta{font-size:13px;color:var(--text3);margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.preview-doc a{color:var(--accent)}
.preview-placeholder{color:var(--text3);font-style:italic;text-align:center;padding:60px 20px;font-family:sans-serif}
.highlight{background:rgba(79,142,247,0.15);border-radius:3px;padding:0 2px;color:var(--accent)}

@media(max-width:800px){
  .app-layout{grid-template-columns:1fr;height:auto;overflow:visible}
  .form-panel{border-right:none;border-bottom:1px solid var(--border)}
  .preview-panel{height:70vh}
}