*{box-sizing:border-box}:root{--navy:#07172d;--blue:#1674ff;--sky:#00b6ff;--ink:#11213a;--muted:#617086;--bg:#f4f7fb;--line:#dce5f0;--ok:#149c55;--danger:#c0392b}body{margin:0;font-family:Arial,sans-serif;background:var(--bg);color:var(--ink)}a{text-decoration:none;color:inherit}.wrap{width:min(1180px,92%);margin:auto}.top{background:var(--navy);color:#fff}.top .wrap{height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-weight:900;font-size:1.2rem}.brand span{color:var(--sky)}.nav{display:flex;gap:18px;align-items:center}.btn{display:inline-flex;justify-content:center;align-items:center;border:0;border-radius:10px;padding:12px 18px;font-weight:800;cursor:pointer}.btn-primary{background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff}.btn-light{background:#fff;border:1px solid var(--line)}main{padding:42px 0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:0 12px 35px rgba(7,23,45,.06)}.metric{font-size:2rem;font-weight:900}.muted{color:var(--muted)}input,select,textarea{width:100%;padding:13px 14px;border:1px solid #c8d4e4;border-radius:10px;font:inherit}textarea{min-height:130px}.field{margin-bottom:15px}.notice{padding:13px 16px;border-radius:10px;background:#eaf4ff;border:1px solid #b9dafd;margin-bottom:18px}.error{background:#fff0ee;border-color:#ffc9c2;color:#912b1e}.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;padding:12px;border-bottom:1px solid var(--line)}.badge{display:inline-block;padding:5px 9px;border-radius:999px;background:#e9eef6;font-size:.8rem;font-weight:800}.badge.active{background:#e2f8ea;color:#0b7b3b}.badge.pending{background:#fff5d8;color:#8b6500}.login{max-width:520px;margin:40px auto}.sidebar-layout{display:grid;grid-template-columns:230px 1fr;gap:24px}.side{background:#0b1d37;color:#d8e5f6;border-radius:18px;padding:18px;height:max-content}.side a{display:block;padding:12px;border-radius:9px}.side a:hover{background:#17345c}.footer{text-align:center;color:var(--muted);padding:30px}@media(max-width:800px){.grid,.grid-2,.sidebar-layout{grid-template-columns:1fr}.nav{gap:10px;font-size:.9rem}.top .wrap{height:auto;padding:14px 0;align-items:flex-start;flex-direction:column}.table{display:block;overflow:auto}}.btn-logout{color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.35)}.btn-logout:hover{color:#fff;background:rgba(255,255,255,.16)}.btn-outline{background:transparent;color:var(--ink);border:1px solid #b9c9dc}.btn-danger{background:linear-gradient(135deg,#dd4b3e,var(--danger));color:#fff}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.dashboard-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}.dashboard-head h1{margin-bottom:4px}@media(max-width:760px){.dashboard-head{align-items:flex-start;flex-direction:column}.actions form,.actions .btn{width:100%}}

/* RadioStreamServer supplied logo */
.brand-logo{display:inline-flex;align-items:center;background:#fff;border-radius:12px;padding:7px 12px;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.brand-logo img{display:block;width:280px;max-width:100%;height:auto}
@media(max-width:800px){.brand-logo img{width:245px}.brand-logo{padding:6px 10px}}
@media(max-width:480px){.brand-logo img{width:210px}}

/* Public website-style portal header */

.top {
    position: sticky;
    top: 0;
    z-index: 50;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(220, 230, 240, 0.9);
    box-shadow: 0 5px 24px rgba(9, 35, 66, 0.07);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.top .wrap {
    width: min(1160px, calc(100% - 36px));
    height: 80px;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 0;
}

/* Correctly sized portal logo */

.portal-brand {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
}

.portal-brand img {
    display: block;
    width: 285px;
    max-width: 34vw;
    height: 58px;
    object-fit: contain;
    object-position: left center;
}

/* White header navigation */

.top .nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 750;
}

.top .nav > a:not(.btn) {
    position: relative;
    padding: 10px 0;
    color: var(--ink);
}

.top .nav > a:not(.btn):hover {
    color: var(--blue);
}

.top .nav > a:not(.btn)::after {
    position: absolute;
    right: 0;
    bottom: 3px;
    left: 0;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, var(--blue), var(--purple));
    border-radius: 999px;
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.top .nav > a:not(.btn):hover::after {
    transform: scaleX(1);
}

/* Logout button for white header */

.top .btn-logout {
    min-height: 42px;
    padding: 11px 17px;
    color: var(--ink);
    background: transparent;
    border: 1px solid #b9c9dc;
    box-shadow: none;
}

.top .btn-logout:hover {
    color: var(--blue);
    background: #edf7ff;
    border-color: var(--blue);
}

/* Login page spacing */

.login {
    max-width: 560px;
    margin: 54px auto 70px;
}

.login .card {
    padding: 34px;
    border-radius: 20px;
    box-shadow: 0 18px 55px rgba(9, 35, 66, 0.1);
}

/* Responsive portal header */

@media (max-width: 900px) {
    .portal-brand img {
        width: 245px;
        max-width: 42vw;
        height: 52px;
    }

    .top .nav {
        gap: 15px;
    }
}

@media (max-width: 760px) {
    .top .wrap {
        height: auto;
        min-height: 72px;
        padding: 10px 0;
        flex-wrap: wrap;
    }

    .portal-brand img {
        width: 220px;
        max-width: calc(100vw - 80px);
        height: 48px;
    }

    .top .nav {
        width: 100%;
        padding-top: 8px;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .top .nav > a:not(.btn) {
        padding: 10px 12px;
        border-radius: 9px;
    }

    .top .nav > a:not(.btn)::after {
        display: none;
    }

    .top .nav .btn {
        width: 100%;
        margin-top: 4px;
    }

    .login {
        margin-top: 30px;
    }
}

@media (max-width: 480px) {
    .portal-brand img {
        width: 195px;
        height: 44px;
    }

    .login .card {
        padding: 25px 20px;
    }
}

/* Match the main website blue background */

body {
    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(38, 185, 255, 0.22),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #061426,
            #0d2a4b 70%,
            #183a61
        );
    background-attachment: fixed;
}

main {
    min-height: calc(100vh - 160px);
}

/* Keep cards readable against the blue background */

.login .card,
.card {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Make the footer text visible */

.footer {
    color: #c8d7e8;
}

.footer a {
    color: #ffffff;
}

.welcome-title {
    color: #ffffff;
}

/* ==========================================================
   Page Titles
========================================================== */

.page-title{
    margin:0 0 28px;
    color:#fff;
    font-size:clamp(2.2rem,4vw,3rem);
    font-weight:900;
    letter-spacing:-.04em;
    text-shadow:
        0 2px 10px rgba(0,0,0,.20);
}

.page-subtitle{
    margin:-18px 0 30px;
    color:rgba(255,255,255,.75);
    font-size:1rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-full {
    grid-column: 1 / -1;
}

.field label {
    color: #172033;
    font-size: .92rem;
    font-weight: 800;
}

.field input,
.field textarea,
.field select {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #d8e0ec;
    border-radius: 11px;
    outline: none;
    color: #172033;
    background: #fff;
    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.field input[type="color"] {
    width: 90px;
    height: 50px;
    padding: 4px;
    cursor: pointer;
}

.input-prefix {
    display: flex;
    overflow: hidden;
    border: 1px solid #d8e0ec;
    border-radius: 11px;
    background: #f4f7fb;
}

.input-prefix span {
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: #64748b;
    font-size: .85rem;
    white-space: nowrap;
}

.input-prefix input {
    border: 0;
    border-left: 1px solid #d8e0ec;
    border-radius: 0;
}

.checkbox-line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.checkbox-line input {
    width: auto;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.notice-error {
    border-color: #fecaca;
    color: #991b1b;
    background: #fef2f2;
}

@media (max-width: 720px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .field-full {
        grid-column: auto;
    }

    .input-prefix {
        display: block;
    }

    .input-prefix span {
        min-height: 42px;
    }

    .input-prefix input {
        border-top: 1px solid #d8e0ec;
        border-left: 0;
    }
}