/*
 * nzc-components — the component kit of the public website.
 * Everything reads theme tokens (--nzc-*), uses logical properties (RTL first) and springs from nzc-base.
 * Class names deliberately avoid "ad"/"banner" so content blockers never hide them.
 */

/* ------------------------------------------------------------------ surfaces */
.nzc-panel {
    background: var(--nzc-surface); border: var(--nzc-bw) solid var(--nzc-line); border-radius: var(--nzc-r-l);
    box-shadow: var(--nzc-shadow-1); backdrop-filter: blur(var(--nzc-blur)); -webkit-backdrop-filter: blur(var(--nzc-blur));
}

/* ------------------------------------------------------------------ icons */
.nzc-i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.nzc-i--fill { fill: currentColor; stroke: none; }

/* ------------------------------------------------------------------ buttons */
.nzc-btn {
    --_bg: var(--nzc-surface-2); --_fg: var(--nzc-text);
    position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    min-height: 2.75rem; padding-inline: 1.3rem; border: var(--nzc-bw) solid transparent; border-radius: var(--nzc-r-m);
    background: var(--_bg); color: var(--_fg); font-family: var(--nzc-font-display); font-weight: 800; font-size: .95rem; line-height: 1;
    transition: transform var(--nzc-dur-snappy) var(--nzc-ease-snappy), box-shadow .3s, background-color .25s, border-color .25s, color .25s;
    will-change: transform;
}
.nzc-btn:hover { transform: translateY(-2px); }
.nzc-btn:active { transform: translateY(0) scale(.965); transition-duration: 110ms; }
.nzc-btn .nzc-i { transition: transform var(--nzc-dur-bouncy) var(--nzc-ease-bouncy); }
.nzc-btn:hover .nzc-i--nudge { transform: translateX(-4px); }
.nzc-btn--primary { --_bg: var(--nzc-primary); --_fg: var(--nzc-primary-ink); box-shadow: 0 12px 26px -12px rgba(var(--nzc-glow), .85); }
.nzc-btn--primary::after {
    content: ''; position: absolute; inset: 0; z-index: -1; transform: translateX(120%);
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transition: transform .8s var(--nzc-ease-out);
}
.nzc-btn--primary:hover::after { transform: translateX(-120%); }
.nzc-btn--outline { --_bg: transparent; border-color: var(--nzc-line); }
.nzc-btn--outline:hover { border-color: var(--nzc-primary); color: var(--nzc-primary); }
.nzc-btn--ghost { --_bg: transparent; }
.nzc-btn--ghost:hover { background: var(--nzc-surface-2); }
.nzc-btn--lg { min-height: 3.25rem; padding-inline: 1.7rem; font-size: 1.02rem; border-radius: calc(var(--nzc-r-m) + 2px); }
.nzc-btn--icon { width: 2.75rem; padding: 0; }
[data-nzc-theme="bazar"] .nzc-btn--primary { box-shadow: 3px 3px 0 var(--nzc-text); border-color: var(--nzc-text); }
[data-nzc-theme="bazar"] .nzc-btn--primary:hover { box-shadow: 5px 5px 0 var(--nzc-text); }
[data-nzc-theme="bazar"] .nzc-btn--primary:active { box-shadow: 1px 1px 0 var(--nzc-text); }
[data-nzc-theme="bazar"] .nzc-btn--outline { border-color: var(--nzc-text); }
.nzc-btn[disabled] { opacity: .5; pointer-events: none; }

/* ------------------------------------------------------------------ header */
.nzc-header {
    position: sticky; top: 0; z-index: 40; background: var(--nzc-header); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-bottom: var(--nzc-bw) solid var(--nzc-line);
}
.nzc-header__row { display: flex; align-items: center; gap: 1rem; min-height: 4.2rem; }
.nzc-brand { display: inline-flex; align-items: center; gap: .65rem; font-family: var(--nzc-font-display); font-weight: 900; font-size: 1.35rem; }
.nzc-brand__mark { width: 2.4rem; height: 2.4rem; border-radius: 30%; display: grid; place-items: center; background: var(--nzc-primary); color: var(--nzc-primary-ink); transition: transform var(--nzc-dur-bouncy) var(--nzc-ease-bouncy); }
.nzc-brand:hover .nzc-brand__mark { transform: rotate(-8deg) scale(1.08); }
.nzc-header__spacer { flex: 1; }

