.profile-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 14% 8%, rgba(229, 59, 51, .12), transparent 25rem),
    linear-gradient(180deg, #0b0d0f 0, #090a0b 38rem);
}

.profile-page .site-header {
  position: relative;
  left: auto;
  transform: none;
  margin: 0 auto;
}

.profile-page .main-nav .active { color: #fff; }
.profile-page .main-nav .active::after { content: ""; display: block; height: 2px; margin-top: 5px; background: var(--red); }
.profile-page .nav-cta { color: #fff; background: transparent; cursor: pointer; font: inherit; }
.steam-login svg, .steam-profile-button svg { width: 19px; height: 19px; fill: currentColor; flex: 0 0 auto; }

.profile-shell {
  width: min(calc(100% - 48px), 1120px);
  margin: 0 auto;
  padding: 42px 0 110px;
}

.demo-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  padding: 12px 16px;
  border: 1px solid rgba(229, 59, 51, .25);
  background: rgba(229, 59, 51, .06);
  color: #aeb2b6;
  font-size: .86rem;
}

.demo-banner > span:first-child {
  flex: 0 0 auto;
  padding: 4px 8px;
  background: var(--red);
  color: #fff;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.demo-banner [data-stats-status] { min-width: 0; line-height: 1.6; overflow-wrap: anywhere; }
.chart-detail { min-height: 1.6em; color: #aeb2b6; font-size: .8rem; }
.stats-bar { padding: 0; border: 0; cursor: pointer; }
.stats-bar:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.stat-card small, .panel-title p, .connection-card p { color: #969fa7; }
.stat-card span, .chart-axis { color: #9aa4ad; }

.player-header {
  display: grid;
  grid-template-columns: 104px 1fr auto;
  gap: 26px;
  align-items: center;
  padding: 34px 0 42px;
  border-bottom: 1px solid var(--line);
}

.player-avatar {
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(145deg, #1b1f22, #0d0f11);
  box-shadow: inset 0 0 40px rgba(229, 59, 51, .08);
}

.player-avatar .brand-mark { width: 45px; height: 45px; opacity: .9; }
.player-avatar .brand-mark i { height: 56px; left: 20px; top: -7px; }
.player-avatar .brand-mark b { width: 56px; top: 20px; left: -7px; }
.player-tags { display: flex; gap: 8px; margin-bottom: 8px; }
.player-tags span { padding: 4px 9px; border: 1px solid var(--line); color: #969ca1; font-size: .68rem; font-weight: 650; letter-spacing: .11em; text-transform: uppercase; }
.player-tags .vip-tag { border-color: rgba(229, 59, 51, .48); color: #ff665e; }
.player-identity h1 { font-family: Inter, "Segoe UI", Arial, sans-serif; font-size: clamp(2rem, 4vw, 3.45rem); font-weight: 750; line-height: 1.02; letter-spacing: -.025em; }
.player-identity p { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; color: #6f777e; font-size: .8rem; }
.player-identity p i { width: 3px; height: 3px; border-radius: 50%; background: #53595e; }

.steam-profile-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 17px;
  border: 1px solid #30353a;
  background: #14171a;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}

.steam-profile-button:hover { border-color: #fff; background: #1b1f23; }
.statistics { padding-top: 65px; }
.statistics-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 25px; }
.statistics-heading .kicker { margin-bottom: 9px; }
.statistics-heading h2 { font-family: Inter, "Segoe UI", Arial, sans-serif; font-size: clamp(2.35rem, 4.2vw, 4rem); font-weight: 750; line-height: .98; letter-spacing: -.035em; text-transform: uppercase; }

.period-switch { display: inline-flex; padding: 4px; border: 1px solid var(--line); background: #0d0f11; }
.period-switch button { min-height: 38px; padding: 0 15px; border: 0; background: transparent; color: #747c83; font-size: .74rem; font-weight: 700; text-transform: uppercase; cursor: pointer; }
.period-switch button:hover { color: #fff; }
.period-switch button.active { background: #24282c; color: #fff; box-shadow: inset 0 -2px var(--red); }

.stats-panel { border: 1px solid var(--line); background: rgba(16, 18, 20, .88); backdrop-filter: blur(12px); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat-card { min-height: 145px; padding: 26px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-card:nth-child(4n) { border-right: 0; }
.stat-card:nth-child(n+5) { border-bottom: 0; }
.stat-card span { display: block; color: #65717b; font-size: .67rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.stat-card strong { display: block; margin-top: 10px; font-family: Inter, "Segoe UI", Arial, sans-serif; font-size: 1.62rem; font-weight: 720; letter-spacing: -.02em; line-height: 1.12; }
.stat-card strong b { font: inherit; }
.stat-card small { display: block; margin-top: 7px; color: #596168; font-size: .72rem; }
.stat-primary { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(229, 59, 51, .15), transparent 70%); }
.stat-primary::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red); }

.activity-panel, .sessions-panel { padding: 30px 24px; border-top: 1px solid var(--line); }
.panel-title { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.panel-title span { color: #899198; font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.panel-title p { margin: 5px 0 0; color: #5f676e; font-size: .76rem; }
.panel-title > strong { color: #899198; font-size: .78rem; font-weight: 650; }

.chart { height: 190px; display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: 9px; margin-top: 28px; padding-top: 16px; border-bottom: 1px solid #2a2e32; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 48px); }
.activity-bar { position: relative; height: var(--bar); min-height: 8px; border: 0; background: linear-gradient(180deg, #ee4c43, #8f211c); cursor: help; transition: height .35s ease, filter .2s; }
.activity-bar::after { content: attr(data-hours); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); padding: 4px 7px; background: #f3f4f4; color: #111; font-size: .68rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; }
.activity-bar:hover, .activity-bar:focus-visible { filter: brightness(1.25); outline: 1px solid #fff; outline-offset: 2px; }
.activity-bar:hover::after, .activity-bar:focus-visible::after { opacity: 1; }
.chart-axis { display: flex; justify-content: space-between; margin-top: 8px; color: #515a62; font-size: .66rem; }

.sessions-panel { border-top-color: var(--line); }
.session-list { margin-top: 20px; }
.session-list article { min-height: 70px; display: grid; grid-template-columns: 1.3fr .8fr .45fr; gap: 24px; align-items: center; border-top: 1px solid rgba(255,255,255,.07); }
.session-list div { display: grid; gap: 3px; }
.session-list b { font-size: .86rem; font-weight: 650; }
.session-list span, .session-list time { color: #606970; font-size: .72rem; }
.session-list strong { text-align: right; font-size: .84rem; font-weight: 700; }

.connection-card { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-top: 22px; padding: 20px 22px; border: 1px solid rgba(255,255,255,.1); background: #0d0f11; }
.connection-card > div { display: flex; align-items: center; gap: 15px; }
.connection-icon { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--red); color: var(--red); font-weight: 900; }
.connection-card p { margin: 0; color: #686f75; font-size: .78rem; }
.connection-card p strong { display: block; color: #d7d9da; font-size: .84rem; }
.connection-card a { flex: 0 0 auto; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.connection-card a span { color: var(--red); margin-left: 8px; }
.profile-page footer { border-top: 1px solid var(--line); }

@media (max-width: 1000px) {
  .profile-page .main-nav { gap: 22px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-card:nth-child(4n) { border-right: 1px solid var(--line); }
  .stat-card:nth-child(2n) { border-right: 0; }
  .stat-card:nth-child(n+5) { border-bottom: 1px solid var(--line); }
  .stat-card:last-child { border-bottom: 0; }
}

@media (max-width: 760px) {
  .profile-shell { width: calc(100% - 32px); padding-top: 24px; }
  .profile-page .main-nav { gap: 28px; }
  .demo-banner { align-items: flex-start; flex-direction: column; }
  .player-header { grid-template-columns: 76px 1fr; gap: 17px; padding-top: 25px; }
  .player-avatar { width: 76px; height: 76px; }
  .player-avatar .brand-mark { transform: rotate(45deg) scale(.72); }
  .player-identity h1 { font-size: clamp(2rem, 10vw, 3rem); }
  .player-identity p { display: block; }
  .player-identity p i { display: none; }
  .steam-profile-button { grid-column: 1 / -1; justify-content: center; width: 100%; }
  .statistics { padding-top: 48px; }
  .statistics-heading { align-items: stretch; flex-direction: column; }
  .period-switch { align-self: stretch; }
  .period-switch button { flex: 1; padding: 0 8px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-card { min-height: 132px; padding: 21px 17px; }
  .stat-card strong { font-size: 1.55rem; }
  .activity-panel, .sessions-panel { padding: 24px 16px; }
  .panel-title > strong { display: none; }
  .chart { height: 155px; gap: 4px; }
  .activity-bar::after { display: none; }
  .session-list article { grid-template-columns: 1fr auto; gap: 8px 18px; padding: 14px 0; }
  .session-list time { grid-column: 1; }
  .session-list strong { grid-column: 2; grid-row: 1 / span 2; }
  .connection-card { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 430px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card { min-height: 120px; border-right: 0 !important; }
  .stat-card:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .stat-card:last-child { border-bottom: 0; }
}

[data-chart]{display:flex;align-items:flex-end;gap:3px;min-height:140px;height:140px}.stats-bar{flex:1;min-width:1px;background:#aa862d;border-radius:3px 3px 0 0}.session-list p{padding:12px 0;border-bottom:1px solid #ffffff15}
.player-avatar { border-radius:12px; overflow:hidden; }
.player-avatar > .steam-avatar { width:100%; height:100%; border-radius:0; }
.player-avatar > .steam-avatar svg { width:46px; height:46px; }
.player-identity { min-width:0; }
.player-identity h1 { overflow-wrap:anywhere; text-transform:none; }
.stats-bar { min-width: 0; }
@media(max-width:760px) { [data-chart] { gap: 1px; } }
.stat-card small, .panel-title p, .connection-card p { color: #969fa7; }
.stat-card span, .chart-axis { color: #9aa4ad; }
/* Account refresh: concise hierarchy, explicit status and accessible controls. */
.profile-shell{padding-top:28px;padding-bottom:70px}.player-header{padding:16px 0 28px;grid-template-columns:80px minmax(0,1fr) auto;gap:22px}.player-avatar{width:80px;height:80px}.player-identity h1{font-size:clamp(1.8rem,3.6vw,3rem)}.demo-banner{margin-bottom:18px;font-size:.78rem}.player-identity p{color:#a1aab4;flex-wrap:wrap}.account-shortcuts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:22px 0}.account-shortcuts a{display:flex;justify-content:space-between;gap:12px;padding:14px 16px;background:#141b22;border:1px solid #333e49;font-size:.83rem}.account-shortcuts span{color:#d89d79}.account-shortcuts a:hover{border-color:#bd6550;background:#1d242c}.account-overview{display:grid;grid-template-columns:1fr 1fr;gap:18px;scroll-margin-top:30px}.account-vip,.account-orders{padding:28px;border:1px solid #333d46;background:#11171d}.account-vip{background:radial-gradient(ellipse at top left,#bb593724,transparent 80%),#11171d;border-top:2px solid #c68f67}.account-overview h2{font-size:1.5rem;line-height:1.2;letter-spacing:-.025em;margin:0 0 14px;text-transform:none}.account-vip>p:not(.kicker){color:#b4bec8;font-size:.88rem;line-height:1.7;min-height:3em}.account-vip>small{display:block;color:#929eaa;font-size:.72rem;line-height:1.7;margin-top:20px}.vip-expiry{padding:14px 0;border-top:1px solid #35404a}.vip-expiry span{display:block;font-size:.72rem;color:#9ca7b3;margin-bottom:6px}.vip-expiry strong{font-size:1rem;color:#ecd2ac}.account-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.account-actions .button{font-size:.73rem;padding:12px 18px;min-height:44px}.account-actions button:disabled{opacity:.6;cursor:wait}.account-panel-heading{display:flex;align-items:baseline;justify-content:space-between;gap:14px}.account-panel-heading>span{font-size:.7rem;color:#9ba5b0}.account-panel-heading h2{font-size:1.2rem}.account-order{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid #2d363f}.account-order strong{font-size:.83rem}.account-order small{display:block;margin-top:5px;color:#a2acb6;font-size:.7rem}.order-state{font-size:.7rem;text-align:right;color:#d2b690}.order-state.is-active{color:#91c9aa}.account-help{display:block;margin-top:20px;font-size:.76rem;color:#cdb394}.account-empty{color:#9da8b4;min-height:70px;padding-top:14px;font-size:.85rem}.account-orders [data-account-orders]{max-height:285px;overflow:auto;scrollbar-width:thin}.statistics{padding-top:38px}.statistics-heading{margin-bottom:20px;gap:20px;scroll-margin-top:24px}.statistics-heading h2{font-size:clamp(1.7rem,3vw,2.6rem);text-transform:none}.stat-card{min-height:125px;padding:22px 18px}.stat-card strong{font-size:1.5rem}.stat-card small{line-height:1.6}.stat-card small a{color:#d0b495}.session-list p{font-size:.82rem;color:#c0c7ce;line-height:1.7}.period-switch button{color:#b0bac4;min-height:44px}.account-shortcuts a:focus-visible,.account-actions :focus-visible{outline:2px solid #e3b68e;outline-offset:3px}
@media(max-width:760px){.profile-shell{padding-top:20px}.player-header{grid-template-columns:64px minmax(0,1fr);gap:16px}.player-avatar{width:64px;height:64px}.player-identity h1{font-size:1.8rem}.account-overview{grid-template-columns:1fr}.account-vip,.account-orders{padding:22px}.account-shortcuts{grid-template-columns:1fr 1fr;gap:8px}.account-shortcuts a{padding:13px;font-size:.78rem}.statistics-heading{gap:18px}.stat-card{padding:18px 13px;min-height:120px}.stat-card strong{font-size:1.28rem}.stat-card span{font-size:.6rem;letter-spacing:.06em}.account-actions .button{flex:1}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stat-card{overflow-wrap:anywhere}.stat-card:nth-child(odd){border-right:1px solid var(--line)!important}.stat-card:last-child{grid-column:auto}.account-order{gap:8px}.order-state{max-width:110px}.connection-card{gap:16px}.demo-banner{gap:8px}}

@media(min-width:1001px){.profile-page .stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.profile-page .stat-card:nth-child(4n){border-right:1px solid var(--line)}.profile-page .stat-card:nth-child(3n){border-right:0}.profile-page .stat-card:nth-child(-n+3){border-bottom:1px solid var(--line)}.profile-page .stat-card:nth-child(n+4){border-bottom:0}}