/* Zanjireh web app — shell, views, components. Uses brand tokens; theme-aware. */
.za { min-height: 100svh; background: var(--bg); overflow-x: hidden; }
.za ::-webkit-scrollbar { width: 10px; height: 10px; } .za ::-webkit-scrollbar-thumb { background: var(--tint-3); border-radius: 10px; }
.za-shell { display: grid; min-height: 100svh; }
@media (min-width: 1000px) { .za-shell { grid-template-columns: 264px 1fr; } }

/* sidebar */
.za-side { display: none; position: sticky; top: 0; height: 100svh; padding: 22px 16px; border-inline-end: 1px solid var(--border); background: linear-gradient(180deg, var(--bg-2), var(--bg)); flex-direction: column; gap: 22px; }
@media (min-width: 1000px) { .za-side { display: flex; } }
.za-brand { padding: 4px 10px 10px; }
.za-nav { display: grid; gap: 3px; }
.za-nav a { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 13px; color: var(--text-2); font-weight: 600; font-size: var(--fs-1); transition: background var(--t-1), color var(--t-1); }
.za-nav a svg { width: 21px; height: 21px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.za-nav a:hover { background: var(--tint-2); color: var(--text); }
.za-nav a[aria-current="page"] { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); }
.za-nav a[aria-current="page"]::before { content: ""; position: absolute; inset-inline-start: -16px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--z-grad); }
.za-nav a[aria-current="page"] svg { color: var(--accent); }
.za-nav .za-badge { margin-inline-start: auto; }
.za-nav__sep { height: 1px; background: var(--border); margin: 10px 8px; }
.za-badge { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 800; background: rgba(255, 194, 122, .18); color: #B87A22; }
:root[data-theme="dark"] .za-badge { color: var(--z-amber); }
.za-plan { margin-top: auto; padding: 16px; border-radius: 18px; background: var(--z-grad-soft); border: 1px solid rgba(42, 214, 217, .3); display: grid; gap: 8px; font-size: var(--fs-0); }
.za-plan b { font-size: var(--fs-1); }
.za-plan .za-bar { height: 6px; }

/* main + topbar */
.za-main { min-width: 0; display: flex; flex-direction: column; }
.za-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 12px clamp(14px, 3vw, 32px); background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--border); }
.za-search { flex: 1; max-width: 520px; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--border-2); background: var(--tint-1); color: var(--text-3); font-size: var(--fs-1); text-align: start; }
.za-search svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.za-search span { flex: 1; }
kbd { font-family: inherit; font-size: .7rem; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--border-2); background: var(--tint-2); color: var(--text-3); direction: ltr; }
@media (max-width: 600px) { .za-search kbd { display: none; } }
.za-top__r { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.za-icon { position: relative; width: 44px; height: 44px; border-radius: 13px; border: 1px solid var(--border-2); background: var(--tint-1); display: grid; place-items: center; }
.za-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; grid-area: 1 / 1; transition: transform .5s var(--ease), opacity .3s; }
#themeBtn .i-moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
:root[data-theme="light"] #themeBtn .i-sun { opacity: 0; transform: rotate(90deg) scale(.5); }
:root[data-theme="light"] #themeBtn .i-moon { opacity: 1; transform: none; }
.za-dot { position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--z-amber); box-shadow: 0 0 0 2px var(--bg); }
.za-me { border: 0; background: none; padding: 0; }
.za-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #02110F; background: var(--z-grad); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px rgba(42, 214, 217, .5); }
.za-bell { position: absolute; top: 64px; inset-inline-end: clamp(14px, 3vw, 32px); width: min(380px, calc(100vw - 28px)); max-height: 70vh; overflow: auto; padding: 10px; border-radius: 20px; background: var(--bg-3); border: 1px solid var(--border-2); box-shadow: var(--shadow-2); animation: pop .3s var(--ease); }
.za-bell h4 { margin: 6px 8px 10px; font-size: var(--fs-1); }
@keyframes pop { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.za-view { flex: 1; padding: clamp(18px, 3vw, 36px) clamp(14px, 3vw, 36px) 120px; outline: none; max-width: 1280px; width: 100%; }
.za-view > * { animation: viewin .5s var(--ease) both; }
@keyframes viewin { from { opacity: 0; transform: translateY(10px); } }

/* mobile tabs */
.za-tabs { position: fixed; inset: auto 10px calc(10px + env(safe-area-inset-bottom)) 10px; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px; border-radius: 22px; background: color-mix(in srgb, var(--bg-3) 86%, transparent); border: 1px solid var(--border-2); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); box-shadow: var(--shadow-1); }
@media (min-width: 1000px) { .za-tabs { display: none; } }
.za-tabs a { display: grid; justify-items: center; gap: 2px; padding: 7px 0 5px; border-radius: 16px; font-size: .68rem; font-weight: 700; color: var(--text-3); transition: color var(--t-1), background var(--t-1); }
.za-tabs svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.za-tabs a[aria-current="page"] { color: var(--text); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.za-tabs a[aria-current="page"] svg { color: var(--accent); }

/* view header */
.vh { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.vh h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.25; }
.vh p { color: var(--text-2); margin-top: 6px; }
.vh small { color: var(--text-3); font-size: var(--fs-0); }

/* cards */
.zc { position: relative; padding: 20px; border-radius: 22px; border: 1px solid var(--border); background: linear-gradient(170deg, var(--tint-2), var(--tint-1)), var(--bg); }
.zc h3 { font-size: 1.05rem; font-weight: 800; }
.zc__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.zc__h a, .zc__h button { font-size: var(--fs-0); color: var(--accent); font-weight: 700; background: none; border: 0; }
.grid { display: grid; gap: 14px; }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
@media (min-width: 1100px) { .home-grid { grid-template-columns: 1.35fr 1fr; align-items: start; } }

/* today hero */
.today { overflow: hidden; isolation: isolate; padding: 26px; border-color: color-mix(in srgb, var(--pa, var(--z-amber)) 40%, transparent); background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--pa, var(--z-amber)) 18%, transparent), transparent 60%), linear-gradient(170deg, var(--tint-2), var(--tint-1)), var(--bg); }
.today__k { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-0); font-weight: 800; color: var(--pa, var(--z-amber)); }
:root[data-theme="light"] .today__k { color: color-mix(in srgb, var(--pa, var(--z-amber)) 55%, #0A1517); }
.today__k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; animation: pulse 2s infinite; }
.today h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 900; margin: 10px 0 4px; line-height: 1.35; }
.today__amt { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.today__amt small { font-size: .9rem; color: var(--text-3); font-weight: 600; margin-inline-start: 6px; }
.today__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.today__ring { position: absolute; inset-inline-end: 22px; top: 22px; width: 92px; height: 92px; }
.today__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.today__ring circle { fill: none; stroke-width: 7; }
.today__ring .bgc { stroke: var(--tint-3); } .today__ring .v { stroke: var(--pa, var(--z-amber)); stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease); }
.today__ring b { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-size: 1.5rem; font-weight: 900; line-height: 1; }
.today__ring b small { display: block; font-size: .62rem; color: var(--text-3); font-weight: 700; margin-top: 4px; }
@media (max-width: 520px) { .today__ring { width: 70px; height: 70px; } .today__ring b { font-size: 1.15rem; } .today h2 { padding-inline-end: 80px; } }

