/* ══════════════════════════════════════
   紫微排盘样式
   所有变量和样式作用域限定在 .zw-page 内
   不使用 html / body 选择器，不与外部 CSS 冲突
══════════════════════════════════════ */

/* CSS 变量 + 基础隔离，全部定义在 .zw-page 作用域 */
.zw-page {
    --zw-font:              "Microsoft YaHei", "PingFang SC", "Noto Sans SC", Arial, sans-serif;
    --zw-color-text:        #1f2937;
    --zw-color-text-dark:   #111827;
    --zw-color-text-mid:    #374151;
    --zw-color-text-muted:  #6b7280;
    --zw-color-text-faint:  #9ca3af;
    --zw-color-border:      #d6dbe3;
    --zw-color-border-input:#cfd6df;
    --zw-color-bg:          #ffffff;
    --zw-color-bg-grid:     #bfc7d1;
    --zw-color-bg-body-palace: #fff9ec;
    --zw-color-accent:      #6366f1;
    --zw-color-tag:         #f59e0b;
    --zw-color-error:       #dc2626;
    --zw-color-hua-lu:      #16a34a;
    --zw-color-hua-quan:    #dc2626;
    --zw-color-hua-ke:      #2563eb;
    --zw-color-hua-ji:      #7c3aed;

    box-sizing: border-box;
    max-width: 620px;
    margin: 0 auto;
    padding: 6px;
    font-family: var(--zw-font);
    color: var(--zw-color-text);
    font-size: 14px;
    line-height: 1.5;
}

/* 所有子元素统一 box-sizing */
.zw-page *,
.zw-page *::before,
.zw-page *::after {
    box-sizing: border-box;
}

/* ── 隔离修复 ──────────────────────────
   index.css @768px 有：
     select, input { max-width: 100% !important }
     input[type=radio/checkbox] { max-width: 100% !important }
   用更高优先级的选择器覆盖回来
──────────────────────────────────────── */
.zw-field input,
.zw-field select {
    max-width: 100% !important;
    width: 100% !important;
}

.zw-radio-item input[type="radio"],
.zw-radio-item input[type="checkbox"] {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: unset !important;
}

/* ── 标题 ── */
.zw-title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    color: var(--zw-color-text-dark);
}

/* ── 表单卡片 ── */
.zw-form-card,
.ziwei-board {
    background: var(--zw-color-bg);
    border: 1px solid var(--zw-color-border);
    border-radius: 4px;
    box-shadow: none;
}

.zw-form-card {
    padding: 8px;
    margin-bottom: 6px;
}

.zw-form-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.zw-form-row:last-child {
    margin-bottom: 0;
}

.zw-inline-radio {
    gap: 8px;
}

.zw-radio-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    color: var(--zw-color-text);
}

.zw-label {
    font-weight: 600;
    color: var(--zw-color-text-mid);
    font-size: 13px;
}

.zw-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    gap: 6px;
    margin-bottom: 6px;
}

.zw-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.zw-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--zw-color-text-mid);
}

.zw-field input,
.zw-field select {
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--zw-color-border-input);
    border-radius: 4px;
    background: var(--zw-color-bg);
    font-size: 13px;
    font-family: var(--zw-font);
    color: var(--zw-color-text-dark);
    outline: none;
}

.zw-field input:focus,
.zw-field select:focus {
    border-color: var(--zw-color-accent);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.10);
}

/* ── 消息 ── */
.zw-message {
    min-height: 16px;
    margin-bottom: 4px;
    color: var(--zw-color-error);
    font-size: 12px;
    line-height: 1.4;
    word-break: break-all;
}

/* ── 命盘容器 ── */
.zw-board-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow-x: hidden;
    padding-bottom: 2px;
}

.ziwei-board {
    width: 380px;
    max-width: 380px;
    min-width: 0;
    margin: 0 auto;
    padding: 2px;
}

.ziwei-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, minmax(86px, auto));
    gap: 1px;
    background: var(--zw-color-bg-grid);
    border: 1px solid var(--zw-color-bg-grid);
}

/* ── 宫格 ── */
.zw-palace,
.zw-center {
    background: var(--zw-color-bg);
    min-height: 86px;
    padding: 3px;
    border: none;
    border-radius: 0;
    overflow: hidden;
    font-family: var(--zw-font);
}

.zw-palace {
    display: grid;
    grid-template-rows: 1fr auto auto;
}

.zw-palace.is-body {
    background: var(--zw-color-bg-body-palace);
}

