/*
 * LcMurmur 微语插件样式(朋友圈式信息流)
 * 作者: 就是老陈 https://www.lcbk.cn/
 */

:root {
    --lcm-bg: #ededed;
    --lcm-card: #ffffff;
    --lcm-text: #191919;
    /* 时间、类型小标这类辅助灰字要在白底和灰底都过 4.5:1,太浅的灰在手机上等于看不见 */
    --lcm-sub: #6b6b6b;
    --lcm-line: rgba(0, 0, 0, .07);
    --lcm-main: #07c160;
    /**
     * 品牌绿 #07c160 做图标和描边正好,拿来写字压白底只有 2.38:1,
     * 所以字面绿和实心绿(白字压在上面的那种)各拆一支,深一档到 4.8:1。
     */
    --lcm-main-ink: #0b8348;
    --lcm-main-solid: #0b8348;
    --lcm-name: #576b95;
    /* 搜索结果里的可点字(话题胶囊、命中关键词)单独一档:深色下名字那个蓝压不住暗底 */
    --lcm-chip: #576b95;
    --lcm-gray: #f7f7f7;
    /* 心形图标、进度条这类用饱和红;「待审核」这类红字压白底只有 3.3:1,单独给一支深一档的 */
    --lcm-like: #fa5151;
    --lcm-like-ink: #c0392b;
    --lcm-gap: 16px;

    /* 圆角只留三档:小控件、卡片面、胶囊 */
    --lcm-radius-sm: 4px;
    --lcm-radius-lg: 8px;
    --lcm-radius-pill: 999px;

    /** 字体栈拆两段:本机已装的名称 + 系统兜底。后台挂在线字体时只替换前面那段,名字不会重复出现 */
    --lcm-font-local: "HarmonyOS Sans SC", "HarmonyOS Sans", "HarmonyOS_Regular";
    --lcm-font-sys: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --lcm-font-default: var(--lcm-font-local), var(--lcm-font-sys);
    --lcm-font: var(--lcm-font-default);

    /* 收尾那行小字和「没有更多了」两边的短线用的淡蓝,跟 --lcm-name 同色系 */
    --lcm-glow-line: rgba(87, 107, 149, .3);
    /* 小字本身就是字,跟着 --lcm-name 走,不用压白底不够看的淡色 */
    --lcm-glow-text: var(--lcm-name);
    --lcm-pill: #ffffff;
    --lcm-pill-shadow: rgba(87, 107, 149, .18);

    /* 图标取自 Feather Icons(MIT),用 currentColor 遮罩上色 */
    --lcm-i-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
    --lcm-i-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 20 7 12 16 4'/%3E%3C/svg%3E");
    --lcm-i-login: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    --lcm-i-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
    --lcm-i-camera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
    --lcm-i-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");
    --lcm-i-music: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E");
    --lcm-i-film: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='18' rx='2'/%3E%3Cline x1='7' y1='3' x2='7' y2='21'/%3E%3Cline x1='17' y1='3' x2='17' y2='21'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3C/svg%3E");
    --lcm-i-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
    --lcm-i-type: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 7 4 4 20 4 20 7'/%3E%3Cline x1='9' y1='20' x2='15' y2='20'/%3E%3Cline x1='12' y1='4' x2='12' y2='20'/%3E%3C/svg%3E");
    --lcm-i-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    --lcm-i-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
    --lcm-i-comment: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
    --lcm-i-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2.5 -2.5 29 29' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
    --lcm-i-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='none'%3E%3Ccircle cx='12' cy='7.5' r='2.1'/%3E%3Ccircle cx='12' cy='16.5' r='2.1'/%3E%3C/svg%3E");
    --lcm-i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    --lcm-i-feed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1 1 22 22' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11a9 9 0 0 1 9 9'/%3E%3Cpath d='M4 4a16 16 0 0 1 16 16'/%3E%3Ccircle cx='5' cy='19' r='1.2'/%3E%3C/svg%3E");
    --lcm-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.5 4.5 19 14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    --lcm-i-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
    --lcm-i-smile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'/%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'/%3E%3C/svg%3E");
    /* 清空:圆圈带一道斜杠,和删除用的垃圾桶区分开 */
    --lcm-i-slash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='4.93' y1='4.93' x2='19.07' y2='19.07'/%3E%3C/svg%3E");
    --lcm-i-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
    --lcm-i-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cline x1='12' y1='1' x2='12' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='23'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'/%3E%3Cline x1='1' y1='12' x2='3' y2='12'/%3E%3Cline x1='21' y1='12' x2='23' y2='12'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'/%3E%3C/svg%3E");
    --lcm-i-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 14 12 8 18 14'/%3E%3C/svg%3E");
    --lcm-i-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='none'%3E%3Cpolygon points='6 3 21 12 6 21'/%3E%3C/svg%3E");

    /* 滚动条滑块颜色单独一档,深色模式跟着换 */
    --lcm-scroll: rgba(0, 0, 0, .18);
    --lcm-scroll-hover: rgba(0, 0, 0, .32);
    color-scheme: light;
}

/**
 * 深色调色板要写两遍:媒体查询那份给不跑 JS 的访客(跟随系统),
 * [data-theme=dark] 那份给顶栏的夜景开关。改配色两处一起改。
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --lcm-bg: #111111;
        --lcm-card: #181818;
        --lcm-text: #f5f5f5;
        --lcm-sub: #8a8a8a;
        --lcm-line: rgba(255, 255, 255, .08);
        --lcm-main: #2ea75f;
        --lcm-main-ink: #2ea75f;
        --lcm-main-solid: #1b7d47;
        --lcm-name: #6f8fc0;
        --lcm-chip: #7f9dc7;
        --lcm-gray: #202020;
        --lcm-like: #e64d4d;
        --lcm-like-ink: #ef6b6b;
        --lcm-glow-line: rgba(111, 143, 192, .38);
        --lcm-glow-text: var(--lcm-name);
        --lcm-pill: #262626;
        --lcm-pill-shadow: rgba(0, 0, 0, .5);
        --lcm-scroll: rgba(255, 255, 255, .22);
        --lcm-scroll-hover: rgba(255, 255, 255, .38);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --lcm-bg: #111111;
    --lcm-card: #181818;
    --lcm-text: #f5f5f5;
    --lcm-sub: #8a8a8a;
    --lcm-line: rgba(255, 255, 255, .08);
    --lcm-main: #2ea75f;
    --lcm-main-ink: #2ea75f;
    /* 夜景下白字压绿底同样要够,实心绿比日间再压一档 */
    --lcm-main-solid: #1b7d47;
    --lcm-name: #6f8fc0;
    --lcm-chip: #7f9dc7;
    --lcm-gray: #202020;
    --lcm-like: #e64d4d;
    --lcm-like-ink: #ef6b6b;
    --lcm-glow-line: rgba(111, 143, 192, .38);
    --lcm-glow-text: var(--lcm-name);
    --lcm-pill: #262626;
    --lcm-pill-shadow: rgba(0, 0, 0, .5);
    --lcm-scroll: rgba(255, 255, 255, .22);
    --lcm-scroll-hover: rgba(255, 255, 255, .38);
    color-scheme: dark;
}

