:root{
    --ink:#0C2740; --ink-soft:#3D5670; --ink-faint:#7C92A8;
    --blue:#1789D6; --blue-deep:#0F5FA8; --sky:#EAF4FB; --sky-line:#D6E7F4;
    --gold-1:#FFC83D; --gold-2:#F5A623; --green:#1FA971; --coral:#F0653E;
    --purple:#7A5CE0; --bg:#F6FAFD; --white:#FFFFFF;
    --radius:16px; --radius-sm:10px;
    --shadow:0 1px 2px rgba(12,39,64,.06),0 8px 24px rgba(12,39,64,.06);
    --shadow-lg:0 12px 40px rgba(12,39,64,.14);
    --display:'Plus Jakarta Sans',sans-serif; --body:'Inter',sans-serif;
    --safe-b:env(safe-area-inset-bottom,0px);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{font-family:var(--body);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
  body.dark{
    --ink:#F5F9FC; --ink-soft:#C9D7E4; --ink-faint:#8EA5B9;
    --blue:#3AA7E6; --blue-deep:#1789D6; --sky:#132C42; --sky-line:#25445F;
    --bg:#071A2B; --white:#0C2235;
    --shadow:0 1px 2px rgba(0,0,0,.22),0 10px 28px rgba(0,0,0,.24);
    --shadow-lg:0 16px 48px rgba(0,0,0,.42);
  }
  button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
  input,textarea{font-family:inherit}
  ::-webkit-scrollbar{width:8px;height:8px}
  ::-webkit-scrollbar-thumb{background:var(--sky-line);border-radius:8px}
  .hidden{display:none!important}
  body.dark input,body.dark textarea,body.dark select{background:#0F2A40!important;color:var(--ink)!important;border-color:var(--sky-line)!important}
  body.dark .card,body.dark .topbar,body.dark .sidenav,body.dark .leadlist,body.dark .chan-list,body.dark .chat-top,body.dark .chat-compose,body.dark .chat-people,body.dark #softphone,body.dark #ray-panel,body.dark .modal .box,body.dark .mobile-tab,body.dark .cust-card,body.dark .file-att{background:var(--white)!important;border-color:var(--sky-line)!important}
  body.dark .lead-card:hover,body.dark .tbl tr:hover td,body.dark .person:hover,body.dark .chan:hover,body.dark .hamburger:hover,body.dark .icon-btn:hover,body.dark .me:hover,body.dark .ctool:hover{background:var(--sky)!important}
  body.dark .btn.ghost{background:#0F2A40;color:var(--ink-soft);border-color:var(--sky-line)}
  body.dark .chip.g{background:#153B31;color:#76D6AF} body.dark .chip.y{background:#3A2F13;color:#FFD878} body.dark .chip.c{background:#3C211B;color:#FF9D80} body.dark .chip.gray{background:#172D41;color:#A9BACE}

  .brand-glyph{width:30px;height:30px;border-radius:10px;flex:0 0 auto;position:relative;
    background:linear-gradient(135deg,var(--blue),var(--gold-2));box-shadow:0 0 0 4px rgba(23,137,214,.12)}
  .brand-glyph::before,.brand-glyph::after{content:"";position:absolute;background:#fff;border-radius:2px;left:8px;right:8px;top:14px;height:3px}
  .brand-glyph::after{top:8px;bottom:8px;left:14px;right:auto;width:3px;height:auto}
  .wordmark{font-family:var(--display);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
  .wordmark .care{color:var(--blue)}
  .assistant-mark{width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-family:var(--display);font-weight:800;color:#fff;background:linear-gradient(135deg,var(--blue),var(--purple));box-shadow:0 6px 18px rgba(23,137,214,.28)}
  .assistant-mark.phone{border-radius:50%;background:linear-gradient(135deg,var(--green),var(--blue))}
  .theme-toggle{width:40px;height:40px;border-radius:11px;border:1px solid var(--sky-line);background:var(--bg);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800}
  .theme-toggle:hover{border-color:var(--blue);color:var(--blue)}
  .ray-top-btn{width:auto;padding:0 12px;gap:7px;font-weight:800;color:var(--blue-deep);background:var(--sky)}
  .ray-top-btn span{font-size:12.5px;white-space:nowrap}

  /* ===== LOGIN ===== */
  #login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:24px;z-index:50;
    background:radial-gradient(120% 120% at 85% 8%,#FFE4A3 0%,#FFC83D 12%,#3AA7E6 42%,#1789D6 66%,#0F4E8C 100%)}
  #login::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 120%,rgba(255,255,255,.25),transparent 70%);pointer-events:none}
  .login-art{position:absolute;inset:0;color:#fff;pointer-events:none}
  .login-sun{position:absolute;top:-90px;right:-60px;width:340px;height:340px;border-radius:50%;
    background:radial-gradient(circle at 40% 38%,#FFF1C4,#FFC83D 55%,rgba(245,166,35,0) 72%);
    filter:blur(2px);animation:login-float 9s ease-in-out infinite}
  @keyframes login-float{0%,100%{transform:translateY(0)}50%{transform:translateY(22px)}}
  @media(prefers-reduced-motion:reduce){.login-sun{animation:none}}
  .login-art .copy{position:absolute;left:40px;bottom:38px;z-index:2;max-width:360px}
  .login-art .copy h1{font-family:var(--display);font-weight:800;font-size:30px;line-height:1.1;letter-spacing:0;margin-bottom:8px;text-shadow:0 2px 18px rgba(8,40,70,.3)}
  .login-art .copy p{font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.9);max-width:360px;text-shadow:0 1px 10px rgba(8,40,70,.25)}
  .login-card{position:relative;z-index:3;width:400px;max-width:100%;display:flex;flex-direction:column;justify-content:center;
    padding:34px 32px;background:rgba(255,255,255,.92);backdrop-filter:blur(22px);border:1px solid rgba(255,255,255,.7);
    border-radius:26px;box-shadow:0 30px 80px rgba(8,40,70,.32)}
  .login-card .brand{display:flex;align-items:center;gap:10px;margin-bottom:0}
  .login-card .brand-glyph{width:38px;height:38px;border-radius:11px;background:linear-gradient(150deg,var(--blue),var(--blue-deep));box-shadow:none}
  .login-card .brand-glyph::before,.login-card .brand-glyph::after{background:var(--gold-1);left:11px;right:11px;top:17px;height:4.5px;border-radius:2px}
  .login-card .brand-glyph::after{top:11px;bottom:11px;left:17px;right:auto;width:4.5px;height:auto}
  .login-card .brand .wordmark{font-size:21px}
  .login-card h2{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:0;margin:22px 0 4px}
  .login-card .sub{color:var(--ink-faint);font-size:13.5px;margin-bottom:22px}
  .field{margin-bottom:15px}
  .field label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-soft);margin-bottom:7px}
  .input-wrap{position:relative}
  .field input{width:100%;padding:13px 15px;border:1.5px solid var(--sky-line);border-radius:11px;
    font-size:14.5px;color:var(--ink);background:#fff;transition:.15s}
  .field input.has-password-toggle{padding-right:48px}
  .field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(23,137,214,.13)}
  .password-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:9px;
    display:flex;align-items:center;justify-content:center;color:var(--ink-faint)}
  .password-toggle:hover{background:var(--sky);color:var(--blue)}
  .password-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .btn-primary{width:100%;padding:14px;background:linear-gradient(135deg,var(--gold-1),var(--gold-2));color:#5A3D00;font-weight:700;font-size:15px;
    border-radius:12px;transition:.15s;box-shadow:0 10px 24px rgba(245,166,35,.4)}
  .btn-primary:hover{filter:brightness(1.04)}
  .role-pick{display:flex;gap:7px;margin-bottom:18px}
  .role-pick button{flex:1;padding:10px;border:1.5px solid var(--sky-line);border-radius:10px;font-size:12.5px;font-weight:700;color:var(--ink-soft);background:#fff;transition:.15s}
  .role-pick button.on{border-color:var(--blue);background:var(--sky);color:var(--blue-deep)}
  .login-note{margin-top:18px;font-size:11.5px;color:var(--ink-faint);line-height:1.5;display:flex;gap:7px}
  body.dark #login{background:radial-gradient(120% 120% at 85% 8%,#FFE4A3 0%,#FFC83D 12%,#3AA7E6 42%,#1789D6 66%,#0F4E8C 100%)}
  body.dark .login-card{background:rgba(12,34,53,.9);border-color:rgba(214,231,244,.28)}
  body.dark .login-card .brand-glyph{background:linear-gradient(150deg,var(--blue),var(--blue-deep))}
  body.dark .login-card input,body.dark .role-pick button{background:#0F2A40!important;color:var(--ink)!important;border-color:var(--sky-line)!important}
  body.dark .role-pick button.on{background:var(--sky)!important;color:var(--blue)}

  /* ===== APP SHELL ===== */
  #app{position:fixed;inset:0;display:flex;flex-direction:column}
  .topbar{height:60px;flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:0 18px;
    background:var(--white);border-bottom:1px solid var(--sky-line);z-index:20}
  .topbar .brand{display:flex;align-items:center;gap:9px}
  .topbar .brand .wordmark{font-size:18px}
  .hamburger{display:none;width:38px;height:38px;border-radius:10px;align-items:center;justify-content:center}
  .hamburger:hover{background:var(--sky)}
  .topbar .search{flex:1;max-width:420px;position:relative}
  .topbar .search input{width:100%;padding:9px 14px 9px 38px;border:1.5px solid var(--sky-line);border-radius:100px;
    font-size:13.5px;background:var(--bg)}
  .topbar .search input:focus{outline:none;border-color:var(--blue);background:#fff}
  .topbar .search .ic{position:absolute;left:13px;top:9px;color:var(--ink-faint)}
  .topbar .right{margin-left:auto;display:flex;align-items:center;gap:8px}
  .icon-btn{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;position:relative;color:var(--ink-soft)}
  .icon-btn:hover{background:var(--sky)}
  .icon-btn .dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--coral);border:2px solid #fff}
  .me{display:flex;align-items:center;gap:9px;padding:5px 10px 5px 5px;border-radius:100px;border:1px solid var(--sky-line)}
  .me:hover{background:var(--sky)}
  .me .name{font-size:13px;font-weight:600;line-height:1.1}
  .me .role{font-size:11px;color:var(--ink-faint)}

  .avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:12.5px;color:#fff;flex:0 0 auto;position:relative}
  .avatar.sm{width:28px;height:28px;font-size:11px}
  .avatar.lg{width:46px;height:46px;font-size:16px}
  .pres{position:absolute;bottom:-2px;right:-2px;width:14px;height:14px;border-radius:50%;border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:900;line-height:1;color:#fff}
  .pres::before{content:"●"}
  .pres.busy::before{content:"■"} .pres.away::before{content:"…";font-size:9px;color:#563600}
  .pres.vacation::before{content:"◆"} .pres.offline::before{content:"○";color:#244}
  .pres.online{background:var(--green)} .pres.busy{background:var(--coral)}
  .pres.away{background:var(--gold-2)} .pres.vacation{background:var(--purple)} .pres.offline{background:#9fb2c4}
  .presence-icon{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:900;line-height:1}
  .presence-icon.online{background:var(--green)} .presence-icon.busy{background:var(--coral)}
  .presence-icon.away{background:var(--gold-2);color:#563600} .presence-icon.vacation{background:var(--purple)}
  .presence-icon.offline{background:#9fb2c4;color:#244}

  .body-row{flex:1;display:flex;min-height:0}
  /* desktop sidebar */
  .sidenav{width:230px;flex:0 0 auto;background:var(--white);border-right:1px solid var(--sky-line);
    padding:14px 12px;display:flex;flex-direction:column;gap:3px;overflow-y:auto}
  .nav-section{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
    padding:14px 12px 6px}
  .nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;font-size:14px;font-weight:600;
    color:var(--ink-soft);transition:.12s;position:relative}
  .nav-item:hover{background:var(--sky)}
  .nav-item.on{background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(23,137,214,.28)}
  .nav-item .ic{width:20px;height:20px;flex:0 0 auto}
  .nav-item .badge{margin-left:auto;background:var(--coral);color:#fff;font-size:11px;font-weight:700;
    min-width:19px;height:19px;border-radius:100px;display:flex;align-items:center;justify-content:center;padding:0 5px}
  .nav-item.on .badge{background:rgba(255,255,255,.28)}
  .nav-spacer{flex:1}
  .nav-pres{margin-top:6px;padding:11px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--sky-line)}
  .nav-pres .lbl{font-size:11px;color:var(--ink-faint);font-weight:600;margin-bottom:8px}
  .pres-picker{display:flex;gap:5px;flex-wrap:wrap}
  .pres-opt{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:5px 8px;border-radius:8px;
    border:1px solid var(--sky-line);color:var(--ink-soft)}
  .pres-opt:hover{background:#fff}
  .pres-opt.on{border-color:var(--blue);background:var(--sky);color:var(--blue-deep)}
  .pres-opt i{width:9px;height:9px;border-radius:50%;display:block}

  .scrim{display:none;position:fixed;inset:0;background:rgba(12,39,64,.4);z-index:30}

  /* main + view */
  .main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
  .view{flex:1;overflow-y:auto;padding:22px 22px 96px;display:none}
  .view.on{display:block}
  .view.flexcol{display:none;flex-direction:column;padding:0}
  .view.flexcol.on{display:flex}
  .page-h{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
  .page-h h1{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.02em}
  .page-h .sub{font-size:13px;color:var(--ink-faint)}
  .page-h .sp{flex:1}
  .btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:10px;font-size:13.5px;font-weight:700;transition:.12s}
  .btn.pri{background:var(--blue);color:#fff;box-shadow:0 5px 14px rgba(23,137,214,.28)}
  .btn.pri:hover{background:var(--blue-deep)}
  .btn.ghost{background:#fff;border:1.5px solid var(--sky-line);color:var(--ink-soft)}
  .btn.ghost:hover{border-color:var(--blue);color:var(--blue)}
  .btn.gold{background:linear-gradient(135deg,var(--gold-1),var(--gold-2));color:#5a3d00;box-shadow:0 5px 14px rgba(245,166,35,.3)}

  .card{background:#fff;border:1px solid var(--sky-line);border-radius:var(--radius);box-shadow:var(--shadow)}
  .grid{display:grid;gap:16px}
  .stat{padding:18px;display:flex;flex-direction:column;gap:6px}
  .stat .k{font-size:12.5px;color:var(--ink-faint);font-weight:600;display:flex;align-items:center;gap:7px}
  .stat .v{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.02em}
  .stat .d{font-size:12px;font-weight:600}
  .up{color:var(--green)} .down{color:var(--coral)}
  .chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:100px}
  .chip.b{background:var(--sky);color:var(--blue-deep)} .chip.g{background:#E4F7EF;color:#127a52}
  .chip.y{background:#FFF4D6;color:#9a6a00} .chip.c{background:#FDE7E0;color:#b8431f}
  .chip.p{background:#EFEAFB;color:#5a3fc0} .chip.gray{background:#EEF3F8;color:var(--ink-soft)}

  /* warming pipeline */
  .pipe{display:flex;gap:5px;align-items:center}
  .pipe .seg{height:7px;border-radius:4px;flex:1;background:var(--sky-line)}
  .pipe .seg.f{background:linear-gradient(90deg,var(--blue),var(--gold-2))}
  .stage-row{display:flex;gap:4px;margin-top:14px}
  .stage{flex:1;text-align:center;font-size:10.5px;font-weight:700;color:var(--ink-faint);position:relative;padding-top:18px}
  .stage::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;background:var(--sky-line);border:2px solid #fff;box-shadow:0 0 0 1.5px var(--sky-line)}
  .stage.done::before{background:var(--blue)} .stage.cur::before{background:var(--gold-2);box-shadow:0 0 0 1.5px var(--gold-2),0 0 0 5px rgba(245,166,35,.2)}
  .stage.done,.stage.cur{color:var(--ink)}

  /* tables / lists */
  .tbl{width:100%;border-collapse:collapse;font-size:13.5px}
  .tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);font-weight:700;padding:11px 14px;border-bottom:1px solid var(--sky-line)}
  .tbl td{padding:12px 14px;border-bottom:1px solid #EEF3F8}
  .tbl tr:last-child td{border-bottom:none}
  .tbl tr:hover td{background:#FAFCFE}
  .lead-name{font-weight:700;color:var(--ink)}
  .muted{color:var(--ink-faint);font-size:12.5px}
  .phone-link{font-size:inherit;font-weight:700;color:var(--blue);text-decoration:underline;text-underline-offset:2px}

  /* ===== LEADS LAYOUT ===== */
  .leads-wrap{flex:1;display:flex;min-height:0}
  .leadlist{width:330px;flex:0 0 auto;border-right:1px solid var(--sky-line);background:#fff;display:flex;flex-direction:column}
  .leadlist .lh{padding:14px 16px;border-bottom:1px solid var(--sky-line)}
  .filters{display:flex;gap:6px;overflow-x:auto;padding:11px 16px;border-bottom:1px solid var(--sky-line)}
  .filters .f{flex:0 0 auto;font-size:12px;font-weight:600;padding:6px 12px;border-radius:100px;background:var(--bg);color:var(--ink-soft);border:1px solid var(--sky-line)}
  .filters .f.on{background:var(--blue);color:#fff;border-color:var(--blue)}
  .leadlist .scroll{flex:1;overflow-y:auto}
  .lead-card{padding:13px 16px;border-bottom:1px solid #EEF3F8;cursor:pointer;transition:.1s}
  .lead-card:hover{background:#FAFCFE}
  .lead-card.on{background:var(--sky);box-shadow:inset 3px 0 0 var(--blue)}
  .lead-card .top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
  .lead-card .nm{font-weight:700;font-size:14px}
  .lead-card .meta{font-size:12px;color:var(--ink-faint)}
  .leaddetail{flex:1;min-width:0;overflow-y:auto;padding:22px}
  .detail-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;flex-wrap:wrap}
  .tabs{display:flex;gap:4px;border-bottom:1px solid var(--sky-line);margin-bottom:18px;overflow-x:auto}
  .tab{padding:11px 15px;font-size:13.5px;font-weight:600;color:var(--ink-faint);border-bottom:2px solid transparent;white-space:nowrap}
  .tab.on{color:var(--blue);border-bottom-color:var(--blue)}
  .note{padding:13px 15px;border-radius:12px;background:var(--bg);border:1px solid var(--sky-line);margin-bottom:10px}
  .note .nh{display:flex;align-items:center;gap:8px;margin-bottom:6px}
  .note .nt{font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
  .timeline .ev{display:flex;gap:12px;padding-bottom:16px;position:relative}
  .timeline .ev::before{content:"";position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--sky-line)}
  .timeline .ev:last-child::before{display:none}
  .timeline .ic{width:28px;height:28px;border-radius:50%;background:var(--sky);display:flex;align-items:center;justify-content:center;color:var(--blue);flex:0 0 auto;z-index:1}
  .docrow{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--sky-line);border-radius:12px;margin-bottom:10px}
  .upbox{border:2px dashed var(--sky-line);border-radius:14px;padding:26px;text-align:center;color:var(--ink-faint);font-size:13px}
  .product-card select{padding:10px 12px;border:1px solid var(--sky-line);border-radius:10px;background:var(--white);color:var(--ink);font-weight:700}
  .product-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:14px}
  .product-fields textarea{width:100%;padding:12px 14px;border:1.5px solid var(--sky-line);border-radius:10px;background:var(--white);color:var(--ink);resize:vertical}

  /* ===== CHAT ===== */
  .chat-wrap{flex:1;display:flex;min-height:0}
  .chan-list{width:260px;flex:0 0 auto;border-right:1px solid var(--sky-line);background:#fff;overflow-y:auto;padding:8px}
  .chan-h{padding:12px 12px 6px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);display:flex;align-items:center}
  .chan-h .pl{margin-left:auto;color:var(--blue)}
  .chan{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--ink-soft);cursor:pointer}
  .chan:hover{background:var(--sky)}
  .chan.on{background:var(--blue);color:#fff}
  .chan .hash{opacity:.6;font-weight:700}
  .chan .badge{margin-left:auto;background:var(--coral);color:#fff;font-size:10.5px;font-weight:700;min-width:18px;height:18px;border-radius:100px;display:flex;align-items:center;justify-content:center;padding:0 5px}
  .chan.on .badge{background:rgba(255,255,255,.3)}
  .chat-main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)}
  .chat-top{height:54px;flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:0 18px;background:#fff;border-bottom:1px solid var(--sky-line)}
  .chat-top .nm{font-weight:700;font-size:15px}
  .chat-top .desc{font-size:12px;color:var(--ink-faint)}
  .chat-scroll{flex:1;overflow-y:auto;padding:18px}
  .msg{display:flex;gap:11px;margin-bottom:18px}
  .msg .body .mh{display:flex;align-items:baseline;gap:8px;margin-bottom:3px}
  .msg .body .who{font-weight:700;font-size:13.5px}
  .msg .body .t{font-size:11px;color:var(--ink-faint)}
  .msg .body .txt{font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
  .cust-card{margin-top:8px;max-width:340px;border:1px solid var(--sky-line);border-radius:13px;background:#fff;padding:13px;box-shadow:var(--shadow)}
  .cust-card .cc-h{display:flex;align-items:center;gap:9px;margin-bottom:9px}
  .cust-card .cc-nm{font-weight:700;font-size:14px}
  .cust-card .cc-meta{font-size:12px;color:var(--ink-faint)}
  .cust-card .cc-row{font-size:12.5px;color:var(--ink-soft);margin-bottom:3px}
  .cust-card .cc-act{display:flex;gap:7px;margin-top:11px}
  .file-att{margin-top:8px;max-width:300px;display:flex;align-items:center;gap:11px;border:1px solid var(--sky-line);border-radius:11px;background:#fff;padding:11px 13px}
  .chat-compose{flex:0 0 auto;padding:12px 16px calc(12px + var(--safe-b));background:#fff;border-top:1px solid var(--sky-line)}
  .compose-box{border:1.5px solid var(--sky-line);border-radius:14px;padding:8px 8px 8px 14px;display:flex;align-items:flex-end;gap:8px}
  .compose-box:focus-within{border-color:var(--blue)}
  .compose-box textarea{flex:1;border:none;resize:none;font-size:14px;line-height:1.4;max-height:120px;background:none;padding:6px 0}
  .compose-box textarea:focus{outline:none}
  .ctool{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--ink-faint)}
  .ctool:hover{background:var(--sky);color:var(--blue)}
  .send-btn{width:36px;height:36px;border-radius:10px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center}
  .chat-people{width:220px;flex:0 0 auto;border-left:1px solid var(--sky-line);background:#fff;overflow-y:auto;padding:14px 12px}
  .emoji-menu{position:fixed;z-index:44;display:none;grid-template-columns:repeat(8,34px);gap:4px;padding:10px;background:var(--white);border:1px solid var(--sky-line);border-radius:14px;box-shadow:var(--shadow-lg)}
  .emoji-menu.on{display:grid}
  .emoji-menu button{width:34px;height:34px;border-radius:8px;font-size:18px}
  .emoji-menu button:hover{background:var(--sky)}
  .person{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px}
  .person:hover{background:var(--sky)}
  .person .nm{font-size:13px;font-weight:600;line-height:1.1}
  .person .st{font-size:11px;color:var(--ink-faint)}

  /* ===== PHONE ===== */
  .dialpad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:280px;margin:0 auto}
  .dialpad button{aspect-ratio:1;border-radius:50%;background:var(--bg);border:1px solid var(--sky-line);
    font-family:var(--display);font-weight:700;font-size:22px;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center}
  .dialpad button:hover{background:var(--sky)}
  .dialpad button small{font-size:9px;color:var(--ink-faint);font-weight:600;letter-spacing:.1em}
  .dial-display{text-align:center;font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:.02em;margin-bottom:6px;min-height:38px}
  .call-green{width:62px;height:62px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto;box-shadow:0 8px 20px rgba(31,169,113,.4)}
  .calllog .row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #EEF3F8}

  /* floating softphone */
  #softphone{position:fixed;right:22px;bottom:92px;width:330px;background:#fff;border-radius:20px;box-shadow:var(--shadow-lg);
    border:1px solid var(--sky-line);z-index:40;overflow:hidden;display:none}
  #softphone.on{display:block}
  .sp-head{padding:16px 18px;background:linear-gradient(135deg,var(--blue-deep),var(--blue));color:#fff}
  .sp-consent{background:#FFF4D6;color:#9a6a00;font-size:11px;font-weight:600;padding:7px 18px;display:flex;align-items:center;gap:7px}
  .sp-body{padding:18px}
  .sp-actions{display:flex;justify-content:center;gap:14px;margin-top:8px}
  .sp-ic{width:50px;height:50px;border-radius:50%;background:var(--bg);border:1px solid var(--sky-line);display:flex;align-items:center;justify-content:center;color:var(--ink-soft)}
  .sp-keypad{display:none;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px auto 0;max-width:210px}
  .sp-keypad.on{display:grid}
  .sp-keypad button{height:42px;border-radius:12px;background:var(--bg);border:1px solid var(--sky-line);font-family:var(--display);font-weight:800;color:var(--ink)}
  .sp-end{width:58px;height:58px;border-radius:50%;background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(240,101,62,.4)}
  .sp-transfer{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-top:14px}
  .sp-transfer select{min-width:0;padding:9px;border:1px solid var(--sky-line);border-radius:9px;background:var(--white);color:var(--ink)}
  #spNote{width:100%;margin-top:12px;padding:10px 12px;border:1px solid var(--sky-line);border-radius:10px;background:var(--white);color:var(--ink);resize:vertical}
  .btn.full{width:100%;justify-content:center;margin-top:8px}
  .phone-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px}
  .phone-row{display:grid;grid-template-columns:90px 1fr 80px 80px 110px;gap:10px;align-items:center;padding:12px;border-bottom:1px solid var(--sky-line);font-size:13px}
  .call-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
  .incoming-call{position:fixed;right:22px;top:76px;width:330px;max-width:calc(100vw - 28px);z-index:43;background:var(--white);border:1px solid var(--sky-line);box-shadow:var(--shadow-lg);border-radius:18px;padding:16px;display:none}
  .incoming-call.on{display:block}
  .ic-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
  .ic-head p{font-size:12px;color:var(--ink-faint);margin-top:3px}
  .ic-actions{display:flex;gap:9px}
  .danger{color:var(--coral)!important;border-color:#f6cabc!important}

  /* ===== RAY AI ===== */
  #ray-fab{position:fixed;right:22px;bottom:92px;width:60px;height:60px;border-radius:50%;z-index:39;
    background:linear-gradient(135deg,var(--gold-1),var(--gold-2));box-shadow:0 10px 26px rgba(245,166,35,.45);
    display:flex;align-items:center;justify-content:center;color:#5a3d00}
  #ray-fab:hover{transform:translateY(-2px)}
  #ray-panel{position:fixed;right:22px;bottom:92px;width:380px;max-width:calc(100vw - 28px);height:560px;max-height:calc(100vh - 160px);
    background:#fff;border-radius:22px;box-shadow:var(--shadow-lg);border:1px solid var(--sky-line);z-index:41;display:none;flex-direction:column;overflow:hidden}
  #ray-panel.on{display:flex}
  .ray-head{padding:16px 18px;display:flex;align-items:center;gap:11px;color:#fff;
    background:linear-gradient(135deg,#0F5FA8,#1789D6)}
  .ray-head .rname{font-family:var(--display);font-weight:800;font-size:16px}
  .ray-head .rsub{font-size:11.5px;color:rgba(255,255,255,.8)}
  .ray-scroll{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px}
  .ray-msg{max-width:88%;font-size:13.5px;line-height:1.55;padding:12px 14px;border-radius:14px}
  .ray-msg.ai{background:var(--sky);color:var(--ink);border-bottom-left-radius:4px;align-self:flex-start}
  .ray-msg.me{background:var(--blue);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
  .ray-msg .src{display:block;margin-top:7px;font-size:11px;color:var(--ink-faint)}
  .ray-sug{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px}
  .ray-sug button{font-size:12px;font-weight:600;padding:7px 11px;border-radius:100px;background:var(--bg);border:1px solid var(--sky-line);color:var(--ink-soft);text-align:left}
  .ray-sug button:hover{border-color:var(--gold-2);color:var(--ink)}
  .ray-compose{flex:0 0 auto;padding:12px 14px calc(12px + var(--safe-b));border-top:1px solid var(--sky-line);display:flex;gap:8px}
  .ray-compose input{flex:1;border:1.5px solid var(--sky-line);border-radius:100px;padding:10px 15px;font-size:13.5px}
  .ray-compose input:focus{outline:none;border-color:var(--blue)}
  .ray-card{background:#fff;border:1px solid var(--sky-line);border-radius:13px;padding:13px;align-self:flex-start;max-width:92%;box-shadow:var(--shadow)}

  /* ===== MOBILE NAV ===== */
  .mobile-tab{display:none;position:fixed;left:0;right:0;bottom:0;height:calc(62px + var(--safe-b));
    padding-bottom:var(--safe-b);background:#fff;border-top:1px solid var(--sky-line);z-index:25}
  .quick-bar{display:block;left:50%;right:auto;bottom:14px;width:min(560px,calc(100vw - 28px));height:58px;padding:0;border:1px solid var(--sky-line);border-radius:18px;background:rgba(255,255,255,.96);box-shadow:var(--shadow-lg);transform:translateX(-50%);overflow:hidden}
  body.dark .quick-bar{background:rgba(12,34,53,.96)!important}
  .mobile-tab .inner{display:flex;height:62px}
  .mtab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;font-weight:700;color:var(--ink-faint);position:relative}
  .mtab.on{color:var(--blue)}
  .mtab .badge{position:absolute;top:7px;right:24%;background:var(--coral);color:#fff;font-size:9px;font-weight:700;min-width:15px;height:15px;border-radius:100px;display:flex;align-items:center;justify-content:center;padding:0 4px}

  /* modal */
  .modal{display:none;position:fixed;inset:0;background:rgba(12,39,64,.45);z-index:60;align-items:center;justify-content:center;padding:18px}
  .modal.on{display:flex}
  .modal .box{background:#fff;border-radius:20px;width:440px;max-width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg)}
  .modal .mh{padding:18px 22px;border-bottom:1px solid var(--sky-line);display:flex;align-items:center}
  .modal .mh h3{font-family:var(--display);font-weight:700;font-size:18px}
  .modal .mb{padding:22px}
  .modal .mf{padding:16px 22px;border-top:1px solid var(--sky-line);display:flex;gap:10px;justify-content:flex-end}

  /* ===== RESPONSIVE ===== */
  @media(max-width:1180px){
    .chat-people{display:none}
  }
  @media(max-width:980px){
    #login{padding:22px}
    .login-art .copy{display:none}
    .login-card{width:min(100%,400px);padding:34px 26px}
  }
  @media(max-width:860px){
    .hamburger{display:flex}
    .sidenav{position:fixed;top:60px;bottom:0;left:0;z-index:31;transform:translateX(-100%);transition:transform .22s;box-shadow:var(--shadow-lg)}
    .sidenav.open{transform:translateX(0)}
    .scrim.open{display:block}
    .topbar .search{display:none}
    .me .meta-txt{display:none}
    .mobile-tab{display:block}
    .main{padding-bottom:calc(62px + var(--safe-b))}
    .leads-wrap,.chat-wrap{flex-direction:column}
    .leadlist,.chan-list{width:100%;border-right:none}
    .leadlist{max-height:42%}
    .chan-list{max-height:38%;border-bottom:1px solid var(--sky-line)}
    .leaddetail,.leads-wrap.show-detail .leadlist{}
    /* mobile master-detail toggle */
    .leads-wrap.show-detail .leadlist{display:none}
    .leads-wrap:not(.show-detail) .leaddetail{display:none}
    .leadlist{max-height:none;flex:1}
    .chat-wrap.show-thread .chan-list{display:none}
    .chat-wrap:not(.show-thread) .chat-main{display:none}
    .chan-list{max-height:none;flex:1}
    #softphone{left:12px;right:12px;width:auto;bottom:calc(74px + var(--safe-b))}
    #ray-panel{right:10px;left:10px;width:auto;bottom:calc(74px + var(--safe-b));height:auto;top:74px}
    #ray-fab{bottom:calc(74px + var(--safe-b))}
    .view{padding:16px}
    .back-m{display:inline-flex!important}
  }
  .back-m{display:none;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--blue);margin-bottom:12px}
  @media(min-width:861px){.back-m{display:none!important}}

  /* ===== MERIDIAN SHELL OVERRIDES ===== */
  :root{--navy:#0B1A28;--navy-2:#0E2030;--navy-line:#16293A;--meridian-gold:#F5C145}
  .topbar{height:66px;padding:0 22px;background:var(--white);gap:16px}
  .cmd-search{flex:1;max-width:560px;height:42px;border:1px solid var(--sky-line);border-radius:12px;background:var(--bg);display:flex;align-items:center;gap:10px;padding:0 12px;color:var(--ink-faint);text-align:left}
  .cmd-search:hover{border-color:var(--blue);background:#fff}
  .cmd-search svg{flex:0 0 auto}
  .cmd-placeholder{font-size:13.5px;font-weight:700;flex:1}
  .cmd-search kbd{font:700 11px var(--body);color:var(--ink-faint);border:1px solid var(--sky-line);background:var(--white);border-radius:7px;padding:4px 7px}
  .top-divider{width:1px;height:28px;background:var(--sky-line);margin:0 2px}
  .topbar .right{position:relative}
  .top-ic,.icon-btn [data-icon]{display:inline-flex;align-items:center;justify-content:center}
  .notif-btn .dot{top:7px;right:8px}
  .account-trigger{width:44px;height:44px;padding:4px;border-radius:50%;border:1px solid var(--sky-line)}
  .account-trigger .avatar{width:34px;height:34px}
  .notification-panel,.account-menu{position:absolute;top:58px;right:18px;z-index:46;width:340px;display:none;background:var(--white);border:1px solid var(--sky-line);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden}
  .notification-panel.on,.account-menu.on{display:block}
  .pop-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--sky-line)}
  .pop-head b{font-family:var(--display);font-size:15px}.pop-head span{font-size:12px;color:var(--ink-faint);font-weight:700}
  .pop-list{max-height:360px;overflow:auto;padding:8px}
  .notif-row{width:100%;display:flex;gap:10px;text-align:left;padding:11px;border-radius:11px;color:var(--ink-soft)}
  .notif-row:hover{background:var(--sky)}.notif-row b{display:block;color:var(--ink);font-size:13px}.notif-row small{display:block;margin-top:3px;color:var(--ink-faint);line-height:1.4}
  .notif-mark{width:9px;height:9px;border-radius:50%;background:var(--coral);margin-top:5px;flex:0 0 auto}
  .account-menu{width:260px;padding:8px}
  .acct-head{display:flex;align-items:center;gap:11px;padding:10px 10px 13px;border-bottom:1px solid var(--sky-line);margin-bottom:6px}
  .acct-head p{font-size:12px;color:var(--ink-faint);margin-top:2px}.account-menu button{width:100%;text-align:left;padding:10px 11px;border-radius:10px;font-weight:700;color:var(--ink-soft)}.account-menu button:hover{background:var(--sky);color:var(--ink)}

  .sidenav,body.dark .sidenav{width:248px;background:var(--navy)!important;border-right:1px solid var(--navy-line)!important;color:#D7E4EE}
  .sidenav::-webkit-scrollbar-thumb{background:#24394D}
  .nav-section{color:#7890A5;letter-spacing:.12em;padding-top:18px}
  .nav-item{color:#C8D7E4;border-radius:10px}
  .nav-item:hover{background:var(--navy-2);color:#fff}
  .nav-item.on{background:rgba(245,193,69,.12);color:#fff;box-shadow:inset 3px 0 0 var(--meridian-gold)}
  .nav-item.on .ic{color:var(--meridian-gold)}
  .nav-item .ic{width:21px;height:21px;display:inline-flex;align-items:center;justify-content:center;color:#88A1B7}
  .nav-item .badge{background:rgba(255,255,255,.12);color:#F7D874}
  .nav-pres{background:var(--navy-2);border-color:var(--navy-line)}
  .nav-pres .lbl{color:#7890A5}
  .pres-opt{border-color:#244158;color:#D7E4EE;background:#10283A}
  .pres-opt:hover{background:#143047}.pres-opt.on{border-color:var(--meridian-gold);background:rgba(245,193,69,.12);color:#FFE6A8}
  @media(min-width:861px){.quick-bar.mobile-tab{display:none!important}}

  .dock{position:fixed;top:66px;right:0;bottom:0;width:440px;max-width:100vw;background:var(--white);border-left:1px solid var(--sky-line);box-shadow:-18px 0 48px rgba(12,39,64,.16);z-index:42;transform:translateX(102%);transition:transform .22s ease;display:flex;flex-direction:column}
  .dock.on{transform:translateX(0)}
  .dock-head{height:68px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;border-bottom:1px solid var(--sky-line)}
  .dock-title{font-family:var(--display);font-weight:800}.dock-sub{font-size:12px;color:var(--ink-faint);margin-top:2px}
  .dock-tabs{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--sky-line)}
  .dtab{flex:1;padding:9px;border-radius:10px;font-weight:800;color:var(--ink-faint);background:var(--bg)}
  .dtab.on{background:var(--blue);color:#fff}
  .dock-pane{display:none;min-height:0;flex:1}.dock-pane.on{display:flex;flex-direction:column}
  .dock-chat-layout{flex:1;min-height:0;display:flex}
  .dock-channel-list{width:150px;flex:0 0 auto;border-right:1px solid var(--sky-line);padding:8px;background:var(--bg);overflow:auto}
  .dock-channel-list .chan{width:100%;border-radius:10px;text-align:left;background:transparent}
  .dock-thread{flex:1;min-width:0;display:flex;flex-direction:column}
  .dock-thread-head{height:48px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid var(--sky-line)}
  .dock-thread-head span:last-child{font-size:12px;color:var(--ink-faint);margin-left:auto}
  .dock-chat-scroll{padding:14px}.dock-compose{padding:10px;border-top:1px solid var(--sky-line);display:flex;gap:8px}
  .dock-compose textarea{flex:1;resize:none;border:1.5px solid var(--sky-line);border-radius:12px;padding:10px 12px;background:var(--white);color:var(--ink)}

  .command-overlay{position:fixed;inset:0;background:rgba(8,25,40,.34);z-index:70;display:none;align-items:flex-start;justify-content:center;padding-top:10vh}
  .command-overlay.on{display:flex}
  .command-box{width:560px;max-width:calc(100vw - 28px);background:var(--white);border:1px solid var(--sky-line);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden}
  .command-search{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--sky-line)}
  .command-search input{border:0;outline:0;background:transparent!important;color:var(--ink);font-size:16px;flex:1}
  .command-list{padding:8px;max-height:420px;overflow:auto}
  .command-item{width:100%;display:flex;flex-direction:column;gap:3px;text-align:left;padding:12px;border-radius:12px}
  .command-item:hover{background:var(--sky)}.command-item span{font-weight:800}.command-item small{color:var(--ink-faint)}

  .empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:28px 18px;border:1px dashed var(--sky-line);border-radius:14px;background:var(--bg);color:var(--ink-soft)}
  .empty-state .empty-icon{width:44px;height:44px;border-radius:14px;background:var(--white);border:1px solid var(--sky-line);display:flex;align-items:center;justify-content:center;color:var(--blue)}
  .empty-state b{color:var(--ink)}.empty-state p{max-width:310px;font-size:13px;color:var(--ink-faint);line-height:1.45}.empty-state .btn{margin-top:4px}

  #softphone{width:360px;border-radius:18px;bottom:24px}
  .sp-head{background:var(--navy);border-bottom:1px solid var(--navy-line)}
  .sp-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
  .sp-ic{width:auto;height:46px;border-radius:12px;font-size:12px;font-weight:800;gap:4px}
  .sp-ic::after{content:none!important}
  .incoming-call{top:84px;border-radius:16px}

  body.dark .dock,body.dark .notification-panel,body.dark .account-menu,body.dark .command-box{background:var(--white)!important;border-color:var(--sky-line)!important}
  body.dark .cmd-search:hover{background:#0F2A40}
  body.dark .empty-state .empty-icon{background:#0F2A40}

  @media(max-width:860px){
    .topbar{height:62px;padding:0 12px}.cmd-search{max-width:none;height:40px}.cmd-placeholder{font-size:0}.cmd-placeholder::after{content:"Command";font-size:13px}
    .sidenav{top:62px;width:268px}
    .dock{top:62px;width:100%}
    .notification-panel,.account-menu{right:8px;top:54px}
    .quick-bar.mobile-tab{display:block!important}
  }