:root{
  --bg:#060914;
  --panel:#0e1527;
  --panel-2:#0f1830;
  --border:rgba(165,181,255,.12);
  --soft:rgba(255,255,255,.06);
  --text:#eef2ff;
  --muted:#94a0be;
  --purple:#8c52ff;
  --purple-2:#c45eff;
  --blue:#54a7ff;
  --green:#19d38a;
  --red:#ff5e73;
  --gold:#f3c15b;
  --shadow:0 12px 35px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(circle at top center, rgba(78,56,168,.15), transparent 25%), var(--bg);color:var(--text);font-family:'Inter',sans-serif}
body{min-height:100vh}

a{text-decoration:none;color:inherit}
button,input,select{font-family:inherit}

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

.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  padding:26px 18px;
  border-right:1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(132,84,255,.08), transparent 18%),
    #070c18;
  display:flex;
  flex-direction:column;
}

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

.brand-icon{
  width:48px;
  height:48px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-size:20px;
  color:#fff;
  background:linear-gradient(135deg, var(--purple), var(--purple-2));
  box-shadow:0 0 25px rgba(153,91,255,.35);
}

.brand-title{
  font-size:18px;
  font-weight:800;
  letter-spacing:.4px;
}
.brand-title span{color:#b770ff}
.brand-sub{
  color:var(--muted);
  font-size:10px;
  letter-spacing:2.2px;
  margin-top:4px;
}

.nav-menu{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.nav-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  border-radius:14px;
  color:#c9d2eb;
  transition:.2s ease;
  font-size:14px;
  border:1px solid transparent;
}
.nav-item i{width:18px;text-align:center}
.nav-item:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.05);
}
.nav-item.active{
  color:#fff;
  background:linear-gradient(90deg, rgba(143,85,255,.35), rgba(143,85,255,.15));
  border-color:rgba(166,110,255,.45);
  box-shadow:0 0 18px rgba(142,82,255,.15) inset;
}

.sidebar-footer{
  margin-top:auto;
  text-align:left;
  color:#aab4d1;
}
.globe{
  width:170px;
  height:170px;
  border-radius:50%;
  margin:0 0 18px 0;
  position:relative;
  background:
    radial-gradient(circle at center, rgba(160,104,255,.35), transparent 35%),
    radial-gradient(circle at 20% 25%, rgba(112,88,255,.18), transparent 20%);
  border:1px solid rgba(166,110,255,.15);
  overflow:hidden;
}
.globe::before,
.globe::after{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:50%;
  border:1px solid rgba(172,121,255,.18);
}
.globe::after{
  inset:34px;
  border-color:rgba(109,159,255,.18);
}
.globe-core{
  position:absolute;
  inset:50%;
  width:56px;
  height:56px;
  margin:-28px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(175,112,255,.75), rgba(112,92,255,.08));
  filter:blur(.2px);
}
.sidebar-footer p{
  line-height:1.45;
  font-size:12px;
  letter-spacing:1.2px;
  margin:0 0 18px 0;
}
.version-line{
  width:70px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--purple), #fff0);
  margin:14px 0;
}
.sidebar-footer small{
  display:block;
  color:#7d89aa;
  margin-top:4px;
}

.main-content{
  padding:20px 26px 28px;
}

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

.search-box{
  height:52px;
  width:410px;
  max-width:100%;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  padding:0 14px;
  gap:12px;
  box-shadow:var(--shadow);
}
.search-box i{color:#a8b2d3}
.search-box input{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:#fff;
  font-size:14px;
}
.search-box .shortcut{
  font-size:12px;
  color:#9aa7ca;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:8px;
}

.topbar-right{
  display:flex;
  align-items:center;
  gap:14px;
}

.icon-btn{
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:#cbd4ee;
  cursor:pointer;
}

.user-box{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 12px;
  border-radius:18px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
}
.avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, #1b2140, #291c53);
  border:1px solid rgba(171,125,255,.42);
  font-weight:700;
}
.user-info{
  display:flex;
  flex-direction:column;
}
.user-info strong{font-size:14px}
.user-info span{font-size:12px;color:var(--muted)}
.chevron{font-size:12px;color:#8f9abb}

.hero-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:22px;
}
.hero-text h1{
  margin:0 0 8px;
  font-size:28px;
  font-weight:800;
}
.hero-text p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}
.hero-actions{
  display:flex;
  align-items:center;
  gap:18px;
}
.datetime-box{
  text-align:right;
}
.date-line{
  color:#c6d2f3;
  font-size:13px;
  margin-bottom:6px;
}
.time-line{
  font-size:28px;
  font-weight:800;
  color:#fff;
}
.primary-btn{
  height:54px;
  padding:0 20px;
  border:none;
  border-radius:16px;
  background:linear-gradient(135deg, #8d55ff, #c25eff);
  color:#fff;
  font-weight:700;
  font-size:15px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(154,90,255,.34);
}

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

.stat-card{
  position:relative;
  min-height:128px;
  border-radius:22px;
  padding:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid var(--border);
  display:flex;
  align-items:flex-start;
  gap:16px;
  overflow:hidden;
}
.stat-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top right, rgba(255,255,255,.05), transparent 32%);
  pointer-events:none;
}
.glow-purple{box-shadow:0 0 0 1px rgba(158,99,255,.12), 0 0 35px rgba(142,82,255,.08) inset}
.glow-green{box-shadow:0 0 0 1px rgba(46,228,165,.12), 0 0 35px rgba(25,211,138,.05) inset}
.glow-red{box-shadow:0 0 0 1px rgba(255,94,115,.12), 0 0 35px rgba(255,94,115,.05) inset}
.glow-gold{box-shadow:0 0 0 1px rgba(243,193,91,.12), 0 0 35px rgba(243,193,91,.05) inset}

