:root {
    --background:#07111B;
    --background-deep:#040B12;
    --sidebar:#06101A;
    --topbar:#08131E;
    --panel:#0D1A27;
    --panel-raised:#102131;
    --panel-hover:#132638;
    --border:#1D3042;
    --border-soft:#172839;
    --text:#EDF4F8;
    --text-secondary:#C1CDD7;
    --muted:#8295A7;
    --muted-dark:#64778A;
    --accent:#22CFD1;
    --accent-blue:#318DF4;
    --accent-green:#2EC874;
    --accent-red:#EB504B;
    --accent-amber:#F2A62B;
    --accent-purple:#8C78FF;
    --shadow:0 18px 45px rgba(0,0,0,.24);
}

* {
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html {
    background:var(--background-deep);
}

body {
    min-width:320px;
    min-height:100vh;
    background:
        radial-gradient(
            circle at 72% 8%,
            rgba(31,95,137,.11),
            transparent 28%
        ),
        var(--background);
    color:var(--text);
    font-family:
        "Segoe UI",
        Inter,
        Arial,
        sans-serif;
    font-size:15px;
    line-height:1.5;
}

button,
input {
    font:inherit;
}

button,
a {
    -webkit-tap-highlight-color:transparent;
}

a {
    color:inherit;
}

svg {
    fill:none;
    stroke:currentColor;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width:1.7;
}

.app-shell {
    display:grid;
    grid-template-columns:230px minmax(0,1fr);
    min-height:100vh;
}

.sidebar {
    position:sticky;
    top:0;
    display:flex;
    flex-direction:column;
    height:100vh;
    min-height:640px;
    background:
        linear-gradient(
            180deg,
            rgba(7,20,31,.98),
            rgba(4,13,22,.99)
        );
    border-right:1px solid var(--border-soft);
    overflow:hidden;
    z-index:20;
}

.brand {
    display:flex;
    align-items:center;
    gap:13px;
    min-height:88px;
    padding:0 23px;
    border-bottom:1px solid var(--border-soft);
}

.brand-mark {
    position:relative;
    width:37px;
    height:35px;
    flex:0 0 37px;
}

.brand-mark span {
    position:absolute;
    display:block;
    height:7px;
    border-radius:2px;
    background:linear-gradient(
        90deg,
        #1ECFD1,
        #38E0BD
    );
    transform-origin:left center;
}

.brand-mark span:first-child {
    width:34px;
    left:4px;
    top:7px;
    transform:rotate(58deg);
}

.brand-mark span:last-child {
    width:36px;
    left:2px;
    bottom:5px;
    transform:rotate(-16deg);
}

.brand-name {
    display:flex;
    flex-direction:column;
    line-height:1;
}

.brand-agsoft {
    color:#F5FAFD;
    font-size:20px;
    font-weight:750;
    letter-spacing:.5px;
}

.brand-connect {
    margin-top:7px;
    color:#6CB6FF;
    font-size:11px;
    font-weight:700;
    letter-spacing:4px;
}

.primary-navigation {
    display:flex;
    flex:1;
    flex-direction:column;
    gap:5px;
    padding:18px 8px;
}

.primary-navigation a {
    display:flex;
    align-items:center;
    gap:14px;
    min-height:50px;
    padding:0 16px;
    color:#B9C6D1;
    border:1px solid transparent;
    border-radius:7px;
    text-decoration:none;
    transition:
        background .16s ease,
        border-color .16s ease,
        color .16s ease;
}

.primary-navigation a svg {
    width:21px;
    height:21px;
    flex:0 0 21px;
}

.primary-navigation a:hover {
    color:#F5FAFD;
    background:rgba(23,48,69,.58);
    border-color:rgba(48,92,124,.24);
}

.primary-navigation a.active {
    color:#37DCE0;
    background:
        linear-gradient(
            90deg,
            rgba(30,91,130,.42),
            rgba(18,43,63,.7)
        );
    border-color:rgba(42,106,148,.28);
    box-shadow:
        inset 3px 0 0 #2A92FF;
}

.sidebar-account {
    padding:18px 15px 16px;
    border-top:1px solid var(--border-soft);
}

.account-summary {
    display:flex;
    align-items:center;
    gap:11px;
    padding:4px 5px 17px;
}

.account-avatar,
.topbar-avatar {
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#D9FAF7;
    background:
        linear-gradient(
            145deg,
            #176E72,
            #1BAA9F
        );
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.08);
}

