:root {
  --lapis: #1b3a7a; --lapis-d: #0f2352; --lapis-x: #0a1a3d; --turq: #14b8a6; --saffron: #f5b301; --saffron-d: #d99a00;
  --bg: #f4f6fb; --card: #fff; --ink: #0f1b33; --muted: #5d6b85; --line: #dde3ef; --danger: #c0352b;
  --shadow: 0 1px 2px #0f1b3314, 0 8px 24px #0f1b3314;
  font-family: Vazirmatn, "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); line-height: 1.75; font-size: 16px; }
main { max-width: 1060px; margin: 0 auto; padding: 1.5rem 1.25rem 2rem; display: grid; gap: 2.25rem; }
h2 { margin: 0 0 1rem; font-size: 1.2rem; display: flex; align-items: center; gap: .6rem; }
h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.5rem; color: #fff;
  background: radial-gradient(900px 200px at 85% -40%, #2f5bb855, transparent), linear-gradient(135deg, var(--lapis-x), var(--lapis-d)); }
.brand { color: #fff; font-weight: 800; font-size: 1.4rem; text-decoration: none; display: flex; align-items: center; gap: .55rem; }
.brand::before { content: ""; width: 1.7rem; height: 1.1rem; border-radius: 4px; background: var(--saffron);
  -webkit-mask: radial-gradient(circle 4px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 4px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 4px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 4px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat; }
.top nav { display: flex; gap: .5rem; flex-wrap: wrap; }

button { font: inherit; border-radius: 10px; padding: .55rem 1.1rem; cursor: pointer; border: 1px solid transparent; transition: transform .12s, background .12s, box-shadow .12s; }
button:hover:not(:disabled) { transform: translateY(-1px); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--saffron); outline-offset: 2px; }
.solid { background: var(--saffron); color: #1a1300; font-weight: 700; box-shadow: 0 2px 0 var(--saffron-d); }
.ghost { background: transparent; color: var(--lapis); border-color: var(--line); }
.top .ghost { color: #fff; border-color: #ffffff55; }
.top .ghost:hover { background: #ffffff1a; }
.danger { color: var(--danger); border-color: #e9b6b1; }
.link { background: none; border: 0; color: var(--lapis); padding: 0; text-decoration: underline; }
button:disabled { opacity: .55; cursor: not-allowed; }

/* tickets (notched stub) */
.ticket { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.2rem 1.35rem; display: grid; gap: .65rem; box-shadow: var(--shadow);
  -webkit-mask: radial-gradient(circle 11px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 11px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat; }
.ticket h3 { margin: 0; font-size: .95rem; color: var(--muted); font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.price { font-size: 2.1rem; font-weight: 800; color: var(--lapis); line-height: 1.2; }
.hero .ticket { color: #fff; border: 0; padding: 1.9rem 2rem; gap: .9rem;
  background: radial-gradient(500px 220px at 15% 0, #f5b30133, transparent), linear-gradient(135deg, var(--lapis), var(--lapis-x)); }
.hero .price { color: var(--saffron); font-size: 3.4rem; }
.hero h3 { color: #c9d6ee; }
.hero .tag { background: #ffffff22; color: #fff; }
.hero .solid { justify-self: start; padding: .75rem 2rem; font-size: 1.05rem; }
.count { font-variant-numeric: tabular-nums; font-size: 1.6rem; font-weight: 700; letter-spacing: .02em; }
.hero .empty { padding: 2.5rem; text-align: center; color: var(--muted); background: var(--card); border: 1px dashed var(--line); border-radius: 16px; }

.bar { position: relative; height: 12px; border-radius: 8px; background: var(--line); }
.hero .bar { background: #ffffff2e; }
.bar > i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 8px; background: linear-gradient(90deg, var(--turq), #5eead4); }
.bar > b { position: absolute; top: -5px; bottom: -5px; width: 3px; border-radius: 2px; background: var(--saffron); }
.meta { display: flex; justify-content: space-between; gap: .5rem; font-size: .9rem; color: var(--muted); }
.hero .meta { color: #c9d6ee; }
.tag { display: inline-block; padding: .05rem .7rem; border-radius: 999px; font-size: .78rem; background: #e8eefb; color: var(--lapis); font-weight: 600; }

.grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.list { display: grid; gap: .6rem; }
.row-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .75rem 1rem; box-shadow: var(--shadow); }

footer { max-width: 1060px; margin: 1rem auto 2.5rem; padding: 0 1.25rem; color: var(--muted); font-size: .88rem; }
footer p { margin: .3rem 0; }

dialog { border: 0; border-radius: 18px; padding: 1.5rem; width: min(460px, 92vw); box-shadow: 0 24px 70px #0a1a3d66; }
dialog::backdrop { background: #0a1a3dbb; backdrop-filter: blur(3px); }
.stack { display: grid; gap: .8rem; }
.row { display: flex; gap: .5rem; justify-content: space-between; margin-top: .75rem; }
label { display: grid; gap: .3rem; font-size: .92rem; font-weight: 600; }
label.check { display: flex; gap: .5rem; align-items: center; font-weight: 400; }
input:not([type=checkbox]), select { font: inherit; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.err { color: var(--danger); min-height: 1.2em; margin: 0; font-size: .92rem; }
.muted { color: var(--muted); margin: 0; font-size: .9rem; }
h3 { margin: 0 0 .25rem; }
.kv { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding: .4rem 0; font-size: .92rem; }
.ltr { direction: ltr; unicode-bidi: embed; word-break: break-all; }

/* toast: lives in the top layer so it shows above open dialogs */
#toast { position: fixed; inset: 1rem 1rem auto 1rem; margin: 0 auto; width: min(560px, 92vw); border: 0; border-radius: 12px; padding: .85rem 1.1rem;
  background: var(--lapis-x); color: #fff; box-shadow: 0 12px 40px #0a1a3d77; border-inline-start: 6px solid var(--saffron); }
@media (prefers-reduced-motion: no-preference) { .bar > i { transition: inline-size .5s; } }
@media (max-width: 520px) { .hero .price { font-size: 2.6rem; } .top { padding: .75rem 1rem; } }

.chip { align-self: center; display: inline-flex; flex-direction: column; align-items: center; line-height: 1.25; white-space: nowrap; background: #ffffff1f; border: 1px solid #ffffff44; color: #fff; border-radius: 14px; padding: .15rem .7rem; font-size: .8rem; font-variant-numeric: tabular-nums; }

.x { position: absolute; inset-block-start: .7rem; inset-inline-end: .8rem; width: 2rem; height: 2rem; padding: 0; border-radius: 50%; background: var(--bg); color: var(--muted); font-size: 1rem; line-height: 1; }
.x:hover { background: var(--line); }
dialog h3 { padding-inline-end: 2.2rem; }
.pop { inset: 4.4rem auto auto auto; inset-inline-end: 1rem; margin: 0; width: min(300px, 92vw); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; background: var(--card); color: var(--ink); box-shadow: 0 16px 50px #0a1a3d44; display: none; gap: .6rem; }
.pop:popover-open { display: grid; }
.btnlink { display: block; text-align: center; text-decoration: none; padding: .55rem 1rem; border-radius: 10px; }

.tabs { display: flex; gap: .25rem; max-width: 1060px; margin: 1rem auto 0; padding: 0 1.25rem; overflow-x: auto; }
.tabs button { background: transparent; color: var(--muted); border-radius: 10px 10px 0 0; border-bottom: 3px solid transparent; font-weight: 600; white-space: nowrap; }
.tabs button.on { color: var(--lapis); border-bottom-color: var(--saffron); }
.stackp { display: grid; gap: 2.25rem; }
.code { font-family: ui-monospace, Menlo, Consolas, monospace; direction: ltr; background: #eef2fb; border-radius: 6px; padding: .05rem .55rem; letter-spacing: .04em; font-size: .85rem; user-select: all; }
dialog.ok { background: #e9f9f3; box-shadow: 0 0 0 3px var(--turq), 0 24px 70px #0a1a3d66; }
dialog.ok .muted { color: #0b6b5f; font-weight: 600; }

.hero .ghost { color: #fff; border-color: #ffffff66; justify-self: start; }

.cd { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--lapis); }

.feedbox { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .4rem .9rem; max-height: 13.5rem; overflow-y: auto; box-shadow: var(--shadow); }
.feed-row { display: flex; gap: .7rem; flex-wrap: wrap; align-items: baseline; font-size: .9rem; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.feed-row:last-child { border-bottom: 0; }
.warn { background: #fff4d6; border: 1px solid var(--saffron); border-radius: 10px; padding: .6rem .9rem; margin: 0; font-size: .9rem; }
.doc { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem 1.5rem; box-shadow: var(--shadow); max-width: 780px; }
.doc h3 { margin: 1.4rem 0 .4rem; color: var(--lapis); }
.doc h3:first-child { margin-top: 0; }
.doc p, .doc li { margin: .3rem 0; }
.doc ul { padding-inline-start: 1.3rem; }

.brand .dom { font-size: .7rem; font-weight: 500; opacity: .75; letter-spacing: .04em; direction: ltr; align-self: flex-end; }

.feed-row .sys { color: var(--turq); }
.narrow { max-width: 440px; }
.area { font: inherit; padding: .6rem; border: 1px solid var(--line); border-radius: 10px; }

.top select { background: transparent; color: #fff; border: 1px solid #ffffff55; border-radius: 10px; padding: .45rem .7rem; font: inherit; }
.top select option { color: #0f1b33; }
.en-only { display: none; }
html[lang="en"] .en-only { display: inline; }
html[lang="en"] .fa-only { display: none; }

.chip.warn { border-color: #fbbf24; color: #fde68a; }
.top .ghost.warn, #btn-wallet.warn { border-color: #fbbf24; color: #fde68a; }
.warnbox { border: 1px solid #f59e0b; border-radius: 10px; padding: .6rem .7rem; background: #fffbeb; color: #92400e; font-size: .88rem; line-height: 1.6; }