/* ==========================================================================
   Waiz Earn — components
   Built once, used everywhere. Every interactive control has a real hover,
   active, focus-visible and disabled state; disabled is expressed with colour
   and opacity, never a filter.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BUTTONS — 44px minimum height so every primary control is a legal touch
   target without extra padding hacks.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  font-size: calc(14.5px * var(--text-scale)); font-weight: 700;
  letter-spacing: -.01em; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(135deg, var(--brand-solid) 0%, var(--brand-solid-2) 55%, var(--brand-solid-3) 130%);
  color: var(--brand-ink);
  box-shadow: var(--sh-brand);
}
.btn-primary:hover { color: var(--brand-ink); filter: saturate(1.08) brightness(1.06); }

.btn-ghost {
  background: var(--surface-2); color: var(--text); border-color: var(--line);
}
.btn-ghost:hover { background: var(--surface-hover); border-color: var(--line-strong); }

.btn-quiet { background: transparent; color: var(--muted); border-color: var(--line); }
.btn-quiet:hover { color: var(--text); border-color: var(--line-strong); }

.btn-sm { min-height: 36px; padding: 0 var(--sp-4); font-size: calc(13px * var(--text-scale)); }
.btn-block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] {
  cursor: not-allowed; opacity: .55; box-shadow: none; transform: none;
}

/* Icon-only control. Always carries an aria-label. */
.icon-btn {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-sm);
  color: var(--muted); border: 1px solid transparent;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.icon-btn:hover { background: var(--surface-hover); color: var(--text); }
.icon-btn[aria-expanded="true"] { background: var(--surface-hover); color: var(--text); border-color: var(--line); }

/* --------------------------------------------------------------------------
   HEADER — shared by every page
   These rules used to live only in index.css, which the legal pages and the
   account tools never load. There the header rendered unstyled and scrolled
   away with Back tucked at its far edge, so visitors assumed swiping was the
   only way out. Now every page gets the same sticky bar.
   -------------------------------------------------------------------------- */
