:root{
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  --bg:#060914;
  --sidebar:#070b15;
  --surface:#0c1322;
  --surface2:#10192b;
  --surface3:#131e32;
  --line:#202b43;
  --line2:#2a3855;
  --text:#f7f8fc;
  --muted:#8591a9;
  --purple:#8b5cf6;
  --purple2:#6d28d9;
  --purple3:#a855f7;
  --blue:#3b82f6;
  --green:#22c55e;
  --red:#ef476f;
  --yellow:#f59e0b;
}

*{box-sizing:border-box}
[hidden]{display:none!important}

html,body{
  margin:0;
  min-height:100%;
  background:
    radial-gradient(circle at 75% -10%,rgba(109,40,217,.12),transparent 28%),
    var(--bg);
  color:var(--text);
}

body{font-size:14px}
button,input,select{font:inherit}
button{cursor:pointer}
h1,h2,h3,p{margin-top:0}
h1{font-size:27px;margin:0}
h2{font-size:28px;margin-bottom:7px}
h3{font-size:20px}
small,.hint,p{color:var(--muted)}
.eyebrow{
  color:#9b68ff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  margin-bottom:7px;
}

/* LOGIN */
.loginShell{
  min-height:100vh;
  display:grid;
  grid-template-columns:1.15fr .85fr;
}
.loginVisual{
  padding:70px;
  display:flex;
  gap:28px;
  align-items:center;
  background:
    radial-gradient(circle at 20% 20%,#32215b,transparent 35%),
    #080d19;
}
.loginVisual h1{font-size:46px;line-height:1.05}
.loginMark{
  width:78px;height:78px;border-radius:24px;
  display:grid;place-items:center;
  font-size:38px;font-weight:900;
  background:linear-gradient(135deg,var(--purple3),var(--purple2));
}
.loginPane{display:grid;place-items:center;padding:40px}
.loginCard{
  width:min(430px,92vw);
  background:var(--surface);
  border:1px solid var(--line);
  padding:32px;border-radius:20px;
}
.brandLockup,.sideBrand{display:flex;align-items:center;gap:12px}
.brandIcon{
  width:43px;height:43px;border-radius:13px;
  display:grid;place-items:center;
  font-weight:900;color:#fff;
  background:linear-gradient(135deg,var(--purple3),var(--purple2));
}
.loginFeatures{display:flex;gap:8px}
.loginFeatures span{
  border:1px solid var(--line2);
  border-radius:999px;padding:7px 10px
}
.loginFooter{display:flex;justify-content:space-between;margin-top:16px;color:var(--muted)}

/* SHELL */
.appShell{
  min-height:100vh;
  display:grid;
  grid-template-columns:245px minmax(0,1fr);
}

.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:245px;
  padding:18px 14px;
  z-index:20;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(circle at 10% 5%,rgba(139,92,246,.1),transparent 25%),
    var(--sidebar);
  border-right:1px solid #172238;
}

.sideBrand{
  padding:8px 9px 24px;
}
.sideBrand b{font-size:16px}
.sideBrand small{display:block;color:#75829b;margin-top:2px}

.sideNav{display:flex;flex-direction:column;gap:3px}
.navLabel{
  padding:18px 11px 7px;
  color:#596985;
  font-size:9px;
  font-weight:900;
  letter-spacing:.13em;
}

.navItem{
  width:100%;
  border:1px solid transparent;
  background:transparent;
  color:#b6c0d1;
  min-height:43px;
  border-radius:10px;
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px 12px;
  text-align:left;
  font-weight:700;
}
.navItem:hover{
  background:#0f1728;
  border-color:#1d2940;
}
.navItem.active{
  color:#fff;
  background:linear-gradient(90deg,rgba(126,58,242,.42),rgba(126,58,242,.14));
  border-color:rgba(139,92,246,.45);
  box-shadow:inset 3px 0 0 #a855f7,0 8px 28px rgba(109,40,217,.13);
}
.navIcon{width:18px;text-align:center}

.sideFooter{
  margin-top:auto;
  border:1px solid #262248;
  border-radius:12px;
  padding:14px;
  background:
    radial-gradient(circle at 70% 30%,rgba(139,92,246,.28),transparent 45%),
    #101025;
  color:#c9c5ea;
  display:flex;
  justify-content:space-between;
  font-size:10px;
}

.workspace{grid-column:2;min-width:0}

/* TOPBAR */
.topbar{
  position:sticky;
  top:0;
  z-index:15;
  min-height:76px;
  display:grid;
  grid-template-columns:minmax(190px,1fr) minmax(300px,460px) minmax(330px,1fr);
  gap:22px;
  align-items:center;
  padding:12px 28px;
  background:rgba(6,9,20,.9);
  backdrop-filter:blur(18px);
  border-bottom:1px solid #172238;
}
.topSearch{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 13px;
  border:1px solid #24304a;
  border-radius:12px;
  background:#0b1220;
}
.topSearch input{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  min-height:43px;
}
kbd{
  color:#7f8ba2;
  background:#111a2a;
  border:1px solid #28344e;
  border-radius:7px;
  padding:4px 7px;
  white-space:nowrap;
}
.topActions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
}

/* MAIN */
.content{
  max-width:1750px;
  padding:28px 30px 45px;
  margin:0 auto;
}
.page{animation:fade .16s ease}
@keyframes fade{from{opacity:.5;transform:translateY(3px)}to{opacity:1}}

.panel,
.formCard,
.item,
.notice{
  background:linear-gradient(180deg,var(--surface2),var(--surface));
  border:1px solid var(--line);
  border-radius:16px;
}
.panel{padding:22px}
.formCard{padding:18px;margin:14px 0}

