:root{
  --bg:#f2f5f9; --card:#ffffff; --fg:#0f172a; --muted:#64748b;
  --line:rgba(15,23,42,.08); --brand:#1e88e5; --brand2:#1565c0;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.06);
  --shadow-h:0 2px 6px rgba(21,101,192,.10),0 14px 34px rgba(21,101,192,.16);
}
html[data-theme="dark"]{
  --bg:#0b1220; --card:#131c2c; --fg:#e8eefc; --muted:#8ea0bd;
  --line:rgba(255,255,255,.08); --brand:#2196f3; --brand2:#0d47a1;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  --shadow-h:0 2px 8px rgba(33,150,243,.25),0 16px 40px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--fg); min-height:100vh;
  -webkit-font-smoothing:antialiased; transition:background .3s,color .3s;
}
.bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background:
    radial-gradient(60vw 40vw at 12% -10%, rgba(30,136,229,.25), transparent 60%),
    radial-gradient(50vw 40vw at 90% 0%, rgba(0,188,212,.18), transparent 60%),
    radial-gradient(50vw 50vw at 50% 110%, rgba(99,102,241,.14), transparent 60%);
}
.wrap{max-width:1120px; margin:0 auto; padding:28px 20px 40px}
/* hero */
.hero{
  position:relative; border-radius:26px; padding:30px 30px 26px; color:#fff; overflow:hidden;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:0 18px 40px -18px rgba(21,101,192,.65);
}
.hero::after{
  content:""; position:absolute; inset:auto -60px -120px auto; width:340px; height:340px;
  border-radius:50%; background:rgba(255,255,255,.10); filter:blur(6px);
}
.hero-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px}
.brand{display:flex; align-items:center; gap:8px; font-size:13px; letter-spacing:.5px; opacity:.92; font-variant-numeric:tabular-nums}
.dot{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.25)}
.icon-btn{
  width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.16); display:grid;place-items:center; transition:.2s;
}
.icon-btn:hover{background:rgba(255,255,255,.3); transform:scale(1.06)}
.hero h1{font-size:clamp(1.55rem,4vw,2.4rem); margin:0 0 6px; font-weight:650; letter-spacing:.5px}
.hero p{margin:0 0 20px; opacity:.85; font-size:.95rem}
.search{
  position:relative; display:flex; align-items:center; gap:10px; max-width:460px;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28);
  border-radius:14px; padding:0 14px; height:44px; backdrop-filter:blur(8px);
}
.search svg{opacity:.8; flex:none}
.search input{
  flex:1; border:0; outline:0; background:transparent; color:#fff; font-size:.95rem; height:100%;
}
.search input::placeholder{color:rgba(255,255,255,.7)}
.search:focus-within{background:rgba(255,255,255,.28); border-color:rgba(255,255,255,.6)}
/* sections */
main{margin-top:30px; display:flex; flex-direction:column; gap:26px}
.sec-title{
  display:flex; align-items:center; gap:10px; margin:0 2px 12px;
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.sec-title::after{content:""; flex:1; height:1px; background:var(--line)}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px}
.card{
  position:relative; display:flex; align-items:center; gap:13px; padding:15px 16px; border-radius:16px;
  background:var(--card); color:var(--fg); text-decoration:none; border:1px solid var(--line);
  box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease, border-color .18s;
  will-change:transform;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-h); border-color:rgba(30,136,229,.45)}
