:root { /* 集中定义全站设计变量，避免相同颜色和尺寸散落后难以统一调整。 */
  --ink: #f4f7f8; /* 使用近白文字保证纯黑背景上的主要内容对比度。 */
  --muted: #8b9398; /* 使用中性灰区分辅助信息，保持黑色界面的克制层级。 */
  --night: #030606; /* 使用更深的青黑底色承接页面渐变。 */
  --panel: #0a1112; /* 为侧栏组件提供带轻微青调的抬升表面。 */
  --panel-deep: #050a0b; /* 为播放器底座提供更深的青黑层级。 */
  --sidebar-surface-start: #091112; /* 定义侧栏顶部的深青灰色。 */
  --sidebar-surface-end: #05090a; /* 定义侧栏底部的近黑色，让纵向渐变保持克制。 */
  --detail-surface-start: #0b1213; /* 让详情面板略亮于主侧栏以区分层级。 */
  --detail-surface-end: #080c0d; /* 详情面板下方回落到深色，避免大面积发灰。 */
  --line: rgba(244, 247, 248, 0.11); /* 用低对比边线分隔区域而不破坏极简感。 */
  --accent: #42d7e5; /* 参考截图使用清爽青色标识主要按钮和当前状态。 */
  --accent-ink: #021315; /* 给明亮青色背景提供足够深的文字颜色。 */
  --danger: #ffb6bd; /* 为无效输入等错误状态准备清晰但柔和的提示色。 */
  --sidebar-rail-width: 64px; /* 固定桌面端收起图标栏宽度，让核心控制始终可见。 */
  --sidebar-expanded-width: 300px; /* 控制展开侧栏宽度，容纳名称和完整播放器但不过度占屏。 */
  --sidebar-control-size: 44px; /* 统一侧栏按钮的几何尺寸，确保图标和悬停边框使用同一中心。 */
  --detail-panel-width: 360px; /* 为滑出的详细交互提供稳定宽度和舒适文字行长。 */
} /* 结束设计变量作用域，使下方规则可以通过 var() 复用。 */

* { /* 统一所有元素的盒模型，避免内边距导致宽度意外溢出。 */
  box-sizing: border-box; /* 将边框和内边距计入声明尺寸，让布局计算更直观。 */
} /* 结束全局盒模型规则。 */

html { /* 设置文档根节点的最低高度和后备背景。 */
  min-height: 100%; /* 确保短内容页面也能覆盖完整浏览器高度。 */
  background: var(--night); /* 在 body 尚未绘制时先显示一致深色，避免白色闪烁。 */
} /* 结束根节点基础样式。 */

body { /* 建立全站通用的排版和颜色基础。 */
  min-height: 100vh; /* 让页面至少占满一个视口，中心布局才有可靠参照。 */
  margin: 0; /* 移除浏览器默认外边距，避免全屏布局四周出现白边。 */
  color: var(--ink); /* 让正文默认使用适合深色背景的高对比文字。 */
  font-family: Manrope, system-ui, sans-serif; /* 优先使用品牌字体，并提供系统字体回退。 */
  letter-spacing: 0.018em; /* 适度增加全站字距，解决文字过于紧凑并提升小字号可读性。 */
  text-rendering: optimizeLegibility; /* 请求浏览器优先采用更清晰的字形渲染。 */
} /* 结束全站正文基础样式。 */

button, input { /* 统一交互控件与正文的字体，避免浏览器采用平台默认字体。 */
  font: inherit; /* 继承字号和字族，使控件融入页面视觉体系。 */
} /* 结束表单控件字体规则。 */

button { /* 为所有按钮设置一致的交互暗示。 */
  cursor: pointer; /* 使用手型光标明确表示元素可点击。 */
} /* 结束按钮基础规则。 */

button:focus-visible, a:focus-visible, input:focus-visible { /* 仅在键盘导航时显示清晰焦点。 */
  outline: 2px solid var(--accent); /* 用强调色描边帮助键盘用户定位当前位置。 */
  outline-offset: 4px; /* 将焦点环移出元素边界，避免遮挡按钮内容。 */
} /* 结束可见焦点规则。 */

h1, h2, h3, p { /* 清除标题和段落不一致的默认顶部间距。 */
  margin-top: 0; /* 由组件显式控制节奏，防止浏览器默认值破坏布局。 */
} /* 结束文本元素重置。 */

.eyebrow, .timer-mode, .section-label { /* 统一小型分类标签的视觉语言。 */
  margin-bottom: 0.75rem; /* 在标签和主体内容之间保留可识别的间隔。 */
  color: var(--accent); /* 使用强调色让模式或分区标签容易扫视。 */
  font-family: "DM Mono", monospace; /* 使用等宽字体强化计时工具的功能感。 */
  font-size: 0.7rem; /* 保持标签次要，避免与标题竞争注意力。 */
  letter-spacing: 0.18em; /* 增大大写标签字距，提升小字号清晰度。 */
} /* 结束分类标签共享样式。 */

.button { /* 定义项目中主要胶囊按钮的通用外观。 */
  display: inline-flex; /* 使用弹性布局方便文字和图标共同居中。 */
  align-items: center; /* 垂直居中按钮内容，避免不同字体产生偏移。 */
  justify-content: center; /* 水平居中按钮内容，保持操作区域平衡。 */
  gap: 0.55rem; /* 为可能出现的文字和图标保留稳定间距。 */
  border: 1px solid transparent; /* 预留边框宽度，状态变化时按钮不会跳动。 */
  border-radius: 999px; /* 使用最大圆角形成柔和且容易识别的操作形状。 */
  padding: 0.92rem 1.45rem; /* 提供足够点击面积，兼顾鼠标和触屏操作。 */
  font-weight: 700; /* 加粗操作文字，突出按钮相对正文的重要性。 */
  letter-spacing: 0.015em; /* 轻微拉开粗体字符，防止视觉拥挤。 */
  text-decoration: none; /* 让链接型按钮不显示普通链接下划线。 */
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; /* 平滑反馈悬停和状态变化，避免界面显得生硬。 */
} /* 结束按钮基础样式。 */

.button:hover { /* 在指针悬停时提供轻量空间反馈。 */
  transform: translateY(-2px); /* 轻微上移表示按钮已经响应用户指向。 */
} /* 结束按钮悬停状态。 */

.button--primary { /* 定义页面最重要操作的高对比样式。 */
  background: var(--accent); /* 使用强调色填充以吸引第一注意力。 */
  color: var(--accent-ink); /* 使用深色文字保证浅色按钮上的可读性。 */
} /* 结束主要按钮样式。 */

.button--quiet { /* 定义重置等次要操作，降低其视觉权重。 */
  border-color: var(--line); /* 用细边框保留可点击感而不抢夺焦点。 */
  background: rgba(8, 11, 22, 0.28); /* 使用半透明深色避免按钮完全融入背景。 */
  color: var(--ink); /* 保留足够文字对比度，确保操作仍然清晰。 */
} /* 结束次要按钮样式。 */

.button--compact { /* 为侧边栏表单提供更紧凑的按钮规格。 */
  width: 100%; /* 占满表单宽度，使保存入口醒目且易于触控。 */
  padding: 0.75rem 1rem; /* 减少高度以适应信息密集的侧边栏。 */
  font-size: 0.82rem; /* 缩小字号以匹配设置区的次要层级。 */
} /* 结束紧凑按钮变体。 */

/* 首页采用纯黑居中布局，以产品名称和单一行动入口建立明确焦点。 */
.landing-page { /* 定义入口页的纯黑全屏背景。 */
  background: #050606; /* 使用接近纯黑的颜色满足整体视觉方向。 */
} /* 结束入口页背景样式。 */

.landing-shell { /* 使用网格把主标题区和页脚稳定分布在一个完整视口中。 */
  position: relative; /* 为背景网格提供绝对定位参照。 */
  isolation: isolate; /* 创建独立层叠上下文，防止背景纹理影响其他页面。 */
  display: grid; /* 通过网格同时控制中心内容和底部页脚。 */
  min-height: 100vh; /* 确保短屏和大屏都使用完整视口构图。 */
  grid-template-rows: 1fr auto; /* 让主内容占剩余空间，页脚保持自然高度。 */
  padding: clamp(1.4rem, 4vw, 3.5rem); /* 根据屏幕宽度调整边缘安全距离。 */
} /* 结束入口页外壳样式。 */

.landing-grid { /* 在纯黑背景上增加极淡网格，避免页面显得空洞。 */
  position: absolute; /* 让纹理覆盖视口且不参与内容布局。 */
  z-index: -1; /* 将纹理放在文字和按钮后方。 */
  inset: 0; /* 贴合容器四边，确保全屏覆盖。 */
  background-image: linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px); /* 用两组细线构成克制方格。 */
  background-size: 52px 52px; /* 使用较大格距减少纹理干扰。 */
  mask-image: radial-gradient(circle at center, black, transparent 72%); /* 让网格只在中心轻微显现并向边缘消失。 */
  pointer-events: none; /* 防止装饰层阻挡任何链接或按钮。 */
} /* 结束首页背景网格样式。 */

.landing-content { /* 将产品名称、副标题和入口严格放在页面正中。 */
  align-self: center; /* 在页脚上方的可用区域中垂直居中内容。 */
  justify-self: center; /* 将内容块水平放到页面中心。 */
  width: min(900px, 100%); /* 限制超宽屏标题行宽并允许移动端收缩。 */
  padding: 5rem 1rem 3rem; /* 给顶部和页脚之间保留稳定呼吸空间。 */
  text-align: center; /* 按需求让标题和副标题正中排布。 */
} /* 结束入口内容布局。 */

.landing-content h1 { /* 设置首页产品名称的现代大标题。 */
  margin-bottom: 0.75rem; /* 与副标题保持紧密但清晰的层级关系。 */
  font-size: clamp(3rem, 8vw, 7.2rem); /* 根据视口平滑放大并限制极端尺寸。 */
  font-weight: 600; /* 使用中高字重突出品牌但避免过度厚重。 */
  letter-spacing: -0.015em; /* 保留现代标题的整体感，同时让字母之间更舒展。 */
  line-height: 0.98; /* 压缩标题行框，使视觉中心更准确。 */
} /* 结束首页主标题样式。 */

.landing-subtitle { /* 设置标题下方的指定产品副标题。 */
  margin-bottom: 2.4rem; /* 为主要行动按钮留出清晰间距。 */
  color: var(--muted); /* 使用中性灰保持副标题次于产品名称。 */
  font-family: "DM Mono", monospace; /* 用等宽字体呼应计时器的功能属性。 */
  font-size: clamp(0.92rem, 1.5vw, 1.15rem); /* 在不同屏幕保持轻巧清晰。 */
  letter-spacing: 0.08em; /* 增加字距营造冷静现代的副标题节奏。 */
} /* 结束首页副标题样式。 */

.landing-footer { /* 将首页页脚组织为完整的三栏信息区域。 */
  display: grid; /* 使用网格稳定排列产品说明、链接和版权信息。 */
  grid-template-columns: 1fr auto 1fr; /* 让左右信息平衡并将导航置于中间。 */
  align-items: end; /* 将不同高度的页脚内容沿底部对齐。 */
  gap: 2rem; /* 保证三栏信息之间有足够留白。 */
  padding-top: 1.5rem; /* 将页脚与中央内容分开。 */
  border-top: 1px solid var(--line); /* 用细线建立完整页脚边界。 */
  color: var(--muted); /* 降低页脚权重，避免与中央标题竞争。 */
  font-size: 0.74rem; /* 使用紧凑字号保持辅助信息属性。 */
} /* 结束首页页脚布局。 */

.footer-intro { /* 纵向排列页脚产品名称和简短定位。 */
  display: flex; /* 使用弹性布局控制两行文字间距。 */
  flex-direction: column; /* 将品牌名称放在说明上方。 */
  gap: 0.35rem; /* 保持两行文字关联且不拥挤。 */
} /* 结束页脚产品介绍布局。 */

.footer-intro strong { /* 强化页脚中的产品名称。 */
  color: var(--ink); /* 使用主文字色提高品牌识别度。 */
  font-size: 0.84rem; /* 略大于其他页脚内容形成局部标题。 */
} /* 结束页脚产品名称样式。 */

.footer-links { /* 横向排列页脚入口和产品特性。 */
  display: flex; /* 使用弹性布局保持项目在同一行。 */
  align-items: center; /* 垂直对齐链接和普通文字。 */
  justify-content: center; /* 在页面底部居中排列导航。 */
  gap: 1.25rem; /* 给每个项目保留独立阅读空间。 */
  white-space: nowrap; /* 防止桌面端项目随意换行破坏中轴。 */
} /* 结束页脚链接布局。 */

.footer-links a { /* 设置页脚中的可点击入口。 */
  color: var(--ink); /* 用更高对比度区别链接和说明文字。 */
  text-decoration: none; /* 保持极简页脚外观。 */
} /* 结束页脚链接样式。 */

.footer-links a:hover { /* 为页脚链接提供明确悬停反馈。 */
  color: var(--accent); /* 使用青色强调当前可点击入口。 */
} /* 结束页脚链接悬停状态。 */

.footer-meta { /* 将版权信息放到页脚右侧。 */
  justify-self: end; /* 与左侧介绍形成视觉平衡。 */
  margin-bottom: 0; /* 移除段落默认底部间距以准确对齐。 */
  text-align: right; /* 让文字从右侧边界向内排列。 */
} /* 结束页脚版权信息样式。 */

/* 播放页以番茄钟为唯一中心焦点，其他功能收纳到左侧常驻工具栏。 */
.player-page { /* 锁定播放页为单视口应用布局。 */
  overflow: hidden; /* 防止固定侧边栏和环境光造成页面级滚动。 */
  background: var(--night); /* 为多层渐变提供稳定的深色后备。 */
} /* 结束播放页基础样式。 */

