:root{
    --bg:#151109;
    --surface:#1b160d;
    --text:#f5ecd9;
    --muted:#8f7f5e;
    --line:#322817;
    --accent:#ff3b30;
    --accent2:#d7ff3f;
    --mint:#6bffb0;
    --shadow: 9px 9px 0 0 rgba(5,4,2,.5);
    --shadow-sm: 6px 6px 0 0 rgba(5,4,2,.5);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Golos Text', system-ui, sans-serif;
    display: flex;
    justify-content: center;
    padding: 32px 16px 60px;
    position: relative;
    background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse 900px 500px at 85% -10%, rgba(255,59,48,.14), transparent 60%);
    background-attachment: fixed;
}

.wrap { width: 100%; max-width: 440px; position: relative; z-index: 1; }

.watermark {
    position: fixed; top: -40px; right: -30px; z-index: 0; pointer-events: none;
    font-family: 'Unbounded', sans-serif; font-weight: 900; font-size: min(40vw, 300px);
    color: transparent; -webkit-text-stroke: 1px rgba(245,236,217,.05); line-height: 1;
    text-transform: uppercase; user-select: none;
}

.eyebrow {
    font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--accent2); margin: 0 0 8px;
}

h1 {
    font-family: 'Unbounded', sans-serif; font-weight: 900; text-transform: uppercase;
    font-size: clamp(26px, 7vw, 36px); line-height: 1.05; letter-spacing: -.01em;
    margin: 0 0 10px; text-wrap: balance;
}
h1 .hot { color: var(--accent); }

p.sub { color: #cabfa2; margin: 0 0 26px; font-size: 15px; line-height: 1.5; max-width: 40ch; }

.card {
    background: var(--surface);
    border-left: 4px solid var(--accent);
    box-shadow: var(--shadow), 0 30px 60px -30px rgba(0,0,0,.8);
    padding: 26px 24px;
    margin-bottom: 20px;
}
.card.yellow { border-left-color: var(--accent2); }
.card.mint { border-left-color: var(--mint); }

.field { border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 16px; }
.field:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
label {
    display: block; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
input[type=text], input[type=number], input[type=tel] {
    width: 100%;
    background: none;
    border: none;
    padding: 2px 0 0;
    color: var(--text);
    font-family: 'Golos Text', sans-serif;
    font-size: 17px;
    font-weight: 500;
}
input::placeholder { color: #5a4e35; }
input:focus { outline: none; }
input:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0px 1000px var(--surface) inset;
    box-shadow: 0 0 0px 1000px var(--surface) inset;
    transition: background-color 9999s ease-in-out 0s;
}

.tones { display: flex; gap: 18px; margin-top: 2px; flex-wrap: wrap; }
.tones label {
    display: inline; font-size: 14px; color: var(--muted); cursor: pointer;
    padding: 6px 0; margin: 0; position: relative; text-transform: none;
    letter-spacing: normal; font-family: 'Golos Text', sans-serif;
}
.tones input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.tones input:checked + span { color: var(--accent); font-weight: 700; }
.tones input:checked + span::before { content: "● "; }
.tones input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 4px; }

button, .btn {
    display: inline-block;
    width: 100%;
    background: var(--accent);
    color: var(--bg);
    border: none;
    padding: 16px;
    font-family: 'Unbounded', sans-serif;
    text-transform: uppercase;
    font-size: 13.5px;
    letter-spacing: .04em;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    margin-top: 20px;
    text-align: center;
    text-decoration: none;
}
button:hover, .btn:hover { filter: brightness(1.1); }
button:disabled { opacity: .35; cursor: not-allowed; filter: none; pointer-events: none; }
button:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent2); outline-offset: 3px; }

.btn.secondary {
    background: none; box-shadow: none; color: var(--muted); text-decoration: underline;
    text-transform: none; font-family: 'Golos Text', sans-serif; font-weight: 500;
    letter-spacing: normal; font-size: 14px; padding: 0; width: auto; margin-top: 14px;
}
.btn.secondary:hover { color: var(--text); filter: none; }
.btn.ghost { background: none; box-shadow: none; color: var(--muted); border: 1px solid var(--line); }

.amount { font-family: 'Unbounded', sans-serif; font-weight: 900; font-size: 32px; color: var(--accent); margin: 10px 0 4px; }
.debtor { font-size: 21px; font-weight: 700; margin-bottom: 6px; }

.badge {
    display: inline-block; font-family: 'Unbounded', sans-serif; font-weight: 900; font-size: 11.5px;
    letter-spacing: .04em; text-transform: uppercase; padding: 6px 14px 6px 12px; margin-bottom: 16px;
    clip-path: polygon(0 0, 100% 0, 94% 100%, 0% 100%); color: var(--bg);
}
.badge.new { background: var(--muted); }
.badge.viewed { background: var(--accent2); }
.badge.paid { background: var(--mint); }
.badge.disputed { background: var(--accent); color: var(--text); }

.link-box {
    background: var(--bg); border-bottom: 1px solid var(--line); padding: 12px 0;
    font-family: 'IBM Plex Mono', monospace; font-size: 13px; word-break: break-all; color: var(--text);
}
.help { font-size: 12.5px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.help b { color: var(--accent2); font-weight: 500; }

.legal-footer {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    text-align: center;
    font-size: 12.5px;
    color: var(--muted);
}
.legal-footer a { color: var(--muted); text-decoration: underline; }
.legal-footer a:hover { color: var(--text); }
.legal-footer .dot { margin: 0 8px; }

.legal h1 { font-size: clamp(24px, 5vw, 32px); }
.legal h2 {
    font-family: 'Unbounded', sans-serif; font-size: 15px; text-transform: uppercase;
    letter-spacing: .03em; color: var(--accent2); margin: 28px 0 10px;
}
.legal p, .legal li { color: #cabfa2; font-size: 14.5px; line-height: 1.6; margin: 0 0 10px; }
.legal .notice {
    background: var(--surface); border-left: 4px solid var(--accent2);
    padding: 14px 16px; font-size: 13.5px; margin-bottom: 24px;
}
.legal ul { padding-left: 20px; margin: 0 0 10px; }