@font-face { font-family: "RTA Office"; src: url("/fonts/RTA_Office-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "RTA Office"; src: url("/fonts/RTA_Office-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --purple: #2e0f5c;
  --purple-2: #4a1a85;
  --purple-3: #220a47;
  --red: #c8102e;
  --ink: #1d1d29;
  --grey: #6b6b7b;
  --line: #e3e0ea;
  --soft: #f6f4fa;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: "RTA Office", Tahoma, Arial, sans-serif; background: var(--soft); color: var(--ink); min-height: 100vh; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.top { background: linear-gradient(90deg, var(--purple), var(--purple-2)); color: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 4px solid var(--red); position: sticky; top: 0; z-index: 5; }
.top img { width: 46px; height: 46px; border-radius: 12px; }
.top h1 { margin: 0; font-size: 21px; flex: 1; }
.top .ghost { background: rgba(255,255,255,.14); border: 0; color: #fff; border-radius: 10px; padding: 8px 12px; font-size: 14px; cursor: pointer; }

.tabs { display: flex; gap: 8px; padding: 12px 16px 0; max-width: 560px; margin: 0 auto; }
.tabs button { flex: 1; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 11px; font-size: 16px; cursor: pointer; color: var(--grey); }
.tabs button.on { background: var(--purple); color: #fff; border-color: var(--purple); font-weight: 700; }

main { max-width: 560px; margin: 0 auto; padding: 14px 16px 40px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: 0 6px 20px rgba(46,15,92,.06); }
.field { margin-bottom: 16px; }
.field > label, .field > .label { display: block; font-size: 15px; color: var(--grey); margin-bottom: 7px; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; font-size: 17px; background: #fff; outline: none; }
.field textarea { min-height: 80px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--purple-2); box-shadow: 0 0 0 3px rgba(74,26,133,.12); }
.ltr { direction: ltr; text-align: right; }
.hint { font-size: 14px; color: var(--grey); margin-top: 6px; min-height: 20px; }
.words { color: var(--purple); font-weight: 700; }

.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seg label, .opts label { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 10px; cursor: pointer; font-size: 17px; background: #fff; text-align: center; }
.seg label, .opts label { position: relative; }
.seg input, .opts input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { border-color: var(--purple); background: var(--purple); color: #fff; font-weight: 700; }
.opts { display: grid; gap: 10px; }
.opts label { justify-content: flex-start; text-align: right; }
.opts label::before { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.opts label:has(input:checked) { border-color: var(--purple-2); background: #f1ecf9; font-weight: 700; }
.opts label:has(input:checked)::before { border-color: var(--purple-2); background: radial-gradient(circle, var(--purple-2) 45%, transparent 50%); }

.clock { display: flex; justify-content: space-between; align-items: center; background: var(--soft); border-radius: 12px; padding: 12px 14px; font-size: 15px; color: var(--grey); }
.clock b { color: var(--ink); }

.btn { display: block; width: 100%; border: 0; border-radius: 14px; padding: 15px; font-size: 18px; font-weight: 700; cursor: pointer; background: var(--purple); color: #fff; }
.btn:disabled { opacity: .6; }
.btn.wa { background: #1c8d4e; }
.btn.light { background: #fff; color: var(--purple); border: 1.5px solid var(--purple); }
.btn + .btn { margin-top: 10px; }
.err { color: var(--red); font-size: 15px; margin: 0 0 12px; min-height: 0; }

.sheet { position: fixed; inset: 0; background: rgba(20,8,40,.55); z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.sheet .panel { background: #fff; width: 100%; min-width: 0; max-width: 560px; max-height: 96vh; overflow: auto; border-radius: 20px 20px 0 0; padding: 14px 16px 22px; }
.sheet .bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.sheet .bar h2 { margin: 0; font-size: 19px; color: var(--purple); }
.x { border: 0; background: var(--soft); width: 38px; height: 38px; border-radius: 50%; font-size: 22px; cursor: pointer; }
.sheet img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); margin-bottom: 14px; }
.del { background: none; border: 0; color: var(--red); margin: 14px auto 0; display: block; font-size: 15px; cursor: pointer; }

.search { margin-bottom: 12px; }
.list { display: grid; gap: 10px; }
.item { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; cursor: pointer; text-align: right; width: 100%; }
.item .tag { font-size: 13px; border-radius: 8px; padding: 4px 8px; flex: none; }
.item .tag.in { background: #e7f5ec; color: #1c7a44; }
.item .tag.out { background: #fdeaea; color: var(--red); }
.item .mid { flex: 1; min-width: 0; }
.item .mid b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .mid small { color: var(--grey); }
.item .amt { font-weight: 700; color: var(--purple); white-space: nowrap; }
.empty { text-align: center; color: var(--grey); padding: 30px 0; }

.login { max-width: 420px; margin: 0 auto; padding: 60px 20px; text-align: center; }
.login img { width: 110px; height: 110px; border-radius: 24px; box-shadow: 0 10px 30px rgba(46,15,92,.25); }
.login h1 { color: var(--purple); margin: 18px 0 6px; }
.login p { color: var(--grey); margin: 0 0 22px; }
.login .card { text-align: right; }

a.ghost { text-decoration: none; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding-top: 8px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 22px 12px; box-shadow: 0 6px 20px rgba(46,15,92,.06); text-align: center; }
.tile .ic { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; font-size: 32px; background: linear-gradient(135deg, var(--purple-2), var(--purple)); border-bottom: 3px solid var(--red); }
.tile b { font-size: 18px; color: var(--purple); }
.tile small { color: var(--grey); font-size: 13px; }

.ac { position: relative; }
.ac-list { position: absolute; top: calc(100% + 4px); right: 0; left: 0; z-index: 10; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(46,15,92,.15); max-height: 300px; overflow: auto; }
.ac-list button { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 12px 14px; font-size: 16px; text-align: right; cursor: pointer; }
.ac-list button:last-child { border-bottom: 0; }
.ac-list small { color: var(--grey); }
.gap-top { margin-top: 12px; }
.login .bio { margin-bottom: 14px; }
.bio-card { margin-top: 16px; }
.bio-card b { color: var(--purple); font-size: 17px; }
.bio-card p { color: var(--grey); margin: 6px 0 12px; font-size: 15px; }

.verify { text-align: center; }
.verify h2 { color: var(--purple); margin: 6px 0 14px; font-size: 22px; }
.badge { display: inline-block; border-radius: 999px; padding: 6px 14px; font-weight: 700; margin: 0 0 6px; }
.badge.ok { background: #e7f5ec; color: #1c7a44; }
.badge.bad { background: #fdeaea; color: var(--red); }
.vamount { background: var(--soft); border-radius: 14px; padding: 14px; margin-bottom: 10px; }
.vamount b { display: block; font-size: 30px; color: var(--purple); }
.vamount small { color: var(--ink); font-size: 15px; }
.vrow { display: flex; justify-content: space-between; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--line); text-align: right; }
.vrow:last-child { border-bottom: 0; }
.vrow span { color: var(--grey); flex: none; }
.vrow b { text-align: left; }