/* ================================================================
   lijichi-core.css — 立极尺 共用样式（Web + Mobile 均加载）
   ================================================================ */

/* ── 卡片 ── */
.ljc-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; }
.ljc-form-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; font-size: 13px; }
.ljc-form-row:last-child { margin-bottom: 0; }
.ljc-lbl { color: var(--color-brand); font-weight: 600; white-space: nowrap; min-width: 60px; }
.ljc-lbl--auto { min-width: auto; }
.ljc-lbl--ml6 { margin-left: 6px; }
.ljc-lbl--ml4 { margin-left: 4px; }
.ljc-input { padding: 4px 8px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 13px; font-family: inherit; }
.ljc-input--name { width: 120px; }
.ljc-input--build { width: 80px; font-size: 12px; padding: 2px 4px; }
.ljc-input--year { width: 70px; font-size: 12px; padding: 2px 4px; }
.ljc-input--month { width: 44px; font-size: 12px; padding: 2px 4px; }
.ljc-select { padding: 3px 6px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 13px; background: #fff; font-family: inherit; }
.ljc-select--sm { font-size: 12px; padding: 2px 4px; }
.ljc-info-period { font-size: 11px; color: #8B4513; white-space: nowrap; }
.ljc-info-ganzhi { font-size: 11px; color: #8B4513; min-width: 28px; display: inline-block; }

/* ── 按钮 ── */
.ljc-btn { padding: 3px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; border: none; height: 24px; font-family: "MiSans", sans-serif; font-weight: 400; }
.ljc-btn--primary { background: var(--color-brand); color: #fff; }
.ljc-btn--primary:hover { opacity: 0.9; }
.ljc-btn--default { background: var(--color-subtle); color: var(--color-text); border: 1px solid var(--color-border); }
.ljc-btn--default:hover { background: #e5e5e5; }
.ljc-btn--rotate { font-size: 12px; min-width: 26px; padding: 1px 4px; font-weight: 400; }
.ljc-btn.active { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }
.ljc-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ljc-btn--danger { background: #fff; color: var(--color-danger); border: 1px solid var(--color-danger); }
.ljc-btn--placeholder { background: var(--color-subtle); color: #bbb; border: 1px dashed var(--color-border); cursor: default; }
.ljc-btn--placeholder:hover { background: var(--color-subtle); }
.ljc-btn--upload { position: relative; overflow: hidden; }
.ljc-btn--upload input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

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

/* ── 模式标签 ── */
.ljc-mode-tag { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #e8e0d0; color: #8B4513; margin-left: 4px; }
.ljc-mode-tag.ljc-mode--compass { background: #dce8f5; color: var(--color-brand); }

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

/* ── 画布 ── */
.ljc-canvas-card { text-align: center; }
.ljc-canvas-wrap { position: relative; width: 620px; height: 620px; border-radius: 8px; overflow: hidden; background: #fafaf8; margin: 0 auto; display: inline-block; }
.ljc-canvas-inner { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.ljc-layer { position: absolute; top: 50%; left: 50%; transform-origin: center center; transition: transform 0.15s ease; }
.ljc-compass-layer { width: 580px; height: 580px; z-index: 2; pointer-events: none; }
.ljc-compass-img { width: 100%; height: 100%; }
.ljc-floorplan-layer { z-index: 1; max-width: 500px; max-height: 500px; display: flex; align-items: center; justify-content: center; }
.ljc-floorplan-layer img { max-width: 500px; max-height: 500px; object-fit: contain; border: 2px solid var(--color-danger); }
.ljc-floorplan-img--visible { display: block; }
.ljc-placeholder { color: var(--color-text-faint); font-size: 14px; text-align: center; }

/* ── 使用提示 ── */
.ljc-tip { font-size: 11px; color: var(--color-text-faint); text-align: center; margin-top: 8px; }

/* ── 裁切弹窗 ── */
#crop-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 10001; align-items: center; justify-content: center; flex-direction: column; gap: 16px; }
#crop-modal.active { display: flex; }
.crop-area { position: relative; width: 500px; height: 500px; overflow: hidden; background: #333; border: 2px solid #fff; border-radius: 4px; cursor: grab; }
.crop-area:active { cursor: grabbing; }
.crop-area img { position: absolute; user-select: none; pointer-events: none; }
.crop-grid { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.crop-grid::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 9999px rgba(0,0,0,.35); }
.crop-grid::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to right, rgba(255,255,255,.15) 1px, transparent 1px, transparent 33%, rgba(255,255,255,.15) 33%, rgba(255,255,255,.15) 34%, transparent 34%, transparent 66%, rgba(255,255,255,.15) 66%, rgba(255,255,255,.15) 67%, transparent 67%),
             linear-gradient(to bottom, rgba(255,255,255,.15) 1px, transparent 1px, transparent 33%, rgba(255,255,255,.15) 33%, rgba(255,255,255,.15) 34%, transparent 34%, transparent 66%, rgba(255,255,255,.15) 66%, rgba(255,255,255,.15) 67%, transparent 67%); }
.crop-tools { display: flex; align-items: center; gap: 6px; }
.crop-tool-btn { width: 36px; height: 32px; border: 1px solid var(--color-border); border-radius: 4px; background: #444; color: #fff; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit; line-height: 1; }
.crop-tool-btn:hover { background: #666; }
.crop-tool-label { color: var(--color-text-faint); font-size: 13px; min-width: 36px; text-align: center; }
.crop-actions { display: flex; gap: 12px; align-items: center; }
.crop-btn-cancel { background: #666; color: #fff; border: none; padding: 8px 24px; border-radius: 4px; font-size: 14px; cursor: pointer; font-family: inherit; }
.crop-btn-confirm { background: var(--color-brand); color: #fff; border: none; padding: 8px 24px; border-radius: 4px; font-size: 14px; cursor: pointer; font-family: inherit; }
.crop-select { padding: 6px 10px; border-radius: 4px; font-size: 13px; font-family: inherit; border: 1px solid var(--color-border); }

/* ── 结果表格 ── */
.ljc-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; }
.ljc-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); }
.ljc-result-table td:last-child { border-right: none; }
.ljc-result-table tr:last-child td { border-bottom: none; }
.ljc-result-table .ljc-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); }
.ljc-result-table .ljc-tbl-value { text-align: center; font-weight: 500; color: var(--color-text); }

/* ── 九宫格 ── */
.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; }

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

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

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

/* ── 结果区 ── */
.lj-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; }
.lj-hidden { display: none; }

/* ── 返回栏（桌面隐藏）── */
.ljc-back-row { display: none; }
.ljc-back-actions { display: none; }

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