/* Shared breakpoints. Page styles remain in their own files. */
@media(min-width:1600px) {
.home-hero {
padding-top:110px;
padding-bottom:95px}

.home-main {
max-width:1180px}

}


@media(max-width:1260px) {
.home-main,.page-shell {
margin-left:32px;
margin-right:32px}

.site-footer {
margin-left:32px;
margin-right:32px}

.header-inner {
padding:0 32px;
gap:30px}

.result-grid {
grid-template-columns:minmax(0,1fr) 255px;
gap:20px}

.match-section {
padding:21px}

.match-summary {
grid-template-columns:4px 38px minmax(86px,1fr) 82px 142px 58px 13px;
gap:10px}

.match-rosters {
display:none}

.sidebar-section {
padding:22px}

.banner-summary {
gap:24px}

.admin-settings-grid {
grid-template-columns:1fr}

.admin-workspace {
margin-left:237px}

.admin-sidebar {
width:205px}

.admin-main {
padding-left:25px;
padding-right:25px}

.admin-header {
padding:0 25px}

.admin-stats {
gap:15px}

.admin-stats>div {
padding:21px}

.admin-stats .icon {
right:18px;
width:34px;
height:34px;
padding:9px}

}


@media(max-width:1040px) {
.auth-layout {
margin:38px 30px;
grid-template-columns:.85fr 1fr}

.auth-story {
padding:43px 30px}

.auth-story h1 {
font-size:27px}

.auth-panel {
padding:36px}

.feature-card {
padding:24px}

.desktop-nav {
gap:2px}

.desktop-nav a {
padding:9px 12px}

.home-hero {
padding-top:65px}

.player-banner {
padding:26px;
gap:20px}

.banner-summary {
gap:20px}

.banner-summary>div {
min-width:62px}

.banner-summary strong {
font-size:27px}

.player-identity h1 {
font-size:23px}

.profile-agent {
width:65px;
height:73px}

.account-layout {
grid-template-columns:210px minmax(0,1fr);
gap:20px}

.admin-date {
display:none}

.admin-stats strong {
font-size:29px}

.admin-stats .icon {
display:none}

.header-inner {
gap:24px}

}