.account-avatar {
    width:34px;
    height:34px;
    flex:0 0 34px;
}

.account-avatar svg {
    width:18px;
    height:18px;
}

.account-details {
    min-width:0;
}

.account-name {
    color:#F1F6F9;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.account-email {
    margin-top:1px;
    color:var(--muted);
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sign-out-button {
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    padding:12px 8px;
    color:#B9C6D1;
    background:transparent;
    border:0;
    border-top:1px solid var(--border-soft);
    cursor:pointer;
    text-align:left;
}

.sign-out-button:hover {
    color:#FFFFFF;
}

.sign-out-button svg {
    width:20px;
    height:20px;
}

.workspace {
    display:flex;
    min-width:0;
    min-height:100vh;
    flex-direction:column;
}

.topbar {
    position:sticky;
    top:0;
    z-index:15;
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:68px;
    padding:0 27px;
    background:rgba(6,17,27,.94);
    border-bottom:1px solid var(--border-soft);
    backdrop-filter:blur(18px);
}

.topbar-title {
    color:#8FA4B6;
    font-size:13px;
    font-weight:650;
    letter-spacing:1.4px;
    text-transform:uppercase;
}

.topbar-right {
    display:flex;
    align-items:center;
    gap:23px;
}

.platform-status {
    display:flex;
    align-items:center;
    gap:9px;
    color:#C9D4DC;
    font-size:13px;
}

.status-dot,
.asset-status-dot {
    display:block;
    width:9px;
    height:9px;
    flex:0 0 9px;
    border-radius:50%;
    background:var(--accent-green);
    box-shadow:
        0 0 0 4px rgba(46,200,116,.1),
        0 0 14px rgba(46,200,116,.45);
}

.topbar-separator {
    width:1px;
    height:31px;
    background:var(--border);
}

.topbar-user {
    display:flex;
    align-items:center;
    gap:12px;
}

.topbar-user-text {
    display:flex;
    flex-direction:column;
    text-align:right;
}

.topbar-user-text span {
    color:#F5F9FC;
    font-size:14px;
    font-weight:600;
}

.topbar-user-text small {
    margin-top:1px;
    color:var(--muted);
    font-size:11px;
}

.topbar-avatar {
    width:38px;
    height:38px;
}

.topbar-avatar svg {
    width:20px;
    height:20px;
}

.workspace-content {
    width:100%;
    max-width:1680px;
    margin:0 auto;
    padding:0 26px 28px;
}

.control-hero {
    position:relative;
    display:grid;
    grid-template-columns:minmax(360px,.72fr) minmax(600px,1.28fr);
    min-height:185px;
    margin:0 -26px;
    overflow:hidden;
    background:
        linear-gradient(
            100deg,
            #091827 0%,
            #0B1D2D 47%,
            #102638 100%
        );
    border-bottom:1px solid var(--border);
}

.hero-copy {
    position:relative;
    z-index:3;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:30px 28px 48px;
}

.hero-eyebrow {
    margin-bottom:8px;
    color:#5DB5FF;
    font-size:11px;
    font-weight:700;
    letter-spacing:1.6px;
    text-transform:uppercase;
}

.hero-copy h1 {
    max-width:620px;
    color:#F5F9FC;
    font-size:31px;
    font-weight:650;
    line-height:1.18;
    letter-spacing:-.5px;
}

.hero-copy p {
    max-width:610px;
    margin-top:9px;
    color:#AABAC7;
    font-size:14px;
    line-height:1.6;
}

.hero-media {
    position:relative;
    min-width:0;
    overflow:hidden;
}

.hero-media img {
    display:block;
    width:100%;
    height:100%;
    min-height:185px;
    object-fit:cover;
    object-position:center center;
}

.hero-media-overlay {
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            #0B1D2D 0%,
            rgba(11,29,45,.48) 16%,
            rgba(5,13,22,.02) 48%,
            rgba(5,13,22,.16) 100%
        ),
        linear-gradient(
            0deg,
            rgba(5,13,22,.34),
            transparent 55%
        );
}

