/* ================================================================
   梅花易数 base.css — 共享样式（web + mob 共用）
   ================================================================ */
@font-face{font-family:'Proza';src:url('../../font/Proza-ExtraBoldItalic.woff2') format('woff2');font-weight:800;font-style:italic;font-display:swap}

/* ── Loading ── */
.loading { text-align:center; color: var(--color-star-sub); padding:40px; font-size:14px; display:none; }
.loading.active { display:block; }

/* ── 表单 ── */
.form-row { display:flex; align-items:center; gap:6px; margin-bottom:9px; font-size:13px; flex-wrap:wrap; }
.form-row .lbl { color: var(--color-text-sec); width:56px; text-align:left; flex-shrink:0; }
.form-row input[type="radio"] { margin:0 2px 0 6px; cursor:pointer; }
.form-row label { cursor:pointer; }
.seeker-input { border:1px solid var(--color-border); border-radius:4px; padding:3px 6px; font-size:13px; font-family:inherit; width:80px; }
.date-input { border:1px solid var(--color-border); border-radius:4px; padding:3px 4px; font-size:13px; font-family:inherit; text-align:center; width:28px; }
.date-input.year { width:44px; }
.btn-now { padding:3px 8px; border:1px solid var(--color-border); border-radius:4px; background: var(--color-subtle); font-size:12px; cursor:pointer; font-family:inherit; color: var(--color-text); transition:background .15s; }
.btn-now:hover { background: var(--color-border-light); }

