:root{
  --page:#f4f6fb;
  --surface:#ffffff;
  --surface-soft:#f8fafc;
  --surface-muted:#eef3f7;
  --text:#162033;
  --muted:#66758f;
  --soft:#97a3b8;
  --line:#dbe4ef;
  --line-strong:#c8d5e6;
  --shadow:0 18px 42px rgba(24,39,75,.08);
  --radius:8px;
  --radius-lg:18px;
  --teal:#0f8f87;
  --teal-soft:rgba(15,143,135,.12);
  --blue:#3b82f6;
  --blue-soft:rgba(59,130,246,.12);
  --amber:#f59e0b;
  --amber-soft:rgba(245,158,11,.14);
  --coral:#ef4444;
  --coral-soft:rgba(239,68,68,.12);
  --green:#10b981;
  --green-soft:rgba(16,185,129,.13);
  --slate:#64748b;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.92), rgba(255,255,255,0) 28%),
    linear-gradient(180deg, #fbfdff 0%, #f4f6fb 28%, #f1f5f9 100%);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

button,
input,
select{
  font:inherit;
}

a{
  color:inherit;
  text-decoration:none;
}

.skip{
  position:absolute;
  left:-999px;
  top:12px;
  z-index:20;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
}

.skip:focus{left:12px}

.page-shell{
  width:min(100%, 1540px);
  margin:0 auto;
  padding:14px 18px 22px;
}

.topbar{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 2px;
}

.topbar-left{
  min-width:0;
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:15px;
  font-weight:700;
}

.brand-mark{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#fff;
  background:#171923;
  font-size:13px;
}

.crumbs{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-size:14px;
}

.crumbs a{
  color:var(--muted);
}

.crumbs a:hover,
.crumbs a:focus-visible{
  color:var(--text);
  outline:none;
}

.topbar-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.auth-user{
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}

.icon-button,
.profile-button,
.toolbar-button,
.ghost-button,
.primary-button{
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  cursor:pointer;
  transition:border-color .18s ease, transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.icon-button:hover,
.profile-button:hover,
.toolbar-button:hover,
.ghost-button:hover,
.primary-button:hover{
  transform:translateY(-1px);
  border-color:var(--line-strong);
}

.icon-button{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:999px;
}

.icon-button.subtle{
  width:34px;
  height:34px;
  color:var(--muted);
}

.profile-button{
  min-width:58px;
  height:40px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
}

.chevron{
  width:7px;
  height:7px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px);
}

.main-layout{
  display:block;
}

.workspace{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.hero-panel,
.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
}

.hero-panel{
  padding:20px 22px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.hero-copy{
  display:flex;
  align-items:flex-start;
  gap:16px;
}

.hero-mark{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(180deg, #ff625f, #ef4444);
  box-shadow:0 14px 28px rgba(239,68,68,.22);
}

.hero-copy h1{
  margin:0;
  font-size:24px;
  line-height:1.18;
}

.hero-copy p{
  margin:8px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.toolbar-chip,
.toolbar-button,
.ghost-button,
.primary-button,
.filter-field select,
.filter-field input,
.mini-select select{
  height:40px;
  border-radius:10px;
}

.toolbar-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  border:1px solid var(--line);
  background:var(--surface);
}

.toolbar-chip input,
.toolbar-chip select{
  border:0;
  background:transparent;
  color:var(--text);
  outline:none;
}

.toolbar-select{
  padding-right:8px;
}

.toolbar-button,
.ghost-button,
.primary-button{
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.ghost-button{
  background:var(--surface-soft);
}

.primary-button{
  border-color:rgba(15,143,135,.28);
  color:#fff;
  background:linear-gradient(180deg, #0e968e, #0b7b75);
  box-shadow:0 12px 24px rgba(15,143,135,.18);
}

.metric-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
}

.metric-card{
  min-height:96px;
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:16px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
}

.metric-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid transparent;
}

.metric-icon.blue{color:var(--blue);background:var(--blue-soft);border-color:rgba(59,130,246,.18)}
.metric-icon.green{color:var(--green);background:var(--green-soft);border-color:rgba(16,185,129,.18)}
.metric-icon.amber{color:var(--amber);background:var(--amber-soft);border-color:rgba(245,158,11,.18)}
.metric-icon.coral{color:var(--coral);background:var(--coral-soft);border-color:rgba(239,68,68,.18)}

.metric-label{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

.metric-value{
  display:block;
  margin-top:4px;
  font-size:18px;
  line-height:1.2;
}

.metric-sub{
  margin:6px 0 0;
  color:var(--muted);
  font-size:13px;
}

.analytics-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  grid-auto-rows:350px;
  gap:16px;
  align-items:stretch;
}

.span-2{
  grid-column:span 1;
}

.panel{
  padding:14px 16px 16px;
}

.analytics-grid > .panel{
  height:100%;
  display:flex;
  flex-direction:column;
}

.panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
}

.panel-head h2{
  margin:0;
  font-size:15px;
  line-height:1.35;
}

.panel-head p,
.panel-meta,
.detail-subtitle{
  margin:4px 0 0;
  color:var(--muted);
  font-size:12px;
}

.panel-meta{
  margin:0;
  white-space:nowrap;
}

.chart-shell{
  min-height:0;
  flex:1;
}

.line-chart{
  min-height:0;
}

.legend-row{
  margin-top:6px;
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:12px;
}

.legend-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.legend-dot{
  width:10px;
  height:10px;
  border-radius:999px;
}

.worker-panel{
  padding-bottom:10px;
}

.worker-list{
  flex:1;
}

.worker-head,
.worker-row{
  display:grid;
  grid-template-columns:76px 88px 96px 1fr;
  align-items:center;
  gap:10px;
}

.worker-head{
  padding:6px 4px 10px;
  color:var(--muted);
  font-size:12px;
}

.worker-list{
  display:flex;
  flex-direction:column;
}

.worker-row{
  min-height:56px;
  padding:0 4px;
  border-top:1px solid var(--line);
  font-size:14px;
}

.worker-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
}

.worker-status::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:currentColor;
}

.worker-status.online{color:var(--teal)}
.worker-status.offline{color:var(--slate)}
.worker-status.completed{color:var(--blue)}
.worker-status.abnormal{color:var(--coral)}

.filter-panel{
  padding:14px 16px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}

.filters{
  flex:1;
  display:grid;
  grid-template-columns:1.3fr repeat(3, minmax(0, .7fr));
  gap:14px;
}

.filter-field{
  display:flex;
  flex-direction:column;
  gap:8px;
  color:var(--muted);
  font-size:12px;
}

.filter-field select,
.filter-field input{
  width:100%;
  padding:0 12px;
  border:1px solid var(--line);
  background:var(--surface-soft);
  color:var(--text);
  outline:none;
}

.mini-select{
  display:inline-flex;
  align-items:center;
}

.mini-select select{
  min-width:96px;
  padding:0 36px 0 12px;
  border:1px solid var(--line);
  background:var(--surface-soft);
  color:var(--text);
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 17px,
    calc(100% - 13px) 17px;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}

.filter-range .range-inputs{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:8px;
}

.filter-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.content-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.65fr) 378px;
  gap:16px;
  align-items:start;
}

