/* 玄空风水排盘 - APP风格样式 (移动端优先) */
:root{
  --bg:#0f1222; --bg2:#1a1f35; --card:#20264a; --card2:#252b52;
  --gold:#d4af37; --gold2:#f0d878; --text:#eaeaf2; --text2:#9aa0c3;
  --line:#313a6b; --accent:#7c5cff; --danger:#e74c3c; --ok:#2ecc71;
  --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px);
}
/* 白天模式 */
[data-theme="light"]{
  --bg:#f2f3f7; --bg2:#ffffff; --card:#ffffff; --card2:#f0f1f6;
  --gold:#9c7c1e; --gold2:#7a6114; --text:#1c1f2e; --text2:#5a5f7a;
  --line:#d8dbe6; --accent:#5a3ee0;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--gold2);outline-offset:3px}
html{font-size:16px}
body{
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  background:var(--bg); color:var(--text);
  overscroll-behavior:none; -webkit-font-smoothing:antialiased;
  user-select:none;
}
#app{display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:1280px;margin:0 auto;position:relative}

/* 顶部栏 */
.app-header{
  padding:calc(10px + var(--safe-top)) 16px 10px;text-align:left;
  background:linear-gradient(135deg,var(--bg2) 0%,var(--card2) 100%);
  border-bottom:1px solid var(--line);flex-shrink:0;
}
.header-title{font-size:1.15rem;font-weight:700;color:var(--gold);letter-spacing:2px;padding-right:150px}
.header-title i{margin-right:6px}
.header-sub{font-size:.7rem;color:var(--text2);margin-top:2px;letter-spacing:1px;padding-right:150px}

/* 头部工具栏: 语言+主题 */
.header-tools{position:absolute;top:calc(10px + var(--safe-top));right:12px;display:flex;gap:8px;align-items:center}
.app-header{position:relative}
.seg-lang{padding:2px}
.seg-lang .seg-btn{padding:4px 10px;font-size:.72rem;flex:none}
.theme-btn{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:var(--card2);color:var(--gold);cursor:pointer;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;transition:transform .3s;
}
.theme-btn:active{transform:rotate(40deg)}
.theme-btn .fa-moon{display:none}
[data-theme="light"] .theme-btn .fa-sun{display:none}
[data-theme="light"] .theme-btn .fa-moon{display:inline}

/* 主区域 */
.app-main{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:12px 16px 20px}
.page{display:none;animation:fadeIn .25s ease}
.page.active{display:block}
.legacy-data-note{margin:18px 0 4px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg2);color:var(--text2);font-size:.78rem;line-height:1.6}
.legacy-data-note p{margin:0 0 5px}.legacy-data-note a{color:var(--gold);font-weight:700;text-underline-offset:3px}.legacy-data-note a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.desktop-install{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-left:12px}.desktop-install-btn{padding:4px 9px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--gold);font:inherit;font-weight:700;cursor:pointer}.desktop-install-help{flex-basis:100%;margin:3px 0 0;color:var(--text2)}.desktop-install-help[hidden],.desktop-install[hidden]{display:none}@media(max-width:520px){.desktop-install{display:flex;margin:8px 0 0}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 底部标签栏 */
.tab-bar{
  display:flex;background:var(--bg2);border-top:1px solid var(--line);
  padding-bottom:var(--safe-bottom);flex-shrink:0;
}
.tab-item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 0 6px;background:none;border:none;color:var(--text2);
  font-size:.68rem;cursor:pointer;transition:color .2s;
}
.tab-item i{font-size:1.15rem}
.tab-item.active{color:var(--gold)}
.tab-item:active{opacity:.6}

/* 卡片与表单 */
.form-card{background:var(--card);border-radius:14px;padding:14px;margin-bottom:14px;border:1px solid var(--line)}
.form-row{margin-bottom:12px}
.form-row:last-child{margin-bottom:0}
.form-row>label{display:block;font-size:.8rem;color:var(--gold);margin-bottom:6px;font-weight:600}
.input-group{display:flex;gap:8px}
.input-group input{
  flex:1;background:var(--bg);border:1px solid var(--line);border-radius:10px;
  color:var(--text);padding:10px 12px;font-size:1rem;outline:none;min-width:0;
}
.input-group input:focus{border-color:var(--gold)}
.degree-hint{font-size:.75rem;color:var(--text2);margin-top:6px;line-height:1.5}

/* 按钮 */
.btn{
  background:var(--card2);border:1px solid var(--line);color:var(--text);
  border-radius:10px;padding:10px 16px;font-size:.9rem;cursor:pointer;transition:all .15s;
}
.btn:active{transform:scale(.96);opacity:.8}
.btn-small{padding:8px 14px;font-size:1rem;font-weight:700}
.btn-primary{
  background:linear-gradient(135deg,var(--gold) 0%,#b8952e 100%);
  color:#1a1a2e;font-weight:700;border:none;letter-spacing:2px;
}
.btn-block{width:100%;padding:13px;font-size:1rem;margin-top:4px}

/* 分段选择器 */
.seg-control{display:flex;background:var(--bg);border-radius:10px;padding:3px;border:1px solid var(--line)}
.seg-btn{
  flex:1;background:none;border:none;color:var(--text2);padding:8px;
  border-radius:8px;font-size:.85rem;cursor:pointer;transition:all .2s;
}
.seg-btn.active{background:var(--gold);color:#1a1a2e;font-weight:700}

/* 元运选择器 */
.yun-selector{display:grid;grid-template-columns:repeat(9,1fr);gap:4px}
.yun-btn{
  background:var(--bg);border:1px solid var(--line);color:var(--text);
  border-radius:8px;padding:8px 0;font-size:.85rem;cursor:pointer;text-align:center;
}
.yun-btn.active{background:var(--gold);color:#1a1a2e;font-weight:700;border-color:var(--gold)}

/* 二十四山选择器 */
.mountain-picker{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.mt-btn{
  background:var(--bg);border:1px solid var(--line);color:var(--text);
  border-radius:8px;padding:9px 0;font-size:.9rem;cursor:pointer;text-align:center;
}
.mt-btn.active{background:var(--accent);color:#fff;font-weight:700;border-color:var(--accent)}
.mt-btn .yy{display:block;font-size:.6rem;color:var(--text2);margin-top:1px}
.mt-btn.active .yy{color:#e0d8ff}

/* 月份选择 */
.month-selector{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}

/* 桌面端适配 */
@media(min-width:640px){
  .app-header{padding-left:24px;padding-right:24px}
  .app-main{padding-left:24px;padding-right:24px}
}
@media(min-width:768px){
  .app-main{padding:20px 24px}
  .form-card{padding:20px}
  .yun-selector{gap:8px}
  .yun-btn{padding:12px 0;font-size:1rem}
  .mt-btn{padding:12px 0;font-size:1rem}
  .mountain-picker{gap:6px}
}