@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{--navy:#102746;--navy2:#17385f;--blue:#376cf4;--blue2:#5b83fa;--ink:#1d2e49;--muted:#7c8ba2;--line:#e5ebf4;--bg:#f4f7fc;--green:#19a978;--purple:#8068e8;--orange:#f39b4a}
*{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{margin:0;font-family:'DM Sans',Arial,sans-serif;color:var(--ink);background:var(--bg);font-size:13px}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}.logo{display:flex;align-items:center;gap:9px;font:800 21px Manrope,sans-serif;color:#152b49;white-space:nowrap}.logo b{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,#5c8bff,#2c5ee2);box-shadow:0 5px 13px #376cf42d;color:white;font-size:20px}.logo.white{color:#fff}.logo.white b{background:linear-gradient(145deg,#70a1ff,#376cf4)}
/* Sign in */
.login-bg{min-height:100vh;display:grid;grid-template-columns:minmax(300px,1.05fr) minmax(420px,.95fr);padding:0;background:#f6f8fd;overflow:hidden}.login-showcase{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:42px clamp(32px,6vw,94px);min-height:100vh;color:#fff;background:radial-gradient(circle at 78% 20%,#426ddc 0,transparent 28%),linear-gradient(145deg,#102746 0%,#163c6d 62%,#3158b4 100%);overflow:hidden}.login-showcase:before,.login-showcase:after{content:"";position:absolute;border:1px solid #ffffff14;border-radius:50%;pointer-events:none}.login-showcase:before{width:570px;height:570px;right:-260px;top:15%;box-shadow:0 0 0 45px #ffffff05,0 0 0 95px #ffffff04}.login-showcase:after{width:290px;height:290px;right:-100px;top:31%;background:linear-gradient(135deg,#ffffff0c,#ffffff00)}.login-brand{position:relative;z-index:1;display:flex;align-items:center;gap:10px;font:800 23px Manrope}.login-brand .brand-icon{width:39px;height:39px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(140deg,#80a4ff,#386cf1);box-shadow:0 8px 22px #0002;font-size:22px}.login-brand small{display:block;font:700 8px 'DM Sans';letter-spacing:1.7px;color:#a9c2f5;margin-top:4px}.showcase-copy{position:relative;z-index:1;max-width:550px;margin:50px 0}.showcase-copy .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:20px;background:#ffffff13;border:1px solid #ffffff20;color:#cbdcff;font-size:9px;font-weight:800;letter-spacing:1.4px}.showcase-copy h1{font:800 clamp(35px,4.1vw,58px)/1.12 Manrope;letter-spacing:-2.4px;margin:25px 0 17px}.showcase-copy h1 span{color:#9db9ff}.showcase-copy p{max-width:420px;color:#c2d3ee;line-height:1.9;font-size:13px}.showcase-points{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.showcase-points span{border:1px solid #ffffff20;background:#ffffff0b;border-radius:9px;padding:10px 12px;color:#e4edff;font-size:10px}.showcase-points b{color:#84e4bf;margin-right:6px}.showcase-foot{position:relative;z-index:1;color:#9fb7dc;font-size:10px}.login-side{display:grid;place-items:center;padding:38px 28px;position:relative}.login-card{width:min(420px,100%);padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}.login-card .login-mobile-brand{display:none}.login-card h1{font:800 30px Manrope;letter-spacing:-1.1px;color:#1a2e4b;margin:0 0 8px}.login-card>p{margin:0 0 29px;color:#8290a4;font-size:12px;line-height:1.7}.login-card label{display:flex;flex-direction:column;gap:8px;margin:17px 0;font-size:11px;font-weight:700;color:#435773}.login-card input{width:100%;height:47px;padding:0 14px;border:1px solid #dce5f0;border-radius:9px;background:#fff;color:#243852;font-size:12px;outline:none;transition:.15s}.login-card input:focus{border-color:#6891ee;box-shadow:0 0 0 4px #376cf414}.login-card .primary{width:100%;margin-top:9px;height:48px;border:0;border-radius:9px;background:linear-gradient(100deg,#3269e8,#5b83fa);box-shadow:0 8px 20px #376cf42c;color:#fff;font-size:12px;font-weight:800}.login-card .primary:hover{filter:brightness(1.04);transform:translateY(-1px)}.login-secure{display:flex;justify-content:center;gap:7px;margin-top:20px;color:#99a5b5;font-size:9px}.login-secure span{color:#20aa7a}.login-card .error{padding:12px 13px;border:1px solid #f3d4d6;border-radius:8px;background:#fff5f5;color:#a52f39;font-size:11px;margin:0 0 15px}
/* CRM header */
.top{height:66px;background:linear-gradient(105deg,#102746,#17385f);color:#fff;display:flex;align-items:center;padding:0 25px;gap:20px;box-shadow:0 4px 15px #10274616;position:relative;z-index:5}.hamb{display:grid;place-items:center;width:34px;height:34px;border:1px solid #ffffff20;border-radius:9px;background:#ffffff0c;color:#e8f0ff;font-size:18px}.global-search{display:flex;align-items:center;gap:10px;background:#ffffff13;border:1px solid #ffffff17;color:#c7d6ec;border-radius:10px;padding:11px 14px;width:min(370px,31vw);font-size:11px;margin-left:18px}.top-user{margin-left:auto;display:flex;align-items:center;gap:15px;color:#e6edfa;font-size:11px;white-space:nowrap}.top-user:before{content:"";width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#b3c7ff,#6e82e8);box-shadow:inset 0 0 0 2px #ffffff70}.top-user a{padding:9px 12px;border-radius:8px;background:#ffffff12;color:#fff}.top-nav{height:52px;background:#fff;display:flex;align-items:center;padding:0 62px;gap:30px;border-bottom:1px solid var(--line);box-shadow:0 2px 6px #17385f04;overflow-x:auto;white-space:nowrap}.top-nav a{height:100%;display:flex;align-items:center;border-bottom:3px solid transparent;font-size:11px;font-weight:700;color:#697991;transition:.15s}.top-nav a:hover{color:var(--blue)}.top-nav a.active{color:var(--blue);border-color:var(--blue)}
.shell{display:flex;min-height:calc(100vh - 118px)}.sidebar{width:224px;flex:0 0 224px;background:#fff;border-right:1px solid var(--line);padding:24px 13px 15px;display:flex;flex-direction:column;gap:5px;transition:left .2s}.sidebar>small{font-size:9px;color:#9aa7b8;letter-spacing:1.5px;font-weight:800;padding:0 13px 13px}.sidebar>a{padding:12px 13px;border-radius:9px;font-size:11px;font-weight:600;color:#64758d;display:flex;align-items:center;gap:12px;transition:background .15s,color .15s}.sidebar>a span{width:19px;height:19px;display:grid;place-items:center;border-radius:6px;background:#f0f3f9;color:#7c8da7;font-size:12px}.sidebar>a.active,.sidebar>a:hover{background:#edf3ff;color:#3269e8}.sidebar>a.active span{background:#dce7ff;color:#3269e8}.sidebar-bottom{margin-top:auto;border-top:1px solid var(--line);padding:18px 12px 5px;font-size:10px;font-weight:800;color:#50617b}.sidebar-bottom small{display:block;font-weight:500;color:#9aa6b7;margin-top:5px}.main{padding:29px 32px 20px;min-width:0;flex:1;max-width:1700px;margin:0 auto;width:calc(100% - 224px)}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:15px}.heading>div>small{font-size:9px;letter-spacing:1.3px;color:#9aa6b6;font-weight:800}.heading h1{font:800 27px Manrope;letter-spacing:-.8px;color:#1c304d;margin:7px 0 0}.heading h1 span{color:#aab6c6;font-weight:500}.primary{border:0;background:linear-gradient(100deg,#3269e8,#5b83fa);color:white;padding:12px 17px;border-radius:8px;font-weight:800;font-size:11px;cursor:pointer;box-shadow:0 5px 13px #3269e81c;transition:.15s}.primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}.metric{background:#fff;border:1px solid var(--line);border-radius:13px;padding:20px 21px;box-shadow:0 5px 18px #17385f06;position:relative;overflow:hidden}.metric:after{content:"";position:absolute;width:70px;height:70px;border-radius:50%;right:-28px;top:-30px;background:#eaf0ff}.metric:nth-child(2):after{background:#e1f8ef}.metric:nth-child(3):after{background:#f0eaff}.metric:nth-child(4):after{background:#fff0df}.metric small{display:block;color:#7d8ba0;font-size:10px;font-weight:600}.metric b{display:block;font:800 31px Manrope;color:#1c304d;margin:12px 0 5px}.metric span{font-size:9px;color:#a0aaba}.panel{background:#fff;border:1px solid var(--line);border-radius:13px;padding:22px;margin-bottom:19px;min-width:0;box-shadow:0 5px 18px #17385f05}.panel h2{font:800 15px Manrope;color:#203550;margin:0 0 7px}.panel>p{font-size:11px;color:#7d8ba0;line-height:1.7}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}.panel-head p{margin:0;font-size:10px;color:#8794a6}.panel-head a{color:var(--blue);font-size:10px;font-weight:800}.panel-head input{border:1px solid #dce5ef;border-radius:8px;padding:10px 12px;font-size:10px;width:220px;outline:none}.panel-head input:focus{border-color:#6891ee}.bar-row{display:grid;grid-template-columns:160px minmax(70px,1fr) 150px;gap:14px;align-items:center;margin:19px 0;font-size:10px;color:#53647d}.bar-row>b{text-align:right;font-size:10px;color:#52627b}.bar{height:8px;background:#edf1f8;border-radius:20px;overflow:hidden}.bar i{height:100%;display:block;background:linear-gradient(90deg,#3269e8,#72a0ff);border-radius:20px}.module-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px;margin-top:18px}.module-grid a{padding:15px;border:1px solid #e7edf5;border-radius:10px;background:linear-gradient(140deg,#fff,#fbfcff);transition:.15s}.module-grid a:hover{border-color:#a9c1ff;background:#f6f9ff;transform:translateY(-2px)}.module-grid b,.module-grid small{display:block}.module-grid b{font-size:10px;color:#314661}.module-grid small{font-size:9px;color:#8c99ac;margin-top:8px}.hidden{display:none}.create-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}.create-grid label{font-size:10px;font-weight:700;color:#566881;display:flex;flex-direction:column;gap:7px}.create-grid input,.create-grid select,.create-grid textarea{padding:11px 12px;border:1px solid #dce5ef;border-radius:8px;outline:none;width:100%;font-size:11px;background:#fbfcfe;color:#253954}.create-grid input:focus,.create-grid select:focus,.create-grid textarea:focus{border-color:#6c91ed;box-shadow:0 0 0 3px #376cf412}.create-grid .primary{align-self:end}.table-scroll{overflow:auto;border:1px solid #edf1f6;border-radius:9px}table{width:100%;border-collapse:collapse;font-size:10px}th,td{text-align:left;padding:14px 13px;border-bottom:1px solid #edf1f6;white-space:nowrap}th{font-size:9px;text-transform:uppercase;letter-spacing:.55px;color:#8290a4;background:#f8faff;font-weight:800}td{color:#53657d}tbody tr:hover{background:#f9fbff}tbody tr:last-child td{border-bottom:0}.integration-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.integration-grid .panel{margin:0}.integration-grid p{font-size:10px;line-height:1.7}.integration-symbol{width:38px;height:38px;display:grid;place-items:center;background:linear-gradient(140deg,#e8efff,#f1edff);color:#3269e8;border-radius:11px;margin-bottom:15px;font-size:18px}.badge{display:inline-block;font-size:9px;color:#8c641b;background:#fff4d9;padding:7px 9px;border-radius:6px;font-weight:700}code{background:#eef2f8;padding:3px 5px;border-radius:4px;font-size:10px;color:#435a7a}footer{padding:20px 2px;color:#9aa6b7;font-size:9px}footer a{color:#3269e8;font-weight:700}
@media(max-width:1100px){.sidebar{width:195px;flex-basis:195px}.main{width:calc(100% - 195px);padding:24px 20px}.metrics{gap:10px}.metric{padding:16px}.module-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.top-nav{padding:0 35px;gap:22px}.login-showcase{padding:35px}.login-bg{grid-template-columns:minmax(260px,.85fr) minmax(390px,1.15fr)}}
@media(max-width:760px){.login-bg{grid-template-columns:1fr}.login-showcase{display:none}.login-side{min-height:100vh;padding:24px}.login-card{width:min(430px,100%)}.login-card .login-mobile-brand{display:flex;align-items:center;gap:10px;margin-bottom:36px;font:800 21px Manrope;color:#19304f}.login-mobile-brand b{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(140deg,#5c8bff,#2c5ee2);color:#fff}.top{height:60px;padding:0 12px;gap:10px}.global-search{display:none}.top-user{font-size:0;gap:7px}.top-user:before{width:28px;height:28px}.top-user a{font-size:10px}.top-nav{height:47px;padding:0 15px;gap:20px}.shell{display:block}.sidebar{position:fixed;z-index:10;left:-240px;top:107px;bottom:0;width:224px;box-shadow:0 12px 35px #10274626}.nav-open .sidebar{left:0}.main{width:100%;padding:21px 13px}.heading h1{font-size:23px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.metric{padding:14px}.metric b{font-size:26px}.module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.integration-grid{grid-template-columns:1fr}.create-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.panel{padding:16px}.bar-row{grid-template-columns:105px minmax(50px,1fr) 90px;gap:8px}.bar-row>b{font-size:9px}.heading{margin-bottom:18px}}
@media(max-width:480px){.create-grid{grid-template-columns:1fr}.panel-head{align-items:flex-start;flex-direction:column}.panel-head input{width:100%}.heading .primary{padding:10px 11px}.login-card h1{font-size:27px}.login-side{padding:22px}.bar-row{grid-template-columns:90px minmax(35px,1fr) 75px;gap:6px;font-size:9px}.metrics{gap:8px}.metric small{font-size:9px}.metric b{font-size:24px}.top-user a{padding:8px}.logo{font-size:18px}}