:root{
  --bg-0:#05050a;
  --bg-1:#080814;
  --panel:rgba(255,255,255,.06);
  --panel-2:rgba(255,255,255,.09);
  --stroke:rgba(255,255,255,.10);
  --stroke-2:rgba(255,255,255,.16);
  --text:#e9e9ff;
  --muted:rgba(233,233,255,.72);
  --muted-2:rgba(233,233,255,.54);
  --brand:#a855f7;
  --brand-2:#ec4899;
  --brand-3:#7c3aed;
  --shadow:0 24px 60px rgba(0,0,0,.55);
  --shadow-soft:0 16px 40px rgba(0,0,0,.35);
  --r-lg:18px;
  --r-md:14px;
  --r-sm:12px;
}

html,body{height:100%}

html:not(.dark){
  background: #f3f4f6;
}

body{
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(168,85,247,.12), transparent 58%),
    radial-gradient(1000px 700px at 85% 12%, rgba(236,72,153,.10), transparent 62%),
    radial-gradient(900px 700px at 50% 110%, rgba(124,58,237,.12), transparent 58%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
  position:relative;
  overflow-x:hidden;
}

/* Light theme (classic) */
html:not(.dark) body:not(.gradient-bg){
  background: #f3f4f6;
}

html:not(.dark) body:not(.gradient-bg)::before,
html:not(.dark) body:not(.gradient-bg)::after{
  display:none;
}

.hamburger{
  width: 20px;
  height: 14px;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
}

.hamburger > span{
  display:block;
  height:2px;
  width:100%;
  border-radius:999px;
  background: rgba(233,233,255,.92);
}

html:not(.dark) .hamburger > span{
  background: #111827;
}

body::before,
body::after{
  content:"";
  position:fixed;
  inset:-20vh -20vw;
  pointer-events:none;
  z-index:-3;
}

body::before{
  background:
    radial-gradient(900px 520px at 20% 20%, rgba(168,85,247,.18), transparent 60%),
    radial-gradient(800px 520px at 80% 30%, rgba(236,72,153,.14), transparent 62%),
    radial-gradient(900px 700px at 50% 90%, rgba(124,58,237,.12), transparent 60%);
  filter: blur(22px) saturate(1.1);
  opacity:.85;
}

body::after{
  background:
    radial-gradient(700px 420px at 65% 15%, rgba(168,85,247,.10), transparent 60%),
    radial-gradient(700px 420px at 35% 75%, rgba(236,72,153,.08), transparent 60%);
  filter: blur(26px) saturate(1.05);
  opacity:.75;
}

@keyframes auroraFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2.5vw,-1.2vh,0) scale(1.03)}
}

@keyframes auroraFloat2{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-2.2vw,1.8vh,0) scale(1.04)}
}

/* App shell */
.app-shell{
  min-height:100vh;
  display:flex;
  width:100%;
}



.sidebar-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
  z-index:40;
}

.sidebar-overlay.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.app-sidebar{
  position:sticky;
  top:0;
  height:100vh;
  padding:18px 14px;
  width:284px;
  flex:0 0 auto;
  background:rgba(255,255,255,.04);
  border-right:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  z-index:50;
  transition: width .22s ease, padding .22s ease;
}

body.sidebar-collapsed .app-sidebar{
  width:76px;
  padding:18px 10px;
  overflow:hidden;
}

body.sidebar-collapsed .sidebar-brand,
body.sidebar-collapsed .sidebar-nav,
body.sidebar-collapsed .sidebar-footer{
  display:block;
}

body.sidebar-collapsed .sidebar-brand__meta{
  flex-basis:0;
  max-width:0;
  opacity:0;
  transform:translateX(-6px);
  overflow:hidden;
  pointer-events:none;
}

.sidebar-brand__meta{
  transition: flex-basis .22s ease, max-width .22s ease, opacity .26s ease, transform .22s ease;
  flex-basis:240px;
  max-width:240px;
  opacity:1;
  transform:translateX(0);
  overflow:hidden;
  min-width:0;
  flex:1 1 auto;
}

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

body.sidebar-collapsed .sidebar-nav{
  padding-left:0;
  padding-right:0;
  gap:10px;
}

body.sidebar-collapsed .side-link{
  justify-content:center;
  padding:0;
  gap:0;
  width:44px;
  height:44px;
  border-radius:14px;
  margin-left:auto;
  margin-right:auto;
}

body.sidebar-collapsed .side-link span{
  max-width:0;
  opacity:0;
  overflow:hidden;
  transform:translateX(-6px);
  margin:0;
  padding:0;
  pointer-events:none;
}

.side-link span{
  display:inline-block;
  max-width:220px;
  transition: max-width .22s ease, opacity .20s ease, transform .22s ease;
}

body.sidebar-collapsed .side-link i{
  margin-right:0;
}

body.sidebar-collapsed .sidebar-brand__icon{
  margin-left:auto;
  margin-right:auto;
}

html:not(.dark) body.sidebar-collapsed .side-link{
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html:not(.dark) body.sidebar-collapsed .side-link:hover{
  background: #eef2ff;
  border-color: #c7d2fe;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}

html:not(.dark) body.sidebar-collapsed .side-link.active{
  background: #2563eb;
  border-color: #2563eb;
  box-shadow: 0 14px 36px rgba(37,99,235,.18);
}

body.sidebar-collapsed .sidebar-footer .side-link{
  justify-content:center;
}

html:not(.dark) .app-sidebar{
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
  box-shadow: 18px 0 40px rgba(0,0,0,.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.app-sidebar{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.app-sidebar{
  box-shadow: 18px 0 60px rgba(0,0,0,.28);
}

.sidebar-brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 10px 14px 10px;
  margin-bottom:10px;
}

.sidebar-brand__icon{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(168,85,247,.28), rgba(236,72,153,.18));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 34px rgba(0,0,0,.30);
}

.brand-logo{
  width: 28px;
  height: 28px;
  flex:0 0 28px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}

.brand-logo--xl{
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.45));
}

.sidebar-brand__icon i{color:rgba(233,233,255,.95)}
.sidebar-brand__title{color:var(--text); font-weight:700; letter-spacing:.2px}
.sidebar-brand__sub{color:var(--muted-2); font-size:12px; margin-top:2px}

.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:6px 6px;
}

