:root{
  --bg:#07101b;
  --panel:#0a1624;
  --panel-hover:#0d1d2d;
  --line:#1b3044;
  --text:#e8f2fc;
  --muted:#8296ac;
  --cyan:#38e1ff;
  --green:#3ddc97;
  --gold:#ffc24b;
  --danger:#ff6470;
  --body:"Microsoft YaHei","PingFang SC",Arial,sans-serif;
  --mono:"Cascadia Mono","SFMono-Regular",Consolas,monospace;
}
*{box-sizing:border-box}
html{min-width:320px;background:var(--bg)}
body{min-height:100vh;margin:0;color:var(--text);font-family:var(--body);background-color:var(--bg);background-image:linear-gradient(rgba(56,225,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(56,225,255,.035) 1px,transparent 1px);background-size:44px 44px}
button,a{font:inherit}
.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 48px;border-bottom:1px solid var(--line);background:rgba(5,13,23,.94);position:sticky;top:0;z-index:10}
.brand{min-width:0;display:flex;align-items:center;gap:12px;color:var(--text);font-size:17px;font-weight:700;text-decoration:none}
.brand svg{width:30px;height:30px;flex:0 0 auto;color:var(--cyan)}
.brand svg circle{fill:var(--gold)}
.brand svg path:last-child{stroke:var(--gold)}
.brand span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand small{display:block;margin-top:2px;color:var(--muted);font-family:var(--mono);font-size:9px;font-weight:400}
.topbar nav{display:flex;align-items:center;gap:10px}
.topbar nav a,.topbar nav button{min-height:38px;display:inline-flex;align-items:center;justify-content:center;padding:8px 15px;border:1px solid var(--line);border-radius:4px;background:#091522;color:var(--muted);text-decoration:none;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.topbar nav a:hover,.topbar nav button:hover,.topbar nav a:focus-visible,.topbar nav button:focus-visible{border-color:var(--cyan);background:#0c1c2b;color:var(--text);outline:none}
.topbar nav button:disabled{cursor:wait;opacity:.55}
.page-shell{width:min(1120px,calc(100% - 64px));margin:0 auto;padding:72px 0 96px}
.page-heading{margin-bottom:32px}
.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:14px;color:var(--green);font-family:var(--mono);font-size:11px}
.heading-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:24px;border-bottom:1px solid var(--line)}
h1{margin:0;font-size:36px;line-height:1.2;font-weight:700}
.sync-meta{display:flex;align-items:center;gap:14px;color:var(--muted);font-family:var(--mono);font-size:11px;white-space:nowrap}
#sourceCount{color:var(--gold)}
.source-directory{width:100%}
.source-list{min-height:168px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.source-card{position:relative;min-width:0;min-height:172px;padding:22px;border:1px solid var(--line);border-radius:6px;background:rgba(10,22,36,.88);overflow:hidden;transition:border-color .2s,background .2s,transform .2s}
.source-card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:#536679}
.source-card.is-running::before{background:var(--green);box-shadow:0 0 14px rgba(61,220,151,.7)}
.source-card:hover{border-color:#2b4962;background:var(--panel-hover);transform:translateY(-2px)}
.source-card-top{min-width:0;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:28px}
.source-identity{height:24px;display:flex;align-items:center;gap:10px;color:var(--muted);font-family:var(--mono);font-size:11px;white-space:nowrap}
.source-card.is-running .source-state-text{color:var(--green)}
.source-name,.source-server{min-width:0;overflow-wrap:anywhere}
.source-name{max-width:62%;font-size:18px;line-height:1.35;font-weight:700;color:var(--text);text-align:right}
.source-server-label{display:block;margin-bottom:8px;color:var(--muted);font-family:var(--mono);font-size:10px}
.source-server{display:block;color:var(--cyan);font-family:var(--mono);font-size:13px;line-height:1.45}
.source-status{width:9px;height:9px;display:inline-block;border-radius:50%;background:#536679;box-shadow:0 0 0 4px rgba(83,102,121,.1)}
.source-status.is-online{background:var(--green);animation:source-pulse 1.45s ease-in-out infinite}
@keyframes source-pulse{
  0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 5px rgba(61,220,151,.75),0 0 0 4px rgba(61,220,151,.12)}
  50%{opacity:.42;transform:scale(.75);box-shadow:0 0 15px rgba(61,220,151,1),0 0 0 7px rgba(61,220,151,.04)}
}
.source-state{grid-column:1/-1;min-height:168px;display:flex;align-items:center;justify-content:center;gap:14px;padding:32px;text-align:center;color:var(--muted);border:1px solid var(--line);background:rgba(10,22,36,.72)}
.source-state.is-error{color:var(--danger)}
.source-state button{padding:7px 12px;border:1px solid rgba(255,100,112,.45);border-radius:4px;background:transparent;color:var(--text);cursor:pointer}
.source-state button:hover,.source-state button:focus-visible{border-color:var(--danger);outline:none}
@media(max-width:680px){
  .topbar{height:62px;padding:0 16px}
  .brand{font-size:14px}.brand svg{width:27px;height:27px}.brand small{font-size:8px}
  .topbar nav a,.topbar nav button{min-height:36px;padding:7px 10px;font-size:12px}
  .page-shell{width:calc(100% - 32px);padding:48px 0 72px}
  .heading-row{display:block}.sync-meta{margin-top:14px;white-space:normal}
  h1{font-size:30px}
  .source-list{grid-template-columns:1fr}
  .source-card{min-height:152px;padding:18px}
  .source-card-top{margin-bottom:22px}
  .source-name{font-size:16px}
  .source-server{font-size:12px}
}
@media(max-width:420px){
  .brand span{max-width:116px}
  .topbar nav a{display:none}
}
@media(prefers-reduced-motion:reduce){
  .source-status.is-online{animation:none;box-shadow:0 0 8px rgba(61,220,151,.8),0 0 0 4px rgba(61,220,151,.12)}
}