/* ============================================================
   前台 · 固件市场 Marketplace（2026-10-25 第 88 轮全量重写）
   ------------------------------------------------------------
   变量来自 public/css/theme.css（--bg / --surface / --border / --text /
   --muted / --accent / --accent-soft / --font-sans / --font-mono）。

   结构（发哥第 2/3/5/6/7/8 条）：
     （页头 / 分段导航 / 按钮 / 输入框 已改用组件层，不在本文件）
     .tp-bar         一级板块 tab + 排序 + 搜索（组件层，admin.css）
     .mk-note        架构规范说明（跟着板块变，带淡入）
     .mk-subrow      静态资源下的 5 个后缀（平滑展开）
     .mk-grid/.mk-card   卡片（一行 3 / 2 / 1）
     .mk-badge       必选角标：后缀 + 中文定性（**4 种底色 = 4 个架构层级**）
     .mk-comp        「资源内容」（.tpp 6 项 / .tpr 4 项）
     .mk-modal       详情弹窗（原生 dialog）

   🔴 徽章 4 色是**固定 hex**，不走主题变量：四种格式必须一眼可分，
      而主题变量只有 accent 一个强调色，撑不起 4 个色阶。
      白字 + 深色底，明暗主题都可读（实测对比度 ≥ 4.5:1）。
   ============================================================ */

/* ---------- 页头 / 分段导航 / 排序 / 搜索框 ----------
   🔴 2026-10-26 第 92 轮（发哥第 6 条）：这些**全部改用组件层**，本文件不再定义。
      页头        → `<x-hub.page-head>`（= 后台 `.tp-page-head`）
      分段导航    → `.tp-seg`（= 后台"上/中/下"那套）
      搜索框/下拉 → `.tp-input`
      按钮        → `.tp-btn` / `.tp-btn-2`
   筛选条骨架 `.mk-bar` / `.mk-tools` 已在**第 102 轮删除** → 统一用组件层
   `.tp-bar` / `.tp-bar-tools`（见 admin.css，前台所有列表页共用）。 */

/* ---------- 筛选条 ---------- */
/* 🔴 第 102 轮（发哥第 5 条）：`.mk-bar` / `.mk-tools` **已删除** ——
   筛选条骨架搬到组件层 `.tp-bar` / `.tp-bar-tools`（admin.css），
   固件市场 / 技术交流 / 资源下载 三处共用同一套。这里只留说明，别再复活旧的。 */

/* ---------- 分类说明（Banner Note） ---------- */
/* 说明条外框 = 组件层 `.tp-banner`；这里只管里面排版与淡入。
   🔴 第 99 轮（发哥第 4 + 9 条）：
      「这个位置没有缝隙，重叠了」+「去掉这个框左边的红色条，太 AI 味了」
      → ① 删掉 `border-left: 3px solid`（红色竖条 + 圆角 = 那条挤在左上角的红弧线）；
        ② 上下都留够间距（margin-bottom），不再和下面的筛选条贴在一起。
      成功提示（本页/申请页/资源管理）不再靠左边色区分，改用 `is-ok` 的绿色标签。 */
.mk-note {
    margin-top: 16px;
    margin-bottom: 18px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    animation: mk-note-in .26s ease both;
}
.mk-note.is-ok .mk-note-tag {
    border-color: #16A34A;
    color: #16A34A;
}
/* 🔴 标签从「架构规范」改成了**当前分类名**（全部 / MCU主固件 / 开机图 …），
   字数 2~5 不等 —— 给固定最小宽 + 居中，切换分类时正文的左边缘才不会左右跳。 */
.mk-note-tag {
    flex: 0 0 auto;
    min-width: 72px;
    margin-top: 1px;
    padding: 1px 8px;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.6;
    text-align: center;
    white-space: nowrap;
}
.mk-note-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
}
@keyframes mk-note-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- 静态资源的二级细分（平滑展开） ---------- */
.mk-subrow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding-left: 12px;
    border-left: 2px solid var(--border);
    overflow: hidden;
    animation: mk-sub-in .28s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes mk-sub-in {
    from { opacity: 0; max-height: 0; transform: translateY(-4px); }
    to   { opacity: 1; max-height: 96px; transform: none; }
}
/* 🔴 2026-10-25 首次截图修正：原来用**虚线边框 + --muted 字**，
   实测看着像「被禁用」（截图见 logs/v88_flash_1440.png）。
   细分后缀是**可点的筛选项**，必须长得像按钮：实线边框 + 正文色 + 白底。 */
.mk-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.mk-chip:hover { border-color: var(--accent); color: var(--accent); }
.mk-chip.is-on {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}
.mk-chip-ext {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}
.mk-chip:hover .mk-chip-ext,
.mk-chip.is-on .mk-chip-ext { color: inherit; }
.mk-chip-n {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.mk-chip.is-on .mk-chip-n { color: var(--accent); }

/* ---------- 卡片网格：3 / 2 / 1 ---------- */
.mk-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 768px) {
    .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
    .mk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 卡片外观 = 组件层 `.tp-card`（边框/底色/内距/圆角都在那），
   这里只补**布局**（纵向 flex）与 hover 的投影。 */
.mk-card {
    display: flex;
    flex-direction: column;
    /* 🔴 第 100 轮（发哥第 1 条）：「卡片的高度可以增高」——
       给一个最小高度，标题+一行简介+meta+资源内容+按钮才不挤。 */
    min-height: 252px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mk-card:hover {
    border-color: var(--accent);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .09);
}
.dark .mk-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }

.mk-card-top {
    display: flex;
    align-items: center;
    /* 🔴 第 99 轮（发哥第 5 条）：三个角标**紧挨着**排（左起：格式 → 架构 → 状态），
       状态靠右用 margin-left:auto，不再用 space-between 把它们均匀撒开。 */
    justify-content: flex-start;
    gap: 6px;
}
.mk-attr {
    flex: 0 0 auto;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    margin-left: auto;            /* 状态永远靠右，架构就紧贴着格式徽章 */
    padding: 0 8px;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}

