.bsf-dashboard {
    --bsf-bg: #050608;
    --bsf-surface: #111318;
    --bsf-surface-soft: #181b22;
    --bsf-border: rgba(235, 192, 118, 0.24);
    --bsf-border-soft: rgba(255, 255, 255, 0.08);
    --bsf-text: #f8f2e5;
    --bsf-muted: #a7aab2;
    --bsf-gold: #ebc076;
    --bsf-gold-strong: #ffd56f;
    --bsf-green: #2fe38a;
    --bsf-red: #ff6678;
    --bsf-blue: #86b7ff;
    background:
        radial-gradient(circle at top left, rgba(47, 227, 138, 0.13), transparent 32%),
        linear-gradient(160deg, #050608 0%, #0c1015 48%, #050608 100%);
    color: var(--bsf-text);
    font-family: Inter, Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin: 0 auto;
    max-width: 430px;
    min-height: 100%;
    overflow: hidden;
    padding: 22px 14px 26px;
}

.bsf-dashboard *,
.bsf-dashboard *::before,
.bsf-dashboard *::after {
    box-sizing: border-box;
}

.bsf-dashboard h2,
.bsf-dashboard h3,
.bsf-dashboard p {
    margin: 0;
}

.bsf-dashboard__header {
    align-items: center;
    display: flex;
    gap: 12px;
    grid-area: header;
    justify-content: space-between;
    margin-bottom: 14px;
}

.bsf-dashboard__brand {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.bsf-dashboard__logo,
.bsf-dashboard__mark {
    border: 1px solid var(--bsf-border);
    border-radius: 8px;
    flex: 0 0 42px;
    height: 42px;
    width: 42px;
}

.bsf-dashboard__logo {
    border: 0;
    border-radius: 0;
    display: block;
    filter: drop-shadow(0 0 14px rgba(235, 192, 118, 0.2));
    flex: 0 0 auto;
    height: auto;
    max-height: 90px;
    object-fit: contain;
    width: clamp(96px, 28vw, 126px);
}

.bsf-dashboard__mark {
    align-items: center;
    background: #101217;
    color: var(--bsf-gold);
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    justify-content: center;
}

.bsf-dashboard__eyebrow {
    color: var(--bsf-gold);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.bsf-dashboard h2 {
    color: var(--bsf-text);
    font-size: 24px;
    font-weight: 850;
    line-height: 1.08;
}

.bsf-status-pill {
    align-items: center;
    border: 1px solid var(--bsf-border-soft);
    border-radius: 999px;
    color: var(--bsf-muted);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 800;
    gap: 7px;
    line-height: 1;
    padding: 9px 10px;
    text-transform: uppercase;
}

.bsf-status-pill span {
    border-radius: 999px;
    display: inline-block;
    height: 8px;
    width: 8px;
}

.bsf-status-pill--live {
    background: rgba(47, 227, 138, 0.1);
    border-color: rgba(47, 227, 138, 0.32);
    color: var(--bsf-green);
}

.bsf-status-pill--live span {
    background: var(--bsf-green);
    box-shadow: 0 0 14px rgba(47, 227, 138, 0.75);
}

.bsf-status-pill--stale {
    background: rgba(255, 213, 111, 0.08);
    border-color: rgba(255, 213, 111, 0.26);
    color: var(--bsf-gold-strong);
}

.bsf-status-pill--stale span {
    background: var(--bsf-gold-strong);
}

.bsf-status-pill--offline {
    background: rgba(255, 102, 120, 0.08);
    border-color: rgba(255, 102, 120, 0.26);
    color: var(--bsf-red);
}

.bsf-status-pill--offline span {
    background: var(--bsf-red);
}

.bsf-total-panel,
.bsf-section {
    background: linear-gradient(180deg, rgba(24, 27, 34, 0.94), rgba(12, 14, 18, 0.94));
    border: 1px solid var(--bsf-border);
    border-radius: 8px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
}

.bsf-total-panel {
    grid-area: total;
    margin-bottom: 10px;
    padding: 16px;
}

.bsf-total-panel p,
.bsf-section__heading span,
.bsf-section__note,
.bsf-account-metric span,
.bsf-period-card span,
.bsf-period-card small,
.bsf-trade span,
.bsf-dashboard__footnote {
    color: var(--bsf-muted);
}

.bsf-total-panel p,
.bsf-account-metric span,
.bsf-period-card span,
.bsf-section__heading span {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.bsf-total-panel strong {
    display: block;
    font-size: 34px;
    font-weight: 900;
    line-height: 1.08;
    margin-top: 6px;
    overflow-wrap: anywhere;
}

.bsf-total-panel__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.bsf-total-panel__meta span {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--bsf-border-soft);
    border-radius: 999px;
    color: var(--bsf-text);
    font-size: 12px;
    font-weight: 700;
    padding: 7px 10px;
}

.bsf-period-grid {
    display: grid;
    gap: 8px;
    grid-area: periods;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 10px;
}

.bsf-period-card {
    background: rgba(17, 19, 24, 0.92);
    border: 1px solid var(--bsf-border-soft);
    border-radius: 8px;
    min-height: 98px;
    padding: 11px 9px;
}

.bsf-period-card strong {
    display: block;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.18;
    margin: 8px 0 7px;
    overflow-wrap: anywhere;
}

.bsf-period-card small {
    display: block;
    font-size: 11px;
    line-height: 1.2;
}

.bsf-section {
    margin-top: 10px;
    padding: 14px;
}

.bsf-section--account {
    grid-area: account;
}

.bsf-section--monthly {
    grid-area: monthly;
}

.bsf-section--calendar {
    grid-area: calendar;
}

.bsf-section--trades {
    grid-area: trades;
}

.bsf-section__heading {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.bsf-section h3 {
    color: var(--bsf-text);
    font-size: 16px;
    font-weight: 850;
    line-height: 1.2;
}

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

.bsf-account-metric {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--bsf-border-soft);
    border-radius: 8px;
    min-height: 72px;
    padding: 10px;
}

.bsf-account-metric strong {
    display: block;
    font-size: 16px;
    font-weight: 850;
    line-height: 1.18;
    margin-top: 7px;
    overflow-wrap: anywhere;
}

.bsf-month-strip {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bsf-month-chip {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--bsf-border-soft);
    border-radius: 8px;
    min-height: 88px;
    overflow: hidden;
    padding: 10px;
    position: relative;
}

.bsf-month-chip span,
.bsf-month-chip strong {
    display: block;
    position: relative;
    z-index: 1;
}

.bsf-month-chip span {
    color: var(--bsf-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.bsf-month-chip strong {
    font-size: 14px;
    font-weight: 900;
    line-height: 1.18;
    margin-top: 9px;
    overflow-wrap: anywhere;
}

.bsf-month-chip i {
    background: currentColor;
    border-radius: 999px;
    bottom: 9px;
    display: block;
    height: 3px;
    left: 10px;
    max-width: calc(100% - 20px);
    opacity: 0.72;
    position: absolute;
    width: var(--bsf-bar-width, 8%);
}

.bsf-section__note {
    font-size: 12px;
    line-height: 1.45;
    margin-top: 11px;
}

.bsf-calendar {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.bsf-calendar__weekday {
    color: var(--bsf-gold);
    font-size: 10px;
    font-weight: 850;
    text-align: center;
    text-transform: uppercase;
}

.bsf-calendar__day {
    align-items: center;
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--bsf-border-soft);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 4px 2px;
}

.bsf-calendar__day b {
    color: var(--bsf-text);
    font-size: 12px;
    font-weight: 850;
    line-height: 1;
}

.bsf-calendar__day em {
    font-size: 10px;
    font-style: normal;
    font-weight: 850;
    line-height: 1.1;
    margin-top: 5px;
    max-width: 100%;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bsf-calendar__day--positive,
.bsf-week-chip--positive,
.bsf-month-chip--positive,
.bsf-period-card--positive,
.bsf-account-metric--positive,
.bsf-trade--positive,
.bsf-total-panel .positive {
    color: var(--bsf-green);
}

.bsf-calendar__day--positive {
    background: rgba(47, 227, 138, 0.12);
    border-color: rgba(47, 227, 138, 0.45);
}

.bsf-calendar__day--negative,
.bsf-week-chip--negative,
.bsf-month-chip--negative,
.bsf-period-card--negative,
.bsf-account-metric--negative,
.bsf-trade--negative,
.bsf-total-panel .negative {
    color: var(--bsf-red);
}

.bsf-calendar__day--negative {
    background: rgba(255, 102, 120, 0.1);
    border-color: rgba(255, 102, 120, 0.38);
}

.bsf-calendar__day--future {
    opacity: 0.45;
}

.bsf-calendar__day--empty {
    background: transparent;
    border-color: transparent;
}

.bsf-week-strip {
    display: flex;
    gap: 7px;
    margin-top: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.bsf-week-chip {
    background: rgba(255, 213, 111, 0.08);
    border: 1px solid rgba(255, 213, 111, 0.2);
    border-radius: 8px;
    color: var(--bsf-gold-strong);
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 850;
    min-width: 70px;
    padding: 8px 9px;
    text-align: center;
}

.bsf-week-chip strong {
    display: block;
    font-size: 12px;
    margin-top: 3px;
}

.bsf-trade-list {
    display: grid;
    gap: 8px;
}

.bsf-trade {
    align-items: center;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--bsf-border-soft);
    border-radius: 8px;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    min-height: 58px;
    padding: 10px;
}

.bsf-trade strong,
.bsf-trade span {
    display: block;
}

.bsf-trade strong {
    color: var(--bsf-text);
    font-size: 14px;
    font-weight: 900;
}

.bsf-trade span {
    font-size: 12px;
    line-height: 1.35;
    margin-top: 3px;
}

.bsf-trade b {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 900;
    max-width: 42%;
    overflow-wrap: anywhere;
    text-align: right;
}

.bsf-dashboard__footnote {
    font-size: 12px;
    grid-area: footnote;
    line-height: 1.45;
    margin-top: 14px;
    text-align: center;
}

.bsf-dashboard--empty {
    border-radius: 8px;
    min-height: 180px;
}

.bsf-dashboard--empty h2 {
    margin-bottom: 10px;
}

.bsf-dashboard--empty p {
    color: var(--bsf-muted);
    line-height: 1.5;
}

@media (min-width: 420px) and (max-width: 719px) {
    .bsf-dashboard {
        padding: 24px 16px 28px;
    }

    .bsf-total-panel strong {
        font-size: 36px;
    }
}

@media (min-width: 720px) {
    .bsf-dashboard {
        border-radius: 8px;
        display: grid;
        gap: 12px;
        grid-template-areas:
            "header header header header header header"
            "total total total periods periods periods"
            "account account account monthly monthly monthly"
            "calendar calendar calendar calendar calendar calendar"
            "trades trades trades trades trades trades"
            "footnote footnote footnote footnote footnote footnote";
        grid-template-columns: repeat(6, minmax(0, 1fr));
        margin-bottom: 24px;
        margin-top: 24px;
        max-width: 760px;
        padding: 26px 20px 30px;
    }

    .bsf-dashboard__header,
    .bsf-total-panel,
    .bsf-period-grid,
    .bsf-section,
    .bsf-dashboard__footnote {
        margin: 0;
    }

    .bsf-dashboard h2 {
        font-size: 26px;
    }

    .bsf-section,
    .bsf-total-panel {
        padding: 16px;
    }

    .bsf-period-grid {
        align-self: stretch;
    }

    .bsf-period-card {
        min-height: 104px;
    }

    .bsf-calendar {
        gap: 7px;
    }
}

@media (max-width: 374px) {
    .bsf-dashboard {
        padding-left: 10px;
        padding-right: 10px;
    }

    .bsf-dashboard h2 {
        font-size: 21px;
    }

    .bsf-status-pill {
        padding-left: 8px;
        padding-right: 8px;
    }

    .bsf-total-panel strong {
        font-size: 28px;
    }

    .bsf-period-card {
        padding-left: 7px;
        padding-right: 7px;
    }

    .bsf-period-card strong,
    .bsf-month-chip strong {
        font-size: 13px;
    }
}

@media (min-width: 1180px) {
    .bsf-dashboard {
        gap: 14px;
        grid-template-areas:
            "header header header header header header header header header header header header"
            "total total total total total periods periods periods periods periods periods periods"
            "account account account account monthly monthly monthly monthly monthly monthly monthly monthly"
            "calendar calendar calendar calendar calendar calendar calendar calendar trades trades trades trades"
            "footnote footnote footnote footnote footnote footnote footnote footnote footnote footnote footnote footnote";
        grid-template-columns: repeat(12, minmax(0, 1fr));
        max-width: 1180px;
        padding: 28px 24px 32px;
    }

    .bsf-dashboard h2 {
        font-size: 28px;
    }

    .bsf-total-panel strong {
        font-size: 42px;
    }

    .bsf-period-card strong {
        font-size: 17px;
    }

    .bsf-section h3 {
        font-size: 17px;
    }

    .bsf-calendar {
        gap: 8px;
    }

    .bsf-calendar__day b {
        font-size: 13px;
    }

    .bsf-calendar__day em {
        font-size: 11px;
    }
}

@media (min-width: 1400px) {
    .bsf-dashboard {
        max-width: 1280px;
        padding-left: 28px;
        padding-right: 28px;
    }

    .bsf-total-panel,
    .bsf-section {
        padding: 18px;
    }
}

@media (min-width: 1800px) {
    .bsf-dashboard {
        max-width: 1360px;
    }
}