*{box-sizing:border-box;margin:0;padding:0}:root{--orange:#ff6500;--orange2:#ff8a1d;--bg:#050505;--panel:#121212;--line:#2c2c2c;--text:#fff;--muted:#aaa}html,body{min-height:100%;background:#000;color:var(--text);font-family:Tahoma,Arial,sans-serif}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.layout{min-height:100vh;display:grid;grid-template-columns:minmax(180px,220px) minmax(0,1fr);background:radial-gradient(circle at top,#171717,#060606 55%,#000)}.sidebar{grid-column:1;position:sticky;top:0;height:100vh;border-left:1px solid var(--line);background:#111;padding:18px;overflow:auto}.sidebar-logo{height:140px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #222;margin-bottom:14px}.sidebar-logo img{width:min(160px,95%);height:110px;object-fit:contain;border-radius:10px;background:#050505}.fallback-logo{width:80px;height:80px;border:2px solid var(--orange);border-radius:20px;color:var(--orange);display:grid;place-items:center;font-size:42px}.sidebar-nav{display:flex;flex-direction:column;gap:10px}.sidebar-nav a{height:46px;border-radius:14px;background:#181818;border:1px solid transparent;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;color:#ddd;white-space:nowrap}.sidebar-nav a.active,.sidebar-nav a:hover{background:#331805;border-color:var(--orange);color:#fff}.content{grid-column:2;min-width:0;padding:30px clamp(16px,2vw,32px) 120px}.header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}.header h1{font-size:clamp(22px,2.4vw,32px);line-height:1.4}.header p{color:var(--muted);line-height:1.8;margin-top:4px}.notify{width:46px;height:46px;border:1px solid #333;background:#151515;color:#fff;border-radius:14px}.welcome{display:grid;grid-template-columns:74px minmax(0,1fr) minmax(160px,220px);gap:18px;align-items:center;border:1px solid var(--line);border-radius:22px;background:linear-gradient(135deg,#171717,#0e0e0e);padding:18px;margin-bottom:16px}.avatar{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#252525;font-size:32px}.welcome-text h2{font-size:clamp(20px,2vw,28px)}.welcome-text p,.device-summary span,.device-summary small{color:var(--muted)}.device-summary{border-right:1px solid #444;padding-right:18px}.device-summary strong{display:block;font-size:42px;color:var(--orange)}.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,380px);gap:24px;align-items:center;min-height:260px;border:1px solid var(--line);border-radius:24px;background:radial-gradient(circle at 18% 60%,#3a1d08,#101010 58%);padding:clamp(18px,3vw,34px);margin-bottom:16px;overflow:hidden}.hero-text{min-width:0;z-index:1}.hero-text h2{font-size:clamp(28px,3vw,42px);line-height:1.35;margin-bottom:10px}.hero-text p{color:#c9c9c9;line-height:1.9;margin-bottom:18px;max-width:720px}.hero-media{height:240px;display:flex;align-items:center;justify-content:center;overflow:hidden}.hero-media img{width:100%;height:100%;object-fit:contain}.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--orange),var(--orange2));color:#fff;border-radius:14px;padding:12px 18px;font-weight:800;border:0}.btn-outline{display:inline-flex;border:1px solid var(--orange);color:var(--orange);border-radius:14px;padding:10px 14px;margin-top:10px}.oven-graphic{width:100%;max-width:320px;height:170px;border-radius:20px;background:linear-gradient(135deg,#333,#111);border:4px solid #060606;box-shadow:inset 0 0 0 2px #555;position:relative}.oven-graphic span{position:absolute;top:45px;width:56px;height:78px;border-radius:9px;background:linear-gradient(#3b2100,#ff8118);border:3px solid #111}.oven-graphic span:first-child{right:80px}.oven-graphic span:nth-child(2){right:148px}.oven-graphic i{position:absolute;right:24px;top:38px;width:36px;height:96px;background:#080808;border-radius:10px}.oven-graphic.small{height:120px;max-width:220px}.oven-graphic.small span{top:32px;width:38px;height:54px}.oven-graphic.small span:first-child{right:55px}.oven-graphic.small span:nth-child(2){right:102px}.oven-graphic.small i{right:18px;top:28px;width:24px;height:70px}.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:16px}.stats article{border:1px solid var(--line);border-radius:18px;background:#151515;padding:18px}.stats strong{display:block;color:var(--orange);font-size:36px}.stats span{color:#ddd}.menu-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.menu-card{min-height:170px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,#151515,#0c0c0c);padding:22px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}.menu-card:hover{border-color:var(--orange)}.menu-icon{width:76px;height:76px;border-radius:50%;background:radial-gradient(circle,#2d190a,#151515);border:1px solid #4d2a0c;color:var(--orange);display:flex;align-items:center;justify-content:center;font-size:32px;margin-bottom:14px;overflow:hidden}.menu-icon img{width:100%;height:100%;object-fit:contain}.menu-card h3{font-size:19px;margin-bottom:8px}.menu-card p{color:var(--muted);line-height:1.8}.model-grid,.grid-list,.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}.model-card,.row-card,.post-card,.list-panel,.empty{border:1px solid var(--line);border-radius:20px;background:#111;padding:18px}.model-media{height:150px;display:grid;place-items:center}.model-media img{height:100%;object-fit:contain}.row-card h3,.model-card h3,.post-card h3{color:#ff9a2f;margin-bottom:8px}.row-card p,.model-card p,.post-card p,.muted{color:var(--muted);line-height:1.8}.list-panel{margin-top:18px}.list-panel h2{margin-bottom:12px}.mobile-nav{display:none}@media(max-width:980px){.layout{grid-template-columns:1fr}.sidebar{display:none}.content{grid-column:1;padding-bottom:95px}.hero{grid-template-columns:1fr}.hero-media{order:-1;height:210px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.menu-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.mobile-nav{display:flex;position:fixed;left:50%;bottom:14px;transform:translateX(-50%);width:calc(100% - 28px);max-width:680px;background:rgba(16,16,16,.96);border:1px solid #2b2b2b;border-radius:28px;padding:11px;justify-content:space-around;z-index:20;backdrop-filter:blur(14px)}.mobile-nav a{display:flex;flex-direction:column;align-items:center;gap:4px;color:#aaa;font-size:20px}.mobile-nav a span{font-size:12px}.mobile-nav a.active{color:var(--orange)}}@media(max-width:620px){.welcome{grid-template-columns:60px 1fr}.device-summary{grid-column:1/-1;border-right:0;border-top:1px solid #333;padding:12px 0 0}.menu-cards,.stats{grid-template-columns:1fr}.header{align-items:flex-start}.hero-media{height:180px}.content{padding-inline:12px}.btn-primary{width:100%}}
.lang-switch{
  position:relative;
  display:flex;
  align-items:center;
  gap:6px;
  background:linear-gradient(145deg,#171717,#0b0b0b);
  border:1px solid #2f2f2f;
  border-radius:999px;
  padding:6px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 10px 30px rgba(0,0,0,.25);
}

.lang-switch::before{
  content:"🌐";
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,101,0,.12);
  border:1px solid rgba(255,101,0,.35);
  margin-inline-end:2px;
}

.lang-switch button{
  min-width:78px;
  height:34px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#aaa;
  font-weight:800;
  cursor:pointer;
  transition:.2s ease;
}

.lang-switch button:hover{
  color:#fff;
  background:#202020;
}

.lang-switch button.active{
  color:#fff;
  background:linear-gradient(135deg,var(--orange),var(--orange2));
  box-shadow:0 8px 22px rgba(255,101,0,.28);
}
.top-language-bar{
  display:flex;
  justify-content:flex-end;
  margin-bottom:16px;
}

.language-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px;
  border-radius:999px;
  background:linear-gradient(145deg,#171717,#090909);
  border:1px solid #2d2d2d;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 10px 28px rgba(0,0,0,.28);
}

.language-toggle::before{
  content:"🌐";
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,101,0,.12);
  border:1px solid rgba(255,101,0,.35);
}

.language-toggle button{
  height:36px;
  min-width:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#aaa;
  font-weight:800;
  cursor:pointer;
}

.language-toggle button:hover{
  background:#202020;
  color:#fff;
}

.language-toggle button.active{
  color:#fff;
  background:linear-gradient(135deg,var(--orange),var(--orange2));
  box-shadow:0 8px 22px rgba(255,101,0,.28);
}

.language-toggle .flag{
  font-size:11px;
  padding:3px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}

@media(max-width:620px){
  .top-language-bar{
    justify-content:center;
  }
  .language-toggle{
    width:100%;
  }
  .language-toggle button{
    flex:1;
    min-width:0;
  }
}
.model-card{
  position:relative;
  color:#fff;
  transition:.2s ease;
}

.model-card:hover{
  transform:translateY(-3px);
  border-color:var(--orange);
}

.active-model{
  border-color:var(--orange) !important;
  box-shadow:0 0 0 1px rgba(255,101,0,.35), 0 14px 35px rgba(255,101,0,.12);
}

.sold-badge{
  margin-top:12px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,101,0,.12);
  border:1px solid rgba(255,101,0,.35);
  color:#ff9a2f;
  font-weight:800;
  font-size:13px;
}

.device-list-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}

.device-search{
  display:flex;
  gap:8px;
  min-width:360px;
}

.device-search input{
  flex:1;
  background:#0b0b0b;
  border:1px solid #333;
  border-radius:14px;
  color:#fff;
  padding:12px 14px;
  outline:none;
}

.device-search input:focus{
  border-color:var(--orange);
}

.device-search button{
  border:0;
  border-radius:14px;
  padding:12px 18px;
  background:linear-gradient(135deg,var(--orange),var(--orange2));
  color:#fff;
  font-weight:800;
  cursor:pointer;
}

@media(max-width:720px){
  .device-list-header{
    flex-direction:column;
    align-items:stretch;
  }

  .device-search{
    min-width:0;
    width:100%;
  }
}.device-profile-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px;
}

.profile-card,
.profile-section{
  border:1px solid var(--line);
  border-radius:20px;
  background:#111;
  padding:18px;
}

.profile-card h2,
.profile-section h2{
  color:#ff9a2f;
  margin-bottom:12px;
}

.profile-card p{
  color:#ccc;
  line-height:2;
}

.full-btn{
  width:100%;
  margin-top:12px;
}

.profile-section{
  margin-bottom:18px;
}

@media(max-width:900px){
  .device-profile-grid{
    grid-template-columns:1fr;
  }
}.action-bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:18px;
}

.action-bar .btn-primary,
.action-bar .btn-outline{
  min-width:160px;
}.action-bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:18px;
}

.action-bar .btn-primary,
.action-bar .btn-outline{
  min-width:170px;
}
.ticket-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.ticket-card{
  border:1px solid #2d2d2d;
  border-radius:18px;
  background:linear-gradient(145deg,#141414,#0b0b0b);
  padding:16px;
}

.ticket-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:12px;
}

.ticket-top h3{
  color:#ff9a2f;
  font-size:18px;
}

.ticket-status{
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background:#222;
  color:#ddd;
}

.status-new{
  background:rgba(255,101,0,.15);
  color:#ff9a2f;
  border:1px solid rgba(255,101,0,.35);
}

.status-in_progress{
  background:rgba(0,145,255,.15);
  color:#55bfff;
  border:1px solid rgba(0,145,255,.35);
}

.status-resolved,
.status-closed{
  background:rgba(49,214,107,.15);
  color:#31d66b;
  border:1px solid rgba(49,214,107,.35);
}

.ticket-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 14px;
  color:#ccc;
  font-size:13px;
  margin-bottom:14px;
}

.ticket-description{
  border-top:1px solid #252525;
  padding-top:12px;
  color:#ddd;
  line-height:1.9;
}

.ticket-description strong{
  color:#fff;
}

.ticket-description p{
  color:#bbb;
  margin-top:6px;
}

.ticket-actions{
  margin-top:14px;
}

@media(max-width:720px){
  .ticket-top{
    flex-direction:column;
    align-items:flex-start;
  }

  .ticket-meta{
    grid-template-columns:1fr;
  }
}
.device-tabs{
  position:sticky;
  top:12px;
  z-index:5;
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:10px;
  margin-bottom:18px;
  border:1px solid #2d2d2d;
  border-radius:18px;
  background:rgba(12,12,12,.92);
  backdrop-filter:blur(14px);
}
.custom-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 18px;
  max-width:900px;
  margin:0 auto;
}

.custom-form label{
  display:block;
  color:#ddd;
  font-weight:800;
  margin-bottom:6px;
}