/* PC 端的滚动条:细一条、跟配色走;窄屏仍用系统原生滚动条.
   标准属性支持的浏览器(Chrome 121+ / Firefox)用它,再叠 -webkit- 那套反而会被忽略,
   所以圆角滑块只给不认标准属性的浏览器(Safari、旧 Chrome)。 */
@media (min-width: 768px) {
    html {
        scrollbar-width: thin;
        scrollbar-color: var(--lcm-scroll) transparent;
    }

    @supports not (scrollbar-width: thin) {
        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--lcm-scroll);
            background-clip: content-box;
            border: 2px solid transparent;
            border-radius: var(--lcm-radius-pill);
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: var(--lcm-scroll-hover);
        }
    }
}

body.lcm-body {
    margin: 0;
    background: var(--lcm-bg);
    color: var(--lcm-text);
    font: 16px/1.5 var(--lcm-font);
    -webkit-text-size-adjust: 100%;
}

/* 键盘 Tab 到哪儿,哪儿就有一圈框;鼠标点按不会凭空多出框。
   主绿压白底只有 2.38:1,当焦点框太淡,两档主题下都用字面绿那一支 */
:focus-visible {
    outline: 2px solid var(--lcm-main-ink);
    outline-offset: 2px;
}

.lcm-wrap {
    max-width: 640px;
    margin: 0 auto;
    background: var(--lcm-card);
    min-height: 100vh;
    /* 页脚自己留了 18px,这里只留 iPhone 底部横条那条安全区,固定间距去掉 */
    padding-bottom: env(safe-area-inset-bottom);
}

/* 顶栏 */
.lcm-top {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 48px;
    padding: 0 var(--lcm-gap);
    background: var(--lcm-card);
    border-bottom: 1px solid var(--lcm-line);
    color: var(--lcm-text);
    transition: background-color .2s, border-color .2s, color .2s;
}

.lcm-top h1 {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 17px;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lcm-home,
.lcm-back,
.lcm-login,
.lcm-post,
.lcm-dark,
.lcm-feed,
.lcm-search-btn {
    display: flex;
    flex: 0 0 auto;
    padding: 6px;
    color: var(--lcm-name);
    text-decoration: none;
}

.lcm-post,
.lcm-dark,
.lcm-search-btn {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}

.lcm-back,
.lcm-login { margin-left: -6px; }

.lcm-home { margin-right: -6px; }

.lcm-home i,
.lcm-back i,
.lcm-login i,
.lcm-post i,
.lcm-dark i,
.lcm-feed i,
.lcm-search-btn i {
    display: block;
    width: 18px;
    height: 18px;
    background: currentColor;
}

.lcm-feed i {
    -webkit-mask: var(--lcm-i-feed) center/contain no-repeat;
    mask: var(--lcm-i-feed) center/contain no-repeat;
}

.lcm-dark i {
    -webkit-mask: var(--lcm-i-moon) center/contain no-repeat;
    mask: var(--lcm-i-moon) center/contain no-repeat;
}

/**
 * 图标跟着当前深浅走:日间给月亮(点了切夜景),夜景给太阳(点了切回日间)。
 * 和上面调色板同理,要写两遍:媒体查询那份给不跑 JS、跟随系统的访客。
 */
:root[data-theme="dark"] .lcm-dark i {
    -webkit-mask-image: var(--lcm-i-sun);
    mask-image: var(--lcm-i-sun);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lcm-dark i {
        -webkit-mask-image: var(--lcm-i-sun);
        mask-image: var(--lcm-i-sun);
    }
}

.lcm-home i {
    -webkit-mask: var(--lcm-i-home) center/contain no-repeat;
    mask: var(--lcm-i-home) center/contain no-repeat;
}

.lcm-search-btn i {
    -webkit-mask: var(--lcm-i-search) center/contain no-repeat;
    mask: var(--lcm-i-search) center/contain no-repeat;
}

.lcm-post i {
    -webkit-mask: var(--lcm-i-camera) center/contain no-repeat;
    mask: var(--lcm-i-camera) center/contain no-repeat;
}

.lcm-back i {
    -webkit-mask: var(--lcm-i-back) center/contain no-repeat;
    mask: var(--lcm-i-back) center/contain no-repeat;
}

.lcm-login i {
    -webkit-mask: var(--lcm-i-login) center/contain no-repeat;
    mask: var(--lcm-i-login) center/contain no-repeat;
}

/* 有顶图时顶栏压在视频上,滚过顶图才落回白底 */
.lcm-wrap.has-hero .lcm-hero { margin-top: -49px; }

.lcm-wrap.has-hero .lcm-top {
    background: transparent;
    border-bottom-color: transparent;
    color: #fff;
}

.lcm-wrap.has-hero .lcm-top h1 { text-shadow: 0 1px 2px rgba(0, 0, 0, .32); }

.lcm-wrap.has-hero .lcm-home,
.lcm-wrap.has-hero .lcm-back,
.lcm-wrap.has-hero .lcm-login,
.lcm-wrap.has-hero .lcm-feed,
.lcm-wrap.has-hero .lcm-search-btn,
.lcm-wrap.has-hero .lcm-post {
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .32));
}

/**
 * 夜景键单独一档:手机上它就在顶栏里,得跟搜索/相机/首页一起白;
 * PC 上它挪成了贴视口右下角的白圆钮,压在顶图上时跟着变白就成了白底白字,所以只在窄屏给。
 */
@media (max-width: 671px) {
    .lcm-wrap.has-hero .lcm-dark {
        color: #fff;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .32));
    }

    .lcm-wrap.has-hero .lcm-top.is-solid .lcm-dark {
        color: var(--lcm-name);
        filter: none;
    }
}

.lcm-wrap.has-hero .lcm-top.is-solid {
    background: var(--lcm-card);
    border-bottom-color: var(--lcm-line);
    color: var(--lcm-text);
}

.lcm-wrap.has-hero .lcm-top.is-solid h1 { text-shadow: none; }

