/**
 * Bát Tự page shell — wizard + card only (replaces full iching-divination.css ~200KB)
 */

.bazi-tool-page {
    font-family: var(--ic-font-ui);
    background-color: var(--ic-ivory);
    color: var(--ic-ink);
}

.bazi-tool-page .container {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    min-width: 0;
}

.feature-panel { display: none; }
.feature-panel.active { display: block; }

.iching-card {
    background: var(--bazi-surface, var(--ic-paper-white, #fff));
    border: 1px solid var(--bazi-border-soft, var(--ic-gold-border));
    border-radius: 14px;
    margin-bottom: 16px;
    box-shadow: var(--bazi-shadow-sm, 0 2px 12px rgba(0, 0, 0, 0.05));
    overflow: hidden;
    max-width: 100%;
    min-width: 0;
}

.iching-card.input-card {
    border-radius: var(--bazi-radius-lg, 18px);
}

.iching-card.input-card > .page-hero--in-card {
    margin: 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--bazi-border-soft);
    box-shadow: none;
    background: linear-gradient(180deg, rgba(184, 154, 90, 0.06) 0%, transparent 55%),
        var(--bazi-surface);
}

.page-hero--in-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hero-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.hero-aside {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.wz-panel {
    display: none;
}

.wz-panel.active {
    display: block;
    animation: baziWzIn 0.22s ease-out;
}

@keyframes baziWzIn {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: translateX(0); }
}

.wz-panel.wz-exit {
    display: block;
    animation: baziWzOut 0.18s ease-in forwards;
}

@keyframes baziWzOut {
    to { opacity: 0; transform: translateX(-8px); }
}

.wz-mobile-progress {
    display: none;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: var(--bazi-radius-md);
    background: var(--bazi-surface-soft);
    border: 1px solid var(--bazi-border-soft);
    color: var(--bazi-text);
}

.confirm-summary-card--compact {
    padding: 12px 16px;
    border-radius: var(--bazi-radius-md);
    border: 1px solid var(--bazi-border-soft);
    background: var(--bazi-surface);
}

.wz-config-summary__text {
    font-size: 14px;
    font-weight: 600;
    color: var(--bazi-text);
}