.sp__page{min-height:calc(100vh - 64px);background:var(--bg-primary);padding:var(--space-2xl) 0 var(--space-4xl)}.sp__container{max-width:640px;margin:0 auto;padding:0 var(--space-md);display:flex;flex-direction:column;gap:var(--space-xl)}.sp__header{text-align:center;padding:var(--space-md) 0 var(--space-sm)}.sp__title{font-size:var(--font-size-2xl);font-weight:800;color:var(--text-primary);margin-bottom:var(--space-xs)}.sp__subtitle{font-size:var(--font-size-sm);color:var(--text-tertiary);line-height:1.6}.sp__tabs{display:flex;gap:var(--space-sm);background:var(--bg-card);border-radius:var(--border-radius-lg);padding:var(--space-xs);box-shadow:var(--shadow-sm)}.sp__tab{flex:1;padding:var(--space-sm) var(--space-md);border-radius:calc(var(--border-radius-lg) - 4px);font-size:var(--font-size-sm);font-weight:600;color:var(--text-secondary);background:none;border:none;cursor:pointer;transition:all .2s ease;text-align:center}.sp__tab:hover{background:var(--bg-tertiary);color:var(--text-primary)}.sp__tab--active{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-sm)}.sp__tab--active:hover{background:var(--color-primary-dark);color:#fff}.sp__section{background:var(--bg-card);border-radius:var(--border-radius-xl);padding:var(--space-xl);box-shadow:var(--shadow-md)}.sp__section-title{font-size:var(--font-size-lg);font-weight:700;color:var(--text-primary);margin-bottom:var(--space-xs)}.sp__section-meta{font-size:var(--font-size-xs);color:var(--text-tertiary);margin-bottom:var(--space-lg)}.sp__date-selectors{display:flex;gap:var(--space-sm);margin-bottom:var(--space-sm);flex-wrap:wrap}.sp__date-select{padding:6px 28px 6px 12px;border:1.5px solid #d9d1c7;border-radius:10px;background:#fff;font-size:var(--font-size-sm);color:var(--text-primary);cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;min-width:80px;transition:border-color .15s}.sp__date-select:focus{outline:none;border-color:var(--color-primary)}.sp__gender-tabs{display:flex;gap:var(--space-sm);margin-bottom:var(--space-lg)}.sp__gender-tab{flex:1;padding:var(--space-sm);border-radius:var(--border-radius-md);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;border:2px solid var(--border-color);background:none;color:var(--text-secondary);transition:all .2s ease;text-align:center}.sp__gender-tab:hover{border-color:var(--color-primary-light);color:var(--color-primary)}.sp__gender-tab--active-M{border-color:#5fa8d3;background:#eff8ff;color:#2e86ab}.sp__gender-tab--active-F{border-color:#f4a261;background:#fff5eb;color:#e6893c}.sp__rank-list{display:flex;flex-direction:column;gap:var(--space-sm)}.sp__rank-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-md);border-radius:var(--border-radius-md);background:var(--bg-primary);transition:background .15s}.sp__rank-item:hover{background:var(--bg-tertiary)}.sp__rank-item--first{background:linear-gradient(135deg,#f4a2611f,#4a7c6f14);border:1px solid rgba(244,162,97,.3)}.sp__rank-item--first:hover{background:linear-gradient(135deg,#f4a2612e,#4a7c6f1f)}.sp__rank-badge{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm);font-weight:800;flex-shrink:0;background:var(--bg-card);color:var(--text-secondary);border:1.5px solid var(--border-color)}.sp__rank-badge--1{background:linear-gradient(135deg,gold,orange);color:#fff;border:none;font-size:1.1rem}.sp__rank-badge--2{background:linear-gradient(135deg,silver,#a8a8a8);color:#fff;border:none}.sp__rank-badge--3{background:linear-gradient(135deg,#cd7f32,sienna);color:#fff;border:none}.sp__rank-name{flex:1;font-size:var(--font-size-base);font-weight:700;color:var(--text-primary)}.sp__rank-item--first .sp__rank-name{font-size:var(--font-size-lg);color:var(--color-accent-dark)}.sp__rank-count{font-size:var(--font-size-sm);color:var(--text-tertiary);font-weight:500;white-space:nowrap}.sp__rank-item--first .sp__rank-count{color:var(--text-secondary);font-weight:600}.sp__loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-2xl) var(--space-md);gap:var(--space-md)}.sp__spinner{display:inline-block;width:36px;height:36px;border:3px solid var(--color-accent-light);border-top-color:var(--color-accent);border-radius:50%;animation:sp-spin .9s linear infinite}@keyframes sp-spin{to{transform:rotate(360deg)}}.sp__loading-text{font-size:var(--font-size-sm);color:var(--text-tertiary)}.sp__empty{text-align:center;padding:var(--space-xl) var(--space-md);color:var(--text-tertiary);font-size:var(--font-size-sm);line-height:1.8}.sp__error{text-align:center;padding:var(--space-lg) var(--space-md);color:#e53e3e;font-size:var(--font-size-sm);background:#fff5f5;border-radius:var(--border-radius-md)}.sp__popular-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:var(--space-sm);margin-top:var(--space-sm)}.sp__category-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-sm);margin-bottom:var(--space-sm)}.sp__category-tab{min-height:44px;padding:8px 10px;border-radius:var(--border-radius-md);border:1.5px solid var(--border-color);background:var(--bg-primary);color:var(--text-secondary);font-size:.82rem;font-weight:700;line-height:1.35;cursor:pointer;transition:all .18s ease}.sp__category-tab--active{border-color:var(--color-primary);background:#4a7c6f1a;color:var(--color-primary)}.sp__subtype-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-sm);margin-bottom:var(--space-md)}.sp__subtype-tab{min-height:42px;padding:8px 10px;border-radius:var(--border-radius-md);border:1.5px solid var(--border-color);background:var(--bg-primary);color:var(--text-secondary);font-size:.8rem;font-weight:700;line-height:1.3;cursor:pointer;transition:all .18s ease}.sp__subtype-tab--active{border-color:var(--color-accent);background:#f4a2611f;color:var(--color-accent-dark)}.sp__subtype-popular-heading{margin:0 0 var(--space-sm);font-size:var(--font-size-base);font-weight:800;color:var(--text-primary)}.sp__rank-list--popular{gap:10px}.sp__rank-item--popular{background:var(--bg-primary)}.sp__popular-rank-label{display:block;margin-top:2px;font-size:.78rem;font-weight:700;color:var(--text-tertiary)}.sp__source-note{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font-size:var(--font-size-xs);color:var(--text-tertiary);padding:var(--space-sm) 0 var(--space-xs);line-height:1.6}@media(max-width:640px){.sp__title{font-size:var(--font-size-xl)}.sp__section{padding:var(--space-lg);border-radius:var(--border-radius-lg)}.sp__category-tabs,.sp__subtype-tabs{gap:8px}.sp__category-tab,.sp__subtype-tab{min-height:40px;padding:8px;font-size:.76rem}}@media(max-width:400px){.sp__gender-tabs{gap:var(--space-xs)}.sp__rank-item{padding:var(--space-sm) var(--space-sm);gap:var(--space-sm)}.sp__category-tab,.sp__subtype-tab{font-size:.72rem}}