:root { --ink:#2d2328; --muted:#73666c; --paper:#fbf8f5; --card:#fff; --line:#e5dcd7; --accent:#765064; --green:#20875a; --red:#ad3d4a; }
* { box-sizing:border-box; }
body { margin:0; background:linear-gradient(180deg,#f8f2ef,#fff); color:var(--ink); font-family:"DM Sans",sans-serif; }
button,input,textarea { font:inherit; }
.hidden { display:none !important; }
.integration-shell { width:min(1120px,calc(100% - 28px)); margin:0 auto; padding:30px 0 70px; }
.integration-header { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; margin-bottom:22px; }
.integration-header h1 { margin:4px 0 6px; font-family:"Playfair Display",serif; font-size:clamp(32px,5vw,52px); }
.integration-header p { margin:0; color:var(--muted); }
.back-link { color:var(--accent); font-weight:700; text-decoration:none; }
.eyebrow { color:var(--accent)!important; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.master-toggle,.switch-row { display:flex; align-items:center; gap:11px; }
.master-toggle { padding:13px 16px; border:1px solid var(--line); border-radius:999px; background:#fff; white-space:nowrap; }
.master-toggle input,.switch-row input { width:19px; height:19px; accent-color:var(--green); }
.connection-card,.settings-card,.history-card { margin-top:18px; border:1px solid var(--line); border-radius:22px; background:rgba(255,255,255,.94); box-shadow:0 18px 50px rgba(72,49,58,.08); padding:24px; }
.connection-card { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:28px; align-items:center; }
.section-heading { display:flex; justify-content:space-between; gap:18px; align-items:center; }
.section-heading h2 { margin:3px 0 0; font-size:22px; }
.status-badge { padding:7px 11px; border-radius:999px; background:#eee7e3; color:#654f59; font-size:12px; font-weight:700; }
.status-badge.ready { background:#e4f4eb; color:#17663f; }
.status-badge.error { background:#fae7e8; color:#8d2d38; }
.connected-phone { font-weight:700; color:var(--green); }
.connection-actions,.form-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
button,.auth-warning a { border:0; border-radius:11px; padding:11px 15px; cursor:pointer; font-weight:700; text-decoration:none; }
button:disabled { opacity:.55; cursor:wait; }
.primary { background:var(--accent); color:#fff; }
.secondary { background:#eee8e5; color:#4e3d45; }
.danger { background:#f8e4e6; color:var(--red); }
.qr-panel { min-height:270px; display:grid; place-items:center; border:1px dashed #d7cbc5; border-radius:18px; background:#faf7f5; padding:14px; }
#qr-image { width:240px; max-width:100%; border-radius:10px; background:#fff; padding:8px; }
.qr-placeholder { display:grid; gap:8px; text-align:center; color:var(--muted); }
#whatsapp-settings-form { display:grid; gap:0; }
.settings-card { display:grid; gap:17px; }
.settings-card label { display:grid; gap:7px; color:#55474d; font-size:13px; font-weight:700; }
.settings-card input[type="text"],.settings-card input[type="tel"],.settings-card input[type="number"],.settings-card textarea,.test-card input,.test-card textarea { width:100%; border:1px solid #dcd1cc; border-radius:11px; padding:11px 12px; background:#fff; color:var(--ink); resize:vertical; }
.switch-row { display:flex!important; padding:12px 0; }
.switch-row span { display:grid; gap:3px; }
.switch-row small { color:var(--muted); font-weight:400; }
.settings-grid { display:grid; grid-template-columns:1fr 220px; gap:20px; align-items:end; }
.template-help { margin-top:18px; padding:17px 20px; border-radius:14px; background:#f0ebe8; }
.template-help p { margin:7px 0 0; color:var(--muted); word-break:break-word; }
.form-actions { justify-content:flex-end; }
.test-form { display:grid; grid-template-columns:280px 1fr auto; gap:12px; align-items:end; }
.test-form label { display:grid; gap:7px; font-size:13px; font-weight:700; }
.history-list { display:grid; gap:11px; margin-top:18px; }
.history-item { display:grid; grid-template-columns:135px minmax(0,1fr) auto; gap:13px; align-items:start; padding:14px; border:1px solid var(--line); border-radius:13px; }
.history-item p { margin:4px 0; color:var(--muted); }
.history-status { font-size:12px; font-weight:700; text-transform:uppercase; }
.history-status.sent { color:var(--green); }.history-status.failed { color:var(--red); }.history-status.pending,.history-status.processing { color:#9a681e; }
.page-message { min-height:20px; color:var(--red); }.page-message.success { color:var(--green); }
.auth-warning { min-height:100vh; display:grid; place-content:center; gap:10px; text-align:center; padding:30px; }
.auth-warning a { background:var(--accent); color:#fff; }
@media (max-width:760px) {
  .integration-header { display:grid; }.master-toggle { justify-self:start; }
  .connection-card { grid-template-columns:1fr; }.settings-grid,.test-form { grid-template-columns:1fr; }
  .history-item { grid-template-columns:1fr; }.connection-actions button,.form-actions button { width:100%; }
}