@font-face {
    font-family: "MontBold";
    src: url("../fonts/Mont-Bold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "MontRegular";
    src: url("../fonts/Mont-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

* { box-sizing: border-box; }

html,
body {
    margin: 0;
    min-height: 100%;
    overflow: hidden;
    font-family: "MontRegular", Arial, Helvetica, sans-serif;
    background: #071d2f;
}

.custom-tv-shell {
    position: relative;
    width: 100vw;
    height: 100vh;
    padding: clamp(18px, 2.2vw, 34px);
    background-size: cover;
    background-position: center;
    color: #ffffff;
    overflow: hidden;
}

.custom-tv-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at top left, rgba(5, 169, 215, .18), transparent 34vw),
        radial-gradient(circle at bottom right, rgba(255, 102, 51, .16), transparent 30vw);
}

.custom-dashboard-stage {
    position: relative;
    z-index: 1;
    height: calc(100vh - clamp(18px, 2.2vw, 34px) * 2 - 34px);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(var(--custom-total-rows, 10), minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: var(--custom-gap, 12px);
    overflow: hidden;
}

.custom-widget {
    display: grid;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
}

.custom-widget.has-shadow {
    box-shadow: 0 22px 70px rgba(0,0,0,.28);
}

.custom-widget-content {
    display: grid;
    place-content: center;
    gap: .18em;
    min-height: 0;
    height: 100%;
    width: 100%;
    padding: clamp(12px, 1.6vw, 26px);
    line-height: 1.06;
    overflow: hidden;
}

.custom-widget[data-widget-type="image"] .custom-widget-content,
.custom-widget[data-widget-type="iframe"] .custom-widget-content {
    padding: 10px;
}

.custom-widget-title {
    margin: 0 0 .25em;
    font-size: .4em;
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .72;
    font-family: "MontBold", Arial, sans-serif;
}

.custom-text-content,
.custom-kpi-value,
.custom-clock-time {
    font-family: "MontBold", Arial, sans-serif;
    letter-spacing: -.045em;
}

.custom-kpi-value {
    font-size: 1em;
    line-height: .9;
}

.custom-kpi-label,
.custom-clock-date,
.custom-link-description {
    margin: 0;
    font-size: .45em;
    line-height: 1.25;
    opacity: .78;
}

.custom-widget small {
    font-size: .36em;
    line-height: 1.25;
    opacity: .72;
}

.custom-image-box,
.custom-iframe-box {
    width: 100%;
    height: 100%;
    min-height: 72px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 18px;
    background: rgba(15, 23, 42, .08);
}

.custom-image-box img,
.custom-iframe-box iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.custom-iframe-box iframe {
    background: #ffffff;
}

.custom-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: max-content;
    max-width: 100%;
    padding: .5em .85em;
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.34);
    font-size: .58em;
    font-family: "MontBold", Arial, sans-serif;
}

.custom-empty-widget {
    grid-column: 1 / -1;
    align-self: center;
    justify-self: center;
    width: min(680px, 100%);
    padding: 34px;
    border-radius: 28px;
    background: rgba(255,255,255,.92);
    color: #0f172a;
    text-align: center;
    box-shadow: 0 24px 70px rgba(0,0,0,.24);
}

.custom-empty-widget h1 {
    margin: 0 0 10px;
    font-family: "MontBold", Arial, sans-serif;
}

.custom-empty-widget p {
    margin: 0;
    color: #64748b;
}

.custom-dashboard-footer {
    position: relative;
    z-index: 2;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    color: rgba(255,255,255,.68);
    font-size: 12px;
    letter-spacing: .02em;
}

.back-hotspot,
.fullscreen-hotspot {
    position: fixed;
    z-index: 20;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.26);
    background: rgba(7,29,47,.28);
    color: rgba(255,255,255,.74);
    text-decoration: none;
    opacity: .22;
    transition: opacity .2s ease, background .2s ease;
    cursor: pointer;
}

.back-hotspot {
    left: 14px;
    top: 14px;
}

