/* CampFriends — "Dusk at the campsite" design system, natural-green palette.
   Self-hosted fonts to avoid a third-party font CDN in production. */

@font-face {
    font-family: 'Nunito';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('fonts/nunito-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Nunito';
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    src: url('fonts/nunito-800.woff2') format('woff2');
}

@font-face {
    font-family: 'Karla';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('fonts/karla-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Karla';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url('fonts/karla-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Karla';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url('fonts/karla-600.woff2') format('woff2');
}

:root {
    /* Brand — primary CTAs/links use canopy (deep forest green); pine is the calmer, more
       muted green for secondary/outline actions; meadow is a lighter olive-lime reserved for
       small high-visibility accents (active nav icon, unread badges, campsite map pins) so it
       reads as "pay attention here" without reaching for a non-green color. */
    --cf-dusk: #1b3634;
    --cf-dusk-2: #142826;
    --cf-dusk-text: #eaf3ee;
    --cf-dusk-text-muted: #9fc2b8;
    --cf-canopy: #2f6b3f;
    --cf-canopy-hover: #24522f;
    --cf-meadow: #9cb33e;
    --cf-meadow-hover: #84992f;
    --cf-pine: #5c7a66;
    --cf-pine-hover: #4b6554;

    /* Neutrals */
    --cf-bg: #eae6d5;
    --cf-surface: #ffffff;
    --cf-surface-2: #f2efe2;
    --cf-border: #d8d2b8;
    --cf-text: #2b2a22;
    --cf-text-muted: #6b6650;
    --cf-text-subtle: #96906f;

    /* Semantic */
    --cf-success-text: #3f6b4a;
    --cf-success-bg: #e1ebe1;
    --cf-danger-text: #b5432a;
    --cf-danger-bg: #f7e2da;
    --cf-warning-text: #8a5a12;
    --cf-warning-bg: #fceed2;
    --cf-info-text: #2e7d74;
    --cf-info-bg: #dff0ee;

    /* Shape */
    --cf-radius-input: 10px;
    --cf-radius-button: 12px;
    --cf-radius-card: 16px;
    --cf-radius-pill: 999px;

    /* Shadows */
    --cf-shadow-card: 0 1px 2px rgba(43, 42, 34, .06), 0 6px 16px rgba(43, 42, 34, .08);
}

html, body {
    font-family: 'Karla', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--cf-text);
    /* Faint topographic contour lines — reads as "outdoors/trail map" at a glance without
       competing with card content, which all sits on its own opaque white surface above this.
       The pattern's stroke color is a hardcoded match for --cf-border since a data: URI can't
       reference a CSS custom property. */
    background-color: var(--cf-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='%23d8d2b8' stroke-width='1.2' opacity='0.6'%3E%3Cpath d='M-20,40 Q40,-10 100,20 T240,10'/%3E%3Cpath d='M-20,90 Q40,40 100,70 T240,60'/%3E%3Cpath d='M-20,180 Q40,130 100,160 T240,150'/%3E%3Cpath d='M-20,230 Q40,180 100,210 T240,200'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Nunito', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 800;
    color: var(--cf-text);
}

a, .btn-link {
    color: var(--cf-canopy);
}

a:hover, .btn-link:hover {
    color: var(--cf-canopy-hover);
}

/* Bootstrap's own .nav-link/.nav-pills classes carry their own default blue (a class selector
   beats the plain "a" rule above on specificity, regardless of load order) — this was the
   stock Bootstrap look leaking through on the Account/Manage sidebar. */
.nav-pills .nav-link {
    color: var(--cf-text-muted);
    border-radius: var(--cf-radius-button);
}

.nav-pills .nav-link:hover {
    color: var(--cf-canopy);
}

.nav-pills .nav-link.active {
    color: #fff;
    background-color: var(--cf-canopy);
}

.btn {
    border-radius: var(--cf-radius-button);
    font-weight: 600;
}

.btn-primary {
    color: #fff;
    background-color: var(--cf-canopy);
    border-color: var(--cf-canopy);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--cf-canopy-hover) !important;
    border-color: var(--cf-canopy-hover) !important;
}

/* Bootstrap's own :disabled/.disabled rule is more specific than a plain .btn-primary class
   selector (pseudo-class vs. class), so without this a disabled button falls back to
   Bootstrap's stock blue regardless of source order — happened for real on the message
   composer's Send button while its textarea was empty. */
.btn-primary:disabled, .btn-primary.disabled {
    background-color: var(--cf-canopy);
    border-color: var(--cf-canopy);
    opacity: 0.6;
}

.btn-secondary {
    color: #fff;
    background-color: var(--cf-pine);
    border-color: var(--cf-pine);
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    background-color: var(--cf-pine-hover) !important;
    border-color: var(--cf-pine-hover) !important;
}

.btn-secondary:disabled, .btn-secondary.disabled {
    background-color: var(--cf-pine);
    border-color: var(--cf-pine);
    opacity: 0.6;
}

.btn-outline-secondary {
    color: var(--cf-pine);
    border-color: var(--cf-pine);
}

.btn-outline-secondary:hover {
    background-color: var(--cf-pine);
    border-color: var(--cf-pine);
    color: #fff;
}

.btn-outline-secondary:disabled, .btn-outline-secondary.disabled {
    color: var(--cf-pine);
    border-color: var(--cf-pine);
    opacity: 0.6;
}

.form-control, .form-select {
    border-radius: var(--cf-radius-input);
    background-color: var(--cf-surface-2);
    border-color: var(--cf-border);
    color: var(--cf-text);
}

.form-control::placeholder {
    color: var(--cf-text-subtle);
}

/* Bootstrap checkboxes/radios default to primary blue when checked ("Vis kun mine opslag" on
   /feed, the location-precision radios on /map, every filter-panel checkbox, ...). */
.form-check-input:checked {
    background-color: var(--cf-canopy);
    border-color: var(--cf-canopy);
}

/* Shared, centered single-column layout for every auth page (Login, Register, ForgotPassword,
   ResendEmailConfirmation, ...) — promoted here from Login.razor.css since Blazor CSS isolation
   would otherwise keep it scoped to just the Login component. */
.cf-auth-page {
    max-width: 400px;
    margin: 2rem auto 0;
}

.cf-auth-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Bootstrap's stock focus style is a thick double-ring box-shadow "halo" that fires on every
   mouse click, not just keyboard navigation — reads as generic/unpolished ("automatic
   frame around elements"). Kill it everywhere, then draw a single clean outline, but only
   for :focus-visible (keyboard/assistive-tech navigation) so clicking with a mouse shows
   nothing at all while tabbing through the page still has a clear, accessible indicator. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
.form-control:focus:not(:focus-visible),
.form-select:focus:not(:focus-visible),
.form-check-input:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline: 2px solid var(--cf-canopy);
    outline-offset: 2px;
    box-shadow: none;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--cf-success-text);
}

.invalid {
    outline: 1px solid var(--cf-danger-text);
}

.validation-message {
    color: var(--cf-danger-text);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--cf-danger-text);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--cf-text-subtle);
}

