/* ============ AI Hub · 双主题（A 极光玻璃 / B 晨雾玻璃） ============ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

:root{
  --radius:20px;
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- 暗色：极光玻璃 ---------- */
[data-theme="dark"]{
  --bg:#080a14;
  --bg-image:
    radial-gradient(900px 600px at 12% -8%, rgba(139,92,246,.42), transparent 62%),
    radial-gradient(800px 520px at 88% 6%, rgba(34,211,238,.30), transparent 60%),
    radial-gradient(900px 700px at 50% 108%, rgba(59,130,246,.26), transparent 65%);
  --glass:rgba(255,255,255,.062);
  --glass-2:rgba(255,255,255,.038);
  --glass-hi:rgba(255,255,255,.10);
  --line:rgba(255,255,255,.14);
  --txt:#eaf0ff;
  --dim:#9aa8c7;
  --faint:#6d7c9b;
  --a1:#8b5cf6;
  --a2:#22d3ee;
  --accent-grad:linear-gradient(135deg,#8b5cf6,#22d3ee);
  --accent-solid:#22d3ee;
  --btn-bg:rgba(255,255,255,.055);
  --shadow:0 10px 40px rgba(0,0,0,.32);
  --inset:inset 0 1px 0 rgba(255,255,255,.12);
  --ok:#34d399; --warn:#fbbf24; --err:#fb7185;
  --side-bg:rgba(255,255,255,.035);
  --input-bg:rgba(255,255,255,.05);
  color-scheme:dark;
}

/* ---------- 亮色：晨雾玻璃 ---------- */
[data-theme="light"]{
  --bg:#e6ecf5;
  --bg-image:
    radial-gradient(760px 520px at 8% 4%, rgba(122,167,255,.55), transparent 62%),
    radial-gradient(700px 520px at 92% 12%, rgba(142,229,210,.52), transparent 60%),
    radial-gradient(820px 620px at 62% 108%, rgba(255,201,168,.44), transparent 64%);
  --glass:rgba(255,255,255,.76);
  --glass-2:rgba(255,255,255,.52);
  --glass-hi:rgba(255,255,255,.92);
  --line:rgba(255,255,255,.98);
  --txt:#111c2b;
  --dim:#5a6a80;
  --faint:#7d8ca1;
  --a1:#7aa7ff;
  --a2:#69d7c2;
  --accent-grad:linear-gradient(135deg,#7aa7ff,#69d7c2);
  --accent-solid:#3f8fe8;
  --btn-bg:rgba(255,255,255,.7);
  --shadow:0 10px 28px rgba(70,100,145,.20), 0 2px 6px rgba(70,100,145,.10);
  --inset:inset 0 1px 0 #fff;
  --ok:#12a67a; --warn:#d98a1a; --err:#e0525f;
  --side-bg:rgba(255,255,255,.34);
  --input-bg:rgba(255,255,255,.82);
  color-scheme:light;
}

body{
  font:14px/1.6 var(--font);color:var(--txt);background:var(--bg);
  min-height:100%;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;background:var(--bg-image),var(--bg);
  transition:background .4s ease;
}
[data-theme="dark"] body::after,
body[data-theme="dark"]::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
}

/* ---------- 布局 ---------- */
.app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.side{
  padding:26px 18px;border-right:1px solid var(--line);background:var(--side-bg);
  backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.brand{display:flex;align-items:center;gap:11px;margin-bottom:30px;padding-left:6px;text-decoration:none;color:inherit}
.logo{
  width:36px;height:36px;border-radius:11px;flex:none;display:grid;place-items:center;font-size:17px;
  background:var(--accent-grad);color:#08121f;font-weight:800;
  box-shadow:0 6px 22px rgba(80,150,220,.35);
}
.brand b{font-size:15.5px;letter-spacing:.4px}
.brand span{display:block;font-size:10.5px;color:var(--faint);letter-spacing:1.6px}
.nav{display:flex;flex-direction:column;gap:3px}
.nav a{
  display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;
  color:var(--dim);text-decoration:none;font-size:13.5px;transition:.18s;cursor:pointer;
  border:1px solid transparent;
}
.nav a:hover{background:var(--glass-hi);color:var(--txt)}
.nav a.on{background:var(--glass);color:var(--txt);border-color:var(--line);box-shadow:var(--shadow)}
.nav a .ico{width:18px;text-align:center;opacity:.9}
.side-foot{
  margin-top:auto;padding:13px;border-radius:14px;font-size:12px;color:var(--dim);
  border:1px solid var(--line);background:var(--glass-2);line-height:1.7;
}
.side-foot b{color:var(--ok)}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:5px;background:var(--ok)}
.dot.warn{background:var(--warn)} .dot.err{background:var(--err)}

.main{padding:24px 30px 40px;min-width:0}
.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:16px;flex-wrap:wrap}
.top h1{font-size:22px;font-weight:650;letter-spacing:.2px}
.top p{font-size:12.5px;color:var(--dim);margin-top:3px}
.top-r{display:flex;align-items:center;gap:12px;padding-right:54px}
.user{display:flex;align-items:center;gap:10px;font-size:13px}
.avatar{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;
  background:var(--accent-grad);color:#08121f;box-shadow:0 4px 16px rgba(80,150,220,.35);
}
.user small{display:block;color:var(--faint);font-size:11px;line-height:1.2}