.fullscreen-hotspot {
    right: 14px;
    top: 14px;
}

.back-hotspot:hover,
.fullscreen-hotspot:hover {
    opacity: 1;
    background: rgba(7,29,47,.82);
}

.preview-ribbon {
    position: fixed;
    z-index: 30;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    color: #0f172a;
    font-family: "MontBold", Arial, sans-serif;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

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

    .custom-tv-shell {
        min-height: 100vh;
        height: auto;
        overflow: visible;
    }

    .custom-dashboard-stage {
        height: auto;
        min-height: 100vh;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        overflow: visible;
    }

    .custom-widget {
        grid-column: 1 / -1 !important;
        grid-row: auto / span 2 !important;
    }
}

/* Phase B UX Premium TV polish ---------------------------------------- */
.custom-tv-shell {
    isolation: isolate;
}

.custom-tv-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.030) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(circle at center, rgba(0,0,0,.7), transparent 78%);
    opacity: .45;
}

.custom-dashboard-stage {
    z-index: 2;
}

.custom-widget {
    position: relative;
    border-color: rgba(255,255,255,.16);
    backdrop-filter: blur(10px);
    transform: translateZ(0);
}

.custom-widget::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,.12), transparent 42%);
    opacity: .52;
}

.custom-widget-content {
    position: relative;
    z-index: 1;
}

.custom-kpi-value,
.custom-clock-time {
    text-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.custom-image-box {
    background: rgba(255,255,255,.08);
}

.custom-dashboard-footer {
    z-index: 3;
    opacity: .78;
}

.preview-ribbon {
    box-shadow: 0 14px 34px rgba(0,0,0,.18);
}

/* Phase B widget pack */
.custom-label-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    max-width: 100%;
    padding: .45em .85em;
    border-radius: 999px;
    font-family: "MontBold", Arial, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.32);
}

.custom-label-pill.tone-success { background: rgba(16,185,129,.24); }
.custom-label-pill.tone-warning { background: rgba(245,158,11,.24); }
.custom-label-pill.tone-danger { background: rgba(239,68,68,.24); }
.custom-label-pill.tone-neutral { background: rgba(100,116,139,.18); }

.custom-alert {
    display: grid;
    gap: .28em;
    width: 100%;
    line-height: 1.08;
}

.custom-alert strong {
    font-family: "MontBold", Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.custom-alert p {
    margin: 0;
    font-size: .58em;
    line-height: 1.22;
    opacity: .88;
}

.custom-progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .7em;
    width: 100%;
}

.custom-progress-head strong {
    font-family: "MontBold", Arial, sans-serif;
    font-size: .7em;
    line-height: 1.12;
}

.custom-progress-head span {
    font-family: "MontBold", Arial, sans-serif;
    font-size: .9em;
}

.custom-progress-track {
    width: 100%;
    height: .28em;
    min-height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(15,23,42,.16);
}

.custom-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: currentColor;
}