/* ------------------------------------------------------------------ search */
.nzc-search {
    display: grid; grid-template-columns: 1fr 1fr 1.7fr auto; align-items: stretch; padding: .4rem;
    background: var(--nzc-surface); border: var(--nzc-bw) solid var(--nzc-line); border-radius: calc(var(--nzc-r-l) + 6px);
    box-shadow: var(--nzc-shadow-2); backdrop-filter: blur(var(--nzc-blur)); -webkit-backdrop-filter: blur(var(--nzc-blur));
    transition: box-shadow .35s, border-color .35s;
}
.nzc-search:focus-within { border-color: rgba(var(--nzc-glow), .7); box-shadow: 0 0 0 4px rgba(var(--nzc-glow), .16), var(--nzc-shadow-2); }
.nzc-search__field { display: flex; align-items: center; gap: .65rem; min-width: 0; padding: .35rem 1rem; border-radius: var(--nzc-r-m); transition: background-color .25s; }
.nzc-search__field + .nzc-search__field { border-inline-start: 1px solid var(--nzc-line); border-start-start-radius: 0; border-end-start-radius: 0; }
.nzc-search__field:hover, .nzc-search__field:focus-within { background: var(--nzc-surface-2); }
.nzc-search__field .nzc-i { color: var(--nzc-text-2); transition: color .25s, transform var(--nzc-dur-bouncy) var(--nzc-ease-bouncy); }
.nzc-search__field:focus-within .nzc-i { color: var(--nzc-primary); transform: scale(1.15); }
.nzc-search__field label { display: block; font-size: .72rem; color: var(--nzc-text-2); line-height: 1.3; }
.nzc-search__field input, .nzc-search__field select { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-weight: 600; padding: 0; line-height: 1.5; }
.nzc-search__field input::placeholder { color: var(--nzc-text-2); font-weight: 400; }
.nzc-search__field select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.nzc-search .nzc-btn { min-height: 3.1rem; }
@media (max-width: 860px) {
    .nzc-search { grid-template-columns: 1fr; border-radius: var(--nzc-r-l); }
    .nzc-search__field + .nzc-search__field { border-inline-start: 0; border-top: 1px solid var(--nzc-line); border-radius: var(--nzc-r-m); }
}

