:root {
  color-scheme: dark;
  --bg: #07110d;
  --panel: #0e1d15;
  --line: #26382c;
  --text: #f2f6f3;
  --muted: #a8b8ad;
  --lime: #9fff54;
  --pink: #ff4fc8;
  --cyan: #54e8ff;
  --yellow: #ffe45c;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at 20% 0, #153021 0, transparent 35%), var(--bg); color: var(--text); min-height: 100vh; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
.hero, .hero-banner, main, footer { width: min(1180px, calc(100% - 32px)); margin: auto; }
.hero { padding: 72px 0 36px; display: flex; gap: 32px; align-items: flex-end; justify-content: space-between; }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .75rem; color: var(--lime); font-weight: 800; margin: 0 0 10px; }
h1 { font-size: clamp(2.8rem, 8vw, 6.5rem); line-height: .9; margin: 0; max-width: 760px; }
h2 { font-size: clamp(1.6rem, 4vw, 2.6rem); margin: .15em 0 .5em; }
h3 { margin: 0; }
p { color: var(--muted); line-height: 1.65; }
.actions, .section-head { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.section-head { justify-content: space-between; }
.button { border: 1px solid var(--line); background: #14251a; color: var(--text); padding: 11px 16px; border-radius: 999px; text-decoration: none; cursor: pointer; font-weight: 750; }
.button:hover:not(:disabled) { border-color: var(--lime); }
.button.primary { background: var(--lime); border-color: var(--lime); color: #07110d; }
.button:disabled { cursor: not-allowed; opacity: .48; background: #18221c; border-color: var(--line); color: var(--muted); }
.status-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 24px 0; }
.status-grid article, .panel, .wallet-card, .admin-card, .hero-banner { border: 1px solid var(--line); background: rgba(14, 29, 21, .92); border-radius: 20px; }
.status-grid article { padding: 18px; }
.status-grid span { display: block; color: var(--muted); font-size: .82rem; }
.status-grid strong { display: block; margin-top: 7px; font-size: 1.1rem; }
.panel { padding: 28px; margin: 16px 0; }
.notice { border-left: 3px solid var(--lime); padding-left: 14px; }
.hero-banner { position: relative; overflow: hidden; margin-bottom: 18px; min-height: 280px; display: grid; align-items: end; }
.hero-banner img { width: 100%; height: min(52vw, 520px); min-height: 280px; object-fit: cover; display: block; }
.hero-banner:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 17, 13, .08), rgba(7, 17, 13, .78)); pointer-events: none; }
.hero-banner-copy { position: absolute; inset: auto 24px 22px 24px; z-index: 1; max-width: 720px; }
.hero-banner-copy h2 { margin-bottom: 0; text-shadow: 0 2px 14px rgba(0, 0, 0, .7); }
.hero-banner-copy p:last-child { margin: 8px 0 0; color: var(--text); text-shadow: 0 2px 12px rgba(0, 0, 0, .75); }
.wallet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wallet-card { position: relative; padding: 20px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.wallet-card:before, .admin-card:before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--lime); }
.vault-supplies:before { background: var(--lime); }
.vault-treasury:before { background: #fff; }
.vault-expenses:before { background: var(--cyan); }
.vault-marketing:before { background: var(--pink); }
.vault-revenue:before { background: var(--yellow); }
.wallet-card h3 { margin: 0; font-size: 1.25rem; }
.wallet-card p { margin: 0; min-height: 52px; }
.wallet-card code, .identifiers dd code { word-break: break-all; }
.wallet-card span { color: var(--muted); font-size: .85rem; }
.wallet-card .balance { font-size: 1.15rem; color: var(--lime); }
.wallet-card .button { margin-top: auto; align-self: flex-start; }
.uses-heading { margin-top: 4px; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text); }
.vault-uses { margin: 0 0 4px; padding-left: 20px; color: var(--muted); display: grid; gap: 7px; font-size: .88rem; line-height: 1.45; }
.pending-address { color: var(--yellow); }
.vault-status { display: inline-flex; align-items: center; width: fit-content; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line); }
.vault-status.active { color: var(--lime); border-color: rgba(159, 255, 84, .45); }
.vault-status.pending { color: var(--yellow); border-color: rgba(255, 228, 92, .35); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.identifiers { display: grid; gap: 16px; }
.identifiers div { display: grid; gap: 5px; }
.identifiers dt { color: var(--muted); font-size: .8rem; }
.identifiers dd { margin: 0; word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.supporters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.supporter { border: 1px solid var(--line); border-radius: 16px; padding: 18px; text-decoration: none; display: grid; gap: 8px; overflow: hidden; }
.supporter:hover { border-color: var(--cyan); }
.supporter span { color: var(--muted); }
.supporter em { width: fit-content; color: var(--lime); border: 1px solid rgba(159, 255, 84, .35); border-radius: 999px; padding: 3px 8px; font-size: .75rem; font-style: normal; }
.supporter img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); background: #07110d; }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.friend-card { border: 1px solid var(--line); border-radius: 18px; padding: 14px; text-decoration: none; display: grid; gap: 8px; background: rgba(7, 17, 13, .55); }
.friend-card:hover { border-color: var(--pink); }
.friend-card.featured { border-color: rgba(159, 255, 84, .55); box-shadow: 0 0 0 1px rgba(159, 255, 84, .16) inset; }
.friend-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); background: #07110d; }
.friend-card em { width: fit-content; color: var(--lime); border: 1px solid rgba(159, 255, 84, .35); border-radius: 999px; padding: 3px 8px; font-size: .75rem; font-style: normal; }
.friend-card strong { font-size: 1.05rem; }
.friend-card span { color: var(--muted); line-height: 1.45; }
.ticker { width: min(1180px, calc(100% - 32px)); margin: 0 auto 18px; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: rgba(14, 29, 21, .92); }
.ticker a { display: block; text-decoration: none; white-space: nowrap; overflow: hidden; padding: 12px 0; }
.ticker span { display: inline-block; padding-left: 100%; animation: ticker-scroll 28s linear infinite; color: var(--lime); font-weight: 800; }
.ticker:hover span { animation-play-state: paused; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
dialog { border: 1px solid var(--line); border-radius: 22px; background: #0e1d15; color: var(--text); width: min(520px, calc(100% - 28px)); padding: 0; }
dialog::backdrop { background: rgba(0, 0, 0, .75); }
dialog form { padding: 24px; display: grid; gap: 14px; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; }
.dialog-head h2 { margin: 0; }
.icon-button { background: transparent; border: 0; color: var(--text); font-size: 2rem; cursor: pointer; }
label { display: grid; gap: 7px; color: var(--muted); font-size: .85rem; }
input, select { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: #07110d; color: var(--text); }
input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--lime); }
input[type="file"] { padding: 10px; }
select { appearance: auto; }
.donation-result { border-top: 1px solid var(--line); padding-top: 18px; text-align: center; }
.donation-result img { width: min(280px, 100%); background: #fff; border-radius: 14px; }
.donation-result code { display: block; word-break: break-all; margin-top: 7px; }
footer { padding: 28px 0 44px; display: flex; justify-content: space-between; color: var(--muted); font-size: .85rem; }
textarea { width: 100%; min-height: 620px; resize: vertical; border: 1px solid var(--line); border-radius: 16px; background: #050b08; color: #dfffe8; padding: 18px; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
textarea.compact { min-height: 110px; font-family: inherit; color: var(--text); }
pre { white-space: pre-wrap; color: #ff9b9b; background: #2b0f12; border: 1px solid #7f2d35; padding: 14px; border-radius: 12px; }
.audit { display: grid; gap: 8px; }
.audit-row { display: grid; grid-template-columns: 190px 180px 1fr; gap: 14px; padding: 12px; border-bottom: 1px solid var(--line); }
.audit-row time, .audit-row code { color: var(--muted); overflow-wrap: anywhere; }
.admin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.admin-list { display: grid; gap: 14px; }
.admin-card { position: relative; padding: 20px; overflow: hidden; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.field-wide { grid-column: 1 / -1; }
.admin-card .button { width: fit-content; }
.admin-card .section-head { margin-bottom: 14px; }
.admin-preview { width: min(220px, 100%); aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); background: #07110d; }

@media (max-width: 1000px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
  .hero { display: grid; }
  .status-grid { grid-template-columns: repeat(2, 1fr); }
  .wallet-grid, .supporters, .admin-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 700px) { .audit-row, .form-grid { grid-template-columns: 1fr; } .field-wide { grid-column: auto; } .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .status-grid, .wallet-grid, .supporters, .admin-grid, .gallery { grid-template-columns: 1fr; }
  .hero { padding-top: 46px; }
  .hero-banner { min-height: 220px; }
  .hero-banner img { min-height: 220px; }
  .hero-banner-copy { inset: auto 16px 16px 16px; }
  footer { display: grid; gap: 10px; }
}