/* 三个角标统一高度（24px）—— 徽章本身是实心无描边，另两个是 1px 描边，
   `box-sizing: border-box` 让描边算在外框之内 ⇒ 三者外框完全一样大。 */
.mk-badge,
.mk-arch,
.mk-attr {
    height: 24px;
}
.dark .mk-attr { border-color: #5A6472; }

/* ---------- 必选角标（4 色 = 4 个架构层级） ---------- */
.mk-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-sizing: border-box;
    padding: 0 8px;
    max-width: 100%;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}
.mk-badge-ext {
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0.01em;
}
.mk-badge-cn { font-family: var(--font-sans); }
.mk-badge.is-package { background: #E2231A; }   /* 颜色一：升级包 */
.mk-badge.is-app     { background: #7C3AED; }   /* 颜色二：扩展应用 */
.mk-badge.is-flash   { background: #0F766E; }   /* 颜色三：外部 Flash 资源 */
.mk-badge.is-other { background: #6B7280; }   /* 认不出（类型被停用/前缀被改坏） */

/* 升级包架构短标签（第 95 轮）：与徽章同排，但不抢主色 —— 描边款
   🔴 第 99 轮（发哥第 5 条）：「完整升级包这个标签，要紧挨在 .tpp升级包 的右侧，
      且红色外框要和 .tpp升级包 的整个外框一样大，也就是需要大一个像素；
      包括待审核，外框也要增大一个像素」
   → 三个角标（格式徽章 / 架构 / 状态）统一成**同一个外框高度**（下面那条 height:24px），
     描边款用 border-box 把 1px 描边算进外框里，视觉上就是"一样大"；
     胶囊圆角去掉（太"AI 味"），与全站方角一致。 */
.mk-arch {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 8px;
    border: 1px solid var(--accent);
    font-size: 12px;
    line-height: 1;
    color: var(--accent);
    white-space: nowrap;
}

/* ---------- 卡片正文 ---------- */
.mk-name {
    margin: 11px 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    border-radius: 0 !important;   /* 第 152 轮：贴边裁字容器不吃 admin.css 基线 6px 圆角（否则首字四角被削） */
}
.mk-name:hover { color: var(--accent); }

.mk-intro {
    margin: 7px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
    /* 🔴 第 100 轮（发哥第 1 条）：「标题的下一行，加入资源简介，显示一行内容」
       → 固定**一行**（原来是两行），超出用省略号，卡片高度才能对齐 */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 21px;
    border-radius: 0 !important;   /* 第 152 轮：贴边裁字容器一律直角（见 admin.css「第 1 层·例外」） */
}

.mk-meta {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 9px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* ---------- 资源内容 ---------- */
.mk-comp {
    margin-top: 11px;
    padding-top: 9px;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 9px;
}
.mk-comp-l {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.02em;
}
.mk-comp-i {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
}
.mk-comp-i.is-on { color: var(--text); }
.mk-tick {
    color: #0F9D58;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* ---------- 卡片页脚 ---------- */
.mk-foot {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.mk-stat {
    display: flex;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.mk-act { display: flex; gap: 6px; flex: 0 0 auto; }

/* ---------- 按钮（卡片 / 弹窗共用） ---------- */
/* ---------- 按钮 ----------
   🔴 2026-10-26 第 91 轮（发哥第 7 条）：**不再有 .mk-btn**。
      全站按钮只有 `.tp-btn` / `.tp-btn-2`（定义在 admin.css = 组件层，前后台共用）。
      这里保留注释是为了防止有人又"手搓一套按钮"。 */

/* ---------- 空态 ---------- */
.mk-empty {
    margin: 40px 0 0;
    padding: 48px 20px;
    border: 1px dashed var(--border);
    text-align: center;
    font-size: 14px;
    color: var(--muted);
}
.mk-pager { margin-top: 22px; }

/* ---------- 详情弹窗 ---------- */
dialog.mk-modal {
    width: min(720px, 92vw);
    max-height: 86vh;
    overflow: auto;
    padding: 0;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}
dialog.mk-modal::backdrop { background: rgba(0, 0, 0, .45); }
.mk-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface);
}
.mk-modal-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mk-modal-title h3 { margin: 0; font-size: 16px; line-height: 1.4; }
.mk-modal-body { padding: 16px 18px 20px; }
.mk-rid-line {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
}
.mk-comp-modal { margin-top: 12px; padding-top: 10px; }
/* 🔴 第 143 轮（发哥）：详情弹窗里「资源内容 ✓字库 ✓语音 …」字号太小，
   应该和正文一样 —— 弹窗正文是 13px（.mk-modal-intro），这里对齐 13px。 */
.mk-comp-modal .mk-comp-l,
.mk-comp-modal .mk-comp-i { font-size: 14px; }
.mk-comp-modal .mk-tick { font-size: 12px; }
.mk-modal-intro {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.75;
    color: var(--muted);
}
.mk-kv {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 8px 12px;
    font-size: 14px;
}
.mk-kv .k { color: var(--muted); }
.mk-kv .v { color: var(--text); word-break: break-word; }
.mk-modal-act { margin-top: 16px; display: flex; gap: 8px; }
.mk-modal-h4 { margin: 20px 0 0; font-size: 16px; font-weight: 600; }   /* H2 档：详情弹窗小节标题 */
/* 🔴 第 93 轮：历史表改用组件层 `.tp-tbl`（`.mk-hist` 已删）。 */
.mk-close {
    border: 0;
    background: none;
    font-size: 24px;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
}
.mk-close:hover { color: var(--accent); }
.mk-px { display: none; }

/* ---------- 窄屏 ---------- */

/* ============================================================
   提交资源 / 我的提交 的表单零件（第 89 轮）
   ------------------------------------------------------------
   只补「前台没有现成表单控件」的部分（后台才有一套 tp-*）；
   颜色/字号全部沿用 theme.css 的变量，换肤自动跟随。
   ============================================================ */
/* 🔴 第 93 轮（发哥第 7 条）：
   「完整固件包、MCU主固件、扩展应用、资源包这四个放在第一行，字库、语音、图标、开机图放在第二行，
     然后以上 8 个的宽度分别加宽，或者平均在页面的宽度」+「创建方式两个选项也要变宽」。
   ⇒ 类型固定 **4 列**（8 个正好两行、每格均分整行宽）；创建方式固定 **2 列**。 */
/* 🔴 第 156 轮断点收敛（发哥：只考虑电脑和手机）：
   原来是「4 列固定 + 900 以下 2 列 + 560 以下 1 列」三个门槛（900/560 两个值），
   现在只有两档：**手机 1 列 / 电脑 2 列 / 宽电脑（≥1280）排满**。
   手机单列的代价是竖排长一点，换来的是每格宽度 ≥ 300px，标题不用折行。 */
.mk-picks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.mk-picks-4,
.mk-picks-3,
.mk-picks-2 { grid-template-columns: 1fr; }

@media (min-width: 768px) {
    .mk-picks,
    .mk-picks-4,
    .mk-picks-3,
    .mk-picks-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
    .mk-picks,
    .mk-picks-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .mk-picks-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.mk-pick {
    text-align: left;
    padding: 11px 13px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.mk-pick:hover { border-color: var(--accent); }
.mk-pick.is-on { border-color: var(--accent); background: var(--accent-soft); }
.mk-pick strong { display: block; font-size: 14px; font-weight: 600; }
.mk-pick .ext {
    display: block;
    margin-top: 3px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
}
.mk-pick.is-on .ext { color: var(--accent); }

/* 升级包架构卡片：名称下面还有一句「包含什么、适用于什么」 */
.mk-pick-arch { min-height: 96px; }
.mk-pick-desc {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted);
}
.mk-pick.is-on .mk-pick-desc { color: var(--text); }

/* 🔴 2026-10-26 第 93 轮（发哥第 1 条：还剩 3 条没统一）：
   表单零件**全部交给组件层** ——
     `.mk-section` / `.mk-section-title` → `.tp-form-section` / `.tp-form-title`
     `.mk-label` → `.tp-label`；`.mk-pair` → `.tp-form-pair`
   本文件只留 `.mk-field`（纯间距，无外观）和 `.mk-form-note`（字段旁的短提示）。 */
.mk-field { margin-top: 14px; }
.mk-form-note { margin-top: 7px; font-size: 12px; color: var(--muted); line-height: 1.65; }
.mk-form-note.is-err { color: var(--accent); }


/* ============================================================
   发布者链接（第 90 轮 · 发哥第 11 条）
   ------------------------------------------------------------
   「如果是用户在 hub 前台提交的，那么要多增加一个字段『发布者』，
     然后发布者要可以点击，跳到用户的页面」
   → 卡片 meta 行、详情弹窗的「发布者」都指向 /{lang}/u/{username}。
   观感与卡片其它 meta 一致（等宽、muted），悬停才变品牌红，避免抢标题。
   ============================================================ */
.mk-pub {
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: color .12s ease, border-color .12s ease;
}
.mk-pub:hover,
.mk-pub:focus-visible {
    color: var(--accent);
    border-bottom-color: var(--accent);
    outline: none;
}
.mk-name-sub {
    margin-left: 4px;
    color: var(--muted);
    font-size: 12px;
}

/* 必填星号（第 91 轮 · 发哥第 5 条：规则不写进提示词，只留一个星号） */
.mk-req {
    margin-left: 3px;
    color: var(--accent);
    font-weight: 600;
}


/* ============================================================
   资源内容面板（第 96 轮 · 一行排开）
   ------------------------------------------------------------
   结构由 `x-marketplace.components-panel` 输出：
     .mk-comp-row  [MCU主固件(锁)] [资源包(锁)] [灰色框: 字库 语音 图标 开机图]
   发哥原话：「要主固件、资源包和资源包里的四个，都放在同一行，不要分成多行，
             不然显得很乱」—— 所以不换行、不分组换行。
   ============================================================ */
.mk-comp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;          /* 同一行 */
    margin-top: 10px;
    overflow-x: auto;           /* 窄屏也不折行：横向滚动，保持一行 */
    padding-bottom: 2px;
}
.mk-comp-row > .tp-check { flex: 0 0 auto; }

/* 资源包后面的灰色框：把四个二级项圈在一起，表示它们属于资源包 */
.mk-comp-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 4px 8px;
    border: 1px dashed var(--border);
    border-radius: var(--admin-r-sm, 6px);
    background: var(--admin-hover, rgba(0, 0, 0, .03));
}

@media (max-width: 767px) {
    /* 手机上确实放不下时允许折行（否则要横向拖，反而更难用） */
    .mk-comp-row { flex-wrap: wrap; overflow-x: visible; }
}

/* ============================================================
   第 97 轮：开发者申请 + RID 选择列表
   ------------------------------------------------------------ */
/* 技能候选行：标签 + 刷新按钮 */
.mk-skill-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.mk-skill-l { font-size: 12px; color: var(--muted); }
.mk-skill-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}
.mk-skill-refresh:hover { border-color: var(--accent); color: var(--accent); }

/* 作品链接：多行输入（第 98 轮 · 发哥第 1 条）
   ------------------------------------------------------------
   「作品链接，默认两行，第二行的填写框，最后面有个+号，可以添加行数，最多支持10行」
   → 一行一个 URL；行尾一个方按钮：最后一行是「+」（加行），
     多出来的行是「×」（删掉这行，最少保留两行）。 */
.mk-url-rows { display: flex; flex-direction: column; gap: 8px; }
.mk-url-row { display: flex; align-items: center; gap: 8px; }
.mk-url-row > .tp-input { flex: 1 1 auto; min-width: 0; }
.mk-row-btn {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--admin-r-sm, 6px);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.mk-row-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.mk-row-btn:disabled { opacity: .4; cursor: not-allowed; }
.mk-row-del { color: var(--muted); }

/* RID 选择列表（提交资源 → 升级包/扩展应用） */
/* 《拓朋固件市场发布与免责条款》弹窗（第 139 轮）
   ------------------------------------------------------------
   🔴 根因：弹窗里的字号原来写的是 Tailwind 任意值类（text-[13px] / max-h-[85vh] / z-[60]），
      这些类**只在 npm run build 时按当时存在的文件生成**；产物停在 10-30 00:39，
      而弹窗是 10-31 才加的 → 类根本不在 CSS 里，正文回落到 root 字号（16px+），
      看起来"特别大"。
   ⇒ 弹窗与正文改成**纯 CSS 类**（本文件是静态文件，改完立即生效，不怕产物滞后）。
      字号跟全站正文一致：正文 13px / 小节标题 14px / 弹窗主标题 16px。 */
.mk-terms-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .45);
}
.mk-terms-panel {
    width: 100%;
    max-width: 768px;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
}
.mk-terms-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
}
.mk-terms-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--text); }
.mk-terms-close {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    font-size: 16px;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
}
.mk-terms-close:hover { color: var(--accent); }
.mk-terms-body { padding: 20px 24px; }
.mk-terms-foot {
    padding: 12px 24px;
    border-top: 1px solid var(--border);
    text-align: right;
}
/* 正文：13px，与全站正文一致 */
.mk-terms { font-size: 14px; line-height: 1.75; color: var(--muted); }
.mk-terms > p { margin: 0 0 14px; }
.mk-terms > div + div { margin-top: 14px; }
.mk-terms h3 {
    margin: 0 0 4px;
    font-size: 16px;   /* H2 档：条款弹窗小节标题 */
    font-weight: 600;
    line-height: 1.5;
    color: var(--text);
}

