/* /../tagSpace.Shared/Platforms/Blazor/Screens/BetaGateScreen.razor.rz.scp.css */
/* ── Beta gate: same ground as the first-run device check ────────────────────────────────── */

.bg-overlay[b-2mdfjttsnp] {
    position: fixed;
    inset: 0;
    z-index: 50; /* above #splashScreen (10), as the device check */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: #fff;
    font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, Helvetica, sans-serif;
    background:
        radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.4px) 0 0 / 22px 22px,
        radial-gradient(120% 70% at 50% 18%, #0f4744 0%, #0c2427 45%, #0b0d0f 100%);
}

.bg-content[b-2mdfjttsnp] {
    width: 100%;
    max-width: 380px;
    text-align: center;
}

.bg-logo[b-2mdfjttsnp] {
    display: block;
    /* The picture is a 512px square with generous padding round the mark, so it is drawn larger than
       the mark appears and pulled back in with negative margins. */
    width: 240px;
    height: auto;
    margin: -48px auto -4px;
}

.bg-heading[b-2mdfjttsnp] {
    margin: 0 0 12px;
    font-size: 28px;
    font-weight: 700;
}

.bg-body[b-2mdfjttsnp] {
    margin: 0 0 28px;
    font-size: 16px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
}

.bg-actions[b-2mdfjttsnp] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bg-btn[b-2mdfjttsnp] {
    border: 0;
    border-radius: 999px;
    padding: 15px 22px;
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
}

.bg-btn:disabled[b-2mdfjttsnp] { opacity: 0.6; cursor: default; }

