/* HomeGate 门户 / 中台共用基础样式（移动优先） */
:root{
  --bg:#0b1220; --panel:#121b2c; --panel-2:#162034; --line:#22304a;
  --text:#e8eefb; --muted:#8aa1c0; --accent:#4f8cff; --accent-2:#22d3ee;
  --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444; --radius:16px;
  --shadow:0 8px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 10% -10%,#16233b 0%,var(--bg) 55%) no-repeat,var(--bg);
  color:var(--text); font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB",
  "Microsoft YaHei",Roboto,sans-serif; min-height:100vh; -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:880px;margin:0 auto;padding:20px 16px 48px}
.topbar{display:flex;align-items:center;gap:12px;padding:14px 0 18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.5px}
.logo{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:16px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#04121f;font-weight:800}
.brand small{display:block;font-weight:400;font-size:12px;color:var(--muted);letter-spacing:0}
.spacer{flex:1}
.pill{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);color:var(--muted);font-size:13px}
.pill:hover{border-color:var(--accent);color:var(--text)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 16px;
  border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);
  font-size:14px;cursor:pointer;transition:.18s;white-space:nowrap}
.btn:hover{border-color:var(--accent);transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,var(--accent),#3570e0);border-color:transparent;color:#fff;font-weight:600}
.btn.ghost{background:transparent}
.btn.danger{color:#ffb4b4;border-color:#4a2430}
.btn.small{padding:7px 10px;font-size:13px;border-radius:9px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.section{margin-top:26px}
.section-head{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding-left:2px}
.section-head h2{font-size:15px;margin:0;font-weight:600;letter-spacing:.3px}
.section-head .count{font-size:12px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.card{display:block;padding:16px;background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:var(--radius);transition:.18s;position:relative;overflow:hidden}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card:active{transform:scale(.995)}
.card .title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;margin-bottom:6px}
.card .meta{color:var(--muted);font-size:12.5px;display:flex;flex-wrap:wrap;gap:8px}
.card .arrow{position:absolute;right:14px;top:16px;color:var(--muted);font-size:16px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:#64748b}
.dot.online{background:var(--ok);box-shadow:0 0 0 4px rgba(34,197,94,.14)}
.dot.starting{background:var(--warn);box-shadow:0 0 0 4px rgba(245,158,11,.14)}
.dot.offline{background:#64748b}
.badge{font-size:11.5px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.badge.online{color:#a7f3c9;border-color:#1d4d33;background:#10331f}
.badge.starting{color:#fde68a;border-color:#4d3a10;background:#33240d}
.badge.offline{color:#b6c2d3;border-color:#2a3648;background:#1a2233}
.card.off .title{color:#c6d2e2}
.hint{color:var(--muted);font-size:12px;margin-top:10px}
/* 登录 */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth .box{width:100%;max-width:380px;padding:26px 22px;background:var(--panel);border:1px solid var(--line);
  border-radius:20px;box-shadow:var(--shadow)}
.auth h1{font-size:20px;margin:16px 0 4px}
.auth p.sub{color:var(--muted);font-size:13px;margin:0 0 22px}
label{display:block;font-size:13px;color:var(--muted);margin:14px 0 6px}
input[type=text],input[type=password],input[type=number],select,textarea{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:#0d1524;color:var(--text);font-size:15px;outline:none;transition:.15s
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,140,255,.14)}
form .btn.primary{width:100%;margin-top:20px;padding:13px}
.alert{padding:11px 14px;border-radius:12px;font-size:13.5px;margin:0 0 8px}
.alert.bad{background:#2a1319;border:1px solid #55202b;color:#ffc2c2}
.alert.ok{background:#10281d;border:1px solid #1d4d33;color:#b5f0c8}
.msg{max-width:520px;margin:80px auto;padding:26px;text-align:center}
.msg h1{font-size:20px;margin:0 0 10px}
.msg p{color:var(--muted);margin:0 0 20px}
/* 中台 */
.console{display:flex;min-height:100vh}
.nav{width:210px;flex:0 0 210px;padding:22px 16px;border-right:1px solid var(--line);background:#0d1524}
.nav .brand{margin-bottom:22px}
.nav a.link{display:block;padding:10px 12px;border-radius:10px;color:var(--muted);font-size:14px;margin-bottom:4px}
.nav a.link:hover{background:var(--panel);color:var(--text)}
.nav a.link.active{background:var(--panel-2);color:var(--text);border:1px solid var(--line)}
.main{flex:1;min-width:0;padding:24px 28px 60px}
.main h1{font-size:20px;margin:0 0 6px}
.main .sub{color:var(--muted);font-size:13px;margin:0 0 22px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:22px}
.stat{padding:16px 18px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.stat .k{font-size:12px;color:var(--muted)}
.stat .v{font-size:22px;font-weight:700;margin-top:4px}
table{width:100%;border-collapse:collapse}
th,td{padding:11px 12px;text-align:left;font-size:13.5px;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--muted);font-weight:500;font-size:12.5px}
tr:last-child td{border-bottom:none}
td .slug{color:var(--muted);font-size:12px}
td.ops{white-space:nowrap}
td.ops form{display:inline}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.form-actions{display:flex;gap:10px;margin-top:22px}
.code{background:#0a1220;border:1px solid var(--line);border-radius:12px;padding:14px;overflow:auto;
  font:12.5px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#b9cbe6;max-height:420px}
.muted{color:var(--muted)}
@media (max-width:760px){
  .console{display:block}
  .nav{width:auto;display:flex;gap:6px;align-items:center;overflow-x:auto;border-right:none;
    border-bottom:1px solid var(--line);padding:12px 14px;position:sticky;top:0;z-index:10}
  .nav .brand{margin:0 10px 0 0;font-size:13px}
  .nav .brand small{display:none}
  .nav a.link{margin:0;padding:8px 10px;white-space:nowrap}
  .main{padding:18px 14px 48px}
  table.responsive thead{display:none}
  table.responsive tr{display:block;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:6px 4px}
  table.responsive td{display:flex;justify-content:space-between;gap:12px;border:none;padding:6px 10px}
  table.responsive td::before{content:attr(data-label);color:var(--muted);font-size:12px}
  .wrap{padding:16px 14px 40px}
}