.custom-check-list {
    width: 100%;
    display: grid;
    gap: .32em;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.custom-check-list li {
    display: grid;
    grid-template-columns: 1.35em 1fr;
    gap: .4em;
    align-items: start;
    font-size: .62em;
    line-height: 1.18;
}

.custom-check-list span {
    display: inline-grid;
    place-items: center;
    width: 1.2em;
    height: 1.2em;
    border-radius: 999px;
    font-family: "MontBold", Arial, sans-serif;
    background: rgba(255,255,255,.2);
}

.custom-divider-content {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .65em;
}

.custom-divider-content::after {
    content: "";
    height: 1px;
    background: currentColor;
    opacity: .28;
}

.custom-divider-content small {
    grid-column: 1 / -1;
    font-family: "MontBold", Arial, sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .65;
}

.custom-divider-content strong {
    font-family: "MontBold", Arial, sans-serif;
    line-height: 1;
}

.custom-countdown {
    display: grid;
    gap: .08em;
    justify-items: center;
}

.custom-countdown strong {
    font-family: "MontBold", Arial, sans-serif;
    line-height: .95;
    letter-spacing: -.05em;
}

.custom-countdown span {
    font-size: .45em;
    opacity: .75;
}

.custom-widget[data-widget-type="divider"] .custom-widget-content,
.custom-widget[data-widget-type="label"] .custom-widget-content {
    padding: clamp(8px, 1vw, 16px);
}


/* Phase B hotfix: true labels + real badges --------------------------- */
.custom-widget[data-widget-type="label"],
.custom-widget[data-widget-type="badge"] {
    background: transparent !important;
    border-color: transparent !important;
    backdrop-filter: none;
    overflow: visible;
}

.custom-widget[data-widget-type="label"].has-shadow,
.custom-widget[data-widget-type="badge"].has-shadow {
    box-shadow: none;
}

.custom-widget[data-widget-type="label"]::before,
.custom-widget[data-widget-type="badge"]::before {
    display: none;
}

.custom-widget[data-widget-type="label"] .custom-widget-content,
.custom-widget[data-widget-type="badge"] .custom-widget-content {
    padding: 0;
    overflow: visible;
}

.custom-label-text {
    width: 100%;
    font-family: "MontBold", Arial, sans-serif;
    line-height: .96;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-shadow: 0 14px 40px rgba(0,0,0,.28);
}

.custom-badge-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    max-width: 100%;
    padding: .46em .92em;
    border-radius: 999px;
    font-family: "MontBold", Arial, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
    background: rgba(5,169,215,.9);
    border: 1px solid rgba(255,255,255,.32);
    box-shadow: 0 14px 34px rgba(0,0,0,.24);
}

.custom-badge-pill.tone-success { background: rgba(16,185,129,.92); }
.custom-badge-pill.tone-warning { background: rgba(245,158,11,.95); }
.custom-badge-pill.tone-danger { background: rgba(239,68,68,.95); }
.custom-badge-pill.tone-neutral { background: rgba(100,116,139,.92); }

/* Phase B widget pack 02 ------------------------------------------------ */
.custom-qr-wrap,
.custom-video-box,
.custom-mini-table-wrap {
    width: 100%;
    min-height: 0;
}

.custom-qr-wrap {
    display: grid;
    place-items: center;
}