/* 提交前声明（第 138 轮）
   ------------------------------------------------------------
   发哥：「不要整句都用红框框起来，而是只要可选框是打勾后是红的就行」
   ⇒ 不用 `.tp-check`（它是"整块带边框的方块"，长句会被包成一个大红框），
     改成原生 checkbox + 正文文字。原生勾的配色由 controls.css 统一（品牌红）。 */
/* 🔴 第 144 轮（发哥）：「前面的单选框和这排字没有居中，偏上了」
   真因：`display:flex + align-items:flex-start` —— 方框对齐的是**整段文字盒子的顶端**，
   而文字有多行时，首行的视觉中心比盒子顶端低 ~半行距，所以方框看着偏上。
   ⇒ 改成正常文字流（block），方框用 `vertical-align: middle` 认**首行**的中线。 */
.mk-agree-row {
    display: block;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text);
    cursor: pointer;
}
.mk-agree-box {
    vertical-align: middle;
    margin: 0 7px 0 0;
    position: relative;
    top: -1px;          /* 中文基线略高，上提 1px 才视觉居中 */
}

/* 《拓朋固件市场发布与免责条款》链接（第 138 轮）
   它是 <button>（要点开弹窗），但外观必须像正文里的链接，不能像个按钮。 */
.mk-terms-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    line-height: inherit;
    color: var(--accent);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mk-terms-link:hover { opacity: .8; }