.stat-icon{
  width:54px;
  height:54px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:21px;
  flex:0 0 auto;
}
.stat-icon.purple{background:rgba(142,82,255,.18);color:#c489ff}
.stat-icon.green{background:rgba(25,211,138,.14);color:#36e39c}
.stat-icon.red{background:rgba(255,94,115,.14);color:#ff7a8b}
.stat-icon.gold{background:rgba(243,193,91,.14);color:#ffd26d}

.stat-info span{
  display:block;
  color:#c1cbea;
  font-size:13px;
  margin-bottom:8px;
}
.stat-info strong{
  display:block;
  font-size:38px;
  line-height:1;
  margin-bottom:8px;
}
.stat-info small{
  color:var(--muted);
  font-size:13px;
}
.stat-change{
  margin-left:auto;
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
}
.stat-change.up{color:#30df8d}
.stat-change.down{color:#ff6b7f}
.stat-change.warn{color:#ffcc67}

.dual-grid{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:18px;
  margin-bottom:18px;
}

.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid var(--border);
  border-radius:22px;
  box-shadow:var(--shadow);
}

.panel-title-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 20px 10px;
}
.panel-title-row h3{
  margin:0;
  font-size:16px;
  font-weight:800;
}

.source-layout{
  display:grid;
  grid-template-columns:140px 1fr 1.15fr;
  gap:18px;
  padding:12px 20px 20px;
  align-items:center;
}
.server-visual{
  display:flex;
  align-items:center;
  justify-content:center;
}
.rack{
  width:96px;
  height:170px;
  border-radius:14px;
  border:1px solid rgba(167,117,255,.28);
  background:linear-gradient(180deg, rgba(148,97,255,.1), rgba(255,255,255,.02));
  padding:14px 10px;
  display:flex;
  flex-direction:column;
  gap:10px;
  box-shadow:inset 0 0 25px rgba(142,82,255,.12);
}
.rack span{
  height:18px;
  border-radius:6px;
  background:linear-gradient(90deg, rgba(188,116,255,.9), rgba(80,128,255,.25));
  opacity:.9;
}
.server-meta .status-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:700;
  padding:7px 11px;
  border-radius:999px;
  margin-bottom:12px;
}
.status-pill.online{
  color:#33e090;
  background:rgba(32,215,138,.12);
  border:1px solid rgba(32,215,138,.22);
}
.server-meta h4{
  margin:0;
  font-size:18px;
  font-weight:800;
}
.server-meta p{
  margin:8px 0 14px;
  color:#bcc7e7;
}
.meta-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  color:#b5c0de;
  font-size:13px;
}
.meta-list i{
  width:18px;
  color:#d8ddf2;
}

.resource-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.metric-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
  font-size:13px;
  color:#c7d2ef;
}
.metric-head strong{
  font-size:13px;
  color:#fff;
}
.bar{
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.04);
}
.bar div{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--purple-2), var(--blue));
  box-shadow:0 0 20px rgba(182,95,255,.35);
}

.range-tabs{
  display:flex;
  gap:8px;
}
.range-tabs button{
  height:32px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:#aeb9d8;
  cursor:pointer;
}
.range-tabs button.active{
  background:rgba(143,85,255,.22);
  color:#fff;
  border-color:rgba(174,112,255,.45);
}

.traffic-content{
  display:grid;
  grid-template-columns:1fr 180px;
  gap:0;
  min-height:310px;
}
.traffic-chart{
  padding:8px 12px 18px 20px;
}
.traffic-chart svg{
  width:100%;
  height:260px;
}
.grid-lines line{
  stroke:rgba(255,255,255,.08);
  stroke-width:1;
}
.traffic-side{
  border-left:1px solid var(--border);
  padding:22px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:22px;
}
.traffic-stat span{
  display:block;
  color:#aab6d6;
  font-size:13px;
  margin-bottom:6px;
}
.traffic-stat strong{
  font-size:28px;
  color:#fff;
}
.traffic-stat.highlight strong{
  color:#c17bff;
}

