/* 运营工具台 —— 共享主题。模块在自己的 index.html 里
   <link rel="stylesheet" href="/hub/static/shared.css"> 即可统一外观。 */
:root{
  --bg:#0e1116; --panel:#161b22; --panel2:#1c2230; --line:#272d39;
  --text:#e6e9ef; --muted:#9aa4b2; --accent:#4f8cff; --accent2:#7c5cff;
  --ok:#3fb950; --warn:#d29922; --bad:#f85149; --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:"PingFang SC","Microsoft YaHei",-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:14px; line-height:1.55;
}
a{color:var(--accent); text-decoration:none}
.hide{display:none !important}

/* 顶栏 */
.ops-top{
  display:flex; align-items:center; gap:14px;
  padding:10px 18px; background:var(--panel); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.ops-top .brand{font-weight:700; letter-spacing:.5px; display:flex; align-items:center; gap:8px}
.ops-top .brand .dot{width:9px;height:9px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2))}
.ops-top .spacer{flex:1}
.ops-top .who{color:var(--muted); font-size:13px}
.ops-top a.back{color:var(--muted); font-size:13px}
.ops-top a.back:hover{color:var(--text)}

.wrap{max-width:1100px; margin:0 auto; padding:22px 18px}

.btn{
  background:var(--panel2); color:var(--text); border:1px solid var(--line);
  border-radius:8px; padding:8px 14px; cursor:pointer; font-size:13px;
}
.btn:hover{border-color:var(--accent)}
.btn.sm{padding:5px 10px; font-size:12px}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2)); border:none; color:#fff}
.btn.danger{border-color:#5a2330; color:#ff9b95}

input,select,textarea{
  background:#0c1017; color:var(--text); border:1px solid var(--line);
  border-radius:8px; padding:8px 10px; width:100%; font-size:13px;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent)}
label{display:block; font-size:12px; color:var(--muted); margin-bottom:4px}
.row{display:flex; gap:10px; flex-wrap:wrap}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px}

/* 工具卡片网格 */
.tool-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-top:18px}
.tool{
  display:block; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px; transition:.15s; color:var(--text);
}
.tool:hover{border-color:var(--accent); transform:translateY(-2px); background:var(--panel2)}
.tool .ic{font-size:26px}
.tool .t{font-weight:600; margin-top:8px; font-size:15px}
.tool .d{color:var(--muted); font-size:12.5px; margin-top:4px; min-height:34px}

.toast{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
  background:#222a37; border:1px solid var(--line); color:var(--text);
  padding:10px 16px; border-radius:10px; z-index:200; font-size:13px;
}
.toast.bad{border-color:#5a2330}
.toast.ok{border-color:#234a2b}

table{width:100%; border-collapse:collapse}
th,td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); font-size:13px}
th{color:var(--muted); font-weight:500}
.badge{display:inline-block; padding:1px 8px; border-radius:20px; font-size:11px; border:1px solid var(--line)}

@media (max-width:600px){ .wrap{padding:16px 12px} }