.sidebar-nav{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 12px;
}

.side-link{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:10px 10px;
  border-radius:14px;
  color:rgba(233,233,255,.78);
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

html:not(.dark) .side-link{
  color: #111827;
  background: #f3f4f6;
  border-color: #e5e7eb;
}

html:not(.dark) .side-link i{
  color: #6b7280;
}

html:not(.dark) .side-link:hover{
  background: #eef2ff;
  border-color: #c7d2fe;
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
}

html:not(.dark) .side-link.active{
  background: #2563eb;
  border-color: #2563eb;
  box-shadow: 0 14px 36px rgba(37,99,235,.18);
  color: #ffffff;
}

html:not(.dark) .side-link.active i{
  color: #ffffff;
}

.side-link i{
  width:18px;
  flex:0 0 18px;
  text-align:center;
  color:rgba(233,233,255,.70);
}

body.sidebar-animating .side-link,
body.sidebar-animating .sidebar-brand__icon,
body.sidebar-animating .brand-logo{
  transition:none !important;
}

body.sidebar-animating .side-link:hover,
body.sidebar-animating .side-link:active{
  transform:none !important;
  box-shadow:none !important;
}

.side-link:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(168,85,247,.20);
  transform:translateY(-1px);
  box-shadow:0 16px 40px rgba(0,0,0,.25);
}

.side-link.active{
  background:linear-gradient(135deg, rgba(168,85,247,.30) 0%, rgba(236,72,153,.18) 100%);
  border-color:rgba(168,85,247,.42);
  box-shadow:0 14px 42px rgba(168,85,247,.14);
  color:rgba(233,233,255,.98);
}

.side-link.active i{color:rgba(233,233,255,.98)}

.sidebar-footer{
  position:sticky;
  bottom:10px;
  padding:12px 6px 6px;
  margin-top:10px;
}

.sidebar-footer{
  position:static;
  margin-top:auto;
}

/* Order details modal: scroll only the accounts list (no visible scrollbar) */
.modal-overlay .order-accounts-scroll{
  display: block;
  max-height: min(42vh, 380px);
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  scrollbar-width: none !important;
}

.modal-overlay .order-accounts-scroll::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
}

.side-link--danger{
  background:rgba(239,68,68,.10);
  border-color:rgba(239,68,68,.18);
}

.side-link--danger:hover{
  background:rgba(239,68,68,.14);
  border-color:rgba(239,68,68,.28);
}

.app-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  max-width:100%;
  min-height:100vh;
}

.app-topbar{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

html:not(.dark) .app-topbar{
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html:not(.dark) .topbar-title__main,
html:not(.dark) .topbar-title__sub,
html:not(.dark) .sys-status__text{
  color: #111827;
}

html:not(.dark) .sys-status{
  background: #f3f4f6;
  border-color: #e5e7eb;
}

html:not(.dark) .sidebar-brand__title{
  color: #111827;
}

html:not(.dark) .sidebar-brand__sub{
  color: #6b7280;
}

.app-topbar{
  box-shadow: 0 12px 34px rgba(0,0,0,.32);
}

.topbar-left{display:flex; align-items:center; gap:12px}
.topbar-title__main{color:var(--text); font-weight:700; line-height:1.1}
.topbar-title__sub{color:var(--muted-2); font-size:12px; margin-top:2px}

.topbar-right{display:flex; align-items:center; gap:12px}
.sys-status{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03)}
.sys-status__text{color:rgba(233,233,255,.86); font-weight:600; font-size:13px}

.icon-btn{
  width:40px;
  height:40px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:rgba(233,233,255,.90);
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.icon-btn:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(168,85,247,.22);
  transform:translateY(-1px);
  box-shadow:0 18px 50px rgba(0,0,0,.25);
}

.app-content{
  padding:18px;
  flex:1;
}

html:not(.dark) .app-content{
  color: #111827;
}

html:not(.dark) .app-content .bg-white,
html:not(.dark) .app-content .bg-gray-50,
html:not(.dark) .app-content .bg-gray-100{
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.08) !important;
}

html:not(.dark) .app-content h1,
html:not(.dark) .app-content h2,
html:not(.dark) .app-content h3{
  color: #111827;
}

html:not(.dark) .app-content .text-white{
  color: #ffffff !important;
}

html:not(.dark) .app-content .bg-blue-500,
html:not(.dark) .app-content .bg-blue-600{
  background-color: #2563eb !important;
}

html:not(.dark) .app-content .bg-green-500,
html:not(.dark) .app-content .bg-green-600{
  background-color: #16a34a !important;
}

html:not(.dark) .app-content .bg-purple-500,
html:not(.dark) .app-content .bg-purple-600{
  background-color: #7c3aed !important;
}

html:not(.dark) .app-content .bg-orange-500,
html:not(.dark) .app-content .bg-orange-600{
  background-color: #ea580c !important;
}

