.ranking-app { --ranking-ink:#0a2344; --ranking-muted:#6b7d96; --ranking-line:#dfe9f2; --ranking-gold:#f4c752; display:grid; gap:18px; min-width:0; color:var(--ranking-ink); }
.ranking-app * { box-sizing:border-box; }
.ranking-app button, .ranking-app input, .ranking-app select { font:inherit; }
.ranking-app button:focus-visible, .ranking-app input:focus-visible, .ranking-app select:focus-visible { outline:3px solid #26b7d2; outline-offset:3px; }
.ranking-kicker { display:block; color:#0d91b2; font-size:10px; font-weight:850; letter-spacing:.19em; line-height:1.4; }
.ranking-kicker-light { color:#7bdbe9; }
.ranking-hero { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0, 1fr) minmax(280px, 350px); align-items:stretch; gap:25px; min-height:260px; overflow:hidden; padding:31px clamp(24px, 3vw, 44px); border-radius:20px; color:#fff; background:radial-gradient(circle at 75% 3%, rgba(0,197,217,.19), transparent 31%), linear-gradient(120deg,#051a38 0%,#0b2e60 54%,#102c51 100%); box-shadow:0 18px 38px rgba(6,34,76,.18); }
.ranking-hero::before { content:""; position:absolute; z-index:-1; width:430px; height:430px; left:30%; top:-280px; border:1px solid rgba(115,207,230,.18); border-radius:50%; box-shadow:0 0 0 62px rgba(111,206,233,.035),0 0 0 128px rgba(111,206,233,.024); pointer-events:none; }
.ranking-hero::after { content:""; position:absolute; z-index:-1; width:105%; height:1px; left:0; bottom:0; background:linear-gradient(90deg,transparent,#45d9e8 52%,transparent); opacity:.62; }
.ranking-hero-glow { position:absolute; z-index:-1; inset:auto auto -140px 17%; width:430px; height:260px; border-radius:50%; background:#0f91c5; filter:blur(95px); opacity:.12; pointer-events:none; }
.ranking-hero-copy { min-width:0; display:flex; flex-direction:column; justify-content:center; }
.ranking-hero h2 { margin:11px 0 11px; color:#fff; font-size:clamp(31px,3.65vw,53px); font-weight:760; line-height:1.04; letter-spacing:-.065em; }
.ranking-hero h2 em { color:#f5d66b; font-style:normal; }
.ranking-hero p { max-width:460px; margin:0; color:#b9d1ea; font-size:12px; line-height:1.55; }
.ranking-hero-meta { display:flex; align-items:center; flex-wrap:wrap; gap:13px; margin-top:25px; color:#a5c7dd; font-size:11px; text-transform:capitalize; }
.ranking-status { display:inline-flex; align-items:center; gap:7px; min-height:25px; border:1px solid rgba(95,221,231,.26); border-radius:30px; padding:4px 10px; background:rgba(26,182,199,.12); color:#9cecf1; font-size:9px; font-weight:800; letter-spacing:.045em; text-transform:uppercase; }
.ranking-status-dot { width:6px; height:6px; border-radius:50%; background:#5fe3d6; box-shadow:0 0 0 4px rgba(95,227,214,.12); }
.ranking-status-pending_close { border-color:rgba(244,199,82,.28); background:rgba(244,199,82,.1); color:#f9d982; }
.ranking-status-pending_close .ranking-status-dot { background:#f4c752; box-shadow:0 0 0 4px rgba(244,199,82,.12); }
.ranking-status-homologated { border-color:rgba(88,217,166,.3); background:rgba(88,217,166,.12); color:#9cf0c9; }
.ranking-prize { position:relative; align-self:center; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; min-height:194px; border:1px solid rgba(248,217,115,.46); border-radius:17px; padding:21px 23px 16px; background:linear-gradient(145deg,rgba(250,223,138,.16),rgba(247,194,73,.055) 56%,rgba(255,255,255,.055)); box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 13px 28px rgba(0,0,0,.12); }
.ranking-prize::before { content:""; position:absolute; width:140px; height:140px; right:-65px; top:-66px; border:1px solid rgba(250,222,132,.18); border-radius:50%; box-shadow:0 0 0 23px rgba(250,222,132,.055),0 0 0 49px rgba(250,222,132,.025); }
.ranking-prize-top { display:flex; align-items:center; justify-content:space-between; gap:7px; color:#f7dc8d; font-size:10px; font-weight:820; letter-spacing:.1em; }
.ranking-prize-top > span:first-child { display:flex; align-items:center; gap:9px; }
.ranking-prize-spark { color:#fae7ad; font-size:17px; }
.ranking-prize > strong { margin-top:12px; color:#fff6d8; font-size:clamp(34px,3.6vw,47px); font-weight:780; line-height:1; letter-spacing:-.055em; }
.ranking-prize p { min-height:31px; margin:8px 0 13px; color:#d8ddda; font-size:11px; line-height:1.4; }
.ranking-prize-foot { display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(252,218,134,.21); padding-top:11px; color:#e2cea2; font-size:10px; font-weight:680; }
.ranking-toolbar { display:flex; align-items:end; flex-wrap:wrap; gap:16px 22px; border:1px solid var(--ranking-line); border-radius:15px; padding:14px 17px; background:#fff; box-shadow:0 8px 21px rgba(19,61,105,.05); }
.ranking-toolbar-group { display:grid; gap:7px; }
.ranking-toolbar-label, .ranking-filter > span { display:block; color:#7588a0; font-size:9px; font-weight:840; letter-spacing:.13em; }
.ranking-category-tabs, .ranking-period-tabs { display:inline-flex; gap:3px; border:1px solid #dce8f2; border-radius:10px; padding:3px; background:#f3f7fb; }
.ranking-category-tabs button, .ranking-period-tabs button { min-height:33px; border:0; border-radius:7px; padding:7px 13px; background:transparent; color:#7487a2; font-size:10px; font-weight:780; cursor:pointer; transition:background .2s,color .2s,box-shadow .2s; }
.ranking-category-tabs button:hover, .ranking-period-tabs button:hover { color:#0c5b9a; }
.ranking-category-tabs button.active, .ranking-period-tabs button.active { background:#fff; color:#0a315e; box-shadow:0 2px 6px rgba(13,48,92,.13); }
.ranking-period-tabs button.active { background:#123e72; color:#fff; }
.ranking-category-locked { min-height:39px; display:inline-flex; align-items:center; border:1px solid #dce8f2; border-radius:9px; padding:8px 14px; background:#f4f8fb; color:#173d67; font-size:11px; font-weight:790; }
.ranking-filter { display:grid; gap:7px; min-width:135px; }
.ranking-filter-month { margin-left:auto; }
.ranking-filter input, .ranking-filter select { width:100%; min-height:39px; border:1px solid #dae6f0; border-radius:9px; padding:8px 11px; background:#fff; color:#0a315e; font-size:11px; font-weight:730; }
.ranking-error, .ranking-loading { border:1px solid #d9e7f0; border-radius:13px; padding:21px; background:#fff; color:#56718b; font-size:12px; }
.ranking-error { border-color:#edcbd0; color:#a9404d; }
.ranking-error button { margin-left:10px; border:0; background:transparent; color:#0b80a2; font-weight:800; cursor:pointer; }
.ranking-stage { position:relative; isolation:isolate; overflow:hidden; min-height:370px; border:1px solid #0a3b6b; border-radius:20px; padding:24px clamp(18px,3vw,36px) 0; color:#fff; background:radial-gradient(ellipse at 50% 80%,rgba(11,177,208,.19),transparent 53%),radial-gradient(circle at 52% -25%,rgba(54,134,214,.26),transparent 38%),linear-gradient(152deg,#061c3c,#082c56 64%,#08274e); box-shadow:0 15px 35px rgba(7,35,75,.13); }
.ranking-stage::before { content:""; position:absolute; z-index:-1; width:550px; height:550px; top:65px; left:calc(50% - 275px); border:1px solid rgba(142,212,233,.08); border-radius:50%; box-shadow:0 0 0 55px rgba(142,212,233,.033),0 0 0 125px rgba(142,212,233,.02); pointer-events:none; }
.ranking-stage-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.ranking-stage-head h2 { margin:5px 0 0; color:#fff; font-size:23px; font-weight:760; letter-spacing:-.035em; }
.ranking-stage-note { color:#8eb8d9; font-size:10px; font-weight:680; }
.ranking-podium { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; gap:18px; max-width:910px; margin:6px auto 0; }
.ranking-podium-fewer { grid-template-columns:repeat(2,minmax(0,260px)); justify-content:center; }
.ranking-podium-fewer .ranking-podium-1 { grid-column:2; grid-row:1; }
.ranking-podium-fewer .ranking-podium-2 { grid-column:1; grid-row:1; }
.ranking-podium-fewer .ranking-podium-3 { display:none; }
.ranking-podium-solo { grid-template-columns:minmax(0,280px); justify-content:center; }
.ranking-podium-solo .ranking-podium-1 { grid-column:1; grid-row:1; }
.ranking-podium-tied .ranking-podium-person:not(.ranking-podium-1) .ranking-avatar-podium { border-color:#f9da8b; }
.ranking-podium-tied .ranking-podium-person:not(.ranking-podium-1) .ranking-podium-plinth { border-color:rgba(247,212,122,.48); background:linear-gradient(145deg,rgba(243,190,76,.21),rgba(26,79,119,.5)); }
.ranking-podium-person { min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; }
.ranking-podium-person-content { position:relative; z-index:1; width:100%; min-width:0; margin-bottom:-1px; padding:13px 9px 14px; }
.ranking-podium-person h3 { overflow:hidden; margin:4px 0 0; color:#f3f9ff; font-size:clamp(15px,1.5vw,21px); font-weight:770; letter-spacing:-.04em; text-overflow:ellipsis; white-space:nowrap; }
.ranking-podium-person p { overflow:hidden; margin:4px 0 8px; color:#8fb2d0; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.ranking-podium-person-content > strong { color:#fff; font-size:27px; font-weight:800; letter-spacing:-.055em; line-height:1; }
.ranking-podium-person-content > strong span { color:#9bb9d3; font-size:11px; font-weight:650; letter-spacing:0; }
.ranking-podium-place { color:#a9c4dc; font-size:9px; font-weight:820; letter-spacing:.11em; text-transform:uppercase; }
.ranking-podium-1 .ranking-podium-place { color:#f9d987; }
.ranking-podium-avatar-wrap { position:relative; display:grid; place-items:center; width:90px; height:90px; }
.ranking-podium-1 .ranking-podium-avatar-wrap { width:111px; height:111px; margin-top:2px; }
.ranking-podium-2 .ranking-podium-avatar-wrap, .ranking-podium-3 .ranking-podium-avatar-wrap { margin-top:28px; }
.ranking-podium-1 .ranking-podium-avatar-wrap::before { content:""; position:absolute; inset:-10px; border:1px solid rgba(249,210,118,.58); border-radius:50%; box-shadow:0 0 0 7px rgba(249,210,118,.07),0 0 40px rgba(249,210,118,.16); }
.ranking-avatar { position:relative; isolation:isolate; flex:0 0 auto; display:inline-grid; place-items:center; overflow:hidden; width:44px; height:44px; border:1px solid rgba(57,192,213,.36); border-radius:50%; background:radial-gradient(circle at 27% 23%,#41c4d7 0%,transparent 39%),linear-gradient(145deg,#17699f,#0a2b61 75%); box-shadow:inset 0 1px 0 rgba(255,255,255,.29); vertical-align:middle; }
.ranking-avatar::before { content:""; position:absolute; inset:5px; border:1px solid rgba(255,255,255,.16); border-radius:50%; }
.ranking-avatar-initials { position:relative; color:#f2fcff; font-size:13px; font-weight:800; letter-spacing:-.04em; }
.ranking-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ranking-avatar img.ranking-demo-portrait { right:auto; bottom:auto; width:300%; height:200%; max-width:none; object-fit:fill; }
.ranking-avatar-podium { width:86px; height:86px; border:3px solid rgba(220,236,248,.74); box-shadow:0 11px 27px rgba(0,0,0,.25); }
.ranking-podium-1 .ranking-avatar-podium { width:106px; height:106px; border:4px solid #f9da8b; box-shadow:0 15px 35px rgba(0,0,0,.28),0 0 35px rgba(250,206,101,.19); }
.ranking-avatar-podium .ranking-avatar-initials { font-size:28px; }
.ranking-podium-medal { position:absolute; z-index:2; right:-5px; bottom:1px; display:grid; place-items:center; width:29px; height:29px; border:3px solid #082b54; border-radius:50%; color:#0e294d; font-size:12px; font-weight:900; box-shadow:0 4px 11px rgba(0,0,0,.18); }
.ranking-podium-1 .ranking-podium-medal { width:35px; height:35px; right:-2px; bottom:0; }
.ranking-medal-ouro { background:linear-gradient(140deg,#fff1aa,#e7a836); }
.ranking-medal-prata { background:linear-gradient(140deg,#fff,#aebfd1); }
.ranking-medal-bronze { background:linear-gradient(140deg,#f6cfaa,#bd8257); }
.ranking-podium-plinth { position:relative; display:grid; place-items:center; overflow:hidden; width:100%; height:67px; border:1px solid rgba(124,190,225,.35); border-bottom:0; border-radius:12px 12px 0 0; background:linear-gradient(145deg,rgba(64,151,202,.28),rgba(14,64,111,.43)); box-shadow:inset 0 1px 0 rgba(207,239,255,.15),0 -10px 32px rgba(13,162,192,.07); }
.ranking-podium-1 .ranking-podium-plinth { height:98px; border-color:rgba(247,212,122,.48); background:linear-gradient(145deg,rgba(243,190,76,.25),rgba(26,79,119,.5)); box-shadow:inset 0 1px 0 rgba(255,240,183,.32),0 -10px 36px rgba(250,199,72,.11); }
.ranking-podium-2 .ranking-podium-plinth { height:78px; }
.ranking-podium-plinth span { color:rgba(204,232,249,.42); font-size:34px; font-weight:850; letter-spacing:-.05em; }
.ranking-podium-1 .ranking-podium-plinth span { color:rgba(255,235,184,.52); font-size:49px; }
.ranking-podium-plinth i { position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); transform:skewX(-24deg) translateX(-58%); }
.ranking-stage-empty { display:flex; flex-direction:column; }
.ranking-stage-empty-body { display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; max-width:390px; margin:0 auto 25px; text-align:center; }
.ranking-stage-empty-icon { display:grid; place-items:center; width:78px; height:78px; border:1px solid rgba(136,213,229,.35); border-radius:22px; background:rgba(31,120,173,.18); color:#f0d277; box-shadow:0 0 0 9px rgba(66,169,203,.045); }
.ranking-stage-empty h3 { margin:19px 0 7px; color:#fff; font-size:19px; letter-spacing:-.03em; }
.ranking-stage-empty p { margin:0; color:#9bbbd7; font-size:11px; line-height:1.6; }
.ranking-content-grid { display:grid; grid-template-columns:minmax(0, 1.58fr) minmax(285px, .82fr); align-items:start; gap:18px; }
.ranking-board-panel, .ranking-personal, .ranking-history { min-width:0; border:1px solid var(--ranking-line); border-radius:18px; padding:21px; background:#fff; box-shadow:0 8px 23px rgba(14,49,91,.055); }
.ranking-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:17px; }
.ranking-section-heading h2 { margin:5px 0 0; color:#09264a; font-size:20px; font-weight:770; letter-spacing:-.04em; line-height:1.2; }
.ranking-section-heading p { margin:5px 0 0; color:#71849a; font-size:10px; line-height:1.4; }
.ranking-board-count { align-self:center; border:1px solid #dce9f2; border-radius:20px; padding:5px 10px; background:#f7fafc; color:#6c8097; font-size:9px; font-weight:760; white-space:nowrap; }
.ranking-board-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.ranking-board-row { display:grid; grid-template-columns:minmax(165px,1.55fr) repeat(2,minmax(65px,.54fr)) minmax(74px,.61fr) minmax(91px,.75fr) minmax(90px,.7fr); align-items:center; gap:9px; min-width:0; border:1px solid #e6edf4; border-radius:11px; padding:10px; background:#fff; transition:border-color .2s,background .2s,transform .2s,box-shadow .2s; }
.ranking-board-row:hover { transform:translateY(-1px); border-color:#b9dce9; background:#fbfdff; box-shadow:0 5px 15px rgba(17,82,124,.07); }
.ranking-board-me { border-color:#a5e0e9; background:#f4fcfd; }
.ranking-board-identity { display:flex; align-items:center; gap:7px; min-width:0; }
.ranking-list-place { width:24px; flex:0 0 24px; color:#637b97; font-size:14px; font-weight:790; text-align:center; }
.ranking-list-place.first { color:#c48a18; }
.ranking-avatar-list { width:35px; height:35px; flex-basis:35px; }
.ranking-avatar-list .ranking-avatar-initials { font-size:10px; }
.ranking-board-name { min-width:0; display:grid; gap:2px; }
.ranking-board-name strong { overflow:hidden; color:#102d52; font-size:11px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.ranking-board-name span { overflow:hidden; color:#7a8da2; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.ranking-board-stat { min-width:0; display:grid; gap:3px; }
.ranking-board-stat > span { overflow:hidden; color:#8493a6; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.ranking-board-stat strong { color:#173e6b; font-size:11px; font-weight:790; white-space:nowrap; }
.ranking-board-stat small { color:#7f91a6; font-size:8px; white-space:nowrap; }
.ranking-board-goal i { position:relative; display:block; overflow:hidden; width:100%; height:4px; border-radius:9px; background:#e9eff5; }
.ranking-board-goal i::before { content:""; display:block; width:var(--ranking-progress); height:100%; border-radius:inherit; background:linear-gradient(90deg,#1279b6,#22c3d1); }
.ranking-board-score { display:grid; gap:2px; text-align:right; }
.ranking-board-score strong { color:#092d56; font-size:18px; font-weight:850; letter-spacing:-.045em; white-space:nowrap; }
.ranking-board-score small { color:#6b8ca5; font-size:9px; font-weight:700; letter-spacing:0; }
.ranking-board-score > span:not(.ranking-trend) { color:#6a8baa; font-size:8px; white-space:nowrap; }
.ranking-board-score .ranking-trend { justify-content:flex-end; }
.ranking-board-trend { display:none; }
.ranking-trend { display:inline-flex; align-items:center; gap:3px; color:#6c8296; font-size:9px; font-weight:750; }
.ranking-trend-up { color:#139a7d; }
.ranking-trend-down { color:#b8695e; }
.ranking-trend-new { color:#b5892c; }
.ranking-board-disclaimer { margin:12px 2px 0; color:#8797aa; font-size:9px; line-height:1.5; }
.ranking-board-empty, .ranking-personal-empty { display:grid; place-items:center; min-height:126px; border:1px dashed #d3e2ec; border-radius:11px; padding:24px; background:#f9fcfe; color:#6b839b; font-size:11px; line-height:1.5; text-align:center; }
.ranking-personal { border-color:#c5e6ea; background:linear-gradient(148deg,#fff 0%,#f6fcfe 100%); }
.ranking-person-picker { display:grid; gap:4px; color:#788ba1; font-size:9px; font-weight:750; }
.ranking-person-picker select { max-width:155px; min-height:31px; border:1px solid #dae7f0; border-radius:7px; padding:5px; background:#fff; color:#173e67; font-size:10px; }
.ranking-personal-main { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px 14px; align-items:center; border:1px solid #cbdfe9; border-radius:13px; padding:16px; background:linear-gradient(125deg,#e5f5f9,#f8fcff); }
.ranking-personal-portrait { position:relative; width:64px; height:64px; }
.ranking-avatar-personal { width:64px; height:64px; border:3px solid #fff; box-shadow:0 5px 14px rgba(20,84,128,.17); }
.ranking-avatar-personal .ranking-avatar-initials { font-size:19px; }
.ranking-personal-position { position:absolute; right:-5px; bottom:-5px; display:grid; place-items:center; min-width:28px; height:25px; border:2px solid #fff; border-radius:9px; padding:0 3px; background:#123f73; color:#fff; font-size:11px; font-weight:820; }
.ranking-personal-copy { min-width:0; }
.ranking-personal-copy > span { color:#278aa9; font-size:9px; font-weight:780; text-transform:uppercase; }
.ranking-personal-copy h3 { overflow:hidden; margin:2px 0 3px; color:#0b2b53; font-size:17px; letter-spacing:-.04em; text-overflow:ellipsis; white-space:nowrap; }
.ranking-personal-copy p { margin:0; color:#597b97; font-size:10px; line-height:1.4; }
.ranking-personal-pill { display:inline-flex; align-items:center; gap:4px; margin-top:8px; border:1px solid #aadce5; border-radius:30px; padding:4px 7px; background:#effbfc; color:#1389a5; font-size:9px; font-weight:790; }
.ranking-personal-score { grid-column:1/-1; display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; border-top:1px solid #cee7ed; padding-top:10px; }
.ranking-personal-score > span:first-child { color:#7395aa; font-size:8px; font-weight:830; letter-spacing:.11em; }
.ranking-personal-score strong { margin-left:auto; color:#0a3563; font-size:32px; font-weight:830; line-height:1; letter-spacing:-.06em; }
.ranking-personal-score small { color:#7997a8; font-size:9px; }
.ranking-personal-score .ranking-trend { flex-basis:100%; justify-content:flex-end; }
.ranking-personal-goals { display:grid; gap:10px; margin-top:15px; }
.ranking-goal-metric { display:grid; gap:5px; }
.ranking-goal-metric > div { display:flex; justify-content:space-between; gap:8px; color:#647d96; font-size:10px; }
.ranking-goal-metric strong { color:#153b69; font-size:10px; white-space:nowrap; }
.ranking-goal-track { display:block; overflow:hidden; width:100%; height:6px; border-radius:10px; background:#e9f0f6; }
.ranking-goal-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#1783c5,#20c5d5); }
.ranking-goal-metric small { color:#8797a8; font-size:9px; text-align:right; }
.ranking-personal-foot { display:flex; flex-wrap:wrap; gap:6px 12px; border-top:1px solid #e3edf2; margin-top:14px; padding-top:12px; color:#71869b; font-size:9px; line-height:1.4; }
.ranking-personal-foot button { border:0; padding:0; background:transparent; color:#0b89a9; font-size:9px; font-weight:780; text-decoration:underline; cursor:pointer; }
.ranking-history { padding:22px; }
.ranking-history .ranking-section-heading > svg { color:#d8aa40; }
.ranking-history-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:146px; border:1px dashed #d9e4ed; border-radius:12px; background:linear-gradient(145deg,#fcfeff,#f7fafc); color:#8395a8; text-align:center; }
.ranking-history-empty svg { color:#d2ad60; }
.ranking-history-empty strong { margin-top:9px; color:#506d88; font-size:12px; }
.ranking-history-empty p { max-width:340px; margin:6px 0 0; font-size:10px; line-height:1.5; }
.ranking-history-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:11px; }
.ranking-history-month { min-width:0; border:1px solid #e1e9f1; border-radius:11px; padding:14px; background:linear-gradient(160deg,#fff,#f8fbfe); }
.ranking-history-month header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:5px; border-bottom:1px solid #e8eef4; padding-bottom:10px; }
.ranking-history-month header > span { display:inline-flex; align-items:center; gap:6px; color:#173b65; font-size:11px; font-weight:800; text-transform:capitalize; }
.ranking-history-month header small { color:#638398; font-size:8px; }
.ranking-history-winners { display:grid; gap:10px; padding-top:10px; }
.ranking-history-winner { display:flex; align-items:center; gap:9px; min-width:0; }
.ranking-avatar-history { width:35px; height:35px; flex-basis:35px; }
.ranking-avatar-history .ranking-avatar-initials { font-size:10px; }
.ranking-history-winner > div { display:grid; gap:2px; min-width:0; }
.ranking-history-winner > div span { color:#be8e2b; font-size:7px; font-weight:850; letter-spacing:.1em; }
.ranking-history-winner strong { overflow:hidden; color:#14365d; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.ranking-history-winner small { color:#6f849a; font-size:8px; }
.ranking-history-winner > svg { flex:0 0 auto; margin-left:auto; color:#d4a23b; }
.ranking-homologate { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:9px; border:1px solid #f0dbab; border-radius:11px; padding:10px 14px; background:#fffaf0; color:#755a23; font-size:10px; }
.ranking-homologate > div:first-child { display:grid; gap:3px; }
.ranking-homologate strong { color:#5f4416; font-size:11px; }
.ranking-homologate span { color:#856e43; font-size:10px; }
.ranking-decision { display:flex; flex-wrap:wrap; gap:9px; width:100%; }
.ranking-decision label { display:grid; flex:1 1 180px; gap:5px; color:#755b2d; font-size:9px; font-weight:760; }
.ranking-decision select, .ranking-decision input { min-height:35px; border:1px solid #ead9b6; border-radius:7px; padding:7px 9px; background:#fff; color:#173a63; font-size:10px; }
.ranking-homologate button { border:1px solid #b98a2e; border-radius:7px; padding:7px 10px; background:#0b315b; color:#fff; font-size:10px; font-weight:770; cursor:pointer; }
.ranking-demo-notice { display:flex; align-items:center; gap:9px; border:1px solid #9edee8; border-radius:11px; padding:11px 14px; background:#e9fafc; color:#0e7894; }
.ranking-demo-notice strong, .ranking-demo-notice span { display:block; }
.ranking-demo-notice strong { font-size:10px; }
.ranking-demo-notice span { margin-top:2px; font-size:10px; line-height:1.4; }
.ranking-demo-chip { display:inline-flex; align-items:center; border:1px solid rgba(249,218,133,.66); border-radius:30px; padding:5px 10px; color:#ffe19b; background:rgba(255,225,155,.1); font-size:9px; font-weight:850; letter-spacing:.11em; }
.ranking-app-demo .ranking-stage { border-color:#367c9c; }
.ranking-app-demo .ranking-board-panel { border-color:#bddfe9; }
.ranking-rules { position:relative; isolation:isolate; overflow:hidden; min-width:0; border:1px solid #dce8f2; border-radius:18px; padding:23px clamp(18px,2.4vw,29px) 19px; background:radial-gradient(circle at 98% -16%,rgba(246,204,93,.14),transparent 32%),linear-gradient(145deg,#fff 0%,#f9fcff 100%); box-shadow:0 9px 26px rgba(14,49,91,.065); }
.ranking-rules::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#0e315f 0%,#167fb0 49%,#f4c752 100%); }
.ranking-rules-head { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:10px 18px; margin-bottom:18px; }
.ranking-rules-head h2 { margin:4px 0 0; color:#09264a; font-size:20px; font-weight:780; letter-spacing:-.04em; line-height:1.2; }
.ranking-rules-head p { max-width:650px; margin:5px 0 0; color:#71849a; font-size:10px; line-height:1.5; }
.ranking-rules-badge { display:inline-flex; align-items:center; align-self:center; gap:7px; flex:0 0 auto; min-height:27px; border:1px solid #ecd998; border-radius:999px; padding:5px 10px; background:#fff9e8; color:#8b661a; font-size:9px; font-weight:850; letter-spacing:.065em; text-transform:uppercase; }
.ranking-rules-badge::before { content:""; width:6px; height:6px; border-radius:50%; background:#eab938; box-shadow:0 0 0 3px rgba(234,185,56,.15); }
.ranking-rules-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; align-items:stretch; }
.ranking-rules-score-card, .ranking-rules-details, .ranking-rules-prize { min-width:0; border-radius:12px; padding:16px; }
.ranking-rules-score-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:5px; overflow:hidden; min-height:154px; border:1px solid #214a78; background:radial-gradient(circle at 100% 0%,rgba(47,180,208,.2),transparent 51%),linear-gradient(145deg,#08294f,#103c70); box-shadow:inset 0 1px 0 rgba(230,248,255,.13); color:#d8e9f6; }
.ranking-rules-score-card::after { content:""; position:absolute; right:-29px; bottom:-48px; width:100px; height:100px; border:1px solid rgba(156,216,237,.15); border-radius:50%; box-shadow:0 0 0 18px rgba(156,216,237,.035); pointer-events:none; }
.ranking-rules-score-card h3 { position:relative; z-index:1; margin:7px 0 0; color:#fff; font-size:15px; font-weight:800; letter-spacing:-.02em; line-height:1.25; }
.ranking-rules-score-card p { position:relative; z-index:1; max-width:430px; margin:0; color:#aac9df; font-size:10px; line-height:1.5; }
.ranking-rules-score { position:relative; z-index:1; display:block; color:#f7d571; font-size:clamp(27px,2.5vw,36px); font-weight:850; letter-spacing:-.055em; line-height:1; font-variant-numeric:tabular-nums; }
.ranking-rules-score small, .ranking-rules-score span { color:#d8d9c4; font-size:10px; font-weight:730; letter-spacing:0; }
.ranking-rules-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) minmax(205px,.88fr); align-items:stretch; gap:11px; margin-top:11px; padding:0; }
.ranking-rules-detail { position:relative; min-width:0; border:1px solid #d8e7f1; border-radius:12px; padding:15px 16px 16px; background:#f4f9fd; color:#43647f; }
.ranking-rules-detail::before { content:""; position:absolute; top:16px; right:17px; width:7px; height:7px; border:1px solid #76c9d8; border-radius:2px; transform:rotate(45deg); }
.ranking-rules-detail > span { display:block; padding-right:15px; color:#1487a5; font-size:9px; font-weight:850; letter-spacing:.11em; line-height:1.35; }
.ranking-rules-detail h3 { margin:9px 0 5px; color:#143a65; font-size:13px; font-weight:800; letter-spacing:-.02em; line-height:1.3; }
.ranking-rules-detail p { margin:0; color:#627e96; font-size:10px; line-height:1.52; }
.ranking-rules-detail strong { color:#143a65; font-weight:800; }
.ranking-rules-prize { display:flex; flex-direction:column; justify-content:center; gap:5px; border:1px solid #e9d396; background:linear-gradient(145deg,#fff9e8,#fff3cf); color:#6d5118; box-shadow:inset 0 1px 0 #fff; }
.ranking-rules-prize > span, .ranking-rules-prize > small { display:inline-flex; align-items:center; gap:6px; color:#8f742f; font-size:9px; font-weight:800; letter-spacing:.05em; line-height:1.35; text-transform:uppercase; }
.ranking-rules-prize svg { flex:0 0 auto; color:#b68b2c; }
.ranking-rules-prize > strong { color:#16385b; font-size:clamp(21px,2.2vw,27px); font-weight:850; line-height:1.1; letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.ranking-rules-prize > p { margin:2px 0 0; color:#836f46; font-size:9px; line-height:1.4; }
.ranking-rules-footnote { display:flex; align-items:flex-start; gap:8px; border-top:1px solid #e2ebf2; margin-top:17px; padding-top:13px; color:#71859b; font-size:9px; line-height:1.55; }
.ranking-rules-footnote::before { content:"i"; flex:0 0 auto; display:grid; place-items:center; width:15px; height:15px; border:1px solid #a9c6d8; border-radius:50%; color:#4d88a7; font-size:9px; font-weight:850; line-height:1; }
.nav-link-ranking { font-size:11px; letter-spacing:-.01em; }
.nav-link-ranking .nav-glyph { color:#f4c752; }

@media (max-width:1280px) {
  .ranking-content-grid { grid-template-columns:minmax(0,1fr); }
  .ranking-rules-details { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ranking-rules-prize { grid-column:1/-1; min-height:108px; }
  .ranking-personal-main { grid-template-columns:auto minmax(0,1fr) auto; }
  .ranking-personal-score { grid-column:auto; display:grid; justify-items:end; border-top:0; border-left:1px solid #cee7ed; padding:0 0 0 15px; }
  .ranking-personal-score strong { margin:0; }
  .ranking-personal-score .ranking-trend { flex-basis:auto; }
  .ranking-personal-goals { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
}
@media (max-width:900px) {
  .ranking-hero { grid-template-columns:minmax(0,1fr) minmax(250px,300px); }
  .ranking-toolbar { gap:14px; }
  .ranking-filter-month { margin-left:0; }
  .ranking-board-row { grid-template-columns:minmax(145px,1.3fr) repeat(2,minmax(58px,.52fr)) minmax(70px,.6fr) minmax(86px,.65fr) minmax(80px,.6fr); gap:6px; padding:8px; }
}
@media (max-width:680px) {
  .ranking-app { gap:14px; }
  .ranking-hero { display:block; min-height:0; padding:26px 21px; }
  .ranking-hero h2 { font-size:36px; }
  .ranking-hero-meta { margin-top:17px; }
  .ranking-prize { min-height:156px; margin-top:22px; padding:17px; }
  .ranking-prize > strong { margin-top:9px; font-size:39px; }
  .ranking-prize p { min-height:0; margin-bottom:8px; }
  .ranking-toolbar { align-items:stretch; gap:12px; padding:13px; }
  .ranking-toolbar-group { flex:1 1 135px; }
  .ranking-toolbar-period { flex:1 1 100%; }
  .ranking-category-tabs, .ranking-period-tabs { width:100%; }
  .ranking-category-tabs button, .ranking-period-tabs button { flex:1; }
  .ranking-filter { flex:1 1 135px; }
  .ranking-stage { min-height:315px; padding:20px 12px 0; }
  .ranking-stage-head { padding-inline:7px; }
  .ranking-stage-head h2 { font-size:19px; }
  .ranking-stage-note { max-width:115px; text-align:right; }
  .ranking-podium { gap:5px; margin-top:17px; }
  .ranking-podium-person-content { padding-inline:3px; }
  .ranking-podium-person h3 { font-size:12px; }
  .ranking-podium-person p { font-size:8px; }
  .ranking-podium-place { font-size:7px; }
  .ranking-podium-person-content > strong { font-size:21px; }
  .ranking-podium-avatar-wrap, .ranking-podium-1 .ranking-podium-avatar-wrap { width:74px; height:74px; }
  .ranking-podium-2 .ranking-podium-avatar-wrap, .ranking-podium-3 .ranking-podium-avatar-wrap { margin-top:22px; }
  .ranking-avatar-podium, .ranking-podium-1 .ranking-avatar-podium { width:73px; height:73px; }
  .ranking-avatar-podium .ranking-avatar-initials { font-size:20px; }
  .ranking-podium-plinth { height:55px; }
  .ranking-podium-1 .ranking-podium-plinth { height:75px; }
  .ranking-podium-2 .ranking-podium-plinth { height:62px; }
  .ranking-stage-empty { min-height:315px; }
  .ranking-stage-empty-body { padding:20px; }
  .ranking-board-panel, .ranking-personal, .ranking-history { padding:16px; }
  .ranking-board-row { grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:11px; }
  .ranking-board-identity { grid-column:1; grid-row:1; }
  .ranking-board-score { grid-column:2; grid-row:1; }
  .ranking-board-stat { grid-row:2; }
  .ranking-board-stat:nth-of-type(2) { grid-column:1; }
  .ranking-board-stat:nth-of-type(3) { grid-column:2; text-align:right; }
  .ranking-board-stat:nth-of-type(4) { grid-column:1; grid-row:3; }
  .ranking-board-goal { grid-column:2; grid-row:3; min-width:120px; text-align:right; }
  .ranking-board-trend { display:none; }
  .ranking-personal-main { grid-template-columns:auto minmax(0,1fr); }
  .ranking-personal-score { grid-column:1/-1; display:flex; align-items:center; border-top:1px solid #cee7ed; border-left:0; padding:10px 0 0; }
  .ranking-personal-score strong { margin-left:auto; }
  .ranking-personal-goals { grid-template-columns:minmax(0,1fr); }
  .ranking-rules { padding:20px 16px 16px; }
  .ranking-rules-grid { grid-template-columns:minmax(0,1fr); }
  .ranking-rules-details { grid-template-columns:minmax(0,1fr); }
  .ranking-rules-prize { grid-column:auto; }
  .ranking-rules-score-card, .ranking-rules-details, .ranking-rules-prize { padding:15px; }
  .ranking-rules-details { padding:0; }
  .ranking-rules-score-card { min-height:116px; }
  .ranking-rules-prize { min-height:103px; }
}
@media (prefers-reduced-motion:reduce) {
  .ranking-app *, .ranking-app *::before, .ranking-app *::after { scroll-behavior:auto!important; transition:none!important; }
}