@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Roboto:wght@300;500;700;800&display=swap');

:root { --lime: #c7ff00; --ink: #111; --paper: #f4f4f0; --muted: #666; }
* { box-sizing: border-box; }
.asset-source { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
body { margin:0; background:#deded8; color:var(--ink); font-family:Manrope, Arial, sans-serif; }
.app-shell { max-width:1440px; min-height:100vh; margin:auto; background:var(--paper); display:flex; flex-direction:column; }
.topbar { height:76px; border-bottom:1px solid #d8d8d1; padding:0 5.5%; display:flex; align-items:center; justify-content:space-between; font-size:14px; font-weight:700; }
.brand { display:flex; align-items:center; gap:11px; }.brand-mark { display:grid; width:31px; height:31px; place-items:center; background:var(--ink); color:var(--lime); font-weight:800; font-size:20px; border-radius:50% 50% 50% 5px; }
.status { color:#4e4e49; font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.03em; }.status i { display:inline-block; width:8px; height:8px; margin-right:6px; background:#87b000; border-radius:50%; }
.workspace { flex:1; display:grid; grid-template-columns:minmax(360px, .87fr) 1.35fr; }.panel { padding:56px max(7%, 45px); border-right:1px solid #d8d8d1; background:#fafaf7; }.eyebrow { font:500 10px 'DM Mono',monospace; letter-spacing:.12em; color:#6c6c66; margin:0 0 16px; }.intro h1 { font-size:29px; line-height:1.15; margin:0 0 14px; letter-spacing:-.055em; }.intro p:not(.eyebrow) { color:var(--muted); font-size:13px; line-height:1.6; margin:0 0 37px; }
form { display:grid; gap:27px; } fieldset { padding:0; margin:0; border:0; display:grid; gap:14px; } legend { font-size:12px; font-weight:800; margin-bottom:5px; } label { display:grid; gap:7px; font-size:11px; font-weight:700; } input, select, textarea { width:100%; border:1px solid #d5d5ce; border-radius:4px; padding:11px 12px; background:#fff; color:#242422; font:500 13px Manrope,sans-serif; outline-color:#93bc00; }.two-columns { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.file-input input { display:none; }.file-input span { border:1px dashed #bbbcb4; background:#fff; border-radius:4px; padding:11px 12px; color:#777; font-weight:500; cursor:pointer; }.hidden { display:none; }.publish-note { margin:0; color:#70706b; font-size:12px; line-height:1.55; } textarea { resize:vertical; line-height:1.45; min-height:190px; }.read-list { justify-self:start; border:0; border-radius:3px; padding:11px 14px; cursor:pointer; font:700 11px Manrope,sans-serif; background:#dcefa0; color:#253000; }
.preview-area { padding:58px 8%; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; }.preview-area>.eyebrow { align-self:center; }.business-card { --card-bg:url('assets/evopharma-card-base.svg'); --card-color:#e5e3e3; --first-left:37.94%; --last-left:23.32%; --name-transform:none; --first-top:47.16%; --last-top:52.06%; --phone-left:33.25%; --email-left:26.94%; --contact-transform:none; --phone-top:72.50%; --email-top:83.22%; --phone-size:5.556cqw; --email-size:3.981cqw; --phone-weight:300; --email-weight:300; container-type:inline-size; position:relative; width:min(100%, 220px); aspect-ratio:9/16; margin:0 auto; flex:none; color:var(--card-color); background:#272b32 var(--card-bg) center/cover; box-shadow:14px 18px 0 #e4e4dd; overflow:hidden; font-family:Roboto,Arial,sans-serif; }.business-card h2 { position:absolute; transform:var(--name-transform); white-space:nowrap; margin:0; font-size:8.761cqw; line-height:1; letter-spacing:0; color:var(--card-color); }.business-card h2:first-child { left:var(--first-left); top:var(--first-top); font-weight:300; }.business-card h2:nth-child(2) { left:var(--last-left); top:var(--last-top); font-weight:700; }.contact-list { position:absolute; inset:0; }.contact-list a { position:absolute; transform:var(--contact-transform); white-space:nowrap; color:var(--card-color); text-decoration:none; font-family:Roboto,Arial,sans-serif; }.contact-list a:first-child { left:var(--phone-left); top:var(--phone-top); font-size:var(--phone-size); font-weight:var(--phone-weight); }.contact-list a:last-child { left:var(--email-left); top:var(--email-top); font-size:var(--email-size); font-weight:var(--email-weight); }.hint { margin:20px auto 0; width:min(100%,640px); font-size:11px; color:#777; text-align:center; }
.preview-nav { display:flex; justify-content:center; align-items:center; gap:15px; margin:34px auto 0; color:#777; font:500 11px 'DM Mono',monospace; }.preview-nav button { width:32px; height:32px; border:1px solid #c8c8c0; border-radius:50%; background:#fafaf7; cursor:pointer; font-size:17px; }.preview-nav button:hover { background:#e9e9e1; }.hint { margin:20px auto 0; width:min(100%,640px); font-size:11px; color:#777; text-align:center; }
.actions { min-height:88px; border-top:1px solid #d8d8d1; padding:20px 5.5%; display:flex; align-items:center; justify-content:space-between; gap:24px; color:#6c6c66; font-size:11px; }.actions button { border:0; border-radius:3px; padding:15px 19px; background:var(--ink); color:white; cursor:pointer; font:700 12px Manrope,sans-serif; white-space:nowrap; }.actions button:hover { background:#333; }.actions button span { color:var(--lime); font-size:18px; margin-left:11px; }
@media(max-width:800px) { .workspace{display:flex;flex-direction:column}.panel{order:1;border-right:0;border-bottom:1px solid #d8d8d1;padding:40px 7%}.preview-area{order:2;display:flex;padding:48px 7%;min-height:auto}.business-card{display:block;box-shadow:12px 16px 0 #e4e4dd}.actions{align-items:flex-start;flex-direction:column}.actions button{width:100%} }
.mode-switch { display:flex; gap:7px; }
.mode-switch button { border:1px solid #cecec7; border-radius:20px; padding:8px 12px; cursor:pointer; background:#fff; color:#555; font:700 11px Manrope,sans-serif; }
.mode-switch button.active { border-color:#293600; background:#293600; color:#e1ff72; }
.field-note { font-weight:500; color:#777; }
#single-form { display:grid; gap:14px; }
#single-form.hidden, #batch-form.hidden { display:none !important; }
.batch-guide { border-left:3px solid #93bc00; padding:2px 0 2px 13px; color:#4d4d48; font-size:11px; line-height:1.55; }
.batch-guide p { margin:0 0 7px; }
.batch-guide ol { margin:0; padding-left:17px; }
.batch-guide li { margin:3px 0; }
.batch-guide b { color:#242422; }
.batch-guide .batch-example { margin-top:8px; color:#777; }
.download-actions { display:flex; align-items:center; gap:10px; }
.download-actions #download-all { border:1px solid #b9b9b1; border-radius:3px; padding:12px 15px; background:transparent; color:#333; cursor:pointer; font:700 11px Manrope,sans-serif; }
.preview-toolbar { width:min(100%,640px); margin:0 auto 24px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:12px; }
.preview-toolbar .preview-nav { margin:0; }
.preview-toolbar .download-actions button { padding:10px 13px; font-size:10px; }
.preview-toolbar .download-actions #download { border:0; border-radius:3px; background:var(--ink); color:#fff; cursor:pointer; font:700 11px Manrope,sans-serif; }
.preview-toolbar .download-actions #download span { color:var(--lime); font-size:15px; margin-left:7px; }
@media (max-width:1100px) {
  .topbar { height:62px; padding:0 4%; }
  .workspace { grid-template-columns:minmax(320px,.9fr) 1.1fr; }
  .panel { padding:34px 7%; }
  .preview-area { padding:34px 6%; }
  .intro h1 { font-size:25px; }
  .intro p:not(.eyebrow) { margin-bottom:24px; }
  form { gap:20px; }
  textarea { min-height:145px; }
  .business-card { width:min(100%,220px); }
  .preview-nav { margin-top:22px; }
  .hint { margin-top:14px; }
}
@media (max-width:650px) {
  .topbar .status { display:none; }
  .panel { padding:28px 6%; }
  .preview-area { padding:34px 6% 28px; }
  .intro h1 { font-size:24px; }
  .batch-guide { font-size:10px; }
  .actions { padding:16px 6%; gap:12px; }
  .download-actions { width:100%; flex-direction:column-reverse; }
  .download-actions button, .download-actions #download-all { width:100%; }
  .business-card { width:min(100%,210px); }
  .preview-toolbar { align-items:flex-start; flex-direction:column; margin-bottom:20px; }
  .preview-toolbar .download-actions { flex-direction:row; }
}

.business-card { aspect-ratio:var(--card-ratio, 9 / 16); }
.business-card { background:var(--card-base, #272b32) var(--card-bg) center/cover; }
.business-card h2 { font-size:var(--name-size, 8.761cqw); }