/* Concept C ghost battle lobby (/ghost-battle). Page shell, hero, buttons and
   chips come from flow.css; this file only styles the record groups. Accent
   roles follow flow.css: gold = the best record to beat, blue = primary action,
   teal = supporting stats. Radius rule: panels/cards/buttons 8px, chips pill. */

/* ---------------------------------------------------------------- hero */
/* The ghost sits upper-right in the source art, so the default centre crop of
   .sfc-hero-img cuts it off on this short band — bias the window upward. */
.ghl-hero .sfc-hero-img {
    object-position: right 28%;
}

/* ---------------------------------------------------------------- states */
.ghl-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 44px 24px;
    border: 1px solid var(--sfc-line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--sfc-muted);
    font-size: 14.5px;
    font-weight: 600;
}

.ghl-loading i {
    color: var(--sfc-blue);
}

/* empty state — image-led, same split as the course cards */
.ghl-empty {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--sfc-line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(27, 78, 96, 0.10);
}

.ghl-empty-media {
    position: relative;
    min-height: 220px;
    background: var(--sfc-navy);
}

.ghl-empty-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ghl-empty-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 34px 36px;
}

.ghl-empty-copy h2 {
    margin: 12px 0 0;
    color: var(--sfc-navy);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
}

.ghl-empty-copy p {
    margin: 10px 0 22px;
    max-width: 40em;
    color: var(--sfc-muted);
    font-size: 14.5px;
    line-height: 1.7;
}

/* ---------------------------------------------------------------- groups */
/* Card grid.
   Deliberately the same geometry as .sfc-lessongrid in flow.css — the lesson
   menu is the surface students know, and the lobby is a list of the same
   lessons. It previously invented its own flatter treatment on a page that
   already loads flow.css. */
.ghl-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
    align-items: stretch;
}

/* Mirrors .sfc-lesson: soft-tinted surface, blue border and a 1px lift on
   hover, so a card reads as the same kind of object as a lesson tile. */