.lcm-wrap.has-hero .lcm-top.is-solid .lcm-home,
.lcm-wrap.has-hero .lcm-top.is-solid .lcm-back,
.lcm-wrap.has-hero .lcm-top.is-solid .lcm-login,
.lcm-wrap.has-hero .lcm-top.is-solid .lcm-feed,
.lcm-wrap.has-hero .lcm-top.is-solid .lcm-search-btn,
.lcm-wrap.has-hero .lcm-top.is-solid .lcm-post {
    color: var(--lcm-name);
    filter: none;
}

/* 灰间隔(区块之间 + 每条微语下面一条) */
.lcm-hero,
.lcm-tabs,
.lcm-item,
.lcm-foot,
.lcm-empty {
    border-bottom: 1px solid var(--lcm-line);
}

/* 顶部:底图(视频或封面) + 压在右下角的站名头像 + 下面右对齐的一句话 */
.lcm-hero {
    background: var(--lcm-card);
}

.lcm-hero-cover {
    position: relative;
    height: 158px;
    background: #000;
}

/**
 * 顶图锁死一档比例:视频和自定义封面图共用同一个高度,换成哪种底图下面都不会整页跳位。
 * 上面那行 158px 是给微信内置浏览器那种老内核兜底的,它不认识 aspect-ratio。
 */
@supports (aspect-ratio: 16 / 9) {
    .lcm-hero-cover {
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

.lcm-hero video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.lcm-hero-cover.is-cover {
    background-color: #0f6b45;
    background-image: linear-gradient(118deg, #0b3d29 0%, #0f6b45 46%, #25b072 100%);
    background-position: center;
    background-size: cover;
}

.lcm-hero-cover.is-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 78% 8%, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 60%);
    pointer-events: none;
}

/* 视频或自定义图片当底图时,上下各压一层暗角,白字和顶栏图标才压得住画面 */
.lcm-hero-cover.is-video::after,
.lcm-hero-cover.is-cover.has-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .55) 100%);
    pointer-events: none;
}

.lcm-who {
    position: absolute;
    right: 20px;
    bottom: -15px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 20px;
    pointer-events: none;
}

.lcm-who b {
    max-width: 55vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.lcm-who-av {
    flex: 0 0 auto;
    border-radius: var(--lcm-radius-sm);
    background: rgba(255, 255, 255, .18);
}

.lcm-sign {
    padding: 25px 20px 20px;
    text-align: right;
    font-size: 14px;
    color: var(--lcm-text);
    opacity: .62;
}

/* 发布浮层:由顶栏相机图标唤起 */
.lcm-sheet {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.lcm-sheet[hidden] { display: none; }

.lcm-sheet-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}

body.lcm-sheet-open { overflow: hidden; }

.lcm-composer {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    padding: 14px var(--lcm-gap) calc(14px + env(safe-area-inset-bottom));
    background: var(--lcm-card);
    border-radius: var(--lcm-radius-lg) var(--lcm-radius-lg) 0 0;
    box-shadow: 0 -2px 18px rgba(0, 0, 0, .2);
    animation: lcm-sheet-up .18s ease-out;
    color: var(--lcm-text);
}

@keyframes lcm-sheet-up {
    from { transform: translateY(16%); opacity: .4; }
    to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .lcm-composer { animation: none; }
}

.lcm-composer textarea {
    width: 100%;
    box-sizing: border-box;
    border: 0;
    border-radius: var(--lcm-radius-sm);
    background: var(--lcm-gray);
    color: inherit;
    padding: 9px 10px;
    font: inherit;
    font-size: 15px;
    resize: vertical;
    min-height: 60px;
}

.lcm-composer-who {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.lcm-composer-who input.text {
    flex: 1 1 150px;
    min-width: 0;
    box-sizing: border-box;
    border: 0;
    border-radius: var(--lcm-radius-sm);
    background: var(--lcm-gray);
    color: inherit;
    padding: 7px 9px;
    font: inherit;
    font-size: 14px;
}

.lcm-panel {
    margin-top: 8px;
    padding: 10px;
    border-radius: var(--lcm-radius-sm);
    border: 1px solid var(--lcm-line);
    background: var(--lcm-gray);
}

.lcm-panel input.text,
.lcm-panel textarea,
.lcm-panel select {
    flex: 1 1 150px;
    min-width: 0;
    box-sizing: border-box;
    border: 0;
    border-radius: var(--lcm-radius-sm);
    background: var(--lcm-card);
    color: inherit;
    padding: 7px 9px;
    font: inherit;
    font-size: 14px;
}

.lcm-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.lcm-tools button {
    display: inline-flex;
    align-items: center;
    border: 0;
    background: transparent;
    color: var(--lcm-sub);
    border-radius: var(--lcm-radius-sm);
    padding: 5px 7px;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
}

.lcm-tools button i {
    display: block;
    width: 20px;
    height: 20px;
    background: currentColor;
}

.lcm-tools button[data-tool="image"] i {
    -webkit-mask: var(--lcm-i-image) center/contain no-repeat;
    mask: var(--lcm-i-image) center/contain no-repeat;
}

.lcm-tools button[data-tool="music"] i {
    -webkit-mask: var(--lcm-i-music) center/contain no-repeat;
    mask: var(--lcm-i-music) center/contain no-repeat;
}

.lcm-tools button[data-tool="video"] i {
    -webkit-mask: var(--lcm-i-film) center/contain no-repeat;
    mask: var(--lcm-i-film) center/contain no-repeat;
}

.lcm-tools button[data-tool="close"] i {
    -webkit-mask: var(--lcm-i-slash) center/contain no-repeat;
    mask: var(--lcm-i-slash) center/contain no-repeat;
}

/* 表情键跟媒体键一样大(评论框里仍是 34×34 的独立尺寸) */
.lcm-tools .lcm-emo-btn { width: auto; height: auto; }

/* 表情键贴到「发表」左边,中间不留那条 8px 缝 */
.lcm-tools .lcm-emohost { margin-right: -8px; }

/* 计数已经把这一组推到最右了,发表按钮再 auto 一次就把表情键甩开了 */
.lcm-tools .lcm-btn-primary[type=submit] { margin-left: 0; }

.lcm-tools button:hover,
.lcm-tools button.is-active {
    color: var(--lcm-main-ink);
}

.lcm-tools .lcm-count {
    margin-left: auto;
    font-size: 13px;
    color: var(--lcm-sub);
}

.lcm-btn-primary {
    border: 0 !important;
    background: var(--lcm-main-solid) !important;
    color: #fff !important;
    padding: 5px 18px !important;
    font-size: 14px !important;
}

.lcm-btn-primary[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

.lcm-panel .lcm-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}

.lcm-panel .lcm-row > label {
    flex: 0 0 52px;
    font-size: 14px;
    color: var(--lcm-sub);
}

.lcm-panel .lcm-row > .text { flex: 1 1 180px; }

.lcm-panel textarea {
    width: 100%;
    box-sizing: border-box;
    flex: none;
    resize: vertical;
    min-height: 72px;
    line-height: 1.5;
}

.lcm-panel .lcm-radios {
    display: flex;
    gap: 14px;
    font-size: 14px;
    color: var(--lcm-sub);
    flex-wrap: wrap;
}

.lcm-panel .lcm-radios label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.lcm-panel .lcm-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}

.lcm-panel .lcm-actions button {
    border: 0;
    background: var(--lcm-card);
    color: var(--lcm-text);
    border-radius: var(--lcm-radius-sm);
    padding: 6px 14px;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
}

.lcm-panel .lcm-note {
    font-size: 13px;
    color: var(--lcm-sub);
    margin: 0 0 8px;
}

.lcm-tip {
    font-size: 13px;
    color: var(--lcm-sub);
    margin: 8px 0 0;
}

/* 待选缩略图 */
.lcm-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.lcm-thumbs:empty { display: none; }

.lcm-thumb {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: var(--lcm-radius-sm);
    overflow: hidden;
    background: var(--lcm-line);
    flex: 0 0 auto;
}

.lcm-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lcm-thumb button {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    line-height: 16px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
}

.lcm-thumb.is-media {
    width: auto;
    height: auto;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--lcm-sub);
    max-width: 100%;
    word-break: break-all;
}

