:root { color-scheme: light; --bg:#fff; --fg:#202124; --muted:#74777d; --line:#ececef; --border:#dedee3; --hover:#f5f5f7; --accent:#5967e8; --accent-soft:#edf0ff; --inverse:#fff; --danger:#c44747; }
@media (prefers-color-scheme:dark) { :root { color-scheme:dark; --bg:#000; --fg:#e9e9ec; --muted:#909098; --line:#202023; --border:#333339; --hover:#141416; --accent:#919aff; --accent-soft:#181b33; --inverse:#000; --danger:#ec8585; } }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { touch-action:pan-x pan-y; -webkit-text-size-adjust:100%; }
body { margin:0; font:14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--fg); background:var(--bg); -webkit-font-smoothing:antialiased; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:pan-x pan-y; }
[hidden],.hidden { display:none!important; }
button,input,select,textarea { font:inherit; color:inherit; }
button,a,input,select,textarea { touch-action:pan-x pan-y; }
input,select,textarea { min-width:0; font-size:16px; width:100%; background:var(--bg); border:1px solid var(--border); border-radius:7px; padding:9px 12px; min-height:42px; user-select:text; -webkit-user-select:text; -webkit-touch-callout:default; }
textarea { resize:vertical; line-height:1.6; }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:.75; }
input:disabled { background:var(--hover); color:var(--muted); }
input[type=checkbox] { width:16px; min-height:16px; margin:0; accent-color:var(--fg); }
button { cursor:pointer; border:0; background:none; }
button:disabled { opacity:.45; cursor:default; }
a { color:inherit; text-decoration:none; -webkit-user-drag:none; }
svg { flex-shrink:0; pointer-events:none; }
h1,h2,p { margin:0; }
h1 { font-size:16px; font-weight:600; letter-spacing:-.25px; }
h2 { font-size:14px; font-weight:600; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
input:focus-visible,textarea:focus-visible,select:focus-visible { outline-offset:1px; }
.icon { width:18px; height:18px; }
.muted { color:var(--muted); font-size:12px; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:-60px; left:12px; background:var(--fg); color:var(--inverse); padding:8px 12px; z-index:100; }
.skip-link:focus { top:12px; }
.app-shell { display:grid; grid-template-columns:190px minmax(0,1fr); min-height:100dvh; }
.sidebar { position:sticky; top:0; height:100dvh; display:flex; flex-direction:column; border-right:1px solid var(--line); padding:22px 12px 14px; }
.brand { display:flex; align-items:center; gap:9px; font-size:17px; font-weight:650; letter-spacing:-.5px; white-space:nowrap; }
.brand-dot { color:var(--accent); margin-left:2px; }
.brand-mail { font-weight:400; color:var(--muted); margin-left:5px; }
.sidebar .brand { padding:0 8px; margin-bottom:30px; }
.section-nav { display:flex; flex-direction:column; gap:3px; }
.nav-item { display:flex; align-items:center; gap:10px; min-height:40px; padding:9px 10px; border-radius:7px; color:var(--muted); font-size:13px; line-height:20px; text-align:left; }
.nav-item:hover { background:var(--hover); color:var(--fg); }
.nav-item[aria-current=page] { background:var(--hover); color:var(--fg); font-weight:550; }
.nav-divider { height:1px; background:var(--line); margin:12px 8px; }
.sidebar-logout { margin-top:auto; width:100%; }
.workspace { min-width:0; }
.topbar { border-bottom:1px solid var(--line); }.topbar-inner { min-height:64px; max-width:1160px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 28px; }
.page-compose .topbar-inner { max-width:950px; }.page-account .topbar-inner { max-width:760px; margin-left:0; }
.topbar-actions { display:flex; align-items:center; gap:8px; }
.button,.icon-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:9px 14px; border:1px solid transparent; border-radius:7px; font-weight:500; font-size:13px; line-height:20px; white-space:nowrap; }
.primary { background:var(--fg); color:var(--inverse); border-color:var(--fg); }
.primary:hover { opacity:.85; }
.outline { border-color:var(--border); }
.outline:hover,.quiet:hover,.icon-button:hover { background:var(--hover); }
.quiet,.icon-button { color:var(--muted); }
.compact { min-height:34px; padding:6px 10px; font-size:12px; }
.icon-button { width:36px; min-height:36px; padding:8px; }
.content { max-width:1160px; padding:28px; margin:0 auto; }
.content:focus { outline:none; }
.list-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.search-field { display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:7px; padding-left:11px; color:var(--muted); width:260px; max-width:100%; }
.search-field input { border:0; padding:8px 10px 8px 0; min-height:38px; }
.search-field:focus-within { outline:2px solid var(--accent); outline-offset:1px; }
.search-field input:focus { outline:0; }
.count { font-variant-numeric:tabular-nums; }
.table-wrap { width:100%; }
.data-table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:13px; }
.data-table th { font-size:11px; color:var(--muted); font-weight:500; text-align:left; padding:10px 10px; border-bottom:1px solid var(--line); }
.data-table td { padding:14px 10px; border-bottom:1px solid var(--line); overflow-wrap:anywhere; vertical-align:middle; }
.data-table th:first-child,.data-table td:first-child { padding-left:0; }
.data-table th:last-child,.data-table td:last-child { padding-right:0; }
.users-table th:nth-child(1) { width:18%; }.users-table th:nth-child(2) { width:16%; }.users-table th:nth-child(3) { width:24%; }.users-table th:nth-child(4) { width:14%; }.users-table th:nth-child(5) { width:14%; }.users-table th:last-child { width:14%; }
.tokens-table th:nth-child(1) { width:17%; }.tokens-table th:nth-child(2) { width:9%; }.tokens-table th:nth-child(3) { width:25%; }.tokens-table th:nth-child(4),.tokens-table th:nth-child(5) { width:17%; }.tokens-table th:last-child { width:15%; }
.user-name { font-weight:550; }.account-status,.date-cell { font-size:12px; }.is-disabled,.date-cell { color:var(--muted); }
.table-actions { text-align:right; white-space:nowrap; }
.table-actions .btn-text { display:inline-flex; justify-content:center; align-items:center; width:32px; height:32px; border-radius:5px; color:var(--muted); }
.table-actions .btn-text:hover { color:var(--fg); background:var(--hover); }.table-actions .btn-text + .btn-text { margin-left:4px; }
.empty-state { padding:28px 0!important; text-align:center; color:var(--muted); font-size:12px; }
.user-editor { max-width:700px; }
.form-section + .form-section { border-top:1px solid var(--line); padding-top:22px; margin-top:22px; }
.form-section h2 { margin-bottom:14px; }
.form-fields { display:grid; gap:14px; }.two-columns { grid-template-columns:1fr 1fr; }
.field { display:flex; flex-direction:column; gap:7px; color:var(--muted); font-size:12px; font-weight:500; }
.field input,.field textarea,.field select { color:var(--fg); font-weight:400; }
.switch-control { display:flex; align-items:center; gap:9px; position:relative; cursor:pointer; width:fit-content; min-height:34px; margin-top:12px; font-size:12px; }
.switch-control input { position:absolute; opacity:0; width:30px; height:18px; }
.switch-track { display:inline-block; width:30px; height:18px; border-radius:12px; background:var(--border); position:relative; }
.switch-track::after { content:''; position:absolute; width:12px; height:12px; top:3px; left:3px; border-radius:50%; background:var(--bg); transition:transform .15s; }
.switch-control input:checked + .switch-track { background:var(--fg); }.switch-control input:checked + .switch-track::after { transform:translateX(12px); background:var(--inverse); }.switch-control input:focus-visible + .switch-track { outline:2px solid var(--accent); outline-offset:3px; }
.form-footer { display:flex; justify-content:flex-end; gap:8px; padding-top:20px; }
.token-controls { display:flex; align-items:center; gap:10px; margin-bottom:20px; }.token-controls select { max-width:260px; }.token-controls .count { margin-left:auto; }
.token-result { margin-bottom:20px; border-bottom:1px solid var(--line); padding-bottom:20px; }.token-output-row { display:flex; align-items:center; gap:8px; margin-top:8px; }.token-output-row input { flex:1; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.token-value { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:12px; }
.metrics { display:grid; grid-template-columns:1fr 1fr; max-width:600px; gap:24px; margin-bottom:26px; }.metrics p { font-size:30px; font-weight:550; letter-spacing:-1px; font-variant-numeric:tabular-nums; margin-top:4px; overflow-wrap:anywhere; }
.activity-columns { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-bottom:26px; }.activity-columns section { min-width:0; }.activity-columns h2,.recent-log h2 { margin-bottom:12px; }
.rank-list { list-style:none; padding:0; margin:0; max-height:280px; overflow:auto; }.rank-list li { display:flex; justify-content:space-between; gap:16px; padding:10px 0 13px; position:relative; font-size:12px; }.rank-list li span:first-child { min-width:0; overflow-wrap:anywhere; }.rank-list li span:last-child { color:var(--muted); font-variant-numeric:tabular-nums; }
.rank-list li::after { content:''; position:absolute; left:0; bottom:4px; height:3px; border-radius:3px; width:var(--bar,0%); background:var(--chart-color,var(--accent)); }
.recent-item { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); font-size:12px; }.recent-item div { min-width:0; overflow-wrap:anywhere; }.recent-item small { color:var(--muted); font-size:11px; text-align:right; flex-shrink:0; }
.status { margin-top:12px; font-size:12px; min-height:18px; color:var(--muted); overflow-wrap:anywhere; }.status.error { color:var(--danger); }.toast:empty { display:none; }.toast { position:fixed; z-index:40; bottom:20px; left:calc(50% + 95px); transform:translateX(-50%); max-width:calc(100% - 32px); padding:10px 16px; background:var(--bg); color:var(--fg); border:1px solid var(--border); border-radius:7px; font-size:12px; overflow-wrap:anywhere; }.toast.error { color:var(--danger); }
.compose-content { max-width:950px; }.compose-line { display:grid; grid-template-columns:58px minmax(0,1fr); align-items:center; gap:10px; padding:4px 0; border-bottom:1px solid var(--line); }.compose-line > label { font-size:12px; color:var(--muted); }.compose-line input,.compose-line select { border:0; padding:8px 4px; border-radius:4px; }.from-controls { display:flex; align-items:center; gap:4px; min-width:0; }.from-controls input,.from-controls select { flex:1; width:0; }.from-controls > .muted { font-size:14px; }.message-editor { margin-top:12px; }.editor-tools { display:flex; align-items:center; flex-wrap:wrap; gap:12px; min-height:36px; margin-bottom:4px; }.checkbox-label { display:flex; align-items:center; gap:7px; font-size:11px; color:var(--muted); }.format-toolbar { display:flex; flex-wrap:wrap; gap:2px; }.format-btn { width:30px; min-height:30px; padding:6px; }.message-editor textarea { border:0; padding:8px 0; min-height:260px; resize:vertical; }.message-editor textarea:focus { outline:none; }.message-editor:focus-within textarea { box-shadow:inset 0 -1px var(--border); }
.attachments { display:flex; flex-wrap:wrap; gap:8px; }.attachment-item { display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:6px; padding:4px 8px; max-width:100%; font-size:12px; }.attachment-item span { overflow-wrap:anywhere; min-width:0; }.attachment-remove { display:grid; place-items:center; width:28px; height:28px; padding:4px; color:var(--muted); }
.compose-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:12px; border-top:1px solid var(--line); }.compose-secondary { display:flex; gap:2px; }.compose-secondary .button { padding:8px 9px; }.send-options-menu { padding:16px 0 0; }.send-options-content { display:grid; grid-template-columns:1fr 1fr auto; align-items:end; gap:12px; }.send-options-content .button { min-height:42px; }
.modal { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; background:#0005; padding:20px; }.modal-content { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:20px; width:100%; max-width:380px; max-height:80dvh; overflow:auto; }.command-list { display:grid; margin-top:12px; gap:4px; }.command-item { display:flex; align-items:center; gap:10px; text-align:left; padding:10px; border-radius:6px; }.command-item:hover,.command-item.selected { background:var(--hover); }.shortcuts-list { margin:14px 0; }.shortcuts-list > div { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:12px 0; font-size:12px; }kbd { font:11px ui-monospace,monospace; color:var(--muted); }
.login-page { display:grid; place-items:center; min-height:100dvh; padding:24px; }.login-content { width:100%; max-width:330px; }.login-brand { margin-bottom:28px; }.login-content h1 { font-size:19px; margin-bottom:20px; }.login-content form { display:grid; gap:14px; }.login-content form .button { margin-top:4px; }.login-content > .button { width:100%; margin-top:10px; }.login-docs { display:block; width:fit-content; margin:20px auto 0; }.login-content #error:empty { display:none; }
.wiki-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:28px; }.wiki-payload { min-width:0; }.wiki-payload h2 { margin-bottom:14px; }.wiki-examples { min-width:0; display:grid; grid-template-columns:minmax(0,1fr); gap:20px; align-content:start; }.section-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }.code-block { margin:0; padding:14px; background:var(--hover); border-radius:7px; font:12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; overflow:auto; white-space:pre; }.tab-row { display:flex; gap:3px; }.tab-btn { padding:6px 10px; color:var(--muted); border-radius:5px; font-size:12px; }.tab-btn.active { background:var(--hover); color:var(--fg); }.schema-details { border-top:1px solid var(--line); padding-top:16px; }.schema-details summary { cursor:pointer; font-size:12px; color:var(--muted); }.schema-table { width:100%; border-collapse:collapse; font-size:11px; margin:12px 0; }.schema-table th { font-family:ui-monospace,monospace; font-weight:400; text-align:left; }.schema-table th,.schema-table td { border-bottom:1px solid var(--line); padding:8px; overflow-wrap:anywhere; }.schema-table td { color:var(--muted); }
.account-content { max-width:760px; margin-left:0; }.account-summary { display:flex; align-items:center; gap:12px; padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }.avatar { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--hover); }.passkey-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-size:12px; }.passkey-row div { min-width:0; overflow-wrap:anywhere; }.passkey-form { padding-top:20px; max-width:400px; }
@media (max-width:1100px) { .app-shell { grid-template-columns:166px minmax(0,1fr); }.sidebar .brand { padding:0 2px; font-size:15px; gap:7px; }.content { padding:22px; }.topbar-inner { padding:12px 22px; }.toast { left:calc(50% + 83px); }.wiki-layout { grid-template-columns:210px minmax(0,1fr); gap:20px; } }
@media (max-width:900px) { .data-table thead { display:none; }.data-table,.data-table tbody { display:block; }.data-table tr { display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; border-top:1px solid var(--line); padding:14px 0; }.data-table tr:last-child { border-bottom:1px solid var(--line); }.data-table td { display:block; border:0; padding:0!important; font-size:12px; }.data-table td::before { content:attr(data-label); display:block; color:var(--muted); font-size:10px; margin-bottom:3px; font-weight:400; }.data-table td.user-name { grid-column:1 / -1; font-size:14px; }.data-table td.user-name::before { display:none; }.data-table td.table-actions { grid-column:1 / -1; display:flex; justify-content:flex-end; gap:4px; }.data-table td.table-actions::before { display:none; }.data-table td.token-value { grid-column:1 / -1; }.data-table td.empty-state { grid-column:1 / -1; padding:20px 0!important; }.recent-item { flex-direction:column; gap:4px; }.recent-item small { text-align:left; flex-shrink:1; }.wiki-layout { grid-template-columns:1fr; }.wiki-payload .form-fields { grid-template-columns:1fr 1fr; } }
@media (max-width:650px) { .app-shell { display:block; }.sidebar { position:static; height:auto; padding:14px 16px 0; border-right:0; border-bottom:1px solid var(--line); flex-direction:row; flex-wrap:wrap; align-items:center; }.sidebar .brand { font-size:17px; padding:0; margin:0; flex:1; }.sidebar-logout { width:auto; margin:0; padding:7px; order:1; }.sidebar-logout span { display:none; }.section-nav { order:2; flex:0 0 calc(100% + 8px); width:0; min-width:0; margin:12px -4px 8px; flex-direction:row; gap:2px; overflow-x:auto; scrollbar-width:none; }.section-nav::-webkit-scrollbar { display:none; }.section-nav .nav-item { flex:1 0 auto; min-height:34px; padding:7px 6px; font-size:11px; justify-content:center; }.section-nav .nav-item .icon { display:none; }.nav-divider { display:none; }.topbar-inner { min-height:56px; padding:10px 16px; gap:10px; }.content { padding:18px 16px 32px; }.topbar h1 { font-size:15px; }.toast { left:50%; width:max-content; bottom:16px; }.two-columns { grid-template-columns:1fr; }.form-footer .button { flex:1; }.user-editor { max-width:none; }.token-controls { gap:8px; flex-wrap:wrap; }.token-controls select { flex:1; width:0; max-width:none; }.token-controls .count { display:none; }.token-output-row { flex-wrap:wrap; }.token-output-row input { flex-basis:100%; }.token-output-row .button { flex:1; }.activity-columns { grid-template-columns:1fr; gap:22px; }.metrics { gap:18px; }.metrics p { font-size:28px; }.compose-line { grid-template-columns:44px minmax(0,1fr); gap:6px; }.from-controls { gap:2px; }.from-controls input,.from-controls select { padding:8px 2px; }.compose-secondary .button { padding:7px; gap:6px; font-size:12px; }.compose-footer .primary { padding:8px 12px; }.message-editor textarea { min-height:220px; }.send-options-content { grid-template-columns:1fr; }.send-options-content .button { justify-self:end; }.wiki-payload .form-fields { grid-template-columns:1fr; }.login-page { place-items:start center; padding-top:clamp(36px,15dvh,120px); }.login-brand { margin-bottom:24px; }.code-block { font-size:11px; padding:12px; } }
@media (prefers-reduced-motion:reduce) { *,*::after { transition:none!important; scroll-behavior:auto!important; } }

.passkey-row > div { flex:1; }.passkey-row small { display:block; margin-top:3px; }.passkey-list:empty { display:none; }