/*
 * SuperLab visual layer
 * UI/branding redesign over the existing RouterOS-compatible core.
 * Core RouterOS logic, voucher formats and legacy compatibility are intentionally untouched here.
 */
:root{
  --sl-bg:#f4f8fc;
  --sl-surface:#ffffff;
  --sl-surface-soft:#f8fbff;
  --sl-navy:#0d2742;
  --sl-navy-2:#143653;
  --sl-text:#16283b;
  --sl-muted:#6f8194;
  --sl-line:#dce8f3;
  --sl-blue:#1687e8;
  --sl-blue-2:#64bdf5;
  --sl-blue-soft:#eaf5ff;
  --sl-gold:#f2b632;
  --sl-gold-soft:#fff6dc;
  --sl-green:#27a96b;
  --sl-red:#e65d65;
  --sl-purple:#7657d7;
  --sl-shadow:0 10px 35px rgba(28,71,108,.09);
  --sl-shadow-hover:0 16px 45px rgba(28,71,108,.16);
  --sl-radius:16px;
  --sl-radius-sm:11px;
  --sl-sidebar:244px;
  --sl-nav-h:68px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.sl-app{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--sl-text)!important;
  background:
    radial-gradient(circle at 82% 4%,rgba(100,189,245,.14),transparent 28rem),
    linear-gradient(180deg,#f7fbff 0%,var(--sl-bg) 52%,#f6f9fc 100%)!important;
  min-height:100vh;
}
body.sl-app a{transition:color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease}
body.sl-app ::selection{background:#cae8ff;color:#102b45}
body.sl-app ::-webkit-scrollbar{width:8px;height:8px}
body.sl-app ::-webkit-scrollbar-track{background:transparent;border:0}
body.sl-app ::-webkit-scrollbar-thumb{background:#b8ccdd;border:0;border-radius:99px}

/* top bar */
body.sl-app .navbar{
  height:var(--sl-nav-h)!important;
  border:0!important;
  background:rgba(255,255,255,.91)!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 1px 0 rgba(26,73,110,.08),0 8px 28px rgba(30,74,108,.05);
  overflow:visible!important;
}
body.sl-app .navbar-left,body.sl-app .navbar-right{height:100%;display:flex;align-items:center}
body.sl-app .navbar-left a:not(#openNav):not(#closeNav),body.sl-app .navbar-right a{
  color:var(--sl-text)!important;
  padding:0 16px!important;
  height:100%;
  display:flex!important;
  align-items:center;
  justify-content:center;
}
body.sl-app #brand{
  min-width:var(--sl-sidebar)!important;
  justify-content:flex-start!important;
  padding-left:20px!important;
  color:#eaf5ff!important;
  background:linear-gradient(135deg,var(--sl-navy),#102f4d)!important;
  font-size:19px!important;
  font-weight:700!important;
  letter-spacing:.14em;
  position:relative;
}
body.sl-app #brand::before{
  content:"";
  width:38px;height:38px;
  margin-right:10px;
  flex:0 0 auto;
  background:url('../img/superlab-favicon.png') center/cover no-repeat;
  border-radius:11px;
  box-shadow:0 5px 16px rgba(0,0,0,.18);
}
body.sl-app #openNav,body.sl-app #closeNav{font-size:20px!important;color:var(--sl-navy)!important;width:56px;padding:0!important}
body.sl-app #cpage{
  font-weight:650;
  font-size:16px!important;
  color:var(--sl-navy)!important;
  justify-content:flex-start!important;
  max-width:34vw;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.sl-app .navbar-right{float:right;gap:2px;padding-right:12px}
body.sl-app .navbar-right .ses{
  float:none!important;
  height:36px!important;
  min-width:112px;
  margin:0 3px!important;
  padding:0 10px!important;
  border:1px solid var(--sl-line)!important;
  border-radius:10px!important;
  background:var(--sl-surface-soft)!important;
  color:var(--sl-text)!important;
  outline:none;
}
body.sl-app #logout{height:38px!important;margin:0 2px;border-radius:10px;color:#52687b!important}
body.sl-app #logout:hover{background:#fff0f1!important;color:#c5434d!important}

/* sidebar */
body.sl-app .sidenav{
  top:0!important;
  margin-top:var(--sl-nav-h)!important;
  background:linear-gradient(180deg,#0d2742 0%,#0b2239 100%)!important;
  border:0!important;
  box-shadow:10px 0 32px rgba(15,48,76,.08);
  padding:12px 10px 26px;
  width:var(--sl-sidebar);
  overflow-x:hidden;
  overflow-y:auto;
}
body.sl-app .sidenav .card-header{
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:12px!important;
  color:#fff!important;
  margin:0 2px 12px!important;
  padding:12px!important;
}
body.sl-app .sidenav .card-header h3{font-size:14px!important;letter-spacing:.04em;color:#eaf4fd!important}
body.sl-app .sidenav a,body.sl-app .sidenav .dropdown-btn{
  color:#c9d9e7!important;
  width:100%!important;
  margin:3px 0!important;
  padding:10px 11px!important;
  border-radius:11px!important;
  font-size:14px!important;
  line-height:1.25!important;
  background:transparent!important;
}
body.sl-app .sidenav a i,body.sl-app .sidenav .dropdown-btn i{
  color:#83b9e2!important;
  font-size:17px!important;
  width:24px;
  margin-right:7px!important;
  padding:0!important;
  text-align:center;
}
body.sl-app .sidenav a:hover,body.sl-app .sidenav .dropdown-btn:hover{
  color:#fff!important;
  background:rgba(83,166,230,.13)!important;
  transform:translateX(2px);
}
body.sl-app .sidenav .active{
  background:linear-gradient(135deg,rgba(28,138,232,.95),rgba(56,164,238,.78))!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(19,126,210,.22);
}
body.sl-app .sidenav .active i{color:#fff!important}
body.sl-app .dropdown-container{
  margin:3px 0 6px 11px;
  padding-left:7px;
  border-left:1px solid rgba(151,196,229,.18);
}
body.sl-app .dropdown-container a{font-size:13px!important;padding:8px 9px!important}
body.sl-app .fa-caret-down,body.sl-app .fa-caret-left{color:#7fa1ba!important;width:auto!important;float:right}
body.sl-app .sl-sidebar-footer{
  margin:28px 8px 8px;
  padding:15px 12px 6px;
  color:#8eabc1;
  font-size:10px;
  letter-spacing:.13em;
  line-height:1.65;
  border-top:1px solid rgba(255,255,255,.08);
}
body.sl-app .sl-sidebar-footer strong{display:block;color:#d8e7f2;font-size:11px;font-weight:600}
body.sl-app .sl-sidebar-footer::before{content:"";display:block;width:34px;height:3px;border-radius:5px;background:var(--sl-gold);margin-bottom:10px}

/* page body */
body.sl-app #main{margin-top:calc(var(--sl-nav-h) + 10px)!important;transition:margin-left .3s ease!important}
body.sl-app .main-container{padding:14px 18px 32px!important;max-width:1680px;margin:0 auto}
body.sl-app .row{margin-left:-5px;margin-right:-5px}
body.sl-app [class*="col-"]{padding-left:5px;padding-right:5px}

/* common surfaces */
body.sl-app .card,body.sl-app .box{
  border:1px solid rgba(196,216,232,.72)!important;
  background:rgba(255,255,255,.94)!important;
  color:var(--sl-text)!important;
  border-radius:var(--sl-radius)!important;
  box-shadow:var(--sl-shadow);
}
body.sl-app .card{margin:8px 5px 14px!important;overflow:hidden}
body.sl-app .box{margin:6px!important;padding:14px!important}
body.sl-app .card-header{
  background:linear-gradient(180deg,#fff,#f9fcff)!important;
  border:0!important;
  border-bottom:1px solid var(--sl-line)!important;
  border-radius:0!important;
  padding:13px 16px!important;
  margin:0!important;
}
body.sl-app .card-header h3{color:var(--sl-navy)!important;font-size:16px;font-weight:700;letter-spacing:-.01em}
body.sl-app .card-header h3 i{color:var(--sl-blue);margin-right:7px}
body.sl-app .card-body{padding:14px 16px 17px!important;margin:0!important}
body.sl-app .box-bordered{border:1px solid var(--sl-line)!important}
body.sl-app .box:hover{box-shadow:var(--sl-shadow-hover);transform:translateY(-2px)}
body.sl-app .box-group{display:flex;align-items:center;height:100%}
body.sl-app .box-group-icon{
  display:flex!important;align-items:center;justify-content:center;
  width:52px!important;height:52px!important;min-width:52px;
  margin:0 13px 0 0!important;padding:0!important;
  border:0!important;border-radius:15px!important;
  background:var(--sl-blue-soft)!important;color:var(--sl-blue)!important;
  font-size:23px!important;
}
body.sl-app .box-group-area{padding:0!important;color:var(--sl-muted)!important;line-height:1.55}
body.sl-app .box-group-area strong,body.sl-app .box-group-area b{color:var(--sl-text)}

/* semantic old color classes become modern accents */
body.sl-app .bg-blue,body.sl-app .bg-cyan,body.sl-app .bg-primary,body.sl-app .bg-info,
body.sl-app .bg-green,body.sl-app .bg-success,body.sl-app .bg-yellow,body.sl-app .bg-warning,
body.sl-app .bg-red,body.sl-app .bg-danger,body.sl-app .bg-purple,body.sl-app .bg-indigo{
  color:var(--sl-text)!important;background:#fff!important;border:1px solid var(--sl-line)!important;
}
body.sl-app .bg-blue::before,body.sl-app .bg-cyan::before,body.sl-app .bg-primary::before,body.sl-app .bg-info::before,
body.sl-app .bg-green::before,body.sl-app .bg-success::before,body.sl-app .bg-yellow::before,body.sl-app .bg-warning::before,
body.sl-app .bg-red::before,body.sl-app .bg-danger::before,body.sl-app .bg-purple::before,body.sl-app .bg-indigo::before{
  content:"";display:block;height:3px;border-radius:3px;margin:-14px -14px 11px;background:var(--sl-blue)
}
body.sl-app .bg-green::before,body.sl-app .bg-success::before{background:var(--sl-green)}
body.sl-app .bg-yellow::before,body.sl-app .bg-warning::before{background:var(--sl-gold)}
body.sl-app .bg-red::before,body.sl-app .bg-danger::before{background:var(--sl-red)}
body.sl-app .bg-purple::before,body.sl-app .bg-indigo::before{background:var(--sl-purple)}
body.sl-app .box a,body.sl-app [class*="bg-"] a{color:inherit!important}
body.sl-app .box h1{color:var(--sl-navy)!important;font-size:clamp(24px,2vw,34px);font-weight:760;letter-spacing:-.03em;margin:2px 0 5px!important}
body.sl-app .box h3{color:var(--sl-navy)!important}

/* dashboard */
body.sl-app .sl-dashboard-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:132px;
  margin:5px 5px 15px;
  padding:24px 28px;
  border:1px solid #dbeaf6;
  border-radius:22px;
  background:
    radial-gradient(circle at 91% 30%,rgba(255,255,255,.9),transparent 17rem),
    linear-gradient(120deg,#eaf5ff 0%,#f7fbff 47%,#edf6fd 100%);
  box-shadow:var(--sl-shadow);
}
body.sl-app .sl-dashboard-hero::after{
  content:"";position:absolute;right:-70px;bottom:-130px;width:330px;height:330px;
  border:1px solid rgba(22,135,232,.16);border-radius:50%;box-shadow:0 0 0 36px rgba(22,135,232,.035),0 0 0 74px rgba(22,135,232,.025)
}
body.sl-app .sl-hero-copy{position:relative;z-index:1}
body.sl-app .sl-eyebrow{display:inline-flex;align-items:center;gap:7px;color:#4c789d;font-size:11px;font-weight:750;letter-spacing:.13em;text-transform:uppercase;margin-bottom:7px}
body.sl-app .sl-eyebrow::before{content:"";width:22px;height:3px;background:var(--sl-gold);border-radius:9px}
body.sl-app .sl-dashboard-hero h1{margin:0;color:var(--sl-navy);font-size:clamp(25px,3vw,40px);line-height:1.08;letter-spacing:-.04em}
body.sl-app .sl-dashboard-hero p{margin:7px 0 0;color:var(--sl-muted);font-size:13px}
body.sl-app .sl-hero-actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:9px;justify-content:flex-end}
body.sl-app .sl-hero-actions a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;padding:10px 13px;border-radius:11px;background:#fff;color:var(--sl-navy);border:1px solid var(--sl-line);box-shadow:0 5px 15px rgba(33,80,117,.06);font-size:12px;font-weight:650}
body.sl-app .sl-hero-actions a:hover{transform:translateY(-2px);border-color:#b8d9f1}
body.sl-app .sl-hero-actions a.sl-primary{background:linear-gradient(135deg,#1687e8,#43a7ec);color:#fff;border-color:transparent}
body.sl-app #reloadHome #r_1{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 4px}
body.sl-app #reloadHome #r_1>.col-4{float:none!important;width:auto!important;padding:0!important}
body.sl-app #reloadHome #r_1 .box{min-height:105px!important;height:100%;display:flex;align-items:center}
body.sl-app .sl-dashboard-columns{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:10px;align-items:start}
body.sl-app .sl-dashboard-primary,body.sl-app .sl-dashboard-side{min-width:0}
body.sl-app #r_2 .card-body>.row,body.sl-app #r_ppp .card-body>.row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0}
body.sl-app #r_2 .card-body>.row>[class*="col-"],body.sl-app #r_ppp .card-body>.row>[class*="col-"]{float:none!important;width:auto!important;padding:0!important}
body.sl-app #r_2 .card-body>.row.mr-t-10,body.sl-app #r_ppp .card-body>.row.mr-t-10{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:9px!important}
body.sl-app #r_2 .box,body.sl-app #r_ppp .box{min-height:110px!important;position:relative;overflow:hidden}
body.sl-app #r_2 .box>div:last-child,body.sl-app #r_ppp .box>div:last-child{color:var(--sl-muted);font-size:12px}
body.sl-app #r_2 .box i,body.sl-app #r_ppp .box i{color:var(--sl-blue)}
body.sl-app #r_2 .bg-yellow i,body.sl-app #r_ppp .bg-yellow i{color:#c98a00}
body.sl-app #r_2 .bg-red i,body.sl-app #r_ppp .bg-red i{color:var(--sl-red)}
body.sl-app #r_4.box{min-height:120px!important}
body.sl-app #r_3 .card-body{padding-top:8px!important}
body.sl-app #r_3 .overflow{max-height:380px!important}

/* forms & tables */
body.sl-app .form-control,body.sl-app .group-item,body.sl-app input,body.sl-app select,body.sl-app textarea{
  border-color:#cdddea!important;border-radius:9px!important;color:var(--sl-text);outline:none;
}
body.sl-app input:not([type="checkbox"]):not([type="radio"]),body.sl-app select{min-height:36px}
body.sl-app .form-control:focus,body.sl-app .group-item:focus,body.sl-app input:focus,body.sl-app select:focus,body.sl-app textarea:focus{
  border-color:#7fc1ee!important;box-shadow:0 0 0 3px rgba(22,135,232,.11)!important
}
body.sl-app .btn,body.sl-app .btn-login,body.sl-app button{
  border-radius:10px!important;font-weight:650;transition:all .18s ease;border:1px solid transparent!important
}
body.sl-app .btn:hover,body.sl-app button:hover{transform:translateY(-1px);filter:brightness(.99)}
body.sl-app .btn.bg-primary,body.sl-app .btn-login.bg-primary{background:linear-gradient(135deg,#1687e8,#46a9ec)!important;color:#fff!important}
body.sl-app .btn.bg-green{background:#eaf9f1!important;color:#19784d!important;border-color:#cdebdc!important}
body.sl-app .btn.bg-danger{background:#fff0f1!important;color:#b93f48!important;border-color:#f4d0d3!important}
body.sl-app .table{border-collapse:separate!important;border-spacing:0;width:100%;background:#fff;border-radius:12px;overflow:hidden}
body.sl-app .table th{background:#f3f8fc!important;color:#496379!important;font-size:12px;font-weight:700;border-color:#deebf4!important}
body.sl-app .table td{border-color:#e5eef5!important;color:#2f4659}
body.sl-app .table tbody tr{transition:background .15s ease}
body.sl-app .table tbody tr:hover{background:#f8fbfe!important}
body.sl-app .overflow{border-radius:12px;max-width:100%;-webkit-overflow-scrolling:touch}

/* login */
body.sl-app .login-box{width:min(430px,92vw)!important;margin:0 auto!important;padding-top:8vh!important}
body.sl-app .login-box .card{box-shadow:0 24px 70px rgba(20,56,85,.16);border-radius:22px!important}
body.sl-app .login-box .card-header{display:none}
body.sl-app .sl-login-brand{text-align:center;padding:9px 8px 6px}
body.sl-app .sl-login-brand img{width:min(300px,78vw);max-height:225px;object-fit:cover;object-position:center;border-radius:18px;box-shadow:0 15px 40px rgba(12,36,57,.13)}
body.sl-app .sl-login-brand h1{font-size:25px;letter-spacing:.14em;margin:14px 0 3px;color:var(--sl-navy)}
body.sl-app .sl-login-brand p{margin:0;color:var(--sl-muted);font-size:12px;letter-spacing:.04em}
body.sl-app .login-box .table{background:transparent!important}
body.sl-app .login-box input{height:45px!important;padding:0 14px!important}
body.sl-app .login-box input[type=submit]{margin-top:12px!important;height:45px!important}
body.sl-app .sl-login-footer{text-align:center;color:#8a9aaa;font-size:10px;letter-spacing:.1em;padding:4px 0 7px}

/* modern status labels / alerts */
body.sl-app #notify{border:0!important;border-radius:12px!important;background:rgba(13,39,66,.9)!important;box-shadow:0 10px 34px rgba(0,0,0,.18)!important}
body.sl-app .text-green{color:var(--sl-green)!important}
body.sl-app .text-red{color:var(--sl-red)!important}
body.sl-app .text-blue{color:var(--sl-blue)!important}

/* dark selected theme keeps SuperLab identity while respecting user's theme control */
body.sl-app.sl-theme-dark{
  --sl-bg:#0f1720;--sl-surface:#18232e;--sl-surface-soft:#1c2a36;--sl-text:#e7f0f7;--sl-muted:#9fb2c2;--sl-line:#2b3c4a;--sl-navy:#e7f2fa;--sl-navy-2:#cfe4f4;--sl-blue-soft:#183c59;
  background:radial-gradient(circle at 80% 0%,rgba(22,135,232,.11),transparent 30rem),#0f1720!important;
}
body.sl-app.sl-theme-dark .navbar{background:rgba(22,32,42,.94)!important;box-shadow:0 1px 0 #293946}
body.sl-app.sl-theme-dark #brand{background:linear-gradient(135deg,#0a2137,#112f49)!important}
body.sl-app.sl-theme-dark #openNav,body.sl-app.sl-theme-dark #closeNav,body.sl-app.sl-theme-dark #cpage,body.sl-app.sl-theme-dark .navbar-left a,body.sl-app.sl-theme-dark .navbar-right a{color:#e7f0f7!important}
body.sl-app.sl-theme-dark .navbar-right .ses{background:#1a2834!important;border-color:#314452!important;color:#e5eef5!important}
body.sl-app.sl-theme-dark .card,body.sl-app.sl-theme-dark .box{background:#18232e!important;border-color:#2c3e4c!important;color:#e7f0f7!important}
body.sl-app.sl-theme-dark .card-header{background:#1a2631!important;border-color:#2c3e4c!important}
body.sl-app.sl-theme-dark .card-header h3,body.sl-app.sl-theme-dark .box h1,body.sl-app.sl-theme-dark .box h3{color:#edf6fc!important}
body.sl-app.sl-theme-dark .table{background:#18232e!important}.sl-theme-dark .table th{background:#1d2b37!important;color:#b8cbd9!important;border-color:#30424f!important}.sl-theme-dark .table td{color:#d6e3ec!important;border-color:#2b3c49!important}.sl-theme-dark .table tbody tr:hover{background:#1b2a36!important}
body.sl-app.sl-theme-dark .sl-dashboard-hero{background:linear-gradient(120deg,#17324a,#1a2835)!important;border-color:#29465d!important}.sl-theme-dark .sl-dashboard-hero h1{color:#eef7fd!important}.sl-theme-dark .sl-dashboard-hero p{color:#a8bccb!important}

/* adaptive layout */
@media (min-width:801px){
  body.sl-app #main{margin-left:var(--sl-sidebar)}
  body.sl-app .sidenav{width:var(--sl-sidebar)}
  body.sl-app #openNav{display:none!important}
}
@media (max-width:1100px){
  body.sl-app .sl-dashboard-columns{grid-template-columns:1fr}
  body.sl-app #r_2 .card-body>.row,body.sl-app #r_ppp .card-body>.row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:800px){
  :root{--sl-nav-h:62px}
  body.sl-app #brand{min-width:auto!important;width:148px;font-size:14px!important;padding-left:12px!important;letter-spacing:.08em}
  body.sl-app #brand::before{width:32px;height:32px;border-radius:9px;margin-right:7px}
  body.sl-app #cpage{display:none!important}
  body.sl-app .navbar-right{padding-right:5px}
  body.sl-app .navbar-right .stheme{display:none}
  body.sl-app .navbar-right .connect{max-width:126px;min-width:90px}
  body.sl-app #logout{font-size:0!important;width:42px;padding:0!important}
  body.sl-app #logout i{font-size:19px;margin:0!important}
  body.sl-app .sidenav{width:0;padding-left:0;padding-right:0;box-shadow:0 15px 35px rgba(0,0,0,.25)}
  body.sl-app #main{margin-left:0;margin-top:calc(var(--sl-nav-h) + 5px)!important}
  body.sl-app .main-container{padding:10px 9px 25px!important}
  body.sl-app .sl-dashboard-hero{display:block;padding:20px 18px;min-height:0;margin:4px 5px 10px}
  body.sl-app .sl-dashboard-hero h1{font-size:28px}
  body.sl-app .sl-hero-actions{justify-content:flex-start;margin-top:16px}
  body.sl-app #reloadHome #r_1{grid-template-columns:1fr}
  body.sl-app #reloadHome #r_1 .box{min-height:88px!important}
  body.sl-app #r_2 .card-body>.row,body.sl-app #r_ppp .card-body>.row{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  body.sl-app #r_2 .card-body>.row.mr-t-10,body.sl-app #r_ppp .card-body>.row.mr-t-10{grid-template-columns:1fr}
  body.sl-app #r_2 .box,body.sl-app #r_ppp .box{min-height:102px!important;margin:0!important;padding:12px!important}
  body.sl-app #r_2 .box::before,body.sl-app #r_ppp .box::before{margin:-12px -12px 9px!important}
  body.sl-app .box h1{font-size:25px}
  body.sl-app .card{margin:6px 4px 10px!important;border-radius:15px!important}
  body.sl-app .card-header{padding:11px 13px!important}.sl-app .card-body{padding:12px 12px 14px!important}
  body.sl-app .table{min-width:620px}
  body.sl-app .login-box{padding-top:4vh!important}
}
@media (max-width:480px){
  body.sl-app #brand{width:130px;font-size:12px!important}
  body.sl-app #brand::before{width:29px;height:29px}
  body.sl-app .navbar-right .connect{max-width:105px;font-size:12px}
  body.sl-app .sl-hero-actions a{flex:1 1 calc(50% - 5px);justify-content:center}
  body.sl-app #r_2 .box,body.sl-app #r_ppp .box{min-height:94px!important}
  body.sl-app .box h1{font-size:22px}
  body.sl-app .sl-dashboard-hero h1{font-size:25px}
}
@media (max-width:360px){
  body.sl-app #brand{width:114px;letter-spacing:.04em}
  body.sl-app #brand::before{display:none}
  body.sl-app .navbar-right .connect{max-width:90px}
  body.sl-app #r_2 .card-body>.row,body.sl-app #r_ppp .card-body>.row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* ============================================================
   SuperLab UI Build 1.1 — mobile cleanup / adaptive admin shell
   Visual only. RouterOS and voucher core logic are untouched.
   ============================================================ */

/* Prevent legacy float grid from breaking modern layouts. */
body.sl-app .sl-admin-page *,
body.sl-app .sl-login-page *{box-sizing:border-box}

/* LOGIN — compact brand, no giant poster image */
body.sl-app .sl-login-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px 16px;
}
body.sl-app .sl-login-card{
  width:min(390px,100%);
  padding:30px 28px 24px;
  border:1px solid rgba(196,216,232,.78);
  border-radius:24px;
  background:rgba(255,255,255,.96);
  box-shadow:0 24px 70px rgba(20,56,85,.14);
}
body.sl-app .sl-login-card .sl-login-brand{padding:0 0 24px;text-align:center}
body.sl-app .sl-login-card .sl-login-brand img{
  display:block;
  width:88px!important;
  height:88px!important;
  max-height:none!important;
  margin:0 auto 16px;
  object-fit:cover!important;
  border-radius:22px!important;
  box-shadow:0 12px 28px rgba(13,39,66,.16)!important;
}
body.sl-app .sl-login-card .sl-login-brand h1{
  margin:0 0 5px!important;
  font-size:25px!important;
  letter-spacing:.16em!important;
  color:var(--sl-navy)!important;
}
body.sl-app .sl-login-card .sl-login-brand p{
  margin:0!important;
  color:var(--sl-muted)!important;
  font-size:10px!important;
  letter-spacing:.12em!important;
}
body.sl-app .sl-login-form{display:grid;gap:15px}
body.sl-app .sl-field{display:grid;gap:7px;margin:0}
body.sl-app .sl-field-label{font-size:12px;font-weight:700;color:#60768a;letter-spacing:.02em}
body.sl-app .sl-field-control{
  min-height:48px;
  display:flex;
  align-items:center;
  border:1px solid #d7e5ef;
  border-radius:13px;
  background:#f8fbfe;
  overflow:hidden;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
body.sl-app .sl-field-control:focus-within{border-color:#71bdf1;background:#fff;box-shadow:0 0 0 3px rgba(22,135,232,.10)}
body.sl-app .sl-field-control>i{width:44px;flex:0 0 44px;text-align:center;color:#6e91aa;font-size:15px}
body.sl-app .sl-field-control .form-control,
body.sl-app .sl-field-control .group-item{
  width:100%!important;
  height:46px!important;
  min-width:0;
  margin:0!important;
  padding:0 12px 0 0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--sl-text)!important;
  font-size:15px!important;
}
body.sl-app .sl-password-control button{
  width:44px;height:46px;flex:0 0 44px;margin:0;padding:0;border:0;background:transparent;color:#71889b;cursor:pointer
}
body.sl-app .sl-login-submit,
body.sl-app .sl-primary-btn,
body.sl-app .sl-secondary-btn{
  min-height:47px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:13px;border:1px solid transparent;
  font-size:14px;font-weight:750;cursor:pointer;
}
body.sl-app .sl-login-submit,body.sl-app .sl-primary-btn{background:linear-gradient(135deg,#147fd8,#3aa7ef);color:#fff;box-shadow:0 9px 24px rgba(22,135,232,.18)}
body.sl-app .sl-secondary-btn{background:#f4f8fb;color:#496277;border-color:#dbe7f0}
body.sl-app .sl-login-error:empty{display:none}
body.sl-app .sl-login-footer{padding:22px 0 0!important;font-size:10px!important;letter-spacing:.14em!important}

/* ADMIN settings */
body.sl-app .sl-admin-page{max-width:1180px;margin:0 auto;padding:4px 4px 28px}
body.sl-app .sl-page-heading{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin:5px 0 14px;padding:20px 22px;
  border:1px solid #dce8f2;border-radius:20px;background:rgba(255,255,255,.92);box-shadow:var(--sl-shadow)
}
body.sl-app .sl-page-kicker{font-size:10px;font-weight:800;letter-spacing:.14em;color:#6d90aa}
body.sl-app .sl-page-heading h2{margin:5px 0 2px;font-size:22px;color:var(--sl-navy);letter-spacing:-.02em}
body.sl-app .sl-page-heading h2 i{color:var(--sl-blue);margin-right:8px}
body.sl-app .sl-page-heading p{margin:0;color:var(--sl-muted);font-size:13px}
body.sl-app .sl-icon-btn{width:42px;height:42px;flex:0 0 42px;border:1px solid #dbe7f0;border-radius:12px;background:#f6fafe;color:var(--sl-blue);cursor:pointer}
body.sl-app .sl-admin-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);gap:14px;align-items:start}
body.sl-app .sl-panel{min-width:0;border:1px solid #dce8f2;border-radius:20px;background:rgba(255,255,255,.94);box-shadow:var(--sl-shadow);overflow:hidden}
body.sl-app .sl-panel-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid #e1ecf4;background:linear-gradient(180deg,#fff,#fbfdff)}
body.sl-app .sl-panel-head h3{margin:0 0 2px;color:var(--sl-navy);font-size:16px}
body.sl-app .sl-panel-head p{margin:0;color:var(--sl-muted);font-size:12px}
body.sl-app .sl-panel-icon{width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;border-radius:13px;background:var(--sl-blue-soft);color:var(--sl-blue);font-size:18px}
body.sl-app .sl-router-list{display:grid;gap:10px;padding:14px}
body.sl-app .sl-router-card{display:flex;align-items:center;gap:13px;min-width:0;padding:14px;border:1px solid #dfebf3;border-radius:16px;background:#fff;box-shadow:0 6px 18px rgba(28,71,108,.05)}
body.sl-app .sl-router-icon{width:48px;height:48px;display:grid;place-items:center;flex:0 0 48px;border-radius:14px;background:#eaf5ff;color:var(--sl-blue);font-size:20px}
body.sl-app .sl-router-info{min-width:0;flex:1}
body.sl-app .sl-router-name{font-size:16px;font-weight:750;color:var(--sl-navy);overflow-wrap:anywhere}
body.sl-app .sl-router-meta{margin-top:2px;color:#728699;font-size:12px}
body.sl-app .sl-router-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
body.sl-app .sl-link-btn{display:inline-flex!important;align-items:center;gap:6px;min-height:34px;padding:0 10px!important;margin:0!important;border:1px solid #d9e7f1!important;border-radius:10px!important;background:#f7fbfe!important;color:#42627b!important;font-size:12px!important;cursor:pointer;text-decoration:none!important}
body.sl-app .sl-danger-link{color:#b34b54!important;background:#fff6f7!important;border-color:#f0dadd!important}
body.sl-app .sl-admin-form{display:grid;gap:15px;padding:16px 18px 18px}
body.sl-app .sl-admin-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:2px}
body.sl-app .sl-version-row{display:flex;justify-content:space-between;gap:10px;padding:0 18px 17px;color:#8293a2;font-size:11px}

/* NAVBAR — keep controls from overlapping on small screens */
body.sl-app #openNav,body.sl-app #closeNav{flex:0 0 52px}
@media (max-width:800px){
  body.sl-app .navbar{height:60px!important;min-height:60px!important;display:flex;align-items:center;justify-content:space-between}
  body.sl-app .navbar-left{min-width:0;flex:1;display:flex!important;align-items:center;position:relative}
  body.sl-app #brand{display:flex!important;width:auto!important;min-width:0!important;max-width:175px;flex:0 1 175px;height:60px!important;padding:0 12px!important;font-size:13px!important;letter-spacing:.10em!important}
  body.sl-app #brand::before{width:32px;height:32px;flex:0 0 32px}
  body.sl-app #openNav,body.sl-app #closeNav{width:48px!important;height:60px!important;flex:0 0 48px;padding:0!important;align-items:center;justify-content:center}
  body.sl-app #cpage{display:none!important}
  body.sl-app .navbar-right{height:60px!important;min-width:0;display:flex!important;align-items:center!important;margin-left:auto;padding:0 6px!important;gap:3px!important}
  body.sl-app .navbar-right .stheme,
  body.sl-app .navbar-right .slang{display:none!important}
  body.sl-app .navbar-right>a[title="Idle Timeout"]{display:none!important}
  body.sl-app .navbar-right .connect{width:auto!important;min-width:92px!important;max-width:112px!important;height:36px!important;margin:0!important;padding:0 8px!important;font-size:11px!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
  body.sl-app #logout{width:40px!important;height:40px!important;flex:0 0 40px;margin:0!important;padding:0!important;font-size:0!important}
  body.sl-app #logout i{font-size:18px!important;margin:0!important}
  body.sl-app #main{margin-top:66px!important}
  body.sl-app .main-container{width:100%!important;max-width:100%!important;padding:8px 10px 24px!important;overflow-x:hidden}
  body.sl-app .row{width:100%;margin-left:0!important;margin-right:0!important}
  body.sl-app [class*="col-"]{max-width:100%!important;padding-left:0!important;padding-right:0!important}
  body.sl-app .sl-admin-grid{grid-template-columns:1fr;gap:11px}
  body.sl-app .sl-page-heading{padding:16px;margin:2px 0 11px;border-radius:17px}
  body.sl-app .sl-page-heading h2{font-size:19px}
  body.sl-app .sl-page-heading p{font-size:12px}
  body.sl-app .sl-panel{border-radius:17px}
  body.sl-app .sl-router-card{align-items:flex-start;padding:13px}
}

@media (max-width:520px){
  body.sl-app #brand{max-width:150px;flex-basis:150px;font-size:12px!important;padding-left:9px!important}
  body.sl-app #brand::before{width:29px;height:29px;margin-right:7px}
  body.sl-app #openNav,body.sl-app #closeNav{width:44px!important;flex-basis:44px}
  body.sl-app .navbar-right .connect{min-width:82px!important;max-width:94px!important}
  body.sl-app .sl-login-page{padding:18px 14px}
  body.sl-app .sl-login-card{padding:25px 20px 21px;border-radius:21px}
  body.sl-app .sl-login-card .sl-login-brand img{width:78px!important;height:78px!important;border-radius:20px!important}
  body.sl-app .sl-login-card .sl-login-brand h1{font-size:22px!important}
  body.sl-app .sl-login-card .sl-login-brand p{font-size:9px!important}
  body.sl-app .sl-page-heading{align-items:flex-start}
  body.sl-app .sl-page-heading p{display:none}
  body.sl-app .sl-panel-head{padding:14px}
  body.sl-app .sl-router-list{padding:11px}
  body.sl-app .sl-router-icon{width:44px;height:44px;flex-basis:44px}
  body.sl-app .sl-router-actions{gap:6px}
  body.sl-app .sl-link-btn{padding:0 8px!important}
  body.sl-app .sl-admin-form{padding:14px}
}

@media (max-width:390px){
  body.sl-app #brand{max-width:128px;flex-basis:128px;letter-spacing:.06em!important}
  body.sl-app #brand::before{width:27px;height:27px;flex-basis:27px}
  body.sl-app .navbar-right .connect{min-width:74px!important;max-width:82px!important}
  body.sl-app .sl-admin-actions{grid-template-columns:1fr}
}


/* ============================================================
   SuperLab UI Build 1.2 — legacy guard removal + local About
   ============================================================ */
/* Keep legacy nav JS in control of open/close visibility. */
body.sl-app #openNav,body.sl-app #closeNav{
  text-align:center;
  line-height:var(--sl-nav-h);
}
@media (max-width:800px){
  body.sl-app #openNav{display:block}
  body.sl-app #closeNav{display:none}
}
@media (min-width:801px){
  body.sl-app #openNav{display:none}
  body.sl-app #closeNav{display:block}
}

body.sl-app .sl-about-page{max-width:1080px;margin:0 auto;padding:5px 4px 30px}
body.sl-app .sl-about-hero{display:flex;align-items:center;gap:18px;padding:22px;margin-bottom:14px;overflow:hidden}
body.sl-app .sl-about-logo{width:78px;height:78px;flex:0 0 78px;border-radius:20px;overflow:hidden;box-shadow:0 12px 28px rgba(14,54,87,.16)}
body.sl-app .sl-about-logo img{width:100%;height:100%;display:block;object-fit:cover}
body.sl-app .sl-about-hero h2{margin:4px 0 4px;font-size:28px;color:var(--sl-navy)}
body.sl-app .sl-about-hero p{margin:0;color:var(--sl-muted);font-size:13px}
body.sl-app .sl-about-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
body.sl-app .sl-about-content{padding:18px;color:var(--sl-text);line-height:1.65}
body.sl-app .sl-about-content p{margin:0 0 12px}
body.sl-app .sl-about-note{font-size:12px;color:var(--sl-muted)}
body.sl-app .sl-changelog{display:grid;gap:0;padding:8px 18px 16px}
body.sl-app .sl-changelog article{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid #e5eef5;line-height:1.5}
body.sl-app .sl-changelog article:last-child{border-bottom:0}
body.sl-app .sl-changelog b{display:inline-flex;align-items:center;justify-content:center;height:28px;border-radius:9px;background:#e9f5ff;color:var(--sl-blue);font-size:12px}
body.sl-app .sl-changelog span{font-size:13px;color:#526a7d}
body.sl-app .sl-about-footer{text-align:center;padding:18px 8px 0;color:#7b8e9d;font-size:10px;letter-spacing:.12em}
@media (max-width:800px){
  body.sl-app .sl-about-grid{grid-template-columns:1fr}
  body.sl-app .sl-about-hero{padding:17px;gap:13px}
  body.sl-app .sl-about-logo{width:58px;height:58px;flex-basis:58px;border-radius:16px}
  body.sl-app .sl-about-hero h2{font-size:22px}
  body.sl-app .sl-about-hero p{font-size:12px}
}
@media (max-width:430px){
  body.sl-app .sl-about-hero{align-items:flex-start}
  body.sl-app .sl-about-logo{width:50px;height:50px;flex-basis:50px;border-radius:14px}
  body.sl-app .sl-changelog article{grid-template-columns:52px 1fr;gap:9px}
}

/* ============================================================
   SuperLab UI Build 1.3 — responsive structure cleanup
   ============================================================ */

/* One visual slot for the open/close menu controls. Legacy JS still works,
   but the two buttons can never appear side by side. */
body.sl-app .sl-nav-toggle-slot{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:54px;height:var(--sl-nav-h);flex:0 0 54px;overflow:hidden;
}
body.sl-app .sl-nav-toggle-slot #openNav,
body.sl-app .sl-nav-toggle-slot #closeNav{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  padding:0!important;align-items:center!important;justify-content:center!important;
}
body.sl-app .sl-nav-toggle-slot #closeNav{display:none}

/* dashboard system cards */
body.sl-app .sl-dashboard{width:100%;max-width:100%;}
body.sl-app .sl-system-grid{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px!important;
  margin:0 5px 14px!important;
}
body.sl-app .sl-info-card{
  display:flex;align-items:center;gap:14px;min-width:0;padding:16px 17px;
  border:1px solid var(--sl-line);border-radius:17px;background:rgba(255,255,255,.94);
  box-shadow:var(--sl-shadow);
}
body.sl-app .sl-info-icon{
  width:48px;height:48px;flex:0 0 48px;display:flex;align-items:center;justify-content:center;
  border-radius:14px;background:var(--sl-blue-soft);color:var(--sl-blue);font-size:20px;
}
body.sl-app .sl-info-card>div:last-child{min-width:0;display:grid;gap:2px}
body.sl-app .sl-info-label{font-size:11px;color:var(--sl-muted);text-transform:uppercase;letter-spacing:.06em}
body.sl-app .sl-info-card strong{font-size:17px;color:var(--sl-navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.sl-app .sl-info-card small{font-size:11px;color:var(--sl-muted);line-height:1.45}

/* dashboard major layout */
body.sl-app .sl-dashboard-main-grid{
  display:grid;grid-template-columns:minmax(0,2.15fr) minmax(285px,.85fr);gap:14px;
  align-items:start;margin:0 5px;
}
body.sl-app .sl-dashboard-services{display:grid;gap:14px;min-width:0}
body.sl-app .sl-service-panel,
body.sl-app .sl-side-card{
  min-width:0;background:rgba(255,255,255,.95);border:1px solid var(--sl-line);
  border-radius:19px;box-shadow:var(--sl-shadow);overflow:hidden;
}
body.sl-app .sl-service-head,
body.sl-app .sl-side-card>header{
  min-height:58px;padding:13px 16px;border-bottom:1px solid var(--sl-line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:linear-gradient(180deg,#fff,#fbfdff);
}
body.sl-app .sl-service-head>div,
body.sl-app .sl-side-card>header,
body.sl-app .sl-side-card>header a{color:var(--sl-navy);text-decoration:none;font-weight:750}
body.sl-app .sl-service-head>div{display:flex;align-items:center;gap:9px;font-size:17px}
body.sl-app .sl-service-head i,
body.sl-app .sl-side-card>header i{color:var(--sl-blue)}
body.sl-app .sl-service-head small{font-size:11px;color:var(--sl-muted);font-weight:500}

body.sl-app .sl-action-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px 14px 10px;
}
body.sl-app .sl-action-card{
  position:relative;display:flex;flex-direction:column;justify-content:center;gap:7px;
  min-height:112px;padding:15px;text-decoration:none!important;color:var(--sl-text)!important;
  background:#fff;border:1px solid var(--sl-line);border-radius:16px;overflow:hidden;
  box-shadow:0 7px 22px rgba(31,78,113,.06);
}
body.sl-app .sl-action-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--sl-blue)}
body.sl-app .sl-accent-green::before{background:var(--sl-green)}
body.sl-app .sl-accent-gold::before{background:var(--sl-gold)}
body.sl-app .sl-accent-red::before{background:var(--sl-red)}
body.sl-app .sl-action-card:hover{transform:translateY(-2px);box-shadow:var(--sl-shadow-hover)}
body.sl-app .sl-action-number{display:flex;align-items:baseline;gap:5px;color:var(--sl-navy);line-height:1}
body.sl-app .sl-action-number b{font-size:30px;letter-spacing:-.04em}
body.sl-app .sl-action-number small{font-size:12px;color:var(--sl-muted);font-weight:650}
body.sl-app .sl-action-number.sl-action-word{align-items:center;gap:8px}
body.sl-app .sl-action-number.sl-action-word b{font-size:18px;letter-spacing:-.02em}
body.sl-app .sl-action-number.sl-action-word i{font-size:22px;color:var(--sl-blue)}
body.sl-app .sl-accent-gold .sl-action-number i{color:#c68a00}
body.sl-app .sl-accent-red .sl-action-number i{color:var(--sl-red)}
body.sl-app .sl-action-label{display:flex;align-items:center;gap:7px;color:var(--sl-muted);font-size:12px;line-height:1.35}
body.sl-app .sl-action-label i{color:var(--sl-blue);font-size:13px}

body.sl-app .sl-usage-strip{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin:0 14px 14px;border:1px solid var(--sl-line);border-radius:15px;overflow:hidden;background:#f9fcff;
}
body.sl-app .sl-usage-stat{
  min-width:0;position:relative;padding:13px 14px;display:grid;gap:4px;border-right:1px solid var(--sl-line);
}
body.sl-app .sl-usage-stat:last-child{border-right:0}
body.sl-app .sl-usage-stat span{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--sl-muted)}
body.sl-app .sl-usage-stat strong{font-size:20px;color:var(--sl-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.sl-app .sl-usage-stat i{position:absolute;right:12px;top:12px;color:#9bc9e8;font-size:13px}
body.sl-app .sl-usage-total{background:linear-gradient(135deg,#eef8ff,#f8fcff)}

body.sl-app .sl-dashboard-aside{display:grid;gap:14px;min-width:0}
body.sl-app .sl-side-content{padding:13px 15px}
body.sl-app .sl-income-stat{display:grid;gap:3px;padding:10px 0;border-bottom:1px solid var(--sl-line)}
body.sl-app .sl-income-stat:last-child{border-bottom:0}
body.sl-app .sl-income-stat span{font-size:10px;color:var(--sl-muted);text-transform:uppercase;letter-spacing:.06em}
body.sl-app .sl-income-stat strong{font-size:18px;color:var(--sl-navy)}
body.sl-app .sl-income-stat small{font-size:11px;color:var(--sl-muted)}
body.sl-app .sl-log-preview{padding:9px 10px 12px;border:0!important;border-radius:0!important}
body.sl-app .sl-log-preview .table{font-size:11px}

/* report toolbar */
body.sl-app .sl-report-page>.card-body{padding:15px!important}
body.sl-app .sl-report-toolbar{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:0 0 12px!important;
}
body.sl-app .sl-report-toolbar #filterTable{flex:1 1 210px;max-width:320px!important;margin:0!important;float:none!important}
body.sl-app .sl-report-toolbar .btn{margin:0!important;min-height:38px;display:inline-flex;align-items:center;gap:6px;padding:7px 11px!important}
body.sl-app .sl-report-filters{
  display:grid!important;grid-template-columns:minmax(90px,.7fr) minmax(140px,1.25fr) minmax(100px,.9fr) minmax(100px,.8fr);
  gap:8px;margin:0 0 12px!important;width:100%!important;
}
body.sl-app .sl-report-filters>[class*="input-group-"]{width:auto!important;float:none!important;padding:0!important}
body.sl-app .sl-report-filters .group-item{width:100%!important;min-height:40px!important;border-radius:10px!important}
body.sl-app .sl-report-table{width:100%;border-radius:13px!important}

/* About/legal is intentionally local and compact. */
body.sl-app .sl-license-panel{margin-top:14px}

/* Responsive behavior */
@media (max-width:1180px){
  body.sl-app .sl-dashboard-main-grid{grid-template-columns:1fr}
  body.sl-app .sl-dashboard-aside{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:800px){
  body.sl-app .main-container{padding:10px 10px 28px!important}
  body.sl-app .sl-nav-toggle-slot{width:48px;flex-basis:48px;height:60px}
  body.sl-app .sl-system-grid{grid-template-columns:1fr;margin:0 1px 12px!important;gap:8px!important}
  body.sl-app .sl-info-card{padding:13px 14px;gap:11px;border-radius:15px}
  body.sl-app .sl-info-icon{width:42px;height:42px;flex-basis:42px;border-radius:12px}
  body.sl-app .sl-info-card strong{font-size:15px}
  body.sl-app .sl-dashboard-main-grid{margin:0 1px;gap:11px}
  body.sl-app .sl-service-panel{border-radius:17px}
  body.sl-app .sl-service-head{min-height:54px;padding:12px 14px}
  body.sl-app .sl-service-head small{display:none}
  body.sl-app .sl-action-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px 12px 9px}
  body.sl-app .sl-action-card{min-height:106px;padding:13px;border-radius:15px}
  body.sl-app .sl-action-number b{font-size:27px}
  body.sl-app .sl-usage-strip{margin:0 12px 12px}
  body.sl-app .sl-usage-stat{padding:11px 9px}
  body.sl-app .sl-usage-stat span{font-size:8px;letter-spacing:.03em}
  body.sl-app .sl-usage-stat strong{font-size:16px}
  body.sl-app .sl-usage-stat i{display:none}
  body.sl-app .sl-dashboard-aside{grid-template-columns:1fr}
  body.sl-app .sl-report-toolbar{gap:7px}
  body.sl-app .sl-report-toolbar #filterTable{flex:1 1 100%;max-width:none!important}
  body.sl-app .sl-report-toolbar .btn{flex:1 1 calc(33.333% - 7px);justify-content:center;white-space:nowrap}
  body.sl-app .sl-report-filters{grid-template-columns:1fr 1.45fr 1fr;gap:6px}
  body.sl-app .sl-report-filters>div:last-of-type{grid-column:1/-1}
  body.sl-app .sl-report-table{max-height:68vh!important}
}
@media (max-width:430px){
  body.sl-app .sl-dashboard-hero{padding:18px 16px;margin:2px 1px 11px;min-height:auto;border-radius:17px}
  body.sl-app .sl-dashboard-hero h1{font-size:25px}
  body.sl-app .sl-hero-actions{width:100%;justify-content:flex-start}
  body.sl-app .sl-hero-actions a{padding:9px 10px}
  body.sl-app .sl-action-number.sl-action-word b{font-size:16px}
  body.sl-app .sl-action-label{font-size:11px}
  body.sl-app .sl-report-toolbar .btn{flex:1 1 calc(50% - 7px)}
}
@media (max-width:350px){
  body.sl-app .sl-usage-strip{grid-template-columns:1fr}
  body.sl-app .sl-usage-stat{border-right:0;border-bottom:1px solid var(--sl-line)}
  body.sl-app .sl-usage-stat:last-child{border-bottom:0}
}

/* Dark theme support for new surfaces */
body.sl-app.sl-theme-dark .sl-info-card,
body.sl-app.sl-theme-dark .sl-service-panel,
body.sl-app.sl-theme-dark .sl-side-card,
body.sl-app.sl-theme-dark .sl-action-card{background:#18232e;border-color:#2c3e4c}
body.sl-app.sl-theme-dark .sl-service-head,
body.sl-app.sl-theme-dark .sl-side-card>header{background:#1a2631;border-color:#2c3e4c}
body.sl-app.sl-theme-dark .sl-usage-strip{background:#172530;border-color:#2c3e4c}
body.sl-app.sl-theme-dark .sl-usage-stat{border-color:#2c3e4c}
body.sl-app.sl-theme-dark .sl-usage-total{background:#1b2c39}

/* ============================================================
   SuperLab UI Build 1.4 — form/editor/mobile alignment cleanup
   ============================================================ */

/* Legacy color helpers must never draw decorative pseudo-lines on buttons. */
body.sl-app .btn::before,
body.sl-app button::before,
body.sl-app .sl-tool-btn::before{content:none!important;display:none!important}

/* Common tool buttons used by Generate, Template Editor and Settings. */
body.sl-app .sl-tool-btn{
  min-height:40px;display:inline-flex!important;align-items:center;justify-content:center;gap:7px;
  padding:8px 12px!important;margin:0!important;border:1px solid #d7e5ef!important;border-radius:11px!important;
  background:#f8fbfe!important;color:#35546c!important;text-decoration:none!important;font-size:13px!important;font-weight:700!important;
  line-height:1.1;white-space:nowrap;cursor:pointer;box-shadow:none!important
}
body.sl-app .sl-tool-btn:hover{transform:translateY(-1px);background:#fff!important;border-color:#bdd9ec!important;box-shadow:0 7px 18px rgba(24,77,115,.09)!important}
body.sl-app .sl-tool-primary{background:linear-gradient(135deg,#1485df,#41a9ee)!important;color:#fff!important;border-color:transparent!important}
body.sl-app .sl-tool-pink{background:#fdf0f6!important;color:#b43e72!important;border-color:#f2d2e1!important}
body.sl-app .sl-tool-green{background:#eefaf4!important;color:#24805a!important;border-color:#d1ecdf!important}
body.sl-app .sl-tool-soft-red{background:#fff3f4!important;color:#b94d56!important;border-color:#f0d5d8!important}
body.sl-app .sl-tool-muted{background:#f4f7fa!important;color:#52687a!important}
body.sl-app .sl-inline-loader{margin-left:auto;color:var(--sl-muted);font-size:11px;white-space:nowrap}

/* Universal field treatment for rewritten pages. */
body.sl-app .sl-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
body.sl-app .sl-form-field{min-width:0;display:grid;grid-template-columns:minmax(105px,.42fr) minmax(0,1fr);gap:12px;align-items:center;margin:0}
body.sl-app .sl-form-field>span:first-child{font-size:12px;font-weight:700;color:#60778b;line-height:1.25}
body.sl-app .sl-form-field .form-control{width:100%!important;min-width:0!important;height:42px!important;margin:0!important;padding:0 12px!important;background:#f8fbfe!important;border:1px solid #d5e3ed!important;border-radius:11px!important;font-size:13px!important;color:var(--sl-text)!important}
body.sl-app .sl-form-field-wide{grid-column:1/-1}
body.sl-app .sl-split-control{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 82px;gap:7px;align-items:center}
body.sl-app .sl-split-control .form-control{min-width:0!important}
body.sl-app .sl-control-suffix{height:42px;display:flex;align-items:center;justify-content:center;padding:0 11px;border:1px solid #d5e3ed;border-radius:11px;background:#eef5fa;color:#61798c;font-size:12px;font-weight:700}
body.sl-app .sl-password-inline{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:0;border:1px solid #d5e3ed;border-radius:11px;overflow:hidden;background:#f8fbfe}
body.sl-app .sl-password-inline .form-control{border:0!important;border-radius:0!important;background:transparent!important}
body.sl-app .sl-password-inline button{border:0!important;border-left:1px solid #dce7ef!important;border-radius:0!important;background:#eef5fa!important;color:#6a8396}

/* Generate user */
body.sl-app .sl-generate-page{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(285px,.65fr);gap:14px;
  max-width:1320px;margin:0 auto;padding:2px 4px 28px;align-items:start
}
body.sl-app .sl-generate-page .sl-panel{margin:0!important}
body.sl-app .sl-generate-form{padding:14px 16px 17px}
body.sl-app .sl-generate-actions{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 15px}
body.sl-app .sl-generate-fields{padding:13px;border:1px solid #e0ebf3;border-radius:15px;background:#fbfdff}
body.sl-app .sl-validity-note:empty{display:none}
body.sl-app .sl-validity-note{margin-top:10px;padding:11px 13px;border-radius:11px;background:#fff8e7;color:#795f20;font-size:12px;border:1px solid #f1dfab}
body.sl-app .sl-summary-list{display:grid;padding:8px 15px 4px}
body.sl-app .sl-summary-list>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid #e6eef4}
body.sl-app .sl-summary-list>div:last-child{border-bottom:0}
body.sl-app .sl-summary-list span{font-size:11px;color:var(--sl-muted)}
body.sl-app .sl-summary-list strong{max-width:150px;text-align:right;font-size:12px;color:var(--sl-navy);overflow-wrap:anywhere}
body.sl-app .sl-summary-help{margin:10px 15px 15px;padding:12px 13px;border-radius:12px;background:#f6fafe;border:1px solid #e0ebf3;color:#657c8f;font-size:11px;line-height:1.55}
body.sl-app .sl-summary-help p{margin:0 0 8px}.sl-app .sl-summary-help p:last-child{margin-bottom:0}

/* Template editor */
body.sl-app .sl-template-page{max-width:1450px;margin:0 auto;padding:2px 4px 28px}
body.sl-app .sl-template-form{display:grid;grid-template-columns:minmax(0,2.05fr) minmax(285px,.75fr);gap:14px;align-items:start}
body.sl-app .sl-template-form>.sl-panel{margin:0!important;min-width:0}
body.sl-app .sl-template-toolbar{display:grid;grid-template-columns:auto minmax(330px,1fr);gap:12px;align-items:end;padding:13px 15px;border-bottom:1px solid #e3edf4;background:#fbfdff}
body.sl-app .sl-template-actions{display:flex;flex-wrap:wrap;gap:7px}
body.sl-app .sl-template-selectors{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:0}
body.sl-app .sl-compact-field{min-width:0;display:grid;gap:5px;margin:0}
body.sl-app .sl-compact-field>span{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#71879a}
body.sl-app .sl-compact-field .form-control{width:100%!important;height:40px!important;min-width:0!important;margin:0!important;padding:0 10px!important;background:#fff!important;border:1px solid #d5e3ed!important;border-radius:10px!important;color:var(--sl-text)!important;font-size:12px!important}
body.sl-app .sl-code-wrap{height:540px;padding:12px 14px 15px;min-width:0}
body.sl-app .sl-code-wrap>textarea{width:100%;height:100%;min-height:520px}
body.sl-app .CodeMirror{width:100%!important;height:100%!important;border:1px solid #233b50!important;border-radius:13px!important;overflow:hidden;font-size:12px;line-height:1.5;box-shadow:inset 0 0 0 1px rgba(255,255,255,.015)}
body.sl-app .cm-s-superlab.CodeMirror{background:#172432;color:#dbe8f2}
body.sl-app .cm-s-superlab .CodeMirror-gutters{background:#12202c;border-right:1px solid #294053;color:#658097}
body.sl-app .cm-s-superlab .CodeMirror-linenumber{color:#5f7a90}
body.sl-app .cm-s-superlab .CodeMirror-cursor{border-left:1px solid #eef7fd}
body.sl-app .cm-s-superlab .CodeMirror-selected{background:#29465e!important}
body.sl-app .cm-s-superlab .cm-comment{color:#708da4}
body.sl-app .cm-s-superlab .cm-keyword,body.sl-app .cm-s-superlab .cm-tag{color:#7dc7ff}
body.sl-app .cm-s-superlab .cm-string,body.sl-app .cm-s-superlab .cm-string-2{color:#b8df91}
body.sl-app .cm-s-superlab .cm-variable,body.sl-app .cm-s-superlab .cm-variable-2{color:#f2d27c}
body.sl-app .cm-s-superlab .cm-attribute{color:#87d3c1}
body.sl-app .cm-s-superlab .cm-number{color:#dda6ff}
body.sl-app .sl-variable-code{height:540px;padding:12px 14px 15px;min-width:0}
body.sl-app .sl-variable-code pre{height:100%;margin:0;padding:14px;overflow:auto;border:1px solid #233b50;border-radius:13px;background:#172432;color:#c8d9e6;font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,Monaco,monospace;white-space:pre-wrap;overflow-wrap:anywhere}

/* Session/router settings */
body.sl-app .sl-session-settings-page{max-width:1260px;margin:0 auto;padding:2px 4px 28px}
body.sl-app .sl-settings-shell{margin:0!important}
body.sl-app .sl-settings-title{justify-content:flex-start}
body.sl-app .sl-settings-title .sl-icon-btn{margin-left:auto}
body.sl-app .sl-settings-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:14px;padding:14px}
body.sl-app .sl-settings-column{display:grid;gap:14px;align-content:start}
body.sl-app .sl-settings-card{min-width:0;border:1px solid #dfeaf2;border-radius:16px;background:#fff;overflow:hidden}
body.sl-app .sl-settings-card>header{padding:13px 15px;border-bottom:1px solid #e3edf4;background:#fbfdff}
body.sl-app .sl-settings-card>header h3{margin:0 0 2px;font-size:15px;color:var(--sl-navy)}
body.sl-app .sl-settings-card>header p{margin:0;font-size:11px;color:var(--sl-muted)}
body.sl-app .sl-settings-fields{display:grid;gap:11px;padding:14px}
body.sl-app .sl-settings-fields .sl-form-field{grid-template-columns:minmax(115px,.4fr) minmax(0,1fr)}
body.sl-app .sl-settings-actions{display:flex;flex-wrap:wrap;gap:7px;padding:0 14px 14px}
body.sl-app .sl-settings-actions .sl-tool-btn{flex:1 1 105px}
body.sl-app .sl-ping-result{padding:0 14px 14px}

/* Fix brand contrast against the dark block even when the base theme changes. */
body.sl-app #brand{color:#f3f9fd!important;text-shadow:0 1px 0 rgba(0,0,0,.08)}

@media (max-width:1100px){
  body.sl-app .sl-generate-page{grid-template-columns:1fr}
  body.sl-app .sl-template-form{grid-template-columns:1fr}
  body.sl-app .sl-template-vars-panel{order:2}
  body.sl-app .sl-variable-code{height:360px}
  body.sl-app .sl-settings-grid{grid-template-columns:1fr}
}

@media (max-width:800px){
  body.sl-app .sl-generate-page,body.sl-app .sl-template-page,body.sl-app .sl-session-settings-page{padding:2px 0 24px}
  body.sl-app .sl-generate-form{padding:12px}
  body.sl-app .sl-generate-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  body.sl-app .sl-generate-actions .sl-tool-btn{width:100%;padding:8px 6px!important;font-size:12px!important}
  body.sl-app .sl-form-grid{grid-template-columns:1fr}
  body.sl-app .sl-form-field,body.sl-app .sl-settings-fields .sl-form-field{grid-template-columns:minmax(110px,.42fr) minmax(0,1fr)}
  body.sl-app .sl-form-field-wide{grid-column:auto}
  body.sl-app .sl-template-toolbar{grid-template-columns:1fr;padding:11px 12px;gap:10px}
  body.sl-app .sl-template-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  body.sl-app .sl-template-actions .sl-tool-btn{width:100%;padding:8px 6px!important}
  body.sl-app .sl-template-selectors{grid-template-columns:1fr 1fr}
  body.sl-app .sl-code-wrap{height:440px;padding:10px 12px 13px}
  body.sl-app .sl-variable-code{height:330px;padding:10px 12px 13px}
  body.sl-app .sl-settings-grid{padding:11px;gap:11px}
  body.sl-app .sl-settings-card{border-radius:14px}
}

@media (max-width:520px){
  /* Keep page title usable: compact brand, one menu button, title gets the remaining space. */
  body.sl-app #brand{max-width:112px!important;flex-basis:112px!important;font-size:10px!important;letter-spacing:.07em!important;padding:0 8px!important}
  body.sl-app #brand::before{width:29px;height:29px;flex-basis:29px;margin-right:6px}
  body.sl-app #cpage{display:flex!important;flex:1 1 auto!important;max-width:none!important;min-width:0!important;padding:0 7px!important;font-size:13px!important;justify-content:center!important;text-align:center}
  body.sl-app .sl-nav-toggle-slot{width:42px;flex-basis:42px}
  body.sl-app .navbar-right .connect{display:none!important}

  body.sl-app .sl-generate-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.sl-app .sl-generate-fields{padding:11px}
  body.sl-app .sl-form-field,body.sl-app .sl-settings-fields .sl-form-field{grid-template-columns:1fr;gap:6px;align-items:stretch}
  body.sl-app .sl-form-field>span:first-child{font-size:11px}
  body.sl-app .sl-form-field .form-control{height:43px!important;font-size:13px!important}
  body.sl-app .sl-split-control{grid-template-columns:minmax(0,1fr) 74px}
  body.sl-app .sl-summary-list>div{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  body.sl-app .sl-summary-list strong{max-width:none}

  body.sl-app .sl-template-selectors{grid-template-columns:1fr}
  body.sl-app .sl-code-wrap{height:400px}
  body.sl-app .sl-variable-code{height:290px}
  body.sl-app .sl-settings-fields{padding:12px}
  body.sl-app .sl-settings-actions{display:grid;grid-template-columns:1fr 1fr;padding:0 12px 12px}
  body.sl-app .sl-settings-actions .sl-tool-btn{width:100%}
}

@media (max-width:360px){
  body.sl-app #brand{max-width:72px!important;flex-basis:72px!important;font-size:0!important}
  body.sl-app #brand::before{margin:0 auto}
  body.sl-app .sl-generate-actions{grid-template-columns:1fr}
  body.sl-app .sl-template-actions{grid-template-columns:1fr}
  body.sl-app .sl-settings-actions{grid-template-columns:1fr}
}

/* Dark theme for 1.4 components. */
body.sl-app.sl-theme-dark .sl-generate-fields,
body.sl-app.sl-theme-dark .sl-settings-card,
body.sl-app.sl-theme-dark .sl-template-toolbar{background:#172530;border-color:#2c3e4c}
body.sl-app.sl-theme-dark .sl-settings-card>header{background:#1a2631;border-color:#2c3e4c}
body.sl-app.sl-theme-dark .sl-form-field .form-control,
body.sl-app.sl-theme-dark .sl-compact-field .form-control{background:#1b2a36!important;border-color:#314552!important;color:#e5eff6!important}


/* ============================================================
   SuperLab UI Build 1.5 — systematic responsive consistency pass
   ============================================================ */
body.sl-app .sl-panel{min-width:0;background:rgba(255,255,255,.96);border:1px solid var(--sl-line);border-radius:18px;box-shadow:var(--sl-shadow);overflow:hidden}
body.sl-app .sl-panel-head{min-height:60px;padding:13px 16px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--sl-line);background:linear-gradient(180deg,#fff,#fbfdff)}
body.sl-app .sl-panel-head>div:not(.sl-panel-icon){min-width:0}
body.sl-app .sl-panel-head h3{margin:0;color:var(--sl-navy);font-size:17px;line-height:1.25}
body.sl-app .sl-panel-head p{margin:3px 0 0;color:var(--sl-muted);font-size:11px;line-height:1.4}
body.sl-app .sl-panel-icon{width:38px;height:38px;flex:0 0 38px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:var(--sl-blue-soft);color:var(--sl-blue);font-size:17px}
body.sl-app .sl-head-action{margin-left:auto!important;flex:0 0 auto}

/* Consistent CRUD layouts */
body.sl-app .sl-crud-page{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.55fr);gap:14px;max-width:1320px;margin:0 auto;padding:3px 4px 30px;align-items:start}
body.sl-app .sl-crud-main{min-width:0}
body.sl-app .sl-crud-form{padding:14px 16px 17px}
body.sl-app .sl-form-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 14px}
body.sl-app .sl-form-grid-single{grid-template-columns:1fr}
body.sl-app .sl-form-field small{font-size:9px;color:var(--sl-muted);font-weight:600}
body.sl-app .sl-form-field[id="validity"]{margin:0}
body.sl-app .sl-help-panel{min-width:0}
body.sl-app .sl-help-content{padding:16px 17px;color:#536b7e;font-size:12px;line-height:1.65;overflow-wrap:anywhere}
body.sl-app .sl-help-content p{margin:0 0 12px}
body.sl-app .sl-help-content ul{margin:7px 0 12px;padding-left:18px}
body.sl-app .sl-help-note{margin-top:13px;padding:12px;border-radius:12px;background:#f6fafe;border:1px solid #e0ebf3}
body.sl-app .sl-ppp-form-page .sl-form-grid{grid-template-columns:1fr 1fr}

/* Lists/tables */
body.sl-app .sl-list-page{max-width:1520px;margin:0 auto;padding:3px 4px 30px}
body.sl-app .sl-list-tools{display:flex;align-items:center;gap:10px;padding:13px 15px 5px}
body.sl-app .sl-search{position:relative;width:min(390px,100%)}
body.sl-app .sl-search i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#8aa0b2;z-index:2}
body.sl-app .sl-search .form-control{width:100%!important;height:40px!important;padding-left:36px!important;background:#f8fbfe!important}
body.sl-app .sl-table-scroll{margin:10px 14px 15px;max-width:calc(100% - 28px);overflow:auto;border:1px solid var(--sl-line);border-radius:13px}
body.sl-app .sl-data-table{margin:0!important;border-radius:0!important;font-size:12px;line-height:1.3}
body.sl-app .sl-data-table th{position:sticky;top:0;z-index:2;white-space:nowrap;padding:9px 10px!important}
body.sl-app .sl-data-table td{padding:8px 10px!important;vertical-align:middle;white-space:nowrap}
body.sl-app .sl-row-actions{display:flex;align-items:center;gap:5px;white-space:nowrap}
body.sl-app .sl-icon-action{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;text-decoration:none!important;border:1px solid #d9e6ef;background:#f8fbfe;color:#577086!important;cursor:pointer}
body.sl-app button.sl-icon-action{padding:0!important}
body.sl-app .sl-icon-action.is-edit{background:#eaf5ff;color:#1687e8!important;border-color:#cbe6f8}
body.sl-app .sl-icon-action.is-enable{background:#edf9f3;color:#278258!important;border-color:#d1ebdd}
body.sl-app .sl-icon-action.is-disable{background:#fff8e7;color:#a57709!important;border-color:#f0dfad}
body.sl-app .sl-icon-action.is-delete{background:#fff2f3;color:#bc4a53!important;border-color:#f1d2d5}
body.sl-app .sl-status-pill{display:inline-flex;align-items:center;justify-content:center;min-height:25px;padding:3px 8px;border-radius:999px;background:#eef4f8;color:#5d7385;font-size:10px;font-weight:750;white-space:nowrap}
body.sl-app .sl-status-pill.is-on{background:#eaf8f1;color:#237b54}
body.sl-app .sl-status-pill.is-off{background:#fff0f1;color:#b94b54}
body.sl-app .sl-mobile-list{display:none;padding:10px 12px 13px;gap:9px}
body.sl-app .sl-mobile-item{min-width:0;padding:13px;border:1px solid #dfeaf2;border-radius:14px;background:#fff;box-shadow:0 5px 16px rgba(28,71,108,.045)}
body.sl-app .sl-mobile-item-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
body.sl-app .sl-mobile-item-head>div{min-width:0;display:grid;gap:3px}
body.sl-app .sl-mobile-item-head strong{font-size:14px;color:var(--sl-navy);overflow-wrap:anywhere}
body.sl-app .sl-mobile-item-head span:not(.sl-status-pill){font-size:10px;color:var(--sl-muted);overflow-wrap:anywhere}
body.sl-app .sl-mobile-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0 0 10px;border:1px solid #e1ebf3;border-radius:11px;overflow:hidden;background:#e1ebf3}
body.sl-app .sl-mobile-metrics>div{min-width:0;padding:9px;background:#f9fcff;display:grid;gap:3px}
body.sl-app .sl-mobile-metrics span,body.sl-app .sl-mobile-details small{font-size:8px;text-transform:uppercase;letter-spacing:.04em;color:#8294a4}
body.sl-app .sl-mobile-metrics b{font-size:12px;color:var(--sl-navy);overflow:hidden;text-overflow:ellipsis}
body.sl-app .sl-mobile-details{display:flex;flex-wrap:wrap;gap:6px 12px;color:#60788b;font-size:10px;line-height:1.45;margin-bottom:10px}
body.sl-app .sl-mobile-details span{min-width:0;overflow-wrap:anywhere}
body.sl-app .sl-mobile-details.sl-two-col{display:grid;grid-template-columns:1fr 1fr}
body.sl-app .sl-mobile-details.sl-two-col span{display:grid;gap:2px}
body.sl-app .sl-mobile-actions{display:flex;flex-wrap:wrap;gap:6px;padding-top:9px;border-top:1px solid #e9f0f5}
body.sl-app .sl-mobile-actions .sl-tool-btn{flex:1 1 90px;min-height:36px!important;font-size:11px!important;padding:7px 8px!important}

/* Hotspot log is deliberately compact. */
body.sl-app .sl-log-table-wrap{max-height:64vh}
body.sl-app .sl-log-table{table-layout:auto;min-width:650px}
body.sl-app .sl-log-table th:first-child,body.sl-app .sl-log-table td:first-child{width:150px}
body.sl-app .sl-log-table th:nth-child(2),body.sl-app .sl-log-table td:nth-child(2){width:280px}
body.sl-app .sl-log-table td{white-space:normal!important;overflow-wrap:anywhere}
body.sl-app .sl-log-message{padding:10px 11px;border-radius:10px;background:#f6f9fc;color:#526a7d;font-size:11px;line-height:1.5;overflow-wrap:anywhere}

/* Traffic Monitor: smaller and more useful than the legacy 500px empty block. */
body.sl-app .sl-traffic-monitor-page{max-width:1180px;margin:0 auto;padding:3px 4px 30px}
body.sl-app .sl-traffic-controls{display:flex;justify-content:flex-end;padding:14px 15px 7px}
body.sl-app .sl-traffic-controls label{width:min(390px,100%);display:grid;gap:5px}
body.sl-app .sl-traffic-controls label>span{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--sl-muted)}
body.sl-app .sl-traffic-controls .form-control{width:100%!important;height:42px!important;background:#f8fbfe!important}
body.sl-app .sl-live-speed{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:5px 15px 10px}
body.sl-app .sl-live-speed>div{padding:12px 14px;border:1px solid var(--sl-line);border-radius:13px;background:#fbfdff;display:grid;gap:3px}
body.sl-app .sl-live-speed span{font-size:9px;font-weight:800;color:var(--sl-muted);letter-spacing:.08em}
body.sl-app .sl-live-speed strong{font-size:20px;color:var(--sl-navy)}
body.sl-app .sl-chart-shell{margin:0 15px 15px;padding:8px;border:1px solid #e1ebf2;border-radius:14px;background:#fff;overflow:hidden}
body.sl-app #trafficMonitor{width:100%;height:420px}

/* Desktop robustness */
@media (min-width:1200px){
 body.sl-app .main-container{padding-left:24px!important;padding-right:24px!important}
 body.sl-app .sl-crud-page{grid-template-columns:minmax(0,1.7fr) minmax(310px,.55fr)}
 body.sl-app .sl-form-field{grid-template-columns:minmax(130px,.38fr) minmax(0,1fr)}
 body.sl-app .sl-ppp-form-page .sl-form-field{grid-template-columns:minmax(120px,.36fr) minmax(0,1fr)}
}
@media (max-width:1100px){
 body.sl-app .sl-crud-page{grid-template-columns:1fr;max-width:900px}
 body.sl-app .sl-help-panel{order:2}
}
@media (max-width:800px){
 body.sl-app .sl-crud-page,body.sl-app .sl-list-page,body.sl-app .sl-traffic-monitor-page{padding:2px 0 24px}
 body.sl-app .sl-crud-form{padding:12px}
 body.sl-app .sl-ppp-form-page .sl-form-grid{grid-template-columns:1fr}
 body.sl-app .sl-desktop-table{display:none!important}
 body.sl-app .sl-mobile-list{display:grid!important}
 body.sl-app .sl-list-tools{padding:11px 12px 2px}
 body.sl-app .sl-panel-head{min-height:56px;padding:11px 12px}
 body.sl-app .sl-panel-head h3{font-size:15px}
 body.sl-app .sl-panel-head p{font-size:10px}
 body.sl-app .sl-panel-icon{width:34px;height:34px;flex-basis:34px;border-radius:10px;font-size:15px}
 body.sl-app .sl-head-action.sl-tool-btn{font-size:0!important;width:38px;height:38px;min-height:38px;padding:0!important}
 body.sl-app .sl-head-action.sl-tool-btn i{font-size:15px}
 body.sl-app .sl-form-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
 body.sl-app .sl-form-actions .sl-tool-btn{width:100%}
 body.sl-app .sl-traffic-controls{justify-content:stretch;padding:12px 12px 6px}
 body.sl-app .sl-traffic-controls label{width:100%}
 body.sl-app .sl-live-speed{padding:5px 12px 9px;gap:7px}
 body.sl-app .sl-live-speed>div{padding:10px 11px}
 body.sl-app .sl-live-speed strong{font-size:17px}
 body.sl-app .sl-chart-shell{margin:0 12px 12px;padding:5px}
 body.sl-app #trafficMonitor{height:300px}
}
@media (max-width:520px){
 body.sl-app .sl-form-grid,body.sl-app .sl-ppp-form-page .sl-form-grid{grid-template-columns:1fr}
 body.sl-app .sl-crud-page .sl-form-field,body.sl-app .sl-ppp-form-page .sl-form-field{grid-template-columns:1fr!important;gap:5px}
 body.sl-app .sl-crud-page .sl-form-field>span:first-child{display:block!important;font-size:10px!important;text-transform:uppercase;letter-spacing:.04em;color:#6c8193}
 body.sl-app .sl-crud-page .sl-form-field .form-control{width:100%!important;max-width:none!important}
 body.sl-app .sl-help-content{font-size:11px;padding:13px}
 body.sl-app .sl-mobile-metrics{grid-template-columns:1fr 1fr 1fr}
 body.sl-app .sl-mobile-details.sl-two-col{grid-template-columns:1fr}
 body.sl-app .sl-log-page .sl-mobile-item{padding:11px}
}

body.sl-app.sl-theme-dark .sl-panel,body.sl-app.sl-theme-dark .sl-mobile-item,body.sl-app.sl-theme-dark .sl-chart-shell{background:#18232e;border-color:#2c3e4c}
body.sl-app.sl-theme-dark .sl-panel-head{background:#1a2631;border-color:#2c3e4c}
body.sl-app.sl-theme-dark .sl-log-message,body.sl-app.sl-theme-dark .sl-live-speed>div{background:#172530;border-color:#2c3e4c;color:#bdd0de}


/* ========================================================================== 
   SuperLab 1.5.2 - Global navbar + sidebar interaction patch
   Shared layout only. No RouterOS/core/voucher logic is changed here.
   ========================================================================== */

/* Normalize the shared navbar. The old core uses .navbar-left on both the
   wrapper and the page-title anchor, so direct-child selectors are intentional. */
body.sl-app .navbar{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  min-width:0!important;
}
body.sl-app .navbar > .navbar-left{
  float:none!important;
  flex:1 1 auto!important;
  min-width:0!important;
  width:auto!important;
  display:flex!important;
  align-items:center!important;
  height:100%!important;
  overflow:hidden!important;
}
body.sl-app .navbar > .navbar-right{
  float:none!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  height:100%!important;
  gap:6px!important;
}
body.sl-app #brand{
  flex:0 0 var(--sl-sidebar)!important;
  width:var(--sl-sidebar)!important;
  min-width:var(--sl-sidebar)!important;
  max-width:var(--sl-sidebar)!important;
  height:100%!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}
body.sl-app .sl-nav-toggle-slot{
  flex:0 0 54px!important;
  width:54px!important;
  min-width:54px!important;
  height:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
body.sl-app #openNav,body.sl-app #closeNav{
  width:54px!important;
  min-width:54px!important;
  height:100%!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
}
body.sl-app #cpage.navbar-left{
  float:none!important;
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:100%!important;
  margin:0!important;
  padding:0 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
body.sl-app .navbar-right>a,
body.sl-app .navbar-right .ses{
  flex:0 0 auto!important;
}
body.sl-app .navbar-right .ses{
  max-width:150px!important;
  min-width:104px!important;
}
body.sl-app #logout{
  padding:0 10px!important;
  white-space:nowrap!important;
}

/* Overlay is injected by js/superlab.js. It makes outside-tap close the drawer. */
body.sl-app .sl-sidebar-overlay{
  position:fixed;
  z-index:998;
  inset:var(--sl-nav-h) 0 0 0;
  background:rgba(7,24,40,.38);
  backdrop-filter:blur(1.5px);
  -webkit-backdrop-filter:blur(1.5px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease,visibility .22s ease;
}
body.sl-app.sl-sidebar-open .sl-sidebar-overlay{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
body.sl-app.sl-sidebar-lock{overflow:hidden!important;touch-action:none}
body.sl-app .sidenav{
  z-index:999!important;
  transition:width .24s ease,transform .24s ease,box-shadow .24s ease!important;
}
body.sl-app #main{transition:margin-left .24s ease!important}

/* Full desktop: one clean horizontal bar with a fixed brand/sidebar column. */
@media (min-width:801px){
  body.sl-app .sl-sidebar-overlay{display:none!important}
  body.sl-app.sl-sidebar-lock{overflow:auto!important;touch-action:auto!important}
  body.sl-app .navbar-right{padding-right:10px!important}
  body.sl-app .navbar-right>a[title="Idle Timeout"]{padding:0 7px!important}
  body.sl-app.sl-sidebar-collapsed #brand{
    flex-basis:72px!important;width:72px!important;min-width:72px!important;max-width:72px!important;
    padding-left:17px!important;font-size:0!important;
  }
  body.sl-app.sl-sidebar-collapsed #brand::before{margin-right:0!important}
}

/* Compact desktop / desktop-mode browser: keep controls from colliding. */
@media (min-width:801px) and (max-width:1180px){
  body.sl-app .navbar-right>a[title="Idle Timeout"]{display:none!important}
  body.sl-app .navbar-right .ses{min-width:92px!important;max-width:118px!important;font-size:11px!important}
  body.sl-app #logout{font-size:0!important;width:42px!important;padding:0!important;justify-content:center!important}
  body.sl-app #logout i{font-size:18px!important;margin:0!important}
  body.sl-app #cpage.navbar-left{font-size:14px!important;padding:0 8px!important}
}

/* Phone/tablet drawer: navbar remains stable, sidebar floats over content. */
@media (max-width:800px){
  body.sl-app .navbar{height:60px!important;min-height:60px!important}
  body.sl-app .navbar > .navbar-left{height:60px!important;overflow:hidden!important}
  body.sl-app #brand{
    flex:0 0 172px!important;
    width:172px!important;min-width:172px!important;max-width:172px!important;
    padding-left:13px!important;
    font-size:13px!important;
    letter-spacing:.08em!important;
  }
  body.sl-app #brand::before{width:34px!important;height:34px!important;margin-right:8px!important}
  body.sl-app .sl-nav-toggle-slot{flex-basis:48px!important;width:48px!important;min-width:48px!important}
  body.sl-app #openNav,body.sl-app #closeNav{width:48px!important;min-width:48px!important}
  body.sl-app #cpage.navbar-left{
    font-size:14px!important;
    padding:0 7px!important;
    justify-content:center!important;
  }
  body.sl-app .navbar > .navbar-right{height:60px!important;padding-right:6px!important;gap:2px!important}
  body.sl-app .navbar-right .stheme,
  body.sl-app .navbar-right .slang,
  body.sl-app .navbar-right>a[title="Idle Timeout"]{display:none!important}
  body.sl-app #logout{width:42px!important;padding:0!important;font-size:0!important;justify-content:center!important}
  body.sl-app #logout i{font-size:18px!important;margin:0!important}
  body.sl-app .navbar-right .connect{min-width:82px!important;max-width:98px!important;width:auto!important}
  body.sl-app .sidenav{
    width:0!important;
    max-width:min(82vw,310px)!important;
    border-right:0!important;
    box-shadow:none!important;
  }
  body.sl-app.sl-sidebar-open .sidenav{
    width:min(var(--sl-sidebar),82vw)!important;
    box-shadow:12px 0 34px rgba(7,31,51,.28)!important;
  }
  body.sl-app #main{margin-left:0!important}
  body.sl-app.sl-sidebar-open #openNav{display:none!important}
  body.sl-app.sl-sidebar-open #closeNav{display:flex!important}
  body.sl-app:not(.sl-sidebar-open) #openNav{display:flex!important}
  body.sl-app:not(.sl-sidebar-open) #closeNav{display:none!important}
}

@media (max-width:520px){
  body.sl-app #brand{flex-basis:145px!important;width:145px!important;min-width:145px!important;max-width:145px!important;font-size:11px!important}
  body.sl-app #brand::before{width:32px!important;height:32px!important}
  body.sl-app .sl-nav-toggle-slot{flex-basis:44px!important;width:44px!important;min-width:44px!important}
  body.sl-app #openNav,body.sl-app #closeNav{width:44px!important;min-width:44px!important}
  body.sl-app #cpage.navbar-left{font-size:13px!important}
}

@media (max-width:430px){
  body.sl-app #brand{flex-basis:132px!important;width:132px!important;min-width:132px!important;max-width:132px!important;font-size:0!important;padding-left:14px!important}
  body.sl-app #brand::before{margin-right:0!important}
  body.sl-app .navbar-right .connect{display:none!important}
  body.sl-app #cpage.navbar-left{justify-content:flex-start!important;font-size:13px!important;padding-left:8px!important}
}


/* ============================================================
   SuperLab v1.5.4.1 — compact brand, preserving v1.5.2 sidebar controller
   ============================================================ */
body.sl-app .navbar-left{min-width:0;flex:1 1 auto}
body.sl-app #brand{
  width:168px!important;min-width:168px!important;max-width:168px!important;
  flex:0 0 168px!important;padding:0 14px!important;
  justify-content:flex-start!important;gap:10px;
  color:#f4fbff!important;background:linear-gradient(135deg,#0d2742,#12385a)!important;
  font-size:17px!important;font-weight:800!important;letter-spacing:.11em!important;
  text-shadow:0 1px 1px rgba(0,0,0,.18)
}
body.sl-app #brand::before{
  width:34px;height:34px;flex:0 0 34px;margin-right:0;
  background:url('../img/superlab-favicon.png') center/contain no-repeat;
  background-color:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:10px;box-shadow:0 6px 16px rgba(4,19,35,.28)
}
body.sl-app #cpage{flex:1 1 auto;min-width:0}
@media (max-width:800px){
  body.sl-app #brand{width:150px!important;min-width:150px!important;max-width:150px!important;flex-basis:150px!important;padding:0 10px!important;font-size:13px!important;letter-spacing:.08em!important}
  body.sl-app #brand::before{width:30px;height:30px;flex-basis:30px;border-radius:9px}
}
@media (max-width:520px){
  body.sl-app #brand{width:136px!important;min-width:136px!important;max-width:136px!important;flex-basis:136px!important;padding:0 8px!important;font-size:12px!important;letter-spacing:.07em!important}
  body.sl-app #brand::before{width:28px;height:28px;flex-basis:28px}
}
@media (max-width:390px){
  body.sl-app #brand{width:124px!important;min-width:124px!important;max-width:124px!important;flex-basis:124px!important;font-size:11px!important;letter-spacing:.05em!important}
  body.sl-app #brand::before{width:26px;height:26px;flex-basis:26px}
}


/* ============================================================
   SuperLab UI Build 1.5.4.2 — icon-only navbar brand
   Combined on top of 1.5.4.1 sidebar hotfix
   ============================================================ */
body.sl-app #brand{
  width:86px!important;
  min-width:86px!important;
  max-width:86px!important;
  flex:0 0 86px!important;
  padding:0!important;
  font-size:0!important;
  letter-spacing:0!important;
  justify-content:center!important;
  gap:0!important;
}
body.sl-app #brand::before{
  width:42px!important;
  height:42px!important;
  flex:0 0 42px!important;
  margin:0!important;
  border-radius:11px!important;
  background:url('../img/superlab-favicon.png') center/contain no-repeat!important;
  background-color:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.13)!important;
  box-shadow:0 6px 16px rgba(4,19,35,.24)!important;
}
body.sl-app .sl-nav-toggle-slot{
  margin-left:0!important;
}
@media (max-width:800px){
  body.sl-app #brand{
    width:78px!important;
    min-width:78px!important;
    max-width:78px!important;
    flex-basis:78px!important;
    padding:0!important;
  }
  body.sl-app #brand::before{
    width:40px!important;
    height:40px!important;
    flex-basis:40px!important;
  }
}
@media (max-width:520px){
  body.sl-app #brand{
    width:72px!important;
    min-width:72px!important;
    max-width:72px!important;
    flex-basis:72px!important;
  }
  body.sl-app #brand::before{
    width:38px!important;
    height:38px!important;
    flex-basis:38px!important;
  }
}
@media (max-width:390px){
  body.sl-app #brand{
    width:68px!important;
    min-width:68px!important;
    max-width:68px!important;
    flex-basis:68px!important;
  }
  body.sl-app #brand::before{
    width:36px!important;
    height:36px!important;
    flex-basis:36px!important;
  }
}

/* ============================================================
   SuperLab-VPS — multi-user administration layer
   ============================================================ */
.sl-vps-admin-page{max-width:1500px;margin:0 auto}
.sl-vps-super-grid{align-items:start}
.sl-vps-alert{display:flex;align-items:center;gap:10px;margin:0 0 16px;padding:12px 14px;border-radius:10px;font-weight:600}
.sl-vps-alert-success{background:rgba(39,174,96,.12);border:1px solid rgba(39,174,96,.28)}
.sl-vps-alert-danger{background:rgba(231,76,60,.12);border:1px solid rgba(231,76,60,.28)}
.sl-vps-account-panel{margin-top:18px}
.sl-vps-account-grid{display:grid;grid-template-columns:minmax(320px,480px) minmax(360px,1fr);gap:20px;padding:18px}
.sl-vps-account-form h4{margin:0 0 16px;font-size:18px}
.sl-vps-router-picker{margin:4px 0 14px;display:grid;gap:8px}
.sl-vps-router-picker>.sl-field-label{margin-bottom:3px;font-weight:700}
.sl-vps-check{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid rgba(127,127,127,.18);border-radius:10px;cursor:pointer}
.sl-vps-check input{margin-top:4px}
.sl-vps-check span{display:flex;flex-direction:column;gap:2px}
.sl-vps-check small{opacity:.72}
.sl-vps-toggle{display:flex;align-items:center;gap:9px;margin:12px 0 16px;font-weight:700}
.sl-vps-account-list{display:flex;flex-direction:column;gap:10px}
.sl-vps-account-list-head{display:flex;align-items:center;justify-content:space-between;padding:0 2px 8px}
.sl-vps-account-list-head span{opacity:.65;font-size:12px}
.sl-vps-account-card{display:flex;gap:12px;padding:13px;border:1px solid rgba(127,127,127,.18);border-radius:12px;background:rgba(127,127,127,.035)}
.sl-vps-account-avatar{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(52,152,219,.12);font-size:18px;flex:0 0 42px}
.sl-vps-account-info{min-width:0;flex:1}
.sl-vps-account-name{font-weight:800;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sl-vps-account-routers{margin:4px 0 8px;font-size:12px;opacity:.75;word-break:break-word}
.sl-vps-badge-on,.sl-vps-badge-off{font-size:9px;letter-spacing:.06em;border-radius:99px;padding:3px 7px}
.sl-vps-badge-on{background:rgba(39,174,96,.13);color:#27ae60}
.sl-vps-badge-off{background:rgba(231,76,60,.13);color:#e74c3c}
.sl-vps-empty{padding:16px;border:1px dashed rgba(127,127,127,.28);border-radius:10px;opacity:.75;text-align:center}
@media(max-width:920px){.sl-vps-account-grid{grid-template-columns:1fr}}
@media(max-width:520px){.sl-vps-account-grid{padding:12px}.sl-vps-account-card{padding:11px}}
/* SuperLab-VPS tenant router ownership */
.sl-vps-heading-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sl-vps-add-router{text-decoration:none!important;white-space:nowrap}
.sl-vps-owner-badge{display:inline-flex;align-items:center;gap:4px;margin-left:7px;padding:2px 7px;border-radius:99px;background:rgba(52,152,219,.10);font-size:10px;font-weight:700;opacity:.86}
.sl-vps-shared-label{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border-radius:8px;background:rgba(127,127,127,.10);font-size:11px;font-weight:700;opacity:.78}
.sl-vps-empty a{font-weight:800;text-decoration:none}
@media(max-width:560px){.sl-vps-heading-actions{width:100%;justify-content:space-between}.sl-vps-add-router{flex:1;justify-content:center}.sl-vps-owner-badge{display:flex;width:max-content;margin:5px 0 0}}