/* Blocspace › Wallet, Members, Messages — shared design language.
 *
 * Same system as the Analytics section: a pale ground, white cards with a
 * hairline border, one dark hero card, Manrope for words and IBM Plex Mono
 * for eyebrows and figures. All three sections render inside
 * #blocspace-modal-content, whose id matches the theme's blanket
 * `[id*="modal"] *` colour rules (!important, black in light, white in dark)
 * plus an !important Oxanium font and a backdrop blur on every button. Every
 * rule here is therefore written as `html body #blocspace-modal-content
 * .bsd-root …` with !important on colour, fill and family, or the theme wins.
 * Tokens flip for the dark themes. Class prefix: bsd- (Blocspace design). */

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root {
    --bsd-card: #FFFFFF;
    --bsd-card2: #FCFCFA;
    --bsd-line: #EAEAE6;
    --bsd-line2: #F1F1ED;
    --bsd-ink: #111214;
    --bsd-ink2: #4E4E4A;
    --bsd-mute: #63635F;
    --bsd-mute2: #70706B;
    --bsd-faint: #A3A3A0;
    --bsd-track: #F4F4F0;
    --bsd-pill: #F1F1ED;
    --bsd-chip: #EFEFEB;
    --bsd-chip2: #DEDED8;
    --bsd-thumb: #F1F1ED;
    --bsd-hero: #111214;
    --bsd-hero-on: #1D1E21;
    --bsd-hero-line: #2A2B2E;
    --bsd-hero-edge: #34353A;
    --bsd-hero-ink: #FBFBF9;
    --bsd-hero-mute: #8B8B85;
    --bsd-hero-soft: #B9B9B3;
    --bsd-mint: #6FE3C6;
    --bsd-teal: #0FBFA4;
    --bsd-teal-ink: #0A6558;
    --bsd-teal-bg: #E4F5F1;
    --bsd-amber: #C2703A;
    --bsd-amber-ink: #8A5426;
    --bsd-amber-bg: #F7EDE2;
    --bsd-red: #A83E29;
    --bsd-red-bg: #FDF6F4;
    --bsd-red-line: #EFDCD7;
    --bsd-bar-lo: #D6D6D0;
    --bsd-bar-mid: #5C5D61;
    --bsd-dash: #D6D6D0;
    --bsd-shadow: 0 1px 2px rgba(17, 18, 20, 0.03);
    --bsd-lift: 0 10px 24px -14px rgba(17, 18, 20, 0.38);
    --bsd-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --bsd-sans: Manrope, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-family: var(--bsd-sans) !important;
    -webkit-font-smoothing: antialiased;
    display: block;
    padding: 2px 4px 28px;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html[data-theme="dark"] body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root,
html[data-theme="dark-accent"] body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root,
body[data-theme="dark"] :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root,
body[data-theme="dark-accent"] :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root {
    --bsd-card: #141517;
    --bsd-card2: #1A1B1E;
    --bsd-line: #26272B;
    --bsd-line2: #1F2023;
    --bsd-ink: #FBFBF9;
    --bsd-ink2: #D6D6D0;
    --bsd-mute: #9A9A94;
    --bsd-mute2: #8B8B85;
    --bsd-faint: #5C5D61;
    --bsd-track: #232428;
    --bsd-pill: #1F2023;
    --bsd-chip: #26272B;
    --bsd-chip2: #33343A;
    --bsd-thumb: #1F2023;
    --bsd-hero: #1A1B1E;
    --bsd-hero-on: #26272B;
    --bsd-hero-line: #33343A;
    --bsd-hero-edge: #45464C;
    --bsd-teal-bg: #0F2A25;
    --bsd-teal-ink: #6FE3C6;
    --bsd-amber-bg: #2B1F14;
    --bsd-amber-ink: #E0A874;
    --bsd-red: #F09B84;
    --bsd-red-bg: #2E1712;
    --bsd-red-line: #4A2A22;
    --bsd-bar-lo: #3A3B40;
    --bsd-bar-mid: #8B8B85;
    --bsd-dash: #3A3B40;
    --bsd-shadow: none;
    --bsd-lift: none;
}

/* The theme forces its display face on every element; restate ours weakly
   (:where) so the mono roles below still win. Icons keep their own face. */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root :where(*:not(.fas):not(.fa):not(.far):not(.fab)) {
    font-family: var(--bsd-sans) !important;
}

/* ---- type roles ------------------------------------------------------- */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-eyebrow {
    font-family: var(--bsd-mono) !important;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bsd-mute2) !important;
    -webkit-text-fill-color: var(--bsd-mute2) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-mono {
    font-family: var(--bsd-mono) !important;
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--bsd-mute2) !important;
    -webkit-text-fill-color: var(--bsd-mute2) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-fig {
    font-family: var(--bsd-mono) !important;
    font-size: 13px;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-ink { color: var(--bsd-ink) !important; -webkit-text-fill-color: var(--bsd-ink) !important; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-ink2 { color: var(--bsd-ink2) !important; -webkit-text-fill-color: var(--bsd-ink2) !important; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-mute { color: var(--bsd-mute) !important; -webkit-text-fill-color: var(--bsd-mute) !important; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-teal { color: var(--bsd-teal-ink) !important; -webkit-text-fill-color: var(--bsd-teal-ink) !important; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-red { color: var(--bsd-red) !important; -webkit-text-fill-color: var(--bsd-red) !important; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-title {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-meta {
    font-family: var(--bsd-mono) !important;
    font-size: 10px;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bsd-mute) !important;
    -webkit-text-fill-color: var(--bsd-mute) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-sub {
    font-size: 11.5px;
    font-weight: 500;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bsd-mute) !important;
    -webkit-text-fill-color: var(--bsd-mute) !important;
}

/* ---- buttons are plain boxes ----------------------------------------- */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root button {
    -webkit-appearance: none !important;
    appearance: none !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    font: inherit !important;
    text-align: left;
    cursor: pointer;
    min-height: 0 !important;
    height: auto !important;
    width: auto;
    line-height: normal;
    border-radius: 0 !important;
    color: inherit;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root input {
    -webkit-appearance: none !important;
    appearance: none !important;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

/* The field draws its own clear control; the browser's stays off. */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root input[type="search"]::-webkit-search-cancel-button,
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: none !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root input::placeholder {
    color: var(--bsd-faint) !important;
    -webkit-text-fill-color: var(--bsd-faint) !important;
    opacity: 1;
}

/* ---- pills (segmented control) ---------------------------------------- */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-pills {
    display: flex;
    gap: 4px;
    padding: 3px;
    background: var(--bsd-pill);
    border-radius: 12px;
    min-width: 0;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-pill {
    flex: 1 1 0;
    min-width: 0;
    height: 32px !important;
    border-radius: 10px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: var(--bsd-mute) !important;
    -webkit-text-fill-color: var(--bsd-mute) !important;
    transition: background .16s ease, color .16s ease;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-pill.is-on {
    background: var(--bsd-hero) !important;
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

/* Light variant: the active pill is a white card on the grey tray. */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-pills.is-soft .bsd-pill.is-on {
    background: var(--bsd-card) !important;
    box-shadow: 0 1px 3px rgba(17, 18, 20, 0.10) !important;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-pill .bsd-badge {
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--bsd-mono) !important;
    font-size: 9.5px;
    box-sizing: border-box;
    background: var(--bsd-chip2);
    color: var(--bsd-ink2) !important;
    -webkit-text-fill-color: var(--bsd-ink2) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-pill.is-on .bsd-badge {
    background: var(--bsd-hero);
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

/* ---- chips (filters) and sorts --------------------------------------- */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-chips::-webkit-scrollbar { display: none; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-chip {
    flex: none;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 32px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    white-space: nowrap;
    background: var(--bsd-card) !important;
    border: 1px solid var(--bsd-line) !important;
    color: var(--bsd-ink2) !important;
    -webkit-text-fill-color: var(--bsd-ink2) !important;
    transition: background .16s ease, color .16s ease;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-chip .bsd-count {
    font-family: var(--bsd-mono) !important;
    font-size: 10px;
    color: var(--bsd-mute2) !important;
    -webkit-text-fill-color: var(--bsd-mute2) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-chip.is-on {
    background: var(--bsd-hero) !important;
    border-color: var(--bsd-hero) !important;
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

/* Labels are spans, and the theme's blanket rule paints spans on its own;
   the active chip and pill restate the colour on their children too. */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-chip.is-on > span,
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-pill.is-on > span,
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-sort.is-on > span,
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-btn.is-primary > span,
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-hero-cta > span {
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-pills.is-soft .bsd-pill.is-on > span {
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

/* Labels are spans, and the theme's blanket rule paints spans on its own;
   the active chip and pill restate the colour on their children too. */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-chip.is-on > span,
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-pill.is-on > span,
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-sort.is-on > span,
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-btn.is-primary > span,
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-hero-cta > span {
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-pills.is-soft .bsd-pill.is-on > span {
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-chip.is-on .bsd-count {
    color: #A9B3B0 !important;
    -webkit-text-fill-color: #A9B3B0 !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-sorts { display: flex; gap: 5px; flex: none; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-sort {
    height: 24px !important;
    padding: 0 9px !important;
    border-radius: 8px !important;
    display: flex;
    align-items: center;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    white-space: nowrap;
    background: var(--bsd-card) !important;
    border: 1px solid var(--bsd-line) !important;
    color: var(--bsd-ink2) !important;
    -webkit-text-fill-color: var(--bsd-ink2) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-sort.is-on {
    background: var(--bsd-hero) !important;
    border-color: var(--bsd-hero) !important;
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

/* ---- cards, heads, dividers ------------------------------------------ */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-card {
    background: var(--bsd-card);
    border: 1px solid var(--bsd-line);
    border-radius: 18px;
    box-shadow: var(--bsd-shadow);
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-card.is-list { overflow: hidden; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-card.is-pad { padding: 14px; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 22px 4px 9px;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-head.is-tight { margin: 11px 4px 9px; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-link {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    white-space: nowrap;
    color: var(--bsd-teal-ink) !important;
    -webkit-text-fill-color: var(--bsd-teal-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-rule {
    height: 1px;
    background: var(--bsd-line2);
    margin: 13px 0;
}

/* Sticky filter deck that sits above a list (members, messages). */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-deck {
    padding: 8px 0 12px;
    border-bottom: 1px solid var(--bsd-line2);
    display: grid;
    gap: 12px;
}

/* ---- hero (dark) ------------------------------------------------------ */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-hero {
    padding: 16px;
    border-radius: 22px;
    background: var(--bsd-hero);
    box-shadow: 0 16px 34px -20px rgba(17, 18, 20, 0.66);
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-hero .bsd-eyebrow,
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-hero .bsd-mono,
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-hero .bsd-hero-mute {
    color: var(--bsd-hero-mute) !important;
    -webkit-text-fill-color: var(--bsd-hero-mute) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-hero-soft {
    font-family: var(--bsd-mono) !important;
    font-size: 10px;
    margin-top: 8px;
    color: var(--bsd-hero-soft) !important;
    -webkit-text-fill-color: var(--bsd-hero-soft) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-hero-value {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 0.95;
    font-variant-numeric: tabular-nums;
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-hero-cents {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--bsd-hero-mute) !important;
    -webkit-text-fill-color: var(--bsd-hero-mute) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-hero-unit {
    font-family: var(--bsd-mono) !important;
    font-size: 13px;
    color: var(--bsd-hero-mute) !important;
    -webkit-text-fill-color: var(--bsd-hero-mute) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--bsd-mono) !important;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bsd-mint) !important;
    -webkit-text-fill-color: var(--bsd-mint) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bsd-mint);
    display: inline-block;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-status.is-off {
    color: #E0A874 !important;
    -webkit-text-fill-color: #E0A874 !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-status.is-off i { background: #E0A874; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 15px;
    background: var(--bsd-hero-line);
    border-radius: 14px;
    overflow: hidden;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-kpi {
    min-width: 0;
    padding: 12px;
    background: var(--bsd-hero);
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-kpi-value {
    font-family: var(--bsd-mono) !important;
    font-size: 15px;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-kpi-label {
    font-family: var(--bsd-mono) !important;
    font-size: 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bsd-hero-mute) !important;
    -webkit-text-fill-color: var(--bsd-hero-mute) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-hero-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-hero-cta {
    flex: 1 1 auto;
    height: 46px !important;
    border-radius: 14px !important;
    background: var(--bsd-hero-ink) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--bsd-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bsd-hero) !important;
    -webkit-text-fill-color: var(--bsd-hero) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-hero-icon {
    flex: none;
    width: 46px;
    height: 46px !important;
    border-radius: 14px !important;
    border: 1px solid var(--bsd-hero-edge) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px !important;
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

/* ---- light KPI strip -------------------------------------------------- */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-strip {
    display: flex;
    gap: 1px;
    background: var(--bsd-line);
    border: 1px solid var(--bsd-line);
    border-radius: 14px;
    overflow: hidden;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-strip.is-round { border-radius: 18px; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-strip > div {
    flex: 1 1 0;
    min-width: 0;
    background: var(--bsd-card);
    padding: 11px 10px;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-strip .bsd-strip-value {
    font-family: var(--bsd-mono) !important;
    font-size: 15px;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-strip .bsd-strip-label {
    font-family: var(--bsd-mono) !important;
    font-size: 7.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bsd-mute2) !important;
    -webkit-text-fill-color: var(--bsd-mute2) !important;
}

/* ---- rows -------------------------------------------------------------- */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-row {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 12px 13px !important;
    border-bottom: 1px solid var(--bsd-line2) !important;
    box-sizing: border-box;
    transition: background .14s ease;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-row.is-unread { background: var(--bsd-card2) !important; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-row:last-child,
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-item:last-child > .bsd-row { border-bottom: 0 !important; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-item { border-bottom: 1px solid var(--bsd-line2); }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-item:last-child { border-bottom: 0; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-item > .bsd-row { border-bottom: 0 !important; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-num {
    font-family: var(--bsd-mono) !important;
    font-size: 10px;
    width: 17px;
    flex: none;
    color: var(--bsd-mute) !important;
    -webkit-text-fill-color: var(--bsd-mute) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: var(--bsd-thumb);
    color: var(--bsd-ink2) !important;
    -webkit-text-fill-color: var(--bsd-ink2) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-avatar.is-dark {
    background: var(--bsd-hero);
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-avatar.is-small { width: 36px; height: 36px; border-radius: 11px; font-size: 11px; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-avatar-wrap { position: relative; flex: none; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-presence {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--bsd-card);
    background: var(--bsd-bar-lo);
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-presence.is-on { background: var(--bsd-teal); }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-main { flex: 1 1 auto; min-width: 0; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-side { text-align: right; flex: none; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-side .bsd-mono { display: block; margin-top: 4px; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-title-row { display: flex; align-items: center; gap: 7px; min-width: 0; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-chev {
    font-size: 12px;
    flex: none;
    color: var(--bsd-faint) !important;
    -webkit-text-fill-color: var(--bsd-faint) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: none;
    display: inline-block;
    background: var(--bsd-bar-lo);
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-dot.is-teal { background: var(--bsd-teal); }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-dot.is-amber { background: var(--bsd-amber); }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-dot.is-mid { background: var(--bsd-hero-soft); }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-pip {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--bsd-mono) !important;
    font-size: 9.5px;
    box-sizing: border-box;
    background: var(--bsd-hero);
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

/* ---- tags -------------------------------------------------------------- */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-tag {
    flex: none;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 3px 5px;
    white-space: nowrap;
    background: var(--bsd-chip);
    color: var(--bsd-ink2) !important;
    -webkit-text-fill-color: var(--bsd-ink2) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-tag.is-teal {
    background: var(--bsd-teal-bg);
    color: var(--bsd-teal-ink) !important;
    -webkit-text-fill-color: var(--bsd-teal-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-tag.is-amber {
    background: var(--bsd-amber-bg);
    color: var(--bsd-amber-ink) !important;
    -webkit-text-fill-color: var(--bsd-amber-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-tag.is-red {
    background: var(--bsd-red-bg);
    color: var(--bsd-red) !important;
    -webkit-text-fill-color: var(--bsd-red) !important;
}

/* ---- bars and mixes --------------------------------------------------- */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-track { height: 3px; background: var(--bsd-track); }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-track.is-thin { height: 4px; border-radius: 2px; overflow: hidden; background: var(--bsd-line2); }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-fill { height: 100%; background: var(--bsd-bar-lo); transition: width .22s ease; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-fill.is-hi { background: var(--bsd-teal); }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-fill.is-mid { background: var(--bsd-amber); }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-fill.is-ink { background: var(--bsd-ink); border-radius: 2px; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-mix {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    gap: 1px;
    background: var(--bsd-line2);
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-mix i { display: block; height: 100%; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-mix-list { display: flex; flex-direction: column; gap: 9px; margin-top: 13px; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-mix-row { display: flex; align-items: center; gap: 9px; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-swatch { width: 8px; height: 8px; border-radius: 3px; flex: none; display: inline-block; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-mix-label { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--bsd-ink2) !important; -webkit-text-fill-color: var(--bsd-ink2) !important; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-mix-pct { font-family: var(--bsd-mono) !important; font-size: 9.5px; flex: none; width: 34px; text-align: right; color: var(--bsd-mute) !important; -webkit-text-fill-color: var(--bsd-mute) !important; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .c-ink { background: var(--bsd-ink); }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .c-teal { background: var(--bsd-teal); }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .c-amber { background: var(--bsd-amber); }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .c-grey { background: var(--bsd-bar-lo); }

/* ---- search ------------------------------------------------------------ */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 13px;
    border-radius: 14px;
    background: var(--bsd-card);
    border: 1px solid var(--bsd-line);
    box-shadow: var(--bsd-shadow);
    box-sizing: border-box;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-search > i.fas {
    font-size: 12px;
    flex: none;
    color: var(--bsd-ink2) !important;
    -webkit-text-fill-color: var(--bsd-ink2) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-search input { flex: 1 1 auto; min-width: 0; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-clear {
    flex: none;
    width: 20px;
    height: 20px !important;
    border-radius: 50% !important;
    background: var(--bsd-chip) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px !important;
    color: var(--bsd-ink2) !important;
    -webkit-text-fill-color: var(--bsd-ink2) !important;
}

/* ---- empty, loading, list head --------------------------------------- */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-empty {
    padding: 30px 18px;
    text-align: center;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-empty-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-empty-body {
    font-size: 12px;
    font-weight: 500;
    margin-top: 5px;
    line-height: 1.45;
    text-wrap: pretty;
    color: var(--bsd-mute) !important;
    -webkit-text-fill-color: var(--bsd-mute) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-note {
    padding: 14px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--bsd-mute) !important;
    -webkit-text-fill-color: var(--bsd-mute) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    gap: 14px;
    font-family: Manrope, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-loading i {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 3px solid color-mix(in srgb, var(--text-primary) 12%, transparent);
    border-top-color: var(--text-primary);
    animation: spin 1s linear infinite;
    display: block;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 2px 12px;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-list-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-top: 3px;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-close {
    width: 32px;
    height: 32px !important;
    border-radius: 10px !important;
    border: 1px solid var(--bsd-line) !important;
    background: var(--bsd-card) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px !important;
    flex: none;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

/* ---- action buttons and key/value lists ------------------------------ */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-actions { display: flex; gap: 7px; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-btn {
    flex: 1 1 0;
    height: 38px !important;
    border-radius: 12px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-align: center;
    padding: 0 6px !important;
    box-sizing: border-box;
    white-space: nowrap;
    border: 1px solid var(--bsd-line) !important;
    background: var(--bsd-card2) !important;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-btn.is-wide { flex: 1.6 1 0; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-btn.is-danger {
    border-color: var(--bsd-red-line) !important;
    background: var(--bsd-red-bg) !important;
    color: var(--bsd-red) !important;
    -webkit-text-fill-color: var(--bsd-red) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-btn.is-primary {
    border-color: var(--bsd-hero) !important;
    background: var(--bsd-hero) !important;
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    padding: 14px !important;
    border: 1px dashed var(--bsd-dash) !important;
    border-radius: 16px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    box-sizing: border-box;
    color: var(--bsd-ink2) !important;
    -webkit-text-fill-color: var(--bsd-ink2) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-kv {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 11px;
    background: var(--bsd-line2);
    border-radius: 12px;
    overflow: hidden;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-kv > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--bsd-card);
    padding: 11px 12px;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-kv-label {
    font-size: 12.5px;
    font-weight: 600;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bsd-ink2) !important;
    -webkit-text-fill-color: var(--bsd-ink2) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-kv-value {
    font-family: var(--bsd-mono) !important;
    font-size: 10.5px;
    flex: none;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

/* Expanding subscription card */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-subcard {
    border-radius: 18px;
    background: var(--bsd-card);
    border: 1px solid var(--bsd-line);
    box-shadow: var(--bsd-shadow);
    transition: border-color .16s ease, box-shadow .16s ease;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-subcard.is-open {
    border-color: var(--bsd-ink);
    box-shadow: var(--bsd-lift);
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-subcard-head {
    display: block;
    width: 100%;
    padding: 14px !important;
    box-sizing: border-box;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-price {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-big {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-stack { display: flex; flex-direction: column; gap: 9px; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* ---- messages ---------------------------------------------------------- */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-compose {
    flex: none;
    width: 40px;
    height: 40px !important;
    border-radius: 14px !important;
    background: var(--bsd-hero) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px -12px rgba(17, 18, 20, 0.6) !important;
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-compose i.fas {
    font-size: 13px;
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-preview {
    font-size: 12.5px;
    font-weight: 500;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bsd-mute) !important;
    -webkit-text-fill-color: var(--bsd-mute) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-preview.is-unread {
    font-weight: 700;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-title.is-unread { font-weight: 800; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-arrow {
    font-size: 11px;
    flex: none;
    color: var(--bsd-teal-ink) !important;
    -webkit-text-fill-color: var(--bsd-teal-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-arrow.is-missed {
    color: var(--bsd-red) !important;
    -webkit-text-fill-color: var(--bsd-red) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-round-btn {
    width: 32px;
    height: 32px !important;
    border-radius: 11px !important;
    border: 1px solid var(--bsd-line) !important;
    background: var(--bsd-card2) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-size: 12px !important;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-round-btn i.fas {
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-trash {
    width: 28px;
    height: 28px !important;
    border-radius: 9px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-size: 11px !important;
    color: var(--bsd-faint) !important;
    -webkit-text-fill-color: var(--bsd-faint) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-trash i.fas {
    color: var(--bsd-faint) !important;
    -webkit-text-fill-color: var(--bsd-faint) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-side-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex: none;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-row[role="button"] { cursor: pointer; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-avatar.is-round { border-radius: 50%; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-presence { border-radius: 50%; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-more-btn {
    width: 30px;
    height: 30px !important;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-size: 13px !important;
    color: var(--bsd-mute) !important;
    -webkit-text-fill-color: var(--bsd-mute) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-more-btn i.fas {
    color: var(--bsd-mute) !important;
    -webkit-text-fill-color: var(--bsd-mute) !important;
}

/* ---- Bloc Space header controls ----------------------------------------
   Back and Settings sit in a 36px circle with a hairline, the header control
   from the design files, so they read as buttons in both themes. */
html body #blocspace-modal-content .mobile-blocspace-header-button,
html[data-theme] body #blocspace-modal-content .mobile-blocspace-header-button,
html body[data-theme] #blocspace-modal-content .mobile-blocspace-header-button {
    width: 36px !important;
    height: 36px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 4px !important;
    border-radius: 50% !important;
    border: 1px solid #EAEAE6 !important;
    background: #FFFFFF !important;
    background-image: none !important;
    box-shadow: 0 1px 2px rgba(17, 18, 20, 0.04) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #111214 !important;
    -webkit-text-fill-color: #111214 !important;
    font-size: 14px !important;
    transition: transform .12s ease, border-color .12s ease !important;
}

html body #blocspace-modal-content .mobile-blocspace-header-button i {
    color: #111214 !important;
    -webkit-text-fill-color: #111214 !important;
    font-size: 14px !important;
}

html body #blocspace-modal-content .mobile-blocspace-header-button:active {
    transform: scale(0.94) !important;
    border-color: #111214 !important;
}

html[data-theme="dark"] body #blocspace-modal-content .mobile-blocspace-header-button,
html body[data-theme="dark"] #blocspace-modal-content .mobile-blocspace-header-button,
html[data-theme="dark-accent"] body #blocspace-modal-content .mobile-blocspace-header-button,
html body[data-theme="dark-accent"] #blocspace-modal-content .mobile-blocspace-header-button {
    border-color: #26272B !important;
    background: #141517 !important;
    box-shadow: none !important;
    color: #FBFBF9 !important;
    -webkit-text-fill-color: #FBFBF9 !important;
}

html[data-theme="dark"] body #blocspace-modal-content .mobile-blocspace-header-button i,
html body[data-theme="dark"] #blocspace-modal-content .mobile-blocspace-header-button i,
html[data-theme="dark-accent"] body #blocspace-modal-content .mobile-blocspace-header-button i,
html body[data-theme="dark-accent"] #blocspace-modal-content .mobile-blocspace-header-button i {
    color: #FBFBF9 !important;
    -webkit-text-fill-color: #FBFBF9 !important;
}

/* ---- calendar ---------------------------------------------------------- */
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-month {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
    margin-top: 5px;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-ctl {
    width: 30px;
    height: 30px !important;
    border-radius: 10px !important;
    border: 1px solid var(--bsd-line) !important;
    background: var(--bsd-card) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px !important;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-ctl.is-wide {
    width: auto;
    padding: 0 11px !important;
    font-family: var(--bsd-mono) !important;
    font-size: 9.5px !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-ctl.is-add {
    border-color: var(--bsd-hero) !important;
    background: var(--bsd-hero) !important;
    box-shadow: 0 8px 16px -10px rgba(17, 18, 20, 0.6) !important;
    font-size: 14px !important;
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-dows {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin-top: 2px;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-dows > div {
    text-align: center;
    font-family: var(--bsd-mono) !important;
    font-size: 8.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bsd-mute2) !important;
    -webkit-text-fill-color: var(--bsd-mute2) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    margin-top: -5px;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-cell {
    height: 44px !important;
    border-radius: 11px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    transition: background .14s ease !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-cell.is-today { background: var(--bsd-pill) !important; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-cell.is-on { background: var(--bsd-hero) !important; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-num {
    font-family: var(--bsd-mono) !important;
    font-size: 13.5px;
    line-height: 1;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-cell.is-today .bsd-cal-num { font-weight: 500; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-cell.is-out .bsd-cal-num {
    color: var(--bsd-faint) !important;
    -webkit-text-fill-color: var(--bsd-faint) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-cell.is-on .bsd-cal-num {
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-dots { display: flex; gap: 2px; height: 4px; align-items: center; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-dots i { width: 4px; height: 4px; border-radius: 50%; display: block; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-dots i.c-on { background: var(--bsd-hero-ink); }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-day-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-event {
    display: flex;
    align-items: stretch;
    gap: 11px;
    width: 100%;
    padding: 12px !important;
    background: var(--bsd-card) !important;
    border: 1px solid var(--bsd-line) !important;
    border-radius: 16px !important;
    box-shadow: var(--bsd-shadow) !important;
    box-sizing: border-box;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-rail { width: 3px; border-radius: 2px; flex: none; display: block; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-when { width: 52px; flex: none; text-align: left; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-title.is-done { text-decoration: line-through; opacity: 0.6; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-hour {
    display: flex;
    gap: 10px;
    padding: 9px 13px;
    border-bottom: 1px solid var(--bsd-track);
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-hour:last-child { border-bottom: 0; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-block {
    display: block;
    width: 100%;
    border-radius: 12px !important;
    padding: 9px 11px !important;
    border-left: 3px solid var(--bsd-bar-lo) !important;
    background: var(--bsd-chip) !important;
    box-sizing: border-box;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-block-title {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-block-meta {
    display: block;
    font-family: var(--bsd-mono) !important;
    font-size: 9.5px;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bsd-mute) !important;
    -webkit-text-fill-color: var(--bsd-mute) !important;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-block.is-booking { background: var(--bsd-hero) !important; border-left-color: var(--bsd-hero) !important; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-block.is-booking .bsd-cal-block-title { color: var(--bsd-hero-ink) !important; -webkit-text-fill-color: var(--bsd-hero-ink) !important; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-block.is-booking .bsd-cal-block-meta { color: var(--bsd-hero-mute) !important; -webkit-text-fill-color: var(--bsd-hero-mute) !important; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-block.is-meeting { background: var(--bsd-teal-bg) !important; border-left-color: var(--bsd-teal) !important; }
html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-block.is-task { background: var(--bsd-amber-bg) !important; border-left-color: var(--bsd-amber) !important; }

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-now {
    position: absolute;
    left: 0;
    right: 0;
    top: 14px;
    height: 1.5px;
    background: var(--bsd-red);
    pointer-events: none;
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-now span {
    position: absolute;
    left: -4px;
    top: -3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bsd-red);
}

html body :is(#blocspace-modal-content, #blocspace-calendar-sheet) .bsd-root .bsd-cal-date {
    width: 44px;
    flex: none;
    text-align: center;
    border-right: 1px solid var(--bsd-line2);
    padding: 2px 0;
}

/* ---- calendar detail sheet ---------------------------------------------
   Mounted on <body> so it rides over the tab rail. Position comes from a
   class, not an inline style: the light theme paints every descendant of an
   inline `position: fixed` element black. */
html body #blocspace-calendar-sheet {
    position: fixed;
    inset: 0;
    /* The Bloc Space modal lives near the top of the stacking range; the
       sheet rides just above it, like the members sheet does. */
    z-index: 2147483200;
    pointer-events: none;
}

html body #blocspace-calendar-sheet .bsd-scrim {
    position: absolute;
    inset: 0;
    background: rgba(17, 18, 20, 0.42);
    opacity: 0;
    transition: opacity .22s ease;
}

html body #blocspace-calendar-sheet .bsd-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 28px 28px 0 0;
    background: #FBFBF9;
    box-shadow: 0 -18px 48px -20px rgba(17, 18, 20, 0.5);
    transform: translateY(104%);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
}

html[data-theme="dark"] body #blocspace-calendar-sheet .bsd-sheet,
html body[data-theme="dark"] #blocspace-calendar-sheet .bsd-sheet,
html[data-theme="dark-accent"] body #blocspace-calendar-sheet .bsd-sheet,
html body[data-theme="dark-accent"] #blocspace-calendar-sheet .bsd-sheet {
    background: #0E0F11;
}

html body #blocspace-calendar-sheet.is-open { pointer-events: auto; }
html body #blocspace-calendar-sheet.is-open .bsd-scrim { opacity: 1; }
html body #blocspace-calendar-sheet.is-open .bsd-sheet { transform: translateY(0); }

html body #blocspace-calendar-sheet .bsd-grabber {
    width: 38px;
    height: 4px;
    border-radius: 2px;
    margin: 9px auto 4px;
    background: var(--bsd-chip2, #DEDED8);
}

html body #blocspace-calendar-sheet .bsd-root { padding: 8px 18px 0; }

html body #blocspace-calendar-sheet .bsd-root .bsd-sheet-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin-top: 8px;
    text-wrap: pretty;
    color: var(--bsd-ink) !important;
    -webkit-text-fill-color: var(--bsd-ink) !important;
}

html body #blocspace-calendar-sheet .bsd-root .bsd-sheet-cta {
    width: 100%;
    height: 50px !important;
    margin-top: 12px;
    border-radius: 15px !important;
    background: var(--bsd-hero) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 24px -14px rgba(17, 18, 20, 0.55) !important;
    font-family: var(--bsd-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bsd-hero-ink) !important;
    -webkit-text-fill-color: var(--bsd-hero-ink) !important;
}

html body #blocspace-calendar-sheet .bsd-root .bsd-kv > div .bsd-kv-value.is-strong {
    font-family: var(--bsd-sans) !important;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}