.topnav-outer{
  width:100%;
  background:var(--panel);
  border-bottom:1px solid var(--border-soft);
  box-shadow:var(--elev-shadow);
  padding:2px 0;
}
.topnav{
  max-width:1200px;
  margin:0 auto;
  padding:4px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:60px;
}
.topnav__logo{
  width:250px;
  height:52px;
  display:flex;
  align-items:center;
}
.topnav__logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.topnav__actions{
  display:flex;
  align-items:center;
  gap:14px;
}
.topnav-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 20px;
  border-radius:999px;
  font-weight:600;
  font-size:14px;
  color:#f5f6fc;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  text-decoration:none;
  transition:background .15s ease, color .15s ease;
  height:38px;
}
.topnav-pill.active{
  background:rgba(255,255,255,.18);
  color:#fff;
}
.topnav-pill:hover{
  background:rgba(255,255,255,.14);
}
.topnav-pill:focus-visible{
  outline:2px solid rgba(124,182,255,.6);
  outline-offset:2px;
}
.topnav-logout{
  padding:8px 20px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.topnav-outer + .app{
  margin-top:12px;
}
:root{
  --bg-start:#0b0f14; --bg-end:#0e141b;
  --panel:rgba(17,24,33,.78); --panel2:rgba(15,21,29,.58); --panel3:rgba(255,255,255,.04);
  --border:#1f2a37; --border-soft:rgba(255,255,255,.08);
  --text:#e8edf3; --muted:#9aa4ad; --accent:#7cb6ff; --success:#34d399; --danger:#f87171;
  --elev-shadow:0 20px 60px rgba(0,0,0,.35);
  --crm-primary:#8C5EFF;
  --crm-accent:#34D399;
  --crm-bg-start:#0b0f14;
  --crm-bg-end:#0e141b;
  --crm-list-width:280px;
  --crm-card-radius:14px;
  --crm-list-min-height:480px;
}
/* Viewport scoping helpers */
.desktop-only{ display:block }
.mobile-vx{ display:none }
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,var(--bg-start),var(--bg-end));color:var(--text);
     font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Arial; font-size:16px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
.app{max-width:1200px;margin:24px auto;padding:0 16px}
.bar{display:flex;align-items:center;justify-content:space-between;background:var(--panel);
     border:1px solid var(--border-soft);border-radius:16px;padding:12px 16px;box-shadow:var(--elev-shadow);height:84px;overflow:hidden;backdrop-filter:saturate(140%) blur(12px)}
