/* HostShard workspace — charcoal surfaces, compact navigation, terminal-first bot views. */
:root {
  --bg: #0a0a0b; --surface: #121213; --surface-2: #19191b; --surface-3: #242426;
  --line: #2b2b2e; --line-soft: #222225; --text: #f4f4f5; --muted: #96969e;
  --soft: #d4d4d8; --brand: #e9e9ed; --brand-2: #b8bbc4; --green: #39ce81;
  --shadow: none;
}
body { background: #0a0a0b; font-family: Inter, 'Segoe UI', Arial, sans-serif; }
button, input, textarea, select { font: inherit; }
button { transition: background .16s, border-color .16s, color .16s; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #a6b8d9; outline-offset: 3px; }
.primary, .primaryLink, .navButton { background: #ededf0; color: #171719; box-shadow: none; font-weight: 600; border: 1px solid #ededf0; }
.primary:hover, .primaryLink:hover, .navButton:hover { background: #d8d8df; color: #111; transform: none; }
.ghost, .secondaryLink { background: #171719; border: 1px solid #333337; color: #e4e4e7; box-shadow: none; font-weight: 500; }
.ghost:hover, .secondaryLink:hover { background: #262629; border-color: #46464d; }
.danger { color: #f5a0a5; background: #351e22; border: 1px solid #60323a; font-weight: 500; box-shadow: none; }
.danger:hover { background: #47272e; }
.primary, .ghost, .danger, .primaryLink, .secondaryLink, .navButton { min-height: 36px; border-radius: 7px; padding: 8px 13px; }
.eyebrow { color: #8b8b94; font-weight: 600; letter-spacing: .06em; }
.brandMark { border: 1px solid #34343b; background: #1c1c21; box-shadow: none; border-radius: 9px; }
.brandMark img { filter: saturate(.65); }
.appShell { grid-template-columns: 246px minmax(0, 1fr); padding: 8px; gap: 18px; background: #0a0a0b; }
.sidebar { top: 8px; height: calc(100vh - 16px); background: #171718; border: 1px solid #27272a; border-radius: 12px; padding: 17px 10px 10px; overflow-y: auto; }
.appBrand { padding: 3px 9px 20px; gap: 10px; }
.appBrand .brandMark { width: 34px; height: 34px; }
.appBrand strong { font-size: 17px; font-weight: 650; letter-spacing: -.4px; }
.appBrand small { font-size: 11px; color: #8d8d96; }
.workspaceIdentity { display: flex; gap: 10px; align-items: center; padding: 12px 10px; margin: 0 2px 18px; border: 1px solid #303033; border-radius: 7px; background: #1c1c1e; }
.workspaceIdentity svg { width: 17px; color: #a4a4ad; }
.workspaceIdentity strong, .workspaceIdentity small { display: block; }
.workspaceIdentity strong { font-size: 12px; font-weight: 550; }
.workspaceIdentity small { font-size: 11px; margin-top: 2px; color: var(--muted); }
.navSection { font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; color: #7e7e86; margin: 18px 11px 6px; }
.sideNav { gap: 3px; }
.sideNav button { color: #adadb5; font-weight: 450; padding: 9px 11px; border-radius: 6px; font-size: 13px; }
.sideNav button svg { width: 16px; height: 16px; }
.sideNav button:hover { background: #242427; }
.sideNav button.active { color: #fafafa; background: #303032; }
.planMini { border: 0; border-top: 1px solid #303033; background: transparent; border-radius: 0; padding: 16px 6px 4px; margin-top: auto; font-size: 11px; }
.planMini > div:first-child { padding-right: 5px; }
.sidebarAccount strong { font-weight: 550; }
.dashMain { min-width: 0; padding: 0 10px 12px 0; }
.dashHeader { min-height: 60px; padding: 8px 4px 15px; margin-bottom: 0; gap: 16px; }
.workspaceHeading { display: flex; gap: 13px; align-items: center; min-width: 0; }
.workspacePath { display: flex; align-items: center; gap: 10px; color: #92929b; font-size: 12px; }
.workspacePath svg { width: 16px; height: 16px; }
.workspacePath > span { color: #474750; padding-left: 4px; }
.dashHeader .eyebrow { display: none; }
.dashHeader h1 { font-size: 14px; font-weight: 550; line-height: 1.3; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; }
.dashActions { flex-wrap: nowrap; gap: 9px; }
.dashActions button { min-height: 32px; font-size: 12px; padding: 7px 11px; }
#view { min-height: calc(100vh - 86px); border: 1px solid #27272a; border-radius: 12px; background: #0d0d0e; padding: 27px; box-shadow: 0 0 0 6px #141415 inset; }
.workspaceIntro { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 4px 0 26px; }
.workspaceIntro h2 { font-size: 23px; font-weight: 600; letter-spacing: -.7px; }
.workspaceIntro p { margin-top: 7px; font-size: 13px; }
.workspaceBadge { display: flex; align-items: center; gap: 7px; border: 1px solid #2d2d32; border-radius: 6px; background: #18181b; color: #b5b5bd; padding: 7px 10px; font-size: 11px; white-space: nowrap; }
.workspaceBadge svg { width: 14px; height: 14px; }
.dashGrid { gap: 13px; margin-bottom: 30px; }
.metricCard { background: #151517; border: 1px solid #29292e; border-radius: 8px; padding: 18px 20px; box-shadow: none; }
.metricCard > span { color: #a1a1aa; font-size: 12px; font-weight: 450; }
.metricCard > strong { font-size: 27px; font-weight: 550; margin: 10px 0 5px; letter-spacing: -.7px; }
.metricCard strong small { font-size: 16px; font-weight: 400; color: #71717a; }
.metricCard > small { font-size: 11px; color: #777780; }
.projectsPanel { padding-top: 5px; min-height: 240px; }
.projectsHeader { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 19px; border-bottom: 1px solid #27272b; margin-bottom: 22px; }
.projectsHeader h2 { font-size: 17px; font-weight: 550; }
.projectsHeader h2 span { margin-left: 8px; padding: 2px 7px; background: #232326; border-radius: 5px; color: #acacb5; font-size: 11px; }
.projectsHeader p { font-size: 12px; margin-top: 5px; }
.projectTools { display: flex; align-items: center; gap: 10px; }
.projectSearch { display: flex; align-items: center; gap: 8px; border: 1px solid #303035; border-radius: 7px; background: #171719; padding: 8px 10px; }
.projectSearch svg { width: 15px; height: 15px; color: #85858f; }
.projectSearch input { border: 0; background: none; outline: 0; color: #e4e4e7; width: 180px; font-size: 12px; }
.projectTools select { background: #171719; color: #bbbcc5; border: 1px solid #303035; border-radius: 7px; padding: 9px 11px; font-size: 12px; }
.serverList { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.serverCard { display: flex; flex-wrap: wrap; align-content: flex-start; background: #101011; border: 1px solid #2a2a2e; border-radius: 10px; padding: 20px; gap: 13px; min-width: 0; min-height: 208px; position: relative; cursor: pointer; transition: border-color .15s, background .15s; }
.serverCard:hover { background: #161617; border-color: #49494f; }
.serverCard.selected { background: #111112; border-color: #33333a; }
.serverCard > .serverIcon { width: 34px; height: 34px; border: 1px solid #303035; background: #1b1b20; border-radius: 7px; }
.serverCard .serverIcon svg { width: 18px; height: 18px; color: #b4b4be; }
.serverCard .serverInfo { flex: 1; min-width: 0; }
.serverCard .serverTitle { gap: 8px; }
.serverCard h3 { font-size: 14px; font-weight: 550; }
.serverCard .serverInfo p { font-size: 12px; margin: 10px 0 15px; min-height: 18px; }
.serverCard .serverMeta { font-size: 10px; gap: 6px; }
.serverCard .serverMeta > span:not(.languagePill) { background: none; border: 0; padding: 4px 0; color: #777780; }
.serverCard .serverActions { width: 100%; padding-top: 13px; border-top: 1px solid #27272c; justify-content: flex-end; }
.serverCard .serverActions button { min-height: 28px; font-size: 11px; padding: 5px 9px; }
.statusPill { background: #1b1b1e; border-color: #33333a; color: #a6a6af; font-size: 10px; font-weight: 500; padding: 4px 7px; }
.statusPill.online { background: #15251c; border-color: #254733; color: #6fdaa1; }
.statusPill.offline { background: #1b1b1e; color: #92929d; }
.statusPill.warning { background: #302a1b; border-color: #4c4027; color: #e1c276; }
.languagePill { background: #1a1a1e; border: 1px solid #303036; color: #c0c0c8; font-size: 10px; }
.languagePill .runtimeLogo { width: 17px; height: 17px; }
.policyNotice { background: transparent; border: 0; border-top: 1px solid #262629; color: #777780; padding: 18px 0 0; margin-top: 28px; font-size: 11px; box-shadow: none; }
.policyNotice svg { color: #777780; }
.panel, .createPanel, .serverTop { background: #131315; border-color: #2c2c32; border-radius: 8px; box-shadow: none; }
.panelHead { border-bottom-color: #2c2c32; padding: 16px 18px; }
.panelHead h2 { font-size: 17px; font-weight: 550; }
.manageShell { gap: 19px; }
.manageHero { background: none; border: 0; padding: 2px 0 2px; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; }
.manageHero > .serverIcon { display: none; }
.manageHero h2 { font-size: 24px; font-weight: 550; }
.manageHero p { font-size: 12px; margin-top: 7px; }
.manageButtons { flex-wrap: nowrap; }
.manageButtons button { font-size: 12px; padding: 8px 12px; }
.botTabs { border: 0; border-bottom: 1px solid #2d2d33; border-radius: 0; background: none; padding: 0; gap: 19px; }
.botTabs button { color: #92929d; background: none; border: 0; border-radius: 0; padding: 12px 1px; margin-bottom: -1px; font-size: 12px; font-weight: 450; border-bottom: 2px solid transparent; }
.botTabs button.active { color: #f4f4f5; background: none; border-bottom-color: #e4e4e7; }
.botTabs button:hover { color: #e4e4e7; background: none; }
.botTabs button svg { width: 15px; height: 15px; }
.consoleGrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.consoleResourceStrip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid #2d2d34; border-radius: 8px; background: #121213; overflow: hidden; }
.consoleResourceStrip article { position: relative; min-width: 0; padding: 17px 17px 20px; border-right: 1px solid #2b2b32; overflow: hidden; }
.consoleResourceStrip article:last-child { border-right: 0; }
.consoleResourceStrip article > span { position: relative; z-index: 1; display: block; color: #a6a6b0; font-size: 11px; margin-bottom: 10px; }
.consoleResourceStrip strong { display: block; position: relative; z-index: 1; font-size: 16px; font-weight: 550; white-space: nowrap; }
.consoleResourceStrip strong small { color: #81818d; font-size: 10px; font-weight: 400; }
.consoleResourceStrip .resourceRunning { color: #48d68b; }
.resourceRunning::before { content: ''; display: inline-block; background: #48d68b; width: 6px; height: 6px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.resourceSpark { position: absolute; height: 42px; width: 100%; bottom: -6px; left: 0; opacity: .35; }
.consolePanel { border-radius: 8px; border: 1px solid #353641; background: #242630; }
.consolePanel .panelHead { background: #1a1b21; padding: 10px 15px; border-bottom: 1px solid #363743; }
.terminalTitle { display: flex; align-items: center; gap: 10px; }
.terminalTitle > svg { width: 16px; height: 16px; color: #b0b2c0; }
.terminalTitle h2 { font-size: 12px; color: #e2e3eb; letter-spacing: 0; font-weight: 550; }
.terminalTitle > span { color: #80818e; font: 11px Consolas, monospace; margin-left: 5px; }
.consolePanel .buttonRow { gap: 4px; }
.consolePanel .buttonRow button { background: none; color: #9e9fad; border: 0; width: 30px; height: 28px; min-height: 28px; padding: 6px; border-radius: 4px; }
.consolePanel .buttonRow button:hover { background: #343541; color: #f4f4f5; }
.consolePanel .buttonRow svg { width: 14px; height: 14px; }
#consoleOutput { background: #242630; min-height: 410px; height: clamp(410px, 52vh, 660px); max-height: 660px; padding: 17px 19px; color: #f5f7fa; font-size: 12px; line-height: 1.75; border: 0; scrollbar-color: #494b59 #242630; overflow-wrap: anywhere; }
.terminalFooter { background: #1a1b21; border-top: 1px solid #343540; padding: 9px 15px; display: flex; justify-content: space-between; gap: 14px; color: #8c8e9c; font: 10px Consolas, monospace; }
.terminalFooter > span:first-child { display: flex; gap: 7px; align-items: center; }
.terminalDot { width: 5px; height: 5px; background: #78c99a; border-radius: 50%; }
#consoleStatus { color: #a4a6b3; font-size: 10px; margin: 0; }
.serverInfoGrid article { background: #18181c; border-color: #303035; }
.serverInfoGrid span { color: #91919c; }
.botConfigForm input, .projectTools select, .editor, .fileList, .editorHead { background: #171719; border-color: #333339; }
.botConfigForm { padding: 20px; }
.variableRow { border: 1px solid #2c2c33; border-radius: 7px; padding: 14px; background: #18181b; }
.variableRow label { font-size: 11px; }
.variableRow button { font-size: 11px; }
.startupDetails { border: 1px solid #2e2e35; background: #19191d; border-radius: 7px; padding: 16px; font-size: 12px; }
.fileList button:hover, .fileList button.active { background: #2a2a31; }
.editorHead { border-bottom-color: #333339; }
.settingCard svg { color: #aaaab5; }
.metricPlot svg { height: 180px; }
.routeLoader { background: rgba(9,9,10,.85); }
.routeCard { background: #19191c; border-color: #3b3b43; box-shadow: none; }
.routeCard > svg, .routeProgress i { color: #c5c5cd; background: #c5c5cd; }
.homePage { background: #0a0a0b; }
.homePage::before, .homePage::after { display: none; }
.vantaHomeBg { display: none; }
.topNav { border-bottom: 1px solid #26262c; background: #0a0a0b; }
.topLinks { font-size: 12px; }
.homeBrand .brandMark { width: 35px; height: 35px; }
.homeBrand strong { font-size: 17px; }
.hero { min-height: 620px; padding-top: 75px; padding-bottom: 60px; gap: 50px; }
.hero h1 { font-size: clamp(38px, 5vw, 65px); font-weight: 550; line-height: 1.07; letter-spacing: -.055em; }
.heroCopy > p:not(.eyebrow) { font-size: 16px; line-height: 1.7; color: #9d9da7; }
.heroPreview { background: #18191f; border-color: #3a3b45; box-shadow: 0 30px 80px rgba(0,0,0,.3); border-radius: 10px; }
.previewTop { background: #1b1c22; border-bottom-color: #3a3b43; }
.previewTop strong { color: #c9cad3; font-weight: 500; font-size: 11px; }
.previewGrid { background: #141416; }
#homeConsole { background: #242630; color: #e4e4ec; font-size: 12px; }
.heroStats { border-top: 1px solid #303037; padding-top: 20px; }
.runtimeCards article, .featureGrid article, .securityPanel, .pricingPanel, .securityGrid article, .pricingCard { background: #141416; border-color: #303036; box-shadow: none; }
.runtimeCards article, .featureGrid article { border-radius: 9px; }
.featureGrid svg, .securityGrid svg, .createAside svg { color: #b8bbc4; }
.sectionTitle h2 { font-weight: 550; font-size: 25px; }
.footer { border-top-color: #303036; }
.siteFooter { background: #141416; border-color: #303036; }
.footerButton { background: #242428; border-color: #44444c; color: #dedee4; }
.profileHero, .profileDetails, .profileActions, .authCard { background: #161619; border-color: #303036; }
@media (max-width: 1250px) { .serverList { grid-template-columns: repeat(2, minmax(0,1fr)); } .consoleResourceStrip { grid-template-columns: repeat(3, minmax(0,1fr)); } .consoleResourceStrip article:nth-child(3) { border-right: 0; } .consoleResourceStrip article:nth-child(-n+3) { border-bottom: 1px solid #2b2b32; } }
@media (max-width: 1000px) { .appShell { grid-template-columns: 205px minmax(0,1fr); gap: 10px; } #view { padding: 20px; } .projectsHeader { align-items: flex-start; flex-direction: column; } .projectTools { width: 100%; } .projectSearch { flex: 1; } .projectSearch input { width: 100%; } .manageHero { grid-template-columns: 1fr; } .manageButtons { justify-content: flex-start; } .workspaceBadge { display: none; } }
@media (max-width: 760px) { .appShell { display: block; padding: 8px; } .sidebar { position: relative; height: auto; top: 0; padding: 10px; margin-bottom: 12px; } .appBrand { padding: 0 0 10px; } .workspaceIdentity, .navSection, .planMini { display: none; } .sideNav { display: flex; flex-wrap: wrap; gap: 4px; } .sideNav button { width: auto; padding: 7px 9px; font-size: 11px; } .dashMain { padding: 0; } .dashHeader { padding: 4px 3px 14px; } .workspacePath { font-size: 0; gap: 4px; } .workspacePath > span { font-size: 12px; } .dashActions button { font-size: 10px; padding: 6px 8px; } #view { padding: 19px 15px; box-shadow: none; } .dashGrid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; } .metricCard { padding: 14px; } .metricCard > strong { font-size: 23px; } .serverList { grid-template-columns: 1fr; } .botTabs { gap: 14px; } .botTabs button { font-size: 11px; } .consoleResourceStrip article { padding: 13px 10px; } .consoleResourceStrip strong { font-size: 13px; } .consoleResourceStrip strong small { display: block; font-size: 9px; margin-top: 3px; } #consoleOutput { padding: 12px; min-height: 360px; height: 420px; font-size: 11px; } .terminalFooter > span:last-child { display: none; } .variableRow { grid-template-columns: 1fr 1fr; padding: 10px; } .hero { padding-top: 35px; } .projectTools { flex-wrap: wrap; } .projectTools select { width: 100%; } }