.ghl-card {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 11px 12px;
    border: 1px solid #dde8ec;
    border-radius: 8px;
    background: #fbfdfd;
    transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.ghl-card:hover {
    border-color: var(--sfc-blue);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(22, 118, 163, 0.10);
}

.ghl-card-top {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

/* The IME badge takes the slot .sfc-lesson-num uses for the lesson number:
   same 34px rounded square, so the two surfaces scan alike. */
.ghl-card-badge {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #e7f1f4;
    color: var(--sfc-blue-dark);
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
}

.ghl-card-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.ghl-card-title {
    margin: 0;
    color: var(--sfc-navy);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ghl-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin: 2px 0 0;
    color: #8ba1aa;
    font-size: 11.5px;
}

/* The score to beat, framed as a result rather than a statistic. */
.ghl-card-best {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 0;
    padding: 7px 9px;
    border-radius: 8px;
    background: #eef6fa;
    color: var(--sfc-muted);
    font-size: 11.5px;
}

.ghl-card-wpm {
    color: var(--sfc-blue-dark);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
}

.ghl-card-acc {
    margin-left: auto;
    color: var(--sfc-teal-dark);
    font-weight: 700;
}

.ghl-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

/* flow.css's .sfc-btn is a heavy 3D primary; twenty of them on one screen is
   noise, so the card action borrows its shape and colour at a lighter weight. */
.ghl-card-go {
    flex: 1 1 auto;
    padding: 7px 10px;
    border: 1px solid var(--sfc-blue);
    border-radius: 8px;
    background: #ffffff;
    color: var(--sfc-blue-dark);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.ghl-card-go:hover {
    background: var(--sfc-blue);
    color: #ffffff;
}

.ghl-card-more {
    flex: 0 0 auto;
    padding: 6px 8px;
    border: 0;
    background: transparent;
    color: var(--sfc-muted);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
}

.ghl-card-more:hover {
    color: var(--sfc-blue-dark);
    text-decoration: underline;
}

/* Tabs — a segmented control matching the 列表 / 格狀 toggle rather than a
   second, unrelated tab idiom on the same screen. */
.ghl-tabs {
    display: inline-flex;
    gap: 4px;
    margin: 0 0 12px;
    padding: 4px;
    border: 1px solid var(--sfc-line);
    border-radius: 10px;
    background: #ffffff;
}

.ghl-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--sfc-muted);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.ghl-tab:hover {
    color: var(--sfc-navy);
}

.ghl-tab.is-active {
    background: var(--sfc-blue);
    color: #ffffff;
}

.ghl-tab-count {
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(18, 61, 80, 0.08);
    font-size: 11px;
}

.ghl-tab.is-active .ghl-tab-count {
    background: rgba(255, 255, 255, 0.22);
}

.ghl-group {
    overflow: hidden;
    border: 1px solid var(--sfc-line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(27, 78, 96, 0.08);
}

.ghl-group-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--sfc-line);
    background: var(--sfc-soft);
}

.ghl-ime {
    background: #e7f1f4;
    border: 1px solid #c6dee6;
    color: var(--sfc-blue-dark);
}

.ghl-article {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--sfc-muted);
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ghl-count {
    flex: 0 0 auto;
    color: #8ba1aa;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.ghl-count b {
    color: var(--sfc-navy);
    font-weight: 800;
}

/* expander for records past the collapsed view */
.ghl-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    height: 34px;
    margin-top: 8px;
    border: 1px dashed #cddde3;
    border-radius: 8px;
    background: transparent;
    color: var(--sfc-blue-dark);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ghl-more:hover {
    border-style: solid;
    border-color: var(--sfc-blue);
    background: #f2f8fa;
}

.ghl-more i {
    font-size: 10px;
}

/* ---------------------------------------------------------------- delete */
/* Destructive and unrecoverable (records exist only in this browser), so these
   stay quiet until hovered rather than competing with the 挑戰 actions. */
.ghl-clear,
.ghl-del {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #9db3bc;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Icon-only: the label used to spell out what removal does, which was long and
   still ambiguous. The confirm dialog carries that explanation instead. */
.ghl-clear {
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 13px;
}

.ghl-del {
    width: 36px;
    height: 36px;
    font-size: 13px;
}

.ghl-clear:hover,
.ghl-del:hover {
    border-color: #e6bdb8;
    background: #fdf3f2;
    color: #c0564f;
}

.ghl-clear:disabled,
.ghl-del:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ghl-clear:disabled:hover,
.ghl-del:disabled:hover {
    border-color: transparent;
    background: transparent;
    color: #9db3bc;
}

.ghl-best-actions,
.ghl-row-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

/* whole list dims while a delete is in flight */
.ghl-groups.is-busy {
    opacity: 0.6;
    pointer-events: none;
}

.ghl-error {
    margin: 0 0 14px;
    padding: 12px 16px;
    border: 1px solid #e6bdb8;
    border-radius: 8px;
    background: #fdf3f2;
    color: #a8443d;
    font-size: 13.5px;
    font-weight: 700;
}

/* --- the record to beat --- */
.ghl-best {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 20px;
    background: linear-gradient(100deg, #fdf6e8 0%, #fffdf8 62%, #ffffff 100%);
    border-bottom: 1px solid #f0e4cc;
}

.ghl-best-medal {
    display: inline-flex;
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(160deg, #f0b64b, var(--sfc-gold-dark));
    color: #ffffff;
    font-size: 21px;
    box-shadow: 0 6px 16px rgba(168, 116, 30, 0.30);
}

.ghl-best-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.ghl-best-label {
    display: block;
    color: var(--sfc-gold-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.ghl-best-value {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 3px;
}

.ghl-best-wpm {
    color: var(--sfc-navy);
    font-size: 38px;
    font-weight: 800;
    line-height: 1.05;
}

.ghl-best-unit {
    color: var(--sfc-muted);
    font-size: 13px;
    font-weight: 700;
}

.ghl-best-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 7px;
    color: var(--sfc-muted);
    font-size: 12.5px;
    font-weight: 600;
}

.ghl-best-meta b {
    color: #4a6875;
    font-weight: 800;
}

.ghl-best .sfc-btn {
    flex: 0 0 auto;
}

/* --- the rest --- */
.ghl-others {
    padding: 18px 20px 20px;
}

.ghl-others-label {
    margin: 0 0 11px;
    color: #8ba1aa;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

/* At most two "other" records per group (TOP_RECORDS_PER_GROUP = 3), so rows
   fill the panel far better than a card grid would — and they echo the
   horizontal rhythm of the best band above. */
.ghl-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ghl-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 14px;
    border: 1px solid #dde8ec;
    border-radius: 8px;
    background: #fbfdfd;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ghl-row:hover {
    border-color: var(--sfc-blue);
    box-shadow: 0 8px 18px rgba(22, 118, 163, 0.08);
}

.ghl-row-value {
    display: flex;
    min-width: 92px;
    align-items: baseline;
    gap: 5px;
}

.ghl-row-wpm {
    color: var(--sfc-navy);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.1;
}

.ghl-rank {
    display: inline-flex;
    min-width: 26px;
    height: 22px;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    border-radius: 999px;
    background: #e7f1f4;
    color: var(--sfc-blue-dark);
    font-size: 11.5px;
    font-weight: 800;
}

.ghl-when {
    margin-left: auto;
    color: #97abb3;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.ghl-card-unit {
    color: #8ba1aa;
    font-size: 11.5px;
    font-weight: 700;
}

.ghl-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.ghl-tag {
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef4f6;
    color: #6f8792;
    font-size: 11.5px;
    font-weight: 700;
}

.ghl-card-btn {
    display: inline-flex;
    height: 36px;
    padding: 0 16px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #bfd8e1;
    border-radius: 8px;
    background: #ffffff;
    color: var(--sfc-blue-dark);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ghl-card-btn:hover {
    border-color: var(--sfc-blue);
    background: var(--sfc-blue);
    color: #ffffff;
}

.ghl-card-btn i {
    font-size: 11px;
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 820px) {
    .ghl-empty {
        grid-template-columns: minmax(0, 1fr);
    }

    .ghl-empty-media {
        min-height: 160px;
    }

    .ghl-empty-copy {
        padding: 26px 24px 30px;
    }

    .ghl-best {
        flex-wrap: wrap;
        gap: 14px;
        padding: 18px 16px;
    }

    .ghl-best-copy {
        flex: 1 1 160px;
    }

    .ghl-best-actions {
        width: 100%;
    }

    .ghl-best-actions .sfc-btn {
        flex: 1 1 auto;
    }

    .ghl-others {
        padding: 16px 16px 18px;
    }

    .ghl-group-head {
        padding: 12px 16px;
    }
}

/* Below this the row's five columns start squeezing the chips into a tall
   stack, so let the row itself wrap instead. */
@media (max-width: 640px) {
    .ghl-row {
        flex-wrap: wrap;
        gap: 9px 12px;
    }

    .ghl-row-value {
        min-width: 0;
    }

    .ghl-card-chips {
        flex: 1 1 100%;
        order: 3;
    }

    .ghl-when {
        order: 2;
    }

    .ghl-row-actions {
        order: 4;
        width: 100%;
    }

    .ghl-row-actions .ghl-card-btn {
        flex: 1 1 auto;
    }
}

@media (max-width: 480px) {
    .ghl-best-wpm {
        font-size: 32px;
    }

    .ghl-best-medal {
        width: 46px;
        height: 46px;
        font-size: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ghl-row,
    .ghl-card-btn {
        transition: none;
    }
}

/* ==========================================================================
   Toolbar + list view
   List is the default: one row per lesson stays scannable as a student works
   through many lessons, where a card grid does not.
   ========================================================================== */

.ghl-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 18px 0 12px;
}

.ghl-viewtoggle {
    display: inline-flex;
    border: 1px solid var(--sfc-line);
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

.ghl-viewbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 0;
    background: transparent;
    color: var(--sfc-muted);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.ghl-viewbtn + .ghl-viewbtn {
    border-left: 1px solid var(--sfc-line);
}

.ghl-viewbtn.is-active {
    background: var(--sfc-blue);
    color: #ffffff;
}

.ghl-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sfc-muted);
    font-size: 14px;
}

.ghl-sort select {
    padding: 7px 10px;
    border: 1px solid var(--sfc-line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--sfc-navy);
    font: inherit;
}

.ghl-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ghl-list.is-busy {
    opacity: 0.6;
    pointer-events: none;
}

.ghl-item {
    border: 1px solid var(--sfc-line);
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
}

.ghl-item.is-open {
    border-color: var(--sfc-blue);
}

.ghl-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ghl-item-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ghl-item-title {
    font-weight: 700;
    color: var(--sfc-navy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ghl-item-sub {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--sfc-muted);
}

.ghl-item-chevron {
    flex: 0 0 auto;
    color: var(--sfc-muted);
}

.ghl-item-body {
    padding: 0 16px 14px;
    border-top: 1px dashed var(--sfc-line);
}

.ghl-item-body .ghl-rows {
    margin-top: 12px;
}

.ghl-row.is-best {
    border-color: var(--sfc-blue);
}

@media (max-width: 640px) {
    .ghl-toolbar {
        justify-content: stretch;
    }

    .ghl-viewtoggle,
    .ghl-sort {
        flex: 1 1 auto;
    }

    .ghl-item-title {
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ghl-item,
    .ghl-viewbtn {
        transition: none;
    }
}

/* Section heading separating 校內練習 from 個人練習 in the list view. */
.ghl-section {
    margin: 18px 0 8px;
    font-size: 14px;
    font-weight: 800;
    color: var(--sfc-muted);
    letter-spacing: .02em;
}

.ghl-list > div:first-child .ghl-section {
    margin-top: 4px;
}

/* Paging control. A finished curriculum is ~230 groups, so the lobby loads a
   page at a time and this is how the rest is reached. */
.ghl-more {
    display: flex;
    justify-content: center;
    padding: 20px 0 4px;
}

.ghl-more-btn[disabled] {
    opacity: 0.65;
    cursor: default;
}

.ghl-hero-shown {
    margin-left: 6px;
    opacity: 0.75;
}

/* Search. Server-side, so it reaches the whole curriculum rather than the one
   page of groups currently loaded. */
.ghl-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 8px 12px;
    border: 1px solid var(--sfc-line);
    border-radius: 10px;
    background: #fff;
    color: var(--sfc-muted);
}

.ghl-search:focus-within {
    border-color: currentColor;
}

.ghl-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 14px;
    color: var(--sfc-ink, inherit);
    outline: none;
}

/* Safari draws its own clear affordance on type=search, which would sit next
   to ours. */
.ghl-search-input::-webkit-search-decoration,
.ghl-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.ghl-search-clear {
    flex: 0 0 auto;
    padding: 2px 6px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.ghl-search-clear:hover {
    color: var(--sfc-ink, inherit);
}


/* List rows use the same surface language as the cards and .sfc-lesson, so
   switching view mode changes the density and not the vocabulary. */
.ghl-item {
    border: 1px solid #dde8ec;
    border-radius: 8px;
    background: #fbfdfd;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ghl-item:hover,
.ghl-item.is-open {
    border-color: var(--sfc-blue);
    box-shadow: 0 8px 18px rgba(22, 118, 163, 0.10);
}

.ghl-item-title {
    color: var(--sfc-navy);
    font-size: 13.5px;
    font-weight: 700;
}

.ghl-item-meta {
    color: #8ba1aa;
    font-size: 11.5px;
}

/* Search field, matching the tab bar's surface rather than sitting on the
   page as a bare input. */
.ghl-search {
    border-radius: 10px;
    border-color: var(--sfc-line);
    box-shadow: 0 12px 30px rgba(27, 78, 96, 0.05);
}

.ghl-search:focus-within {
    border-color: var(--sfc-blue);
    box-shadow: 0 12px 30px rgba(22, 118, 163, 0.12);
}

.ghl-search-input {
    color: var(--sfc-navy);
}

.ghl-search-input::placeholder {
    color: #9db3bb;
}

/* Load-more, matching .sfc-btn--ghost rather than the solid primary. */
.ghl-more-btn {
    padding: 9px 18px;
    border: 1px solid var(--sfc-blue);
    border-radius: 8px;
    background: #ffffff;
    color: var(--sfc-blue-dark);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}

.ghl-more-btn:hover:not([disabled]) {
    background: var(--sfc-blue);
    color: #ffffff;
}

/* Dark mode. flow.css hardcodes the light surfaces for .sfc-lesson and
   flow-themes.css overrides them; the lobby borrows that idiom, so it has to
   borrow the overrides too or the cards stay white on a dark page. */
html.sfc-dark .ghl-card,
html.sfc-dark .ghl-item {
    background: var(--sfc-panel-2);
    border-color: var(--sfc-line-2);
}

html.sfc-dark .ghl-card:hover,
html.sfc-dark .ghl-item:hover,
html.sfc-dark .ghl-item.is-open {
    border-color: var(--sfc-blue);
}

html.sfc-dark .ghl-card-badge {
    background: rgba(255, 255, 255, 0.1);
    color: var(--sfc-navy);
}

/* Not --sfc-soft: in the dark themes it equals --sfc-panel-2, so the strip
   would vanish into the card it is meant to stand out from. */
html.sfc-dark .ghl-card-best {
    background: rgba(93, 132, 193, 0.14);
}

html.sfc-dark .ghl-card-wpm {
    color: #cfe0f5;
}

html.sfc-dark .ghl-card-meta,
html.sfc-dark .ghl-item-meta {
    color: var(--sfc-muted);
}

html.sfc-dark .ghl-card-go,
html.sfc-dark .ghl-more-btn {
    background: transparent;
    color: var(--sfc-blue-hover, var(--sfc-blue));
}

html.sfc-dark .ghl-card-go:hover,
html.sfc-dark .ghl-more-btn:hover:not([disabled]) {
    background: var(--sfc-blue);
    color: #ffffff;
}

html.sfc-dark .ghl-tabs,
html.sfc-dark .ghl-search {
    background: var(--sfc-panel);
    border-color: var(--sfc-line);
}

html.sfc-dark .ghl-tab-count {
    background: rgba(255, 255, 255, 0.12);
}

html.sfc-dark .ghl-search-input {
    color: var(--sfc-navy);
}