/* ------------------------------------------------------------------ category tiles */
.nzc-cat {
    --_c: var(--nzc-primary); position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; padding: 1.1rem 1.1rem 1rem;
    background: var(--nzc-surface); border: var(--nzc-bw) solid var(--nzc-line); border-radius: var(--nzc-r-l); box-shadow: var(--nzc-shadow-1); overflow: hidden;
    transition: transform var(--nzc-dur-snappy) var(--nzc-ease-snappy), border-color .3s, box-shadow .35s;
}
.nzc-cat::before { content: ''; position: absolute; inset-inline-end: -30%; top: -40%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--_c) 28%, transparent), transparent); opacity: 0; transition: opacity .5s; }
.nzc-cat:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--_c) 55%, var(--nzc-line)); box-shadow: var(--nzc-shadow-2); }
.nzc-cat:hover::before { opacity: 1; }
.nzc-cat__icon { display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 32%; color: var(--_c); background: color-mix(in srgb, var(--_c) 15%, transparent); transition: transform var(--nzc-dur-bouncy) var(--nzc-ease-bouncy), background-color .3s; }
.nzc-cat__icon .nzc-i { width: 1.55rem; height: 1.55rem; }
.nzc-cat:hover .nzc-cat__icon { transform: translateY(-3px) rotate(-7deg) scale(1.1); background: color-mix(in srgb, var(--_c) 24%, transparent); }
.nzc-cat__name { font-family: var(--nzc-font-display); font-weight: 800; }
.nzc-cat__count { font-size: .8rem; color: var(--nzc-text-2); }
.nzc-cat__go { position: absolute; inset-inline-end: 1rem; bottom: 1rem; opacity: 0; transform: translateX(8px); color: var(--_c); transition: opacity .3s, transform var(--nzc-dur-snappy) var(--nzc-ease-snappy); }
.nzc-cat:hover .nzc-cat__go { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ listing card */
.nzc-listing {
    position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--nzc-surface); border: var(--nzc-bw) solid var(--nzc-line);
    border-radius: var(--nzc-r-l); box-shadow: var(--nzc-shadow-1); transition: transform var(--nzc-dur-snappy) var(--nzc-ease-snappy), box-shadow .35s, border-color .3s;
    backdrop-filter: blur(var(--nzc-blur)); -webkit-backdrop-filter: blur(var(--nzc-blur));
}
.nzc-listing:hover { transform: translateY(-5px); box-shadow: var(--nzc-shadow-2); border-color: rgba(var(--nzc-glow), .45); }
.nzc-listing__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--nzc-surface-2); }
.nzc-art { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .9s var(--nzc-ease-out); }
.nzc-listing:hover .nzc-art { transform: scale(1.06); }
.nzc-listing__badges { position: absolute; inset-inline-start: .65rem; top: .65rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.nzc-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; line-height: 1.6; color: #fff; background: rgba(20, 16, 26, .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.nzc-badge .nzc-i { width: .95em; height: .95em; }
.nzc-badge--featured { background: var(--nzc-primary); color: var(--nzc-primary-ink); }
.nzc-badge--verified { background: color-mix(in srgb, var(--nzc-success) 88%, #000); }
.nzc-badge--sold { background: rgba(20, 16, 26, .82); }
.nzc-fav {
    position: absolute; inset-inline-end: .65rem; top: .65rem; width: 2.3rem; height: 2.3rem; border: 0; border-radius: 50%; display: grid; place-items: center;
    color: #fff; background: rgba(20, 16, 26, .5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform var(--nzc-dur-bouncy) var(--nzc-ease-bouncy), background-color .25s, color .25s;
}
.nzc-fav:hover { transform: scale(1.12); }
.nzc-fav .nzc-i { transition: transform var(--nzc-dur-bouncy) var(--nzc-ease-bouncy); }
.nzc-fav.is-on { color: #ff5d73; background: rgba(255, 255, 255, .92); }
.nzc-fav.is-on .nzc-i { fill: currentColor; animation: nzc-pop .7s var(--nzc-ease-bouncy); }
.nzc-fav::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #ff5d73; opacity: 0; transform: scale(.6); pointer-events: none; }
.nzc-fav.is-on::after { animation: nzc-ring .6s var(--nzc-ease-out); }
@keyframes nzc-pop { 0% { transform: scale(.5); } 45% { transform: scale(1.4); } 100% { transform: scale(1); } }
@keyframes nzc-ring { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.9); } }
.nzc-listing__body { display: flex; flex-direction: column; gap: .5rem; padding: .95rem 1rem 1rem; flex: 1; }
.nzc-listing__title { font-family: var(--nzc-font-display); font-weight: 800; font-size: 1rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nzc-listing__meta { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .8rem; color: var(--nzc-text-2); }
.nzc-listing__meta span { display: inline-flex; align-items: center; gap: .3rem; }
.nzc-listing__meta .nzc-i { width: 1em; height: 1em; }
.nzc-listing__price { margin-top: auto; padding-top: .35rem; display: flex; align-items: baseline; gap: .35rem; font-family: var(--nzc-font-display); font-weight: 900; font-size: 1.12rem; color: var(--nzc-primary); }
.nzc-listing__price small { font-size: .74rem; font-weight: 700; color: var(--nzc-text-2); }
[data-nzc-theme="bazar"] .nzc-listing:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--nzc-text); border-color: var(--nzc-text); }
.nzc-listing--row { flex-direction: row; }
.nzc-listing--row .nzc-listing__media { width: min(38%, 260px); aspect-ratio: auto; min-height: 9.5rem; flex: none; }
@media (max-width: 560px) { .nzc-listing--row { flex-direction: column; } .nzc-listing--row .nzc-listing__media { width: 100%; aspect-ratio: 16 / 10; } }

/* ------------------------------------------------------------------ chips, switch, check, range */
.nzc-chip {
    display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .95rem; border: var(--nzc-bw) solid var(--nzc-line); border-radius: 999px; background: var(--nzc-surface);
    font-size: .88rem; font-weight: 600; transition: transform var(--nzc-dur-snappy) var(--nzc-ease-snappy), background-color .25s, border-color .25s, color .25s;
}
.nzc-chip:hover { transform: translateY(-2px); border-color: rgba(var(--nzc-glow), .6); }
.nzc-chip:active { transform: scale(.95); }
.nzc-chip .nzc-i { width: 0; opacity: 0; transition: width .3s var(--nzc-ease-out), opacity .3s; }
.nzc-chip[aria-pressed="true"] { background: var(--nzc-primary); color: var(--nzc-primary-ink); border-color: transparent; }
.nzc-chip[aria-pressed="true"] .nzc-i { width: 1em; opacity: 1; }

.nzc-switch { position: relative; display: inline-flex; align-items: center; gap: .7rem; cursor: pointer; user-select: none; }
.nzc-switch input { position: absolute; opacity: 0; inset: 0; }
.nzc-switch__track { position: relative; width: 2.9rem; height: 1.65rem; border-radius: 999px; background: var(--nzc-surface-2); border: var(--nzc-bw) solid var(--nzc-line); transition: background-color .3s, border-color .3s; flex: none; }
.nzc-switch__track::after {
    content: ''; position: absolute; top: 50%; inset-inline-start: .18rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--nzc-text-2); transform: translateY(-50%);
    transition: inset-inline-start var(--nzc-dur-bouncy) var(--nzc-ease-bouncy), background-color .3s, width .25s;
}
.nzc-switch:active .nzc-switch__track::after { width: 1.5rem; }
.nzc-switch input:checked + .nzc-switch__track { background: var(--nzc-primary); border-color: transparent; }
.nzc-switch input:checked + .nzc-switch__track::after { inset-inline-start: calc(100% - 1.33rem); background: var(--nzc-primary-ink); }
.nzc-switch input:checked:active + .nzc-switch__track::after { inset-inline-start: calc(100% - 1.68rem); }
.nzc-switch input:focus-visible + .nzc-switch__track { outline: 2px solid var(--nzc-primary); outline-offset: 3px; }

