/* 淡蓝科技：登录/注册用网格和光斑，进入后台后只保留配色。 */
:root {
  --bg: #d5e4f0;
  --bg-raise: #eef5fb;
  --panel: #ffffff;
  --ink: #163044;
  --muted: #3e5c72;
  --faint: #6d8798;
  --line: rgba(18, 60, 90, .16);
  --brand: #1b6f9c;
  --brand-2: #0f4f74;
  --brand-soft: #e7f3f8;
  --brand-mid: #2a86b8;
  --accent: #2a86b8;
  --navy: #1b6f9c;
  --navy-2: #0f4f74;
  --sky: #2a86b8;
  --btn-1: #2a86b8;
  --btn-2: #17648f;
  --nav: rgba(213, 228, 240, .92);
  --glow: rgba(27, 111, 156, .2);
  --shadow: 0 18px 40px rgba(27, 111, 156, .12);
  --ok: #2f7d57;
  --danger: #c0392b;
  --warn: #b7791f;
  --warm: #c27803;
}

body {
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(20, 70, 110, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 70, 110, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  font-family: "Noto Sans SC", "Outfit", "PingFang SC", "Microsoft YaHei", sans-serif;
}

#fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.login-wrap,
body:not(:has(.app)) .wrap,
.app {
  position: relative;
  z-index: 1;
}

.login-wrap,
body:not(:has(.app)) .wrap {
  background: transparent;
}

.login-card,
body:not(:has(.app)) .card {
  background: rgba(255, 255, 255, .66);
  border: 1px solid rgba(18, 60, 90, .14);
  border-radius: 16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.login-card::before { display: none; }

.login-card h1,
.login-brand,
.product {
  background-image: none;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: #163044;
  color: #163044;
  font-weight: 600;
}

.btn-primary {
  background: linear-gradient(180deg, #2a86b8, #17648f);
  color: #fff;
  box-shadow: 0 8px 22px rgba(27, 111, 156, .22);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #1b6f9c, #0f4f74);
  filter: none;
}

.login-card .btn-primary,
body:not(:has(.app)) .card .btn-primary,
body:not(:has(.app)) .card .login-link {
  border-radius: 999px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #1b6f9c;
  box-shadow: 0 0 0 3px rgba(27, 111, 156, .18);
}

.top,
.shell-top {
  background: var(--nav);
  color: #163044;
  border-bottom: 1px solid rgba(18, 60, 90, .14);
  box-shadow: none;
  backdrop-filter: blur(12px);
}

.top .brand-mark,
.shell-top .brand-mark {
  background: #1b6f9c;
  color: #fff;
}

.top .btn-ghost,
.shell-top .btn-ghost,
.shell-top .menu-toggle,
.top .admin-chip,
.shell-top .admin-chip,
.top .badge,
.top .notify-toggle {
  background: rgba(255, 255, 255, .72);
  color: #0f4f74;
  border-color: rgba(18, 60, 90, .14);
}

.top .notify-toggle {
  background: transparent;
  color: #163044;
}

.top .presence-btn {
  border-color: rgba(18, 60, 90, .18);
  background: rgba(255, 255, 255, .55);
  color: #163044;
}

.top .presence-btn.is-online .seg-on,
.top .presence-btn.is-offline .seg-off {
  background: #1b6f9c;
  color: #fff;
}

.top .btn-ghost:hover:not(:disabled),
.shell-top .btn-ghost:hover:not(:disabled) {
  background: #fff;
  filter: none;
}

body:has(.app.show) #fx { display: none; }

.msgs {
  background: #eef5fb;
}

.app .panel,
.app .stat,
.data-table,
table {
  background-color: #fff;
}