:root{
  --bg:#f5f7fb;
  --panel:#ffffff;
  --text:#172033;
  --muted:#7b8798;
  --line:#e7ebf2;
  --primary:#6254f3;
  --primary2:#2f80ed;
  --success:#16a34a;
  --danger:#dc2626;
  --shadow:0 12px 32px rgba(20,28,45,.08);
  --radius:18px;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:Inter,Arial,Helvetica,sans-serif;
  background:var(--bg);
  color:var(--text);
}

.app{display:flex;min-height:100vh}

.sidebar{
  width:270px;
  background:linear-gradient(180deg,#151a33,#0f1328);
  color:white;
  padding:24px 18px;
  position:sticky;
  top:0;
  height:100vh;
}

.logo{
  font-size:23px;
  font-weight:800;
  letter-spacing:.3px;
  margin:4px 8px 30px;
}

.nav a{
  display:flex;
  align-items:center;
  gap:10px;
  color:#c9d2e3;
  text-decoration:none;
  padding:13px 14px;
  border-radius:14px;
  margin-bottom:7px;
  font-weight:600;
}

.nav a:hover{
  background:rgba(255,255,255,.08);
  color:white;
}

.nav a.active{
  background:linear-gradient(90deg,var(--primary),var(--primary2));
  color:white;
  box-shadow:0 10px 24px rgba(79,70,229,.32);
}

.main{
  flex:1;
  padding:26px;
  overflow:auto;
}

.topbar{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
  border:1px solid rgba(231,235,242,.8);
  border-radius:var(--radius);
  padding:22px 24px;
  margin-bottom:22px;
  box-shadow:var(--shadow);
}

h1{margin:0 0 6px;font-size:28px}
h2{margin:0 0 16px;font-size:20px}
.muted{color:var(--muted);font-size:14px}

.card,.stat{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.card{padding:22px;margin-bottom:22px}
.stat{padding:20px}

.stat{
  color:var(--muted);
  font-weight:700;
}

.stat b{
  display:block;
  color:var(--text);
  font-size:30px;
  margin-top:10px;
}

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

.search{
  display:flex;
  gap:10px;
  margin-bottom:18px;
}

.search input{
  height:44px;
  border:1px solid var(--line);
  background:#fbfcff;
  border-radius:13px;
  padding:0 14px;
  min-width:340px;
  outline:none;
}

.search input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(98,84,243,.12);
}

.search button{
  height:44px;
  border:0;
  border-radius:13px;
  background:linear-gradient(90deg,var(--primary),var(--primary2));
  color:white;
  padding:0 20px;
  font-weight:700;
  cursor:pointer;
}

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
}

th{
  text-align:left;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--muted);
  background:#f8faff;
  padding:14px;
  border-bottom:1px solid var(--line);
}

td{
  padding:15px 14px;
  border-bottom:1px solid var(--line);
  font-size:14px;
}

