:root { color-scheme: light; --ink: #172c47; --muted: #607086; --line: #dce4ec; --accent: #1769d2; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--ink); }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #70a8ed; outline-offset: 3px; }
button:disabled { cursor: wait; opacity: .65; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 10010; background: white; padding: .8rem 1.2rem; border-radius: .5rem; }
.skip-link:focus { top: 1rem; }
.main-grid-bg { display: none; }
.sidebar-wrap { display: flex; flex-direction: column; }
.sidebar-wrap nav { overflow-y: auto; min-height: 0; padding-bottom: 2rem; scrollbar-width: thin; }
.main-wrap, .page-content { min-width: 0; }
.page-content { padding: 2rem; max-width: 1720px; margin: 0 auto; }
.header-inner { display: flex; height: 100%; align-items: center; gap: 1rem; justify-content: space-between; padding: 0 1.5rem; }
.header-title { font-size: .9rem; color: var(--muted); font-weight: 500; }
.mobile-menu-toggle, .sidebar-backdrop { display: none; }
.nav-item[aria-current="page"] { font-weight: 650; }
#userMenuBtn { max-width: 20rem; }
#userMenuBtn > div:last-child { min-width: 0; }
#userMenuBtn span { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-content h1 { letter-spacing: -.035em; }
.page-content > .space-y-6 > .flex.items-center.justify-between:first-child { gap: 1rem; }
.overflow-x-auto { max-width: 100%; overscroll-behavior-x: contain; }
.overflow-x-auto table { min-width: 640px; }
#toastContainer { max-width: calc(100vw - 2rem); }
.login-shell { display: grid; grid-template-columns: minmax(360px, .9fr) minmax(450px, 1.1fr); width: 100%; min-height: 100dvh; background: #fff; }
.login-intro { display: flex; flex-direction: column; padding: 3rem clamp(2rem, 5vw, 6rem); background: #172c47; color: #fff; }
.login-brand, .login-mobile-brand { display: flex; align-items: center; gap: .75rem; font-size: 1.1rem; font-weight: 600; }
.brand-mark { display: inline-flex; width: 2.25rem; height: 2.25rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: .65rem; color: #fff; background: #2678df; font-weight: 700; }
.login-intro-copy { margin: auto 0; padding: 4rem 0; }
.login-eyebrow { color: #9fbcdb; font-size: .8rem; letter-spacing: .16em; margin-bottom: 1.25rem; }
.login-intro h1 { font-size: clamp(2rem, 3vw, 3rem); line-height: 1.45; letter-spacing: -.04em; font-weight: 600; }
.login-intro-copy > p:not(.login-eyebrow) { color: #c2d1e0; margin-top: 1.5rem; line-height: 1.9; max-width: 26rem; }
.login-features { display: grid; gap: 1rem; padding-top: 2.5rem; font-size: .9rem; color: #d2deeb; }
.login-features li::before { content: "—"; margin-right: .8rem; color: #75a5dd; }
.login-intro-foot { color: #9fbcdb; font-size: .8rem; }
.login-form-area { display: flex; align-items: center; justify-content: center; padding: 3rem 2rem; min-width: 0; }
.login-card { width: 100%; max-width: 25rem; }
.login-mobile-brand { display: none; }
.login-dingtalk, .login-submit { display: flex; width: 100%; min-height: 3rem; align-items: center; justify-content: center; gap: .65rem; border-radius: .65rem; font-size: .95rem; font-weight: 600; transition: background .15s; }
.login-dingtalk { background: var(--accent); color: white; }
.login-dingtalk:hover { background: #1256ad; }
.login-submit { background: var(--ink); color: #fff; }
.login-submit:hover { background: #233f60; }
.login-divider { display: flex; align-items: center; gap: 1rem; margin: 1.8rem 0; color: var(--muted); font-size: .75rem; }
.login-divider::before, .login-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.login-input { width: 100%; height: 3rem; padding: .75rem 1rem; border: 1px solid #ccd7e3; border-radius: .65rem; background: #fff; color: var(--ink); font-size: 1rem; }
.login-input.pr-20 { padding-right: 5rem; }
.login-input:focus { border-color: var(--accent); outline: 3px solid #e4effe; }
.login-password-toggle { position: absolute; right: .5rem; top: .35rem; height: 2.3rem; min-width: 3.5rem; padding: 0 .5rem; color: var(--muted); font-size: .8rem; border-radius: .3rem; }
.login-help { margin-top: 1.5rem; font-size: .8rem; color: var(--muted); line-height: 1.8; }
.login-help summary { cursor: pointer; padding: .25rem 0; }
.login-help p { padding: .75rem; margin-top: .25rem; border-radius: .5rem; background: #f3f6fa; }
.login-footnote { margin-top: 2rem; font-size: .7rem; color: #7f8b9c; text-align: center; }
@media (max-width: 767px) {
  #appLayout .sidebar-wrap { width: min(17rem, 85vw); height: 100dvh; transform: translateX(-100%); transition: transform .2s; z-index: 50; }
  #appLayout.mobile-nav-open .sidebar-wrap { transform: translateX(0); }
  #appLayout .header-wrap { left: 0; }
  #appLayout .main-wrap { margin-left: 0; }
  #appLayout .nav-text, #appLayout .logo-text, #appLayout .chevron-btn { display: flex; }
  #appLayout .expand-btn { display: none !important; }
  .mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: .5rem; flex-shrink: 0; }
  .header-inner { padding: 0 .75rem; gap: .5rem; }
  .header-title { font-size: .8rem; margin-right: auto; }
  #userMenuBtn { padding: .25rem; gap: .5rem; }
  #userMenuBtn span { max-width: 6.5rem; font-size: .75rem; }
  #appLayout.mobile-nav-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 45; background: rgb(15 23 42 / .45); }
  body.mobile-navigation-open { overflow: hidden; }
  .page-content { padding: 1.25rem 1rem; }
  .page-content > .space-y-6 > .flex.items-center.justify-between:first-child { flex-wrap: wrap; align-items: flex-start; }
  .page-content h1.text-3xl { font-size: 1.5rem; line-height: 1.4; }
  .page-content form.flex > * { min-width: 0; max-width: 100%; }
  .page-content form.flex > .flex-1 { flex-basis: 100%; }
  .page-content .p-8 { padding: 1.25rem; }
  .login-shell { display: block; }
  .login-intro { display: none; }
  .login-form-area { min-height: 100dvh; align-items: flex-start; padding: max(2rem, env(safe-area-inset-top)) 1.5rem 2rem; }
  .login-mobile-brand { display: flex; margin-bottom: 2.5rem; }
  .login-card { max-width: 26rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}