/* ==========================================================================
   SocialBox theme
   The logo is black and white and geometric (a cube in a hexagon with circuit
   lines), so the app uses the same: "ink" black on light surfaces, frosted
   glass panels over a soft background with a faint hexagon pattern, and short
   animations. Colour is kept for meaning only (status, social networks).

   Loaded after each page's own <style>, and scoped with body.sb-app (pages
   behind the login) or body.sb-auth (login / password pages), so older inline
   rules are overridden without editing every page.
   ========================================================================== */

:root {
    --sb-ink: #0b0b0f;
    --sb-ink-2: #1c1d24;
    --sb-ink-3: #34353f;
    --sb-ink-gradient: linear-gradient(135deg, #3a3b45 0%, #0b0b0f 70%);
    --sb-text: #15161b;
    --sb-muted: #646a78;
    --sb-subtle: #9aa0ad;
    --sb-line: rgba(17, 18, 28, 0.08);
    --sb-line-strong: rgba(17, 18, 28, 0.14);
    --sb-bg: #eef0f4;
    --sb-glass: rgba(255, 255, 255, 0.66);
    --sb-glass-strong: rgba(255, 255, 255, 0.84);
    --sb-glass-border: rgba(255, 255, 255, 0.75);
    --sb-blur: saturate(170%) blur(18px);
    --sb-shadow-sm: 0 1px 2px rgba(15, 17, 30, 0.06), 0 1px 1px rgba(15, 17, 30, 0.04);
    --sb-shadow: 0 12px 32px -14px rgba(15, 17, 30, 0.22), 0 2px 6px rgba(15, 17, 30, 0.05);
    --sb-shadow-lg: 0 24px 60px -20px rgba(15, 17, 30, 0.35), 0 4px 12px rgba(15, 17, 30, 0.06);
    --sb-radius: 18px;
    --sb-radius-md: 14px;
    --sb-radius-sm: 10px;
    --sb-success: #12a150;
    --sb-success-soft: rgba(18, 161, 80, 0.12);
    --sb-warning: #d97706;
    --sb-danger: #e5383b;
    --sb-danger-soft: rgba(229, 56, 59, 0.1);
    --sb-info: #2563eb;
    --sb-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* layout */
    --sb-top: 72px;
    --sb-gap: 14px;
    --sb-rail: 72px;
    --sb-strip: 76px;
    --sb-strip-open: 250px;
    --sb-content-left: calc(var(--sb-gap) * 2 + var(--sb-rail));
}

/* --------------------------------------------------------------------------
   Page background: soft light blobs + hexagon pattern (from the logo)
   -------------------------------------------------------------------------- */
body.sb-app,
body.sb-auth {
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--sb-text);
    background: var(--sb-bg) !important;
    -webkit-font-smoothing: antialiased;
}

body.sb-app input, body.sb-app button, body.sb-app select, body.sb-app textarea,
body.sb-auth input, body.sb-auth button, body.sb-auth select, body.sb-auth textarea { font-family: inherit; }

body.sb-app::before,
body.sb-auth::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(42vw 42vw at 8% 12%, rgba(124, 132, 160, 0.22), transparent 60%),
        radial-gradient(38vw 38vw at 92% 8%, rgba(160, 166, 190, 0.20), transparent 62%),
        radial-gradient(46vw 46vw at 78% 96%, rgba(110, 118, 150, 0.18), transparent 60%),
        radial-gradient(30vw 30vw at 30% 88%, rgba(200, 204, 220, 0.35), transparent 60%),
        linear-gradient(180deg, #f4f5f8 0%, #eceef3 100%);
}

body.sb-app::after,
body.sb-auth::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.55;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 97M28 0L28 -31' fill='none' stroke='%230b0b0f' stroke-opacity='0.045' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 56px 97px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 85%);
    mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 85%);
}

/* Keyboard users see where they are (the old pages removed every focus outline). */
body.sb-app :focus-visible,
body.sb-auth :focus-visible {
    outline: 2px solid var(--sb-ink) !important;
    outline-offset: 2px;
}

body.sb-app .form-control:focus-visible,
body.sb-auth .form-control:focus-visible { outline: none !important; }

body.sb-app ::selection { background: rgba(11, 11, 15, 0.85); color: #fff; }

body.sb-app h1, body.sb-app h2, body.sb-app h3,
body.sb-app h4, body.sb-app h5, body.sb-app h6 {
    color: var(--sb-text);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Thin rounded scrollbars */
body.sb-app *::-webkit-scrollbar { width: 10px; height: 10px; }
body.sb-app *::-webkit-scrollbar-track { background: transparent; }
body.sb-app *::-webkit-scrollbar-thumb {
    background: rgba(17, 18, 28, 0.18);
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 99px;
}
body.sb-app *::-webkit-scrollbar-thumb:hover { background-color: rgba(17, 18, 28, 0.32); }

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */
body.sb-app .sb-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--sb-top);
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px 0 26px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 1px 0 var(--sb-line), 0 10px 30px -24px rgba(15, 17, 30, 0.4);
    animation: sb-drop 0.5s var(--sb-ease) backwards;
}
body.sb-app .sb-topbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, 0.58);
    -webkit-backdrop-filter: var(--sb-blur);
    backdrop-filter: var(--sb-blur);
}

body.sb-app .sb-brand { display: flex; align-items: center; transition: transform 0.3s var(--sb-ease), opacity 0.2s; }
body.sb-app .sb-brand:hover { transform: translateY(-1px); opacity: 0.85; }
body.sb-app .sb-brand-full { width: 172px; height: auto; display: block; }
body.sb-app .sb-brand-icon { display: none; width: 36px; height: 36px; }