.focus-app { /* 建立番茄钟严格居中的全屏容器。 */
  position: relative; /* 为返回链接、工具按钮和光晕提供定位参照。 */
  isolation: isolate; /* 限制装饰层级，避免背景元素遮挡其他固定组件。 */
  display: grid; /* 使用网格可以通过 place-items 精确双向居中。 */
  min-height: 100vh; /* 让中央位置始终以整个视口为基准。 */
  place-items: center; /* 同时水平和垂直居中番茄钟核心区域。 */
  overflow: hidden; /* 裁切超出视口的背景光晕，避免滚动条。 */
  padding: 5rem 2rem; /* 使用上下对称安全边距，使番茄钟仍以完整视口中心为基准。 */
  background: radial-gradient(circle at 52% 42%, rgba(66, 215, 229, 0.075), transparent 34%), radial-gradient(circle at 88% 12%, rgba(21, 93, 99, 0.1), transparent 30%), linear-gradient(135deg, #020404 0%, #061011 48%, #030607 100%); /* 叠加低饱和青黑渐变和柔光，让整页背景更有层次但不抢夺计时器焦点。 */
} /* 结束专注应用主容器。 */

.focus-glow { /* 定义播放页环境光的共享属性。 */
  position: absolute; /* 使装饰独立于居中的计时器布局。 */
  z-index: -1; /* 将光晕置于功能内容后方，避免阻挡交互。 */
  border-radius: 50%; /* 保持光晕为柔和圆形。 */
  filter: blur(80px); /* 大幅模糊边缘以形成自然环境光。 */
  opacity: 0.08; /* 大幅降低装饰亮度，确保黑色风格和时间焦点不被破坏。 */
  pointer-events: none; /* 避免装饰元素截获任何鼠标或触摸事件。 */
} /* 结束播放页光晕共享样式。 */

.focus-glow--one { /* 放置左下方紫色环境光。 */
  left: -8rem; /* 部分移出视口，避免出现完整圆形边界。 */
  bottom: -10rem; /* 下移光源，让背景产生更深的纵向层次。 */
  width: 28rem; /* 提供足够面积形成可见但不集中的光区。 */
  height: 28rem; /* 与宽度一致以保持圆形。 */
  background: #2ad3df; /* 使用统一青色为纯黑背景增加极轻环境层次。 */
} /* 结束左下环境光样式。 */

.focus-glow--two { /* 放置右上方蓝色环境光。 */
  top: -9rem; /* 将中心移出视口，避免光源过于明显。 */
  right: 8%; /* 与侧边栏触发按钮错开，保持按钮对比度。 */
  width: 22rem; /* 使用较小尺寸形成不对称背景层次。 */
  height: 22rem; /* 保持光晕为圆形。 */
  background: #155d63; /* 使用深青色平衡左下光晕并保持低饱和。 */
} /* 结束右上环境光样式。 */

.mobile-sidebar-trigger { /* 定义手机端和全屏模式使用的左上侧栏呼出按钮。 */
  position: fixed; /* 脱离中央布局，并在全屏滚动或视口变化时保持位置。 */
  z-index: 45; /* 高于遮罩和普通页面内容，确保侧栏隐藏时入口可用。 */
  top: 1.2rem; /* 与视口顶部保持稳定安全距离。 */
  left: 1rem; /* 固定在页面左上角，呼出方向与侧栏来源一致。 */
  display: none; /* 普通桌面端已有常驻图标栏，因此默认隐藏重复入口。 */
  width: var(--sidebar-control-size); /* 与侧栏按钮使用完全相同的点击宽度。 */
  height: var(--sidebar-control-size); /* 创建统一正方形命中区域。 */
  place-items: center; /* 将菜单符号放在按钮几何中心。 */
  border: 1px solid var(--line); /* 使用低对比边框标识可点击范围。 */
  border-radius: 12px; /* 使用与侧栏控件接近的小圆角。 */
  padding: 0; /* 移除浏览器默认内边距，防止符号偏移。 */
  background: rgba(8, 16, 17, 0.94); /* 使用侧栏同系青黑色，让全屏呼出按钮融入新表面。 */
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.32); /* 在全屏背景上维持清晰边界。 */
  color: var(--ink); /* 保证菜单符号具有足够对比度。 */
  font-size: 1rem; /* 让菜单符号清晰但不过度抢眼。 */
} /* 结束手机侧栏呼出按钮的桌面默认状态。 */

.timer-panel { /* 定义页面中央番茄钟的核心视觉区域。 */
  display: flex; /* 使用弹性布局按顺序垂直排列时间和操作。 */
  width: min(760px, 100%); /* 限制最大宽度，同时允许小屏完整收缩。 */
  flex-direction: column; /* 将模式、时间、说明和按钮纵向排列。 */
  align-items: center; /* 水平居中所有计时器内容。 */
  text-align: center; /* 让说明文字围绕中央时间保持对称。 */
} /* 结束中央计时器容器样式。 */

.timer-mode { /* 强化当前周期模式并控制其与时间的距离。 */
  margin-bottom: 0.7rem; /* 留出呼吸空间但仍与倒计时形成一组。 */
} /* 结束计时模式标签样式。 */

.time-display { /* 让剩余时间成为全页面最主要的视觉元素。 */
  font-family: "DM Mono", monospace; /* 等宽数字防止秒数变化造成文字左右跳动。 */
  font-size: clamp(5.2rem, 17vw, 12rem); /* 根据屏幕宽度放大，同时限制移动端和桌面极值。 */
  font-weight: 500; /* 使用中等字重保持数字醒目但不过分厚重。 */
  font-variant-numeric: tabular-nums; /* 强制数字等宽，进一步稳定倒计时布局。 */
  letter-spacing: -0.055em; /* 收紧超大数字之间的空隙，形成完整时间块。 */
  line-height: 0.95; /* 缩短数字行框，便于整体在视觉上真正居中。 */
  text-shadow: 0 0 70px rgba(66, 215, 229, 0.08); /* 使用极淡青色发光加强焦点但保持黑色克制感。 */
} /* 结束倒计时数字样式。 */

.timer-message { /* 为计时器状态提供安静的辅助说明。 */
  max-width: 34rem; /* 限制行宽，避免长提示在大屏上松散。 */
  margin: 1.5rem 0 2.2rem; /* 与大数字和操作按钮建立明确间距。 */
  color: var(--muted); /* 弱化提示，确保注意力仍停留在剩余时间。 */
  font-size: 0.92rem; /* 使用舒适但次要的正文尺寸。 */
  line-height: 1.6; /* 增加行高以兼容较长的状态提示。 */
} /* 结束计时器提示文字样式。 */

.timer-controls { /* 将开始和重置按钮并排组织。 */
  display: flex; /* 使用弹性布局适配按钮不同文字长度。 */
  align-items: center; /* 垂直对齐两个操作按钮。 */
  justify-content: center; /* 保持操作组以页面中心为轴。 */
  gap: 0.85rem; /* 防止按钮过近导致误触。 */
} /* 结束计时器按钮组样式。 */

.timer-controls .button { /* 为中央核心操作增加最低宽度。 */
  min-width: 112px; /* 避免 Start 和 Pause 文案切换时按钮宽度跳动。 */
} /* 结束中央按钮尺寸规则。 */

.mode-toggle { /* 将模式切换设计成弱化的文本操作。 */
  margin-top: 1.45rem; /* 与主要按钮组分离，减少误点击。 */
  border: 0; /* 移除按钮边框以降低视觉优先级。 */
  padding: 0.35rem; /* 保留基本点击范围并兼顾简洁外观。 */
  background: transparent; /* 让控件表现为辅助文字操作。 */
  color: var(--muted); /* 使用次要颜色避免争夺 Start 按钮焦点。 */
  font-size: 0.8rem; /* 与其他辅助操作保持一致字号。 */
  text-decoration: underline; /* 明确没有按钮外形的文字仍然可以点击。 */
  text-underline-offset: 4px; /* 将下划线与字符分开，提高可读性。 */
} /* 结束模式切换按钮样式。 */

.mode-toggle:hover { /* 用户指向模式切换时增强文字反馈。 */
  color: var(--ink); /* 提高对比度表示控件处于可操作状态。 */
} /* 结束模式切换悬停状态。 */

.sidebar-backdrop { /* 遮罩只服务手机端抽屉，桌面端侧栏常驻不需要压暗页面。 */
  position: fixed; /* 覆盖整个视口且不随内容滚动。 */
  z-index: 20; /* 位于主页面之上但低于侧栏和详细面板。 */
  inset: 0; /* 同时贴合视口四边，形成完整遮罩。 */
  display: none; /* 桌面端默认完全不创建可交互遮罩层。 */
  border: 0; /* 移除按钮默认边框。 */
  padding: 0; /* 消除按钮默认内边距。 */
  background: rgba(0, 0, 0, 0.72); /* 使用纯黑遮罩突出手机端工具界面。 */
  opacity: 0; /* 默认透明，打开时再平滑显示。 */
  pointer-events: none; /* 关闭状态允许用户继续操作主页面。 */
  transition: opacity 0.28s ease; /* 平滑调整背景亮度。 */
} /* 结束侧栏遮罩基础样式。 */