tr:hover td{background:#fbfcff}

.badge{
  display:inline-flex;
  align-items:center;
  padding:6px 11px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
}

.online{background:#dcfce7;color:#166534}
.offline{background:#fee2e2;color:#991b1b}

.actions{position:relative}
.actions summary{
  list-style:none;
  cursor:pointer;
  color:var(--primary);
  font-weight:800;
}

.actions summary::-webkit-details-marker{display:none}

.actions div{
  position:absolute;
  right:0;
  top:26px;
  background:white;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 18px 40px rgba(20,28,45,.16);
  min-width:170px;
  z-index:50;
  overflow:hidden;
}

.actions a{
  display:block;
  padding:12px 14px;
  text-decoration:none;
  color:var(--text);
  font-weight:600;
}

.actions a:hover{background:#f6f7fb}

.tabs{
  display:flex;
  gap:9px;
  margin-bottom:18px;
  flex-wrap:wrap;
}

.tabs a{
  padding:11px 15px;
  background:white;
  border:1px solid var(--line);
  border-radius:13px;
  text-decoration:none;
  color:#475569;
  font-weight:700;
}

.tabs a.active{
  background:linear-gradient(90deg,var(--primary),var(--primary2));
  color:white;
  border-color:transparent;
}

@media(max-width:1100px){
  .grid{grid-template-columns:repeat(2,1fr)}
}

.subscriber-cell{
  display:flex;
  align-items:center;
  gap:13px;
}

.avatar{
  width:42px;
  height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:white;
  font-weight:900;
}

.strong{
  font-weight:800;
  color:var(--text);
}

.money{
  font-weight:900;
  font-size:16px;
  color:#0f766e;
}

.warning{
  background:#fef3c7;
  color:#92400e;
  margin-left:5px;
}

.danger{
  background:#fee2e2;
  color:#991b1b;
  margin-left:5px;
}

.usagebar{
  margin-top:7px;
  width:110px;
  height:7px;
  background:#edf1f7;
  border-radius:99px;
  overflow:hidden;
}

.usagebar span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--primary),var(--primary2));
  border-radius:99px;
}

/* Radius Pro Subscribers Cards v1 */

.subscriber-toolbar{
  margin-top:22px;
}

.subscriber-filters{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}

.subscriber-filters input,
.subscriber-filters select{
  height:46px;
  border:1px solid var(--line);
  background:#fbfcff;
  border-radius:14px;
  padding:0 14px;
  outline:none;
  min-width:220px;
  color:var(--text);
}

.subscriber-filters input{
  min-width:380px;
}

.subscriber-filters input:focus,
.subscriber-filters select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(98,84,243,.12);
}

.subscriber-filters button{
  height:46px;
  border:0;
  border-radius:14px;
  background:linear-gradient(90deg,var(--primary),var(--primary2));
  color:white;
  padding:0 22px;
  font-weight:800;
  cursor:pointer;
}

.subscriber-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:18px;
}

.subscriber-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:18px;
}

.subscriber-card:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 42px rgba(20,28,45,.11);
}

.subscriber-head,
.subscriber-left,
.subscriber-foot,
.usage-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.subscriber-left{
  justify-content:flex-start;
}

.subscriber-head h3{
  margin:0 0 4px;
  font-size:18px;
}

.subscriber-body{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}

.info-box{
  background:#f8faff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:13px;
  min-height:74px;
}

.info-box.wide{
  grid-column:span 2;
}

.info-box span{
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:7px;
}

.info-box b{
  display:block;
  font-size:14px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.subscriber-usage{
  margin-top:16px;
  background:#fbfcff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
}

.usage-top span{
  color:var(--muted);
  font-weight:800;
  font-size:13px;
}

.subscriber-foot{
  margin-top:14px;
  color:var(--muted);
  font-size:13px;
  flex-wrap:wrap;
}

.subscriber-alerts{
  display:flex;
  gap:8px;
  margin-top:12px;
}

.warning{
  background:#ffedd5;
  color:#9a3412;
}

.danger{
  background:#fee2e2;
  color:#991b1b;
}

.money{
  color:#0f766e;
}

@media(max-width:1300px){
  .subscriber-list{
    grid-template-columns:1fr;
  }
}

@media(max-width:760px){
  .subscriber-filters input,
  .subscriber-filters select,
  .subscriber-filters button{
    width:100%;
    min-width:0;
  }

  .subscriber-body{
    grid-template-columns:1fr;
  }

  .info-box.wide{
    grid-column:span 1;
  }
}

/* =========================================================
   Radius Pro Design System v1
   Reusable UI foundation
========================================================= */

.rp-section{
  margin-top:22px;
}

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

.rp-section-title h2{
  margin:0;
  font-size:20px;
}

.rp-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 12px;
  border-radius:999px;
  background:#f8faff;
  border:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}

.rp-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow);
}

.rp-card-pad{
  padding:18px;
}

.rp-btn{
  height:44px;
  border:0;
  border-radius:14px;
  padding:0 18px;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.rp-btn-primary{
  background:linear-gradient(90deg,var(--primary),var(--primary2));
  color:white;
}

.rp-btn-soft{
  background:#f8faff;
  border:1px solid var(--line);
  color:var(--text);
}

.rp-input,
.rp-select{
  height:46px;
  border:1px solid var(--line);
  background:#fbfcff;
  border-radius:14px;
  padding:0 14px;
  outline:none;
  color:var(--text);
}

.rp-input:focus,
.rp-select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(98,84,243,.12);
}