.mk-rid-list { display: grid; grid-template-columns: 1fr; gap: 8px; }
.mk-rid {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.mk-rid:hover { border-color: var(--accent); }
.mk-rid.is-on { border-color: var(--accent); background: var(--accent-soft); }
.mk-rid-no { font-size: 14px; font-weight: 600; }
.mk-rid-name { font-size: 14px; }
.mk-rid-meta { font-size: 12px; color: var(--muted); }
@media (max-width: 767px) {
    .mk-rid { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================
   第 99 轮（2026-10-26 · 发哥第 1 / 6 条）
   ============================================================ */

/* 卡片「评论」按钮上的条数：小号，不加底色，避免又变成一块"彩色胶囊" */
.mk-cmt-btn { gap: 4px; }
.mk-cmt-n {
    margin-left: 4px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
}

/* 技术交流里的讨论帖主楼：固件市场卡片的同款观感（外框比列表卡略轻）
   🔴 第 107 轮（发哥第 2 条）：「引用的资源卡片……宽度不要填充于整个页面的宽度，
      只需要页面宽度的 75%，保持居左」
   🔴 第 108 轮（发哥第 1 条）：75% → **45%**（两个卡片同一条口径，改一起改） */
.mk-forum-card {
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 14px 16px;
    max-width: 45%;
}
@media (max-width: 767px) {
    .mk-forum-card { max-width: 100%; }
}
.mk-forum-card.is-gone {
    color: var(--muted);
    font-size: 14px;
}
.mk-forum-card > .mk-name { margin-top: 10px; }

/* 「保存资料 / 保存内容 / 提交审核」：放在框**外面**，和内容是两回事（发哥第 6 条）
   第 144 轮：这一排还要放「保存中…」和保存结果（成功绿 / 失败红），所以是横向 flex。 */
.mk-save-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 22px;
}

/* ============================================================
   提交资源 · 新流水线（第 105 轮 · 发哥重构）
   ------------------------------------------------------------
   两个阶段共用一套：RID 展示 / 说明卡 / 步骤块 / 类型卡 / 架构卡 / 解析结果。
   🔴 全站方角、主题红，不加渐变、不加左侧色条、不用 emoji。
   ============================================================ */

/* ---- 当前 RID ---- */
.mk-rid-hero {
    border: 1px solid var(--border);
    background: var(--surface-2, rgba(0, 0, 0, .02));
    padding: 14px 16px;
}
.mk-rid-hero-code {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--accent);
    line-height: 1.2;
}
.mk-rid-hero-meta {
    margin-top: 6px;
    font-size: 14px;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ---- 「如何使用 RID 和提交资源」说明卡 ---- */
.mk-guide-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    background: var(--surface);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease;
}
.mk-guide-card:hover { border-color: var(--accent); }
.mk-guide-title { font-size: 16px; font-weight: 600; }
.mk-guide-desc { margin-top: 4px; font-size: 14px; color: var(--muted); }
.mk-guide-arrow { color: var(--accent); font-size: 16px; }

/* ---- 步骤块（1 / 2） ---- */
.mk-step { margin-top: 18px; }
.mk-step-h {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}
.mk-step-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 12px;
}

