/* Friday Night 网页版样式：复古街机像素风
   基础样式由小程序的 index.wxss 自动转换而来：把 rpx 换成 calc(N * var(--u))，
   --u = 页面宽度 / 750（页面最宽 480px，手机上就是屏幕宽度），所以尺寸比例和小程序完全一致。 */
:root { --u: calc(min(100vw, 480px) / 750); color-scheme: dark; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: #0b0b1e; }
button { font-family: inherit; cursor: pointer; padding: 0; }
input { font-family: inherit; outline: none; border-radius: 0; }
img, svg { display: block; }
[hidden] { display: none !important; }

/* ===== 复古街机像素风 ===== */
body {
  background: #0b0b1e;
  color: #e8e8ff;
  font-family: 'Courier New', Courier, monospace;
  font-size: calc(28 * var(--u));
  font-weight: 700;
  line-height: 1.5;
}
.page {
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
  padding: calc(32 * var(--u)) calc(28 * var(--u)) calc(60 * var(--u));
}
/* CRT 扫描线 */
.scan {
  position: fixed;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 99;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.2) calc(2 * var(--u)), transparent calc(2 * var(--u)), transparent calc(6 * var(--u)));
}
.title {
  font-size: calc(68 * var(--u));
  color: #ffe600;
  letter-spacing: calc(4 * var(--u));
  text-shadow: calc(6 * var(--u)) calc(6 * var(--u)) 0 #ff2e97;
}
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.sub { color: #00f0ff; font-size: calc(24 * var(--u)); letter-spacing: calc(2 * var(--u)); margin-bottom: calc(8 * var(--u)); }
.warn {
  margin-top: calc(16 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u));
  font-size: calc(22 * var(--u));
  color: #ffe600;
  border: calc(4 * var(--u)) dashed #ffe600;
}