/* ── 星耀区 ── */
.zw-stars-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
    flex-wrap: wrap;
    align-content: flex-start;
    min-height: 42px;
    overflow: hidden;
}

.zw-star-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
}

.zw-star-name {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 11px;
    line-height: 1;
    color: var(--zw-color-text-dark);
    letter-spacing: 1px;
    white-space: nowrap;
    display: block;
}

.zw-brightness {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 9px;
    font-weight: 400;
    color: var(--zw-color-text-faint);
    letter-spacing: 0;
    white-space: nowrap;
    display: block;
    margin-top: 1px;
}

.zw-hua {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    display: inline-block;
    border-radius: 1px;
}

.zw-hua-禄 { color: var(--zw-color-hua-lu); }
.zw-hua-权 { color: var(--zw-color-hua-quan); }
.zw-hua-科 { color: var(--zw-color-hua-ke); }
.zw-hua-忌 { color: var(--zw-color-hua-ji); }

/* ── 中间行（小限 + 大限）── */
.zw-mid-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 18px;
    margin: 2px 0;
    gap: 1px;
}

.zw-xiao-xian {
    font-size: 9px;
    line-height: 1.1;
    color: var(--zw-color-text-muted);
    text-align: center;
    white-space: nowrap;
}

.zw-da-xian {
    font-size: 9px;
    line-height: 1.1;
    color: var(--zw-color-text-muted);
    text-align: center;
    white-space: nowrap;
}

/* ── 底部行 ── */
.zw-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3px;
    min-height: 18px;
}

.zw-bottom-left {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.zw-bottom-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}

.zw-palace-name {
    font-size: 9px;
    font-weight: 700;
    color: var(--zw-color-text);
    line-height: 1.1;
    white-space: nowrap;
}

.zw-branch {
    font-size: 10px;
    font-weight: 700;
    color: var(--zw-color-text-dark);
    line-height: 1.1;
    white-space: nowrap;
}

.zw-body-tag {
    padding: 0 2px;
    border-radius: 2px;
    background: var(--zw-color-tag);
    color: #fff;
    font-size: 8px;
    line-height: 1.2;
    flex-shrink: 0;
}

/* ── 中心格 ── */
.zw-center {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
}

.zw-center-inner {
    width: 100%;
    height: 100%;
    padding: 2px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    text-align: center;
}

.zw-center-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--zw-color-text-dark);
    margin-bottom: 1px;
}

.zw-center-item {
    font-size: 8px;
    line-height: 1.2;
    color: var(--zw-color-text-mid);
    word-break: break-word;
}

.zw-center-item strong {
    color: var(--zw-color-text-dark);
}

/* ── 宫位布局 ── */
.pos-0  { grid-column: 3; grid-row: 4; }
.pos-1  { grid-column: 2; grid-row: 4; }
.pos-2  { grid-column: 1; grid-row: 4; }
.pos-3  { grid-column: 1; grid-row: 3; }
.pos-4  { grid-column: 1; grid-row: 2; }
.pos-5  { grid-column: 1; grid-row: 1; }
.pos-6  { grid-column: 2; grid-row: 1; }
.pos-7  { grid-column: 3; grid-row: 1; }
.pos-8  { grid-column: 4; grid-row: 1; }
.pos-9  { grid-column: 4; grid-row: 2; }
.pos-10 { grid-column: 4; grid-row: 3; }
.pos-11 { grid-column: 4; grid-row: 4; }

.center-slot {
    grid-column: 2 / span 2;
    grid-row: 2 / span 2;
}

/* ══════════════════════════════════════
   桌面端 (>1024px)
══════════════════════════════════════ */
@media (min-width: 1025px) {
    .zw-page {
        max-width: 620px;
    }

    .ziwei-board {
        width: 380px;
        max-width: 380px;
        min-width: 380px;
    }

    .ziwei-grid {
        grid-template-rows: repeat(4, minmax(86px, auto));
    }

    .zw-palace,
    .zw-center {
        min-height: 86px;
    }

    .zw-stars-row {
        min-height: 42px;
    }

    .zw-star-name {
        font-size: 11px;
    }
}

/* ══════════════════════════════════════
   平板端 (769px ~ 1024px)
══════════════════════════════════════ */
@media (max-width: 1024px) {
    .zw-page {
        padding: 6px;
    }

    .zw-form-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    .ziwei-board {
        width: 380px;
        max-width: 380px;
        min-width: 380px;
    }

    .ziwei-grid {
        grid-template-rows: repeat(4, minmax(86px, auto));
    }

    .zw-palace,
    .zw-center {
        min-height: 86px;
    }

    .zw-stars-row {
        min-height: 42px;
    }
}