html:not(.dark) .app-content .from-blue-500{--tw-gradient-from: #3b82f6 !important;}
html:not(.dark) .app-content .to-blue-600{--tw-gradient-to: #2563eb !important;}
html:not(.dark) .app-content .from-blue-600{--tw-gradient-from: #2563eb !important;}
html:not(.dark) .app-content .to-blue-700{--tw-gradient-to: #1d4ed8 !important;}
html:not(.dark) .app-content .from-green-500{--tw-gradient-from: #22c55e !important;}
html:not(.dark) .app-content .to-green-600{--tw-gradient-to: #16a34a !important;}
html:not(.dark) .app-content .from-purple-500{--tw-gradient-from: #a855f7 !important;}
html:not(.dark) .app-content .to-purple-600{--tw-gradient-to: #7c3aed !important;}
html:not(.dark) .app-content .from-orange-500{--tw-gradient-from: #f97316 !important;}
html:not(.dark) .app-content .to-orange-600{--tw-gradient-to: #ea580c !important;}

html:not(.dark) .app-content .bg-blue-50{background-color:#eff6ff !important; border-color:#bfdbfe !important;}
html:not(.dark) .app-content .bg-green-50{background-color:#ecfdf5 !important; border-color:#bbf7d0 !important;}
html:not(.dark) .app-content .bg-purple-50{background-color:#faf5ff !important; border-color:#e9d5ff !important;}
html:not(.dark) .app-content .bg-yellow-50{background-color:#fffbeb !important; border-color:#fde68a !important;}

html:not(.dark) .app-content #totalBalanceSum{
  color: #b45309 !important;
}

html:not(.dark) .app-content #totalBalanceSum + div{
  color: #92400e !important;
}

/* Orders: ensure Details button is visible and not washed out in light mode */
html:not(.dark) .app-content .view-btn{
  background: #2563eb !important;
  border: 1px solid #2563eb !important;
  box-shadow: 0 10px 24px rgba(37,99,235,.18) !important;
}

html:not(.dark) .app-content .view-btn:hover{
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}

/* Modals: keep glass effect in light mode */
html:not(.dark) .app-content .modal-content,
html:not(.dark) .modal-content.bg-white{
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(255,255,255,.80) !important;
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  box-shadow: 0 26px 80px rgba(0,0,0,.22) !important;
}

html:not(.dark) .app-content .modal-content::before,
html:not(.dark) .modal-content.bg-white::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

html:not(.dark) .app-content table{
  background: #ffffff;
  border: 1px solid #e5e7eb;
}

html:not(.dark) .app-content thead{
  background: #f3f4f6;
}

html:not(.dark) .app-content thead th{
  color: #374151;
  border-bottom-color: #e5e7eb;
}

html:not(.dark) .app-content th,
html:not(.dark) .app-content td{
  border-bottom-color: #e5e7eb;
}

.app-footer{
  padding:14px 18px;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}

.app-footer__inner{color:var(--muted-2); font-size:12px}

/* Mobile layout */
@media (max-width: 1024px){
  .app-shell{display:block;}

  .app-sidebar{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:284px;
    transform:translateX(-105%);
    transition:transform .22s cubic-bezier(.2,.9,.2,1);
  }

  .app-sidebar.show{transform:translateX(0)}
}

.gradient-bg{
  background:linear-gradient(135deg, rgba(15,15,30,.88) 0%, rgba(8,8,18,.92) 45%, rgba(10,10,22,.90) 100%);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.glass-effect{
  background:var(--panel);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow-soft);
}

.card-hover{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.card-hover:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:rgba(168,85,247,.28)}

.btn-primary{
  background:linear-gradient(135deg, rgba(168,85,247,1) 0%, rgba(236,72,153,1) 100%);
  color:white;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 16px 40px rgba(168,85,247,.22);
}
.btn-primary:hover{filter:brightness(1.06); transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0); filter:brightness(.98)}

.btn-ghost{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
}
.btn-ghost:hover{background:rgba(255,255,255,.09); border-color:rgba(168,85,247,.22)}

.nav-tab{
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

.nav-tab::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(168,85,247,.18), transparent);
  transform:translateX(-110%);
  transition:transform .75s cubic-bezier(.2,.9,.2,1);
}

.nav-tab:hover{transform:translateY(-2px); box-shadow:var(--shadow-soft); border-color:rgba(168,85,247,.28); background:rgba(255,255,255,.06)}
.nav-tab:hover::before{transform:translateX(110%)}

.nav-tab.active{
  background:linear-gradient(135deg, rgba(168,85,247,.28) 0%, rgba(236,72,153,.18) 100%);
  border-color:rgba(168,85,247,.45);
  box-shadow:0 14px 40px rgba(168,85,247,.22);
  color:var(--text);
}

.modal-overlay{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease, visibility .22s ease}
.modal-overlay.show{opacity:1;visibility:visible;pointer-events:auto}
.modal-overlay{
  background: rgba(0,0,0,.40);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html:not(.dark) .modal-overlay{
  background: rgba(17,24,39,.18) !important;
  backdrop-filter: blur(6px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.1) !important;
}

.modal-content{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  box-shadow: 0 26px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(168,85,247,.10) inset;
  transform:translateY(18px) scale(.98);
  opacity:0;
  transition:transform .22s cubic-bezier(.2,.9,.2,1), opacity .22s ease;
}
.modal-overlay.show .modal-content{transform:translateY(0) scale(1);opacity:1}

/* Modals: hide inner scrollbars (keep scroll) */
.modal-content{
  overflow: auto;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none;
}

.modal-content::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
}

.modal-content::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-thumb{
  background: transparent !important;
}

.modal-content [class*="overflow-y-"]{
  scrollbar-width: none !important;
  -ms-overflow-style: none;
}

.modal-content [class*="overflow-y-"]::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
}

/* Absolute fallback: hide scrollbars for anything inside modal overlay */
.modal-overlay *{
  scrollbar-width: none !important;
  -ms-overflow-style: none;
}

.modal-overlay *::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
}

.modal-overlay *::-webkit-scrollbar-track,
.modal-overlay *::-webkit-scrollbar-thumb{
  background: transparent !important;
}

.modal-content *{
  overflow-x: visible;
}

.modal-content .modal-header,
.modal-content header{
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.modal-content .modal-footer,
.modal-content footer{
  border-top: 1px solid rgba(255,255,255,.08);
}

.modal-content .fa-times,
.modal-content button{
  -webkit-tap-highlight-color: transparent;
}

/* Premium buttons remap (works with existing Tailwind classes) */
.app-content button,
.app-content a[role="button"]{
  border-radius: 14px;
}

.app-content button.bg-blue-500,
.app-content button.bg-green-500,
.app-content button.bg-purple-500,
.app-content button.bg-orange-500,
.app-content a.bg-blue-500,
.app-content a.bg-green-500,
.app-content a.bg-purple-500,
.app-content a.bg-orange-500{
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.app-content button.bg-blue-500:hover,
.app-content button.bg-green-500:hover,
.app-content button.bg-purple-500:hover,
.app-content button.bg-orange-500:hover,
.app-content a.bg-blue-500:hover,
.app-content a.bg-green-500:hover,
.app-content a.bg-purple-500:hover,
.app-content a.bg-orange-500:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 24px 70px rgba(0,0,0,.36);
}

.app-content button.bg-blue-500:active,
.app-content button.bg-green-500:active,
.app-content button.bg-purple-500:active,
.app-content button.bg-orange-500:active,
.app-content a.bg-blue-500:active,
.app-content a.bg-green-500:active,
.app-content a.bg-purple-500:active,
.app-content a.bg-orange-500:active{
  transform: translateY(0);
  filter: brightness(.98);
}

/* Orders: period filter buttons */
.app-content .filter-btn{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 10px 16px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1.1;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.app-content .filter-btn:hover{
  transform: translateY(-1px);
}

.app-content .filter-btn.active{
  background: linear-gradient(135deg, rgba(168,85,247,.92) 0%, rgba(236,72,153,.84) 100%);
  color: rgba(255,255,255,.96);
  box-shadow: 0 18px 55px rgba(168,85,247,.20);
}

.page-fade-in{animation:pageFadeIn .18s ease both}
@keyframes pageFadeIn{from{opacity:0}to{opacity:1}}

.page-fade-out{animation:pageFadeOut .18s ease both}
@keyframes pageFadeOut{from{opacity:1;filter:none}to{opacity:.92;filter:blur(1px) saturate(.95)}}

.preloader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(900px 600px at 40% 35%, rgba(168,85,247,.18), transparent 55%),
             radial-gradient(900px 600px at 60% 60%, rgba(236,72,153,.12), transparent 55%),
             rgba(5,5,10,.38);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
}

.preloader.show{opacity:1;visibility:visible;pointer-events:auto}

.preloader__ring{display:none !important;}

.preloader__ring{
  width:90px;
  height:90px;
  border-radius:999px;
  border:2px dashed rgba(236,72,153,.55);
  box-shadow:0 0 0 1px rgba(168,85,247,.25) inset, 0 18px 60px rgba(168,85,247,.25);
  position:relative;
  animation:ringSpin 1.2s linear infinite;
}

.preloader__ring::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:18px;
  height:18px;
  transform:translate(-50%,-50%) rotate(45deg);
  border-right:3px solid rgba(168,85,247,1);
  border-top:3px solid rgba(168,85,247,1);
  filter:drop-shadow(0 0 10px rgba(168,85,247,.55));
}

/* Legacy components override */
.loading-spinner{
  border-top-color: rgba(168,85,247,.95) !important;
}

.bg-image{
  opacity: .14 !important;
  filter: saturate(1.05) !important;
}

.bg-overlay{
  background: rgba(4,4,10,.86) !important;
}

html:not(.dark) .bg-image,
html:not(.dark) .bg-overlay{
  display: none !important;
}

/* Premium panel glow border */
.app-content .bg-white,
.app-content .dark\:bg-gray-800,
.app-content .glass-effect,
.app-content .bg-gray-50,
.app-content .dark\:bg-gray-700,
.app-content .bg-gray-100,
.app-content .dark\:bg-gray-600,
.modal-content{
  position: relative;
}

.app-content .bg-white::before,
.app-content .dark\:bg-gray-800::before,
.app-content .glass-effect::before,
.app-content .bg-gray-50::before,
.app-content .dark\:bg-gray-700::before,
.app-content .bg-gray-100::before,
.app-content .dark\:bg-gray-600::before,
.modal-content::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(168,85,247,.26), rgba(236,72,153,.18));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity:.65;
}

.app-content .bg-white:hover::before,
.app-content .dark\:bg-gray-800:hover::before,
.app-content .glass-effect:hover::before,
.app-content .bg-gray-50:hover::before,
.app-content .dark\:bg-gray-700:hover::before,
.app-content .bg-gray-100:hover::before,
.app-content .dark\:bg-gray-600:hover::before{
  opacity:.85;
}

/* Microinteractions */
.app-content .card-hover{
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.app-content .card-hover:hover{
  transform: translateY(-2px);
  filter: saturate(1.03);
}

.side-link{transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease}
.side-link:active{transform: translateY(0)}

@keyframes ringSpin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .card-hover,.nav-tab,.preloader,.preloader__ring{transition:none!important;animation:none!important}
}

/* Premium UI kit (scoped) */
.app-content{
  color: rgba(233,233,255,.92);
}

html:not(.dark) .app-content{
  color: #111827;
}

.app-content .glass-effect,
.app-content .bg-white,
.app-content .dark\:bg-gray-800{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 14px 44px rgba(0,0,0,.32);
}

.app-content .shadow,
.app-content .shadow-lg,
.app-content .shadow-xl{
  box-shadow: 0 14px 44px rgba(0,0,0,.32) !important;
}

/* Tone down over-bright gradient cards (dashboard/stat tiles) */
.app-content .bg-gradient-to-r{
  box-shadow: 0 14px 42px rgba(0,0,0,.32) !important;
}

.app-content .text-white.bg-gradient-to-r{
  border: 1px solid rgba(255,255,255,.10) !important;
  filter: saturate(1.05) contrast(1.02);
}

.app-content .bg-gradient-to-r .text-blue-100,
.app-content .bg-gradient-to-r .text-green-100,
.app-content .bg-gradient-to-r .text-purple-100,
.app-content .bg-gradient-to-r .text-orange-100{
  color: rgba(233,233,255,.74) !important;
}

/* Replace legacy gray utility blocks with dark glass */
.app-content .bg-gray-50,
.app-content .dark\:bg-gray-700,
.app-content .bg-gray-100,
.app-content .dark\:bg-gray-600{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 12px 38px rgba(0,0,0,.28) !important;
}

/* Select dropdown: make options readable in dark UI */
.app-content select{
  color-scheme: dark;
}

.app-content select option,
.app-content select optgroup{
  background: rgba(10,10,18,.98);
  color: rgba(233,233,255,.92);
}

/* Modal select: always white background */
.modal-content select{
  color-scheme: light;
}
.modal-content select option,
.modal-content select optgroup{
  background: #fff;
  color: #1a1a2e;
}

/* Metric/stat cards (users page) - unify and make numbers pop */
.app-content .bg-blue-50,
.app-content .bg-green-50,
.app-content .bg-purple-50,
.app-content .bg-yellow-50,
.app-content .dark\:bg-blue-900\/20,
.app-content .dark\:bg-green-900\/20,
.app-content .dark\:bg-purple-900\/20,
.app-content .dark\:bg-yellow-900\/20{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 14px 44px rgba(0,0,0,.30) !important;
}

.app-content .bg-blue-50 .text-blue-600,
.app-content .dark\:bg-blue-900\/20 .dark\:text-blue-400{
  color: rgba(168,85,247,.98) !important;
  text-shadow: 0 0 22px rgba(168,85,247,.18);
}

.app-content .bg-green-50 .text-green-600,
.app-content .dark\:bg-green-900\/20 .dark\:text-green-400{
  color: rgba(236,72,153,.94) !important;
  text-shadow: 0 0 22px rgba(236,72,153,.16);
}

.app-content .bg-purple-50 .text-purple-600,
.app-content .dark\:bg-purple-900\/20 .dark\:text-purple-400{
  color: rgba(168,85,247,.98) !important;
  text-shadow: 0 0 22px rgba(168,85,247,.18);
}

.app-content .bg-yellow-50 .text-yellow-600,
.app-content .dark\:bg-yellow-900\/20 .dark\:text-yellow-400{
  color: rgba(233,233,255,.92) !important;
  text-shadow: 0 0 22px rgba(168,85,247,.12);
}

.app-content .border-gray-200,
.app-content .dark\:border-gray-700,
.app-content .border-gray-300,
.app-content .dark\:border-gray-600,
.app-content .dark\:border-gray-500{
  border-color: rgba(255,255,255,.10) !important;
}

/* Kill pastel/light gradient blocks from old templates */
.app-content .from-blue-50,
.app-content .to-indigo-50,
.app-content .dark\:from-gray-700,
.app-content .dark\:to-gray-800,
.app-content .from-gray-100,
.app-content .to-gray-200{
  --tw-gradient-from: rgba(255,255,255,.05) !important;
  --tw-gradient-to: rgba(255,255,255,.02) !important;
}

/* Force brand gradient for colored tiles (keeps it consistent) */
.app-content .bg-gradient-to-r.text-white,
.app-content .bg-gradient-to-r.text-white.card-hover,
.app-content .bg-gradient-to-r.card-hover{
  background-image: linear-gradient(135deg, rgba(168,85,247,.85) 0%, rgba(236,72,153,.70) 100%) !important;
}

html:not(.dark) .app-content .bg-gradient-to-r.text-white:not(.view-btn):not(.filter-btn),
html:not(.dark) .app-content .bg-gradient-to-r.text-white.card-hover:not(.filter-btn),
html:not(.dark) .app-content .bg-gradient-to-r.card-hover:not(.filter-btn){
  background-image: none !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.08) !important;
}

html:not(.dark) .app-content .bg-gradient-to-r.text-white:not(.view-btn):not(.filter-btn) :where(p, span, div){
  color: #111827;
}

html:not(.dark) .app-content .bg-gradient-to-r.text-white:not(.view-btn) :where(.text-blue-100, .text-green-100, .text-purple-100, .text-orange-100){
  color: #6b7280 !important;
}

/* Chart readability */
.app-content canvas{
  filter: saturate(1.05) contrast(1.05);
}

.app-content h1,.app-content h2,.app-content h3{
  color: rgba(233,233,255,.96);
  letter-spacing: .2px;
}

.app-content p,
.app-content .text-gray-600,
.app-content .dark\:text-gray-400,
.app-content .text-gray-500,
.app-content .dark\:text-gray-300{
  color: rgba(233,233,255,.72) !important;
}

html:not(.dark) .app-content p,
html:not(.dark) .app-content .text-gray-600,
html:not(.dark) .app-content .text-gray-500,
html:not(.dark) .app-content .text-gray-700,
html:not(.dark) .app-content .text-gray-800,
html:not(.dark) .app-content .text-gray-900{
  color: #374151 !important;
}

/* Buttons */
.app-content button,
.app-content a.inline-flex,
.app-content a.btn,
.app-content .btn{
  -webkit-tap-highlight-color: transparent;
}

.app-content button:focus-visible,
.app-content a:focus-visible,
.app-content input:focus-visible,
.app-content select:focus-visible,
.app-content textarea:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(168,85,247,.22), 0 0 0 1px rgba(168,85,247,.18) inset;
}

/* Tables */
.app-content table{
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}

.app-content thead{
  background: linear-gradient(135deg, rgba(168,85,247,.20) 0%, rgba(236,72,153,.12) 100%);
}

.app-content thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .35px;
  text-transform: uppercase;
  color: rgba(233,233,255,.74);
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.app-content th,
.app-content td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mini tables in statistics cards: no horizontal scroll */
.app-content .custom-scrollbar{
  overflow-x: hidden;
  overflow-y: visible !important;
  max-height: none !important;
  scrollbar-width: none;
}

.app-content .custom-scrollbar::-webkit-scrollbar{width:0;height:0}

.app-content .custom-scrollbar table{
  table-layout: auto;
}

.app-content .custom-scrollbar th,
.app-content .custom-scrollbar td{
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
}

.app-content tbody tr{
  transition: background .18s ease, transform .18s ease;
}

.app-content tbody tr:hover{
  background: rgba(255,255,255,.05);
}

.app-content tbody tr:last-child td{
  border-bottom: none;
}

/* Forms */
.app-content :where(input, select, textarea){
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(233,233,255,.92);
  border-radius: 14px;
  padding: 10px 12px;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

html:not(.dark) .app-content :where(input, select, textarea){
  background: #ffffff;
  border-color: #e5e7eb;
  color: #111827;
}

.app-content :where(input, textarea)::placeholder{
  color: rgba(233,233,255,.45);
}

html:not(.dark) .app-content :where(input, textarea)::placeholder{
  color: #9ca3af;
}

.app-content :where(input, textarea, select):hover{
  border-color: rgba(168,85,247,.22);
  background: rgba(255,255,255,.06);
}

.app-content :where(input, textarea, select):focus{
  border-color: rgba(168,85,247,.40);
}

/* Badges / chips */
.app-content .badge,
.app-content .chip,
.app-content .rounded-full{
  border-color: rgba(255,255,255,.10);
}

.app-content .text-green-600,
.app-content .text-green-500,
.app-content .bg-green-100,
.app-content .bg-green-50{
  color: rgba(34,197,94,.95) !important;
}

.app-content .text-red-600,
.app-content .text-red-500{
  color: rgba(239,68,68,.95) !important;
}

/* Pagination-like controls */
.app-content .pagination a,
.app-content .pagination button{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(233,233,255,.86);
  padding: 8px 10px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.app-content .pagination a:hover,
.app-content .pagination button:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(168,85,247,.22);
  transform: translateY(-1px);
}

/* Brand remap for templates (Tailwind utility overrides) */
.app-content .text-blue-500,
.app-content .text-blue-600,
.app-content .dark\:text-blue-400{
  color: rgba(168,85,247,.98) !important;
}

.app-content .text-green-500,
.app-content .text-green-600,
.app-content .dark\:text-green-400{
  color: rgba(236,72,153,.92) !important;
}

.app-content .text-orange-500,
.app-content .text-orange-600,
.app-content .dark\:text-orange-400{
  color: rgba(236,72,153,.88) !important;
}

/* Light mode: restore original Tailwind-like accents */
html:not(.dark) .app-content .text-blue-500,
html:not(.dark) .app-content .text-blue-600{
  color: #2563eb !important;
}

html:not(.dark) .app-content .text-green-500,
html:not(.dark) .app-content .text-green-600{
  color: #16a34a !important;
}

html:not(.dark) .app-content .text-orange-500,
html:not(.dark) .app-content .text-orange-600{
  color: #ea580c !important;
}

html:not(.dark) .app-content .text-purple-500,
html:not(.dark) .app-content .text-purple-600{
  color: #7c3aed !important;
}

.app-content .bg-blue-500,
.app-content .bg-blue-600,
.app-content .hover\:bg-blue-600:hover,
.app-content .hover\:bg-blue-700:hover{
  background-color: rgba(168,85,247,.92) !important;
}

.app-content .bg-green-500,
.app-content .bg-green-600,
.app-content .hover\:bg-green-600:hover,
.app-content .hover\:bg-green-700:hover{
  background-color: rgba(236,72,153,.86) !important;
}

.app-content .bg-purple-500,
.app-content .bg-purple-600,
.app-content .hover\:bg-purple-600:hover,
.app-content .hover\:bg-purple-700:hover{
  background-color: rgba(168,85,247,.92) !important;
}

.app-content .bg-orange-500,
.app-content .bg-orange-600,
.app-content .hover\:bg-orange-600:hover,
.app-content .hover\:bg-orange-700:hover{
  background-color: rgba(236,72,153,.80) !important;
}

.app-content .from-blue-500{--tw-gradient-from: rgba(168,85,247,.92) !important;}
.app-content .to-blue-600{--tw-gradient-to: rgba(236,72,153,.82) !important;}
.app-content .from-green-500{--tw-gradient-from: rgba(236,72,153,.86) !important;}
.app-content .to-green-600{--tw-gradient-to: rgba(168,85,247,.86) !important;}
.app-content .from-purple-500{--tw-gradient-from: rgba(168,85,247,.92) !important;}
.app-content .to-purple-600{--tw-gradient-to: rgba(236,72,153,.84) !important;}
.app-content .from-orange-500{--tw-gradient-from: rgba(236,72,153,.84) !important;}
.app-content .to-orange-600{--tw-gradient-to: rgba(168,85,247,.80) !important;}

.app-content .from-blue-600{--tw-gradient-from: rgba(168,85,247,.92) !important;}
.app-content .to-blue-700{--tw-gradient-to: rgba(236,72,153,.82) !important;}
.app-content .hover\:from-blue-700:hover{--tw-gradient-from: rgba(168,85,247,.98) !important;}
.app-content .hover\:to-blue-800:hover{--tw-gradient-to: rgba(236,72,153,.90) !important;}

/* Focus ring remap */
.app-content .focus\:ring-blue-500:focus{--tw-ring-color: rgba(168,85,247,.35) !important;}
.app-content .focus\:border-blue-500:focus{border-color: rgba(168,85,247,.55) !important;}
.app-content .focus\:ring-green-500:focus{--tw-ring-color: rgba(236,72,153,.30) !important;}
.app-content .focus\:border-green-500:focus{border-color: rgba(236,72,153,.50) !important;}

/* Scrollbar (global) */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:rgba(255,255,255,.04)}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg, rgba(168,85,247,.45), rgba(236,72,153,.35)); border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg, rgba(168,85,247,.62), rgba(236,72,153,.45))}

/* Items / Orders: wrap long text instead of marquee */
.app-content .item-cell-wrap{
  display: block;
}

.app-content .item-name-wrap{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.25;
}

.app-content .item-desc-wrap{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.25;
  color: rgba(233,233,255,.62);
}

html:not(.dark) .app-content .item-desc-wrap{
  color: #6b7280;
}

.app-content table.orders-table{
  table-layout: auto;
}

.app-content table.orders-table th:nth-child(2),
.app-content table.orders-table td:nth-child(2){
  min-width: 320px;
}

.app-content .order-item-name{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.25;
}

/* Items table: wider name, compact status/actions */
.app-content table.items-table{
  table-layout: auto;
}

.app-content table.items-table th:nth-child(1),
.app-content table.items-table td:nth-child(1){
  min-width: 420px;
}

.app-content table.items-table th:nth-child(6),
.app-content table.items-table td:nth-child(6){
  width: 120px;
  white-space: nowrap;
}

.app-content table.items-table th:nth-child(7),
.app-content table.items-table td:nth-child(7){
  width: 92px;
  white-space: nowrap;
}

.app-content table.items-table th:nth-child(6),
.app-content table.items-table td:nth-child(6),
.app-content table.items-table th:nth-child(7),
.app-content table.items-table td:nth-child(7){
  padding-left: 10px !important;
  padding-right: 10px !important;
}

html:not(.dark) .filter-btn{
  background: #ffffff !important;
  border: 2px solid #e5e7eb !important;
  color: #1f2937 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}

html:not(.dark) .filter-btn i,
html:not(.dark) .filter-btn span{
  color: #1f2937 !important;
}

html:not(.dark) .filter-btn.active{
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28) !important;
}

html:not(.dark) .filter-btn.active i,
html:not(.dark) .filter-btn.active span{
  color: #ffffff !important;
}

/* Toast notifications */
.app-toast{
  max-width: min(420px, calc(100vw - 32px));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 22px 70px rgba(0,0,0,.50);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.app-toast.bg-green-500{background: rgba(34,197,94,.92) !important;}
.app-toast.bg-red-500{background: rgba(239,68,68,.92) !important;}
.app-toast.bg-yellow-500{background: rgba(245,158,11,.92) !important;}
.app-toast.bg-purple-600{background: rgba(168,85,247,.92) !important;}

/* Page sub-navigation (Orders / Products / Users groups) */
.page-section-nav--orders{
  margin-bottom: 1rem;
}

.page-tabs-row--orders{
  justify-content: flex-start;
}

.page-section-nav__stat-btn{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.1rem;
  border-radius: 12px;
  font-size: .875rem;
  font-weight: 600;
  color: #065f46;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid #6ee7b7;
  box-shadow: 0 8px 20px rgba(16,185,129,.12);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.page-section-nav__stat-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(16,185,129,.18);
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
}

.page-section-nav__stat-btn.active{
  color: #fff;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  border-color: #059669;
  box-shadow: 0 12px 28px rgba(16,185,129,.28);
}

.page-tabs-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.page-tabs{
  display: inline-flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .35rem;
  border-radius: 14px;
  background: rgba(241,245,249,.85);
  border: 1px solid rgba(148,163,184,.35);
}

html:not(.dark) .page-tabs{
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.page-tab{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .95rem;
  border-radius: 10px;
  font-size: .875rem;
  font-weight: 600;
  color: #475569;
  background: transparent;
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

html:not(.dark) .page-tab{
  color: #334155;
}

.page-tab:hover{
  background: rgba(255,255,255,.75);
  color: #1e293b;
}

.page-tab.active{
  color: #fff;
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 10px 24px rgba(37,99,235,.22);
}

.page-tab--transfer{
  margin-left: auto;
  color: #4338ca;
  background: rgba(238,242,255,.9);
  border-color: rgba(129,140,248,.45);
}

.page-tab--transfer:hover{
  background: #eef2ff;
}

.page-tab--transfer.active{
  color: #fff;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  border-color: #4f46e5;
}

.page-tab--anti{
  margin-left: auto;
  color: #b45309;
  background: rgba(255, 251, 235, 0.95);
  border-color: rgba(251, 191, 36, 0.55);
}

.page-tab--anti:hover{
  background: #fffbeb;
  border-color: #fbbf24;
}

.page-tab--anti.active{
  color: #fff;
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
  border-color: #d97706;
  box-shadow: 0 10px 24px rgba(245, 158, 11, 0.28);
}

html:not(.dark) .page-tab--anti{
  color: #b45309 !important;
  background: #fffbeb !important;
  border-color: #fcd34d !important;
}

html:not(.dark) .page-tab--anti.active{
  color: #ffffff !important;
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
  border-color: #d97706 !important;
}

html:not(.dark) .page-tab--anti.active i,
html:not(.dark) .page-tab--anti.active span{
  color: #ffffff !important;
}

/* Statistics cards — alternating light / blue */
.stat-card-alt{
  border-radius: .75rem;
  padding: 1.25rem;
  transition: transform .22s ease, box-shadow .22s ease;
}

.stat-card-alt:hover{
  transform: translateY(-3px);
}

.stat-card-alt--light{
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.stat-card-alt--light .stat-card-alt__sub{
  color: #475569;
}

.stat-card-alt--blue{
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
  border: 1px solid #1e40af;
  color: #fff;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.24);
}

.stat-card-alt--blue .stat-card-alt__sub{
  color: rgba(255, 255, 255, 0.88);
}

.stat-panel-alt--light{
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.stat-panel-alt--blue{
  background: #f0f9ff;
  border: 1px solid #93c5fd;
  border-radius: .75rem;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.06);
}

html.dark .stat-card-alt--light{
  background: linear-gradient(135deg, rgba(51,65,85,.55) 0%, rgba(30,41,59,.75) 100%);
  border-color: rgba(148,163,184,.25);
  color: #f1f5f9;
}

html.dark .stat-card-alt--light .stat-card-alt__sub{
  color: rgba(226,232,240,.72);
}

html.dark .stat-panel-alt--light{
  background: rgba(51,65,85,.35);
  border-color: rgba(148,163,184,.2);
}

html.dark .stat-panel-alt--blue{
  background: rgba(30,58,138,.35);
  border-color: rgba(96,165,250,.25);
}

/* Light mode: crisp panels — no dark-glass wash-out */
html:not(.dark) .app-content .bg-white,
html:not(.dark) .app-content .dark\:bg-gray-800,
html:not(.dark) .app-content .glass-effect{
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.07) !important;
}

html:not(.dark) .app-content .bg-gray-50,
html:not(.dark) .app-content .dark\:bg-gray-700,
html:not(.dark) .app-content .dark\:bg-gray-900,
html:not(.dark) .app-content .bg-gray-100,
html:not(.dark) .app-content .dark\:bg-gray-600{
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}

html:not(.dark) .app-content .bg-blue-50,
html:not(.dark) .app-content .from-blue-50,
html:not(.dark) .app-content .to-indigo-50{
  --tw-gradient-from: #eff6ff !important;
  --tw-gradient-to: #eef2ff !important;
  background: linear-gradient(90deg, #eff6ff 0%, #eef2ff 100%) !important;
  border-color: #bfdbfe !important;
}

html:not(.dark) .app-content .bg-white::before,
html:not(.dark) .app-content .dark\:bg-gray-800::before,
html:not(.dark) .app-content .glass-effect::before,
html:not(.dark) .app-content .bg-gray-50::before,
html:not(.dark) .app-content .dark\:bg-gray-700::before,
html:not(.dark) .app-content .bg-gray-100::before,
html:not(.dark) .app-content .dark\:bg-gray-600::before,
html:not(.dark) .modal-content::before{
  display: none !important;
}

html:not(.dark) .app-content h1,
html:not(.dark) .app-content h2,
html:not(.dark) .app-content h3{
  color: #0f172a !important;
}

html:not(.dark) .app-content p,
html:not(.dark) .app-content .text-gray-600,
html:not(.dark) .app-content .text-gray-500,
html:not(.dark) .app-content .text-gray-700,
html:not(.dark) .app-content .text-gray-800,
html:not(.dark) .app-content .text-gray-900,
html:not(.dark) .app-content .dark\:text-white,
html:not(.dark) .app-content .dark\:text-gray-300,
html:not(.dark) .app-content .dark\:text-gray-400{
  color: #334155 !important;
}

html:not(.dark) .app-content .text-gray-900,
html:not(.dark) .app-content .dark\:text-white{
  color: #111827 !important;
}

html:not(.dark) .app-content table{
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: none !important;
}

html:not(.dark) .app-content thead{
  background: #f1f5f9 !important;
}

html:not(.dark) .app-content thead th{
  color: #334155 !important;
}

html:not(.dark) .app-content tbody tr:hover{
  background: #f8fafc !important;
}

html:not(.dark) .app-content .modal-content,
html:not(.dark) .modal-content.bg-white{
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18) !important;
}

html:not(.dark) .app-content .border-gray-200,
html:not(.dark) .app-content .dark\:border-gray-700,
html:not(.dark) .app-content .border-gray-300,
html:not(.dark) .app-content .dark\:border-gray-600{
  border-color: #e5e7eb !important;
}

html:not(.dark) .stat-card-alt--light{
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html:not(.dark) .stat-card-alt--blue{
  color: #ffffff !important;
}

html:not(.dark) .stat-card-alt--blue .text-3xl,
html:not(.dark) .stat-card-alt--blue p{
  color: #ffffff !important;
}

html:not(.dark) .page-tabs{
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

html:not(.dark) .page-section-nav__stat-btn{
  color: #047857 !important;
  background: #ecfdf5 !important;
  border-color: #34d399 !important;
}

html:not(.dark) .page-section-nav__stat-btn.active{
  color: #ffffff !important;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
}

html:not(.dark) .app-content :is(.bg-blue-500, .bg-blue-600, .bg-green-500, .bg-green-600, .bg-purple-500, .bg-purple-600, .filter-btn.active, .page-tab.active, .view-btn, button.text-white, a.text-white),
html:not(.dark) .app-content :is(.bg-blue-500, .bg-blue-600, .bg-green-500, .bg-green-600, .bg-purple-500, .bg-purple-600, .filter-btn.active, .page-tab.active, .view-btn, button.text-white, a.text-white) *{
  color: #ffffff !important;
}

html:not(.dark) .app-content #dailyPresetDay.bg-blue-500,
html:not(.dark) .app-content #dailyPresetWeek.bg-blue-500,
html:not(.dark) .app-content #dailyPresetMonth.bg-blue-500,
html:not(.dark) .app-content #rangeBtn1.bg-emerald-500,
html:not(.dark) .app-content #rangeBtn7.bg-emerald-500,
html:not(.dark) .app-content #rangeBtn30.bg-emerald-500{
  color: #ffffff !important;
}

/* Inline action links (Антидубликаты, Перенос статистики) */
.inline-action-btn{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  border-radius: .5rem;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25;
  border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  white-space: nowrap;
}

.inline-action-btn:hover{
  transform: translateY(-1px);
}

.inline-action-btn--anti{
  color: #b45309;
  background: #fffbeb;
  border-color: #fcd34d;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.12);
}

.inline-action-btn--anti:hover{
  background: #fef3c7;
  border-color: #fbbf24;
}

.inline-action-btn--anti.active{
  color: #ffffff;
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
  border-color: #d97706;
  box-shadow: 0 8px 18px rgba(245, 158, 11, 0.28);
  pointer-events: none;
}

.inline-action-btn--transfer{
  color: #4338ca;
  background: #eef2ff;
  border-color: #c7d2fe;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1);
}

.inline-action-btn--transfer:hover{
  background: #e0e7ff;
  border-color: #a5b4fc;
}

.inline-action-btn--transfer.active{
  color: #ffffff;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  border-color: #4f46e5;
  box-shadow: 0 8px 18px rgba(79, 70, 229, 0.25);
  pointer-events: none;
}

html:not(.dark) .inline-action-btn--anti.active,
html:not(.dark) .inline-action-btn--anti.active i,
html:not(.dark) .inline-action-btn--anti.active span,
html:not(.dark) .inline-action-btn--transfer.active,
html:not(.dark) .inline-action-btn--transfer.active i,
html:not(.dark) .inline-action-btn--transfer.active span{
  color: #ffffff !important;
}