/* 搜索页:顶栏放大镜唤起,整屏接管;限宽跟列表一样,带词进来时服务端就展开,不跑 JS 也能搜 */
.lcm-search {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    max-width: 640px;
    margin: 0 auto;
    background: var(--lcm-bg);
    color: var(--lcm-text);
}

.lcm-search[hidden] { display: none; }

body.lcm-search-open { overflow: hidden; }

.lcm-search-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(10px + env(safe-area-inset-top)) var(--lcm-gap) 10px;
    background: var(--lcm-card);
    border-bottom: 1px solid var(--lcm-line);
}

.lcm-search-head form {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.lcm-search input.text {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    height: 36px;
    border: 1px solid var(--lcm-line);
    border-radius: var(--lcm-radius-sm);
    background: var(--lcm-gray);
    color: var(--lcm-text);
    padding: 0 14px;
    font: inherit;
    font-size: 14px;
    -webkit-appearance: none;
    appearance: none;
}

.lcm-search input.text:focus {
    border-color: var(--lcm-main-ink);
    background: var(--lcm-card);
}

.lcm-search ::placeholder { color: var(--lcm-sub); }

/* 搜索按钮跟输入框一样做成方角小块 */
.lcm-search .lcm-btn-primary {
    flex: 0 0 auto;
    height: 36px;
    padding: 0 16px !important;
}

.lcm-search-cancel {
    flex: 0 0 auto;
    padding: 11px 6px;
    font-size: 14px;
    color: var(--lcm-sub);
    text-decoration: none;
}

.lcm-search-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px var(--lcm-gap) calc(24px + env(safe-area-inset-bottom));
}

.lcm-search-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 18px 0 9px;
    font-size: 12px;
    color: var(--lcm-sub);
}

.lcm-search-h button {
    padding: 2px 0;
    border: 0;
    background: transparent;
    color: var(--lcm-sub);
    font: inherit;
    cursor: pointer;
}

.lcm-search-his[hidden] { display: none; }

.lcm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.lcm-chip {
    padding: 7px 12px;
    border-radius: var(--lcm-radius-pill);
    background: var(--lcm-gray);
    color: var(--lcm-chip);
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
}

.lcm-search-tip {
    margin: 18px 0 0;
    font-size: 13px;
    color: var(--lcm-sub);
}

.lcm-result {
    margin: 18px 0 6px;
    font-size: 12px;
    color: var(--lcm-sub);
}

.lcm-hits {
    border-top: 1px solid var(--lcm-line);
}

.lcm-hit {
    display: block;
    padding: 11px 2px;
    border-bottom: 1px solid var(--lcm-line);
    color: var(--lcm-text);
    text-decoration: none;
}

.lcm-hit b {
    display: block;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.55;
    word-break: break-all;
}

.lcm-hit u {
    color: var(--lcm-chip);
    text-decoration: none;
}

.lcm-hit span {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--lcm-sub);
}

.lcm-search-more {
    display: block;
    margin-top: 14px;
    text-align: center;
    font-size: 13px;
    color: var(--lcm-chip);
    text-decoration: none;
}

/* 分类切换 */
.lcm-tabs {
    /**
     * 吸附在顶栏下面,翻列表时分类不用回顶去够。
     * 48 而不是 49:顶栏是 48 + 1px 下边框,在 1.25 倍缩放下那条边只有 0.8px,
     * 卡着 49 接会露出 0.2px 的发丝线;让分类往顶栏底下钻 1px,顶栏层级(20)压着它,看不出来。
     */
    position: sticky;
    top: 48px;
    z-index: 19;
    display: flex;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 8px;
    scrollbar-width: none;
    background: var(--lcm-card);
    border-bottom: 1px solid var(--lcm-line);
}

.lcm-tabs::-webkit-scrollbar { display: none; }

.lcm-tabs a {
    position: relative;
    flex: 1 0 68px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 0 9px;
    font-size: 12px;
    color: var(--lcm-sub);
    text-decoration: none;
}

.lcm-tabs a::before {
    content: '';
    width: 19px;
    height: 19px;
    background: #9a9a9a;
    -webkit-mask: center/contain no-repeat;
    mask: center/contain no-repeat;
}

.lcm-tabs a[data-type="all"]::before { -webkit-mask-image: var(--lcm-i-grid); mask-image: var(--lcm-i-grid); }
.lcm-tabs a[data-type="text"]::before { -webkit-mask-image: var(--lcm-i-type); mask-image: var(--lcm-i-type); }
.lcm-tabs a[data-type="image"]::before { -webkit-mask-image: var(--lcm-i-image); mask-image: var(--lcm-i-image); }
.lcm-tabs a[data-type="music"]::before { -webkit-mask-image: var(--lcm-i-music); mask-image: var(--lcm-i-music); }
.lcm-tabs a[data-type="video"]::before { -webkit-mask-image: var(--lcm-i-film); mask-image: var(--lcm-i-film); }

.lcm-tabs a.is-active {
    color: var(--lcm-main-ink);
    font-weight: 600;
}

.lcm-tabs a.is-active::before { background: var(--lcm-main-ink); }

.lcm-tabs a.is-active::after {
    content: '';
    position: absolute;
    left: 26%;
    right: 26%;
    bottom: 0;
    height: 2px;
    border-radius: var(--lcm-radius-sm);
    background: var(--lcm-main-ink);
}