/* ══════════════════════════════════════
   手机端 (≤768px)
   index.css body { padding: 40px 20px }
   左右各 20px 共 40px + zw-page padding 6px×2=12px
   命盘宽 = 100vw - 52px
══════════════════════════════════════ */
@media (max-width: 768px) {
    .zw-page {
        max-width: 100%;
        padding: 6px;
    }

    .zw-title {
        font-size: 18px;
    }

    .zw-form-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .zw-form-card {
        padding: 8px;
    }

    .zw-board-wrapper {
        width: 100%;
        overflow-x: hidden;
        padding: 0;
    }

    .ziwei-board {
        width: calc(100vw - 52px);
        max-width: calc(100vw - 52px);
        min-width: 0;
        padding: 1px;
    }

    .ziwei-grid {
        grid-template-rows: repeat(4, minmax(calc((100vw - 56px) / 4.2), auto));
    }

    .zw-palace,
    .zw-center {
        min-height: calc((100vw - 56px) / 4.2);
        padding: 3px 2px;
    }

    .zw-stars-row {
        gap: 2px;
        min-height: calc((100vw - 56px) / 4.2 * 0.52);
    }

    .zw-star-name {
        font-size: clamp(11px, 2.6vw, 14px);
        letter-spacing: 0.5px;
    }

    .zw-hua {
        font-size: clamp(12px, 2.9vw, 15px);
        font-weight: 900;
    }

    .zw-mid-row {
        min-height: 16px;
        margin: 1px 0;
    }

    .zw-xiao-xian {
        font-size: clamp(8px, 1.8vw, 11px);
    }

    .zw-da-xian {
        font-size: clamp(8px, 1.8vw, 11px);
    }

    .zw-bottom-row {
        min-height: 16px;
        gap: 1px;
    }

    .zw-palace-name {
        font-size: clamp(8px, 1.9vw, 11px);
    }

    .zw-branch {
        font-size: clamp(10px, 2.2vw, 13px);
    }

    .zw-center-title {
        font-size: clamp(11px, 2.4vw, 14px);
    }

    .zw-center-item {
        font-size: clamp(8px, 1.7vw, 10px);
        line-height: 1.3;
    }

    .zw-body-tag {
        font-size: 7px;
    }
}

/* ══════════════════════════════════════
   小屏手机 (≤480px)
══════════════════════════════════════ */
@media (max-width: 480px) {
    .zw-page {
        padding: 4px;
    }

    .zw-title {
        font-size: 17px;
    }

    .zw-form-card,
    .ziwei-board {
        border-radius: 4px;
    }

    .zw-form-card {
        padding: 7px;
    }

    .ziwei-board {
        width: calc(100vw - 48px);
        max-width: calc(100vw - 48px);
        min-width: 0;
    }

    .ziwei-grid {
        grid-template-rows: repeat(4, minmax(calc((100vw - 52px) / 4.1), auto));
    }

    .zw-palace,
    .zw-center {
        min-height: calc((100vw - 52px) / 4.1);
        padding: 2px;
    }

    .zw-stars-row {
        min-height: calc((100vw - 52px) / 4.1 * 0.52);
        gap: 2px;
    }

    .zw-star-name {
        font-size: clamp(10px, 2.8vw, 13px);
    }

    .zw-hua {
        font-size: clamp(11px, 3.1vw, 14px);
        font-weight: 900;
    }

    .zw-xiao-xian {
        font-size: clamp(7px, 1.9vw, 10px);
    }

    .zw-da-xian {
        font-size: clamp(7px, 1.9vw, 10px);
    }

    .zw-palace-name {
        font-size: clamp(7px, 2vw, 10px);
    }

    .zw-branch {
        font-size: clamp(9px, 2.3vw, 12px);
    }

    .zw-center-title {
        font-size: clamp(10px, 2.5vw, 13px);
    }

    .zw-center-item {
        font-size: clamp(7px, 1.8vw, 9px);
        line-height: 1.3;
    }
}

/* ══════════════════════════════════════
   超小屏 (≤360px)
══════════════════════════════════════ */
@media (max-width: 360px) {
    .zw-star-name {
        font-size: 10px;
        letter-spacing: 0;
    }

    .zw-hua {
        font-size: 11px;
    }

    .zw-palace-name {
        font-size: 7px;
    }

    .zw-branch {
        font-size: 9px;
    }
}