@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #edf3fb;
  --muted: #8494a9;
  --faint: #506078;
  --panel: #111b2b;
  --panel-light: #172337;
  --line: #26364d;
  --blue: #46a7ff;
  --blue-soft: #9fd2ff;
  --violet: #9b8cff;
  --green: #52d7a2;
  --amber: #f6bf68;
  --red: #fa776f;
  --mono: 'DM Mono', 'Cascadia Code', Consolas, monospace;
  --sans: 'Manrope', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { background: #0a111d; color: var(--ink); font: 14px/1.5 var(--sans); }
body { margin: 0; min-width: 320px; background: radial-gradient(700px 420px at 75% -10%, #132c48 0%, transparent 70%), #0a111d; }
button, input, textarea, select { color: inherit; font: inherit; }
button { cursor: pointer; }

.app-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }
.sidebar { display: flex; flex-direction: column; background: rgba(10, 17, 29, .95); border-right: 1px solid var(--line); padding: 28px 18px 20px; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 28px; }
.brand-mark { display: grid; grid-template-columns: repeat(3, 7px); align-items: end; gap: 3px; width: 29px; height: 29px; padding: 6px; border-radius: 8px; background: linear-gradient(145deg, #299df0, #6358db); box-shadow: 0 6px 20px rgba(53, 145, 255, .25); }
.brand-mark span { height: 8px; border-radius: 2px; background: #f1f7ff; }.brand-mark span:nth-child(2) { height: 13px; }.brand-mark span:nth-child(3) { height: 17px; }
.eyebrow { color: var(--muted); font: 500 10px/1.2 var(--mono); letter-spacing: .13em; }.eyebrow.accent { color: var(--blue); }
.brand h1 { font-size: 14px; letter-spacing: -.02em; margin: 4px 0 0; }
.workspace-picker { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(23, 35, 55, .54); margin-bottom: 28px; }.workspace-picker strong { display: block; font-size: 12px; margin-top: 2px; }.muted-label { color: var(--muted); display: block; font: 500 9px var(--mono); letter-spacing: .08em; }.chevron { color: var(--faint); margin-left: auto; font-size: 18px; }
.status-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(82, 215, 162, .11); }
.sidebar-section-title { display: flex; justify-content: space-between; padding: 0 9px 10px; color: var(--muted); font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.icon-button { display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); }.icon-button.small { width: 22px; height: 18px; font-size: 18px; line-height: 1; }.icon-button:hover { color: var(--ink); }
.tool-list { display: grid; gap: 4px; }.tool-button { display: grid; grid-template-columns: 26px 1fr auto; gap: 9px; align-items: center; width: 100%; padding: 10px 9px; border: 1px solid transparent; border-radius: 8px; background: transparent; text-align: left; color: var(--muted); }.tool-button:hover { color: var(--ink); background: rgba(23, 35, 55, .7); }.tool-button.active { border-color: rgba(70, 167, 255, .34); background: linear-gradient(90deg, rgba(42, 116, 183, .22), rgba(31, 50, 78, .08)); color: var(--ink); }.tool-button.active .tool-icon { color: var(--blue-soft); background: rgba(70, 167, 255, .16); }.tool-icon { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 6px; color: var(--muted); background: #192639; font: 600 10px var(--mono); }.tool-button strong { display: block; font-size: 12px; font-weight: 700; }.tool-button small { display: block; color: var(--faint); font: 10px var(--mono); margin-top: 2px; }.tool-count { color: var(--faint); font: 10px var(--mono); }
.sidebar-footer { margin-top: auto; padding: 26px 4px 0; }.connection-card { display: flex; align-items: center; gap: 9px; padding: 11px 10px; background: #101b2b; border: 1px solid #22344c; border-radius: 8px; }.connection-card strong { font-size: 10px; display: block; color: var(--blue-soft); margin-top: 2px; }.connection-card .status-dot { margin-left: auto; }.connection-icon { color: var(--green); font: 20px var(--mono); }.sidebar-note { color: var(--faint); font-size: 10px; line-height: 1.6; padding: 0 7px; }

.main-content { width: min(100%, 1220px); padding: 0 48px 40px; margin: 0 auto; }.topbar { display: flex; align-items: center; justify-content: space-between; height: 74px; border-bottom: 1px solid rgba(38, 54, 77, .7); }.breadcrumb { display: flex; gap: 9px; color: var(--faint); font-size: 11px; }.breadcrumb strong { color: var(--muted); font-weight: 600; }.top-actions { display: flex; gap: 15px; align-items: center; }.ghost-button { border: 0; background: transparent; color: var(--muted); font-size: 11px; }.ghost-button:hover { color: var(--ink); }.keycap, kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); background: var(--panel); font: 10px var(--mono); }.avatar { width: 29px; height: 29px; border: 1px solid #3a6c9e; border-radius: 50%; background: #163656; color: var(--blue-soft); font: 10px var(--mono); }
.hero { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding: 61px 0 50px; }.hero h2 { margin: 10px 0 17px; font-size: clamp(31px, 4.2vw, 50px); line-height: 1.08; letter-spacing: -.055em; font-weight: 800; }.hero h2 em { color: var(--blue-soft); font-style: normal; }.hero-copy { max-width: 480px; color: var(--muted); line-height: 1.8; font-size: 13px; margin: 0; }
.hero-orbit { position: relative; width: 230px; height: 180px; flex: none; }.orbit-ring { position: absolute; inset: 15px 0; border: 1px solid rgba(70, 167, 255, .18); border-radius: 50%; transform: rotate(-22deg); }.ring-two { inset: 23px -8px; transform: rotate(52deg); border-color: rgba(155, 140, 255, .18); }.orbit-core { position: absolute; top: 58px; left: 87px; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #5dbdff, #2762ad 60%, #182e5c); box-shadow: 0 0 40px rgba(70, 167, 255, .28); font: 500 18px var(--mono); }.orbit-chip { position: absolute; display: grid; place-items: center; min-width: 36px; height: 24px; padding: 0 7px; border: 1px solid; border-radius: 5px; background: #101d30; font: 10px var(--mono); }.chip-one { top: 7px; left: 36px; color: var(--violet); border-color: rgba(155, 140, 255, .4); }.chip-two { right: 0; bottom: 35px; color: var(--green); border-color: rgba(82, 215, 162, .4); }.chip-three { left: 31px; bottom: 3px; color: var(--amber); border-color: rgba(246, 191, 104, .4); }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 58px; }.metric-card { display: flex; align-items: center; gap: 11px; min-height: 72px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 9px; background: rgba(17, 27, 43, .8); }.metric-card strong { display: block; font: 500 20px var(--mono); letter-spacing: -.04em; }.metric-card span:not(.metric-icon):not(.metric-arrow) { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }.metric-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; font: 15px var(--mono); }.metric-icon.blue { color: var(--blue); background: rgba(70, 167, 255, .12); }.metric-icon.violet { color: var(--violet); background: rgba(155, 140, 255, .12); }.metric-icon.green { color: var(--green); background: rgba(82, 215, 162, .12); }.metric-icon.amber { color: var(--amber); background: rgba(246, 191, 104, .12); }.metric-card.attention { border-color: rgba(246, 191, 104, .28); }.metric-arrow { margin-left: auto; color: var(--amber); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }.section-heading h3 { margin: 8px 0 0; font-size: 20px; letter-spacing: -.03em; }.outline-button, .primary-button { border-radius: 6px; padding: 9px 13px; font-size: 11px; }.outline-button { border: 1px solid #345273; color: var(--blue-soft); background: transparent; }.outline-button:hover { border-color: var(--blue); background: rgba(70, 167, 255, .08); }.primary-button { border: 1px solid var(--blue); color: #06111f; background: var(--blue); font-weight: 700; }
.controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }.search-box { display: flex; align-items: center; gap: 9px; width: min(390px, 100%); border: 1px solid var(--line); border-radius: 7px; padding: 0 9px; color: var(--faint); background: rgba(17, 27, 43, .82); }.search-box input { flex: 1; min-width: 0; height: 38px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 11px; }.search-box input::placeholder { color: var(--faint); }.search-box:focus-within { border-color: #3e79ae; box-shadow: 0 0 0 3px rgba(70, 167, 255, .08); }.search-box kbd { border: 0; background: transparent; }.filter-row { display: flex; gap: 6px; }.filter-button { border: 0; padding: 7px 9px; color: var(--muted); background: transparent; border-radius: 5px; font-size: 11px; }.filter-button span { color: var(--faint); margin-left: 5px; font: 10px var(--mono); }.filter-button.active, .filter-button:hover { background: #18283e; color: var(--ink); }.filter-button.active span { color: var(--blue-soft); }
.category-row { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 14px; scrollbar-width: none; }.category-row::-webkit-scrollbar { display: none; }.category-chip { flex: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; color: var(--muted); background: transparent; font: 10px var(--mono); }.category-chip:hover, .category-chip.active { border-color: #3e79ae; color: var(--blue-soft); background: rgba(70, 167, 255, .08); }
.command-list { display: grid; gap: 8px; }.command-card { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 13px; min-height: 68px; border: 1px solid transparent; border-radius: 8px; padding: 11px 12px; background: rgba(17, 27, 43, .63); transition: border-color .15s, background .15s, transform .15s; }.command-card:hover { transform: translateX(2px); border-color: var(--line); background: #142238; }.command-card.selected { border-color: rgba(70, 167, 255, .35); background: linear-gradient(90deg, rgba(39, 83, 127, .27), rgba(17, 27, 43, .7)); }.command-tool-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 7px; color: var(--blue-soft); background: #1a3552; font: 600 9px var(--mono); }.command-meta { min-width: 0; }.command-name { display: flex; align-items: center; gap: 7px; margin: 0 0 5px; font-size: 12px; font-weight: 700; }.command-name .favorite-star { color: var(--amber); font-size: 12px; }.command-code { overflow: hidden; color: #85a4c3; text-overflow: ellipsis; white-space: nowrap; font: 10px var(--mono); }.command-tag { display: inline-block; color: var(--faint); font: 9px var(--mono); margin-left: 10px; }.command-actions { display: flex; align-items: center; gap: 5px; }.small-action { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid transparent; border-radius: 5px; color: var(--muted); background: transparent; font-size: 13px; }.small-action:hover { border-color: var(--line); color: var(--ink); background: #1b2b41; }.run-action { padding: 5px 9px; border: 1px solid #2e73a9; border-radius: 5px; color: var(--blue-soft); background: rgba(70, 167, 255, .08); font: 10px var(--mono); }.run-action:hover { background: rgba(70, 167, 255, .2); }.empty-state { text-align: center; padding: 45px 20px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); }.empty-icon { color: var(--blue); font-size: 24px; }.empty-state h4 { margin: 10px 0 2px; color: var(--ink); }.empty-state p { margin: 0; font-size: 11px; }
.terminal-panel { margin-top: 48px; overflow: hidden; border: 1px solid #263d58; border-radius: 9px; background: #0b1522; box-shadow: 0 18px 42px rgba(0, 0, 0, .2); }.terminal-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-bottom: 1px solid #1d3047; background: #101d2e; }.terminal-title { display: flex; align-items: center; gap: 8px; color: #a7bdd6; font: 10px var(--mono); }.terminal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(82, 215, 162, .7); }.terminal-path { color: var(--faint); margin-left: 5px; }.terminal-actions { display: flex; gap: 8px; }.terminal-button { border: 0; color: var(--muted); background: transparent; font: 10px var(--mono); }.terminal-button:hover { color: var(--ink); }.terminal-body { min-height: 160px; padding: 17px 16px; color: #a6c5e4; font: 11px/1.8 var(--mono); }.terminal-line.command { color: var(--blue-soft); }.terminal-line.output { color: #91b39f; }.terminal-line.warn { color: var(--amber); }.terminal-line.dim { color: #435a73; }.terminal-caret { color: var(--blue); margin-top: 5px; animation: blink 1.1s step-end infinite; } @keyframes blink { 50% { opacity: 0; } }
.page-footer { display: flex; justify-content: space-between; gap: 14px; padding-top: 24px; color: var(--faint); font: 9px var(--mono); }.page-footer .status-dot { margin-right: 6px; width: 5px; height: 5px; }.footer-divider { color: #304157; margin: 0 7px; }
dialog { padding: 0; border: 1px solid #315274; border-radius: 11px; color: var(--ink); background: #111d2e; box-shadow: 0 28px 90px rgba(0, 0, 0, .6); width: min(440px, calc(100vw - 32px)); }dialog::backdrop { background: rgba(3, 8, 14, .77); backdrop-filter: blur(3px); }.dialog-card { position: relative; padding: 28px; }.dialog-close { position: absolute; top: 13px; right: 14px; border: 0; background: transparent; color: var(--muted); font-size: 22px; }.dialog-card h3 { font-size: 20px; margin: 9px 0 6px; }.dialog-copy { color: var(--muted); font-size: 11px; line-height: 1.7; margin: 0 0 20px; }.dialog-card label { display: block; color: var(--muted); font: 10px var(--mono); margin-top: 13px; }.dialog-card input, .dialog-card textarea, .dialog-card select { display: block; width: 100%; margin-top: 6px; padding: 10px; outline: 0; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: #0c1727; font: 11px var(--mono); }.dialog-card input:focus, .dialog-card textarea:focus, .dialog-card select:focus { border-color: var(--blue); }.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 23px; }.shortcuts-card { padding-top: 30px; }.shortcut-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }.shortcut-row:last-child { border-bottom: 0; }

@media (max-width: 900px) { .app-shell { grid-template-columns: 1fr; }.sidebar { position: static; border-right: 0; border-bottom: 1px solid var(--line); padding: 18px 20px; }.brand { padding-bottom: 18px; }.workspace-picker, .sidebar-section-title, .sidebar-footer { display: none; }.tool-list { display: flex; gap: 6px; overflow-x: auto; }.tool-button { min-width: 105px; grid-template-columns: 23px 1fr; padding: 8px; }.tool-button small { display: none; }.tool-count { display: none; }.main-content { padding: 0 22px 35px; }.topbar { height: 60px; }.hero { padding: 46px 0 40px; }.hero-orbit { transform: scale(.8); margin-right: -20px; }.metrics { margin-bottom: 45px; } }
@media (max-width: 620px) { .breadcrumb { display: none; }.topbar { justify-content: flex-end; }.hero { padding-top: 37px; }.hero-orbit { display: none; }.hero h2 { font-size: 34px; }.metrics { grid-template-columns: repeat(2, 1fr); gap: 8px; }.metric-card { min-height: 62px; padding: 11px; }.metric-card strong { font-size: 17px; }.section-heading { align-items: start; flex-direction: column; gap: 12px; }.controls { align-items: stretch; flex-direction: column; }.search-box { width: 100%; }.filter-row { border-bottom: 1px solid var(--line); padding-bottom: 9px; }.command-card { grid-template-columns: 32px minmax(0, 1fr); }.command-actions { grid-column: 2; justify-content: flex-start; margin-top: -5px; }.command-tag { display: none; }.terminal-header { align-items: start; flex-direction: column; }.page-footer { flex-direction: column; } }