.nzc-check { display: inline-flex; align-items: center; gap: .65rem; cursor: pointer; user-select: none; }
.nzc-check input { position: absolute; opacity: 0; }
.nzc-check__box { width: 1.35rem; height: 1.35rem; border-radius: 7px; border: 1.5px solid var(--nzc-text-2); display: grid; place-items: center; color: var(--nzc-primary-ink); transition: background-color .25s, border-color .25s, transform var(--nzc-dur-bouncy) var(--nzc-ease-bouncy); flex: none; }
.nzc-check__box svg { width: .85rem; height: .85rem; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .35s var(--nzc-ease-out) .05s; }
.nzc-check:active .nzc-check__box { transform: scale(.88); }
.nzc-check input:checked + .nzc-check__box { background: var(--nzc-primary); border-color: transparent; }
.nzc-check input:checked + .nzc-check__box svg { stroke-dashoffset: 0; }
.nzc-check input:focus-visible + .nzc-check__box { outline: 2px solid var(--nzc-primary); outline-offset: 3px; }
.nzc-check--radio .nzc-check__box { border-radius: 50%; }
.nzc-check--radio .nzc-check__box::after { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--nzc-primary-ink); transform: scale(0); transition: transform var(--nzc-dur-bouncy) var(--nzc-ease-bouncy); }
.nzc-check--radio input:checked + .nzc-check__box::after { transform: scale(1); }
.nzc-check--radio .nzc-check__box svg { display: none; }

.nzc-range { --_a: 0%; --_b: 100%; position: relative; height: 2.2rem; direction: ltr; }
.nzc-range__track { position: absolute; inset-inline: 0; top: 50%; height: 6px; border-radius: 6px; background: var(--nzc-surface-2); transform: translateY(-50%); }
.nzc-range__fill { position: absolute; top: 50%; height: 6px; border-radius: 6px; background: var(--nzc-primary); transform: translateY(-50%); inset-inline-start: var(--_a); inset-inline-end: calc(100% - var(--_b)); }
.nzc-range input { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; appearance: none; -webkit-appearance: none; }
.nzc-range input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; pointer-events: auto; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--nzc-surface); border: 3px solid var(--nzc-primary); box-shadow: 0 4px 12px rgba(0, 0, 0, .3); cursor: grab; transition: transform var(--nzc-dur-bouncy) var(--nzc-ease-bouncy); }
.nzc-range input::-webkit-slider-thumb:hover { transform: scale(1.15); }
.nzc-range input:active::-webkit-slider-thumb { transform: scale(1.3); cursor: grabbing; }
.nzc-range input::-moz-range-thumb { pointer-events: auto; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--nzc-surface); border: 3px solid var(--nzc-primary); cursor: grab; }
.nzc-range input::-moz-range-track { background: transparent; }

