:root {
    --ink: #101828;
    --muted: #667085;
    --line: #e6eaf0;
    --surface: #ffffff;
    --canvas: #f5f7fb;
    --navy: #09111f;
    --purple: #6e55e8;
    --purple-deep: #5540ce;
    --purple-soft: #f0edff;
    --cyan: #27c2d1;
    --green: #16a46f;
    --red: #d92d4f;
    --amber: #d88a16;
    --shadow: 0 12px 36px rgba(20, 28, 46, .07);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; color: var(--ink); font-family: 'DM Sans', system-ui, sans-serif; background: var(--canvas); line-height: 1.5; }
button, input, select, textarea { font: inherit; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: 'Manrope', sans-serif; letter-spacing: -.03em; }
p { margin-top: 0; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 252px; z-index: 80; padding: 26px 18px 18px; color: #d8dfec; background: var(--navy); display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.06); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; font: 800 19px/1 'Manrope', sans-serif; letter-spacing: -.04em; }
.brand-mark { position: relative; width: 28px; height: 28px; display: inline-block; transform: rotate(-18deg); }
.brand-mark i { position: absolute; width: 7px; border-radius: 9px; background: linear-gradient(180deg, #9c87ff, #5d43db); }
.brand-mark i:nth-child(1) { left: 2px; top: 11px; height: 13px; }
.brand-mark i:nth-child(2) { left: 10px; top: 5px; height: 19px; }
.brand-mark i:nth-child(3) { left: 18px; top: 0; height: 24px; }
.sidebar-nav { margin-top: 40px; }
.nav-label { margin: 0 12px 9px; color: #6f7a90; text-transform: uppercase; letter-spacing: .13em; font-size: 10px; font-weight: 700; }
.nav-item { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 3px 0; padding: 0 13px; border-radius: 11px; color: #aeb8ca; text-decoration: none; font-weight: 600; font-size: 14px; transition: .18s ease; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-item.active { color: #fff; background: linear-gradient(105deg, rgba(119,91,238,.3), rgba(78,61,166,.15)); box-shadow: inset 3px 0 #8870f4; }
.nav-icon { width: 21px; text-align: center; font-size: 17px; color: #9585ec; }
.sidebar-help { margin-top: auto; padding: 18px; border: 1px solid rgba(144,126,236,.25); border-radius: 16px; background: linear-gradient(145deg, rgba(113,83,223,.16), rgba(255,255,255,.02)); overflow: hidden; position: relative; }
.sidebar-help strong { display: block; color: #fff; font-size: 13px; }
.sidebar-help p { margin: 5px 0 12px; color: #8d99ae; font-size: 11px; line-height: 1.5; }
.sidebar-help a { color: #b8aaff; font-size: 12px; font-weight: 700; text-decoration: none; }
.help-orbit { position: absolute; right: -18px; top: -20px; width: 70px; height: 70px; border: 1px solid rgba(159,140,255,.22); border-radius: 50%; }
.account-card { margin-top: 12px; padding: 10px 8px; display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; border-radius: 12px; }
.account-card:hover { background: rgba(255,255,255,.05); }
.avatar { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: grid; place-items: center; text-decoration: none; color: #fff; background: linear-gradient(145deg, #7e67ee, #4b38b6); font-size: 12px; font-weight: 800; }
.account-copy { min-width: 0; flex: 1; }
.account-copy strong, .account-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-copy strong { font-size: 12px; }
.account-copy small { color: #778399; font-size: 10px; }

.app-main { min-height: 100vh; margin-left: 252px; }
.page-content { max-width: 1600px; margin: 0 auto; padding: 28px 32px 48px; }
.mobile-header { display: none; }
.sidebar-backdrop { display: none; }
.impersonation-banner { padding: 8px 24px; color: #fff; background: #b54708; font-size: 13px; text-align: center; }
.impersonation-banner a { font-weight: 700; }

.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-heading h1 { font-size: clamp(26px, 3vw, 34px); }
.page-heading p { margin: 7px 0 0; color: var(--muted); font-size: 14px; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px; color: var(--purple-deep); text-transform: uppercase; letter-spacing: .11em; font-size: 10px; font-weight: 800; }
.eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 4px var(--purple-soft); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: 0 2px 8px rgba(16,24,40,.025); margin-bottom: 18px; }
.btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 0; border-radius: 10px; color: #fff; background: var(--purple); text-decoration: none; font-weight: 700; font-size: 13px; cursor: pointer; transition: .18s ease; }
.btn:hover { background: var(--purple-deep); transform: translateY(-1px); }
.btn-secondary { color: #344054; background: #fff; border: 1px solid var(--line); }
.btn-secondary:hover { color: var(--purple-deep); background: #faf9ff; }
.btn-danger { background: var(--red); }
.icon-button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; color: #344054; font-size: 12px; font-weight: 700; }
.form-group input, .form-group select, .form-group textarea, .input { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid #d9dee8; border-radius: 10px; background: #fff; color: var(--ink); outline: none; transition: .15s; }
.form-group textarea { min-height: 105px; resize: vertical; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus, .input:focus { border-color: #8d79ef; box-shadow: 0 0 0 3px rgba(110,85,232,.12); }
.alert { margin-bottom: 18px; padding: 12px 15px; border-radius: 11px; border: 1px solid; font-size: 13px; }
.alert-success { color: #067647; background: #ecfdf3; border-color: #abefc6; }
.alert-error { color: #b42318; background: #fef3f2; border-color: #fecdca; }
.alert-warning { color: #93370d; background: #fffaeb; border-color: #fedf89; }
.badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.badge-success { color: #067647; background: #ecfdf3; }
.badge-danger { color: #b42318; background: #fef3f2; }
.badge-warning { color: #93370d; background: #fffaeb; }
.badge-info { color: #3538cd; background: #eef4ff; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; }
th { color: #667085; background: #f9fafb; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }

/* Unified inbox */
.inbox-page { min-height: calc(100vh - 76px); }
.inbox-stats { display: flex; gap: 10px; }
.inbox-stat { min-width: 92px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.inbox-stat strong { display: block; font: 800 18px/1.1 'Manrope'; }
.inbox-stat span { color: var(--muted); font-size: 10px; }
.inbox-grid { display: grid; grid-template-columns: minmax(280px, 340px) minmax(420px, 1fr) 260px; min-height: calc(100vh - 190px); border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; box-shadow: var(--shadow); }
.conversation-pane { border-right: 1px solid var(--line); min-width: 0; }
.inbox-tools { padding: 15px; border-bottom: 1px solid var(--line); background: #fbfcfe; }
.search-wrap { position: relative; }
.search-wrap input { width: 100%; height: 40px; padding: 0 12px 0 36px; border: 1px solid var(--line); border-radius: 10px; outline: none; }
.search-wrap::before { content: '⌕'; position: absolute; left: 12px; top: 7px; color: #98a2b3; font-size: 18px; }
.filter-row { display: flex; gap: 7px; margin-top: 9px; }
.filter-row select { width: 50%; height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; color: #475467; background: #fff; font-size: 11px; }
.conversation-list { height: calc(100vh - 302px); min-height: 440px; overflow-y: auto; }
.conversation-item { display: flex; gap: 11px; padding: 14px 15px; border-bottom: 1px solid #f0f2f5; text-decoration: none; transition: .15s; position: relative; }
.conversation-item:hover { background: #faf9ff; }
.conversation-item.active { background: #f3f1ff; }
.conversation-item.active::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--purple); }
.channel-avatar { width: 41px; height: 41px; flex: 0 0 41px; display: grid; place-items: center; border-radius: 13px; color: #fff; font-size: 15px; font-weight: 800; }
.channel-avatar.instagram_account { background: linear-gradient(145deg, #fd5949, #d6249f 55%, #285aeb); }
.channel-avatar.facebook_page { background: linear-gradient(145deg, #2287ef, #1557b8); }
.channel-avatar.whatsapp_business { background: linear-gradient(145deg, #38d477, #0a9f52); }
.conversation-copy { min-width: 0; flex: 1; }
.conversation-line { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.conversation-line strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.conversation-line time { flex: 0 0 auto; color: #98a2b3; font-size: 9px; }
.conversation-preview { margin: 4px 0 0; color: #7a8495; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.needs-reply-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--purple); }

.chat-pane { min-width: 0; display: flex; flex-direction: column; background: #f8fafc; }
.chat-header { height: 72px; padding: 13px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); background: #fff; }
.chat-header-copy { min-width: 0; flex: 1; }
.chat-header h2 { font-size: 15px; }
.chat-header p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.channel-pill { padding: 4px 8px; border-radius: 999px; color: #475467; background: #f2f4f7; text-transform: capitalize; font-size: 9px; font-weight: 800; }
.message-stream { flex: 1; height: calc(100vh - 386px); min-height: 330px; padding: 22px; overflow-y: auto; }
.day-divider { display: flex; align-items: center; gap: 10px; margin: 8px 0 18px; color: #98a2b3; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.day-divider::before, .day-divider::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.message-row { display: flex; margin: 7px 0; }
.message-row.outbound { justify-content: flex-end; }
.message-bubble { max-width: min(72%, 560px); padding: 10px 12px 7px; border: 1px solid var(--line); border-radius: 5px 15px 15px 15px; background: #fff; box-shadow: 0 2px 4px rgba(16,24,40,.025); }
.message-row.outbound .message-bubble { color: #fff; border-color: #6b52dc; border-radius: 15px 5px 15px 15px; background: linear-gradient(145deg, #765ee5, #6149cf); }
.message-bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
.message-meta { display: flex; justify-content: flex-end; gap: 6px; margin-top: 5px; color: #98a2b3; font-size: 8px; }
.outbound .message-meta { color: rgba(255,255,255,.72); }
.message-error { color: #fda29b; }
.composer { padding: 14px 17px; border-top: 1px solid var(--line); background: #fff; }
.composer-row { display: flex; align-items: flex-end; gap: 10px; }
.composer textarea { flex: 1; min-height: 44px; max-height: 120px; padding: 11px 12px; resize: none; border: 1px solid var(--line); border-radius: 12px; outline: none; }
.composer textarea:focus { border-color: #8d79ef; box-shadow: 0 0 0 3px rgba(110,85,232,.1); }
.send-button { width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 12px; color: #fff; background: var(--purple); cursor: pointer; font-size: 17px; }
.composer-hint { display: flex; justify-content: space-between; margin-top: 6px; color: #98a2b3; font-size: 9px; }
.empty-state { height: 100%; min-height: 360px; display: grid; place-items: center; padding: 30px; text-align: center; color: var(--muted); }
.empty-state strong { display: block; margin-bottom: 6px; color: var(--ink); }

.details-pane { padding: 20px; background: #fff; }
.details-pane h3 { font-size: 13px; margin-bottom: 18px; }
.contact-hero { text-align: center; padding: 8px 0 22px; border-bottom: 1px solid var(--line); }
.contact-avatar { width: 66px; height: 66px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 20px; color: #fff; background: linear-gradient(145deg, #8d79ef, #4e37bd); font: 800 22px 'Manrope'; }
.contact-hero strong { display: block; font-size: 13px; }
.contact-hero span { color: var(--muted); font-size: 10px; }
.detail-list { margin: 18px 0; }
.detail-item { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 10px; }
.detail-item span:first-child { color: var(--muted); }
.detail-item span:last-child { max-width: 130px; overflow: hidden; text-overflow: ellipsis; text-align: right; font-weight: 700; }
.status-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.status-actions button { padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #475467; font-size: 10px; font-weight: 700; cursor: pointer; }
.status-actions button.active { color: var(--purple-deep); border-color: #c9c0f8; background: var(--purple-soft); }

.legal-page { max-width: 820px; margin: 52px auto; padding: 38px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.legal-page h1 { font-size: 34px; }
.legal-page h2 { margin: 28px 0 8px; font-size: 18px; }
.legal-page p, .legal-page li { color: #475467; font-size: 14px; line-height: 1.8; }
.legal-lead { margin-top: 10px; font-size: 17px !important; }
.legal-note { margin-top: 28px; padding: 14px; border-radius: 10px; background: #f8f7ff; }
.public-alert { max-width: 600px; margin: 18px auto; }

/* Public website */
.public-body { color: #f5f7ff; background: #070b14; }
.landing { min-height: 100vh; overflow: hidden; background: radial-gradient(circle at 76% 8%, rgba(92,66,210,.22), transparent 30%), #070b14; }
.landing-nav { max-width: 1200px; height: 82px; margin: auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
.landing-nav .brand, .landing-footer .brand { color: #fff; }
.landing-links, .landing-actions, .landing-footer nav { display: flex; align-items: center; gap: 28px; }
.landing-nav a, .landing-footer a { color: #aab4c8; text-decoration: none; font-size: 13px; font-weight: 600; }
.landing-nav a:hover, .landing-footer a:hover { color: #fff; }
.landing-actions .landing-cta { padding: 10px 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; color: #fff; background: rgba(255,255,255,.06); }
.landing-hero { max-width: 1200px; min-height: 680px; margin: auto; padding: 76px 24px 90px; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 68px; }
.hero-kicker { display: inline-flex; align-items: center; gap: 9px; color: #a99af2; text-transform: uppercase; letter-spacing: .13em; font-size: 10px; font-weight: 800; }
.hero-kicker i { width: 6px; height: 6px; border-radius: 50%; background: #8f79f1; box-shadow: 0 0 0 5px rgba(143,121,241,.12); }
.hero-copy h1 { margin-top: 18px; font-size: clamp(52px, 6.4vw, 84px); line-height: .98; letter-spacing: -.07em; }
.hero-copy h1 em { color: #8b73ef; font-style: normal; }
.hero-copy > p { max-width: 550px; margin: 25px 0 30px; color: #98a4ba; font-size: 17px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-actions a { min-height: 49px; padding: 0 20px; display: inline-flex; align-items: center; gap: 20px; border-radius: 11px; text-decoration: none; font-size: 13px; font-weight: 800; }
.hero-primary { color: #fff; background: linear-gradient(135deg, #8069ee, #5d43cf); box-shadow: 0 14px 34px rgba(92,66,210,.25); }
.hero-secondary { color: #d3d9e5; border: 1px solid rgba(255,255,255,.13); }
.hero-proof { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 26px; color: #68758c; font-size: 10px; }
.hero-proof b { color: #6fdaa3; }
.product-window { border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: #f7f9fc; box-shadow: 0 34px 100px rgba(0,0,0,.42); overflow: hidden; transform: perspective(1200px) rotateY(-3deg) rotateX(1deg); }
.window-bar { height: 37px; padding: 0 12px; display: flex; align-items: center; gap: 5px; color: #697386; background: #fff; border-bottom: 1px solid #e9ecf2; }
.window-bar > span { width: 7px; height: 7px; border-radius: 50%; background: #d5dae3; }
.window-bar small { margin-left: 70px; font-size: 8px; }
.window-body { height: 410px; display: grid; grid-template-columns: 52px 180px 1fr; color: #1d2939; }
.mock-sidebar { padding: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 19px; background: #0b1221; }
.mock-sidebar i { width: 16px; height: 3px; border-radius: 4px; background: #455064; }
.mock-sidebar i.on { height: 16px; background: #7c66e4; }
.mock-logo { width: 20px; height: 20px; margin-bottom: 10px; border-radius: 7px; background: linear-gradient(145deg, #8b74ef, #4e38b9); }
.mock-list { padding: 18px 10px; border-right: 1px solid #e8ebf1; background: #fff; }
.mock-list > strong { font-size: 11px; }
.mock-search { height: 25px; margin: 12px 0 10px; border-radius: 6px; background: #f1f3f7; }
.mock-contact { display: flex; gap: 8px; padding: 9px 7px; border-radius: 7px; }
.mock-contact.active { background: #f0edff; }
.mock-contact b, .mock-chat-head b { width: 25px; height: 25px; flex: 0 0 25px; display: grid; place-items: center; border-radius: 8px; color: #fff; font-size: 7px; }
.mock-contact span, .mock-chat-head span { min-width: 0; }
.mock-contact i, .mock-contact small, .mock-chat-head strong, .mock-chat-head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-contact i { font-style: normal; font-size: 8px; font-weight: 800; }
.mock-contact small { max-width: 115px; color: #98a2b3; font-size: 6px; }
.ig { background: linear-gradient(145deg, #ee5a64, #9d33c5) !important; }
.wa { background: #19ad65 !important; }
.fb { background: #2478d4 !important; }
.mock-chat { display: flex; flex-direction: column; background: #f7f9fc; }
.mock-chat-head { height: 57px; padding: 12px 15px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid #e8ebf1; background: #fff; }
.mock-chat-head strong { font-size: 8px; }
.mock-chat-head small { color: #98a2b3; font-size: 6px; }
.mock-messages { flex: 1; padding: 25px 18px; }
.mock-messages p { width: fit-content; max-width: 80%; padding: 9px 11px; border-radius: 4px 10px 10px 10px; background: #fff; box-shadow: 0 2px 5px rgba(16,24,40,.06); font-size: 7px; }
.mock-messages p.mine { margin-left: auto; color: #fff; border-radius: 10px 4px 10px 10px; background: #7259dd; }
.mock-compose { margin: 10px 15px 15px; padding: 9px 10px; display: flex; justify-content: space-between; border: 1px solid #e2e6ed; border-radius: 8px; color: #98a2b3; background: #fff; font-size: 7px; }
.mock-compose b { color: #7057dd; }
.channel-strip { min-height: 118px; padding: 24px; display: flex; align-items: center; justify-content: center; gap: clamp(28px, 6vw, 78px); border-block: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.018); }
.channel-strip span { color: #566278; text-transform: uppercase; letter-spacing: .12em; font-size: 9px; }
.channel-strip strong { font: 700 16px 'Manrope'; }
.instagram-text { color: #e46ab7; }.facebook-text { color: #5ba7f5; }.whatsapp-text { color: #52d693; }
.landing-section { max-width: 1200px; margin: auto; padding: 120px 24px; }
.section-intro { max-width: 610px; }
.section-intro h2 { font-size: clamp(38px, 5vw, 58px); line-height: 1.08; }
.section-intro p { margin-top: 20px; color: #8995aa; font-size: 15px; line-height: 1.7; }
.feature-bento { margin-top: 58px; display: grid; grid-template-columns: 1.15fr .85fr .85fr; gap: 14px; }
.feature-bento article { min-height: 230px; padding: 28px; border: 1px solid rgba(255,255,255,.08); border-radius: 17px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); }
.feature-bento .feature-large { grid-row: span 2; min-height: 474px; background: radial-gradient(circle at 80% 90%, rgba(111,82,223,.22), transparent 40%), rgba(255,255,255,.035); }
.feature-no { color: #6956c9; font-size: 10px; font-weight: 800; }
.feature-bento h3 { margin: 20px 0 10px; font-size: 21px; }
.feature-bento p { color: #8793a8; font-size: 13px; line-height: 1.75; }
.mini-channels { margin-top: 130px; display: flex; align-items: center; }
.mini-channels i { width: 34px; height: 34px; margin-right: -7px; display: grid; place-items: center; border: 3px solid #111725; border-radius: 50%; color: #fff; background: #6e55e8; font-size: 8px; font-style: normal; font-weight: 800; }
.mini-channels span { margin-left: 18px; color: #9ba7ba; font-size: 10px; }
.security-band { max-width: 1152px; margin: 0 auto 120px; padding: 48px; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 40px; border: 1px solid rgba(255,255,255,.09); border-radius: 20px; background: #0d1422; }
.security-band h2 { font-size: 30px; }.security-band p { margin: 0; color: #8e9aaf; font-size: 13px; line-height: 1.7; }.security-band > a { color: #a999f0; text-decoration: none; font-size: 12px; font-weight: 800; }
.final-cta { max-width: 900px; margin: 0 auto; padding: 100px 24px 130px; text-align: center; position: relative; }
.final-cta h2 { font-size: clamp(36px, 5vw, 56px); }.final-cta p { margin: 18px 0 28px; color: #8995aa; }.final-cta a { display: inline-flex; padding: 15px 23px; border-radius: 11px; color: #fff; background: #7058dc; text-decoration: none; font-size: 13px; font-weight: 800; }
.landing-footer { max-width: 1200px; margin: auto; padding: 28px 24px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,.07); color: #536078; font-size: 10px; }

.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: #070b14; }
.auth-brand-panel { padding: 48px clamp(28px, 6vw, 84px); display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(circle at 20% 85%, rgba(104,76,220,.28), transparent 37%); }
.auth-quote h1 { max-width: 560px; font-size: clamp(40px, 5vw, 67px); line-height: 1.04; }.auth-quote p { max-width: 500px; color: #94a0b5; font-size: 16px; line-height: 1.7; }
.auth-channel-row { display: flex; gap: 10px; }.auth-channel-row span { padding: 7px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: #8e9aaf; font-size: 10px; }
.auth-form-panel { padding: 50px 24px; display: grid; place-items: center; color: var(--ink); background: #f7f8fb; }
.auth-card { width: min(430px, 100%); }.auth-card h2 { font-size: 31px; }.auth-subtitle { margin: 8px 0 28px; color: var(--muted); font-size: 14px; }.auth-card .btn { width: 100%; min-height: 48px; }.auth-switch { margin-top: 20px; color: var(--muted); text-align: center; font-size: 12px; }.auth-switch a { color: var(--purple-deep); font-weight: 800; }

@media (max-width: 1180px) {
    .inbox-grid { grid-template-columns: 310px 1fr; }
    .details-pane { display: none; }
}

@media (max-width: 820px) {
    .sidebar { transform: translateX(-105%); transition: transform .22s ease; }
    .sidebar.open { transform: translateX(0); }
    .sidebar-backdrop.show { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(6,12,24,.55); }
    .app-main { margin-left: 0; }
    .mobile-header { height: 62px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: #fff; }
    .mobile-header .brand { color: var(--ink); }
    .page-content { padding: 20px 14px 36px; }
    .page-heading { align-items: flex-start; flex-direction: column; }
    .inbox-stats { width: 100%; overflow-x: auto; }
    .inbox-grid { grid-template-columns: 1fr; }
    .conversation-pane { display: none; }
    .inbox-grid.no-selection .conversation-pane { display: block; }
    .inbox-grid.no-selection .chat-pane { display: none; }
    .message-stream { height: calc(100vh - 350px); }
    .landing-links { display: none; }
    .landing-hero { padding-top: 44px; grid-template-columns: 1fr; }
    .product-window { transform: none; }
    .feature-bento { grid-template-columns: 1fr; }
    .feature-bento .feature-large { grid-row: auto; min-height: 340px; }
    .mini-channels { margin-top: 70px; }
    .security-band { margin-inline: 16px; padding: 30px; grid-template-columns: 1fr; }
    .auth-shell { grid-template-columns: 1fr; }
    .auth-brand-panel { min-height: 330px; }
}

@media (max-width: 520px) {
    .page-heading h1 { font-size: 26px; }
    .inbox-stat { min-width: 82px; }
    .message-stream { padding: 14px; }
    .message-bubble { max-width: 86%; }
    .legal-page { margin: 20px 12px; padding: 24px 18px; }
    .landing-nav { height: 70px; }.landing-actions > a:first-child { display: none; }
    .landing-hero { gap: 40px; }.window-body { height: 340px; grid-template-columns: 42px 135px 1fr; }.mock-list { padding-inline: 6px; }.mock-contact small { max-width: 75px; }
    .channel-strip { flex-wrap: wrap; gap: 20px 30px; }.channel-strip span { width: 100%; text-align: center; }
    .landing-section { padding-block: 80px; }.landing-footer { align-items: flex-start; flex-direction: column; gap: 20px; }
    .auth-brand-panel { padding: 30px 22px; }.auth-form-panel { padding-block: 38px; }
}

/* Refined application system */
.app-body { background: #f4f6fa; }
.sidebar { width: 268px; padding: 24px 18px 16px; background: linear-gradient(180deg,#0a1120 0%,#0b1425 100%); }
.app-main { margin-left: 268px; display: flex; flex-direction: column; }
.workspace-chip { margin-top: 26px; padding: 11px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: rgba(255,255,255,.035); }
.workspace-chip > span:last-child { min-width: 0; }
.workspace-chip small,.workspace-chip strong { display: block; }
.workspace-chip small { color: #718096; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.workspace-chip strong { color: #e7ebf3; font-size: 12px; }
.workspace-dot { width: 9px; height: 9px; border-radius: 50%; background: #42d493; box-shadow: 0 0 0 5px rgba(66,212,147,.1); }
.sidebar-nav { margin-top: 24px; }
.nav-icon svg { width: 19px; height: 19px; display: block; }
.nav-live-dot { width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: #43d595; box-shadow: 0 0 0 4px rgba(67,213,149,.08); }
.sidebar-help { padding: 15px; }
.help-icon { width: 27px; height: 27px; margin-bottom: 10px; display: grid; place-items: center; border-radius: 8px; color: #b9aaff; background: rgba(131,104,235,.15); }
.help-icon svg { width: 16px; }
.app-topbar { height: 70px; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 40; border-bottom: 1px solid #e7eaf0; background: rgba(255,255,255,.92); backdrop-filter: blur(18px); }
.menu-button { display: none; }
.topbar-title small,.topbar-title strong { display: block; }.topbar-title small { color: #98a2b3; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }.topbar-title strong { font-size: 14px; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }.topbar-link { height: 38px; padding: 0 13px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; color: #344054; background: #fff; text-decoration: none; font-size: 12px; font-weight: 700; }.topbar-link svg { width: 16px; height: 16px; }
.page-content { width: 100%; flex: 1; padding: 32px 34px 52px; }
.app-footer { min-height: 62px; padding: 18px 34px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); color: #98a2b3; background: #fff; font-size: 10px; }.app-footer nav { display: flex; gap: 20px; }.app-footer a { color: #667085; text-decoration: none; }.app-footer a:hover { color: var(--purple-deep); }
.page-actions,.form-actions,.row-actions,.card-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.btn-small { min-height: 34px; padding: 0 11px; font-size: 11px; }
.text-button { padding: 0; border: 0; color: #5d48c8; background: none; font: 700 11px 'DM Sans'; cursor: pointer; }.text-button.danger { color: #c83a54; }
.responsive-table { width: 100%; overflow-x: auto; }.table-link { color: #5e48cb; text-decoration: none; font-weight: 800; font-size: 12px; }.table-subtitle { display: block; margin-top: 3px; color: #98a2b3; font-size: 10px; }
.secure-note { color: #667085; font-size: 10px; }
.panel-card { margin-bottom: 18px; padding: 22px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: 0 3px 12px rgba(16,24,40,.03); }
.panel-header { margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }.panel-header h2 { font-size: 18px; }.panel-header .eyebrow { margin-bottom: 4px; }.panel-header > a { color: var(--purple-deep); text-decoration: none; font-size: 11px; font-weight: 800; }
.polished-empty { min-height: 260px; padding: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #667085; }.polished-empty > span { width: 52px; height: 52px; margin-bottom: 16px; display: grid; place-items: center; border-radius: 15px; color: #6b52d8; background: #f0edff; font-size: 22px; }.polished-empty h3 { color: var(--ink); font-size: 18px; }.polished-empty p { max-width: 460px; margin: 8px 0 18px; font-size: 13px; }.polished-empty.compact { min-height: 100px; }

/* Dashboard */
.dashboard-hero { margin-bottom: 24px; padding: 30px 32px; display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; border-radius: 20px; color: #fff; background: radial-gradient(circle at 88% 10%,rgba(149,126,255,.32),transparent 34%),linear-gradient(125deg,#111a2c,#17173b); box-shadow: 0 18px 42px rgba(13,20,43,.12); }.dashboard-hero .eyebrow { color: #b8aaff; }.dashboard-hero h1 { font-size: clamp(28px,4vw,40px); }.dashboard-hero p { margin: 8px 0 0; color: #aeb7c8; }.dashboard-hero .btn-secondary { color: #fff; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.07); }
.metric-grid { margin-bottom: 18px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }.metric-card { min-height: 170px; padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: #fff; position: relative; overflow: hidden; }.metric-card::after { content:''; position:absolute; width:90px; height:90px; right:-34px; bottom:-36px; border-radius:50%; background:var(--metric-soft); }.metric-top { display:flex; justify-content:space-between; align-items:center; }.metric-icon { width:35px; height:35px; display:grid; place-items:center; border-radius:10px; color:var(--metric); background:var(--metric-soft); font-weight:800; }.metric-trend { color:#16a46f; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }.metric-card > strong { display:block; margin-top:22px; font:800 30px/1 'Manrope'; }.metric-card h2 { margin-top:7px; font-size:13px; }.metric-card p { margin:4px 0 0; color:#98a2b3; font-size:10px; }.tone-purple{--metric:#6e55e8;--metric-soft:#f0edff}.tone-blue{--metric:#2678d8;--metric-soft:#eaf3ff}.tone-green{--metric:#149965;--metric-soft:#e9f9f1}.tone-amber{--metric:#c97812;--metric-soft:#fff4df}
.dashboard-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(280px,.7fr); gap:18px; }.activity-list { margin:0 -22px -22px; }.activity-row { padding:13px 22px; display:flex; align-items:center; gap:12px; border-top:1px solid #f0f2f5; color:inherit; text-decoration:none; }.activity-row:hover { background:#faf9ff; }.activity-avatar { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border-radius:12px; color:#fff; background:#7058dc; font-weight:800; font-size:12px; }.channel-facebook_page{background:#2879d4}.channel-whatsapp_business{background:#18a961}.channel-instagram_account{background:linear-gradient(145deg,#ec5a66,#9835bf)}.activity-copy{min-width:0;flex:1}.activity-copy strong,.activity-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.activity-copy strong{font-size:12px}.activity-copy small{margin-top:3px;color:#7a8495;font-size:10px}.activity-meta{text-align:right}.activity-meta b,.activity-meta time{display:block}.activity-meta b{font-size:9px}.activity-meta time{margin-top:3px;color:#98a2b3;font-size:9px}.setup-step { padding:13px 0; display:flex; align-items:center; gap:11px; border-bottom:1px solid #f0f2f5; color:inherit; text-decoration:none; }.setup-step > span { width:28px;height:28px;display:grid;place-items:center;border-radius:9px;color:#6b52d8;background:#f0edff;font-size:10px;font-weight:800}.setup-step.complete>span{color:#08764b;background:#e9f9f1}.setup-step div{flex:1}.setup-step strong,.setup-step small{display:block}.setup-step strong{font-size:11px}.setup-step small{margin-top:3px;color:#98a2b3;font-size:9px}.setup-step>b{color:#98a2b3}.policy-card{margin-top:18px;padding:17px;border-radius:13px;color:#dfe5ef;background:#10192a}.policy-card span{color:#9d8df2;text-transform:uppercase;letter-spacing:.08em;font-size:8px;font-weight:800}.policy-card strong{display:block;margin:7px 0;font-size:12px}.policy-card a{color:#b8aaff;text-decoration:none;font-size:10px;font-weight:800}

/* Channels, automations, flows, templates, settings */
.channel-overview { margin-bottom:18px; display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }.channel-overview article { padding:17px; display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:15px; background:#fff; }.channel-overview div{min-width:0;flex:1}.channel-overview strong,.channel-overview small{display:block}.channel-overview strong{font-size:12px}.channel-overview small{color:#98a2b3;font-size:9px}.channel-overview a{color:var(--purple-deep);text-decoration:none;font-size:10px;font-weight:800}.channel-logo{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:12px;color:#fff;font-size:10px;font-weight:800}.tk{background:#121826}.channel-list{margin:0 -22px -22px}.channel-row{padding:17px 22px;display:grid;grid-template-columns:auto minmax(180px,1.3fr) minmax(120px,.7fr) minmax(100px,.6fr) auto;align-items:center;gap:14px;border-top:1px solid #f0f2f5}.channel-identity strong,.channel-identity small,.channel-health small,.channel-date small,.channel-date strong{display:block}.channel-identity strong{font-size:12px}.channel-identity small,.channel-health small,.channel-date small{margin-top:3px;color:#98a2b3;font-size:9px}.channel-date strong{font-size:10px}.channel-row form{margin:0}.compliance-banner{padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-radius:16px;color:#dfe5ef;background:#10192a}.compliance-banner strong{font-size:14px}.compliance-banner p{margin:4px 0 0;color:#8f9baf;font-size:11px}.compliance-banner a{color:#b7a7ff;text-decoration:none;font-size:11px;font-weight:800}.summary-strip{margin-bottom:18px;padding:17px 20px;display:grid;grid-template-columns:120px 120px 140px 1fr;gap:18px;align-items:center;border:1px solid var(--line);border-radius:15px;background:#fff}.summary-strip div{padding-right:18px;border-right:1px solid var(--line)}.summary-strip strong,.summary-strip span{display:block}.summary-strip strong{font:800 21px 'Manrope'}.summary-strip span{color:#98a2b3;font-size:9px}.summary-strip p{margin:0;color:#667085;font-size:10px}.automation-grid,.template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.automation-card,.template-card{padding:19px;border:1px solid var(--line);border-radius:15px;background:#fbfcfe}.automation-card-top{display:flex;align-items:center;justify-content:space-between}.automation-bolt{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:#654bd0;background:#eeeaff}.automation-card h2,.template-card h2{margin-top:18px;font-size:15px}.automation-card>p,.template-card>p{min-height:38px;margin:6px 0;color:#667085;font-size:10px;line-height:1.6}.automation-meta{margin:16px 0;padding:10px 0;display:flex;gap:8px;border-block:1px solid var(--line)}.automation-meta span,.template-type{color:#667085;font-size:9px}.card-actions form,.template-card form{margin:0}.builder-callout{margin-bottom:18px;padding:23px;display:flex;align-items:center;gap:24px;border-radius:17px;color:#fff;background:linear-gradient(120deg,#6d54de,#4b36b2)}.builder-callout strong{font-size:15px}.builder-callout p{margin:4px 0 0;color:#d6d0f5;font-size:11px}.builder-nodes{display:flex;align-items:center}.builder-nodes i{width:26px;height:26px;border:4px solid rgba(255,255,255,.18);border-radius:8px;background:#fff}.builder-nodes span{width:24px;height:2px;background:rgba(255,255,255,.35)}.template-card>div:last-child{margin-top:16px;display:flex;align-items:center;justify-content:space-between}.template-card small{color:#98a2b3;font-size:9px}.form-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:18px}.form-group small{display:block;margin-top:6px;color:#98a2b3;font-size:10px}.form-group code{color:#5e48cb}.form-aside h2{font-size:19px}.form-aside ul{padding-left:18px;color:#667085;font-size:12px;line-height:1.9}.settings-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:18px}.settings-list>a{padding:13px 0;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #f0f2f5;color:inherit;text-decoration:none}.settings-list>a:first-of-type{border-top:0}.settings-list span strong,.settings-list small{display:block}.settings-list span{font-size:11px;font-weight:700}.settings-list small{margin-top:3px;color:#98a2b3;font-size:9px;font-weight:400}.logout-card{padding:16px 18px;display:flex;justify-content:space-between;border:1px solid #f3d6dc;border-radius:14px;color:#b4233d;background:#fff7f8;text-decoration:none;font-size:11px;font-weight:800}

/* Public navigation and policy pages */
.public-topbar{height:74px;padding:0 max(24px,calc((100vw - 1200px)/2));display:flex;align-items:center;justify-content:space-between;gap:28px;border-bottom:1px solid rgba(255,255,255,.07);background:#070b14}.public-topbar nav,.public-topbar>div{display:flex;align-items:center;gap:24px}.public-topbar a{color:#aab4c8;text-decoration:none;font-size:12px;font-weight:700}.public-topbar a:hover{color:#fff}.public-topbar-cta{padding:9px 15px;border:1px solid rgba(255,255,255,.16);border-radius:9px;color:#fff!important;background:rgba(255,255,255,.06)}.public-footer{max-width:1200px;margin:auto;padding:50px 24px;display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:42px;border-top:1px solid rgba(255,255,255,.07);color:#718096}.public-footer>div p{max-width:280px;margin-top:15px;font-size:11px;line-height:1.7}.public-footer nav{display:flex;flex-direction:column;gap:9px}.public-footer nav strong{margin-bottom:5px;color:#dce2ed;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.public-footer nav a,.public-footer nav span{color:#718096;text-decoration:none;font-size:10px}.public-footer nav a:hover{color:#fff}.public-shell>.auth-shell{min-height:calc(100vh - 74px)}
.legal-page{max-width:940px;margin:44px auto 70px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#dfe4ed}.legal-header{padding:42px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:radial-gradient(circle at 90% 0,rgba(111,82,223,.2),transparent 35%),#0d1422}.legal-header h1{max-width:720px;font-size:clamp(36px,6vw,58px);line-height:1.05}.legal-header .legal-lead{max-width:730px;margin:18px 0;color:#9ba7ba;font-size:15px!important;line-height:1.75}.legal-meta{padding-top:18px;display:flex;gap:24px;border-top:1px solid rgba(255,255,255,.08);color:#718096;font-size:10px}.legal-meta a{color:#aa9af1}.legal-toc{margin:18px 0 28px;padding:15px 20px;display:flex;gap:22px;flex-wrap:wrap;border:1px solid rgba(255,255,255,.07);border-radius:13px;background:#0b111d}.legal-toc a{color:#9285d6;text-decoration:none;font-size:10px;font-weight:800}.legal-page>section{padding:26px 8px;border-bottom:1px solid rgba(255,255,255,.07)}.legal-page h2{margin:0 0 10px;color:#f1f4f9;font-size:20px}.legal-page h3{margin:18px 0 5px;color:#cfd6e2;font-size:13px}.legal-page p,.legal-page li{color:#8f9baf;font-size:13px;line-height:1.85}.legal-page a{color:#aa9af1}.legal-page ul,.legal-page ol{padding-left:21px}.legal-contact{margin-top:18px!important;padding:26px!important;border:1px solid rgba(140,116,239,.18)!important;border-radius:16px;background:rgba(112,84,222,.08)}.deletion-steps{margin:18px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.deletion-steps section{padding:22px;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:#0d1422}.deletion-steps b{color:#826de4;font-size:10px}.deletion-steps h2{margin-top:13px;font-size:15px}.deletion-steps p{margin:7px 0 0;color:#8f9baf;font-size:11px;line-height:1.7}.permission-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}.permission-list div{padding:17px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:#0d1422}.permission-list strong{font-size:12px}.permission-list p{margin:5px 0 0;font-size:11px}
.app-body .legal-page{padding:28px;border-radius:20px;background:#070b14}

/* Official channel marks */
.channel-logo svg{width:23px;height:23px;display:block}
.channel-logo.ig{background:radial-gradient(circle at 30% 105%,#feda75 0 18%,#fa7e1e 36%,#d62976 60%,#962fbf 80%,#4f5bd5 100%)}
.channel-logo.fb{background:#1877f2}
.channel-logo.wa{background:#25d366}
.channel-health small{white-space:nowrap}
.channel-row{grid-template-columns:auto minmax(180px,1.3fr) minmax(160px,.8fr) minmax(100px,.6fr) auto}

@media(max-width:1100px){.metric-grid{grid-template-columns:repeat(2,1fr)}.dashboard-layout{grid-template-columns:1fr}.automation-grid,.template-grid{grid-template-columns:repeat(2,1fr)}.channel-row{grid-template-columns:auto 1fr 140px auto}.channel-date{display:none}.summary-strip{grid-template-columns:repeat(3,1fr)}.summary-strip p{grid-column:1/-1}.public-footer{grid-template-columns:1.5fr 1fr 1fr}.public-footer nav:last-child{grid-column:2/-1}}
@media(max-width:820px){.app-main{margin-left:0}.app-topbar{height:62px;padding:0 15px}.menu-button{display:grid;place-items:center}.topbar-title{display:none}.page-content{padding:22px 14px 38px}.app-footer{align-items:flex-start;flex-direction:column;padding:18px}.app-footer nav{flex-wrap:wrap}.dashboard-hero{align-items:flex-start;flex-direction:column;padding:24px}.channel-overview{grid-template-columns:1fr}.channel-row{grid-template-columns:auto 1fr auto}.channel-health{display:none}.automation-grid,.template-grid,.settings-grid,.form-layout{grid-template-columns:1fr}.public-topbar nav{display:none}.public-footer{grid-template-columns:1fr 1fr}.public-footer>div{grid-column:1/-1}.deletion-steps{grid-template-columns:1fr}.permission-list{grid-template-columns:1fr}}
@media(max-width:540px){.metric-grid{grid-template-columns:1fr 1fr;gap:9px}.metric-card{min-height:145px;padding:15px}.metric-card>strong{font-size:25px}.page-actions{width:100%}.page-actions .btn{flex:1}.channel-row{grid-template-columns:auto 1fr}.channel-row>.row-actions{grid-column:1/-1}.summary-strip{grid-template-columns:1fr 1fr}.summary-strip div{border-right:0}.automation-grid,.template-grid{grid-template-columns:1fr}.public-topbar{padding:0 16px}.public-topbar>div>a:first-child{display:none}.public-footer{grid-template-columns:1fr}.public-footer nav:last-child{grid-column:auto}.legal-page{margin:20px 12px 42px}.legal-header{padding:28px 20px}.legal-meta{flex-direction:column;gap:6px}.landing-footer nav{flex-wrap:wrap}.activity-meta{display:none}}