.tools-sidebar { /* 定义桌面端左侧常驻图标栏和可展开侧栏。 */
  position: fixed; /* 相对视口固定，使滚动或内容变化不影响工具位置。 */
  z-index: 40; /* 高于详细面板，确保图标栏始终位于最前。 */
  top: 0; /* 贴合视口顶部以形成完整长条界面。 */
  left: 0; /* 固定在用户指定的页面左侧。 */
  display: flex; /* 使用弹性布局固定顶部、菜单和底部播放器。 */
  width: var(--sidebar-rail-width); /* 收起时仅保留统一图标栏宽度。 */
  height: 100dvh; /* 使用动态视口高度适配浏览器工具栏变化。 */
  flex-direction: column; /* 从上到下排列顶部、功能菜单和播放器。 */
  overflow: hidden; /* 收起时裁切名称和展开播放器内容。 */
  border-right: 1px solid var(--line); /* 用细线明确工具栏与主页面的边界。 */
  background: linear-gradient(180deg, var(--sidebar-surface-start) 0%, #070c0d 52%, var(--sidebar-surface-end) 100%); /* 用轻微纵向青黑渐变区分侧栏与主背景。 */
  box-shadow: 18px 0 50px rgba(0, 0, 0, 0.22); /* 用轻投影分离侧栏和主内容。 */
  transition: width 0.3s ease, transform 0.3s ease; /* 平滑展开宽度和手机端滑动位置。 */
} /* 结束桌面端常驻侧栏基础样式。 */

.tools-sidebar.is-open { /* 定义桌面端侧栏展开状态。 */
  width: var(--sidebar-expanded-width); /* 显示图标、名称和完整播放器。 */
} /* 结束桌面端侧栏展开状态。 */

.sidebar-header { /* 固定侧栏顶部展开按钮和品牌名称。 */
  display: flex; /* 横向排列固定图标按钮与品牌内容。 */
  min-height: 64px; /* 在保留 44px 按钮的前提下压缩顶部区域。 */
  flex: 0 0 auto; /* 防止顶部区域被播放器或菜单压缩。 */
  align-items: center; /* 垂直居中按钮和品牌内容。 */
  gap: 0.55rem; /* 缩短展开按钮与品牌之间的距离，让标题区更紧凑。 */
  padding: 0 calc((var(--sidebar-rail-width) - var(--sidebar-control-size) - 1px) / 2); /* 以侧栏可见宽度精确居中顶部按钮。 */
  border-bottom: 1px solid var(--line); /* 分隔顶部品牌和功能菜单。 */
} /* 结束侧栏顶部样式。 */

.sidebar-toggle { /* 定义桌面展开按钮和手机关闭按钮。 */
  display: grid; /* 使用网格精确居中箭头或关闭符号。 */
  width: var(--sidebar-control-size); /* 与菜单项共享统一的固定宽度。 */
  height: var(--sidebar-control-size); /* 与菜单项共享统一的固定高度。 */
  flex: 0 0 var(--sidebar-control-size); /* 禁止侧栏收起时按钮被压缩。 */
  place-items: center; /* 将符号放在按钮几何中心。 */
  border: 1px solid var(--line); /* 用低对比边框明确操作范围。 */
  border-radius: 10px; /* 使用统一小圆角匹配功能项。 */
  background: rgba(13, 23, 24, 0.82); /* 使用略亮青黑表面让按钮从侧栏渐变中轻微抬升。 */
  color: var(--muted); /* 默认弱化按钮以避免争夺番茄钟焦点。 */
  line-height: 1; /* 清除字体额外行高保持图标居中。 */
} /* 结束侧栏展开按钮样式。 */

.sidebar-toggle-icon {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  transition: transform 0.22s ease;
}

.sidebar-toggle-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.sidebar-toggle[aria-expanded="true"] .sidebar-toggle-icon {
  transform: rotate(180deg);
}

.sidebar-toggle:hover { /* 用户指向展开按钮时提供青色反馈。 */
  border-color: rgba(66, 215, 229, 0.42); /* 提升按钮边界便于确认命中。 */
  color: var(--accent); /* 使用强调色显示当前可操作状态。 */
} /* 结束侧栏展开按钮悬停状态。 */

.sidebar-brand { /* 将品牌图标槽和两行文字组合成展开内容。 */
  display: flex; /* 横向排列品牌图标和文字。 */
  min-width: 210px; /* 防止侧栏动画期间文字换行。 */
  align-items: center; /* 垂直对齐图标与文字块。 */
  gap: 0.55rem; /* 压缩品牌图标与文字之间的空白。 */
  opacity: 0; /* 收起时隐藏品牌内容，只保留展开按钮。 */
  transform: translateX(-8px); /* 让品牌在展开时轻微滑入。 */
  transition: opacity 0.18s ease, transform 0.25s ease; /* 平滑显示品牌而不延迟宽度动画。 */
} /* 结束侧栏品牌布局。 */

.tools-sidebar.is-open .sidebar-brand, .tools-sidebar.is-fullscreen-open .sidebar-brand { /* 侧栏展开后显示品牌组合。 */
  opacity: 1; /* 恢复品牌可见度。 */
  transform: translateX(0); /* 将品牌移动到最终位置。 */
} /* 结束展开状态品牌样式。 */

.sidebar-brand h2 { /* 设置侧栏品牌主标题。 */
  margin-bottom: 0.08rem; /* 拉近品牌标题和辅助说明以降低标题区高度。 */
  font-size: 1.18rem; /* 进一步放大品牌标题，让侧栏入口更醒目。 */
  font-weight: 700; /* 提高标题字重，强化侧栏识别度。 */
  letter-spacing: 0.025em; /* 增加字符间距改善用户指出的拥挤问题。 */
} /* 结束侧栏品牌标题样式。 */

.sidebar-brand p { /* 设置品牌下方的工具说明。 */
  margin-bottom: 0; /* 清除默认间距保持标题栏高度稳定。 */
  color: var(--muted); /* 使用辅助颜色降低说明权重。 */
  font-size: 0.75rem; /* 继续提升辅助说明尺寸并保持次要层级。 */
  font-weight: 500; /* 适度增加字重并继续保持次于标题。 */
  letter-spacing: 0.04em; /* 增加小字间距提高可读性。 */
} /* 结束品牌辅助文字样式。 */

.sidebar-menu { /* 纵向排列所有图标和名称功能项。 */
  display: flex; /* 使用弹性布局控制菜单项顺序。 */
  min-height: 0; /* 允许菜单在矮屏中收缩而不挤压播放器。 */
  flex: 1 1 auto; /* 占用顶部和播放器之间的全部剩余空间。 */
  flex-direction: column; /* 按照从上到下的功能顺序排列。 */
  gap: 0.28rem; /* 压缩功能项之间的纵向空白，提高信息密度。 */
  overflow-y: auto; /* 未来功能增加后允许菜单独立滚动。 */
  align-items: flex-start; /* 让收起按钮和展开后的整行按钮共享同一左边界。 */
  padding: 0.65rem calc((var(--sidebar-rail-width) - var(--sidebar-control-size) - 1px) / 2); /* 减少菜单上下留白并继续保持图标精确居中。 */
  scrollbar-width: none; /* 隐藏狭窄图标栏中不必要的滚动条。 */
} /* 结束侧栏功能菜单布局。 */

.sidebar-menu-item { /* 统一每个功能的图标加名称结构。 */
  display: flex; /* 横向排列固定图标和展开名称。 */
  width: var(--sidebar-control-size); /* 收起状态让悬停边框和按钮使用完全相同尺寸。 */
  height: var(--sidebar-control-size); /* 固定行高，消除图标槽与悬停框的上下偏差。 */
  min-height: var(--sidebar-control-size); /* 防止弹性布局在矮屏压缩按钮。 */
  flex: 0 0 var(--sidebar-control-size); /* 维持每个菜单项稳定的正方形命中区域。 */
  align-items: center; /* 垂直居中图标和文字。 */
  gap: 0.62rem; /* 略微压缩图标与名称距离，形成更紧凑的整行。 */
  overflow: hidden; /* 收起时裁切名称但保留图标。 */
  border: 1px solid transparent; /* 预留悬停和选中边框宽度。 */
  border-radius: 10px; /* 使用统一圆角形成现代菜单项。 */
  padding: 0; /* 让图标画布直接服从统一按钮边界，避免盒模型错位。 */
  background: transparent; /* 默认融入侧栏黑色表面。 */
  color: #c6cccf; /* 使用柔和主色保证名称可读但不过亮。 */
  text-align: left; /* 让名称从图标右侧自然阅读。 */
  text-decoration: none; /* 让 HOME 链接与按钮采用同一视觉样式。 */
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; /* 平滑反馈悬停和激活状态。 */
} /* 结束侧栏功能项样式。 */

.sidebar-menu-item:hover, .sidebar-menu-item.is-active { /* 突出用户指向或已经打开的功能。 */
  border-color: rgba(66, 215, 229, 0.18); /* 使用淡青色勾勒功能项范围。 */
  background: rgba(66, 215, 229, 0.075); /* 使用参考图式青色选中背景。 */
  color: var(--accent); /* 将名称和图标提升到品牌强调色。 */
} /* 结束功能项悬停与激活状态。 */

.menu-icon { /* 预留每个功能的正式图标位置。 */
  display: grid; /* 建立透明图标画布并精确居中内部 SVG。 */
  width: calc(var(--sidebar-control-size) - 2px); /* 为按钮边框留出空间并保持视觉中心一致。 */
  height: calc(var(--sidebar-control-size) - 2px); /* 与宽度一致形成稳定透明画布。 */
  flex: 0 0 calc(var(--sidebar-control-size) - 2px); /* 禁止展开或收起动画压缩图标。 */
  place-items: center; /* 将正式图标精确放在按钮几何中心。 */
  color: var(--accent); /* 让未来图标默认采用品牌青色。 */
} /* 结束菜单图标槽样式。 */

.menu-icon svg { /* 统一四个正式菜单图标的绘制尺寸和线条语言。 */
  width: 20px; /* 在 44px 命中区域内保留充足留白。 */
  height: 20px; /* 与宽度一致避免图标被拉伸。 */
  fill: none; /* 使用线性图标保持界面轻量。 */
  stroke: currentColor; /* 自动跟随默认、悬停和激活颜色。 */
  stroke-linecap: round; /* 让线条端点更柔和并匹配圆角组件。 */
  stroke-linejoin: round; /* 让图标转角保持一致视觉质感。 */
  stroke-width: 1.7; /* 在深色背景上兼顾清晰度和克制感。 */
} /* 结束正式菜单 SVG 样式。 */

.sidebar-item-name { /* 控制功能名称在展开和收起之间切换。 */
  min-width: 170px; /* 防止展开动画中名称换行。 */
  opacity: 0; /* 收起状态隐藏名称但保留图标交互。 */
  font-size: 1rem; /* 进一步放大功能名称，提高菜单的醒目程度。 */
  font-weight: 700; /* 使用更醒目的字重明确每个主要入口。 */
  letter-spacing: 0.045em; /* 增加字符间距改善字体拥挤问题。 */
  transform: translateX(-8px); /* 让名称随展开过程轻微滑入。 */
  transition: opacity 0.18s ease, transform 0.25s ease; /* 平滑呈现名称。 */
} /* 结束侧栏功能名称样式。 */

.tools-sidebar.is-open .sidebar-item-name, .tools-sidebar.is-fullscreen-open .sidebar-item-name { /* 展开侧栏后显示全部功能名称。 */
  opacity: 1; /* 恢复名称可见度。 */
  transform: translateX(0); /* 将名称移动到最终位置。 */
} /* 结束展开状态功能名称样式。 */

.tools-sidebar.is-open .sidebar-menu-item, .tools-sidebar.is-fullscreen-open .sidebar-menu-item { /* 展开时把方形按钮延伸为整行操作。 */
  width: 100%; /* 让名称区域也能响应悬停和点击。 */
  flex-basis: var(--sidebar-control-size); /* 保持行高不因名称出现而改变。 */
} /* 结束展开状态菜单项宽度规则。 */

.detail-panel { /* 定义从左侧栏右边滑出的二级交互面板。 */
  position: fixed; /* 相对视口固定并独立于主页面布局。 */
  z-index: 30; /* 位于主内容之上但保持在常驻侧栏之后。 */
  top: 0; /* 使用完整视口高度容纳详细交互。 */
  left: var(--sidebar-rail-width); /* 收起侧栏时从图标栏右边开始。 */
  display: flex; /* 固定标题并让内容区域滚动。 */
  width: min(var(--detail-panel-width), calc(100vw - var(--sidebar-rail-width))); /* 防止窄桌面出现横向溢出。 */
  height: 100dvh; /* 使用动态视口高度适配浏览器界面变化。 */
  flex-direction: column; /* 从上到下排列标题和详细内容。 */
  border-right: 1px solid var(--line); /* 用细线分隔二级面板和主页面。 */
  background: linear-gradient(180deg, var(--detail-surface-start) 0%, var(--detail-surface-end) 100%); /* 用略亮的青黑渐变区分详情面板和主侧栏。 */
  box-shadow: 22px 0 60px rgba(0, 0, 0, 0.42); /* 用右侧投影表现面板从左边滑出。 */
  opacity: 0; /* 关闭时隐藏面板。 */
  pointer-events: none; /* 关闭时不阻挡番茄钟操作。 */
  transform: translateX(-105%); /* 默认藏在常驻侧栏后方。 */
  transition: left 0.3s ease, opacity 0.24s ease, transform 0.3s ease; /* 同步侧栏宽度和滑出动画。 */
} /* 结束二级面板基础样式。 */

.tools-sidebar.is-open + .detail-panel { /* 展开侧栏时移动二级面板起点。 */
  left: var(--sidebar-expanded-width); /* 确保详细面板始终紧贴侧栏右边。 */
} /* 结束展开侧栏对应的面板位置。 */

.detail-panel.is-open { /* 定义二级面板可见状态。 */
  opacity: 1; /* 恢复面板可见度。 */
  pointer-events: auto; /* 允许用户操作详细设置和列表。 */
  transform: translateX(0); /* 从侧栏后方滑到最终位置。 */
} /* 结束二级面板打开状态。 */

.detail-header { /* 固定二级面板顶部标题和关闭入口。 */
  display: grid; /* 使用三列布局兼容手机返回按钮。 */
  min-height: 64px; /* 与压缩后的侧栏顶部保持对齐。 */
  grid-template-columns: 1fr auto; /* 桌面只显示标题和右侧关闭按钮，避免关闭入口错位。 */
  align-items: center; /* 垂直居中全部标题栏控件。 */
  gap: 0.55rem; /* 压缩标题与关闭控件之间的空白。 */
  padding: 0 0.85rem; /* 减少标题栏横向留白并保留安全边距。 */
  border-bottom: 1px solid var(--line); /* 分隔标题和滚动内容。 */
} /* 结束二级面板标题栏样式。 */

.detail-header h2 { /* 设置当前详细功能名称。 */
  margin-bottom: 0; /* 清除默认间距保持垂直居中。 */
  font-size: 1.26rem; /* 进一步放大详情标题，强化面板视觉起点。 */
  font-weight: 700; /* 提高字重以区别于下方说明和组件名称。 */
  letter-spacing: 0.035em; /* 增加标题字符间距改善可读性。 */
} /* 结束二级面板标题样式。 */

.detail-back, .detail-close { /* 统一手机返回和面板关闭按钮。 */
  display: grid; /* 使用网格精确居中图标。 */
  width: 38px; /* 提供稳定点击宽度。 */
  height: 38px; /* 与宽度一致形成方形控件。 */
  place-items: center; /* 将图标置于中心。 */
  border: 1px solid var(--line); /* 用低对比边框明确范围。 */
  border-radius: 9px; /* 与其他侧栏控件保持统一圆角。 */
  background: rgba(13, 23, 24, 0.82); /* 使用同系青黑表面从详情渐变中轻微抬升按钮。 */
  color: var(--muted); /* 默认保持次要视觉权重。 */
}

.detail-back svg,
.detail-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
} /* 结束详细面板标题按钮样式。 */

.detail-back { /* 桌面端不需要返回主菜单按钮。 */
  display: none; /* 仅在手机替换式导航中启用。 */
} /* 结束桌面端返回按钮状态。 */

.detail-panel.is-nested .detail-header {
  grid-template-columns: 38px minmax(0, 1fr) auto;
}

.detail-panel.is-nested .detail-back {
  display: grid;
}

.detail-close:hover, .detail-back:hover { /* 为标题栏按钮提供一致反馈。 */
  border-color: rgba(66, 215, 229, 0.38); /* 使用青色突出命中区域。 */
  color: var(--accent); /* 将符号提升为强调色。 */
} /* 结束详细面板按钮悬停状态。 */

.detail-content { /* 承载所有功能的详细交互内容。 */
  flex: 1 1 auto; /* 使用标题栏之外的全部高度。 */
  overflow-y: auto; /* 内容较长时只滚动二级面板。 */
  padding: 0.95rem; /* 压缩详情内容四周留白，提高有限宽度中的信息密度。 */
  scrollbar-color: rgba(66, 215, 229, 0.28) transparent; /* 使用低对比青色滚动条。 */
  scrollbar-width: thin; /* 减少滚动条占用内容宽度。 */
} /* 结束二级面板内容区域。 */

.detail-intro { /* 设置详细功能顶部的简短说明。 */
  margin-bottom: 0.8rem; /* 缩短说明与组件之间的距离。 */
  color: var(--muted); /* 使用辅助色避免说明压过功能名称。 */
  font-size: 0.9rem; /* 进一步放大详情说明，提升深色背景上的可读性。 */
  font-weight: 500; /* 略微增强笔画，同时保持辅助信息层级。 */
  letter-spacing: 0.035em; /* 增加小字间距改善拥挤。 */
  line-height: 1.55; /* 在保持可读性的同时压缩多行说明高度。 */
} /* 结束详细面板说明样式。 */