/* ---- 类型卡（三列一行：升级包 / 扩展应用 / 资源） ----
   🔴 第 108 轮（发哥第 3 条）：三种升级包架构**不再是可点的卡片**，改到下面
      `.mk-type-intro` 里当说明文字。类型卡本身三张一排、可点选。 */
.mk-type-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.mk-type-card {
    min-width: 0;
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 12px 14px;
    text-align: left;
    cursor: pointer;
}
.mk-type-card:hover { border-color: var(--accent); }
.mk-type-card.is-active { border-color: var(--accent); }
.mk-type-card.is-active .mk-type-name { color: var(--accent); }
.mk-type-ext {
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted);
    word-break: break-all;
}
.mk-type-card.is-active .mk-type-ext { color: var(--accent); }
.mk-type-name { display: block; margin-top: 3px; font-size: 14px; font-weight: 600; }

/* ---- 三个类型各自的介绍（纯文字，不可点） ----
   🔴 第 108 轮（发哥第 3 条）：「三个介绍显示的高度要一样，不要让表格跳来跳去的」
      → grid 同列同高（stretch），行内最长的（升级包：三种架构）定高度，其余两块自动等高。 */
.mk-type-intro {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
    align-items: stretch;
}
.mk-type-intro-i {
    padding: 0 2px;
    min-width: 0;
}
.mk-type-intro-l {
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
    color: var(--muted);
}
.mk-type-intro-l + .mk-type-intro-l { margin-top: 6px; }
/* 🔴 第 138 轮（发哥给了新的类型介绍文案）：标题一句 + 描述一段，
   同一行会挤成一片 → 标题独占一行。 */
.mk-type-intro-l > b {
    display: block;
    color: var(--text);
    font-weight: 600;
    margin-bottom: 3px;
}

@media (max-width: 767px) {
    .mk-type-row,
    .mk-type-intro { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 「未勾选开发规则确认」时整体置灰（第 108 轮 · 发哥第 5 条）----
   内容**照常显示**，但灰掉且不能点/不能填：`pointer-events:none` 连 .tp-check 这种
   `<label wire:click>` 也一起拦住（fieldset[disabled] 只管原生控件，拦不住 label）。 */
.mk-lockable {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}
.mk-lockable.is-locked {
    opacity: .45;
    pointer-events: none;
    user-select: none;
}

/* ---- 我的 RID 列表 ---- */
.mk-rid-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.mk-rid-item {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 10px 14px;
    text-align: left;
    cursor: pointer;
}
.mk-rid-item:hover { border-color: var(--accent); }
.mk-rid-code { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--accent); }
.mk-rid-name { font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 0 !important; }   /* 第 152 轮：贴边裁字，直角 */
.mk-rid-state { font-size: 12px; color: var(--muted); white-space: nowrap; }
.mk-rid-state.is-done { color: #16A34A; }

/* 「正在审核」—— 第 132 轮（发哥）：「如果 RID 正在审核，应该在『已上传 2 个版本』
   前面增加一个状态『正在审核』」
   和右边的"已上传 N 个版本"（绿/灰）分开：这个是**进行中**，用品牌红描边小标签。 */
.mk-rid-review {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
    padding: 0 5px;
    border: 1px solid var(--accent);
    background: rgba(226, 35, 26, .06);
    color: var(--accent);
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
}

/* ---- 解析结果 ---- */
.mk-inspect {
    margin-top: 14px;
    border: 1px solid var(--border);
    padding: 12px 14px;
}
.mk-inspect.is-ok { border-color: #16A34A; }
.mk-inspect.is-err { border-color: var(--accent); }
.mk-inspect-h { font-size: 14px; font-weight: 600; }
.mk-inspect.is-ok .mk-inspect-h { color: #16A34A; }
.mk-inspect.is-err .mk-inspect-h { color: var(--accent); }
.mk-inspect-err { margin: 6px 0 0; font-size: 14px; color: var(--accent); line-height: 1.7; }
.mk-inspect-sub { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--muted); }
.mk-inspect-list { margin: 6px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.8; color: var(--muted); }
.mk-inspect-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* ---- 说明页（拓朋固件市场 · 如何使用 RID）· 第 108 轮重排 ----
   🔴 版式改成全站组件层：每一节 = `.tp-form-section`（admin.css），表格 = `.tp-tbl`。
      这里只补「正文段落 / 清单」两个排版类，别再复活 `.mk-doc*` 那一套（已删）。 */
.mk-doc-p {
    margin: 0;
    font-size: 14px;
    line-height: 1.9;
    color: var(--text);
}
.mk-doc-list {
    margin: 0;
    padding-left: 20px;   /* Tailwind preflight 把 list 的缩进清了，这里补回来 */
}
.mk-doc-list > li {
    font-size: 14px;
    line-height: 1.9;
    color: var(--text);
}
.mk-doc-list > li + li { margin-top: 4px; }
.mk-doc-list.is-num > li { list-style: decimal; }
.mk-doc-list.is-dot > li { list-style: disc; }

/* ---- 卡片「收藏」（第 105 轮 · 发哥第 5 条）----
   机制与论坛帖子同一套（多态收藏）；这里是卡片上的切换按钮，显示收藏人数。 */
.mk-fav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--muted);
    font-size: 14px;
    cursor: pointer;
}
.mk-fav:hover { color: var(--accent); }
.mk-fav.is-on { color: var(--accent); }
.mk-fav-ico { font-size: 14px; line-height: 1; }
.mk-fav-n { font-family: var(--font-mono); }
/* 只读的收藏数（我的发布卡片，第 142 轮）：不是按钮，别给手型、别变色 */
.mk-fav.is-static { cursor: default; }
.mk-fav.is-static:hover { color: var(--muted); }

/* ---- 「我的收藏」分组标题（第 107 轮 · 发哥第 1 条）----
   资源走卡片、帖子走行列表，混排时需要一个轻量分组标题把它们分开。 */
.mk-fav-h {
    margin: 24px 0 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--muted);
}