.menu-btn{display:none;align-items:center;justify-content:center;font-size:22px;width:44px;height:44px;border-radius:10px}
.brand{font-weight:600; letter-spacing:.2px; display:flex; align-items:center}
.nav .btn.active{background:rgba(124,182,255,.16); border-color:rgba(124,182,255,.35)}
.brand .logo{height:300px;width:auto;vertical-align:middle;border-radius:10px;margin-right:14px;display:none}
.brand .brand-name,.brand-name{display:none !important}
.pill{padding:8px 12px;border-radius:999px;border:1px solid var(--border-soft);background:var(--panel2);color:var(--muted)}
.pill.online{color:var(--success);border-color:rgba(52,211,153,.4)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.card{background:var(--panel);border:1px solid var(--border-soft);border-radius:18px;padding:18px;box-shadow:var(--elev-shadow);backdrop-filter:saturate(140%) blur(8px)}
.title{margin:0 0 10px 0;font-weight:700;letter-spacing:.2px}
input[type="text"], input[type="tel"], input[type="email"], input[type="password"]{width:100%;height:48px;padding:0 14px;border-radius:12px;border:1px solid var(--border-soft);background:var(--panel2);color:var(--text);font-size:16px;outline:none;transition:border-color .15s, box-shadow .15s}
input[type="text"]::placeholder, input[type="tel"]::placeholder, input[type="email"]::placeholder, input[type="password"]::placeholder{color:#7b8591}
input[type="text"]:focus, input[type="tel"]:focus, input[type="email"]:focus, input[type="password"]:focus{border-color:#2c425d; box-shadow:0 0 0 4px rgba(124,182,255,.18)}
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--border-soft);background:var(--panel3);color:var(--text);cursor:pointer;transition:transform .02s ease, opacity .2s, background-color .15s, border-color .15s;font-weight:600;line-height:1}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn.primary{
  background:linear-gradient(120deg,#4F6FFB,#2EC5FF);
  border-color:transparent;
  color:#fff;
  box-shadow:0 12px 24px rgba(79,111,251,.35);
}
.btn.primary:hover{filter:brightness(1.05)}
.btn-cta{
  height:44px;
  border-radius:999px;
  padding:0 28px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 18px 32px rgba(0,0,0,.55);
}
.btn-cta-dark{
  background:#000;
  color:#f8f8f8;
  border:2px solid #000;
}
.btn-cta-dark:hover{filter:brightness(1.15)}
.btn-cta-outline{
  background:transparent;
  color:#fff;
  border:2px solid rgba(255,255,255,.4);
}
.btn-cta-outline:hover{
  background:#fff;
  color:#030712;
}
.btn.success{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.25);color:#bff5df}
.btn.success:hover{background:rgba(52,211,153,.18);border-color:rgba(52,211,153,.35)}
.btn.danger{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.25);color:#ffd8d8}
.btn.danger:hover{background:rgba(248,113,113,.18);border-color:rgba(248,113,113,.35)}
.btn.logout-btn{
  gap:8px;
  padding:0 20px;
  font-weight:700;
  border-color:rgba(248,113,113,.45);
  background:linear-gradient(120deg,rgba(248,113,113,.22),rgba(239,68,68,.32));
  color:#ffe4e6;
  box-shadow:0 8px 20px rgba(239,68,68,.22);
}
.btn.logout-btn:hover{
  background:linear-gradient(120deg,rgba(248,113,113,.32),rgba(239,68,68,.45));
  border-color:rgba(248,113,113,.65);
}
.btn.logout-btn .icon{
  font-size:16px;
  line-height:1;
  opacity:.9;
}
/* CRM Shell */
.crm-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg,var(--crm-bg-start),var(--crm-bg-end));
  color:var(--text);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.crm-shell::before{
  content:'';
  position:absolute;
  inset:-35% -10% auto -10%;
  height:140%;
  background:
    radial-gradient(circle at 15% 20%, rgba(79,111,251,.35), transparent 55%),
    radial-gradient(circle at 80% 0%, rgba(20,205,211,.22), transparent 50%);
  filter:blur(90px);
  opacity:.85;
  pointer-events:none;
  z-index:0;
}
.crm-shell > *{position:relative;z-index:1}
.crm-appbar{
  display:flex;
  justify-content:center;
  background:linear-gradient(120deg,var(--crm-primary),var(--crm-accent));
  color:#f4f7ff;
  box-shadow:0 6px 24px rgba(0,0,0,.35);
  border-top:1px solid rgba(255,255,255,.12);
  text-align:center;
  padding:0;
  margin-top:auto;
}
.crm-appbar-content{
  width:100%;
  max-width:1100px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  padding:24px 32px 18px;
}
.crm-app-brand{display:flex;flex-direction:column;align-items:center;gap:16px}
.crm-logo-inline{display:flex;flex-direction:column;align-items:center;gap:8px}
.crm-logo-inline img{
  width:60px;
  height:60px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 10px 20px rgba(0,0,0,.4);
}
.crm-app-title span{font-size:12px;opacity:.8;text-transform:uppercase;letter-spacing:.08em}
.crm-app-title strong{display:block;font-size:18px;letter-spacing:.04em}
.crm-app-selects{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  width:100%;
}
.crm-select-group{display:flex;flex-direction:column;gap:4px}
.crm-select-label{font-size:11px;opacity:.85}
.crm-app-selects select{
  border-radius:10px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(10,14,24,.35);
  color:#f9fbff;
  padding:6px 12px;
  min-width:150px;
}
.crm-app-selects select option{color:#000}
.btn.compact{height:34px;padding:0 14px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2)}
.btn-cta{
  height:44px;
  border-radius:999px;
  padding:0 28px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 18px 32px rgba(0,0,0,.55);
}
.btn-cta.dark{
  background:#000;
  color:#f8f8f8;
  border:2px solid #000;
}
.btn-cta.dark:hover{filter:brightness(1.2)}
.btn-cta.outline{
  background:transparent;
  color:#fff;
  border:2px solid rgba(255,255,255,.4);
}
.btn-cta.outline:hover{
  background:#fff;
  color:#030712;
}
.crm-appbar-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  width:100%;
}
.crm-appbar-actions a{
  color:#fdfdff;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  padding:8px 18px;
  border-radius:999px;
  border:1px solid transparent;
  background:rgba(255,255,255,.08);
  opacity:.85;
  transition:opacity .2s ease, border-color .2s ease;
}
.crm-appbar-actions a.active{
  background:rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.45);
  opacity:1;
}
.crm-appbar-actions a:hover{
  opacity:1;
  border-color:rgba(255,255,255,.3);
}
.crm-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 30px 12px;
  gap:20px;
  background:rgba(6,10,20,.55);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.crm-toolbar-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.crm-toolbar-actions .btn.primary{
  background:var(--crm-accent);
  border-color:rgba(255,255,255,.3);
  color:#021327;
  box-shadow:0 10px 20px rgba(32,201,195,.35);
}
.crm-toolbar-actions .btn.primary:hover{filter:brightness(1.05)}
.crm-breadcrumb{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.crm-main-layout{
  display:flex;
  align-items:flex-start;
  gap:24px;
  padding:0 clamp(20px,4vw,48px);
}
.crm-board{
  flex:1;
  display:flex;
  align-items:flex-start;
  gap:20px;
  overflow-x:auto;
  padding:32px 0 48px;
  position:relative;
}
.crm-board::before{
  content:'';
  position:absolute;
  inset:16px;
  border-radius:32px;
  border:1px solid rgba(255,255,255,.08);
  pointer-events:none;
  opacity:.35;
}
.crm-lists{
  display:flex;
  gap:18px;
  align-items:flex-start;
  min-height:calc(100vh - 260px);
  padding-bottom:24px;
}
.crm-list{
  width:var(--crm-list-width);
  flex:0 0 auto;
  background:rgba(7,11,22,.82);
  border:1px solid rgba(255,255,255,.08);
  border-radius:calc(var(--crm-card-radius) + 14px);
  padding:16px 14px 14px;
  display:flex;
  flex-direction:column;
  max-height:calc(100vh - 240px);
  min-height:var(--crm-list-min-height);
  box-shadow:0 30px 60px rgba(2,6,23,.6);
  backdrop-filter:blur(16px);
  gap:10px;
  position:relative;
}
.crm-list::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.04);
  pointer-events:none;
}
.crm-list > *{
  position:relative;
  z-index:1;
}
.crm-list-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.crm-list-title{
  display:block;
  font-size:15px;
  cursor:text;
  border-radius:8px;
  padding:2px 6px;
  transition:background .15s ease, box-shadow .15s ease;
  min-width:80px;
}
.crm-list-title:focus{
  outline:none;
  background:rgba(255,255,255,.15);
  box-shadow:0 0 0 2px rgba(255,255,255,.35);
}
.crm-list-count{
  display:block;
  margin-top:2px;
  font-size:12px;
  color:rgba(255,255,255,.7);
  letter-spacing:.04em;
}
.crm-list-menu{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  width:32px;
  height:32px;
  color:#fff;
  cursor:pointer;
}
.crm-list-menu:hover{background:rgba(255,255,255,.2)}
.crm-list-progress{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:rgba(255,255,255,.65);
}
.crm-list-progress-track{
  flex:1;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  overflow:hidden;
}
.crm-list-progress-bar{
  height:100%;
  border-radius:inherit;
  background:linear-gradient(120deg,var(--crm-primary),var(--crm-accent));
}
.crm-list-progress--empty{font-style:italic;color:rgba(255,255,255,.5)}
.crm-cards{
  flex:1;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-right:4px;
  min-height:60px;
}
.crm-cards::-webkit-scrollbar{width:6px}
.crm-cards::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18);
  border-radius:999px;
}
.crm-list.drop-active{
  box-shadow:0 0 0 2px rgba(79,111,251,.4),0 30px 60px rgba(2,6,23,.6);
}
.crm-card.dragging{
  opacity:.35;
  box-shadow:0 16px 28px rgba(15,23,42,.35);
}
.crm-list-empty{
  margin-top:6px;
  text-align:center;
  font-size:12px;
  color:rgba(255,255,255,.6);
  font-style:italic;
}
.crm-card{
  border-radius:var(--crm-card-radius);
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  color:#0f172a;
  padding:16px 18px;
  box-shadow:0 20px 35px rgba(15,23,42,.18);
  transition:transform .12s ease, box-shadow .2s ease;
  display:flex;
  flex-direction:column;
  gap:10px;
  height:240px;
}
.crm-card-body{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.crm-card-cover{
  margin:-16px -18px 12px -18px;
  border-radius:12px;
  overflow:hidden;
  height:150px;
  box-shadow:0 14px 25px rgba(15,23,42,.2);
  background:#0f172a;
}
.crm-card-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.crm-card:hover{
  transform:translateY(-2px);
  box-shadow:0 24px 40px rgba(15,23,42,.22);
}
.crm-card-title-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.crm-card-title{font-weight:600;font-size:14px}
.crm-card-desc{
  font-size:13px;
  color:#475467;
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.crm-card-meta{
  margin-top:auto;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.crm-card-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  background:rgba(15,23,42,.06);
  color:#0f172a;
}
.crm-card-badge.due{
  background:rgba(255,159,67,.15);
  color:#b45309;
}
.crm-card-badge.icon{
  background:rgba(79,111,251,.12);
  color:#111a2c;
}
.crm-card-status{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.1em;
  border-radius:999px;
  padding:4px 10px;
  font-weight:700;
  white-space:nowrap;
  background:rgba(15,23,42,.08);
  color:#0f172a;
}
.crm-card-status--open{background:rgba(79,111,251,.15);color:#3344ff}
.crm-card-status--in-progress{background:rgba(250,204,21,.18);color:#a16207}
.crm-card-status--done,.crm-card-status--completed{background:rgba(34,197,94,.2);color:#15803d}
.crm-card-status--closed,.crm-card-status--won{background:rgba(45,212,191,.2);color:#0f766e}
.crm-card-status--lost{background:rgba(248,113,113,.18);color:#b91c1c}
.crm-add-card,.crm-add-list{
  background:rgba(255,255,255,.06);
  border:1px dashed rgba(255,255,255,.35);
  border-radius:var(--crm-card-radius);
  color:#eff6ff;
  padding:12px;
  cursor:pointer;
  font-weight:600;
  transition:background .15s ease, border-color .15s ease;
}
.crm-add-card:hover,.crm-add-list:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.5);
}
.crm-add-list{
  align-self:flex-start;
  width:var(--crm-list-width);
  min-height:var(--crm-list-min-height);
  border-radius:calc(var(--crm-card-radius) + 14px);
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  color:#e0ecff;
  padding:24px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  font-size:15px;
  font-weight:600;
  box-shadow:0 30px 60px rgba(2,6,23,.55);
  backdrop-filter:blur(16px);
  border-style:solid;
  text-align:center;
  cursor:pointer;
  transition:transform .15s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.crm-add-list:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.28);
  box-shadow:0 40px 70px rgba(2,6,23,.65);
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
}
.crm-add-list:focus-visible{
  outline:2px solid rgba(124,182,255,.6);
  outline-offset:4px;
}
.crm-board-subtitle{color:var(--muted);font-size:13px;margin-top:4px}
.vertex-panel{
  width:360px;
  flex:0 0 360px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  padding:20px;
  box-shadow:0 25px 60px rgba(5,8,16,.45);
  backdrop-filter:blur(22px);
  color:#f4f7ff;
  display:flex;
  flex-direction:column;
  gap:16px;
  max-height:calc(100vh - 220px);
  position:sticky;
  top:120px;
}
.vertex-panel.collapsed{
  display:none;
}
.vertex-panel-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.vertex-panel-title{
  font-size:18px;
  font-weight:700;
  letter-spacing:.04em;
}
.vertex-pill{
  font-size:11px;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.4);
  margin-left:6px;
}
.vertex-panel-subtitle{
  font-size:12px;
  opacity:.8;
  margin:4px 0 0;
}
.vertex-close{
  border:0;
  background:transparent;
  color:#fff;
  font-size:20px;
  cursor:pointer;
  opacity:.6;
}
.vertex-close:hover{opacity:1}
.vertex-panel-context{
  font-size:13px;
  color:rgba(255,255,255,.85);
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.04);
}
.vertex-suggestions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.vertex-suggestion{
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  padding:6px 12px;
  background:rgba(255,255,255,.05);
  color:#fff;
  cursor:pointer;
  font-size:12px;
  transition:background .15s ease;
}
.vertex-suggestion:hover{background:rgba(255,255,255,.12)}
.vertex-download-report{
  margin:8px 16px 0 16px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  background:rgba(255,255,255,.04);
  cursor:pointer;
  font-size:12px;
  gap:8px;
  justify-content:center;
}
.vertex-download-report[hidden]{display:none}
.vertex-download-report:not([hidden]){display:inline-flex;align-items:center}
.vertex-download-report:hover{background:rgba(255,255,255,.12)}
.vertex-chat{
  flex:1;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-right:4px;
}
.vertex-empty{
  font-size:13px;
  opacity:.75;
  text-align:center;
  padding:30px 0;
}
.vertex-message{
  background:rgba(0,0,0,.2);
  border-radius:18px;
  padding:12px 14px;
  font-size:13px;
  line-height:1.5;
  color:#e3e8ff;
}
.vertex-message.user{
  background:rgba(79,111,251,.18);
  border:1px solid rgba(79,111,251,.38);
}
.vertex-message .vertex-actions{
  margin-top:10px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.vertex-actions button{
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
  background:transparent;
  color:#e3e8ff;
  cursor:pointer;
}
.vertex-research{
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:12px;
  color:#cfe8ff;
}
.vertex-research-item a{
  color:#7dd3fc;
  font-weight:600;
  text-decoration:none;
}
.vertex-research-item a:hover{
  text-decoration:underline;
}
.vertex-research-item p{
  margin:4px 0 0;
  opacity:.85;
  font-size:11px;
  line-height:1.4;
}
.vertex-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  padding:2px 8px;
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#e2e8ff;
}
.vertex-input{
  display:flex;
  gap:10px;
  align-items:center;
}
.vertex-input input{
  flex:1;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.25);
  color:#fff;
  padding:10px 14px;
}
.vertex-input button{
  height:44px;
}
.vertex-loading{
  font-size:12px;
  opacity:.6;
}
.vertex-panel.collapsed + .crm-board{
  flex:1;
}
/* Global floating AI panel */
.vertex-fab{
  position:fixed;
  right:24px;
  top:120px;
  width:56px;
  height:56px;
  border-radius:50%;
  border:0;
  background:linear-gradient(135deg,#5b6bff,#3ce0ff);
  color:#fff;
  font-size:24px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  cursor:pointer;
  z-index:300;
}
.vertex-floating-panel{
  position:fixed;
  right:24px;
  top:96px;
  bottom:auto;
  width:360px;
  max-height:calc(100vh - 160px);
  background:rgba(9,12,22,.94);
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  box-shadow:0 35px 60px rgba(1,3,9,.7);
  backdrop-filter:blur(22px);
  color:#f8fbff;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
  z-index:300;
}
.vertex-floating-panel.collapsed{display:none}
.vertex-floating-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.vertex-floating-context{
  font-size:12px;
  opacity:.8;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.04);
}
.vertex-floating-chat{flex:1;overflow:auto;display:flex;flex-direction:column;gap:12px;min-height:120px}
.vertex-floating-input{
  display:flex;
  gap:8px;
  align-items:center;
}
.vertex-floating-input input{
  flex:1;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.3);
  color:#fff;
  padding:10px 12px;
}
.vertex-floating-input button{height:42px}
@media (max-width:640px){
  .vertex-floating-panel{width:90%;right:5%;top:auto;bottom:110px;}
  .vertex-fab{right:16px;top:auto;bottom:16px;}
}
@media (max-width:1200px){
  .vertex-panel{
    position:relative;
    top:0;
    max-height:none;
  }
  .crm-main-layout{
    flex-direction:column;
  }
  .vertex-panel.collapsed{display:none}
}
.crm-theme-panel-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:190;
  display:none;
}
.crm-theme-panel-backdrop.show{display:block}
.crm-theme-panel{
  position:fixed;
  right:-420px;
  top:0;
  bottom:0;
  width:360px;
  background:var(--panel);
  border-left:1px solid var(--border-soft);
  box-shadow:var(--elev-shadow);
  padding:24px;
  z-index:200;
  display:flex;
  flex-direction:column;
  gap:16px;
  transition:right .3s ease;
}
.crm-theme-panel.show{right:0}
.crm-theme-panel h2{margin:0;font-size:20px}
.crm-theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.crm-theme-field{display:flex;flex-direction:column;gap:6px}
.crm-theme-field label{font-size:12px;color:var(--muted)}
.crm-theme-field input[type="color"]{width:100%;height:40px;border-radius:12px;border:1px solid var(--border-soft);background:transparent;cursor:pointer}
.crm-theme-field input[type="range"]{width:100%}
.crm-theme-field input[type="text"]{width:100%;height:40px;border-radius:12px;border:1px solid var(--border-soft);background:var(--panel2);color:var(--text);padding:0 12px}
.crm-theme-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:auto}
.crm-empty{padding:10px 0;color:var(--muted);font-size:13px}
.crm-card-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:40px 20px;
  overflow:auto;
  z-index:260;
}
.crm-card-modal.show{display:flex;}
.crm-card-dialog{
  width:min(1100px,95vw);
  background:#fdfdff;
  color:#0f172a;
  border-radius:22px;
  box-shadow:0 40px 100px rgba(0,0,0,.45);
  padding:32px;
  position:relative;
}
.crm-modal-close{
  position:absolute;
  right:20px;
  top:16px;
  border:0;
  background:transparent;
  font-size:26px;
  cursor:pointer;
  color:#4a5568;
}
.crm-card-columns{
  display:flex;
  align-items:flex-start;
  gap:30px;
}
.crm-card-main{
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.crm-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
}
.crm-card-side{
  flex:0 0 360px;
  width:360px;
  border-left:1px solid #e3e8ff;
  padding-left:24px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
@media (max-width:1100px){
  .crm-card-columns{flex-direction:column;}
  .crm-card-side{flex:1;width:100%;border-left:0;padding-left:0}
}

@media (max-width:900px){
  .crm-appbar{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    padding:16px 18px 12px;
  }
  .crm-appbar-actions{
    width:100%;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    gap:12px;
  }
  .crm-appbar-actions a{
    flex:none;
    width:100%;
    padding:10px 12px;
    text-align:center;
  }
  .crm-toolbar{
    flex-direction:column;
    align-items:flex-start;
    padding:16px;
    gap:14px;
  }
  .crm-toolbar-actions{
    width:100%;
    justify-content:flex-start;
    gap:10px;
  }
  .crm-toolbar-actions .btn{
    flex:1 0 calc(50% - 8px);
    min-width:120px;
  }
  .crm-board{
    padding:20px 16px 32px;
  }
  .crm-card-columns{
    flex-direction:column;
    gap:18px;
  }
  .crm-card-side{
    flex:1;
    width:100%;
    border-left:0;
    padding-left:0;
  }
  .crm-card-grid{
    grid-template-columns:1fr;
  }
  .crm-card-dialog{
    width:100%;
    padding:20px;
  }
  .crm-card{
    height:auto;
    min-height:unset;
  }
  .crm-card-cover{
    height:120px;
    margin:-16px -16px 8px;
  }
}

@media (max-width:600px){
  .crm-app-selects{
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .crm-appbar-actions a{
    flex:1 0 100%;
  }
  .crm-toolbar-actions .btn{
    flex:1 0 100%;
  }
  .crm-card-dialog{
    border-radius:12px;
    padding:16px;
  }
  .crm-card-modal{
    padding:12px;
  }
}
.crm-card-meta-header{display:flex;flex-direction:column;gap:6px}
.crm-card-crumb{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;font-weight:600}
.crm-card-meta-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:10px;
  margin-top:6px;
}
.crm-meta-pill{
  border:1px solid #d7e3ff;
  border-radius:14px;
  padding:10px 14px;
  background:#f5f8ff;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.crm-meta-pill--due{
  align-items:flex-start;
}
.crm-due-picker{
  display:flex;
  gap:8px;
  align-items:center;
}
.crm-due-picker input[type="date"]{
  border:1px solid #cbdafe;
  border-radius:10px;
  padding:6px 10px;
  font-weight:600;
  color:#0f172a;
  background:#fff;
}
.crm-due-picker .btn{
  height:32px;
  padding:0 12px;
}
.crm-field-menu{
  position:absolute;
  z-index:300;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  box-shadow:0 20px 40px rgba(15,23,42,.2);
  display:flex;
  flex-direction:column;
  min-width:200px;
  overflow:hidden;
}
.crm-field-menu-item{
  background:transparent;
  border:0;
  text-align:left;
  padding:12px 16px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s ease;
}
.crm-field-menu-item:hover{
  background:rgba(79,111,251,.08);
}
.crm-meta-pill .label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#94a3b8;
}
.crm-meta-pill strong{
  font-size:14px;
  color:#0f172a;
}
.crm-card-section{border:1px solid #cfe0ff;border-radius:16px;padding:16px 18px;background:#f9fbff;box-shadow:0 12px 30px rgba(58,72,140,.08)}
.crm-card-section-title{
  font-weight:700;
  margin-bottom:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.crm-card-section-title button{flex-shrink:0}
.crm-card-heading{
  margin:0 0 12px 0;
  font-size:30px;
  line-height:1.2;
  cursor:text;
  border-radius:12px;
  padding:4px 10px;
  transition:background .15s ease, box-shadow .15s ease;
}
.crm-card-heading:focus{
  outline:none;
  background:rgba(79,111,251,.12);
  box-shadow:0 0 0 2px rgba(79,111,251,.35);
}
.crm-card-section-actions{display:flex;justify-content:flex-end;margin-top:12px}
.crm-card-section textarea{width:100%;min-height:90px;border:1px solid #d5dbef;border-radius:12px;padding:10px;font-size:14px}
.crm-card-actions{display:flex;flex-direction:column;gap:12px}
.crm-card-actions .btn{
  border-radius:12px;
  padding:10px 16px;
  width:100%;
  justify-content:center;
  font-weight:700;
}
.crm-card-actions .btn.ghost{
  border:1px solid rgba(79,111,251,.3);
  background:rgba(79,111,251,.08);
  color:#1d2b8c;
  font-weight:700;
  transition:background .2s;
}
.crm-card-actions .btn.ghost:hover{
  background:rgba(79,111,251,.18);
}
.crm-card-actions .btn.danger{
  background:#ff4976;
  border-color:#ff4976;
  color:#fff;
  font-weight:700;
}
.crm-activity-log{
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid #e3e8ff;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.crm-activity-log-title{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#94a3b8;
  font-weight:700;
}
.crm-card-field-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.crm-card-field{display:flex;flex-direction:column;gap:6px}
.crm-card-field-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.crm-card-field-header button{
  padding:4px 10px;
  font-size:12px;
}
.crm-card-meta-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:12px;
}
.crm-card-call-btn{
  border:none;
  background:#22c55e;
  color:#fff;
  width:40px;
  height:40px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(34,197,94,.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
.crm-card-call-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(34,197,94,.45);
}
.crm-card-call-btn svg{
  width:18px;
  height:18px;
  fill:#fff;
}
.crm-comm-panel{
  display:none;
  margin-top:16px;
  padding:16px;
  border:1px solid rgba(148,163,184,.4);
  border-radius:18px;
  background:rgba(15,23,42,.75);
  color:#fff;
  box-shadow:0 18px 50px rgba(2,6,23,.45);
}
.crm-comm-panel.show{
  display:block;
}
.crm-comm-panel-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.crm-comm-panel-header p{
  font-size:12px;
  opacity:.8;
  margin:4px 0 0;
}
.crm-comm-close{
  border:none;
  background:transparent;
  color:#fff;
  font-size:20px;
  cursor:pointer;
  opacity:.7;
}
.crm-comm-close:hover{
  opacity:1;
}
.crm-comm-body{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:12px;
}
.crm-comm-body label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.8;
}
.crm-comm-body input,
.crm-comm-body textarea{
  border:1px solid rgba(148,163,184,.6);
  border-radius:12px;
  padding:10px;
  background:rgba(15,23,42,.4);
  color:#fff;
}
.crm-comm-actions{
  display:flex;
  gap:8px;
}
.crm-comm-status{
  min-height:18px;
  font-size:12px;
  opacity:.85;
}
.crm-comm-status[data-tone="error"]{color:#f87171;}
.crm-comm-status[data-tone="success"]{color:#4ade80;}
.crm-comm-status[data-tone="info"]{color:#93c5fd;}
.crm-field-trash{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border:none;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  cursor:pointer;
  transition:background .2s ease;
}
.crm-field-trash:hover{
  background:#dc2626;
}
.crm-field-trash svg{
  width:16px;
  height:16px;
  fill:#fff;
}
.crm-card-field input{border:1px solid #95b8ff;border-radius:10px;padding:8px 10px;background:#edf4ff;color:#0f172a;font-weight:600}
.crm-attachment-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.crm-attachment-list a{color:#1d4ed8;text-decoration:none;font-weight:600}
.upload-input-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
  cursor:pointer;
}
.crm-comments{display:flex;flex-direction:column;gap:12px;max-height:400px;overflow:auto}
.crm-comment{border:1px solid #e0e6ff;border-radius:12px;padding:10px;background:#fff}
.crm-comment header{font-weight:600;font-size:13px;margin-bottom:4px}
.crm-comment time{font-size:12px;color:#667084}
.crm-comment p{margin:0;font-size:13px;color:#333}
.crm-card-side form textarea{min-height:70px}
.crm-card-side form button{margin-top:8px;width:100%}
body.crm-modal-open{overflow:hidden}
.crm-fields-panel{
  position:fixed;
  right:-320px;
  top:120px;
  width:280px;
  background:rgba(5,8,16,.92);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px 0 0 18px;
  box-shadow: var(--elev-shadow);
  padding:18px;
  z-index:210;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:right .3s ease;
}
.crm-fields-panel.show{ right:20px; }
.crm-fields-header{display:flex;align-items:center;justify-content:space-between}
.crm-fields-list{display:flex;flex-direction:column;gap:8px;max-height:240px;overflow:auto}
.crm-fields-list .field-chip{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  font-size:13px;
  display:flex;
  align-items:center;
  gap:8px;
}
.crm-fields-list .field-chip button{
  margin-left:auto;
  padding:4px 8px;
  font-size:12px;
}
#fieldCreateForm{display:flex;flex-direction:column;gap:8px}
#fieldCreateForm input,#fieldCreateForm select{
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.2);
  color:#fff;
  padding:8px 10px;
}

.btn.ghost{background:transparent}
.btn.ghost:hover{background:rgba(255,255,255,.04)}
.dial{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px; pointer-events:auto}
.key{padding:18px;border-radius:12px;text-align:center;border:1px solid var(--border-soft);background:var(--panel2);font-size:20px;cursor:pointer;transition:background .15s, border-color .15s; pointer-events:auto; position:relative; z-index:2; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation}
.key.transfer{ opacity:.45 }
.key.transfer.enabled{ opacity:1 }
.key.transfer.disabled{ opacity:.35; pointer-events:none }
.key:hover{background:rgba(255,255,255,.04);border-color:#2c425d}
.actions{display:flex;gap:10px;margin-top:10px}
.actions .btn{min-width:0}
.log{white-space:pre-line;height:200px;overflow:auto;border-radius:12px;border:1px dashed var(--border-soft);padding:10px;background:var(--panel2);color:var(--muted)}
.split{display:grid;grid-template-columns:280px 1fr;gap:12px}
.list{height:480px;overflow:auto;border:1px solid var(--border-soft);border-radius:12px;background:var(--panel2)}
.item{padding:12px 14px;border-bottom:1px solid #1a2533;cursor:pointer}
.item:hover{background:rgba(255,255,255,.03)}
.item.active{background:#172131}
.chat{display:flex;flex-direction:column;height:480px;border:1px solid var(--border-soft);border-radius:12px;background:var(--panel2)}
.msgs{flex:1;overflow:auto;padding:12px}
.bubble{max-width:72%;margin:8px 0;padding:12px;border-radius:14px;border:1px solid #223247}
.out{align-self:flex-end;background:linear-gradient(180deg,#0f1720,#0b131c);border-color:#243248}
.in{align-self:flex-start;background:linear-gradient(180deg,#121a24,#0f151e);border-color:#223247}
.composer{display:flex;gap:8px;border-top:1px solid #1a2533;padding:10px}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:40}
.ring{width:420px;background:var(--panel);border:1px solid var(--border-soft);border-radius:16px;padding:18px;text-align:center;backdrop-filter:saturate(140%) blur(8px)}
.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.video-box{border:1px solid var(--border-soft);border-radius:14px;padding:8px;background:var(--panel2);min-height:180px}
video{width:100%;max-height:320px;border-radius:12px;background:#000}
.video-controls{display:flex;gap:8px;align-items:center}
.nav{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:0 0 4px 6px;
  scrollbar-width:thin;
  scrollbar-color:rgba(148,163,184,.6) transparent;
}
.nav::-webkit-scrollbar{height:6px}
.nav::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.6);
  border-radius:999px;
}
.nav .btn{white-space:nowrap}
.hero{margin-top:18px;padding:28px;border-radius:20px;border:1px solid var(--border-soft);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));box-shadow:var(--elev-shadow)}
.hero h1{margin:0 0 8px 0;font-size:28px;letter-spacing:.2px}
.hero p{margin:0;color:var(--muted)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.tile{display:block;padding:22px;border-radius:16px;border:1px solid var(--border-soft);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));text-decoration:none;color:var(--text);box-shadow:var(--elev-shadow);transition:transform .12s ease, background .2s}
.tile:hover{transform:translateY(-2px);background:var(--panel)}
.tile .title{display:flex;align-items:center;gap:10px}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid var(--border-soft);background:rgba(255,255,255,.06);color:var(--muted);font-size:12px}
@media (max-width: 900px){ .grid{grid-template-columns:1fr} .split{grid-template-columns:1fr} .tiles{grid-template-columns:1fr} }

/* Bottom tab bar (mobile) */
.tabbar{position:fixed;left:0;right:0;bottom:0;background:rgba(15,21,29,.92);backdrop-filter:saturate(140%) blur(10px);border-top:1px solid var(--border-soft);display:none;z-index:80}
.tabbar .tabs{display:flex;align-items:center;justify-content:space-around;padding:12px 12px}
.tabbar .tab{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--muted);padding:10px 12px;border-radius:12px}
.tabbar .tab.active{color:var(--text);background:rgba(255,255,255,.06)}
.tabbar .icon{font-size:22px}
.tabbar .label{font-size:13px}

/* Tablet/mobile: improve action button layout on up to 900px */
@media (max-width: 900px){
  .bar{position:relative; overflow:visible}
  .menu-btn{display:inline-flex}
  .nav{display:none}
  .mobile-nav{display:none;position:absolute;left:10px;right:10px;top:calc(100% + 8px);background:#0e141b;border:1px solid #1f2a37;border-radius:16px;padding:16px;box-shadow:0 30px 60px rgba(0,0,0,.45);z-index:60}
  .mobile-nav.show{display:block}
  .mobile-nav a, .mobile-nav .btn{display:block;width:100%;margin:8px 0;height:48px;font-size:16px}
  .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .actions .btn{width:100%}
  .actions .btn:first-child{grid-column:1 / -1;height:48px}
  .tabbar{display:block}
  body{padding-bottom:88px}
}

/* Failsafe: hide top menu Calls/SMS/Video only on small screens */
@media (max-width: 900px){
  .nav a[href="/calls.html"],
  .nav a[href="/sms.html"],
  .nav a[href="/video.html"]{ display:none !important }
}

/* Mobile refinements */
@media (max-width: 680px){
  .bar{height:140px;padding:10px 12px;gap:10px}
  .brand{position:relative; justify-content:center; width:100%}
  .brand .logo{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:320px; margin-right:0}
  .btn{height:44px;padding:0 14px}
  .pill{padding:6px 10px}
  /* Actions: primary full-width on first row, others side-by-side */
  .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .actions .btn{width:100%}
  .actions .btn:first-child{grid-column:1 / -1;height:48px}
  .dial{gap:8px}
  .key{padding:18px;font-size:22px}
  .hero{padding:20px}
  .hero h1{font-size:22px}
  .nav{flex-wrap:wrap;align-items:center}
  .nav{gap:8px}
  .nav .btn{padding:0 12px;height:40px}
  .card{padding:16px}
  .title{margin:0 0 8px 0}
  /* Keep tab bar visible on Calls page; trimmed bottom content handled in HTML */
}

/* ==================== Mobile-only VX theme (scoped) ==================== */
@media (max-width: 680px){
  .desktop-only{ display:none }
  .mobile-vx{ display:block }

  .mobile-vx{ color:#E6EAF2; }
  .mobile-vx .vx-card{
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,.35);
    backdrop-filter: blur(8px);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    animation: vxFadeUp .28s ease both;
  }
  .mobile-vx .vx-card:hover{ transform:translateY(-1px); box-shadow:0 14px 40px rgba(0,0,0,.45); border-color:rgba(255,255,255,.12) }
  @keyframes vxFadeUp { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

  .mobile-vx .vx-pill{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.25rem .6rem; border-radius:999px;
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    color:#9AA4B2; font-weight:600; font-size:.85rem;
  }
  .mobile-vx .vx-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
    padding:.8rem 1rem; border-radius:14px; font-weight:800;
    color:#0B0F14; background:linear-gradient(135deg,#8C5EFF,#B07CFF);
    border:1px solid rgba(255,255,255,.12); box-shadow:0 6px 20px rgba(140,94,255,.35);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }
  .mobile-vx .vx-btn:hover{ transform:translateY(-1px); filter:brightness(1.05) }
  .mobile-vx .vx-card .vx-btn{ min-width:108px }
  .mobile-vx .vx-h1{ font-size:1.7rem; letter-spacing:.2px; font-weight:800 }
  .mobile-vx .vx-sub{ color:#9AA4B2 }
  .mobile-vx :where(button,a,[role="button"],input,select,textarea):focus-visible{ outline:2px solid #B07CFF; outline-offset:2px; border-radius:12px }

  .mobile-vx .vx-tabbar{ background:rgba(255,255,255,.05); border-top:1px solid rgba(255,255,255,.08); backdrop-filter: blur(10px);
    position:sticky; bottom:0; left:0; right:0 }
  .mobile-vx .vx-tab{ display:flex; flex-direction:column; align-items:center; gap:.25rem; padding:.6rem .9rem; border-radius:14px; color:#9AA4B2; font-weight:600 }
  .mobile-vx .vx-tab.is-active{ background:rgba(255,255,255,.08); color:#E6EAF2 }
}


/* Panels and layout helpers */
.panel{background:var(--panel);border:1px solid var(--border-soft);border-radius:18px;padding:22px;box-shadow:var(--elev-shadow);backdrop-filter:saturate(140%) blur(8px);margin-top:18px}
.row{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.subtitle{color:var(--muted);margin:6px 0 0 0}
.auth-wrap{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 180px)}
.auth-card{width:100%;max-width:520px}
.right-adorn{position:relative}
.right-adorn input{padding-right:44px}
.adorn{position:absolute;right:8px;top:50%;transform:translateY(-50%);}
.adorn .btn{height:36px;padding:0 10px}
.logo-hero{width:260px;height:auto;border-radius:16px;display:block;margin:0 auto 10px auto;box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* ==================== Desktop VX polish ==================== */
.vx-desktop .hero{ background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08) }
.vx-desktop .tile{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.08) }
.vx-desktop .tile:hover{ transform:translateY(-2px); box-shadow:0 14px 40px rgba(0,0,0,.45) }
.vx-desktop .badge{ background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12) }
.vx-desktop .bar{ backdrop-filter: saturate(140%) blur(12px) }

/* Desktop hero + features */
.vx-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:var(--panel);
  border:1px solid var(--border-soft);
  border-radius:20px;
  padding:12px 24px;
  box-shadow:var(--elev-shadow);
}
.vx-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  width:200px;
}
.vx-brand img{
  width:100%;
  height:auto;
  display:block;
  border-radius:0;
  box-shadow:none;
}
.vx-nav-links{
  display:flex;
  gap:16px;
  font-weight:600;
}
.vx-nav-links a{
  color:var(--muted);
  text-decoration:none;
  padding:6px 10px;
  border-radius:999px;
  transition:color .2s ease, background .2s ease;
}
.vx-nav-links a.active,
.vx-nav-links a:hover{
  color:#fff;
  background:rgba(255,255,255,.08);
}
.vx-nav-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.btn.compact{
  height:34px;
  padding:0 14px;
  font-size:13px;
}
.dashboard-hero{
  margin-top:28px;
  padding:36px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg,rgba(140,94,255,.18),rgba(11,16,27,.6));
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.dashboard-tag{
  text-transform:uppercase;
  letter-spacing:.35em;
  font-size:12px;
  color:var(--muted);
  margin:0 0 6px 0;
}
.vx-title{ font-size:36px; font-weight:600; margin:0 0 8px 0; color:#e5e7eb }
.vx-subtitle{ color:#9aa4b2; margin:0; font-size:16px }
.dashboard-grid{
  display:grid;
  gap:18px;
  margin-top:28px;
}
.dashboard-grid-core{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.dashboard-grid-utility{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width: 1280px){
  .dashboard-grid-core{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 1024px){
  .dashboard-grid-utility{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 768px){
  .dashboard-grid-core,
  .dashboard-grid-utility{ grid-template-columns:1fr; }
}
.dashboard-card{
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(10,14,24,.65);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:20px;
  min-height:260px;
  box-shadow:0 24px 50px rgba(0,0,0,.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
.dashboard-card:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 60px rgba(0,0,0,.45);
}
.dashboard-card-top{
  display:flex;
  flex-direction:column;
  gap:14px;
  flex:1 1 auto;
}
.dashboard-card-icon{
  width:54px;
  height:54px;
  border-radius:16px;
  background:rgba(140,94,255,.15);
  display:flex;
  align-items:center;
  justify-content:center;
}
.dashboard-card-icon svg{
  width:28px;
  height:28px;
}
.dashboard-card-body h3{
  margin:0;
  font-size:18px;
  font-weight:600;
  color:#f0f4ff;
}
.dashboard-card-body p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.4;
  max-width:240px;
}
.btn-card{
  width:100%;
  justify-content:center;
}
.btn:disabled,
.btn[disabled]{
  opacity:.4;
  cursor:not-allowed;
  filter:grayscale(.2);
}

/* Finance module */
.finance-shell{
  padding:32px 0 60px;
}
.finance-layout{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  gap:24px;
}
.finance-sidebar{
  width:240px;
  background:var(--panel);
  border:1px solid var(--border-soft);
  border-radius:24px;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.finance-nav{
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:transparent;
  color:var(--muted);
  padding:10px 14px;
  text-align:left;
  font-weight:600;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.finance-nav.active{
  background:rgba(127,108,255,.18);
  color:#fff;
  border-color:rgba(127,108,255,.6);
}
.finance-main{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:24px;
}
.finance-section{
  display:none;
  flex-direction:column;
  gap:20px;
}
.finance-section.active{
  display:flex;
}
.finance-job-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.finance-job-header h1{
  margin:4px 0 0;
  font-size:24px;
}
.finance-job-label{
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:12px;
  color:var(--muted);
  margin:0;
}
.finance-summary-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
}
.finance-summary-card{
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(12,16,24,.7);
  padding:18px;
}
.finance-summary-card p{
  margin:0;
  color:var(--muted);
  font-size:13px;
}
.finance-summary-card strong{
  margin-top:6px;
  display:block;
  font-size:22px;
  letter-spacing:.02em;
}
.finance-accordion{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.finance-panel{
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(10,14,24,.75);
  padding:20px;
}
.finance-panel header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.finance-panel h3{
  margin:0;
}
.finance-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.finance-table th,
.finance-table td{
  padding:10px 12px;
  text-align:left;
}
.finance-table thead{
  background:rgba(255,255,255,.04);
}
.finance-table tbody tr:nth-child(odd){
  background:rgba(255,255,255,.01);
}
.finance-table tbody tr:nth-child(even){
  background:rgba(255,255,255,.02);
}
.finance-table tbody tr:last-child td{
  border-bottom:0;
}
.finance-table th{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}
.finance-table td{
  border-bottom:1px solid rgba(255,255,255,.05);
}
.finance-material-form{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:18px;
  background:rgba(10,14,24,.65);
}
.finance-material-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
}
.finance-totals{
  display:flex;
  justify-content:flex-end;
}
.finance-totals dl{
  display:grid;
  gap:6px;
}
.finance-totals dt{
  color:var(--muted);
}
.finance-totals dd{
  margin:0;
  font-weight:600;
}
.finance-totals .strong dt,
.finance-totals .strong dd{
  font-size:18px;
  color:#f0f4ff;
}
.finance-summary-payout{
  display:flex;
  gap:20px;
}
.finance-summary-payout div{
  text-align:right;
}
.finance-section-title{
  margin:18px 0 8px;
}
.btn.ghost.small{
  padding:4px 10px;
  font-size:12px;
}

/* ==================== Chat */
.chat-shell{
  padding:32px 0 60px;
}
.chat-layout{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  gap:24px;
}
.chat-sidebar{
  width:270px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(10,14,24,.85);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.chat-search input{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  padding:10px 12px;
  color:#fff;
}
.chat-search input::placeholder{
  color:var(--muted);
}
.chat-section{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.chat-section-title{
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:11px;
  color:var(--muted);
  margin:0;
}
.chat-nav-item{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  border-radius:12px;
  padding:8px 12px;
  color:#e8edf3;
  font-weight:600;
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.chat-nav-item:hover{
  background:rgba(255,255,255,.06);
}
.chat-nav-item.active{
  background:rgba(138,119,255,.2);
  color:#fff;
}
.chat-main{
  flex:1;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(9,12,20,.85);
  display:flex;
  flex-direction:column;
  min-height:600px;
}
.chat-header{
  padding:24px 32px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.chat-header h1{
  margin:0;
  font-size:26px;
}
.chat-header p{
  margin:6px 0 0;
  color:var(--muted);
}
.chat-messages{
  flex:1;
  overflow-y:auto;
  padding:24px 32px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.chat-message{
  display:flex;
  gap:12px;
}
.chat-avatar{
  width:42px;
  height:42px;
  border-radius:14px;
  background:rgba(140,94,255,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:#fff;
}
.chat-message-body{
  flex:1;
}
.chat-message-meta{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  color:var(--muted);
}
.chat-message-body p{
  margin:2px 0 0;
  line-height:1.5;
}
.chat-composer{
  border-top:1px solid rgba(255,255,255,.08);
  padding:18px 24px;
  display:flex;
  gap:12px;
  align-items:center;
}
.chat-composer input{
  flex:1;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  padding:12px 16px;
  color:#fff;
}
.chat-composer input::placeholder{
  color:var(--muted);
}
.chat-attach{
  background:rgba(255,255,255,.08);
  border:0;
  border-radius:50%;
  width:40px;
  height:40px;
  color:#fff;
  cursor:not-allowed;
}
.chat-send{
  min-width:90px;
}

/* ==================== Global mini-call widget ==================== */
.mini-call{ position:fixed; right:16px; bottom:16px; background:var(--panel); border:1px solid var(--border-soft); border-radius:14px; padding:10px 12px; box-shadow:var(--elev-shadow); display:flex; align-items:center; gap:10px; z-index:110 }
.mini-call.hidden{ display:none }
.mini-call .who{ font-weight:700 }
.mini-call .time{ color:var(--muted); font-size:12px }
.mini-call .btn{ height:32px; padding:0 10px; border-radius:10px }

/* Remove any styles that might show floating keypads/overlays from legacy */
#floating-keypad,.floating-keypad,.keypad-overlay,.floating-dialpad,.dtmf-pad,[data-ghost-pad]{ display:none !important; position:static !important; z-index:auto !important }

/* Drawer overlay while on-call */
#spaDrawer .btn{ height:36px; padding:0 12px; border-radius:10px }

.vertex-report {
  margin-top: 8px;
}

.vertex-report__btn {
  background: linear-gradient(120deg, #4F6FFB, #2EC5FF);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(79, 111, 251, 0.3);
}

.vertex-report__btn:hover {
  filter: brightness(1.05);
}