.heroCard{
  background:
    radial-gradient(circle at 88% 20%,rgba(139,92,246,.25),transparent 30%),
    linear-gradient(135deg,#10192b,#0b1220);
  border:1px solid #293753;
  border-radius:18px;
  padding:26px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
}
.heroStatus{
  min-width:210px;
  padding:15px;
  border-radius:13px;
  background:#080e19aa;
  border:1px solid #303e5a;
  display:grid;
  gap:7px;
}

/* KPI */
.stats{
  display:grid;
  grid-template-columns:repeat(7,minmax(125px,1fr));
  gap:12px;
  margin:16px 0;
}
.stat{
  min-height:92px;
  padding:17px;
  border-radius:14px;
  background:linear-gradient(180deg,#111b2d,#0c1422);
  border:1px solid #273550;
}
.stat b{display:block;font-size:25px;margin-bottom:5px}
.stat span{font-size:11px;color:#8693ac;font-weight:700}

.dashboardGrid{
  display:grid;
  grid-template-columns:1.5fr .75fr;
  gap:15px;
}
.quickGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.quickGrid button{
  min-height:72px;
  border:1px solid #7846d3;
  border-radius:11px;
  padding:15px;
  color:#fff;
  text-align:left;
  background:linear-gradient(135deg,#8b5cf6,#6d28d9);
}
.quickGrid b,.quickGrid span{display:block}
.quickGrid span{font-size:11px;color:#ddd6fe;margin-top:4px}

.infoList>div{
  display:flex;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}

/* FORM */
label{
  display:grid;
  gap:7px;
  color:#8996ad;
  font-size:11px;
  font-weight:800;
}
input,select,textarea{
  width:100%;
  min-height:44px;
  padding:10px 12px;
  color:#f7f9ff;
  background:#09111e;
  border:1px solid #2a3751;
  border-radius:9px;
  outline:none;
}
input:focus,select:focus{
  border-color:#8b5cf6;
  box-shadow:0 0 0 3px rgba(139,92,246,.12);
}
.formGrid{display:grid;gap:12px;margin-bottom:14px}
.formGrid.four{grid-template-columns:repeat(4,1fr)}
.formGrid.three{grid-template-columns:repeat(3,1fr)}
.formGrid.one{grid-template-columns:1fr}
.row,.toolbar,.actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.row>*{flex:1}

button{
  min-height:39px;
  border-radius:9px;
  padding:9px 13px;
  border:1px solid transparent;
  font-weight:800;
  transition:.15s ease;
}
button:hover{transform:translateY(-1px)}
.primary{
  color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#6d28d9);
  border-color:#8b5cf6;
}
.soft,.ghost,.iconBtn,.actions button{
  color:#d7deeb;
  background:#10192a;
  border-color:#2a3751;
}
.danger{
  color:#ff9aae!important;
  background:rgba(239,71,111,.1)!important;
  border-color:rgba(239,71,111,.28)!important;
}
.iconBtn{width:40px;padding:0}
.full{width:100%}

/* Pills */
.badge,.pill{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:5px 9px;
  font-size:10px;
  font-weight:900;
}
.badge.unactivated,.pill.unknown{
  color:#fbbf24;
  background:#2a210d;
}
.pill.ok,.badge.active{
  color:#4ade80;
  background:#0c2c1d;
}
.pill.dead{
  color:#fb7185;
  background:#32131b;
}

/* General lists/tables */
.sectionHead,.pageIntro,.catalogTitle{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.toolbar{
  border:1px solid var(--line);
  background:#0a1220;
  padding:10px;
  border-radius:11px;
}
.stack{display:grid;gap:10px;margin-top:15px}
.item{padding:15px}
.table{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:12px;
}
table{
  width:100%;
  border-collapse:collapse;
  min-width:950px;
}
th,td{
  text-align:left;
  padding:12px 13px;
  border-bottom:1px solid #1a263b;
  font-size:12px;
}
th{
  color:#8794ac;
  background:#111a2a;
  font-size:10px;
  text-transform:uppercase;
}

/* SOURCES */
#sourceRows .item{
  position:relative;
  overflow:hidden;
}
#sourceRows .item:before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(#a855f7,#3b82f6);
}
.miniStats{
  display:grid;
  grid-template-columns:repeat(7,minmax(100px,1fr));
  gap:9px;
  margin:10px 0;
}
.miniStats>div,
.miniStat{
  padding:12px;
  border:1px solid #263450;
  border-radius:11px;
  background:#0c1525;
}
.miniStats b,.miniStat b{display:block;font-size:19px}
.miniStats span,.miniStat span{font-size:10px;color:#8390aa}

/* PACKAGE PAGE */
.automationBanner{
  display:grid;
  grid-template-columns:56px 1fr auto;
  align-items:center;
  gap:16px;
  margin:20px 0 26px;
  padding:18px;
  border:1px solid #272d51;
  border-radius:15px;
  background:
    radial-gradient(circle at 12% 50%,rgba(139,92,246,.15),transparent 18%),
    linear-gradient(90deg,#10182a,#0c1422);
}
.automationIcon{
  width:52px;height:52px;border-radius:15px;
  display:grid;place-items:center;
  font-size:28px;
  background:linear-gradient(135deg,#7928ca,#4c1d95);
}
.automationBanner b{font-size:16px}
.automationBanner p{margin:5px 0 0}
.autoReady{color:#4ade80;font-weight:800}

.catalogTitle{margin-bottom:12px}
.serverCatalogs{display:grid;gap:13px}

.serverCard{
  overflow:hidden;
  border-radius:15px;
  border:1px solid #25324c;
  background:#0b1321;
  box-shadow:0 12px 35px rgba(0,0,0,.18);
}
.serverHead{
  min-height:76px;
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-left:3px solid #a855f7;
}
.serverIdentity,.serverRight,.packageIdentity{
  display:flex;
  align-items:center;
  gap:11px;
}
.serverIdentity b{font-size:16px}
.serverIdentity small{display:block;margin-top:4px}
.serverDot{
  width:10px;height:10px;border-radius:50%;
}
.serverDot.online{background:#22c55e;box-shadow:0 0 14px rgba(34,197,94,.7)}
.serverDot.offline{background:#64748b}
.sourceCount{
  color:#b8c3ff;
  background:#1a2751;
  border-radius:999px;
  padding:5px 9px;
  font-size:10px;
}
.serverEnabled{
  color:#4ade80;background:#0d2b1d;padding:6px 10px;border-radius:8px
}
.serverDisabled{
  color:#9aa5b7;background:#1c2534;padding:6px 10px;border-radius:8px
}
.moreDots{color:#8490a8;font-weight:900}

.packageHeader,.packageLine{
  display:grid;
  grid-template-columns:2fr 1fr .9fr .9fr .8fr .6fr;
  gap:12px;
  align-items:center;
  padding:12px 18px;
}
.packageHeader{
  background:#131d30;
  color:#96a2b8;
  font-size:11px;
  font-weight:800;
}
.packageLine{
  min-height:70px;
  border-top:1px solid #1c2940;
}
.packageLine:hover{background:#0e1828}
.packageIdentity b,.packageDuration b{display:block;color:#edf2fa}
.packageIdentity small,.packageDuration small{display:block;margin-top:4px}
.packageCube{
  width:32px;height:32px;
  display:grid;place-items:center;
  color:#a855f7;
  background:#221446;
  border-radius:9px;
}
.packageValue{
  display:inline-flex;
  min-width:54px;
  padding:8px 10px;
  border:1px solid #293753;
  border-radius:8px;
  background:#101a2b;
}
.statusDot{
  width:8px;height:8px;border-radius:50%;
  display:inline-block;margin-right:7px;
}
.statusDot.on{background:#22c55e}
.statusDot.off{background:#64748b}
.packageActions{display:flex;gap:7px}
.iconAction{
  min-height:34px!important;
  width:35px;padding:0!important;
  color:#c4b5fd!important;
  background:#201544!important;
  border:1px solid #392c67!important;
}
.dangerMini{color:#fb7185!important}
.emptyPackages,.emptyState{
  padding:25px;
  text-align:center;
  color:#7f8ba2;
}

.howItWorks{
  display:grid;
  grid-template-columns:55px repeat(5,1fr);
  gap:16px;
  align-items:center;
  margin-top:20px;
  padding:18px;
  border:1px solid #24314a;
  border-radius:15px;
  background:#0d1625;
}
.howIcon{
  width:46px;height:46px;
  border-radius:50%;
  display:grid;place-items:center;
  font-size:22px;font-weight:900;
  background:linear-gradient(135deg,#8b5cf6,#6d28d9);
}
.howItWorks b{display:block;font-size:12px}
.howItWorks span{display:block;color:#7f8ca4;font-size:10px;margin-top:5px}

/* Unified Library */
.sourceChooser{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}
.sourceChoice{
  display:flex!important;
  align-items:center;
  gap:9px;
  padding:10px;
  border:1px solid #283650;
  border-radius:9px;
  background:#0b1423;
}
.sourceChoice input,.checkLabel input{width:auto!important}

/* RESPONSIVE */
@media(max-width:1350px){
  .stats{grid-template-columns:repeat(4,1fr)}
  .miniStats{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:1050px){
  .topbar{grid-template-columns:1fr auto}
  .topSearch{display:none}
  .dashboardGrid{grid-template-columns:1fr}
  .formGrid.four{grid-template-columns:1fr 1fr}
  .packageHeader{display:none}
  .packageLine{grid-template-columns:1.5fr 1fr 1fr}
  .howItWorks{grid-template-columns:1fr 1fr}
}
@media(max-width:800px){
  .appShell{grid-template-columns:75px 1fr}
  .sidebar{width:75px}
  .sideBrand>div:last-child,.navItem span:last-child,.navLabel,.sideFooter{display:none}
  .navItem{justify-content:center}
  .content{padding:18px}
  .formGrid.four,.formGrid.three{grid-template-columns:1fr}
  .stats,.miniStats{grid-template-columns:1fr 1fr}
  .sourceChooser{grid-template-columns:1fr}
}


/* =========================================================
   MEXAMO ACCOUNT MANAGER MODAL
   ========================================================= */

.accountManager{
  position:fixed !important;
  inset:0 !important;
  z-index:999999 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:28px !important;
}

.accountManager[hidden]{
  display:none !important;
}

.accountManagerShade{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  background:rgba(2,6,16,.82) !important;
  backdrop-filter:blur(8px);
}

.accountManagerBox{
  position:relative !important;
  z-index:1 !important;

  width:min(1050px,96vw) !important;
  max-height:92vh !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;

  border:1px solid #33415f !important;
  border-radius:20px !important;

  background:#091321 !important;
  box-shadow:
    0 35px 120px rgba(0,0,0,.75),
    0 0 0 1px rgba(139,92,246,.08) !important;
}

.accountManagerHeader{
  position:sticky;
  top:0;
  z-index:5;

  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;

  padding:22px 24px;
  border-bottom:1px solid #27354f;

  background:rgba(9,19,33,.97);
  backdrop-filter:blur(15px);
}

.accountManagerHeader h2{
  margin:4px 0 9px;
  font-size:24px;
}

.amClose{
  width:44px !important;
  height:44px !important;
  padding:0 !important;

  display:grid !important;
  place-items:center !important;

  border-radius:12px !important;
  font-size:27px !important;
  line-height:1 !important;
}

.amOverview{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:11px;
  padding:20px 22px;
}

.amInfoBox{
  min-width:0;
  padding:15px;

  border:1px solid #283752;
  border-radius:13px;

  background:#0c1727;
}

.amInfoBox > span{
  display:block;
  margin-bottom:8px;

  color:#74839d;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
}

.amInfoBox > b{
  display:block;
  margin-bottom:10px;

  overflow-wrap:anywhere;
  color:#e5edf8;
}

.amSection{
  margin:0 22px 17px;
  padding:18px;

  border:1px solid #293850;
  border-radius:14px;

  background:#0b1625;
}

.amDomainRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}

.amDomainRow select{
  width:100%;
}

.amLinkRow{
  display:grid;
  grid-template-columns:110px minmax(0,1fr) auto;
  gap:11px;
  align-items:center;

  margin-bottom:8px;
  padding:11px;

  border:1px solid #24324a;
  border-radius:10px;

  background:#091321;
}

.amLinkRow > span{
  color:#7d8ca4;
  font-size:9px;
  font-weight:900;
  letter-spacing:.05em;
}

.amLinkRow code{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:#becbe0;
}

.amLinkRow button{
  min-width:72px;
}

.amLinkTime{
  display:grid;
  grid-template-columns:minmax(200px,1fr) 110px 110px auto;
  gap:10px;
  align-items:end;

  margin-top:15px;
  padding:14px;

  border:1px dashed #3c4b67;
  border-radius:12px;
}

.amLinkTime small{
  display:block;
  margin-top:5px;
  color:#77859b;
}

.amLinkExpires{
  padding-top:11px;
  color:#a5b1c4;
  font-size:11px;
}

.amXtreamGrid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:10px;
}

.amXtreamGrid > div{
  min-width:0;
  padding:14px;

  border:1px solid #25344c;
  border-radius:11px;

  background:#091321;
}

.amXtreamGrid span{
  display:block;
  margin-bottom:7px;

  color:#75849b;
  font-size:9px;
  font-weight:900;
}

.amXtreamGrid b{
  display:block;
  overflow-wrap:anywhere;
}

.amRegenerate{
  display:flex;
  justify-content:center;
  padding:2px 22px 22px;
}

.amRegenerateButton{
  min-width:300px !important;
  min-height:50px !important;

  border:none !important;
  border-radius:12px !important;

  color:white !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;

  background:
    linear-gradient(135deg,#9333ea,#6d28d9) !important;

  box-shadow:
    0 14px 35px rgba(109,40,217,.30) !important;
}

.amFooter{
  position:sticky;
  bottom:0;
  z-index:5;

  display:flex;
  justify-content:space-between;
  gap:14px;

  padding:16px 22px;

  border-top:1px solid #293750;

  background:rgba(9,19,33,.98);
  backdrop-filter:blur(15px);
}

.amFooter > div{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}


@media(max-width:900px){

  .amOverview{
    grid-template-columns:1fr 1fr;
  }

  .amXtreamGrid{
    grid-template-columns:1fr;
  }

  .amLinkTime{
    grid-template-columns:1fr 1fr;
  }

}


@media(max-width:620px){

  .accountManager{
    padding:8px !important;
  }

  .accountManagerBox{
    width:100% !important;
    max-height:96vh !important;
    border-radius:15px !important;
  }

  .amOverview{
    grid-template-columns:1fr;
  }

  .amDomainRow,
  .amLinkRow,
  .amLinkTime{
    grid-template-columns:1fr;
  }

  .amFooter{
    flex-direction:column;
  }

}



/* =====================================================
   COMPACT CUSTOMER LINK MODAL
===================================================== */

.accountManager{
  position:fixed!important;
  inset:0!important;
  z-index:999999!important;
  display:grid!important;
  place-items:center!important;
  padding:18px!important;
}

.accountManager[hidden]{
  display:none!important;
}

.accountManagerShade{
  position:absolute;
  inset:0;
  background:rgba(2,7,16,.86);
  backdrop-filter:blur(8px);
}

.linkModal{
  position:relative;
  z-index:1;

  width:min(780px,96vw);
  max-height:94vh;
  overflow:auto;

  border:1px solid #33425c;
  border-radius:18px;

  background:#0a1524;

  box-shadow:
    0 35px 120px rgba(0,0,0,.72);
}

.linkModalHeader{
  position:sticky;
  top:0;
  z-index:10;

  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:15px;

  padding:20px 22px;

  border-bottom:1px solid #26354d;

  background:rgba(10,21,36,.98);
}

.linkModalHeader h2{
  margin:4px 0 8px;
  font-size:23px;
}

.linkHeaderMeta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;

  color:#92a0b6;
  font-size:11px;
}

.linkClose{
  width:42px!important;
  height:42px!important;
  padding:0!important;

  display:grid!important;
  place-items:center!important;

  font-size:25px!important;
  border-radius:11px!important;
}

.linkBody{
  padding:20px;
}

.linkSectionTitle{
  margin-bottom:10px;

  color:#aa72ff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.11em;
}

.linkField{
  display:grid;
  grid-template-columns:120px minmax(0,1fr) 78px;
  gap:10px;
  align-items:center;

  margin-bottom:9px;
}

.linkField label{
  color:#dbe4f2;
  font-size:11px;
  font-weight:800;
}

.linkField select,
.linkField code{
  min-width:0;
  min-height:44px;

  display:flex;
  align-items:center;

  padding:0 13px;

  border:1px solid #35445e;
  border-radius:9px;

  background:#091321;
  color:#dce6f4;
}

.linkField code{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.linkField button{
  min-height:44px!important;
}

.linkAction{
  color:white!important;
  border:none!important;
  background:
    linear-gradient(135deg,#9333ea,#7c3aed)!important;
}


.xtreamBox{
  margin-top:18px;
  padding:15px;

  border:1px solid #35445e;
  border-radius:12px;

  background:#0d1828;
}

.xtreamHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:11px;
}

.xtreamRows{
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr;
  gap:9px;
}

.xtreamRows>div{
  min-width:0;
  padding:12px;

  border:1px solid #293951;
  border-radius:9px;

  background:#091321;
}

.xtreamRows span{
  display:block;
  margin-bottom:7px;

  color:#77879f;
  font-size:9px;
  font-weight:900;
}

.xtreamRows b{
  display:block;
  overflow-wrap:anywhere;
}

.xtreamRows button{
  margin-top:9px;
}

.xtreamPasswordActions{
  display:flex;
  gap:5px;
}


.regenerateOptions{
  display:grid;
  grid-template-columns:minmax(0,1fr) 100px 100px;
  gap:10px;
  align-items:end;

  margin-top:18px;
  padding:13px;

  border:1px dashed #3e4b63;
  border-radius:11px;
}

.regenerateOptions small{
  display:block;
  margin-top:5px;
  color:#74839a;
}

.regenerateOptions label{
  font-size:9px;
  font-weight:900;
  color:#8795aa;
}

.linkExpiration{
  margin:9px 0;

  color:#8997ad;
  font-size:10px;
}


.mainRegenerate{
  display:block!important;

  width:320px!important;
  max-width:100%!important;
  min-height:49px!important;

  margin:17px auto 5px!important;

  border:none!important;
  border-radius:11px!important;

  color:white!important;
  font-weight:900!important;
  letter-spacing:.10em!important;

  background:
    linear-gradient(135deg,#9b30f5,#7131de)!important;

  box-shadow:
    0 12px 30px rgba(126,49,222,.30)!important;
}


.accountControls{
  display:flex;
  justify-content:space-between;
  gap:12px;

  margin-top:18px;
  padding-top:15px;

  border-top:1px solid #26354d;
}

.accountControls>div{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}


@media(max-width:650px){

  .linkModal{
    width:100%;
    max-height:97vh;
  }

  .linkField{
    grid-template-columns:1fr;
  }

  .xtreamRows{
    grid-template-columns:1fr;
  }

  .regenerateOptions{
    grid-template-columns:1fr 1fr;
  }

  .accountControls{
    flex-direction:column;
  }

}



/* MEXAMO PREMIUM SOURCES 1.9.2 */

.premiumSources{
  padding:0!important;
  border:0!important;
  background:transparent!important;
}

.premiumSourcesHero{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:24px;
  margin-bottom:14px;
  border-radius:20px;
  border:1px solid var(--line);
  background:
    linear-gradient(
      135deg,
      rgba(91,65,255,.10),
      rgba(0,170,255,.06)
    );
}

.premiumSourcesHero h2{
  margin:4px 0 6px;
  font-size:27px;
}

.premiumHeroButtons{
  display:flex;
  gap:8px;
}


.sourcePremiumStats{
  display:grid;
  grid-template-columns:
    repeat(
      7,
      minmax(105px,1fr)
    );
  gap:9px;
  margin-bottom:14px;
}

.sourcePremiumStats>div{
  padding:14px;
  border-radius:15px;
  border:1px solid var(--line);
  background:var(--panel);
}

.sourcePremiumStats span,
.sourcePremiumStats small{
  display:block;
  font-size:10px;
  color:var(--muted);
  font-weight:700;
}

.sourcePremiumStats b{
  display:block;
  font-size:20px;
  margin:4px 0;
}


.sourcePremiumToolbar{
  display:grid;
  grid-template-columns:
    minmax(260px,1fr)
    180px
    180px;
  gap:8px;
  padding:10px;
  margin-bottom:14px;
  border-radius:15px;
  border:1px solid var(--line);
  background:var(--panel);
  position:sticky;
  top:8px;
  z-index:5;
}


.premiumSourceGrid{
  display:grid;
  gap:13px;
}


.premiumSourceCard{
  padding:18px;
  border-radius:18px;
  border:1px solid var(--line);
  border-left:4px solid #64748b;
  background:var(--panel);
  box-shadow:
    0 8px 28px
    rgba(20,30,50,.06);
}

.premiumSourceCard.done{
  border-left-color:#10b981;
}

.premiumSourceCard.scanning{
  border-left-color:#7c3aed;
}

.premiumSourceCard.partial{
  border-left-color:#f59e0b;
}

.premiumSourceCard.error{
  border-left-color:#ef4444;
}

.premiumSourceCard.disabled{
  opacity:.70;
}


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


.premiumSourceAvatar{
  width:46px;
  height:46px;
  border-radius:13px;
  display:grid;
  place-items:center;
  color:white;
  font-weight:900;
  background:
    linear-gradient(
      135deg,
      #7c3aed,
      #2563eb
    );
}


.premiumSourceTitle{
  display:flex;
  gap:7px;
  align-items:center;
  flex-wrap:wrap;
}

.premiumSourceTitle h3{
  margin:0;
}


.premiumProvider{
  margin-top:3px;
  font-size:11px;
  color:var(--muted);
}


.premiumBadge{
  padding:5px 8px;
  border-radius:999px;
  font-size:9px;
  font-weight:900;
  background:#e5e7eb;
  color:#374151;
}

.premiumBadge.done{
  background:#d1fae5;
  color:#047857;
}

.premiumBadge.scanning{
  background:#ede9fe;
  color:#6d28d9;
}

.premiumBadge.partial{
  background:#fef3c7;
  color:#b45309;
}

.premiumBadge.error{
  background:#fee2e2;
  color:#b91c1c;
}

.premiumBadge.type{
  background:#dbeafe;
  color:#1d4ed8;
}


.premiumInventory{
  display:grid;
  grid-template-columns:
    repeat(5,1fr);
  gap:8px;
  margin:15px 0;
}

.premiumInventory>div{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
}

.premiumInventory span{
  display:block;
  font-size:9px;
  color:var(--muted);
  text-transform:uppercase;
  font-weight:800;
}

.premiumInventory b{
  display:block;
  font-size:17px;
  margin-top:3px;
}


.premiumProgressBox{
  padding:12px;
  border-radius:13px;
  border:1px solid var(--line);
}

.premiumProgressHeader{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:end;
}

.premiumProgressHeader span{
  display:block;
  font-size:10px;
  color:var(--muted);
}

.premiumProgressRight{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.premiumProgressRight .failed{
  color:#dc2626;
}

.premiumProgress{
  height:7px;
  margin-top:8px;
  overflow:hidden;
  border-radius:99px;
  background:
    rgba(100,116,139,.18);
}

.premiumProgress i{
  height:100%;
  display:block;
  border-radius:99px;
  background:
    linear-gradient(
      90deg,
      #7c3aed,
      #2563eb,
      #06b6d4
    );
}


.premiumSourceInfo{
  display:grid;
  grid-template-columns:
    2fr 1fr 1.4fr 1fr;
  gap:8px;
  margin-top:10px;
}

.premiumSourceInfo>div{
  padding:9px 10px;
  border-radius:11px;
  background:
    rgba(120,120,120,.04);
  min-width:0;
}

.premiumSourceInfo span{
  display:block;
  font-size:8px;
  color:var(--muted);
  text-transform:uppercase;
  font-weight:900;
  margin-bottom:4px;
}

.premiumSourceInfo b,
.premiumSourceInfo code{
  display:block;
  font-size:10px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}


.premiumSourceActions{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:13px;
}


.premiumError{
  margin-top:10px;
  padding:10px;
  border-radius:10px;
  background:#fff1f2;
  color:#be123c;
}


.premiumEmpty{
  padding:40px;
  text-align:center;
  border-radius:16px;
  border:1px dashed var(--line);
}

.premiumEmpty b,
.premiumEmpty span{
  display:block;
}

.premiumEmpty span{
  margin-top:5px;
  color:var(--muted);
}


.premiumSourceModal[hidden]{
  display:none!important;
}

.premiumSourceModal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:20px;
}

.premiumModalBackdrop{
  position:absolute;
  inset:0;
  background:
    rgba(2,6,23,.70);
  backdrop-filter:blur(4px);
}

.premiumModalBody{
  position:relative;
  width:min(720px,96vw);
  max-height:90vh;
  overflow:auto;
  padding:21px;
  border-radius:20px;
  border:1px solid var(--line);
  background:var(--panel);
  box-shadow:
    0 30px 100px
    rgba(0,0,0,.35);
}

.premiumModalHeader{
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-bottom:15px;
}

.premiumModalHeader h3{
  font-size:23px;
  margin:3px 0;
}


.premiumTypeSelector{
  display:grid;
  grid-template-columns:
    repeat(4,1fr);
  gap:7px;
  margin-bottom:15px;
}

.premiumTypeSelector button{
  padding:12px!important;
  border-radius:12px!important;
}

.premiumTypeSelector b,
.premiumTypeSelector span{
  display:block;
}

.premiumTypeSelector span{
  font-size:9px;
  color:var(--muted);
}

.premiumTypeSelector button.active{
  border-color:#7c3aed!important;
  box-shadow:
    0 0 0 2px
    rgba(124,58,237,.12);
}


.premiumModalActions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:12px;
}


.premiumInspect{
  margin-top:10px;
  padding:10px;
  border-radius:10px;
}

.premiumInspect b,
.premiumInspect span{
  display:block;
}

.premiumInspect.success{
  background:#ecfdf5;
  color:#047857;
}

.premiumInspect.error{
  background:#fff1f2;
  color:#be123c;
}

.premiumInspect.checking{
  background:#eff6ff;
  color:#1d4ed8;
}


.premiumModalOpen{
  overflow:hidden;
}


@media(max-width:1100px){

  .sourcePremiumStats{
    grid-template-columns:
      repeat(4,1fr);
  }

  .premiumSourceInfo{
    grid-template-columns:
      1fr 1fr;
  }

  .premiumInventory{
    grid-template-columns:
      repeat(3,1fr);
  }
}


@media(max-width:700px){

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

  .sourcePremiumStats{
    grid-template-columns:
      1fr 1fr;
  }

  .sourcePremiumToolbar{
    grid-template-columns:1fr;
  }

  .premiumInventory{
    grid-template-columns:
      1fr 1fr;
  }

  .premiumSourceInfo{
    grid-template-columns:1fr;
  }

  .premiumTypeSelector{
    grid-template-columns:
      1fr 1fr;
  }

}



/* =========================================================
   MEXAMO COMPANY DEVICE MANAGER
   ========================================================= */

.mexDevicePage{
  max-width:1480px;
  margin:0 auto;
}

.devicePageHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:24px;
}

.devicePageHead h2{
  margin:5px 0 7px;
  font-size:30px;
  letter-spacing:-.7px;
}

.deviceServerPicker{
  width:320px;
}

.deviceServerPicker span{
  display:block;
  margin:0 0 7px;
  font-size:11px;
  font-weight:800;
  letter-spacing:1px;
  opacity:.62;
}

.deviceServerPicker select,
.deviceListTools input,
.deviceListTools select{
  width:100%;
  height:46px;
  border:1px solid var(--border,#dfe3ea);
  border-radius:12px;
  background:var(--card,#fff);
  padding:0 14px;
  font-weight:700;
}


.deviceServerInfo{
  display:flex;
  align-items:center;
  gap:28px;
  margin-bottom:20px;
  padding:16px 20px;
  background:var(--card,#fff);
  border:1px solid var(--border,#e1e5ec);
  border-radius:16px;
  box-shadow:0 8px 30px rgba(30,40,70,.06);
}

.serverInfoIdentity{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:260px;
}

.serverDot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 6px rgba(34,197,94,.12);
}

.serverInfoIdentity span,
.serverInfoDomain span{
  display:block;
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
  opacity:.55;
}

.serverInfoIdentity b,
.serverInfoDomain b{
  display:block;
  margin-top:3px;
  font-size:14px;
}

.serverInfoIdentity small{
  display:block;
  margin-top:2px;
  opacity:.55;
}

.serverInfoDomain{
  flex:1;
}

.serverInfoStatus{
  padding:8px 13px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
}

.serverInfoStatus.ready{
  background:#dcfce7;
  color:#15803d;
}

.serverInfoStatus.warning{
  background:#fff7ed;
  color:#c2410c;
}


.deviceCreateLayout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:20px;
  align-items:start;
}

.deviceCreateCard,
.devicePreviewCard{
  background:var(--card,#fff);
  border:1px solid var(--border,#e2e6ee);
  border-radius:18px;
  box-shadow:0 12px 36px rgba(24,34,60,.06);
}

.deviceCreateCard{
  padding:25px;
}

.devicePreviewCard{
  padding:22px;
  position:sticky;
  top:18px;
}

.deviceCardTitle>div,
.deviceSectionTitle>div{
  display:flex;
  align-items:center;
  gap:12px;
}

.deviceCardTitle h3,
.deviceSectionTitle h3{
  margin:0;
  font-size:18px;
}

.deviceCardTitle p,
.deviceSectionTitle p{
  margin:3px 0 0;
  font-size:12px;
  opacity:.55;
}

.deviceStep{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#f0ecff;
  color:#6d45d8;
  font-weight:900;
  font-size:11px;
}

.deviceFormGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:22px;
}

.deviceFormGrid label>span{
  display:block;
  margin-bottom:7px;
  font-size:12px;
  font-weight:800;
}

.deviceFormGrid input,
.deviceFormGrid select{
  width:100%;
  height:45px;
  border:1px solid var(--border,#dfe3ea);
  border-radius:11px;
  background:var(--card,#fff);
  padding:0 13px;
}

.inputAction{
  display:flex;
  gap:7px;
}

.inputAction button{
  width:44px;
  border-radius:11px;
}

.deviceDivider{
  height:1px;
  background:var(--border,#e9ebf0);
  margin:26px 0;
}

.planChoices{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:17px;
}

.planChoice{
  min-height:70px;
  padding:11px;
  border:1px solid var(--border,#dfe3ea);
  border-radius:12px;
  background:var(--card,#fff);
  text-align:left;
  cursor:pointer;
}

.planChoice b{
  display:block;
  font-size:14px;
}

.planChoice span{
  display:block;
  margin-top:3px;
  font-size:11px;
  opacity:.55;
}

.planChoice.active{
  border-color:#7655df;
  background:#f4f1ff;
  box-shadow:0 0 0 2px rgba(118,85,223,.10);
}

.planChoice.trial b{
  color:#15803d;
}


.deviceAccessTypes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:11px;
  margin-top:17px;
}

.accessType{
  display:flex;
  align-items:center;
  gap:11px;
  padding:14px;
  border:1px solid var(--border,#e3e6ed);
  border-radius:12px;
}

.accessType.included{
  background:#faf9ff;
}

.accessType.disabled{
  opacity:.40;
}

.accessIcon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#f0ecff;
  color:#6540d2;
}

.accessType b,
.accessType span{
  display:block;
}

.accessType span{
  margin-top:2px;
  font-size:11px;
  opacity:.55;
}


.deviceCreateButton{
  width:100%;
  height:50px;
  margin-top:25px;
  border:0;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(135deg,#7250db,#5f3ec4);
  font-weight:900;
  box-shadow:0 10px 24px rgba(101,64,210,.22);
}


.previewTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:19px;
}

.previewTop>span:first-child{
  font-size:11px;
  font-weight:900;
  letter-spacing:1px;
  opacity:.55;
}

.previewBadge{
  padding:6px 10px;
  border-radius:999px;
  background:#f3f4f6;
  font-size:11px;
  font-weight:900;
}

.previewBadge.ready{
  color:#15803d;
  background:#dcfce7;
}

.previewServer{
  padding:16px;
  border-radius:13px;
  background:#f7f5ff;
  margin-bottom:13px;
}

.previewServer span,
.previewServer b,
.previewServer small{
  display:block;
}

.previewServer span{
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
  opacity:.55;
}

.previewServer b{
  margin-top:5px;
  font-size:17px;
}

.previewServer small{
  margin-top:4px;
  word-break:break-all;
  opacity:.65;
}

.previewRows>div{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:12px 2px;
  border-bottom:1px solid var(--border,#eceef2);
}

.previewRows span{
  font-size:12px;
  opacity:.60;
}

.previewRows b{
  font-size:12px;
  text-align:right;
}

.previewNote{
  margin-top:16px;
  padding:12px;
  background:#effaf3;
  color:#247144;
  border-radius:10px;
  font-size:11px;
  line-height:1.55;
}


.deviceCreatedResult{
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:20px;
  padding:20px;
  border:1px solid #bbf7d0;
  background:#f0fdf4;
  border-radius:16px;
}

.createdIcon{
  width:48px;
  height:48px;
  flex:0 0 48px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#22c55e;
  color:#fff;
  font-size:24px;
  font-weight:900;
}

.createdMain{
  flex:1;
}

.createdMain>span{
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
  color:#15803d;
}

.createdMain h3{
  margin:3px 0 13px;
}

.createdCredentials{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.3fr;
  gap:10px;
}

.createdCredentials span,
.createdCredentials b{
  display:block;
}

.createdCredentials span{
  font-size:10px;
  opacity:.55;
}

.createdCredentials b{
  margin-top:3px;
  font-size:12px;
  word-break:break-all;
}

.createdActions{
  display:flex;
  flex-direction:column;
  gap:7px;
}


.deviceListTools{
  display:flex;
  gap:9px;
  min-width:620px;
}

.deviceListTools input{
  flex:1;
}

.deviceListTools select{
  width:145px;
}

.deviceStats{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  margin-bottom:18px;
}

.deviceStats>div{
  background:var(--card,#fff);
  border:1px solid var(--border,#e3e6ec);
  border-radius:13px;
  padding:16px;
}

.deviceStats b,
.deviceStats span{
  display:block;
}

.deviceStats b{
  font-size:22px;
}

.deviceStats span{
  margin-top:3px;
  opacity:.55;
  font-size:11px;
}

.companyDeviceTable{
  overflow:hidden;
  background:var(--card,#fff);
  border:1px solid var(--border,#e2e5ec);
  border-radius:15px;
}

.companyDeviceHeader,
.companyDeviceRow{
  display:grid;
  grid-template-columns:
    1.1fr 1fr 1.5fr 1.35fr .7fr .8fr 2fr;
  align-items:center;
  gap:12px;
  padding:13px 16px;
}

.companyDeviceHeader{
  background:#f7f8fb;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.65px;
  opacity:.65;
}

.companyDeviceRow{
  min-height:65px;
  border-top:1px solid var(--border,#eceef2);
  font-size:12px;
}

.companyDeviceRow code{
  padding:4px 7px;
  border-radius:7px;
  background:#f4f5f7;
}

.deviceStatus{
  display:inline-block;
  padding:5px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
}

.deviceStatus.active{
  color:#15803d;
  background:#dcfce7;
}

.deviceStatus.expired{
  color:#b45309;
  background:#fef3c7;
}

.deviceStatus.blocked{
  color:#b91c1c;
  background:#fee2e2;
}

.trialTag{
  display:inline-block;
  margin-left:4px;
  font-size:9px;
  font-weight:900;
  color:#6d45d8;
}

.deviceRowActions{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
}

.deviceRowActions button{
  padding:6px 8px;
  font-size:10px;
}

.deviceEmpty{
  padding:50px;
  text-align:center;
  background:var(--card,#fff);
  border:1px dashed var(--border,#dfe3e8);
  border-radius:15px;
}

.deviceEmpty b,
.deviceEmpty span{
  display:block;
}

.deviceEmpty span{
  margin-top:6px;
  opacity:.55;
}


@media(max-width:1100px){

  .deviceCreateLayout{
    grid-template-columns:1fr;
  }

  .devicePreviewCard{
    position:static;
  }

  .planChoices{
    grid-template-columns:repeat(2,1fr);
  }

  .deviceAccessTypes{
    grid-template-columns:1fr;
  }

  .companyDeviceTable{
    overflow:auto;
  }

  .companyDeviceHeader,
  .companyDeviceRow{
    min-width:1150px;
  }

  .devicePageHead{
    align-items:stretch;
    flex-direction:column;
  }

  .deviceListTools{
    min-width:0;
    flex-wrap:wrap;
  }
}



/* ============================================================
   MEXAMO ADD DEVICE — FINAL COMPANY UI V3
   ============================================================ */

#add-device.mexDevicePage{
    width:100%;
    max-width:1500px;
    margin:0 auto;
    padding:24px 28px 48px;
}

/* ---------- HEADER ---------- */

#add-device .devicePageHead{
    display:grid;
    grid-template-columns:minmax(0,1fr) 310px;
    align-items:end;
    gap:28px;
    margin-bottom:18px;
}

#add-device .devicePageHead .eyebrow{
    margin-bottom:6px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.16em;
    color:#7c5cff;
}

#add-device .devicePageHead h2{
    margin:0;
    font-size:28px;
    line-height:1.15;
    font-weight:800;
}

#add-device .devicePageHead .hint{
    margin:7px 0 0;
    max-width:680px;
    font-size:13px;
    line-height:1.5;
    color:var(--muted);
}

/* ---------- SERVER SELECT ---------- */

#add-device .deviceServerPicker{
    display:flex;
    flex-direction:column;
    gap:7px;
}

#add-device .deviceServerPicker > span{
    font-size:10px;
    font-weight:800;
    letter-spacing:.12em;
    color:var(--muted);
}

#add-device .deviceServerPicker select{
    width:100%;
    height:48px;
    padding:0 42px 0 15px;
    border:1px solid var(--border);
    border-radius:11px;
    background:var(--panel);
    color:var(--text);
    font-size:14px;
    font-weight:700;
    outline:none;
}

#add-device .deviceServerPicker select:focus{
    border-color:#7257ff;
    box-shadow:0 0 0 3px rgba(114,87,255,.12);
}

/* ---------- SELECTED SERVER BAR ---------- */

#add-device .deviceServerInfo{
    display:grid;
    grid-template-columns:minmax(220px,.8fr) minmax(300px,1.4fr) auto;
    align-items:center;
    gap:20px;
    min-height:72px;
    padding:14px 18px;
    margin-bottom:18px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--panel);
}

#add-device .deviceServerInfo[hidden]{
    display:none !important;
}

#add-device .serverInfoIdentity{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

#add-device .serverDot{
    width:9px;
    height:9px;
    flex:0 0 auto;
    border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 0 5px rgba(34,197,94,.10);
}

#add-device .serverInfoIdentity > div:last-child{
    display:flex;
    flex-direction:column;
    min-width:0;
}

#add-device .serverInfoIdentity span,
#add-device .serverInfoDomain span{
    font-size:9px;
    font-weight:800;
    letter-spacing:.11em;
    color:var(--muted);
}

#add-device .serverInfoIdentity b{
    margin-top:3px;
    font-size:14px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

#add-device .serverInfoIdentity small{
    margin-top:2px;
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

#add-device .serverInfoDomain{
    display:flex;
    flex-direction:column;
    min-width:0;
    padding-left:18px;
    border-left:1px solid var(--border);
}

#add-device .serverInfoDomain b{
    margin-top:4px;
    font-size:13px;
    color:#7357ff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

#add-device .serverInfoStatus{
    padding:7px 11px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
}

#add-device .serverInfoStatus.ready{
    color:#15803d;
    background:rgba(34,197,94,.11);
}

#add-device .serverInfoStatus.warning{
    color:#b45309;
    background:rgba(245,158,11,.12);
}

/* ---------- MAIN ---------- */

#add-device .deviceCreateLayout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    gap:18px;
    align-items:start;
}

#add-device .deviceCreateCard,
#add-device .devicePreviewCard{
    border:1px solid var(--border);
    background:var(--panel);
    border-radius:16px;
    box-shadow:0 8px 30px rgba(0,0,0,.035);
}

#add-device .deviceCreateCard{
    padding:22px;
}

/* ---------- SECTION TITLES ---------- */

#add-device .deviceCardTitle > div,
#add-device .deviceSectionTitle > div{
    display:flex;
    align-items:center;
    gap:11px;
}

#add-device .deviceCardTitle h3,
#add-device .deviceSectionTitle h3{
    margin:0;
    font-size:15px;
    font-weight:800;
}

#add-device .deviceCardTitle p,
#add-device .deviceSectionTitle p{
    margin:2px 0 0;
    font-size:11px;
    color:var(--muted);
}

#add-device .deviceStep{
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    flex:0 0 30px;
    border-radius:9px;
    background:rgba(114,87,255,.10);
    color:#7357ff;
    font-size:10px;
    font-weight:900;
}

/* ---------- FORM ---------- */

#add-device .deviceFormGrid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:15px 18px;
    margin-top:18px;
}

#add-device .deviceFormGrid label{
    display:flex;
    flex-direction:column;
    gap:7px;
    min-width:0;
}

#add-device .deviceFormGrid label > span{
    font-size:11px;
    font-weight:750;
}

#add-device .deviceFormGrid input,
#add-device .deviceFormGrid select{
    width:100%;
    height:44px;
    box-sizing:border-box;
    padding:0 13px;
    border:1px solid var(--border);
    border-radius:9px;
    background:var(--bg);
    color:var(--text);
    outline:none;
    font-size:13px;
}

#add-device .deviceFormGrid input:focus,
#add-device .deviceFormGrid select:focus{
    border-color:#7257ff;
    box-shadow:0 0 0 3px rgba(114,87,255,.10);
}

#add-device .inputAction{
    position:relative;
}

