/* CAMBOPOST_RESPONSIVE_POLISH_V1_20260914
   Stability pass for browser zoom, medium desktops and mobile. */

/* Plans should stay compact instead of becoming giant cards under browser zoom. */
.modernPlans{
  grid-template-columns:repeat(auto-fit,minmax(235px,1fr))!important;
  gap:12px!important;
  align-items:stretch!important;
}
.modernPlan{min-width:0!important;padding:18px!important;border-radius:14px!important}
.modernPlan .price{margin:14px 0!important}
.modernPlan .divider{margin:14px 0!important}
.modernPlan .check{margin:8px 0!important;line-height:1.35!important}

/* Notification center: compact floating panel that does not swallow the page. */
.notificationPanel{
  right:0!important;
  width:min(340px,calc(100vw - 20px))!important;
  max-height:min(520px,calc(100dvh - 82px))!important;
  border-radius:14px!important;
}
.notificationPanelHead{padding:10px 11px!important}
.notificationList{padding:5px!important}
.notificationItem{padding:8px 7px!important;gap:6px!important;border-radius:9px!important}
.notificationItemTitle b{font-size:9px!important}
.notificationItem p{font-size:7.7px!important;line-height:1.38!important}
.notificationItem small{font-size:6.8px!important}

/* Medium desktop / browser zoom: keep sidebar and content from overlapping. */
@media(min-width:701px) and (max-width:1180px){
  .side{width:220px!important;padding-left:11px!important;padding-right:11px!important}
  main{margin-left:220px!important;width:calc(100% - 220px)!important;min-width:0!important}
  .content{padding:22px 18px 44px!important;max-width:none!important}
  .topbar,header{padding-left:18px!important;padding-right:18px!important}
  .search{width:min(300px,38vw)!important}
  .profileMini{max-width:170px!important;min-width:0!important}
  .profileMini>span{min-width:0!important;max-width:112px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .profileMini>span small{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .modernPlan{padding:15px!important}
  .planTop{gap:8px!important}
  .planTop .planIcon{width:34px!important;height:34px!important;flex-basis:34px!important}
  .planTop h3{font-size:15px!important}
  .modernPlan .price{font-size:25px!important;margin:11px 0!important}
  .modernPlan .check{font-size:8.2px!important;margin:6.5px 0!important}
  .modernPlan .divider{margin:11px 0!important}
  .popularBadge{right:10px!important;top:10px!important}
}

@media(min-width:701px) and (max-width:900px){
  .side{width:205px!important}
  main{margin-left:205px!important;width:calc(100% - 205px)!important}
  .content{padding:18px 14px 40px!important}
  .modernPlans{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .notificationPanel{width:min(320px,calc(100vw - 18px))!important}
}

/* Phone layout: one clean card per row, full-width overlays, no horizontal drift. */
@media(max-width:700px){
  html,body,#root,.app,main,.content{max-width:100%!important;overflow-x:hidden!important}
  .content{padding:12px 10px 82px!important}
  .modernPlans{grid-template-columns:1fr!important;gap:9px!important}
  .modernPlan{padding:13px!important;border-radius:13px!important}
  .modernPlan .price{font-size:24px!important;margin:10px 0!important}
  .modernPlan .divider{margin:10px 0!important}
  .modernPlan .check{font-size:8.4px!important;margin:6px 0!important}
  .notificationPanel{
    position:fixed!important;
    top:58px!important;
    left:8px!important;
    right:8px!important;
    width:auto!important;
    max-height:calc(100dvh - 70px)!important;
    border-radius:13px!important;
  }
  .notificationPanelHead{padding:9px 10px!important}
  .notificationItem{padding:8px 7px!important}
  .notificationItemTitle b{font-size:9px!important}
  .notificationItem p{font-size:7.8px!important}
}

@media(max-width:390px){
  .content{padding-left:8px!important;padding-right:8px!important}
  .modernPlan{padding:12px!important}
  .notificationPanel{left:6px!important;right:6px!important}
}