/* CSJX shell: keep the native XL data table, columns and fullscreen behavior. */
html#csjx-shell[data-csjx-shell] { --csjx-ink:#183a38; --csjx-muted:#718582; --csjx-accent:#23695d; --csjx-line:#e1eae7; }
html#csjx-shell[data-csjx-shell] body { background:#f5f8f7!important; color:#263e3a; font-family:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; }
html#csjx-shell[data-csjx-shell] #app .sidebar { background:#fff!important; border-right:1px solid var(--csjx-line)!important; box-shadow:3px 0 22px #183a3803; }
html#csjx-shell[data-csjx-shell] #app .sidebar>.brand { min-height:78px!important; padding:20px 18px!important; display:flex!important; gap:11px!important; align-items:center!important; border-bottom:1px solid #eef3f1!important; }
html#csjx-shell[data-csjx-shell] #app .sidebar .brand-mark { display:inline-flex!important; flex:0 0 34px; width:34px!important; height:36px!important; border-radius:11px!important; background:#183f39 url('/xl-assets/csjx-logo-20261107.svg') center/34px 34px no-repeat!important; color:transparent!important; font-size:0!important; box-shadow:0 4px 10px #183f391a; }
html#csjx-shell[data-csjx-shell] #app .sidebar .brand>b { color:var(--csjx-ink)!important; font-size:15px!important; font-weight:700!important; letter-spacing:.1px; line-height:1.4!important; }
html#csjx-shell[data-csjx-shell] #app .sidebar nav { padding-top:12px!important; }
html#csjx-shell[data-csjx-shell] #app .sidebar nav section>p { color:#91a29e!important; font-size:10px!important; font-weight:600; letter-spacing:1px; margin-top:18px!important; }
html#csjx-shell[data-csjx-shell] #app .sidebar nav a { min-height:41px!important; border-radius:9px!important; margin:4px 0!important; color:#60736e!important; transition:background .15s,color .15s; }
html#csjx-shell[data-csjx-shell] #app .sidebar nav a:hover { background:#f1f6f3!important; color:#205a4f!important; }
html#csjx-shell[data-csjx-shell] #app .sidebar nav a.router-link-active,
html#csjx-shell[data-csjx-shell] #app .sidebar nav a[aria-current=page] { background:#e8f2ed!important; color:#205b4d!important; font-weight:650!important; }
html#csjx-shell[data-csjx-shell] #app .topbar { background:#ffffffed!important; border-bottom:1px solid var(--csjx-line)!important; box-shadow:none!important; }
html#csjx-shell[data-csjx-shell] #app .topbar .profile { background:#f4f8f5!important; border:1px solid #e2ebe5!important; border-radius:12px!important; }
html#csjx-shell[data-csjx-shell] #app .workspace { background:#f5f8f7!important; }
html#csjx-shell[data-csjx-shell] #app .workspace h1 { font-size:23px!important; letter-spacing:-.6px; font-weight:680!important; color:var(--csjx-ink)!important; }
html#csjx-shell[data-csjx-shell] #app .workspace>.route-content { padding-top:20px; }
html#csjx-shell[data-csjx-shell] #app :is(.page-header,.page-heading) p { color:var(--csjx-muted)!important; }
html#csjx-shell[data-csjx-shell] #app :is(input,select,textarea):focus-visible { outline:2px solid #4d8b744d!important; outline-offset:2px; }
html#csjx-shell[data-csjx-shell] #app button:focus-visible,
html#csjx-shell[data-csjx-shell] #app a:focus-visible { outline:2px solid #438772!important; outline-offset:3px; }
/* Login gets a quiet branded frame; no external imagery, font or tracking. */
html#csjx-shell[data-csjx-shell] #app main.login { min-height:100dvh!important; padding:24px!important; background:radial-gradient(ellipse at 15% 15%,#e4f0e8 0,transparent 50%),radial-gradient(ellipse at 90% 90%,#e7edf2 0,transparent 45%),#f5f8f6!important; display:grid!important; place-items:center!important; }
html#csjx-shell[data-csjx-shell] #app main.login>section { box-sizing:border-box; width:min(430px,100%)!important; padding:38px!important; border-radius:22px!important; border:1px solid #ffffff!important; background:#ffffffed!important; box-shadow:0 20px 65px #1d463514,0 2px 7px #1d463506!important; }
html#csjx-shell[data-csjx-shell] #app main.login .brand { color:#71827b!important; font-size:13px!important; margin-bottom:30px!important; display:flex!important; align-items:center; gap:9px; }
html#csjx-shell[data-csjx-shell] #app main.login .brand::before { content:""; display:block; height:42px; width:42px; flex:0 0 42px; background:url('/xl-assets/csjx-logo-20261107.svg') center/contain no-repeat; margin-right:4px; }
html#csjx-shell[data-csjx-shell] #app main.login .brand strong { color:#214d40!important; font-size:19px!important; font-weight:750!important; letter-spacing:.7px; }
html#csjx-shell[data-csjx-shell] #app main.login h1 { color:var(--csjx-ink)!important; font-size:25px!important; letter-spacing:-.6px; line-height:1.4; margin-bottom:9px!important; }
html#csjx-shell[data-csjx-shell] #app main.login section>p { font-size:13px!important; line-height:1.8!important; color:#7b8c85!important; margin-bottom:27px!important; }
html#csjx-shell[data-csjx-shell] #app main.login .field { margin-bottom:18px!important; }
html#csjx-shell[data-csjx-shell] #app main.login .field label { font-size:12px!important; font-weight:600!important; color:#526a60!important; margin-bottom:8px!important; }
html#csjx-shell[data-csjx-shell] #app main.login input { height:45px!important; box-sizing:border-box; background:#f8faf8!important; border:1px solid #dfe8e2!important; border-radius:10px!important; padding:0 13px!important; font-size:14px!important; }
html#csjx-shell[data-csjx-shell] #app main.login button { width:100%!important; min-height:45px!important; border:0!important; border-radius:10px!important; background:#245e4e!important; color:white!important; font-size:14px!important; font-weight:650!important; box-shadow:0 5px 13px #245e4e1a!important; }
html#csjx-shell[data-csjx-shell] #app main.login button:hover { background:#1c5143!important; }
html#csjx-shell[data-csjx-shell] #app main.login .error { border-radius:8px; color:#a13d3d; background:#fff3f1; padding:10px; font-size:12px; }
@media(max-width:640px) {
 html#csjx-shell[data-csjx-shell] #app .sidebar>.brand { padding:18px 16px!important; }
 html#csjx-shell[data-csjx-shell] #app main.login { padding:18px!important; }
 html#csjx-shell[data-csjx-shell] #app main.login>section { padding:29px 24px!important; border-radius:18px!important; }
 html#csjx-shell[data-csjx-shell] #app main.login h1 { font-size:23px!important; }
 html#csjx-shell[data-csjx-shell] #app .workspace h1 { font-size:20px!important; }
}
@media(prefers-reduced-motion:reduce) { html#csjx-shell[data-csjx-shell] #app .sidebar nav a { transition:none; } }

/* Remove native legacy pseudo-labels that otherwise duplicate the name. */
html#csjx-shell[data-csjx-shell] #app .sidebar .brand b::after { content:none!important;display:none!important; }