/* Store's own screens, built from Market's tokens and shapes. */
#header { position: sticky; top: 0; z-index: 30; padding: var(--space-4) var(--space-4) 0; pointer-events: none; }
#header a, #header button { pointer-events: auto; }
#view { flex: 1; }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 90; pointer-events: none; }
svg.i { display: block; flex: none; }
.muted { color: var(--color-text-muted); }
.hint { font-size: var(--text-sm); }
.mono { font-family: Consolas, "Cascadia Mono", monospace; overflow-wrap: anywhere; }
[hidden] { display: none !important; }

.wrap { position: relative; width: 100%; max-width: var(--container); margin: 0 auto; padding: var(--space-8) var(--space-4) var(--space-16); }
.page { animation: page-in 320ms cubic-bezier(0.22, 1, 0.32, 1); }
@keyframes page-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- header ---------- */
.solid { background: var(--color-bg); }
.hdr-desktop { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.hdr-mobile { display: none; align-items: center; justify-content: space-between; gap: var(--space-2); }
.hdr-right, .hdr-mobile-right { display: flex; align-items: center; gap: var(--space-2); }
.brand { display: inline-flex; align-items: center; min-height: 48px; padding: 0.5rem 1rem; border-radius: var(--radius-full); white-space: nowrap; }
.brand-name { font-size: 1.35rem; line-height: 1; color: var(--color-cta); }
.brand-tag { margin-left: 0.75rem; font-size: 0.75rem; color: var(--color-text-muted); }
.nav-pill { display: flex; align-items: center; padding: 4px; border-radius: var(--radius-full); }
.nav-link { position: relative; display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--radius-full); transition: background 160ms, color 160ms, transform 160ms; }
.nav-link:hover { background: var(--color-hover); transform: translateY(-1px); }
.nav-link.is-active { background: var(--color-cta); color: var(--color-cta-text); }
.bell-count { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #d92d3a; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.bell-wrap { display: inline-flex; border-radius: var(--radius-full); }
.bell-wrap .nav-link { width: 42px; height: 42px; }
.icon-btn { position: relative; overflow: hidden; display: inline-flex; width: 44px; height: 44px; flex: none; align-items: center; justify-content: center; border-radius: var(--radius-full); transition: background 160ms, transform 120ms; }
.icon-btn:hover { background: var(--color-hover); }
.icon-btn:active { transform: scale(0.9); }
.icon-btn:disabled { opacity: 0.35; pointer-events: none; }
.lang-cycle { font-size: var(--text-xs); font-weight: 700; }
.switch { display: inline-flex; align-items: center; padding: 2px; border-radius: var(--radius-full); }
.switch-btn { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: var(--radius-full); color: var(--color-text-muted); transition: background 160ms, color 160ms; }
.switch-btn:hover { background: var(--color-hover); }
.switch-btn--text { font-size: var(--text-sm); font-weight: 500; }
.switch-btn.is-on { background: var(--color-cta); color: var(--color-cta-text); }
.level-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 14px 4px 4px; border-radius: var(--radius-full); transition: transform 160ms; }
.level-chip:hover { transform: translateY(-1px); }
.level-num { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-text); font-size: 1.25rem; }
.level-bar { display: block; width: 56px; height: 6px; border-radius: 3px; background: var(--color-hover); overflow: hidden; }
.level-bar span { display: block; height: 100%; border-radius: 3px; background: var(--color-accent); transition: width 500ms cubic-bezier(0.22, 1, 0.32, 1); }

#tabbar { display: none; }
.tabbar { display: flex; justify-content: space-around; margin: 0 auto; padding: 5px; border-radius: 26px; background: var(--color-glass-strong); }
.tab { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px; border-radius: 21px; font-size: 0.6875rem; color: var(--color-text-muted); transition: background 160ms, color 160ms, transform 120ms; }
.tab:active { transform: scale(0.94); }
.tab.is-active { background: var(--color-cta); color: var(--color-cta-text); }
.tab span { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 2px; }

.only-mobile-flex { display: none; }

