/* Sub2API Enterprise UI v4 — sidebar and layout redesign */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');
:root{--v4-bg:#f3f6fa;--v4-white:#fff;--v4-ink:#172033;--v4-muted:#718096;--v4-line:#e1e7ef;--v4-sidebar:#202b3c;--v4-sidebar-2:#29364a;--v4-sidebar-text:#bac6d6;--v4-sidebar-active:#fff;--v4-accent:#4f7cff;--v4-accent-dark:#3e66d4;--v4-accent-soft:#edf2ff;--v4-radius:10px;--v4-small:7px}
html,body,#app{background:var(--v4-bg)!important;color:var(--v4-ink)!important;font-family:'Plus Jakarta Sans','Segoe UI',sans-serif!important;font-size:14px!important;line-height:1.5!important}
body *{text-shadow:none!important;letter-spacing:0!important}
*,*:before,*:after{box-shadow:none!important;filter:none!important;backdrop-filter:none!important;transition:background-color .14s ease,border-color .14s ease,color .14s ease,opacity .14s ease!important;animation-duration:.14s!important}
[class*="gradient"],[class*="backdrop-blur"],[class*="drop-shadow"]{background-image:none!important;filter:none!important;backdrop-filter:none!important}
/* top bar */
header{height:64px!important;background:#fff!important;border-bottom:1px solid var(--v4-line)!important;color:var(--v4-ink)!important;z-index:20!important}
header h1,header h2,header h3{font-family:'Plus Jakarta Sans',sans-serif!important}
/* sidebar: structured dark slate, not pure black */
aside,.sidebar{width:256px!important;background:var(--v4-sidebar)!important;border:0!important;border-right:1px solid #334155!important;color:var(--v4-sidebar-text)!important}
aside>div:first-child,.sidebar>div:first-child{border-bottom:1px solid #344255!important}
aside a,aside button,.sidebar a,.sidebar button{margin:3px 12px!important;padding:10px 12px!important;min-height:38px!important;border:1px solid transparent!important;border-radius:8px!important;background:transparent!important;color:var(--v4-sidebar-text)!important;font-family:'Plus Jakarta Sans',sans-serif!important;font-size:13px!important;font-weight:600!important}
aside a:hover,aside button:hover,.sidebar a:hover,.sidebar button:hover{background:var(--v4-sidebar-2)!important;border-color:#3a4b63!important;color:#fff!important}
aside a[class*="bg-primary"],aside button[class*="bg-primary"],aside a[class*="bg-blue"],aside button[class*="bg-blue"],.sidebar a[class*="bg-primary"],.sidebar button[class*="bg-primary"]{background:var(--v4-accent)!important;border-color:var(--v4-accent)!important;color:#fff!important}
aside a[class*="bg-primary"] svg,aside button[class*="bg-primary"] svg,aside a[class*="bg-blue"] svg,.sidebar a[class*="bg-primary"] svg{color:#fff!important}
aside .text-primary-500,aside .text-primary-600,aside .text-blue-500,aside .text-blue-600,.sidebar .text-primary-500,.sidebar .text-primary-600{color:#fff!important}
/* common sidebar group labels */
aside [class*="uppercase"],.sidebar [class*="uppercase"]{color:#8290a4!important;font-size:10px!important;font-weight:800!important;letter-spacing:.09em!important}
aside hr,.sidebar hr{border-color:#344255!important}
/* content frame */
main{background:var(--v4-bg)!important}
main>div{max-width:none!important}
/* page surfaces */
.bg-white,.bg-gray-50,.bg-slate-50,.bg-dark-800,.bg-dark-900,.card,.card-glass,.glass{background:var(--v4-white)!important}
.bg-gray-100,.bg-gray-200,.bg-slate-100,.bg-slate-200{background:#eef2f7!important}
.border,.border-gray-100,.border-gray-200,.border-slate-100,.border-slate-200,.border-dark-700{border-color:var(--v4-line)!important}
.rounded-3xl,.rounded-2xl,.rounded-xl,.rounded-lg{border-radius:var(--v4-radius)!important}.rounded-md{border-radius:var(--v4-small)!important}
.card,.card-glass,.glass,[class*="rounded-xl"][class*="border"],[class*="rounded-2xl"][class*="border"]{border:1px solid var(--v4-line)!important;border-radius:var(--v4-radius)!important}
/* dashboard metric cards */
[class*="grid"]>[class*="rounded"][class*="border"]{background:#fff!important}
/* typography */
h1,h2,h3,h4,h5,h6{font-family:'Plus Jakarta Sans','Segoe UI',sans-serif!important;color:#172033!important;letter-spacing:-.02em!important}h1{font-size:25px!important;font-weight:800!important;line-height:1.25!important}h2{font-size:18px!important;font-weight:750!important}h3{font-size:15px!important;font-weight:700!important}.text-gray-400,.text-gray-500,.text-gray-600,.text-slate-400,.text-slate-500,.text-slate-600{color:var(--v4-muted)!important}[class*="font-mono"],[class*="tabular-nums"]{font-family:'JetBrains Mono',monospace!important}
/* controls */
button,[role=button],a.btn-primary,a.btn-secondary{font-family:'Plus Jakarta Sans','Segoe UI',sans-serif!important;border-radius:var(--v4-small)!important;font-weight:700!important;min-height:36px!important}
.bg-primary-500,.bg-primary-600,.bg-blue-500,.bg-blue-600,.bg-indigo-500,.bg-indigo-600,.btn-primary{background:var(--v4-accent)!important;background-image:none!important;color:#fff!important;border-color:var(--v4-accent)!important}.bg-primary-500:hover,.bg-primary-600:hover,.bg-blue-500:hover,.bg-blue-600:hover,.bg-indigo-500:hover,.bg-indigo-600:hover,.btn-primary:hover{background:var(--v4-accent-dark)!important}.text-primary-400,.text-primary-500,.text-primary-600,.text-blue-500,.text-blue-600,.text-indigo-500,.text-indigo-600{color:var(--v4-accent)!important}.border-primary-400,.border-primary-500,.border-primary-600,.border-blue-500,.border-blue-600{border-color:var(--v4-accent)!important}.btn-secondary{background:#fff!important;color:#344054!important;border:1px solid #cbd5e1!important}
input,textarea,select,.input{font-family:'Plus Jakarta Sans','Segoe UI',sans-serif!important;background:#fff!important;color:var(--v4-ink)!important;border:1px solid #cbd5e1!important;border-radius:var(--v4-small)!important;min-height:38px!important;box-shadow:none!important}input:focus,textarea:focus,select:focus{border-color:var(--v4-accent)!important;outline:3px solid #4f7cff22!important}
/* tables */
table{border-collapse:separate!important;border-spacing:0!important;width:100%!important}thead{background:#f8fafc!important}th{padding:12px 14px!important;color:#667085!important;font-size:10px!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.07em!important}td{padding:13px 14px!important;border-color:var(--v4-line)!important}tbody tr:hover{background:#f8faff!important}.badge,.rounded-full{border-radius:999px!important;font-weight:700!important}
/* dialogs */
[role=dialog],.modal-content,.dialog-container,[role=menu],.dropdown,.dropdown-menu,[data-radix-popper-content-wrapper]>div{background:#fff!important;border:1px solid var(--v4-line)!important;border-radius:11px!important}
[role=menuitem]:hover,.dropdown-item:hover{background:#f1f4f8!important}
/* status */
.bg-green-500,.bg-emerald-500{background:#087f5b!important}.text-green-500,.text-emerald-500{color:#087f5b!important}.bg-red-500,.bg-rose-500{background:#c2414b!important}.text-red-500,.text-rose-500{color:#c2414b!important}.text-amber-500,.text-yellow-500{color:#a16207!important}
/* mobile */
@media(max-width:768px){body{font-size:13px!important}header{height:56px!important}aside,.sidebar{width:240px!important}h1{font-size:21px!important}.p-8{padding:16px!important}.px-8{padding-left:16px!important;padding-right:16px!important}}
/* dark mode */
.dark,.dark body,.dark #app{background:#101828!important;color:#e5e7eb!important}.dark header{background:#182230!important;border-color:#344054!important}.dark aside,.dark .sidebar{background:#111b2b!important;border-color:#344054!important}.dark aside a:hover,.dark aside button:hover,.dark .sidebar a:hover,.dark .sidebar button:hover{background:#24344b!important}.dark .bg-white,.dark .bg-gray-50,.dark .bg-slate-50,.dark .card,.dark .card-glass,.dark .glass{background:#1d2939!important}.dark .bg-gray-100,.dark .bg-gray-200,.dark .bg-slate-100,.dark .bg-slate-200{background:#253449!important;color:#e5e7eb!important}.dark .border,.dark .border-gray-200,.dark .border-slate-200{border-color:#344054!important}.dark input,.dark textarea,.dark select,.dark .input{background:#182230!important;color:#e5e7eb!important;border-color:#475467!important}.dark thead{background:#253449!important}.dark tbody tr:hover{background:#24364c!important}.dark h1,.dark h2,.dark h3,.dark h4,.dark h5,.dark h6{color:#f9fafb!important}.dark .btn-secondary{background:#253449!important;color:#e5e7eb!important;border-color:#475467!important}