/* ---------- 玻璃卡片 ---------- */
.glass{
  background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);
  backdrop-filter:blur(24px) saturate(165%);-webkit-backdrop-filter:blur(24px) saturate(165%);
  box-shadow:var(--shadow),var(--inset);position:relative;overflow:hidden;
}
.glass::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(160deg,rgba(255,255,255,.10),transparent 42%);
}
[data-theme="light"] .glass::before{background:linear-gradient(160deg,rgba(255,255,255,.42),transparent 40%)}

.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:14px}
.kpi .glass{padding:15px 17px}
.kpi b{font-size:23px;font-weight:650;display:block;letter-spacing:.3px}
.kpi span{font-size:11.5px;color:var(--dim)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:14px}
.card{padding:17px 18px}
.card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.card-t{display:flex;align-items:center;gap:10px;min-width:0}
.svc-ico{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:16px;flex:none;
  background:var(--glass-hi);border:1px solid var(--line);
}
.card h3{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .meta{font-size:11.5px;color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.state{font-size:11.5px;display:flex;align-items:center;white-space:nowrap;color:var(--dim)}
.state.ok{color:var(--ok)} .state.warn{color:var(--warn)} .state.err{color:var(--err)}
.metrics{display:flex;gap:16px;margin:14px 0 13px;font-size:11.5px;color:var(--dim);flex-wrap:wrap}
.metrics b{display:block;color:var(--txt);font-size:13.5px;font-weight:600;margin-top:1px}
.actions{display:flex;gap:7px;flex-wrap:wrap}

/* ---------- 按钮 / 输入 ---------- */
.btn{
  font:inherit;font-size:12px;padding:7px 13px;border-radius:9px;cursor:pointer;
  border:1px solid var(--line);background:var(--btn-bg);color:var(--txt);transition:.16s;
  white-space:nowrap;
}
.btn:hover{background:var(--glass-hi);transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.pri{background:var(--accent-grad);border:none;color:#08121f;font-weight:650}
.btn.pri:hover{filter:brightness(1.06)}
.btn.danger{border-color:rgba(251,113,133,.4);color:var(--err)}
.btn.sm{padding:5px 10px;font-size:11.5px}
.btn.block{width:100%;padding:12px;border-radius:12px;font-size:14px}

input,select,textarea{
  font:inherit;font-size:13.5px;padding:11px 13px;border-radius:11px;width:100%;
  border:1px solid var(--line);background:var(--input-bg);color:var(--txt);outline:none;
  transition:.16s;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent-solid);box-shadow:0 0 0 3px rgba(34,211,238,.16)}
label.f{display:block;font-size:12px;color:var(--dim);margin:12px 0 6px}

/* ---------- 事件 / 资源 ---------- */
.cols{display:grid;grid-template-columns:1fr 320px;gap:14px;margin-top:14px}
@media(max-width:1100px){.cols{grid-template-columns:1fr}}
.panel{padding:18px}
.panel h2{font-size:11.5px;font-weight:700;letter-spacing:1.2px;color:var(--dim);
  text-transform:uppercase;margin-bottom:14px}
.bar-row{margin-bottom:15px}
.bar-row .lb{display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px}
.bar{height:7px;border-radius:99px;background:var(--glass-hi);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--accent-grad);transition:width .5s}
.ev{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.ev:last-child{border-bottom:none}
.ev time{color:var(--faint);font-size:11px;white-space:nowrap;padding-top:1px;font-family:var(--mono)}
.ev .tx small{display:block;color:var(--dim);font-size:11px}
.ev.err .tx b{color:var(--err)}

/* ---------- 登录 ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{
  width:min(390px,100%);padding:30px 28px;border-radius:24px;
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(28px) saturate(170%);
  -webkit-backdrop-filter:blur(28px) saturate(170%);box-shadow:var(--shadow),var(--inset);
  position:relative;overflow:hidden;
}
.login-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.12),transparent 45%);
}
.login-logo{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:21px;
  background:var(--accent-grad);color:#08121f;margin-bottom:16px;box-shadow:0 8px 26px rgba(80,150,220,.4)}
.login-card h1{font-size:19px;font-weight:650;margin-bottom:4px}
.login-card p{font-size:12.5px;color:var(--dim);margin-bottom:18px}
.msg{font-size:12.5px;margin-top:12px;min-height:18px}
.msg.err{color:var(--err)} .msg.ok{color:var(--ok)}
.theme-btn{
  position:fixed;top:18px;right:18px;z-index:50;width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;cursor:pointer;font-size:16px;
  border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(18px);color:var(--txt);
}

/* ---------- 弹窗 ---------- */
.mask{
  position:fixed;inset:0;z-index:100;background:rgba(4,8,16,.55);backdrop-filter:blur(6px);
  display:none;place-items:center;padding:20px;
}
.mask.show{display:grid}
.modal{
  width:min(680px,100%);max-height:86vh;overflow:auto;border-radius:20px;padding:22px;
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(30px) saturate(170%);
  -webkit-backdrop-filter:blur(30px) saturate(170%);box-shadow:0 24px 70px rgba(0,0,0,.45),var(--inset);
}
.modal h3{font-size:16px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}
.modal .x{cursor:pointer;color:var(--dim);font-size:18px;line-height:1}
pre.logs{
  font-family:var(--mono);font-size:11.5px;line-height:1.55;white-space:pre-wrap;word-break:break-all;
  background:rgba(0,0,0,.22);border:1px solid var(--line);border-radius:12px;padding:14px;
  max-height:56vh;overflow:auto;color:var(--txt);
}
[data-theme="light"] pre.logs{background:rgba(20,40,70,.06)}

/* ---------- 表格 ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:10px 8px;text-align:left;border-bottom:1px solid var(--line)}
th{font-size:11.5px;color:var(--dim);font-weight:600;letter-spacing:.4px}
td{color:var(--txt)}
.tag{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;
  background:var(--glass-hi);border:1px solid var(--line);color:var(--dim)}
.tag.ok{color:var(--ok);border-color:rgba(52,211,153,.35)}
.tag.err{color:var(--err);border-color:rgba(251,113,133,.35)}

/* ---------- 提示 ---------- */
#toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);
  padding:11px 18px;border-radius:12px;font-size:13px;z-index:200;opacity:0;pointer-events:none;
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(20px);
  box-shadow:var(--shadow);transition:.25s;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.qr{width:180px;height:180px;border-radius:12px;background:#fff;padding:8px;display:block;margin:12px auto}
.hidden{display:none!important}
.empty{padding:28px;text-align:center;color:var(--dim);font-size:13px}
.spin{display:inline-block;width:13px;height:13px;border:2px solid var(--line);
  border-top-color:var(--accent-solid);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}

@media(max-width:820px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:236px;z-index:60;transform:translateX(-100%);transition:.25s}
  .side.open{transform:none}
  .main{padding:18px 16px 90px}
  .mobile-bar{display:flex}
}
.mobile-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:55;padding:10px 14px;
  background:var(--glass);border-top:1px solid var(--line);backdrop-filter:blur(20px);
  justify-content:space-around;font-size:11px}
.mobile-bar a{color:var(--dim);text-decoration:none;display:grid;place-items:center;gap:2px;padding:4px 10px}
.mobile-bar a.on{color:var(--txt)}

/* ================= 应用图标墙 ================= */
.hero{
  padding:22px 24px;margin-bottom:16px;border-radius:22px;position:relative;overflow:hidden;
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(24px) saturate(165%);
  -webkit-backdrop-filter:blur(24px) saturate(165%);box-shadow:var(--shadow),var(--inset);
}
.hero::after{
  content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;
  background:var(--accent-grad);filter:blur(60px);opacity:.35;pointer-events:none;
}
.hero h2{font-size:20px;font-weight:650;letter-spacing:.2px;margin-bottom:4px}
.hero p{font-size:13px;color:var(--dim)}
.hero .hero-tags{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.hero .ht{
  font-size:11.5px;padding:4px 10px;border-radius:99px;border:1px solid var(--line);
  background:var(--glass-2);color:var(--dim);
}
.hero .ht b{color:var(--txt)}

.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:16px}
.app-tile{
  position:relative;padding:22px 16px 18px;border-radius:20px;cursor:pointer;text-align:center;
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);box-shadow:var(--shadow);
  transition:.2s;overflow:hidden;
}
.app-tile:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.28)}
[data-theme="light"] .app-tile:hover{box-shadow:0 18px 40px rgba(70,100,145,.22)}
.app-tile::before{
  content:"";position:absolute;inset:0;opacity:0;transition:.2s;
  background:radial-gradient(180px 120px at 50% 0%, var(--tc,rgba(34,211,238,.28)), transparent 70%);
}
.app-tile:hover::before{opacity:1}
.app-ico{
  width:64px;height:64px;margin:0 auto 14px;border-radius:19px;display:grid;place-items:center;
  font-size:30px;position:relative;z-index:1;
  background:var(--glass-hi);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 8px 22px var(--tc2,rgba(34,211,238,.18));
}
.app-name{font-size:13.5px;font-weight:600;position:relative;z-index:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-cat{font-size:11px;color:var(--faint);margin-top:3px;position:relative;z-index:1}
.app-del{
  position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:7px;display:none;
  place-items:center;font-size:12px;color:var(--dim);background:rgba(0,0,0,.25);cursor:pointer;z-index:2;
}
.app-tile:hover .app-del{display:grid}
.app-del:hover{color:var(--err);background:rgba(251,113,133,.18)}

/* ================= 抽屉（服务详情） ================= */
.drawer-mask{
  position:fixed;inset:0;z-index:120;background:rgba(4,8,16,.5);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:.22s;
}
.drawer-mask.show{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);z-index:121;
  background:var(--glass);border-left:1px solid var(--line);
  backdrop-filter:blur(30px) saturate(170%);-webkit-backdrop-filter:blur(30px) saturate(170%);
  box-shadow:-20px 0 60px rgba(0,0,0,.35);
  transform:translateX(102%);transition:transform .26s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
}
.drawer.show{transform:none}
.drawer-h{padding:22px 22px 14px;border-bottom:1px solid var(--line);position:relative}
.drawer-h .x{position:absolute;right:18px;top:18px;cursor:pointer;color:var(--dim);font-size:18px}
.drawer-b{padding:18px 22px 26px;overflow:auto;flex:1}
.d-sec{margin-bottom:20px}
.d-sec h4{font-size:11.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--dim);
  margin-bottom:10px;font-weight:700}