#add-device .inputAction input{
    padding-right:42px;
}

#add-device .inputAction button{
    position:absolute;
    top:50%;
    right:6px;
    transform:translateY(-50%);
    display:grid;
    place-items:center;
    width:31px;
    height:31px;
    padding:0;
    border:0;
    border-radius:7px;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
}

#add-device .inputAction button:hover{
    color:#7357ff;
    background:rgba(114,87,255,.08);
}

/* ---------- DIVIDER ---------- */

#add-device .deviceDivider{
    height:1px;
    margin:21px 0;
    background:var(--border);
}

/* ---------- PLANS ---------- */

#add-device .planChoices{
    display:grid;
    grid-template-columns:repeat(7,minmax(90px,1fr));
    gap:8px;
    margin-top:14px;
}

#add-device .planChoice{
    min-height:61px;
    padding:10px 9px;
    text-align:left;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--bg);
    color:var(--text);
    cursor:pointer;
    transition:.15s ease;
}

#add-device .planChoice b{
    display:block;
    margin-bottom:3px;
    font-size:12px;
}

#add-device .planChoice span{
    display:block;
    font-size:9px;
    color:var(--muted);
}

#add-device .planChoice:hover{
    border-color:rgba(114,87,255,.55);
    transform:translateY(-1px);
}

