/* ============================================================
   仓库+工单一体化管理系统 · 科技感主题 v2
   保留全部既有 class 名,仅重写视觉属性 + CSS 变量
   ============================================================ */

:root {
  /* —— 设计令牌（浅蓝主题） —— */
  --c-bg:        #e9f2fc;
  --c-bg-soft:   #ddecfb;
  --c-surface:   #ffffff;
  --c-surface-2: #f2f8fe;
  --c-border:    #c5daf0;
  --c-border-2:  #9fc2e8;
  --c-text:      #143a5e;
  --c-text-dim:  #3d6188;
  --c-text-mute: #7492b4;
  --c-primary:   #2f7ce8;   /* 科技蓝 */
  --c-primary-2:  #0ea5e9;  /* 天蓝点缀 */
  --c-primary-3:  #6366f1;  /* 靛蓝渐变 */
  --c-accent:    #0284c7;
  --c-success:   #059669;
  --c-warn:      #d97706;
  --c-danger:    #dc2626;
  --shadow-lg:   0 8px 32px rgba(47,124,232,.10), 0 2px 8px rgba(14,165,233,.06);
  --shadow-md:   0 4px 16px rgba(47,124,232,.08);
  --shadow-sm:   0 2px 4px rgba(20,58,94,.10);
  --radius:      10px;
  --radius-sm:   6px;
  --radius-lg:   14px;
  --grad-primary: linear-gradient(135deg, #3b82f6 0%, #22b8ee 100%);
  --grad-primary-hover: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
  --grad-tile:   linear-gradient(135deg, rgba(59,130,246,.10) 0%, rgba(99,102,241,.08) 100%);
  --grad-topbar: linear-gradient(135deg, #f6faff 0%, #e3f0fd 100%);
}

*{box-sizing:border-box;margin:0;padding:0}

html, body {
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: "PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 800px 400px at 10% -10%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(ellipse 600px 500px at 100% 10%, rgba(139,92,246,.12), transparent 55%),
    radial-gradient(ellipse 700px 400px at 50% 120%, rgba(6,182,212,.10), transparent 60%);
  pointer-events: none; z-index: 0;
}

a { color: var(--c-primary); text-decoration: none; transition: color .15s }
a:hover { color: var(--c-accent); text-decoration: none }

/* —— 顶栏 —— */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
  padding: 0 24px;
  display: flex; align-items: center; min-height: 54px; flex-wrap: wrap;
  box-shadow: 0 2px 16px rgba(47,124,232,.10);
}
.topbar .brand {
  font-weight: 700; font-size: 16px; margin-right: 28px;
  background: var(--grad-primary);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: .5px;
  display: inline-flex; align-items: center;
}
/* 顶栏公司 Logo（透明版，融入深色顶栏） */
.topbar .brand .brand-logo {
  height: 28px; width: auto;
  margin-right: 9px;
  -webkit-text-fill-color: initial;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.35));
}
.topbar nav { display: flex; gap: 2px }
.topbar nav a {
  color: var(--c-text-dim);
  padding: 6px 14px;
  line-height: 1;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500;
  border-radius: 8px;
  transition: all .18s ease;
  text-decoration: none;
  position: relative;
}
.topbar nav a:hover {
  background: rgba(59,130,246,.15);
  color: var(--c-text);
}
.topbar nav a::after {
  content: "";
  position: absolute; left: 50%; bottom: -14px;
  width: 0; height: 2px;
  background: var(--grad-primary);
  transition: all .2s;
  border-radius: 2px;
}
.topbar nav a:hover::after { width: 60%; left: 20% }
.topbar .user {
  margin-left: auto; font-size: 12.5px;
  display: flex; align-items: center; gap: 12px;
  color: var(--c-text-dim);
}
.topbar .user a {
  color: var(--c-text-dim);
  padding: 4px 10px; border-radius: 6px;
}
.topbar .user a:hover {
  background: rgba(47,124,232,.10); color: var(--c-text);
}

.wrap {
  position: relative; z-index: 1;
  max-width: 1280px; margin: 22px auto; padding: 0 18px;
}

