:root { color-scheme: dark; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #0b0c0e; color: #e8e9eb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.muted { color: #8e9199; }
.small { font-size: 12px; }
.brand { font-size: 19px; font-weight: 720; letter-spacing: -.05em; white-space: nowrap; }
.brand-mark { display: inline-block; color: #e8ff6d; font-size: 27px; vertical-align: -2px; margin-right: 5px; }
.brand-muted { color: #888b94; font-weight: 450; letter-spacing: -.03em; }
.eyebrow { color: #abb07f; letter-spacing: .16em; font-size: 11px; font-weight: 700; }
.login-body { display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 10%, #1c211c, #0b0c0e 52%); }
.login-panel { width: min(100%, 420px); background: #121416; border: 1px solid #303338; border-radius: 14px; padding: 34px; box-shadow: 0 28px 80px #0008; }
.login-panel .brand { margin-bottom: 58px; }
h1 { font-size: 29px; letter-spacing: -.035em; margin: 12px 0 6px; font-weight: 620; }
.login-panel p { line-height: 1.55; }
form { display: grid; margin-top: 32px; }
label { font-size: 13px; margin: 16px 0 8px; color: #c8c9ce; }
input { width: 100%; padding: 12px 13px; background: #0d0f11; border: 1px solid #3a3d42; border-radius: 7px; color: #f4f4f5; font: inherit; outline: none; }
input:focus { border-color: #b2c05f; }
button { margin-top: 24px; background: #dcee85; color: #141713; border: 0; border-radius: 7px; padding: 12px; font: inherit; font-weight: 650; cursor: pointer; }
button:hover { background: #f0ffa5; }
.login-panel .small { margin-top: 28px; }
.auth-switch { font-size: 13px; margin-top: 20px; }
.auth-switch a { color: #dcee85; }
.password-hint { color: #777b82; font-size: 11px; margin: 8px 0 0; }
.dashboard-body { display: flex; }
.sidebar { width: 254px; min-width: 254px; min-height: 100vh; border-right: 1px solid #282b2f; padding: 23px 16px; display: flex; flex-direction: column; background: #101113; }
.sidebar .brand { padding: 0 10px; }
.workspace-chip { margin: 38px 4px 22px; padding: 10px; background: #1b1d20; border: 1px solid #33363a; border-radius: 9px; display: flex; gap: 10px; align-items: center; }
.workspace-avatar, .provider-icon { background: #333b2e; color: #e9fb99; display: grid; place-items: center; font-weight: 700; border-radius: 7px; }
.workspace-avatar { width: 32px; height: 32px; }
.workspace-chip strong { display: block; font-size: 12px; }
.workspace-chip small { display: block; margin-top: 3px; color: #888c94; font-size: 11px; }
nav { display: grid; gap: 5px; }
nav a, .sidebar-bottom a { color: #a5a8af; text-decoration: none; font-size: 13px; }
nav a { padding: 10px 13px; border-radius: 7px; display: flex; align-items: center; gap: 10px; }
nav a.selected, nav a:hover { color: #e9ebed; background: #24272b; }
.sidebar-bottom { margin-top: auto; padding: 20px 12px 0; display: grid; gap: 15px; border-top: 1px solid #26292c; }
.sidebar-bottom span { color: #656970; font-size: 11px; }
.main { width: 100%; min-width: 0; }
header { height: 65px; border-bottom: 1px solid #282b2f; padding: 0 36px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #898d95; }
header strong { color: #d8dbdd; font-weight: 530; }
.content { max-width: 1100px; margin: auto; padding: 42px 42px 80px; }
.content h1 { margin: 10px 0 9px; }
.content > p { font-size: 14px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 34px 0 44px; }
.card { background: #141619; border: 1px solid #2c2f34; border-radius: 10px; padding: 22px; min-height: 145px; }
.card-label { font-size: 12px; color: #a9acb2; }
.card-value { margin-top: 22px; font-size: 28px; font-weight: 650; }
.card-foot { margin-top: 4px; color: #777b82; font-size: 11px; }
.section { border-top: 1px solid #2a2c30; padding-top: 28px; margin-top: 34px; }
.section-head { display: flex; justify-content: space-between; align-items: end; }
h2 { font-size: 20px; font-weight: 620; margin: 8px 0 0; letter-spacing: -.02em; }
.section p { font-size: 13px; line-height: 1.5; }
.pill { border: 1px solid #4a5b38; background: #26311e; border-radius: 20px; color: #b4d18b; font-size: 11px; padding: 5px 9px; }
.list { margin-top: 18px; border: 1px solid #2d3034; border-radius: 9px; overflow: hidden; }
.list-row { display: flex; align-items: center; gap: 13px; padding: 13px 17px; background: #141619; border-bottom: 1px solid #292c30; }
.list-row:last-child { border-bottom: 0; }
.provider-icon { width: 34px; height: 34px; flex: none; font-size: 14px; }
.list-row strong { display: block; font-size: 13px; font-weight: 570; text-transform: capitalize; }
.list-row small { display: block; color: #83878e; font-size: 11px; margin-top: 3px; }
.row-suffix { margin-left: auto; color: #888d94; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
#directory-search { max-width: 340px; margin-top: 8px; }
@media (max-width: 740px) { .sidebar { width: 64px; min-width: 64px; padding: 17px 10px; } .sidebar .brand { font-size: 0; padding: 0; } .brand-mark { font-size: 25px; } .brand-muted, .workspace-chip, nav span, .sidebar-bottom { display: none; } nav { margin-top: 44px; } nav a { justify-content: center; } .content { padding: 30px 20px; } header { padding: 0 20px; } .cards { grid-template-columns: 1fr; } }