/* Shelf — reference kit (Tastefolio). App-store shelves: hero banner carousel, horizontal snap shelves of squircle
   app tiles, ranked charts, category chips, app sheets with rating bars, a mobile bottom tab bar and a publisher
   console. Requires tokens.css. RTL-native. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: var(--fw-regular) var(--fs-md)/var(--lh-body) var(--font-sans); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 12px; }
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; inset-inline-start: 12px; inset-block-start: -60px; z-index: 100; background: var(--brand); color: #fff; padding: 10px 14px; border-radius: 12px; }
.skip-link:focus { inset-block-start: 12px; }
[class^="ri-"], [class*=" ri-"] { line-height: 1; font-size: 1.2em; }

.container { max-inline-size: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.row { display: flex; align-items: center; gap: var(--gap, var(--space-3)); flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: var(--gap, var(--space-3)); }
.muted { color: var(--ink-2); }
.subtle { color: var(--ink-3); }
.small { font-size: var(--fs-sm); }
.ltr { direction: ltr; unicode-bidi: isolate; }
.display { font: var(--fw-display) var(--fs-display)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-display); }
.h2 { font: var(--fw-display) var(--fs-xl)/1.25 var(--font-display); }
.h3 { font: 700 var(--fs-lg)/1.3 var(--font-display); }

/* ------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: var(--control-h); padding-inline: 18px; border-radius: var(--radius-pill); border: 0; background: var(--surface-3); color: var(--ink); font-weight: 700; font-size: 14.5px; line-height: 1; cursor: pointer; white-space: nowrap; transition: transform var(--dur-2) var(--ease), background var(--dur-1), box-shadow var(--dur-2); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.96); }
.btn-primary { background: var(--brand); color: var(--brand-ink); box-shadow: 0 10px 24px -12px var(--brand); }
.btn-primary:hover { box-shadow: 0 14px 30px -10px var(--brand); }
.btn-soft { background: var(--brand-soft); color: var(--brand-strong); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-lg { min-block-size: var(--control-h-lg); padding-inline: 26px; font-size: 16px; }
.btn-sm { min-block-size: 32px; padding-inline: 14px; font-size: 13px; }
.btn-icon { inline-size: var(--control-h); padding: 0; }
.install { min-inline-size: 84px; }
.install.is-busy { background: var(--surface-3); color: var(--ink); position: relative; overflow: hidden; }
.install.is-busy::before { content: ""; position: absolute; inset: 0; inline-size: var(--p, 0%); background: var(--brand-soft); transition: inline-size .2s linear; }
.install.is-busy span { position: relative; }
.install.is-done { background: var(--success-soft); color: var(--success); box-shadow: none; }

/* ------------------------------------------------------------ top bar & tab bar */
.topbar { position: sticky; inset-block-start: 0; z-index: 40; background: color-mix(in oklab, var(--canvas) 85%, transparent); backdrop-filter: blur(16px); }
.topbar .container { display: flex; align-items: center; gap: var(--space-5); min-block-size: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 800 22px var(--font-display); }
.logo-mark { inline-size: 38px; block-size: 38px; border-radius: 12px; display: grid; place-items: center; background: conic-gradient(from 210deg, #3b82ff, #b06cff, #ff5d6c, #ffb020, #2fd27c, #3b82ff); color: #fff; font-size: 20px; }
.nav { display: flex; gap: 4px; }
.nav a { padding: 8px 14px; border-radius: var(--radius-pill); font-weight: 700; color: var(--ink-2); }
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.nav a[aria-current] { color: var(--ink); background: var(--surface-2); }
.searchbox { position: relative; flex: 1; max-inline-size: 420px; margin-inline-start: auto; }
.searchbox .input { min-block-size: 44px; padding-inline-start: 44px; border-radius: var(--radius-pill); background: var(--surface); border-color: transparent; }
.searchbox i { position: absolute; inset-inline-start: 16px; inset-block-start: 50%; transform: translateY(-50%); color: var(--ink-3); }
.tabbar { display: none; }
@media (max-width: 860px) {
  .nav, .hide-md { display: none !important; }
  .searchbox { max-inline-size: none; }
  .tabbar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 50; display: grid; grid-template-columns: repeat(5, 1fr); block-size: var(--tabbar-h); background: color-mix(in oklab, var(--surface) 92%, transparent); backdrop-filter: blur(16px); border-block-start: 1px solid var(--line); padding-block-end: env(safe-area-inset-bottom); }
  .tabbar a { display: grid; place-items: center; align-content: center; gap: 2px; font-size: 11px; font-weight: 700; color: var(--ink-3); }
  .tabbar a i { font-size: 22px; }
  .tabbar a[aria-current] { color: var(--brand); }
  body.has-tabbar { padding-block-end: calc(var(--tabbar-h) + 8px); }
}

/* ------------------------------------------------------------ hero banners */
.banners { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: var(--space-3); }
.banners::-webkit-scrollbar { display: none; }
@media (max-width: 900px) { .banners { grid-auto-columns: 88%; } }
.banner { position: relative; overflow: hidden; scroll-snap-align: start; min-block-size: 300px; border-radius: var(--radius-xl); padding: var(--space-7); display: grid; align-content: end; gap: var(--space-3); color: #fff; background: radial-gradient(120% 120% at 0% 0%, var(--c1), var(--c2)); isolation: isolate; }
.banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0,0,0,.55), transparent 60%); }
.banner .art { position: absolute; inset-block-start: -10%; inset-inline-end: -6%; z-index: -1; font-size: 220px; opacity: .25; transform: rotate(-12deg); }
.banner h2 { font: 800 clamp(24px, 3vw, 36px)/1.2 var(--font-display); max-inline-size: 18ch; }
.banner .row { --gap: 10px; }
.dots { display: flex; gap: 6px; justify-content: center; margin-block-start: 6px; }
.dots i { inline-size: 7px; block-size: 7px; border-radius: 99px; background: var(--surface-3); }
.dots i.on { inline-size: 22px; background: var(--brand); }

