:root {
    color-scheme: dark;

    --bg: #06101b;
    --panel: #0d1c2d;
    --panel2: #13263b;
    --line: #233a52;

    --text: #f4f7fb;
    --muted: #9db0c5;

    --primary: #2f80ed;
    --success: #36b37e;
    --danger: #e45a63;

    --header: 64px;
    --nav: 68px;

    --top: env(safe-area-inset-top, 0px);
    --right: env(safe-area-inset-right, 0px);
    --bottom: env(safe-area-inset-bottom, 0px);
    --left: env(safe-area-inset-left, 0px);
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    overscroll-behavior: none;
}

body {
    min-height: 100dvh;
}

button,
input {
    font: inherit;
}

button {
    color: inherit;
}

[hidden] {
    display: none !important;
}

.boot {
    min-height: 100dvh;

    display: grid;
    place-content: center;
    justify-items: center;

    gap: 10px;

    color: var(--text);
}

.boot small {
    color: var(--muted);
}

.logo {
    position: relative;

    width: 54px;
    height: 54px;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #398cf9,
            #1f66c8
        );
}

.logo.small {
    width: 48px;
    height: 48px;
}

.logo.tiny {
    width: 36px;
    height: 36px;

    border-radius: 10px;
}

.logo::before,
.logo::after {
    content: "";

    position: absolute;

    background: white;

    border-radius: 2px;
}

.logo::before {
    width: 50%;
    height: 16%;

    left: 25%;
    top: 42%;
}

.logo::after {
    width: 16%;
    height: 50%;

    left: 42%;
    top: 25%;
}

.login-screen {
    min-height: 100dvh;

    padding:
        calc(20px + var(--top))
        calc(18px + var(--right))
        calc(20px + var(--bottom))
        calc(18px + var(--left));

    display: grid;
    place-items: center;

    background:
        radial-gradient(
            circle at 20% 10%,
            rgba(47,128,237,.18),
            transparent 38%
        ),
        var(--bg);
}

.login-card {
    width: min(430px, 100%);

    padding: 22px;

    border: 1px solid var(--line);
    border-radius: 20px;

    background: var(--panel);
}

.brand {
    display: flex;
    align-items: center;

    gap: 11px;
}

.brand strong,
.brand small {
    display: block;
}

.brand small {
    margin-top: 2px;

    color: var(--muted);
}

.login-card h1 {
    margin:
        26px 0 6px;
}

.login-card p {
    margin:
        0 0 18px;

    color: var(--muted);

    line-height: 1.45;
}

label {
    display: block;

    margin: 14px 0;

    color: var(--muted);

    font-size: 13px;
    font-weight: 700;
}

input {
    width: 100%;
    min-height: 48px;

    margin-top: 6px;

    padding: 11px 12px;

    border: 1px solid var(--line);
    border-radius: 11px;

    background: #071522;
    color: var(--text);

    outline: none;
}

input:focus {
    border-color: #559cff;

    box-shadow:
        0 0 0 3px
        rgba(47,128,237,.18);
}

.btn {
    min-height: 44px;

    padding: 9px 14px;

    border: 1px solid var(--line);
    border-radius: 11px;

    background: var(--panel2);
    color: var(--text);

    font-weight: 800;
}

.btn.primary {
    border-color: var(--primary);
    background: var(--primary);
}

.btn.danger {
    border-color:
        rgba(228,90,99,.45);

    background:
        rgba(228,90,99,.14);

    color: #ffabb1;
}

.btn.compact {
    min-height: 38px;

    padding: 7px 10px;

    font-size: 12px;
}

.full {
    width: 100%;
}

.network {
    margin-top: 16px;

    color: var(--muted);

    font-size: 12px;
}

.shell {
    min-height: 100dvh;

    padding-top:
        calc(
            var(--header)
            + var(--top)
        );

    padding-bottom:
        calc(
            var(--nav)
            + var(--bottom)
        );
}

.topbar {
    position: fixed;

    z-index: 1000;

    top: 0;
    left: 0;
    right: 0;

    height:
        calc(
            var(--header)
            + var(--top)
        );

    padding:
        var(--top)
        calc(12px + var(--right))
        0
        calc(12px + var(--left));

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    border-bottom:
        1px solid
        rgba(157,176,197,.14);

    background:
        rgba(6,16,27,.96);

    backdrop-filter: blur(18px);
}

