:root { --bg: #0f1011; --s1: #161819; --s2: #1e2122; --s3: #272b2c; --line: rgba(255, 255, 255, .08); --line2: rgba(255, 255, 255, .16); --text: #eef0ef; --muted: rgba(234, 238, 236, .56); --acc: #23c09b; --on-acc: #02140f; --accbg: rgba(35, 192, 155, .14); --accdim: #17806a; --focus: rgba(35, 192, 155, .55); --inbg: #0f1011; --up: #3ce3ab; --down: #f23674;
  --head: "Newsreader", Georgia, serif; --font: "Manrope", Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace; --r: 8px; --rb: 8px; --ri: 8px; --h1w: 500; --barbg: rgba(15, 16, 17, .92); --appw: 860px }
.logo { font-family: var(--font) }
.col { max-width: 860px; margin: 0 auto; padding: 36px 20px 80px } .t { font-size: 38px }
.dl { display: grid; gap: 10px } .dl a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 18px 20px; border-radius: var(--r); background: var(--s1); border: 1px solid var(--line) } .dl a:hover { border-color: var(--line2) }
.dl b { font: 500 22px var(--head) } .dl small { color: var(--muted); font: 12px var(--mono) } .dl .amt { font: 500 16px var(--mono); text-align: right }
.msr { display: grid; grid-template-columns: 1fr 140px 32px; gap: 8px; margin-top: 8px } .msr input { height: 44px; padding: 0 12px; border-radius: var(--ri); border: 1px solid var(--line); background: var(--inbg); outline: none; font: 13px var(--mono) } .msr input:focus { border-color: var(--focus) }
.msr button { color: var(--muted); font-size: 18px } .msr button:hover { color: var(--text) }
.sum { margin-top: 18px; padding: 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg) }
.dh { display: flex; justify-content: space-between; align-items: start; gap: 16px; flex-wrap: wrap } .dh .t { font-size: 36px } .dh small { display: block; color: var(--muted); font: 13px var(--mono); margin-top: 6px }
.mi { margin-top: 12px; padding: 18px 20px; border-radius: var(--r); background: var(--s1); border: 1px solid var(--line); display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center }
.mi .n { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line2); font: 500 14px var(--mono); color: var(--muted) } .mi.paid .n { background: var(--acc); color: var(--on-acc); border-color: var(--acc) }
.mi b { font: 500 18px var(--mono) } .mi p { color: var(--muted); font-size: 13px; margin-top: 2px } .mi .act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; grid-column: 1 / -1 }
.sheet { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .65); display: grid; place-items: center; padding: 20px } .sheet .panel { width: min(480px, 100%) }