/* ACESPAYMENT premium portal layer — shared by admin and tenant workspaces */
:root {
  --bg:#f4f7fb;
  --surface:#ffffff;
  --surface-2:#f7f9fc;
  --surface-3:#eef3f9;
  --border:#dfe6ef;
  --border-soft:#edf1f6;
  --text:#101828;
  --text-2:#475467;
  --text-3:#8491a5;
  --primary:#635bff;
  --primary-hover:#5147ed;
  --primary-soft:#eeecff;
  --primary-dim:rgba(99,91,255,.09);
  --success:#14b86e;
  --success-soft:#e9fbf2;
  --success-text:#087a48;
  --warning:#f59e0b;
  --warning-soft:#fff8e6;
  --warning-text:#a35b00;
  --danger:#ef476f;
  --danger-soft:#fff0f3;
  --danger-text:#b42345;
  --info:#09a8c7;
  --info-soft:#e7faff;
  --amount:#e58a00;
  --sidebar-w:252px;
  --header-h:96px;
  --radius-sm:9px;
  --radius:12px;
  --radius-lg:18px;
  --shadow-xs:0 1px 2px rgba(16,24,40,.04);
  --shadow-sm:0 4px 12px rgba(16,24,40,.06);
  --shadow:0 12px 30px rgba(16,24,40,.07),0 2px 8px rgba(16,24,40,.04);
  --shadow-lg:0 24px 65px rgba(8,15,31,.18);
  --focus-ring:rgba(99,91,255,.18);
  --btn-glow:rgba(99,91,255,.25);
  --btn-glow-hover:rgba(99,91,255,.35);
  --tr-hover:#f6f5ff;
  --sidebar-bg:#090f1f;
  --sidebar-glow:rgba(5,10,22,.24);
  --nav-active-bg:linear-gradient(135deg,rgba(99,91,255,.26),rgba(129,92,246,.17));
  --nav-active-color:#ffffff;
  --logo-from:#7c6cff;
  --logo-to:#4e46df;
  --logo-glow:rgba(99,91,255,.36);
  --transition:180ms cubic-bezier(.2,.8,.2,1);
}

html[data-theme="tenant"] {
  --primary:#5068f2;
  --primary-hover:#4056df;
  --primary-soft:#edf0ff;
  --primary-dim:rgba(80,104,242,.09);
  --focus-ring:rgba(80,104,242,.18);
  --btn-glow:rgba(80,104,242,.24);
  --btn-glow-hover:rgba(80,104,242,.34);
  --logo-from:#6f7cff;
  --logo-to:#4f46e5;
}

html{background:var(--bg);scroll-behavior:smooth}
body{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;
  line-height:1.55;
  color:var(--text);
  background:
    radial-gradient(circle at 92% -10%,rgba(99,91,255,.08),transparent 27rem),
    radial-gradient(circle at 28% 110%,rgba(14,165,233,.055),transparent 30rem),
    var(--bg);
}
button,input,select,textarea{font:inherit}
::selection{background:rgba(99,91,255,.2);color:var(--text)}
:where(a,button,summary):focus-visible{outline:3px solid rgba(99,91,255,.28);outline-offset:2px}