/* ---- 「需要 RID / 不需要 RID」说明行（第 115 轮 · 发哥那张表的第 3 行）----
   对齐上面三张类型卡：左边跨两列（升级包 / 扩展应用），右边一列（资源）。
   只表示"要还是不要 RID"，不可点。 */
.mk-need-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
    margin-top: 12px;
}
.mk-need-i {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    background: var(--surface);
}
/* 🔴 第 143 轮（发哥）：去掉左侧红色竖条（"去 AI 味"，与 .mk-note / .mk-pkg-preview 一致）；
   不可点击的那格靠底色弱化即可。 */
.mk-need-i.is-none { background: var(--admin-hover); }
.mk-need-k { font-size: 14px; font-weight: 600; }
.mk-need-v { font-size: 14px; color: var(--muted); }

@media (max-width: 767px) {
    .mk-need-row { grid-template-columns: 1fr; }
}

/* ---- 拖拽上传区（第 116 轮 · 发哥：上传资源文件要支持拖拉）---- */
.mk-drop {
    /* position: relative —— 内部 input 是 absolute（1px 隐身），
       没有它就会相对更外层定位，页面出现莫名的滚动条 */
    position: relative;
    /* 🔴 第 141 轮（发哥）：上传完框会"矮一截"，而且四个资源框高度不一致。
       ⇒ 固定最小高度 + 竖直居中：空着 / 已上传 / 出错三种状态**同一个高度**。 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 118px;
    padding: 22px 16px;
    border: 1px dashed var(--border);
    background: var(--surface);
    text-align: center;
    cursor: pointer;
}

/* 格式不对：只显示下面那两行（标题/大小提示收起来，避免三行）
   🔴 第 142 轮（发哥）：四个资源框还是不等高 —— 真因是 JS 加在 `.mk-drop` 上的 `is-err`
      会被 Livewire 重渲染抹掉，而错误文字在 `wire:ignore` 的 `.mk-drop-file` 里留着 →
      重渲染后变成「标题 + 大小提示 + 错误两行」三行，比旁边的框高一截。
      ⇒ 除了类选择器，再用 `:has()` 认**那行错误文字本身**（它不会被抹掉）。 */
.mk-drop.is-err .mk-drop-main,
.mk-drop.is-err .mk-drop-hint,
.mk-drop:has(.mk-drop-file.is-err) .mk-drop-main,
.mk-drop:has(.mk-drop-file.is-err) .mk-drop-hint,
.mk-drop:has(.mk-drop-file.is-err) .mk-drop-icon { display: none; }
/* 四个槽 / 主固件：同一行里的框必须**等高**
   —— 单元格改成 flex 纵向，`.mk-drop` 撑满剩余高度（内容多少都不影响外框）。
   见 `.mk-pkg-grid > div` 那一组规则（下方 ⑳ 段）。 */
.mk-drop.is-err .mk-drop-file,
.mk-drop:has(.mk-drop-file.is-err) .mk-drop-file {
    white-space: pre-line;       /* JS 里用 \n 分两行 */
    color: #E2231A;
    font-size: 14px;
    line-height: 1.6;
}
.mk-drop:hover,
.mk-drop.is-over { border-color: var(--accent); }

/* 已上传状态（第 139 轮 · 发哥）
   ------------------------------------------------------------
   「上传完了，直接在框里显示一个图标表示已上传成功，不用显示具体文件名，
     右上角给个删除按钮，删掉可以重新上传」
   ⇒ 填上之后：框变实线品牌色 + 居中的一个 ✓「已上传」+ 右上角 ✕；
     文件名由 JS 写进 .mk-drop-file，这里**整块隐藏**。 */
.mk-drop.is-filled {
    border-style: solid;
    border-color: var(--accent);
    background: rgba(226, 35, 26, .04);
}
.mk-drop.is-filled .mk-drop-main,
.mk-drop.is-filled .mk-drop-hint,
.mk-drop.is-filled .mk-drop-file,
.mk-drop.is-filled .mk-drop-icon { display: none; }

.mk-drop-ok {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
}
.mk-drop.is-filled .mk-drop-ok { display: flex; }

.mk-drop-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.mk-drop.is-filled .mk-drop-remove { display: inline-flex; }
.mk-drop-remove:hover { border-color: var(--accent); color: var(--accent); }

/* 名称：灰框 + 右侧「修改」（第 146 轮 · 发哥）
   —— 默认只读灰框（防误改），右侧给一个明确的「修改」按钮；
      点进去先声明「修改记录会显示在资源详情里」，再允许编辑。 */
.mk-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mk-name-ro {
    flex: 1 1 auto;
    min-width: 0;
    /* 只读态：灰底 + 禁用光标（和以前一样"不可直接改"） */
    background: var(--admin-hover);
    cursor: not-allowed;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mk-name-edit {
    flex: 0 0 auto;
    white-space: nowrap;
}
.mk-name-tip {
    margin: 8px 0 10px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--accent);
}

/* 名称修改记录（资源信息页：主人自己看） */
.mk-name-log {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    background: var(--surface);
}
.mk-name-log-h {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.mk-name-log-list {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
.mk-name-log-list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 0;
    font-size: 14px;
    color: var(--muted);
    border-top: 1px dashed var(--border);
}
.mk-name-log-list li:first-child { border-top: 0; }
.mk-name-log-at {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    color: var(--muted);
}
.mk-name-log-old {
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: line-through;
    opacity: .75;
    word-break: break-all;
}
.mk-name-log-new {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text);
    word-break: break-all;
}

/* 保存成功的提示（第 144 轮 · 发哥）：「点了保存资料没有任何反应」——
   成功也要**就近**说一句，不能只打在页顶。 */
.mk-save-ok {
    font-size: 14px;
    line-height: 1.5;
    color: #0F9D58;   /* 成功=绿（与 .mk-tick 同一个绿） */
}

/* 提交按钮旁的失败原因（第 139 轮 · 发哥：「应该在提交审核按钮的右边，提示出具体的原因」）
   以前原因只打在页面顶部，按钮在页面底部 → 用户以为"点了没反应"。 */
.mk-save-err {
    align-self: center;
    max-width: 460px;
    font-size: 14px;
    line-height: 1.5;
    color: #E2231A;
}

.mk-drop.is-over { background: rgba(226, 35, 26, .04); }

/* 灰掉（第 142 轮 · 发哥）：两条上传路线互斥 —— 另一条已经用了，本框不可再选。
   只做「不可用」的观感，**不隐藏**：用户要看得见"这里本来是能传的"，
   并知道要先删掉另一处的文件。 */
.mk-drop.is-off {
    background: var(--admin-hover);
    border-color: var(--border);
    cursor: not-allowed;
    opacity: .6;
}
.mk-drop.is-off:hover { border-color: var(--border); }
.mk-drop.is-off .mk-drop-main,
.mk-drop.is-off .mk-drop-hint { color: var(--muted); }
.mk-drop.is-off .mk-drop-icon { color: var(--muted); }
/* 原生 input 藏起来但保留可点（label for 会触发它） */
.mk-drop-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}
.mk-drop-icon {
    display: block;
    color: var(--muted);
    line-height: 1;
}
.mk-drop-main {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    color: var(--text);
}
.mk-drop-hint {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    color: var(--muted);
}
.mk-drop-file {
    display: block;
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--accent);
    word-break: break-all;
}
/* 拖进来的文件格式不符 / 浏览器不支持拖拽 */
.mk-drop-file.is-err { color: #DC2626; }

/* 必填星号（英文名称是必填项） */
.mk-req {
    margin-left: 2px;
    color: #E2231A;
    font-weight: 600;
}

/* ---- 已有 RID：选中行 + 就地展开详情（第 119 轮 · 发哥）----
   以前 RID 出现两遍（列表行 + 大标题条），详情和「修改信息」散在下面；
   现在只在列表里出现一次，选中那条**紧贴下面**展开，按钮靠右。 */
/* 🔴 第 121 轮（发哥）：「类型、简介、作者这部分不要也显示红色，会显得很乱，
      只要第一排（带 RID 那行）是选中状态，而且不要红底，要和选中资源类型一样：红框白底」 */
.mk-rid-item.is-active {
    border-color: var(--accent);
    background: var(--surface);
}
.mk-rid-detail {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    /* 贴合上面那行：列表 gap 是 8px，这里抵消掉，看起来是一体的 */
    margin-top: -8px;
    padding: 12px 14px;
    /* 🔴 详情区**不带红色**（发哥：只有第一排是选中态），用中性边框，视觉上挂在选中行下面 */
    border: 1px solid var(--border);
    border-top: 0;
    background: var(--surface);
}
.mk-rid-detail-main { flex: 1; min-width: 0; }
.mk-rid-detail-ops { flex: 0 0 auto; }
@media (max-width: 767px) {
    .mk-rid-detail { flex-direction: column; }
    .mk-rid-detail-ops { width: 100%; }
}

/* ---- 锁定区（未勾承诺时整体灰掉）也要和上一块留出间距 ----
   🔴 第 119 轮修：结构变成「section + fieldset + section」，
     而 `.tp-form-section + .tp-form-section` 只在**直接相邻**时生效 →
       fieldset 夹在中间时两块白卡贴在一起（发哥截图指出的就是这里）。 */
.mk-lockable { margin-top: 12px; }

/* ---- RID 上传倒计时（第 120 轮 · 发哥）----
   「未上传资源旁边，增加『需要在 X 天内完成上传资源』」；
   ≤30 天标橙，超期标红 —— 与后台 RID 管理同一口径。 */
.mk-rid-left { color: var(--muted); }
.mk-rid-left.is-urgent { color: #B26A00; }

/* ---- AI 翻译行（第 120 轮）---- */
.mk-ai-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

/* ---- 支持型号多选 ----
   🔴 第 131 轮（发哥）：「支持型号的可选框怎么又跟其他的可选框不一样了，应该保持一样的风格」
      ⇒ 原来的 `.mk-models` / `.mk-model` / `.mk-model-tick`（自绘的一枚 13px 按钮）**已删除**，
        前后台「提交资源 / 资源管理 / 新建资源 / 专网软件设置」四处统一改用
        `<x-tp.check>`（样式在 controls.css：12px、15px 方块、选中 = 品牌红实底 + 白 ✓）。
        全站语义多选只保留这一个控件，改样式只改 controls.css 一处。 */

/* ---- 卡片详情里的「详细说明」（Markdown 渲染，第 120 轮）----
   摘要是一句，详细说明是全文：限高 + 可滚动，别让一个 README 把弹窗撑到天上去。 */
.mk-modal-desc {
    margin: 10px 0 4px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}

/* ---- AI 翻译按钮（第 121 轮 · 发哥）----
   「这个按钮应该在开源协议的上面，而且要明显一点，但又不能跟提交的按钮一样，
     可以改成其他风格，例如浅灰色或者加个图标，不要 emoji」
   ⇒ 浅灰底 + 1px 边框 + 内联 SVG 图标；hover 变品牌红边；不用 emoji。 */
.mk-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--border);
    background: #F4F4F5;
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}
.mk-ai-btn:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}
.mk-ai-btn:disabled { opacity: .55; cursor: default; }
.mk-ai-ico { flex: 0 0 auto; color: var(--accent); }

