:root{
 --primary:#19d979;--primary2:#00b968;--dark:#07131b;--panel:#10232d;
 --muted:#78909c;--bg:#f4f8fa;--border:#e4ecef;
}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:#10212a}
a{text-decoration:none;color:inherit}.brand{font-weight:800;font-size:24px;display:flex;align-items:center;gap:10px}
.logo{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#20ef83,#00a95c);display:grid;place-items:center;color:#062016;font-weight:900}
.btn-primary{background:var(--primary);border:0;color:#062016;font-weight:700;padding:12px 18px;border-radius:12px}
.hero{min-height:100vh;background:radial-gradient(circle at 75% 20%,#164252,transparent 35%),linear-gradient(135deg,#061017,#0b2029);color:white}
.navbar{height:76px;display:flex;align-items:center;justify-content:space-between;max-width:1180px;margin:auto;padding:0 22px}
.hero-wrap{max-width:1180px;margin:auto;padding:90px 22px;display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.hero h1{font-size:clamp(44px,6vw,78px);line-height:1.02;margin:0 0 22px}.hero p{font-size:19px;color:#b9cbd1;line-height:1.7}
.badge{display:inline-block;padding:8px 13px;border:1px solid #2e4a55;border-radius:99px;color:#8cf2b9;margin-bottom:18px}
.phone{background:#071117;border:7px solid #172b34;border-radius:36px;padding:10px;max-width:340px;margin:auto;box-shadow:0 25px 80px #0008}.phone-screen{background:#f4f7f5;border-radius:25px;overflow:hidden;min-height:570px}.chat-top{background:#0d252e;color:#fff;padding:18px}.bubble{padding:10px 14px;border-radius:14px;margin:10px;max-width:78%;background:#fff;box-shadow:0 2px 8px #0001}.bubble.me{margin-left:auto;background:#c8f9d9}
.auth-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#07131b,#10313d)}.auth-card{width:min(430px,92%);background:#fff;border-radius:24px;padding:32px;box-shadow:0 30px 80px #0005}.form-control{width:100%;padding:13px 14px;border:1px solid #dbe5e9;border-radius:12px;margin:7px 0 15px;font-size:15px}
.app{height:100vh;display:flex;background:#f5f8f9}.sidebar{width:330px;background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column}.side-head{padding:18px;display:flex;justify-content:space-between;align-items:center}.search{margin:0 16px 12px}.chat-list{overflow:auto}.chat-item{display:flex;gap:12px;padding:14px 17px;border-bottom:1px solid #f0f3f4}.avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#d5f7e3;font-weight:800;flex:none}.chat-main{flex:1;min-width:0}.chat-name{font-weight:700}.preview{color:#78909c;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-window{flex:1;display:flex;flex-direction:column;background:#eef4f1}.chat-header{height:72px;background:#fff;border-bottom:1px solid var(--border);padding:12px 20px;display:flex;align-items:center;gap:12px}.messages{flex:1;padding:25px;overflow:auto;background-image:radial-gradient(#d6e4de 1px,transparent 1px);background-size:18px 18px}.composer{background:#fff;padding:12px 18px;display:flex;gap:10px}.composer input{flex:1;border:1px solid #dce6e8;border-radius:25px;padding:13px 17px}.empty{margin:auto;text-align:center;color:#78909c}
.admin{min-height:100vh;background:#f5f7f9;display:flex}.admin-side{width:245px;background:#07131b;color:#c7d4d9;padding:20px}.admin-side .brand{color:#fff;margin-bottom:30px}.admin-nav a{display:block;padding:12px 14px;border-radius:10px;margin:5px 0}.admin-nav a.active,.admin-nav a:hover{background:#15322d;color:#8cf2b9}.admin-main{flex:1;padding:28px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.stat{background:#fff;padding:20px;border-radius:16px;border:1px solid var(--border)}.stat small{color:#78909c}.stat h2{margin:8px 0}.table-card{background:#fff;border-radius:16px;border:1px solid var(--border);padding:20px;margin-top:20px;overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:13px;border-bottom:1px solid #edf1f2}
@media(max-width:850px){.hero-wrap{grid-template-columns:1fr}.sidebar{width:90px}.side-head .brand span,.chat-item .chat-main{display:none}.stats{grid-template-columns:1fr 1fr}.admin-side{width:75px}.admin-side .brand span,.admin-nav span{display:none}.admin-main{padding:15px}}