/* the account: the treasury, the reports of the heralds who told of Kronhold, and the owner's queue */
.page-hero.compact { padding: clamp(100px, 12vw, 150px) 0 clamp(28px, 4vw, 44px); }
.page-hero.compact h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
.side-h { font-size: 1rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0 0 8px; }
.small { font-size: .9rem; }
.wide { width: 100%; }
.treasury { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; margin-bottom: 42px; }
.coin { width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #5a2018, #1a0b09 70%);
  box-shadow: 0 0 0 2px var(--gold-lo), 0 0 0 5px #000, 0 0 30px rgba(242, 190, 100, .25); }
.coin .shard { width: 30px; height: 40px; }
@media (prefers-reduced-motion: no-preference) { .coin .shard { animation: glint 4s ease-in-out infinite; } }
@keyframes glint { 50% { filter: drop-shadow(0 0 12px rgba(255, 230, 160, .9)); transform: scale(1.06); } }
.bal { margin: 0; color: var(--muted); }
.bal b { font: 700 3.2rem/1 var(--display); color: var(--gold-hi); text-shadow: 0 0 24px rgba(242, 217, 155, .3); }
.treasury-acts { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 760px) { .treasury { grid-template-columns: auto 1fr; } .treasury-acts { grid-column: 1 / -1; } }
.acct-tabs { margin-bottom: 30px; }
.promo-grid { display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: clamp(28px, 5vw, 64px); align-items: start; }
.promo-how h2 { margin-bottom: 14px; }
.promo-how p { color: #d8c8a6; }
.howto-steps { list-style: none; counter-reset: s; margin: 22px 0; padding: 0; display: grid; gap: 16px; }
.howto-steps li { position: relative; counter-increment: s; padding-left: 58px; color: var(--muted); min-height: 42px; }
.howto-steps li::before { content: counter(s, upper-roman); position: absolute; left: 0; top: -2px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  font: 700 1rem/1 var(--display); color: var(--gold-hi); background: #1e1412; box-shadow: 0 0 0 1px var(--gold-lo), 0 0 0 3px #000; }
.howto-steps b { display: block; color: #f0dfb8; font: 700 1.15rem var(--display); }
.promo-form h3 { margin-bottom: 18px; }
.drop { position: relative; display: grid; gap: 6px; place-items: center; text-align: center; min-height: 150px; padding: 18px; cursor: pointer;
  border: 1px dashed rgba(201, 163, 91, .45); background: rgba(0, 0, 0, .3); transition: border-color .2s, background .2s; }
.drop:hover, .drop.over { border-color: var(--gold-hi); background: rgba(201, 163, 91, .06); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-t { color: #d8c8a6; }
.drop img { max-height: 180px; width: auto; box-shadow: 0 0 0 1px var(--hair); }
@media (max-width: 900px) { .promo-grid { grid-template-columns: 1fr; } }
.list-h { margin: 56px 0 18px; font-size: 1.6rem; }
.reports, .queue { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rep { display: grid; grid-template-columns: 1fr auto; gap: 6px 18px; align-items: center; padding: 16px 20px; box-shadow: inset 0 0 0 1px rgba(201, 163, 91, .18); background: rgba(16, 12, 11, .7); }
.rep a.u { color: var(--gold-hi); overflow-wrap: anywhere; font-weight: 500; }
.rep .when { color: var(--faint); font-size: .86rem; }
.rep .st { justify-self: end; }
.rep .why { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .94rem; }
.rep .amt { font: 700 1.3rem var(--display); color: var(--gold-hi); }
.rep .amt.neg { color: #e9a08e; }
.qitem { display: grid; grid-template-columns: 220px 1fr; gap: 20px; padding: 18px; box-shadow: inset 0 0 0 1px rgba(201, 163, 91, .22); background: rgba(16, 12, 11, .8); }
.qitem .shot { display: block; aspect-ratio: 4 / 3; background: #0c0909 center / cover no-repeat; box-shadow: inset 0 0 0 1px var(--hair); cursor: zoom-in; }
.qitem h4 { margin: 0 0 4px; font: 700 1.25rem var(--display); color: #f3e3bd; }
.qitem .who { color: var(--muted); font-size: .92rem; margin: 0 0 8px; }
.qitem .note { color: #d8c8a6; margin: 0 0 12px; }
.qacts { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.qacts .input { width: 130px; min-height: 40px; padding: 8px 12px; }
.qacts .input.reason { width: min(320px, 100%); }
@media (max-width: 700px) { .qitem { grid-template-columns: 1fr; } }
dialog.shot-view { max-width: 94vw; max-height: 92vh; padding: 0; border: 0; background: none; }
dialog.shot-view::backdrop { background: rgba(4, 3, 3, .88); }
dialog.shot-view img { max-width: 94vw; max-height: 92vh; box-shadow: 0 0 0 1px var(--gold-lo); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.filters button { border: 0; padding: 10px 18px; color: #d9c9a4; font: 700 .82rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase;
  background: rgba(201, 163, 91, .05); box-shadow: inset 0 0 0 1px rgba(201, 163, 91, .25); }
.filters button[aria-pressed="true"] { color: #fff1d6; background: linear-gradient(180deg, #8c1c1a, #4a0b0b); box-shadow: inset 0 0 0 1px var(--gold-lo); }
.field label.drop { font: 400 1rem/1.4 var(--body); letter-spacing: 0; text-transform: none; color: #d8c8a6; }