/* ================================================================
   luopan-core.css — 罗盘 共用样式（Web + Mobile 均加载）
   ================================================================ */

/* ── 卡片 ── */
.lp-card { background: var(--color-pan); border: 1px solid var(--color-brand); border-radius: 8px; padding: 16px; margin-bottom: 16px; box-shadow: 0 1px 6px rgba(0,0,0,.08); max-width: 680px; margin-left: 10px; }
.lp-form-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; font-size: 13px; }
.lp-form-row:last-child { margin-bottom: 0; }
.lp-lbl { color: var(--color-brand); font-weight: 600; white-space: nowrap; min-width: 60px; }
.lp-lbl--auto { min-width: auto; }
.lp-input { padding: 4px 8px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 13px; font-family: inherit; }
.lp-input--name { width: 120px; }
.lp-input--year { width: 68px; font-size: 12px; padding: 2px 4px; }
.lp-input--month { width: 44px; font-size: 12px; padding: 2px 4px; }
.lp-input--build { width: 75px; font-size: 12px; padding: 2px 4px; }
.lp-select { padding: 3px 6px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 13px; background: #fff; font-family: inherit; }
.lp-select--sm { font-size: 12px; padding: 2px 4px; }
.lp-info-text { font-size: 11px; color: #8B4513; white-space: nowrap; }
.lp-info-ganzhi { font-size: 11px; color: #8B4513; min-width: 28px; display: inline-block; }
.lp-info--ml6 { margin-left: 6px; }

/* ── 按钮 ── */
.lp-btn { padding: 3px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; border: none; height: 24px; font-family: "MiSans", sans-serif; font-weight: 400; }
.lp-btn--primary { background: var(--color-brand); color: #fff; }
.lp-btn--primary:hover { opacity: 0.9; }
.lp-btn--default { background: var(--color-subtle); color: var(--color-text); border: 1px solid var(--color-border); }
.lp-btn--default:hover { background: #e5e5e5; }
.lp-btn--rotate { font-size: 12px; min-width: 26px; padding: 1px 4px; font-weight: 400; }
.lp-btn.active { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }
.lp-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── 角度显示 ── */
.lp-angle-wrap { font-size: 10px; font-weight: 300; color: var(--color-brand); min-width: 30px; text-align: center; line-height: 1; }
.lp-angle-wrap span { font-size: 7px; color: var(--color-text-muted); }
.lp-shan-info { font-size: 13px; color: #8B4513; font-weight: 600; }

/* ── 画布 ── */
.lp-canvas-card { text-align: center; }
.lp-canvas-wrap { position: relative; width: 620px; height: 620px; border-radius: 8px; overflow: hidden; background: #fafaf8; margin: 0 auto; display: inline-block; }
.lp-canvas-inner { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.lp-layer { position: absolute; top: 50%; left: 50%; transform-origin: center center; transition: transform 0.15s ease; }
.lp-compass-layer { width: 580px; height: 580px; z-index: 2; pointer-events: none; }
.lp-compass-img { width: 100%; height: 100%; }

/* ── 十字线 ── */
.lp-crosshair { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 580px; height: 580px; z-index: 3; pointer-events: none; }
.lp-crosshair::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 100%; background: rgba(255,0,0,.7); }
.lp-crosshair::after { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 2px; background: rgba(255,0,0,.7); }

/* ── 叠加层 ── */
.lp-overlay { position: absolute; z-index: 10; }
.lp-degree { top: 10px; left: 12px; font-size: 26px; font-weight: 700; color: var(--color-danger); background: rgba(255,255,255,.88); padding: 6px 12px; border-radius: 8px; letter-spacing: 1px; }
.lp-dir-grid { top: 8px; right: 8px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; font-size: 10px; }
.lp-dir-grid span { background: rgba(255,255,255,.8); padding: 2px 5px; border-radius: 3px; color: var(--color-text-sec); text-align: center; white-space: nowrap; }
.lp-dir-main { font-weight: 700; color: var(--color-danger); }
.lp-dir-dot { color: var(--color-text-faint); }
.lp-switch-thumb { bottom: 10px; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; border: 2px solid var(--color-border); cursor: pointer; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15); transition: border-color .2s, box-shadow .2s; }
.lp-switch-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lp-switch--left { left: 12px; }
.lp-switch--right { right: 12px; }
.lp-switch-thumb.active { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(0,64,153,.25); }

/* ── 按钮栏 ── */
.lp-btn-bar { display: flex; gap: 8px; justify-content: center; padding: 14px 0 0; flex-wrap: wrap; }
.lp-btn-bar .lp-btn-main { padding: 8px 20px; border-radius: 6px; font-size: 13px; cursor: pointer; font-family: "MiSans", sans-serif; font-weight: 500; transition: all .15s; border: 1px solid var(--color-border); background: #fff; color: var(--color-text); }
.lp-btn-bar .lp-btn-main--primary { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }
.lp-btn-bar .lp-btn-main--primary:hover { opacity: .85; }
.lp-btn-bar .lp-btn-main--outline { background: #fff; color: var(--color-brand); border-color: var(--color-brand); }
.lp-btn-bar .lp-btn-main--outline:hover { background: #f0f4fa; }
.lp-btn-bar .lp-btn-main--disabled { background: var(--color-subtle); color: #bbb; border-color: var(--color-border); cursor: not-allowed; }
.lp-lock-btn { font-size: 18px; padding: 6px 12px; line-height: 1; }

/* ── 三盘 ── */
.lp-plates { display: flex; margin-top: 12px; border-top: 1px solid var(--color-border-warm); }
.lp-plate-item { flex: 1; text-align: center; padding: 10px 4px; }
.lp-plate-item + .lp-plate-item { border-left: 1px solid var(--color-border-warm); }
.lp-plate-label { font-size: 11px; color: var(--color-text-muted); display: block; }
.lp-plate-vip { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 6px 10px; }
.lp-plate-value { font-size: 15px; font-weight: 600; color: #1A3D63; margin-top: 3px; }

/* ── 结果表格 ── */
.lp-result-table { width: 100%; max-width: 620px; margin: 0 auto; border-collapse: collapse; font-size: 12px; color: var(--color-text); border: 1px solid var(--color-border-warm); table-layout: fixed; background: #fff; }
.lp-result-table td { padding: 1px 6px; vertical-align: middle; border-right: 1px solid var(--color-border-warm); border-bottom: 1px solid var(--color-border-warm); }
.lp-result-table td:last-child { border-right: none; }
.lp-result-table tr:last-child td { border-bottom: none; }
.lp-result-table .lp-tbl-label { width: 50px; color: var(--color-gold); font-weight: 500; text-align: center; background: var(--color-parchment); white-space: nowrap; border-right: 1px solid var(--color-border-warm); }
.lp-result-table .lp-tbl-value { text-align: center; font-weight: 500; color: var(--color-text); }

/* ── 九宫格（从 xuankong 搬入，八宅/飞星共用）── */
.xk-palace-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-border-warm); border: 1px solid var(--color-border-warm); max-width: 500px; margin: 15px auto; }
.xk-palace { background: #fff; min-height: 110px; position: relative; }
.xk-palace-inner { position: relative; width: 100%; height: 100%; min-height: 110px; padding: 8px; }
.xk-gong-name { font-size: 11px; color: var(--color-text-muted); }
.xk-star-name { font-size: 20px; font-weight: 500; text-align: center; margin-top: 8px; }
.xk-jx-name { font-size: 13px; text-align: center; margin-top: 2px; font-weight: 500; }
.xk-jx-detail { text-align: center; margin-top: 2px; color: var(--color-text-muted); font-size: 10px; }
.xk-center { background: #fafaf7; }
.xk-mountain { position: absolute; top: 11px; left: 18px; font-size: 20px; font-weight: 300; color: #2D8A2D; }
.xk-facing { position: absolute; top: 11px; right: 18px; font-size: 20px; font-weight: 300; color: var(--color-fire); }
.xk-period { font-size: 24px; font-weight: 300; color: var(--color-gold); line-height: 1; }
.xk-wang { position: absolute; bottom: 4px; left: 6px; font-size: 10px; color: var(--color-text-faint); }
.xk-legend { text-align: center; font-size: 11px; color: var(--color-star-sub); margin-top: 8px; }
.xk-legend span { margin: 0 8px; }

/* ── 五行/吉凶颜色类 ── */
.lp-wx--mu   { color: #2d8a2d; }
.lp-wx--huo  { color: var(--color-fire); }
.lp-wx--tu   { color: #8B4513; }
.lp-wx--jin  { color: #b8860b; }
.lp-wx--shui { color: #1a6fb5; }
.lp-jx--daji    { color: #008800; }
.lp-jx--ciji    { color: #88aa00; }
.lp-jx--xiaoji  { color: var(--color-star-sub); }
.lp-jx--cixiong { color: #cc8800; }
.lp-jx--daxiong { color: #cc0000; }
.lp-match--ji   { color: #008800; }
.lp-match--xiong { color: #cc0000; }

/* ── 八宅宫格占位符 ── */
.lp-center-placeholder { padding-top: 40px; text-align: center; font-size: 12px; color: var(--color-text-muted); }

/* ── 图例颜色 ── */
.lp-legend-green  { color: #2D8A2D; }
.lp-legend-red    { color: var(--color-fire); }
.lp-legend-gold   { color: var(--color-gold); }
.lp-legend-olive  { color: #88aa00; }
.lp-legend-gray   { color: var(--color-star-sub); }
.lp-legend-orange { color: #cc8800; }
.lp-legend-note   { text-align: center; font-size: 11px; color: var(--color-text-faint); margin-top: 4px; }
.lp-bz-star-wrap  { text-align: center; padding-top: 18px; }

/* ── 结果区可见性 ── */
.lp-result { padding: 10px; background: #fff; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 1px 6px rgba(0,0,0,.08); max-width: 680px; margin-left: 10px; }
.lp-hidden { display: none; }

/* ── 锁定按钮状态 ── */
.lp-btn-bar .lp-lock--locked { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }

/* ── 返回栏 ── */
.lp-back-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 0; margin-bottom: 8px; }
.lp-back-row button { padding: 8px 16px; border: 1px solid var(--color-border); border-radius: 6px; background: #fff; color: var(--color-text); font-size: 14px; cursor: pointer; }
.lp-back-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }

/* ── 移动端按钮（桌面隐藏）── */
.mobile-actions-outside { display: none; }