*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#f5f7fa;color:#303133;min-height:100vh;}
.auth-container{max-width:400px;margin:80px auto;background:#fff;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.1);padding:30px;}
.auth-container h2{text-align:center;margin-bottom:20px;color:#303133;}
.form-group{margin-bottom:14px;}
.form-group label{display:block;margin-bottom:4px;font-size:13px;color:#606266;}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:8px 10px;border:1px solid #dcdfe6;border-radius:4px;font-size:14px;}
button[type="submit"]{width:100%;padding:10px;background:#409eff;color:#fff;border:none;border-radius:4px;font-size:15px;cursor:pointer;}
button[type="submit"]:hover{background:#337ecc;}
button{padding:8px 16px;background:#409eff;color:#fff;border:none;border-radius:4px;font-size:14px;cursor:pointer;}
button:hover{background:#337ecc;}
.dark-mode-btn{width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,0.1);font-size:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.menu-btn{display:none;width:22px;height:32px;flex-direction:column;justify-content:center;gap:4px;cursor:pointer;background:none;border:none;padding:0;margin-right:12px;flex-shrink:0;}
.menu-btn span{display:block;width:22px;height:2px;background:#606266;border-radius:2px;transition:all .3s;}
body.dark .menu-btn span{background:#ccc;}
.nav-links{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:0 8px;}
.nav-links a{color:#409eff;text-decoration:none;font-size:13px;padding:4px 8px;border-radius:4px;transition:background .15s;white-space:nowrap;}
.nav-links a:hover{background:#e6f0ff;}
body.dark .nav-links a{color:#66b1ff;}
body.dark .nav-links a:hover{background:#3a3a3a;}
@media(max-width:768px){.menu-btn{display:flex;}.nav-links{display:none;}}
.auth-link{text-align:center;margin-top:12px;font-size:13px;color:#909399;}
.auth-link a{color:#409eff;text-decoration:none;}
.error{color:#f56c6c;text-align:center;margin-top:8px;font-size:13px;}
.success{color:#67c23a;text-align:center;margin-top:8px;font-size:13px;}
.topnav{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08);}
.topnav a{color:#409eff;text-decoration:none;margin:0 8px;}
.container{max-width:1000px;margin:24px auto;padding:0 16px;}
.card{background:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.08);padding:20px;margin-bottom:16px;}
.card p{margin:8px 0;font-size:14px;}
.card code{background:#f0f2f5;padding:2px 6px;border-radius:3px;font-size:13px;}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
.plan-card{text-align:center;}
.plan-card h3{margin-bottom:8px;}
.plan-card .price{font-size:22px;font-weight:700;color:#409eff;margin:12px 0;}
table{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.08);}
th,td{border-bottom:1px solid #ebeef5;padding:10px;text-align:left;}
th{background:#fafafa;}
h2,h3{color:#303133;margin-bottom:12px;}

/* 深色模式 */
body.dark{background:#1e1e1e;color:#fff;}
body.dark .auth-container{background:#2d2d2d;}
body.dark .auth-container h2{color:#fff;}
body.dark .form-group label{color:#ccc;}
body.dark .form-group input,.dark .form-group select,.dark .form-group textarea{background:#1a1a1a;color:#fff;border-color:#444;}
body.dark .topnav{background:#2d2d2d;}
body.dark .container{color:#ccc;}
body.dark .card{background:#2d2d2d;}
body.dark .card p{color:#ccc;}
body.dark .card code{background:#3a3a3a;color:#ccc;}
body.dark table{background:#2d2d2d;}
body.dark th,body.dark td{border-color:#444;}
body.dark th{background:#3a3a3a;}
body.dark h2,body.dark h3{color:#fff;}
body.dark button:not(.dark-mode-btn,.menu-btn){background:#337ecc;}
.topnav a.active{color:#409eff;font-weight:600;position:relative;}
.topnav a.active::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:#409eff;border-radius:1px;}
body.dark .topnav a.active{color:#66b1ff;}
body.dark .topnav a.active::after{background:#66b1ff;}
body.dark input,body.dark select,body.dark textarea{background:#1a1a1a;color:#fff;border-color:#444;}
.notice-carousel{background:#fff;border:1px solid #e4e7ed;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.08);margin-bottom:16px;overflow:hidden;height:48px;}
@media(min-width:769px){
.sidebar-overlay,.sidebar{display:none!important;}
}
@media(max-width:768px){
.sidebar-overlay{display:block;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:1000;opacity:0;visibility:hidden;transition:all .3s;}
.sidebar-overlay.open{opacity:1;visibility:visible;}
.sidebar{display:flex;flex-direction:column;position:fixed;top:0;left:-280px;width:280px;height:100vh;background:#fff;z-index:1001;transition:left .3s ease;box-shadow:4px 0 12px rgba(0,0,0,.1);}
.sidebar.open{left:0;}
.sidebar-header{height:60px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid #e4e7ed;font-size:16px;font-weight:600;color:#303133;}
.sidebar-body{flex:1;padding:16px;overflow-y:auto;}
.sidebar-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:8px;cursor:pointer;color:#606266;text-decoration:none;transition:background .15s;font-size:14px;}
.sidebar-item:hover{background:#f0f2f5;color:#409eff;}
.sidebar-item .icon{font-size:20px;width:24px;text-align:center;}
body.dark .sidebar{background:#2d2d2d;border-right-color:#4a4a4a;}
body.dark .sidebar-header{color:#e0e0e0;border-bottom-color:#4a4a4a;}
body.dark .sidebar-item{color:#aaa;}
body.dark .sidebar-item:hover{background:#3a3a3a;color:#66b1ff;}
}
body.dark .notice-carousel{background:#2d2d2d;border-color:#4a4a4a;}
.notice-carousel .carousel-track{display:flex;flex-direction:column;transition:transform .5s ease;}
.notice-carousel .carousel-item{height:48px;line-height:48px;padding:0 20px;font-size:14px;color:#303133;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.dark .notice-carousel .carousel-item{color:#fff;}
.notice-carousel .carousel-item a{color:#409eff;text-decoration:none;}
body.dark .notice-carousel .carousel-item a{color:#66b1ff;}
.notice-carousel .carousel-item a:hover{text-decoration:underline;}