/* ------------------------------------------------------------ shelves & app tiles */
.shelf { margin-block: var(--space-7); }
.shelf-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-block-end: var(--space-4); }
.shelf-head h2 { font: 800 var(--fs-xl)/1.3 var(--font-display); }
.shelf-head .ctrl { display: flex; gap: 6px; align-items: center; }
.see-all { font-weight: 700; color: var(--brand); display: inline-flex; gap: 4px; align-items: center; }
.track { display: grid; grid-auto-flow: column; grid-auto-columns: 128px; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 4px 8px; }
.track::-webkit-scrollbar { display: none; }
.track > * { scroll-snap-align: start; }
.app { display: grid; gap: 6px; cursor: pointer; border: 0; background: none; padding: 0; color: inherit; text-align: start; min-inline-size: 0; }
.app:hover .icon { transform: translateY(-3px) rotate(-2deg); box-shadow: 0 16px 30px -14px var(--c1); }
.icon { inline-size: var(--s, 128px); block-size: var(--s, 128px); border-radius: var(--radius-icon); display: grid; place-items: center; color: #fff; font-size: calc(var(--s, 128px) * .42); background: linear-gradient(145deg, var(--c1), var(--c2)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 22px -14px rgba(0,0,0,.8); transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2); flex: none; }
.app b { font-weight: 700; font-size: 14px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .meta { display: flex; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.stars { color: var(--star); display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); font-weight: 700; font-size: 14px; cursor: pointer; }
.chip i { color: var(--c, var(--brand)); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--ink-inverse); border-color: var(--ink); }
.chip[aria-pressed="true"] i { color: inherit; }

/* ranked chart */
.ranks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px var(--space-6); }
@media (max-width: 1000px) { .ranks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ranks { grid-template-columns: minmax(0, 1fr); } }
.rank { display: grid; grid-template-columns: 26px 60px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-block-end: 1px solid var(--line); }
.rank .n { font: 800 20px var(--font-display); color: var(--ink-3); text-align: center; }
.rank b { font-weight: 700; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .meta { font-size: 12.5px; color: var(--ink-3); display: flex; gap: 8px; }

/* collections */
.collections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 900px) { .collections { grid-template-columns: minmax(0, 1fr); } }
.collection { border-radius: var(--radius-lg); padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); display: grid; gap: var(--space-4); }
.collection .icons { display: flex; }
.collection .icons .icon { --s: 54px; border: 3px solid var(--surface); }
.collection .icons .icon + .icon { margin-inline-start: -14px; }

