@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root { --ink:#17243b; --blue:#5a73ef; --soft:#eef2ff; --paper:#f7f9fb; --muted:#7d899a; --line:#e4e8ee; --lime:#d7f36d; --coral:#ff806c; }.body {} * { box-sizing:border-box; } [hidden] { display:none !important; } body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); font-family:'DM Sans',sans-serif; } a { color:inherit; text-decoration:none; } button { font:inherit; cursor:pointer; }.side-brand strong { margin-left:-8px; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:218px 1fr; }.sidebar { padding:23px 15px 17px; display:flex; flex-direction:column; background:#fff; border-right:1px solid var(--line); }.side-brand { display:flex; align-items:center; gap:8px; padding:0 10px; font:700 20px 'Space Grotesk',sans-serif; letter-spacing:-.05em; }.side-brand span { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; background:var(--lime); font-size:16px; }.side-brand strong { color:var(--blue); }.workspace-name { display:flex; align-items:center; gap:9px; margin:35px 0 26px; padding:10px; border-radius:10px; background:#f7f8fb; }.workspace-avatar { width:26px; height:26px; display:grid; place-items:center; border-radius:8px; color:#fff; background:var(--blue); font:700 11px 'Space Grotesk',sans-serif; }.workspace-name b,.workspace-name small { display:block; }.workspace-name b { max-width:102px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }.workspace-name small { margin-top:2px; color:#a0a9b5; font-size:9px; }.workspace-chevron { margin-left:auto; color:#9ba6b5; font-size:14px; }.side-nav p { margin:21px 10px 8px; color:#a3adba; font-size:9px; font-weight:700; letter-spacing:.14em; }.side-nav a { display:flex; align-items:center; gap:10px; margin:3px 0; padding:10px; border-radius:8px; color:#768398; font-size:11px; }.side-nav a:hover,.side-nav a.active { color:var(--ink); background:var(--soft); font-weight:700; }.side-nav a span { width:17px; text-align:center; color:#92a0b3; }.side-nav a.active span { color:var(--blue); }.side-nav a em { margin-left:auto; padding:3px 6px; border-radius:10px; color:#9aa5b4; background:#f0f2f5; font-size:9px; font-style:normal; }.side-bottom { margin-top:auto; padding:10px; color:#9ba6b5; font-size:10px; }
.app-main { width:min(1060px,calc(100% - 80px)); margin:0 auto; padding:43px 0 40px; }.app-header { display:flex; justify-content:space-between; align-items:flex-start; }.app-kicker { margin:0 0 8px; color:var(--blue); font-size:9px; font-weight:700; letter-spacing:.15em; }.app-header h1 { margin:0; font:700 35px 'Space Grotesk',sans-serif; letter-spacing:-.06em; }.header-actions { display:flex; align-items:center; gap:12px; }.icon-button { width:29px; height:29px; border:1px solid var(--line); border-radius:50%; color:var(--ink); background:#fff; font-weight:700; }.profile { display:flex; align-items:center; gap:7px; color:#66748b; font-size:10px; }.profile span { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--ink); font-size:10px; }.next-action { margin-top:30px; padding:25px 27px; display:flex; justify-content:space-between; gap:30px; border:1px solid var(--line); border-radius:17px; background:#fff; box-shadow:0 12px 30px rgba(23,36,59,.05); }.next-action h2 { margin:0; font:700 23px 'Space Grotesk',sans-serif; letter-spacing:-.04em; }.next-action p:not(.app-kicker) { max-width:490px; margin:9px 0 18px; color:var(--muted); font-size:12px; line-height:1.5; }.action-buttons { display:flex; align-items:center; gap:15px; }.primary-button { display:inline-flex; gap:20px; align-items:center; padding:12px 14px; border-radius:8px; color:#fff; background:var(--ink); font-size:11px; font-weight:700; }.primary-button span { color:var(--lime); font-size:15px; }.quiet-button,.small-action { border:0; background:none; color:var(--blue); font-size:10px; font-weight:700; }.action-progress { width:205px; flex:0 0 205px; align-self:center; }.action-progress > span { color:#66748b; font-size:10px; }.action-progress > div { height:7px; margin:9px 0 7px; border-radius:10px; background:#edf0f4; overflow:hidden; }.action-progress i { display:block; width:33%; height:100%; border-radius:10px; background:var(--blue); }.action-progress small { color:#a0a9b5; font-size:9px; }.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-top:16px; }.metric-grid article { padding:17px 18px; border:1px solid var(--line); border-radius:13px; background:#fff; }.metric-label { display:block; color:#99a4b2; font-size:9px; font-weight:700; letter-spacing:.12em; }.metric-grid strong { display:block; margin:12px 0 3px; font:700 25px 'Space Grotesk',sans-serif; }.metric-grid small { color:#8490a1; font-size:10px; }.lower-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }.content-card { padding:21px; border:1px solid var(--line); border-radius:15px; background:#fff; }.card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }.card-heading h2 { margin:0; font:700 18px 'Space Grotesk',sans-serif; letter-spacing:-.04em; }.small-action { padding-top:4px; }.channel-list { margin-top:20px; }.channel-list > div { display:flex; align-items:center; gap:10px; padding:13px 0; border-top:1px solid #edf0f3; }.channel-icon { width:29px; height:29px; display:grid; place-items:center; border-radius:8px; color:#fff; font-weight:700; }.instagram { background:#c977a3; }.whatsapp { background:#6fc593; }.landing { background:var(--ink); }.channel-list b,.channel-list small { display:block; }.channel-list b { font-size:11px; }.channel-list small { margin-top:3px; color:#9ba6b5; font-size:9px; }.channel-list em { margin-left:auto; color:#a1aab6; font-size:9px; font-style:normal; }.channel-list a { margin-left:auto; color:var(--blue); font-size:10px; font-weight:700; }.zero-badge { padding:6px 8px; border-radius:12px; color:#789087; background:#edf7f0; font-size:9px; }.empty-state { margin-top:20px; padding:25px 17px; text-align:center; border:1px dashed #d9dfe8; border-radius:12px; }.empty-state > div { width:34px; height:34px; margin:auto; display:grid; place-items:center; border-radius:10px; color:var(--blue); background:var(--soft); }.empty-state b { display:block; margin-top:12px; font:700 13px 'Space Grotesk',sans-serif; }.empty-state p { max-width:230px; margin:7px auto 14px; color:var(--muted); font-size:10px; line-height:1.45; }.empty-state a { color:var(--blue); font-size:10px; font-weight:700; }.app-toast { position:fixed; bottom:20px; left:50%; transform:translate(-50%,10px); opacity:0; padding:11px 15px; border-radius:9px; background:var(--ink); color:#fff; font-size:11px; transition:.2s; }.app-toast.show { opacity:1; transform:translate(-50%,0); }
 .profile-config { margin-top:16px; }.config-copy { margin:10px 0 18px; color:var(--muted); font-size:11px; }.profile-form { display:grid; grid-template-columns:1fr 1fr; gap:13px; align-items:end; }.profile-form label { display:block; color:#68768b; font-size:10px; font-weight:600; }.profile-form input { width:100%; margin-top:7px; padding:11px; border:1px solid #dce1ea; border-radius:8px; outline:0; color:var(--ink); background:#fcfdff; font-size:12px; }.profile-form input:focus { border-color:var(--blue); box-shadow:0 0 0 3px #e9edff; }.profile-form .primary-button { border:0; justify-content:center; }.share-result { margin-top:18px; padding:14px; border-radius:10px; background:var(--soft); }.share-result > span { display:block; color:#7b8798; font-size:9px; text-transform:uppercase; letter-spacing:.1em; }.share-result > a { display:block; margin:7px 0 10px; overflow:hidden; color:var(--blue); font-size:11px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }.share-result div { display:flex; gap:15px; }.share-result .small-action { padding:0; }.share-result[hidden] { display:none; }
 .internal-view { margin-top:0; }.internal-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }.internal-heading h1 { margin:0; font:700 35px 'Space Grotesk',sans-serif; letter-spacing:-.06em; }.internal-heading p:not(.app-kicker) { max-width:480px; margin:9px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }.internal-heading .quiet-button { margin-top:8px; }.internal-campaign-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(250px,.75fr); gap:16px; margin-top:28px; }.internal-gallery,.internal-composer { padding:21px; border:1px solid var(--line); border-radius:15px; background:#fff; }.internal-card-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }.internal-card-heading h2,.internal-composer h2 { margin:0; font:700 18px 'Space Grotesk',sans-serif; letter-spacing:-.04em; }.internal-card-heading span { color:#8793a3; font-size:9px; }.internal-campaign-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; }.internal-campaign { padding:0; overflow:hidden; text-align:left; border:1px solid var(--line); border-radius:11px; color:var(--ink); background:#fff; }.internal-campaign.selected { border:2px solid var(--blue); }.internal-image { display:block; height:130px; background-size:cover; background-position:center; }.internal-campaign > span:last-child { display:block; padding:10px; }.internal-campaign small,.internal-campaign b,.internal-campaign em { display:block; }.internal-campaign small { color:var(--coral); font-size:8px; font-weight:700; letter-spacing:.1em; }.internal-campaign b { margin-top:5px; font-size:12px; }.internal-campaign em { margin-top:4px; color:var(--muted); font-size:9px; line-height:1.35; font-style:normal; }.internal-selected-image { height:125px; margin:15px 0 12px; border-radius:10px; background-size:cover; background-position:center; }.internal-composer > p:not(.app-kicker) { min-height:38px; margin:0; color:var(--muted); font-size:11px; line-height:1.45; }.internal-composer label { display:block; margin-top:18px; color:#68768b; font-size:10px; font-weight:600; }.internal-composer select { width:100%; margin-top:7px; padding:10px; border:1px solid #dce1ea; border-radius:8px; color:var(--ink); background:#fcfdff; font-size:11px; }.internal-composer .primary-button { width:100%; justify-content:space-between; margin-top:15px; border:0; }.internal-note { color:#9da7b3; font-size:9px; line-height:1.4; }
 .internal-composer input,.internal-composer textarea { width:100%; margin-top:7px; padding:10px; border:1px solid #dce1ea; border-radius:8px; color:var(--ink); background:#fcfdff; outline:0; font-size:11px; resize:vertical; }.internal-composer input:focus,.internal-composer textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px #e9edff; }.internal-selected-image { position:relative; }.internal-overlay-preview { position:absolute; left:12px; right:12px; bottom:12px; padding:7px 9px; border-radius:6px; color:#fff; background:rgba(23,36,59,.78); font:700 11px 'Space Grotesk',sans-serif; }.internal-selected-image span { position:absolute; left:12px; right:12px; bottom:12px; padding:7px 9px; border-radius:6px; color:#fff; background:rgba(23,36,59,.78); font:700 11px 'Space Grotesk',sans-serif; }.network-label { margin:16px 0 8px; color:#68768b; font-size:10px; font-weight:600; }.network-checks { display:flex; flex-wrap:wrap; gap:6px; }.network-checks label { display:flex; align-items:center; gap:5px; padding:7px 9px; border:1px solid #dce1ea; border-radius:16px; color:#66748b; background:#fff; font-size:10px; font-weight:500; }.network-checks label:has(input:checked) { border-color:var(--blue); color:var(--blue); background:var(--soft); }.network-checks input { width:auto; margin:0; accent-color:var(--blue); }
 .channel-connect-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:28px; }.connect-card { padding:19px; display:grid; grid-template-columns:35px 1fr auto; column-gap:11px; align-items:start; border:1px solid var(--line); border-radius:14px; background:#fff; }.connect-icon { width:31px; height:31px; display:grid; place-items:center; grid-row:span 2; border-radius:9px; color:#fff; font-weight:700; }.connect-icon.instagram { background:#c977a3; }.connect-icon.facebook { background:#4f70cf; }.connect-icon.tiktok { background:#17243b; }.connect-icon.whatsapp { background:#6fc593; }.connect-card h2 { margin:0; font:700 16px 'Space Grotesk',sans-serif; }.connect-card p { margin:5px 0 0; color:var(--muted); font-size:10px; line-height:1.4; }.connect-status { grid-column:2; margin-top:13px; color:#a0a9b5; font-size:9px; }.connect-status.connected { color:#62a381; font-weight:700; }.connect-card button { grid-column:3; grid-row:2; align-self:end; padding:8px 9px; border:1px solid #d9dfeb; border-radius:8px; color:var(--blue); background:#fff; font-size:9px; font-weight:700; }.connect-card button:hover { border-color:var(--blue); background:var(--soft); }.connect-card.whatsapp-card label { grid-column:1/-1; margin-top:16px; color:#68768b; font-size:9px; font-weight:600; }.connect-card.whatsapp-card input { width:100%; margin-top:6px; padding:9px; border:1px solid #dce1ea; border-radius:7px; outline:0; font-size:11px; }.connect-card.whatsapp-card button { grid-column:3; }.permissions-note { display:flex; gap:10px; margin-top:16px; padding:14px; border-radius:10px; color:#657395; background:var(--soft); }.permissions-note > span { color:var(--blue); }.permissions-note b { display:block; color:#3e4c7c; font-size:11px; }.permissions-note p { margin:4px 0 0; font-size:10px; line-height:1.4; }
@media(max-width:850px) { .app-shell { grid-template-columns:1fr; }.sidebar { position:static; padding:15px 18px; display:block; border-right:0; border-bottom:1px solid var(--line); }.workspace-name { display:none; }.side-nav { display:flex; gap:5px; margin-top:14px; overflow:auto; }.side-nav p,.side-bottom { display:none; }.side-nav a { flex:0 0 auto; margin:0; }.app-main { width:calc(100% - 32px); padding-top:28px; }.next-action { flex-direction:column; }.action-progress { width:100%; flex:initial; }.lower-grid { grid-template-columns:1fr; }.internal-campaign-layout { grid-template-columns:1fr; }.channel-connect-grid { grid-template-columns:1fr; } }
@media(max-width:520px) { .side-nav a { font-size:10px; }.side-nav a span { display:none; }.app-header h1 { font-size:30px; }.profile b { display:none; }.next-action { padding:20px; }.action-buttons { align-items:flex-start; flex-direction:column; gap:12px; }.metric-grid { gap:7px; }.metric-grid article { padding:13px 11px; }.metric-grid strong { font-size:21px; }.metric-grid small { font-size:9px; }.content-card { padding:17px; }.profile-form { grid-template-columns:1fr; }.share-result div { flex-wrap:wrap; }.internal-heading { flex-direction:column; }.internal-heading h1 { font-size:30px; }.internal-campaign-grid { grid-template-columns:1fr; } }