:root{
  --accent: #C97336;      /* 你指定的按钮颜色 */
 /* --overlay-bg: rgba(3,6,18,0.78); !* 更明显的遮罩 *!*/
  --overlay-bg: rgba(6,8,20,0.82);
/*  --card-bg: rgba(255,255,255,0.98);*/
  --card-bg: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,255,0.96));
}
.form-control:focus {
  color: #C97336;
  background-color: #fff;
  border: 1px solid #C97336;

  outline: 0;
  box-shadow: 0 0 0 .05rem rgb(198, 142, 23);
}

/* 覆盖容器基础 */
#searchOverlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* 初始禁用交互，visible 时启用 */
}
#searchOverlay[aria-hidden="false"] { pointer-events: auto; }

/* 遮罩背景 */
.overlay-bg {
  position: absolute;
  inset: 0;
  background: var(--overlay-bg);
  backdrop-filter: blur(6px) saturate(120%);
  transition: opacity 360ms cubic-bezier(.2,.9,.25,1);
  opacity: 0;
}

/* 中心容器（用于 scale 动画） */
.overlay-center {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 920px;
  padding: 1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  transform: scale(0.8);
  transition: transform 400ms cubic-bezier(.2,.9,.25,1), opacity 260ms ease;
  opacity: 0;
  pointer-events: none;
}

/* 搜索卡片视觉 */
.search-card {
  width: 100%;
  background: var(--card-bg);
  border-radius: 999px;
  box-shadow: 0 20px 50px rgba(8,10,30,0.55);
  padding: 8px;
}
.search-card .input-group { align-items: center; }

.search-input {
  border: none;
  box-shadow: none;
  padding: 18px 22px;
  border-radius: 999px;
  font-size: 1.05rem;
  line-height: 1;
  outline: none;
}
.search-input::placeholder { color: #9aa0b2; }

.search-btn {
  min-width: 62px;
  border-radius: 999px;
  min-height: 56px;
  border: none;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  margin-left: 8px;
  box-shadow: 0 0 0 .05rem rgb(198, 142, 23);
}
.search-btn:active { transform: translateY(1px); }

/* 关闭按钮（右下小 X，可选） */
/*  .overlay-close {
      position: absolute;
      right: 14px;
      top: 14px;
      background: transparent;
      border: none;
      color: rgba(255,255,255,0.9);
      font-size: 1.1rem;
      display: none; !* 小屏可显示，或按需显示 *!
  }*/

/* 隐藏状态（初始） */
.overlay-hidden .overlay-bg,
.overlay-hidden .overlay-center { /* 隐藏样式 */
  opacity: 0;
  transform: scale(0.88);
}
.overlay-hidden .overlay-close { /* 关闭按钮跟随遮罩一起隐藏 */
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* 可见状态：通过 aria-hidden 切换到 false */
#searchOverlay[aria-hidden="false"] .overlay-bg { opacity: 1; }
#searchOverlay[aria-hidden="false"] .overlay-center {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
#searchOverlay[aria-hidden="false"] .overlay-close {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

/* 出入动画的“波纹”效果（中心放大）：使用 pseudo element */
/*.overlay-center::before {
  content: "";
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(100,33,255,0.06), transparent 30%);
  transform: scale(0.9);
  transition: transform 480ms cubic-bezier(.2,.9,.25,1), opacity 360ms;
  opacity: 0;
  pointer-events: none;
}*/
#searchOverlay[aria-hidden="false"] .overlay-center::before {
  transform: scale(1);
  opacity: 1;
}

/* 响应式微调 */
@media (max-width: 768px) {
  .search-card { padding: 6px; }
  .search-input { padding: 14px 16px; font-size: 0.98rem; }
  .search-btn { min-width: 52px; min-height: 46px;padding: 10px 12px; }
  /* .overlay-close { display: inline-block; color: rgba(255,255,255,0.95); }*/
}
@media (max-width: 420px) {
  #searchOverlay { align-items: flex-start; padding-top: 12vh; }
  .overlay-center { max-width: 90%; transform-origin: top center; }
}

:root {
  --overlay-bg: rgba(4,6,20,0.82);
  --card-bg: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,255,0.96));
}

/* overlay 基础 */
#authOverlay { position: fixed; inset: 0; z-index: 2500; display:flex; align-items:center; justify-content:center; pointer-events:none; }
#authOverlay[aria-hidden="false"] { pointer-events:auto; }

.overlay-bg {
  position:absolute; inset:0; background:var(--overlay-bg); backdrop-filter: blur(6px) saturate(120%);
  opacity:0; transition: opacity 360ms cubic-bezier(.2,.9,.25,1);
}

.overlay-center {
  position:relative; z-index:2; width:100%; max-width:920px; padding:1rem; transform:scale(.86); transition: transform 420ms cubic-bezier(.2,.9,.25,1), opacity 260ms ease; opacity:0; pointer-events:none;
}

/* 卡片 */
.auth-card {
  width:100%; background:var(--card-bg); border-radius:18px; padding:22px; box-shadow: 0 30px 70px rgba(6,8,30,0.6);
}