/* —— 卡片 —— */
.card {
  background: linear-gradient(145deg, #ffffff 0%, #f3f9ff 100%);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-lg);
  transition: box-shadow .25s, border-color .25s;
  /* 边界约束：内容（宽表格等）超出卡片时在卡片内横向滚动，不允许溢出边界 */
  overflow-x: auto;
}
.card:hover { border-color: var(--c-border-2); box-shadow: 0 10px 40px rgba(59,130,246,.18) }
.card h2 {
  font-size: 15px; font-weight: 700;
  color: var(--c-text);
  margin-bottom: 14px;
  border-left: 3px solid transparent;
  border-image: var(--grad-primary) 1;
  padding-left: 10px;
  letter-spacing: .3px;
  display: flex; align-items: center;
}
.card h3 { font-size: 14px; margin: 12px 0; color: var(--c-text) }

/* —— 导航磁贴 —— */
.nav-tiles { display: flex; flex-wrap: wrap; gap: 10px }
.nav-tiles .tile {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 120px; min-height: 52px;
  padding: 0 18px;
  background: var(--grad-tile);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-text);
  font-weight: 600; font-size: 13px;
  transition: all .2s cubic-bezier(.4,0,.2,1);
  position: relative; overflow: hidden;
  text-decoration: none;
}
.nav-tiles .tile::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(59,130,246,.25) 100%);
  opacity: 0; transition: opacity .2s;
}
.nav-tiles .tile:hover {
  transform: translateY(-2px);
  border-color: var(--c-primary);
  box-shadow: 0 6px 20px rgba(59,130,246,.28);
  color: #fff;
  background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
}
.nav-tiles .tile:hover::before { opacity: 0 }
.nav-tiles .tile:active { transform: translateY(0) }

.pill {
  font-size: 11px;
  background: var(--grad-primary);
  color: #fff;
  border-radius: 10px;
  padding: 2px 9px;
  margin-left: 8px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(59,130,246,.4);
  position: relative; z-index: 1;
}

/* —— 表格 —— */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
th, td {
  padding: 10px 12px; text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--c-border);
}
th {
  background: rgba(59,130,246,.08);
  color: var(--c-accent);
  font-weight: 600; font-size: 12.5px;
  white-space: nowrap;
  text-transform: uppercase; letter-spacing: .4px;
  border-bottom: 2px solid var(--c-primary);
  position: sticky; top: 0;
}
tr { transition: background .15s }
tr:hover td { background: rgba(59,130,246,.06) }
tr:nth-child(even) td { background: rgba(139,92,246,.03) }
tr:nth-child(even):hover td { background: rgba(59,130,246,.08) }

