/* Theme on top of the local Bootstrap build (static/vendor/bootstrap.min.css). */
:root { --bs-body-bg: #0d111a; --bs-body-color: #eef2f7; --accent: #70ddc4; --bs-link-color: #9db5c7; --bs-link-hover-color: var(--accent); }
body { min-height: 100vh; background: radial-gradient(ellipse at 72% -10%, #203b3f 0, #111724 37%, #0d111a 74%) fixed; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.wrap { max-width: 850px; }
.topline { display: flex; align-items: center; gap: 11px; font-size: .78rem; letter-spacing: .2em; font-weight: 500; color: #c9d5e1; }
.topline strong { color: #62dbc2; }
.brand-icon { color: #66dcc3; font-size: 29px; line-height: 1; }
.panel { border: 1px solid #303b49; background: linear-gradient(145deg, #1a2430, #141c26); border-radius: 22px; box-shadow: 0 20px 60px #0004; }
.login { max-width: 460px; margin-bottom: 70px; }
.kicker { font-weight: 800; letter-spacing: .17em; color: #62dbc2; font-size: .69rem; }
h1 { font-size: clamp(1.7rem, 6vw, 2.6rem); margin: 8px 0 12px; letter-spacing: -.045em; }
h2 { font-size: 1.27rem; letter-spacing: -.02em; margin: 0; }
p { color: #adbaca; line-height: 1.6; }
.form-control { background: #0c141e; border-color: #435164; color: #fff; }
.form-control:focus { background: #0c141e; color: #fff; border-color: var(--accent); box-shadow: 0 0 0 .2rem #70ddc433; }
.btn { min-height: 44px; }
.btn-accent { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-color: #10211f; --bs-btn-hover-bg: #91f0d8; --bs-btn-hover-border-color: #91f0d8; --bs-btn-hover-color: #10211f; --bs-btn-active-bg: #91f0d8; --bs-btn-active-color: #10211f; font-weight: 800; }
.btn-secondary { --bs-btn-bg: #293747; --bs-btn-border-color: #293747; --bs-btn-hover-bg: #344558; --bs-btn-hover-border-color: #344558; }
button:disabled { opacity: .45; cursor: not-allowed; }
.server-icon { width: 59px; height: 59px; flex: none; border: 1px solid #486f63; background: #243b38; color: #a1ebd3; border-radius: 15px; display: grid; place-items: center; font-size: 2rem; }
.server-info { min-width: 0; flex-basis: 12rem; }
.server-info span { color: #9faebf; font-size: .84rem; display: block; overflow-wrap: anywhere; padding-top: 5px; }
.server-info h2 { overflow-wrap: anywhere; }
.pill { padding: 9px 13px; border-radius: 100px; font-size: .76rem; font-weight: 750; display: flex; align-items: center; gap: 8px; }
.pill.online { background: #183d32; color: #7de0b7; }
.pill.offline { background: #4b2931; color: #ffb7bd; }
.pill.neutral { background: #334155; color: #e2e8f0; }
.dot { display: inline-block; height: 7px; width: 7px; border-radius: 50%; background: currentColor; }
.meta { border-top: 1px solid #364150; border-bottom: 1px solid #364150; }
.meta small { display: block; color: #899aae; letter-spacing: .09em; font-size: .68rem; margin-bottom: 8px; }
.meta strong { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .92rem; overflow-wrap: anywhere; }
.action-button { padding: 22px 18px; text-align: left; color: #ecf3f6; background: #223141; border: 1px solid #42576b; border-radius: 13px; display: flex; gap: 8px; flex-direction: column; font: inherit; }
.action-button:hover:not(:disabled) { border-color: var(--accent); background: #2b3b4b; }
.action-button strong { font-size: 1.16rem; }
.action-button span:last-child { color: #adc0d0; font-size: .83rem; line-height: 1.5; }
.action-icon { color: #6dddd0; font-size: 1.7rem; line-height: 1; margin-bottom: 7px; }
.job { margin-top: 18px; border-radius: 9px; padding: 12px 14px; background: #111c27; color: #a9decc; font-size: .86rem; overflow-wrap: anywhere; }
.job.failed { color: #ffb7bd; }
footer { text-align: center; color: #687c90; font-size: .73rem; margin-top: 32px; }
.overlay { position: fixed; inset: 0; background: #000b; padding: 16px; display: grid; place-items: center; z-index: 1050; overflow-y: auto; }
.overlay[hidden] { display: none; }
.dialog { background: #1c2935; border: 1px solid #516476; border-radius: 17px; width: min(100%, 490px); padding: 24px; box-shadow: 0 20px 100px #0008; }
.dialog h2 { font-size: 1.5rem; margin-top: 12px; }
@media (max-width: 575.98px) { .panel { border-radius: 16px; } .pill { margin-left: 0; } }