/* ==========================================================================
   COA library, COA cards, detail
   ========================================================================== */
.sp-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(206, 130, 1, .35), transparent 65%), linear-gradient(180deg, #0E0E0E, var(--ink)); text-align: center; }
.sp-coahero__trace { position: absolute; inset: auto 0 0; height: 60%; opacity: .35; pointer-events: none; display: grid; }
.sp-coahero__trace .sp-chroma { grid-area: 1 / 1; }
.sp-coahero__trace .sp-chroma + .sp-chroma { transform: scaleX(-1); opacity: .5; }
.sp-coahero__in { position: relative; display: grid; justify-items: center; }
.sp-coahero .sp-pagehead__title { margin-inline: auto; }
.sp-coahero .sp-pagehead__lead { margin-inline: auto; }
.sp-coahero__help { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; margin-top: 16px; }
.sp-coahero__help .sp-i { width: 16px; height: 16px; color: var(--flare); }
.sp-coahero__facts { display: flex; gap: clamp(20px, 5vw, 56px); margin-top: 36px; flex-wrap: wrap; justify-content: center; }
.sp-coahero__facts > div { display: flex; flex-direction: column-reverse; align-items: center; }
.sp-coahero__facts dd { font-size: 30px; font-weight: 600; font-stretch: 116%; font-variant-numeric: tabular-nums; }
.sp-coahero__facts dt { color: var(--muted); font-size: 13px; }

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

/* COA card */
/* COA card — "COA Lookup" panel (Figma), simple radius instead of clipped corners */
.sp-coagrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: clamp(18px, 2vw, 28px); }
.sp-coa { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 18px 16px 18px; border-radius: 24px; background: #060706; border: 2px solid #FFD12B; box-shadow: 0 0 10px rgba(255, 184, 0, .53); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.sp-coa:hover { box-shadow: 0 0 22px rgba(255, 184, 0, .6); transform: translateY(-3px); }
.sp-coa.is-hit { box-shadow: 0 0 0 4px rgba(24, 218, 55, .35), 0 0 22px rgba(255, 184, 0, .6); }
.sp-coa.is-archived { opacity: .8; border-color: #80510B; box-shadow: none; }
.sp-coa__head { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 auto; min-width: min(260px, 100%); max-width: 100%; padding: 8px 18px; border: 1.2px solid #FFD12B; border-radius: 12px; background: #060706; }
.sp-coa__title { margin: 0; font-family: var(--font-head); font-size: 20px; font-weight: 700; line-height: 1.2; text-transform: uppercase; text-align: center; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-coa__chev { color: #FFD12B; font-size: 22px; line-height: 1; font-weight: 700; }
.sp-coa__body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; padding: 14px 12px; border: 1.2px solid #80510B; border-radius: 16px; }
.sp-coa__seal { position: relative; display: grid; justify-items: center; text-align: center; }
.sp-coa__rings { width: 100%; max-width: 200px; height: auto; overflow: visible; }
.sp-coa__rings circle, .sp-coa__rings path, .sp-coa__rings line { fill: none; }
.sp-coa__rings .r-cross { stroke: #AD6900; stroke-width: .8; }
.sp-coa__rings .r-outer { stroke: #AD6900; stroke-width: 1.2; }
.sp-coa__rings .r-orbit { stroke: #80510B; stroke-width: 1.6; }
.sp-coa__rings .r-arc { stroke: #FFD12B; stroke-width: 3.2; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(255, 184, 0, .7)); }
.sp-coa__rings .r-arc--2 { stroke: #AD6900; stroke-width: 4; }
.sp-coa__rings .r-glow { stroke: #FFC917; stroke-width: 7; filter: drop-shadow(0 0 6px rgba(255, 184, 0, .75)); }
.sp-coa__rings .r-inner { stroke: #AD6900; stroke-width: 1.6; }
.sp-coa__rings .r-core { fill: #0D0E08; stroke: #80510B; stroke-width: 1.2; }
.sp-coa__rings .r-check { stroke: #FFD12B; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.sp-coa.is-pending .r-check { stroke: #AD6900; }
.sp-coa__seal-big { margin-top: -6px; font-family: var(--font); font-size: 26px; font-weight: 800; line-height: 1.1; text-transform: uppercase; color: #FFD12B; }
.sp-coa__seal-sub { font-size: 14px; font-weight: 600; text-transform: uppercase; color: #FFD12B; }
.sp-coa__rows { display: grid; gap: 8px; margin: 0; }
.sp-coa__rows > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; padding: 6px 12px; border: 1.2px solid #80510B; border-radius: 10px; background: #060706; }
.sp-coa__rows dt { color: #fff; font-size: 14px; font-weight: 500; text-transform: uppercase; white-space: nowrap; }
.sp-coa__rows dd { margin: 0; color: #FFD12B; font-size: 12.5px; font-weight: 500; text-transform: uppercase; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sp-coa__status { display: inline-flex; align-items: center; gap: 6px; }
.sp-coa__status i { width: 16px; height: 16px; border-radius: 50%; background: #18DA37 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 11px no-repeat; box-shadow: 0 0 4px rgba(246, 168, 0, .33); flex: none; }
.sp-coa.is-pending .sp-coa__status i, .sp-coa.is-archived .sp-coa__status i { background-color: #AD6900; }
.sp-coa__actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 12px; margin-top: auto; }
.sp-coa__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 14px; border-radius: 14px; font-family: var(--font); font-size: 15px; font-weight: 700; text-transform: uppercase; white-space: nowrap; transition: box-shadow .25s, background .25s, transform .2s; }
.sp-coa__btn .sp-i { width: 20px; height: 20px; }
.sp-coa__btn--view { background: #060706; color: #fff; border: 2px solid #FFD12B; box-shadow: 0 0 10px rgba(255, 184, 0, .53); }
.sp-coa__btn--view .sp-i { color: #FFD12B; }
.sp-coa__btn--view:hover { box-shadow: 0 0 18px rgba(255, 184, 0, .7); }
.sp-coa__btn--dl { background: var(--grad); color: #000; border: 0; }
.sp-coa__btn--dl:hover { background: var(--grad-rev); box-shadow: 0 0 10px rgba(255, 184, 0, .53); color: #000; }
@media (max-width: 440px) {
	.sp-coa__body { grid-template-columns: 1fr; }
	.sp-coa__rings { max-width: 160px; }
	.sp-coa__actions { grid-template-columns: 1fr; }
}
.sp-coa.is-filtered { display: none; }

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

.sp-coa-single { display: grid; grid-template-columns: 380px 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.sp-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(22, 22, 22, .6); }
.sp-coa-single__meta .sp-table { min-width: 0; }
.sp-coa-single__doc { display: grid; gap: 14px; }
.sp-coa-single__doc img { border-radius: var(--r); background: #fff; width: 100%; }
.sp-coa-single__doc iframe { width: 100%; height: 88vh; border: 0; border-radius: var(--r); background: #fff; }
@media (max-width: 960px) { .sp-coa-single { grid-template-columns: 1fr; } .sp-coa-single__meta { position: static; } }

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