.hdr {
  position: sticky; top: 10px; z-index: 80;
  padding-top: env(safe-area-inset-top); margin-inline: auto;
  width: min(calc(100% - 20px), calc(var(--max) + 28px));
  background: color-mix(in srgb, var(--bg-elev) 80%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 14px 40px -28px rgba(0,0,0,.9);
  transition: border-color var(--t-base) var(--ease), background-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
/* One state change on scroll, not a continuous animation. */
.hdr.is-stuck { border-color: var(--line-strong); background: color-mix(in srgb, var(--bg-elev) 94%, transparent); box-shadow: var(--sh-2); }
.hdr-in { display: flex; align-items: center; gap: var(--sp-4); height: 66px; }
.hdr.has-back .hdr-in { gap: 10px; }

.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; min-width: 0; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
/* The wordmark rides on the display face. It previously used Sakana.ttf,
   whose web-embedding licence nobody could produce — see LEGAL_REVIEW L14. */
.brand b { font-family: var(--font-display); font-size: calc(17.5px * var(--text-scale)); font-weight: 700; letter-spacing: -.035em; }

/* Back and Home. Back comes FIRST, top left — where people look for it — and
   keeps its word on every screen size: a chevron on its own reads as
   decoration, and the word is what a visitor searches for. */
.nav-pill {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  min-height: 40px; padding: 0 14px 0 9px; border-radius: var(--r-pill);
  font-size: calc(13.5px * var(--text-scale)); font-weight: 700; line-height: 1;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--line-strong);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.nav-pill svg { flex: none; transition: transform var(--t-fast) var(--ease); }
.nav-pill:hover { background: var(--surface-hover); }
.nav-pill[data-waiz-back]:hover svg, .nav-pill[data-waiz-back]:focus-visible svg { transform: translateX(-2px); }
.nav-pill.is-home { margin-left: auto; gap: 6px; padding-left: 12px; }

/* The way out at the end of a long page, for someone who read to the bottom. */
.page-end {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--line);
}

@media (max-width: 899px) {
  .hdr { top: 8px; width: calc(100% - 24px); }
  .hdr-in { height: 58px; padding-inline: 12px; }
  .brand { gap: 7px; }
  .brand b { font-size: calc(16px * var(--text-scale)); white-space: nowrap; }
}
/* On a small phone Back, the logo and the controls stay; the wordmark gives way. */
@media (max-width: 430px) {
  .hdr.has-back .brand b { display: none; }
}
/* Narrower still, Home keeps its icon and its accessible name, not its label. */
@media (max-width: 360px) {
  .hdr .nav-pill.is-home { padding: 0 11px; }
  .hdr .nav-pill.is-home span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}
@media (min-width: 900px) {
  .hdr-in { height: 72px; }
}

/* --------------------------------------------------------------------------
   CARDS
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
}
.card-pad { padding: clamp(16px, 2.4vw, 24px); }

/* --------------------------------------------------------------------------
   BADGES & STATUS
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: calc(11.5px * var(--text-scale)); font-weight: 700;
  border: 1px solid var(--line); color: var(--muted); background: var(--surface-2);
}
.badge.is-ok    { color: var(--ok);     background: var(--ok-soft);     border-color: transparent; }
.badge.is-warn  { color: var(--warn);   background: var(--warn-soft);   border-color: transparent; }
.badge.is-brand { color: var(--brand);  background: var(--brand-soft);  border-color: var(--brand-line); }

.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.dot.is-live { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }

/* --------------------------------------------------------------------------
   APP CARD — the most important object on the page.
   The whole card is the target, not just the arrow.
   -------------------------------------------------------------------------- */
.app-card {
  --ac: var(--brand);
  position: relative; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              background-color var(--t-base) var(--ease);
}
/* A single soft accent bloom, clipped to the card. No permanent glow. */
.app-card::after {
  content: ""; position: absolute; top: -55%; right: -25%;
  width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ac) 26%, transparent), transparent 68%);
  opacity: .55; pointer-events: none;
  transition: opacity var(--t-base) var(--ease);
}
.app-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--ac) 42%, var(--line));
  background: var(--surface-2);
}
.app-card:hover::after { opacity: .85; }
.app-card.effect-glow { border-color: color-mix(in srgb,var(--ac) 42%,var(--line)); animation:managed-app-glow 3.8s ease-in-out infinite; }
.app-card.effect-shimmer::before { content:""; position:absolute; z-index:2; inset:-50% auto -50% -25%; width:15%; transform:rotate(18deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent); animation:card-glint 5s ease-in-out infinite; pointer-events:none; }
.app-card.effect-pulse { animation:card-pulse 3s ease-in-out infinite; }
@keyframes managed-app-glow{0%,100%{box-shadow:0 12px 28px -25px var(--ac)}50%{box-shadow:0 16px 38px -19px var(--ac)}}
.app-card[aria-disabled="true"] { cursor: not-allowed; }
.app-card[aria-disabled="true"]:hover { transform: none; background: var(--surface); }

.app-top { display: flex; align-items: center; gap: var(--sp-3); position: relative; }
.app-logo {
  width: 48px; height: 48px; border-radius: 14px; flex: none;
  object-fit: cover; background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--ac) 80%, transparent);
}
.app-name { font-size: calc(15.5px * var(--text-scale)); font-weight: 800; letter-spacing: -.015em; }
.app-tag  { color: var(--muted); font-size: calc(12.8px * var(--text-scale)); line-height: 1.45; }

.app-go {
  margin-left: auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.app-card:hover .app-go {
  background: color-mix(in srgb, var(--ac) 88%, black 6%);
  color: #fff; border-color: transparent; transform: translateX(2px);
}

.app-feats { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; position: relative; }
.app-feat {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--subtle); font-size: calc(11.5px * var(--text-scale)); font-weight: 600;
}
.app-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-top: auto; position: relative;
}
.app-countdown{margin-left:auto;color:var(--ac);font-size:11px;font-weight:850;font-variant-numeric:tabular-nums;white-space:nowrap}

