/* ===========================================================================
   Overview
   ---------------------------------------------------------------------------
   Built to the full-dashboard comp: a greeting banner with the hub render
   bleeding out of it, four counters, a carriers panel, the recent shipments
   table, a performance donut, the cost bars, the activity feed, and three
   action cards each carrying its own drawn spot illustration.

   Colour is Movssy's: #2575FC on every gradient and accent, #86FF7B for what
   is earned or delivered, #FF6262 for exceptions, #DAD5E3 on the hairlines.
   The comp was mauve; the structure is what was taken from it.

   Scoped under .mv-ov. Nothing here reaches the operations board or the
   record lists.
   =========================================================================== */

.mv-ov {
    --o-page:   #F1F2F7;
    --o-card:   #FFFFFF;
    --o-sunk:   #F4F5FA;
    --o-line:   #E7E4EE;
    --o-line-s: #F0EEF5;

    --o-ink:    #14182A;
    --o-body:   #5A6177;
    --o-mute:   #8A91A6;
    --o-faint:  #B6BCCC;

    --o-blue:   #2575FC;
    --o-blue-d: #1551CE;
    --o-blue-s: #E9F0FE;
    --o-green:  #2BBF6B;
    --o-green-s:#E6F7EE;
    --o-amber:  #E8902A;
    --o-amber-s:#FDF2E2;
    --o-red:    #FF6262;
    --o-red-s:  #FFEDED;

    --o-grad:   linear-gradient(135deg, #2F6BFF 0%, #2049C9 52%, #16307F 100%);

    --o-r:      18px;
    --o-gap:    16px;

    font-family: var(--mv-font, 'Lufga', system-ui, sans-serif);
    font-size: 13px;
    color: var(--o-body);
}

.mv-ov a { color: inherit; }

/* Literal values, not var(): the properties are declared on .mv-ov, so a
   var() in a rule matching <body> resolves to nothing, and an invalid var()
   makes the whole declaration compute to unset, leaving the page
   transparent. */
html:has(.mv-ov),
body:has(.mv-ov),
.page-wrapper:has(.mv-ov),
.page-content:has(.mv-ov) { background: #F1F2F7 !important; }

/* ── Grid ────────────────────────────────────────────────────────────── */

.mv-ov .o-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--o-gap);
    align-items: stretch;
    margin-bottom: var(--o-gap);
}
.mv-ov .o-row > * { min-width: 0; }

.mv-ov .c3 { grid-column: span 3; }
.mv-ov .c4 { grid-column: span 4; }
.mv-ov .c5 { grid-column: span 5; }
.mv-ov .c7 { grid-column: span 7; }
.mv-ov .c8 { grid-column: span 8; }
.mv-ov .c9 { grid-column: span 9; }
.mv-ov .c12 { grid-column: span 12; }

.mv-ov .o-stack { display: flex; flex-direction: column; gap: var(--o-gap); }

/* ── Card ────────────────────────────────────────────────────────────── */

.mv-ov .o-card {
    background: var(--o-card);
    border: 1px solid var(--o-line-s);
    border-radius: var(--o-r);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
}

.mv-ov .o-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.mv-ov .o-card-title { font-size: 15px; font-weight: 500; color: var(--o-ink); }
.mv-ov .o-more-link { font-size: 12.5px; color: var(--o-blue); white-space: nowrap; }
.mv-ov .o-more-link:hover { text-decoration: underline; }
.mv-ov .o-note { font-size: 11.5px; color: var(--o-mute); }

/* ── Greeting banner ─────────────────────────────────────────────────── */

.mv-ov .o-hero {
    position: relative;
    grid-column: span 9;
    background: linear-gradient(104deg, #E6ECFF 0%, #EDE9FB 44%, #F0E9F8 100%);
    border-radius: 22px;
    padding: 26px 30px 28px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.mv-ov .o-hero-copy { position: relative; z-index: 2; max-width: 300px; }
.mv-ov .o-hello { font-size: 13.5px; color: var(--o-body); }
.mv-ov .o-hero-h {
    font-size: 27px;
    font-weight: 500;
    color: var(--o-ink);
    letter-spacing: -.8px;
    line-height: 1.18;
    margin: 8px 0 10px;
}
.mv-ov .o-hero-p { font-size: 12.5px; color: var(--o-body); line-height: 1.6; }

/* The render runs off the right edge of the banner. */
.mv-ov .o-hero { min-height: 212px; }

.mv-ov .o-hero-art {
    position: absolute;
    right: -18px;
    bottom: -26px;
    top: -18px;
    width: 58%;
    max-width: 640px;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
.mv-ov .o-hero-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
    display: block;
    filter: drop-shadow(0 22px 26px rgba(20, 24, 42, .16));
}

/* ── Weather ─────────────────────────────────────────────────────────── */

.mv-ov .o-wx { display: flex; gap: 18px; align-items: flex-start; }
.mv-ov .o-wx-now { flex: none; }
.mv-ov .o-wx-now i { font-size: 30px; color: var(--o-blue); line-height: 1; }
.mv-ov .o-wx-city { font-size: 12.5px; color: var(--o-ink); font-weight: 500; margin-top: 4px; }
.mv-ov .o-wx-deg { font-size: 30px; font-weight: 400; color: var(--o-ink); letter-spacing: -1px; }
.mv-ov .o-wx-sub { font-size: 11px; color: var(--o-mute); }

.mv-ov .o-wx-days { flex: 1; border-left: 1px solid var(--o-line-s); padding-left: 18px; min-width: 0; }
.mv-ov .o-wx-day {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    font-size: 12px;
}
.mv-ov .o-wx-day + .o-wx-day { border-top: 1px solid var(--o-line-s); }
.mv-ov .o-wx-day b { font-weight: 500; color: var(--o-ink); font-variant-numeric: tabular-nums; }

/* ── Counters ────────────────────────────────────────────────────────── */

.mv-ov .o-kpi { flex-direction: row; align-items: flex-start; gap: 13px; }

.mv-ov .o-kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex: none;
}
.mv-ov .o-kpi-blue  { background: var(--o-blue-s);  color: var(--o-blue); }
.mv-ov .o-kpi-green { background: var(--o-green-s); color: var(--o-green); }
.mv-ov .o-kpi-amber { background: var(--o-amber-s); color: var(--o-amber); }
.mv-ov .o-kpi-red   { background: var(--o-red-s);   color: var(--o-red); }

.mv-ov .o-kpi-label { font-size: 12.5px; color: var(--o-body); }
.mv-ov .o-kpi-read { display: flex; align-items: baseline; gap: 9px; margin: 3px 0 2px; flex-wrap: wrap; }
.mv-ov .o-kpi-n {
    font-size: 27px;
    font-weight: 500;
    color: var(--o-ink);
    letter-spacing: -.8px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.mv-ov .o-delta {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
}
.mv-ov .o-delta-up   { color: var(--o-green); }
.mv-ov .o-delta-down { color: var(--o-red); }
.mv-ov .o-delta-flat { color: var(--o-faint); }

/* ── Carriers panel ──────────────────────────────────────────────────── */

.mv-ov .o-carriers {
    background: var(--o-grad);
    border: 0;
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
    justify-content: space-between;
}
.mv-ov .o-carriers .o-card-title { color: #FFFFFF; }

.mv-ov .o-carrier-row { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.mv-ov .o-carrier {
    background: #FFFFFF;
    border-radius: 11px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -.2px;
    white-space: nowrap;
}
.mv-ov .o-carrier-more { font-size: 11.5px; color: rgba(255, 255, 255, .78); }
.mv-ov .o-carriers-foot {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .88);
    margin-top: 14px;
    max-width: 58%;
    line-height: 1.5;
}

/* A plane tucked into the corner of the panel. */
.mv-ov .o-carriers-art {
    position: absolute;
    right: -12px;
    bottom: -8px;
    width: 148px;
    opacity: .9;
    pointer-events: none;
}
.mv-ov .o-carriers-art .d-spot ellipse:first-child { display: none; }

/* ── Table ───────────────────────────────────────────────────────────── */

.mv-ov .o-table { width: 100%; border-collapse: collapse; }
.mv-ov .o-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 500;
    color: var(--o-mute);
    padding: 0 12px 11px;
    border-bottom: 1px solid var(--o-line-s);
}
.mv-ov .o-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--o-line-s);
    font-size: 12.5px;
}
.mv-ov .o-table tbody tr:last-child td { border-bottom: 0; }
.mv-ov .o-table tbody tr:hover td { background: var(--o-sunk); }
.mv-ov .o-table td:first-child, .mv-ov .o-table th:first-child { padding-left: 2px; }