/* ---- 上传者（只读事实，不是输入框；第 121 轮）---- */
.mk-uploader {
    margin: 0;
    padding: 6px 0;          /* 与左边 input 的第一行文字视觉对齐 */
    font-size: 14px;
    color: var(--muted);
}

/* ---- 工具条与下一个白卡之间留白（第 121 轮）----
   「+ 申请新的 RID」是页面级工具条，下一个是「开发规则确认」白卡；
   `.tp-form-section + .tp-form-section` 管不到（中间夹着工具条）→ 两块会贴在一起。 */
.tp-toolbar + .tp-form-section { margin-top: 16px; }

/* ============================================================
   ⑳ 升级包：主固件 + 资源 两个上传框（第 130 轮 · 发哥新流程）
   ------------------------------------------------------------
   发哥：「用户如果选择升级包，那么上传资源将有两个上传框，
     分别是 MCU主固件（只支持 .tp）、资源（文件夹或 4 种资源文件）」。
   ============================================================ */
.mk-pkg-grid {
    display: grid;
    /* 🔴 第 138 轮（发哥）：「字库/语音/图标/开机图 不要分开两行，改为一行 4 格」
       —— 四个槽一行放完；窄屏自动降为 2 列 / 1 列。 */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
    /* 同一行的单元格拉齐（默认就是 stretch，写出来防止以后被改坏） */
    align-items: stretch;
}
/* 🔴 第 142 轮（发哥）：「四个资源的框还是不等高」——
   单元格做成 flex 纵向容器（标签在上、上传框在下），上传框 `flex:1` 吃掉剩余高度，
   于是同一行四个框**永远等高**，与内容（空 / 已上传 / 报错）无关。 */