/* ── 起卦方式 ── */
.method-radio-group { display:inline-flex; gap:0; flex-wrap:wrap; }
.method-radio-group label { display:flex; align-items:center; gap:3px; padding:3px 8px; border:1px solid var(--color-border); border-right:none; cursor:pointer; font-size:12px; background:#fff; transition:background .15s; white-space:nowrap; }
.method-radio-group label:first-child { border-radius:4px 0 0 4px; }
.method-radio-group label:last-child  { border-radius:0 4px 4px 0; border-right:1px solid var(--color-border); }
.method-radio-group label.active { background:var(--color-brand); color:#fff; border-color:var(--color-brand); }
.method-radio-group input[type="radio"] { display:none; }

/* ── 盘式切换 ── */
.panshi-group { display:flex; gap:0; flex-wrap:wrap; }
.panshi-group label { display:flex; align-items:center; gap:3px; padding:3px 8px; border:1px solid var(--color-border); border-right:none; cursor:pointer; font-size:12px; background:#fff; transition:background .15s; white-space:nowrap; }
.panshi-group label:first-child { border-radius:4px 0 0 4px; }
.panshi-group label:last-child  { border-radius:0 4px 4px 0; border-right:1px solid var(--color-border); }
.panshi-group label.active { background:var(--color-brand); color:#fff; border-color:var(--color-brand); }
.panshi-group input[type="radio"] { display:none; }
.panshi-link { display:flex; align-items:center; padding:3px 10px; border:1px solid var(--color-border); border-radius:0 4px 4px 0; font-size:12px; background:#fff; color: var(--color-text-sec); text-decoration:none; transition:background .15s; white-space:nowrap; }
.panshi-link:hover { background:#e0ecf8; color:var(--color-brand); }

/* ── 方法面板 ── */
.method-panel { display:none; padding:10px 0 4px; }
.method-panel.active { display:block; }
.form-sep { border:none; border-top:1px solid #e8e8e8; margin:10px 0; }
.panel-auto-hint { font-size:12px; color: var(--color-text-faint); }

/* 手工指定 */
.manual-grid { display:flex; flex-direction:column; gap:6px; }
.manual-row { display:flex; align-items:center; gap:10px; }
.manual-pos { width:36px; text-align:right; font-size:12px; color: var(--color-star-sub); flex-shrink:0; }
.yao-select { padding:4px 8px; border:1px solid var(--color-border); border-radius:4px; font-size:13px; background:#fff; color: var(--color-text); min-width:160px; }

/* 电脑摇卦 */
.shake-area { text-align:center; }
.coins-wrap { display:flex; justify-content:center; gap:22px; margin:14px 0 16px; }
.coin {
  width:76px; height:76px; border-radius:50%;
  background: radial-gradient(circle at 37% 33%,
    #f5e6a8 0%, var(--color-border-warm) 32%, var(--color-gold) 58%, #b8963e 76%, #a6842a 100%);
  border:4px solid #9a7830; position:relative; cursor:pointer; user-select:none;
  transition:transform .18s, box-shadow .18s;
  box-shadow:0 5px 18px rgba(0,0,0,.25),0 2px 4px rgba(0,0,0,.12),inset 0 2px 6px rgba(245,230,168,.5),inset 0 -4px 10px rgba(0,0,0,.20);
  display:flex; align-items:center; justify-content:center;
}
.coin::before { content:''; position:absolute; inset:8px; border-radius:50%; border:1.5px solid rgba(154,120,48,.25); pointer-events:none; }
.coin::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:21px; height:21px; border:2px solid rgba(154,120,48,.3); border-radius:2px; pointer-events:none; }
.coin:hover { transform:scale(1.08); box-shadow:0 8px 22px rgba(0,0,0,.30),inset 0 2px 6px rgba(245,230,168,.5),inset 0 -4px 10px rgba(0,0,0,.20); }
.coin.shaking { animation:coinShake .55s ease; }
.coin-label { font-size:22px; font-weight:700; color: var(--color-text); line-height:1; position:relative; z-index:1; }
.coin-sub { display:none; }
@keyframes coinShake {
  0%,100% { transform:rotate(0deg) scale(1); }
  15% { transform:rotate(-18deg) scale(1.08); }
  30% { transform:rotate(22deg) scale(1.12); }
  45% { transform:rotate(-15deg) scale(1.08); }
  60% { transform:rotate(12deg) scale(1.05); }
  75% { transform:rotate(-8deg) scale(1.02); }
}
.shake-info { font-size:13px; color: var(--color-text-sec); margin-bottom:6px; }
.shake-result { font-size:13px; font-weight:700; color:#8B4513; min-height:20px; }
.shake-progress { display:flex; justify-content:center; gap:8px; margin:10px 0; }
.progress-yao { width:50px; height:24px; border-radius:4px; border:1px solid var(--color-border); background: var(--color-subtle); display:flex; align-items:center; justify-content:center; font-size:11px; color: var(--color-text-faint); }
.progress-yao.done-yang { background:#FFF; border-color:#b8860b; color:#8B4513; font-weight:700; }
.progress-yao.done-yin  { background:var(--color-subtle); border-color:#1a6fb5; color:#1a6fb5; font-weight:700; }
.progress-yao.done-dong { border-style:dashed; }

/* 数字起卦 */
.num-method-tabs { display:flex; gap:8px; margin-bottom:10px; }
.num-mtab { padding:3px 12px; border:1px solid var(--color-border); border-radius:4px; font-size:12px; cursor:pointer; background:#fff; }
.num-mtab.active { background:var(--color-brand); color:#fff; border-color:var(--color-brand); }
.num-inputs { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.num-inputs input { width:80px; border:1px solid var(--color-border); border-radius:4px; padding:4px 6px; font-size:13px; font-family:inherit; text-align:center; }
.num-hint { font-size:11px; color: var(--color-text-muted); margin-top:4px; }
.num-formula { font-size:12px; color: var(--color-text-sec); background:var(--color-pan); border:1px solid #e8e8d0; border-radius:4px; padding:6px 10px; margin-top:8px; line-height:1.8; display:none; }
.num-formula .hi { color:var(--color-fire); font-weight:700; }
.num-formula.active { display:block; }
#npanel-0, #npanel-1 { display:none; }
#npanel-0.active, #npanel-1.active { display:block; }

/* 时间起卦 */
.time-cal-select { display:flex; gap:12px; margin-bottom:10px; font-size:13px; }
.time-weight-row { display:flex; align-items:center; gap:8px; font-size:13px; margin-bottom:8px; }
.time-weight-row input,
.time-weight-row textarea { width:140px; border:1px solid var(--color-border); border-radius:4px; padding:4px 6px; font-size:13px; font-family:inherit; text-align:center; resize:none; height:24px; box-sizing:border-box; line-height:16px; }
.time-weight-row input.error-flash,
.time-weight-row textarea.error-flash { animation:errorFlash .5s ease 3; border-color:#E53935 !important; }
@keyframes errorFlash {
  0%,100% { border-color:#E53935; box-shadow:0 0 8px rgba(255,68,68,.5); }
  50% { border-color:#ff8888; box-shadow:0 0 4px rgba(255,136,136,.3); }
}
.time-formula { font-size:12px; color: var(--color-text-sec); background:var(--color-pan); border:1px solid #e8e8d0; border-radius:4px; padding:6px 10px; margin-top:8px; line-height:1.9; display:none; }
.time-formula .hi { color:var(--color-fire); font-weight:700; }
.time-formula.active { display:block; }
.btn-calc { padding:3px 12px; border:none; border-radius:4px; background:var(--color-btn-dark); color:var(--color-vip-gold); font-size:12px; cursor:pointer; font-family:"MiSans",sans-serif; font-weight:400; height:24px; transition:all .2s; }
.btn-calc:hover { background:var(--color-btn-dark); color:var(--color-vip-gold); }

/* ── 按钮 ── */
.form-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }
.btn-export { padding:3px 12px; border:none; border-radius:4px; font-size:12px; font-family:"MiSans",sans-serif; font-weight:400; height:24px; cursor:pointer; background:var(--color-brand); color:#fff; }
.btn-export:hover { opacity:0.9; }
.btn-export:disabled { background:var(--color-border); color: var(--color-text-muted); cursor:not-allowed; opacity:0.6; }
.btn-export:disabled:hover { opacity:0.6; }
.form-actions-bar { display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid #e8e8e8; }
.form-actions-right { display:flex; gap:8px; }
.btn-default { background:var(--color-brand); color:#fff; }
.btn-primary { background:var(--color-brand); color:#fff; }
.btn-ai-analyze { padding:3px 12px; border-radius:4px; font-size:12px; cursor:pointer; border:none; background:linear-gradient(135deg, var(--color-btn-dark), #3a3028); color:var(--color-gold); transition:all .2s; font-family:"MiSans",sans-serif; font-weight:400; height:24px; }
.btn-ai-analyze:hover { background:linear-gradient(135deg, #3a3028, #5a4a30); color:var(--color-gold); }

/* ── 加权说明 ── */
.weight-info-link { font-size:12px; color:#1b5594; cursor:pointer; text-decoration:underline; white-space:nowrap; margin-left:4px; }
.weight-info-link:hover { color:var(--color-brand); }
.weight-info-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9999; align-items:center; justify-content:center; }
.weight-info-overlay.active { display:flex; }
.weight-info-box { background:#fff; border-radius:10px; padding:24px 24px 18px; max-width:380px; width:calc(100vw - 48px); position:relative; box-shadow:0 8px 32px rgba(0,0,0,.2); font-size:13px; color: var(--color-text); line-height:1.8; }
.weight-info-box p { margin:0 0 6px; }
.weight-info-close { position:absolute; top:8px; right:14px; font-size:20px; cursor:pointer; color: var(--color-text-faint); }
.weight-info-close:hover { color: var(--color-text); }

/* ── 梅花专属面板 ── */
.meihua-panel { display:none; padding:8px 12px; border-radius:8px; margin-top:8px; }
.meihua-panel.active { display:block; }
.num-input-row { margin-bottom:10px; font-size:13px; color: var(--color-text-sec); }
.num-input-row input { width:180px; padding:6px 10px; border:1px solid var(--color-border); border-radius:4px; font-size:13px; margin-left:8px; }
.gua-section { padding:12px; background:#fff; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,0.05); }

/* ── 返回行 & 工具按钮（排盘后可见）── */
.qm-back-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 0; margin-bottom: 6px; }
.qm-back-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.qm-btn-group { display: flex; align-items: center; gap: 2px; margin-left: auto; }

/* ── 结果卡片内工具栏 ── */
.result-toolbar { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; justify-content: space-between; }
.result-toolbar .btn-export { font-size: 12px; padding: 4px 12px; height: auto; min-height: 28px; }

/* ── 登录弹窗 ── */
#auth-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:10000; align-items:center; justify-content:center; }
#auth-modal.active { display:flex; }
.auth-box { background:#fff; border-radius:12px; width:380px; max-width:calc(100vw - 32px); padding:28px 28px 20px; box-shadow:0 20px 60px rgba(0,0,0,.3); position:relative; }
.auth-close { position:absolute; top:14px; right:16px; font-size:22px; cursor:pointer; color: var(--color-text-faint); border:none; background:none; padding:0; }
.auth-close:hover { color: var(--color-text); }
.auth-tabs { display:flex; border-bottom:2px solid var(--color-border-light); margin-bottom:20px; }
.auth-tab { flex:1; text-align:center; padding:8px 0; font-size:14px; font-family:"MiSans",sans-serif; font-weight:700; cursor:pointer; color:#bbb; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .2s; }
.auth-tab.active { color:#8B4513; border-bottom-color:#8B4513; }
.auth-panel { display:none; }
.auth-panel.active { display:block; }
.auth-sub-tabs { display:flex; gap:8px; margin-bottom:16px; }
.auth-sub-tab { padding:4px 14px; border-radius:20px; font-size:12px; font-family:"MiSans",sans-serif; font-weight:700; cursor:pointer; color: var(--color-star-sub); border:1px solid var(--color-border); background:none; transition:all .2s; }
.auth-sub-tab.active { background:#8B4513; color:#fff; border-color:#8B4513; }
.auth-form-group { margin-bottom:12px; }
.auth-form-group input { width:100%; padding:10px 12px; border:1px solid var(--color-border); border-radius:6px; font-size:14px; font-family:"MiSans",sans-serif; outline:none; box-sizing:border-box; }
.auth-form-group input:focus { border-color:#8B4513; }
.auth-code-row { display:flex; gap:8px; align-items:center; }
.auth-code-row input { flex:1; }
.auth-btn-code { flex-shrink:0; white-space:nowrap; padding:10px; background:#8B4513; color:#fff; border:none; border-radius:6px; font-size:12px; font-family:"MiSans",sans-serif; font-weight:700; cursor:pointer; }
.auth-btn-code:disabled { opacity:.5; cursor:default; }
.auth-btn-submit { width:100%; padding:12px; background:linear-gradient(135deg,#8B4513,#8B4513); color:#fff; border:none; border-radius:6px; font-size:15px; font-family:"MiSans",sans-serif; font-weight:700; cursor:pointer; margin-top:4px; }
.auth-divider { text-align:center; color: var(--color-text-faint); font-size:12px; margin:14px 0 12px; }
.auth-btn-wechat { width:100%; padding:10px; background: var(--color-subtle); color: var(--color-text-faint); border:1px solid #e0e0e0; border-radius:6px; font-size:13px; font-family:"MiSans",sans-serif; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; }

/* ── 爻线 ── */
.yao-draw { display:flex; justify-content:center; align-items:center; margin:10px 0; }
.yao-bars { display:inline-flex; align-items:center; }
.yao-bar { display:inline-block; height:5px; border-radius:0; background:#333; vertical-align:middle; font-size:0; line-height:0; overflow:hidden; }
.yao-bar.full { width:56px; }
.yao-bar.half { width:23px; }
.yao-gap { display:inline-block; width:10px; font-size:0; line-height:0; vertical-align:middle; }
.yao-bar.dong-active { background:var(--color-fire); }

/* ── 结果样式 ── */
.ly-info-table { border:1px solid var(--color-border-warm); border-radius:4px; overflow:hidden; margin-bottom:12px; background:#fff; }
.ly-info-row { display:flex; border-bottom:1px solid var(--color-border-warm); }
.ly-info-row:last-child { border-bottom:none; }
.ly-info-lbl  { width:60px; padding:8px 0; text-align:center; background:var(--color-parchment); color:#c9a96e; font-size:12px; flex-shrink:0; }
.ly-info-lbl-s { width:50px; padding:8px 0; text-align:center; background:var(--color-parchment); color:#c9a96e; font-size:12px; flex-shrink:0; }
.ly-info-val  { flex:1; padding:8px; text-align:center; font-size:13px; color: var(--color-text); }
.ly-info-val-s { width:80px; padding:8px 0; text-align:center; font-size:13px; color: var(--color-text); flex-shrink:0; }
.ly-info-val-lg { flex:1; padding:8px; text-align:center; font-size:14px; color: var(--color-text); }
.ly-info-bold { font-weight:bold; }

.panshi-current { pointer-events:none; }
.panel-hint { font-size:12px; color: var(--color-text-faint); }
#shakeResetBtn { margin-top:6px; }
#resultCard { display:none; }
#resultCard.active { display:block; }

.gz-bold { font-weight:bold; }
.gz-huo { font-weight:bold; color:var(--color-fire); }
.kw-muted { color: var(--color-text-muted); }
.kw-huo { color:var(--color-fire); }
.mh-shensha-content { text-align:left; font-size:12px; line-height:1.6; }
.mh-shensha-item { margin-right:10px; display:inline-block; margin-bottom:2px; }
.mh-shensha-more { color:#1a8fb8; cursor:pointer; margin-left:6px; font-size:12px; }
.mh-shensha-extra { display:none; margin-top:6px; }
.mh-shensha-extra.show { display:block; }

.mh-gua-container { background:#fff; border:1px solid #e8e8e0; border-radius:4px; padding:16px; overflow-x:auto; }
.mh-gua-row { display:flex; gap:0; min-width:600px; }
.mh-gua-cell { flex:1; text-align:center; padding:8px 4px; min-width:90px; }
.mh-gua-label { font-size:13px; font-weight:bold; margin-bottom:4px; }
.mh-gua-name { font-size:16px; font-weight:bold; margin-bottom:8px; }
.mh-gua-sub { font-size:12px; color: var(--color-text-muted); margin-bottom:8px; }
.mh-gua-ben .mh-gua-label, .mh-gua-ben .mh-gua-name { color:var(--color-fire); }
.mh-gua-hu .mh-gua-label, .mh-gua-hu .mh-gua-name,
.mh-gua-bian .mh-gua-label, .mh-gua-bian .mh-gua-name,
.mh-gua-cuo .mh-gua-label, .mh-gua-cuo .mh-gua-name,
.mh-gua-zong .mh-gua-label, .mh-gua-zong .mh-gua-name { color:#1a8fb8; }
.mh-yao-wrap { display:inline-block; }
.mh-trigram-gap { height:6px; }

.mh-tiyong { margin-top:16px; padding:12px; background:#fafaf4; border-radius:4px; font-size:13px; line-height:1.8; color: var(--color-text-sec); }

/* ── 暗色模式 ── */
html[data-theme="dark"] .ly-info-table,
html[data-theme="dark"] .mh-gua-container { background: var(--color-panel); }
html[data-theme="dark"] .yao-bar { background: var(--color-text-sec); }
html[data-theme="dark"] .mh-tiyong { background: var(--color-subtle); color: var(--color-text-sec); }

@media (max-width:768px) { .header { flex-wrap:wrap; } }

/* ── 经典解读卡片 ── */
.ly-classics-card { max-width:680px; }
.ly-classics-header { font-size:15px; font-weight:700; color:#8B4513; border-left:3px solid var(--color-gold); padding-left:10px; margin-bottom:8px; }
.ly-classics-loading { text-align:center; color: var(--color-text-faint); padding:20px; font-size:12px; }
.ly-classics-content { font-size:13px; color: var(--color-text); line-height:1.65; word-break:break-word; }
.ly-classics-content .cj-gua-name { font-size:16px; font-weight:700; color:#1b5594; display:block; margin-bottom:6px; }
.ly-classics-section-title { font-size:14px; font-weight:700; color:#1b5594; border-left:3px solid #1b5594; padding-left:8px; margin-bottom:10px; }
.ly-classics-sep { border-top:1px dashed var(--color-border-warm); margin:14px 0; }
.ly-classics-error { color:var(--color-fire); text-align:center; padding:20px; font-size:12px; }
.ly-fupeirong-text { line-height:2; font-size:13px; color:#4a3728; }
.ly-fupeirong-text b { color:#8B4513; }

html[data-theme="dark"] .ly-classics-content .cj-gua-name,
html[data-theme="dark"] .ly-classics-section-title { color: var(--color-brand); border-color: var(--color-brand); }
html[data-theme="dark"] .ly-fupeirong-text { color: var(--color-text-sec); }

#classicsCard { margin-top: 16px; }