/* =====================================================================
 * 工具2 · 黄金首饰价格计算器 gold-jewelry-calc.css
 * 独立设计：金价行情条 + 金条堆母题；主色鎏金 #b8860b + 深咖。
 * 深色适配走 [data-theme="dark"] 变量覆盖。
 * ===================================================================== */

.hc-au {
    --hc-a: #9a6b08;
    --hc-a-soft: #f6ecd2;
    --au-deep: #3a2c14;
    --au-shine: #e6c368;
}

/* 金价行情条 */
.hc-au .au-ticker {
    margin-top: 14px;
    border-top: 1px solid var(--hc-line-2);
    border-bottom: 1px solid var(--hc-line-2);
    background: linear-gradient(90deg, var(--hc-a-soft), transparent 55%, var(--hc-a-soft));
}
.hc-au .au-ticker-in {
    max-width: 1200px; margin: 0 auto;
    padding: 10px 26px;
    display: flex; flex-wrap: wrap; gap: 10px 26px;
    font-size: 12.5px;
}
.hc-au .au-tick { display: inline-flex; align-items: baseline; gap: 8px; }
.hc-au .au-tick em { font-style: normal; color: var(--hc-muted); letter-spacing: .04em; }
.hc-au .au-tick b { font-family: var(--hc-serif); font-size: 15px; color: var(--au-deep); font-variant-numeric: tabular-nums; }
.hc-au .au-tick i { font-style: normal; font-size: 11.5px; font-weight: 700; }
.hc-au .au-tick i.up { color: #b03a2e; }
.hc-au .au-tick i.dn { color: #1e7a4f; }

/* 首屏：左文右金条堆 */
.hc-au .au-hero {
    display: grid; grid-template-columns: 1.5fr 1fr;
    gap: 36px; align-items: center;
    padding-top: 44px;
}
.hc-au .hc-hero h1::after {
    content: ""; display: block; width: 64px; height: 5px; margin-top: 16px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--au-shine), var(--hc-a));
}
.hc-au .au-bars { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding-bottom: 12px; }
.hc-au .au-bar {
    display: flex; align-items: center; justify-content: space-between;
    border-radius: 6px;
    padding: 0 16px;
    color: #6b4d05;
    background:
        linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0) 30%),
        linear-gradient(90deg, #e9c96f, #c99b2e 45%, #b8860b);
    box-shadow: inset 0 -3px 0 rgba(90,62,6,.35), 0 8px 20px rgba(184,134,11,.25);
    border: 1px solid #a97b0a;
}
.hc-au .au-bar em { font-style: normal; font-size: 11px; letter-spacing: .12em; font-weight: 700; color: #6b4d05; }
.hc-au .au-bar b { font-family: var(--hc-serif); font-size: 14px; }
.hc-au .au-bar--lg { width: 78%; height: 46px; }
.hc-au .au-bar--md { width: 58%; height: 38px; }
.hc-au .au-bar--sm { width: 40%; height: 30px; opacity: .92; }

/* 购买测算网格 */
.hc-au .au-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.hc-au .au-ops { display: flex; align-items: flex-end; gap: 9px; }

/* 三卡片区 */
.hc-au .au-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.hc-au .au-mini-out {
    margin-top: 4px;
    padding: 12px 14px;
    border-radius: var(--hc-r-sm);
    border-left: 3px solid var(--hc-a);
    background: var(--hc-a-soft);
    font-size: 13.5px; line-height: 1.9;
}
.hc-au .au-mini-out b { font-family: var(--hc-serif); font-size: 17px; color: var(--hc-a); }
.hc-au .au-mini-out .au-bad { color: var(--hc-danger); font-weight: 700; }
.hc-au .au-mini-out .au-good { color: var(--hc-ok); font-weight: 700; }

/* 批量表 */
.hc-au #auBatchBody td input[type="text"] { min-width: 90px; }
.hc-au #auBatchBody .au-del {
    border: none; background: transparent; color: var(--hc-muted);
    cursor: pointer; font-size: 15px; line-height: 1; padding: 4px 8px;
}
.hc-au #auBatchBody .au-del:hover { color: var(--hc-danger); }

/* 响应式 */
@media (max-width: 980px) {
    .hc-au .au-grid { grid-template-columns: repeat(2, 1fr); }
    .hc-au .au-ops { align-items: center; }
    .hc-au .au-3col { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .hc-au .au-hero { grid-template-columns: 1fr; gap: 16px; padding-top: 26px; }
    .hc-au .au-bars { flex-direction: row; justify-content: flex-start; align-items: flex-end; }
}
@media (max-width: 560px) {
    .hc-au .au-ticker-in { padding: 9px 16px; gap: 6px 16px; }
    .hc-au .au-grid { grid-template-columns: 1fr; }
}

/* 深色主题 */
:root[data-theme="dark"] .hc-au {
    --hc-a: #d9ae4a;
    --hc-a-soft: #2f2714;
    --au-deep: #ecd9a0;
    --au-shine: #f0d488;
}
:root[data-theme="dark"] .hc-au .au-ticker { background: linear-gradient(90deg, var(--hc-a-soft), transparent 55%, var(--hc-a-soft)); }
:root[data-theme="dark"] .hc-au .au-tick b { color: var(--au-deep); }
:root[data-theme="dark"] .hc-au .au-tick i.up { color: #ef8d86; }
:root[data-theme="dark"] .hc-au .au-tick i.dn { color: #6ec79c; }
:root[data-theme="dark"] .hc-au .au-bar {
    background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 30%), linear-gradient(90deg, #d9ae4a, #a97b16 45%, #8a6410);
    border-color: #6b4d05;
    color: #2c1f04;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.35);
}
:root[data-theme="dark"] .hc-au .au-bar em, :root[data-theme="dark"] .hc-au .au-bar b { color: #2c1f04; }