.navbar,.navbar-expand,header.navbar,.web-footer,.footer,footer,#page-portal .page-head,.page-container .page-head{display:none!important;}body{margin:0!important;padding:0!important;}.main-section,.page_content,#body,.container{max-width:none!important;padding:0!important;margin:0!important;}


  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; overflow-x: hidden; }
  body { background: #f4f5f6; -webkit-font-smoothing: antialiased; overflow-x: hidden; width: 100%; }
  #root { width: 100%; max-width: 100vw; overflow-x: hidden; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes cpScan { 0% { top: 12% } 50% { top: 84% } 100% { top: 12% } }
  @keyframes cpPulse { 0%,100% { opacity: 1 } 50% { opacity: 0.3 } }
  select:focus { outline: none; border-color: var(--cp-brand,#A0622A) !important; }
  .cp-sidebar-desk { display: block; }
  .cp-petdetail3 { grid-template-columns: 340px 1fr; grid-template-areas: "profile records" "extras records"; }
  .cp-mini-rail { display: none; }
  .cp-bottombar { display: none; }

  /* ─── MOBILE COMPREHENSIVE FIXES ──────────────────────────────────── */
  @media (max-width: 768px) {
    /* Sidebar → replaced by bottom app bar */
    .cp-sidebar-desk { display: none; }
    .cp-mini-rail { display: none !important; }
    .cp-bottombar { display: flex !important; }
    .cp-mini-rail nav::-webkit-scrollbar { display: none; }
    .cp-burger { display: flex !important; }

    /* Auth / login */
    .cp-authleft { display: none !important; }
    .cp-mobile-full { flex-direction: column !important; }
    .cp-mobile-full > * { flex: 1 1 100% !important; max-width: 100% !important; }

    /* Grids */
    .cp-dashgrid, .cp-searchgrid, .cp-msggrid, .cp-petdetail { grid-template-columns: 1fr !important; }
    .cp-petdetail3 { grid-template-columns: 1fr !important; grid-template-areas: "profile" "records" "extras" !important; }
    .cp-petgrid3, .cp-mktgrid { grid-template-columns: 1fr 1fr !important; }

    /* Stats */
    .cp-stats { flex-wrap: wrap; }
    .cp-stats > * { min-width: 140px; flex: 1 1 45% !important; }
    .cp-statrow { flex-wrap: wrap !important; }
    .cp-statrow > * { min-width: calc(50% - 8px) !important; flex: 1 1 40% !important; }

    /* Topbar */
    .cp-topbar-search { max-width: none !important; flex: 1 1 auto !important; }
    .cp-username { display: none; }
    .cp-rolepill { display: none; }
    .cp-bell { display: none; }

    /* Tabs */
    .cp-detail-tabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; scrollbar-width: none !important; }
    .cp-detail-tabs > * { flex-shrink: 0 !important; }
    .cp-detail-tabs::-webkit-scrollbar { display: none !important; }

    /* Content area padding (reduce on mobile) */
    .cp-sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 1099; }

    /* Ensure main content doesn't overflow */
    main, [class*="cp-records-scroll"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

    /* Horizontal scrollable tables/grids */
    .cp-scroll-x { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

    /* Bottom-bar layout: full-width content, room for the bar */
    .cp-main-area { margin-left: 0 !important; }
    /* Compact spacing + clearance for the bottom app bar */
    main { padding: 16px 8px 80px !important; }
    main > div { padding-left: 4px !important; padding-right: 4px !important; }
    .cp-mini-sidebar button { -webkit-tap-highlight-color: transparent; }
  }

  @media (max-width: 480px) {
    /* Extra small */
    .cp-petgrid, .cp-petgrid3, .cp-mktgrid { grid-template-columns: 1fr !important; }
    .cp-statrow > * { min-width: 100% !important; flex: 1 1 100% !important; }
    .cp-topbar { flex-wrap: nowrap !important; gap: 8px !important; height: auto !important; min-height: 50px !important; padding: 6px 8px !important; }
    .cp-topbar-search { max-width: none !important; flex: 1 1 auto !important; min-width: 0 !important; }
    .cp-install-banner .cp-install-btn { padding: 5px 10px !important; font-size: 11px !important; }
    .cp-install-banner { padding: 6px 8px 8px !important; gap: 4px !important; }
    .cp-install-banner img { width: 24px !important; height: 24px !important; }
  }
  .cp-taskboard { grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 980px) {
    .cp-taskboard { grid-template-columns: 1fr !important; }
    .cp-hide-sm { display: none !important; }
  }
  @media (max-width: 760px) {
    .cp-att-head { display: none !important; }
    .cp-att-row { grid-template-columns: 1fr auto !important; gap: 6px !important; }
    .cp-att-row > *:nth-child(2), .cp-att-row > *:nth-child(3), .cp-att-row > *:nth-child(4) { font-size: 12px !important; }
  }
  .cp-jc-meta { grid-template-columns: repeat(4, 1fr); }
  .cp-jc-summary { flex-direction: row; }
  .cp-records-scroll { overflow-y: auto; min-height: 0; }
  @media (min-width: 769px) { .cp-records-scroll { max-height: calc(100vh - 320px); } }
  @media (max-width: 768px) { .cp-records-scroll { max-height: none; } }
  @media (max-width: 860px) {
    .cp-jc-meta { grid-template-columns: 1fr 1fr !important; }
    .cp-jc-summary { flex-wrap: wrap; }
    .cp-jc-summary > * { flex: 1 1 50% !important; }
  }
  @media (max-width: 620px) {
    .cp-jc-meta { grid-template-columns: 1fr !important; }
    .cp-jc-summary > * { flex: 1 1 100% !important; }
    .cp-jc-summary > *:first-child { border-left: none !important; }
    .cp-jc-summary > * + * { border-top: 1px solid rgba(255,255,255,0.08) !important; border-left: none !important; }
    .cp-jc-card-row { flex-wrap: wrap !important; }
    .cp-jc-card-icon { display: none !important; }
    .cp-jc-card-avatar { margin-left: 0 !important; }
  }



  .cp-jc-title { overflow-wrap: break-word; word-break: break-word; }
  .cp-install-banner { position:fixed; bottom:0; left:0; right:0; z-index:999;
    background:#1c2024; color:#fff; display:flex; align-items:center; gap:10px;
    padding:12px 16px 14px; font-family:'Inter',system-ui,sans-serif;
    font-size:13px; transform:translateY(100%); transition:transform .3s ease;
    box-shadow:0 -4px 20px rgba(0,0,0,.2); }
  .cp-install-banner.show { transform:translateY(0); }
  .cp-install-banner .cp-install-btn { background:var(--cp-brand,#A0622A); color:#fff;
    border:none; padding:9px 18px; border-radius:8px; font-weight:600;
    font-size:13px; cursor:pointer; white-space:nowrap; }
  .cp-install-banner .cp-install-btn:hover { background:#7A4A1E; }
  .cp-install-banner .cp-install-dismiss { background:none; border:none;
    color:#7c828a; cursor:pointer; font-size:16px; padding:4px; }