#add-device .planChoice.active{
    border-color:#7257ff;
    background:rgba(114,87,255,.08);
    box-shadow:0 0 0 2px rgba(114,87,255,.08);
}

#add-device .planChoice.active b{
    color:#7357ff;
}

#add-device .planChoice.trial b{
    color:#16a34a;
}

/* ---------- ACCESS ---------- */

#add-device .deviceAccessTypes{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-top:14px;
}

#add-device .accessType{
    display:flex;
    align-items:center;
    gap:11px;
    min-height:60px;
    padding:11px 13px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--bg);
}

#add-device .accessIcon{
    display:grid;
    place-items:center;
    width:31px;
    height:31px;
    flex:0 0 31px;
    border-radius:8px;
    background:rgba(114,87,255,.09);
    color:#7357ff;
}

#add-device .accessType > div:last-child{
    display:flex;
    flex-direction:column;
}

#add-device .accessType b{
    font-size:11px;
}

#add-device .accessType span{
    margin-top:2px;
    font-size:9px;
    color:var(--muted);
}

#add-device .accessType.included span{
    color:#16a34a;
}

#add-device .accessType.disabled{
    opacity:.5;
}

/* ---------- CREATE ---------- */

#add-device .deviceCreateButton{
    display:block;
    width:auto;
    min-width:190px;
    height:46px;
    margin:22px 0 0 auto;
    padding:0 24px;
    border:0;
    border-radius:10px;
    background:linear-gradient(135deg,#6847f5,#7c3aed);
    color:white;
    font-size:12px;
    font-weight:850;
    letter-spacing:.03em;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(109,65,230,.20);
}