/* ---------- buttons, forms ---------- */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: var(--control-height); padding: 0 1.25rem; border-radius: var(--radius-full); background: var(--color-cta); color: var(--color-cta-text); font-weight: 500; white-space: nowrap; transition: background 160ms, transform 120ms, box-shadow 200ms, opacity 160ms; -webkit-tap-highlight-color: transparent; }
.btn:hover { background: var(--color-cta-hover); transform: translateY(-1px); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; pointer-events: none; }
.btn--secondary { background: var(--color-glass-pill); border: 1px solid var(--color-glass-pill-border); color: var(--color-text); box-shadow: var(--shadow-sm); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
.btn--secondary:hover { background: var(--color-hover); }
.btn--ghost { background: transparent; color: var(--color-text); }
.btn--ghost:hover { background: var(--color-hover); }
.btn--danger { background: var(--color-danger); color: var(--color-cta-text); }
.btn--danger:hover { background: var(--color-danger); opacity: 0.9; }
.btn--danger-text { color: var(--color-danger); }
.btn--sm { min-height: var(--touch-min); padding: 0 0.85rem; font-size: var(--text-sm); }
.btn--lg { min-height: var(--control-height-lg); padding: 0 1.75rem; font-size: var(--text-md); }
.btn--full { width: 100%; }
.btn--glow { box-shadow: 0 8px 28px color-mix(in srgb, var(--app, var(--color-accent)) 45%, transparent); }
.btn--glow:hover { box-shadow: 0 12px 36px color-mix(in srgb, var(--app, var(--color-accent)) 65%, transparent); }
.btn.is-busy { color: transparent; }
.btn.is-busy::after { content: ""; position: absolute; width: 20px; height: 20px; border: 2px solid var(--color-cta-text); border-right-color: transparent; border-radius: 50%; animation: spin 700ms linear infinite; }
.btn--secondary.is-busy::after, .btn--ghost.is-busy::after { border-color: var(--color-text); border-right-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
.ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: 0.22; transform: scale(0); pointer-events: none; animation: ripple 520ms ease-out forwards; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

.input, .select, .textarea { width: 100%; border: 1px solid var(--color-border); background: var(--color-control); color: var(--color-text); }
.input { height: var(--control-height); padding: 0 1rem; border-radius: var(--radius-full); }
.input[type=color] { padding: 4px 8px; }
.select { height: var(--control-height); padding: 0 1rem; border-radius: var(--radius-full); }
.select option { color: #161d20; background: #fff; }
.select.glass-pill { background: var(--color-glass-pill); border-color: var(--color-glass-pill-border); width: auto; }
.textarea { padding: 0.75rem 1rem; border-radius: var(--radius-md); resize: vertical; line-height: var(--leading-body); }
.input::placeholder, .textarea::placeholder { color: var(--color-text-muted); }
.input:disabled { opacity: 0.6; }
.field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.field-label { display: block; font-size: var(--text-sm); font-weight: 500; }
.field small { font-size: var(--text-xs); }
.input-wrap { position: relative; display: block; }
.input-wrap .input { padding-right: 3rem; }
.input-eye { position: absolute; top: 0; right: 4px; display: inline-flex; width: 44px; height: 48px; align-items: center; justify-content: center; color: var(--color-text-muted); }
.stack-form { display: flex; flex-direction: column; gap: var(--space-4); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.form-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fieldset { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.fieldset legend { padding: 0 0.5rem; font-weight: 600; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.row--end { justify-content: flex-end; }
.row--center { justify-content: center; }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.check-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0.35rem 0 var(--space-4); }
.check { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--touch-min); padding: 0 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-full); cursor: pointer; }
.check input { accent-color: var(--color-accent); width: 18px; height: 18px; }
.toggle { display: flex; align-items: center; gap: 0.75rem; min-height: var(--touch-min); margin: 0.35rem 0; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; }
.toggle-track { position: relative; flex: none; width: 46px; height: 26px; border-radius: 13px; background: var(--color-hover); border: 1px solid var(--color-border); transition: background 180ms; }
.toggle-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-text); transition: transform 180ms cubic-bezier(0.22, 1, 0.32, 1); }
.toggle input:checked + .toggle-track { background: var(--color-accent); }
.toggle input:checked + .toggle-track::after { transform: translateX(20px); background: #fff; }
.toggle input:focus-visible + .toggle-track { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.toggle-text { display: flex; flex-direction: column; }
.toggle-text small { font-size: var(--text-xs); }

.badge { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 10px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 500; background: var(--color-glass-pill); border: 1px solid var(--color-glass-pill-border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.badge--solid { background: var(--color-cta); color: var(--color-cta-text); border-color: transparent; }
.status { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; background: var(--color-surface-muted); }
.status--paid, .status--new, .status--draft { color: var(--color-warning); }
.status--approved, .status--published { color: var(--color-success); }
.status--rejected { color: var(--color-danger); }
.status--cancelled, .status--archived { color: var(--color-text-muted); }
.chips, .tabs { display: flex; gap: var(--space-2); margin: var(--space-4) 0 var(--space-6); overflow-x: auto; padding: 4px 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }
.tabs--inner { margin: 0 0 var(--space-4); }
.chip { position: relative; overflow: hidden; display: inline-flex; flex: none; align-items: center; gap: 0.4rem; min-height: var(--touch-min); padding: 0 1rem; border-radius: var(--radius-full); background: var(--color-glass-pill); border: 1px solid var(--color-glass-pill-border); font-size: var(--text-sm); white-space: nowrap; transition: background 160ms, color 160ms, transform 120ms; }
.chip:hover { background: var(--color-hover); }
.chip:active { transform: scale(0.96); }
.chip.is-on { background: var(--color-cta); color: var(--color-cta-text); }
.chip-count { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #d92d3a; color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; }
.notice { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; margin-bottom: var(--space-4); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-warning) 16%, transparent); font-size: var(--text-sm); }
.notice--link { justify-content: space-between; }
.notice--link span { flex: 1; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-12) var(--space-6); border-radius: var(--radius-lg); text-align: center; }

/* ---------- headings ---------- */
.page-title { margin: 0; font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 600; line-height: 1; color: var(--color-cta); }
.section-title { margin: 0; font-size: var(--text-xl); font-weight: 600; color: var(--color-cta); }
.panel-title { margin: 0 0 var(--space-3); font-size: var(--text-md); font-weight: 600; }
.page-head, .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.section-head { align-items: center; margin: var(--space-10) 0 var(--space-5); }
.back-link { display: inline-flex; align-items: center; gap: 0.4rem; min-height: var(--touch-min); margin-bottom: var(--space-2); color: var(--color-text-muted); }
.back-link:hover { color: var(--color-text); }
.block { padding: var(--space-6); border-radius: var(--radius-lg); }
.reveal { animation: reveal 460ms cubic-bezier(0.22, 1, 0.32, 1) backwards; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes reveal { from { opacity: 0; transform: translateY(22px) scale(0.97); } to { opacity: 1; transform: none; } }

/* ---------- home ---------- */
.ghost-brand { position: absolute; left: 50%; top: 0.5rem; z-index: 0; width: 120%; transform: translateX(-50%); margin: 0; text-align: center; font-size: clamp(4.5rem, 18vw, 11rem); line-height: 0.8; color: var(--color-on-media-muted); pointer-events: none; }
.hero { position: relative; z-index: 1; overflow: hidden; padding: var(--space-10); border-radius: var(--radius-lg); background-color: var(--color-bg); background-image: linear-gradient(180deg, var(--color-bg-wash-start), var(--color-bg-wash-mid) 58%, var(--color-bg-wash-end)), url("/img/atmosphere.svg"); background-size: cover; background-position: center top; border: 1px solid var(--color-product-panel-border); box-shadow: var(--shadow-md); }
html.theme-light .hero { background-image: linear-gradient(180deg, var(--color-bg-wash-start), var(--color-bg-wash-mid) 58%, var(--color-bg-wash-end)), url("/img/atmosphere-light.svg"); }
.particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.eyebrow { position: relative; margin: 0; font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); }
.hero-title { position: relative; max-width: 16ch; margin: var(--space-4) 0 0; font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 600; line-height: 0.95; color: var(--color-cta); }
.hero-sub { position: relative; max-width: 42rem; margin-top: var(--space-5); font-size: var(--text-md); line-height: var(--leading-relaxed); }
.hero-actions { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.wrap.home { overflow-x: clip; }
.home .vitrine-page { margin-top: var(--space-6); }
.home .vitrine-scene { touch-action: pan-y; }
.vitrine-orbit.is-selected { opacity: 0 !important; }
.vitrine-hero-spin { position: relative; }
.vitrine-hero, .vitrine-orbit { perspective: 900px; }
.vitrine-caption strong { font-family: var(--font-sans); }
.vitrine-arrow { transition: transform 140ms, background 160ms; }
.vitrine-arrow:hover { background: var(--color-hover); }

.tile { position: relative; display: inline-flex; width: 52px; height: 52px; flex: none; align-items: center; justify-content: center; overflow: hidden; border-radius: 26%; background: linear-gradient(145deg, color-mix(in srgb, var(--app) 85%, #fff), color-mix(in srgb, var(--app) 70%, #000)); box-shadow: 0 6px 16px rgb(0 0 0 / 0.26), inset 0 1px 0 rgb(255 255 255 / 0.3); }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-emoji { font-size: 1.6rem; line-height: 1; }
.tile--sm { width: 44px; height: 44px; }
.tile--md { width: 72px; height: 72px; }
.tile--md .tile-emoji { font-size: 2.2rem; }
.tile--lg { width: 112px; height: 112px; }
.tile--lg .tile-emoji { font-size: 3.5rem; }
.tile--orbit { position: absolute; left: 6%; bottom: 8%; width: 88%; height: auto; aspect-ratio: 1; box-shadow: 0 1rem 1.2rem rgb(0 0 0 / 0.34), inset 0 1px 0 rgb(255 255 255 / 0.3); }
.tile--orbit .tile-emoji { font-size: clamp(2.4rem, 7vw, 4rem); }
.tile--hero { position: absolute; left: 12%; bottom: 13%; width: 76%; height: auto; aspect-ratio: 1; box-shadow: 0 1.6rem 2.2rem rgb(0 0 0 / 0.45), inset 0 2px 0 rgb(255 255 255 / 0.35); }
.tile--hero .tile-emoji { font-size: clamp(5rem, 14vw, 8.5rem); }
.vitrine-orbit img, .vitrine-hero img { height: 100%; object-fit: cover; }

/* ---------- catalog cards ---------- */
.grid { display: grid; gap: var(--space-5); }
.grid--1 { grid-template-columns: minmax(0, 1fr); max-width: 36rem; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-app { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--radius-lg); transform-style: preserve-3d; transition: transform 200ms ease-out, box-shadow 220ms; will-change: transform; }
.card-app:hover { box-shadow: 0 24px 50px rgb(0 0 0 / 0.34), 0 0 0 1px color-mix(in srgb, var(--app) 55%, transparent), 0 0 34px color-mix(in srgb, var(--app) 26%, transparent); }
.card-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(145deg, color-mix(in srgb, var(--app) 42%, var(--color-media-placeholder)), var(--color-media-placeholder)); }
.card-media > img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top; transition: transform 500ms cubic-bezier(0.22, 1, 0.32, 1); }
.card-app:hover .card-media > img { transform: scale(1.06); }
.card-media-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.card-badges { position: absolute; left: 12px; top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.card-badges .badge:not(.badge--solid) { background: var(--color-glass-dark); }
.card-glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgb(255 255 255 / 0.26), transparent 55%); transition: opacity 200ms; }
.card-app:hover .card-glare { opacity: 1; }
.card-body { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.card-head { display: flex; align-items: center; gap: var(--space-3); }
.card-title-wrap { min-width: 0; }
.card-title { margin: 0; font-size: var(--text-md); font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card-tagline { font-size: var(--text-sm); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card-spacer { flex: 1; }
.card-social { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.platforms { display: inline-flex; gap: 6px; margin-top: 3px; color: var(--color-text-muted); }
.price { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.price small { margin-left: 3px; font-size: var(--text-xs); font-weight: 400; color: var(--color-text-muted); }
.price--lg { font-size: var(--text-xl); }
.rating { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-sm); white-space: nowrap; }
.stars { position: relative; display: inline-block; font-size: 0.95rem; line-height: 1; letter-spacing: 1px; white-space: nowrap; }
.stars-bg { color: var(--color-hover); }
html:not(.theme-light) .stars-bg { color: rgb(255 255 255 / 0.2); }
.stars-fill { position: absolute; left: 0; top: 0; overflow: hidden; color: #e8b64c; }
.like-btn { display: inline-flex; align-items: center; gap: 5px; min-height: var(--touch-min); min-width: var(--touch-min); justify-content: center; padding: 0 10px; border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 500; transition: background 160ms, color 160ms; }
.like-btn:hover { background: var(--color-hover); }
.like-btn.is-on { color: #e5566a; }
.like-btn.is-on svg { fill: currentColor; }
.pop { animation: pop 340ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }

.skeleton-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.skeleton { height: 18rem; border-radius: var(--radius-lg); background: linear-gradient(100deg, var(--color-surface-muted) 30%, var(--color-hover) 50%, var(--color-surface-muted) 70%); background-size: 220% 100%; animation: shimmer 1.1s linear infinite; }
@keyframes shimmer { from { background-position: 180% 0; } to { background-position: -40% 0; } }

.pass-banner { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); margin-top: var(--space-10); padding: var(--space-8); overflow: hidden; border-radius: var(--radius-lg); }
.pass-glow { position: absolute; right: -8%; top: -60%; width: 30rem; height: 30rem; border-radius: 50%; background: radial-gradient(circle, rgb(232 182 76 / 0.28), transparent 65%); pointer-events: none; animation: glow 4s ease-in-out infinite alternate; }
@keyframes glow { to { transform: scale(1.2); opacity: 0.7; } }
.pass-copy, .pass-cta { position: relative; }
.pass-title { font-size: var(--text-2xl); margin: 0.5rem 0 0.25rem; }
.pass-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.how-title { margin: var(--space-10) 0 var(--space-5); }
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.how-step { position: relative; padding: var(--space-6); overflow: hidden; border-radius: var(--radius-lg); transition: transform 200ms; }
.how-step:hover { transform: translateY(-4px); }
.how-step h3 { margin: var(--space-3) 0 0.25rem; font-size: var(--text-md); }
.how-step p { font-size: var(--text-sm); }
.how-num { position: absolute; right: 12px; top: -8px; font-size: 5rem; line-height: 1.2; color: var(--color-hover); }

/* ---------- filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.search { display: flex; flex: 1; min-width: 220px; align-items: center; gap: 0.6rem; height: var(--control-height); padding: 0 1rem; border-radius: var(--radius-full); }
.search input { flex: 1; width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; }
.search:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- application page ---------- */
.app-layout { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--space-5); align-items: start; }
.gallery { display: flex; flex-direction: column; gap: var(--space-3); }
.gallery-main { position: relative; display: block; width: 100%; height: min(70vh, 38rem); padding: 0; overflow: hidden; border-radius: var(--radius-lg); cursor: zoom-in; }
.gallery-blur { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(34px) saturate(1.3); opacity: 0.55; }
.gallery-img { position: relative; width: 100%; height: 100%; display: block; object-fit: contain; }
.flip { animation: flip 300ms cubic-bezier(0.22, 1, 0.32, 1); }
@keyframes flip { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.gallery-expand { position: absolute; right: 12px; bottom: 12px; display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; }
.gallery-empty { display: flex; min-height: 22rem; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); border-radius: var(--radius-lg); }
.thumbs { display: flex; gap: 8px; align-self: flex-start; max-width: 100%; padding: 8px; overflow-x: auto; border-radius: 1.5rem; scrollbar-width: none; }
.thumb { display: block; width: 64px; height: 64px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 1rem; transition: border-color 160ms, transform 160ms; }
.thumb:hover { transform: translateY(-2px); }
.thumb.is-on { border-color: var(--color-cta); }
.thumb img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top; }
.buy-box { position: sticky; top: calc(var(--header-height) + 8px); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-lg); }
.buy-head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.buy-title { min-width: 0; }
.app-name { margin: 0; font-size: var(--text-lg); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.buy-divider { height: 1px; background: var(--color-border); margin: 2px 0; }
.access-status { display: flex; align-items: center; gap: 0.5rem; color: var(--color-success); font-weight: 500; }
.file-btn { height: auto; min-height: var(--control-height); white-space: normal; }
.file-btn small { font-size: var(--text-xs); white-space: nowrap; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.plan { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0.7rem 0.8rem; overflow: hidden; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); text-align: left; transition: border-color 160ms, background 160ms, transform 150ms, box-shadow 200ms; }
.plan:hover { transform: translateY(-2px); }
.plan.is-on { border-color: var(--app, var(--color-accent)); background: color-mix(in srgb, var(--app, var(--color-accent)) 16%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--app, var(--color-accent)) 30%, transparent); }
.plan-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 6px; font-size: var(--text-sm); }
.plan-save { padding: 0 6px; border-radius: 8px; background: var(--color-accent); color: var(--color-accent-text); font-size: 0.6875rem; font-weight: 700; line-height: 18px; white-space: nowrap; }
.plan-price { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.01em; }
.plan-hint { font-size: var(--text-xs); line-height: 1.3; }
.pass-link { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: var(--touch-min); font-size: var(--text-sm); color: var(--color-warning); }
.pass-link:hover { text-decoration: underline; }
.app-sections { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--space-5); align-items: start; margin-top: var(--space-5); }
.app-main-col { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.rich { margin-top: var(--space-3); overflow-wrap: anywhere; }
.rich p + p, .rich p + ul, .rich ul + p { margin-top: var(--space-3); }
.rich-list { padding-left: 1.2rem; list-style: disc; }
.info { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; margin: var(--space-3) 0 0; font-size: var(--text-sm); }
.info dt { color: var(--color-text-muted); }
.info dd { margin: 0; text-align: right; }
.rating-summary { display: flex; gap: var(--space-6); align-items: center; margin: var(--space-3) 0 var(--space-5); }
.rating-big { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: var(--text-sm); white-space: nowrap; }
.rating-big b { font-size: 3.4rem; font-weight: 600; line-height: 1; }
.rating-bars { flex: 1; font-size: var(--text-xs); }
.rating-bars li { display: flex; align-items: center; gap: 8px; }
.rating-bars li > span:first-child, .rating-bars li > span:last-child { width: 1.4em; text-align: center; }
.rbar { flex: 1; height: 6px; border-radius: 3px; background: var(--color-hover); overflow: hidden; }
.rbar span { display: block; height: 100%; border-radius: 3px; background: #e8b64c; }
.review-form { display: flex; flex-direction: column; gap: var(--space-2); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }
.star-input { display: flex; gap: 2px; }
.star-btn { display: inline-flex; width: var(--touch-min); height: var(--touch-min); align-items: center; justify-content: center; font-size: 1.9rem; line-height: 1; color: var(--color-hover); transition: color 120ms, transform 120ms; }
html:not(.theme-light) .star-btn { color: rgb(255 255 255 / 0.2); }
.star-btn:hover { transform: scale(1.15); }
html .star-btn.is-on { color: #e8b64c; }
.reviews { margin-top: var(--space-4); }
.review { padding: var(--space-3) 0; border-top: 1px solid var(--color-border); overflow-wrap: anywhere; }
.review:first-child { border-top: 0; }
.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.review-date { margin-left: auto; font-size: var(--text-xs); }
.avatar { position: relative; display: inline-flex; width: 36px; height: 36px; flex: none; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-text); font-weight: 600; }
.avatar--lg { width: 76px; height: 76px; font-size: 2rem; }
.avatar-level { position: absolute; right: -6px; bottom: -6px; display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border: 2px solid var(--color-bg); border-radius: 50%; background: #e8b64c; color: #161d20; font-size: 1.05rem; }

/* ---------- checkout and order ---------- */
.checkout-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: start; margin-top: var(--space-5); }
.checkout .panel-title:not(:first-child) { margin-top: var(--space-5); }
.methods { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.method { display: flex; align-items: center; gap: var(--space-3); padding: 0.7rem 0.9rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); text-align: left; transition: border-color 160ms, background 160ms; }
.method:hover { background: var(--color-hover); }
.method.is-on { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.method-ic { display: inline-flex; width: 40px; height: 40px; flex: none; align-items: center; justify-content: center; border-radius: 12px; background: var(--color-surface-muted); font-size: 1.2rem; }
.method-text { display: flex; flex: 1; min-width: 0; flex-direction: column; line-height: 1.3; }
.method-text small { font-size: var(--text-xs); }
.radio { width: 20px; height: 20px; flex: none; border: 2px solid var(--color-border); border-radius: 50%; transition: border 140ms; }
.method.is-on .radio { border: 6px solid var(--color-accent); }
.promo { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.promo .input { flex: 1; min-width: 0; }
.total-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.total-row s { font-size: var(--text-sm); font-weight: 400; }
.order-sub { margin-top: var(--space-2); }
.stepper { display: flex; margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.stepper li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--color-text-muted); }
.stepper li:not(:first-child)::before { content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px; background: var(--color-border); }
.stepper li.is-done:not(:first-child)::before, .stepper li.is-now:not(:first-child)::before { background: var(--color-accent); }
.step-dot { position: relative; z-index: 1; display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-order-card); border: 2px solid var(--color-border); font-weight: 600; }
.is-done .step-dot { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-text); }
.is-now .step-dot { border-color: var(--color-accent); color: var(--color-text); animation: pulse 1.6s infinite; }
.is-now, .is-done { color: var(--color-text); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 60%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
.method-name { display: flex; align-items: center; gap: 0.5rem; margin-bottom: var(--space-3); }
.copy-row { margin-bottom: var(--space-3); }
.copy-box { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: 0.3rem; padding: 2px 2px 2px 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-control); }
.copy-box code { min-width: 0; font-family: Consolas, "Cascadia Mono", monospace; font-size: var(--text-sm); overflow-wrap: anywhere; user-select: all; }
.copy-box--big code { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 700; }
.plain-value { margin-top: 0.15rem; }
.qr { width: 200px; margin: var(--space-3) auto; padding: 8px; border-radius: var(--radius-md); background: #fff; }
.qr svg { display: block; width: 100%; height: auto; }
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; min-height: 96px; padding: var(--space-3); border: 1.5px dashed var(--color-border); border-radius: var(--radius-md); color: var(--color-text-muted); font-size: var(--text-sm); text-align: center; cursor: pointer; transition: border-color 160ms, background 160ms; overflow-wrap: anywhere; }
.drop:hover { border-color: var(--color-accent); background: var(--color-hover); }
.result { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-top: var(--space-6); text-align: center; }
.result-ic { display: inline-flex; width: 84px; height: 84px; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-text); animation: pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.result-ic--bad { background: var(--color-danger); }
.pulse-ring { display: inline-flex; width: 84px; height: 84px; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--color-accent); animation: pulse 1.6s infinite; }

/* ---------- auth ---------- */
.auth { display: flex; justify-content: center; }
.auth-card { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; max-width: 28rem; padding: var(--space-8); border-radius: var(--radius-lg); }
.auth-icon img { display: block; border-radius: 26%; }
.auth-switch { text-align: center; text-decoration: underline; text-underline-offset: 3px; font-size: var(--text-sm); min-height: var(--touch-min); display: flex; align-items: center; justify-content: center; }

/* ---------- account ---------- */
.profile-hero { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); }
.profile-text { flex: 1; min-width: 0; }
.profile-text .page-title { font-size: clamp(1.8rem, 4vw, 2.6rem); overflow-wrap: anywhere; }
.xp-track { height: 10px; margin: 0.6rem 0 0.35rem; overflow: hidden; border-radius: 5px; background: var(--color-hover); }
.xp-track span { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--color-accent), #e8b64c); transition: width 700ms cubic-bezier(0.22, 1, 0.32, 1); }
.lib-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.lib-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); transition: transform 160ms; }
.lib-item:hover { transform: translateY(-2px); }
.lib-text { display: flex; flex: 1; min-width: 0; flex-direction: column; font-size: var(--text-sm); }
.lib-head { margin: var(--space-8) 0 var(--space-4); }
.pass-owned { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4); margin-bottom: var(--space-3); border-radius: var(--radius-md); color: #e8b64c; }
.pass-owned .muted { font-size: var(--text-sm); }
.order-list, .note-list, .admin-list, .admin-orders, .admin-users { display: flex; flex-direction: column; gap: var(--space-3); }
.order-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); transition: transform 160ms; }
.order-row:hover { transform: translateX(3px); }
.order-main { display: flex; flex-direction: column; min-width: 0; }
.order-main .muted { font-size: var(--text-xs); }
.order-side { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 4px; }
.note { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); overflow-wrap: anywhere; }
.note.is-new { border-color: var(--color-accent); }
.note span { flex: 1; min-width: 0; }
.note time { flex: none; font-size: var(--text-xs); }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: var(--space-3); }
.ach { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--space-5) var(--space-3); border-radius: var(--radius-md); text-align: center; font-size: var(--text-sm); opacity: 0.55; }
.ach.is-done { opacity: 1; border-color: #e8b64c; }
.ach-ic { display: inline-flex; width: 56px; height: 56px; margin-bottom: 4px; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-hover); }
.ach.is-done .ach-ic { background: #e8b64c; color: #161d20; }
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }

