body {
    margin-bottom: 84px;
    margin-top: 36px;
    margin-left: 12px;
    margin-right: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

@media (min-width: 600px) {
    body {
        margin-top: 32px;
        margin-left: 24px;
        margin-right: 24px;
    }
}

/*------------ 卡片Topbar ------------*/
.card-topbar {
    display: flex;
    margin-bottom: 4px;
}

.card-topbar-title {
    user-select: none;
    font-weight: 650;
    font-size: 16px;
    margin-left: 8px;
    align-items: center;
    display: flex;
}

.card-topbar-icon {
    user-select: none;
    font-size: 20px;
    width: 26px;
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    corner-shape: superellipse(1.4);
    background-color: var(--superwb-color-bg);
    font-variation-settings: 'FILL' 1;
    font-display: block;
}

.card-topbar-actions {
    display: flex;
    align-items: center;
    margin-left: auto;
}

[icon-color="red"] {
    color: var(--oc-red-0);
    background: linear-gradient(155deg, var(--oc-red-6), var(--oc-red-7));
}

[icon-color="pink"] {
    color: var(--oc-pink-0);
    background: linear-gradient(155deg, var(--oc-pink-6), var(--oc-pink-7));
}

[icon-color="grape"] {
    color: var(--oc-grape-0);
    background: linear-gradient(155deg, var(--oc-grape-6), var(--oc-grape-7));
}

[icon-color="violet"] {
    color: var(--oc-violet-0);
    background: linear-gradient(155deg, var(--oc-violet-6), var(--oc-violet-7));
}

[icon-color="indigo"] {
    color: var(--oc-indigo-0);
    background: linear-gradient(155deg, var(--oc-indigo-6), var(--oc-indigo-7));
}

[icon-color="blue"] {
    color: var(--oc-blue-0);
    background: linear-gradient(155deg, var(--oc-blue-6), var(--oc-blue-7));
}

[icon-color="cyan"] {
    color: var(--oc-cyan-0);
    background: linear-gradient(155deg, var(--oc-cyan-6), var(--oc-cyan-7));
}

[icon-color="teal"] {
    color: var(--oc-teal-0);
    background: linear-gradient(155deg, var(--oc-teal-6), var(--oc-teal-7));
}

[icon-color="green"] {
    color: var(--oc-green-0);
    background: linear-gradient(155deg, var(--oc-green-6), var(--oc-green-7));
}

[icon-color="lime"] {
    color: var(--oc-lime-0);
    background: linear-gradient(155deg, var(--oc-lime-6), var(--oc-lime-7));
}

[icon-color="yellow"] {
    color: var(--oc-yellow-0);
    background: linear-gradient(155deg, var(--oc-yellow-6), var(--oc-yellow-7));
}

[icon-color="orange"] {
    color: var(--oc-orange-0);
    background: linear-gradient(155deg, var(--oc-orange-6), var(--oc-orange-7));
}

.card-topbar-lite {
    display: flex;
}



/* --------------- 响应式卡片布局 --------------- */
.card-layout {
    width: 100%;
    padding: 16px !important;
    margin-bottom: 16px;
    height: auto;
    background: color-mix(in srgb, var(--superwb-color-cards) 84%, transparent);
    border-radius: 24px;
    corner-shape: superellipse(1.4);
    box-sizing: border-box;
    break-inside: avoid;
}

.card-layout-lite {
    width: 100%;
    padding: 16px !important;
    margin-bottom: 16px;
    height: auto;
    background: color-mix(in srgb, var(--superwb-color-cards) 84%, transparent);
    border-radius: 24px;
    corner-shape: superellipse(1.4);
    box-sizing: border-box;
    break-inside: avoid;
}



.masonry {
    column-count: 1;
    column-gap: 16px;
    max-width: 1280px;
    width: 100%;
}

@media (min-width: 600px) {
    .masonry {
        column-count: 2;
    }
}

@media (min-width: 960px) {
    .masonry {
        column-count: 3;
    }
}