/* Portal shell */
.app{grid-template-columns:var(--sidebar-w) minmax(0,1fr)}
.sidebar{
  width:var(--sidebar-w);
  padding:0 14px 14px;
  background:
    radial-gradient(circle at 16% 3%,rgba(124,108,255,.2),transparent 15rem),
    linear-gradient(180deg,#0c1327 0%,#090f1f 60%,#080d19 100%);
  border-right:1px solid rgba(255,255,255,.07);
  box-shadow:8px 0 35px var(--sidebar-glow);
}
.sidebar::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:24px 24px;
  mask-image:linear-gradient(to bottom,#000,transparent 75%);
}
.sidebar .brand{
  position:relative;
  z-index:1;
  min-height:86px;
  padding:19px 10px 17px;
  gap:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  text-align:left;
  margin:0;
}
.sidebar .brand .logo{
  width:42px;
  height:42px;
  border-radius:13px;
  font-size:12px;
  letter-spacing:.8px;
  background:linear-gradient(145deg,var(--logo-from),var(--logo-to));
  box-shadow:0 9px 24px var(--logo-glow),inset 0 1px 0 rgba(255,255,255,.28);
}
.sidebar .brand .name{font-size:14px;font-weight:750;letter-spacing:-.1px}
.sidebar .brand .name .full{max-width:158px}
.sidebar .brand .name .role{margin-top:3px;font-size:9.5px;color:rgba(223,228,255,.48);letter-spacing:1.35px;font-weight:650}
.sidebar nav{position:relative;z-index:1;padding:12px 0 10px}
.sidebar nav .group-label{padding:17px 12px 7px;font-size:9.5px;letter-spacing:1.45px;color:rgba(220,226,246,.34)}
.sidebar nav a{
  position:relative;
  min-height:43px;
  gap:12px;
  padding:10px 12px;
  margin-bottom:4px;
  border:1px solid transparent;
  border-radius:12px;
  color:rgba(222,228,246,.58);
  font-size:13px;
  font-weight:580;
  overflow:hidden;
}
.sidebar nav a::after{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:99px;
  background:#8b7dff;
  opacity:0;
  transform:scaleY(.4);
  transition:inherit;
}
.sidebar nav a:hover{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.06);color:#f5f7ff;transform:translateX(2px)}
.sidebar nav a.active{background:var(--nav-active-bg);border-color:rgba(143,131,255,.25);color:var(--nav-active-color);box-shadow:0 8px 20px rgba(8,13,31,.18),inset 0 1px 0 rgba(255,255,255,.08)}
.sidebar nav a.active::after{opacity:1;transform:scaleY(1)}
.sidebar nav a .ico{width:19px;height:19px;flex:0 0 19px;opacity:.74}
.sidebar nav a.active .ico,.sidebar nav a:hover .ico{opacity:1}
.sidebar svg,.topbar svg{display:block;width:100%;height:100%;fill:currentColor}
.sidebar .who{
  position:relative;
  z-index:1;
  padding:13px 10px 3px;
  border-top:1px solid rgba(255,255,255,.08);
  gap:10px;
}
.sidebar .who .avatar{width:36px;height:36px;border-radius:11px;font-size:12px;background:linear-gradient(145deg,rgba(124,108,255,.34),rgba(80,104,242,.22));border:1px solid rgba(164,155,255,.24);color:#dcd8ff}
.sidebar .who .meta .u{font-size:12.5px;color:#eef1ff}
.sidebar .who .meta .l{font-size:10px;color:rgba(223,228,246,.4)}
.sidebar .who>a{width:34px;height:34px;padding:8px;border-radius:10px;color:rgba(223,228,246,.4)}
.sidebar .who>a:hover{background:rgba(239,71,111,.13);color:#ff91aa}
.sidebar-scrim{display:none;position:fixed;inset:0;z-index:45;border:0;background:rgba(5,9,20,.56);backdrop-filter:blur(3px)}

.main{grid-column:2;min-width:0}
.topbar{
  height:var(--header-h);
  padding:0 clamp(20px,2.2vw,38px);
  gap:18px;
  background:rgba(248,250,253,.84);
  border-bottom:1px solid rgba(205,214,226,.78);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(99,91,255,.2),transparent)}
.page-heading{min-width:0;display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:10px;row-gap:1px}
.page-kicker{grid-column:1/-1;color:var(--primary);font-size:9.5px;font-weight:800;letter-spacing:1.35px;text-transform:uppercase}
.topbar .page-title{font-size:22px;line-height:1.2;font-weight:760;letter-spacing:-.55px;color:var(--text)}
.page-description{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-3);font-size:12.5px}
.topbar-meta{margin-left:auto;display:flex;align-items:center;gap:9px;flex:0 0 auto}
.live-indicator,.secure-chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.72);color:var(--text-2);font-size:11px;font-weight:680;box-shadow:var(--shadow-xs)}
.live-indicator i{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(20,184,110,.12)}
.secure-chip{color:var(--primary);background:var(--primary-soft);border-color:rgba(99,91,255,.16)}
.topbar .menu-btn{width:42px;height:42px;padding:10px;border-radius:12px;background:#fff;box-shadow:var(--shadow-xs)}
.topbar .menu-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
main{width:min(100%,1840px);margin:0 auto;padding:28px clamp(18px,2.2vw,38px) 48px}

/* Cards, stats, content hierarchy */
.card{
  padding:22px 24px;
  margin-bottom:18px;
  border:1px solid rgba(215,223,234,.94);
  border-radius:18px;
  background:rgba(255,255,255,.94);
  box-shadow:0 10px 30px rgba(16,24,40,.045),0 1px 3px rgba(16,24,40,.03);
  transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition);
}
.card:hover{border-color:#d5deea;box-shadow:0 15px 38px rgba(16,24,40,.065),0 2px 6px rgba(16,24,40,.035)}
.card h2{margin-bottom:18px;font-size:15px;font-weight:720;letter-spacing:-.2px}
.card h2 .sub{font-size:11.5px;color:var(--text-3)}
.help{font-size:12px;color:var(--text-3)}
.empty{padding:56px 24px;border:1px dashed var(--border);border-radius:14px;background:linear-gradient(145deg,#fbfcfe,#f6f8fb)}
.stats{grid-template-columns:repeat(auto-fit,minmax(165px,1fr));align-items:stretch;gap:14px;margin-bottom:18px}
.stats.stats-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.stats.stats-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat{
  container-type:inline-size;
  display:flex;
  min-width:0;
  min-height:118px;
  flex-direction:column;
  padding:18px 19px;
  border:1px solid rgba(215,223,234,.92);
  border-radius:17px;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(250,251,254,.94));
  box-shadow:0 8px 24px rgba(16,24,40,.045),inset 0 1px 0 #fff;
}
.stat::before{top:auto;left:auto;right:-30px;bottom:-38px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,var(--primary-soft),transparent 66%);opacity:.9}
.stat.s-success::before{background:radial-gradient(circle,var(--success-soft),transparent 66%)}
.stat.s-warning::before{background:radial-gradient(circle,var(--warning-soft),transparent 66%)}
.stat.s-danger::before{background:radial-gradient(circle,var(--danger-soft),transparent 66%)}
.stat.s-info::before{background:radial-gradient(circle,var(--info-soft),transparent 66%)}
.stat:hover{transform:translateY(-2px);border-color:#cfd9e6;box-shadow:0 15px 34px rgba(16,24,40,.075)}
.stat .label{position:relative;z-index:1;min-height:2.5em;margin-bottom:8px;font-size:10px;font-weight:760;line-height:1.25;letter-spacing:1px;color:var(--text-3);overflow-wrap:anywhere}
.stat .value{position:relative;z-index:1;max-width:100%;font-size:clamp(18px,10.5cqi,27px);font-weight:770;line-height:1.1;letter-spacing:-.8px;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat .help{position:relative;z-index:1;margin-top:auto;padding-top:7px}
.stat.stat-action{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px}
.stat.stat-action>div{min-width:0}

/* Controls and forms */
input:not([type]),input[type=text],input[type=password],input[type=email],input[type=url],input[type=tel],input[type=number],input[type=date],input[type=time],input[type=search],select,textarea{
  width:100%;
  min-height:43px;
  height:43px;
  padding:0 13px;
  border:1px solid #d6deea;
  border-radius:11px;
  background:#fff;
  color:var(--text);
  font-size:13px;
  box-shadow:0 1px 2px rgba(16,24,40,.025);
}
textarea{height:auto;padding-block:11px}
input:not([type]):hover,input:hover,select:hover,textarea:hover{border-color:#aebaca}
input:not([type]):focus,input:focus,select:focus,textarea:focus{border-color:var(--primary)!important;box-shadow:0 0 0 4px var(--focus-ring)!important}
/* Keep every native dropdown visually consistent across Windows and Chromium.
   The explicit background properties prevent the shared arrow from tiling when
   the control receives focus, while the gradient overrides the OS-blue checked
   option without replacing the native select interaction. */
select,select:hover,select:focus,select:active{
  padding-right:36px;
  color-scheme:light;
  background-color:#fff!important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='%2364758B'><path d='M5.516 7.548 10 12.032l4.484-4.484 1.06 1.06L10 14.152 4.456 8.608z'/></svg>")!important;
  background-repeat:no-repeat!important;
  background-position:right 13px center!important;
  background-size:12px 12px!important;
}
select option{background-color:#fff;color:var(--text)}
select option:checked{
  color:var(--text);
  background:#f1f5f9 linear-gradient(0deg,#f1f5f9 0%,#f1f5f9 100%);
}
label{margin-bottom:6px;font-size:11px;font-weight:700;color:var(--text-2);letter-spacing:.15px}
.row{gap:12px}
.form-grid-2,.form-grid-3{gap:14px}
.form-section{margin-top:24px;padding-top:22px}
.form-section .section-title{font-size:14px;font-weight:720}
.form-footer{margin-top:24px;padding-top:19px;gap:10px}
.btn{
  min-height:40px;
  height:40px;
  padding:0 15px;
  border-radius:11px;
  border-color:#d7dfeb;
  background:#fff;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:680;
  box-shadow:0 1px 2px rgba(16,24,40,.03);
}
.btn:hover{transform:translateY(-1px);background:#f9fafc;border-color:#b8c3d2;box-shadow:0 5px 13px rgba(16,24,40,.07)}
.btn:active{transform:translateY(0)}
.btn.primary{border-color:transparent;background:linear-gradient(135deg,var(--primary),#7859ed);box-shadow:0 7px 16px var(--btn-glow),inset 0 1px 0 rgba(255,255,255,.22)}
.btn.primary:hover{border-color:transparent;background:linear-gradient(135deg,var(--primary-hover),#6949df);box-shadow:0 10px 22px var(--btn-glow-hover)}
.btn.danger{color:var(--danger-text);background:#fff;border-color:#ffd0da}
.btn.danger:hover{background:var(--danger-soft);border-color:#ffadbf}
.btn.ghost{background:transparent;box-shadow:none}
.btn.small{min-height:31px;height:31px;padding:0 10px;border-radius:9px;font-size:11px}
.linkish{font-weight:630;text-decoration:none}

/* Filters and toolbars */
.filter-bar{padding:18px 20px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(248,250,253,.94))}
.filter-bar .row{display:grid;grid-template-columns:minmax(230px,1.6fr) repeat(4,minmax(130px,.65fr)) auto;align-items:end;gap:12px}
.filter-bar .col{min-width:0!important;max-width:none!important}
.filter-bar .col label{margin-bottom:6px;font-size:9.5px;letter-spacing:1px}
.filter-bar .actions-col{gap:8px;max-width:none!important}
.tbar{margin-bottom:14px;padding:1px 2px}
.tbar .left{font-size:12px}
.tbar .right{gap:9px}
.tbar .right select,.refresh-wrap select{min-height:34px;height:34px;border-radius:9px}
.refresh-wrap{padding:2px;border-radius:11px;background:#edf1f6}

/* Data tables */
.tbl-wrap{border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:inset 0 1px 0 #fff;scrollbar-color:#c9d2df transparent;scrollbar-width:thin}
.tbl-wrap table{min-width:max-content;border-collapse:separate;border-spacing:0}
table{font-size:12.5px}
thead{background:#f8fafc}
th,td{padding:13px 14px;border:0;border-bottom:1px solid #e8edf3;text-align:left}
th{position:relative;padding-block:11px;background:#f8fafc;color:#667085;font-size:9.5px;font-weight:760;letter-spacing:.9px;text-align:left;white-space:nowrap}
th:first-child{border-top-left-radius:13px}
th:last-child{border-top-right-radius:13px}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#f8f8ff}
tbody tr{transition:background var(--transition),box-shadow var(--transition)}
tfoot td{border:0;border-top:1px solid var(--border);background:#f8fafc}
.order-number-col{width:auto;min-width:205px}
.mono,.badge-code,.timer{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace}
.badge-code{padding:4px 8px;border-radius:8px;background:#f6f8fb;border-color:#e0e6ee;color:#475467;font-size:10.5px}
.copy-link{padding:10px 12px;border-radius:10px;background:#f8fafc;border-color:#dce3ec}
.td-clip{max-width:240px}
.actions{gap:6px}

/* Status and alerts */
.tag,.tp-action-state,.tp-status{
  min-height:25px;
  padding:4px 9px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:9.5px;
  font-weight:760;
  letter-spacing:.55px;
  line-height:1;
}
.tag.active,.tag.successful{border-color:rgba(20,184,110,.13);background:var(--success-soft);color:var(--success-text)}
.tag.suspended,.tag.failed,.tag.cancelled{border-color:rgba(239,71,111,.14);background:var(--danger-soft);color:var(--danger-text)}
.tag.processing{border-color:rgba(245,158,11,.16);background:var(--warning-soft);color:var(--warning-text)}
.tag.expired,.tag.inactive{border-color:#e3e8ef;background:#f4f6f9;color:#778397}
.tag.loaded{border-color:rgba(20,184,110,.2);background:linear-gradient(135deg,#13b86d,#079d5a);color:#fff}
.alert{padding:12px 14px;border-radius:11px;font-size:12.5px;box-shadow:0 2px 8px rgba(16,24,40,.025)}
.alert.error{border-color:#ffc8d5;background:linear-gradient(145deg,#fff4f6,#ffedf1)}
.alert.success{border-color:#bfeeda;background:linear-gradient(145deg,#effcf6,#e8fbf1)}
.alert.warning{border-color:#f7dda4;background:linear-gradient(145deg,#fffaf0,#fff5dd)}

/* Login and verification */
body.auth-page{
  position:relative;
  overflow-x:hidden;
  padding:32px 20px;
  background:
    radial-gradient(circle at 15% 10%,rgba(99,91,255,.18),transparent 27rem),
    radial-gradient(circle at 88% 82%,rgba(9,168,199,.12),transparent 26rem),
    linear-gradient(145deg,#f7f8fc,#eef2f8);
}
body.auth-page::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(31,41,55,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(31,41,55,.025) 1px,transparent 1px);background-size:30px 30px;mask-image:linear-gradient(to bottom,#000,transparent 85%)}
.shell{position:relative;z-index:1;max-width:430px}
.auth-page .brand{margin-bottom:24px}
.auth-logo,.auth-page .logo{width:58px;height:58px;border-radius:17px;font-size:16px;box-shadow:0 16px 36px var(--btn-glow),inset 0 1px 0 rgba(255,255,255,.28)}
.auth-page .brand h1{font-size:25px;font-weight:780;letter-spacing:-.7px}
.auth-page .brand p{font-size:12px;letter-spacing:.6px;text-transform:uppercase;font-weight:650}
.auth-page .card{padding:28px;border-radius:20px;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);box-shadow:0 25px 65px rgba(16,24,40,.12),inset 0 1px 0 #fff}
.auth-page .title{font-size:20px;font-weight:760;letter-spacing:-.4px}
.auth-page .subtitle{margin:3px 0 20px;color:var(--text-3);font-size:12.5px}
.fld{margin-bottom:15px}
.fld input{height:46px;border-radius:11px}
.btn-auth{height:46px;border-radius:12px;background:linear-gradient(135deg,var(--primary),#7859ed);box-shadow:0 9px 22px var(--btn-glow);font-size:13px}
.btn-auth:hover{background:linear-gradient(135deg,var(--primary-hover),#6949df);box-shadow:0 13px 28px var(--btn-glow-hover);transform:translateY(-1px)}
.code-input{height:60px;border-radius:13px;font-size:23px}

/* Third-party config and modal polish */
.tp-config-card{max-width:1080px;border-radius:20px}
.tp-config-head{padding:27px 29px;background:linear-gradient(135deg,#fff,#f5f4ff);border-bottom-color:#e8e7f7}
.tp-config-head h2{font-size:20px;letter-spacing:-.4px}
.tp-automation{padding:18px 20px;border-radius:15px;background:linear-gradient(135deg,#efefff,#fafaff);box-shadow:inset 0 1px 0 #fff}
.tp-config-card input{height:46px}
.tp-security{padding:14px 16px;border-radius:12px}
.tp-confirm-panel,.wd-modal__panel,.receipt-modal__panel{border-radius:22px;box-shadow:0 35px 90px rgba(8,15,31,.3)}
.tp-confirm-backdrop,.wd-modal__backdrop,.receipt-modal__viewer::before{backdrop-filter:blur(10px)}

/* Detail popovers */
details>summary::-webkit-details-marker{display:none}
details>summary{list-style:none}
.force-menu[open]>summary,.actions details[open]>summary{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}

/* Responsive layout */
@media(max-width:1280px){
  .filter-bar .row{grid-template-columns:minmax(240px,1.4fr) repeat(2,minmax(150px,.7fr));}
  .filter-bar .actions-col{grid-column:auto}
}
@media(max-width:1024px){
  body.nav-open{overflow:hidden}
  :root{--header-h:82px}
  .app{grid-template-columns:1fr}
  .main{grid-column:1}
  .sidebar{transform:translateX(-105%);box-shadow:var(--shadow-lg);transition:transform 240ms cubic-bezier(.2,.8,.2,1)}
  .sidebar.open{transform:translateX(0)}
  .sidebar.open+.sidebar-scrim{display:block}
  .topbar .menu-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
  .page-kicker,.page-description,.secure-chip{display:none}
  .page-heading{display:block}
  .topbar .page-title{font-size:19px}
  main{padding-top:22px}
  .filter-bar .row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filter-bar .row>.col:first-child{grid-column:1/-1}
  .filter-bar .actions-col{grid-column:1/-1}
}
@media(max-width:900px){
  .stats.stats-5{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:720px){
  :root{--header-h:72px}
  .topbar{padding-inline:14px;gap:12px}
  .topbar-meta{gap:6px}.live-indicator{height:30px;padding-inline:9px;font-size:10px}
  main{padding:16px 12px 32px}
  .card{padding:18px 16px;margin-bottom:14px;border-radius:15px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
  .stats.stats-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats.stats-3{grid-template-columns:1fr}
  .stat{min-height:108px;padding:15px;border-radius:14px}
  .stat.stat-action{grid-template-columns:1fr;align-items:stretch}
  .stat.stat-action>button{width:100%}
  .form-grid-2,.form-grid-3{grid-template-columns:1fr}
  .filter-bar .row{grid-template-columns:1fr}
  .filter-bar .row>.col,.filter-bar .row>.col:first-child,.filter-bar .actions-col{grid-column:1}
  .filter-bar .actions-col>.btn{flex:1}
  .tbar{align-items:flex-start}.tbar .right{width:100%;justify-content:space-between;flex-wrap:wrap}
  .tbl-wrap{margin-inline:-1px;border-radius:12px}
  th,td{padding:11px 12px}
  .form-footer{flex-direction:column-reverse}.form-footer .btn{width:100%}
  .tp-config-head{padding:21px 18px}.tp-config-card>form{padding:20px 18px}
}
@media(max-width:460px){
  .topbar .page-title{font-size:17px}.live-indicator{font-size:0;width:31px;padding:0;justify-content:center}.live-indicator i{margin:0}
  .stat{min-height:100px}
  .stats,.stats.stats-5,.stats.stats-3{grid-template-columns:1fr}
  .auth-page .card{padding:23px 19px}
  .sidebar{width:min(86vw,310px)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}