.detail-intro code { /* 突出本地音频目录路径。 */
  color: var(--accent); /* 使用青色帮助用户快速定位路径。 */
} /* 结束详细说明内代码样式。 */

.reserved-sound-list { /* 纵向排列未来专注声音组件。 */
  display: grid; /* 使用网格保证每行组件宽度一致。 */
  gap: 0.3rem; /* 压缩声音项之间的空白。 */
} /* 结束专注声音列表布局。 */

.widget-stack { /* 纵向排列设置组件、保存入口和反馈信息。 */
  display: grid; /* 使用网格让组件占满相同宽度。 */
  gap: 0.25rem; /* 进一步压缩设置组件之间的纵向间距。 */
} /* 结束设置组件堆栈布局。 */

.setting-widget, .tool-widget, .sidebar-action { /* 定义所有侧边栏小组件的共享结构。 */
  display: grid; /* 使用网格固定图标、文字和值或状态的位置。 */
  min-height: 56px; /* 缩小组件总高度，同时高于最低触控命中需求。 */
  grid-template-columns: 34px minmax(0, 1fr) auto; /* 固定图标槽和右侧控件，让中间文字弹性伸缩。 */
  align-items: center; /* 垂直居中组件中的全部内容。 */
  gap: 0.55rem; /* 缩短图标、文字和数值之间的空白。 */
  border: 1px solid transparent; /* 预留边框宽度，悬停时组件不会跳动。 */
  border-radius: 10px; /* 使用参考图中紧凑柔和的组件圆角。 */
  padding: 0.4rem 0.55rem; /* 减少组件内边距并保留清晰命中区域。 */
  background: transparent; /* 默认融入黑色侧栏，突出当前或悬停项目。 */
  color: var(--ink); /* 保证组件名称在黑色背景上清晰。 */
  text-align: left; /* 让组件文字按导航列表方式从左侧阅读。 */
  transition: background 0.2s ease, border-color 0.2s ease; /* 平滑反馈组件悬停和聚焦状态。 */
} /* 结束侧边栏组件共享样式。 */

.setting-widget:hover, .tool-widget:hover { /* 用户指向设置或未来工具时显示组件边界。 */
  border-color: rgba(66, 215, 229, 0.18); /* 用淡青色确认当前组件范围。 */
  background: rgba(66, 215, 229, 0.055); /* 使用参考图式轻微青色选中背景。 */
} /* 结束组件悬停状态。 */

.setting-widget:focus-within { /* 输入框获得焦点时突出整个设置组件。 */
  border-color: var(--accent); /* 用完整青色边界明确当前编辑的设置。 */
  background: rgba(66, 215, 229, 0.07); /* 增加淡青背景强化编辑上下文。 */
} /* 结束设置组件焦点状态。 */

.widget-icon { /* 预留所有未来针对性图标的统一槽位。 */
  position: relative; /* 为内部占位线条提供绝对定位参照。 */
  display: grid; /* 让后期替换的图标可以直接居中。 */
  width: 30px; /* 固定图标槽宽度，确保所有组件文字对齐。 */
  height: 30px; /* 与宽度一致形成稳定方形画布。 */
  place-items: center; /* 将未来 SVG 或图标精确放在槽位中心。 */
  border: 1px dashed rgba(244, 247, 248, 0.24); /* 用虚线明确当前位置等待图标设计。 */
  border-radius: 8px; /* 使用小圆角匹配组件整体风格。 */
  color: var(--accent); /* 让未来图标默认继承品牌青色。 */
} /* 结束通用图标占位槽样式。 */

.widget-icon::after { /* 在空图标槽中显示一个简洁占位点。 */
  width: 5px; /* 使用小尺寸避免占位符被误认为正式图标。 */
  height: 5px; /* 与宽度一致形成圆点。 */
  border-radius: 50%; /* 将占位元素变成圆形。 */
  background: currentColor; /* 继承青色，提示未来图标的视觉位置。 */
  content: ""; /* 创建纯装饰伪元素而无需额外 HTML。 */
  opacity: 0.68; /* 降低强度，明确它只是临时占位。 */
} /* 结束图标占位点样式。 */

.widget-icon--brand { /* 为侧边栏品牌预留更醒目的图标槽。 */
  border-style: solid; /* 用实线区别品牌图标和功能图标占位。 */
  border-color: rgba(66, 215, 229, 0.34); /* 使用淡青边框连接品牌色。 */
  background: rgba(66, 215, 229, 0.08); /* 增加轻微底色形成品牌标记。 */
} /* 结束品牌图标槽样式。 */

.widget-copy { /* 纵向排列组件名称和用途说明。 */
  display: flex; /* 使用弹性布局控制两行文字。 */
  min-width: 0; /* 允许长文字在窄侧栏中正确收缩。 */
  flex-direction: column; /* 把名称放在说明上方。 */
  gap: 0.18rem; /* 保持两行信息关联但可区分。 */
} /* 结束组件文字区域样式。 */

.widget-copy strong { /* 设置组件的主要名称。 */
  overflow: hidden; /* 防止长名称撑破组件网格。 */
  font-size: 0.96rem; /* 进一步放大组件主要名称，让设置项更醒目。 */
  font-weight: 700; /* 加粗主要名称以建立明确的信息层级。 */
  text-overflow: ellipsis; /* 空间不足时用省略号提示完整内容。 */
  white-space: nowrap; /* 保持列表项高度稳定。 */
} /* 结束组件名称样式。 */

.widget-copy small { /* 设置组件用途或状态说明。 */
  overflow: hidden; /* 防止辅助文字撑开组件。 */
  color: var(--muted); /* 使用灰色降低说明信息权重。 */
  font-size: 0.75rem; /* 稍微放大用途说明并保持紧凑层级。 */
  font-weight: 500; /* 稍微增强字重改善灰色文字的清晰度。 */
  text-overflow: ellipsis; /* 空间不足时安全截断。 */
  white-space: nowrap; /* 防止说明换行改变列表节奏。 */
} /* 结束组件辅助文字样式。 */