/* 信息流 */
.lcm-list { display: block; }

.lcm-item {
    display: flex;
    gap: 10px;
    padding: 16px var(--lcm-gap);
    /** 顶栏 49 + 吸附的分类栏 62,锚点跳转要留出这一截 */
    scroll-margin-top: 119px;
}

.lcm-item.lcm-is-pending {
    background: rgba(250, 81, 81, .05);
}

.lcm-avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: var(--lcm-radius-sm);
    background: var(--lcm-line);
    object-fit: cover;
}

.lcm-main { flex: 1 1 auto; min-width: 0; }

.lcm-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--lcm-name);
    line-height: 1.4;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.lcm-name a { color: inherit; text-decoration: none; }

.lcm-badge {
    font-style: normal;
    font-size: 11px;
    font-weight: 400;
    color: var(--lcm-main-ink);
    border: 1px solid currentColor;
    border-radius: var(--lcm-radius-sm);
    padding: 0 3px;
}

.lcm-type-tag {
    font-size: 11px;
    font-weight: 400;
    color: var(--lcm-sub);
    background: var(--lcm-gray);
    border-radius: var(--lcm-radius-sm);
    padding: 1px 5px;
}

.lcm-tag-pending {
    font-size: 11px;
    font-weight: 400;
    color: var(--lcm-like-ink);
}

.lcm-tag-wx {
    font-size: 11px;
    font-weight: 400;
    color: var(--lcm-main-ink);
}

/* 置顶标:实心小标,一排小标里要能一眼挑出来 */
.lcm-tag-top {
    font-size: 11px;
    font-weight: 400;
    color: #fff;
    background: var(--lcm-main-solid);
    border-radius: var(--lcm-radius-sm);
    padding: 1px 5px;
}

.lcm-item .lcm-body {
    margin: 4px 0 0;
    font-size: 15px;
    line-height: 1.55;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
}

.lcm-item .lcm-body a { color: var(--lcm-name); text-decoration: none; }

.lcm-topic { color: var(--lcm-name); font-weight: 400; }

/* 长文折叠:超过两行先折起来,右下角给一个「全文」 */
.lcm-item .lcm-body.is-folded {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lcm-fold {
    display: block;
    width: max-content;
    margin-left: auto;
    margin-top: 2px;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--lcm-name);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

/*
 * 视频:列表里缩成一张小卡片,不管片源横竖都锁同一个比例(裁中间),
 * 否则一条 16:9 一条竖屏,同一页两个高度就是不齐;完整画面在点开的全屏层里看。
 * 宽度挂在外层上,播放键的 left:50% 才是画面正中。窄屏给 200px 下限,免得没法点。
 */
.lcm-video-wrap {
    position: relative;
    width: clamp(200px, 50%, 100%);
    max-width: 100%;
    margin-top: 8px;
}

.lcm-video-wrap video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--lcm-radius-sm);
    background: #000;
    cursor: pointer;
}

/* 播放键压在卡片正中,尺寸与音乐卡那颗对齐 */
.lcm-video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    padding: 0;
    border: 0;
    border-radius: var(--lcm-radius-pill);
    background: rgba(0, 0, 0, .45);
    cursor: pointer;
}

/**
 * 三角必须绝对定位:Blink 会把 <button> 的内容垂直居中(横向仍从左边排),
 * 用 margin 摆它会被这套再挪一遍,实测整颗往下偏 5.5px。
 * +1px 是给三角形的重心让位——它的形心天生偏左,不补这点看着就是歪的。
 */
.lcm-video-play::before {
    content: '';
    position: absolute;
    left: calc(50% + 1px);
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    background: #fff;
    -webkit-mask: var(--lcm-i-play) center/contain no-repeat;
    mask: var(--lcm-i-play) center/contain no-repeat;
}

.lcm-video-play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/*
 * 点开播放:同一颗 video 原地浮到全屏黑幕上,不换元素、不重新下载一遍;
 * 外面那层用 JS 撑住原来的高度,免得卡片一浮走列表塌一块。
 */
.lcm-video-wrap.is-pop { z-index: 1001; }

.lcm-video-wrap.is-pop video {
    position: fixed;
    inset: 0;
    margin: auto;
    max-width: calc(100% - 16px);
    max-height: calc(100% - 16px);
    width: auto;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    border-radius: 0;
    cursor: default;
}

.lcm-video-wrap.is-pop .lcm-video-play { display: none; }

.lcm-pop-mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .92);
    z-index: 1000;
    cursor: zoom-out;
}

/* 图片网格:微信九宫格 */
.lcm-images {
    display: grid;
    gap: 5px;
    margin-top: 8px;
    max-width: 345px;
}

.lcm-images .lcm-img {
    position: relative;
    padding-top: 100%;
    overflow: hidden;
    border-radius: var(--lcm-radius-sm);
    background: var(--lcm-gray);
    cursor: zoom-in;
}

.lcm-images img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 单图放大到两格宽(110×2+5),不然一张图和九宫格里的小缩略图一样大,空着一大片位子 */
.lcm-grid-1 { grid-template-columns: minmax(0, 225px); }
.lcm-grid-2 { grid-template-columns: repeat(2, minmax(0, 110px)); }
.lcm-grid-3 { grid-template-columns: repeat(3, minmax(0, 110px)); }

/* 音乐卡片 */
.lcm-music {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    max-width: 345px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: var(--lcm-radius-lg);
    background: var(--lcm-gray);
}

.lcm-music-cover {
    width: 46px;
    height: 46px;
    border-radius: var(--lcm-radius-sm);
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--lcm-line);
}

.lcm-music-info { flex: 1 1 auto; min-width: 0; }

.lcm-music-title {
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lcm-music-artist {
    font-size: 13px;
    color: var(--lcm-sub);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 进度条只在播放时出现,静止时不留一条像分割线的灰条 */
.lcm-music-bar {
    display: none;
    height: 3px;
    border-radius: var(--lcm-radius-sm);
    background: rgba(127, 127, 127, .25);
    margin-top: 6px;
    overflow: hidden;
}

.lcm-music.is-playing .lcm-music-bar { display: block; }

.lcm-music-bar i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--lcm-main);
    transition: width .2s linear;
}

.lcm-music-play {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 0;
    background: var(--lcm-main-solid);
    cursor: pointer;
    position: relative;
}

