:root {
    --bg-dark: #03101a;
    --bg-panel: rgba(1, 25, 42, .88);
    --bg-panel-light: rgba(7, 49, 73, .88);

    --border: #1d658c;
    --border-bright: #3283ad;

    --text: #eaf7ff;
    --text-muted: #82bad5;
    --accent: #55c8ff;
    --accent-bright: #80ddff;

    --success: #2fba74;
    --danger: #d15b5b;

    --radius: 12px;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--text);

}

button,
input {
    font: inherit;
}

button {
    color: var(--text);
}

a {
    color: var(--accent);
}

.site-shell {
    width: min(1200px, 94%);
    margin: 0 auto;
    padding: 28px 0;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 26px;
    padding: 18px 22px;

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

    background: rgba(3, 28, 43, 0.94);

    box-shadow:
        0 0 30px rgba(0, 150, 220, .1);
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-brand-icon {
    font-size: 31px;
}

.site-brand h1 {
    margin: 0;
    font-size: 30px;
}

.panel {
    border: 1px solid var(--border);
    border-radius: var(--radius);

	background: rgba(3, 28, 43, 0.94);

    box-shadow:
        0 0 30px rgba(0, 150, 220, .08);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 42px;
    padding: 9px 17px;

    border: 1px solid var(--border-bright);
    border-radius: 7px;

    color: #fff;
    background: #125477;

    text-decoration: none;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .1s ease;
}

.btn:hover:not(:disabled) {
    background: #19739f;
    border-color: #55c8ff;
}

.btn:active:not(:disabled) {
    transform: translateY(1px);
}

.btn:disabled {
    opacity: .45;
    cursor: default;
}

.btn-success {
    background: #147443;
    border-color: var(--success);
}

.btn-success:hover:not(:disabled) {
    background: #198e52;
}

.btn-danger {
    background: rgba(130, 35, 35, .55);
    border-color: #a84a4a;
}

.btn-danger:hover:not(:disabled) {
    background: rgba(175, 45, 45, .7);
}

.status-dot {
    display: inline-block;

    width: 9px;
    height: 9px;

    margin-right: 7px;

    border-radius: 50%;

    background: var(--success);

    box-shadow:
        0 0 8px rgba(47, 186, 116, .65);
}

.muted {
    color: var(--text-muted);
}

/* MODAL */

.modal {
    position: fixed;
    z-index: 1000;

    inset: 0;

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

    padding: 20px;

    background: rgba(0, 8, 15, .76);
    backdrop-filter: blur(4px);
}

.modal[hidden] {
    display: none;
}

.modal-card {
    width: min(460px, 100%);
    padding: 28px;

    text-align: center;

    border: 1px solid #3ca0cf;
    border-radius: 14px;

    background:
        linear-gradient(
            180deg,
            #07334d,
            #041d2d
        );

    box-shadow:
        0 0 50px rgba(0, 175, 240, .22);
}

.modal-card h2 {
    margin-top: 0;

    color: var(--accent-bright);
}

.modal-actions {
    display: flex;
    justify-content: center;
    gap: 12px;

    margin-top: 22px;
}

@media (max-width: 700px) {
    .site-shell {
        width: 100%;
        padding: 10px;
    }

    .site-header {
        padding: 15px;
    }

    .site-brand h1 {
        font-size: 24px;
    }
}