.mv-ov .o-track { font-variant-numeric: tabular-nums; color: var(--o-ink); }
.mv-ov .o-cust { color: var(--o-ink); font-weight: 500; }

.mv-ov .o-dest-cell { display: inline-flex; align-items: center; gap: 8px; }
.mv-ov .o-flag {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    box-shadow: 0 0 0 1px rgba(20, 24, 42, .1);
}

/* Carrier chips take each carrier's own colour, so the column scans. */
.mv-ov .o-carrier-chip {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 7px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: -.1px;
    white-space: nowrap;
}

.mv-ov .o-status {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}
.mv-ov .o-status-blue  { background: var(--o-blue-s);  color: #124FC4; }
.mv-ov .o-status-green { background: var(--o-green-s); color: #17814A; }
.mv-ov .o-status-amber { background: var(--o-amber-s); color: #A1620F; }
.mv-ov .o-status-red   { background: var(--o-red-s);   color: #B23A3A; }
.mv-ov .o-status-grey  { background: var(--o-sunk);    color: var(--o-mute); }

/* ── Donut ───────────────────────────────────────────────────────────── */

.mv-ov .o-donut-wrap { display: flex; align-items: center; gap: 22px; }
.mv-ov .o-donut { width: 134px; height: 134px; flex: none; position: relative; }
.mv-ov .o-donut svg { transform: rotate(-90deg); display: block; }
.mv-ov .o-donut-mid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.mv-ov .o-donut-mid b {
    font-size: 22px;
    font-weight: 500;
    color: var(--o-ink);
    letter-spacing: -.6px;
    line-height: 1;
}
.mv-ov .o-donut-mid span { font-size: 11px; color: var(--o-mute); margin-top: 2px; }

.mv-ov .o-legend { flex: 1; min-width: 0; }
.mv-ov .o-legend-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-size: 12.5px;
}
.mv-ov .o-legend-row + .o-legend-row { border-top: 1px solid var(--o-line-s); }
.mv-ov .o-legend-row i { width: 9px; height: 9px; border-radius: 50%; flex: none; display: block; }
.mv-ov .o-legend-row span { flex: 1; min-width: 0; }
.mv-ov .o-legend-row em { font-style: normal; color: var(--o-mute); font-variant-numeric: tabular-nums; }
.mv-ov .o-legend-row b { font-weight: 500; color: var(--o-ink); font-variant-numeric: tabular-nums; }

/* ── Cost bars ───────────────────────────────────────────────────────── */

.mv-ov .o-bars { display: flex; align-items: flex-end; gap: 10px; height: 118px; margin-top: 4px; }
.mv-ov .o-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    min-width: 0;
    position: relative;
}
.mv-ov .o-bar {
    width: 100%;
    max-width: 26px;
    border-radius: 7px 7px 3px 3px;
    background: linear-gradient(180deg, #5E96FF 0%, #2575FC 100%);
    min-height: 3px;
}
.mv-ov .o-bar-col:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--o-ink);
    color: #FFFFFF;
    font-size: 10.5px;
    padding: 5px 9px;
    border-radius: 7px;
    white-space: nowrap;
    z-index: 5;
}
.mv-ov .o-bar-axis { display: flex; gap: 10px; margin-top: 9px; }
.mv-ov .o-bar-axis > span { flex: 1; text-align: center; font-size: 10px; color: var(--o-mute); min-width: 0; }

/* ── Activity ────────────────────────────────────────────────────────── */

.mv-ov .o-act-row { display: flex; align-items: flex-start; gap: 11px; padding: 10px 0; }
.mv-ov .o-act-row + .o-act-row { border-top: 1px solid var(--o-line-s); }
.mv-ov .o-act-mark {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex: none;
}
.mv-ov .o-act-t { font-size: 12.5px; color: var(--o-ink); }
.mv-ov .o-act-n { font-size: 11px; color: var(--o-mute); margin-top: 2px; }
.mv-ov .o-act-when { font-size: 11px; color: var(--o-faint); white-space: nowrap; }

/* ── Action cards, each with its spot ────────────────────────────────── */

.mv-ov .o-do { position: relative; overflow: hidden; padding-right: 128px; min-height: 164px; }
.mv-ov .o-do h4 {
    font-size: 15px;
    font-weight: 500;
    color: var(--o-ink);
    margin: 0 0 6px;
    letter-spacing: -.2px;
}
.mv-ov .o-do p { font-size: 12px; color: var(--o-body); line-height: 1.55; margin: 0 0 16px; }

.mv-ov .o-do-art {
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 128px;
    pointer-events: none;
}
.mv-ov .d-spot { width: 100%; height: auto; display: block; }

.mv-ov .o-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--o-blue);
    color: #FFFFFF;
    border: 0;
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 12.5px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    margin-top: auto;
    align-self: flex-start;
    white-space: nowrap;
}
.mv-ov .o-btn:hover { background: var(--o-blue-d); color: #FFFFFF; }

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 1400px) {
    .mv-ov .o-hero { grid-column: span 12; }
    .mv-ov .c3 { grid-column: span 6; }
    .mv-ov .c4, .mv-ov .c5, .mv-ov .c7, .mv-ov .c8, .mv-ov .c9 { grid-column: span 12; }
}
@media (max-width: 760px) {
    .mv-ov .c3 { grid-column: span 12; }
    .mv-ov .o-hero-art { display: none; }
    .mv-ov .o-hero-copy { max-width: none; }
    .mv-ov .o-do { padding-right: 20px; }
    .mv-ov .o-do-art { display: none; }
    .mv-ov .o-donut-wrap { flex-direction: column; align-items: flex-start; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Period filter
   ───────────────────────────────────────────────────────────────────────── */

.mv-ov .o-periods {
    display: inline-flex;
    gap: 3px;
    background: var(--o-sunk);
    border-radius: 999px;
    padding: 3px;
}
.mv-ov .o-period {
    padding: 7px 15px;
    border-radius: 999px;
    font-size: 12px;
    color: var(--o-body);
    white-space: nowrap;
}
.mv-ov .o-period:hover { color: var(--o-ink); }
.mv-ov .o-period.is-on {
    background: var(--o-blue);
    color: #FFFFFF;
    font-weight: 500;
}

.mv-ov .o-bar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: var(--o-gap);
}
.mv-ov .o-bar-head h1 {
    font-size: 21px;
    font-weight: 500;
    color: var(--o-ink);
    letter-spacing: -.5px;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   Carrier marks
   ───────────────────────────────────────────────────────────────────────── */

.mv-ov .o-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    min-width: 54px;
    padding: 0 9px;
    border-radius: 8px;
    background: #FFFFFF;
    border: 1px solid var(--o-line-s);
}
.mv-ov .o-mark img { max-height: 14px; max-width: 46px; width: auto; display: block; }

/* On the carriers panel the plates sit on a dark field, so they lose the
   hairline and take a little more room. */
.mv-ov .o-carriers .o-mark { height: 38px; min-width: 76px; border: 0; padding: 0 12px; }
.mv-ov .o-carriers .o-mark img { max-height: 20px; max-width: 62px; }

/* ─────────────────────────────────────────────────────────────────────────
   Registrations and movement map
   ───────────────────────────────────────────────────────────────────────── */

.mv-ov .o-geo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; }
.mv-ov .o-geo-map { height: 320px; width: 100%; min-width: 0; }
.mv-ov .o-geo-map .jvm-zoom-btn { display: none; }

.mv-ov .o-geo-side { min-width: 0; display: flex; flex-direction: column; }

.mv-ov .o-geo-tabs { display: flex; gap: 16px; margin-bottom: 12px; }
.mv-ov .o-geo-tab {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--o-mute);
    padding-bottom: 7px;
    border-bottom: 2px solid transparent;
}
.mv-ov .o-geo-tab.is-on { color: var(--o-ink); border-bottom-color: var(--o-blue); }

.mv-ov .o-geo-row { display: flex; align-items: center; gap: 11px; padding: 8px 0; }
.mv-ov .o-geo-row + .o-geo-row { border-top: 1px solid var(--o-line-s); }
.mv-ov .o-geo-row > div { flex: 1; min-width: 0; }
.mv-ov .o-geo-name {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12.5px;
    color: var(--o-ink);
}
.mv-ov .o-geo-name b { font-weight: 500; font-variant-numeric: tabular-nums; }
.mv-ov .o-geo-meter { height: 4px; background: var(--o-sunk); border-radius: 999px; margin-top: 6px; overflow: hidden; }
.mv-ov .o-geo-meter > i { display: block; height: 100%; border-radius: 999px; background: var(--o-blue); }

