@import "tailwindcss";

:root {
  --color-ink: #17252b;
}

html,
body,
#root {
  min-height: 100%;
}

body {
  min-height: 100dvh;
  margin: 0;
}

#root {
  box-sizing: border-box;
  padding-block-end: max(3rem, calc(env(safe-area-inset-bottom) + 2rem));
}

footer {
  box-sizing: border-box;
  min-height: 3rem;
  padding-block: 0.5rem max(1.5rem, env(safe-area-inset-bottom));
  line-height: 1.8;
  overflow: visible;
}

.welcome-actions { display: flex; flex-wrap: wrap; gap: 0.4rem 1.15rem; }
.public-intake { min-height: 100dvh; padding: 1.25rem clamp(1rem, 5vw, 4.5rem) 1.5rem; color: #eaf4f3; background: radial-gradient(ellipse at 12% 12%, #17474c 0, transparent 34rem), radial-gradient(ellipse at 92% 46%, #283451 0, transparent 30rem), #09191f; overflow: hidden; }
.public-top, .public-footer { max-width: 74rem; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.public-top { min-height: 3.5rem; }
.public-brand { display: flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; }
.public-brand-mark { display: grid; place-items: center; width: 2.65rem; height: 2.65rem; border: 1px solid #64d7bf55; background: #2bc6a31a; color: #82e6ce; border-radius: .85rem; }
.public-brand strong, .public-brand small { display: block; }
.public-brand strong { font-size: 1.05rem; }
.public-brand small { color: #94b1b5; font-size: .72rem; }
.public-live { display: inline-flex; align-items: center; gap: .5rem; color: #afc5c6; font-size: .78rem; }
.public-live i { width: .45rem; height: .45rem; border-radius: 50%; background: #51d7ac; box-shadow: 0 0 0 .25rem #51d7ac1c; }
.public-hero { max-width: 74rem; margin: 2.5rem auto 2rem; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(15rem, .85fr); align-items: center; gap: 2rem; }
.public-hero-copy { min-width: 0; }
.public-kicker { display: inline-flex; align-items: center; gap: .45rem; color: #76d6c4; font-size: .8rem; font-weight: 700; }
.public-hero h1 { margin: .85rem 0 .7rem; max-width: 15ch; font-size: clamp(2rem, 5vw, 3.65rem); line-height: 1.55; font-weight: 900; }
.public-hero h1 em { color: #7fe0c8; font-style: normal; }
.public-hero-copy > p { max-width: 39rem; color: #a9bec0; font-size: .98rem; line-height: 2; }
.public-hero-stats { display: flex; gap: 2rem; margin-top: 1.5rem; }
.public-hero-stats span { display: grid; gap: .15rem; }
.public-hero-stats b { color: #e9fbf6; font-size: 1.05rem; }
.public-hero-stats small { color: #88a4a8; font-size: .75rem; }
.public-orbit { min-height: 17rem; position: relative; display: grid; place-items: center; isolation: isolate; }
.orbit-line { position: absolute; width: 14rem; height: 8rem; border: 1px solid #5ad1b52b; border-radius: 50%; transform: rotate(-28deg); }
.orbit-b { width: 10rem; height: 14rem; transform: rotate(38deg); border-color: #7f9ce12b; }
.orbit-core { display: grid; place-items: center; width: 5.6rem; height: 5.6rem; border: 1px solid #80e4cb8a; border-radius: 1.7rem; color: #9af0dc; background: linear-gradient(145deg, #174f4b, #182e42); box-shadow: 0 0 4rem #45d6b326, inset 0 0 1.4rem #8df0d318; animation: core-breathe 4.8s ease-in-out infinite; }
.orbit-node { position: absolute; width: .65rem; height: .65rem; border-radius: 50%; background: #9cf1db; box-shadow: 0 0 1.2rem #6ee3c8; }
.node-a { transform: translate(-6.2rem,-2.8rem); }.node-b { transform: translate(6.3rem,2.3rem); background: #a8bcff; }.node-c { transform: translate(0,7rem); width: .42rem; height: .42rem; }
.orbit-caption { position: absolute; inset-block-end: .6rem; color: #6f9298; font: 600 .58rem/1.7 ui-monospace, monospace; direction: ltr; }
@keyframes core-breathe { 50% { transform: translateY(-.4rem); box-shadow: 0 0 5rem #45d6b33d, inset 0 0 1.4rem #8df0d32a; } }
.public-grid { max-width: 74rem; margin: 0 auto; display: grid; grid-template-columns: minmax(17rem, .8fr) minmax(0, 1.2fr); align-items: start; gap: 1rem; }
.public-card { min-width: 0; border: 1px solid #b6ded51a; border-radius: 1.15rem; background: linear-gradient(145deg, #142a31eF, #11242deF); box-shadow: 0 1rem 3rem #0002; }
.payment-card { padding: 1.3rem; }
.form-card { padding: 1rem 1.25rem 1.2rem; }
.card-heading { display: flex; align-items: center; gap: .8rem; }
.public-icon { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: .85rem; background: #59d9b11a; color: #77e1c7; }
.public-eyebrow { margin: 0; color: #80d9c7; font-size: .72rem; }
.card-heading h2 { margin: .15rem 0 0; font-size: 1.18rem; }
.public-card-copy { color: #9fb6b8; font-size: .82rem; line-height: 1.9; }
.card-number-box { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: 1.2rem; padding: .8rem .9rem; border: 1px solid #c5e6df1e; border-radius: .8rem; background: #07181f; }
.card-number-box > span { color: #f2fffb; font: 700 clamp(.9rem, 2.2vw, 1.15rem)/1.6 ui-monospace, monospace; white-space: nowrap; }
.card-number-box button { display: inline-flex; align-items: center; gap: .3rem; padding: .45rem .55rem; border: 0; border-radius: .55rem; color: #9be8d6; background: #52d6b21b; cursor: pointer; font: inherit; font-size: .72rem; }
.card-owner { display: flex; align-items: center; gap: .55rem; padding: .85rem .25rem 1rem; color: #9bb3b6; font-size: .78rem; }.card-owner strong { color: #ecf6f4; }.card-chip { margin-inline-start: auto; width: 1.45rem; height: 1rem; border: 1px solid #87a7a24d; border-radius: .28rem; background: linear-gradient(135deg, #314d4e, #233b40); }
.payment-warning { display: flex; gap: .65rem; padding: .75rem; border: 1px solid #f1c97926; border-radius: .75rem; color: #e5c778; background: #eeb94e0d; }.payment-warning svg { flex: 0 0 auto; margin-top: .18rem; }.payment-warning p { margin: 0; color: #b7b5a3; font-size: .72rem; line-height: 1.9; }.payment-warning strong { color: #f0d487; }
.form-tabs { display: flex; gap: .4rem; padding: .25rem; border-radius: .8rem; background: #08191f; }.form-tabs button { display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.65rem; flex: 1; border: 1px solid transparent; border-radius: .62rem; background: transparent; color: #9ab0b4; cursor: pointer; font: inherit; font-size: .8rem; }.form-tabs button.selected { border-color: #64d4b22e; color: #a5f1dc; background: #4cc7a91a; }
.public-form { display: grid; gap: .85rem; padding-top: 1.1rem; }.public-field { display: grid; gap: .35rem; min-width: 0; color: #c5d5d5; font-size: .77rem; }.public-field input, .public-field textarea { box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid #d8edeb20; border-radius: .67rem; outline: none; background: #091b22; color: #ecf7f5; padding: .72rem .8rem; font: inherit; line-height: 1.8; }.public-field textarea { resize: vertical; }.public-field input:focus, .public-field textarea:focus { border-color: #60d8bb9c; box-shadow: 0 0 0 3px #60d8bb15; }.public-field input::placeholder, .public-field textarea::placeholder { color: #6e898e; }.receipt-drop { display: flex; align-items: center; gap: .75rem; min-width: 0; padding: .75rem; border: 1px dashed #70cbb253; border-radius: .75rem; background: #62d8b30a; cursor: pointer; }.receipt-drop input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }.receipt-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: 0 0 auto; border-radius: .7rem; color: #8be8d2; background: #69d9b31b; }.receipt-drop strong, .receipt-drop small { display: block; overflow-wrap: anywhere; }.receipt-drop strong { color: #e2f5ef; font-size: .77rem; }.receipt-drop small { color: #8ea7aa; font-size: .68rem; }
.public-submit { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; margin-top: .15rem; border: 0; border-radius: .72rem; color: #09221f; background: linear-gradient(100deg, #8ce5cf, #62d3b7); font: inherit; font-weight: 800; cursor: pointer; transition: transform .2s, filter .2s; }.public-submit:hover { transform: translateY(-1px); filter: brightness(1.04); }.public-submit:disabled { opacity: .65; cursor: wait; transform: none; }.public-form-foot { margin: 0; color: #849da0; font-size: .69rem; line-height: 1.9; }.public-feedback { margin: 0; padding: .65rem .75rem; border-radius: .65rem; font-size: .75rem; line-height: 1.8; }.public-feedback.error { border: 1px solid #ed858540; color: #ffc2c2; background: #ec747410; }.public-feedback.success { border: 1px solid #70dcb648; color: #baf1de; background: #65d7ad12; }
.public-footer { margin-top: 1.7rem; padding-top: 1rem; border-top: 1px solid #a4c7c41b; color: #81999d; font-size: .7rem; }.public-footer a { display: inline-flex; align-items: center; gap: .35rem; color: #a3cbc6; text-decoration: none; }
@media (max-width: 760px) { .public-hero { grid-template-columns: minmax(0, 1fr); margin-top: 1.7rem; gap: .3rem; }.public-orbit { min-height: 12rem; }.public-grid { grid-template-columns: minmax(0, 1fr); }.payment-card { order: 2; }.form-card { order: 1; }.public-footer { align-items: flex-start; flex-direction: column; }.public-intake { padding-inline: 1rem; } }
@media (max-width: 390px) { .public-live { font-size: .66rem; }.public-hero h1 { font-size: 1.85rem; }.public-card { border-radius: .95rem; }.card-number-box { padding-inline: .55rem; }.card-number-box button { font-size: 0; }.card-number-box button svg { width: 17px; height: 17px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
.public-privacy-note { margin: 0; padding: .7rem .75rem; border: 1px solid #f0c46d35; border-radius: .65rem; color: #d9c99c; background: #f0bf4a0b; font-size: .68rem; line-height: 1.9; }
.submission-review-list { display: grid; gap: .75rem; }
.submission-review { min-width: 0; padding: 1rem; border: 1px solid #dce6ec; border-radius: .85rem; background: #fbfdfe; }
.submission-review-top, .review-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .65rem; }
.submission-review h3 { margin: .25rem 0 .35rem; font-size: .98rem; overflow-wrap: anywhere; }
.submission-review > p { margin: .65rem 0; color: #56646c; font-size: .82rem; line-height: 1.9; overflow-wrap: anywhere; }
.review-kind, .review-amount { color: #5d827d; font-size: .72rem; }
.review-url { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; color: #246f70; font-size: .76rem; overflow-wrap: anywhere; }
.receipt-open { margin-top: .5rem; }
.review-note { padding: .6rem; border-radius: .5rem; background: #fff6df; }
.review-controls { justify-content: flex-start; margin-top: .8rem; padding-top: .75rem; border-top: 1px solid #e8eef1; }
.coin-entry { display: inline-flex; align-items: center; gap: .35rem; color: #5c6367; font-size: .74rem; }
.coin-entry input { width: 4.4rem; min-height: 2.3rem; border: 1px solid #d6e0e4; border-radius: .5rem; padding: .35rem; text-align: center; }
.review-action { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.4rem; padding: .45rem .75rem; border: 1px solid transparent; border-radius: .55rem; cursor: pointer; font: inherit; font-size: .75rem; }
.review-action.approve { color: #17664d; border-color: #b9e3d2; background: #edf9f3; }
.review-action.reject { color: #9c3941; border-color: #f0c9cb; background: #fff3f3; }
@media (max-width: 560px) { .submission-review-top { align-items: flex-start; } .review-controls { align-items: stretch; } .review-action { flex: 1; justify-content: center; } }
.review-readonly { margin: .75rem 0 0; color: #697a82; font-size: .76rem; }