.services-row{
  display:grid;
  grid-template-columns:1.25fr .9fr;
  gap:18px;
  margin-bottom:18px;
}

.services-panel{
  padding:18px 20px 20px;
}
.services-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:16px;
}
.services-head h3{
  margin:0 0 6px;
  font-size:16px;
  font-weight:800;
}
.services-head p{
  margin:0;
  color:var(--muted);
  font-size:13px;
}
.services-head a{
  color:#b481ff;
  font-size:13px;
  font-weight:700;
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.service-card{
  display:flex;
  gap:12px;
  align-items:center;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
}
.service-icon{
  width:50px;
  height:50px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:18px;
  color:#c88cff;
  background:rgba(143,85,255,.13);
  border:1px solid rgba(143,85,255,.25);
}
.service-card strong{
  display:block;
  font-size:14px;
}
.service-card span{
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-top:4px;
}
.online-dot{
  display:block;
  margin-top:6px;
  color:#29de8b;
  font-size:12px;
  font-weight:700;
}

.promo-panel{
  position:relative;
  overflow:hidden;
  min-height:178px;
}
.promo-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 78% 22%, rgba(188,95,255,.28), transparent 22%),
    radial-gradient(circle at 85% 85%, rgba(83,113,255,.18), transparent 20%),
    linear-gradient(135deg, rgba(134,75,255,.18), rgba(36,18,89,.65));
}
.promo-content{
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:26px 24px;
}
.promo-content h3{
  margin:0 0 8px;
  font-size:21px;
  line-height:1.25;
}
.promo-content p{
  margin:0;
  color:#b4bfe0;
  font-size:12px;
  letter-spacing:2px;
}
.promo-brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:22px;
  font-weight:800;
}
.mini-logo{
  width:48px;
  height:48px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, var(--purple), var(--purple-2));
  box-shadow:0 0 20px rgba(174,102,255,.35);
}

.clients-panel{
  padding:18px 20px 14px;
}
.clients-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:16px;
}
.clients-head h3{
  margin:0 0 6px;
  font-size:16px;
  font-weight:800;
}
.clients-head p{
  margin:0;
  color:var(--muted);
  font-size:13px;
}
.table-tools{
  display:flex;
  gap:12px;
  align-items:center;
}
.small-search{
  width:260px;
  height:44px;
  border:1px solid var(--border);
  border-radius:14px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;
  background:rgba(255,255,255,.02);
}
.small-search i{color:#9ca8c9}
.small-search input{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:#fff;
}
.table-tools select{
  height:44px;
  min-width:150px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#0b1223;
  color:#d7def5;
  padding:0 14px;
  outline:none;
}

.table-wrap{
  overflow:auto;
  border:1px solid rgba(255,255,255,.05);
  border-radius:18px;
}
table{
  width:100%;
  border-collapse:collapse;
  min-width:1050px;
}
thead th{
  text-align:left;
  padding:16px 14px;
  font-size:12px;
  color:#aab5d4;
  font-weight:700;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.06);
}
tbody td{
  padding:15px 14px;
  font-size:14px;
  color:#eef1fa;
  border-bottom:1px solid rgba(255,255,255,.05);
}
tbody tr:hover{
  background:rgba(255,255,255,.02);
}
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:78px;
  height:32px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  padding:0 12px;
}
.badge.online{
  color:#31e08e;
  background:rgba(25,211,138,.12);
  border:1px solid rgba(25,211,138,.25);
}
.badge.offline{
  color:#ff6b7f;
  background:rgba(255,94,115,.12);
  border:1px solid rgba(255,94,115,.24);
}
.badge.expired{
  color:#ffd36a;
  background:rgba(243,193,91,.12);
  border:1px solid rgba(243,193,91,.24);
}
.actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.actions button{
  height:34px;
  padding:0 12px;
  border-radius:10px;
  border:none;
  font-weight:700;
  cursor:pointer;
}
.btn-edit{
  background:rgba(244,194,89,.16);
  color:#ffd66f;
  border:1px solid rgba(244,194,89,.24);
}
.btn-extend{
  background:rgba(143,85,255,.18);
  color:#d2a3ff;
  border:1px solid rgba(143,85,255,.24);
}
.btn-suspend{
  background:rgba(255,255,255,.08);
  color:#e5ebff;
  border:1px solid rgba(255,255,255,.08);
}
.btn-delete{
  background:rgba(255,94,115,.16);
  color:#ff8a98;
  border:1px solid rgba(255,94,115,.24);
}

