:root {
  --ink: #17223c;
  --muted: #66728f;
  --paper: #f3f6fb;
  --card: rgba(255,255,255,.88);
  --line: #d9e0ee;
  --blue: #3454d1;
  --violet: #7a5af8;
  --cyan: #4cc9d8;
  --coral: #ef6a6a;
  --shadow: 0 22px 65px rgba(37,52,91,.13);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 13% 4%, rgba(122,90,248,.16), transparent 31rem),
    radial-gradient(circle at 88% 30%, rgba(76,201,216,.14), transparent 30rem),
    var(--paper);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

button, input { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: 54px 0 90px; }
.masthead { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:28px; }
.eyebrow, .section-label { margin:0 0 10px; color:var(--blue); font:700 12px/1 ui-monospace,SFMono-Regular,monospace; letter-spacing:.18em; }
h1 { margin:0; font:800 clamp(48px,7vw,88px)/.92 "Arial Rounded MT Bold","PingFang SC",sans-serif; letter-spacing:-.06em; }
.lede { max-width:650px; margin:20px 0 0; color:var(--muted); font-size:18px; }
.status-orbit { min-width:160px; padding:18px 20px; background:var(--card); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); }
.status-dot { display:inline-block; width:10px; height:10px; margin-right:8px; border-radius:50%; background:#d49942; box-shadow:0 0 0 6px rgba(212,153,66,.12); }
.status-dot.ok { background:#20a47b; box-shadow:0 0 0 6px rgba(32,164,123,.12); }
.status-orbit small { display:block; margin-top:7px; color:var(--muted); }

.signal-strip { position:relative; min-height:190px; display:grid; grid-template-columns:2fr 1fr 1fr; align-items:end; gap:1px; overflow:hidden; border-radius:30px; background:#101c39; color:white; box-shadow:var(--shadow); }
#signalCanvas { position:absolute; inset:0; width:100%; height:100%; opacity:.78; }
.signal-readout { position:relative; z-index:1; padding:98px 30px 27px; border-right:1px solid rgba(255,255,255,.12); }
.signal-readout span { display:block; color:#9ba8ca; font-size:13px; }
.signal-readout strong { display:block; margin-top:5px; font-size:24px; }
.signal-readout:first-of-type strong { font-size:36px; }

.workbench { display:grid; grid-template-columns:1.5fr 1fr; gap:20px; margin:20px 0 46px; }
.create-card, .proof-card { padding:28px; border:1px solid var(--line); border-radius:26px; background:var(--card); box-shadow:var(--shadow); }
.create-card { display:grid; grid-template-columns:1fr minmax(220px,1.3fr) auto; align-items:end; gap:22px; }
h2 { margin:0; font-size:28px; letter-spacing:-.035em; }
label span, .load-row label { color:var(--muted); font-size:13px; }
input { width:100%; margin-top:8px; padding:13px 15px; border:1px solid var(--line); border-radius:13px; outline:none; color:var(--ink); background:white; }
input:focus { border-color:var(--violet); box-shadow:0 0 0 4px rgba(122,90,248,.12); }
button { padding:12px 16px; border:1px solid var(--line); border-radius:13px; color:var(--ink); background:white; font-weight:700; transition:.18s ease; }
button:hover { transform:translateY(-1px); border-color:#aab5cf; }
button:disabled { opacity:.5; cursor:wait; transform:none; }
button.primary { color:white; border-color:transparent; background:linear-gradient(135deg,var(--blue),var(--violet)); }
button.danger { color:#b4434b; }
button.quiet { color:var(--blue); background:transparent; }
.proof-card ul { display:grid; gap:13px; margin:17px 0 0; padding:0; list-style:none; }
.proof-card li { color:var(--muted); }
.proof-card li span { display:inline-grid; place-items:center; width:28px; height:28px; margin-right:9px; border-radius:50%; color:var(--blue); background:#edf0ff; font:700 11px ui-monospace,monospace; }

.p2p-lab { display:grid; grid-template-columns:minmax(280px,.85fr) minmax(420px,1.35fr); gap:22px; margin:0 0 46px; padding:28px; overflow:hidden; border-radius:30px; color:#eef5ff; background:#101c39; box-shadow:var(--shadow); }
.p2p-copy { align-self:center; }
.p2p-copy .section-label { color:#65d8df; }
.p2p-copy h2 { max-width:430px; font-size:clamp(31px,4vw,48px); line-height:1.02; letter-spacing:-.055em; }
.p2p-copy > p:not(.section-label) { max-width:520px; color:#aab8d7; line-height:1.65; }
.p2p-controls { display:flex; flex-wrap:wrap; align-items:end; gap:9px; margin-top:24px; }
.p2p-controls label { width:112px; color:#aab8d7; }
.p2p-controls input { color:#eef5ff; border-color:#334261; background:#172746; }
.p2p-controls button { border-color:#334261; color:#dfe8fb; background:#172746; }
.p2p-controls button.primary { border-color:transparent; background:linear-gradient(135deg,#3f78ff,#7658f5); }
.p2p-controls button.danger { color:#ff9898; }
.p2p-note { min-height:24px; margin-bottom:0; font:600 12px/1.5 ui-monospace,SFMono-Regular,monospace; }
.topology-stage { position:relative; min-height:390px; border:1px solid rgba(164,186,230,.14); border-radius:24px; background:radial-gradient(circle at 50% 50%,rgba(69,109,206,.18),transparent 58%),rgba(4,12,31,.48); }
#topologyCanvas { display:block; width:100%; height:390px; }
.topology-legend { position:absolute; left:16px; bottom:14px; display:flex; flex-wrap:wrap; gap:14px; padding:8px 11px; border:1px solid rgba(255,255,255,.08); border-radius:11px; color:#99a9c9; background:rgba(8,17,39,.76); font-size:11px; backdrop-filter:blur(8px); }
.topology-legend span { display:flex; align-items:center; gap:6px; }
.topology-legend i { display:inline-block; width:15px; height:2px; background:#54d8df; }
.topology-legend .origin-dot { width:8px; height:8px; border-radius:50%; background:#ffd166; box-shadow:0 0 10px #ffd166; }
.topology-legend .standby-line { height:0; border-top:1px dashed #8f7df5; background:none; }
.p2p-metrics { grid-column:1/-1; display:grid; grid-template-columns:repeat(6,1fr); margin:0; border-top:1px solid rgba(255,255,255,.12); }
.p2p-metrics div { min-width:0; padding:20px 14px 4px; border-right:1px solid rgba(255,255,255,.1); }
.p2p-metrics div:first-child { padding-left:0; }
.p2p-metrics div:last-child { border-right:0; }
.p2p-metrics dt { color:#8fa0c1; font-size:12px; }
.p2p-metrics dd { margin:6px 0 0; white-space:nowrap; }
.p2p-metrics b { font-size:25px; }
.p2p-metrics small { color:#8fa0c1; font-size:11px; }
.p2p-metrics .savings b { color:#67dfc0; }
.p2p-disclosure { grid-column:1/-1; margin:0; color:#7587aa; font-size:11px; line-height:1.5; }

.section-head { display:flex; align-items:end; justify-content:space-between; margin-bottom:18px; }
.room-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.room-card { position:relative; overflow:hidden; padding:25px; border:1px solid var(--line); border-radius:26px; background:var(--card); box-shadow:var(--shadow); }
.room-topline { display:flex; justify-content:space-between; color:var(--muted); font:700 11px ui-monospace,monospace; letter-spacing:.12em; }
.live-mark { color:#13966e; }
.room-name { margin:18px 0 20px; font-size:28px; letter-spacing:-.035em; }
.room-meter { height:48px; display:flex; align-items:center; gap:6px; margin-bottom:22px; }
.room-meter i { width:7px; height:18px; border-radius:8px; background:linear-gradient(var(--cyan),var(--violet)); animation:meter 1.35s ease-in-out infinite alternate; animation-play-state:paused; }
.room-card.active .room-meter i { animation-play-state:running; }
.room-meter i:nth-child(2n) { animation-delay:-.4s; height:33px; }
.room-meter i:nth-child(3n) { animation-delay:-.8s; height:25px; }
@keyframes meter { to { transform:scaleY(1.45); opacity:.55; } }
.room-stats { display:grid; grid-template-columns:repeat(3,1fr); margin:0 0 20px; padding:16px 0; border-block:1px solid var(--line); }
.room-stats div { padding-left:15px; border-left:1px solid var(--line); }
.room-stats div:first-child { padding-left:0; border:0; }
.room-stats dt { color:var(--muted); font-size:12px; }
.room-stats dd { margin:5px 0 0; font-size:20px; font-weight:800; }
.room-actions, .load-row { display:flex; flex-wrap:wrap; gap:9px; }
.load-row { align-items:end; margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); }
.load-row label { flex:1; min-width:150px; }
.scale-count { max-width:100px; margin-left:8px; padding:10px; }
.room-message { min-height:20px; margin:13px 0 0; color:var(--muted); font-size:13px; }
.empty-state { padding:45px; text-align:center; color:var(--muted); border:1px dashed #b9c3d8; border-radius:24px; }
#toast { position:fixed; right:24px; bottom:24px; z-index:10; max-width:360px; padding:14px 18px; border-radius:14px; color:white; background:#18243f; box-shadow:var(--shadow); opacity:0; transform:translateY(10px); pointer-events:none; transition:.2s ease; }
#toast.show { opacity:1; transform:none; }

@media (max-width:850px) {
  .shell { width:min(100% - 24px,700px); padding-top:30px; }
  .masthead { align-items:flex-start; flex-direction:column; }
  .status-orbit { width:100%; }
  .signal-strip { grid-template-columns:1fr 1fr; }
  .signal-readout { padding:88px 18px 20px; }
  .signal-readout:first-of-type { grid-column:1/-1; }
  .create-card { grid-template-columns:1fr; }
  .workbench, .room-grid, .p2p-lab { grid-template-columns:1fr; }
  .topology-stage { min-height:320px; }
  #topologyCanvas { height:320px; }
  .p2p-metrics { grid-template-columns:repeat(2,1fr); }
  .p2p-metrics div, .p2p-metrics div:first-child { padding:15px 10px; border-bottom:1px solid rgba(255,255,255,.1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}