.table-panel{
  padding:0;
  overflow:hidden;
}

.table-wrap{
  overflow:auto;
}

.table-head,
.table-row{
  min-width:960px;
  display:grid;
  grid-template-columns:38px minmax(180px, 1.15fr) 112px 86px 86px 82px 112px 112px 136px;
  align-items:center;
  gap:10px;
}

.table-head{
  padding:14px 18px;
  color:var(--muted);
  font-size:12px;
  background:linear-gradient(180deg, #f7fafc, #f2f6fa);
}

.table-body{
  display:flex;
  flex-direction:column;
}

.table-row{
  min-height:62px;
  padding:0 18px;
  border-top:1px solid var(--line);
  font-size:13px;
  cursor:pointer;
}

.table-row:hover{
  background:rgba(15,143,135,.04);
}

.table-row.is-selected{
  background:rgba(15,143,135,.07);
}

.select-mark{
  width:14px;
  height:14px;
  border:1.5px solid var(--line-strong);
  border-radius:999px;
}

.table-row.is-selected .select-mark{
  border-color:var(--teal);
  box-shadow:inset 0 0 0 3px rgba(15,143,135,.16);
  background:var(--teal);
}

.title-cell{
  font-weight:600;
  line-height:1.45;
}

.muted{
  color:var(--muted);
}

.score-badge,
.status-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:52px;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

.score-badge.high{
  color:var(--coral);
  background:var(--coral-soft);
  border-color:rgba(239,68,68,.16);
}

.score-badge.medium{
  color:#d97706;
  background:rgba(245,158,11,.14);
  border-color:rgba(245,158,11,.18);
}

.score-badge.low{
  color:#8a6a27;
  background:rgba(201,139,34,.14);
  border-color:rgba(201,139,34,.18);
}

.status-chip.done{
  color:var(--teal);
  background:var(--teal-soft);
  border-color:rgba(15,143,135,.16);
}

.status-chip.pending{
  color:var(--slate);
  background:rgba(100,116,139,.12);
  border-color:rgba(100,116,139,.16);
}

.row-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.mini-icon-button{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
  color:var(--muted);
  cursor:pointer;
}

.mini-icon-button:hover{
  color:var(--text);
  border-color:var(--line-strong);
}

.table-footer{
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-top:1px solid var(--line);
  background:var(--surface);
}

.pager,
.page-numbers,
.pager-meta{
  display:flex;
  align-items:center;
  gap:10px;
}

.pager-button,
.page-number{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  color:var(--muted);
  cursor:pointer;
}

.page-ellipsis{
  min-width:20px;
  color:var(--soft);
  font-size:13px;
  text-align:center;
}

.page-number.is-active{
  color:var(--teal);
  border-color:rgba(15,143,135,.26);
  background:rgba(15,143,135,.08);
}

.detail-panel{
  position:sticky;
  top:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.detail-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.detail-head h2{
  margin:0;
  font-size:16px;
}

.detail-head p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}

.detail-card{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.note-preview{
  display:grid;
  grid-template-columns:112px minmax(0, 1fr);
  gap:14px;
}

.detail-cover{
  min-height:112px;
  border-radius:14px;
  border:1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(15,143,135,.18), rgba(59,130,246,.08)),
    linear-gradient(180deg, #dce6f5, #f8fafc);
  position:relative;
  overflow:hidden;
}

.detail-cover::before,
.detail-cover::after{
  content:"";
  position:absolute;
  border-radius:999px;
  background:rgba(255,255,255,.74);
}

.detail-cover::before{
  width:54px;
  height:54px;
  left:12px;
  top:18px;
}

.detail-cover::after{
  width:78px;
  height:10px;
  left:18px;
  bottom:18px;
}

.preview-copy h3{
  margin:0;
  font-size:15px;
  line-height:1.45;
}

.preview-copy p{
  margin:8px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
}

.preview-link-row{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:12px;
}

.preview-link-row a{
  color:var(--blue);
  font-weight:600;
}

.detail-section{
  padding-top:2px;
}

.detail-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}

.detail-section h3{
  margin:0;
  font-size:14px;
}

.detail-text,
.basis-list,
.comment-list{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
}

.detail-double{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.comment-list,
.basis-list{
  padding-left:18px;
}

.detail-count{
  color:var(--soft);
  font-size:12px;
}

.score-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.score-pill{
  min-height:72px;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  border-radius:14px;
  border:1px solid transparent;
}

.score-pill span{
  font-size:12px;
}

.score-pill strong{
  font-size:24px;
  line-height:1.1;
}

.score-pill.accent-coral{
  color:var(--coral);
  background:var(--coral-soft);
  border-color:rgba(239,68,68,.14);
}

.score-pill.accent-amber{
  color:#d97706;
  background:rgba(245,158,11,.14);
  border-color:rgba(245,158,11,.18);
}

.detail-foot{
  padding-top:2px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
  font-size:12px;
}

.toast{
  position:fixed;
  right:18px;
  bottom:18px;
  max-width:320px;
  padding:12px 14px;
  border-radius:12px;
  color:#fff;
  background:rgba(22,32,51,.92);
  box-shadow:var(--shadow);
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}

.toast.is-visible{
  opacity:1;
  transform:translateY(0);
}

.icon,
.inline-icon{
  position:relative;
  display:block;
  width:18px;
  height:18px;
}

.icon-search::before{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  left:1px;
  top:1px;
  border:1.8px solid currentColor;
  border-radius:50%;
}

.icon-search::after{
  content:"";
  position:absolute;
  width:7px;
  height:1.8px;
  right:0;
  bottom:2px;
  background:currentColor;
  transform:rotate(45deg);
  border-radius:999px;
}

.icon-bell::before{
  content:"";
  position:absolute;
  left:3px;
  right:3px;
  top:2px;
  bottom:4px;
  border:1.8px solid currentColor;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
}

.icon-bell::after{
  content:"";
  position:absolute;
  left:7px;
  bottom:1px;
  width:4px;
  height:4px;
  border-radius:999px;
  background:currentColor;
}

.icon-target{
  border:2px solid currentColor;
  border-radius:50%;
}

.icon-target::before{
  content:"";
  position:absolute;
  inset:4px;
  border:2px solid currentColor;
  border-radius:50%;
}

.icon-target::after{
  content:"";
  position:absolute;
  left:7px;
  top:7px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:currentColor;
}

.icon-doc{
  border:2px solid currentColor;
  border-radius:4px;
}

.icon-doc::before,
.icon-doc::after{
  content:"";
  position:absolute;
  left:4px;
  right:4px;
  height:2px;
  background:currentColor;
  border-radius:999px;
}

.icon-doc::before{top:5px}
.icon-doc::after{top:10px}

.icon-check{
  border:2px solid currentColor;
  border-radius:4px;
}

.icon-check::before{
  content:"";
  position:absolute;
  left:4px;
  top:5px;
  width:7px;
  height:4px;
  border-left:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(-45deg);
}

.icon-monitor{
  border:2px solid currentColor;
  border-radius:3px;
}

.icon-monitor::before{
  content:"";
  position:absolute;
  left:7px;
  bottom:-5px;
  width:4px;
  height:4px;
  background:currentColor;
  border-radius:1px;
}

.icon-monitor::after{
  content:"";
  position:absolute;
  left:4px;
  right:4px;
  bottom:-3px;
  height:2px;
  background:currentColor;
  border-radius:999px;
}

.icon-crown::before{
  content:"";
  position:absolute;
  left:1px;
  right:1px;
  bottom:2px;
  height:9px;
  border:2px solid currentColor;
  border-radius:2px 2px 5px 5px;
}

.icon-crown::after{
  content:"";
  position:absolute;
  left:2px;
  top:2px;
  width:0;
  height:0;
  border-left:3px solid transparent;
  border-right:3px solid transparent;
  border-bottom:8px solid currentColor;
  box-shadow:5px -1px 0 0 currentColor, 10px 1px 0 0 currentColor;
}

.icon-refresh::before{
  content:"";
  position:absolute;
  inset:2px;
  border:1.8px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
}

.icon-refresh::after{
  content:"";
  position:absolute;
  right:0;
  top:1px;
  width:5px;
  height:5px;
  border-top:1.8px solid currentColor;
  border-right:1.8px solid currentColor;
  transform:rotate(20deg);
}

.icon-download::before{
  content:"";
  position:absolute;
  left:8px;
  top:1px;
  width:2px;
  height:10px;
  background:currentColor;
  border-radius:999px;
}

.icon-download::after{
  content:"";
  position:absolute;
  left:5px;
  top:8px;
  width:8px;
  height:8px;
  border-left:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(-45deg);
}

.icon-close::before,
.icon-close::after{
  content:"";
  position:absolute;
  left:8px;
  top:2px;
  width:2px;
  height:14px;
  background:currentColor;
  border-radius:999px;
}

.icon-close::before{transform:rotate(45deg)}
.icon-close::after{transform:rotate(-45deg)}

svg{
  width:100%;
  height:100%;
  display:block;
}

@media (max-width:1380px){
  .analytics-grid{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-rows:350px;
  }

  .worker-panel{
    grid-column:1 / -1;
  }

  .content-grid{
    grid-template-columns:1fr;
  }

  .detail-panel{
    position:static;
  }
}

@media (max-width:1100px){
  .metric-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .filters{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .filter-panel{
    flex-direction:column;
    align-items:stretch;
  }
}

@media (max-width:820px){
  .page-shell{
    padding:12px;
  }

  .topbar,
  .hero-panel{
    flex-direction:column;
    align-items:flex-start;
  }

  .hero-actions,
  .topbar-actions{
    width:100%;
    justify-content:flex-start;
  }

  .metric-grid,
  .filters{
    grid-template-columns:1fr;
  }

  .analytics-grid{
    grid-template-columns:1fr;
    grid-auto-rows:auto;
  }

  .worker-head,
  .worker-row{
    grid-template-columns:68px 84px 90px 1fr;
  }

  .note-preview,
  .score-section{
    grid-template-columns:1fr;
  }

  .detail-cover{
    min-height:180px;
  }

  .table-footer{
    flex-direction:column;
    align-items:flex-start;
  }
}


:root{
  --xhs-gray:#cbd5e1;
  --xhs-gray-soft:rgba(148,163,184,.16);
}

.dashboard{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.xhs-metric-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

.xhs-metric-card{
  align-items:center;
  min-height:128px;
  padding:14px 16px;
  gap:14px;
}

.xhs-metric-card .metric-icon{
  flex:0 0 auto;
}

.metric-main{
  flex:1;
  min-width:0;
}

.metric-value-row{
  margin-top:4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.metric-desc{
  margin:6px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}

.metric-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:58px;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  color:var(--coral);
  background:var(--coral-soft);
  border:1px solid rgba(239,68,68,.16);
  font-size:12px;
  font-weight:700;
}

.metric-badge-green{
  color:var(--green);
  background:var(--green-soft);
  border-color:rgba(16,185,129,.16);
}

.metric-bar-row{
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:10px;
}

.metric-bar{
  height:8px;
  margin-top:0;
  flex:1;
  overflow:hidden;
  border-radius:999px;
  background:var(--surface-muted);
}

.metric-percent{
  flex:0 0 auto;
  color:var(--muted);
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}

.metric-bar-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #ff7b7b, #ef4444);
}

.metric-bar-fill-blue{
  background:linear-gradient(90deg, #60a5fa, #3b82f6);
}

.metric-bar-fill-green{
  background:linear-gradient(90deg, #34d399, #10b981);
}

.metric-bar-fill-amber{
  background:linear-gradient(90deg, #fbbf24, #f59e0b);
}

.xhs-content-grid{
  display:block;
}

.xhs-main-column{
  display:grid;
  gap:16px;
}

.xhs-note-filter-panel{
  margin-top:4px;
}

.xhs-note-filters{
  grid-template-columns:repeat(2, minmax(220px, 320px));
}

.xhs-note-content-grid{
  grid-template-columns:minmax(0, 1.65fr) 378px;
  align-items:start;
}

.xhs-note-content-grid .table-head,
.xhs-note-content-grid .table-row{
  min-width:0;
  grid-template-columns:30px minmax(168px, 1.08fr) 96px 88px 72px 72px 72px 90px 90px 88px;
  gap:8px;
}

.xhs-note-content-grid .table-head{
  padding:12px 14px;
}

.xhs-note-content-grid .table-row{
  padding:0 14px;
}

.xhs-note-content-grid .title-cell{
  min-width:0;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.xhs-note-content-grid .table-row > span,
.xhs-note-content-grid .table-head > span{
  min-width:0;
}

.xhs-note-content-grid .table-row > span:not(.title-cell){
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.xhs-note-content-grid .detail-panel{
  max-width:378px;
}

.panel-span-full{
  width:100%;
}

.panel-pair{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(320px, .8fr);
  gap:16px;
  align-items:stretch;
}

.xhs-panel-head{
  margin-bottom:14px;
}

.xhs-panel-head h2,
.xhs-panel-head h3{
  margin:0;
  font-size:16px;
  line-height:1.35;
}

.xhs-panel-head p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
}

.panel-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.mini-button{
  height:40px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface-soft);
  color:var(--text);
  cursor:pointer;
  transition:border-color .18s ease, transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.mini-button:hover{
  transform:translateY(-1px);
  border-color:var(--line-strong);
}

.mini-button.primary{
  border-color:rgba(15,143,135,.28);
  color:#fff;
  background:linear-gradient(180deg, #0e968e, #0b7b75);
  box-shadow:0 12px 24px rgba(15,143,135,.18);
}

.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(15,23,42,.24);
  backdrop-filter:blur(8px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, visibility .18s ease;
}

.modal-backdrop.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.task-modal{
  width:min(720px, 100%);
  max-height:min(86vh, 900px);
  overflow:auto;
  padding:20px 20px 18px;
  border:1px solid rgba(203,213,225,.88);
  border-radius:20px;
  background:rgba(255,255,255,.96);
  box-shadow:0 32px 80px rgba(15,23,42,.18);
}

.task-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.task-modal-head h2{
  margin:0;
  font-size:20px;
  line-height:1.3;
}

.task-modal-head p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
}

.modal-close{
  width:36px;
  height:36px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface-soft);
  color:var(--muted);
  font-size:24px;
  line-height:1;
  cursor:pointer;
}

.task-form{
  display:grid;
  gap:18px;
}

.task-form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px 16px;
}

.task-field{
  display:grid;
  gap:8px;
}

.task-field-full{
  grid-column:1 / -1;
}

.task-field-label{
  color:var(--text);
  font-size:13px;
  font-weight:700;
}

.task-field input,
.task-field select{
  width:100%;
  height:42px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--text);
  font-size:13px;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}

.task-field input:focus,
.task-field select:focus{
  border-color:rgba(15,143,135,.44);
  box-shadow:0 0 0 4px rgba(15,143,135,.10);
}

.is-hidden{
  display:none !important;
}

.upload-shell{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  padding:10px 12px;
  border:1px dashed rgba(148,163,184,.8);
  border-radius:14px;
  background:var(--surface-soft);
  cursor:pointer;
}

.upload-shell input{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}

.upload-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:30px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(15,143,135,.10);
  color:var(--teal);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

.upload-filename{
  min-width:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
  word-break:break-all;
}

.field-hint,
.task-form-tip{
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
}

.task-form-tip{
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-soft);
}

.task-form-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

.task-note{
  margin-bottom:14px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--muted);
  background:var(--surface-soft);
  font-size:13px;
}

.table-shell{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:14px;
}

table{
  width:100%;
  min-width:1120px;
  border-collapse:collapse;
}

thead{
  background:linear-gradient(180deg, #f7fafc, #f2f6fa);
}

th,
td{
  padding:14px 16px;
  text-align:left;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
  font-size:13px;
}

.metric-number-cell{
  text-align:center;
  font-variant-numeric:tabular-nums;
}

th{
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

tbody tr:last-child td{
  border-bottom:none;
}

.empty-cell{
  color:var(--muted);
  text-align:center;
  padding:28px 16px;
}

tbody tr:hover{
  background:rgba(15,143,135,.04);
}

.task-name{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.task-name strong{
  font-size:13px;
}

.task-name span{
  color:var(--muted);
  font-size:12px;
}

.tag,
.status-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

.tag.keyword{
  color:#d97706;
  background:rgba(245,158,11,.14);
  border-color:rgba(245,158,11,.18);
}

.tag.author{
  color:var(--blue);
  background:var(--blue-soft);
  border-color:rgba(59,130,246,.18);
}

.tag.import{
  color:var(--teal);
  background:var(--teal-soft);
  border-color:rgba(15,143,135,.18);
}

.status-tag{
  gap:8px;
}

.status-tag::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:currentColor;
}

.status-pending{
  color:var(--slate);
  background:rgba(100,116,139,.12);
  border-color:rgba(100,116,139,.16);
}

.status-running{
  color:#d97706;
  background:rgba(245,158,11,.14);
  border-color:rgba(245,158,11,.18);
}

.status-complete{
  color:var(--teal);
  background:var(--teal-soft);
  border-color:rgba(15,143,135,.16);
}

.status-failed{
  color:var(--coral);
  background:var(--coral-soft);
  border-color:rgba(239,68,68,.16);
}

.ops{
  display:flex;
  align-items:center;
  gap:8px;
}

.ops .icon-button{
  width:34px;
  min-width:34px;
  height:34px;
  padding:0;
  border-radius:8px;
}

.table-icon{
  position:relative;
  display:block;
  width:16px;
  height:16px;
  color:var(--muted);
}

.icon-edit::before{
  content:"";
  position:absolute;
  left:2px;
  top:8px;
  width:11px;
  height:2px;
  background:currentColor;
  transform:rotate(-45deg);
  border-radius:999px;
}

.icon-edit::after{
  content:"";
  position:absolute;
  right:0;
  top:2px;
  width:4px;
  height:4px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:rotate(-45deg);
}

.icon-delete::before{
  content:"";
  position:absolute;
  left:3px;
  right:3px;
  top:5px;
  bottom:2px;
  border:1.8px solid currentColor;
  border-top:none;
  border-radius:2px;
}

.icon-delete::after{
  content:"";
  position:absolute;
  left:2px;
  right:2px;
  top:3px;
  height:2px;
  background:currentColor;
  border-radius:999px;
  box-shadow:4px -2px 0 -1px currentColor, -4px -2px 0 -1px currentColor;
}

.table-progress-cell{
  min-width:180px;
}

.table-progress-meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
  color:var(--muted);
  font-size:11px;
  white-space:nowrap;
}

.table-progress-track{
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:var(--surface-muted);
}

.table-progress-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #34d399, #0f8f87);
}

.table-progress-fill.is-done{
  background:linear-gradient(90deg, #14b8a6, #0f8f87);
}

.table-progress-fill.is-pending{
  background:linear-gradient(90deg, #cbd5e1, #94a3b8);
}

.table-progress-fill.is-risk{
  background:linear-gradient(90deg, #f59e0b, #ef4444);
}

.health-item{
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-soft);
}

.chart-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.chart-head strong{
  font-size:14px;
}

.legend{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:12px;
}

.legend-centered{
  justify-content:center;
}

.detail-daily-legend{
  margin-top:10px;
}

.legend span{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.legend span::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--legend-color);
}

.chart-wrap{
  min-height:220px;
}

.daily-chart{
  height:360px;
}

.small-trend{
  height:220px;
}

.trend-card-chart{
  height:240px;
}

.adaptive-trend-panel{
  min-height:auto;
}

.adaptive-trend-panel .chart-wrap{
  flex:none;
  min-height:240px;
}

.trend-legend{
  margin-top:10px;
}

.health-list{
  display:grid;
  gap:12px;
}

.health-item{
  display:grid;
  grid-template-columns:1fr auto auto auto;
  align-items:center;
  gap:12px;
}

.health-item strong{
  display:block;
  font-size:14px;
}

.health-item > div:first-child{
  display:flex;
  align-items:center;
  gap:18px;
  align-self:center;
}

.health-inline-text{
  color:var(--muted);
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}

.health-metric{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-width:96px;
  align-self:center;
}

.health-metric-label{
  color:var(--muted);
  font-size:11px;
  line-height:1;
}

.health-metric strong{
  color:var(--text);
  font-size:13px;
  line-height:1.2;
  font-weight:700;
}


.health-item .status-tag{
  align-self:center;
}

.footer-note{
  color:var(--muted);
  font-size:12px;
  text-align:right;
}

.muted{
  color:var(--muted);
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100%;
}

svg{
  width:100%;
  height:100%;
  display:block;
}

@media (max-width:1380px){
  .xhs-metric-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .xhs-content-grid{
    display:block;
  }

  .xhs-note-content-grid{
    grid-template-columns:1fr;
  }

  .panel-pair{
    grid-template-columns:1fr;
  }
}

@media (max-width:820px){
  .xhs-metric-grid,
  .table-progress-meta{
    grid-template-columns:1fr;
  }

  .xhs-note-filters{
    grid-template-columns:1fr;
  }

  .task-modal{
    padding:18px 16px 16px;
  }

  .task-form-grid{
    grid-template-columns:1fr;
  }

  .metric-value-row,
  .chart-head,
  .health-item{
    grid-template-columns:1fr;
    flex-direction:column;
    align-items:flex-start;
  }

  .health-item{
    display:grid;
  }
}