/* 学习中心样式。颜色、圆角、阴影全部取 materials.css 的 token，不再维护一套单独的绿色系，
   这样学习中心和智能封面、排行、内容库看起来是同一个产品。
   分区：1 基础 / 2 顶栏 / 3 列表 / 4 空状态 / 5 阅读页 / 6 留言 / 7 管理 / 8 分类 / 9 编辑页 /
   10 图文编辑器 / 11 大图浏览 / 12 窄屏。 */

/* ---------- 1. 基础 ---------- */
.lc{--lc-max:1560px;--lc-measure:720px;max-width:var(--lc-max);margin:0 auto;padding:2px 18px 60px;color:var(--ink,#20242a)}
.lc *{box-sizing:border-box}
.lc a{color:inherit;text-decoration:none}
.lc button,.lc input,.lc select,.lc textarea{font:inherit}
.lc input,.lc textarea,.lc select{min-width:0;border:1px solid var(--hairline,rgba(75,84,96,.11));border-radius:var(--radius-control,14px);background:var(--surface-hi,#fff);color:var(--ink,#20242a);padding:10px 13px;line-height:1.6;box-shadow:var(--shadow-well)}
.lc input:focus-visible,.lc textarea:focus-visible,.lc select:focus-visible,.lc button:focus-visible,.lc a:focus-visible,.lc-crumb a:focus-visible{outline:2px solid #a6bdd5;outline-offset:2px}
.lc-muted{font-size:12px;color:var(--muted,#747b84);line-height:1.85;margin:0}
.lc-loading{font-size:12px;color:var(--muted,#747b84);padding:26px 2px}
.lc-error{color:#ae483c!important}
.lc-field-label{font-size:11px;color:var(--muted,#747b84);letter-spacing:.2px}
.lc-text-button{font-size:12px;color:#3d6b53;background:none;border:0;padding:4px 0;cursor:pointer}
.lc-text-button:hover{color:#1f4a34}
.lc-icon-button{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--hairline,rgba(75,84,96,.11));border-radius:10px;background:var(--surface-hi,#fff);color:#59626d;cursor:pointer;box-shadow:var(--shadow-soft)}
.lc-icon-button .icon{width:14px;height:14px}
.lc-icon-button:hover:not(:disabled){color:var(--ink,#20242a)}
.lc-icon-button:disabled{opacity:.35;cursor:not-allowed}
.lc-select{position:relative;display:flex;align-items:center}
.lc-select select{width:100%;appearance:none;padding-right:32px}
.lc-select .icon{position:absolute;right:11px;width:14px;height:14px;pointer-events:none;color:var(--muted,#747b84)}
/* 状态行平时是空的，空着就不要占一行的外边距。 */
#lc-admin-feedback:empty,#lc-category-feedback:empty,#lc-editor-feedback:empty,#lc-comment-feedback:empty{display:none}

/* ---------- 2. 顶栏（被 QiepianLayout.arrange 抬进 .page-toolbar） ---------- */
.lc-hero h1{margin:0}
.lc-hero-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-left:auto}
.lc-crumb{display:flex;align-items:center;gap:12px;min-width:0;width:100%}
.lc-crumb .crumb-title{flex:1 1 auto;min-width:0;font-size:16px;font-weight:620;letter-spacing:-.2px}
.lc-crumb-note{font-size:11px;color:var(--muted,#747b84);white-space:nowrap;flex:none;padding-left:12px;border-left:1px solid var(--hairline,rgba(75,84,96,.11))}
.lc-crumb-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
/* 筛选条自成一行：标题和主操作在上，分类/搜索/专题在下，分类多起来也不会把搜索挤掉。 */
.page-toolbar .lc-controls{flex-basis:100%;width:100%;order:2;padding-top:2px}
.page-toolbar>.lc-hero,.page-toolbar .lc-crumb{order:1}
.page-toolbar .lc-controls .list-tools{margin-left:auto;flex-shrink:0}
.page-toolbar .lc-controls .search{width:230px}
.page-toolbar .lc-controls .sort-control select{max-width:170px}
/* 全站 .breadcrumb 自带右分隔线，且把里面的 span 隐藏（旧布局那里跟着一个标题块）。
   学习中心的面包屑占满整行，那条线会孤零零留在最右边，分类/难度/时长也要显示出来。 */
/* 窄屏时全站把 .page-toolbar.detail-toolbar 变成 [32px 返回键][标题] 两列网格；学习中心的
   面包屑自己就是一整条，所以让它横跨两列，否则标题会被压成 0 宽。 */
.page-toolbar .lc-crumb{border-right:0;padding-right:0;gap:12px}
.page-toolbar.detail-toolbar>.lc-crumb{grid-column:1/-1}
.page-toolbar .lc-crumb>.lc-crumb-note{display:block}
.lc-controls .filter-tabs{overflow-x:auto;scrollbar-width:none;max-width:100%}
.lc-controls .filter-tabs::-webkit-scrollbar{display:none}
.lc-status-select select{min-width:96px;font-size:12px;padding:7px 30px 7px 11px}
.lc-save-state{font-size:11px;color:var(--muted,#747b84);white-space:nowrap}
.lc-save-state[data-state=dirty]{color:#9a7327}
.lc-save-state[data-state=saved]{color:#3d6b53}

/* ---------- 3. 列表 ---------- */
.lc-summary,.lc-series-head{display:flex;align-items:center;gap:14px;padding:16px 2px 14px;font-size:12px;color:var(--muted,#747b84)}
.lc-summary .pill-button,.lc-series-head .pill-button{margin-left:auto}
.lc-series-head{background:var(--surface-hi,#fff);border:1px solid var(--hairline,rgba(75,84,96,.11));border-radius:18px;padding:14px 18px;margin:16px 0 18px;box-shadow:var(--shadow-soft)}
.lc-series-head strong{display:block;font-size:14px;color:var(--ink,#20242a);margin-bottom:4px}
.lc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:12px}
.lc-card{display:flex;flex-direction:column;gap:9px;padding:18px 19px;background:var(--surface-hi,#fff);border:1px solid var(--hairline,rgba(75,84,96,.11));border-radius:20px;box-shadow:var(--shadow-soft);transition:box-shadow var(--t-base,.2s) var(--ease),transform var(--t-base,.2s) var(--ease),border-color var(--t-base,.2s) var(--ease)}
.lc-card:hover{border-color:rgba(75,84,96,.2);box-shadow:var(--shadow-float);transform:translateY(-1px)}
.lc-card-top{display:flex;align-items:flex-start;gap:12px}
.lc-card h2{flex:1;min-width:0;font-size:15px;line-height:1.55;font-weight:620;margin:0;letter-spacing:-.1px}
.lc-card-thumb{flex:none;width:52px;height:52px;object-fit:cover;border-radius:12px;border:1px solid var(--hairline,rgba(75,84,96,.11));background:var(--canvas,#f1f2f4)}
.lc-card-summary{flex:1;font-size:12px;line-height:1.85;color:var(--muted,#747b84);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lc-card-foot{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;font-size:11px;color:#8b929b;padding-top:9px;border-top:1px solid var(--hairline,rgba(75,84,96,.11))}
.lc-card-facts{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap}
.lc-card-facts>span:not(.lc-level):not(.lc-demo){position:relative;padding-left:9px}
.lc-card-facts>span:not(.lc-level):not(.lc-demo)::before{content:"";position:absolute;left:0;top:50%;width:2px;height:2px;border-radius:50%;background:#c2c7cd;transform:translateY(-50%)}
.lc-card-where{margin-left:auto;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52%}
.lc-level{flex:none;padding:2px 7px;border-radius:6px;font-size:11px;font-weight:600;background:#eef1f4;color:#5b646f}
.lc-level[data-level="入门"]{background:#e9f2ec;color:#2f6a4a}
.lc-level[data-level="进阶"]{background:#eaf0f7;color:#3f5f84}
.lc-level[data-level="实战"]{background:#f6eee6;color:#8a5f32}
.lc-demo{flex:none;font-size:11px;color:#8a6a2c;background:#fbf4e6;padding:2px 7px;border-radius:6px}
.lc-card-cat{flex:none;font-size:11px;color:#4a5561;background:#eef1f4;padding:2px 7px;border-radius:6px}
.lc-pagination{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 2px 4px;font-size:11px;color:var(--muted,#747b84)}
.lc-pagination>div{display:flex;gap:8px}

/* ---------- 4. 空状态 ---------- */
.lc-empty{background:var(--surface-hi,#fff);border:1px solid var(--hairline,rgba(75,84,96,.11));border-radius:20px;margin-top:8px;box-shadow:var(--shadow-soft)}
.lc-empty h2{font-size:16px;font-weight:620}
.lc-empty p{font-size:12px}
.lc-empty-compact{min-height:0;padding:30px 20px;border-style:dashed;box-shadow:none;background:transparent}

/* ---------- 5. 阅读页 ---------- */
/* 列表和管理页跟排行、爆款一样铺满：原来卡在 1180px，1920 屏上左右各空掉 200 多像素。
   阅读页另算——正文一行不能太长，但整列也放宽到 1184，侧栏加宽，两边的空白少一半。 */
.lc:has(.lc-reading-layout){--lc-max:1240px;--lc-measure:720px}
.lc:has(.lc-editor){--lc-max:1320px}
.lc-reading-layout{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:26px;align-items:start}
.lc-reading-main{min-width:0}
.lc-article{background:var(--surface-hi,#fff);padding:38px 40px 34px;border:1px solid var(--hairline,rgba(75,84,96,.11));border-radius:22px;box-shadow:var(--shadow-soft);overflow-wrap:anywhere}
.lc-tags{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:11px;color:var(--muted,#747b84)}
.lc-article h1{max-width:var(--lc-measure);font-size:27px;line-height:1.45;margin:16px 0 10px;letter-spacing:-.5px;font-weight:650}
.lc-deck{max-width:var(--lc-measure);font-size:14px;line-height:1.9;color:#626b75;margin:0}
.lc-meta{font-size:11px;color:#949aa2;padding:16px 0 20px;border-bottom:1px solid var(--hairline,rgba(75,84,96,.11))}
.lc-prose{max-width:var(--lc-measure);font-size:15px;line-height:2;color:#39414a;margin-top:26px}
.lc-prose h2,.lc-prose h3,.lc-prose h4{line-height:1.55;color:var(--ink,#20242a);margin:32px 0 12px;scroll-margin-top:26px;font-weight:650}
.lc-prose h2{font-size:19px}
.lc-prose h3{font-size:16px}
.lc-prose h4{font-size:15px}
.lc-prose>h2:first-child,.lc-prose>h3:first-child{margin-top:0}
.lc-prose p{margin:14px 0}
.lc-prose blockquote{margin:20px 0;padding:13px 18px;border-left:3px solid #9fb8a9;border-radius:0 12px 12px 0;background:#f4f7f4;color:#4e5a52;font-size:13px;line-height:1.9}
.lc-prose ul,.lc-prose ol{padding-left:24px;margin:14px 0}
.lc-prose li{margin:7px 0}
.lc-prose pre{overflow:auto;background:var(--canvas,#f1f2f4);border-radius:12px;padding:16px;line-height:1.6;font-size:13px}
.lc-prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--canvas,#f1f2f4);border-radius:4px;padding:1px 4px;font-size:13px}
.lc-prose hr{border:0;border-top:1px solid var(--hairline,rgba(75,84,96,.11));margin:30px 0}
.lc-prose figure{margin:26px 0}
.lc-prose img{display:block;max-width:100%;height:auto;border-radius:12px;margin:0 auto;cursor:zoom-in;border:1px solid var(--hairline,rgba(75,84,96,.11));background:var(--canvas,#f1f2f4)}
.lc-prose figcaption{color:#8a919a;font-size:11.5px;text-align:center;line-height:1.75;margin-top:9px}
.lc-prose img:focus-visible{outline:2px solid #a6bdd5;outline-offset:3px}
.lc-pager-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:34px;padding-top:22px;border-top:1px solid var(--hairline,rgba(75,84,96,.11))}
.lc-pager-item{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid var(--hairline,rgba(75,84,96,.11));border-radius:16px;background:var(--surface,#fafafa);transition:border-color var(--t-fast,.14s) var(--ease),background var(--t-fast,.14s) var(--ease)}
.lc-pager-item:hover{border-color:rgba(75,84,96,.22);background:var(--surface-hi,#fff)}
.lc-pager-item small{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted,#747b84)}
.lc-pager-item .icon{width:13px;height:13px}
.lc-pager-item strong{font-size:13px;line-height:1.6;font-weight:600;color:var(--ink,#20242a)}
.lc-pager-item.is-next{text-align:right}
.lc-pager-item.is-next small{justify-content:flex-end}
.lc-reading-aside{position:sticky;top:6px;display:grid;gap:12px;align-content:start}
.lc-aside-box{background:var(--surface-hi,#fff);border:1px solid var(--hairline,rgba(75,84,96,.11));border-radius:18px;box-shadow:var(--shadow-soft);overflow:hidden}
.lc-aside-box>summary{display:flex;align-items:center;gap:8px;padding:13px 16px;font-size:12px;font-weight:600;color:#59626d;cursor:pointer;list-style:none}
.lc-aside-box>summary::-webkit-details-marker{display:none}
.lc-aside-count{margin-left:auto;font-size:11px;font-weight:500;color:#979da5}
.lc-aside-body{padding:0 10px 12px;max-height:min(52vh,460px);overflow:auto}
.lc-aside-body a,.lc-aside-body button{display:flex;gap:7px;text-align:left;width:100%;border:0;background:none;padding:7px 8px;border-radius:9px;color:#6c757f;font-size:12px;line-height:1.65;cursor:pointer}
.lc-aside-body button{display:block}
.lc-aside-body a:hover,.lc-aside-body button:hover{background:var(--canvas,#f1f2f4);color:var(--ink,#20242a)}
.lc-aside-body a em{flex:none;font-style:normal;color:#a9aeb5;font-variant-numeric:tabular-nums}
.lc-aside-body .active{color:#1f4a34;font-weight:650;background:#eef4f0}
.lc-toc-h3{padding-left:20px!important;font-size:11.5px!important}
.lc-toc-h4{padding-left:30px!important;font-size:11.5px!important}

/* ---------- 6. 留言讨论 ---------- */
.lc-discussion{margin-top:16px;background:var(--surface-hi,#fff);padding:26px 40px 30px;border:1px solid var(--hairline,rgba(75,84,96,.11));border-radius:22px;box-shadow:var(--shadow-soft)}
.lc-discussion-head h2{font-size:16px;margin:0;font-weight:650}
.lc-discussion-head h2 span{font-size:12px;color:var(--muted,#747b84);font-weight:500}
.lc-discussion-head p{margin:6px 0 0}
.lc-discussion form{margin-top:16px}
.lc-discussion textarea{display:block;width:100%;resize:vertical;min-height:74px}
.lc-form-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;font-size:11px;color:#959ba3}
#lc-reply-label{display:flex;align-items:center;gap:10px;background:#eef4f0;color:#2f6a4a;padding:8px 12px;border-radius:11px;margin-bottom:10px;font-size:12px}
#lc-reply-label .pill-button{margin-left:auto}
#lc-comment-feedback,#lc-editor-feedback{font-size:12px;line-height:1.8;color:#3d6b53;margin:10px 0 0}
.lc-comment{border-top:1px solid var(--hairline,rgba(75,84,96,.11));padding:18px 0}
.lc-comment.is-reply{margin-left:24px;padding-left:16px;border-left:2px solid var(--hairline,rgba(75,84,96,.11));border-top:0}
.lc-comment-meta{display:flex;align-items:center;flex-wrap:wrap;gap:9px;font-size:12px}
.lc-comment-meta strong{font-weight:600;color:#3f4852}
.lc-comment-meta time{font-size:11px;color:#a3a8af}
.lc-mine{font-size:11px;background:#eef1f4;color:#5b646f;padding:1px 6px;border-radius:5px}
.lc-comment p,.lc-review>p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13.5px;line-height:1.9;color:#4b535c;margin:8px 0 6px}

/* ---------- 7. 管理 ---------- */
.lc-status{display:inline-block;font-size:11px;padding:3px 8px;background:#eef1f4;color:#69717b;border-radius:6px;white-space:nowrap}
.lc-status.published,.lc-status.approved{background:#e9f2ec;color:#2f6a4a}
.lc-status.pending,.lc-status.draft{background:#fbf4e6;color:#8a6a2c}
.lc-status.archived,.lc-status.rejected{background:#f4efec;color:#8a6a60}
#lc-admin-feedback,#lc-category-feedback{font-size:12px;line-height:1.8;color:#3d6b53;margin:10px 0 0}
.lc-admin-list{background:var(--surface-hi,#fff);border:1px solid var(--hairline,rgba(75,84,96,.11));border-radius:20px;box-shadow:var(--shadow-soft);overflow:hidden;margin-top:14px}
.lc-admin-row{display:grid;grid-template-columns:minmax(0,1fr) 72px 78px auto;align-items:center;gap:16px;padding:13px 18px;border-bottom:1px solid var(--hairline,rgba(75,84,96,.11))}
.lc-admin-row:last-child{border-bottom:0}
.lc-admin-row:hover{background:var(--surface,#fafafa)}
.lc-admin-row .lc-status{justify-self:start}
.lc-admin-main{min-width:0}
.lc-admin-title{display:flex;align-items:center;gap:8px;min-width:0}
.lc-admin-title a{font-size:13.5px;font-weight:600;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-admin-title a:hover{color:#1f4a34}
.lc-admin-sub{font-size:11px;color:#949aa2;margin:4px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-admin-date{font-size:11px;color:#979da5;font-variant-numeric:tabular-nums}
.lc-admin-actions{display:flex;gap:6px;justify-content:flex-end}
.lc-review-list{display:grid;gap:10px;margin-top:14px}
.lc-review{padding:16px 18px;background:var(--surface-hi,#fff);border:1px solid var(--hairline,rgba(75,84,96,.11));border-radius:18px;box-shadow:var(--shadow-soft)}
.lc-review-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:12px}
.lc-review-head strong{font-weight:600;color:#3f4852}
.lc-review-head time{font-size:11px;color:#a3a8af}
.lc-review-kind{font-size:11px;background:#eef1f4;color:#5b646f;padding:1px 6px;border-radius:5px}
.lc-review-article{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:#5b7f6b;margin-top:9px}
.lc-review-article .icon{width:13px;height:13px}
.lc-review-article:hover{color:#1f4a34;text-decoration:underline}
.lc-review-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.lc-review-switch button{white-space:nowrap}

/* ---------- 8. 分类管理 ---------- */
.lc-cat-create{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:16px 18px;background:var(--surface-hi,#fff);border:1px solid var(--hairline,rgba(75,84,96,.11));border-radius:18px;box-shadow:var(--shadow-soft);margin-top:8px}
.lc-cat-create label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--muted,#747b84)}
.lc-cat-create label:first-child{flex:1;min-width:190px;max-width:420px}
.lc-cat-create label:nth-child(2){width:135px}
.lc-cat-create input{width:100%}
.lc-cat-list{background:var(--surface-hi,#fff);border:1px solid var(--hairline,rgba(75,84,96,.11));border-radius:20px;box-shadow:var(--shadow-soft);overflow:hidden;margin-top:12px}
/* 表头和每一行是各自独立的 grid（每行都是一个表单），最后一列用 auto 会各排各的宽度，
   所以四列全部定宽，表头才真的对得上每行的值。 */
.lc-cat-head,.lc-cat-row{display:grid;grid-template-columns:minmax(0,1fr) 70px 100px 152px;align-items:center;gap:14px;padding:11px 18px;border-bottom:1px solid var(--hairline,rgba(75,84,96,.11))}
.lc-cat-head{font-size:11px;color:#979da5;background:var(--surface,#fafafa)}
.lc-cat-head>span:last-child,.lc-cat-actions{justify-self:end}
.lc-cat-row:last-child{border-bottom:0}
.lc-cat-row .lc-field-label{display:none}
.lc-cat-name input,.lc-cat-pos input{width:100%;padding:7px 11px}
.lc-cat-name input{max-width:400px}
.lc-cat-count{font-size:11px;color:#8b929b;justify-self:start}
.lc-cat-actions{display:flex;align-items:center;gap:6px}

/* ---------- 9. 编辑页 ---------- */
.lc-editor{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:18px;align-items:start}
.lc-editor-main{min-width:0;display:grid;gap:14px}
.lc-editor-head{display:grid;gap:14px;padding:20px 22px;background:var(--surface-hi,#fff);border:1px solid var(--hairline,rgba(75,84,96,.11));border-radius:20px;box-shadow:var(--shadow-soft)}
.lc-title-field,.lc-summary-field{display:grid;gap:7px;position:relative}
.lc-title-field input{font-size:19px;font-weight:620;padding:11px 14px;letter-spacing:-.3px}
.lc-summary-field textarea{resize:vertical;min-height:58px}
.lc-summary-field .lc-field-label small{color:#a3a8af;font-weight:400}
.lc-counter{position:absolute;right:2px;top:0;font-size:11px;color:#a3a8af}
.lc-editor-side{position:sticky;top:6px;display:grid;gap:12px;align-content:start}
.lc-side-box{padding:18px 18px 20px;background:var(--surface-hi,#fff);border:1px solid var(--hairline,rgba(75,84,96,.11));border-radius:20px;box-shadow:var(--shadow-soft);display:grid;gap:13px}
.lc-side-box h2{font-size:12px;margin:0;color:#59626d;font-weight:650;letter-spacing:.2px}
.lc-side-box .pill-button{justify-content:center}
.lc-field{display:grid;gap:7px;font-size:12px;color:var(--muted,#747b84)}
.lc-field input,.lc-field select{width:100%;padding:9px 12px;font-size:13px}
/* 「新增分类」是低频动作，收成一条可展开的行，不要占掉设置面板三分之一的高度。 */
.lc-inline-category{display:block;border:1px dashed var(--hairline,rgba(75,84,96,.11));border-radius:14px;background:var(--surface,#fafafa)}
.lc-inline-category>summary{padding:10px 12px;font-size:11.5px;color:#5b646f;cursor:pointer;list-style:none}
.lc-inline-category>summary::-webkit-details-marker{display:none}
.lc-inline-category>summary::before{content:"＋ ";color:#2f6a4a}
.lc-inline-category[open]>summary{border-bottom:1px dashed var(--hairline,rgba(75,84,96,.11))}
.lc-inline-body{display:grid;gap:8px;padding:12px}
.lc-inline-body>span{font-size:11px;color:#3d6b53;line-height:1.7}
.lc-preview{margin:0}
.lc-preview-flag{display:inline-block;font-size:11px;color:#8a6a2c;background:#fbf4e6;padding:3px 9px;border-radius:6px;margin:0 0 14px}
.lc-editor.is-previewing .lc-visual-host,.lc-editor.is-previewing .lc-editor-head{display:none}
.lc-body-editor[hidden]{display:none!important}

/* ---------- 10. 图文编辑器 ---------- */
.lc-visual-host{border:1px solid var(--hairline,rgba(75,84,96,.11));border-radius:20px;background:var(--surface-hi,#fff);box-shadow:var(--shadow-soft);overflow:hidden}
.lc-rich-toolbar{display:flex;gap:3px;flex-wrap:wrap;align-items:center;padding:9px 12px;background:var(--surface,#fafafa);border-bottom:1px solid var(--hairline,rgba(75,84,96,.11));position:sticky;top:0;z-index:3}
.lc-toolbar-gap{flex:1}
.lc-rich-toolbar button,.lc-image-actions button{border:1px solid transparent;border-radius:9px;padding:7px 10px;font-size:11.5px;background:transparent;color:#5b646f;cursor:pointer;white-space:nowrap}
.lc-rich-toolbar button:hover,.lc-image-actions button:hover{background:var(--canvas,#f1f2f4);color:var(--ink,#20242a)}
.lc-rich-toolbar .lc-upload-trigger{background:#eaf1ec;color:#2f6a4a;font-weight:600;border-color:rgba(47,106,74,.14)}
.lc-rich-editor{min-height:340px;margin:0;padding:26px 34px 20px;outline:none;overflow-wrap:anywhere;max-width:none}
.lc-rich-editor:focus{box-shadow:inset 0 0 0 2px #dbe6df}
.lc-rich-editor:empty:before{content:attr(data-placeholder);color:#adb3ba}
.lc-rich-editor figure{position:relative;margin:22px 0}
.lc-rich-editor img{cursor:pointer}
.lc-rich-editor figcaption{background:var(--surface,#fafafa);padding:6px 10px;border-radius:8px;text-align:center;color:#7d848c}
.lc-rich-editor .lc-image-selected{outline:2px solid #6f9b83;outline-offset:6px;border-radius:4px}
.lc-dropzone{display:flex;flex-direction:column;gap:5px;align-items:center;width:calc(100% - 28px);margin:0 14px 14px;padding:16px;border:1px dashed rgba(75,84,96,.22);border-radius:14px;background:var(--surface,#fafafa);color:#6c757f;cursor:pointer;text-align:center}
.lc-dropzone:hover{border-color:#8fae9d;background:#f5f8f6;color:#2f6a4a}
.lc-dropzone strong{font-size:12.5px;font-weight:600}
.lc-dropzone small{font-size:11px;color:#959ba3;line-height:1.7}
.lc-editor-status{display:flex;align-items:center;gap:14px;padding:10px 16px;border-top:1px solid var(--hairline,rgba(75,84,96,.11));background:var(--surface,#fafafa)}
.lc-upload-progress{flex:1;font-size:11.5px;color:#5f6871;line-height:1.7;margin:0}
.lc-image-count{font-size:11px;color:#8b929b;white-space:nowrap}
.lc-image-actions{position:sticky;bottom:0;display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:9px 14px;background:#eef4f0;border-top:1px solid rgba(47,106,74,.16);font-size:11.5px;color:#2f6a4a;z-index:3}
.lc-image-actions-label{font-weight:600;margin-right:5px}
.lc-image-actions[hidden]{display:none}
.lc-visual-host.lc-drag-over{outline:2px dashed #6f9b83;outline-offset:2px}
.lc-visual-host.lc-drag-over .lc-dropzone{border-color:#6f9b83;background:#eef4f0;color:#2f6a4a}

/* ---------- 11. 大图浏览 ---------- */
.lc-lightbox{width:min(1100px,96vw);max-width:96vw;height:92vh;max-height:92vh;padding:0;background:#16181c;color:#fff;border:1px solid #363b43;border-radius:18px}
.lc-lightbox::backdrop{background:rgba(12,14,17,.9)}
.lc-lightbox-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;min-height:54px}
.lc-lightbox-caption{flex:1;font-size:12px;color:#c4c9d0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-lightbox button{background:#2b2f36;color:#e3e7ec;border:0;border-radius:10px;padding:9px 14px;cursor:pointer;white-space:nowrap;font-size:12px}
.lc-lightbox button:hover{background:#363b43}
.lc-lightbox-view{height:calc(100% - 112px);overflow:auto;display:flex;align-items:center;justify-content:center;padding:10px}
.lc-lightbox-view img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.lc-lightbox-view.zoomed{display:block}
.lc-lightbox-view.zoomed img{max-width:none;max-height:none;margin:0 auto}
.lc-lightbox-controls{display:flex;justify-content:center;gap:20px;padding:10px}

/* ---------- 12. 窄屏 ---------- */
@media(max-width:1180px){
  .lc-reading-layout{grid-template-columns:minmax(0,1fr) 220px;gap:20px}
  .lc-editor{grid-template-columns:minmax(0,1fr) 260px}
}
@media(max-width:1000px){
  .lc-reading-layout,.lc-editor{grid-template-columns:minmax(0,1fr)}
  /* 目录以前在窄屏被整条隐藏（.lc-reading-aside{display:none}），手机上就没法跳章节了。
     现在收成一条可展开的行留在正文上方。 */
  .lc-reading-aside{position:static;order:-1;gap:8px}
  .lc-aside-box>summary{padding:11px 14px}
  .lc-aside-box>summary::after{content:"展开";margin-left:4px;font-size:11px;color:#979da5;font-weight:500}
  .lc-aside-box[open]>summary::after{content:"收起"}
  .lc-aside-body{max-height:44vh}
  .lc-editor-side{position:static}
  .lc-article,.lc-discussion{padding:28px 26px}
}
@media(max-width:760px){
  /* 顶栏只放得下返回键和标题，分类/难度/时长在文章头部还会再出现一次，这里让位给标题。 */
  .page-toolbar .lc-crumb>.lc-crumb-note{display:none}
  /* 编辑页顶栏在手机上塞不下「返回+标题+状态+预览+保存」，让操作组换到第二行，
     标题才不会被压成「新…」。 */
  .page-toolbar .lc-crumb{flex-wrap:wrap;row-gap:8px}
  .page-toolbar .lc-crumb .crumb-title{flex:1 1 120px}
  .page-toolbar .lc-crumb>.lc-crumb-actions{width:100%;margin-left:0;justify-content:flex-end}
  .lc-status-select select{min-width:84px;font-size:11px}
  .page-toolbar .lc-controls .list-tools{width:100%;gap:8px}
  .page-toolbar .lc-controls .search{width:auto;flex:1;min-width:0}
  .page-toolbar .lc-controls .sort-control{flex:none}
  .page-toolbar .lc-controls .sort-control select{max-width:120px}
  /* 卡片底部换行时不要把「1 分钟」「3 张图」从中间折断。 */
  .lc-card-where{max-width:100%}
  .lc{padding:2px 12px 56px}
  .lc-grid{grid-template-columns:1fr}
  .lc-article,.lc-discussion{padding:22px 18px}
  .lc-article h1{font-size:22px}
  .lc-prose{font-size:15px;line-height:1.95}
  .lc-prose figure{margin:20px 0}
  .lc-pager-pair{grid-template-columns:1fr}
  .lc-pager-item.is-next{text-align:left}
  .lc-pager-item.is-next small{justify-content:flex-start}
  .lc-comment.is-reply{margin-left:12px;padding-left:12px}
  .lc-rich-editor{padding:20px 16px 16px;min-height:300px}
  .lc-dropzone{width:calc(100% - 20px);margin:0 10px 10px}
  .lc-editor-head{padding:16px}
  .lc-title-field input{font-size:17px}
  .lc-admin-row{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:14px 15px}
  .lc-admin-main{grid-column:1/-1}
  .lc-admin-date{grid-column:1;justify-self:start}
  .lc-admin-actions{grid-column:2;grid-row:2}
  .lc-admin-row .lc-status{grid-column:1;grid-row:2;justify-self:start;margin-right:8px}
  .lc-cat-head{display:none}
  .lc-cat-row{grid-template-columns:1fr auto;gap:10px;padding:14px 15px}
  .lc-cat-row .lc-field-label{display:block}
  .lc-cat-name{grid-column:1/-1}
  .lc-cat-name input{max-width:none}
  .lc-cat-pos{width:110px}
  .lc-cat-count{justify-self:end}
  .lc-cat-actions{grid-column:1/-1;justify-content:flex-end}
  .lc-form-footer{flex-direction:column;align-items:stretch;gap:8px}
  .lc-form-footer .pill-button{width:100%}
  .lc-lightbox{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:0;margin:0}
  /* 窄屏把图注换到按钮下面一行；不加 flex-wrap 的话 min-width:100% 会把它顶出屏幕。 */
  .lc-lightbox-bar{padding:10px 12px;gap:8px;flex-wrap:wrap}
  .lc-lightbox-caption{flex:1 0 100%;order:3;white-space:normal;text-overflow:clip}
  .lc-lightbox-view{height:calc(100% - 150px)}
}