#add-device .deviceCreateButton:hover{
    transform:translateY(-1px);
}

/* ---------- PREVIEW ---------- */

#add-device .devicePreviewCard{
    position:sticky;
    top:20px;
    padding:18px;
}

#add-device .previewTop{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding-bottom:14px;
    border-bottom:1px solid var(--border);
}

#add-device .previewTop > span:first-child{
    font-size:9px;
    font-weight:850;
    letter-spacing:.12em;
    color:var(--muted);
}

#add-device .previewBadge{
    padding:6px 9px;
    border-radius:999px;
    background:rgba(34,197,94,.10);
    color:#15803d;
    font-size:9px;
    font-weight:800;
}

#add-device .previewServer{
    padding:16px 0;
    border-bottom:1px solid var(--border);
}

#add-device .previewServer span{
    display:block;
    margin-bottom:5px;
    font-size:9px;
    color:var(--muted);
}

#add-device .previewServer b{
    display:block;
    font-size:14px;
}

#add-device .previewServer small{
    display:block;
    margin-top:5px;
    color:#7357ff;
    font-size:10px;
    line-height:1.4;
    word-break:break-all;
}

#add-device .previewRows{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px;
    margin:14px 0;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--border);
}

#add-device .previewRows > div{
    min-width:0;
    padding:11px;
    background:var(--bg);
}

#add-device .previewRows span{
    display:block;
    margin-bottom:4px;
    font-size:8px;
    color:var(--muted);
}

#add-device .previewRows b{
    display:block;
    overflow:hidden;
    font-size:10px;
    white-space:nowrap;
    text-overflow:ellipsis;
}

#add-device .previewNote{
    padding:11px;
    border-radius:9px;
    background:rgba(114,87,255,.06);
    color:var(--muted);
    font-size:9px;
    line-height:1.55;
}

/* ---------- CREATED RESULT ---------- */

#add-device .deviceCreatedResult{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:18px;
    margin-top:18px;
    padding:18px;
    border:1px solid rgba(34,197,94,.25);
    border-radius:14px;
    background:rgba(34,197,94,.055);
}

#add-device .deviceCreatedResult[hidden]{
    display:none !important;
}

#add-device .createdIcon{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:50%;
    background:#22c55e;
    color:#fff;
    font-size:20px;
    font-weight:900;
}

#add-device .createdMain > span{
    font-size:9px;
    font-weight:850;
    letter-spacing:.12em;
    color:#16a34a;
}

#add-device .createdMain h3{
    margin:4px 0 10px;
    font-size:15px;
}

#add-device .createdCredentials{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
}

#add-device .createdCredentials span{
    display:block;
    margin-bottom:3px;
    font-size:8px;
    color:var(--muted);
}

#add-device .createdCredentials b{
    font-size:10px;
}

#add-device .createdActions{
    display:flex;
    gap:7px;
}

#add-device .createdActions button{
    height:36px;
    padding:0 12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--panel);
    color:var(--text);
    cursor:pointer;
    font-size:10px;
    font-weight:750;
}

#add-device .createdActions button.primary{
    border-color:#7257ff;
    background:#7257ff;
    color:white;
}

/* ---------- TABLET ---------- */

@media(max-width:1200px){

    #add-device .deviceCreateLayout{
        grid-template-columns:1fr;
    }

    #add-device .devicePreviewCard{
        position:static;
    }

    #add-device .planChoices{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
}

/* ---------- MOBILE ---------- */

@media(max-width:760px){

    #add-device.mexDevicePage{
        padding:14px;
    }

    #add-device .devicePageHead{
        grid-template-columns:1fr;
        gap:15px;
    }

    #add-device .deviceServerInfo{
        grid-template-columns:1fr;
        gap:11px;
    }

    #add-device .serverInfoDomain{
        padding:11px 0 0;
        border-left:0;
        border-top:1px solid var(--border);
    }

    #add-device .deviceCreateCard{
        padding:15px;
    }

    #add-device .deviceFormGrid{
        grid-template-columns:1fr;
    }

    #add-device .planChoices{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    #add-device .deviceAccessTypes{
        grid-template-columns:1fr;
    }

    #add-device .deviceCreateButton{
        width:100%;
    }

    #add-device .previewRows{
        grid-template-columns:1fr;
    }

    #add-device .deviceCreatedResult{
        grid-template-columns:1fr;
    }

    #add-device .createdActions{
        flex-wrap:wrap;
    }
}



/* ============================================================
   MEXAMO ADD DEVICE — FINAL POLISH
   ============================================================ */

#add-device.mexDevicePage{
    max-width:1380px !important;
    padding:22px 24px 42px !important;
}

/* HEADER */
#add-device .devicePageHead{
    grid-template-columns:minmax(0,1fr) 290px !important;
    gap:22px !important;
    margin-bottom:16px !important;
}

#add-device .devicePageHead h2{
    font-size:30px !important;
}

#add-device .devicePageHead .hint{
    font-size:12px !important;
}

/* SERVER BAR */
#add-device .deviceServerInfo{
    grid-template-columns:260px minmax(0,1fr) auto !important;
    min-height:64px !important;
    padding:12px 16px !important;
}

#add-device .serverInfoIdentity b{
    font-size:15px !important;
}

#add-device .serverInfoDomain b{
    font-size:12px !important;
}

/* MAIN LAYOUT */
#add-device .deviceCreateLayout{
    grid-template-columns:minmax(0,1fr) 330px !important;
    gap:20px !important;
}

/* MAIN CARD */
#add-device .deviceCreateCard{
    padding:24px !important;
    border-radius:15px !important;
}

#add-device .deviceCardTitle h3,
#add-device .deviceSectionTitle h3{
    font-size:16px !important;
}

#add-device .deviceCardTitle p,
#add-device .deviceSectionTitle p{
    font-size:10px !important;
}

/* FORM BIGGER */
#add-device .deviceFormGrid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:16px 18px !important;
    margin-top:20px !important;
}

#add-device .deviceFormGrid label > span{
    font-size:11px !important;
}

#add-device .deviceFormGrid input,
#add-device .deviceFormGrid select{
    height:46px !important;
    font-size:13px !important;
}

/* PLANS */
#add-device .planChoices{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:10px !important;
}

#add-device .planChoice{
    min-height:64px !important;
    padding:11px 12px !important;
}

#add-device .planChoice b{
    font-size:13px !important;
}

#add-device .planChoice span{
    font-size:9px !important;
}

/* ACCESS */
#add-device .deviceAccessTypes{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
}

#add-device .accessType{
    min-height:64px !important;
    padding:12px 13px !important;
}

#add-device .accessType b{
    font-size:12px !important;
}

#add-device .accessType span{
    font-size:9px !important;
}

/* CREATE BUTTON */
#add-device .deviceCreateButton{
    min-width:210px !important;
    height:48px !important;
    font-size:12px !important;
    margin-top:22px !important;
}

/* PREVIEW CARD */
#add-device .devicePreviewCard{
    padding:20px !important;
    border-radius:15px !important;
}

#add-device .previewTop{
    padding-bottom:14px !important;
}

#add-device .previewTop > span:first-child{
    font-size:10px !important;
}

#add-device .previewServer{
    padding:17px 0 !important;
}

#add-device .previewServer b{
    font-size:16px !important;
}

#add-device .previewServer small{
    font-size:10px !important;
}

#add-device .previewRows{
    grid-template-columns:1fr !important;
    gap:0 !important;
}

#add-device .previewRows > div{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    padding:10px 11px !important;
    border-bottom:1px solid var(--border) !important;
}

#add-device .previewRows > div:last-child{
    border-bottom:0 !important;
}

#add-device .previewRows span{
    margin:0 !important;
    font-size:9px !important;
}

