:root{
 --v2-bg:#050711;
 --v2-sidebar:#070a13;
 --v2-panel:#0b101d;
 --v2-panel-2:#0f1626;
 --v2-panel-3:#111a2d;

 --v2-line:rgba(148,163,184,.12);
 --v2-line-strong:rgba(148,163,184,.20);

 --v2-text:#f8fafc;
 --v2-muted:#8391a7;
 --v2-soft:#b7c2d4;

 --v2-cyan:#22d3ee;
 --v2-blue:#5b8cff;
 --v2-purple:#8b5cf6;

 --v2-green:#34d399;
 --v2-yellow:#fbbf24;
 --v2-red:#fb7185;

 --v2-sidebar-width:282px;
 --v2-top-height:74px;

 --v2-radius:18px;
 --v2-shadow:
  0 18px 60px rgba(0,0,0,.24);
}


/* ================================
   BASE
   ================================ */

html{
 background:var(--v2-bg);
}

body{
 background:
  radial-gradient(
   circle at 16% -10%,
   rgba(34,211,238,.08),
   transparent 27%
  ),
  radial-gradient(
   circle at 92% 12%,
   rgba(139,92,246,.08),
   transparent 24%
  ),
  var(--v2-bg)!important;
 color:var(--v2-text);
}

body::-webkit-scrollbar,
.sidebar::-webkit-scrollbar{
 width:7px;
}

body::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb{
 background:#1e293b;
 border-radius:999px;
}


/* ================================
   APP SHELL
   ================================ */

.layout{
 display:grid!important;
 grid-template-columns:
  var(--v2-sidebar-width)
  minmax(0,1fr)!important;
 min-height:100vh;
}

.main{
 min-width:0;
}


/* ================================
   SIDEBAR
   ================================ */

.sidebar{
 position:fixed!important;
 inset:0 auto 0 0;
 z-index:70;

 width:var(--v2-sidebar-width);
 height:100vh!important;

 display:flex;
 flex-direction:column;

 padding:16px 13px 14px!important;

 background:
  linear-gradient(
   180deg,
   rgba(10,14,27,.985),
   rgba(5,8,17,.985)
  )!important;

 border-right:1px solid var(--v2-line)!important;

 backdrop-filter:
  blur(24px)
  saturate(120%);

 overflow:hidden!important;
}

.brand{
 min-height:72px;

 display:flex!important;
 align-items:center;
 gap:12px!important;

 padding:8px 10px 15px!important;

 border-bottom:
  1px solid rgba(148,163,184,.08);
}

.brand-icon{
 width:46px!important;
 height:46px!important;

 flex:0 0 46px;

 padding:0!important;

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

 border-radius:15px!important;

 background:
  linear-gradient(
   145deg,
   rgba(34,211,238,.08),
   rgba(139,92,246,.08)
  )!important;

 border:
  1px solid rgba(103,232,249,.16);

 overflow:hidden;
}

.brand-icon img{
 width:42px;
 height:42px;
 display:block;
}

.brand-copy{
 min-width:0;
}

.brand-copy strong{
 display:block;

 font-size:15px;
 font-weight:850;

 letter-spacing:-.01em;

 color:#fff;
}

.brand-copy small{
 display:block;

 margin-top:3px;

 color:var(--v2-muted);

 font-size:10.5px;
 letter-spacing:.025em;
}

.brand-version{
 margin-left:auto;

 padding:3px 6px;

 border-radius:7px;

 background:rgba(34,211,238,.08);

 border:
  1px solid rgba(34,211,238,.12);

 color:#67e8f9;

 font-size:8px;
 font-weight:850;
}


.nav-scroll{
 flex:1;

 margin-top:10px;

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

 padding-right:3px;
}

.nav{
 display:block!important;
}

.nav-group{
 padding-bottom:9px;
 margin-bottom:5px;
}

.nav-title{
 padding:
  10px
  11px
  6px!important;

 color:#526178!important;

 font-size:9px!important;

 font-weight:900!important;

 letter-spacing:.16em!important;

 text-transform:uppercase;
}