/* ---------- modal, toast ---------- */
.modal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: var(--color-overlay); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fade 160ms; }
.modal.is-out { opacity: 0; transition: opacity 160ms; }
@keyframes fade { from { opacity: 0; } }
.modal-card { position: relative; width: 100%; max-width: 30rem; max-height: calc(100dvh - 2rem); overflow-y: auto; padding: var(--space-6); border-radius: var(--radius-lg); animation: modal-in 260ms cubic-bezier(0.34, 1.4, 0.64, 1); }
.modal-card--wide { max-width: min(62rem, 100%); padding: var(--space-3); }
@keyframes modal-in { from { transform: scale(0.92) translateY(10px); } }
.modal-x { position: absolute; right: 8px; top: 8px; z-index: 40; }
.modal-text { margin: var(--space-3) var(--space-8) var(--space-5) 0; }
.lightbox { position: relative; display: flex; justify-content: center; }
.lightbox-img { max-width: 100%; max-height: calc(100dvh - 4rem); border-radius: var(--radius-md); }
.levelup { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.levelup-badge { display: inline-flex; width: 110px; height: 110px; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f6dc9c, #e8b64c 60%, #a97c20); color: #161d20; font-size: 4rem; box-shadow: 0 0 44px rgb(232 182 76 / 0.55); animation: pop 600ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.levelup-title { margin: 0; font-size: var(--text-2xl); }
#toasts { position: fixed; left: 50%; bottom: 1.5rem; z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 2rem); transform: translateX(-50%); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem; border-radius: var(--radius-full); background: var(--color-glass-dark); font-size: var(--text-sm); animation: toast-in 280ms cubic-bezier(0.34, 1.5, 0.64, 1); transition: opacity 280ms, transform 280ms; }
.toast.is-out { opacity: 0; transform: translateY(10px); }
.toast--error svg { color: var(--color-danger); }
.toast--xp { color: #e8b64c; font-weight: 700; }
.toast--ach svg { color: #e8b64c; }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(0.92); } }

/* ---------- admin ---------- */
.admin .page-title { margin-bottom: var(--space-3); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.stat-link { display: block; height: 100%; }
.stat { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: var(--space-5); border-radius: var(--radius-md); font-size: var(--text-sm); transition: transform 160ms; }
.stat-link:hover .stat { transform: translateY(-2px); }
.stat b { font-size: 2.6rem; font-weight: 600; line-height: 1; color: var(--color-cta); }
.stat.is-alert { border-color: var(--color-warning); }
.stat.is-alert b { color: var(--color-warning); }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table td { padding: 0.5rem 0.25rem; border-top: 1px solid var(--color-border); }
.table tr:first-child td { border-top: 0; }
.table .num { text-align: right; white-space: nowrap; }
.admin-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); transition: transform 160ms; }
a.admin-row:hover { transform: translateX(3px); }
.admin-row-main { display: flex; flex: 1; min-width: 0; flex-direction: column; line-height: 1.35; overflow-wrap: anywhere; }
.admin-row-main .muted { font-size: var(--text-xs); }
.admin-row-stats { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); white-space: nowrap; }
.editor { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-4); padding-bottom: var(--space-4); }
.save-bar { position: sticky; bottom: var(--space-4); z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 6px; border-radius: var(--radius-full); background: var(--color-glass-strong); }
.media-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-bottom: var(--space-5); }
.media-single { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0.4rem 0; }
.cover-preview { width: 112px; height: 70px; object-fit: cover; object-position: top; border-radius: 12px; }
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space-3); margin-top: 0.4rem; padding: 4px; border-radius: var(--radius-md); transition: outline 120ms; }
.shots.is-over { outline: 2px dashed var(--color-accent); }
.shot { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-muted); cursor: grab; }
.shot img { width: 100%; height: 170px; object-fit: cover; object-position: top; display: block; border-radius: 10px; }
.shot-tools { display: flex; justify-content: space-between; }
.drop--shot { height: 100%; min-height: 12rem; }
.file-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.file-row { display: flex; align-items: center; gap: var(--space-3); }
.file-main { display: flex; flex: 1; min-width: 0; flex-direction: column; font-size: var(--text-sm); overflow-wrap: anywhere; }
.file-main small { font-size: var(--text-xs); }
.file-upload { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.file-upload .select, .file-upload .input { flex: 1; min-width: 130px; width: auto; }
.progress { height: 8px; margin: var(--space-2) 0; overflow: hidden; border-radius: 4px; background: var(--color-hover); }
.progress span { display: block; width: 0; height: 100%; background: var(--color-accent); transition: width 150ms; }
.admin-order, .admin-user { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); }
.admin-order-top, .admin-order-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.admin-order-info { display: flex; flex-direction: column; font-size: var(--text-sm); overflow-wrap: anywhere; }
.proof-text { margin-top: 4px; padding: 6px 10px; border-radius: 8px; background: var(--color-surface-muted); font-family: Consolas, monospace; overflow-wrap: anywhere; }
.admin-user-head { display: flex; align-items: center; gap: var(--space-3); }
.sub-list { font-size: var(--text-sm); }
.sub-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--touch-min); border-top: 1px solid var(--color-border); }

