Spaces:
Paused
Paused
| :root{ | |
| --bg:#0b1020; | |
| --bg2:#11182c; | |
| --card:#131b31; | |
| --card2:#0f1629; | |
| --text:#e6edf7; | |
| --muted:#91a0be; | |
| --line:#27324d; | |
| --accent:#8dd5ff; | |
| --accent2:#80ffb2; | |
| --warn:#ffcc66; | |
| --bad:#ff7c7c; | |
| --good:#58d68d; | |
| --chip:#1c2640; | |
| --shadow:0 12px 30px rgba(0,0,0,.25); | |
| --radius:18px; | |
| --code-bg:#0a0f1d; | |
| --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; | |
| --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| } | |
| *{box-sizing:border-box} | |
| body{ | |
| margin:0; | |
| font-family:var(--sans); | |
| color:var(--text); | |
| background: | |
| radial-gradient(circle at top left, rgba(141,213,255,.11), transparent 25%), | |
| radial-gradient(circle at 80% 0%, rgba(128,255,178,.08), transparent 28%), | |
| linear-gradient(180deg, var(--bg), #070a13 85%); | |
| } | |
| .app-shell{max-width:1600px;margin:0 auto;padding:18px} | |
| .topbar{ | |
| display:flex;justify-content:space-between;align-items:flex-start;gap:18px; | |
| margin-bottom:16px;padding:18px 18px 8px 18px | |
| } | |
| .eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)} | |
| h1{margin:.25rem 0 .4rem;font-size:32px} | |
| .subtitle{margin:0;color:var(--muted);max-width:920px} | |
| .top-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end} | |
| .status-pill{ | |
| padding:8px 12px;border-radius:999px;background:var(--chip);border:1px solid var(--line); | |
| font-size:13px;text-transform:uppercase;letter-spacing:.06em | |
| } | |
| .status-pill.subtle{opacity:.85} | |
| .card{ | |
| background:linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%), var(--card); | |
| border:1px solid var(--line); | |
| border-radius:var(--radius); | |
| box-shadow:var(--shadow); | |
| } | |
| .toolbar{padding:16px;margin-bottom:16px} | |
| .toolbar-row{display:grid;grid-template-columns:1.1fr 1.1fr 1.6fr;gap:14px;align-items:end} | |
| .toolbar-row.compact{grid-template-columns:repeat(5,1fr);margin-top:12px} | |
| .field span{display:block;color:var(--muted);font-size:12px;margin-bottom:6px} | |
| .inline{display:flex;gap:8px;align-items:center} | |
| select,input,button{ | |
| font:inherit | |
| } | |
| select,input{ | |
| width:100%;padding:11px 12px;border-radius:12px;background:var(--card2);color:var(--text); | |
| border:1px solid var(--line);outline:none | |
| } | |
| .btn{ | |
| padding:11px 14px;border:none;border-radius:12px;background:linear-gradient(180deg, #2d6cdf, #214fd0); | |
| color:white;cursor:pointer;white-space:nowrap | |
| } | |
| .btn.secondary{background:linear-gradient(180deg, #1e2c4c, #13203a)} | |
| .tf-buttons{flex-wrap:wrap} | |
| .tf-btn{ | |
| border:1px solid var(--line);background:var(--chip);color:var(--text);border-radius:999px; | |
| padding:8px 12px;cursor:pointer;font-size:13px | |
| } | |
| .tf-btn.active{background:linear-gradient(180deg, #214fd0, #1f8bd1);border-color:transparent} | |
| .mini-stat{ | |
| background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:10px 12px; | |
| display:flex;flex-direction:column;gap:4px | |
| } | |
| .mini-stat span{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em} | |
| .mini-stat strong{font-size:14px;font-family:var(--mono);font-weight:600;overflow:hidden;text-overflow:ellipsis} | |
| .grid{ | |
| display:grid; | |
| grid-template-columns:repeat(2, minmax(0, 1fr)); | |
| gap:16px; | |
| } | |
| .panel{padding:16px;min-width:0} | |
| .chart-panel,.price-panel,.code-panel{grid-column:1 / -1} | |
| .panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px} | |
| .panel-head h2{margin:0;font-size:20px} | |
| .panel-note{color:var(--muted);font-size:12px;max-width:65ch;text-align:right} | |
| canvas{ | |
| width:100%; | |
| display:block; | |
| background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%), #09101e; | |
| border:1px solid var(--line); | |
| border-radius:16px | |
| } | |
| .signal-strip{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px} | |
| .signal-chip{ | |
| padding:9px 12px;border:1px solid var(--line);background:var(--chip);border-radius:999px; | |
| font-size:13px;font-family:var(--mono) | |
| } | |
| .status-grid{ | |
| display:grid; | |
| grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); | |
| gap:10px; | |
| } | |
| .status-card{ | |
| background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:10px 12px; | |
| display:flex;flex-direction:column;gap:6px;min-height:74px | |
| } | |
| .status-card .k{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em} | |
| .status-card .v{font-family:var(--mono);font-size:14px;word-break:break-word} | |
| .status-card.good .v{color:var(--good)} | |
| .status-card.warn .v{color:var(--warn)} | |
| .status-card.bad .v{color:var(--bad)} | |
| .json-box{ | |
| margin:0;padding:14px;background:var(--code-bg);border-radius:16px;border:1px solid var(--line); | |
| overflow:auto;max-height:420px;font-family:var(--mono);font-size:12px;line-height:1.5 | |
| } | |
| .debug-trace details{ | |
| border:1px solid var(--line);border-radius:14px;background:var(--card2);margin-bottom:10px;overflow:hidden | |
| } | |
| .debug-trace summary{ | |
| cursor:pointer;padding:12px 14px;font-family:var(--mono);font-size:13px;background:rgba(255,255,255,.02) | |
| } | |
| .debug-trace pre{ | |
| margin:0;padding:12px 14px;overflow:auto;max-height:260px;background:var(--code-bg);font-size:12px | |
| } | |
| .timeline{ | |
| display:grid;gap:10px | |
| } | |
| .signal-row{ | |
| display:grid;grid-template-columns:150px 1fr 1fr 1fr 120px 130px;gap:8px;align-items:center; | |
| background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:10px 12px; | |
| font-family:var(--mono);font-size:12px | |
| } | |
| .signal-row.head{background:#10182c;font-weight:700;text-transform:uppercase;font-size:11px;color:var(--muted)} | |
| .signal-row .active{color:var(--good)} | |
| .signal-row .stale{color:var(--warn)} | |
| .signal-row .expired{color:var(--bad)} | |
| .log-list{ | |
| display:grid;gap:8px;max-height:320px;overflow:auto | |
| } | |
| .log-item{ | |
| background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:10px 12px;font-family:var(--mono); | |
| display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center | |
| } | |
| .log-item .meta{color:var(--muted);font-size:12px} | |
| .log-item .reason{color:var(--accent);font-size:12px;grid-column:1 / -1} | |
| .code-toolbar{ | |
| display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap | |
| } | |
| .code-toolbar input{max-width:320px} | |
| .code-meta{color:var(--muted);font-size:12px} | |
| .source-viewer{ | |
| max-height:820px;overflow:auto;border:1px solid var(--line);border-radius:16px;background:var(--code-bg); | |
| font-family:var(--mono);font-size:12px;line-height:1.55 | |
| } | |
| .code-line{display:grid;grid-template-columns:72px 1fr;gap:10px;padding:0 12px} | |
| .code-line:nth-child(odd){background:rgba(255,255,255,.015)} | |
| .code-line .ln{color:#5d6a8f;user-select:none;text-align:right;padding-right:6px;border-right:1px solid rgba(255,255,255,.04)} | |
| .code-line .code{white-space:pre-wrap;word-break:break-word} | |
| .code-line.match{background:rgba(141,213,255,.14)} | |
| .code-line.hidden{display:none} | |
| .hl{font-family:var(--mono)} | |
| @media (max-width: 1200px){ | |
| .toolbar-row,.toolbar-row.compact,.grid{grid-template-columns:1fr} | |
| .panel-head{flex-direction:column} | |
| .panel-note{text-align:left} | |
| .signal-row{grid-template-columns:1fr 1fr} | |
| } | |