/* 样式完整迁移 */

*{margin:0;padding:0;box-sizing:border-box}
:root{
--primary:#3b82f6;
--secondary:#8b5cf6;
--bg:#f7f9fc;
--card:#ffffff;
--border:#e5e7eb;
--text:#0f172a;
--muted:#64748b;
--spring:cubic-bezier(.2,.9,.2,1);
}

body.dark{
--bg:#0e1628;
--card:#131f36;
--border:#22304d;
--text:#eaf0ff;
--muted:#9fb0d0;
}

body{
font-family:Inter,sans-serif;
min-height:100vh;
background:radial-gradient(circle at 20% 10%, #eef2ff, var(--bg) 60%);
color:var(--text);
transition:.3s var(--spring);
}

body.dark{
background:radial-gradient(circle at 20% 10%, #1a2450, #0e1628 60%);
}

/* 统一 Q 弹 */
button,.group-btn,.group-add,.card,.tool-btn{
transition:.35s var(--spring);
}
button:hover,.group-btn:hover,.group-add:hover,.tool-btn:hover{
transform:scale(1.08);
}

.container{
min-height:100vh;
display:flex;
flex-direction:column;
align-items:center;
padding:10vh 16px 50px;
}

/* LOGO */
.logo{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:44px;
  transition:.5s cubic-bezier(.2,1.2,.3,1);
  animation:logoFloat 4s ease-in-out infinite;
}

.logo img{
  width:500px;
  height:500px;
  object-fit:contain;
  filter:
    drop-shadow(0 10px 25px rgba(0,0,0,.25))
    drop-shadow(0 0 20px rgba(59,130,246,.25));
  transition:.45s cubic-bezier(.2,1.2,.3,1);
}

/* 悬停放大 */
.logo:hover img{
  transform:scale(1.12) rotate(-2deg);
  filter:
    drop-shadow(0 18px 40px rgba(0,0,0,.35))
    drop-shadow(0 0 30px rgba(59,130,246,.45));
}

/* 轻微“呼吸漂浮”动画 */
@keyframes logoFloat{
  0%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
  100%{transform:translateY(0)}
}

/* 工具栏 */
.toolbar{
position:fixed;top:16px;right:16px;z-index:10;
}
.tool-btn{
padding:8px 16px;border-radius:999px;
border:1px solid var(--border);
background:var(--card);color:var(--text);
cursor:pointer;font-size:13px;
}

/* 搜索 */
.search-wrap{
width:100%;max-width:720px;text-align:center;margin-bottom:36px;
}

.engine-switch{
position:relative;display:inline-flex;
background:var(--card);border-radius:999px;
padding:6px;border:1px solid var(--border);margin-bottom:16px;
}
.engine-bg{
position:absolute;top:6px;bottom:6px;left:6px;
width:calc(50% - 6px);
background:linear-gradient(90deg,var(--primary),var(--secondary));
border-radius:999px;transition:.35s;
}
.engine-bg.google{transform:translateX(100%)}

.engine-switch button{
position:relative;z-index:1;border:none;
padding:8px 22px;border-radius:999px;
background:transparent;cursor:pointer;
font-weight:600;color:var(--muted)
}
.engine-switch button.active{color:#fff}

.search-input{
width:100%;padding:20px 24px;border-radius:999px;
border:1px solid var(--border);
background:#fff;font-size:16px;outline:none;
text-align:center;color:var(--text);
box-shadow:0 14px 30px rgba(0,0,0,.08);
transition:transform .45s var(--spring),box-shadow .45s var(--spring);
}
.search-input:focus{
transform:scale(1.06);
box-shadow:
0 0 0 4px rgba(59,130,246,.18),
0 28px 70px rgba(59,130,246,.25);
}
.search-input::placeholder{color:var(--muted)}
.search-input:focus::placeholder{opacity:.3}

/* 分组 */
.group-bar{
margin-bottom:18px;
display:flex;gap:10px;flex-wrap:wrap;justify-content:center
}
.group-btn{
padding:8px 16px;border-radius:999px;border:1px solid var(--border);
background:var(--card);cursor:pointer;
font-size:13px;display:flex;align-items:center;gap:6px;
user-select:none;
}
.group-btn.active{border-color:var(--primary);color:var(--primary)}
.group-btn em{
font-style:normal;color:#ef4444;
opacity:0;transform:scale(.6);transition:.25s;
}
.group-btn:hover em{opacity:1;transform:scale(1)}

.group-add{
width:32px;height:32px;border-radius:50%;
border:1px dashed var(--border);
display:flex;align-items:center;justify-content:center;
color:var(--muted);cursor:pointer;opacity:.5;
}

.group-edit{
font-size:12px;
cursor:pointer;
color:var(--muted);
}
.group-btn:hover .group-edit{
color:var(--primary);
}

/* Grid */
.grid{
width:100%;max-width:1080px;
display:grid;
grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
gap:26px;margin-top:20px;
}

/* Card */
.card{
background:var(--card);
border-radius:22px;
padding:22px 14px 20px;
text-align:center;
border:1px solid var(--border);
box-shadow:0 12px 30px rgba(0,0,0,.08);
cursor:pointer;position:relative;
}
.card:hover{transform:translateY(-10px) scale(1.08)}
.card.dragging{
opacity:.7;
transform:scale(1.1);
box-shadow:0 30px 80px rgba(0,0,0,.35);
}

.delete{
position:absolute;top:6px;right:6px;
width:20px;height:20px;border-radius:50%;
background:#ef4444;color:#fff;font-size:12px;
display:flex;align-items:center;justify-content:center;
opacity:0;transition:.2s
}
.card:hover .delete{opacity:1}

.favicon{
width:44px;height:44px;border-radius:12px;
margin-bottom:10px;background:#f1f5f9
}
.name{
font-size:14px;font-weight:600;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}

/* 添加按钮 */
.custom-btn{margin-top:36px}
.custom-btn button{
padding:12px 30px;border-radius:999px;
border:1px solid var(--border);
background:var(--card);cursor:pointer;font-weight:600;
}

/* 弹窗 */
.modal-mask{
position:fixed;inset:0;background:rgba(0,0,0,.45);
display:none;align-items:center;justify-content:center;z-index:99
}
.modal{
width:90%;max-width:380px;
background:var(--card);border-radius:24px;
padding:26px;box-shadow:0 40px 90px rgba(0,0,0,.35);
transform:scale(.5);opacity:0;transition:.35s
}
.modal.show{transform:scale(1);opacity:1}
.modal input,.modal select{
width:100%;margin-bottom:12px;padding:12px 14px;
border-radius:14px;border:1px solid var(--border);
background:var(--bg);color:var(--text)
}
.modal button{
width:100%;margin-top:10px;padding:12px;
border-radius:999px;border:none;
background:linear-gradient(90deg,var(--primary),var(--secondary));
color:#fff;font-weight:600;cursor:pointer
}

footer{margin-top:60px;font-size:12px;color:var(--muted)}

/* ✅ 夜间模式细节 */
body.dark .search-input{
  background:#0e1628;
  color:#eaf0ff;
  caret-color:#60a5fa;
  box-shadow:
    0 0 0 1px #22304d,
    0 20px 50px rgba(0,0,0,.6);
}

body.dark .custom-btn button{
  background:#1a2440;
  border-color:#2b3a5f;
  color:#c7d2fe;
}

body.dark .custom-btn button:hover{
  background:#223060;
  color:#ffffff;
}

body.dark .search-input::placeholder{
  color:#9fb0d0;
}
/* ============= 访问验证遮罩 ============= */
.auth-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.94);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.auth-dialog{
  width:90%;
  max-width:320px;
  background:var(--card);
  border-radius:24px;
  padding:24px 20px;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  text-align:center;
}
.auth-dialog h2{
  margin-bottom:8px;
  font-size:18px;
}
.auth-tip{
  font-size:13px;
  color:var(--muted);
  margin-bottom:16px;
}
.auth-dialog input{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  margin-bottom:10px;
}
.auth-dialog button{
  width:100%;
  padding:10px;
  border-radius:999px;
  border:none;
  background:linear-gradient(90deg,var(--primary),var(--secondary));
  color:#fff;
  font-weight:600;
  cursor:pointer;
}
.auth-error{
  margin-top:8px;
  font-size:12px;
  color:#f97373;
}