/* B站舰长查询 - EO Pages 版样式 */
/* 自定义字体引入（新增） */
@font-face {
  font-family: "MyCustomFont"; /* 自定义字体名称，后续要用到 */
  src: url("https://static.baisensei.pro/js-css/jyhphy-2.woff2") format("woff2"), /* 优先用woff2格式 */
       url("https://static.baisensei.pro/js-css/jyhphy-2.woff") format("woff"); /* 备用格式 */
  font-weight: normal; /* 字体粗细 */
  font-style: normal; /* 字体样式 */
  font-display: swap; /* 优雅降级：先显示系统字体，加载完替换 */
}

*{box-sizing:border-box;margin:0;padding:0}

:root {
  --bg-img: none;
  --card-bg: rgba(255,255,255,0.15);
  --card-border: rgba(255,255,255,0.25);
  --text-main: #333;
  --text-sub: #999;
  --text-label: #555;
  --input-bg: #fff;
  --input-border: #e0e0e0;
  --input-focus: #667eea;
  --btn-text: #fff;
  --badge-z-bg: #fff3e0;
  --badge-z-color: #e65100;
  --badge-t-bg: #e3f2fd;
  --badge-t-color: #1565c0;
  --badge-j-bg: #e8f5e9;
  --badge-j-color: #2e7d32;
  --res-yes-bg: #e8f5e9;
  --res-yes-border: #a5d6a7;
  --res-no-bg: #fce4ec;
  --res-no-border: #ef9a9a;
  --res-load-bg: #e3f2fd;
  --res-load-border: #90caf9;
  --res-err-bg: #fff3e0;
  --res-err-border: #ffcc80;
  --stats-color: #888;
  --tip-color: #aaa;
  --spinner-border: rgba(21,101,192,0.2);
  --spinner-top: #1565c0;
  --pbar-bg: #e0e0e0;
}

body.light {
  --bg-img: var(--bg-img-light, none);
  --card-bg: rgba(255,255,255,0.15);
  --card-border: rgba(255,255,255,0.25);
  --text-main: #333;
  --text-sub: #999;
  --text-label: #555;
  --input-bg: #fff;
  --input-border: #e0e0e0;
  --input-focus: #667eea;
  --btn-text: #fff;
  --badge-z-bg: #fff3e0;
  --badge-z-color: #e65100;
  --badge-t-bg: #e3f2fd;
  --badge-t-color: #1565c0;
  --badge-j-bg: #e8f5e9;
  --badge-j-color: #2e7d32;
  --stats-color: #888;
  --tip-color: #aaa;
  --spinner-border: rgba(21,101,192,0.2);
  --spinner-top: #1565c0;
  --pbar-bg: #e0e0e0;
}

body.dark {
  --bg-img: var(--bg-img-dark, none);
  --card-bg: rgba(30,30,30,0.35);
  --card-border: rgba(255,255,255,0.15);
  --text-main: #e0e0e0;
  --text-sub: #aaa;
  --text-label: #bbb;
  --input-bg: rgba(255,255,255,0.1);
  --input-border: rgba(255,255,255,0.2);
  --input-focus: #90caf9;
  --btn-text: #fff;
  --badge-z-bg: rgba(255,152,0,0.2);
  --badge-z-color: #ffb74d;
  --badge-t-bg: rgba(33,150,243,0.2);
  --badge-t-color: #90caf9;
  --badge-j-bg: rgba(76,175,80,0.2);
  --badge-j-color: #a5d6a7;
  --stats-color: #aaa;
  --tip-color: #666;
  --spinner-border: rgba(144,202,249,0.2);
  --spinner-top: #90caf9;
  --pbar-bg: rgba(255,255,255,0.1);
}
body.dark::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* 亮度调整：0.4是遮罩透明度，值越大越暗（0-1） */
  z-index: -1; /* 保证遮罩在背景之上、内容之下 */
  pointer-events: none; /* 不影响页面交互 */
}
/*
 * 背景图片配置：
 * 在下面 4 个 CSS 变量中填入你的图片 URL 即可
 * 图A = PC浅色, 图C = PC深色, 图B = 移动浅色, 图D = 移动深色
 */
:root {
  --bg-img-light-pc: url('https://static.baisensei.pro/wp-content/胡桃Usa三周年壁纸A.png');    /* 图A: PC浅色背景URL */
  --bg-img-dark-pc: url('https://static.baisensei.pro/wp-content/c96bb03313974d6c2ca69e4affa04ab9.png');   /* 图C: PC深色背景URL */
  --bg-img-light-mobile: url('https://static.baisensei.pro/wp-content/10876be93b5d59314e13dc99468513ce.png'); /* 图B: 移动浅色背景URL */
  --bg-img-dark-mobile: url('https://static.baisensei.pro/wp-content/fad14eef6d97453e1140d32bbd565434.png');  /* 图D: 移动深色背景URL */
}

body{
  font-family:"MyCustomFont", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* 替换为自定义字体，保留系统字体兜底 */
  /* 默认渐变背景（未填图片时生效） */
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  /* 图片背景：由JS根据设备+模式设置 --bg-img 变量 */
  background-image: var(--bg-img);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:20px;
  transition: background-image 0.5s ease;
  position: relative; /* 新增：为深色模式遮罩层定位 */
}

@media (max-width:768px) {
  body {
    --bg-img-light: var(--bg-img-light-mobile, none);
    --bg-img-dark: var(--bg-img-dark-mobile, none);
  }
}
@media (min-width:769px) {
  body {
    --bg-img-light: var(--bg-img-light-pc, none);
    --bg-img-dark: var(--bg-img-dark-pc, none);
  }
}

