:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #18251b; background: #f2f6ef; }
* { box-sizing: border-box; } body { margin: 0; } button, input, textarea, select { font: inherit; } button { cursor: pointer; } a { color: inherit; }
.shell { min-height: 100vh; } .topbar { max-width: 1220px; margin: auto; padding: 22px 28px; display:flex; align-items:center; justify-content:space-between; } .brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:900; letter-spacing:-.04em; } .mark { display:grid; place-items:center; width:33px; height:33px; border-radius:10px; background:#d9f99d; } .top-actions { display:flex; gap:18px; align-items:center; color:#5d715f; font-size:13px; font-weight:750; } .top-actions a { text-decoration:none; } .link-button { border:0; background:transparent; color:#5d715f; padding:0; }
main { max-width: 1165px; margin:auto; padding:48px 28px 100px; } .hidden { display:none !important; } .eyebrow { color:#5f805f; font-size:11px; font-weight:900; letter-spacing:.14em; } h1, h2, p { margin-top:0; } h1 { max-width:700px; font-size:clamp(38px, 6vw, 62px); line-height:1; letter-spacing:-.07em; margin:14px 0 18px; } h2 { letter-spacing:-.05em; margin:0; } p { color:#657367; line-height:1.55; } code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size:.9em; }
.login-card { max-width:550px; margin:60px auto; padding:38px; border:1px solid #dbe5d9; border-radius:25px; background:#fbfdf9; box-shadow:0 20px 55px rgba(24,37,27,.08); } .login-card h1 { font-size:48px; } .login-card small { display:block; color:#7a887c; line-height:1.5; margin-top:22px; }
.button-link { display:block; text-align:center; text-decoration:none; margin-top:22px; } .auth-tabs { display:flex; gap:6px; padding:4px; background:#edf3e9; border-radius:12px; margin-bottom:30px; } .auth-tabs button { flex:1; border:0; border-radius:9px; padding:10px; color:#5d715f; background:transparent; font-weight:800; } .auth-tabs button.active { color:#18251b; background:#fff; box-shadow:0 2px 8px rgba(24,37,27,.08); } .auth-card { margin-top:30px; }
.heading { display:flex; justify-content:space-between; gap:28px; align-items:flex-end; margin-bottom:34px; } .heading p { margin-bottom:0; max-width:650px; } .heading.compact { align-items:center; margin-bottom:22px; } .heading.compact h2 { font-size:38px; margin:11px 0 10px; } .status { color:#59705c; background:#e5efdf; border-radius:999px; padding:9px 13px; font-size:12px; font-weight:800; white-space:nowrap; } .status.busy { color:#866527; background:#fff2c8; } .status.success { color:#28623a; background:#dff3df; }
.columns { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .panel { border:1px solid #dbe5d9; border-radius:22px; padding:26px; background:#fbfdf9; } .panel-title { display:flex; align-items:center; gap:12px; margin-bottom:25px; } .panel-title span { color:#719171; font-size:12px; font-weight:900; } .panel-title h2 { font-size:22px; }
.usage-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 22px; } .usage-strip > div { padding:17px; border:1px solid #dbe5d9; border-radius:16px; background:#fbfdf9; } .usage-strip strong { display:block; margin-top:8px; font-size:20px; letter-spacing:-.04em; } .usage-strip small { display:block; color:#718073; margin-top:4px; font-size:12px; }
label { display:block; color:#435545; font-size:12px; font-weight:800; margin:17px 0; } input, textarea, select { display:block; width:100%; margin-top:8px; border:1px solid #d1ddd0; border-radius:11px; background:#fff; color:#18251b; outline:0; padding:12px 13px; } textarea { resize:vertical; min-height:80px; line-height:1.5; } input:focus, textarea:focus, select:focus { border-color:#6d986f; box-shadow:0 0 0 3px rgba(109,152,111,.13); } .check { display:flex; align-items:center; gap:8px; font-weight:600; } .check input { width:16px; margin:0; } .primary, .secondary { border:0; border-radius:11px; padding:12px 16px; font-weight:850; } .primary { color:#172018; background:#d9f99d; } .primary:hover { background:#c8ef82; } .secondary { color:#315539; background:#e4eee0; } .note { color:#647467; background:#f0f5ed; padding:13px; border-radius:11px; font-size:12px; line-height:1.5; margin:20px 0; } .key-state { min-height:18px; color:#708071; font-size:11px; margin-top:-8px; }
.knowledge-section { margin-top:82px; } .knowledge-list { display:grid; gap:13px; } .doc { display:grid; grid-template-columns:220px 220px 1fr auto; gap:14px; align-items:start; padding:16px; border:1px solid #dbe5d9; border-radius:16px; background:#fbfdf9; } .doc input, .doc textarea { margin:0; } .doc textarea { min-height:120px; } .remove { border:0; color:#a04c44; background:transparent; padding:10px 2px; font-size:12px; font-weight:800; } .knowledge-actions { display:flex; align-items:center; gap:14px; margin-top:18px; }
.study-section { margin-top:82px; padding:26px; border:1px solid #dbe5d9; border-radius:22px; background:#fbfdf9; } .study-section .heading { margin-bottom:18px; } .study-form { display:flex; gap:10px; align-items:center; } .study-form input { margin:0; } .study-form button { white-space:nowrap; } .study-status { margin-top:14px; } .study-preview { max-height:260px; overflow:auto; color:#536456; background:#f0f5ed; }
.embed-section { margin-top:82px; padding:28px; border-radius:22px; color:#eef6ea; background:#18251b; } .embed-section h2 { font-size:35px; margin:12px 0 8px; } .embed-section p { color:#bbccbb; } pre { overflow:auto; margin:20px 0 0; padding:16px; border-radius:12px; color:#d9f99d; background:#2a3d2c; white-space:pre-wrap; word-break:break-word; }
.error { min-height:20px; color:#a33c34; font-size:13px; margin-top:10px; } .login-card form .primary { width:100%; margin-top:8px; }
@media (max-width: 820px) { main { padding-top:28px; } .columns { grid-template-columns:1fr; } .heading { display:block; } .heading .status { display:inline-block; margin-top:20px; } .doc { grid-template-columns:1fr; } .remove { text-align:left; } }
@media (max-width: 650px) { .usage-strip { grid-template-columns:1fr; } .topbar { padding-left:18px; padding-right:18px; } .top-actions { gap:10px; } .top-actions a { display:none; } .login-card { padding:26px; } }
@media (max-width: 560px) { .study-form { display:block; } .study-form button { margin-top:10px; width:100%; } }

/* VIKA visual system: dark graphite, cyan, blue, orange and white. */
:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#232628; background:#fff; }
body { background:#fff; }
.topbar { max-width:none; padding:18px clamp(20px,5vw,72px); color:#fff; background:#232628; }
.brand,.top-actions,.top-actions a,.link-button { color:#fff; }
.mark { color:#fff; background:#2B94B2; }
.eyebrow { color:#2B94B2; }
p,label { color:#40464B; }
.login-card small,.key-state { color:#40464B; }
.auth-tabs { background:#F0F0F0; }
.auth-tabs button { color:#40464B; }
.auth-tabs button.active { color:#232628; }
.panel,.login-card,.usage-strip > div,.doc,.study-section,.portal-card { border-color:#E7E7E7; background:#fff; }
input,textarea,select { border-color:#DCDCDC; color:#232628; }
input:focus,textarea:focus,select:focus { border-color:#2B94B2; box-shadow:0 0 0 3px rgba(43,148,178,.16); }
.primary { color:#fff; background:#2B94B2; box-shadow:0 8px 18px rgba(43,148,178,.18); }
.primary:hover { background:#236f88; }
.secondary { color:#364692; background:#eef0fb; }
.secondary:hover { background:#dfe3f7; }
.status { color:#364692; background:#eef0fb; }
.note { color:#40464B; background:#F0F0F0; }
.embed-section { background:#232628; }
.embed-section pre { color:#FFBC7D; background:#282C2E; }
.growth-section,.leads-section { margin-top:70px; }
.billing-section { margin-top:42px; padding:26px; border:1px solid #E7E7E7; border-radius:22px; background:#F8FAF8; }
.central-payment-hero { display:flex; align-items:center; justify-content:space-between; gap:22px; margin-top:22px; padding:24px; border-radius:22px; color:#fff; background:linear-gradient(125deg,#232628,#2B94B2); }
.central-payment-hero h3 { margin:5px 0 8px; font-size:clamp(22px,3vw,34px); }
.central-payment-hero p { max-width:720px; margin:0; color:#eef9fb; }
.central-payment-hero .secondary { flex:0 0 auto; background:#fff; color:#364692; }
.payment-parties { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:18px 0; }
.payment-party { display:grid; gap:5px; padding:18px; border:1px solid #E7E7E7; border-radius:18px; background:#fff; }
.payment-party small { color:#6d7275; }
.payment-contracts { display:grid; gap:16px; }
.payment-contract { padding:20px; border:1px solid #dfe9eb; border-radius:20px; background:#fff; box-shadow:0 12px 30px rgba(35,38,40,.06); }
.payment-contract-head,.payment-contract-foot,.payment-product { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.payment-contract-head h3 { margin:4px 0 0; }
.payment-contract-total { color:#2B94B2; font-size:22px; }
.payment-products { display:grid; gap:8px; margin:16px 0; padding:14px; border-radius:14px; background:#F0F0F0; }
.payment-product small { display:block; color:#687075; }
.payment-provider-actions { display:flex; flex-wrap:wrap; gap:9px; }
.payment-provider-actions .paypal { color:#173f86; border-color:#173f86; background:#fff; }
.payment-history-panel { margin-top:18px; }
.payment-history .payment-item small { display:block; }
@media (max-width:760px) { .central-payment-hero,.payment-contract-head,.payment-contract-foot { align-items:stretch; flex-direction:column; } .payment-parties { grid-template-columns:1fr; } }
.billing-section .heading { margin-bottom:20px; }
.status-pill { display:inline-flex; align-items:center; border-radius:999px; padding:8px 13px; color:#236f88; background:#E7F6FA; font-size:12px; font-weight:800; }
.status-pill.blocked { color:#9a372d; background:#FFF0ED; }
.payment-history { display:grid; gap:8px; margin-top:16px; }
.payment-item { display:flex; justify-content:space-between; gap:12px; padding:11px 12px; border:1px solid #E7E7E7; border-radius:12px; background:#fff; font-size:12px; }
.payment-item strong { color:#232628; }
.payment-item small { display:block; color:#6b747a; margin-top:3px; }
.metrics-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:18px 0; }
.metrics-grid > div { padding:18px; border:1px solid #E7E7E7; border-radius:16px; background:#fff; }
.metrics-grid span { display:block; color:#40464B; font-size:12px; font-weight:700; }
.metrics-grid strong { display:block; color:#2B94B2; font-size:30px; margin-top:8px; }
.lead-list { display:grid; gap:10px; }
.lead { display:grid; grid-template-columns:1.2fr 1.5fr 120px auto; gap:14px; align-items:center; padding:14px 16px; border:1px solid #E7E7E7; border-radius:14px; background:#fff; font-size:13px; }
.lead small { display:block; color:#40464B; margin-top:4px; }
.lead select { margin:0; padding:8px; }
.platform-table { background:#fff !important; border-color:#E7E7E7 !important; }
.platform-table th { color:#40464B !important; }
.platform-table th,.platform-table td { border-bottom-color:#E7E7E7 !important; }
.platform-table input,.platform-table select { width:auto; min-width:130px; margin:0; padding:8px; }
.platform-note { background:#FFF4E8 !important; color:#40464B !important; border-left:4px solid #FFBC7D; }
.platform-actions h2 { color:#232628; }
.vika-footer { padding:28px; text-align:center; color:#40464B; font-size:12px; }
.vika-footer a { color:#2B94B2; font-weight:800; text-decoration:none; }
.admin-language { width:auto; min-width:76px; margin:0; padding:7px 9px; border:1px solid rgba(255,255,255,.28); border-radius:8px; color:#fff; background:#303537; font-size:11px; font-weight:800; }
@media (max-width:820px) { .metrics-grid { grid-template-columns:repeat(2,1fr); } .lead { grid-template-columns:1fr; } }

/* Cliente: leitura mais clara, seções alinhadas e formulário sem área vazia. */
main { max-width:1280px; padding-left:clamp(20px,4vw,56px); padding-right:clamp(20px,4vw,56px); }
#app-view > .heading { padding:24px 28px; border:1px solid #E7E7E7; border-radius:22px; background:#F8FAF8; }
#app-view > .heading h1 { font-size:clamp(32px,4vw,50px); }
.settings-grid { grid-template-columns:1fr; }
#settings-form { margin-top:22px; }
#settings-form .panel { padding:30px clamp(22px,3vw,38px); }
#settings-form .panel-title { margin-bottom:18px; }
#settings-form label { margin:14px 0; }
.billing-section,.growth-section,.knowledge-section,.study-section,.leads-section,.embed-section { margin-top:48px; }
.email-section { margin-top:48px; }
.agent-translations { margin-top:32px; padding-top:26px; border-top:1px solid #E7E7E7; }
.agent-translations .panel-title { margin-bottom:12px; }
.agent-translations .panel-title h2 { font-size:20px; }
.agent-translations .status { display:inline-block; margin-left:10px; }
.email-credentials { grid-template-columns:1fr 1fr; gap:12px; }
.api-example { margin-top:14px; color:#FFBC7D; background:#282C2E; font-size:12px; }
.qualification-guide { margin:16px 0; padding-left:20px; color:#40464B; font-size:13px; line-height:1.7; }
.billing-section { padding:clamp(20px,3vw,30px); }
.final-save-section { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:48px; padding:24px 28px; border:1px solid #E7E7E7; border-radius:22px; background:#F8FAF8; }
.final-save-section h2 { margin:6px 0; }
.final-save-section p { margin:0; }
@media (max-width:820px) { .final-save-section { display:block; } .final-save-section button { width:100%; margin-top:18px; } }
.site-context { position:relative; overflow:hidden; margin-top:22px; padding:24px 28px; background:linear-gradient(135deg,#f8fbfb,#fff); }
.site-context:before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:#2B94B2; }
.site-context-head { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.site-context-head .panel-title { margin-bottom:0; }
.site-context .note { max-width:760px; margin:4px 0 18px; background:#f3f8f9; }
.site-picker-label { max-width:720px; margin:0; color:#232628; font-size:12px; }
.site-picker-label select { min-height:48px; margin-top:7px; font-weight:700; border-color:#b9dbe2; background:#fff; }
.selected-site-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:12px; color:#56636a; font-size:12px; }
.selected-site-meta strong { color:#232628; }
.site-meta-dot { width:8px; height:8px; border-radius:50%; background:#35b97a; box-shadow:0 0 0 4px rgba(53,185,122,.12); }
.identity-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:20px; border-bottom:1px solid #edf0f0; }
.identity-heading .panel-title { margin-bottom:0; align-items:flex-start; }
.identity-heading .panel-title h2 { margin:0; }
.identity-heading .panel-title p { margin:6px 0 0; font-size:13px; color:#6a7478; }
.site-badge { display:inline-flex; align-items:center; gap:7px; padding:8px 11px; border-radius:999px; color:#236f88; background:#e7f6fa; font-size:11px; font-weight:800; white-space:nowrap; }
.site-badge:before { content:""; width:6px; height:6px; border-radius:50%; background:#2B94B2; }
.identity-savebar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:28px; padding:16px 18px; border:1px solid #dfe9eb; border-radius:15px; background:#f8fbfb; }
.identity-savebar strong, .identity-savebar span { display:block; }
.identity-savebar strong { color:#232628; font-size:13px; }
.identity-savebar span { margin-top:4px; color:#6d777b; font-size:12px; }
.identity-savebar .primary { flex:0 0 auto; }
.avior-products { margin-top:22px; padding:16px 16px 4px; border:1px solid #e0ebed; border-radius:15px; background:#f8fbfb; }
.panel-subtitle { color:#232628; font-size:13px; font-weight:850; margin-bottom:8px; }
.avior-products label { margin:12px 0; }
.avior-products .check { color:#30464d; }
.field-hint { margin:4px 0 12px; color:#69777b; font-size:11px; line-height:1.45; }
.site-control-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.9fr); gap:18px; align-items:start; }
.new-site-box { padding:16px; border:1px solid #dfe9eb; border-radius:15px; background:#f8fbfb; }
.new-site-box .panel-subtitle { margin-bottom:12px; }
.site-install-form { display:grid; grid-template-columns:minmax(0,1fr) 160px auto; gap:8px; align-items:center; }
.site-install-form input,.site-install-form select { min-width:0; margin:0; min-height:44px; }
.site-install-form button { min-height:44px; white-space:nowrap; }
.new-site-box .status { display:inline-block; margin-top:10px; }
.selected-site-install { display:grid; grid-template-columns:240px minmax(0,1fr); gap:14px; align-items:start; margin-top:18px; padding-top:18px; border-top:1px solid #e4ecee; }
.selected-site-install strong { display:block; margin-top:7px; color:#232628; font-size:13px; }
.selected-site-install pre { margin:0; min-height:58px; color:#236f88; background:#eef7f8; }
@media (max-width:650px) { .site-context-head,.identity-heading,.identity-savebar { display:block; } .site-context-head .status,.identity-heading .site-badge { display:inline-flex; margin-top:14px; } .identity-savebar .primary { width:100%; margin-top:14px; } }
@media (max-width:820px) { .site-control-grid,.selected-site-install { grid-template-columns:1fr; } .site-install-form { grid-template-columns:1fr; } .site-install-form button { width:100%; } }