#add-device .previewRows b{
    font-size:10px !important;
    text-align:right !important;
}

#add-device .previewNote{
    font-size:9px !important;
    line-height:1.5 !important;
}

/* LIGHT THEME */
html[data-theme="light"] #add-device .deviceCreateCard,
html[data-theme="light"] #add-device .devicePreviewCard,
html[data-theme="light"] #add-device .deviceServerInfo{
    background:#ffffff !important;
}

html[data-theme="light"] #add-device .deviceFormGrid input,
html[data-theme="light"] #add-device .deviceFormGrid select,
html[data-theme="light"] #add-device .planChoice,
html[data-theme="light"] #add-device .accessType{
    background:#fbfcfe !important;
}

/* DARK THEME */
html[data-theme="dark"] #add-device .deviceCreateCard,
html[data-theme="dark"] #add-device .devicePreviewCard,
html[data-theme="dark"] #add-device .deviceServerInfo,
html[data-theme="dark"] #add-device .deviceServerPicker select{
    background:#121927 !important;
    border-color:#283348 !important;
}

html[data-theme="dark"] #add-device .deviceFormGrid input,
html[data-theme="dark"] #add-device .deviceFormGrid select,
html[data-theme="dark"] #add-device .planChoice,
html[data-theme="dark"] #add-device .accessType{
    background:#0e1522 !important;
    border-color:#273247 !important;
    color:#edf2f7 !important;
}

html[data-theme="dark"] #add-device .previewRows > div{
    background:#0e1522 !important;
}

html[data-theme="dark"] #add-device .deviceDivider{
    background:#273247 !important;
}

/* TABLET */
@media(max-width:1150px){

    #add-device .deviceCreateLayout{
        grid-template-columns:1fr !important;
    }

    #add-device .devicePreviewCard{
        position:static !important;
    }

    #add-device .previewRows{
        grid-template-columns:repeat(2,1fr) !important;
    }
}

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

    #add-device .deviceFormGrid{
        grid-template-columns:1fr !important;
    }

    #add-device .planChoices{
        grid-template-columns:repeat(2,1fr) !important;
    }

    #add-device .deviceAccessTypes{
        grid-template-columns:1fr !important;
    }

    #add-device .previewRows{
        grid-template-columns:1fr !important;
    }
}



/* ============================================================
   MEXAMO ADD DEVICE — SERVER PICKER + LAYOUT FINAL FIX
   ============================================================ */

/* Page */
#add-device.mexDevicePage{
    max-width:1380px !important;
    margin:0 auto !important;
    padding:22px 24px 42px !important;
}

/* Header: title + server selector */
#add-device .devicePageHead{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 270px !important;
    align-items:end !important;
    gap:24px !important;
    margin-bottom:16px !important;
}

/* Server selector wrapper */
#add-device .deviceServerPicker{
    width:270px !important;
    min-width:270px !important;
    max-width:270px !important;
    justify-self:end !important;
    position:relative !important;
}

/* Label */
#add-device .deviceServerPicker > span{
    display:block !important;
    margin:0 0 7px 4px !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:.14em !important;
    text-transform:uppercase !important;
}

/* CLOSED SELECT */
#add-device .deviceServerPicker select{
    display:block !important;
    box-sizing:border-box !important;
    width:100% !important;
    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;

    margin:0 !important;
    padding:0 38px 0 14px !important;

    border-radius:10px !important;
    border:1px solid var(--border) !important;

    font-size:13px !important;
    font-weight:700 !important;
    line-height:44px !important;

    cursor:pointer !important;

    /* Important: keep this a normal browser dropdown */
    appearance:auto !important;
    -webkit-appearance:menulist !important;
}

/*
   Prevent inherited rules from turning the server selector
   into a list box.
*/
#add-device .deviceServerPicker select:not([multiple]){
    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;
}

/* Individual options */
#add-device .deviceServerPicker select option{
    font-size:13px !important;
    font-weight:600 !important;
    padding:7px 10px !important;
}

/* Selected server information bar */
#add-device .deviceServerInfo{
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:220px minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:20px !important;

    width:100% !important;
    min-height:64px !important;

    margin:0 0 16px !important;
    padding:12px 16px !important;

    border-radius:14px !important;
}

/* MAIN FORM + PREVIEW */
#add-device .deviceCreateLayout{
    display:grid !important;
    grid-template-columns:minmax(0,2.15fr) minmax(300px,.85fr) !important;
    align-items:start !important;
    gap:18px !important;
}

/* Main card */
#add-device .deviceCreateCard{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
}

/* Preview */
#add-device .devicePreviewCard{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
}

/* Give preview content a little more breathing room */
#add-device .previewRows > div{
    padding:11px 12px !important;
}

#add-device .previewRows span{
    font-size:10px !important;
}

#add-device .previewRows b{
    font-size:11px !important;
}

/* DARK */
html[data-theme="dark"] #add-device .deviceServerPicker select{
    background:#121927 !important;
    border-color:#283348 !important;
    color:#edf2f7 !important;
}

/* LIGHT */
html[data-theme="light"] #add-device .deviceServerPicker select{
    background:#ffffff !important;
    color:#111827 !important;
}

/* TABLET */
@media(max-width:1150px){

    #add-device .deviceCreateLayout{
        grid-template-columns:1fr !important;
    }

    #add-device .devicePreviewCard{
        position:static !important;
    }
}

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

    #add-device.mexDevicePage{
        padding:16px 14px 30px !important;
    }

    #add-device .devicePageHead{
        grid-template-columns:1fr !important;
        gap:14px !important;
    }

    #add-device .deviceServerPicker{
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        justify-self:stretch !important;
    }
}

/* MEXAMO ADD DEVICE — SERVER SELECT SHORT FIX */
#add-device .deviceServerPicker{
    width:270px !important;
    min-width:270px !important;
    max-width:270px !important;
}

#add-device .deviceServerPicker select{
    width:100% !important;
    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;
    appearance:auto !important;
    -webkit-appearance:menulist !important;
}

#add-device .deviceCreateLayout{
    grid-template-columns:minmax(0,2fr) minmax(320px,1fr) !important;
    gap:18px !important;
}

/* ADD DEVICE — DARK COLOR FIX */
html[data-theme="dark"] #add-device .deviceCreateCard,
html[data-theme="dark"] #add-device .devicePreviewCard,
html[data-theme="dark"] #add-device .deviceServerInfo{
    background:#121927 !important;
    border-color:#2b354a !important;
    color:#f4f7fb !important;
}

html[data-theme="dark"] #add-device label,
html[data-theme="dark"] #add-device .hint,
html[data-theme="dark"] #add-device .previewRows span{
    color:#9ca9bd !important;
}

html[data-theme="dark"] #add-device input,
html[data-theme="dark"] #add-device select,
html[data-theme="dark"] #add-device .planChoice,
html[data-theme="dark"] #add-device .accessType{
    background:#0d1421 !important;
    border-color:#2b354a !important;
    color:#f4f7fb !important;
}

html[data-theme="dark"] #add-device input::placeholder{
    color:#77849a !important;
}

html[data-theme="dark"] #add-device .planChoice.active,
html[data-theme="dark"] #add-device .planChoice.selected,
html[data-theme="dark"] #add-device .accessType.active,
html[data-theme="dark"] #add-device .accessType.selected{
    background:#211b3d !important;
    border-color:#7657ff !important;
    color:#ffffff !important;
}

html[data-theme="dark"] #add-device .previewRows > div{
    background:#0b111c !important;
    border-color:#263044 !important;
}

html[data-theme="dark"] #add-device .previewRows b{
    color:#ffffff !important;
}

html[data-theme="dark"] #add-device .deviceServerInfo a,
html[data-theme="dark"] #add-device .devicePreviewCard a{
    color:#8b78ff !important;
}

/* ============================================================
   ADD DEVICE — FORCE CONSISTENT DARK PAGE
   ============================================================ */

#add-device{
    color:#f5f7fb !important;
}

/* ALL MAIN CARDS */
#add-device .deviceServerInfo,
#add-device .deviceCreateCard,
#add-device .devicePreviewCard{
    background:#111823 !important;
    border:1px solid #293345 !important;
    color:#f5f7fb !important;
    box-shadow:none !important;
}

/* TITLES + NORMAL TEXT */
#add-device h1,
#add-device h2,
#add-device h3,
#add-device h4,
#add-device strong,
#add-device b{
    color:#f7f9fc !important;
}

#add-device label,
#add-device .hint,
#add-device small,
#add-device .deviceCreateCard span,
#add-device .devicePreviewCard span{
    color:#9da9ba !important;
}

/* INPUTS + SELECTS */
#add-device input,
#add-device select,
#add-device textarea{
    background:#0c131e !important;
    border:1px solid #303a4d !important;
    color:#f7f9fc !important;
}

#add-device input::placeholder,
#add-device textarea::placeholder{
    color:#7f8b9d !important;
}

/* SERVER SELECT */
#add-device .deviceServerPicker select{
    background:#111823 !important;
    border-color:#7657ff !important;
    color:#ffffff !important;
}

/* PLAN / CONNECTION / ACCESS CARDS */
#add-device .planChoice,
#add-device .accessType{
    background:#0e1621 !important;
    border:1px solid #2c3748 !important;
    color:#dce3ec !important;
}

#add-device .planChoice:hover,
#add-device .accessType:hover{
    border-color:#7559e8 !important;
    background:#171b2c !important;
}

#add-device .planChoice.active,
#add-device .planChoice.selected,
#add-device .accessType.active,
#add-device .accessType.selected{
    background:#241b3d !important;
    border-color:#865cff !important;
    color:#ffffff !important;
}

/* TRIAL COLORS */
#add-device .planChoice b{
    color:#65da75 !important;
}

#add-device .planChoice.active b,
#add-device .planChoice.selected b{
    color:#bd9cff !important;
}

/* PREVIEW */
#add-device .previewRows,
#add-device .previewRows > div{
    background:#090f18 !important;
    border-color:#273244 !important;
}

#add-device .previewRows span{
    color:#8996a9 !important;
}

#add-device .previewRows b{
    color:#ffffff !important;
}

/* SERVER URL */
#add-device a,
#add-device .deviceServerInfo a,
#add-device .devicePreviewCard a{
    color:#9b7cff !important;
}

/* READY */
#add-device .ready,
#add-device .deviceReady,
#add-device [class*="ready"]{
    color:#62dc72 !important;
}

/* DIVIDERS */
#add-device hr,
#add-device .deviceDivider{
    border-color:#273244 !important;
    background:#273244 !important;
}

/* AUTOGENERATED VALUES */
#add-device .deviceCreateCard code,
#add-device .devicePreviewCard code{
    color:#eef2f8 !important;
    background:transparent !important;
}

/* ADD DEVICE — FINAL DARK OVERRIDE */
#add-device .deviceServerInfo,
#add-device .deviceCreateCard,
#add-device .devicePreviewCard,
#add-device .deviceStep,
#add-device .deviceSection,
#add-device .deviceFormGrid,
#add-device .previewServer,
#add-device .previewBox{
    background:#111823 !important;
    color:#f4f7fb !important;
    border-color:#2b3548 !important;
}

#add-device input,
#add-device select,
#add-device textarea,
#add-device .planChoice,
#add-device .accessType{
    background:#0c131e !important;
    color:#f4f7fb !important;
    border-color:#303b50 !important;
}

#add-device label,
#add-device small,
#add-device .hint{
    color:#9da9ba !important;
}

#add-device h2,
#add-device h3,
#add-device h4,
#add-device b,
#add-device strong{
    color:#ffffff !important;
}

#add-device .planChoice.selected,
#add-device .planChoice.active,
#add-device .accessType.selected,
#add-device .accessType.active{
    background:#241b3d !important;
    border-color:#865cff !important;
}