.mk-pkg-grid > div {
    display: flex;
    flex-direction: column;
}
.mk-pkg-grid > div > .mk-drop {
    flex: 1 1 auto;
}
/* 整行元素（主固件 / 选整个文件夹）独占一行 */
.mk-pkg-full { grid-column: 1 / -1; }
/* 🔴 第 156 轮断点收敛：四个槽位只有三个阶段 —— 手机 1 列 / 电脑 2 列 / 宽电脑 4 列。
   原来「4 列固定 + 980 以下 2 列 + 560 以下 1 列」用了两个门槛，
   而 768~980 这段（小笔记本窗口）本来是 2 列，统一到 767 后会变成 4 列、每格只有约 110px，
   所以这里必须显式给 2 列档，不能只留手机档。 */
.mk-pkg-grid {
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .mk-pkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
    .mk-pkg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 多文件区的两个按钮（选文件 / 选文件夹）—— 不能放在 <label> 里，各点各的 */
.mk-drop-ops {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}
.mk-drop-btn {
    border: 1px solid var(--accent);
    background: none;
    color: var(--accent);
    font-size: 14px;
    line-height: 1;
    padding: 5px 10px;
    cursor: pointer;
}
.mk-drop-btn:hover { background: rgba(226, 35, 26, .06); }
.mk-drop-or { font-size: 14px; color: var(--muted); }

/* 打包预览：选完文件只告诉"能不能打包"，不能就报原因。
   🔴 第 143 轮（发哥）：「这个框的左边，不要显示一条竖的红线，整个网站UI样式，要去 AI 味」
      —— 与第 99 轮 `.mk-note` 同一条规矩：**不用左侧色条**表达状态。
      状态靠边框色 + 文字色（出错才变红），正常态就是一条普通细边框。 */
.mk-pkg-preview {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    background: var(--surface);
}
.mk-pkg-preview.is-err {
    border-color: #f3b4b4;
    background: #fff7f7;
}
.dark .mk-pkg-preview.is-err { background: rgba(226, 35, 26, .07); border-color: #7f1d1d; }
.mk-pkg-name { font-family: var(--font-mono); font-size: 14px; color: var(--text); word-break: break-all; }
.mk-pkg-arch { margin-top: 4px; font-size: 14px; color: var(--muted); }
.mk-pkg-list { margin: 8px 0 0; padding-left: 18px; font-size: 14px; color: var(--muted); line-height: 1.7; }
.mk-pkg-err { margin-top: 6px; font-size: 14px; color: #b91c1c; }

/* 更新日志（第 147 轮 · 发哥）
   —— 详情里「本版更新」一块 + 版本历史里每条折叠展开；与详细说明同一套 markdown-body 排版，
      这里只补"折叠标题"和"表格单元格"两个容器，不另立一套文字样式。 */
.mk-log-body {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text);
}
.mk-log-cell {
    max-width: 220px;
    vertical-align: top;
}
.mk-log-details > summary {
    cursor: pointer;
    color: var(--accent);
    font-size: 14px;
    list-style: none;
}
.mk-log-details > summary::-webkit-details-marker { display: none; }
.mk-log-details[open] > summary { margin-bottom: 4px; }
.mk-log-details .mk-log-body {
    max-height: 260px;
    overflow: auto;
    padding-right: 4px;
}