.auth-header { padding-bottom:6px; border-bottom:1px solid rgba(18,20,40,0.04); }
.auth-title { font-weight:700; font-size:1.15rem; color:#0b0b1a; }

.auth-close { background:transparent; border:0; color:rgba(10,12,25,0.6); font-size:1.05rem; }

.auth-toggle { display:flex; gap:8px; justify-content:center; }
.toggle-btn { border-radius:999px; padding:6px 12px; border:1px solid rgba(10,12,25,0.06); background:transparent; color:rgba(10,12,25,0.65); }
.toggle-btn.active { background:var(--accent); color:#fff; border-color:transparent; box-shadow: 0 10px 28px #c8761994; }

.auth-form { margin:0; }
.form-grid { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.form-group { display:flex; flex-direction:column; gap:6px; }

.form-label { font-size:0.85rem; color:rgba(12,14,28,0.6); }

.auth-input {
  border: none; padding:14px 16px; border-radius:12px; background: #fff; box-shadow: inset 0 1px 0 rgba(10,12,20,0.02);
  font-size:1rem; outline: none;
}
.auth-input::placeholder { color:#aab0bf; }

.input-with-btn { display:flex; gap:8px; align-items:center; }
.send-code-btn {
  min-width:120px; white-space:nowrap; border-radius:10px; border:1px solid rgba(10,12,25,0.06); padding:8px 12px; background:transparent; cursor:pointer;
}
.send-code-btn.disabled { opacity:0.6; cursor:not-allowed; }

.auth-submit {
  background:var(--accent); color:#fff; border:none; padding:12px 16px; border-radius:12px; font-weight:600; box-shadow: 0 10px 28px #c8761994;
}

.d-none { display:none}

/* overlay visible 状态 */
#authOverlay[aria-hidden="false"] .overlay-bg { opacity:1; }
#authOverlay[aria-hidden="false"] .overlay-center { opacity:1; transform:scale(1); pointer-events:auto; }

/* 中心光圈效果 */
/*.overlay-center::before {
  content:""; position:absolute; inset:-30%; border-radius:50%; background: radial-gradient(circle at center, rgba(100,33,255,0.06), transparent 25%); transform:scale(.9); opacity:0; transition: transform 480ms, opacity 360ms;
  pointer-events:none;
}*/
#authOverlay[aria-hidden="false"] .overlay-center::before { transform:scale(1); opacity:1; }

/* responsive */
@media (max-width: 860px) { .form-grid { grid-template-columns: 1fr; } .auth-card { padding:18px; } }
@media (max-width: 420px) { .overlay-center { padding: 0 14px; transform-origin: top center; } .send-code-btn { min-width:100px; } }

/* overlay 基础 */
#signupOverlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events: none;
}
#signupOverlay[aria-hidden="false"] { pointer-events: auto; }

.overlay-bg {
  position:absolute; inset:0;
  background: var(--overlay-bg);
  backdrop-filter: blur(6px) saturate(120%);
  opacity:0;
  transition: opacity 360ms cubic-bezier(.2,.9,.25,1);
}

.overlay-center {
  position:relative;
  z-index:2;
  width:100%;
  max-width:880px;
  padding:18px;
  transform: scale(.88);
  transition: transform 420ms cubic-bezier(.2,.9,.25,1), opacity 260ms ease;
  opacity:0;
  pointer-events: none;
}

.signup-card {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 30px 70px rgba(6,8,30,0.6);
}

.signup-header { padding-bottom:8px; border-bottom:1px solid rgba(10,12,25,0.04); }
.signup-header h3 { margin:0; font-size:1.15rem; font-weight:700; color:#0b0b1a; }
.signup-close { background:transparent; border:0; font-size:1.05rem; color:rgba(10,12,25,0.6); }

.signup-form { margin:0; }
.form-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; margin-top:12px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group.full { grid-column: 1 / -1; }

.form-label { font-size:0.88rem; color:rgba(12,14,28,0.65); }

.signup-input {
  border: none;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgb(239, 208, 193);
  font-size: 0.98rem;
  outline: none;
}
.signup-input::placeholder { color:#aab0bf; }

.signup-submit {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0 10px 28px rgb(239, 208, 193);
}

/* visible 状态 */
#signupOverlay[aria-hidden="false"] .overlay-bg { opacity: 1; }
#signupOverlay[aria-hidden="false"] .overlay-center { opacity: 1; transform: scale(1); pointer-events: auto; }

/* 中心光圈 */
/*.overlay-center::before {
  content: "";
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(100,33,255,0.06), transparent 25%);
  transform: scale(.9);
  opacity: 0;
  transition: transform 480ms, opacity 360ms;
  pointer-events: none;
}*/
#signupOverlay[aria-hidden="false"] .overlay-center::before { transform: scale(1); opacity: 1; }

/* 小屏响应 */
@media (max-width: 860px) {
  .form-grid { grid-template-columns: 1fr; }
  .signup-card { padding: 18px; }
}
@media (max-width: 420px) {
  .overlay-center { transform-origin: top center; padding: 10px; }
  .signup-card { padding: 14px; }
}

/* 简单的错误样式 */
.field-error { border: 1px solid #e55353 !important; box-shadow: 0 0 0 4px rgba(229,83,83,0.06); }
.text-success { color: #15803d; }

.category-btn {
  border: 1.8px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  padding: 8px 28px;
  font-weight: 500;
  transition: all 0.3s ease;
  background-color: #fff;
}

.category-btn:hover,
.category-btn.active {
  background-color: var(--accent);
  color: #fff;
  box-shadow: 0 4px 10px rgb(239, 208, 193);
}