.lcm-music-play span {
    position: absolute;
    top: 50%;
    left: calc(50% + 2px);
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-left: 10px solid #fff;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.lcm-music-play.is-playing span {
    left: 50%;
    width: 10px;
    height: 11px;
    border: 0;
    background: linear-gradient(to right, #fff 0 4px, transparent 4px 6px, #fff 6px 10px);
}

/* 分享卡片 */
.lcm-share {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: var(--lcm-radius-lg);
    background: var(--lcm-gray);
    color: inherit;
    text-decoration: none;
}

.lcm-share:hover {
    box-shadow: inset 0 0 0 1px var(--lcm-line);
}

.lcm-share-img {
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    border-radius: var(--lcm-radius-sm);
    object-fit: cover;
    background: var(--lcm-line);
}

.lcm-share-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.lcm-share-title, .lcm-share-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}

.lcm-share-title {
    font-size: 15px;
    color: var(--lcm-text);
}

.lcm-share-desc {
    font-size: 13px;
    color: var(--lcm-sub);
}

.lcm-share-host {
    font-size: 12px;
    color: var(--lcm-sub);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 时间 + 操作 */
.lcm-ft {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--lcm-sub);
}

/* 阅读数和时间并成一组,靠左侧 */
.lcm-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* 改过的痕迹只做个小记号,颜色沿用时间那档(白底 5.33:1、深底 5.14:1) */
.lcm-edited {
    flex: 0 0 auto;
    padding: 0 5px;
    border: 1px solid var(--lcm-line);
    border-radius: var(--lcm-radius-sm);
    font-size: 12px;
    line-height: 16px;
}

.lcm-btns {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.lcm-ft button,
.lcm-permalink {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    box-sizing: border-box;
    border: 0;
    background: var(--lcm-gray);
    color: var(--lcm-name);
    border-radius: var(--lcm-radius-sm);
    min-width: 30px;
    height: 26px;
    padding: 0 8px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    text-decoration: none;
}

/** 灰色小药片只有 26px 高,手指点不准;向外扩出一层透明热区,吃的是上下各 8px 的外边距,不压到邻居的可点内容 */
.lcm-ft button::after,
.lcm-permalink::after {
    content: '';
    position: absolute;
    inset: -7px -2px;
}

.lcm-ft button i,
.lcm-permalink i {
    width: 15px;
    height: 15px;
    display: inline-block;
    background: currentColor;
}

.lcm-like i {
    -webkit-mask: var(--lcm-i-heart) center/contain no-repeat;
    mask: var(--lcm-i-heart) center/contain no-repeat;
}

.lcm-like.is-liked {
    color: var(--lcm-name);
    background: rgba(87, 107, 149, .14);
}

.lcm-cmt-toggle i {
    -webkit-mask: var(--lcm-i-comment) center/contain no-repeat;
    mask: var(--lcm-i-comment) center/contain no-repeat;
}

.lcm-permalink i {
    -webkit-mask: var(--lcm-i-link) center/contain no-repeat;
    mask: var(--lcm-i-link) center/contain no-repeat;
}

.lcm-ft b { font-weight: 400; }
.lcm-ft b:empty { display: none; }

/* 管理菜单:一个两点按钮,点开才是操作列表 */
.lcm-menu {
    position: relative;
    display: inline-flex;
    margin-left: 4px;
}

.lcm-menu-btn { color: var(--lcm-sub); }

.lcm-menu-btn i {
    -webkit-mask: var(--lcm-i-dots) center/contain no-repeat;
    mask: var(--lcm-i-dots) center/contain no-repeat;
}

.lcm-pop {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    min-width: 96px;
    padding: 4px;
    background: var(--lcm-card);
    border-radius: var(--lcm-radius-lg);
    box-shadow: 0 3px 14px rgba(0, 0, 0, .16);
}

.lcm-pop[hidden] { display: none; }

.lcm-pop button {
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--lcm-radius-sm);
    background: transparent;
    color: var(--lcm-text);
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}

.lcm-pop button:hover { background: var(--lcm-gray); }

.lcm-pop button.is-danger { color: var(--lcm-like-ink); }

/* 灰底赞评区 */
.lcm-social { display: none; }

.lcm-social.is-open { display: block; }

.lcm-likers {
    display: flex;
    flex-wrap: wrap;
    row-gap: 4px;
    margin-top: 8px;
    padding: 7px 10px 7px 28px;
    position: relative;
    font-size: 14px;
    background: var(--lcm-gray);
    border-radius: var(--lcm-radius-sm);
    color: var(--lcm-name);
}

.lcm-likers:empty { display: none; }

.lcm-likers::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 11px;
    width: 14px;
    height: 14px;
    background: var(--lcm-name);
    -webkit-mask: var(--lcm-i-heart) center/contain no-repeat;
    mask: var(--lcm-i-heart) center/contain no-repeat;
    opacity: .7;
}

.lcm-liker + .lcm-liker::before {
    content: ',';
    margin-right: 4px;
}

/* 赞与评论同屏时并成一块灰底 */
.lcm-likers:not(:empty) + .lcm-comments:not([hidden]) {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.lcm-likers:not(:empty):has(+ .lcm-comments:not([hidden])) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* 评论 */
.lcm-comments {
    margin-top: 5px;
    font-size: 14px;
    background: var(--lcm-gray);
    border-radius: var(--lcm-radius-sm);
    padding: 7px 10px;
}

/* 表单自己成了一张白卡,得留着外面这层灰底才衬得出来;
   以前这条「只剩表单就把灰底撤掉」的例外,现在撤了会让白卡落在白底上彻底看不见 */
.lcm-comments[hidden] { display: none; }

.lcm-cm {
    line-height: 1.5;
    word-break: break-word;
    padding: 1px 0;
}

.lcm-cm + .lcm-cm { margin-top: 3px; }

/* 列表页只带前几条评论,剩下的收在这条链接背后(朋友圈也是这么折的) */
.lcm-cmt-all {
    display: inline-block;
    margin-top: 3px;
    color: var(--lcm-chip);
    text-decoration: none;
}

.lcm-cmt-all:hover { text-decoration: underline; }

.lcm-cname { color: var(--lcm-name); }
.lcm-cname a { color: inherit; text-decoration: none; }

.lcm-ctext { color: var(--lcm-text); }

/** 整条评论就是回复按钮:时间和「回复」不再摆在明面上,绝对时间挂在 title 与 datetime 里 */
.lcm-cmain {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.lcm-cbody {
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
}

/* 管理员的评论操作:挂在评论行右端,平时淡灰,悬停才上色 */
.lcm-cact {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--lcm-sub);
}

.lcm-cact button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 22px;
    height: 21px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--lcm-sub);
    font-family: inherit;
    cursor: pointer;
}

/** 图标看着只有 22×21,手指点不准;向外扩一圈透明热区(约 30×35)。
    正文列被 flex 让出了右边 6px 空档,热区左右只吃这 6px 里的 4px,压不到任何一行的正文 */
.lcm-cact button::after {
    content: '';
    position: absolute;
    inset: -7px -4px;
}