/* ------------------------------------------------------------------ tabs / segmented */
.nzc-tabs { position: relative; display: inline-flex; gap: .15rem; padding: .3rem; border-radius: calc(var(--nzc-r-m) + 2px); background: var(--nzc-surface-2); border: var(--nzc-bw) solid var(--nzc-line); }
.nzc-tabs__thumb { position: absolute; top: .3rem; bottom: .3rem; left: 0; width: 0; border-radius: var(--nzc-r-m); background: var(--nzc-primary); box-shadow: 0 8px 18px -8px rgba(var(--nzc-glow), .8); transition: transform var(--nzc-dur-snappy) var(--nzc-ease-snappy), width var(--nzc-dur-snappy) var(--nzc-ease-snappy); }
.nzc-tabs__tab { position: relative; z-index: 1; border: 0; background: transparent; padding: .5rem 1.15rem; border-radius: var(--nzc-r-m); font-weight: 700; font-size: .92rem; color: var(--nzc-text-2); transition: color .25s; }
.nzc-tabs__tab:hover { color: var(--nzc-text); }
.nzc-tabs__tab[aria-selected="true"] { color: var(--nzc-primary-ink); }
.nzc-tabs.is-ready .nzc-tabs__thumb { opacity: 1; }

/* ------------------------------------------------------------------ OTP */
.nzc-otp { display: flex; gap: .6rem; direction: ltr; justify-content: center; }
.nzc-otp input {
    width: 3.05rem; height: 3.7rem; text-align: center; font-family: var(--nzc-font-display); font-weight: 900; font-size: 1.6rem; caret-color: var(--nzc-primary);
    background: var(--nzc-surface); border: var(--nzc-bw) solid var(--nzc-line); border-radius: var(--nzc-r-m); outline: 0;
    transition: transform var(--nzc-dur-bouncy) var(--nzc-ease-bouncy), border-color .25s, box-shadow .3s, background-color .25s;
}
.nzc-otp input:focus { border-color: var(--nzc-primary); box-shadow: 0 0 0 4px rgba(var(--nzc-glow), .18); transform: translateY(-3px) scale(1.05); }
.nzc-otp input.is-filled { border-color: rgba(var(--nzc-glow), .65); background: var(--nzc-surface-2); }
.nzc-otp.is-ok input { border-color: var(--nzc-success); color: var(--nzc-success); animation: nzc-hop .55s var(--nzc-ease-bouncy) both; animation-delay: calc(var(--i) * 60ms); }
.nzc-otp.is-bad { animation: nzc-shake .45s; }
.nzc-otp.is-bad input { border-color: var(--nzc-danger); }
@keyframes nzc-hop { 0% { transform: translateY(0); } 40% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
@keyframes nzc-shake { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@media (max-width: 420px) { .nzc-otp { gap: .4rem; } .nzc-otp input { width: 2.55rem; height: 3.2rem; font-size: 1.3rem; } }

/* ------------------------------------------------------------------ skeleton, loader, toast */
.nzc-skel { position: relative; overflow: hidden; border-radius: var(--nzc-r-s); background: var(--nzc-surface-2); }
.nzc-skel::after { content: ''; position: absolute; inset: 0; transform: translateX(100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent); animation: nzc-shimmer 1.5s infinite; }
[dir="rtl"] .nzc-skel::after { transform: translateX(-100%); animation-name: nzc-shimmer-rtl; }
@keyframes nzc-shimmer { to { transform: translateX(-100%); } }
@keyframes nzc-shimmer-rtl { to { transform: translateX(100%); } }

.nzc-loader { width: 3rem; height: 3rem; color: var(--nzc-primary); }
.nzc-loader circle { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; transform-origin: 50% 50%; }
.nzc-loader .a { stroke-dasharray: 60 200; animation: nzc-spin 1.1s linear infinite; }
.nzc-loader .b { stroke: var(--nzc-accent); stroke-dasharray: 26 200; animation: nzc-spin 1.7s linear infinite reverse; opacity: .9; }
.nzc-loader .t { stroke: var(--nzc-line); stroke-dasharray: none; }
@keyframes nzc-spin { to { transform: rotate(360deg); } }
.nzc-dots { display: inline-flex; gap: .28rem; align-items: center; }
.nzc-dots i { width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; animation: nzc-dot 1.2s infinite ease-in-out both; }
.nzc-dots i:nth-child(2) { animation-delay: .15s; } .nzc-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes nzc-dot { 0%, 80%, 100% { transform: scale(.55); opacity: .4; } 40% { transform: scale(1.15); opacity: 1; } }

.nzc-toasts { position: fixed; inset-inline: 0; bottom: 1.25rem; z-index: 90; display: flex; flex-direction: column; align-items: center; gap: .6rem; pointer-events: none; }
.nzc-toast {
    pointer-events: auto; display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem; min-width: 15rem; max-width: min(92vw, 26rem);
    background: var(--nzc-text); color: var(--nzc-bg); border-radius: var(--nzc-r-m); box-shadow: var(--nzc-shadow-2); font-weight: 600; font-size: .92rem;
    animation: nzc-toast-in var(--nzc-dur-bouncy) var(--nzc-ease-bouncy) both;
}
.nzc-toast.is-out { animation: nzc-toast-out .35s var(--nzc-ease-out) both; }
.nzc-toast .nzc-i { color: var(--nzc-success); }
@keyframes nzc-toast-in { from { opacity: 0; transform: translateY(26px) scale(.9); } }
@keyframes nzc-toast-out { to { opacity: 0; transform: translateY(14px) scale(.96); } }

/* ------------------------------------------------------------------ stats */
.nzc-stat { position: relative; padding: 1.15rem 1.2rem 3.6rem; overflow: hidden; }
.nzc-stat__label { font-size: .82rem; color: var(--nzc-text-2); }
.nzc-stat__value { font-family: var(--nzc-font-display); font-weight: 900; font-size: 2.1rem; line-height: 1.3; }
.nzc-stat__delta { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; font-weight: 700; color: var(--nzc-success); }
.nzc-stat svg.nzc-spark { position: absolute; inset-inline: 0; bottom: 0; height: 34%; width: 100%; color: var(--nzc-primary); opacity: .9; }
.nzc-spark path.l { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.nzc-spark path.f { fill: url(#nzc-spark-grad); }

/* ------------------------------------------------------------------ ad-status stepper */
.nzc-steps { --p: 0; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; padding-top: .25rem; }
.nzc-steps::before, .nzc-steps::after { content: ''; position: absolute; top: 1.35rem; height: 3px; border-radius: 3px; inset-inline: 12.5%; background: var(--nzc-surface-2); }
.nzc-steps::after { inset-inline-end: calc(12.5% + (100% - 25%) * (1 - var(--p) / 3)); background: linear-gradient(90deg, var(--nzc-primary), var(--nzc-primary-2)); transition: inset-inline-end 1s var(--nzc-ease-soft); }
.nzc-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .55rem; text-align: center; font-size: .82rem; color: var(--nzc-text-2); }
.nzc-step__dot { width: 2.7rem; height: 2.7rem; border-radius: 50%; display: grid; place-items: center; background: var(--nzc-surface); border: 2px solid var(--nzc-line); color: var(--nzc-text-2); transition: all .5s var(--nzc-ease-bouncy); }
.nzc-step.is-done .nzc-step__dot { background: var(--nzc-primary); border-color: transparent; color: var(--nzc-primary-ink); }
.nzc-step.is-now .nzc-step__dot { border-color: var(--nzc-primary); color: var(--nzc-primary); box-shadow: 0 0 0 6px rgba(var(--nzc-glow), .16); animation: nzc-breathe 2s infinite; }
.nzc-step.is-done, .nzc-step.is-now { color: var(--nzc-text); font-weight: 700; }
@keyframes nzc-breathe { 50% { box-shadow: 0 0 0 11px rgba(var(--nzc-glow), 0); } }

/* ------------------------------------------------------------------ AI card */
.nzc-ai { position: relative; padding: 1.25rem; border-radius: var(--nzc-r-l); background: var(--nzc-surface); isolation: isolate; }
.nzc-ai::before {
    content: ''; position: absolute; inset: -1.5px; z-index: -1; border-radius: inherit; padding: 1.5px; opacity: .85;
    background: conic-gradient(from var(--_ang, 0deg), var(--nzc-primary), var(--nzc-accent), var(--nzc-primary-2), var(--nzc-primary));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    animation: nzc-orbit 6s linear infinite;
}
@property --_ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes nzc-orbit { to { --_ang: 360deg; } }
.nzc-ai__head { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--nzc-primary); margin-bottom: .8rem; }
.nzc-ai__text { min-height: 6.6rem; line-height: 2.05; }
.nzc-ai__text .w { opacity: 0; filter: blur(5px); display: inline-block; animation: nzc-word .55s var(--nzc-ease-out) forwards; }
@keyframes nzc-word { to { opacity: 1; filter: none; } }
.nzc-ai__actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }

/* ------------------------------------------------------------------ mascot stage */
.nzc-mascot { position: relative; display: grid; place-items: center; min-height: 20rem; overflow: hidden; }
.nzc-mascot__figure { position: relative; width: min(15rem, 62vw); aspect-ratio: 1; transition: transform .12s linear; will-change: transform; }
.nzc-mascot__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(.94); transition: opacity .35s, transform var(--nzc-dur-bouncy) var(--nzc-ease-bouncy); filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .28)); }
.nzc-mascot__figure img.is-on { opacity: 1; transform: none; }
.nzc-mascot__bob { animation: nzc-bob 4.2s ease-in-out infinite; }
@keyframes nzc-bob { 50% { transform: translateY(-9px); } }
.nzc-mascot__bubble { position: absolute; inset-inline-start: 50%; top: 1.4rem; translate: -50% 0; padding: .45rem .95rem; border-radius: 999px; background: var(--nzc-surface-2); border: var(--nzc-bw) solid var(--nzc-line); font-size: .9rem; font-weight: 700; white-space: nowrap; }
.nzc-mascot__ph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--nzc-text-2); text-align: center; font-size: .85rem; }

