.xp-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0;padding:12px;background:#1d2c3d;border:1px solid #536278;border-radius:16px;color:#f4f6fa}.xp-overview[hidden]{display:none}.xp-overview>div{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;text-align:center}.xp-overview strong{font-size:1.12rem}.xp-overview small{width:100%;color:#c4d0de;font-size:.77rem}.espaturk-xp-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}.espaturk-xp-stat{padding:10px 5px;background:#2b4054;border-radius:12px;text-align:center;display:flex;flex-direction:column;gap:5px}.espaturk-xp-stat strong{color:#f2be43;font-size:clamp(.85rem,2.5vw,1.05rem)}.espaturk-xp-stat small{color:#e0e8f2;font-size:.72rem}.quiz-xp-award{background:#233b4b;color:#f2be43;border:1px solid #546c7c;border-radius:12px;padding:12px;font-weight:700}@media(max-width:480px){.xp-overview{gap:5px;padding:10px 6px}.xp-overview>div{gap:3px}.xp-overview strong{font-size:.95rem}.xp-overview small{font-size:.66rem}}

/* v78: Prevent XP amount and streak values wrapping on narrow Android displays. */
.xp-overview>div{min-width:0;flex-wrap:nowrap;column-gap:4px;row-gap:3px}
.xp-overview>div strong{white-space:nowrap;min-width:0;font-size:clamp(.72rem,3.6vw,1.12rem);font-variant-numeric:tabular-nums}
.xp-overview>div small{flex-basis:100%;white-space:nowrap}
@media(max-width:480px){.xp-overview{column-gap:4px;padding-left:6px;padding-right:45px!important}.xp-overview>div{gap:3px}.xp-overview>div strong{font-size:clamp(.7rem,3.35vw,.95rem)}.xp-overview>div small{font-size:clamp(.54rem,2.4vw,.66rem)}}

/* v79: Keep each statistic stacked; only the icon and value share a line. */
.xp-overview>div{display:grid!important;grid-template-columns:auto minmax(0,max-content);grid-template-rows:auto auto;align-content:center;align-items:center;justify-content:center;column-gap:5px;row-gap:4px;min-width:0;flex-wrap:initial!important}
.xp-overview>div>span{grid-column:1;grid-row:1;white-space:nowrap}
.xp-overview>div>strong{grid-column:2;grid-row:1;white-space:nowrap;min-width:0;font-variant-numeric:tabular-nums}
.xp-overview>div>small{grid-column:1/-1;grid-row:2;width:auto;flex-basis:auto!important;white-space:nowrap;text-align:center}
@media(max-width:480px){.xp-overview{padding:10px 46px 10px 7px!important;gap:3px!important}.xp-overview>div{column-gap:3px}.xp-overview>div>strong{font-size:clamp(.68rem,3.15vw,.94rem)!important}.xp-overview>div>small{font-size:clamp(.52rem,2.3vw,.67rem)!important}}

/* v80: Align the icon/value row left; keep the descriptive row centered. */
.xp-overview>div{justify-content:start!important;justify-items:start!important}
.xp-overview>div>small{justify-self:stretch!important;text-align:center!important}

/* v81: icon and number sit together at the LEFT of each statistic.
   Descriptions remain centered on their own row. */
.xp-overview>div{grid-template-columns:max-content max-content!important;justify-content:start!important;justify-items:start!important;column-gap:3px!important}
.xp-overview>div>span{grid-column:1!important;grid-row:1!important}
.xp-overview>div>strong{grid-column:2!important;grid-row:1!important}
.xp-overview>div>small{grid-column:1/-1!important;grid-row:2!important;justify-self:stretch!important;text-align:center!important}
/* Mobile refresh control: recognizable book + circular arrow and a caption. */
.mobile-ui #refresh{display:flex!important;flex-direction:column;justify-content:center;align-items:center;gap:1px;line-height:1!important}
.mobile-ui #refresh .refresh-icon{display:block;width:24px;height:24px}
.mobile-ui #refresh .refresh-label{display:block!important;font-size:9px;font-weight:700;white-space:nowrap;line-height:1.1}