/* ===== Header Branding ===== */
.logo a {
    color: #fff;
    font-weight: 700;
    letter-spacing: .2px;
    text-decoration: none;
    display: inline-block;
    padding: .6rem .4rem;
    border-radius: 10px;
}

    .logo a span {
        color: var(--brand-2)
    }

/* ===== Tagline under logo ===== */
.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .6rem var(--gap);
}

/* Brand block = logo over tagline */
.site-header .brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

    .site-header .brand .logo {
        margin: 0; /* removes default h1 top/bottom margins */
        line-height: 1.1;
    }

.site-header .tagline {
    margin: 0.1rem 0 0; /* small top margin only */
    font-size: 0.95rem;
    color: var(--muted);
    opacity: 0.95;
}

/* --- tighten brand spacing --- */
.site-header .brand h1.logo {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.1 !important;
}

.site-header .brand .tagline {
    margin-top: 0.1rem !important;
    margin-bottom: 0 !important;
    line-height: 1.3;
}

/* ===== Header layout ===== */
.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .6rem var(--gap);
}

/* ===== Header Nav ===== */
.primary-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

    .primary-nav ul {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin: 0;
        padding: 0;
    }

    .primary-nav li {
        margin: 0;
    }

    .primary-nav a {
        display: inline-block;
        padding: .6rem .9rem;
        color: var(--ink);
        font-weight: 600;
        text-decoration: none;
        border-radius: var(--rad-sm);
        transition: background .2s ease, color .2s ease, transform .1s ease;
    }

        .primary-nav a:hover,
        .primary-nav a:focus {
            background: rgba(124,92,255,.2);
            color: #fff;
            transform: translateY(-1px);
            outline: none;
        }

/* ===== Card ===== */
.card {
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    border: 1px solid rgba(148,163,184,.12);
    border-radius: var(--rad);
    box-shadow: var(--shadow-1);
    padding: var(--gap-2);
    backdrop-filter: blur(6px);
}

    .card + .card {
        margin-top: var(--gap-2)
    }

    .card h3 {
        margin-top: 0
    }

.card.notice {
    margin: 8px 0 16px 0;
    padding: 12px;
    border-radius: 8px;
    background: #111827;
    border-left: 4px solid #facc15;
    color: #e5e7eb;
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1rem;
    border-radius: 12px;
    border: 1px solid transparent;
    background: linear-gradient(180deg, var(--brand), #674bff); /* Colour violet*/
    color: #fff;
    font-weight: 600;
    box-shadow: var(--shadow-2);
    transition: transform .12s ease, box-shadow .2s ease, opacity .12s ease;
}

    .btn:hover {
        transform: translateY(-1px)
    }

    .btn:active {
        transform: translateY(0)
    }

    .btn.ghost {
        background: transparent;
        color: var(--ink);
        border-color: rgba(148,163,184,.25);
        box-shadow: none;
    }

    .btn.warn {
        background: linear-gradient(180deg, #f59e0b, #d97706) /* Colour yellow*/
    }

    .btn.ok {
        background: linear-gradient(180deg, #22c55e, #16a34a) /* Colour green*/
    }

    .btn.err {
        background: linear-gradient(180deg, #ef4444, #dc2626) /* Colour red*/
    }

    .btn.adm {
        background: linear-gradient(180deg, #1e3a8a, #1e40af); /* Colour blue*/
        color: #fff;
        font-weight: 600;
        border: none;
        border-radius: 0.5rem;
        padding: 0.6rem 1.2rem;
        transition: background 0.2s ease, transform 0.1s ease;
    }

        .btn.adm:hover {
            background: linear-gradient(180deg, #2563eb, #1d4ed8);
            transform: translateY(-1px);
        }

        .btn.adm:active {
            background: linear-gradient(180deg, #1d4ed8, #1e3a8a);
            transform: translateY(0);
        }

/* ===== Tables ===== */
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid rgba(148,163,184,.15);
    border-radius: 12px;
    overflow: hidden;
}

    .table th, .table td {
        padding: .75rem .9rem
    }

    .table thead th {
        text-align: left;
        font-weight: 700;
        color: #fff;
        background: rgba(124,92,255,.18)
    }

    .table tbody tr {
        border-top: 1px solid rgba(148,163,184,.12)
    }

        .table tbody tr:nth-child(odd) {
            background: rgba(255,255,255,.02)
        }

/* ===== Badges & Alerts ===== */
.badge {
    display: inline-block;
    padding: .25rem .5rem;
    border-radius: 999px;
    font-size: .8rem
}

    .badge.ok {
        background: rgba(34,197,94,.15);
        color: #86efac;
        border: 1px solid rgba(34,197,94,.35)
    }

    .badge.warn {
        background: rgba(245,158,11,.15);
        color: #fde68a;
        border: 1px solid rgba(245,158,11,.35)
    }

    .badge.err {
        background: rgba(239,68,68,.15);
        color: #fecaca;
        border: 1px solid rgba(239,68,68,.35)
    }

.alert {
    border-radius: 12px;
    padding: .9rem 1rem;
    margin: .75rem 0;
    border: 1px solid rgba(148,163,184,.18);
    background: var(--surface-2);
}

    .alert.ok {
        border-color: rgba(34,197,94,.35);
        background: rgba(34,197,94,.08)
    }

    .alert.warn {
        border-color: rgba(245,158,11,.35);
        background: rgba(245,158,11,.08)
    }

    .alert.err {
        border-color: rgba(239,68,68,.35);
        background: rgba(239,68,68,.08)
    }

/* ===== Progress Bar ===== */
.progress {
    background: #0b1325;
    border: 1px solid rgba(148,163,184,.25);
    border-radius: 999px;
    overflow: hidden;
    height: 10px
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg,var(--brand),#674bff)
}

.list-plain {
    list-style: none;
    margin: 0;
    padding: 0
}

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

.inline {
    display: inline
}

.right {
    display: flex;
    justify-content: flex-end
}

/* ===== NAV: FORCE HORIZONTAL ===== */
.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .6rem var(--gap);
}

.site-header nav.primary-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

    .site-header nav.primary-nav ul {
        list-style: none;
        display: flex !important; /* override any old block rule */
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 1rem;
        margin: 0;
        padding: 0;
    }

    .site-header nav.primary-nav li {
        margin: 0;
    }

    .site-header nav.primary-nav a {
        display: inline-block !important; /* override any old block rule */
        padding: .6rem .9rem;
        color: var(--ink);
        font-weight: 600;
        text-decoration: none;
        border-radius: var(--rad-sm);
        transition: background .2s ease, color .2s ease, transform .1s ease;
    }

        .site-header nav.primary-nav a:hover,
        .site-header nav.primary-nav a:focus {
            background: rgba(124,92,255,.2);
            color: #fff;
            transform: translateY(-1px);
            outline: none;
        }

.help-warning {
    color: #92400e;
}

    .help-warning strong {
        color: #7f1d1d;
    }

.locked-section {
    opacity: 0.4;
    pointer-events: none;
}

    .locked-section.unlocked {
        opacity: 1;
        pointer-events: auto;
    }