.rankings-page{--ink:#12202b;--ink-soft:#3a4a56;--line:#12202b1a;--surface:#ffffffe6;--accent:var(--primary,#a855f7);--accent-soft:var(--primary-soft,#f3e8ff);--warn:#9a3412;--warn-bg:#ffedd5;--danger:#991b1b;--danger-bg:#fee2e2;--shadow:0 12px 36px #12202b14;--nav-height:76px;--header-height:56px;min-height:100%;padding:calc(var(--header-height) + 12px) 16px calc(var(--nav-height) + 24px + env(safe-area-inset-bottom));color:var(--ink);-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;background:0 0;position:relative}.rankings-page:before{content:"";z-index:0;pointer-events:none;background:linear-gradient(#a855f7 0%,#c084fc 12%,#f3e8ff 32%,#fff 50% 100%);position:fixed;inset:0}.rankings-page>*{z-index:1;position:relative}.rankings{flex-direction:column;gap:14px;width:min(1180px,100%);margin:0 auto;display:flex}.app-header{z-index:40;height:calc(var(--header-height) + env(safe-area-inset-top));padding:env(safe-area-inset-top) 16px 0;background:#a855f7;border-bottom:none;position:fixed;top:0;left:0;right:0;box-shadow:0 8px 20px #581c872e}.app-header-inner{width:min(1180px,100%);height:var(--header-height);justify-content:space-between;align-items:center;gap:16px;margin:0 auto;display:flex}.app-logo{object-fit:contain;flex-shrink:0;width:auto;height:48px}.app-header .period-tabs{flex:none;width:min(220px,52%)}.rankings-body{flex-direction:column;gap:14px;display:flex}.subtabs{border:1px solid var(--line);background:#ffffffbf;border-radius:12px;grid-template-columns:1fr 1fr;gap:6px;padding:4px;display:grid}.subtab{height:36px;color:var(--ink-soft);font:inherit;cursor:pointer;background:0 0;border:none;border-radius:9px;font-size:14px;font-weight:600}.subtab.active{color:var(--accent);background:#fff;box-shadow:0 1px 4px #12202b14}.period-tabs{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff8c;border:1px solid #ffffffa6;border-radius:999px;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;padding:3px;display:grid}.period-tabs:has(.period-tab:only-child){grid-template-columns:1fr}.period-tab{color:#ffffffeb;min-width:0;height:30px;font:inherit;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:999px;padding:0 8px;font-size:12px;font-weight:600}.period-tab.active{color:var(--accent);background:#fff;box-shadow:0 1px 4px #581c872e}.list-meta{color:var(--ink-soft);justify-content:space-between;align-items:baseline;gap:12px;padding:0 2px;font-size:13px;display:flex}.list-meta span:first-child{color:var(--ink);font-weight:600}.status-panel{text-align:center;background:#ffffffeb;border:1px solid #fffffff2;border-radius:24px;flex-direction:column;align-items:center;gap:10px;margin:28px 0;padding:36px 24px;display:flex;box-shadow:0 12px 36px #581c8714}.status-icon{background:var(--accent-soft);width:56px;height:56px;color:var(--accent);border-radius:18px;place-items:center;display:grid}.status-quota .status-icon{background:#f3e8ff}.status-title{color:var(--ink);margin:6px 0 0;font-size:18px;font-weight:700}.status-desc{max-width:28ch;color:var(--ink-soft);margin:0;font-size:14px;line-height:1.55}.status-action{color:#fff;height:40px;font:inherit;cursor:pointer;background:linear-gradient(145deg,#c084fc 0%,#a855f7 100%);border:none;border-radius:999px;margin-top:8px;padding:0 20px;font-size:14px;font-weight:600;box-shadow:0 8px 18px #a855f747}.status-action:disabled{opacity:.6;cursor:not-allowed}.table-wrap{border:1px solid var(--line);box-shadow:var(--shadow);background:#fffffff2;border-radius:18px;transition:opacity .16s;overflow:auto}.table-wrap.loading,.creator-list.loading,.product-list.loading{opacity:.65}.creator-list,.product-list{transition:opacity .16s}.scroll-status{text-align:center;color:var(--ink-soft);margin:4px 0 0;font-size:12px}.creator-cards{flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;display:flex}.creator-card{background:#fff;border:1px solid #12202b0a;border-radius:16px;padding:16px 16px 14px;box-shadow:0 8px 28px #12202b0f}.creator-card-top{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.creator-card-main{flex:1;align-items:center;gap:12px;min-width:0;display:flex}.creator-rank{letter-spacing:-.04em;min-width:1.6em;color:var(--accent);opacity:.55;font-variant-numeric:tabular-nums;text-align:right;flex-shrink:0;align-self:flex-start;margin-left:8px;font-size:22px;font-weight:700;line-height:1}.creator-avatar-wrap{flex-shrink:0;width:52px;height:52px;position:relative}.creator-avatar{object-fit:cover;background:#eef1f4;border:2px solid #fff;border-radius:999px;width:52px;height:52px;box-shadow:0 0 0 1px #12202b0f}.creator-avatar.placeholder{display:block}.creator-region-badge{color:#5b6470;text-align:center;background:#fff;border:1px solid #12202b14;border-radius:999px;min-width:22px;height:18px;padding:0 4px;font-size:9px;font-weight:700;line-height:16px;position:absolute;bottom:-2px;right:-2px;box-shadow:0 2px 6px #12202b14}.creator-identity{flex:1;min-width:0}.creator-name-row{align-items:center;gap:8px;display:flex}.creator-name{color:#111;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:17px;font-weight:700;line-height:1.25;overflow:hidden}.creator-meta-row{flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px;display:flex}.creator-region{color:#8e8e8e;align-items:center;gap:4px;font-size:12px;display:inline-flex}.creator-flag{font-size:13px;line-height:1}.creator-tag{color:#d0021b;white-space:nowrap;text-overflow:ellipsis;background:#ffe8ee;border-radius:999px;align-items:center;max-width:100%;padding:3px 8px;font-size:11px;font-weight:600;line-height:1.3;display:inline-flex;overflow:hidden}.creator-card-divider{border-top:1px dashed #e6e8ec;margin:14px 0 12px}.creator-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.creator-stat{flex-direction:column;gap:4px;min-width:0;display:flex}.creator-stat strong{color:#111;font-variant-numeric:tabular-nums;font-size:16px;font-weight:700;line-height:1.2}.creator-stat span{color:#8e8e8e;font-size:12px}.creator-stat.accent strong{color:#d0021b}.product-card-main{align-items:flex-start}.product-cover{object-fit:cover;background:#eef1f4;border-radius:12px;flex-shrink:0;width:64px;height:64px}.product-cover.placeholder{display:block}.product-title-line{color:#111;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;font-size:15px;font-weight:700;line-height:1.35;display:-webkit-box;overflow:hidden}.product-price-row{flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px;display:flex}.product-price{color:#111;font-variant-numeric:tabular-nums;font-size:14px;font-weight:700}.product-shop-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;display:flex}.product-shop{color:#8e8e8e;align-items:center;gap:6px;min-width:0;font-size:12px;display:inline-flex}.product-shop-avatar{object-fit:cover;background:#eef1f4;border-radius:999px;flex-shrink:0;width:16px;height:16px}.product-shop-avatar.placeholder{display:inline-block}table{border-collapse:collapse;width:100%;min-width:880px}th,td{text-align:left;border-bottom:1px solid var(--line);vertical-align:middle;padding:12px 14px;font-size:13px}th{color:var(--ink-soft);letter-spacing:.02em;background:#f8fafb;font-size:12px;font-weight:600;position:sticky;top:0}tbody tr:hover{background:#a855f70f}.rank{font-variant-numeric:tabular-nums;color:var(--accent);width:40px;font-weight:700}.strong{font-weight:650}.entity{align-items:center;gap:12px;min-width:220px;display:flex}.avatar,.cover{object-fit:cover;background:#e8eef1;border-radius:10px;flex-shrink:0}.avatar{border-radius:999px}.avatar.placeholder,.cover.placeholder{width:40px;height:40px;display:inline-block}.cover.placeholder{width:48px;height:48px}.name{font-weight:600;line-height:1.3}.product-title{-webkit-line-clamp:2;-webkit-box-orient:vertical;max-width:320px;display:-webkit-box;overflow:hidden}.sub{color:var(--ink-soft);margin-top:2px;font-size:12px}.shop{align-items:center;gap:8px;min-width:120px;display:flex}.shop-avatar{object-fit:cover;border-radius:999px}.empty{text-align:center;color:var(--ink-soft);padding:48px 20px}.loading-state{flex-direction:column;gap:14px;display:flex}.loading-head{background:#ffffffe0;border:1px solid #fffffff2;border-radius:18px;align-items:center;gap:12px;padding:14px 16px;display:flex;box-shadow:0 10px 28px #581c8714}.loading-spinner{border:3px solid #a855f733;border-top-color:#a855f7;border-radius:999px;flex-shrink:0;width:28px;height:28px;animation:.8s linear infinite spin}.loading-spinner.sm{border-width:2px;width:16px;height:16px}.loading-title{color:var(--ink);margin:0;font-size:15px;font-weight:700}.loading-tip{color:var(--ink-soft);margin:4px 0 0;font-size:13px}.skeleton-list{flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;display:flex}.skeleton-card{background:#ffffffeb;border:1px solid #fffffff2;border-radius:16px;padding:16px;box-shadow:0 8px 28px #12202b0d}.skeleton-top{align-items:flex-start;gap:12px;display:flex}.skeleton-avatar{border-radius:12px;flex-shrink:0;width:56px;height:56px}.skeleton-lines{flex-direction:column;flex:1;gap:8px;min-width:0;padding-top:4px;display:flex}.skeleton-line{border-radius:999px;height:12px;display:block}.skeleton-line.w-60{width:72%}.skeleton-line.w-40{width:42%}.skeleton-line.w-48{width:55%}.skeleton-rank{border-radius:8px;flex-shrink:0;width:28px;height:22px}.skeleton-divider{border-top:1px dashed #ececf2;margin:14px 0 12px}.skeleton-stats{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.skeleton-stat{border-radius:10px;height:36px;display:block}.shimmer{background:linear-gradient(90deg,#efeaf8 0%,#f7f3ff 45%,#efeaf8 100%) 0 0/200% 100%;animation:1.4s ease-in-out infinite shimmer}.loading-more{color:var(--ink-soft);justify-content:center;align-items:center;gap:8px;margin-top:8px;padding:12px;font-size:13px;display:flex}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.pager{justify-content:center;align-items:center;gap:16px;padding-bottom:8px;display:flex}.pager button{border:1px solid var(--line);height:36px;color:var(--ink);cursor:pointer;font:inherit;background:#fff;border-radius:999px;padding:0 14px}.pager button:disabled{opacity:.45;cursor:not-allowed}.pager span{color:var(--ink-soft);font-size:13px}.rank-list{transition:opacity .16s}.rank-list.loading{opacity:.65}.bottom-nav{z-index:50;padding:0 16px calc(10px + env(safe-area-inset-bottom));pointer-events:none;box-shadow:none;background:0 0;border:none;justify-content:center;display:flex;position:fixed;bottom:0;left:0;right:0}.bottom-nav-dock{pointer-events:auto;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffffdb;border:1px solid #fffffff2;border-radius:999px;grid-template-columns:repeat(3,1fr);gap:4px;width:min(360px,100%);padding:6px;display:grid;box-shadow:0 10px 30px #581c8724,0 2px 8px #12202b0f}.nav-item{color:#8b8794;min-height:52px;font:inherit;letter-spacing:.02em;cursor:pointer;background:0 0;border:none;border-radius:999px;flex-direction:column;justify-content:center;align-items:center;gap:2px;font-size:11px;font-weight:600;transition:color .2s,background .2s,transform .2s,box-shadow .2s;display:flex;position:relative}.nav-icon{border-radius:999px;place-items:center;width:28px;height:28px;transition:background .2s,transform .2s,box-shadow .2s;display:grid}.nav-label{line-height:1;transition:opacity .2s,transform .2s}.nav-item:hover:not(.active){color:#5b5566;background:#a855f70f}.nav-item.active{color:#fff;background:linear-gradient(145deg,#c084fc 0%,#a855f7 55%,#9333ea 100%);transform:translateY(-6px);box-shadow:0 8px 18px #a855f773,inset 0 1px #ffffff47}.nav-item.active .nav-icon{transform:scale(1.08)}.nav-item.active .nav-label{font-weight:700}.nav-item.active:before{content:"";border-radius:inherit;-webkit-mask-composite:xor;pointer-events:none;background:linear-gradient(145deg,#ffffffb3,#ffffff0d 45%,#9333ea59);padding:1px;position:absolute;inset:-1px;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}@media (max-width:760px){.rankings-page{padding:calc(var(--header-height) + 10px) 12px calc(var(--nav-height) + 20px + env(safe-area-inset-bottom))}.app-header{padding-left:12px;padding-right:12px}.app-header-inner{gap:12px}.app-logo{height:44px}.app-header .period-tabs{width:min(200px,54%)}.period-tab{height:28px;padding:0 6px;font-size:11px}}