/* ============================================================
   听歌识曲 · 年代时光机（identify.php）—— 手写 CSS2，只服务这一页
   inc/header.php 按页面名自动挂这一份（assets/css/p-identify.css）。

   原版：src/components/music/identify-view.tsx（Tailwind v4 + shadcn）
   参照版 DOM：/tmp/ref_identify.html（Next.js 在 3010 跑着，取的是实时渲染）
   ★ 数值一律从编译产物里查（矽岛音乐项目-latest/.next/static/css/3a69b6a727df9455.css），
     不凭记忆。本页用到的刻度：
       --radius 被项目改成 12px ⇒ rounded-md 10 / rounded-lg 12 / rounded-xl 16
       --radius-2xl 16 / max-w-md 448 / max-w-xl 576 / max-w-xs 320 / max-w-4xl 896
       text-xs 12/16 · sm 14/20 · base 16/24 · lg 18/28 · 2xl 24/32
       leading-relaxed = 1.625（**会按系数继承**，见「三、右侧」那条注释）
     ★ 参照版 preflight 里有 `svg{display:block;vertical-align:middle}` —— 我们的
       style.css 没有这条全局规则，所以**每个图标都要自己写 display:block**
       （要行内居中的那几处例外，见 .idf-play / .idf-mico 那类地方）。

   ★ 本页的手艺（CSS2 里没有 flex/grid，见 scripts/_PORTING_GUIDE.md 第 2 节）：
     · Tab 条（原版 TabsList 是 grid grid-cols-2）→ 两个 50% 的浮动按钮，
       几何照抄公共件的 .np-tab / .np-tablist（原版同一个组件、量过）。
     · 一排控件（下拉 + 按钮 / 卡片头 + 角标 / 歌曲行）→ 一律表格。
       ★ 行内块不行：容器一旦是行内级，就要跟父元素的行盒打交道，那个「撑杆」
         会让整行多出几像素（style.css 4570 行那条注释量过）。
     · 一行里靠右的角标（原版 ml-auto）→ 中间格 width:100% 吃掉剩余宽度，
       角标自己落在最后一格贴右（这条在 style.css 的 .sr-srow 上实测过）。
     · 图标居中（80 的圆按钮、36 的播放键）→ 「字号归零 + line-height = 盒高 +
       svg vertical-align:middle」，同 .lgi-mico / 顶栏 .btn-icon。
     · 声波的两圈扩散（animate-ping）→ 绝对定位铺满按钮 + keyframes 里 scale(2)。
       IE11 认 @keyframes 和无前缀 transform（transform 从 IE10 起不用前缀）。

   类名前缀 idf-（本页专属）；复用的公共件写在注释里，别改那份文件。
   ============================================================ */

/* ---- 内容容器：原版 max-w-4xl mx-auto pb-6（896）----
   （老版本这里是 1024，因为当时排成了左右两栏；按原版改回 Tabs 之后就该是 896。） */
.idf-wrap { max-width: 896px; margin: 0 auto; padding-bottom: 24px; }

/* ---- Tab 条：原版 TabsList = grid grid-cols-2 w-full max-w-md、h-9、
        bg-muted rounded-lg p-[3px]，两块各占一半。
        max-w-md = 448（w-full 之后被它压住），左对齐。
        和面板之间 8：原版 Tabs 根是 flex flex-col gap-2（IE 没有 gap，折成下外边距）。
        ★ 数值整套照抄 style.css 的 .np-tablist / .np-tab（原版同一个 Tabs 组件，
          在播放器弹层里量过）：列表 36 高、内边距 3、圆角 12、底 #E6ECEF；
          胶囊 29 高（h-[calc(100%-1px)]，border-box 含上下各 1 的透明边框）、
          内边距 4/8、圆角 10、文字 14/20 500。 */
.idf-tablist {
  width: 448px;                                     /* max-w-md */
  height: 36px;                                     /* h-9 */
  padding: 3px;                                     /* p-[3px] */
  margin-bottom: 8px;                               /* Tabs 根的 gap-2 */
  border-radius: 12px;                              /* rounded-lg */
  background-color: #E6ECEF;                        /* bg-muted */
  overflow: hidden;                                 /* 包住两个浮动 */
}
/* 每块：flex-1（各一半）+ 居中的「16 图标 + 6 + 文字」。
   ★ <button> 不能当 table-cell（style.css 的 .np-tab 那条注释：本项目的 button
     在 IE 下作 table-cell 不可靠），所以走浮动。
   ★ 文字色原版是 trigger 上的 text-foreground（两块都是 #111C22），
     选中态只换底色和阴影，不换字色 —— 别照登录页那两个 Tab 的写法（那边有 text-primary）。 */
