* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: #e8ecf5;
  font: 14px/1.5 "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

#sky {
  position: fixed;
  inset: 0;
  display: block;
}

/* ============ 留言浮层 ============ */
#msgLayer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.msg {
  position: absolute;
  left: 0;
  top: 0;                           /* 位置用 left/top 一步到位，绝不做位移过渡 */
  max-width: min(58vw, 420px);
  padding: 4px 6px;
  font-size: 15px;
  letter-spacing: .5px;
  color: #f6f9ff;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* 纯文字：禁止长按选中框 / 长按弹菜单 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  /* 泛光收紧范围，避免形成矩形光块 */
  text-shadow:
    0 0 2px rgba(255, 255, 255, .85),
    0 0 5px rgba(200, 222, 255, .55),
    0 0 11px rgba(150, 190, 255, .28);
  opacity: 0;                       /* 默认：暗 */
  /* 只做透明度过渡，位置永远不变：不漂移、不缩放、不闪烁 */
  transition: opacity 1.6s ease;
  will-change: opacity;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 落位阶段：位置已由 left/top 定死 */
.msg.placing { transition: opacity 1.6s ease; }
/* 最亮状态 */
.msg.show {
  opacity: 1;
  transition: opacity 1.6s ease;
}
/* ============ 霓虹 / 横幅 / 固定 ============ */
.neon {
  font-weight: 700;
  color: #fff;
  text-shadow:
    0 0 3px var(--nc, #0ff),
    0 0 8px var(--nc, #0ff),
    0 0 18px var(--nc, #0ff),
    0 0 34px var(--nc, #0ff);
}
.n-pink   { --nc: #ff2d95; }
.n-cyan   { --nc: #22e6ff; }
.n-purple { --nc: #b14bff; }
.n-blue   { --nc: #3b7bff; }
.n-green  { --nc: #2bff88; }
.n-yellow { --nc: #ffe14d; }
.n-red    { --nc: #ff3b3b; }
.n-orange { --nc: #ff9a2b; }
.n-white  { --nc: #ffffff; }

.banner-layer {
  position: fixed;
  top: 8%;
  left: 0; right: 0;
  height: 0;
  z-index: 14;
  pointer-events: none;
  overflow: hidden;
}
.banner {
  position: absolute;
  top: 0; left: 0;
  white-space: nowrap;
  font-size: 22px;
  letter-spacing: 2px;
  padding: 6px 18px;
  animation: slideLeft 9s linear forwards;
}
@keyframes slideLeft {
  from { transform: translateX(100vw); }
  to   { transform: translateX(-110%); }
}

.fixed-msg {
  position: absolute;
  left: 50%;
  top: 13%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 22px;
  letter-spacing: 2px;
  padding: 4px 10px;
  z-index: 14;
  animation: fixedFade 9s ease-in-out infinite;
}
@keyframes fixedFade {
  0%   { opacity: 0; }
  14%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { opacity: 0; }
}
@media (max-width: 640px) {
  .banner, .fixed-msg { font-size: 15px; letter-spacing: 1px; }
}

/* ============ 页面切换 ============ */
.page-switch {
  display: flex;
  gap: 6px;
  padding: 4px;
  margin: 0 0 6px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(6px);
}
.ps-btn {
  flex: 1;
  padding: 9px 4px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #93a3bd;
  font: 13px/1.3 inherit;
  letter-spacing: 1px;
  cursor: pointer;
  transition: color .2s, background .2s;
}
.ps-btn:hover { color: #dce6f8; }
.ps-btn.on {
  background: rgba(111, 151, 255, .26);
  color: #eaf0ff;
  box-shadow: inset 0 0 0 1px rgba(150, 185, 255, .45);
}

.neon-pick, .mode-pick { display: flex; flex-wrap: wrap; gap: 7px; }
.mode-pick { gap: 6px; }
.nsw {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: var(--nc, #0ff);
  cursor: pointer;
  padding: 0;
  transition: transform .15s, box-shadow .15s;
}
.view-bar { margin: 10px 0 0; color: #e2b46a; }
.admin-list li.clickable { cursor: pointer; transition: background .2s; }
.admin-list li.clickable:hover { background: rgba(255, 255, 255, .045); }
.nsw:hover { transform: scale(1.12); }
.nsw.on { box-shadow: 0 0 0 2px rgba(255, 255, 255, .75); }
.md-btn {
  flex: 1;
  min-width: 84px;
  padding: 8px 4px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 9px;
  background: rgba(255, 255, 255, .04);
  color: #a9b8d0;
  font: 12px/1.3 inherit;
  cursor: pointer;
  transition: color .2s, background .2s, border-color .2s;
}
.md-btn:hover { color: #fff; }
.md-btn.on {
  background: rgba(111, 151, 255, .26);
  border-color: rgba(150, 185, 255, .5);
  color: #eaf0ff;
}

/* ============ 侧边栏 ============ */
.panel-toggle {
  position: fixed;
  top: 18px; right: 18px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  background: rgba(12, 16, 28, .55);
  color: #cfd8ea;
  backdrop-filter: blur(10px);
  cursor: pointer;
  z-index: 30;
  transition: color .2s, border-color .2s, transform .3s;
}
.panel-toggle:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
.panel-toggle .ic { width: 20px; height: 20px; }

.panel {
  position: fixed;
  top: 0; right: 0;
  width: 288px;
  height: 100%;
  padding: 72px 0 24px;
  background: rgba(8, 11, 20, .82);
  border-left: 1px solid rgba(255, 255, 255, .09);
  backdrop-filter: blur(14px);
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
  z-index: 25;
  display: flex;
  flex-direction: column;
}
.panel.open { transform: none; }

.panel-hd {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: 14px;
  letter-spacing: 2px;
  color: #dbe3f4;
}
.panel-hd .ic { width: 18px; height: 18px; opacity: .8; }
.panel-hd span { flex: 1; }

.mini {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: transparent;
  color: #9fb0cc;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.mini:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
.mini .ic { width: 15px; height: 15px; }

.panel-bd {
  flex: 1;
  overflow-y: auto;
  padding: 4px 18px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
.panel-bd::-webkit-scrollbar { width: 5px; }
.panel-bd::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 3px; }

.sec-title {
  margin: 18px 0 10px;
  font-size: 11px;
  letter-spacing: 3px;
  color: #6d7d99;
  text-transform: uppercase;
}

.row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  color: #b8c4da;
  cursor: pointer;
}
.row .ic { width: 17px; height: 17px; flex: none; opacity: .75; }
.row .lb { width: 56px; flex: none; font-size: 13px; }
.row .val {
  width: 34px;
  flex: none;
  text-align: right;
  font-size: 12px;
  color: #7f8fa8;
  font-variant-numeric: tabular-nums;
}

input[type="range"] {
  flex: 1;
  min-width: 0;
  height: 3px;
  appearance: none;
  background: rgba(255, 255, 255, .16);
  border-radius: 3px;
  accent-color: #8fb4ff;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #cfe0ff;
  box-shadow: 0 0 8px rgba(140, 180, 255, .6);
}
input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px; border: none;
  border-radius: 50%;
  background: #cfe0ff;
}

.swatches { display: flex; gap: 7px; flex: 1; }
.sw {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  cursor: pointer;
  padding: 0;
  transition: transform .15s, box-shadow .15s;
}
.sw:hover { transform: scale(1.15); }
.sw.on { box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); }

.switch { position: relative; width: 38px; height: 20px; flex: none; margin-left: auto; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.slider {
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, .14);
  border-radius: 20px;
  transition: background .22s;
  pointer-events: none;
}
.slider::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #dfe7f6;
  transition: transform .22s;
}
.switch input:checked + .slider { background: #6f97ff; }
.switch input:checked + .slider::after { transform: translateX(18px); }

.hint {
  margin: 18px 0 0;
  font-size: 11px;
  color: #6d7d99;
  line-height: 1.7;
}
.dim { color: #58657c; }
.hint.err { color: #e0796f; margin: 8px 0 0; min-height: 14px; }

/* ============ 管理员 ============ */
.wide-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  color: #c2cee4;
  font: 13px/1.4 inherit;
  letter-spacing: 1px;
  cursor: pointer;
  transition: color .2s, background .2s, border-color .2s;
}
.wide-btn:hover { color: #fff; background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .28); }
.wide-btn .ic { width: 16px; height: 16px; }
.wide-btn.primary { background: rgba(111, 151, 255, .2); border-color: rgba(140, 175, 255, .45); color: #e8efff; }
.wide-btn.primary:hover { background: rgba(111, 151, 255, .32); }

.login-box { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.login-box input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 9px;
  background: rgba(255, 255, 255, .05);
  color: #eef3ff;
  font: 13px/1.4 inherit;
  outline: none;
  transition: border-color .2s, background .2s;
}
.login-box input:focus { border-color: rgba(140, 175, 255, .6); background: rgba(255, 255, 255, .08); }
.login-box input::placeholder { color: #5d6b85; }
.login-row { display: flex; gap: 8px; }
.login-row .wide-btn { padding: 9px 12px; }

.admin-view {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 18px 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
.admin-view::-webkit-scrollbar { width: 5px; }
.admin-view::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 3px; }

.admin-list { list-style: none; margin: 0; padding: 0; }
.admin-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.admin-list .txt { flex: 1; min-width: 0; }
.admin-list .txt p {
  margin: 0;
  font-size: 13px;
  color: #dbe4f5;
  line-height: 1.5;
  word-break: break-word;
}
.admin-list .txt time { display: block; margin-top: 3px; font-size: 11px; color: #5f6d87; }
.del-btn {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: transparent;
  color: #8b99b3;
  cursor: pointer;
  transition: color .2s, background .2s, border-color .2s;
}
.del-btn:hover { color: #ff9b93; background: rgba(255, 120, 110, .14); border-color: rgba(255, 140, 130, .4); }
.del-btn .ic { width: 15px; height: 15px; }

.mini.back { margin-right: 2px; }

/* ============ 底部留言入口 ============ */
.compose-btn {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(10, 14, 24, .5);
  color: #c9d5ec;
  font-size: 13px;
  letter-spacing: 1px;
  backdrop-filter: blur(10px);
  cursor: pointer;
  z-index: 20;
  transition: color .2s, border-color .2s, background .2s, opacity .3s;
}
.compose-btn:hover { color: #fff; border-color: rgba(255, 255, 255, .34); background: rgba(18, 24, 40, .7); }
.compose-btn.hide { opacity: 0; pointer-events: none; }
.compose-btn .ic { width: 16px; height: 16px; }

.compose-panel {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  width: min(92vw, 520px);
  z-index: 21;
}
.compose-panel[hidden] { display: none; }

.compose-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 16px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(10, 14, 24, .82);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, .5);
}
.compose-inner input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: #f2f6ff;
  font: 14px/1.5 inherit;
  letter-spacing: .5px;
}
.compose-inner input::placeholder { color: #6b7896; }
.counter { font-size: 11px; color: #64738f; font-variant-numeric: tabular-nums; }

.send, .close {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  background: transparent;
  color: #b9c6de;
  cursor: pointer;
  flex: none;
  transition: color .2s, background .2s, border-color .2s;
}
.send:hover { color: #fff; background: rgba(110, 150, 255, .28); border-color: rgba(150, 185, 255, .5); }
.close:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.send .ic, .close .ic { width: 16px; height: 16px; }

@media (max-width: 640px) {
  .panel { width: 84vw; }
  /* 手机上缩小字号，保证 25 个中文字符也能完整显示 */
  .msg {
    font-size: 12.5px;
    max-width: 88vw;
    padding: 3px 4px;
    letter-spacing: 0;
  }
  .compose-btn { bottom: 24px; }
  .compose-panel { bottom: 24px; }
}