.brand-button {
    min-width: 0;

    padding: 0;

    display: flex;
    align-items: center;

    gap: 9px;

    border: 0;

    background: transparent;

    text-align: left;
}

.brand-button strong,
.brand-button small {
    display: block;
}

.brand-button small {
    color: var(--muted);

    font-size: 10px;
}

.top-actions {
    display: flex;
    align-items: center;

    gap: 7px;
}

.net-chip {
    padding: 6px 8px;

    border: 1px solid var(--line);
    border-radius: 999px;

    background: var(--panel);

    color: #7cddb4;

    font-size: 10px;
    font-weight: 800;
}

.net-chip.offline {
    color: #ff9ca3;
}

.avatar {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 1px solid var(--line);
    border-radius: 50%;

    background: var(--panel2);

    font-size: 11px;
    font-weight: 900;
}

.update-banner {
    position: fixed;

    z-index: 950;

    top:
        calc(
            var(--header)
            + var(--top)
            + 8px
        );

    left:
        calc(
            10px
            + var(--left)
        );

    right:
        calc(
            10px
            + var(--right)
        );

    padding: 11px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    border:
        1px solid
        rgba(244,183,64,.4);

    border-radius: 13px;

    background: #2b2415;
}

.update-banner strong,
.update-banner small {
    display: block;
}

.update-banner small {
    margin-top: 2px;

    color: #e6d2a3;

    font-size: 10px;
}

.native-view {
    width: min(1050px, 100%);

    margin: auto;

    padding:
        16px
        calc(14px + var(--right))
        24px
        calc(14px + var(--left));
}

.hero {
    min-height: 150px;

    padding: 20px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 12px;

    border:
        1px solid
        rgba(47,128,237,.3);

    border-radius: 20px;

    background:
        radial-gradient(
            circle at 95% 5%,
            rgba(47,128,237,.25),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #11263c,
            #0b1a2b
        );
}

.hero h1 {
    margin: 4px 0 5px;

    font-size:
        clamp(
            26px,
            8vw,
            38px
        );
}

.hero p {
    margin: 0;

    color: var(--muted);
}

.eyebrow {
    color: #76adf7;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .12em;
}

.hero-network {
    align-self: flex-start;

    padding: 5px 8px;

    border-radius: 999px;

    background:
        rgba(54,179,126,.14);

    color: #78e1b5;

    font-size: 9px;
    font-weight: 900;
}

.hero-network.offline {
    background:
        rgba(228,90,99,.14);

    color: #ff9ca3;
}

.section {
    margin-top: 24px;
}

.section h2 {
    margin: 4px 0 11px;

    font-size: 19px;
}

.cards {
    display: grid;

    gap: 10px;
}

.module-card {
    width: 100%;
    min-height: 92px;

    padding: 14px;

    display: grid;

    grid-template-columns:
        50px
        minmax(0,1fr)
        auto;

    align-items: center;

    gap: 12px;

    border: 1px solid var(--line);
    border-radius: 16px;

    background: var(--panel);

    text-align: left;
}

.map-card {
    border-color:
        rgba(47,128,237,.45);

    background:
        linear-gradient(
            145deg,
            rgba(47,128,237,.15),
            var(--panel)
        );
}

.module-card strong,
.module-card small {
    display: block;
}

.module-card small {
    margin-top: 4px;

    color: var(--muted);

    line-height: 1.35;
}

.module-card b {
    color: var(--muted);

    font-size: 25px;
}

.module-icon {
    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    border: 1px solid var(--line);
    border-radius: 14px;

    background: var(--panel2);

    color: #8bbcff;

    font-size: 23px;
}

.status-grid {
    margin-top: 24px;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap: 8px;
}

.status-grid div {
    min-width: 0;

    padding: 11px;

    border:
        1px solid
        rgba(157,176,197,.12);

    border-radius: 12px;

    background:
        rgba(13,28,45,.55);
}

.status-grid small,
.status-grid strong {
    display: block;
}

.status-grid small {
    color: var(--muted);
}

.status-grid strong {
    margin-top: 3px;

    overflow: hidden;

    text-overflow: ellipsis;

    font-size: 12px;
}

.settings {
    display: grid;

    gap: 10px;
}

.setting {
    padding: 14px;

    border: 1px solid var(--line);
    border-radius: 16px;

    background: var(--panel);
}

