* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Microsoft YaHei','PingFang SC',sans-serif; background:#10151f; color:#c0c8d0; line-height:1.6; position:relative; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; background:radial-gradient(circle at 20% 25%, rgba(212,175,55,.07) 0%, transparent 42%), radial-gradient(circle at 78% 70%, rgba(245,215,126,.05) 0%, transparent 48%), linear-gradient(180deg,#10151f 0%,#1a2330 45%,#10151f 100%); pointer-events:none; z-index:-2; }
body::after { content:""; position:fixed; inset:0; background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320"><circle cx="30" cy="40" r="2" fill="%23f5d77e" opacity=".5"/><circle cx="150" cy="90" r="1.6" fill="%23e8c766" opacity=".35"/><circle cx="250" cy="60" r="2.4" fill="%23c9a03d" opacity=".4"/><circle cx="90" cy="200" r="1.8" fill="%23f5d77e" opacity=".3"/><circle cx="290" cy="170" r="1.4" fill="%23e8c766" opacity=".45"/><circle cx="200" cy="260" r="2.2" fill="%23c9a03d" opacity=".35"/><circle cx="60" cy="290" r="1.5" fill="%23f5d77e" opacity=".4"/><circle cx="310" cy="300" r="1.8" fill="%23e8c766" opacity=".3"/></svg>'); background-size:320px 320px; opacity:.5; animation:emberRise 26s linear infinite; pointer-events:none; z-index:-1; }
@keyframes emberRise { from { background-position:0 0; } to { background-position:0 -1280px; } }
@media (prefers-reduced-motion: reduce) { body::after { animation:none; } .logo-icon { animation:none; } }
a:focus-visible { outline:2px solid #f5d77e; outline-offset:2px; border-radius:4px; }
.ic { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.container { max-width:1400px; margin:0 auto; padding:0 24px; position:relative; z-index:10; }

/* ===== 头部 ===== */
.hero-section { position:relative; margin-bottom:30px; border-radius:0 0 60px 60px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.55); }
.hero-background { position:absolute; inset:0; background:linear-gradient(135deg,#2a2415 0%,#1a2330 45%,#10151f 100%); }
.hero-background::before { content:""; position:absolute; inset:0; background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400"><defs><linearGradient id="g1" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="%23c9a03d" stop-opacity=".14"/><stop offset="1" stop-color="%239a751f" stop-opacity=".04"/></linearGradient><linearGradient id="g2" x1="1" y1="0" x2="0" y2="1"><stop offset="0" stop-color="%23f5d77e" stop-opacity=".10"/><stop offset="1" stop-color="%23c9a03d" stop-opacity=".02"/></linearGradient></defs><polygon points="0,400 180,210 360,340 540,150 720,300 900,110 1080,270 1200,180 1200,400" fill="url(%23g1)"/><polygon points="0,400 260,300 460,390 660,250 860,380 1060,220 1200,340 1200,400" fill="url(%23g2)"/><path d="M0,360 Q220,260 420,330 Q620,400 820,290 Q1020,180 1200,310 L1200,400 L0,400 Z" fill="rgba(201,160,61,.07)"/></svg>'); background-size:cover; background-position:center bottom; opacity:.85; }
.top-bar { padding:38px 0 24px; position:relative; z-index:10; border-bottom:2px solid rgba(201,160,61,.35); backdrop-filter:blur(5px); }
.header-wrapper { display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.logo-area { display:flex; align-items:center; gap:20px; }
.logo-icon { width:86px; height:86px; flex:none; background:linear-gradient(145deg,#f0d070,#9a751f); border-radius:38% 62% 42% 58% / 58% 40% 60% 42%; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 0 #6b5414, 0 14px 26px rgba(0,0,0,.45), inset 0 -4px 0 rgba(0,0,0,.25), inset 0 5px 14px rgba(255,255,255,.35); animation:floatGold 5s ease-in-out infinite; }
@keyframes floatGold { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-6px) rotate(3deg); } }
.logo-icon svg { width:42px; height:42px; color:#241a05; stroke-width:2; }
.site-title { font-size:46px; font-weight:900; letter-spacing:7px; background:linear-gradient(180deg,#fff 0%,#fdf3d0 30%,#f0d070 62%,#c9a03d 100%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:3px 3px 0 rgba(50,38,6,.55); }
.site-sub { font-family:Georgia,'Times New Roman',serif; font-size:14px; color:#f5d77e; letter-spacing:5px; font-weight:600; text-transform:uppercase; text-shadow:2px 2px 0 rgba(0,0,0,.5); margin-top:4px; }
.search-wrapper { flex:0 0 320px; }
.search-box { display:flex; align-items:center; background:rgba(201,160,61,.1); border:2px solid #c9a03d; border-radius:50px 14px 50px 14px; padding:4px 4px 4px 20px; box-shadow:0 5px 0 #5c4512, inset 0 2px 10px rgba(245,215,126,.1); }
.search-box input { flex:1; background:transparent; border:none; outline:none; padding:11px 8px; font-size:14px; color:#fff; }
.search-box input::placeholder { color:rgba(216,207,174,.55); }
.search-box button { display:flex; align-items:center; gap:7px; background:linear-gradient(135deg,#f0d070,#b08a28); border:none; border-radius:32px 10px 32px 10px; padding:11px 20px; color:#241a05; font-size:15px; font-weight:800; cursor:pointer; box-shadow:0 3px 0 #7a5c14; }
.search-box button svg { width:16px; height:16px; }
.nav-wrapper { margin-top:28px; position:relative; }
.main-nav { display:flex; justify-content:space-between; align-items:flex-end; gap:6px; }
.nav-item { flex:1; text-decoration:none; }
.nav-item-inner { display:block; background:linear-gradient(180deg,rgba(201,160,61,.16) 0%,rgba(90,70,20,.42) 100%); border:2px solid rgba(245,215,126,.4); border-top:none; border-radius:0 0 26px 26px; padding:15px 6px 13px; text-align:center; clip-path:polygon(8% 0,92% 0,100% 24%,96% 100%,4% 100%,0 24%); box-shadow:inset 0 8px 18px rgba(245,215,126,.1), 0 -8px 18px rgba(0,0,0,.35); transition:all .2s; }
.nav-item:hover .nav-item-inner { background:linear-gradient(180deg,rgba(245,215,126,.28) 0%,rgba(140,105,30,.5) 100%); }
.nav-item.active .nav-item-inner { background:linear-gradient(180deg,#f0d070 0%,#c09838 100%); border-color:#f5d77e; box-shadow:inset 0 8px 20px rgba(255,255,255,.35), 0 -8px 22px rgba(201,160,61,.45); }
.nav-ic { width:28px; height:28px; color:#f5d77e; display:block; margin:0 auto 7px; }
.nav-item.active .nav-ic { color:#241a05; }
.nav-text { display:block; font-size:16px; font-weight:800; color:#f0e6c8; letter-spacing:3px; white-space:nowrap; }
.nav-item.active .nav-text { color:#241a05; }
.nav-sub { display:block; font-family:Georgia,serif; font-size:10px; letter-spacing:2px; color:#a08c50; margin-top:4px; text-transform:uppercase; }
.nav-item.active .nav-sub { color:#5c4512; }

/* ===== 面包屑 + 页面头 ===== */
.breadcrumb { padding:28px 0 14px; color:#8a94a6; font-size:14px; }
.breadcrumb a { color:#f0d98c; text-decoration:none; }
.breadcrumb a:hover { color:#f5d77e; }
.breadcrumb .current { color:#f0e6c8; }
.page-header { background:linear-gradient(135deg,rgba(80,62,18,.75) 0%,rgba(28,36,50,.92) 100%); border:2px solid #c9a03d; border-radius:16px 6px 16px 6px; padding:24px 30px; margin-bottom:26px; display:flex; align-items:center; gap:24px; box-shadow:0 9px 0 #0a0e16, 0 14px 28px rgba(0,0,0,.4); }
.page-icon { width:76px; height:76px; flex:none; background:linear-gradient(145deg,#f0d070,#9a751f); border-radius:34% 66% 38% 62% / 62% 40% 60% 38%; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 0 #6b5414, inset 0 4px 10px rgba(255,255,255,.35); transform:rotate(-3deg); }
.page-icon svg { width:38px; height:38px; color:#241a05; stroke-width:2; }
.page-info h1 { color:#f5d77e; font-size:32px; font-weight:900; letter-spacing:3px; text-shadow:2px 2px 0 rgba(0,0,0,.45); }
.page-info .desc { color:#b8c2d2; font-size:15px; margin-top:6px; letter-spacing:1px; }
.page-stats { margin-left:auto; display:flex; gap:38px; text-align:right; }
.page-stats .num { font-size:38px; font-weight:900; color:#f5d77e; line-height:1.1; }
.page-stats .num small { font-size:16px; color:#c9a03d; }
.page-stats .lab { color:#8a94a6; font-size:13px; letter-spacing:2px; }

/* ===== 筛选条 ===== */
.filter-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; background:rgba(20,27,40,.85); border:1px solid rgba(201,160,61,.3); border-radius:12px 5px 12px 5px; padding:13px 20px; margin-bottom:28px; box-shadow:0 7px 0 #0a0e16; }
.date-tabs { display:flex; gap:8px; }
.date-tab { padding:7px 20px; border-radius:16px 4px 16px 4px; border:1px solid rgba(201,160,61,.3); color:#a8b2c4; font-size:14px; text-decoration:none; transition:all .15s; }
.date-tab:hover { color:#f5d77e; border-color:#c9a03d; }
.date-tab.active { background:linear-gradient(135deg,#f0d070,#c09838); color:#241a05; border-color:#f5d77e; font-weight:800; box-shadow:0 3px 0 #7a5c14; }
.ver-select { position:relative; }
.ver-select select { appearance:none; -webkit-appearance:none; background:rgba(16,21,31,.8); border:1.5px solid rgba(201,160,61,.45); border-radius:16px 4px 16px 4px; color:#f0d98c; font-size:14px; font-family:inherit; padding:8px 40px 8px 18px; cursor:pointer; outline:none; }
.ver-select select:hover { border-color:#f5d77e; }
.ver-select::after { content:""; position:absolute; right:16px; top:50%; width:9px; height:9px; border-right:2px solid #c9a03d; border-bottom:2px solid #c9a03d; transform:translateY(-70%) rotate(45deg); pointer-events:none; }

/* ===== 分组表格 ===== */
.day-head { display:flex; align-items:center; gap:12px; margin:34px 0 16px; }
.day-head:first-of-type { margin-top:0; }
.day-head h2 { display:flex; align-items:center; gap:11px; font-size:24px; font-weight:900; color:#f5d77e; letter-spacing:2px; text-shadow:2px 2px 0 rgba(0,0,0,.4); }
.day-head h2 svg { width:24px; height:24px; }
.day-count { padding:4px 14px; border-radius:14px 4px 14px 4px; background:rgba(201,160,61,.12); border:1px solid rgba(201,160,61,.4); color:#f0d98c; font-size:13px; font-weight:700; }
.day-line { flex:1; height:2px; background:linear-gradient(90deg,rgba(201,160,61,.45),transparent); }
.server-table-wrap { background:linear-gradient(180deg,rgba(30,40,56,.92),rgba(22,30,44,.95)); border:1px solid rgba(201,160,61,.35); border-radius:14px 6px 14px 6px; box-shadow:0 10px 0 #0a0e16, 0 16px 34px rgba(0,0,0,.4); overflow:hidden; margin-bottom:8px; }
.server-table { width:100%; border-collapse:collapse; }
.server-table th { background:linear-gradient(90deg,rgba(120,92,20,.5),rgba(60,46,12,.55)); color:#f5d77e; padding:15px 22px; text-align:left; font-size:15px; letter-spacing:2px; border-bottom:2px solid #c9a03d; white-space:nowrap; }
.server-table td { padding:16px 22px; border-top:1px solid rgba(201,160,61,.12); }
.server-table tbody tr:first-child td { border-top:none; }
.server-table tbody tr { transition:background .15s; }
.server-table tbody tr:hover { background:rgba(201,160,61,.06); }
.server-name-cell { display:flex; align-items:center; }
.status-badge { width:34px; height:34px; flex:none; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; margin-right:12px; }
.status-badge svg { width:17px; height:17px; }
.status-hot { background:linear-gradient(135deg,#e74c3c,#a8231a); box-shadow:0 3px 0 #6e150e; color:#fff; }
.status-new { background:linear-gradient(135deg,#f0d070,#b08a28); box-shadow:0 3px 0 #7a5c14; color:#241a05; }
.status-ok { background:linear-gradient(135deg,#2f9e68,#1d6b44); box-shadow:0 3px 0 #124728; color:#fff; }
.status-soon { border:1.5px solid #5a6478; color:#a8b2c4; background:rgba(16,21,31,.5); }
.server-name { color:#f0e6c8; font-size:17px; font-weight:700; }
.version-badge { display:inline-block; padding:4px 14px; border:1.5px solid #c9a03d; border-radius:16px 4px 16px 4px; color:#f5d77e; font-size:13px; background:rgba(201,160,61,.08); white-space:nowrap; }
.server-time { color:#f5d77e; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.state-text { display:inline-flex; align-items:center; gap:7px; font-size:14px; white-space:nowrap; }
.state-text svg { width:16px; height:16px; }
.state-hot { color:#ff8a70; }
.state-new { color:#f5d77e; }
.state-ok { color:#6fcf97; }
.state-mute { color:#8a94a6; }
.btn-enter { display:inline-block; background:linear-gradient(135deg,#f0d070,#c09838); color:#241a05; padding:8px 22px; border-radius:18px 5px 18px 5px; text-decoration:none; font-size:14px; font-weight:800; letter-spacing:1px; box-shadow:0 3px 0 #7a5c14; transition:all .2s; }
.btn-enter:hover { transform:translateY(-2px); box-shadow:0 5px 0 #7a5c14; }
.btn-book { display:inline-block; border:1.5px solid #c9a03d; color:#f5d77e; padding:7px 20px; border-radius:18px 5px 18px 5px; text-decoration:none; font-size:14px; font-weight:700; letter-spacing:1px; transition:all .2s; }
.btn-book:hover { background:rgba(201,160,61,.15); }

/* ===== 温馨提示 ===== */
.notice { display:flex; gap:14px; background:rgba(201,160,61,.07); border:1px dashed rgba(201,160,61,.45); border-radius:12px; padding:18px 22px; margin-top:30px; color:#b8c2d2; font-size:14.5px; line-height:1.9; }
.notice svg { width:22px; height:22px; flex:none; color:#f0d070; margin-top:3px; }
.notice b { color:#f5d77e; font-weight:700; }

/* ===== 页脚 ===== */
.footer { background:linear-gradient(0deg,#0a0e16 0%,#141b28 100%); border-top:3px solid #c9a03d; padding:34px 0 40px; margin-top:48px; clip-path:polygon(0 0,100% 4%,100% 100%,0 100%); }
.copyright { text-align:center; color:#7d8798; font-size:14px; line-height:1.9; }