.nav a{
 position:relative;

 min-height:42px;

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

 gap:11px!important;

 padding:
  9px
  11px!important;

 margin:2px 0!important;

 border-radius:11px!important;

 border:
  1px solid transparent;

 color:#9aa8bc!important;

 font-size:12px!important;
 font-weight:600;

 transition:
  background .16s ease,
  color .16s ease,
  border-color .16s ease,
  transform .16s ease;
}

.nav a:hover{
 color:#fff!important;

 background:
  rgba(255,255,255,.042)!important;

 border-color:
  rgba(148,163,184,.08);

 transform:translateX(2px);
}

.nav a.active{
 color:#fff!important;

 background:
  linear-gradient(
   90deg,
   rgba(34,211,238,.115),
   rgba(91,140,255,.08),
   rgba(139,92,246,.075)
  )!important;

 border:
  1px solid rgba(34,211,238,.13)!important;
}

.nav a.active::before{
 content:"";

 position:absolute;

 left:-13px;
 top:9px;
 bottom:9px;

 width:3px;

 border-radius:
  0 5px 5px 0;

 background:
  linear-gradient(
   180deg,
   var(--v2-cyan),
   var(--v2-purple)
  );

 box-shadow:
  0 0 14px rgba(34,211,238,.45);
}

.nav-icon{
 width:22px;
 height:22px;

 flex:0 0 22px;

 display:grid;
 place-items:center;

 border-radius:7px;

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

 color:#93a4bd;

 font-size:11px;
 font-weight:850;
}

.nav a:hover .nav-icon,
.nav a.active .nav-icon{
 color:#e0f2fe;

 background:
  rgba(34,211,238,.075);
}


.sidebar-foot{
 margin-top:10px;

 padding:11px;

 border-radius:13px;

 background:
  linear-gradient(
   145deg,
   rgba(15,23,42,.72),
   rgba(9,14,27,.72)
  );

 border:
  1px solid var(--v2-line);
}

.sidebar-foot-row{
 display:flex;
 align-items:center;
 gap:8px;

 font-size:10px;
 color:var(--v2-soft);
}

.sidebar-foot small{
 display:block;

 margin-top:5px;

 color:#526178;

 font-size:9px;
}

.engine-dot{
 width:7px;
 height:7px;

 border-radius:50%;

 background:var(--v2-green);

 box-shadow:
  0 0 12px rgba(52,211,153,.7);
}

.engine-dot.off{
 background:var(--v2-red);
 box-shadow:
  0 0 12px rgba(251,113,133,.55);
}


/* ================================
   TOPBAR
   ================================ */

.top{
 position:sticky!important;
 top:0;
 z-index:50;

 height:var(--v2-top-height)!important;

 padding:
  0
  28px!important;

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

 background:
  rgba(5,7,17,.79)!important;

 border-bottom:
  1px solid var(--v2-line)!important;

 backdrop-filter:
  blur(20px)
  saturate(130%);
}

.top-left,
.top-right{
 display:flex;
 align-items:center;
 gap:12px;
}

.sidebar-toggle{
 width:38px;
 height:38px;

 display:grid;
 place-items:center;

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

 border-radius:11px;

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

 color:#cbd5e1;

 cursor:pointer;

 font-size:16px;
}

.sidebar-toggle:hover{
 color:#fff;
 border-color:
  rgba(34,211,238,.22);
}

.page-context{
 min-width:0;
}

.page-context strong{
 display:block;

 color:#e8edf6;

 font-size:12px;
}

.page-context span{
 display:block;

 margin-top:2px;

 color:var(--v2-muted);

 font-size:9px;
}

.status{
 padding:
  6px
  9px;

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

 border-radius:999px;

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

 font-size:10px!important;
}

.status .dot{
 width:6px!important;
 height:6px!important;
}

.user-v2{
 display:flex;
 align-items:center;
 gap:9px;
}

