:root {
  color-scheme: dark;
  --bg: #090b10;
  --panel: #0e1118;
  --panel-raised: #121620;
  --line: #202531;
  --muted: #818998;
  --text: #f1f3f6;
  --purple: #a894ff;
  --purple-bright: #9274ff;
  --mint: #65e0be;
  font-family: "DM Sans", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--bg); color: var(--text); }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { opacity: .43; cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
.loading-screen { min-height: 100vh; display: grid; place-items: center; }
.brand { display: flex; align-items: center; gap: 11px; font: 600 19px "Space Grotesk", sans-serif; letter-spacing: -.7px; }
.brand-mark { width: 31px; height: 31px; display: grid; place-items: center; color: #0c0c13; font: 700 17px "Space Grotesk", sans-serif; background: linear-gradient(140deg, #c0aaff, #8762f5); border-radius: 10px 10px 10px 3px; box-shadow: 0 0 28px #9672ff42; }
.auth-page { min-height: 100vh; overflow: hidden; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; background: radial-gradient(ellipse at 48% 48%, #191529 0%, #0c0d13 43%, #090b10 78%); }
.auth-page::before, .auth-page::after { content: ""; position: absolute; width: 560px; height: 560px; border: 1px solid #aa91ff0b; border-radius: 50%; pointer-events: none; }
.auth-page::before { top: -365px; right: -100px; box-shadow: 0 0 0 70px #aa91ff05, 0 0 0 140px #aa91ff04; }
.auth-page::after { bottom: -450px; left: -250px; box-shadow: 0 0 0 100px #aa91ff04; }
.auth-glow { position: absolute; width: 390px; height: 390px; left: calc(50% - 195px); top: calc(50% - 245px); border-radius: 50%; background: #8864ff12; filter: blur(85px); pointer-events: none; }
.auth-brand { position: absolute; top: 34px; left: 44px; z-index: 1; }
.auth-card { position: relative; z-index: 1; width: min(100%, 418px); margin-top: 15px; }
.eyebrow { color: #9990c4; font: 500 10px "DM Mono", monospace; letter-spacing: 1.45px; }
.live-dot, .local-badge > span { display: inline-block; width: 6px; height: 6px; margin-right: 7px; vertical-align: 1px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 9px #65e0be75; }
.auth-card h1 { margin: 20px 0 14px; font: 600 clamp(38px, 8vw, 52px)/1.07 "Space Grotesk", sans-serif; letter-spacing: -2.6px; }
.auth-card h1 span { color: #aa96ff; }
.auth-copy { max-width: 360px; margin: 0; color: #9da2af; font-size: 14px; line-height: 1.75; }
.auth-divider { margin: 35px 0 17px; display: flex; gap: 13px; align-items: center; color: #737987; font: 500 9px "DM Mono", monospace; letter-spacing: 1.2px; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: #292b37; }
.auth-button { width: 100%; height: 53px; display: flex; align-items: center; gap: 13px; padding: 0 17px; margin-bottom: 11px; border: 1px solid #30323d; border-radius: 9px; background: #11131a; color: #eaebf0; font-size: 13px; font-weight: 600; transition: .18s ease; }
.auth-button:hover { border-color: #7262a5; transform: translateY(-1px); background: #15151f; }
.google-g { color: #fff; font: 700 16px Arial, sans-serif; text-shadow: 1px 1px #4285f4, -1px -1px #34a853; }
.discord-icon { color: #9c8bff; font-size: 20px; }
.button-arrow { margin-left: auto; color: #747986; font-size: 17px; }
.auth-note { margin: 14px 0 29px; text-align: center; color: #777d8a; font-size: 11px; line-height: 1.6; }
.auth-terms { padding-top: 19px; border-top: 1px solid #252631; text-align: center; color: #6f7481; font-size: 11px; }
.auth-side-note { position: absolute; bottom: 40px; left: 44px; color: #858796; font-size: 12px; }
.orbit-icon { color: #aa96ff; margin-right: 7px; font-size: 17px; }
.auth-version { position: absolute; right: 44px; bottom: 44px; color: #616675; font: 10px "DM Mono", monospace; letter-spacing: 1px; }
.dashboard-shell { display: flex; min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 2; width: 248px; display: flex; flex-direction: column; padding: 25px 16px 15px; border-right: 1px solid #1d212b; background: #0b0d13; }
.sidebar .brand { padding: 0 6px; }
.workspace-label, .nav-label { margin: 38px 8px 11px; color: #727887; font: 500 9px "DM Mono", monospace; letter-spacing: 1.25px; }
.workspace-switch { width: 100%; height: 43px; display: flex; align-items: center; padding: 0 8px; border: 1px solid #282c36; border-radius: 7px; background: #11141b; text-align: left; }
.workspace-avatar { width: 25px; height: 25px; display: grid; place-items: center; margin-right: 9px; border: 1px solid #58497f; border-radius: 7px; background: #29223c; color: #c2b5ff; font: 600 11px "Space Grotesk", sans-serif; }
.workspace-name { flex: 1; color: #d6d9e0; font-size: 12px; font-weight: 500; }
.chevron { color: #737986; }
.sidebar .nav-label { margin-top: 32px; }
.nav-item { width: 100%; height: 39px; display: flex; align-items: center; gap: 11px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: #9298a5; text-align: left; font-size: 12px; }
.nav-item.active { background: #201b31; color: #c5b7ff; }
.nav-icon { width: 15px; text-align: center; font-size: 16px; }
.nav-count { margin-left: auto; color: #9c91c5; font: 11px "DM Mono", monospace; }
.sidebar-bottom { margin-top: auto; }
.usage-card { padding: 13px 12px 10px; border: 1px solid #292b35; border-radius: 8px; background: #10131a; }
.usage-heading { display: flex; justify-content: space-between; color: #999eac; font: 9px "DM Mono", monospace; letter-spacing: .65px; }
.usage-heading span:last-child { color: #d3c8ff; }
.usage-track { height: 4px; overflow: hidden; margin-top: 11px; border-radius: 6px; background: #292b36; }
.usage-track span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #8b70f2, #c2aaff); }
.usage-card p { margin: 8px 0 0; color: #777d8a; font-size: 10px; }
.account-row { width: 100%; display: flex; align-items: center; gap: 9px; margin-top: 15px; padding: 11px 1px 0; border: 0; border-top: 1px solid #252832; background: transparent; text-align: left; }
.account-avatar, .top-avatar { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #574c80; border-radius: 50%; background: #27213a; color: #c6b8ff; font: 600 12px "Space Grotesk", sans-serif; }
.account-details { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.account-details strong { overflow: hidden; color: #dce0e7; font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.account-details small { overflow: hidden; color: #777d8a; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.account-menu { color: #858a96; font-size: 18px; }
.main-panel { width: calc(100% - 248px); min-height: 100vh; margin-left: 248px; }
.topbar { height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 38px; border-bottom: 1px solid #1d212b; }
.breadcrumbs { display: flex; align-items: center; gap: 10px; color: #8d93a1; font-size: 11px; }
.breadcrumbs span { color: #555b68; }
.breadcrumbs strong { color: #dadde4; font-weight: 500; }
.breadcrumbs button { border: 0; background: none; color: #9197a4; padding: 0; font-size: 11px; }
.breadcrumbs button:hover, .back-link:hover { color: #cabfff; }
.topbar-right { display: flex; align-items: center; gap: 15px; }
.local-badge { padding: 6px 9px; border: 1px solid #30323b; border-radius: 20px; color: #a4a8b3; font: 9px "DM Mono", monospace; letter-spacing: .45px; }
.local-badge > span { width: 5px; height: 5px; margin-right: 5px; }
.icon-button { border: 0; background: none; color: #9297a3; font-size: 17px; }
.top-avatar { width: 27px; height: 27px; font-size: 10px; }
.page-content { max-width: 1170px; margin: 0 auto; padding: 42px 40px 20px; }
.welcome-row, .section-heading, .project-title-row, .deploy-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.welcome-row h1, .project-title-row h1, .deploy-heading h1 { margin: 10px 0 6px; font: 600 27px "Space Grotesk", sans-serif; letter-spacing: -.9px; }
.wave { display: inline-block; margin-left: 9px; color: #b6a2ff; font-size: 19px; }
.subheading { margin: 0; color: #8c92a0; font-size: 12px; }
.primary-button, .outline-button, .danger-button { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 13px; border: 1px solid transparent; border-radius: 6px; background: linear-gradient(115deg, #a18bff, #8266e9); box-shadow: 0 3px 14px #8065e933; color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; transition: .16s ease; }
.primary-button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 19px #8065e955; }
.primary-button > span { font-size: 15px; }
.quick-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 29px; }
.stat-card { min-height: 128px; position: relative; padding: 17px 17px 13px; border: 1px solid #242833; border-radius: 9px; background: linear-gradient(140deg, #12151d, #0f1118); }
.stat-icon { position: absolute; top: 16px; right: 17px; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; font-size: 16px; }
.stat-icon.purple { background: #29223d; color: #b5a4ff; }
.stat-icon.mint { background: #18312d; color: #69d9b8; }
.stat-icon.amber { background: #342d21; color: #dfb871; }
.stat-label { color: #858b99; font: 9px "DM Mono", monospace; letter-spacing: .9px; }
.stat-value { margin-top: 11px; color: #eff0f5; font: 600 24px "Space Grotesk", sans-serif; letter-spacing: -.5px; }
.stat-value > span { color: #777e8d; font-size: 15px; font-weight: 400; }
.stat-value.status-offline { display: flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 18px; }
.status-offline i, .project-status i { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #737987; }
.stat-foot { margin-top: 5px; color: #777d8a; font-size: 10px; }
.projects-section { margin-top: 43px; }
.section-heading { align-items: flex-end; margin-bottom: 17px; }
.section-heading h2 { margin: 7px 0 0; font: 600 17px "Space Grotesk", sans-serif; letter-spacing: -.3px; }
.heading-count { margin-left: 5px; padding: 3px 7px; border: 1px solid #30323d; border-radius: 10px; color: #9da2ad; font: 10px "DM Mono", monospace; vertical-align: 2px; }
.text-button { border: 0; background: none; color: #b2a1ff; font-size: 11px; }
.text-button span { margin-left: 4px; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.project-card, .add-project-card { min-height: 167px; padding: 16px; border: 1px solid #272b36; border-radius: 9px; background: linear-gradient(145deg, #141720, #101219); text-align: left; transition: .18s ease; }
.project-card:hover { border-color: #65558e; transform: translateY(-2px); }
.project-card-top { display: flex; justify-content: space-between; align-items: center; }
.project-language { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; font: 600 9px "DM Mono", monospace; }
.project-language.yellow { background: #332d1d; color: #e8cc6e; }
.project-language.blue { background: #202d40; color: #85baff; }
.project-language.mint { background: #1b322b; color: #75dbb5; }
.project-language.orange { background: #37281e; color: #e8a56c; }
.project-language.cyan { background: #1d3035; color: #83d2df; }
.project-language.purple { background: #2a2340; color: #c0adff; }
.project-menu { color: #8f95a1; font-size: 16px; }
.project-card h3 { margin: 13px 0 3px; font: 600 14px "Space Grotesk", sans-serif; }
.project-card > p { margin: 0; color: #838997; font-size: 10px; }
.project-card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 19px; padding-top: 11px; border-top: 1px solid #262a34; }
.project-status { display: inline-flex; align-items: center; gap: 6px; color: #989daa; font-size: 10px; white-space: nowrap; }
.project-status.online i { background: #65e0be; box-shadow: 0 0 7px #65e0be70; }
.project-open { color: #b3a2ff; font-size: 10px; white-space: nowrap; }
.add-project-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border-style: dashed; background: #0d1016; color: #a1a6b2; }
.add-project-card > span { width: 30px; height: 30px; display: grid; place-items: center; margin-bottom: 2px; border: 1px solid #3a354c; border-radius: 50%; color: #b3a2ff; font-size: 19px; }
.add-project-card strong { font-size: 11px; font-weight: 500; }
.add-project-card small { color: #777d8a; font-size: 10px; }
.empty-state { min-height: 270px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed #30323f; border-radius: 10px; background: radial-gradient(ellipse at 50% 30%, #1a1626, #101219 66%); text-align: center; }
.empty-art { position: relative; width: 65px; height: 65px; display: grid; place-items: center; margin-bottom: 13px; border: 1px solid #4b3b71; border-radius: 18px; background: #201a30; color: #c2b3ff; font-size: 26px; }
.empty-art i { position: absolute; top: -8px; right: -9px; color: #c6adff; font-size: 17px; font-style: normal; }
.empty-state h3 { margin: 0; font: 500 16px "Space Grotesk", sans-serif; }
.empty-state p { margin: 7px 0 17px; color: #8e94a1; font-size: 11px; }
.page-footer { display: flex; justify-content: space-between; margin-top: 55px; color: #5f6470; font: 9px "DM Mono", monospace; letter-spacing: .65px; }
.footer-dot { color: #9a88ec; padding: 0 4px; }
.detail-page, .deployment-page { max-width: 1000px; }
.back-link { padding: 0; border: 0; background: none; color: #8f95a2; font-size: 11px; }
.project-title-row { align-items: flex-end; margin-top: 22px; padding-bottom: 23px; border-bottom: 1px solid #242832; }
.project-status.large { padding: 7px 10px; border: 1px solid #2d313a; border-radius: 18px; }
.deployment-empty { min-height: 410px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.deployment-illustration { width: 102px; height: 102px; position: relative; display: grid; place-items: center; margin-bottom: 25px; border: 1px solid #352b4e; border-radius: 28px; background: radial-gradient(circle, #28203a, #16141d); color: #c7b9ff; }
.deploy-cube { font-size: 37px; transform: rotate(-35deg); }
.orbit { position: absolute; inset: 12px -8px; border: 1px solid #9273f159; border-radius: 50%; transform: rotate(-30deg); }
.orbit-two { inset: -5px 22px; transform: rotate(38deg); }
.deployment-illustration > i { position: absolute; top: 5px; right: 7px; color: #c9b5ff; font-style: normal; }
.deployment-empty h2 { margin: 10px 0 8px; font: 600 21px "Space Grotesk", sans-serif; }
.deployment-empty > p { max-width: 390px; margin: 0 0 20px; color: #9197a4; font-size: 12px; line-height: 1.7; }
.deployment-limit { margin-top: 16px; color: #777d8a; font: 9px "DM Mono", monospace; letter-spacing: 1px; }
.deploy-heading { align-items: center; margin: 21px 0 23px; }
.deploy-heading h1 { margin: 6px 0 9px; }
.deploy-meta { display: flex; align-items: center; gap: 12px; }
.slash { color: #606675; padding: 0 4px; }
.language-pill { padding: 4px 8px; border: 1px solid #34313e; border-radius: 5px; color: #b6a8e8; font: 10px "DM Mono", monospace; }
.deploy-actions { display: flex; gap: 7px; }
.outline-button, .danger-button { border-color: #343844; background: #12151c; box-shadow: none; color: #c2c6cf; }
.outline-button:hover:not(:disabled) { border-color: #7669a5; color: #d4cbff; }
.danger-button { border-color: #493034; color: #d98a8d; }
.danger-button:disabled { opacity: .4; }
.workspace-tabs { min-height: 45px; display: flex; align-items: stretch; gap: 20px; border-bottom: 1px solid #252934; }
.workspace-tabs [role="tab"] { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 0 2px; border: 0; background: none; color: #8d93a0; font-size: 11px; }
.workspace-tabs [role="tab"] > span:first-child { font-size: 14px; }
.workspace-tabs [role="tab"].selected { color: #c5b7ff; }
.workspace-tabs [role="tab"].selected::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 2px; background: #a48aff; }
.tab-count { min-width: 17px; padding: 2px 4px; border-radius: 8px; background: #22232c; color: #aaaeba; text-align: center; font: 9px "DM Mono", monospace; }
.tab-spacer { flex: 1; }
.one-deployment { align-self: center; color: #777d8a; font: 9px "DM Mono", monospace; letter-spacing: .6px; }
.console-card, .files-card, .startup-card { margin-top: 19px; overflow: hidden; border: 1px solid #292d38; border-radius: 8px; background: #0c0f14; }
.console-toolbar { height: 41px; display: flex; align-items: center; gap: 11px; padding: 0 14px; border-bottom: 1px solid #282b35; background: #12151c; }
.terminal-dot { width: 7px; height: 7px; display: inline-block; margin-right: 4px; border-radius: 50%; }
.terminal-dot.red { background: #df717a; }
.terminal-dot.yellow { background: #dcb660; }
.terminal-dot.green { background: #67c89f; }
.console-title { margin-left: 7px; color: #969ba8; font: 9px "DM Mono", monospace; letter-spacing: .8px; }
.clear-console { margin-left: auto; border: 0; background: none; color: #898f9c; font-size: 10px; }
.clear-console:hover { color: #ccc2ff; }
.terminal-output { min-height: 265px; padding: 17px 15px; color: #b7c1bc; font: 11px/1.8 "DM Mono", monospace; }
.runtime-log { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; color: #b7c1bc; font: inherit; }
.terminal-welcome { min-height: 228px; display: flex; align-items: center; justify-content: center; gap: 13px; color: #848a96; }
.terminal-symbol { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #353044; border-radius: 9px; background: #1a1723; color: #b7a6ff; font-size: 13px; }
.terminal-welcome strong { color: #c5c8d0; font: 500 11px "DM Mono", monospace; }
.terminal-welcome p { margin: 5px 0 0; color: #818794; font: 10px "DM Sans", sans-serif; }
.terminal-line { display: flex; gap: 12px; }
.terminal-time { color: #666d7c; }
.terminal-line.warning { color: #d5b875; }
.console-status { height: 34px; display: flex; justify-content: space-between; align-items: center; padding: 0 14px; border-top: 1px solid #252933; background: #11141a; color: #7d8491; font: 9px "DM Mono", monospace; }
.console-status i { width: 5px; height: 5px; display: inline-block; margin-right: 5px; border-radius: 50%; background: #737987; }
.console-status b { color: #a28bf0; font-weight: 400; }
.console-notice { display: flex; gap: 9px; margin-top: 12px; padding: 11px 13px; border: 1px solid #3e3524; border-radius: 6px; background: #1a1710; color: #d6b66e; font-size: 12px; }
.console-notice p { margin: 0; color: #a9a08c; font-size: 10px; line-height: 1.55; }
.console-notice strong { color: #d8c495; font-weight: 600; }
.files-card { padding: 17px; background: #10131a; }
.files-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.files-card-heading h2, .startup-heading h2 { margin: 0; font: 600 15px "Space Grotesk", sans-serif; }
.files-card-heading p, .startup-heading p { margin: 5px 0 0; color: #878d9a; font-size: 10px; }
.upload-button { position: relative; min-height: 31px; cursor: pointer; }
.upload-drop { min-height: 138px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 16px; border: 1px dashed #373a46; border-radius: 7px; background: #0e1117; transition: .15s ease; }
.upload-drop.dragging { border-color: #a08aff; background: #171423; }
.upload-icon { width: 27px; height: 27px; display: grid; place-items: center; margin-bottom: 7px; border: 1px solid #363044; border-radius: 8px; color: #b6a5ff; }
.upload-drop strong { font-size: 10px; font-weight: 500; }
.upload-drop p { margin: 4px 0; color: #828894; font-size: 9px; }
.browse-link { color: #b8a7ff; cursor: pointer; font-size: 10px; }
.file-empty { min-height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #a99af2; }
.file-empty > span { font-size: 21px; }
.file-empty strong { margin-top: 7px; color: #c6c9d1; font-size: 11px; font-weight: 500; }
.file-empty p { margin: 5px 0 0; color: #838996; font-size: 10px; }
.file-list { margin-top: 15px; }
.file-row { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 5px 9px; border-top: 1px solid #252933; }
.file-icon { color: #ad9bff; }
.file-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.file-info strong { color: #d6d9e1; font-size: 10px; font-weight: 500; }
.file-info small { color: #838996; font-size: 9px; }
.remove-file { border: 0; background: none; color: #858b98; font-size: 17px; }
.startup-card { padding: 19px; background: #10131a; }
.startup-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 24px; }
.startup-icon { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid #403455; border-radius: 9px; background: #211b2e; color: #b5a3ff; font-size: 15px; }
.field-label { display: block; margin: 15px 0 7px; color: #969ba7; font: 9px "DM Mono", monospace; letter-spacing: .8px; }
.command-input { height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid #373441; border-radius: 6px; background: #0c0f14; color: #ad9bff; }
.command-input:focus-within { border-color: #8770ca; }
.command-input > span:first-child { font: 14px "DM Mono", monospace; }
.command-input input { min-width: 0; flex: 1; border: 0; outline: 0; background: none; color: #d9dce4; font: 11px "DM Mono", monospace; }
.command-input input::placeholder { color: #656b78; }
.command-language { color: #858b98; font: 9px "DM Mono", monospace; }
.command-help { margin-top: 9px; color: #8a909e; font-size: 10px; }
.command-help > span { color: #aa97ff; margin-right: 4px; }
.startup-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 23px; padding-top: 15px; border-top: 1px solid #282b35; color: #858b98; font-size: 10px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: #05060bb8; backdrop-filter: blur(7px); }
.modal-card { position: relative; width: min(100%, 440px); padding: 25px; border: 1px solid #343441; border-radius: 12px; background: linear-gradient(145deg, #171922, #101219); box-shadow: 0 24px 90px #0009; }
.modal-close { position: absolute; top: 13px; right: 15px; width: 29px; height: 29px; border: 1px solid #333641; border-radius: 6px; background: #171922; color: #9da2ad; font-size: 19px; line-height: 1; }
.modal-card h2 { margin: 10px 0 6px; font: 600 21px "Space Grotesk", sans-serif; }
.modal-copy { max-width: 350px; margin: 0 0 20px; color: #9298a5; font-size: 11px; line-height: 1.6; }
.modal-card input, .modal-card select { width: 100%; height: 39px; padding: 0 11px; border: 1px solid #373a46; border-radius: 6px; outline: 0; background: #0c0f15; color: #e2e4ea; font-size: 11px; }
.modal-card input:focus, .modal-card select:focus { border-color: #8973cf; }
.modal-card input::placeholder { color: #676d7a; }
.select-wrap { position: relative; }
.select-wrap select { appearance: none; }
.select-wrap > span { position: absolute; top: 10px; right: 12px; color: #9da2ad; pointer-events: none; }
.modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 24px; padding-top: 17px; border-top: 1px solid #2a2d37; color: #858b98; font-size: 10px; }
.language-summary { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 11px; border: 1px solid #2b2e39; border-radius: 7px; background: #11141b; }
.summary-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: #29213c; color: #bbaaff; }
.language-summary > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.language-summary small { color: #858b98; font: 9px "DM Mono", monospace; }
.language-summary strong { color: #d8dbe2; font-size: 11px; font-weight: 500; }
.language-tag { color: #81d8b8; font: 9px "DM Mono", monospace; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 20; max-width: calc(100vw - 44px); padding: 11px 15px; transform: translateY(12px); opacity: 0; border: 1px solid #3a354a; border-radius: 8px; background: #1a1724; box-shadow: 0 8px 35px #0008; color: #e3dfff; font-size: 11px; pointer-events: none; transition: .2s ease; }
.toast.visible { transform: translateY(0); opacity: 1; }

@media (min-width: 1500px) { .page-content { padding-top: 53px; } }
@media (max-width: 900px) { .sidebar { width: 210px; } .main-panel { width: calc(100% - 210px); margin-left: 210px; } .page-content { padding: 32px 25px 20px; } .topbar { padding: 0 25px; } .quick-stats { gap: 9px; } .stat-card { padding: 14px 12px; } }
@media (max-width: 650px) {
  .sidebar { width: 57px; padding: 17px 8px 12px; }
  .sidebar .brand { justify-content: center; padding: 0; }
  .sidebar .brand > span:last-child, .workspace-label, .workspace-switch, .nav-label, .nav-item:not(.active), .nav-item .nav-count, .sidebar-bottom .usage-card, .account-details, .account-menu { display: none; }
  .sidebar .nav-item { justify-content: center; width: 39px; padding: 0; margin-top: 26px; overflow: hidden; color: transparent; font-size: 0; }
  .sidebar .nav-item .nav-icon { color: #c5b7ff; font-size: 16px; }
  .sidebar .nav-item.active { margin-top: 26px; background: #201b31; }
  .account-row { justify-content: center; border-top: 0; padding-top: 10px; }
  .main-panel { width: calc(100% - 57px); margin-left: 57px; }
  .topbar { height: 55px; padding: 0 14px; }
  .topbar-right { gap: 8px; }
  .local-badge { padding: 5px 6px; font-size: 8px; }
  .page-content { padding: 27px 15px 18px; }
  .welcome-row { align-items: flex-start; }
  .welcome-row h1 { font-size: 21px; }
  .welcome-row .primary-button { min-height: 32px; padding: 0 8px; font-size: 10px; }
  .quick-stats { grid-template-columns: 1fr; gap: 8px; margin-top: 20px; }
  .stat-card { min-height: 91px; }
  .stat-value { margin-top: 7px; }
  .stat-foot { margin-top: 2px; }
  .projects-section { margin-top: 30px; }
  .section-heading h2 { font-size: 15px; }
  .project-grid { grid-template-columns: 1fr; }
  .project-card, .add-project-card { min-height: 145px; }
  .page-footer { flex-direction: column; gap: 8px; margin-top: 35px; font-size: 8px; }
  .auth-brand { top: 25px; left: 20px; }
  .auth-side-note { bottom: 20px; left: 20px; font-size: 10px; }
  .auth-version { right: 20px; bottom: 23px; font-size: 8px; }
  .auth-card h1 { letter-spacing: -1.8px; }
  .deploy-heading { align-items: flex-start; flex-direction: column; gap: 15px; }
  .deploy-heading h1 { font-size: 23px; }
  .deploy-actions { width: 100%; }
  .deploy-actions button { min-height: 33px; flex: 1; padding: 0 7px; font-size: 10px; }
  .workspace-tabs { gap: 12px; }
  .workspace-tabs [role="tab"] { gap: 4px; font-size: 10px; }
  .one-deployment { font-size: 8px; }
  .terminal-output { min-height: 220px; padding: 12px 9px; font-size: 9px; }
  .console-status { padding: 0 8px; font-size: 8px; }
  .files-card { padding: 12px; }
  .files-card-heading { align-items: flex-start; }
  .files-card-heading h2, .startup-heading h2 { font-size: 13px; }
  .files-card-heading p, .startup-heading p { max-width: 190px; line-height: 1.5; }
  .upload-button { min-height: 29px; padding: 0 8px; font-size: 9px; }
  .startup-card { padding: 13px; }
  .startup-footer { align-items: flex-start; flex-direction: column; }
}

body {
  background:
    radial-gradient(ellipse at 86% 4%, #4b357c22, transparent 37rem),
    radial-gradient(ellipse at 15% 65%, #193c3920, transparent 40rem),
    #090b10;
}

.dashboard-shell { position: relative; isolation: isolate; }
.dashboard-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(#ffffff04 1px, transparent 1px), linear-gradient(90deg, #ffffff04 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, #0008, transparent 78%);
  pointer-events: none;
}
.sidebar { background: linear-gradient(180deg, #0d1018f7, #0a0c12fa); box-shadow: 12px 0 42px #00000014; }
.sidebar .brand-mark { width: 34px; height: 34px; }
.workspace-switch { transition: .18s ease; }
.workspace-switch:hover { border-color: #51466f; background: #171622; }
.nav-item { transition: background .16s ease, color .16s ease; }
.nav-item:not(.active):hover { background: #171921; color: #d7d9e2; }
.topbar { position: sticky; top: 0; z-index: 3; background: #0c0e15d9; backdrop-filter: blur(18px); }
.page-content { max-width: 1260px; padding-top: 37px; }
.welcome-row {
  position: relative;
  min-height: 166px;
  overflow: hidden;
  padding: 27px 28px;
  border: 1px solid #393345;
  border-radius: 15px;
  background:
    radial-gradient(ellipse at 83% 6%, #9876ff24, transparent 39%),
    linear-gradient(115deg, #15141f 5%, #11141c 67%, #151323);
  box-shadow: 0 16px 45px #05050a3d, inset 0 1px #ffffff08;
}
.welcome-row::before {
  content: "";
  position: absolute;
  top: -98px;
  right: 12%;
  width: 240px;
  height: 240px;
  border: 1px solid #c8b7ff14;
  border-radius: 50%;
  box-shadow: 0 0 0 28px #c8b7ff08, 0 0 0 58px #c8b7ff05;
  pointer-events: none;
}
.welcome-row::after {
  content: "H";
  position: absolute;
  top: 5px;
  right: 12%;
  color: #c9b8ff0a;
  font: 700 150px/.95 "Space Grotesk", sans-serif;
  pointer-events: none;
}
.welcome-row > * { position: relative; z-index: 1; }
.welcome-row h1 { font-size: clamp(26px, 3vw, 34px); }
.welcome-row .eyebrow { color: #a999dc; }
.welcome-row .subheading { font-size: 13px; }
.welcome-row > .primary-button { min-height: 41px; padding: 0 16px; }
.quick-stats { gap: 16px; margin-top: 18px; }
.stat-card {
  min-height: 139px;
  overflow: hidden;
  border-color: #282b38;
  border-radius: 11px;
  background:
    radial-gradient(ellipse at 100% 0%, #a48aff0b, transparent 48%),
    linear-gradient(145deg, #141720, #101219);
  box-shadow: inset 0 1px #ffffff05, 0 8px 25px #00000010;
  transition: transform .18s ease, border-color .18s ease;
}
.stat-card:hover { transform: translateY(-2px); border-color: #484156; }
.stat-icon { width: 34px; height: 34px; border: 1px solid #ffffff0a; }
.stat-value { font-size: 29px; }
.projects-section { margin-top: 40px; }
.section-heading { margin-bottom: 20px; }
.section-heading h2 { font-size: 19px; }
.project-grid { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 16px; }
.project-card {
  position: relative;
  min-height: 188px;
  overflow: hidden;
  border-color: #292d3a;
  border-radius: 11px;
  background:
    radial-gradient(ellipse at 100% 0%, #a48aff10, transparent 43%),
    linear-gradient(145deg, #151821, #101219);
  box-shadow: inset 0 1px #ffffff05, 0 12px 32px #00000012;
}
.project-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 12px;
  left: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #b8a5ff63, transparent);
  opacity: 0;
  transition: opacity .18s ease;
}
.project-card:hover { border-color: #7763a9; box-shadow: 0 14px 36px #0004, 0 0 26px #8f72f30c; }
.project-card:hover::before { opacity: 1; }
.project-card h3 { font-size: 16px; }
.project-card > p { font-size: 11px; }
.project-card-bottom { margin-top: 23px; }
.empty-state {
  position: relative;
  overflow: hidden;
  min-height: 310px;
  border-color: #3a354a;
  border-radius: 13px;
  background:
    radial-gradient(ellipse at 50% 0%, #9978ff19, transparent 55%),
    linear-gradient(145deg, #15141f, #101219);
  box-shadow: inset 0 1px #ffffff06;
}
.empty-state h3 { font-size: 18px; }
.empty-state p { font-size: 12px; }
.page-footer { margin-top: 44px; padding-top: 16px; border-top: 1px solid #20232d; }
.deploy-heading { padding: 21px; border: 1px solid #292d3a; border-radius: 12px; background: linear-gradient(115deg, #151720, #101219); }
.workspace-tabs { min-height: 52px; gap: 25px; margin-top: 20px; }
.workspace-tabs [role="tab"] { font-size: 12px; }
.console-card, .files-card, .startup-card { border-color: #2b2e3b; border-radius: 11px; box-shadow: 0 14px 38px #00000017, inset 0 1px #ffffff04; }
.console-toolbar { height: 46px; }
.terminal-output { min-height: 310px; }
.files-card, .startup-card { padding: 22px; background: linear-gradient(150deg, #13161e, #0f1117); }
.files-card-heading h2, .startup-heading h2 { margin-top: 5px; font-size: 17px; }
.files-card-heading p, .startup-heading p { font-size: 11px; }
.upload-drop { min-height: 160px; }
.file-row { min-height: 51px; }
.startup-card { padding: 25px; }
.startup-heading { margin-bottom: 24px; }
.startup-icon { width: 42px; height: 42px; }
.startup-step { display: grid; grid-template-columns: 35px minmax(0, 1fr); gap: 12px; padding: 18px 0; border-top: 1px solid #282b36; }
.step-number { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #443a5d; border-radius: 8px; background: #201b2d; color: #c4b5ff; font: 10px "DM Mono", monospace; }
.step-content { min-width: 0; }
.step-content h3, .step-title-row h3 { margin: 3px 0 5px; color: #e4e6ed; font: 600 13px "Space Grotesk", sans-serif; }
.step-content > p, .step-title-row p { margin: 0 0 12px; color: #888f9c; font-size: 10px; line-height: 1.55; }
.step-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.step-title-row p { margin-bottom: 11px; }
.optional-tag { margin-left: 5px; padding: 3px 5px; border: 1px solid #35313f; border-radius: 8px; color: #8f95a2; font: 8px "DM Mono", monospace; vertical-align: 1px; }
.command-preset { min-height: 30px; padding: 0 9px; border: 1px solid #403958; border-radius: 6px; background: #1d1928; color: #c2b1ff; font-size: 9px; white-space: nowrap; transition: .16s ease; }
.command-preset:hover { border-color: #8170af; background: #272036; }
.script-input { min-height: 77px; display: flex; align-items: flex-start; gap: 11px; padding: 12px; border: 1px solid #373441; border-radius: 8px; background: #0b0e14; color: #aa96ff; }
.script-input:focus-within { border-color: #8770ca; box-shadow: 0 0 0 3px #8f72f31a; }
.script-prompt { padding-top: 2px; font: 12px "DM Mono", monospace; }
.script-input textarea { width: 100%; min-height: 50px; resize: vertical; border: 0; outline: 0; background: transparent; color: #d9dce4; font: 11px/1.65 "DM Mono", monospace; }
.script-input textarea::placeholder { color: #606775; }
.command-input { height: 47px; border-radius: 8px; }
.command-input:focus-within { box-shadow: 0 0 0 3px #8f72f31a; }
.command-input input { font-size: 12px; }
.command-help { font-size: 10px; line-height: 1.6; }
.startup-footer { margin-top: 14px; padding-top: 17px; }
.discord-tip { display: flex; gap: 11px; margin: 10px 0 4px 47px; padding: 13px; border: 1px solid #3c3550; border-radius: 8px; background: #181521; color: #b8a6ff; font-size: 15px; }
.discord-tip p { margin: 0; color: #aaa4b9; font-size: 10px; line-height: 1.65; }
.discord-tip strong { color: #ded7f1; }
.discord-tip code { padding: 2px 4px; border-radius: 4px; background: #282433; color: #dacfff; font: 10px "DM Mono", monospace; }
.starter-card { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 13px; border: 1px solid #3c3550; border-radius: 9px; background: linear-gradient(110deg, #211c2c, #15151d); }
.starter-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #54466e; border-radius: 9px; background: #30243f; color: #c9b7ff; font-size: 17px; }
.starter-copy { min-width: 0; flex: 1; }
.starter-copy strong { color: #e4e1ed; font: 600 11px "Space Grotesk", sans-serif; }
.starter-copy p { margin: 4px 0 0; color: #9993a8; font-size: 9px; line-height: 1.5; }
.starter-card > .outline-button { min-height: 31px; font-size: 9px; }
.local-badge { border-color: #464153; background: #171620; }
.primary-button, .outline-button, .danger-button { min-height: 38px; border-radius: 7px; }
.primary-button { background: linear-gradient(115deg, #aa93ff, #795be0); }
.primary-button:hover:not(:disabled) { box-shadow: 0 7px 23px #8065e955; }
.modal-card { border-color: #494158; border-radius: 14px; }
.toast { border-color: #51466b; border-radius: 9px; }

@media (max-width: 650px) {
  .welcome-row { min-height: 148px; padding: 20px 17px; }
  .welcome-row::before { right: -85px; }
  .welcome-row::after { right: -2%; font-size: 120px; }
  .welcome-row h1 { font-size: 22px; }
  .project-grid { grid-template-columns: 1fr; }
  .deploy-heading { padding: 15px; }
  .startup-card, .files-card { padding: 14px; }
  .step-title-row { flex-direction: column; }
  .command-preset { white-space: normal; }
  .discord-tip { margin-left: 0; }
  .starter-card { align-items: flex-start; flex-wrap: wrap; }
  .starter-card > .outline-button { margin-left: 46px; }
}

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

:root {
  color-scheme: light;
  --bg: #f5f6ef;
  --panel: #fff;
  --panel-raised: #fbfcf8;
  --line: #e2e6dc;
  --muted: #737b70;
  --text: #19251e;
  --purple: #b7ee65;
  --purple-bright: #9bd83f;
  --mint: #84d16b;
  font-family: "DM Sans", sans-serif;
}

body {
  background: #f5f6ef;
  color: #19251e;
}

button, input, select, textarea { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid #9bd83f;
  outline-offset: 3px;
}

.brand { gap: 10px; color: #f5f6ef; font-size: 20px; letter-spacing: -1px; }
.brand-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px 12px 12px 4px;
  background: #d2fb77;
  box-shadow: 0 5px 16px #13241c35;
  color: #17241d;
}
.brand-mark svg { width: 100%; height: 100%; padding: 5px; }
.brand-period { color: #a9e85d; }

.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  overflow: hidden;
  background: #f5f6ef;
}
.auth-page::before, .auth-page::after, .auth-glow { display: none; }
.auth-topbar {
  position: relative;
  z-index: 1;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6.2vw;
}
.auth-topbar .auth-brand { position: relative; top: auto; left: auto; }
.auth-topbar .brand { color: #17241d; }
.auth-topbar .brand-mark { width: 39px; height: 39px; }
.auth-top-note, .art-caption, .art-footer {
  color: #798276;
  font: 500 9px "DM Mono", monospace;
  letter-spacing: 1.15px;
}
.auth-layout {
  width: min(100%, 1600px);
  min-height: calc(100vh - 84px);
  display: grid;
  grid-template-columns: minmax(490px, .92fr) minmax(420px, 1.08fr);
  gap: clamp(45px, 8vw, 130px);
  align-items: stretch;
  margin: 0 auto;
  padding: 0 5vw 36px 10vw;
}
.auth-main { display: flex; flex-direction: column; justify-content: center; padding: 30px 0 48px; }
.auth-card { width: min(100%, 460px); margin: 0; }
.eyebrow { color: #66745d; font-size: 10px; letter-spacing: 1.25px; }
.live-dot { background: #69b84c; box-shadow: 0 0 0 4px #69b84c1f; }
.auth-card h1 {
  margin: 23px 0 17px;
  color: #17241d;
  font: 600 clamp(48px, 6vw, 76px)/.99 "Space Grotesk", sans-serif;
  letter-spacing: -5px;
}
.auth-card h1 span { color: #798b60; }
.auth-copy { max-width: 390px; color: #6d766b; font-size: 15px; line-height: 1.8; }
.auth-divider { margin: 39px 0 16px; color: #798276; font-size: 9px; }
.auth-divider::before, .auth-divider::after { background: #dfe4d8; }
.auth-button {
  height: 58px;
  gap: 14px;
  padding: 0 19px;
  border: 1px solid #17241d;
  border-radius: 8px;
  background: #17241d;
  color: #f6f7f1;
  font-size: 13px;
  box-shadow: 0 8px 18px #17241d1a;
}
.auth-button:hover { border-color: #314437; transform: translateY(-2px); background: #26382c; }
.discord-icon { color: #d2fb77; font-size: 21px; }
.button-arrow { color: #c9d2c7; }
.auth-note { margin: 13px 0 27px; color: #737b70; font-size: 11px; }
.auth-terms { padding-top: 17px; border-color: #dfe4d8; color: #81877d; text-align: left; }
.auth-side-note { position: static; margin-top: 42px; color: #768070; font-size: 11px; }
.orbit-icon { color: #6d9851; }
.auth-art {
  position: relative;
  min-height: 590px;
  align-self: center;
  overflow: hidden;
  padding: 28px;
  border-radius: 7px 7px 7px 84px;
  background:
    radial-gradient(ellipse at 68% 37%, #40614c 0, transparent 37%),
    linear-gradient(145deg, #21392d, #14261f 73%);
  box-shadow: 0 30px 75px #1e332321;
  color: #f2f5e9;
}
.auth-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(140deg, #000b, transparent 70%);
  pointer-events: none;
}
.auth-art::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  right: -230px;
  bottom: -240px;
  border: 1px solid #d2fb7726;
  border-radius: 50%;
  box-shadow: 0 0 0 45px #d2fb7710, 0 0 0 90px #d2fb7709;
}
.art-caption, .art-footer { position: relative; z-index: 1; display: flex; justify-content: space-between; color: #c1ccbb; font-size: 8px; }
.orbit-scene { position: relative; width: min(100%, 480px); height: 380px; margin: 10px auto 4px; }
.orbit-ring { position: absolute; top: 50%; left: 50%; border: 1px solid #d2fb772c; border-radius: 50%; transform: translate(-50%, -50%); }
.orbit-ring-one { width: 265px; height: 265px; }
.orbit-ring-two { width: 375px; height: 205px; transform: translate(-50%, -50%) rotate(-32deg); border-color: #f0f3db24; }
.orbit-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 142px;
  height: 142px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border: 1px solid #d2fb7740;
  border-radius: 42px;
  background: linear-gradient(145deg, #314a39, #1d3327);
  box-shadow: 0 20px 60px #080f0b77, inset 0 1px #ffffff18;
  transform: translate(-50%, -50%) rotate(-5deg);
}
.orbit-core .brand-mark { width: 48px; height: 48px; transform: rotate(5deg); }
.orbit-core > span:last-child { color: #dbe5d2; font: 9px/1.5 "DM Mono", monospace; letter-spacing: 1.1px; text-align: center; }
.orbit-node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border: 1px solid #ffffff20;
  border-radius: 7px;
  background: #21382b;
  box-shadow: 0 12px 30px #0a160f52;
  color: #eef4e7;
  font: 10px "DM Mono", monospace;
}
.node-one { top: 53px; right: 8%; }
.node-two { bottom: 56px; left: 8%; }
.node-dot { width: 7px; height: 7px; border-radius: 50%; background: #d2fb77; box-shadow: 0 0 12px #d2fb77; }
.orbit-spark { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #d2fb77; box-shadow: 0 0 22px 4px #d2fb7750; }
.spark-one { top: 85px; left: 22%; }
.spark-two { right: 22%; bottom: 78px; width: 5px; height: 5px; background: #f4f4df; }
.art-terminal { position: relative; z-index: 1; max-width: 420px; margin: 0 auto; padding: 14px 16px 16px; border: 1px solid #ffffff1a; border-radius: 7px; background: #0e1c15a8; }
.art-terminal-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #ffffff13; }
.art-terminal-top > span { display: flex; gap: 4px; }
.art-terminal-top i { width: 6px; height: 6px; border-radius: 50%; background: #81927f; }
.art-terminal-top i:first-child { background: #dc826b; }
.art-terminal-top i:nth-child(2) { background: #e4c56f; }
.art-terminal-top i:nth-child(3) { background: #a1d979; }
.art-terminal-top small, .art-terminal-top b { color: #b7c5b2; font: 8px "DM Mono", monospace; letter-spacing: .7px; }
.art-terminal-top b { color: #d2fb77; font-weight: 500; }
.art-terminal-line { padding-top: 14px; color: #e4eadc; font: 10px "DM Mono", monospace; }
.art-terminal-line > span:first-child { margin-right: 7px; color: #d2fb77; }
.terminal-cursor { display: inline-block; width: 6px; height: 12px; margin-left: 4px; vertical-align: -2px; background: #d2fb77; animation: cursor-blink 1.1s steps(2, start) infinite; }
@keyframes cursor-blink { to { visibility: hidden; } }
.art-footer { margin-top: 24px; color: #a5b29f; }

.dashboard-shell { background: #f5f6ef; }
.dashboard-shell::before { display: none; }
.sidebar {
  width: 250px;
  padding: 27px 17px 18px;
  border: 0;
  background: #172820;
  box-shadow: 8px 0 30px #13241c0c;
}
.sidebar .brand { padding: 0 7px; }
.sidebar .brand-mark { width: 35px; height: 35px; }
.workspace-label, .nav-label { color: #93a294; }
.workspace-switch { border-color: #3a4a3e; background: #20342a; }
.workspace-switch:hover { border-color: #829567; background: #294031; }
.workspace-avatar { background: #d2fb77; border: 0; color: #17241d; }
.workspace-avatar .brand-mark { width: 25px; height: 25px; padding: 1px; border-radius: 6px; box-shadow: none; }
.workspace-name { color: #e8eee4; }
.chevron { color: #a7b3a5; }
.nav-item { color: #b5c1b2; }
.nav-item.active { background: #d2fb77; color: #17241d; font-weight: 700; }
.nav-item:not(.active):hover { background: #263b2e; color: #f3f6eb; }
.nav-icon { color: inherit; }
.nav-count { color: #17241d; }
.sidebar-bottom .usage-card { border-color: #3c4d40; background: #20342a; }
.usage-heading { color: #c1cdbd; }
.usage-heading span:last-child { color: #d2fb77; }
.usage-track { background: #415344; }
.usage-track span { background: #d2fb77; }
.usage-card p, .account-details small { color: #a7b4a4; }
.account-row { border-color: #3a4a3e; }
.account-avatar, .top-avatar { border-color: #93b75b; background: #d2fb77; color: #17241d; }
.account-details strong { color: #eff3ea; }
.account-menu { color: #c0ccb8; }
.main-panel { width: calc(100% - 250px); margin-left: 250px; background: #f5f6ef; }
.topbar { border-color: #e3e7dd; background: #f8f9f4ed; }
.breadcrumbs { color: #70796e; }
.breadcrumbs span { color: #a5aca0; }
.breadcrumbs strong { color: #26362a; }
.breadcrumbs button { color: #59685a; }
.breadcrumbs button:hover, .back-link:hover { color: #63883e; }
.local-badge { border-color: #dae3d4; background: #edf2e8; color: #58674f; }
.local-badge > span { background: #62b44c; box-shadow: 0 0 8px #62b44c6b; }
.page-content { max-width: 1320px; padding-top: 36px; }
.welcome-row {
  min-height: 180px;
  padding: 30px 32px;
  border: 1px solid #cfe7aa;
  border-radius: 6px 6px 6px 42px;
  background:
    radial-gradient(ellipse at 87% 90%, #ffffff60, transparent 35%),
    linear-gradient(110deg, #e6f4ce, #d6efae 60%, #c9e795);
  box-shadow: 0 12px 26px #3046290c;
}
.welcome-row::before {
  top: -127px;
  right: 7%;
  width: 285px;
  height: 285px;
  border-color: #526e3b2b;
  box-shadow: 0 0 0 28px #526e3b0d, 0 0 0 58px #526e3b0a;
}
.welcome-row::after { content: "HC"; top: 34px; right: 10%; color: #45633210; font-size: 100px; letter-spacing: -12px; }
.welcome-row h1 { color: #1b2b1f; font-size: clamp(27px, 3vw, 36px); }
.welcome-row .eyebrow { color: #557044; }
.welcome-row .subheading { color: #586b4d; }
.primary-button {
  border-color: #172820;
  background: #172820;
  box-shadow: 0 5px 14px #17282020;
  color: #eff6e7;
}
.primary-button:hover:not(:disabled) { background: #2a4131; box-shadow: 0 7px 18px #17282028; }
.quick-stats { gap: 14px; margin-top: 19px; }
.stat-card {
  min-height: 130px;
  border-color: #e2e6dc;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 4px 14px #20332308;
}
.stat-card:hover { border-color: #bbceab; }
.stat-label, .stat-foot { color: #7a8377; }
.stat-value { color: #1d2b21; }
.stat-value > span { color: #8a9286; }
.stat-icon.purple { background: #eef4df; color: #55783b; }
.stat-icon.mint { background: #e8f4e8; color: #428250; }
.stat-icon.amber { background: #f5f0e2; color: #9c7435; }
.stat-value.status-offline { color: #4a5749; }
.projects-section { margin-top: 39px; }
.section-heading h2 { color: #1d2b21; }
.heading-count { border-color: #dfe5da; color: #677260; }
.text-button { color: #456a32; }
.project-card, .add-project-card {
  border-color: #e0e5db;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 5px 18px #1e30200b;
}
.project-card::before { background: linear-gradient(90deg, transparent, #90bd5c, transparent); }
.project-card:hover { border-color: #9fbd81; box-shadow: 0 12px 24px #1e302013; }
.project-card h3 { color: #1d2b21; }
.project-card > p, .project-status { color: #788075; }
.project-card-bottom { border-color: #e8ebe4; }
.project-open { color: #507838; }
.add-project-card { border-color: #ccd9c4; background: #f9fbf5; color: #677361; }
.add-project-card:hover { border-color: #8cae70; background: #f0f6e8; }
.add-project-card > span { border-color: #c6d9b2; color: #4e7435; }
.add-project-card small { color: #7c8676; }
.empty-state {
  border-color: #d5dfcc;
  border-radius: 7px;
  background: radial-gradient(ellipse at 50% 30%, #f5f9ed, #fff 70%);
}
.empty-art { border-color: #c9dcb5; background: #eaf3dd; color: #52723c; }
.empty-art i { color: #70964c; }
.empty-state h3 { color: #213126; }
.empty-state p { color: #768071; }
.page-footer { border-color: #e0e5db; color: #7b8477; }
.footer-dot { color: #78935d; }

.deploy-heading { border-color: #e0e5db; border-radius: 6px 6px 6px 24px; background: #fff; }
.deploy-heading h1, .project-title-row h1 { color: #1c2a20; }
.subheading { color: #737d70; }
.workspace-tabs { border-color: #dde4d8; }
.workspace-tabs [role="tab"] { color: #798175; }
.workspace-tabs [role="tab"].selected { border-color: #638b42; color: #36592d; }
.tab-count { background: #eaf1e4; color: #526c42; }
.one-deployment { color: #7e8779; }
.console-card, .files-card, .startup-card { border-color: #dce3d6; border-radius: 6px; box-shadow: 0 8px 24px #2033230a; }
.console-card { background: #17251d; }
.console-toolbar { border-color: #303e33; background: #1e2d23; }
.console-toolbar, .console-status { color: #c6d2c3; }
.terminal-output { background: #111b15; color: #d8e6d3; }
.console-status { border-color: #303e33; background: #1e2d23; }
.files-card, .startup-card { background: #fff; }
.files-card-heading h2, .startup-heading h2, .step-content h3, .step-title-row h3 { color: #1c2a20; }
.files-card-heading p, .startup-heading p, .step-content > p, .step-title-row p { color: #737d70; }
.upload-drop { border-color: #cfdbca; background: #f8faf5; }
.upload-drop:hover { border-color: #9cb986; background: #f1f6eb; }
.file-row { border-color: #e6eae2; }
.file-name { color: #344335; }
.file-size, .file-actions { color: #7b8477; }
.startup-step { border-color: #e4e9e1; }
.step-number { border-color: #d4dfca; background: #edf3e6; color: #53713d; }
.script-input { border-color: #dce3d6; background: #f7f9f4; }
.script-prompt { color: #577b3c; }
.script-input textarea { color: #27392b; }
.command-preset, .outline-button {
  border-color: #cad7c1;
  background: #f4f7ef;
  color: #405d33;
}
.command-preset:hover, .outline-button:hover:not(:disabled) { border-color: #9db787; background: #eaf2df; }
.danger-button { border-color: #ecd3cd; background: #fff5f2; color: #a84a38; box-shadow: none; }
.danger-button:hover:not(:disabled) { background: #fbe8e2; }
.command-help, .startup-footer, .discord-tip { color: #707a6c; }
.discord-tip { border-color: #dce5d2; background: #f4f8ed; }
.discord-tip strong { color: #33492d; }
.discord-tip code { background: #e5eddc; color: #456332; }
.starter-card { border-color: #dce5d2; background: #f5f8ef; }
.starter-icon { border-color: #cbd9bd; background: #e8f1dc; color: #4e7435; }
.starter-copy strong { color: #2d402e; }
.starter-copy p { color: #707a6c; }
.local-badge { border-color: #d9e2d3; background: #edf3e8; }
.back-link { color: #5e7253; }
.deployment-empty { border-color: #dce3d6; background: #fff; }
.deployment-empty h2 { color: #1d2b21; }
.deployment-empty > p { color: #737d70; }
.language-pill { border-color: #dce5d2; background: #f0f5e9; color: #536e41; }
.modal-backdrop { background: #17241dbb; backdrop-filter: blur(7px); }
.modal-card { border-color: #dce3d6; border-radius: 7px; background: #fff; color: #1d2b21; box-shadow: 0 28px 80px #10201536; }
.modal-card h2 { color: #1d2b21; }
.modal-copy, .modal-footer > span { color: #737d70; }
.field-label { color: #66745d; }
.modal-card input { border-color: #dce3d6; background: #f8faf5; color: #1d2b21; }
.modal-close { color: #6f786b; }
.toast { border-color: #dce3d6; background: #fff; color: #243327; box-shadow: 0 12px 35px #17241d20; }

@media (max-width: 900px) {
  .auth-topbar { padding: 0 5vw; }
  .sidebar { width: 220px; }
  .main-panel { width: calc(100% - 220px); margin-left: 220px; }
}
@media (max-width: 1100px) {
  .auth-topbar .auth-brand { position: relative; top: auto; left: auto; }
  .auth-layout { min-height: auto; display: block; padding: 0 8vw 30px; }
  .auth-main { min-height: calc(100vh - 84px); padding: 40px 0; }
  .auth-card { margin: 0 auto; }
  .auth-art { display: none; }
}
@media (max-width: 700px) {
  .auth-topbar { height: 72px; padding: 0 22px; }
  .auth-top-note { font-size: 7px; letter-spacing: .8px; }
  .auth-layout { min-height: auto; display: block; padding: 0 24px 24px; }
  .auth-main { min-height: calc(100vh - 72px); padding: 55px 0 35px; }
  .auth-card { max-width: 480px; margin: 0 auto; }
  .auth-topbar .auth-brand { position: relative; top: auto; left: auto; }
  .auth-card h1 { font-size: clamp(48px, 12vw, 66px); letter-spacing: -3.5px; }
  .auth-copy { font-size: 14px; }
  .auth-side-note { margin-top: 34px; }
  .auth-art { display: none; }
  .sidebar { width: 57px; background: #172820; }
  .sidebar .brand-mark { width: 34px; height: 34px; }
  .sidebar .nav-item.active { background: #d2fb77; }
  .sidebar .nav-item .nav-icon { color: #17241d; }
  .main-panel { width: calc(100% - 57px); margin-left: 57px; }
  .topbar { background: #f8f9f4ed; }
  .welcome-row { border-radius: 6px 6px 6px 22px; }
  .welcome-row::before { right: -110px; }
  .welcome-row::after { right: -4%; color: #45633212; }
  .stat-card { background: #fff; }
  .deploy-heading { background: #fff; }
}
@media (max-width: 380px) {
  .auth-topbar { padding: 0 17px; }
  .auth-top-note { max-width: 130px; text-align: right; }
  .auth-layout { padding-right: 18px; padding-left: 18px; }
  .auth-card h1 { font-size: 46px; }
  .auth-card .eyebrow { font-size: 8px; }
}

@media (max-width: 650px) {
  .sidebar {
    inset: auto 0 0;
    width: auto;
    height: auto;
    min-height: 66px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 8px max(14px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    border: 0;
    border-top: 1px solid #e6e8f0;
    background: #fff;
    box-shadow: 0 -8px 24px #2027480d;
  }
  .sidebar .brand { justify-content: center; padding: 0; }
  .sidebar .brand > span:last-child,
  .sidebar .workspace-label,
  .sidebar .workspace-switch,
  .sidebar .nav-label,
  .sidebar-bottom .usage-card,
  .sidebar .account-details,
  .sidebar .account-menu { display: none; }
  .sidebar .nav-item,
  .sidebar .nav-item:not(.active) {
    display: flex;
    width: 42px;
    height: 42px;
    justify-content: center;
    margin: 0;
    padding: 0;
    overflow: visible;
    border-radius: 12px;
    color: transparent;
    font-size: 0;
  }
  .sidebar .nav-item.active { margin: 0; background: #eef0ff; }
  .sidebar .nav-item .nav-icon { color: #707990; font-size: 17px; }
  .sidebar .nav-item.active .nav-icon { color: #515ed5; }
  .sidebar .nav-item .nav-count { display: none; }
  .sidebar-bottom { display: flex; align-items: center; margin: 0; }
  .sidebar .account-row {
    width: 42px;
    height: 42px;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .main-panel { width: 100%; margin: 0; }
  .page-content { padding-bottom: 92px; }
  .quick-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card { min-height: 112px; }
  .stat-card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
  .topbar-right { gap: 7px; }
  .icon-button { display: none; }
  .page-content { padding-right: 13px; padding-left: 13px; }
  .welcome-row { align-items: flex-start; flex-direction: column; gap: 13px; padding: 20px; }
  .welcome-row > .primary-button { min-height: 38px; }
  .stat-card { padding: 13px; }
  .stat-label { font-size: 8px; }
}

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

.public-preview-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid #e2d7b6;
  border-radius: 9px;
  background: #fffaf0;
  color: #65582f;
  font-size: 12px;
  line-height: 1.55;
}
.public-preview-notice strong {
  flex: 0 0 auto;
  color: #5e4d1f;
}
.public-preview-notice span { color: #756944; }
.preview-action-note {
  margin: 0;
  color: #737c8e;
  font-size: 11px;
  line-height: 1.5;
}
.upload-disabled { cursor: not-allowed; }

@media (max-width: 520px) {
  .public-preview-notice { flex-direction: column; gap: 4px; }
}

:root {
  color-scheme: dark;
  --bg: #090b12;
  --panel: #10131d;
  --panel-raised: #151927;
  --line: #292e40;
  --muted: #9299ac;
  --text: #eef0fa;
  --purple: #a995ff;
  --purple-bright: #9274ff;
  --mint: #72e0c3;
}

body, .auth-page, .dashboard-shell, .main-panel { background-color: #090b12; color: #eef0fa; }
body { background-image: radial-gradient(ellipse at 68% -12%, #35275d 0, transparent 38%), radial-gradient(ellipse at 0 100%, #182c38 0, transparent 35%); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline-color: #a995ff; }
.auth-page { background: radial-gradient(ellipse at 55% 40%, #171426 0, #0b0d14 55%, #090b12 100%); }
.auth-page::before, .auth-page::after { display: block; border-color: #a995ff15; animation: halo-drift 14s ease-in-out infinite alternate; }
.auth-page::after { animation-delay: -7s; }
.auth-topbar { border-bottom: 1px solid #25283a; }
.auth-topbar .brand, .auth-card h1, .auth-benefits strong { color: #eef0fa; }
.auth-top-note, .auth-footer, .auth-benefits small, .auth-terms { color: #858ba0; }
.auth-main .eyebrow, .auth-card .eyebrow { color: #b6a8ff; }
.hero-copy h1 { color: #f0eef9; }
.hero-copy h1 span { color: #b4a1ff; }
.hero-copy .auth-copy, .auth-card .auth-copy { color: #a2a3b5; }
.auth-panel { border: 1px solid #303149; border-radius: 18px; background: linear-gradient(145deg, #171827, #10121c 68%); box-shadow: 0 24px 80px #0008, inset 0 1px #ffffff08; }
.auth-panel:hover { border-color: #62568c; box-shadow: 0 28px 90px #0009, 0 0 48px #9074ff12; }
.auth-panel::before { background: linear-gradient(90deg, transparent, #b29dff85, transparent); }
.auth-card-mark .brand-mark, .brand-mark { background: linear-gradient(140deg, #c0aaff, #8762f5); color: #0c0c13; box-shadow: 0 0 28px #9672ff42; }
.auth-button { border-color: #38354d; background: #171724; color: #eeeafa; }
.auth-button:hover { border-color: #8270bd; background: #1d1b2c; }
.auth-note { color: #a1a1b4; }
.auth-note.auth-error { border-color: #603b4a; background: #291a23; color: #f0a2ad; }
.benefit-icon { border-color: #39344f; background: #191827; color: #c0b2ff; box-shadow: none; }
.auth-preview { border: 1px solid #302d42; border-radius: 12px; background: #10111a; }
.preview-heading { color: #aaa4c1; }
.preview-row { border-color: #343148; background: #171725; }
.preview-row:hover { border-color: #7564aa; }
.preview-project-copy strong { color: #e9e5f6; }
.preview-project-copy small { color: #9290a4; }
.preview-terminal { background: #0b1114; color: #a5b7b0; }
.auth-panel .auth-terms { border-color: #302d42; }

.sidebar { border-color: #25283a; background: linear-gradient(180deg, #10121c, #0b0d14); box-shadow: 12px 0 36px #0003; }
.sidebar .brand { color: #f0edff; }
.workspace-label, .nav-label { color: #747b91; }
.workspace-switch { border-color: #2e3247; background: #151825; }
.workspace-switch:hover { border-color: #64578d; background: #1c1e30; }
.workspace-avatar, .account-avatar, .top-avatar { border-color: #65558e; background: #28223c; color: #c7baff; }
.workspace-name, .account-details strong { color: #e7e8f1; }
.nav-item { color: #a0a5b7; }
.nav-item.active { background: #27223d; color: #cabfff; }
.nav-item:not(.active):hover { background: #1c1e2d; color: #f0edff; }
.nav-count { color: #b4a8f3; }
.usage-card { border-color: #2d3042; background: #141622; }
.usage-heading { color: #a4a8b8; }
.usage-heading span:last-child { color: #c6baff; }
.usage-track { background: #292a3b; }
.usage-track span { background: linear-gradient(90deg, #8068dc, #b5a3ff); }
.usage-card p, .account-details small { color: #81879b; }
.account-row { border-color: #292c3d; }
.main-panel { background: transparent; }
.topbar { border-color: #25283a; background: #0d0f18e8; backdrop-filter: blur(16px); }
.breadcrumbs { color: #989db0; }
.breadcrumbs strong { color: #e6e5f1; }
.breadcrumbs button { color: #a4a7b6; }
.local-badge { border-color: #343348; background: #151522; color: #b4b1c7; }
.local-badge > span { background: #72e0c3; box-shadow: 0 0 9px #72e0c377; }

.welcome-row { border-color: #493d70; background: radial-gradient(ellipse at 88% 0, #624aa635, transparent 42%), linear-gradient(115deg, #191728, #161925 62%, #12202a); box-shadow: 0 18px 48px #0004, inset 0 1px #ffffff0b; }
.welcome-row::before { border-color: #a995ff36; box-shadow: 0 0 0 28px #a995ff0b, 0 0 0 58px #a995ff07; }
.welcome-row::after { color: #d3c7ff0c; }
.welcome-row h1, .section-heading h2, .project-card h3, .empty-state h3, .deploy-heading h1, .project-title-row h1, .deployment-empty h2 { color: #f0eef9; }
.welcome-row .eyebrow { color: #b6a8ff; }
.welcome-row .subheading, .subheading { color: #a2a3b5; }
.primary-button { border-color: #a995ff; background: linear-gradient(120deg, #a18bff, #765bd1); box-shadow: 0 7px 25px #8065e933; color: #0d0b16; }
.primary-button:hover:not(:disabled) { background: linear-gradient(120deg, #c0afff, #8b70e8); box-shadow: 0 9px 30px #8065e955; }
.stat-card { border-color: #292e40; background: linear-gradient(145deg, #151824, #10131c); box-shadow: 0 8px 26px #0003, inset 0 1px #ffffff06; }
.stat-card:hover { border-color: #544775; }
.stat-label, .stat-foot { color: #9096aa; }
.stat-value, .stat-value.status-offline { color: #eeedf6; }
.stat-value > span { color: #858ba0; }
.stat-icon.purple { background: #29233d; color: #c0b1ff; }
.stat-icon.mint { background: #1c3533; color: #72e0c3; }
.stat-icon.amber { background: #382e26; color: #e9b875; }
.heading-count { border-color: #37334e; color: #b7aaff; }
.text-button, .project-open { color: #b9aaff; }
.project-card, .add-project-card { border-color: #2b3042; background: linear-gradient(145deg, #151824, #10131c); box-shadow: 0 8px 28px #0003; }
.project-card:hover { border-color: #67598e; box-shadow: 0 16px 38px #0005, 0 0 30px #a995ff0c; }
.project-card h3 { color: #eceaf5; }
.project-card > p, .project-status { color: #979caf; }
.project-language.yellow { background: #38301f; color: #e8cb77; }
.project-language.blue { background: #202b45; color: #a9bcff; }
.project-language.mint { background: #1c3533; color: #86dbc1; }
.project-language.orange { background: #3a291f; color: #e7aa7c; }
.project-language.cyan { background: #1b323a; color: #8ed3df; }
.project-language.purple { background: #29233d; color: #c0b1ff; }
.project-card-bottom { border-color: #2b2e3e; }
.add-project-card { background: #11141e; color: #a6a9b8; }
.add-project-card:hover { border-color: #6a5a96; background: #191827; }
.add-project-card > span { border-color: #494064; color: #c0b2ff; }
.add-project-card small { color: #9094a5; }
.empty-state { border-color: #303248; background: radial-gradient(ellipse at 50% 30%, #1a1b2c, #10121b 70%); }
.empty-art { border-color: #4a4168; background: #211d33; color: #c2b5ff; }
.empty-art i { color: #a995ff; }
.empty-state p { color: #a0a3b4; }
.page-footer { border-color: #292c3d; color: #83889b; }
.footer-dot { color: #b4a8f3; }

.deploy-heading { border-color: #2d3042; background: linear-gradient(145deg, #151824, #10131b); }
.workspace-tabs { border-color: #2b2e40; }
.workspace-tabs [role="tab"] { color: #969caf; }
.workspace-tabs [role="tab"].selected { border-color: #a995ff; color: #c5b8ff; }
.tab-count { background: #28233c; color: #c2b5ff; }
.one-deployment { color: #8d93a7; }
.console-card, .files-card, .startup-card { border-color: #2b3042; background: #12151f; box-shadow: 0 14px 40px #0004, inset 0 1px #ffffff05; }
.console-card { background: #10151b; }
.console-toolbar, .console-status { border-color: #292e3a; background: #151a22; color: #aab4b6; }
.terminal-output { background: #0a0e13; color: #c1e3d6; }
.files-card-heading h2, .startup-heading h2, .step-content h3, .step-title-row h3 { color: #eceaf5; }
.files-card-heading p, .startup-heading p, .step-content > p, .step-title-row p { color: #9a9daf; }
.upload-drop { border-color: #39344f; background: #141621; color: #e7e4f2; }
.upload-drop:hover, .upload-drop.dragging { border-color: #9b84eb; background: #1b192a; box-shadow: inset 0 0 30px #a995ff0b; }
.file-row, .startup-step { border-color: #2e3142; }
.file-name, .file-info strong { color: #e1e2ed; }
.file-size, .file-info small, .file-actions { color: #9297a9; }
.step-number { border-color: #494064; background: #211d32; color: #bbaeff; }
.script-input { border-color: #303348; background: #0c0f17; }
.script-prompt { color: #b4a4ff; }
.script-input textarea, .command-input input { color: #e4e3ef; background: transparent; }
.command-preset, .outline-button { border-color: #39344f; background: #171724; color: #c0b3ff; }
.command-preset:hover, .outline-button:hover:not(:disabled) { border-color: #8470c5; background: #211d32; }
.danger-button { border-color: #623e49; background: #291a22; color: #f0a2a6; box-shadow: none; }
.danger-button:hover:not(:disabled) { background: #39212b; }
.command-help, .startup-footer, .discord-tip { color: #9ba0b1; }
.discord-tip { border-color: #35364b; background: #171927; }
.discord-tip strong { color: #ded8f3; }
.discord-tip code { background: #29243a; color: #c3b4ff; }
.starter-card { border-color: #35364b; background: #171927; }
.starter-icon { border-color: #4a4168; background: #211d33; color: #c0b2ff; }
.starter-copy strong { color: #e5e2ef; }
.starter-copy p { color: #999daf; }
.deployment-empty { border-color: #2d3042; background: radial-gradient(ellipse at 50% 18%, #1b1a2a, #11131c 72%); }
.deployment-empty > p { color: #9ca0b2; }
.language-pill { border-color: #37334e; background: #191827; color: #bcb0f5; }
.public-preview-notice { border-color: #57482f; background: #201b17; color: #e3c88f; }
.public-preview-notice strong { color: #f1d79c; }
.public-preview-notice span { color: #cbb98e; }
.preview-action-note { color: #a2a5b5; }
.modal-backdrop { background: #05060bd9; backdrop-filter: blur(10px); }
.modal-card { border-color: #35344a; background: linear-gradient(145deg, #181a28, #11131c); box-shadow: 0 28px 80px #000a; }
.modal-card h2 { color: #f0eef8; }
.modal-copy { color: #a1a4b5; }
.field-label, .modal-footer { color: #999daf; }
.modal-card input, .modal-card select, .modal-card textarea { border-color: #37384b; background: #0d1018; color: #e7e5ef; }
.modal-close { color: #a5a7b5; }
.toast { border-color: #4a4168; background: #201b2d; color: #e5ddff; box-shadow: 0 12px 40px #0009; }
.sidebar .nav-item.active { color: #cdbfff; }
.sidebar .account-avatar, .sidebar .top-avatar { color: #c7baff; }

.auth-card h2 { color: #f0eef8; }
.auth-card .auth-note { color: #a1a4b5; }
.auth-preview { box-shadow: inset 0 1px #ffffff05; }
.upload-icon { color: #bcaeff; }
.browse-link { color: #c5b8ff; }
.file-empty { color: #e2e0ec; }
.file-empty p { color: #999daf; }
.file-icon { background: #211d32; color: #c4b7ff; }
.remove-file { color: #f0a2a6; }
.console-notice { border-color: #494064; background: #171724; color: #b6b2c5; }
.auth-benefits .benefit-icon { border-color: #3a3552; background: #1c1a2a; color: #bcaeff; }
.plans-page, .plan-card, .plans-notice { background: #11131d; border-color: #2c3041; color: #e7e6f0; }
.plan-card h2, .plan-description { color: #e8e6f0; }
.plan-features, .plans-hero p, .plan-card-note { color: #9da1b2; }
.plans-status { border-color: #39344f; background: #191827; color: #bdb1f5; }
.plan-disabled-button { color: #c0b3ff; }

.upload-drop { animation: upload-glow 5s ease-in-out infinite; }
.welcome-row { animation: welcome-shimmer 12s ease-in-out infinite alternate; }
.project-card:hover, .stat-card:hover { transform: translateY(-3px); }
.nav-item, .outline-button, .primary-button, .danger-button, .project-card, .stat-card { transition-duration: .24s; }
@keyframes upload-glow { 50% { box-shadow: inset 0 0 34px #a995ff0c, 0 0 26px #a995ff07; } }
@keyframes welcome-shimmer { to { background-position: 100% 50%; } }

@media (max-width: 650px) {
  .sidebar { border-top-color: #292d3e; background: #10121c; box-shadow: 0 -8px 30px #0006; }
  .sidebar .nav-item.active { background: #27223d; }
  .sidebar .nav-item .nav-icon { color: #9da2b4; }
  .sidebar .nav-item.active .nav-icon { color: #c8baff; }
  .sidebar .account-avatar { border: 1px solid #65558e; background: #28223c; color: #c7baff; }
}
@media (prefers-reduced-motion: reduce) {
  .upload-drop, .welcome-row { animation: none; }
}

:root {
  color-scheme: light;
  --bg: #f6f7fb;
  --panel: #ffffff;
  --panel-raised: #f8f9fc;
  --line: #e7e9f0;
  --muted: #6d7484;
  --text: #171a28;
  --purple: #5a65e8;
  --purple-bright: #4a56d5;
  --mint: #38a886;
}

body { background: #f6f7fb; color: #171a28; }
button, input, select, textarea { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid #8790f7;
  outline-offset: 3px;
}
.brand { color: #202335; }
.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #5965e8;
  box-shadow: 0 5px 12px #5965e82e;
  color: #fff;
}
.brand-mark svg { width: 100%; height: 100%; padding: 5px; }
.brand-period { color: #737df0; }
.auth-page {
  min-height: 100vh;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 9% 93%, #e8ebff 0, transparent 32rem),
    #f6f7fb;
}
.auth-page::before, .auth-page::after, .auth-glow { display: none; }
.auth-topbar {
  z-index: 1;
  width: min(100%, 1280px);
  height: 82px;
  flex: 0 0 auto;
  margin: 0 auto;
  padding: 0 34px;
}
.auth-topbar .auth-brand { position: relative; top: auto; left: auto; }
.auth-topbar .brand { color: #202335; }
.auth-topbar .brand-mark { width: 36px; height: 36px; }
.auth-top-note { color: #778094; font: 500 10px "DM Sans", sans-serif; letter-spacing: .75px; }
.auth-layout {
  width: min(100%, 1280px);
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 460px);
  gap: clamp(56px, 9vw, 130px);
  align-items: center;
  margin: 0 auto;
  padding: 48px 56px 66px;
}
.auth-main { display: flex; align-items: center; padding: 0; }
.hero-copy { width: min(100%, 520px); }
.eyebrow { color: #5965c9; font: 600 10px "DM Sans", sans-serif; letter-spacing: 1.15px; }
.live-dot { background: #4fba91; box-shadow: 0 0 0 4px #4fba911f; }
.hero-copy h1 {
  margin: 24px 0 17px;
  color: #191c2d;
  font: 600 clamp(48px, 5vw, 68px)/1.07 "Space Grotesk", sans-serif;
  letter-spacing: -3.8px;
}
.hero-copy h1 span { color: #5b65df; }
.auth-copy { max-width: 425px; margin: 0; color: #687084; font-size: 15px; line-height: 1.75; }
.auth-benefits { display: grid; gap: 20px; margin-top: 37px; }
.auth-benefits > div { display: flex; align-items: center; gap: 13px; }
.benefit-icon {
  width: 35px;
  height: 35px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid #e2e5f4;
  border-radius: 10px;
  background: #fff;
  color: #5863d7;
  font: 600 10px "DM Mono", monospace;
  box-shadow: 0 3px 8px #2730640a;
}
.auth-benefits > div > span:last-child { display: grid; gap: 3px; }
.auth-benefits strong { color: #303548; font-size: 12px; font-weight: 600; }
.auth-benefits small { color: #788093; font-size: 11px; }
.auth-panel {
  width: 100%;
  padding: 30px;
  border: 1px solid #e7e9f1;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 55px #242b5012, 0 2px 6px #242b5008;
}
.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
}
.auth-card-mark { margin-bottom: 22px; }
.auth-card-mark .brand-mark { width: 42px; height: 42px; border-radius: 12px; }
.auth-card .eyebrow { color: #747d90; font-size: 9px; letter-spacing: 1px; }
.auth-card h2 {
  margin: 12px 0 9px;
  color: #1c2031;
  font: 600 29px/1.16 "Space Grotesk", sans-serif;
  letter-spacing: -1px;
}
.auth-card .auth-copy { font-size: 13px; }
.auth-button {
  width: 100%;
  height: 49px;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 25px 0 0;
  padding: 0 15px;
  border: 1px solid #5661dc;
  border-radius: 8px;
  background: #5864df;
  box-shadow: 0 4px 10px #5965e82a;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.auth-button:hover { border-color: #4652c8; background: #4d59d2; box-shadow: 0 7px 16px #5965e83d; transform: translateY(-1px); }
.discord-icon { color: #fff; font-size: 19px; }
.button-arrow { margin-left: auto; color: #e7e9ff; }
.auth-note { min-height: 16px; margin: 11px 0 22px; color: #737c8e; font-size: 10px; text-align: center; line-height: 1.5; }
.auth-note.auth-error { padding: 9px 10px; border: 1px solid #f1d4d7; border-radius: 7px; background: #fff6f6; color: #a53d4b; text-align: left; }
.auth-preview { padding-top: 17px; border-top: 1px solid #eceef3; }
.preview-heading { display: flex; justify-content: space-between; color: #8991a1; font: 600 8px "DM Mono", monospace; letter-spacing: .7px; }
.preview-heading span:last-child { color: #8a90a5; }
.preview-row { display: flex; align-items: center; gap: 11px; margin-top: 15px; padding: 12px; border: 1px solid #e9ebf2; border-radius: 9px; background: #fafbfe; }
.preview-project-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; background: #eef0ff; color: #5964d7; font: 600 9px "DM Mono", monospace; }
.preview-project-copy { display: grid; flex: 1; gap: 3px; }
.preview-project-copy strong { color: #32374a; font-size: 10px; font-weight: 600; }
.preview-project-copy small { color: #82899a; font-size: 9px; }
.preview-chevron { color: #9299ab; font-size: 14px; }
.preview-terminal { display: flex; align-items: center; gap: 8px; margin-top: 9px; padding: 11px 12px; border-radius: 7px; background: #f3f5fa; color: #687185; font: 9px "DM Mono", monospace; }
.preview-terminal-dot { width: 6px; height: 6px; border-radius: 50%; background: #99a2b3; }
.preview-terminal i { width: 5px; height: 11px; margin-left: auto; background: #7d88e9; animation: cursor-blink 1.1s steps(2, start) infinite; }
.auth-panel .auth-terms { margin: 21px 0 0; padding: 15px 0 0; border-top: 1px solid #eceef3; color: #858c9c; font-size: 9px; text-align: center; }
.auth-footer { width: min(100%, 1280px); height: 40px; display: flex; justify-content: space-between; margin: 0 auto; padding: 0 56px; color: #939aac; font: 500 8px "DM Mono", monospace; letter-spacing: .8px; }
.auth-footer span:first-child { color: #69728a; }

.dashboard-shell { background: #f6f7fb; }
.dashboard-shell::before { display: none; }
.sidebar {
  width: 246px;
  padding: 25px 16px 16px;
  border-right: 1px solid #252c41;
  background: #171c2c;
  box-shadow: 5px 0 18px #171c2c0a;
}
.sidebar .brand { padding: 0 7px; color: #f6f7fb; }
.sidebar .brand-mark { width: 34px; height: 34px; background: #6974f0; box-shadow: none; color: #fff; }
.workspace-label, .nav-label { color: #9299ac; }
.workspace-switch { border-color: #343b50; background: #202638; }
.workspace-switch:hover { border-color: #56617d; background: #252d43; }
.workspace-avatar { border-color: #515c81; background: #2c3550; color: #dfe3ff; }
.workspace-name { color: #e4e6ed; }
.chevron { color: #9aa2b5; }
.nav-item { color: #aeb4c3; }
.nav-item.active { background: #2a3151; color: #c8cdff; }
.nav-item:not(.active):hover { background: #242b3f; color: #f1f2f7; }
.nav-count { color: #b7beff; }
.sidebar-bottom .usage-card { border-color: #343b50; background: #202638; }
.usage-heading { color: #c3c7d2; }
.usage-heading span:last-child { color: #c6cbff; }
.usage-track { background: #3a4155; }
.usage-track span { background: #7983f2; }
.usage-card p, .account-details small { color: #9fa6b6; }
.account-row { border-color: #343b50; }
.account-avatar, .top-avatar { border: 0; background: #dfe2ff; color: #4f5acb; }
.account-details strong { color: #f0f1f5; }
.account-menu { color: #aab0be; }
.main-panel { width: calc(100% - 246px); margin-left: 246px; background: #f6f7fb; }
.topbar { height: 60px; border-color: #e8eaf1; background: #ffffffd9; }
.breadcrumbs { color: #7d8494; }
.breadcrumbs span { color: #b0b5c1; }
.breadcrumbs strong { color: #363b4c; }
.breadcrumbs button { color: #6f778a; }
.breadcrumbs button:hover, .back-link:hover { color: #515ed5; }
.topbar-right { gap: 12px; }
.local-badge { border-color: #e3e7ed; background: #fff; color: #697386; }
.local-badge > span { background: #46ad83; box-shadow: 0 0 8px #46ad8345; }
.icon-button { color: #757e90; }
.page-content { max-width: 1280px; padding: 32px 38px 28px; }
.welcome-row {
  min-height: 155px;
  padding: 25px 27px;
  border: 1px solid #e5e8f4;
  border-radius: 12px;
  background: linear-gradient(110deg, #fff 0%, #fff 60%, #f0f2ff 100%);
  box-shadow: 0 4px 14px #20274808;
}
.welcome-row::before {
  top: -105px;
  right: 12%;
  width: 245px;
  height: 245px;
  border-color: #6873df12;
  box-shadow: 0 0 0 28px #6873df08, 0 0 0 56px #6873df05;
}
.welcome-row::after { top: 26px; right: 11%; color: #5965e807; font-size: 106px; letter-spacing: -9px; }
.welcome-row h1 { color: #202438; font-size: clamp(25px, 2.8vw, 32px); }
.welcome-row .eyebrow { color: #707b94; }
.welcome-row .subheading { color: #788094; }
.primary-button {
  border-color: #5864df;
  border-radius: 7px;
  background: #5864df;
  box-shadow: 0 4px 10px #5965e82a;
  color: #fff;
}
.primary-button:hover:not(:disabled) { border-color: #4854d1; background: #4d59d2; box-shadow: 0 6px 15px #5965e83d; }
.quick-stats { gap: 14px; margin-top: 16px; }
.stat-card {
  min-height: 122px;
  border-color: #e7e9f0;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 3px 10px #20274808;
  transition: border-color .16s ease, transform .16s ease;
}
.stat-card:hover { border-color: #cbd0f1; }
.stat-label, .stat-foot { color: #7e8595; }
.stat-value { color: #222638; }
.stat-value > span { color: #9299a8; }
.stat-icon.purple { background: #f0f1ff; color: #5964d9; }
.stat-icon.mint { background: #eaf7f1; color: #3c9873; }
.stat-icon.amber { background: #fbf3e7; color: #b17a2f; }
.stat-value.status-offline { color: #5b6273; }
.projects-section { margin-top: 34px; }
.section-heading { margin-bottom: 15px; }
.section-heading h2 { color: #25293b; }
.heading-count { border-color: #e1e4ec; color: #757d90; }
.text-button { color: #525fd5; font-weight: 600; }
.project-grid { gap: 13px; }
.project-card, .add-project-card {
  min-height: 170px;
  border-color: #e6e8f0;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 3px 12px #20274808;
}
.project-card::before { background: linear-gradient(90deg, transparent, #7883ec, transparent); }
.project-card:hover { border-color: #c5caf0; box-shadow: 0 9px 20px #20274810; }
.project-card h3 { color: #272b3c; }
.project-card > p, .project-status { color: #777f91; }
.project-card-bottom { border-color: #eceef3; }
.project-open { color: #515ed5; font-weight: 600; }
.project-language.yellow { background: #fbf5df; color: #927522; }
.project-language.blue { background: #edf2ff; color: #536cc6; }
.project-language.mint { background: #eaf7f1; color: #438d70; }
.project-language.orange { background: #fff1e8; color: #b46c3d; }
.project-language.cyan { background: #e9f6f8; color: #438895; }
.project-language.purple { background: #f0eeff; color: #6b5ec2; }
.add-project-card { border-color: #d5d9ea; background: #fbfbfe; color: #6f778b; }
.add-project-card:hover { border-color: #aab1e5; background: #f5f6ff; }
.add-project-card > span { border-color: #d4d8f4; color: #5965dc; background: #f1f2ff; }
.add-project-card small { color: #8790a0; }
.empty-state {
  min-height: 260px;
  border-color: #dfe3ee;
  border-radius: 10px;
  background: linear-gradient(135deg, #fff, #f8f9fd);
}
.empty-art { border-color: #dfe2fb; border-radius: 15px; background: #f0f1ff; color: #5965dc; }
.empty-art i { color: #7380e9; }
.empty-state h3 { color: #282c3e; }
.empty-state p { color: #7b8394; }
.page-footer { border-color: #e5e8ef; color: #858c9b; }
.footer-dot { color: #7580df; }
.deploy-heading { border-color: #e5e8ef; border-radius: 10px; background: #fff; }
.deploy-heading h1, .project-title-row h1 { color: #222638; }
.subheading { color: #788094; }
.workspace-tabs { border-color: #e2e5ed; }
.workspace-tabs [role="tab"] { color: #798093; }
.workspace-tabs [role="tab"].selected { border-color: #5864df; color: #4f5bd1; }
.tab-count { background: #f0f1ff; color: #5965d8; }
.one-deployment { color: #8991a0; }
.console-card, .files-card, .startup-card { border-color: #e1e5ed; border-radius: 9px; box-shadow: 0 5px 16px #20274809; }
.console-card { background: #171c2c; }
.console-toolbar { border-color: #30374b; background: #202638; }
.console-toolbar, .console-status { color: #c8cbd5; }
.terminal-output { background: #141928; color: #e2e6ef; }
.console-status { border-color: #30374b; background: #202638; }
.files-card, .startup-card { border-color: #e3e6ee; background: #fff; }
.files-card-heading h2, .startup-heading h2, .step-content h3, .step-title-row h3 { color: #282c3e; }
.files-card-heading p, .startup-heading p, .step-content > p, .step-title-row p { color: #7a8292; }
.upload-drop { border-color: #dfe3ec; background: #fafbfe; }
.upload-drop:hover { border-color: #b9c0e8; background: #f7f8ff; }
.file-row, .startup-step { border-color: #eaecf2; }
.file-name { color: #373c50; }
.file-size, .file-actions { color: #838b9c; }
.step-number { border-color: #dce0f5; background: #f1f2fc; color: #5964cf; }
.script-input { border-color: #e0e4ed; background: #f9fafe; }
.script-prompt { color: #5864d8; }
.script-input textarea { color: #34394c; }
.command-preset, .outline-button { border-color: #dce0ee; background: #fff; color: #555fc0; }
.command-preset:hover, .outline-button:hover:not(:disabled) { border-color: #bdc4ed; background: #f5f6ff; }
.danger-button { border-color: #f0d7d7; background: #fff7f7; color: #b64d55; box-shadow: none; }
.danger-button:hover:not(:disabled) { background: #fff0f0; }
.command-help, .startup-footer, .discord-tip { color: #778092; }
.discord-tip { border-color: #e4e6f4; background: #f7f8ff; }
.discord-tip strong { color: #343b70; }
.discord-tip code { background: #eceeff; color: #4d58c4; }
.starter-card { border-color: #e2e5f1; background: #f8f9ff; }
.starter-icon { border-color: #d9ddf2; background: #eef0ff; color: #5b66d8; }
.starter-copy strong { color: #30354a; }
.starter-copy p { color: #747d90; }
.local-badge { border-color: #e2e5ec; background: #fff; }
.back-link { color: #667087; }
.deployment-empty { border-color: #e2e6ef; background: #fff; }
.deployment-empty h2 { color: #262a3b; }
.deployment-empty > p { color: #737c8d; }
.language-pill { border-color: #e0e4ed; background: #f6f7fb; color: #5c6578; }
.modal-backdrop { background: #171c2c9c; backdrop-filter: blur(5px); }
.modal-card { border-color: #e2e5ed; border-radius: 12px; background: #fff; color: #272b3c; box-shadow: 0 24px 65px #171c2c35; }
.modal-card h2 { color: #25293b; }
.modal-copy, .modal-footer > span { color: #747d8e; }
.field-label { color: #6e7789; }
.modal-card input { border-color: #e0e4ed; background: #fafbfe; color: #25293b; }
.modal-close { color: #798193; }
.toast { border-color: #e2e5ed; background: #fff; color: #2b3042; box-shadow: 0 10px 30px #171c2c1c; }

@media (max-width: 900px) {
  .auth-topbar { padding-right: 30px; padding-left: 30px; }
  .auth-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); gap: 42px; padding-right: 34px; padding-left: 34px; }
  .hero-copy h1 { font-size: clamp(43px, 6vw, 55px); }
  .auth-panel { padding: 25px; }
  .sidebar { width: 218px; }
  .main-panel { width: calc(100% - 218px); margin-left: 218px; }
  .page-content { padding-right: 25px; padding-left: 25px; }
}
@media (max-width: 700px) {
  .auth-page { min-height: 100svh; overflow: auto; }
  .auth-topbar { width: 100%; height: 70px; padding: 0 22px; }
  .auth-topbar .auth-brand { position: relative; top: auto; left: auto; }
  .auth-top-note { max-width: 150px; font-size: 8px; text-align: right; }
  .auth-layout { width: 100%; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 0; padding: 30px 20px 34px; }
  .auth-main, .hero-copy { display: contents; }
  .hero-copy h1 { margin: 17px 0 12px; font-size: clamp(42px, 11vw, 56px); letter-spacing: -2.7px; }
  .hero-copy .auth-copy { font-size: 13px; }
  .auth-benefits { grid-template-columns: 1fr; gap: 13px; margin-top: 22px; }
  .auth-panel { grid-row: 4; margin-top: 23px; }
  .auth-benefits { grid-row: 5; margin-top: 22px; }
  .auth-benefits > div { gap: 10px; }
  .benefit-icon { width: 31px; height: 31px; }
  .auth-benefits strong { font-size: 11px; }
  .auth-benefits small { font-size: 10px; }
  .auth-panel { max-width: 480px; align-self: center; padding: 22px; border-radius: 13px; }
  .auth-card-mark { display: none; }
  .auth-card h2 { font-size: 25px; }
  .auth-card .auth-button { margin-top: 19px; }
  .auth-panel .auth-terms { margin-top: 16px; }
  .auth-footer { height: 34px; padding: 0 22px; font-size: 7px; }
  .sidebar { width: 57px; padding: 17px 8px 12px; }
  .sidebar .brand-mark { width: 34px; height: 34px; }
  .sidebar .nav-item.active { background: #2a3151; }
  .sidebar .nav-item .nav-icon { color: #c8cdff; }
  .main-panel { width: calc(100% - 57px); margin-left: 57px; }
  .topbar { padding-right: 14px; padding-left: 14px; }
  .page-content { padding: 22px 14px 18px; }
  .welcome-row { min-height: 145px; align-items: flex-start; padding: 18px 15px; }
  .welcome-row h1 { max-width: 220px; font-size: 20px; }
  .welcome-row .subheading { max-width: 200px; font-size: 10px; line-height: 1.5; }
  .welcome-row .primary-button { min-height: 33px; padding: 0 9px; font-size: 10px; }
  .quick-stats { grid-template-columns: 1fr; gap: 8px; margin-top: 14px; }
  .stat-card { min-height: 88px; padding: 12px; }
  .stat-value { margin-top: 6px; font-size: 22px; }
  .stat-foot { margin-top: 2px; }
  .projects-section { margin-top: 28px; }
  .project-grid { grid-template-columns: 1fr; }
  .project-card, .add-project-card { min-height: 145px; }
  .page-footer { align-items: flex-start; flex-direction: column; gap: 7px; }
  .deploy-heading { align-items: flex-start; flex-direction: column; padding: 15px; }
  .deploy-actions { width: 100%; }
  .deploy-actions button { min-height: 34px; flex: 1; padding: 0 7px; font-size: 10px; }
  .workspace-tabs { gap: 12px; }
  .workspace-tabs [role="tab"] { gap: 4px; font-size: 10px; }
  .one-deployment { font-size: 8px; }
  .terminal-output { min-height: 220px; padding: 12px 9px; font-size: 9px; }
  .console-status { padding: 0 8px; font-size: 8px; }
  .files-card, .startup-card { padding: 14px; }
  .files-card-heading { align-items: flex-start; }
  .files-card-heading h2, .startup-heading h2 { font-size: 13px; }
  .files-card-heading p, .startup-heading p { max-width: 190px; line-height: 1.5; }
  .upload-button { min-height: 29px; padding: 0 8px; font-size: 9px; }
  .startup-footer { align-items: flex-start; flex-direction: column; }
  .step-title-row { flex-direction: column; }
  .starter-card { align-items: flex-start; flex-wrap: wrap; }
  .starter-card > .outline-button { margin-left: 46px; }
}

.brand-mark {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #6d79f2, #505bd5);
  box-shadow: 0 5px 13px #5965e82e;
  transition: transform .24s ease, box-shadow .24s ease;
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: -35% auto -35% -55%;
  width: 32%;
  transform: rotate(25deg);
  background: linear-gradient(90deg, transparent, #ffffff3d, transparent);
  transition: left .5s ease;
}
.brand:hover .brand-mark {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 8px 18px #5965e83d;
}
.brand:hover .brand-mark::after { left: 125%; }
.brand-mark svg { position: relative; z-index: 1; }
.brand-mark-orbit {
  transform-box: view-box;
  transform-origin: 20px 20px;
  animation: brand-satellite 9s linear infinite;
}
.workspace-avatar .brand-mark {
  width: 25px;
  height: 25px;
  padding: 1px;
  border: 0;
  border-radius: 7px;
  background: linear-gradient(145deg, #6975ef, #4f5bd1);
  box-shadow: none;
}
.workspace-avatar .brand-mark svg { padding: 4px; }

.auth-page { position: relative; isolation: isolate; }
.auth-page::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -380px;
  right: -210px;
  width: 650px;
  height: 650px;
  display: block;
  border: 1px solid #6974ed10;
  border-radius: 50%;
  box-shadow: 0 0 0 48px #6974ed08, 0 0 0 98px #6974ed06;
  pointer-events: none;
  animation: halo-drift 18s ease-in-out infinite alternate;
}
.auth-topbar { animation: fade-in 600ms ease both; }
.hero-copy .eyebrow { animation: rise-in 650ms 80ms cubic-bezier(.2,.7,.2,1) both; }
.hero-copy h1 { animation: rise-in 700ms 150ms cubic-bezier(.2,.7,.2,1) both; }
.hero-copy > .auth-copy { animation: rise-in 700ms 220ms cubic-bezier(.2,.7,.2,1) both; }
.auth-benefits > div {
  opacity: 0;
  animation: rise-in 620ms cubic-bezier(.2,.7,.2,1) both;
}
.auth-benefits > div:nth-child(1) { animation-delay: 280ms; }
.auth-benefits > div:nth-child(2) { animation-delay: 360ms; }
.auth-benefits > div:nth-child(3) { animation-delay: 440ms; }
.benefit-icon { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.auth-benefits > div:hover .benefit-icon {
  transform: translateY(-2px) rotate(-4deg);
  border-color: #cbd0f5;
  box-shadow: 0 5px 12px #27306412;
}
.auth-panel {
  position: relative;
  overflow: hidden;
  animation: panel-enter 850ms 120ms cubic-bezier(.2,.7,.2,1) both;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.auth-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  width: 84%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #8890ed70, transparent);
}
.auth-panel:hover { border-color: #d9dcf1; box-shadow: 0 22px 62px #242b5018, 0 2px 6px #242b5008; }
.auth-panel .auth-card, .auth-panel .auth-terms { position: relative; z-index: 1; }
.auth-card-mark .brand-mark { animation: mark-arrive 700ms 420ms cubic-bezier(.2,.7,.2,1) both; }
.auth-button { position: relative; overflow: hidden; }
.auth-button::after {
  content: "";
  position: absolute;
  top: -70%;
  left: -40%;
  width: 24%;
  height: 240%;
  transform: rotate(25deg);
  background: linear-gradient(90deg, transparent, #ffffff2e, transparent);
  transition: left .55s ease;
}
.auth-button:hover::after { left: 125%; }
.auth-button:active { transform: translateY(0) scale(.99); }
.preview-row { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.preview-row:hover { transform: translateY(-2px); border-color: #d6daf3; box-shadow: 0 5px 14px #262c5010; }
.preview-terminal-dot { animation: status-pulse 2.4s ease-in-out infinite; }
.preview-terminal i { animation: cursor-blink 1.1s steps(2, start) infinite; }
.auth-footer { animation: fade-in 800ms 500ms ease both; }

.dashboard-shell .topbar { animation: fade-in 420ms ease both; }
.dashboard-shell .page-content > .welcome-row {
  animation: rise-in 520ms 50ms cubic-bezier(.2,.7,.2,1) both;
}
.dashboard-shell .stat-card {
  opacity: 0;
  animation: rise-in 520ms cubic-bezier(.2,.7,.2,1) both;
}
.dashboard-shell .stat-card:nth-child(1) { animation-delay: 120ms; }
.dashboard-shell .stat-card:nth-child(2) { animation-delay: 190ms; }
.dashboard-shell .stat-card:nth-child(3) { animation-delay: 260ms; }
.dashboard-shell .projects-section { animation: rise-in 560ms 240ms cubic-bezier(.2,.7,.2,1) both; }
.project-card, .add-project-card {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.project-card:active, .add-project-card:active { transform: translateY(0) scale(.99); }
.nav-item, .workspace-switch, .account-row, .icon-button, .outline-button, .danger-button {
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.outline-button:hover:not(:disabled), .danger-button:hover:not(:disabled) { transform: translateY(-1px); }
.empty-art { animation: empty-float 5s ease-in-out infinite; }
.modal-backdrop { animation: fade-in 160ms ease both; }
.modal-card { animation: modal-enter 240ms cubic-bezier(.2,.7,.2,1) both; }
.toast { transition: opacity .2s ease, transform .2s ease, visibility .2s ease; }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes panel-enter {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mark-arrive {
  from { opacity: 0; transform: translateY(7px) scale(.86) rotate(-8deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes modal-enter {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes halo-drift { from { transform: translate3d(0, 0, 0) scale(.98); } to { transform: translate3d(-18px, 18px, 0) scale(1.03); } }
@keyframes brand-satellite { to { transform: rotate(360deg); } }
@keyframes status-pulse { 50% { box-shadow: 0 0 0 4px #99a2b31c; opacity: .7; } }
@keyframes empty-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

@media (max-width: 700px) {
  .auth-page::before { top: -490px; right: -440px; width: 620px; height: 620px; }
  .auth-panel:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

:root {
  color-scheme: dark;
  --bg: #0a0d16;
  --panel: #111624;
  --panel-raised: #171d2d;
  --line: #272e43;
  --muted: #9aa3b8;
  --text: #eef0fb;
  --purple: #a7a5ff;
  --purple-bright: #7777ff;
  --mint: #65dec3;
}

body { background: #0a0d16; color: #eef0fb; }
.brand { color: #f3f4ff; }
.auth-topbar .brand { color: #f3f4ff; }
.auth-topbar .brand-period { color: #a7a5ff; }
.brand-mark {
  background: linear-gradient(145deg, #8584ff, #565ce1);
  box-shadow: 0 0 24px #696df052, 0 5px 13px #10142b80;
  color: #f5f4ff;
}
.brand:hover .brand-mark { box-shadow: 0 0 32px #7777ff75, 0 8px 18px #10142b90; }
.workspace-avatar .brand-mark { background: linear-gradient(145deg, #8584ff, #565ce1); }

.auth-page {
  background:
    radial-gradient(ellipse at 82% 13%, #4f4aa52b, transparent 31rem),
    radial-gradient(ellipse at 11% 93%, #246a7140, transparent 34rem),
    #0a0d16;
}
.auth-page::before {
  border-color: #9e9cff1d;
  box-shadow: 0 0 0 48px #9e9cff0c, 0 0 0 98px #9e9cff08;
}
.auth-top-note { color: #858da4; }
.eyebrow { color: #a6a4ff; }
.live-dot { background: #65dec3; box-shadow: 0 0 0 4px #65dec31c, 0 0 12px #65dec36b; }
.hero-copy h1 { color: #f0f1fb; }
.hero-copy h1 span { color: #a9a5ff; }
.auth-copy { color: #a2abc0; }
.auth-benefits strong { color: #e4e6f4; }
.auth-benefits small { color: #919bb1; }
.benefit-icon {
  border-color: #343956;
  background: #151a2a;
  color: #b0afff;
  box-shadow: 0 5px 16px #02040a35;
}
.auth-benefits > div:hover .benefit-icon {
  border-color: #6a6bd0;
  background: #1c2038;
  box-shadow: 0 5px 15px #6666e022;
}
.auth-panel {
  border-color: #293149;
  background:
    radial-gradient(ellipse at 100% 0%, #7372e811, transparent 48%),
    linear-gradient(145deg, #151b2b, #101523 80%);
  box-shadow: 0 24px 70px #00000055, 0 2px 6px #00000040, inset 0 1px #ffffff08;
}
.auth-panel::before { background: linear-gradient(90deg, transparent, #9b9aff91, transparent); }
.auth-panel:hover {
  border-color: #424a70;
  box-shadow: 0 28px 80px #00000066, 0 2px 6px #00000040, inset 0 1px #ffffff0b;
}
.auth-card .eyebrow { color: #929ab1; }
.auth-card h2 { color: #f0f1fb; }
.auth-card .auth-copy { color: #a2abc0; }
.auth-button {
  border-color: #7775f3;
  background: linear-gradient(105deg, #6869eb, #555de0);
  box-shadow: 0 7px 19px #5258d549, inset 0 1px #ffffff24;
  color: #fff;
}
.auth-button:hover {
  border-color: #9894ff;
  background: linear-gradient(105deg, #7777f4, #636ae9);
  box-shadow: 0 9px 24px #5258d566, inset 0 1px #ffffff33;
}
.auth-note { color: #9099af; }
.auth-note.auth-error { border-color: #663e55; background: #2a1c2a; color: #ffb9c3; }
.auth-preview { border-color: #2b3348; }
.preview-heading { color: #858fa6; }
.preview-heading span:last-child { color: #969bb8; }
.preview-row {
  border-color: #2e374c;
  background: #171e2e;
  box-shadow: inset 0 1px #ffffff05;
}
.preview-row:hover { border-color: #515987; background: #1b2235; box-shadow: 0 6px 16px #0003; }
.preview-project-icon { background: #292b50; color: #c1beff; }
.preview-project-copy strong { color: #e2e5f3; }
.preview-project-copy small { color: #8f99b0; }
.preview-chevron { color: #919bb1; }
.preview-terminal { background: #0c121e; color: #aeb8ca; }
.preview-terminal-dot { background: #65dec3; box-shadow: 0 0 10px #65dec35c; }
.preview-terminal i { background: #a09eff; }
.auth-panel .auth-terms { border-color: #2b3348; color: #858ea3; }
.auth-footer { color: #79839a; }
.auth-footer span:first-child { color: #a0a7ba; }

.dashboard-shell { background: #0b0f19; }
.sidebar {
  border-right-color: #242b3e;
  background: linear-gradient(180deg, #111625, #0d111d);
  box-shadow: 7px 0 28px #00000020;
}
.sidebar .brand { color: #f0f1fb; }
.sidebar .brand-mark { background: linear-gradient(145deg, #8584ff, #565ce1); }
.workspace-label, .nav-label { color: #7f899f; }
.workspace-switch { border-color: #2d354b; background: #171d2c; }
.workspace-switch:hover { border-color: #4a5273; background: #1b2233; }
.workspace-avatar { border-color: #4a4b78; background: #292b4a; color: #d1d0ff; }
.workspace-name { color: #e1e4f0; }
.chevron { color: #8c96aa; }
.nav-item { color: #a4acc0; }
.nav-item.active { background: linear-gradient(100deg, #292b4d, #22283f); color: #c5c3ff; box-shadow: inset 2px 0 #8582ff; }
.nav-item:not(.active):hover { background: #1a2030; color: #eceef8; }
.nav-count { color: #b4b1ff; }
.sidebar-bottom .usage-card { border-color: #2d3549; background: #171d2b; }
.usage-heading { color: #b3bbcc; }
.usage-heading span:last-child { color: #c0bdff; }
.usage-track { background: #30384c; }
.usage-track span { background: linear-gradient(90deg, #6d70ee, #a18bff); }
.usage-card p, .account-details small { color: #8993a9; }
.account-row { border-color: #2a3246; }
.account-avatar, .top-avatar { border: 1px solid #474b77; background: #272a47; color: #c6c4ff; }
.account-details strong { color: #e6e9f4; }
.account-menu { color: #a0a8ba; }
.main-panel { background: #0b0f19; }
.topbar { border-color: #252c3e; background: #0d121ee8; }
.breadcrumbs { color: #929bb0; }
.breadcrumbs span { color: #586176; }
.breadcrumbs strong { color: #e0e3ef; }
.breadcrumbs button { color: #a0a9bc; }
.breadcrumbs button:hover, .back-link:hover { color: #aaa7ff; }
.local-badge { border-color: #30394e; background: #171e2c; color: #aeb7c9; }
.local-badge > span { background: #65dec3; box-shadow: 0 0 9px #65dec36b; }
.icon-button { color: #a3acc0; }
.welcome-row {
  border-color: #343452;
  background:
    radial-gradient(ellipse at 84% 4%, #8178f22a, transparent 38%),
    linear-gradient(112deg, #171c2d, #191c31 62%, #20223b);
  box-shadow: 0 12px 35px #0000001f, inset 0 1px #ffffff08;
}
.welcome-row::before { border-color: #a7a2ff20; box-shadow: 0 0 0 28px #a7a2ff08, 0 0 0 56px #a7a2ff05; }
.welcome-row::after { color: #b5b1ff0b; }
.welcome-row h1 { color: #f0f1fb; }
.welcome-row .eyebrow { color: #aaa8d2; }
.welcome-row .subheading { color: #a4abc0; }
.primary-button {
  border-color: #7775f3;
  background: linear-gradient(105deg, #6869eb, #555de0);
  box-shadow: 0 5px 16px #5258d53a, inset 0 1px #ffffff20;
  color: #fff;
}
.primary-button:hover:not(:disabled) {
  border-color: #9995ff;
  background: linear-gradient(105deg, #7777f4, #636ae9);
  box-shadow: 0 8px 21px #5258d55c, inset 0 1px #ffffff30;
}
.quick-stats .stat-card {
  border-color: #282f43;
  background: linear-gradient(145deg, #151b29, #111622);
  box-shadow: 0 6px 18px #0000001c, inset 0 1px #ffffff06;
}
.stat-card:hover { border-color: #464d6a; }
.stat-label, .stat-foot { color: #929bb0; }
.stat-value { color: #eef0fa; }
.stat-value > span { color: #8e98ad; }
.stat-icon.purple { border-color: #444268; background: #282742; color: #b7b2ff; }
.stat-icon.mint { border-color: #31544f; background: #1b3435; color: #78dfc8; }
.stat-icon.amber { border-color: #56483a; background: #30271f; color: #e6b974; }
.stat-value.status-offline { color: #d0d5e1; }
.projects-section { color: #ebedf7; }
.section-heading h2 { color: #eceef8; }
.heading-count { border-color: #333b50; background: #171d2b; color: #adb5c7; }
.text-button { color: #b3b0ff; }
.project-card, .add-project-card {
  border-color: #2a3145;
  background: linear-gradient(145deg, #161c2a, #111622);
  box-shadow: 0 7px 22px #00000020, inset 0 1px #ffffff06;
}
.project-card::before { background: linear-gradient(90deg, transparent, #a49eff9c, transparent); }
.project-card:hover { border-color: #5a5d8a; background: linear-gradient(145deg, #1a2031, #141a29); box-shadow: 0 12px 28px #0003, 0 0 20px #6667df12; }
.project-card h3 { color: #eff0fa; }
.project-card > p, .project-status { color: #9aa3b7; }
.project-card-bottom { border-color: #2b3245; }
.project-open { color: #b2afff; }
.project-language.yellow { border: 1px solid #554b32; background: #332d22; color: #e6cd7c; }
.project-language.blue { border: 1px solid #3b4966; background: #242f45; color: #a4c4ff; }
.project-language.mint { border: 1px solid #31534c; background: #1c3431; color: #8bdcc0; }
.project-language.orange { border: 1px solid #594439; background: #34271f; color: #f0b080; }
.project-language.cyan { border: 1px solid #36515b; background: #203239; color: #92d9e2; }
.project-language.purple { border: 1px solid #48416c; background: #2a2540; color: #c6b6ff; }
.add-project-card { border-color: #383b56; background: #111622; color: #b0b6c7; }
.add-project-card:hover { border-color: #6666a3; background: #171b2d; }
.add-project-card > span { border-color: #48466d; background: #25243b; color: #b7b3ff; }
.add-project-card small { color: #8993a9; }
.empty-state {
  border-color: #30374c;
  background: radial-gradient(ellipse at 50% 20%, #28274255, transparent 55%), linear-gradient(145deg, #141a28, #101521);
}
.empty-art { border-color: #4b4775; background: #28253f; color: #c0b9ff; box-shadow: 0 10px 24px #0002; }
.empty-art i { color: #a6a1ff; }
.empty-state h3 { color: #edf0fa; }
.empty-state p { color: #9aa3b7; }
.page-footer { border-color: #282f41; color: #8992a7; }
.footer-dot { color: #aaa5ff; }
.deploy-heading { border-color: #2b3246; background: linear-gradient(135deg, #171d2b, #121724); }
.deploy-heading h1, .project-title-row h1 { color: #f0f1fb; }
.subheading { color: #9ba4b8; }
.workspace-tabs { border-color: #2c3347; }
.workspace-tabs [role="tab"] { color: #98a1b5; }
.workspace-tabs [role="tab"].selected { border-color: #8884ff; color: #c0bdff; }
.tab-count { background: #292744; color: #c4bfff; }
.one-deployment { color: #8f99ae; }
.console-card, .files-card, .startup-card { border-color: #2d354a; box-shadow: 0 10px 28px #00000024, inset 0 1px #ffffff05; }
.console-card { background: #0c111b; }
.console-toolbar { border-color: #2d3548; background: #171e2c; }
.console-toolbar, .console-status { color: #b8c0d0; }
.terminal-output { background: #0b1019; color: #dce5ed; }
.console-status { border-color: #2d3548; background: #171e2c; }
.files-card, .startup-card { border-color: #2d3549; background: linear-gradient(150deg, #171d2b, #121724); }
.files-card-heading h2, .startup-heading h2, .step-content h3, .step-title-row h3 { color: #e9ebf6; }
.files-card-heading p, .startup-heading p, .step-content > p, .step-title-row p { color: #9aa3b7; }
.upload-drop { border-color: #343d52; background: #121825; color: #aeb7c8; }
.upload-drop:hover { border-color: #606494; background: #191d30; }
.file-row, .startup-step { border-color: #2b3347; }
.file-name { color: #e2e6f1; }
.file-size, .file-actions { color: #929bb0; }
.step-number { border-color: #46466e; background: #26253d; color: #bcb8ff; }
.script-input { border-color: #333b50; background: #0e1420; }
.script-prompt { color: #a7a2ff; }
.script-input textarea { color: #dbe0ef; }
.command-preset, .outline-button { border-color: #3a4160; background: #1b2132; color: #c0bdff; }
.command-preset:hover, .outline-button:hover:not(:disabled) { border-color: #6a6aa8; background: #252943; }
.danger-button { border-color: #68404d; background: #2b1d29; color: #ffb4bd; box-shadow: none; }
.danger-button:hover:not(:disabled) { background: #3a222f; }
.command-help, .startup-footer, .discord-tip { color: #9ba4b8; }
.discord-tip { border-color: #353a57; background: #1b2032; }
.discord-tip strong { color: #e0ddff; }
.discord-tip code { background: #2b2944; color: #c7c2ff; }
.starter-card { border-color: #353a58; background: linear-gradient(110deg, #1d2035, #171d2b); }
.starter-icon { border-color: #4a4775; background: #2a2642; color: #c1baff; }
.starter-copy strong { color: #e6e6f4; }
.starter-copy p { color: #9ba3b7; }
.back-link { color: #a7afc1; }
.deployment-empty { border-color: #2c3449; background: linear-gradient(145deg, #171d2b, #121724); }
.deployment-empty h2 { color: #eff0fa; }
.deployment-empty > p { color: #9ca5b9; }
.language-pill { border-color: #353d53; background: #1b2231; color: #b7bfd0; }
.modal-backdrop { background: #070a12c9; }
.modal-card { border-color: #343c52; background: #171d2b; color: #e7e9f4; box-shadow: 0 28px 80px #0008; }
.modal-card h2 { color: #f0f1fa; }
.modal-copy, .modal-footer > span { color: #9ba4b8; }
.field-label { color: #aeb6c8; }
.modal-card input { border-color: #353d52; background: #101622; color: #eceef8; }
.modal-card input::placeholder { color: #687287; }
.modal-close { color: #9ca5b8; }
.toast { border-color: #343c52; background: #1a2130; color: #e7eaf4; box-shadow: 0 14px 36px #0006; }

@media (max-width: 700px) {
  .auth-page {
    background:
      radial-gradient(ellipse at 100% 0%, #4f4aa52b, transparent 25rem),
      radial-gradient(ellipse at 0% 50%, #246a7128, transparent 26rem),
      #0a0d16;
  }
  .welcome-row { background: radial-gradient(ellipse at 100% 0%, #8178f224, transparent 45%), linear-gradient(120deg, #171c2d, #1b1d32); }
}

.sidebar .nav-tag {
  margin-left: auto;
  padding: 3px 5px;
  border: 1px solid #494264;
  border-radius: 4px;
  color: #b6a8ff;
  font: 8px "DM Mono", monospace;
  letter-spacing: .4px;
}
.page-content.plans-only > :not(.plans-page) { display: none; }
.page-content:not(.plans-only) > .plans-page { display: none; }
.plans-page { max-width: 1000px; margin: 0 auto; padding: 14px 0 40px; animation: plans-enter .35s ease both; }
.plans-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 16px 0 28px; }
.plans-hero h1 { margin: 12px 0 9px; color: #f0f1fb; font: 600 clamp(30px, 5vw, 43px)/1.08 "Space Grotesk", sans-serif; letter-spacing: -1.8px; }
.plans-hero h1 span { color: #ad9aff; }
.plans-hero p { max-width: 520px; margin: 0; color: #9ba4b8; font-size: 13px; line-height: 1.7; }
.plans-status { flex: 0 0 auto; margin-bottom: 4px; padding: 8px 11px; border: 1px solid #3c3657; border-radius: 20px; background: #211d32; color: #c0b5ff; font: 9px "DM Mono", monospace; letter-spacing: .65px; }
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.plan-card { min-width: 0; padding: 23px; border: 1px solid #2d3549; border-radius: 12px; background: linear-gradient(145deg, #171d2b, #111622); box-shadow: 0 14px 38px #0000001c; }
.plan-card.premium-plan { border-color: #675b9b; background: radial-gradient(ellipse at 100% 0%, #8068ff22, transparent 42%), linear-gradient(145deg, #1c2033, #121724); box-shadow: 0 14px 38px #00000024, inset 0 1px #b6a3ff12; }
.plan-card-heading { display: flex; align-items: center; justify-content: space-between; }
.plan-kicker { color: #9da5ba; font: 9px "DM Mono", monospace; letter-spacing: 1px; }
.plan-card h2 { margin: 7px 0 0; color: #f1f2fb; font: 600 22px "Space Grotesk", sans-serif; letter-spacing: -.5px; }
.plan-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #3a4155; border-radius: 11px; color: #b8c0d0; background: #20283a; font-size: 18px; }
.premium-icon { border-color: #594d85; color: #c6b8ff; background: #2b2544; }
.plan-price { display: flex; align-items: baseline; gap: 7px; margin: 22px 0 7px; }
.plan-price strong { color: #f3f3fb; font: 600 35px "Space Grotesk", sans-serif; letter-spacing: -1.4px; }
.plan-price span { color: #9aa3b7; font-size: 12px; }
.plan-description { min-height: 38px; margin: 0; color: #a4adbf; font-size: 12px; line-height: 1.6; }
.plan-features { display: grid; gap: 14px; margin: 22px 0 18px; padding: 19px 0 0; border-top: 1px solid #2b3347; list-style: none; }
.plan-features li { display: flex; align-items: flex-start; gap: 10px; color: #d3d8e5; font-size: 11px; line-height: 1.55; }
.plan-features li > span { flex: 0 0 15px; color: #8edbc3; font-weight: 700; text-align: center; }
.plan-features li:last-child > span { color: #c2b5ff; }
.plan-card-note { margin-top: 12px; color: #858fa5; font-size: 10px; line-height: 1.55; }
.plan-disabled-button { width: 100%; margin-top: 1px; }
.plans-notice { display: flex; align-items: flex-start; gap: 12px; margin-top: 17px; padding: 16px 18px; border: 1px solid #343953; border-radius: 9px; background: #151a28; }
.notice-icon { width: 19px; height: 19px; flex: 0 0 19px; display: grid; place-items: center; border: 1px solid #5b5485; border-radius: 50%; color: #c3b9ff; font: 500 11px "DM Mono", monospace; }
.plans-notice p { margin: 0; color: #a4adc0; font-size: 11px; line-height: 1.7; }
.plans-notice strong { color: #e4e6f2; font-weight: 600; }
@keyframes plans-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 760px) {
  .plans-hero { align-items: flex-start; flex-direction: column; }
  .plan-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .sidebar .nav-item[data-action="home"],
  .sidebar .nav-item[data-action="plans"] { display: flex; }
  .sidebar .nav-item[data-action="plans"] { margin-top: 8px; }
  .sidebar .nav-item[data-action="plans"] .nav-tag { display: none; }
  .plans-page { padding-top: 4px; }
  .plan-card { padding: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .plans-page { animation: none; }
}