.hero-asset-label {
    position:absolute;
    right:22px;
    bottom:18px;
    display:flex;
    align-items:center;
    gap:11px;
    padding:10px 14px;
    background:rgba(5,17,28,.78);
    border:1px solid rgba(118,164,194,.24);
    border-radius:6px;
    box-shadow:0 10px 30px rgba(0,0,0,.24);
    backdrop-filter:blur(12px);
}

.hero-asset-label div {
    display:flex;
    flex-direction:column;
}

.hero-asset-label small {
    color:#91A8B9;
    font-size:10px;
    letter-spacing:.7px;
    text-transform:uppercase;
}

.hero-asset-label strong {
    margin-top:1px;
    color:#EAF3F7;
    font-size:12px;
    font-weight:600;
}

.metric-grid {
    position:relative;
    z-index:5;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:13px;
    margin-top:-27px;
    padding-bottom:16px;
}

.metric-card {
    min-width:0;
    padding:18px 17px 15px;
    background:
        linear-gradient(
            145deg,
            rgba(15,32,48,.98),
            rgba(11,25,38,.98)
        );
    border:1px solid var(--border);
    border-radius:8px;
    box-shadow:0 14px 35px rgba(0,0,0,.18);
    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease;
}

.metric-card:hover {
    transform:translateY(-2px);
    background:var(--panel-hover);
    border-color:#2A4961;
}

.metric-card-heading {
    display:flex;
    align-items:center;
    gap:11px;
    color:#CFD9E1;
    font-size:13px;
    font-weight:600;
}

.metric-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:39px;
    height:39px;
    flex:0 0 39px;
    border-radius:8px;
}

.metric-icon svg {
    width:21px;
    height:21px;
}

.metric-icon-blue {
    color:#50A8FF;
    background:rgba(43,122,202,.16);
}

.metric-icon-green {
    color:#38D384;
    background:rgba(35,176,104,.15);
}

.metric-icon-cyan {
    color:#2FE2E4;
    background:rgba(34,187,194,.15);
}

.metric-icon-purple {
    color:#A899FF;
    background:rgba(123,102,220,.16);
}

.metric-icon-amber {
    color:#FFB83B;
    background:rgba(220,145,32,.16);
}

.metric-card-reading {
    display:flex;
    align-items:baseline;
    gap:8px;
    margin:12px 0 13px;
}

.metric-card-reading strong {
    color:#F7FBFD;
    font-size:26px;
    font-weight:620;
    line-height:1;
}

.metric-card-reading span {
    color:#5EAEDB;
    font-size:11px;
}

.metric-card > a {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:11px;
    color:#55AFFF;
    border-top:1px solid var(--border-soft);
    font-size:12px;
    text-decoration:none;
}

.metric-card > a:hover {
    color:#8CC8FF;
}

.control-layout {
    display:grid;
    grid-template-columns:
        minmax(0,1.55fr)
        minmax(330px,1.05fr)
        minmax(260px,.8fr);
    gap:14px;
}

.panel {
    min-width:0;
    overflow:hidden;
    background:
        linear-gradient(
            145deg,
            rgba(14,29,43,.98),
            rgba(10,23,35,.98)
        );
    border:1px solid var(--border);
    border-radius:8px;
    box-shadow:0 13px 35px rgba(0,0,0,.13);
}

.panel-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:67px;
    padding:14px 17px;
    border-bottom:1px solid var(--border-soft);
}

.panel-header h2 {
    color:#ECF3F7;
    font-size:15px;
    font-weight:620;
}

