/* ==========================================================================
   COA library, COA cards, detail
   ========================================================================== */
.h7-coahero { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 110px) 0 clamp(36px, 5vw, 56px); border-bottom: 1px solid var(--line); background: radial-gradient(900px 420px at 50% -10%, rgba(7, 102, 199, .35), transparent 65%), linear-gradient(180deg, #061129, var(--ink)); text-align: center; }
.h7-coahero__trace { position: absolute; inset: auto 0 0; height: 60%; opacity: .35; pointer-events: none; display: grid; }
.h7-coahero__trace .h7-chroma { grid-area: 1 / 1; }
.h7-coahero__trace .h7-chroma + .h7-chroma { transform: scaleX(-1); opacity: .5; }
.h7-coahero__in { position: relative; display: grid; justify-items: center; }
.h7-coahero .h7-pagehead__title { margin-inline: auto; }
.h7-coahero .h7-pagehead__lead { margin-inline: auto; }
.h7-coahero__help { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; margin-top: 16px; }
.h7-coahero__help .h7-i { width: 16px; height: 16px; color: var(--flare); }
.h7-coahero__facts { display: flex; gap: clamp(20px, 5vw, 56px); margin-top: 36px; flex-wrap: wrap; justify-content: center; }
.h7-coahero__facts > div { display: flex; flex-direction: column-reverse; align-items: center; }
.h7-coahero__facts dd { font-size: 30px; font-weight: 600; font-stretch: 116%; font-variant-numeric: tabular-nums; }
.h7-coahero__facts dt { color: var(--muted); font-size: 13px; }

.h7-section--coa { padding-top: 32px; }
.h7-coabar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.h7-coabar .h7-chips { flex: 1; min-width: 0; }
.h7-match { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 18px; border-radius: var(--r); border: 1px solid rgba(62, 214, 160, .4); background: rgba(62, 214, 160, .08); }
.h7-match .h7-i { color: var(--ok); width: 26px; height: 26px; }
.h7-match strong, .h7-match span { display: block; }
.h7-match span { color: var(--muted); font-size: 14px; }

/* COA card */
.h7-coa { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(170deg, rgba(14, 31, 69, .75), rgba(6, 17, 41, .85)); overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.h7-coa:hover { border-color: rgba(61, 155, 255, .45); box-shadow: 0 20px 50px -30px rgba(7, 102, 199, .8); }
.h7-coa.is-hit { border-color: var(--ok); box-shadow: 0 0 0 4px rgba(62, 214, 160, .14); }
.h7-coa.is-archived { opacity: .82; }
.h7-coa__trace { position: absolute; left: 0; right: 0; top: 74px; height: 80px; opacity: .22; pointer-events: none; }
.h7-coa__head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; position: relative; }
.h7-coa__thumb { width: 48px; height: 48px; object-fit: contain; border-radius: 12px; background: radial-gradient(closest-side, rgba(61, 155, 255, .35), transparent), #0A1836; }
.h7-coa__title { font-size: 18px; font-weight: 620; }
.h7-coa__lab { color: var(--muted); font-size: 13px; margin: 2px 0 0; }
.h7-coa__purity { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 12px; padding-top: 8px; }
.h7-coa__purity strong { font-size: 44px; font-weight: 600; line-height: 1; font-stretch: 116%; font-variant-numeric: tabular-nums; }
.h7-coa__purity strong small { font-size: .45em; color: var(--muted); margin-left: 2px; }
.h7-coa__purity span { color: var(--muted); font-size: 13px; padding-bottom: 6px; }
.h7-coa__na { font-size: 26px !important; }
.h7-coa__bar { grid-column: 1 / -1; height: 4px; margin-top: 12px; border-radius: 4px; background: rgba(255, 255, 255, .06); position: relative; overflow: hidden; }
.h7-coa__bar::after { content: ""; position: absolute; inset: 0; width: calc((var(--p) - 90) * 10%); max-width: 100%; background: var(--grad); border-radius: 4px; }
.h7-coa__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; font-size: 13.5px; position: relative; }
.h7-coa__meta dt { color: var(--dim); font-size: 12px; }
.h7-coa__meta dd { color: var(--chrome); font-weight: 540; word-break: break-word; font-variant-numeric: tabular-nums; }
.h7-coa__actions { display: flex; gap: 8px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); position: relative; }
.h7-coa.is-filtered { display: none; }

/* Detail */
.h7-coadetail__status { margin-bottom: 8px; }
.h7-coadetail .h7-kv > div { padding: 10px 0; font-size: 14px; }
.h7-coadetail__notes { color: var(--muted); font-size: 14px; }
.h7-coadetail .h7-btns { margin-top: 16px; }

.h7-coa-single { display: grid; grid-template-columns: 380px 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.h7-coa-single__meta { position: sticky; top: calc(var(--header-h) + 20px); padding: 24px; border-radius: var(--r-lg); border: 1px solid var(--line); background: rgba(10, 23, 52, .6); }
.h7-coa-single__meta .h7-table { min-width: 0; }
.h7-coa-single__doc { display: grid; gap: 14px; }
.h7-coa-single__doc img { border-radius: var(--r); background: #fff; width: 100%; }
.h7-coa-single__doc iframe { width: 100%; height: 88vh; border: 0; border-radius: var(--r); background: #fff; }
@media (max-width: 960px) { .h7-coa-single { grid-template-columns: 1fr; } .h7-coa-single__meta { position: static; } }

.h7-home-coa__grid { margin-top: 8px; }