/* app sheet (dialog) */
dialog.sheet { border: 0; padding: 0; inline-size: min(720px, calc(100vw - 20px)); max-block-size: 90vh; border-radius: var(--radius-xl); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3); }
dialog.sheet::backdrop { background: var(--overlay); backdrop-filter: blur(6px); }
dialog.sheet[open] { animation: sheet-in var(--dur-3) var(--ease); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(40px) scale(.98); } }
.sheet-body { padding: var(--space-6); display: grid; gap: var(--space-5); }
.app-head { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: center; }
.app-head h2 { font: 800 26px/1.3 var(--font-display); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; border-block: 1px solid var(--line); padding-block: var(--space-4); }
.facts div { display: grid; gap: 2px; border-inline-end: 1px solid var(--line); }
.facts div:last-child { border: 0; }
.facts b { font-weight: 800; font-size: 16px; }
.facts span { font-size: 12px; color: var(--ink-3); }
.screens { display: grid; grid-auto-flow: column; grid-auto-columns: 150px; gap: var(--space-3); overflow-x: auto; scrollbar-width: none; }
.screens > * { aspect-ratio: 9 / 19; border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--c1), var(--c2)); display: grid; place-items: center; color: rgba(255,255,255,.9); font-size: 36px; }
.ratings { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: center; }
.ratings .big { font: 800 52px/1 var(--font-display); text-align: center; }
.bars { display: grid; gap: 6px; }
.bars div { display: grid; grid-template-columns: 14px 1fr; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-3); }
.bars i { display: block; block-size: 8px; border-radius: 99px; background: var(--surface-3); position: relative; overflow: hidden; }
.bars i::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--w); background: var(--star); border-radius: inherit; }

/* forms */
.field { display: grid; gap: 6px; }
.label { font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.input, .select, .textarea { inline-size: 100%; min-block-size: var(--control-h); padding: 8px 16px; border-radius: var(--radius-md); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink); font-size: 15px; transition: border-color var(--dur-1), box-shadow var(--dur-1); }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.select { appearance: none; }
.select option { background: var(--surface); }
.textarea { min-block-size: 110px; resize: vertical; }
[aria-invalid="true"] { border-color: var(--danger) !important; }
.field-error { color: var(--danger); font-size: 12.5px; }
.counter { font-size: 12px; color: var(--ink-3); text-align: end; }
.switch { position: relative; inline-size: 46px; block-size: 28px; border-radius: 999px; border: 0; background: var(--surface-3); cursor: pointer; padding: 0; flex: none; }
.switch::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 22px; block-size: 22px; border-radius: 50%; background: #fff; transition: transform var(--dur-2) var(--ease); }
.switch[aria-checked="true"] { background: var(--success); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }
[dir="rtl"] .switch[aria-checked="true"]::after { transform: translateX(-18px); }

