/* Decorative backdrop; never receives clicks or changes the document layout. */
body.space-page {
    background: #070d1d;
    isolation: isolate;
    color-scheme: dark;
    color: #e6efff;
    --panel: #101e33;
    --line: #2a3e58;
    --muted: #adc0d8;
    --green: #69e5b5;
    --red: #ff9caa;
    --cyan: #85dcf6;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 14px;
}
.space-backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 12% 25%, #20376280, transparent 48%),
        radial-gradient(ellipse at 90% 65%, #45235160, transparent 45%),
        linear-gradient(150deg, #050b19, #10192d 55%, #080e1e);
}
.space-backdrop::before {
    content: "";
    position: absolute;
    width: clamp(220px, 35vw, 540px);
    aspect-ratio: 1;
    right: -10%;
    top: 12%;
    border-radius: 50%;
    background: radial-gradient(circle at 28% 25%, #38587b, #182e4b 36%, #080e1d 68%);
    box-shadow: -10px -8px 45px #74b9ef1a, inset 5px 5px 18px #8cbde633;
    opacity: .7;
}
.space-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, #02061170);
}
#spaceScene { position: absolute; inset: 0; width: 100%; height: 100%; }
.space-page :is(.header, .telegram-panel, .scan-panel, .dashboard-tools, .prefix-form, .login-card, .modal-box) {
    background: linear-gradient(130deg, #15263cef, #0d192df7);
    border: 1px solid #2a405c;
    box-shadow: inset 0 1px 0 #a0d8ff0a, 0 18px 44px #00000035;
    border-radius: 16px;
}
.space-page .header { padding: 20px 24px; gap: 20px; }
.space-page .brand-mark {
    background: linear-gradient(145deg, #a3e6fb, #77a9ee);
    color: #0b1c34;
    border: 1px solid #c6efff;
    border-radius: 13px 4px 13px 4px;
    box-shadow: 0 0 24px #65caff20;
}
.space-page :is(h1, h2, h3, .login-brand strong) { color: #eff6ff; }
.space-page .header h1 { font-size: 23px; letter-spacing: -.6px; }
.space-page :is(.header p, .login-brand span) {
    color: #9cb3cf; font-size: 10px; letter-spacing: .13em; margin-top: 5px;
}
.space-page .header-actions { margin-top: 0; align-items: center; flex-wrap: wrap; }
.space-page :is(button, input, select) { font-family: inherit; }
.space-page :is(.header-actions a, .scene-toggle, .secondary-button, .cancel-button) {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 36px; padding: 8px 12px;
    border: 1px solid #354c69; border-radius: 8px;
    background: #14253b; color: #c9d9ed;
    font-size: 12px; font-weight: 600; cursor: pointer;
    box-shadow: none; text-decoration: none;
}
.space-page :is(.header-actions a, .scene-toggle, .secondary-button, .cancel-button):hover {
    background: #203953; color: #effaff; border-color: #79b7d6; transform: none;
}
.space-page :is(button, a, input, select, summary):focus-visible {
    outline: 2px solid #85dcf6; outline-offset: 3px;
}
.space-page button:disabled { opacity: .55; cursor: wait; transform: none; }
.space-page :is(.panel-small, .eyebrow, .section-caption) {
    color: #85cce5; font-size: 10px; font-weight: 700; letter-spacing: .13em;
}
.space-page .section-caption { margin: 0 0 12px; }
.space-page .telegram-panel { padding: 0; overflow: hidden; }
.space-page .telegram-panel > summary {
    list-style: none; cursor: pointer; padding: 16px 20px; gap: 14px;
}
.space-page .telegram-panel > summary::-webkit-details-marker { display: none; }
.space-page .telegram-panel > summary::after {
    content: "+"; font-size: 23px; font-weight: 300; color: #8dcfe9;
}
.space-page .telegram-panel[open] > summary::after { content: "−"; }
.space-page .telegram-panel[open] > summary { border-bottom: 1px solid #293e58; }
.space-page .telegram-panel > summary:hover { background: #a3d6ff06; }
.space-page .panel-title h2 { font-size: 15px; margin-top: 4px; }
.space-page .telegram-connection { margin-left: auto; background: #25344a; color: #c1d0e5; border: 1px solid #41546c; font-size: 11px; }
.space-page .telegram-connection.connected { background: #163e37; color: #8bf0c2; border-color: #2b6856; }
.space-page .telegram-grid { margin: 18px 20px 0; }
.space-page .telegram-actions { margin: 16px 20px 20px; flex-wrap: wrap; }
.space-page :is(.field label, .login-card label, .modal-box > label) { color: #bdcee4; font-size: 12px; }
.space-page :is(input, select, .modal-box > input, .login-card input) {
    background: #09172b; color: #e6efff;
    border: 1px solid #354b67; border-radius: 9px;
    font-size: 13px; min-height: 42px; box-shadow: none;
}
.space-page :is(input, select):focus { background: #0b1e35; border-color: #82cce9; box-shadow: 0 0 0 3px #63d1fc12; }
.space-page input::placeholder { color: #9aadca; opacity: 1; }
.space-page select option { background: #0e1d31; color: #e6efff; }
.space-page :is(.primary-button, .prefix-form button, .save-button) {
    background: linear-gradient(120deg, #8adff1, #9cbbff);
    color: #0a1a30; border: 1px solid #b4e5ff; border-radius: 9px;
    font-weight: 750; font-size: 13px; min-height: 42px;
    box-shadow: 0 4px 18px #71b4ff14;
}
.space-page :is(.primary-button, .prefix-form button, .save-button):hover {
    background: #b4eaff; color: #061321; transform: none; filter: none; box-shadow: 0 0 18px #73c7f825;
}
.space-page .prefix-form { margin-top: 14px; }
.space-page .prefix-form input { background: transparent; border: 0; }
.space-page .scan-panel { padding: 18px; }
.space-page .prefix-target-row {
    background: #0c1a2d; border: 1px solid #2a405c;
    border-radius: 11px; padding: 8px 10px; box-shadow: none;
}
.space-page .prefix-target-row:last-child { border-bottom: 1px solid #2a405c; }
.space-page .prefix-target-row:hover { border-color: #4a6b8d; box-shadow: none; }
.space-page .prefix-target-row .prefix-chip { background: transparent; border: 0; padding: 5px; }
.space-page :is(.prefix-chip strong, .ip-address) {
    color: #ebf5ff; font-family: Consolas, ui-monospace, monospace;
    font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.space-page .prefix-chip small { color: #9db3cc; font-size: 11px; }
.space-page .delete-prefix-button { min-width: 32px; height: 32px; color: #9fb7d1; }
.space-page .delete-prefix-button:hover { color: #ffbdc7; background: #562d3b; }
.space-page :is(.prefix-summary-card, .summary-card) { background: #192940; border: 1px solid #354b67; border-radius: 8px; min-width: 80px; }
.space-page :is(.prefix-summary-card, .summary-card) span { color: #c0d0e5; font-size: 9px; letter-spacing: .06em; }
.space-page :is(.prefix-summary-card, .summary-card) strong { color: #e6efff; font-size: 18px; font-variant-numeric: tabular-nums; }
.space-page :is(.prefix-summary-card.reply, .summary-card.reply) { background: #11382f; border-color: #2a6551; }
.space-page :is(.prefix-summary-card.reply, .summary-card.reply) strong { color: #7deabd; }
.space-page :is(.prefix-summary-card.rto, .summary-card.rto) { background: #3a2030; border-color: #704051; }
.space-page :is(.prefix-summary-card.rto, .summary-card.rto) strong { color: #ffa1b3; }
.space-page .scan-summary { align-items: center; border-top-color: #2a405c; flex-wrap: wrap; }
.space-page .aggregate-label { margin-right: auto; color: #adc2dc; font-size: 10px; letter-spacing: .1em; }
.space-page .dashboard-tools { gap: 10px; padding: 10px; }
.space-page :is(#latestScanInfo, #scanStatus, #telegramStatus, .input-unit span) { color: #acbdd5; font-size: 11px; }
.space-page #scanStatus:empty { display: none; }
.space-page #scanStatus:not(:empty) { margin-top: 12px; }
.space-page .legend { color: #bdcce1; font-size: 11px; }
.space-page .legend-box.reply { background: #69e5b5; }
.space-page .legend-box.rto { background: #ff9caa; }
.space-page .ip-grid { grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 12px; }
.space-page .ip-card {
    min-height: 205px; border-radius: 12px; padding: 16px;
    background: #142239; border: 1px solid #354b67; box-shadow: 0 6px 16px #00000020;
}
.space-page .ip-card.reply { background: linear-gradient(140deg, #153a35, #102c2b); border-color: #2b6654; }
.space-page .ip-card.rto { background: linear-gradient(140deg, #402632, #2b1e30); border-color: #734152; }
.space-page .ip-card.scanning { background: #373127; border-color: #867047; }
.space-page .ip-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px #00000035; }
.space-page :is(.ip-name, .no-name) { color: #c0cfe0; font-size: 12px; }
.space-page .no-name { color: #a2b5cb; }
.space-page .ip-status { border-bottom-color: #b0c8e324; font-size: 11px; min-height: 32px; }
.space-page .ip-card.reply .ip-status { color: #7deabd; }
.space-page .ip-card.rto .ip-status { color: #ffa1b3; }
.space-page :is(.ip-card.unknown .ip-status, .latency) { color: #c1d0e4; }
.space-page .ip-card.scanning .ip-status { color: #ffe1a1; }
.space-page .monitor-badge { padding: 5px 8px; font-size: 10px; }
.space-page :is(.monitor-disabled, .state-unknown, .state-down-ack) { background: #28384c; color: #ced9e8; }
.space-page .state-up { background: #225846; color: #a0f9ce; }
.space-page .state-down { background: #653344; color: #ffced6; }
.space-page .state-pending { background: #55452b; color: #ffe2a5; }
.space-page .card-actions { gap: 6px; }
.space-page .card-actions button {
    background: #0a1729a6; color: #d7e5f6; border: 1px solid #7389aa60;
    font-size: 11px; min-height: 34px; padding: 7px 3px;
}
.space-page .card-actions button:hover { background: #22394e; border-color: #85cce5; color: #f2fbff; }
.space-page .card-actions .monitor-toggle-button.enabled { background: #164a3b; border-color: #3d8d6e; color: #a1f0c9; }
.space-page .login-card { padding: 32px; border-radius: 22px; width: min(440px, 100%); }
.space-page .login-card .brand-mark { width: 46px; height: 46px; }
.space-page .login-brand { margin-bottom: 30px; }
.space-page .login-heading h1 { font-size: 32px; line-height: 1.15; letter-spacing: -.8px; margin: 12px 0; }
.space-page :is(.login-help, .login-footer) { color: #adc0d8; }
.space-page .login-help { margin-bottom: 22px; font-size: 13px; }
.space-page .login-card input { height: 46px; margin: 0; }
.space-page .login-card label { margin: 18px 0 8px; }
.space-page .login-card .password-toggle {
    color: #9be6fb; min-height: 32px; padding: 6px 10px; margin: 0;
    font-size: 11px; background: #1b3148; border: 1px solid #36516d;
}
.space-page .password-field input { padding-right: 104px; }
.space-page .login-card form .primary-button { min-height: 46px; margin-top: 24px; display: flex; align-items: center; justify-content: space-between; }
.space-page .login-scene-toggle { position: fixed; top: 18px; right: 20px; z-index: 5; background: #101e33e8; }
.space-page .login-footer { font-size: 11px; letter-spacing: .05em; }
.space-page input:-webkit-autofill { -webkit-text-fill-color: #e6efff; box-shadow: 0 0 0 1000px #142b42 inset; caret-color: #e6efff; }
.space-page .modal { background: #020816b8; padding: 16px; }
.space-page .modal-box { max-height: calc(100dvh - 32px); overflow-y: auto; width: 440px; max-width: 100%; }
.space-page .modal-box.wide-modal { width: 780px; }
.space-page :is(.modal-title span, .history-summary, .traceroute-status) { color: #afc2da; }
.space-page .modal-title h3 { font-family: Consolas, monospace; font-size: 20px; }
.space-page .close-modal { color: #c0d8ed; min-width: 36px; height: 36px; border-radius: 8px; }
.space-page .close-modal:hover { background: #2b4058; }
.space-page .history-chart-wrap { border: 1px solid #30445e; border-radius: 10px; background: #0b182c; }
.space-page #historyChart { display: block; width: 100%; height: auto; }
.space-page .traceroute-output { background: #060f20; color: #a3eccf; border-color: #30445e; font-size: 13px; }
.space-page .back-link { color: #95ddf5; }
.space-page .error { color: #ffd5dc; background: #4c2634; border: 1px solid #985569; }
.space-page .success-message { color: #b3f5d5; background: #174535; border: 1px solid #3c8868; }
@media (max-width: 800px) {
    .space-page .header { padding: 16px; }
    .space-page .header-actions { gap: 6px; }
    .space-page .header-actions > * { flex: 1 1 auto; }
    .space-page .prefix-target-row { gap: 8px; }
    .space-page .aggregate-label { flex-basis: 100%; }
    .space-page .scan-summary > .summary-card { flex: 1; }
    .space-page .prefix-target-summary { gap: 6px; }
    .space-page .prefix-summary-card { min-width: 0; }
}
@media (max-width: 520px) {
    .space-page.login-page { padding: 70px 16px 24px; }
    .space-page .login-card { padding: 26px 22px; }
    .space-page .login-heading h1 { font-size: 29px; }
    .space-page .login-brand span { font-size: 9px; }
    .space-page .scan-panel { padding: 12px; }
    .space-page .telegram-panel > summary { padding: 14px; gap: 8px; }
    .space-page .telegram-grid { margin: 16px 14px 0; }
    .space-page .telegram-actions { margin: 14px; }
    .space-page .telegram-connection { padding: 6px 8px; font-size: 10px; }
    .space-page .dashboard-tools :is(input, select) { width: 100%; min-width: 0; }
    .space-page .ip-grid { grid-template-columns: 1fr; }
    .space-page .ip-card { min-height: 0; }
    .space-page .card-actions button { min-height: 40px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .space-page *, .space-page *::before, .space-page *::after {
        animation: none !important;
        transition: none !important;
    }
}