:root { --sidebar: 264px; }
body { background: #f3f6f8; }

.app { grid-template-columns: var(--sidebar) 1fr; }
aside {
  width: var(--sidebar);
  padding: 22px 16px;
  background: linear-gradient(180deg, #003d6e 0%, #002d52 100%);
  border: 0;
  box-shadow: 12px 0 40px rgba(0, 43, 78, .1);
}
.logo { height: 74px; gap: 13px; padding: 0 8px 18px; }
.logo img { width: 52px; height: 52px; object-fit: contain; object-position:center; padding:3px; background:#ffcf00; border-radius: 12px; box-shadow: 0 8px 22px rgba(0,0,0,.22); }
.logo span { font-size: 14px; letter-spacing: .4px; }
.logo small { font-size: 8px; letter-spacing: 1.8px; margin-top: 5px; }
nav { padding-top: 13px; }
nav button { min-height: 46px; padding: 12px 15px; margin: 5px 0; border: 0; border-radius: 12px; transition: .18s ease; }
nav button:hover { background: rgba(255,255,255,.09); transform: translateX(2px); }
nav button.active { background: #ffcf00; color: #003d6e; box-shadow: 0 9px 24px rgba(0,0,0,.18); }
nav p { margin-top: 28px; }
.aside-foot { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 15px; padding: 12px; }
.avatar { width: 40px; height: 40px; box-shadow: 0 5px 14px rgba(0,0,0,.16); }

main { background: radial-gradient(circle at 92% 0, rgba(255,207,0,.13), transparent 24%), #f5f7f9; }
header { height: 96px; padding: 22px 38px; border: 0; background: rgba(255,255,255,.88); backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(16,24,40,.06); position: sticky; top: 0; z-index: 4; }
header::after { content:""; position:absolute; bottom:0; left:38px; width:46px; height:4px; border-radius:4px; background:#ffcf00; }
header h1 { font-size: 27px; letter-spacing: -1px; color:#101828; }
.eyebrow { font-size: 10px; letter-spacing: 2.2px; }
.online { padding: 9px 13px; background: #eafaf2; border-radius: 30px; }
#theme { width: 38px; height: 38px; border-radius: 50%; background:#f2f4f7; }

.content-wrap { padding: 34px 38px 50px; }
.welcome { padding: 34px 36px; border: 0; border-radius: 22px; background: linear-gradient(125deg,#003d6e 0%,#0065ad 60%,#0877bd 100%); box-shadow: 0 18px 44px rgba(0,61,110,.22); }
.welcome::before { content:""; position:absolute; right:120px; top:-80px; width:240px; height:240px; border-radius:50%; background:rgba(255,207,0,.13); }
.welcome h2 { font-size: 26px; }
.stats { grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 18px; margin: 24px 0; }
.stat,.panel { border: 1px solid rgba(16,24,40,.07); border-radius: 18px; box-shadow: 0 8px 28px rgba(16,24,40,.055); }
.stat { padding: 23px; border-top: 0; position:relative; overflow:hidden; }
.stat::after { content:""; position:absolute; right:-18px; top:-22px; width:74px; height:74px; border-radius:50%; background:rgba(255,207,0,.17); }
.stat strong { font-size: 34px; letter-spacing:-1.5px; }
.panel { padding: 25px; }
.panel h3 { font-size: 18px; color:#101828; }
.grid-2 { gap: 22px; align-items:start; }
label { color:#344054; font-size:12px; letter-spacing:.1px; }
input,select,textarea { margin-top:9px; padding:14px 15px; border-color:#dfe4ea; border-radius:11px; background:#fbfcfd; transition:.18s; }
input:focus,select:focus,textarea:focus { background:#fff; box-shadow:0 0 0 4px rgba(0,91,159,.1); }
.primary { padding:13px 18px; border-radius:11px; box-shadow:none; color:#003d6e; transition:.18s; }
.primary:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(230,186,0,.25); }
.secondary { border-radius:10px; }
.sync-panel { grid-template-columns:1fr auto; padding:22px 25px; border:0; border-left:0; background:linear-gradient(100deg,#fffef4,#fff); }
.sync-panel::before { content:"↻"; width:44px; height:44px; border-radius:13px; background:#ffcf00; color:#003d6e; display:grid; place-items:center; font-size:22px; float:left; margin-right:14px; }
.sync-panel>div { display:block; }
.sync-panel #sync-company { display:none; }
label:has(#send-company),#template-form label:first-of-type,#credential-form label:first-of-type { display:none; }
.template-preview #template-preview { border:0; border-radius:16px; background:linear-gradient(145deg,#e9f9ef,#dff4e7); padding:24px; box-shadow:none; }
.note { border:0; border-radius:12px; padding:15px; background:#fff9df; }
table { border-spacing:0 6px; border-collapse:separate; }
th { background:transparent; border:0; padding:9px 12px; }
td { background:#fafbfc; border:0; padding:14px 12px; }
td:first-child { border-radius:10px 0 0 10px; } td:last-child { border-radius:0 10px 10px 0; }
.badge { border-radius:20px; padding:6px 10px; }
.badge.delivered { color:#005b9f; background:#e5f3ff; }.badge.read { color:#6941c6; background:#f1ebff; }
.read-time { color:#6941c6; font-weight:700; font-size:12px; }
.webhook-box { display:grid; gap:7px; padding:17px; background:#f7f9fb; border-radius:13px; margin:18px 0; }
.webhook-box small { color:#667085; font-size:9px; letter-spacing:1.4px; font-weight:800; margin-top:5px; }
.webhook-box code { overflow-wrap:anywhere; color:#005b9f; font-size:12px; }
.credentials-title { margin-top:28px!important; }
.messages-head .muted { margin:6px 0 0; font-size:12px; }.messages-head>div{min-width:0}
.message-search { max-width:620px; height:50px; display:flex; align-items:center; gap:10px; margin:4px 0 24px; padding:0 15px; border:1px solid #dbe2e8; border-radius:14px; background:#f8fafb; transition:.18s; }
.message-search:focus-within { background:#fff; border-color:#005b9f; box-shadow:0 0 0 4px rgba(0,91,159,.09); }
.message-search>span { color:#005b9f; font-size:25px; line-height:1; }
.message-search input { height:100%; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none!important; }
.message-search button { display:none; border:0; background:#e8edf1; color:#667085; width:26px; height:26px; border-radius:50%; cursor:pointer; font-size:18px; }
.message-search button.visible { display:block; }
.table-scroll { width:100%; overflow-x:auto; }
.phone-value { color:#003d6e; white-space:nowrap; }
.sender-chip { display:inline-block; max-width:210px; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; padding:6px 9px; border-radius:8px; background:#eef5fa; color:#004578; font-size:11px; white-space:nowrap; }
.empty { display:flex; flex-direction:column; gap:7px; }.empty b{color:#344054}.empty span{font-size:12px}

.login-art { border:0; background: radial-gradient(circle at 85% 20%,rgba(255,207,0,.24),transparent 24%),linear-gradient(145deg,#002f55,#005b9f); }
.login-logo { width:112px; height:112px; object-fit:contain; object-position:center; padding:5px; background:#ffcf00; border-radius:20px; box-shadow:0 20px 45px rgba(0,0,0,.25); position:relative; z-index:1; }
.mobile-brand { display:none; width:82px; height:82px; object-fit:contain; object-position:center; padding:4px; background:#ffcf00; border-radius:15px; margin-bottom:30px; }
.product-pill { align-self:flex-start; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); border-radius:30px; padding:8px 13px; margin-top:28px; font-size:11px; font-weight:700; letter-spacing:1px; }
.login-art h1 { margin-top:30px; }
.login-card { background:#fff; padding:38px; border-radius:24px; box-shadow:0 24px 70px rgba(16,24,40,.12); }
.login-card input { border-radius:11px; }

.dark main { background:#071d30; }.dark header { background:rgba(11,49,80,.9); }.dark header h1{color:#fff}.dark td{background:#103956}.dark .panel h3{color:#fff}
@media(max-width:900px){.app{grid-template-columns:1fr}.mobile-brand{display:block}.login-card{box-shadow:none;padding:20px}.content-wrap{padding:24px 18px}.sync-panel{grid-template-columns:1fr}.logo img{width:48px;height:48px}}
@media(max-width:560px){.stats{grid-template-columns:1fr 1fr}.stat{padding:18px}.stat strong{font-size:28px}.welcome{padding:26px}.panel{padding:19px}header{padding:18px 20px}header::after{left:20px}}