.table-footer{
  margin-top:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.table-footer span{
  color:#9aa6c8;
  font-size:13px;
}
.pagination{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.pagination button{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
  color:#b7c2e1;
  cursor:pointer;
}
.pagination button.active{
  background:linear-gradient(135deg, #8751ff, #b95fff);
  color:#fff;
  border-color:transparent;
}

@media (max-width: 1400px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .dual-grid,
  .services-row{grid-template-columns:1fr}
}

@media (max-width: 1100px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{display:none}
  .source-layout{grid-template-columns:1fr}
  .traffic-content{grid-template-columns:1fr}
  .traffic-side{border-left:none;border-top:1px solid var(--border)}
}

@media (max-width: 780px){
  .main-content{padding:16px}
  .topbar,
  .hero-row,
  .clients-head{flex-direction:column;align-items:stretch}
  .services-grid{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:1fr}
  .search-box,.small-search{width:100%}
}


/* =========================================================
   AMC TV FINAL DESIGN
   Reference visuals + agreed sidebar
   ========================================================= */


/* ---------- RIGHT SIDEBAR ---------- */

.app-shell{
  display:block !important;
}

.sidebar{
  position:fixed !important;
  top:0 !important;
  bottom:0 !important;
  right:0 !important;
  left:auto !important;

  width:240px !important;
  height:100vh !important;

  border-right:0 !important;
  border-left:1px solid var(--border) !important;

  overflow-y:auto !important;

  z-index:100 !important;
}


.main-content{
  margin-right:240px !important;
  margin-left:0 !important;

  width:calc(100% - 240px) !important;
}


/* ---------- SIDEBAR GROUPS ---------- */

.nav-section{
  margin:
    18px
    13px
    6px;

  color:#596581;

  font-size:9px;

  font-weight:800;

  letter-spacing:1.7px;
}

.system-label{
  margin-top:25px;
}

.nav-item{
  padding:10px 13px !important;
  min-height:39px;
}

.nav-item i{
  color:#a967ff;
}


/* ---------- SIDEBAR GLOBE ---------- */

.sidebar-footer{
  margin-top:26px !important;
}

.globe{
  width:205px !important;
  height:205px !important;

  margin:
    0 auto
    14px !important;

  border:0 !important;

  background:none !important;

  overflow:hidden;
}

.globe::before,
.globe::after,
.globe-core{
  display:none !important;
}

.globe img{
  width:100%;
  height:100%;

  object-fit:contain;

  display:block;

  filter:
    drop-shadow(
      0 0 25px
      rgba(139,71,255,.28)
    );
}


/* ---------- SOURCE SERVER ---------- */

.server-visual{
  width:150px;
  height:195px;

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

  overflow:visible !important;
}

.server-photo{
  width:145px;
  height:190px;

  object-fit:contain;

  display:block;

  filter:
    drop-shadow(
      0 20px 18px
      rgba(0,0,0,.55)
    )
    drop-shadow(
      0 0 16px
      rgba(129,66,255,.18)
    );
}


/* Make source panel closer to reference */

.source-layout{
  grid-template-columns:
    155px
    minmax(200px,.85fr)
    minmax(250px,1.15fr) !important;

  min-height:245px;
}

.server-meta{
  align-self:center;
}


/* ---------- PROMO IMAGE ---------- */

.promo-panel{
  position:relative !important;

  overflow:hidden !important;

  min-height:178px !important;

  background:#100b25 !important;
}

.promo-earth{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  z-index:0;

  opacity:.95;
}

.promo-overlay{
  position:absolute !important;

  inset:0 !important;

  z-index:1 !important;

  background:
    linear-gradient(
      90deg,
      rgba(20,10,44,.94) 0%,
      rgba(23,13,52,.83) 38%,
      rgba(8,11,24,.15) 100%
    ) !important;
}

.promo-content{
  position:relative !important;

  z-index:2 !important;
}

.promo-content h3{
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-style:italic;

  font-size:23px !important;

  color:#e8cbff;
}


/* ---------- REFERENCE DASHBOARD PROPORTIONS ---------- */

.dual-grid{
  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1.13fr) !important;
}

.services-row{
  grid-template-columns:
    minmax(0,1.3fr)
    minmax(420px,.86fr) !important;
}


/* ---------- RESPONSIVE ---------- */

@media(max-width:1200px){

  .sidebar{
    width:220px !important;
  }

  .main-content{
    margin-right:220px !important;

    width:
      calc(
        100% - 220px
      ) !important;
  }

  .dual-grid,
  .services-row{
    grid-template-columns:1fr !important;
  }

}


@media(max-width:900px){

  .sidebar{
    display:none !important;
  }

  .main-content{
    margin-right:0 !important;

    width:100% !important;
  }

}


/* ==========================================================
   AMC TV GLOBAL PAGE DESIGN SYSTEM
   All pages use the same dimensions and layout
   ========================================================== */

:root{
    --amc-sidebar-width:240px;

    --amc-page-padding:24px;
    --amc-page-gap:16px;

    --amc-topbar-height:64px;
    --amc-page-header-height:76px;

    --amc-card-height:112px;
    --amc-panel-min-height:260px;

    --amc-radius:18px;

    --amc-table-head-height:42px;
    --amc-table-row-height:46px;

    --amc-button-height:36px;
    --amc-primary-button-height:44px;
}


/* ----------------------------------------------------------
   GLOBAL CONTENT AREA
   ---------------------------------------------------------- */

.main-content{
    margin-right:var(--amc-sidebar-width) !important;

    width:
        calc(
            100% - var(--amc-sidebar-width)
        ) !important;

    padding:
        0
        var(--amc-page-padding)
        32px !important;
}


/* ----------------------------------------------------------
   EVERY PAGE
   ---------------------------------------------------------- */

.amc-page{
    width:100%;

    display:block;
}


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

.amc-page-header{
    min-height:
        var(--amc-page-header-height);

    display:flex;

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

    gap:20px;
}

.amc-page-title h1{
    margin:0;

    font-size:26px;
    font-weight:800;
}

.amc-page-title p{
    margin:
        6px
        0
        0;

    color:var(--muted);

    font-size:12px;
}

.amc-page-actions{
    display:flex;

    align-items:center;

    gap:10px;
}


/* ----------------------------------------------------------
   MAIN ACTION BUTTON
   ---------------------------------------------------------- */

.amc-primary-action{
    height:
        var(--amc-primary-button-height);

    padding:
        0
        18px;

    display:inline-flex;

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

    gap:8px;

    border:1px solid #a464ff;

    border-radius:11px;

    color:#fff;

    font-weight:700;

    background:
        linear-gradient(
            135deg,
            #773cff,
            #ad54ff
        );

    box-shadow:
        0 8px 25px
        rgba(129,63,255,.22);

    cursor:pointer;
}


/* ----------------------------------------------------------
   FOUR SUMMARY CARDS
   ---------------------------------------------------------- */

.amc-summary-grid{
    display:grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:
        var(--amc-page-gap);

    margin-bottom:
        var(--amc-page-gap);
}

.amc-summary-card{
    height:
        var(--amc-card-height);

    min-height:
        var(--amc-card-height);

    padding:
        18px;

    display:flex;

    align-items:center;

    gap:15px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--amc-radius);

    background:
        linear-gradient(
            145deg,
            rgba(20,26,43,.98),
            rgba(12,17,30,.98)
        );

    overflow:hidden;
}

.amc-summary-icon{
    width:50px;
    height:50px;

    flex:0 0 50px;

    display:grid;

    place-items:center;

    border-radius:16px;

    color:#bd7cff;

    background:
        rgba(139,71,255,.15);
}

.amc-summary-content{
    min-width:0;
}

.amc-summary-content span{
    display:block;

    color:#9da7ba;

    font-size:11px;
}

.amc-summary-content strong{
    display:block;

    margin:
        4px
        0;

    font-size:27px;
}

.amc-summary-content small{
    display:block;

    color:#6d788d;

    font-size:9px;
}


/* ----------------------------------------------------------
   STANDARD TWO PANEL ROW
   ---------------------------------------------------------- */

.amc-content-grid{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1.08fr);

    gap:
        var(--amc-page-gap);

    margin-bottom:
        var(--amc-page-gap);
}