.panel-eyebrow {
    display:block;
    margin-bottom:2px;
    color:#607C92;
    font-size:9px;
    font-weight:700;
    letter-spacing:1.1px;
    text-transform:uppercase;
}

.panel-header a {
    color:#4EA7F5;
    font-size:11px;
    text-decoration:none;
}

.panel-header a:hover {
    color:#8AC7FC;
}

.panel-period {
    padding:7px 10px;
    color:#95A9B9;
    background:#0A1723;
    border:1px solid var(--border);
    border-radius:5px;
    font-size:11px;
}

.panel-activity {
    grid-column:span 1;
}

.activity-legend {
    display:flex;
    align-items:center;
    gap:21px;
    padding:14px 18px 0;
    color:#AAB8C4;
    font-size:11px;
}

.activity-legend span {
    display:flex;
    align-items:center;
    gap:7px;
}

.legend-dot {
    display:inline-block;
    width:8px;
    height:8px;
    flex:0 0 8px;
    border-radius:50%;
}

.legend-blue {
    background:var(--accent-blue);
}

.legend-cyan {
    background:var(--accent);
}

.legend-red {
    background:var(--accent-red);
}

.legend-green {
    background:var(--accent-green);
}

.activity-chart {
    position:relative;
    min-height:245px;
    padding:16px 17px 15px;
}

.activity-chart svg {
    position:absolute;
    inset:15px 17px 18px;
    width:calc(100% - 34px);
    height:calc(100% - 33px);
    overflow:visible;
}

.chart-grid line {
    stroke:rgba(111,145,168,.12);
    stroke-width:1;
}

.chart-line {
    fill:none;
    stroke-width:3;
    vector-effect:non-scaling-stroke;
}

.chart-line-blue {
    stroke:#298DFF;
}

.chart-line-cyan {
    stroke:#22CFD1;
}

.chart-line-red {
    stroke:#E84E49;
}

.chart-message {
    position:absolute;
    left:50%;
    bottom:21px;
    display:flex;
    width:calc(100% - 64px);
    max-width:480px;
    padding:10px 13px;
    flex-direction:column;
    transform:translateX(-50%);
    background:rgba(6,17,27,.82);
    border:1px solid rgba(47,83,109,.58);
    border-radius:6px;
    text-align:center;
    backdrop-filter:blur(8px);
}

.chart-message strong {
    color:#DDE7ED;
    font-size:11px;
    font-weight:650;
}

.chart-message span {
    margin-top:2px;
    color:#758A9B;
    font-size:10px;
}

.event-empty,
.organisation-empty {
    display:flex;
    min-height:245px;
    padding:25px;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    text-align:center;
}

.event-empty-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:45px;
    height:45px;
    margin-bottom:14px;
    color:#5FAFFF;
    background:rgba(48,126,198,.12);
    border:1px solid rgba(66,136,194,.18);
    border-radius:50%;
}

.event-empty-icon svg,
.organisation-empty svg {
    width:23px;
    height:23px;
}

.event-empty strong,
.organisation-empty strong {
    color:#DCE6EC;
    font-size:13px;
}

.event-empty p,
.organisation-empty p {
    max-width:360px;
    margin-top:8px;
    color:#7D91A2;
    font-size:11px;
    line-height:1.6;
}

.health-content {
    display:flex;
    min-height:245px;
    padding:22px 19px;
    align-items:center;
    flex-direction:column;
    text-align:center;
}

.health-ring {
    display:flex;
    align-items:center;
    justify-content:center;
    width:130px;
    height:130px;
    margin:4px 0 15px;
    border-radius:50%;
    background:
        conic-gradient(
            var(--accent-green) 0deg,
            #25BB78 330deg,
            #183443 330deg
        );
    box-shadow:
        0 0 35px rgba(46,200,116,.12);
}

.health-ring::before {
    position:absolute;
    content:"";
}

.health-ring-inner {
    display:flex;
    align-items:center;
    justify-content:center;
    width:101px;
    height:101px;
    flex-direction:column;
    background:#0A1824;
    border:1px solid #1A3445;
    border-radius:50%;
}