/* ------------------------------------------------------------------ map */
.nzc-map { position: relative; height: 26rem; border-radius: var(--nzc-r-l); overflow: hidden; border: var(--nzc-bw) solid var(--nzc-line); box-shadow: var(--nzc-shadow-1); background: var(--nzc-surface-2); }
.nzc-map__canvas, .nzc-map .nzc-map__canvas.maplibregl-map { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-nzc-mode="dark"] .nzc-map .maplibregl-canvas { filter: invert(.92) hue-rotate(180deg) saturate(.7) brightness(.92) contrast(.95); }
.nzc-pin {
    display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .7rem; border: 0; border-radius: 999px; background: var(--nzc-solid); color: var(--nzc-text);
    font-family: var(--nzc-font-display); font-weight: 900; font-size: .8rem; white-space: nowrap; box-shadow: 0 6px 18px -4px rgba(0, 0, 0, .45), 0 0 0 1.5px var(--nzc-line);
    transition: transform var(--nzc-dur-bouncy) var(--nzc-ease-bouncy), background-color .25s, color .25s; position: relative;
}
.nzc-pin::after { content: ''; position: absolute; inset-inline-start: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; z-index: -1; }
.nzc-pin:hover, .nzc-pin.is-on { transform: translateY(-3px) scale(1.12); background: var(--nzc-primary); color: var(--nzc-primary-ink); z-index: 5; }
.nzc-pop { width: 15.5rem; overflow: hidden; border-radius: var(--nzc-r-m); background: var(--nzc-solid); color: var(--nzc-text); box-shadow: var(--nzc-shadow-2); }
.nzc-pop .nzc-listing__media { aspect-ratio: 16 / 9; }
.nzc-pop .nzc-listing__body { padding: .7rem .85rem .8rem; gap: .25rem; }
.maplibregl-popup-content { padding: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: var(--nzc-r-m) !important; }
.maplibregl-popup-tip { display: none; }
.maplibregl-ctrl-group { border-radius: var(--nzc-r-m) !important; overflow: hidden; background: var(--nzc-solid) !important; border: var(--nzc-bw) solid var(--nzc-line); box-shadow: var(--nzc-shadow-1) !important; }
.maplibregl-ctrl-group button { background: transparent !important; }
[data-nzc-mode="dark"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }
.maplibregl-ctrl-attrib { font-size: .68rem; opacity: .75; }
.nzc-map__chip { position: absolute; inset-inline-start: .8rem; top: .8rem; z-index: 3; }
.nzc-map__msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--nzc-text-2); padding: 1.5rem; z-index: 2; }

/* MapLibre ships its own font stack; keep the brand faces inside the map too */
.maplibregl-map, .maplibregl-popup, .maplibregl-ctrl, .maplibregl-ctrl-attrib { font-family: var(--nzc-font-body) !important; }