.amc-panel{
    min-width:0;

    min-height:
        var(--amc-panel-min-height);

    border:
        1px solid
        var(--border);

    border-radius:
        var(--amc-radius);

    background:
        linear-gradient(
            145deg,
            #111827,
            #0c121f
        );

    overflow:hidden;
}

.amc-panel-header{
    min-height:52px;

    padding:
        14px
        16px;

    display:flex;

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

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

.amc-panel-header h2{
    margin:0;

    font-size:14px;
}

.amc-panel-header p{
    margin:
        4px
        0
        0;

    color:#778399;

    font-size:9px;
}

.amc-panel-body{
    padding:16px;
}


/* ----------------------------------------------------------
   FULL WIDTH PANEL
   ---------------------------------------------------------- */

.amc-full-panel{
    width:100%;

    margin-bottom:
        var(--amc-page-gap);

    border:
        1px solid
        var(--border);

    border-radius:
        var(--amc-radius);

    background:
        linear-gradient(
            145deg,
            #111827,
            #0c121f
        );

    overflow:hidden;
}


/* ----------------------------------------------------------
   STANDARD TABLE
   ---------------------------------------------------------- */

.amc-table-wrapper{
    width:100%;

    overflow:auto;
}

.amc-table{
    width:100%;

    min-width:1000px;

    border-collapse:collapse;
}

.amc-table thead tr{
    height:
        var(--amc-table-head-height);
}

.amc-table th{
    padding:
        0
        14px;

    text-align:left;

    color:#818da4;

    background:#161d2d;

    border-bottom:
        1px solid
        #273049;

    font-size:9px;

    font-weight:700;
}

.amc-table tbody tr{
    height:
        var(--amc-table-row-height);
}

.amc-table td{
    padding:
        0
        14px;

    color:#c3cad7;

    border-bottom:
        1px solid
        #1d2538;

    font-size:10px;
}

.amc-table tbody tr:hover td{
    background:
        rgba(255,255,255,.015);
}


/* ----------------------------------------------------------
   STANDARD TABLE HEADER
   ---------------------------------------------------------- */

.amc-list-header{
    min-height:60px;

    padding:
        12px
        16px;

    display:flex;

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

    gap:16px;

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

.amc-list-title h2{
    margin:0;

    font-size:15px;
}

.amc-list-title p{
    margin:
        4px
        0
        0;

    color:#758197;

    font-size:9px;
}

.amc-list-tools{
    display:flex;

    align-items:center;

    gap:8px;
}


/* ----------------------------------------------------------
   STANDARD INPUT
   ---------------------------------------------------------- */

.amc-search{
    width:260px;

    height:
        var(--amc-button-height);

    display:flex;

    align-items:center;

    gap:8px;

    padding:
        0
        11px;

    border:
        1px solid
        #2a334e;

    border-radius:9px;

    background:#0d1321;
}

.amc-search input{
    width:100%;

    color:white;

    border:0;

    outline:0;

    background:transparent;

    font-size:10px;
}


/* ----------------------------------------------------------
   STANDARD SMALL BUTTON
   ---------------------------------------------------------- */

.amc-button{
    height:
        var(--amc-button-height);

    padding:
        0
        12px;

    display:inline-flex;

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

    gap:6px;

    border:
        1px solid
        #313a55;

    border-radius:9px;

    color:#c5ccda;

    background:#121927;

    cursor:pointer;

    font-size:10px;
}


/* ----------------------------------------------------------
   STANDARD FOOTER
   ---------------------------------------------------------- */

.amc-list-footer{
    min-height:48px;

    padding:
        10px
        14px;

    display:flex;

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

    color:#737f94;

    font-size:9px;
}


/* ----------------------------------------------------------
   STANDARD TABS
   ---------------------------------------------------------- */

.amc-tabs{
    height:44px;

    display:flex;

    align-items:center;

    gap:5px;

    padding:
        0
        10px;

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

.amc-tab{
    height:30px;

    padding:
        0
        11px;

    display:flex;

    align-items:center;

    border-radius:7px;

    color:#828ca1;

    cursor:pointer;

    font-size:9px;
}

.amc-tab.active{
    color:#d7b3ff;

    background:
        rgba(137,70,255,.15);

    border:
        1px solid
        rgba(152,82,255,.35);
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media(max-width:1250px){

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

    .amc-content-grid{
        grid-template-columns:
            1fr;
    }

}

@media(max-width:800px){

    .main-content{
        margin-right:0 !important;

        width:100% !important;

        padding:
            0
            14px
            25px !important;
    }

    .amc-summary-grid{
        grid-template-columns:1fr;
    }

    .amc-page-header{
        align-items:flex-start;

        flex-direction:column;

        padding:
            15px
            0;
    }

}


/* ==========================================================
   MIKROTIK SOURCES PAGE
   ========================================================== */

.source-health-ring{

    width:145px;
    height:145px;

    margin:
        14px auto
        24px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:
        conic-gradient(
            #9b55ff 0deg,
            #6136bc 360deg
        );

    position:relative;

    box-shadow:
        0 0 30px
        rgba(137,68,255,.16);
}

.source-health-ring:after{

    content:"";

    position:absolute;

    inset:10px;

    border-radius:50%;

    background:#0f1624;
}

.source-health-ring>div{

    position:relative;

    z-index:1;

    text-align:center;
}

.source-health-ring strong,
.source-health-ring span{

    display:block;
}

.source-health-ring strong{

    font-size:27px;
}

.source-health-ring span{

    margin-top:4px;

    color:#78849a;

    font-size:10px;
}


.source-mini-stats{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:10px;
}

.source-mini-stats div{

    padding:12px;

    text-align:center;

    border:
        1px solid
        #252e47;

    border-radius:10px;

    background:#121928;
}

.source-mini-stats span,
.source-mini-stats strong{

    display:block;
}

.source-mini-stats span{

    color:#788398;

    font-size:9px;
}

.source-mini-stats strong{

    margin-top:5px;

    font-size:18px;
}


.capacity-number{

    margin:
        31px
        0
        22px;

    text-align:center;
}

.capacity-number strong{

    font-size:48px;

    color:#bd75ff;
}

.capacity-number span{

    margin-left:6px;

    color:#7f8a9e;

    font-size:13px;
}


.capacity-bar{

    height:12px;

    overflow:hidden;

    border-radius:20px;

    background:#252e45;
}

.capacity-bar i{

    display:block;

    width:0;
    height:100%;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            #7c3cff,
            #bd66ff,
            #4f91ff
        );
}


.capacity-details{

    margin-top:20px;

    display:flex;

    justify-content:space-between;

    color:#8d98ac;

    font-size:10px;
}

.capacity-details strong{

    color:white;
}


.source-status{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:68px;

    height:25px;

    border-radius:20px;

    font-size:9px;
}

.source-status.online{

    color:#43e69e;

    border:
        1px solid
        #266c4b;

    background:#123a29;
}

.source-status.offline{

    color:#ff6b7c;

    border:
        1px solid
        #6b2c38;

    background:#381722;
}


.source-actions{

    display:flex;

    gap:5px;
}

.source-btn{

    height:28px;

    padding:
        0
        9px;

    border-radius:6px;

    cursor:pointer;

    font-size:8px;
}

.source-btn.edit{

    color:#d4a5ff;

    border:
        1px solid
        #65408f;

    background:#211635;
}

.source-btn.delete{

    color:#ff7383;

    border:
        1px solid
        #71303b;

    background:#32151e;
}


/* MODAL */

.amc-modal{

    position:fixed;

    inset:0;

    z-index:1000;

    display:grid;

    place-items:center;

    padding:20px;

    background:
        rgba(2,5,12,.76);

    backdrop-filter:
        blur(7px);
}

.amc-modal.hidden{

    display:none !important;
}

.amc-modal-card{

    width:
        min(
            500px,
            100%
        );

    overflow:hidden;

    border:
        1px solid
        #303956;

    border-radius:17px;

    background:
        linear-gradient(
            145deg,
            #141b2b,
            #0c111e
        );

    box-shadow:
        0 40px 120px
        rgba(0,0,0,.55);
}

.amc-modal-header{

    padding:
        17px
        19px;

    display:flex;

    justify-content:space-between;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}

.amc-modal-header h2{

    margin:0;

    font-size:17px;
}

.amc-modal-header p{

    margin:
        5px
        0
        0;

    color:#778399;

    font-size:10px;
}

.amc-modal-close{

    width:31px;
    height:31px;

    color:#9da7ba;

    border:
        1px solid
        #303952;

    border-radius:8px;

    background:#121827;

    cursor:pointer;

    font-size:19px;
}

.amc-modal form{

    padding:19px;
}

.amc-modal label{

    display:block;

    margin:
        14px
        0
        7px;

    color:#aab4c7;

    font-size:10px;
}

.amc-modal input,
.amc-modal textarea{

    width:100%;

    color:white;

    outline:0;

    border:
        1px solid
        #2b3450;

    border-radius:9px;

    background:#0c1220;

    padding:
        12px
        13px;
}

.amc-modal textarea{

    min-height:100px;

    resize:vertical;
}

.amc-form-error{

    min-height:20px;

    margin-top:10px;

    color:#ff6879;

    font-size:10px;
}

.amc-modal-actions{

    display:flex;

    justify-content:flex-end;

    gap:9px;

    margin-top:10px;
}


.tunnel-form-grid{
    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:12px;
}

.amc-modal-select{
    width:100%;

    padding:
        12px
        13px;

    color:white;

    border:
        1px solid
        #2b3450;

    border-radius:9px;

    outline:0;

    background:#0c1220;
}

@media(max-width:650px){

    .tunnel-form-grid{
        grid-template-columns:1fr;
    }

}

.auto-tunnel-info{

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:9px;

    margin-top:17px;
}

.auto-tunnel-info div{

    padding:
        11px
        12px;

    border:
        1px solid
        #29324b;

    border-radius:10px;

    background:#101725;
}

.auto-tunnel-info span{

    display:block;

    margin-bottom:5px;

    color:#747f95;

    font-size:8px;

    text-transform:uppercase;

    letter-spacing:.7px;
}

.auto-tunnel-info strong{

    display:block;

    color:#d3dae8;

    font-size:10px;

    overflow-wrap:anywhere;
}


.auto-note{

    margin-top:13px;

    padding:
        11px
        12px;

    color:#9b8bbf;

    border:
        1px solid
        rgba(143,74,255,.25);

    border-radius:10px;

    background:
        rgba(130,62,255,.07);

    font-size:9px;

    line-height:1.6;
}

.auto-note i{

    margin-right:6px;

    color:#b667ff;
}


.auto-capacity-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:24px;

    padding:
        0
        9px;

    color:#bd7aff;

    border:
        1px solid
        #5a347f;

    border-radius:20px;

    background:#21142f;

    font-size:8px;

    font-weight:800;
}


.amc-script-modal-card{
    width:min(820px,96vw) !important;
}

.amc-script-body{
    padding:18px;
}

#mikrotikScriptBox{
    width:100%;
    height:430px;

    padding:15px;

    resize:vertical;

    color:#d9e0ef;

    border:1px solid #2d3752;
    border-radius:10px;

    outline:none;

    background:#080e19;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:12px;
    line-height:1.55;
}

.amc-script-actions{
    display:flex;

    justify-content:flex-end;

    margin-top:12px;
}



/* ==========================================================
   AMC TV SOURCE POOL
   ========================================================== */

.pool-traffic-box{

    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:11px;

    margin-top:8px;
}


.pool-traffic-box div{

    min-height:82px;

    padding:15px;

    border:
        1px solid
        #273149;

    border-radius:11px;

    background:#111827;
}


.pool-traffic-box span{

    display:block;

    margin-bottom:8px;

    color:#78849a;

    font-size:9px;
}


.pool-traffic-box strong{

    display:block;

    color:#d9dfed;

    font-size:18px;
}


.pool-member-badge{

    display:inline-flex;

    min-width:70px;

    height:25px;

    padding:
        0
        9px;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    font-size:8px;

    font-weight:700;
}


.pool-member-badge.available{

    color:#42e49b;

    border:
        1px solid
        #286d4e;

    background:#123b29;
}


.pool-member-badge.waiting{

    color:#e6bd65;

    border:
        1px solid
        #725d31;

    background:#332a17;
}


.pool-member-badge.disabled{

    color:#ff7182;

    border:
        1px solid
        #74303d;

    background:#351720;
}


@media(max-width:650px){

    .pool-traffic-box{

        grid-template-columns:
            1fr;

    }

}


.lb-policy-grid{

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:11px;

    margin-top:8px;
}


.lb-policy-grid div{

    min-height:78px;

    padding:14px;

    border:
        1px solid
        #273149;

    border-radius:11px;

    background:#111827;
}


.lb-policy-grid span{

    display:block;

    margin-bottom:8px;

    color:#78849a;

    font-size:9px;
}


.lb-policy-grid strong{

    color:#dbe1ee;

    font-size:14px;
}


@media(max-width:650px){

    .lb-policy-grid{
        grid-template-columns:1fr;
    }

}

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

.tv-service-select{
    min-height:96px;
    padding:14px;
    display:flex;
    align-items:center;
    gap:13px;
    text-align:left;
    color:#d9dfed;
    border:1px solid #283149;
    border-radius:12px;
    background:#111827;
    cursor:pointer;
}

.tv-service-select.active{
    border-color:#7542bd;
    background:
        linear-gradient(
            145deg,
            #17152b,
            #111827
        );
}

.tv-service-select-icon{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:13px;
    color:#bd75ff;
    border:1px solid #623c8c;
    background:#241637;
}

.tv-service-select strong,
.tv-service-select span,
.tv-service-select small{
    display:block;
}

.tv-service-select span{
    margin-top:5px;
    color:#79859a;
    font-size:9px;
}

.tv-service-select small{
    margin-top:7px;
    font-size:8px;
}

.service-registry-grid{
    display:grid;
    grid-template-columns:
        minmax(0,.9fr)
        minmax(0,1.1fr);
    min-height:360px;
}

.service-registry-section{
    padding:17px;
}

.service-registry-section
+ .service-registry-section{
    border-left:
        1px solid
        rgba(255,255,255,.06);
}

.service-registry-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
}