/* 面板 */
.panel {
  margin-top: calc(32 * var(--u));
  padding: calc(24 * var(--u));
  background: #15153f;
  border: calc(6 * var(--u)) solid #fff;
  box-shadow: calc(10 * var(--u)) calc(10 * var(--u)) 0 #000;
}
.c-cyan { border-color: #00f0ff; }
.c-pink { border-color: #ff2e97; }
.c-yellow { border-color: #ffe600; }
.c-green { border-color: #39ff14; }
.c-gray { border-color: #6b6bb0; }
.panel-h { font-size: calc(30 * var(--u)); color: #ffe600; margin-bottom: calc(20 * var(--u)); letter-spacing: calc(2 * var(--u)); }
.lbl { margin: calc(24 * var(--u)) 0 calc(12 * var(--u)); font-size: calc(24 * var(--u)); color: #00f0ff; }
.panel .lbl:first-child { margin-top: 0; }
.hint { margin-top: calc(16 * var(--u)); text-align: center; font-size: calc(24 * var(--u)); color: #9a9ad0; }

/* 百分比 */
.pct { text-align: center; line-height: 1; margin: calc(8 * var(--u)) 0 calc(4 * var(--u)); }
.pct-n { font-size: calc(132 * var(--u)); color: #ffe600; text-shadow: calc(8 * var(--u)) calc(8 * var(--u)) 0 #ff2e97; letter-spacing: calc(2 * var(--u)); }
.pct-u { font-size: calc(60 * var(--u)); color: #ffe600; margin-left: calc(6 * var(--u)); }
.pct-t { text-align: center; font-size: calc(24 * var(--u)); color: #9a9ad0; margin-bottom: calc(24 * var(--u)); }

/* 倒计时 */
.cd { display: flex; justify-content: space-between; }
.cell {
  flex: 1;
  margin: 0 calc(8 * var(--u));
  padding: calc(16 * var(--u)) 0 calc(10 * var(--u));
  text-align: center;
  background: #000;
  border: calc(4 * var(--u)) solid #ff2e97;
}
.cell:first-child { margin-left: 0; }
.cell:last-child { margin-right: 0; }
.num { display: block; font-size: calc(76 * var(--u)); line-height: 1.1; color: #39ff14; text-shadow: 0 0 calc(14 * var(--u)) #39ff14; }
.unit { display: block; font-size: calc(20 * var(--u)); color: #ff2e97; }
.live {
  padding: calc(24 * var(--u)) 0;
  text-align: center;
  font-size: calc(52 * var(--u));
  color: #39ff14;
  text-shadow: 0 0 calc(14 * var(--u)) #39ff14;
  animation: blink 1s steps(1) infinite;
}
.bar { margin-top: calc(20 * var(--u)); height: calc(44 * var(--u)); padding: calc(4 * var(--u)); background: #000; border: calc(4 * var(--u)) solid #fff; box-sizing: border-box; }
.bar-in {
  height: 100%;
  background: repeating-linear-gradient(90deg, #ffe600 0, #ffe600 calc(16 * var(--u)), transparent calc(16 * var(--u)), transparent calc(20 * var(--u)));
}

/* 输入 */
.ipt {
  height: calc(76 * var(--u));
  padding: 0 calc(16 * var(--u));
  box-sizing: border-box;
  line-height: calc(76 * var(--u));
  font-size: calc(28 * var(--u));
  color: #39ff14;
  background: #000;
  border: calc(4 * var(--u)) solid #6b6bb0;
}
.ph { color: #55558a; }
.time { color: #ffe600; }

/* 选项块 */
.chips { display: flex; flex-wrap: wrap; }
.mt { margin-top: calc(16 * var(--u)); }
.chip {
  margin: 0 calc(16 * var(--u)) calc(16 * var(--u)) 0;
  padding: calc(8 * var(--u)) calc(24 * var(--u));
  color: #aab;
  background: #0b0b1e;
  border: calc(4 * var(--u)) solid #6b6bb0;
}
.chip.sm { padding: calc(4 * var(--u)) calc(16 * var(--u)); font-size: calc(24 * var(--u)); }
.chip.on { color: #000; background: #ffe600; border-color: #fff; box-shadow: calc(6 * var(--u)) calc(6 * var(--u)) 0 #000; }
.chip.on.s-in { background: #39ff14; }
.chip.on.s-maybe { background: #ffe600; }
.chip.on.s-out { background: #ff2e97; color: #fff; }

/* 按钮 */
.btn {
  margin-top: calc(32 * var(--u));
  width: 100%;
  font-family: inherit;
  font-size: calc(32 * var(--u));
  font-weight: 700;
  line-height: calc(92 * var(--u));
  color: #fff;
  background: #ff2e97;
  border: calc(6 * var(--u)) solid #fff;
  border-radius: 0;
  box-shadow: calc(10 * var(--u)) calc(10 * var(--u)) 0 #000;
}
.btn::after { border: none; }
.btn-ghost { background: #15153f; color: #00f0ff; border-color: #00f0ff; }
.btn-hover { transform: translate(calc(6 * var(--u)), calc(6 * var(--u))); box-shadow: calc(2 * var(--u)) calc(2 * var(--u)) 0 #000; }
.btn[disabled] { opacity: 0.45; }

/* 好友：邀请卡 */
.big { font-size: calc(56 * var(--u)); margin-bottom: calc(16 * var(--u)); }
.kv { display: flex; padding: calc(8 * var(--u)) 0; border-bottom: calc(4 * var(--u)) dashed #2c2c66; }
.k { width: calc(120 * var(--u)); flex: none; color: #ff2e97; font-size: calc(24 * var(--u)); line-height: calc(42 * var(--u)); }
.v { flex: 1; color: #fff; }

/* 状态配色 */
.s-in { color: #39ff14; }
.s-maybe { color: #ffe600; }
.s-out { color: #ff2e97; }

/* 回复名单 */
.counts { display: flex; justify-content: space-around; padding-bottom: calc(12 * var(--u)); border-bottom: calc(4 * var(--u)) solid #2c2c66; }
.cnt { font-size: calc(26 * var(--u)); }
.rrow { display: flex; align-items: center; padding: calc(16 * var(--u)) 0; border-bottom: calc(4 * var(--u)) dashed #2c2c66; }
.rrow:last-child { border-bottom: none; }
.av {
  flex: none;
  width: calc(68 * var(--u)); height: calc(68 * var(--u));
  margin-right: calc(20 * var(--u));
  line-height: calc(68 * var(--u));
  text-align: center;
  font-size: calc(34 * var(--u));
  color: #000;
  border: calc(4 * var(--u)) solid #fff;
  box-shadow: calc(4 * var(--u)) calc(4 * var(--u)) 0 #000;
}
.rmid { flex: 1; min-width: 0; }
.rname { color: #fff; }
.me { color: #00f0ff; font-size: calc(22 * var(--u)); }
.rnote { font-size: calc(24 * var(--u)); color: #9a9ad0; }
.tag { flex: none; padding: calc(2 * var(--u)) calc(14 * var(--u)); font-size: calc(24 * var(--u)); border: calc(4 * var(--u)) solid currentColor; }

.foot { margin-top: calc(48 * var(--u)); text-align: center; font-size: calc(20 * var(--u)); color: #55558a; letter-spacing: calc(2 * var(--u)); }

/* ===== 上号大按钮 ===== */
.btn-go {
  margin-top: calc(32 * var(--u));
  width: 100%;
  font-family: inherit;
  font-size: calc(68 * var(--u));
  font-weight: 700;
  letter-spacing: calc(12 * var(--u));
  line-height: calc(150 * var(--u));
  color: #000;
  background: #39ff14;
  border: calc(8 * var(--u)) solid #fff;
  border-radius: 0;
  box-shadow: 0 0 0 calc(6 * var(--u)) #39ff14, calc(14 * var(--u)) calc(14 * var(--u)) 0 calc(6 * var(--u)) #000;
  animation: pulse 1.2s steps(2) infinite;
}
.btn-go::after { border: none; }
.btn-go-hover { transform: translate(calc(8 * var(--u)), calc(8 * var(--u))); box-shadow: 0 0 0 calc(6 * var(--u)) #39ff14, calc(4 * var(--u)) calc(4 * var(--u)) 0 calc(6 * var(--u)) #000; }
.btn-go[disabled] { opacity: 0.45; animation: none; }
.btn-go.done { background: #ffe600; animation: none; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 calc(6 * var(--u)) #39ff14, calc(14 * var(--u)) calc(14 * var(--u)) 0 calc(6 * var(--u)) #000; }
  50% { box-shadow: 0 0 0 calc(16 * var(--u)) rgba(57, 255, 20, 0.45), calc(14 * var(--u)) calc(14 * var(--u)) 0 calc(16 * var(--u)) #000; }
}
.alt-row { display: flex; margin-top: calc(24 * var(--u)); }
.alt {
  flex: 1;
  margin: 0 calc(12 * var(--u)) 0 0;
  font-family: inherit;
  font-size: calc(30 * var(--u));
  font-weight: 700;
  line-height: calc(80 * var(--u));
  color: #aab;
  background: #0b0b1e;
  border: calc(4 * var(--u)) solid #6b6bb0;
  border-radius: 0;
}
.alt:last-child { margin-right: 0; margin-left: calc(12 * var(--u)); }
.alt::after { border: none; }
.alt.on-maybe { color: #000; background: #ffe600; border-color: #fff; }
.alt.on-out { color: #fff; background: #ff2e97; border-color: #fff; }

/* ===== 我的头像昵称条 ===== */
.me-bar {
  margin-top: calc(32 * var(--u));
  display: flex;
  align-items: center;
  padding: calc(16 * var(--u)) calc(20 * var(--u));
  background: #15153f;
  border: calc(4 * var(--u)) solid #6b6bb0;
  box-shadow: calc(6 * var(--u)) calc(6 * var(--u)) 0 #000;
}
.me-av {
  flex: none;
  width: calc(72 * var(--u));
  height: calc(72 * var(--u));
  margin-right: calc(20 * var(--u));
  border: calc(4 * var(--u)) solid #fff;
  box-sizing: border-box;
  background: #000;
}
.me-av-t { line-height: calc(64 * var(--u)); text-align: center; font-size: calc(34 * var(--u)); color: #000; background: #6b6bb0; }
.me-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.me-edit { flex: none; font-size: calc(24 * var(--u)); color: #00f0ff; }
.host-row { display: flex; align-items: center; margin-bottom: calc(12 * var(--u)); }
.host-h { margin: 0; flex: 1; }
.av-img { background: #000; }
.bottom-space { height: calc(60 * var(--u)); }

/* ===== 弹幕 ===== */
.dm-panel { padding-bottom: calc(12 * var(--u)); }
.dm-box { position: relative; height: calc(264 * var(--u)); overflow: hidden; background: #000; border: calc(4 * var(--u)) solid #2c2c66; }
.dm {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  height: calc(52 * var(--u));
  margin-top: calc(8 * var(--u));
  padding: 0 calc(20 * var(--u)) 0 calc(6 * var(--u));
  white-space: nowrap;
  background: rgba(57, 255, 20, 0.14);
  border: calc(4 * var(--u)) solid #39ff14;
  animation-name: dm-move;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform: translateX(calc(720 * var(--u)));
}
@keyframes dm-move {
  from { transform: translateX(calc(720 * var(--u))); }
  to { transform: translateX(calc(-680 * var(--u))); }
}
.dm-av { flex: none; width: calc(36 * var(--u)); height: calc(36 * var(--u)); margin-right: calc(12 * var(--u)); border: calc(2 * var(--u)) solid #fff; box-sizing: border-box; }
.dm-av-t { line-height: calc(32 * var(--u)); text-align: center; font-size: calc(22 * var(--u)); color: #000; }
.dm-t { max-width: calc(460 * var(--u)); overflow: hidden; text-overflow: ellipsis; font-size: calc(24 * var(--u)); color: #39ff14; }

/* ===== 游戏选择 ===== */
.chip.add { color: #00f0ff; border-style: dashed; border-color: #00f0ff; }
.add-row { display: flex; margin-top: calc(4 * var(--u)); }
.add-ipt { flex: 1; }
.add-ok { flex: none; margin-left: calc(12 * var(--u)); padding: 0 calc(32 * var(--u)); line-height: calc(68 * var(--u)); color: #000; background: #ffe600; border: calc(4 * var(--u)) solid #fff; }

/* ===== 战绩榜 ===== */
.awards { display: flex; flex-wrap: wrap; margin: 0 calc(-8 * var(--u)) calc(8 * var(--u)); }
.aw {
  width: calc(50% - calc(16 * var(--u)));
  margin: 0 calc(8 * var(--u)) calc(16 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  box-sizing: border-box;
  background: #000;
  border: calc(4 * var(--u)) solid #ffe600;
}
.aw-n { display: block; font-size: calc(26 * var(--u)); color: #ffe600; }
.aw-w { display: block; font-size: calc(28 * var(--u)); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-d { display: block; font-size: calc(20 * var(--u)); color: #9a9ad0; line-height: 1.3; }
.lb-head { display: flex; padding: calc(10 * var(--u)) 0; font-size: calc(22 * var(--u)); color: #00f0ff; border-bottom: calc(4 * var(--u)) solid #2c2c66; }
.lb-row { display: flex; align-items: center; padding: calc(14 * var(--u)) 0; border-bottom: calc(4 * var(--u)) dashed #2c2c66; }
.lb-row:last-of-type { border-bottom: none; }
.lb-c1 { flex: 1; }
.lb-c { flex: none; width: calc(90 * var(--u)); text-align: center; font-size: calc(30 * var(--u)); }
.lb-c2 { flex: none; width: calc(130 * var(--u)); text-align: center; font-size: calc(28 * var(--u)); }
.lb-sub { font-size: calc(18 * var(--u)); color: #9a9ad0; }
.lb-name { flex: 1; min-width: 0; }
.lb-titles { display: flex; flex-wrap: wrap; margin-top: calc(4 * var(--u)); }
.ttag { margin: 0 calc(8 * var(--u)) calc(4 * var(--u)) 0; padding: 0 calc(8 * var(--u)); font-size: calc(18 * var(--u)); color: #000; background: #ffe600; }

/* ===== 首次打开：头像昵称弹窗 ===== */
.mask {
  position: fixed;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.82);
}
.modal {
  width: calc(600 * var(--u));
  padding: calc(36 * var(--u)) calc(32 * var(--u));
  box-sizing: border-box;
  background: #15153f;
  border: calc(6 * var(--u)) solid #ffe600;
  box-shadow: calc(12 * var(--u)) calc(12 * var(--u)) 0 #000;
  text-align: center;
}
.tl { margin: 0 0 calc(24 * var(--u)); }
.pick {
  width: calc(180 * var(--u));
  height: calc(180 * var(--u));
  margin: 0 auto calc(24 * var(--u));
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border: calc(6 * var(--u)) solid #ff2e97;
  border-radius: 0;
  box-shadow: calc(6 * var(--u)) calc(6 * var(--u)) 0 #000;
}
.pick::after { border: none; }
.pick-img { width: 100%; height: 100%; }
.pick-t { font-size: calc(26 * var(--u)); color: #ff2e97; font-weight: 700; }
.modal .ipt { text-align: left; }
.btn-go.small { font-size: calc(44 * var(--u)); line-height: calc(104 * var(--u)); animation: none; }
.skip { margin-top: calc(28 * var(--u)); font-size: calc(24 * var(--u)); color: #9a9ad0; }


/* ===== 网页版新增 ===== */
body { margin: 0; -webkit-text-size-adjust: 100%; }
.page { max-width: 480px; margin: 0 auto; }
.mask, .scan { max-width: none; }
.title { margin: 0; }
.topbar { display: flex; align-items: flex-start; justify-content: space-between; }
.tb-right { display: flex; padding-top: calc(14 * var(--u)); }
.tb-btn {
  margin-left: calc(12 * var(--u));
  padding: calc(6 * var(--u)) calc(16 * var(--u));
  font-size: calc(24 * var(--u));
  color: #00f0ff;
  background: #15153f;
  border: calc(4 * var(--u)) solid #00f0ff;
}
.btn:active, .alt:active, .tb-btn:active { transform: translate(calc(6 * var(--u)), calc(6 * var(--u))); box-shadow: calc(2 * var(--u)) calc(2 * var(--u)) 0 #000; }
.btn-go:active { transform: translate(calc(8 * var(--u)), calc(8 * var(--u))); box-shadow: 0 0 0 calc(6 * var(--u)) #39ff14, calc(4 * var(--u)) calc(4 * var(--u)) 0 calc(6 * var(--u)) #000; }
.btn, .btn-go { display: block; }
.btn-go.small { display: block; }
.err { min-height: calc(36 * var(--u)); margin-top: calc(16 * var(--u)); font-size: calc(24 * var(--u)); color: #ff2e97; text-align: center; }
.login { display: flex; flex-direction: column; justify-content: center; }
.login .title { margin-bottom: calc(8 * var(--u)); }
.field { margin-top: calc(24 * var(--u)); }
input[type=time].ipt { display: block; width: 100%; color: #ffe600; }
input.ipt { display: block; width: 100%; }
.dim { color: #9a9ad0; }
.link { color: #00f0ff; cursor: pointer; text-decoration: underline; }

/* 像素头像（SVG） */
.pix { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; }
.av, .me-av, .dm-av { overflow: hidden; padding: 0; }
.av > svg, .me-av > svg, .dm-av > svg { width: 100%; height: 100%; }
.avatar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(14 * var(--u)); margin-top: calc(8 * var(--u)); }
.av-opt { aspect-ratio: 1; padding: 0; background: #000; border: calc(4 * var(--u)) solid #6b6bb0; }
.av-opt.on { border-color: #ffe600; box-shadow: calc(6 * var(--u)) calc(6 * var(--u)) 0 #000; }

/* 弹窗（设置、管理） */
.modal { width: calc(660 * var(--u)); max-height: 90vh; overflow-y: auto; text-align: left; }
.modal .panel-h { margin-bottom: calc(12 * var(--u)); }
.modal .btn-go.small { margin-top: calc(28 * var(--u)); }
.modal-actions { display: flex; margin-top: calc(20 * var(--u)); }
.modal-actions .alt { flex: 1; margin: 0 calc(6 * var(--u)); line-height: calc(72 * var(--u)); }
.sect { margin-top: calc(32 * var(--u)); padding-top: calc(20 * var(--u)); border-top: calc(4 * var(--u)) dashed #2c2c66; }

/* 提示 */
.toast {
  position: fixed; left: 50%; bottom: calc(120 * var(--u)); z-index: 300;
  max-width: 90vw; padding: calc(16 * var(--u)) calc(32 * var(--u));
  color: #ffe600; background: #000; border: calc(4 * var(--u)) solid #ffe600; box-shadow: calc(6 * var(--u)) calc(6 * var(--u)) 0 #000;
  transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity 0.2s; text-align: center;
}
.toast.show { opacity: 1; }

/* 分享链接 */
.share-box { margin-top: calc(20 * var(--u)); padding: calc(16 * var(--u)); font-size: calc(22 * var(--u)); color: #9a9ad0; word-break: break-all; border: calc(4 * var(--u)) dashed #6b6bb0; }

/* 今晚的局（列表） */
.tl-row { display: flex; align-items: center; padding: calc(14 * var(--u)) 0; border-bottom: calc(4 * var(--u)) dashed #2c2c66; cursor: pointer; }
.tl-row:last-child { border-bottom: none; }
.tl-mid { flex: 1; min-width: 0; margin-left: calc(4 * var(--u)); }
.tl-sub { font-size: calc(22 * var(--u)); color: #9a9ad0; }

/* 用户管理 */
.ad-row { display: flex; align-items: center; padding: calc(16 * var(--u)) 0; border-bottom: calc(4 * var(--u)) dashed #2c2c66; }
.ad-row:last-child { border-bottom: none; }
.ad-mid { flex: 1; min-width: 0; }
.ad-btns { display: flex; flex-wrap: wrap; margin-top: calc(10 * var(--u)); }
.ad-btn { margin: 0 calc(10 * var(--u)) calc(8 * var(--u)) 0; padding: calc(4 * var(--u)) calc(16 * var(--u)); font-size: calc(22 * var(--u)); color: #00f0ff; background: #0b0b1e; border: calc(4 * var(--u)) solid #00f0ff; }
.ad-btn.danger { color: #ff2e97; border-color: #ff2e97; }
.tag.role { color: #ffe600; }
.off { opacity: 0.5; }
.back { margin-top: calc(24 * var(--u)); }

/* 顶栏：按钮不换行，标题稍小一点，管理页也放得下 */
.topbar .title { font-size: calc(56 * var(--u)); white-space: nowrap; }
.tb-right { flex: none; }
.tb-btn { white-space: nowrap; }

/* ===== 手机：一栏（顺序用 order 控制）；电脑 / 平板：两栏 ===== */
.page { display: flex; flex-direction: column; }
.cols, .col-l, .col-r { display: contents; }
.topbar { order: 0; }
#sec-cd { order: 1; } #go { order: 2; } #dm { order: 3; } #mebar { order: 4; }
#main { order: 5; } #tonight { order: 6; } #replies { order: 7; } #board { order: 8; }
.bottom-space { order: 99; }

@media (min-width: 900px) {
  :root { --u: 0.72px; }
  .page { max-width: 1120px; padding-left: 32px; padding-right: 32px; }
  .cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .col-l, .col-r { display: block; min-width: 0; }
  #sec-cd, #go, #dm, #mebar, #main, #tonight, #replies, #board { order: 0; }
  .page.admin { max-width: 860px; }
  .page.admin .cols { grid-template-columns: minmax(0, 1fr); }
  .page.login { max-width: 560px; }
  .avatar-grid { grid-template-columns: repeat(8, 1fr); }
}

/* 鼠标操作：悬停高亮、输入框聚焦 */
.ipt:focus { border-color: #00f0ff; }
.chip, .add-ok, .me-bar, .tl-row { cursor: pointer; user-select: none; }
@media (hover: hover) {
  .chip:hover, .tb-btn:hover, .ad-btn:hover, .alt:hover, .av-opt:hover, .tl-row:hover, .add-ok:hover { filter: brightness(1.3); }
  .btn:hover, .btn-go:hover { filter: brightness(1.1); }
  .me-bar:hover { border-color: #00f0ff; }
}

/* ===== 头像上传 / 登录账号下拉 / 只读的用户名 ===== */
img.pix { object-fit: cover; image-rendering: auto; }
.ipt.ro { color: #9a9ad0; background: #0b0b1e; cursor: default; user-select: text; }
select.ipt { display: block; width: 100%; padding: 0 calc(16 * var(--u)); cursor: pointer; appearance: auto; }
select.ipt option { color: #39ff14; background: #000; }
.av-now { display: flex; align-items: center; margin-bottom: calc(12 * var(--u)); }
.av-big { flex: none; width: calc(140 * var(--u)); height: calc(140 * var(--u)); overflow: hidden; border: calc(4 * var(--u)) solid #fff; box-shadow: calc(6 * var(--u)) calc(6 * var(--u)) 0 #000; background: #000; }
.av-btns { flex: 1; min-width: 0; margin-left: calc(24 * var(--u)); }
.av-btns .alt { display: block; width: 100%; margin: 0 0 calc(12 * var(--u)) 0; line-height: calc(64 * var(--u)); font-size: calc(26 * var(--u)); }
.av-btns .alt:last-child { margin-bottom: 0; }