.rp-kv{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:8px;
  font-size:14px;
}

.rp-kv span{
  color:var(--muted);
  font-weight:700;
}

.rp-kv b{
  color:var(--text);
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.rp-progress{
  height:9px;
  background:#edf1f7;
  border-radius:999px;
  overflow:hidden;
}

.rp-progress span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--primary),var(--primary2));
  border-radius:999px;
}

.rp-empty{
  text-align:center;
  padding:50px 20px;
  color:var(--muted);
}

.rp-empty b{
  display:block;
  color:var(--text);
  font-size:18px;
  margin-bottom:8px;
}

.rp-meta{
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}

.rp-divider{
  height:1px;
  background:var(--line);
  margin:16px 0;
}

.rp-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  display:inline-block;
  background:var(--muted);
}

.rp-dot.green{background:var(--success)}
.rp-dot.red{background:var(--danger)}
.rp-dot.orange{background:#f97316}
.rp-dot.blue{background:var(--primary2)}

@media(max-width:760px){
  .rp-kv{
    grid-template-columns:1fr;
  }
}

/* Radius Pro Subscribers V2 */
.subscriber-v2-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
.subscriber-v2-card{background:linear-gradient(180deg,#ffffff,#fbfcff);border:1px solid var(--line);border-radius:26px;box-shadow:0 14px 34px rgba(20,28,45,.08);padding:20px;transition:.16s ease}
.subscriber-v2-card:hover{transform:translateY(-2px);box-shadow:0 20px 46px rgba(20,28,45,.12)}
.sub-v2-main{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px}
.sub-v2-identity{display:flex;align-items:center;gap:14px;min-width:0}
.sub-v2-identity h3{margin:0 0 4px;font-size:18px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sub-v2-status{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.sub-v2-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sub-v2-item{min-width:0}
.sub-v2-item span{display:block;color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.sub-v2-item b{display:block;color:var(--text);font-size:14px;font-weight:850;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sub-v2-usage{margin-top:18px;padding:14px;border-radius:18px;background:#f8faff;border:1px solid var(--line)}
.sub-v2-footer{margin-top:13px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:12px;font-weight:800}
.subscriber-v2-card .actions summary{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#f8faff;border:1px solid var(--line)}
.subscriber-v2-card .actions summary:hover{background:#eef2ff}
@media(max-width:1350px){.subscriber-v2-list{grid-template-columns:1fr}}
@media(max-width:760px){.sub-v2-main{grid-template-columns:1fr auto}.sub-v2-status{grid-column:1 / -1;justify-content:flex-start}.sub-v2-grid{grid-template-columns:1fr}}

/* FORCE FIX - Radius Pro V2 visible styles */
.rp-section{margin-top:22px}
.rp-section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.rp-section-title h2{margin:0;font-size:28px}
.rp-pill{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;background:#f8faff;border:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:800}
.rp-card{background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}
.rp-card-pad{padding:18px}
.rp-btn{height:46px;border:0;border-radius:14px;padding:0 18px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.rp-btn-primary{background:linear-gradient(90deg,var(--primary),var(--primary2));color:white}
.rp-btn-soft{background:#f8faff;border:1px solid var(--line);color:var(--text)}
.rp-input,.rp-select{height:46px;border:1px solid var(--line);background:#fbfcff;border-radius:14px;padding:0 14px;outline:none;color:var(--text)}
.rp-progress{height:9px;background:#edf1f7;border-radius:999px;overflow:hidden}
.rp-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--primary2));border-radius:999px}
.rp-meta{color:var(--muted);font-size:13px;font-weight:700}
.rp-divider{height:1px;background:var(--line);margin:16px 0}
.rp-dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--muted)}
.rp-dot.green{background:var(--success)}
.rp-dot.red{background:var(--danger)}

.subscriber-toolbar{margin-top:0}
.subscriber-filters{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.subscriber-filters input{min-width:380px}
.subscriber-v2-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
.subscriber-v2-card{background:linear-gradient(180deg,#ffffff,#fbfcff);border:1px solid var(--line);border-radius:26px;box-shadow:0 14px 34px rgba(20,28,45,.08);padding:20px;transition:.16s ease}
.subscriber-v2-card:hover{transform:translateY(-2px);box-shadow:0 20px 46px rgba(20,28,45,.12)}
.sub-v2-main{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px}
.sub-v2-identity{display:flex;align-items:center;gap:14px;min-width:0}
.sub-v2-identity h3{margin:0 0 4px;font-size:18px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sub-v2-status{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.sub-v2-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sub-v2-item{min-width:0}
.sub-v2-item span{display:block;color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.sub-v2-item b{display:block;color:var(--text);font-size:14px;font-weight:850;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sub-v2-usage{margin-top:18px;padding:14px;border-radius:18px;background:#f8faff;border:1px solid var(--line)}
.sub-v2-footer{margin-top:13px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:12px;font-weight:800}
.subscriber-v2-card .actions summary{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#f8faff;border:1px solid var(--line)}
.subscriber-v2-card .actions summary:hover{background:#eef2ff}

@media(max-width:1350px){.subscriber-v2-list{grid-template-columns:1fr}}
@media(max-width:760px){
  .subscriber-filters input,.subscriber-filters select,.subscriber-filters button,.subscriber-filters a{width:100%;min-width:0}
  .sub-v2-main{grid-template-columns:1fr auto}
  .sub-v2-status{grid-column:1 / -1;justify-content:flex-start}
  .sub-v2-grid{grid-template-columns:1fr}
}


/* Radius Pro Subscribers Compact Desktop V3 */
.subscriber-v2-list{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  margin-top:16px !important;
}

.subscriber-v2-card{
  display:grid !important;
  grid-template-columns: 1.4fr 1fr 1fr .9fr .9fr .7fr auto !important;
  align-items:center !important;
  gap:14px !important;
  padding:12px 16px !important;
  border-radius:18px !important;
  min-height:74px !important;
}

.subscriber-v2-card:hover{
  transform:none !important;
}

.subscriber-v2-card .rp-divider,
.subscriber-v2-card .sub-v2-usage,
.subscriber-v2-card .sub-v2-footer{
  display:none !important;
}

.sub-v2-main{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  min-width:0 !important;
}

.sub-v2-identity{
  min-width:0 !important;
}

.sub-v2-identity .avatar{
  width:38px !important;
  height:38px !important;
  border-radius:13px !important;
}

.sub-v2-identity h3{
  font-size:15px !important;
  margin:0 0 2px !important;
}

.sub-v2-status{
  justify-content:flex-start !important;
}

.sub-v2-grid{
  display:contents !important;
}

.sub-v2-item{
  min-width:0 !important;
}

.sub-v2-item span{
  font-size:10px !important;
  margin-bottom:3px !important;
}

.sub-v2-item b{
  font-size:13px !important;
}

.sub-v2-item:nth-child(4){
  display:none !important;
}

.subscriber-v2-card .actions{
  justify-self:end !important;
}

.subscriber-v2-card .actions summary{
  width:32px !important;
  height:32px !important;
}

@media(max-width:900px){
  .subscriber-v2-card{
    display:block !important;
    padding:18px !important;
  }

  .subscriber-v2-card .rp-divider,
  .subscriber-v2-card .sub-v2-usage,
  .subscriber-v2-card .sub-v2-footer{
    display:block !important;
  }

  .sub-v2-main{
    display:grid !important;
    grid-template-columns:1fr auto !important;
  }

  .sub-v2-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    margin-top:14px !important;
  }

  .sub-v2-item:nth-child(4){
    display:block !important;
  }
}

/* =========================================================
   Radius Pro Subscribers V3 - Compact Desktop Rows
========================================================= */

.subscriber-row-list{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-top:16px;
}

.subscriber-row{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:10px;
  background:linear-gradient(180deg,#ffffff,#fbfcff);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 10px 24px rgba(20,28,45,.06);
  padding:10px 12px;
  min-height:76px;
}

.subscriber-row:hover{
  box-shadow:0 16px 34px rgba(20,28,45,.10);
  border-color:#dbe3f0;
}

.subscriber-row-click{
  display:grid;
  grid-template-columns:1.45fr .9fr .9fr .8fr .8fr 1fr .65fr;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:var(--text);
  min-width:0;
}

.subscriber-row-id{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.subscriber-row-id .avatar{
  width:38px;
  height:38px;
  border-radius:13px;
  flex:0 0 auto;
}

.subscriber-row-name{
  min-width:0;
}

.subscriber-row-name h3{
  margin:0 0 3px;
  font-size:15px;
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.subscriber-row-name span{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.subscriber-row-col{
  min-width:0;
}

.subscriber-row-col span{
  display:block;
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:4px;
}

.subscriber-row-col b{
  display:block;
  color:var(--text);
  font-size:13px;
  font-weight:850;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.subscriber-row-col small{
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-top:2px;
}

.subscriber-mini-progress{
  height:5px;
  background:#edf1f7;
  border-radius:999px;
  overflow:hidden;
  margin-top:6px;
}

.subscriber-mini-progress i{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--primary),var(--primary2));
  border-radius:999px;
}

.subscriber-row-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

.subscriber-row .actions summary{
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#f8faff;
  border:1px solid var(--line);
}

.subscriber-row .actions summary:hover{
  background:#eef2ff;
}

@media(max-width:1100px){
  .subscriber-row-click{
    grid-template-columns:1.4fr .9fr .9fr .8fr .8fr;
  }

  .subscriber-row-col:nth-child(6),
  .subscriber-row-col:nth-child(7){
    display:none;
  }
}

@media(max-width:760px){
  .subscriber-row{
    display:block;
    padding:16px;
  }

  .subscriber-row-click{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
  }

  .subscriber-row-actions{
    margin-top:12px;
    justify-content:space-between;
  }

  .subscriber-row-col:nth-child(6),
  .subscriber-row-col:nth-child(7){
    display:block;
  }
}


/* Radius Pro Subscribers V4 compact desktop rows */
.subscriber-row-list{
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:10px;
  box-shadow:0 16px 40px rgba(15,23,42,.06);
}

.subscriber-row{
  min-height:72px;
  border-radius:16px;
  margin:6px 0;
  box-shadow:none;
  border:1px solid #eef2f7;
}

.subscriber-row-click{
  grid-template-columns: 1.6fr 1fr .85fr 1.35fr 1.15fr;
  gap:14px;
  padding:10px 12px;
  align-items:center;
}

.subscriber-row-id .avatar{
  width:38px;
  height:38px;
  border-radius:13px;
}

.subscriber-row-name h3{
  font-size:14px;
  line-height:18px;
  margin:0;
}

.subscriber-row-name span,
.subscriber-row-col span,
.subscriber-row-col small{
  font-size:11px;
}

.subscriber-row-col b{
  font-size:13px;
  line-height:17px;
}

.subscriber-row-usage .plan-line{
  display:block;
  max-width:170px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.subscriber-row-usage .usage-line{
  display:block;
  margin-top:2px;
}

.subscriber-mini-progress{
  height:6px;
  margin-top:6px;
}

.subscriber-row-actions{
  width:62px;
  padding-right:10px;
}

.subscriber-row .actions summary{
  width:34px;
  height:34px;
}

@media (min-width: 901px){
  .subscriber-row-col:nth-child(6),
  .subscriber-row-col:nth-child(7){
    display:block;
  }
}


/* Radius Pro Subscribers V4 */
.subscriber-v4-row{
  display:grid;
  grid-template-columns:1fr 64px;
  align-items:center;
  background:#fff;
  border:1px solid #edf1f7;
  border-radius:16px;
  min-height:92px;
  margin:0;
  transition:.15s ease;
}

.subscriber-v4-row + .subscriber-v4-row{
  border-top:0;
}

.subscriber-v4-row:hover{
  background:#fbfdff;
  transform:translateY(-1px);
}

.subscriber-v4-link{
  display:grid;
  grid-template-columns:1.55fr .9fr 1.45fr .85fr;
  gap:22px;
  align-items:center;
  padding:14px 18px;
  color:inherit;
  text-decoration:none;
}

.sub-v4-main{
  display:flex;
  align-items:center;
  gap:12px;
}

.sub-v4-main .avatar{
  width:46px;
  height:46px;
  border-radius:14px;
}

.sub-v4-main h3{
  margin:0;
  font-size:15px;
  line-height:19px;
}

.sub-v4-main span,
.sub-v4-dealer span,
.sub-v4-usage span,
.sub-v4-contact span{
  display:block;
  color:#748198;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.sub-v4-main > div > span{
  text-transform:none;
  letter-spacing:0;
  font-size:12px;
  font-weight:700;
}

.sub-v4-tags{
  display:flex;
  gap:7px;
  margin-top:12px;
}

.tag{
  font-style:normal;
  font-size:11px;
  font-weight:900;
  padding:6px 10px;
  border-radius:8px;
}

.tag.ok{background:#dcfce7;color:#16a34a}
.tag.warning{background:#fef3c7;color:#d97706}
.tag.danger{background:#fee2e2;color:#dc2626}
.tag.soft{background:#f3f6fb;color:#64748b}

.sub-v4-dealer b,
.sub-v4-usage b,
.sub-v4-contact b{
  display:block;
  font-size:14px;
  line-height:18px;
  margin-top:5px;
}

.sub-v4-dealer .badge{
  display:inline-flex;
  margin-top:16px;
  padding:8px 13px;
}

.sub-v4-usage .subscriber-mini-progress{
  height:7px;
  margin-top:13px;
  max-width:280px;
}

.sub-v4-usage small{
  display:block;
  margin-top:10px;
  color:#748198;
}

.sub-v4-contact span:not(:first-child){
  margin-top:12px;
}

.subscriber-v4-row .subscriber-row-actions{
  width:auto;
  justify-content:center;
  padding-right:14px;
}

@media (max-width:900px){
  .subscriber-v4-link{
    grid-template-columns:1fr;
  }
}

/* Services V2 */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.stat-card,.toolbar-card,.service-card,.empty-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 8px 24px rgba(15,23,42,.05)}
.stat-card{padding:16px}
.stat-card span{display:block;color:#64748b;font-size:13px}
.stat-card strong{font-size:26px;color:#0f172a}
.toolbar-card{display:flex;gap:10px;padding:14px;margin-bottom:16px}
.toolbar-card input,.toolbar-card select{height:38px;border:1px solid #dbe3ef;border-radius:10px;padding:0 12px}
.toolbar-card input{flex:1}
.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.service-card{padding:16px}
.service-top{display:flex;justify-content:space-between;gap:12px}
.service-top h3{margin:0 0 8px;font-size:18px;color:#0f172a}
.badge{display:inline-flex;border-radius:999px;padding:4px 9px;font-size:12px;font-weight:800}
.badge.ok{background:#dcfce7;color:#166534}
.service-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.service-meta div{background:#f8fafc;border:1px solid #eef2f7;border-radius:12px;padding:10px}
.service-meta span{display:block;color:#64748b;font-size:12px}
.service-meta b{display:block;color:#0f172a;margin-top:4px}
.service-foot{display:flex;justify-content:space-between;color:#64748b;font-size:12px;margin-top:12px}
.menu-wrap{position:relative}
.dots{border:0;background:#f1f5f9;border-radius:10px;width:34px;height:34px;font-size:20px;cursor:pointer}
.menu{display:none;position:absolute;right:0;top:38px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 12px 30px rgba(15,23,42,.14);min-width:170px;z-index:20;padding:6px}
.menu.open{display:block}
.menu a{display:block;padding:9px 10px;border-radius:9px;color:#0f172a;text-decoration:none;font-size:13px}
.menu a:hover{background:#f1f5f9}
.empty-card{padding:20px;color:#64748b}
@media(max-width:900px){.stats-grid,.service-grid{grid-template-columns:1fr}.toolbar-card{flex-wrap:wrap}.service-meta{grid-template-columns:1fr 1fr}}

/* Services V2 forms */
.form-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 8px 24px rgba(15,23,42,.05);padding:18px}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
.form-grid label{font-size:13px;color:#475569;font-weight:700}
.form-grid input{display:block;width:100%;height:38px;margin-top:6px;border:1px solid #dbe3ef;border-radius:10px;padding:0 12px}
.form-grid .check{display:flex;align-items:center;gap:8px;margin-top:24px}
.form-grid .check input{width:auto;height:auto;margin:0}
@media(max-width:900px){.form-grid{grid-template-columns:1fr}}

/* Services V3 profile */
.profile-tabs{display:flex;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:10px;margin-bottom:16px}
.profile-tabs a{padding:9px 12px;border-radius:10px;background:#f8fafc;color:#0f172a;text-decoration:none;font-size:13px;font-weight:800}
.profile-tabs a:hover{background:#e0f2fe}
.profile-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 8px 24px rgba(15,23,42,.05);padding:18px;margin-bottom:16px}
.profile-card h2{font-size:18px;margin:0 0 14px;color:#0f172a}
.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.detail-grid div{background:#f8fafc;border:1px solid #eef2f7;border-radius:12px;padding:12px}
.detail-grid span{display:block;color:#64748b;font-size:12px}
.detail-grid b{display:block;margin-top:5px;color:#0f172a}
.attr-table table{width:100%;border-collapse:collapse}
.attr-table th,.attr-table td{padding:11px;border-bottom:1px solid #eef2f7;text-align:left;font-size:13px}
.attr-table th{color:#475569;background:#f8fafc}
.muted{color:#64748b;font-size:14px}
@media(max-width:900px){.detail-grid{grid-template-columns:1fr}}

.form-grid select{display:block;width:100%;height:38px;margin-top:6px;border:1px solid #dbe3ef;border-radius:10px;padding:0 12px;background:#fff}

/* Dealers compact form */
.dealer-form-card{
  max-width:980px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:22px;
  box-shadow:0 14px 30px rgba(15,23,42,.06);
}
.dealer-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.dealer-field label{
  display:block;
  font-size:13px;
  font-weight:700;
  color:#475569;
  margin-bottom:7px;
}
.dealer-field input,
.dealer-field select{
  width:100%;
  height:44px;
  border:1px solid #dbe3ef;
  border-radius:10px;
  padding:0 12px;
  font-size:14px;
  box-sizing:border-box;
}
.dealer-field.full{grid-column:1/-1}
.dealer-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:22px;
  border-top:1px solid #eef2f7;
  padding-top:18px;
}
@media(max-width:900px){
  .dealer-form-grid{grid-template-columns:1fr}
}

/* Radius Pro auth topbar */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.topbar small{
  display:block;
  color:#64748b;
  font-size:13px;
  margin-top:3px;
}
.topbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* ===== Radius Pro Service Bypass Pro UI ===== */
.rp-pro-grid{
  display:grid;
  grid-template-columns:370px 1fr;
  gap:24px;
  align-items:start;
}
.rp-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:20px;
  box-shadow:0 8px 24px rgba(15,23,42,.04);
}
.rp-card h2,.rp-card h3{
  margin:0 0 16px;
}
.rp-bypass-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.rp-alert{
  border:1px solid #93c5fd;
  background:#eff6ff;
  color:#1d4ed8;
  border-radius:10px;
  padding:12px 14px;
  margin-bottom:16px;
  font-size:13px;
}
.rp-bypass-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
}
.rp-bypass-table th{
  background:#f8fafc;
  color:#334155;
  font-size:12px;
  text-align:left;
  padding:12px;
  border-bottom:1px solid #e5e7eb;
}
.rp-bypass-table td{
  padding:12px;
  border-bottom:1px solid #eef2f7;
  vertical-align:middle;
}
.rp-bypass-table tr:last-child td{
  border-bottom:0;
}
.rp-mini{
  width:100%;
  padding:10px 11px;
  border:1px solid #d1d5db;
  border-radius:8px;
  background:#fff;
}
.rp-name-stack{
  display:grid;
  gap:6px;
}
.rp-name-stack input:first-child{
  font-weight:700;
}
.rp-priority{
  width:72px;
}
.rp-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.rp-toggle input{
  width:18px;
  height:18px;
}
.rp-row-actions{
  display:flex;
  gap:8px;
}
.rp-icon-btn{
  border:0;
  border-radius:8px;
  padding:9px 10px;
  cursor:pointer;
  font-weight:800;
}
.rp-icon-btn.del{
  background:#fee2e2;
  color:#b91c1c;
}
.rp-icon-btn.add{
  background:#2563eb;
  color:#fff;
}
.rp-help{
  margin-top:16px;
  border:1px solid #fde68a;
  background:#fffbeb;
  color:#92400e;
  border-radius:10px;
  padding:12px 14px;
  font-size:13px;
}
.rp-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:18px;
}
.rp-summary-box{
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:14px;
  background:#fff;
}
.rp-summary-box span{
  display:block;
  color:#64748b;
  font-size:12px;
}
.rp-summary-box b{
  display:block;
  margin-top:6px;
  font-size:28px;
  color:#0f172a;
}
@media(max-width:1100px){
  .rp-pro-grid{grid-template-columns:1fr}
}

.v16-traffic-link{
  display:inline-block;
  margin-top:4px;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
  color:#2563eb;
}
.v16-traffic-link:hover{text-decoration:underline}

.v20-wide{grid-column:1 / -1}
.v20-table-wrap{margin-top:12px;overflow:auto}
.v20-table{width:100%;border-collapse:collapse;font-size:13px}
.v20-table th{
  text-align:left;
  color:#64748b;
  font-size:12px;
  font-weight:900;
  padding:10px 8px;
  border-bottom:1px solid #e5e7eb;
}
.v20-table td{
  padding:10px 8px;
  border-bottom:1px solid #eef2f7;
  vertical-align:middle;
}
.v20-mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
}

.v20-table{font-size:12px}
.v20-table th{padding:8px 6px;font-size:11px}
.v20-table td{padding:8px 6px}
.v20-table td:nth-child(1){white-space:nowrap}


/* Traffic profile compact fix */
.v20-wide{grid-column:auto!important}
.v20-table-wrap{max-width:100%;overflow:auto}
.v20-table{font-size:12px}
.v20-table th{font-size:11px;padding:8px 6px}
.v20-table td{padding:8px 6px}
.v20-table th:nth-child(5),
.v20-table td:nth-child(5){display:none!important}

/* USAGE TRAFFIC COLOURS V2 */

/* Low usage: 0–49% */
.v16-usage-line.usage-low,
.muser-usage-line.usage-low {
  color: #15803d;
}

.v16-usage-bar > .usage-low,
.muser-bar > .usage-low {
  background: #22c55e !important;
}

/* Medium usage: 50–74% */
.v16-usage-line.usage-medium,
.muser-usage-line.usage-medium {
  color: #a16207;
}

.v16-usage-bar > .usage-medium,
.muser-bar > .usage-medium {
  background: #eab308 !important;
}

/* High usage: 75–89% */
.v16-usage-line.usage-high,
.muser-usage-line.usage-high {
  color: #c2410c;
}

.v16-usage-bar > .usage-high,
.muser-bar > .usage-high {
  background: #f97316 !important;
}

/* Critical usage: 90–100% */
.v16-usage-line.usage-critical,
.muser-usage-line.usage-critical {
  color: #dc2626;
  font-weight: 800;
}

.v16-usage-bar > .usage-critical,
.muser-bar > .usage-critical {
  background: #ef4444 !important;
}

/* Unlimited or no quota */
.v16-usage-line.usage-unlimited,
.muser-usage-line.usage-unlimited {
  color: #2563eb;
}

.v16-usage-bar > .usage-unlimited,
.muser-bar > .usage-unlimited {
  background: #3b82f6 !important;
}

/* Preserve quota suffix visibility */
.v16-usage-line.usage-low em,
.v16-usage-line.usage-medium em,
.v16-usage-line.usage-high em,
.v16-usage-line.usage-critical em,
.v16-usage-line.usage-unlimited em {
  color: inherit;
  opacity: .82;
}