.health-ring-inner strong {
    color:#F4FAFC;
    font-size:19px;
    font-weight:600;
}

.health-ring-inner span {
    color:#8DA0B0;
    font-size:10px;
}

.health-state {
    display:flex;
    align-items:center;
    gap:8px;
    color:#4BD484;
    font-size:12px;
}

.health-state .status-dot {
    width:7px;
    height:7px;
    flex-basis:7px;
}

.health-content p {
    max-width:260px;
    margin-top:9px;
    color:#74899A;
    font-size:10px;
    line-height:1.55;
}

.panel-device-state,
.panel-organisations,
.panel-information,
.panel-actions {
    min-height:270px;
}

.state-list {
    display:flex;
    padding:18px;
    flex-direction:column;
    gap:14px;
}

.state-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#A7B5C0;
    font-size:12px;
}

.state-label {
    display:flex;
    align-items:center;
    gap:9px;
}

.state-row strong {
    color:#EAF1F5;
    font-weight:600;
}

.device-state-message {
    margin:4px 18px 18px;
    padding:13px;
    color:#738999;
    background:#091721;
    border:1px solid var(--border-soft);
    border-radius:6px;
    font-size:10px;
    line-height:1.55;
}

.organisation-empty {
    min-height:200px;
}

.organisation-empty svg {
    margin-bottom:13px;
    color:#65AFFF;
}

.information-list {
    padding:10px 17px 17px;
}

.information-list > div {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    min-height:42px;
    border-bottom:1px solid var(--border-soft);
    font-size:11px;
}

.information-list > div:last-child {
    border-bottom:0;
}

.information-list span {
    color:#7F93A3;
}

.information-list strong {
    color:#C9D5DD;
    font-weight:550;
    text-align:right;
}

.information-list .information-online {
    color:#43D17E;
}

.quick-action-list {
    display:flex;
    flex-direction:column;
}

.quick-action-list a {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:49px;
    padding:0 17px;
    color:#B9C7D1;
    border-bottom:1px solid var(--border-soft);
    font-size:11px;
    text-decoration:none;
    transition:
        color .15s ease,
        background .15s ease;
}

.quick-action-list a:last-child {
    border-bottom:0;
}

.quick-action-list a:hover {
    color:#FFFFFF;
    background:rgba(33,66,91,.35);
}

.portal-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:58px;
    margin-top:auto;
    padding:0 27px;
    color:#526879;
    border-top:1px solid var(--border-soft);
    font-size:10px;
}

/* Login */

.login-body {
    min-height:100vh;
    background:
        radial-gradient(
            circle at 70% 15%,
            rgba(34,122,167,.14),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #05101A,
            #081725 60%,
            #06111A
        );
}

.login-shell {
    display:flex;
    min-height:100vh;
    padding:30px;
    align-items:center;
    justify-content:center;
}

.login-panel {
    width:100%;
    max-width:430px;
    padding:39px;
    background:
        linear-gradient(
            145deg,
            rgba(16,35,51,.98),
            rgba(9,23,35,.99)
        );
    border:1px solid #244057;
    border-top:3px solid var(--accent);
    border-radius:8px;
    box-shadow:0 28px 80px rgba(0,0,0,.38);
}

.login-brand {
    display:flex;
    margin-bottom:42px;
    flex-direction:column;
}

.logo-agsoft {
    color:#F4F9FC;
    font-size:28px;
    font-weight:750;
}

.logo-connect {
    margin-top:4px;
    color:#55A9FB;
    font-size:14px;
    font-weight:700;
    letter-spacing:4px;
}

.login-heading {
    margin-bottom:25px;
}

.login-heading h1 {
    margin-bottom:8px;
    color:#F4F9FC;
    font-size:28px;
    font-weight:620;
}

.login-heading p {
    color:#879AAA;
    line-height:1.6;
}

