.ranking-page,
.ranking-page * { box-sizing: border-box; }

.ranking-page { margin: 0; background: var(--bg-app); color: var(--text-main); font-family: "Noto Sans Thai", sans-serif; }
.ranking-page .container { width: min(100% - 40px, 1180px); margin-inline: auto; }
.ranking-page .app-page-shell { display: grid; grid-template-columns: 210px minmax(0, 1fr); width: min(100%, 1440px); min-height: calc(100dvh - 69px); margin: 0 auto; }
.ranking-page .app-sidebar { position: sticky; top: 69px; align-self: start; min-height: calc(100dvh - 69px); padding: 20px 12px; border-right: 1px solid var(--border-color); background: var(--bg-surface); }
.ranking-page .app-sidebar nav { display: grid; gap: 4px; }
.ranking-page .app-sidebar a { display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 0 11px; border-radius: 6px; color: var(--text-main); font-size: 13px; font-weight: 700; text-decoration: none; }
.ranking-page .app-sidebar a:hover,
.ranking-page .app-sidebar a[aria-current="page"] { background: var(--brand-tint); color: var(--brand-primary); }
.ranking-page .app-sidebar svg { width: 17px; height: 17px; stroke-width: 1.8; }
.ranking-page .ranking-main { min-width: 0; padding: 20px 0 54px; }
.ranking-page h1 { overflow: hidden; margin: 0; font-size: 21px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.ranking-page .ranking-intro { max-width: 700px; margin: 5px 0 0; color: var(--text-muted); font-size: 11px; }
.ranking-page .ranking-intro summary { color: var(--brand-dark); font-weight: 700; cursor: pointer; }
.ranking-page .ranking-intro p { margin: 6px 0 0; line-height: 1.5; }
.ranking-page .ranking-filters { display: none; grid-column: 1 / -1; margin-top: 0; padding: 10px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: var(--shadow-card); }
.ranking-page .ranking-filters.filters-open { display: block; }
.ranking-page .mobile-filter-toggle { display: inline-flex; align-items: center; justify-content: center; justify-self: end; min-height: 34px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--bg-surface); color: var(--brand-dark); padding: 0 10px; font: 700 11px/1 "Noto Sans Thai", sans-serif; }
.ranking-page .ranking-filter-fields { display: grid; grid-template-columns: .8fr 1.15fr 1fr 1fr 112px; gap: 8px; }
.ranking-page .ranking-filter-fields label { min-width: 0; padding: 7px 9px; border: 1px solid var(--border-color); border-radius: 6px; }
.ranking-page .ranking-filter-fields label > span { display: block; overflow: hidden; color: var(--text-muted); font-size: 10px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.ranking-page .ranking-filter-fields select,
.ranking-page .ranking-filter-fields input { width: 100%; padding: 3px 0 2px; border: 0; outline: 0; background: transparent; color: var(--text-main); font: 600 12px/1.3 "Noto Sans Thai", sans-serif; }
.ranking-page .ranking-filter-fields input::placeholder { color: var(--text-muted); font-weight: 400; }
.ranking-page .ranking-search-button { min-height: 48px; border: 1px solid var(--brand-primary); border-radius: 6px; background: var(--brand-primary); color: #fff; font: 700 12px/1 "Noto Sans Thai", sans-serif; cursor: pointer; }
.ranking-page .ranking-member-search { max-width: 620px; margin-top: 18px; padding: 18px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: var(--shadow-card); }
.ranking-page .ranking-member-search p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.55; }
.ranking-page .line-login { min-height: 38px; margin-top: 12px; padding: 0 13px; border: 1px solid #06a94f; border-radius: 6px; background: #06a94f; color: #fff; font: 700 12px/1 "Noto Sans Thai", sans-serif; cursor: pointer; }
.ranking-page .line-login-mark { display: inline-grid; margin-right: 5px; padding: 3px; border-radius: 3px; background: #fff; color: #06a94f; font: 800 8px/1 sans-serif; }
.ranking-page .ranking-list { display: grid; gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.ranking-page .agent-ranking-card,
.ranking-page .ranking-state { padding: 16px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: var(--shadow-card); }
.ranking-page .agent-ranking-head { display: grid; grid-template-columns: 38px 64px minmax(0, 1fr) auto; gap: 13px; align-items: center; }
.ranking-page .ranking-place { color: var(--brand-primary); font: 700 22px/1 "DM Sans", sans-serif; text-align: center; }
.ranking-page .ranking-avatar-shell { position: relative; display: block; width: 64px; height: 64px; }
.ranking-page .ranking-avatar-shell.is-premium { padding: 3px; border: 2px solid #c99528; border-radius: 50%; background: #fff7df; }
.ranking-page .ranking-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--bg-app); }
.ranking-page .presence-dot { position: absolute; right: -1px; bottom: 1px; width: 13px; height: 13px; border: 2px solid var(--bg-surface); border-radius: 50%; background: #99a7a5; }
.ranking-page .presence-dot.is-online { background: var(--brand-primary); }
.ranking-page .premium-crown { position: absolute; top: -11px; left: 50%; padding: 2px 4px; transform: translateX(-50%); border-radius: 3px; background: #c99528; color: #fff; font: 800 7px/1 sans-serif; }
.ranking-page .ranking-agent { min-width: 0; }
.ranking-page .ranking-name { margin: 0; overflow-wrap: anywhere; font-size: 17px; line-height: 1.25; }
.ranking-page .ranking-name a { color: var(--text-main); text-decoration: none; }
.ranking-page .ranking-status-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.ranking-page .agent-level,
.ranking-page .premium-status,
.ranking-page .presence-label { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 5px; border-radius: 4px; background: var(--bg-app); color: var(--text-muted); font-size: 10px; font-weight: 700; }
.ranking-page .premium-status { background: #fff7df; color: #896419; }
.ranking-page .presence-label.is-online { background: var(--brand-tint); color: var(--brand-dark); }
.ranking-page .ranking-detail { margin: 3px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.45; }
.ranking-page .ranking-stars { color: #bd861c; letter-spacing: 1px; }
.ranking-page .ranking-actions { min-width: 104px; }
.ranking-page .ranking-line-button { width: 100%; min-height: 34px; border: 1px solid var(--brand-primary); border-radius: 6px; background: var(--brand-primary); color: #fff; font: 700 11px/1 "Noto Sans Thai", sans-serif; cursor: pointer; }
.ranking-page .ranking-line-button:disabled { border-color: var(--border-color); background: var(--bg-app); color: var(--text-muted); cursor: default; }
.ranking-page .ranking-listing-previews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-color); }
.ranking-page .ranking-listing-preview { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; min-width: 0; padding: 5px; border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-main); text-decoration: none; }
.ranking-page .ranking-listing-preview img { width: 62px; height: 62px; object-fit: cover; background: var(--bg-app); }
.ranking-page .ranking-listing-preview span { min-width: 0; }
.ranking-page .ranking-listing-preview b,
.ranking-page .ranking-listing-preview strong,
.ranking-page .ranking-listing-preview small,
.ranking-page .ranking-listing-preview em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-page .ranking-listing-preview b { color: var(--brand-primary); font-size: 9px; }
.ranking-page .ranking-listing-preview strong { margin-top: 2px; font-size: 11px; }
.ranking-page .ranking-listing-preview small { color: var(--text-muted); font-size: 9px; }
.ranking-page .ranking-listing-preview em { margin-top: 3px; color: var(--brand-dark); font-size: 9px; font-style: normal; font-weight: 700; }
.ranking-page .ranking-state { color: var(--text-muted); font-size: 13px; text-align: center; }

@media (max-width: 1080px) {
  .ranking-page .ranking-filter-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ranking-page .ranking-search-button { min-height: 42px; }
  .ranking-page .ranking-listing-previews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .ranking-page .container { width: 100%; }
  .ranking-page .app-page-shell { display: block; min-height: 0; }
  .ranking-page .app-sidebar { display: none; }
  .ranking-page .ranking-main { padding: 0 0 24px; }
  .ranking-page .ranking-heading-copy { padding: 14px 12px 0; }
  .ranking-page h1 { font-size: 18px; }
  .ranking-page .ranking-filters { margin: 10px 12px 0; }
  .ranking-page .ranking-filters.filters-open { display: block; }
  .ranking-page .mobile-filter-toggle { width: auto; margin: 0 12px 0 0; }
  .ranking-page .ranking-filter-fields { grid-template-columns: 1fr 1fr; }
  .ranking-page .ranking-agent-search,
  .ranking-page .ranking-search-button { grid-column: 1 / -1; }
  .ranking-page .ranking-member-search { margin: 12px; }
  .ranking-page .ranking-list { gap: 0; margin-top: 14px; }
  .ranking-page .agent-ranking-card,
  .ranking-page .ranking-state { padding: 12px; border-width: 0 0 1px; border-radius: 0; box-shadow: none; }
  .ranking-page .agent-ranking-head { grid-template-columns: 28px 50px minmax(0, 1fr); gap: 9px; }
  .ranking-page .ranking-place { font-size: 18px; }
  .ranking-page .ranking-avatar-shell { width: 50px; height: 50px; }
  .ranking-page .ranking-name { font-size: 15px; }
  .ranking-page .ranking-actions { grid-column: 2 / -1; min-width: 0; }
  .ranking-page .ranking-line-button { min-height: 32px; }
  .ranking-page .ranking-listing-previews { grid-template-columns: 1fr; margin-top: 10px; padding-top: 10px; }
  .ranking-page .ranking-listing-preview { grid-template-columns: 72px minmax(0, 1fr); }
  .ranking-page .ranking-listing-preview img { width: 72px; height: 62px; }
}