.shell { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
@media (min-width: 520px) { body { background: #F0F0F0; } .shell { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }

.top { position: sticky; top: 0; z-index: 5; padding: calc(16px + env(safe-area-inset-top)) 20px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border-bottom: 1px solid var(--line); }
.top h1 { margin: 0; font-size: 18px; font-weight: 700; }
.top .pts { font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: var(--ink); color: #fff; white-space: nowrap; }
.top .perfil { font-size: 11px; font-weight: 600; padding: 6px 10px; border-radius: 999px; background: var(--soft); border: none; white-space: nowrap; min-height: 32px; }

main { flex: 1; padding: 16px 20px 110px; display: flex; flex-direction: column; gap: 16px; }

.tabs { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: #fff; border-top: 1px solid var(--line); padding: 6px 8px calc(10px + env(safe-area-inset-bottom)); max-width: 480px; margin: 0 auto; }
.tabs button { min-height: 52px; border: none; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--muted); }
.tabs button[aria-current="page"] { color: var(--ink); }

.hero { background: var(--ink); color: #fff; border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.hero .big { font-size: 40px; font-weight: 700; line-height: 1; }
.hero .dimtxt { color: var(--dim); }
.hero .nv { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--dark2); }

.flash { background: var(--amber-bg); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.flash .tag { font-size: 12px; font-weight: 700; color: var(--amber); }

.link-tile { min-height: 48px; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.link-tile:hover { color: var(--ink); border-color: var(--ink); }

.seq { background: var(--soft); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.pts-blue { font-size: 14px; font-weight: 700; color: var(--blue); white-space: nowrap; }

.rank { background: var(--ink); color: #fff; border-radius: 20px; padding: 8px 18px; display: flex; flex-direction: column; }
.rank .ln { display: grid; grid-template-columns: 40px minmax(0, 1fr) 72px 56px; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--dark2); }
.rank .ln:last-child { border-bottom: none; }
.rank .pos { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.rank .nm { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .pt { font-size: 13px; font-weight: 600; text-align: right; }
.selos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.selo { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.selo.on { background: var(--soft); }

.premio-foto { height: 72px; border-radius: 12px; background: var(--soft); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--muted); }
.premio-foto img { width: 100%; height: 100%; object-fit: cover; }
.pill-info { min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); background: var(--bg); border-radius: 999px; text-align: center; padding: 0 8px; }
.pill-info.amber { color: var(--amber); background: var(--amber-bg); font-weight: 600; }
.ext { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 10px; }

.seg-ctl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.seg-ctl button { min-height: 44px; border: none; border-radius: 9px; font-size: 13px; font-weight: 600; background: #fff; }
.seg-ctl button[aria-pressed="true"], .chips button[aria-pressed="true"], .fbtn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chips button { flex: none; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line2); font-size: 13px; font-weight: 600; white-space: nowrap; background: #fff; }
.fbtn { min-height: 44px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 12px; background: #fff; font-size: 13px; font-weight: 600; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search { min-height: 46px; border: 1px solid var(--line2); border-radius: 12px; padding: 0 14px; font-size: 16px; background: #fff; width: 100%; }
.loja { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; width: 100%; }
.loja:hover { border-color: var(--ink); }
.tag { flex: none; font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 6px; background: var(--soft); }
.tag.l { background: var(--orange-bg); color: var(--orange); }
.opt { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; width: 100%; }
.det-rows { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 4px 14px; display: flex; flex-direction: column; }
.det-rows > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.det-rows > div:last-child { border-bottom: none; }
.st-ok { color: var(--green); font-weight: 600; } .st-warn { color: var(--amber); font-weight: 600; } .st-cold { color: var(--muted); font-weight: 600; }
.menu { position: absolute; right: 20px; top: 64px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.12); padding: 6px; display: flex; flex-direction: column; min-width: 200px; z-index: 20; }
.menu button { min-height: 44px; border: none; background: none; text-align: left; padding: 0 12px; border-radius: 10px; font-size: 14px; font-weight: 500; }
.menu button:hover { background: var(--bg); }
.loading { padding: 48px 0; text-align: center; color: var(--muted); font-size: 14px; }
.bar.wbar > i { background: #fff; }