/* =====================================================================
 * 工具11 · 婚礼预算计算器 wedding-fund-plan.css
 * 独立设计：花环拱门 + 缎带母题；主色婚典玫红 #be185d + 香槟金点缀。
 * 深色适配走 [data-theme="dark"] 变量覆盖。
 * ===================================================================== */

.hc-wed {
    --hc-a: #be185d;
    --hc-a-soft: #fce7f1;
    --wed-gold: #c8952f;
    --wed-gold-soft: #f7ecd4;
}

/* 首屏：左文右花环拱门 */
.hc-wed .wed-hero {
    display: grid; grid-template-columns: 1.5fr 1fr;
    gap: 36px; align-items: center;
    padding-top: 44px;
}
.hc-wed .hc-hero h1::after {
    content: ""; display: block; width: 64px; height: 5px; margin-top: 16px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--hc-a), var(--wed-gold));
}

/* 花环拱门 */
.hc-wed .wed-arch { text-align: center; padding-bottom: 8px; }
.hc-wed .wed-arch-top {
    width: min(60%, 170px);
    height: min(30vw, 120px);
    margin: 0 auto;
    border: 10px solid var(--hc-a-soft);
    border-bottom: none;
    border-radius: 999px 999px 0 0;
    position: relative;
}
.hc-wed .wed-arch-top::before, .hc-wed .wed-arch-top::after {
    content: "";
    position: absolute; top: -14px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--wed-gold);
}
.hc-wed .wed-arch-top::before { left: 12%; }
.hc-wed .wed-arch-top::after { right: 12%; }
.hc-wed .wed-arch-ribbon { display: flex; justify-content: center; gap: 4px; margin-top: 6px; }
.hc-wed .wed-arch-ribbon i {
    display: block; width: 16px; height: 26px;
    background: linear-gradient(180deg, var(--hc-a), #e0498b);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
}
.hc-wed .wed-arch-ribbon i:last-child { transform: scaleX(-1); }
.hc-wed .wed-arch-note { margin-top: 14px; font-size: 12px; color: var(--hc-muted); letter-spacing: .14em; }

/* 录入网格 */
.hc-wed .wed-tier-row { display: flex; align-items: flex-end; gap: 12px; }
.hc-wed .wed-tier-row .hc-field { min-width: 220px; }
.hc-wed .wed-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hc-wed .wed-grid--2 { grid-template-columns: repeat(4, 1fr); }
.hc-wed .wed-inst-half { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* 占比条形图 */
.hc-wed .wed-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hc-wed .wed-bar-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: center; padding: 5px 0; }
.hc-wed .wed-bar-name { font-size: 12.5px; color: var(--hc-ink-2); }
.hc-wed .wed-bar-track {
    height: 12px; border-radius: 6px;
    background: var(--hc-card-2);
    border: 1px solid var(--hc-line-2);
    overflow: hidden;
}
.hc-wed .wed-bar-track i {
    display: block; height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--hc-a), #e57cad);
}
.hc-wed .wed-bar-row.is-hot .wed-bar-track i { background: linear-gradient(90deg, var(--wed-gold), #e6bc62); }
.hc-wed .wed-bar-row.is-hot .wed-bar-name { color: var(--wed-gold); font-weight: 700; }
.hc-wed .wed-bar-val { font-size: 12px; color: var(--hc-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 响应式 */
@media (max-width: 980px) {
    .hc-wed .wed-grid, .hc-wed .wed-grid--2 { grid-template-columns: 1fr 1fr; }
    .hc-wed .wed-2col { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .hc-wed .wed-hero { grid-template-columns: 1fr; gap: 18px; padding-top: 26px; }
    .hc-wed .wed-arch { display: none; }
}
@media (max-width: 560px) {
    .hc-wed .wed-grid, .hc-wed .wed-grid--2 { grid-template-columns: 1fr; }
    .hc-wed .wed-inst-half { grid-template-columns: 1fr; }
    .hc-wed .wed-tier-row .hc-field { min-width: 0; flex: 1; }
}

/* 深色主题 */
:root[data-theme="dark"] .hc-wed {
    --hc-a: #f078a8;
    --hc-a-soft: #3a1a29;
    --wed-gold: #dfb25e;
    --wed-gold-soft: #38301a;
}