.card{
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--card-border);
  border-radius:16px;padding:36px 32px;
  max-width:520px;width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,0.25);
  animation:cardIn .5s ease-out;
  transition: background 0.3s ease, border-color 0.3s ease;
}

@keyframes cardIn{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}

h1{font-size:22px;color:var(--text-main);margin-bottom:4px;animation:titleIn .6s ease-out .1s both;transition:color 0.3s ease}
.sub{font-size:13px;color:var(--text-sub);margin-bottom:24px;transition:color 0.3s ease}

@keyframes titleIn{
  from{opacity:0;transform:translateX(-20px)}
  to{opacity:1;transform:translateX(0)}
}

/* 房间号 + 查询输入 */
.ig{margin-bottom:18px;animation:fadeIn .5s ease-out .2s both}
.ig+.ig{margin-top:0}

label{display:block;font-size:13px;font-weight:600;color:var(--text-label);margin-bottom:6px;transition:color 0.3s ease}

input[type=text]{
  width:100%;padding:11px 14px;
  background: var(--input-bg);
  border:2px solid var(--input-border);border-radius:8px;
  font-size:15px;color:var(--text-main);
  transition:border-color .2s,box-shadow .2s,background 0.3s ease,color 0.3s ease;
}
input[type=text]:focus{outline:none;border-color:var(--input-focus);box-shadow:0 0 0 3px rgba(102,126,234,0.15)}
body.dark input[type=text]:focus{box-shadow:0 0 0 3px rgba(144,202,249,0.15)}

.btn{
  width:100%;padding:12px;
  background:linear-gradient(135deg,#667eea,#764ba2);
  color:var(--btn-text);border:none;border-radius:8px;
  font-size:15px;font-weight:600;cursor:pointer;
  transition:opacity .2s,transform .1s,box-shadow .2s;
  margin-top:4px;
}
.btn:hover{opacity:.88;transform:translateY(-1px);box-shadow:0 4px 12px rgba(102,126,234,0.3)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

.btn-clear{
  width:100%;padding:10px;
  background:rgba(255,255,255,0.2);color:var(--text-label);
  border:2px solid var(--input-border);border-radius:8px;
  font-size:14px;font-weight:500;cursor:pointer;
  transition:all .2s;margin-top:8px;
  backdrop-filter:blur(10px);
}
.btn-clear:hover{background:rgba(255,255,255,0.3);border-color:var(--text-sub);color:var(--text-main);transform:translateY(-1px)}
.btn-clear:active{transform:translateY(0)}

.res{
  margin-top:20px;padding:18px;border-radius:8px;
  font-size:14px;line-height:1.7;display:none;
  animation:fadeIn .4s ease-out;
  transition:background 0.3s ease,border-color 0.3s ease,color 0.3s ease;
}
.res.show{display:block;animation:fadeIn .4s ease-out}
.res.yes{background:var(--res-yes-bg);color:#2e7d32;border:1px solid var(--res-yes-border)}
.res.no{background:var(--res-no-bg);color:#c62828;border:1px solid var(--res-no-border)}
.res.load{background:var(--res-load-bg);color:#1565c0;border:1px solid var(--res-load-border)}
.res.err{background:var(--res-err-bg);color:#e65100;border:1px solid var(--res-err-border)}
body.dark .res.yes{color:#a5d6a7}body.dark .res.no{color:#ef9a9a}
body.dark .res.load{color:#90caf9}body.dark .res.err{color:#ffcc80}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

/* 加载旋转动画 */
.spinner{
  display:inline-block;
  width:14px;height:14px;
  border:2px solid var(--spinner-border);
  border-top-color:var(--spinner-top);
  border-radius:50%;
  animation:spin .8s linear infinite;
  vertical-align:middle;
  margin-right:6px;
}

@keyframes spin{to{transform:rotate(360deg)}}

.pbar{
  width:100%;height:5px;background:var(--pbar-bg);
  border-radius:3px;margin:10px 0;overflow:hidden;display:none;
  transition:background 0.3s ease;
}
.pbar.show{display:block;animation:fadeIn .3s ease-out}
.pfill{
  height:100%;background:linear-gradient(90deg,#667eea,#764ba2);
  border-radius:3px;transition:width .4s ease-out;
  position:relative;
}
/* 进度条流光效果 */
.pfill::after{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);
  animation:shimmer 1.5s infinite;
}
@keyframes shimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}

.badge{display:inline-block;padding:1px 7px;border-radius:3px;font-size:11px;font-weight:600;margin:0 2px}
.b-z{background:var(--badge-z-bg);color:var(--badge-z-color)}
.b-t{background:var(--badge-t-bg);color:var(--badge-t-color)}
.b-j{background:var(--badge-j-bg);color:var(--badge-j-color)}

.stats{margin-top:12px;font-size:12px;color:var(--stats-color);animation:fadeIn .5s ease-out .3s both;transition:color 0.3s ease}
.tip{margin-top:10px;font-size:12px;color:var(--tip-color);transition:color 0.3s ease}

/* 深色模式切换按钮 */
.theme-toggle{
  position:fixed;top:16px;right:16px;z-index:999;
  width:40px;height:40px;
  background:var(--card-bg);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--card-border);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:18px;
  transition:all .3s ease;
  user-select:none;
}
.theme-toggle:hover{transform:scale(1.1);box-shadow:0 4px 12px rgba(0,0,0,0.2)}
.theme-toggle:active{transform:scale(0.95)}