.lcm-cact button i {
    width: 14px;
    height: 14px;
    display: inline-block;
    background: currentColor;
}

.lcm-cop-ok:hover { color: var(--lcm-main); }
.lcm-cop-del:hover { color: var(--lcm-like); }

.lcm-cop-ok i {
    -webkit-mask: var(--lcm-i-check) center/contain no-repeat;
    mask: var(--lcm-i-check) center/contain no-repeat;
}

.lcm-cop-del i {
    -webkit-mask: var(--lcm-i-trash) center/contain no-repeat;
    mask: var(--lcm-i-trash) center/contain no-repeat;
}

/**
 * 管理员的这两枚按钮平时收着,指针落到那条评论上才露出来——一屏五六条评论就摆一排垃圾桶,太占眼。
 * 只藏按钮,不藏整块「待审」标记(那是内容);用 visibility 而不是 display,行宽不会跟着抖。
 * 限定在有鼠标的设备上:手机没有悬停,藏起来就再也点不到了。
 */
@media (hover: hover) and (pointer: fine) {
    .lcm-cact button {
        visibility: hidden;
        opacity: 0;
        transition: opacity .12s ease, visibility .12s;
    }

    .lcm-cm:hover .lcm-cact button,
    .lcm-cm:focus-within .lcm-cact button,
    .lcm-cbody:focus ~ .lcm-cact button {
        visibility: visible;
        opacity: 1;
    }
}

.lcm-cform {
    margin-top: 10px;
    padding: 10px;
    background: var(--lcm-card);
    border-radius: var(--lcm-radius-sm);
}

.lcm-cform-row { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }

.lcm-cform-main { display: block; }

.lcm-cform input.text,
.lcm-cform textarea {
    box-sizing: border-box;
    border: 0;
    background: var(--lcm-gray);
    color: inherit;
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
    transition: box-shadow .15s;
}

.lcm-cform input.text {
    /** 昵称/网址/邮箱三个必须并排一行,所以不预留 96px 的基准宽,只留 72px 的下限 */
    flex: 1 1 0;
    min-width: 72px;
    height: 34px;
    padding: 0 12px;
    border-radius: var(--lcm-radius-sm);
    background: var(--lcm-gray);
}

.lcm-cform textarea {
    display: block;
    width: 100%;
    resize: none;
    overflow-y: auto;
    padding: 7px 12px;
    border-radius: var(--lcm-radius-sm);
    min-height: 36px;
    max-height: 132px;
}

.lcm-cform ::placeholder { color: var(--lcm-sub); }

.lcm-cform input:focus,
.lcm-cform textarea:focus {
    box-shadow: inset 0 0 0 1px var(--lcm-main-ink);
}

.lcm-cform-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px;
}

.lcm-cancel-reply {
    box-sizing: border-box;
    background: var(--lcm-gray);
    color: var(--lcm-sub);
    border: 0;
    border-radius: var(--lcm-radius-lg);
    height: 34px;
    padding: 0 14px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
}

.lcm-btn-primary[type=submit] {
    border: 0;
    background: var(--lcm-main-solid);
    color: #fff;
    border-radius: var(--lcm-radius-sm);
    padding: 6px 16px;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    margin-left: auto;
}

/* 评论框里的发送按钮:和取消按钮同高,整行贴右对齐 */
.lcm-cform .lcm-btn-primary[type=submit] {
    border-radius: var(--lcm-radius-lg);
    height: 34px;
    padding: 0 16px !important;
    line-height: 34px;
    margin-left: 0;
    flex: 0 0 auto;
    transition: opacity .15s;
}

.lcm-cform .lcm-btn-primary[type=submit]:hover { opacity: .88; }

.lcm-closed {
    font-size: 13px;
    color: var(--lcm-sub);
    padding: 4px 0;
}

.lcm-closed a { color: var(--lcm-name); text-decoration: none; }

/* ---------- 微信表情 ---------- */

/**
 * 正文里的表情:图是雪碧图的一格,靠 --ex/--ey 定位。
 * 后备文字用 font-size:0 藏起来,但字号归零会让 inline-block 的基线跑到顶边上,
 * 整行被顶高一倍;加 overflow 才能把基线钉在底边,vertical-align 才按像素说话。
 */
.lcm-emo {
    display: inline-block;
    box-sizing: border-box;
    overflow: hidden;
    width: 22px;
    height: 22px;
    vertical-align: -5px;
    font-size: 0;
    background: var(--lcm-emo-sheet) no-repeat;
    background-size: 1100% 900%;
    background-position: calc(var(--ex) * 100% / 10) calc(var(--ey) * 100% / 8);
}

.lcm-ctext .lcm-emo {
    width: 20px;
    height: 20px;
    vertical-align: -4px;
}

.lcm-emohost {
    display: inline-flex;
}

.lcm-emo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: var(--lcm-radius-sm);
    background: transparent;
    color: var(--lcm-sub);
    cursor: pointer;
    font-family: inherit;
}

.lcm-emo-btn i {
    display: block;
    width: 22px;
    height: 22px;
    background: currentColor;
    -webkit-mask: var(--lcm-i-smile) center/contain no-repeat;
    mask: var(--lcm-i-smile) center/contain no-repeat;
}

.lcm-emo-btn[aria-expanded="true"] { color: var(--lcm-main-ink); }

/** 全站只有这一份面板,由 JS 定位到当前 😊 按钮旁边。用 fixed 是因为发微语弹层自己会滚动,绝对定位会被裁掉 */
.lcm-emo-pop {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 80;
    display: grid;
    grid-template-columns: repeat(auto-fill, 30px);
    justify-content: start;
    gap: 2px;
    box-sizing: border-box;
    width: 266px;
    max-width: calc(100vw - 32px);
    max-height: 152px;
    overflow-y: auto;
    padding: 6px;
    border-radius: var(--lcm-radius-lg);
    background: var(--lcm-card);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
}

.lcm-emo-pop[hidden] { display: none; }

.lcm-emo-pop .lcm-emo {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: var(--lcm-radius-sm);
    background-color: transparent;
    cursor: pointer;
}

.lcm-emo-pop .lcm-emo:hover { background-color: var(--lcm-gray); }

/* 分页 */
.lcm-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 22px var(--lcm-gap) 16px;
    font-size: 14px;
}

/* 上面那条 display:flex 压过了浏览器对 [hidden] 的默认样式,滚动加载接管后要自己补一刀 */
.lcm-pager[hidden] { display: none; }

.lcm-pager a,
.lcm-pager .is-cur {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0;
    border-radius: var(--lcm-radius-sm);
    background: var(--lcm-gray);
    color: var(--lcm-name);
    text-decoration: none;
}