.widget-help-marquee {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.widget-help-marquee > span {
  display: inline-block;
  min-width: max-content;
  transform: translateX(0);
  will-change: transform;
}

.widget-help-marquee.is-overflowing > span {
  animation: widget-help-marquee var(--help-marquee-duration) ease-in-out 0.7s infinite alternate;
}

.widget-help-marquee:hover.is-overflowing > span {
  animation-play-state: paused;
}

@keyframes widget-help-marquee {
  to {
    transform: translateX(calc(-1 * var(--help-marquee-distance)));
  }
}

.widget-value { /* 组合右侧分钟输入框和单位。 */
  display: flex; /* 横向排列数字和单位。 */
  align-items: center; /* 垂直对齐输入值和 min。 */
  gap: 0.32rem; /* 给数字和单位保留最小间距。 */
} /* 结束组件值区域布局。 */

.widget-value input { /* 定义组件右侧的紧凑数字输入框。 */
  width: 54px; /* 固定宽度以容纳三位分钟数并保持列表对齐。 */
  border: 1px solid var(--line); /* 显示可编辑边界但保持低对比。 */
  border-radius: 7px; /* 使用小圆角匹配组件密度。 */
  padding: 0.45rem 0.35rem; /* 提供可操作高度并减少横向占用。 */
  background: #050606; /* 使用纯黑输入背景融入侧栏。 */
  color: var(--ink); /* 保证分钟数字清晰。 */
  font-family: "DM Mono", monospace; /* 使用等宽数字稳定不同值的视觉宽度。 */
  font-size: 0.75rem; /* 使用紧凑字号适应右侧控件区域。 */
  text-align: center; /* 让数字在固定输入框内居中。 */
} /* 结束组件分钟输入框样式。 */

.widget-value small { /* 设置输入框旁的分钟单位。 */
  color: var(--muted); /* 弱化单位以突出实际数值。 */
  font-size: 0.58rem; /* 使用极简小字号减少横向占用。 */
} /* 结束分钟单位样式。 */

.sidebar-action { /* 定义设置列表中的保存操作组件。 */
  width: 100%; /* 占满组件列表宽度，形成明确操作入口。 */
  grid-template-columns: 34px 1fr; /* 保留图标槽并让按钮文字使用剩余空间。 */
  margin-top: 0.15rem; /* 与两个设置组件稍微分开。 */
  border-color: rgba(66, 215, 229, 0.28); /* 使用青色边框强调这是可执行操作。 */
  background: var(--accent); /* 采用参考图中的明亮青色主要按钮。 */
  color: var(--accent-ink); /* 使用深色文字保证青色背景上的对比度。 */
  font-size: 0.76rem; /* 保持按钮文字与组件名称同一尺度。 */
  font-weight: 700; /* 加粗说明这是保存设置的主要操作。 */
} /* 结束侧边栏保存操作样式。 */

.sidebar-action .widget-icon { /* 调整青色按钮内的图标占位槽。 */
  border-color: rgba(2, 19, 21, 0.28); /* 使用深色虚线确保浅色按钮上可见。 */
  color: var(--accent-ink); /* 让占位点与按钮文字使用同一深色。 */
} /* 结束保存按钮图标槽样式。 */

.sidebar-action:hover { /* 为保存操作提供轻微悬停反馈。 */
  background: #60e1ec; /* 提高青色亮度表示按钮已被指向。 */
} /* 结束保存操作悬停状态。 */

.tool-widget--placeholder { /* 弱化尚未开放的未来功能组件。 */
  color: #c5cbce; /* 保留可读名称但低于可操作设置。 */
  cursor: default; /* 不显示手型，避免用户误以为当前可以点击。 */
} /* 结束未来工具占位状态。 */

.widget-badge { /* 设置未来功能右侧的小型状态徽标。 */
  border: 1px solid rgba(66, 215, 229, 0.2); /* 使用淡青边框连接品牌色。 */
  border-radius: 5px; /* 使用紧凑圆角匹配参考图的小徽标。 */
  padding: 0.18rem 0.3rem; /* 给短状态文字留出清晰空间。 */
  background: rgba(66, 215, 229, 0.07); /* 以极淡青色区分普通辅助文字。 */
  color: var(--accent); /* 使用青色让 Soon 状态易于识别。 */
  font-family: "DM Mono", monospace; /* 使用等宽字体强化系统状态感。 */
  font-size: 0.5rem; /* 保持徽标小巧，不抢占组件名称。 */
  text-transform: uppercase; /* 统一状态呈现形式。 */
} /* 结束未来功能徽标样式。 */

.settings-status { /* 为保存反馈预留稳定空间。 */
  min-height: 1rem; /* 即使没有文字也保留高度，防止下方组件跳动。 */
  margin: 0.35rem 0 0; /* 与保存按钮分开并保持紧凑。 */
  color: var(--muted); /* 使用次要颜色展示普通成功反馈。 */
  font-size: 0.62rem; /* 保持状态提示为辅助信息。 */
  text-align: center; /* 与占满宽度的保存组件保持对齐。 */
} /* 结束设置状态提示样式。 */

.settings-status.is-error { /* 为无效时间输入提供明显状态。 */
  color: var(--danger); /* 使用错误色帮助用户快速定位问题。 */
} /* 结束设置错误状态。 */

.completion-sound-settings { /* 在番茄钟二级面板内建立独立的结束提示音设置分区。 */
  margin-top: 1rem; /* 与时长保存反馈保持清晰但紧凑的间距。 */
  padding-top: 1rem; /* 在分隔线下为新分区标题保留呼吸空间。 */
  border-top: 1px solid var(--line); /* 明确区分时长设置和声音设置。 */
} /* 结束提示音设置分区样式。 */

.settings-section-heading { /* 组织提示音设置标题和播放时机说明。 */
  margin-bottom: 0.72rem; /* 让标题说明与当前声音卡片保持适度间距。 */
} /* 结束设置分区标题容器。 */

.settings-section-heading h3 { /* 突出二级面板内的结束提示音小标题。 */
  margin: 0 0 0.18rem; /* 紧密连接标题和辅助说明。 */
  color: var(--ink); /* 使用主要文字色建立分区层级。 */
  font-size: 0.92rem; /* 保持低于面板总标题但清晰可扫视。 */
  letter-spacing: 0.02em; /* 轻微增加字距提升小标题精致度。 */
} /* 结束提示音分区标题样式。 */

.settings-section-heading p { /* 说明结束提示音在音乐渐出后的播放顺序。 */
  margin: 0; /* 清除段落默认外边距保持紧凑。 */
  color: var(--muted); /* 降低说明视觉权重。 */
  font-size: 0.72rem; /* 在窄面板中保持短说明单行或自然换行。 */
  line-height: 1.45; /* 多行时仍保持可读。 */
} /* 结束提示音分区说明样式。 */

.completion-sound-current { /* 显示当前提示音名称和试听操作。 */
  display: grid; /* 固定图标和按钮，让名称使用中间剩余空间。 */
  min-height: 62px; /* 提供舒适触控高度并容纳两行文字。 */
  grid-template-columns: 34px minmax(0, 1fr) auto; /* 保持与现有设置组件相同的文字起点。 */
  align-items: center; /* 垂直居中三个区域。 */
  gap: 0.55rem; /* 紧凑分隔图标、文件名和操作。 */
  border: 1px solid rgba(66, 215, 229, 0.18); /* 用淡青边框标识当前生效的提示音。 */
  border-radius: 10px; /* 匹配侧栏现有设置组件圆角。 */
  padding: 0.48rem 0.55rem; /* 保留清晰边缘空间且适配窄面板。 */
  background: rgba(66, 215, 229, 0.055); /* 轻微青色底强化当前选择状态。 */
} /* 结束当前提示音卡片样式。 */

.completion-sound-icon { /* 使用正式铃铛图标区别现有占位图标槽。 */
  display: grid; /* 将 SVG 居中到固定画布。 */
  width: 30px; /* 与 widget-icon 的占位宽度一致。 */
  height: 30px; /* 保持方形图标区域。 */
  place-items: center; /* 精确居中铃铛线条。 */
  border: 1px solid rgba(66, 215, 229, 0.28); /* 以淡青边界建立品牌关联。 */
  border-radius: 8px; /* 匹配其他侧栏小图标。 */
  color: var(--accent); /* 使用强调色绘制图标。 */
} /* 结束提示音图标容器。 */

.completion-sound-icon svg { /* 约束铃铛 SVG 的视觉尺寸和线性风格。 */
  width: 18px; /* 在三十像素容器内保留均匀留白。 */
  fill: none; /* 使用线性而不是实心图标。 */
  stroke: currentColor; /* 继承容器强调色。 */
  stroke-linecap: round; /* 柔化线条端点。 */
  stroke-linejoin: round; /* 柔化转折。 */
  stroke-width: 1.7; /* 保持与菜单图标接近的线宽。 */
} /* 结束提示音铃铛 SVG 样式。 */

.sound-preview-button { /* 在当前声音卡片内提供紧凑试听入口。 */
  border: 1px solid rgba(66, 215, 229, 0.3); /* 用青色边界说明按钮可操作。 */
  border-radius: 7px; /* 小圆角适配卡片内部尺寸。 */
  padding: 0.42rem 0.48rem; /* 提供清晰命中区域且不挤压文件名。 */
  background: rgba(66, 215, 229, 0.09); /* 以淡青底区分普通文字。 */
  color: var(--accent); /* 强调试听操作。 */
  font-size: 0.65rem; /* 控制按钮在窄侧栏中的宽度。 */
  font-weight: 700; /* 保证小字号仍然清晰。 */
} /* 结束提示音试听按钮样式。 */

.sound-preview-button:hover { /* 为鼠标试听操作提供直接反馈。 */
  background: rgba(66, 215, 229, 0.16); /* 悬停时稍微提升背景亮度。 */
} /* 结束试听按钮悬停样式。 */

.completion-sound-actions { /* 并排组织更换和恢复默认两个次要操作。 */
  display: grid; /* 使用等宽网格保持按钮整齐。 */
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 在面板宽度内平均分配空间。 */
  gap: 0.38rem; /* 保留足以区分两个按钮的间隔。 */
  margin-top: 0.45rem; /* 与当前声音卡片轻微分离。 */
} /* 结束提示音操作按钮布局。 */

.sound-setting-button { /* 统一原生按钮和文件输入标签的外观。 */
  display: grid; /* 让文字在按钮区域精确居中。 */
  min-height: 38px; /* 提供可靠触控命中高度。 */
  place-items: center; /* 水平和垂直居中操作名称。 */
  border: 1px solid var(--line); /* 使用低对比边界保持次要层级。 */
  border-radius: 8px; /* 匹配侧栏其他小控件。 */
  padding: 0.42rem 0.5rem; /* 为较长文案保留内部空间。 */
  background: rgba(13, 23, 24, 0.72); /* 从面板背景轻微抬升操作区域。 */
  color: var(--ink); /* 保证操作文字清晰。 */
  font-size: 0.66rem; /* 让两个英文操作在窄宽度中稳定显示。 */
  font-weight: 650; /* 稍微增强次要按钮的识别度。 */
  line-height: 1.2; /* 控制可能换行时的按钮高度。 */
  text-align: center; /* 多行文案保持居中。 */
} /* 结束提示音次要按钮样式。 */

label.sound-setting-button { /* 文件输入使用标签触发原生选择器。 */
  cursor: pointer; /* 明确整块区域可点击。 */
} /* 结束文件选择标签交互样式。 */

.sound-setting-button:hover:not(:disabled), label.sound-setting-button:hover { /* 反馈可用的更换和恢复操作。 */
  border-color: rgba(66, 215, 229, 0.38); /* 悬停时提升青色边界。 */
  color: var(--accent); /* 将操作名称切换为强调色。 */
} /* 结束提示音操作悬停样式。 */

label.sound-setting-button:has(input:focus-visible) { /* 把隐藏文件输入的键盘焦点显示在可见标签边界。 */
  outline: 2px solid var(--accent); /* 与项目其他键盘焦点保持一致。 */
  outline-offset: 2px; /* 避免描边与按钮边界重叠。 */
} /* 结束文件选择键盘焦点样式。 */

.sound-setting-button:disabled, label.sound-setting-button:has(input:disabled) { /* 表示恢复无意义或文件正在保存。 */
  cursor: not-allowed; /* 避免暗示禁用操作仍可点击。 */
  opacity: 0.42; /* 视觉降低不可用控件权重。 */
} /* 结束提示音操作禁用样式。 */

.completion-volume { /* 独立组织提示音音量标题、数值和滑块。 */
  display: grid; /* 将标题行和滑块纵向排列。 */
  gap: 0.48rem; /* 保留足够空间便于触控滑块。 */
  margin-top: 0.48rem; /* 与文件操作保持一致节奏。 */
  border: 1px solid transparent; /* 聚焦时显示边界且不造成布局跳动。 */
  border-radius: 9px; /* 匹配设置组件形状。 */
  padding: 0.58rem 0.62rem 0.62rem; /* 为滑块两端和文字保留空间。 */
  background: rgba(255, 255, 255, 0.025); /* 用极淡表面区分独立音量区域。 */
} /* 结束提示音音量容器。 */

.completion-volume:focus-within { /* 键盘或指针操作滑块时突出当前设置。 */
  border-color: rgba(66, 215, 229, 0.45); /* 使用柔和青色避免过度抢眼。 */
} /* 结束提示音音量聚焦样式。 */

.completion-volume-heading { /* 并排显示音量名称和百分比。 */
  display: flex; /* 将当前百分比推到行尾。 */
  align-items: baseline; /* 对齐不同字体的文字基线。 */
  justify-content: space-between; /* 在有限宽度中明确分离名称和值。 */
  gap: 0.75rem; /* 避免文字相碰。 */
} /* 结束提示音音量标题行。 */

.completion-volume-heading strong { /* 设置音量组件的主要名称。 */
  color: var(--ink); /* 保持与其他设置名称一致。 */
  font-size: 0.72rem; /* 使用紧凑但可读的字号。 */
} /* 结束提示音音量名称样式。 */

.completion-volume-heading output { /* 显示提示音独立音量百分比。 */
  color: var(--accent); /* 用强调色突出当前数值。 */
  font-family: "DM Mono", monospace; /* 等宽数字避免拖动时位置跳动。 */
  font-size: 0.68rem; /* 保持辅助值层级。 */
} /* 结束提示音音量输出样式。 */

.completion-volume input { /* 让音量滑块占满分区宽度。 */
  width: 100%; /* 扩大可用拖动范围。 */
  accent-color: var(--accent); /* 使用品牌青色显示已选择比例。 */
} /* 结束提示音音量滑块样式。 */

.completion-sound-status { /* 为自动保存和试听状态保持稳定空间。 */
  margin-top: 0.42rem; /* 与音量区域分开。 */
} /* 结束提示音状态间距。 */

.player-dock { /* 将音乐播放器固定为侧边栏底部区域。 */
  flex: 0 0 auto; /* 防止未来工具增加时播放器被压缩消失。 */
  overflow: hidden; /* 收起侧栏时裁切歌名和音量，只留下核心控制。 */
  padding: 0.55rem 0.7rem 0.65rem; /* 压缩窄图标栏播放器上下留白并保留按钮安全边距。 */
  border-top: 1px solid var(--line); /* 明确播放器与上方工具内容的边界。 */
  background: var(--panel-deep); /* 用更深背景将持续可用的播放器固定在视觉底部。 */
  box-shadow: 0 -18px 38px rgba(0, 0, 0, 0.16); /* 向上投影强化播放器固定层级。 */
  transition: padding 0.3s ease; /* 让播放器内边距随侧栏展开自然变化。 */
} /* 结束底部播放器容器样式。 */

.tools-sidebar.is-open .player-dock, .tools-sidebar.is-fullscreen-open .player-dock { /* 侧栏展开后为完整播放器提供舒适空间。 */
  padding: 0.72rem 0.9rem 0.78rem; /* 压缩完整播放器边距，让底部区域更紧凑。 */
} /* 结束展开状态播放器间距。 */

.player-expanded-only { /* 统一控制只在完整播放器中出现的信息。 */
  max-height: 0; /* 收起时不占据图标栏的垂直空间。 */
  overflow: hidden; /* 防止文字在宽度动画期间漏出窄栏。 */
  opacity: 0; /* 视觉上隐藏歌名和音量。 */
  pointer-events: none; /* 避免不可见控件仍截获点击或键盘操作。 */
  transform: translateX(-8px); /* 让内容随侧栏展开轻微滑入。 */
  transition: max-height 0.3s ease, opacity 0.18s ease, transform 0.25s ease; /* 平滑完成完整播放器显隐。 */
} /* 结束展开专属内容默认状态。 */

.tools-sidebar.is-open .player-expanded-only, .tools-sidebar.is-fullscreen-open .player-expanded-only { /* 展开侧栏后恢复播放器详细信息。 */
  max-height: 150px; /* 提供足够高度显示曲目信息和音量控件。 */
  opacity: 1; /* 恢复内容可见度。 */
  pointer-events: auto; /* 允许点击歌名和调节音量。 */
  transform: translateX(0); /* 将内容移动到最终位置。 */
} /* 结束展开播放器详细信息状态。 */

.player-track-summary { /* 将当前曲目摘要组织成独立信息块。 */
  width: 100%; /* 使用完整播放器宽度容纳长歌名。 */
} /* 结束曲目摘要宽度。 */

.now-playing-heading { /* 并排显示播放标签和曲目序号。 */
  display: flex; /* 让两项信息共享一行以节省垂直空间。 */
  align-items: baseline; /* 按文字基线对齐不同字号内容。 */
  justify-content: space-between; /* 将曲目序号推到播放器右侧。 */
  gap: 1rem; /* 防止长标签与序号发生碰撞。 */
} /* 结束播放标题行布局。 */

.now-playing-heading .eyebrow { /* 调整播放器分类标签的紧凑间距。 */
  margin-bottom: 0.3rem; /* 拉近标签与歌曲标题以减少垂直空白。 */
  font-size: 0.8rem; /* 单独放大侧栏播放器标签，不影响中央计时模式。 */
  font-weight: 600; /* 增强大写标签在底部区域的可见度。 */
} /* 结束播放器分类标签规则。 */

.track-position { /* 设置当前曲目序号的辅助样式。 */
  color: var(--muted); /* 降低序号权重，让歌曲名称更突出。 */
  font-family: "DM Mono", monospace; /* 使用等宽数字避免列表长度变化导致跳动。 */
  font-size: 0.78rem; /* 放大曲目序号，使其与播放器其他文字更协调。 */
  font-weight: 500; /* 提高等宽数字的清晰度。 */
} /* 结束曲目位置样式。 */

.track-title { /* 显示当前曲目名称并处理过长文本。 */
  display: block; /* 让按钮使用播放器完整行宽。 */
  width: 100%; /* 扩大歌名点击区域并支持省略号。 */
  overflow: hidden; /* 隐藏超过侧边栏宽度的标题部分。 */
  border: 0; /* 移除按钮默认边框，使其表现为可点击歌名。 */
  padding: 0; /* 清除默认按钮内边距，保持与其他文字左边界一致。 */
  margin-bottom: 0.14rem; /* 拉近标题与播放状态，使播放器信息更紧凑。 */
  background: transparent; /* 让歌名按钮融入播放器底座。 */
  color: var(--ink); /* 使用主文字色突出当前歌曲。 */
  font-size: 1.3rem; /* 进一步突出当前歌曲名称。 */
  font-weight: 600; /* 增强歌曲标题但不压过侧栏品牌。 */
  letter-spacing: 0.015em; /* 适度拉开歌名字符，改善用户指出的拥挤感。 */
  line-height: 1.24; /* 在保持清晰的同时降低歌曲标题行高。 */
  text-align: left; /* 保持歌名从侧栏左侧自然阅读。 */
  text-overflow: ellipsis; /* 用省略号明确表示标题被截断。 */
  white-space: nowrap; /* 防止长歌名换行挤压播放器控制区域。 */
} /* 结束当前曲目标题样式。 */

.track-title:hover { /* 提示歌名可以打开完整播放列表。 */
  color: var(--accent); /* 使用青色反馈点击入口。 */
} /* 结束歌名悬停状态。 */

.track-status { /* 显示播放器当前状态或错误信息。 */
  min-height: 1.1rem; /* 状态文字变化时保持播放器其他内容位置稳定。 */
  margin: 0 0 0.5rem; /* 缩短状态与控制按钮之间的空白。 */
  color: var(--muted); /* 使用次要颜色避免状态压过歌曲名称。 */
  font-size: 0.8rem; /* 放大播放状态，提升底部信息可读性。 */
  font-weight: 500; /* 稍微加粗灰色状态文字。 */
} /* 结束曲目状态样式。 */

.player-controls { /* 横向排列切歌、播放和音量控件。 */
  display: flex; /* 使用弹性布局支持音量滑块占用剩余空间。 */
  align-items: center; /* 垂直居中不同尺寸的圆形按钮和滑块。 */
  flex-direction: column; /* 收起图标栏时纵向保留上一首、暂停和下一首。 */
  gap: 0.42rem; /* 在窄栏中分开三个点击区域。 */
  margin: 0; /* 移除旧播放列表所需的底部间距。 */
} /* 结束播放器控制布局。 */

.tools-sidebar.is-open .player-controls, .tools-sidebar.is-fullscreen-open .player-controls { /* 展开侧栏后采用常见的横向播放器布局。 */
  flex-direction: row; /* 将切歌和播放按钮排列在同一行。 */
  justify-content: center; /* 让控制组在播放器窗口中居中。 */
  gap: 0.55rem; /* 压缩展开状态按钮间距并继续保持易点击。 */
  margin: 0.5rem 0 0.55rem; /* 缩短控制组与歌曲信息、音量滑块之间的空白。 */
} /* 结束展开播放器控制布局。 */

.icon-button, .play-button { /* 定义播放器圆形控制按钮的共享外观。 */
  display: inline-grid; /* 使用网格精确居中播放符号。 */
  flex: 0 0 auto; /* 防止音量滑块挤压圆形按钮。 */
  width: 40px; /* 提供适合常驻图标栏的可靠点击宽度。 */
  height: 40px; /* 与宽度一致形成圆形按钮。 */
  place-items: center; /* 将按钮符号水平和垂直居中。 */
  border: 1px solid var(--line); /* 用细边框标识按钮范围。 */
  border-radius: 50%; /* 创建音乐控件常见的圆形轮廓。 */
  background: rgba(8, 11, 22, 0.48); /* 稍微抬升按钮以区别播放器背景。 */
  color: var(--ink); /* 保证控制符号清晰可见。 */
  transition: transform 0.2s ease, border-color 0.2s ease; /* 平滑表达悬停和按压反馈。 */
} /* 结束圆形控制按钮共享样式。 */

.play-button { /* 强化最常使用的播放暂停按钮。 */
  width: 42px; /* 在收起栏中稍大于切歌按钮但仍能完整容纳。 */
  height: 42px; /* 保持圆形并扩大主要操作点击区域。 */
  border: 0; /* 移除边框，让强调色填充更完整。 */
  background: var(--accent); /* 用强调色突出播放入口。 */
  color: var(--accent-ink); /* 使用深色符号保证浅色背景对比度。 */
} /* 结束播放按钮特有样式。 */

.icon-button:hover, .play-button:hover { /* 为播放器按钮提供一致悬停反馈。 */
  transform: scale(1.05); /* 轻微放大表示当前按钮已被指向。 */
  border-color: rgba(66, 215, 229, 0.38); /* 使用青色提升次要按钮边框反馈。 */
} /* 结束播放器按钮悬停状态。 */

.icon-button:disabled, .play-button:disabled { /* 明确无可用曲目时按钮不可操作。 */
  cursor: not-allowed; /* 用光标反馈当前操作被禁用。 */
  opacity: 0.38; /* 降低按钮可见度以区别可用状态。 */
  transform: none; /* 禁止禁用按钮仍响应悬停动画。 */
} /* 结束播放器按钮禁用状态。 */

.volume-control { /* 组织音量图标和滑块并占用剩余空间。 */
  display: flex; /* 横向排列图标与滑块。 */
  min-width: 0; /* 允许弹性项目在窄侧边栏中正确收缩。 */
  flex: 1 1 auto; /* 使用按钮之外的剩余行宽。 */
  align-items: center; /* 垂直对齐图标与浏览器原生滑块。 */
  gap: 0.45rem; /* 避免图标紧贴滑块轨道。 */
  margin-left: 0.15rem; /* 与切歌按钮组增加轻微分区。 */
  color: var(--muted); /* 弱化音量图标，保持播放按钮为主焦点。 */
} /* 结束音量控制布局。 */

.volume-control input { /* 设置音量滑块尺寸和主题色。 */
  width: 100%; /* 填满音量控制剩余宽度并响应侧边栏尺寸。 */
  min-width: 50px; /* 防止极窄屏下滑块完全消失。 */
  accent-color: var(--accent); /* 使用强调色标识当前音量值。 */
} /* 结束音量滑块样式。 */

.playlist-heading { /* 组织播放列表标题和刷新入口。 */
  display: flex; /* 将标题和按钮放在同一水平行。 */
  align-items: center; /* 垂直对齐两种不同字号文字。 */
  justify-content: space-between; /* 把刷新按钮放到列表右侧。 */
  padding-top: 0.25rem; /* 与说明文字保持轻量分区而不浪费面板空间。 */
} /* 结束播放列表标题布局。 */

.playlist-heading h3 { /* 设置播放列表的小型标题。 */
  margin-bottom: 0; /* 避免默认间距拉高标题行。 */
  font-size: 0.72rem; /* 使用辅助字号保持层级低于歌曲名称。 */
  letter-spacing: 0.12em; /* 增大字距提高小号大写标题清晰度。 */
  text-transform: uppercase; /* 统一为功能分区标签风格。 */
} /* 结束播放列表标题样式。 */

.refresh-button { /* 将刷新设计为轻量文字操作。 */
  border: 0; /* 移除边框避免与播放器按钮混淆。 */
  padding: 0.3rem; /* 保留足够点击区域。 */
  background: transparent; /* 让刷新入口保持次要层级。 */
  color: var(--muted); /* 默认弱化文字，减少视觉干扰。 */
  font-size: 0.7rem; /* 使用与列表标题相近的紧凑字号。 */
} /* 结束刷新按钮样式。 */

.refresh-button:hover { /* 鼠标指向刷新按钮时增强文字。 */
  color: var(--ink); /* 提升对比度确认可交互状态。 */
} /* 结束刷新按钮悬停状态。 */

.refresh-button:disabled { /* 表示播放列表正在加载。 */
  cursor: wait; /* 使用等待光标提示异步扫描尚未完成。 */
  opacity: 0.55; /* 降低按钮强度防止重复点击。 */
} /* 结束刷新按钮禁用状态。 */

.track-list { /* 创建内部可滚动的歌曲列表。 */
  overflow: visible; /* 让二级面板统一负责滚动，避免列表出现嵌套滚动条。 */
  margin: 0.55rem 0 0; /* 与列表标题分开，并移除其他默认外边距。 */
  padding: 0; /* 清除列表默认缩进以使用完整宽度。 */
  list-style: none; /* 移除默认圆点，改由自定义序号显示顺序。 */
} /* 结束曲目列表容器样式。 */

.track-list button { /* 将每首歌曲渲染为整行可点击按钮。 */
  display: flex; /* 横向排列曲目序号和名称。 */
  width: 100%; /* 让整行都可点击，降低选择难度。 */
  align-items: center; /* 垂直对齐序号与曲名。 */
  gap: 0.65rem; /* 分隔序号和标题，避免视觉粘连。 */
  overflow: hidden; /* 为曲名省略号提供正确的裁切环境。 */
  border: 0; /* 移除浏览器默认按钮边框。 */
  border-radius: 9px; /* 使用轻圆角表现独立列表项。 */
  padding: 0.55rem 0.62rem; /* 提供适合紧凑列表的点击高度。 */
  background: transparent; /* 默认与播放器底座融合。 */
  color: var(--muted); /* 弱化未选曲目，突出当前项。 */
  text-align: left; /* 保持曲名从左侧自然阅读。 */
  transition: background 0.2s ease, color 0.2s ease; /* 平滑表达悬停和选中变化。 */
} /* 结束曲目按钮样式。 */

.track-list button:hover { /* 为可选择曲目提供悬停反馈。 */
  background: rgba(66, 215, 229, 0.07); /* 使用淡青色标识当前指向行。 */
  color: var(--ink); /* 提升曲名对比度方便确认目标。 */
} /* 结束曲目按钮悬停状态。 */

.track-list button[aria-current="true"] { /* 使用语义属性显示当前选中曲目。 */
  background: rgba(66, 215, 229, 0.12); /* 用更明显青色底区分正在播放或待播曲目。 */
  color: var(--ink); /* 提高当前曲目的文字对比度。 */
} /* 结束当前曲目状态样式。 */

.track-number { /* 固定曲目序号的宽度和字体。 */
  flex: 0 0 1.45rem; /* 保持所有曲名从相同位置开始。 */
  font-family: "DM Mono", monospace; /* 使用等宽数字让序号纵向整齐。 */
  font-size: 0.62rem; /* 让序号作为辅助信息而非标题。 */
  opacity: 0.72; /* 进一步降低序号的视觉权重。 */
} /* 结束曲目序号样式。 */

.track-name { /* 控制歌曲名称在有限宽度内安全显示。 */
  overflow: hidden; /* 隐藏超过按钮宽度的文本。 */
  min-width: 0; /* 允许弹性项目缩小，否则省略号无法生效。 */
  font-size: 0.76rem; /* 使用适合紧凑列表的可读字号。 */
  text-overflow: ellipsis; /* 以省略号提示还有未显示的标题内容。 */
  white-space: nowrap; /* 保持每首歌只占一行，稳定列表高度。 */
} /* 结束歌曲名称样式。 */

.playlist-empty { /* 定义没有音乐文件时的引导信息。 */
  margin: 0.65rem 0 0; /* 与列表标题保持间距并移除默认底边距。 */
  color: var(--muted); /* 使用辅助颜色，避免空状态显得像错误。 */
  font-size: 0.72rem; /* 保持提示紧凑。 */
  line-height: 1.5; /* 提高路径与说明混排时的阅读性。 */
} /* 结束播放列表空状态样式。 */

.playlist-empty code { /* 突出用户需要操作的音频目录路径。 */
  color: var(--accent); /* 用强调色让路径便于快速定位。 */
} /* 结束空状态路径样式。 */

.sr-only { /* 提供只供屏幕阅读器读取的辅助文字。 */
  position: absolute; /* 将内容移出普通布局，避免占用可见空间。 */
  overflow: hidden; /* 裁切文字，确保视觉上不可见。 */
  width: 1px; /* 保留可访问节点但缩小到不可察觉尺寸。 */
  height: 1px; /* 与宽度共同形成最小可访问区域。 */
  margin: -1px; /* 将极小区域移出可见像素范围。 */
  padding: 0; /* 清除内边距，防止区域意外变大。 */
  border: 0; /* 移除可能暴露元素位置的边框。 */
  clip: rect(0, 0, 0, 0); /* 兼容旧浏览器的视觉裁切方式。 */
  white-space: nowrap; /* 防止隐藏文字换行后扩大裁切区域。 */
} /* 结束屏幕阅读器专用样式。 */

@media (max-width: 620px) { /* 针对窄屏调整核心操作和侧边栏密度。 */
  .landing-shell { /* 将移动端首页改为自然高度的单栏结构。 */
    grid-template-rows: minmax(70vh, 1fr) auto; /* 给中央标题保留主要视口空间并让页脚自然接续。 */
    padding: 1.25rem; /* 缩小移动端页面边距以容纳完整页脚。 */
  } /* 结束移动端首页外壳规则。 */

  .landing-content { /* 压缩移动端中央内容的上下间距。 */
    padding: 4rem 0 2.5rem; /* 保持标题居中感并避免与页脚拥挤。 */
  } /* 结束移动端首页内容规则。 */

  .landing-footer { /* 将移动端页脚从三栏改为纵向信息流。 */
    grid-template-columns: 1fr; /* 让每组信息使用完整可用宽度。 */
    align-items: start; /* 按左侧起点对齐所有页脚内容。 */
    gap: 1.2rem; /* 为纵向信息组提供稳定间距。 */
  } /* 结束移动端首页页脚规则。 */

  .footer-links { /* 允许页脚链接在窄屏自然换行。 */
    flex-wrap: wrap; /* 防止三个项目造成横向溢出。 */
    justify-content: flex-start; /* 与页脚其他文字保持左对齐。 */
    white-space: normal; /* 恢复换行能力以适配小屏。 */
  } /* 结束移动端页脚链接规则。 */

  .footer-meta { /* 把移动端版权信息对齐到左侧。 */
    justify-self: start; /* 取消桌面端右对齐位置。 */
    text-align: left; /* 让文字阅读方向与其他页脚内容一致。 */
  } /* 结束移动端版权信息规则。 */

  .focus-app { /* 缩小移动端专注页面的左右安全边距。 */
    padding-inline: 1rem; /* 给大号时间数字争取更多可用宽度。 */
  } /* 结束移动端专注容器规则。 */

  .mobile-sidebar-trigger { /* 手机端仅保留左上侧栏呼出按钮。 */
    display: grid; /* 启用手机端按钮并精确居中菜单符号。 */
  } /* 结束移动端工具按钮规则。 */

  .timer-controls { /* 让移动端按钮在极窄屏仍能适配。 */
    width: min(300px, 100%); /* 限制最大宽度并允许随视口收缩。 */
  } /* 结束移动端计时按钮组规则。 */

  .timer-controls .button { /* 平均分配两个按钮的可用宽度。 */
    min-width: 0; /* 移除桌面最低宽度避免小屏溢出。 */
    flex: 1 1 0; /* 让 Start 和 Reset 保持相同宽度。 */
  } /* 结束移动端计时按钮规则。 */

  .sidebar-backdrop { /* 手机端启用背景遮罩连接抽屉状态。 */
    display: block; /* 创建可动画和可点击的遮罩层。 */
  } /* 结束手机端遮罩启用规则。 */

  .sidebar-backdrop.is-visible { /* 手机侧栏或详细面板打开时显示遮罩。 */
    opacity: 1; /* 压暗番茄钟背景突出当前工具界面。 */
    pointer-events: auto; /* 允许点击背景关闭整个工具界面。 */
  } /* 结束手机端遮罩可见状态。 */

  .tools-sidebar { /* 手机端完全隐藏常驻图标栏并改为抽屉。 */
    width: min(86vw, 320px); /* 保留少量背景提示侧栏可以关闭。 */
    transform: translateX(-102%); /* 关闭时将整个侧栏移出屏幕，不残留图标条。 */
  } /* 结束移动端侧边栏宽度规则。 */

  .tools-sidebar.is-open { /* 手机端打开侧栏时显示完整工具菜单。 */
    width: min(86vw, 320px); /* 禁止桌面展开宽度覆盖手机抽屉尺寸。 */
    transform: translateX(0); /* 从屏幕左边滑入工具菜单。 */
  } /* 结束手机端侧栏打开状态。 */

  .tools-sidebar.is-detail-open { /* 打开二级功能后让主菜单向左退出。 */
    transform: translateX(-102%); /* 实现详情替换菜单而非浮层覆盖的效果。 */
  } /* 结束手机端主菜单退出状态。 */

  .sidebar-brand, .sidebar-item-name { /* 手机抽屉始终显示品牌和功能名称。 */
    opacity: 1; /* 取消桌面收起状态的隐藏规则。 */
    transform: translateX(0); /* 直接放到正常阅读位置。 */
  } /* 结束手机菜单文字可见状态。 */

  .sidebar-brand { /* 根据手机抽屉宽度调整品牌组合。 */
    min-width: 205px; /* 防止动画或窄屏造成两行品牌文字错位。 */
  } /* 结束手机品牌尺寸。 */

  .sidebar-item-name { /* 允许名称使用手机抽屉剩余宽度。 */
    min-width: 160px; /* 保持功能名称不换行并与图标分开。 */
  } /* 结束手机功能名称尺寸。 */

  .detail-panel, .tools-sidebar.is-open + .detail-panel { /* 手机详情与菜单使用同一滑入位置。 */
    left: 0; /* 让详情从屏幕左边进入并替代主菜单。 */
    width: min(86vw, 320px); /* 与手机工具抽屉保持完全相同尺寸。 */
    transform: translateX(-102%); /* 关闭时隐藏整个详情面板。 */
  } /* 结束手机详情面板基础位置。 */

  .detail-panel.is-open, .tools-sidebar.is-open + .detail-panel.is-open { /* 手机端显示当前详细功能并覆盖桌面相邻定位。 */
    transform: translateX(0); /* 将详情滑到原工具菜单的位置。 */
  } /* 结束手机详情打开状态。 */

  .detail-back { /* 手机详情需要返回工具菜单的明确入口。 */
    display: grid; /* 恢复返回按钮并保持符号居中。 */
  } /* 结束手机详情返回按钮。 */

  .detail-header { /* 手机详情标题栏需要同时容纳返回和关闭入口。 */
    grid-template-columns: auto 1fr auto; /* 将返回、标题和关闭按钮稳定放入三列。 */
  } /* 结束手机详情标题栏列布局。 */

  .player-expanded-only { /* 手机打开侧栏时始终显示完整播放器信息。 */
    max-height: 150px; /* 为歌名、状态和音量提供稳定空间。 */
    opacity: 1; /* 恢复完整播放器信息可见度。 */
    pointer-events: auto; /* 允许点击歌名和操作音量。 */
    transform: translateX(0); /* 取消桌面收起状态的位移。 */
  } /* 结束手机完整播放器状态。 */

  .player-controls { /* 手机抽屉中的播放器采用横向常见布局。 */
    flex-direction: row; /* 将上一首、播放和下一首放到同一行。 */
    justify-content: center; /* 居中三枚音乐控制按钮。 */
    gap: 0.55rem; /* 压缩按钮间距并继续保留清晰触控边界。 */
    margin: 0.5rem 0 0.55rem; /* 缩短歌曲摘要、控制组和音量之间的空白。 */
  } /* 结束手机播放器控制布局。 */

  .player-dock { /* 手机抽屉底部显示完整播放器窗口。 */
    padding: 0.68rem 0.9rem 0.74rem; /* 压缩移动端播放器边距并保留触控空间。 */
  } /* 结束移动端播放器高度规则。 */
} /* 结束窄屏响应式规则。 */

.player-page.is-fullscreen-mode .mobile-sidebar-trigger { /* 全屏模式始终保留唯一的侧栏呼出入口。 */
  display: grid; /* 即使在桌面宽度也显示小型呼出按钮。 */
} /* 结束全屏呼出按钮规则。 */

.player-page.is-fullscreen-mode .mobile-sidebar-trigger[aria-expanded="true"] { /* 侧栏出现后避免重复显示入口。 */
  opacity: 0; /* 视觉上隐藏按钮并交由侧栏内部关闭入口接管。 */
  pointer-events: none; /* 防止透明按钮继续截获点击。 */
} /* 结束全屏侧栏打开时的呼出按钮规则。 */

.player-page.is-fullscreen-mode .tools-sidebar { /* 全屏模式默认把整个侧栏移出屏幕。 */
  width: var(--sidebar-expanded-width); /* 呼出后直接提供完整工具信息而不是窄图标条。 */
  transform: translateX(-102%); /* 连同边框和阴影一起隐藏，不保留任何侧栏占位。 */
} /* 结束全屏隐藏侧栏规则。 */

.player-page.is-fullscreen-mode .tools-sidebar.is-fullscreen-open { /* 用户点击小按钮后显示浮层侧栏。 */
  transform: translateX(0); /* 从左侧滑入完整侧栏。 */
} /* 结束全屏侧栏呼出状态。 */

.player-page.is-fullscreen-mode .sidebar-backdrop { /* 全屏桌面也需要可点击的浮层遮罩。 */
  display: block; /* 启用遮罩但保持默认透明和不可点击状态。 */
} /* 结束全屏遮罩启用规则。 */

.player-page.is-fullscreen-mode .sidebar-backdrop.is-visible { /* 侧栏呼出后压暗并锁定背景交互。 */
  opacity: 1; /* 清楚区分浮层工具和中心计时内容。 */
  pointer-events: auto; /* 点击侧栏外部即可关闭整个工具浮层。 */
} /* 结束全屏遮罩显示规则。 */

@media (max-width: 620px) { /* 让全屏侧栏在手机宽度继续遵守移动端安全尺寸。 */
  .player-page.is-fullscreen-mode .tools-sidebar { /* 覆盖全屏桌面固定宽度。 */
    width: min(86vw, 320px); /* 保留背景区域用于点击关闭。 */
  } /* 结束手机全屏侧栏宽度规则。 */

  .player-page.is-fullscreen-mode .tools-sidebar.is-detail-open { /* 手机全屏打开详情时仍以详情替换主菜单。 */
    transform: translateX(-102%); /* 避免高层级侧栏覆盖刚打开的详情面板。 */
  } /* 结束手机全屏详情替换规则。 */
} /* 结束手机全屏覆盖规则。 */

@media (max-height: 680px) { /* 针对高度较小的笔记本或横屏设备压缩布局。 */
  .time-display { /* 限制矮屏下倒计时数字高度。 */
    font-size: clamp(4.5rem, 20vh, 8rem); /* 依据视口高度缩放，避免按钮被推出屏幕。 */
  } /* 结束矮屏倒计时规则。 */

  .timer-message { /* 减少矮屏中说明文字上下间距。 */
    margin: 1rem 0 1.4rem; /* 为核心按钮保留可见空间。 */
  } /* 结束矮屏提示文字规则。 */

} /* 结束矮视口响应式规则。 */

@media (prefers-reduced-motion: reduce) { /* 尊重系统减少动态效果的无障碍偏好。 */
  *, *::before, *::after { /* 覆盖页面元素及其伪元素的动画时长。 */
    scroll-behavior: auto !important; /* 禁用平滑滚动，避免引发动态不适。 */
    transition-duration: 0.01ms !important; /* 近乎取消过渡，同时保留状态切换逻辑。 */
  } /* 结束减少动态效果的全局覆盖。 */
} /* 结束减少动态效果媒体查询。 */

/* Refactored application components share the sidebar's dark surface language. */
:root {
  --user-background: #030606;
  --surface-hover: rgba(66, 215, 229, 0.075);
  --surface-active: rgba(66, 215, 229, 0.13);
}

.ambient-canvas {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

.ambient-canvas[hidden] {
  display: none;
}

.landing-page,
.player-page {
  background: var(--user-background);
}

.landing-shell,
.focus-app {
  position: relative;
  z-index: 1;
}

.focus-app {
  background: transparent;
}

.timer-panel {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}

.timer-context {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-bottom: 0.7rem;
}

.timer-context .timer-mode {
  margin: 0;
}

.cycle-count {
  border-left: 1px solid var(--line);
  padding-left: 0.9rem;
  color: var(--muted);
  font-family: "DM Mono", monospace;
  font-size: 0.64rem;
  letter-spacing: 0.15em;
}

.app-status {
  max-width: 34rem;
  margin: 1rem 0 0;
  color: var(--danger);
  font-size: 0.78rem;
}

.setting-widget--switch {
  cursor: pointer;
}

.switch-control {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
}

.switch-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.switch-control span {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.switch-control span::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.2s ease, background 0.2s ease;
}

.switch-control input:checked + span {
  border-color: rgba(66, 215, 229, 0.55);
  background: rgba(66, 215, 229, 0.24);
}

.switch-control input:checked + span::after {
  background: var(--accent);
  transform: translateX(18px);
}

.switch-control input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.color-control {
  width: 44px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.04);
}

.range-setting {
  display: grid;
  gap: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.85rem 0.9rem;
  background: rgba(255, 255, 255, 0.022);
}

.range-setting-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.78rem;
}

