/* personal.css — styles for personal center (pc) */
:root{
  --pc-gap:12px;
}
.pc-top{ padding:18px; margin-bottom:16px; }
.pc-stats{ display:flex; gap:var(--pc-gap); align-items:stretch; justify-content:space-between; }
.pc-stats .stat{ flex:1; background:var(--card-bg, #fff); padding:14px; border-radius:10px; box-shadow:var(--shadow, 0 6px 18px rgba(0,0,0,0.06)); text-align:center }
.pc-stats .label{ font-size:13px; color:var(--muted); margin-bottom:6px }
.pc-stats .value{ font-size:20px; font-weight:700 }

.pc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.pc-card{ display:flex; align-items:center; justify-content:center; min-height:140px; border-radius:12px; text-decoration:none; color:var(--text); background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(250,250,250,0.9)); box-shadow:0 8px 18px rgba(0,0,0,0.06); font-weight:700; font-size:18px }
.pc-card:hover{ transform:translateY(-3px); transition:transform .15s ease }
.pc-btn{ background:var(--card-bg); border:1px solid rgba(0,0,0,0.04); }

/* mobile: single column */
@media (max-width:600px){
  .pc-stats{ display:flex; gap:8px; flex-direction:row; overflow:auto }
  .pc-stats .stat{ min-width:120px }
  .pc-grid{ grid-template-columns:1fr; }
  .pc-card{ min-height:120px }
}

/* accessible focus */
.pc-card:focus{ outline:3px solid rgba(0,120,212,0.14); }

/* position logout button in header to top-right when present */
.header-inner #logout-btn{ margin-left: auto; }

/* Make logout button align exactly like the site's personal button on mobile:
   absolute at right center on small screens, revert to normal flow on larger */
.header-inner{ position: relative }
@media (max-width:420px){
  .header-inner #logout-btn{ position: absolute; right:12px; top:50%; transform:translateY(-50%); margin-left:0; padding:8px 12px; font-size:14px }
}
@media (min-width:421px){
  .header-inner #logout-btn{ position:static; transform:none; margin-left:auto }
}

/* personal-left: left-side balance/action in personal center */
.personal-left{ display:block; margin-bottom:12px }
.personal-left #personal-balance-btn{ display:inline-block }
.personal-left #personal-balance-btn .btn{ background:var(--accent, #ff6b6b); color:#fff; border-radius:8px; padding:8px 12px; text-decoration:none }

/* On desktop, position the personal-left to the left column area */
@media (min-width:601px){
  .personal-left{ float:left; width:180px; margin-right:16px }
  .pc-top{ margin-left:200px; }
}

/* On mobile, make the balance button fixed top-left but below header to avoid overlap */
@media (max-width:600px){
  .personal-left{ position:fixed; left:12px; top:64px; z-index:40 }
  .pc-top{ margin-top:72px }
}