/* ============================================================
   音乐人入驻（musician.php）—— 本页专用样式，手写 CSS2
   原版：src/app/musician/page.tsx + src/components/music/musician-view.tsx
   取值的出处：原版编译产物 .next/static/css/3a69b6a727df9455.css 的 @theme 变量
   （--spacing 4px、--radius 12px、--radius-2xl 1rem、--radius-3xl 1.5rem、
     --text-xs/sm/base/lg/xl、--leading-relaxed 1.625、--blur-3xl 64px…），
   颜色抄 style.css 头部的设计值表（background/card/primary/muted/destructive/border）。
   本站按桌面 1280 排，所以原版所有 md: 档就是生效档，sm: 档不写。

   这一页原样保留的公共件（style.css 里有、且语义一致的）：
     .page-info      内容区外壳
     .ui-input       原版 Input 的 h-9(36) rounded-md(10) px-3 text-sm shadow-xs
     .ui-textarea    同款边框圆角，py-2(8/12)
     .ui-label       text-sm font-medium leading-none（14/14）
     .ui-fld-sm      space-y-1.5（字段组内 6px）
     .ui-grid3       grid sm:grid-cols-3 gap-3（12 的三等分）
     .ui-selwrap/.ui-sel/.ui-selarrow  原生下拉的三件套
     .ui-hint/.ui-hint-r   text-[11px] + text-right
     .ui-nums        tabular-nums
     .ui-btn(-primary/-outline/-sm/-with-ic)  原版 <Button>
     .grid > .col-2  gap-4(16) 的两列浮栅
   ============================================================ */

/* ---- 页面容器：max-w-5xl mx-auto pb-6 space-y-8 ----
   space-y-8（32）用相邻兄弟的 margin-top 补。★ 这一条对 #mu-status 那种
   display:none 的中间节点也成立：Tailwind v4 的 space-y 是「除最后一个外都给
   margin-bottom」，隐藏节点上的 margin 不参与布局，两边算出来的间距同样是 32。 */
.msc-wrap { max-width: 1024px; margin: 0 auto; padding-bottom: 24px; }
.msc-wrap > * + * { margin-top: 32px; }

/* JS 用来显示/隐藏状态卡的类。原版这里是 Tailwind 的 `hidden`（工具类名不能留在
   HTML 上），改成自己的名字；页面里那处 className 切换跟着一起改（见页内脚本）。 */
.msc-hide { display: none; }

/* ============ Hero ============
   原版 relative overflow-hidden rounded-3xl bg-gradient-to-br from-[#5B8FA8] to-[#3A6B8A]
        p-8 md:p-12 text-white
   rounded-3xl = --radius-3xl = 1.5rem = 24；p-12 = 48。
   渐变方向写 to bottom right：style.css 里两处渐变（3085、3503 行）用的就是
   这个标准方向写法，等价于 Tailwind 的 bg-gradient-to-br（to bottom right）。 */
