/* 云匣 · 资源同步 — 暖色纸感 / 陶土红，无蓝紫 */
:root{
  --paper:#f6f1e7;
  --paper-2:#fffdf8;
  --ink:#1d1a16;
  --ink-2:#3f3a32;
  --muted:#6f665a;
  --line:#e2d8c8;
  --line-strong:#d2c5b1;
  --accent:#a8452b;
  --accent-ink:#8c3a23;
  --accent-soft:#f1e3d9;
  --moss:#55613f;
  --gold:#a77b22;
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;
  --sans:"Inter","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --mono:"SFMono-Regular","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:10px;
  --shadow:0 1px 0 rgba(29,26,22,.04);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:15px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
  position:relative;
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.035;
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px}
.muted{color:var(--muted)}
.ta-r{text-align:right}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}

/* ---------- 顶栏 ---------- */
.bar{
  position:sticky;top:0;z-index:20;
  background:rgba(246,241,231,.92);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(120%) blur(6px);
}
.bar-inner{display:flex;align-items:center;gap:28px;height:66px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand-mark{color:var(--ink);display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--line-strong);border-radius:8px;background:var(--paper-2)}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{font-family:var(--serif);font-size:17px;letter-spacing:.14em}
.brand-text em{font-style:normal;font-size:9.5px;letter-spacing:.22em;color:var(--muted)}
.nav{display:flex;gap:24px;margin-left:8px}
.nav a{font-size:13.5px;color:var(--muted);padding:4px 0;position:relative}
.nav a:hover{color:var(--ink)}
.nav a.is-current{color:var(--ink)}
.nav a.is-current::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--accent)}
.bar-actions{margin-left:auto;display:flex;gap:10px}

.btn{
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--ink);
  padding:8px 16px;border-radius:7px;
  font-size:13px;letter-spacing:.02em;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
.btn:hover{border-color:var(--ink-2)}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-solid:hover{background:#2a2620;border-color:#2a2620}
.btn-ghost:hover{background:var(--paper-2)}
.btn-block{width:100%;padding:11px 16px;font-size:14px}
.btn[disabled]{opacity:.6;cursor:default}

/* ---------- 首屏 ---------- */
.intro{
  display:grid;grid-template-columns:1.45fr .9fr;gap:40px;align-items:center;
  padding:74px 0 54px;
}
.eyebrow{
  margin:0 0 18px;font-size:10.5px;letter-spacing:.24em;color:var(--muted);
  text-transform:uppercase;
}
.intro h1{
  margin:0 0 10px;font-family:var(--serif);font-weight:600;
  font-size:clamp(30px,4.2vw,46px);letter-spacing:.04em;line-height:1.2;
}
.stamp{
  margin:6px 0 0;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(22px,3vw,34px);letter-spacing:.04em;color:var(--ink);
  transition:color .3s ease;
}
.stamp.is-flash{color:var(--accent)}
.stamp-meta{margin:14px 0 0;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sep{color:var(--line-strong)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--moss);display:inline-block;box-shadow:0 0 0 4px rgba(85,97,63,.10)}
.dot.is-busy{background:var(--accent);box-shadow:0 0 0 4px rgba(168,69,43,.12);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.intro-gauge{position:relative;display:grid;place-items:center;justify-self:center}
.gauge{transform:rotate(-90deg)}
.gauge-track{fill:none;stroke:var(--line);stroke-width:9}
.gauge-value{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset .9s cubic-bezier(.2,.7,.2,1)}
.gauge-label{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px}
.gauge-num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:30px;line-height:1}
.gauge-unit{font-family:var(--mono);font-size:11px;color:var(--muted)}
.gauge-cap{margin-top:6px;font-size:10.5px;letter-spacing:.18em;color:var(--muted)}

/* ---------- 容量条 ---------- */
.capacity{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:22px 0 24px;margin-bottom:44px;
}
.capacity-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.label{font-size:10.5px;letter-spacing:.22em;color:var(--muted);text-transform:uppercase}
.capacity-num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14px}
.capacity-num b{font-weight:600;font-size:16px}
.meter{position:relative;height:9px;background:var(--paper-2);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.meter-fill{height:100%;width:50%;background:var(--accent);border-radius:3px 0 0 3px;transition:width .9s cubic-bezier(.2,.7,.2,1)}
.meter-ticks{position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),var(--line-strong) calc(25% - 1px) 25%);opacity:.7;pointer-events:none}
.meter-foot{display:flex;justify-content:space-between;margin-top:9px;font-size:11.5px;color:var(--muted)}