/* Shared by every Leaflet map on the site (map page, create-post area picker, ...):
   the wrapper positions a loading spinner over the map canvas while Leaflet initializes. */
.cf-map-wrapper {
    position: relative;
}

.cf-map-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cf-surface-2);
    border-radius: var(--cf-radius-card);
    border: 1px solid var(--cf-border);
    z-index: 500;
}

.cf-spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 4px solid var(--cf-border);
    border-top-color: var(--cf-canopy);
    border-radius: 50%;
    animation: cf-spin 0.8s linear infinite;
}

@keyframes cf-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Shared by every "type of company" badge on the site (Feed post author, Account/Manage, ...). */
.company-tag {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.company-tag-NotSet     { color: var(--cf-text-muted); background-color: var(--cf-surface-2); }
.company-tag-Male       { color: #2A5A8C; background-color: #DCE7F5; }
.company-tag-Female     { color: #9C3F73; background-color: #F3DCE9; }
.company-tag-Couple     { color: #8C4A2A; background-color: #F5E3D9; }
.company-tag-Family     { color: #2F7A4F; background-color: #DCF0E3; }
.company-tag-Group      { color: #6B4F9E; background-color: #E6DFF5; }
.company-tag-Colleagues { color: #5C6B73; background-color: #E1E7EA; }

/* Shared by every "opslag category" badge on the site (Feed post cards, the messages inbox
   and conversation subject context, ...). */
.post-category {
    display: inline-block;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.25rem 0.7rem;
    border-radius: var(--cf-radius-pill);
    white-space: nowrap;
}

.tag-CoffeeAndChat  { color: #6B4A2A; background-color: #E9DCC9; }
.tag-Bonfire        { color: #B24A17; background-color: #F6DCC7; }
.tag-KidsAndTeens   { color: #916A0C; background-color: #FBEACB; }
.tag-SportsAndGames { color: #235C79; background-color: #D9E9F2; }
.tag-BoardGames     { color: #6B4680; background-color: #E8DCEA; }
.tag-Hiking         { color: #2F5D3B; background-color: #DCE9DE; }
.tag-Swimming       { color: #1D6E63; background-color: #D7EDE9; }
.tag-Music          { color: #9C3F58; background-color: #F3DCE1; }
.tag-HelpNeeded     { color: #A8461F; background-color: #F5DAD1; }
.tag-BorrowOrLend   { color: #806B36; background-color: #EFE6D2; }
.tag-Other          { color: var(--cf-text-muted); background-color: var(--cf-surface-2); }

/* Map pins, colored to match the "type of company" badge text colors above — same palette,
   used as a solid fill instead of a tint so pins stay readable at small map-marker sizes. */
.cf-pin {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.cf-pin-NotSet     { background-color: var(--cf-text-muted); }
.cf-pin-Male       { background-color: #2A5A8C; }
.cf-pin-Female     { background-color: #9C3F73; }
.cf-pin-Couple     { background-color: #8C4A2A; }
.cf-pin-Family     { background-color: #2F7A4F; }
.cf-pin-Group      { background-color: #6B4F9E; }
.cf-pin-Colleagues { background-color: #5C6B73; }

/* Site admins get a star pin instead of the round company-type dot, in a fixed gold tone (the
   same idea as a star rating) so "this is an admin" reads the same regardless of their own
   company type — deliberately distinct from every company-type color above, and sized up from
   the 18px company-type dots so it stands out further. Unlike the other pins (a plain masked
   div), this one's markup is an inline <svg><path fill=... stroke=.../></svg> — a real stroke
   guarantees one crisp, correctly-joined black outline; stacking multiple CSS drop-shadow
   filters to fake an outline on a masked shape was tried first, but chained filter functions
   each apply to the *previous* filter's output rather than all sourcing from the original
   shape, so the "outline" compounds/drifts instead of forming a clean ring — thin enough in
   practice to not really read as an outline at this icon size. */
.cf-pin-admin {
    display: block;
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* Shared "nothing here yet" state — every empty list (feed, inbox, a conversation with no
   messages, ...) uses this instead of bare text, reusing the same tent mark as the wordmark
   logo and favicon so it reads as an intentional brand moment rather than a placeholder. */
.cf-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    color: var(--cf-text-muted);
    text-align: center;
}

.cf-empty-state-icon {
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--cf-text-subtle);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5 15 14H9.7L8 10.8 6.3 14H1L8 1.5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5 15 14H9.7L8 10.8 6.3 14H1L8 1.5Z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Campsite markers: a square backdrop (vs. the round .cf-pin dots for people/posts) with a
   tent silhouette cut out via mask — same shape as the site's own logo icon, so "tent = a
   campsite" reads consistently, in the brand's meadow accent so it doesn't collide with the
   Family company-type dot's similar forest green above. */
.cf-campsite-pin {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background-color: var(--cf-meadow);
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    position: relative;
}

.cf-campsite-pin::after {
    content: '';
    position: absolute;
    inset: 3px;
    background-color: white;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5 15 14H9.7L8 10.8 6.3 14H1L8 1.5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5 15 14H9.7L8 10.8 6.3 14H1L8 1.5Z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Shared collapsible filter panel — used by both /map (post markers) and /feed (post list). */
.cf-filter-toggle {
    margin-bottom: 0.75rem;
}

.cf-filter-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-card);
    background-color: var(--cf-surface);
}

.cf-filter-group-title {
    font-weight: 700;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cf-filter-toggle-all {
    font-weight: 400;
    font-size: 0.8125rem;
    color: var(--cf-canopy);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}

.cf-filter-toggle-all:hover {
    color: var(--cf-canopy-hover);
}

.cf-filter-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0.5rem 0.5rem 0;
    cursor: pointer;
}

.cf-filter-group select {
    max-width: 320px;
}

/* Shared across the admin sub-pages (CampSiteImport.razor, MailConfiguration.razor) — Blazor's
   CSS isolation scopes a .razor.css file to only its own component's markup, so anything used
   by more than one admin page has to live here instead. */
.cf-admin-hint {
    color: var(--cf-text-muted);
    margin-bottom: 1.5rem;
}

.cf-admin-subnav {
    display: flex;
    gap: 1.5rem;
    border-bottom: 1px solid var(--cf-border);
    margin-bottom: 1.5rem;
}

.cf-admin-subnav-link {
    padding: 0.5rem 0;
    color: var(--cf-text-muted);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 2px solid transparent;
}

.cf-admin-subnav-link:hover {
    color: var(--cf-canopy);
}

.cf-admin-subnav-link-active {
    color: var(--cf-canopy);
    border-bottom-color: var(--cf-canopy);
}

.cf-admin-checkbox-field {
    display: flex;
    align-items: flex-end;
}

.cf-admin-checkbox-field .form-check-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.cf-admin-test-result {
    margin-top: 1rem;
}

.cf-admin-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.cf-admin-search {
    margin-bottom: 1rem;
    max-width: 320px;
}

.cf-admin-table-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 60vh;
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-card);
    background-color: var(--cf-surface);
    box-shadow: var(--cf-shadow-card);
}

.cf-admin-table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

.cf-admin-table th, .cf-admin-table td {
    padding: 0.6rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--cf-border);
}

.cf-admin-table tbody tr:last-child td {
    border-bottom: none;
}

.cf-admin-table th {
    font-size: 0.8rem;
    color: var(--cf-text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Keeps the column headers visible while the row list scrolls inside the fixed-height
   wrapper above — needs its own opaque background since sticky elements otherwise let
   scrolling rows show through underneath. */
.cf-admin-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--cf-surface);
}

.cf-admin-table-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cf-admin-source-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: var(--cf-surface-2);
    color: var(--cf-text-muted);
}

.cf-admin-badge-banned {
    background-color: #f8d7da;
    color: #842029;
}

.cf-admin-badge-admin {
    background-color: #fff3cd;
    color: #664d03;
}

.cf-admin-message-body {
    white-space: pre-wrap;
}

.cf-admin-compose-panel {
    margin-top: 1.5rem;
    padding: 1.25rem;
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-card);
    background-color: var(--cf-surface);
    box-shadow: var(--cf-shadow-card);
}