/* 页面框架与登录页。 */
.app-layout { min-height: 100vh; }
.sidebar {
  width: 248px;
  padding: 20px 13px 15px;
  background: linear-gradient(155deg, #30366f 0%, #29295e 52%, #3b3180 100%);
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(155deg, #30366f 0%, #29295e 52%, #3b3180 100%);
  background-size: 26px 26px, 26px 26px, auto;
  color: white;
  border-right: 1px solid rgba(255, 255, 255, .12);
}
.sidebar-logo { display:flex; align-items:center; gap:11px; min-height:68px; margin:0 7px 17px; padding:0 5px 18px; border-bottom:1px solid rgba(238,240,255,.20); color:#f6f7ff; font-size:15px; }
.login-mark, .sidebar-mark { border-color: currentColor; }
.sidebar-logo .sidebar-mark { color:#c8beff; flex:0 0 auto; }
.sidebar-logo strong { display:block; font-size:15px; font-weight:650; letter-spacing:.045em; }
.sidebar-logo small { display:block; margin-top:3px; color:rgba(235,238,255,.58); font-size:8px; letter-spacing:.115em; }
.sidebar-nav { display:flex; flex-direction:column; gap:3px; }
.nav-section-label { margin:17px 12px 5px; color:rgba(235,238,255,.46); font-size:10px; font-weight:700; letter-spacing:.13em; }
.sidebar-nav a { position:relative; gap:12px; margin:0; padding:10px 12px; border-radius:7px; color:rgba(241,243,255,.72); font-size:13px; }
.sidebar-nav a::before { content:""; position:absolute; left:0; width:2px; height:18px; background:transparent; }
.sidebar-nav a:hover { background:rgba(237,240,255,.11); color:#fff; }
.sidebar-nav a.active { background:rgba(235,237,255,.17); color:#fff; }
.sidebar-nav a.active::before { background:#c2b7ff; }
.sidebar-user { margin:14px 7px 0; padding:15px 5px 2px; border-top-color:rgba(238,240,255,.20); }
.sidebar-user .user-name { font-weight:650; letter-spacing:.03em; }
.sidebar-user .user-role, .btn-logout { color:rgba(235,238,255,.62); }
.btn-logout:hover { color:#d9d1ff; }
.main-content { max-width:1600px; margin:0 auto; padding:38px clamp(20px,4vw,62px) 62px; }
.page-header { position:relative; margin-bottom:28px; padding-bottom:19px; border-bottom:1px solid var(--gray-300); }
.page-header::after { content:""; position:absolute; left:0; bottom:-1px; width:54px; height:3px; border-radius:3px; background:linear-gradient(90deg, var(--primary), var(--secondary)); }
.page-header h2 { color:var(--gray-900); font-family:"Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif; font-size:clamp(24px,3vw,31px); font-weight:600; letter-spacing:.055em; }
.page-header .page-desc { margin-top:7px; color:var(--gray-500); font-size:13px; }

.login-container { position:relative; overflow:hidden; padding:28px; background:linear-gradient(125deg, #4350bc 0 40%, transparent 40%), radial-gradient(circle at 80% 25%, rgba(118,88,223,.20), transparent 1px) 0 0 / 17px 17px, #eff2ff; }
.login-container::after { content:""; position:absolute; right:8vw; bottom:-12vw; width:min(49vw,610px); aspect-ratio:1; border:1px solid rgba(83,99,220,.24); border-radius:50%; box-shadow:0 0 0 48px rgba(83,99,220,.055), 0 0 0 96px rgba(118,88,223,.035); pointer-events:none; }
.login-card { position:relative; z-index:1; width:min(430px,100%); padding:46px 46px 42px; border:1px solid rgba(83,99,220,.16); border-radius:14px; box-shadow:18px 20px 0 rgba(57,68,174,.11); }
.login-kicker { color:var(--secondary); }
.login-card h1 { color:var(--gray-900); font-family:"Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif; font-size:clamp(29px,5vw,36px); font-weight:600; letter-spacing:.06em; }
.login-card .subtitle { color:var(--gray-500); letter-spacing:.04em; }
.login-form label { color:var(--gray-700); font-size:12px; font-weight:700; letter-spacing:.06em; }
.login-form input { padding:12px 13px; border-color:var(--gray-300); border-radius:7px; background:#fcfcff; }
.login-form input:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light); }
.btn-login { padding:13px; border-radius:7px; background:linear-gradient(115deg, var(--primary), var(--secondary)); font-weight:700; letter-spacing:.22em; }
.btn-login:hover { background:linear-gradient(115deg, var(--primary-dark), #6145c8); transform:translateY(-1px); }

@media (max-width:1024px) { .main-content { padding:30px 25px 52px; } .sidebar { width:218px; } .sidebar-logo small { display:none; } }
@media (max-width:768px) {
  .app-layout { display:block; }
  .sidebar { position:relative; display:block; width:100%; height:auto; min-height:0; padding:11px 13px 12px; overflow:hidden; }
  .sidebar-logo { min-height:40px; margin:0 5px 7px; padding:0 3px 9px; }
  .sidebar-logo small, .nav-section-label, .sidebar-user { display:none; }
  .sidebar-nav { flex-direction:row; gap:3px; overflow-x:auto; padding:0 1px; }
  .sidebar-nav a { flex:0 0 auto; padding:8px 10px; font-size:12px; }
  .sidebar-nav a::before { display:none; }
  .main-content { padding:25px 16px 42px; }
  .page-header { margin-bottom:22px; }
  .login-container { padding:20px; background:linear-gradient(158deg, #4350bc 0 27%, transparent 27%), #eff2ff; }
  .login-card { padding:36px 27px 32px; box-shadow:10px 11px 0 rgba(57,68,174,.12); }
}