.user-avatar{
 width:34px;
 height:34px;

 display:grid;
 place-items:center;

 border-radius:10px;

 background:
  linear-gradient(
   135deg,
   rgba(34,211,238,.13),
   rgba(139,92,246,.13)
  );

 border:
  1px solid rgba(103,232,249,.12);

 color:#dbeafe;

 font-size:11px;
 font-weight:900;
}

.user-v2-copy{
 max-width:210px;
}

.user-v2-copy strong{
 display:block;

 overflow:hidden;

 color:#dce5f2;

 font-size:10px;

 text-overflow:ellipsis;
 white-space:nowrap;
}

.user-v2-copy small{
 display:block;

 margin-top:2px;

 color:#65748a;

 font-size:8px;
}

.logout{
 padding:
  8px
  10px!important;

 border:
  1px solid var(--v2-line)!important;

 border-radius:9px!important;

 background:
  rgba(255,255,255,.025)!important;

 color:#aab6c7!important;

 font-size:10px!important;
}

.logout:hover{
 color:#fff!important;

 border-color:
  rgba(251,113,133,.25)!important;

 background:
  rgba(251,113,133,.05)!important;
}


/* ================================
   MAIN CONTENT
   ================================ */

.layout > .main{
 grid-column:2;
}

.content{
 width:100%!important;
 max-width:1680px!important;

 margin:0 auto!important;

 padding:
  27px
  30px
  55px!important;
}

.head{
 align-items:center!important;
 margin-bottom:20px!important;
}

.head h1{
 margin:0 0 5px!important;

 font-size:25px!important;

 font-weight:850!important;

 letter-spacing:-.025em;
}

.head p{
 color:var(--v2-muted)!important;
 font-size:11px!important;
}

.badge{
 border:
  1px solid var(--v2-line)!important;

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

 color:#aab6c7!important;

 font-size:9px!important;
}


/* ================================
   PANELS / CARDS
   ================================ */

.grid{
 gap:12px!important;
}

.card,
.panel{
 border:
  1px solid var(--v2-line)!important;

 background:
  linear-gradient(
   155deg,
   rgba(15,22,38,.90),
   rgba(8,13,25,.92)
  )!important;

 box-shadow:
  0 15px 45px rgba(0,0,0,.12)!important;
}

.card{
 min-height:100px;

 padding:15px!important;

 border-radius:15px!important;
}

.card:hover{
 border-color:
  rgba(91,140,255,.18)!important;
}

.kpi-label{
 font-size:9px!important;
 font-weight:750;

 letter-spacing:.03em;

 color:#78879b!important;
}

.kpi-number{
 margin-top:7px!important;

 font-size:26px!important;
 font-weight:900!important;

 letter-spacing:-.04em;
}

.panel{
 border-radius:16px!important;
}

.panel-head{
 padding:
  14px
  16px!important;
}

.panel-head h3{
 font-size:12px!important;
}

.panel-body{
 padding:16px!important;
}


/* ================================
   CONTROLS
   ================================ */

.btn{
 min-height:34px;

 padding:
  8px
  12px!important;

 border-radius:9px!important;

 font-size:10px!important;

 box-shadow:none!important;
}

input,
select,
textarea{
 border-color:
  var(--v2-line)!important;

 border-radius:10px!important;

 background:
  rgba(4,8,17,.76)!important;
}

input:focus,
select:focus,
textarea:focus{
 border-color:
  rgba(34,211,238,.30)!important;

 outline:none;

 box-shadow:
  0 0 0 3px rgba(34,211,238,.055);
}

table{
 font-size:11px!important;
}

th{
 font-size:9px!important;
 letter-spacing:.025em;
}


/* ================================
   LOGIN
   ================================ */

.login{
 width:min(420px,calc(100% - 30px))!important;

 padding:32px!important;

 border-radius:24px!important;

 background:
  linear-gradient(
   160deg,
   rgba(15,22,38,.92),
   rgba(7,12,23,.95)
  )!important;

 border:
  1px solid var(--v2-line)!important;

 box-shadow:
  0 32px 100px rgba(0,0,0,.38)!important;
}

