@import "tailwindcss";

:root { --ink:#182230; --muted:#687386; --line:#e7eaf0; --canvas:#f5f7fb; --purple:#5c48e5; --purple-dark:#4231bf; --soft:#f0edff; }
*{box-sizing:border-box} [hidden]{display:none!important} html,body{margin:0;min-height:100%;background:var(--canvas);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} button,input,textarea{font:inherit} button{cursor:pointer} a{text-decoration:none;color:inherit}

.app-shell{min-height:100vh;display:flex}.sidebar{position:fixed;inset:0 auto 0 0;width:248px;background:#fff;border-right:1px solid var(--line);padding:26px 18px 20px;display:flex;flex-direction:column;z-index:30}.brand{display:flex;align-items:center;gap:12px;padding:0 8px}.brand-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,#775cf1,#4b35cc);color:#fff;display:grid;place-items:center;box-shadow:0 8px 22px #5c48e533}.brand strong,.brand span{display:block}.brand strong{font-size:16px;letter-spacing:-.2px}.brand span{font-size:11px;color:#8a93a3;margin-top:2px}.sidebar nav{display:grid;gap:7px;margin-top:38px}.sidebar nav button{border:0;background:transparent;color:#677083;border-radius:11px;display:flex;align-items:center;gap:12px;padding:11px 13px;font-weight:600;font-size:14px;text-align:left}.sidebar nav button:hover{background:#f6f4ff;color:var(--purple)}.sidebar nav button.active{background:var(--soft);color:var(--purple)}.sidebar-foot{margin-top:auto;border-top:1px solid var(--line);padding:18px 4px 0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}.sidebar-foot strong,.sidebar-foot span{display:block}.sidebar-foot strong{font-size:13px}.sidebar-foot span{font-size:11px;color:#8b94a4;margin-top:2px}.sidebar-foot button{border:0;background:transparent;color:#8a93a3;padding:7px}.mini-avatar,.top-avatar{border-radius:50%;background:linear-gradient(145deg,#e7e1ff,#bfb1ff);color:#4e36bc;font-weight:800;display:grid;place-items:center}.mini-avatar{width:36px;height:36px;font-size:12px}.top-avatar{width:40px;height:40px;font-size:12px}.main-panel{margin-left:248px;min-width:0;width:calc(100% - 248px)}.topbar{height:88px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 34px;position:sticky;top:0;z-index:20}.topbar h1{margin:0;font-size:20px;letter-spacing:-.3px}.topbar p{margin:5px 0 0;color:#8a93a3;font-size:12px}.top-actions{margin-left:auto;display:flex;align-items:center;gap:13px}.icon-button{border:1px solid var(--line);background:#fff;color:#687386;border-radius:10px;display:inline-grid;place-items:center;min-width:38px;height:38px}.notification{position:relative}.notification i{position:absolute;right:-3px;top:-5px;width:17px;height:17px;border-radius:50%;background:#f04d6a;color:#fff;font-size:10px;font-style:normal;display:grid;place-items:center;border:2px solid #fff}.mobile-menu{display:none;border:0;background:transparent;margin-right:12px}.content{padding:28px 34px 50px;max-width:1560px;margin:0 auto}

.welcome-card{min-height:266px;border-radius:24px;background:linear-gradient(120deg,#32218f,#6a50e9 62%,#8268f4);padding:34px 42px;color:#fff;display:flex;align-items:center;overflow:hidden;position:relative;box-shadow:0 20px 50px #4732bd26}.welcome-card>div:first-child{max-width:630px;z-index:2}.eyebrow{display:inline-flex;align-items:center;gap:7px;text-transform:uppercase;letter-spacing:1.4px;font-size:10px;font-weight:800;color:#d9d1ff}.welcome-card h2{font-size:32px;line-height:1.13;letter-spacing:-1px;margin:13px 0 12px}.welcome-card p{max-width:590px;color:#ddd7ff;font-size:14px;line-height:1.65;margin:0 0 22px}.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;font-weight:700;font-size:13px}.primary{border:0;background:var(--purple);color:#fff;padding:11px 16px;box-shadow:0 8px 20px #4531bb24}.primary:hover{background:var(--purple-dark)}.welcome-card .primary{background:#fff;color:#4e38cb;box-shadow:none}.secondary{border:1px solid var(--line);background:#fff;color:#546073;padding:9px 13px}.pulse-art{position:absolute!important;right:28px;top:13px;width:290px;height:240px}.pulse-art:before,.pulse-art:after{content:"";position:absolute;inset:35px;border:1px solid #ffffff20;border-radius:50%}.pulse-art:after{inset:70px}.center-node{position:absolute;left:116px;top:92px;width:58px;height:58px;border-radius:18px;background:#fff;color:#5d46dd;display:grid;place-items:center;box-shadow:0 15px 30px #1d116b55}.orbit{position:absolute;border-radius:14px;background:#ffffff18;border:1px solid #ffffff28;backdrop-filter:blur(8px);width:48px;height:48px;display:grid;place-items:center;font-weight:900}.o1{top:20px;left:48px}.o2{right:18px;top:82px}.o3{left:18px;bottom:14px}

.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0}.stat-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:19px;display:flex;gap:14px;box-shadow:0 8px 25px #1e293b08}.stat-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center}.stat-icon.violet{background:#f0edff;color:#654ce3}.stat-icon.blue{background:#eaf4ff;color:#2e80d5}.stat-icon.amber{background:#fff4d8;color:#d88a11}.stat-icon.green{background:#e8f8ef;color:#21935a}.stat-card span,.stat-card small,.stat-card strong{display:block}.stat-card span{font-size:11px;color:#7c8798}.stat-card strong{font-size:24px;margin:4px 0 3px}.stat-card small{font-size:10px;color:#a0a8b5}.two-column{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-bottom:18px}.page-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 8px 25px #1e293b07}.section-title{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}.section-title h3{font-size:15px;margin:0 0 5px}.section-title p{font-size:11px;color:#8a93a3;margin:0}.text-button{border:0;background:transparent;color:var(--purple);display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700}.platform-list{display:grid;gap:10px}.platform-grid.large{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.platform-card{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:13px;padding:12px}.platform-logo{width:38px;height:38px;color:#fff;border-radius:11px;display:grid;place-items:center;font-weight:900;font-size:13px}.platform-card>div:nth-child(2){min-width:0;flex:1}.platform-card strong,.platform-card span{display:block}.platform-card strong{font-size:12px}.platform-card span{font-size:10px;color:#8e97a6;margin-top:3px}.platform-card .connected{color:#2a9860;background:#eaf8f0;border-radius:99px;padding:5px 8px;display:flex;align-items:center;gap:4px;font-weight:700;white-space:nowrap}.platform-card>button{border:0;background:#efecff;color:#5942d1;border-radius:8px;padding:7px 10px;font-weight:700;font-size:10px}.timeline{display:grid;gap:14px}.timeline>div{display:flex;gap:12px;align-items:flex-start;position:relative}.timeline i{width:9px;height:9px;border-radius:50%;margin-top:5px;box-shadow:0 0 0 5px #eee}.timeline i.green{background:#2ba567;box-shadow:0 0 0 5px #e8f8ef}.timeline i.blue{background:#438fdf;box-shadow:0 0 0 5px #e9f4ff}.timeline i.amber{background:#d9901a;box-shadow:0 0 0 5px #fff3d7}.timeline p{margin:0}.timeline strong,.timeline span{display:block}.timeline strong{font-size:11px}.timeline span{font-size:10px;color:#929baa;margin-top:4px}

.table-card{margin-top:0}.table-wrap{overflow:auto;margin:0 -22px -22px}table{width:100%;border-collapse:collapse;min-width:720px}th{text-align:left;text-transform:uppercase;letter-spacing:.7px;color:#9aa3b1;font-size:9px;font-weight:800;padding:10px 22px;background:#fafbfc;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}td{padding:14px 22px;border-bottom:1px solid #eef0f4;font-size:11px;color:#596477}tbody tr:last-child td{border-bottom:0}.profile-cell{display:flex;align-items:center;gap:11px}.profile-avatar{width:37px;height:37px;border-radius:11px;background:linear-gradient(145deg,#ede9ff,#d0c6ff);color:#5a42d1;font-weight:900;display:grid;place-items:center}.profile-cell strong,.profile-cell a{display:block}.profile-cell strong{color:#273142;font-size:11px}.profile-cell a{font-size:9px;color:#8b94a3;margin-top:3px}.profile-cell a svg{display:inline}.country{display:block;font-size:9px;color:#99a2af;margin-top:3px}.status{display:inline-flex!important;border-radius:99px;padding:5px 9px!important;font-size:9px!important;font-weight:800}.status.pending{background:#fff4d7;color:#a86b08}.status.approved,.status.green{background:#e9f8ef;color:#218b55}.status.rejected,.status.red{background:#ffeaee;color:#c83d56}.status.blue{background:#eaf4ff;color:#2679c7}.row-actions{display:flex;gap:6px}.approve{border:0;background:#ece9ff;color:#5941d1;border-radius:8px;padding:7px 9px;display:flex;gap:5px;align-items:center;font-size:9px;font-weight:800}.reject{border:1px solid #f0dfe3;background:#fff;color:#c64c61;border-radius:8px;width:30px}.empty-row{text-align:center!important;padding:36px!important;color:#8d96a5!important}

.filter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.field>span,.full-field>span{display:block;font-size:10px;font-weight:800;color:#667184;margin-bottom:7px}.field button{width:100%;height:42px;border:1px solid #dfe3e9;background:#fff;border-radius:10px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;color:#3f4a5c;font-size:11px}.full-field{display:block;margin-top:16px}.full-field textarea{width:100%;height:92px;resize:vertical;border:1px solid #dfe3e9;border-radius:10px;padding:12px;color:#485365;line-height:1.5;font-size:11px}.form-actions{display:flex;align-items:center;justify-content:space-between;margin-top:15px}.form-actions>span{display:flex;align-items:center;gap:7px;font-size:10px;color:#8993a2}.security-note{margin-top:20px;background:#f5f3ff;border:1px solid #e2ddff;color:#5140b7;border-radius:14px;padding:15px;display:flex;gap:12px}.security-note strong{font-size:12px}.security-note p{font-size:10px;color:#7970ac;margin:4px 0 0}.message-list,.settings-list{display:grid}.message-row{display:grid;grid-template-columns:auto 1fr auto 90px auto;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid #edf0f4}.message-row:last-child{border:0}.message-person strong,.message-person span{display:block}.message-person strong{font-size:11px}.message-person span,.message-row time{font-size:9px;color:#939ba8}.setting-row{display:flex;justify-content:space-between;align-items:center;padding:17px 0;border-bottom:1px solid #edf0f4}.setting-row strong{font-size:12px}.setting-row p{font-size:10px;color:#8b95a4;margin:4px 0 0}.setting-row>span{background:#f1efff;color:#5b45d4;border-radius:8px;padding:7px 10px;font-size:10px;font-weight:800}

.login-page{min-height:100vh;display:grid;grid-template-columns:minmax(420px,42%) 1fr;background:#fff}.login-panel{padding:42px clamp(34px,6vw,90px);display:flex;flex-direction:column;justify-content:center}.login-brand{position:absolute;top:35px;left:clamp(34px,6vw,90px)}.login-copy{margin-bottom:24px}.login-copy .eyebrow{color:#6b52df}.login-copy h1{font-size:38px;letter-spacing:-1.4px;margin:11px 0 9px}.login-copy p{font-size:13px;line-height:1.6;color:#7d8796;max-width:440px}.login-panel form{display:grid;gap:15px;max-width:440px}.login-panel form label>span{display:block;font-size:10px;font-weight:800;color:#5f6a7b;margin-bottom:7px}.login-panel input[type=email],.login-panel input[type=password]{width:100%;height:46px;border:1px solid #dfe3e9;border-radius:11px;padding:0 13px;color:#303a4a;background:#fff}.login-options{display:flex;justify-content:space-between;align-items:center;font-size:10px}.login-options a{color:#5841d1;font-weight:700}.remember{display:flex;align-items:center;gap:7px;color:#747e8e}.remember input{accent-color:#5c48e5}.login-button{height:46px;margin-top:3px}.demo-note{font-size:9px;color:#a0a7b2;max-width:440px;text-align:center;margin-top:15px}.login-visual{margin:18px;border-radius:28px;background:radial-gradient(circle at 72% 20%,#8972ff 0,transparent 30%),linear-gradient(145deg,#261779,#6349df);position:relative;overflow:hidden;color:#fff;padding:70px}.login-visual:before{content:"";position:absolute;width:480px;height:480px;border:1px solid #ffffff17;border-radius:50%;right:-100px;bottom:-130px;box-shadow:0 0 0 60px #ffffff08,0 0 0 120px #ffffff06}.visual-copy{position:relative;z-index:2;max-width:540px;top:18%}.visual-copy>span{font-size:10px;letter-spacing:2px;color:#cfc5ff;font-weight:800}.visual-copy h2{font-size:55px;line-height:1.02;letter-spacing:-2.5px;margin:17px 0}.visual-copy p{font-size:14px;line-height:1.7;color:#d9d1ff;max-width:480px}.floating-card{position:absolute;background:#ffffffec;color:#273143;border-radius:17px;padding:15px 17px;display:flex;align-items:center;gap:12px;box-shadow:0 18px 50px #160a5566;backdrop-filter:blur(12px);z-index:3}.floating-card>svg:first-child{color:#664be1}.floating-card div{min-width:160px}.floating-card strong,.floating-card span{display:block}.floating-card strong{font-size:11px}.floating-card span{font-size:9px;color:#8992a0;margin-top:4px}.floating-card>svg:last-child{color:#2a9b61}.card-one{right:8%;top:22%}.card-two{left:9%;bottom:13%}.toast{position:fixed;right:24px;bottom:24px;background:#1d2735;color:#fff;border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:8px;font-size:11px;box-shadow:0 12px 35px #11182744;z-index:100}.toast svg{color:#5fe09a}.modal-backdrop{position:fixed;inset:0;background:#10182899;display:grid;place-items:center;z-index:120;padding:20px}.session-modal{background:#fff;border-radius:18px;padding:28px;max-width:380px;text-align:center;box-shadow:0 25px 60px #11182755}.session-modal>svg{color:#d88a11}.session-modal h3{margin:12px 0 7px}.session-modal p{color:#7d8796;font-size:12px;line-height:1.6;margin:0 0 18px}

@media(max-width:1100px){.stats-grid{grid-template-columns:repeat(2,1fr)}.platform-grid.large,.filter-grid{grid-template-columns:repeat(2,1fr)}.pulse-art{opacity:.45}.login-page{grid-template-columns:1fr}.login-visual{display:none}.login-panel{min-height:100vh;align-items:center}.login-panel>*{width:100%;max-width:440px}.login-brand{position:absolute;width:auto;left:32px}}
@media(max-width:780px){.sidebar{transform:translateX(-102%);transition:.25s}.sidebar.open{transform:translateX(0);box-shadow:20px 0 50px #11182722}.main-panel{margin-left:0;width:100%}.topbar{padding:0 18px}.mobile-menu{display:block}.content{padding:18px}.welcome-card{padding:28px;min-height:290px}.welcome-card h2{font-size:26px}.pulse-art{right:-80px;bottom:-35px;top:auto}.stats-grid{grid-template-columns:1fr 1fr;gap:10px}.two-column{grid-template-columns:1fr}.platform-grid.large,.filter-grid{grid-template-columns:1fr}.message-row{grid-template-columns:auto 1fr auto}.message-row time{display:none}.form-actions{align-items:flex-end;gap:15px}.form-actions>span{max-width:180px}.setting-row{gap:20px}.section-title{align-items:center}}
@media(max-width:480px){.stats-grid{grid-template-columns:1fr}.topbar p{display:none}.welcome-card{border-radius:18px}.page-card{padding:17px}.table-wrap{margin:0 -17px -17px}.login-panel{padding:100px 24px 40px}.login-brand{left:24px}.login-copy h1{font-size:32px}.message-row .status{display:none!important}}

/* Connected accounts section */

.accounts-panel {
  margin-top: 18px;
}

.empty-accounts {
  border: 1px dashed #d8dce5;
  border-radius: 14px;
  padding: 30px;
  text-align: center;
  color: #8a93a3;
}

.empty-accounts b {
  display: block;
  color: #4f5a6b;
  font-size: 13px;
  margin-bottom: 6px;
}

.empty-accounts span {
  font-size: 10px;
}

.account-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #edf0f4;
}

.account-row:last-child {
  border-bottom: 0;
}

.account-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  background: #eeeeee;
}

.account-info strong,
.account-info span {
  display: block;
}

.account-info strong {
  font-size: 12px;
}

.account-info span {
  margin-top: 3px;
  color: #8a93a3;
  font-size: 10px;
}

.disconnect {
  padding: 7px 10px;
  border: 1px solid #f0dfe3;
  border-radius: 8px;
  background: #ffffff;
  color: #c64c61;
  font-size: 10px;
  font-weight: 700;
}

.disconnect:hover {
  background: #fff4f6;
}