/* Member tools fit within the existing modal, including mobile keyboards. */
#modal.member-access299{width:min(680px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:hidden}
#modal.member-access299 .dialog-content{max-height:calc(100dvh - 120px);overflow-y:auto;overscroll-behavior:contain;min-width:0}
.member-detail299>header{display:flex;justify-content:space-between;align-items:center;gap:16px}
.member-detail299>header h3{margin:0;font-size:22px;overflow-wrap:anywhere}
.member-detail299>header p{margin:6px 0 0;color:var(--muted)}
.member-detail299 dl{grid-template-columns:120px minmax(0,1fr);gap:10px 18px}
.member-detail299 dd{overflow-wrap:anywhere;min-width:0}
.member-primary299,.member-form-row299{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.member-primary299 .btn{width:100%;min-height:46px;display:flex;gap:7px;justify-content:center;align-items:center;font-size:14px}
.member-help299{font-size:13px;line-height:1.65;color:var(--muted);margin:12px 0}
.member-gifts299{margin-top:24px;border-top:1px solid var(--line);padding-top:16px}
.member-gifts299 h4{font-size:16px;margin:0 0 12px}
.member-gifts299 article{border:1px solid var(--line);border-radius:12px;padding:14px;margin:8px 0;overflow-wrap:anywhere}
.member-gifts299 article>div{display:flex;justify-content:space-between;gap:12px;align-items:center}
.member-gifts299 article p{font-size:13px;margin:8px 0;line-height:1.6}
.member-gifts299 article small{display:block;color:var(--muted);font-size:12px}
.member-gifts299 .text-btn{margin-top:10px}.gift-state299{font-size:12px;color:var(--muted);white-space:nowrap}
.member-other299{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.member-other299 summary{cursor:pointer;font-size:14px;font-weight:650}
.gift-presets299{display:flex;flex-wrap:wrap;gap:7px}
.gift-presets299 button{border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--text);padding:8px 12px;cursor:pointer}
.gift-preview299{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--bg);font-size:14px;line-height:1.7}
.member-form299 input,.member-form299 select{min-width:0;width:100%;box-sizing:border-box}
.member-password-result299{line-height:1.7}.member-password-result299 label{display:grid;gap:8px;margin:16px 0}
#temporaryPassword299{width:100%;font:16px/1.5 monospace;padding:12px;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;color:var(--text);background:var(--bg)}
.force-password299{width:min(470px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid var(--line);border-radius:20px;padding:28px;box-sizing:border-box;background:var(--card,#fff);color:var(--text,#17253b)}
.force-password299::backdrop{background:#10182be0;backdrop-filter:blur(6px)}
.force-password299 h2{font-size:24px;margin:0}.force-password299 p{line-height:1.7}
/* Legacy ranking grids used fixed row heights inside a shrinking page. */
html body[data-view=ranking] #main.content{overflow-y:auto!important;overflow-x:hidden!important;min-height:0!important;max-height:calc(100dvh - var(--top-height,64px));overscroll-behavior:contain;scroll-padding-bottom:24px}
html body[data-view=ranking] #main>.page{height:auto!important;max-height:none!important;min-height:0!important;flex:none!important;display:block!important;overflow:visible!important;padding-bottom:24px}
html body[data-view=ranking] #main .ranking283{flex:none!important;min-height:0!important;height:auto!important;max-height:none!important;overflow:visible!important;align-self:stretch;width:100%;box-sizing:border-box}
html body[data-view=ranking] #main .ranking287{padding-bottom:8px;max-width:1320px}
html body[data-view=ranking] #main .ranking287 .welcome{margin-bottom:10px}
html body[data-view=ranking] #main .ranking287 .welcome h1{margin:0 0 4px;font-size:27px}
html body[data-view=ranking] #main .rank-toolbar287{margin-bottom:12px;gap:8px}
html body[data-view=ranking] #main .rank-layout287{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto;align-items:stretch;gap:12px;height:auto;min-height:0;max-height:none}
html body[data-view=ranking] #main .rank-hero{grid-column:1/9;grid-row:1;min-height:118px!important;height:auto!important;padding:16px 20px;box-sizing:border-box}
html body[data-view=ranking] #main .rank-hero h2{font-size:21px;line-height:1.35;margin:10px 0}
html body[data-view=ranking] #main .rank-hero h2 br{display:none}
html body[data-view=ranking] #main .rank-hero p{display:none!important}
html body[data-view=ranking] #main .rank-hero-avatar{height:112px!important;width:106px!important;flex:0 0 106px!important;min-width:0}
html body[data-view=ranking] #main .rank-hero-avatar>.cogo-avatar{height:100px!important;width:88px!important;margin:0 auto 16px!important}
html body[data-view=ranking] #main .rank-metrics{grid-column:9/13;grid-row:1;min-width:0;gap:0;padding:8px 14px}
html body[data-view=ranking] #main .rank-metrics>div{padding:6px 0;min-width:0;flex-wrap:wrap}
html body[data-view=ranking] #main .rank-metrics strong{font-size:21px;white-space:normal;overflow-wrap:anywhere}
html body[data-view=ranking] #main .ranking-board{grid-column:1/10;grid-row:2;height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important;padding:16px;box-sizing:border-box}
html body[data-view=ranking] #main .rank-row287{grid-template-columns:48px minmax(0,1fr) minmax(64px,auto);height:auto!important;min-height:46px;gap:8px;padding:5px 6px;box-sizing:border-box}
html body[data-view=ranking] #main .rank-row287.heading{min-height:30px}
html body[data-view=ranking] #main .rank-person287{min-width:0;gap:8px;white-space:normal}
html body[data-view=ranking] #main .rank-person287>span{min-width:0;overflow-wrap:anywhere;line-height:1.4}
html body[data-view=ranking] #main .pager287{flex-wrap:wrap;min-height:42px;gap:8px;padding-top:10px}
html body[data-view=ranking] #main .pager287 button{min-height:40px}
html body[data-view=ranking] #main .rank-podium287{grid-column:10/13;grid-row:2;height:auto;min-height:0;padding:16px 12px;overflow:visible}
html body[data-view=ranking] #main .podium-people287{margin:14px 0;min-height:0}
html body[data-view=ranking] #main .rank-note287{margin:10px 0 0;overflow-wrap:anywhere}
@media(max-width:1050px){
 html body[data-view=ranking] #main .ranking-board{grid-column:1/13}
 html body[data-view=ranking] #main .rank-podium287{grid-column:1/13;grid-row:3;display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,1fr);gap:12px;align-items:center}
 html body[data-view=ranking] #main .podium-people287{grid-column:2;grid-row:1/4;max-width:320px;justify-self:center;width:100%}
 html body[data-view=ranking] #main .rank-podium287>p{margin:0;padding:0;border:0}
 html body[data-view=ranking] #main .rank-podium287>.btn{margin:0}
}
@media(max-width:700px){
 html body[data-view=ranking] #main.content{padding:16px 12px calc(86px + env(safe-area-inset-bottom,0px))!important;scroll-padding-bottom:90px;max-height:calc(100dvh - 54px)}
 html body[data-view=ranking] #main .rank-toolbar287{align-items:stretch}.rank-toolbar287>.segmented{min-width:0;flex-wrap:wrap}
 html body[data-view=ranking] #main .rank-hero{grid-column:1/13;grid-row:1;padding:16px;min-height:112px!important}
 html body[data-view=ranking] #main .rank-hero h2{font-size:19px}
 html body[data-view=ranking] #main .rank-metrics{grid-column:1/13;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:10px 12px}
 html body[data-view=ranking] #main .rank-metrics>div{display:block;padding:0}
 html body[data-view=ranking] #main .rank-metrics strong{font-size:20px;margin-top:5px}
 html body[data-view=ranking] #main .ranking-board{grid-row:3;padding:12px}
 html body[data-view=ranking] #main .rank-row287{grid-template-columns:34px minmax(0,1fr) minmax(54px,auto);gap:6px;padding:6px 2px}
 html body[data-view=ranking] #main .rank-row287 strong{font-size:18px}
 html body[data-view=ranking] #main .rank-person287 .face285{width:30px;height:30px;flex-basis:30px}
 html body[data-view=ranking] #main .rank-podium287{grid-row:4;display:flex}
 html body[data-view=ranking] #main .ranking-board .section-head{align-items:flex-start;gap:10px}
 html body[data-view=ranking] #main .ranking-board .section-head h2{font-size:16px}
 #modal.member-access299 .dialog-content{padding:16px}.member-primary299,.member-form-row299{grid-template-columns:1fr}
 .member-detail299 dl{grid-template-columns:96px minmax(0,1fr);gap:10px}.member-detail299>header{align-items:flex-start}
 .member-form299 input,.member-form299 select,.force-password299 input{font-size:16px!important}
}