.login .logo{
 width:64px!important;
 height:64px!important;

 padding:5px;

 background:
  rgba(255,255,255,.025)!important;

 border:
  1px solid rgba(34,211,238,.14);
}

.login .logo img{
 width:100%;
 height:100%;
 display:block;
}

.login h1{
 margin:
  19px 0 5px!important;

 font-size:23px!important;

 letter-spacing:-.025em;
}

.login .sub{
 margin-bottom:24px!important;

 color:var(--v2-muted)!important;

 font-size:11px;
}


/* ================================
   COLLAPSED DESKTOP
   ================================ */

@media(min-width:901px){

 body.sidebar-collapsed{
  --v2-sidebar-width:78px;
 }

 body.sidebar-collapsed .brand{
  justify-content:center;
  padding-left:0!important;
  padding-right:0!important;
 }

 body.sidebar-collapsed .brand-copy,
 body.sidebar-collapsed .brand-version,
 body.sidebar-collapsed .nav-title,
 body.sidebar-collapsed .nav-label,
 body.sidebar-collapsed .sidebar-foot{
  display:none!important;
 }

 body.sidebar-collapsed .nav a{
  justify-content:center;

  padding:
   9px 5px!important;
 }

 body.sidebar-collapsed .nav-icon{
  width:30px;
  height:30px;

  flex-basis:30px;
 }

 body.sidebar-collapsed .nav a.active::before{
  left:-13px;
 }
}


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

.sidebar-overlay{
 display:none;
}

@media(max-width:900px){

 .layout{
  display:block!important;
 }

 .layout > .main{
  grid-column:auto;
 }

 .sidebar{
  width:min(300px,86vw);

  transform:translateX(-104%);

  box-shadow:
   30px 0 80px rgba(0,0,0,.42);

  transition:
   transform .20s ease;
 }

 body.nav-open .sidebar{
  transform:translateX(0);
 }

 .sidebar-overlay{
  position:fixed;
  inset:0;

  z-index:60;

  display:block;

  pointer-events:none;

  background:
   rgba(1,4,12,.62);

  opacity:0;

  backdrop-filter:blur(3px);

  transition:
   opacity .20s ease;
 }

 body.nav-open .sidebar-overlay{
  opacity:1;
  pointer-events:auto;
 }

 .top{
  height:66px!important;

  padding:
   0
   14px!important;
 }

 .content{
  padding:
   20px
   14px
   45px!important;
 }

 .user-v2-copy{
  display:none;
 }

 .status{
  display:none!important;
 }

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

 .two,
 .editor{
  grid-template-columns:1fr!important;
 }
}


@media(max-width:560px){

 .grid{
  grid-template-columns:1fr!important;
 }

 .top-right{
  gap:6px;
 }

 .logout{
  font-size:0!important;
 }

 .logout::after{
  content:"↗";
  font-size:13px;
 }

 .head{
  align-items:flex-start!important;
  flex-direction:column;
 }

 .content{
  padding-top:17px!important;
 }

 table{
  min-width:680px;
 }
}


/* =========================================================
   OVERVIEW V2
   ========================================================= */

.overview-hero{
 display:flex;
 align-items:flex-end;
 justify-content:space-between;
 gap:20px;

 margin-bottom:19px;

 padding:
  8px
  2px;
}

.overview-eyebrow,
.overview-section-label{
 color:#53627a;

 font-size:8px;
 font-weight:950;

 letter-spacing:.16em;
}

.overview-hero h1{
 margin:
  5px 0 5px;

 font-size:27px;

 line-height:1.12;

 font-weight:900;

 letter-spacing:-.035em;
}

.overview-hero p{
 max-width:680px;

 margin:0;

 color:#8492a7;

 font-size:11px;

 line-height:1.6;
}

.overview-hero-right{
 display:flex;
 align-items:center;
 gap:9px;
}