.action {
    width: 100%;

    display: grid;

    grid-template-columns:
        42px
        minmax(0,1fr)
        auto;

    align-items: center;

    gap: 11px;

    text-align: left;
}

.action > span:first-child {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border: 1px solid var(--line);
    border-radius: 12px;

    background: var(--panel2);

    color: #8bbcff;

    font-size: 19px;
}

.action strong,
.action small {
    display: block;
}

.action small {
    margin-top: 3px;

    color: var(--muted);
}

.user-summary {
    display: flex;
    align-items: center;

    gap: 12px;
}

.avatar.large {
    width: 50px;
    height: 50px;

    flex: 0 0 auto;
}

#roleList {
    margin-top: 7px;

    display: flex;
    flex-wrap: wrap;

    gap: 5px;
}

.role {
    padding: 3px 6px;

    border-radius: 999px;

    background:
        rgba(157,176,197,.1);

    color: #bfd0e2;

    font-size: 9px;
    font-weight: 800;
}

.info {
    display: grid;

    gap: 10px;
}

.info div {
    display: flex;
    justify-content: space-between;

    gap: 15px;
}

.info span {
    color: var(--muted);
}

.module-view {
    position: fixed;

    top:
        calc(
            var(--header)
            + var(--top)
        );

    right: 0;

    bottom:
        calc(
            var(--nav)
            + var(--bottom)
        );

    left: 0;

    background: var(--bg);
}

.module-toolbar {
    height: 48px;

    padding:
        5px
        calc(10px + var(--right))
        5px
        calc(12px + var(--left));

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom:
        1px solid
        rgba(157,176,197,.14);

    background: #091522;
}

.frame-box {
    position: absolute;

    top: 48px;
    right: 0;
    bottom: 0;
    left: 0;
}

iframe {
    width: 100%;
    height: 100%;

    border: 0;

    background: #050b12;
}

.loading {
    position: absolute;

    z-index: 10;

    inset: 0;

    display: grid;
    place-items: center;

    background: var(--bg);

    color: var(--muted);
}

.bottom-nav {
    position: fixed;

    z-index: 1100;

    right: 0;
    bottom: 0;
    left: 0;

    height:
        calc(
            var(--nav)
            + var(--bottom)
        );

    padding:
        5px
        calc(5px + var(--right))
        calc(5px + var(--bottom))
        calc(5px + var(--left));

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    border-top:
        1px solid
        rgba(157,176,197,.14);

    background:
        rgba(6,16,27,.97);

    backdrop-filter: blur(18px);
}

.nav {
    border: 0;
    border-radius: 12px;

    background: transparent;

    color: #8196aa;

    display: grid;
    place-items: center;
    align-content: center;

    gap: 2px;
}

.nav.active {
    background:
        rgba(47,128,237,.1);

    color: #83b7ff;
}

.nav span {
    font-size: 20px;
}

.nav small {
    font-size: 10px;
    font-weight: 800;
}

.toast {
    position: fixed;

    z-index: 2000;

    left: 50%;

    bottom:
        calc(
            var(--nav)
            + var(--bottom)
            + 12px
        );

    width:
        min(
            500px,
            calc(100% - 24px)
        );

    padding: 12px 14px;

    transform:
        translate(
            -50%,
            20px
        );

    border: 1px solid var(--line);
    border-radius: 12px;

    background: #122235;

    opacity: 0;

    pointer-events: none;

    transition: .2s;
}

.toast.show {
    opacity: 1;

    transform:
        translate(
            -50%,
            0
        );
}

.toast.error {
    border-color:
        rgba(228,90,99,.5);

    background: #35171c;
}

@media (min-width: 650px) {

    .cards {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

    .native-view {
        padding-top: 24px;
    }
}

@media (
    orientation: landscape
)
and (
    max-height: 600px
) {

    :root {
        --header: 54px;
        --nav: 56px;
    }

    .hero {
        min-height: 105px;
    }

    .nav {
        grid-template-columns:
            auto auto;

        gap: 6px;
    }
}

@media (
    display-mode: standalone
) {

    .topbar,
    .bottom-nav {
        background:
            rgba(6,16,27,.98);
    }
}

@media (
    prefers-reduced-motion: reduce
) {

    * {
        animation: none !important;
        transition: none !important;
    }
}