/* ---------- phones: their own header, bottom bar and layouts ---------- */
@media (max-width: 860px) {
  .hdr-desktop { display: none; }
  .hdr-mobile { display: flex; }
  #tabbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 0 var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom)); pointer-events: none; }
  .tabbar { pointer-events: auto; max-width: 30rem; }
  #view { padding-bottom: 5.5rem; }
  #toasts { bottom: calc(6rem + env(safe-area-inset-bottom)); }
  .wrap { padding: var(--space-5) var(--space-4) var(--space-8); }
  .only-desktop-flex, .only-desktop-inline { display: none; }
  .only-mobile-flex { display: inline-flex; }
  .switch-btn.is-mobile-on { background: var(--color-cta); color: var(--color-cta-text); }
  .switch .switch-btn:not(.is-mobile-on).is-on { background: transparent; color: var(--color-text-muted); }

  .hero { padding: var(--space-6); }
  .hero-actions .btn { flex: 1 1 100%; }
  .grid--2, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .grid--1 { max-width: none; }
  .grid--2 .card-body, .grid--3 .card-body { padding: var(--space-3); }
  .grid--2 .card-head .tile, .grid--3 .card-head .tile, .grid--2 .card-tagline, .grid--3 .card-tagline, .grid--2 .card-cta, .grid--3 .card-cta { display: none; }
  .grid--2 .card-title, .grid--3 .card-title { font-size: var(--text-sm); }
  .grid--2 .card-media, .grid--3 .card-media { aspect-ratio: 1; }
  .grid--2 .price, .grid--3 .price { font-size: var(--text-md); }
  .grid--2 .rating .muted, .grid--3 .rating .muted { display: none; }
  .grid--2 .stars, .grid--3 .stars { display: none; }
  .grid--2 .rating:not(.muted)::before, .grid--3 .rating:not(.muted)::before { content: "★"; color: #e8b64c; }
  .skeleton-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .skeleton { height: 13rem; }
  .pass-banner { padding: var(--space-5); }
  .pass-cta, .pass-cta .btn { width: 100%; }
  .how { grid-template-columns: minmax(0, 1fr); }
  .filters .select { flex: 1; min-width: 0; }
  .search { flex-basis: 100%; }

  .app-layout, .app-sections, .checkout-grid, .profile-grid { grid-template-columns: minmax(0, 1fr); }
  .buy-box { position: static; }
  .gallery-main { height: min(62svh, 30rem); }
  .block { padding: var(--space-4); }
  .rating-summary { gap: var(--space-4); }
  .lib-list { grid-template-columns: minmax(0, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: var(--space-4); }
  .stat b { font-size: 2rem; }
  .form-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-pair { grid-template-columns: minmax(0, 1fr); }
  .admin-row { flex-wrap: wrap; }
  .admin-row-main { flex-basis: 50%; }
  .admin-row-stats { order: 3; }
  .save-bar { bottom: calc(5.75rem + env(safe-area-inset-bottom)); }
  .order-row { flex-wrap: wrap; }
  .note { flex-wrap: wrap; }
  .note span { flex-basis: 70%; }
  .auth-card { padding: var(--space-5); }
  .modal { align-items: flex-end; padding: 0; }
  .modal-card { max-width: none; max-height: 92dvh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); }
  .modal-card--wide { padding: var(--space-2) var(--space-2) calc(var(--space-3) + env(safe-area-inset-bottom)); }
}

@media (max-width: 480px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) and (min-width: 861px) {
  .brand-tag, .level-bar { display: none; }
  .level-chip { padding-right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .page, .reveal, .pass-glow, .is-now .step-dot, .pulse-ring, .skeleton { animation: none; }
  .card-app, .plan, .btn, .chip { transition: none; }
}

.free-apps summary { padding-block: 0.6rem; cursor: pointer; font-size: var(--text-sm); }
.free-apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 0 var(--space-4); }
.free-apps summary span { white-space: nowrap; }