.msc-hero {
  position: relative; overflow: hidden;
  padding: 48px;
  border-radius: 24px;
  background-color: #5B8FA8;                    /* IE9 不认无前缀渐变时的兜底 */
  background-image: linear-gradient(to bottom right, #5B8FA8 0%, #3A6B8A 100%);
  color: #FFFFFF;
}
/* 两个装饰球：-top-16 -right-16 w-64 h-64 rounded-full bg-white/10
                  -bottom-20 -left-10 w-72 h-72 rounded-full bg-white/5
   负偏移会被 .msc-hero 的 overflow:hidden 裁掉，和原版一致。 */
.msc-hero-b1, .msc-hero-b2 { position: absolute; border-radius: 9999px; }
.msc-hero-b1 { top: -64px; right: -64px; width: 256px; height: 256px;
               background-color: rgba(255, 255, 255, 0.1); }
.msc-hero-b2 { bottom: -80px; left: -40px; width: 288px; height: 288px;
               background-color: rgba(255, 255, 255, 0.05); }
/* 正文那一格。原版这里是 relative —— 必须留着：两个球是绝对定位的兄弟节点，
   排在前面，不把正文提成定位元素的话球会盖在字上面。 */
.msc-hero-in { position: relative; }

/* 徽章：rounded-md border px-2 py-0.5 text-xs font-medium bg-white/15
        text-white border-white/20 w-fit whitespace-nowrap mb-3
   （原版是 inline-flex + gap-1 + items-center，这里退成行内块，见下）
   盒高 = 16(行) + 2×2(内边距) + 1×2(边框) = 22。
   ★ vertical-align 用 top 而不是 middle：它是**独占一个行盒**的行内块
     （父级只有它一个行内内容），top 让它贴住行盒顶。此时行盒高度由它的
     **margin 盒**决定 —— 22 + margin-bottom 12 = 34，正好等于原版
     「flex 盒 22 + mb-3 12」推给标题的那 34。用 middle 会额外按基线算一遍，
     行盒被撑到 24 上下再叠偏移，标题就落不准。 */
.msc-badge {
  display: inline-block; vertical-align: top;
  margin-bottom: 12px; padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.15);
  font-size: 12px; line-height: 16px; font-weight: 500;
  color: #FFFFFF; white-space: nowrap;
}
/* 图标 12×12（w-3 h-3）、间距 4（gap-1）。行高 16，图标居中落点 (16−12)/2 = 2。
   行内 svg 上的 position:relative 在 IE 里没把握（style.css 1768 行那条结论），
   所以图标统一包一层 span，位移写在 span 上。 */
.msc-badge-ic { display: inline-block; width: 12px; height: 12px; margin-right: 4px;
                vertical-align: top; position: relative; top: 2px; }
.msc-badge-ic svg { display: block; width: 12px; height: 12px; }

/* 标题 text-3xl md:text-4xl font-bold mb-3 → 36/40 700，下边距 12 */
.msc-hero-t { font-size: 36px; line-height: 40px; font-weight: 700; margin-bottom: 12px; }
/* 副句 text-sm md:text-base opacity-90 max-w-xl leading-relaxed
   → 16px、行高 1.625（leading-relaxed 在 v4 里是 --tw-leading，会盖掉 text-base
     自带的 24；量到的是 1.625 那条），最宽 576（max-w-xl）。 */
.msc-hero-p { max-width: 576px; font-size: 16px; line-height: 1.625; opacity: 0.9; }

/* ============ 未登录提示条「入驻申请与账号绑定。」 ============
   原版那串类是 bg-card border border-amber-500/30 rounded-2xl p-5
   flex flex-wrap items-center gap-3：图标(20，不缩) · 说明(flex-1 min-w-[200px]) ·
   按钮(不缩)。CSS2 里一行三格用表格最稳，中间那格自动吃掉剩余宽度。
   amber-500 = rgb(246,158,0)（编译产物里的 oklch→sRGB 值），/30 是 0.3。
   ★ 这条只给未登录看（原版是 authReady && !isLoggedIn 那一支），位置在申请状态卡
     之后、「入驻流程」之前。原版是纯客户端页，它挂载后才出现 —— curl 参照版
     里没有这一块，别以为是自己多画了。 */