#add-device .previewRows,
#add-device .previewRows > div{
    background:#080e17 !important;
    color:#ffffff !important;
    border-color:#283348 !important;
}

#add-device a{
    color:#a184ff !important;
}

#add-device .deviceServerPicker select{
    background:#111823 !important;
    color:#fff !important;
    border-color:#7657ff !important;
}

/* =========================================================
   ADD DEVICE — REAL FINAL COLOR OVERRIDE
   ========================================================= */

html[data-theme] #add-device .deviceServerInfo,
html[data-theme] #add-device .deviceCreateCard,
html[data-theme] #add-device .devicePreviewCard{
    background:#111823 !important;
    color:#f5f7fb !important;
    border-color:#2a3548 !important;
}

/* FORM INPUTS */
html[data-theme] #add-device .deviceFormGrid input,
html[data-theme] #add-device .deviceFormGrid select,
html[data-theme] #add-device input,
html[data-theme] #add-device textarea{
    background:#0c131e !important;
    color:#f5f7fb !important;
    border-color:#303b50 !important;
}

html[data-theme] #add-device input::placeholder{
    color:#8591a3 !important;
}

/* SERVER SELECT */
html[data-theme] #add-device .deviceServerPicker select{
    background:#111823 !important;
    color:#ffffff !important;
    border-color:#7657ff !important;
    appearance:none !important;
    -webkit-appearance:none !important;
}

/* SUBSCRIPTION + ACCESS */
html[data-theme] #add-device .planChoice,
html[data-theme] #add-device .accessType{
    background:#0d1520 !important;
    color:#e8edf5 !important;
    border-color:#2d394c !important;
}

/* SELECTED */
html[data-theme] #add-device .planChoice.active,
html[data-theme] #add-device .planChoice.selected,
html[data-theme] #add-device .accessType.active,
html[data-theme] #add-device .accessType.selected{
    background:#241b3d !important;
    border-color:#865cff !important;
    color:#ffffff !important;
}

/* LABELS */
html[data-theme] #add-device label,
html[data-theme] #add-device .hint,
html[data-theme] #add-device small,
html[data-theme] #add-device .previewRows span{
    color:#9da9ba !important;
}

/* HEADINGS + VALUES */
html[data-theme] #add-device h2,
html[data-theme] #add-device h3,
html[data-theme] #add-device h4,
html[data-theme] #add-device b,
html[data-theme] #add-device strong{
    color:#ffffff !important;
}

/* PREVIEW */
html[data-theme] #add-device .previewRows,
html[data-theme] #add-device .previewRows > div{
    background:#080e17 !important;
    border-color:#283448 !important;
}

html[data-theme] #add-device .previewRows b{
    color:#ffffff !important;
}

/* LINKS */
html[data-theme] #add-device a{
    color:#a584ff !important;
}

/* TRIAL + READY */
html[data-theme] #add-device .planChoice b{
    color:#63db72 !important;
}

html[data-theme] #add-device [class*="ready"],
html[data-theme] #add-device [class*="Ready"]{
    color:#63db72 !important;
}

/* ============================================================
   LIST DEVICES — FORCE CONSISTENT DARK THEME
   ============================================================ */

html[data-theme] :is(#list-devices,#devices,.deviceListPage,.devicesPage){
    color:#f4f7fb !important;
}

/* SEARCH + FILTER CONTROLS */
html[data-theme] :is(#list-devices,#devices,.deviceListPage,.devicesPage) input,
html[data-theme] :is(#list-devices,#devices,.deviceListPage,.devicesPage) select{
    background:#0c131e !important;
    color:#f4f7fb !important;
    border-color:#303b50 !important;
}

html[data-theme] :is(#list-devices,#devices,.deviceListPage,.devicesPage) input::placeholder{
    color:#7f8b9d !important;
}

/* SUMMARY CARDS */
html[data-theme] :is(#list-devices,#devices,.deviceListPage,.devicesPage)
:is(.statCard,.deviceStat,.summaryCard,.metricCard){
    background:#111823 !important;
    color:#ffffff !important;
    border-color:#293548 !important;
    box-shadow:none !important;
}

/* MAIN LIST / TABLE CONTAINER */
html[data-theme] :is(#list-devices,#devices,.deviceListPage,.devicesPage)
:is(.deviceTable,.devicesTable,.tableCard,.tableWrap,.listCard){
    background:#111823 !important;
    color:#f4f7fb !important;
    border-color:#293548 !important;
}

/* TABLE */
html[data-theme] :is(#list-devices,#devices,.deviceListPage,.devicesPage) table{
    background:#111823 !important;
    color:#f4f7fb !important;
    border-color:#293548 !important;
}

html[data-theme] :is(#list-devices,#devices,.deviceListPage,.devicesPage) thead,
html[data-theme] :is(#list-devices,#devices,.deviceListPage,.devicesPage) th{
    background:#0d1520 !important;
    color:#9da9ba !important;
    border-color:#293548 !important;
}

html[data-theme] :is(#list-devices,#devices,.deviceListPage,.devicesPage) tbody,
html[data-theme] :is(#list-devices,#devices,.deviceListPage,.devicesPage) tr,
html[data-theme] :is(#list-devices,#devices,.deviceListPage,.devicesPage) td{
    background:#111823 !important;
    color:#e8edf5 !important;
    border-color:#253044 !important;
}

/* ROW HOVER */
html[data-theme] :is(#list-devices,#devices,.deviceListPage,.devicesPage) tbody tr:hover td{
    background:#151e2c !important;
}

/* NORMAL ACTION BUTTONS */
html[data-theme] :is(#list-devices,#devices,.deviceListPage,.devicesPage)
button:not(.primary):not(.danger){
    background:#151e2b !important;
    color:#eef2f8 !important;
    border-color:#2c384b !important;
}

/* ADD DEVICE / PRIMARY */
html[data-theme] :is(#list-devices,#devices,.deviceListPage,.devicesPage)
:is(.primary,.addDeviceBtn){
    background:linear-gradient(135deg,#6d43e8,#8b46ef) !important;
    color:#ffffff !important;
    border-color:#9369ff !important;
}

/* DELETE */
html[data-theme] :is(#list-devices,#devices,.deviceListPage,.devicesPage)
:is(.danger,.deleteBtn){
    background:#35171c !important;
    color:#ff6969 !important;
    border-color:#63262e !important;
}

/* STATUS COLORS */
html[data-theme] :is(#list-devices,#devices,.deviceListPage,.devicesPage)
:is(.active,.statusActive){
    background:#12331d !important;
    color:#62dc72 !important;
}

html[data-theme] :is(#list-devices,#devices,.deviceListPage,.devicesPage)
:is(.expired,.statusExpired){
    background:#35171c !important;
    color:#ff6969 !important;
}

html[data-theme] :is(#list-devices,#devices,.deviceListPage,.devicesPage)
:is(.blocked,.statusBlocked){
    background:#252d39 !important;
    color:#b2bdcb !important;
}

/* SECONDARY TEXT */
html[data-theme] :is(#list-devices,#devices,.deviceListPage,.devicesPage)
:is(.hint,small,.muted){
    color:#8f9bae !important;
}


/* ============================================================
   MEXAMO — LIST DEVICES REAL FINAL DARK UI
   ============================================================ */

/* WHOLE PAGE */
html[data-theme] #list-devices{
    background:transparent !important;
    color:#f5f7ff !important;
}


/* ------------------------------------------------------------
   TOP SEARCH + STATUS FILTER
   ------------------------------------------------------------ */

html[data-theme] #list-devices .deviceListTools input,
html[data-theme] #list-devices .deviceListTools select{
    background:#111827 !important;
    color:#f5f7ff !important;
    border:1px solid #303b52 !important;
    box-shadow:none !important;
}

html[data-theme] #list-devices .deviceListTools input::placeholder{
    color:#8f9bb0 !important;
}


/* ------------------------------------------------------------
   FIVE STAT CARDS
   ------------------------------------------------------------ */

html[data-theme] #list-devices .deviceStats{
    background:transparent !important;
}

html[data-theme] #list-devices .deviceStats > div{
    background:linear-gradient(180deg,#182132 0%,#121a28 100%) !important;
    border:1px solid #334158 !important;
    color:#ffffff !important;
    box-shadow:
        0 10px 28px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.035) !important;
}

html[data-theme] #list-devices .deviceStats > div:hover{
    border-color:#7657ff !important;
    transform:translateY(-1px);
}

html[data-theme] #list-devices .deviceStats b{
    color:#ffffff !important;
}

html[data-theme] #list-devices .deviceStats span{
    color:#9eabc0 !important;
}


/* ------------------------------------------------------------
   MAIN DEVICE LIST CONTAINER
   ------------------------------------------------------------ */

html[data-theme] #list-devices .deviceTableWrap{
    background:#111827 !important;
    border:1px solid #303b52 !important;
    border-radius:18px !important;
    color:#f5f7ff !important;
    box-shadow:0 18px 45px rgba(0,0,0,.22) !important;
    overflow:hidden !important;
}


/* Everything dynamically generated inside device list */
html[data-theme] #list-devices .deviceTableWrap > div{
    background:#151e2d !important;
    color:#f5f7ff !important;
    border-color:#2d394e !important;
}


/* Rows */
html[data-theme] #list-devices .deviceTableWrap .item,
html[data-theme] #list-devices .deviceTableWrap [class*="deviceRow"],
html[data-theme] #list-devices .deviceTableWrap [class*="DeviceRow"]{
    background:#151e2d !important;
    color:#f5f7ff !important;
    border:1px solid #2d394e !important;
}


/* Any nested white cards */
html[data-theme] #list-devices .deviceTableWrap
:is(
    .card,
    .panel,
    .deviceCard,
    .deviceInfo,
    .deviceData,
    .deviceActions
){
    background:#151e2d !important;
    color:#f5f7ff !important;
    border-color:#2d394e !important;
}


/* ------------------------------------------------------------
   TEXT
   ------------------------------------------------------------ */

html[data-theme] #list-devices .deviceTableWrap b,
html[data-theme] #list-devices .deviceTableWrap strong,
html[data-theme] #list-devices .deviceTableWrap h3,
html[data-theme] #list-devices .deviceTableWrap h4{
    color:#ffffff !important;
}

html[data-theme] #list-devices .deviceTableWrap span,
html[data-theme] #list-devices .deviceTableWrap small,
html[data-theme] #list-devices .deviceTableWrap p{
    color:#9da9bc !important;
}

html[data-theme] #list-devices .deviceTableWrap a{
    color:#9b87ff !important;
}


/* ------------------------------------------------------------
   TABLE — IF RENDERER USES TABLE
   ------------------------------------------------------------ */

html[data-theme] #list-devices .deviceTableWrap table{
    width:100% !important;
    background:#111827 !important;
    color:#f5f7ff !important;
    border-collapse:collapse !important;
}

html[data-theme] #list-devices .deviceTableWrap thead,
html[data-theme] #list-devices .deviceTableWrap th{
    background:#0d1421 !important;
    color:#9da9bc !important;
    border-color:#2d394e !important;
}

html[data-theme] #list-devices .deviceTableWrap tbody,
html[data-theme] #list-devices .deviceTableWrap tr,
html[data-theme] #list-devices .deviceTableWrap td{
    background:#151e2d !important;
    color:#f5f7ff !important;
    border-color:#2d394e !important;
}

html[data-theme] #list-devices .deviceTableWrap tbody tr:hover td{
    background:#1a2435 !important;
}


/* ------------------------------------------------------------
   ACTION BUTTONS
   ------------------------------------------------------------ */

html[data-theme] #list-devices .deviceTableWrap button{
    background:#101725 !important;
    color:#f5f7ff !important;
    border:1px solid #344158 !important;
    box-shadow:none !important;
}