.range-setting output {
  color: var(--accent);
  font-family: "DM Mono", monospace;
  font-size: 0.72rem;
}

.range-setting input,
.completion-volume input {
  width: 100%;
  accent-color: var(--accent);
}

input:disabled,
button:disabled,
.is-disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.wake-lock-widget {
  cursor: default;
}

#wake-lock-status.is-error {
  color: var(--danger);
}

.appearance-reset {
  width: 100%;
  justify-content: center;
}

.player-dock {
  gap: 0.24rem;
}

.player-controls {
  width: 100%;
}

.tools-sidebar.is-open .player-controls,
.tools-sidebar.is-fullscreen-open .player-controls {
  display: grid;
  grid-template-columns: repeat(5, var(--sidebar-control-size));
  justify-content: space-between;
  gap: 0.26rem;
}

.icon-button.dock-control,
.play-button.dock-control {
  width: var(--sidebar-control-size);
  height: var(--sidebar-control-size);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--accent);
}

.play-button.dock-control {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-ink);
}

.icon-button.dock-control:hover,
.play-button.dock-control:hover {
  border-color: rgba(66, 215, 229, 0.48);
  background: var(--surface-hover);
  transform: translateY(-1px);
}

.play-button.dock-control:hover {
  background: #6ce4ef;
}