/* —— 按钮 —— */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  background: var(--grad-primary);
  color: #fff !important; border: 0;
  border-radius: var(--radius-sm);
  padding: 7px 16px; font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none !important;
  transition: all .18s ease;
  box-shadow: 0 2px 8px rgba(59,130,246,.3);
  letter-spacing: .2px;
}
.btn:hover {
  background: var(--grad-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(59,130,246,.4);
  color: #fff !important;
}
.btn:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(20,58,94,.25) }
.btn.gray { background: linear-gradient(135deg,#64748b,#475569); box-shadow: 0 2px 8px rgba(71,85,105,.35) }
.btn.gray:hover { background: linear-gradient(135deg,#475569,#334155); box-shadow: 0 4px 14px rgba(71,85,105,.4) }
.btn.red { background: linear-gradient(135deg,#ef4444,#b91c1c); box-shadow: 0 2px 8px rgba(239,68,68,.3) }
.btn.red:hover { background: linear-gradient(135deg,#f87171,#ef4444); box-shadow: 0 4px 14px rgba(239,68,68,.4) }
.btn.green { background: linear-gradient(135deg,#10b981,#059669); box-shadow: 0 2px 8px rgba(16,185,129,.3) }
.btn.green:hover { background: linear-gradient(135deg,#34d399,#10b981); box-shadow: 0 4px 14px rgba(16,185,129,.4) }
.btn.sm { padding: 4px 11px; font-size: 12px; border-radius: 5px }

/* —— 表单 —— */
input, select, textarea {
  font-family: inherit; font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--c-border-2);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--c-text);
  transition: all .15s;
  width: 100%;
  box-sizing: border-box;
  height: 36px;
}
input[type=file] { padding: 4px 8px; height: 36px; cursor: pointer }
input[type=date], input[type=number] { padding: 6px 10px }
input[type=radio], input[type=checkbox] {
  width: auto; height: auto; margin: 0 6px 0 0;
  vertical-align: middle; cursor: pointer;
  accent-color: #e74c3c; transform: scale(1.15);
}
input::placeholder, textarea::placeholder { color: var(--c-text-mute) }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,.2);
  background: #ffffff;
}
select option { background: var(--c-surface); color: var(--c-text) }

label { font-size: 12px; color: var(--c-text-dim); font-weight: 500; margin-bottom: 4px; display: block }

.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px }
.row .fld { display: flex; flex-direction: column; gap: 4px; min-width: 140px; flex: 1; max-width: 260px }

/* —— 返回上一级按钮 —— */
.btn-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; margin-bottom: 12px;
  border-radius: var(--radius-sm);
  background: rgba(56,189,248,.12);
  border: 1px solid rgba(14,165,233,.45);
  color: #0369a1; font-size: 13px; font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: all .2s ease;
}
.btn-back:hover { background: rgba(56,189,248,.22); transform: translateX(-2px); }

/* —— Flash 消息 —— */
.flash {
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  font-size: 13px; font-weight: 500;
  display: flex; align-items: center; gap: 8px;
  border: 1px solid;
  animation: slideIn .3s ease;
}
@keyframes slideIn { from { opacity:0; transform:translateY(-8px) } to { opacity:1; transform:translateY(0) } }
.flash.error { background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.4); color: #b91c1c }
.flash.ok { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.4); color: #047857 }
.flash.warn { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.45); color: #b45309 }

/* —— Tag / 状态 —— */
.tag {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: 12px;
  font-size: 11.5px; font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.tag.gray { background: rgba(100,116,139,.14); color: #475569; border-color: rgba(100,116,139,.35) }
.tag.blue { background: rgba(59,130,246,.14); color: #1d4ed8; border-color: rgba(59,130,246,.4) }
.tag.green { background: rgba(16,185,129,.14); color: #047857; border-color: rgba(16,185,129,.4) }
.tag.red { background: rgba(239,68,68,.12); color: #b91c1c; border-color: rgba(239,68,68,.4) }
.tag.orange { background: rgba(245,158,11,.16); color: #b45309; border-color: rgba(245,158,11,.45) }
.tag.cyan { background: rgba(6,182,212,.14); color: #0e7490; border-color: rgba(6,182,212,.4) }

.expired { color: var(--c-danger); font-weight: 700 }
.near { color: var(--c-warn); font-weight: 700 }
.muted { color: var(--c-text-mute); font-size: 12px }
.empty { color: var(--c-text-mute); padding: 28px; text-align: center; font-size: 13px }

/* —— Chip —— */
.chipbox { display: flex; flex-wrap: wrap; gap: 6px; max-width: 860px }
.chip {
  font-size: 12px;
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.25);
  border-radius: 6px;
  padding: 3px 10px;
  white-space: nowrap;
  color: var(--c-text-dim);
}
.chip b { color: var(--c-accent); margin-left: 3px; font-weight: 700 }

/* —— 弹窗 —— */
.modal-mask {
  position: fixed; inset: 0;
  background: rgba(15,40,80,.45);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 999;
  animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.modal-box {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  width: 540px; max-width: 92vw;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(15,40,80,.35), 0 0 80px rgba(59,130,246,.15);
  animation: modalIn .25s cubic-bezier(.4,0,.2,1);
}
@keyframes modalIn { from { opacity:0; transform:scale(.95) translateY(10px) } to { opacity:1; transform:scale(1) translateY(0) } }
.modal-box.warn-red { border-top: 4px solid var(--c-danger) }
.modal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 22px;
  background: rgba(239,68,68,.1);
  border-bottom: 1px solid rgba(239,68,68,.25);
}
.modal-head h3 { color: #b91c1c; font-size: 15px }
.warn-icon { color: var(--c-danger); font-size: 22px }
.modal-body { padding: 20px 22px; font-size: 13.5px; line-height: 1.8; color: var(--c-text-dim) }
.warn-list {
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.25);
  border-radius: var(--radius-sm);
  padding: 12px 16px; margin-top: 12px;
}
.warn-list ul { margin: 6px 0 6px 20px; color: #b91c1c }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--c-border);
  background: rgba(226,240,252,.6);
}

/* —— 登录页 —— */
.login-box {
  max-width: 380px; margin: 100px auto;
  background: linear-gradient(145deg, #ffffff, #eef6ff);
  border-radius: var(--radius-lg);
  padding: 34px 28px;
  box-shadow: 0 20px 60px rgba(15,40,80,.22), 0 0 120px rgba(59,130,246,.12);
  border: 1px solid var(--c-border);
  backdrop-filter: blur(10px);
}
.login-box h1 {
  font-size: 20px; font-weight: 800; text-align: center;
  margin-bottom: 26px;
  background: var(--grad-primary);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
}
.login-box input { width: 100%; margin-bottom: 14px; padding: 10px 12px }
.login-box .btn { width: 100%; padding: 10px; font-size: 14px }

/* —— 其他 —— */
.todo-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 14px }
.todo-grid .card { margin-bottom: 0 }
.form-narrow { max-width: 760px }
.qr { border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 6px; background: #fff }
.stat { font-size: 13px; color: var(--c-text-dim) }
.dynrow td { padding: 5px 8px }
.signature { margin-top: 30px; display: flex; justify-content: space-between; font-size: 13px; color: var(--c-text-dim) }
code { background: rgba(59,130,246,.15); padding: 1px 6px; border-radius: 4px; font-size: 12px; color: var(--c-accent) }

/* —— 滚动条 —— */
::-webkit-scrollbar { width: 8px; height: 8px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb {
  background: rgba(59,130,246,.3);
  border-radius: 4px;
  transition: background .15s;
}
::-webkit-scrollbar-thumb:hover { background: rgba(59,130,246,.55) }

/* —— 页脚 —— */
.copyright-footer {
  position: relative; z-index: 1;
  text-align: center;
  padding: 18px 16px;
  border-top: 1px solid var(--c-border);
  color: var(--c-text-dim);
  font-size: 15px;
  background: transparent;
  font-weight: 500;
}
.copyright-name {
  color: var(--c-primary);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 1px;
  text-shadow: 0 0 12px rgba(59,130,246,.5);
}

/* —— 过渡通用 —— */
.fade-in { animation: fadeIn .3s ease }

/* ============================================================
   大屏动态看板(Screen Dashboard)
   ============================================================ */

/* —— 顶部信息栏 —— */
.screen-header {
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  min-height: 215px;
  background: linear-gradient(135deg, #ffffff, #e6f1fd);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 14px 22px 28px; margin-bottom: 18px;
  box-shadow: var(--shadow-lg);
  position: relative; z-index: 1;
}

/* 左侧列：Logo（占横幅约 1/4 宽）+ 下方时间日期横排 */
.screen-left {
  position: absolute; left: 22px; top: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 6px;
  z-index: 2;
}

/* 左上：Logo */
.org-logo-wrap {
  position: relative;
  cursor: default;
  outline: none;
}
.org-logo {
  height: 110px; width: auto;
  border-radius: 6px;
  background: #fff;
  padding: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  transition: transform .2s ease, box-shadow .2s ease;
}
.org-logo-wrap:hover .org-logo,
.org-logo-wrap:focus-visible .org-logo {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 18px rgba(34,211,238,.35);
}
.org-logo-wrap[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 0; top: calc(100% + 8px);
  padding: 4px 8px;
  border: 1px solid var(--c-border-2);
  border-radius: 4px;
  background: rgba(255,255,255,.97);
  color: var(--c-text);
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.org-logo-wrap:hover::after,
.org-logo-wrap:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

/* 居中：单位名称 + 系统名称（字体稍大） */
.screen-center {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  z-index: 1;
}
.org-name {
  font-size: 30px; font-weight: 700;
  color: var(--c-text);
  letter-spacing: 3px;
  text-shadow: 0 0 14px rgba(59,130,246,.3);
}
.screen-brand {
  display: flex; align-items: center; gap: 12px;
  font-size: 26px; font-weight: 700;
  background: var(--grad-primary);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}
/* 大屏公司 Logo：主界面显示白色版，TV全屏模式切换深色版 */
.screen-brand .brand-logo-screen {
  height: 46px; width: auto;
  -webkit-text-fill-color: initial;
  filter: drop-shadow(0 2px 10px rgba(56,189,248,.35));
}
.screen-brand .logo-dark { display: none }
body.screen-mode .screen-brand .logo-light { display: none }
body.screen-mode .screen-brand .logo-dark { display: inline-block }
body.screen-mode .screen-brand .brand-logo-screen { height: 58px }

/* Logo 下方：日期（居中于 Logo 宽度） */
.clock-date {
  text-align: center;
  font-size: 16px; font-weight: 700;
  color: var(--c-text);
  letter-spacing: 1px;
}

/* 右侧列：圆盘时钟（上）+ 地址（下），间距受控 */
.screen-right {
  position: absolute; right: 22px; top: 14px;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start;
  gap: 12px;
  z-index: 2;
}

/* 圆盘时钟 */
.screen-clock-top.analog-clock {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0; border: none; border-radius: 0;
  background: none; box-shadow: none;
}
.clock-face {
  width: 130px; height: 130px;
  display: block;
  filter: drop-shadow(0 2px 10px rgba(34,211,238,.25));
}
.clock-rim { fill: #ffffff; stroke: var(--c-border-2); stroke-width: 2.5; }
.clock-face-bg { fill: #eef5fd; }
.clock-face .tick { stroke: rgba(148,163,184,.55); stroke-width: 1; }
.clock-face .tick.major { stroke: var(--c-text); stroke-width: 2; }
.clock-num { fill: var(--c-text); font-size: 7px; font-family: 'Consolas', monospace; font-weight: 700; }
.clock-face .hand { stroke: var(--c-text); stroke-width: 3; stroke-linecap: round; }
.clock-face .hand.minute { stroke-width: 2.2; }
.clock-face .hand.second { stroke: #f43f5e; stroke-width: 1.2; }
.clock-center { fill: var(--c-primary); }
.analog-clock .clock-time {
  font-size: 16px; font-weight: 800; letter-spacing: 2px;
  font-family: 'Consolas', 'Courier New', monospace;
  background: var(--grad-primary);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 左下：地址（居中于 Logo 宽度） */
.org-addr-bar {
  font-size: 12px; color: var(--c-text-dim);
  text-align: center;
  max-width: 300px;
  line-height: 1.4;
}
.org-addr-bar i { color: var(--c-primary); margin-right: 4px }

/* 全屏按钮：底部居中，避免与时钟/地址冲突 */
.fullscreen-btn {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
}

/* —— 待办动态看板 —— */
.todo-grid-big {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.todo-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
  padding: 18px 12px;
  background: linear-gradient(145deg, #ffffff, #f0f7fe);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  text-decoration: none; color: var(--c-text);
  transition: all .25s ease;
  position: relative; overflow: hidden;
}
.todo-card::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(59,130,246,.12), transparent 60%);
  opacity: 0; transition: opacity .25s;
}
.todo-card:hover {
  transform: translateY(-4px);
  border-color: var(--c-primary);
  box-shadow: 0 10px 30px rgba(59,130,246,.25);
}
.todo-card:hover::before { opacity: 1 }
.todo-card.warn { border-color: rgba(245,158,11,.3) }
.todo-card.warn:hover { border-color: var(--c-warn); box-shadow: 0 10px 30px rgba(245,158,11,.25) }
.todo-card.danger { border-color: rgba(239,68,68,.35) }
.todo-card.danger:hover { border-color: var(--c-danger); box-shadow: 0 10px 30px rgba(239,68,68,.3) }
.todo-card.danger .todo-label { color: #b91c1c }
.todo-card.warn .todo-label { color: #b45309 }

/* —— 环形进度 —— */
.ring {
  --pct: 0;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: conic-gradient(var(--c-primary) calc(var(--pct) * 1%),
              rgba(59,130,246,.12) 0);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: background 1.2s cubic-bezier(.4,0,.2,1);
}
.ring::before {
  content: ""; position: absolute;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--c-surface);
}
.ring.warn { background: conic-gradient(var(--c-warn) calc(var(--pct) * 1%),
              rgba(245,158,11,.12) 0) }
.ring.warn::before { background: var(--c-surface) }
.ring.danger { background: conic-gradient(var(--c-danger) calc(var(--pct) * 1%),
                rgba(239,68,68,.12) 0) }
.ring.danger::before { background: var(--c-surface) }
.ring-num {
  position: relative; z-index: 1;
  font-size: 24px; font-weight: 800;
  color: var(--c-text);
  font-family: 'Consolas', 'Courier New', monospace;
}
.todo-label {
  font-size: 13px; color: var(--c-text-dim);
  text-align: center; font-weight: 600;
  position: relative; z-index: 1;
  line-height: 1.3;
}
.todo-empty {
  grid-column: 1 / -1;
  text-align: center; padding: 40px;
  color: var(--c-text-mute);
}
.todo-empty i { font-size: 40px; color: var(--c-success); margin-bottom: 10px; display: block }
.todo-total {
  color: var(--c-accent); font-size: 15px;
  font-family: 'Consolas', monospace;
}

/* —— 大屏模式 —— */
body.screen-mode .topbar { display: none }
body.screen-mode .wrap { max-width: 100%; margin: 0; padding: 14px }
body.screen-mode .screen-header { min-height: 270px }
body.screen-mode .screen-brand { font-size: 32px }
body.screen-mode .org-logo { height: 150px }
body.screen-mode .org-name { font-size: 34px }
body.screen-mode .org-addr-bar { font-size: 15px }
body.screen-mode .screen-clock-top .clock-time { font-size: 22px }
body.screen-mode .clock-date { font-size: 20px }
body.screen-mode .clock-face { width: 170px; height: 170px }
body.screen-mode .clock-num { font-size: 9px }
body.screen-mode .screen-left { left: 28px; gap: 6px }
body.screen-mode .screen-right { right: 28px; top: 18px; gap: 16px }
body.screen-mode .ring { width: 110px; height: 110px }
body.screen-mode .ring::before { width: 86px; height: 86px }
body.screen-mode .ring-num { font-size: 34px }
body.screen-mode .todo-label { font-size: 15px }
body.screen-mode .todo-grid-big { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 22px }
body.screen-mode .card h2 { font-size: 20px }
body.screen-mode #navSection { display: none }  /* 大屏隐藏导航,专注数据 */
body.screen-mode .copyright-footer { display: none }
body.screen-mode .slogan-strip { display: block }

/* ============================================================
   大屏科技感动画层
   ============================================================ */

/* —— 粒子背景 —— */
#particleBg {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: -1; pointer-events: none;
}

/* —— 网格背景 —— */
body::after {
  content: "";
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(59,130,246,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: -2;
  animation: gridShift 20s linear infinite;
}
@keyframes gridShift {
  0% { background-position: 0 0, 0 0 }
  100% { background-position: 48px 48px, 48px 48px }
}

/* —— 扫描线(独立层) —— */
.scan-line {
  position: fixed; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, rgba(59,130,246,.06), transparent);
  pointer-events: none;
  z-index: -1;
  animation: scanMove 6s linear infinite;
}
@keyframes scanMove {
  0% { top: -120px }
  100% { top: 100vh }
}

/* —— KPI 底部滚动条 —— */
.kpi-strip {
  background: linear-gradient(135deg, #ffffff, #ecf5fe);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 14px 0;
  margin-top: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(59,130,246,.1);
  position: relative;
}
.kpi-strip::before, .kpi-strip::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  width: 60px; z-index: 2; pointer-events: none;
}
.kpi-strip::before {
  left: 0;
  background: linear-gradient(to right, rgba(255,255,255,.95), transparent);
}
.kpi-strip::after {
  right: 0;
  background: linear-gradient(to left, rgba(255,255,255,.95), transparent);
}
.kpi-track {
  display: flex; gap: 32px;
  white-space: nowrap;
  animation: kpiScroll 40s linear infinite;
  width: max-content;
}
@keyframes kpiScroll {
  0% { transform: translateX(0) }
  100% { transform: translateX(-50%) }
}
.kpi-track:hover { animation-play-state: paused }
.kpi-item {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 24px;
  font-size: 14px;
  color: var(--c-text-dim);
  border-right: 1px solid rgba(59,130,246,.12);
}
.kpi-item i { color: var(--c-primary); font-size: 16px }
.kpi-label { color: var(--c-text-dim); font-size: 13px }
.kpi-num {
  font-size: 22px; font-weight: 800;
  font-family: 'Consolas', 'Courier New', monospace;
  background: var(--grad-primary);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: 4px;
}

/* 大屏模式 KPI 放大 */
body.screen-mode .kpi-strip { padding: 18px 0; margin-top: 24px }
body.screen-mode .kpi-item { font-size: 16px; gap: 14px }
body.screen-mode .kpi-num { font-size: 30px }

/* ============================================================
   大屏底部标语滚动条(医院维护管理标语)
   ============================================================ */
.slogan-strip {
  display: none;  /* 普通模式隐藏，大屏模式显示 */
  background: linear-gradient(135deg, #ffffff, #ecf5fe);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 14px 0;
  margin-top: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(59,130,246,.1);
  position: relative;
  outline: none;
}
.slogan-strip:hover,
.slogan-strip:focus-visible {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 2px rgba(59,130,246,.18), var(--shadow-lg);
}
.slogan-strip[data-tip]::after {
  content: attr(data-tip);
  position: absolute; right: 16px; top: 8px;
  z-index: 4;
  color: var(--c-accent);
  font-size: 12px;
  opacity: 0;
  transition: opacity .18s ease;
}
.slogan-strip:hover::after,
.slogan-strip:focus-visible::after { opacity: 1; }
.slogan-strip::before, .slogan-strip::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  width: 80px; z-index: 2; pointer-events: none;
}
.slogan-strip::before {
  left: 0;
  background: linear-gradient(to right, rgba(255,255,255,.95), transparent);
}
.slogan-strip::after {
  right: 0;
  background: linear-gradient(to left, rgba(255,255,255,.95), transparent);
}
.slogan-track {
  display: flex; gap: 48px;
  white-space: nowrap;
  animation: sloganScroll 50s linear infinite;
  width: max-content;
}
@keyframes sloganScroll {
  0% { transform: translateX(0) }
  100% { transform: translateX(-50%) }
}
.slogan-strip:hover .slogan-track,
.slogan-strip:focus-visible .slogan-track { animation-play-state: paused }
.slogan-item {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 24px;
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text-dim);
  border-right: 1px solid rgba(59,130,246,.12);
  letter-spacing: 1px;
  transition: color .18s ease, text-shadow .18s ease;
}
.slogan-strip:hover .slogan-item { color: var(--c-text); }
.slogan-strip:hover .slogan-item i {
  color: var(--c-accent);
  text-shadow: 0 0 12px rgba(34,211,238,.55);
}
.slogan-item i {
  color: var(--c-primary);
  font-size: 18px;
  -webkit-text-fill-color: var(--c-accent);
}
body.screen-mode .slogan-item { font-size: 18px }
body.screen-mode .slogan-item i { font-size: 20px }

@media (prefers-reduced-motion: reduce) {
  .slogan-track { animation: none; }
  .org-logo { transition: none; }
}

/* ============================================================
   大屏模式：恢复深蓝科技风（仅 TV 全屏时生效）
   ============================================================ */
body.screen-mode {
  --c-bg:        #0e1424;
  --c-bg-soft:   #141b2e;
  --c-surface:   #1a2340;
  --c-surface-2: #222d4f;
  --c-border:    #2d3a62;
  --c-border-2:  #3a4a7a;
  --c-text:      #e6ecff;
  --c-text-dim:  #97a5c8;
  --c-text-mute: #5c6a90;
  --c-accent:    #22d3ee;
}
body.screen-mode .screen-header { background: linear-gradient(135deg, rgba(26,35,64,.9), rgba(15,21,40,.9)); }
body.screen-mode .todo-card { background: linear-gradient(145deg, rgba(26,35,64,.8), rgba(20,27,46,.8)); }
body.screen-mode .card.todo-board { background: linear-gradient(135deg, rgba(26,35,64,.82), rgba(15,21,40,.88)); border-color: rgba(59,130,246,.22); box-shadow: 0 10px 40px rgba(0,0,0,.35); }
body.screen-mode .kpi-strip { background: linear-gradient(135deg, rgba(26,35,64,.9), rgba(15,21,40,.95)); }
body.screen-mode .kpi-strip::before { background: linear-gradient(to right, rgba(15,21,40,.95), transparent); }
body.screen-mode .kpi-strip::after { background: linear-gradient(to left, rgba(15,21,40,.95), transparent); }
body.screen-mode .slogan-strip { background: linear-gradient(135deg, rgba(26,35,64,.85), rgba(15,21,40,.9)); }
body.screen-mode .slogan-strip::before { background: linear-gradient(to right, rgba(15,21,40,.95), transparent); }
body.screen-mode .slogan-strip::after { background: linear-gradient(to left, rgba(15,21,40,.95), transparent); }
body.screen-mode .clock-rim { fill: rgba(8,15,35,.72); }
body.screen-mode .clock-face-bg { fill: rgba(15,23,42,.55); }
body.screen-mode .org-logo-wrap[data-tip]::after { background: rgba(15,21,40,.96); }
body.screen-mode .ring::before { background: #1a2340; }
body.screen-mode .ring.warn::before { background: #1a2340; }
body.screen-mode .ring.danger::before { background: #1a2340; }
body.screen-mode .todo-card.danger .todo-label { color: #fca5a5; }
body.screen-mode .todo-card.warn .todo-label { color: #fcd34d; }