.overview-live-pill,
.overview-time{
 display:inline-flex;
 align-items:center;
 gap:7px;

 padding:
  7px
  9px;

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

 border-radius:9px;

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

 color:#8d9bb0;

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

.overview-live-pill i{
 width:6px;
 height:6px;

 border-radius:50%;

 background:var(--v2-green);

 box-shadow:
  0 0 11px
  rgba(52,211,153,.65);
}

.overview-live-pill i.off{
 background:var(--v2-red);

 box-shadow:
  0 0 11px
  rgba(251,113,133,.60);
}


/* KPI */

.overview-kpis{
 display:grid;

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

 gap:11px;

 margin-bottom:14px;
}

.overview-kpi{
 min-height:131px;

 display:block;

 padding:15px;

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

 border-radius:15px;

 background:
  linear-gradient(
   155deg,
   rgba(15,22,38,.91),
   rgba(8,13,25,.92)
  );

 transition:
  transform .15s ease,
  border-color .15s ease;
}

.overview-kpi:hover{
 transform:translateY(-2px);

 border-color:
  rgba(91,140,255,.23);
}

.overview-kpi-top{
 display:flex;
 align-items:center;
 justify-content:space-between;
}

.overview-kpi-icon{
 min-width:30px;
 height:28px;

 padding:0 7px;

 display:grid;
 place-items:center;

 border-radius:8px;

 font-size:8px;
 font-weight:950;
}

.overview-kpi-icon.cyan{
 color:#67e8f9;
 background:rgba(34,211,238,.08);
}

.overview-kpi-icon.purple{
 color:#c4b5fd;
 background:rgba(139,92,246,.09);
}

.overview-kpi-icon.green{
 color:#6ee7b7;
 background:rgba(52,211,153,.08);
}

.overview-kpi-icon.blue{
 color:#93c5fd;
 background:rgba(91,140,255,.09);
}

.overview-kpi-status{
 color:#53627a;

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

.overview-kpi > strong{
 display:block;

 margin-top:13px;

 color:#fff;

 font-size:25px;
 font-weight:900;

 letter-spacing:-.04em;
}

.overview-kpi-label{
 margin-top:2px;

 color:#a9b5c7;

 font-size:10px;
 font-weight:700;
}

.overview-kpi small{
 display:block;

 margin-top:5px;

 color:#5f6e83;

 font-size:8px;
}


/* MAIN GRIDS */

.overview-grid-main{
 display:grid;

 grid-template-columns:
  minmax(0,1.65fr)
  minmax(285px,.70fr);

 gap:13px;

 margin-bottom:13px;
}

.overview-grid-secondary{
 display:grid;

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

 gap:13px;

 margin-bottom:13px;
}

.overview-panel{
 overflow:hidden;

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

 border-radius:16px;

 background:
  linear-gradient(
   155deg,
   rgba(14,21,36,.90),
   rgba(7,12,23,.94)
  );

 box-shadow:
  0 18px 50px
  rgba(0,0,0,.10);
}

.overview-panel-head{
 min-height:64px;

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

 gap:12px;

 padding:
  13px
  15px;

 border-bottom:
  1px solid rgba(148,163,184,.08);
}

.overview-panel-head h2{
 margin:
  3px 0 0;

 font-size:12px;
 font-weight:850;

 letter-spacing:-.012em;
}

.overview-link{
 color:#73849d;

 font-size:8px;
 font-weight:750;
}

.overview-link:hover{
 color:#67e8f9;
}


/* TRAFFIC */

.activity-panel{
 min-height:287px;
}

.traffic-summary{
 display:flex;
 align-items:flex-end;
 justify-content:space-between;

 padding:
  15px
  16px 5px;
}

.traffic-summary span{
 display:block;

 color:#65748b;

 font-size:8px;
}

.traffic-summary strong{
 display:block;

 margin-top:2px;

 font-size:20px;
 font-weight:900;
}

.traffic-legend{
 color:#506078;

 font-size:8px;
}

.traffic-chart{
 height:180px;

 display:grid;

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

 gap:9px;

 align-items:end;

 padding:
  14px
  17px 16px;
}

.traffic-column{
 height:100%;

 display:grid;

 grid-template-rows:
  16px
  1fr
  14px;

 gap:4px;

 text-align:center;
}

.traffic-value,
.traffic-day{
 color:#526178;

 font-size:7px;
 font-weight:700;
}

.traffic-bar-track{
 height:100%;

 display:flex;
 align-items:flex-end;

 overflow:hidden;

 border-radius:7px;

 background:
  rgba(255,255,255,.023);
}

.traffic-bar{
 width:100%;

 min-height:3px;

 border-radius:
  7px
  7px
  3px
  3px;

 background:
  linear-gradient(
   180deg,
   #8b5cf6,
   #5b8cff 52%,
   #22d3ee
  );

 box-shadow:
  0 -8px 25px
  rgba(91,140,255,.12);
}


/* SYSTEM HEALTH */

.system-health-list{
 padding:8px 14px 13px;
}

.system-health-row{
 min-height:37px;

 display:flex;
 align-items:center;

 gap:9px;

 border-bottom:
  1px solid rgba(148,163,184,.055);
}

.system-health-row:last-child{
 border-bottom:0;
}

.system-health-dot{
 width:7px;
 height:7px;

 flex:0 0 7px;

 border-radius:50%;
}

.system-health-dot.healthy{
 background:var(--v2-green);
}

.system-health-dot.warning{
 background:var(--v2-yellow);
}

.system-health-dot.critical{
 background:var(--v2-red);
}

.system-health-dot.locked{
 background:#8b5cf6;
}

.system-health-row strong{
 display:block;

 color:#c4cfde;

 font-size:9px;
}

.system-health-row small{
 display:block;

 margin-top:1px;

 color:#53627a;

 font-size:7px;
}


/* CRM */

.customer-list,
.order-list,
.lifecycle-list{
 padding:
  6px
  14px
  11px;
}

.customer-row{
 min-height:53px;

 display:flex;
 align-items:center;

 gap:10px;

 border-bottom:
  1px solid rgba(148,163,184,.055);
}

.customer-row:last-child{
 border-bottom:0;
}

.customer-row:hover{
 background:
  rgba(255,255,255,.018);
}

.customer-avatar{
 width:31px;
 height:31px;

 flex:0 0 31px;

 display:grid;
 place-items:center;

 border-radius:9px;

 background:
  linear-gradient(
   135deg,
   rgba(34,211,238,.10),
   rgba(139,92,246,.10)
  );

 border:
  1px solid rgba(103,232,249,.08);

 color:#c7d2fe;

 font-size:8px;
 font-weight:900;
}

.customer-main{
 min-width:0;
 flex:1;
}

.customer-main strong{
 display:block;

 overflow:hidden;

 color:#cbd5e1;

 font-size:9px;

 text-overflow:ellipsis;
 white-space:nowrap;
}

.customer-main small{
 display:block;

 margin-top:3px;

 color:#526178;

 font-size:7px;
}

.customer-meta{
 display:flex;
 align-items:center;
 gap:5px;
}

.unread-pill{
 min-width:21px;

 padding:
  3px
  6px;

 border-radius:999px;

 background:
  rgba(34,211,238,.10);

 color:#67e8f9;

 text-align:center;

 font-size:7px;
 font-weight:900;
}

.paused-pill{
 padding:
  3px
  5px;

 border-radius:5px;

 background:
  rgba(251,191,36,.08);

 color:#fcd34d;

 font-size:6px;
 font-weight:900;
}


/* ORDERS */

.order-row{
 min-height:55px;

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

 gap:10px;

 border-bottom:
  1px solid rgba(148,163,184,.055);
}

.order-row:last-child{
 border-bottom:0;
}

.order-row strong{
 display:block;

 color:#cbd5e1;

 font-size:9px;
}

.order-row small{
 color:#53627a;

 font-size:7px;
}

.order-row-right{
 text-align:right;
}

.order-row-right > strong small{
 font-size:6px;
 font-weight:700;
}

.order-status{
 display:inline-flex;

 margin-top:3px;

 padding:
  3px
  5px;

 border-radius:5px;

 font-size:6px;
 font-weight:900;
}

.order-status.activated{
 background:
  rgba(52,211,153,.08);

 color:#6ee7b7;
}

.order-status.expired{
 background:
  rgba(251,113,133,.08);

 color:#fda4af;
}

.order-status.pending{
 background:
  rgba(251,191,36,.08);

 color:#fde68a;
}


/* LIFECYCLE */

.lifecycle-row{
 min-height:48px;

 display:flex;
 align-items:center;

 gap:10px;

 border-bottom:
  1px solid rgba(148,163,184,.055);
}

.lifecycle-row:last-child{
 border-bottom:0;
}

.timeline-dot{
 width:8px;
 height:8px;

 flex:0 0 8px;

 border-radius:50%;

 border:
  2px solid #5b8cff;

 background:#0b1020;

 box-shadow:
  0 0 12px
  rgba(91,140,255,.25);
}

.lifecycle-row strong{
 display:block;

 color:#c7d2e0;

 font-size:9px;
}

.lifecycle-row small{
 display:block;

 margin-top:3px;

 color:#526178;

 font-size:7px;
}


/* SAFETY */

.safety-grid{
 display:grid;

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

 gap:7px;

 padding:13px;
}

.safety-item{
 min-height:41px;

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

 gap:10px;

 padding:
  8px
  10px;

 border:
  1px solid rgba(148,163,184,.07);

 border-radius:9px;

 background:
  rgba(255,255,255,.018);
}

.safety-item span{
 color:#8997aa;

 font-size:8px;
}

.safety-item b{
 font-size:7px;
}

.safety-item b.healthy{
 color:#6ee7b7;
}

.safety-item b.warning{
 color:#fde68a;
}

.safety-item b.critical{
 color:#fda4af;
}

.safety-item b.locked{
 color:#c4b5fd;
}


/* QUICK ACTIONS */

.quick-actions-panel{
 margin-bottom:10px;
}

.quick-action-grid{
 display:grid;

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

 gap:8px;

 padding:12px;
}

.quick-action-grid a{
 min-height:80px;

 padding:11px;

 border:
  1px solid rgba(148,163,184,.075);

 border-radius:11px;

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

 transition:
  transform .15s ease,
  border-color .15s ease,
  background .15s ease;
}

.quick-action-grid a:hover{
 transform:translateY(-2px);

 border-color:
  rgba(34,211,238,.17);

 background:
  rgba(34,211,238,.025);
}

.quick-action-grid a > span{
 display:inline-flex;

 padding:
  3px 5px;

 border-radius:5px;

 background:
  rgba(91,140,255,.07);

 color:#93c5fd;

 font-size:6px;
 font-weight:950;
}

.quick-action-grid strong{
 display:block;

 margin-top:9px;

 color:#cbd5e1;

 font-size:9px;
}

.quick-action-grid small{
 display:block;

 margin-top:3px;

 color:#526178;

 font-size:7px;
}

.overview-empty{
 padding:25px 5px;

 color:#53627a;

 text-align:center;

 font-size:8px;
}


/* RESPONSIVE */

@media(max-width:1200px){

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

 .overview-grid-main{
  grid-template-columns:1fr;
 }

 .quick-action-grid{
  grid-template-columns:
   repeat(3,minmax(0,1fr));
 }
}


@media(max-width:800px){

 .overview-grid-secondary{
  grid-template-columns:1fr;
 }

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

 .overview-hero-right{
  flex-wrap:wrap;
 }

 .traffic-chart{
  gap:5px;
 }
}


@media(max-width:560px){

 .overview-kpis{
  grid-template-columns:1fr;
 }

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

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

 .overview-live-pill,
 .overview-time{
  font-size:7px;
 }
}