/* quick actions */
.qa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.qa button, .qa a { display: grid; justify-items: center; gap: 8px; padding: 16px 6px; border-radius: 18px; border: 1px solid var(--border); background: var(--tint-1); font-size: .8rem; font-weight: 700; color: var(--text-2); text-align: center; transition: transform var(--t-2) var(--ease), border-color var(--t-2); }
.qa i { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: color-mix(in srgb, var(--a) 16%, transparent); color: var(--a); }
:root[data-theme="light"] .qa i { color: color-mix(in srgb, var(--a) 60%, #0A1517); }
.qa svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qa button:hover, .qa a:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--a) 45%, transparent); }

/* list rows */
.rows { display: grid; gap: 8px; }
.row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--tint-1); border: 1px solid var(--border); transition: border-color var(--t-1), background var(--t-1), opacity .4s, transform .4s var(--ease); }
.row:hover { border-color: var(--border-2); }
.row__ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--a) 16%, transparent); color: var(--a); }
:root[data-theme="light"] .row__ic { color: color-mix(in srgb, var(--a) 60%, #0A1517); }
.row__ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.row__t { min-width: 0; display: grid; line-height: 1.5; }
.row__t b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__t small { color: var(--text-3); font-size: .76rem; }
.row__r { display: grid; justify-items: end; gap: 4px; }
.row__r b { font-variant-numeric: tabular-nums; font-weight: 900; font-size: .95rem; }
.due { font-size: .7rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--tint-3); color: var(--text-2); white-space: nowrap; }
.due--soon { background: rgba(255, 194, 122, .18); color: #B87A22; } .due--late { background: rgba(255, 122, 138, .18); color: #C23F52; } .due--ok { background: rgba(20, 224, 161, .14); color: #0B8F6E; }
:root[data-theme="dark"] .due--soon { color: var(--z-amber); } :root[data-theme="dark"] .due--late { color: #FF9AA8; } :root[data-theme="dark"] .due--ok { color: var(--z-emerald); }
.row.is-paid { opacity: .55; } .row.is-paid .row__t b { text-decoration: line-through; text-decoration-color: var(--text-3); }
.row__act { display: flex; gap: 6px; }
.mini { height: 30px; padding: 0 11px; border-radius: 10px; border: 1px solid var(--border-2); background: var(--tint-1); font-size: .74rem; font-weight: 700; }
.mini--ok { border-color: rgba(20, 224, 161, .5); color: #0B8F6E; } :root[data-theme="dark"] .mini--ok { color: var(--z-emerald); }
.mini--x { width: 30px; padding: 0; display: grid; place-items: center; }
.mini--x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.month-h { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 4px 8px; font-size: var(--fs-0); color: var(--text-3); font-weight: 700; }
.month-h b { color: var(--text); font-size: .95rem; }

/* stats */
.stat { padding: 18px; border-radius: 20px; border: 1px solid var(--border); background: var(--tint-1); display: grid; gap: 4px; }
.stat span { color: var(--text-3); font-size: var(--fs-0); font-weight: 600; }
.stat b { font-size: 1.45rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.3; }
.stat em { font-style: normal; font-size: .74rem; color: var(--text-3); }
.za-bar { height: 8px; border-radius: 8px; background: var(--tint-3); overflow: hidden; }
.za-bar i { display: block; height: 100%; border-radius: inherit; background: var(--z-grad); transition: width 1s var(--ease); }

/* chart */
.wk { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: end; height: 150px; padding-top: 10px; }
.wk div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; height: 100%; }
.wk i { width: 100%; max-width: 46px; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, var(--z-cyan), color-mix(in srgb, var(--z-cyan) 25%, transparent)); min-height: 4px; transition: height 1s var(--ease); }
.wk div.is-now i { background: linear-gradient(180deg, var(--z-amber), color-mix(in srgb, var(--z-amber) 25%, transparent)); }
.wk span { font-size: .7rem; color: var(--text-3); white-space: nowrap; }
.wk b { font-size: .72rem; font-variant-numeric: tabular-nums; }

/* app tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 14px; }
.tile-a { display: grid; justify-items: center; gap: 8px; text-align: center; font-size: .78rem; font-weight: 700; color: var(--text-2); position: relative; }
.tile-a i { width: 62px; height: 62px; border-radius: 19px; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 1.1rem; color: #02110F; background: linear-gradient(140deg, color-mix(in srgb, var(--a) 60%, #fff), var(--a)); box-shadow: 0 12px 26px -12px var(--a), inset 0 1px 0 rgba(255, 255, 255, .5); transition: transform var(--t-2) var(--ease); }
.tile-a:hover i { transform: translateY(-4px) scale(1.04); }
.tile-a.is-soon i { filter: saturate(.25) brightness(.8); }
.tile-a em { font-style: normal; font-size: .62rem; font-weight: 600; color: var(--text-3); margin-top: -6px; }

/* store */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 16px; }
.chips::-webkit-scrollbar { display: none; }
.chip-b { flex: none; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--tint-1); font-weight: 700; font-size: .82rem; color: var(--text-2); }
.chip-b[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--text); }
.store { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.sapp { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 16px; border-radius: 20px; border: 1px solid var(--border); background: var(--tint-1); }
.sapp i { width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; font-style: normal; font-weight: 900; color: #02110F; background: linear-gradient(140deg, color-mix(in srgb, var(--a) 60%, #fff), var(--a)); }
.sapp b { font-size: 1rem; } .sapp p { color: var(--text-2); font-size: .82rem; line-height: 1.7; margin: 4px 0 10px; }
.sapp__f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st { font-size: .7rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border-2); color: var(--text-3); }
.st--live { color: #0B8F6E; border-color: rgba(20, 224, 161, .45); } :root[data-theme="dark"] .st--live { color: var(--z-emerald); }
.vote { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-2); background: none; font-size: .74rem; font-weight: 800; color: var(--text-2); }
.vote svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vote.is-on { color: var(--on-accent); background: var(--z-grad); border-color: transparent; }
.vote.is-on svg { fill: currentColor; }

/* forms */
.za-input, .za-select { width: 100%; height: 50px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--border-2); background: var(--tint-1); color: var(--text); font: inherit; font-size: 1rem; transition: border-color var(--t-1), box-shadow var(--t-1); }
.za-input:focus, .za-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.za-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%236E8483' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 12px center; background-size: 18px; padding-inline-end: 12px; padding-inline-start: 16px; }
.za-select option { background: var(--bg-3); color: var(--text); }
.fld { display: grid; gap: 7px; font-size: var(--fs-0); font-weight: 700; color: var(--text-2); }
.fld small { font-weight: 500; color: var(--text-3); }
.fld-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { height: 38px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border-2); background: var(--tint-1); font-size: .82rem; font-weight: 700; color: var(--text-2); }
.seg button[aria-pressed="true"] { color: var(--text); border-color: color-mix(in srgb, var(--a, var(--accent)) 60%, transparent); background: color-mix(in srgb, var(--a, var(--accent)) 14%, transparent); }
.words { font-size: .76rem; color: var(--accent); min-height: 1.3em; }