.custom-qr-wrap img {
    width: min(72%, 280px);
    aspect-ratio: 1;
    object-fit: contain;
    padding: .32em;
    border-radius: .55em;
    background: #fff;
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

.custom-qr-label {
    display: block;
    margin-top: .45em;
    font-family: "MontBold", Arial, sans-serif;
    line-height: 1;
}

.custom-weather {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .6em;
    width: 100%;
}

.custom-weather-icon {
    display: grid;
    place-items: center;
    width: 1.65em;
    height: 1.65em;
    border-radius: 999px;
    font-size: 1.15em;
    background: rgba(5,169,215,.14);
}

.custom-weather strong {
    display: block;
    font-family: "MontBold", Arial, sans-serif;
    font-size: 1.45em;
    line-height: .92;
}

.custom-weather p,
.custom-weather-meta {
    margin: 0;
    font-size: .55em;
    opacity: .78;
    line-height: 1.2;
}

.custom-weather-meta {
    width: 100%;
    margin-top: .45em;
    font-family: "MontBold", Arial, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.custom-widget[data-widget-type="video"] .custom-widget-content,
.custom-widget[data-widget-type="qr"] .custom-widget-content,
.custom-widget[data-widget-type="table"] .custom-widget-content {
    padding: clamp(12px, 1.25vw, 22px);
}

.custom-video-box {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 120px;
    overflow: hidden;
    border-radius: 18px;
    background: rgba(0,0,0,.22);
}

.custom-video-box iframe,
.custom-video-box video {
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.custom-video-box span,
.custom-qr-wrap span {
    font-size: .7em;
    opacity: .7;
}

.custom-ticker {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .8em;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.custom-ticker strong {
    padding: .42em .7em;
    border-radius: 999px;
    font-family: "MontBold", Arial, sans-serif;
    font-size: .74em;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: rgba(255,255,255,.16);
}

.custom-ticker div {
    overflow: hidden;
}

.custom-ticker span {
    display: inline-block;
    min-width: 100%;
    padding-left: 100%;
    animation: customTicker var(--ticker-speed, 28s) linear infinite;
}

@keyframes customTicker {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

.custom-mini-table-wrap {
    overflow: hidden;
}

.custom-mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .55em;
    line-height: 1.25;
}

.custom-mini-table th,
.custom-mini-table td {
    padding: .48em .6em;
    border-bottom: 1px solid rgba(100,116,139,.18);
    text-align: left;
}

.custom-mini-table th {
    font-family: "MontBold", Arial, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .72;
}

.custom-status-grid {
    display: grid;
    width: 100%;
    gap: .42em;
}

.custom-status-grid > div {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .55em;
    padding: .45em .55em;
    border-radius: .65em;
    background: rgba(255,255,255,.09);
}

.custom-status-grid span {
    width: .72em;
    height: .72em;
    border-radius: 999px;
    background: rgba(148,163,184,.9);
    box-shadow: 0 0 16px currentColor;
}

.custom-status-grid strong {
    font-family: "MontBold", Arial, sans-serif;
    font-size: .68em;
    line-height: 1;
}

.custom-status-grid em {
    font-style: normal;
    font-size: .48em;
    opacity: .72;
    text-transform: uppercase;
}

.custom-status-grid .status-ok span { background: #10b981; color: #10b981; }
.custom-status-grid .status-warning span { background: #f59e0b; color: #f59e0b; }
.custom-status-grid .status-danger span { background: #ef4444; color: #ef4444; }

.custom-corporate-banner {
    display: grid;
    align-content: center;
    gap: .18em;
    width: 100%;
    min-height: 100%;
    padding-left: .85em;
    border-left: .22em solid var(--banner-accent, #ff6633);
}

.custom-corporate-banner small {
    font-family: "MontBold", Arial, sans-serif;
    font-size: .34em;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--banner-accent, #ff6633);
    opacity: .95;
}

.custom-corporate-banner strong {
    font-family: "MontBold", Arial, sans-serif;
    line-height: .98;
    letter-spacing: -.035em;
}

.custom-corporate-banner span {
    font-size: .48em;
    opacity: .7;
}

/* Weather Pro fixed-coordinate live data */
.custom-weather-details,
.builder-weather-details {
    display: grid;
    gap: 4px;
    margin-top: 8px;
}

.custom-weather-details small,
.builder-weather-details small {
    display: block;
}

.custom-weather [data-weather-temp] {
    letter-spacing: -0.04em;
}

/* Phase B widget pack 03 ------------------------------------------------ */
.custom-widget[data-widget-type="incident_counter"] .custom-widget-content,
.custom-widget[data-widget-type="safety_score"] .custom-widget-content,
.custom-widget[data-widget-type="emergency_contacts"] .custom-widget-content,
.custom-widget[data-widget-type="last_updated"] .custom-widget-content {
    padding: clamp(12px, 1.35vw, 24px);
}

.custom-incident-counter,
.custom-safety-score,
.custom-emergency-contacts,
.custom-last-updated {
    width: 100%;
}

.custom-incident-counter {
    display: grid;
    place-items: center;
    gap: .08em;
    min-height: 100%;
    text-align: center;
}

.custom-incident-value {
    font-family: "MontBold", Arial, sans-serif;
    font-size: 1.9em;
    line-height: .82;
    letter-spacing: -.07em;
}

.custom-incident-unit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .28em .62em;
    border-radius: 999px;
    font-family: "MontBold", Arial, sans-serif;
    font-size: .34em;
    letter-spacing: .18em;
    background: rgba(255,255,255,.16);
}

.custom-incident-counter strong {
    margin-top: .22em;
    font-family: "MontBold", Arial, sans-serif;
    font-size: .46em;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.custom-incident-counter small {
    font-size: .32em;
}

.custom-safety-score {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .8em;
    min-height: 100%;
}

.custom-score-ring {
    --ring-color: #10b981;
    display: grid;
    place-items: center;
    width: 3.25em;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(var(--ring-color) calc(var(--score, 0) * 1%), rgba(148,163,184,.18) 0);
    position: relative;
    box-shadow: inset 0 0 0 .08em rgba(255,255,255,.24);
}

.custom-score-ring::before {
    content: "";
    position: absolute;
    inset: .34em;
    border-radius: inherit;
    background: rgba(255,255,255,.92);
}

.custom-score-ring span,
.custom-score-ring em {
    position: relative;
    z-index: 1;
    color: #06162a;
}

.custom-score-ring span {
    font-family: "MontBold", Arial, sans-serif;
    font-size: .9em;
    letter-spacing: -.05em;
}

.custom-score-ring em {
    align-self: end;
    margin-top: -1.2em;
    font-style: normal;
    font-size: .28em;
    opacity: .62;
}

.custom-safety-score.tone-warning .custom-score-ring { --ring-color: #f59e0b; }
.custom-safety-score.tone-danger .custom-score-ring { --ring-color: #ef4444; }
.custom-safety-score.tone-info .custom-score-ring { --ring-color: #05a9d7; }
.custom-safety-score.tone-neutral .custom-score-ring { --ring-color: #64748b; }

.custom-score-copy {
    display: grid;
    gap: .15em;
    min-width: 0;
}

.custom-score-copy strong {
    font-family: "MontBold", Arial, sans-serif;
    font-size: .72em;
    line-height: 1;
}

.custom-score-copy p {
    margin: 0;
    width: max-content;
    max-width: 100%;
    padding: .32em .65em;
    border-radius: 999px;
    font-family: "MontBold", Arial, sans-serif;
    font-size: .4em;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: rgba(16,185,129,.14);
    color: #047857;
}

.custom-safety-score.tone-warning .custom-score-copy p { background: rgba(245,158,11,.16); color: #fbbf24; }
.custom-safety-score.tone-danger .custom-score-copy p { background: rgba(239,68,68,.14); color: #fca5a5; }
.custom-safety-score.tone-info .custom-score-copy p { background: rgba(5,169,215,.14); color: #67e8f9; }
.custom-safety-score.tone-neutral .custom-score-copy p { background: rgba(100,116,139,.14); color: #cbd5e1; }

.custom-score-copy small {
    font-size: .38em;
}

.custom-emergency-contacts {
    display: grid;
    gap: .46em;
}

.custom-emergency-contacts > strong {
    font-family: "MontBold", Arial, sans-serif;
    font-size: .72em;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.custom-emergency-contacts > div {
    display: grid;
    grid-template-columns: 1.1fr 1fr auto;
    align-items: center;
    gap: .6em;
    padding: .48em .58em;
    border-radius: .7em;
    background: rgba(255,255,255,.1);
}

.custom-emergency-contacts span,
.custom-emergency-contacts b {
    font-family: "MontBold", Arial, sans-serif;
    font-size: .54em;
    line-height: 1.1;
}

.custom-emergency-contacts em {
    font-style: normal;
    font-size: .46em;
    opacity: .72;
}

.custom-emergency-contacts b {
    color: #67e8f9;
    justify-self: end;
}

.custom-last-updated {
    display: grid;
    place-items: center;
    gap: .05em;
    min-height: 100%;
    text-align: center;
}

.custom-last-updated small,
.custom-last-updated span {
    font-size: .42em;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .72;
}

.custom-last-updated strong {
    font-family: "MontBold", Arial, sans-serif;
    font-size: 1em;
    line-height: .95;
}

/* Phase B Widget Pack 03B: remaining HSSE corporate widgets */
.custom-widget[data-widget-type="shift_info"] .custom-widget-content,
.custom-widget[data-widget-type="vessel_info"] .custom-widget-content,
.custom-widget[data-widget-type="traffic_light"] .custom-widget-content,
.custom-widget[data-widget-type="announcement_card"] .custom-widget-content {
    min-height: 100%;
}

.custom-shift-info,
.custom-vessel-info,
.custom-traffic-light,
.custom-announcement-card {
    width: 100%;
    min-height: 100%;
}

.custom-shift-info,
.custom-vessel-info {
    display: grid;
    gap: .46em;
    align-content: center;
}

.custom-shift-info small,
.custom-vessel-info small,
.custom-announcement-card small {
    font-size: .38em;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .72;
    font-family: "MontBold", Arial, sans-serif;
}

.custom-shift-info > strong,
.custom-vessel-info > strong,
.custom-announcement-card > strong {
    font-family: "MontBold", Arial, sans-serif;
    font-size: .88em;
    line-height: 1.04;
}

.custom-shift-info > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7em;
    padding: .42em .55em;
    border-radius: .7em;
    background: rgba(255,255,255,.1);
}

.custom-shift-info span,
.custom-vessel-info b {
    font-size: .42em;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .64;
    font-family: "MontBold", Arial, sans-serif;
}

.custom-shift-info b,
.custom-vessel-info span strong {
    font-family: "MontBold", Arial, sans-serif;
    font-size: .5em;
    line-height: 1.1;
}

.custom-shift-info p,
.custom-announcement-card p {
    margin: .25em 0 0;
    font-size: .48em;
    line-height: 1.35;
    opacity: .8;
}

.custom-vessel-info p,
.custom-vessel-info em {
    margin: 0;
    font-size: .46em;
    font-style: normal;
    opacity: .74;
}

.custom-vessel-info > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .42em;
    margin-top: .15em;
}

.custom-vessel-info span {
    display: grid;
    gap: .16em;
    padding: .45em .55em;
    border-radius: .7em;
    background: rgba(255,255,255,.1);
}

.custom-traffic-light {
    display: grid;
    place-items: center;
    gap: .4em;
    text-align: center;
}

.custom-traffic-light .traffic-stack {
    display: grid;
    gap: .25em;
    padding: .38em;
    border-radius: 999px;
    background: rgba(15,23,42,.14);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}

.custom-traffic-light .traffic-stack span {
    width: 1.15em;
    height: 1.15em;
    border-radius: 999px;
    background: rgba(100,116,139,.32);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}

.custom-traffic-light.status-red .traffic-stack .red { background: #ef4444; box-shadow: 0 0 1.15em rgba(239,68,68,.65); }
.custom-traffic-light.status-yellow .traffic-stack .yellow { background: #f59e0b; box-shadow: 0 0 1.15em rgba(245,158,11,.65); }
.custom-traffic-light.status-green .traffic-stack .green { background: #10b981; box-shadow: 0 0 1.15em rgba(16,185,129,.65); }
.custom-traffic-light.status-gray .traffic-stack span { background: rgba(100,116,139,.48); }

.custom-traffic-light > strong {
    font-family: "MontBold", Arial, sans-serif;
    font-size: .72em;
    line-height: 1.05;
}

.custom-traffic-light p,
.custom-traffic-light small {
    margin: 0;
    font-size: .44em;
    opacity: .72;
}

.custom-announcement-card {
    display: grid;
    align-content: center;
    gap: .38em;
    padding: .1em;
    position: relative;
}

.custom-announcement-card::before {
    content: "";
    width: 3.2em;
    height: .16em;
    border-radius: 999px;
    background: #05a9d7;
    display: block;
}

.custom-announcement-card.tone-success::before { background: #10b981; }
.custom-announcement-card.tone-warning::before { background: #f59e0b; }
.custom-announcement-card.tone-danger::before { background: #ef4444; }
.custom-announcement-card.tone-neutral::before { background: #94a3b8; }

.custom-announcement-card em {
    font-size: .42em;
    font-style: normal;
    font-family: "MontBold", Arial, sans-serif;
    opacity: .76;
}