/* 项目管理 · 公共样式
   沿用「公司管理」的设计语言：深青底 + 玻璃卡 + 青蓝渐变强调色。
   三个页面共用这一份，各页只写自己那块。 */

:root{
  --cy:#288E9D; --cy-l:#3FD1E4; --bl:#3284AB; --bl-d:#0E3F8C;
  --bg0:#03141A; --bg1:#062A34; --bg2:#0A3B49;
  --tx:#EAF7F9; --tx2:#9CC0C9; --tx3:#5F838D;
  --line:rgba(122,224,240,.14); --line2:rgba(122,224,240,.28);
  --glass:rgba(255,255,255,.055); --glass2:rgba(255,255,255,.085);
  --ok:#43D6A0; --warn:#F2C14E; --bad:#FF7A7A; --info:#6FB8FF;
  --r:14px;
  --ff:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--ff);background:var(--bg0);color:var(--tx);overflow:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit}
a{color:var(--cy-l);text-decoration:none}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:rgba(122,224,240,.07)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#5CC9E0,#3284AB);border-radius:100px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#8FE6F4,#3FD1E4)}
select option{background:#062A34;color:#EAF7F9}
input[type=date],input[type=month]{color-scheme:dark;accent-color:#3FD1E4}

.bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 760px at 8% 0%, rgba(40,142,157,.30), transparent 62%),
    radial-gradient(980px 820px at 92% 14%, rgba(50,132,171,.26), transparent 64%),
    radial-gradient(900px 700px at 70% 100%, rgba(14,63,140,.30), transparent 62%),
    linear-gradient(158deg,#03141A 0%,#062A34 46%,#04202A 100%);}
.bg::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(122,224,240,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(122,224,240,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 22% 12%,#000 0%,rgba(0,0,0,.3) 44%,transparent 78%);
  mask-image:radial-gradient(circle at 22% 12%,#000 0%,rgba(0,0,0,.3) 44%,transparent 78%);}

/* ---------------- 顶栏 ---------------- */
.topbar{display:flex;align-items:center;height:54px;padding:0 20px;gap:0;
  border-bottom:1px solid var(--line);background:rgba(4,25,31,.66);backdrop-filter:blur(14px);flex:none}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.blg{width:29px;height:28px;flex:none;object-fit:contain;display:block;
  filter:drop-shadow(0 0 12px rgba(63,209,228,.5))}
.bnm{font-size:13.5px;font-weight:600;color:var(--cy-l);letter-spacing:.07em;white-space:nowrap}
.bsep{width:1px;height:15px;flex:none;background:rgba(122,224,240,.32);margin:0 4px}
.btl{font-size:15px;font-weight:600;color:#fff;letter-spacing:.05em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.who{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--tx2);flex:none}
.who b{color:var(--tx);font-weight:600}
.qbtn{height:28px;padding:0 11px;border-radius:8px;font-size:11.5px;color:var(--tx3);
  border:1px solid var(--line);transition:.15s}
.qbtn:hover{color:var(--bad);border-color:rgba(255,122,122,.4);background:rgba(255,90,90,.08)}

/* ---------------- 按钮 ---------------- */
.btn{height:34px;padding:0 15px;border-radius:9px;font-size:12.5px;font-weight:500;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:.16s;border:1px solid transparent;white-space:nowrap}
.btn .ic{width:14px;height:14px}
.btn-ghost{background:var(--glass);border-color:var(--line2);color:var(--tx2)}
.btn-ghost:hover{background:var(--glass2);color:#fff;border-color:rgba(63,209,228,.45)}
.btn-pri{background:linear-gradient(140deg,var(--cy-l),var(--bl));color:#03202A;font-weight:600;
  box-shadow:0 6px 20px -8px rgba(63,209,228,.7)}
.btn-pri:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-sm{height:28px;padding:0 11px;font-size:11.5px;border-radius:7px}
.btn:disabled{opacity:.5;cursor:default;transform:none;filter:none}

/* ---------------- 表单 ---------------- */
.ipt{height:34px;border-radius:9px;border:1px solid var(--line2);background:rgba(4,26,32,.7);
  color:var(--tx);padding:0 11px;font-size:12.5px;outline:none;transition:.16s;width:100%}
.ipt:hover{border-color:rgba(63,209,228,.45)}
.ipt:focus{border-color:var(--cy-l);box-shadow:0 0 0 3px rgba(63,209,228,.12)}
.ipt::placeholder{color:#4A6A74}
select.ipt{padding-right:26px;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%235F838D' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center}
textarea.ipt{height:auto;padding:9px 11px;line-height:1.7;resize:vertical;min-height:96px}

/* ---------------- 卡片 ---------------- */
.card{border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.014))}

/* ---------------- 弹窗 ---------------- */
.mask{position:fixed;inset:0;background:rgba(2,12,16,.66);backdrop-filter:blur(3px);
  z-index:180;opacity:0;pointer-events:none;transition:.2s}
.mask.show{opacity:1;pointer-events:auto}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-46%) scale(.985);z-index:190;
  width:560px;max-width:94vw;max-height:90vh;display:flex;flex-direction:column;
  border:1px solid var(--line2);border-radius:16px;overflow:hidden;
  background:linear-gradient(170deg,#07232D,#051A22);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95);
  opacity:0;pointer-events:none;transition:.22s cubic-bezier(.4,0,.2,1)}
.modal.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.modal.wide{width:min(1420px,96vw)}
.modal.mid{width:min(880px,94vw)}
.mhead{padding:16px 20px 13px;border-bottom:1px solid var(--line);flex:none;position:relative}
.mhead h3{font-size:15px;font-weight:600;padding-right:36px}
.mhead p{font-size:11.5px;color:var(--tx3);margin-top:5px;line-height:1.6}
.mx{position:absolute;right:13px;top:13px;width:27px;height:27px;border-radius:8px;
  display:grid;place-items:center;color:var(--tx3);border:1px solid transparent}
.mx:hover{background:var(--glass);color:var(--tx);border-color:var(--line)}
.mx .ic{width:13px;height:13px}
.mbody{flex:1;overflow-y:auto;padding:16px 20px 18px}
.mfoot{flex:none;padding:13px 20px;border-top:1px solid var(--line);display:flex;gap:9px;
  align-items:center;justify-content:flex-end;flex-wrap:wrap}
.mfoot .hint{margin-right:auto;font-size:11px;color:var(--tx3);line-height:1.5}

.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld>label{font-size:11px;color:var(--tx3);letter-spacing:.03em}
.fld>label b{color:var(--bad);font-weight:600;margin-left:2px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.frow.one{grid-template-columns:1fr}
.range{display:flex;align-items:center;gap:8px}
.range .ipt{flex:1;min-width:0}
.range i{color:var(--tx3);font-style:normal;font-size:12px;flex:none}

/* ---------------- 提示 ---------------- */
.toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,20px);z-index:300;
  background:#0B303B;border:1px solid rgba(63,209,228,.4);color:var(--tx);font-size:12.5px;
  padding:11px 17px;border-radius:10px;opacity:0;pointer-events:none;transition:.22s;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.9);max-width:76vw;line-height:1.6}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.bad{border-color:rgba(255,122,122,.5);background:#2A1116}
.toast.ok{border-color:rgba(67,214,160,.45)}

/* ---------------- 徽标 ---------------- */
.badge{display:inline-block;font-size:10.5px;padding:2px 7px;border-radius:5px;
  background:rgba(63,209,228,.1);color:var(--cy-l);border:1px solid rgba(63,209,228,.22);
  white-space:nowrap;line-height:1.6}
.badge.gray{background:rgba(255,255,255,.05);color:var(--tx3);border-color:var(--line)}
.badge.warn{background:rgba(242,193,78,.1);color:var(--warn);border-color:rgba(242,193,78,.26)}
.badge.ok{background:rgba(67,214,160,.1);color:var(--ok);border-color:rgba(67,214,160,.26)}
.badge.bad{background:rgba(255,90,90,.12);color:var(--bad);border-color:rgba(255,122,122,.3)}
.badge.info{background:rgba(111,184,255,.1);color:var(--info);border-color:rgba(111,184,255,.26)}

/* ---------------- 登录 ---------------- */
.login{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:
    radial-gradient(1150px 820px at 16% 26%, rgba(40,142,157,.34), transparent 62%),
    radial-gradient(1000px 760px at 92% 6%, rgba(50,132,171,.30), transparent 62%),
    linear-gradient(158deg,#04141C 0%,#062A38 48%,#04202C 100%)}
.login::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(122,224,240,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(122,224,240,.04) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 20% 20%,#000 0%,transparent 74%);
  mask-image:radial-gradient(circle at 20% 20%,#000 0%,transparent 74%)}
.lg-wrap{position:relative;z-index:2;display:flex;align-items:center;gap:clamp(32px,6vw,110px);
  max-width:1040px;width:100%;justify-content:center}
.lg-brand{max-width:440px}
.lg-logo{width:96px;height:auto;display:block;filter:drop-shadow(0 8px 30px rgba(63,209,228,.34))}
.lg-name{display:flex;align-items:baseline;gap:14px;margin-top:18px}
.lg-name h1{font-size:32px;font-weight:700;letter-spacing:.07em;line-height:1;color:#F4FCFE}
.lg-name i{width:1px;height:26px;background:rgba(122,224,240,.42);display:block;
  align-self:center;flex:none}
.lg-name span{font-size:15px;color:#DFF3F8;letter-spacing:.06em;font-weight:500}
.lg-en{font-size:10.5px;letter-spacing:.28em;color:#7CBBCC;margin-top:13px}
.lg-slogan{margin-top:22px;font-size:13.5px;letter-spacing:.16em;color:#C3E7F0;line-height:1.9}
.lg-card{width:340px;flex:none;padding:24px 24px 20px;border-radius:18px;
  border:1px solid rgba(122,224,240,.20);
  background:linear-gradient(168deg,rgba(13,54,68,.90),rgba(5,28,38,.94));
  box-shadow:0 44px 100px -44px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(18px)}
.lg-ct{display:flex;align-items:baseline;gap:8px;font-size:14px;font-weight:600}
.lg-ct em{font-style:normal;font-size:9.5px;letter-spacing:.22em;color:var(--tx3)}
.lg-ct2{font-size:11px;color:var(--tx3);margin-top:7px;line-height:1.6}
.lg-fld{display:flex;align-items:center;gap:9px;height:42px;padding:0 12px;margin-top:12px;
  border-radius:10px;border:1px solid var(--line2);background:rgba(4,26,32,.72);transition:.16s}
.lg-fld:focus-within{border-color:var(--cy-l);box-shadow:0 0 0 3px rgba(63,209,228,.13)}
.lg-fld .ic{width:14px;height:14px;flex:none;opacity:.5}
.lg-fld input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--tx);
  font-size:12.5px;letter-spacing:.02em}
.lg-fld input::placeholder{color:#4A6A74}
.lg-eye{flex:none;width:20px;height:20px;display:grid;place-items:center;color:var(--tx3);border-radius:5px}
.lg-eye:hover{color:var(--cy-l)}
.lg-eye .ic{width:14px;height:14px;opacity:1}
.lg-btn{width:100%;height:42px;margin-top:16px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;gap:8px;font-size:13.5px;font-weight:600;color:#03202A;
  background:linear-gradient(120deg,#7FE3F0 0%,#3FD1E4 40%,#3284AB 100%);
  box-shadow:0 12px 30px -12px rgba(63,209,228,.85);transition:.16s}
.lg-btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.lg-btn:disabled{opacity:.6;cursor:default;transform:none;filter:none}
.lg-err{min-height:16px;margin-top:10px;font-size:11px;color:var(--bad);text-align:center}
.lg-foot{margin-top:14px;font-size:10.5px;color:#3E5C66;text-align:center;line-height:1.7}

/* ---------------- 分页 ---------------- */
.pager{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--tx3);flex:none;flex-wrap:wrap}
.pager .sp{margin-left:auto;display:flex;align-items:center;gap:5px}
.pg{min-width:28px;height:28px;padding:0 8px;border-radius:7px;font-size:11.5px;color:var(--tx2);
  border:1px solid var(--line);transition:.14s;font-variant-numeric:tabular-nums}
.pg:hover:not(:disabled){background:var(--glass);color:#fff;border-color:var(--line2)}
.pg.on{background:linear-gradient(140deg,var(--cy),var(--bl));color:#fff;border-color:transparent;font-weight:600}
.pg:disabled{opacity:.3;cursor:not-allowed}
.pgsel{height:28px;padding:0 22px 0 8px;font-size:11.5px;border-radius:7px}

/* ---------------- 空态 / 加载 ---------------- */
.empty{padding:56px 20px;text-align:center;color:var(--tx3);font-size:12.5px;line-height:1.8}
.empty b{display:block;color:var(--tx2);font-size:13.5px;margin-bottom:6px;font-weight:500}
.spin{display:inline-block;width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(63,209,228,.25);border-top-color:var(--cy-l);animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.hidden{display:none !important}

@media(max-width:980px){
  .lg-brand{display:none}
  .lg-card{width:100%;max-width:360px}
  .topbar{padding:0 12px}
  /* 手机上顶部宽度就 390，品牌名和分隔线让位给标题，否则标题被压成一个字 */
  .bnm,.bsep{display:none}
  .btl{font-size:13.5px}
  .who{gap:8px}
  .who span.uname{display:none}
  .hide-m{display:none !important}
  .modal{max-height:94vh}
  .frow{grid-template-columns:1fr}
}