/* toggle switch */
.sw { position: relative; width: 50px; height: 30px; flex: none; }
.sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sw span { position: absolute; inset: 0; border-radius: 999px; background: var(--tint-3); border: 1px solid var(--border-2); transition: background var(--t-2); pointer-events: none; }
.sw span::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform var(--t-2) var(--ease); }
.sw input:checked + span { background: var(--z-cyan); }
.sw input:checked + span::after { transform: translateX(-20px); }
.sw input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.set { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.set:last-child { border-bottom: 0; }
.set div { display: grid; } .set small { color: var(--text-3); font-size: var(--fs-0); }

/* sheet */
.za-sheet, .za-cmd { position: fixed; inset: 0; z-index: 80; display: grid; align-items: end; justify-items: center; }
.za-sheet[hidden], .za-cmd[hidden] { display: none; }
.za-sheet__bg { position: absolute; inset: 0; background: rgba(2, 6, 8, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade .3s; }
@keyframes fade { from { opacity: 0; } }
.za-sheet__card { position: relative; width: min(560px, 100%); max-height: 92svh; overflow: auto; padding: 24px; border-radius: 28px 28px 0 0; background: var(--bg-3); border: 1px solid var(--border-2); box-shadow: var(--shadow-2); animation: up .45s var(--ease); display: grid; gap: 16px; }
@media (min-width: 700px) { .za-sheet { align-items: center; } .za-sheet__card { border-radius: 28px; animation: pop .35s var(--ease); } }
@keyframes up { from { transform: translateY(100%); } }
.za-sheet__card h2 { font-size: 1.35rem; font-weight: 900; }
.za-sheet__card .btns { display: flex; gap: 10px; }
.za-sheet__card .btns .btn { flex: 1; }
.btn--danger { background: rgba(255, 122, 138, .12); border: 1px solid rgba(255, 122, 138, .45); color: #C23F52; }
:root[data-theme="dark"] .btn--danger { color: #FF9AA8; }

/* command palette */
.za-cmd { align-items: start; padding-top: 12vh; }
.za-cmd__box { position: relative; width: min(620px, calc(100% - 24px)); border-radius: 22px; background: var(--bg-3); border: 1px solid var(--border-2); box-shadow: var(--shadow-2); overflow: hidden; animation: pop .25s var(--ease); }
.za-cmd__in { width: 100%; height: 62px; padding: 0 22px; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text); font: inherit; font-size: 1.1rem; }
.za-cmd__in:focus { outline: none; }
.za-cmd__list { max-height: 52vh; overflow: auto; padding: 8px; }
.za-cmd__g { padding: 10px 12px 4px; font-size: .7rem; font-weight: 800; color: var(--text-3); }
.za-cmd__it { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 12px; border: 0; background: none; text-align: start; font-size: .95rem; color: var(--text-2); }
.za-cmd__it i { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: .8rem; background: color-mix(in srgb, var(--a, var(--accent)) 16%, transparent); color: var(--a, var(--accent)); }
.za-cmd__it small { margin-inline-start: auto; color: var(--text-3); font-size: .72rem; }
.za-cmd__it.is-on { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); }
.za-cmd__foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--border); font-size: .72rem; color: var(--text-3); }
.za-cmd__empty { padding: 30px; text-align: center; color: var(--text-3); }

/* toasts */
.za-toasts { position: fixed; z-index: 120; inset-inline: 0; bottom: calc(96px + env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 8px; pointer-events: none; }
@media (min-width: 1000px) { .za-toasts { bottom: 28px; } }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 16px; background: var(--bg-3); border: 1px solid var(--border-2); box-shadow: var(--shadow-1); font-weight: 700; font-size: .9rem; pointer-events: auto; animation: tin .4s var(--ease); }
.toast::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--z-emerald); box-shadow: 0 0 10px var(--z-emerald); }
.toast button { margin-inline-start: 8px; background: none; border: 0; color: var(--accent); font-weight: 800; }
.toast.out { animation: tout .3s var(--ease) forwards; }
@keyframes tin { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes tout { to { opacity: 0; transform: translateY(10px); } }

/* empty */
.empty { display: grid; justify-items: center; gap: 10px; padding: 40px 20px; text-align: center; color: var(--text-3); }
.empty svg { width: 64px; height: 64px; fill: none; stroke: var(--accent); stroke-width: 1.2; opacity: .7; }
.empty b { color: var(--text); font-size: 1.05rem; }

/* calculator */
.tabs-c { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--tint-2); border: 1px solid var(--border); margin-bottom: 18px; flex-wrap: wrap; }
.tabs-c button { height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: none; font-weight: 700; font-size: .88rem; color: var(--text-2); }
.tabs-c button[aria-pressed="true"] { background: var(--bg-3); color: var(--text); box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
.big-out { display: grid; gap: 4px; padding: 22px; border-radius: 20px; background: var(--z-grad-soft); border: 1px solid rgba(42, 214, 217, .3); }
.big-out span { font-size: var(--fs-0); color: var(--text-2); font-weight: 700; }
.big-out b { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.2; }
.big-out em { font-style: normal; font-size: .82rem; color: var(--text-3); }
.amort { width: 100%; border-collapse: collapse; font-size: .82rem; font-variant-numeric: tabular-nums; }
.amort th { text-align: start; font-weight: 700; color: var(--text-3); padding: 8px 10px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-3); }
.amort td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.amort-wrap { max-height: 320px; overflow: auto; border-radius: 14px; border: 1px solid var(--border); }
.src { font-size: .74rem; color: var(--text-3); line-height: 1.8; padding-inline-start: 10px; border-inline-start: 2px solid var(--border-2); }

/* club */
.games { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.game { position: relative; aspect-ratio: 1.15; border-radius: 22px; overflow: hidden; isolation: isolate; padding: 16px; display: flex; flex-direction: column; justify-content: end; color: #fff; border: 1px solid rgba(255, 255, 255, .08); background: var(--g); transition: transform var(--t-2) var(--ease), box-shadow var(--t-2); text-align: start; }
.game:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -24px var(--gc); }
.game::before { content: attr(data-glyph); position: absolute; z-index: -1; top: -6%; inset-inline-end: -4%; font-size: 7rem; line-height: 1; opacity: .22; }
.game::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 30%, rgba(0, 0, 0, .55)); }
.game b { font-size: 1.15rem; font-weight: 900; } .game small { opacity: .8; font-size: .76rem; }
.game .live { position: absolute; top: 12px; inset-inline-start: 12px; font-size: .66rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .2); }