.lcm-pager a:hover { background: var(--lcm-line); }

.lcm-pager .is-cur {
    background: var(--lcm-name);
    color: #ffffff;
}

.lcm-pager .is-prev i,
.lcm-pager .is-next i {
    width: 18px;
    height: 18px;
    background: currentColor;
}

.lcm-pager .is-prev i {
    -webkit-mask: var(--lcm-i-back) center/contain no-repeat;
    mask: var(--lcm-i-back) center/contain no-repeat;
}

.lcm-pager .is-next i {
    -webkit-mask: var(--lcm-i-next) center/contain no-repeat;
    mask: var(--lcm-i-next) center/contain no-repeat;
}

.lcm-pg-gap {
    color: var(--lcm-sub);
    padding: 0 2px;
}

/**
 * 收尾区:白列里不再铺一块淡绿底,那块绿跟整页对不上,像贴了张便签。
 * 淡绿只留给按钮那圈投影和下面那行小字。
 */
.lcm-more-card {
    box-sizing: border-box;
    width: calc(100% - var(--lcm-gap) * 2);
    max-width: 420px;
    margin: 14px auto 0;
    padding: 2px 16px 4px;
    text-align: center;
}

.lcm-more {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 22px;
    border: 1px solid var(--lcm-line);
    border-radius: var(--lcm-radius-pill);
    background: var(--lcm-pill);
    color: var(--lcm-name);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    box-shadow: 0 2px 8px var(--lcm-pill-shadow);
    cursor: pointer;
    transition: box-shadow .18s, transform .18s;
}

.lcm-more i {
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: var(--lcm-i-down) center/contain no-repeat;
    mask: var(--lcm-i-down) center/contain no-repeat;
}

.lcm-more:hover {
    box-shadow: 0 4px 14px var(--lcm-pill-shadow);
    transform: translateY(-1px);
}

.lcm-more[disabled] { cursor: default; opacity: .7; transform: none; }

.lcm-more:hover i { animation: lcm-bob .9s ease-in-out infinite; }

@keyframes lcm-bob {
    0%, 100% { transform: translateY(-1px); }
    50% { transform: translateY(2px); }
}

/**
 * 自动接下一页时,列表末尾单独出一条「加载中」:
 * 新内容就从这条下面冒出来,提示得站在那儿,不能只在底下那颗胶囊里换个字。
 */
.lcm-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 0 2px;
    color: var(--lcm-glow-text);
    font-size: 13px;
}

.lcm-loading[hidden] { display: none; }

.lcm-loading i {
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: lcm-spin .7s linear infinite;
}

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

/* 自动接上来的新条目淡入,接住上面那阵转圈 */
.lcm-in {
    animation: lcm-in .26s ease both;
}

@keyframes lcm-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lcm-in { animation: none; }
    .lcm-loading i { animation-duration: 1.6s; }
}

/* 卡里那行小字:还剩多少条 / 一共多少条 */
.lcm-more-tip {
    margin-top: 9px;
    font-size: 11px;
    color: var(--lcm-glow-text);
}

/* 到底收尾:一行小字夹在两条短线中间 */
.lcm-end {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--lcm-sub);
    font-size: 13px;
}

.lcm-end::before,
.lcm-end::after {
    content: '';
    flex: 1 1 0;
    max-width: 56px;
    height: 1px;
    background: var(--lcm-glow-line);
}

.lcm-empty {
    text-align: center;
    color: var(--lcm-sub);
    font-size: 14px;
    padding: 48px 0;
}

.lcm-foot {
    text-align: center;
    font-size: 12px;
    line-height: 1.9;
    color: var(--lcm-sub);
    border-bottom: 0;
    padding: 14px 16px 18px;
}

.lcm-foot a { color: var(--lcm-sub); text-decoration: none; }

/* 页脚备案号:和 Powered by 串成一行 */
.lcm-beian { display: inline; }
.lcm-foot .lcm-sep { font-style: normal; margin: 0 6px; opacity: .55; }
.lcm-beian a { white-space: nowrap; }

/* 提示条 */
.lcm-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translate(-50%, 20px);
    background: rgba(0, 0, 0, .82);
    color: #fff;
    font-size: 14px;
    padding: 9px 18px;
    border-radius: var(--lcm-radius-lg);
    max-width: 80vw;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
    z-index: 999;
    text-align: center;
}

.lcm-toast.is-show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* 灯箱 */
.lcm-viewer {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
    box-sizing: border-box;
    cursor: zoom-out;
}

.lcm-viewer[hidden] { display: none; }

.lcm-viewer img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* 站点页脚入口 */
.lcm-entry a { color: inherit; }

/* 回到顶部:滚过一屏才出现;层级压在发布浮层(60)和搜索页(70)下面 */
.lcm-totop {
    position: fixed;
    right: 16px;
    bottom: calc(96px + env(safe-area-inset-bottom));
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--lcm-line);
    border-radius: 50%;
    background: var(--lcm-card);
    color: var(--lcm-sub);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .18s, transform .18s, visibility .18s, color .18s;
}

.lcm-totop.is-show {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.lcm-totop:hover { color: var(--lcm-main); }

.lcm-totop i {
    display: block;
    width: 22px;
    height: 22px;
    background: currentColor;
    -webkit-mask: var(--lcm-i-up) center/contain no-repeat;
    mask: var(--lcm-i-up) center/contain no-repeat;
}

/**
 * 宽屏时这两个圆钮都贴视口右下角竖排:月亮在上、向上箭头在下,间距 12px。
 * 贴着 640px 内容列的右沿会把正文最后一列挡住,所以统一用 right: 16px。
 */
@media (min-width: 672px) {
    .lcm-dark {
        position: fixed;
        right: 16px;
        bottom: calc(148px + env(safe-area-inset-bottom));
        z-index: 40;
        box-sizing: border-box;
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--lcm-line);
        border-radius: 50%;
        background: var(--lcm-card);
        color: var(--lcm-sub);
        box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
        transition: color .18s, background-color .18s, border-color .18s;
    }

    .lcm-dark:hover { color: var(--lcm-main); }

    /* 和下面那枚向上箭头同尺寸,两颗圆钮竖着排才看得出是一对 */
    .lcm-dark i {
        width: 22px;
        height: 22px;
    }
}

/* 手机上没地方放这两个圆钮,回到顶部直接不出,夜景键留在顶栏 */
@media (max-width: 671px) {
    .lcm-totop { display: none; }
}

@media (max-width: 480px) {
    :root { --lcm-gap: 14px; }
    body.lcm-body { font-size: 15px; }
    .lcm-images { max-width: 100%; }
    .lcm-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lcm-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lcm-grid-1 { grid-template-columns: minmax(0, 225px); }
}