.card:active{transform:translateY(-1px) scale(.995)}
.ico{
  width:42px;height:42px;flex:none;border-radius:12px;overflow:hidden;display:grid;place-items:center;
  background:rgba(30,136,229,.10); color:var(--brand); font-weight:700; font-size:1.05rem;
}
.ico img{width:100%;height:100%;object-fit:contain;padding:6px}
.txt{min-width:0; flex:1}
.name{display:block; font-size:.95rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.desc{display:block; font-size:.76rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px}
.empty{text-align:center; color:var(--muted); margin:40px 0; font-size:.9rem}
footer{
  margin-top:38px; padding-top:18px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:center;
  color:var(--muted); font-size:.78rem;
}
footer a{color:var(--muted); text-decoration:none; border-bottom:1px dashed transparent}
footer a:hover{color:var(--brand); border-bottom-color:currentColor}
.sep{opacity:.4}
@media (max-width:600px){
  .wrap{padding:14px 12px 28px}
  .hero{padding:22px 18px 20px; border-radius:20px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
  .card{padding:12px; gap:10px; border-radius:14px}
  .ico{width:36px;height:36px;border-radius:10px}
  .name{font-size:.86rem}
  .desc{font-size:.7rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* ---------- 局域网设备面板（登录后可见）---------- */
.device{
  margin:26px 0 0; padding:16px 18px; background:var(--card); color:var(--fg);
  border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
}
.device-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.dev-name{font-weight:600; font-size:.95rem}
.dev-state{font-size:.72rem; padding:2px 9px; border-radius:999px; background:rgba(100,116,139,.14); color:var(--muted)}
.dev-state.on{background:rgba(67,160,71,.16); color:#2e7d32}
.dev-state.off{background:rgba(198,40,40,.14); color:#c62828}
html[data-theme="dark"] .dev-state.on{color:#7bd88f}
html[data-theme="dark"] .dev-state.off{color:#ff8a80}
.device-head #wakeBtn{margin-left:auto}
.addr-group{margin-top:12px}
.addr-group + .addr-group{margin-top:14px}
.addr-label{display:flex; align-items:baseline; gap:8px; font-size:.76rem; font-weight:600; color:var(--fg)}
.addr-nic{font-size:.68rem; font-weight:400; color:var(--muted); font-family:ui-monospace,Consolas,monospace}
.addr-empty{font-size:.72rem; color:var(--muted); margin-top:6px}
.addr-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px}
.addr-row code{
  font-size:.76rem; font-family:ui-monospace,Consolas,monospace; letter-spacing:.2px;
  background:rgba(30,136,229,.08); padding:3px 8px; border-radius:6px; word-break:break-all;
}
.addr-row .dot{width:8px; height:8px; border-radius:50%; background:#cbd5e1; flex:none}
.addr-row .dot.on{background:#43a047; box-shadow:0 0 0 3px rgba(67,160,71,.16)}
.btn{
  appearance:none; border:1px solid var(--line); background:var(--card); color:var(--fg);
  font:inherit; font-size:.78rem; padding:5px 12px; border-radius:9px; cursor:pointer;
  transition:background .15s, border-color .15s, opacity .15s;
}
.btn:hover{border-color:rgba(30,136,229,.5); color:var(--brand)}
.btn:disabled{opacity:.55; cursor:default}
.btn.ghost{background:transparent}
.btn.tiny{font-size:.72rem; padding:4px 10px; border-radius:8px}

/* ---------- hero 右上角登录按钮 ---------- */
.hero-actions{display:flex; align-items:center; gap:10px}
.hero-btn{
  display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px;
  border-radius:999px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.16);
  color:#fff; font-size:.82rem; font-weight:600; text-decoration:none; cursor:pointer;
  transition:.2s; backdrop-filter:blur(8px);
}
.hero-btn:hover{background:rgba(255,255,255,.3); border-color:rgba(255,255,255,.6)}

/* ---------- 联系方式行 ---------- */
.contact{display:flex; align-items:center; gap:12px; margin-top:16px}
.contact-label{font-size:.74rem; letter-spacing:.12em; opacity:.85; font-weight:600}
.contact-list{display:flex; gap:8px; flex-wrap:wrap}
.contact-item{
  width:34px; height:34px; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28); color:#fff;
  font-weight:700; font-size:.85rem; text-decoration:none; transition:.2s;
}
.contact-item:hover{background:rgba(255,255,255,.34); transform:translateY(-2px)}
.contact-item img{width:100%; height:100%; object-fit:contain; padding:5px}

/* ---------- 角标：私密骑上缘、v6 骑下缘，零占位不挤压文字 ---------- */
.card-extra{display:flex; align-items:center; gap:5px; flex:none}
.self-tag{
  position:absolute; top:-4px; left:10px; right:auto; z-index:2;
  font-size:.6rem; font-weight:700; padding:0 6px; border-radius:5px; letter-spacing:.5px;
  background:var(--card); border:1px solid var(--line); color:var(--muted); line-height:14px;
  white-space:nowrap; box-shadow:0 1px 3px rgba(15,23,42,.10);
}
.v6-badge{
  position:absolute; top:-9px; right:12px; z-index:2;
  font-size:.68rem; font-weight:700; padding:0 9px; height:24px; line-height:22px;
  border:1px solid rgba(30,136,229,.4); border-radius:999px; background:var(--card); color:var(--brand);
  cursor:pointer; user-select:none; transition:.15s; min-width:34px; text-align:center; box-sizing:border-box;
  box-shadow:0 1px 4px rgba(21,101,192,.22);
}
.v6-badge:hover{border-color:var(--brand)}
.v6-badge.on{background:var(--brand); border-color:var(--brand); color:#fff}
.key-btn{
  width:26px; height:26px; border-radius:8px; display:grid; place-items:center; cursor:pointer;
  color:var(--muted); background:rgba(100,116,139,.1); transition:.15s;
}
.key-btn:hover{color:var(--brand); background:rgba(30,136,229,.12)}
.self-tag{
  font-size:.6rem; font-weight:700; padding:0 6px; border-radius:5px; letter-spacing:.5px;
  background:rgba(100,116,139,.14); color:var(--muted); line-height:16px; white-space:nowrap;
}

/* ---------- 凭据弹层 ---------- */
.cred-pop{
  position:fixed; z-index:60; width:264px; padding:12px 14px; border-radius:14px;
  background:var(--card); color:var(--fg); border:1px solid var(--line);
  box-shadow:0 12px 40px rgba(15,23,42,.22); font-size:.8rem;
}
.cred-head{font-weight:700; margin-bottom:8px}
.cred-row{display:flex; align-items:center; gap:6px; margin-top:6px}
.cred-k{flex:none; font-size:.68rem; color:var(--muted); width:26px}
.cred-v{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:ui-monospace,Consolas,monospace; font-size:.72rem;
  background:rgba(30,136,229,.07); border-radius:6px; padding:3px 7px;
}
.cred-tip{margin-top:9px; font-size:.66rem; color:var(--muted); line-height:1.5}

@media (max-width:600px){
  .hero-btn{height:32px; padding:0 11px; font-size:.78rem}
  .contact{gap:9px; margin-top:13px}
  .contact-item{width:31px; height:31px}
}