@media(max-width:780px) {

 .site-header {
height:66px}

.header-inner {
padding:0 22px;
gap:12px}

.brand {
font-size:17px}

.brand img {
width:30px;
height:30px}

.desktop-nav {
display:none}

.header-actions {
gap:8px}

.header-actions .button {
padding:7px 12px;
font-size:11px}

.account-chip>span:last-child {
display:none}

.home-main,.page-shell {
margin:0 22px}

.home-hero {
padding:55px 0 45px}

.hero-kicker {
font-size:10px;
margin-bottom:19px}

.home-hero h1 {
font-size:35px}

.hero-description {
font-size:13px;
margin:15px 0 28px}

.search-input {
padding-left:16px;
gap:11px}

.search-input input {
font-size:13px}

.search-input .button {
padding:11px 18px}

.search-region {
padding-right:13px}

.hero-features {
gap:17px;
font-size:10px}

.hero-links {
font-size:11px}

.home-content {
padding-top:13px}

.section-description {
display:none}

.home-content>.section-heading h2 {
font-size:19px}

.feature-grid {
gap:13px}

.feature-card {
padding:21px 19px}

.feature-card h3 {
font-size:14px;
margin-top:18px}

.feature-card p {
font-size:11px}

.feature-card p br {
display:none}

.feature-action {
font-size:11px;
margin-top:21px}

.feature-icon {
width:37px;
height:37px;
border-radius:12px}

.home-bottom-grid {
grid-template-columns:1fr;
gap:26px;
margin-top:29px}

.home-tip {
padding:23px 0 0;
border-left:0;
border-top:1px solid var(--line)}


 .site-footer {
margin:40px 22px 0;
padding:24px 0 105px;
flex-wrap:wrap;
font-size:10px;
gap:14px}

.site-footer>div {
gap:18px}

.mobile-nav {
display:flex;
position:fixed;
left:16px;
right:16px;
bottom:calc(12px + env(safe-area-inset-bottom));
z-index:60;
justify-content:space-around;
align-items:center;
border:1px solid var(--line);
border-radius:20px;
padding:9px 8px;
background:var(--glass);
backdrop-filter:blur(20px);
box-shadow:0 8px 35px rgba(25,44,80,.1)}

.mobile-nav a {
display:flex;
flex:1;
flex-direction:column;
align-items:center;
gap:3px;
color:var(--muted);
font-size:9px;
padding:4px 8px;
border-radius:12px}

.mobile-nav a.active {
color:var(--blue);
background:var(--blue-soft)}

.mobile-nav a .icon {
height:20px;
width:20px}

.toast {
top:78px;
font-size:12px}

.loading-status {
font-size:11px;
max-width:calc(100% - 36px);
white-space:nowrap}

.admin-body .loading-status {
bottom:25px}

.page-shell {
padding-top:24px}

.page-title h1 {
font-size:25px}


 .auth-layout {
grid-template-columns:1fr;
max-width:460px;
margin:30px auto 0}

.auth-story {
display:none}

.auth-panel {
padding:33px 35px}

.utility-shell {
padding:30px 22px}

.setup-panel {
padding:29px}

.setup-panel>h1 {
font-size:24px}

.admin-login-panel {
margin:10px auto}

.admin-login-toolbar {
margin-bottom:22px}

.legal-copy {
padding:31px}

.legal-copy h1 {
font-size:25px}

.legal-copy h2 {
font-size:16px}


.player-banner {
flex-direction:column;
align-items:stretch;
padding:25px;
gap:23px}

.player-profile-main {
align-items:flex-start;
gap:20px}

.player-rank-card {
min-width:190px}

.banner-summary {
grid-column:auto;
padding-top:18px}

.player-identity h1 {
font-size:25px}

.banner-summary {
justify-content:space-between;
gap:20px;
border-top:1px solid var(--line);
padding-top:20px}

.banner-summary>div {
flex:1}

.banner-summary strong {
font-size:29px}

.result-grid {
grid-template-columns:1fr;
gap:22px}

.report-sidebar {
display:grid;
grid-template-columns:1fr 1fr;
gap:20px}

.sidebar-section {
margin-bottom:0}

.report-footnote {
grid-column:1/-1}

.match-summary {
grid-template-columns:4px 43px minmax(95px,1fr) 84px 138px 65px 15px;
gap:13px}

.match-detail {
padding:17px}

.demo-notice>a {
display:none}

.mobile-table-tip {
display:block;
font-size:10px;
color:var(--muted);
margin-bottom:10px}

.sync-label {
font-size:9px}


 .account-layout {
grid-template-columns:1fr;
gap:21px}

.account-sidebar {
position:static;
padding:18px}

.account-identity {
display:flex;
align-items:center;
gap:13px;
padding:0 0 17px;
text-align:left}

.large-avatar {
width:43px;
height:43px;
margin:0;
border-radius:14px;
font-size:21px;
box-shadow:none}

.account-identity h2 {
font-size:16px;
margin:0}

.account-identity .pill {
margin-left:auto}

.account-sidebar nav {
flex-direction:row;
gap:5px;
border-top:1px solid var(--line);
padding-top:15px}

.account-sidebar nav a {
flex:1;
justify-content:center;
padding:10px 8px;
gap:6px;
font-size:11px;
white-space:nowrap}

.account-sidebar nav a>.icon:last-child {
display:none}

.logout-button {
justify-content:center;
margin-top:14px;
padding:12px 0 0;
border-top:1px solid var(--line)}

.account-section {
padding:25px}

.account-metrics {
gap:17px}

.account-metric {
padding:23px}

.account-metric strong {
font-size:34px}

.vip-overview {
flex-direction:column;
align-items:flex-start}

.profile-layout-note {
display:none}

.vip-detail h2 {
font-size:22px}


 .admin-sidebar {
position:static;
inset:auto;
width:auto;
margin:14px 18px 0;
padding:17px 18px;
border-radius:17px;
flex-direction:row;
align-items:center;
flex-wrap:wrap;
gap:12px;
backdrop-filter:none}

.admin-sidebar .brand {
padding:0;
font-size:17px}

.admin-subtitle {
display:none}

.admin-sidebar nav {
order:3;
flex-direction:row;
width:100%;
gap:7px;
padding-top:12px;
border-top:1px solid var(--line)}

.admin-sidebar nav a {
flex:1;
justify-content:center;
padding:10px 7px;
font-size:11px;
gap:7px}

.admin-sidebar nav .icon {
width:16px;
height:16px}

.admin-sidebar-footer {
margin:0 0 0 auto;
display:flex;
gap:3px;
padding:0;
border:0}

.admin-sidebar-footer>a,.admin-sidebar-footer button {
padding:7px;
font-size:10px;
gap:4px}

.admin-sidebar-footer .icon {
width:14px;
height:14px}

.admin-workspace {
margin-left:0}

.admin-header {
height:67px;
padding:0 23px;
font-size:11px}

.admin-header>div {
gap:8px}

.admin-main {
padding:15px 20px 35px}

.admin-main .page-title {
margin-bottom:24px}

.admin-stats {
gap:12px;
margin-bottom:23px}

.admin-stats>div {
padding:18px}

.admin-stats span {
font-size:10px}

.admin-stats strong {
font-size:27px;
margin-top:11px}

.admin-table-toolbar {
padding:20px;
flex-wrap:wrap;
gap:15px}

.admin-search {
width:100%}

.admin-search input {
flex:1;
width:0}

.admin-table-tip {
padding:0 20px 14px;
font-size:10px}

.admin-section {
padding:25px}

.admin-settings-grid {
gap:22px}

.modal {
padding:20px}

.admin-user-table th,.admin-user-table td {
padding-left:15px;
padding-right:15px}


}


