/* =====================================================================
   页面级样式：登录页 + 若干结构性片段
   ===================================================================== */

/* ---------------- 登录页 ---------------- */
.login-wrap{
  min-height:100vh;min-height:100dvh;
  display:grid;place-items:center;
  padding:24px;
  position:relative;
  background:
    radial-gradient(900px 520px at 12% -8%,rgba(47,107,255,.20),transparent 60%),
    radial-gradient(760px 460px at 96% 6%,rgba(0,194,178,.14),transparent 58%),
    linear-gradient(180deg,#0A1120 0%,#0D1830 55%,#0A1120 100%);
  overflow:hidden;
}
/* 科技感底纹：网格 + 扫描光带 */
.login-wrap::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(146,176,232,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(146,176,232,.07) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(closest-side at 50% 40%,#000,transparent 85%);
}
.login-wrap::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(34,224,200,.55),transparent);
  animation:sweep 6s linear infinite;
}
.login-box{
  position:relative;z-index:1;
  width:100%;max-width:424px;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.7);
  border-radius:16px;
  padding:30px 30px 24px;
  box-shadow:0 24px 70px rgba(4,10,24,.45);
  animation:fadeUp .4s var(--ease-out) both;
}
.login-brand{display:flex;align-items:center;gap:13px;margin-bottom:24px}
.login-logo{
  width:44px;height:44px;border-radius:12px;flex:0 0 auto;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#5A8BFF,#1F4FE0);
  box-shadow:0 6px 18px rgba(47,107,255,.34);
}
.login-logo .ic{width:24px;height:24px;stroke-width:1.7}
.login-name{font-size:var(--fs-xl);font-weight:var(--fw-strong);letter-spacing:0;color:var(--text-1)}
.login-sub{font-size:var(--fs-sm);color:var(--text-3);margin-top:2px}

.login-field{margin-bottom:15px}
.login-field > label{
  display:block;font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--text-2);margin-bottom:6px;
}
.login-field input{
  width:100%;height:40px;padding:0 13px;
  border:1px solid var(--line-strong);border-radius:var(--r-md);
  background:#fff;font-size:var(--fs-md);outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.login-field input:focus{border-color:var(--brand-500);box-shadow:0 0 0 3px rgba(47,107,255,.12)}

.login-ports{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.login-port{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:9px 6px;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--bg-soft);
  font-size:var(--fs-xs);color:var(--text-3);
  transition:all .14s var(--ease);
}
.login-port .ic{width:17px;height:17px}
.login-port:hover{border-color:var(--line-strong);color:var(--text-1)}
.login-port.on{
  background:var(--brand-050);border-color:var(--brand-400);
  color:var(--brand-600);font-weight:var(--fw-strong);
}

.login-btn{
  width:100%;height:42px;margin-top:4px;
  border-radius:var(--r-md);
  background:linear-gradient(135deg,#3E74FF,#1F4FE0);
  color:#fff;font-size:var(--fs-md);font-weight:var(--fw-strong);letter-spacing:var(--ls-caps);
  box-shadow:0 6px 18px rgba(47,107,255,.3);
  transition:filter .15s,transform .1s;
}
.login-btn:hover{filter:brightness(1.06)}
.login-btn:active{transform:translateY(1px)}

.login-err{min-height:18px;margin-top:9px;font-size:var(--fs-sm);color:var(--c-danger);text-align:center}
.login-note{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin-top:14px;padding-top:13px;border-top:1px solid var(--line-soft);
  font-size:var(--fs-xs);color:var(--text-4);line-height:var(--lh-body);
}
.login-note .ic{width:13px;height:13px;flex:0 0 auto}
.login-note code{
  font-family:var(--mono);font-size:var(--fs-xs);
  background:var(--surface-3);padding:1px 5px;border-radius:var(--r-xs);color:var(--text-2);
}
@media (max-width:520px){
  .login-box{padding:24px 20px 20px}
  .login-ports{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------------- 片段 ---------------- */
.bcard{border:1px solid var(--line-soft);border-radius:var(--r-md);padding:12px 14px}
.bcard + .bcard{margin-top:10px}

.todo-item{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px dashed var(--line-soft)}
.todo-item:last-child{border-bottom:none}

.d-sec{margin-bottom:20px}
.d-sec h4{font-size:var(--fs-xs);font-weight:var(--fw-strong);letter-spacing:var(--ls-caps);color:var(--text-4);margin-bottom:10px}

.view-host{display:block}

/* 内容区在深色全屏页时取消内边距与最大宽度约束 */
.page--flush{padding:0;max-width:none}
.page--flush .view-host{display:block}

/* 面板内紧凑工具栏 */
.panel__head .tools{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;width:100%}