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

:root{--ink:#17182a;--muted:#77798b;--line:#e8e8ef;--paper:#fff;--canvas:#f6f6fa;--purple:#6d5dfc;--purple-dark:#5646ec;--nav:#17182a;--mint:#1daf83;--amber:#e59628;--rose:#e85b7c;--shadow:0 18px 50px rgba(24,25,47,.08)}
*{box-sizing:border-box}html{font-size:16px}body{margin:0;background:var(--canvas);color:var(--ink);font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:246px;padding:30px 20px 22px;background:var(--nav);color:#fff;display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;font:800 20px 'Manrope';letter-spacing:-.7px;padding:0 9px}.brand>span:last-child>span{color:#887cff}.brand-mark{position:relative;width:34px;height:34px;border-radius:11px;background:linear-gradient(145deg,#897dff,#6656f5);box-shadow:0 8px 20px rgba(109,93,252,.28)}.brand-mark:before{content:'';position:absolute;width:13px;height:13px;border:3px solid #fff;border-bottom:0;border-radius:10px 10px 4px 4px;left:8px;top:7px}.brand-mark:after{content:'';position:absolute;width:17px;height:3px;border-radius:4px;background:#fff;left:8px;bottom:8px}.sidebar nav{margin-top:44px;display:grid;gap:7px}.nav-item{display:flex;align-items:center;gap:13px;width:100%;padding:12px 14px;border:0;border-radius:11px;background:transparent;color:#a8a9b7;text-align:left;font-weight:600;font-size:14px;transition:.2s}.nav-item span{width:20px;text-align:center;font-size:18px}.nav-item:hover{background:#202137;color:#fff}.nav-item.active{background:#2b2a49;color:#fff;box-shadow:inset 3px 0 #7c6dfd}.sidebar-foot{margin-top:auto}.secure{display:flex;align-items:center;gap:11px;padding:13px;background:#202136;border:1px solid #2e3046;border-radius:12px}.secure i{width:9px;height:9px;border-radius:50%;background:#35d09b;box-shadow:0 0 0 5px rgba(53,208,155,.1)}.secure div{display:grid}.secure strong{font-size:12px}.secure small{font-size:10px;color:#8f91a3;margin-top:2px}.logout{width:100%;border:0;background:none;color:#797b8d;font-size:12px;padding:16px 0 0}.logout:hover{color:#fff}
main{margin-left:246px;min-height:100vh;padding:0 42px 55px}.topbar{height:112px;display:flex;align-items:center;border-bottom:1px solid var(--line);margin-bottom:32px}.topbar>div{display:grid;gap:2px}.topbar p,.composer-head p{margin:0;color:#999aaa;font-weight:700;font-size:10px;letter-spacing:1.4px}.topbar h1{margin:0;font:750 23px 'Manrope';letter-spacing:-.6px}.topbar .primary-button{margin-left:auto}.menu-button{display:none;border:0;background:none;font-size:22px}.primary-button,.soft-button{border:0;border-radius:11px;font-weight:700;font-size:13px;transition:.2s}.primary-button{padding:12px 17px;background:var(--purple);color:#fff;box-shadow:0 8px 18px rgba(109,93,252,.22)}.primary-button:hover{background:var(--purple-dark);transform:translateY(-1px)}.primary-button.small{padding:10px 14px;font-size:12px}.primary-button.wide{width:100%;display:flex;justify-content:center;gap:15px}.soft-button{padding:11px 15px;background:#efeff5;color:#5d5e70}.soft-button:hover{background:#e6e6ef}.text-button{border:0;background:none;color:var(--purple);font-size:12px;font-weight:700}
.view{display:none;animation:fade .25s ease}.view.active{display:block}@keyframes fade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}.welcome{min-height:164px;padding:31px 34px;border-radius:20px;background:linear-gradient(110deg,#6b5afa,#7b6cf5 55%,#9a8eff);color:#fff;display:flex;align-items:center;position:relative;overflow:hidden;box-shadow:0 18px 40px rgba(88,72,224,.19)}.welcome:after{content:'';position:absolute;width:280px;height:280px;border:60px solid rgba(255,255,255,.06);border-radius:50%;right:-55px;top:-105px}.welcome h2{font:800 26px 'Manrope';letter-spacing:-.9px;margin:10px 0 5px}.welcome p{margin:0;color:#e4e0ff;font-size:13px}.welcome .pill{background:rgba(255,255,255,.14);color:#fff}.welcome .soft-button{margin-left:auto;z-index:1;background:#fff;color:#5d50dc}.pill{display:inline-flex;align-items:center;border-radius:100px;padding:6px 10px;background:#efedff;color:var(--purple);font-size:9px;font-weight:800;letter-spacing:.8px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:18px 0}.stat-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:19px;position:relative;min-height:144px}.stat-card .stat-icon{position:absolute;right:17px;top:17px;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;font-weight:700}.stat-card.purple .stat-icon{color:var(--purple);background:#efedff}.stat-card.mint .stat-icon{color:var(--mint);background:#e6f7f2}.stat-card.amber .stat-icon{color:var(--amber);background:#fff4e4}.stat-card.rose .stat-icon{color:var(--rose);background:#ffebf0}.stat-card p{margin:4px 0 13px;color:var(--muted);font-size:11px;font-weight:600}.stat-card strong{display:block;font:800 29px 'Manrope';letter-spacing:-1px}.stat-card small{display:block;color:#a2a3af;font-size:10px;margin-top:4px}.panel{background:#fff;border:1px solid var(--line);border-radius:17px;overflow:hidden}.panel-head{padding:20px 22px;display:flex;align-items:center;border-bottom:1px solid var(--line)}.panel-head h3{font:750 15px 'Manrope';margin:0}.panel-head p{font-size:11px;color:var(--muted);margin:4px 0 0}.panel-head .text-button{margin-left:auto}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;white-space:nowrap}th{text-align:left;padding:12px 20px;background:#fafafd;color:#9899a7;font-size:9px;letter-spacing:.7px;text-transform:uppercase}td{padding:15px 20px;border-top:1px solid #f0f0f5;font-size:12px;color:#5e6070}td:first-child{color:var(--ink);font-weight:700}.campaign-name{display:grid;gap:3px;max-width:280px;white-space:normal}.campaign-name small{color:#9a9ba8;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:100px;font-size:10px;font-weight:700}.status:before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}.status.sent{background:#e9f8f3;color:#168c69}.status.scheduled{background:#eeecff;color:#6858ec}.status.sending{background:#fff4e1;color:#bd7415}.status.draft{background:#f1f1f5;color:#777988}.status.failed{background:#ffedf1;color:#cf4f6a}.empty{display:none;padding:45px 25px;text-align:center}.empty.show{display:block}.empty>span{display:grid;place-items:center;margin:0 auto 12px;width:43px;height:43px;border-radius:13px;background:#efedff;color:var(--purple);font-size:20px}.empty h4{margin:0 0 5px;font:700 14px 'Manrope'}.empty p{margin:0 0 16px;color:var(--muted);font-size:12px}.section-intro{display:flex;align-items:center;margin:0 0 21px}.section-intro h2{font:800 22px 'Manrope';letter-spacing:-.6px;margin:0}.section-intro p{margin:4px 0 0;color:var(--muted);font-size:12px}.filter-chip,.step-badge{margin-left:auto;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 12px;color:#707181;font-size:11px}.table-action{border:0;background:#f0effc;color:var(--purple);border-radius:8px;padding:7px 9px;font-size:10px;font-weight:700}.table-action.delete{background:#fff0f3;color:#d7506e;margin-left:4px}.device{display:flex;align-items:center;gap:9px}.device-icon{width:31px;height:31px;display:grid;place-items:center;background:#f0effc;color:var(--purple);border-radius:9px;font-size:14px}.device div{display:grid;gap:2px}.device small{color:#9b9ca8;font-weight:400}.topics{display:flex;gap:4px}.topic{padding:4px 7px;border-radius:7px;background:#f1f1f5;color:#757685;font-size:9px}.integration-grid{display:grid;gap:14px}.guide-card{display:flex;gap:18px;padding:23px;background:#fff;border:1px solid var(--line);border-radius:16px}.guide-card .number{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:10px;background:#efedff;color:var(--purple);font:800 13px 'Manrope'}.guide-card h3{margin:2px 0 6px;font:750 15px 'Manrope'}.guide-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}.guide-card>div{width:100%;min-width:0}code,pre{font-family:'SFMono-Regular',Consolas,monospace}.guide-card p code{color:#58596b;background:#f2f2f6;padding:2px 4px;border-radius:4px}.code-row,.code-block{margin-top:14px;border-radius:10px;background:#17182a;color:#d8d8e5;padding:13px 15px;font-size:11px;overflow:auto}.code-block{position:relative;padding-right:80px}.code-block pre{margin:0;white-space:pre-wrap}.copy-button{position:absolute;right:8px;top:8px;border:0;border-radius:7px;background:#2b2d44;color:#c4c5d2;padding:6px 9px;font-size:9px}.notice{display:flex;gap:13px;padding:17px 19px;border-radius:14px;background:#fff9eb;border:1px solid #f5e5bd;margin-top:15px;color:#765e2b}.notice>span{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:50%;background:#f3d98e;font:800 12px serif}.notice strong{font-size:12px}.notice p{font-size:11px;line-height:1.5;margin:3px 0 0;color:#937b45}
.drawer-backdrop{position:fixed;inset:0;background:rgba(13,14,29,.36);backdrop-filter:blur(2px);z-index:30;opacity:0;visibility:hidden;transition:.25s}.drawer-backdrop.open{opacity:1;visibility:visible}.composer{position:fixed;z-index:31;right:0;top:0;bottom:0;width:min(500px,100%);background:#fff;padding:28px 30px;overflow:auto;transform:translateX(105%);transition:.3s ease;box-shadow:-25px 0 60px rgba(20,21,40,.12)}.composer.open{transform:none}.composer-head{display:flex;align-items:center;margin-bottom:25px}.composer-head h2{margin:3px 0 0;font:800 21px 'Manrope';letter-spacing:-.5px}.composer-head button{margin-left:auto;width:34px;height:34px;border:0;border-radius:10px;background:#f0f0f5;color:#686979;font-size:22px}.composer form,.login-card{display:grid;gap:15px}label{position:relative;display:grid;gap:7px;color:#555666;font-size:11px;font-weight:700}label>span{margin-left:auto;color:#aaaab5;font-weight:500;position:absolute;right:0}label>small{font-weight:400;color:#aaaab5;display:inline}input,textarea,select{width:100%;border:1px solid #dfe0e8;border-radius:10px;background:#fff;padding:11px 12px;color:var(--ink);font-size:12px;outline:none;transition:.2s}textarea{resize:vertical;line-height:1.5}input:focus,textarea:focus,select:focus{border-color:#8c80f8;box-shadow:0 0 0 3px rgba(109,93,252,.09)}.preview-label{font-size:9px;letter-spacing:1px;font-weight:800;color:#9a9aa8;margin-top:4px}.notification-preview{display:flex;align-items:flex-start;gap:12px;padding:15px;border-radius:13px;background:#f4f4f7;border:1px solid #e7e7ed}.notification-preview img{width:41px;height:41px;border-radius:10px}.notification-preview div{display:grid;gap:3px;min-width:0}.notification-preview strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.notification-preview p{margin:0;font-size:11px;line-height:1.4;color:#666776}.notification-preview small{color:#a0a1ad;font-size:9px}.composer-actions{display:flex;justify-content:flex-end;gap:9px;padding-top:5px}.form-error{min-height:16px;margin:0;color:#d64c68;font-size:11px}
.login-screen{position:fixed;inset:0;z-index:100;background:#f4f3fa;display:grid;place-items:center;padding:20px}.login-screen.hidden{display:none!important}.login-screen:before,.login-screen:after{content:'';position:absolute;border-radius:50%;filter:blur(1px)}.login-screen:before{width:380px;height:380px;background:#e9e5ff;left:-120px;bottom:-150px}.login-screen:after{width:260px;height:260px;border:65px solid #ebe8ff;right:-80px;top:-100px}.login-card{position:relative;z-index:1;width:min(410px,100%);padding:35px;background:#fff;border:1px solid #e4e3eb;border-radius:22px;box-shadow:var(--shadow)}.brand.centered{color:var(--ink);justify-content:center;margin-bottom:8px}.login-copy{text-align:center;margin:6px 0 9px}.login-copy h1{font:800 26px 'Manrope';letter-spacing:-.8px;margin:11px 0 5px}.login-copy p{font-size:12px;color:var(--muted);margin:0}.login-card>small{text-align:center;color:#aaaab5;font-size:9px}.toast{position:fixed;right:24px;bottom:24px;z-index:120;padding:12px 16px;border-radius:11px;background:#18192a;color:#fff;font-size:12px;box-shadow:var(--shadow);opacity:0;transform:translateY(10px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:none}.toast.error{background:#b7435c}
@media(max-width:1050px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.sidebar{transform:translateX(-105%);transition:.25s}.sidebar.open{transform:none}.sidebar.open:after{content:'';position:fixed;left:246px;right:-100vw;top:0;bottom:0;background:rgba(0,0,0,.25)}main{margin-left:0;padding:0 17px 35px}.topbar{height:88px;margin-bottom:22px}.menu-button{display:block;margin-right:11px}.topbar h1{font-size:19px}.topbar .primary-button{font-size:0;padding:10px}.topbar .primary-button span{font-size:18px}.welcome{padding:25px;min-height:190px;align-items:flex-start}.welcome h2{font-size:22px}.welcome .soft-button{position:absolute;left:25px;bottom:22px}.stats-grid{gap:10px}.stat-card{min-height:128px;padding:15px}.stat-card strong{font-size:25px}.section-intro{align-items:flex-start}.step-badge{display:none}.guide-card{padding:18px;gap:12px}.guide-card .number{width:28px;height:28px}.panel-head{padding:17px}.login-card{padding:27px}.composer{padding:23px 20px}.toast{right:14px;bottom:14px;left:14px;text-align:center}}
@media(max-width:430px){.stats-grid{grid-template-columns:1fr}.stat-card{min-height:117px}.welcome{min-height:205px}.welcome p{max-width:250px}.code-block{padding-right:15px;padding-top:45px}}