.dock-icon {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  pointer-events: none;
}

.dock-icon svg,
.volume-icon svg,
.contact-card-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.dock-icon--play svg path {
  fill: currentColor;
  stroke: none;
}

[data-play-icon="pause"],
[data-order-icon] {
  display: none;
}

#play-toggle[data-play-state="playing"] [data-play-icon="play"],
#play-toggle[data-play-state="paused"] [data-play-icon="pause"] {
  display: none;
}

#play-toggle[data-play-state="playing"] [data-play-icon="pause"],
#play-toggle[data-play-state="paused"] [data-play-icon="play"],
#play-order[data-order-mode="repeat-all"] [data-order-icon="repeat-all"],
#play-order[data-order-mode="repeat-one"] [data-order-icon="repeat-one"],
#play-order[data-order-mode="shuffle"] [data-order-icon="shuffle"] {
  display: grid;
}

.volume-icon {
  display: grid;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
}

.player-order-label {
  width: 100%;
  margin: 0 0 0.45rem;
  color: var(--muted);
  font-family: "DM Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-align: center;
}

.detail-panel.is-playlist-manager {
  width: min(560px, calc(100vw - var(--sidebar-rail-width)));
}

.tools-sidebar.is-open + .detail-panel.is-playlist-manager {
  width: min(560px, calc(100vw - var(--sidebar-expanded-width)));
}

.tools-sidebar.is-fullscreen-open + .detail-panel {
  left: var(--sidebar-expanded-width);
}

.tools-sidebar.is-fullscreen-open + .detail-panel.is-playlist-manager {
  width: min(560px, calc(100vw - var(--sidebar-expanded-width)));
}

.playlist-manager-view {
  min-height: 100%;
}

.playlist-toolbar {
  position: sticky;
  z-index: 2;
  top: -1.15rem;
  display: grid;
  gap: 0.55rem;
  margin: -0.2rem -0.15rem 0;
  padding: 0.25rem 0.15rem 0.68rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--detail-surface-start) 76%, rgba(11, 18, 19, 0));
}

.playlist-tabs {
  display: flex;
  overflow-x: auto;
  align-items: flex-end;
  gap: 0.18rem;
  scrollbar-width: thin;
}

.playlist-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-bottom-color: rgba(66, 215, 229, 0.34);
  border-radius: 9px 9px 3px 3px;
  padding: 0.48rem 0.74rem;
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 650;
}

.playlist-tab:hover,
.playlist-tab[aria-selected="true"] {
  border-color: rgba(66, 215, 229, 0.45);
  background: var(--surface-active);
  color: var(--ink);
}

.playlist-tab-drag-handle {
  display: grid;
  width: 18px;
  height: 22px;
  place-items: center;
  color: var(--muted);
  cursor: grab;
  touch-action: none;
}

.playlist-tab-drag-handle:active {
  cursor: grabbing;
}

.playlist-tab-drag-handle:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.playlist-tabs.is-playlist-sorting {
  user-select: none;
}

.playlist-tab.is-playlist-dragging {
  opacity: 0.45;
}

.playlist-tab.is-playlist-drop-before,
.playlist-tab.is-playlist-drop-after {
  position: relative;
}

