:root {
    --pico-font-family: Verdana, Geneva, Tahoma, sans-serif;
    --pico-background-color: #dcdcdc;
    --pico-color: #111111;
    --pico-muted-color: #111111;
    --pico-primary: #003399;
    --pico-primary-hover: #001f66;
    --pico-primary-focus: rgba(0, 51, 153, 0.15);
    --pico-primary-inverse: #111111;
    --pico-form-element-border-color: #cfcfcf;
}

html,
body {
    margin: 0;
    height: 100%;
    background: #dcdcdc;
    color: #111111;
    font-size: 16px;
}

body {
    overflow: hidden;
}

.page-shell {
    height: 100vh;
    padding: 1rem;
}

.page-frame {
    height: 100%;
    background: #f6f6f6;
    border: 1px solid #808080;
    box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #b7b7b7;
    padding: 0.9rem;
}

.app-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #c8c8c8;
}

.app-header h1 {
    margin: 0;
    font-size: clamp(1.7rem, 3.2vw, 2.7rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #111111;
}

.app-header p,
.app-meta,
.app-back,
.status-line {
    margin: 0;
    color: #111111;
    font-size: 0.9rem;
    opacity: 1;
}

.app-meta {
    white-space: nowrap;
}

.app-back {
    display: inline-block;
    margin-bottom: 0.35rem;
    color: #003399;
    text-decoration: underline;
}

.app-back:hover,
.app-back:focus-visible {
    color: #001f66;
}

.status-line {
    min-height: 1rem;
}

.text-button {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #111111 !important;
    text-align: left;
    box-shadow: none;
    opacity: 1;
}

.text-button:hover,
.text-button:focus-visible {
    color: #003399 !important;
    text-decoration: underline;
}

@media (max-width: 900px) {
    body {
        overflow: auto;
    }

    .page-shell {
        height: auto;
        min-height: 100vh;
    }

    .page-frame {
        height: auto;
    }

    .app-header {
        flex-direction: column;
    }
}