:root{--bg-main: #0b0f19;--bg-card: #151c2c;--bg-card-hover: #1b2438;--border-color: #26334d;--accent-blue: #38bdf8;--accent-purple: #818cf8;--accent-green: #34d399;--accent-red: #f87171;--text-primary: #f8fafc;--text-secondary: #94a3b8;--text-muted: #64748b;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "Fira Code", "JetBrains Mono", monospace;--radius-lg: 16px;--radius-md: 10px;--radius-sm: 6px;--shadow-main: 0 10px 30px -10px rgba(0, 0, 0, .5)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-main);color:var(--text-primary);line-height:1.6;min-height:100vh}.app-container{max-width:1000px;margin:0 auto;padding:30px 20px;display:flex;flex-direction:column;min-height:100vh}.main-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:24px;border-bottom:1px solid var(--border-color);margin-bottom:24px;flex-wrap:wrap;gap:16px}.brand{display:flex;align-items:center;gap:14px}.logo-icon{width:48px;height:48px;background:linear-gradient(135deg,#0284c7,#6366f1);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;box-shadow:0 4px 15px #38bdf84d}.brand h1{font-size:1.75rem;font-weight:700;letter-spacing:-.5px;background:linear-gradient(90deg,#f8fafc,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.brand .subtitle{font-size:.875rem;color:var(--text-secondary)}.status-badge-group{display:flex;align-items:center;gap:10px}.status-pill{display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:20px;font-size:.85rem;font-weight:600;border:1px solid transparent}.status-pill.online{background:#34d3991a;color:var(--accent-green);border-color:#34d39933}.status-pill.offline{background:#f871711a;color:var(--accent-red);border-color:#f8717133}.status-pill .dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}.ping-pill{background:var(--bg-card);border:1px solid var(--border-color);padding:6px 12px;border-radius:20px;font-size:.85rem;color:var(--text-secondary)}.tabs-nav{display:flex;gap:8px;background:var(--bg-card);padding:6px;border-radius:var(--radius-md);border:1px solid var(--border-color);margin-bottom:24px;overflow-x:auto}.tab-btn{flex:1;padding:10px 16px;background:transparent;border:none;color:var(--text-secondary);font-size:.9rem;font-weight:500;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;transition:all .2s ease}.tab-btn:hover{color:var(--text-primary);background:#ffffff0a}.tab-btn.active{background:linear-gradient(135deg,#2563eb,#4f46e5);color:#fff;font-weight:600;box-shadow:0 4px 12px #2563eb4d}.card-box{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-main)}.card-box h3{font-size:1.2rem;font-weight:600;margin-bottom:6px;color:var(--text-primary)}.card-desc{font-size:.875rem;color:var(--text-secondary);margin-bottom:20px}.margin-top{margin-top:20px}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.metric-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:18px;display:flex;align-items:center;gap:14px;transition:transform .2s ease,border-color .2s ease}.metric-card:hover{transform:translateY(-2px);border-color:var(--accent-blue)}.metric-icon{font-size:1.8rem;background:#ffffff0a;padding:10px;border-radius:10px}.metric-info{display:flex;flex-direction:column}.metric-info .label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.metric-info .value{font-size:1rem;font-weight:600;color:var(--text-primary);margin-top:2px}.memory-bar-container{margin-top:14px}.memory-bar{width:100%;height:12px;background:var(--bg-main);border-radius:6px;overflow:hidden;border:1px solid var(--border-color)}.memory-fill{height:100%;background:linear-gradient(90deg,#38bdf8,#818cf8);border-radius:6px;transition:width .4s ease}.memory-labels{display:flex;justify-content:space-between;font-size:.8rem;color:var(--text-secondary);margin-top:8px}.specs-table{display:flex;flex-direction:column;gap:10px;margin-top:12px}.spec-row{display:flex;justify-content:space-between;padding:10px 14px;background:#ffffff05;border-radius:var(--radius-sm);font-size:.875rem;border:1px solid rgba(255,255,255,.04)}.spec-label{color:var(--text-secondary)}.spec-val{font-weight:500;color:var(--text-primary)}.spec-val.highlight{color:var(--accent-green);font-family:var(--font-mono)}.api-quick-select{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}.chip{padding:8px 14px;background:var(--bg-main);border:1px solid var(--border-color);color:var(--text-secondary);border-radius:20px;font-size:.85rem;font-family:var(--font-mono);cursor:pointer;transition:all .2s ease}.chip:hover{border-color:var(--accent-blue);color:var(--text-primary)}.chip.active{background:#38bdf826;border-color:var(--accent-blue);color:var(--accent-blue);font-weight:600}.echo-input-box{background:var(--bg-main);padding:16px;border-radius:var(--radius-md);border:1px solid var(--border-color);margin-bottom:20px}.echo-input-box label{display:block;font-size:.85rem;color:var(--text-secondary);margin-bottom:8px}.input-group{display:flex;gap:10px}.input-group input,.crud-form input{flex:1;background:var(--bg-card);border:1px solid var(--border-color);padding:10px 14px;border-radius:var(--radius-sm);color:var(--text-primary);font-size:.9rem}.input-group input:focus,.crud-form input:focus{outline:none;border-color:var(--accent-blue);box-shadow:0 0 0 2px #38bdf833}.primary-btn{background:linear-gradient(135deg,#0284c7,#2563eb);color:#fff;border:none;padding:10px 18px;border-radius:var(--radius-sm);font-weight:600;font-size:.875rem;cursor:pointer;transition:opacity .2s}.primary-btn:hover{opacity:.9}.response-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.85rem;color:var(--text-secondary)}.response-meta{display:flex;gap:10px;align-items:center}.status-code{padding:2px 8px;border-radius:4px;font-weight:700;font-family:var(--font-mono);font-size:.8rem}.status-ok{background:#34d39933;color:var(--accent-green)}.status-err{background:#f8717133;color:var(--accent-red)}.latency-tag{font-family:var(--font-mono);color:var(--accent-purple)}.json-display{background:#090d16;border:1px solid var(--border-color);padding:16px;border-radius:var(--radius-md);color:#38bdf8;font-family:var(--font-mono);font-size:.85rem;max-height:350px;overflow:auto;line-height:1.5}.crud-form{display:flex;gap:12px;margin-bottom:20px}.items-list{display:flex;flex-direction:column;gap:10px}.item-row{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--bg-main);border:1px solid var(--border-color);border-radius:var(--radius-sm)}.item-details{display:flex;flex-direction:column}.item-title{font-weight:500;color:var(--text-primary)}.item-time{font-size:.75rem;color:var(--text-muted)}.delete-btn{background:transparent;border:none;cursor:pointer;font-size:1.1rem;opacity:.7;transition:opacity .2s}.delete-btn:hover{opacity:1}.empty-txt,.loading-txt{text-align:center;color:var(--text-muted);padding:20px;font-size:.9rem}.guide-step{margin-bottom:24px}.guide-step h4{font-size:1rem;color:var(--accent-blue);margin-bottom:6px}.guide-step p{font-size:.875rem;color:var(--text-secondary);margin-bottom:10px}.code-block{background:#090d16;border:1px solid var(--border-color);padding:14px;border-radius:var(--radius-sm);color:#a7f3d0;font-family:var(--font-mono);font-size:.85rem;overflow-x:auto;white-space:pre-wrap}.main-footer{margin-top:auto;padding-top:30px;text-align:center;color:var(--text-muted);font-size:.8rem;border-top:1px solid var(--border-color)}:root{--color-bg: #f5f5f5;--color-surface: #ffffff;--color-text: #1a1a1a;--color-text-muted: #666;--color-border: #e0e0e0;--color-primary: #2563eb;--color-primary-hover: #1d4ed8;--color-code-bg: #1e1e1e;--color-code-text: #d4d4d4;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);--radius: 12px;--radius-sm: 8px}*{box-sizing:border-box}html{font-size:16px}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background-color:var(--color-bg);color:var(--color-text);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh}button,input{font-family:inherit}pre{font-family:Monaco,Menlo,Ubuntu Mono,monospace}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}code{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9em;background:#f0f0f0;padding:2px 6px;border-radius:4px}pre code{background:none;padding:0;font-size:inherit}