/* ============================================================
   Massir0 UI Kit  v1.0        · 幽灵·蕾娅
   统一风格：暗色 · 赛博 · 青蓝主色
   用法：<link rel="stylesheet" href="/static/massir0.css">
        或直接 <link href="https://massir0.com/static/massir0.css">
   ============================================================ */

:root{
  /* ---- 颜色 tokens ---- */
  --bg:#0a0d12;
  --bg-glow:radial-gradient(1200px 620px at 50% -12%, #12202e 0%, #0a0d12 62%);
  --surface:#121722;
  --surface-2:#0f141c;
  --line:#1e2636;
  --line-2:#2a3547;

  --fg:#dbe6f5;
  --fg-dim:#7a8aa3;
  --fg-mute:#4d5a6e;

  --accent:#5ee7ff;
  --accent-2:#a78bfa;
  --hot:#ff5c8a;
  --ok:#39d98a;
  --warn:#ffcf5c;

  /* ---- 形状 / 间距 / 字体 ---- */
  --radius:14px;
  --radius-sm:9px;
  --radius-pill:999px;
  --shadow:0 10px 34px rgba(0,0,0,.38);
  --shadow-accent:0 0 0 1px rgba(94,231,255,.35), 0 8px 30px rgba(94,231,255,.08);

  --font:-apple-system,"Segoe UI","PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);
  background-image:var(--bg-glow);
  background-attachment:fixed;
  color:var(--fg);
  font:14px/1.62 var(--font);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

/* ---------- 顶部栏 ---------- */
.m-header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 24px;
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
  background:rgba(10,13,18,.72);
  position:sticky;top:0;z-index:20;
}
.m-brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;letter-spacing:.4px}
.m-brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 10px var(--accent),0 0 22px rgba(94,231,255,.5)}
.m-brand b{color:var(--accent)}
.m-user{color:var(--fg-dim);font-size:13px}
.m-user a{margin-left:12px}

/* ---------- 容器 ---------- */
.m-main{max-width:960px;margin:0 auto;padding:28px 24px 56px}

/* ---------- 网格 ---------- */
.m-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:16px}

/* ---------- 卡片 ---------- */
.m-card{
  background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
}
a.m-card{display:block;color:inherit;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
a.m-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow-accent);text-decoration:none}
.m-card .ico{font-size:24px;line-height:1;color:var(--accent)}
.m-card .nm{font-size:15px;font-weight:600;margin:10px 0 4px}
.m-card .ds{color:var(--fg-dim);font-size:12.5px}

/* ---------- 按钮 ---------- */
.m-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--surface);color:var(--fg);border:1px solid var(--line);
  padding:10px 16px;border-radius:var(--radius-sm);font:inherit;font-weight:500;cursor:pointer;
  transition:border-color .15s ease,color .15s ease;
}
.m-btn:hover{border-color:var(--accent);color:var(--accent)}
.m-btn--primary{background:var(--accent);color:#04121a;border-color:var(--accent);font-weight:600}
.m-btn--primary:hover{color:#04121a;filter:brightness(1.06)}
.m-btn:disabled{opacity:.5;cursor:default}

/* ---------- 表单 ---------- */
.m-input,.m-select,.m-textarea{
  width:100%;background:var(--surface-2);color:var(--fg);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 12px;font:inherit;margin-bottom:12px;
}
.m-textarea{min-height:92px;resize:vertical}
.m-input:focus,.m-select:focus,.m-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(94,231,255,.12)}

/* ---------- 徽标 ---------- */
.m-badge{display:inline-block;font-size:11px;line-height:1.6;padding:1px 8px;border-radius:var(--radius-pill);
  border:1px solid var(--line-2);color:var(--fg-dim)}
.m-badge--ok{border-color:var(--ok);color:var(--ok)}
.m-badge--hot{border-color:var(--hot);color:var(--hot)}
.m-badge--accent{border-color:var(--accent);color:var(--accent)}

/* ---------- 标题 / 文本 ---------- */
.m-h1{font-size:20px;font-weight:700;margin:0 0 6px;letter-spacing:.4px}
.m-h2{font-size:15px;font-weight:600;margin:0 0 12px;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.12em}
.m-hint{color:var(--fg-dim);font-size:12.5px}
.m-err{color:var(--hot);font-size:12.5px}
.m-mono{font-family:var(--mono)}
.m-mt{margin-top:16px}
.m-row{display:flex;gap:12px}
.m-row>*{flex:1}

/* ---------- 登录页专用 ---------- */
.m-center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.m-login{width:352px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.m-login .m-h1 span{color:var(--accent)}

/* ---------- 页脚 ---------- */
.m-footer{text-align:center;color:var(--fg-mute);font-size:12px;padding:28px}