/* ------------------------------------------------------------ publisher console */
.console { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-block-size: 100vh; }
.side { position: sticky; inset-block-start: 0; block-size: 100vh; padding: var(--space-5) var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); background: var(--surface); border-inline-end: 1px solid var(--line); }
.app-switch { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; text-align: start; }
.app-switch .icon { --s: 42px; border-radius: 12px; font-size: 20px; }
.side [role="tablist"] { display: grid; gap: 4px; }
.side [role="tab"] { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--radius-md); border: 0; background: none; color: var(--ink-2); font-weight: 700; font-size: 14.5px; cursor: pointer; text-align: start; }
.side [role="tab"]:hover { background: var(--surface-2); color: var(--ink); }
.side [role="tab"][aria-selected="true"] { background: var(--brand); color: #fff; }
.side .badge { margin-inline-start: auto; }
.main { min-inline-size: 0; }
.ctop { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); position: sticky; inset-block-start: 0; z-index: 20; background: color-mix(in oklab, var(--canvas) 85%, transparent); backdrop-filter: blur(14px); }
.ctop .spacer { flex: 1; }
.cbody { padding: 0 var(--space-6) var(--space-9); display: grid; gap: var(--space-5); }
.cbody > * { min-inline-size: 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); min-inline-size: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5) 0; flex-wrap: wrap; }
.card-head h2 { font: 800 18px var(--font-display); }
.card-body { padding: var(--space-5); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { padding: var(--space-5); display: grid; gap: 6px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); position: relative; overflow: hidden; }
.kpi i.bg { position: absolute; inset-inline-end: -6px; inset-block-end: -10px; font-size: 76px; opacity: .08; }
.kpi .v { font: 800 28px/1.15 var(--font-display); }
.kpi .t { font-size: 13px; color: var(--ink-3); font-weight: 700; }
.kpi .d { font-size: 12.5px; font-weight: 700; color: var(--success); }
.kpi .d.bad { color: var(--danger); }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-4); }
@media (max-width: 1100px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }
.review { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-block-start: 1px solid var(--line); }
.review .av { inline-size: 44px; block-size: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--surface-3); }
.review p { color: var(--ink-2); font-size: 14px; margin-block: 4px 8px; }
.reply-box { display: none; gap: 8px; margin-block-start: 8px; }
.reply-box[data-open] { display: flex; }
.release { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); border-block-start: 1px solid var(--line); }
.release .icon { --s: 44px; border-radius: 12px; font-size: 20px; }
.meter { block-size: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin-block-start: 6px; }
.meter i { display: block; block-size: 100%; inline-size: var(--w); background: var(--brand); border-radius: inherit; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--surface-3); color: var(--ink-2); white-space: nowrap; }
.badge-ok { background: var(--success-soft); color: var(--success); }
.badge-warn { background: var(--warning-soft); color: var(--warning); }
.badge-brand { background: var(--brand-soft); color: var(--brand-strong); }
.badge-bad { background: var(--danger-soft); color: var(--danger); }
.shots-edit { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
.shots-edit > * { aspect-ratio: 9 / 19; border-radius: var(--radius-md); background: linear-gradient(160deg, var(--c1), var(--c2)); display: grid; place-items: center; color: #fff; font-size: 28px; }
.shots-edit .add { background: var(--surface-2); border: 2px dashed var(--line-2); color: var(--ink-3); cursor: pointer; }
@media (max-width: 640px) { .shots-edit { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .console { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; inset-block: 0; inset-inline-start: 0; inline-size: 280px; z-index: 60; display: none; box-shadow: var(--shadow-3); }
  .side[data-open] { display: flex; }
  .ctop, .cbody { padding-inline: var(--space-4); }
}
.side-toggle { display: none !important; }
@media (max-width: 960px) { .side-toggle { display: inline-flex !important; } }

/* toast & charts */
.toast { background: var(--ink); color: var(--ink-inverse); padding: 12px 18px; border-radius: var(--radius-pill); font-weight: 700; font-size: 14px; box-shadow: var(--shadow-3); animation: toast-in var(--dur-3) var(--ease); }
.toast.is-out { opacity: 0; transform: translateY(10px); transition: all var(--dur-2); }
@keyframes toast-in { from { opacity: 0; transform: translateY(20px) scale(.9); } }
@media (max-width: 860px) { .tf-toasts { inset-block-end: calc(var(--tabbar-h) + 12px) !important; } }
.tf-chart .c-grid { stroke: var(--chart-grid); }
.tf-chart .c-axis { fill: var(--chart-axis); font-size: 11px; font-family: var(--font-sans); font-weight: 600; }
.tf-chart .c-guide { stroke: var(--line-2); }
.tf-chart .c-track { stroke: var(--surface-3); }
.tf-chart .c-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font: 800 20px var(--font-display); }
.chart-tip { background: var(--ink); color: var(--ink-inverse); padding: 8px 12px; border-radius: 12px; font-size: 12.5px; font-weight: 700; display: grid; gap: 4px; }
.chart-tip span { display: flex; gap: 6px; align-items: center; }
.chart-tip i { inline-size: 8px; block-size: 8px; border-radius: 50%; }

.site-footer { padding-block: var(--space-9) var(--space-7); color: var(--ink-3); font-size: 14px; border-block-start: 1px solid var(--line); margin-block-start: var(--space-9); }
.footer-row { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-7); align-items: center; }
.footer-row nav { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-inline-start: auto; }
.footer-row a:hover { color: var(--ink); }