.msc-lock {
  display: table; width: 100%; border-spacing: 0;   /* border-spacing 是继承属性，显式归零 */
  padding: 20px;
  border: 1px solid rgba(246, 158, 0, 0.3); border-radius: 16px;
  background-color: #FAFCFD;
}
.msc-lock-ic { display: table-cell; vertical-align: middle; width: 20px; color: #DA7700; }
.msc-lock-ic svg { display: block; width: 20px; height: 20px; }
/* 左右各 12 就是原版 flex 的 gap-3（两处间距各一条，中间这格吃满剩下的宽度） */
.msc-lock-tx { display: table-cell; vertical-align: middle; padding: 0 12px;
               font-size: 14px; line-height: 20px; color: #616B70; }
/* width:1% 是「收缩到内容宽」的老写法（style.css 的 .ui-gr-1 同款），
   不写的话表格会把按钮那一列也拉宽，它就贴不到右边。
   按钮是 Button 的 size="sm" 那一档（h-8 = 32），走 .ui-btn-sm —— 别用默认档，
   默认档是 h-9 = 36，比原版高 4。 */
.msc-lock-btn { display: table-cell; vertical-align: middle; width: 1%;
                white-space: nowrap; text-align: right; }

/* ============ 青少年模式拦截卡 ============
   bg-card border border-border rounded-2xl px-6 py-12 text-center */
.msc-youth { padding: 48px 24px; text-align: center;
             border: 1px solid #D9DFE2; border-radius: 16px; background-color: #FAFCFD; }
/* 圆底图标 64（w-16 h-16 rounded-full bg-muted）居中，图标 28（w-7 h-7）居中，
   下边距 16（mb-4）。绝对定位 + 负半高是本站的通用垂直居中法（见 header.php 的
   白屏转圈层注释）：行高法在两个引擎里会差一两像素。 */
.msc-youth-ico { position: relative; width: 64px; height: 64px; margin: 0 auto 16px;
                 border-radius: 9999px; background-color: #E6ECEF; }
.msc-youth-cic { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px;
                 margin: -14px 0 0 -14px; color: #616B70; }
/* 标题 text-lg font-semibold mb-2 → 18/28 600；副句 text-sm leading-relaxed mb-6 */
.msc-youth-t { font-size: 18px; line-height: 28px; font-weight: 600;
               color: #111C22; margin-bottom: 8px; }
.msc-youth-p { font-size: 14px; line-height: 1.625; color: #616B70; margin-bottom: 24px; }

/* ============ 小标题（「入驻流程」等）============
   text-lg font-semibold mb-4 + 图标 20（w-5 h-5 text-primary）。
   行高 28，图标 20 → 居中落点 (28−20)/2 = 4。 */
.msc-sec-t { font-size: 18px; line-height: 28px; font-weight: 600;
             color: #111C22; margin-bottom: 16px; }
.msc-t-ic { display: inline-block; width: 20px; height: 20px; margin-right: 8px;
            vertical-align: top; position: relative; top: 4px; color: #608DA4; }
.msc-t-ic svg { display: block; width: 20px; height: 20px; }
/* 「入驻前需要知道的事」那颗是 16（w-4 h-4），行高 20 → 落点 (20−16)/2 = 2 */
.msc-t-ic-sm { display: inline-block; width: 16px; height: 16px; margin-right: 8px;
               vertical-align: top; position: relative; top: 2px; color: #608DA4; }
.msc-t-ic-sm svg { display: block; width: 16px; height: 16px; }

/* ============ 入驻流程：三张步骤卡 ============
   原版 grid grid-cols-1 md:grid-cols-3 gap-3 → 直接复用 .ui-grid3（12 的三等分）。
   ★ 外层 .msc-cell 是 .ui-grid3 的直接子级（被写成 display:table-cell），
     卡片本体 .msc-step 再套一层：IE 里 position:relative 落在 table-cell 上不可靠
     （style.css 的 .song-card-cv 那条注释记过），那个箭头是绝对定位的，必须有
     一个真的定位祖先。 */
.msc-cell { display: table-cell; width: 33.3333%; vertical-align: top; }
.msc-step { position: relative; padding: 16px;
            border: 1px solid #D9DFE2; border-radius: 16px; background-color: #FAFCFD; }
/* 序号 text-xs font-bold text-primary/70 mb-1 → 12/16 700，primary 70% 透明 */
.msc-step-n { font-size: 12px; line-height: 16px; font-weight: 700;
              color: rgba(96, 141, 164, 0.7); margin-bottom: 4px; }
/* 小标题 text-sm font-semibold mb-1 → 14/20 600 */
.msc-step-t { font-size: 14px; line-height: 20px; font-weight: 600;
              color: #111C22; margin-bottom: 4px; }
/* 说明 text-[11px] leading-relaxed：11 号字配 1.625 的行高（text-[11px] 本身不带
   行高类，leading-relaxed 会盖掉继承来的 1.5），muted-foreground。 */
.msc-step-d { font-size: 11px; line-height: 1.625; color: #616B70; }
/* 卡间的箭头：hidden md:block absolute -right-3 top-1/2 -translate-y-1/2 w-5 h-5
   text-muted-foreground/40。桌面档是显示的（hidden md:block 只对 <768 生效）。
   -right-3 = right:-12；top:50% + translate-y:(-50%) 换成 margin-top:-10（高 20 的一半）。 */
.msc-step-ar { display: block; position: absolute; right: -12px; top: 50%; margin-top: -10px;
               width: 20px; height: 20px; color: rgba(97, 107, 112, 0.4); }
.msc-step-ar svg { display: block; width: 20px; height: 20px; }

/* ============ 入驻前需要知道的事 ============
   bg-muted/40 border border-border rounded-2xl p-5
   muted = #E6ECEF，/40 = 0.4 */
.msc-info { padding: 20px; border: 1px solid #D9DFE2; border-radius: 16px;
            background-color: rgba(230, 236, 239, 0.4); }
/* 标题 text-sm font-semibold mb-2（图标那颗用 .msc-t-ic-sm） */
.msc-info-t { font-size: 14px; line-height: 20px; font-weight: 600;
              color: #111C22; margin-bottom: 8px; }
/* 列表 text-xs text-muted-foreground leading-relaxed space-y-1.5 list-disc pl-5
   ★ 全局有 `ul, ol { list-style: none }`（style.css 134 行），这里必须显式加回来。
   list-style-position 写 outside：标记挂在内容盒左边那 20 的内边距里，和 pl-5 一致。 */
.msc-list { padding-left: 20px;
            list-style-type: disc; list-style-position: outside;
            font-size: 12px; line-height: 1.625; color: #616B70; }
.msc-list > li + li { margin-top: 6px; }              /* space-y-1.5 */

/* ============ 申请表单卡 ============
   bg-card border border-border rounded-3xl p-6 md:p-8 → 内边距 32、圆角 24 */
.msc-form { padding: 32px; border: 1px solid #D9DFE2; border-radius: 24px;
            background-color: #FAFCFD; }
/* 卡内标题 text-lg font-semibold mb-1 → 18/28 600，下边距 4 */
.msc-form-t { font-size: 18px; line-height: 28px; font-weight: 600;
              color: #111C22; margin-bottom: 4px; }
/* 说明 text-xs text-muted-foreground mb-6 → 12/16 muted，下边距 24 */
.msc-form-p { font-size: 12px; line-height: 16px; color: #616B70; margin-bottom: 24px; }

/* 字段区 grid md:grid-cols-2 gap-4：两列等宽、列间距 16、行间距 16。
   复用 .grid > .col-2（负外边距 + 每列左右各 8 的内边距，合出 16 的列间距），
   再补一条 margin-bottom:-16 把最后一行多出来的那份吃掉 ——
   不吃掉的话下面的「个人简介」会平白多沉 16（.grid 的每个 .col 都带 mb 16）。
   .grid-3 就是这么干的（gap-3 那版是 -12），这里是 gap-4，所以自己写一条。 */
.msc-formgrid { margin-bottom: -16px; }
/* 简介那块是 grid 之后的独立字段组：space-y-1.5 mt-4 */
.msc-mt4 { margin-top: 16px; }
/* 自述多行框：原版是 text-base **md:text-sm** —— 桌面档就是 14/20，和 .ui-input 同档，
   字号行高都不用盖（.ui-textarea 已经是对的；这里原写成 16/24，比原版大了一号）。
   ★ 高度定死 64：原版靠 field-sizing-content（空的时候落到 min-h-16 = 64），
     IE 没有这个属性、高度就由 rows=4 算出来，而两个引擎算那 4 行行盒的办法不一样
     （Chrome 按 line-height、IE 按自己的字体度量）—— 同 complaint.php 的 .cmp-textarea。
     打字自己长高是原版的行为，由页内脚本补，所以这里只写初始高度、不写 max-height。 */
.msc-ta { height: 64px; }
/* .ui-selarrow 只在外层 span 上写了 16×16，icon() 吐的 svg 是 24×24 ——
   不补这条会溢出 4px。本页自己补（别的页没补，不归这里管）。 */
.msc-form .ui-selarrow svg { display: block; width: 16px; height: 16px; }

/* 必填星号：<span class="text-destructive">*</span>。
   原版的 Label 是 flex + gap-2(8)，所以标签文字和星号之间**是 8**。
   我们这边是行内上下文，文字后面那个空格只有约 3.5px，凑不出 8 ——
   所以页面里把那个空格去掉，改用这里的 8 左边距（同 p-complaint.css 的 .cmp-ast）。
   ★ 别在这个 span 上写 line-height：它跟着 .ui-label 的 leading-none(14) 走，
     改了就比原版高。 */
.msc-req { margin-left: 8px; color: #E40016; }
/* 协议里的两个链接 text-primary hover:underline mx-1 */
.msc-link { margin: 0 4px; color: #608DA4; }
.msc-link:hover { color: #608DA4; text-decoration: underline; }

/* 同意那一行：原版是 label.flex items-start gap-2 mt-6 text-xs text-muted-foreground
        cursor-pointer，里面是 16×16 的复选框 + 一段带链接的说明。
   CSS2：外层左边留 24（复选框 16 + gap 8），复选框绝对定位到左上、top:2 是
   mt-0.5 —— items-start 让勾选框和第一行的顶对齐。 */
.msc-agree { display: block; position: relative; margin-top: 24px; padding-left: 24px;
             font-size: 12px; line-height: 16px; color: #616B70; cursor: pointer; }
/* accent-primary：IE 不认 accent-color，勾选框还是系统配色（原版在 IE 里也一样，
   那条类本来就只是个增强），现代浏览器才会看到那个主色勾。 */
.msc-agree input { position: absolute; left: 0; top: 2px; width: 16px; height: 16px;
                   cursor: pointer; accent-color: #608DA4; }

/* 提交按钮：原版 shadcn <Button> 的默认档再叠 w-full h-11 text-base mt-6
   （cn() 是 twMerge，同组冲突留着后面的：h-11 顶掉 h-9、text-base 顶掉 text-sm）。
   所以盒高 44、字号 16、整宽。颜色/圆角/阴影/过渡都还是 .ui-btn.ui-btn-primary
   那一套，这里只改盒子和行高（44 高配 44 的行高，单行居中）。
   ★ 原版按钮里**没有图标**（它那条 has-[>svg]:px-3 因此不生效，走默认的 px-4 = 16）：
     所以 markup 不带 ui-btn-with-ic，.ui-btn 自己的 8px 16px 正好就是原版的 px-4，
     这里只压掉上下内边距 —— 同 p-complaint.css 的 .cmp-submit。
     原来这里多放了一颗 send 图标，还顺手把横向内边距也压成了 0，两处都已按原版去掉。 */
.msc-submit { display: block; width: 100%; height: 44px;
              padding-top: 0; padding-bottom: 0;
              font-size: 16px; line-height: 44px; margin-top: 24px; }

/* ============================================================
   以下是页内脚本画出来的状态卡（GET /api/musician.php 那一块）
   ============================================================ */

/* ---- 审核中：relative overflow-hidden bg-card border border-border
        rounded-3xl px-6 py-9 text-center ---- */
.msc-st { position: relative; overflow: hidden; padding: 36px 24px; text-align: center;
          border: 1px solid #D9DFE2; border-radius: 24px; background-color: #FAFCFD; }
/* 顶部那条琥珀色渐隐：pointer-events-none absolute inset-x-0 top-0 h-40
   bg-gradient-to-b from-amber-500/10 to-transparent
   h-40 = 160、inset-x-0 = 左右 0、from/to transparent = 到透明。 */
.msc-st-glow { position: absolute; left: 0; right: 0; top: 0; height: 160px;
               background-image: linear-gradient(to bottom,
                                 rgba(246, 158, 0, 0.1) 0%, rgba(246, 158, 0, 0) 100%); }
.msc-st-in { position: relative; }
/* 图标位 relative w-16 h-16 mx-auto mb-4 */
.msc-st-ico { position: relative; width: 64px; height: 64px; margin: 0 auto 16px; }
/* 呼吸层 absolute inset-0 rounded-full bg-amber-500/15 animate-pulse
   animate-pulse 在 v4 里是 2s cubic-bezier(.4,0,.6,1) 无限循环、0/100% 停 1、50% 停 .5。 */
.msc-st-pulse { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
                border-radius: 9999px; background-color: rgba(246, 158, 0, 0.15);
                -ms-animation: msc-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
                animation: msc-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes msc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
/* 圆底 relative w-16 h-16 rounded-full bg-amber-500/15 ring-1 ring-amber-500/30
   text-amber-600 flex items-center justify-center
   ring-1 是 box-shadow 0 0 0 1px（不是 border），不占盒宽。 */
.msc-st-core { position: relative; display: block; width: 64px; height: 64px;
               border-radius: 9999px; background-color: rgba(246, 158, 0, 0.15);
               box-shadow: 0 0 0 1px rgba(246, 158, 0, 0.3); color: #DA7700; }
/* 里面那颗 28 的图标居中（原版是 flex 居中）。绝对定位在 CSS 里本来就会
   块级化（IE 也一样），所以这个类可以直接挂在 svg 上，不用再包一层。 */
.msc-st-cic { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px;
              margin: -14px 0 0 -14px; }
/* 标题 text-xl font-semibold → 20/28 600 */
.msc-st-t { font-size: 20px; line-height: 28px; font-weight: 600; color: #111C22; }
/* 正文 text-sm mt-2 leading-relaxed */
.msc-st-p { margin-top: 8px; font-size: 14px; line-height: 1.625; color: #616B70; }
.msc-st-strong { font-weight: 500; color: #111C22; }     /* font-medium text-foreground */
/* 小字 text-xs text-muted-foreground/80 mt-1.5 */
.msc-st-sub { margin-top: 6px; font-size: 12px; line-height: 16px;
              color: rgba(97, 107, 112, 0.8); }
/* 底部一行 mt-6 inline-flex flex-wrap items-center justify-center
        gap-x-2.5 gap-y-1 text-xs text-muted-foreground
   CSS2：容器 text-align:center + 三个行内块，间距用相邻兄弟的 margin-left 10（gap-x-2.5）。
   ★ 容器**必须**自己带 font-size/line-height：行盒的撑杆按容器字号算，继承 16/24 的话
     行盒会被撑到 24，比内容高 8，整卡就高了。text-xs 那档是 12/16。
   ★ 子级统一 vertical-align:top：撑杆只有 16 高，用默认的 baseline 对齐会让行内块
     整体上移 4 上下（内容溢出到盒外）。gap-y-1 不实现 —— 桌面档这一行放得下，
     不会换行（内容约 200px，容器近 900px）。 */
.msc-st-meta { margin-top: 24px; text-align: center;
               font-size: 12px; line-height: 16px; color: #616B70; }
.msc-st-meta > * + * { margin-left: 10px; }
.msc-st-mi { display: inline-block; vertical-align: top; }
/* 名字前面那颗 14 的小图标（w-3.5 h-3.5，gap-1.5 → margin-right 6） */
.msc-si { display: inline-block; width: 14px; height: 14px; margin-right: 6px;
          vertical-align: top; position: relative; top: 1px; }
.msc-si svg { display: block; width: 14px; height: 14px; }
.msc-dot { color: #D9DFE2; }                            /* text-border，那个间隔点 */

/* ---- 已通过 / 未通过：bg-card border border-border rounded-2xl p-6 space-y-4 ---- */
.msc-st2 { padding: 24px; border: 1px solid #D9DFE2; border-radius: 16px;
           background-color: #FAFCFD; }
.msc-st2 > * + * { margin-top: 16px; }                  /* space-y-4 */
/* 标题行 flex items-center gap-2，最后那颗胶囊靠 ml-auto 贴右边。
   表格三格：图标（16，定宽）· 标题（吃掉剩余）· 胶囊（1% 收缩到内容 + 右对齐）。 */
.msc-st2-hd { display: table; width: 100%; border-spacing: 0; }
.msc-st2-hd > * { display: table-cell; vertical-align: middle; }
/* 图标格 16 宽（text-primary），里面的 svg 走 display:block —— 这一格就是个格子，
   撑杆是继承来的 16/24，图标若按行内排会被基线拽下去。块级化之后格子内容高 =
   图标高 16，再由 vertical-align:middle 在 24 高的行里居中，落点正好 4（= (24−16)/2），
   和原版 flex items-center 那行一致。 */
.msc-st2-hic { display: table-cell; width: 16px; color: #608DA4; }
.msc-st2-hic svg { display: block; width: 16px; height: 16px; }
/* 标题 text-base font-semibold（16/24）。这一行的高度就是 24 —— 标题 24、胶囊 24、
   图标格 16 居中，和原版那一行 flex 等高。 */
.msc-st2-t { padding-left: 8px;                         /* gap-2 */
             font-size: 16px; line-height: 24px; font-weight: 600; color: #111C22; }
.msc-st2-bd { width: 1%; white-space: nowrap; text-align: right; }
/* 提交时间那行 text-xs text-muted-foreground */
.msc-st2-sub { font-size: 12px; line-height: 16px; color: #616B70; }
/* 结果说明 text-sm rounded-lg p-3 leading-relaxed */
.msc-note { padding: 12px; border-radius: 12px; font-size: 14px; line-height: 1.625; }
.msc-note-ok  { background-color: rgba(0, 185, 129, 0.1); color: #007857; }
.msc-note-bad { background-color: rgba(228, 0, 22, 0.1);  color: #E40016; }
/* 三格资料 dl.grid sm:grid-cols-3 gap-3 text-sm → 复用 .ui-grid3（12 的三等分） */
.msc-dl { font-size: 14px; line-height: 20px; }
/* dt：text-xs text-muted-foreground mb-0.5 → 12/16 muted，下边距 2 */
.msc-dl-t { margin-bottom: 2px; font-size: 12px; line-height: 16px; color: #616B70; }

/* 状态胶囊：ml-auto inline-flex items-center gap-1.5 text-xs font-medium
        px-2.5 py-1 rounded-full + 三色底色
   盒高 = 16(行) + 4×2(内边距) + 0(无边框) = 24，和标题行等高。
   ⚠ 数值取自编译产物：amber-600 rgb(218,119,0)、amber-700 rgb(181,82,0)、
     emerald-700 rgb(0,120,87)。style.css 的 .rk-no.n3 用的是旧版 #D97706，
     两者差 1-2 个通道值，肉眼分不出，这里按量到的写。 */
.msc-pill { display: inline-block; vertical-align: top; padding: 4px 10px;
            border-radius: 999px; font-size: 12px; line-height: 16px; font-weight: 500;
            white-space: nowrap; }
.msc-pill-ic { display: inline-block; width: 14px; height: 14px; margin-right: 6px;
               vertical-align: top; position: relative; top: 1px; }
.msc-pill-ic svg { display: block; width: 14px; height: 14px; }
.msc-pill-pending { background-color: rgba(246, 158, 0, 0.15);  color: #B55200; }
.msc-pill-ok      { background-color: rgba(0, 185, 129, 0.15);  color: #007857; }
.msc-pill-no      { background-color: rgba(228, 0, 22, 0.15);   color: #E40016; }