/* ═══════════════════════════════════════════════════════
   小道军师 v5 共享UI — 深海蓝绿·磨砂玻璃·科技国学风
   注入到所有页面(主页+四子页面)的<style>之后
   设计: 深海蓝绿底色 + 青绿辉光 + 高对比按钮 + 输入框亮光
   ═══════════════════════════════════════════════════════ */

/* ── 0. CSS变量 ── */
:root{
  --bg-deep:#041428;
  --bg-mid:#0a2540;
  --bg-light:#0e3556;
  --teal:#0ea5e9;
  --teal-bright:#38bdf8;
  --teal-glow:rgba(14,165,233,0.15);
  --teal-border:rgba(14,165,233,0.25);
  --green-cyan:#0284c7;
  --cyan-ice:#7dd3fc;
  --text-primary:#e0f0ff;
  --text-secondary:#7da8c8;
  --text-muted:#5070a0;
  --card-bg:rgba(10,30,65,0.5);
  --card-bg-hover:rgba(15,40,85,0.65);
  --input-bg:rgba(4,20,28,0.6);
  --btn-bg:linear-gradient(135deg,rgba(2,132,199,0.45) 0%,rgba(14,165,233,0.35) 100%);
  --btn-bg-hover:linear-gradient(135deg,rgba(30,200,180,0.6) 0%,rgba(55,225,205,0.5) 100%);
  --btn-primary-bg:linear-gradient(135deg,rgba(14,165,233,0.55) 0%,rgba(103,232,249,0.45) 100%);
  --btn-primary-hover:linear-gradient(135deg,rgba(60,230,210,0.7) 0%,rgba(120,240,255,0.6) 100%);
}