.bg-btn-primary[b-2mdfjttsnp] { background: #00ccbc; color: #06201e; }

.bg-btn-link[b-2mdfjttsnp] { background: transparent; color: rgba(255, 255, 255, 0.7); font-size: 15px; }
/* /../tagSpace.Shared/Platforms/Blazor/Screens/ConnectionErrorScreen.razor.rz.scp.css */
/* ── Backdrop (blocking) ────────────────────────────────────────────────── */

.ce-overlay[b-63dok9o34e] {
    position: fixed;
    inset: 0;
    z-index: 20; /* above the AR HUD and other screens */
    background: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* ── Card ───────────────────────────────────────────────────────────────── */

.ce-card[b-63dok9o34e] {
    width: 100%;
    max-width: 360px;
    background-color: #2c2e33;
    color: #fff;
    border-radius: 16px;
    padding: 32px 24px 24px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    animation: ce-pop-in-b-63dok9o34e 0.22s cubic-bezier(0.34, 1.36, 0.64, 1) both;
}

@keyframes ce-pop-in-b-63dok9o34e {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Icon ───────────────────────────────────────────────────────────────── */

.ce-icon[b-63dok9o34e] {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: #ff6b6b;
}

/* ── Text ───────────────────────────────────────────────────────────────── */

.ce-heading[b-63dok9o34e] {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

.ce-body[b-63dok9o34e] {
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
}

/* ── Retry button ───────────────────────────────────────────────────────── */

.ce-retry[b-63dok9o34e] {
    width: 100%;
    min-height: 48px;
    border: none;
    border-radius: 12px;
    background: #4f8cff;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.ce-retry:hover:not(:disabled)[b-63dok9o34e] { background: #3d7bf0; }
.ce-retry:active:not(:disabled)[b-63dok9o34e] { background: #356fd8; }
.ce-retry:disabled[b-63dok9o34e] { opacity: 0.7; cursor: default; }

/* ── Spinner ────────────────────────────────────────────────────────────── */

.ce-spinner[b-63dok9o34e] {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ce-spin-b-63dok9o34e 0.7s linear infinite;
}

@keyframes ce-spin-b-63dok9o34e {
    to { transform: rotate(360deg); }
}
/* /../tagSpace.Shared/Platforms/Blazor/Screens/DeviceCheckScreen.razor.rz.scp.css */
/* ── First-run device check — "Calibrating your reality" ────────────────────────────────── */

.dc-overlay[b-v0tefc2mfb] {
    --dc-teal: #00ccbc;
    --dc-teal-soft: rgba(0, 204, 188, 0.18);
    --dc-coral: #ff6b6b;
    --dc-text: #ffffff;
    --dc-muted: rgba(255, 255, 255, 0.66);
    --dc-accent: var(--dc-teal);
    /* Everything below is sized off the viewport height so the whole screen fits without
       scrolling (users don't discover a scroll here) — from ~550px-tall phones up to the full
       design size.  dvh excludes the browser's own bars; vh is the fallback. */
    --vh: 1vh;

    position: fixed;
    inset: 0;
    z-index: 50; /* above #splashScreen (10); slam.js gates only appear after boot continues */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    color: var(--dc-text);
    font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, Helvetica, sans-serif;
    background:
        radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.4px) 0 0 / 22px 22px,
        radial-gradient(120% 70% at 50% 18%, #0f4744 0%, #0c2427 45%, #0b0d0f 100%);
    animation: dc-fade-in-b-v0tefc2mfb 0.45s ease both;
}

@supports (height: 1dvh) {
    .dc-overlay[b-v0tefc2mfb] { --vh: 1dvh; }
}

.dc-overlay.dc-phase-rejected:not(.dc-rejected-fixable)[b-v0tefc2mfb] {
    --dc-accent: var(--dc-coral);
    background:
        radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.4px) 0 0 / 22px 22px,
        radial-gradient(120% 70% at 50% 18%, #3a1f24 0%, #1d1416 45%, #0b0d0f 100%);
}

.dc-overlay.dc-rejected-desktop[b-v0tefc2mfb] { --dc-accent: var(--dc-teal); }

.dc-sim-badge[b-v0tefc2mfb] {
    position: fixed;
    top: calc(10px + var(--ts-safe-top));
    right: 10px;
    z-index: 1;
    padding: 4px 8px;
    border-radius: 6px;
    background: #f5a623;
    color: #0b0d0f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    pointer-events: none;
}

.dc-content[b-v0tefc2mfb] {
    box-sizing: border-box;
    min-height: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: calc(clamp(10px, calc(3 * var(--vh)), 28px) + var(--ts-safe-top)) 24px
             calc(clamp(10px, calc(2.5 * var(--vh)), 24px) + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* ── Orb ───────────────────────────────────────────────────────────────────────────────── */

.dc-orb[b-v0tefc2mfb] {
    position: relative;
    --orb: clamp(72px, calc(18 * var(--vh)), 184px);
    flex: none;
    width: var(--orb);
    height: var(--orb);
    margin: clamp(0px, calc(1 * var(--vh)), 8px) 0 clamp(8px, calc(2.2 * var(--vh)), 22px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-ring[b-v0tefc2mfb] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--dc-accent);
    opacity: 0;
    animation: dc-sonar-b-v0tefc2mfb 3s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
.dc-ring:nth-child(2)[b-v0tefc2mfb] { animation-delay: 1s; }
.dc-ring:nth-child(3)[b-v0tefc2mfb] { animation-delay: 2s; }

.dc-sweep[b-v0tefc2mfb] {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(0, 204, 188, 0.0) 250deg,
                               rgba(0, 204, 188, 0.38) 355deg, transparent 360deg);
    -webkit-mask: radial-gradient(circle, transparent 38%, #000 39%);
            mask: radial-gradient(circle, transparent 38%, #000 39%);
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: dc-spin-b-v0tefc2mfb 2.2s linear infinite;
}
.dc-phase-preparing .dc-sweep[b-v0tefc2mfb],
.dc-phase-scanning .dc-sweep[b-v0tefc2mfb] { opacity: 1; }
.dc-phase-scanning .dc-sweep[b-v0tefc2mfb] { animation-duration: 1.4s; }
.dc-phase-scanning .dc-ring[b-v0tefc2mfb]  { animation-duration: 2s; }

.dc-core[b-v0tefc2mfb] {
    position: relative;
    width: calc(var(--orb) * 0.52);
    height: calc(var(--orb) * 0.52);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dc-accent);
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 0 36px var(--dc-teal-soft), inset 0 0 18px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
}

.dc-core-icon[b-v0tefc2mfb] { width: calc(var(--orb) * 0.29); height: calc(var(--orb) * 0.29); }

.dc-needle[b-v0tefc2mfb] {
    transform-origin: 24px 24px;
    transform-box: view-box;
    animation: dc-needle-settle-b-v0tefc2mfb 2.6s ease-in-out infinite;
}
.dc-phase-scanning .dc-needle[b-v0tefc2mfb] { animation: dc-needle-search-b-v0tefc2mfb 1.1s ease-in-out infinite; }

.dc-phase-passed .dc-core[b-v0tefc2mfb] {
    color: #0b0d0f;
    background: var(--dc-teal);
    box-shadow: 0 0 0 10px rgba(0, 204, 188, 0.14), 0 0 60px rgba(0, 204, 188, 0.55);
    animation: dc-pop-b-v0tefc2mfb 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.dc-phase-passed .dc-ring[b-v0tefc2mfb] { animation-duration: 4s; }

.dc-tick[b-v0tefc2mfb] {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: dc-draw-b-v0tefc2mfb 0.5s 0.15s ease-out forwards;
}

.dc-phase-rejected .dc-ring[b-v0tefc2mfb] { animation-duration: 5s; }

/* ── Text ──────────────────────────────────────────────────────────────────────────────── */

.dc-heading[b-v0tefc2mfb] {
    margin: 0 0 clamp(6px, calc(1.2 * var(--vh)), 10px);
    font-size: clamp(20px, calc(3.3 * var(--vh)), 26px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.dc-body[b-v0tefc2mfb] {
    margin: 0 0 clamp(8px, calc(2.2 * var(--vh)), 22px);
    font-size: clamp(13px, calc(1.95 * var(--vh)), 15px);
    line-height: 1.42;
    color: var(--dc-muted);
}

/* ── Check rows ────────────────────────────────────────────────────────────────────────── */

.dc-rows[b-v0tefc2mfb] {
    list-style: none;
    width: 100%;
    margin: 0 0 clamp(8px, calc(2.4 * var(--vh)), 24px);
    padding: clamp(2px, calc(0.8 * var(--vh)), 6px) 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.dc-row[b-v0tefc2mfb] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: clamp(3px, calc(1.05 * var(--vh)), 10px) 16px;
    text-align: left;
    transition: opacity 0.3s ease;
}
.dc-row-waiting[b-v0tefc2mfb] { opacity: 0.42; }

.dc-status[b-v0tefc2mfb] {
    position: relative;
    flex: none;
    width: clamp(22px, calc(3.2 * var(--vh)), 26px);
    height: clamp(22px, calc(3.2 * var(--vh)), 26px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    box-sizing: border-box;
}
.dc-status svg[b-v0tefc2mfb] { width: 70%; height: 70%; }

.dc-row-checking .dc-status[b-v0tefc2mfb] {
    border-color: rgba(0, 204, 188, 0.25);
    border-top-color: var(--dc-teal);
    animation: dc-spin-b-v0tefc2mfb 0.8s linear infinite;
}
.dc-row-pass .dc-status[b-v0tefc2mfb] {
    border-color: var(--dc-teal);
    background: var(--dc-teal);
    color: #0b0d0f;
    animation: dc-pop-b-v0tefc2mfb 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.dc-row-problem .dc-status[b-v0tefc2mfb] {
    border-color: var(--dc-coral);
    background: var(--dc-coral);
    color: #0b0d0f;
    animation: dc-pop-b-v0tefc2mfb 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.dc-row-text[b-v0tefc2mfb] { display: flex; flex-direction: column; min-width: 0; }
.dc-row-title[b-v0tefc2mfb] { font-size: clamp(13.5px, calc(1.95 * var(--vh)), 15px); font-weight: 600; line-height: 1.25; }
.dc-row-sub[b-v0tefc2mfb] { font-size: clamp(11.5px, calc(1.6 * var(--vh)), 12.5px); color: var(--dc-muted); line-height: 1.25; }

/* ── Reject content ────────────────────────────────────────────────────────────────────── */

.dc-problems[b-v0tefc2mfb] {
    list-style: none;
    width: 100%;
    margin: 0 0 18px;
    padding: 0;
    text-align: left;
}
.dc-problems li[b-v0tefc2mfb] {
    position: relative;
    margin-bottom: 10px;
    padding: 12px 14px 12px 38px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 14.5px;
    line-height: 1.45;
}
.dc-problems li[b-v0tefc2mfb]::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 18px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dc-accent);
}
.dc-rejected-fixable .dc-problems li[b-v0tefc2mfb]::before { background: #f5a623; }

.dc-steps[b-v0tefc2mfb],
.dc-footnote[b-v0tefc2mfb] {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--dc-muted);
}

.dc-cta[b-v0tefc2mfb] {
    margin: -12px 0 22px;   /* sits just under .dc-footnote */
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--dc-text);
}

.dc-qr-card[b-v0tefc2mfb] {
    margin: 0 0 22px;
    padding: 6px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 0 0 6px rgba(0, 204, 188, 0.25), 0 18px 48px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    animation: dc-pop-b-v0tefc2mfb 0.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.dc-qr[b-v0tefc2mfb] { width: 220px; height: 220px; display: block; }

/* ── Buttons ───────────────────────────────────────────────────────────────────────────── */

.dc-actions[b-v0tefc2mfb] {
    width: 100%;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dc-btn[b-v0tefc2mfb] {
    width: 100%;
    min-height: clamp(42px, calc(6.4 * var(--vh)), 52px);
    border-radius: 14px;
    border: none;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease, background 0.15s ease, opacity 0.15s ease;
}
.dc-btn:active[b-v0tefc2mfb] { transform: scale(0.98); }

.dc-btn-primary[b-v0tefc2mfb] {
    color: #0b0d0f;
    background: var(--dc-teal);
    box-shadow: 0 8px 24px rgba(0, 204, 188, 0.35);
}
.dc-btn-secondary[b-v0tefc2mfb] {
    color: var(--dc-text);
    background: rgba(255, 255, 255, 0.1);
}
.dc-btn-link[b-v0tefc2mfb] {
    min-height: 40px;
    color: var(--dc-muted);
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    text-decoration: underline;
}

.dc-btn-enter[b-v0tefc2mfb] { animation: dc-rise-b-v0tefc2mfb 0.45s 0.2s ease-out both; }

/* ── Keyframes ─────────────────────────────────────────────────────────────────────────── */

@keyframes dc-fade-in-b-v0tefc2mfb { from { opacity: 0; } to { opacity: 1; } }

@keyframes dc-sonar-b-v0tefc2mfb {
    0%   { transform: scale(0.52); opacity: 0.85; }
    100% { transform: scale(1.08); opacity: 0; }
}

@keyframes dc-spin-b-v0tefc2mfb { to { transform: rotate(360deg); } }

@keyframes dc-needle-search-b-v0tefc2mfb {
    0%   { transform: rotate(-70deg); }
    35%  { transform: rotate(55deg); }
    65%  { transform: rotate(-25deg); }
    100% { transform: rotate(-70deg); }
}

@keyframes dc-needle-settle-b-v0tefc2mfb {
    0%, 100% { transform: rotate(-8deg); }
    50%      { transform: rotate(8deg); }
}

@keyframes dc-pop-b-v0tefc2mfb {
    from { transform: scale(0.6); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

@keyframes dc-draw-b-v0tefc2mfb { to { stroke-dashoffset: 0; } }

@keyframes dc-rise-b-v0tefc2mfb {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-ring[b-v0tefc2mfb], .dc-sweep[b-v0tefc2mfb], .dc-needle[b-v0tefc2mfb] { animation: none; }
    .dc-ring:first-child[b-v0tefc2mfb] { opacity: 0.3; transform: scale(0.8); }
}

/* Very short viewports (small phones with the browser bars showing): the row subtitles are the
   first thing to go, so the whole screen still fits without scrolling. */
@media (max-height: 540px) {
    .dc-row-sub[b-v0tefc2mfb] { display: none; }
}
@media (max-height: 500px) {
    .dc-orb[b-v0tefc2mfb] { --orb: 60px; }
}
/* /../tagSpace.Shared/Platforms/Blazor/Screens/ExperienceActivationZoneScreen.razor.rz.scp.css */
/* ── Zone activation card ────────────────────────────────────────────────────── */
/* Ports Platforms/Android/Screens/ExperienceActivationZoneScreen.cs. Design language
   follows the Zone Explorer card: 16px radius, 4px teal ring, black primary plate. */

.azs-scrim[b-zmnxiczx4r] {
    position: fixed;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.55);
    font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, Helvetica, sans-serif;
    opacity: 0;                          /* first paint is invisible */
    transition: opacity 500ms ease;      /* == ExperienceActivationZoneScreen.FadeMs */
}

.azs-scrim--in[b-zmnxiczx4r] {
    opacity: 1;
}

.azs-card[b-zmnxiczx4r] {
    width: min(340px, 100%);
    /* content-box is the app default, so the 4px ring would otherwise add 8px on top
       of the 100% and overflow the scrim on a narrow screen. */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 4px solid var(--primaryfull, #00ccbc);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.azs-thumb[b-zmnxiczx4r] {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.azs-thumb--placeholder[b-zmnxiczx4r] {
    background: #e0e0e0;
}

.azs-body[b-zmnxiczx4r] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 16px 20px;
}

.azs-title[b-zmnxiczx4r] {
    font-family: "SF Pro Display", "SF Pro Display-Semibold", Helvetica;
    font-weight: 600;
    font-size: 24px;
    color: #000000;
}

.azs-desc[b-zmnxiczx4r] {
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 20.8px;
    color: #000000;
    max-height: 40vh;
    overflow-y: auto;
}

/* Portal HTML can carry links. ::deep is required: scoped CSS does not stamp its
   attribute onto MarkupString-injected markup. */
.azs-desc[b-zmnxiczx4r]  a {
    color: #3987d4;
}

.azs-ok[b-zmnxiczx4r] {
    height: 54px;
    margin-top: 4px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: #000000;
    color: #ffffff;
    font-family: "SF Pro Text-Bold", "SF Pro Text", Helvetica;
    font-weight: 700;
    font-size: 17px;
    line-height: 22px;
}

.azs-ok:active[b-zmnxiczx4r] {
    opacity: 0.7;
}
/* /../tagSpace.Shared/Platforms/Blazor/Screens/ExperienceDeveloperScreen.razor.rz.scp.css */
.dev-overlay[b-5uwt98ow0r] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #1c1c1e;
    z-index: 20;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.dev-header[b-5uwt98ow0r] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 8px 12px 4px;
    flex-shrink: 0;
}

.dev-back-btn[b-5uwt98ow0r] {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
}

.dev-back-btn svg[b-5uwt98ow0r] {
    width: 22px;
    height: 22px;
}

.dev-title[b-5uwt98ow0r] {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.dev-divider[b-5uwt98ow0r] {
    height: 1px;
    background: #3a3a3c;
    flex-shrink: 0;
}

/* ── Body ────────────────────────────────────────────────────────────────── */
.dev-body[b-5uwt98ow0r] {
    flex: 1;
    overflow-y: auto;
}

.dev-row[b-5uwt98ow0r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #2c2c2e;
}

.dev-row-label[b-5uwt98ow0r] {
    color: #fff;
    font-size: 0.95rem;
}

.dev-row-disabled .dev-row-label[b-5uwt98ow0r] {
    color: #48484a;
}

/* ── Toggle switch ───────────────────────────────────────────────────────── */
.dev-toggle[b-5uwt98ow0r] {
    position: relative;
    display: inline-block;
    width: 51px;
    height: 31px;
    flex-shrink: 0;
    cursor: pointer;
}

.dev-toggle input[b-5uwt98ow0r] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.dev-toggle-slider[b-5uwt98ow0r] {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #3a3a3c;
    border-radius: 31px;
    transition: background 0.2s;
}

.dev-toggle-slider[b-5uwt98ow0r]::before {
    content: "";
    position: absolute;
    height: 27px;
    width: 27px;
    left: 2px;
    bottom: 2px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.dev-toggle input:checked + .dev-toggle-slider[b-5uwt98ow0r] {
    background: #30d158;
}

.dev-toggle input:checked + .dev-toggle-slider.dev-toggle-red[b-5uwt98ow0r] {
    background: #ff453a;
}

.dev-toggle input:checked + .dev-toggle-slider[b-5uwt98ow0r]::before {
    transform: translateX(20px);
}

/* ── Select (AR backend) ─────────────────────────────────────────────────── */
.dev-select[b-5uwt98ow0r] {
    background: #2c2c2e;
    color: #fff;
    border: 1px solid #3a3a3c;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.9rem;
    cursor: pointer;
    flex-shrink: 0;
}

.dev-note[b-5uwt98ow0r] {
    color: #8e8e93;
    font-size: 0.8rem;
    padding: 2px 20px 12px 20px;
}
/* /../tagSpace.Shared/Platforms/Blazor/Screens/ExperienceHomeScreen.razor.rz.scp.css */
/* ── AR overlay HUD — scoped styles ───────────────────────────────────────── */

.home-overlay[b-lavvo8yajs] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Respect device safe areas (notch / home indicator) */
    padding: var(--ts-safe-top) 0 env(safe-area-inset-bottom, 0px) 0;
    pointer-events: none; /* pass-through to GL canvas in the middle */
}

/* ── Top bar ──────────────────────────────────────────────────────────────── */

.top-bar[b-lavvo8yajs] {
    pointer-events: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 16px 16px 0 16px;
}

/* Active AR backend indicator pill (8th Wall / WebXR). Sits at the far left; the
   profile button stays at the right via the top-bar's flex-end + this auto margin. */
.ar-impl-badge[b-lavvo8yajs] {
    margin-right: auto;
    display: flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.profile-btn[b-lavvo8yajs] {
    width: 40px;
    height: 40px;
    padding: 0;
    background: rgba(0, 0, 0, 0.2);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.profile-img[b-lavvo8yajs] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

/* Signed in: the public picture fills the button, or the username's initial on tagStudio's purple. */
.profile-img--avatar[b-lavvo8yajs] {
    width: 36px;
    height: 36px;
}

.profile-initial[b-lavvo8yajs] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #7b6cf6;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 17px;
    font-family: "SF Pro Display", system-ui, Helvetica, sans-serif;
}

/* ── Bottom bar ───────────────────────────────────────────────────────────── */

/* Figma "home buttons" frame, with Skye's pill moved above the camera (16px gap) so the
   [Explore] (camera) [Shape] row keeps its place along the bottom edge. */
.bottom-bar[b-lavvo8yajs] {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    /* 32px rather than 20px: in a browser tab the safe-area inset is 0, yet the bar still sits
       right on top of Android's gesture / navigation bar. */
    padding: 0 16px 32px 16px;
}

.bottom-row[b-lavvo8yajs] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

/* While Skye is in front of the camera (SkyeHomeBar) the camera fades but keeps its space, so
   the pill above never jumps. visibility flips after the fade so it also leaves the tab order. */
.capture-btn[b-lavvo8yajs] {
    transition: opacity 150ms ease, visibility 0s linear 0s;
}

.bottom-bar--camera-hidden .capture-btn[b-lavvo8yajs] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 150ms ease, visibility 0s linear 150ms;
}

/* Skye's pill (#SkyeButtonLayout): translucent black, sparkle + "Skye"; brand teal while she
   is out, which is what tells the user a second tap puts her away. */
.skye-pill[b-lavvo8yajs] {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 12px 8px 8px;
    background: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.skye-pill--active[b-lavvo8yajs] {
    background: rgba(0, 204, 188, 0.85);
}

/* Laid out from the start, shown once her CDN model has loaded. */
.skye-pill--pending[b-lavvo8yajs] {
    visibility: hidden;
}

/* A home button a quest in play hides (QuestHomeBar): it keeps its space so the camera stays centred. */
.nav-btn--hidden[b-lavvo8yajs] {
    visibility: hidden;
}

.skye-pill-icon[b-lavvo8yajs] {
    width: 24px;
    height: 24px;
    padding: 2px;
    object-fit: contain;
}

.skye-pill-label[b-lavvo8yajs] {
    font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 10px;
    color: #fff;
    white-space: nowrap;
}

.nav-btn[b-lavvo8yajs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.15));
}

/* The Explore / Shape SVGs carry their own translucent disc. */
.nav-icon[b-lavvo8yajs] {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.nav-label[b-lavvo8yajs] {
    font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 11px;
    color: #fafafa;
    white-space: nowrap;
    text-shadow: var(--text-over-image);
}

.capture-btn[b-lavvo8yajs] {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 7px solid var(--sheet-light, #fff);
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    /* Suppress the browser's touch callout / text-selection during press-and-hold. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
}

/* Recording: red ring with a rounded-square "stop" fill in the centre. */
.capture-btn--recording[b-lavvo8yajs] {
    border-color: #ff3b30;
}

.capture-btn--recording[b-lavvo8yajs]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    background: #ff3b30;
    border-radius: 8px;
}

/* ── Recording badge (top bar) ────────────────────────────────────────────── */

.rec-badge[b-lavvo8yajs] {
    margin-right: auto;            /* push to the left; profile stays right */
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.rec-dot[b-lavvo8yajs] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff3b30;
    animation: rec-pulse-b-lavvo8yajs 1s ease-in-out infinite;
}

@keyframes rec-pulse-b-lavvo8yajs {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

/* ── Capture review overlay ───────────────────────────────────────────────── */

.capture-review[b-lavvo8yajs] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 5;                    /* above the HUD (z-index 3) */
    display: flex;
    flex-direction: column;
    background: #000;
    padding: var(--ts-safe-top) 0 env(safe-area-inset-bottom, 0px) 0;
    pointer-events: auto;
}

.capture-review-media[b-lavvo8yajs] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;                 /* let the media shrink inside the flex column */
    overflow: hidden;
}

.capture-review-el[b-lavvo8yajs] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.capture-review-close[b-lavvo8yajs] {
    position: absolute;
    top: calc(var(--ts-safe-top) + 16px);
    left: max(20px, env(safe-area-inset-left, 0px) + 12px);   /* clear of a rounded screen corner */
    z-index: 1;
    padding: 8px 14px;
    border: none;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.capture-review-bar[b-lavvo8yajs] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 24px 16px;
}

.capture-review-status[b-lavvo8yajs] {
    color: #fff;
    font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, Helvetica, sans-serif;
    font-size: 14px;
    opacity: 0.85;
}

.capture-review-actions[b-lavvo8yajs] {
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 100%;
    max-width: 420px;
}

.capture-action[b-lavvo8yajs] {
    flex: 1 1 0;
    padding: 14px 0;
    border: none;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.capture-action--primary[b-lavvo8yajs] {
    background: var(--accent, #0a84ff);
}

.capture-action:disabled[b-lavvo8yajs] {
    opacity: 0.5;
    cursor: default;
}
/* /../tagSpace.Shared/Platforms/Blazor/Screens/ExperienceSettingsScreen.razor.rz.scp.css */
/* ── Outer overlay ───────────────────────────────────────────────────────────── */
.settings-overlay[b-0w6sjquold] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 5;
    background-color: #f7f7f7;
    display: flex;
    flex-direction: column;
    font-family: "SF Pro Text", system-ui, Helvetica, sans-serif;
}

/* ── Header ──────────────────────────────────────────────────────────────────── */
.settings-header[b-0w6sjquold] {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 8px;
    background-color: #ffffff;
    flex-shrink: 0;
    box-shadow: var(--header-shadow);
    z-index: 1;
}

.settings-header-btn[b-0w6sjquold] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--texton-lightregular);
    padding: 0;
    flex-shrink: 0;
}

.settings-header-btn svg[b-0w6sjquold] {
    width: 24px;
    height: 24px;
}

.settings-header-title[b-0w6sjquold] {
    flex: 1;
    text-align: center;
    font-family: "SF Pro Display", system-ui, Helvetica, sans-serif;
    font-weight: var(--headline-font-weight);
    font-size: var(--headline-font-size);
    line-height: var(--headline-line-height);
    color: var(--texton-lightregular);
}

.settings-header-spacer[b-0w6sjquold] {
    width: 44px;
    flex-shrink: 0;
}

/* ── Scrollable body ─────────────────────────────────────────────────────────── */
.settings-body[b-0w6sjquold] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 0 0 32px;
}

.settings-body[b-0w6sjquold]::-webkit-scrollbar { display: none; }

/* ── Section ─────────────────────────────────────────────────────────────────── */
.settings-section[b-0w6sjquold] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

.settings-section-title[b-0w6sjquold] {
    font-family: "SF Pro Display", system-ui, Helvetica, sans-serif;
    font-weight: var(--title-3-font-weight);
    font-size: var(--title-3-font-size);
    line-height: var(--title-3-line-height);
    color: var(--texton-lightregular);
}

/* ── Card (grouped rows) ─────────────────────────────────────────────────────── */
.settings-card[b-0w6sjquold] {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e7e7e7;
}

/* ── Row ─────────────────────────────────────────────────────────────────────── */
.settings-row[b-0w6sjquold] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background-color: #ffffff;
    border: none;
    cursor: pointer;
    text-align: left;
    width: 100%;
}

.settings-row:active[b-0w6sjquold] { background-color: #f0f0f0; }

.settings-row-divider[b-0w6sjquold] {
    border-bottom: 1px solid #0000001a;
}

.settings-row-label[b-0w6sjquold] {
    font-family: "SF Pro Text", system-ui, Helvetica, sans-serif;
    font-weight: var(--headline-font-weight);
    font-size: var(--headline-font-size);
    line-height: var(--headline-line-height);
    color: var(--texton-lightregular);
}

/* ── Slider row (Sound) ──────────────────────────────────────────────────────── */
.settings-slider-row[b-0w6sjquold] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background-color: #ffffff;
}

.settings-slider-row .settings-row-label[b-0w6sjquold] { flex: 0 0 110px; }

.settings-slider[b-0w6sjquold] {
    --fill: 100%;
    flex: 1;
    min-width: 0;
    height: 4px;
    border-radius: 2px;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    background: linear-gradient(to right, var(--texton-lightregular) var(--fill), #e7e7e7 var(--fill));
}

.settings-slider[b-0w6sjquold]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #c8c8c8;
    box-shadow: 0 1px 3px #00000033;
}

.settings-slider[b-0w6sjquold]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #c8c8c8;
    box-shadow: 0 1px 3px #00000033;
}

.settings-slider-value[b-0w6sjquold] {
    flex: 0 0 40px;
    text-align: right;
    font-family: "SF Pro Text", system-ui, Helvetica, sans-serif;
    font-size: var(--headline-font-size);
    color: var(--texton-lightsecondary);
}

.settings-chevron[b-0w6sjquold] {
    width: 24px;
    height: 24px;
    color: var(--texton-lightsecondary);
    flex-shrink: 0;
}

/* ── Social icon grid ────────────────────────────────────────────────────────── */
.settings-social-grid[b-0w6sjquold] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.settings-social-btn[b-0w6sjquold] {
    display: flex;
    width: 80px;
    height: 80px;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid #e7e7e7;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.settings-social-btn:active[b-0w6sjquold] { background-color: #f0f0f0; }

.settings-social-btn svg[b-0w6sjquold] {
    pointer-events: none;
}

/* ── Version footer ──────────────────────────────────────────────────────────── */
.settings-version[b-0w6sjquold] {
    font-family: "SF Pro Text", system-ui, Helvetica, sans-serif;
    font-weight: var(--subheadline-font-weight);
    font-size: var(--subheadline-font-size);
    line-height: var(--subheadline-line-height);
    color: var(--texton-lighttertiary);
    text-align: center;
    margin: 0;
    padding: 16px;
}

/* ── Report a problem dialog ─────────────────────────────────────────────────── */
.report-backdrop[b-0w6sjquold] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 6;
    background-color: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.report-dialog[b-0w6sjquold] {
    width: 100%;
    max-width: 420px;
    background-color: #ffffff;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: "SF Pro Text", system-ui, Helvetica, sans-serif;
    color: var(--texton-lightregular);
}

.report-title[b-0w6sjquold] {
    font-family: "SF Pro Display", system-ui, Helvetica, sans-serif;
    font-weight: var(--title-3-font-weight);
    font-size: var(--title-3-font-size);
    line-height: var(--title-3-line-height);
}

.report-text[b-0w6sjquold] {
    margin: 0;
    font-size: var(--subheadline-font-size);
    line-height: var(--subheadline-line-height);
    color: var(--texton-lighttertiary);
}

.report-note[b-0w6sjquold] {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    padding: 12px;
    font: inherit;
    font-size: 16px; /* 16px stops iOS Safari zooming the page on focus */
}

.report-error[b-0w6sjquold] {
    margin: 0;
    font-size: var(--subheadline-font-size);
    color: #c62828;
}

.report-id[b-0w6sjquold] {
    margin: 0;
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 0.15em;
    user-select: all;
}

.report-actions[b-0w6sjquold] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.report-btn[b-0w6sjquold] {
    min-width: 88px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    background-color: #ffffff;
    font: inherit;
    font-weight: var(--headline-font-weight);
    color: var(--texton-lightregular);
    cursor: pointer;
}

.report-btn-primary[b-0w6sjquold] {
    border-color: transparent;
    background-color: var(--primaryshade-1);
    color: #ffffff;
}

.report-btn:disabled[b-0w6sjquold] { opacity: 0.6; cursor: default; }
/* /../tagSpace.Shared/Platforms/Blazor/Screens/FullscreenInfoTag.razor.rz.scp.css */
/* ── Full-screen backdrop ───────────────────────────────────────────────── */

.fit-overlay[b-5vrkqh9xtg] {
    position: fixed;
    inset: 0;
    z-index: 8;
    background: rgba(0, 0, 0, 0.45);
}

/* ── Card ───────────────────────────────────────────────────────────────── */

.fit-card[b-5vrkqh9xtg] {
    position: fixed;
    top: 50%;
    left: 16px;
    right: 16px;
    transform: translateY(-50%);
    z-index: 9;
    background-color: #2c2e33;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: fit-pop-in-b-5vrkqh9xtg 0.22s cubic-bezier(0.34, 1.36, 0.64, 1) both;
}

@keyframes fit-pop-in-b-5vrkqh9xtg {
    from { opacity: 0; transform: translateY(-50%) scale(0.94); }
    to   { opacity: 1; transform: translateY(-50%) scale(1); }
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */

.fit-topbar[b-5vrkqh9xtg] {
    display: flex;
    align-items: center;
    padding: 10px 16px 6px;
    gap: 8px;
    flex-shrink: 0;
}

.fit-title[b-5vrkqh9xtg] {
    flex: 1;
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    font-family: -apple-system, "SF Pro Text", Helvetica, sans-serif;
    line-height: 1.2;
}

.fit-topbar-actions[b-5vrkqh9xtg] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.fit-icon-btn[b-5vrkqh9xtg] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    transition: opacity 0.15s;
}

.fit-icon-btn:active[b-5vrkqh9xtg] {
    opacity: 1;
}

/* ── Video ───────────────────────────────────────────────────────────────── */

.fit-video[b-5vrkqh9xtg] {
    width: 100%;
    display: block;
    background: #000;
    max-height: 60vh;
    object-fit: contain;
}

/* ── Image ───────────────────────────────────────────────────────────────── */

.fit-image[b-5vrkqh9xtg] {
    width: 100%;
    display: block;
    max-height: 300px;
    object-fit: contain;
    background: #1a1b1e;
}

/* ── Audio placeholder ───────────────────────────────────────────────────── */

.fit-audio-placeholder[b-5vrkqh9xtg] {
    width: 100%;
    height: 120px;
    background: #1a1b1e;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Text ────────────────────────────────────────────────────────────────── */

.fit-text[b-5vrkqh9xtg] {
    color: #ffffff;
    font-size: 16px;
    font-family: -apple-system, "SF Pro Text", Helvetica, sans-serif;
    line-height: 1.5;
    margin: 20px 24px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Links and licence text arrive inside the server's description HTML. Left alone they take the
   browser's #0000EE, which all but vanishes on the card; tint them with the tag's colour instead. */
.fit-text[b-5vrkqh9xtg]  a,
.fit-text[b-5vrkqh9xtg]  a:visited {
    color: var(--fit-link, #1ea896);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Share button ────────────────────────────────────────────────────────── */

.fit-share-btn[b-5vrkqh9xtg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 24px 24px;
    padding: 12px;
    background-color: #1ea896;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-family: -apple-system, "SF Pro Text", Helvetica, sans-serif;
    font-weight: 400;
    cursor: pointer;
    width: calc(100% - 48px);
}

.fit-share-btn:active[b-5vrkqh9xtg] {
    opacity: 0.85;
}
/* /../tagSpace.Shared/Platforms/Blazor/Screens/MyProfileScreen.razor.rz.scp.css */
/* ── Outer overlay ──────────────────────────────────────────────────────────── */
.profile-overlay[b-uycha94z43] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 5;
    background-color: #f7f7f7;
    display: flex;
    flex-direction: column;
    font-family: "SF Pro Text", system-ui, Helvetica, sans-serif;
    padding-top: var(--ts-safe-top);
}

/* ── Header bar ─────────────────────────────────────────────────────────────── */
.profile-header[b-uycha94z43] {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 8px;
    background-color: #f7f7f7;
    flex-shrink: 0;
    box-shadow: var(--header-shadow);
    z-index: 1;
}

.profile-header-btn[b-uycha94z43] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--texton-lightregular);
    padding: 0;
}

.profile-header-btn svg[b-uycha94z43] {
    width: 24px;
    height: 24px;
}

.profile-header-spacer[b-uycha94z43] { flex: 1; }

.profile-header-title[b-uycha94z43] {
    font-family: "SF Pro Display", system-ui, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    color: var(--texton-lightregular);
}

/* ── Scrollable body ────────────────────────────────────────────────────────── */
.profile-body[b-uycha94z43] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 40px;
}

.profile-body[b-uycha94z43]::-webkit-scrollbar { display: none; }

/* The served Profile page mounts here (its own shadow DOM styles it). Until it has, it takes no
   room, so the loading and unavailable states sit centred in the screen. */
.profile-page-body[b-uycha94z43] { position: relative; }
.profile-page-host[b-uycha94z43] { min-height: 100%; }
.profile-page-host--hidden[b-uycha94z43] { display: none; }

.profile-page-status[b-uycha94z43] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.profile-page-card[b-uycha94z43] {
    width: 100%;
    max-width: 340px;
    padding: 28px 24px 24px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    text-align: center;
    animation: profile-page-in-b-uycha94z43 0.2s ease both;
}

@keyframes profile-page-in-b-uycha94z43 {
    from { opacity: 0; transform: translateY(6px); }
}

.profile-page-icon[b-uycha94z43] {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #efedff;
    color: #7b6cf6;
}

.profile-page-heading[b-uycha94z43] {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    color: #252729;
}

.profile-page-text[b-uycha94z43] {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.45;
    color: #5f646c;
}

.profile-page-retry[b-uycha94z43] {
    width: 100%;
    min-height: 48px;
    border: none;
    border-radius: 100px;
    background: #7b6cf6;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.profile-page-retry:disabled[b-uycha94z43] { opacity: 0.75; cursor: default; }

.profile-page-spinner[b-uycha94z43] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(123, 108, 246, 0.25);
    border-top-color: #7b6cf6;
    border-radius: 50%;
    animation: profile-page-spin-b-uycha94z43 0.8s linear infinite;
}

.profile-page-spinner--small[b-uycha94z43] {
    width: 18px;
    height: 18px;
    border-width: 2.5px;
    border-color: rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
}

@keyframes profile-page-spin-b-uycha94z43 {
    to { transform: rotate(360deg); }
}
/* /../tagSpace.Shared/Platforms/Blazor/Screens/MyTagsScreen.razor.rz.scp.css */
/* ── Sheet + backdrop ──────────────────────────────────────────────────── */

.mytag-backdrop[b-i6w7aqpp69] {
    position: fixed;
    inset: 0;
    z-index: 5;
    background: transparent;
}

.mytag-sheet[b-i6w7aqpp69] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    /* 20% see-through so the AR view stays visible behind the sheet, blurred so the labels
       stay readable over a busy camera image. Web only: the native apps have their own
       layouts and never load this stylesheet. */
    background-color: rgba(35, 37, 40, 0.8);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 16px 16px 0 0;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /* Slide-up entrance */
    animation: mytag-slide-up-b-i6w7aqpp69 0.32s cubic-bezier(0.32, 0.72, 0, 1) both;
}

@keyframes mytag-slide-up-b-i6w7aqpp69 {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* ── Handle ────────────────────────────────────────────────────────────── */

.mytag-handle-row[b-i6w7aqpp69] {
    display: flex;
    justify-content: center;
    padding: 10px 0 4px;
    flex-shrink: 0;
    cursor: pointer;
}

.mytag-handle[b-i6w7aqpp69] {
    width: 42px;
    height: 6px;
    background-color: #d7d7d7;
    border-radius: 3px;
}

/* ── Sections ──────────────────────────────────────────────────────────── */

.mytag-section[b-i6w7aqpp69] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 24px 24px;
    flex-shrink: 0;
}

.mytag-section--border[b-i6w7aqpp69] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

/* ── Header row (title + close) ─────────────────────────────────────────── */

.mytag-section-header-row[b-i6w7aqpp69] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mytag-title[b-i6w7aqpp69] {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    font-family: -apple-system, "SF Pro Text", Helvetica, sans-serif;
    line-height: normal;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mytag-close[b-i6w7aqpp69] {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 22px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

/* ── Horizontal chip carousel ─────────────────────────────────────────── */

.mytag-carousel[b-i6w7aqpp69] {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.mytag-carousel[b-i6w7aqpp69]::-webkit-scrollbar {
    display: none;
}

.mytag-chip[b-i6w7aqpp69] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 80px;
    cursor: pointer;
    flex-shrink: 0;
}

/* Layer chips lock briefly while the tag refresh they triggered is in flight. */
.mytag-chip--busy[b-i6w7aqpp69] {
    opacity: 0.5;
    pointer-events: none;
}

/* Placeholder chip shown while the layer catalogue is fetched: three overlapping tiles
   standing in for "some layers". The stack occupies the same 76px box as a real layer
   tile, and the label is one line like theirs, so nothing moves when the layers arrive. */
.mytag-chip--skeleton[b-i6w7aqpp69] {
    cursor: default;
    pointer-events: none;
}

.mytag-chip--skeleton .mytag-chip-label[b-i6w7aqpp69] {
    opacity: 0.6;
}

.mytag-skeleton-stack[b-i6w7aqpp69] {
    position: relative;
    width: 76px;
    height: 76px;
}

/* Opaque tiles with a sheet-coloured edge, so each overlap reads as a separate layer. */
.mytag-skeleton-tile[b-i6w7aqpp69] {
    position: absolute;
    top: 10px;
    width: 46px;
    height: 56px;
    border-radius: 8px;
    border: 2px solid #232528;
    box-sizing: border-box;
    background: linear-gradient(90deg, #3a3a3d 0%, #56595e 50%, #3a3a3d 100%);
    background-size: 200% 100%;
    animation: mytag-skeleton-shimmer-b-i6w7aqpp69 1.2s ease-in-out infinite;
}

/* Staggered left to right, so the shimmer sweeps across the stack. */
.mytag-skeleton-tile:nth-child(1)[b-i6w7aqpp69] { left: 0;    z-index: 1; }
.mytag-skeleton-tile:nth-child(2)[b-i6w7aqpp69] { left: 15px; z-index: 2; animation-delay: 0.12s; }
.mytag-skeleton-tile:nth-child(3)[b-i6w7aqpp69] { left: 30px; z-index: 3; animation-delay: 0.24s; }

@keyframes mytag-skeleton-shimmer-b-i6w7aqpp69 {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.mytag-circle[b-i6w7aqpp69] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    overflow: hidden;
}

/* Layer tiles are square and untinted: the icon is shown as-is, filling the tile. Scoped to
   .mytag-square so the My Place Tags and category icons keep the base 36px size below. */
/* 76px = the distance row (20) + the filters' gap (12) + a category disc (44), so with the
   same 8px gap and label beneath, a layer's tile and name stand as tall as its slider and
   categories beside it. */
.mytag-square[b-i6w7aqpp69] {
    width: 76px;
    height: 76px;
    border-radius: 14px;
}

.mytag-square .mytag-chip-icon[b-i6w7aqpp69] {
    width: 76px;
    height: 76px;
    border-radius: 14px;
}

/* Category chips: the icon stays at its usual 36px and the disc is shrunk to a thin
   4px ring of the on/off tint around it (the tint also shows through the icon's
   transparent glyph). */
.mytag-bare[b-i6w7aqpp69] {
    width: 44px;
    height: 44px;
}

.mytag-chip:has(.mytag-bare--off)[b-i6w7aqpp69] {
    opacity: 0.35;
}

.mytag-chip-icon[b-i6w7aqpp69] {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.mytag-chip-label[b-i6w7aqpp69] {
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    font-family: -apple-system, "SF Pro Text", Helvetica, sans-serif;
    white-space: nowrap;
    text-align: center;
}

/* ── Distance row (layer name · slider · value) ───────────────────────── */

.mytag-distance-row[b-i6w7aqpp69] {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 20px;
}

.mytag-distance-value[b-i6w7aqpp69] {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    font-family: -apple-system, "SF Pro Text", Helvetica, sans-serif;
    white-space: nowrap;
    min-width: 48px;
    text-align: right;
}

/* ── Slider ────────────────────────────────────────────────────────────── */
/* --fill and --tint (set inline) paint the track left of the thumb in the
   layer's colour, the same tint as its selected chip. */

.mytag-slider[b-i6w7aqpp69] {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    min-width: 0;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(to right,
        var(--tint, #2f7dd1) 0, var(--tint, #2f7dd1) var(--fill, 0%),
        rgba(255, 255, 255, 0.40) var(--fill, 0%), rgba(255, 255, 255, 0.40) 100%);
    outline: none;
    cursor: pointer;
}

.mytag-slider[b-i6w7aqpp69]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    border: none;
    box-shadow: 0 0 3px rgba(0,0,0,0.4);
    cursor: pointer;
}

.mytag-slider[b-i6w7aqpp69]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    border: none;
    cursor: pointer;
}

/* ── Drop mode ("Snap & Drop") ─────────────────────────────────────────── */
/* Full-screen, pointer-events pass-through so the live AR view behind stays
   interactive; only the back button, hint and snap button capture events. */

.placetag-drop-overlay[b-i6w7aqpp69] {
    position: fixed;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.placetag-cancel[b-i6w7aqpp69] {
    pointer-events: auto;
    position: absolute;
    top: calc(var(--ts-safe-top) + 16px);
    left: 16px;
    background: rgba(0, 0, 0, 0.35);
    color: #ffffff;
    border: none;
    border-radius: 18px;
    padding: 8px 16px;
    font-size: 16px;
    font-family: -apple-system, "SF Pro Text", Helvetica, sans-serif;
    cursor: pointer;
}

.placetag-drop-hint[b-i6w7aqpp69] {
    pointer-events: none;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    font-family: -apple-system, "SF Pro Text", Helvetica, sans-serif;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    padding: 0 24px;
    margin-bottom: 20px;
}

.placetag-snap-btn[b-i6w7aqpp69] {
    pointer-events: auto;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 6px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    transition: transform 0.1s ease;
}

.placetag-snap-btn:active[b-i6w7aqpp69] {
    transform: scale(0.94);
}

.placetag-snap-btn:disabled[b-i6w7aqpp69] {
    opacity: 0.6;
    cursor: default;
}

.placetag-snap-icon[b-i6w7aqpp69] {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

/* ── Layer rows ────────────────────────────────────────────────────────── */
/* Layers stack vertically, one row each: the layer's tile on the left and, while it is on,
   its distance slider with the categories beneath, to the right. Centred, so a layer with
   no categories has its slider level with the middle of the tile. */

.mytag-layer-list[b-i6w7aqpp69] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mytag-layer-row[b-i6w7aqpp69] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mytag-layer-row + .mytag-layer-row[b-i6w7aqpp69] {
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

/* A switched-off layer stays on the list, dimmed: its icon, name, slider and categories.
   The filters ignore taps so they land on the row, which switches the layer back on. */
.mytag-layer-row--off[b-i6w7aqpp69] {
    cursor: pointer;
}

.mytag-layer-row--off .mytag-layer-tile[b-i6w7aqpp69],
.mytag-layer-row--off .mytag-chip-label[b-i6w7aqpp69],
.mytag-layer-row--off .mytag-layer-filters[b-i6w7aqpp69] {
    opacity: 0.35;
}

.mytag-layer-row--off .mytag-layer-filters[b-i6w7aqpp69] {
    pointer-events: none;
}

.mytag-layer-filters[b-i6w7aqpp69] {
    transition: opacity 0.2s ease;
}

.mytag-layer-empty[b-i6w7aqpp69] {
    color: rgba(255, 255, 255, 0.65);
    font-size: 15px;
    font-family: -apple-system, "SF Pro Text", Helvetica, sans-serif;
}

/* ── Layer Catalog ─────────────────────────────────────────────────────── */

/* Opens the catalog, on the far right of the Layers heading. */
.mytag-add[b-i6w7aqpp69] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    background: none;
    color: #ffffff;
    font-size: 22px;
    line-height: 1;
    padding: 0 0 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mytag-back[b-i6w7aqpp69] {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    padding: 0 12px 4px 0;
}

.mytag-title--grow[b-i6w7aqpp69] {
    flex: 1;
}

/* Opens the layer's info page, on the right of its catalog row, centred on it. Its "i" is a
   dot and a stem. */
.mytag-layer-info-btn[b-i6w7aqpp69] {
    position: relative;
    flex-shrink: 0;
    align-self: center;
    width: 32px;
    height: 32px;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    background: #3a3a3d;
    border: 2px solid #ffffff;
    box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.mytag-layer-info-btn[b-i6w7aqpp69]::before,
.mytag-layer-info-btn[b-i6w7aqpp69]::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 3px;
    background: #ffffff;
    border-radius: 1.5px;
    transform: translateX(-50%);
}

/* Offsets within the 28px inside of the 2px border. */
.mytag-layer-info-btn[b-i6w7aqpp69]::before {     /* dot */
    top: 6px;
    height: 3px;
}

.mytag-layer-info-btn[b-i6w7aqpp69]::after {      /* stem */
    top: 11px;
    height: 11px;
}

/* Catalog rows: a smaller tile with no label beneath, the layer's name level with its top. */
.mytag-catalog-row[b-i6w7aqpp69] {
    align-items: flex-start;
    cursor: pointer;
}

/* Added to the Explore screen: dimmed, so what's still on offer stands out. The (i) stays
   bright, as it still does the same thing. */
.mytag-catalog-row--added .mytag-layer-chip[b-i6w7aqpp69],
.mytag-catalog-row--added .mytag-catalog-info[b-i6w7aqpp69] {
    opacity: 0.35;
}

.mytag-catalog-row .mytag-layer-chip[b-i6w7aqpp69],
.mytag-catalog-row .mytag-catalog-info[b-i6w7aqpp69] {
    transition: opacity 0.2s ease;
}

.mytag-catalog-row .mytag-layer-chip[b-i6w7aqpp69] {
    min-width: 0;
}

.mytag-catalog-row .mytag-square[b-i6w7aqpp69],
.mytag-catalog-row .mytag-square .mytag-chip-icon[b-i6w7aqpp69] {
    width: 53px;
    height: 53px;
    border-radius: 10px;
}

.mytag-catalog-info[b-i6w7aqpp69] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: -apple-system, "SF Pro Text", Helvetica, sans-serif;
}

.mytag-catalog-name[b-i6w7aqpp69] {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.1;
    margin-top: -1px;
}

.mytag-catalog-company[b-i6w7aqpp69] {
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    font-weight: 500;
}

/* ── Layer Info page ── */

.mytag-info-page[b-i6w7aqpp69] {
    cursor: pointer;
}

.mytag-info-banner[b-i6w7aqpp69] {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

.mytag-info-body[b-i6w7aqpp69] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.mytag-info-icon[b-i6w7aqpp69] {
    width: 53px;
    height: 53px;
    border-radius: 12px;
    object-fit: contain;
    flex-shrink: 0;
}

.mytag-info-smallprint[b-i6w7aqpp69] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    line-height: 1.35;
    margin-top: 6px;
}

.mytag-info-smallprint a[b-i6w7aqpp69] {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
}

.mytag-catalog-description[b-i6w7aqpp69] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.35;
    margin-top: 4px;
}

.mytag-layer-tile[b-i6w7aqpp69] {
    position: relative;
    transition: opacity 0.2s ease;
}

.mytag-layer-filters[b-i6w7aqpp69] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mytag-category-chip[b-i6w7aqpp69] {
    min-width: 64px;
}

/* The layer's tag count, badged on the tile's top-right corner. */
.mytag-layer-count[b-i6w7aqpp69] {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 11px;
    background: rgba(20, 21, 23, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    font-family: -apple-system, "SF Pro Text", Helvetica, sans-serif;
    line-height: 20px;
    text-align: center;
}

/* Stands in for a layer's tag count until its first query comes back. */
.mytag-count-spinner[b-i6w7aqpp69] {
    display: inline-block;
    width: 10px;
    height: 10px;
    vertical-align: -1px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    animation: mytag-count-spin-b-i6w7aqpp69 0.8s linear infinite;
}

@keyframes mytag-count-spin-b-i6w7aqpp69 {
    to { transform: rotate(360deg); }
}

/* Fallback for a category with no icon URL. */
.mytag-chip-initial[b-i6w7aqpp69] {
    color: #ffffff;
    font-size: 24px;
    font-weight: 600;
    font-family: -apple-system, "SF Pro Text", Helvetica, sans-serif;
    line-height: 1;
}

/* ── Layer drag-to-reorder (layerReorder in ui.js) ───────────────────────── */

/* A long-press starts the drag, so keep the browser's own long-press behaviours
   (text selection, the iOS image callout, native image drag) out of the way. */
.mytag-layer-chip[b-i6w7aqpp69] {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.mytag-layer-chip img[b-i6w7aqpp69] {
    -webkit-user-drag: none;
    pointer-events: none;
}

.mytag-layer-row[b-i6w7aqpp69] {
    transition: transform 0.15s ease;
}

/* The dragged row tracks the finger exactly and sits above its neighbours. */
.mytag-layer-row.layer-reorder--dragging[b-i6w7aqpp69] {
    transition: none;
    position: relative;
    z-index: 1;
    opacity: 0.85;
    cursor: grabbing;
}

.mytag-layer-row.layer-reorder--dragging .mytag-square[b-i6w7aqpp69] {
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* /../tagSpace.Shared/Platforms/Blazor/Screens/PlaceDetailScreen.razor.rz.scp.css */
/* ── Backdrop ───────────────────────────────────────────────────────────── */

.pd-overlay[b-iydlrjc5do] {
    position: fixed;
    inset: 0;
    z-index: 8;
    background: rgba(0, 0, 0, 0.45);
}

/* ── Card ───────────────────────────────────────────────────────────────── */

.pd-card[b-iydlrjc5do] {
    position: fixed;
    top: 50%;
    left: 16px;
    right: 16px;
    transform: translateY(-50%);
    z-index: 9;
    background-color: #2c2e33;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: pd-pop-in-b-iydlrjc5do 0.22s cubic-bezier(0.34, 1.36, 0.64, 1) both;
}

@keyframes pd-pop-in-b-iydlrjc5do {
    from { opacity: 0; transform: translateY(-50%) scale(0.94); }
    to   { opacity: 1; transform: translateY(-50%) scale(1); }
}

/* ── Photo ──────────────────────────────────────────────────────────────── */

.pd-photo-wrap[b-iydlrjc5do] {
    position: relative;
    flex-shrink: 0;
    height: 200px;
}

.pd-photo[b-iydlrjc5do] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pd-photo--placeholder[b-iydlrjc5do] {
    background: #1a1b1e;
}

.pd-close-btn[b-iydlrjc5do] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-photo-footer[b-iydlrjc5do] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 14px 10px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
}

.pd-name[b-iydlrjc5do] {
    display: block;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    font-family: -apple-system, "SF Pro Text", Helvetica, sans-serif;
    line-height: 1.2;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* ── Stars ──────────────────────────────────────────────────────────────── */

.pd-stars-row[b-iydlrjc5do] {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 4px;
}

.pd-star[b-iydlrjc5do] {
    color: rgba(255,255,255,0.35);
    fill: none;
}

.pd-star--filled[b-iydlrjc5do] {
    color: #f5a623;
    fill: #f5a623;
}

.pd-rating-text[b-iydlrjc5do] {
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    font-family: -apple-system, "SF Pro Text", Helvetica, sans-serif;
    margin-left: 4px;
}

/* ── Info row (icon + price/types + distance) ───────────────────────────── */

.pd-info-row[b-iydlrjc5do] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.pd-cat-icon[b-iydlrjc5do] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.pd-price-types[b-iydlrjc5do] {
    flex: 1;
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    font-family: -apple-system, "SF Pro Text", Helvetica, sans-serif;
}

.pd-distance[b-iydlrjc5do] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: rgba(255,255,255,0.6);
    font-size: 13px;
    font-family: -apple-system, "SF Pro Text", Helvetica, sans-serif;
    flex-shrink: 0;
}

/* ── Detail rows (address, hours) ───────────────────────────────────────── */

.pd-detail-row[b-iydlrjc5do] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    font-family: -apple-system, "SF Pro Text", Helvetica, sans-serif;
    line-height: 1.4;
}

.pd-detail-icon[b-iydlrjc5do] {
    flex-shrink: 0;
    margin-top: 1px;
    color: rgba(255,255,255,0.5);
}

/* ── Description ────────────────────────────────────────────────────────── */

.pd-description[b-iydlrjc5do] {
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    font-family: -apple-system, "SF Pro Text", Helvetica, sans-serif;
    line-height: 1.5;
    margin: 0;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* ── Reviews ────────────────────────────────────────────────────────────── */

.pd-reviews-label[b-iydlrjc5do] {
    color: rgba(255,255,255,0.9);
    font-size: 15px;
    font-weight: 600;
    font-family: -apple-system, "SF Pro Text", Helvetica, sans-serif;
    margin: 14px 16px 6px;
}

.pd-reviews-text[b-iydlrjc5do] {
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    font-family: -apple-system, "SF Pro Text", Helvetica, sans-serif;
    line-height: 1.55;
    margin: 0 16px 20px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Loading ────────────────────────────────────────────────────────────── */

.pd-loading[b-iydlrjc5do] {
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    font-family: -apple-system, "SF Pro Text", Helvetica, sans-serif;
    text-align: center;
    padding: 24px 16px;
    margin: 0;
}

/* Details that arrived after the screen opened (PlaceDetailLoader timed out) fade in. */
.pd-late[b-iydlrjc5do] {
    animation: pd-fade-in-b-iydlrjc5do 0.25s ease-out;
}

@keyframes pd-fade-in-b-iydlrjc5do {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* /../tagSpace.Shared/Platforms/Blazor/Screens/QuestCard.razor.rz.scp.css */
/* ── Quest pop-up card ──────────────────────────────────────────────────────── */
/* From the "Begin Quest" Anima export (Figma 12127:10368): 358px column, a peach title pill
   overlapping a cream 40px-radius card by 32px, 180px hero, black pill buttons. */

.qc-scrim[b-wic9344f1w] {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.35);
    font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, Helvetica, sans-serif;
    animation: qc-fade-in-b-wic9344f1w 300ms ease both;   /* == QuestCard.FadeMs */
}

/* QuestCardContent.Dim (e.g. a quest task's intro): a firm ~60% black so the card is clearly the
   thing to read. Fades with the scrim like the default. */
.qc-scrim--dim[b-wic9344f1w] {
    background: rgba(0, 0, 0, 0.6);
}

.qc-scrim--out[b-wic9344f1w] {
    animation: qc-fade-out-b-wic9344f1w 300ms ease both;
    pointer-events: none;
}

@keyframes qc-fade-in-b-wic9344f1w  { from { opacity: 0; } to { opacity: 1; } }
@keyframes qc-fade-out-b-wic9344f1w { from { opacity: 1; } to { opacity: 0; } }

/* Claim: the card shrinks away to its centre (the reward FX burst from there) and the scrim lifts
   so the effect plays over the AR view. 350ms == QuestCardBase.CollapseMs. */
.qc-scrim--collapse[b-wic9344f1w] {
    animation: qc-fade-out-b-wic9344f1w 350ms ease-in both;
    pointer-events: none;
}

.qc-card--collapse[b-wic9344f1w] {
    animation: qc-collapse-b-wic9344f1w 350ms cubic-bezier(0.55, 0, 0.75, 0.3) both;
}

@keyframes qc-collapse-b-wic9344f1w {
    from { transform: scale(1);    opacity: 1; }
    80%  { opacity: 1; }
    to   { transform: scale(0.02); opacity: 0; }
}

.qc-card[b-wic9344f1w] {
    width: min(358px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.qc-pill[b-wic9344f1w] {
    position: relative;
    z-index: 1;
    max-width: calc(100% - 48px);
    box-sizing: border-box;
    padding: 24px;
    background-color: #ffcebb;
    border: 3px solid #fff4e9;
    border-radius: 40px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 1px 0 0 rgba(255, 255, 255, 0.32),
        inset 0 -1px 2px rgba(0, 0, 0, 0.13),
        inset -1px 0 2px rgba(0, 0, 0, 0.11);
}

.qc-title[b-wic9344f1w] {
    margin-top: -3px;
    font-weight: 600;
    font-size: 20px;
    line-height: 20px;
    text-align: center;
    color: #252729;
}

.qc-frame[b-wic9344f1w] {
    position: relative;
    z-index: 0;
    align-self: stretch;
    box-sizing: border-box;
    min-height: 0;
    margin-top: -32px;
    padding: 60px 32px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 62px;
    overflow-y: auto;
    background-color: #fff4e9;
    border-radius: 40px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 1px 0 0 rgba(255, 255, 255, 0.32),
        inset 0 -1px 2px rgba(0, 0, 0, 0.13),
        inset -1px 0 2px rgba(0, 0, 0, 0.11);
}

.qc-content[b-wic9344f1w] {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.qc-hero[b-wic9344f1w] {
    display: block;
    width: 180px;
    height: 180px;
    object-fit: contain;
}

.qc-body[b-wic9344f1w] {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    line-height: 20.8px;
    text-align: center;
    color: #5f646c;
}

.qc-body p[b-wic9344f1w] {
    margin: 0;
    white-space: pre-line;
}

.qc-body .qc-heading[b-wic9344f1w] {
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    color: #252729;
}

.qc-actions[b-wic9344f1w] {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qc-actions .qc-btn[b-wic9344f1w] {
    height: 48px;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 40px;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    line-height: 24px;
    background: transparent;
    color: #252729;
    font-weight: 500;
}

.qc-actions .qc-btn--primary[b-wic9344f1w] {
    background: #000000;
    color: #ffcebb;
    font-weight: 600;
}

.qc-actions .qc-btn--secondary[b-wic9344f1w] {
    background: #ffcebb;
    color: #252729;
    font-weight: 600;
}

.qc-actions .qc-btn:active[b-wic9344f1w] {
    opacity: 0.7;
}

.qc-actions .qc-btn:disabled[b-wic9344f1w] {
    opacity: 0.5;
    cursor: default;
}
/* /../tagSpace.Shared/Platforms/Blazor/Screens/QuestHudOverlay.razor.rz.scp.css */
/* ── Quest HUD (IQuestHud) — scoped styles ──────────────────────────────────── */
/* Rendered inside #xr-hud (pointer-events:none, inherited), so only the chip and the busy scrim
   take touches. Same dark glass as StartupStatusCard; brand teal #00CCBC as the Skye pill. */

/* "?" task chip: top left, level with the top bar's 40px profile button (16px in, under the notch). */
.qh-chip[b-m7e3njee7f] {
    position: fixed;
    top: calc(var(--ts-safe-top) + 16px);
    left: 16px;
    z-index: 4;                        /* above the HUD (.home-overlay z-index 3) */
    max-width: calc(100vw - 32px - 140px);   /* clear of the tagXP counter and profile button */
    height: 40px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px 0 6px;
    border-radius: 20px;
    background: rgba(26, 27, 30, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff;
    font-family: -apple-system, "SF Pro Text", Helvetica, sans-serif;
    cursor: pointer;
    pointer-events: auto;
    animation: qh-chip-in-b-m7e3njee7f 0.25s ease-out both;
}

.qh-chip:active[b-m7e3njee7f] {
    opacity: 0.75;
}

.qh-chip-icon[b-m7e3njee7f] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 204, 188, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.qh-chip-title[b-m7e3njee7f] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
}

@keyframes qh-chip-in-b-m7e3njee7f {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Task-complete banner: centred under the chip row, slides down and fades in, fades out. */
.qh-banner[b-m7e3njee7f] {
    position: fixed;
    top: calc(var(--ts-safe-top) + 66px);   /* chip: 16px + 40px, then a 10px gap */
    left: 16px;
    right: 16px;
    z-index: 4;
    max-width: 480px;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 16px;
    background: rgba(26, 27, 30, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-family: -apple-system, "SF Pro Text", Helvetica, sans-serif;
    pointer-events: none;
    animation: qh-banner-in-b-m7e3njee7f 0.3s ease-out both;
}

.qh-banner--out[b-m7e3njee7f] {
    animation: qh-banner-out-b-m7e3njee7f 250ms ease-in both;   /* == QuestHudOverlayBase.BannerFadeMs */
}

@keyframes qh-banner-in-b-m7e3njee7f {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes qh-banner-out-b-m7e3njee7f {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-12px); }
}

.qh-banner-tick[b-m7e3njee7f] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #00CCBC;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qh-banner-text[b-m7e3njee7f] {
    min-width: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

/* Busy: centred spinner and text over a light scrim; blocks touches until HideBusy. Above pushed
   screens and quest cards (.qc-scrim z-index 20). */
.qh-busy[b-m7e3njee7f] {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.25);
    pointer-events: auto;
    animation: qh-fade-in-b-m7e3njee7f 0.2s ease both;
}

@keyframes qh-fade-in-b-m7e3njee7f { from { opacity: 0; } to { opacity: 1; } }

.qh-busy-box[b-m7e3njee7f] {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: min(320px, 100%);
    box-sizing: border-box;
    padding: 14px 20px;
    border-radius: 16px;
    background: rgba(26, 27, 30, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-family: -apple-system, "SF Pro Text", Helvetica, sans-serif;
}

.qh-spinner[b-m7e3njee7f] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2.5px solid rgba(0, 204, 188, 0.25);
    border-top-color: #00CCBC;
    animation: qh-spin-b-m7e3njee7f 0.8s linear infinite;
}

@keyframes qh-spin-b-m7e3njee7f {
    to { transform: rotate(360deg); }
}

.qh-busy-text[b-m7e3njee7f] {
    min-width: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}
/* /../tagSpace.Shared/Platforms/Blazor/Screens/ReferralScreen.razor.rz.scp.css */
/* ── Outer overlay ──────────────────────────────────────────────────────────── */
.referral-overlay[b-8iayjufra3] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 5;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    font-family: "SF Pro Text", system-ui, Helvetica, sans-serif;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.referral-header[b-8iayjufra3] {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 8px;
    background-color: #ffffff;
    flex-shrink: 0;
    box-shadow: var(--header-shadow);
    z-index: 1;
}

.referral-close-btn[b-8iayjufra3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--texton-lightregular);
    padding: 0;
}

.referral-close-btn svg[b-8iayjufra3] {
    width: 24px;
    height: 24px;
}

/* ── Scrollable body ────────────────────────────────────────────────────────── */
.referral-body[b-8iayjufra3] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 24px 48px;
    gap: 32px;
}

.referral-body[b-8iayjufra3]::-webkit-scrollbar { display: none; }

/* ── Illustration ───────────────────────────────────────────────────────────── */
.referral-illustration[b-8iayjufra3] {
    width: 320px;
    height: 320px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ── Title ──────────────────────────────────────────────────────────────────── */
.referral-title[b-8iayjufra3] {
    font-family: "SF Pro Display", system-ui, Helvetica, sans-serif;
    font-weight: var(--title-1-font-weight);
    font-size: var(--title-1-font-size);
    line-height: var(--title-1-line-height);
    color: var(--texton-lightregular);
    text-align: center;
    margin: 0;
}

/* ── Actions block ──────────────────────────────────────────────────────────── */
.referral-actions[b-8iayjufra3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 310px;
}

/* Referral code pill */
.referral-code-pill[b-8iayjufra3] {
    display: flex;
    width: 100%;
    height: 48px;
    align-items: center;
    justify-content: center;
    background-color: #f3f3f3;
    border-radius: 100px;
    border: 2px solid var(--greys-line);
}

.referral-code-label[b-8iayjufra3] {
    font-family: "SF Pro Text", system-ui, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 22px;
    color: var(--texton-lightregular);
    letter-spacing: 0;
}

/* Share button */
.referral-share-btn[b-8iayjufra3] {
    display: flex;
    width: 100%;
    height: 48px;
    align-items: center;
    justify-content: center;
    background-color: var(--primaryfull);
    border: none;
    border-radius: 100px;
    font-family: "SF Pro Text", system-ui, Helvetica, sans-serif;
    font-weight: var(--headline-font-weight);
    font-size: var(--headline-font-size);
    line-height: var(--headline-line-height);
    color: #ffffff;
    cursor: pointer;
}

.referral-share-btn:active[b-8iayjufra3] { background-color: var(--primaryshade-1); }

/* Footer */
.referral-footer[b-8iayjufra3] {
    font-family: "SF Pro Text", system-ui, Helvetica, sans-serif;
    font-weight: 400;
    font-size: var(--footnote-font-size);
    line-height: var(--footnote-line-height);
    color: var(--texton-lightsecondary);
    text-align: center;
    margin: 0;
}
/* /../tagSpace.Shared/Platforms/Blazor/Screens/StartupStatusCard.razor.rz.scp.css */
/* Startup status card: dark glass, bottom of the screen, clear of the HUD's bottom buttons. */
.ss-card[b-6mdcpz8dgm] {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 128px);   /* bottom bar: 32px gap + its buttons */
    max-width: 480px;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 16px;
    background: rgba(26, 27, 30, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-family: -apple-system, "SF Pro Text", Helvetica, sans-serif;
    pointer-events: none;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.2s ease-in, transform 0.2s ease-in;
}

.ss-card--shown[b-6mdcpz8dgm] {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

.ss-spinner[b-6mdcpz8dgm] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2.5px solid rgba(0, 204, 188, 0.25);
    border-top-color: #00CCBC;
    animation: ss-spin-b-6mdcpz8dgm 0.8s linear infinite;
}

@keyframes ss-spin-b-6mdcpz8dgm {
    to { transform: rotate(360deg); }
}

.ss-text[b-6mdcpz8dgm] {
    flex: 1;
    min-width: 0;
}

.ss-title[b-6mdcpz8dgm] {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.ss-detail[b-6mdcpz8dgm] {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    line-height: 1.35;
}
/* /../tagSpace.Shared/Platforms/Blazor/Screens/TagXpCounter.razor.rz.scp.css */
/* ── tagXP balance (reward FX) ─────────────────────────────────────────────── */
/* Sits left of the profile button in the top bar; hidden (but laid out, so it can be measured
   as the particle trail's target) until a reward shows it. Scale-in keeps its centre fixed. */

.xp-counter[b-84pz52fq6a] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    box-sizing: border-box;
    margin-right: 8px;
    padding: 0 14px 0 6px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 300ms ease, transform 300ms ease;   /* hide == RewardFx.HideMs */
    pointer-events: none;
}

.xp-counter--shown[b-84pz52fq6a] {
    opacity: 1;
    transform: scale(1);
}

.xp-counter--pulse[b-84pz52fq6a] {
    animation: xp-pulse-b-84pz52fq6a 350ms ease-out;
}

@keyframes xp-pulse-b-84pz52fq6a {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.xp-coin[b-84pz52fq6a] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff1b8 0%, #ffcf4a 45%, #d99a00 100%);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
    color: #7a4b00;
    font-size: 11px;
    font-weight: 800;
}

.xp-value[b-84pz52fq6a] {
    display: flex;
    font-variant-numeric: tabular-nums;
}

.xp-digit[b-84pz52fq6a] {
    display: inline-block;
    height: 1em;
    overflow: hidden;
}

.xp-strip[b-84pz52fq6a] {
    display: flex;
    flex-direction: column;
    transition: transform 120ms ease-out;
}

.xp-strip > span[b-84pz52fq6a] {
    height: 1em;
}

.xp-sep[b-84pz52fq6a] {
    display: inline-block;
}

.xp-unit[b-84pz52fq6a] {
    font-size: 13px;
    font-weight: 500;
    opacity: 0.8;
}
/* /../tagSpace.Shared/Platforms/Blazor/Screens/TourSelectScreen.razor.rz.scp.css */
/* ── Tour Select / Zone Browser overlay ────────────────────────────────────────
   The header, cards and their styles are the shared Zone Browser element
   (<tagspace-experiences mode="app">, tagSpace.SharedWeb/experiences/tagspace-experiences.js),
   the same cards as the website's Discover carousel: change them there. This sheet styles only
   what Blazor still draws around it - the overlay, the confirm sheet and the load fallback. */

.tour-select-overlay[b-5isn7dy39n] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 5;
    background: #000;
    display: flex;
    flex-direction: column;
    padding: var(--ts-safe-top) 0 env(safe-area-inset-bottom, 16px) 0;
    font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, Helvetica, sans-serif;
}

/* The element fills the overlay under the safe-area padding. */
.tour-select-browser[b-5isn7dy39n] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Shown only if the element's script couldn't load (offline, a failed deploy). */
.tour-select-unavailable[b-5isn7dy39n] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
}

.tour-select-unavailable .confirm-btn[b-5isn7dy39n] {
    flex: none;
    width: min(240px, 100%);
}

/* ── Inline confirm sheet ────────────────────────────────────────────────────── */

.confirm-scrim[b-5isn7dy39n] {
    position: absolute;             /* .tour-select-overlay is fixed -> containing block */
    inset: 0;
    z-index: 2;                     /* above the Zone Browser element, inside the overlay's context */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.6);
}

.confirm-sheet[b-5isn7dy39n] {
    width: min(340px, 100%);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 20px 16px;
    background: #ffffff;
    border-radius: 16px;
    border: 4px solid var(--primaryfull, #00ccbc);   /* the current card's ring treatment */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.confirm-title[b-5isn7dy39n] {
    font-family: "SF Pro Display", "SF Pro Display-Semibold", Helvetica;
    font-weight: 600;
    font-size: 20px;
    color: #000000;
}

.confirm-body[b-5isn7dy39n] {
    margin: 0;
    font-family: "SF Pro Text-Regular", "SF Pro Text", Helvetica;
    font-weight: 400;
    font-size: 16px;
    line-height: 20.8px;
    color: #4a4a4a;
}

.confirm-actions[b-5isn7dy39n] {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.confirm-btn[b-5isn7dy39n] {
    flex: 1;
    height: 48px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: "SF Pro Text-Bold", "SF Pro Text", Helvetica;
    font-weight: 700;
    font-size: 17px;
    line-height: 22px;
}

.confirm-btn--ghost[b-5isn7dy39n] {
    background: rgba(122, 122, 122, 0.12);
    color: #000000;
}

.confirm-btn--primary[b-5isn7dy39n] {
    background: #000000;
    color: #ffffff;
}

.confirm-btn:active[b-5isn7dy39n] {
    opacity: 0.7;
}