.d-row{display:flex;justify-content:space-between;padding:8px 0;font-size:13px;
  border-bottom:1px solid var(--line)}
.d-row:last-child{border-bottom:none}
.d-row span:first-child{color:var(--dim)}
.d-row span:last-child{font-weight:500;font-family:var(--mono);font-size:12.5px}
.d-actions{display:flex;gap:8px;flex-wrap:wrap}
.d-logs{
  font-family:var(--mono);font-size:11px;line-height:1.6;white-space:pre-wrap;word-break:break-all;
  background:rgba(0,0,0,.2);border:1px solid var(--line);border-radius:10px;padding:12px;
  max-height:220px;overflow:auto;margin-top:8px;
}
[data-theme="light"] .d-logs{background:rgba(20,40,70,.05)}

/* ================= 小趋势图 & 分区标题 ================= */
.spark{width:100%;height:38px;display:block;margin-top:8px;opacity:.9}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin:22px 0 12px}
.sec-head h3{font-size:14px;font-weight:650;letter-spacing:.2px}
.sec-head a{font-size:12px;color:var(--dim);cursor:pointer;text-decoration:none}
.sec-head a:hover{color:var(--txt)}
.stat-mini{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--dim);margin-top:10px}
.stat-mini b{color:var(--txt);font-family:var(--mono)}
.card.clickable{cursor:pointer}
.card.clickable:hover{border-color:var(--accent-solid)}

.app-group-head{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:6px 0 2px}
.app-group-head h3{font-size:13.5px;font-weight:650}
.app-group-head .cnt{font-size:11.5px;color:var(--faint);background:var(--glass-2);
  border:1px solid var(--line);border-radius:99px;padding:1px 9px}
.app-stat{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.app-stat .as{flex:1;min-width:150px;padding:14px 16px;border-radius:16px;background:var(--glass);
  border:1px solid var(--line);backdrop-filter:blur(18px);box-shadow:var(--shadow)}
.app-stat b{font-size:20px;font-weight:650;display:block}
.app-stat span{font-size:11.5px;color:var(--dim)}