body.sb-app .sb-user { display: flex; align-items: center; gap: 12px; }
/* the language switch: in the top bar, in the account menu and on the login page */
.sb-lang { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 99px; background: rgba(11, 11, 15, 0.06); }
.sb-lang a { padding: 4px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: #5b5b66 !important; text-decoration: none !important; line-height: 1.2; }
.sb-lang a:hover { color: #0b0b0f !important; }
.sb-lang a.is-on { background: #0b0b0f; color: #fff !important; }
body.sb-app .sb-user > .sb-lang { align-self: center; margin: 0 6px 0 0 !important; padding: 3px !important; height: auto; }
body.sb-app .sb-menu-lang { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
body.sb-app .sb-menu-lang > i { font-size: 18px; }
body.sb-app .sb-menu-lang > p { flex: 1; margin: 0 !important; font-size: 14px; }
body.sb-app .sb-menu-lang .sb-lang a { letter-spacing: 0; }
.sb-login-card { position: relative; }
.sb-lang--login { position: absolute; top: 16px; right: 16px; }
@media (max-width: 767.98px) {
    body.sb-app .sb-user > .sb-lang { display: none; }
}
body.sb-app .sb-user-text { text-align: right; line-height: 1.25; }
body.sb-app .sb-user-name { margin: 0 !important; font-size: 14px; font-weight: 600; color: var(--sb-text); }
body.sb-app .sb-user-role {
    margin: 2px 0 0 !important;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sb-muted);
}

body.sb-app .userProfile {
    float: none;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover;
    cursor: pointer;
    background: var(--sb-ink-gradient);
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--sb-line-strong), var(--sb-shadow);
    transition: transform 0.25s var(--sb-ease), box-shadow 0.25s;
}
body.sb-app .userProfile:hover { transform: scale(1.06); box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(11, 11, 15, 0.55), var(--sb-shadow); }

/* Account menu: was opened by toggling max-height; now a glass card that fades and slides in */
body.sb-app .sub-menu-wrapper {
    position: absolute;
    top: calc(var(--sb-top) - 6px);
    right: 18px;
    width: 260px;
    max-height: none !important;
    overflow: visible;
    padding: 6px;
    border: 1px solid var(--sb-glass-border) !important;
    border-radius: var(--sb-radius-md);
    background: var(--sb-glass-strong);
    -webkit-backdrop-filter: var(--sb-blur);
    backdrop-filter: var(--sb-blur);
    box-shadow: var(--sb-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.97);
    transform-origin: top right;
    transition: opacity 0.2s, transform 0.25s var(--sb-ease), visibility 0s linear 0.25s;
    z-index: 1031;
}
body.sb-app .sub-menu-wrapper.opened {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.2s, transform 0.25s var(--sb-ease), visibility 0s;
}
body.sb-app .sub-menu { background: transparent; margin: 0; padding: 0; }
body.sb-app .sb-menu-head {
    display: flex;
    flex-direction: column;
    padding: 10px 12px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--sb-line);
}
body.sb-app .sb-menu-head strong { font-size: 14px; font-weight: 600; }
body.sb-app .sb-menu-head span { font-size: 12px; color: var(--sb-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.sb-app .sub-menu-link {
    margin: 2px 0;
    padding: 10px 12px;
    border-radius: var(--sb-radius-sm);
    color: var(--sb-text) !important;
    transition: background 0.2s;
}
body.sb-app .sub-menu-link:hover { background: rgba(11, 11, 15, 0.06); }
body.sb-app .sub-menu-link i { font-size: 20px; color: var(--sb-ink) !important; }
body.sb-app .sub-menu-link p { margin-left: 12px; font-size: 14px; font-weight: 500; }
body.sb-app .sub-menu-link:hover p { font-weight: 500; }
body.sb-app .sub-menu-link span { font-size: 20px; color: var(--sb-subtle); }

/* --------------------------------------------------------------------------
   Main menu: floating glass rail (computers) / tab bar (phones)
   -------------------------------------------------------------------------- */
body.sb-app .actionsBar {
    position: fixed;
    top: calc(var(--sb-top) + var(--sb-gap));
    left: var(--sb-gap);
    bottom: var(--sb-gap);
    height: auto;
    width: var(--sb-rail);
    margin: 0 !important; /* some pages' styles give <nav> a top margin */
    padding: 10px 0;
    z-index: 1020;
    border-radius: 22px;
    border: 1px solid var(--sb-glass-border);
    background: var(--sb-glass);
    -webkit-backdrop-filter: var(--sb-blur);
    backdrop-filter: var(--sb-blur);
    box-shadow: var(--sb-shadow);
    animation: sb-slide-right 0.55s var(--sb-ease) backwards;
}
body.sb-app .actionsBar .nav-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: auto;
    margin: 0;
    padding: 0;
}
body.sb-app .actionsBar li { margin: 0; position: relative; list-style: none; }
body.sb-app .actionsBar li a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: transparent;
    color: var(--sb-ink);
    transition: background 0.25s, transform 0.25s var(--sb-ease), box-shadow 0.25s;
}
body.sb-app .actionsBar li i,
body.sb-app .actionsBar i {
    height: auto;
    min-width: 0;
    line-height: 1;
    font-size: 21px;
    color: var(--sb-ink-3);
    transition: color 0.2s, transform 0.25s var(--sb-ease);
}
body.sb-app .actionsBar li a:hover { background: rgba(11, 11, 15, 0.07); }
body.sb-app .actionsBar li a:hover i { color: var(--sb-ink); transform: translateY(-1px); }
body.sb-app .actionsBar li.active a {
    background: var(--sb-ink-gradient);
    box-shadow: 0 10px 22px -10px rgba(11, 11, 15, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
body.sb-app .actionsBar li.active i { color: #fff; }
body.sb-app .actionsBar li.active a::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 3px;
    background: var(--sb-ink);
    animation: sb-grow 0.35s var(--sb-ease) backwards;
}
/* The old tooltip spans (Bootstrap's .tooltip is invisible) are replaced by .sb-nav-label */
body.sb-app .actionsBar li > .tooltip { display: none !important; }
body.sb-app .actionsBar .sb-nav-label {
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    padding: 6px 12px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    color: #fff;
    background: var(--sb-ink);
    box-shadow: var(--sb-shadow);
    opacity: 0;
    pointer-events: none;
    transform: translate(-6px, -50%);
    transition: opacity 0.18s, transform 0.25s var(--sb-ease);
}
body.sb-app .actionsBar li a:hover .sb-nav-label,
body.sb-app .actionsBar li a:focus-visible .sb-nav-label {
    opacity: 1;
    transform: translate(0, -50%);
}

/* --------------------------------------------------------------------------
   Content area
   -------------------------------------------------------------------------- */
body.sb-app { overflow: hidden; }
body.sb-app .home-section {
    position: fixed;
    top: var(--sb-top) !important;
    left: var(--sb-content-left) !important;
    right: 0;
    bottom: 0;
    width: auto !important;
    height: auto !important;
    padding: var(--sb-gap) calc(var(--sb-gap) + 6px) 40px var(--sb-gap) !important;
    background: transparent !important;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 2;
    transition: left 0.4s var(--sb-ease);
}
body.sb-app .home-section > * { animation: sb-fade 0.5s var(--sb-ease) backwards; }
body.sb-app .home-section > *:nth-child(2) { animation-delay: 0.05s; }
body.sb-app .home-section > *:nth-child(3) { animation-delay: 0.1s; }

/* Second strip with the client's Facebook / Instagram pages (inbox, reports, calendar) */
body.sb-app .sidebar {
    position: fixed;
    top: calc(var(--sb-top) + var(--sb-gap));
    left: var(--sb-content-left);
    bottom: var(--sb-gap);
    height: auto;
    width: var(--sb-strip);
    padding-top: 4px;
    z-index: 1019;
    border-radius: 22px;
    border: 1px solid var(--sb-glass-border);
    background: var(--sb-glass);
    -webkit-backdrop-filter: var(--sb-blur);
    backdrop-filter: var(--sb-blur);
    box-shadow: var(--sb-shadow);
    transition: width 0.4s var(--sb-ease);
    animation: sb-slide-right 0.6s var(--sb-ease) 0.05s backwards;
}
body.sb-app .sidebar.open { width: var(--sb-strip-open); }
body.sb-app .sidebar ~ .home-section { left: calc(var(--sb-content-left) + var(--sb-strip) + var(--sb-gap)) !important; }
body.sb-app .sidebar.open ~ .home-section { left: calc(var(--sb-content-left) + var(--sb-strip-open) + var(--sb-gap)) !important; }
body.sb-app .sidebar .logo-details { margin: 6px 14px 2px; height: 48px; }
body.sb-app .sidebar .logo-details .logo_name { font-size: 13px; font-weight: 600; color: var(--sb-text); }
body.sb-app .sidebar .logo-details #btn {
    width: 34px;
    height: 34px;
    line-height: 34px;
    border-radius: 10px;
    font-size: 20px;
    transition: background 0.2s, transform 0.4s var(--sb-ease);
}
body.sb-app .sidebar .logo-details #btn:hover { background: rgba(11, 11, 15, 0.07); }
/* Search: an icon when the list is closed, a field when it is open */
body.sb-app .sidebar > .nav-list { margin: 0 !important; padding: 0 13px !important; height: auto !important; }
body.sb-app .sidebar > .nav-list li { position: relative; height: 46px; margin: 2px 0 8px; list-style: none; }
body.sb-app .sidebar > .nav-list li .tooltip { display: none !important; }
body.sb-app .sidebar input {
    width: 48px;
    height: 46px;
    padding: 0 12px 0 42px !important;
    font-size: 13.5px;
    background: rgba(255, 255, 255, 0.85) !important;
    color: var(--sb-text) !important;
    border-radius: 14px !important;
    border: 1px solid var(--sb-line) !important;
    transition: opacity 0.3s, width 0.4s var(--sb-ease), border-color 0.2s, box-shadow 0.2s;
}
body.sb-app .sidebar.open input { width: 100%; }
body.sb-app .sidebar input:focus { border-color: rgba(11, 11, 15, 0.45) !important; box-shadow: 0 0 0 4px rgba(11, 11, 15, 0.07); }
body.sb-app .sidebar:not(.open) input { opacity: 0; pointer-events: none; }
body.sb-app .sidebar .bx-search {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 48px;
    height: 46px;
    line-height: 46px;
    transform: none;
    font-size: 19px;
    text-align: center;
    background: transparent !important;
    color: var(--sb-ink-3) !important;
    border-radius: 14px !important;
    cursor: pointer;
    transition: background 0.2s;
}
body.sb-app .sidebar:not(.open) .bx-search:hover { background: rgba(11, 11, 15, 0.07) !important; }
body.sb-app .sidebar.open .bx-search { pointer-events: none; color: var(--sb-subtle) !important; }

/* The list of pages: scrolls inside the strip, under a thin line */
body.sb-app .sidebar .AccountsArea {
    position: absolute;
    top: 118px;
    bottom: 10px;
    left: 0;
    right: 0;
    height: auto !important;
    margin: 0 10px;
    padding: 10px 0 4px;
    border-top: 1px solid var(--sb-line);
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none;
}
body.sb-app .sidebar .AccountsArea::-webkit-scrollbar { display: none; }

/* One page: round picture with the network's badge; name and project when the list is open */
body.sb-app .sidebar li.Account {
    position: relative;
    margin: 0 0 6px;
    list-style: none;
    border: 0 !important;
    animation: sb-rise 0.45s var(--sb-ease) backwards;
}
body.sb-app .sidebar li.Account:nth-child(2) { animation-delay: 0.04s; }
body.sb-app .sidebar li.Account:nth-child(3) { animation-delay: 0.08s; }
body.sb-app .sidebar li.Account:nth-child(4) { animation-delay: 0.12s; }
body.sb-app .sidebar li.Account:nth-child(n+5) { animation-delay: 0.16s; }
body.sb-app .sidebar li.Account > a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 56px;
    padding: 0;
    border-radius: 16px;
    background: transparent !important;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.25s;
}
body.sb-app .sidebar.open li.Account > a { justify-content: flex-start; padding: 0 8px; }
body.sb-app .sidebar li.Account:hover > a { background: rgba(11, 11, 15, 0.06) !important; }
body.sb-app .sidebar li.Account.active > a {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: var(--sb-shadow-sm), inset 0 0 0 1px var(--sb-line);
}
body.sb-app .sb-acc-avatar { position: relative; flex: 0 0 auto; width: 42px; height: 42px; }
body.sb-app .sidebar li img.sb-acc-img {
    display: block;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--sb-line-strong);
    transition: box-shadow 0.25s, transform 0.25s var(--sb-ease);
}
body.sb-app .sidebar li.Account:hover img.sb-acc-img { transform: scale(1.05); }
body.sb-app .sidebar li.Account.active img.sb-acc-img { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sb-ink); }
body.sb-app .sidebar li img.sb-acc-badge {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 2px;
    border-radius: 50%;
    object-fit: contain;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 17, 30, 0.18);
}
body.sb-app .sidebar li.Account .links_name {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0 !important;
    line-height: 1.25;
    color: var(--sb-text) !important;
}
body.sb-app .sidebar:not(.open) li.Account .links_name { display: none; }
body.sb-app .sb-acc-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.sb-app .sb-acc-meta { font-size: 11.5px; color: var(--sb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --------------------------------------------------------------------------
   Surfaces: cards, tables, dropdowns, modals
   -------------------------------------------------------------------------- */
body.sb-app .card,
body.sb-app .sb-surface {
    border: 1px solid var(--sb-glass-border);
    border-radius: var(--sb-radius) !important;
    background: var(--sb-glass);
    -webkit-backdrop-filter: var(--sb-blur);
    backdrop-filter: var(--sb-blur);
    box-shadow: var(--sb-shadow);
    overflow: hidden;
}
body.sb-app .card-header { background: rgba(255, 255, 255, 0.5); border-bottom: 1px solid var(--sb-line); font-weight: 600; }
body.sb-app .card-footer { background: transparent; border-top: 1px solid var(--sb-line); }

/* Post / story cards */
body.sb-app .PostCard {
    cursor: pointer;
    transition: transform 0.35s var(--sb-ease), box-shadow 0.35s var(--sb-ease);
    animation: sb-rise 0.6s var(--sb-ease) backwards;
}
body.sb-app .posts-listing .row > div:nth-child(2) .PostCard { animation-delay: 0.05s; }
body.sb-app .posts-listing .row > div:nth-child(3) .PostCard { animation-delay: 0.1s; }
body.sb-app .posts-listing .row > div:nth-child(4) .PostCard { animation-delay: 0.15s; }
body.sb-app .posts-listing .row > div:nth-child(5) .PostCard { animation-delay: 0.2s; }
body.sb-app .posts-listing .row > div:nth-child(6) .PostCard { animation-delay: 0.25s; }
body.sb-app .posts-listing .row > div:nth-child(n+7) .PostCard { animation-delay: 0.3s; }
body.sb-app .PostCard:hover { transform: translateY(-4px); box-shadow: var(--sb-shadow-lg); }
body.sb-app .PostCard .carousel-inner img,
body.sb-app .PostCard video { object-fit: cover; transition: transform 0.6s var(--sb-ease); }
body.sb-app .PostCard:hover .carousel-inner img { transform: scale(1.03); }
/* Post cards show the whole picture: the frame has the posts' 4:5 format (Instagram portrait) instead of a fixed height
   that cut the top and bottom. Another format is shown whole too, with plain margins. */
body.sb-app .PostCard .mediaHeight { height: auto; aspect-ratio: 4 / 5; }
body.sb-app .PostCard img.mediaHeight,
body.sb-app .PostCard video.mediaHeight { object-fit: contain; background: #f1f2f5; }
body.sb-app .PostCard:hover .carousel-inner img.mediaHeight { transform: none; }
body.sb-app .selectedPostCard, body.sb-app .selectedStoryCard { border: 0 !important; box-shadow: 0 0 0 3px var(--sb-ink), var(--sb-shadow-lg) !important; }

/* The month and status written over the picture: frosted pills that stay readable on light images */
body.sb-app .cardOverlay { opacity: 1 !important; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 38%) !important; }
body.sb-app .cardOverlay > div { align-items: flex-start; }
body.sb-app .cardOverlay > div > div:first-child img {
    width: 30px !important;
    height: 30px;
    padding: 5px;
    margin-right: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: var(--sb-shadow-sm);
}
body.sb-app .cardOverlay h6 {
    display: table;
    width: auto !important;
    margin: 0 0 6px auto !important;
    padding: 4px 11px;
    border-radius: 99px;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
    color: #fff !important;
    background: rgba(12, 12, 18, 0.48);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    backdrop-filter: blur(10px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.22);
}
body.sb-app .PostCard .card-body { padding: 14px 16px 16px !important; }
body.sb-app .PostCard .card-body > p { color: var(--sb-text) !important; font-weight: 400 !important; text-align: start !important; }

body.sb-app .story-card { border-radius: var(--sb-radius); box-shadow: var(--sb-shadow); overflow: hidden; }

/* Tables (DataTables: community, users, reports) */
body.sb-app .table { color: var(--sb-text); margin-bottom: 0; }
body.sb-app .table thead th {
    border-top: 0 !important;
    border-bottom: 1px solid var(--sb-line-strong) !important;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sb-muted);
}
body.sb-app .table td,
body.sb-app .table th { border-top: 1px solid var(--sb-line) !important; padding: 0.85rem 0.9rem; }
body.sb-app .table tbody tr { transition: background 0.2s; }
body.sb-app .table tbody tr:hover { background: rgba(255, 255, 255, 0.55); }
body.sb-app .table tfoot th, body.sb-app .table tfoot td { border-top: 1px solid var(--sb-line-strong) !important; font-weight: 600; }
body.sb-app .table-responsive,
body.sb-app .dataTables_wrapper {
    padding: 14px 16px;
    border: 1px solid var(--sb-glass-border);
    border-radius: var(--sb-radius);
    background: var(--sb-glass);
    -webkit-backdrop-filter: var(--sb-blur);
    backdrop-filter: var(--sb-blur);
    box-shadow: var(--sb-shadow);
}
body.sb-app .table-responsive .dataTables_wrapper { padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.sb-app .dataTables_info { color: var(--sb-muted); font-size: 13px; padding-top: 14px !important; }
body.sb-app .pagination { gap: 4px; }
body.sb-app .page-item .page-link {
    border: 0;
    min-width: 36px;
    text-align: center;
    border-radius: 10px !important;
    background: rgba(11, 11, 15, 0.05);
    color: var(--sb-text) !important;
    font-size: 13px;
    transition: background 0.2s;
}
body.sb-app .page-item .page-link:hover { background: rgba(11, 11, 15, 0.1); }
body.sb-app .page-item.active .page-link { background: var(--sb-ink-gradient) !important; color: #fff !important; box-shadow: 0 6px 14px -6px rgba(11, 11, 15, 0.7); }
body.sb-app .page-item.disabled .page-link { opacity: 0.45; }

/* Dropdowns (Bootstrap and bootstrap-select) */
body.sb-app .dropdown-menu {
    padding: 6px;
    border: 1px solid var(--sb-glass-border);
    border-radius: var(--sb-radius-md);
    background: var(--sb-glass-strong);
    -webkit-backdrop-filter: var(--sb-blur);
    backdrop-filter: var(--sb-blur);
    box-shadow: var(--sb-shadow-lg);
    animation: sb-pop 0.18s var(--sb-ease) backwards;
}
/* Posts with notes from the client or the agency still to handle, or a new version from the client (App\Library\PostAttention).
   In the app's own black and white: a frosted badge on the picture, a fine ink outline around the card. */
body.sb-app .PostCard.sb-has-attn { box-shadow: 0 0 0 1.5px var(--sb-ink), 0 18px 36px -22px rgba(15, 17, 30, 0.55) !important; }
body.sb-app .sb-attn { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 8px; }
body.sb-app .sb-attn-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var(--sb-glass-border); border-radius: 99px;
    background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: var(--sb-blur); backdrop-filter: var(--sb-blur); color: var(--sb-ink);
    font-size: 12.5px; font-weight: 700; line-height: 1.3; white-space: nowrap; box-shadow: 0 6px 16px -6px rgba(15, 17, 30, 0.45); }
body.sb-app .sb-attn-pill i { font-size: 12px; color: var(--sb-ink) !important; }
body.sb-app .sb-attn-pill--version { background: var(--sb-ink-gradient); border-color: rgba(255, 255, 255, 0.2); color: #fff; }
body.sb-app .sb-attn-pill--version i { color: #fff !important; }
body.sb-app .sb-attn-filter { display: inline-flex; align-items: center; gap: 8px; height: 38px; margin: 0 6px; padding: 0 12px 0 14px; border: 1px solid var(--sb-line-strong);
    border-radius: 12px; background: rgba(255, 255, 255, 0.78); color: var(--sb-ink) !important; font-size: 14px; font-weight: 600; text-decoration: none !important;
    white-space: nowrap; box-shadow: var(--sb-shadow-sm); transition: background 0.2s, border-color 0.2s; }
body.sb-app .sb-attn-filter:hover { background: #fff; border-color: rgba(11, 11, 15, 0.3); }
body.sb-app .sb-attn-filter b { min-width: 22px; padding: 1px 7px; border-radius: 99px; background: var(--sb-ink); color: #fff; font-size: 12.5px; text-align: center; }
body.sb-app .sb-attn-filter.is-on { background: var(--sb-ink-gradient); border-color: transparent; color: #fff !important; }
body.sb-app .sb-attn-filter.is-on b { background: #fff; color: var(--sb-ink); }
/* the number on "Posts" in the menu: ink on the light icons, white on the selected (ink) one */
body.sb-app .actionsBar .sb-nav-count { position: absolute; top: 3px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--sb-ink);
    color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff; pointer-events: none; }
body.sb-app .actionsBar li.active .sb-nav-count { background: #fff; color: var(--sb-ink); box-shadow: 0 0 0 2px var(--sb-ink); }

/* Long lists (the projects): the menu keeps a set height and scrolls, instead of running past the bottom of the screen */
body.sb-app .dropdown-menu.sb-scroll-menu { max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain; }
body.sb-app .dropdown-item { border-radius: 9px; padding: 8px 12px; font-size: 14px; transition: background 0.15s; }
body.sb-app .dropdown-item:hover, body.sb-app .dropdown-item:focus { background: rgba(11, 11, 15, 0.06); }
body.sb-app .dropdown-item.active, body.sb-app .dropdown-item:active { background: var(--sb-ink); color: #fff; }

/* Modals: frosted card over a blurred page */
.modal-backdrop.show { opacity: 1 !important; background: rgba(10, 10, 16, 0.32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.sb-app .modal-content {
    border: 1px solid var(--sb-glass-border);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: var(--sb-blur);
    backdrop-filter: var(--sb-blur);
    box-shadow: var(--sb-shadow-lg);
}
body.sb-app .modal-header, body.sb-app .modal-footer { border-color: var(--sb-line); }
body.sb-app .modal.fade .modal-dialog { transform: translateY(14px) scale(0.98); transition: transform 0.3s var(--sb-ease); }
body.sb-app .modal.show .modal-dialog { transform: none; }

/* --------------------------------------------------------------------------
   Controls: buttons and form fields
   -------------------------------------------------------------------------- */
body.sb-app .btn,
body.sb-auth .btn {
    border-radius: 12px;
    font-weight: 500;
    letter-spacing: 0.005em;
    transition: transform 0.2s var(--sb-ease), box-shadow 0.25s, background 0.25s, color 0.2s, border-color 0.2s;
}
body.sb-app .btn:not(:disabled):hover,
body.sb-auth .btn:not(:disabled):hover { transform: translateY(-1px); }
body.sb-app .btn:not(:disabled):active,
body.sb-auth .btn:not(:disabled):active { transform: translateY(0) scale(0.98); }

body.sb-app .btn-dark,
body.sb-app .btn-primary,
body.sb-auth .btn-dark,
body.sb-auth .btn-primary {
    border: 0 !important;
    color: #fff !important;
    background: var(--sb-ink-gradient) !important;
    box-shadow: 0 10px 22px -12px rgba(11, 11, 15, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
body.sb-app .btn-dark:not(:disabled):hover,
body.sb-app .btn-primary:not(:disabled):hover,
body.sb-auth .btn-dark:not(:disabled):hover,
body.sb-auth .btn-primary:not(:disabled):hover { box-shadow: 0 16px 30px -14px rgba(11, 11, 15, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.18); }

/* "Display"-style outlined buttons (2px black border inline) become quiet glass buttons */
body.sb-app .btn-default {
    border: 1px solid var(--sb-line-strong) !important;
    background: rgba(255, 255, 255, 0.75);
    color: var(--sb-text) !important;
    box-shadow: var(--sb-shadow-sm);
}
body.sb-app .btn-default:hover { background: #fff; border-color: rgba(11, 11, 15, 0.3) !important; }

body.sb-app .btn-success { border: 0; background: linear-gradient(135deg, #20b765, #0f8f47); box-shadow: 0 10px 20px -12px rgba(15, 143, 71, 0.9); }
body.sb-app .btn-info { border: 0; background: linear-gradient(135deg, #3a3b45, #1c1d24); color: #fff !important; }

/* Destructive buttons are quieter than the main action (and turn red only on hover) */
body.sb-app .btn-danger {
    border: 1px solid rgba(229, 56, 59, 0.28);
    background: var(--sb-danger-soft);
    color: var(--sb-danger) !important;
    box-shadow: none;
}
body.sb-app .btn-danger i { color: var(--sb-danger) !important; }
body.sb-app .btn-danger:not(:disabled):hover { background: var(--sb-danger); color: #fff !important; border-color: var(--sb-danger); }
body.sb-app .btn-danger:not(:disabled):hover i { color: #fff !important; }

body.sb-app .btn-link, body.sb-auth .btn-link { color: var(--sb-ink); font-weight: 500; }

/* Text inside a button keeps the button's colour (labels are dark grey elsewhere). On a post page, the selected
   "Publish Now / Schedule Publish" choice is a dark button whose label was dark too, so it could not be read. */
body.sb-app .btn label,
body.sb-app .btn .form-check-label { color: inherit; cursor: pointer; margin: 0; }
/* Those two choices look like a switch: the chosen one dark, the other one light */
body.sb-app .form-check.btn {
    padding: 10px 24px;
    border: 1px solid var(--sb-line-strong);
    background: rgba(255, 255, 255, 0.75);
    color: var(--sb-text);
}

/* The post page's script switches the choice by toggling "btn-default" and "btn-dark" on both, so the chosen one
   can end up with both classes: it is the dark one. */
body.sb-app .btn.btn-dark.btn-default {
    border: 0 !important;
    color: #fff !important;
    background: var(--sb-ink-gradient) !important;
    box-shadow: 0 10px 22px -12px rgba(11, 11, 15, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* Progress bars (publishing, uploads) appear only once something is being sent, not as an empty bar at 0% */
body.sb-app .progress:has(> .progress-bar[aria-valuenow="0"]) { display: none; }
body.sb-app .progress { height: 12px; border-radius: 99px; background: rgba(11, 11, 15, 0.08); }
body.sb-app .progress-bar { background: var(--sb-ink-gradient); font-size: 9px; transition: width 0.3s var(--sb-ease); }

body.sb-app .form-control,
body.sb-app .custom-select,
body.sb-app .bootstrap-select > .dropdown-toggle,
body.sb-app .dataTables_filter input,
body.sb-auth .form-control {
    min-height: 42px;
    border: 1px solid var(--sb-line-strong) !important;
    border-radius: 12px !important;
    background-color: rgba(255, 255, 255, 0.82) !important;
    color: var(--sb-text);
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
body.sb-app textarea.form-control { min-height: 0; }
body.sb-app .form-control:focus,
body.sb-app .custom-select:focus,
body.sb-app .dataTables_filter input:focus,
body.sb-auth .form-control:focus {
    border-color: rgba(11, 11, 15, 0.55) !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 4px rgba(11, 11, 15, 0.08) !important;
}
body.sb-app .form-control:disabled,
body.sb-app .form-control[readonly] { background-color: rgba(11, 11, 15, 0.04) !important; color: var(--sb-muted); }
body.sb-app label, body.sb-auth label { font-weight: 500; color: var(--sb-ink-3); }
body.sb-app .custom-file-label { border-radius: 12px; border-color: var(--sb-line-strong); min-height: 42px; display: flex; align-items: center; }
body.sb-app .custom-file-label::after { height: 100%; display: flex; align-items: center; background: rgba(11, 11, 15, 0.06); border-radius: 0 12px 12px 0; }

body.sb-app .badge { border-radius: 99px; font-weight: 500; padding: 0.4em 0.75em; }
body.sb-app .alert { border-radius: var(--sb-radius-md); border: 1px solid var(--sb-line); box-shadow: var(--sb-shadow-sm); }

/* Filter buttons on the posts / stories lists (inline 2px black border) */
body.sb-app .btn-outline-default {
    border: 1px solid var(--sb-line-strong) !important;
    font-weight: 500 !important;
    font-size: 14px;
    color: var(--sb-text) !important;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--sb-shadow-sm);
}
body.sb-app .btn-outline-default:hover { background: #fff; border-color: rgba(11, 11, 15, 0.3) !important; }
body.sb-app .filterActions { padding: 6px 4px 0 !important; align-items: center; }
body.sb-app .filterActions .dropdown-menu .dropdown-item { cursor: pointer; }

/* --------------------------------------------------------------------------
   Empty states and loaders
   -------------------------------------------------------------------------- */
body.sb-app .noDataAlert,
body.sb-app .posts-listing .row > div[style*="position: absolute"] {
    padding: 34px 30px 30px;
    border: 1px solid var(--sb-glass-border);
    border-radius: 24px;
    background: var(--sb-glass);
    -webkit-backdrop-filter: var(--sb-blur);
    backdrop-filter: var(--sb-blur);
    box-shadow: var(--sb-shadow-lg);
    animation: sb-fade 0.6s var(--sb-ease) backwards;
    max-width: 520px;
}
body.sb-app .noDataAlert img,
body.sb-app .posts-listing .row > div[style*="position: absolute"] img { width: 92px !important; animation: sb-float 4s ease-in-out infinite; }
body.sb-app .noDataAlert h5,
body.sb-app .posts-listing .row > div[style*="position: absolute"] h5 { font-size: 16px; font-weight: 500; color: var(--sb-ink-3); }

body.sb-app #loader {
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border: 3px solid rgba(11, 11, 15, 0.12);
    border-top-color: var(--sb-ink);
    animation: spin 0.8s linear infinite;
}

/* --------------------------------------------------------------------------
   Create / edit a post: form and preview as two panels
   -------------------------------------------------------------------------- */
body.sb-app #CreatePostSection,
body.sb-app #UpdatePostSection { margin-top: 14px !important; padding: 0 !important; }
/* the form column (its padding is fixed inline, so the forms inside carry the spacing) */
body.sb-app #CreatePostSection > .row > .col-md-5 > form,
body.sb-app #UpdatePostSection > .row > .col-md-5 > form { padding: 22px 24px 0; }
body.sb-app #CreatePostSection > .row > .col-md-5 > form:last-of-type,
body.sb-app #UpdatePostSection > .row > .col-md-5 > form:last-of-type { padding-bottom: 18px; }
body.sb-app #CreatePostSection > .row > .col-md-5,
body.sb-app #UpdatePostSection > .row > .col-md-5 {
    align-self: flex-start;
    border: 1px solid var(--sb-glass-border);
    border-radius: var(--sb-radius);
    background: var(--sb-glass);
    -webkit-backdrop-filter: var(--sb-blur);
    backdrop-filter: var(--sb-blur);
    box-shadow: var(--sb-shadow);
}
body.sb-app #CreatePostSection > .row > .col-md-7 > div,
body.sb-app #UpdatePostSection > .row > .col-md-7 > div {
    position: sticky;
    top: 0;
    margin-top: 0 !important;
    margin-left: 6px;
    min-height: 460px;
    padding: 26px 0;
    border: 1px dashed var(--sb-line-strong);
    border-radius: var(--sb-radius);
    background: rgba(255, 255, 255, 0.35);
}
/* Create post: the preview panel (per-platform preview, posts/partials/platform-preview) stays in view while scrolling */
body.sb-app #CreatePostSection > .row > .col-md-7 > div {
    padding: 20px 22px 24px;
    border: 1px solid var(--sb-glass-border);
    background: var(--sb-glass);
    -webkit-backdrop-filter: var(--sb-blur);
    backdrop-filter: var(--sb-blur);
    box-shadow: var(--sb-shadow);
    max-height: calc(100vh - var(--sb-top) - 40px);
    overflow-y: auto;
}
body.sb-app .backSection .back_button { margin: 0 !important; }

/* White inline panels of the profile and users pages become glass */
body.sb-app .home-section div[style*="background: #fff;border-radius: 15px"],
body.sb-app .home-section div[style*="background:#fff;border-radius:15px"] {
    background: var(--sb-glass) !important;
    border: 1px solid var(--sb-glass-border);
    border-radius: var(--sb-radius) !important;
    -webkit-backdrop-filter: var(--sb-blur);
    backdrop-filter: var(--sb-blur);
    box-shadow: var(--sb-shadow);
}

/* Post page: the white post / proposition panels (inline styles) become glass */
body.sb-app .home-section div[style*="border-radius: 25px;padding: 30px;background: white"] {
    background: var(--sb-glass) !important;
    border: 1px solid var(--sb-glass-border);
    -webkit-backdrop-filter: var(--sb-blur);
    backdrop-filter: var(--sb-blur);
    box-shadow: var(--sb-shadow);
}

/* TikTok choices in the publish form of a post page */
body.sb-app .sb-tiktok {
    max-width: 560px;
    margin: 24px auto 0;
    padding: 20px 22px;
    text-align: left;
    border: 1px solid var(--sb-glass-border);
    border-radius: var(--sb-radius);
    background: var(--sb-glass);
    -webkit-backdrop-filter: var(--sb-blur);
    backdrop-filter: var(--sb-blur);
    box-shadow: var(--sb-shadow);
}
body.sb-app .sb-tt-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
body.sb-app .sb-tt-head > img:first-child { width: 34px; height: 34px; object-fit: contain; }
body.sb-app .sb-tt-head strong { display: block; font-size: 15px; }
body.sb-app .sb-tt-head span { font-size: 13px; color: var(--sb-muted); }
body.sb-app .sb-tt-avatar { width: 36px; height: 36px; margin-left: auto; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, var(--sb-shadow-sm); }
body.sb-app .sb-tiktok > label { display: block; margin-bottom: 6px; font-size: 13px; }
body.sb-app .sb-tt-group { margin-top: 16px; }
body.sb-app .sb-tt-group-title { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--sb-ink-3); }
body.sb-app .sb-tt-check { display: inline-flex; align-items: center; gap: 7px; margin: 0 18px 6px 0; font-weight: 400; cursor: pointer; }
body.sb-app .sb-tt-check small { flex-basis: 100%; margin-left: 22px; color: var(--sb-muted); }
body.sb-app #ttCommercialOptions .sb-tt-check { display: flex; flex-wrap: wrap; margin: 8px 0 0; }
body.sb-app .sb-tt-off { opacity: 0.45; cursor: not-allowed; }
body.sb-app .sb-tt-switch { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 500; cursor: pointer; }
body.sb-app .sb-tt-switch input {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 38px;
    height: 22px;
    margin: 0;
    border-radius: 11px;
    background: rgba(11, 11, 15, 0.18);
    cursor: pointer;
    transition: background 0.2s var(--sb-ease);
}
body.sb-app .sb-tt-switch input::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s var(--sb-ease);
}
body.sb-app .sb-tt-switch input:checked { background: var(--sb-ink); }
body.sb-app .sb-tt-switch input:checked::before { transform: translateX(16px); }
body.sb-app .sb-tt-switch input:disabled { opacity: 0.45; cursor: not-allowed; }
body.sb-app .sb-tt-switch input:focus-visible { outline: 2px solid var(--sb-info); outline-offset: 2px; }
body.sb-app .sb-tt-help { margin: 6px 0 0; font-size: 12.5px; color: var(--sb-muted); }
body.sb-app .sb-tt-label { margin: 8px 0 0; padding: 7px 10px; border-radius: 9px; font-size: 12.5px; background: rgba(11, 11, 15, 0.05); }
body.sb-app .sb-tt-consent { margin: 16px 0 0; font-size: 13px; color: var(--sb-ink-3); }
body.sb-app .sb-tt-consent a { color: var(--sb-ink); font-weight: 600; text-decoration: underline; }
body.sb-app .sb-tt-error { margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; font-size: 13px; color: #a3282a; background: var(--sb-danger-soft); }

/* --------------------------------------------------------------------------
   Inbox
   -------------------------------------------------------------------------- */
body.sb-app .InboxSection > .d-flex { gap: var(--sb-gap); }
body.sb-app .chatFilterSection .btn,
body.sb-app .chatFilterSection button { white-space: nowrap; }
body.sb-app .InboxSection .section {
    border: 1px solid var(--sb-glass-border) !important;
    border-radius: var(--sb-radius);
    background: var(--sb-glass);
    -webkit-backdrop-filter: var(--sb-blur);
    backdrop-filter: var(--sb-blur);
    box-shadow: var(--sb-shadow);
    overflow-y: auto;
}
body.sb-app .InboxSection > .d-flex > div:not(.section) {
    border: 1px solid var(--sb-glass-border);
    border-radius: var(--sb-radius);
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: var(--sb-blur);
    backdrop-filter: var(--sb-blur);
    box-shadow: var(--sb-shadow);
}
body.sb-app .conversationRow,
body.sb-app .commentRow {
    border: 1px solid transparent !important;
    border-radius: var(--sb-radius-md) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: var(--sb-shadow-sm) !important;
    transition: transform 0.25s var(--sb-ease), box-shadow 0.25s, border-color 0.2s;
}
body.sb-app .conversationRow:hover,
body.sb-app .commentRow:hover { transform: translateY(-2px); box-shadow: var(--sb-shadow) !important; border-color: var(--sb-line) !important; }
body.sb-app .conversationRow img,
body.sb-app .commentRow img { object-fit: cover; }

/* --------------------------------------------------------------------------
   Reports (dashboard)
   -------------------------------------------------------------------------- */
body.sb-app .ReportsSection .card,
body.sb-app .ReportsSection .ResumeCard { border-radius: var(--sb-radius) !important; }
body.sb-app .btn_Audience, body.sb-app .btn_Content { border-radius: 12px !important; }

/* FullCalendar: the page scrolls as a whole instead of inside a box cut at the bottom */
body.sb-app .calendarSection { height: auto !important; overflow: visible !important; }
body.sb-app .calendarSection #calendar { padding: 6px 0 20px !important; }
body.sb-app .fc-toolbar h2 { font-weight: 600; font-size: 22px; }
body.sb-app .fc-unthemed th, body.sb-app .fc-unthemed td, body.sb-app .fc-unthemed thead,
body.sb-app .fc-unthemed tbody, body.sb-app .fc-unthemed .fc-divider, body.sb-app .fc-unthemed .fc-row,
body.sb-app .fc-unthemed .fc-content, body.sb-app .fc-unthemed .fc-popover { border-color: var(--sb-line) !important; }
body.sb-app .fc-view-container {
    border-radius: var(--sb-radius);
    overflow: hidden;
    background: var(--sb-glass);
    -webkit-backdrop-filter: var(--sb-blur);
    backdrop-filter: var(--sb-blur);
    box-shadow: var(--sb-shadow);
    border: 1px solid var(--sb-glass-border);
}
body.sb-app .fc-head th { padding: 10px 0 !important; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sb-muted); }
body.sb-app .fc-unthemed td.fc-today { background: rgba(11, 11, 15, 0.035) !important; }
body.sb-app .fc-event { border: 0 !important; border-radius: 8px !important; padding: 2px 6px; box-shadow: var(--sb-shadow-sm); }
body.sb-app .fc-button {
    border: 1px solid var(--sb-line-strong) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    box-shadow: var(--sb-shadow-sm) !important;
    text-shadow: none !important;
    margin: 0 2px !important;
}
body.sb-app .fc-button:not(.fc-state-disabled):hover { background: #fff !important; }
body.sb-app .fc-day-number { padding: 6px 8px !important; font-size: 13px; color: var(--sb-ink-3); }

/* Calendar: header (month, account, colour key with the month's counts, navigation) */
body.sb-app .sb-cal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin: 6px 0 4px; }
body.sb-app .sb-cal-title { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
body.sb-app .sb-cal-title h2 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
body.sb-app .sb-cal-account { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sb-muted); }
body.sb-app .sb-cal-account img { width: 16px; height: 16px; }
body.sb-app .sb-cal-legend { display: flex; flex-wrap: wrap; gap: 8px; }
body.sb-app .sb-cal-key {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px;
    font-size: 13px; color: var(--sb-ink-3); background: rgba(255, 255, 255, 0.75); border: 1px solid var(--sb-line); box-shadow: var(--sb-shadow-sm);
}
body.sb-app .sb-cal-key i { width: 9px; height: 9px; border-radius: 50%; }
body.sb-app .sb-cal-key b { font-weight: 700; color: var(--sb-ink); }
body.sb-app .sb-cal-key--published i { background: var(--sb-success); }
body.sb-app .sb-cal-key--scheduled i { background: var(--sb-warning); }
body.sb-app .sb-cal-key--plan i { background: linear-gradient(135deg, #6d339a, #ffbb06); }
body.sb-app .sb-cal-nav { display: flex; gap: 6px; }
body.sb-app .sb-cal-btn {
    height: 38px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--sb-line-strong); background: rgba(255, 255, 255, 0.85);
    font-size: 14px; font-weight: 500; color: var(--sb-ink); box-shadow: var(--sb-shadow-sm); transition: background 0.15s, transform 0.15s;
}
body.sb-app .sb-cal-btn:hover:not(:disabled) { background: #fff; transform: translateY(-1px); }
body.sb-app .sb-cal-btn:disabled { opacity: 0.45; cursor: default; }
body.sb-app .sb-cal-arrow { width: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
body.sb-app .sb-cal-hint { margin: 2px 0 12px; font-size: 12.5px; color: var(--sb-muted); }
body.sb-app .calendarSection #calendar { padding-top: 0 !important; }
body.sb-app .fc-sat, body.sb-app .fc-sun { background: rgba(11, 11, 15, 0.018); }
/* today is shaded once, on the day's background (not again behind its number) */
body.sb-app .fc-content-skeleton td.fc-today, body.sb-app .fc-day-top.fc-today { background: transparent !important; }
body.sb-app .fc-day-grid .fc-row { min-height: 7.5em; }

/* Calendar: a post is a small card (picture, platform, time, status colour, start of the caption) */
body.sb-app .fc-event.sb-ev { margin: 3px 6px 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; cursor: pointer; }
body.sb-app .sb-ev-card {
    display: flex; align-items: center; gap: 8px; padding: 5px 7px 5px 5px; border-radius: 10px;
    background: #fff; border: 1px solid var(--sb-line); border-left: 3px solid var(--sb-success); box-shadow: var(--sb-shadow-sm);
    transition: transform 0.15s var(--sb-ease), box-shadow 0.15s var(--sb-ease);
}
body.sb-app .sb-ev:hover .sb-ev-card { transform: translateY(-1px); box-shadow: var(--sb-shadow); }
body.sb-app .sb-ev--scheduled .sb-ev-card { border-left-color: var(--sb-warning); background: #fffaf1; }
body.sb-app .sb-ev-thumb {
    position: relative; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 7px; overflow: hidden;
    display: flex; align-items: center; justify-content: center; background: #eef0f4;
}
body.sb-app .sb-ev-thumb .sb-ev-pic { width: 100%; height: 100%; object-fit: cover; }
body.sb-app .sb-ev-thumb--video { background: #1b1d24; }
body.sb-app .sb-ev-logo { width: 16px; height: 16px; }
body.sb-app .sb-ev-play {
    position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: rgba(0, 0, 0, 0.55);
}
body.sb-app .sb-ev-play::after {
    content: ""; position: absolute; left: 6px; top: 4px; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent #fff;
}
body.sb-app .sb-ev-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
body.sb-app .sb-ev-meta { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--sb-ink-3); white-space: nowrap; }
body.sb-app .sb-ev-platform { width: 13px; height: 13px; }
body.sb-app .sb-ev-status { margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sb-success); }
body.sb-app .sb-ev--scheduled .sb-ev-status { color: var(--sb-warning); }
body.sb-app .sb-ev-text {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 12px; font-weight: 400; line-height: 1.3; color: var(--sb-ink); word-break: break-word; white-space: normal;
}

/* Calendar: a plan is a label in the colours chosen for it */
body.sb-app .fc-event.sb-ev--plan { background-color: var(--plan-bg) !important; color: var(--plan-fg) !important; border-radius: 8px !important; box-shadow: var(--sb-shadow-sm) !important; }
body.sb-app .sb-ev-plan { display: flex; align-items: center; gap: 6px; padding: 5px 8px; font-size: 12px; font-weight: 600; color: var(--plan-fg); }
body.sb-app .sb-ev-plan .sb-ev-text { -webkit-line-clamp: 1; color: inherit; }
body.sb-app .sb-ev-flag { flex: 0 0 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.75; }

/* Calendar: "+2 more" and the list of the whole day */
body.sb-app a.fc-more {
    display: inline-block; margin: 4px 6px 2px !important; padding: 2px 10px; border-radius: 99px;
    font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--sb-ink) !important; background: rgba(11, 11, 15, 0.06); text-decoration: none !important;
}
body.sb-app a.fc-more:hover { background: rgba(11, 11, 15, 0.12); }
body.sb-app .fc-popover.fc-more-popover {
    min-width: 250px; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--sb-glass-border) !important; box-shadow: var(--sb-shadow-lg);
}
body.sb-app .fc-more-popover .fc-header { padding: 9px 12px !important; background: #f6f7f9 !important; font-weight: 600; }
body.sb-app .fc-more-popover .fc-event-container { max-height: 380px; overflow-y: auto; padding: 4px 0 10px !important; }

/* Calendar: the details window of an entry */
body.sb-app .sb-pd { flex-direction: row; overflow: hidden; border: 0; border-radius: 20px; box-shadow: var(--sb-shadow-lg); }
body.sb-app .sb-pd-close {
    position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 50%;
    font-size: 22px; line-height: 1; color: var(--sb-ink); background: rgba(255, 255, 255, 0.9); box-shadow: var(--sb-shadow-sm);
}
body.sb-app .sb-pd-media {
    position: relative; flex: 0 0 46%; min-height: 320px; display: flex; align-items: center; justify-content: center; background: #0f1014;
}
body.sb-app .sb-pd-media > img, body.sb-app .sb-pd-media > video { width: 100%; height: 100%; max-height: 72vh; object-fit: contain; }
body.sb-app .sb-pd-media--empty { flex-direction: column; gap: 10px; background: #eef0f4; color: var(--sb-muted); font-size: 13px; }
body.sb-app .sb-pd-media--empty > img { width: 44px; height: 44px; }
body.sb-app .sb-pd-media--plan { padding: 30px; font-size: 22px; font-weight: 700; text-align: center; }
body.sb-app .sb-ev-play--big { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
body.sb-app .sb-ev-play--big::after { left: 22px; top: 17px; border-width: 11px 0 11px 17px; }
body.sb-app .sb-pd-body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 26px 26px 24px; }
body.sb-app .sb-pd-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-right: 34px; }
body.sb-app .sb-pd-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; font-size: 12.5px; font-weight: 600;
    background: rgba(11, 11, 15, 0.05); color: var(--sb-ink);
}
body.sb-app .sb-pd-chip img { width: 15px; height: 15px; }
body.sb-app .sb-pd-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--sb-success); }
body.sb-app .sb-pd-chip--published { background: var(--sb-success-soft); color: #0b7a3b; }
body.sb-app .sb-pd-chip--scheduled { background: rgba(217, 119, 6, 0.12); color: #9a5405; }
body.sb-app .sb-pd-chip--scheduled i { background: var(--sb-warning); }
body.sb-app .sb-pd-date { margin: 16px 0 12px; font-size: 17px; font-weight: 600; }
body.sb-app .sb-pd-caption { flex: 1; max-height: 42vh; overflow-y: auto; margin: 0 0 20px; font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: var(--sb-ink-3); }
body.sb-app .sb-pd-caption--empty { color: var(--sb-muted); font-style: italic; }
body.sb-app .sb-pd-link { align-self: flex-start; border-radius: 12px; padding: 9px 18px; }
/* removing a published post: the button, then what will be removed, then what happened */
body.sb-app .sb-pd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
body.sb-app .sb-pd-remove-btn {
    border: 1px solid #f2b8b5; border-radius: 12px; padding: 8px 16px; background: #fff; color: #b42318; font-size: 14px; font-weight: 600;
}
body.sb-app .sb-pd-remove-btn:hover:not(:disabled) { background: #fff1f1; }
body.sb-app .sb-pd-remove-btn--solid { background: #b42318; border-color: #b42318; color: #fff; }
body.sb-app .sb-pd-remove-btn--solid:hover:not(:disabled) { background: #912018; }
body.sb-app .sb-pd-remove-btn:disabled { opacity: 0.6; cursor: wait; }
body.sb-app .sb-pd-when-btn {
    border: 1px solid var(--sb-line, #e6e6ea); border-radius: 12px; padding: 8px 16px; background: #fff; color: var(--sb-ink); font-size: 14px; font-weight: 600;
}
body.sb-app .sb-pd-when-btn:hover { background: #f5f5f7; }
body.sb-app .sb-pd-remove-btn--ink { background: var(--sb-ink); border-color: var(--sb-ink); color: #fff; }
body.sb-app .sb-pd-remove-btn--ink:hover:not(:disabled) { background: #26262c; }
body.sb-app .sb-pd-when { margin-top: 12px; padding: 16px; border: 1px solid var(--sb-line, #e6e6ea); border-radius: 14px; background: #fafafb; }
body.sb-app .sb-pd-when-label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--sb-ink); }
body.sb-app .sb-pd-when .form-control { max-width: 260px; margin-bottom: 12px; }
body.sb-app .sb-pd-when-msg { margin: 8px 0 0; font-size: 13px; color: #b42318; }
body.sb-app .sb-pd-when-msg.is-ok { margin: 0; color: #15803d; font-weight: 600; }
body.sb-app .sb-pd-when-msg:empty { display: none; }
body.sb-app .sb-pd-pub { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--sb-line, #e6e6ea); border-radius: 14px; background: #fafafb; }
body.sb-app .sb-pd-pub .sb-pd-where { margin-bottom: 10px; }
body.sb-app .sb-pd-chip--attention { background: #fff1f1; color: #b42318; }
body.sb-app .sb-pd-chip--attention i { background: #b42318; }
body.sb-app .sb-pd-ghost { border: 0; background: none; padding: 8px 6px; font-size: 14px; font-weight: 600; color: var(--sb-ink-3); }
body.sb-app .sb-pd-confirm { margin-top: 4px; padding: 16px; border: 1px solid #f2d4d2; border-radius: 14px; background: #fffafa; font-size: 14px; }
body.sb-app .sb-pd-confirm h6 { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--sb-ink); }
body.sb-app .sb-pd-confirm p { margin: 0 0 8px; color: var(--sb-ink-3); }
body.sb-app .sb-pd-where { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
body.sb-app .sb-pd-where li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; }
body.sb-app .sb-pd-where img { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; }
body.sb-app .sb-pd-where small { display: block; color: var(--sb-muted); font-size: 12.5px; }
body.sb-app .sb-pd-where .is-ok { color: #0b7a3b; font-weight: 700; }
body.sb-app .sb-pd-where .is-failed { color: #b42318; font-weight: 700; }
body.sb-app .sb-pd-warn { font-size: 12.5px; color: #b42318 !important; }

@media (max-width: 767.98px) {
    body.sb-app .sb-cal-title h2 { font-size: 21px; }
    body.sb-app .sb-cal-nav { width: 100%; }
    body.sb-app .sb-cal-nav #calToday { margin-right: auto; }
    body.sb-app .fc-day-grid .fc-row { min-height: 4.5em; }
    /* phones: only the picture with its status colour; a tap shows the post */
    body.sb-app .fc-event.sb-ev { margin: 2px 2px 0 !important; }
    body.sb-app .sb-ev-card { justify-content: center; padding: 2px; gap: 0; border-left-width: 2px; }
    body.sb-app .sb-ev-body { display: none; }
    body.sb-app .sb-ev-thumb { flex-basis: 28px; width: 28px; height: 28px; }
    body.sb-app .sb-ev-plan { padding: 3px 4px; font-size: 10px; }
    body.sb-app .sb-ev-flag { display: none; }
    body.sb-app a.fc-more { margin: 3px 2px 0 !important; padding: 1px 6px; font-size: 10.5px; }
    body.sb-app .sb-pd { flex-direction: column; }
    body.sb-app .sb-pd-media { flex-basis: auto; min-height: 220px; max-height: 48vh; }
    body.sb-app .sb-pd-body { padding: 20px; }
}

/* --------------------------------------------------------------------------
   Home (Community), designed from the logo: black and white only; the cube-in-a-hexagon and its circuit traces
   ending in dots (hexagon cells, stops and page pictures, a trace before each title); the heavy slanted lettering
   of "SOCIAL BOX" (Saira italic, slanted buttons). Post and page pictures bring the colour.
   -------------------------------------------------------------------------- */
body.sb-app .sb-home {
    --hx-ink: #0a0a0b; --hx-paper: #fff; --hx-line: #e5e5e7; --hx-soft: #f0f0f1; --hx-muted: #77777c;
    --hx-font: "Saira", "Poppins", system-ui, sans-serif;
    /* titles: a friendly, easy-to-read typeface, upright and in sentence case */
    --hx-head: "Plus Jakarta Sans", "Poppins", system-ui, sans-serif;
    --hx-hex: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
    padding: 24px 28px 48px !important; color: var(--hx-ink);
}
body.sb-app .sb-home a { text-decoration: none; }
/* layouts/sidebar hides and centres every svg, styles every circle and text, and forces Poppins on every element */
body.sb-app .sb-home svg { display: block; position: static; top: auto; left: auto; transform: none; width: auto; height: auto; z-index: auto; }
body.sb-app .sb-home .hx-label { margin: 0; font-family: var(--hx-font); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hx-muted); }

/* the black band */
body.sb-app .hx-hero {
    position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 48px;
    margin-bottom: 22px; padding: 44px 50px 38px; border-radius: 18px; color: #fff; background: linear-gradient(160deg, #19191c 0%, #0a0a0b 55%);
}
body.sb-app .sb-home svg.hx-hero-mark { position: absolute; right: 2%; top: 50%; width: 380px; height: 380px; margin-top: -190px; color: #fff; opacity: 0.06; pointer-events: none; }
body.sb-app .sb-home svg.hx-hero-traces { position: absolute; inset: 0; width: 100%; height: 100%; color: #fff; opacity: 0.1; pointer-events: none; }
body.sb-app .hx-hero-main, body.sb-app .hx-hero-stats { position: relative; }
body.sb-app .hx-hero .hx-hero-date { margin-bottom: 18px; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.5); }
body.sb-app .hx-hero-title {
    max-width: 720px; margin: 0; font-family: var(--hx-head); font-weight: 600; font-size: 42px; line-height: 1.15; letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.75); text-wrap: balance;
}
body.sb-app .hx-hero-title em {
    font-family: var(--hx-head); font-style: normal; font-weight: 800; color: #fff; padding: 0 0.04em;
    box-shadow: inset 0 -0.14em 0 rgba(255, 255, 255, 0.2);
}
body.sb-app .hx-todo { display: flex; flex-direction: column; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; font-size: 15px; }
/* each to-do starts with a circuit trace ending in a dot, like the logo */
body.sb-app .hx-todo li { position: relative; padding-left: 30px; }
body.sb-app .hx-todo li::before {
    content: ""; position: absolute; left: 0; top: 0.62em; width: 20px; height: 8px;
    background: radial-gradient(circle at calc(100% - 4px) 50%, #fff 3.5px, transparent 4px), linear-gradient(#fff, #fff) left center / calc(100% - 6px) 2px no-repeat;
}
body.sb-app .hx-todo a { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding-bottom: 1px; transition: border-color 0.2s; }
body.sb-app .hx-todo a:hover { border-bottom-color: #fff; }
body.sb-app .hx-todo .is-calm { color: rgba(255, 255, 255, 0.6); }
body.sb-app .hx-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; padding-left: 6px; }
/* slanted buttons, like the italic wordmark */
body.sb-app .hx-btn {
    display: inline-flex; align-items: center; height: 42px; padding: 0 22px; border-radius: 4px; transform: skewX(-14deg);
    font-family: var(--hx-font); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: #fff !important; border: 1.5px solid rgba(255, 255, 255, 0.35); transition: background 0.2s, border-color 0.2s;
}
body.sb-app .hx-btn > span { display: inline-block; transform: skewX(14deg); }
body.sb-app .hx-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: #fff; }
body.sb-app .hx-btn--light { color: var(--hx-ink) !important; background: #fff; border-color: #fff; }
body.sb-app .hx-btn--light:hover { background: #e9e9ea; }
body.sb-app .hx-hero-stats { align-self: end; display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
body.sb-app .hx-hero-stats > div { padding: 18px 0 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
body.sb-app .hx-hero-stats > div:nth-child(odd) { padding-right: 18px; border-right: 1px solid rgba(255, 255, 255, 0.16); }
body.sb-app .hx-hero-stats > div:nth-child(even) { padding-left: 22px; }
body.sb-app .hx-hero-stats dt { color: rgba(255, 255, 255, 0.5); }
body.sb-app .hx-hero-stats dd { margin: 6px 0 2px; font-family: var(--hx-font); font-style: italic; font-weight: 800; font-size: 54px; line-height: 1; color: #fff; }
body.sb-app .hx-delta { display: block; min-height: 16px; font-family: var(--hx-font); font-size: 12.5px; color: rgba(255, 255, 255, 0.55); }
body.sb-app .hx-hero .hx-hero-foot { grid-column: 1 / -1; margin-top: 12px; color: rgba(255, 255, 255, 0.35); }

/* cards */
body.sb-app .hx-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px; }
body.sb-app .hx-card { grid-column: span 12; min-width: 0; padding: 26px 28px 28px; border-radius: 14px; background: var(--hx-paper); border: 1px solid var(--hx-line); }
body.sb-app .hx-card--heat, body.sb-app .hx-card--pages { grid-column: span 7; }
body.sb-app .hx-card--next, body.sb-app .hx-card--trend { grid-column: span 5; }
body.sb-app .hx-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin-bottom: 22px; }
body.sb-app .hx-card-head h2 {
    display: flex; align-items: center; gap: 12px; margin: 0;
    font-family: var(--hx-head); font-style: normal; font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; color: var(--hx-ink);
}
/* a circuit trace ending in a dot before each title */
body.sb-app .hx-card-head h2::before {
    content: ""; flex: 0 0 26px; height: 10px;
    background: radial-gradient(circle at calc(100% - 5px) 50%, var(--hx-ink) 4.5px, transparent 5px), linear-gradient(var(--hx-ink), var(--hx-ink)) left center / calc(100% - 8px) 3px no-repeat;
}
body.sb-app .hx-link { font-family: var(--hx-font); font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hx-ink) !important; }
body.sb-app .hx-link:hover { text-decoration: underline !important; text-underline-offset: 4px; }
body.sb-app .hx-none { margin: 10px 0; font-size: 14px; color: var(--hx-muted); }
body.sb-app .hx-wait { height: 150px; border-radius: 10px; background: var(--hx-soft); animation: hx-breathe 1.1s ease-in-out infinite alternate; }
body.sb-app .hx-wait--tall { height: 100%; min-height: 380px; border-radius: 0; }
@keyframes hx-breathe { from { opacity: 1; } to { opacity: 0.45; } }

/* when people write: hexagon cells, 7 days × 24 hours */
body.sb-app .hx-card--heat { display: flex; flex-direction: column; }
body.sb-app .hx-heat-grid { display: grid; grid-template-columns: 30px repeat(24, minmax(0, 1fr)) 40px; gap: 3px; align-items: center; }
body.sb-app .hx-heat-total { padding-left: 6px; font-family: var(--hx-font); font-style: italic; font-weight: 800; font-size: 14px; text-align: right; color: var(--hx-ink); }
body.sb-app .hx-heat-cell { position: relative; aspect-ratio: 1 / 1; clip-path: var(--hx-hex); background: var(--hx-soft); transition: transform 0.15s; }
body.sb-app .hx-heat-cell.has { background: rgba(10, 10, 11, var(--v)); }
body.sb-app .hx-heat-cell.is-peak { background: var(--hx-ink); transform: scale(1.18); }
body.sb-app .hx-heat-cell.is-peak::after { content: ""; position: absolute; inset: 33%; border-radius: 50%; background: #fff; }
body.sb-app .hx-heat-cell:hover { transform: scale(1.3); }
body.sb-app .sb-home .hx-heat-day { font-size: 10px; letter-spacing: 0.08em; }
body.sb-app .sb-home .hx-heat-hour { padding-top: 6px; font-size: 9.5px; letter-spacing: 0.06em; }
/* facts to plan the answers (also used under the inbox chart) */
body.sb-app .hx-facts, body.sb-app .hx-trend-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: auto 0 0; padding-top: 18px; border-top: 1px solid var(--hx-line); }
body.sb-app .hx-heat { margin-bottom: 22px; }
body.sb-app .hx-facts dd, body.sb-app .hx-trend-totals dd { margin: 4px 0 0; font-family: var(--hx-font); font-style: italic; font-weight: 800; font-size: 22px; line-height: 1.1; color: var(--hx-ink); }
body.sb-app .hx-fact-note { font-size: 12px; color: var(--hx-muted); }
body.sb-app .hx-trend-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
body.sb-app .hx-trend-totals .hx-swatch { margin-left: 0; }
body.sb-app .hx-card--trend { display: flex; flex-direction: column; }

/* next to go out */
body.sb-app .hx-card--next { display: flex; flex-direction: column; }
body.sb-app .hx-next-top { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); gap: 20px; }
body.sb-app .hx-next-pic { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 10px; background: var(--hx-ink); }
body.sb-app .hx-next-pic > img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.6s var(--sb-ease); }
body.sb-app .hx-next-pic:hover > img { transform: scale(1.03); }
body.sb-app .hx-next-pic.is-empty { background: var(--hx-soft); }
body.sb-app .hx-next-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.sb-app .hx-next-info p { margin: 0; }
body.sb-app .hx-next-when { margin-top: 4px !important; font-family: var(--hx-font); font-style: italic; font-weight: 800; font-size: 20px; line-height: 1.1; text-transform: uppercase; }
body.sb-app .hx-next-time { font-family: var(--hx-font); font-style: italic; font-weight: 800; font-size: 44px; line-height: 1; }
body.sb-app .hx-next-text { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px !important; font-size: 14px; line-height: 1.45; }
body.sb-app .hx-next-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--hx-muted); }
body.sb-app .hx-next-logos { display: inline-flex; gap: 4px; }
body.sb-app .hx-next-logos img { width: 15px; height: 15px; }
body.sb-app .hx-next-open { margin-top: auto; padding-top: 10px; }
body.sb-app .sb-home .hx-next-then { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hx-line); }
body.sb-app .hx-next-rest { margin: 0; padding: 4px 0 0; list-style: none; }
body.sb-app .hx-next-rest li + li { border-top: 1px solid var(--hx-line); }
body.sb-app .hx-next-rest a { display: grid; grid-template-columns: 40px 116px minmax(0, 1fr); align-items: center; gap: 12px; padding: 9px 0; color: var(--hx-ink) !important; }
body.sb-app .hx-next-rest .hx-label { color: var(--hx-ink); letter-spacing: 0.08em; }
body.sb-app .hx-next-rest-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; }
body.sb-app .hx-next-thumb, body.sb-app .hx-stop-thumb, body.sb-app .hx-tile-pic {
    display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--hx-soft);
}
body.sb-app .hx-next-thumb { width: 40px; height: 40px; clip-path: var(--hx-hex); }
body.sb-app .hx-next-thumb > img:not(.hx-logo), body.sb-app .hx-stop-thumb > img:not(.hx-logo), body.sb-app .hx-tile-pic > img:not(.hx-logo) { width: 100%; height: 100%; object-fit: cover; }
body.sb-app .hx-logo { width: 18px; height: 18px; opacity: 0.85; }
body.sb-app .hx-card--next.is-empty { justify-content: flex-end; min-height: 300px; color: #fff; background: var(--hx-ink); border-color: var(--hx-ink); }
body.sb-app .hx-card--next.is-empty h2 { margin: 8px 0 6px; font-family: var(--hx-head); font-weight: 700; font-size: 26px; letter-spacing: -0.015em; }
body.sb-app .hx-card--next.is-empty .hx-label { color: rgba(255, 255, 255, 0.6); }
body.sb-app .hx-next-hint { margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.7); }

/* the journey of the posts: a circuit with hexagon stops, Rejected as a siding */
body.sb-app .hx-metro-line { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, 0.95fr); margin: 4px 0 0; padding: 0; list-style: none; }
body.sb-app .hx-stop { position: relative; text-align: center; }
body.sb-app .hx-stop::before { content: ""; position: absolute; top: 23px; left: 0; right: 0; height: 4px; background: var(--hx-ink); }
body.sb-app .hx-stop:first-child::before { left: 50%; }
body.sb-app .hx-stop[data-status="5"]::before { right: 50%; }
body.sb-app .hx-stop.is-siding::before { right: 50%; background: repeating-linear-gradient(90deg, #b9b9be 0 8px, transparent 8px 14px); }
body.sb-app .hx-stop > a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 6px; color: var(--hx-ink) !important; }
body.sb-app .hx-stop-dot {
    position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; margin-bottom: 8px;
    clip-path: var(--hx-hex); background: var(--hx-ink); font-family: var(--hx-font); font-style: italic; font-weight: 800; font-size: 21px; color: var(--hx-ink);
    transition: transform 0.2s;
}
body.sb-app .hx-stop-dot::before { content: ""; position: absolute; inset: 4px; z-index: -1; clip-path: var(--hx-hex); background: #fff; }
body.sb-app .hx-stop > a:hover .hx-stop-dot { transform: scale(1.08); }
body.sb-app .hx-stop.is-zero .hx-stop-dot { color: #a9a9ae; background: #d4d4d8; }
body.sb-app .hx-stop.is-mine .hx-stop-dot { color: #fff; }
body.sb-app .hx-stop.is-mine .hx-stop-dot::before { display: none; }
body.sb-app .hx-stop-name { font-family: var(--hx-font); font-size: 14.5px; font-weight: 700; }
body.sb-app .hx-stop.is-zero .hx-stop-name { color: var(--hx-muted); font-weight: 500; }
body.sb-app .hx-stop-hint { font-size: 12px; line-height: 1.3; color: var(--hx-muted); }
/* "your move": a black slanted tag */
body.sb-app .hx-stop-move {
    margin-top: 4px; padding: 3px 10px; transform: skewX(-14deg); border-radius: 2px; background: var(--hx-ink);
    font-family: var(--hx-font); font-style: italic; font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
}
body.sb-app .hx-stop-thumbs { display: flex; justify-content: center; min-height: 38px; margin-top: 12px; }
body.sb-app .hx-stop-thumb { width: 36px; height: 36px; margin-left: -7px; clip-path: var(--hx-hex); }
body.sb-app .hx-stop-thumb:first-child { margin-left: 0; }

/* your pages: hexagon pictures */
/* pages with something waiting: one full-width column; "Show all": two columns */
body.sb-app .hx-card--pages { display: flex; flex-direction: column; }
body.sb-app .hx-pages { display: flex; flex: 1; flex-direction: column; }
body.sb-app .hx-pages-list { display: grid; grid-template-columns: minmax(0, 1fr); }
body.sb-app .hx-clear-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
body.sb-app .hx-pages-list[hidden] { display: none; }
body.sb-app .hx-clear { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--hx-line); }
body.sb-app .hx-pages > .hx-pages-list:first-child, body.sb-app .hx-all-answered { margin-bottom: 18px; }
body.sb-app .hx-clear-faces { display: inline-flex; align-items: center; }
body.sb-app .hx-clear-faces .hx-avatar { width: 34px; height: 34px; margin-left: -6px; }
body.sb-app .hx-clear-faces .hx-avatar:first-child { margin-left: 0; }
body.sb-app .hx-clear-faces .hx-avatar-face { font-size: 10px; }
body.sb-app .hx-clear-faces .hx-avatar-platform { width: 13px; height: 13px; right: -2px; bottom: 0; }
body.sb-app .hx-clear-more { margin-left: 8px; font-family: var(--hx-font); font-weight: 700; font-size: 13px; color: var(--hx-muted); }
body.sb-app .hx-clear-text { font-size: 13.5px; color: var(--hx-muted); }
body.sb-app .hx-clear-toggle { margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer; }
body.sb-app .hx-clear-list { margin-top: 6px; }
body.sb-app .hx-all-answered { font-family: var(--hx-font); font-style: italic; font-weight: 700; font-size: 18px; color: var(--hx-ink); }
body.sb-app .hx-page { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--hx-line); }
body.sb-app .hx-avatar { position: relative; width: 48px; height: 48px; }
body.sb-app .hx-avatar-face {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; clip-path: var(--hx-hex);
    font-family: var(--hx-font); font-weight: 700; font-size: 14px; color: var(--hx-ink); background: #e9e9eb;
}
body.sb-app .hx-avatar-face > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
body.sb-app .hx-avatar.has-picture .hx-avatar-face > img { opacity: 1; }
body.sb-app .hx-avatar-platform { position: absolute; right: -3px; bottom: -1px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #fff; }
body.sb-app .hx-page-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.sb-app .hx-page-name strong, body.sb-app .hx-page-name small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body.sb-app .hx-page-name strong { font-size: 14.5px; font-weight: 600; }
body.sb-app .hx-page-name small { font-size: 12px; color: var(--hx-muted); }
body.sb-app .hx-page.is-quiet .hx-page-name strong { color: var(--hx-muted); font-weight: 500; }
body.sb-app .hx-page-count { display: flex; flex-direction: column; align-items: flex-end; }
body.sb-app .hx-page-count b { font-family: var(--hx-font); font-style: italic; font-weight: 800; font-size: 30px; line-height: 1; color: var(--hx-ink); }
body.sb-app .hx-page-count.is-clear .hx-label { color: var(--hx-ink); }

/* inbox, 14 days */
body.sb-app .hx-swatch { display: inline-block; width: 18px; height: 3px; margin: 0 6px 2px 14px; vertical-align: middle; }
body.sb-app .hx-swatch--msg { background: var(--hx-ink); }
body.sb-app .hx-swatch--com { background: repeating-linear-gradient(90deg, #8e8e93 0 5px, transparent 5px 8px); }
body.sb-app .sb-home svg.hx-trend-svg { width: 100%; height: auto; overflow: visible; }
body.sb-app .hx-trend-svg .hx-trend-grid { stroke: var(--hx-line); stroke-width: 1; stroke-dasharray: 2 5; }
body.sb-app .hx-trend-svg .hx-trend-area { fill: rgba(10, 10, 11, 0.06); stroke: none; }
body.sb-app .hx-trend-svg .hx-trend-msg { fill: none; stroke: var(--hx-ink); stroke-width: 2.8; stroke-linecap: round; }
body.sb-app .hx-trend-svg .hx-trend-com { fill: none; stroke: #8e8e93; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 5; }
body.sb-app .hx-trend-svg .hx-trend-dot { fill: var(--hx-ink); stroke: #fff; stroke-width: 2.5; stroke-dasharray: none; }
body.sb-app .hx-trend-svg .hx-trend-label { font-family: var(--hx-font); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; fill: var(--hx-muted); }
body.sb-app .hx-trend-svg .hx-trend-label.is-today { fill: var(--hx-ink); font-weight: 700; }
body.sb-app .hx-trend-svg .hx-trend-hit { fill: transparent; stroke: none; }
body.sb-app .hx-trend-svg .hx-trend-hit:hover { fill: rgba(10, 10, 11, 0.04); }

/* published lately: one large picture, six small */
body.sb-app .hx-mosaic { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
body.sb-app .hx-tile { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 10px; background: var(--hx-soft); }
body.sb-app .hx-tile.is-big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
body.sb-app .hx-tile-pic { position: absolute; inset: 0; }
body.sb-app .hx-tile-pic > img:not(.hx-logo) { transition: transform 0.6s var(--sb-ease); }
body.sb-app .hx-tile:hover .hx-tile-pic > img:not(.hx-logo) { transform: scale(1.05); }
body.sb-app .hx-tile.is-big::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 11, 0) 45%, rgba(10, 10, 11, 0.75) 100%); }
body.sb-app .hx-tile-caption {
    position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 52px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    font-family: var(--hx-font); font-weight: 600; font-size: 21px; line-height: 1.2; color: #fff;
}
body.sb-app .hx-tile-info {
    position: absolute; z-index: 1; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px;
    border-radius: 3px; background: var(--hx-ink);
}
body.sb-app .hx-tile.is-big .hx-tile-info { left: 18px; bottom: 16px; }
body.sb-app .hx-tile-info img { width: 15px; height: 15px; border-radius: 50%; background: #fff; }
body.sb-app .sb-home .hx-tile-info .hx-label { font-size: 10px; letter-spacing: 0.08em; color: #fff; }
body.sb-app .hx-play { position: absolute; z-index: 1; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; clip-path: var(--hx-hex); background: rgba(10, 10, 11, 0.7); }
body.sb-app .hx-play::after { content: ""; position: absolute; left: 15px; top: 12px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; }

@media (max-width: 1199.98px) {
    body.sb-app .hx-hero { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    body.sb-app .hx-hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body.sb-app .hx-hero-stats > div:nth-child(odd), body.sb-app .hx-hero-stats > div:nth-child(even) { padding: 18px 16px 16px; border-right: 1px solid rgba(255, 255, 255, 0.16); }
    body.sb-app .hx-hero-stats > div:first-child { padding-left: 0; }
    body.sb-app .hx-card--heat, body.sb-app .hx-card--pages, body.sb-app .hx-card--next, body.sb-app .hx-card--trend { grid-column: span 12; }
}
@media (max-width: 899.98px) {
    /* the circuit runs down instead of across */
    body.sb-app .hx-metro-line { display: flex; flex-direction: column; }
    body.sb-app .hx-stop { text-align: left; }
    body.sb-app .hx-stop::before, body.sb-app .hx-stop:first-child::before, body.sb-app .hx-stop[data-status="5"]::before, body.sb-app .hx-stop.is-siding::before {
        top: 0; bottom: 0; left: 23px; right: auto; width: 4px; height: auto;
    }
    body.sb-app .hx-stop:first-child::before { top: 25px; }
    body.sb-app .hx-stop[data-status="5"]::before { bottom: auto; height: 25px; }
    body.sb-app .hx-stop.is-siding::before { top: 0; height: 25px; background: repeating-linear-gradient(180deg, #b9b9be 0 6px, transparent 6px 11px); }
    body.sb-app .hx-stop > a { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 0 14px; padding: 6px 0; }
    body.sb-app .hx-stop-dot { grid-row: span 3; margin: 0; }
    body.sb-app .hx-stop-name, body.sb-app .hx-stop-hint, body.sb-app .hx-stop-move { grid-column: 2; justify-self: start; }
    body.sb-app .hx-stop-thumbs { grid-column: 3; grid-row: 1 / span 3; margin: 0; }
}
@media (max-width: 767.98px) {
    body.sb-app .sb-home { padding: 12px 12px 32px !important; }
    body.sb-app .hx-hero { padding: 30px 22px 24px; border-radius: 14px; }
    body.sb-app .hx-hero-title { font-size: 31px; }
    body.sb-app .sb-home svg.hx-hero-mark { width: 260px; height: 260px; right: -60px; top: 120px; margin-top: 0; }
    body.sb-app .hx-hero-stats { grid-template-columns: 1fr 1fr; }
    body.sb-app .hx-hero-stats > div:nth-child(odd) { padding: 16px 14px 14px 0; }
    body.sb-app .hx-hero-stats > div:nth-child(even) { padding: 16px 0 14px 16px; border-right: 0; }
    body.sb-app .hx-hero-stats dd { font-size: 44px; }
    body.sb-app .hx-grid { gap: 14px; }
    body.sb-app .hx-card { padding: 20px 18px 22px; border-radius: 12px; }
    body.sb-app .hx-card-head h2 { font-size: 19px; }
    body.sb-app .hx-heat-grid { gap: 1.5px; }
    body.sb-app .sb-home .hx-heat-hour { font-size: 8px; }
    body.sb-app .hx-pages-list, body.sb-app .hx-clear-list { grid-template-columns: minmax(0, 1fr); }
    body.sb-app .hx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.sb-app .hx-heat-grid { grid-template-columns: 22px repeat(24, minmax(0, 1fr)) 26px; }
    body.sb-app .hx-heat-total { font-size: 10px; padding-left: 2px; }
    body.sb-app .hx-next-time { font-size: 36px; }
    body.sb-app .hx-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    body.sb-app .hx-tile.is-big { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
    body.sb-app .hx-tile-caption { font-size: 18px; }
}

/* Toast: a short message in the corner (e.g. a reply Meta refused) */
.sb-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 2000;
    max-width: min(420px, calc(100vw - 40px));
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.45;
    color: #fff;
    background: rgba(17, 18, 24, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--sb-shadow-lg);
    animation: sb-rise 0.35s var(--sb-ease) backwards;
    transition: opacity 0.5s, transform 0.5s;
}
.sb-toast-out { opacity: 0; transform: translateY(8px); }
@media (max-width: 767.98px) { .sb-toast { bottom: calc(var(--sb-tabbar, 64px) + 24px); } }

/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */
@keyframes sb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sb-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sb-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes sb-slide-right { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes sb-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes sb-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes sb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes sb-dash { to { stroke-dashoffset: 0; } }
@keyframes sb-pulse { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }

@media (prefers-reduced-motion: reduce) {
    body.sb-app *, body.sb-app *::before, body.sb-app *::after,
    body.sb-auth *, body.sb-auth *::before, body.sb-auth *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --------------------------------------------------------------------------
   Phones and small tablets: tab bar at the bottom, pages list under the top bar
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    :root {
        --sb-top: 60px;
        --sb-gap: 10px;
        --sb-tabbar: 64px;
    }

    body.sb-app .sb-topbar { padding: 0 14px; }
    body.sb-app .sb-brand-full { width: 136px; }
    body.sb-app .sb-user-text { display: none; }
    body.sb-app .userProfile { width: 38px !important; height: 38px !important; }
    body.sb-app .sub-menu-wrapper { right: 10px; width: min(280px, calc(100vw - 20px)); }

    body.sb-app .actionsBar {
        top: auto;
        bottom: calc(var(--sb-gap) + env(safe-area-inset-bottom, 0px));
        left: var(--sb-gap);
        right: var(--sb-gap);
        width: auto;
        height: var(--sb-tabbar);
        padding: 0 6px;
        border-radius: 22px;
        animation-name: sb-rise;
    }
    body.sb-app .actionsBar .nav-list {
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        height: 100%;
        gap: 0;
    }
    body.sb-app .actionsBar li { flex: 1 1 0; display: flex; justify-content: center; }
    body.sb-app .actionsBar li a {
        flex-direction: column;
        gap: 3px;
        width: 100%;
        max-width: 64px;
        height: 52px;
    }
    body.sb-app .actionsBar li i { font-size: 20px; }
    body.sb-app .actionsBar .sb-nav-label {
        position: static;
        padding: 0;
        font-size: 9.5px;
        font-weight: 500;
        color: var(--sb-muted);
        background: none;
        box-shadow: none;
        opacity: 1;
        transform: none;
    }
    body.sb-app .actionsBar li.active .sb-nav-label { color: #fff; }
    body.sb-app .actionsBar li.active a::before { display: none; }

    body.sb-app .home-section,
    body.sb-app .sidebar ~ .home-section,
    body.sb-app .sidebar.open ~ .home-section {
        left: 0 !important;
        padding: var(--sb-gap) var(--sb-gap) calc(var(--sb-tabbar) + 28px) !important;
    }

    /* Pages list: one horizontal, scrollable row under the top bar */
    body.sb-app .sidebar,
    body.sb-app .sidebar.open {
        top: calc(var(--sb-top) + 6px);
        left: var(--sb-gap);
        right: var(--sb-gap);
        bottom: auto;
        width: auto;
        height: 62px;
        padding: 0 6px;
        display: flex;
        align-items: center;
        border-radius: 18px;
    }
    body.sb-app .sidebar .logo-details,
    body.sb-app .sidebar > .nav-list { display: none !important; }
    body.sb-app .sidebar .AccountsArea {
        position: static;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        width: 100%;
        height: 100% !important;
        margin: 0;
        padding: 0 4px;
        border-top: 0;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }
    body.sb-app .sidebar .AccountsArea > * { flex: 0 0 auto; width: auto !important; }
    body.sb-app .sidebar li.Account { margin: 0; }
    body.sb-app .sidebar li.Account > a,
    body.sb-app .sidebar.open li.Account > a { width: 50px; height: 50px; padding: 0; justify-content: center; }
    body.sb-app .sidebar li.Account.active > a { background: transparent !important; box-shadow: none; }
    body.sb-app .sidebar li.Account .links_name { display: none !important; }
    body.sb-app .chatFilterSection .btn,
    body.sb-app .chatFilterSection button { font-size: 13px; }
    /* Reports: date range and period on their own full-width line */
    body.sb-app .ReportsSection .d-flex.justify-content-start { margin-left: 0 !important; }
    body.sb-app .ReportsSection .d-flex > input[name="daterange"],
    body.sb-app .ReportsSection .d-flex > #filterSelect { flex: 1 1 100%; width: 100% !important; margin: 0 !important; }
    body.sb-app .ReportsSection .d-flex > .btn { margin: 0 !important; }
    body.sb-app .ReportsSection #exportReporting { margin-left: 0 !important; order: 0 !important; }
    body.sb-app .sidebar ~ .home-section { top: calc(var(--sb-top) + 74px) !important; }

    /* Inbox: list above the conversation instead of side by side */
    body.sb-app .InboxSection > .d-flex { flex-direction: column; height: auto !important; }
    body.sb-app .InboxSection .section,
    body.sb-app .InboxSection > .d-flex > div { width: 100% !important; height: auto !important; max-height: none; }
    body.sb-app .InboxSection .section { max-height: 60vh; }

    /* Lists, forms and tables use the full width */
    body.sb-app .posts-listing, body.sb-app .stories-listing { padding: 6px 0 !important; margin-top: 6px; }
    body.sb-app .posts-listing .row > div[style*="position: absolute"] { width: calc(100% - 20px) !important; }
    body.sb-app .noDataAlert { width: calc(100% - 20px) !important; }
    body.sb-app .table-responsive, body.sb-app .dataTables_wrapper { overflow-x: auto; padding: 10px; }
    body.sb-app .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { width: 100% !important; }
    body.sb-app .home-section .d-flex.justify-content-between,
    body.sb-app .home-section .d-flex.justify-content-start { flex-wrap: wrap; gap: 8px; }
    body.sb-app .home-section .d-flex.justify-content-between > .form-group { margin-left: 0 !important; margin-right: 0 !important; }
    body.sb-app .home-section .row > [class*="col-md-"],
    body.sb-app .home-section .row > [class*="col-lg-"] { flex: 0 0 100%; max-width: 100%; }
    body.sb-app .mediaHeight { height: 46vh; }
    body.sb-app #CreatePostSection > .row > .col-md-7 > div,
    body.sb-app #UpdatePostSection > .row > .col-md-7 > div { position: static; margin: 14px 0 0 !important; min-height: 0; max-height: none; padding: 16px 12px 20px; }
    /* post page: its half-width panels use the whole screen */
    body.sb-app .home-section div[style*="width: 50%;margin: 0 auto"],
    body.sb-app .home-section .block-width { width: 100% !important; }
    body.sb-app .home-section div[style*="border-radius: 25px;padding: 30px"] { padding: 18px !important; }
    body.sb-app h1 { font-size: 26px; }
}

@media (max-width: 767.98px) {
    body.sb-app .filterActions,
    body.sb-app .filterActions > .d-flex { flex-wrap: wrap; gap: 8px; }
    body.sb-app .filterActions .dropdown { margin-right: 0 !important; }
    body.sb-app .filterActions .btn { margin: 0 !important; }
}

@media (max-width: 480px) {
    body.sb-app .actionsBar .sb-nav-label { display: none; }
    body.sb-app .actionsBar li.active .sb-nav-label { display: block; }
    body.sb-app .actionsBar li.active a { max-width: none; padding: 0 12px; }
    body.sb-app .actionsBar li.active { flex: 1.6 1 0; }
}

/* ==========================================================================
   Login and password pages
   ========================================================================== */
body.sb-auth { min-height: 100vh; overflow-x: hidden; }
body.sb-auth main { min-height: 100vh; }
body.sb-auth .sb-auth-logo { position: absolute; top: 26px; left: 30px; z-index: 2; animation: sb-drop 0.5s var(--sb-ease) backwards; }
body.sb-auth .sb-auth-logo img { width: 170px; }

/* Generic card (password reset, confirm, verify) */
body.sb-auth .sb-auth-plain { min-height: 100vh; display: flex; align-items: center; padding: 100px 16px 40px; }
body.sb-auth .sb-auth-plain .container { max-width: 640px; }
body.sb-auth .sb-auth-plain .container > br { display: none; }
body.sb-auth .sb-auth-plain .row { margin-top: 0 !important; }
body.sb-auth .sb-auth-plain .row > [class*="col-md-"] { flex: 0 0 100%; max-width: 100%; margin-left: 0; }
body.sb-auth .sb-auth-plain .col-form-label { text-align: left !important; padding-bottom: 6px; }
body.sb-auth .sb-auth-plain .btn { min-height: 46px; padding: 0 22px; }
body.sb-auth .card {
    border: 1px solid var(--sb-glass-border);
    border-radius: 24px;
    background: var(--sb-glass);
    -webkit-backdrop-filter: var(--sb-blur);
    backdrop-filter: var(--sb-blur);
    box-shadow: var(--sb-shadow-lg);
    overflow: hidden;
    animation: sb-rise 0.6s var(--sb-ease) backwards;
}
body.sb-auth .card-header { background: transparent; border-bottom: 1px solid var(--sb-line); font-weight: 600; font-size: 18px; padding: 20px 24px; }
body.sb-auth .card-header:empty { display: none; }
body.sb-auth .card-body { padding: 26px 24px; }

/* Login: brand panel + form */
.sb-login {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
.sb-login-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 44px 52px;
    color: #fff;
    background:
        radial-gradient(60% 50% at 20% 10%, rgba(255, 255, 255, 0.12), transparent 70%),
        radial-gradient(50% 50% at 90% 90%, rgba(120, 128, 160, 0.25), transparent 70%),
        linear-gradient(150deg, #23242c 0%, #0b0b0f 65%);
}
.sb-login-brand > * { position: relative; z-index: 1; }
.sb-login-logo { width: 190px; filter: invert(1); animation: sb-drop 0.6s var(--sb-ease) backwards; }
.sb-login-copy { max-width: 440px; animation: sb-rise 0.7s var(--sb-ease) 0.1s backwards; }
.sb-login-copy h1 { color: #fff; font-size: 38px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 16px; }
.sb-login-copy p { color: rgba(255, 255, 255, 0.72); font-size: 15px; line-height: 1.7; margin: 0; }
.sb-login-points { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; padding: 0; list-style: none; }
.sb-login-points li {
    padding: 8px 14px;
    border-radius: 99px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.sb-login-foot { font-size: 12.5px; color: rgba(255, 255, 255, 0.5); }

/* The logo's network, drawn and slowly animated */
.sb-network {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0 !important;
    opacity: 0.6;
    -webkit-mask-image: linear-gradient(100deg, transparent 18%, rgba(0, 0, 0, 0.35) 45%, #000 75%);
    mask-image: linear-gradient(100deg, transparent 18%, rgba(0, 0, 0, 0.35) 45%, #000 75%);
}
.sb-network path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.35);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    animation: sb-dash 3.2s var(--sb-ease) forwards;
}
.sb-network path:nth-of-type(2) { animation-delay: 0.3s; }
.sb-network path:nth-of-type(3) { animation-delay: 0.6s; }
.sb-network path:nth-of-type(4) { animation-delay: 0.9s; }
.sb-network circle { fill: #fff; transform-box: fill-box; transform-origin: center; animation: sb-pulse 3.2s ease-in-out infinite; }
.sb-network circle:nth-of-type(2n) { animation-delay: 0.8s; }
.sb-network circle:nth-of-type(3n) { animation-delay: 1.6s; }

.sb-login-panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.sb-login-card {
    width: 100%;
    max-width: 420px;
    padding: 38px 34px 32px;
    border: 1px solid var(--sb-glass-border);
    border-radius: 26px;
    background: var(--sb-glass);
    -webkit-backdrop-filter: var(--sb-blur);
    backdrop-filter: var(--sb-blur);
    box-shadow: var(--sb-shadow-lg);
    animation: sb-rise 0.7s var(--sb-ease) 0.15s backwards;
}
.sb-login-card .sb-login-mark { width: 46px; height: 46px; margin-bottom: 18px; }
.sb-login-card h2 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 6px; color: var(--sb-text); }
.sb-login-card .sb-login-sub { color: var(--sb-muted); font-size: 14px; margin-bottom: 26px; }
.sb-field { margin-bottom: 16px; }
.sb-field label { display: block; font-size: 13px; margin-bottom: 6px; }
.sb-input { position: relative; }
.sb-input > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--sb-subtle); font-size: 15px; pointer-events: none; transition: color 0.2s; }
.sb-input .form-control { padding-left: 40px; min-height: 48px; }
.sb-input:focus-within > i { color: var(--sb-ink); }
.sb-login-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 22px; font-size: 13.5px; }
.sb-login-row .form-check-label { color: var(--sb-ink-3); font-weight: 400; }
.sb-login-row a { color: var(--sb-ink); font-weight: 500; }
.sb-login-submit { width: 100%; min-height: 50px; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.sb-login-submit i { transition: transform 0.25s var(--sb-ease); }

/* Invitation page (auth/invitation): the invitation's details and the two name fields side by side */
.sb-invite-facts { margin: 0 0 18px; padding: 10px 14px; border: 1px solid var(--sb-line); border-radius: 14px; background: rgba(255, 255, 255, 0.6); }
.sb-invite-facts div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14px; }
.sb-invite-facts div + div { border-top: 1px solid var(--sb-line); }
.sb-invite-facts dt { flex: 0 0 auto; margin: 0; font-weight: 500; color: var(--sb-muted); white-space: nowrap; }
.sb-invite-facts dd { min-width: 0; margin: 0; font-weight: 600; color: var(--sb-ink); text-align: right; overflow-wrap: anywhere; }
.sb-invite-names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.sb-invite-note { margin: -6px 0 14px; padding: 9px 12px; border-radius: 10px; background: rgba(161, 98, 7, 0.08); border: 1px solid rgba(161, 98, 7, 0.22); font-size: 13px; color: var(--sb-ink-2, #3b3b44); }
@media (max-width: 480px) { .sb-invite-names { grid-template-columns: minmax(0, 1fr); } }
.sb-login-submit:hover i { transform: translateX(4px); }
.sb-login-card .invalid-feedback { font-size: 12.5px; }

@media (max-width: 991.98px) {
    .sb-login { grid-template-columns: 1fr; }
    .sb-login-brand { min-height: 300px; padding: 28px 24px 64px; }
    .sb-network { opacity: 0.4; }
    .sb-login-copy h1 { font-size: 27px; margin-top: 30px; }
    .sb-login-points, .sb-login-foot { display: none; }
    .sb-login-panel { margin-top: -34px; padding: 0 16px 40px; align-items: flex-start; }
    .sb-login-card { padding: 30px 22px 26px; }
}