@media(max-width:520px) {

 .header-inner {
padding:0 18px}

.home-main,.page-shell {
margin:0 18px}

.home-hero {
padding-top:43px;
padding-bottom:35px}

.home-hero h1 {
font-size:30px}

.home-hero h1 span {
display:block}

.hero-description {
max-width:260px;
font-size:12px;
line-height:1.9;
margin-bottom:25px}

.search-region {
display:none}

.search-input {
padding:6px 6px 6px 13px;
gap:8px;
border-radius:15px}

.search-input input {
font-size:12px;
height:44px}

.search-input>.icon {
width:17px;
height:17px}

.search-input .button {
padding:10px 13px;
min-height:44px;
font-size:11px;
border-radius:10px}

.search-input .button .icon {
display:none}

.search-hint {
font-size:9px;
gap:8px;
padding-top:11px}

.hero-links {
gap:13px;
font-size:10px;
margin-top:14px}

.hero-features {
gap:13px;
font-size:9px;
flex-wrap:wrap;
justify-content:center;
margin-top:25px}

.hero-features .icon {
height:12px;
width:12px}

.hero-features>span {
gap:3px}

.feature-grid {
grid-template-columns:1fr;
gap:13px}

.feature-card {
display:grid;
grid-template-columns:43px 1fr;
column-gap:16px;
padding:22px}

.feature-card>.feature-icon {
grid-row:1/4;
margin-top:3px}

.feature-card h3 {
margin:0 0 7px;
font-size:15px}

.feature-card p {
font-size:12px}

.feature-action {
grid-column:2;
margin-top:14px}

.home-content>.section-heading {
margin-bottom:19px}

.home-content>.section-heading h2 {
font-size:19px}

.empty-inline {
gap:12px;
flex-wrap:wrap}

.empty-inline>.text-link {
margin-left:56px}

.empty-inline p {
font-size:10px}

.home-bottom-grid {
gap:23px}

.home-tip {
gap:16px}

.home-tip p {
font-size:11px}

.site-footer {
margin-left:18px;
margin-right:18px}

.site-footer>div {
gap:17px}

.mobile-nav {
left:12px;
right:12px}

.toast {
padding:12px 13px;
font-size:11px;
gap:8px}

.toast-symbol {
width:21px;
height:21px}


 .auth-layout {
margin:24px 18px 0;
border-radius:21px}

.auth-panel {
padding:28px 25px}

.auth-title h2 {
font-size:25px}

.auth-tabs {
margin-bottom:23px}

.captcha-refresh {
flex-basis:115px}

.captcha-refresh img {
width:115px}

.agreement-line {
font-size:10px}

.auth-switch {
font-size:11px}

.utility-shell {
padding:25px 18px}

.setup-panel {
padding:27px 23px}

.setup-panel>h1 {
font-size:22px}

.setup-steps {
padding:16px 15px 16px 30px;
font-size:11px}

.environment-check {
gap:6px}

.environment-check .pill {
font-size:10px}

.legal-copy {
padding:29px 24px}

.legal-copy p {
font-size:12px}

.admin-login-toolbar {
font-size:11px}


 .result-breadcrumb {
font-size:10px;
gap:8px;
margin-bottom:19px}

.result-breadcrumb .text-link {
font-size:10px}

.result-breadcrumb .icon {
width:13px;
height:13px}

.demo-notice {
padding:11px;
font-size:10px;
gap:8px}

.demo-notice .pill {
font-size:9px;
padding:3px 6px}

.player-banner {
padding:22px;
gap:22px;
border-radius:18px}

.player-profile-main {
flex-direction:column;
align-items:stretch;
gap:22px}

.player-identity {
gap:15px}

.profile-agent {
width:88px;
height:88px;
border-radius:22px}

.profile-level {
bottom:-10px;
min-width:56px;
font-size:12px}

.player-identity h1 {
font-size:28px;
font-weight:700}

.player-identity h1>span {
font-size:10px;
margin-left:6px}

.player-rank-card {
min-width:0;
display:flex;
gap:16px;
padding:15px 0 0;
border-left:0;
border-top:1px solid var(--line)}

.rank-card-current,
.rank-card-side {
min-width:0;
flex:1}

.rank-card-side {
padding-left:16px}

.rank-card-main img {
width:44px;
height:44px}

.rank-card-copy>strong {
font-size:15px}

.banner-summary strong {
font-size:26px}

.banner-summary span {
font-size:10px}

.banner-summary em {
font-size:11px}

.rank-card-stats {
margin-top:11px;
padding-top:10px}

.rank-card-stats b {
font-size:13px}

.rank-card-stats small,
.rank-card-latest>span,
.rank-card-latest>small {
font-size:10px}

.rank-card-latest {
margin-top:10px;
padding-top:9px}

.rank-card-flags {
margin-top:8px}

.banner-summary {
gap:0}

.banner-summary>div {
padding:0 10px}

.match-section {
padding:20px 12px}

.match-section .section-heading {
padding:0 4px;
gap:7px;
margin-bottom:18px}

.match-section .section-heading h2 {
font-size:17px}

.sync-label {
font-size:8px}

.sync-label .icon {
display:none}

.mode-filter {
gap:6px;
margin-bottom:16px}

.mode-filter button {
padding:7px 9px;
font-size:10px}

.match-summary {
grid-template-columns:3px 30px minmax(0,1fr) 48px 10px;
grid-template-areas:
"bar agent map outcome expand"
"bar kda kda kda expand"
"bar combat combat combat expand"
"bar roster roster roster expand";
gap:8px 7px;
padding:14px 9px 14px 0}

.result-bar {
grid-area:bar;
width:3px;
height:88px}

.match-agent {
grid-area:agent;
height:42px;
width:34px;
border-radius:9px}

.match-map {
grid-area:map}

.match-outcome {
grid-area:outcome}

.match-kda {
grid-area:kda;
text-align:left}

.match-combat-stats {
grid-area:combat;
grid-template-columns:repeat(4,minmax(0,1fr))}

.match-rosters {
display:flex;
grid-area:roster;
justify-content:flex-start}

.match-roster>span {
width:20px;
height:24px}

.match-expand {
grid-area:expand}

.match-map strong {
font-size:11px}

.match-map small {
font-size:9px;
line-height:1.7}

.match-outcome {
font-size:9px}

.match-outcome strong {
font-size:15px}

.match-kda strong {
font-size:12px}

.match-kda small {
font-size:9px}

.match-combat-stats {
gap:4px 6px}

.match-combat-stats strong {
font-size:9px}

.match-combat-stats small {
font-size:9px}

.match-expand {
font-size:18px}

.match-detail {
padding:13px 10px}

.match-detail-head {
flex-wrap:wrap;
gap:11px}

.detail-tabs button {
font-size:10px;
padding:6px 9px}

.duration-label {
font-size:9px}

.report-sidebar {
grid-template-columns:1fr}

.sidebar-section {
padding:24px}

.report-footnote {
padding:0 5px}

.kill-event {
gap:8px;
font-size:10px}

.round-list {
grid-template-columns:1fr}

#match-pagination {
gap:6px}