.service-registry-title h3{
    margin:0;
    font-size:12px;
}

.service-registry-title span{
    min-width:28px;
    height:22px;
    padding:0 7px;
    display:grid;
    place-items:center;
    color:#bb7cff;
    border:1px solid #503275;
    border-radius:20px;
    background:#21142f;
    font-size:8px;
}

.service-registry-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.registry-row{
    min-height:68px;
    padding:11px 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:1px solid #273149;
    border-radius:10px;
    background:#101725;
}

.registry-row strong,
.registry-row span{
    display:block;
}

.registry-row strong{
    color:#d8dfed;
    font-size:10px;
}

.registry-row span{
    margin-top:5px;
    color:#78849a;
    font-size:8px;
}

.registry-empty{
    min-height:95px;
    display:grid;
    place-items:center;
    color:#68748a;
    border:1px dashed #283149;
    border-radius:10px;
    font-size:9px;
}

@media(max-width:850px){

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

    .service-registry-section
    + .service-registry-section{
        border-left:0;
        border-top:
            1px solid
            rgba(255,255,255,.06);
    }
}

@media(max-width:650px){

    .tv-service-cards{
        grid-template-columns:1fr;
    }
}


/* ==========================================================
   AMC TV CLIENTS
   ========================================================== */

.client-duration-grid{

    display:grid;

    grid-template-columns:
        1fr 72px;

    gap:9px;

    align-items:center;
}


.client-duration-grid span{

    height:42px;

    display:grid;

    place-items:center;

    color:#8894a9;

    border:
        1px solid
        #2a344c;

    border-radius:9px;

    background:#111827;

    font-size:10px;
}


.amc-modal-card textarea,
.amc-modal-card select{

    width:100%;

    border:
        1px solid
        #2a344c;

    border-radius:9px;

    background:#0e1523;

    color:#dce3f0;

    outline:none;
}


.amc-modal-card select{

    height:42px;

    padding:
        0
        12px;
}


.amc-modal-card textarea{

    padding:11px 12px;

    resize:vertical;

    min-height:82px;
}


.amc-small-modal{

    max-width:430px;
}


.pool-member-badge.offline{

    color:#9aa6ba;

    border:
        1px solid
        #3a455b;

    background:#1b2230;
}