/* ===== 在线音频管理系统 · 样式（深色/浅色双主题） ===== */
:root{
--bg:#14161a; --panel:#1b1e24; --panel2:#21252c; --panel3:#282d35;
--line:#2c313a; --line2:#363c46;
--text:#e7eaf0; --sub:#8d95a3; --sub2:#6b7381;
--accent:#4d8bff; --accent2:#3a75e0;
--danger:#ff5b5b; --ok:#22b07d; --warn:#f2a33c; --purple:#9b6dff;
--accent-soft:rgba(77,139,255,.14);
--accent-text:#a9c6ff;
--accent-ring:rgba(77,139,255,.28);
--wave-idle:#3a4048; --wave-bg1:#191d23; --wave-bg2:#15181d;
--track:#333944; --track-hover:#414859;
--dot:#4a5160;
--radius:10px;
--shadow:0 20px 60px rgba(0,0,0,.45);
--scrim:rgba(0,0,0,.6);
}
body.theme-light{
--bg:#f4f6fa; --panel:#ffffff; --panel2:#f4f6fa; --panel3:#e9edf4;
--line:#e2e7f0; --line2:#d1d8e6;
--text:#1a1f28; --sub:#5d6573; --sub2:#8b93a2;
--accent:#2f6fe4; --accent2:#2456bd;
--danger:#e0454a; --ok:#12a06a; --warn:#e08c0b; --purple:#7c53e8;
--accent-soft:rgba(47,111,228,.10);
--accent-text:#1f5fd0;
--accent-ring:rgba(47,111,228,.25);
--wave-idle:#c3cbd9; --wave-bg1:#eef1f7; --wave-bg2:#e7ebf3;
--track:#c9d1de; --track-hover:#aeb8c8;
--dot:#98a2b3;
--shadow:0 18px 50px rgba(31,41,60,.13);
--scrim:rgba(20,26,38,.42);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
background:var(--bg);color:var(--text);
font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei","PingFang SC",Arial,sans-serif;
-webkit-font-smoothing:antialiased;overflow:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--track);border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--track-hover)}
::-webkit-scrollbar-track{background:transparent}
/* ---------- 登录 ---------- */
.login-body{display:flex;align-items:center;justify-content:center;background:radial-gradient(1200px 600px at 50% -10%,var(--panel2),var(--bg))}
.login-wrap{width:100%;max-width:380px;padding:20px}
.login-box{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:34px 30px 26px;box-shadow:var(--shadow)}
.login-logo{text-align:center;margin-bottom:24px}
.login-logo h1{font-size:19px;margin:12px 0 6px;letter-spacing:.5px}
.login-logo p{color:var(--sub2);font-size:12px;margin:0}
.field{margin-bottom:12px}
.field input,.mini-in,select.sel,textarea.inp{
width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--text);
border-radius:8px;padding:10px 12px;font-size:14px;outline:none;transition:.15s;font-family:inherit;
}
/* ★第100轮:外扩 3px 光晕 + 自身 1px border = 同心双框(用户报的登录框问题)。
* 后台表单/私信框统一改成 inset 内描边,视觉上只剩一个圆角框。
* 下方 .dm-inp.bad(校验失败)刻意保留外扩——那是整块变红的告警态,和常态描边不冲突。 */
/* ★第100轮：后台/前台里**裸的** .inp / .sel 压根没有聚焦规则，而 .inp 自己又写了
* outline:none —— 结果是点「搜索用户名 / 昵称」那种输入框一点反馈都没有。
* 这里给一层 inset 内描边兜底，和登录框同一套观感（外扩会 again 出双框）。
* 与下面 .field / .modal / .uc / .tiny-sel 同色等值，靠特异性决定谁说话，位置无所谓。 */
.inp:focus,.sel:focus{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.field input:focus,.mini-in:focus,select.sel:focus,textarea.inp:focus{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
/* 注册验证码: 输入框 + 图片并排,点击图片换一张 */
.captcha-field{display:flex;align-items:center;gap:8px}
.captcha-field input{flex:1 1 auto;min-width:0}
.captcha-field img{flex:0 0 auto;height:42px;width:118px;border:1px solid var(--line);border-radius:8px;cursor:pointer;background:var(--panel2)}
/* ★★★第107轮 —— 一次性根治「输入框外面套一个直角矩形框」（用户已两次报修）
*
* 【症状】聚焦输入框时，控件外面多出一圈直角矩形：上下边比左右边各窄 8px、四边互不相连。
* 【实测像素证据】截图放大扫描：上下边 x=39..332、左右边 x=31..340。
* 【根因】同时画了两个框，且两个框的圆角不一样：
* ① 外框 —— 浏览器**默认 focus ring**（outline）。它是直角、不跟随 border-radius，
* 而且画在 自己的盒子尺寸上；
* ② 内框 —— 站内的 1px border + inset 描边（跟随容器的 border-radius）。
* 容器 10px 圆角、input 直角 → 两层框必然错位，就是那个矩形。
* 【为什么反复出现】前两轮（第100轮）只盯着「外扩 box-shadow + border = 双圆角框」，
* 把描边改成了 inset 就收工 —— 但 outline 这一层压根没参与进来，症状被掩盖了；
* 一旦某个内核把默认 focus ring 画出来（或 outline-offset 被别处覆盖），老毛病立刻复现。
* 【根治】三条一起上，任何一条单独都不够：
* ① 所有文本类控件统一 outline:0 solid transparent + outline-offset:0，
* 并额外压掉 old Chromium 的 -webkit-focus-ring（兼容模式的老 360 会画它）；
* ② 描边只由**控件自身**承担（它已经有 border-radius），不给 input 留独立圆角；
* ③ 键盘可达性不丢：下面这条 :focus-visible 给无障碍留一条真正的可见焦点提示，
* 用 outline-offset 画在控件外侧 2px，与控件同色同宽 —— 这是**唯一**允许
* outline 出现的场景，且方向是「外扩 + 跟随圆角」，不会再和边框错位。 */
input[type=text]:focus-visible,input[type=password]:focus-visible,
input[type=number]:focus-visible,input[type=search]:focus-visible,
input[type=tel]:focus-visible,input[type=email]:focus-visible,
input[type=url]:focus-visible,input[type=date]:focus-visible,select:focus-visible,
textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* ★容器型输入框（图标在框内的那种）：描边交给容器，input 必须彻底「无壳」——
否则 input 的直角盒子会和容器的圆角框对不上，就是用户看到的那两圈。 */
input[type=text],input[type=password],input[type=number],input[type=search],
input[type=tel],input[type=email],input[type=url],input[type=date]{
outline:0 solid transparent;outline-offset:0}
input[type=text]::-webkit-focus-ring,input[type=password]::-webkit-focus-ring,
input[type=number]::-webkit-focus-ring,select::-webkit-focus-ring,textarea::-webkit-focus-ring{
outline:0 solid transparent}
/* ★第107轮：把上面那条 :focus-visible 兜底**显式排除**容器型输入框。
* 上面 input[type=text]:focus-visible 的权重是 (0,2,1)，容器型选择器
* `.lg-item input` 只有 (0,1,1) —— 靠层叠「碰巧」压过它并不是可靠做法
* （不同内核对 :focus-visible 的 UA 层叠处理并不一致，本轮实测就出现过
* 权重明明更高却没生效的情况）。这里用 :focus-visible 把容器型再压一遍，
* 权重 (0,3,1) 稳赢，无论哪套实现都不会把那个矩形框放回来。
* 容器型输入框的聚焦提示由 .lg-item/.am-auth-item 的 inset 描边提供，无障碍不丢。 */
.lg-item input:focus-visible,.am-auth-item input:focus-visible,
#amAuthBox .am-auth-item input:focus-visible,.am-auth-cap input:focus-visible{
outline:0 solid transparent;outline-offset:0;box-shadow:none}
.login-err{color:var(--danger);font-size:13px;min-height:20px;text-align:center}
/* 字段下方的字符数/格式要求说明(独立注册页与弹窗口径一致) */
.field-hint{margin:5px 0 0;padding-left:2px;font-size:11.5px;line-height:1.6;color:var(--sub2)}
.login-tip{margin-top:16px;text-align:center;color:var(--sub2);font-size:12px}
input[type=range]{accent-color:var(--accent)}
/* ---------- 按钮 ---------- */
.btn{
background:var(--panel3);color:var(--text);border:1px solid var(--line2);border-radius:8px;
padding:7px 14px;font-size:13px;cursor:pointer;transition:.15s;white-space:nowrap;
}
.btn:hover{background:var(--track);border-color:var(--track-hover)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent2);border-color:var(--accent2)}
.btn.ghost{background:transparent}
.btn.danger{background:transparent;border-color:#5a3038;color:#ff7b7b}
.btn.danger:hover{background:#3a1f24;border-color:var(--danger)}
.btn.block{width:100%;padding:10px}
.btn.tiny{padding:4px 9px;font-size:12px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.x{padding:2px 7px;font-size:16px;line-height:1}
/* ---------- 布局 ---------- */
/* 第120轮：100vh 在「笔记本 1366x768 + 系统缩放 125%/150%」下会按**缩放后的 CSS 像素**
* 计算，比实际可视高度多出一截，底部播放条/操作区被挤出屏幕；100dvh 用动态视口，
* 与现代浏览器一致。老浏览器不认 dvh 会忽略第二条，仍用 vh —— 渐进增强，不会回退。 */
.app{display:flex;flex-direction:column;height:100vh;height:100dvh}
/* 第120轮：图片兜底。整站 img 都是具体选择器定死的尺寸，这条只做**最后一道保险**——
* 富文本（协议正文、公告）里贴的原图常常自带上千像素宽，窄屏/高缩放下会直接撑破容器。
* 特异性 (0,0,1) 低于任何具名选择器，不会覆盖已定死的头像/封面尺寸，只兜没被管到的。 */
img,svg,video{max-width:100%}
.topbar{height:54px;display:flex;align-items:center;gap:12px;padding:0 14px;background:var(--panel);border-bottom:1px solid var(--line);flex-shrink:0}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;white-space:nowrap}
.brand span{letter-spacing:.3px}
.search-box{flex:1;max-width:520px;position:relative;display:flex;align-items:center}
.search-box .ico{position:absolute;left:11px;color:var(--sub2);pointer-events:none}
.search-box input{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 32px;color:var(--text);font-size:13px;outline:none;transition:.15s}
.search-box input:focus{border-color:var(--accent);background:var(--panel3)}
.clear-btn{position:absolute;right:8px;background:none;border:0;color:var(--sub2);font-size:19px;cursor:pointer;line-height:1;padding:0 4px;display:none}
.search-box.has .clear-btn{display:block}
/* 搜索按钮: 不回车就点它,输入过程中不再自动发请求 */
.search-btn{margin-left:8px;flex:none;display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 14px;
border:1px solid var(--accent);border-radius:9px;background:var(--accent);color:#fff;font-size:13px;cursor:pointer;
white-space:nowrap;transition:.15s}
.search-btn:hover{filter:brightness(1.08)}
.search-btn:active{transform:translateY(1px)}
.search-btn svg{flex:none}
.topbar-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
/* ---------- 页面底部备案 / 版权（第72轮） ----------
* 原先是 position:fixed 贴在 left:12px/bottom:84px 的小角标，正好压在素材库左侧文件夹树上
* （用户反馈挡住列表最后几项），而且脱离文档流、位置和内容没关系。现在改成随内容滚动、
* 居中的语义化