:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #08090b;
    color: #f5f7fa;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #08090b; color: #f5f7fa; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.topbar {
    height: 68px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid #242831; background: #0d0f13;
}
.brand { font-size: 20px; font-weight: 750; letter-spacing: .2px; }
.brand span { color: #aeb7c5; font-weight: 500; }
.userbar { display: flex; align-items: center; gap: 14px; color: #b9c1cc; font-size: 14px; }
.ghost {
    border: 1px solid #343945; background: #15181e; color: #f4f6f8;
    border-radius: 9px; padding: 8px 12px; cursor: pointer;
}
.page { width: min(1180px, calc(100% - 40px)); margin: 34px auto 60px; }
.hero { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 22px; }
.hero h1 { margin: 0; font-size: 30px; }
.hero p { margin: 7px 0 0; color: #9ba4b2; }
.gpu-card {
    border: 1px solid #2a2f38; background: #101319; border-radius: 16px;
    padding: 20px; margin-bottom: 28px;
}
.gpu-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.status { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #6f7782; box-shadow: 0 0 0 4px #252a31; }
.gpu-copy { margin-top: 7px; color: #919aa7; font-size: 14px; }
.primary {
    border: 1px solid #3b424d; background: #f3f5f7; color: #0a0c0f;
    border-radius: 10px; padding: 10px 15px; font-weight: 750; cursor: pointer;
}
.section-title { margin: 0 0 14px; font-size: 18px; }
.tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tool {
    min-height: 164px; border: 1px solid #292e37; background: #101319;
    border-radius: 15px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between;
}
.tool h3 { margin: 0; font-size: 18px; }
.tool p { margin: 8px 0 0; color: #929ba8; line-height: 1.45; font-size: 14px; }
.pill {
    align-self: flex-start; margin-top: 18px; border: 1px solid #353b45; background: #171b21;
    color: #aab2be; border-radius: 999px; padding: 6px 9px; font-size: 12px; font-weight: 700;
}
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card {
    width: min(430px, 100%); border: 1px solid #292e37; background: #101319;
    border-radius: 18px; padding: 30px;
}
.login-card h1 { margin: 0; font-size: 26px; }
.login-card .sub { color: #9ba4b2; margin: 7px 0 24px; }
.field { margin: 14px 0; }
.field label { display: block; margin-bottom: 7px; font-size: 13px; color: #bac2cd; }
.field input {
    width: 100%; border: 1px solid #343a45; background: #090b0e; color: #f5f7fa;
    border-radius: 10px; padding: 12px 13px; outline: none;
}
.field input:focus { border-color: #6f7988; }
.login-card .primary { width: 100%; margin-top: 7px; }
.error { min-height: 21px; margin-top: 13px; color: #ff8c8c; font-size: 13px; }
.divider { display: flex; align-items: center; gap: 12px; color: #727b87; font-size: 12px; margin: 22px 0; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid #292e37; }
.google-placeholder {
    width: 100%; border: 1px solid #343a45; background: #15181e; color: #aab2be;
    border-radius: 10px; padding: 11px 13px; text-align: center;
}
.note { margin-top: 18px; color: #747e8a; font-size: 12px; line-height: 1.45; }
@media (max-width: 800px) {
    .tools { grid-template-columns: 1fr; }
    .topbar { padding: 0 18px; }
    .page { width: min(100% - 28px, 1180px); margin-top: 24px; }
}