/* Sub2API presentation layer. Business values and authentication are unchanged. */
:root{--sf-canvas:#f2f6fb;--sf-panel:#ffffffeb;--sf-line:#c9d8e778;--sf-shadow:0 8px 28px #25456809;--sf-accent:#126c80;--sf-nav:#edf4fa;--sf-hover:#e3eff8}
.dark{--sf-canvas:#0b1422;--sf-panel:#152439ed;--sf-line:#9abde52b;--sf-shadow:0 12px 32px #00000021;--sf-accent:#87d9df;--sf-nav:#0f1d30;--sf-hover:#24425e}
body{background:var(--sf-canvas);letter-spacing:-.01em}
#app>.min-h-screen,#app .min-h-screen.bg-gray-50{background:var(--sf-canvas)}
.bg-mesh-gradient{background:radial-gradient(ellipse at 18% 5%,#5a88c516,transparent 48%),radial-gradient(ellipse at 98% 88%,#27a69d12,transparent 48%)!important}
.sidebar{background:var(--sf-nav)!important;border-right:1px solid var(--sf-line)!important;box-shadow:5px 0 25px #102c4c08}
.sidebar-header{min-height:84px;border-bottom:1px solid var(--sf-line);padding-top:18px;padding-bottom:18px}
.sidebar-brand-title{letter-spacing:-.035em}.sidebar-nav{padding-top:18px}.sidebar-link{border:1px solid transparent;border-radius:12px;min-height:42px;margin-bottom:4px;transition:background .18s,border-color .18s}.sidebar-link:hover{background:var(--sf-hover)!important}.sidebar-link-active{background:linear-gradient(110deg,#136f83,#335e96)!important;color:#f3fcff!important;border-color:#a0d8e53d;box-shadow:0 5px 16px #086a8524}.sidebar-link-active svg{color:#d4f4fc}.sidebar-section-title{letter-spacing:.09em;font-size:11px}
header.glass{background:var(--sf-panel)!important;backdrop-filter:blur(16px);border-bottom:1px solid var(--sf-line)!important}
.card,.card-glass,.glass-card,.stat-card{background:var(--sf-panel)!important;border:1px solid var(--sf-line)!important;box-shadow:var(--sf-shadow)!important;border-radius:18px!important}
.card-header{border-color:var(--sf-line)!important;padding-top:20px;padding-bottom:20px}.card-footer{border-color:var(--sf-line)!important}.stat-card{padding:23px}.card:hover{border-color:color-mix(in srgb,var(--sf-line),var(--sf-accent) 25%)!important}
main>div>div.grid:first-child>.card{border-top:2px solid #579aa774!important}main h1{letter-spacing:-.04em}main .text-xl.font-bold{font-size:1.6rem;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.btn,.btn-primary,.btn-secondary,.btn-ghost{border-radius:10px;transition:box-shadow .18s,background .18s}.btn-primary{background:linear-gradient(110deg,#107789,#365e9e)!important;border:1px solid #8fced342!important;color:white!important;box-shadow:0 4px 14px #177d9b26}.btn-primary:hover:not(:disabled){box-shadow:0 6px 22px #177d9b40;filter:brightness(1.08)}.btn-secondary{background:var(--sf-panel)!important;border-color:var(--sf-line)!important}.btn-ghost:hover{background:var(--sf-hover)!important}.btn:disabled,button:disabled{box-shadow:none;filter:none}
.input,select,textarea{border-color:var(--sf-line)!important;border-radius:11px!important}.input:focus,select:focus,textarea:focus{border-color:#559caf!important;box-shadow:0 0 0 3px #2d9aab20!important}
.dropdown,[role=listbox],[role=menu]{background:var(--sf-panel)!important;border:1px solid var(--sf-line)!important;box-shadow:0 18px 42px #05102026!important;border-radius:14px!important;backdrop-filter:blur(16px)}.dropdown-item{border-radius:8px;margin:2px 5px}.dropdown-item:hover{background:var(--sf-hover)}
table thead{background:var(--sf-nav)!important}table th{font-size:12px;font-weight:650}table td,table th{border-color:var(--sf-line)!important}table tbody tr:hover{background:var(--sf-hover)!important}
#app .relative.flex.min-h-screen>.absolute.inset-0{background:radial-gradient(ellipse at 15% 15%,#4f7db526,transparent 50%),radial-gradient(ellipse at 85% 90%,#53b2a41f,transparent 45%),var(--sf-canvas)!important}
.card-glass{padding:36px!important}.text-gradient{background-image:linear-gradient(105deg,#197c89,#4c6eab)!important}.dark .text-gradient{background-image:linear-gradient(105deg,#99e3d9,#acbfff)!important}
a:focus-visible,button:focus-visible{outline:2px solid var(--sf-accent);outline-offset:3px}
@media(max-width:640px){.card-glass{padding:24px!important}.card,.card-glass,.stat-card{border-radius:14px!important}main .text-xl.font-bold{font-size:1.2rem}.sidebar-header{min-height:72px}.sidebar-link{min-height:44px}}
@media(prefers-reduced-motion:reduce){.sidebar-link,.btn,.btn-primary,.btn-secondary,.btn-ghost{transition:none}}

/* Restrained depth and motion without animating financial values or tables. */
.bg-mesh-gradient{background:radial-gradient(ellipse at 10% 5%,#5988c52a,transparent 48%),radial-gradient(ellipse at 90% 85%,#279b9223,transparent 48%)!important;animation:sub-ambient-shift 26s ease-in-out infinite alternate;transform-origin:center}
.card,.stat-card{transition:border-color .2s,box-shadow .2s}
.dark .card,.dark .stat-card{background:linear-gradient(135deg,#192d43f5,#142237f5)!important}
main>div>div.grid:first-child>.card:nth-child(2){border-top-color:#729ee6a3!important}
main>div>div.grid:first-child>.card:nth-child(3){border-top-color:#57b4a4a3!important}
main>div>div.grid:first-child>.card:nth-child(4){border-top-color:#af85dca3!important}
.card:hover,.stat-card:hover{box-shadow:0 12px 30px #1d52701b!important}
.btn-primary{background-image:linear-gradient(115deg,#0c7f89,#365fa8,#187885)!important;background-size:200% 100%!important;transition:background-position .6s,box-shadow .2s}
.btn-primary:hover:not(:disabled){background-position:100% 0!important}
.sidebar-link-active{background-size:160% 100%!important;box-shadow:0 5px 20px #086a852d,inset 0 1px 0 #ffffff15}
.dropdown{animation:sub-menu-reveal .16s ease-out}
@keyframes sub-ambient-shift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-1%,1%,0) scale(1.03)}}
@keyframes sub-menu-reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.bg-mesh-gradient,.dropdown{animation:none}.card,.stat-card,.btn-primary{transition:none}}