/* ===========================================================
   浆果AI · 小侦探主题皮肤 v1
   用法：在页面 <head> 末尾（自带 <style> 之后）引入本文件
   <link rel="stylesheet" href="/ai-tools/assets/theme-detective.css">
   设计：覆盖式皮肤，不改页面结构；只统一视觉语言
   主色：蓝紫 #5B7CFA→#8B6CFF，点缀橙 #FFB020、粉 #FF7A9C
   =========================================================== */
:root{
  --dt-ink:#20243A; --dt-sub:#7C86A0; --dt-line:#E9EDF7;
  --dt-blue:#5B7CFA; --dt-blue2:#8B6CFF; --dt-orange:#FFB020; --dt-pink:#FF7A9C;
  --dt-ok:#22B573; --dt-err:#FF5A5F;
  --dt-sh:0 8px 24px rgba(70,90,160,.10);
  --dt-sh2:0 14px 36px rgba(70,90,160,.16);
  --dt-r:22px;
}

/* ---------- 背景 ---------- */
html{background:#F7FAFF}
body{
  background:
    radial-gradient(1100px 560px at 8% -12%,#DCE9FF 0%,transparent 62%),
    radial-gradient(880px 500px at 102% -4%,#FFE9F3 0%,transparent 58%),
    radial-gradient(900px 620px at 50% 112%,#FFF3D6 0%,transparent 62%),
    linear-gradient(180deg,#F7FAFF 0%,#FBF7FF 46%,#FFFCF4 100%) !important;
  background-attachment:fixed !important;
  color:var(--dt-ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- 顶栏 ---------- */
.top{
  background:rgba(255,255,255,.84) !important;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(233,237,247,.92) !important;
  box-shadow:0 2px 14px rgba(70,90,160,.05);
}
.top .in{padding-top:9px !important;padding-bottom:9px !important}
.logo,.top .logo{
  border-radius:13px !important;
  background:linear-gradient(135deg,#5B7CFA,#8B6CFF) !important;
  box-shadow:0 6px 14px rgba(91,124,250,.34);
  font-size:18px !important;
}
.top .nm{font-weight:800 !important;font-size:15px !important;letter-spacing:.2px}
.bk,.top .bk{
  color:#4A5580 !important;background:#fff !important;
  border:1.5px solid #E8EDFB !important;
  padding:8px 14px !important;border-radius:999px !important;
  font-weight:800 !important;font-size:12.5px !important;
  box-shadow:0 3px 10px rgba(70,90,160,.08);
  transition:transform .15s cubic-bezier(.4,1.4,.5,1);
}
.bk:active{transform:scale(.95)}

/* ---------- Hero ---------- */
.hero{padding:20px 2px 16px !important;text-align:center}
.hero h1, .page-header h1, .hd h1, .setup-page h1, .page-title h1, main h1{
  font-size:26px !important;line-height:1.22 !important;font-weight:900 !important;
  letter-spacing:-.4px;margin:0 0 8px !important;
  background:linear-gradient(135deg,#2F6BFF 0%,#8B5CF6 46%,#FF5FA2 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 0 rgba(255,255,255,.92)) drop-shadow(0 5px 12px rgba(91,124,250,.22));
}
.hero p, .page-header p, .hd p{color:#5C6684 !important;font-size:13.5px !important;line-height:1.75 !important;font-weight:600}

/* ---------- 卡片 ---------- */
.sec,.card,.panel,.box-card,.v,.q,.item,.case{
  background:#fff !important;
  border-radius:var(--dt-r) !important;
  border:1px solid #F0F3FC !important;
  box-shadow:var(--dt-sh) !important;
}
.sec{position:relative;overflow:hidden;padding:15px !important}
.sec::before{
  content:"";position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(90deg,#5B7CFA,#8B6CFF,#FF9AC0);
}
.sec h2{font-weight:800 !important;font-size:14px !important}
.sec h2 .n{
  background:linear-gradient(135deg,#EEF2FF,#E2E8FF) !important;color:#4A63D8 !important;
  border-radius:9px !important;font-weight:900 !important;
}

/* ---------- 胶囊/选项 ---------- */
.pill,.chip{
  border-radius:14px !important;font-weight:700 !important;
  background:#fff !important;border:2px solid #EFF2FB !important;
  transition:all .18s cubic-bezier(.4,1.4,.5,1);
}
.pill.on,.chip.on,.pill.active,.chip.active{
  background:linear-gradient(135deg,#5B7CFA,#7B6CFF) !important;
  color:#fff !important;border-color:transparent !important;
  box-shadow:0 8px 18px rgba(91,124,250,.30) !important;
}
.opt label,.option,.choice{
  border-radius:14px !important;border:2px solid #EEF1FA !important;
  background:#FCFDFF !important;font-weight:600;
  transition:all .15s cubic-bezier(.4,1.4,.5,1);
}
.opt label:active,.option:active,.choice:active{transform:scale(.97)}

/* ---------- 步骤/答案行 ---------- */
.step,.row,.line{
  border-radius:16px !important;
}

/* ---------- 按钮 ---------- */
.btn{
  border-radius:16px !important;font-weight:800 !important;
  font-family:inherit;transition:all .15s cubic-bezier(.4,1.4,.5,1);
}
.btn:active{transform:scale(.96)}
.btn.pri{
  background:linear-gradient(135deg,#5B7CFA 0%,#7B6CFF 60%,#9B6CFF 100%) !important;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(91,124,250,.36) !important;
}
.btn.gh{
  background:#fff !important;color:#47517A !important;
  border:1.5px solid #EDF0FA !important;
  box-shadow:0 4px 12px rgba(70,90,160,.10) !important;
}
.btn.ok,.btn.correct{
  background:linear-gradient(135deg,#22B573,#4CD08C) !important;
  box-shadow:0 10px 24px rgba(34,181,115,.32) !important;color:#fff !important;
}

/* ---------- 底部操作栏 ---------- */
.bar{
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.97) 42%) !important;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(233,237,247,.92) !important;
}

/* ---------- 通用文字层级 ---------- */
.hero p,.sub,.hint,.tip{color:#6B7590}

/* ---------- 结果/反馈块 ---------- */
.fb,.feedback,.result-box{
  border-radius:16px !important;
  border:1px dashed #D9E2FA !important;
  background:linear-gradient(180deg,#F8FAFF,#F4F7FF) !important;
}
.fb.ok,.right-ok{background:linear-gradient(180deg,#F1FBF6,#E9F9F1) !important;border-color:#BDEFD5 !important}
.fb.no,.right-no{background:linear-gradient(180deg,#FFF6F6,#FFEFEF) !important;border-color:#FFD5D6 !important}

/* ---------- 数字/算式强调 ---------- */
.mono,.stem,.q-num{font-variant-numeric:tabular-nums}

/* ---------- 小屏 ---------- */
@media(max-width:420px){
  .hero h1{font-size:23px !important}
  .hero{padding:16px 2px 12px !important}
  .sec{padding:13px !important}
}