/* plan */
.pl { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.pl .plan { gap: 10px; }
.pl .plan.is-cur { border-color: rgba(20, 224, 161, .55); box-shadow: 0 0 0 4px rgba(20, 224, 161, .07); }

/* onboarding */
.ob { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 20px; background: var(--bg); overflow: hidden; }
.ob[hidden] { display: none; }
.ob__glow { position: absolute; width: 120vmax; height: 120vmax; border-radius: 50%; background: radial-gradient(circle, rgba(42, 214, 217, .16), transparent 55%); animation: drift 14s var(--ease-io) infinite alternate; }
.ob__card { position: relative; width: min(560px, 100%); }
.ob__step { display: none; text-align: center; justify-items: center; gap: 18px; }
.ob__step.is-on { display: grid; animation: viewin .6s var(--ease) both; }
.ob__mark { width: 96px; height: 96px; filter: drop-shadow(0 0 30px rgba(42, 214, 217, .55)); animation: spin 30s linear infinite; }
.ob h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3rem); font-weight: 900; letter-spacing: -.02em; }
.ob h2 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.3rem); font-weight: 900; }
.ob p { color: var(--text-2); max-width: 40ch; }
.ob__k { font-size: var(--fs-0); color: var(--accent); font-weight: 800; }
.ob__name { max-width: 360px; text-align: center; font-size: 1.2rem; height: 58px; }
.ob__demo { color: var(--text-3); font-size: .75rem; }
.ob__personas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.ob__personas button { display: grid; justify-items: center; gap: 10px; padding: 20px 10px; border-radius: 20px; border: 1px solid var(--border-2); background: var(--tint-1); font-weight: 800; font-size: .92rem; color: var(--text-2); transition: all var(--t-2) var(--ease); }
.ob__personas i { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--a) 16%, transparent); color: var(--a); }
.ob__personas svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ob__personas button[aria-pressed="true"] { color: var(--text); border-color: color-mix(in srgb, var(--a) 65%, transparent); background: color-mix(in srgb, var(--a) 12%, transparent); transform: translateY(-3px); box-shadow: 0 14px 30px -16px var(--a); }
.burst { position: fixed; z-index: 200; pointer-events: none; width: 8px; height: 8px; border-radius: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .4; } }
@keyframes drift { to { transform: translate(6vmax, 4vmax) scale(1.1); } }
.za-cmd__it svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.za .btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: none; width: 18px; height: 18px; }
.za-bell .row__ic svg { width: 20px; height: 20px; }

.zc.grid { align-content: start; }