html[data-theme] #list-devices .deviceTableWrap button:hover{
    background:#1b2540 !important;
    border-color:#7657ff !important;
    color:#ffffff !important;
}


/* DELETE */
html[data-theme] #list-devices .deviceTableWrap button.danger,
html[data-theme] #list-devices .deviceTableWrap .danger{
    background:#35151d !important;
    color:#ff8999 !important;
    border-color:#682634 !important;
}

html[data-theme] #list-devices .deviceTableWrap button.danger:hover{
    background:#4a1924 !important;
    color:#ffb0ba !important;
}


/* ------------------------------------------------------------
   STATUS PILLS
   ------------------------------------------------------------ */

html[data-theme] #list-devices .pill.ok,
html[data-theme] #list-devices .statusActive{
    background:#123524 !important;
    color:#76e49a !important;
    border-color:#245b3c !important;
}

html[data-theme] #list-devices .pill.dead,
html[data-theme] #list-devices .statusExpired{
    background:#3b1820 !important;
    color:#ff8999 !important;
    border-color:#692934 !important;
}

html[data-theme] #list-devices .pill.unknown{
    background:#2b2145 !important;
    color:#b9a6ff !important;
    border-color:#55418c !important;
}


/* ------------------------------------------------------------
   ADD DEVICE BUTTON
   ------------------------------------------------------------ */

html[data-theme] #list-devices .deviceListTools .primary{
    background:linear-gradient(135deg,#7657ff,#a74cff) !important;
    border-color:#8a67ff !important;
    color:#ffffff !important;
    box-shadow:0 8px 22px rgba(118,87,255,.25) !important;
}


/* ------------------------------------------------------------
   HEADINGS
   ------------------------------------------------------------ */

html[data-theme] #list-devices h2{
    color:#ffffff !important;
}

html[data-theme] #list-devices .hint{
    color:#98a5ba !important;
}

html[data-theme] #list-devices .eyebrow{
    color:#8c72ff !important;
}



/* ============================================================
   MEXAMO LIST DEVICES — FINAL COLOR MATCH
   ============================================================ */

/* STAT CARDS */
html[data-theme] #list-devices .deviceStats > div{
    background:#111827 !important;
    border:1px solid #2b354a !important;
    color:#ffffff !important;
    box-shadow:0 8px 22px rgba(0,0,0,.20) !important;
}

html[data-theme] #list-devices .deviceStats > div:hover{
    background:#151d2d !important;
    border-color:#7657ff !important;
}

html[data-theme] #list-devices .deviceStats b{
    color:#ffffff !important;
}

html[data-theme] #list-devices .deviceStats span{
    color:#929db0 !important;
}


/* MAIN TABLE CONTAINER */
html[data-theme] #list-devices .deviceTableWrap{
    background:#0d1421 !important;
    border:1px solid #2b354a !important;
    color:#f6f7fb !important;
}


/* TABLE */
html[data-theme] #list-devices .deviceTableWrap table{
    background:#0d1421 !important;
    color:#f6f7fb !important;
}


/* HEADER — REMOVE WHITE */
html[data-theme] #list-devices .deviceTableWrap thead,
html[data-theme] #list-devices .deviceTableWrap thead tr,
html[data-theme] #list-devices .deviceTableWrap thead th{
    background:#0a101b !important;
    color:#8f9bb0 !important;
    border-color:#263146 !important;
}


/* ROWS — REMOVE BLUE/WHITE */
html[data-theme] #list-devices .deviceTableWrap tbody{
    background:#0f1623 !important;
}

html[data-theme] #list-devices .deviceTableWrap tbody tr{
    background:#111927 !important;
    color:#f6f7fb !important;
}

html[data-theme] #list-devices .deviceTableWrap tbody tr:nth-child(even){
    background:#0f1724 !important;
}

html[data-theme] #list-devices .deviceTableWrap tbody td{
    background:inherit !important;
    color:#f6f7fb !important;
    border-color:#29354a !important;
}


/* ROW HOVER */
html[data-theme] #list-devices .deviceTableWrap tbody tr:hover{
    background:#182136 !important;
}


/* CUSTOMER / USER / PACKAGE / DATE */
html[data-theme] #list-devices .deviceTableWrap td,
html[data-theme] #list-devices .deviceTableWrap td b,
html[data-theme] #list-devices .deviceTableWrap td strong{
    color:#f5f7ff !important;
}


/* SECONDARY TEXT */
html[data-theme] #list-devices .deviceTableWrap small,
html[data-theme] #list-devices .deviceTableWrap .muted{
    color:#8e9aaf !important;
}


/* LINKS */
html[data-theme] #list-devices .deviceTableWrap a{
    color:#9a86ff !important;
}


/* ACTION BUTTONS */
html[data-theme] #list-devices .deviceTableWrap button{
    background:#151c2b !important;
    color:#ffffff !important;
    border:1px solid #36425a !important;
}

html[data-theme] #list-devices .deviceTableWrap button:hover{
    background:#211b3d !important;
    border-color:#7657ff !important;
    color:#ffffff !important;
}


/* DELETE */
html[data-theme] #list-devices .deviceTableWrap button.danger,
html[data-theme] #list-devices .deviceTableWrap .danger{
    background:#3a1720 !important;
    border-color:#71303e !important;
    color:#ff8f9e !important;
}


/* ACTIVE */
html[data-theme] #list-devices .pill.ok{
    background:#143524 !important;
    border:1px solid #286044 !important;
    color:#7de6a0 !important;
}


/* TRIAL */
html[data-theme] #list-devices .pill.unknown{
    background:#241d3b !important;
    border:1px solid #554287 !important;
    color:#b7a4ff !important;
}


/* SEARCH + STATUS */
html[data-theme] #list-devices .deviceListTools input,
html[data-theme] #list-devices .deviceListTools select{
    background:#0d1421 !important;
    border:1px solid #303b50 !important;
    color:#ffffff !important;
}

html[data-theme] #list-devices .deviceListTools input:focus,
html[data-theme] #list-devices .deviceListTools select:focus{
    border-color:#7657ff !important;
    box-shadow:0 0 0 3px rgba(118,87,255,.13) !important;
}


/* ADD DEVICE */
html[data-theme] #list-devices .deviceListTools .primary{
    background:linear-gradient(135deg,#7657ff,#a64cff) !important;
    border-color:#8d6aff !important;
    color:#ffffff !important;
}


/* HARD OVERRIDE:
   prevents generic table styles from painting white/blue */
html[data-theme] #list-devices #subscriptionRows table thead th{
    background:#0a101b !important;
}

html[data-theme] #list-devices #subscriptionRows table tbody tr{
    background:#111927 !important;
}

html[data-theme] #list-devices #subscriptionRows table tbody tr:nth-child(even){
    background:#0f1724 !important;
}

html[data-theme] #list-devices #subscriptionRows table tbody td{
    background:transparent !important;
}


/* LIST DEVICES — REMOVE LAST WHITE COLORS */

/* table/list header */
html body #list-devices #subscriptionRows
:is(
  thead,
  thead tr,
  thead th,
  .deviceTableHead,
  .deviceTableHeader,
  [class*="TableHead"],
  [class*="tableHead"],
  [class*="deviceHead"]
){
    background:#090f19 !important;
    color:#929db0 !important;
    border-color:#29354a !important;
}

/* rows */
html body #list-devices #subscriptionRows
:is(
  tbody tr,
  .deviceRow,
  [class*="deviceRow"],
  [class*="DeviceRow"]
){
    background:#101824 !important;
    color:#f5f7fb !important;
    border-color:#29354a !important;
}

/* cells */
html body #list-devices #subscriptionRows
:is(
  td,
  .deviceCell,
  [class*="deviceCell"],
  [class*="DeviceCell"]
){
    background:transparent !important;
    color:#f5f7fb !important;
}

/* USERNAME — remove white pill */
html body #list-devices #subscriptionRows code,
html body #list-devices #subscriptionRows .username,
html body #list-devices #subscriptionRows [class*="username"],
html body #list-devices #subscriptionRows [class*="Username"]{
    background:#171f2d !important;
    color:#b9a7ff !important;
    border:1px solid #354159 !important;
    box-shadow:none !important;
}

/* alternating rows */
html body #list-devices #subscriptionRows tbody tr:nth-child(even){
    background:#0d1521 !important;
}

html body #list-devices #subscriptionRows tbody tr:hover{
    background:#182236 !important;
}

/* ADD DEVICE — CATEGORY SELECTOR */

html[data-theme] #add-device #mexCategorySelectorWrap{
    margin-top:18px !important;
    padding-top:18px !important;
    border-top:1px solid #293448 !important;
}

html[data-theme] #add-device .mexCategoryTitle h3{
    margin:4px 0 !important;
    color:#fff !important;
}

html[data-theme] #add-device .mexCategoryTitle p{
    margin:0 0 14px !important;
    color:#94a0b3 !important;
    font-size:11px !important;
}

html[data-theme] #add-device #mexCategorySelector{
    display:grid !important;
    gap:12px !important;
}

html[data-theme] #add-device .mexCategoryGroup{
    background:#0d1521 !important;
    border:1px solid #2b374b !important;
    border-radius:13px !important;
    padding:12px !important;
}

html[data-theme] #add-device .mexCategoryHead{
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    gap:12px !important;
}

html[data-theme] #add-device .mexCategoryHead b{
    color:#fff !important;
}

html[data-theme] #add-device .mexCategoryHead span{
    display:block !important;
    color:#8996aa !important;
    font-size:9px !important;
}

html[data-theme] #add-device .mexCategoryActions{
    display:flex !important;
    gap:6px !important;
}

html[data-theme] #add-device .mexCategoryActions button{
    background:#161f2e !important;
    border:1px solid #36435a !important;
    color:#e9edf5 !important;
    padding:6px 9px !important;
    border-radius:7px !important;
    font-size:9px !important;
}

html[data-theme] #add-device .mexCategorySearch{
    margin-top:10px !important;
}

html[data-theme] #add-device .mexCategorySearch input{
    width:100% !important;
    background:#090f18 !important;
    color:#fff !important;
    border:1px solid #2d394c !important;
}

html[data-theme] #add-device .mexCategoryGrid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
    max-height:190px !important;
    overflow:auto !important;
    margin-top:9px !important;
}

html[data-theme] #add-device .mexCategoryItem{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    padding:8px 9px !important;
    background:#111a28 !important;
    border:1px solid #29364a !important;
    border-radius:8px !important;
    color:#dce3ec !important;
    cursor:pointer !important;
}

html[data-theme] #add-device .mexCategoryItem:hover{
    border-color:#7657ff !important;
    background:#181d31 !important;
}

html[data-theme] #add-device .mexCategoryItem input{
    width:14px !important;
    height:14px !important;
    min-height:14px !important;
    margin:0 !important;
    accent-color:#7657ff !important;
}

html[data-theme] #add-device .mexCategoryItem span{
    color:#dfe6ef !important;
    font-size:10px !important;
}

html[data-theme] #add-device .mexCategoryWaiting,
html[data-theme] #add-device .mexCategoryEmpty{
    padding:12px !important;
    background:#0d1521 !important;
    color:#8f9bae !important;
    border:1px dashed #334056 !important;
    border-radius:10px !important;
}

html[data-theme] #add-device .mexCategoryError{
    padding:12px !important;
    background:#35171d !important;
    color:#ff9aa8 !important;
    border:1px solid #652832 !important;
    border-radius:10px !important;
}

@media(max-width:900px){
    html[data-theme] #add-device .mexCategoryGrid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

@media(max-width:600px){
    html[data-theme] #add-device .mexCategoryGrid{
        grid-template-columns:1fr !important;
    }
}