/* "Coming soon" tile — visibly inert, and it says why. */
.app-card.is-soon { border-style: dashed; background: var(--surface-sunk); }
.app-card.is-soon .app-logo {
  display: grid; place-items: center; color: var(--subtle);
  background: var(--surface-2); box-shadow: none;
}

/* --------------------------------------------------------------------------
   TILE — small icon+label used by the ecosystem grid and help cards.
   -------------------------------------------------------------------------- */
.tile {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
              background-color var(--t-base) var(--ease);
}
.tile:hover { transform: translateY(-2px); border-color: var(--line-strong); background: var(--surface-2); }
.tile-ic {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); border: 1px solid var(--brand-line);
}
:root:not([data-theme="light"]) .tile-ic { color: #A8C4FF; }
.tile-ic.t-quiz     { background: rgba(59,130,246,.14);  color: #7FB0FF; border-color: rgba(59,130,246,.3); }
.tile-ic.t-games    { background: rgba(34,197,94,.14);   color: #6EE7A0; border-color: rgba(34,197,94,.3); }
.tile-ic.t-music    { background: rgba(255,77,157,.14);  color: #FF93C0; border-color: rgba(255,77,157,.3); }
.tile-ic.t-missions { background: rgba(168,85,247,.14);  color: #C89BFF; border-color: rgba(168,85,247,.3); }
.tile-ic.t-invite   { background: rgba(20,184,166,.14);  color: #5EEAD4; border-color: rgba(20,184,166,.3); }
.tile-ic.t-rewards  { background: rgba(251,191,36,.14);  color: #FFD469; border-color: rgba(251,191,36,.3); }
:root[data-theme="light"] .tile-ic.t-quiz     { color: #1D4ED8; }
:root[data-theme="light"] .tile-ic.t-games    { color: #15803D; }
:root[data-theme="light"] .tile-ic.t-music    { color: #BE185D; }
:root[data-theme="light"] .tile-ic.t-missions { color: #7E22CE; }
:root[data-theme="light"] .tile-ic.t-invite   { color: #0F766E; }
:root[data-theme="light"] .tile-ic.t-rewards  { color: #92610A; }
.tile-tx b { display: block; font-size: calc(14px * var(--text-scale)); font-weight: 700; }
.tile-tx small { display: block; color: var(--muted); font-size: calc(12.2px * var(--text-scale)); line-height: 1.45; }

/* --------------------------------------------------------------------------
   SEGMENTED CONTROL / TABS
   -------------------------------------------------------------------------- */
.seg {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--surface-sunk); border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.seg button {
  min-height: 36px; padding: 0 var(--sp-4); border-radius: var(--r-pill);
  font-size: calc(13px * var(--text-scale)); font-weight: 700; color: var(--muted);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.seg button:hover { color: var(--text); }
.seg button[aria-selected="true"] {
  background: var(--brand-solid); color: var(--brand-ink); box-shadow: var(--sh-1);
}

/* --------------------------------------------------------------------------
   ACTIVITY ROWS
   -------------------------------------------------------------------------- */
.act-list { display: flex; flex-direction: column; }
.act-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.act-row:last-child { border-bottom: 0; }
.act-ic {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; font-weight: 800;
  font-size: calc(12.5px * var(--text-scale));
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2);
  overflow: hidden;
}
.act-ic img { width: 100%; height: 100%; object-fit: cover; }
.act-main { flex: 1; min-width: 0; }
.act-name {
  font-size: calc(13.5px * var(--text-scale)); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.act-sub { color: var(--subtle); font-size: calc(11.8px * var(--text-scale)); }
.act-val { font-weight: 800; font-size: calc(13.5px * var(--text-scale)); color: var(--ok); white-space: nowrap; }
.act-time { color: var(--subtle); font-size: calc(11.5px * var(--text-scale)); white-space: nowrap; min-width: 68px; text-align: right; }
.act-rank {
  width: 26px; height: 26px; border-radius: 9px; flex: none; display: grid; place-items: center;
  font-size: calc(11.5px * var(--text-scale)); font-weight: 800;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
}
.act-rank.r1 { background: rgba(251,191,36,.16); color: #FFD469; border-color: rgba(251,191,36,.4); }
.act-rank.r2 { background: rgba(203,213,225,.14); color: #D6DEEC; border-color: rgba(203,213,225,.34); }
.act-rank.r3 { background: rgba(217,119,6,.16); color: #F0B168; border-color: rgba(217,119,6,.38); }
:root[data-theme="light"] .act-rank.r1 { color: #92610A; }
:root[data-theme="light"] .act-rank.r2 { color: #475569; }
:root[data-theme="light"] .act-rank.r3 { color: #9A3412; }

/* Empty and error states — polished, and never a fabricated value. */
.state {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: var(--sp-8) var(--sp-4); text-align: center; color: var(--muted);
  font-size: calc(13.5px * var(--text-scale));
}
.state .ic { color: var(--subtle); }

/* Skeleton — only ever shown where live data is genuinely arriving. */
.skel { display: flex; flex-direction: column; gap: 14px; padding: 6px 0; }
.skel i {
  display: block; height: 40px; border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-hover) 50%, var(--surface-2) 75%);
  background-size: 240% 100%; animation: skel 1.3s var(--ease) infinite;
}
@keyframes skel { from { background-position: 140% 0; } to { background-position: -40% 0; } }

/* --------------------------------------------------------------------------
   DIALOG — native <dialog>, so Esc, the top layer and inertness are the
   browser's job rather than a thousand lines of focus-trap JavaScript.
   -------------------------------------------------------------------------- */
dialog.wz-dialog {
  padding: 0; border: 0; color: var(--text); background: transparent;
  max-width: min(640px, calc(100vw - 32px)); width: 100%;
  max-height: min(86vh, 780px);
}
dialog.wz-dialog::backdrop {
  background: rgba(4,7,14,.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
:root[data-theme="light"] dialog.wz-dialog::backdrop { background: rgba(15,23,42,.42); }

.wz-panel {
  display: flex; flex-direction: column; max-height: inherit;
  background: var(--bg-elev); border: 1px solid var(--line-strong);
  border-radius: var(--r-xl); box-shadow: var(--sh-3); overflow: hidden;
}
.wz-head {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.wz-head h2 { font-size: calc(18px * var(--text-scale)); }
.wz-head p  { color: var(--muted); font-size: calc(13px * var(--text-scale)); margin-top: 3px; }
.wz-head .icon-btn { margin-left: auto; }
.wz-body { padding: var(--sp-5); overflow-y: auto; overscroll-behavior: contain; }
.wz-foot {
  padding: var(--sp-3) var(--sp-5) var(--sp-5);
  color: var(--subtle); font-size: calc(12.2px * var(--text-scale));
  display: flex; align-items: center; gap: 8px;
}

dialog.wz-dialog[open] { animation: dlg-in var(--t-slow) var(--ease); }
dialog.wz-dialog[open]::backdrop { animation: fade-in var(--t-base) var(--ease); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes fade-in { from { opacity: 0; } }

/* Mobile: the same dialog becomes a bottom sheet. */
@media (max-width: 640px) {
  dialog.wz-dialog {
    max-width: 100%; width: 100%; max-height: 92vh;
    margin: 0 auto; position: fixed; inset: auto 0 0 0;
  }
  .wz-panel {
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-bottom: 0; max-height: 92vh;
    padding-bottom: env(safe-area-inset-bottom);
  }
  dialog.wz-dialog[open] { animation: sheet-in var(--t-slow) var(--ease); }
  @keyframes sheet-in { from { transform: translateY(100%); } }
  .wz-grip {
    width: 40px; height: 4px; border-radius: 999px; background: var(--line-strong);
    margin: 10px auto 0;
  }
}
@media (min-width: 641px) { .wz-grip { display: none; } }

/* --------------------------------------------------------------------------
   FIELDS
   -------------------------------------------------------------------------- */
.field {
  display: flex; align-items: center; gap: 10px;
  padding: 0 var(--sp-4); min-height: 44px;
  background: var(--surface-sunk); border: 1px solid var(--line);
  border-radius: var(--r-pill); color: var(--muted);
}
.field:focus-within { border-color: var(--line-focus); }
.field input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: var(--text); font-size: calc(14px * var(--text-scale));
}
.field input::placeholder { color: var(--subtle); }

/* Switch — a real checkbox underneath, so it is keyboard and SR friendly. */
.switch { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 44px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 46px; height: 27px; border-radius: 999px; flex: none;
  background: var(--surface-hover); border: 1px solid var(--line);
  position: relative; transition: background-color var(--t-fast) var(--ease);
}
.switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 21px; height: 21px; border-radius: 50%; background: var(--muted);
  transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.switch input:checked + .track { background: var(--brand-solid); border-color: transparent; }
.switch input:checked + .track::after { transform: translateX(19px); background: #fff; }
.switch input:focus-visible + .track { outline: 3px solid var(--line-focus); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   ACCORDION — native <details>, styled. No accordion library.
   -------------------------------------------------------------------------- */
.faq-item {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden;
}
.faq-item + .faq-item { margin-top: 10px; }
.faq-item summary {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); min-height: 44px;
  font-weight: 700; font-size: calc(14.5px * var(--text-scale));
  cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; margin-left: auto; flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-fast) var(--ease);
}
.faq-item[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq-item summary:hover { background: var(--surface-2); }
.faq-item .faq-a {
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--muted); font-size: calc(13.8px * var(--text-scale)); line-height: 1.65;
}

/* --------------------------------------------------------------------------
   POPOVER (language / preferences on desktop)
   -------------------------------------------------------------------------- */
.pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  min-width: 210px; padding: 8px;
  background: var(--bg-elev); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); box-shadow: var(--sh-3);
}
.pop[hidden] { display: none; }
.pop-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 40px; padding: 0 12px; border-radius: var(--r-xs);
  font-size: calc(13.5px * var(--text-scale)); font-weight: 600; color: var(--text-2);
  transition: background-color var(--t-fast) var(--ease);
}
.pop-item:hover { background: var(--surface-hover); color: var(--text); }
.pop-item[aria-current="true"] { color: var(--brand); font-weight: 800; }
.pop-item[aria-current="true"] .tick { margin-left: auto; }

/* A locked app card: it stays on the page, keeps its face, and says when it opens. */
.app-card.is-locked{border-color:color-mix(in srgb,var(--ac) 26%,var(--line))}
.app-card.is-locked .app-logo{filter:grayscale(.55) brightness(.9)}
.app-card.is-locked::after{opacity:.3}
.app-card.is-locked:hover{transform:none}
.app-card[data-status="maintenance"]{background:linear-gradient(170deg,color-mix(in srgb,var(--warn,#F2BD55) 9%,var(--surface)),var(--surface) 62%)}
.app-card[data-status="coming_soon"]{border-style:dashed;background:linear-gradient(170deg,color-mix(in srgb,var(--ac) 8%,var(--surface)),var(--surface) 62%)}
.app-lock{
  position:absolute;top:10px;right:10px;z-index:3;
  padding:3px 9px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--ac) 40%,var(--line));
  background:color-mix(in srgb,var(--ac) 14%,var(--surface));
  color:var(--text-2);font-size:9.5px;font-weight:850;letter-spacing:.07em;text-transform:uppercase;
}
.app-card[data-status="maintenance"] .app-lock{
  border-color:color-mix(in srgb,var(--warn,#F2BD55) 45%,var(--line));
  background:color-mix(in srgb,var(--warn,#F2BD55) 15%,var(--surface));
}
.app-countdown.is-quiet{color:var(--subtle);font-weight:700}