.page-eyebrow {
    margin-bottom:7px;
    color:#54AFFF;
    font-size:10px;
    font-weight:700;
    letter-spacing:1.4px;
    text-transform:uppercase;
}

.login-error {
    margin-bottom:19px;
    padding:12px 14px;
    color:#F6C9CD;
    background:#42262B;
    border:1px solid #744047;
    border-radius:5px;
    font-size:13px;
}

.login-form {
    display:flex;
    flex-direction:column;
}

.login-form label {
    margin-bottom:7px;
    color:#C2CFD8;
    font-size:12px;
    font-weight:550;
}

.login-form input {
    width:100%;
    margin-bottom:18px;
    padding:12px 13px;
    color:#FFFFFF;
    background:#071521;
    border:1px solid #294257;
    border-radius:5px;
    outline:none;
}

.login-form input:focus {
    border-color:#2D96ED;
    box-shadow:0 0 0 3px rgba(45,150,237,.12);
}

.primary-button {
    margin-top:4px;
    padding:13px 16px;
    color:#FFFFFF;
    background:
        linear-gradient(
            135deg,
            #187BC8,
            #1D9DBA
        );
    border:1px solid #2A9CD3;
    border-radius:5px;
    font-weight:650;
    cursor:pointer;
}

.primary-button:hover {
    filter:brightness(1.08);
}

.login-security-note {
    margin-top:28px;
    padding-top:17px;
    color:#667C8D;
    border-top:1px solid var(--border);
    font-size:10px;
    letter-spacing:1px;
    text-align:center;
    text-transform:uppercase;
}

@media (max-width:1320px) {
    .metric-grid {
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .control-layout {
        grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr);
    }

    .panel-health,
    .panel-information {
        grid-column:span 1;
    }
}

@media (max-width:1000px) {
    .app-shell {
        grid-template-columns:82px minmax(0,1fr);
    }

    .brand {
        justify-content:center;
        padding:0;
    }

    .brand-name,
    .primary-navigation a span,
    .account-details,
    .sign-out-button span {
        display:none;
    }

    .primary-navigation a {
        justify-content:center;
        padding:0;
    }

    .sidebar-account {
        padding:16px 8px;
    }

    .account-summary {
        justify-content:center;
        padding:4px 0 16px;
    }

    .sign-out-button {
        justify-content:center;
        padding:12px 0;
    }

    .control-hero {
        grid-template-columns:1fr 1fr;
    }

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

    .control-layout {
        grid-template-columns:1fr;
    }
}

@media (max-width:720px) {
    .app-shell {
        display:block;
    }

    .sidebar {
        position:relative;
        width:100%;
        height:auto;
        min-height:0;
    }

    .brand {
        min-height:70px;
        justify-content:flex-start;
        padding:0 20px;
    }

    .brand-name {
        display:flex;
    }

    .primary-navigation {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        padding:10px;
    }

    .primary-navigation a {
        justify-content:flex-start;
        min-height:45px;
        padding:0 13px;
    }

    .primary-navigation a span {
        display:inline;
    }

    .sidebar-account {
        display:none;
    }

    .topbar {
        padding:0 17px;
    }

    .topbar-title,
    .platform-status span:last-child,
    .topbar-separator,
    .topbar-user-text {
        display:none;
    }

    .topbar-right {
        width:100%;
        justify-content:space-between;
    }

    .workspace-content {
        padding:0 14px 20px;
    }

    .control-hero {
        display:block;
        margin:0 -14px;
    }

    .hero-copy {
        padding:27px 19px 25px;
    }

    .hero-copy h1 {
        font-size:25px;
    }

    .hero-media {
        height:180px;
    }

    .hero-media-overlay {
        background:linear-gradient(
            0deg,
            rgba(5,13,22,.5),
            transparent
        );
    }

    .metric-grid {
        grid-template-columns:1fr;
        margin-top:14px;
    }

    .activity-legend {
        flex-wrap:wrap;
    }

    .portal-footer {
        align-items:flex-start;
        padding:18px;
        flex-direction:column;
        gap:4px;
    }
}