.idf-tab {
  float: left; width: 50%; height: 29px;
  padding: 4px 8px;                                 /* px-2 py-1 */
  border: 1px solid transparent;
  border-radius: 10px;                              /* rounded-md */
  background-color: transparent;
  color: #111C22;
  font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 500;
  white-space: nowrap; text-align: center; cursor: pointer;
  -ms-transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                 box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 选中：data-[state=active]:bg-background + shadow-sm（同 .np-tab.on 的两个数值） */
.idf-tab-on { background-color: #EEF5F8; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.102), 0 1px 2px -1px rgba(0, 0, 0, 0.102); }
/* 胶囊里那颗 16 的图标（原版 w-4 h-4 + gap-1.5 = 6）。
   落点：vertical-align:top 对齐行盒顶（盒顶 + 边框 1 + 上内边距 4 = 5），
   行盒 20 高、图标 16 ⇒ (20−16)/2 = 2（同 .idf-loading-ic 的算法）。
   ★ 标点符号：markup 里图标 span 和文字之间**不能有空白**，否则行内那个空格
     又加约 4px（间距只能靠 margin-right 给）。 */
.idf-tab-ic {
  display: inline-block; width: 16px; height: 16px; margin-right: 6px;
  vertical-align: top; position: relative; top: 2px;
}
.idf-tab-ic svg { display: block; width: 16px; height: 16px; }

/* 面板：原版 TabsContent 是 space-y-6（一屏只显示一块，切换是换 .hidden 类名）。
   空壳子（比如还没检索时的 #tm-result）会自坍缩，不会多留一倍的缝。 */
.idf-panel > * + * { margin-top: 24px; }

/* ============================================================
   一、页头：flex items-center gap-4 mb-8
   56×56 rounded-2xl bg-primary/10 图标方块（里面 28 的 mic）+ h1 24/32 + p 14/20
   ★ 这儿跟公共件 .ui-head / .ui-head-tx 有两处对不上，所以整套自己写，不叠公共类：
     · 间距是 gap-4（16），.ui-head-tx 是 gap-3（12）
     · 说明行是 p.mt-1（上距 4），.ui-head-tx p 写的是 2
     （照抄公共件再覆盖，两条都要拼复合选择器抢权重，反而更绕。）
   ============================================================ */
.idf-head { display: table; width: 100%; margin-bottom: 32px; }
.idf-head-ico {
  display: table-cell; width: 56px; height: 56px; vertical-align: middle;
  border-radius: 16px; background-color: rgba(96, 141, 164, 0.1);
  text-align: center;
}
.idf-head-ico svg { display: block; width: 28px; height: 28px; margin: 0 auto; color: #608DA4; }
.idf-head-tx { display: table-cell; vertical-align: middle; padding-left: 16px; }
.idf-head-tx h1 { font-size: 24px; line-height: 32px; font-weight: 700; color: #111C22; }
.idf-head-tx p { margin-top: 4px; font-size: 14px; line-height: 20px; color: #616B70; }

/* ============================================================
   二、左栏：听歌识曲
   bg-card border border-border rounded-2xl p-8 md:p-12 text-center
   ============================================================ */
/* 卡片底子用公共件 .ui-card（p-6 / rounded-xl 16 / border / bg-card），
   这里只改内边距和居中。写成复合选择器是为了稳拿权重，跟文件顺序无关。 */
.ui-card.idf-card12 { padding: 48px; text-align: center; }   /* md:p-12 */
.ui-card.idf-card8 { padding: 32px; }                        /* md:p-8（时光机那张） */

/* ---- 麦克风按钮：w-20 h-20 rounded-full bg-muted + mx-auto mb-5 relative ----
   ★ position:relative 是给里面那圈声波当包含块的（原版按钮自己就是 relative）。
     `<button>` 上的相对定位 IE8 起就正常，站内顶栏的 .btn-icon 一直在用。
   ★ 图标居中走「字号归零 + line-height = 盒高 + vertical-align:middle」（同 .lgi-mico）：
     比绝对定位稳，也不依赖 transform。 */
.idf-mic {
  display: block; width: 80px; height: 80px;
  margin: 0 auto 20px;
  padding: 0; border: 0; border-radius: 50%;
  background-color: #E6ECEF;                       /* bg-muted */
  position: relative; overflow: visible;
  text-align: center; font-size: 0; line-height: 80px;
  cursor: pointer;
  -ms-transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.idf-mic:hover { background-color: rgba(230, 236, 239, 0.7); }   /* hover:bg-muted/70 */
/* 聆听档：整颗按钮换成 bg-primary/15（悬停也不再变浅，原版是 hover:bg-primary/15） */
.idf-mic-listen { background-color: rgba(96, 141, 164, 0.15); }
.idf-mic-listen:hover { background-color: rgba(96, 141, 164, 0.15); }

/* 中间的图标壳（36 = w-9 h-9）。壳自己 36×36、在 80 的行盒里居中。 */
.idf-micico { display: inline-block; vertical-align: middle; width: 36px; height: 36px; }
.idf-micico svg { display: block; width: 36px; height: 36px; }
/* 三种图标状态（原版是 cn() 拼的 text-* + animate-pulse，由 setMicState 换 class）。
   ★ 颜色写在 svg 的类上，所以这三条必须带上 `.idf-micico svg` 的权重才有用。 */
.idf-micico svg.idf-svg-idle { color: #616B70; }                  /* text-muted-foreground */
.idf-micico svg.idf-svg-listen {
  color: #608DA4;                                                 /* text-primary */
  -ms-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.idf-micico svg.idf-svg-nf { color: rgba(97, 107, 112, 0.6); }    /* text-muted-foreground/60 */

/* 聆听时向外扩散的两圈声波：absolute inset-0 rounded-full
   （第一圈 bg-primary/25、第二圈 bg-primary/15 且延迟 0.7s）。
   ★ 原版的 animate-ping = `ping 1s cubic-bezier(0,0,.2,1) infinite`、keyframes
     是 75%~100% 缩到 2 倍并淡出；IE 的 @keyframes 里 transform 得写无前缀的
     （IE10 起不用前缀），turn 之类的新单位照例避开。 */
.idf-wave {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  border-radius: 50%;
  background-color: rgba(96, 141, 164, 0.25);      /* bg-primary/25 */
  -ms-animation: idf-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  animation: idf-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.idf-wave-2 {
  background-color: rgba(96, 141, 164, 0.15);      /* bg-primary/15 */
  -ms-animation-delay: 0.7s; animation-delay: 0.7s;   /* [animation-delay:0.7s] */
}
@keyframes idf-ping {
  75%, 100% { -ms-transform: scale(2); transform: scale(2); opacity: 0; }
}

/* 标题：text-lg font-semibold text-foreground mb-2 */
.idf-h2 { margin-bottom: 8px; font-size: 18px; line-height: 28px; font-weight: 600; color: #111C22; }
/* 说明行：text-sm leading-relaxed max-w-xl mx-auto ⇒ 14 × 1.625 = 22.75 */
.idf-hint { max-width: 576px; margin: 0 auto; font-size: 14px; line-height: 22.75px; color: #616B70; }

/* 聆听进度：mt-5 max-w-xs mx-auto h-1 rounded-full bg-muted overflow-hidden */
.idf-prog {
  max-width: 320px; height: 4px; margin: 20px auto 0;
  border-radius: 9999px; background-color: #E6ECEF; overflow: hidden;
}
/* 里面那条：h-full rounded-full bg-primary animate-identify-progress
   （10 秒走满；时长还会被内联的 animation-duration 再写一遍，没关系） */
.idf-progbar {
  height: 100%; border-radius: 9999px; background-color: #608DA4;
  -ms-animation: idf-progress 10s linear forwards;
  animation: idf-progress 10s linear forwards;
}
@keyframes idf-progress { from { width: 0%; } to { width: 100%; } }

/* 这里原来有一条 .idf-note（失败后那行小字，PHP 版自己加的文案）—— 2026-09-23 删掉：
   原版「没有搜到」那一支**只换 h2 和副题两句文案**（identify-view.tsx:97-103 的
   identifyText），后面直接就是按钮行，没有多余的提示句。那行字是自创的，一并去掉，
   规则也没有引用方了。
   如果想再加回来，注意当年那条记下的坑：上距要写在这行自己身上，
   **别写在空壳 #identify-result 上** —— 空壳常驻，给它 margin-top 的话
   什么都没显示也会把下面的按钮行顶低 20。 */

/* ---- 底部按钮行：flex flex-wrap items-center justify-center gap-2 mt-6 ----
   ★ 换行的居中行不能用「相邻兄弟 margin-left」那套（换行后每行第一颗会缺左边距、
     左沿不齐），改用**每颗四边各 4**：相邻两块之间正好 8，行与行之间也是 8，
     左右对称、换行不掉队。容器 font-size:0 吃掉标签之间的空白字符。 */
.idf-acts { display: block; margin-top: 20px; text-align: center; font-size: 0; }
.idf-acts > * { margin: 4px; }
/* 按钮本体用公共件 .ui-btn（36 高 / rounded-md 10 / text-sm 500）+ 带图标那档。
   ★ 原版每一颗都是 <Button className="gap-1.5">，把基类的 gap-2（8）顶成了 6 —
     公共件的 .ui-btn-ic 写死 margin-right:8（gap-2），这里就近改回 6。
     （未登录时这一行是**三颗**：去登录 + 去搜索歌曲 + 用年代时光机找歌，
       .idf-acts > * 的四边 4 对三颗一样成立。） */
.idf-acts .ui-btn-ic { margin-right: 6px; }
/* 最后一颗按钮尾巴上还有一个小箭头：w-3.5 h-3.5（14×14），前距 6（gap-1.5）。
   落点 = 居中位 (36−14)/2 = 11 减去行盒顶（上内边距 8）= 3。 */
.idf-ic14 {
  display: inline-block; width: 14px; height: 14px; margin-left: 6px;
  vertical-align: top; position: relative; top: 3px;
}
.idf-ic14 svg { display: block; width: 14px; height: 14px; }

/* ---- 提示卡（.idf-tips）原本在这里，已删 ----
   原版 /identify 到识别面板就结束、直接进页脚，这张卡是本站自己加的，
   多出来一截高度。规则一并清掉了，别再加回来。
   （曾被删掉的那张卡的内容是「支持的场景 / 时长限制」那种说明文案。） */

/* ============================================================
   三、右栏：年代时光机
   ============================================================ */
/* ---- 卡片小标题行：flex items-center gap-2 mb-1 / mb-4 ----
   三种用法同一套：16 的图标 + 标题（text-base font-semibold）+（右边可选角标）。
   ★ 中间格 width:100% 是「把角标挤到最右」的那一招（原版 ml-auto），
     和 .sr-srow 里量到的一样：中间格吃满剩余宽度，两头的格子按内容定宽。 */
.idf-rhead { display: table; width: 100%; border-collapse: separate; border-spacing: 0; }
.idf-rhead-1 { margin-bottom: 4px; }                                  /* mb-1 */
.idf-rhead-4 { margin-bottom: 16px; }                                 /* mb-4 */
.idf-rhead-ic { display: table-cell; width: 16px; vertical-align: middle; }
.idf-rhead-ic svg { display: block; width: 16px; height: 16px; color: #608DA4; }   /* text-primary */
.idf-rhead-ic.idf-ic20 { width: 20px; }                               /* w-5 h-5 那颗日历 */
.idf-rhead-ic.idf-ic20 svg { width: 20px; height: 20px; }
.idf-rhead-tx {
  display: table-cell; width: 100%; vertical-align: middle; padding-left: 8px;
  font-size: 16px; line-height: 24px; font-weight: 600; color: #111C22;   /* text-base font-semibold */
}
.idf-rhead-b { display: table-cell; vertical-align: middle; white-space: nowrap; text-align: right; }

/* 卡片说明行：text-xs text-muted-foreground mb-5（这层的父级没有 leading 类，
   所以就是 text-xs 自带的 16，不是 19.5） */
.idf-desc { margin-bottom: 20px; font-size: 12px; line-height: 16px; color: #616B70; }

/* 角标：Badge variant="secondary" = bg-secondary text-secondary-foreground
   （公共件只有 .ui-badge / -outline / -gold 三档的实底/描边/金色，没有 secondary，
     所以这一档写在本页；盒高 = 16 + 2×2 + 边框 2 = 22、圆角 10 同公共件。） */
.idf-badge2 {
  display: inline-block; vertical-align: middle;
  padding: 2px 8px;
  border: 1px solid transparent; border-radius: 10px;
  background-color: #E1E9ED; color: #182429;       /* bg-secondary text-secondary-foreground */
  font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap;
}

/* ---- 年 / 月 / 日 + 按钮：flex flex-wrap items-end gap-3 ----
   三项定宽（w-32 = 128 / w-24 = 96）加一颗自动宽的按钮，底边对齐。
   ★ 定宽写在**格子里那个壳**上（.idf-w32/.idf-w24），格子上的 width 只是第二道保险：
     实测过「格子上写 width 不生效、其余格按内容的 min-content 定宽」这件事
     （style.css 5560 行），而且 <select> 的固有宽度是按最宽的 option 算的、
     跟原版的 128/96 对不上，所以两处都写、谁也不依赖谁。
   ★ table-layout:fixed 时列宽由格子上的 width 决定，用 px 写死最干脆：
     128 + 96 + 96 + 间距 60 = 380；容器（896 的卡片去掉左右 32）里剩下的都给
     按钮那格 —— 按钮是行内块、按内容定宽，贴在那格左沿，就是原版 flex 里
     「紧跟在日期后面」的样子。 */
.idf-ctrls {
  display: table; table-layout: fixed;
  width: 100%; width: calc(100% + 24px);
  border-collapse: separate; border-spacing: 12px 0;
  margin-left: -12px;
}
.idf-cf { display: table-cell; vertical-align: bottom; }
.idf-cf-y { width: 128px; }                        /* w-32 */
.idf-cf-m, .idf-cf-d { width: 96px; }              /* w-24 */
.idf-cf-b { white-space: nowrap; }                 /* 按钮那格：按内容定宽，别被挤换行 */

/* 下拉的壳：公共件 .ui-selwrap / .ui-sel / .ui-selarrow（36 高 / rounded-md 10 /
   px 12 + 右侧 36 让位给箭头 / 自绘箭头 16 落在 top:10 right:13）
   ★ 公共件只给箭头那层写了 16×16，**没给里面的 svg** —— 不补这条，图标会是
     svg 属性上的 24×24、把 16 的壳撑出去（complaint / musician 两页也是各自补的）。 */
.idf-w32 { width: 128px; }
.idf-w24 { width: 96px; }
.idf-ctrls .ui-selarrow svg { display: block; width: 16px; height: 16px; }

/* 字段标签：text-xs text-muted-foreground（**不是** .ui-label-xs —— 那个继承
   .ui-label 的 500 字重和前景色，这里原版是常规字重 + 次要色） */
.idf-lb { display: block; font-size: 12px; line-height: 16px; color: #616B70; }

/* ============================================================
   四、歌曲行（时光机检索结果 / 热门时光机预览，两处共用）
   原版一行的结构：flex items-center gap-3 p-3 rounded-xl hover:bg-muted/50
     + 48 的封面（rounded-lg = 12）+ 两行文字 +（可选的角标）+ 36 的播放键
   行高 72 = 12 + 内容 48（封面撑） + 12。
   ★ 照着 style.css 的 .sr-srow（5543 行，搜索页实测过）那套写：
     横向的 12 落在 border-spacing 上（两端各留一份，就是原版 p-3 的左右内边距），
     纵向的 12 用 padding；中间格 width:100%，两头的格子按内容的 min-content 定宽
     （封面 48 是自己带的、播放键 36 也是自己带的，都够定尺）。
   ★ 被拉高的格子装定尺的东西是错的（table-cell 会撑满整行高）——
     所以封面、角标、播放键各自都是「格子 + 里面的定尺块」。 */
.idf-rows > * + * { margin-top: 8px; }             /* space-y-2 */
.idf-srow {
  display: table; width: 100%;
  padding: 12px 0;
  border-collapse: separate; border-spacing: 12px 0;
  border-radius: 16px;                             /* rounded-xl */
  cursor: pointer;
  -ms-transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.idf-srow:hover { background-color: rgba(230, 236, 239, 0.5); }   /* hover:bg-muted/50 */

.idf-srow-cv { display: table-cell; width: 48px; vertical-align: middle; }
.idf-srow-tx { display: table-cell; width: 100%; vertical-align: middle; }
.idf-srow-tail { display: table-cell; vertical-align: middle; white-space: nowrap; }
.idf-srow-pl { display: table-cell; width: 36px; vertical-align: middle; }

/* 歌名：text-sm font-medium text-foreground truncate */
.idf-srow-nm {
  font-size: 14px; line-height: 20px; font-weight: 500; color: #111C22;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
/* 副行：text-xs text-muted-foreground truncate（歌手 · 专辑 · 日期） */
.idf-srow-meta {
  font-size: 12px; line-height: 16px; color: #616B70;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* 播放键：原版 <Button size="icon" variant="ghost">（size-9 = 36×36、rounded-md 10、
   ghost = 透明底 + hover:bg-accent + hover:text-accent-foreground）。
   图标 16 居中走「字号归零 + line-height = 盒高 + vertical-align:middle」，
   fill:currentColor 那颗实心三角和站内其它行（.sr-srow-ix-p）保持一致，
   PHP 版原本就写着 fill-current，不是这次改出来的。 */
.idf-play {
  display: block; width: 36px; height: 36px;
  padding: 0; border: 0; border-radius: 10px;
  background-color: transparent; color: #111C22;
  text-align: center; font-size: 0; line-height: 36px;
  cursor: pointer;
  -ms-transition: background-color 0.15s, color 0.15s;
  transition: background-color 0.15s, color 0.15s;
}
.idf-play:hover { background-color: #DBE7ED; color: #4B788E; }   /* bg-accent / text-accent-foreground */
.idf-play svg { display: inline-block; vertical-align: middle; width: 16px; height: 16px; fill: currentColor; }

/* ---- 空日期那一屏：py-10 text-center ----
   32 的日历图标（text-muted-foreground/50）+ 一行说明 + 相邻日期的小胶囊 */
.idf-empty { padding: 40px 0; text-align: center; }
.idf-empty-ic { width: 32px; height: 32px; margin: 0 auto; color: rgba(97, 107, 112, 0.5); }
.idf-empty-ic svg { display: block; width: 32px; height: 32px; }
.idf-empty-d { margin-top: 12px; font-size: 14px; line-height: 20px; color: #616B70; }   /* mt-3 text-sm */
.idf-empty-t { margin-top: 20px; font-size: 12px; line-height: 16px; color: #616B70; }   /* mt-5 text-xs */

/* 相邻日期的胶囊行：flex flex-wrap justify-center gap-2 mt-2（换行的居中行，
   同 .idf-acts 的「每颗四边各 4」写法；这里上距要的是 8，减去自身的 4 就是 4） */
.idf-chips { display: block; margin-top: 4px; text-align: center; font-size: 0; }
.idf-chip {
  display: inline-block; margin: 4px;
  padding: 6px 12px;
  border: 1px solid #D9DFE2; border-radius: 9999px;
  background: none;
  font-family: inherit; font-size: 12px; line-height: 16px; color: #111C22;
  cursor: pointer;
  -ms-transition: border-color 0.15s, color 0.15s;
  transition: border-color 0.15s, color 0.15s;
}
.idf-chip:hover { border-color: #608DA4; color: #608DA4; }
.idf-chip-n { color: #616B70; }                    /* 「 · N 首」那半截 */

/* ---- 预览的等待态：py-8 里一行居中的「正在挑选…」 ----
   （原版没有这块：预览曲目是构建期就有的常量，PHP 版改成接口拉取后临时出现） */
.idf-loading { padding: 32px 0; text-align: center; font-size: 14px; line-height: 20px; color: #616B70; }
/* 转圈的壳：16×16、与文字前距 8（gap-2）、在 20 的行盒里居中落 2 */
.idf-loading-ic {
  display: inline-block; width: 16px; height: 16px; margin-right: 8px;
  vertical-align: top; position: relative; top: 2px;
}
.idf-loading-ic svg { display: block; width: 16px; height: 16px; }
/* 转圈本身用公共件 .ui-spin（animation: ui-spin 1s linear infinite，@keyframes 也在公共表里） */