/* ---------- 指标 ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:44px}
.stat{background:var(--paper-2);padding:20px 22px;display:flex;flex-direction:column;gap:6px}
.stat-num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:24px;font-weight:500;letter-spacing:.01em;line-height:1.2}
.stat-note{font-size:11.5px;color:var(--muted)}

/* ---------- 面板 ---------- */
.panel{border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2);box-shadow:var(--shadow);margin-bottom:26px;overflow:hidden}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:18px 22px;border-bottom:1px solid var(--line)}
.panel-head h2{margin:0;font-family:var(--serif);font-weight:600;font-size:17px;letter-spacing:.06em}
.panel-note{font-size:11.5px;color:var(--muted)}
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{
  text-align:left;font-weight:normal;font-size:10.5px;letter-spacing:.18em;color:var(--muted);
  text-transform:uppercase;padding:12px 22px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.table td{padding:14px 22px;border-bottom:1px solid var(--line);white-space:nowrap}
.table tr:last-child td{border-bottom:0}
.table tbody tr{transition:background .15s ease}
.table tbody tr:hover{background:#fbf7ef}
.table tr[data-self] td:first-child{color:var(--accent-ink);font-weight:500}
.table tr[data-self] td:first-child::after{content:" · 本节点";font-size:10.5px;color:var(--muted);font-family:var(--sans);letter-spacing:.02em}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;padding:2px 9px;border-radius:999px;border:1px solid transparent}
.pill::before{content:"";width:5px;height:5px;border-radius:50%}
.pill-ok{color:var(--moss);background:rgba(85,97,63,.08);border-color:rgba(85,97,63,.18)}
.pill-ok::before{background:var(--moss)}
.pill-busy{color:var(--accent-ink);background:var(--accent-soft);border-color:rgba(168,69,43,.22)}
.pill-busy::before{background:var(--accent);animation:pulse 1.6s ease-in-out infinite}

/* ---------- 活动 ---------- */
.log{list-style:none;margin:0;padding:8px 22px 18px}
.log li{display:flex;gap:18px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13px}
.log li:last-child{border-bottom:0}
.log-time{font-family:var(--mono);font-size:12px;color:var(--muted);flex:0 0 62px}
.log-text{color:var(--ink-2)}
.log li.is-new{animation:rise .45s ease}
@keyframes rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- 页脚 ---------- */
.foot{border-top:1px solid var(--line);margin-top:52px;padding:26px 0 40px}
.foot-inner{display:flex;justify-content:space-between;gap:16px;font-size:11.5px;color:var(--muted);flex-wrap:wrap}
.foot-credit b{color:var(--ink-2);font-weight:600}

/* ---------- 登录弹层 ---------- */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px}
.modal[hidden]{display:none}
.modal-mask{position:absolute;inset:0;background:rgba(29,26,22,.46)}
.modal-card{
  position:relative;width:min(380px,100%);background:var(--paper-2);
  border:1px solid var(--line-strong);border-radius:12px;
  padding:26px 26px 22px;box-shadow:0 24px 60px rgba(29,26,22,.22);
  animation:pop .26s cubic-bezier(.2,.8,.2,1);
}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.modal-card.is-shake{animation:shake .34s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.modal-head h3{margin:0;font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:.06em}
.modal-x{border:0;background:transparent;font-size:22px;line-height:1;color:var(--muted);padding:2px 6px;border-radius:6px}
.modal-x:hover{color:var(--ink);background:var(--paper)}
.modal-sub{margin:2px 0 18px;font-size:12.5px;color:var(--muted)}
.field{display:block;margin-bottom:13px}
.field span{display:block;font-size:11px;letter-spacing:.16em;color:var(--muted);margin-bottom:6px;text-transform:uppercase}
.field input{
  width:100%;padding:10px 12px;border:1px solid var(--line-strong);border-radius:7px;
  background:var(--paper);color:var(--ink);font:14px/1.4 var(--sans);outline:none;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(168,69,43,.12)}
.form-error{margin:0 0 12px;font-size:12px;color:var(--accent-ink)}
.modal-foot{margin:14px 0 0;font-size:11px;color:var(--muted);text-align:center}

/* ---------- 响应式 ---------- */
@media (max-width:880px){
  .nav{display:none}
  .intro{grid-template-columns:1fr;padding:48px 0 34px;gap:26px}
  .intro-gauge{justify-self:start}
  .stats{grid-template-columns:repeat(2,1fr)}
  .capacity{margin-bottom:32px}
  .bar-inner{height:60px}
}
@media (max-width:520px){
  .wrap{padding:0 18px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{padding:16px 16px}
  .bar-actions .btn-ghost{display:none}
  .panel-head{flex-direction:column;gap:4px}
  .stamp{font-size:22px}
  .meter-foot span:nth-child(2){display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}