.playlist-tab.is-playlist-drop-before::before,
.playlist-tab.is-playlist-drop-after::after {
  position: absolute;
  z-index: 3;
  top: 0.18rem;
  bottom: 0.18rem;
  width: 2px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(66, 215, 229, 0.55);
  content: "";
}

.playlist-tab.is-playlist-drop-before::before {
  left: -0.2rem;
}

.playlist-tab.is-playlist-drop-after::after {
  right: -0.2rem;
}

.playlist-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem;
}

.panel-action {
  display: inline-flex;
  min-height: 33px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0.38rem 0.62rem;
  background: rgba(255, 255, 255, 0.025);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
}

.panel-action:hover {
  border-color: rgba(66, 215, 229, 0.4);
  background: var(--surface-hover);
}

.panel-action--primary {
  margin-left: auto;
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
}

.panel-action--danger:hover,
.track-row-action--danger:hover {
  border-color: rgba(255, 182, 189, 0.45);
  color: var(--danger);
}

.playlist-manager-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.68rem 0 0.45rem;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.42;
}

.playlist-manager-meta p {
  max-width: 20rem;
  margin: 0;
}

.playlist-manager-meta span {
  flex: 0 0 auto;
  font-family: "DM Mono", monospace;
  text-align: right;
}

.playlist-track-list {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0.18rem 0 4.5rem;
  list-style: none;
}

.playlist-track-row {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 0.38rem 0.48rem;
  background: rgba(255, 255, 255, 0.018);
  transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.playlist-track-row:hover,
.playlist-track-row.is-current {
  border-color: rgba(66, 215, 229, 0.36);
  background: var(--surface-hover);
}

.playlist-track-row.is-dragging {
  opacity: 0.48;
}

.playlist-track-row.is-drop-before::before,
.playlist-track-row.is-drop-after::after {
  position: absolute;
  z-index: 3;
  right: 0.2rem;
  left: 0.2rem;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(66, 215, 229, 0.55);
  content: "";
}

.playlist-track-row.is-drop-before::before {
  top: -0.24rem;
}

.playlist-track-row.is-drop-after::after {
  bottom: -0.24rem;
}

.playlist-track-list.is-sorting {
  user-select: none;
}

.track-drag-handle {
  display: grid;
  width: 24px;
  height: 30px;
  place-items: center;
  color: var(--muted);
  text-align: center;
  touch-action: none;
  cursor: grab;
}

.track-drag-handle:active {
  cursor: grabbing;
}

.track-drag-handle:focus-visible {
  border-radius: 5px;
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.track-row-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.18rem;
}

.track-row-copy strong,
.track-row-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-row-copy strong {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.012em;
}

.track-row-copy small {
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 500;
}

.track-row-title {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.track-row-title-text {
  display: inline-block;
  min-width: max-content;
  transform: translateX(0);
  will-change: transform;
}

.track-row-title.is-overflowing .track-row-title-text {
  animation: playlist-title-marquee var(--marquee-duration) ease-in-out 0.8s infinite alternate;
}

.track-row-title:hover .track-row-title-text {
  animation-play-state: paused;
}

.track-row-actions {
  display: flex;
  gap: 0.28rem;
}

.track-row-action {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
  background: rgba(255, 255, 255, 0.025);
  color: var(--accent);
}

.track-action-icon {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  pointer-events: none;
}

.track-action-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.track-action-icon .is-filled {
  fill: currentColor;
  stroke: none;
}

@keyframes playlist-title-marquee {
  to {
    transform: translateX(calc(-1 * var(--marquee-distance)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .widget-help-marquee.is-overflowing > span,
  .track-row-title.is-overflowing .track-row-title-text {
    animation: none;
    transform: none;
  }
}

.feedback-contact-view:not([hidden]) {
  display: grid;
  align-content: start;
  gap: 0.85rem;
}

.contact-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.72rem;
  background: rgba(255, 255, 255, 0.025);
}

.contact-card-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 10px;
  background: rgba(66, 215, 229, 0.09);
  color: var(--accent);
}

.contact-card-icon svg {
  width: 20px;
  height: 20px;
}

.contact-card-copy {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
}

.contact-card-copy strong {
  font-size: 0.96rem;
}

.contact-card-copy span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-card-copy a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-card-copy a:hover {
  color: var(--accent);
  text-decoration: none;
}

.feedback-form {
  display: grid;
  gap: 0.68rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.72rem;
  background: rgba(255, 255, 255, 0.025);
}

.feedback-field {
  display: grid;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
}

.feedback-field input,
.feedback-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.55rem 0.6rem;
  background: rgba(0, 0, 0, 0.2);
  color: var(--ink);
  font: inherit;
  resize: vertical;
}

.feedback-field textarea {
  min-height: 7.5rem;
  line-height: 1.45;
}

.feedback-field input:focus,
.feedback-field textarea:focus {
  border-color: rgba(66, 215, 229, 0.58);
  outline: 2px solid rgba(66, 215, 229, 0.14);
  outline-offset: 1px;
}

.feedback-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.feedback-form-footer > small {
  color: var(--muted);
  font-family: "DM Mono", monospace;
  font-size: 0.68rem;
}

.feedback-form .sidebar-action {
  width: auto;
  min-width: 9rem;
}

.track-row-action:hover {
  border-color: rgba(66, 215, 229, 0.45);
  background: var(--surface-active);
}

.playlist-status {
  position: sticky;
  bottom: -1.15rem;
  margin: 0 -0.15rem;
  padding: 0.7rem 0.15rem 1rem;
  background: linear-gradient(0deg, var(--detail-surface-end) 72%, rgba(8, 12, 13, 0));
}

.music-import-view:not([hidden]),
.netease-import-view:not([hidden]) {
  display: grid;
  align-content: start;
  gap: 0.72rem;
}

.local-import-card,
.music-link-form,
.external-playlist-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.local-import-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem;
}

.music-service-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(8, 14, 15, 0.78);
  color: var(--accent); /* 让服务图标与菜单/设置图标共用品牌青色。 */
  overflow: hidden;
}

.music-service-icon img {
  width: 23px;
  height: 23px;
}

/* Service icons are inline line icons, drawn with the same stroke language
   as the menu, dock and settings icons (currentColor + round caps). */
.music-service-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}

/* Brand icons that only exist as solid fills (e.g. the NetEase note): keep
   the official shape untouched and recolor it with the same UI accent. */
.music-service-icon svg.icon-fill,
.music-service-icon svg.icon-fill path {
  fill: currentColor;
  stroke: none;
}

.music-service-copy {
  display: grid;
  min-width: 0;
  gap: 0.18rem;
}

.music-service-copy strong,
.music-service-copy small {
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.music-service-copy strong {
  font-size: 0.9rem;
  font-weight: 700;
}

.music-service-copy small {
  color: var(--muted);
  font-size: 0.72rem;
}

.local-import-action {
  margin-left: 0;
  white-space: nowrap;
}

.music-service-section-heading {
  display: grid;
  gap: 0.16rem;
  padding-top: 0.25rem;
}

.music-service-section-heading h3 {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.music-service-section-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
}

.music-service-list {
  display: grid;
  gap: 0.36rem;
}

.music-service-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 0.62rem;
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 0.45rem 0.56rem;
  background: rgba(255, 255, 255, 0.018);
  color: var(--ink);
  text-align: left;
}

.music-service-row:hover,
.music-service-row:focus-visible {
  border-color: rgba(66, 215, 229, 0.42);
  background: var(--surface-hover);
}

.music-service-arrow {
  color: var(--accent);
  font-size: 1.3rem;
  line-height: 1;
  text-align: center;
}

.music-link-form {
  display: grid;
  gap: 0.68rem;
  padding: 0.72rem;
}

.music-link-form[hidden] {
  display: none;
}

.music-link-form-heading {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.58rem;
}

#music-link-service-icon {
  display: contents;
}

.music-link-field {
  display: grid;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
}

.music-link-field small {
  color: var(--muted);
  font-weight: 500;
}

.music-link-field input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.5rem 0.58rem;
  background: rgba(0, 0, 0, 0.2);
  color: var(--ink);
  font: inherit;
}

.music-link-field input:focus {
  border-color: rgba(66, 215, 229, 0.58);
  outline: 2px solid rgba(66, 215, 229, 0.14);
  outline-offset: 1px;
}

.external-playlist-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.72rem;
  min-height: 72px;
  padding: 0.7rem;
}

.external-playlist-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
}

.external-playlist-copy {
  display: grid;
  min-width: 0;
  gap: 0.22rem;
}

.external-playlist-copy strong,
.external-playlist-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.external-playlist-copy strong {
  font-size: 0.94rem;
}

.external-playlist-copy small {
  color: var(--muted);
  font-size: 0.72rem;
}

.external-playlist-actions {
  display: flex;
  justify-content: flex-end;
}

/* Cloud playlist import: preview, resolution progress, and track badges.
   Note: sections that toggle with the hidden attribute use :not([hidden])
   so the attribute is never overridden by the display rules below. */

.music-import-preview:not([hidden]),
.music-resolution-progress:not([hidden]),
.music-source-settings {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  padding: 0.9rem;
}

.music-import-preview:not([hidden]) {
  display: grid;
  gap: 0.85rem;
}

.music-import-preview-heading {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
}

.music-import-preview-cover {
  width: 64px;
  height: 64px;
  border: 1px solid var(--line);
  border-radius: 10px;
  object-fit: cover;
}

.music-import-preview .music-service-copy {
  gap: 0.3rem;
}

.music-import-preview .music-service-copy strong {
  font-size: 1.02rem;
}

.music-import-preview .music-service-copy small {
  overflow: visible;
  white-space: normal;
  line-height: 1.45;
}

.music-import-preview-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
}

.music-import-preview-actions .sidebar-action {
  width: 100%;
  justify-content: center;
}

.music-resolution-progress:not([hidden]) {
  display: grid;
  gap: 0.6rem;
}

.music-resolution-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.music-resolution-heading output {
  color: var(--muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

.music-resolution-bar {
  width: 100%;
  height: 6px;
  accent-color: var(--accent);
}

.music-resolution-list {
  display: grid;
  gap: 0.22rem;
  max-height: 13.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
}

.music-resolution-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  padding: 0.32rem 0.15rem;
}

.music-resolution-row-title {
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  font-size: 0.78rem;
}

/* Overflow marquee for single-line music import copy. The controller sets
   .is-overflowing and the --marquee-* variables; the animation reuses the
   playlist title keyframes. */
.music-service-copy [data-marquee-text],
.music-resolution-row-title [data-marquee-text] {
  display: inline-block;
  min-width: max-content;
  transform: translateX(0);
  will-change: transform;
}

.music-service-copy .is-overflowing > [data-marquee-text],
.music-resolution-row-title.is-overflowing > [data-marquee-text] {
  animation: playlist-title-marquee var(--marquee-duration) ease-in-out 0.8s infinite alternate;
}

.music-service-copy .is-overflowing:hover > [data-marquee-text],
.music-resolution-row-title.is-overflowing:hover > [data-marquee-text] {
  animation-play-state: paused;
}

.music-service-notice {
  margin: 0;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.018);
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.music-resolution-actions {
  display: flex;
  gap: 0.5rem;
}

.music-source-settings {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.15rem;
}

.music-source-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.statistic-value {
  min-width: 5.5rem;
  color: var(--accent);
  font-family: "DM Mono", monospace;
  font-size: 0.95rem;
  text-align: right;
}

.music-source-settings h3 {
  margin: 0;
  font-size: 0.95rem;
}

.music-source-settings h3 small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 400;
}

.music-source-settings .settings-section-heading p {
  margin: 0.16rem 0 0;
  color: var(--muted);
  font-size: 0.74rem;
}

.track-source-badge {
  display: inline-block;
  width: fit-content;
  margin-top: 0.28rem;
  padding: 0.1rem 0.42rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.track-source-badge.is-resolved {
  border-color: rgba(66, 215, 229, 0.35);
  color: var(--accent);
}

.track-source-badge.is-unavailable {
  border-color: rgba(139, 147, 152, 0.3);
  color: var(--muted);
}

.track-source-badge.is-pending {
  border-color: rgba(139, 147, 152, 0.25);
  color: var(--muted);
}

body.is-cursor-hidden,
body.is-cursor-hidden * {
  cursor: none !important;
}

@media (max-width: 620px) {
  .detail-panel.is-playlist-manager,
  .tools-sidebar.is-open + .detail-panel.is-playlist-manager,
  .tools-sidebar.is-fullscreen-open + .detail-panel.is-playlist-manager {
    width: min(94vw, 430px);
  }

  .tools-sidebar.is-fullscreen-open + .detail-panel {
    left: 0;
  }

  .playlist-manager-meta {
    flex-direction: column;
  }

  .playlist-manager-meta span {
    text-align: left;
  }

  .playlist-track-row {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .track-row-actions {
    grid-column: 2;
    justify-content: flex-end;
  }

  .panel-action--primary {
    margin-left: 0;
  }

  .local-import-card,
  .external-playlist-card {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .local-import-action,
  .external-playlist-actions {
    grid-column: 2;
    justify-content: flex-start;
  }

  .music-link-form-heading {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .music-link-form-heading .panel-action {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-height: 760px) and (min-width: 621px) {
  .player-dock {
    padding-block: 0.45rem;
  }

  .player-controls {
    gap: 0.25rem;
  }

  .tools-sidebar.is-open .player-controls,
  .tools-sidebar.is-fullscreen-open .player-controls {
    grid-template-columns: repeat(5, 36px);
  }

  .icon-button.dock-control,
  .play-button.dock-control {
    width: 36px;
    height: 36px;
  }
}