:root {
  color-scheme: dark;
  --bg: #0b0e13;
  --bg-raised: #10151d;
  --panel: #141a23;
  --panel-raised: #191f2a;
  --panel-soft: #1b222d;
  --text: #f3f5f7;
  --text-muted: #9aa4b2;
  --text-dim: #717d8d;
  --line: #29323f;
  --line-soft: #202834;
  --accent: #91a8ff;
  --accent-strong: #b3c1ff;
  --accent-ink: #11182b;
  --good: #8fc6a9;
  --warn: #e1bd7f;
  --bad: #e49794;
  --radius-sm: 5px;
  --radius: 9px;
  --radius-lg: 14px;
  --font-body: "Segoe UI", Inter, system-ui, -apple-system, Arial, sans-serif;
  --font-display: "Segoe UI", Inter, system-ui, -apple-system, Arial, sans-serif;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; scroll-padding-top: 28px; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--bg); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
::selection { background: #8ea5f044; }
.hidden { display: none !important; }
.shell { width: min(100% - 72px, 1240px); margin: 0 auto; }

.public-site { padding-top: 18px; }
.public-header { min-height: 67px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); }
.brand-lockup { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand-mark { display: block; width: 34px; height: 34px; }
.brand-wordmark { color: var(--text); font-family: var(--font-display); font-size: 15px; font-weight: 800; letter-spacing: -.045em; }
.brand-wordmark span { color: #a9b8ee; }
.public-nav { display: flex; align-items: center; gap: 34px; color: #a2acb9; font-size: 12px; font-weight: 600; }
.public-nav a { transition: color .16s ease; }
.public-nav a:hover { color: var(--text); }
.public-nav .nav-cta { display: inline-flex; align-items: center; gap: 12px; min-height: 37px; padding: 0 12px; border: 1px solid #3c4655; border-radius: var(--radius-sm); color: var(--text); }
.public-nav .nav-cta span { color: var(--accent); font-size: 14px; }
.mobile-menu-button { display: none; }

.hero-section { min-height: 590px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 7.5%; padding: 72px 0 79px; }
.hero-copy { max-width: 575px; }
.eyebrow, .card-label { margin: 0; color: #9cabc6; font-size: 10px; font-weight: 700; letter-spacing: .15em; line-height: 1.4; }
.eyebrow-rule { display: inline-block; vertical-align: middle; width: 24px; height: 1px; margin: 0 9px 3px 0; background: var(--accent); }
.hero-copy h1 { margin: 23px 0 17px; font: 700 clamp(42px, 5.5vw, 68px)/1.04 var(--font-display); letter-spacing: -.065em; }
.hero-copy h1 span { color: #a5b3d9; }
.hero-lede { max-width: 490px; margin: 0; color: #a0aab7; font-size: 15px; line-height: 1.78; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 28px; }
.button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 0 15px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; cursor: pointer; transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { opacity: .46; cursor: not-allowed; }
.button.primary { color: var(--accent-ink); background: var(--accent); }
.button.primary:hover:not(:disabled) { background: var(--accent-strong); }
.button.secondary { color: #dbe1ed; background: var(--panel); border-color: var(--line); }
.button.secondary:hover:not(:disabled), .button.quiet:hover:not(:disabled) { border-color: #5b6a81; background: #1b2430; }
.button.quiet { min-height: 35px; color: #c3cad4; background: transparent; border-color: var(--line); }
.button.danger { color: #f0b2ae; background: #261b1f; border-color: #513036; }
.text-link { display: inline-flex; align-items: center; gap: 11px; color: #d6dce6; font-size: 12px; font-weight: 700; transition: color .16s ease; }
.text-link span { color: var(--accent); font-size: 16px; }
.text-link:hover { color: var(--accent-strong); }
.hero-facts { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 46px; padding-top: 17px; border-top: 1px solid var(--line-soft); }
.hero-facts div { display: flex; gap: 8px; align-items: center; color: #7e8998; font-size: 10px; }
.fact-index { color: #a1b1e6; font-size: 9px; font-weight: 700; letter-spacing: .08em; }

.hero-art { position: relative; min-height: 400px; padding: 19px 22px 18px; border: 1px solid #303b4a; border-radius: var(--radius-lg); background: linear-gradient(145deg, #151c26, #10151c 72%); box-shadow: 0 24px 80px #0003; overflow: hidden; }
.hero-art::before { content: ""; position: absolute; inset: 0 0 auto auto; width: 43%; height: 1px; background: linear-gradient(90deg, transparent, #a8b6e3aa); }
.art-topline, .art-footer, .art-section-head { display: flex; justify-content: space-between; align-items: center; }
.art-topline, .art-section-head, .art-footer { color: #778394; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.art-live { display: flex; align-items: center; gap: 6px; color: #8899b2; letter-spacing: .08em; }
.art-live i { width: 6px; height: 6px; background: #7cb49a; border-radius: 50%; }
.art-brand { display: flex; align-items: center; gap: 12px; margin-top: 35px; }
.art-brand img { width: 41px; height: 41px; }
.art-brand div { display: grid; gap: 5px; }
.art-brand div span { color: #9aa9c7; font-size: 8px; font-weight: 700; letter-spacing: .16em; }
.art-brand strong { color: #edf0f4; font-family: var(--font-display); font-size: 19px; letter-spacing: -.04em; }
.art-rule { height: 1px; margin: 23px 0 20px; background: #2c3541; }
.art-section-head { margin-bottom: 10px; }
.art-profile { display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid #303a48; border-radius: 6px; background: #181f29; }
.art-profile-icon { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid #4b5770; border-radius: 5px; color: #bbc8ed; font: 700 15px var(--font-display); }
.art-profile-copy { display: grid; gap: 4px; flex: 1; }
.art-profile-copy strong { color: #e1e6ee; font-size: 11px; }
.art-profile-copy span { color: #7f8a99; font-size: 9px; }
.art-chevron { color: #9eadd2; }
.art-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.art-fields div { display: grid; gap: 7px; min-height: 59px; padding: 10px; border: 1px solid #28313d; border-radius: 5px; background: #121821; }
.art-fields span { color: #748091; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.art-fields strong { color: #cdd4df; font-size: 9px; line-height: 1.4; }
.art-footer { margin-top: 23px; padding-top: 13px; border-top: 1px solid #29313c; font-size: 7px; letter-spacing: .08em; }
.art-key { display: flex; align-items: center; gap: 6px; }
.art-key span { color: #a8b7e8; font-size: 12px; }
.art-side-note { position: absolute; right: -74px; top: 157px; color: #6c7786; font-size: 8px; letter-spacing: .05em; line-height: 1.7; transform: rotate(90deg); transform-origin: center; }

.content-section { border-top: 1px solid var(--line-soft); padding: 74px 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 36px; margin-bottom: 27px; }
.section-heading h2, .access-copy h2, .login-intro h2 { margin: 12px 0 0; font: 650 clamp(27px, 3vw, 37px)/1.17 var(--font-display); letter-spacing: -.05em; }
.section-heading > p { max-width: 300px; margin: 0 0 2px; color: var(--text-muted); font-size: 12px; line-height: 1.7; }
.service-feature { display: grid; grid-template-columns: .7fr 1.15fr 1.5fr auto; align-items: center; gap: 30px; min-height: 150px; padding: 25px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.service-index { align-self: start; color: #b0bde5; font-size: 12px; font-weight: 700; letter-spacing: .05em; }
.service-index span { color: #778394; font-size: 8px; letter-spacing: .12em; }
.service-title { display: flex; align-items: center; gap: 12px; }
.game-glyph { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid #4a5877; border-radius: 7px; color: #afbee9; font: 700 18px var(--font-display); }
.service-title h3, .feature-row h3 { margin: 0; color: #e6e9ef; font: 650 14px var(--font-display); letter-spacing: -.02em; }
.service-title p { margin: 5px 0 0; color: #778394; font-size: 10px; }
.service-description { max-width: 355px; margin: 0; color: #9aa4b2; font-size: 11px; line-height: 1.75; }
.service-action { white-space: nowrap; color: #dbe2f2; font-size: 10px; font-weight: 700; }
.service-action span { padding-left: 6px; color: var(--accent); font-size: 13px; }
.service-action:hover { color: var(--accent-strong); }
.feature-section { padding-bottom: 82px; }
.compact-heading { margin-bottom: 28px; }
.feature-list { border-top: 1px solid var(--line); }
.feature-row { display: grid; grid-template-columns: 62px 1fr 20px; gap: 18px; align-items: start; padding: 20px 3px; border-bottom: 1px solid var(--line-soft); }
.feature-number { padding-top: 2px; color: #8fa2d9; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.feature-row p { margin: 7px 0 0; color: #8c97a6; font-size: 11px; line-height: 1.6; }
.feature-mark { color: #6f7e94; font-size: 12px; }
.access-band { display: flex; align-items: center; justify-content: space-between; gap: 35px; margin: 0 0 75px; padding: 34px 36px; border: 1px solid #354052; border-radius: var(--radius); background: #131923; }
.access-copy { max-width: 625px; }
.access-copy h2 { font-size: clamp(25px, 3vw, 34px); }
.access-copy > p:not(.eyebrow) { max-width: 570px; margin: 12px 0 18px; color: #99a3b1; font-size: 11px; line-height: 1.75; }
.access-note { min-width: 230px; display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-left: 1px solid #354052; }
.access-note-icon { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #475675; border-radius: 5px; color: #a6b5e8; }
.access-note span:last-child { display: grid; gap: 5px; }
.access-note strong { color: #d9dfe9; font-size: 10px; }
.access-note small { color: #8b96a5; font-size: 9px; line-height: 1.5; }
.login-section { display: grid; grid-template-columns: 1fr minmax(340px, 430px); align-items: center; gap: 10%; padding: 61px 0 72px; border-top: 1px solid var(--line); }
.login-intro { max-width: 410px; }
.login-intro h2 { font-size: 40px; }
.login-intro > p:not(.eyebrow) { margin: 12px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.65; }
.login-divider { width: 100%; height: 1px; margin: 32px 0 19px; background: var(--line-soft); }
.login-security { display: flex; align-items: center; gap: 11px; }
.security-mark { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #3b574c; border-radius: 50%; color: var(--good); font-size: 12px; }
.login-security > span:last-child { display: grid; gap: 4px; }
.login-security strong { color: #cdd4df; font-size: 10px; }
.login-security small { color: #818d9d; font-size: 9px; }
.auth-card, .card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.auth-card { padding: 27px; box-shadow: 0 15px 42px #0002; }
.auth-card-heading { margin-bottom: 19px; }
.auth-kicker { color: #a1afd0; font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.auth-card h3 { margin: 8px 0 5px; font: 650 24px var(--font-display); letter-spacing: -.04em; }
.auth-card-heading p { margin: 0; color: #8c97a6; font-size: 11px; line-height: 1.5; }
.auth-switch { display: flex; gap: 3px; padding: 3px; margin-bottom: 17px; border: 1px solid #2a3340; border-radius: 6px; background: #10151c; }
.switch-button { flex: 1; min-height: 34px; border: 1px solid transparent; border-radius: 4px; color: #909baa; background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }
.switch-button.active { color: #e9edf6; border-color: #374357; background: #202837; }
.form-stack, .account-settings-form { display: grid; gap: 14px; }
label { display: grid; gap: 7px; color: #bdc5d0; font-size: 11px; font-weight: 600; }
input, select { width: 100%; min-width: 0; min-height: 42px; padding: 0 11px; border: 1px solid #37414f; border-radius: 5px; outline: none; color: #e5e9ef; background: #0f141b; font-size: 12px; transition: border-color .15s ease, box-shadow .15s ease; }
input::placeholder { color: #647080; }
input:focus, select:focus { border-color: #8299eb; box-shadow: 0 0 0 3px #91a8ff20; }
select { color-scheme: dark; }
input:-webkit-autofill { -webkit-text-fill-color: #e5e9ef; box-shadow: 0 0 0 1000px #0f141b inset; }
.auth-submit { width: 100%; margin-top: 2px; }
.form-error { min-height: 0; color: #eca6a3; font-size: 11px; line-height: 1.45; }
.subtle { margin: 15px 0 0; color: #778394; font-size: 9px; line-height: 1.55; }
.notice { margin: 0 0 14px; padding: 11px 12px; border: 1px solid #615137; border-radius: 5px; color: #e2c992; background: #262116; font-size: 11px; line-height: 1.5; }
.public-footer { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line-soft); color: #778292; font-size: 9px; }
.footer-brand { display: inline-flex; align-items: center; gap: 8px; color: #cdd4de; font-family: var(--font-display); font-size: 10px; font-weight: 700; }
.footer-brand img { width: 22px; height: 22px; }
.public-footer > a:last-child span { color: var(--accent); }

/* Signed-in service portal */
.app-view { min-height: 100vh; padding-top: 10px; }
.topbar { min-height: 65px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.user-tools { display: flex; align-items: center; gap: 13px; }
.workspace-label { color: #7d8999; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.user-divider { width: 1px; height: 20px; background: var(--line); }
.signed-user { max-width: 260px; overflow: hidden; color: #bdc6d3; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.app-layout { display: grid; grid-template-columns: 204px minmax(0, 1fr); gap: 42px; min-height: calc(100vh - 76px); }
.app-nav { position: sticky; top: 0; display: flex; flex-direction: column; align-self: start; min-height: calc(100vh - 76px); padding: 25px 15px 20px 0; border-right: 1px solid var(--line-soft); }
.nav-section-label { margin: 0 0 9px 10px; color: #737f8f; font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.app-nav .tab { width: 100%; min-height: 39px; display: flex; align-items: center; gap: 11px; padding: 0 10px; border: 1px solid transparent; border-radius: 5px; color: #909baa; background: transparent; text-align: left; font-size: 11px; font-weight: 600; cursor: pointer; }
.app-nav .tab:hover { color: #d8dee8; background: #151b24; }
.app-nav .tab.active { color: #e9edf5; border-color: #343f51; background: #1a2230; }
.nav-icon { width: 15px; color: #8495c3; font-size: 15px; line-height: 1; text-align: center; }
.admin-nav-label { margin-top: 26px; }
.sidebar-foot { display: flex; align-items: center; gap: 9px; margin: auto 0 0 9px; padding-top: 16px; color: #aeb7c4; font-size: 9px; font-weight: 600; line-height: 1.5; }
.sidebar-foot small { color: #738091; font-size: 8px; font-weight: 400; }
.sidebar-indicator { width: 7px; height: 7px; border-radius: 50%; background: #8fc6a9; box-shadow: 0 0 0 3px #8fc6a919; }
.app-content { min-width: 0; padding: 34px 0 70px; }
.page { min-width: 0; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin: 0 0 25px; }
.page-heading .eyebrow { margin-bottom: 8px; }
.page-heading h1 { margin: 0; font: 650 30px/1.15 var(--font-display); letter-spacing: -.05em; }
.page-heading h2 { margin: 0; font: 650 23px/1.2 var(--font-display); letter-spacing: -.04em; }
.muted { color: var(--text-muted); line-height: 1.65; }
.page-heading .muted { max-width: 660px; margin: 7px 0 0; font-size: 11px; }
.license-badge { display: inline-flex; align-items: center; min-height: 29px; max-width: 100%; padding: 0 10px; border: 1px solid #3b4655; border-radius: 4px; color: #aeb8c6; background: #171d26; font-size: 9px; font-weight: 700; white-space: nowrap; }
.license-badge.good { color: #9bc9af; border-color: #3a5849; background: #17251e; }
.license-badge.bad { color: #e3a19e; border-color: #573b3e; background: #251b1f; }
.overview-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 13px; }
.card { padding: 20px; }
.card-label { margin: 0 0 12px; color: #8d9ab0; font-size: 9px; }
.card h2 { margin: 0 0 8px; font: 650 19px/1.3 var(--font-display); letter-spacing: -.035em; }
.card .muted { margin: 0; font-size: 11px; }
.license-card, .launch-card { min-height: 166px; }
.button-row { display: flex; gap: 9px; margin-top: 17px; }
.workspace-note { display: flex; align-items: center; gap: 12px; margin-top: 13px; padding: 15px 17px; border: 1px solid var(--line-soft); border-radius: 6px; background: #10151c; }
.note-symbol { color: #a1b0dc; font-size: 17px; }
.workspace-note p { display: grid; gap: 4px; margin: 0; }
.workspace-note strong { color: #cfd6e1; font-size: 10px; }
.workspace-note span:last-child { color: #8792a1; font-size: 10px; line-height: 1.5; }
.notice.hidden { display: none !important; }
.license-card .notice { margin-top: 14px; }
.account-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; align-items: start; }
.account-settings-card h2 { margin-bottom: 17px; }
.account-settings-form { gap: 14px; }
.account-settings-form .inline-hint { line-height: 1.55; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-top: 2px; }
.inline-hint { color: #8390a0; font-size: 10px; line-height: 1.55; }
.form-actions .inline-hint { min-width: 0; }
.bots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 12px; }
.bot-card { display: grid; gap: 14px; padding: 17px; }
.bot-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bot-card h2 { margin: 0 0 5px; font-size: 16px; }
.bot-server { margin: 0; color: #8490a0; font-size: 10px; line-height: 1.5; }
.bot-status { display: inline-flex; align-items: center; max-width: 100%; padding: 5px 7px; border: 1px solid #394352; border-radius: 4px; color: #a7b1bf; background: #1b222b; font-size: 8px; font-weight: 700; line-height: 1.25; }
.bot-status.online { color: #9bc9af; border-color: #3a5849; background: #17251e; }
.bot-status.connecting { color: #e2c38b; border-color: #5a4b32; background: #272218; }
.bot-status.error { color: #e3a19e; border-color: #573b3e; background: #251b1f; }
.bot-identity { display: grid; gap: 5px; min-width: 0; padding: 10px 11px; border: 1px solid #2a3441; border-radius: 5px; color: #c1c9d4; background: #111720; font-size: 10px; overflow-wrap: anywhere; }
.bot-identity strong { color: #8693a6; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.password-saved { color: #8592a1; font-size: 9px; }
.bot-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.small-button { min-height: 31px; padding: 0 9px; border: 1px solid #3b4655; border-radius: 4px; color: #c2cad5; background: #171e28; font-size: 9px; font-weight: 700; cursor: pointer; transition: border-color .14s ease, background .14s ease, color .14s ease; }
.small-button:hover:not(:disabled) { border-color: #7384ae; color: #f0f2f7; background: #202a38; }
.small-button:disabled { opacity: .42; cursor: not-allowed; }
.small-button.primary-small { color: #11182b; border-color: var(--accent); background: var(--accent); }
.small-button.primary-small:hover:not(:disabled) { background: var(--accent-strong); }
.small-button.stop-small, .small-button.remove-small { color: #e0a3a0; border-color: #573b3e; }
.small-button.stop-small:hover:not(:disabled), .small-button.remove-small:hover:not(:disabled) { background: #2a1d22; }
.preset-bot-card { min-height: 175px; align-content: start; }
.preset-bot-card h2 { margin: 0 0 6px; }
.preset-count { margin: 0; color: #8490a0; font-size: 10px; }
.bots-empty { grid-column: 1 / -1; padding: 38px 20px; text-align: center; }
.bots-empty h2 { margin: 12px 0 6px; }
.bots-empty .muted { max-width: 450px; margin: 0 auto 16px; }
.empty-icon { width: 39px; height: 39px; display: grid; place-items: center; margin: 0 auto; border: 1px solid #4a5774; border-radius: 6px; color: #aab8e3; font-size: 20px; }
.bot-editor { max-width: 760px; margin-top: 15px; scroll-margin-top: 20px; }
.editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.editor-heading .card-label { margin-bottom: 5px; }
.editor-heading h2 { margin: 0; }
.bot-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.bot-form label { align-content: start; }
.bot-form .inline-hint { align-self: center; }
.server-field, .server-hint, .bot-form .form-actions { grid-column: 1 / -1; }
.bot-form .form-actions { margin-top: 2px; }
.page-status { display: block; margin: -8px 0 15px; }
.preset-library-heading { margin: 33px 0 15px; align-items: flex-end; }
.preset-library-heading h2 { margin: 0; }
.admin-running-card { align-content: start; }
.admin-running-card .eyebrow { margin: 0 0 8px; }
.admin-running-card .bot-identity { gap: 8px; }
.admin-preset-card { align-content: start; gap: 13px; }
.admin-preset-card h2 { margin: 0; }
.admin-preset-list { display: grid; gap: 7px; }
.admin-preset-item { border: 1px solid #303a47; border-radius: 5px; padding: 10px; }
.admin-preset-item summary { color: #d2d9e4; font-size: 10px; font-weight: 700; cursor: pointer; }
.admin-preset-item pre { max-height: 240px; overflow: auto; margin: 10px 0 0; padding: 10px; border-radius: 4px; color: #aab4c2; background: #0e1319; font: 10px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.table-card { padding: 0; overflow: hidden; }
.table-scroll { max-width: 100%; overflow-x: auto; }
table { width: 100%; min-width: 740px; border-collapse: collapse; }
th, td { padding: 12px 13px; border-bottom: 1px solid #28313d; text-align: left; font-size: 10px; }
th { color: #8793a3; background: #171e27; font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
td { color: #bdc6d1; }
td strong { color: #e1e6ee; font-size: 10px; }
.license-input { min-width: 185px; }
.table-card > .inline-hint { padding: 12px 14px; }
.status-pill { display: inline-block; padding: 4px 7px; border: 1px solid #394352; border-radius: 4px; color: #a6b0be; background: #1b222b; font-size: 8px; font-weight: 700; white-space: nowrap; }
.status-pill.active { color: #9bc9af; border-color: #3a5849; background: #17251e; }
.status-pill.running { color: #b2c1f4; border-color: #45547a; background: #1a2234; }
.admin-actions { display: flex; gap: 5px; }
.admin-role-note { margin-top: 4px; color: #8490a0; font-size: 9px; }
.toast { position: fixed; z-index: 10; right: max(22px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); max-width: min(420px, calc(100vw - 32px)); padding: 12px 15px; border: 1px solid #47536a; border-radius: 6px; color: #eff2f7; background: #202a39; box-shadow: 0 12px 38px #0005; font-size: 11px; line-height: 1.5; }
.toast.error { border-color: #74484b; background: #321f24; }

:focus-visible { outline: 2px solid #9bb0ff; outline-offset: 3px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

@media (min-width: 1400px) {
  .hero-section { min-height: 630px; }
}
@media (max-width: 980px) {
  .shell { width: min(100% - 48px, 1240px); }
  .public-nav { gap: 21px; }
  .hero-section { gap: 5%; }
  .hero-art { min-height: 370px; }
  .service-feature { grid-template-columns: .45fr 1.25fr 1.4fr; gap: 18px; }
  .service-action { grid-column: 2 / -1; justify-self: end; margin-top: -8px; }
  .app-layout { grid-template-columns: 177px minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 760px) {
  .shell { width: min(100% - 36px, 620px); }
  .public-site { padding-top: 8px; }
  .public-header { position: relative; min-height: 59px; }
  .brand-mark { width: 31px; height: 31px; }
  .brand-wordmark { font-size: 14px; }
  .mobile-menu-button { width: 40px; height: 38px; display: grid; align-content: center; justify-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 5px; background: #121821; cursor: pointer; }
  .mobile-menu-button span { width: 15px; height: 1px; background: #d1d8e3; transition: transform .16s ease; }
  .mobile-menu-button[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .mobile-menu-button[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .public-nav { position: absolute; z-index: 4; top: calc(100% + 1px); left: -1px; right: -1px; display: none; align-items: stretch; gap: 0; padding: 8px; border: 1px solid var(--line); border-radius: 0 0 7px 7px; background: #121821; box-shadow: 0 15px 28px #0005; }
  .public-nav.is-open { display: grid; }
  .public-nav a { min-height: 43px; display: flex; align-items: center; padding: 0 10px; }
  .public-nav .nav-cta { justify-content: space-between; margin-top: 5px; }
  .hero-section { min-height: auto; grid-template-columns: 1fr; gap: 37px; padding: 60px 0 59px; }
  .hero-copy { max-width: 560px; }
  .hero-copy h1 { max-width: 530px; font-size: clamp(43px, 9.2vw, 62px); }
  .hero-lede { max-width: 520px; font-size: 14px; }
  .hero-facts { gap: 12px 18px; margin-top: 33px; }
  .hero-art { width: min(100%, 500px); justify-self: center; }
  .content-section { padding: 56px 0; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .section-heading > p { max-width: 500px; }
  .service-feature { grid-template-columns: 45px 1fr; gap: 15px 13px; }
  .service-index { grid-row: 1 / span 2; }
  .service-description { grid-column: 2; max-width: 500px; }
  .service-action { grid-column: 2; justify-self: start; margin: 0; }
  .feature-section { padding-bottom: 60px; }
  .access-band { align-items: flex-start; flex-direction: column; gap: 21px; margin-bottom: 58px; padding: 25px 23px; }
  .access-note { width: 100%; min-width: 0; padding: 14px 0 0; border-top: 1px solid #354052; border-left: 0; }
  .login-section { grid-template-columns: 1fr; gap: 27px; padding: 47px 0 55px; }
  .login-intro { max-width: none; }
  .login-intro h2 { font-size: 34px; }
  .login-divider { margin: 20px 0 13px; }
  .auth-card { width: min(100%, 480px); }
  .public-footer { flex-wrap: wrap; justify-content: space-between; padding: 16px 0; }
  .public-footer > span { order: 3; width: 100%; }

  .app-view { padding-top: 4px; }
  .topbar { min-height: 59px; }
  .workspace-label, .user-divider { display: none; }
  .user-tools { gap: 8px; }
  .signed-user { max-width: 125px; font-size: 9px; }
  .user-tools .button { min-height: 32px; padding: 0 9px; font-size: 10px; }
  .app-layout { display: block; min-height: 0; }
  .app-nav { position: static; min-height: 0; flex-direction: row; gap: 4px; margin: 0 -18px; padding: 10px 18px 0; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .app-nav .nav-section-label, .sidebar-foot { display: none; }
  .app-nav .tab { width: auto; min-width: max-content; min-height: 37px; padding: 0 10px; border-radius: 4px 4px 0 0; }
  .nav-icon { display: none; }
  .app-content { padding-top: 25px; }
  .overview-grid { grid-template-columns: 1fr; }
  .account-settings-grid { grid-template-columns: 1fr; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
  .page-heading h1 { font-size: 27px; }
  .license-badge { white-space: normal; }
  .page-heading > .button { align-self: flex-start; }
  .bots-grid { grid-template-columns: 1fr; }
  .bot-form { grid-template-columns: 1fr; }
  .bot-form > * { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .shell { width: calc(100% - 32px); }
  .hero-section { padding-top: 48px; gap: 30px; }
  .hero-copy h1 { font-size: clamp(39px, 10.2vw, 47px); }
  .hero-lede { font-size: 13px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 16px; }
  .hero-actions .button { width: 100%; }
  .hero-facts { display: grid; gap: 10px; }
  .hero-art { min-height: 355px; padding: 17px 15px; }
  .art-side-note { right: -82px; }
  .art-fields { grid-template-columns: 1fr; gap: 7px; }
  .art-fields div { min-height: auto; }
  .art-footer { margin-top: 15px; font-size: 6px; }
  .section-heading h2, .access-copy h2 { font-size: 27px; }
  .service-feature { padding: 19px 0; }
  .feature-row { grid-template-columns: 32px 1fr 14px; gap: 10px; }
  .access-band { padding: 22px 17px; }
  .auth-card { padding: 21px 17px; }
  .public-footer { gap: 10px; }
  .public-footer > a:last-child { font-size: 8px; }
  .app-nav { margin-right: -16px; margin-left: -16px; padding-right: 16px; padding-left: 16px; }
  .signed-user { max-width: 94px; }
  .app-nav .tab { padding: 0 8px; font-size: 10px; }
  .card { padding: 16px; }
  .bot-card { padding: 14px; }
  .bot-card-head { flex-direction: column; }
  .bot-actions .small-button { flex: 1 1 auto; }
  .form-actions .button { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}