.custom-form input,
.custom-form select,
.custom-form textarea{
  width:100%;
  background:#0b0b0b;
  border:1px solid #333;
  border-radius:14px;
  color:#fff;
  padding:12px 14px;
  outline:none;
}

.custom-form textarea{
  resize:vertical;
}

.custom-form input:focus,
.custom-form select:focus,
.custom-form textarea:focus{
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,101,0,.12);
}

.custom-form .checkbox-row{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:10px;
}

.custom-form .checkbox-row input{
  width:auto;
}

.form-actions{
  grid-column:1 / -1;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:10px;
}

@media(max-width:720px){
  .custom-form{
    grid-template-columns:1fr;
  }
}
.device-tabs a{
  white-space:nowrap;
  padding:10px 16px;
  border-radius:999px;
  background:#181818;
  color:#ddd;
  border:1px solid #2d2d2d;
  font-weight:800;
}

.device-tabs a:hover{
  color:#fff;
  border-color:var(--orange);
  background:#331805;
}

html{
  scroll-behavior:smooth;
}

.profile-section,
.device-profile-grid{
  scroll-margin-top:90px;
}
.form-field{display:flex;flex-direction:column;}
.custom-form input[type="file"]{padding:10px;background:#111;}
.device-page-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
  padding:22px;
  border:1px solid #2d2d2d;
  border-radius:22px;
  background:linear-gradient(145deg,#141414,#080808);
}

.device-page-head h1{
  color:#fff;
  font-size:32px;
  margin-bottom:8px;
}

.device-page-head p{
  color:#aaa;
}

.device-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.device-tabs{
  position:sticky;
  top:12px;
  z-index:10;
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:10px;
  margin-bottom:18px;
  border:1px solid #2d2d2d;
  border-radius:18px;
  background:rgba(12,12,12,.94);
  backdrop-filter:blur(14px);
}

.device-tabs a{
  white-space:nowrap;
  padding:10px 18px;
  border-radius:999px;
  background:#181818;
  color:#ddd;
  border:1px solid #2d2d2d;
  font-weight:800;
}

.device-tabs a:hover{
  color:#fff;
  border-color:var(--orange);
  background:#331805;
}

.device-panel{
  margin-bottom:18px;
  padding:22px;
  border:1px solid #2d2d2d;
  border-radius:22px;
  background:linear-gradient(145deg,#131313,#080808);
}

.device-panel h2{
  color:#ff9a2f;
  margin-bottom:16px;
  font-size:24px;
}

.device-info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.device-info-grid div{
  padding:14px;
  border:1px solid #292929;
  border-radius:14px;
  background:#0b0b0b;
  color:#ddd;
}

html{
  scroll-behavior:smooth;
}

.device-panel{
  scroll-margin-top:100px;
}

@media(max-width:760px){
  .device-page-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .device-info-grid{
    grid-template-columns:1fr;
  }

  .device-actions{
    width:100%;
  }

  .device-actions a{
    flex:1;
    text-align:center;
  }
}
.full-field{
  grid-column:1 / -1;
}
.chat-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:20px;
  border:1px solid #2d2d2d;
  border-radius:22px;
  background:linear-gradient(145deg,#141414,#080808);
  margin-bottom:16px;
}

.chat-header h1{
  color:#fff;
  margin-bottom:8px;
}

.chat-header p{
  color:#aaa;
}

.ticket-chat-layout{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:16px;
}

.ticket-side-info{
  border:1px solid #2d2d2d;
  border-radius:22px;
  background:#0b0b0b;
  padding:18px;
  height:max-content;
}

.ticket-side-info h2{
  color:#ff9a2f;
  margin-bottom:14px;
}

.ticket-side-info p{
  color:#ddd;
  margin-bottom:10px;
}

.chat-box{
  border:1px solid #2d2d2d;
  border-radius:22px;
  background:linear-gradient(145deg,#101010,#050505);
  overflow:hidden;
  min-height:620px;
  display:flex;
  flex-direction:column;
}

.chat-messages{
  flex:1;
  padding:20px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.chat-message{
  display:flex;
}

.chat-message.mine{
  justify-content:flex-start;
}

.chat-message.other{
  justify-content:flex-end;
}

.chat-bubble{
  max-width:70%;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid #333;
  color:#fff;
}

.chat-message.mine .chat-bubble{
  background:#ff6500;
  border-color:#ff6500;
}

.chat-message.other .chat-bubble{
  background:#171717;
}

.chat-bubble p{
  margin-bottom:8px;
  line-height:1.8;
}

.chat-bubble span{
  display:block;
  font-size:11px;
  color:rgba(255,255,255,.75);
}

.chat-form{
  display:flex;
  gap:10px;
  padding:14px;
  border-top:1px solid #2d2d2d;
  background:#0b0b0b;
}

.chat-form input{
  flex:1;
  background:#111;
  color:#fff;
  border:1px solid #333;
  border-radius:999px;
  padding:14px 18px;
  outline:none;
}

.chat-form input:focus{
  border-color:var(--orange);
}

.chat-form button{
  border:0;
  border-radius:999px;
  padding:0 24px;
  background:var(--orange);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}

@media(max-width:850px){
  .ticket-chat-layout{
    grid-template-columns:1fr;
  }

  .chat-header{
    flex-direction:column;
    align-items:flex-start;
  }

  .chat-bubble{
    max-width:88%;
  }
}

/* =========================================================
   Morshed Gohar HUB - V4 Clean Overrides
   Keep this section at the very END.
   ========================================================= */

.content{width:100%;min-width:0}.btn-primary,.btn-outline{cursor:pointer;transition:.18s ease}.btn-primary:hover,.btn-outline:hover{transform:translateY(-1px);filter:brightness(1.08)}.btn-outline{align-items:center;justify-content:center;font-weight:800}

.custom-form{width:100%;max-width:760px;margin:0 auto;display:grid!important;grid-template-columns:1fr 1fr!important;gap:18px!important}.custom-form .form-field{display:flex!important;flex-direction:column!important;gap:8px!important}.custom-form .form-field label{color:#ddd!important;font-weight:800!important;margin:0!important}.custom-form .form-field input,.custom-form .form-field select,.custom-form .form-field textarea{width:100%!important;min-height:44px!important;background:#0b0b0b!important;color:#fff!important;border:1px solid #333!important;border-radius:14px!important;padding:10px 12px!important;box-sizing:border-box!important}.custom-form .form-field textarea{min-height:120px!important;resize:vertical}.custom-form .form-field input:focus,.custom-form .form-field select:focus,.custom-form .form-field textarea:focus{border-color:var(--orange)!important;box-shadow:0 0 0 3px rgba(255,101,0,.14)!important}.custom-form input[type="file"]{background:#111!important;color:#fff!important}.full-field,.custom-form .checkbox-row,.custom-form .form-actions,.form-actions{grid-column:1/-1!important}.custom-form .checkbox-row{display:flex!important;align-items:center!important;gap:10px!important;color:#ddd!important}.custom-form .checkbox-row input{width:auto!important;min-height:auto!important}.form-actions{display:flex!important;justify-content:flex-end!important;gap:10px!important;margin-top:8px}

.device-page-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;margin-bottom:18px!important;padding:22px!important;border:1px solid #2d2d2d!important;border-radius:22px!important;background:linear-gradient(145deg,#141414,#080808)!important}.device-page-head h1{color:#fff!important;font-size:clamp(24px,2.6vw,34px)!important;line-height:1.35!important;margin-bottom:8px!important}.device-page-head p{color:#aaa!important;line-height:1.9!important}.device-actions{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important}.device-tabs{position:sticky!important;top:12px!important;z-index:10!important;display:flex!important;gap:8px!important;overflow-x:auto!important;padding:10px!important;margin-bottom:18px!important;border:1px solid #2d2d2d!important;border-radius:18px!important;background:rgba(12,12,12,.94)!important;backdrop-filter:blur(14px)!important}.device-tabs a{white-space:nowrap!important;padding:10px 18px!important;border-radius:999px!important;background:#181818!important;color:#ddd!important;border:1px solid #2d2d2d!important;font-weight:800!important}.device-tabs a:hover{color:#fff!important;border-color:var(--orange)!important;background:#331805!important}.device-panel{margin-bottom:18px!important;padding:22px!important;border:1px solid #2d2d2d!important;border-radius:22px!important;background:linear-gradient(145deg,#131313,#080808)!important;scroll-margin-top:100px!important}.device-panel h2{color:#ff9a2f!important;margin-bottom:16px!important;font-size:24px!important}.device-info-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}.device-info-grid div{padding:14px!important;border:1px solid #292929!important;border-radius:14px!important;background:#0b0b0b!important;color:#ddd!important}

.ticket-grid{display:grid!important;grid-template-columns:1fr!important;gap:14px!important}.ticket-card{border:1px solid #2d2d2d!important;border-radius:18px!important;background:linear-gradient(145deg,#141414,#0b0b0b)!important;padding:16px!important}.ticket-top{display:flex!important;justify-content:space-between!important;gap:12px!important;align-items:center!important;margin-bottom:12px!important}.ticket-top h3{color:#ff9a2f!important;font-size:18px!important}.ticket-meta{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px 14px!important;color:#ccc!important;font-size:13px!important;margin-bottom:14px!important}.ticket-description{border-top:1px solid #252525!important;padding-top:12px!important;color:#ddd!important;line-height:1.9!important}

.video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.video-card{border:1px solid #2d2d2d;border-radius:18px;background:linear-gradient(145deg,#141414,#0b0b0b);padding:16px}.video-card h3{color:#ff9a2f;margin-bottom:8px}.device-video-player{width:100%;max-height:320px;border-radius:14px;margin:12px 0;background:#000}

.chat-header{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:16px!important;padding:20px!important;border:1px solid #2d2d2d!important;border-radius:22px!important;background:linear-gradient(145deg,#141414,#080808)!important;margin-bottom:16px!important}.chat-header h1{color:#fff!important;margin-bottom:8px!important;font-size:clamp(24px,2.6vw,34px)!important}.chat-header p{color:#aaa!important;line-height:1.8!important}.ticket-chat-layout{width:100%!important;display:grid!important;grid-template-columns:minmax(0,1fr) 320px!important;gap:16px!important;align-items:start!important}.ticket-side-info{grid-column:2!important;grid-row:1!important;border:1px solid #2d2d2d!important;border-radius:22px!important;background:#0b0b0b!important;padding:18px!important;height:max-content!important;position:sticky!important;top:90px!important}.ticket-side-info h2{color:#ff9a2f!important;margin-bottom:14px!important;font-size:24px!important}.ticket-side-info p{color:#ddd!important;margin-bottom:10px!important;line-height:1.9!important}.chat-box{grid-column:1!important;grid-row:1!important;border:1px solid #2d2d2d!important;border-radius:22px!important;background:linear-gradient(145deg,#101010,#050505)!important;overflow:hidden!important;min-height:560px!important;max-height:72vh!important;display:flex!important;flex-direction:column!important}.chat-messages{flex:1!important;min-height:450px!important;padding:20px!important;overflow-y:auto!important;display:flex!important;flex-direction:column!important;gap:12px!important;background:radial-gradient(circle at top left,rgba(255,101,0,.06),transparent 35%),linear-gradient(145deg,#090909,#050505)!important}.chat-message{width:100%!important;display:flex!important}.chat-message.mine{justify-content:flex-end!important}.chat-message.other{justify-content:flex-start!important}.chat-bubble{max-width:min(72%,720px)!important;padding:12px 14px!important;border-radius:18px!important;border:1px solid #333!important;color:#fff!important;box-shadow:0 10px 25px rgba(0,0,0,.18)}.chat-message.mine .chat-bubble{background:linear-gradient(135deg,var(--orange),var(--orange2))!important;border-color:var(--orange)!important;border-bottom-right-radius:4px!important}.chat-message.other .chat-bubble{background:#151515!important;border-color:#333!important;border-bottom-left-radius:4px!important}.chat-bubble p{margin-bottom:8px!important;line-height:1.9!important;color:#fff!important}.chat-bubble span{display:block!important;font-size:11px!important;color:rgba(255,255,255,.72)!important}.chat-form{display:flex!important;flex-direction:row-reverse!important;align-items:center!important;gap:10px!important;padding:14px!important;border-top:1px solid #2d2d2d!important;background:#0b0b0b!important}.chat-form input{flex:1!important;width:100%!important;min-height:48px!important;background:#111!important;color:#fff!important;border:1px solid #333!important;border-radius:999px!important;padding:14px 18px!important;outline:none!important}.chat-form input:focus{border-color:var(--orange)!important;box-shadow:0 0 0 3px rgba(255,101,0,.14)!important}.chat-form button{min-height:48px!important;border:0!important;border-radius:999px!important;padding:0 24px!important;background:linear-gradient(135deg,var(--orange),var(--orange2))!important;color:#fff!important;font-weight:900!important;cursor:pointer!important}

@media(max-width:980px){.ticket-chat-layout{grid-template-columns:1fr!important}.ticket-side-info,.chat-box{grid-column:1!important;grid-row:auto!important}.ticket-side-info{position:static!important}.chat-box{max-height:none!important}}@media(max-width:760px){.device-page-head,.chat-header{flex-direction:column!important;align-items:flex-start!important}.device-info-grid,.custom-form,.ticket-meta,.video-grid{grid-template-columns:1fr!important}.device-actions{width:100%!important}.device-actions a{flex:1!important;text-align:center!important}.chat-bubble{max-width:88%!important}}

.chat-attach-btn{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#151515;
  border:1px solid #333;
  cursor:pointer;
}

.chat-attach-btn input{
  display:none;
}

.chat-attachment-image{
  max-width:260px;
  border-radius:14px;
  margin:8px 0;
}

.chat-attachment-video{
  width:280px;
  max-width:100%;
  border-radius:14px;
  margin:8px 0;
  background:#000;
}

.chat-attachment-audio{
  width:260px;
  max-width:100%;
  margin:8px 0;
}

.chat-file-link{
  display:inline-flex;
  margin:8px 0;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.12);
  color:#fff;
}
/* ===== V5 Ticket Center Patch ===== */
.chat-header-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.danger-outline{border-color:#ff4d4d!important;color:#ff6b6b!important}
.ticket-chat-layout{display:grid!important;grid-template-columns:minmax(0,1fr) 320px!important;gap:16px!important;align-items:start!important;direction:ltr}
.ticket-side-info{direction:rtl;order:2;position:sticky;top:90px;border:1px solid #2d2d2d;border-radius:22px;background:#0b0b0b;padding:18px;height:max-content}
.chat-box{direction:rtl;order:1;min-height:620px!important;max-height:72vh;border:1px solid #2d2d2d;border-radius:22px;background:linear-gradient(145deg,#101010,#050505);overflow:hidden;display:flex;flex-direction:column}
.chat-messages{flex:1;min-height:480px;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.chat-message{display:flex!important;width:100%}
.chat-message.mine{justify-content:flex-end!important}
.chat-message.other{justify-content:flex-start!important}
.chat-bubble{max-width:min(72%,560px)!important;padding:12px 14px;border-radius:18px;border:1px solid #333;color:#fff;word-break:break-word}
.chat-message.mine .chat-bubble{background:linear-gradient(135deg,var(--orange),var(--orange2))!important;border-color:var(--orange)!important;border-bottom-right-radius:4px}
.chat-message.other .chat-bubble{background:#151515!important;border-color:#333!important;border-bottom-left-radius:4px}
.chat-bubble p{margin-bottom:8px;line-height:1.8}
.chat-bubble span{display:block;font-size:11px;color:rgba(255,255,255,.75);margin-top:6px}
.chat-form{display:flex!important;gap:10px;padding:14px;border-top:1px solid #2d2d2d;background:#0b0b0b;align-items:center}
.chat-form input[type="text"]{flex:1;min-height:46px;background:#111;color:#fff;border:1px solid #333;border-radius:999px;padding:14px 18px;outline:none}
.chat-form input[type="text"]:focus{border-color:var(--orange)}
.chat-form button{min-height:46px;border:0;border-radius:999px;padding:0 24px;background:var(--orange);color:#fff;font-weight:900;cursor:pointer}
.chat-attach-btn{min-width:46px;width:46px;height:46px;display:grid;place-items:center;border-radius:999px;background:#151515;border:1px solid #333;cursor:pointer}
.chat-attach-btn input{display:none}
.chat-attachment-image{max-width:360px;width:100%;border-radius:14px;margin:8px 0;display:block}
.chat-attachment-video{width:360px;max-width:100%;border-radius:14px;margin:8px 0;background:#000}
.chat-attachment-audio{width:280px;max-width:100%;margin:8px 0}
.chat-file-link{display:inline-flex;margin:8px 0;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.12);color:#fff}
.chat-system-message{align-self:center;max-width:80%;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid #333;color:#bbb;font-size:13px;text-align:center}
.chat-system-message span{display:block;font-size:10px;color:#777;margin-top:4px}
.chat-closed-note{padding:14px;background:rgba(255,77,77,.12);border-top:1px solid rgba(255,77,77,.25);color:#ff9a9a;text-align:center;font-weight:800}
@media(max-width:900px){.ticket-chat-layout{grid-template-columns:1fr!important;direction:rtl}.ticket-side-info{order:1;position:static}.chat-box{order:2;max-height:none}.chat-bubble{max-width:88%!important}.chat-header{flex-direction:column;align-items:flex-start}}
.msg-check{
  margin-right:6px;
  font-weight:900;
  color:rgba(255,255,255,.75);
}

.msg-check.read{
  color:#4fc3ff;
}
/* ===== V6 Message Ticks + Polling ===== */
.msg-check{
  margin-right:6px;
  font-weight:900;
  color:rgba(255,255,255,.75);
}

.msg-check.read{
  color:#4fc3ff;
}
/* ===== V7 Append Only Messages ===== */
.chat-message[data-message-id],
.chat-system-message[data-message-id]{
  scroll-margin-bottom:90px;
}
/* ===== V8.2 Upload UX ===== */
.upload-progress-panel{
  padding:12px 14px;
  border-top:1px solid #2d2d2d;
  background:#090909;
}

.upload-progress-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  color:#fff;
  font-size:13px;
  margin-bottom:8px;
}

.upload-progress-bar{
  height:8px;
  border-radius:999px;
  background:#222;
  overflow:hidden;
}

.upload-progress-bar div{
  height:100%;
  width:0;
  border-radius:999px;
  background:linear-gradient(135deg,var(--orange),var(--orange2));
  transition:width .15s ease;
}

.chat-box{
  position:relative;
}

.chat-drop-hint{
  position:absolute;
  inset:14px;
  z-index:50;
  display:none;
  align-items:center;
  justify-content:center;
  border:2px dashed var(--orange);
  border-radius:22px;
  background:rgba(0,0,0,.78);
  color:#fff;
  font-weight:900;
  font-size:22px;
  pointer-events:none;
  backdrop-filter:blur(8px);
}

.chat-drop-hint.active{
  display:flex;
}

#sendMessageBtn:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.selected-file-preview{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border:1px solid #333;
  border-radius:16px;
  background:#111;
  max-width:380px;
  margin:8px 0;
}

.selected-file-preview[style*="display:none"]{
  display:none !important;
}
.selected-file-thumb{
  width:60px;
  height:60px;
  min-width:60px;
  border-radius:12px;
  overflow:hidden;
  background:#1d1d1d;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
}

.selected-file-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.selected-file-info{
  flex:1;
  overflow:hidden;
}

.selected-file-info strong{
  display:block;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.selected-file-info span{
  display:block;
  margin-top:3px;
  color:#999;
  font-size:11px;
}

.selected-file-remove{
  width:34px;
  height:34px;
  border-radius:50%;
  border:none;
  background:#2b2b2b;
  color:#fff;
  cursor:pointer;
}
/* ===== V8.3 Optimistic Upload Bubble ===== */
.temp-upload-message{
  opacity:.95;
}

.temp-upload-bubble{
  min-width:260px;
}

.temp-upload-media{
  display:flex;
  gap:10px;
  align-items:center;
  margin:4px 0 10px;
}

.temp-upload-thumb{
  width:58px;
  height:58px;
  border-radius:14px;
  background:rgba(0,0,0,.28);
  display:grid;
  place-items:center;
  overflow:hidden;
  font-size:28px;
  flex:0 0 58px;
}

.temp-upload-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.temp-upload-info{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.temp-upload-info strong{
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:220px;
}

.temp-upload-info span{
  font-size:11px;
  opacity:.8;
}

.temp-upload-status{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
}

.temp-upload-progress{
  flex:1;
  height:7px;
  background:rgba(255,255,255,.25);
  border-radius:999px;
  overflow:hidden;
}

.temp-upload-progress-fill{
  height:100%;
  width:0;
  background:#fff;
  border-radius:999px;
  transition:width .15s ease;
}

.temp-upload-percent{
  font-size:11px;
  min-width:36px;
  text-align:left;
}

.temp-upload-meta{
  opacity:.85;
}

.upload-failed .chat-bubble{
  border-color:#ff4d4d !important;
}

.temp-upload-retry{
  margin-top:8px;
  border:0;
  border-radius:999px;
  padding:8px 12px;
  background:#fff;
  color:#111;
  cursor:pointer;
  font-weight:800;
}
/* ===== V11.2 Video Thumbnail Bubble ===== */
.chat-video-thumb{
  width:320px;
  max-width:100%;
  aspect-ratio:16/9;
  border-radius:14px;
  background-size:cover;
  background-position:center;
  background-color:#000;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  margin:8px 0;
}

.chat-video-thumb::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.42));
}

.chat-video-play{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:46px;
  text-shadow:0 6px 18px rgba(0,0,0,.7);
}

.chat-video-duration{
  position:absolute;
  right:10px;
  bottom:8px;
  background:rgba(0,0,0,.72);
  color:#fff;
  border-radius:999px;
  padding:4px 9px;
  font-size:12px;
  direction:ltr;
}
.media-viewer-stage video{
  width:auto !important;
  height:auto !important;
  max-width:92vw !important;
  max-height:82vh !important;
  object-fit:contain !important;
  display:block !important;
  background:#000 !important;
  border-radius:18px !important;
}

.media-viewer-stage{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.customer-hero{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:24px;
  border:1px solid #2d2d2d;
  border-radius:24px;
  background:radial-gradient(circle at top left,rgba(255,101,0,.18),transparent 38%),linear-gradient(145deg,#141414,#070707);
  margin-bottom:18px;
}

.customer-hero h1{
  font-size:clamp(26px,3vw,40px);
  margin-bottom:8px;
}

.customer-hero p{
  color:#aaa;
  line-height:1.9;
}

.customer-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px;
}

.customer-stats article{
  border:1px solid #2d2d2d;
  border-radius:20px;
  background:#111;
  padding:20px;
}

.customer-stats strong{
  display:block;
  font-size:38px;
  color:var(--orange);
}

.customer-stats span{
  color:#ddd;
  font-weight:800;
}

.customer-section{
  border:1px solid #2d2d2d;
  border-radius:24px;
  background:linear-gradient(145deg,#111,#070707);
  padding:22px;
  margin-bottom:18px;
}

.section-title{
  margin-bottom:16px;
}

.section-title h2{
  color:#ff9a2f;
  margin-bottom:6px;
}

.section-title p{
  color:#aaa;
}

.customer-device-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
}

.customer-device-card{
  border:1px solid #292929;
  border-radius:20px;
  background:#0b0b0b;
  padding:18px;
}

.customer-device-card h3{
  color:#fff;
  margin-bottom:12px;
}

.customer-device-card p{
  color:#ccc;
  line-height:1.9;
}

.customer-card-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.customer-ticket-list{
  display:grid;
  gap:10px;
}

.customer-ticket-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  border:1px solid #292929;
  border-radius:16px;
  background:#0b0b0b;
}

.customer-ticket-row span{
  color:#fff;
  font-weight:800;
}

.customer-ticket-row small{
  color:#aaa;
}

@media(max-width:760px){
  .customer-hero{
    flex-direction:column;
    align-items:flex-start;
  }

  .customer-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .customer-ticket-row{
    flex-direction:column;
  }
}
.login-card{
  max-width:460px;
  margin:60px auto;
  padding:28px;
  border:1px solid #2d2d2d;
  border-radius:24px;
  background:linear-gradient(145deg,#141414,#070707);
}

.login-card h1{
  margin-bottom:10px;
}

.login-card p{
  color:#aaa;
  line-height:1.9;
  margin-bottom:18px;
}

.login-form{
  display:grid;
  gap:12px;
}

.login-form input{
  width:100%;
  min-height:48px;
  border-radius:14px;
  border:1px solid #333;
  background:#0b0b0b;
  color:#fff;
  padding:12px 14px;
  outline:none;
}

.login-form input:focus{
  border-color:var(--orange);
}

.login-form button{
  min-height:48px;
  border:0;
  border-radius:14px;
  background:linear-gradient(135deg,var(--orange),var(--orange2));
  color:#fff;
  font-weight:900;
  cursor:pointer;
}.public-auth-body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at top right, rgba(255,106,0,.18), transparent 32%),
    linear-gradient(145deg,#070707,#000);
  color:#fff;
  font-family:inherit;
}

.public-auth-main{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.public-logo{

    display:flex;

    justify-content:center;

    padding-top:40px;

}

.public-logo img{

    width:140px;

    height:auto;

    margin-bottom:-20px;

    filter:drop-shadow(0 0 18px rgba(255,120,0,.35));

}
.public-logo{
  display:flex;
  justify-content:center;
  padding-top:38px;
}

.public-logo img{
  width:140px;
  height:auto;
  filter:drop-shadow(0 0 18px rgba(255,106,0,.45));
}
.login-logo{
  display:flex;
  justify-content:center;
  margin-bottom:18px;
}

.login-logo img{
  width:110px;
  height:auto;
  border-radius:18px;
  filter:drop-shadow(0 0 18px rgba(255,106,0,.45));
}

.public-logo{
  display:none;
}
.lead-dashboard{
  width:min(1100px,100%);
  margin:auto;
}

.lead-hero{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:28px;
  border:1px solid #2d2d2d;
  border-radius:28px;
  background:radial-gradient(circle at top right,rgba(255,106,0,.20),transparent 36%),linear-gradient(145deg,#141414,#070707);
  margin-bottom:22px;
}

.lead-hero h1{
  font-size:clamp(32px,4vw,54px);
  margin-bottom:10px;
}

.lead-hero p{
  color:#bbb;
  line-height:1.9;
}

.lead-logo img{
  width:130px;
  border-radius:20px;
  filter:drop-shadow(0 0 18px rgba(255,106,0,.45));
}

.lead-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.lead-card{
  min-height:210px;
  padding:24px;
  border:1px solid #292929;
  border-radius:24px;
  background:#101010;
  text-align:center;
  transition:.2s;
}

.lead-card:hover{
  transform:translateY(-4px);
  border-color:var(--orange);
}

.lead-card span{
  display:inline-flex;
  width:64px;
  height:64px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,106,0,.12);
  border:1px solid rgba(255,106,0,.35);
  font-size:28px;
  margin-bottom:16px;
}

.lead-card h3{
  color:#fff;
  margin-bottom:10px;
}

.lead-card p{
  color:#aaa;
  line-height:1.8;
}

.lead-actions{
  margin-top:20px;
  text-align:center;
}

@media(max-width:900px){
  .lead-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .lead-hero{
    flex-direction:column-reverse;
    text-align:center;
  }
}

@media(max-width:560px){
  .lead-grid{
    grid-template-columns:1fr;
  }
}
.lead-page{
  width:100%;
  max-width:1100px;
  margin:0 auto !important;
  padding:32px !important;
}

.lead-hero-card{
  display:block !important;
  padding:32px !important;
  border:1px solid #2a2a2a !important;
  border-radius:28px !important;
  background:linear-gradient(145deg,#151515,#080808) !important;
  margin-bottom:24px !important;
}

.lead-hero-card h1{
  font-size:42px !important;
  margin-bottom:10px !important;
}

.lead-hero-card p{
  color:#aaa !important;
}

.lead-card-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(260px,1fr)) !important;
  gap:18px !important;
}

.lead-feature-card{
  display:block !important;
  min-height:190px !important;
  padding:26px !important;
  border-radius:24px !important;
  background:#111 !important;
  border:1px solid #2a2a2a !important;
  text-align:center !important;
  text-decoration:none !important;
}

.lead-feature-card:hover{
  border-color:#ff6a00 !important;
}

.lead-feature-icon{
  width:64px !important;
  height:64px !important;
  border-radius:50% !important;
  margin:0 auto 16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(255,106,0,.13) !important;
  color:#ff6a00 !important;
  font-size:28px !important;
}

.lead-feature-card h3{
  color:#fff !important;
  margin-bottom:10px !important;
}

.lead-feature-card p{
  color:#aaa !important;
  line-height:1.8 !important;
}

@media(max-width:700px){
  .lead-card-grid{
    grid-template-columns:1fr !important;
  }
}
.lead-hero-v2{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:20px !important;
}

.lead-hero-badge{
  padding:12px 18px;
  border-radius:18px;
  background:rgba(255,106,0,.14);
  border:1px solid rgba(255,106,0,.45);
  color:#ff8a1d;
  font-weight:900;
  white-space:nowrap;
}

.lead-section{
  margin-top:28px;
}

.lead-section h2{
  margin-bottom:16px;
}

.lead-product-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.lead-product-card{
  padding:22px;
  border-radius:22px;
  background:linear-gradient(145deg,#151515,#080808);
  border:1px solid #2a2a2a;
}

.lead-product-card h3{
  color:#fff;
  margin-bottom:8px;
}

.lead-product-card p{
  color:#aaa;
}

@media(max-width:800px){
  .lead-hero-v2{
    flex-direction:column;
    align-items:flex-start !important;
  }

  .lead-product-row{
    grid-template-columns:1fr;
  }
}
.hub-body{
  margin:0;
  min-height:100vh;
  background:#050505;
  color:#fff;
}

.hub-shell{
  display:grid;
  grid-template-columns:260px 1fr;
  min-height:100vh;
}

.hub-sidebar{
  position:sticky;
  top:0;
  height:100vh;
  padding:22px 16px;
  border-left:1px solid #242424;
  background:linear-gradient(180deg,#111,#070707);
}

.hub-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:28px;
}

.hub-brand img{
  width:52px;
  height:52px;
  border-radius:16px;
  object-fit:cover;
}

.hub-brand strong{
  display:block;
  font-size:18px;
}

.hub-brand small{
  color:#ff8a1d;
  font-weight:900;
}

.hub-menu{
  display:grid;
  gap:8px;
}

.hub-menu a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 14px;
  border-radius:16px;
  color:#bdbdbd;
  text-decoration:none;
  transition:.2s;
}

.hub-menu a:hover,
.hub-menu a.active{
  background:rgba(255,106,0,.14);
  color:#fff;
}

.hub-content{
  padding:24px;
  padding-bottom:90px;
}

.hub-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px;
}

.hub-user{
  display:flex;
  align-items:center;
  gap:12px;
}

.hub-user small{
  display:block;
  color:#aaa;
  margin-top:3px;
}

.hub-avatar{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:#111;
  border:1px solid #2a2a2a;
}

.hub-search{
  display:flex;
  align-items:center;
  width:min(420px,100%);
  border:1px solid #2a2a2a;
  border-radius:16px;
  background:#0c0c0c;
  overflow:hidden;
}

.hub-search input{
  flex:1;
  height:46px;
  padding:0 14px;
  border:0;
  outline:0;
  color:#fff;
  background:transparent;
}

.hub-search button{
  width:52px;
  height:46px;
  border:0;
  color:#fff;
  background:rgba(255,106,0,.16);
  cursor:pointer;
}

.hub-mobile-nav{
  display:none;
}

@media(max-width:860px){
  .hub-shell{
    display:block;
  }

  .hub-sidebar{
    display:none;
  }

  .hub-content{
    padding:16px;
    padding-bottom:92px;
  }

  .hub-topbar{
    align-items:flex-start;
    flex-direction:column;
  }

  .hub-search{
    width:100%;
  }

  .hub-mobile-nav{
    position:fixed;
    right:12px;
    left:12px;
    bottom:12px;
    z-index:50;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
    padding:8px;
    border:1px solid #2a2a2a;
    border-radius:22px;
    background:rgba(10,10,10,.92);
    backdrop-filter:blur(18px);
  }

  .hub-mobile-nav a{
    display:grid;
    place-items:center;
    gap:3px;
    min-height:54px;
    border-radius:16px;
    color:#aaa;
    text-decoration:none;
    font-size:18px;
  }

  .hub-mobile-nav a span{
    font-size:11px;
  }

  .hub-mobile-nav a.active{
    background:rgba(255,106,0,.18);
    color:#fff;
  }
}
.hub-shell{
  grid-template-columns:300px 1fr !important;
}

.hub-sidebar{
  width:300px !important;
  padding:24px 18px !important;
}

.hub-brand{
  padding:10px 8px 22px !important;
  border-bottom:1px solid #242424;
}

.hub-menu a{
  min-height:52px;
  font-size:15px;
}

.hub-topbar{
  padding:14px 18px;
  border:1px solid #242424;
  border-radius:22px;
  background:linear-gradient(145deg,#121212,#080808);
}

.hub-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.icon-btn{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid #2a2a2a;
  background:#101010;
  color:#fff;
  cursor:pointer;
}

.icon-btn:hover{
  border-color:#ff6a00;
}
.lead-hero-actions{
  display:flex;
  gap:12px;
  margin-top:22px;
  flex-wrap:wrap;
}

.btn-primary,
.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 18px;
  border-radius:14px;
  text-decoration:none;
  font-weight:900;
}

.btn-primary{
  background:linear-gradient(135deg,#ff6a00,#ff8a1d);
  color:#fff;
}

.btn-outline{
  border:1px solid #ff6a00;
  color:#ff8a1d;
}

.lead-hero-logo{
  width:130px;
  height:auto;
  border-radius:22px;
  filter:drop-shadow(0 0 22px rgba(255,106,0,.4));
}

.lead-card-grid{
  grid-template-columns:repeat(3,minmax(220px,1fr)) !important;
}

.lead-feature-card{
  animation:hubFadeUp .35s ease both;
}

.lead-product-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.lead-product-card{
  padding:22px;
  border-radius:22px;
  background:linear-gradient(145deg,#151515,#080808);
  border:1px solid #2a2a2a;
}

.lead-product-card h3{
  color:#fff;
  margin-bottom:8px;
}

.lead-product-card p{
  color:#aaa;
}

@keyframes hubFadeUp{
  from{
    opacity:0;
    transform:translateY(12px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media(max-width:900px){
  .lead-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .lead-product-row{
    grid-template-columns:1fr;
  }
}

@media(max-width:560px){
  .lead-card-grid{
    grid-template-columns:1fr !important;
  }
}
.lead-hero-v3{
  min-height:240px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  overflow:hidden;
  position:relative;
}

.lead-hero-v3:before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at left,rgba(255,106,0,.22),transparent 38%);
  pointer-events:none;
}

.lead-hero-text{
  position:relative;
  z-index:2;
  max-width:620px;
}

.lead-eyebrow{
  color:#ff8a1d;
  font-weight:900;
  margin-bottom:10px;
  display:block;
}

.lead-hero-text h1{
  font-size:clamp(34px,4vw,58px);
}

.lead-hero-visual{
  position:relative;
  z-index:2;
}

.lead-hero-visual img{
  width:150px;
  border-radius:26px;
  filter:drop-shadow(0 0 30px rgba(255,106,0,.45));
}

.lead-quick-actions{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin:18px 0;
}

.lead-quick-actions a{
  padding:14px;
  border-radius:18px;
  background:#101010;
  border:1px solid #252525;
  text-align:center;
  color:#fff;
  text-decoration:none;
}

.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}

.section-head a{
  color:#ff8a1d;
  text-decoration:none;
  font-weight:900;
}

.lead-product-scroll{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding-bottom:8px;
}

.lead-product-card{
  min-width:240px;
}

.product-thumb{
  width:100%;
  height:120px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#1a1a1a,#080808);
  font-size:44px;
  margin-bottom:14px;
}

.lead-product-card a{
  display:inline-flex;
  margin-top:12px;
  color:#ff8a1d;
  font-weight:900;
  text-decoration:none;
}

@media(max-width:700px){
  .lead-hero-v3{
    flex-direction:column;
    align-items:flex-start !important;
  }

  .lead-quick-actions{
    grid-template-columns:repeat(2,1fr);
  }
}
.lead-hero-final{
  min-height:280px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:34px;
  border:1px solid #2a2a2a;
  border-radius:30px;
  background:
    radial-gradient(circle at left,rgba(255,106,0,.25),transparent 38%),
    linear-gradient(145deg,#171717,#070707);
  margin-bottom:24px;
  overflow:hidden;
}

.lead-hero-copy span{
  color:#ff8a1d;
  font-weight:900;
}

.lead-hero-copy h1{
  font-size:clamp(34px,4vw,60px);
  margin:12px 0;
}

.lead-hero-copy p{
  color:#bbb;
  line-height:1.9;
}

.lead-hero-device{
  width:280px;
  min-height:180px;
  display:grid;
  place-items:center;
}

.device-placeholder{
  width:240px;
  height:160px;
  border-radius:26px;
  display:grid;
  place-items:center;
  background:
    linear-gradient(145deg,#222,#080808);
  border:1px solid rgba(255,106,0,.35);
  color:#ff8a1d;
  font-weight:900;
  box-shadow:0 0 40px rgba(255,106,0,.18);
}

.lead-main-actions{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  margin-bottom:30px;
}

.lead-section{
  margin-top:34px;
}

.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}

.section-head a{
  color:#ff8a1d;
  text-decoration:none;
  font-weight:900;
}

.lead-product-scroll{
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding-bottom:10px;
}

.lead-product-card{
  min-width:240px;
}

@media(max-width:900px){
  .lead-hero-final{
    flex-direction:column;
    align-items:flex-start;
  }

  .lead-main-actions{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:560px){
  .lead-main-actions{
    grid-template-columns:1fr !important;
  }

  .lead-hero-device{
    width:100%;
  }

  .device-placeholder{
    width:100%;
  }
}
.device-center-hero{
  display:grid;
  grid-template-columns:260px 1fr 160px;
  gap:22px;
  align-items:center;
  padding:30px;
  border:1px solid #2a2a2a;
  border-radius:32px;
  background:
    radial-gradient(circle at left,rgba(255,106,0,.25),transparent 35%),
    linear-gradient(145deg,#171717,#070707);
  margin-bottom:26px;
}

.device-center-visual{
  height:190px;
  border-radius:26px;
  overflow:hidden;
  background:#0b0b0b;
  border:1px solid rgba(255,106,0,.28);
  display:grid;
  place-items:center;
}

.device-center-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.device-center-placeholder{
  font-size:52px;
  color:#ff8a1d;
}

.device-center-info span{
  color:#ff8a1d;
  font-weight:900;
}

.device-center-info h1{
  font-size:clamp(34px,4vw,58px);
  margin:12px 0;
}

.device-center-info p{
  color:#bbb;
  line-height:1.9;
}

.device-health-card{
  height:150px;
  border-radius:26px;
  border:1px solid rgba(255,106,0,.35);
  background:linear-gradient(145deg,#161616,#080808);
  display:grid;
  place-items:center;
  text-align:center;
}

.device-health-card strong{
  font-size:38px;
  color:#ff8a1d;
}

.device-health-card span{
  color:#bbb;
}

@media(max-width:900px){
  .device-center-hero{
    grid-template-columns:1fr;
  }

  .device-center-visual{
    height:220px;
  }
}
/* =======================================================
   HUB UI DESIGN SYSTEM
======================================================= */

.ui-page-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    margin-bottom:32px;
}

.ui-page-header h1{
    margin:6px 0;
    font-size:44px;
    font-weight:900;
}

.ui-page-header p{
    color:#9c9c9c;
    margin-top:6px;
}

.ui-eyebrow{
    color:#ff8a1d;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
}

.ui-section-header{
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin:40px 0 18px;
}

.ui-section-header h2{
    font-size:30px;
    margin:0;
}

.ui-section-header p{
    margin-top:4px;
    color:#9d9d9d;
}

.ui-section-header a{
    color:#ff8a1d;
    text-decoration:none;
    font-weight:700;
}

.ui-stat-card{
    background:#151515;
    border:1px solid #2d2d2d;
    border-radius:24px;
    padding:26px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    transition:.25s;
}

.ui-stat-card:hover{
    transform:translateY(-4px);
    border-color:#ff8a1d;
}

.ui-stat-icon{
    width:62px;
    height:62px;
    border-radius:18px;
    background:#2b1a0d;
    color:#ff8a1d;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:24px;
}

.ui-stat-card strong{
    font-size:34px;
    color:#fff;
}

.ui-stat-card span{
    color:#a9a9a9;
}

.ui-empty-state{
    border:1px dashed #333;
    border-radius:24px;
    padding:50px;
    text-align:center;
    background:#111;
}

.ui-empty-state div{
    font-size:42px;
    color:#ff8a1d;
}

.ui-empty-state strong{
    display:block;
    margin-top:18px;
    font-size:22px;
}

.ui-empty-state p{
    margin-top:8px;
    color:#999;
}
/* ==========================================================
   DEVICE CENTER V2
========================================================== */

.ui-stat-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:18px;
    margin:30px 0 40px;
}

.device-info-table{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
    margin-bottom:40px;
}

.device-info-table>div{
    background:#171717;
    border:1px solid #2d2d2d;
    border-radius:20px;
    padding:18px 22px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    transition:.25s;
}

.device-info-table>div:hover{
    border-color:#ff8a1d;
    transform:translateY(-2px);
}

.device-info-table span{
    color:#9b9b9b;
    font-size:14px;
}

.device-info-table strong{
    color:#fff;
    font-size:15px;
}

.ticket-list-modern{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-bottom:40px;
}

.ticket-row-modern{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#171717;
    border:1px solid #2d2d2d;
    border-radius:20px;
    padding:18px 22px;
    text-decoration:none;
    transition:.25s;
}

.ticket-row-modern:hover{
    border-color:#ff8a1d;
    transform:translateX(-4px);
}

.ticket-row-modern strong{
    display:block;
    color:#fff;
}

.ticket-row-modern span{
    display:block;
    color:#999;
    margin-top:6px;
}

.ticket-row-modern small{
    background:#2b1a0d;
    color:#ff8a1d;
    padding:8px 14px;
    border-radius:999px;
    font-weight:700;
}

@media(max-width:900px){

.device-info-table{
    grid-template-columns:1fr;
}

}
/* Lead mobile polish */
@media(max-width:560px){

  .lead-mobile-page{
    padding-bottom:90px;
  }

  .lead-hero-mobile{
    min-height:auto !important;
    padding:28px 22px !important;
    border-radius:28px !important;
  }

  .lead-hero-mobile .lead-hero-copy{
    text-align:center;
  }

  .lead-hero-mobile h1{
    font-size:28px !important;
    line-height:1.6;
  }

  .lead-hero-mobile p{
    font-size:14px;
    line-height:1.9;
  }

  .lead-hero-mobile .lead-hero-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    margin-top:18px;
  }

  .lead-mobile-actions{
    gap:14px !important;
  }

  .lead-mobile-actions .lead-feature-card{
    min-height:auto;
    padding:24px 18px;
  }

  .lead-mobile-actions .lead-feature-icon{
    width:58px;
    height:58px;
    margin-bottom:12px;
  }

  .lead-product-scroll{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px;
    overflow:visible !important;
  }

  .lead-product-card{
    width:100% !important;
    min-width:0 !important;
  }

  .section-head{
    align-items:center;
  }

}
/* ---------- MOBILE TOPBAR ---------- */

.hub-topbar{

display:flex;
justify-content:space-between;
align-items:center;

padding:12px 18px;

background:#141414;

border:1px solid rgba(255,255,255,.06);

border-radius:18px;

margin-bottom:18px;

}

.hub-topbar-right{

display:flex;

align-items:center;

gap:12px;

}

.hub-user-info{

display:flex;

flex-direction:column;

}

.hub-user-info strong{

font-size:16px;

font-weight:700;

color:#fff;

line-height:1.2;

}

.hub-user-info small{

font-size:12px;

color:#8d8d8d;

margin-top:2px;

}

.hub-avatar{

width:54px;

height:54px;

border-radius:50%;

background:#202020;

display:flex;

align-items:center;

justify-content:center;

font-size:26px;

text-decoration:none;

overflow:hidden;

border:1px solid rgba(255,255,255,.08);

}

.hub-avatar img{

width:100%;

height:100%;

object-fit:cover;

}

.hub-topbar-left{

display:flex;

gap:10px;

}

.icon-btn{

width:46px;

height:46px;

border-radius:14px;

background:#1d1d1d;

border:1px solid rgba(255,255,255,.08);

display:flex;

align-items:center;

justify-content:center;

font-size:20px;

color:#ff7a00;

text-decoration:none;

transition:.25s;

}

.icon-btn:hover{

background:#ff7a00;

color:#fff;

}

/* ===========================
   HUB TOPBAR V2
===========================*/

.hub-topbar{

    display:flex;
    align-items:center;

    gap:14px;

    background:#151515;

    border:1px solid rgba(255,255,255,.08);

    border-radius:28px;

    padding:14px 18px;

    margin-bottom:18px;

}

.hub-user-info{

    display:flex;

    flex-direction:column;

    flex:1;

    min-width:0;

}

.hub-user-info strong{

    color:#fff;

    font-size:24px;

    font-weight:800;

    line-height:1.2;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.hub-user-info small{

    color:#8c8c8c;

    font-size:15px;

    margin-top:4px;

}

.hub-avatar{

    width:74px;

    height:74px;

    border-radius:50%;

    background:#232323;

    border:2px solid rgba(255,255,255,.08);

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:#fff;

    font-size:38px;

    flex-shrink:0;

}

.hub-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.hub-topbar-spacer{

    width:1px;

    align-self:stretch;

    background:rgba(255,255,255,.08);

}

.hub-actions{

    display:flex;

    gap:10px;

}

.icon-btn{

    width:58px;

    height:58px;

    border-radius:18px;

    background:#1d1d1d;

    border:1px solid rgba(255,255,255,.08);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#ff7a00;

    font-size:22px;

    text-decoration:none;

    position:relative;

}

.notify-dot{

    width:10px;

    height:10px;

    background:#ff4d4f;

    border-radius:50%;

    position:absolute;

    top:10px;

    right:12px;

}

/* ===========================
   MOBILE
===========================*/

@media (max-width:768px){

.hub-topbar{

    padding:10px 14px;

    gap:10px;

    border-radius:22px;

}

.hub-avatar{

    width:56px;

    height:56px;

    font-size:28px;

}

.hub-user-info strong{

    font-size:17px;

}

.hub-user-info small{

    font-size:12px;

}

.icon-btn{

    width:42px;

    height:42px;

    border-radius:14px;

    font-size:17px;

}

.notify-dot{

    width:8px;

    height:8px;

    top:7px;

    right:8px;

}

}

/* =======================================================
   FINAL MOBILE TOPBAR FIX - ONE ROW
======================================================= */

@media (max-width: 860px){

  .hub-topbar{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;

    min-height:82px !important;
    padding:12px 14px !important;
    margin-bottom:18px !important;

    border-radius:24px !important;
  }

  .hub-user{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:12px !important;

    flex:1 1 auto !important;
    min-width:0 !important;
  }

  .hub-avatar{
    width:56px !important;
    height:56px !important;
    min-width:56px !important;
    border-radius:50% !important;
    font-size:28px !important;
  }

  .hub-user-info{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    min-width:0 !important;
    text-align:right !important;
  }

  .hub-user-info strong{
    font-size:18px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    max-width:150px !important;
  }

  .hub-user-info small{
    font-size:12px !important;
    margin-top:4px !important;
    color:#8f8f8f !important;
  }

  .hub-actions{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;

    flex:0 0 auto !important;
  }

  .icon-btn{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    border-radius:15px !important;
    font-size:18px !important;
  }

  .hub-search{
    display:none !important;
  }
}
/* =======================================================
   LEAD DASHBOARD FINAL MOBILE DESIGN
======================================================= */

.lead-mobile-home{
  width:100%;
  max-width:980px;
  margin:0 auto;
  padding-bottom:86px;
}

.lead-hero-pro{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:center;
  gap:18px;

  min-height:300px;
  padding:30px;

  border-radius:28px;
  border:1px solid rgba(255,255,255,.10);

  background:
    radial-gradient(circle at left bottom, rgba(255,106,0,.28), transparent 34%),
    radial-gradient(circle at right, rgba(255,106,0,.10), transparent 38%),
    linear-gradient(145deg,#171717,#070707);

  overflow:hidden;
  margin-bottom:18px;
}

.lead-hero-text span{
  display:block;
  color:#ff7a00;
  font-weight:900;
  font-size:20px;
  margin-bottom:14px;
}

.lead-hero-text h1{
  color:#fff;
  font-size:clamp(28px,4vw,48px);
  line-height:1.45;
  margin-bottom:16px;
}

.lead-hero-text p{
  color:#bdbdbd;
  font-size:18px;
  line-height:2;
  margin-bottom:22px;
}

.lead-hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.lead-btn-primary,
.lead-btn-outline{
  min-height:54px;
  padding:0 22px;
  border-radius:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:900;
  font-size:17px;
  text-decoration:none;
}

.lead-btn-primary{
  color:#fff;
  background:linear-gradient(135deg,#ff6500,#ff8a1d);
}

.lead-btn-outline{
  color:#ff7a00;
  border:1px solid #ff6500;
  background:rgba(0,0,0,.18);
}

.lead-btn-primary small,
.lead-btn-outline small{
  font-size:20px;
}

.lead-hero-device{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}

.lead-hero-device img{
  width:100%;
  max-width:330px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 22px 35px rgba(0,0,0,.45));
}

.lead-action-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.lead-action-card{
  min-height:230px;
  padding:24px 18px;

  border-radius:24px;
  border:1px solid rgba(255,255,255,.10);

  background:
    radial-gradient(circle at center top, rgba(255,255,255,.04), transparent 36%),
    linear-gradient(145deg,#141414,#070707);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;

  color:#fff;
  text-decoration:none;
}

.lead-action-icon{
  width:72px;
  height:72px;
  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:30px;
  margin-bottom:18px;

  background:#171717;
  border:1px solid rgba(255,255,255,.10);
}

.lead-action-icon.orange{
  color:#ff7a00;
  background:rgba(255,106,0,.12);
  border-color:rgba(255,106,0,.25);
}

.lead-action-icon.blue{
  color:#5aa9ff;
  background:rgba(70,150,255,.10);
  border-color:rgba(70,150,255,.22);
}

.lead-action-icon.yellow{
  color:#ffc02e;
  background:rgba(255,190,0,.10);
  border-color:rgba(255,190,0,.22);
}

.lead-action-card h3{
  font-size:24px;
  line-height:1.5;
  margin-bottom:12px;
  color:#fff;
}

.lead-action-card p{
  color:#aaa;
  font-size:16px;
  line-height:2;
}

/* Mobile compact */
@media(max-width:760px){

  .lead-mobile-home{
    max-width:100%;
  }

  .lead-hero-pro{
    grid-template-columns:1fr .85fr;
    min-height:210px;
    padding:18px;
    border-radius:22px;
    gap:8px;
    margin-bottom:14px;
  }

  .lead-hero-text span{
    font-size:13px;
    margin-bottom:8px;
  }

  .lead-hero-text h1{
    font-size:22px;
    line-height:1.55;
    margin-bottom:8px;
  }

  .lead-hero-text p{
    font-size:12px;
    line-height:2;
    margin-bottom:14px;
  }

  .lead-hero-actions{
    gap:8px;
  }

  .lead-btn-primary,
  .lead-btn-outline{
    min-height:42px;
    padding:0 12px;
    font-size:12px;
    border-radius:12px;
  }

  .lead-btn-primary small,
  .lead-btn-outline small{
    font-size:15px;
  }

  .lead-hero-device img{
    max-width:150px;
  }

  .lead-action-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px;
  }

  .lead-action-card{
    min-height:155px;
    padding:14px 10px;
    border-radius:18px;
  }

  .lead-action-icon{
    width:48px;
    height:48px;
    font-size:21px;
    margin-bottom:10px;
  }

  .lead-action-card h3{
    font-size:15px;
    margin-bottom:6px;
  }

  .lead-action-card p{
    font-size:11px;
    line-height:1.8;
  }
}

@media(max-width:390px){

  .lead-hero-pro{
    min-height:190px;
    padding:14px;
  }

  .lead-hero-text h1{
    font-size:19px;
  }

  .lead-hero-text p{
    font-size:11px;
  }

  .lead-hero-device img{
    max-width:125px;
  }

  .lead-action-card{
    min-height:138px;
  }

  .lead-action-icon{
    width:42px;
    height:42px;
    font-size:18px;
  }

  .lead-action-card h3{
    font-size:13px;
  }

  .lead-action-card p{
    font-size:10px;
  }
}
/* =========================================================
   MGH CUSTOMER MANAGEMENT V1
   ========================================================= */

.customer-management-page {
  width: min(1480px, 100%);
  margin: 0 auto;
  padding-bottom: 40px;
}

.customer-management-head {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px;
  margin-bottom: 18px;
  border: 1px solid #2b2b2b;
  border-radius: 28px;
  background:
    radial-gradient(
      circle at right top,
      rgba(255, 101, 0, .22),
      transparent 38%
    ),
    linear-gradient(145deg, #171717, #080808);
}

.customer-management-title {
  min-width: 0;
}

.customer-management-eyebrow {
  display: block;
  margin-bottom: 9px;
  color: #ff8a1d;
  font-size: 13px;
  font-weight: 900;
}

.customer-management-title h1 {
  margin: 0 0 9px;
  color: #fff;
  font-size: clamp(28px, 3.3vw, 46px);
  line-height: 1.4;
}

.customer-management-title p {
  max-width: 720px;
  color: #aaa;
  line-height: 1.9;
}

.customer-management-head-actions {
  flex: 0 0 auto;
}

.customer-primary-action {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, #ff6500, #ff8a1d);
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(255, 101, 0, .22);
}

.customer-primary-action:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
}

.customer-management-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.customer-management-stat {
  min-height: 115px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  border: 1px solid #292929;
  border-radius: 21px;
  background: linear-gradient(145deg, #141414, #090909);
}

.customer-management-stat-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #ff8a1d;
  background: rgba(255, 101, 0, .12);
  border: 1px solid rgba(255, 101, 0, .22);
  font-size: 22px;
}

.customer-management-stat strong {
  display: block;
  color: #fff;
  font-size: 30px;
  line-height: 1.2;
}

.customer-management-stat span {
  display: block;
  margin-top: 5px;
  color: #999;
  font-size: 13px;
}

.customer-management-panel {
  padding: 24px;
  border: 1px solid #292929;
  border-radius: 26px;
  background: linear-gradient(145deg, #121212, #070707);
}

.customer-management-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 20px;
}

.customer-management-panel-head span:first-child {
  color: #ff8a1d;
  font-size: 12px;
  font-weight: 900;
}

.customer-management-panel-head h2 {
  margin-top: 5px;
  color: #fff;
  font-size: 24px;
}

.customer-result-count {
  padding: 7px 12px;
  border: 1px solid #303030;
  border-radius: 999px;
  color: #aaa !important;
  background: #111;
  font-size: 12px;
}

.customer-management-filters {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 200px auto auto;
  gap: 10px;
  margin-bottom: 20px;
}

.customer-search-field {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  border: 1px solid #303030;
  border-radius: 14px;
  background: #090909;
}

.customer-search-field span {
  color: #ff8a1d;
  font-size: 22px;
}

.customer-search-field input {
  width: 100%;
  height: 46px;
  border: 0;
  outline: 0;
  color: #fff;
  background: transparent;
}

.customer-city-field select {
  width: 100%;
  height: 48px;
  padding: 0 13px;
  border: 1px solid #303030;
  border-radius: 14px;
  outline: 0;
  color: #ddd;
  background: #090909;
}

.customer-filter-submit,
.customer-filter-reset {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 14px;
  font-weight: 900;
  cursor: pointer;
}

.customer-filter-submit {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #ff6500, #ff8a1d);
}

.customer-filter-reset {
  border: 1px solid #3a3a3a;
  color: #bbb;
  background: #111;
}

.customer-desktop-table {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #292929;
  border-radius: 18px;
}

.customer-management-table {
  width: 100%;
  min-width: 850px;
  border-collapse: collapse;
}

.customer-management-table th,
.customer-management-table td {
  padding: 15px 17px;
  text-align: right;
  border-bottom: 1px solid #252525;
}

.customer-management-table th {
  color: #999;
  background: #0b0b0b;
  font-size: 12px;
  font-weight: 900;
}

.customer-management-table td {
  color: #ddd;
  font-size: 13px;
}

.customer-management-table tbody tr {
  transition: .18s ease;
}

.customer-management-table tbody tr:hover {
  background: rgba(255, 101, 0, .045);
}

.customer-management-table tbody tr:last-child td {
  border-bottom: 0;
}

.customer-company-cell {
  display: flex;
  align-items: center;
  gap: 11px;
}

.customer-company-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #ff8a1d;
  background: rgba(255, 101, 0, .12);
  border: 1px solid rgba(255, 101, 0, .24);
  font-size: 17px;
  font-weight: 900;
}

.customer-company-cell strong {
  display: block;
  color: #fff;
  font-size: 14px;
}

.customer-company-cell small {
  display: block;
  margin-top: 4px;
  color: #777;
  font-size: 10px;
}

.customer-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border: 1px solid rgba(49, 214, 107, .26);
  border-radius: 999px;
  color: #4ade80;
  background: rgba(49, 214, 107, .09);
  font-size: 11px;
  font-weight: 900;
}

.customer-status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.customer-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.customer-row-action {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border: 1px solid #333;
  border-radius: 10px;
  color: #bbb;
  background: #111;
  font-size: 11px;
  font-weight: 900;
}

.customer-row-action:hover {
  color: #fff;
  border-color: #ff6500;
}

.customer-row-action-primary {
  color: #ff8a1d;
  border-color: rgba(255, 101, 0, .35);
  background: rgba(255, 101, 0, .08);
}

.customer-mobile-list {
  display: none;
}

.customer-empty-state {
  min-height: 270px;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 30px;
  border: 1px dashed #343434;
  border-radius: 20px;
  text-align: center;
  background: #090909;
}

.customer-empty-state > div {
  font-size: 42px;
}

.customer-empty-state h3 {
  margin: 13px 0 7px;
  color: #fff;
}

.customer-empty-state p {
  color: #888;
  line-height: 1.8;
}

.customer-empty-state a {
  margin-top: 15px;
  color: #ff8a1d;
  font-weight: 900;
}

@media (max-width: 1100px) {
  .customer-management-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-management-filters {
    grid-template-columns: minmax(220px, 1fr) 180px auto;
  }

  .customer-filter-reset {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .customer-management-head {
    min-height: auto;
    flex-direction: column;
    align-items: stretch;
    padding: 22px 18px;
    border-radius: 22px;
  }

  .customer-management-title h1 {
    font-size: 27px;
  }

  .customer-management-title p {
    font-size: 13px;
  }

  .customer-primary-action {
    width: 100%;
  }

  .customer-management-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .customer-management-stat {
    min-height: 100px;
    padding: 14px;
    gap: 10px;
    border-radius: 17px;
  }

  .customer-management-stat-icon {
    width: 43px;
    height: 43px;
    flex-basis: 43px;
    border-radius: 13px;
    font-size: 18px;
  }

  .customer-management-stat strong {
    font-size: 23px;
  }

  .customer-management-stat span {
    font-size: 10px;
  }

  .customer-management-panel {
    padding: 16px 12px;
    border-radius: 21px;
  }

  .customer-management-filters {
    grid-template-columns: 1fr;
  }

  .customer-filter-reset {
    grid-column: auto;
  }

  .customer-desktop-table {
    display: none;
  }

  .customer-mobile-list {
    display: grid;
    gap: 10px;
  }

  .customer-mobile-card {
    padding: 16px;
    border: 1px solid #292929;
    border-radius: 18px;
    background: linear-gradient(145deg, #121212, #090909);
  }

  .customer-mobile-card-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-bottom: 13px;
    border-bottom: 1px solid #252525;
  }

  .customer-mobile-card-head h3 {
    margin-bottom: 7px;
    color: #fff;
    font-size: 16px;
  }

  .customer-mobile-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin: 13px 0;
  }

  .customer-mobile-info div {
    padding: 11px;
    border-radius: 12px;
    background: #090909;
  }

  .customer-mobile-info span,
  .customer-mobile-info strong {
    display: block;
  }

  .customer-mobile-info span {
    margin-bottom: 5px;
    color: #777;
    font-size: 10px;
  }

  .customer-mobile-info strong {
    color: #ddd;
    font-size: 12px;
  }

  .customer-mobile-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
  }

  .customer-mobile-actions a {
    min-height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid #333;
    border-radius: 11px;
    color: #bbb;
    background: #111;
    font-size: 11px;
    font-weight: 900;
  }

  .customer-mobile-actions a.primary {
    color: #fff;
    border-color: #ff6500;
    background: linear-gradient(135deg, #ff6500, #ff8a1d);
  }
}

@media (max-width: 390px) {
  .customer-management-stats {
    grid-template-columns: 1fr;
  }

  .customer-mobile-info {
    grid-template-columns: 1fr;
  }
}
/* MGH Customers V1.1 refinements */

.customer-management-head {
  margin-bottom: 14px;
}

.customer-management-stats {
  margin-bottom: 14px;
}

.customer-management-panel {
  width: 100%;
}

.customer-management-table th,
.customer-management-table td {
  vertical-align: middle;
}

.customer-row-action {
  min-height: 38px;
  padding-inline: 13px;
  font-size: 12px;
}

.customer-management-table td[dir="ltr"],
.customer-mobile-info strong[dir="ltr"] {
  direction: ltr;
  text-align: right;
  unicode-bidi: plaintext;
}

@media (min-width: 1200px) {
  .customer-management-page {
    max-width: none;
  }
}
/* =========================================================
   MGH DEVICE MANAGEMENT V1
   ========================================================= */

.device-management-page {
  width: min(1480px, 100%);
  margin: 0 auto;
  padding-bottom: 42px;
}

.device-management-head {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px;
  margin-bottom: 14px;
  border: 1px solid #2b2b2b;
  border-radius: 28px;
  background:
    radial-gradient(
      circle at right top,
      rgba(255, 101, 0, .23),
      transparent 38%
    ),
    linear-gradient(145deg, #171717, #080808);
}

.device-management-title {
  min-width: 0;
}

.device-management-eyebrow {
  display: block;
  margin-bottom: 9px;
  color: #ff8a1d;
  font-size: 13px;
  font-weight: 900;
}

.device-management-title h1 {
  margin: 0 0 9px;
  color: #fff;
  font-size: clamp(28px, 3.3vw, 46px);
  line-height: 1.4;
}

.device-management-title p {
  max-width: 760px;
  color: #aaa;
  line-height: 1.9;
}

.device-management-head-actions {
  flex: 0 0 auto;
}

.device-primary-action {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, #ff6500, #ff8a1d);
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(255, 101, 0, .22);
  transition: .18s ease;
}

.device-primary-action:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
}

.device-management-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.device-management-stat {
  min-height: 112px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 19px;
  border: 1px solid #292929;
  border-radius: 21px;
  background: linear-gradient(145deg, #141414, #090909);
}

.device-management-stat-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #ff8a1d;
  background: rgba(255, 101, 0, .12);
  border: 1px solid rgba(255, 101, 0, .23);
  font-size: 22px;
}

.device-management-stat strong {
  display: block;
  color: #fff;
  font-size: 27px;
  line-height: 1.25;
}

.device-management-stat span {
  display: block;
  margin-top: 5px;
  color: #999;
  font-size: 12px;
}

.device-management-panel {
  width: 100%;
  padding: 24px;
  margin-bottom: 16px;
  border: 1px solid #292929;
  border-radius: 26px;
  background: linear-gradient(145deg, #121212, #070707);
}

.device-management-panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.device-management-panel-head > div {
  min-width: 0;
}

.device-management-panel-head > div > span {
  color: #ff8a1d;
  font-size: 12px;
  font-weight: 900;
}

.device-management-panel-head h2 {
  margin: 5px 0 5px;
  color: #fff;
  font-size: 24px;
}

.device-management-panel-head p {
  color: #888;
  font-size: 12px;
  line-height: 1.8;
}

.device-clear-model,
.device-result-count {
  flex: 0 0 auto;
  padding: 8px 13px;
  border: 1px solid #333;
  border-radius: 999px;
  color: #aaa;
  background: #111;
  font-size: 11px;
  font-weight: 900;
}

.device-clear-model:hover {
  color: #ff8a1d;
  border-color: rgba(255, 101, 0, .45);
}

.device-model-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

.device-model-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #2a2a2a;
  border-radius: 20px;
  color: inherit;
  background: linear-gradient(145deg, #141414, #090909);
  transition: .18s ease;
}

.device-model-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 101, 0, .62);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
}

.device-model-card.active {
  border-color: #ff6500;
  box-shadow:
    0 0 0 1px rgba(255, 101, 0, .28),
    0 15px 35px rgba(255, 101, 0, .10);
}

.device-model-media {
  height: 150px;
  display: grid;
  place-items: center;
  padding: 13px;
  border-bottom: 1px solid #252525;
  background:
    radial-gradient(circle, rgba(255, 101, 0, .08), transparent 56%),
    #0b0b0b;
}

.device-model-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.device-model-placeholder {
  width: 124px;
  height: 80px;
  position: relative;
  border: 1px solid #555;
  border-radius: 12px;
  background: linear-gradient(145deg, #2a2a2a, #111);
  box-shadow: inset 0 0 0 2px #090909;
}

.device-model-placeholder span {
  position: absolute;
  top: 24px;
  width: 24px;
  height: 36px;
  border-radius: 6px;
  border: 2px solid #080808;
  background: linear-gradient(#422000, #ff7b00);
}

.device-model-placeholder span:first-child {
  right: 35px;
}

.device-model-placeholder span:nth-child(2) {
  right: 65px;
}

.device-model-placeholder i {
  position: absolute;
  top: 19px;
  right: 12px;
  width: 14px;
  height: 47px;
  border-radius: 5px;
  background: #070707;
}

.device-model-copy {
  padding: 15px 15px 12px;
}

.device-model-category {
  display: block;
  margin-bottom: 6px;
  color: #777;
  font-size: 10px;
}

.device-model-copy h3 {
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  line-height: 1.7;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.device-model-footer {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 15px;
  border-top: 1px solid #252525;
  color: #888;
  background: #0b0b0b;
  font-size: 10px;
}

.device-model-footer strong {
  min-width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #ff8a1d;
  background: rgba(255, 101, 0, .12);
  border: 1px solid rgba(255, 101, 0, .25);
  font-size: 12px;
}

.device-sold-head {
  align-items: center;
}

.device-management-filters {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  gap: 10px;
  margin-bottom: 19px;
}

.device-search-field {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  border: 1px solid #303030;
  border-radius: 14px;
  background: #090909;
}

.device-search-field > span {
  color: #ff8a1d;
  font-size: 21px;
}

.device-search-field input {
  width: 100%;
  height: 46px;
  border: 0;
  outline: 0;
  color: #fff;
  background: transparent;
}

.device-filter-submit,
.device-filter-reset {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 14px;
  font-weight: 900;
  cursor: pointer;
}

.device-filter-submit {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #ff6500, #ff8a1d);
}

.device-filter-reset {
  border: 1px solid #393939;
  color: #bbb;
  background: #111;
}

.device-desktop-table {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #292929;
  border-radius: 18px;
}

.device-management-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
}

.device-management-table th,
.device-management-table td {
  padding: 14px 16px;
  vertical-align: middle;
  text-align: right;
  border-bottom: 1px solid #252525;
}

.device-management-table th {
  color: #999;
  background: #0b0b0b;
  font-size: 11px;
  font-weight: 900;
}

.device-management-table td {
  color: #ddd;
  font-size: 12px;
}

.device-management-table tbody tr {
  transition: .18s ease;
}

.device-management-table tbody tr:hover {
  background: rgba(255, 101, 0, .045);
}

.device-management-table tbody tr:last-child td {
  border-bottom: 0;
}

.device-table-model {
  display: flex;
  align-items: center;
  gap: 11px;
}

.device-table-thumb {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 101, 0, .22);
  border-radius: 13px;
  color: #ff8a1d;
  background: rgba(255, 101, 0, .09);
  font-size: 20px;
}

.device-table-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.device-table-model strong {
  display: block;
  color: #fff;
  font-size: 13px;
}

.device-table-model small {
  display: block;
  margin-top: 4px;
  color: #777;
  font-size: 9px;
}

.device-serial {
  display: inline-block;
  direction: ltr;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 12px;
  unicode-bidi: plaintext;
}

.device-remote-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border: 1px solid #383838;
  border-radius: 999px;
  color: #888;
  background: #111;
  font-size: 10px;
  font-weight: 900;
}

.device-remote-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.device-remote-status.active {
  color: #4ade80;
  border-color: rgba(49, 214, 107, .27);
  background: rgba(49, 214, 107, .08);
}

.device-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.device-row-action {
  min-height: 37px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border: 1px solid #333;
  border-radius: 10px;
  color: #bbb;
  background: #111;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.device-row-action:hover {
  color: #fff;
  border-color: #ff6500;
}

.device-row-action-primary {
  color: #ff8a1d;
  border-color: rgba(255, 101, 0, .35);
  background: rgba(255, 101, 0, .08);
}

.device-mobile-list {
  display: none;
}

.device-empty-state {
  min-height: 260px;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 30px;
  border: 1px dashed #343434;
  border-radius: 20px;
  text-align: center;
  background: #090909;
}

.device-empty-state-wide {
  grid-column: 1 / -1;
}

.device-empty-state > div {
  color: #ff8a1d;
  font-size: 42px;
}

.device-empty-state h3 {
  margin: 13px 0 7px;
  color: #fff;
}

.device-empty-state p {
  color: #888;
  line-height: 1.8;
}

.device-empty-state a {
  margin-top: 15px;
  color: #ff8a1d;
  font-weight: 900;
}

@media (min-width: 1200px) {
  .device-management-page {
    max-width: none;
  }
}

@media (max-width: 1180px) {
  .device-model-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .device-management-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .device-model-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .device-management-filters {
    grid-template-columns: 1fr auto;
  }

  .device-filter-reset {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .device-management-head {
    min-height: auto;
    flex-direction: column;
    align-items: stretch;
    padding: 22px 18px;
    border-radius: 22px;
  }

  .device-management-title h1 {
    font-size: 27px;
  }

  .device-management-title p {
    font-size: 13px;
  }

  .device-primary-action {
    width: 100%;
  }

  .device-management-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .device-management-stat {
    min-height: 100px;
    padding: 13px;
    gap: 10px;
    border-radius: 17px;
  }

  .device-management-stat-icon {
    width: 43px;
    height: 43px;
    flex-basis: 43px;
    border-radius: 13px;
    font-size: 18px;
  }

  .device-management-stat strong {
    font-size: 21px;
  }

  .device-management-stat span {
    font-size: 10px;
  }

  .device-management-panel {
    padding: 16px 12px;
    border-radius: 21px;
  }

  .device-management-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .device-model-grid {
    gap: 9px;
  }

  .device-model-media {
    height: 115px;
  }

  .device-model-copy {
    padding: 12px;
  }

  .device-model-copy h3 {
    font-size: 12px;
  }

  .device-management-filters {
    grid-template-columns: 1fr;
  }

  .device-filter-reset {
    grid-column: auto;
  }

  .device-desktop-table {
    display: none;
  }

  .device-mobile-list {
    display: grid;
    gap: 10px;
  }

  .device-mobile-card {
    padding: 16px;
    border: 1px solid #292929;
    border-radius: 18px;
    background: linear-gradient(145deg, #121212, #090909);
  }

  .device-mobile-card-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-bottom: 13px;
    border-bottom: 1px solid #252525;
  }

  .device-mobile-card-head h3 {
    margin-bottom: 5px;
    color: #fff;
    font-size: 15px;
  }

  .device-mobile-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 13px 0;
  }

  .device-mobile-info > div {
    padding: 11px;
    border-radius: 12px;
    background: #090909;
  }

  .device-mobile-info span,
  .device-mobile-info strong {
    display: block;
  }

  .device-mobile-info span {
    margin-bottom: 5px;
    color: #777;
    font-size: 9px;
  }

  .device-mobile-info strong {
    color: #ddd;
    font-size: 11px;
  }

  .device-mobile-remote {
    color: #888 !important;
  }

  .device-mobile-remote.active {
    color: #4ade80 !important;
  }

  .device-mobile-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .device-mobile-actions a {
    min-height: 39px;
    display: grid;
    place-items: center;
    border: 1px solid #333;
    border-radius: 11px;
    color: #bbb;
    background: #111;
    font-size: 10px;
    font-weight: 900;
  }

  .device-mobile-actions a.primary {
    color: #fff;
    border-color: #ff6500;
    background: linear-gradient(135deg, #ff6500, #ff8a1d);
  }
}

@media (max-width: 430px) {
  .device-management-stats {
    grid-template-columns: 1fr;
  }

  .device-model-grid {
    grid-template-columns: 1fr;
  }

  .device-model-media {
    height: 155px;
  }

  .device-mobile-info,
  .device-mobile-actions {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   MGH SERVICE MANAGEMENT V1
   ========================================================= */

.service-management-page {
  width: min(1480px, 100%);
  margin: 0 auto;
  padding-bottom: 42px;
}

.service-management-head {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px;
  margin-bottom: 14px;
  border: 1px solid #2b2b2b;
  border-radius: 28px;
  background:
    radial-gradient(
      circle at right top,
      rgba(255, 101, 0, .23),
      transparent 38%
    ),
    linear-gradient(145deg, #171717, #080808);
}

.service-management-eyebrow {
  display: block;
  margin-bottom: 9px;
  color: #ff8a1d;
  font-size: 13px;
  font-weight: 900;
}

.service-management-title h1 {
  margin: 0 0 9px;
  color: #fff;
  font-size: clamp(28px, 3.3vw, 46px);
  line-height: 1.4;
}

.service-management-title p {
  max-width: 760px;
  color: #aaa;
  line-height: 1.9;
}

.service-primary-action {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, #ff6500, #ff8a1d);
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(255, 101, 0, .22);
}

.service-management-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.service-management-stat {
  min-height: 112px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 19px;
  border: 1px solid #292929;
  border-radius: 21px;
  background: linear-gradient(145deg, #141414, #090909);
}

.service-management-stat-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #ff8a1d;
  background: rgba(255, 101, 0, .12);
  border: 1px solid rgba(255, 101, 0, .23);
  font-size: 20px;
  font-weight: 900;
}

.service-management-stat-icon.danger {
  color: #ff6b6b;
  background: rgba(255, 77, 77, .11);
  border-color: rgba(255, 77, 77, .24);
}

.service-management-stat-icon.reviewing {
  color: #55bfff;
  background: rgba(0, 145, 255, .11);
  border-color: rgba(0, 145, 255, .24);
}

.service-management-stat-icon.success {
  color: #4ade80;
  background: rgba(49, 214, 107, .10);
  border-color: rgba(49, 214, 107, .24);
}

.service-management-stat strong {
  display: block;
  color: #fff;
  font-size: 29px;
}

.service-management-stat span {
  display: block;
  margin-top: 5px;
  color: #999;
  font-size: 12px;
}

.service-management-panel {
  width: 100%;
  padding: 24px;
  border: 1px solid #292929;
  border-radius: 26px;
  background: linear-gradient(145deg, #121212, #070707);
}

.service-management-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.service-management-panel-head > div > span {
  color: #ff8a1d;
  font-size: 12px;
  font-weight: 900;
}

.service-management-panel-head h2 {
  margin: 5px 0;
  color: #fff;
  font-size: 24px;
}

.service-management-panel-head p {
  color: #888;
  font-size: 12px;
}

.service-result-count {
  padding: 8px 13px;
  border: 1px solid #333;
  border-radius: 999px;
  color: #aaa;
  background: #111;
  font-size: 11px;
  font-weight: 900;
}

.service-management-filters {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 180px 180px auto auto;
  gap: 10px;
  margin-bottom: 20px;
}

.service-search-field {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  border: 1px solid #303030;
  border-radius: 14px;
  background: #090909;
}

.service-search-field span {
  color: #ff8a1d;
  font-size: 21px;
}

.service-search-field input {
  width: 100%;
  height: 46px;
  border: 0;
  outline: 0;
  color: #fff;
  background: transparent;
}

.service-filter-select {
  height: 48px;
  padding: 0 13px;
  border: 1px solid #303030;
  border-radius: 14px;
  outline: 0;
  color: #ddd;
  background: #090909;
}

.service-filter-submit,
.service-filter-reset {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 17px;
  border-radius: 14px;
  font-weight: 900;
  cursor: pointer;
}

.service-filter-submit {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #ff6500, #ff8a1d);
}

.service-filter-reset {
  border: 1px solid #393939;
  color: #bbb;
  background: #111;
}

.service-desktop-table {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #292929;
  border-radius: 18px;
}

.service-management-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: collapse;
}

.service-management-table th,
.service-management-table td {
  padding: 14px 15px;
  vertical-align: middle;
  text-align: right;
  border-bottom: 1px solid #252525;
}

.service-management-table th {
  color: #999;
  background: #0b0b0b;
  font-size: 11px;
  font-weight: 900;
}

.service-management-table td {
  color: #ddd;
  font-size: 12px;
}

.service-management-table tbody tr:hover {
  background: rgba(255, 101, 0, .045);
}

.service-management-table tbody tr:last-child td {
  border-bottom: 0;
}

.service-ticket-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.service-ticket-number {
  min-width: 42px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  color: #ff8a1d;
  background: rgba(255, 101, 0, .11);
  border: 1px solid rgba(255, 101, 0, .24);
  font-size: 11px;
  font-weight: 900;
}

.service-ticket-title strong,
.service-cell-primary {
  display: block;
  color: #fff;
  font-size: 12px;
}

.service-ticket-title small,
.service-cell-secondary,
.service-management-table td small {
  display: block;
  margin-top: 4px;
  color: #777;
  font-size: 9px;
}

.service-serial {
  direction: ltr;
  unicode-bidi: plaintext;
  font-family: Arial, sans-serif;
}

.service-priority,
.service-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.service-priority-normal {
  color: #bbb;
  border: 1px solid #3a3a3a;
  background: #111;
}

.service-priority-important {
  color: #ffc857;
  border: 1px solid rgba(255, 200, 87, .28);
  background: rgba(255, 200, 87, .09);
}

.service-priority-urgent,
.service-priority-production_stop {
  color: #ff6b6b;
  border: 1px solid rgba(255, 77, 77, .28);
  background: rgba(255, 77, 77, .09);
}

.service-status {
  color: #bbb;
  border: 1px solid #3a3a3a;
  background: #111;
}

.service-status-new,
.service-status-open {
  color: #ff8a1d;
  border-color: rgba(255, 101, 0, .28);
  background: rgba(255, 101, 0, .09);
}

.service-status-reviewing,
.service-status-in_progress {
  color: #55bfff;
  border-color: rgba(0, 145, 255, .28);
  background: rgba(0, 145, 255, .09);
}

.service-status-closed,
.service-status-resolved {
  color: #4ade80;
  border-color: rgba(49, 214, 107, .28);
  background: rgba(49, 214, 107, .08);
}

.service-technician {
  color: #ddd;
}

.service-technician.empty {
  color: #777;
}

.service-date {
  display: block;
  color: #fff;
}

.service-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.service-row-action {
  min-height: 37px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border: 1px solid #333;
  border-radius: 10px;
  color: #bbb;
  background: #111;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.service-row-action-primary {
  color: #ff8a1d;
  border-color: rgba(255, 101, 0, .35);
  background: rgba(255, 101, 0, .08);
}

.service-mobile-list {
  display: none;
}

.service-empty-state {
  min-height: 270px;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 30px;
  border: 1px dashed #343434;
  border-radius: 20px;
  text-align: center;
  background: #090909;
}

.service-empty-state > div {
  font-size: 42px;
}

.service-empty-state h3 {
  margin: 13px 0 7px;
  color: #fff;
}

.service-empty-state p {
  color: #888;
}

.service-empty-state a {
  margin-top: 15px;
  color: #ff8a1d;
  font-weight: 900;
}

@media (max-width: 1180px) {
  .service-management-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-management-filters {
    grid-template-columns: minmax(220px, 1fr) 160px 160px auto;
  }

  .service-filter-reset {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .service-management-head {
    min-height: auto;
    flex-direction: column;
    align-items: stretch;
    padding: 22px 18px;
    border-radius: 22px;
  }

  .service-management-title h1 {
    font-size: 27px;
  }

  .service-management-title p {
    font-size: 13px;
  }

  .service-primary-action {
    width: 100%;
  }

  .service-management-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .service-management-stat {
    min-height: 100px;
    padding: 13px;
    gap: 10px;
    border-radius: 17px;
  }

  .service-management-stat-icon {
    width: 43px;
    height: 43px;
    flex-basis: 43px;
    font-size: 17px;
  }

  .service-management-stat strong {
    font-size: 22px;
  }

  .service-management-stat span {
    font-size: 10px;
  }

  .service-management-panel {
    padding: 16px 12px;
    border-radius: 21px;
  }

  .service-management-panel-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .service-management-filters {
    grid-template-columns: 1fr;
  }

  .service-filter-reset {
    grid-column: auto;
  }

  .service-desktop-table {
    display: none;
  }

  .service-mobile-list {
    display: grid;
    gap: 10px;
  }

  .service-mobile-card {
    padding: 16px;
    border: 1px solid #292929;
    border-radius: 18px;
    background: linear-gradient(145deg, #121212, #090909);
  }

  .service-mobile-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 13px;
    border-bottom: 1px solid #252525;
  }

  .service-mobile-card-head h3 {
    margin-top: 8px;
    color: #fff;
    font-size: 15px;
  }

  .service-mobile-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 13px 0;
  }

  .service-mobile-info > div {
    padding: 11px;
    border-radius: 12px;
    background: #090909;
  }

  .service-mobile-info span,
  .service-mobile-info strong {
    display: block;
  }

  .service-mobile-info span {
    margin-bottom: 5px;
    color: #777;
    font-size: 9px;
  }

  .service-mobile-info strong {
    color: #ddd;
    font-size: 11px;
  }

  .service-mobile-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .service-mobile-actions a {
    min-height: 39px;
    display: grid;
    place-items: center;
    border: 1px solid #333;
    border-radius: 11px;
    color: #bbb;
    background: #111;
    font-size: 10px;
    font-weight: 900;
  }

  .service-mobile-actions a.primary {
    color: #fff;
    border-color: #ff6500;
    background: linear-gradient(135deg, #ff6500, #ff8a1d);
  }
}

@media (max-width: 430px) {
  .service-management-stats,
  .service-mobile-info,
  .service-mobile-actions {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   MG HUB - UNIFIED DESKTOP SIDEBAR FINAL
   Single geometry for ALL dashboard/management pages
   ========================================================= */

@media screen and (min-width:1025px){

    .hub-body .hub-shell > .hub-sidebar{
        position:sticky !important;
        top:0 !important;

        display:flex !important;
        flex-direction:column !important;

        width:260px !important;
        height:100vh !important;
        min-height:100vh !important;
        max-height:100vh !important;

        overflow:hidden !important;
        box-sizing:border-box !important;
    }

    .hub-body .hub-shell > .hub-sidebar .hub-brand{
        flex:0 0 auto !important;

        min-height:92px !important;

        margin:0 0 5px !important;
        padding:14px 14px 12px !important;

        box-sizing:border-box !important;
    }

    .hub-body .hub-shell > .hub-sidebar .hub-menu{
        flex:1 1 auto !important;
        min-height:0 !important;

        display:flex !important;
        flex-direction:column !important;

        gap:3px !important;

        margin:0 !important;
        padding:5px 7px 18px !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;

        box-sizing:border-box !important;

        overscroll-behavior:contain !important;
        scrollbar-gutter:stable !important;

        scrollbar-width:thin !important;
        scrollbar-color:#454545 transparent !important;
    }

    .hub-body .hub-shell > .hub-sidebar .hub-menu > a{
        flex:0 0 auto !important;

        display:flex !important;
        align-items:center !important;

        width:100% !important;

        min-height:40px !important;
        height:40px !important;

        margin:0 !important;
        padding:7px 10px !important;

        gap:9px !important;

        border-radius:10px !important;

        font-size:13px !important;
        font-weight:600 !important;
        line-height:1.2 !important;

        box-sizing:border-box !important;
    }

    .hub-body .hub-shell > .hub-sidebar .hub-menu > a .icon{
        display:grid !important;
        place-items:center !important;

        flex:0 0 23px !important;

        width:23px !important;
        min-width:23px !important;
        max-width:23px !important;

        height:23px !important;

        margin:0 !important;
        padding:0 !important;

        font-size:16px !important;
        line-height:1 !important;
    }

    .hub-body .hub-shell > .hub-sidebar .hub-menu > a > span:last-child{
        margin:0 !important;
        padding:0 !important;

        font-size:13px !important;
        line-height:1.2 !important;

        white-space:nowrap !important;
    }

    .hub-body .hub-shell > .hub-sidebar .hub-menu::-webkit-scrollbar{
        width:5px !important;
    }

    .hub-body .hub-shell > .hub-sidebar .hub-menu::-webkit-scrollbar-track{
        background:transparent !important;
    }

    .hub-body .hub-shell > .hub-sidebar .hub-menu::-webkit-scrollbar-thumb{
        background:#454545 !important;
        border-radius:999px !important;
    }

    .hub-body .hub-shell > .hub-sidebar .hub-menu::-webkit-scrollbar-thumb:hover{
        background:#ff7417 !important;
    }

}


/* =========================================================
   MG HUB - BASE_LEAD MANAGEMENT LAYOUT BRIDGE
   Management role inside legacy base_lead uses canonical sidebar
   ========================================================= */

@media screen and (min-width:1025px){

    body.lead-v2-body:has(.hub-sidebar) .lead-v2-shell{
        display:grid !important;
        grid-template-columns:260px minmax(0,1fr) !important;
        width:100% !important;
        min-height:100vh !important;
        margin:0 !important;
        padding:0 !important;
    }

    body.lead-v2-body:has(.hub-sidebar) .hub-sidebar{
        grid-column:1 !important;
        grid-row:1 !important;

        position:sticky !important;
        top:0 !important;

        width:260px !important;
        height:100vh !important;
        min-height:100vh !important;
        max-height:100vh !important;

        overflow:hidden !important;
    }

    body.lead-v2-body:has(.hub-sidebar) .lead-v2-main{
        grid-column:2 !important;
        grid-row:1 !important;

        width:100% !important;
        min-width:0 !important;
        max-width:none !important;

        margin:0 !important;
    }

    body.lead-v2-body:has(.hub-sidebar) .hub-sidebar .hub-menu{
        flex:1 1 auto !important;
        min-height:0 !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
    }

}