/* Lanes read in the brand green when they earn and red when they do not. */
.mv-ov .o-lane-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 12.5px; }
.mv-ov .o-lane-row + .o-lane-row { border-top: 1px solid var(--o-line-s); }
.mv-ov .o-lane-pair { display: flex; align-items: center; gap: 7px; flex: none; }
.mv-ov .o-lane-mid { flex: 1; min-width: 0; color: var(--o-mute); font-size: 11px; }
.mv-ov .o-lane-n { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
.mv-ov .o-earn { color: #1F8F48; }
.mv-ov .o-lose { color: #C83C3C; }

.mv-ov .o-geo-legend { display: flex; gap: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--o-line-s); }
.mv-ov .o-geo-key { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--o-mute); }
.mv-ov .o-geo-key i { width: 16px; height: 3px; border-radius: 2px; display: block; }

@media (max-width: 1100px) {
    .mv-ov .o-geo { grid-template-columns: minmax(0, 1fr); }
}

/* The four counters. Set as a class, not an inline span: an inline style
   cannot be reached by a media query, so the cards stayed one sixth wide on
   a laptop and wrapped every label onto three lines. */
.mv-ov .kpi-col { grid-column: span 2; }

@media (max-width: 1500px) {
    .mv-ov .kpi-col { grid-column: span 3; }
}
@media (max-width: 1000px) {
    .mv-ov .kpi-col { grid-column: span 6; }
}
@media (max-width: 620px) {
    .mv-ov .kpi-col { grid-column: span 12; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Counter cards, with their animated marks
   ---------------------------------------------------------------------------
   The figure reads on the left, the mark runs on the right. Motion is slow
   and small on purpose: these loop forever on a screen somebody leaves open
   all day, so anything brisk becomes a distraction within a minute.
   ───────────────────────────────────────────────────────────────────────── */

.mv-ov .o-kpi {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    overflow: hidden;
    position: relative;
}

.mv-ov .o-art { width: 86px; height: auto; flex: none; }

/* The parcel waits, breathing. */
.mv-ov .o-art-bob    { animation: o-bob 4.5s ease-in-out infinite; transform-origin: 46px 36px; }
.mv-ov .o-art-shadow { animation: o-shade 4.5s ease-in-out infinite; transform-origin: 46px 60px; }

@keyframes o-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
@keyframes o-shade {
    0%, 100% { transform: scaleX(1);    opacity: .14; }
    50%      { transform: scaleX(.86);  opacity: .09; }
}

/* The aircraft runs its lane and starts again. The path is the same arc the
   track is drawn on, so the two cannot drift apart. */
.mv-ov .o-art-fly {
    offset-path: path('M8 50 Q46 18 84 50');
    offset-rotate: auto;
    animation: o-fly 5.5s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes o-fly {
    0%        { offset-distance: 0%;   opacity: 0; }
    8%        { opacity: 1; }
    88%       { opacity: 1; }
    100%      { offset-distance: 100%; opacity: 0; }
}

/* A fallback for engines without offset-path: the mark simply sits at the
   top of the arc rather than vanishing. */
@supports not (offset-path: path('M0 0 L1 1')) {
    .mv-ov .o-art-fly { transform: translate(46px, 29px); animation: none; }
}

.mv-ov .o-art-track { animation: o-dash 3s linear infinite; }
@keyframes o-dash {
    to { stroke-dashoffset: -14; }
}

/* The check draws itself, then the ring opens out behind it. */
.mv-ov .o-art-tick {
    stroke-dasharray: 26;
    animation: o-draw 4s ease-in-out infinite;
}
@keyframes o-draw {
    0%, 12%  { stroke-dashoffset: 26; }
    34%, 86% { stroke-dashoffset: 0; }
    100%     { stroke-dashoffset: 0; }
}

.mv-ov .o-art-ring { animation: o-ring 4s ease-out infinite; transform-origin: 46px 36px; }
@keyframes o-ring {
    0%, 30% { transform: scale(.82); opacity: 0; }
    55%     { opacity: .6; }
    100%    { transform: scale(1.18); opacity: 0; }
}

/* The warning pulses, slowly enough not to nag. */
.mv-ov .o-art-pulse { animation: o-pulse 3.2s ease-in-out infinite; transform-origin: 46px 36px; }
@keyframes o-pulse {
    0%, 100% { transform: scale(1);    opacity: .92; }
    50%      { transform: scale(1.06); opacity: 1; }
}

/* Nothing moves for anyone who has asked for that. */
@media (prefers-reduced-motion: reduce) {
    .mv-ov .o-art-bob,
    .mv-ov .o-art-shadow,
    .mv-ov .o-art-fly,
    .mv-ov .o-art-track,
    .mv-ov .o-art-tick,
    .mv-ov .o-art-ring,
    .mv-ov .o-art-pulse { animation: none; }
    .mv-ov .o-art-tick { stroke-dashoffset: 0; }
    .mv-ov .o-art-ring { opacity: .4; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Collapsible panel
   ---------------------------------------------------------------------------
   The map is a lot of height for something most people glance at, so it is
   folded away behind a one-line summary and opens on a click. Built on
   <details>, so it works with the keyboard and without JavaScript.
   ───────────────────────────────────────────────────────────────────────── */

.mv-ov .o-fold { padding: 0; }
.mv-ov .o-fold > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: var(--o-r);
}
.mv-ov .o-fold > summary::-webkit-details-marker { display: none; }
.mv-ov .o-fold > summary:hover { background: var(--o-sunk); }

.mv-ov .o-fold-title { font-size: 15px; font-weight: 500; color: var(--o-ink); }
.mv-ov .o-fold-sum { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.mv-ov .o-fold-stat { font-size: 12px; color: var(--o-mute); white-space: nowrap; }
.mv-ov .o-fold-stat b { color: var(--o-ink); font-weight: 500; font-variant-numeric: tabular-nums; }

.mv-ov .o-fold-chev {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--o-sunk);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--o-body);
    flex: none;
    transition: transform .2s ease;
}
.mv-ov .o-fold[open] > summary .o-fold-chev { transform: rotate(180deg); }

.mv-ov .o-fold-body { padding: 4px 20px 20px; }

/* A flat bar standing in for the map while the panel is shut: the same
   countries, in the same order, just folded to one line. */
.mv-ov .o-sparkbar { display: flex; gap: 2px; height: 6px; width: 160px; flex: none; }
.mv-ov .o-sparkbar > i { border-radius: 2px; min-width: 3px; display: block; }

/* ─────────────────────────────────────────────────────────────────────────
   Counter cards: the surface itself
   ---------------------------------------------------------------------------
   Each card takes the colour of what it counts and carries two moving
   layers behind the content:

     · a wash — a large soft radial in the card's hue, anchored at the
       bottom-right behind the mark, drifting and breathing;
     · a sheen — a single wide highlight that crosses the card every so
       often, which is what stops the wash reading as a static gradient.

   Both sit at z-index -1 under an isolated stacking context, so no text ever
   has to fight them. The whole thing is slow: a dashboard stays open all day
   and anything brisk turns into a nuisance by the second minute.
   ───────────────────────────────────────────────────────────────────────── */

.mv-ov .o-kpi {
    position: relative;
    isolation: isolate;
    border-color: transparent;
    transition: transform .25s ease, box-shadow .25s ease;
}

.mv-ov .o-kpi::before,
.mv-ov .o-kpi::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
}

/* The wash. */
.mv-ov .o-kpi::before {
    background:
        radial-gradient(118% 130% at 104% 118%, var(--kpi-a) 0%, transparent 58%),
        radial-gradient(90% 120% at -8% -12%, var(--kpi-b) 0%, transparent 52%);
    animation: o-wash 11s ease-in-out infinite;
}

/* The sheen. */
.mv-ov .o-kpi::after {
    background: linear-gradient(104deg,
        transparent 36%,
        rgba(255, 255, 255, .55) 50%,
        transparent 64%);
    transform: translateX(-120%);
    animation: o-sheen 9s ease-in-out infinite;
}

@keyframes o-wash {
    0%, 100% { opacity: .9;  transform: scale(1)    translate(0, 0); }
    50%      { opacity: 1;   transform: scale(1.08) translate(-2%, -3%); }
}

@keyframes o-sheen {
    0%, 62%  { transform: translateX(-120%); }
    88%, 100%{ transform: translateX(120%); }
}

/* The hues. The second stop is always the fainter one, so the card reads as
   lit from the corner the mark sits in. */
.mv-ov .kpi-blue  { --kpi-a: rgba(37, 117, 252, .17); --kpi-b: rgba(37, 117, 252, .07); }
.mv-ov .kpi-sky   { --kpi-a: rgba(0, 125, 250, .15);  --kpi-b: rgba(94, 150, 255, .08); }
.mv-ov .kpi-green { --kpi-a: rgba(43, 191, 107, .17); --kpi-b: rgba(134, 255, 123, .14); }
.mv-ov .kpi-red   { --kpi-a: rgba(255, 98, 98, .18);  --kpi-b: rgba(255, 98, 98, .07); }

/* A hairline of the card's own colour along the top edge. */
.mv-ov .o-kpi { border-top: 2px solid transparent; }
.mv-ov .kpi-blue  { border-top-color: rgba(37, 117, 252, .5); }
.mv-ov .kpi-sky   { border-top-color: rgba(0, 125, 250, .45); }
.mv-ov .kpi-green { border-top-color: rgba(43, 191, 107, .5); }
.mv-ov .kpi-red   { border-top-color: rgba(255, 98, 98, .55); }

/* Lifting on hover tells you the card is worth clicking before you do. */
.mv-ov .o-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -18px rgba(20, 24, 42, .45);
}

/* The figure takes the card's colour too, so the eye lands on it first. */
.mv-ov .kpi-green .o-kpi-n { color: #17814A; }
.mv-ov .kpi-red   .o-kpi-n { color: #C83C3C; }

@media (prefers-reduced-motion: reduce) {
    .mv-ov .o-kpi::before { animation: none; }
    .mv-ov .o-kpi::after  { display: none; }
    .mv-ov .o-kpi:hover   { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Counter cards with the render tiles
   ---------------------------------------------------------------------------
   Each card shows a piece of the hub render, cut from the one file: the
   terminal, the aircraft, the apron, the tower. They bleed off the right and
   bottom edges, which is what makes the card look like a window onto the
   scene rather than a box with a picture pasted in it.
   ───────────────────────────────────────────────────────────────────────── */

.mv-ov .o-kpi {
    min-height: 152px;
    padding: 18px 20px;
    align-items: flex-start;
    overflow: hidden;
}

.mv-ov .o-kpi-copy { position: relative; z-index: 2; min-width: 0; }

.mv-ov .o-kpi-tile {
    position: absolute;
    right: -14px;
    bottom: -22px;
    height: 128%;
    width: auto;
    max-width: 68%;
    object-fit: contain;
    object-position: right bottom;
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(0 14px 16px rgba(20, 24, 42, .16));
    animation: o-tile-float 7s ease-in-out infinite;
    transform-origin: 100% 100%;
}

/* The whole tile drifts, slowly, the way the hub does in the banner. */
@keyframes o-tile-float {
    0%, 100% { transform: translate3d(0, 0, 0)      scale(1); }
    50%      { transform: translate3d(-3px, -5px, 0) scale(1.02); }
}

/* Leaning in on hover reads as "there is more behind this". */
.mv-ov .o-kpi:hover .o-kpi-tile { animation-play-state: paused; transform: scale(1.05) translate(-4px, -6px); transition: transform .3s ease; }

/* The copy needs a clear field to sit on, because the tile runs under it. */
.mv-ov .o-kpi-copy::before {
    content: '';
    position: absolute;
    inset: -18px -40px -18px -20px;
    background: linear-gradient(95deg, var(--o-card) 54%, transparent 100%);
    z-index: -1;
}

@media (prefers-reduced-motion: reduce) {
    .mv-ov .o-kpi-tile { animation: none; }
    .mv-ov .o-kpi:hover .o-kpi-tile { transform: none; }
}

/* On a narrow card the tile crowds the figure, so it gives ground first. */
@media (max-width: 1500px) {
    .mv-ov .o-kpi-tile { max-width: 58%; height: 118%; }
}
@media (max-width: 1000px) {
    .mv-ov .o-kpi-tile { max-width: 46%; height: 112%; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Page header
   ---------------------------------------------------------------------------
   Shared by every admin screen through admin/partials/_page-head.blade.php.
   On the dashboard it greets; elsewhere it names the screen. Same shape
   either way, so the panel reads as one product.
   ───────────────────────────────────────────────────────────────────────── */

.mv-ov .o-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: var(--o-gap);
}
.mv-ov .o-page-head-copy { min-width: 0; }
.mv-ov .o-page-head-side { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.mv-ov .o-eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--o-mute);
}
.mv-ov .o-page-title {
    font-size: 34px;
    font-weight: 500;
    color: var(--o-ink);
    letter-spacing: -1.1px;
    line-height: 1.1;
    margin: 5px 0 0;
}
.mv-ov .o-page-sub { font-size: 12.5px; color: var(--o-mute); margin-top: 5px; }

/* ─────────────────────────────────────────────────────────────────────────
   Cost against profit
   ---------------------------------------------------------------------------
   Two bars a day on one scale, so the pair can be read against each other.
   A day that lost money draws its profit bar in red and downward-facing, so
   a loss cannot be mistaken for a short good day.
   ───────────────────────────────────────────────────────────────────────── */

.mv-ov .o-figs { display: flex; gap: 20px; text-align: right; }
.mv-ov .o-figs b {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: var(--o-ink);
    letter-spacing: -.3px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.mv-ov .o-fig-k {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    font-size: 10.5px;
    color: var(--o-mute);
    margin-bottom: 2px;
}
.mv-ov .o-fig-k i { width: 7px; height: 7px; border-radius: 50%; display: block; flex: none; }

.mv-ov .o-earn { color: #1F8F48; }
.mv-ov .o-lose { color: #C83C3C; }

.mv-ov .o-bar-col { flex-direction: row; align-items: flex-end; gap: 3px; }
.mv-ov .o-bar { max-width: 11px; }
.mv-ov .o-bar-cost   { background: linear-gradient(180deg, #5E96FF 0%, #2575FC 100%); }
.mv-ov .o-bar-profit { background: linear-gradient(180deg, #5FD98F 0%, #2BBF6B 100%); }
.mv-ov .o-bar-profit.is-loss { background: linear-gradient(180deg, #FF8E8E 0%, #FF6262 100%); }

/* ─────────────────────────────────────────────────────────────────────────
   Cost and profit, as a metric on the blue field
   ---------------------------------------------------------------------------
   Same gradient as the carriers panel, so the two read as the brand speaking
   rather than as two unrelated coloured boxes. Profit is the headline;
   everything else on the card exists to give it a scale.

   Green #86FF7B is light, which is exactly why it works here: on this blue
   it is the brightest thing on the card, so the eye finds the profit bars
   before anything else.
   ───────────────────────────────────────────────────────────────────────── */

.mv-ov .o-metric {
    background: var(--o-grad);
    border: 0;
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
}

/* A bloom in the brand green behind the figure, so the panel is not flat. */
.mv-ov .o-metric::before {
    content: '';
    position: absolute;
    right: -14%;
    top: -34%;
    width: 62%;
    height: 130%;
    background: radial-gradient(circle, rgba(134, 255, 123, .26) 0%, rgba(134, 255, 123, 0) 68%);
    pointer-events: none;
}
.mv-ov .o-metric > * { position: relative; }

.mv-ov .o-metric-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.mv-ov .o-metric-eyebrow {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .64);
}
.mv-ov .o-metric-title { font-size: 15px; font-weight: 500; margin-top: 3px; }

.mv-ov .o-metric-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #86FF7B;
    color: #0B3D06;
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.mv-ov .o-metric-chip.is-down { background: #FF9A9A; color: #6B1010; }

.mv-ov .o-metric-fig {
    font-size: 36px;
    font-weight: 500;
    letter-spacing: -1.3px;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.mv-ov .o-metric-cur {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    color: rgba(255, 255, 255, .6);
    margin-right: 6px;
}
.mv-ov .o-metric-sub { font-size: 11.5px; color: rgba(255, 255, 255, .72); margin-top: 6px; }

.mv-ov .o-metric-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .18);
}
.mv-ov .o-metric-k {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: rgba(255, 255, 255, .66);
}
.mv-ov .o-metric-k i { width: 8px; height: 8px; border-radius: 50%; display: block; flex: none; }
.mv-ov .o-metric-k i.is-cost   { background: rgba(255, 255, 255, .55); }
.mv-ov .o-metric-k i.is-profit { background: #86FF7B; }
.mv-ov .o-metric-split b {
    display: block;
    font-size: 16px;
    font-weight: 500;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

/* The bars, on the blue: cost in translucent white, profit in the brand
   green, a losing day in red. */
.mv-ov .o-metric .o-bars { height: 92px; }
.mv-ov .o-metric .o-bar-cost   { background: rgba(255, 255, 255, .42); }
.mv-ov .o-metric .o-bar-profit { background: #86FF7B; }
.mv-ov .o-metric .o-bar-profit.is-loss { background: #FF8E8E; }
.mv-ov .o-metric .o-bar-axis > span { color: rgba(255, 255, 255, .55); }
.mv-ov .o-metric .o-bar-col:hover::after {
    background: #FFFFFF;
    color: var(--o-ink);
}

/* ─────────────────────────────────────────────────────────────────────────
   Carrier marks, sized properly
   ---------------------------------------------------------------------------
   The plates were capped by height, which is the wrong constraint: a DHL
   wordmark is six times wider than it is tall and a Maersk star is square,
   so one height made the wordmarks tiny and the star fine. Each mark is
   given a box and told to fit inside it, and the plates are wide enough for
   a wordmark to be read.
   ───────────────────────────────────────────────────────────────────────── */

.mv-ov .o-mark {
    height: 34px;
    min-width: 76px;
    padding: 0 12px;
    border-radius: 9px;
}
.mv-ov .o-mark img {
    max-height: 20px;
    max-width: 62px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* A square mark has no wordmark to read, so it can afford to be taller. */
.mv-ov .o-mark img[src*="maersk"],
.mv-ov .o-mark img[src*="ups"] { max-height: 26px; max-width: 34px; }

/* On the carriers panel they are the subject of the card, not a column
   marker, so they get a full plate each. */
.mv-ov .o-carriers .o-mark {
    height: 48px;
    min-width: 96px;
    border: 0;
    padding: 0 14px;
    border-radius: 12px;
}
.mv-ov .o-carriers .o-mark img { max-height: 26px; max-width: 76px; }
.mv-ov .o-carriers .o-mark img[src*="maersk"],
.mv-ov .o-carriers .o-mark img[src*="ups"] { max-height: 34px; max-width: 42px; }

.mv-ov .o-carrier-row { gap: 10px; }

/* The trimmed marks come in ratios from 0.8 to 1.7, so a single box with
   object-fit is the only sizing that treats them all fairly: a wordmark
   fills the width, a square mark fills the height, and neither is capped by
   a rule written for the other. Replaces the per-logo overrides above. */
.mv-ov .o-mark img,
.mv-ov .o-mark img[src*="maersk"],
.mv-ov .o-mark img[src*="ups"] {
    width: 54px;
    height: 24px;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center;
}

.mv-ov .o-carriers .o-mark img,
.mv-ov .o-carriers .o-mark img[src*="maersk"],
.mv-ov .o-carriers .o-mark img[src*="ups"] {
    width: 72px;
    height: 32px;
    max-width: none;
    max-height: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   Profile
   ---------------------------------------------------------------------------
   Same cards as the dashboard. What is new here is the identity block, the
   health ring and the permission chips.
   ───────────────────────────────────────────────────────────────────────── */

.mv-ov .p-ident-top { display: flex; align-items: center; gap: 14px; }

.mv-ov .p-face {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--o-grad);
    color: #FFFFFF;
    font-size: 19px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.mv-ov .p-name {
    font-size: 19px;
    font-weight: 500;
    color: var(--o-ink);
    letter-spacing: -.4px;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mv-ov .p-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; }

.mv-ov .p-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid var(--o-line-s);
}
.mv-ov .p-facts span { display: block; font-size: 10.5px; color: var(--o-mute); }
.mv-ov .p-facts b {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--o-ink);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Health ──────────────────────────────────────────────────────────── */

.mv-ov .p-health { display: flex; align-items: center; gap: 20px; }
.mv-ov .p-ring { position: relative; width: 128px; height: 128px; flex: none; }
.mv-ov .p-ring svg { transform: rotate(-90deg); display: block; }
.mv-ov .p-ring-mid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.mv-ov .p-ring-mid b {
    font-size: 23px;
    font-weight: 500;
    color: var(--o-ink);
    letter-spacing: -.6px;
    line-height: 1;
}
.mv-ov .p-ring-mid span { font-size: 10.5px; color: var(--o-mute); margin-top: 2px; }

.mv-ov .p-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 12.5px;
    color: var(--o-mute);
}
.mv-ov .p-check i { font-size: 16px; color: var(--o-faint); flex: none; }
.mv-ov .p-check.is-done { color: var(--o-ink); }
.mv-ov .p-check.is-done i { color: var(--o-green); }

/* The one thing still to do, spelled out. A cross with no instruction is
   just nagging. */
.mv-ov .p-hint {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 14px;
    padding: 11px 13px;
    border-radius: 12px;
    background: var(--o-amber-s);
    color: #7A4E04;
    font-size: 11.5px;
    line-height: 1.5;
}
.mv-ov .p-hint i { font-size: 16px; flex: none; }
.mv-ov .p-hint b { font-weight: 600; }

/* ── Permissions ─────────────────────────────────────────────────────── */

.mv-ov .p-perms { display: flex; flex-wrap: wrap; gap: 6px; }
.mv-ov .p-perm {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--o-blue-s);
    color: #124FC4;
    white-space: nowrap;
}

/* ── Forms ───────────────────────────────────────────────────────────── */

.mv-ov .p-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mv-ov .p-fields > label,
.mv-ov .p-field { display: block; min-width: 0; margin-bottom: 14px; }
.mv-ov .p-fields > label { margin-bottom: 0; }

.mv-ov .p-fields > label > span,
.mv-ov .p-field > span {
    display: block;
    font-size: 11.5px;
    color: var(--o-mute);
    margin-bottom: 6px;
}
.mv-ov .p-fields b, .mv-ov .p-field b { color: var(--o-red); font-weight: 400; }

.mv-ov .o-input {
    width: 100%;
    border: 1px solid var(--o-line);
    border-radius: 11px;
    padding: 10px 13px;
    font-size: 13px;
    font-family: inherit;
    color: var(--o-ink);
    background: var(--o-card);
}
.mv-ov .o-input::placeholder { color: var(--o-faint); }
.mv-ov .o-input:focus {
    outline: none;
    border-color: var(--o-blue);
    box-shadow: 0 0 0 3px rgba(37, 117, 252, .14);
}

/* ── Devices ─────────────────────────────────────────────────────────── */

.mv-ov .p-device { display: flex; align-items: center; gap: 11px; padding: 11px 0; }
.mv-ov .p-device + .p-device { border-top: 1px solid var(--o-line-s); }
.mv-ov .p-device b { font-size: 13px; font-weight: 500; color: var(--o-ink); }

@media (max-width: 900px) {
    .mv-ov .p-fields { grid-template-columns: minmax(0, 1fr); }
    .mv-ov .p-health { flex-direction: column; align-items: flex-start; }
}

/* The earlier breakpoint dropped every column straight to full width at
   1400px, which wastes most of a laptop screen. Three steps instead of one:
   four across, then two, then one. */
@media (max-width: 1400px) {
    .mv-ov .c3 { grid-column: span 6; }
    .mv-ov .c4 { grid-column: span 4; }
    .mv-ov .c5 { grid-column: span 5; }
    .mv-ov .c7 { grid-column: span 7; }
    .mv-ov .c8 { grid-column: span 8; }
    .mv-ov .c9 { grid-column: span 12; }
}
@media (max-width: 1080px) {
    .mv-ov .c3, .mv-ov .c4, .mv-ov .c5 { grid-column: span 6; }
    .mv-ov .c7, .mv-ov .c8 { grid-column: span 12; }
}
@media (max-width: 760px) {
    .mv-ov .c3, .mv-ov .c4, .mv-ov .c5, .mv-ov .c6, .mv-ov .c7, .mv-ov .c8 {
        grid-column: span 12;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Profile: the week, the queue, the checklist, the agenda
   ───────────────────────────────────────────────────────────────────────── */

.mv-ov .o-act-open {
    width: 30px; height: 30px;
    border-radius: 10px;
    background: var(--o-sunk);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: var(--o-body); flex: none;
}
.mv-ov .o-act-open:hover { background: var(--o-blue-s); color: var(--o-blue); }

/* ── Your week ───────────────────────────────────────────────────────── */

.mv-ov .p-week-read { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 4px; }
.mv-ov .p-week-read b {
    font-size: 34px;
    font-weight: 500;
    color: var(--o-ink);
    letter-spacing: -1.1px;
    line-height: 1;
}
.mv-ov .p-week-read span { font-size: 11.5px; color: var(--o-mute); line-height: 1.3; padding-bottom: 2px; }

.mv-ov .p-week { display: flex; align-items: flex-end; gap: 8px; height: 106px; margin-top: 16px; }
.mv-ov .p-week-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    position: relative;
    min-width: 0;
}
.mv-ov .p-week-bar {
    width: 100%;
    max-width: 9px;
    border-radius: 99px;
    background: #D7DCEA;
    min-height: 4px;
}
/* Today is the one bar in the brand colour: a week chart where every bar
   looks the same makes you count to find the current day. */
.mv-ov .p-week-col.is-today .p-week-bar { background: var(--o-blue); }

.mv-ov .p-week-tip {
    position: absolute;
    bottom: calc(100% + 6px);
    background: var(--o-ink);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.mv-ov .p-week-axis { display: flex; gap: 8px; margin-top: 9px; }
.mv-ov .p-week-axis > span { flex: 1; text-align: center; font-size: 10.5px; color: var(--o-mute); }

/* ── Queue ───────────────────────────────────────────────────────────── */

.mv-ov .p-load { display: flex; align-items: center; gap: 18px; }
.mv-ov .p-load-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 0;
    font-size: 12px;
}
.mv-ov .p-load-row i { width: 8px; height: 8px; border-radius: 50%; flex: none; display: block; }
.mv-ov .p-load-row span { flex: 1; min-width: 0; color: var(--o-body); }
.mv-ov .p-load-row b { font-weight: 500; color: var(--o-ink); font-variant-numeric: tabular-nums; }

.mv-ov .p-load-acts { display: flex; gap: 8px; margin-top: 16px; }
.mv-ov .p-load-acts .o-btn { flex: 1; justify-content: center; margin-top: 0; }
.mv-ov .o-btn-ghost {
    background: var(--o-card);
    color: var(--o-ink);
    border: 1px solid var(--o-line);
}
.mv-ov .o-btn-ghost:hover { background: var(--o-sunk); color: var(--o-ink); }

/* ── Setup checklist, on the dark card ───────────────────────────────── */

.mv-ov .p-tasks {
    background: #14182A;
    border-color: transparent;
    color: rgba(255, 255, 255, .82);
}
.mv-ov .p-tasks-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.mv-ov .p-tasks-top span { font-size: 15px; font-weight: 500; color: #FFFFFF; }
.mv-ov .p-tasks-top b { font-size: 26px; font-weight: 500; color: #FFFFFF; letter-spacing: -.8px; }

.mv-ov .p-task { display: flex; align-items: center; gap: 11px; padding: 9px 0; }
.mv-ov .p-task + .p-task { border-top: 1px solid rgba(255, 255, 255, .09); }

.mv-ov .p-task-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; color: rgba(255, 255, 255, .75); flex: none;
}
.mv-ov .p-task b {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    color: #FFFFFF;
}
.mv-ov .p-task em {
    display: block;
    font-style: normal;
    font-size: 10.5px;
    color: rgba(255, 255, 255, .5);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mv-ov .p-task-mark {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .22);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex: none;
}

/* Done: struck through and marked in the yellow, as on the reference. */
.mv-ov .p-task.is-done b { text-decoration: line-through; color: rgba(255, 255, 255, .45); }
.mv-ov .p-task.is-done em { color: rgba(255, 255, 255, .3); }
.mv-ov .p-task.is-done .p-task-icon { color: rgba(255, 255, 255, .4); }
.mv-ov .p-task.is-done .p-task-mark {
    background: #FFC83D;
    border-color: #FFC83D;
    color: #5C4300;
}

/* ── The week ahead ──────────────────────────────────────────────────── */

.mv-ov .p-cal-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    text-align: center;
}
.mv-ov .p-cal-side {
    font-size: 12px;
    color: var(--o-mute);
    background: var(--o-sunk);
    border-radius: 999px;
    padding: 6px 14px;
    flex: none;
}

.mv-ov .p-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }

.mv-ov .p-cal-day {
    border-radius: 14px;
    padding: 10px;
    min-height: 136px;
    background: var(--o-sunk);
}
.mv-ov .p-cal-day.is-past { opacity: .55; }
.mv-ov .p-cal-day.is-today { background: var(--o-blue-s); outline: 1px solid rgba(37, 117, 252, .3); }

.mv-ov .p-cal-head { text-align: center; margin-bottom: 9px; }
.mv-ov .p-cal-head span { display: block; font-size: 10.5px; color: var(--o-mute); }
.mv-ov .p-cal-head b {
    display: block;
    font-size: 17px;
    font-weight: 500;
    color: var(--o-ink);
    line-height: 1.2;
}
.mv-ov .p-cal-day.is-today .p-cal-head b { color: var(--o-blue); }

.mv-ov .p-cal-slots { display: flex; flex-direction: column; gap: 6px; }

.mv-ov .p-event {
    display: block;
    background: #FFFFFF;
    border-radius: 10px;
    padding: 8px 9px;
    border-left: 3px solid var(--o-blue);
}
.mv-ov .p-event:hover { box-shadow: 0 6px 16px -10px rgba(20, 24, 42, .5); }
.mv-ov .p-event b {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--o-ink);
    font-variant-numeric: tabular-nums;
}
.mv-ov .p-event span {
    display: block;
    font-size: 10px;
    color: var(--o-mute);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mv-ov .p-event em {
    display: block;
    font-style: normal;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--o-green);
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1000px) {
    .mv-ov .p-cal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mv-ov .p-cal-day { min-height: 0; }
    .mv-ov .p-load { flex-direction: column; align-items: flex-start; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Profile: the photo card and the folds
   ───────────────────────────────────────────────────────────────────────── */

.mv-ov .p-photo { padding: 0; overflow: hidden; }
.mv-ov .p-photo-form { margin: 0; }

.mv-ov .p-photo-frame {
    position: relative;
    aspect-ratio: 1 / 1;
    max-height: 310px;
    background: linear-gradient(160deg, #E7ECFB 0%, #D9E2F8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.mv-ov .p-photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mv-ov .p-photo-fallback {
    font-size: 64px;
    font-weight: 500;
    color: rgba(37, 117, 252, .32);
    letter-spacing: -2px;
}

/* The name sits on a scrim, not on the picture: a light photo would swallow
   white type otherwise. */
.mv-ov .p-photo-copy {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 46px 18px 16px;
    background: linear-gradient(transparent, rgba(12, 16, 32, .78));
    pointer-events: none;
}
.mv-ov .p-photo-copy h2 {
    font-size: 19px;
    font-weight: 500;
    color: #FFFFFF;
    margin: 0;
    letter-spacing: -.4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mv-ov .p-photo-copy span { font-size: 11.5px; color: rgba(255, 255, 255, .78); }

.mv-ov .p-photo-badge {
    position: absolute;
    right: 14px;
    bottom: 16px;
    background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255, 255, 255, .5);
    color: #FFFFFF;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 500;
    backdrop-filter: blur(6px);
}

.mv-ov .p-photo-pick {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: var(--o-ink);
    cursor: pointer;
}
.mv-ov .p-photo-pick:hover { background: #FFFFFF; }

.mv-ov .p-photo-save { display: flex; gap: 8px; padding: 14px 16px 0; }
.mv-ov .p-photo-save .o-btn { flex: 1; justify-content: center; }

/* ── Folds ───────────────────────────────────────────────────────────── */

.mv-ov .p-folds { padding: 6px 4px 8px; }

.mv-ov .p-fold { border-top: 1px solid var(--o-line-s); }
.mv-ov .p-fold:first-child { border-top: 0; }
.mv-ov .p-fold > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--o-ink);
}
.mv-ov .p-fold > summary::-webkit-details-marker { display: none; }
.mv-ov .p-fold > summary:hover { background: var(--o-sunk); }
.mv-ov .p-fold > summary i { color: var(--o-mute); font-size: 18px; transition: transform .2s ease; }
.mv-ov .p-fold[open] > summary i { transform: rotate(180deg); }

.mv-ov .p-fold-body { padding: 0 16px 14px; }

.mv-ov .p-kv {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 12.5px;
}
.mv-ov .p-kv span { color: var(--o-mute); }
.mv-ov .p-kv b { font-weight: 500; color: var(--o-ink); text-align: right; min-width: 0; word-break: break-word; }

.mv-ov .p-dev { display: flex; align-items: center; gap: 11px; padding: 8px 0; }
.mv-ov .p-dev + .p-dev { border-top: 1px solid var(--o-line-s); }
.mv-ov .p-dev-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--o-blue-s);
    color: var(--o-blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex: none;
}
.mv-ov .p-dev b { display: block; font-size: 12.5px; font-weight: 500; color: var(--o-ink); }
.mv-ov .p-dev em { display: block; font-style: normal; font-size: 10.5px; color: var(--o-mute); }

/* ─────────────────────────────────────────────────────────────────────────
   The week as a time grid
   ---------------------------------------------------------------------------
   Hours down the left, days across, dotted column rules. The all-day lane
   sits above the hours because a due date has no time of day and parking it
   at an invented hour would be a lie told neatly.
   ───────────────────────────────────────────────────────────────────────── */

.mv-ov .p-grid {
    display: grid;
    grid-template-columns: 64px repeat(7, minmax(0, 1fr));
    border-top: 1px solid var(--o-line-s);
}

.mv-ov .p-grid-corner { border-right: 1px solid var(--o-line-s); }

.mv-ov .p-grid-head {
    text-align: center;
    padding: 10px 4px 12px;
    border-left: 1px dotted var(--o-line);
}
.mv-ov .p-grid-head span { display: block; font-size: 10.5px; color: var(--o-mute); }
.mv-ov .p-grid-head b {
    display: block;
    font-size: 18px;
    font-weight: 400;
    color: var(--o-ink);
    line-height: 1.2;
}
.mv-ov .p-grid-head.is-past { opacity: .5; }
.mv-ov .p-grid-head.is-today b { color: var(--o-blue); font-weight: 500; }
.mv-ov .p-grid-head.is-today span { color: var(--o-blue); }

.mv-ov .p-grid-time {
    font-size: 10.5px;
    color: var(--o-faint);
    text-align: right;
    padding: 6px 10px 0 0;
    border-right: 1px solid var(--o-line-s);
    border-top: 1px solid var(--o-line-s);
    white-space: nowrap;
}

.mv-ov .p-grid-cell {
    min-height: 42px;
    border-left: 1px dotted var(--o-line);
    border-top: 1px solid var(--o-line-s);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mv-ov .p-grid-cell.is-today { background: rgba(37, 117, 252, .04); }
.mv-ov .p-grid-cell.is-past { background: #FBFBFD; }

/* The all-day lane is taller and tinted, so it does not read as 8 a.m. */
.mv-ov .p-allday { min-height: 54px; background: var(--o-sunk); }
.mv-ov .p-allday.is-past { background: #F7F7FA; }

.mv-ov .p-ev {
    display: block;
    border-radius: 8px;
    padding: 5px 8px;
    background: #FFFFFF;
    border-left: 3px solid var(--o-blue);
    box-shadow: 0 2px 6px -4px rgba(20, 24, 42, .5);
}
.mv-ov .p-ev:hover { box-shadow: 0 8px 18px -10px rgba(20, 24, 42, .55); }
.mv-ov .p-ev b {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--o-ink);
    line-height: 1.25;
}
.mv-ov .p-ev span {
    display: block;
    font-size: 9.5px;
    color: var(--o-mute);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* An invoice falling due is money; a critical ticket is a fire. */
.mv-ov .p-ev-due      { border-left-color: var(--o-green); }
.mv-ov .p-ev-critical { border-left-color: var(--o-red); }
.mv-ov .p-ev-medium   { border-left-color: var(--o-amber); }
.mv-ov .p-ev-normal   { border-left-color: var(--o-blue); }

@media (max-width: 1100px) {
    .mv-ov .p-grid { grid-template-columns: 52px repeat(7, minmax(0, 1fr)); font-size: 11px; }
    .mv-ov .p-grid-head b { font-size: 15px; }
    .mv-ov .p-ev span { display: none; }
}

/* `display: flex` on a block that carries the hidden attribute wins over the
   browser's own [hidden] rule, so the save row showed before a file had been
   picked. Stated explicitly. */
.mv-ov [hidden] { display: none !important; }

/* ===========================================================================
   Profile, to the financial-dashboard reference
   ---------------------------------------------------------------------------
   A greeting row, then a mosaic of tiles of different heights. The soft
   gradient supplied for the cards is served as AVIF with a WebP beside it in
   the same image-set, so a browser that cannot decode AVIF takes the WebP
   rather than showing a flat tile.

   Where the comp is coral, this is Movssy's blue; green and red keep the
   meanings they have everywhere else in the panel.
   =========================================================================== */

.mv-ov.f-page { --f-r: 20px; --f-gap: 14px; }

/* ── Greeting row ────────────────────────────────────────────────────── */

.f-page .f-greet {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 2px 2px 22px;
}

.f-page .f-date {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 16px;
    border-right: 1px solid var(--o-line);
}
.f-page .f-date-num {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 1px solid var(--o-line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 500;
    color: var(--o-ink);
}
.f-page .f-date-copy b { display: block; font-size: 13.5px; font-weight: 500; color: var(--o-ink); }
.f-page .f-date-copy span { display: block; font-size: 13.5px; color: var(--o-body); }

.f-page .f-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--o-blue);
    color: #FFFFFF;
    border-radius: 999px;
    padding: 13px 22px;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
}
.f-page .f-cta:hover { background: var(--o-blue-d); color: #FFFFFF; }

.f-page .f-icon-btn,
.f-page .f-mic {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--o-line);
    background: var(--o-card);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--o-ink);
    flex: none;
}
.f-page .f-icon-btn:hover, .f-page .f-mic:hover { background: var(--o-sunk); color: var(--o-ink); }
.f-page .f-mic { width: 58px; height: 58px; font-size: 22px; margin-left: auto; }

.f-page .f-dot {
    position: absolute;
    top: 9px; right: 10px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--o-red);
    box-shadow: 0 0 0 2px var(--o-card);
}

.f-page .f-hello { flex: 1; min-width: 220px; text-align: right; }
.f-page .f-hello h1 {
    font-size: 28px;
    font-weight: 500;
    color: var(--o-ink);
    letter-spacing: -.9px;
    margin: 0;
}
.f-page .f-hello p { font-size: 13px; color: var(--o-mute); margin: 4px 0 0; }

/* ── The mosaic ──────────────────────────────────────────────────────── */

.f-page .f-grid {
    display: grid;
    grid-template-columns: 58px repeat(10, minmax(0, 1fr));
    gap: var(--f-gap);
    align-items: start;
}
.f-page .f-grid > * { min-width: 0; }

.f-page .f-tile {
    background: var(--o-card);
    border: 1px solid var(--o-line-s);
    border-radius: var(--f-r);
    padding: 16px 18px;
}

/* The supplied wash. image-set keeps the AVIF first and the WebP behind it,
   rather than assuming every browser decodes AVIF. A white veil over the
   top keeps dark type legible on the lighter corners. */
.f-page .f-grad {
    background-image:
        linear-gradient(rgba(255, 255, 255, .34), rgba(255, 255, 255, .34)),
        image-set(url("../images/3d/gradient.avif") type("image/avif"),
                  url("../images/3d/gradient.webp") type("image/webp"));
    background-size: cover;
    background-position: center;
    border-color: transparent;
}

/* ── Rail ────────────────────────────────────────────────────────────── */

.f-page .f-rail {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--o-card);
    border: 1px solid var(--o-line-s);
    border-radius: 999px;
    padding: 10px;
    align-items: center;
}
.f-page .f-rail-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--o-sunk);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; color: var(--o-ink); cursor: pointer;
}
.f-page .f-rail-btn:hover { background: var(--o-blue-s); color: var(--o-blue); }

/* ── The account ─────────────────────────────────────────────────────── */

.f-page .f-account { grid-column: span 3; grid-row: span 2; }

.f-page .f-acc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.f-page .f-acc-face {
    width: 54px; height: 54px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .7);
}
.f-page .f-acc-initials {
    background: var(--o-blue);
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.f-page .f-chip {
    background: rgba(255, 255, 255, .78);
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--o-ink);
    white-space: nowrap;
}

.f-page .f-acc-name {
    font-size: 19px;
    font-weight: 500;
    color: var(--o-ink);
    letter-spacing: -.4px;
    margin-top: 18px;
}
.f-page .f-acc-sub { font-size: 11.5px; color: var(--o-body); margin-top: 2px; }
.f-page .f-acc-num {
    font-size: 17px;
    font-weight: 500;
    color: var(--o-ink);
    letter-spacing: 2px;
    margin-top: 12px;
    font-variant-numeric: tabular-nums;
}

.f-page .f-acc-acts { display: flex; gap: 8px; margin-top: 16px; }
.f-page .f-btn-dark,
.f-page .f-btn-light {
    flex: 1;
    text-align: center;
    border-radius: 999px;
    padding: 11px 14px;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
}
.f-page .f-btn-dark { background: var(--o-ink); color: #FFFFFF; }
.f-page .f-btn-dark:hover { background: #000000; color: #FFFFFF; }
.f-page .f-btn-light { background: rgba(255, 255, 255, .82); color: var(--o-ink); }
.f-page .f-btn-light:hover { background: #FFFFFF; color: var(--o-ink); }
.f-page .f-btn-wide { display: block; width: 100%; margin-top: 12px; }

.f-page .f-acc-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .55);
}
.f-page .f-acc-foot span { display: block; font-size: 10.5px; color: var(--o-body); }
.f-page .f-acc-foot b { display: block; font-size: 14px; font-weight: 500; color: var(--o-ink); }

.f-page .f-acc-save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--o-blue);
    color: #FFFFFF;
    border: 0;
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
}

/* ── Money tiles ─────────────────────────────────────────────────────── */

.f-page .f-money { grid-column: span 3; }
.f-page .f-money-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.f-page .f-money-label { font-size: 11.5px; color: var(--o-mute); margin-top: 14px; }
.f-page .f-money-fig {
    font-size: 25px;
    font-weight: 500;
    color: var(--o-ink);
    letter-spacing: -.7px;
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}
.f-page .f-money-fig em { font-style: normal; color: var(--o-blue); margin-right: 2px; }
.f-page .f-money-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--o-blue);
    margin-top: 12px;
}

.f-page .f-round {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--o-sunk);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; color: var(--o-ink); flex: none;
}
.f-page .f-pill {
    background: var(--o-sunk);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 11px;
    color: var(--o-body);
    white-space: nowrap;
}

/* ── Lock and the disc ───────────────────────────────────────────────── */

.f-page .f-lock {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 999px;
    padding: 26px 14px;
    font-size: 12.5px;
    color: var(--o-ink);
    background: var(--o-card);
    border: 1px solid var(--o-line-s);
}
.f-page .f-lock:hover { background: var(--o-sunk); color: var(--o-ink); }

.f-page .f-disc {
    grid-column: span 2;
    position: relative;
    aspect-ratio: 1;
    max-width: 150px;
    margin: 0 auto;
    background: #0F1322;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.f-page .f-disc svg { transform: rotate(-90deg); display: block; }
.f-page .f-disc-mid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}
.f-page .f-disc-mid b { font-size: 21px; font-weight: 500; letter-spacing: -.5px; line-height: 1; }
.f-page .f-disc-mid span { font-size: 10px; color: rgba(255, 255, 255, .6); margin-top: 2px; }

/* ── Days ────────────────────────────────────────────────────────────── */

.f-page .f-days { grid-column: span 3; }
.f-page .f-days-fig {
    font-size: 21px;
    font-weight: 500;
    color: var(--o-ink);
    letter-spacing: -.5px;
    margin-top: 12px;
}
.f-page .f-days-sub { font-size: 11px; color: var(--o-mute); margin-top: 2px; }
.f-page .f-days-dots {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-top: 14px;
}
.f-page .f-days-dots i {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--o-line);
    display: block;
}
.f-page .f-days-dots i.on { background: var(--o-blue); }

/* ── Margin, where the stocks line sits ──────────────────────────────── */

.f-page .f-stocks { grid-column: span 4; }
.f-page .f-stocks-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.f-page .f-stocks-fig {
    font-size: 23px;
    font-weight: 500;
    color: var(--o-ink);
    letter-spacing: -.6px;
    font-variant-numeric: tabular-nums;
}
.f-page .f-wave { width: 100%; height: 52px; display: block; margin: 12px 0 6px; }
.f-page .f-stocks-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.f-page .f-stocks-foot b { display: block; font-size: 12.5px; font-weight: 500; color: var(--o-ink); }
.f-page .f-stocks-foot span { display: block; font-size: 10.5px; color: var(--o-mute); }
.f-page .f-badge {
    background: var(--o-green-s);
    color: #17814A;
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.f-page .f-badge.is-down { background: var(--o-red-s); color: #B23A3A; }

/* ── Concentric queue ────────────────────────────────────────────────── */

.f-page .f-rings { grid-column: span 3; }
.f-page .f-rings-stage {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: 10px 0 12px;
}
.f-page .f-ring-band {
    position: absolute;
    bottom: 0;
    border-radius: 50%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 7px;
}
.f-page .f-ring-band span {
    font-size: 12px;
    font-weight: 600;
    color: #FFFFFF;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.f-page .f-rings-key { display: flex; flex-direction: column; gap: 5px; }
.f-page .f-rings-key span {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: var(--o-body);
}
.f-page .f-rings-key i { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* ── Activity manager ────────────────────────────────────────────────── */

.f-page .f-activity { grid-column: span 5; }
.f-page .f-tile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--o-ink);
}
.f-page .f-chips { display: flex; gap: 6px; }
.f-page .f-chip-sm {
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 11px;
    background: var(--o-sunk);
    color: var(--o-body);
    white-space: nowrap;
}
.f-page .f-chip-sm.is-on { background: var(--o-blue); color: #FFFFFF; }

.f-page .f-act-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.f-page .f-sub {
    background: var(--o-sunk);
    border-radius: 15px;
    padding: 14px;
    min-width: 0;
}
.f-page .f-sub-title { font-size: 12.5px; font-weight: 500; color: var(--o-ink); margin-bottom: 9px; }
.f-page .f-sub-fig {
    font-size: 21px;
    font-weight: 500;
    color: var(--o-ink);
    letter-spacing: -.5px;
}
.f-page .f-sub-fig em { font-style: normal; font-size: 11px; color: var(--o-mute); }

.f-page .f-wavebars { display: flex; align-items: flex-end; gap: 4px; height: 58px; margin-top: 12px; }
.f-page .f-wavebars i {
    flex: 1;
    border-radius: 99px;
    background: rgba(37, 117, 252, .32);
    min-height: 6px;
    display: block;
}
.f-page .f-wavebars i.on { background: var(--o-blue); }
.f-page .f-sub-foot { display: flex; gap: 4px; margin-top: 7px; }
.f-page .f-sub-foot span { flex: 1; text-align: center; font-size: 9.5px; color: var(--o-mute); }

.f-page .f-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 0;
    font-size: 12.5px;
    color: var(--o-ink);
}
.f-page .f-link + .f-link { border-top: 1px solid var(--o-line-s); }
.f-page .f-link > i:last-child { margin-left: auto; color: var(--o-faint); }
.f-page .f-link-icon {
    width: 28px; height: 28px;
    border-radius: 9px;
    background: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: var(--o-blue); flex: none;
}

.f-page .f-verify { text-align: center; }
.f-page .f-verify p { font-size: 11px; color: var(--o-mute); line-height: 1.5; margin: 0; }
.f-page .f-burst {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--o-blue-s);
    color: var(--o-blue);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 21px;
    margin-bottom: 10px;
}
.f-page .f-burst.is-done { background: var(--o-green-s); color: var(--o-green); }

/* ── Due this week ───────────────────────────────────────────────────── */

.f-page .f-week-due { grid-column: span 3; }
.f-page .f-due { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.f-page .f-due + .f-due { border-top: 1px solid var(--o-line-s); }
.f-page .f-due b { display: block; font-size: 12.5px; font-weight: 500; color: var(--o-ink); }
.f-page .f-due span { display: block; font-size: 10.5px; color: var(--o-mute); }
.f-page .f-due em {
    font-style: normal;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--o-green);
    white-space: nowrap;
}
.f-page .f-empty { font-size: 12px; color: var(--o-mute); padding: 14px 0; }

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 1500px) {
    .f-page .f-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .f-page .f-rail { display: none; }
    .f-page .f-account { grid-column: span 3; grid-row: auto; }
    .f-page .f-money, .f-page .f-days, .f-page .f-rings, .f-page .f-week-due { grid-column: span 3; }
    .f-page .f-lock, .f-page .f-disc { grid-column: span 3; }
    .f-page .f-stocks, .f-page .f-activity { grid-column: span 6; }
}
@media (max-width: 860px) {
    .f-page .f-grid { grid-template-columns: minmax(0, 1fr); }
    .f-page .f-grid > * { grid-column: span 1 !important; }
    .f-page .f-act-grid { grid-template-columns: minmax(0, 1fr); }
    .f-page .f-hello { text-align: left; }
    .f-page .f-mic { margin-left: 0; }
}