/* HomeHub — 导航起始页（参照 limestart.cn 的克制风格） */
:root{
  --blur: blur(30px) saturate(1.5);
  --shadow: 0 15px 30px rgba(0,0,0,.28);
  --glass: rgba(255,255,255,.14);
  --glass-2: rgba(255,255,255,.10);
  --line: rgba(255,255,255,.16);
  --txt: #fff;
  --dim: rgba(255,255,255,.72);
  --acc: #7ec25a;
  --err: #ff6b6b;
  --dock-h: 56px;
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
          "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); color:var(--txt); overflow:hidden;
  background:#1a2118; -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit}

/* ---------- 背景 ---------- */
.bg{
  position:fixed; inset:0; z-index:0;
  background-image: url(/wallpaper.jpg),
    radial-gradient(120% 90% at 78% 12%, #e6bd68 0%, rgba(230,189,104,0) 55%),
    radial-gradient(100% 80% at 12% 22%, #93b97a 0%, rgba(147,185,122,0) 60%),
    radial-gradient(90% 90% at 84% 82%, #2f6b8c 0%, rgba(47,107,140,0) 62%),
    linear-gradient(160deg,#2b3f31 0%,#4a5740 45%,#1d3040 100%);
  background-size: cover, cover, cover, cover, cover;
  background-position: center;
  background-color:#2b3f31;
}
.veil{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(180deg,
    rgba(0,0,0,.30) 0%, rgba(0,0,0,.10) 32%, rgba(0,0,0,.04) 58%, rgba(0,0,0,.38) 100%);
}

/* ---------- 首屏 ---------- */
.stage{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; align-items:center;
  padding-top:clamp(58px,10.5vh,124px);
}
.clock{
  margin:0; font-size:clamp(50px,5.6vw,78px); font-weight:200; line-height:1;
  letter-spacing:.012em; font-variant-numeric:tabular-nums;
  text-shadow:0 3px 22px rgba(0,0,0,.28);
}
.date{margin-top:14px; font-size:13.5px; color:rgba(255,255,255,.86); letter-spacing:.12em}
.search{
  display:flex; align-items:center; gap:10px;
  margin-top:clamp(22px,3.4vh,40px);
  width:min(660px,86vw); height:52px; padding:0 18px;
  border-radius:52px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.17); backdrop-filter:var(--blur);
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  transition:background .2s, border-color .2s;
  cursor:text;
}
.search:focus-within{background:rgba(255,255,255,.24); border-color:rgba(255,255,255,.34)}
.search svg{width:17px;height:17px;flex:0 0 auto;opacity:.82}
.search input{
  flex:1 1 auto; min-width:0; height:100%; border:0; outline:0; background:transparent;
  color:#fff; font-size:15px; text-align:center; letter-spacing:.02em;
}
.search input:not(:placeholder-shown){text-align:left}
.search input::placeholder{color:rgba(255,255,255,.78)}
.search kbd{
  flex:0 0 auto; font:600 11px/1 var(--font); color:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.3); border-radius:6px; padding:3px 6px; opacity:.55;
}
.hint{margin-top:16px; font-size:12.5px; color:rgba(255,255,255,.7); letter-spacing:.02em; min-height:18px}

.adm{
  position:fixed; z-index:30; top:18px; right:20px;
  padding:7px 14px; border-radius:30px; font-size:12.5px; color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(18px) saturate(1.3); transition:.2s;
}
.adm:hover{background:rgba(255,255,255,.24)}

/* ---------- 底部 dock ---------- */
.dock{
  position:fixed; z-index:60; left:50%; bottom:max(16px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  display:flex; align-items:center; gap:6px; padding:8px 10px;
  border-radius:22px; background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:var(--blur); box-shadow:var(--shadow);
  max-width:calc(100vw - 24px); overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none;
}
.dock::-webkit-scrollbar{display:none}
.tile{
  position:relative; flex:0 0 auto; width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center; font-size:20px; line-height:1;
  background:rgba(255,255,255,.93); color:#333;
  box-shadow:0 3px 8px rgba(0,0,0,.14);
  transition:transform .16s ease, box-shadow .16s ease;
}
.tile:hover{transform:translateY(-4px); box-shadow:0 10px 18px rgba(0,0,0,.24)}
.tile::after{
  content:attr(data-name); position:absolute; bottom:50px; left:50%; transform:translateX(-50%) translateY(4px);
  white-space:nowrap; font-size:11.5px; padding:4px 9px; border-radius:8px;
  background:rgba(18,22,20,.82); color:#fff; opacity:0; pointer-events:none;
  transition:.16s;
}
.tile:hover::after{opacity:1; transform:translateX(-50%) translateY(0)}
.tile .dot{
  position:absolute; right:-2px; bottom:-2px; width:9px; height:9px; border-radius:50%;
  background:#9aa5a0; border:2px solid rgba(30,36,32,.55);
}
.tile .dot.ok{background:#5fd06a}
.tile .dot.bad{background:#ff6b6b}
.tile.ghost{
  background:rgba(255,255,255,.2); color:#fff; backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.22);
}
.tile.ghost svg{width:18px;height:18px}
.tile.ghost.on{background:#fff; box-shadow:0 0 0 2px rgba(126,194,90,.95), 0 3px 8px rgba(0,0,0,.14)}
.tile.ghost.on svg{opacity:1}

/* ---------- 站点网格面板 ---------- */
.sheet{position:fixed; inset:0; z-index:40}
.sheet-veil{
  position:absolute; inset:0;
  background:rgba(14,19,16,.42);
  backdrop-filter:blur(28px) saturate(1.35);
}
.sheet-x{
  position:absolute; z-index:3; top:18px; right:20px;
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.14);
  color:#fff; font-size:14px; backdrop-filter:blur(16px);
}
.sheet-x:hover{background:rgba(255,255,255,.26)}
.sheet-body{
  position:relative; z-index:2; height:100%;
  display:grid; grid-template-columns:296px minmax(0,1fr);
  gap:clamp(24px,4vw,60px);
  padding:clamp(30px,7vh,78px) clamp(26px,6vw,88px) 108px;
  overflow:auto; overscroll-behavior:contain;
}
.appgrid{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(24px,3.2vw,44px) clamp(16px,2.2vw,36px);
  align-content:start; max-width:880px;
}
.app{display:flex; flex-direction:column; align-items:center; gap:9px; transition:transform .16s}
.app:hover{transform:translateY(-4px)}
.app .ic{
  width:100%; aspect-ratio:1/1; max-width:104px; border-radius:23px;
  background:rgba(255,255,255,.94); color:#333; display:grid; place-items:center;
  font-size:clamp(26px,2.6vw,38px); box-shadow:0 10px 24px rgba(0,0,0,.18);
  position:relative;
}
.app .ic .dot{position:absolute; right:6px; bottom:6px; width:8px; height:8px; border-radius:50%; background:#9aa5a0}
.app .ic .dot.ok{background:#4fc45d}
.app .ic .dot.bad{background:#ff6b6b}
.app .nm{font-size:12.5px; color:rgba(255,255,255,.94); text-align:center;
  max-width:104px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,.4)}
.app.add .ic{background:rgba(255,255,255,.17); color:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(12px); font-size:30px; font-weight:200}
.app.add .nm{color:rgba(255,255,255,.8)}

/* ---------- 服务器探针卡 ---------- */
.probe{align-self:start; display:flex; flex-direction:column; gap:14px}
.pcard{
  background:rgba(255,255,255,.1); border:1px solid var(--line); border-radius:20px;
  padding:18px 18px 16px; backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}
.phead{display:flex; align-items:center; gap:8px; margin-bottom:16px}
.phead b{font-size:14.5px; font-weight:600; letter-spacing:.01em}
.phead .dot{width:8px;height:8px;border-radius:50%;background:#9aa5a0}
.phead .dot.ok{background:#5fd06a; box-shadow:0 0 0 3px rgba(95,208,106,.18)}
.phead .dot.bad{background:#ff6b6b}
.phead small{margin-left:auto; font-size:11px; color:var(--dim); letter-spacing:.04em}
.rings{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; text-align:center}
.ring{
  width:64px; height:64px; margin:0 auto; border-radius:50%;
  background:conic-gradient(var(--c,#5fd06a) calc(var(--p,0) * 1%), rgba(255,255,255,.16) 0);
  display:grid; place-items:center;
}
.ring i{
  width:48px;height:48px;border-radius:50%; background:rgba(16,22,18,.62);
  display:grid;place-items:center; font-style:normal; font-size:13px; font-variant-numeric:tabular-nums;
}
.ring .lb{display:block; margin-top:8px; font-size:11px; color:var(--dim); letter-spacing:.08em}
.prow{display:flex; justify-content:space-between; gap:10px; padding:7px 0; font-size:12.5px;
  border-top:1px solid rgba(255,255,255,.09)}
.prow span{color:var(--dim)}
.prow b{font-weight:500; font-variant-numeric:tabular-nums}
.spark{display:flex; align-items:flex-end; gap:2px; height:26px; margin-top:12px}
.spark i{flex:1 1 auto; background:rgba(126,194,90,.75); border-radius:2px; min-height:2px}
.srvs{display:flex; flex-direction:column; gap:8px}
.srv{display:flex; align-items:center; gap:8px; font-size:12.5px; padding:9px 12px;
  border-radius:12px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.09)}
.srv .dot{width:7px;height:7px;border-radius:50%;background:#9aa5a0}
.srv .dot.ok{background:#5fd06a}
.srv .dot.bad{background:#ff6b6b}
.srv .ms{margin-left:auto; color:var(--dim); font-variant-numeric:tabular-nums}

/* ---------- 移动端 ---------- */
@media (max-width:820px){
  .sheet-body{grid-template-columns:1fr; gap:26px; padding:64px 18px 100px}
  .appgrid{grid-template-columns:repeat(3,1fr); gap:22px 14px; order:2}
  .probe{order:1}
  .tile{width:38px;height:38px}
  .clock{font-size:clamp(46px,13vw,64px)}
}

/* ================= 后台（/admin） ================= */
body.adm-body{overflow:auto; background:
  radial-gradient(80% 60% at 80% 0%, rgba(230,189,104,.22), transparent 60%),
  radial-gradient(70% 60% at 0% 20%, rgba(147,185,122,.2), transparent 60%),
  linear-gradient(160deg,#1b2620,#101a22 70%)}
.wrap{position:relative; z-index:2; max-width:1080px; margin:0 auto; padding:26px 20px 60px}
.top{display:flex; align-items:center; gap:12px; margin-bottom:22px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:11px}
.logo{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:19px;
  background:rgba(255,255,255,.14); border:1px solid var(--line); backdrop-filter:blur(14px)}
.brand h1{margin:0;font-size:16px;font-weight:600}
.brand small{color:var(--dim);font-size:11.5px;letter-spacing:.06em}
.spacer{flex:1}
.btn{
  border:0; cursor:pointer; padding:9px 16px; border-radius:11px; font-size:13px;
  background:var(--acc); color:#0f1a10; font-weight:600; transition:.16s;
}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:rgba(255,255,255,.12); color:#fff; border:1px solid var(--line); font-weight:500}
.btn.ghost:hover{background:rgba(255,255,255,.2)}
.btn.sm{padding:6px 11px; font-size:12px; border-radius:9px}
.btn.danger{background:rgba(255,107,107,.16); color:#ff9b9b; border:1px solid rgba(255,107,107,.3)}
.center{min-height:60vh; display:grid; place-items:center}
.panel{
  max-width:400px; width:100%;
  background:rgba(255,255,255,.09); border:1px solid var(--line); border-radius:20px;
  padding:26px; backdrop-filter:blur(24px) saturate(1.3); box-shadow:var(--shadow);
}
.panel h2{margin:0 0 6px; font-size:17px; font-weight:600}
.panel p{margin:0 0 18px; font-size:12.5px; color:var(--dim); line-height:1.65}
.tabs{display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap}
.tab{
  padding:8px 15px; border-radius:11px; font-size:13px; cursor:pointer;
  background:rgba(255,255,255,.08); border:1px solid transparent; color:var(--dim);
}
.tab.on{background:rgba(255,255,255,.18); color:#fff; border-color:var(--line)}
.sec{margin-bottom:20px}
.sec-h{display:flex; align-items:center; gap:12px; margin:0 0 12px}
.sec-h h2{margin:0; font-size:14px; font-weight:600; letter-spacing:.02em}
.line{flex:1; height:1px; background:rgba(255,255,255,.12)}
.row{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px}
label.fld{display:block; font-size:11.5px; color:var(--dim); margin-bottom:6px; letter-spacing:.04em}
input:not([type=checkbox]):not([type=radio]),select,textarea{
  width:100%; padding:10px 12px; border-radius:11px; font-size:13px;
  background:rgba(0,0,0,.24); border:1px solid rgba(255,255,255,.14); color:#fff; outline:0;
}
input:focus,select:focus{border-color:rgba(126,194,90,.6)}
select option{background:#1b2620}
.tbl{width:100%; border-collapse:collapse; font-size:12.5px}
.tbl th{text-align:left; font-weight:500; color:var(--dim); padding:9px 10px; font-size:11.5px;
  letter-spacing:.06em; border-bottom:1px solid rgba(255,255,255,.12)}
.tbl td{padding:10px; border-bottom:1px solid rgba(255,255,255,.07); vertical-align:middle}
.tbl tr:hover td{background:rgba(255,255,255,.04)}
.tag{display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px;
  background:rgba(255,255,255,.12); color:var(--dim)}
.tag.ok{background:rgba(95,208,106,.18); color:#8ce09a}
.tag.bad{background:rgba(255,107,107,.16); color:#ff9b9b}
.code{font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; background:rgba(0,0,0,.34);
  border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:12px 14px;
  color:#cfe6c8; overflow-x:auto; white-space:pre-wrap; word-break:break-all}
.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px);
  background:rgba(18,24,20,.9); border:1px solid var(--line); color:#fff;
  padding:10px 18px; border-radius:12px; font-size:13px; opacity:0; pointer-events:none;
  transition:.22s; z-index:99}
.toast.on{opacity:1; transform:translate(-50%,0)}
.wp-prev{width:100%; aspect-ratio:16/9; max-height:320px; border-radius:14px; background:rgba(0,0,0,.3) center/cover no-repeat;
  border:1px solid rgba(255,255,255,.12)}
.hide{display:none !important}