/* ── 1. 背景层: 深海蓝绿渐变 ── */
.bg-tech{
  background:
    radial-gradient(ellipse at 15% 20%,rgba(2,132,199,0.12) 0%,transparent 55%),
    radial-gradient(ellipse at 85% 75%,rgba(14,165,233,0.08) 0%,transparent 55%),
    radial-gradient(ellipse at 50% 50%,rgba(10,80,140,0.06) 0%,transparent 60%),
    linear-gradient(165deg,#041428 0%,#0a2540 30%,#0e3556 50%,#0a2540 70%,#041428 100%) !important;
}

/* ── 2. 网格线: 青绿微光 ── */
.bg-grid{
  background-image:
    linear-gradient(rgba(14,165,233,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(14,165,233,0.025) 1px,transparent 1px) !important;
}

/* ── 3. 太极背景水印 ── */
.bg-taiji{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%232dd4bf' stroke-width='1.2'%3E%3Ccircle cx='50' cy='50' r='45'/%3E%3Ccircle cx='50' cy='50' r='30'/%3E%3Cpath d='M50 5 A45 45 0 0 1 50 95 A22.5 22.5 0 0 1 50 50 A22.5 22.5 0 0 0 50 5'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat !important;
}

/* ── 4. 顶部导航栏: 深色磨砂+青绿底光 ── */
.top-bar{
  background:rgba(4,20,28,0.65) !important;
  backdrop-filter:blur(28px) saturate(1.5) !important;
  -webkit-backdrop-filter:blur(28px) saturate(1.5) !important;
  border-bottom:1px solid rgba(14,165,233,0.2) !important;
  box-shadow:0 2px 30px rgba(2,132,199,0.08),inset 0 1px 0 rgba(56,189,248,0.08) !important;
}
.top-bar .logo{
  color:var(--teal-bright) !important;
  text-shadow:0 0 20px rgba(14,165,233,0.3) !important;
}
.top-bar a{
  color:rgba(141,186,178,0.7) !important;
  text-decoration:none !important;
  transition:all 0.3s !important;
}
.top-bar a:hover,.top-bar a.active{
  color:var(--teal-bright) !important;
  background:rgba(14,165,233,0.08) !important;
  text-shadow:0 0 10px rgba(14,165,233,0.3) !important;
}

/* ── 5. 卡片: 深色磨砂玻璃 — 明显浮于背景之上 ── */
.card,
.glass-card,
.info-card,
.result-card,
.alm-panel,
.hl-panel,
.analysis-box,
.ai-chat-box,
.hexagram-detail,
.palace-cell,
.consult-box,
.fortune-section,
#aiChat,
#resultArea,
#analysisResult,
#fortuneResult,
#paipanArea,
#interpretResult,
#consultResult,
#mingpanResult{
  background:linear-gradient(160deg,rgba(10,30,65,0.6) 0%,rgba(5,20,50,0.5) 50%,rgba(10,30,65,0.55) 100%) !important;
  backdrop-filter:blur(24px) saturate(1.5) !important;
  -webkit-backdrop-filter:blur(24px) saturate(1.5) !important;
  border:1px solid rgba(14,165,233,0.22) !important;
  border-radius:14px !important;
  box-shadow:
    0 6px 40px rgba(0,8,25,0.5),
    inset 0 1px 0 rgba(56,189,248,0.12),
    inset 0 0 30px rgba(14,165,233,0.03),
    0 0 0 1px rgba(14,165,233,0.05) !important;
  position:relative;
  overflow:hidden;
}

/* ── 6. 卡片顶部发光线 — 青绿光 ── */
.card::before,
.glass-card::before{
  content:'' !important;
  position:absolute !important;
  top:0;left:0;right:0 !important;
  height:1px !important;
  background:linear-gradient(90deg,transparent 0%,rgba(14,165,233,0.5) 50%,transparent 100%) !important;
}

/* ── 7. 卡片hover: 青绿辉光+上浮 ── */
.card:hover{
  border-color:rgba(56,189,248,0.4) !important;
  background:linear-gradient(160deg,rgba(15,40,85,0.7) 0%,rgba(10,30,65,0.6) 50%,rgba(15,40,85,0.65) 100%) !important;
  box-shadow:
    0 12px 50px rgba(0,8,25,0.55),
    0 0 40px rgba(14,165,233,0.12),
    inset 0 1px 0 rgba(56,189,248,0.2),
    inset 0 0 40px rgba(14,165,233,0.04) !important;
}

/* ── 8. 标题: 青绿色+辉光 ── */
.card h2,
.section-title,
h1{
  color:var(--teal-bright) !important;
  text-shadow:0 0 15px rgba(14,165,233,0.15) !important;
}

/* ── 9. 输入框: 深底+亮光边框+聚焦发光 ── */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea{
  background:var(--input-bg) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
  border:1px solid rgba(14,165,233,0.2) !important;
  border-radius:8px !important;
  color:var(--text-primary) !important;
  transition:border-color 0.3s,box-shadow 0.3s !important;
  box-shadow:inset 0 1px 4px rgba(0,0,0,0.25),0 0 0 1px rgba(14,165,233,0.03) !important;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
select:focus,
textarea:focus{
  border-color:rgba(56,189,248,0.6) !important;
  box-shadow:
    0 0 0 3px rgba(14,165,233,0.1),
    0 0 20px rgba(14,165,233,0.2),
    inset 0 1px 4px rgba(0,0,0,0.2) !important;
  outline:none !important;
}

/* ── 10. 按钮: 青绿高亮 — 明显色差于背景 ── */
button,
.btn,
button[type="submit"],
.btn-primary,
.btn-secondary{
  background:var(--btn-bg) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
  border:1px solid rgba(14,165,233,0.35) !important;
  border-radius:10px !important;
  color:#e0f0ff !important;
  font-weight:bold !important;
  transition:all 0.3s ease !important;
  box-shadow:
    0 4px 20px rgba(2,132,199,0.2),
    inset 0 1px 0 rgba(56,189,248,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.15) !important;
}

button:hover,
.btn:hover{
  background:var(--btn-bg-hover) !important;
  border-color:rgba(56,189,248,0.55) !important;
  box-shadow:
    0 6px 30px rgba(14,165,233,0.3),
    inset 0 1px 0 rgba(56,189,248,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.1) !important;
  transform:translateY(-2px) !important;
}

/* 主按钮 — 最亮层级，与背景最大色差 */
button[class*="primary"],
button[class*="gold"],
.btn-primary,
.btn:not(.btn-sm):not(.btn-secondary){
  background:var(--btn-primary-bg) !important;
  border:1px solid rgba(56,189,248,0.45) !important;
  color:#f0fdfa !important;
  text-shadow:0 1px 2px rgba(0,30,30,0.3) !important;
  box-shadow:
    0 4px 24px rgba(14,165,233,0.35),
    inset 0 1px 0 rgba(150,240,220,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.1) !important;
}

button[class*="primary"]:hover,
.btn-primary:hover,
.btn:not(.btn-sm):not(.btn-secondary):hover{
  background:var(--btn-primary-hover) !important;
  border-color:rgba(150,250,230,0.65) !important;
  box-shadow:
    0 6px 30px rgba(14,165,233,0.45),
    inset 0 1px 0 rgba(180,250,230,0.4) !important;
}

/* ── 11. 小按钮/快捷按钮 ── */
.btn-sm{
  background:rgba(14,165,233,0.2) !important;
  border:1px solid rgba(14,165,233,0.3) !important;
  color:var(--teal-bright) !important;
  box-shadow:0 2px 12px rgba(2,132,199,0.15) !important;
}
.btn-sm:hover{
  background:rgba(14,165,233,0.35) !important;
  border-color:rgba(56,189,248,0.5) !important;
}

/* ── 12. 聊天快捷按钮 ── */
.chat-quick-btn{
  border:1px solid rgba(14,165,233,0.2) !important;
  color:rgba(56,189,248,0.8) !important;
  background:transparent !important;
  transition:all 0.3s !important;
}
.chat-quick-btn:hover{
  background:rgba(14,165,233,0.1) !important;
  color:var(--teal-bright) !important;
  border-color:rgba(14,165,233,0.4) !important;
}

/* ── 13. 聊天消息 ── */
.chat-user{
  background:rgba(14,165,233,0.1) !important;
  border:1px solid rgba(14,165,233,0.15) !important;
}
.chat-ai{
  background:rgba(10,30,65,0.4) !important;
  border:1px solid rgba(14,165,233,0.12) !important;
}

/* ── 14. 信息条 ── */
.info-bar{
  background:linear-gradient(135deg,rgba(14,165,233,0.05) 0%,rgba(14,165,233,0.02) 100%) !important;
  border:1px solid rgba(14,165,233,0.08) !important;
}
.info-bar .item .val{
  color:var(--teal-bright) !important;
}
.info-bar .item .gz{
  color:var(--cyan-ice) !important;
}
.info-bar .item .tag{
  color:#fbbf24 !important;
}

/* ── 15. 九宫盘 ── */
.qimen-grid{
  background:rgba(14,165,233,0.08) !important;
  border:2px solid rgba(14,165,233,0.25) !important;
}
.palace{
  background:linear-gradient(135deg,rgba(10,30,65,0.9) 0%,rgba(5,20,50,0.85) 100%) !important;
}
.palace-name{
  color:var(--teal-bright) !important;
}
.palace-row.tianpan .val{
  color:var(--cyan-ice) !important;
}
.palace-row.dipan .val{
  color:#fbbf24 !important;
}
.palace-row.star .val{
  color:#c4b5fd !important;
}
.palace-row.shen .val{
  color:#86efac !important;
}
.palace-row.door .val{
  color:#fca5a5 !important;
}

/* ── 16. 解盘结果 ── */
.fortune-result{
  background:rgba(14,165,233,0.04) !important;
  border:1px solid rgba(14,165,233,0.08) !important;
}
.fortune-result .conclusion{
  color:var(--teal-bright) !important;
}
.fortune-result .conclusion.ok{
  color:#4ade80 !important;
}
.fortune-result .conclusion.bad{
  color:#f87171 !important;
}
.fortune-result .conclusion.neutral{
  color:#fbbf24 !important;
}

/* ── 17. 滚动条 ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:rgba(4,20,28,0.3)}
::-webkit-scrollbar-thumb{background:rgba(14,165,233,0.2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(14,165,233,0.35)}

/* ── 18. 文字选区 ── */
::selection{background:rgba(14,165,233,0.25);color:#a0f0e0}

/* ── 19. 全局背景流动光晕(子页面) — 青绿+深蓝 ── */
body::after{
  content:'';
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 600px 400px at 20% 30%,rgba(2,132,199,0.06),transparent),
    radial-gradient(ellipse 500px 300px at 80% 60%,rgba(14,165,233,0.04),transparent),
    radial-gradient(ellipse 400px 350px at 50% 80%,rgba(10,80,140,0.03),transparent);
  animation:body-glow 30s ease-in-out infinite alternate;
}
@keyframes body-glow{
  0%{transform:translate(0,0) scale(1);opacity:0.6}
  50%{transform:translate(15px,-10px) scale(1.05);opacity:0.8}
  100%{transform:translate(-10px,15px) scale(0.98);opacity:0.5}
}

/* ── 20. 表格 ── */
table{
  border-collapse:collapse !important;
}
th{
  background:rgba(14,165,233,0.08) !important;
  color:var(--teal-bright) !important;
  border-bottom:1px solid rgba(14,165,233,0.15) !important;
}
td{
  border-bottom:1px solid rgba(14,165,233,0.06) !important;
}
tr:hover td{
  background:rgba(14,165,233,0.03) !important;
}

/* ═══════════════════════════════════════════════════════
   21. 移动端自适应
   ═══════════════════════════════════════════════════════ */
@media(max-width:768px){
  .top-bar{
    padding:10px 14px !important;
    gap:12px !important;
    flex-wrap:wrap !important;
  }
  .top-bar .logo{
    font-size:16px !important;
    letter-spacing:2px !important;
  }
  .top-bar .logo span{
    display:none !important;
  }
  .top-bar nav{
    margin-left:0 !important;
    width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    gap:2px !important;
    scrollbar-width:none !important;
  }
  .top-bar nav::-webkit-scrollbar{display:none !important}
  .top-bar nav a{
    white-space:nowrap !important;
    padding:6px 12px !important;
    font-size:13px !important;
  }
  .container{
    padding:14px 12px !important;
    padding-bottom:calc(20px + env(safe-area-inset-bottom)) !important;
  }
  .card,.glass-card,.info-card,.result-card{
    padding:16px 14px !important;
    margin-bottom:14px !important;
    border-radius:12px !important;
  }
  h2,.section-title{
    font-size:15px !important;
    letter-spacing:2px !important;
  }
  .form-row{
    flex-direction:column !important;
    gap:8px !important;
  }
  .form-group{
    min-width:100% !important;
  }
  .form-group input,.form-group select{
    font-size:16px !important;
    padding:10px 12px !important;
  }
  .btn{
    width:100% !important;
    padding:12px 20px !important;
    font-size:14px !important;
    letter-spacing:2px !important;
  }
  .btn-sm{
    width:auto !important;
    padding:8px 14px !important;
    font-size:12px !important;
  }
  .chat-box{
    padding:12px 10px !important;
    max-height:340px !important;
  }
  .chat-msg{
    padding:8px 10px !important;
    font-size:13px !important;
    line-height:1.7 !important;
  }
  .chat-input input{
    font-size:16px !important;
  }
  .chat-quick-btn{
    padding:5px 10px !important;
    font-size:11px !important;
  }
  table{
    table-layout:fixed !important;
    width:100% !important;
  }
  th{
    padding:6px 3px !important;
    font-size:10px !important;
  }
  td{
    padding:5px 3px !important;
    font-size:12px !important;
    word-break:break-all !important;
  }
}

@media(max-width:480px){
  .top-bar{padding:8px 12px !important}
  .top-bar .logo{font-size:15px !important}
  .top-bar nav a{padding:5px 10px !important;font-size:12px !important}
  .container{padding:10px 10px !important;padding-bottom:calc(16px + env(safe-area-inset-bottom)) !important}
  .card,.glass-card,.info-card,.result-card{padding:14px 12px !important;margin-bottom:12px !important;border-radius:10px !important}
  h2,.section-title{font-size:14px !important}
  .card h2{margin-bottom:10px !important}
  input[type="text"],input[type="number"],input[type="date"],input[type="time"],select,textarea{font-size:16px !important}
  .chat-msg{font-size:12px !important;line-height:1.6 !important}
  .chat-user{margin-left:8px !important}
  .chat-ai{margin-right:8px !important}
}

@media(max-width:360px){
  .top-bar .logo{font-size:14px !important;letter-spacing:1px !important}
  .top-bar nav a{padding:4px 8px !important;font-size:11px !important}
  .container{padding:8px 8px !important}
  .card,.glass-card,.info-card,.result-card{padding:12px 10px !important}
  h2,.section-title{font-size:13px !important}
}