#match-pagination button {
min-width:88px;
font-size:10px}

#page-label {
font-size:10px;
padding:5px 8px}


 .page-title h1 {
font-size:24px}

.page-title p {
font-size:12px}

.account-sidebar {
padding:16px}

.account-sidebar nav {
gap:2px}

.account-sidebar nav a {
font-size:10px;
padding:10px 5px;
gap:5px}

.account-sidebar nav a>.icon {
width:14px;
height:14px}

.account-identity h2 {
font-size:15px}

.account-identity .pill {
font-size:10px}

.account-metrics {
gap:13px}

.account-metric {
padding:20px 17px}

.account-metric>span {
font-size:10px}

.account-metric strong {
font-size:31px}

.account-metric p {
font-size:10px}

.account-section {
padding:24px 21px}

.account-section h2 {
font-size:17px}

.account-facts>div {
font-size:11px}

.vip-detail h2 {
font-size:20px}

.vip-validity strong {
font-size:19px}

.two-fields {
grid-template-columns:1fr;
gap:0}


 .admin-sidebar {
margin:12px 14px 0;
padding:15px 13px;
gap:10px}

.admin-sidebar .brand {
font-size:15px;
gap:7px}

.admin-sidebar .brand img {
width:27px;
height:27px}

.admin-sidebar-footer>a,.admin-sidebar-footer button {
font-size:9px;
padding:5px}

.admin-sidebar-footer .icon {
width:12px;
height:12px}

.admin-header {
padding:0 19px}

.admin-header .pill {
font-size:9px}

.admin-main {
padding:12px 16px 30px}

.admin-title-group h1 {
font-size:25px}

.admin-stats {
gap:9px}

.admin-stats>div {
padding:17px 13px;
border-radius:16px}

.admin-stats span {
font-size:9px}

.admin-stats strong {
font-size:25px}

.admin-section {
padding:24px 21px}

.modal {
padding:18px}

.modal-heading h2 {
font-size:16px}


}


@media(max-width:360px) {
.home-hero h1 {
font-size:28px}

.header-actions .button {
padding:6px 10px}

.brand {
font-size:15px}

.match-summary {
gap:5px;
grid-template-columns:3px 27px minmax(0,1fr) 44px 8px}

.match-kda strong {
font-size:11px}

.match-agent {
width:27px}

.account-sidebar nav a {
font-size:9px}

.admin-sidebar-footer>a {
display:none}

}