/* ---------- wave-1 tools ---------- */
.inl { display: grid; grid-template-columns: 2.2fr .7fr 1.3fr auto; gap: 6px; align-items: center; }
.inl .za-input { height: 44px; padding: 0 10px; font-size: .9rem; }
.inv { background: #FFFFFF; color: #16202A; border-radius: 18px; padding: 24px; font-size: .9rem; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.inv__h { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid #16202A; }
.inv__h b { font-size: 1.15rem; display: block; } .inv__h small { color: #6B7280; }
.inv__no { text-align: left; }
.inv__to { margin: 14px 0; color: #4B5563; }
.inv__t { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.inv__t th { text-align: start; font-size: .78rem; color: #6B7280; padding: 8px 6px; border-bottom: 1px solid #E5E7EB; }
.inv__t td { padding: 9px 6px; border-bottom: 1px solid #F1F2F4; }
.inv__s { display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; margin: 16px 0 0 auto; max-width: 320px; font-variant-numeric: tabular-nums; }
.inv__s span { color: #6B7280; } .inv__s .g { color: #16202A; font-weight: 900; font-size: 1.05rem; padding-top: 8px; border-top: 1px solid #E5E7EB; }
.inv__f { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; color: #9CA3AF; }
.inv__stamp { border: 2px solid #0B8F6E; color: #0B8F6E; font-weight: 900; padding: 2px 12px; border-radius: 8px; transform: rotate(-6deg); }
.msec { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.msec__h { display: flex; justify-content: space-between; align-items: center; }
.msec__h .mini svg, .mini svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.mit { display: grid; grid-template-columns: 1fr 120px auto; gap: 6px; align-items: center; transition: opacity .3s; }
.mit .za-input { height: 42px; padding: 0 10px; font-size: .88rem; }
.mit.is-off { opacity: .45; }
.mprev { padding: 46px 18px 24px; color: #2B1E14; font-size: .82rem; }
.mprev__h { text-align: center; margin-bottom: 14px; } .mprev__h b { display: block; font-size: 1.2rem; font-weight: 900; } .mprev__h small { color: #9A7B5E; }
.mprev__s h4 { margin: 14px 0 6px; font-size: .78rem; color: #B5651D; letter-spacing: .04em; border-bottom: 1px dashed #E5D3BE; padding-bottom: 4px; }
.mprev__i { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; }
.mprev__i b { display: block; } .mprev__i small { color: #9A7B5E; font-size: .7rem; }
.mprev__i span { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mprev__f { text-align: center; color: #B8A48E; font-size: .66rem; margin-top: 18px; }
.qrbox { width: 112px; flex: none; border-radius: 12px; overflow: hidden; }
.tcard { width: 300px; margin-inline: auto; padding: 26px; border-radius: 22px; background: #fff; color: #16202A; text-align: center; display: grid; justify-items: center; gap: 12px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.tcard b { font-size: 1.3rem; font-weight: 900; } .tcard__qr { width: 200px; } .tcard span { font-size: .85rem; color: #4B5563; } .tcard small { color: #9CA3AF; font-size: .7rem; }
.cvb { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: var(--tint-1); border: 1px solid var(--border); }
.cvb .za-input { height: 42px; font-size: .9rem; }
.cvpage { background: #fff; border-radius: 10px; box-shadow: var(--shadow-1); aspect-ratio: 1 / 1.414; overflow: hidden; }
.cv { color: #1C2430; padding: 34px; font-size: .82rem; line-height: 1.8; height: 100%; }
.cv__head { display: flex; gap: 16px; align-items: center; padding-bottom: 18px; margin-bottom: 8px; }
.cv__av { width: 64px; height: 64px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 1.6rem; color: #fff; background: linear-gradient(135deg, #0B8C9B, #14C08E); }
.cv h2 { font-size: 1.5rem; font-weight: 900; line-height: 1.3; } .cv__head p { color: #0B8C9B; font-weight: 700; }
.cv__ct { display: flex; flex-wrap: wrap; gap: 4px 14px; color: #6B7280; font-size: .74rem; }
.cv__sec { margin-top: 14px; } .cv__sec h3 { font-size: .9rem; font-weight: 900; color: #0B8C9B; margin-bottom: 6px; }
.cv__it { display: grid; grid-template-columns: 1fr auto; margin-bottom: 8px; } .cv__it b { font-weight: 800; } .cv__it span { color: #6B7280; margin-inline-start: 8px; }
.cv__it em { font-style: normal; color: #6B7280; font-size: .74rem; } .cv__it p { grid-column: 1 / -1; color: #4B5563; }
.cv__sk { display: flex; flex-wrap: wrap; gap: 6px; } .cv__sk span { padding: 2px 10px; border-radius: 999px; background: #E8F6F5; color: #0B6E78; font-size: .74rem; font-weight: 700; }
.cv--modern .cv__head { margin: -34px -34px 8px; padding: 30px 34px; background: linear-gradient(135deg, #0A1F26, #0E3A3E); color: #fff; }
.cv--modern .cv__head p { color: #7CE8FF; } .cv--modern .cv__ct { color: #A7BAB8; }
.cv--classic .cv__head { border-bottom: 2px solid #1C2430; } .cv--classic .cv__av { background: #1C2430; } .cv--classic .cv__sec h3 { color: #1C2430; border-bottom: 1px solid #E5E7EB; }
.print-area { display: none; }
@media print {
  @page { size: A4; margin: 12mm; }
  body.printing > *:not(.print-area) { display: none !important; }
  body.printing .print-area { display: block; }
  body.printing { background: #fff !important; }
  .print-area .inv, .print-area .tcard { box-shadow: none; }
  .print-area .tcard { margin: 0 auto 20mm; }
  .print-area .cv { padding: 0; }
  .print-area .cv--modern .cv__head { margin: 0 0 8px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- batch A apps ---------- */
.donut { flex: none; }
.lg-row { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; font-size: .88rem; }
.lg-row i { width: 12px; height: 12px; border-radius: 4px; } .lg-row b { font-variant-numeric: tabular-nums; }
.dot-c { width: 14px; height: 14px; border-radius: 50%; display: block; }
.hb__top { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-bottom: 14px; }
.hb__top div { display: grid; } .hb__top small { color: var(--text-3); font-size: .78rem; }
.hb__chk { width: 44px; height: 44px; border-radius: 14px; border: 2px solid var(--a); background: transparent; color: #02110F; font-weight: 900; font-size: 1.2rem; transition: background var(--t-2), transform var(--t-1); }
.hb__chk.on { background: var(--a); } .hb__chk:active { transform: scale(.9); }
.hb__grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 15px); grid-auto-columns: 15px; gap: 4px; direction: ltr; justify-content: end; }
.hb__grid i { aspect-ratio: 1; border-radius: 4px; background: var(--tint-3); }
.hb__grid i.on { background: var(--a); box-shadow: 0 0 6px color-mix(in srgb, var(--a) 60%, transparent); }
.fc-wrap { display: grid; justify-items: center; gap: 16px; padding: 10px 0 30px; }
.fc { width: min(460px, 100%); aspect-ratio: 1.6; perspective: 1200px; cursor: pointer; display: grid; gap: 10px; justify-items: center; }
.fc small { color: var(--text-3); font-size: .78rem; }
.fc__in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s var(--ease); }
.fc.flip .fc__in { transform: rotateY(180deg); }
.fc__f, .fc__b { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; border-radius: 26px; backface-visibility: hidden; -webkit-backface-visibility: hidden; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); font-weight: 900; text-align: center; border: 1px solid var(--border-2); }
.fc__f { background: radial-gradient(100% 100% at 50% 0%, rgba(42, 214, 217, .18), transparent 70%), var(--bg-3); }
.fc__b { background: radial-gradient(100% 100% at 50% 0%, rgba(255, 194, 122, .18), transparent 70%), var(--bg-3); transform: rotateY(180deg); font-size: clamp(1.2rem, 1rem + 1.2vw, 1.7rem); }
.fc__btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.fc__btns[hidden] { display: none; }

/* Sarresid: receivables, bounced cheques, cash-flow report */
.amt-in { color: #14E0A1; }
.row.is-bounced { border-color: rgba(255,122,138,.45); background: rgba(255,122,138,.06); }
.row.is-bounced .row__t b { text-decoration: line-through; text-decoration-color: rgba(255,122,138,.7); }
.cf { display: grid; gap: 12px; }
.cf__r { display: grid; grid-template-columns: 64px minmax(0,1fr) auto; gap: 12px; align-items: center; }
.cf__r > b { font-size: .9rem; }
.cf__bars { display: grid; gap: 4px; }
.cf__bars i { display: block; height: 9px; border-radius: 6px; min-width: 2px; }
.cf__out { background: linear-gradient(90deg, #FF7A8A, #FFB36B); }
.cf__in { background: linear-gradient(90deg, #14E0A1, #2AD6D9); }
.cf__n { display: grid; justify-items: end; font-size: .8rem; font-variant-numeric: tabular-nums; }
.cf__n em { font-style: normal; font-weight: 700; }
@media (max-width: 520px) { .cf__r { grid-template-columns: 52px minmax(0,1fr); } .cf__n { grid-column: 1 / -1; grid-template-columns: repeat(3, auto); justify-content: space-between; } }

.kmon { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 4px 0 16px; }
.kmon b { font-size: 1.05rem; min-width: 120px; text-align: center; }
.kgoal { padding: 12px 0; border-bottom: 1px solid rgba(var(--ink), .07); }
.kgoal:last-child { border-bottom: 0; }
.kstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.kstats .stat { padding: 14px 12px; }
.kstats .stat b { font-size: clamp(1rem, 4.4vw, 1.55rem); }
.kstats .stat em { font-size: .7rem; }
.cf__r--empty { grid-template-columns: 64px 1fr; opacity: .7; }
.kgoal .lg-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kgoal .lg-row span { flex: 1; min-width: 0; }

/* habits freeze, water week, task tags */
.hb__grid i.fz { background: linear-gradient(180deg, #CFEFFF, #7CE8FF); opacity: .85; }
.wbars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 120px; align-items: end; margin-top: 12px; }
.wbar { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 6px; justify-items: center; }
.wbar i { align-self: end; width: 70%; min-height: 3px; border-radius: 8px 8px 3px 3px; background: rgba(124,232,255,.35); }
.wbar.ok i { background: linear-gradient(180deg, #7CE8FF, #2AD6D9); box-shadow: 0 0 14px rgba(42,214,217,.35); }
.wbar span { font-size: .72rem; color: var(--text-3); }
.chip-tag { font-size: .78rem; }
.hb__top .hb__acts { display: flex; gap: 6px; align-items: center; }
.hb__acts .mini { white-space: nowrap; }
.za-toasts { padding-inline: 16px; }
.za-toasts > * { max-width: min(520px, 100%); white-space: normal; box-sizing: border-box; }
.pub { display: grid; gap: 10px; width: 100%; }
.pub__url { display: flex; align-items: center; gap: 4px; border: 1px solid var(--border-2); border-radius: 14px; padding-inline-start: 12px; background: var(--tint-1); overflow: hidden; }
.pub__url span { color: var(--text-3); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.pub__url .za-input { border: 0; background: none; padding-inline: 4px; min-width: 0; height: 44px; }
.inv__shop { display: flex; gap: 10px; align-items: center; }
.inv__shop img { width: 48px; height: 48px; object-fit: contain; border-radius: 10px; }
.pf-tag { font-size: .72rem; padding: 2px 8px; border-radius: 999px; background: rgba(255,194,122,.16); color: #FFC27A; }

/* AI tools: extras, history, chat */
.ai-x { border: 1px solid var(--border-2); border-radius: 14px; padding: 10px 14px; background: var(--tint-1); }
.ai-x summary { cursor: pointer; font-weight: 700; font-size: .9rem; }
.ai-x[open] summary { margin-bottom: 10px; }
.ai-h { width: 100%; text-align: right; background: none; border: 0; border-bottom: 1px solid rgba(var(--ink), .07); padding: 8px 2px; color: inherit; font: inherit; cursor: pointer; }
.ai-h small { color: var(--text-3); }
.aic { max-height: 340px; overflow-y: auto; }
.aic__tip { justify-self: start; margin: 4px 0 8px; padding: 8px 12px; border-radius: 12px; background: rgba(255,194,122,.1); color: #FFC27A; font-size: .84rem; }
.aic__w { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0 10px; }
.aic__w span { font-size: .78rem; padding: 3px 9px; border-radius: 999px; background: rgba(124,232,255,.1); direction: ltr; }
.ai-vtt { font-size: .85rem; line-height: 1.7; }
.cv--minimal .cv__head { border-bottom: 0; padding-bottom: 4px; } .cv--minimal .cv__av { display: none; } .cv--minimal h2 { letter-spacing: -.01em; } .cv--minimal .cv__sec h3 { color: #6B7280; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; border: 0; } .cv--minimal .cv__sk span { background: none; border: 1px solid #E5E7EB; }
.cvb .cv-rw { justify-self: start; }
.cv-ai { margin-top: 16px; }
.kweek { display: grid; gap: 6px; }
.kday { display: grid; grid-template-columns: 74px 1fr; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(var(--ink), .06); }
.kday.is-now > b { color: var(--accent); }
.kday > div { display: flex; flex-wrap: wrap; gap: 6px; }
.kblk { border: 1px solid color-mix(in srgb, var(--a) 50%, transparent); background: color-mix(in srgb, var(--a) 14%, transparent); color: inherit; border-radius: 10px; padding: 4px 10px; font: inherit; font-size: .8rem; cursor: pointer; }
.kw { display: grid; gap: 4px; }
.kw .seg button { padding-inline: 10px; }
.wcal { display: grid; grid-template-columns: repeat(14, 1fr); gap: 5px; direction: ltr; margin-top: 10px; }
.wcal i { aspect-ratio: 1; border-radius: 5px; background: var(--tint-2); }
.wcal i.on { background: linear-gradient(135deg, #14E0A1, #2AD6D9); box-shadow: 0 0 8px rgba(20,224,161,.4); }
.wpc .wwarn { color: #FFC27A; font-size: .74rem; line-height: 1.7; margin-top: 6px; display: block; }
.fmenu { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid rgba(var(--ink), .06); font-size: .88rem; }
.fmenu span { color: var(--text-2); }
.fshop { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; margin-top: 8px; font-size: .9rem; }
.mix { display: grid; gap: 8px; }
.mix__r { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 10px; font-size: .9rem; }
.mix__r input[type=range] { width: 100%; accent-color: var(--accent); }
.fc__ex { display: block; margin-top: 10px; font-size: .82rem; color: var(--text-2); line-height: 1.8; white-space: pre-line; }
.fc__tools { display: flex; gap: 8px; justify-content: center; margin: 10px 0; }
.ab__tr { max-width: 340px; margin: 0 auto; border-radius: 24px; border: 1px solid var(--border-2); background: var(--tint-1); overflow: hidden; touch-action: none; }
.ab__tr canvas { width: 100%; height: auto; display: block; }
.ab__cnt { font-style: normal; letter-spacing: 4px; word-break: break-all; }
.pill-tag { display: inline-block; font-size: .7rem; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--a) 18%, transparent); color: var(--a); }
.groute { position: relative; height: 12px; border-radius: 8px; background: var(--tint-2); margin: 26px 0 10px; }
.groute i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 8px; background: linear-gradient(90deg, #14E0A1, #2AD6D9); }
.groute b { position: absolute; top: -28px; font-size: 1.4rem; }
.circ__c { padding: 10px 0; border-bottom: 1px solid rgba(var(--ink), .07); }
.circ__c:last-of-type { border-bottom: 0; }
.circ__h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.circ__acts { margin-inline-start: auto; display: flex; gap: 6px; }
.circ__l { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.circ__l li { display: grid; grid-template-columns: 28px minmax(70px, auto) 1fr auto; gap: 8px; align-items: center; font-size: .9rem; }
.circ__l li i { height: 8px; border-radius: 6px; background: linear-gradient(90deg, #2AD6D9, #14E0A1); opacity: .55; }
.circ__l li.me i { opacity: 1; }
.circ__l li.me b { color: var(--accent); }
.circ__l li em { font-style: normal; font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- brand QA: light theme keeps every accent readable (contrast ≥ 4.5 on Pearl) ---------- */
:root[data-theme="light"] .amt-in,
:root[data-theme="light"] [style*="color:#14E0A1"] { color: #08835F !important; }
:root[data-theme="light"] [style*="color:#FF7A8A"] { color: #C2283F !important; }
:root[data-theme="light"] [style*="color:#FFC27A"] { color: #9A5B00 !important; }
:root[data-theme="light"] [style*="color:#7CE8FF"], :root[data-theme="light"] [style*="color:#2AD6D9"] { color: #0B7487 !important; }
:root[data-theme="light"] .pill-tag { color: color-mix(in srgb, var(--a) 45%, #0A1517); background: color-mix(in srgb, var(--a) 22%, transparent); }
:root[data-theme="light"] .wpc .wwarn { color: #8A5200; }
:root[data-theme="light"] .aic__tip { color: #8A5200; background: rgba(255,194,122,.22); }
:root[data-theme="light"] .circ__l li.me b, :root[data-theme="light"] .kday.is-now > b { color: #0B7487; }
.mprev__f { color: #7A6450; }

/* «حلقه»: balance pill, confirm sheet, receipt, wallet */
.za-ring { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 13px; border: 1px solid var(--border-2); background: var(--tint-1); color: var(--text); text-decoration: none; font-size: .9rem; }
.za-ring svg, .zq-ic { width: 20px; height: 20px; fill: none; stroke: var(--accent, #2AD6D9); stroke-width: 1.8; }
.za-ring span { color: var(--text-3); font-size: .78rem; }
.za-ring.low { border-color: #FFC27A88; }
.za-ring.low b { color: #FFC27A; }
@media (max-width: 560px) { .za-ring span { display: none; } .za-ring { padding: 0 10px; } }
.zq-back { position: fixed; inset: 0; z-index: 90; background: rgba(4, 6, 9, .62); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; animation: viewin .25s var(--ease, ease); }
.zq-back.out { opacity: 0; transition: opacity .2s; }
.zq { width: min(420px, 100%); background: var(--surface, #0D1117); border: 1px solid var(--border-2); border-radius: 22px; padding: 24px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.zq h3 { margin: 6px 0 10px; }
.zq__ring .zq-ic { width: 42px; height: 42px; }
.zq__big { font-size: 1.25rem; margin: 6px 0; }
.zq__big b { font-size: 1.9rem; color: var(--accent, #2AD6D9); }
.zq__note { color: var(--text-3); font-size: .86rem; line-height: 1.9; }
.zq__chk { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 12px 0 4px; font-size: .86rem; }
.zq__btns { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.zq-receipt { position: fixed; z-index: 95; inset-inline: 0; bottom: 92px; margin: auto; width: max-content; max-width: calc(100% - 32px); display: flex; gap: 8px; align-items: center; padding: 10px 16px; border-radius: 999px; background: var(--surface, #0D1117); border: 1px solid var(--border-2); box-shadow: 0 10px 30px rgba(0,0,0,.35); font-size: .88rem; animation: viewin .3s var(--ease, ease); }
.zq-receipt.out { opacity: 0; transform: translateY(8px); transition: .35s; }
.wl-bal { display: grid; gap: 16px; }
.wl-big { display: flex; align-items: baseline; gap: 10px; }
.wl-big .zq-ic { width: 34px; height: 34px; align-self: center; }
.wl-big b { font-size: 2.6rem; }
.wl-parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wl-parts div { padding: 12px; border-radius: 14px; background: var(--tint-1); display: grid; gap: 4px; }
.wl-parts small, .wl-parts em { color: var(--text-3); font-size: .74rem; font-style: normal; }
.wl-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.wl-pack { display: grid; gap: 2px; padding: 16px 10px; border-radius: 16px; border: 1px solid var(--border-2); background: var(--tint-1); color: var(--text); cursor: pointer; text-align: center; }
.wl-pack:hover { border-color: var(--accent, #2AD6D9); }
.wl-pack b { font-size: 1.5rem; }
.wl-pack em { font-style: normal; color: var(--accent, #2AD6D9); }
.wl-pack small, .wl-pack span { color: var(--text-3); font-size: .74rem; }
.wl-num { width: 110px; text-align: center; }
.wl-rows { display: grid; gap: 6px; margin-top: 10px; }
.wl-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--tint-1); font-size: .86rem; }
.wl-row em { color: var(--text-3); font-style: normal; font-size: .76rem; }
.wl-row small { color: var(--text-3); }
.wl-ex ul { margin: 10px 0 0; padding-inline-start: 18px; line-height: 2; color: var(--text-2, inherit); }
@media (max-width: 560px) { .wl-parts, .wl-packs { grid-template-columns: 1fr; } }
.wl-link { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; text-decoration: none; color: var(--text); }
.wl-link span { margin-inline-start: auto; color: var(--text-3); font-size: .86rem; }
/* wallet: level, daily ring, bonus packs, invite, gift */
.wl-hero { display: grid; gap: 16px; margin-bottom: 14px; background: radial-gradient(120% 140% at 100% 0%, rgba(42, 214, 217, .14), transparent 60%), var(--surface, transparent); }
.wl-lv { display: grid; gap: 6px; }
.wl-badge { justify-self: start; padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: rgba(205, 127, 50, .16); color: #E0A06A; }
.wl-badge--نقره‌ای { background: rgba(192, 200, 210, .16); color: #C9D2DC; }
.wl-badge--طلایی { background: rgba(255, 194, 122, .18); color: #FFC27A; }
.wl-badge--الماس { background: rgba(124, 232, 255, .16); color: #7CE8FF; }
.wl-prog { height: 8px; border-radius: 99px; background: var(--tint-1); overflow: hidden; }
.wl-prog i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #14E0A1, #2AD6D9, #7CE8FF); }
.wl-lv small { color: var(--text-3); font-size: .78rem; }
.wl-daily { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.wl-daily > div { display: grid; gap: 4px; }
.wl-daily small { color: var(--text-3); font-size: .8rem; }
.wl-dots { display: flex; gap: 6px; margin-top: 4px; }
.wl-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-2); }
.wl-dots i.on { background: #14E0A1; border-color: #14E0A1; box-shadow: 0 0 10px rgba(20, 224, 161, .5); }
.wl-done { color: var(--text-3); font-size: .86rem; }
.wl-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wl-h h3 { margin: 0; }
.wl-first { padding: 5px 12px; border-radius: 999px; background: rgba(255, 194, 122, .16); color: #FFC27A; font-size: .8rem; font-weight: 700; }
.wl-packs { grid-template-columns: repeat(4, 1fr) !important; }
.wl-pack { position: relative; }
.wl-pack strong { color: #14E0A1; font-size: .82rem; }
.wl-pack--hot { border-color: rgba(42, 214, 217, .6); box-shadow: 0 10px 30px rgba(42, 214, 217, .12); }
.wl-tag { position: absolute; top: -10px; inset-inline: 0; margin: auto; width: max-content; padding: 2px 10px; border-radius: 999px; font-size: .7rem; font-weight: 700; color: #04070A; background: linear-gradient(90deg, #14E0A1, #2AD6D9); }
.wl-code, .wl-gift { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.wl-code b { font-size: 1.15rem; letter-spacing: .08em; padding: 8px 14px; border-radius: 12px; background: var(--tint-1); border: 1px dashed var(--border-2); }
.wl-code input { flex: 1; min-width: 120px; }
.wl-gift input:first-child { flex: 1; min-width: 140px; }
.wl-ref { margin-top: 10px; font-size: .86rem; color: var(--text-3); }
.wl-row b.pos { color: #14E0A1; } .wl-row b.neg { color: var(--text-3); }
.wl-sub { margin: 16px 0 6px; font-size: .9rem; color: var(--text-3); }
@media (max-width: 760px) { .wl-packs { grid-template-columns: 1fr 1fr !important; } }
html[data-theme="light"] .wl-pack strong, html[data-theme="light"] .wl-row b.pos { color: #0A8F66; }
html[data-theme="light"] .wl-first, html[data-theme="light"] .wl-badge--طلایی { color: #A65F00; }

/* ---------- راه‌یاب زنجیره: a quiet, luxurious chat ---------- */
.rq-wrap { max-width: 920px; }
.rq { position: relative; overflow: hidden; border-radius: 28px; padding: 26px; border: 1px solid transparent;
  background: linear-gradient(var(--bg-2, #070B0F), var(--bg-2, #070B0F)) padding-box,
              linear-gradient(135deg, rgba(20,224,161,.55), rgba(42,214,217,.15) 40%, rgba(124,232,255,.5)) border-box;
  box-shadow: 0 40px 120px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04); }
.rq__glow { position: absolute; inset: -40% -20% auto auto; width: 70%; height: 90%; background: radial-gradient(closest-side, rgba(42,214,217,.16), transparent); pointer-events: none; }
.rq__head { position: relative; display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.rq__head b { font-size: 1.1rem; } .rq__head small { display: block; color: var(--text-3); font-size: .84rem; margin-top: 2px; }
.rq__mark { position: relative; width: 46px; height: 30px; flex: none; }
.rq__mark i { position: absolute; top: 0; width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid #2AD6D9; }
.rq__mark i:first-child { right: 0; border-color: #14E0A1; } .rq__mark i:last-child { left: 0; border-color: #7CE8FF; }
.rq__log { scrollbar-width: thin; scrollbar-color: rgba(42,214,217,.35) transparent; position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 160px; max-height: 660px; overflow-y: auto; padding: 20px 2px; scroll-behavior: smooth; }
.rq__msg { max-width: 92%; padding: 13px 16px; border-radius: 18px; line-height: 1.95; animation: rqIn .45s cubic-bezier(.22,.9,.24,1) both; }
.rq__msg p { margin: 0 0 10px; }
.rq__msg--z { align-self: flex-start; background: rgba(255,255,255,.035); border: 1px solid var(--border); border-start-start-radius: 6px; }
.rq__msg--me { align-self: flex-end; background: linear-gradient(135deg, rgba(20,224,161,.18), rgba(42,214,217,.12)); border: 1px solid rgba(42,214,217,.35); border-start-end-radius: 6px; }
.rq__typing { display: flex; gap: 5px; }
.rq__typing i { width: 7px; height: 7px; border-radius: 50%; background: #2AD6D9; animation: rqDot 1s infinite; }
.rq__typing i:nth-child(2) { animation-delay: .15s; } .rq__typing i:nth-child(3) { animation-delay: .3s; }
.rq__chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: ring; }
.rq__chain li { position: relative; animation: rqIn .5s cubic-bezier(.22,.9,.24,1) both; }
.rq__chain li + li::before { content: ""; position: absolute; top: -12px; inset-inline-start: 28px; width: 2px; height: 14px; background: linear-gradient(var(--c), transparent); opacity: .7; }
.rq__chain a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: inherit;
  background: rgba(255,255,255,.03); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); transition: transform .25s, background .25s, border-color .25s; }
.rq__chain a:hover { transform: translateX(-4px); background: color-mix(in srgb, var(--c) 9%, transparent); border-color: var(--c); }
.rq__chain a > span:not(.zi) { flex: 1; display: grid; gap: 2px; } .rq__chain .zi { flex: none; } .rq__chain small { color: var(--text-2); font-size: .84rem; }
.rq__chain em { font-style: normal; font-size: .8rem; color: var(--c); white-space: nowrap; }
.rq__cta { display: inline-block; margin-top: 14px; padding: 10px 18px; border-radius: 999px; font-weight: 700; color: #04070A; text-decoration: none; background: linear-gradient(90deg, #14E0A1, #2AD6D9, #7CE8FF); }
.rq__chips { position: relative; display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.rq__chip { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border-2, var(--border)); background: rgba(255,255,255,.03); color: var(--text-2); font: inherit; font-size: .84rem; cursor: pointer; transition: border-color .2s, color .2s; }
.rq__chip:hover { border-color: #2AD6D9; color: var(--text); }
.rq__bar { position: relative; display: flex; gap: 10px; padding: 6px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid var(--border-2, var(--border)); }
.rq__bar:focus-within { border-color: rgba(42,214,217,.6); box-shadow: 0 0 0 4px rgba(42,214,217,.1); }
.rq__in { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--text); font: inherit; padding: 10px 12px; }
.rq__go { width: 46px; height: 46px; border-radius: 14px; border: 0; display: grid; place-items: center; cursor: pointer; background: linear-gradient(135deg, #14E0A1, #2AD6D9); }
.rq__go svg { width: 22px; height: 22px; fill: none; stroke: #04070A; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes rqIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes rqDot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@media (max-width: 560px) { .rq { padding: 16px; border-radius: 22px; } .rq__chain em { display: none; } .rq__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .rq__chip { flex: none; } .rq__log { max-height: 460px; } }
@media (prefers-reduced-motion: reduce) { .rq__msg, .rq__chain li { animation: none; } }
html[data-theme="light"] .rq { background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(135deg, rgba(10,143,102,.45), rgba(14,143,147,.15) 40%, rgba(14,143,147,.4)) border-box; box-shadow: 0 30px 80px rgba(4,7,10,.08); }
html[data-theme="light"] .rq__msg--z, html[data-theme="light"] .rq__chain a, html[data-theme="light"] .rq__chip, html[data-theme="light"] .rq__bar { background: rgba(4,7,10,.03); }

.rq-door { display: flex; align-items: center; gap: 14px; margin-top: 16px; text-decoration: none; color: inherit; }
.rq-door small { display: block; color: var(--text-3); font-size: .84rem; margin-top: 2px; }
/* Android app: a newer version is on the site */
.zj-update { position: fixed; z-index: 96; inset-inline: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px;
  background: var(--surface, #0D1117); border: 1px solid rgba(42, 214, 217, .5); box-shadow: 0 16px 40px rgba(0,0,0,.4); animation: viewin .35s var(--ease, ease); }
.zj-update span { flex: 1; display: grid; gap: 2px; } .zj-update small { color: var(--text-3); font-size: .78rem; }
.zj-x { width: 32px; height: 32px; border: 0; border-radius: 10px; background: var(--tint-1); color: var(--text-2); font-size: 1.1rem; cursor: pointer; }
.wl-buy { margin-top: 16px; width: 100%; justify-content: center; }
#wPacks { scroll-margin-top: 80px; }

/* ---------- «حلقه‌ها»: themed rings ---------- */
.rg-ring { position: relative; width: 30px; height: 20px; flex: none; }
.rg-ring i { position: absolute; top: 2px; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--a); }
.rg-ring i:first-child { left: 0; } .rg-ring i:last-child { left: 11px; opacity: .65; }
.rg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.rg-card { display: grid; gap: 10px; padding: 18px; border-radius: 22px; border: 1px solid var(--border-2, rgba(255,255,255,.08)); background: linear-gradient(160deg, color-mix(in srgb, var(--a) 12%, transparent), transparent 60%), var(--glass, rgba(255,255,255,.03)); color: inherit; text-decoration: none; transition: transform .2s, border-color .2s; }
.rg-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--a) 55%, transparent); }
.rg-card__h { display: flex; align-items: center; gap: 10px; } .rg-card__h b { font-size: 1.05rem; } .rg-card__h em { margin-inline-start: auto; font-style: normal; font-size: .75rem; color: var(--text-3, #8aa); }
.rg-card p { margin: 0; color: var(--text-2, #b9c); font-size: .88rem; line-height: 1.8; }
.rg-peek { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--a) 30%, transparent); font-size: .85rem; }
.rg-peek small { color: var(--text-3, #8aa); } .rg-peek span { font-weight: 700; text-align: left; }
.rg-all { text-align: center; margin: 22px 0 6px; }
.rg-sum { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.rg-stat { display: grid; gap: 4px; padding: 16px; border-radius: 18px; color: inherit; text-decoration: none; border: 1px solid color-mix(in srgb, var(--a) 30%, transparent); background: color-mix(in srgb, var(--a) 8%, transparent); }
.rg-stat small { color: var(--text-3, #8aa); font-size: .76rem; } .rg-stat b { font-size: 1.05rem; } .rg-stat span { color: var(--text-2, #b9c); font-size: .8rem; }
.rg-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.rg-app { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; border: 1px solid var(--border-2, rgba(255,255,255,.08)); background: var(--glass, rgba(255,255,255,.03)); color: inherit; text-decoration: none; }
.rg-app:hover { border-color: var(--accent, #2AD6D9); } .rg-app b { display: block; } .rg-app p { margin: 2px 0 0; font-size: .8rem; color: var(--text-3, #8aa); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rg-strip { margin: 4px 0 18px; } .rg-strip__h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .rg-strip__h a { font-size: .82rem; color: var(--accent, #2AD6D9); }
.rg-strip__row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; } .rg-strip__row::-webkit-scrollbar { display: none; }
.rg-chip { flex: none; display: grid; gap: 4px; min-width: 132px; max-width: 170px; padding: 12px 14px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--a) 35%, transparent); background: color-mix(in srgb, var(--a) 9%, transparent); color: inherit; text-decoration: none; }
.rg-chip b { font-size: .9rem; } .rg-chip small { font-size: .74rem; color: var(--text-2, #b9c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }