/* 五合一融合风格：浅色苹果风 + 霓虹科技 + 莫兰迪轻奢 + 拟物卡片 + 企业风 */
:root {
  --morandi-bg: #f5f0eb; --morandi-card: #faf8f5; --morandi-border: rgba(80,60,40,0.08); --morandi-shadow: 0 20px 45px rgba(30,20,10,0.06);
  --morandi-text: #2c2416; --morandi-text-soft: #5e5545; --morandi-muted: #8e8575;
  --neon-blue: #4d7cff; --neon-cyan: #22c5d6; --neon-purple: #8b5cf6; --neon-pink: #ec4899;
  --neon-glow: 0 0 18px rgba(77,124,255,0.25), 0 0 35px rgba(34,197,214,0.12); --neon-glow-sm: 0 0 10px rgba(77,124,255,0.2);
  --apple-glass-bg: rgba(255,255,255,0.75); --apple-glass-border: rgba(255,255,255,0.9); --apple-blur: blur(28px);
  --corp-radius-lg: 28px; --corp-radius-md: 18px; --corp-radius-sm: 14px; --corp-radius-xs: 10px;
  --skeu-shadow-sm: 0 2px 4px rgba(0,0,0,0.03),0 8px 16px rgba(30,20,10,0.04);
  --skeu-shadow-md: 0 4px 12px rgba(0,0,0,0.04),0 16px 32px rgba(30,20,10,0.06);
  --skeu-shadow-lg: 0 8px 24px rgba(0,0,0,0.05),0 24px 48px rgba(30,20,10,0.08);
  --skeu-highlight: inset 0 1px 0 rgba(255,255,255,0.8);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{min-height:100%;font-family:'Inter','PingFang SC','Microsoft YaHei',system-ui,sans-serif;color:var(--morandi-text);background:radial-gradient(circle at 10% 10%,rgba(77,124,255,0.06),transparent 40%),radial-gradient(circle at 90% 80%,rgba(236,72,153,0.05),transparent 40%),radial-gradient(circle at 50% 50%,rgba(139,92,246,0.03),transparent 50%),linear-gradient(165deg,#fdfbf7 0%,#f5f0eb 40%,#f0ebe4 100%);overflow-x:hidden;-webkit-font-smoothing:antialiased;}
body{position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 16px 80px 16px;min-height:100vh;}
.bg-overlay{position:fixed;inset:0;background-image:linear-gradient(rgba(80,60,40,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(80,60,40,0.025) 1px,transparent 1px);background-size:64px 64px;opacity:0.4;pointer-events:none;z-index:0;}
.container{width:100%;max-width:1320px;margin-left:110px;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1;}
.app-container{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;margin-bottom:32px;}
.page-container{width:100%;display:flex;flex-direction:column;align-items:center;}
.hide{display:none!important;}.show{display:flex!important;}
.title-block{text-align:center;margin-bottom:16px;}
.main-title{font-family:'Poppins',var(--corp-font);font-size:5.5rem;font-weight:800;letter-spacing:-0.02em;background:linear-gradient(135deg,var(--neon-blue) 0%,var(--neon-purple) 40%,var(--neon-pink) 100%);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 12px rgba(77,124,255,0.3));animation:title-flow 6s infinite alternate;line-height:1.2;margin-bottom:8px;}
.sub-english{font-family:'Poppins',var(--corp-font);font-size:1.1rem;font-weight:600;letter-spacing:0.15em;color:var(--neon-blue);margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:12px;}
.sub-english::before,.sub-english::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,transparent,var(--neon-cyan),transparent);opacity:0.6;}
.tagline{font-size:0.9rem;color:var(--morandi-text-soft);font-weight:500;margin-top:6px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.tagline span{display:flex;align-items:center;gap:6px;}
@keyframes title-flow{0%{background-position:0% 50%;}100%{background-position:100% 100%;}}
.announcement-bar{width:100%;max-width:1200px;padding:12px 22px;border-radius:var(--corp-radius-sm);font-size:14px;font-weight:500;background:var(--apple-glass-bg);backdrop-filter:var(--apple-blur);-webkit-backdrop-filter:var(--apple-blur);border:1px solid var(--apple-glass-border);color:var(--morandi-text-soft);overflow:hidden;white-space:nowrap;margin-bottom:10px;box-shadow:var(--skeu-shadow-sm),var(--neon-glow-sm);}
.announcement-text{display:block;white-space:nowrap;}.announcement-text.scroll{display:inline-block;white-space:nowrap;animation:scroll-left 30s linear infinite;}
@keyframes scroll-left{0%{transform:translateX(100%);}100%{transform:translateX(-100%);}}
.status-card{width:100%;max-width:1200px;min-height:280px;background:var(--apple-glass-bg);backdrop-filter:var(--apple-blur);-webkit-backdrop-filter:var(--apple-blur);border:1px solid var(--apple-glass-border);border-radius:var(--corp-radius-lg);box-shadow:var(--skeu-shadow-lg),var(--neon-glow);display:flex;overflow:hidden;transition:transform 0.3s ease,box-shadow 0.3s ease;}
.status-card:hover{transform:translateY(-4px);box-shadow:var(--skeu-shadow-lg),0 0 30px rgba(77,124,255,0.3);}
.icon-area{width:140px;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--morandi-border);flex-shrink:0;}
.default-icon{width:100px;height:100px;background:linear-gradient(135deg,var(--neon-blue),var(--neon-purple));border-radius:22px;display:flex;align-items:center;justify-content:center;font-size:44px;color:white;box-shadow:var(--neon-glow),var(--skeu-highlight);}
.info-area{flex:1;padding:24px 30px;display:flex;flex-direction:column;justify-content:space-between;}
.title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px;flex-wrap:nowrap;overflow:visible;}
.server-name{font-size:28px;font-weight:700;color:var(--morandi-text);white-space:nowrap;}
.status-group{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.status-badge{background:var(--apple-glass-bg);padding:8px 20px;border-radius:40px;font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px;backdrop-filter:var(--apple-blur);-webkit-backdrop-filter:var(--apple-blur);white-space:nowrap;border:1px solid var(--apple-glass-border);box-shadow:var(--skeu-shadow-sm);}
.status-dot{width:10px;height:10px;border-radius:50%;display:inline-block;}.status-dot.online{background:#22c55e;box-shadow:0 0 12px rgba(34,197,94,0.5);animation:pulse 2s infinite;}.status-dot.offline{background:#ef4444;}
@keyframes pulse{0%{box-shadow:0 0 6px rgba(34,197,94,0.5);}50%{box-shadow:0 0 20px rgba(34,197,94,0.8);}100%{box-shadow:0 0 6px rgba(34,197,94,0.5);}}
.count-badge{background:linear-gradient(135deg,var(--neon-blue),var(--neon-purple));color:white;border-radius:40px;padding:8px 24px;font-size:20px;font-weight:700;font-family:'JetBrains Mono',monospace;white-space:nowrap;box-shadow:var(--neon-glow-sm);}
.motd-area{background:rgba(255,255,255,0.5);backdrop-filter:var(--apple-blur);-webkit-backdrop-filter:var(--apple-blur);border-radius:var(--corp-radius-md);padding:16px 22px;margin-bottom:14px;font-size:15px;color:var(--morandi-text-soft);border:1px solid var(--morandi-border);box-shadow:var(--skeu-shadow-sm);line-height:1.5;white-space:pre-line;word-break:break-word;}
.players-area{flex:1;background:rgba(255,255,255,0.5);backdrop-filter:var(--apple-blur);-webkit-backdrop-filter:var(--apple-blur);border-radius:var(--corp-radius-md);padding:12px 18px;border:1px solid var(--morandi-border);box-shadow:var(--skeu-shadow-sm);min-height:44px;}
.player-list{display:flex;flex-wrap:wrap;gap:8px;}.player-tag{padding:6px 18px;border-radius:30px;font-size:13px;font-weight:500;background:rgba(255,255,255,0.8);color:var(--morandi-text);border:1px solid var(--morandi-border);box-shadow:var(--skeu-shadow-sm);}
.btn{padding:12px 28px;border-radius:40px;font-size:15px;font-weight:600;cursor:pointer;border:none;transition:all 0.25s ease;display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--morandi-text);background:var(--apple-glass-bg);backdrop-filter:var(--apple-blur);-webkit-backdrop-filter:var(--apple-blur);border:1px solid var(--apple-glass-border);box-shadow:var(--skeu-shadow-sm);}
.btn:hover{transform:translateY(-1px);box-shadow:var(--skeu-shadow-md),var(--neon-glow-sm);}
.btn-primary{background:linear-gradient(135deg,var(--neon-blue),var(--neon-purple));color:white;border:none;box-shadow:var(--neon-glow-sm);}
.btn-primary:hover{box-shadow:var(--neon-glow),0 10px 24px rgba(77,124,255,0.3);}
.btn-secondary{background:rgba(255,255,255,0.6);color:var(--morandi-text-soft);border:1px solid var(--morandi-border);}
.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:white;box-shadow:0 4px 12px rgba(239,68,68,0.25);}
.btn-warning{background:linear-gradient(135deg,#f59e0b,#d97706);color:white;box-shadow:0 4px 12px rgba(245,158,11,0.25);}
.btn-info{background:linear-gradient(135deg,var(--neon-cyan),#0ea5e9);color:white;box-shadow:0 4px 12px rgba(34,197,214,0.25);}
.btn-sm{padding:6px 14px;font-size:13px;border-radius:30px;}
.card{background:var(--apple-glass-bg);backdrop-filter:var(--apple-blur);-webkit-backdrop-filter:var(--apple-blur);border-radius:var(--corp-radius-lg);padding:1.8rem;margin-bottom:1.5rem;border:1px solid var(--apple-glass-border);box-shadow:var(--skeu-shadow-md);width:100%;max-width:1200px;}
.card-title{font-size:1.2rem;font-weight:700;margin-bottom:1.4rem;border-left:4px solid var(--neon-blue);padding-left:16px;color:var(--morandi-text);display:flex;align-items:center;gap:10px;}
.traffic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.2rem;}
.traffic-card{background:rgba(255,255,255,0.8);border-radius:var(--corp-radius-md);padding:1.2rem 1.4rem;display:flex;align-items:center;gap:1rem;cursor:pointer;border:1px solid var(--morandi-border);box-shadow:var(--skeu-shadow-sm);transition:all 0.2s ease;position:relative;}
.traffic-card:hover{background:white;transform:translateY(-2px);box-shadow:var(--skeu-shadow-md),var(--neon-glow-sm);}
.traffic-icon{width:50px;height:50px;background:linear-gradient(135deg,rgba(77,124,255,0.12),rgba(139,92,246,0.12));border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--neon-blue);flex-shrink:0;}
.traffic-name{font-weight:700;margin-bottom:4px;color:var(--morandi-text);font-size:1rem;}
.traffic-meta{display:flex;align-items:center;gap:12px;margin-top:4px;}
.node-players{font-size:0.85rem;font-weight:700;white-space:nowrap;}.node-players.online{color:#22c55e;}.node-players.offline{color:var(--morandi-muted);}
.node-motd{font-size:0.8rem;color:var(--morandi-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;}
.node-dot{width:12px;height:12px;border-radius:50%;position:absolute;top:14px;right:14px;background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,0.5);}
.refresh-btn{background:linear-gradient(135deg,var(--neon-blue),var(--neon-cyan));color:white;border:none;padding:8px 20px;border-radius:40px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s ease;display:inline-flex;align-items:center;gap:6px;box-shadow:var(--neon-glow-sm);}
.refresh-btn:hover{transform:translateY(-1px);box-shadow:var(--neon-glow);}
.refresh-btn:disabled{opacity:0.6;cursor:not-allowed;transform:none;}
.refresh-time{font-size:0.75rem;color:var(--morandi-muted);margin-left:8px;}
.weather-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px;}
.weather-item{background:rgba(255,255,255,0.7);border-radius:var(--corp-radius-md);padding:14px;text-align:center;border:1px solid var(--morandi-border);box-shadow:var(--skeu-shadow-sm);}
.weather-label{font-size:0.75rem;color:var(--morandi-muted);margin-bottom:4px;font-weight:600;}
.weather-value{font-weight:700;font-size:1.1rem;color:var(--morandi-text);}
.hourly-wrap,.forecast-wrap{overflow-x:auto;white-space:nowrap;display:flex;gap:10px;padding:10px 0;}
.hourly-item,.forecast-day{background:rgba(255,255,255,0.7);border-radius:var(--corp-radius-md);padding:10px 16px;text-align:center;min-width:75px;border:1px solid var(--morandi-border);box-shadow:var(--skeu-shadow-sm);}
.forecast-day{min-width:110px;}
.hourly-time,.forecast-date{font-size:0.75rem;color:var(--morandi-muted);}
.hourly-temp,.forecast-temp{font-weight:700;color:var(--morandi-text);}
.weather-icon-big{font-size:3.5rem;opacity:0.9;}
.weather-update{font-size:0.75rem;color:var(--morandi-muted);margin-top:10px;text-align:right;}
.side-nav{position:fixed;left:24px;top:50%;transform:translateY(-50%);background:var(--apple-glass-bg);backdrop-filter:var(--apple-blur);-webkit-backdrop-filter:var(--apple-blur);border-radius:48px;display:flex;flex-direction:column;align-items:center;padding:14px 10px;box-shadow:var(--skeu-shadow-lg),var(--neon-glow-sm);border:1px solid var(--apple-glass-border);z-index:120;gap:8px;}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--morandi-muted);font-size:0.7rem;cursor:pointer;padding:10px 16px;border-radius:40px;transition:0.2s ease;font-weight:500;}
.nav-item i{font-size:1.4rem;}.nav-item.active{background:linear-gradient(135deg,var(--neon-blue),var(--neon-purple));color:#fff;box-shadow:var(--neon-glow-sm);}
.footer-icp{position:fixed;bottom:0;left:0;right:0;background:var(--apple-glass-bg);backdrop-filter:var(--apple-blur);-webkit-backdrop-filter:var(--apple-blur);border-top:1px solid var(--apple-glass-border);text-align:center;padding:12px;color:var(--morandi-muted);font-size:0.8rem;line-height:1.6;z-index:110;box-shadow:var(--skeu-shadow-sm);}
.footer-icp a{color:var(--neon-blue);text-decoration:none;font-weight:600;}
.footer-server-desc{font-weight:600;color:var(--morandi-text-soft);margin-bottom:4px;}
.topbar{display:flex;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap;}
.hero{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:28px;}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px;}
.stat-card{background:var(--apple-glass-bg);border-radius:22px;padding:20px;border:1px solid var(--apple-glass-border);box-shadow:var(--skeu-shadow-sm);}
.stat-label{color:var(--morandi-muted);font-size:13px;margin-bottom:8px;font-weight:700;}
.stat-value{font-size:32px;font-weight:950;color:var(--morandi-text);}
.glass{background:var(--apple-glass-bg);backdrop-filter:var(--apple-blur);-webkit-backdrop-filter:var(--apple-blur);border:1px solid var(--apple-glass-border);border-radius:var(--corp-radius-lg);padding:28px;box-shadow:var(--skeu-shadow-md);}
.tabs{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap;}
.tab{background:rgba(255,255,255,0.7);border:1px solid var(--morandi-border);padding:10px 20px;border-radius:999px;cursor:pointer;font-weight:700;color:var(--morandi-muted);transition:all 0.2s ease;box-shadow:var(--skeu-shadow-sm);}
.tab:hover{color:var(--morandi-text);background:rgba(255,255,255,0.9);}
.tab.active{background:linear-gradient(135deg,var(--neon-blue),var(--neon-purple));color:#fff;border-color:transparent;box-shadow:var(--neon-glow-sm);}
.tab-content{display:none;}.tab-content.active{display:block;animation:fade 0.2s ease;}
@keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
.table-wrap{border-radius:var(--corp-radius-md);background:var(--apple-glass-bg);border:1px solid var(--apple-glass-border);overflow-x:auto;margin-bottom:18px;box-shadow:var(--skeu-shadow-sm);}
table{width:100%;min-width:1000px;border-collapse:collapse;}
th{background:rgba(255,255,255,0.6);padding:14px;text-align:left;color:var(--morandi-muted);font-size:12px;text-transform:uppercase;letter-spacing:0.08em;font-weight:700;}
td{padding:12px 14px;border-bottom:1px solid var(--morandi-border);color:var(--morandi-text-soft);font-size:14px;}
tbody tr:hover{background:rgba(255,255,255,0.7);}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700;}
.badge-success{background:rgba(34,197,94,0.12);color:#166534;border:1px solid rgba(34,197,94,0.25);}
.badge-danger{background:rgba(239,68,68,0.12);color:#991b1b;border:1px solid rgba(239,68,68,0.25);}
.badge-secondary{background:rgba(142,133,117,0.1);color:var(--morandi-muted);}
.input,select,textarea,input[type="text"],input[type="number"],input[type="datetime-local"],input[type="color"]{width:100%;min-height:48px;padding:12px 14px;border-radius:var(--corp-radius-md);border:1px solid var(--morandi-border);background:rgba(255,255,255,0.8);color:var(--morandi-text);outline:none;transition:0.2s ease;font-size:14px;box-shadow:var(--skeu-shadow-sm);}
.input:focus,select:focus,textarea:focus{border-color:var(--neon-blue);box-shadow:var(--neon-glow-sm);}
.login-overlay{position:fixed;inset:0;background:rgba(245,240,235,0.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center;z-index:9999;}
.login-card{background:var(--apple-glass-bg);backdrop-filter:var(--apple-blur);-webkit-backdrop-filter:var(--apple-blur);border-radius:var(--corp-radius-lg);padding:36px;max-width:420px;width:90%;text-align:center;border:1px solid var(--apple-glass-border);box-shadow:var(--skeu-shadow-lg);}
.toast-stack{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:5000;display:flex;flex-direction:column;gap:10px;}
.toast{padding:12px 22px;border-radius:14px;color:white;font-weight:700;box-shadow:var(--skeu-shadow-md);}
.toast.success{background:linear-gradient(135deg,#22c55e,#16a34a);}.toast.error{background:linear-gradient(135deg,#ef4444,#dc2626);}.toast.info{background:linear-gradient(135deg,var(--neon-blue),var(--neon-purple));}.toast.warning{background:linear-gradient(135deg,#f59e0b,#d97706);}
.modal-root{position:fixed;inset:0;z-index:4500;pointer-events:none;}
.modal{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(245,240,235,0.5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);pointer-events:auto;}
.modal-card{background:var(--apple-glass-bg);backdrop-filter:var(--apple-blur);-webkit-backdrop-filter:var(--apple-blur);border-radius:var(--corp-radius-lg);padding:28px;width:min(520px,90%);max-height:80vh;overflow-y:auto;border:1px solid var(--apple-glass-border);box-shadow:var(--skeu-shadow-lg);}
@media(max-width:768px){.container{margin-left:0;padding-bottom:90px;}.side-nav{flex-direction:row;left:50%;top:auto;bottom:20px;transform:translateX(-50%);padding:8px 12px;gap:4px;}.nav-item{flex-direction:row;gap:6px;padding:8px 14px;font-size:0.7rem;}.nav-item i{font-size:1rem;}.main-title{font-size:3.5rem;}.status-card{flex-direction:column;}.icon-area{width:100%;border-right:none;border-bottom:1px solid var(--morandi-border);padding:20px 0;}.hero-stats{grid-template-columns:repeat(2,1fr);}.weather-grid{grid-template-columns:repeat(2,1fr);}.traffic-grid{grid-template-columns:1fr;}}