:root { color-scheme: dark; font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; background: #0b0c0f; color: #f3f4f7; --bg: #0b0c0f; --side: #090a0d; --card: #191a1d; --border: #313339; --text: #f3f4f7; --muted: #aaaeb8; --blue: #438ff5; }
:root[data-theme="light"] { color-scheme: light; --bg: #f5f7fb; --side: #eef2f8; --card: #fff; --border: #d8deea; --text: #182235; --muted: #556174; --blue: #2457d5; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; height: 100dvh; overflow: hidden; background: var(--bg); color: var(--text); }
button, a.button-link { font: inherit; color: var(--text); background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: 6px 11px; cursor: pointer; text-decoration: none; }
button:hover, a.button-link:hover { border-color: var(--blue); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
button.primary { color: white; background: var(--blue); border-color: var(--blue); font-weight: 650; }
a { color: var(--blue); text-decoration: none; }
p { color: var(--muted); line-height: 1.4; }
small, .muted { color: var(--muted); }
h1 { font-size: clamp(24px, 2.5vw, 28px); letter-spacing: -.025em; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 0; }
.app-shell { height: 100dvh; min-height: 0; overflow: hidden; display: grid; grid-template-columns: 218px minmax(0, 1fr); }
.sidebar { min-height: 0; background: var(--side); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 19px 11px 15px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px; font-size: 15px; }
.brand strong, .brand small { display: block; }
.brand small { font-size: 13px; margin-top: 2px; }
.mark { display: block; width: 32px; height: 32px; flex: none; border-radius: 8px; }
.side-nav { display: grid; gap: 2px; margin-top: 23px; }
.nav-item { border: 0; width: 100%; text-align: left; color: var(--muted); font-weight: 600; padding: 8px 12px; }
.nav-item:hover { background: color-mix(in srgb, var(--blue) 10%, transparent); }
.nav-item.active { color: var(--blue); background: color-mix(in srgb, var(--blue) 11%, transparent); }
.sidebar-bottom { margin-top: auto; padding: 16px 10px 0; border-top: 1px solid var(--border); }
.account-summary { display: flex; align-items: center; gap: 9px; min-width: 0; margin-bottom: 10px; }
.account-avatar { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--blue) 24%, transparent); color: var(--blue); font-weight: 700; }
.account-copy { min-width: 0; }
.account-copy strong, .account-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-copy strong { font-size: 12px; }
.account-copy small { font-size: 11px; }
.quiet-button { width: 100%; }
.content { min-height: 0; width: min(100% - 80px, 1010px); margin: 0 auto; padding: 38px 0 24px; overflow-y: auto; scrollbar-width: thin; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.page-heading p { margin: 0; }
.heading-actions { display: flex; gap: 8px; flex: none; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 17px; margin-bottom: 12px; }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; }
.login-panel { max-width: 620px; margin: 8vh auto 0; padding: 28px; }
.login-panel p { max-width: 560px; margin: 10px 0 20px; }
.eyebrow { color: var(--blue); font-weight: 700; margin-bottom: 11px; }
.status { margin: 0; padding-bottom: 3px; font-size: 12px; }
.devices { display: grid; }
.device { display: flex; align-items: center; gap: 11px; border-top: 1px solid var(--border); padding: 9px 0; }
.device > div:nth-child(2) { min-width: 0; }
.device:last-child { padding-bottom: 0; }
.device-icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--blue); font-weight: 800; }
.device-name { display: block; font-size: 13px; }
.device-id { font: 11px/1.4 ui-monospace, Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); margin: 3px 0 0; }
.device-meta { margin: 1px 0 0; font-size: 11px; }
.device-actions { display: flex; align-items: center; gap: 7px; flex: none; margin-left: auto; }
.badge { flex: none; font-size: 12px; border-radius: 7px; padding: 5px 8px; background: #173929; color: #80dfaa; }
.badge.offline { background: #292b30; color: #b1b3ba; }
.copy-device-id, .rename-device { flex: none; font-size: 11px; padding: 5px 8px; }
.client-row { border-top: 1px solid var(--border); padding: 9px 0; display: grid; align-items: center; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 11px; }
.client-row:last-child { padding-bottom: 0; }
.client-row p { margin: 2px 0 0; font-size: 12px; }
.client-row code { overflow-wrap: anywhere; }
.client-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: #fff; font-weight: 750; }
.client-icon.chatgpt { background: #277a6b; }
.client-icon.grok { background: #424652; }
.client-icon.claude { background: #ae704e; }
.client-icon.dsh { background: #315f9f; }
.client-icon.mcp { background: #333641; }
.client-actions { display: flex; align-items: center; gap: 7px; }
.client-state { display: inline-block; margin-left: 9px; color: var(--muted); font-size: 11px; }
.client-state.used { color: #80dfaa; }
.usage-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.usage-summary strong { display: inline-block; font-size: 28px; line-height: 1.2; margin-top: 8px; }
.usage-summary span { margin-left: 6px; color: var(--muted); }
.usage-chart { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: 10px; height: 190px; padding: 12px 4px 0; border-bottom: 1px solid var(--border); }
.usage-column { display: flex; height: 100%; min-width: 0; flex-direction: column; align-items: center; justify-content: end; gap: 5px; color: var(--muted); font-size: 11px; }
.usage-value { white-space: nowrap; }
.usage-bar { display: block; width: min(100%, 70px); min-height: 1px; background: var(--blue); border-radius: 5px 5px 0 0; }
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.plan-grid .card { min-width: 0; }
.plan-grid p { margin: 9px 0; }
.plan-price { font-size: 28px; color: var(--text); font-weight: 700; }
.plan-price small { font-size: 13px; font-weight: 400; }
.plan-badge { float: right; padding: 3px 7px; border-radius: 6px; color: #fff; background: var(--blue); font-size: 11px; }
.connection-notice { margin: 0 0 12px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; background: color-mix(in srgb, var(--blue) 6%, var(--card)); font-size: 12px; }
.connection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.connection-step { margin: 0; min-width: 0; }
.connection-step h2 { display: flex; align-items: center; gap: 8px; }
.connection-step p { margin: 9px 0; font-size: 12px; }
.connection-step p:last-child { margin-bottom: 0; }
.connection-step pre { max-width: 100%; overflow-x: auto; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 11px; }
.step-number { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--blue) 18%, transparent); color: var(--blue); font-size: 12px; }
.connection-field { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.connection-field span { flex: none; color: var(--muted); font-size: 11px; }
.connection-field code { min-width: 0; flex: 1; overflow-wrap: anywhere; font-size: 11px; }
.connection-field button { flex: none; padding: 4px 8px; }
.connection-footnote { margin: 12px 0 0; font-size: 11px; }
.other-clients { margin-top: 8px; border-top: 1px solid var(--border); }
.other-clients summary { padding: 12px 0; color: var(--muted); font-weight: 600; cursor: pointer; }
.other-clients summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.boundary-card p { margin: 8px 0 0; }
.empty-feature { padding: 24px; }
.empty-feature p { max-width: 680px; margin-bottom: 0; }
.install-card p { margin: 9px 0; }
.install-card .command-line { margin: 10px 0; }
.install-access { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 8px; }
.install-access p { color: var(--muted); }
.install-access details { margin-top: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.install-access summary { cursor: pointer; color: var(--text); font-weight: 600; }
.install-access details p { margin: 8px 0; }
.install-access button { margin-top: 2px; }
.install-access button:disabled { opacity: .5; cursor: not-allowed; }
.install-platforms { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.install-platforms span { border: 1px solid var(--border); border-radius: 7px; padding: 5px 8px; }
.install-platforms b { color: var(--muted); font-size: 11px; margin-left: 5px; }
.install-notice { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 8px; }
.install-notice button { flex: none; }
.setting-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.setting-row p { margin: 6px 0 0; }
.theme-switch { display: flex; gap: 7px; flex: none; }
.theme-switch button.selected { color: white; background: var(--blue); border-color: var(--blue); }
dialog { color: var(--text); background: var(--card); border: 1px solid var(--border); border-radius: 14px; width: min(580px, calc(100vw - 28px)); max-height: min(86vh, 760px); overflow-y: auto; padding: 20px; box-shadow: 0 28px 75px #0009; }
.small-dialog { width: min(390px, calc(100vw - 28px)); }
dialog::backdrop { background: #000b; }
.dialog-heading { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.dialog-heading p { margin: 3px 0 0; }
.dialog-heading button { font-size: 20px; line-height: 1; padding: 2px 9px; }
dialog label { display: block; font-weight: 600; margin: 12px 0 5px; }
dialog input, dialog textarea { display: block; width: 100%; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 7px; padding: 8px; font: 12px/1.4 ui-monospace, Consolas, monospace; }
dialog input { font: inherit; }
.help-text { font-size: 12px; margin: 10px 0; }
.command-line { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); }
.command-line code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 11px; }
.full-button { width: 100%; margin-top: 12px; }
.dialog-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }
.dialog-message { font-size: 12px; min-height: 18px; margin: 10px 0 0; }
.dialog-message.error { color: #f19a9a; }
@media (max-width: 760px) { .app-shell { display: flex; flex-direction: column; } .sidebar { flex: none; padding: 11px 14px; } .side-nav { display: flex; overflow-x: auto; margin-top: 11px; } .nav-item { width: auto; flex: none; } .sidebar-bottom { display: flex; align-items: center; gap: 10px; padding: 8px 0 0; margin-top: 8px; } .account-summary { flex: 1; margin: 0; } .quiet-button { width: auto; flex: none; } .content { width: min(100% - 28px, 1010px); padding-top: 18px; } .page-heading, .setting-row { align-items: flex-start; flex-direction: column; } .client-row { grid-template-columns: 32px minmax(0, 1fr); } .client-actions { grid-column: 2; flex-wrap: wrap; } .connection-grid, .plan-grid { grid-template-columns: 1fr; } .card { padding: 13px; } }
@media (max-width: 540px) { .device { display: grid; grid-template-columns: 32px minmax(0, 1fr); } .device-actions { grid-column: 2; margin-left: 0; flex-wrap: wrap; } .heading-actions { width: 100%; } }

/* Calls and transfer usage; three plan cards. */
.usage-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
.plan-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){.usage-summary,.plan-grid{grid-template-columns:1fr}}

.bw-page-switch{display:flex!important;flex-wrap:nowrap!important;gap:4px;align-items:center;width:100%;padding:0 0 14px;margin:12px 0 0;border-bottom:1px solid var(--border);flex:none}
.bw-page-switch a{flex:1;text-align:center;text-decoration:none;padding:10px 4px!important;border:0;border-radius:14px;font-size:14px!important;font-weight:700;color:var(--muted);background:transparent;white-space:nowrap}
.bw-page-switch a:hover{color:var(--text);background:rgba(82,139,245,.08)}
.bw-page-switch a[aria-current="page"]{color:#578cfa;background:#121b2a}

.sidebar>.bw-page-switch{margin-top:auto}.sidebar-bottom{margin-top:0}

.bw-page-switch a{font-size:12px!important;padding:8px 4px!important}.bw-account{display:flex;gap:10px;align-items:center;min-width:0;padding:12px 0}.bw-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#1b2a44;color:#578cfa;font-weight:700;flex:none}.bw-account-copy{display:grid;gap:3px;min-width:0}.bw-account-copy strong{font-size:13px}.bw-account-copy small{font-size:12px;color:var(--muted)}.bw-account-copy strong,.bw-account-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.bw-footer{display:flex!important;flex-direction:column!important;gap:0!important;margin-top:auto!important;padding-top:12px!important;flex:none;min-width:0;width:100%}
.bw-footer .bw-page-switch{display:flex!important;gap:4px!important;align-items:center;width:100%;padding:0 0 14px!important;margin:0!important;border-bottom:1px solid #2b2e35!important}
.bw-footer .bw-page-switch a{flex:1;text-align:center;text-decoration:none;padding:8px 4px!important;border:0;border-radius:14px;font-size:12px!important;line-height:20px;font-weight:700;color:#a9b0bc;background:transparent;white-space:nowrap}
.bw-footer .bw-page-switch a[aria-current="page"]{color:#578cfa;background:#121b2a}
.bw-footer .bw-account{display:flex;gap:10px;align-items:center;min-width:0;margin:0!important;padding:16px 4px!important}
.bw-footer .bw-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#1b2a44;color:#578cfa;font-weight:700;font-size:16px;flex:none}
.bw-footer .bw-account-copy{display:grid;gap:3px;min-width:0}
.bw-footer .bw-account-copy strong{font-size:13px;line-height:18px;font-weight:650;color:#f4f8ff}
.bw-footer .bw-account-copy small{font-size:12px;line-height:16px;color:#a9b0bc}
.bw-footer .bw-account-copy strong,.bw-footer .bw-account-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bw-footer button{position:static!important;margin:0!important;width:100%!important;min-width:0!important;height:40px!important;min-height:40px!important;border:1px solid #34373f!important;border-radius:12px!important;padding:8px!important;background:transparent!important;color:#f4f8ff!important;text-align:center!important;font-size:13px!important;line-height:20px!important;font-weight:500!important}
.bw-footer button[hidden],.bw-footer [hidden]{display:none!important}

.bw-footer{font:13px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;background:#090a0d}
@media(min-width:1024px){.app-shell{grid-template-columns:260px minmax(0,1fr)}.sidebar{padding-left:14px;padding-right:14px}}

.bw-footer,.bw-footer *{box-sizing:border-box}.bw-footer .bw-page-switch a{flex:1 1 0!important;max-width:none!important}.bw-footer button{max-width:none!important;align-self:stretch!important}

.bw-footer{padding-left:0!important;padding-right:0!important}

.bw-footer{border-top:0!important}